/* =========================================================
   Grupo Ilha Vip · Sistema de Apresentação
   Palco com base 1920x1080 que estica pro formato da tela
   (--W x --H) e escala pra ocupar o navegador inteiro.
   --oy = metade da altura extra, pra centralizar o conteúdo.
   Cores e tipos iguais ao site (oceano, dourado, areia).
   ========================================================= */
:root{
  --ink:#07131f;
  --ocean:#0b2236;
  --ocean-2:#102c44;
  --ocean-3:#163a57;
  --tide:#1d4d6b;
  --gold:#c9a96a;
  --gold-hi:#d9bd84;
  --gold-deep:#94703a;
  --mist:#d7e3ec;
  --mist-deep:#b3c7d6;
  --sand:#f3ede3;
  --sand-2:#e9e0d1;
  --white:#fffdf9;
  --muted-light:rgba(243,237,227,.66);
  --muted-dark:#55636f;

  --ease:cubic-bezier(.22,1,.36,1);
  --back:cubic-bezier(.34,1.56,.64,1);
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--ocean);color:var(--sand);font-family:var(--body);overflow:hidden;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
body.idle{cursor:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
em{font-style:normal}
b{font-weight:700}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

.brand{font-family:var(--display);font-weight:700;letter-spacing:-.05em;line-height:1}
.brand i{font-style:normal;color:var(--gold)}
.ic{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- palco ---------- */
.viewport{position:fixed;inset:0;overflow:hidden}
.deck{position:absolute;left:50%;top:50%;width:calc(var(--W,1920) * 1px);height:calc(var(--H,1080) * 1px);transform:translate(-50%,-50%) scale(var(--s,1));transform-origin:center;background:var(--ocean)}

.slide{position:absolute;inset:0;overflow:hidden;background:var(--ocean);color:var(--sand);opacity:0;visibility:hidden;transform:scale(1.03);
  transition:opacity .6s var(--ease),transform .9s var(--ease),visibility 0s linear .9s}
.deck[data-dir="prev"] .slide{transform:scale(.97)}
.deck[data-dir="next"] .slide.is-leaving{transform:scale(.97)}
.deck[data-dir="prev"] .slide.is-leaving{transform:scale(1.03)}
.slide.is-leaving{visibility:visible;opacity:0;z-index:1}
.slide.is-active{opacity:1;visibility:visible;transform:none;z-index:2;transition:opacity .8s var(--ease) .12s,transform 1.1s var(--ease) .12s,visibility 0s}
.slide.light{background:var(--sand);color:var(--ink)}

.bg-ocean{position:absolute;inset:0;background:radial-gradient(120% 90% at 85% 0%,var(--ocean-3) 0%,transparent 55%),linear-gradient(160deg,var(--ocean-2),var(--ocean) 45%,var(--ink));overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:drift 18s ease-in-out infinite alternate}
.orb.o1{width:900px;height:900px;right:-260px;top:-320px;background:radial-gradient(circle,rgba(201,169,106,.32),transparent 65%)}
.orb.o2{width:1000px;height:1000px;left:-360px;bottom:-460px;background:radial-gradient(circle,rgba(29,77,107,.9),transparent 65%);animation-duration:24s}
@keyframes drift{to{transform:translate(-80px,60px) scale(1.08)}}

/* ---------- animação por elemento ----------
   .a = escondido; .a.in = visível. --d = atraso.
   Elementos com data-step só entram naquele clique. */
.a{opacity:0;transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter 1s var(--ease),clip-path 1.3s var(--ease),background-size 1s var(--ease),color .6s var(--ease);transition-delay:0s}
.a.in{opacity:1;transition-delay:var(--d,0s)}
.a-up{transform:translateY(48px)}
.a-scale{transform:scale(.84)}
.a-blur{filter:blur(16px);transform:scale(1.04)}
.a-up.in,.a-scale.in,.a-blur.in{transform:none;filter:none}
.a-wipe{opacity:1;clip-path:inset(0 0 0 100%)}
.a-wipe-up{opacity:1;clip-path:inset(100% 0 0 0)}
.a-wipe.in,.a-wipe-up.in{clip-path:inset(0 0 0 0)}
.a-wipe img,.a-wipe-up img{transform:scale(1.12);transition:transform 2.4s var(--ease)}
.a-wipe.in img,.a-wipe-up.in img{transform:none;transition-delay:var(--d,0s)}
.a-draw .ic *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease)}
.a-draw.in .ic *{stroke-dashoffset:0;transition-delay:calc(var(--d,0s) + .3s)}

/* ---------- peças comuns ---------- */
.kicker{font-size:22px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.light .kicker{color:var(--gold-deep)}
.shead{position:absolute;left:120px;top:64px;display:flex;align-items:center;gap:18px;font-size:21px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);z-index:3}
.light .shead{color:var(--gold-deep)}
.shead-ic{width:58px;height:58px;padding:14px;border-radius:50%;border:1.5px solid currentColor}
.s-title{position:absolute;left:120px;top:calc(150px + var(--oy,0px));width:1560px;font-family:var(--display);font-weight:500;font-size:68px;line-height:1.06;letter-spacing:-.035em}
.s-title em{color:var(--gold)}
.light .s-title em{color:var(--gold-deep)}
.big-num{font-family:var(--display);font-weight:600;font-size:250px;line-height:.86;letter-spacing:-.06em;color:var(--ocean)}
.big-cap{font-family:var(--display);font-size:38px;font-weight:500;letter-spacing:-.02em;margin-top:14px}
.tag{display:inline-flex;align-items:center;padding:10px 20px;border-radius:100px;border:1px solid rgba(243,237,227,.25);font-size:17px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.side-photo{position:absolute;right:0;top:0;bottom:0;width:700px;overflow:hidden}
.side-photo img{width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%);mask-image:linear-gradient(90deg,transparent 0,#000 40%)}
.spec-title{position:absolute;left:120px;top:calc(150px + var(--oy,0px));font-family:var(--display);font-weight:600;font-size:112px;line-height:1;letter-spacing:-.045em}
.spec-title em{color:var(--gold)}
.light .spec-title em{color:var(--gold-deep)}
.specs{position:absolute;left:120px;top:calc(340px + var(--oy,0px));width:1000px;display:grid;grid-template-columns:1fr 1fr;gap:44px 64px}
.specs--3{grid-template-columns:repeat(3,1fr)}
.specs dt{font-size:19px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.light .specs dt{color:var(--gold-deep)}
.specs dd{font-family:var(--display);font-size:36px;font-weight:500;line-height:1.15;letter-spacing:-.02em;margin-top:10px}
.chips{display:flex;gap:10px}
.chips span{padding:6px 16px;border-radius:100px;border:1px solid rgba(201,169,106,.6);font-family:var(--body);font-size:19px;font-weight:600;color:var(--gold-hi);letter-spacing:0}

/* ---------- 01 abertura ---------- */
.open-top{position:absolute;left:160px;top:calc(110px + var(--oy,0px));display:flex;align-items:center;gap:26px}
.open-top .brand{font-size:44px}
.focus{position:absolute;left:160px;top:calc(290px + var(--oy,0px));display:flex;flex-direction:column;font-family:var(--display);font-weight:600;font-size:150px;line-height:1;letter-spacing:-.05em}
.focus .w{display:block;width:max-content;transform-origin:left center}
.s-open.at1 .w.in:not(.key){filter:blur(12px);opacity:.28;transition-duration:1.4s}
.s-open.at1 .w.key.in{color:var(--gold-hi);transform:scale(1.12);transition-duration:1.4s}

/* ---------- 02 presente ---------- */
.gift-photo{position:absolute;right:0;top:0;bottom:0;width:max(1080px,calc(var(--W,1920) * 1px - 980px));overflow:hidden}
.gift-photo img{width:100%;height:100%;object-fit:cover;object-position:60% center}
.gift-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ocean) 0%,rgba(11,34,54,.6) 18%,rgba(11,34,54,0) 45%)}
.gift-copy{position:absolute;left:140px;top:50%;transform:translateY(-50%);width:900px;z-index:2}
.gift-title{margin-top:34px;font-family:var(--display);font-weight:400;font-size:92px;line-height:1.12;letter-spacing:-.035em}
.gift-title .ln{display:block;width:max-content}
.a-hl{background:linear-gradient(var(--gold),var(--gold)) no-repeat left 55%/0% 86%;padding:0 16px;margin-left:-16px;margin-top:6px}
.a-hl.in{background-size:100% 86%;color:var(--ink)}

/* ---------- 03 azos ---------- */
.azos-photo{position:absolute;left:0;top:0;bottom:0;width:640px;overflow:hidden}
.azos-photo img{width:100%;height:100%;object-fit:cover}
.azos-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,34,54,0) 30%,rgba(11,34,54,.75) 62%,var(--ocean) 92%)}
.azos-intro{position:absolute;left:80px;bottom:100px;width:500px;z-index:2}
.azos-name{font-family:var(--display);font-weight:700;font-size:170px;line-height:.9;letter-spacing:-.06em;margin-top:10px}
.azos-lead{font-size:24px;line-height:1.5;color:var(--muted-light);margin-top:22px}
.azos-grid{position:absolute;left:730px;right:100px;top:calc(130px + var(--oy,0px));bottom:calc(130px + var(--oy,0px));display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:26px}
.card{display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:44px 38px;border-radius:28px;background:rgba(255,255,255,.035);border:1px solid rgba(243,237,227,.12)}
.card-ic{width:66px;height:66px;color:var(--gold-hi);margin-bottom:auto}
.card h3{font-family:var(--display);font-weight:600;font-size:40px;line-height:1.05;letter-spacing:-.03em}
.card p{font-size:22px;line-height:1.45;color:var(--muted-light)}
.card .stat{font-family:var(--display);font-weight:600;font-size:104px;line-height:.9;letter-spacing:-.05em;color:var(--gold-hi);margin-bottom:auto}
.card .stat small{font-size:60px}
.card .stat em{font-size:40px;letter-spacing:-.02em;color:var(--sand);font-weight:500}

/* ---------- análise de necessidade (gráfico de barras) ---------- */
.need-left{position:absolute;left:120px;top:0;bottom:0;width:580px;display:flex;flex-direction:column;justify-content:center}
.need-title{font-family:var(--display);font-weight:600;font-size:104px;line-height:.98;letter-spacing:-.05em;margin-top:18px}
.need-title em{color:var(--gold)}
.need-sub{font-size:28px;line-height:1.45;color:var(--muted-light);margin-top:26px}
.need-total{margin-top:56px;padding-top:30px;border-top:1px solid rgba(243,237,227,.14)}
.need-total p:first-child{font-size:22px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.need-num{font-family:var(--display);font-weight:600;font-size:92px;line-height:1;letter-spacing:-.05em;color:var(--gold-hi);margin-top:14px;white-space:nowrap}
.need-num small{font-size:36px;color:var(--sand);letter-spacing:-.01em;margin-left:6px}
.bars{position:absolute;left:780px;right:120px;top:calc(190px + var(--oy,0px));bottom:calc(180px + var(--oy,0px));display:flex;gap:18px}
.bar-col{flex:1;min-width:0;display:flex;flex-direction:column}
.bar-track{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:8px;padding-top:56px;border-bottom:1.5px solid rgba(243,237,227,.22)}
.bar{position:relative;width:min(96px,72%);height:0;border-radius:12px 12px 0 0;opacity:1;transition:height 1.3s var(--ease),opacity .6s var(--ease),filter 1s var(--ease)}
.bar.in{height:max(5px,calc(var(--v) / var(--max,1) * 100%))}
.bars--duo .bar{width:42%}
.bar-val{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:12px;font-size:21px;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .6s var(--ease)}
.bar.in .bar-val{opacity:1;transition-delay:calc(var(--d,0s) + .7s)}
.bars--duo .bar-val{font-size:17px}
.bar-lbl{margin-top:16px;height:3.9em;text-align:center;font-size:19px;line-height:1.3;color:var(--muted-light)}
.k-tem{background:var(--mist)}
.k-gasto{background:#e0806f}
.k-seguro{background:rgba(215,227,236,.32)}
.k-meta{background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep));box-shadow:0 0 50px -10px rgba(217,189,132,.55)}
.k-meta .bar-val{color:var(--gold-hi);font-size:24px}
.bars--duo .k-meta .bar-val{font-size:17px}
.s-need.at1 .bar:not(.k-meta){filter:saturate(.6) brightness(.8)}
.s-need.at1 .bars--duo .k-gasto .bar-val{opacity:0}
.bars-legend{position:absolute;left:780px;bottom:calc(96px + var(--oy,0px));display:flex;flex-wrap:wrap;gap:12px 30px;font-size:18px;color:var(--muted-light)}
.bars-legend li{display:flex;align-items:center;gap:10px}
.bars-legend i{width:16px;height:16px;border-radius:4px}

/* ---------- 05 lista doenças graves ---------- */
.list-side{position:absolute;left:120px;top:calc(190px + var(--oy,0px));width:470px}
.carencia{margin-top:70px;padding:38px 40px;border-radius:28px;background:var(--ocean);color:var(--sand)}
.carencia .kicker{color:var(--gold)}
.car-num{font-family:var(--display);font-size:40px;font-weight:500;margin-top:10px}
.car-num b{font-size:96px;font-weight:600;letter-spacing:-.05em;color:var(--gold-hi)}
.car-txt{display:flex;gap:14px;align-items:flex-start;font-size:22px;line-height:1.4;margin-top:16px;color:var(--muted-light)}
.car-txt span{width:28px;height:28px;flex:none;color:var(--gold-hi)}
.checks{position:absolute;left:680px;right:110px;top:calc(190px + var(--oy,0px));columns:3;column-gap:44px}
.checks li{position:relative;break-inside:avoid;padding:11px 0 11px 44px;font-size:23px;line-height:1.3}
.checks li::before{content:"";position:absolute;left:0;top:11px;width:28px;height:28px;border-radius:50%;background:var(--gold-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='13' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M8.5 14.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='13' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M8.5 14.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- 06 câncer ---------- */
.tiers{position:absolute;left:120px;right:120px;top:calc(330px + var(--oy,0px));bottom:calc(100px + var(--oy,0px));display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tier{border-radius:30px;padding:44px 42px;display:flex;flex-direction:column;gap:30px}
.tier.t1{background:var(--white);border:1px solid rgba(11,26,40,.08)}
.tier.t2{background:var(--gold);color:var(--ink)}
.tier.t3{background:var(--ocean);color:var(--sand)}
.tier-top{display:flex;flex-direction:column;gap:18px}
.tier h3{font-family:var(--display);font-weight:600;font-size:58px;letter-spacing:-.04em;line-height:1}
.meter{display:flex;gap:7px}
.meter i{width:46px;height:9px;border-radius:5px;background:currentColor;opacity:.18}
.t1 .meter i:nth-child(-n+1),.t2 .meter i:nth-child(-n+2),.t3 .meter i{opacity:1}
.t3 .meter i{background:var(--gold-hi)}
.tier ul{display:flex;flex-direction:column;gap:14px}
.tier li{position:relative;padding-left:24px;font-size:25px;line-height:1.4}
.tier li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.5}

/* ---------- 07 gráfico ---------- */
.s-donut .s-title{width:1500px;font-size:62px}
.donut{position:absolute;left:calc(50% - 300px);top:calc(50% - 200px);width:600px;height:600px}
.donut svg{width:600px;height:600px;overflow:visible}
.ring{fill:none;stroke:rgba(255,255,255,.06);stroke-width:130}
.seg{fill:none;stroke-width:130;transition:stroke-dasharray 1.4s var(--ease),opacity .8s var(--ease)!important}
.a-seg{opacity:1;stroke-dasharray:0 100;stroke-dashoffset:var(--off)}
.a-seg.in{stroke-dasharray:var(--len) 100;transition-delay:var(--d)!important}
.seg.leve{stroke:var(--mist)}
.seg.mod{stroke:var(--gold)}
.seg.grave{stroke:var(--gold-deep)}
.dl{position:absolute;width:180px;margin:-44px 0 0 -90px;text-align:center;font-size:20px;line-height:1.1;color:var(--ink)}
.dl b{display:block;font-family:var(--display);font-size:54px;font-weight:600;letter-spacing:-.04em}
.dl.grave{color:var(--sand)}
.dn-center{position:absolute;left:50%;top:50%;width:230px;margin:-30px 0 0 -115px;text-align:center;font-size:19px;line-height:1.4;color:var(--muted-light)}
.s-donut.at1 .seg.grave,.s-donut.at1 .dl.grave{opacity:.22}
.donut-left,.donut-right{position:absolute;top:calc(50% - 60px);width:450px}
.donut-left{left:120px}
.donut-right{right:120px}
.dn-num{font-family:var(--display);font-weight:600;font-size:140px;line-height:.9;letter-spacing:-.06em;color:var(--gold-hi);margin-bottom:22px}
.donut-left p:not(.dn-num),.donut-right p:not(.dn-num){font-size:28px;line-height:1.4;color:var(--muted-light)}
.donut-left b,.donut-right b{color:var(--sand)}
.donut-left .fonte{font-size:17px!important;margin-top:24px;opacity:.7}

/* ---------- 09 IPT ---------- */
.ipt-left{position:absolute;left:120px;top:0;bottom:0;width:760px;display:flex;flex-direction:column;justify-content:center}
.ipt-title{font-family:var(--display);font-weight:600;font-size:132px;line-height:.95;letter-spacing:-.05em}
.ipt-sub{font-family:var(--display);font-size:46px;letter-spacing:-.02em;margin-top:54px}
.ipt-sub b{color:var(--gold-hi);font-weight:600}
.events{position:absolute;right:110px;top:calc(150px + var(--oy,0px));bottom:calc(100px + var(--oy,0px));width:880px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.events li{display:flex;align-items:center;gap:28px;font-size:25px;line-height:1.35}
.events li span{width:62px;height:62px;flex:none;padding:15px;border-radius:50%;border:1.5px solid rgba(201,169,106,.55);color:var(--gold-hi)}

/* ---------- 10 grupos IPT ---------- */
.s-groups .s-title{width:1400px;font-size:64px}
.groups{position:absolute;left:120px;right:120px;top:calc(390px + var(--oy,0px));bottom:calc(100px + var(--oy,0px));display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.group{background:var(--white);border-radius:28px;padding:40px 36px;border:1px solid rgba(11,26,40,.07)}
.group h3{font-family:var(--display);font-weight:600;font-size:29px;line-height:1.15;letter-spacing:-.02em;color:var(--ocean);margin-bottom:24px}
.group h3 span{display:block;width:54px;height:54px;color:var(--gold-deep);margin-bottom:20px}
.group li{font-size:22px;line-height:1.35;padding:7px 0}
.group li.more{color:var(--muted-dark);font-style:italic}

/* ---------- 12 REF ---------- */
.ref-left{position:absolute;left:120px;top:calc(200px + var(--oy,0px));width:560px}
.ref-left .big-num{margin-top:18px}
.ref-only{font-family:var(--display);font-weight:600;font-size:60px;letter-spacing:-.035em;color:var(--ocean);margin-top:44px}
.ref-groups{position:absolute;left:740px;right:120px;top:calc(190px + var(--oy,0px));bottom:calc(100px + var(--oy,0px));display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:start}
.rgroup{background:var(--white);border-radius:28px;padding:44px;border:1px solid rgba(11,26,40,.07)}
.rgroup h3{display:inline-block;white-space:nowrap;font-size:19px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:12px 22px;border-radius:100px;background:var(--ocean);color:var(--sand);margin-bottom:26px}
.rgroup li{font-size:25px;line-height:1.3;padding:8px 0}

/* ---------- 15 funeral ---------- */
.fun-serv{position:absolute;left:120px;top:calc(560px + var(--oy,0px));width:1040px}
.tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.tags li{padding:12px 22px;border-radius:100px;background:var(--white);border:1px solid rgba(11,26,40,.1);font-size:22px}

/* ---------- 16 copo ---------- */
.copo-bg{position:absolute;inset:0;background:
  radial-gradient(48% 60% at 50% -8%,rgba(217,189,132,.17),rgba(217,189,132,0) 70%),
  radial-gradient(60% 18% at 50% 77%,rgba(215,227,236,.07),rgba(215,227,236,0) 70%),
  linear-gradient(180deg,#0e2a44 0%,#0b2236 74%,#0a1d2f 75.9%,#081827 76%,#06121d 100%)}
.copo-cap{position:absolute;left:0;right:0;top:calc(76% - 700px);text-align:center;font-family:var(--display);font-weight:500;font-size:76px;letter-spacing:-.035em;z-index:3}
.copo-cap em{color:var(--gold-hi)}
.copo-stage{position:absolute;inset:0}
.slot{position:absolute;left:calc(50% - 960px);top:calc(76% - 494px);width:300px;height:512px;opacity:0;transform:translate(calc(var(--x,960) * 1px - 150px),var(--rise,90px));transition:transform 1.4s var(--ease),opacity .9s var(--ease)}
.slide.is-active .slot.show{--rise:0px;opacity:1}
.slot[data-g="1"]{transition-delay:.1s}
.slot[data-g="2"]{transition-delay:.2s}
.glass{position:absolute;inset:0;transform-origin:50% 96%;-webkit-box-reflect:below -36px linear-gradient(transparent 64%,rgba(0,0,0,.3));transition:filter 1.6s var(--ease)}
.glass svg{width:100%;height:100%;overflow:visible}
.g-shadow{position:absolute;left:24px;right:24px;bottom:2px;height:40px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));filter:blur(4px)}
.strips{position:absolute;left:-90px;right:-90px;top:252px;display:flex;flex-direction:column;align-items:center;gap:7px;z-index:2;pointer-events:none}
.strip{display:block;background:var(--white);color:var(--ink);font-family:var(--display);font-weight:400;font-size:44px;line-height:1.15;letter-spacing:-.025em;padding:4px 24px 8px;white-space:nowrap;box-shadow:0 18px 30px -14px rgba(0,0,0,.6)}
.a-slap{transform:scale(1.45) rotate(calc(var(--r,0deg) + 7deg))}
.a-slap.in{transform:rotate(var(--r,0deg));transition:opacity .25s var(--ease),transform .6s var(--back);transition-delay:var(--d,0s)}
.s-copo.at1:not(.at2) .slot.show .glass{animation:clink 1.1s var(--ease) .15s}
@keyframes clink{20%{transform:rotate(-3.2deg)}42%{transform:rotate(2.4deg)}62%{transform:rotate(-1.3deg)}82%{transform:rotate(.5deg)}}
.s-copo.at4 .slot[data-g="2"] .glass{filter:drop-shadow(0 0 46px rgba(217,189,132,.38));transition-delay:2.4s}
.water{transition:none}
.wave{animation:wave 2.6s linear infinite}
.wave.w2{animation-duration:3.8s;animation-direction:reverse}
@keyframes wave{to{transform:translateX(-300px)}}

/* ---------- 17 proposta ---------- */
.prop-head{position:absolute;left:120px;top:calc(150px + var(--oy,0px));display:flex;align-items:baseline;gap:30px}
.prop-head .spec-title{position:static;font-size:96px}
.prop-for{font-size:28px;color:var(--muted-dark)}
.prop-table{position:absolute;left:120px;top:calc(320px + var(--oy,0px));width:1060px;border-collapse:collapse}
.prop-table th{font-size:17px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark);text-align:left;padding:0 0 18px}
.prop-table th:not(:first-child),.prop-table td:not(:first-child){text-align:right}
.prop-table td{font-size:25px;padding:19px 0;border-top:1px solid rgba(11,26,40,.1)}
.prop-table td:nth-child(2){font-weight:600}
.prop-table td:last-child{width:200px}
.prop-total{position:absolute;right:120px;top:calc(320px + var(--oy,0px));width:520px;padding:50px 48px;border-radius:32px;background:var(--ocean);color:var(--sand)}
.pt-label{font-size:24px}
.pt-label small{color:var(--muted-light);font-size:20px}
.pt-value{font-family:var(--display);font-weight:600;font-size:88px;letter-spacing:-.045em;line-height:1;color:var(--gold-hi);margin:22px 0 20px;white-space:nowrap}
.pt-value small{font-size:30px;color:var(--sand);letter-spacing:-.01em;margin-left:6px}
.pt-year{font-size:21px;line-height:1.6;color:var(--muted-light)}
.pt-year b{color:var(--sand)}
.save{display:inline-block;margin-left:8px;padding:4px 14px;border-radius:100px;background:var(--gold);color:var(--ink);font-weight:600;font-size:17px}

/* ---------- 18 fechamento ---------- */
.end-photo{position:absolute;right:140px;top:120px;bottom:120px;width:560px;border-radius:32px;overflow:hidden}
.end-photo img{width:100%;height:100%;object-fit:cover}
.end-copy{position:absolute;left:160px;top:50%;transform:translateY(-50%);width:1000px}
.end-title{font-family:var(--display);font-weight:400;font-size:108px;line-height:1.06;letter-spacing:-.04em}
.end-title .ln{display:block}
.end-title em{color:var(--gold-hi);font-weight:600}
.end-contact{display:flex;align-items:center;gap:30px;margin-top:80px;font-size:26px}
.end-contact .brand{font-size:40px}
.end-contact p{color:var(--muted-light)}
.end-contact a{display:flex;align-items:center;gap:12px;color:var(--gold-hi);font-weight:500}
.end-contact a span{width:30px;height:30px}
.credit{position:absolute;left:160px;bottom:48px;font-size:18px;color:var(--muted-light)}
.credit a{color:var(--gold-hi)}

/* ---------- barra de controle ---------- */
.hud{position:fixed;inset:0;pointer-events:none;z-index:20;color:var(--sand);transition:color .6s var(--ease)}
body[data-theme="light"] .hud{color:var(--ink)}
.progress{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(127,127,127,.18)}
.progress i{display:block;height:100%;width:0;background:var(--gold);transition:width .8s var(--ease)}
.hud-brand{position:absolute;left:28px;bottom:24px;font-size:20px;opacity:.55;transition:opacity .5s}
body.hide-brand .hud-brand{opacity:0}
.hud-right{position:absolute;right:24px;bottom:20px;display:flex;align-items:center;gap:16px}
.counter{font-size:14px;font-weight:600;letter-spacing:.12em;font-variant-numeric:tabular-nums;opacity:.55}
.hud-btns{display:flex;gap:8px;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
body.show-ui .hud-btns{opacity:1;transform:none;pointer-events:auto}
.hud-btns button{width:42px;height:42px;padding:12px;border-radius:50%;background:rgba(127,127,127,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .3s}
.hud-btns button:hover{background:rgba(201,169,106,.45)}
.hud-btns span{display:block;width:100%;height:100%}

/* ---------- visão geral ---------- */
.overview{position:fixed;inset:0;z-index:30;background:rgba(7,19,31,.97);overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.overview.open{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.ov-inner{padding:0 max(16px,5vw) 48px}
.ov-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:20px;padding:26px 0;background:linear-gradient(var(--ink) 70%,rgba(7,19,31,0));font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-light)}
.ov-head .brand{font-size:24px;letter-spacing:-.05em;text-transform:none;color:var(--sand)}
.ov-head button{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand)}
.ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.ov-grid button{width:100%;aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:space-between;text-align:left;padding:18px 20px;border-radius:16px;background:var(--ocean-2);border:1.5px solid rgba(243,237,227,.08);transition:border-color .3s,transform .4s var(--ease)}
.ov-grid button.light{background:var(--sand);color:var(--ink)}
.ov-grid button:hover{transform:translateY(-4px);border-color:rgba(201,169,106,.6)}
.ov-grid button.current{border-color:var(--gold)}
.ov-grid b{font-family:var(--display);font-size:30px;font-weight:600;color:var(--gold)}
.ov-grid span{font-size:16px;line-height:1.35}
.overview .credit{position:static;margin-top:40px;font-size:14px}
kbd{display:inline-block;min-width:26px;padding:3px 8px;border-radius:6px;border:1px solid rgba(243,237,227,.25);font:600 13px var(--body);text-align:center;color:var(--sand)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- atalhos, tela preta, aviso ---------- */
.help{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(7,19,31,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.help.open{opacity:1;visibility:visible;transition:opacity .4s}
.help-box{width:min(520px,100%);padding:36px;border-radius:24px;background:var(--ocean-2);border:1px solid rgba(243,237,227,.1)}
.help-box h3{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.03em;margin-bottom:22px}
.help-box dl{display:grid;grid-template-columns:auto 1fr;gap:14px 22px;align-items:center;font-size:15px}
.help-box dd{color:var(--muted-light)}
.help-box p{margin-top:24px;font-size:14px;color:var(--muted-light)}
.blackout{position:fixed;inset:0;z-index:50;background:#000;opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.blackout.on{opacity:1;pointer-events:auto}
.toast{position:fixed;left:50%;bottom:28px;z-index:45;transform:translate(-50%,16px);padding:12px 22px;border-radius:100px;background:rgba(16,44,68,.92);color:var(--sand);font-size:14px;letter-spacing:.02em;opacity:0;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease);white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion: reduce){
  .slide,.slide.is-active,.slide.is-leaving{transform:none!important;transition:opacity .3s,visibility 0s!important}
  .a,.a.in{transition:opacity .3s!important;transition-delay:0s!important;transform:none!important;filter:none!important;clip-path:none!important}
  .a-hl{background-size:100% 86%}
  .a-draw .ic *{stroke-dashoffset:0}
  .a-seg{stroke-dasharray:var(--len) 100}
  .orb,.wave,.s-copo .glass{animation:none!important}
  .slot{transition:opacity .3s!important}
}