/* Puntal · movimiento común: fluido y sutil.
   Curva de salida suave (ease-out-expo aproximada) y escalonados cortos. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1)}

/* Hijos escalonados dentro de una sección que aparece: <ul data-stagger> */
.reveal [data-stagger] > *,.reveal[data-stagger] > *{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i,0) * 80ms + 120ms)}
.reveal.in [data-stagger] > *,.reveal.in[data-stagger] > *{opacity:1;transform:none}

/* Trazos SVG que se dibujan: <path pathLength="1" class="draw"> */
.draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-io)}
.reveal.in .draw,.go .draw{stroke-dashoffset:0}

/* Sección de vídeo: horizontal en ordenador, vertical en móvil */
.film{padding:88px 0}
.film-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.film-head p{margin:0;max-width:420px}
.film-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--film-r,16px);overflow:hidden;background:var(--film-bg,#111);box-shadow:var(--film-sh,none)}
.film-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-frame .film-vv{display:none}
.film-btn{position:absolute;right:16px;bottom:16px;z-index:2;display:flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 14px;border:0;border-radius:999px;cursor:pointer;font:500 14px/1 inherit;background:var(--film-btn-bg,rgba(0,0,0,.6));color:var(--film-btn-fg,#fff);backdrop-filter:blur(6px)}
.film-btn svg{width:14px;height:14px}
.film-btn:focus-visible{outline:2px solid var(--film-btn-bg,#fff);outline-offset:3px}
@media(max-width:760px){
  .film{padding:64px 0}
  .film-frame{aspect-ratio:9/16;max-width:360px;margin-inline:auto}
  .film-frame .film-vh{display:none}
  .film-frame .film-vv{display:block}
}

@media(prefers-reduced-motion:reduce){
  .reveal [data-stagger] > *,.reveal[data-stagger] > *{opacity:1;transform:none;transition:none}
  .draw{stroke-dashoffset:0;transition:none}
}