/*
  LA WEB — «el parte del día». Tokens y reglas de research/DESIGN.md (§2, §3, §4, §5, §6.3, §8).

  Papel claro, la marca solo como tinta, la hora como índice. Lo que es papel va casi recto y sin
  sombra; lo que es pantalla (css/producto.css) va redondeado y levantado. Ningún color vivo propio:
  si hay croma, es un estado o una persona del producto, y va con su palabra.
*/

@font-face {
  font-family: "Bricolage Reserva";
  src: local("Arial");
  size-adjust: 96.2%;
  ascent-override: 96.6%;
  descent-override: 28.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Reserva";
  src: local("Arial");
  size-adjust: 102.7%;
  ascent-override: 97.8%;
  descent-override: 28.7%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  --papel: oklch(0.985 0.004 195);        /* #f7fbfb */
  --papel-hondo: oklch(0.965 0.007 195);  /* #eef5f5 */
  --regla: oklch(0.89 0.012 195);         /* #d2dddd  decorativa */
  --regla-control: oklch(0.60 0.02 200);  /* #738485  3,75:1 */
  --tinta: oklch(0.21 0.018 200);         /* #0e1b1c  16,92:1 */
  --tinta-2: oklch(0.42 0.018 200);       /* #425051  8,05:1 */
  --tinta-3: oklch(0.50 0.016 200);       /* #596667  5,71:1 */
  --marca: oklch(0.33 0.07 195);          /* #004040  11,15:1 */
  --marca-oscura: oklch(0.27 0.06 195);   /* #002f2f */
  --marca-velo: oklch(0.93 0.022 195);    /* #d8edec */
  --sobre-marca: oklch(0.985 0.004 195);  /* #f7fbfb */

  --f-titular: "Bricolage Grotesque", "Bricolage Reserva", ui-sans-serif, system-ui, sans-serif;
  --f-texto: "Geist", "Geist Reserva", ui-sans-serif, system-ui, sans-serif;
  --t-portada: clamp(2.625rem, 1.9rem + 3.2vw, 4.75rem);
  --t-hora: clamp(3rem, 1.8rem + 5vw, 6.5rem);
  --t-capitulo: clamp(2rem, 1.55rem + 1.9vw, 3.25rem);
  --t-paso: clamp(1.75rem, 1.4rem + 1.4vw, 2.625rem);
  --t-seccion: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  --t-banda: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --t-precio: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --t-entrada: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --t-cuerpo: 1.0625rem;
  --t-pequeno: 0.9375rem;
  --t-etiqueta: 0.8125rem;

  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; --e-10: 8rem;
  --seccion: clamp(4rem, 2.5rem + 6vw, 8rem);
  --margen: clamp(1rem, 4vw, 3rem);
  --ancho: 75rem;
  --medida: 38rem;
  --alto-cabecera: 4rem;
  --alto-banda: 2.75rem;
  --alto-control: 3rem;

  --r-papel: 2px;
  --r-control: 0.625rem;
  --sombra-pantalla: 0 1px 1px rgb(14 27 28 / 0.06), 0 10px 24px -8px rgb(14 27 28 / 0.16), 0 32px 64px -28px rgb(14 27 28 / 0.22);

  --dur-toque: 90ms;
  --dur-corta: 160ms;
  --dur-media: 240ms;
  --dur-larga: 400ms;
  --dur-hora: 180ms;
  --escalonado: 120ms;
  --ease-salida: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-estandar: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-pantalla: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (max-width: 767px) {
  :root { --alto-cabecera: 3.5rem; --alto-control: 3.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-toque: 0ms; --dur-corta: 0ms; --dur-media: 0ms; --dur-larga: 0ms; --dur-hora: 0ms; --escalonado: 0ms; }
}

/* ── Base ─────────────────────────────────────────────────────────────────────────────── */

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

html {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--alto-banda) + var(--e-4));
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--papel);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-titular);
  font-optical-sizing: auto;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
/* `hidden` gana siempre: `.boton { display: inline-flex }` enseñaba sin JS el botón de la IA. */
[hidden] { display: none !important; }

a { color: var(--marca); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in oklch, var(--marca) 40%, transparent); }
a:hover { text-decoration-color: var(--marca); }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--marca-velo); color: var(--tinta); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.tabular { font-variant-numeric: tabular-nums; }

.saltar {
  position: absolute;
  left: var(--margen);
  top: var(--e-2);
  transform: translateY(calc(-100% - var(--e-4)));
  z-index: 50;
  padding: var(--e-2) var(--e-4);
  background: var(--marca);
  color: var(--sobre-marca);
  border-radius: var(--r-control);
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { transform: none; }

/* Cada franja pone el margen lateral una vez; su contenido se centra a 75rem. */
.franja { padding-inline: var(--margen); }
.envoltura { max-width: var(--ancho); margin-inline: auto; }

/* ── Botones y enlaces ────────────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--alto-control);
  padding-inline: 1.25rem;
  border: 0;
  border-radius: var(--r-control);
  background: var(--marca);
  color: var(--sobre-marca);
  font: 600 1rem/1.2 var(--f-texto);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-corta) var(--ease-estandar), transform var(--dur-toque) var(--ease-estandar);
}
.boton:hover { background: var(--marca-oscura); }
.boton:active { transform: scale(0.985); }
.boton svg { width: 1rem; height: 1rem; }
.boton--secundario { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--regla-control); }
.boton--secundario:hover { background: var(--papel-hondo); }
.boton--compacto { min-height: 2.5rem; padding-inline: 1rem; font-size: 0.9375rem; }
@media (max-width: 63.99rem) {
  .boton--compacto { min-height: 2.75rem; }
}
/* En el celular la cabecera va justa (WCAG 1.4.10): el botón lleva menos relleno hasta 384 px y el símbolo
   sale por debajo de 356 px. Medido: sin esto, «Agenda una demo» se partía en dos líneas de 320 a 375. */
@media (max-width: 24rem) { .boton--compacto { padding-inline: var(--e-3); } }
@media (max-width: 22.25rem) { .marca-simbolo { display: none; } }
/* En colores forzados, un botón sin borde se queda en texto suelto. */
@media (forced-colors: active) { .boton { border: 1.5px solid ButtonText; } }

.enlace-fuerte { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 600; }
.enlace-fuerte svg { width: 1rem; height: 1rem; transition: transform var(--dur-corta) var(--ease-estandar); }
@media (hover: hover) { .enlace-fuerte:hover svg { transform: translateX(2px); } }

/* ── Cabecera (no pegajosa: lo único pegado es el escenario del relato) ────────────────── */

/* La regla de marca arriba, como la cabecera de un parte impreso. */
.cabecera { padding-inline: var(--margen); border-top: 3px solid var(--marca); border-bottom: 1px solid var(--regla); }
.cabecera-interior { max-width: var(--ancho); margin-inline: auto; height: var(--alto-cabecera); display: flex; align-items: center; gap: var(--e-6); }
.marca { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--f-titular); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; color: var(--marca); text-decoration: none; padding-block: 0.3125rem; }
.marca-simbolo { flex: none; width: 1.625rem; height: 1.625rem; }
.navegacion { display: flex; gap: var(--e-5); margin-left: auto; }
.navegacion a { color: var(--tinta-2); font-size: 0.9375rem; font-weight: 500; text-decoration: none; padding-block: 0.625rem; }
.navegacion a:hover { color: var(--tinta); }
/* Sin navegación, el hueco solo separa la marca del botón. Va aquí, detrás de la regla base: una regla
   igual puesta antes no gana, y la de 320 px no se aplicaba nunca. */
@media (max-width: 767px) {
  .navegacion { display: none; }
  .cabecera-interior { gap: var(--e-3); }
  .cabecera .boton { margin-left: auto; }
}
/* En tableta, la marca con su símbolo, la navegación y el botón caben en una línea si los huecos encogen. */
@media (min-width: 768px) and (max-width: 63.99rem) {
  .cabecera-interior { gap: var(--e-5); }
  .navegacion { gap: var(--e-4); }
}
/* Con «Blog» son cinco enlaces. Medido el 30-sep: de 768 a 789 px faltaban hasta 20 px, y «Cómo funciona»,
   «La IA» y el botón se partían en dos líneas. Hasta 832 px los huecos encogen un paso más. */
@media (min-width: 768px) and (max-width: 51.99rem) {
  .cabecera-interior { gap: var(--e-4); }
  .navegacion { gap: var(--e-3); }
}

/* ── Portada ──────────────────────────────────────────────────────────────────────────── */

.portada { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) var(--e-8); }
.portada-para { font-size: var(--t-etiqueta); font-weight: 600; letter-spacing: 0.01em; color: var(--tinta-2); margin-bottom: var(--e-4); }
.portada h1 { font-size: var(--t-portada); line-height: 1; letter-spacing: -0.03em; font-weight: 680; color: var(--marca); max-width: 14ch; overflow-wrap: anywhere; }
/* A 360 px, el tamaño de Android más común, el titular ocupaba cinco líneas. */
@media (max-width: 23.5rem) { .portada h1 { font-size: 2.5rem; } }
.portada-sub { margin-top: var(--e-5); font-size: var(--t-entrada); line-height: 1.5; letter-spacing: -0.005em; color: var(--tinta-2); max-width: var(--medida); }
.portada-acciones { margin-top: var(--e-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); }
.portada-prueba { margin-top: var(--e-5); font-size: var(--t-pequeno); color: var(--tinta-3); max-width: var(--medida); }
.portada-prueba strong { color: var(--tinta); font-weight: 600; }

.portada-rejilla { display: grid; gap: var(--e-7); }
@media (min-width: 64rem) {
  .portada-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--e-7); }
  .portada h1 { font-size: clamp(2.75rem, 1.4rem + 2.6vw, 4rem); max-width: none; }
  .regla-dia { grid-column: 1 / -1; }
}

/* El producto en la portada: el panel y el celular a las 05:30, con el día ya repartido [Sushi-POR1]. Es
   decorativo (lo cuenta el texto de al lado) y sale del mismo escenario que el relato: una sola fuente.
   El celular entero mide 410 × 864 de diseño: a un 35 % de ancho baja 0,74 del ancho de la figura. */
.portada-figura { position: relative; margin: 0; container-type: inline-size; aspect-ratio: 1 / 1.045; }
.portada-figura .panel { position: absolute; top: 0; left: 0; width: 90%; aspect-ratio: 4 / 3; }
.portada-figura .movil { position: absolute; top: 30cqi; right: 0; width: 35%; z-index: 2; }
.portada-figura .pn-ayuda-peso { display: none; }
/* En una columna, la figura no pasa de 34rem, el panel se dibuja a 480 como en las figuras de cada paso y
   el celular va recortado de alto (410 × 700). */
@media (max-width: 63.99rem) {
  .portada-figura { max-width: 34rem; aspect-ratio: 1 / 1.11; }
  .portada-figura .panel { width: 100%; }
  .portada-figura .panel__marco, .portada-figura .pn { --px: calc(100cqi / 480); }
  .portada-figura .pn-cifras, .portada-figura .pn-zona { display: none; }
  .portada-figura .movil { top: 42cqi; right: 3%; width: 40%; aspect-ratio: 410 / 700; }
}

/* La regla del día (DESIGN §4.6): de las 05:00 a las 18:00 con una muesca por paso a su hora real, y la
   víspera delante de un corte de eje. Las etiquetas alternan arriba y abajo: 10:15 y 10:40 se pisarían. */
.regla-t { font-size: var(--t-etiqueta); font-weight: 600; color: var(--tinta-2); }
.regla-pista {
  --inicio: 8.5rem;
  position: relative;
  list-style: none;
  margin: var(--e-4) 0 0;
  padding: 0;
  height: 8.5rem;
  background: linear-gradient(var(--regla-control), var(--regla-control)) left 50% / calc(var(--inicio) - 2rem) 1px no-repeat;
}
/* El eje, con una marca fina por cada hora. */
.regla-pista::before {
  content: "";
  position: absolute;
  left: var(--inicio);
  right: 0;
  top: calc(50% - 3px);
  height: 7px;
  background:
    linear-gradient(var(--regla-control), var(--regla-control)) left 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--regla) 0 1px, transparent 1px calc((100% - 1px) / 13)) left 50% / 100% 7px no-repeat;
  transform-origin: left center;
}
/* El corte de eje: de la víspera a la madrugada no se dibuja la noche entera. */
.regla-pista::after {
  content: "";
  position: absolute;
  left: calc(var(--inicio) - 1.625rem);
  top: calc(50% - 0.5rem);
  width: 1rem;
  height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 14 8 2M8 14 13 2' stroke='%23738485' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.regla-paso { position: absolute; top: 50%; left: calc(var(--inicio) + (100% - var(--inicio)) * var(--f, 0)); }
.regla-paso--vispera { left: 3.25rem; }
.regla-paso::before { content: ""; position: absolute; left: -0.75px; top: -0.4375rem; width: 1.5px; height: 0.875rem; background: var(--marca); }
.regla-paso a {
  position: absolute;
  left: 0;
  bottom: 0.875rem;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.125rem;
  padding: 0.25rem 0.375rem;
  border-radius: var(--r-control);
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}
.regla-paso--abajo a { bottom: auto; top: 0.875rem; }
.regla-paso time { font-family: var(--f-titular); font-weight: 650; font-size: 1.25rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--marca); font-variant-numeric: tabular-nums; }
.regla-paso span { font-size: var(--t-etiqueta); color: var(--tinta-2); transition: color var(--dur-corta) var(--ease-estandar); }
.regla-paso a:hover span, .regla-paso a:focus-visible span { color: var(--tinta); }

/* En móvil y tableta: una rejilla de 2 × 4, todas las horas a la vista y sin deslizar [Sushi-REG3]. */
@media (max-width: 63.99rem) {
  .regla-pista { display: grid; grid-template-columns: 1fr 1fr; height: auto; background: none; border-top: 1px solid var(--regla); }
  .regla-pista::before, .regla-pista::after, .regla-paso::before { display: none; }
  .regla-paso { position: static; border-bottom: 1px solid var(--regla); }
  .regla-paso:nth-child(odd) { border-right: 1px solid var(--regla); }
  .regla-paso a { position: static; transform: none; display: flex; align-items: baseline; gap: var(--e-3); min-height: 2.75rem; padding: 0.75rem 0.25rem 0.75rem 0; white-space: normal; }
  .regla-paso:nth-child(even) a { padding-left: var(--e-4); }
}

/* Al cargar, un solo gesto: el eje se traza y las muescas asoman en orden. */
@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  .regla-pista::before { animation: regla-trazo 900ms var(--ease-salida) 150ms both; }
  .regla-paso { animation: regla-muesca 360ms var(--ease-salida) both; }
  .regla-paso:nth-child(1) { animation-delay: 250ms; }
  .regla-paso:nth-child(2) { animation-delay: 330ms; }
  .regla-paso:nth-child(3) { animation-delay: 410ms; }
  .regla-paso:nth-child(4) { animation-delay: 490ms; }
  .regla-paso:nth-child(5) { animation-delay: 570ms; }
  .regla-paso:nth-child(6) { animation-delay: 650ms; }
  .regla-paso:nth-child(7) { animation-delay: 730ms; }
  .regla-paso:nth-child(8) { animation-delay: 810ms; }
}
@keyframes regla-trazo { from { transform: scaleX(0); } }
@keyframes regla-muesca { from { opacity: 0; transform: translateY(3px); } }

/* ── Secciones ────────────────────────────────────────────────────────────────────────── */

.seccion { position: relative; padding-block: var(--seccion); }

/* ── Estancias: cada sección es una habitación del plano, con su muro y su puerta [Sushi-EST1] ──
   Un muro de 2 px a lo ancho con un vano a la altura del borde del texto, la hoja abierta, su giro y el
   nombre de la estancia, como en un plano de planta. Es dibujo de línea (DESIGN §1 lo admite) y
   decorativo: el nombre de verdad es el h2 de cada sección. */
.muro { position: absolute; inset: 0 0 auto 0; height: 0; pointer-events: none; --puerta: 3.5rem; --jamba: max(var(--margen), calc((100% - var(--ancho)) / 2)); }
.muro::before, .muro::after { content: ""; position: absolute; top: -1px; height: 2px; background: var(--tinta-2); }
.muro::before { left: 0; width: var(--jamba); }
.muro::after { left: calc(var(--jamba) + var(--puerta)); right: 0; }
.muro-puerta { position: absolute; top: 0; left: var(--jamba); width: var(--puerta); height: var(--puerta); overflow: visible; fill: none; }
.muro-puerta .hoja { stroke: var(--tinta-2); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.muro-puerta .giro { stroke: var(--regla-control); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.muro-nombre { position: absolute; top: 1.125rem; left: calc(var(--jamba) + var(--puerta) + var(--e-3)); font-size: var(--t-etiqueta); font-weight: 600; letter-spacing: 0.01em; color: var(--tinta-2); white-space: nowrap; }
.seccion--honda { background: var(--papel-hondo); }
.seccion h2 { font-size: var(--t-capitulo); line-height: 1.04; letter-spacing: -0.025em; font-weight: 650; max-width: 18ch; }
.seccion-entrada { margin-top: var(--e-5); font-size: var(--t-entrada); line-height: 1.5; color: var(--tinta-2); max-width: var(--medida); }

/* ── El día ───────────────────────────────────────────────────────────────────────────── */

.dia { padding-top: var(--seccion); }
.dia-nombre { margin-top: var(--e-4); font-size: var(--t-pequeno); color: var(--tinta-3); max-width: var(--medida); }
.dia-cuerpo { margin-top: var(--e-8); }

.pasos { list-style: none; margin: 0; padding: 0; }
.paso { padding-block: var(--e-8); border-top: 1px solid var(--regla); scroll-margin-top: var(--e-6); }
.paso-cabeza { margin: 0; }
.paso-hora { display: block; font-family: var(--f-titular); font-size: var(--t-hora); line-height: 0.9; letter-spacing: -0.04em; font-weight: 700; color: var(--marca); font-variant-numeric: tabular-nums; }
.paso-cuando { display: block; margin-top: var(--e-3); font-family: var(--f-texto); font-size: var(--t-etiqueta); font-weight: 600; letter-spacing: 0.01em; color: var(--tinta-2); }
.paso-titulo { display: block; margin-top: var(--e-4); font-size: var(--t-paso); line-height: 1.08; letter-spacing: -0.02em; font-weight: 650; color: var(--tinta); max-width: 20ch; }
.paso-texto { margin-top: var(--e-4); color: var(--tinta-2); max-width: var(--medida); }
.porque { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--regla); font-size: var(--t-pequeno); color: var(--tinta-2); max-width: var(--medida); }
.porque b { color: var(--tinta); font-weight: 600; }
.paso--epilogo .paso-hora { font-size: var(--t-paso); letter-spacing: -0.02em; line-height: 1.1; }
.dia-sello { margin-top: var(--e-6); font-size: var(--t-etiqueta); font-weight: 600; color: var(--tinta-2); max-width: var(--medida); }

.reglas { margin: var(--e-5) 0 0; padding: 0; list-style: none; max-width: var(--medida); border-top: 1px solid var(--regla); }
.reglas li { padding-block: var(--e-3); border-bottom: 1px solid var(--regla); font-size: var(--t-pequeno); color: var(--tinta-2); }
.reglas b { color: var(--tinta); font-weight: 600; }

/* La leyenda del semáforo: el color en el punto, el texto en tinta (DESIGN §4.10). */
.semaforo { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: grid; gap: var(--e-2); font-size: var(--t-pequeno); }
.semaforo li { display: flex; align-items: baseline; gap: var(--e-3); flex-wrap: wrap; }
.semaforo b { font-weight: 600; }
.semaforo span { color: var(--tinta-3); }
.luz { flex: none; width: 0.75rem; height: 0.75rem; border-radius: 50%; align-self: center; }
.luz--rojo { background: #e7000b; }
.luz--ambar { background: #fe9a00; }
.luz--verde { background: #009966; }
.luz--gris { background: rgb(96 96 96 / 0.4); }

/* Escritorio: texto a 5 columnas, escenario pegado a 7 (DESIGN §5). */
@media (min-width: 64rem) {
  .js .dia-cuerpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
  .paso { min-height: 82svh; display: flex; flex-direction: column; justify-content: center; }
  .js .paso .figura-paso { display: none; }
  .dia-cuerpo > .pasos { grid-column: 1; grid-row: 1; }
  .dia-cuerpo > .escenario { grid-column: 2; grid-row: 1; }
}
/* De 1024 a 1279 el escenario necesita más sitio: con 7 columnas el celular bajaba a 158 px. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .js .dia-cuerpo { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

/* Móvil y tableta: el escenario se pega arriba en pequeño (historia.css) y los pasos pasan por debajo,
   sin figura propia [Sushi-MOV1]. Sin JavaScript, cada paso sigue llevando la suya. */
@media (max-width: 63.99rem) {
  .js .dia-cuerpo {
    display: flex;
    flex-direction: column;
    /* Lo que tapa el escenario pegado, con la anchura de la ventana y no con la del escenario: sirve
       para que un salto de la regla del día deje el paso justo debajo. Se le resta el scroll-padding-top
       de html, que el navegador ya suma. */
    --tapa-escenario: calc(min(var(--alto-banda) + 0.683 * (100svw - 2 * var(--margen)), 42svh) + var(--e-3) + 1px);
  }
  .js .paso { padding-block: var(--e-6); }
  .js .paso,
  .js .paso a { scroll-margin-top: calc(var(--tapa-escenario) - var(--alto-banda) - var(--e-4)); }
  .js .paso .figura-paso { display: none; }
}

/* ── La IA ────────────────────────────────────────────────────────────────────────────── */

.ia-cuerpo { margin-top: var(--e-7); display: grid; gap: var(--e-7); }
@media (min-width: 64rem) { .ia-cuerpo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }

.ia-mirar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin-bottom: var(--e-4); }
.ia-mirar p { font-family: var(--f-titular); font-size: var(--t-seccion); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }

.ia-foto { margin: 0; }
.ia-marco { position: relative; overflow: hidden; border-radius: 10px; box-shadow: var(--sombra-pantalla); background: #ddd; }
.ia-marco img { width: 100%; height: auto; aspect-ratio: 1184 / 864; object-fit: cover; }
/* La retícula 2 × 2 con el 10 % de solape real de vision-cuadrantes.ts: cada trozo cubre 0-60 % o 40-100 %. */
.ia-reticula { position: absolute; inset: 0; pointer-events: none; }
.ia-reticula::before,
.ia-reticula::after { content: ""; position: absolute; background: rgb(255 255 255 / 0.85); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.35); }
.ia-reticula::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.ia-reticula::after { top: 50%; left: 0; right: 0; height: 1px; }
.ia-num {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--papel);
  color: var(--tinta);
  display: grid;
  place-items: center;
  font: 600 0.8125rem/1 var(--f-texto);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2);
}
.ia-num.c-1 { left: 3%; top: 4%; } .ia-num.c-2 { left: 53%; top: 4%; }
.ia-num.c-3 { left: 3%; top: 54%; } .ia-num.c-4 { left: 53%; top: 54%; }
.ia-recuadro {
  position: absolute;
  width: 60%;
  height: 60%;
  border: 2px solid #d70000;
  background: rgb(215 0 0 / 0.1);
  border-radius: 6px;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity var(--dur-media) var(--ease-salida), transform var(--dur-media) var(--ease-salida);
}
.ia-recuadro[data-cuadrante="0"] { left: 0; top: 0; }
.ia-recuadro[data-cuadrante="1"] { left: 40%; top: 0; }
.ia-recuadro[data-cuadrante="2"] { left: 0; top: 40%; }
.ia-recuadro[data-cuadrante="3"] { left: 40%; top: 40%; }
.ia-foto.revelada .ia-recuadro { opacity: 1; transform: none; }

.ia-foto figcaption { margin-top: var(--e-4); display: grid; gap: var(--e-3); }
.ia-sello { font-size: var(--t-etiqueta); font-weight: 600; color: var(--tinta-2); background: var(--papel); padding: var(--e-1) var(--e-3); justify-self: start; border-radius: var(--r-papel); }
.seccion--honda .ia-sello { background: var(--papel); }

.ia-lista-t { font-size: var(--t-etiqueta); font-weight: 600; color: var(--tinta-2); }
.ia-comprobaciones { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--regla); }
.ia-comprobaciones li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-4); padding-block: var(--e-3); border-bottom: 1px solid var(--regla); }
.ia-nombre { font-weight: 600; }
.ia-pregunta { grid-column: 1 / -1; font-size: var(--t-pequeno); color: var(--tinta-3); }
.ia-resp { font-size: var(--t-etiqueta); font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
/* Antes de revelar: solo las preguntas. Después: lo que contestó el modelo, con los colores del visor. */
.ia-foto:not(.revelada) .ia-resp { visibility: hidden; }
.ia-foto.revelada li.limpia .ia-nombre { color: var(--tinta-3); text-decoration: line-through; }
.ia-foto.revelada li.falla .ia-nombre,
.ia-foto.revelada li.falla .ia-resp { color: #c10007; }
.ia-veredicto { font-size: var(--t-pequeno); color: var(--tinta-2); }
/* Antes de revelar, el veredicto no guarda su hueco: quedaban 120 px en blanco. */
.ia-foto:not(.revelada) .ia-veredicto,
.ia-foto:not(.revelada) .ia-general { display: none; }
.ia-veredicto b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.ia-general { font-size: var(--t-pequeno); color: var(--tinta-2); }
.ia-general b { color: var(--tinta); }
/* El botón no cambia de ancho al cambiar su texto: el segundo clic caía fuera. */
[data-ia-revelar] { min-width: min(16rem, 100%); }

.ia-como h3 { font-size: var(--t-seccion); line-height: 1.15; letter-spacing: -0.015em; font-weight: 600; }
.ia-pasos { list-style: none; margin: var(--e-4) 0 0; padding: 0; border-top: 1px solid var(--regla); }
.ia-pasos li { padding-block: var(--e-3); border-bottom: 1px solid var(--regla); font-size: var(--t-pequeno); color: var(--tinta-2); }
.ia-pasos b { color: var(--tinta); font-weight: 600; }
.ia-limite, .ia-contraste { margin-top: var(--e-5); font-size: var(--t-pequeno); color: var(--tinta-2); }
.ia-limite b { color: var(--tinta); }

.ia-no { margin-top: var(--e-7); display: grid; gap: var(--e-5); }
@media (min-width: 48rem) { .ia-no { grid-template-columns: 1fr 1fr; } }
.ia-no h3 { font-size: var(--t-etiqueta); font-weight: 600; color: var(--tinta-2); font-family: var(--f-texto); }
.ia-no ul { margin: var(--e-3) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--regla); }
.ia-no li { padding-block: var(--e-3); border-bottom: 1px solid var(--regla); font-size: var(--t-pequeno); }

/* ── Ventajas: filas de parte, no tarjetas ────────────────────────────────────────────── */

.ventajas-lista { list-style: none; margin: var(--e-7) 0 0; padding: 0; }
.ventajas-lista li { display: grid; gap: var(--e-2) var(--e-6); padding-block: var(--e-5); border-top: 1px solid var(--regla); }
.ventajas-lista li:last-child { border-bottom: 1px solid var(--regla); }
.ventajas-lista h3 { font-size: var(--t-seccion); line-height: 1.15; letter-spacing: -0.015em; font-weight: 600; }
.ventajas-lista p { color: var(--tinta-2); max-width: var(--medida); }
@media (min-width: 48rem) { .ventajas-lista li { grid-template-columns: 5fr 7fr; align-items: baseline; } }
.ventajas-origen { margin-top: var(--e-6); font-size: var(--t-pequeno); color: var(--tinta-3); }

/* ── Precios: dos hojas y una tabla ───────────────────────────────────────────────────── */

.calculadora { margin-top: var(--e-7); padding: var(--e-5) 0; border-block: 1px solid var(--regla); display: grid; gap: var(--e-4); }
@media (min-width: 64rem) { .calculadora { grid-template-columns: 5fr 7fr; align-items: center; column-gap: var(--e-6); } }
.calculadora label { font-family: var(--f-titular); font-size: var(--t-seccion); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
.calculadora-control { display: flex; align-items: center; gap: var(--e-4); }
.calculadora input[type="range"] { flex: 1; min-width: 0; height: 2.75rem; accent-color: var(--marca); cursor: pointer; }
.calculadora input[type="number"] {
  width: 7.5rem;
  min-height: 2.75rem;
  padding: 0 var(--e-3);
  border: 1.5px solid var(--regla-control);
  border-radius: var(--r-control);
  background: var(--papel);
  color: var(--tinta);
  font: 600 1.125rem/1 var(--f-texto);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.calculadora-resultado { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-5); }
.calculadora-precio { font-family: var(--f-titular); font-size: var(--t-precio); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.calculadora-precio small { font-family: var(--f-texto); font-size: var(--t-pequeno); font-weight: 500; letter-spacing: 0; color: var(--tinta-2); }
.calculadora-detalle { flex-basis: 100%; font-size: var(--t-pequeno); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
/* El detalle va en su propia línea y guarda sitio para dos: moverla ya no empuja nada. */
@media (max-width: 47.99rem) { .calculadora-detalle { min-height: 3em; } }
/* Sin JavaScript la calculadora no calcula: la fórmula ya está en el párrafo y en la tabla. */
html:not(.js) .calculadora { display: none; }

.planes { margin-top: var(--e-6); display: grid; border: 1px solid var(--regla); border-radius: var(--r-papel); background: var(--papel); }
@media (min-width: 48rem) { .planes { grid-template-columns: 1fr 1fr; } .plan + .plan { border-left: 1px solid var(--regla); } }
@media (max-width: 47.99rem) { .plan + .plan { border-top: 1px solid var(--regla); } }
.plan { padding: var(--e-6); display: flex; flex-direction: column; gap: var(--e-3); }
.plan h3 { font-family: var(--f-texto); font-size: var(--t-etiqueta); font-weight: 600; color: var(--tinta-2); letter-spacing: 0.01em; }
.plan-precio { font-family: var(--f-titular); font-size: var(--t-precio); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-precio small { font-family: var(--f-texto); font-size: var(--t-pequeno); font-weight: 500; letter-spacing: 0; color: var(--tinta-2); }
.plan-precio--texto { font-size: var(--t-seccion); letter-spacing: -0.015em; line-height: 1.15; }
.plan-alcance { font-size: var(--t-pequeno); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.plan-lleva { margin-top: var(--e-2); font-size: var(--t-etiqueta); font-weight: 600; color: var(--tinta-2); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.plan li { display: grid; grid-template-columns: 1rem 1fr; gap: var(--e-3); font-size: var(--t-pequeno); }
.plan li svg { width: 1rem; height: 1rem; margin-top: 0.3rem; color: var(--tinta-2); }
.plan-cuando { font-size: var(--t-pequeno); color: var(--tinta-3); }
.plan .boton { margin-top: auto; align-self: start; }
/* Los dos botones, al pie de su hoja y a la misma altura. */
.plan ul + .boton, .plan-cuando + .boton { margin-top: auto; }
.plan ul, .plan-cuando { margin-bottom: var(--e-4); }

.tabla-caja { margin-top: var(--e-6); overflow-x: auto; }
.tabla-precios { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: var(--t-pequeno); font-variant-numeric: tabular-nums; }
.tabla-precios caption { text-align: left; padding-bottom: var(--e-3); font-size: var(--t-etiqueta); font-weight: 600; color: var(--tinta-2); }
.tabla-precios th { text-align: left; font-size: var(--t-etiqueta); font-weight: 600; color: var(--tinta-2); padding: var(--e-3); background: var(--papel-hondo); border-bottom: 1px solid var(--regla); }
.tabla-precios td { padding: var(--e-3); border-bottom: 1px solid var(--regla); }
.tabla-precios tbody tr:nth-child(even) td { background: var(--papel-hondo); }
.tabla-precios td:nth-child(-n+3), .tabla-precios th:nth-child(-n+3) { text-align: right; }
.seccion--honda .tabla-precios th { background: var(--papel); }
.seccion--honda .tabla-precios tbody tr:nth-child(even) td { background: var(--papel); }
/* Cada fila se nombra por sus departamentos (th de fila), con aspecto de celda. */
.tabla-precios tbody th { font-size: inherit; font-weight: 500; color: var(--tinta); background: transparent; }
.seccion--honda .tabla-precios tbody th { background: transparent; }
.tabla-precios tbody tr:nth-child(even) th { background: var(--papel-hondo); }
.seccion--honda .tabla-precios tbody tr:nth-child(even) th { background: var(--papel); }
/* En el celular la tabla cabe sin desplazarse: tres columnas y el precio por departamento debajo. */
@media (max-width: 32.99rem) {
  .tabla-precios { min-width: 0; }
  .tabla-precios th, .tabla-precios td { padding: var(--e-2); }
}
/* El precio por departamento, debajo de cada total: es lo que se compara entre planes. */
.tabla-cu { display: block; margin-top: 0.125rem; font-size: var(--t-etiqueta); font-weight: 400; color: var(--tinta-3); }
.tabla-no { font-size: var(--t-etiqueta); color: var(--tinta-3); }
.precios-letra { margin-top: var(--e-4); font-size: var(--t-pequeno); color: var(--tinta-3); max-width: var(--medida); }

/* ── Preguntas ────────────────────────────────────────────────────────────────────────── */

.preguntas-lista { margin-top: var(--e-7); border-bottom: 1px solid var(--regla); max-width: 52rem; }
.preguntas-lista details { border-top: 1px solid var(--regla); }
.preguntas-lista summary {
  list-style: none;
  cursor: pointer;
  min-height: 2.75rem;
  padding-block: var(--e-4);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--e-4);
  font-family: var(--f-titular);
  font-size: var(--t-seccion);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.preguntas-lista summary::-webkit-details-marker { display: none; }
.preguntas-lista summary svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: calc((1.2em - 1.25rem) / 2); color: var(--tinta-2); transition: transform var(--dur-corta) var(--ease-estandar); }
.preguntas-lista details[open] summary svg { transform: rotate(45deg); }
.preguntas-lista details p { padding-bottom: var(--e-5); color: var(--tinta-2); max-width: var(--medida); }

/* ── Cierre y pie ─────────────────────────────────────────────────────────────────────── */

.cierre h2 { color: var(--marca); }
.cierre p { margin-top: var(--e-5); color: var(--tinta-2); max-width: var(--medida); font-size: var(--t-entrada); line-height: 1.5; }
.cierre .boton { margin-top: var(--e-6); min-height: 3.25rem; padding-inline: 1.5rem; font-size: 1.0625rem; }
.cierre-letra { font-size: var(--t-pequeno) !important; color: var(--tinta-3) !important; }

.pie { background: var(--papel-hondo); padding-block: var(--e-7); border-top: 1px solid var(--regla); }
.pie-interior { display: grid; gap: var(--e-4); font-size: var(--t-pequeno); color: var(--tinta-2); }
.pie-marca b { font-family: var(--f-titular); color: var(--marca); font-weight: 700; }
.pie-nav { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }
.pie-nav a { color: var(--tinta-2); padding-block: 0.625rem; }
.pie-nota { color: var(--tinta-3); max-width: var(--medida); }

/* ── En el teléfono, lo que se lee de un vistazo [Sushi-MOV2] ─────────────────────────────
   Josh, 5-oct: «en la versión móvil hay demasiado texto, no lo leerán no?». Medido en un iPhone de
   390 × 844: 23 pantallas y 3.639 palabras, cuando en una visita se leen como mucho un 28 % de las
   palabras (Nielsen, NN/g, 2008). Por debajo de 768 px quedan los titulares, el escenario, la foto de la
   IA con lo que no hace, los precios y las preguntas, y se esconde la explicación larga, que sigue
   entera en tableta y escritorio. No se cambia ni se añade una frase: el teléfono enseña un subconjunto.
   Va por sección porque el blog y las páginas legales cargan esta hoja y también tienen .tabla-caja. */
@media (max-width: 47.99rem) {
  #como-funciona .dia-nombre,
  #como-funciona .paso-texto,
  #como-funciona .porque,
  #como-funciona .reglas,
  #como-funciona .semaforo,
  #ia .ia-pregunta,
  #ia .ia-como > :not(.ia-limite),
  #ia .ia-no > div:first-child,
  #ventajas .ventajas-lista p,
  #ventajas .ventajas-origen,
  #precios .plan-lleva,
  #precios .plan ul,
  #precios .plan-cuando,
  #precios .tabla-caja { display: none; }
  #ia .ia-limite { margin-top: 0; }
  /* Sin su texto, un paso dura en pantalla lo que mide: sin alto mínimo, los nueve momentos del
     escenario pasaban en una pantalla y no daba tiempo a verlos. Y su titular se queda pegado bajo el
     escenario mientras manda: suelto, se iba debajo del escenario a mitad de su momento y lo que se
     leía era el titular del paso siguiente. */
  .js #como-funciona .paso { min-height: 40svh; }
  .js #como-funciona .paso-cabeza { position: sticky; top: calc(var(--tapa-escenario) + var(--e-4)); }
}