/* =========================================================
   Clave Digital · web v2 (en construcción, 30/09/2026)
   Tema: TEMAS/clave-digital.tokens.json + manual de marca.
   Nombres de token de FOUNDATIONS (01 color, 02 tipografía,
   03 escalas, 04 layout). Aquí arriba solo hay valores; abajo,
   siempre var(--…).
   Recupera los 19 elementos del inventario del 30/09
   (web-clavedigital/docs/inventario-2026-09-30.md).
   v3 (prueba de skills, 30/09): capas de noche en vez de negro
   puro, ámbar para las horas (PROPUESTA para FOUNDATIONS, sin OK
   todavía), sin etiquetas sobre los titulares, «Por qué fiarte» y
   «Para quién» recompuestas, calendario que se carga al pulsar.
   Detalle en PRUEBA-SKILLS.md.
   01/10/2026 (opción A de Javi): la portada se queda en cinco bloques. Lo retirado
   (fugas, «Anoche», «Va dentro», Para quién, Por qué fiarte, La guía, Preguntas) y su CSS
   y JS, en docs/portada-retirado-2026-10-01/.
   ========================================================= */
:root {
  /* ---- Color: primitivos (no se usan directamente abajo) ---- */
  --negro-1000: #000000;
  --negro-950: #050505;
  /* Capas de noche: grises muy oscuros con un punto de azul (variantes del negro
     del manual). Sustituyen al negro puro por capas: Javi las veía «hipernegras» */
  --noche-900: #0C1016;
  --noche-850: #10151D;
  --noche-800: #151B25;
  --noche-700: #1D2531;
  --noche-azul: #111B2B;
  /* Color de apoyo del tema (aprobado por Javi el 30/09): ámbar de farola.
     Papel fijo: EL TIEMPO Y LO HUMANO. Solo en tres tipos de elemento:
       1. horas y días (23:31, las horas de las fugas, «Jueves», el registro de anoche)
       2. ordinales de pasos (Uno/Dos/Tres, 1-2-3 de los verbos, 1-4 de la línea, 1-3 de la llamada)
       (el tercer uso, «el hueco reservado para el primer caso», se quitó el 30/09:
       DECISIONES 30/09 (8). Queda en dos papeles simétricos: tiempo y pasos)
     Nunca en botones ni enlaces (eso es el azul, la acción), ni de fondo, ni para
     resaltar una palabra suelta. Excepción: la hora dentro de las burbujas del
     teléfono es de la app de mensajería y se queda neutra. FOUNDATIONS/01 - color.md */
  --ambar-farola: #F2B45A;
  --pizarra-700: #1F2937;
  --pizarra-600: #374151;
  --gris-500:  #6E7A8C;
  --gris-300:  #A3ADBB;
  --gris-100:  #E7E9EC;
  --blanco:    #FFFFFF;
  --tinta:     #0A1B28;
  --azul-marca: #3D8BFF;
  --azul-hover: #5C9EFF;
  --azul-claro: #AED2FF;
  --azul-neon:  #38BDF8;   /* manual: solo mockups de producto (el monitor y el botón con brillo) */
  --verde-estado: #3DFF9C;
  --semaforo-rojo:  #FF5F57;
  --semaforo-ambar: #FEBC2E;
  --semaforo-verde: #28C840;

  /* ---- Color: tokens semánticos (01 - color.md) ---- */
  --bg-page:           var(--noche-900);
  --bg-page-alt:       var(--noche-850);
  --bg-surface:        var(--noche-800);
  --bg-surface-raised: var(--noche-700);
  --bg-brand-bold:     var(--azul-marca);
  --bg-brand-hover:    var(--azul-hover);
  --text-heading:      var(--blanco);
  --text-neutral:      var(--gris-100);
  --text-subtle:       var(--gris-300);
  --text-brand:        var(--azul-claro);
  --text-inverse:      var(--tinta);
  --text-success:      var(--verde-estado);
  --text-support:      var(--ambar-farola);
  --border-neutral:    rgba(255, 255, 255, 0.1);
  --border-brand:      var(--azul-marca);
  --border-input:      var(--gris-500);

  /* v3: contraste recalculado el 30/09/2026 con las capas de noche:
       --text-neutral  / --bg-page        15,68:1 · / --bg-surface-raised 12,68:1
       --text-subtle   / --bg-page         8,40:1 · / --bg-surface-raised  6,80:1
       --text-brand    / --bg-page        12,22:1
       --text-inverse  / --bg-brand-bold   5,28:1
       --text-support     / --bg-page        10,40:1 · / --bg-surface-raised  8,41:1
       --border-input  / --bg-page         4,38:1 · / --bg-surface-raised  3,54:1
       --border-brand  / --bg-page         5,75:1
     (Los valores de abajo son los de la v2, sobre negro puro.) */
  /* Contraste calculado (WCAG 2.x) el 30/09/2026, no a ojo.
     Los cuatro pares de 01 - color.md:
       --text-neutral  / --bg-page        16,09:1  pasa (4,5)
       --text-subtle   / --bg-page         7,51:1  pasa (4,5)
       --text-brand    / --bg-page        12,54:1  pasa (4,5)
       --text-inverse  / --bg-brand-bold   5,28:1  pasa (4,5)
     Otros que se usan:
       --text-inverse  / --bg-brand-hover  6,49:1
       --text-inverse  / --azul-neon       8,17:1  (botón con brillo, el degradado va de azul a neón)
       --text-neutral  / --bg-surface     13,87:1
       --text-subtle   / --bg-surface      6,48:1
       --text-subtle   / --bg-surface-raised 5,66:1
       --text-brand    / --bg-surface     10,82:1
       --text-subtle   / pantalla negra    8,06:1  (rótulo del monitor apagado y barra de dirección)
       --text-neutral  / cristal de la consola (compuesto ~#0D1014) 15,68:1
       --border-brand  / --bg-page         5,90:1  (foco, mínimo 3)
       --border-input  / --bg-page         4,05:1  (mínimo 3)
     Blanco sobre el azul da 3,31:1 y suspende: botones y burbujas llevan tinta. */

  /* Alpha: capas sobre foto, cristal, brillos y estados (01 - color.md, «Alpha: dónde sí») */
  --bg-overlay:        rgba(12, 16, 22, 0.82);
  --bg-foto-velo:      linear-gradient(90deg, rgba(12, 16, 22, 0.92) 0%, rgba(12, 16, 22, 0.7) 40%, rgba(12, 16, 22, 0.15) 70%, rgba(12, 16, 22, 0.35) 100%), linear-gradient(180deg, rgba(12, 16, 22, 0.5) 0%, transparent 30%, transparent 70%, var(--noche-900) 100%);
  --bg-foto-velo-lado: linear-gradient(90deg, rgba(12, 16, 22, 0.94) 0%, rgba(12, 16, 22, 0.78) 42%, rgba(12, 16, 22, 0.42) 100%), linear-gradient(0deg, rgba(12, 16, 22, 0.55), transparent 40%);
  /* Para quién (01/10): el velo ya no sostiene texto, solo funde la foto con la noche */
  --bg-cristal:        rgba(13, 16, 20, 0.62);
  --bg-cristal-suave:  rgba(27, 29, 33, 0.6);
  --bg-cristal-claro:  rgba(255, 255, 255, 0.05);
  --bg-halo-consola:   radial-gradient(ellipse at center, rgba(45, 94, 126, 0.6) 0%, rgba(12, 16, 22, 0.8) 60%, transparent 100%);
  --bg-brand-suave:    rgba(61, 139, 255, 0.1);
  --bg-brand-medio:    rgba(61, 139, 255, 0.22);
  --bg-brand-activo:   rgba(61, 139, 255, 0.07);
  --bg-banda:          var(--noche-800);   /* secciones alternas (ritmo, 01/10) */
  --separador:         linear-gradient(90deg, transparent 0%, rgba(61, 139, 255, 0.45) 50%, transparent 100%);
  --bg-vitrina:        linear-gradient(160deg, var(--noche-850) 0%, var(--noche-900) 100%);
  --bg-escenario:      radial-gradient(ellipse 50% 60% at 72% 45%, rgba(61, 139, 255, 0.14), transparent 70%), var(--bg-banda);
  --border-support:       rgba(242, 180, 90, 0.45); /* sin uso en esta web desde el 30/09 (quitado el hueco reservado) */
  --seleccion:         rgba(61, 139, 255, 0.35);
  --bg-cierre:         radial-gradient(ellipse 70% 90% at 50% 110%, rgba(61, 139, 255, 0.18), transparent);
  --bg-brillo-boton:   linear-gradient(100deg, var(--azul-marca) 0%, var(--azul-neon) 100%);
  --bg-brillo-barrido: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  --bg-pantalla-luz:   radial-gradient(ellipse 70% 60% at 50% 45%, rgba(56, 189, 248, 0.16) 0%, transparent 70%);
  --bg-reflejo:        linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, transparent 30%);
  --border-cristal:    rgba(174, 210, 255, 0.2);
  --border-brand-suave: rgba(61, 139, 255, 0.3);
  --border-brand-medio: rgba(61, 139, 255, 0.55);
  --rejilla-linea:     rgba(56, 189, 248, 0.12);
  --punto-datos:       rgba(56, 189, 248, 0.5);
  --glow-marca:        0 0 32px rgba(61, 139, 255, 0.28);
  --glow-marca-fuerte: 0 0 0 6px rgba(61, 139, 255, 0.28), 0 0 28px var(--azul-marca);
  --glow-linea:        0 0 12px var(--azul-marca);
  --glow-estado:       0 0 10px var(--verde-estado);
  --sombra-cristal:    0 10px 32px rgba(0, 0, 0, 0.45);
  --sombra-tarjeta-alta: 0 24px 48px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.3);
  --anillo-activa:     0 0 0 2px rgba(61, 139, 255, 0.5), 0 20px 40px rgba(0, 0, 0, 0.35);
  --sombra-marco:      0 40px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --sombra-marco-on:   0 40px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 50px rgba(56, 189, 248, 0.22), 0 0 110px rgba(56, 189, 248, 0.1);
  --sombra-base:       0 8px 20px rgba(0, 0, 0, 0.45);
  --sombra-panel:      0 24px 64px rgba(0, 0, 0, 0.35);
  --sombra-barra:      0 6px 30px rgba(61, 139, 255, 0.28);

  /* ---- Tipografía (02 - tipografia.md, escala web pública) ----
     Plus Jakarta Sans 600/700/800 (tambien el logotipo, 700) · Source Sans 3 400/600 */
  --font-titular: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-cuerpo:  'Source Sans 3', system-ui, sans-serif;
  --font-logo:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display:    800 clamp(2.2rem, 5vw, 3.6rem) / 1.1 var(--font-titular);
  --font-heading-l:  700 clamp(1.6rem, 3.4vw, 2.1rem) / 1.2 var(--font-titular);
  --font-heading-m:  700 1.25rem / 1.25 var(--font-titular);
  --font-heading-s:  600 1rem / 1.3 var(--font-titular);
  --font-body-l:     400 1.125rem / 1.65 var(--font-cuerpo);
  --font-body-m:     400 1.0625rem / 1.65 var(--font-cuerpo);
  --font-body-m-strong: 600 1.0625rem / 1.45 var(--font-cuerpo);
  --font-body-s:     400 0.875rem / 1.55 var(--font-cuerpo);
  --font-body-xs:    400 0.8125rem / 1.4 var(--font-cuerpo);
  --font-label:      600 0.875rem / 1.3 var(--font-cuerpo);
  --font-metric-l:   800 clamp(2rem, 4vw, 3rem) / 1 var(--font-titular);
  --font-metric-s:   800 1.5rem / 1 var(--font-titular);
  --font-logo-texto: 700 1.45rem / 1 var(--font-logo); /* mayusculas de 17 px: el simbolo (26 px) mide 1,5 veces, como en el manual */
  --font-cinta:      600 0.9375rem / 1 var(--font-titular);
  --tracking-titular: -0.02em;
  --tracking-label:   0.1em;

  /* ---- Espacio, base 4 (03 - escalas y forma.md) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* ---- Forma ---- */
  --radio-xs: 4px;
  --radio-sm: 8px;
  --radio-md: 14px;
  --radio-lg: 20px;
  --radio-xl: 34px;
  --radio-pantalla: 10px;
  --radio-marco: 16px;
  --radio-full: 999px;
  --radio-boton: 10px;
  --borde-fino: 1px;
  --borde-grueso: 2px;
  --sombra-lg: 0 24px 64px rgba(0, 0, 0, 0.7);
  --blur-glass: 12px;
  --blur-glass-fuerte: 18px;

  /* ---- Layout (04 - layout y breakpoints.md) ---- */
  --cont-max: 1140px;
  --cont-estrecho: 720px;
  --medida: 62ch;
  --margen-lateral: 20px;
  --seccion: var(--sp-16);
  --cabecera-alto: 72px;
  --logo-alto: 26px;
  --logo-alto-pie: 26px;
  --boton-alto: 48px;
  --tactil: 44px;
  --portada-min: 640px;
  --calendario-alto: 720px;
  --calendario-alto-v3: 820px;
  --foto-quien: 220px;
  /* Quién soy (01/10): la foto cortada por la costura del logo, sin marco.
     Escalones del borde derecho (como la pieza azul de «El encaje»): ancho 84 % / 100 % / 92 %,
     cortes al 30 % y al 62 % del alto. La costura es la otra pieza, a una separación de 3 % x 2,5 %. */
  --foto-quien-max: 560px;          /* ancho real de la foto: nunca se amplía por encima */
  --foto-quien-alto-max: 700px;     /* alto real de la foto */
  --foto-quien-ratio-movil: 5 / 6;
  --foto-quien-encuadre: 50% 40%;   /* a favor de la cara */
  --foto-quien-encuadre-ancho: 50% 70%;
  /* Alinea el borde de la foto con la altura de las mayúsculas del titular, no con su caja:
     media interlínea del titular (1,2 de alto de línea, mayúsculas de 0,72) */
  --foto-quien-ajuste: calc(clamp(1.6rem, 3.4vw, 2.1rem) * 0.24);
  --foto-quien-corte: polygon(0 0, 84% 0, 84% 30%, 100% 30%, 100% 62%, 92% 62%, 92% 100%, 0 100%);
  --foto-quien-fundido-abajo: linear-gradient(to top, transparent 0%, #000 24%);
  --foto-quien-fundido-izq: linear-gradient(to right, transparent 0%, #000 24%);
  --foto-quien-filtro: saturate(0.85) contrast(1.04);
  /* Quién soy de la portada (rehecho el 01/10/2026, tarde): el texto manda, la foto es una firma.
     A 390 px: versos 19 px · remates y cierre 22 px (antes 17 · 18 · 22).
     A 1440 px: versos 23 px · remates y cierre 30 px (antes 17 · 21 · 30). El cierre ya no es más grande (Javi).
     La foto pasa de 440 px de ancho a 200 en escritorio y a 104 en móvil, al lado del titular. */
  --quien-foto-portada: clamp(168px, 14vw, 208px); /* columna de la foto en escritorio */
  --quien-foto-movil:   clamp(88px, 26vw, 128px);  /* foto al lado del titular, hasta 1023 px */
  --quien-verso-ancho:  42rem;      /* ~60 caracteres por línea con los versos a 23 px */
  --quien-foto-ratio:   4 / 5;      /* la de la foto real (560 x 700) */
  --quien-foto-sutil:   saturate(0.7) contrast(1.02) brightness(0.92); /* más callada que la de la firma */
  --quien-foto-arriba:  calc(var(--cabecera-alto) + var(--sp-8)); /* dónde se queda quieta al bajar */
  --font-quien-verso:   400 clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem) / 1.45 var(--font-cuerpo);
  --font-quien-remate:  700 clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem) / 1.25 var(--font-titular);
  --font-quien-como:    600 clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem) / 1.3 var(--font-titular);
  /* Color en «Quién soy»: versión ámbar FIJA (decisión de Javi, 01/10/2026; excepción solo de esta sección,
     anotada en criterios y FOUNDATIONS). La variante azul queda solo para la página de prueba. Contraste sobre --bg-page #0C1016:
       azul #3D8BFF 5,75:1 · ámbar #F2B45A 10,40:1 (texto normal, pasan 4,5).
       Etiqueta: tinta #0A1B28 sobre azul 5,28:1 · tinta sobre ámbar 9,54:1. Blanco sobre azul da 3,31:1: no.
       La etiqueta va algo girada y con esquina pequeña para que no se confunda con un botón. */
  --etiqueta-giro: -1.5deg;
  --firma-foto:        180px;
  --verso-sangria:     1em;
  --font-verso:        400 1.0625rem / 1.55 var(--font-cuerpo);
  --font-remate:       700 clamp(1.125rem, 1.6vw, 1.3rem) / 1.35 var(--font-titular);
  --font-cierre:       800 clamp(1.4rem, 2.6vw, 1.85rem) / 1.2 var(--font-titular);
  --costura-opacidad: 0.85;
  --consola-ancho: 320px;
  /* El teléfono que escribe solo y sus tarjetas flotantes (restaurados el 01/10/2026) */
  --glow-telefono:     0 20px 60px rgba(0, 0, 0, 0.5), 0 0 70px rgba(61, 139, 255, 0.28), 0 0 130px rgba(61, 139, 255, 0.16);
  --sombra-flotante:   0 8px 32px rgba(0, 0, 0, 0.35);
  --telefono-ancho: 280px;
  --telefono-ancho-v3: 320px;
  --telefono-muesca: 18px;
  --icono-caja: 28px;
  --flotar: -10px;
  --flotante-fuera: clamp(-24px, -2%, 0px);
  --cursor-sep: 1px;
  /* La conversación (componente común, 01/10/2026) */
  --conversa-max: 560px;
  --conversa-hora-col: 3.25rem;
  --conversa-escalon: 0.45s;
  --font-conversa-frase: 700 clamp(1.25rem, 2.2vw, 1.6rem) / 1.2 var(--font-titular);
  --monitor-max: 560px;
  --pantalla-alto: 300px;
  --cuello-ancho: 130px;
  --cuello-alto: 30px;
  --base-ancho: 160px;
  --base-alto: 12px;
  --publico-miniatura: 72px;
  --linea-nodo: 52px;
  --rejilla-celda: 64px;

  /* ---- Detalles ---- */
  --punto: 8px;
  --punto-s: 6px;
  --punto-l: 10px;
  --linea: 2px;
  --linea-acento: 3px;
  --raya-ancho: 24px;
  --raya-hueco: 5px;
  --raya-giro: 7px;
  --icono-s: 16px;
  --icono-m: 20px;
  --desplaza: 12px;
  --desplaza-s: 4px;
  --desplaza-revelar: 22px;
  --deriva-x: 18px;
  --deriva-y: -14px;
  --chat-ancho: 380px;
  --chat-alto: 560px;
  --chat-boton: 60px;

  /* ---- Movimiento (todo se apaga con prefers-reduced-motion, al final) ---- */
  --transicion: 0.25s ease;
  --transicion-lenta: 0.6s ease;
  --elevacion: translateY(-4px);
  --elevacion-tarjeta: -3px;
  --curva-salida: cubic-bezier(0.16, 1, 0.3, 1);
  --desplaza-suave: 8px;
}

@media (min-width: 768px)  { :root { --margen-lateral: 32px; --foto-quien: 280px; --publico-miniatura: 88px; } }
@media (min-width: 1024px) { :root { --margen-lateral: 48px; --seccion: var(--sp-24); --foto-quien: 360px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--cabecera-alto); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-neutral);
  font: var(--font-body-m);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--seleccion); color: var(--text-heading); }
html { scrollbar-color: var(--bg-surface-raised) var(--bg-page); caret-color: var(--bg-brand-bold); accent-color: var(--bg-brand-bold); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.hora { color: var(--text-support); font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; color: var(--text-heading); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { color: var(--text-heading); font-weight: 600; }
button { font: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icono { width: var(--icono-s); height: var(--icono-s); flex: none; color: var(--text-brand); }

:focus-visible { outline: var(--borde-grueso) solid var(--border-brand); outline-offset: var(--linea-acento); }

.saltar {
  position: absolute; left: var(--sp-4); top: calc(-1 * var(--sp-24)); z-index: 100;
  padding: var(--sp-3) var(--sp-4); background: var(--bg-brand-bold); color: var(--text-inverse);
  font: var(--font-label); border-radius: var(--radio-sm);
}
.saltar:focus { top: var(--sp-4); }

.contenedor { width: 100%; max-width: calc(var(--cont-max) + 2 * var(--margen-lateral)); margin: 0 auto; padding: 0 var(--margen-lateral); }
.contenedor--estrecho { max-width: calc(var(--cont-estrecho) + 2 * var(--margen-lateral)); }
.seccion { padding: var(--seccion) 0; }
/* ---------- Ritmo de secciones (01/10/2026, Javi: «se ve como un solo lienzo») ----------
   Dos capas que se alternan: noche-900 (base) y noche-800 (banda). La 850 de antes
   solo se separaba 1,04:1 de la base y no se veía; la 800 se separa 1,10:1, y la
   tarjeta dentro de la banda sube una capa (700, 1,12:1 sobre la banda).
   Contraste sobre la banda (#151B25), calculado:
     --text-heading 17,28:1 · --text-neutral 14,21:1 · --text-subtle 7,61:1
     --text-brand 11,08:1 · --text-support 9,42:1 · --text-success 13,15:1
     --border-input 3,97:1 · --border-brand 5,21:1 (foco)
   Y sobre la tarjeta dentro de la banda (#1D2531):
     --text-neutral 12,68:1 · --text-subtle 6,80:1 · --text-brand 9,89:1
     --text-support 8,41:1 · --border-input 3,54:1 · --border-brand 4,65:1 */
.seccion--alterna {
  --bg-page-alt: var(--bg-banda);
  --bg-surface: var(--noche-700);
  background: var(--bg-banda);
}
/* Separador único: un filete de luz azul que se apaga hacia los lados. Decorativo
   (no es texto ni control: no le aplica el 3:1). Mismo en las tres páginas y en el pie */
main > section:not(:first-child),
.pie {
  border-style: solid; border-width: var(--borde-fino) 0 0;
  border-image: var(--separador) 1;
}

.etiqueta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: var(--font-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-brand); margin-bottom: var(--sp-4);
}
.etiqueta::before { content: ''; width: var(--punto-s); height: var(--punto-s); border-radius: var(--radio-full); background: var(--bg-brand-bold); box-shadow: var(--glow-marca); }

/* Titulares de sección: mayúsculas, 2-3 palabras (criterios de diseno-web) */
.titulo-seccion { font: var(--font-heading-l); letter-spacing: var(--tracking-titular); text-transform: uppercase; }
.cabeza-seccion { max-width: var(--medida); margin-bottom: var(--sp-12); }
.cabeza-seccion .titulo-seccion + .entradilla { margin-top: var(--sp-3); }
.cabeza-seccion--centro { margin-left: auto; margin-right: auto; text-align: center; }
.entradilla { font: var(--font-body-l); color: var(--text-neutral); margin-top: var(--sp-4); }
.entradilla--grande { font: var(--font-heading-m); color: var(--text-heading); }
.nota { font: var(--font-body-s); color: var(--text-subtle); margin-top: var(--sp-4); }
.nota a { color: var(--text-brand); text-decoration: underline; }

/* Apariciones al bajar (inventario #17) */
.revelar { opacity: 0; transform: translateY(var(--desplaza-suave)); transition: opacity 0.5s var(--curva-salida), transform 0.5s var(--curva-salida); }
.revelar.visible { opacity: 1; transform: none; }
.sin-js .revelar { opacity: 1; transform: none; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--boton-alto); padding: var(--sp-3) var(--sp-6);
  background: var(--bg-brand-bold); color: var(--text-inverse);
  border: var(--borde-fino) solid var(--bg-brand-bold); border-radius: var(--radio-boton);
  font: var(--font-label);
  cursor: pointer; transition: background var(--transicion), border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.boton:hover { background: var(--bg-brand-hover); border-color: var(--bg-brand-hover); box-shadow: var(--glow-marca); }
.boton--pequeno { min-height: var(--tactil); padding: var(--sp-2) var(--sp-4); }
.boton--contorno { background: transparent; color: var(--text-heading); border-color: var(--border-input); }
.boton--contorno:hover { background: var(--bg-surface-raised); border-color: var(--text-subtle); box-shadow: none; }
.boton--ancho { width: 100%; text-align: center; }

/* Botón con brillo: uno solo en toda la web (inventario #18) */
.boton--brillo {
  position: relative; overflow: hidden;
  background: var(--bg-brillo-boton); border: 0;
  padding: var(--sp-4) var(--sp-8); box-shadow: var(--glow-marca);
}
.boton--brillo::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: var(--bg-brillo-barrido); mix-blend-mode: overlay; transform: skewX(-20deg);
  animation: brillo-barre 3.2s ease-in-out infinite;
}
.boton--brillo:hover { transform: translateY(calc(-1 * var(--linea))); }
@keyframes brillo-barre { 0% { left: -60%; } 55%, 100% { left: 130%; } }

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--cabecera-alto);
  border-bottom: var(--borde-fino) solid transparent;
  transition: background var(--transicion), border-color var(--transicion);
}
.cabecera.con-fondo { background: var(--bg-overlay); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); border-color: var(--border-neutral); }
.cabecera__fila { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); }

.logo { display: inline-flex; align-items: center; gap: calc(var(--logo-alto) * 0.4); min-height: var(--tactil); }
.logo img { width: auto; height: var(--logo-alto); }
.pie .logo img { height: var(--logo-alto-pie); }
.logo__texto { font: var(--font-logo-texto); color: var(--text-heading); letter-spacing: -0.02em; }

.menu { display: none; gap: var(--sp-6); }
.menu > a { font: var(--font-body-m-strong); color: var(--text-neutral); transition: color var(--transicion); }
.menu > a:hover { color: var(--text-brand); }
.cabecera__cta { display: none; }

.hamburguesa {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--raya-hueco);
  width: var(--tactil); height: var(--tactil); padding: 0;
  background: none; border: 0; cursor: pointer;
}
.hamburguesa span { width: var(--raya-ancho); height: var(--linea); background: var(--text-heading); transition: transform var(--transicion), opacity var(--transicion); }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(var(--raya-giro)) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(calc(-1 * var(--raya-giro))) rotate(-45deg); }

/* Menú móvil de serie (COMPONENTES/menu-movil.md). Variante sin números */
.menu__pie { display: none; }
@media (max-width: 899.98px) {
  .menu.abierto {
    display: flex; flex-direction: column;
    position: fixed; top: var(--cabecera-alto); left: 0; right: 0; bottom: 0;
    padding: var(--sp-6) var(--margen-lateral) var(--sp-8);
    background: var(--bg-page); border-top: var(--borde-fino) solid var(--border-neutral);
    overflow-y: auto;
  }
  .menu.abierto > a {
    display: flex; align-items: baseline; gap: var(--sp-4);
    padding: var(--sp-4) 0; border-bottom: var(--borde-fino) solid var(--border-neutral);
    font: var(--font-heading-m); font-size: clamp(1.75rem, 8vw, 2.25rem);
    letter-spacing: var(--tracking-titular); color: var(--text-heading);
    opacity: 0; transform: translateY(var(--desplaza));
    animation: menu-entra 0.4s ease forwards;
  }
  .menu.abierto > a::after { content: '→'; margin-left: auto; font: var(--font-body-l); color: var(--text-subtle); transition: transform var(--transicion), color var(--transicion); }
  .menu.abierto > a:hover::after, .menu.abierto > a:focus-visible::after { color: var(--text-brand); transform: translateX(var(--desplaza-s)); }
  .menu.abierto > a:nth-child(2) { animation-delay: 0.04s; }
  .menu.abierto > a:nth-child(3) { animation-delay: 0.08s; }
  .menu.abierto > a:nth-child(4) { animation-delay: 0.12s; }
  .menu.abierto > a:nth-child(5) { animation-delay: 0.16s; }
  .menu.abierto > a:nth-child(6) { animation-delay: 0.2s; }
  .menu.abierto .menu__pie {
    display: flex; flex-direction: column; gap: var(--sp-4);
    margin-top: auto; padding-top: var(--sp-8);
    opacity: 0; animation: menu-entra 0.4s ease 0.26s forwards;
  }
  .menu.abierto .menu__pie p { font: var(--font-body-s); color: var(--text-subtle); text-align: center; }
  /* Enlaces secundarios: debajo del botón, más discretos que las pestañas */
  .menu.abierto .menu__secundarios { display: flex; justify-content: center; column-gap: var(--sp-6); flex-wrap: wrap; }
  .menu.abierto .menu__secundarios a { display: inline-flex; align-items: center; min-height: var(--tactil); font: var(--font-body-m); color: var(--text-neutral); text-decoration: underline; text-underline-offset: var(--linea-acento); }
  .menu.abierto .menu__secundarios a:hover { color: var(--text-brand); }
}
@keyframes menu-entra { to { opacity: 1; transform: none; } }
html.menu-abierto { overflow: hidden; }
html.menu-abierto .cabecera { background: var(--bg-page); border-color: var(--border-neutral); }
html.menu-abierto .chat-window-wrapper, html.menu-abierto .barra-reserva { display: none; }

/* 01/10/2026 (tarde): con tres pestañas el menú en fila cabe desde 900 px (medido a 900,
   1024, 1280 y 1440 sin cortes ni solapes). Antes, con seis, necesitaba 1280 px */
@media (min-width: 900px) {
  .menu, .menu.abierto { display: flex; flex-direction: row; align-items: center; position: static; padding: 0; background: none; border: 0; overflow: visible; }
  .menu__pie, .menu.abierto .menu__pie { display: none; }
  .cabecera__cta { display: inline-flex; margin-left: 0; }
  .hamburguesa { display: none; }
}

/* ---------- 1 · Portada (inventario #8 #9 #10 #11) ---------- */
.portada {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: max(100svh, var(--portada-min));
  display: flex; align-items: flex-end;
  padding: calc(var(--cabecera-alto) + var(--sp-12)) 0 var(--sp-12);
}
.portada__foto { position: absolute; inset: calc(-1 * var(--sp-12)) 0 0 0; z-index: -2; will-change: transform; }
.portada__foto picture, .portada__foto img { width: 100%; height: 100%; }
.portada__foto img { object-fit: cover; object-position: 40% 70%; }
.portada::before { content: ''; position: absolute; inset: 0; background: var(--bg-foto-velo); z-index: -1; }
@media (max-width: 767.98px) { .portada::before { background: linear-gradient(180deg, rgba(12, 16, 22, 0.55) 0%, rgba(12, 16, 22, 0.45) 40%, var(--noche-900) 100%); } }

/* Partículas: pocas, junto al brillo del móvil de la foto; solo escritorio */
.portada__particulas { display: none; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.portada__particulas span {
  position: absolute; left: var(--p-x); top: var(--p-y);
  width: var(--p-tam); height: var(--p-tam); border-radius: var(--radio-full);
  background: var(--text-brand); opacity: 0.35;
  animation: particula 14s ease-in-out infinite; animation-duration: var(--p-dur); animation-delay: var(--p-retardo);
}
@keyframes particula {
  0%, 100% { transform: translate(0, 0); opacity: 0.15; }
  50% { transform: translate(var(--p-dx), var(--p-dy)); opacity: 0.5; }
}
@media (min-width: 768px) { .portada__particulas { display: block; } }

.portada__contenido { display: grid; gap: var(--sp-12); }
.portada__contenido > * { min-width: 0; }
.portada__titulo { font: var(--font-display); letter-spacing: var(--tracking-titular); max-width: 14ch; }
.portada__sub { font: var(--font-body-l); color: var(--text-neutral); max-width: 44ch; margin-top: var(--sp-6); }
.portada__botones { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }

/* Consola de cristal (la de la web publicada) */
.consola { position: relative; display: grid; gap: var(--sp-3); max-width: var(--consola-ancho); }
.consola::before { content: ''; position: absolute; inset: -12% -18%; z-index: -1; background: var(--bg-halo-consola); pointer-events: none; }
.consola__item {
  padding: var(--sp-4) var(--sp-4);
  background: var(--bg-cristal); border: var(--borde-fino) solid var(--border-cristal); border-radius: var(--radio-md);
  backdrop-filter: blur(var(--blur-glass-fuerte)); -webkit-backdrop-filter: blur(var(--blur-glass-fuerte));
  box-shadow: var(--sombra-cristal);
}
.consola__item--fila { display: flex; align-items: center; gap: var(--sp-3); }
.consola__hora { display: flex; gap: var(--sp-2); align-items: baseline; font: var(--font-label); color: var(--text-subtle); }
.consola__hora .hora { font: var(--font-heading-s); }
.consola__mensaje { font: var(--font-body-m-strong); color: var(--text-heading); margin-top: var(--sp-2); }
.consola__estado { font: var(--font-body-s); color: var(--text-subtle); margin-top: var(--sp-2); }
.consola__etiqueta { font: var(--font-label); color: var(--text-heading); }
.consola__pulso { position: relative; flex: none; width: var(--punto-l); height: var(--punto-l); border-radius: var(--radio-full); background: var(--text-success); box-shadow: var(--glow-estado); }
.consola__pulso::after { content: ''; position: absolute; inset: calc(-1 * var(--punto-s)); border-radius: var(--radio-full); border: var(--borde-fino) solid var(--text-success); animation: pulso 2s ease-out infinite; }
@keyframes pulso { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }

@media (min-width: 1024px) {
  .portada { align-items: center; }
  .portada__contenido { grid-template-columns: 1.4fr 1fr; align-items: end; }
  .consola { margin-left: auto; width: 100%; }
}

/* ---------- Cinta de sectores (inventario #6) ---------- */
.cinta { background: var(--bg-page); border-top: var(--borde-fino) solid var(--border-neutral); border-bottom: var(--borde-fino) solid var(--border-neutral); padding: var(--sp-6) 0; }
.cinta__rotulo { font: var(--font-body-s); color: var(--text-brand); margin-bottom: var(--sp-3); }
.cinta__marco {
  display: flex; overflow: hidden; width: 100%;
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.cinta__pista {
  display: flex; align-items: center; gap: var(--sp-8); flex: none; width: max-content;
  padding-right: var(--sp-8); will-change: transform;
  animation: cinta-corre 24s linear infinite;
}
.cinta__marco:hover .cinta__pista { animation-play-state: paused; }
.cinta__pista li { font: var(--font-cinta); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-neutral); white-space: nowrap; }
.cinta__pista .cinta__punto { color: var(--bg-brand-bold); }
@keyframes cinta-corre { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ---------- 3 · Contesta, agenda, recuerda: el teléfono (inventario #1 #4) ---------- */
/* En móvil el teléfono va entre el titular y las tres tarjetas, para ver cómo se encienden */
#que-hace { background: var(--bg-escenario); }
.escaparate { display: grid; gap: var(--sp-12); grid-template-columns: 1fr; align-items: center; }
.escaparate > * { min-width: 0; }
@media (min-width: 1024px) { .escaparate { grid-template-columns: 1fr 1fr; gap: var(--sp-16); } }

@media (max-width: 1023.98px) {
  .escaparate { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-8); }
  .escaparate__texto { display: contents; }
  .escaparate .cabeza-seccion { order: 1; margin-bottom: 0; }
  .escaparate__visual { order: 2; }
  .verbos { order: 3; }
}
.escaparate .cabeza-seccion { margin-bottom: var(--sp-8); }

.verbos { display: flex; flex-direction: column; border-top: var(--borde-fino) solid var(--border-neutral); }
.verbo {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-6) var(--sp-4); border-bottom: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-sm);
  transition: background 0.3s var(--curva-salida), box-shadow 0.3s var(--curva-salida);
}
.verbo__num { font: var(--font-metric-s); color: var(--text-support); min-width: var(--sp-6); transition: color var(--transicion); }
.verbo__titulo { font: var(--font-heading-m); letter-spacing: var(--tracking-titular); margin-bottom: var(--sp-1); }
.verbo.activo { background: var(--bg-brand-activo); box-shadow: inset 0 0 0 var(--borde-fino) var(--border-brand-medio); }
.verbo.activo .verbo__titulo { color: var(--text-brand); }

.escaparate__visual { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }

.telefono__punto { width: var(--punto); height: var(--punto); border-radius: var(--radio-full); background: var(--text-success); flex: none; }

.burbuja {
  max-width: 84%; padding: var(--sp-2) var(--sp-3); border-radius: var(--radio-md);
  font: var(--font-body-xs); animation: burbuja-entra 0.35s ease-out;
}
.burbuja--sale { align-self: flex-end; background: var(--bg-brand-bold); color: var(--text-inverse); font-weight: 600; border-bottom-right-radius: var(--radio-xs); }

@keyframes burbuja-entra { from { opacity: 0; transform: translateY(var(--punto-s)) scale(0.97); } to { opacity: 1; transform: none; } }

.escaparate__movil { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.escaparate__frase { font: var(--font-conversa-frase); letter-spacing: var(--tracking-titular); color: var(--text-heading); text-align: center; text-wrap: balance; }  /* sobre la banda: 17,28:1 */
.escaparate__ejemplo { font: var(--font-body-s); color: var(--text-subtle); }
.burbuja--entra { align-self: flex-start; background: var(--bg-surface); border: var(--borde-fino) solid var(--border-neutral); color: var(--text-neutral); border-bottom-left-radius: var(--radio-xs); }
/* El teléfono que escribe solo (restaurado el 01/10/2026: no se quita sin el OK de Javi por su nombre) */
.telefono {
  width: min(100%, var(--telefono-ancho-v3)); aspect-ratio: 9 / 18.5;
  display: flex; flex-direction: column;
  padding: var(--sp-2); border-radius: var(--radio-xl);
  background: var(--bg-surface); border: var(--borde-fino) solid var(--border-neutral);
  box-shadow: var(--glow-telefono);
}
.telefono__muesca { width: 40%; height: var(--telefono-muesca); margin: 0 auto var(--sp-1); border-radius: 0 0 var(--radio-md) var(--radio-md); background: var(--bg-page); flex: none; }
.telefono__cabecera {
  display: flex; align-items: center; gap: var(--sp-2); flex: none;
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-1);
  background: var(--bg-surface-raised); border-radius: var(--radio-md) var(--radio-md) var(--radio-xs) var(--radio-xs);
  font: var(--font-body-xs); color: var(--text-neutral);
}
.telefono__cabecera strong { font-weight: 600; }
.telefono__pantalla {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3); border-radius: var(--radio-xs) var(--radio-xs) var(--radio-lg) var(--radio-lg);
  background: var(--bg-page);
}
.burbuja__hora[hidden] { display: none; }
.burbuja__hora { display: block; margin-top: var(--sp-1); font-size: 0.6875rem; opacity: 0.75; text-align: right; }
.burbuja__cursor { display: inline-block; width: var(--linea); height: 0.9em; margin-left: var(--cursor-sep); background: currentColor; vertical-align: -0.1em; animation: cursor-parpadea 0.8s step-end infinite; }
.telefono__dia { align-self: center; padding: var(--sp-1) var(--sp-3); border-radius: var(--radio-full); background: var(--bg-surface-raised); font: var(--font-label); color: var(--text-support); animation: burbuja-entra 0.35s ease-out; }
.escribiendo { align-self: flex-start; display: inline-flex; gap: var(--sp-1); padding: var(--sp-3) var(--sp-3); border-radius: var(--radio-md); border-bottom-left-radius: var(--radio-xs); background: var(--bg-surface); border: var(--borde-fino) solid var(--border-neutral); animation: burbuja-entra 0.35s ease-out; }
.escribiendo span { width: var(--punto-s); height: var(--punto-s); border-radius: var(--radio-full); background: var(--text-brand); opacity: 0.5; animation: escribiendo 1s ease-in-out infinite; }
.escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.escribiendo span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cursor-parpadea { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes escribiendo { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(calc(-1 * var(--linea-acento))); opacity: 1; } }
/* Tarjetas flotantes junto al teléfono */
.flotante {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radio-full);
  background: var(--bg-cristal-suave); border: var(--borde-fino) solid var(--border-neutral);
  backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass));
  box-shadow: var(--sombra-flotante);
  font: var(--font-body-s); color: var(--text-neutral); white-space: nowrap;
}
.flotante__icono { display: grid; place-items: center; width: var(--icono-caja); height: var(--icono-caja); flex: none; border-radius: var(--radio-full); background: var(--bg-brand-medio); border: var(--borde-fino) solid var(--border-brand-medio); color: var(--text-brand); }
.flotante__icono svg { width: var(--icono-s); height: var(--icono-s); }
@media (min-width: 768px) { .flotante { position: absolute; z-index: 2; animation: flotar 5s ease-in-out infinite; }.flotante--arriba { top: 3%; left: var(--flotante-fuera); }.flotante--abajo { bottom: 6%; right: var(--flotante-fuera); animation-delay: 2.2s; } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--flotar)); } }

/* ---------- La conversación: ventana de web con tres mensajes (componente común, 01/10/2026) ----------
   La usan la portada («Contesta, agenda, recuerda») y «Webs inteligentes» (portada de la página).
   Contraste (la ventana va sobre --bg-page; la cabecera, sobre --bg-surface-raised):
     --text-support  / --bg-page            10,40:1 (horas)
     --text-brand    / --bg-page            12,22:1 («Contestado», «Cita puesta»)
     --text-neutral  / --bg-surface (800)   14,21:1 (mensaje del paciente; en la banda la
                       superficie sube a 700: 12,68:1)
     --text-inverse  / --bg-brand-bold       5,28:1 (respuesta de la web)
     --text-neutral  / --bg-surface-raised  12,68:1 · --text-heading 15,43:1 (cabecera)
     --text-heading  / --bg-banda           17,28:1 (frase de encima, en la banda)
     --text-subtle   / --bg-banda            7,61:1 (pie, en la banda y sobre --noche-azul) */
.conversa { margin: 0; width: 100%; max-width: var(--conversa-max); }
.conversa__frase { font: var(--font-conversa-frase); letter-spacing: var(--tracking-titular); color: var(--text-heading); margin-bottom: var(--sp-4); }
.conversa__ventana {
  overflow: hidden; border-radius: var(--radio-lg);
  background: var(--bg-page); border: var(--borde-fino) solid var(--border-neutral);
  box-shadow: var(--sombra-panel);
}
.conversa__cabecera {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); background: var(--bg-surface-raised);
  font: var(--font-body-xs); color: var(--text-neutral);
}
.conversa__cabecera strong { font-weight: 600; color: var(--text-heading); }
.conversa__lista { display: grid; gap: var(--sp-6); padding: var(--sp-6) var(--sp-4); }
.conversa__tramo { display: grid; grid-template-columns: var(--conversa-hora-col) 1fr; column-gap: var(--sp-3); align-items: start; }
.conversa__hora { padding-top: var(--sp-2); font: var(--font-label); color: var(--text-support); font-variant-numeric: tabular-nums; }
.conversa__hilo { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.conversa__msg { max-width: 88%; padding: var(--sp-2) var(--sp-3); border-radius: var(--radio-md); font: var(--font-body-s); }
.conversa__msg--cliente { align-self: flex-start; background: var(--bg-surface); border: var(--borde-fino) solid var(--border-neutral); color: var(--text-neutral); border-bottom-left-radius: var(--radio-xs); }
.conversa__msg--web { align-self: flex-end; background: var(--bg-brand-bold); color: var(--text-inverse); font-weight: 600; border-bottom-right-radius: var(--radio-xs); }
.conversa__hecho { align-self: flex-end; font: var(--font-body-xs); color: var(--text-brand); }
.conversa__pie { margin-top: var(--sp-3); font: var(--font-body-xs); color: var(--text-subtle); }

/* Movimiento (lo pone script.js al llegar a la vista; sin JS o con movimiento reducido, todo quieto):
   los tres tramos entran uno detrás de otro, una sola vez, con un desplazamiento corto */
.conversa.preparada .conversa__tramo { opacity: 0; transform: translateY(var(--desplaza)); }
.conversa.en-marcha .conversa__tramo {
  opacity: 1; transform: none;
  transition: opacity 0.4s var(--curva-salida), transform 0.5s var(--curva-salida);
  transition-delay: calc(0.3s + var(--i) * var(--conversa-escalon));
}

/* ---------- 4 · Pruébalo tú: el monitor (inventario #3) ----------
   Mismo monitor que la web publicada: marco negro mate, pantalla apagada que se
   enciende al pulsar una tarjeta (con brillo en el bisel y luz interior), reflejo
   de cristal, cuello y base. Solo cambia lo que hay dentro de la pantalla. */
.vitrina { background: var(--bg-vitrina); }
.vitrina__rejilla { display: grid; gap: var(--sp-12); grid-template-columns: 1fr; align-items: start; }
.vitrina__rejilla > * { min-width: 0; }
@media (min-width: 1024px) { .vitrina__rejilla { grid-template-columns: 2fr 3fr; gap: var(--sp-16); } }
.vitrina__tarjetas { display: flex; flex-direction: column; gap: var(--sp-4); }

.conmutador { display: inline-flex; align-self: flex-start; padding: var(--sp-1); border-radius: var(--radio-full); background: var(--bg-surface); border: var(--borde-fino) solid var(--border-neutral); }
.conmutador__opcion { min-height: var(--tactil); padding: var(--sp-2) var(--sp-6); border: 0; border-radius: var(--radio-full); background: transparent; color: var(--text-neutral); font: var(--font-label); cursor: pointer; transition: background var(--transicion), color var(--transicion); }
.conmutador__opcion[aria-pressed="true"] { background: var(--bg-brand-bold); color: var(--text-inverse); }

.vista-tarjeta {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-4); row-gap: var(--sp-1);
  text-align: left; padding: var(--sp-6); cursor: pointer;
  background: var(--bg-cristal-claro); border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-md);
  backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass));
  transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.vista-tarjeta:hover { border-color: var(--border-input); transform: translateY(var(--elevacion-tarjeta)); box-shadow: var(--sombra-tarjeta-alta); }
.vista-tarjeta[aria-pressed="true"] { border-color: var(--border-brand-medio); background: var(--bg-brand-activo); box-shadow: var(--anillo-activa); }
.vista-tarjeta__icono { grid-row: 1 / span 2; display: grid; place-items: center; width: var(--tactil); height: var(--tactil); border-radius: var(--radio-sm); background: var(--bg-brand-suave); border: var(--borde-fino) solid var(--border-brand-suave); color: var(--text-brand); }
.vista-tarjeta__icono svg { width: var(--icono-m); height: var(--icono-m); }
.vista-tarjeta__titulo { font: var(--font-heading-s); color: var(--text-heading); }
.vista-tarjeta__texto { font: var(--font-body-s); color: var(--text-neutral); }
.vitrina__abrir { align-self: flex-start; margin-top: var(--sp-2); }
.vitrina__abrir[aria-disabled="true"] { cursor: default; color: var(--text-subtle); border-color: var(--border-neutral); }
.vitrina__abrir[aria-disabled="true"]:hover { background: transparent; }

.monitor-sitio { display: flex; justify-content: center; }
@media (min-width: 1024px) { .monitor-sitio { position: sticky; top: calc(var(--cabecera-alto) + var(--sp-8)); } }
.monitor { width: 100%; max-width: var(--monitor-max); }
.monitor__marco {
  position: relative; padding: 2%; border-radius: var(--radio-marco);
  background: var(--negro-950); box-shadow: var(--sombra-marco);
  transition: box-shadow 0.4s ease-out;
}
.monitor__marco.encendido { box-shadow: var(--sombra-marco-on); }
.app-ventana { position: relative; overflow: hidden; border-radius: var(--radio-pantalla); background: var(--negro-1000); }
.app-ventana::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--bg-pantalla-luz); opacity: 0; transition: opacity 0.5s ease-out;
}
.app-ventana.encendida::before { opacity: 1; }
.app-ventana__barra { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--negro-1000); }
.app-ventana__luz { width: var(--punto-s); height: var(--punto-s); border-radius: var(--radio-full); }
.app-ventana__luz--roja { background: var(--semaforo-rojo); }
.app-ventana__luz--ambar { background: var(--semaforo-ambar); }
.app-ventana__luz--verde { background: var(--semaforo-verde); }
.app-ventana__url { margin-left: var(--sp-2); font: var(--font-body-xs); color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-ventana__cuerpo { position: relative; aspect-ratio: 16 / 10; min-height: var(--pantalla-alto); background: var(--negro-1000); }
.app-ventana__vista { position: absolute; inset: 0; display: none; opacity: 0; transform: scale(0.98); }
.app-ventana__vista img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.app-ventana__cuerpo.encendida .app-ventana__vista.activa { display: block; animation: vista-entra 0.4s ease-out forwards; }
@keyframes vista-entra { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
.app-ventana__apagada {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-8); background: var(--negro-1000); text-align: center;
  font: var(--font-body-s); color: var(--text-subtle);
  opacity: 1; transition: opacity 0.4s ease-out;
}
.app-ventana__cuerpo.encendida .app-ventana__apagada { opacity: 0; pointer-events: none; }
.monitor__reflejo { position: absolute; inset: 0; border-radius: var(--radio-pantalla); background: var(--bg-reflejo); pointer-events: none; }
.monitor__cuello { width: 24%; max-width: var(--cuello-ancho); height: var(--cuello-alto); margin: 0 auto; background: var(--pizarra-700); border-radius: 0 0 var(--radio-xs) var(--radio-xs); }
.monitor__base { width: var(--base-ancho); max-width: 55%; height: var(--base-alto); margin: 0 auto; border-radius: var(--radio-xs); background: var(--pizarra-600); box-shadow: var(--sombra-base); }
@media (max-width: 767.98px) {
  .app-ventana__cuerpo { min-height: 0; }
  .monitor__cuello { height: calc(var(--cuello-alto) * 0.6); }
}

/* ---------- 6 · Cómo trabajamos: línea de tiempo (inventario #14) ---------- */
.linea { display: grid; grid-template-columns: 1fr; max-width: calc(var(--cont-estrecho) * 0.6); }
.linea > * { min-width: 0; }
.linea__paso { display: grid; align-content: start; grid-template-columns: var(--linea-nodo) 1fr; column-gap: var(--sp-4); outline-offset: var(--sp-2); border-radius: var(--radio-sm); }
.linea__nodo { display: flex; flex-direction: column; align-items: center; }
.linea__num {
  display: grid; place-items: center; flex: none;
  width: var(--linea-nodo); height: var(--linea-nodo); border-radius: var(--radio-full);
  font: var(--font-heading-m); color: var(--text-support);
  background: var(--bg-surface); border: var(--borde-grueso) solid var(--border-neutral);
  position: relative; z-index: 1;
  transition: color 0.4s ease, background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.linea__tramo { flex: 1; width: var(--linea); min-height: var(--sp-8); background: var(--border-neutral); transition: background 0.5s ease, box-shadow 0.5s ease; }
.linea__texto { padding: var(--sp-3) 0 var(--sp-8); }
.linea__paso:last-child .linea__texto { padding-bottom: 0; }
.linea__titulo { font: var(--font-heading-s); margin-bottom: var(--sp-2); }
.linea__paso:hover .linea__num, .linea__paso:focus-visible .linea__num {
  color: var(--text-inverse); background: var(--bg-brand-bold); border-color: var(--bg-brand-bold);
  box-shadow: var(--glow-marca-fuerte); transform: scale(1.06);
}
.linea__paso:hover .linea__tramo, .linea__paso:focus-visible .linea__tramo { background: var(--bg-brand-bold); box-shadow: var(--glow-linea); }
.linea__paso:hover + .linea__paso .linea__num, .linea__paso:focus-visible + .linea__paso .linea__num { border-color: var(--bg-brand-hover); box-shadow: var(--glow-marca); }
@media (min-width: 1024px) {
  .linea { grid-template-columns: repeat(4, 1fr); max-width: none; gap: var(--sp-6); }
  .linea__paso { grid-template-columns: 1fr; }
  .linea__nodo { flex-direction: row; margin-bottom: var(--sp-4); }
  .linea__tramo { width: auto; height: var(--linea); min-height: 0; margin-left: calc(-1 * var(--linea)); margin-right: calc(-1 * var(--sp-6)); }
  .linea__texto { padding: 0; }
}

/* ---------- 11 · Reserva (v3): el calendario se carga al pulsar ---------- */
.calendario-previo {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-12) var(--sp-8); border-radius: var(--radio-lg);
  background: var(--bg-surface); border: var(--borde-fino) solid var(--border-neutral);
  box-shadow: var(--sombra-panel);
}
.calendario-previo__titulo { font: var(--font-heading-l); letter-spacing: var(--tracking-titular); color: var(--text-heading); }
.calendario-previo__texto { color: var(--text-subtle); max-width: 40ch; }
.calendario-previo .boton { margin-top: var(--sp-2); }
.calendario-previo .boton:disabled { cursor: progress; opacity: 0.7; }
.calendario-previo__estado:empty, .calendario-previo[hidden] { display: none; }
.calendario-previo__estado { font: var(--font-body-s); color: var(--text-heading); }
.calendario-marco { display: block; width: 100%; min-height: var(--calendario-alto-v3); border: 0; border-radius: var(--radio-md); background: var(--bg-surface); }
.calendario-marco.cargando { position: absolute; width: var(--borde-fino); height: var(--borde-fino); min-height: 0; opacity: 0; pointer-events: none; }
.reserva__calendario { position: relative; }

/* ---------- 8 · Quién soy ---------- */
.quien { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; align-items: start; }
.quien > * { min-width: 0; }
@media (min-width: 768px) { .quien { grid-template-columns: var(--foto-quien) 1fr; gap: var(--sp-12); align-items: stretch; } }
/* Sin marco: la foto llega a sangre por la izquierda (en móvil, por los dos lados),
   el borde derecho lo corta la costura escalonada del logo y abajo se funde con la noche */
.quien__foto {
  position: relative; margin: 0 calc(-1 * var(--margen-lateral));
  aspect-ratio: var(--foto-quien-ratio-movil); max-height: var(--foto-quien-alto-max);
  -webkit-mask-image: var(--foto-quien-fundido-abajo); mask-image: var(--foto-quien-fundido-abajo);
}
.quien__foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--foto-quien-encuadre);
  clip-path: var(--foto-quien-corte); filter: var(--foto-quien-filtro);
}
.quien__costura { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.quien__costura polyline { fill: none; stroke: var(--border-brand); stroke-width: var(--linea); opacity: var(--costura-opacidad); vector-effect: non-scaling-stroke; }
@media (min-width: 768px) {
  /* Distancia hasta el borde de la ventana; el ancho no pasa de los 560 px de la foto */
  .quien { --sangria: max(var(--margen-lateral), calc((100vw - var(--cont-max)) / 2)); }
  .quien__foto {
    aspect-ratio: auto; align-self: stretch; margin-top: var(--foto-quien-ajuste);
    width: min(var(--foto-quien-max), calc(100% + var(--sangria)));
    margin-right: 0; margin-left: calc(100% - min(var(--foto-quien-max), calc(100% + var(--sangria))));
    -webkit-mask-image: var(--foto-quien-fundido-abajo), var(--foto-quien-fundido-izq);
    -webkit-mask-composite: source-in;
    mask-image: var(--foto-quien-fundido-abajo), var(--foto-quien-fundido-izq);
    mask-composite: intersect;
  }
  .quien__foto img { object-position: var(--foto-quien-encuadre-ancho); }
}
.quien__foto-pendiente {
  width: var(--foto-quien); aspect-ratio: 4 / 5; max-width: 100%;
  display: grid; place-items: center;
  background: var(--bg-surface); border: var(--borde-fino) dashed var(--border-input); border-radius: var(--radio-lg);
  font: var(--font-metric-l); color: var(--text-subtle);
}
.quien__texto { display: flex; flex-direction: column; gap: var(--sp-4); max-width: var(--medida); }
.quien__texto .titulo-seccion { margin-bottom: var(--sp-2); }
.quien__texto .etiqueta { margin-bottom: 0; }
/* Desde el 01/10/2026 es el enlace a la página «Marca personal» */
.quien__marca { color: var(--text-brand); text-decoration: underline; text-decoration-thickness: var(--borde-fino); text-underline-offset: var(--linea-acento); transition: color var(--transicion); }
.quien__marca:hover { color: var(--text-heading); text-decoration-color: var(--border-brand); }

/* Texto en vertical (Vicky): una idea por línea, el hueco entre párrafos marca la pausa, los remates
   suben de peso y tamaño y el cierre es el más grande. Lo usan la portada y marca-personal.html.
   Contraste: --text-neutral 15,68:1 · --text-heading 19,07:1, sobre --bg-page. */
.quien__verso p { font: var(--font-verso); color: var(--text-neutral); }
/* Una línea de Vicky = un bloque. Sangría colgante: si la línea no cabe (móvil), lo que baja
   entra sangrado y no se confunde con la línea siguiente */
.quien__verso .verso { display: block; padding-left: var(--verso-sangria); text-indent: calc(-1 * var(--verso-sangria)); text-wrap: pretty; }
.quien__verso .verso--remate { padding-left: 0; text-indent: 0; text-wrap: balance; margin-block: var(--sp-1); font: var(--font-remate); letter-spacing: var(--tracking-titular); color: var(--text-heading); }
.quien__verso .verso--remate + .verso--remate { margin-top: 0; }
.quien__verso .verso--cierre { padding-left: 0; text-indent: 0; margin-top: var(--sp-2); font: var(--font-cierre); letter-spacing: var(--tracking-titular); color: var(--text-heading); text-wrap: balance; }

/* Quién soy de la portada (rehecho el 01/10/2026). Solo .quien--portada: marca-personal.html usa
   .quien y .quien__verso tal cual, con los tamaños de siempre.
   Jerarquía: lo primero que se lee es el texto. La foto es una firma pequeña y callada:
   - hasta 1023 px, al lado del titular (titular a la izquierda, foto a la derecha);
   - desde 1024 px, columna estrecha a la izquierda que se queda quieta mientras se lee.
   Contraste sobre --bg-page: versos --text-neutral 15,68:1 · remates, cierre y máquina
   --text-heading 19,07:1 · «Cómo trabajo» --text-heading 19,07:1 · enlace --text-brand 12,22:1. */
.quien.quien--portada {
  grid-template-columns: minmax(0, 1fr) var(--quien-foto-movil);
  grid-template-areas: "titulo foto" "texto texto";
  column-gap: var(--sp-4); row-gap: var(--sp-6); align-items: end;
  max-width: calc(var(--quien-verso-ancho) + 2 * var(--margen-lateral)); /* en tableta, la foto queda sobre el final de la línea, no en la otra punta */
}
.quien--portada .quien__titulo { grid-area: titulo; margin: 0; }
.quien--portada .quien__foto {
  grid-area: foto; width: 100%; margin: 0; aspect-ratio: var(--quien-foto-ratio); max-height: none; align-self: end;
  -webkit-mask-image: var(--foto-quien-fundido-abajo); mask-image: var(--foto-quien-fundido-abajo);
}
.quien--portada .quien__foto img { object-position: var(--foto-quien-encuadre); filter: var(--quien-foto-sutil); }
.quien--portada .quien__texto { grid-area: texto; gap: var(--sp-6); max-width: var(--quien-verso-ancho); width: 100%; }
.quien--portada .quien__verso p,
.quien--portada .quien__como-lista { font: var(--font-quien-verso); color: var(--text-neutral); }
.quien--portada .quien__verso .verso--remate { margin-block: var(--sp-2) 0; font: var(--font-quien-remate); letter-spacing: var(--tracking-titular); }
.quien--portada .quien__verso .verso--cierre { margin-top: var(--sp-2); font: var(--font-quien-remate); letter-spacing: var(--tracking-titular); }
/* Color (provisional): una variante por clase en el contenedor. Solo el título («soy»), tres remates
   de la historia y una etiqueta. El resto de remates, en blanco */
.quien--azul  { --quien-color: var(--azul-marca);   --quien-etiqueta-fondo: var(--bg-brand-bold); --quien-etiqueta-texto: var(--text-inverse); }
.quien--ambar { --quien-color: var(--text-support); --quien-etiqueta-fondo: var(--ambar-farola);  --quien-etiqueta-texto: var(--text-inverse); }
.quien--portada .quien__titulo-color { color: var(--quien-color, inherit); }
.quien--portada .quien__verso .verso--color { color: var(--quien-color, var(--text-heading)); }
.quien--portada .quien__verso .verso--etiqueta { margin-block: var(--sp-3) var(--sp-1); }
.quien--portada .quien__verso .verso--etiqueta > span {
  display: inline-block; padding: var(--sp-1) var(--sp-3); border-radius: var(--radio-xs);
  background: var(--quien-etiqueta-fondo, var(--bg-surface-raised)); color: var(--quien-etiqueta-texto, var(--text-heading));
  transform: rotate(var(--etiqueta-giro)); transform-origin: left center;
}
/* Cómo trabajo (Vicky, v3): lista vertical bajo una línea fina; el título, en la letra de la marca, sin mayúsculas */
.quien__como { display: grid; gap: var(--sp-2); padding-top: var(--sp-6); border-top: var(--borde-fino) solid var(--border-neutral); }
.quien--portada .quien__como .quien__como-titulo { font: var(--font-quien-como); color: var(--text-heading); }
.quien__como-lista { list-style: none; margin: 0; padding: 0; }
.quien__final { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); }
.quien--portada .quien__otro { font: var(--font-body-l); }

/* En breve (01/10/2026): el arranque a la vista y el resto con «Léeme entero» */
.quien__mas-boton {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tactil);
  font: var(--font-body-m-strong); color: var(--text-brand); cursor: pointer; list-style: none;
  text-decoration: underline; text-underline-offset: var(--linea-acento);
}
.quien__mas-boton::-webkit-details-marker { display: none; }
.quien__mas-boton::after { content: '↓'; transition: transform var(--transicion); }
.quien__mas[open] > .quien__mas-boton::after { transform: rotate(180deg); }
.quien__mas[open] > .quien__mas-boton { margin-bottom: var(--sp-6); }
.quien__mas-texto { display: flex; flex-direction: column; gap: var(--sp-6); }

@media (min-width: 1024px) {
  .quien.quien--portada {
    grid-template-columns: var(--quien-foto-portada) minmax(0, var(--quien-verso-ancho));
    grid-template-areas: "foto titulo" "foto texto";
    grid-template-rows: auto 1fr;
    justify-content: center; column-gap: var(--sp-16); row-gap: var(--sp-8); align-items: start;
    max-width: calc(var(--cont-max) + 2 * var(--margen-lateral));
  }
  .quien--portada .quien__foto { position: sticky; top: var(--quien-foto-arriba); align-self: start; }
  .quien--portada .quien__texto { gap: var(--sp-6); }
}

/* ---------- Firma corta (01/10/2026): pie de «Webs inteligentes» y «Marca personal» ----------
   La foto de «Quién soy» con el mismo tratamiento (sin marco, costura de «El encaje», fundido abajo),
   en pequeño, centrada con las dos líneas. Contraste: --text-heading 19,07:1 y --text-brand 12,22:1
   sobre --bg-page. */
.firma { padding: var(--sp-16) 0; }
.firma__fila { display: grid; gap: var(--sp-6); justify-items: center; text-align: center; }
@media (min-width: 768px) {
  .firma__fila { grid-template-columns: var(--firma-foto) auto; justify-content: center; align-items: center; justify-items: start; text-align: left; gap: var(--sp-12); }
}
.firma__foto {
  position: relative; margin: 0; width: var(--firma-foto); aspect-ratio: var(--quien-foto-ratio);
  -webkit-mask-image: var(--foto-quien-fundido-abajo); mask-image: var(--foto-quien-fundido-abajo);
}
.firma__foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--foto-quien-encuadre);
  clip-path: var(--foto-quien-corte); filter: var(--foto-quien-filtro);
}
.firma__texto p { font: var(--font-remate); letter-spacing: var(--tracking-titular); color: var(--text-heading); }
.firma__texto .verso { display: block; }
.firma__texto a { display: inline-block; margin-top: var(--sp-4); font: var(--font-body-m); }

/* ---------- 10 · Preguntas ---------- */
.faq { border-top: var(--borde-fino) solid var(--border-neutral); }
.faq details { border-bottom: var(--borde-fino) solid var(--border-neutral); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: var(--tactil); padding: var(--sp-6) 0;
  font: var(--font-heading-s); color: var(--text-heading); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font: var(--font-heading-m); color: var(--text-brand); transition: transform var(--transicion); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 var(--sp-6); max-width: var(--medida); }

/* ---------- Cierre (inventario #19) ---------- */
.cierre { padding: var(--seccion) 0; text-align: center; background: var(--bg-cierre), var(--bg-page); }
.cierre__titulo { font: var(--font-heading-l); letter-spacing: var(--tracking-titular); max-width: 22ch; margin: 0 auto; }
.cierre__texto { font: var(--font-body-l); color: var(--text-neutral); margin: var(--sp-6) auto var(--sp-8); max-width: var(--medida); }
.cierre__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); }
@media (max-width: 479.98px) { .cierre__botones .boton { width: 100%; } }

/* ---------- 11 · Reserva ---------- */
.reserva { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; }
.reserva > * { min-width: 0; }
@media (min-width: 1024px) { .reserva { grid-template-columns: 1fr 1.4fr; gap: var(--sp-12); } }
.reserva__pasos { counter-reset: r; display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-6); }
.reserva__pasos li { counter-increment: r; display: flex; gap: var(--sp-3); }
.reserva__pasos li::before { content: counter(r); font: var(--font-heading-s); color: var(--text-support); }
.reserva__calendario iframe { display: block; width: 100%; min-height: var(--calendario-alto); border: 0; overflow: hidden; border-radius: var(--radio-md); background: var(--bg-surface); }

/* ---------- Pie ---------- */
.pie { padding: var(--sp-12) 0 var(--sp-24); }
.pie__fila { display: flex; flex-direction: column; gap: var(--sp-4); }
.pie__lema { color: var(--text-subtle); }
.pie__secundarios { display: flex; flex-wrap: wrap; column-gap: var(--sp-6); }
.pie__secundarios a { display: inline-flex; align-items: center; min-height: var(--tactil); font: var(--font-body-m-strong); color: var(--text-heading); }
.pie__secundarios a:hover { color: var(--text-brand); }
.pie__legal { display: flex; flex-wrap: wrap; column-gap: var(--sp-6); }
.pie__legal a { display: inline-flex; align-items: center; min-height: var(--tactil); color: var(--text-neutral); text-decoration: underline; text-underline-offset: var(--linea-acento); }
.pie__legal a:hover { color: var(--text-brand); }
.pie__titular { font: var(--font-body-s); color: var(--text-subtle); }

/* ---------- Barra fija de reserva en móvil (inventario #16) ---------- */
.barra-reserva {
  position: fixed; left: var(--sp-4); bottom: var(--sp-4); z-index: 60;
  right: calc(var(--sp-4) + var(--chat-boton) + var(--sp-3));   /* deja sitio al botón del chat, abajo a la derecha */
  display: flex; align-items: center; justify-content: center; min-height: var(--boton-alto);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radio-boton);
  background: var(--bg-brand-bold); color: var(--text-inverse); font: var(--font-label); text-align: center;
  box-shadow: var(--sombra-barra);
  transform: translateY(calc(100% + var(--sp-8))); transition: transform var(--transicion);
}
.barra-reserva.visible { transform: none; }
.barra-reserva.sin-chat { right: var(--sp-4); }
/* Desde 900 px el botón de reservar ya está en la cabecera */
@media (min-width: 900px) { .barra-reserva { display: none; } }

/* ---------- Chat de n8n (COMPONENTES/chat-web.md) ----------
   Variables en body, no en :root: así ganan a las del widget. */
body {
  --chat--color--primary: var(--bg-brand-bold);
  --chat--color--primary-shade-50: var(--bg-brand-hover);
  --chat--color--primary--shade-100: var(--bg-brand-hover);
  --chat--color--secondary: var(--bg-brand-bold);
  --chat--color-secondary-shade-50: var(--bg-brand-hover);
  --chat--color-white: var(--text-heading);
  --chat--color-light: var(--bg-surface);
  --chat--color-dark: var(--text-heading);
  --chat--color-medium: var(--border-neutral);
  --chat--font-family: var(--font-cuerpo);
  --chat--border-radius: var(--radio-md);
  --chat--window--width: var(--chat-ancho);
  --chat--window--height: var(--chat-alto);
  --chat--window--border: var(--borde-fino) solid var(--border-neutral);
  --chat--window--border-radius: var(--radio-md);
  --chat--header--background: var(--bg-surface-raised);
  --chat--header--color: var(--text-heading);
  --chat--header-height: auto;
  --chat--body--background: var(--bg-surface);
  --chat--footer--background: var(--bg-surface);
  --chat--footer--border-top: var(--borde-fino) solid var(--border-neutral);
  --chat--message--bot--background: var(--bg-surface-raised);
  --chat--message--bot--color: var(--text-heading);
  --chat--message--user--background: var(--bg-brand-bold);
  --chat--message--user--color: var(--text-inverse);
  --chat--message--border-radius: var(--radio-md);
  --chat--input--background: var(--bg-surface-raised);
  --chat--input--text-color: var(--text-heading);
  --chat--input--border: var(--borde-fino) solid var(--border-input);
  --chat--input--container--background: var(--bg-surface-raised);
  --chat--input--container--border: var(--borde-fino) solid var(--border-neutral);
  --chat--input--send--button--color: var(--text-brand);
  --chat--input--send--button--background: transparent;
  --chat--input--send--button--background-hover: var(--bg-surface);
  --chat--input--send--button--color-hover: var(--text-heading);
  --chat--toggle--background: var(--bg-brand-bold);
  --chat--toggle--hover--background: var(--bg-brand-hover);
  --chat--toggle--active--background: var(--bg-brand-hover);
  --chat--toggle--color: var(--text-inverse);
  --chat--toggle--size: var(--chat-boton);
}
.chat-window { box-shadow: var(--sombra-lg); }
.n8n-chat .chat-layout .chat-header {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-3); align-items: center;
  padding: var(--sp-4) var(--sp-6);
  border-top: var(--linea-acento) solid var(--bg-brand-bold);
  border-bottom: var(--borde-fino) solid var(--border-neutral);
}
/* Sin foto confirmada: iniciales en círculo (chat-web.md). Cambiar por la foto cuando la haya */
.n8n-chat .chat-layout .chat-header::before {
  content: 'CD'; grid-row: 1 / span 2; width: var(--tactil); height: var(--tactil); border-radius: var(--radio-full);
  display: grid; place-items: center; font: var(--font-label); color: var(--text-brand);
  background: var(--bg-surface); box-shadow: 0 0 0 var(--linea) var(--bg-surface-raised), 0 0 0 var(--linea-acento) var(--border-neutral);
}
.n8n-chat .chat-layout .chat-header .chat-heading { grid-column: 2; }
.n8n-chat .chat-layout .chat-header h1 { font: var(--font-heading-s); }
.n8n-chat .chat-layout .chat-header p {
  grid-column: 2; display: flex; align-items: center; gap: var(--sp-2);
  margin: 0; font: var(--font-body-s); color: var(--text-neutral);
}
.n8n-chat .chat-layout .chat-header p::before {
  content: ''; flex: none; width: var(--punto); height: var(--punto); border-radius: var(--radio-full);
  background: var(--text-success);
}
/* Texto solo para lectores de pantalla («se abre en otra pestaña») */
.solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.n8n-chat .chat-footer .chat-aviso { margin: var(--sp-2) 0 0; font: var(--font-body-s); color: var(--text-subtle); text-align: center; }
.n8n-chat .chat-footer .chat-aviso a { color: var(--text-neutral); text-decoration: underline; }
.chat-window * { scrollbar-width: thin; scrollbar-color: var(--bg-surface-raised) transparent; }

/* ---------- Movimiento reducido: todo quieto, todo visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .conversa .conversa__tramo { transform: none !important; opacity: 1 !important; transition: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .revelar { opacity: 1; transform: none; }
  .menu.abierto > a, .menu.abierto .menu__pie { opacity: 1; transform: none; animation: none; }
  .portada__particulas, .boton--brillo::after, .burbuja__cursor { display: none; }
  .consola__pulso::after, .flotante, .escribiendo span { animation: none; }
  .cinta__pista { animation: none; }
  .cinta__marco { overflow-x: auto; }
  .cinta__pista[aria-hidden="true"] { display: none; }
  .app-ventana__cuerpo.encendida .app-ventana__vista.activa { animation: none; opacity: 1; transform: none; }
  .vista-tarjeta:hover, .boton--brillo:hover { transform: none; }
}