/* Hallmark · genre: atmospheric · macrostructure: Narrative Workflow · theme: custom (Novastra:
 * papel oscuro L10.8% · display geometrico-sans · acento frio 288°) · enrichment: none (capturas
 * reales, sin cromo dibujado) · nav: N5 pastilla flotante · footer: Ft5 declaracion
 *
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5
 *
 * La forma: la pagina es la linea de tiempo de usar la app. Cuatro fases numeradas (1.0 eliges,
 * 2.0 apuntas, 3.0 se convierte en dato, 4.0 subes de rango), cada una con su regla gruesa, su
 * captura real y sus hechos. La version anterior era hero -> cifras -> bloques alternos -> CTA,
 * que es la forma que emite cualquier generador; esta cuenta el producto en el orden en que se
 * usa, que es de lo que va Novastra.
 *
 * Los colores y las fuentes salen SIEMPRE de tokens.css. Ni un hex ni una font-family suelta.
 */

@import url("/tokens.css");

/* --------------------------------------------------------------------- fuentes autoalojadas */

@font-face {
  font-family: "Orbitron";
  src: url("/fonts/orbitron_black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rajdhani";
  src: url("/fonts/rajdhani_medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rajdhani";
  src: url("/fonts/rajdhani_bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------- base */

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

html,
body {
  /* clip y no hidden: hidden en el elemento raiz rompe position: sticky */
  overflow-x: clip;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--color-paper);
  /* Dos resplandores fijos, sin animar: es lo que el genero atmospheric permite y es el cielo
     que ya tiene la app. No hay blobs organicos ni malla aurora. */
  background-image:
    radial-gradient(38% 30% at 12% 0%, var(--color-bloom-1), transparent 70%),
    radial-gradient(30% 26% at 92% 12%, var(--color-bloom-2), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--color-signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-ink); }

:focus-visible {
  /* Nunca se anima: el aro tiene que estar en el primer fotograma del foco. */
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  line-height: 1.06;
  margin: 0;
  /* Palabras largas del castellano ("constelaciones") no pueden desbordar a 320 px. */
  overflow-wrap: anywhere;
  min-width: 0;
}

p { margin: 0; }

.marco {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.salta {
  position: absolute;
  left: -9999px;
}
.salta:focus {
  left: var(--space-sm);
  top: var(--space-sm);
  z-index: calc(var(--z-nav) + 1);
  background: var(--color-paper-3);
  color: var(--color-ink);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------- N5 · pastilla flotante */

.pastilla {
  position: sticky;
  top: var(--space-sm);
  z-index: var(--z-nav);
  width: fit-content;
  max-width: calc(100% - var(--space-md));
  margin: var(--space-sm) auto 0;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-3xs) var(--space-3xs) var(--space-xs);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-veil);
  backdrop-filter: blur(14px);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.marca img { width: 24px; height: 24px; }

.pastilla__sep {
  width: var(--rule-thin);
  height: 20px;
  background: var(--color-rule);
}

.pastilla a.enlace {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.pastilla a.enlace:hover { color: var(--color-ink); }
.pastilla a.enlace[aria-current="true"] { color: var(--color-ink); }

/* --------------------------------------------------------------------- CTA */

/* La insignia OFICIAL de Google Play.
   Se sirve tal cual la da Google: sin recolorear, sin recortar, sin sombras y sin filtros al
   pasar por encima. Sus normas de marca lo prohiben, y ademas una insignia con un hover raro se
   lee como una imitacion. Lo unico que cambia al pasar es el aro de foco del navegador, que va
   por fuera de la imagen.

   `line-height: 0` no es un capricho: sin el, la caja del enlace deja una franja bajo la imagen
   y la insignia queda desalineada con el boton de al lado. */
.insignia {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
  /* Que NUNCA la encoja el flex del padre. Medido en la pastilla del menu a 375 px: se quedaba
     en 58 px de ancho y 17 de alto, la mitad del minimo que exige Google (40 px de alto) y
     completamente ilegible. Una insignia deformada es peor que ninguna insignia. */
  flex: none;
}
.insignia img {
  display: block;
  width: 190px;   /* la insignia queda a ~57 px de alto; el minimo de Google son 40 */
  height: auto;
}
.insignia.pequeno img { width: 140px; }
/* En movil la insignia del menu no cabe con el logo y los dos enlaces, y ademas sobra: la
   grande esta a un dedo de scroll, en la portada. */
@media (max-width: 560px) {
  .insignia.pequeno { display: none; }
}

.tienda {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  /* Relleno plano de un solo acento. La version anterior tenia un degradado violeta -> rosa,
     que es el tell de IA mas reconocido que existe en un boton. */
  background: var(--color-accent-deep);
  color: var(--color-accent-ink);
  border: 0;
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  /* Una sola cosa cambia al pasar por encima: el color. Sumar desplazamiento, escala y sombra
     a la vez es el tell de "todos los botones hacen todo". El 1 px de hundimiento se queda
     para :active, que si es una interaccion fisica. */
  transition:
    background-color var(--dur-short) var(--ease-out),
    transform 90ms var(--ease-out);
}
.tienda:hover {
  background: var(--color-accent-hi);
  color: var(--color-paper);
}
.tienda:active { transform: translateY(1px); }
.tienda svg { width: 15px; height: 17px; flex: none; }
.tienda small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.78;
}
.tienda.pequeno { padding: var(--space-2xs) var(--space-sm); }
.tienda.pequeno small { display: none; }

.tienda--fantasma {
  background: transparent;
  color: var(--color-ink);
  border: var(--rule-thin) solid var(--color-rule-hi);
}
.tienda--fantasma:hover {
  background: var(--color-paper-3);
  color: var(--color-ink);
}

/* --------------------------------------------------------------------- portada */

.portada {
  /* Sin min-height: 100vh y sin centrar: el alto es el de su contenido y el peso cae a la
     izquierda. */
  /* Abajo pesa mas que arriba (1,4x): con el hueco simetrico la portada flota en vez de
     entrar en el ritmo de la seccion siguiente. */
  padding-block: clamp(var(--space-xl), 8vh, var(--space-2xl)) var(--space-3xl);
}

.portada__reja {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}

.portada h1 {
  font-size: var(--text-display);
  max-width: 18ch;
}
.portada h1 .brilla {
  /* El verbo se marca con color y una banda detras, no con cursiva ni degradado de texto.
     La banda va a la altura de la x (38 %-92 % del alto de linea): pegada a la linea de base
     se lee como un subrayado gordo, que es el error de siempre. */
  color: var(--color-accent-hi);
  background-image: linear-gradient(
    180deg,
    transparent 38%,
    var(--color-band) 38%,
    var(--color-band) 92%,
    transparent 92%
  );
}

.portada__lede {
  margin-top: var(--space-md);
  max-width: 46ch;
  font-size: var(--text-lg);
  color: var(--color-muted);
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  /* Los dos botones no miden lo mismo (uno lleva dos lineas): sin esto, el flex los estira y
     la fila pierde la linea de base. */
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.portada__nota {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-dim);
}

.captura {
  margin: 0;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-shot);
  overflow: hidden;
  background: var(--color-paper-2);
}
/* Recortadas por abajo a proposito. Una captura de movil entera son 1.322 px de alto: puesta a
   ancho completo se come la primera pantalla y el titular queda partido por el borde. Se ve la
   parte de arriba, que es donde esta lo que cuenta cada fase. */
.captura img {
  width: 100%;
  max-height: min(56vh, 520px);
  object-fit: cover;
  object-position: top center;
}
.portada .captura img { max-height: min(52vh, 460px); }

/* --------------------------------------------------------------------- fases (la espina) */

.fases { counter-reset: fase; }

.fase {
  padding-block: var(--space-2xl);
}

/* La regla gruesa numerada: el numeral se sienta encima de la linea y la linea se dibuja de
   izquierda a derecha cuando la fase entra. Es la unica animacion de scroll de la pagina. */
.fase__regla {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  border-top: var(--rule-thick) solid var(--color-rule-hi);
  padding-top: var(--space-sm);
  transform-origin: left center;
}

.fase__num {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 900;
  color: var(--color-signal);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.fase__etiqueta {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-dim);
}

.fase__reja {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-lg);
  align-items: center;
}

.fase h2 {
  font-size: var(--text-display-s);
  max-width: 24ch;
}

.fase__cuerpo {
  margin-top: var(--space-md);
  max-width: var(--medida);
  color: var(--color-muted);
}

.hechos {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
}
/* La lista de programas son DIEZ nombres cortos ("PPL 6 dias"): en una columna son diez lineas
   que se leen como un scroll, y en dos se leen como un conjunto. Solo cuando hay sitio: por
   debajo de 30rem de columna, una sola. */
.fase--programas .hechos {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  column-gap: var(--space-md);
}
.hechos li {
  position: relative;
  padding-left: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.hechos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--color-signal);
}

/* El criterio con el que estan montados los diez programas.
   Con pelo a la izquierda y no dentro de una tarjeta: es la letra pequena que respalda el
   titular, no otra pieza compitiendo con el. El pelo va del acento porque es lo unico de este
   bloque que afirma algo comprobable. */
.fase__criterio {
  margin-top: var(--space-md);
  padding-left: var(--space-sm);
  border-left: var(--rule-thick) solid var(--color-accent-hi);
  max-width: var(--medida);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.fase__criterio b {
  color: var(--color-ink);
  font-weight: 600;
}

/* La escalera de los nueve rangos: una lista con pelo, no nueve tarjetas. Es el juego entero
   y se lee de arriba abajo, que es como se sube. */
.escalera__titulo {
  margin-top: var(--space-lg);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-dim);
}
.escalera {
  list-style: none;
  counter-reset: rango;
  margin: var(--space-sm) 0 0;
  padding: 0;
  border-top: var(--rule-thin) solid var(--color-rule);
  max-width: var(--medida);
}
.escalera li {
  counter-increment: rango;
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding: var(--space-2xs) 0;
  border-bottom: var(--rule-thin) solid var(--color-rule);
  font-size: var(--text-sm);
}
.escalera li::before {
  content: counter(rango);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--color-dim);
  font-variant-numeric: tabular-nums;
  min-width: 1.6em;
}
.escalera b { color: var(--color-ink); font-weight: 700; }
.escalera span { color: var(--color-dim); font-size: var(--text-xs); }
.escalera li:last-child b { color: var(--color-accent-hi); }

/* --------------------------------------------------------------------- cifras */

.cifras {
  padding-block: var(--space-xl);
  border-top: var(--rule-thin) solid var(--color-rule);
  border-bottom: var(--rule-thin) solid var(--color-rule);
}
.cifras dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  margin: 0;
}
.cifras dt {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cifras dd {
  margin: var(--space-3xs) 0 0;
  font-size: var(--text-sm);
  color: var(--color-dim);
  max-width: 26ch;
}

/* --------------------------------------------------------------------- lo que no hay */

.limpio { padding-block: var(--space-2xl); }
.limpio h2 { font-size: var(--text-display-s); max-width: 20ch; }
.limpio__cuerpo {
  margin-top: var(--space-md);
  max-width: var(--medida);
  color: var(--color-muted);
}
.no-hay {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs) var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
}
.no-hay li {
  position: relative;
  padding-left: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.no-hay li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-signal);
}

/* --------------------------------------------------------------------- guias */

.guias { padding-block: var(--space-2xl); }
.guias h2 { font-size: var(--text-xl); }
.guias__lista {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  border-top: var(--rule-thin) solid var(--color-rule);
}
.guias__lista li { border-bottom: var(--rule-thin) solid var(--color-rule); }
.guias__lista a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  color: var(--color-ink-2);
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-out);
}
.guias__lista a:hover { color: var(--color-ink); }
.guias__lista span { font-size: var(--text-xs); color: var(--color-dim); white-space: nowrap; }

/* --------------------------------------------------------------------- cierre */

.cierre {
  padding-block: var(--space-2xl) var(--space-xl);
  text-align: center;
}
/* Solo el logo del cierre. Antes era `.cierre img` a secas y le cuadraba tambien la insignia
   de Play, que salia de 84x84: misma especificidad y esta regla va despues, asi que ganaba. */
.cierre > .marco > img { width: 84px; height: 84px; margin-inline: auto; border-radius: 20px; }
.cierre h2 {
  font-size: var(--text-display-s);
  margin-top: var(--space-md);
  margin-inline: auto;
  max-width: 22ch;
}
.cierre p {
  margin: var(--space-sm) auto 0;
  max-width: 48ch;
  color: var(--color-muted);
}
.cierre .tienda,
.cierre .insignia { margin-top: var(--space-lg); }

/* --------------------------------------------------------------------- Ft5 · declaracion */

.pie {
  border-top: var(--rule-thin) solid var(--color-rule);
  padding-block: var(--space-xl) var(--space-2xl);
}
.pie__declaracion {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 900;
  color: var(--color-ink);
  max-width: 30ch;
  line-height: 1.14;
}
.pie__linea {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-dim);
}
.pie__linea a { color: var(--color-dim); text-decoration: none; white-space: nowrap; }
.pie__linea a:hover { color: var(--color-ink); text-decoration: underline; }

/* --------------------------------------------------------------------- movimiento */

/* Primitiva 1: la portada entra una vez, al cargar. */
.entra {
  animation: entrar var(--dur-long) var(--ease-out) both;
}
@keyframes entrar {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Primitiva 2: la regla de cada fase se dibuja al entrar. Nada mas se mueve al hacer scroll:
   la pagina anterior desvanecia cada seccion, y una pagina que nunca se queda quieta cansa. */
.fase__regla { transform: scaleX(0.06); }
.fase.dentro .fase__regla {
  transform: scaleX(1);
  transition: transform var(--dur-mid) var(--ease-in-out);
}
.sin-js .fase__regla { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra { animation: aparecer 140ms linear both; }
  .fase__regla,
  .fase.dentro .fase__regla { transform: none; transition: none; }
  @keyframes aparecer {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* --------------------------------------------------------------------- anchos */

@media (min-width: 760px) {
  .cifras dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .no-hay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 940px) {
  .portada__reja { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.75fr); }
  .fase__reja { grid-template-columns: minmax(0, 1fr) minmax(0, 0.68fr); }
  /* El lado de la captura alterna: la fase par pone la imagen a la izquierda. */
  .fase:nth-of-type(even) .fase__figura { order: -1; }
  .fase:nth-of-type(even) .fase__reja {
    grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr);
  }
  /* El ritmo vertical no es igual en todas: la primera respira mas que las siguientes. */
  .fase:first-of-type { padding-block-start: var(--space-3xl); }
  .fase:last-of-type { padding-block-end: var(--space-3xl); }
}