/* ==========================================================================
   cinematico.css — capa de movimiento y luz sobre «Despacho de dirección».
   Va DESPUÉS de estilo.css y no lo modifica: se puede quitar entera
   borrando su <link> y el <script> de cinematico.js.

   Regla de oro: nada de aquí se aplica si el JS no arranca. Todo lo que
   oculta contenido cuelga de html.js-listo, clase que pone cinematico.js.
   ========================================================================== */

:root{
  --t-rapido:.18s; --t-medio:.45s;
  --e-suave:cubic-bezier(.4,0,.2,1);
  --halo:340px;        /* radio del foco interior */
  --halo-borde:260px;  /* radio del borde luminoso */
  --desenfoque:10px;   /* blur inicial de los revelados */
  /* Luz blanca sobre tinta. En modo claro no-pulsar.css la cambia por
     sombra: sobre papel, un halo blanco no se ve. */
  --halo-tinta:rgba(232,230,225,.07);
}

/* ---------- Lenis (equivale a lenis/dist/lenis.css) ---------- */
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---------- estado inicial de los revelados ----------
   Esta lista está sincronizada con UNIDADES/GRUPOS en cinematico.js.
   Si cambias una, cambia la otra o el bloque se quedará invisible. */
html.js-listo :is(
  .hero .lema, .hero .titulo, .hero .lede, .hero .acciones, .hero .ficha-exec,
  .seccion > .wrap > .vineta, .seccion > .wrap > h2,
  .seccion > .wrap > .prosa, .seccion > .wrap > .aptitudes,
  .avales, .herramientas,
  .empresa, .pilar > div, .caso, .clientes-cab, .hito, .cifra,
  .formacion .columna, .persona, .tarjeta-contacto, .nota-humana
){
  opacity:0;
  filter:blur(var(--desenfoque));
}

/* Red de seguridad: si GSAP no llegara a cargar (bloqueado, error de red),
   a los 3 s el contenido aparece igualmente. Nunca una web en blanco. */
@keyframes rescate-revelado{to{opacity:1; filter:blur(0)}}
html.js-listo:not(.gsap-listo) :is(
  .hero .lema, .hero .titulo, .hero .lede, .hero .acciones, .hero .ficha-exec,
  .seccion > .wrap > .vineta, .seccion > .wrap > h2,
  .seccion > .wrap > .prosa, .seccion > .wrap > .aptitudes,
  .avales, .herramientas,
  .empresa, .pilar > div, .caso, .clientes-cab, .hito, .cifra,
  .formacion .columna, .persona, .tarjeta-contacto, .nota-humana
){
  animation:rescate-revelado .4s var(--e-suave) 3s forwards;
}

/* ---------- foco que sigue al ratón (spotlight) ----------
   Se aplica a las tarjetas con class="spot". El CSS dibuja; el JS solo
   escribe --mx y --my. El halo va en ::before con z-index:-1, que se pinta
   sobre el fondo de la tarjeta y bajo su texto gracias a isolation:isolate. */
.spot{position:relative; isolation:isolate}

.spot::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; opacity:0; pointer-events:none;
  transition:opacity var(--t-medio) var(--e-suave);
  background:radial-gradient(var(--halo) circle at var(--mx,50%) var(--my,50%),
             var(--halo-tinta), transparent 62%);
}

/* borde luminoso: gradiente dorado recortado a 1 px con máscara */
.spot::after{
  content:""; position:absolute; inset:0;
  border-radius:inherit; padding:1px;
  opacity:0; pointer-events:none;
  transition:opacity var(--t-medio) var(--e-suave);
  background:radial-gradient(var(--halo-borde) circle at var(--mx,50%) var(--my,50%),
             var(--oro), transparent 68%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}

/* Solo con ratón: en pantalla táctil el halo se quedaría clavado en la
   última posición tocada y se ve roto. */
@media (hover:hover) and (pointer:fine){
  .spot:hover::before, .spot:hover::after{opacity:1}
}
/* El teclado también enciende el borde: la tarjeta responde al foco. */
.spot:focus-visible::after, .spot:focus-within::after{opacity:1}

/* Elevación para las tarjetas que no la tenían ya en estilo.css.
   .empresa se queda fuera: su :hover con translateY(-2px) ya existe. */
.spot-eleva{transition:transform var(--t-rapido) var(--e-suave)}
@media (hover:hover) and (pointer:fine){
  .spot-eleva:hover{transform:translateY(-2px)}
}


/* ---------- marquesina: una sola línea que se desplaza ---------- */
html.js-listo .marquesina{overflow:hidden}
html.js-listo .marquesina-pista{
  flex-wrap:nowrap; flex:0 0 auto; margin:0; will-change:transform;
}

/* ---------- texto que se ilumina con el scroll ---------- */
/* Las palabras arrancan apagadas y GSAP las sube a 1 con scrub. Sin JS
   (o con movimiento reducido) se leen a plena opacidad. */
html.js-listo [data-scrub] .palabra{opacity:.16}

/* ---------- botón magnético ---------- */
/* Los enlaces de contacto son inline: sin inline-block el transform no
   tendría efecto. */
.magnetico{display:inline-block; will-change:transform}

/* ---------- movimiento reducido: se apaga toda esta capa ---------- */
@media (prefers-reduced-motion:reduce){
  html.js-listo :is(
    .hero .lema, .hero .titulo, .hero .lede, .hero .acciones, .hero .ficha-exec,
    .seccion > .wrap > .vineta, .seccion > .wrap > h2,
    .seccion > .wrap > .prosa, .seccion > .wrap > .aptitudes,
    .prosa, .cita, .avales, .herramientas,
    .empresa, .pilar > div, .caso, .clientes-cab, .hito, .cifra,
    .formacion .columna, .persona, .tarjeta-contacto, .nota-humana
  ){
    opacity:1 !important; filter:none !important;
    transform:none !important; animation:none !important;
  }
  .spot::before, .spot::after{display:none}
  .spot-eleva{transition:none}
  .spot-eleva:hover{transform:none}
  html.js-listo [data-scrub] .palabra{opacity:1 !important}
  .magnetico{transform:none !important}
  .progreso{display:none}
  html.js-listo .marquesina{overflow:visible}
  html.js-listo .marquesina-pista{flex-wrap:wrap; transform:none !important}
}

/* ---------- impresión: el dossier no lleva efectos ---------- */
@media print{
  html.js-listo :is(
    .hero .lema, .hero .titulo, .hero .lede, .hero .acciones, .hero .ficha-exec,
    .seccion > .wrap > .vineta, .seccion > .wrap > h2,
    .seccion > .wrap > .prosa, .seccion > .wrap > .aptitudes,
    .prosa, .cita, .avales, .herramientas,
    .empresa, .pilar > div, .caso, .clientes-cab, .hito, .cifra,
    .formacion .columna, .persona, .tarjeta-contacto, .nota-humana
  ){
    opacity:1 !important; filter:none !important; transform:none !important;
  }
  .spot::before, .spot::after{display:none}
  html.js-listo [data-scrub] .palabra{opacity:1 !important}
}