/* lumaq.es · hoja de estilos de la home (site-v2, v0.4)
   Un solo lenguaje: luz y tipografía. Fondo de día (--dia-50), la luz como único material
   (halos con origen, sombras largas con offset), el producto como producto real.
   Solo transform/opacity en lo continuo; clip-path para cortes. Sin terceros. */

/* ---------- Fuentes autoalojadas (OFL) ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/hanken-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Narrow"), local("Arial");
  size-adjust: 118%; ascent-override: 88%; descent-override: 21%; line-gap-override: 0%;
}
@font-face {
  font-family: "Hanken Fallback";
  src: local("Arial");
  size-adjust: 103%; ascent-override: 100%; descent-override: 30%; line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  --noche-900: #0F131B; --noche-800: #151B27; --noche-700: #1C2434; --noche-600: #27314A; --noche-linea: #2C3750;
  --dia-50: #F5F6F8; --dia-100: #FBFBFC; --dia-200: #EAEDF2; --dia-linea: #D6DBE3;
  --tinta-900: #0E1014; --tinta-600: #4A5468; --tinta-500: #5F6A82;
  --papel: #F7F4EE; --papel-600: #B4BCCB; --papel-500: #8E98AC;

  --luz-ambar: #F4B740; --luz-ember: #FB9A42; --luz-coral: #FF7A45; --luz-tinta: #9E3F0E; --luz-ambar-suave: #FFD98A;
  --luz-grad: linear-gradient(118deg, #F4B740 0%, #FB9A42 55%, #FF7A45 100%);
  --luz-halo: radial-gradient(closest-side, rgba(255,217,138,.62), rgba(244,183,64,.2) 45%, transparent 100%);
  --boton-grad: linear-gradient(118deg, var(--luz-ambar) 0%, var(--luz-ember) 100%);

  --ok-dia: #1F6E4D; --ok-noche: #6FD0A0; --err-dia: #B3261E; --err-noche: #FF9A8E;

  --f-display: "Archivo", "Archivo Fallback", "Arial Narrow", Arial, sans-serif;
  --f-text: "Hanken Grotesk", "Hanken Fallback", "Segoe UI", Roboto, Arial, sans-serif;

  /* escala fluida de 6 pasos */
  --t-1: clamp(2.75rem, 1.1rem + 5.1vw, 5.5rem);     /* h1: 44 · 66 · 88 */
  --t-2: clamp(1.875rem, 1rem + 2.5vw, 3.25rem);     /* h2: 30 · 39 · 52 */
  --t-3: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);   /* h3: 22 · 25 · 28 */
  --t-4: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);   /* lead: 18 · 19 · 21 */
  --t-5: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);    /* cuerpo: 16 · 17 · 17 */
  --t-6: 0.9375rem;                                   /* pequeño: 15 */
  --t-label: 0.875rem;                                /* etiquetas: 14 */
  --ls-1: -0.03em; --ls-2: -0.022em; --ls-3: -0.012em;
  --lh-1: 0.96; --lh-2: 1.04; --lh-3: 1.18; --lh-4: 1.42; --lh-5: 1.6;
  --medida: 62ch; --medida-lead: 46ch; --medida-h2: 20ch;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --seccion: clamp(56px, 7vw, 96px);
  --margen: clamp(20px, 5vw, 72px);
  --canal: 24px;
  --contenedor: 1320px;

  --r-control: 10px; --r-tarjeta: 14px; --r-escena: 20px; --r-etiqueta: 999px;

  /* la luz viene de arriba a la derecha: las sombras caen abajo a la izquierda, largas y suaves */
  --sombra-larga: -18px 36px 72px -28px rgba(21,27,39,.30), 0 1px 2px rgba(21,27,39,.06);
  --sombra-corta: -6px 14px 28px -14px rgba(21,27,39,.22), 0 1px 1px rgba(21,27,39,.05);
  --borde-luz: inset 1px 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(21,27,39,.07);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --d-1: 120ms; --d-2: 200ms; --d-3: 320ms; --d-4: 600ms;

  --cabecera: 64px; --rail: 56px; --luz-p: 0;
}
@media (max-width: 767px) {
  :root { --t-6: 1rem; --t-label: 0.875rem; --canal: 16px; }
}

[data-suelo="noche"] {
  --bg: var(--noche-800); --superficie: var(--noche-700); --superficie-2: var(--noche-600); --linea: var(--noche-linea);
  --ink: var(--papel); --ink-2: var(--papel-600); --ink-3: var(--papel-500);
  --acento: var(--luz-ambar); --acento-texto: var(--luz-ambar); --sobre-acento: var(--tinta-900);
  --foco: var(--luz-ember); --ok: var(--ok-noche); --err: var(--err-noche);
  --lh-cuerpo: 1.65; --ls-cuerpo: 0.005em;
  background: var(--bg); color: var(--ink);
}
[data-suelo="dia"] {
  --bg: var(--dia-50); --superficie: var(--dia-100); --superficie-2: var(--dia-200); --linea: var(--dia-linea);
  --ink: var(--tinta-900); --ink-2: var(--tinta-600); --ink-3: var(--tinta-500);
  --acento: var(--luz-ambar); --acento-texto: var(--luz-tinta); --sobre-acento: var(--tinta-900);
  --foco: var(--luz-tinta); --ok: var(--ok-dia); --err: var(--err-dia);
  --lh-cuerpo: var(--lh-5); --ls-cuerpo: 0;
  background: var(--bg); color: var(--ink);
}

/* ---------- Superficies del navegador ---------- */
::selection { background: rgba(244,183,64,.4); color: inherit; }
html { caret-color: var(--luz-ember); scrollbar-color: var(--luz-ember) transparent; accent-color: var(--luz-tinta); }
:focus-visible { outline: 3px solid var(--foco, var(--luz-tinta)); outline-offset: 3px; border-radius: var(--r-control); }
a { text-underline-offset: .18em; text-decoration-thickness: .08em; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cabecera) + 16px); }
body {
  margin: 0; font-family: var(--f-text); font-size: var(--t-5); line-height: var(--lh-5);
  background: var(--dia-50); color: var(--tinta-900); -webkit-font-smoothing: antialiased; overflow-x: clip;
  --bg: var(--dia-50); --superficie: var(--dia-100); --superficie-2: var(--dia-200); --linea: var(--dia-linea);
  --ink: var(--tinta-900); --ink-2: var(--tinta-600); --ink-3: var(--tinta-500); --acento-texto: var(--luz-tinta); --foco: var(--luz-tinta); --ok: var(--ok-dia); --err: var(--err-dia);
}
body.menu-abierto { overflow: hidden; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-stretch: 118%; font-weight: 650; text-wrap: balance; }
h1 { font-size: var(--t-1); line-height: var(--lh-1); letter-spacing: var(--ls-1); }
h2 { font-size: var(--t-2); line-height: var(--lh-2); letter-spacing: var(--ls-2); max-width: var(--medida-h2); }
h3 { font-size: var(--t-3); line-height: var(--lh-3); letter-spacing: var(--ls-3); }
h4 { font-size: var(--t-5); font-family: var(--f-text); font-stretch: 100%; font-weight: 600; }
p, li { text-wrap: pretty; }
p { margin: 0; line-height: var(--lh-cuerpo, var(--lh-5)); letter-spacing: var(--ls-cuerpo, 0); }
p + p { margin-top: var(--s-4); }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
mark.marcador { background: none; color: var(--acento-texto); font-weight: 600; text-decoration: underline dotted; text-underline-offset: .2em; padding: 0; }
.oculto-visual { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.lead { font-size: var(--t-4); line-height: var(--lh-4); max-width: var(--medida-lead); color: var(--ink-2); }
.peq { font-size: var(--t-6); color: var(--ink-2); }

/* ---------- Contenedor y retícula ---------- */
.cont { width: 100%; max-width: var(--contenedor); margin-inline: auto; padding-inline: var(--margen); }
.ret { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--canal); }
@media (min-width: 768px) { .ret { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ret { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.ret > * { grid-column: 1 / -1; min-width: 0; }
/* un solo padding por frontera: cada capítulo abre con --seccion; el siguiente no cierra */
.capitulo { padding-block: var(--seccion) 0; position: relative; }
h2 + .lead { margin-top: var(--s-5); }

/* ---------- Controles ---------- */
/* BOTONES (ciclo 11). Un solo sistema en toda la web. Criterio: emil-design-eng (respuesta al pulsar 100-160 ms,
   curva ease-out fuerte, sin transition: all, hover solo con puntero fino) + impeccable craft-floor (sombras con
   desplazamiento y desenfoque, nada de halos de color sin offset) + design-taste-frontend (contraste AA, una etiqueta
   por intencion, la etiqueta cabe en una linea). Primario = tinta con la luz de la marca en un chip; secundario = contorno. */
:root { --ease-boton: cubic-bezier(.23, 1, .32, 1); --flecha-boton: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E1014' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E"); }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 48px; padding: 0 var(--s-5); border-radius: var(--r-control); border: 1px solid transparent;
  font-weight: 600; font-size: var(--t-5); line-height: 1.2; letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--ease-boton), box-shadow 200ms var(--ease-boton), border-color 200ms var(--ease-boton), background-color 200ms var(--ease-boton), color 200ms var(--ease-boton);
}
.boton:active { transform: scale(.97); }
.boton--primario {
  background: var(--tinta-900); color: #FBFBFC; padding-right: var(--s-3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 22px -12px rgba(14,16,20,.55), 0 2px 4px rgba(14,16,20,.12);
}
.boton--primario::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--flecha-boton) center / 14px no-repeat, var(--luz-ambar);
  transition: transform 200ms var(--ease-boton);
}
.boton--primario:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 10px -6px rgba(14,16,20,.55); }
@media (hover: hover) and (pointer: fine) {
  .boton--primario:hover { background: #1B2030; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 26px -12px rgba(14,16,20,.6), 0 2px 4px rgba(14,16,20,.14); }
  .boton--primario:hover::after { transform: translateX(2px); }
}
/* sin chip en los botones compactos (cabecera, mensajes dentro de un telefono) y en los de ancho completo se queda a la derecha */
.boton--primario.cabecera__cta, .boton--primario.boton--peq { padding-right: var(--s-4); }
.boton--primario.cabecera__cta::after, .boton--primario.boton--peq::after { display: none; }
.boton--secundario { background: var(--superficie, var(--dia-100)); color: var(--ink); border-color: var(--linea); box-shadow: var(--sombra-corta); }
@media (hover: hover) and (pointer: fine) { .boton--secundario:hover { border-color: var(--tinta-900); box-shadow: -6px 16px 30px -14px rgba(21,27,39,.3), 0 1px 1px rgba(21,27,39,.06); } }
.boton--peq { min-height: 40px; padding-inline: var(--s-4); font-size: var(--t-6); }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.boton--ancho { width: 100%; max-width: 100%; white-space: normal; text-align: center; }
.boton .ico { width: 16px; height: 16px; }
.enlace { color: var(--acento-texto); text-decoration: underline; font-weight: 600; display: inline-block; padding-block: 12px; line-height: 1.4; }
@media (hover: hover) and (pointer: fine) { .enlace:hover { text-decoration-thickness: .14em; } }

.estado {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-label); font-weight: 600; line-height: 1; letter-spacing: .005em;
  padding: 5px 10px 5px 8px; border-radius: var(--r-etiqueta); border: 1px solid var(--linea); white-space: nowrap; background: var(--superficie, transparent);
}
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado--disponible { color: var(--ok); }

.estado--desarrollo { color: var(--ink-2); }
.etiqueta-demo { display: inline-block; font-size: var(--t-label); font-weight: 600; color: var(--ink-2); padding: 4px 9px; border-radius: 6px; background: var(--dia-200); align-self: flex-start; }

.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* la ventana de luz: la superficie que usa todo lo que es "producto" (quiz, demo, formulario) */
.ventana { background: var(--dia-100); border-radius: var(--r-tarjeta); box-shadow: var(--borde-luz), var(--sombra-larga); }

/* ---------- Salto ---------- */
.salto { position: fixed; top: 8px; left: 8px; z-index: 1200; padding: 12px 16px; border-radius: var(--r-control); background: var(--luz-ambar); color: var(--tinta-900); font-weight: 600; text-decoration: none; transform: translateY(-200%); }
.salto:focus-visible { transform: none; outline-color: var(--luz-tinta); }
[tabindex="-1"]:focus { outline: none; } /* 9b: destinos de enlace (main, #diagnostico, #formulario) reciben el foco del salto; es un contenedor, no un control */

/* ---------- Cabecera ---------- */
.cabecera { position: fixed; inset: 0 0 auto 0; z-index: 1100; height: var(--cabecera); display: flex; align-items: center; color: var(--tinta-900); transition: transform var(--d-3) var(--ease-out), background-color var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out); }
.cabecera--oculta { transform: translateY(-100%); }
.cabecera--oculta .cabecera__cta { box-shadow: none; }   /* la sombra del boton sobresalia bajo la cabecera escondida y dejaba una mancha ambar */
.cabecera--solida { background: rgba(245,246,248,.82); box-shadow: 0 1px 0 rgba(21,27,39,.08); }
@supports (backdrop-filter: blur(14px)) {
  @media not (prefers-reduced-transparency: reduce) { .cabecera--solida { backdrop-filter: blur(14px) saturate(1.2); } }
}
.cabecera .cont { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.marca { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--f-display); font-stretch: 118%; font-weight: 650; font-size: 1.25rem; letter-spacing: -.01em; text-decoration: none; }
.marca svg, .marca img { width: 32px; height: 32px; flex: none; }
.nav-principal { display: none; }
.cabecera__cta { display: none; min-height: 44px; padding-inline: var(--s-4); font-size: var(--t-6); }
.boton-menu { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--s-3); background: transparent; border: 1px solid currentColor; border-radius: var(--r-control); color: inherit; font-weight: 600; }
@media (min-width: 1024px) {
  .nav-principal { display: block; }
  .cabecera__cta { display: inline-flex; }
  .nav-principal ul { display: flex; gap: var(--s-4); }
  .nav-principal a { text-decoration: none; font-weight: 500; font-size: var(--t-6); padding: 12px 6px; min-height: 44px; display: inline-flex; align-items: center; position: relative; }
  .nav-principal a::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 2px; background: var(--luz-tinta); transform: scaleX(0); transform-origin: left; transition: transform var(--d-2) var(--ease-out); }
  .nav-principal a[aria-current="true"]::after { transform: scaleX(1); }
  @media (hover: hover) and (pointer: fine) { .nav-principal a:hover::after { transform: scaleX(1); } }
  .boton-menu { display: none; }
}
.panel-menu { position: fixed; inset: 0; z-index: 1150; display: none; background: var(--dia-50); color: var(--tinta-900); padding: var(--s-5) var(--margen) var(--s-8); flex-direction: column; }
.panel-menu[data-abierto="true"] { display: flex; }
.panel-menu__cabeza { display: flex; justify-content: space-between; align-items: center; min-height: var(--cabecera); }
.panel-menu nav { margin-top: var(--s-7); }
.panel-menu nav a { display: block; font-family: var(--f-display); font-stretch: 118%; font-weight: 650; font-size: var(--t-3); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--dia-linea); }
.panel-menu nav li { opacity: 0; transform: translateY(10px); animation: entra var(--d-3) var(--ease-out) forwards; }
.panel-menu nav li:nth-child(2) { animation-delay: 40ms; } .panel-menu nav li:nth-child(3) { animation-delay: 80ms; }
.panel-menu nav li:nth-child(4) { animation-delay: 120ms; } .panel-menu nav li:nth-child(5) { animation-delay: 160ms; } .panel-menu nav li:nth-child(6) { animation-delay: 200ms; }
.panel-menu .boton--primario { margin-top: auto; }
@keyframes entra { to { opacity: 1; transform: none; } }

/* ---------- Carril de luz (escritorio): la señal propia ---------- */
.carril { display: none; position: fixed; left: max(8px, calc((100vw - var(--contenedor)) / 2 - 36px)); top: 0; bottom: 0; width: 40px; z-index: 1000; pointer-events: none; color: var(--tinta-900); }
.carril__hora { position: absolute; top: calc(var(--cabecera) + 20px); left: 0; width: max-content; max-width: 220px; white-space: nowrap; text-align: center; font-family: var(--f-display); font-stretch: 112%; font-weight: 600; font-size: 13px; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.carril__hora[data-largo="true"] { padding: 3px 10px; border-radius: var(--r-etiqueta); background: color-mix(in oklab, var(--dia-100) 94%, transparent); box-shadow: var(--borde-luz), var(--sombra-corta); }
.carril__hora:not([data-largo="true"]) { width: 100%; }
.carril__linea { position: absolute; left: 19px; top: calc(var(--cabecera) + 48px); bottom: 232px; width: 2px; background: currentColor; opacity: .12; }
.carril__relleno { position: absolute; left: 19px; top: calc(var(--cabecera) + 48px); bottom: 232px; width: 2px; background: var(--luz-grad); transform-origin: top; transform: scaleY(var(--carril-p, 0)); }
.carril__luces { position: absolute; bottom: 24px; left: 0; width: 100%; display: grid; gap: 2px; justify-items: center; pointer-events: auto; }
.carril__luces a { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; }
.carril__luces a::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 2px; background: currentColor; opacity: .16; transition: opacity var(--d-3) var(--ease-out), background-color var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out); }
.carril__luces a[data-encendida="true"]::before { background: var(--luz-ambar); opacity: 1; box-shadow: 0 0 0 1px rgba(158,63,14,.35), -2px 4px 10px -2px rgba(244,183,64,.9); }
@media (min-width: 1140px) { .carril { display: block; } }

/* ---------- Rail inferior (móvil) ---------- */
.rail { position: fixed; left: 0; right: 0; bottom: 0; height: var(--rail); z-index: 1050; display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-4); background: var(--dia-50); color: var(--tinta-900); box-shadow: 0 -1px 0 var(--dia-linea), 0 -12px 32px -16px rgba(21,27,39,.2); transition: transform var(--d-3) var(--ease-out), visibility 0s linear 0s; }
.rail--oculto { transform: translateY(110%); visibility: hidden; transition-delay: 0s, var(--d-3); }
.rail__hora { font-family: var(--f-display); font-stretch: 112%; font-weight: 600; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rail__luces { display: flex; gap: 4px; margin-top: 3px; }
.rail__luces i { width: 6px; height: 6px; border-radius: 1px; background: currentColor; opacity: .18; }
.rail__luces i[data-encendida="true"] { background: var(--luz-tinta); opacity: 1; }
.rail__capitulo { flex: 1; font-size: var(--t-label); opacity: .8; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail:has(.rail__hora[data-largo="true"]) .rail__capitulo { display: none; }
.rail:has(.rail__hora[data-largo="true"]) .rail__hora { flex: 1; }
.rail .boton { min-height: 44px; padding-inline: var(--s-4); font-size: var(--t-6); }
@media (min-width: 1024px) { .rail { display: none; } }

/* ---------- B00 Hero (v0.5: campo de luz en GPU, móvil 3D, titular cinético, derrame) ---------- */
.hero { min-height: 100svh; padding-top: calc(var(--cabecera) + var(--s-7)); padding-bottom: var(--s-8); display: grid; align-items: center; position: relative; overflow-x: clip; overflow-y: visible; isolation: isolate; }
/* la luz: un gran halo ámbar con origen (el sol, arriba a la derecha) sobre el blanco de día. Es el respaldo del lienzo. */
.hero__luz { position: absolute; inset: -10% -10% -10% -10%; z-index: 0; pointer-events: none; will-change: transform; transition: opacity var(--d-4) var(--ease-out);
  background:
    radial-gradient(ellipse 46% 52% at 84% 10%, rgba(244,183,64,.62) 0%, rgba(251,154,66,.30) 34%, rgba(255,122,69,.08) 60%, rgba(245,246,248,0) 78%),
    radial-gradient(ellipse 34% 30% at 62% 78%, rgba(244,183,64,.16) 0%, rgba(245,246,248,0) 70%),
    radial-gradient(ellipse 60% 40% at 10% 100%, rgba(21,27,39,.05) 0%, rgba(245,246,248,0) 70%);
}
/* el lienzo de luz: ocupa el hero y se derrama 20vh sobre la franja siguiente */
.hero-luz { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 20vh); z-index: 0; pointer-events: none; display: block; }
.hero-luz[hidden] { display: none; }
.hero[data-luz-gpu="on"] .hero__luz { opacity: 0; }
.hero__cont { position: relative; z-index: 1; align-items: center; }
.hero__encima { font-size: var(--t-5); color: var(--ink-2); margin-bottom: var(--s-5); }
.hero h1 .luz { color: var(--luz-tinta); position: relative; }
.hero h1 .linea { display: block; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 .linea > span { display: block; }
/* el halo de "luz." nace en la línea 2: la línea 1 se pinta por encima para que no le tape la base de "negocio," (cada línea anima filter y es su propio contexto de apilado) */
.hero h1 .linea:first-child { position: relative; z-index: 1; }

.hero__sub { margin-top: var(--s-5); max-width: 44ch; color: var(--ink-2); }
.hero__ctas { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-7); align-items: flex-start; }
.hero__ctas .boton { width: 100%; }
.hero__ctas .enlace { font-size: var(--t-5); }
.hero__objeto { position: relative; display: grid; justify-items: center; gap: var(--s-4); margin-top: var(--s-6); perspective: 1400px; }

/* titular cinético: las líneas entran desde la luz (desenfoque → nítido), escalonadas 120 ms; después subtítulo y CTAs con corte */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 [data-linea] { animation: titular .78s var(--ease-out) both; }
  .hero h1 .linea:nth-child(2) [data-linea] { animation-delay: .12s; }
  .hero [data-hero-sub], .hero [data-hero-ctas] { animation: corte-sub .7s var(--ease-out) both; }
  
  .hero .hero__sub { animation-delay: .84s; }
  .hero [data-hero-ctas] { animation-delay: .98s; }
  @keyframes titular { from { opacity: 0; filter: blur(14px); transform: translateY(.32em); } 60% { filter: blur(2px); } to { opacity: 1; filter: blur(0); transform: none; } }
  @keyframes halo-luz { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
  @keyframes corte-sub { from { clip-path: inset(0 0 100% 0); transform: translateY(10px); } to { clip-path: inset(-4% -4% -4% -4%); transform: none; } }
}

/* CTA primario del hero: sin barrido de luz (decorativo, sin motivo); el foco usa el anillo global :focus-visible */
/* CTA secundario: el subrayado crece desde la izquierda */
.hero__ctas .enlace--flecha { position: relative; text-decoration: none; padding-bottom: 10px; }
.hero__ctas .enlace--flecha::before { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: currentColor; transform: scaleX(.22); transform-origin: left; transition: transform .38s var(--ease-out); }
.hero__ctas .enlace--flecha:hover::before, .hero__ctas .enlace--flecha:focus-visible::before { transform: scaleX(1); }
.hero__ctas .enlace--flecha:focus-visible { outline: 2px solid var(--luz-tinta); outline-offset: 4px; box-shadow: 0 0 0 7px rgba(244,183,64,.3); }

/* el teléfono: la interfaz real del CRM como objeto con volumen. La luz viene de arriba a la derecha:
   borde de luz fino en ese canto, sombra larga hacia abajo a la izquierda, reflejo en el cristal que sigue a la inclinación */
.telefono { position: relative; margin: 0 0 var(--s-6); width: min(100%, 316px); aspect-ratio: 9 / 16.6; padding: 9px; border-radius: 42px; background: #1A2130;
  box-shadow: inset 1px 1px 0 rgba(255,236,200,.5), inset -1px -1px 0 rgba(0,0,0,.45), 0 0 0 1px rgba(21,27,39,.5), 1px -1px 0 1px rgba(244,183,64,.28), -28px 48px 90px -30px rgba(21,27,39,.45), -6px 14px 30px -14px rgba(21,27,39,.25);
  transform: rotate(-3deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; will-change: transform; }
.telefono__pantalla { height: 100%; border-radius: 34px; background: var(--dia-50); padding: 48px 14px 18px; display: flex; flex-direction: column; gap: var(--s-3); overflow: hidden; position: relative; }
.telefono__pantalla::before { content: ""; position: absolute; top: 12px; left: 50%; width: 84px; height: 24px; border-radius: 999px; background: #1A2130; transform: translateX(-50%); z-index: 2; }
.telefono__pantalla::after { content: ""; position: absolute; inset: -20% -40%; pointer-events: none; z-index: 2;
  background: linear-gradient(112deg, rgba(255,255,255,0) 34%, rgba(255,244,222,.55) 46%, rgba(244,183,64,.14) 52%, rgba(255,255,255,0) 60%);
  transform: translateX(calc(var(--ry, 0deg) * 2.2)) translateY(calc(var(--rx, 0deg) * -1.4)); will-change: transform; }
.telefono__pantalla .etiqueta-demo { font-size: 13px; padding: 3px 8px; }
.telefono__cabeza { display: flex; flex-direction: column; gap: 1px; padding-bottom: var(--s-3); border-bottom: 1px solid var(--linea); font-size: var(--t-6); }
.telefono__cabeza .peq { font-size: 13px; color: var(--ink-3); }
.mensajes--hero { font-size: 14px; gap: 10px; }
.mensajes--hero .burbuja { font-size: 14px; padding: 9px 11px; }
.mensajes--hero .burbuja__quien { font-size: 13px; }
.mensajes--hero .mensajes__hora { align-self: flex-end; font-size: 13px; color: var(--ink-3); margin: 0 4px -4px 0; }
.mensajes--hero .boton--peq { min-height: 36px; font-size: 13px; padding-inline: 12px; pointer-events: none; }
/* "escribiendo": tres puntos. No ocupa sitio en el flujo: la burbuja se dibuja sobre el hueco donde entrará la respuesta */
.burbuja--escribiendo { position: relative; height: 0; margin-top: -10px; overflow: visible; align-self: flex-start; }
.burbuja--escribiendo .burbuja { position: absolute; left: 0; top: 10px; display: inline-flex; gap: 5px; align-items: center; min-height: 32px; padding: 9px 13px; }
.burbuja--escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); display: block; }
.telefono__aviso { position: absolute; left: -10%; bottom: -7%; max-width: 78%; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-tarjeta); background: var(--dia-100); color: var(--tinta-900); font-size: 13px; line-height: 1.35; transform: rotate(3deg); box-shadow: var(--borde-luz), -14px 24px 44px -18px rgba(21,27,39,.4); will-change: transform; }
.telefono__aviso .ico { color: var(--luz-tinta); margin-top: 1px; }
.telefono__aviso strong { display: block; font-weight: 600; margin-bottom: 1px; }

/* la conversación ocurre de verdad: 4,5 s, una vez; se repite al volver a entrar tras 20 s (lumaq.js pone data-conv) */
@media (prefers-reduced-motion: no-preference) {
  .telefono[data-conv] .mensajes--hero > *, .telefono[data-conv] .telefono__aviso { opacity: 0; }
  .telefono[data-conv="on"] .mensajes__hora { animation: conv-hora .35s var(--ease-out) .15s forwards; }
  .telefono[data-conv="on"] .burbuja--cliente { animation: conv-corte .55s var(--ease-out) .3s forwards; }
  .telefono[data-conv="on"] .burbuja--escribiendo { animation: conv-escribe .95s linear .95s forwards; }
  .telefono[data-conv="on"] .burbuja--escribiendo i { animation: conv-punto .9s ease-in-out .95s 2; }
  .telefono[data-conv="on"] .burbuja--escribiendo i:nth-child(2) { animation-delay: 1.1s; }
  .telefono[data-conv="on"] .burbuja--escribiendo i:nth-child(3) { animation-delay: 1.25s; }
  .telefono[data-conv="on"] .burbuja--escribiendo + .burbuja--asistente { animation: conv-corte .5s var(--ease-out) 1.85s forwards; }
  .telefono[data-conv="on"] .demo-chat__persona { animation: burbuja .4s var(--ease-out) 2.95s forwards; }
  .telefono[data-conv="on"] .demo-chat__persona + .burbuja--asistente { animation: conv-corte .5s var(--ease-out) 3.5s forwards; }
  .telefono[data-conv="on"] .telefono__aviso { animation: conv-aviso .6s var(--ease-out) 3.95s forwards; }
  @keyframes conv-hora { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @keyframes conv-corte { from { opacity: 0; clip-path: inset(100% 0 0 0 round 16px); transform: translateY(10px); } to { opacity: 1; clip-path: inset(-6% -6% -6% -6% round 16px); transform: none; } }
  @keyframes conv-escribe { 0% { opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes conv-punto { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(-3px); opacity: 1; } }
  @keyframes conv-aviso { from { opacity: 0; transform: rotate(3deg) translateX(-130%); } to { opacity: 1; transform: rotate(3deg); } }
}
.telefono:not([data-conv]) .burbuja--escribiendo { display: none; }
@media (min-width: 768px) {
  .hero__ctas { flex-direction: row; align-items: center; gap: var(--s-5); }
  .hero__ctas .boton { width: auto; }
  .hero__texto { grid-column: 1 / 5; }
  .hero__objeto { grid-column: 5 / -1; margin-top: 0; }
}
@media (min-width: 1024px) {
  .hero { padding-top: calc(var(--cabecera) + var(--s-6)); }
  .hero__texto { grid-column: 1 / 7; }
  .hero__objeto { grid-column: 8 / 12; }
  .telefono { width: min(100%, 324px); }
}
@media (max-width: 767px) {
  .hero { min-height: 0; padding-top: calc(var(--cabecera) + var(--s-5)); padding-bottom: var(--s-4); }
  .hero__luz { background: radial-gradient(ellipse 70% 36% at 88% 4%, rgba(244,183,64,.55) 0%, rgba(251,154,66,.22) 40%, rgba(245,246,248,0) 72%); }
  .hero__objeto { margin-top: var(--s-4); gap: var(--s-2); }
  .hero__ctas { margin-top: var(--s-5); }
  .telefono { width: min(100%, 300px); margin-left: 6%; height: 320px; aspect-ratio: auto; margin-bottom: 0; -webkit-mask-image: linear-gradient(#000 78%, transparent 100%); mask-image: linear-gradient(#000 78%, transparent 100%); }
  .telefono__aviso { left: 4%; bottom: 60px; max-width: 78%; }
}

/* ---------- Franja de confianza: recibe el derrame y enciende su borde superior de luz ---------- */
.franja { position: relative; z-index: 1; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.franja::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(244,183,64,0) 0%, rgba(244,183,64,.85) 48%, #FFF1D6 76%, rgba(244,183,64,0) 100%);
  box-shadow: -10px 6px 26px -4px rgba(244,183,64,.6); opacity: min(1, calc(var(--hero-p, 0) * 2.4)); }
.franja__cont { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); padding-block: var(--s-4); }
.franja p { margin: 0; font-size: var(--t-6); font-weight: 600; color: var(--ink-2); }

/* ---------- B01 Diagnóstico ---------- */
.diagnostico__texto .lead { margin-top: var(--s-5); }
.diagnostico__nota { margin-top: var(--s-4); font-size: var(--t-6); color: var(--ink-3); }
.quiz { padding: var(--s-5); min-height: 360px; display: flex; flex-direction: column; align-self: start; }
@media (min-width: 768px) { .diagnostico__texto { grid-column: 1 / 4; } .quiz { grid-column: 4 / -1; padding: var(--s-6); } }
@media (min-width: 1024px) { .diagnostico__texto { grid-column: 1 / 6; } .quiz { grid-column: 7 / 13; } }
.quiz__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); font-size: var(--t-6); color: var(--ink-2); }
.quiz__barra { flex: 1; height: 4px; border-radius: 2px; background: var(--linea); position: relative; overflow: hidden; }
.quiz__barra i { position: absolute; inset: 0; background: var(--luz-grad); transform-origin: left; transform: scaleX(var(--q, 0)); transition: transform 280ms cubic-bezier(.2, .7, .2, 1); }
.quiz__pregunta { font-size: var(--t-3); font-family: var(--f-display); font-stretch: 112%; font-weight: 600; line-height: var(--lh-3); letter-spacing: var(--ls-3); margin-bottom: var(--s-5); }
.quiz__pregunta:focus, .quiz__resultado h3:focus { outline: none; } /* el foco va al título para el lector de pantalla; el foco visible vive en las opciones */
.quiz__opciones { display: grid; gap: var(--s-3); }
.quiz__op, .quiz__chips button { position: relative; display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 52px; text-align: left; padding: 12px 14px; border-radius: var(--r-control); background: var(--dia-50); border: 1px solid var(--linea); color: var(--ink); transition: transform 180ms cubic-bezier(.2, .7, .2, 1), opacity 180ms cubic-bezier(.2, .7, .2, 1); }
.quiz__op::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--luz-ember); box-shadow: 0 0 0 4px rgba(244, 183, 64, .28); opacity: 0; transform: scale(.985); transition: opacity 180ms cubic-bezier(.2, .7, .2, 1), transform 180ms cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.quiz__op[aria-pressed="true"]::after { opacity: 1; transform: none; }
.quiz__op:focus-visible { outline-offset: 3px; }
.quiz__tecla { flex: none; display: none; width: 24px; height: 24px; place-items: center; border-radius: 6px; border: 1px solid var(--linea); font-size: 13px; line-height: 1; color: var(--ink-3); background: var(--dia-100); }
@media (hover: hover) and (pointer: fine) { .quiz__tecla { display: grid; } .quiz__op:hover { transform: translateY(-1px); border-color: var(--acento-texto); } }
.quiz__texto { flex: 1; min-width: 0; }
.quiz__chk { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--luz-grad); color: var(--tinta-900); opacity: 0; transform: scale(.6); transition: opacity 180ms cubic-bezier(.2, .7, .2, 1), transform 180ms cubic-bezier(.2, .7, .2, 1); }
.quiz__chk .ico { width: 15px; height: 15px; stroke-width: 2.5; }
.quiz__op[aria-pressed="true"] .quiz__chk { opacity: 1; transform: none; }
.quiz__op:active, .quiz__chips button:active { transform: scale(.985); }
.quiz__opciones[data-elegida] { pointer-events: none; }
.quiz__opciones[data-elegida] .quiz__op:not([aria-pressed="true"]) { opacity: .5; }
.quiz__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.quiz__chips button { min-height: 44px; width: auto; }
.quiz__paso { animation: q-entra 200ms cubic-bezier(.2, .7, .2, 1) both; }
.quiz__paso[data-dir="1"] { --dx: 14px; }
.quiz__paso[data-dir="-1"] { --dx: -14px; }
@keyframes q-entra { from { opacity: 0; transform: translateX(var(--dx, 0)); } to { opacity: 1; transform: none; } }
.quiz__pie { margin-top: auto; padding-top: var(--s-5); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.quiz__atras { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 8px; margin-left: -8px; background: none; border: 0; border-radius: var(--r-control); color: var(--ink-2); font-size: var(--t-6); font-weight: 600; transition: transform 180ms cubic-bezier(.2, .7, .2, 1); }
.quiz__atras .ico { transition: transform 180ms cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) { .quiz__atras:hover { color: var(--ink); } .quiz__atras:hover .ico { transform: translateX(-3px); } }
.quiz__atras:active { transform: scale(.97); }
.quiz__reinicia { margin-left: 0; margin-right: -8px; padding: 0 8px 0 12px; font-weight: 500; text-decoration: underline; text-underline-offset: .2em; }
.quiz__resultado h3 { margin-bottom: var(--s-3); }
.quiz__huecos { display: grid; gap: 2px; margin-bottom: var(--s-4); color: var(--ink-2); font-size: var(--t-6); line-height: 1.5; }
.quiz__huecos li { padding-left: 18px; position: relative; }
.quiz__huecos li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 2px; background: var(--luz-ambar); }
.quiz__reco { padding: var(--s-4); border-radius: var(--r-control); background: var(--dia-200); margin-bottom: var(--s-4); display: grid; gap: var(--s-2); }
.quiz__porque { margin: 0; color: var(--ink-2); font-size: var(--t-6); line-height: var(--lh-4); }
.quiz__incluye { display: grid; gap: 6px; margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--linea); font-size: var(--t-6); }
.quiz__incluye li { display: flex; gap: var(--s-2); align-items: flex-start; }
.quiz__incluye .ico { color: var(--luz-tinta); margin-top: 2px; }
.quiz__plazo b { font-weight: 700; color: var(--ink); }
.quiz__piloto { font-size: var(--t-6); color: var(--acento-texto); }
.quiz__micro { margin-top: var(--s-3); font-size: var(--t-6); color: var(--ink-3); }

/* ---------- B02 Lo que pasa hoy: cartel tipográfico en tres líneas ---------- */
.dolores__rotulo { font-family: var(--f-text); font-stretch: 100%; font-size: var(--t-5); font-weight: 600; letter-spacing: 0; color: var(--ink-2); max-width: none; }
.dolores__lista { margin-top: var(--s-5); border-top: 1px solid var(--linea); }
.dolor { display: grid; gap: var(--s-2) var(--canal); padding-block: var(--s-5); border-bottom: 1px solid var(--linea); }
.dolor h3 { font-size: var(--t-2); line-height: var(--lh-2); letter-spacing: var(--ls-2); max-width: 22ch; }
.dolor p { font-size: var(--t-4); line-height: var(--lh-4); color: var(--ink-2); max-width: 36ch; }
@media (min-width: 768px) {
  .dolor { grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: start; padding-block: var(--s-6); }
  .dolor h3 { grid-column: 2 / 6; }
  .dolor p { grid-column: 6 / 9; padding-top: .3em; }
}
@media (min-width: 1024px) {
  .dolor { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .dolor h3 { grid-column: 2 / 9; }
  .dolor p { grid-column: 9 / 13; }
}
.dolores__cierre { margin-top: var(--s-8); padding-bottom: var(--s-6); font-family: var(--f-display); font-stretch: 118%; font-weight: 650; font-size: var(--t-3); line-height: var(--lh-3); letter-spacing: var(--ls-3); max-width: 32ch; text-wrap: balance; }
.dolores__cierre::before { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--luz-grad); margin-bottom: var(--s-5); }

/* ---------- La fachada (SVG en 6 capas con punto de fuga: B03) ---------- */
.fv {
  --dia: clamp(0, calc((var(--luz-p) - .85) * 6.667), 1);
  --n: calc((1 - var(--dia)) * 100%);
  --e1: clamp(0, calc((var(--luz-p) - .06) * 25), 1);
  --e2: clamp(0, calc((var(--luz-p) - .18) * 25), 1);
  --e3: clamp(0, calc((var(--luz-p) - .30) * 25), 1);
  --e4: clamp(0, calc((var(--luz-p) - .42) * 25), 1);
  --e5: clamp(0, calc((var(--luz-p) - .54) * 25), 1);
  --e6: clamp(0, calc((var(--luz-p) - .66) * 25), 1);
  --e7: clamp(0, calc((var(--luz-p) - .78) * 25), 1);
  --e8: clamp(0, calc((var(--luz-p) - .90) * 25), 1);
  --fa: max(.6, var(--e7));
  --vd: clamp(0, calc(1 - (var(--luz-p) - .42) * 8.333), 1);
  --vf: clamp(0, calc((var(--luz-p) - .52) * 20), 1);
  --pp: clamp(0, calc((var(--luz-p) - .03) * 11), 1);
  width: 100%; height: 100%; display: block;
}
.fv .on1 { opacity: calc(max(.14, var(--e1)) * (1 - var(--dia))); } .fv .on2 { opacity: calc(var(--e2) * (1 - var(--dia))); }
.fv .on3 { opacity: calc(var(--e3) * (1 - var(--dia))); } .fv .on4 { opacity: calc(var(--e4) * (1 - var(--dia))); }
.fv .on5 { opacity: calc(var(--e5) * (1 - var(--dia))); } .fv .on6 { opacity: calc(var(--e6) * (1 - var(--dia))); }
.fv .on7 { opacity: calc(var(--e7) * (1 - var(--dia))); } .fv .on8 { opacity: calc(var(--e8) * (1 - var(--dia))); }
.fv .on7, .fv .on8 { --tenue: 1; opacity: calc(var(--e7) * (1 - var(--dia)) * var(--tenue)); }
.fv .on8 { opacity: calc(var(--e8) * (1 - var(--dia)) * var(--tenue)); }
.fv polygon.on7.vec, .fv polygon.on8.rot-luz { stroke: var(--luz-ambar); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.fv .on-fa { opacity: calc(var(--fa) * (1 - var(--dia))); }
.fv .refl { opacity: calc(.6 + var(--dia) * .4); }
/* cielo y calle */
.k-cielo-a { stop-color: color-mix(in oklab, #0A0E16 var(--n), #CBDCEE); }
.k-cielo-b { stop-color: color-mix(in oklab, #18202F var(--n), #E6EEF7); }
.k-cielo-c { stop-color: color-mix(in oklab, #2A3550 var(--n), #F5F6F8); }
.fv .alba { opacity: var(--dia); }
.k-lejos { fill: color-mix(in oklab, #10151F var(--n), #C4CFDD); }
.k-acera-a { stop-color: color-mix(in oklab, #2A3345 var(--n), #DDE1E8); } .k-acera-b { stop-color: color-mix(in oklab, #171C28 var(--n), #C9CFD9); }
.k-calle-a { stop-color: color-mix(in oklab, #151A24 var(--n), #B7BFCB); } .k-calle-b { stop-color: color-mix(in oklab, #0B0E14 var(--n), #9EA7B6); }
.k-bordillo { fill: color-mix(in oklab, #3A4560 var(--n), #EEF0F4); }
.k-junta { fill: none; stroke: #000; stroke-opacity: .3; stroke-width: 1.2; }
.k-eje { fill: none; stroke: #E6DFC8; stroke-opacity: .5; stroke-width: 4; stroke-dasharray: 30 22; }
/* fachada: materiales */
.k-muro-a { stop-color: color-mix(in oklab, #28334C var(--n), #E9ECF1); } .k-muro-b { stop-color: color-mix(in oklab, #161D2D var(--n), #D6DBE4); }
.k-vec-a { stop-color: color-mix(in oklab, #131A27 var(--n), #D2D8E2); } .k-vec-b { stop-color: color-mix(in oklab, #0D121C var(--n), #C3CAD6); }
.k-vec-baja { fill: color-mix(in oklab, #0A0E16 var(--n), #B9C0CC); opacity: .55; }
.k-hilada { fill: none; stroke: color-mix(in oklab, #fff var(--n), #5B6272); stroke-opacity: .075; stroke-width: 1; }
.k-cornisa { fill: color-mix(in oklab, #34405C var(--n), #F6F7FA); }
.k-sombra { fill: #000; opacity: .26; }
.k-moldura { fill: color-mix(in oklab, #2E3A55 var(--n), #CDD3DD); }
.k-zocalo { fill: color-mix(in oklab, #10151F var(--n), #B8C0CC); }
.fv .clave { fill: #FFC873; opacity: calc(var(--e8) * (1 - var(--dia)) * .1); }
/* rotulo */
.k-rot-marco { fill: color-mix(in oklab, #0E1219 var(--n), #8B94A5); }
.k-rot { fill: color-mix(in oklab, #202938 var(--n), #F2EEE3); }
.rot-luz { fill: #FFD98A; }
.rot-t0, .rot-t1 { font-family: var(--f-display); font-weight: 650; font-stretch: 112%; }
.rot-t0 { fill: #6B7690; opacity: calc(1 - var(--e8)); }
.rot-t1 { fill: #151B27; opacity: var(--e8); }
/* aberturas */
.k-marco { fill: color-mix(in oklab, #2C3750 var(--n), #AAB4C4); }
.k-cristal { fill: color-mix(in oklab, #0C1019 var(--n), #A9BDD3); }
.int { fill: #5A3A16; opacity: .5; } .int2 { fill: #3A2410; opacity: .38; }
.k-persiana { fill: color-mix(in oklab, #1B2333 var(--n), #BFC7D3); }
.k-lama { fill: none; stroke: #000; stroke-opacity: .32; stroke-width: 1; }
.k-persiana-pie { fill: color-mix(in oklab, #2A3550 var(--n), #98A3B5); }
.k-puerta { fill: color-mix(in oklab, #222A38 var(--n), #AFB8C6); }
.k-manilla { fill: #C9B27A; }
.k-reja { fill: color-mix(in oklab, #10141C var(--n), #5B6475); }
.k-alfeizar { fill: color-mix(in oklab, #34405A var(--n), #C3CAD6); }
/* calle viva */
.k-poste { fill: color-mix(in oklab, #303A52 var(--n), #8F9AAC); }
.k-poste-l { stroke: color-mix(in oklab, #303A52 var(--n), #8F9AAC); }
.fv .lampara { fill: #FFF1C7; }
.fv .furgo { transform: translate(calc(var(--vd) * 480px), calc(var(--vd) * -218px)); }
.fv .faros { opacity: calc(var(--vf) * (1 - var(--dia))); }
.fv .faro { fill: #FFF1C7; opacity: calc(.25 + var(--vf) * .75); }
.k-furgo-caja { fill: color-mix(in oklab, #3A4559 var(--n), #F1F3F6); }
.k-furgo-cab { fill: color-mix(in oklab, #303A4D var(--n), #E4E8EE); }
.k-furgo-banda { fill: #F4B740; opacity: .9; }
.k-furgo-vidrio { fill: color-mix(in oklab, #0E131C var(--n), #8FA6C2); }
.k-furgo-bajo { fill: #0B0E14; opacity: .6; }
.fv .punto { fill: #FFF1C7; transform: translate(calc(var(--pp) * 375px), calc(var(--pp) * 41px)); opacity: calc(clamp(0, calc(var(--pp) * 15), 1) * clamp(0, calc((1 - var(--pp)) * 15), 1)); }

/* ---------- B03 El sistema (momento firma) ---------- */
.sistema__cabeza { margin-bottom: var(--s-6); align-items: end; }
.sistema__entradilla .lead { max-width: 52ch; }


@media (min-width: 1024px) { .sistema__titulo { grid-column: 1 / 6; } .sistema__entradilla { grid-column: 6 / 13; } }
.luz-recorrido { position: relative; height: 200vh; }
.luz-escenario { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: 44svh 1fr; gap: var(--s-4); align-content: start; padding-top: calc(var(--cabecera) + var(--s-3)); }
.luz-escena { position: relative; background: var(--noche-900); overflow: hidden; flex: 1; min-height: 220px; border-radius: var(--r-escena); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), -24px 44px 84px -30px rgba(21,27,39,.5), 0 2px 4px rgba(21,27,39,.08); isolation: isolate; }
.luz-escena > svg, .luz-escena > canvas, .luz-escena > video, .luz-escena > picture, .luz-escena > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; }

.luz-escena > [hidden] { display: none; }
.luz-escena .fv { height: 100%; }
.luz-figura { margin: 0; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.luz-figura figcaption { font-size: 13px; line-height: 1.4; color: var(--ink-3); }
/* grano y viñeta sobre la escena: la noche tiene textura */
.luz-escena::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(ellipse 80% 70% at 50% 55%, rgba(0,0,0,0) 55%, rgba(5,8,14,.45) 100%); }
.luz-etapas { --nodo: 28px; --pad: 8px; padding: 0 0 0 8px; overflow: hidden; display: grid; gap: 0; align-content: start; }
.luz-etapas li { --e: clamp(0, calc((var(--luz-p) - var(--u, .06)) * 25), 1); --s: clamp(0, calc((var(--luz-p) - var(--u, .06)) * 8.333), 1); position: relative; display: grid; grid-template-columns: var(--nodo) 1fr; grid-template-rows: auto 0fr; gap: 0 var(--s-3); padding: var(--pad) 0; border-top: 1px solid var(--linea); color: var(--ink-3); transition: color var(--d-3) var(--ease-out), grid-template-rows var(--d-3) var(--ease-out); }
.luz-etapas li[data-etapa="1"] { --u: .06; } .luz-etapas li[data-etapa="2"] { --u: .18; } .luz-etapas li[data-etapa="3"] { --u: .30; } .luz-etapas li[data-etapa="4"] { --u: .42; }
.luz-etapas li[data-etapa="5"] { --u: .54; } .luz-etapas li[data-etapa="6"] { --u: .66; } .luz-etapas li[data-etapa="7"] { --u: .78; } .luz-etapas li[data-etapa="8"] { --u: .90; }
.luz-etapas li:first-child { border-top: 0; }
/* hilo de luz entre nodos: cada tramo se enciende con --luz-p, igual que las ventanas de la fachada */
.luz-etapas li:not(:last-child)::before, .luz-etapas li:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--nodo) / 2 - 1px); top: calc(var(--pad) + var(--nodo)); bottom: calc(var(--pad) * -1); width: 2px; border-radius: 1px; }
.luz-etapas li:not(:last-child)::before { background: var(--linea); }
.luz-etapas li:not(:last-child)::after { background: var(--luz-grad); transform-origin: top; transform: scaleY(var(--s)); }
.luz-etapas .n { position: relative; z-index: 1; isolation: isolate; width: var(--nodo); height: var(--nodo); display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linea); background: var(--bg); color: var(--ink-2); font-family: var(--f-display); font-stretch: 112%; font-weight: 650; font-size: 14px; line-height: 1; }
.luz-etapas .n::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 50%; background: var(--luz-grad); opacity: var(--e); }
.luz-etapas .n::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(244, 183, 64, .6); opacity: 0; transform: scale(.8); transition: opacity 240ms cubic-bezier(.2, .7, .2, 1), transform 240ms cubic-bezier(.2, .7, .2, 1); }
.luz-etapas h3 { font-family: var(--f-text); font-stretch: 100%; font-size: var(--t-5); font-weight: 600; line-height: var(--nodo); letter-spacing: 0; display: flex; flex-wrap: wrap; gap: 0 10px; align-items: center; }
.luz-etapas h3 .estado { font-weight: 600; font-size: 13px; padding: 3px 8px 3px 7px; }
.luz-etapas p { grid-column: 2; font-size: var(--t-6); line-height: 1.45; margin-top: 4px; min-height: 0; opacity: 0; overflow: hidden; transition: opacity var(--d-3) var(--ease-out); }
.luz-etapas li[aria-current="step"] { color: var(--ink); grid-template-rows: auto 1fr; }
.luz-etapas li[aria-current="step"] .n { border-color: transparent; color: var(--tinta-900); }
.luz-etapas li[aria-current="step"] .n::after { opacity: var(--e); transform: scale(1); }
.luz-etapas li[aria-current="step"] p { opacity: 1; }
.luz-etapas li[data-pasada="true"] { color: var(--ink-2); }
.luz-etapas li[data-pasada="true"] .n { border-color: transparent; color: var(--tinta-900); }
@media (max-width: 1023px) {
  .luz-etapas { --nodo: 26px; --pad: 5px; }
  .luz-escenario { grid-template-rows: 32svh 1fr; }
  .luz-escena { margin-inline: 0; }
  .luz-etapas li h3 .estado { display: inline-flex; }
}
@media (min-width: 1024px) {
  .luz-escenario { grid-template-rows: none; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--canal); padding: calc(var(--cabecera) + var(--s-4)) var(--margen) var(--s-5); align-items: center; }
  .luz-escenario { height: auto; padding-bottom: 0; }
  .luz-figura { grid-column: 1 / 8; }
  .luz-escena { flex: none; margin: 0; min-height: 0; height: min(calc(100svh - 190px), 680px); }
  .luz-etapas { grid-column: 8 / 13; }
  .luz-etapas li { padding: 9px 0; }
}
@media (max-width: 1023px) and (max-height: 810px) {
  .luz-etapas { --luz-p: 1; }
  .luz-etapas li[aria-current="step"] .n::after { opacity: 0; }
  .luz-recorrido { height: auto; }
  .luz-escenario { position: static; height: auto; }
  .luz-escena .fv { --luz-p: 1; }
  .luz-etapas li { color: var(--ink); }
  .luz-etapas li { grid-template-rows: auto auto; }
  .luz-etapas p { opacity: 1; }
}
.luz-recorrido.luz-recorrido--estatico { height: auto; }
.luz-recorrido--estatico .luz-escenario { position: static; height: auto; }
.luz-recorrido--estatico .luz-etapas li { color: var(--ink); }
.luz-recorrido--estatico .luz-etapas li { grid-template-rows: auto auto; }
.luz-recorrido--estatico .luz-etapas p { opacity: 1; }
.sistema__cierre { margin-inline: auto; padding-inline: var(--margen); max-width: var(--contenedor); padding-top: var(--s-6); display: grid; gap: var(--s-5); }
.sistema__cierre p { font-family: var(--f-display); font-stretch: 118%; font-weight: 650; font-size: var(--t-3); line-height: var(--lh-3); letter-spacing: var(--ls-3); max-width: 26ch; text-wrap: balance; }
.sistema__cierre .acciones { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; }
@media (min-width: 1024px) { .sistema__cierre { grid-template-columns: 7fr 5fr; align-items: center; } }

/* ---------- B04 Demo ---------- */
.demo__texto .lead { margin-top: var(--s-5); }
.demo__nota { margin-top: var(--s-5); font-size: var(--t-6); color: var(--ink-2); max-width: 40ch; }
.demo__cierre { margin-top: var(--s-6); display: grid; gap: 2px; }
.demo__cierre p { font-weight: 600; }
.demo-chat { overflow: hidden; display: grid; align-self: start; }
@media (min-width: 1024px) { .demo__texto { grid-column: 1 / 5; } .demo-chat { grid-column: 5 / 13; } }
@media (min-width: 1200px) { .demo-chat { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); overflow: clip; }
  .demo-chat__marta { align-self: start; position: sticky; top: 96px; margin: var(--s-5) var(--s-5) var(--s-5) 0; border-radius: var(--r-tarjeta); border-top: 0; } }
.demo-chat__conv { padding: var(--s-5); display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 768px) { .demo-chat__conv { padding: var(--s-6); } }
.demo-chat__cabeza { display: grid; gap: 6px; padding-bottom: var(--s-4); border-bottom: 1px solid var(--linea); }
.demo-chat__cabeza strong { font-weight: 600; }
.demo-chat__cabeza .peq { font-weight: 400; }
.demo-chat__hora { color: var(--ink-3); font-size: var(--t-6); }
.pestanas { display: flex; gap: var(--s-2); margin: var(--s-4) 0; }
.pestanas button { min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-control); border: 1px solid var(--linea); background: transparent; color: var(--ink-2); font-weight: 600; font-size: var(--t-6); }
.pestanas button[aria-selected="true"] { background: var(--ink); color: var(--dia-50); border-color: var(--ink); }
.demo-chat__panel-pestana[hidden] { display: none; }
.demo-chat__panel-pestana .etiqueta-demo { margin-bottom: var(--s-3); }
.mensajes { display: flex; flex-direction: column; gap: var(--s-3); max-width: 480px; }
.burbuja { padding: 11px 14px; border-radius: 16px; max-width: 92%; line-height: 1.45; font-size: var(--t-6); }
.burbuja--cliente { align-self: flex-end; background: var(--dia-200); border-bottom-right-radius: 4px; }
.burbuja--asistente { align-self: flex-start; background: var(--dia-50); box-shadow: inset 0 0 0 1px var(--linea); border-bottom-left-radius: 4px; }
.burbuja__quien { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); margin-bottom: 3px; font-weight: 600; }
.burbuja__quien .ico { width: 15px; height: 15px; color: var(--acento-texto); }
.burbuja__hora { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.mensaje-sistema { align-self: center; text-align: center; font-size: var(--t-label); color: var(--ink-3); max-width: 36ch; padding: 2px 0; }
.demo-chat__persona { align-self: flex-start; }
.demo-chat__persona .boton { min-height: 44px; font-size: var(--t-6); }
.demo-chat__opciones { display: flex; flex-wrap: wrap; gap: var(--s-2); align-self: flex-end; justify-content: flex-end; }
.demo-chat__opciones button { min-height: 44px; padding: 10px 14px; border-radius: var(--r-control); border: 1px solid var(--acento-texto); background: transparent; color: var(--ink); font-weight: 600; font-size: var(--t-6); text-align: left; transition: background-color var(--d-2) var(--ease-out), transform var(--d-1) var(--ease-out); }
.demo-chat__opciones button:active, .pestanas button:active, .demo-chat__reiniciar button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .demo-chat__opciones button:hover { background: var(--dia-200); } .pestanas button[aria-selected="false"]:hover { border-color: var(--acento-texto); } }
.demo-chat__acciones { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: center; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--linea); }
.demo-chat__reiniciar { margin: 0; font-size: var(--t-6); }
.demo-chat__reiniciar button { background: none; border: 0; color: var(--ink-2); text-decoration: underline; min-height: 44px; padding: 0; }
.demo-chat__nota { margin-top: var(--s-4); font-size: var(--t-6); color: var(--ink-2); max-width: var(--medida); }
.demo-chat__marta { background: var(--dia-200); padding: var(--s-5); border-top: 1px solid var(--linea); }
.demo-chat__marta summary { font-weight: 600; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; }
.demo-chat__marta summary::-webkit-details-marker { display: none; }
.demo-chat__marta summary .ico { color: var(--acento-texto); transition: transform var(--d-2) var(--ease-out); }
.demo-chat__marta[open] summary .ico { transform: rotate(45deg); }
.avisos { display: grid; gap: var(--s-3); margin-top: var(--s-4); }


.aviso { background: var(--dia-100); border-radius: var(--r-control); padding: 12px 14px; font-size: var(--t-6); box-shadow: var(--borde-luz), var(--sombra-corta); display: flex; gap: 10px; align-items: flex-start; }
.aviso .ico { color: var(--acento-texto); margin-top: 2px; flex: none; }
.aviso { position: relative; }
.aviso__etq { display: block; font-size: 13px; font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
.aviso--ejemplo { background: transparent; box-shadow: inset 0 0 0 1px var(--linea); color: var(--ink-2); }
.aviso--nuevo { box-shadow: inset 0 0 0 1.5px var(--luz-ambar), var(--sombra-corta); }
.aviso--nuevo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--luz-ambar); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .aviso--nuevo::after { animation: aviso-resalte 900ms var(--ease-out) both; } @keyframes aviso-resalte { 0% { opacity: .35; } 100% { opacity: 0; } } }
@media (min-width: 1200px) {
  .demo-chat__marta { border-top: 0; border-left: 1px solid var(--linea); padding: var(--s-6); }
  .demo-chat__marta summary { pointer-events: none; }
  .demo-chat__marta summary .ico { display: none; }
  .demo-chat__marta:not([open]) > *:not(summary) { display: block; }
  .demo-chat__marta:not([open]) > .avisos { display: grid; }
}
@media (prefers-reduced-motion: no-preference) {
  .mensajes:not(.mensajes--hero) .burbuja, .aviso, .mensaje-sistema { animation: burbuja var(--d-3) var(--ease-out) both; }
  @keyframes burbuja { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---------- B05 Proyectos ---------- */
.proyectos__cabeza .lead { margin-top: var(--s-5); }
@media (min-width: 1024px) { .proyectos__cabeza { grid-column: 1 / 8; } }
.ficha { display: grid; gap: var(--s-5); }
.ficha__media { margin: 0; position: relative; }
.ficha__capturas { position: relative; padding-right: 18%; padding-bottom: 8%; }
.ficha__escritorio { width: 100%; height: auto; display: block; border-radius: var(--r-escena); box-shadow: var(--borde-luz), var(--sombra-larga); }
.ficha__movil { position: absolute; right: 0; bottom: 0; width: 26%; height: auto; display: block; border-radius: 18px; box-shadow: var(--borde-luz), var(--sombra-larga); aspect-ratio: 780 / 1760; object-fit: cover; object-position: top; max-height: 100%; }
.ficha__media figcaption { font-size: var(--t-label); color: var(--ink-3); margin-top: var(--s-2); }
.ficha__texto h3 { margin: var(--s-3) 0 var(--s-3); }
.ficha__texto p { color: var(--ink-2); max-width: 40ch; }
.ficha__texto .boton { margin-top: var(--s-5); }
.ficha__texto .peq { display: block; margin-top: var(--s-2); }
@media (min-width: 1024px) { .ficha { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--canal); align-items: center; } .ficha__media { grid-column: 1 / 8; } .ficha__texto { grid-column: 9 / 13; } }
.piezas { display: grid; border-top: 1px solid var(--linea); }
.pieza { display: grid; gap: var(--s-2) var(--canal); padding-block: var(--s-4); border-bottom: 1px solid var(--linea); }

.pieza h3 { font-family: var(--f-text); font-stretch: 100%; font-size: var(--t-4); font-weight: 600; letter-spacing: 0; }
.pieza p { color: var(--ink-2); font-size: var(--t-6); }
.pieza .enlace { font-size: var(--t-6); justify-self: start; }
@media (min-width: 768px) {
  .pieza { grid-template-columns: 3fr 5fr 2fr; align-items: start; }
  
  .pieza h3 { grid-column: 1; grid-row: 1; }
  .pieza p { grid-column: 2; grid-row: 1 / 3; }
  .pieza .enlace { grid-column: 3; grid-row: 1; justify-self: end; }
}
@media (min-width: 1024px) { .piezas { grid-column: 1 / 8; } .placa { grid-column: 9 / 13; align-self: start; } }
.placa { padding: var(--s-5); border-radius: var(--r-tarjeta); background: var(--dia-200); }
.placa h3 { font-family: var(--f-text); font-stretch: 100%; font-size: var(--t-4); font-weight: 600; letter-spacing: 0; margin-bottom: var(--s-3); }
.placa p { font-size: var(--t-6); color: var(--ink-2); }


/* ---------- B06 Kits: tabla editorial ---------- */
.kits-cap__entradilla .leyenda { margin-top: var(--s-5); font-size: var(--t-6); color: var(--ink-2); max-width: var(--medida); line-height: 1.9; }
.leyenda .estado { vertical-align: middle; margin-right: 2px; }
@media (min-width: 1024px) { .kits-cap__cabeza { grid-column: 1 / 6; } .kits-cap__entradilla { grid-column: 6 / 13; } }
.tabla-kits { display: grid; gap: var(--s-5); margin-top: var(--s-3); }

.kit { position: relative; display: grid; gap: 0; padding: var(--s-5); border-radius: var(--r-tarjeta); box-shadow: inset 0 0 0 1px var(--linea); background: transparent; transition: background-color var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .kit:hover { background: color-mix(in oklab, var(--dia-200) 55%, transparent); }  }
.kit:has(:focus-visible) { outline: 2px solid var(--foco); outline-offset: 4px; border-radius: var(--r-tarjeta); transition-duration: var(--d-1); }





.kit__recomendado { font-size: var(--t-label); font-weight: 600; color: var(--acento-texto); }
.kit__nombre { font-size: var(--t-3); }
.kit__precio { font-family: var(--f-display); font-stretch: 112%; font-weight: 650; font-size: clamp(1.75rem, 1rem + 1.8vw, 2.5rem); line-height: 1.05; letter-spacing: var(--ls-2); display: grid; justify-items: start; gap: 2px; font-variant-numeric: tabular-nums; }

.desde { font-family: var(--f-text); font-stretch: 100%; font-size: var(--t-5); font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.mes { font-family: var(--f-text); font-stretch: 100%; font-size: var(--t-6); font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.kit__quien { color: var(--ink-2); font-size: var(--t-6); }
.kit__promesa { font-weight: 600; font-size: var(--t-6); }










@media (min-width: 1024px) {
  .tabla-kits { grid-template-columns: minmax(220px, 1.1fr) repeat(3, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 32px); align-items: stretch; }
  
  .kit { grid-row: 1 / span 15; grid-template-rows: subgrid; }
  .kit { grid-template-columns: minmax(0, 1fr); padding: 0 var(--s-4); order: 0; box-shadow: none; border-radius: 0; }
  
  
  
  
  .kit__recomendado { position: absolute; top: var(--s-4); left: var(--s-5); }
  .kit__nombre { white-space: nowrap; }
  
  
  
  
  
}
@media (min-width: 1024px) and (max-width: 1279px) { .kit__nombre { font-size: 1.2rem; } }








/* ---------- B08 Confianza ---------- */
.confianza__cabeza .lead { margin-top: var(--s-5); }
.confianza__cta { margin-top: var(--s-6); display: grid; gap: var(--s-3); justify-items: start; }
.confianza__cta .peq { max-width: 36ch; }
.confianza__lineas { display: grid; gap: var(--s-5); }
.confianza__lineas li { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--linea); }
.confianza__lineas .ico { color: var(--acento-texto); width: 26px; height: 26px; stroke-width: 1.5; margin-top: 2px; }
.confianza__lineas strong { display: block; font-weight: 600; margin-bottom: 4px; font-size: var(--t-4); }
.confianza__lineas p { color: var(--ink-2); max-width: 46ch; }
@media (min-width: 768px) { .confianza__lineas { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--canal); } }
@media (min-width: 1024px) { .confianza__cabeza { grid-column: 1 / 5; } .confianza__lineas { grid-column: 6 / 13; } }

/* ---------- B09 Cómo trabajamos: franja ---------- */
.pasos { --fino: cubic-bezier(.2, .7, .2, 1); margin-top: var(--seccion); padding-block: var(--s-7); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.pasos h2 { font-size: var(--t-3); max-width: none; }
/* secuencia con carril de luz: cada tramo se enciende cuando el paso siguiente entra (--pp: 0 a 1, lo pone lumaq.js; por defecto 1 = estado final) */
.pasos__lista { --pp: 1; display: grid; gap: var(--s-6); margin-top: var(--s-6); max-width: 640px; }
.pasos__lista li { --seg: clamp(0, calc(var(--pp) * 2 - var(--k, 0)), 1); position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); }
.pasos__lista li:nth-child(2) { --k: 1; }
.pasos__lista li:nth-child(3) { --k: 2; }
.pasos__lista li:not(:last-child)::before, .pasos__lista li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; width: 2px; height: calc(100% - 44px + var(--s-6)); border-radius: 1px; }
.pasos__lista li:not(:last-child)::before { background: var(--linea); }
.pasos__lista li:not(:last-child)::after { background: var(--luz-grad); transform-origin: top; transform: scaleY(var(--seg)); transition: transform 320ms var(--fino); }
.pasos__lista--scrub li::after { transition: none; }
.paso__nodo { position: relative; z-index: 1; isolation: isolate; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--linea); color: var(--ink-3); font-family: var(--f-display); font-stretch: 118%; font-weight: 650; font-size: var(--t-4); line-height: 1; transition: transform 200ms var(--fino); }
.paso__nodo::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: 50%; background: var(--luz-grad); opacity: 0; transition: opacity 240ms var(--fino); }
.paso__nodo::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(244, 183, 64, .6); opacity: 0; transform: scale(.82); transition: opacity 240ms var(--fino), transform 240ms var(--fino); }
.pasos__lista li[data-estado="hecho"] .paso__nodo { border-color: var(--luz-tinta); color: var(--luz-tinta); }
.pasos__lista li[data-estado="curso"] .paso__nodo { border-color: transparent; color: var(--tinta-900); }
.pasos__lista li[data-estado="curso"] .paso__nodo::before, .pasos__lista li[data-estado="curso"] .paso__nodo::after { opacity: 1; }
.pasos__lista li[data-estado="curso"] .paso__nodo::after { transform: scale(1); }
.paso__cuerpo { display: flex; flex-direction: column; gap: var(--s-3); padding-top: 2px; min-width: 0; }
.paso__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: var(--t-label); line-height: 1.3; }




.paso__plazo { color: var(--ink-2); }
.pasos__lista h3 { font-size: var(--t-4); font-family: var(--f-text); font-stretch: 100%; letter-spacing: 0; font-weight: 650; line-height: 1.25; }
.paso__reparto { display: grid; gap: var(--s-2); }
.paso__reparto > div { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: var(--s-2); }
.paso__reparto dt { font-size: var(--t-label); font-weight: 700; color: var(--ink-3); padding-top: .12em; }
.paso__reparto dd { margin: 0; color: var(--ink-2); font-size: var(--t-6); line-height: var(--lh-4); }
.paso__recibes { margin-top: auto; display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-control); background: var(--superficie); box-shadow: inset 2px 0 0 var(--luz-ember); font-size: var(--t-6); line-height: var(--lh-4); }
.paso__recibes .ico { color: var(--luz-tinta); margin-top: 2px; }
.paso__recibes b { display: block; font-weight: 700; font-size: var(--t-label); color: var(--ink-3); letter-spacing: .02em; }
.pasos__cierre { margin-top: var(--s-6); font-weight: 600; }
.pasos__nota { margin-top: var(--s-3); max-width: 62ch; }
@media (hover: hover) and (pointer: fine) { .pasos__lista li:hover .paso__nodo { transform: translateY(-2px); } }
@media (min-width: 1024px) {
  .pasos .cont { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4) var(--canal); align-items: start; }
  .pasos h2 { grid-column: 1 / 4; }
  .pasos__cierre, .pasos__nota { grid-column: 4 / 13; margin-top: 0; }
  .pasos__lista { grid-column: 4 / 13; margin-top: 0; max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--canal); }
  .pasos__lista li { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--s-4); }
  .paso__reparto > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pasos__lista li:not(:last-child)::before, .pasos__lista li:not(:last-child)::after { left: 44px; top: 21px; width: calc(100% - 44px + var(--canal)); height: 2px; }
  .pasos__lista li:not(:last-child)::after { transform-origin: left; transform: scaleX(var(--seg)); }
}

/* ---------- B10 Dudas ---------- */
.dudas__cols { display: grid; gap: 0 var(--canal); }
@media (min-width: 1024px) { .dudas__cabeza { grid-column: 1 / 4; } .dudas__cols { grid-column: 4 / 13; grid-template-columns: 1fr 1fr; align-items: start; } }
.duda { border-top: 1px solid var(--linea); }
.dudas__cols > div .duda:last-child { border-bottom: 1px solid var(--linea); }
.duda summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 56px; padding: var(--s-3) 0; font-weight: 600; font-size: var(--t-5); }
.duda summary::-webkit-details-marker { display: none; }
.duda summary .ico { color: var(--acento-texto); transition: transform var(--d-2) var(--ease-out); }
.duda[open] summary .ico { transform: rotate(45deg); }
.duda > div { padding: 0 0 var(--s-5); color: var(--ink-2); max-width: var(--medida); }

/* ---------- B11 Formulario: la ventana de luz ---------- */
.formulario { padding-bottom: var(--seccion); overflow: clip; isolation: isolate; }
.formulario__luz { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 40% 50% at 78% 26%, rgba(244,183,64,.5) 0%, rgba(251,154,66,.2) 36%, rgba(245,246,248,0) 72%); }
.formulario .ret { position: relative; z-index: 1; }
.formulario__texto .lead { margin-top: var(--s-5); }

.formulario__ventana { padding: var(--s-5); align-self: start; }
@media (min-width: 768px) { .formulario__ventana { padding: var(--s-6); } }
@media (min-width: 1024px) { .formulario__texto { grid-column: 1 / 5; } .formulario__ventana { grid-column: 6 / 13; } }
.lead-form { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .lead-form { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--canal); } .lead-form > .campo:nth-child(5), .lead-form > .campo--consent, .lead-form > .lead-form__estado, .lead-form > .boton { grid-column: 1 / -1; } }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; font-size: var(--t-6); }
.campo__opcional { font-weight: 400; color: var(--ink-3); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--r-control); border: 1px solid var(--linea); background: var(--dia-50); color: var(--tinta-900); transition: border-color var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out); }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-500); }
@media (hover: hover) and (pointer: fine) { .campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--tinta-500); } }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline-offset: 2px; border-color: var(--luz-tinta); }
.campo textarea { min-height: 96px; resize: vertical; }
.campo [aria-invalid="true"] { border-color: var(--err); }
.campo__error { font-size: var(--t-6); color: var(--err); display: none; }
.campo__error[data-visible="true"] { display: flex; gap: 6px; align-items: flex-start; }
.campo__error .ico { width: 16px; height: 16px; margin-top: 3px; }
.campo--consent { grid-template-columns: 44px 1fr; gap: var(--s-2); align-items: start; }
.campo--consent input { -webkit-appearance: none; appearance: none; position: relative; display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; margin: -10px 0 -10px -10px; padding: 0; border: 0; background: none; cursor: pointer; }
.campo--consent input::before { content: ""; width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--ink-2); background: var(--superficie); box-sizing: border-box; }
.campo--consent input:checked::before { background: var(--luz-tinta); border-color: var(--luz-tinta); }
.campo--consent input::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 13px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translate(-50%, -62%) rotate(45deg); opacity: 0; }
.campo--consent input:checked::after { opacity: 1; }
.campo--consent label { font-weight: 400; }
.campo--consent .campo__error { grid-column: 2; }
.trampa { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.lead-form__estado { font-size: var(--t-6); color: var(--err); display: none; }
.lead-form__estado[data-visible="true"] { display: block; }
.lead-form__exito { display: none; }
.lead-form__exito[data-visible="true"] { display: block; }
.lead-form__exito h3 { margin-bottom: var(--s-4); }
.lead-form__exito p { color: var(--ink-2); }
.lead-form__exito .enlace { margin-top: var(--s-4); }
.contacto-directo { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--linea); display: grid; gap: var(--s-3); }
.contacto-directo p { font-weight: 600; }
.contacto-directo__vias { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.contacto-directo .enlace { padding-block: 12px; }

/* ---------- B12 Pie compacto en tinta ---------- */
.pie { padding: var(--s-7) 0 var(--s-5); }
.pie__cols { display: grid; gap: var(--s-6); }
@media (min-width: 768px) { .pie__cols { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: var(--canal); } }
.pie__marca p { margin-top: var(--s-3); color: var(--ink-2); max-width: 28ch; font-size: var(--t-6); }
.pie h3 { font-family: var(--f-text); font-stretch: 100%; font-size: var(--t-6); letter-spacing: 0; font-weight: 600; margin-bottom: var(--s-2); color: var(--ink-2); }
.pie ul { display: grid; gap: 0; }
.pie__ir ul { grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .pie__ir ul { grid-template-columns: 1fr; } }
.pie a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-6); }
@media (hover: hover) and (pointer: fine) { .pie a:hover { text-decoration: underline; } }
.pie a.boton { text-decoration: none; min-height: 44px; margin: var(--s-2) 0; }
.pie .enlace { color: var(--luz-ambar); }
.pie__legal { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--linea); display: grid; gap: var(--s-2); font-size: var(--t-6); color: var(--ink-2); }
.pie__legal ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.pie mark.marcador { color: var(--luz-ambar); }

/* ---------- Ola 3 · sistema de oficio: curva fina, hover real, prensa .97 ---------- */
:root { --fino: cubic-bezier(.2, .7, .2, 1); }

/* ---------- Imágenes de banco: marco de luz, etiqueta visible, pausa ---------- */
.banco { margin: 0; position: relative; min-width: 0; }
.banco__marco { position: relative; aspect-ratio: var(--ar, 16 / 9); overflow: hidden; isolation: isolate; border-radius: var(--r-escena); background: color-mix(in oklab, var(--luz-ambar) 16%, var(--dia-200)); box-shadow: var(--borde-luz), var(--sombra-larga); }
.banco__marco picture, .banco__marco img, .banco__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.banco__marco img, .banco__video { object-fit: cover; object-position: var(--pos, 50% 50%); }
.banco__video { opacity: 0; transition: opacity var(--d-3) var(--fino); }
.banco__video[data-activo="true"] { opacity: 1; }
/* borde de luz fino y un resplandor de esquina: la luz viene de arriba a la derecha */
.banco__marco::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 236, 196, .55), inset 1px 1px 0 rgba(255, 255, 255, .6); }
/* la etiqueta "Imagen de banco" va bajo la imagen, en el pie de figura (nunca superpuesta) */
.banco__etq { display: block; margin-top: var(--s-2); font-size: var(--t-label); font-weight: 600; line-height: 1.3; color: var(--ink-2); }
.banco__pausa { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: rgba(21, 27, 39, .9); color: var(--dia-50); transition: transform var(--d-1) var(--fino), background-color var(--d-2) var(--fino); }
.banco__pausa[hidden] { display: none; }
.banco__pausa:active { transform: scale(.97); }
.banco__pausa:focus-visible { outline: 3px solid var(--luz-ambar); outline-offset: 2px; box-shadow: 0 0 0 2px var(--noche-800); border-radius: 50%; }
.banco__pausa .ico { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .banco__pausa:hover { background: var(--noche-600); } }
.banco--16x9 { --ar: 16 / 9; }  .banco--4x3 { --ar: 4 / 3; } .banco--3x2 { --ar: 3 / 2; } 

/* Proyectos: la banda de banco queda bajo la ficha de Framar y a la izquierda de la placa */

@media (min-width: 1024px) {
  .proyectos .proyectos__cabeza { grid-row: 1; }
  .proyectos .ficha { grid-row: 2; }
  
  .proyectos .piezas { grid-row: 4; }
  .proyectos .placa { grid-row: 3 / span 2; }
}
.pieza { transition: border-color var(--d-2) var(--fino); }

@media (hover: hover) and (pointer: fine) { .pieza:hover { border-bottom-color: var(--luz-tinta); } }
.pieza .enlace:active, .ficha__texto .boton:active { transform: scale(.97); }

/* Confianza (B08): cada línea lleva a su ancla en /confianza; alturas iguales; la imagen cierra la columna del titular */
.confianza__cabeza .banco--conf { margin-top: var(--s-6); max-width: 440px; }
.confianza__lineas li { position: relative; transition: border-color var(--d-2) var(--fino); }
.confianza__lineas strong a { text-decoration: none; color: var(--ink); }
.confianza__lineas strong a::after { content: ""; position: absolute; inset: 0; }
.confianza__lineas strong a:focus-visible { outline: none; }
.confianza__lineas li:has(strong a:focus-visible) { outline: 3px solid var(--foco); outline-offset: 6px; border-radius: 6px; }

@media (hover: hover) and (pointer: fine) { .confianza__lineas li:hover { border-top-color: var(--luz-tinta); } .confianza__lineas li:hover strong a { text-decoration: underline; text-underline-offset: .2em; } }

/* Dudas (B10): una columna de lectura, las tres que más bloquean con su primera línea a la vista, apertura con transición */
:root { interpolate-size: allow-keywords; }
@media (min-width: 1024px) { .dudas__cols { grid-template-columns: minmax(0, 1fr); } }
.dudas__cols > div:first-child .duda:last-child { border-bottom: 0; }
.duda summary { transition: color var(--d-2) var(--fino); }
.duda__q { display: grid; gap: 2px; min-width: 0; }
.duda__adelanto { font-weight: 400; font-size: var(--t-6); color: var(--ink-2); }
.duda[open] .duda__adelanto { display: none; }
.duda summary .ico { transition: transform var(--d-2) var(--fino); }
.duda > div a { color: var(--acento-texto); font-weight: 600; }
@supports selector(::details-content) {
  .duda::details-content { block-size: 0; overflow: hidden; transition: block-size var(--d-3) var(--fino), content-visibility var(--d-3) var(--fino) allow-discrete; }
  .duda[open]::details-content { block-size: auto; }
}
.duda--abre-ya { scroll-margin-top: calc(var(--cabecera) + 16px); }

/* Formulario (B11): chip de elección, enviando, éxito sin salto, qué pasa después, garantías */
.elegido { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); padding: 4px 4px 4px 14px; border-radius: var(--r-control); background: color-mix(in oklab, var(--luz-ambar) 16%, var(--dia-100)); box-shadow: inset 0 0 0 1px rgba(158, 63, 14, .35); font-size: var(--t-6); }
.elegido[hidden] { display: none; }
.elegido:not([hidden]) { animation: aparece var(--d-3) var(--fino) both; }
.elegido__quita { min-height: 44px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-control); background: none; color: var(--acento-texto); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; transition: transform var(--d-1) var(--fino); }
.elegido__quita:active { transform: scale(.97); }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.giro { display: none; width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.boton[aria-busy="true"] { cursor: progress; }
.boton[aria-busy="true"] .giro { display: inline-block; animation: giro 700ms linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
.lead-caja { position: relative; }
.lead-form[hidden] { display: none; }
.lead-caja:has(.lead-form__exito[data-visible="true"]) { display: grid; align-content: center; }
.campo { align-content: start; }
.lead-form__exito[data-visible="true"] { animation: aparece var(--d-2) var(--fino) both; }
.lead-form__estado[data-visible="true"] { padding: var(--s-3) var(--s-4); border-radius: var(--r-control); box-shadow: inset 0 0 0 1px currentColor; }
.lead-form__estado a { color: inherit; font-weight: 600; }
.despues { grid-column: 1 / -1; display: grid; gap: 6px; padding-top: var(--s-2); counter-reset: despues; font-size: var(--t-6); color: var(--ink-2); }
.despues li { display: flex; gap: 10px; align-items: flex-start; counter-increment: despues; }
.despues li::before { content: counter(despues); display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--luz-tinta); color: var(--luz-tinta); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.garantias { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--linea); font-size: var(--t-label); font-weight: 600; }
@media (min-width: 1024px) { .garantias { flex-wrap: nowrap; justify-content: space-between; } }
.campo input { text-overflow: ellipsis; }
.garantias li { display: inline-flex; align-items: center; gap: 8px; }
.garantias .ico { width: 18px; height: 18px; color: var(--ok); stroke-width: 2.2; }
/* el final de la página termina a plena luz: el halo del hero reaparece detrás del formulario */
.formulario__luz { background: radial-gradient(ellipse 54% 66% at 74% 32%, rgba(244, 183, 64, .55) 0%, rgba(251, 154, 66, .22) 38%, rgba(245, 246, 248, 0) 74%); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .formulario__luz { animation: halo-entra linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    @keyframes halo-entra { from { opacity: 0; } to { opacity: 1; } }
  }
}

/* Pie (B12): cuatro columnas, estado en una línea, la fachada apagada como sello */
.pie__cols { display: grid; gap: var(--s-6); }
@media (min-width: 768px) { .pie__cols { grid-template-columns: 1.3fr 1.2fr 1fr 1fr; gap: var(--canal); } }
.pie__ir ul { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
.pie__sello { display: block; margin-top: var(--s-5); opacity: .95; }
.pie__legal { grid-template-columns: minmax(0, 1fr); }

/* ---------- Entradas: cortes desde la luz (nunca fade genérico por sección) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .capitulo h2, .pasos h2 { animation: corte-arriba var(--d-4) var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
    .ventana, .ficha__capturas, .placa { animation: corte-luz var(--d-4) var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    @keyframes corte-arriba { from { clip-path: inset(0 0 100% 0); transform: translateY(12px); } to { clip-path: inset(0 0 -6% 0); transform: none; } }
    @keyframes corte-luz { from { clip-path: inset(0 0 0 100% round var(--r-tarjeta)); } to { clip-path: inset(-8% -8% -8% -8% round var(--r-tarjeta)); } }
  }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .mensajes--hero > *, .telefono__aviso, .panel-menu nav li { opacity: 1; animation: none; }
  .telefono[data-conv] .mensajes--hero > *, .telefono[data-conv] .telefono__aviso { opacity: 1; animation: none; }
  .burbuja--escribiendo { display: none !important; }
  .hero h1 [data-linea], .hero [data-hero-sub], .hero [data-hero-ctas], .hero h1 .luz::before { animation: none; opacity: 1; filter: none; clip-path: none; transform: none; }
  .telefono, .telefono__aviso, .hero__luz { transform: none !important; }
  
  .cabecera, .rail { transition: none; }
  .duda::details-content { transition: none; }
  html { scroll-behavior: auto; }
}

/* móvil: párrafo y lista a 16 px; 14 px solo metadatos (estados, horas, etiquetas) */
@media (max-width: 767px) {
  .mensajes--hero .burbuja, .mensajes--hero { font-size: 1rem; }
  .burbuja__quien, .burbuja__hora, .mensajes--hero .burbuja__quien, .mensajes--hero .mensajes__hora, .telefono__pantalla .etiqueta-demo, .telefono__cabeza .peq, .estado, .luz-etapas h3 .estado, .luz-figura figcaption, .telefono__aviso { font-size: 14px; }
}

/* =====================================================================
   CICLO 2 (afilado): una sola idea, la ventana encendida / la luz con origen.
   Todo lo de abajo manda sobre lo anterior; está agrupado para poder revertirlo.
   ===================================================================== */

/* 1 · Un solo mundo de imagen: misma temperatura, mismo radio y misma sombra larga con offset que la fachada */
:root { --sombra-escena: -24px 44px 84px -30px rgba(21,27,39,.5), 0 2px 4px rgba(21,27,39,.08); }
.luz-escena { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), var(--sombra-escena); }
.banco__marco { border-radius: var(--r-escena); box-shadow: var(--sombra-escena); }
/* la captura de Framar (cliente real, oscura) entra en el mismo sistema: marco claro, mismo radio, misma sombra */
.ficha__escritorio { border: 8px solid var(--dia-100); border-radius: var(--r-escena); background: var(--dia-100); box-shadow: var(--sombra-escena); }
.ficha__movil { border: 5px solid var(--dia-100); border-radius: 22px; background: var(--dia-100); box-shadow: var(--sombra-escena); }
/* sin la tira de banco, la placa del piloto se coloca junto a las piezas */
@media (min-width: 1024px) { .proyectos .piezas { grid-row: 3; } .proyectos .placa { grid-row: 3; } }

/* 2 · B03: las ocho etapas se dibujan con el mismo ámbar sólido */
.fv .on7, .fv .on8 { --tenue: 1; }
.fv .on7 { opacity: calc(var(--e7) * (1 - var(--dia)) * var(--tenue)); }
.fv .on8 { opacity: calc(var(--e8) * (1 - var(--dia)) * var(--tenue)); }

/* los cortes de entrada no pueden recortar la sombra larga de la escena */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes corte-luz { from { clip-path: inset(0 0 0 100% round var(--r-tarjeta)); } to { clip-path: inset(-40% -40% -60% -40% round var(--r-tarjeta)); } }
  }
}

/* 4 · Hero: una promesa (la de B00); lo que antes era el segundo subtítulo es microcopy bajo los botones */
.hero__sub { margin-top: var(--s-5); max-width: 40ch; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .hero .hero__sub { animation-delay: .72s; }
}
/* sin los ~100 px muertos bajo el teléfono: el hero mide lo que mide su contenido y el pie del siguiente bloque asoma */
@media (min-width: 1024px) { .hero { min-height: 0; padding-bottom: var(--s-6); } }
/* móvil: el teléfono asoma por abajo (360 px: cabecera, primer mensaje, "Asistente con IA"); el marco y la pantalla se desvanecen, el aviso de Marta queda nítido encima */
@media (max-width: 767px) {
  .telefono { height: 360px; background: none; box-shadow: none; border-radius: 42px 42px 0 0; padding: 9px 9px 0; }
  .telefono::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 42px 42px 0 0; background: #1A2130; box-shadow: inset 1px 1px 0 rgba(255,236,200,.5), 1px -1px 0 1px rgba(244,183,64,.28); -webkit-mask-image: linear-gradient(#000 70%, transparent 100%); mask-image: linear-gradient(#000 70%, transparent 100%); }
  .telefono__pantalla { position: relative; z-index: 1; border-radius: 34px 34px 0 0; -webkit-mask-image: linear-gradient(#000 70%, transparent 100%); mask-image: linear-gradient(#000 70%, transparent 100%); }
  .telefono__aviso { z-index: 2; left: 2%; bottom: 14px; }
}

/* 5 · Mitad baja: un solo motivo, la ventana encendida (misma pieza en confianza y en pasos) */
.ico--ventana { color: var(--luz-tinta); stroke-width: 1.5; overflow: visible; filter: drop-shadow(-3px 5px 7px rgba(244, 183, 64, .55)); }
.ico--ventana .vt-luz { fill: var(--luz-ambar); }
.confianza__lineas { grid-auto-rows: auto; align-items: start; align-content: start; }
.confianza__lineas .ico--ventana { width: 28px; height: 28px; }
.pasos h2 { font-size: var(--t-2); max-width: var(--medida-h2); }
.paso__nodo { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 0; background: none; color: var(--ink); }
.paso__nodo::before, .paso__nodo::after { display: none; }
.paso__nodo .ico--ventana { position: absolute; inset: 0; width: 44px; height: 44px; }
.paso__n { position: relative; z-index: 1; font-family: var(--f-display); font-stretch: 118%; font-weight: 700; font-size: 15px; line-height: 1; color: var(--tinta-900); }
.pasos__lista li .paso__nodo { transform: none; }
.duda summary { font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem); }

/* 9 · Pie claro (D7, "tonos claros principalmente").
   ponytail: pie claro por D7. Para volver al pie oscuro: data-suelo="noche" en <footer class="pie"> y el sello oscuro de lumaq.antes.css.
   Regla del pie oscuro (comentada): footer.pie[data-suelo="noche"] { background: var(--noche-800); color: var(--papel); } */
.pie[data-suelo="dia"] { --bg: var(--dia-200); --superficie: var(--dia-100); background: var(--dia-200); color: var(--ink); border-top: 1px solid var(--linea); }
.pie .enlace { color: var(--acento-texto); }
.pie mark.marcador, .pagina .pie mark.marcador { color: var(--luz-tinta); background: none; }

/* 3 · Móvil corto */
:root { --seccion: clamp(48px, 8vw, 96px); }

@media (max-width: 767px) {
  .pie { padding-top: var(--s-6); }
  .pie__cols { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .pie__marca { grid-column: 1 / -1; }
  .pie__ir { grid-column: 1; grid-row: 2; }
  .pie__legales { grid-column: 2; grid-row: 2; }
  .pie__contacto { grid-column: 1 / -1; grid-row: 3; }
  .pie__ir ul { grid-template-columns: 1fr; }
  .pie a { min-height: 40px; }
  .pie__sello { display: none; }
  /* tipografía móvil: 16 px en todo salvo el mock del teléfono y el texto del dibujo de la fachada */
  .telefono__pantalla .etiqueta-demo { font-size: 14px; }
  .burbuja__quien, .burbuja__hora, .estado, .luz-etapas h3 .estado, .luz-etapas .n, .luz-figura figcaption, .kit__recomendado, .peq, .paso__reparto dt, .paso__plazo, .paso__recibes b, .paso__n, .aviso__etq, .banco__etq, .fila__estado, .leyenda, .ficha__media figcaption, .desde, .mes, .despues li, .quiz__tecla, .etiqueta-demo, .mensaje-sistema, .demo-chat__hora { font-size: 1rem; }
  /* hero < 1.000 px */
  .hero { padding-top: calc(var(--cabecera) + var(--s-4)); }
  .hero__ctas { margin-top: var(--s-4); }
  .hero__objeto { margin-top: var(--s-2); }
  .telefono__aviso { bottom: -12px; }
}

/* 7 · Demo: panel de Marta pegajoso y fila viva */
@media (min-width: 1200px) { .demo-chat__marta { top: calc(var(--cabecera) + 16px); } }
.panel-filas { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.panel-filas:empty { display: none; }
.fila { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px var(--s-3); padding: 12px 14px; border-radius: var(--r-control); background: var(--dia-100); box-shadow: inset 0 0 0 1px var(--linea); font-size: var(--t-6); }
.fila .aviso__etq { grid-column: 1 / -1; margin: 0; }
.fila__estado { padding: 3px 10px; border-radius: var(--r-etiqueta); font-weight: 700; font-size: var(--t-label); background: color-mix(in oklab, var(--luz-ambar) 35%, var(--dia-100)); color: var(--tinta-900); transition: background-color var(--d-3) var(--ease-out), color var(--d-3) var(--ease-out); }
.fila[data-estado="confirmada"] .fila__estado { background: color-mix(in oklab, var(--ok) 14%, var(--dia-100)); color: var(--ok); }
@media (prefers-reduced-motion: no-preference) { .fila { animation: burbuja var(--d-3) var(--ease-out) both; } }

/* móvil corto (cont.) */





@media (max-width: 767px) {
  :root { --lh-5: 1.5; }
  .ret { row-gap: var(--s-5); }
  
  
  .dolor { padding-block: var(--s-4); }
  .dolores__cierre { margin-top: var(--s-6); }
  .pieza { grid-template-columns: 1fr auto; align-items: center; }
  .pieza h3 { grid-column: 1; grid-row: 1; }
  .pieza .enlace { grid-column: 2; grid-row: 1; }
  
  .pieza p { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 767px) {
  
  .garantias { display: none; }
  .pasos__lista { gap: var(--s-5); }
}
@media (max-width: 767px) { .luz-recorrido { height: 185vh; } }
/* móvil: el mock del teléfono mantiene el cuerpo del mensaje a 14 px (es una captura de producto) para que quepan cabecera, mensaje y "Asistente con IA" en 360 px */
@media (max-width: 767px) {
  .mensajes--hero, .mensajes--hero .burbuja { font-size: 14px; }
  .mensajes--hero .burbuja__quien, .mensajes--hero .mensajes__hora, .telefono__cabeza .peq { font-size: 13px; }
  .mensajes--hero { gap: 8px; }
  .telefono__pantalla { padding-top: 44px; -webkit-mask-image: linear-gradient(#000 78%, transparent 100%); mask-image: linear-gradient(#000 78%, transparent 100%); }
  .telefono::before { -webkit-mask-image: linear-gradient(#000 78%, transparent 100%); mask-image: linear-gradient(#000 78%, transparent 100%); }
}
@media (max-width: 767px) { .telefono__aviso .aviso__det { display: none; } .telefono__aviso { bottom: 6px; } .telefono__aviso strong { margin-bottom: 0; } }


/* =====================================================================
   CICLO 3 (afilado): la foto de banco entra en el sistema de luz, la mitad baja hereda la ventana,
   la demo traza la luz hasta el panel, y el estado 7-8 se ve también de día.
   Agrupado para poder revertirlo (copia previa en .lumaq/evidencias/F4-afilado/c3/*.antes.*).
   ===================================================================== */

/* 1 · Imagen, un solo mundo: la gradación cálida común está en cada fichero (assets/pack/banco, procesar.py), no en un filtro.
   Ciclo 5b O2: se retiran el duotono SVG #duo y los lavados de color superpuestos, que convertían las fotos en navy/crema. */

/* 2 · Kits: un carril de luz por kit. Cada función es una ventana del mismo edificio:
   encendida = incluido y disponible · trazo discontinuo = piloto o en desarrollo · apagada = no incluido.
   La información sigue en el texto (etiqueta, "Disponible" / "No incluido" y la píldora de estado). */






[data-e="p"] .ico--ventana, [data-e="v"] .ico--ventana { fill-opacity: .3; filter: none; }
[data-e="n"] .ico--ventana { fill-opacity: 0; filter: none; color: #76819A; }



/* clave de lectura en la celda vacía de la tabla (solo escritorio; la tabla ya está oculta al lector de pantalla) */





/* 2b · Confianza: sin la foto, cuatro celdas de igual altura con el contenido arriba y la ventana como viñeta */
@media (min-width: 768px) { .confianza__lineas { grid-auto-rows: 1fr; align-items: stretch; } }
.confianza__lineas li { align-content: start; }

/* 4 · Objetivos táctiles ≥ 44 px de alto sin añadir altura de página: el relleno se compensa con margen negativo
   (el enlace de cada línea de confianza cubre ya toda la celda con ::after) */
.confianza__lineas strong a { display: block; padding-block: 11px; margin-block: -11px; }
.pie a { min-height: 44px; }
.campo--consent label a, .campo--consent a { padding-block: 12px; }
@media (max-width: 767px) { .pie a { min-height: 44px; } }

/* 5 · Fachada: el estado 7-8 ("En desarrollo") se lee también de día. Trazo discontinuo de 2 px (no escala con el dibujo),
   ámbar de noche y tinta-ámbar de día (≥ 3:1 sobre el muro vecino y sobre el rótulo diurnos); sin relleno: no hay nada encendido todavía. */
.fv polygon.on7.vec, .fv polygon.on8.rot-luz { stroke: none; }
.fv .tz7, .fv .tz8 { fill: none; stroke: color-mix(in oklab, var(--luz-ambar) var(--n), var(--luz-tinta)); stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.fv .tz7 { opacity: var(--e7); }
.fv .tz8 { opacity: var(--e8); }
/* transición día/noche limpia: el cielo y el edificio pasan por la hora azul (azul profundo arriba, horizonte cálido) en vez de por un gris-marrón.
   Dos tramos: noche → hora azul (dia 0 a .5) y hora azul → día (dia .5 a 1). */
.fv { --na: calc(clamp(0, 1 - var(--dia) * 2, 1) * 100%); --nb: calc(clamp(0, 2 - var(--dia) * 2, 1) * 100%); }
.k-cielo-a { stop-color: color-mix(in oklab, color-mix(in oklab, #0A0E16 var(--na), #1D3E78) var(--nb), #CBDCEE); }
.k-cielo-b { stop-color: color-mix(in oklab, color-mix(in oklab, #18202F var(--na), #3A68A8) var(--nb), #E6EEF7); }
.k-cielo-c { stop-color: color-mix(in oklab, color-mix(in oklab, #2A3550 var(--na), #C8977A) var(--nb), #F5F6F8); }
.k-lejos { fill: color-mix(in oklab, color-mix(in oklab, #10151F var(--na), #2A4068) var(--nb), #C4CFDD); }
.k-muro-a { stop-color: color-mix(in oklab, color-mix(in oklab, #28334C var(--na), #3A4D84) var(--nb), #E9ECF1); }
.k-muro-b { stop-color: color-mix(in oklab, color-mix(in oklab, #161D2D var(--na), #243764) var(--nb), #D6DBE4); }
.k-vec-a { stop-color: color-mix(in oklab, color-mix(in oklab, #131A27 var(--na), #3B4C72) var(--nb), #D2D8E2); }
.k-vec-b { stop-color: color-mix(in oklab, color-mix(in oklab, #0D121C var(--na), #2D3C5C) var(--nb), #C3CAD6); }
.k-acera-a { stop-color: color-mix(in oklab, color-mix(in oklab, #2A3345 var(--na), #3A4D72) var(--nb), #DDE1E8); }
.k-acera-b { stop-color: color-mix(in oklab, color-mix(in oklab, #171C28 var(--na), #2A3958) var(--nb), #C9CFD9); }
.k-calle-a { stop-color: color-mix(in oklab, color-mix(in oklab, #151A24 var(--na), #26344F) var(--nb), #B7BFCB); }
.k-calle-b { stop-color: color-mix(in oklab, color-mix(in oklab, #0B0E14 var(--na), #1B2740) var(--nb), #9EA7B6); }
.fv .on-fa { opacity: calc(var(--fa) * clamp(0, 1 - var(--dia) * 2, 1)); }

/* 3 · Demo, segundo momento firma: el panel de Marta se ve abierto también en móvil y un trazo de luz une la última
   burbuja del cliente con la fila "21:47 · Cliente nuevo" (decorativo: la información está en el texto). */
.demo-chat { position: relative; }
.demo-traza { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; }
.demo-traza:not([data-on="true"]) { visibility: hidden; }
.demo-traza path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.demo-traza__halo { stroke: rgba(244, 183, 64, .38); stroke-width: 6; }
.demo-traza__linea { stroke: #D9631A; stroke-width: 2; }
.demo-traza__punto { fill: #D9631A; stroke: rgba(244, 183, 64, .5); stroke-width: 7; paint-order: stroke; }
/* panel compacto en móvil: solo la fila viva y los avisos de esta conversación (los dos avisos de ejemplo se quedan en escritorio) */
@media (max-width: 767px) {
  .demo-chat__marta { padding: var(--s-2) var(--s-5) var(--s-4); }
  .demo-chat__marta > .peq, .demo-chat__marta summary .peq { display: none; }
  .demo-chat__marta .aviso--ejemplo { display: none; }
  .demo-chat__marta .avisos:not(:has(.aviso--nuevo)) { display: none; }
  .panel-filas { margin-top: var(--s-1); }
  /* reserva la fila viva (69 px, medidos a 360-767 px): al arrancar la demo empujaba la sección siguiente 73 px */
  .panel-filas:empty { display: block; min-block-size: 69px; }
  .fila { padding: 8px 12px; }
}

/* 4b · Fachada a 390: 12 px de aire entre el pie de figura y la lista de etapas */
@media (max-width: 1023px) { .luz-figura figcaption { margin-bottom: 12px; } }
/* la fila viva se enciende al llegar la luz (una vez, sin mover nada) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fila-luz { 0%, 35% { box-shadow: inset 0 0 0 1.5px var(--luz-ember), 0 0 0 6px rgba(244, 183, 64, .32); } 100% { box-shadow: inset 0 0 0 1px var(--linea); } }
  .fila { animation: burbuja var(--d-3) var(--ease-out) both, fila-luz 900ms var(--ease-out) 560ms both; }
}
@media (max-width: 767px) { .luz-escena { min-height: 200px; } }
@media (max-width: 767px) and (max-height: 720px) { .luz-escena { min-height: 150px; } }

/* F4-3b · oficio: CTA de kits en una línea, nav sin partir, objetivo táctil del pie
   (fuente: auditoría independiente F4-pares/CICLO-3.md, TOP5 #1; criterio = 1 línea medida con rangos de texto a 1440/1280/1024) */

@media (min-width: 1024px) {
  /* la columna mide 178-234 px: la frase completa no cabe; la cola sigue en el nombre accesible, no en pantalla */
  
  .nav-principal a { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .nav-principal ul { gap: var(--s-2); }
  .cabecera__cta { padding-inline: var(--s-3); }
}
.pie a { min-width: 44px; }



/* ---------- Ciclo 4 ----------
   1) Cabeceras apiladas (titular arriba, párrafo debajo, 65ch). Ninguna cabecera partida: ninguna lleva elemento visual en la columna derecha.
   2) Dolores: sin hora suelta; titular y párrafo apilados.
   3) Ritmo tonal con los tokens --dia-*: claro, hundido y UNA franja con lavado ámbar muy suave. Acento de texto solo --luz-tinta; el ámbar es luz, nunca texto. */
.sistema__titulo, .sistema__entradilla, .kits-cap__cabeza, .kits-cap__entradilla { grid-column: 1 / -1; }
.sistema__cabeza { align-items: start; row-gap: var(--s-4); }
.sistema__entradilla .lead, .kits-cap__entradilla .lead { max-width: 65ch; }
.kits-cap__entradilla .leyenda { max-width: 65ch; }
.kits-cap__plazos { margin-top: var(--s-4); font-size: var(--t-6); font-weight: 600; color: var(--ink); max-width: 65ch; }
.kits-cap__plazos + .leyenda { margin-top: var(--s-4); }
.dolor, .dolor h3, .dolor p { grid-column: auto; }
@media (min-width: 768px) {
  .dolor { grid-template-columns: minmax(0, 1fr); }
  .dolor h3, .dolor p { grid-column: 1 / -1; padding-top: 0; }
}
@media (min-width: 1024px) { .dolor { grid-template-columns: minmax(0, 1fr); } }
.dolor h3 { max-width: 26ch; }
.dolor p { max-width: 52ch; }

.pasos[data-suelo="dia"] {
  --bg: #FCFCFD; --superficie: #FFFFFF; --superficie-2: var(--dia-50);
}
/* ritmo tonal (ciclo 11): Dolores y Proyectos llevan una luz calida en una esquina, como Confianza pero mas suave, para que las bandas de fondo se distingan sin salir de la paleta clara. Fuente: medicion del ciclo 11 (bandas alternas a 1,0-1,055:1). */
.dolores[data-suelo="dia"], .proyectos[data-suelo="dia"] {
  --bg: #FCF9F1; --superficie: #FFFFFF; --superficie-2: #F8F1E1; --linea: #E8DDC6;
  background: radial-gradient(ellipse 65% 80% at 6% 0%, rgba(255,217,138,.30) 0%, rgba(244,183,64,.09) 46%, rgba(244,183,64,0) 72%), #FCF9F1;
}
.proyectos[data-suelo="dia"] { background: radial-gradient(ellipse 65% 80% at 94% 0%, rgba(255,217,138,.30) 0%, rgba(244,183,64,.09) 46%, rgba(244,183,64,0) 72%), #FCF9F1; }
.demo[data-suelo="dia"], .dudas[data-suelo="dia"] {
  --bg: var(--dia-200); --superficie: var(--dia-100); --superficie-2: var(--dia-50); --linea: #CBD2DD;
}
.confianza[data-suelo="dia"] {
  --bg: #FCF7EC; --superficie: #FFFFFF; --superficie-2: #F7EFDD; --linea: #E6D9BD;
  background: radial-gradient(ellipse 70% 90% at 92% 0%, rgba(255,217,138,.34) 0%, rgba(244,183,64,.10) 45%, rgba(244,183,64,0) 72%), #FCF7EC;
}
/* puntos de progreso del rail móvil: eran decorativos (aria-hidden, sin acción). Se ocultan; el carril de escritorio sí navega y lleva nombre accesible */
.rail__luces { display: none; }

/* =====================================================================
   CICLO 5b · OLA 2: fotografía de banco en la home (hero, confianza) y etiqueta bajo la imagen.
   El Sistema y Dolores viven en pegado.css (medio pegado).
   ===================================================================== */
.hero__foto { width: 100%; max-width: 440px; justify-self: start; }
@media (max-width: 767px) { .hero__foto { --ar: 16 / 10; } }
@media (min-width: 1024px) {
  /* foto y móvil comparten celda: la foto a la izquierda, el móvil a la derecha y por encima, sin tapar la cara */
  .hero__texto { grid-column: 1 / 7; }
  .hero__objeto { grid-column: 7 / -1; justify-items: stretch; align-items: start; }
  .hero__objeto > * { grid-area: 1 / 1; }
  .hero__foto { align-self: center; margin-top: 56px; z-index: 0; max-width: clamp(300px, 31vw, 440px); }
  .telefono { justify-self: end; z-index: 1; width: clamp(280px, 22.5vw, 324px); }
}
.confianza .banco--conf { max-width: 440px; }

/* ===== CICLO 6a · T2: sin cajas vacías mientras llega la foto =====
   Fondo del contenedor = color medio de cada foto (medido con Pillow sobre la pieza de 780 px, 64x64, media RGB).
   Las imágenes tienen width/height (alto reservado); solo la primera capa visible (hero) es eager + fetchpriority high. */
.hero__foto .banco__marco { background: #a99a84; }
.dolores__cuerpo .pegado__marco { background: #bba893; }
.confianza .banco--conf .banco__marco { background: #c7b499; }
.ficha__escritorio { background-color: #3e291c; }
.ficha__movil { background-color: #4a2910; }

/* ===== CICLO 6a · T6: Lo que pasa hoy sin recorrido pegado (una sola foto: ya no hay escenas que cambiar) ===== */
.dolores__cuerpo { display: grid; gap: var(--s-4) var(--canal); margin-top: var(--s-5); }
.dolores__cuerpo .pegado__escena { margin: 0; min-width: 0; }
.dolores__cuerpo .pegado__marco { aspect-ratio: 16 / 10; }
.dolores__cuerpo .dolores__lista { margin-top: 0; }
.dolores__cuerpo .dolor { padding-block: var(--s-4); }
@media (min-width: 1024px) {
  .dolores__cuerpo { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .dolores__cuerpo .pegado__escena { grid-column: 1 / 6; }
  .dolores__cuerpo .pegado__marco { aspect-ratio: 4 / 3; }
  .dolores__cuerpo .dolores__lista { grid-column: 7 / 13; }
}
.dolores__cuerpo .dolor h3 { font-size: var(--t-3); line-height: var(--lh-3); letter-spacing: var(--ls-3); max-width: 30ch; text-wrap: balance; }
.dolores__cuerpo .dolor p { font-size: var(--t-5); line-height: var(--lh-5); }
@media (min-width: 1024px) { .dolores__cuerpo .pegado__escena { align-self: center; } }
/* aire entre capítulos de la home (Pablo, 19-oct: "se ve muy denso"); la hoja de interiores no cambia */
body:not(.pagina) { --seccion: clamp(72px, 9vw, 144px); }
body:not(.pagina) .dolores__cierre { margin-top: var(--s-7); padding-bottom: var(--s-5); }
/* T6 móvil: compactar sin quitar contenido (todo lo que sigue solo en la home y por debajo de 768 px) */
@media (max-width: 767px) {
  /* el móvil de muestra del hero repite la conversación de la sección Demo, que va debajo: en pantalla estrecha se omite */
  body:not(.pagina) .hero__objeto .telefono { display: none; }
  body:not(.pagina) .dolores__cuerpo .pegado__marco { aspect-ratio: 16 / 9; }
  body:not(.pagina) .confianza .banco--conf { --ar: 21 / 9; }
  body:not(.pagina) .duda__adelanto { display: none; }
  body:not(.pagina) .pasos { padding-block: var(--s-6); }
  body:not(.pagina) .pasos__lista { gap: var(--s-5); margin-top: var(--s-5); }
  body:not(.pagina) .paso__cuerpo { gap: var(--s-2); }
  body:not(.pagina) .paso__recibes { padding: var(--s-2) var(--s-3); }
  body:not(.pagina) .pieza { padding-block: var(--s-3); }
  body:not(.pagina) .placa { padding: var(--s-4); }
  body:not(.pagina) .quiz__op { min-height: 48px; padding-block: 8px; }
  body:not(.pagina) .quiz__opciones { gap: var(--s-2); }
}
@media (max-width: 767px) {
  body:not(.pagina) { --seccion: 64px; }
  body:not(.pagina) .duda summary { min-height: 52px; padding-block: var(--s-2); }
  body:not(.pagina) .lead-form { gap: var(--s-3); }
  body:not(.pagina) .campo textarea { min-height: 72px; }
}
@media (max-width: 767px) {
  body:not(.pagina) .dolores__cuerpo .dolor { padding-block: var(--s-3); }
  body:not(.pagina) .pasos__lista { gap: var(--s-4); }
  body:not(.pagina) .pie { padding-top: var(--s-6); }
  body:not(.pagina) .ficha__texto .boton { margin-top: var(--s-4); }
  body:not(.pagina) .formulario { padding-bottom: var(--s-7); }
}
@media (max-width: 767px) {
  body:not(.pagina) .confianza__lineas { gap: var(--s-4); }
  body:not(.pagina) .confianza__lineas li { padding-top: var(--s-3); }
  body:not(.pagina) .quiz__op { min-height: 44px; }
  body:not(.pagina) .piezas .pieza { gap: var(--s-1) var(--canal); }
  body:not(.pagina) .proyectos__cabeza + .ficha { margin-top: var(--s-5); }
}
@media (max-width: 767px) {
  body:not(.pagina) .hero__foto { --ar: 16 / 9; }
  body:not(.pagina) .dolores__cuerpo .pegado__marco { aspect-ratio: 2 / 1; }
  body:not(.pagina) .pie__legal { margin-top: var(--s-4); }
  body:not(.pagina) .duda summary { min-height: 48px; }
}

/* ===== CICLO 7-2b · T1: titular en dos pesos y foto del hero legible =====
   Primera frase en display grande; la promesa larga en el escalón h3 para que el titular entero quepa sin hacerse un muro.
   El teléfono ya no tapa la foto: la foto mide el ancho de la celda menos el del teléfono más un solape corto de 56 px. */
.hero h1 .linea:first-child > span { font-size: clamp(2.5rem, 1rem + 4.3vw, 4.5rem); }
.hero h1 .linea--resto { margin-top: var(--s-3); }
.hero h1 .linea--resto > span { font-family: var(--f-text); font-stretch: 100%; font-weight: 500; font-size: var(--t-3); line-height: var(--lh-3); letter-spacing: var(--ls-3); color: var(--ink); max-width: 30ch; }
@media (min-width: 1024px) {
  .hero__texto { grid-column: 1 / 6; }
  .hero__objeto { grid-column: 6 / -1; --tel: clamp(280px, 22.5vw, 324px); }
  .telefono { width: var(--tel); }
  .hero__foto { max-width: min(440px, calc(100% - var(--tel) + 56px)); }
}
.hero__ctas { flex-wrap: wrap; row-gap: var(--s-2); }
.hero__ctas .enlace { white-space: nowrap; }

/* 7-2b T4: h2 largo con palabra clave natural (Proyectos): un escalón menos que el h2 estándar para no pasar de tres líneas */
#h-proyectos { font-size: clamp(1.625rem, 1rem + 2vw, 2.5rem); }

/* ===== CICLO 8b · T3: imágenes de ambiente generadas (dolores, confianza, formulario) con una sola gradación en el fichero ===== */
/* La foto del formulario va solo en escritorio (hay hueco bajo el texto, sin sumar altura); en móvil no se muestra ni se descarga. */
.banco--form { display: none; margin-top: var(--s-6); max-width: 420px; }
.banco--form .banco__marco { background: #c2a98b; }
@media (min-width: 1024px) { .banco--form { display: block; } }
@media (max-width: 767px) { body:not(.pagina) .confianza .banco--conf .banco__marco { background: #cebca1; } body:not(.pagina) .dolores__cuerpo .pegado__marco { background: #b8a48e; } }
}

/* 9b · Dudas: las tres que mas bloquean a la vista; el resto, plegado */
.dudas__cuerpo { min-width: 0; }
@media (min-width: 1024px) { .dudas__cuerpo { grid-column: 4 / 13; } }
.duda-mas { border-top: 1px solid var(--linea); }
.duda-mas > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px; cursor: pointer; list-style: none; color: var(--acento-texto); font-weight: 600; font-size: var(--t-5); text-decoration: underline; text-underline-offset: 3px; }
.duda-mas > summary::-webkit-details-marker { display: none; }
.duda-mas > summary .ico { transition: transform var(--d-2) var(--ease-out); }
.duda-mas[open] > summary .ico { transform: rotate(45deg); }
.duda-mas[open] > summary { margin-bottom: var(--s-2); }
@media (prefers-reduced-motion: reduce) { .duda-mas > summary .ico { transition: none; } }

/* 9b · Conversion: el coste junto al boton, los campos opcionales plegados, la barra inferior movil no tapa el foco */
@media (max-width: 767px) { html { scroll-padding-bottom: 72px; } }
.lead-opc { grid-column: 1 / -1; border-top: 1px solid var(--linea); }
.lead-opc > summary { display: flex; align-items: center; gap: var(--s-2); min-height: 48px; cursor: pointer; list-style: none; color: var(--acento-texto); font-weight: 600; font-size: var(--t-6); }
.lead-opc > summary::-webkit-details-marker { display: none; }
.lead-opc > summary::after { content: "+"; margin-left: auto; font-size: 1.4em; line-height: 1; }
.lead-opc[open] > summary::after { content: "\2212"; }
.lead-opc .campo { margin-top: var(--s-4); }
.duda-mas > summary, .kits-otras > summary, .lead-opc > summary { touch-action: manipulation; }
@media (min-width: 768px) { .lead-form > .campo:nth-child(3) { grid-column: 1 / -1; } }   /* 9b: sin el campo de interes al lado, el contacto ocupa la fila entera */
/* Boton flotante de WhatsApp (migrado de la web de Framar, 20-oct-2026, con la identidad de LumaQ: tinta + ambar).
   Aparece cuando aparece la barra inferior (.rail) y se esconde con ella: en el heroe, sobre el formulario y sobre el pie.
   Por debajo de 1024 px sube sobre esa barra. Lleva siempre el texto "WhatsApp": con el color tinta un icono solo no se reconoce como WhatsApp. Sin JavaScript propio. */
.wa-flotante { position: fixed; z-index: 1040; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(var(--rail) + 14px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 20px 0 16px; border-radius: var(--r-etiqueta);
  background: var(--tinta-900); color: #fff; font-family: inherit; font-weight: 600; font-size: var(--t-label); line-height: 1; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), inset 0 0 0 1px rgba(244,183,64,.35), var(--sombra-corta);
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out), opacity 160ms ease, visibility 0s linear 0s; }
.wa-flotante .ico { width: 24px; height: 24px; color: var(--luz-ambar); stroke-width: 1.6; }
.wa-flotante:active { transform: scale(.97); }
/* Oculto con opacity (no visibility): asi sigue en el orden de Tab y, al recibir el foco, se muestra (WCAG 2.4.7 / 2.4.11). */
body:has(.rail--oculto) .wa-flotante { opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 160ms ease, transform 160ms var(--ease-out); }
body:has(.rail--oculto) .wa-flotante:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
/* Lo que recibe el foco no queda tapado por el boton flotante (WCAG 2.4.11): hueco de 52 px de boton + 14 px de margen + barra */
a, button, summary, input, select, textarea { scroll-margin-bottom: calc(var(--rail) + 84px); }
@media (hover: hover) and (pointer: fine) { .wa-flotante:hover { background: #1B2030; } }
@media (min-width: 1024px) { .wa-flotante { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); right: max(24px, env(safe-area-inset-right, 0px)); } }
@media (prefers-reduced-motion: reduce) { .wa-flotante, body:has(.rail--oculto) .wa-flotante { transition: none; transform: none; } }
@media print { .wa-flotante { display: none; } }