/* Hallmark · route: custom (bespoke) · structure: hero con elenco → viaje (frase + tu kit) → relato fijo (la rejilla se vuelve el sitio)
 *   → kits por giro → calculadora → gantt → preguntas → cierre · nav: píldora central con la rejilla de avance · footer: Ft2 en línea
 * idea: "los kits son piezas que nacen de la rejilla del logo y viajan por la página hasta armar el sitio"
 * Inspiración de experiencia: Kaviyan (personajes que viajan), Findwell y Saro (relato con scroll). Bloques propios.
 * Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 */

/* ── Base ── */
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
.saltar { position: absolute; left: var(--space-md); top: -100px; z-index: 30; padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-on-ink); border-radius: var(--radius-sm); }
.saltar:focus { top: var(--space-md); }

/* ── Botones ── */

/* ── Esquina de Stackgrid en todos los controles de Kitsite (superelipse; sin soporte, radio normal) ── */
.boton, .nav__pildora, .arranque__fila, .giros__elige span, .toggle > span, .capitulo__meta, .dock__pieza,
.ov-busca__campo, .ov-version, .ov-ia, .ov-ia__campo, .ov-ia__boton, .ov-kits li, .ov-portal { corner-shape: superellipse(1.4); }

/* ── Íconos de kit (js/kits.js) ── */

/* ── Actores: la pieza grande que representa un kit ── */
.actor { --b: 160px; display: grid; place-items: center; width: var(--b); height: var(--b); border-radius: 28%; corner-shape: superellipse(1.4);
  background: var(--kc, var(--color-ink)); color: var(--color-sobre-kit); box-shadow: inset 0 0 0 1px var(--color-line), 0 18px 40px -28px oklch(20.5% 0 0 / 0.45); }
.actor .kit { --kit-hueco: var(--kc, var(--color-ink)); }
.actor--tinta { box-shadow: 0 18px 40px -26px oklch(20.5% 0 0 / 0.6); }
/* La .kit necesita un número: 160 / 22 × 0.42 ≈ 3.05 */
.actor .kit { --k: 3.05; }

.elenco { position: fixed; inset: 0; z-index: 8; pointer-events: none; display: none; }
.elenco .actor { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; }
html.vuela .elenco { display: block; }
html.vuela .estatico { visibility: hidden; }

/* ── Header fijo, sin fondo ni borde. No bloquea los clics de la página: solo sus controles los reciben. ── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 10; height: var(--nav-h); pointer-events: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-md);
  padding: 0 var(--gutter);
}
.nav > * { pointer-events: auto; }
/* La palabra empieza donde termina la rejilla del isotipo (22 de caja + 7 de aire, a 20 px de alto) y se va al bajar */
.nav__palabra { justify-self: start; display: flex; align-items: center; min-height: 44px; margin-left: calc(20px / 22 * 29); color: var(--color-ink);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.nav__palabra svg { height: 20px; width: auto; }
.nav[data-arriba="no"] .nav__palabra { opacity: 0; transform: translateX(-6px); pointer-events: none; }

/* El isotipo: fijo y quieto. Se invierte sobre fondos oscuros (diferencia), así que no necesita fondo. */
.iso { position: fixed; z-index: 12; left: calc(var(--gutter) - 12px); top: calc(var(--nav-h) / 2 - 22px); display: grid; place-items: center; width: 44px; height: 44px; color: var(--color-iso); mix-blend-mode: difference; }
.iso svg { width: 20px; height: 20px; fill: currentColor; }
.iso:focus-visible { outline: 2px solid var(--color-iso); outline-offset: -4px; }
body:has(.panel.abierto) .iso { opacity: 0; pointer-events: none; }

/* La píldora central: la rejilla se llena con el avance y dice en qué sección vas; abre el menú */
.nav__centro { position: relative; }
.nav__pildora {
  display: inline-flex; align-items: center; gap: var(--space-sm); height: 40px; padding: 0 var(--space-md) 0 var(--space-sm);
  border: 0; border-radius: var(--radius-control); background: var(--color-ink); color: var(--color-on-ink); cursor: pointer;
  font-size: var(--text-sm); font-weight: 520; white-space: nowrap; box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.14);
}
.nav__avance { display: grid; grid-template-columns: 9px 9px; gap: 2px; padding: 4px; border-radius: 9px; background: var(--color-ink-2); }
.nav__avance i { width: 9px; height: 9px; border-radius: 3.5px; background: var(--color-on-ink); opacity: calc(0.22 + var(--f, 0) * 0.78); transform: scale(calc(0.7 + var(--f, 0) * 0.3)); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.nav__seccion { min-width: 7.5em; text-align: left; }
.nav__flecha { width: 14px; height: 14px; color: var(--color-on-ink-soft); transition: transform var(--dur-short) var(--ease-out); }
.nav__pildora[aria-expanded="true"] .nav__flecha { transform: rotate(180deg); }
/* Panel del menú: vidrio esmerilado (inspirado en Kaviyan). Nace del tamaño de la píldora y crece con un recorte
   animado (clip-path); al cerrar se encoge de regreso. --pw es el ancho de la píldora (lo mide js/landing.js). */
.panel { --curva-panel: cubic-bezier(0.32, 0.72, 0, 1); --t-panel: 560ms;
  position: absolute; left: 50%; top: -6px; z-index: 2; width: min(360px, 100vw - 2 * var(--gutter)); max-height: calc(100svh - 12px); overflow: auto;
  translate: -50% 0; padding: 6px; border-radius: 24px;
  background: var(--color-vidrio); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.6), inset 0 0 0 1px oklch(20.5% 0 0 / 0.06);
  clip-path: inset(6px calc(50% - var(--pw, 200px) / 2) calc(100% - 46px) calc(50% - var(--pw, 200px) / 2) round 18px);
  transition: clip-path var(--t-panel) var(--curva-panel); }
.panel.abierto { clip-path: inset(0 0 0 0 round 24px); }
.panel[hidden] { display: none; }
.panel__barra > *, .panel__cuerpo > * { opacity: 0; transform: translateY(-6px); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
.panel.abierto .panel__barra > * { opacity: 1; transform: none; transition: opacity 260ms var(--ease-out) 140ms, transform 260ms var(--ease-out) 140ms; }
.panel.abierto .panel__cuerpo > * { opacity: 1; transform: none; transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out); }
.panel.abierto .panel__cuerpo > :nth-child(1) { transition-delay: 160ms; }
.panel.abierto .panel__cuerpo > :nth-child(2) { transition-delay: 200ms; }
.panel.abierto .panel__cuerpo > :nth-child(3) { transition-delay: 250ms; }
.panel.abierto .panel__cuerpo > :nth-child(4) { transition-delay: 300ms; }
/* La píldora se desvanece encima mientras el panel crece; al cerrar, reaparece cuando el panel ya regresó */
.nav__pildora { transition: opacity 200ms var(--ease-out) 320ms; }
.nav__centro:has(.panel.abierto) .nav__pildora { opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease-out) 60ms; }
.panel__barra { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 var(--space-2xs) 0 var(--space-xs);
  border-radius: var(--radius-control); corner-shape: superellipse(1.4); background: var(--color-ink); color: var(--color-on-ink); }
.panel__cerrar { display: inline-flex; align-items: center; gap: var(--space-xs); height: 40px; padding: 0 var(--space-xs); border: 0; background: transparent; color: inherit; font-size: var(--text-sm); font-weight: 560; cursor: pointer; }
.panel__cerrar svg { width: 16px; height: 16px; }
.panel__cerrar:focus-visible { outline-color: var(--color-on-ink); outline-offset: -2px; }
.panel__cuerpo { display: grid; gap: var(--space-lg); padding: var(--space-lg) var(--space-md) var(--space-md); }
.panel__grupo { margin-bottom: var(--space-2xs); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-soft); letter-spacing: 0.02em; }
.panel__principal { display: grid; }
.panel__principal a { display: flex; align-items: center; min-height: 36px; font-size: 1.25rem; font-weight: 540; letter-spacing: -0.02em; text-decoration: none; color: var(--color-ink);
  transition: color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.panel__principal a:hover { color: var(--color-ink-soft); transform: translateX(2px); }
.panel__columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); padding-top: var(--space-lg); border-top: 1px solid oklch(20.5% 0 0 / 0.1); }
.panel__columnas > div { display: grid; align-content: start; }
.panel__columnas a { display: flex; align-items: center; min-height: 32px; font-size: var(--text-sm); color: var(--color-ink-soft); text-decoration: none; white-space: nowrap; }
.panel__columnas a:hover { color: var(--color-ink); }
.panel__redes { padding-top: var(--space-lg); border-top: 1px solid oklch(20.5% 0 0 / 0.1); }
.panel__columnas--redes { padding-top: 0; border-top: 0; }
@media (prefers-reduced-motion: reduce) { .panel { transition: none; } }
.nav__acciones { justify-self: end; display: flex; align-items: center; gap: var(--space-xs); }
.nav__acciones .boton--tinta { box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.14); }
/* Botón secundario de Stackgrid: gris con borde de 1 px por dentro, sólido para leerse sobre cualquier sección */

/* ── Celular: botón de menú arriba y Empezar fijo abajo (en escritorio no se ven) ── */
.nav__menu-btn { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px; corner-shape: superellipse(1.4);
  background: var(--color-ink); color: var(--color-on-ink); cursor: pointer; box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.14); transition: opacity var(--dur-short) var(--ease-out); }
.nav__menu-btn svg { width: 22px; height: 22px; }
.nav__menu-btn:focus-visible { outline-offset: 3px; }
.cta-fija { display: none; }

/* ── Formulario de arranque (va a ONB-01) ── */
.arranque__fila .boton { height: 44px; }
.arranque__ayuda { padding-left: var(--space-md); font-size: var(--text-xs); color: var(--color-ink-soft); }
.arranque__ayuda a { color: var(--color-ink); font-weight: 560; text-underline-offset: 3px; white-space: nowrap; }
.arranque--centro .arranque__ayuda, .arranque--centro .arranque__nota { text-align: center; padding-left: 0; }
.preguntas details p a { color: var(--color-ink); text-underline-offset: 3px; }
.arranque[data-error] .arranque__fila { box-shadow: var(--anillo-error); }
.arranque--centro { margin: 0 auto; width: 100%; text-align: left; }

/* ── 1 · Hero ── */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: calc(var(--nav-h) + var(--space-3xl)) var(--gutter) 0; overflow: clip; }
.hero__texto { max-width: var(--max); width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; align-self: center; }
.hero__titulo { font-size: var(--text-display); line-height: 0.98; letter-spacing: -0.045em; font-weight: 580; font-variation-settings: "opsz" 72; }
.hero__lado { display: grid; gap: var(--space-xl); padding-bottom: var(--space-xs); }
.hero__lede { font-size: var(--text-lede); line-height: 1.5; color: var(--color-ink-soft); max-width: 34ch; }
.hero__elenco { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.5rem, 2vw, 2rem); max-width: var(--max); width: 100%; margin: var(--space-3xl) auto 0; height: clamp(120px, 15vw, 210px); align-items: start; }
.hero__slot { display: grid; place-items: start center; }
.hero__ancla { --tam: clamp(84px, 12.5vw, 176px); position: relative; display: block; width: var(--tam); aspect-ratio: 1; transform: translateY(var(--y)) rotate(var(--r)); }
/* Las piezas estáticas (sin JS o con movimiento reducido) miden 160 px y se escalan a su caja */
.actor.estatico { --b: 160px; position: absolute; left: 50%; top: 50%; translate: -50% -50%; scale: var(--s, 0.5); }

/* ── 2 · Viaje: frase y tu kit ── */
.viaje { position: relative; height: 320svh; }
.viaje__pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: 1fr auto; align-items: center; padding: calc(var(--nav-h) + var(--space-xl)) var(--gutter) var(--space-2xl); }
.viaje__frase {
  max-width: 1020px; margin: 0 auto; text-align: center;
  font-size: clamp(1.75rem, 2.9vw + 0.8rem, 3.4rem); line-height: 1.2; letter-spacing: -0.03em; font-weight: 520; font-variation-settings: "opsz" 48;
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
}
.viaje__frase .palabra { opacity: 0.16; transition: opacity var(--dur-short) var(--ease-out); }
.viaje__frase .palabra.encendida { opacity: 1; }
.viaje[data-fase="dock"] .viaje__frase { opacity: 0.2; transform: translateY(-2vh); }
.ancla { position: relative; display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.16em; margin: 0 0.06em; }

html:not(.vuela) .viaje__frase .palabra { opacity: 1; }

.dock { width: 100%; max-width: 980px; margin: 0 auto; transform: translateY(calc((1 - var(--dock, 1)) * 40vh)); opacity: var(--dock, 1); }
.dock__panel { position: relative; z-index: 1; border-radius: var(--radius-lg); background: var(--color-ink); color: var(--color-on-ink); padding: var(--space-lg); box-shadow: 0 40px 80px -48px oklch(20.5% 0 0 / 0.7); }
.dock__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); margin-bottom: var(--space-lg); }
.dock__titulo { font-weight: 600; }
.dock__ayuda { font-size: var(--text-sm); color: var(--color-on-ink-soft); text-align: right; min-height: 1.6em; }
.dock__piezas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-sm); }
.dock__pieza { width: 100%; display: grid; justify-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-2xs) var(--space-sm); border: 0; border-radius: var(--radius-md); background: transparent; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.dock__pieza:hover, .dock__pieza:focus-visible, .dock__pieza[aria-pressed="true"] { background: var(--color-ink-2); }
.dock__pieza:focus-visible { outline-color: var(--color-on-ink); }
.dock__ancla { position: relative; display: block; width: var(--tam); aspect-ratio: 1; }
.dock__ancla { --tam: clamp(56px, 7.4vw, 96px); }

.dock__nombre { font-size: var(--text-xs); color: var(--color-on-ink-soft); white-space: nowrap; }
.dock__banda { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2xs) var(--space-md); margin-top: -18px; padding: calc(18px + var(--space-2xs)) var(--space-lg) var(--space-2xs);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--color-paper-3); font-size: var(--text-sm); }
.dock__banda b { font-weight: 620; }
.dock__banda-accion { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; font-weight: 560; white-space: nowrap; text-decoration: none; }
.dock__banda-accion svg { width: 14px; height: 14px; transition: transform var(--dur-short) var(--ease-out); }
.dock__banda-accion:hover svg { transform: translateX(3px); }
/* En el dock, las piezas claras llevan contorno para leerse sobre la tinta */
.elenco .actor.en-dock { box-shadow: none; }
.elenco .actor--tinta.en-dock { box-shadow: inset 0 0 0 1px oklch(40% 0 0); }

/* ── 3 · Relato: la rejilla se vuelve el sitio ── */
.relato { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-3xl); max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.relato__escena { grid-column: 2; grid-row: 1 / span 7; }
.relato__pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); padding-top: var(--nav-h); }
.capitulo { grid-column: 1; min-height: 92svh; display: flex; flex-direction: column; justify-content: center; gap: var(--space-md); padding: var(--space-3xl) 0; }
.capitulo--intro { grid-row: 1; min-height: 100svh; }
.capitulo[data-paso="1"] { grid-row: 2; } .capitulo[data-paso="2"] { grid-row: 3; } .capitulo[data-paso="3"] { grid-row: 4; }
.capitulo[data-paso="4"] { grid-row: 5; } .capitulo[data-paso="5"] { grid-row: 6; } .capitulo[data-paso="6"] { grid-row: 7; }
.relato__titulo { font-size: var(--text-h2); line-height: 1.02; letter-spacing: -0.04em; font-weight: 580; font-variation-settings: "opsz" 64; }
.capitulo__num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-soft); letter-spacing: 0.02em; }
.capitulo__titulo { font-size: clamp(1.75rem, 1.6vw + 1.1rem, 2.6rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 580; font-variation-settings: "opsz" 48; }
.capitulo__texto { font-size: var(--text-lede); line-height: 1.55; color: var(--color-ink-soft); max-width: 38ch; }
.capitulo__meta { display: inline-flex; align-self: flex-start; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-line-strong); font-size: var(--text-xs); color: var(--color-ink-soft); }
.capitulo { opacity: 0.32; transition: opacity var(--dur-long) var(--ease-out); }
.capitulo.activo, .capitulo--intro { opacity: 1; }
html:not(.js) .capitulo { opacity: 1; }

/* El escenario: hoja de 4:5 medida con container queries. Cada pieza es una capa completa recortada con clip-path. */
.escena { --t: var(--dur-escena) var(--ease-out); position: relative; flex: none; width: min(100%, 540px, calc((100svh - var(--nav-h) - 96px) * 0.8)); aspect-ratio: 4 / 5; container-type: size; }
.escena__hoja { position: absolute; inset: 0; border-radius: 4cqw; background: var(--color-sheet); box-shadow: inset 0 0 0 1px var(--color-line), 0 50px 90px -60px oklch(20.5% 0 0 / 0.45);
  opacity: 0; transform: scale(0.96); transition: opacity var(--t), transform var(--t), background-color var(--t); }
.pz { position: absolute; inset: 0; background: var(--color-ink); clip-path: var(--clip); transition: clip-path var(--t), background-color var(--t), opacity var(--dur-long) var(--ease-out); }
.pz__c { position: absolute; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); pointer-events: none; }

/* Las piezas del sitio: encabezado, portada, contenido y columna lateral (en el paso 0 son huecos de un plano vacío) */
.pz1 { --clip: inset(5% 5% 87.5% 5% round 2.4cqw); }
.pz2 { --clip: inset(14.5% 5% 50% 5% round 3cqw); }
.pz3 { --clip: inset(52% 51.5% 5% 5% round 3cqw); }
.pz4 { --clip: inset(52% 5% 5% 51.5% round 3cqw); }
.pz5 { --clip: inset(84% 27% 16% 73% round 2cqw); opacity: 0; }
.escena__hoja { opacity: 1; transform: none; }
.escena[data-paso="0"] .pz { background: transparent; }

/* Paso 0 · el plano vacío: cuatro huecos punteados con su nombre */
.ov-vacio { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); pointer-events: none; }
.escena[data-paso="0"] .ov-vacio { opacity: 1; }
.ov-vacio i { position: absolute; display: grid; place-items: center; border: 0.35cqw dashed var(--color-line-strong); border-radius: 3cqw; font-style: normal; font-size: 2.6cqw; font-weight: 560; color: var(--color-ink-faint); }
.ov-vacio i:nth-child(1) { top: 5%; left: 5%; right: 5%; bottom: 87.5%; border-radius: 2.4cqw; }
.ov-vacio i:nth-child(2) { top: 14.5%; left: 5%; right: 5%; bottom: 50%; }
.ov-vacio i:nth-child(3) { top: 52%; left: 5%; right: 51.5%; bottom: 5%; }
.ov-vacio i:nth-child(4) { top: 52%; left: 51.5%; right: 5%; bottom: 5%; }

.escena[data-paso="5"] .pz4, .escena[data-paso="6"] .pz4 { --clip: inset(52% 5% 29% 51.5% round 3cqw); }
.escena[data-paso="5"] .pz5, .escena[data-paso="6"] .pz5 { --clip: inset(73% 5% 5% 51.5% round 3cqw); opacity: 1; }

/* Paso 1 · esqueleto gris mientras buscamos el negocio */
.escena[data-paso="1"] .pz { background: var(--color-paper-3); }

/* Pasos 2+ · el diseño: entra el color del negocio (solo aquí hay color) */
.escena[data-paso="2"] .escena__hoja, .escena[data-paso="3"] .escena__hoja, .escena[data-paso="4"] .escena__hoja,
.escena[data-paso="5"] .escena__hoja, .escena[data-paso="6"] .escena__hoja { background: var(--cliente-fondo); }
.escena[data-paso="2"] .pz1, .escena[data-paso="3"] .pz1, .escena[data-paso="4"] .pz1, .escena[data-paso="5"] .pz1, .escena[data-paso="6"] .pz1 { background: var(--cliente-fondo); }
.escena[data-paso="2"] .pz2, .escena[data-paso="3"] .pz2, .escena[data-paso="4"] .pz2, .escena[data-paso="5"] .pz2, .escena[data-paso="6"] .pz2 { background: var(--cliente-acento); }
.escena[data-paso="2"] .pz3, .escena[data-paso="3"] .pz3, .escena[data-paso="4"] .pz3, .escena[data-paso="5"] .pz3, .escena[data-paso="6"] .pz3 { background: var(--cliente-suave); }
.escena[data-paso="2"] .pz4, .escena[data-paso="3"] .pz4, .escena[data-paso="4"] .pz4, .escena[data-paso="5"] .pz4, .escena[data-paso="6"] .pz4 { background: var(--cliente-suave); }
.escena[data-paso="5"] .pz5, .escena[data-paso="6"] .pz5 { background: var(--cliente-acento); }
.escena:is([data-paso="2"], [data-paso="3"], [data-paso="4"], [data-paso="5"], [data-paso="6"]) :is(.pz1__c, .pz2__c, .pz3__c) { opacity: 1; }
.escena:is([data-paso="2"], [data-paso="3"]) .pz4__horario { opacity: 1; }
.escena:is([data-paso="4"], [data-paso="5"], [data-paso="6"]) .pz4__reserva { opacity: 1; }

/* Contenido del sitio del cliente (medidas en cq: todo escala con el escenario) */
.pz1__c { left: 9%; right: 9%; top: 5%; height: 7.5%; display: flex; align-items: center; gap: 2cqw; color: var(--cliente-tinta); }
.sitio__marca { font-size: 3.6cqw; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.sitio__nav { display: flex; gap: 1.4cqw; margin-left: auto; }
.sitio__nav i { width: 6cqw; height: 1.2cqw; border-radius: 1cqw; background: currentColor; opacity: 0.35; }
.sitio__chip { display: none; padding: 0.6cqw 1.8cqw; border-radius: 4cqw; font-size: 2.4cqw; font-weight: 600; white-space: nowrap; }
.sitio__chip--resenas { background: var(--cliente-suave); }
.sitio__chip--publicado { background: var(--color-ok); color: var(--color-sheet); }
.escena:is([data-paso="4"], [data-paso="5"]) .sitio__chip--resenas { display: inline-block; }
.escena[data-paso="6"] .sitio__chip--publicado { display: inline-block; }
.escena[data-paso="6"] .sitio__nav { display: none; }

.pz2__c { left: 10%; right: 10%; top: 14.5%; height: 35.5%; display: flex; flex-direction: column; justify-content: center; gap: 2cqw; color: var(--cliente-tinta); overflow: hidden; }
.sitio__img { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 32%; aspect-ratio: 1; border-radius: 2cqw; background: linear-gradient(to top right, transparent calc(50% - 0.6px), var(--cliente-trazo) 50%, transparent calc(50% + 0.6px)), linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--cliente-trazo) 50%, transparent calc(50% + 0.6px)), var(--cliente-sol); }
.sitio__ceja { position: relative; font-size: 2.4cqw; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.sitio__titulo { position: relative; max-width: 60%; font-size: 6.2cqw; line-height: 1.02; font-weight: 640; letter-spacing: -0.03em; }
.sitio__boton { position: relative; align-self: flex-start; padding: 1.6cqw 3.2cqw; border-radius: 1.6cqw; background: var(--cliente-tinta); color: var(--cliente-fondo); font-size: 2.6cqw; font-weight: 640; white-space: nowrap; }
.sitio__boton--chico { padding: 1.2cqw 2.6cqw; font-size: 2.3cqw; background: var(--cliente-tinta); color: var(--cliente-fondo); }

.pz3__c { left: 8%; right: 51.5%; top: 55%; bottom: 7%; display: flex; flex-direction: column; gap: 1.2cqw; padding-right: 3%; color: var(--cliente-tinta); }
.sitio__h { font-size: 3cqw; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.6cqw; }
.sitio__fila { display: flex; justify-content: space-between; padding-bottom: 1.1cqw; border-bottom: 1px solid var(--cliente-suave); font-size: 2.6cqw; font-variant-numeric: tabular-nums; }
.sitio__precio { position: relative; display: inline-grid; justify-items: end; }
.sitio__precio s, .sitio__precio b { grid-area: 1 / 1; text-decoration: none; font-weight: inherit; transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.sitio__precio b { opacity: 0; transform: translateY(40%); }
.escena.aplicado .sitio__precio s, .escena:is([data-paso="4"], [data-paso="5"], [data-paso="6"]) .sitio__precio s { opacity: 0; transform: translateY(-40%); }
.escena.aplicado .sitio__precio b, .escena:is([data-paso="4"], [data-paso="5"], [data-paso="6"]) .sitio__precio b { opacity: 1; transform: none; }
.escena.aplicado .sitio__fila--pastor { background: linear-gradient(transparent 62%, var(--cliente-suave) 62%); }
.sitio__pedir { margin-top: auto; padding: 1.4cqw; border-radius: 4cqw; background: var(--cliente-tinta); color: var(--cliente-fondo); font-size: 2.4cqw; font-weight: 640; text-align: center; opacity: 0; transform: translateY(1.5cqw); transition: opacity var(--dur-long) var(--ease-out) 300ms, transform var(--dur-long) var(--ease-out) 300ms; }
.escena:is([data-paso="4"], [data-paso="5"], [data-paso="6"]) .sitio__pedir { opacity: 1; transform: none; }

.pz4__c { left: 55%; right: 8%; top: 55%; display: flex; flex-direction: column; gap: 1.4cqw; color: var(--cliente-tinta); }
.sitio__dato { font-size: 2.6cqw; line-height: 1.35; }
.sitio__dato--suave { opacity: 0.65; }
.sitio__horas { display: flex; gap: 1.2cqw; }
.sitio__horas span { padding: 0.8cqw 1.6cqw; border-radius: 3cqw; background: var(--cliente-fondo); font-size: 2.3cqw; font-variant-numeric: tabular-nums; }
.sitio__horas .activa { background: var(--cliente-tinta); color: var(--cliente-fondo); }

.pz5__c { left: 55%; right: 8%; top: 76%; bottom: 7%; display: flex; flex-direction: column; justify-content: center; gap: 1.2cqw; color: var(--cliente-tinta); }
.pz5__vacio { align-items: center; gap: 0.8cqw; font-size: 2.5cqw; color: var(--cliente-tinta); }
.pz5__mas { font-size: 6cqw; line-height: 1; font-weight: 300; }
.pz5__lleno .sitio__boton--chico { background: var(--cliente-tinta); color: var(--cliente-fondo); }
.escena[data-paso="5"] .pz5, .escena[data-paso="6"] .pz5 { animation: pz5-llena 1.6s var(--ease-in-out) both; }
@keyframes pz5-llena { 0%, 55% { background: var(--cliente-fondo); } 100% { background: var(--cliente-acento); } }
.escena:is([data-paso="5"], [data-paso="6"]) .pz5__vacio { animation: aparece-se-va 1.6s var(--ease-in-out) both; }
.escena:is([data-paso="5"], [data-paso="6"]) .pz5__lleno { animation: aparece-tarde 1.6s var(--ease-out) both; }
@keyframes aparece-se-va { 0% { opacity: 0; } 20%, 55% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes aparece-tarde { 0%, 65% { opacity: 0; } 100% { opacity: 1; } }
.escena:is([data-paso="5"], [data-paso="6"]) .pz5 { outline: none; }
.escena[data-paso="5"]::after { content: ""; position: absolute; left: 51.5%; right: 5%; top: 73%; bottom: 5%; border-radius: 3cqw; border: 0.4cqw dashed var(--cliente-tinta); animation: aparece-se-va 1.6s var(--ease-in-out) both; pointer-events: none; }

/* Al cambiar de giro, los textos se desvanecen un momento */
[data-giros] [data-g] { transition: opacity 220ms var(--ease-out); }
[data-giros].g-cambia [data-g] { opacity: 0; }

/* Superposiciones de cada capítulo */
.ov { position: absolute; opacity: 0; transform: translateY(2cqw); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); pointer-events: none; }
.escena[data-paso="1"] .ov-busca, .escena[data-paso="2"] .ov-version, .escena[data-paso="3"] .ov-ia,
.escena[data-paso="4"] .ov-kits, .escena[data-paso="6"] .ov-portal { opacity: 1; transform: none; }
.cursor { display: inline-block; width: 0.35cqw; height: 1em; margin-left: 0.3cqw; vertical-align: -0.12em; background: currentColor; animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

.ov-busca { left: 10%; right: 10%; top: 20%; padding: 4cqw; border-radius: 4cqw; background: var(--color-sheet); box-shadow: 0 0 0 1px var(--color-line), 0 30px 60px -36px oklch(20.5% 0 0 / 0.45); }
.ov-busca__campo { padding: 2.4cqw 3cqw; border-radius: 3.4cqw; box-shadow: inset 0 0 0 0.3cqw var(--color-ink); font-size: 3.6cqw; font-weight: 560; }
.ov-busca__datos { display: grid; gap: 1.2cqw; margin-top: 3cqw; font-size: 2.8cqw; color: var(--color-ink-soft); }
.ov-busca__datos li { opacity: 0; transform: translateY(1cqw); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.ov-busca__datos b { color: var(--color-ink); font-weight: 600; }
.escena.encontrado .ov-busca__datos li { opacity: 1; transform: none; }
.escena.encontrado .ov-busca__datos li:nth-child(2) { transition-delay: 120ms; }
.escena.encontrado .ov-busca__datos li:nth-child(3) { transition-delay: 240ms; }
.escena.encontrado .ov-busca__datos li:nth-child(4) { transition-delay: 360ms; }

.ov-version { left: 50%; bottom: -3.5cqw; translate: -50% 0; padding: 1.6cqw 3.4cqw; border-radius: 3cqw; background: var(--color-ink); color: var(--color-on-ink); font-size: 2.8cqw; white-space: nowrap; }

.ov-ia { left: 4%; right: 4%; bottom: -5cqw; padding: 2.4cqw; border-radius: 4cqw; background: var(--color-sheet); box-shadow: 0 0 0 1px var(--color-line), 0 30px 60px -30px oklch(20.5% 0 0 / 0.5); display: grid; gap: 2cqw; }
.ov-ia__campo { padding: 2cqw 3cqw; border-radius: 2.6cqw; background: var(--color-paper-2); font-size: 3.2cqw; font-weight: 520; }
.ov-ia__fila { display: flex; align-items: center; gap: 1.6cqw; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.escena.propuesto .ov-ia__fila { opacity: 1; }
.ov-ia__cambio { margin-right: auto; font-size: 2.6cqw; color: var(--color-ink-soft); white-space: nowrap; }
.ov-ia__boton { display: inline-grid; padding: 1.4cqw 2.8cqw; border-radius: 2.6cqw; box-shadow: inset 0 0 0 1px var(--color-line-strong); font-size: 2.6cqw; font-weight: 600; white-space: nowrap; }
.ov-ia__boton--tinta { background: var(--color-ink); color: var(--color-on-ink); box-shadow: none; }
.ov-ia__aplicar, .ov-ia__listo { grid-area: 1 / 1; transition: opacity var(--dur-short) var(--ease-out); }
.ov-ia__listo { opacity: 0; }
.escena.aplicado .ov-ia__aplicar { opacity: 0; }
.escena.aplicado .ov-ia__listo { opacity: 1; }

.ov-kits { left: -9cqw; top: 22%; display: grid; gap: 2.4cqw; }
.ov-kits li { display: flex; align-items: center; gap: 2cqw; padding: 1.6cqw 3.2cqw 1.6cqw 1.6cqw; border-radius: 3cqw; background: var(--color-ink); color: var(--color-on-ink); font-size: 2.8cqw; font-weight: 560; white-space: nowrap; box-shadow: 0 24px 40px -24px oklch(20.5% 0 0 / 0.6);
  opacity: 0; transform: translateX(-3cqw); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.ov-kits li:nth-child(2) { transition-delay: 140ms; margin-left: 4cqw; }
.ov-kits li:nth-child(3) { transition-delay: 280ms; }
.escena[data-paso="4"] .ov-kits li { opacity: 1; transform: none; }
.ov-kits__icono { display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; border-radius: 2cqw; background: var(--kc, var(--color-on-ink)); color: var(--color-sobre-kit); }
.ov-kits__icono .kit { --k: 0.62; --kit-hueco: var(--kc, var(--color-on-ink)); }

/* Capítulo 6 · el portal: todo en un solo lugar (Kitsite, monocromo; los kits con su color) */
.ov-portal { inset: 0; display: grid; grid-template-rows: auto auto 1fr auto; gap: 2.6cqw; padding: 4.5cqw; border-radius: 4cqw; background: var(--color-sheet);
  box-shadow: inset 0 0 0 1px var(--color-line), 0 50px 90px -60px oklch(20.5% 0 0 / 0.45); transform: translateY(2cqw) scale(0.98); font-size: 2.5cqw; }
.por__barra { display: flex; align-items: center; gap: 1.8cqw; }
.por__barra b { font-size: 3.2cqw; font-weight: 640; }
.por__iso { display: grid; grid-template-columns: repeat(2, 2cqw); gap: 0.45cqw; }
.por__iso i { width: 2cqw; height: 2cqw; border-radius: 0.8cqw; background: var(--color-ink); }
.por__sitio { margin-left: auto; color: var(--color-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.por__estado { padding: 0.5cqw 1.6cqw; border-radius: 1.4cqw; background: var(--verde-fondo, oklch(94% 0.04 155)); color: var(--color-ok); font-weight: 600; white-space: nowrap; }
.por__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8cqw; }
.por__kpis div { display: grid; gap: 0.4cqw; padding: 2.2cqw; border-radius: 2.4cqw; background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-line); }
.por__kpis span { color: var(--color-ink-soft); font-size: 2.2cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.por__kpis b { font-size: 5cqw; line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; font-variant-numeric: tabular-nums; }
.por__kpis em { font-style: normal; font-size: 2.1cqw; font-weight: 600; color: var(--color-ok); }
.por__grafica { display: grid; grid-template-rows: auto 1fr; gap: 1.6cqw; padding: 2.2cqw; border-radius: 2.4cqw; box-shadow: inset 0 0 0 1px var(--color-line); min-height: 0; }
.por__grafica p, .por__leads > p, .por__reporte p { font-weight: 600; font-size: 2.4cqw; }
.por__barras { display: flex; align-items: flex-end; gap: 0.9cqw; min-height: 10cqw; }
.por__barras i { flex: 1; height: var(--h); border-radius: 0.8cqw 0.8cqw 0.3cqw 0.3cqw; background: var(--color-paper-3); transform-origin: 50% 100%; transform: scaleY(0.15);
  transition: transform 0.7s var(--ease-out); transition-delay: calc(var(--i) * 40ms + 300ms); }
.por__barras i:last-child { background: var(--color-ink); }
.escena[data-paso="6"] .por__barras i { transform: none; }
.por__fila { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.8cqw; }
.por__leads { display: grid; gap: 1.2cqw; padding: 2.2cqw; border-radius: 2.4cqw; box-shadow: inset 0 0 0 1px var(--color-line); min-width: 0; }
.por__leads ul { display: grid; gap: 1.2cqw; margin: 0; padding: 0; list-style: none; }
.por__leads li { display: flex; align-items: center; gap: 1.4cqw; min-width: 0; }
.por__leads li div { display: grid; min-width: 0; line-height: 1.25; }
.por__leads li b { font-weight: 600; font-size: 2.3cqw; }
.por__leads li div span { color: var(--color-ink-soft); font-size: 2.1cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.por__leads li em { margin-left: auto; font-style: normal; font-size: 2cqw; color: var(--color-ink-faint); white-space: nowrap; }
.ov-portal .por__ico { flex: none; width: 5.2cqw; height: 5.2cqw; border-radius: 1.6cqw; }
.ov-portal .por__ico .kit { --k: 0.52; }
.por__reporte { display: grid; align-content: start; gap: 0.6cqw; padding: 2.2cqw; border-radius: 2.4cqw; background: var(--color-ink); color: var(--color-on-ink); }
.por__reporte p { color: var(--color-on-ink-soft); }
.por__reporte b { font-size: 4.4cqw; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
.por__reporte span { font-size: 2.1cqw; color: var(--color-on-ink-soft); line-height: 1.3; }
.por__descarga { justify-self: start; margin-top: 1cqw; padding: 0.8cqw 2cqw; border-radius: 1.4cqw; background: var(--color-on-ink); color: var(--color-ink) !important; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .por__barras i { transform: none; transition: none; } }

.escena__pie { display: flex; gap: var(--space-sm); align-items: baseline; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-soft); }
.escena__ejemplo { color: var(--color-ink-faint); }

/* ── Encabezados de sección ── */
.seccion { max-width: var(--max); margin: 0 auto; padding: var(--space-5xl) var(--gutter); }
.cabeza { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; margin-bottom: var(--space-3xl); }
.cabeza__titulo { font-size: var(--text-h2); line-height: 1.02; letter-spacing: -0.04em; font-weight: 580; font-variation-settings: "opsz" 64; }
.cabeza__texto { font-size: var(--text-lede); line-height: 1.5; color: var(--color-ink-soft); max-width: 40ch; }
.cabeza__texto a { color: var(--color-ink); text-underline-offset: 3px; }

/* ── 3a · Tu sitio, en tus manos: panel con el sitio, kits flotando y dos halos de color ── */
.edita { position: relative; display: grid; justify-items: center; gap: var(--space-2xl); padding: var(--space-5xl) var(--gutter); overflow: clip; text-align: center; }
.edita__escena { position: relative; width: min(100%, 560px); aspect-ratio: 1.45; }
.edita__panel { position: absolute; left: 50%; top: 0; translate: -50% 0; width: 62%; height: 100%; display: flex; flex-direction: column; gap: 4%; padding: 5%;
  border-radius: 40px; corner-shape: superellipse(1.4); background: linear-gradient(180deg, var(--color-sheet), var(--color-paper-2));
  box-shadow: inset 0 0 0 1px var(--color-line), 0 40px 80px -48px oklch(20.5% 0 0 / 0.45); container-type: inline-size; text-align: left;
  opacity: 0; transform: translateY(16px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-escena) var(--ease-out); }
.edita__sitio { flex: 1; display: flex; flex-direction: column; gap: 3cqw; padding: 6cqw; box-shadow: inset 0 0 0 1px var(--color-line); border-radius: 22px; corner-shape: superellipse(1.4); background: var(--cliente-fondo); color: var(--cliente-tinta); }
.edita__marca { font-size: 4.4cqw; font-weight: 700; }
.edita__titulo { font-size: 8cqw; line-height: 1; font-weight: 640; letter-spacing: -0.03em; color: var(--cliente-tinta); }
.edita__img { flex: 1; min-height: 12cqw; border-radius: 3cqw; background: linear-gradient(to top right, transparent calc(50% - 0.6px), var(--cliente-trazo) 50%, transparent calc(50% + 0.6px)), linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--cliente-trazo) 50%, transparent calc(50% + 0.6px)), var(--cliente-sol); }
.edita__menu { display: grid; gap: 2.4cqw; }
.edita__menu p { display: flex; justify-content: space-between; padding-bottom: 2cqw; border-bottom: 1px solid var(--cliente-suave); font-size: 4.2cqw; font-variant-numeric: tabular-nums; }
.edita__precio { display: inline-grid; justify-items: end; }
.edita__precio s, .edita__precio b { grid-area: 1 / 1; text-decoration: none; font-weight: inherit; transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.edita__precio b { opacity: 0; transform: translateY(40%); }
.edita__escena.aplicado .edita__precio s { opacity: 0; transform: translateY(-40%); }
.edita__escena.aplicado .edita__precio b { opacity: 1; transform: none; }
.edita__escena.aplicado .edita__menu p:first-child { background: linear-gradient(transparent 60%, var(--cliente-suave) 60%); }
.edita__barra { display: flex; align-items: center; gap: 2cqw; padding: 2cqw; border-radius: 16px; corner-shape: superellipse(1.4); background: var(--color-sheet); box-shadow: 0 0 0 1px var(--color-line); }
.edita__pide { flex: 1; padding-left: 2cqw; font-size: 4.2cqw; color: var(--color-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edita__aplicar { display: inline-grid; padding: 2cqw 4cqw; border-radius: 10px; corner-shape: superellipse(1.4); background: var(--color-ink); color: var(--color-on-ink); font-size: 4cqw; font-weight: 600; }
.edita__aplicar span { grid-area: 1 / 1; transition: opacity var(--dur-short) var(--ease-out); }
.edita__aplicar span + span { opacity: 0; }
.edita__escena.aplicado .edita__aplicar span:first-child { opacity: 0; }
.edita__escena.aplicado .edita__aplicar span + span { opacity: 1; }
/* Los kits flotan alrededor del panel, cada uno con su color */
.edita__kit { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: clamp(64px, 15%, 92px); aspect-ratio: 1; border-radius: 28%; corner-shape: superellipse(1.4);
  background: var(--kc, var(--color-ink)); color: var(--color-sobre-kit); box-shadow: 0 0 0 4px var(--color-sheet), 0 24px 40px -22px oklch(20.5% 0 0 / 0.5);
  opacity: 0; transform: scale(0.7) rotate(0deg); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-escena) var(--ease-out); transition-delay: calc(var(--i) * 90ms + 200ms); }
.edita__kit .kit { --k: 1.55; --kit-hueco: var(--kc, var(--color-ink)); }
.edita__kit--chico { width: clamp(48px, 11%, 68px); }
.edita__kit--chico .kit { --k: 1.15; }
.edita__escena.visible .edita__panel { opacity: 1; transform: none; }
.edita__escena.visible .edita__kit { opacity: 1; transform: rotate(var(--g)); }
.edita__texto { display: grid; justify-items: center; gap: var(--space-md); max-width: 640px; }
.edita__h { font-size: var(--text-h2); line-height: 1.02; letter-spacing: -0.04em; font-weight: 580; font-variation-settings: "opsz" 64; }
.edita__sub { font-size: var(--text-lede); line-height: 1.5; color: var(--color-ink-soft); max-width: 52ch; }
.edita__tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); width: min(100%, 920px); padding: var(--space-xs); border-radius: 30px; corner-shape: superellipse(1.4); background: var(--color-paper-3); }
.edita__tarjetas li { display: grid; justify-items: center; gap: var(--space-md); padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-lg); corner-shape: superellipse(1.4); background: var(--color-sheet); box-shadow: inset 0 0 0 1px var(--color-line); }
.edita__tarjetas p { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-soft); max-width: 30ch; }
.edita__tarjetas b { display: block; margin-bottom: 2px; font-size: var(--text-body); font-weight: 600; color: var(--color-ink); }
.edita__icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; corner-shape: superellipse(1.4); background: var(--color-ink); color: var(--color-on-ink); }
.edita__icono svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 767.98px) {
  .edita { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); gap: var(--space-xl); }
  .edita__escena { aspect-ratio: 1.05; }
  .edita__panel { width: 66%; border-radius: 28px; }
  .edita__kit { width: 52px; } .edita__kit .kit { --k: 1.15; }
  .edita__kit--chico { width: 42px; } .edita__kit--chico .kit { --k: 0.9; }
  .edita__kit:has([data-kit="menu"]) { left: 0; }
  .edita__kit:has([data-kit="pedidos"]) { left: 84%; }
  .edita__kit:has([data-kit="asistente"]) { left: 84%; top: 52%; }
  .edita__kit:has([data-kit="agenda"]) { left: 2%; }
  .edita__tarjetas { grid-template-columns: minmax(0, 1fr); border-radius: 26px; }
  .edita__tarjetas li { padding: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) { .edita__panel, .edita__kit { transition: none; } }

/* ── 3c · Ideas por giro: tarjeta principal, pila detrás, miniaturas flotando y pestañas (inspirado en Kaviyan) ── */
.galeria__escena { position: relative; height: 640px; display: grid; place-items: center; }
.galeria__principal { position: relative; z-index: 2; width: min(460px, 100%); display: grid; gap: var(--space-sm); padding: 10px 10px var(--space-lg); border-radius: 26px; corner-shape: superellipse(1.4);
  background: var(--color-sheet); box-shadow: inset 0 0 0 1px var(--color-line), 0 40px 80px -40px oklch(20.5% 0 0 / 0.45); }
.galeria__foto { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 18px; corner-shape: superellipse(1.4); overflow: hidden; background: var(--color-paper-3); }
.galeria__foto img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.galeria__chip { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--space-sm); border-radius: 10px; corner-shape: superellipse(1.4);
  background: var(--color-vidrio); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: var(--text-xs); font-weight: 600; }
.galeria__chip::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--color-ink); }
.galeria__titulo, .galeria__desc, .galeria__pie { padding: 0 var(--space-sm); }
.galeria__titulo { margin-top: var(--space-xs); font-size: 1.75rem; line-height: 1.05; letter-spacing: -0.03em; font-weight: 580; }
.galeria__desc { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-soft); }
.galeria__pie { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs); }
.galeria__kits { display: flex; gap: 6px; }
.galeria__kits .galeria__kit { width: 34px; height: 34px; border-radius: 10px; corner-shape: superellipse(1.4); }
.galeria__kit .kit { --k: 0.68; }
.galeria__ir { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; font-size: var(--text-sm); font-weight: 560; text-decoration: none; white-space: nowrap; }
.galeria__ir svg { width: 14px; height: 14px; transition: transform var(--dur-short) var(--ease-out); }
.galeria__ir:hover svg { transform: translateX(3px); }
/* La pila: tres tarjetas que asoman detrás de la principal */
.galeria__pila { position: absolute; z-index: 1; left: 50%; top: calc(50% - 250px); translate: -50% 0; width: min(460px, 100%); height: 60px; }
.galeria__pila i { position: absolute; left: 50%; translate: -50% 0; height: 60px; border-radius: 16px 16px 0 0; background: var(--color-paper-3) center top / cover no-repeat; box-shadow: 0 0 0 6px var(--color-sheet), 0 0 0 7px var(--color-line);
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.galeria__pila i:nth-child(1) { top: -6px; width: 72%; opacity: 0.7; }
.galeria__pila i:nth-child(2) { top: 14px; width: 82%; opacity: 0.85; }
.galeria__pila i:nth-child(3) { top: 34px; width: 92%; }
/* Las miniaturas flotando alrededor, con su nombre */
.galeria__flota { position: absolute; z-index: 1; margin: 0; padding: 6px; border-radius: 18px; corner-shape: superellipse(1.4); background: var(--color-sheet); box-shadow: inset 0 0 0 1px var(--color-line), 0 30px 60px -36px oklch(20.5% 0 0 / 0.5);
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-escena) var(--ease-out); }
.galeria__flota img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: 12px; }
.galeria__flota--movil img { aspect-ratio: 390 / 844; border-radius: 16px; }
.galeria__flota--movil { padding: 5px; border-radius: 22px; }
.galeria__flota figcaption { position: absolute; right: -8px; top: 14px; padding: 4px 10px; border-radius: 9px; corner-shape: superellipse(1.4); background: var(--color-sheet); box-shadow: 0 0 0 1px var(--color-line), 0 8px 16px -10px oklch(20.5% 0 0 / 0.4); font-size: var(--text-xs); white-space: nowrap; }
.galeria__flota--1 { left: 9%; top: 2%; width: 128px; transform: rotate(-5deg); }
.galeria__flota--2 { left: 1%; bottom: 8%; width: 250px; transform: rotate(3deg); }
.galeria__flota--3 { right: 1%; top: 8%; width: 250px; transform: rotate(4deg); }
.galeria__flota--4 { right: 10%; bottom: 0; width: 128px; transform: rotate(-4deg); }
/* Cambio de categoría: todo baja un poco, se desvanece y regresa con la nueva */
.galeria__escena.cambia .galeria__principal > *, .galeria__escena.cambia .galeria__flota, .galeria__escena.cambia .galeria__pila i { opacity: 0; }
.galeria__principal > * { transition: opacity 260ms var(--ease-out); }
.galeria__escena.cambia .galeria__flota { transform: translateY(14px) rotate(0deg) scale(0.96); }
.galeria__tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; width: fit-content; max-width: 100%; margin: var(--space-lg) auto 0; padding: 6px; border-radius: 18px; corner-shape: superellipse(1.4); background: var(--color-paper-3); }
.galeria__tab { height: 40px; padding: 0 var(--space-md); border: 0; border-radius: 12px; corner-shape: superellipse(1.4); background: var(--color-sheet); font-size: var(--text-sm); font-weight: 520; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.galeria__tab:hover { background: var(--color-paper-2); }
.galeria__tab[aria-selected="true"] { background: var(--color-ink); color: var(--color-on-ink); }
.galeria__nota { margin-top: var(--space-md); text-align: center; font-size: var(--text-xs); color: var(--color-ink-faint); }
@media (max-width: 1023.98px) {
  .galeria__flota--1, .galeria__flota--4 { display: none; }
  .galeria__flota--2 { left: 0; width: 170px; } .galeria__flota--3 { right: 0; width: 170px; }
}
@media (max-width: 767.98px) {
  .galeria__escena { height: auto; padding-top: 52px; }
  .galeria__flota { display: none; }
  .galeria__pila { top: 0; }
  .galeria__tabs { flex-wrap: nowrap; justify-content: flex-start; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .galeria__tabs::-webkit-scrollbar { display: none; }
  .galeria__tab { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .galeria__flota, .galeria__pila i, .galeria__principal > * { transition: none; } }

/* ── 4 · Kits por giro ── */
.giros__elige { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0 0 var(--space-xl); padding: 0; border: 0; }
.giros__elige label { position: relative; }
.giros__elige input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.giros__elige span { display: inline-flex; align-items: center; height: 36px; padding: 0 var(--space-sm); border-radius: var(--radius-control); box-shadow: inset 0 0 0 1px var(--color-line-strong); font-size: var(--text-sm); font-weight: 520; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.giros__elige input:hover + span { background: var(--color-paper-3); }
.giros__elige input:checked + span { background: var(--color-ink); color: var(--color-on-ink); box-shadow: none; }
.giros__elige input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.giros__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 212px), 1fr)); gap: var(--space-sm); }
.ficha { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-md); min-height: 196px; padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-sheet); box-shadow: inset 0 0 0 1px var(--color-line);
  transition: opacity var(--dur-long) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), background-color var(--dur-long) var(--ease-out); }
.ficha__icono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--kc, var(--color-ink)); color: var(--color-sobre-kit); transition: background-color var(--dur-long) var(--ease-out), color var(--dur-long) var(--ease-out); }
.ficha__icono .kit { --k: 1.05; --kit-hueco: var(--kc, var(--color-ink)); }
.ficha__nombre { font-weight: 600; letter-spacing: -0.01em; }
.ficha__desc { font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink-soft); margin-top: var(--space-2xs); }
.ficha__precio { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-soft); }
.ficha__marca { position: absolute; right: var(--space-md); top: var(--space-md); font-size: var(--text-xs); font-weight: 560; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.ficha.sugerida { box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.ficha.sugerida .ficha__marca { opacity: 1; }
.giros__rejilla.filtrada .ficha:not(.sugerida):not(.ficha--medida) { opacity: 0.5; }
.ficha--medida { background: var(--color-ink); color: var(--color-on-ink); box-shadow: none; }
.ficha--medida .ficha__desc, .ficha--medida .ficha__precio { color: var(--color-on-ink-soft); }
.ficha--medida .ficha__icono { background: var(--color-on-ink); color: var(--color-ink); }
.ficha--medida .ficha__icono .kit { --kit-hueco: var(--color-on-ink); }
.giros__pie { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); flex-wrap: wrap; }
.giros__resumen { color: var(--color-ink-soft); max-width: 60ch; }
.giros__resumen b { color: var(--color-ink); font-weight: 600; }

/* ── 7 · Preguntas ── */
.preguntas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.preguntas__lado { display: grid; gap: var(--space-md); position: sticky; top: calc(var(--nav-h) + var(--space-xl)); }
.preguntas__lista { border-top: var(--rule); }
.preguntas details { border-bottom: var(--rule); }
.preguntas summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-lg) 0; cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 560; letter-spacing: -0.01em; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--color-ink); transition: transform var(--dur-short) var(--ease-out), border-radius var(--dur-short) var(--ease-out); }
.preguntas details[open] summary::after { transform: rotate(45deg) scale(0.85); border-radius: 2px; }
.preguntas summary:hover { color: var(--color-ink-2); }
.preguntas details p { padding: 0 0 var(--space-lg); max-width: 58ch; color: var(--color-ink-soft); }

/* ── 8 · Cierre ── */
.cierre { display: grid; justify-items: center; gap: var(--space-lg); padding: var(--space-5xl) var(--gutter); text-align: center; }
.cierre__rejilla { display: grid; grid-template-columns: repeat(2, auto); gap: 10px; margin-bottom: var(--space-lg); }
.cierre__pieza { display: grid; place-items: center; width: clamp(72px, 9vw, 112px); aspect-ratio: 1; border-radius: 40%; background: var(--kc, var(--color-ink)); color: var(--color-sobre-kit); }
.cierre__pieza .kit { --k: 1.6; --kit-hueco: var(--kc, var(--color-ink)); }
.cierre__titulo { font-size: var(--text-display); line-height: 0.98; letter-spacing: -0.045em; font-weight: 580; font-variation-settings: "opsz" 72; }
.cierre__texto { font-size: var(--text-lede); color: var(--color-ink-soft); }
.cierre .arranque { max-width: 520px; }

/* ── Pie ── */
.pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); max-width: var(--max); margin: 0 auto; padding: var(--space-xl) var(--gutter) var(--space-2xl); border-top: var(--rule); font-size: var(--text-sm); color: var(--color-ink-soft); }
.pie__logo { display: flex; align-items: center; min-height: 44px; color: var(--color-ink); }
.pie__logo svg { height: 18px; width: auto; }
.pie__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-left: auto; }
.pie__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; white-space: nowrap; }
.pie__links a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 4px; }

/* ── Tablet ── */
@media (max-width: 1023.98px) {
  .hero__texto, .cabeza { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
  .preguntas { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .preguntas__lado { position: static; }
  .relato { column-gap: var(--space-xl); }
}

/* ── Celular ── */
@media (max-width: 767.98px) {
  :root { --nav-h: 56px; }
  .nav__palabra svg { height: 18px; }
  .nav__palabra { margin-left: calc(18px / 22 * 29); }
  .iso svg { width: 18px; height: 18px; }
  .nav { grid-template-columns: minmax(0, 1fr) auto; }
  .nav__pildora, .nav__entrar, .nav__empezar { display: none; }
  .nav__centro { display: contents; }
  .nav__menu-btn { display: grid; }
  body:has(.panel.abierto) .nav__menu-btn { opacity: 0; pointer-events: none; }
  /* El panel nace del botón de menú, en la esquina derecha */
  .panel { position: fixed; top: calc(var(--nav-h) / 2 - 28px); right: calc(var(--gutter) - 6px); left: auto; translate: none; width: min(360px, 100vw - 2 * var(--gutter) + 12px);
    clip-path: inset(6px 6px calc(100% - 50px) calc(100% - 50px) round 14px); }
  .panel.abierto { clip-path: inset(0 0 0 0 round 24px); }
  /* Empezar fijo abajo, grande */
  .cta-fija { display: flex; position: fixed; z-index: 9; left: var(--gutter); right: var(--gutter); bottom: calc(12px + env(safe-area-inset-bottom)); height: 56px; font-size: 1.0625rem;
    box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.14), 0 18px 36px -16px oklch(20.5% 0 0 / 0.55);
    opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-out); }
  .cta-fija.visible { opacity: 1; transform: none; pointer-events: auto; }
  body:has(.panel.abierto) .cta-fija { opacity: 0; pointer-events: none; }
  .pie { padding-bottom: calc(var(--space-2xl) + 72px); }
  .hero { padding-top: calc(var(--nav-h) + var(--space-2xl)); }
  .hero__elenco { grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; row-gap: var(--space-md); margin-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
  .hero__ancla { --tam: clamp(80px, 24vw, 120px); }
  /* Celular: el campo con su propio borde y el botón abajo, a lo ancho (sin recuadro común) */
  .arranque__fila { flex-direction: column; gap: var(--space-xs); padding: 0; background: transparent; box-shadow: none; }
  .arranque__fila:focus-within { box-shadow: none; }
  .arranque__campo { flex: none; height: 48px; border-radius: var(--radius-control); corner-shape: superellipse(1.4); background: var(--color-sheet); box-shadow: inset 0 0 0 1px var(--color-line-strong); transition: box-shadow var(--dur-short) var(--ease-out); }
  .arranque__campo:focus { box-shadow: inset 0 0 0 2px var(--color-ink); }
  .arranque[data-error] .arranque__campo { box-shadow: var(--anillo-error); }
  .arranque__fila .boton { width: 100%; height: 48px; }
  .arranque__nota, .arranque__ayuda { padding-left: 0; }

  .viaje { height: 300svh; }
  .viaje__pin { padding-top: calc(var(--nav-h) + var(--space-lg)); padding-bottom: var(--space-lg); }
  .dock__panel { padding: var(--space-md); }
  .dock__piezas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); }
  .dock__ancla { --tam: clamp(48px, 15vw, 64px); }
  .dock__pieza { padding: var(--space-xs) 0; }
  .dock__cabeza { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: var(--space-sm); }
  .dock__ayuda { text-align: left; font-size: var(--text-xs); }
  .dock__banda { flex-direction: column; align-items: flex-start; gap: 0; padding-top: calc(18px + var(--space-sm)); }

  .relato { grid-template-columns: minmax(0, 1fr); }
  .relato__escena { grid-column: 1; grid-row: 1 / span 7; z-index: 2; pointer-events: none; }
  .relato__pin { top: 0; height: 62svh; padding: calc(var(--nav-h) + 20px) 0 var(--space-xs); justify-content: flex-start;
    background: var(--color-paper); }
  .escena { width: min(100%, calc((62svh - var(--nav-h) - 72px) * 0.8)); }
  .capitulo { grid-column: 1; min-height: 100svh; justify-content: flex-end; padding: 62svh 0 var(--space-2xl); }
  .capitulo--intro { padding-top: 62svh; }
  .ov-kits { left: -4cqw; }

  .seccion { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }
  .giros__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha { min-height: 0; padding: var(--space-md); }
  .giros__pie .boton { width: 100%; }

  .pie__links { margin-left: 0; }
}
@media (max-width: 374.98px) {
  .giros__rejilla { grid-template-columns: minmax(0, 1fr); }
  .nav .boton--chico { padding: 0 var(--space-sm); }
}

/* ── Cuadro de kit: degradado de malla calculado de su color (receta de Puntualiza: luz arriba, sombra abajo, grano encima).
   Sin soporte de color relativo, queda el color sólido. ── */
:is(.actor, .ficha__icono, .ov-kits__icono, .cierre__pieza, .edita__kit) { isolation: isolate; overflow: hidden; }
:is(.ficha__icono, .ov-kits__icono, .cierre__pieza) { position: relative; }
@supports (color: oklch(from red l c h)) {
  :is(.actor, .ficha__icono, .ov-kits__icono, .cierre__pieza, .edita__kit) {
    background:
      radial-gradient(75% 65% at 18% 8%, oklch(from var(--kc, var(--color-ink)) calc(l + 0.17) calc(c * 0.7) calc(h + 24)) 0%, transparent 72%),
      radial-gradient(70% 70% at 92% 104%, oklch(from var(--kc, var(--color-ink)) calc(l - 0.15) calc(c * 1.05) calc(h - 22)) 0%, transparent 70%),
      radial-gradient(60% 60% at 100% 0%, oklch(from var(--kc, var(--color-ink)) calc(l + 0.06) c calc(h - 10)) 0%, transparent 70%),
      var(--kc, var(--color-ink));
  }
  .ficha--medida .ficha__icono { background: var(--color-on-ink); }
}
:is(.actor, .ficha__icono, .ov-kits__icono, .cierre__pieza, .edita__kit)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0.22; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
:is(.actor, .ficha__icono, .ov-kits__icono, .cierre__pieza, .edita__kit) .kit { z-index: 1; filter: drop-shadow(0 1px 1px oklch(20% 0 0 / 0.18)); }
.ficha--medida .ficha__icono::after { display: none; }

/* ── Etiquetas chicas: pastilla gris con la esquina de Stackgrid (elegida por el supervisor, opciones-etiquetas.html, opción C) ── */
:is(.capitulo__num, .panel__grupo, .ficha__precio, .escena__pie > span) {
  display: inline-flex; align-items: center; width: fit-content; max-width: 100%; min-height: 26px; padding: 3px 10px;
  border-radius: 8px; corner-shape: superellipse(1.4); background: var(--color-paper-3);
  font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.35; font-weight: 600; letter-spacing: 0; color: var(--color-ink); }
.escena__pie { align-items: center; gap: var(--space-xs); flex-wrap: wrap; justify-content: center; }
.escena__pie .escena__ejemplo { background: var(--color-paper-2); color: var(--color-ink-soft); box-shadow: inset 0 0 0 1px var(--color-line); }
.capitulo__num, .ficha__precio { align-self: flex-start; }
.ficha--medida .ficha__precio { background: var(--color-ink-2); color: var(--color-on-ink); }

/* ── Movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 150ms !important; animation-duration: 150ms !important; animation-iteration-count: 1 !important; }
  .cursor { display: none; }
}