/* ============================================================================
   LA PORTADA · la página es una jornada.

   El giro del 9 de octubre de 2026: la estructura de la «dirección A» —la
   página contada como un día, con un riel de horas a la izquierda— y los
   colores de la «B»: el violeta de la marca a sangre, la tinta, el lila y el
   blanco alternando como bloques de tiempo apilados.

   Aquí solo está LO QUE TIENE LA PORTADA Y NO LAS DEMÁS PÁGINAS: el riel de
   las horas, el titular con «ahora.» en bloque, el teléfono del recorrido,
   la oferta, el precio junto a las preguntas y la firma. Las cuatro
   superficies, la barra, el pie y los botones están en `estilo.css`; la
   el teléfono con la aplicación, las pestañas y las preguntas, en
   `portada.css`, que comparte con las guías.

   El orden de los tramos es una jornada: violeta a las 09:00 (el héroe), tinta
   a las 10:30 (el método), lila a las 17:45 (preparar mañana), blanco a las
   18:00 (precio y preguntas) y violeta otra vez a las 09:00 del día siguiente
   (la firma: «Mañana a las nueve ya sabrás por dónde empezar»).
   ========================================================================== */
.inicio {
  --riel: 92px; --borde: clamp(18px, 4vw, 56px);
  background: var(--tinta);
}
.inicio [id] { scroll-margin-top: 84px; }

/* ── EL RIEL DE LAS HORAS ──────────────────────────────────────────────────
   La página se lee como un día: cada tramo empieza a su hora y una línea los
   une, como la línea del día de la aplicación. El trazo va dentro de la
   envoltura —que lleva el relleno vertical del tramo— para que una sección
   empalme con la siguiente sin hueco. */
.inicio .tramo { padding: 0; }
.inicio .tramo > .envoltura {
  position: relative; width: auto; max-width: 1360px; margin: 0 auto;
  padding: clamp(64px, 8vw, 120px) var(--borde) clamp(64px, 8vw, 120px) calc(var(--borde) + var(--riel));
}
.inicio .tramo > .envoltura::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--borde) + 62px);
  width: 1px; background: var(--linea);
}
.inicio .hora {
  position: absolute; left: var(--borde); top: clamp(64px, 8vw, 120px);
  font-size: 13px; color: var(--txt-2); line-height: 20px;
}
.inicio .hora small { display: block; font-size: 11px; }
.inicio .hora::after {
  content: ''; position: absolute; left: 58px; top: 6px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--punto); box-shadow: 0 0 0 4px var(--fondo);
}

/* ══ EL HÉROE · 09:00 ══════════════════════════════════════════════════════ */
.inicio .portada-hero > .envoltura { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(56px, 7vw, 104px); }
.inicio .portada-hero .hora { top: clamp(48px, 6vw, 88px); }
.inicio .hero-rejilla { align-items: start; gap: 0 64px; }
/* EL TEXTO EN DOS PARTES Y EL TELÉFONO EN MEDIO, en el HTML (ver el
   comentario de `index.html`): en el móvil, el titular, el teléfono y luego
   los botones y la oferta. En el ordenador, las dos partes del texto una
   encima de otra a la izquierda y el teléfono a la derecha, a lo alto de las
   dos; lo que el teléfono mide de más va debajo del texto, no entre sus
   partes. */
@media (min-width: 900px) {
  .inicio .hero-rejilla { grid-template-rows: auto 1fr; }
  .inicio .hero-titular { grid-area: 1 / 1; }
  .inicio .hero-resto { grid-area: 2 / 1; }
  .inicio .hero-producto { grid-area: 1 / 2 / 3 / 3; }
}
@media (max-width: 899px) { .inicio .hero-producto { margin-top: 36px; } }
/* TRES LÍNEAS Y NO CUATRO. A 112 px el titular partía en «Ten claro / qué
   toca / hacer / ahora.», el héroe medía más de una pantalla y la maqueta,
   colgada del borde de abajo, empezaba a 640 px: medio fuera del pliegue. */
.inicio h1 { font-size: clamp(48px, 5.6vw, 92px); line-height: .95; letter-spacing: -.064em; max-width: 11ch; }
/* «ahora.» es un bloque: el lila de la marca con la tinta encima, 11:1. Aquí
   sí, porque es una palabra; en las guías el énfasis es media frase y va
   subrayado (ver `portada.css`). */
.inicio h1 em {
  text-decoration: none; display: inline-block; margin-top: .06em;
  background: var(--lila); color: var(--tinta); padding: 0 .15em .05em; border-radius: .13em;
}
.inicio .hero-texto { max-width: 40ch; margin-top: 30px; }
.inicio .portada-hero .acciones { margin-top: 34px; gap: 14px 28px; }
.inicio .portada-hero .cta-2 { text-decoration: none; border-bottom: 2px solid var(--lila); padding-bottom: 2px; min-height: 0; }
/* LO QUE DECIDE, DEBAJO DEL BOTÓN: sin tarjeta, cuánto cuesta y cómo se
   cancela. Medido con Clarity, el precio era de lo más leído y estaba al 59 %
   de la página. */
.inicio .oferta { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--txt-2); max-width: 46ch; }
.inicio .oferta li { position: relative; padding-left: 24px; }
.inicio .oferta li::before { content: ''; position: absolute; left: 0; top: 5px; width: 11px; height: 11px; border-radius: 3px; background: var(--lila); }
.inicio .oferta b { color: #FFFFFF; font-weight: 700; }
.inicio .oferta a { color: inherit; text-decoration: underline; text-decoration-color: var(--lila); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.inicio .oferta a:hover { color: #FFFFFF; }
.inicio .publico { font-size: 13.5px; color: var(--txt-2); margin-top: 22px; max-width: 44ch; }
/* LA MAQUETA, ARRIBA Y ENTERA. Estuvo pegada al borde de abajo del héroe,
   continuando en el método, y quedaba bonito y bajo: en un monitor de 1080
   de alto empezaba a 640 px y el botón «Termina 15 min tarde» caía fuera de
   la pantalla. Ahora el teléfono arranca a la altura del rótulo de las 09:00
   y se ve de una vez, con sus mandos (ver abajo cuánto mide en cada alto). */
.inicio .hero-producto { align-self: start; width: auto; display: flex; justify-content: center; }
/* EN EL ORDENADOR, EL TELÉFONO DEL HÉROE VA AL 86 %, Y MENOS SI LA
   PANTALLA ES BAJA. A tamaño real mide 778 px de alto. `zoom` y no
   `transform`: con `transform` seguiría ocupando su alto entero en la página
   y lo de debajo no subiría ni un píxel.

   DEBAJO VAN LOS MANDOS DEL RECORRIDO: la barra de los pasos y el rótulo con
   el botón, 68 px con el hueco de encima. Iba también la frase del paso, 125
   px con dos líneas, y el teléfono tenía que encoger para que cupiera: a 900
   de alto, al 79 %. Desde el 19 de octubre de 2026 lo que se explica va en
   notas al lado del teléfono (ver `recorrido.js`), y el teléfono recupera
   ese sitio. Cada escalón deja el botón entero a la vista en el alto más bajo
   de su tramo, con el aire de encima en 40 px desde los 1000 de alto: el
   teléfono empieza a 110 px y el botón acaba 68 px por debajo de él, así que
   cabe con `zoom` ≤ (alto − 194) / 778.

   LOS MANDOS NO BAJAN DE 280 DE ANCHO aunque el teléfono sí: el rótulo y el
   botón no caben en menos. El teléfono va centrado encima. */
.inicio #demo-heroe { width: min(100%, 360px); }
@media (min-width: 900px) {
  .inicio #demo-heroe { width: 310px; align-items: center; }
  .inicio #demo-heroe .ventana { zoom: .86; }
}
@media (min-width: 900px) and (max-height: 1000px) { .inicio .portada-hero > .envoltura { padding-top: 40px; } }
@media (min-width: 900px) and (max-height: 880px) { .inicio #demo-heroe .ventana { zoom: .82; } .inicio #demo-heroe { width: 296px; } }
@media (min-width: 900px) and (max-height: 840px) { .inicio #demo-heroe .ventana { zoom: .78; } .inicio #demo-heroe { width: 281px; } }
@media (min-width: 900px) and (max-height: 800px) { .inicio #demo-heroe .ventana { zoom: .72; } .inicio #demo-heroe { width: 280px; } }
@media (min-width: 900px) and (max-height: 760px) { .inicio #demo-heroe .ventana { zoom: .67; } }
@media (min-width: 900px) and (max-height: 720px) { .inicio #demo-heroe .ventana { zoom: .62; } }
@media (min-width: 900px) and (max-height: 680px) { .inicio #demo-heroe .ventana { zoom: .57; } }
@media (min-width: 900px) and (max-height: 640px) { .inicio #demo-heroe .ventana { zoom: .52; } }
/* LOS MANDOS DEL RECORRIDO, debajo del teléfono: una raya por paso, que se
   va llenando mientras dura, y el número y el nombre del paso con el botón de
   parar. Las rayas por hacer van en lila (3,46:1 sobre el violeta) y las
   hechas en blanco; el lila y el blanco se distinguen 1,79:1, y el número lo
   dice además. */
.inicio #demo-heroe { gap: 12px; }
.inicio .heroe-mando { width: 100%; display: grid; gap: 8px; }
.inicio .recorrido-pasos { display: flex; gap: 4px; }
.inicio .recorrido-pasos span { position: relative; flex: 1 1 0; height: 4px; overflow: hidden; border-radius: 2px; background: var(--lila); }
.inicio .recorrido-pasos i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #FFFFFF; transition: width .45s ease; }
.inicio .recorrido-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inicio .recorrido-rotulo { margin: 0; font-size: 13px; color: #ECE8FF; }
@media (prefers-reduced-motion: reduce) { .inicio .recorrido-pasos i { transition: none; } }
.inicio .heroe-boton {
  min-height: 44px; padding: 0 18px; border-radius: 12px; border: 0;
  background: var(--lila); color: var(--tinta); font-size: 15px; font-weight: 700;
  transition: background .15s;
}
.inicio .heroe-boton:hover { background: #FFFFFF; }
.inicio .heroe-boton:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.inicio #demo-heroe .ventana-pie { width: 100%; min-height: 3em; }
/* CON EL RECORRIDO EN MARCHA, LA FRASE SOLO PARA EL LECTOR DE PANTALLA: a
   quien ve, se lo cuentan las notas de al lado del teléfono, que en el
   móvil, donde el teléfono llena la pantalla, eran lo único que se leía sin
   bajar. Sin JavaScript se ve, con la foto de reposo. */
.inicio #demo-heroe.con-notas .ventana-pie {
  position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ══ EL MÉTODO · 10:30 ═════════════════════════════════════════════════════ */
.inicio #metodo h2 { max-width: 16ch; }
.inicio .guia-pestanas button { border-top-color: #4A4565; }
/* EL TELÉFONO EN SU COLUMNA, DESDE ARRIBA. La cabecera de la sección —el
   titular, la entradilla y las pestañas— ocupaba el ancho entero y el
   teléfono empezaba debajo: el texto se leía arriba y la imagen abajo, y la
   sección medía dos pantallas. Ahora el texto va en la columna de la
   izquierda y el teléfono, al 86 % como el del héroe, a su lado.

   `display: contents` en cada panel saca su texto y su teléfono a la rejilla
   de la sección; el panel escondido sigue sin pintarse porque `[hidden]`
   gana. Solo con las pestañas puestas: sin JavaScript se ven los tres
   paneles, cada uno con su teléfono, uno debajo de otro.

   La cuarta fila es flexible: el teléfono mide más que la columna de texto, y
   lo que sobra va ahí y no repartido entre la cabecera y la explicación. */
@media (min-width: 1000px) {
  .inicio .metodo-rejilla:has(.guia-pestanas:not([hidden])) {
    display: grid; grid-template-columns: minmax(0, 1fr) 310px; grid-template-rows: auto auto auto 1fr auto;
    column-gap: clamp(56px, 7vw, 120px); align-items: start;
  }
  .inicio .metodo-rejilla:has(.guia-pestanas:not([hidden])) > .metodo-cabeza { grid-area: 1 / 1; }
  .inicio .metodo-rejilla:has(.guia-pestanas:not([hidden])) > .guia-panel { display: contents; }
  .inicio .metodo-rejilla:has(.guia-pestanas:not([hidden])) .guia-texto { grid-area: 2 / 1; }
  .inicio .metodo-rejilla:has(.guia-pestanas:not([hidden])) .maqueta { grid-area: 1 / 2 / 5 / 3; width: 310px; }
  .inicio .metodo-rejilla:has(.guia-pestanas:not([hidden])) .ventana { zoom: .86; }
  .inicio .metodo-rejilla:has(.guia-pestanas:not([hidden])) > .aprende { grid-area: 3 / 1; }
  .inicio .metodo-rejilla:has(.guia-pestanas:not([hidden])) > .puente { grid-area: 5 / 1 / 6 / 3; }
}

/* ══ PREPARA · 17:45 · Y PROGRESO · 18:00 ══════════════════════════════════
   Las dos secciones del final del día, cada una con su teléfono. Las tres
   partes de Progreso van en una lista de definición: el nombre de cada parte
   en la letra de las horas y lo que enseña debajo. */
.inicio .partes-progreso { display: grid; gap: 16px; margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--linea); max-width: 46ch; }
.inicio .partes-progreso dt { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; font-weight: 500; color: var(--acento); }
.inicio .partes-progreso dd { margin: 4px 0 0; font-size: 17px; line-height: 1.55; color: var(--txt-2); }
.inicio .sin-juicio { margin-top: 22px; font-size: 17px; font-weight: 600; color: var(--txt); }

/* ══ LA DECISIÓN · 18:30 ═══════════════════════════════════════════════════
   El precio es un bloque violeta —el de «Preparar mañana»— sobre blanco, y se
   queda quieto en el ordenador mientras se leen las preguntas. Los textos son
   los aprobados: aquí solo cambia el vestido. */
.inicio .decision-rejilla { display: grid; gap: 48px 64px; align-items: start; }
.inicio .precio {
  position: relative; border-radius: 26px; background: var(--violeta); color: #FFFFFF;
  padding: clamp(32px, 4vw, 48px) clamp(22px, 3vw, 40px);
  --cta-fondo: #FFFFFF; --cta-txt: var(--tinta); --cta-hover: #ECE8FF;
}
.inicio .precio .eti { font-size: 13px; color: #ECE8FF; margin-bottom: 18px; }
.inicio .precio .cifra { font-size: clamp(56px, 7vw, 92px); font-weight: 700; letter-spacing: -.06em; line-height: .95; }
.inicio .precio .cifra span { font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: #ECE8FF; }
.inicio .precio .detalle { font-size: 16px; color: #ECE8FF; margin: 18px 0 0; line-height: 1.6; }
.inicio .precio .detalle b { color: #FFFFFF; }
.inicio .precio .acciones { margin-top: 26px; }
.inicio .precio .acciones .cta { width: 100%; }
.inicio .precio a:focus-visible { outline-color: #FFFFFF; }
.inicio .conf { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 22px; font-size: 13.5px; color: #ECE8FF; }
.inicio .conf span { display: inline-flex; align-items: center; gap: 7px; }
.inicio .conf svg { color: #FFFFFF; }
.inicio .garantia { display: grid; gap: 11px; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,.26); }
.inicio .garantia li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: #ECE8FF; line-height: 1.5; list-style: none; }
.inicio .garantia b { color: #FFFFFF; }
/* Violeta sobre blanco, 6,19:1. Blanco sobre un velo blanco encima del
   violeta daba 4,45. */
.inicio .garantia .tic { flex: 0 0 auto; width: 19px; height: 19px; border-radius: 6px; margin-top: 2px; background: #FFFFFF; color: var(--violeta); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.inicio .preguntas .rotulo { color: var(--violeta); }
.inicio .preguntas .faq { max-width: none; }

/* ══ LA FIRMA · mañana, 09:00 ══════════════════════════════════════════════
   La página empieza a las nueve y acaba a las nueve del día siguiente: es la
   frase de la firma, y el riel la cuenta. */
.inicio .firma .arriba { font-size: clamp(40px, 6vw, 88px); font-weight: 700; letter-spacing: -.06em; line-height: .98; max-width: 14ch; margin: 0 0 36px; }
/* SUBRAYADA Y NO EN BLOQUE. El bloque lila vale para una palabra —«ahora.»—;
   detrás de una frase de tres líneas, con el interlineado apretado, cada caja
   pisaba los rasgos de la línea de arriba y la «y» de «ya» se leía «v». */
.inicio .firma .arriba em { font-style: normal; text-decoration: underline; text-decoration-color: var(--lila); text-decoration-thickness: .09em; text-underline-offset: .1em; text-decoration-skip-ink: none; }
.inicio .firma .letra-pequena { color: var(--txt-2); margin-top: 20px; font-size: 14px; }
/* La firma de la marca, al pie y sin gritar. El final de la frase va
   subrayado y no en lila: el lila sobre el violeta da 2,7:1. */
.inicio .firma .claim { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--linea); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.035em; }
.inicio .firma .claim em { font-style: normal; text-decoration: underline; text-decoration-color: var(--lila); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.inicio .pie-dentro, .inicio .pie-fin { max-width: 1360px; }

/* ── ANCHOS ────────────────────────────────────────────────────────────── */
@media (min-width: 980px) {
  .inicio .decision-rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .inicio .decision .precio { position: sticky; top: 96px; }
}
/* EN EL MÓVIL EL RIEL SE RECOGE. Noventa píxeles de horas en una pantalla de
   375 eran un cuarto del ancho; la hora se queda, encima de su tramo. */
@media (max-width: 760px) {
  .inicio { --riel: 0px; }
  .inicio .tramo > .envoltura { width: auto; }
  .inicio .tramo > .envoltura::before, .inicio .hora::after { display: none; }
  .inicio .hora { position: static; display: block; margin-bottom: 18px; }
  .inicio .hora small { display: inline; margin-left: 8px; }
  /* La hora es una fila más de la rejilla en el móvil, y el hueco entre filas
     la dejaba a 48 px de su tramo. El aire va en lo que viene después. */
  .inicio .decision-rejilla { row-gap: 0; }
  .inicio .hero-producto { margin-top: 28px; }
  .inicio .preguntas { margin-top: 56px; }
}