/* ═══ Tokens (paleta Nene León + alberca) ═══ */
:root{
  --red:#E8452C;--red-d:#C4321C;--yellow:#F7C83A;--cream:#F3F0DB;--cream-d:#E9E4C6;
  --sky:#5FD0F3;--sky-l:#BDF0FF;--blue:#1FB6E0;--deep:#0A6FA8;--deeper:#064E7A;--ink:#2B1B12;--muted:#6B5B4E;
  --fd:"Baloo 2",system-ui,sans-serif;--fb:"Quicksand",system-ui,sans-serif;
  --boing:cubic-bezier(.34,1.56,.64,1);--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50C150 0 150 100 300 50S450 0 600 50V100H0z' fill='%23000'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--fb);font-weight:600;color:var(--ink);background:var(--sky);overflow-x:hidden;line-height:1.45;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
body.locked{overflow:hidden;height:100svh}
img{display:block;max-width:100%;height:auto;user-select:none;-webkit-user-drag:none}
h1,h2,h3{font-family:var(--fd);font-weight:800;line-height:1;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}
section{position:relative;overflow:hidden;min-height:100svh}
.inner{position:relative;z-index:3;width:100%;max-width:26rem;margin:0 auto;text-align:center}
[data-depth],.fl{will-change:transform}
.ic{width:1.25em;height:1.25em;flex:none;fill:none}
.ic--inline{display:inline-block;vertical-align:-.25em;width:1.1em;height:1.1em;color:var(--yellow)}
.ic--red{color:var(--red)}

/* ═══ Tipografía / botones ═══ */
.kicker{font-family:var(--fd);font-weight:700;font-size:clamp(.8rem,3.3vw,.95rem);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:.35rem}
.kicker--sun{color:var(--yellow)}
.title{font-size:clamp(2.3rem,10.5vw,3.9rem);color:var(--deeper);margin-bottom:1.1rem;letter-spacing:-.02em}
.title--light{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--fd);font-weight:700;font-size:1.05rem;line-height:1;min-height:50px;padding:.85rem 1.4rem;border-radius:999px;background:var(--red);color:#fff;box-shadow:0 6px 0 var(--red-d),0 14px 24px rgba(196,50,28,.28);transition:transform .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent;user-select:none}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--red-d)}
.btn--big{font-size:1.2rem;padding:1rem 1.7rem}
.btn--blue{background:var(--blue);box-shadow:0 6px 0 var(--deep),0 12px 20px rgba(10,111,168,.3)}
.btn--blue:active{box-shadow:0 2px 0 var(--deep)}
.btn--ghost{background:#fff;color:var(--deep);box-shadow:0 6px 0 #D6E4F0,0 12px 20px rgba(0,0,0,.08)}
.btn--ghost:active{box-shadow:0 2px 0 #D6E4F0}
.btn--wa{background:#25D366;box-shadow:0 6px 0 #179E4B,0 14px 24px rgba(37,211,102,.35)}
.btn--wa:active{box-shadow:0 2px 0 #179E4B}
.js .reveal,.js .reveal-pop,.js .pack__grid li,.js .card{opacity:0}
.js [data-split] .ch{display:inline-block;opacity:0;transform:translateY(.6em) rotate(6deg)}

/* ═══ Animaciones ambientales ═══ */
.float-el{animation:floaty var(--fd-dur,4s) ease-in-out var(--fd-delay,0s) infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-12px) rotate(2.5deg)}}
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bubbles i{position:absolute;bottom:-40px;border-radius:50%;opacity:0;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(255,255,255,.3) 55%,transparent 70%);box-shadow:inset 0 0 6px rgba(255,255,255,.5);animation:bubble var(--dur,8s) linear var(--delay,0s) infinite}
@keyframes bubble{0%{transform:translate(0,0) scale(.6);opacity:0}10%{opacity:.9}50%{transform:translate(var(--sway,14px),-50vh) scale(1)}100%{transform:translate(calc(var(--sway,14px) * -1),-105vh) scale(1.1);opacity:0}}
.caustics{position:absolute;inset:0;opacity:.35;mix-blend-mode:soft-light;pointer-events:none;background:radial-gradient(ellipse 30% 18% at 20% 30%,#fff,transparent 70%),radial-gradient(ellipse 28% 16% at 70% 60%,#fff,transparent 70%),radial-gradient(ellipse 34% 20% at 45% 85%,#fff,transparent 70%),radial-gradient(ellipse 26% 14% at 85% 20%,#fff,transparent 70%);animation:caustic 9s ease-in-out infinite alternate}
@keyframes caustic{0%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-3%) scale(1.08)}100%{transform:translate(-3%,3%) scale(1.04)}}

/* Olas: tile SVG con máscara, color por background-color (sin markup) */
.wave{position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;z-index:4;-webkit-mask:var(--wave) repeat-x;mask:var(--wave) repeat-x;-webkit-mask-size:600px 100%;mask-size:600px 100%;animation:wave var(--wd,10s) linear infinite}
@keyframes wave{to{-webkit-mask-position-x:-600px;mask-position-x:-600px}}
.wave--1{height:42vh;--wd:14s;background:#6ED3EF;z-index:1}
.wave--2{height:30vh;--wd:10s;animation-direction:reverse;background:var(--blue);z-index:2}
.wave--3{height:17vh;--wd:7s;background:var(--deep);z-index:3}
.wave--cream{height:90px;--wd:12s;background:var(--cream)}
.wave--blue{height:90px;--wd:11s;background:var(--blue)}
.wave--sky{height:90px;--wd:13s;background:var(--sky)}
.wave--sand{height:80px;--wd:12s;background:var(--cream)}
.wave--surface{top:-36px;bottom:auto;height:74px;--wd:8s;background:var(--blue);z-index:0}
.wave--o1{height:20vh;--wd:12s;background:#6ED3EF}
.wave--o2{height:11vh;--wd:8s;animation-direction:reverse;background:var(--blue)}

/* ═══ Portada ═══ */
.intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:calc(1.5rem + var(--sat)) 1.25rem calc(1.5rem + var(--sab));overflow:hidden}
.intro__bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,var(--sky-l) 0%,var(--blue) 55%,var(--deep) 100%)}
.intro__card{position:relative;text-align:center;width:min(100%,24rem);background:var(--cream);border-radius:32px;padding:7.5rem 1.5rem 1.8rem;box-shadow:0 30px 60px rgba(6,78,122,.35),inset 0 0 0 5px var(--yellow);transform:translateY(24px) scale(.96);opacity:0;animation:card-in .8s var(--boing) .2s forwards}
@keyframes card-in{to{transform:none;opacity:1}}
.intro__peek{position:absolute;left:50%;top:-4.6rem;width:200px;filter:drop-shadow(0 12px 16px rgba(0,0,0,.2));animation:peek 3.2s ease-in-out infinite;transform-origin:bottom center}
@keyframes peek{0%,100%{transform:translateX(-50%) rotate(-3deg)}50%{transform:translateX(-50%) rotate(3deg)}}
.intro__title{font-size:clamp(3.4rem,16vw,4.6rem);color:var(--red);margin:.2rem 0 1.3rem;line-height:.9}
.intro__title span{display:block;font-size:.38em;font-weight:700;color:var(--deep);letter-spacing:.08em;margin-top:.4rem;text-transform:uppercase}
.intro__hint{margin-top:1rem;font-size:.85rem;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:.35rem}
.intro__hint .ic{color:var(--deep)}
.intro.is-open{pointer-events:none}

/* ═══ Sonido ═══ */
.sound{position:fixed;top:calc(.9rem + var(--sat));right:.9rem;z-index:90;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 6px 16px rgba(0,0,0,.15);display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.sound span{display:flex;align-items:flex-end;gap:3px;height:18px}
.sound i{width:3px;border-radius:2px;background:var(--red);height:40%;animation:eq .9s ease-in-out infinite}
.sound i:nth-child(2){animation-delay:.15s}.sound i:nth-child(3){animation-delay:.3s}.sound i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:30%}50%{height:100%}}
.sound[aria-pressed="false"] i{animation:none;height:22%;background:#9AA7B8}

/* ═══ 1. Hero ═══ */
.hero{background:linear-gradient(180deg,var(--sky) 0%,#A9EAFB 45%,#E6FAFF 100%);display:flex;justify-content:center;align-items:flex-start}
.hero__sun{position:absolute;width:min(36vw,170px);left:-3vw;top:calc(2vh + var(--sat));filter:drop-shadow(0 0 30px rgba(247,200,58,.7));--fd-dur:6s}
.cloud{position:absolute;width:34vw;max-width:200px;aspect-ratio:2.2;background:#fff;border-radius:999px;opacity:.9;filter:drop-shadow(0 6px 10px rgba(6,78,122,.12))}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%;bottom:30%}
.cloud::before{width:45%;aspect-ratio:1;left:14%}.cloud::after{width:60%;aspect-ratio:1;right:10%}
.cloud--1{left:-8vw;top:16vh;animation:drift 34s linear infinite}
.cloud--2{left:55vw;top:30vh;width:26vw;animation:drift 42s linear -18s infinite}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(120vw)}}
.hero__birds{position:absolute;width:20vw;max-width:110px;top:calc(4vh + var(--sat));left:-30vw;animation:fly 26s linear 3s infinite}
@keyframes fly{0%{transform:translate(0,0)}25%{transform:translate(35vw,-3vh)}50%{transform:translate(70vw,1vh)}75%{transform:translate(105vw,-2vh)}100%{transform:translate(140vw,0)}}
.palm{position:absolute;bottom:30vh;width:min(38vw,190px);transform-origin:bottom center;animation:sway 5s ease-in-out infinite;z-index:1}
.palm--l{left:-10vw}.palm--r{right:-12vw;animation-delay:-2.5s;transform:scaleX(-1)}
@keyframes sway{0%,100%{rotate:-2deg}50%{rotate:2deg}}
.hero__copy{position:relative;z-index:3;text-align:center;padding:calc(11vh + var(--sat)) 1.25rem 0;width:100%}
.hero__title{margin:.2rem 0 .5rem;display:flex;flex-direction:column;align-items:center}
.hero__title>span{display:block;font-size:clamp(4.2rem,21vw,7.2rem);line-height:.9;color:var(--red);text-shadow:0 4px 0 #fff,0 10px 24px rgba(6,78,122,.18);letter-spacing:-.02em}
.hero__title>.hero__sub{font-size:clamp(1.6rem,7.5vw,2.8rem);font-weight:700;color:var(--deeper);letter-spacing:.06em;text-shadow:0 3px 0 #fff}
.hero__lead{font-weight:700;font-size:clamp(1rem,4.2vw,1.2rem);color:#2E5C80;max-width:22rem;margin:0 auto}
.badge{display:inline-flex;align-items:center;gap:.6rem;margin-top:1rem;padding:.5rem 1.1rem;border-radius:999px;background:#fff;box-shadow:0 8px 24px rgba(6,78,122,.18);font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--deep)}
.badge strong{font-size:1.7rem;color:var(--red);line-height:1}
.pool{position:absolute;left:0;right:0;bottom:0;height:46vh;pointer-events:none}
.hero__turtle{position:absolute;width:110px;bottom:32%;left:-130px;animation:swim 24s linear 2s infinite;z-index:1}
@keyframes swim{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(30vw,-8px) rotate(-3deg)}50%{transform:translate(60vw,0) rotate(0)}75%{transform:translate(90vw,6px) rotate(3deg)}100%{transform:translate(calc(100vw + 150px),0)}}
.hero__flamingo{position:absolute;width:90px;right:4vw;bottom:44%;--fd-dur:4.6s;--fd-delay:-1s;z-index:1}
.hero__lion{position:absolute;left:50%;bottom:9%;width:min(64vw,300px);margin-left:calc(min(64vw,300px) / -2);filter:drop-shadow(0 16px 20px rgba(6,78,122,.3));animation:floaty 3.6s ease-in-out infinite;z-index:2}
.cue{position:absolute;left:50%;bottom:calc(1rem + var(--sab));transform:translateX(-50%);z-index:6;color:#fff;text-align:center;font-family:var(--fd);font-weight:700;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}
.cue span{display:block;width:26px;height:42px;border:3px solid #fff;border-radius:14px;margin:0 auto .3rem;position:relative}
.cue span::after{content:"";position:absolute;left:50%;top:7px;width:5px;height:9px;margin-left:-2.5px;border-radius:3px;background:#fff;animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(16px);opacity:0}100%{opacity:0}}

/* ═══ 2. Fecha ═══ */
.date{background:linear-gradient(180deg,var(--deep) 0%,var(--blue) 100%);color:#fff;display:grid;place-items:center;padding:5rem 1.25rem 9rem}
.date .kicker{color:var(--yellow)}
.date__big{display:flex;flex-direction:column;align-items:center;font-family:var(--fd);text-transform:uppercase;letter-spacing:.14em;margin:.2rem 0 1.2rem}
.date__big span{font-size:clamp(1rem,4.5vw,1.3rem);font-weight:700}
.date__big b{font-size:clamp(7rem,38vw,12rem);line-height:.85;font-weight:800;letter-spacing:-.03em;color:var(--yellow);text-shadow:0 8px 0 rgba(0,0,0,.12),0 20px 40px rgba(0,0,0,.25)}
.date__lead{font-family:var(--fd);font-weight:700;font-size:1.1rem;opacity:.9;margin-bottom:.6rem}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;max-width:22rem;margin:0 auto}
.countdown div{background:rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:18px;padding:.7rem .2rem .5rem;border:2px solid rgba(255,255,255,.25)}
.countdown b{display:block;font-family:var(--fd);font-weight:800;font-size:clamp(1.7rem,8vw,2.4rem);line-height:1;font-variant-numeric:tabular-nums}
.countdown span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;opacity:.85;margin-top:.25rem}
.countdown.is-today div{background:var(--yellow);color:var(--deeper);border-color:#fff}
.fl{position:absolute;z-index:2;filter:drop-shadow(0 10px 14px rgba(0,0,0,.2))}
.fl--ball{width:84px;left:-10px;top:12%;--fd-dur:4s}
.fl--donut{width:120px;right:-24px;top:34%;--fd-dur:5s;--fd-delay:-1.5s}
.fl--coco{width:80px;left:5%;bottom:14%;--fd-dur:4.4s;--fd-delay:-2.4s}

/* ═══ 3. Ruta ═══ */
.route{background:var(--cream);padding:4.5rem 1.25rem 8rem;display:flex;flex-direction:column;align-items:center}
.route__map{position:relative;margin:0 auto 1.2rem;width:100%;max-width:22rem}
.route__svg{width:100%;height:auto;overflow:visible}
.route__dash{animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-26}}
.route__done{stroke-dasharray:1;stroke-dashoffset:1}
.route__van{position:absolute;left:0;top:0;width:96px;filter:drop-shadow(0 8px 8px rgba(0,0,0,.2))}
.card{position:relative;background:#fff;border-radius:28px;padding:1.4rem 1.25rem 1.3rem 1.25rem;text-align:left;box-shadow:0 18px 40px rgba(107,68,35,.12),inset 0 0 0 4px var(--yellow)}
.card--pool{box-shadow:0 18px 40px rgba(10,111,168,.14),inset 0 0 0 4px #BFEFFB}
.card__icon{position:absolute;right:1.1rem;top:-1.3rem;width:58px;height:58px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 8px 18px rgba(196,50,28,.35),0 0 0 4px #fff}
.card__icon .ic{width:28px;height:28px}
.card__icon--pool{background:var(--blue);box-shadow:0 8px 18px rgba(10,111,168,.35),0 0 0 4px #fff}
.card__kicker{font-family:var(--fd);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--red);font-weight:700;display:flex;align-items:center;gap:.5rem}
.card__kicker b{font-size:1rem;letter-spacing:.02em;background:var(--red);color:#fff;padding:.1rem .55rem;border-radius:999px}
.card h3{font-size:clamp(1.7rem,8vw,2.2rem);color:var(--deeper);margin:.3rem 0 .3rem;letter-spacing:-.02em}
.card>p:not(.card__kicker){font-size:.98rem;color:var(--muted);margin-bottom:1rem}
.card__actions{display:flex;flex-wrap:wrap;gap:.6rem}
.card__actions .btn{flex:1 1 auto;font-size:.98rem;padding:.8rem 1rem}
.route__arrow{display:grid;place-items:center;width:46px;height:46px;margin:.6rem auto;border-radius:50%;background:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(10,111,168,.3);animation:cue-arrow 1.4s ease-in-out infinite}
.route__arrow .ic{width:26px;height:26px}
@keyframes cue-arrow{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}

/* ═══ 4. Qué llevar ═══ */
.pack{background:linear-gradient(180deg,var(--blue) 0%,var(--deep) 60%,var(--blue) 100%);color:#fff;padding:5rem 1.25rem 9rem;display:flex;justify-content:center}
.pack__grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem;margin-top:.4rem}
.pack__grid li{background:var(--cream);color:var(--deeper);border-radius:26px;padding:1.1rem .75rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;box-shadow:0 14px 30px rgba(6,78,122,.25),inset 0 0 0 4px #fff}
.pack__grid img{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.15));transition:transform .4s var(--boing)}
.pack__grid span{font-family:var(--fd);font-weight:700;font-size:1.05rem;line-height:1.15;text-align:center;letter-spacing:-.01em}
.pack__grid li:nth-child(odd) img{animation:wiggle 3s ease-in-out infinite}
.pack__grid li:nth-child(even) img{animation:wiggle 3.4s ease-in-out -1.5s infinite}
@keyframes wiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.pack__grid li:active img{transform:scale(1.2) rotate(-10deg)}
.pack__note{margin-top:1.4rem;font-weight:700;opacity:.95;display:flex;align-items:center;justify-content:center;gap:.4rem}

/* ═══ 5. Escena alberca ═══ */
.scene{min-height:110svh;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--sky) 0%,var(--sky-l) 100%)}
.scene__sun{position:absolute;width:110px;left:6vw;top:calc(5vh + var(--sat));--fd-dur:6s}
.palm--far-l{left:-10vw;bottom:auto;top:16vh;width:32vw}
.palm--far-r{right:-12vw;bottom:auto;top:12vh;width:36vw;transform:scaleX(-1)}
.scene__copy{position:relative;z-index:3;text-align:center;padding:calc(10vh + var(--sat)) 1.25rem 0}
.scene__hint{font-weight:700;color:#2E5C80}
.water{position:absolute;left:0;right:0;bottom:0;height:64%;cursor:pointer;touch-action:pan-y}
.water__body{position:absolute;inset:32px 0 0;z-index:1;background:linear-gradient(180deg,var(--blue) 0%,var(--deep) 55%,var(--deeper) 100%)}
.water__turtle{position:absolute;width:150px;left:-170px;top:26%;animation:swim 26s linear -4s infinite}
.fl--flamingo2{width:130px;right:-2vw;top:-64px;--fd-dur:4.6s}
.fl--ball2{width:64px;left:8vw;top:-36px;--fd-dur:3.8s;--fd-delay:-1s}
.fl--coco2{width:62px;left:62vw;top:-40px;--fd-dur:4.2s;--fd-delay:-2s}
.fl--sunscreen{width:52px;left:30vw;top:-46px;--fd-dur:5s;--fd-delay:-3s}
.water__lion{position:absolute;left:50%;top:4%;width:min(50vw,230px);margin-left:calc(min(50vw,230px) / -2);filter:drop-shadow(0 14px 18px rgba(0,0,0,.25));--fd-dur:3.2s;--fd-delay:-1s}
.splash{position:absolute;width:20px;height:20px;border-radius:50%;border:3px solid rgba(255,255,255,.9);transform:translate(-50%,-50%);pointer-events:none;animation:splash .7s ease-out forwards}
@keyframes splash{to{transform:translate(-50%,-50%) scale(5);opacity:0}}
.drop{position:absolute;border-radius:50%;background:#fff;transform:translate(-50%,-50%);pointer-events:none;animation:drop .8s ease-out forwards}
@keyframes drop{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.3);opacity:0}}

/* ═══ 6. Te esperamos ═══ */
.outro{background:linear-gradient(180deg,var(--cream) 0%,#FBE9A6 60%,var(--yellow) 100%);display:flex;align-items:center;justify-content:center;padding:4rem 1.25rem 12rem;text-align:center;color:var(--deeper)}
#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.outro__lion{width:min(58vw,250px);margin:0 auto -.4rem;filter:drop-shadow(0 16px 22px rgba(107,68,35,.3));animation:jump 2.4s ease-in-out infinite}
@keyframes jump{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
.outro__title{font-size:clamp(2.7rem,13vw,5.2rem);white-space:nowrap;line-height:1;color:var(--red);text-shadow:0 4px 0 #fff,0 12px 28px rgba(196,50,28,.25);margin-bottom:.7rem;letter-spacing:-.02em}
.outro__sub{font-weight:700;color:#5B4A2E;max-width:20rem;margin:0 auto 1.4rem}
.outro__actions{display:flex;flex-direction:column;gap:.8rem;align-items:stretch}
.outro__sign{margin-top:1.6rem;font-family:var(--fd);font-weight:700;color:#8A5A32;display:flex;align-items:center;justify-content:center;gap:.35rem}
.fl--o1{width:96px;left:-30px;top:9%;--fd-dur:4.5s}
.fl--o2{width:66px;right:-8px;top:18%;--fd-dur:4s;--fd-delay:-1.8s}
.fl--o3{width:84px;left:2%;bottom:7%;--fd-dur:5s;--fd-delay:-2.5s}
.fl--o4{width:58px;right:3%;bottom:8%;--fd-dur:4.3s;--fd-delay:-3s}

@media (min-width:768px){
  .hero__copy{padding-top:calc(13vh + var(--sat))}
  .pack__grid{grid-template-columns:repeat(4,1fr)}.pack .inner{max-width:44rem}
  .outro__actions{flex-direction:row;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .reveal,.js .reveal-pop,.js .pack__grid li,.js .card,.js [data-split] .ch{opacity:1;transform:none}
}