@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-v31-latin-regul.footar.woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat-v31-latin-700.woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat-v31-latin-600.woff2');
}



:root {
  --bg: #0D1117; /* Fondo un poco más profundo */
  --card: #161B22;
  --field: #21262D;
  --border: #30363D;
  --text: #F0F6FC;
  --muted: #8B949E;

  --gold: #FFD700;
  --blue: #58A6FF;
  --mint: #00ff88;
  --orange: #E86100;
  --accent-current: var(--gold);
  --accent-ink: #0D1117;

  --font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: Montserrat, system-ui

  /* --- ASPECTO DE TELÉFONO --- */
  --phone-w: 380px; /* Ancho estándar de iPhone */
  --phone-h: 720px; /* Alto alargado */
  
  --card-pad: 32px;
  --card-radius: 40px; /* Esquinas más redondas como teléfonos modernos */
  --field-radius: 16px;
  --gap: 10px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }




body {

  

  margin: 0;
  height: 100dvh;
  display: flex;
  align-items: center; /* Centrado en desktop */
  justify-content: center;
  color: var(--text);
  font-family: var(--font);
  background: var(--bg);
  padding: 20px;
  padding-top: 2em;
  font-family: Montserrat, system-ui;
  display: flex;
  flex-direction: column;
  
  overflow-y: visible; 
  overflow-x: hidden;   

  display: flex;


  

  
}

.card {
  min-height: 0; 
  
  flex: 1; /* Ocupa el espacio disponible */
  width: 100%;
  max-width: var(--phone-w);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  padding-bottom: 15px;
  
  display: flex;
  flex-direction: column;
  
  /* Permite el scroll interno de la tarjeta */
  overflow-y: auto; 
  position: relative;
}

/* Línea decorativa superior estilo "Notch" */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--gold), var(--blue), var(--mint), var(--orange));
  z-index: 10;
}

/* --- SECCIONES REPARTIDAS --- */

.head {
  margin-top: 10px;
  margin-bottom: 15px;
}

.brand {
  display: flex;
  flex-direction: column; /* Apilado para más elegancia */
  
  align-items: center;
  text-align: center;
}

.brand-mark {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  /*background: var(--accent-current);*/
  /*color: var(--accent-ink);*/
  
  transition: all 0.3s ease;
  /*box-shadow: 0 0px 30px color-mix(in srgb, #FFD700 90%, transparent) !important;8*/
  padding-top: 0px;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
  font-family: Montserrat, system-ui;
}

.head h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  font-family: Montserrat, system-ui;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.update-line {
  justify-content: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
}

/* TABS */
.tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--field);
  border-radius: 20px;
  padding: 6px;
  margin-bottom: 10px;
  
  



}

.tab {
  z-index: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  padding: 14px 0;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

.tab.is-active { color: var(--accent-ink); }

.tab-indicator {
  position: absolute;
  top: 6px; bottom: 6px;
  background: var(--accent-current);
  border-radius: 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* INPUT AREA */
.row {
  display: flex;
  flex-direction: column; /* Apilado en vertical */
  gap: 12px;
  margin-bottom: 2px;
  margin-top: 20px;

}

#customRateSymbol {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

#customRate {
  background: transparent;
  border: 0;
  color: var(--accent-current);
  font-size: clamp(18px, 6cqw, 24px); /* Un poco más pequeño que el monto principal */
  font-family: var(--mono);
  font-weight: 700;
  width: 100%;
  outline: none;
  padding: 0;
}


.input-shell {
  background: var(--field);
  border: 2px solid transparent;
  border-radius: var(--field-radius);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
}

.input-shell:focus-within {
  border-color: var(--accent-current);
  background: transparent;
}

#amount {
   background: transparent;
  border: 0;
  color: white;
  /* Tamaño responsivo también para el input */
  font-size: clamp(20px, 8cqw, 32px); 
  font-family: var(--mono);
  letter-spacing: 0.02em;
  font-weight: 600;
  width: 100%;
  outline: none;
  padding: 0;
}

.buttons-action {
  align-self: center;
  background: var(--field);
  border: 1px solid var(--border);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: var(--accent-current);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
 
}

.portapapeles{
  
  margin-top: 0;
  display: flex;
  justify-content: center;
  
  width: 100%;
}

#text-porta{
  padding: 0.5em 1em;
  font-size: 0.8em;
  margin: 0;
 
  border-radius: 1em;
  background-color: #3e464e;
  text-align: center;
  justify-content: center;
  max-width: 500px;


  opacity: 0;
  pointer-events: none; 
  
  
  transition: opacity 1.5s ease; 
  will-change: opacity;

}

#text-porta.mostrar {
  opacity: 1;                /* Se hace visible */

  transition: opacity 0.2s ease, visibility 0.2s ease;
}



.result {
 margin-top: 20px;
  padding: 30px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px dashed var(--border);
  width: 100%;
  box-sizing: border-box;

  container-type: inline-size;
  container-name: result-area;
}

#resultCurrency {
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--accent-current);
  margin-bottom: 4px;
  text-transform: uppercase;
  
}

#resultNumber {
   font-family: var(--mono);
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  display: block;
  width: 100%;
  
  /* --- AJUSTE DINÁMICO --- */
  /* 13cqi significa "13% del ancho del contenedor". 
     Si el contenedor mide 380px, la fuente será ~49px.
     Si el número es muy largo, bajará de tamaño automáticamente. */
  font-size: 13cqi; 
  
  /* Limites para que no se vea minúsculo ni gigante */
  min-height: 1.2em;
  overflow: hidden;
  white-space: nowrap; /* Mantiene el número en una sola línea */
  text-overflow: clip;
  
  background: linear-gradient(to bottom, #fff 30%, var(--muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: font-size 0.2s ease; /* Suaviza el cambio de tamaño */
  color: white;

  letter-spacing: 0.015em;

}

.rate-line {
  margin-top: 24px;
  font-size: 13px;
  color: var(--muted);
  background: var(--field);
  padding: 6px 16px;
  border-radius: 20px;
  display: inline-block;
}


.button-div{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2em;
  width: 100%;
  padding-top: 10px;
}



#recharge{
  display: none;
}

#recharge svg {
  display: block;
  
  transition: transform 0.4s cubic-bezier(0.6, 0, 0.3, 1);
  will-change: transform;
}

/* 2. Cuando el botón se presiona, el SVG da una vuelta de 360 grados */
#recharge:active svg {
  
 
  transform: rotate(-360deg);
  
  
  transition: transform 0s; 
}

#swap svg, #refresh svg, #copy svg{

  transition: transform 0.4s cubic-bezier(0.6, 0, 0.3, 1);
  
  will-change: transform;

}

#swap:active svg, #refresh:active svg, #copy:active svg{

  transform: scale(1.2);
  
  transition: transform 0s; 

}




.footer-ad-container {
  flex-shrink: 0; /* EVITA que se aplaste verticalmente en Flexbox */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  overflow: hidden; /* Seguridad extra contra desbordamientos */

  display: none;
  
  
}

.ad-container {
  width: 100%;
  max-width: 320px;  /* Mide 320px en el 99% de los teléfonos, pero se encoge si la pantalla es de 280px */
  min-height: 50px;  /* Reserva el espacio vertical de 50px sin usar !important */
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  
}











































/* Contenedor principal de la información legal y SEO */
.info-legal-container {
     margin-top: auto; 
    flex-shrink: 0; /* Para que la tabla de divisas no aplaste estos textos */
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Estilos para el bloque de texto SEO */
.seo-text {
    color: #ffffff; /* Un gris azulado que combina bien con el fondo oscuro */
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: center;
}

.seo-text h2 {
    color: #ffffff; /* Un tono un poco más claro para el título */
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.seo-text p {
    margin-bottom: 0.75rem;
}

.seo-text p:last-child {
    margin-bottom: 0;
}

/* Estilos para el pie de página legal */
.legal-footer {
    text-align: center;
}

a {
    color: #FFD700; /* El color amarillo de tu logo */
    font-size: 1rem;
    text-decoration: none;
    opacity: 0.8; /* Ligeramente transparente para no destacar demasiado */
    transition: opacity 0.2s ease, text-decoration 0.2s ease;
    text-decoration: underline;
    margin-left: 1em;
}

.legal-link:hover,
.legal-link:focus {
    opacity: 1; /* Se vuelve completamente opaco al pasar el ratón */
    text-decoration: underline;
}











































/* Adaptación para que en móviles reales ocupe toda la pantalla */
@media (max-width: 480px) {
  body { padding: 0; 
  overflow-x: hidden;}


  .card {
    overflow-x: hidden;
    flex: 1;
    max-width: 100%;
    min-height: auto;
    border-radius: 0;
    border: 0;
  }

  a{
    font-size: 12px;
  }

  .seo-text h2{
    font-size: 13px;
  }
  
  .seo-text p{
    font-size: 12px;
  }


  #text-porta{
    font-size: 0.6em;
  }

  svg{
    height: 22px;
    width: 22px;
  }
  
  .buttons-action{

    height: 45px;
    width: 45px;

  }

  .result{
    margin: 7px;
    padding-top: 5px;
  }


  .info-legal-container {
    margin-top: 2dvh;
  }



}

#symbol{
  font-size: 22px;
  font-weight: 400;
  color: var(--accent-current);



}



  




@container result-area (width > 0) {
  #resultNumber {
    /* Si ves que se sigue saliendo, baja el 13 a 11 */
    font-size: 12.5cqi; 
  }

  
  



}


@media screen and (min-width: 600px){

  
 

  #resultNumber{
    font-size: 40px !important;
  }

}

@media screen and (min-width: 730px) {
  




    body {
    
    
    padding-top: 2em;
    padding-bottom: 2em;
   
    
    
    
  }



  #updateLine{
    font-size: 15px;
    font-weight: 700;
  }

  .card {
    --phone-w: 90vw; 
    width: 95%;
    max-width: var(--phone-w);
    
   
    height: 100%; /* tome el máximo que el flex: 1 le permite */
    max-height: 850px; /* Límite para que no se vea ridícula en monitores gigantes */
    
    border-radius: 44px; 
    padding: 20px; 
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  /* Ocultar barra de scroll de la tarjeta */
  .card::-webkit-scrollbar { display: none; }
  .card { -ms-overflow-style: none; scrollbar-width: none; }

  /* Ajustes visuales para aprovechar el ancho extra */
  .brand-mark {
    width: 100px;
    height: 100px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    /*filter: drop-shadow(0 0px 40px color-mix(in srgb, var(--accent-current) 50%, transparent));*/

    
  }

  

  .head h1 {
    font-size: 32px;
  }

  .input-shell {
    padding: 15px; /* Inputs más grandes y cómodos */
  }

  #amount {
    font-size: 40px; /* Número de entrada más grande */
  }

  .result {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  


  
  
  #resultNumber {
    /* 
       Forzamos un tamaño fijo inicial en lugar de cqi. 
       Esto evita que crezca solo por el hecho de ensanchar la tarjeta.
    */
    font-size: 53px !important; 
    
    
  }

 
  button{
    font-size: 25px !important;
    
  }

  #rateLine{
    font-size: 15px;
    font-weight: 400;
  }

  #brand-text{
    margin-top: 0px;
    padding-top: 0px;
  }


  .footer-ad-container {
    margin-top: 20px;
    width: 100%;           /* Ocupa el ancho de la pantalla */
    display: flex;
    justify-content: center; /* Centra el anuncio perfectamente en el medio */
  }

  .ad-container {
    width: 100%;
    max-width: 728px;      /* En PC no crecerá más de 728px */
    min-height: 90px;      /* Reserva los 90px de alto para que no haya saltos visuales */
  }
  

}