/* ============================================================================
   www.saycupartes.es — estilos de la película
   Concepto: una sola escena cinematográfica, sin scroll. La página ES la peli.
   Identidad visual ÚNICA (paleta "paper"). Esta landing NO tiene sistema de
   temas seleccionables — la convención del grupo Saycu (3 temas + selector
   oculto) es para APKs y paneles internos, no para webs públicas. Todo color
   sigue yendo por variables CSS para mantener la coherencia y permitir
   afinar la paleta desde un único sitio.
   ============================================================================ */

/* ---------------------------------------------------------------- variables */
:root {
  --bg:           #f4f1ea;
  --surface:     #ffffff;
  --ink:          #1a2332;
  --ink-2:        #2c3a4f;
  --muted:        #6c7686;
  --border:       #d9d2c2;
  --border-soft:  #e9e3d6;
  --accent:       #0f7a3b;
  --accent-2:     #14914a;
  --on-accent:    #ffffff;
  --warm:         #e6a72f;          /* atardecer y ondas de voz */
  --shadow-card:  0 14px 36px rgba(26,35,50,.10), 0 2px 6px rgba(26,35,50,.06);

  /* paisaje (gradiente cielo + tonos del entorno) */
  --sky-top:      #d9e8f5;
  --sky-bot:      #f4f1ea;
  --far:          #c9d4dc;
  --mid:          #93a3ad;
  --near:         #4f6a59;
  --road:         #2c3a4f;
  --road-line:    #f6c648;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100%; width: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Hanken Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* body en flex column: film (resto) = altura completa del viewport. El header
   se eliminó por decisión del cliente (mayo 2026); los 2 botones funcionales
   ("Saber más" y "Contacto") viven ahora como `.scene-actions` flotantes
   sobre la esquina superior derecha de la escena. */
body { display: flex; flex-direction: column; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- layout maestro
   Dos bandas verticales: escena / timeline. Sin scroll vertical. */
.film { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100dvh; }

.scene {
  position: relative; flex: 1 1 auto;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bot));
  isolation: isolate;
  --brand-edge-x: clamp(2vw, 3vw, 28px);
  --brand-mark-h: 118px;  /* logo completo con texto debajo (transparente) */
  --brand-mark-aspect: 1;  /* icono cuadrado (antes mark apaisado 1.626) */
  --brand-wordmark-w: 176px; /* ancho real de "SaycuPartes" en Fraunces 700 a 29px (el wordmark, no el icono, es lo más ancho del bloque) */
  --brand-wordmark-h: 18px;  /* font-size del wordmark, line-height 1 */
  --brand-block-w: max(calc(var(--brand-mark-h) * var(--brand-mark-aspect)), var(--brand-wordmark-w));
  --brand-block-h: calc(var(--brand-mark-h) + 4px + var(--brand-wordmark-h));
  --brand-gap: 16px;
}

.timeline {
  position: relative; z-index: 20;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px clamp(14px, 3vw, 28px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border-soft);
}

/* ---------------------------------------------------------------- wordmark
   Se eliminó el header (`.site-head`, `.brand`, `.brand-mark`, `.head-actions`,
   `.btn-pulse`) — los 2 botones funcionales viven ahora como `.scene-actions`.
   El wordmark se conserva sólo porque el modal de Contacto lo reutiliza
   dentro de `.login-brand`. */
.wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; letter-spacing: -.01em; font-size: 1.30rem;
  line-height: 1;
}
.wm-1 { color: var(--ink); }
.wm-2 { color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); font-weight: 600; font-size: .9rem;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .15s ease;
}
.btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.btn-sm { padding: 6px 12px; font-size: .82rem; border-radius: 9px; }
.btn-lg { padding: 12px 22px; font-size: 1rem; }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
.btn-ghost { background: transparent; }

/* ---------------------------------------------------------------- acciones flotantes
   2 botones discretos arriba a la derecha SOBRE la escena: "Saber más" abre
   el deck editorial; "Contacto" abre el modal. Sustituyen al header retirado. */
.scene-actions {
  position: absolute;
  top: clamp(12px, 1.5vw, 22px);
  right: clamp(16px, 2vw, 32px);
  z-index: 30;
  display: flex;
  gap: 10px;
  pointer-events: auto;
}
.scene-act {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 600; font-size: .82rem; letter-spacing: .005em;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .15s ease;
}
.scene-act:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

/* "Saber más" MUY vivo: crece de verdad, cambia a verde acento, da una
   pirueta completa (rotateY 360°, la moneda), pega un par de meneos y
   vuelve a reposo. Cada ciclo dura ~7 s — entre actos el botón hace 1
   pirueta visible. Si el usuario está sobre él (hover/focus), pausa para
   que pueda pulsarlo sin perseguirlo. */
#btn-saber-mas {
  animation: saber-alive 7s ease-in-out infinite;
  transform-origin: 50% 50%;
  /* perspectiva para que el rotateY se vea como una moneda 3D real */
  perspective: 600px;
  will-change: transform, background, color, border-color, box-shadow;
}
#btn-saber-mas:hover,
#btn-saber-mas:focus-visible {
  animation-play-state: paused;
}
@keyframes saber-alive {
  /* reposo */
  0% {
    transform: scale(1) rotateY(0deg) rotate(0deg);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    color: var(--ink);
    border-color: color-mix(in srgb, var(--ink) 14%, transparent);
    box-shadow: 0 6px 18px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
  }
  /* fase 1 (0–18%): latido GORDO + el botón pasa a verde acento */
  9% {
    transform: scale(1.22) rotateY(0deg) rotate(-2deg);
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 38%, transparent),
                0 4px 10px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  18% {
    transform: scale(1) rotateY(0deg) rotate(0deg);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    color: var(--ink);
    border-color: color-mix(in srgb, var(--ink) 14%, transparent);
    box-shadow: 0 6px 18px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
  }
  /* fase 2 (18–50%): pirueta moneda (rotateY 360°) cambiando de color a mitad */
  34% {
    transform: scale(1.12) rotateY(180deg) rotate(0deg);
    background: var(--accent-2);
    color: var(--on-accent);
    border-color: var(--accent-2);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 32%, transparent);
  }
  50% {
    transform: scale(1) rotateY(360deg) rotate(0deg);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    color: var(--ink);
    border-color: color-mix(in srgb, var(--ink) 14%, transparent);
    box-shadow: 0 6px 18px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
  }
  /* fase 3 (50–70%): zarandeo (wiggle exagerado de rotación) */
  55% { transform: scale(1.08) rotateY(360deg) rotate(-10deg); }
  60% { transform: scale(1.08) rotateY(360deg) rotate( 10deg); }
  65% { transform: scale(1.06) rotateY(360deg) rotate( -7deg); }
  70% { transform: scale(1.04) rotateY(360deg) rotate(  4deg); }
  /* fase 4 (70–82%): segundo latido más corto */
  78% {
    transform: scale(1.14) rotateY(360deg) rotate(0deg);
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 32%, transparent);
  }
  /* reposo (82–100%) con tiempo de "respiración" antes de repetir */
  86%, 100% {
    transform: scale(1) rotateY(360deg) rotate(0deg);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    color: var(--ink);
    border-color: color-mix(in srgb, var(--ink) 14%, transparent);
    box-shadow: 0 6px 18px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
  }
}
/* En conversación activa la peli es lo importante: rebajamos la energía
   del botón para no competir con el FAB y las burbujas. */
[data-conversation="active"] #btn-saber-mas {
  animation-duration: 10.5s;
  opacity: .88;
}

/* ---------------------------------------------------------------- escena · cielo */
.sky {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-bot) 80%);
  transition: background .8s ease;
  pointer-events: none;
}
/* Ciclo día → mediodía → atardecer → noche → amanecer → día en 60 s, SIEMPRE
   activo (independiente del acto y de si hay conversación o no). Antes vivía
   atado a `.scene.is-idle` y se paraba en cuanto entraban las burbujas; ahora
   corre siempre en su propia capa, como un reloj de fondo de la peli. */
.sky        { animation: idle-sky        60s linear infinite; }
.sun        { animation: idle-sun        60s linear infinite; }
.moon       { animation: idle-moon       60s linear infinite; }
.stars      { animation: idle-stars      60s linear infinite,
                         idle-stars-path 60s linear infinite; }
.layer-far  { animation: idle-far        60s linear infinite; }
.layer-mid  { animation: idle-mid        60s linear infinite; }
.layer-near { animation: idle-near       60s linear infinite; }
.road       { animation: idle-road       60s linear infinite; }
.road::before { animation: idle-road-line 60s linear infinite; }

/* CONVERSACIÓN ACTIVA: en cuanto arranca el chat mudo automático (tras los
   30 s iniciales) o el usuario pulsa el FAB para escuchar la voz, marcamos
   `<html data-conversation="active">`. Eso (a) PAUSA el ciclo día↔noche
   para que el cielo no distraiga durante el diálogo y (b) reposiciona el
   FAB del micro al CENTRO de la escena (entre la furgoneta y el móvil),
   como si fuera el micrófono físico de la película. */
[data-conversation="active"] .sky,
[data-conversation="active"] .sun,
[data-conversation="active"] .moon,
[data-conversation="active"] .stars,
[data-conversation="active"] .stars span,
[data-conversation="active"] .layer-far,
[data-conversation="active"] .layer-mid,
[data-conversation="active"] .layer-near,
[data-conversation="active"] .road,
[data-conversation="active"] .road::before { animation-play-state: paused; }

/* Cielo: sincronizado con la posición del sol. En 0% es de noche (sol oculto
   bajo el horizonte por la izquierda); va aclarando a medida que el sol sube;
   MÁXIMA LUZ a 30% (cenit del sol); empieza a oscurecer DESPUÉS del cenit. */
@keyframes idle-sky {
  0%   { background: linear-gradient(to bottom, #060d22 0%, #14223e 70%, #1a2a4a 100%); }   /* noche profunda */
  4%   { background: linear-gradient(to bottom, #0e1830 0%, #243758 75%, #3c3a5a 100%); }   /* primera claridad violeta */
  8%   { background: linear-gradient(to bottom, #2b3c5a 0%, #6e5a72 60%, #c08560 100%); }   /* amanecer azul→naranja en horizonte */
  14%  { background: linear-gradient(to bottom, #6a8fb6 0%, #d8a684 70%, #f0c79b 100%); }   /* amanecer rosado */
  20%  { background: linear-gradient(to bottom, #a9c8e0 0%, #e8d4b9 90%); }                 /* primera mañana */
  26%  { background: linear-gradient(to bottom, #c4dcec 0%, #efe6d3 90%); }                 /* mañana */
  30%  { background: linear-gradient(to bottom, #d6e7f5 0%, #f5efe0 85%); }                 /* MEDIODÍA — máxima luz */
  36%  { background: linear-gradient(to bottom, #c8dff0 0%, #f1e8d2 90%); }                 /* primeros tonos de tarde */
  42%  { background: linear-gradient(to bottom, #b8d4eb 0%, color-mix(in srgb, var(--sky-bot) 80%, var(--warm) 20%) 90%); }
  48%  { background: linear-gradient(to bottom, #d9b896 0%, #e69e6f 70%, #c8765c 100%); }   /* atardecer cálido */
  54%  { background: linear-gradient(to bottom, #8c6a8e 0%, #b4707a 60%, #6e4858 100%); }   /* atardecer rojo→violeta */
  60%  { background: linear-gradient(to bottom, #4e4870 0%, #6b5a8e 50%, #5a4860 100%); }   /* anochecer violáceo */
  66%  { background: linear-gradient(to bottom, #0e1830 0%, #243758 75%, #2c4470 100%); }   /* noche */
  100% { background: linear-gradient(to bottom, #060d22 0%, #14223e 70%, #1a2a4a 100%); }   /* noche profunda */
}

/* Sol: arco Este→Oeste. Sale por la izquierda abajo, sube hasta el cenit,
   baja por la derecha. translateX en vw (relativo al viewport) y translateY
   en px para el arco. -50% mantiene el centrado horizontal del elemento. */
@keyframes idle-sun {
  0%   { opacity: 0;   transform: translateX(calc(-50% - 46vw)) translateY(360px); }
  3%   { opacity: .4;  transform: translateX(calc(-50% - 44vw)) translateY(320px); }
  8%   { opacity: 1;   transform: translateX(calc(-50% - 38vw)) translateY(220px); }
  18%  { opacity: 1;   transform: translateX(calc(-50% - 24vw)) translateY(80px);  }
  30%  { opacity: 1;   transform: translateX(-50%)              translateY(0);     }   /* cenit */
  42%  { opacity: 1;   transform: translateX(calc(-50% + 24vw)) translateY(80px);  }
  50%  { opacity: 1;   transform: translateX(calc(-50% + 38vw)) translateY(220px); }
  55%  { opacity: .5;  transform: translateX(calc(-50% + 44vw)) translateY(320px); }
  58%  { opacity: 0;   transform: translateX(calc(-50% + 46vw)) translateY(360px); }
  100% { opacity: 0;   transform: translateX(calc(-50% - 46vw)) translateY(360px); }
}

/* Luna: arco como el sol, pero DESFASADO — sale por la izquierda cuando el
   sol está bajando por la derecha (~50%) y baja por la derecha cuando el sol
   vuelve a salir por la izquierda (~100% = 0% del siguiente ciclo). */
@keyframes idle-moon {
  0%   { opacity: 0;   transform: translateX(calc(-50% + 46vw)) translateY(360px); }
  48%  { opacity: 0;   transform: translateX(calc(-50% - 46vw)) translateY(360px); }
  53%  { opacity: .5;  transform: translateX(calc(-50% - 38vw)) translateY(220px); }
  62%  { opacity: 1;   transform: translateX(calc(-50% - 24vw)) translateY(80px);  }
  75%  { opacity: 1;   transform: translateX(-50%)              translateY(0);     }   /* cenit nocturno */
  88%  { opacity: 1;   transform: translateX(calc(-50% + 24vw)) translateY(80px);  }
  95%  { opacity: 1;   transform: translateX(calc(-50% + 38vw)) translateY(220px); }
  99%  { opacity: .4;  transform: translateX(calc(-50% + 44vw)) translateY(320px); }
  100% { opacity: 0;   transform: translateX(calc(-50% + 46vw)) translateY(360px); }
}

/* Estrellas: opacity (idle-stars) + arco igual al de la luna (idle-stars-path).
   El grupo .stars se mueve completo siguiendo la curva nocturna. Sincronizado:
   visibles al inicio (noche), se apagan al amanecer, vuelven al atardecer. */
@keyframes idle-stars {
  0%       { opacity: 1;   }   /* noche profunda */
  4%       { opacity: .9;  }
  8%       { opacity: .4;  }   /* primeros claros */
  12%, 50% { opacity: 0;   }   /* día */
  56%      { opacity: .3;  }   /* atardecer */
  62%      { opacity: .75; }
  68%, 95% { opacity: 1;   }
  100%     { opacity: 1;   }
}
@keyframes idle-stars-path {
  0%   { transform: translate(46vw, 360px); }
  48%  { transform: translate(-46vw, 360px); }
  53%  { transform: translate(-38vw, 220px); }
  62%  { transform: translate(-24vw, 80px); }
  75%  { transform: translate(0, 0); }
  88%  { transform: translate(24vw, 80px); }
  95%  { transform: translate(38vw, 220px); }
  99%  { transform: translate(44vw, 320px); }
  100% { transform: translate(46vw, 360px); }
}
/* (Animación del grupo .stars ya declarada arriba, fuera de .is-idle, para
   que las estrellas sigan describiendo su arco aunque haya conversación.) */

/* Paisaje: oscurece de noche. Sincronizado con el sol: noche en 0%/100%,
   pico de claridad en 30% (cenit), oscureciendo después del 42%. */
@keyframes idle-far {
  0%        { color: #1f2c45;       }   /* noche profunda */
  8%        { color: #4a4566;       }
  18%, 42%  { color: var(--far);    }   /* día claro */
  50%       { color: #7a6a78;       }   /* atardecer */
  60%       { color: #4a4566;       }
  68%, 100% { color: #1f2c45;       }
}
@keyframes idle-mid {
  0%        { color: #1c2740;       }
  8%        { color: #3a334f;       }
  18%, 42%  { color: var(--mid);    }
  50%       { color: #5e4a4c;       }
  60%       { color: #3a334f;       }
  68%, 100% { color: #1c2740;       }
}
@keyframes idle-near {
  0%        { color: #142036;       }
  8%        { color: #2a2540;       }
  18%, 42%  { color: var(--near);   }
  50%       { color: #45393a;       }
  60%       { color: #2a2540;       }
  68%, 100% { color: #142036;       }
}
@keyframes idle-road {
  0%        { background: #050a17;     }
  8%        { background: #15131e;     }
  18%, 42%  { background: var(--road); }
  50%       { background: #2a2030;     }
  60%       { background: #15131e;     }
  68%, 100% { background: #050a17;     }
}
@keyframes idle-road-line {
  0%        { background: #0a1224; }
  18%, 42%  { background: color-mix(in srgb, var(--road) 70%, var(--ink-2) 30%); }
  68%, 100% { background: #0a1224; }
}

/* Sol y Luna: posicionados arriba-centro del cielo y movidos en arco con
   transform translateX/Y. Centrados en X con calc(50% - mitad-del-ancho)
   estimado en el clamp; los transforms del keyframe llevan el arco completo. */
.sun, .moon {
  position: absolute;
  top: 8%;
  left: 50%;
  width: clamp(70px, 8vw, 110px); height: clamp(70px, 8vw, 110px);
  z-index: 1;
  opacity: 0;
  transform: translateX(-50%);  /* posición inicial centrada */
  transition: opacity .8s ease;
  pointer-events: none;
  will-change: transform, opacity;
}
.sun  { color: #f7c948; filter: drop-shadow(0 0 18px rgba(247, 201, 72, .55)); }
.moon { color: #f3eedd; filter: drop-shadow(0 0 16px rgba(255, 246, 210, .35)); }

/* Antes el sol/luna se posicionaban estáticamente según el acto; ahora ambos
   describen su arco completo en el ciclo `idle-sun` / `idle-moon` siempre,
   así que estas reglas estáticas se han retirado para no anularlo. */

/* Rotación lenta de los rayos del sol para que tenga "vida" */
.sun-rays { transform-origin: 60px 60px; animation: sun-rays 22s linear infinite; }
@keyframes sun-rays { to { transform: rotate(360deg); } }

/* Estrellas: solo visibles en actos noche */
.stars { position: absolute; inset: 0 0 50% 0; z-index: 1; pointer-events: none; }
.stars span {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 3px; height: 3px; border-radius: 50%;
  background: #f8f6df;
  box-shadow: 0 0 6px rgba(255,255,210,.85), 0 0 12px rgba(255,255,210,.55);
  opacity: 0;
  animation: twinkle 3s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.6); }
  40%, 70% { opacity: 1; transform: scale(1); }
}

/* Las capas y la carretera se oscurecen siguiendo el ciclo idle (idle-far /
   idle-mid / idle-near / idle-road), declarado arriba: ya no hace falta
   forzar valores nocturnos según el acto. */

/* ---------------------------------------------------------------- escena · paisaje en parallax
   Cada capa es 200% de ancho; el viewBox se desplaza con translateX -50% en bucle. */
.layer {
  position: absolute; left: 0; right: 0;
  pointer-events: none;
  overflow: hidden;
}
.layer svg {
  display: block;
  width: 200%; height: 100%;
  animation-name: scroll-x;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
.layer-far  { bottom: 30%; height: 22%; color: var(--far);  z-index: 1; opacity: .85; }
.layer-far  svg { animation-duration: 90s; }
.layer-mid  { bottom: 22%; height: 24%; color: var(--mid);  z-index: 2; opacity: .9;  }
.layer-mid  svg { animation-duration: 45s; }
.layer-near { bottom: 16%; height: 12%; color: var(--near); z-index: 3; }
.layer-near svg { animation-duration: 22s; }

/* La furgoneta avanza HACIA LA DERECHA: el paisaje detrás se desplaza
   relativo al observador hacia la izquierda. */
@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* en obra (stopped) las capas se paran */
.scene[data-state="stopped"] .layer svg { animation-play-state: paused; }

/* ---------------------------------------------------------------- carretera */
.road {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 16%;
  background: var(--road);
  z-index: 4;
  overflow: hidden;
}
.road::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: color-mix(in srgb, var(--road) 70%, var(--ink-2) 30%);
}
.road-lines {
  position: absolute; left: -200px; right: -200px;
  top: 50%; height: 6px;
  background: repeating-linear-gradient(to right,
    var(--road-line) 0 60px, transparent 60px 130px);
  animation: road-scroll 1.2s linear infinite;
}
@keyframes road-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-130px); }
}
.scene[data-state="stopped"] .road-lines { animation-play-state: paused; }

/* ---------------------------------------------------------------- furgoneta */
.van {
  position: absolute;
  /* 12% del alto de la escena MENOS 60 px (petición cliente: estaba flotando) */
  bottom: calc(12% - 60px);
  left: clamp(2vw, 5vw, 70px);
  width: clamp(300px, 40vw, 540px);
  /* sin aspect-ratio fijo: lo decide el <img> activo (v1, v2 o v3). */
  z-index: 6;
  animation: van-bounce 1.6s ease-in-out infinite;
  will-change: transform;
}
/* Furgoneta — tres versiones; se conmutan con data-van-version="1|2|3" en .van */
.van-img {
  display: block;
  width: 100%; height: auto;
}
/* La <img> activa marca el flow del wrapper; los overlay SVG son absolute
   y rellenan toda esa caja. */
svg.van-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
/* Solo los <img> se espejan (forma original mira a la izq, queremos a la der).
   Los overlays SVG (ruedas, conductor) NO; sus coordenadas ya están donde
   tienen que aparecer en pantalla TRAS el espejo del img. */
/* v1 y v2 nacen mirando a la izquierda y se espejan. v3 (hippie) ya mira
   a la derecha, NO se espeja. */
img.van-img--v1, img.van-img--v2 { transform: scaleX(-1); }
.van[data-van-version="1"] .van-img--v2,
.van[data-van-version="1"] .van-img--v3 { display: none; }
.van[data-van-version="2"] .van-img--v1,
.van[data-van-version="2"] .van-img--v3 { display: none; }
.van[data-van-version="3"] .van-img--v1,
.van[data-van-version="3"] .van-img--v2 { display: none; }

/* driver overlay (aplica a ambas versiones) */
.driver-overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
/* Overlay de ruedas (solo v2: cubren las ruedas estáticas del SVG con
   tapacubos animados girando) */
.van-wheels {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
/* Parche para tapar zonas residuales del SVG (p.ej. donde estaba el arcoíris) */
.van-cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ============ v2: estilos flat (sin brillos/sombras) ============ */
.van2-shadow      { fill: var(--ink); opacity: .18; }
.van2-body        { fill: var(--accent); }
.van2-bumper      { fill: color-mix(in srgb, var(--accent) 60%, var(--ink) 40%); }
.van2-glass       { fill: color-mix(in srgb, var(--sky-top) 70%, #fff 30%); stroke: color-mix(in srgb, var(--accent) 50%, var(--ink) 50%); stroke-width: 1.5; }
.van2-mirror      { fill: var(--ink); }
.van2-edge        { stroke: color-mix(in srgb, var(--accent) 40%, var(--ink) 60%); stroke-width: 2; stroke-linecap: round; }
.van2-edge-fill   { fill: color-mix(in srgb, var(--accent) 40%, var(--ink) 60%); }
.van2-light       { fill: var(--warm); filter: drop-shadow(0 0 4px var(--warm)); }
.van2-logo-bg     { fill: var(--surface); stroke: color-mix(in srgb, var(--accent) 40%, var(--ink) 60%); stroke-width: 1.4; }
.van2-logo-mark > rect:first-child { fill: var(--accent); }
.van2-logo-mark > rect[fill="none"] { stroke: var(--accent); }
.van2-logo-mark > path { stroke: var(--accent); }
.van2-tyre        { fill: #1a1a1a; }
.van2-rim         { fill: color-mix(in srgb, var(--surface) 75%, var(--muted) 25%); }
.van2-spoke       { fill: color-mix(in srgb, var(--muted) 65%, var(--ink) 35%); }
.van2-hub         { fill: color-mix(in srgb, var(--muted) 50%, var(--ink) 50%); }

/* v3 hippie — tapacubos en el morado de los originales */
.hippie-rim   { fill: #4a2566; }
.hippie-spoke { fill: #f3d8e8; opacity: .85; }
.hippie-hub   { fill: #f3d8e8; }
@keyframes van-bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}
.scene[data-state="stopped"] .van { animation: none; }

.van svg { width: 100%; height: auto; display: block; overflow: visible; }
.van-shadow { fill: var(--ink); opacity: .14; }
.van-body { fill: var(--accent); stroke: var(--accent-2); stroke-width: 2; }
.van-glass { fill: color-mix(in srgb, var(--sky-top) 60%, #fff 40%); stroke: var(--accent-2); stroke-width: 1.5; }
.van-door { fill: color-mix(in srgb, var(--accent) 80%, var(--ink) 20%); stroke: var(--accent-2); stroke-width: 1.5; }
.van-door-edge { stroke: color-mix(in srgb, var(--accent) 30%, var(--ink) 70%); stroke-width: 1.4; }
.van-logo-bg { fill: #fff; stroke: var(--accent-2); stroke-width: 1.5; }
.van-logo-clip { fill: var(--accent); }
.van-logo-mark rect[stroke-width="6"] { stroke: var(--accent); }
.van-logo-mark path { stroke: var(--accent); }
.driver-head { fill: #e6c69b; }
.driver-body { fill: var(--ink-2); }
.driver-cap  { fill: var(--ink-2); }
/* Bote propio de la cabeza, desfasado del bote de la furgo (1.6s) */
.driver-bobbing {
  animation: driver-bob 1.45s ease-in-out 0.45s infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes driver-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.scene[data-state="stopped"] .driver-bobbing { animation: none; }
@media (prefers-reduced-motion: reduce) { .driver-bobbing { animation: none; } }
.driver-voice path { fill: none; stroke: var(--warm); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.scene[data-driver="speaking"] .driver-voice path {
  animation: voice-pulse 1s ease-in-out infinite;
}
.scene[data-driver="speaking"] .driver-voice path:nth-child(1) { animation-delay: 0s; }
.scene[data-driver="speaking"] .driver-voice path:nth-child(2) { animation-delay: .15s; }
.scene[data-driver="speaking"] .driver-voice path:nth-child(3) { animation-delay: .30s; }
@keyframes voice-pulse {
  /* Conductor mira hacia el frente (derecha): las ondas se desplazan
     ligeramente hacia la derecha al pulsar. */
  0%, 100% { opacity: 0; transform: translateX(0); }
  50%      { opacity: 1; transform: translateX(3px); }
}
.van-light { fill: var(--warm); filter: drop-shadow(0 0 5px var(--warm)); }
.tyre { fill: var(--ink); }
.rim  { fill: color-mix(in srgb, var(--surface) 75%, var(--muted) 25%); }
.spokes rect { fill: color-mix(in srgb, var(--muted) 60%, var(--ink) 40%); }
.wheel .spokes { animation: spin 1.4s linear infinite; transform-origin: center; transform-box: fill-box; }
.scene[data-state="stopped"] .wheel .spokes { animation: none; }
/* Avance hacia la derecha → ruedas giran en sentido horario */
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- móvil flotante */
.phone {
  position: absolute;
  right: clamp(2vw, 4vw, 70px);
  bottom: 14%;
  width: clamp(168px, 20vw, 270px);
  aspect-ratio: 9 / 19;
  z-index: 9;
  animation: phone-float 4.6s ease-in-out infinite;
  will-change: transform;
}
@keyframes phone-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(-2deg); }
}
.phone-frame {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, #1d2638, #0c1119);
  border-radius: 32px;
  padding: 10px;
  box-shadow: 0 30px 56px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.25),
              inset 0 0 0 1.5px rgba(255,255,255,.06);
  position: relative;
}
.phone-screen {
  width: 100%; height: 100%;
  background: var(--surface);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
}

/* (Antes había aquí una status bar CSS — `.phone-status*` y `.phone-cam` —
   simulando hora 9:41 / 5G / wifi / batería y la cámara frontal del móvil.
   Las capturas reales ya traen su propia banda negra superior con esos
   elementos, así que se retiraron para evitar el doble status bar.) */

/* Las "pantallas" del panel: una por momento de la conversación. Una visible
   a la vez según [data-screen="NN"] del .phone-screen, que se va actualizando
   desde theme.js con cues `action: 'screen:NN'`. */
.ps { position: absolute; inset: 0; padding: 26px 12px 10px; display: none;
      animation: ps-in .4s ease both; }
.phone-screen[data-screen="00"] .ps-screen-00,
.phone-screen[data-screen="01"] .ps-screen-01,
.phone-screen[data-screen="02"] .ps-screen-02,
.phone-screen[data-screen="03"] .ps-screen-03,
.phone-screen[data-screen="04"] .ps-screen-04,
.phone-screen[data-screen="05"] .ps-screen-05,
.phone-screen[data-screen="06"] .ps-screen-06,
.phone-screen[data-screen="07"] .ps-screen-07,
.phone-screen[data-screen="08"] .ps-screen-08,
.phone-screen[data-screen="09"] .ps-screen-09,
.phone-screen[data-screen="10"] .ps-screen-10,
.phone-screen[data-screen="11"] .ps-screen-11,
.phone-screen[data-screen="12"] .ps-screen-12 { display: block; }
@keyframes ps-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* (Antes existía aquí .ps-email-fix, un overlay HTML/CSS para tapar
   "llor@llor.net" sobre screen-12. Sustituido por edición directa del PNG
   con Pillow — más fiable que calibrar porcentajes sobre object-fit:contain. */

/* Variante "foto": la pantalla del móvil es una captura real de la app
   (assets/img/app/act-N.png). Fondo negro detrás y `object-fit: contain`
   para que la imagen entera quepa SIN que las esquinas redondeadas del
   `.phone-screen` ni el notch se la coman: las zonas sobrantes salen
   negras, simulando el bisel del dispositivo. */
.ps--photo {
  padding: 0;
  background: #000;
}
.ps-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
}

/* ---------------------------------------------------------------- SOS hotspot
   Botón rojo redondo de "emergencia" que aparece dibujado en TODAS las
   capturas del móvil (esquina inferior izquierda). Encima ponemos un
   hotspot transparente y redondo del mismo diámetro para que sea
   clicable. Al pulsar, theme.js abre la burbuja `.phone-sos-tip` con la
   explicación (3 frases mágicas: "Pide socorro" / "Auxilio" / "Socorro").
   Posición y tamaño en porcentajes para que aguanten cualquier
   clamp() de .phone. */
.phone-sos-hotspot {
  position: absolute;
  /* +2 px a la derecha (cliente N1, 2026-05-25 — afinado): 3.2 % → 3.9 %. */
  left: 3.9%;
  /* Ajustes 2026-05-25:
       - Subido 50 px sobre la posición inicial (5.5 % → 14.5 %).
       - Bajado 8 px tras revisión visual del cliente N1 (14.5 % → 13 %).
       - Bajado 2 px más (13 % → 12.6 %).
       - Tras normalizar PNGs el cliente vio que había quedado 1 px bajo:
         subido 1 px (12.6 % → 12.8 %). 0.2 % ≈ 1 px sobre .phone-screen
         de ~550 px de alto.
     Todo en porcentaje (no en calc(... + Npx)) para que en móvil pequeño
     el hotspot siga clavado al botón rojo dibujado en la imagen, que se
     escala proporcionalmente al alto del .phone-screen. */
  bottom: 12.8%;
  width: 19%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 12;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s ease;
}
.phone-sos-hotspot:focus { outline: none; }
.phone-sos-hotspot:focus-visible,
.phone-sos-hotspot:hover {
  transform: scale(1.06);
}
.phone-sos-hotspot__halo {
  position: absolute; inset: -6%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  /* SOS-rojo (color hardcoded a propósito: tiene que coincidir con el rojo
     del FAB pintado en la imagen; no es un token del tema). */
  box-shadow:
    0 0 0 3px rgba(220, 38, 38, .55),
    0 0 0 8px rgba(220, 38, 38, .25),
    0 0 18px 4px rgba(220, 38, 38, .35);
  transition: opacity .25s ease;
}
.phone-sos-hotspot:hover .phone-sos-hotspot__halo,
.phone-sos-hotspot:focus-visible .phone-sos-hotspot__halo,
.phone-sos-hotspot[aria-expanded="true"] .phone-sos-hotspot__halo {
  opacity: 1;
}
/* Pulso muy ligero (1.5 s) que solo arranca cuando todavía NO se ha pulsado,
   para invitar a descubrirlo. Lo apaga theme.js añadiendo data-seen="true"
   a #phone-sos-hotspot tras el primer click. */
@keyframes sos-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .0),
                         0 0 0 0 rgba(220, 38, 38, .0); }
  50%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, .35),
                         0 0 14px 2px rgba(220, 38, 38, .25); }
}
.phone-sos-hotspot:not([data-seen="true"]) .phone-sos-hotspot__halo {
  animation: sos-pulse 2.2s ease-in-out infinite;
  opacity: .9;
}

/* Burbuja explicativa del SOS — sale a la izquierda del móvil */
.phone-sos-tip {
  position: absolute;
  right: calc(100% + 14px);
  /* Sube/baja al unísono con el hotspot para que la cola apunte al FAB rojo. */
  bottom: 13.3%;
  width: clamp(220px, 22vw, 320px);
  z-index: 11;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.phone-sos-tip[data-open="true"] {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.phone-sos-tip__bubble {
  position: relative;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 14px;
  padding: 14px 30px 12px 14px;
  box-shadow: 0 16px 36px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
  font-size: 14px;
  line-height: 1.45;
}
.phone-sos-tip__title {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: #c0392b;
  letter-spacing: .01em;
}
.phone-sos-tip__bubble p {
  margin: 0 0 6px 0;
}
.phone-sos-tip__bubble p:last-of-type {
  margin-bottom: 0;
}
.phone-sos-tip__bubble em {
  font-style: normal;
  font-weight: 600;
  color: #8b1f17;
  background: color-mix(in srgb, #c0392b 12%, transparent);
  padding: 1px 6px;
  border-radius: 5px;
  white-space: nowrap;
}
.phone-sos-tip__bubble::after {
  /* cola del bocadillo apuntando al FAB rojo del móvil */
  content: "";
  position: absolute;
  right: -10px;
  bottom: 12%;
  width: 0; height: 0;
  border-style: solid;
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent var(--surface);
  filter: drop-shadow(1px 0 0 color-mix(in srgb, var(--ink) 12%, transparent));
}
.phone-sos-tip__close {
  position: absolute;
  top: 4px; right: 6px;
  width: 22px; height: 22px;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
  transition: background .15s ease, color .15s ease;
}
.phone-sos-tip__close:hover,
.phone-sos-tip__close:focus-visible {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
  outline: none;
}
/* Sin movimiento extra para usuarios que lo piden */
@media (prefers-reduced-motion: reduce) {
  .phone-sos-hotspot,
  .phone-sos-hotspot__halo,
  .phone-sos-tip { animation: none !important; transition: none !important; }
}

.ps-bar {
  display: flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700;
  color: var(--ink); padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.ps-mark { width: 14px; height: 14px; color: var(--accent); flex: none; }

.ps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ps-list li {
  background: color-mix(in srgb, var(--bg) 65%, var(--surface));
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  padding: 6px 8px;
  font-size: .68rem;
  display: flex; flex-direction: column; gap: 1px;
}
.ps-list li b { font-size: .74rem; color: var(--ink); }
.ps-list li span { color: var(--muted); }

.ps-field { margin-bottom: 7px; }
.ps-field label {
  display: block; font-size: .58rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 2px;
}
.ps-val {
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  padding: 5px 7px;
  font-size: .72rem; font-weight: 600;
  color: var(--ink);
  min-height: 22px;
}
.ps-val[data-fill] { opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; }
.ps-val[data-fill].is-filled { opacity: 1; transform: none; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--border-soft)); }

.ps-typed { opacity: 0; animation: ps-typed .35s .15s ease forwards; }
@keyframes ps-typed { to { opacity: 1; } }

.ps-hint {
  margin-top: 6px; font-size: .62rem; color: var(--muted);
  text-align: center;
}
.ps-hint-ok { color: var(--accent); font-weight: 700; }

/* Acto 4: documento enviado al cliente para firma (vamos en coche, sin pad) */
.ps-send { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ps-send-icon {
  width: 78px; height: 78px;
  opacity: 0;
  transform: translateY(-8px) scale(.92);
  animation: send-pop .55s cubic-bezier(.2,1.4,.4,1) .25s forwards;
}
.scene[data-act="4"] .ps-send-icon { animation-play-state: running; }
@keyframes send-pop {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ps-send-icon .env-body  { fill: color-mix(in srgb, var(--accent) 12%, var(--surface)); stroke: var(--accent); stroke-width: 2.5; }
.ps-send-icon .env-flap  { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ps-send-icon .env-arrow { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ps-send-to {
  font-size: .66rem; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--bg) 65%, var(--surface));
  border: 1px solid var(--border-soft); border-radius: 6px;
  padding: 3px 7px;
}

.ps-stamp {
  display: flex; justify-content: center; margin-top: 6px;
}
.ps-stamp svg { width: 124px; height: 124px; transform: rotate(-12deg); }
.stamp-ring  { fill: none; stroke: var(--accent); stroke-width: 5; opacity: .95; }
.stamp-ring2 { fill: none; stroke: var(--accent); stroke-width: 3; opacity: .65; }
.stamp-tx1   { fill: var(--accent); font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: 22px; letter-spacing: 2px; }
.stamp-tx2   { fill: var(--accent); font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 3px; }
.scene[data-act="5"] .ps-stamp svg {
  animation: stamp-in .45s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes stamp-in {
  from { transform: rotate(-12deg) scale(.2); opacity: 0; }
  60%  { transform: rotate(-12deg) scale(1.15); opacity: 1; }
  to   { transform: rotate(-12deg) scale(1); opacity: 1; }
}

/* ---------------------------------------------------------------- burbujas de subtítulo */
/* En pantalla grande las burbujas se acumulan durante el acto (no se borra
   ninguna al añadir otra); en móvil solo se conservan las 2 más recientes de
   cada interviniente (ver pushBubble en theme.js).
   Al acabar el acto, theme.js les aplica .is-fading 5 s después y la pila
   entera SUBE hasta salir por arriba de la escena, sin fade — la burbuja
   deja de verse SOLO porque está físicamente fuera del viewport (regla
   cliente 2026-05-25). El contenedor NO recorta por arriba: las burbujas
   que se desbordan al apilarse siguen visibles hasta que .scene (que
   tiene overflow:hidden) las corta en el techo del navegador.
   Z-index 3: por encima del cielo y paisaje (layer-far/mid/near 1-3) y
   POR DEBAJO de road (4), road-ticker (dentro de road), van (6), phone
   (9), act-card (11), timeline (20), scene-actions (30) y FAB (50). */
.bubbles {
  position: absolute;
  left: clamp(2vw, 3vw, 28px);
  right: clamp(300px, 30vw, 380px);
  /* (antes top:105px) llega hasta el techo de la escena para poder
     desvanecer hacia arriba las burbujas que se acumulan (mask de abajo). */
  top: 0;
  bottom: 54%;
  z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  /* En pantallas grandes las burbujas acumuladas suben hacia el techo; en
     vez de cortarse en seco contra .scene (overflow:hidden) se desvanecen:
     opacas la mitad inferior, transparentes del todo arriba. En móvil se
     anula (media query ≤720px) porque ya hay máx 2 por interviniente. */
  -webkit-mask-image: linear-gradient(to top, #000 50%, transparent 100%);
          mask-image: linear-gradient(to top, #000 50%, transparent 100%);
  pointer-events: none;
  transition: transform .9s cubic-bezier(.55,.05,.7,.4);
  will-change: transform;
}
.bubbles.is-fading { transform: translateY(-110vh); }
.bub {
  padding: 7px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  font-size: clamp(1.02rem, 1.85vw, 1.25rem); line-height: 1.32;
  font-weight: 500;
  max-width: min(540px, 92%);
  opacity: 0; transform: translateY(8px);
  animation: bub-in .35s ease forwards;
}
.bub.bub-them { align-self: flex-start; border-bottom-left-radius: 5px; }
.bub.bub-bot {
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-soft));
  border-bottom-right-radius: 5px;
}
.bub strong { color: var(--accent); font-weight: 700; }
@keyframes bub-in { to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- logotipo de marca
   Esquina superior izquierda, SIEMPRE visible. Solo icono (mark SVG). */
.site-brand {
  position: absolute;
  top: 18px;
  left: var(--brand-edge-x);
  z-index: 12;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.site-brand__mark {
  display: block;
  width: auto;
  height: var(--brand-mark-h);
  object-fit: contain;
  flex: 0 0 auto;
  filter:
    drop-shadow( 1px  0 0 #fff)
    drop-shadow(-1px  0 0 #fff)
    drop-shadow( 0  1px 0 #fff)
    drop-shadow( 0 -1px 0 #fff);
}
.site-brand__wordmark {
  display: inline-block;
  position: relative;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 29px;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
#textoBlanco1 {
  position: absolute;
  top: 1px;   /* desplazado 1 px hacia abajo, mismo tamaño que el wordmark */
  left: 0;
  color: #fff;
}
.site-brand__wordmark .sb-wm-1,
.site-brand__wordmark .sb-wm-2 { position: relative; } /* encima de #textoBlanco1 */
.site-brand__wordmark .sb-wm-1 { color: #3078b4; } /* "Saycu" en azul de marca (mismo en las 3 webs) */
.site-brand__wordmark .sb-wm-2 { color: #54607a; } /* "Partes" en gris (mismo en las 3 webs) */

/* ---------------------------------------------------------------- cartel del acto (esquina)
   Se sitúa a la derecha del logo (en grande) o debajo (en móvil, ver media
   query a 720 px). */
.act-card {
  position: absolute;
  top: 18px;
  /* En grande arranca a la derecha del logo (su ancho REAL + hueco) pero
     tiende hacia el centro de la escena, para no quedar pegado al logo.
     El max() garantiza que nunca se solape con el logo en ventanas grandes
     estrechas. En móvil la media query a 720 px redefine top/left. */
  left: max(calc(var(--brand-edge-x) + var(--brand-block-w) + var(--brand-gap)), 22vw);
  z-index: 11;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  backdrop-filter: blur(6px);
  border-left: 3px solid var(--accent);
  border-radius: 4px 10px 10px 4px;
  box-shadow: var(--shadow-card);
  font-family: 'Fraunces', Georgia, serif;
  min-width: 200px;
  transition: opacity .35s ease;
}
/* Durante los primeros 30 s la cabecera del acto está oculta — la
   película aún no ha empezado, igual que las burbujas. */
.act-card.is-hidden-initially {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.act-card-num   { font-size: .68rem; letter-spacing: .18em; color: var(--muted); font-weight: 600; font-family: 'Hanken Grotesk', sans-serif; }
.act-card-title { font-size: 1.4rem; font-weight: 700; line-height: 1.05; color: var(--ink); }
.act-card-sub   { font-size: .82rem; color: var(--muted); font-family: 'Hanken Grotesk', sans-serif; font-weight: 500; line-height: 1.2; max-width: 26ch; }

/* ---------------------------------------------------------------- timeline */
.tl-acts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  position: relative;
}
.tl-acts::before {
  content: ""; position: absolute;
  left: 5%; right: 5%; top: 50%;
  height: 2px; background: var(--border-soft);
  z-index: 0;
}
.tl-acts li { position: relative; z-index: 1; }
.tl-act {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent; border: none; cursor: pointer;
  padding: 4px 2px; border-radius: 8px;
  transition: color .18s ease, background .18s ease;
}
.tl-act:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tl-num {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  font-size: .66rem; font-weight: 700; color: var(--muted);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.tl-name {
  font-size: .76rem; font-weight: 600; color: var(--muted);
  transition: color .18s ease;
}
.tl-act.is-current .tl-num { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.tl-act.is-current .tl-name { color: var(--ink); }
.tl-act.is-done .tl-num { border-color: var(--accent); color: var(--accent); }

.tl-time {
  font-family: 'Hanken Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: .84rem; color: var(--muted);
  flex: none; min-width: 80px; text-align: right;
}

/* ---------------------------------------------------------------- FAB de voz "Escuchar"
   Clon visual del .mic-global de la APK SaycuPartes (panel/src/components/Layout.css):
   círculo de marca + badge "IA" + pulse rojo cuando activo. En la app graba al
   operario; aquí dispara la reproducción de los audios reales de la película. */
.mic-global-wrap {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
  /* Transición al mover el FAB al "escenario" cuando arranca la conversación
     (entre furgoneta y móvil) o al volverlo a la esquina al acabar. */
  transition: right .55s cubic-bezier(.4,.0,.2,1),
              left .55s cubic-bezier(.4,.0,.2,1),
              bottom .55s cubic-bezier(.4,.0,.2,1),
              transform .55s cubic-bezier(.4,.0,.2,1);
}
.mic-global-wrap > * { pointer-events: auto; }

/* Cuando hay conversación: el FAB se sitúa en el centro horizontal de la
   escena y JUSTO POR ENCIMA de las líneas amarillas. .road es el 16% inferior
   del .film y .road-lines van centradas (top:50%), o sea las rayas están a
   ~bottom 8% del .film. bottom 9% deja el FAB rozando las rayas por arriba
   (regla cliente 2026-05-25). */
[data-conversation="active"] .mic-global-wrap {
  right: auto;
  left: 50%;
  bottom: calc(9% + 50px);
  transform: translateX(-50%);
  align-items: center;
}

.mic-global {
  position: relative;
  width: 64px; height: 64px; border-radius: 50%; border: none;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, background .18s ease;
}
.mic-global:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.32), 0 3px 8px rgba(0,0,0,.22); }
.mic-global:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, white); outline-offset: 3px; }
.mic-ic { width: 36px; height: 36px; }
.mic-ic-active { display: none; }
.mic-global.is-active { background: #c62828; animation: mic-global-pulse 1.2s ease-in-out infinite; }
.mic-global.is-active .mic-ic-idle   { display: none; }
.mic-global.is-active .mic-ic-active { display: inline-block; }
@keyframes mic-global-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, .55), 0 8px 26px rgba(0,0,0,.28); }
  50%      { box-shadow: 0 0 0 18px rgba(198, 40, 40, 0),  0 8px 26px rgba(0,0,0,.28); }
}

.mic-global-ia {
  position: absolute; top: -5px; right: -5px;
  background: var(--surface); color: var(--accent);
  font-size: 11px; font-weight: 800; letter-spacing: .04em; line-height: 1;
  padding: 3px 5px; border-radius: 7px;
  border: 1.5px solid var(--accent);
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
  font-family: 'Hanken Grotesk', sans-serif;
}
.mic-global.is-active .mic-global-ia { border-color: #c62828; color: #c62828; }

@media (max-width: 720px) {
  .mic-global-wrap { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .mic-global { width: 56px; height: 56px; }
  .mic-ic { width: 30px; height: 30px; }
}

/* ---------------------------------------------------------------- road ticker
   Banner horizontal deslizante anclado JUSTO DEBAJO de las líneas amarillas
   de la carretera (.road-lines, top:50%, height:6px). Vive DENTRO de .road
   (que tiene overflow:hidden) para que se recorte por la franja de asfalto y
   no invada el resto de la escena. La furgoneta (z-index:6) y el móvil
   pasan POR ENCIMA porque están fuera de .road. La pista del ticker contiene
   el texto repetido dos veces; la animación lo mueve de 0 a -50%, así el
   final del primer item se empalma sin costuras con el inicio del segundo.
   Velocidad 32 s: deliberadamente MÁS LENTA que .layer-near (22 s) para que
   el paisaje siga ganando sensación de movimiento. */
.road-ticker {
  position: absolute;
  left: 0; right: 0;
  /* las líneas amarillas están en top:50% con height:6px; dejamos ~6 px de
     respiración debajo y centramos el banner ahí. */
  top: calc(50% + 12px);
  height: 38px;
  z-index: 5; /* encima de .road-lines (mismo plano), debajo de furgo y móvil */
  overflow: hidden;
  pointer-events: none;
  background: transparent; /* totalmente transparente sobre la carretera */
}
/* Track: flex de ancho intrínseco con CERO gap. Así los dos items, idénticos
   y con su " · " final ya incluido, se concatenan sin costura y
   translateX(-50%) cae justo en el inicio de la segunda copia → bucle perfecto. */
.road-ticker__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  gap: 0;
  height: 100%;
  /* 38 s = doble de lento que el original (19 s). Cliente N1 (2026-05-25):
     iba demasiado deprisa con la lista de oficios ampliada. Al duplicar la
     duración la frase se lee cómoda y el "etc... &nbsp;×10" se aprecia. */
  animation: road-ticker-scroll 38s linear infinite;
  will-change: transform;
}
.road-ticker__item {
  white-space: nowrap;
  padding: 0;
  margin: 0;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: #f6efe2; /* crema, legible sobre el asfalto */
  /* sombra reforzada para contraste, ya que no hay fondo detrás */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .55),
    0 0 6px rgba(0, 0, 0, .35);
}
@keyframes road-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* OJO: el ticker NO se pausa durante la conversación (el resto del paisaje sí).
   Decisión cliente 2026-05-25: pausarlo daba sensación de "se para al llegar a
   instaladores" porque la conversación arranca a los 30 s y el ciclo dura 32 s. */

/* ---------------------------------------------------------------- overlays / modales */
.overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter: blur(6px);
  animation: ovl-fade .2s ease;
}
.overlay[hidden] { display: none; }
.overlay-card {
  position: relative;
  width: 100%; max-width: 480px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  padding: 32px clamp(22px, 5vw, 38px);
  animation: ovl-rise .28s cubic-bezier(.2,.7,.2,1);
}
.overlay-close {
  position: absolute; top: 12px; right: 14px;
  width: 34px; height: 34px; border: none; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 1.6rem; line-height: 1;
  border-radius: 8px;
  transition: color .18s ease, background .18s ease;
}
.overlay-close:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.overlay-title { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.01em; margin: 0; }
.overlay-sub { color: var(--muted); font-size: .94rem; margin: 4px 0 20px; }
.overlay-body h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.05rem; margin: 18px 0 6px; color: var(--ink); }
.overlay-body p { margin: 0 0 8px; color: var(--ink-2); font-size: .94rem; }
.overlay-body code { background: color-mix(in srgb, var(--bg) 60%, var(--surface)); padding: 1px 6px; border-radius: 5px; font-size: .85em; }
.overlay-body a { color: var(--accent); font-weight: 600; border-bottom: 1px dashed currentColor; }
.dot-list, .num-list { margin: 6px 0; padding-left: 22px; }
.dot-list li, .num-list li { margin-bottom: 6px; font-size: .94rem; color: var(--ink-2); line-height: 1.5; }
.overlay-credit { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border-soft); font-size: .78rem; color: var(--muted); }
.overlay-card--wide { max-width: 660px; }
.overlay-card--narrow {
  max-width: 380px;
  text-align: center;
  padding-bottom: 22px;
}
.overlay-card--narrow .overlay-title { margin-bottom: 4px; }
.overlay-card--narrow .apk-soon-msg { margin-bottom: 18px; font-size: 1rem; color: var(--ink-2); }
.overlay-card--narrow .btn { width: 100%; }
.apk-soon-icon {
  width: 64px; height: 64px;
  margin: 4px auto 14px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.apk-soon-icon svg { display: block; }
/* Hero del modal: mark grande sobre un fondo de acento */
.overlay-hero {
  margin: -32px clamp(-22px,-5vw,-38px) 16px;
  height: 96px;
  display: grid; place-items: center;
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--accent) 18%, var(--surface)) 0%,
              color-mix(in srgb, var(--accent) 8%, var(--surface)) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border-soft));
}
.overlay-hero-mark { width: 56px; height: 56px; color: var(--accent); }
/* Icono al lado del título de cada sección */
.overlay-body h3 {
  display: flex; align-items: center; gap: 10px;
}
.overlay-body .h3-ic {
  width: 22px; height: 22px; color: var(--accent); flex: none;
}
/* Fichas flotantes a la derecha de cada sección (un "mockup" del móvil) */
.figure-right {
  float: right;
  width: 130px;
  margin: 0 0 14px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.figure-cap { font-size: .72rem; color: var(--muted); font-weight: 600; text-align: center; }
.thumb-frame {
  width: 100%;
  aspect-ratio: 9 / 17;
  background: linear-gradient(160deg, #1d2638, #0c1119);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}
.thumb-frame .phone-screen {
  width: 100%; height: 100%;
  background: var(--surface);
  border-radius: 9px;
  overflow: hidden;
  position: relative;
}
.thumb-frame .ps {
  position: absolute; inset: 0;
  padding: 10px 6px 6px;
  font-size: 7px;
  line-height: 1.2;
}
.thumb-frame .ps-bar { font-size: 7px; padding-bottom: 4px; margin-bottom: 5px; gap: 4px; }
.thumb-frame .ps-mark { width: 8px; height: 8px; }
.thumb-frame .ps-list li { font-size: 6.5px; padding: 3px 4px; gap: 0; }
.thumb-frame .ps-list li b { font-size: 7px; }
.thumb-frame .ps-field { margin-bottom: 4px; }
.thumb-frame .ps-field label { font-size: 5.5px; }
.thumb-frame .ps-val { font-size: 6.5px; padding: 2px 4px; min-height: 10px; }
.thumb-frame .ps-hint { font-size: 6.5px; }

/* Tira de beneficios (3 cards) */
.benefit-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 12px 0 18px;
}
.benefit {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-soft));
  border-radius: 10px;
}
.benefit strong { color: var(--accent); font-size: .94rem; }
.benefit span   { color: var(--ink-2); font-size: .82rem; line-height: 1.4; }

/* "Contacto" como enlace dentro de texto */
.link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-weight: 600; font: inherit;
  border-bottom: 1px dashed currentColor;
}
.link-btn:hover { color: var(--accent-2); }

@media (max-width: 560px) {
  .figure-right { float: none; margin: 14px auto; width: 110px; }
  .benefit-strip { grid-template-columns: 1fr; }
}
/* Limpieza del float para que las secciones siguientes no se monten */
.overlay-body h3 { clear: both; }

@keyframes ovl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ovl-rise { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* form (clonado de iagest) */
.login-brand { display: inline-flex; align-items: center; margin-bottom: 14px; }
.login-brand__mark {
  display: block;
  width: auto;
  height: 24px;
  object-fit: contain;
  flex: 0 0 auto;
}
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-field { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.login-field input,
.login-field textarea {
  width: 100%; padding: 11px 14px; font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px;
  outline: none; font-family: inherit;
  transition: border-color .18s ease;
}
.login-field input { height: 44px; }
.login-field textarea { min-height: 90px; line-height: 1.45; resize: vertical; }
.login-field input:focus, .login-field textarea:focus { border-color: var(--accent); }
.login-opt { font-weight: 400; color: var(--muted); font-size: .82em; }
.login-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.login-error { color: #c0392b; font-size: .86rem; margin: 0; padding: 8px 11px; border-radius: 8px;
               background: color-mix(in srgb, #c0392b 10%, transparent); }
.login-ok { color: var(--accent-2); font-size: .9rem; margin: 0; padding: 8px 11px; border-radius: 8px;
            background: color-mix(in srgb, var(--accent) 12%, transparent); }
.login-submit { width: 100%; margin-top: 2px; }
.login-submit[disabled] { opacity: .65; cursor: progress; }

/* ---------------------------------------------------------------- footer minimal */
.site-foot {
  position: fixed; bottom: 12px; left: clamp(14px, 3vw, 28px);
  display: inline-flex; gap: 12px; align-items: baseline;
  font-size: .78rem; color: var(--muted);
  z-index: 7;
  pointer-events: none;
}
.foot-brand { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1rem; line-height: 1; }
.foot-tag { font-style: italic; opacity: .8; }
.foot-year { opacity: .7; }
.foot-attr { opacity: .55; font-size: .72rem; pointer-events: auto; }
.foot-attr a { color: inherit; border-bottom: 1px dashed currentColor; }
.foot-attr a:hover { color: var(--accent); }

/* ---------------------------------------------------------------- accesibilidad / motion */
@media (prefers-reduced-motion: reduce) {
  .layer svg, .road-lines, .wheel .spokes, .van, .phone,
  .driver-voice path, .ps-sign-line, .ps-stamp svg,
  .road-ticker__track, #btn-saber-mas { animation: none !important; }
}

/* ---------------------------------------------------------------- responsive · móvil
   En vertical pequeño bajamos densidad y reorganizamos. La escena se mantiene
   sin scroll: el móvil flotante baja a una esquina más pequeña y las burbujas
   quedan arriba. */
@media (max-width: 720px) {
  .wordmark { font-size: 1.05rem; }
  .btn-sm { padding: 5px 9px; font-size: .76rem; }
  .site-brand {
    /* Patrón SaycuControl móvil: logo + texto grande al lado, como una topbar */
    position: relative; top: 0; left: 0;
    flex-direction: row; align-items: center; gap: 12px;
    padding: 10px 14px; width: 100%; pointer-events: auto; z-index: 20;
  }
  .site-brand__mark { height: 72px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.12)); }
  .site-brand__wordmark { font-size: 2rem; }
  .scene-actions { gap: 8px; top: auto; right: auto; position: relative; padding: 0 14px 8px; justify-content: flex-end; }
  .scene-act { padding: 7px 14px; font-size: .82rem; }
  .act-card {
    /* Como en móvil el brand es horizontal, su altura visual es la del mark. */
    top: calc(10px + var(--brand-mark-h) + 12px);
    left: var(--brand-edge-x);
    min-width: 0;
    padding: 7px 10px;
  }
  .act-card-num { font-size: .58rem; }
  .act-card-title { font-size: 1.05rem; }
  .act-card-sub { font-size: .72rem; max-width: 22ch; }
  .van { width: 56vw; left: -2vw; bottom: 14%; }
  .phone { width: 28vw; bottom: 17%; right: 2vw; }
  /* El sol y la luna viajan 60 px más abajo en móvil. Aumentamos el top
     base; el arco (translateY de los keyframes idle-sun/idle-moon) es
     relativo a él, así que TODO el recorrido se desplaza 60 px hacia abajo. */
  .sun, .moon { top: calc(8% + 60px); }
  .bubbles {
    /* en móvil el cielo es proporcionalmente menor: subimos el bottom al 58 %
       para mantener la regla de "agrupadas en el cielo, fuera de la tierra".
       El contenedor ocupa todo el ancho (el móvil queda por DELANTE — z-index 9
       sobre 3 — así que las burbujas pueden pasar por debajo sin estorbar). */
    top: 92px; left: 12px; right: 12px; bottom: 58%;
    /* Sin desvanecido en móvil (solo escritorio): aquí ya hay máx 2 por
       interviniente, no se amontonan ni llegan al techo. */
    -webkit-mask-image: none; mask-image: none;
  }
  /* max-width 78% (en lugar de 95%) deja aire para distinguir flex-end
     (burbujas IA, derecha) de flex-start (burbujas operario, izquierda). */
  .bub { font-size: .92rem; padding: 6px 11px; max-width: 78%; line-height: 1.28; }
  /* En móvil hacemos el ticker un pelín más pequeño y ágil, manteniendo
     proporción con el resto. La pausa por conversación se hereda. */
  .road-ticker { top: calc(50% + 8px); height: 32px; }
  /* OJO: padding 0 imprescindible aquí también; cualquier separación entre
     los dos items rompe el empalme del translateX(-50%) y se vería el saltito. */
  .road-ticker__item { font-size: 1rem; padding: 0; }
  .timeline { grid-template-columns: auto 1fr; row-gap: 6px; padding: 8px 12px; }
  .tl-time { grid-column: 1 / -1; text-align: center; }
  .tl-name { display: none; }
  .tl-acts { gap: 4px; }
  .tl-num { width: 22px; height: 22px; font-size: .6rem; }
  .site-foot { display: none; }
}

/* alturas muy bajas (móvil apaisado) */
@media (max-height: 520px) {
  .layer-far  { bottom: 36%; height: 18%; }
  .layer-mid  { bottom: 28%; height: 20%; }
  .layer-near { bottom: 22%; height: 10%; }
  .road       { height: 22%; }
  .van        { bottom: 18%; }
  .phone      { bottom: 23%; }
}

/* =============================================================================
   DECK "Saber más" — storyboard editorial paginado, 6 actos
   Diseño: passe-partout oscuro + slide tipo dossier, asimétrico, con marcas
   de oficio cinematográfico (sprockets, crop marks, números monumentales).
   ============================================================================= */

.overlay--deck {
  padding: clamp(16px, 3.5vw, 48px);
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(8px);
  align-items: stretch;
}

.deck {
  /* alias de tokens — todo deriva de las variables del proyecto */
  --deck-paper: var(--surface);
  --deck-ink:   var(--ink);
  --deck-ink-2: var(--ink-2);
  --deck-mute:  var(--muted);
  --deck-rule:  color-mix(in srgb, var(--ink) 14%, transparent);
  --deck-rule-soft: color-mix(in srgb, var(--ink) 7%, transparent);
  --deck-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  height: 100%;
  max-height: min(96vh, 880px);
  background: var(--deck-paper);
  color: var(--deck-ink);
  border: 1px solid var(--deck-rule);
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.18);
  animation: deck-rise .42s cubic-bezier(.7,0,.3,1) both;
  isolation: isolate;
}

/* Grain sutil tipo papel impreso */
.deck::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/></svg>");
  mix-blend-mode: multiply;
  opacity: .04;
}

/* -------------------------------- chrome (cabecera fija del deck) */
.deck-chrome {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 16px clamp(22px, 4vw, 44px);
  border-bottom: 1px solid var(--deck-rule);
  background: var(--deck-paper);
}
.deck-tag {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--deck-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--deck-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.deck-tag::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.deck-sprockets {
  display: flex; gap: 7px;
  list-style: none; margin: 0; padding: 0;
  justify-self: center;
}
.sprocket {
  width: 14px; height: 12px;
  background: var(--deck-rule);
  border: none; border-radius: 2px;
  cursor: pointer; padding: 0;
  transition: background .22s ease, transform .22s ease;
  position: relative;
}
.sprocket:hover { background: var(--deck-mute); }
.sprocket.is-past { background: color-mix(in srgb, var(--accent) 38%, var(--deck-rule)); }
.sprocket.is-current {
  background: var(--accent);
  transform: scaleY(1.45);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
.sprocket:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

.deck-meta {
  display: flex; align-items: center; gap: 14px;
  justify-self: end;
}
.deck-count {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  letter-spacing: .02em;
  color: var(--deck-ink);
  font-variant-numeric: tabular-nums;
}
.deck-count-sep { color: var(--deck-mute); margin: 0 3px; }

.deck-close {
  width: 36px; height: 36px;
  border: 1px solid var(--deck-rule); background: transparent;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer; color: var(--deck-ink);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .2s, color .2s;
}
.deck-close:hover { transform: rotate(-90deg); border-color: var(--accent); color: var(--accent); }
.deck-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* -------------------------------- flechas de navegación */
.deck-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--deck-paper);
  border: 1px solid var(--deck-rule);
  color: var(--deck-ink);
  cursor: pointer;
  display: grid; place-items: center;
  transition: width .22s ease, height .22s ease, border-color .2s, color .2s, box-shadow .2s, opacity .2s;
  box-shadow: 0 10px 24px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.10);
}
.deck-nav svg { transition: transform .22s ease; }
.deck-nav:hover:not(:disabled) {
  width: 54px; height: 54px;
  border-color: var(--accent); color: var(--accent);
}
.deck-nav--prev:hover:not(:disabled) svg { transform: translateX(-3px); }
.deck-nav--next:hover:not(:disabled) svg { transform: translateX(3px); }
.deck-nav:disabled { opacity: .22; cursor: default; }
.deck-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.deck-nav--prev { left: -22px; }
.deck-nav--next { right: -22px; }

/* -------------------------------- stage de slides */
.deck-stage {
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.slide {
  position: absolute; inset: 0;
  padding: clamp(28px, 4.5vh, 56px) clamp(28px, 5vw, 72px);
  display: flex; flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateX(7%);
  transition: opacity .34s ease, transform .42s cubic-bezier(.55,.05,.25,1);
  background: var(--deck-paper);
}
.slide[hidden] {
  /* override del default display:none para que la animación funcione cuando se quita el attr */
  display: flex !important;
  visibility: hidden;
}
.slide.is-current {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  visibility: visible;
}
.slide.is-leaving-left  { transform: translateX(-7%); opacity: 0; }
.slide.is-leaving-right { transform: translateX(7%);  opacity: 0; }

/* crop marks en cada esquina */
.crop {
  position: absolute; width: 16px; height: 16px;
  pointer-events: none; z-index: 3;
}
.crop::before, .crop::after {
  content: ""; position: absolute; background: var(--deck-ink); opacity: .55;
}
.crop--tl { top: 14px; left: 14px; }
.crop--tl::before { top: 0; left: 0; width: 16px; height: 1px; }
.crop--tl::after  { top: 0; left: 0; width: 1px; height: 16px; }
.crop--tr { top: 14px; right: 14px; }
.crop--tr::before { top: 0; right: 0; width: 16px; height: 1px; }
.crop--tr::after  { top: 0; right: 0; width: 1px; height: 16px; }
.crop--bl { bottom: 14px; left: 14px; }
.crop--bl::before { bottom: 0; left: 0; width: 16px; height: 1px; }
.crop--bl::after  { bottom: 0; left: 0; width: 1px; height: 16px; }
.crop--br { bottom: 14px; right: 14px; }
.crop--br::before { bottom: 0; right: 0; width: 16px; height: 1px; }
.crop--br::after  { bottom: 0; right: 0; width: 1px; height: 16px; }

/* -------------------------------- tipografía editorial común */
.slide-eyebrow {
  font-family: var(--deck-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--deck-mute);
  margin: 0 0 14px;
}
.slide-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 4.1vw, 56px);
  line-height: 1.02;
  letter-spacing: -.018em;
  color: var(--deck-ink);
  margin: 0 0 14px;
}
.slide-title--center { text-align: center; }
.slide-sub {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400; font-style: italic;
  font-size: clamp(15px, 1.5vw, 19px);
  color: var(--deck-ink-2);
  margin: 0 0 18px;
  line-height: 1.35;
}
.slide-lead {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 1.6;
  color: color-mix(in srgb, var(--deck-ink) 80%, transparent);
  max-width: 52ch;
  margin: 0 0 18px;
}
.slide-lead--center { margin-left: auto; margin-right: auto; text-align: center; }

.slide-number {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(160px, 22vw, 300px);
  line-height: .82;
  letter-spacing: -.045em;
  color: transparent;
  -webkit-text-stroke: 1px var(--deck-ink);
  user-select: none;
  font-variant-numeric: tabular-nums;
}
.slide-number--bg {
  position: absolute;
  bottom: clamp(-40px, -2vh, -20px);
  right: clamp(-200px, -10vw, -120px);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
  font-size: clamp(260px, 34vw, 480px);
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--deck-ink) 7%, transparent);
}

/* grid base por slide */
.slide-grid {
  display: grid;
  flex: 1;
  align-items: start;
  gap: clamp(20px, 3vw, 48px);
  position: relative;
  z-index: 1;
}
.slide-grid--split {
  grid-template-columns: minmax(220px, .85fr) minmax(320px, 1.4fr);
  align-items: center;
}
.slide-grid--media {
  grid-template-columns: minmax(280px, 1.1fr) minmax(240px, .9fr);
  align-items: center;
}
.slide-grid--reverse .slide-col--left  { order: 1; }
.slide-grid--reverse .slide-col--right { order: 2; }

.slide-col { min-width: 0; }
.slide-col--media {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; position: relative;
}

.slide-head {
  text-align: center;
  margin: 0 auto clamp(20px, 3vh, 36px);
  max-width: 700px;
  position: relative; z-index: 1;
}

/* -------------------------------- slide foot */
.slide-foot {
  margin-top: auto;
  padding-top: 16px;
  display: flex; justify-content: space-between; gap: 14px;
  font-family: var(--deck-mono);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--deck-mute);
  border-top: 1px solid var(--deck-rule-soft);
  position: relative; z-index: 1;
}

/* -------------------------------- SLIDE 1 — Beneficios */
.rule-label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  font-family: var(--deck-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--deck-mute);
  margin: 24px 0 14px;
}
.rule-label-line { height: 1px; background: var(--deck-rule); display: block; }

.bene-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.bene {
  position: relative;
  padding: 14px 0 0;
  border-top: 1px solid var(--deck-rule);
  display: flex; flex-direction: column; gap: 6px;
}
.bene-num {
  font-family: var(--deck-mono);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
}
.bene strong {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--deck-ink);
  line-height: 1.2;
}
.bene-txt {
  font-size: 13.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--deck-ink) 65%, transparent);
}

/* -------------------------------- SLIDE 2 — anillos de voz */
.media-rings {
  position: absolute;
  width: clamp(220px, 26vw, 320px);
  height: clamp(220px, 26vw, 320px);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.media-rings .ring {
  position: absolute; inset: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 50%;
  animation: ring-pulse 3.6s cubic-bezier(.2,.7,.2,1) infinite;
}
.media-rings .ring-2 { animation-delay: 1.2s; }
.media-rings .ring-3 { animation-delay: 2.4s; }
@keyframes ring-pulse {
  0%   { transform: scale(.62); opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* mockups en el deck — heredan thumb-frame pero un poco mayores */
.thumb-frame--deck {
  width: clamp(160px, 19vw, 220px);
  position: relative;
  z-index: 1;
  box-shadow: 0 22px 44px rgba(0,0,0,.30), 0 6px 12px rgba(0,0,0,.16);
  border-radius: 18px;
  padding: 7px;
}
.thumb-frame--deck .ps-bar { font-size: 9px; }
.thumb-frame--deck .ps-mark { width: 10px; height: 10px; }
.thumb-frame--deck .ps-field label { font-size: 7px; }
.thumb-frame--deck .ps-val { font-size: 8px; padding: 3px 6px; min-height: 13px; }
.thumb-frame--deck .ps-hint { font-size: 8.5px; }
.thumb-frame--deck .ps-list li { font-size: 8.5px; padding: 4px 6px; }
.thumb-frame--deck .ps-list li b { font-size: 9px; }

.key-list {
  list-style: none; padding: 0; margin: 16px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.key-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px; line-height: 1.45;
  color: var(--deck-ink-2);
}
.key-bullet {
  flex: none;
  width: 22px; height: 1.5px; margin-top: 11px;
  background: var(--accent);
  border-radius: 1px;
}

/* -------------------------------- SLIDE 3 — oficios */
.trades {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 10px;
  align-items: center;
}
.trades li { display: contents; }
.trade-tag {
  font-family: var(--deck-mono);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--deck-rule);
  border-radius: 100px;
  color: var(--deck-ink-2);
  background: color-mix(in srgb, var(--accent) 4%, var(--deck-paper));
  white-space: nowrap;
  justify-self: start;
}
.trades li > span:last-child {
  font-size: 14px;
  color: color-mix(in srgb, var(--deck-ink) 70%, transparent);
}

/* -------------------------------- SLIDE 4 — storyboard de 5 tomas */
.storyboard {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
  flex: 1;
  align-content: center;
  position: relative;
  z-index: 1;
}
.sb-step {
  position: relative;
  padding: 18px 14px 16px;
  border: 1px solid var(--deck-rule);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 2%, var(--deck-paper));
  display: flex; flex-direction: column; gap: 10px;
  min-height: 220px;
}
.sb-step + .sb-step::before {
  content: "";
  position: absolute;
  left: -10px; top: 50%;
  width: 8px; height: 1px;
  background: var(--accent);
}
.sb-num {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 3.2vw, 44px);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.sb-body { display: flex; flex-direction: column; gap: 6px; }
.sb-body strong {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--deck-ink);
  line-height: 1.25;
}
.sb-body span {
  font-size: 13px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--deck-ink) 72%, transparent);
}

/* -------------------------------- SLIDE 5 — laptop + móvil */
.slide-col--devices {
  position: relative;
  min-height: 280px;
  width: 100%;
}
.device-laptop {
  position: relative;
  width: clamp(220px, 24vw, 320px);
  margin: 0 auto;
}
.laptop-screen {
  background: linear-gradient(160deg, #1d2638, #0c1119);
  border-radius: 10px 10px 4px 4px;
  padding: 9px;
  aspect-ratio: 16 / 10;
  box-shadow: 0 14px 28px rgba(0,0,0,.30);
}
.laptop-bar {
  display: flex; gap: 4px;
  padding: 0 0 7px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 8px;
}
.laptop-bar span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.22);
}
.laptop-content {
  background: var(--deck-paper);
  border-radius: 4px;
  padding: 8px 10px;
  height: calc(100% - 16px);
  display: flex; flex-direction: column; gap: 4px;
  overflow: hidden;
}
.laptop-row {
  display: flex; justify-content: space-between; gap: 6px;
  font-size: 10px;
  padding: 5px 7px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-radius: 3px;
}
.laptop-row b {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--deck-ink);
}
.laptop-row span {
  color: var(--deck-mute);
  font-family: var(--deck-mono);
  font-size: 8.5px;
  letter-spacing: .04em;
}
.laptop-base {
  width: 110%;
  height: 6px;
  background: linear-gradient(180deg, #2a3548, #181e2a);
  border-radius: 0 0 6px 6px;
  margin-left: -5%;
  box-shadow: 0 6px 12px rgba(0,0,0,.20);
}
.thumb-frame--floating {
  position: absolute;
  right: 4%; bottom: -10px;
  width: clamp(96px, 11vw, 130px);
  transform: rotate(6deg);
  z-index: 2;
}

/* -------------------------------- SLIDE 6 — billetes */
.tickets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  flex: 1;
  align-items: stretch;
  position: relative;
  z-index: 1;
  max-width: 980px; margin: 0 auto;
  width: 100%;
}
.ticket {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 8px;
  padding: 22px 20px 18px;
  background: var(--deck-paper);
  border: 1px solid var(--deck-rule);
  border-radius: 4px;
  color: var(--deck-ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-family: inherit;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s, background .25s;
  overflow: hidden;
}
.ticket:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 16px 32px rgba(0,0,0,.16);
}
.ticket:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* "muescas" decorativas tipo billete: dos semicírculos del color del passe-
   partout en los bordes superior e inferior. Quedan como dos hendiduras
   discretas (no como puntos sueltos sobre la card). */
.ticket::before, .ticket::after {
  content: "";
  position: absolute;
  width: 18px; height: 9px;
  background: var(--deck-paper);
  border: 1px solid var(--deck-rule);
  left: 50%;
  transform: translateX(-50%);
}
.ticket::before { top: -1px; border-top: none; border-radius: 0 0 12px 12px; }
.ticket::after  { bottom: -1px; border-bottom: none; border-radius: 12px 12px 0 0; }
.ticket--primary::before, .ticket--primary::after {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--on-accent) 28%, var(--accent));
}
.ticket--primary:hover::before, .ticket--primary:hover::after { background: var(--accent-2); }
.ticket-num {
  font-family: var(--deck-mono);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--deck-mute);
}
.ticket-label {
  font-family: var(--deck-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent);
}
.ticket-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  color: var(--deck-ink);
}
.ticket-meta {
  font-size: 13px;
  color: color-mix(in srgb, var(--deck-ink) 70%, transparent);
  word-break: break-all;
  border-top: 1px dashed var(--deck-rule);
  padding-top: 10px;
  margin-top: 4px;
}
.ticket-arrow {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 28px;
  color: var(--accent);
  align-self: end;
  justify-self: end;
  transition: transform .25s ease;
}
.ticket:hover .ticket-arrow { transform: translateX(4px); }

.ticket--primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.ticket--primary .ticket-num,
.ticket--primary .ticket-label,
.ticket--primary .ticket-meta,
.ticket--primary .ticket-arrow {
  color: var(--on-accent);
  opacity: .92;
}
.ticket--primary .ticket-title { color: var(--on-accent); }
.ticket--primary .ticket-meta { border-top-color: color-mix(in srgb, var(--on-accent) 35%, transparent); }
.ticket--primary:hover { background: var(--accent-2); border-color: var(--accent-2); }

.ticket--btn {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}

.overlay-credit--deck {
  margin: 18px auto 0;
  text-align: center;
  font-size: .72rem;
  color: var(--deck-mute);
  border: none;
  padding: 0;
  font-family: var(--deck-mono);
  letter-spacing: .08em;
  text-transform: none;
}
.overlay-credit--deck a { color: var(--deck-ink-2); border-bottom: 1px dashed currentColor; }

/* -------------------------------- selección de texto en el deck */
.deck ::selection { background: var(--accent); color: var(--on-accent); }

/* -------------------------------- animaciones */
@keyframes deck-rise {
  from { opacity: 0; clip-path: inset(50% 0 50% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes deck-elem-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.slide.is-current .slide-number,
.slide.is-current .slide-eyebrow,
.slide.is-current .slide-title,
.slide.is-current .slide-sub,
.slide.is-current .slide-lead,
.slide.is-current .rule-label,
.slide.is-current .bene-grid,
.slide.is-current .key-list,
.slide.is-current .trades,
.slide.is-current .storyboard,
.slide.is-current .tickets,
.slide.is-current .slide-col--media,
.slide.is-current .slide-foot {
  animation: deck-elem-rise .5s cubic-bezier(.2,.8,.2,1) both;
}
.slide.is-current .slide-eyebrow { animation-delay: .04s; }
.slide.is-current .slide-number  { animation-delay: .06s; }
.slide.is-current .slide-title   { animation-delay: .12s; }
.slide.is-current .slide-sub     { animation-delay: .18s; }
.slide.is-current .slide-lead    { animation-delay: .22s; }
.slide.is-current .rule-label    { animation-delay: .30s; }
.slide.is-current .bene-grid,
.slide.is-current .key-list,
.slide.is-current .trades,
.slide.is-current .storyboard,
.slide.is-current .tickets,
.slide.is-current .slide-col--media { animation-delay: .32s; }
.slide.is-current .slide-foot    { animation-delay: .42s; }

/* respetar usuarios sin animaciones */
@media (prefers-reduced-motion: reduce) {
  .deck, .slide, .slide.is-current * {
    animation: none !important;
    transition: opacity .12s !important;
    transform: none !important;
  }
  .media-rings .ring { display: none; }
}

/* -------------------------------- responsive */
@media (max-width: 1080px) {
  .deck-nav--prev { left: 8px; }
  .deck-nav--next { right: 8px; }
  .slide-number { font-size: clamp(120px, 18vw, 220px); }
}

@media (max-width: 820px) {
  .overlay--deck { padding: 10px; }
  .deck { border-radius: 4px; max-height: calc(100dvh - 20px); }
  .deck-chrome { padding: 12px 16px; gap: 10px; }
  .deck-tag { font-size: 10px; letter-spacing: .12em; }
  .deck-count { font-size: 13px; }
  .deck-close { width: 32px; height: 32px; }
  .sprocket { width: 10px; height: 10px; }
  .deck-nav { width: 38px; height: 38px; }
  .deck-nav:hover:not(:disabled) { width: 42px; height: 42px; }
  .deck-nav--prev { left: 6px; }
  .deck-nav--next { right: 6px; }
  .slide { padding: 28px 24px; }
  .slide-grid--split,
  .slide-grid--media { grid-template-columns: 1fr; gap: 18px; }
  .slide-grid--reverse .slide-col--left  { order: 0; }
  .slide-grid--reverse .slide-col--right { order: 1; }
  .slide-number { font-size: clamp(96px, 26vw, 160px); }
  .slide-number--bg { font-size: clamp(180px, 50vw, 260px); bottom: 20px; right: -20px; }
  .bene-grid { grid-template-columns: 1fr; gap: 12px; }
  .storyboard { grid-template-columns: 1fr; gap: 8px; }
  .sb-step { min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; }
  .sb-num { font-size: 28px; }
  .sb-step + .sb-step::before {
    left: 50%; top: -5px;
    width: 1px; height: 5px;
    transform: translateX(-50%);
  }
  .tickets { grid-template-columns: 1fr; }
  .ticket { padding: 18px 16px; }
  .thumb-frame--floating { right: 0; bottom: -6px; width: 84px; }
}

@media (max-width: 480px) {
  .deck-sprockets { display: none; }
  .deck-chrome { grid-template-columns: 1fr auto; }
  .deck-tag { font-size: 9.5px; }
  .slide-title { font-size: clamp(24px, 7vw, 34px); }
  .slide-lead { font-size: 14px; }
  .trades { grid-template-columns: 1fr; }
  .trade-tag { justify-self: start; }
  .trades li { display: flex; flex-direction: column; gap: 4px; }
}