/* ==========================================================================
   NapoGold — base.css
   Reset, tipografía, utilidades y los dos componentes que se repiten por
   todo el sitio: botones y cifras de dinero.

   MÓVIL PRIMERO. Los valores base son los del teléfono; las media queries
   solo AÑADEN para pantallas más anchas (min-width), nunca al revés.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--obsidiana);
  color: var(--tinta);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip y no hidden: hidden convierte el body en contenedor de scroll y
     rompe position: sticky en los descendientes (el recorrido del proceso). */
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}
@media (min-width: 760px) {
  body { font-size: 17px; line-height: 1.6; }
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
strong { font-weight: 700; }

/* --- Escala tipográfica ---------------------------------------------------- */

/* Etiqueta pequeña en mayúsculas. Abre casi todas las secciones. */
.etiqueta {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--track-ancho);
  text-transform: uppercase;
  color: var(--tinta-dim);
}
.etiqueta-oro { color: var(--oro-claro); }

/* Titular de portada. Estrecho y pesado: en 335 px caben 4 líneas grandes
   sin partir palabras. */
.display {
  font-family: var(--display);
  font-stretch: var(--ancho-display);
  font-weight: var(--peso-display);
  font-size: clamp(40px, 11.2vw, 96px);
  line-height: .98;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* Titular de sección */
.titulo {
  font-family: var(--display);
  font-stretch: var(--ancho-display);
  font-weight: var(--peso-display);
  font-size: clamp(34px, 9vw, 76px);
  line-height: 1;
  letter-spacing: -.022em;
  text-wrap: balance;
}

.titulo-3 {
  font-family: var(--display);
  font-stretch: 88%;
  font-weight: 650;
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.2;
  letter-spacing: -.012em;
}

/* Párrafo de entrada de sección */
.entradilla {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--tinta-dim);
  max-width: var(--ancho-texto);
  text-wrap: pretty;
}

.texto-s {
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta-dim);
  text-wrap: pretty;
}

.texto-xs {
  font-size: 13px;
  line-height: 1.55;
  color: var(--tinta-faint);
}

/* Oro aplicado a texto. El color sólido queda de respaldo. */
.oro { color: var(--oro-claro); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .oro {
    background: var(--oro-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* El final de la historia: el oro ya es dinero */
.dinero { color: var(--jade-claro); }

/* ==========================================================================
   CIFRAS DE DINERO
   El elemento más importante del sitio. Un valor en pesos tiene que leerse
   como el dato principal de la pantalla, no como texto secundario.

   · tabular-nums es obligatorio: sin él, los dígitos tienen anchos distintos
     y el número "baila" mientras el contador sube.
   · Van en la voz más estrecha de Archivo (--ancho-cifra, 72 %). Es lo que
     permite que $2.064.500 ocupe casi todo el ancho de un teléfono.
   ========================================================================== */
.cifra {
  font-family: var(--display);
  font-stretch: var(--ancho-cifra);
  font-weight: var(--peso-cifra);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -.01em;
  line-height: .95;
  white-space: nowrap;
}

/* El caso extremo es de 11 caracteres ($41.290.000 = 100 g de italiano).
   A 13vw cabe con holgura en el panel del simulador a 320 px de ancho. */
.cifra-xl { font-size: clamp(46px, 13vw, 84px); }
.cifra-l  { font-size: clamp(38px, 10vw, 64px); }
.cifra-m  { font-size: clamp(28px, 7.4vw, 40px); }
.cifra-s  { font-size: 20px; }

/* El símbolo $ va algo menor y separado: la cantidad es la protagonista */
.cifra .simbolo {
  font-size: .56em;
  font-weight: 600;
  margin-right: .06em;
  vertical-align: .56em;
  color: var(--tinta-dim);
}

/* La cifra confirmada — el resultado del simulador, la tarifa destacada */
.cifra-valor { color: var(--oro-claro); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .cifra-valor {
    background: var(--oro-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* --- Layout ---------------------------------------------------------------- */
.envoltorio {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion {
  position: relative;
  padding-block: var(--seccion-pad);
  /* Al saltar desde el menú, el titular queda justo bajo la barra fija, sin
     el hueco del padding superior encima (que en un teléfono es media
     pantalla vacía). */
  --pad-arriba: var(--seccion-pad);
  scroll-margin-top: calc(var(--alto-barra) + env(safe-area-inset-top, 0px) + 8px - var(--pad-arriba));
}

.cabecera-seccion {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  margin-bottom: clamp(32px, 6vw, 72px);
  max-width: 900px;
}
@media (min-width: 760px) {
  .cabecera-seccion { gap: var(--e3); }
}

.regla {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--linea-oro), transparent);
}

/* ==========================================================================
   BOTONES
   52 px de alto: por encima del mínimo táctil de 44–48 px, con aire para el
   pulgar. El texto describe la acción ("Calcular mi oro"), nunca "Más info".
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--radio-pill);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.2;
  text-align: center;
  min-height: 52px;
  transition: transform var(--dur-rapida) var(--ease-salida),
              filter var(--dur-rapida) var(--ease-salida),
              border-color var(--dur-rapida) var(--ease-salida),
              background-color var(--dur-rapida) var(--ease-salida);
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
}
.btn:active { transform: scale(.98); }

/* Principal: oro real con gradiente y texto oscuro encima (8.9:1). */
.btn-oro {
  background: var(--oro-grad-suave);
  color: var(--tinta-oscura);
  box-shadow: var(--sombra-oro);
}
.btn-oro:hover { filter: brightness(1.07); }

.btn-linea {
  border: 1px solid var(--linea-fuerte);
  color: var(--tinta);
  background: rgba(8, 8, 10, .35);
}
.btn-linea:hover {
  border-color: var(--oro-linea);
  background: rgba(168, 121, 43, .09);
}

/* WhatsApp: verde reconocible, sin inventar otro color */
.btn-wa {
  background: #1FA855;
  color: #FFFFFF;
}
.btn-wa:hover { filter: brightness(1.08); }

.btn-bloque { width: 100%; }

.btn .ico { width: 20px; height: 20px; flex: none; }

/* --- Iconos ---------------------------------------------------------------- */
.ico {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sprite-iconos { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   ACCESIBILIDAD
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--oro-claro);
  outline-offset: 3px;
  border-radius: 3px;
}

.salta-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 14px 22px;
  background: var(--carbon);
  border: 1px solid var(--oro-linea);
  border-radius: var(--radio-s);
}
.salta-al-contenido:focus { left: var(--margen); top: var(--e2); }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Entrada del bloque del video ----------------------------------------
   Escalonada con transition-delay, no con una libreria. Corta a propósito:
   todo entra en menos de medio segundo cuando el bloque llega a pantalla. */
.js .hero [data-revela] { transition-delay: 0ms; }
.js .hero__titulo   { transition-delay: 80ms; }
.js .hero__sub      { transition-delay: 160ms; }
.js .hero__acciones { transition-delay: 220ms; }

/* --- Revelado --------------------------------------------------------------
   Estado inicial solo si JS está vivo: sin JS se ve todo, siempre.

   El revelado es CSS puro, disparado por una clase que pone
   IntersectionObserver. NO se hace con GSAP a propósito: si la librería
   tarda, falla o su ticker no corre (una pestaña en segundo plano congela
   requestAnimationFrame), el contenido se quedaría invisible. Una transición
   CSS no depende de nada de eso.                                            */
.js [data-revela] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-salida), transform .7s var(--ease-salida);
}
.js [data-revela].esta-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   MOVIMIENTO REDUCIDO
   La narrativa sigue funcionando: todo aparece en su estado final y las
   cifras se escriben directamente en vez de contar.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-revela] { opacity: 1 !important; transform: none !important; }
}