/* Polaris — estilos exclusivos de la portada.
   Carga DESPUÉS de estilo.css, que aporta los tokens y las páginas de documento.

   La idea que ordena todo: el dinero viaja en el tiempo. Compras en enero y lo
   pagas en marzo. Por eso el movimiento de la página es siempre HORIZONTAL y de
   izquierda a derecha, como una línea de tiempo, y el momento central de la
   portada es una compra desplazándose entre meses. */

/* ---------- Fondo vivo ---------- */

.aurora {
  position: fixed; inset: -20vh -10vw; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 18% 22%, rgba(24,131,255,.22), transparent 62%),
    radial-gradient(32vw 32vw at 82% 34%, rgba(138,111,240,.16), transparent 62%),
    radial-gradient(40vw 40vw at 52% 88%, rgba(52,199,166,.10), transparent 62%);
  filter: blur(30px);
  animation: derivar 34s ease-in-out infinite alternate;
}
@keyframes derivar {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* Grano: le quita el plástico a los degradados. */
.grano {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .16;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='140' height='140' filter='url(%23r)' opacity='.5'/></svg>");
}

/* ---------- Tipografía de portada ---------- */

.display {
  font-size: clamp(2.7rem, 9.5vw, 7.5rem);
  line-height: .92;
  letter-spacing: -.045em;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
.display .tenue { color: var(--texto-tenue); }
.display .marcado {
  background: linear-gradient(100deg, #5FB0FF 0%, #1883FF 45%, #8A6FF0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.kicker {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--texto-tenue);
  display: flex; align-items: center; gap: 10px;
}
.kicker::before {
  content: ""; width: 26px; height: 1px; background: var(--acento); flex: none;
}

/* Los montos siempre con cifras de ancho fijo: si bailan, se ven baratos. */
.cifra { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

::selection { background: rgba(24,131,255,.32); color: #fff; }

/* ---------- Entrada escalonada ---------- */

.js .revelar {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.85,.2,1), transform .7s cubic-bezier(.22,.85,.2,1);
  transition-delay: var(--retraso, 0s);
}
.js .revelar.visible { opacity: 1; transform: none; }

/* ---------- Hero ---------- */

.portada-hero {
  min-height: 88vh; display: flex; align-items: center;
  padding: 96px 0 64px;
}
.hero-fila { display: grid; gap: 44px; align-items: center; grid-template-columns: 1.15fr .85fr; }
@media (max-width: 900px) { .hero-fila { grid-template-columns: 1fr; } }

.hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--texto-suave); max-width: 46ch; margin: 26px 0 0;
}
.hero-meta { margin-top: 34px; display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.pastilla {
  border: 1px solid var(--borde); border-radius: 999px;
  padding: 9px 16px; font-size: .84rem; color: var(--texto-suave);
  background: rgba(22,27,36,.6);
}
.pastilla b { color: var(--texto); font-weight: 600; }

/* Estrella de la marca, con su latido */
.estrella { position: relative; width: 100%; aspect-ratio: 1; max-width: 380px; margin-inline: auto; }
.estrella svg { width: 100%; height: 100%; display: block; }
.estrella .halo {
  position: absolute; inset: 18%;
  background: radial-gradient(circle, rgba(24,131,255,.42), transparent 68%);
  filter: blur(28px); animation: latir 5.5s ease-in-out infinite;
}
@keyframes latir { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
.orbita { transform-origin: 50% 50%; animation: girar 26s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- El viaje de una compra ---------- */

.viaje { padding: 96px 0 110px; }
.viaje-encabezado { max-width: 640px; margin-bottom: 54px; }

.linea {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-top: 78px;
}

/* El riel y la compra que lo recorre */
.riel {
  position: absolute; top: 34px; left: 6%; right: 6%; height: 2px;
  background: linear-gradient(90deg, var(--borde), rgba(24,131,255,.5), var(--borde));
  border-radius: 2px;
}
.riel .hito {
  position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 999px;
  background: var(--fondo); border: 2px solid var(--borde);
  transform: translate(-50%, -50%); transition: border-color .4s, background .4s;
}
.riel .hito.on { border-color: var(--acento); background: var(--acento); }

.compra {
  position: absolute; top: -22px; left: 6%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: var(--tarjeta); border: 1px solid var(--acento);
  border-radius: 999px; padding: 7px 14px 7px 8px;
  font-size: .82rem; white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 0 6px rgba(24,131,255,.08);
  will-change: left;
}
.compra .chip {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  background: #8A6FF0; display: grid; place-items: center; font-size: 11px;
}
.compra b { font-weight: 700; }

.mes {
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: rgba(22,27,36,.55);
  padding: 20px 18px 18px; min-height: 148px;
  transition: border-color .45s, background .45s, transform .45s;
}
.mes.activo {
  border-color: rgba(24,131,255,.55);
  background: rgba(24,131,255,.07);
  transform: translateY(-4px);
}
.mes .nombre { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }
.mes .total {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 700;
  letter-spacing: -.03em; margin-top: 6px;
  transition: color .45s;
}
.mes.activo .total { color: var(--acento); }
.mes .nota { font-size: .78rem; color: var(--texto-tenue); margin-top: 8px; min-height: 2.6em; }

.paso-actual {
  margin-top: 30px; font-size: .95rem; color: var(--texto-suave);
  display: flex; align-items: center; gap: 10px; min-height: 1.6em;
}
.paso-actual .num {
  width: 22px; height: 22px; border-radius: 999px; flex: none;
  border: 1px solid var(--acento); color: var(--acento);
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
}

/* ---------- Modos, como el carrusel de la app ---------- */

.modos { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .modos { grid-template-columns: 1fr; } }

.modo-lista { list-style: none; margin: 26px 0 0; padding: 0; }
.modo-lista li {
  padding: 15px 0 15px 20px; border-left: 2px solid var(--borde);
  color: var(--texto-tenue); cursor: pointer;
  transition: color .35s, border-color .35s, padding-left .35s;
}
@media (hover: hover) { .modo-lista li:hover { color: var(--texto-suave); } }
.modo-lista li.on {
  color: var(--texto); border-color: var(--acento); padding-left: 26px;
}
.modo-lista .t { display: block; font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; }
.modo-lista .d { display: block; font-size: .86rem; color: var(--texto-tenue); margin-top: 2px; }

/* ---------- Teléfonos con profundidad ---------- */

.telefono { transition: transform .8s cubic-bezier(.22,.85,.2,1); }
.js .flota { transform: translateY(var(--flote, 0px)); }

/* ---------- Funciones ---------- */

.tarjeta {
  transition: border-color .35s, transform .35s, background .35s;
}
/* Sin el guardia de `hover`, en un teléfono el estado se queda pegado después
   de tocar la tarjeta y parece seleccionada para siempre. */
@media (hover: hover) {
  .tarjeta:hover {
    border-color: rgba(24,131,255,.4);
    transform: translateY(-3px);
    background: #19202B;
  }
}

/* ---------- Declaración de privacidad ---------- */

.declaracion {
  font-size: clamp(1.6rem, 4.4vw, 3.1rem);
  line-height: 1.14; letter-spacing: -.035em; font-weight: 700;
  max-width: 15ch; text-wrap: balance;
}
.declaracion em { font-style: normal; color: var(--texto-tenue); }

/* ---------- Cierre ---------- */

.cierre { padding: 110px 0 120px; text-align: center; }
.correo-grande {
  display: inline-block; margin-top: 22px;
  font-size: clamp(1.1rem, 3vw, 1.9rem); font-weight: 600;
  letter-spacing: -.02em; text-decoration: none; color: var(--texto);
  border-bottom: 2px solid rgba(24,131,255,.45); padding-bottom: 4px;
  transition: border-color .3s, color .3s;
}
.correo-grande:hover { color: var(--acento); border-color: var(--acento); }

/* ---------- Quien pidió menos movimiento, no lo tiene ---------- */

@media (prefers-reduced-motion: reduce) {
  .aurora, .estrella .halo, .orbita { animation: none !important; }
  .js .revelar { opacity: 1; transform: none; transition: none; }
  .compra, .mes, .telefono { transition: none !important; }
}


/* ═══════════ Móvil ═══════════
   Mismo punto de quiebre que estilo.css: 760px. */

@media (max-width: 760px) {
  /* El aurora con blur de 30px sobre un área enorme es caro en móvil. */
  .aurora { filter: blur(22px); opacity: .8; }
  .grano { opacity: .1; }

  /* Sin alto mínimo: en un teléfono, forzar 88vh solo mete aire vacío antes
     del titular, y además el alto cambia cuando Safari muestra u oculta su
     barra. Que la sección mida lo que mide su contenido. */
  .portada-hero { min-height: auto; padding: 44px 0 36px; }
  .hero-fila { gap: 24px; }

  /* El titular baja de tamaño lo justo para que "Lo pagas en marzo." quepa en
     una línea: partido en dos deja "marzo." solo y se pierde el remate.
     Los h2 traen su propio font-size en línea, así que esto solo toca al h1. */
  .display { font-size: clamp(2.3rem, 8.8vw, 3.4rem); letter-spacing: -.03em; line-height: .98; }

  .estrella { max-width: 190px; }
  .hero-sub { font-size: 1rem; margin-top: 20px; }
  .hero-meta { gap: 8px; margin-top: 22px; }
  .pastilla { padding: 7px 13px; font-size: .8rem; }

  /* ---- El viaje de una compra ---- */
  .viaje { padding: 46px 0 40px; }
  .viaje-encabezado { margin-bottom: 30px; }
  .linea { gap: 8px; padding-top: 66px; }
  .riel { left: 13%; right: 13%; top: 30px; }
  .mes { padding: 13px 10px 12px; min-height: 0; border-radius: 14px; }
  .mes .nombre { font-size: .62rem; letter-spacing: .05em; }
  .mes .total { font-size: 1.1rem; margin-top: 4px; }
  /* La nota se queda: sin ella las tres tarjetas quedan casi vacías y la
     escena pierde justo lo que explica. Solo baja de tamaño. */
  /* Sube un tono: a .62rem, el gris tenue se queda por debajo del contraste
     mínimo legible. */
  .mes .nota { font-size: .62rem; line-height: 1.4; margin-top: 6px; min-height: 0; color: var(--texto-suave); }

  /* El chip se queda solo con el ícono y el monto: con el nombre medía más que
     una columna y se cortaba en los extremos del riel. */
  .compra { font-size: .74rem; padding: 6px 11px 6px 6px; gap: 6px; top: -20px; }
  .compra .nombre-compra { display: none; }
  .compra .chip { width: 19px; height: 19px; font-size: 10px; }

  .paso-actual { font-size: .86rem; margin-top: 20px; align-items: flex-start; }
  .paso-actual .num { margin-top: 1px; }

  /* ---- Secciones de dos columnas ---- */
  .modos { gap: 24px; }
  /* En las secciones que traen el teléfono primero, en móvil va el texto arriba:
     leer antes de ver ordena mejor la lectura en una columna. */
  .modos > .texto-primero { order: -1; }

  .modo-lista { margin-top: 20px; }
  .modo-lista li { padding: 11px 0 11px 16px; }
  .modo-lista li.on { padding-left: 20px; }
  .modo-lista .t { font-size: 1rem; }
  .modo-lista .d { font-size: .84rem; }

  .declaracion { max-width: none; }
  .cierre { padding: 48px 0 56px; }
  /* Un correo largo no cabe a 1.05rem en 375px: que rompa por donde sea antes
     que desbordar la página de lado. */
  .correo-grande { font-size: 1.02rem; overflow-wrap: anywhere; }
}

/* Pantallas muy angostas (iPhone SE de primera generación, 320px). */
@media (max-width: 360px) {
  .display { font-size: 2rem; }
  .linea { gap: 6px; padding-top: 62px; }
  .mes { padding: 11px 8px 10px; }
  .mes .total { font-size: 1rem; }
  .mes .nota { display: none; }        /* con ~92px de ancho, ya no se lee */
  .pastilla { font-size: .76rem; }
}