/* Portada de Lume.
 *
 * Sin frameworks, sin CDN y sin fuentes externas, igual que el resto de la web: esto se sirve
 * desde el mismo Nginx que la API y tiene que pesar nada. Todo lo que aquí parece "librería"
 * (revelados al hacer scroll, entrada del héroe) es CSS nativo.
 *
 * SISTEMA DE FORMA, y se cumple en toda la página:
 *   capturas 24px  ·  superficies 18px  ·  botones y píldoras 14px (--radius)  ·  cintas 999px
 *
 * SISTEMA DE COLOR: un solo acento (--fire) de arriba abajo. La rampa fuego -> ceniza aparece
 * una única vez, en la banda de estados, porque ahí es contenido: es la leyenda del mapa.
 *
 * TEMA: oscuro y bloqueado. Ninguna sección se invierte a mitad de scroll.
 */

/* --- Capa de movimiento ---------------------------------------------------
   Dos mecanismos, los dos nativos:
     · la entrada del héroe, que ocurre una vez al cargar
     · el revelado por scroll, con `animation-timeline: view()`
   El revelado va dentro de un @supports **y** de prefers-reduced-motion, así que quien no
   tenga la propiedad (Firefox hoy) o pida menos movimiento ve la página entera quieta y
   visible. Nunca al revés: nada se oculta si la animación no puede correr. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    @keyframes rise {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: none; }
    }
  }

  /* La entrada: titular, texto, botón y captura, en ese orden. El orden es la jerarquía. */
  .hero-copy > *, .hero-art { animation: rise-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero-copy > h1 { animation-delay: 0.05s; }
  .hero-copy > p  { animation-delay: 0.15s; }
  .hero-copy > .btn,
  .hero-copy > .store-cta { animation-delay: 0.25s; }
  .hero-art { animation-delay: 0.2s; animation-duration: 1s; }
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
}

/* --- Capturas de la app: la prueba de que todo esto existe -----------------
   Un marco mínimo, no un "teléfono" dibujado: la captura ya trae su barra de estado y sus
   esquinas; aquí solo un borde y una sombra tintada al color del fondo, nunca negra. */
.shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  border: 1px solid rgba(244, 237, 228, 0.14);
  box-shadow: 0 24px 70px rgba(245, 115, 28, 0.10), 0 6px 24px rgba(13, 10, 8, 0.6);
}

/* ==========================================================================
   HÉROE. Asimétrico: la promesa ocupa siete columnas de doce y la captura se sale por abajo
   del bloque, difuminada. Ese corte es el que deja el héroe dentro de la primera pantalla
   teniendo una captura de teléfono entera detrás.
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  min-height: min(100dvh, 800px);
  display: grid;
  align-items: center;
  padding-top: 24px;
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: 40px;
  width: 100%;
}

/* Siete columnas de doce. Con seis, "Tu mapa se enciende." se partía en dos líneas y el
   titular se iba a tres: el tamaño de letra y el ancho de columna se eligen juntos. */
.hero-copy { grid-column: 1 / 8; }

.hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.45rem);
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.hero h1 span {
  color: var(--fire);
  display: block;
}
.hero-copy p {
  color: var(--muted);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  max-width: 34ch;
  margin-bottom: 32px;
}

/* La captura, anclada al fondo de su columna y recortada con una máscara: el mapa continúa
   más allá del corte en vez de terminar en un canto. */
.hero-art {
  grid-column: 8 / 13;
  grid-row: 1;
  position: relative;
  align-self: end;
  justify-self: center;
  width: min(100%, 330px);
  margin-bottom: -14%;
}
.hero-art::before {
  content: "";
  position: absolute;
  inset: -14% -22% 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 51, 0.24), rgba(245, 115, 28, 0.07) 55%, transparent 72%);
  pointer-events: none;
}
/* El desvanecido tiene que llegar a cero **antes** de que el corte del héroe alcance la
   captura; si acaba justo en el borde, el recorte deja un canto recto sobre el fondo. */
.hero-art .shot {
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 86%);
  mask-image: linear-gradient(to bottom, #000 50%, transparent 86%);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-art::before { animation: breathe 5s ease-in-out infinite 0.9s; }
  @keyframes breathe {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
  }
}

/* ==========================================================================
   PASOS. Raíl horizontal con la línea que los une, no una lista vertical: son tres momentos
   de una misma salida, y en fila se leen como una secuencia.
   ========================================================================== */

.rail { padding: 96px 0 88px; border-top: 1px solid var(--line); }
.rail h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 48px; max-width: 20ch; }

.rail-track {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.rail-track li { position: relative; padding-top: 62px; }

/* La línea sale del número y llega al siguiente; el último no la lleva. */
.rail-track li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 56px;
  right: -32px;
  height: 1px;
  background: linear-gradient(to right, rgba(255, 140, 51, 0.45), var(--line));
}
.rail-track li:last-child::before { display: none; }

.rail-track .n {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 140, 51, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 140, 51, 0.28);
  color: var(--fire);
  font-family: ui-rounded, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
}
.rail-track b { display: block; font-size: 1.14rem; margin-bottom: 6px; }
.rail-track p { color: var(--muted); font-size: 0.99rem; }

/* ==========================================================================
   ESTADOS DEL MAPA. Una cinta continua de fuego a ceniza con las claves debajo, no tres
   tarjetas iguales: los estados son un degradado, y dibujarlos como un degradado explica
   solo lo que tres cajas tendrían que contar.
   ========================================================================== */

.states { padding: 88px 0; border-top: 1px solid var(--line); }
.states h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 12px; }
.states .lede { color: var(--muted); max-width: 52ch; margin-bottom: 44px; }

.band-bar {
  height: 76px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #ff520d 0%, #ff520d 26%,
    #7a4a2a 44%,
    #4a4038 62%,
    #3d3530 80%, #3d3530 100%
  );
  box-shadow: inset 0 0 0 1px rgba(244, 237, 228, 0.14),
              0 18px 50px rgba(245, 115, 28, 0.12);
}

.band-keys {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 28px;
  margin-top: 26px;
}
.band-keys > div { position: relative; padding-top: 18px; }
/* Cada clave cuelga de su tramo de la cinta con una marca del color de ese tramo. */
.band-keys > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: currentcolor;
}
.band-keys .k-lit::before  { color: #ff520d; }
.band-keys .k-dim::before  { color: #7a4a2a; }
.band-keys .k-ash::before  { color: #6b5c52; }
.band-keys dt { font-weight: 650; font-size: 1.05rem; margin-bottom: 4px; }
.band-keys dd { color: var(--muted); font-size: 0.96rem; line-height: 1.5; }

/* ==========================================================================
   BLOQUES CON CAPTURA. Solo dos en toda la página, seguidos y espejados. Un tercero convertiría
   la portada en un acordeón de texto-imagen.
   ========================================================================== */

/* `padding-block`, nunca el atajo `padding: X 0`: estas secciones llevan `.container` en el
   MISMO elemento, y el atajo le borraría su padding lateral. En pantalla estrecha eso dejaba
   el texto pegado al borde. Vale igual para `.closing`. */
.split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: 72px;
  padding-block: 92px;
}
.split.flip { grid-template-columns: 1.15fr 0.85fr; }
.split + .split { padding-top: 0; }
.split .phone { justify-self: center; width: min(100%, 290px); }
.split h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 26px; max-width: 20ch; }
.split ul { list-style: none; display: grid; gap: 22px; max-width: 50ch; }
.split li b { display: block; font-size: 1.08rem; margin-bottom: 3px; }
.split li p { color: var(--muted); }

/* ==========================================================================
   EL MES. Dos figuras a distinta altura: el desnivel dice que son dos momentos, no dos
   columnas de una tabla.
   ========================================================================== */

.months { padding: 92px 0; border-top: 1px solid var(--line); }
.months h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 12px; max-width: 18ch; }
.months .lede { color: var(--muted); max-width: 52ch; margin-bottom: 52px; }
/* Las dos capturas arrancan a la misma altura y sus pies también: son dos pantallas de lo
   mismo, y desnivelarlas solo hacía ruido. Cada figura es su propio grid de dos filas y las
   filas se comparten (`subgrid`), así que el pie de una nunca sube por encima del de la otra
   aunque uno ocupe dos líneas y el otro una. */
.months .pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 40px;
  max-width: 660px;
}
.months figure {
  margin: 0;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  gap: 16px;
}
.months figcaption { color: var(--muted); font-size: 0.95rem; }

/* ==========================================================================
   LAS TRES REGLAS. Bento de tres celdas para tres ideas: una grande que ocupa la fila entera
   y dos debajo. Tres cosas, tres celdas, ningún hueco.
   ========================================================================== */

.rules { padding: 92px 0; border-top: 1px solid var(--line); }
.rules h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 44px; max-width: 22ch; }

.bento {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 20px;
}
.bento .cell {
  border-radius: 18px;
  padding: 30px 30px 34px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 190px;
}
.bento .cell b { display: block; font-size: 1.18rem; margin-bottom: 8px; }
.bento .cell p { color: var(--muted); font-size: 0.99rem; }

/* La celda alta arranca la fila y lleva el fuego de verdad detrás. */
.bento .cell-lead {
  grid-row: span 2;
  min-height: 320px;
  background:
    radial-gradient(120% 90% at 15% 100%, rgba(255, 82, 13, 0.30), transparent 62%),
    linear-gradient(160deg, rgba(255, 140, 51, 0.10), rgba(23, 18, 16, 0.9));
  border-color: rgba(255, 140, 51, 0.24);
}
.bento .cell-lead b { font-size: clamp(1.3rem, 2.4vw, 1.7rem); max-width: 14ch; }
.bento .cell-lead p { color: #e6d8c9; max-width: 30ch; }

.bento .cell-ash {
  background: linear-gradient(150deg, rgba(107, 92, 82, 0.22), rgba(23, 18, 16, 0.8));
}
.bento .cell-plain { background: var(--surface); }

/* ==========================================================================
   PRIVACIDAD. Banda a ancho completo sobre superficie: rompe la columna y hace que el bloque
   pese lo que pesa el tema.
   ========================================================================== */

.privacy {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255, 140, 51, 0.07), transparent 60%),
    var(--surface);
  padding: 92px 0;
}
.privacy .container { max-width: 720px; text-align: center; }
.privacy h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 16px; }
.privacy p { color: var(--muted); margin: 0 auto 22px; max-width: 56ch; }

/* ==========================================================================
   CIERRE. Manifiesto: una frase grande, un botón, nada más.
   ========================================================================== */

.closing { padding-block: 110px 40px; text-align: center; }
.closing h2 {
  font-size: clamp(2rem, 5.6vw, 3.2rem);
  letter-spacing: -0.025em;
  margin: 0 auto 30px;
  max-width: 16ch;
}

/* ==========================================================================
   COLAPSO. Cada sección declara aquí su versión de una columna; ninguna se deja "a lo que
   haga Grid".
   ========================================================================== */

@media (max-width: 900px) {
  .hero { min-height: 0; padding-top: 12px; padding-bottom: 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-copy, .hero-art { grid-column: 1 / -1; }
  .hero-copy p { max-width: 46ch; }
  /* `grid-row: auto` deshace el anclaje de la vista ancha: en una columna la captura va
     detrás del texto, primero la promesa y después la prueba. */
  /* Sin desbordamiento en una columna: la captura termina en su propio desvanecido, que en
     pantalla estrecha es más limpio que hacerla salir del bloque. */
  .hero-art { grid-row: auto; width: min(74%, 300px); justify-self: center; margin-bottom: 0; }

  .rail-track { grid-template-columns: 1fr; gap: 30px; }
  /* En columna la línea baja en vertical entre un número y el siguiente. */
  .rail-track li { padding-top: 0; padding-left: 62px; min-height: 44px; }
  .rail-track li::before {
    top: 50px;
    bottom: -30px;
    left: 21px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(to bottom, rgba(255, 140, 51, 0.45), var(--line));
  }

  .band-bar { height: 56px; }
  .band-keys { grid-template-columns: 1fr; gap: 22px; }

  .split, .split.flip { grid-template-columns: 1fr; gap: 40px; padding-block: 64px; }
  .split + .split { padding-top: 0; }
  /* Primero qué es, después cómo se ve. */
  .split .phone { order: 2; width: min(74%, 280px); }

  .months .pair { gap: 24px 20px; }

  .bento { grid-template-columns: 1fr; }
  .bento .cell-lead { grid-row: auto; min-height: 240px; }

  .closing { padding-top: 84px; }
}

@media (max-width: 560px) {
  .hero h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .hero-art { width: min(82%, 260px); }
  .rail, .states, .months, .rules, .privacy { padding-block: 68px; }
  .bento .cell { padding: 24px 22px 26px; min-height: 0; }
}