.film{position:relative;margin:0;width:100%}.film-stage{container-type:inline-size;position:relative;aspect-ratio:5 / 4;overflow:hidden;-webkit-mask-image:linear-gradient(#000 88%,transparent);mask-image:linear-gradient(#000 88%,transparent)}.film-in{position:absolute;inset:0;font-size:2.2cqi;font-family:var(--font-text);color:var(--ink)}.f-card{position:absolute;background:#fff;border-radius:1.1em;box-shadow:0 0 0 1px #233d620d,0 1.4em 2.8em -1.4em #233d6247}.f-card{transition:scale .45s var(--hover-ease),box-shadow .45s var(--hover-ease)}@media(hover:hover){.film .f-card:hover{z-index:5;scale:1.03;box-shadow:0 0 0 1px #233d620f,0 1.8em 3.4em -1.4em #233d625c}}.f-label{font:600 .75em/1.2 var(--font-display);color:var(--ink-soft)}.f-pill{display:inline-flex;align-items:center;gap:.45em;padding:.45em .85em;border-radius:999px;background:#fff;color:var(--ink);font:600 .8em/1 var(--font-display);white-space:nowrap;box-shadow:0 0 0 1px #233d620f,0 .6em 1.4em -.6em #233d624d}.f-pill i{width:.55em;height:.55em;border-radius:50%;background:var(--accent)}.film [data-in]{pointer-events:none;opacity:0;transform:translateY(1em) scale(.98);transition:opacity .6s var(--ease-out),transform .8s var(--ease-out),scale .45s var(--hover-ease),box-shadow .45s var(--hover-ease);transition-delay:calc(var(--o, 0) * .55s + .1s),calc(var(--o, 0) * .55s + .1s),0s,0s}.film.is-playing .f-card{animation:film-float 6s ease-in-out infinite}.film.is-playing .f-card:nth-child(2n){animation-delay:-3s}.film.is-playing .f-card:nth-child(3n){animation-duration:7.5s}@keyframes film-float{50%{translate:0 -.3em}}.film.is-0 [data-in="0"],.film.is-1 [data-in="1"],.film.is-2 [data-in="2"],.film.is-3 [data-in="3"]{opacity:1;transform:none;pointer-events:auto}.film [data-out]{transition:opacity .5s var(--ease-out),transform .7s var(--ease-out),scale .45s var(--hover-ease),box-shadow .45s var(--hover-ease)}.film.is-1 [data-out="1"],.film.is-2 [data-out="2"],.film.is-3 [data-out="3"]{opacity:0;transform:translateY(-1em) scale(.98);pointer-events:none}.film-cap{display:grid;gap:1rem;margin-top:10px;padding-inline:7%}.film-lines{display:grid}.film-lines p{grid-area:1 / 1;font:500 .9375rem / 1.4 var(--font-display);opacity:0;transform:translateY(.4em);transition:opacity .4s,transform .5s var(--ease-out)}.film[data-step="0"] [data-cap="0"],.film[data-step="1"] [data-cap="1"],.film[data-step="2"] [data-cap="2"],.film[data-step="3"] [data-cap="3"]{opacity:1;transform:none}.film-nav{display:flex;align-items:center;gap:1rem}.film-nav ol{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.75rem;flex:1;margin:0;padding:0;list-style:none}.film-nav [data-chapter]{display:grid;gap:.5rem;width:100%;padding:.25rem 0;border:0;background:none;color:var(--ink-soft);font:500 .75rem/1.2 var(--font-display);text-align:left;cursor:pointer}.film-nav [data-chapter][aria-current=true],.film-nav [data-chapter]:hover{color:var(--ink)}.film-nav [data-chapter] i{position:relative;display:block;height:4px;border-radius:2px;background:var(--mist-2);overflow:hidden}.film-nav [data-chapter] i:after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left}.film-nav [data-chapter].is-done i:after,.film-nav [data-chapter][aria-current=true] i:after{transform:none}.film.is-playing [data-chapter][aria-current=true] i:after{animation:film-fill var(--step-ms) linear}@keyframes film-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.film-pause{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--mist);color:var(--ink);cursor:pointer}.film-pause[aria-pressed=true] svg{opacity:.4}@media(prefers-reduced-motion:reduce){.film.is-playing .f-card{animation:none}}@media(max-width:560px){.film-stage{aspect-ratio:4 / 4.2}.film-in{font-size:2.6cqi}.film-nav [data-chapter] span{font-size:.75rem}}.film[data-scene=home] .film-stage{aspect-ratio:5 / 3.75}.film[data-scene=home] .film-cap{margin-top:-45px}.hero:has(.film[data-scene=home]) .hero-visual{display:flex;flex-direction:column;justify-content:center}.film[data-scene=whatsapp] .film-stage{-webkit-mask-image:linear-gradient(#000 95%,transparent);mask-image:linear-gradient(#000 95%,transparent)}