/* =========================================================
   Corrida Zilumina — 3ª edição
   Tema claro fixo (não segue o modo escuro do aparelho).
   ========================================================= */

:root{
  color-scheme: only light;

  --navy:#062a5e;
  --navy-2:#0a3f86;
  --blue:#0b5fbf;
  --blue-2:#1c7fd6;
  --cyan:#35bfe4;
  --mint:#4fe3c9;
  --mint-soft:#e6faf6;
  --lime:#a9d820;

  --ink:#08213f;
  --dim:#5a7086;
  --line:rgba(8,33,63,.10);
  --line-2:rgba(8,33,63,.06);
  --bg:#ffffff;
  --bg-soft:#f5faf9;

  --shadow-s:0 2px 8px rgba(8,33,63,.05), 0 8px 24px rgba(8,33,63,.05);
  --shadow-m:0 4px 14px rgba(8,33,63,.06), 0 18px 48px rgba(8,33,63,.09);
  --shadow-l:0 10px 30px rgba(8,33,63,.10), 0 34px 80px rgba(8,33,63,.14);

  --font-display:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --wrap:1180px;
  --pad:clamp(20px,5.5vw,64px);
}

/* Trava o tema claro com o aparelho em modo escuro.
   O Samsung Internet e o Auto Dark Theme do Chrome desistem de inverter
   quando a página demonstra que trata o modo escuro por conta própria.
   Só declarar `color-scheme` não basta nas versões mais antigas do
   Samsung Internet: é preciso existir um bloco `prefers-color-scheme: dark`
   de verdade. Então aqui repetimos as cores claras de propósito — o bloco
   parece redundante, mas é justamente ele que segura a inversão. */
@media (prefers-color-scheme:dark){
  :root{
    color-scheme: only light;
    --ink:#08213f;
    --dim:#5a7086;
    --bg:#ffffff;
    --bg-soft:#f5faf9;
    --card:#ffffff;
    --line:rgba(8,33,63,.10);
    --line-2:rgba(8,33,63,.06);
  }
  html{ background-color:#ffffff; }
  body{ background:#ffffff; color:#08213f; }
  #causa,#camisa{ background:#ffffff; }
  #impacto,#info{ background:#f5faf9; }
  .opt,.info-card,.pillar{ background:#ffffff; }
  .pillar{ background:#f5faf9; }
  .tee-specs li,.tee-controls .tee-btn.is-on{ background:#ffffff; }
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  color-scheme:only light;
  background-color:#ffffff;   /* explícito: sem isso o fundo herda o do navegador */
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
::selection{background:var(--mint);color:var(--navy);}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad);}

/* ---------- tipografia compartilhada ---------- */
.eyebrow{
  font-family:var(--font-display);
  font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--blue);display:inline-flex;align-items:center;gap:9px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 4px rgba(79,227,201,.22);flex:none;}
.eyebrow.light{color:var(--mint);}
.eyebrow.light .dot{background:var(--lime);box-shadow:0 0 0 4px rgba(169,216,32,.2);}
.eyebrow.center{display:flex;justify-content:center;}

.sec-head{text-align:center;max-width:760px;margin:0 auto clamp(44px,6vw,72px);}
.sec-title{
  font-family:var(--font-display);
  font-size:clamp(28px,4.6vw,52px);font-weight:800;line-height:1.1;letter-spacing:-.02em;
  color:var(--navy);margin-top:18px;text-wrap:balance;
}
.sec-title.left{text-align:left;}
.sec-lead{margin-top:20px;color:var(--dim);font-size:clamp(15px,1.6vw,17px);line-height:1.7;text-wrap:pretty;}
.sec-lead.left{text-align:left;max-width:46ch;}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.01em;
  padding:16px 30px;border-radius:100px;text-decoration:none;border:1.5px solid transparent;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,background .25s,color .25s;
  will-change:transform;
}
.btn-primary{
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-2) 55%,var(--cyan) 100%);
  color:#fff;box-shadow:0 10px 26px rgba(11,95,191,.30);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(11,95,191,.40);}
.btn-ghost{border-color:var(--line);color:var(--navy);background:rgba(255,255,255,.7);}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);}
.btn-light{background:#fff;color:var(--navy);box-shadow:0 10px 30px rgba(0,0,0,.20);}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.28);}
.btn-block{width:100%;}
.btn:active{transform:translateY(0) scale(.985);}

/* =========================================================
   NAV
   ========================================================= */
#nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--pad);
  transition:background .35s,box-shadow .35s,padding .35s,backdrop-filter .35s;
}
#nav.stuck{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line),0 8px 30px rgba(8,33,63,.06);
  padding-block:10px;
}
#nav .brand{display:block;flex:none;}
#nav .brand img{height:clamp(30px,5.4vw,42px);width:auto;transition:height .35s;}
#nav.stuck .brand img{height:clamp(26px,4.6vw,34px);}

.nav-right{display:flex;align-items:center;gap:clamp(10px,2vw,26px);}
.nav-link{
  font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--navy);
  text-decoration:none;opacity:.82;transition:opacity .2s,color .2s;
}
.nav-link:hover{opacity:1;color:var(--blue);}
.nav-btn{
  font-family:var(--font-display);font-weight:700;font-size:13.5px;
  padding:11px 22px;border-radius:100px;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  box-shadow:0 6px 18px rgba(11,95,191,.28);
  transition:transform .25s,box-shadow .25s;white-space:nowrap;
}
.nav-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,95,191,.38);}
@media (max-width:720px){ .nav-link{display:none;} }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:clamp(110px,16vh,160px) var(--pad) clamp(70px,10vh,110px);
  overflow:hidden;background:linear-gradient(180deg,#fbfeff 0%,#eef9f7 45%,#ffffff 100%);
}
.hero-bg{position:absolute;inset:0;pointer-events:none;}
.hero-bg .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;}
.hero-bg .b1{width:46vw;height:46vw;min-width:320px;min-height:320px;top:-12%;right:-8%;
  background:radial-gradient(circle,rgba(79,227,201,.55),transparent 68%);animation:drift 20s ease-in-out infinite;}
.hero-bg .b2{width:38vw;height:38vw;min-width:260px;min-height:260px;bottom:2%;left:-10%;
  background:radial-gradient(circle,rgba(53,191,228,.42),transparent 68%);animation:drift 26s ease-in-out infinite reverse;}
.hero-bg .b3{width:26vw;height:26vw;min-width:200px;min-height:200px;top:34%;left:46%;
  background:radial-gradient(circle,rgba(169,216,32,.24),transparent 66%);animation:drift 32s ease-in-out infinite;}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(3%,-4%) scale(1.07);}
  66%{transform:translate(-3%,3%) scale(.95);}
}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(90px,14vw,190px);}

.hero-inner{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;}
.hero-title{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(52px,12.5vw,146px);line-height:.92;letter-spacing:-.035em;
  margin:22px 0 0;color:var(--navy);
}
.hero-title .line{display:block;}
.hero-title .l2{
  background:linear-gradient(100deg,var(--blue) 0%,var(--blue-2) 42%,var(--cyan) 78%,var(--mint) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-tag{
  font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:clamp(19px,3vw,30px);color:var(--blue);margin-top:6px;letter-spacing:-.01em;
}
.hero-sub{margin-top:22px;max-width:52ch;color:var(--dim);font-size:clamp(15px,1.7vw,17.5px);line-height:1.72;text-wrap:pretty;}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}

.hero-facts{
  list-style:none;display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,46px);
  margin-top:clamp(38px,6vw,58px);padding-top:26px;border-top:1px solid var(--line);
  max-width:640px;
}
.hero-facts li{display:flex;flex-direction:column;gap:2px;}
.hero-facts b{font-family:var(--font-display);font-size:clamp(19px,2.6vw,26px);font-weight:800;color:var(--navy);letter-spacing:-.01em;}
.hero-facts span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:500;}

/* entrada do hero */
.hero .eyebrow,.hero-title .line,.hero-tag,.hero-sub,.hero-actions,.hero-facts{
  opacity:0;transform:translateY(26px);
  animation:heroIn .95s cubic-bezier(.2,.8,.25,1) forwards;
}
.hero .eyebrow{animation-delay:.06s;}
.hero-title .l1{animation-delay:.16s;}
.hero-title .l2{animation-delay:.26s;}
.hero-tag{animation-delay:.38s;}
.hero-sub{animation-delay:.48s;}
.hero-actions{animation-delay:.58s;}
.hero-facts{animation-delay:.68s;}
@keyframes heroIn{to{opacity:1;transform:translateY(0);}}

/* =========================================================
   CENA DO CAMINHÃO
   ========================================================= */
#truckwrap{height:320vh;}
#truckstage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#ffffff 0%,#eaf7f5 58%,#dff2ef 100%);
}
#truckstage .sky{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 46% at 50% 32%,rgba(79,227,201,.20),transparent 70%);
}
#truckstage .road{
  position:absolute;left:0;right:0;bottom:19%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(8,33,63,.14) 15%,rgba(8,33,63,.14) 85%,transparent);
}
#truckstage .dashes{
  position:absolute;left:0;right:0;top:12px;height:2px;
  background:repeating-linear-gradient(90deg,rgba(8,33,63,.14) 0 26px,transparent 26px 56px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
}
.truck{
  position:absolute;top:50%;left:0;width:min(430px,56vw);
  will-change:transform;filter:drop-shadow(0 22px 30px rgba(6,42,94,.22));
}
@media (max-width:620px){ .truck{width:min(330px,72vw);} }

.reveal{
  position:absolute;top:50%;left:50%;width:min(560px,74vw);
  opacity:0;will-change:transform,opacity;
}
.reveal img{width:100%;filter:drop-shadow(0 26px 44px rgba(6,42,94,.24));}

/* =========================================================
   DESTAQUE — CRONÔMETRO + MEDALHA
   ========================================================= */
.highlight{
  position:relative;overflow:hidden;color:#fff;
  padding:clamp(76px,12vw,130px) 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%,rgba(53,191,228,.30),transparent 60%),
    radial-gradient(ellipse 70% 70% at 92% 88%,rgba(79,227,201,.24),transparent 62%),
    linear-gradient(155deg,#062a5e 0%,#083a7c 45%,#0a4f9e 100%);
}
.hl-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.hl-bg .ring{
  position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.09);
}
.hl-bg .r1{width:52vw;height:52vw;top:-18%;left:-10%;animation:spin 60s linear infinite;}
.hl-bg .r2{width:36vw;height:36vw;bottom:-14%;right:-6%;border-color:rgba(79,227,201,.16);animation:spin 44s linear infinite reverse;}
.hl-bg .r3{width:22vw;height:22vw;top:22%;right:16%;border-style:dashed;border-color:rgba(255,255,255,.07);animation:spin 80s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.hl-grid{
  position:relative;width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,64px);align-items:center;
}
.hl-title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(28px,4.4vw,50px);line-height:1.08;letter-spacing:-.02em;
  margin-top:18px;color:#fff;text-wrap:balance;
}

/* --- relógio --- */
.clock{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,1.6vw,16px);margin-top:clamp(28px,4vw,40px);max-width:520px;
}
.clock .unit{display:flex;flex-direction:column;align-items:center;gap:11px;}
.clock .dial{
  position:relative;width:100%;aspect-ratio:1/1.06;
  display:flex;align-items:center;justify-content:center;
  border-radius:clamp(14px,2.4vw,20px);
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 34px rgba(0,0,0,.22);
  overflow:hidden;
}
.clock .dial::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 46%);
  pointer-events:none;
}
.clock .digits{
  position:relative;font-family:var(--font-display);font-weight:800;
  font-size:clamp(26px,6.4vw,46px);line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  text-shadow:0 2px 12px rgba(0,0,0,.28);
}
.clock .unit.tick .digits{animation:tickIn .5s cubic-bezier(.2,.9,.25,1);}
@keyframes tickIn{
  0%{opacity:0;transform:translateY(-52%) scale(.9);filter:blur(3px);}
  55%{opacity:1;transform:translateY(4%) scale(1.02);filter:blur(0);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
/* barra de progresso da unidade */
.clock .ring-progress{
  position:absolute;left:0;right:0;bottom:0;height:3px;pointer-events:none;
  background:rgba(255,255,255,.12);
}
.clock .ring-progress::after{
  content:"";position:absolute;left:0;bottom:0;height:100%;
  width:calc(var(--p,0) * 100%);
  background:linear-gradient(90deg,var(--mint),var(--lime));
  box-shadow:0 0 10px rgba(79,227,201,.7);
  transition:width .45s linear;
}
.clock .cap{
  font-family:var(--font-display);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.clock-note{
  margin-top:26px;font-size:13.5px;letter-spacing:.06em;color:rgba(255,255,255,.74);
  font-weight:500;
}
.highlight .btn-light{margin-top:26px;}

/* --- medalha --- */
.medal{position:relative;display:flex;flex-direction:column;align-items:center;}
.medal-glow{
  position:absolute;inset:-14% -8% 4%;border-radius:50%;
  background:radial-gradient(circle,rgba(79,227,201,.42),rgba(53,191,228,.18) 45%,transparent 70%);
  filter:blur(28px);
}
.medal img{
  position:relative;width:min(400px,80%);
  filter:drop-shadow(0 30px 46px rgba(0,0,0,.44));
  animation:medalFloat 6.5s ease-in-out infinite;
  transform-origin:50% 8%;
}
@keyframes medalFloat{
  0%,100%{transform:translateY(0) rotate(-2.2deg);}
  50%{transform:translateY(-16px) rotate(2.2deg);}
}
.medal figcaption{
  position:relative;margin-top:20px;text-align:center;
  font-family:var(--font-display);font-size:12.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);line-height:1.9;
}
.medal figcaption b{color:var(--mint);font-weight:800;}

@media (max-width:880px){
  .hl-grid{grid-template-columns:1fr;text-align:center;}
  .hl-copy .eyebrow{justify-content:center;display:flex;}
  .clock{margin-inline:auto;}
  .medal{order:-1;margin-bottom:14px;}
  .medal img{width:min(280px,64vw);}
}

/* =========================================================
   A CAUSA
   ========================================================= */
#causa{padding:clamp(84px,13vw,150px) 0;background:#fff;text-align:center;}
.statement{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(29px,5.4vw,64px);line-height:1.08;letter-spacing:-.028em;
  color:var(--navy);max-width:16ch;margin:22px auto 0;text-wrap:balance;
}
/* animação letra a letra */
.statement .w{display:inline-block;white-space:nowrap;}
.statement .c{
  display:inline-block;
  transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .6s cubic-bezier(.2,.8,.3,1);
  transition-delay:var(--d,0s);
}
.js .statement .c{opacity:0;transform:translateY(.55em) rotate(6deg);}
.js .statement.in .c{opacity:1;transform:translateY(0) rotate(0);}
.statement .c.hi{
  background:linear-gradient(100deg,var(--blue),var(--cyan) 60%,var(--mint));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.statement-sub{
  margin:30px auto 0;max-width:62ch;color:var(--dim);
  font-size:clamp(15px,1.7vw,17.5px);line-height:1.78;text-wrap:pretty;
}

.pillars{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(16px,2.4vw,26px);margin-top:clamp(50px,7vw,84px);text-align:left;
}
.pillar{
  position:relative;padding:clamp(26px,3vw,34px);border-radius:20px;
  background:var(--bg-soft);border:1px solid var(--line-2);overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.3,1),box-shadow .4s,border-color .4s;
}
.pillar::before{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--mint));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.pillar:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:transparent;}
.pillar:hover::before{transform:scaleX(1);}
.pillar-n{
  font-family:var(--font-display);font-size:13px;font-weight:800;letter-spacing:.16em;
  color:var(--cyan);display:block;margin-bottom:14px;
}
.pillar h3{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--navy);margin-bottom:9px;letter-spacing:-.01em;}
.pillar p{color:var(--dim);font-size:14.8px;line-height:1.68;}

/* =========================================================
   IMPACTO
   ========================================================= */
#impacto{padding:clamp(84px,13vw,150px) 0;background:var(--bg-soft);}
/* --- escolha: 2 kg de alimento OU 2 kg de ração --- */
.choice{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;
  gap:clamp(14px,2vw,26px);
}
.opt{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(28px,3.4vw,42px);border-radius:26px;
  background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow-s);overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.3,1),box-shadow .45s;
}
.opt::after{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--tone-a),var(--tone-b));
}
.opt[data-tone="food"]{--tone-a:#0b5fbf;--tone-b:#35bfe4;--tone:#0b5fbf;}
.opt[data-tone="pet"]{--tone-a:#12a58b;--tone-b:#a9d820;--tone:#12a58b;}
.opt:hover{transform:translateY(-6px);box-shadow:var(--shadow-m);}

.opt-tag{
  font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--tone);
}
/* o número é o elemento gráfico — sem ícone */
.opt-amount{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(76px,11vw,124px);line-height:.82;letter-spacing:-.06em;
  margin:18px 0 0;
  background:linear-gradient(135deg,var(--tone-a),var(--tone-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.opt-amount span{
  font-size:.28em;font-weight:800;letter-spacing:-.01em;margin-left:.1em;
  vertical-align:.42em;
}
.opt h3{
  font-family:var(--font-display);font-size:clamp(22px,2.6vw,30px);font-weight:800;
  color:var(--navy);letter-spacing:-.02em;margin-top:4px;
}
.opt-desc{color:var(--dim);font-size:15px;line-height:1.7;margin-top:14px;}

.opt-note{
  margin-top:auto;padding-top:24px;font-size:13px;color:var(--dim);
}

/* separador "ou" */
.opt-or{
  position:relative;display:grid;place-items:center;width:56px;
}
.opt-or::before{
  content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line);
}
.opt-or span{
  position:relative;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;background:var(--bg-soft);
  border:1px solid var(--line);
  font-family:var(--font-display);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}
@media (max-width:820px){
  .choice{grid-template-columns:1fr;}
  .opt-or{width:auto;height:56px;}
  .opt-or::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:1px;}
}

/* =========================================================
   CAMISA
   ========================================================= */
#camisa{padding:clamp(84px,13vw,150px) 0;background:#fff;overflow:hidden;}
.tee-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,80px);align-items:center;
}
.tee-specs{list-style:none;margin-top:34px;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.tee-specs li{background:#fff;padding:16px 20px;display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap;}
.tee-specs b{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);}
.tee-specs span{font-size:14.5px;color:var(--dim);text-align:right;}

.tee-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;perspective:1400px;}
.tee-halo{
  position:absolute;top:2%;left:50%;transform:translateX(-50%);
  width:min(440px,88%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(79,227,201,.30),rgba(53,191,228,.10) 46%,transparent 68%);
  filter:blur(24px);pointer-events:none;
}
/* visualizador 360: sequência de frames renderizados */
.tee360{
  position:relative;width:min(370px,82vw);aspect-ratio:460/603;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.tee360:active{cursor:grabbing;}
.tee360 img{
  width:100%;height:100%;display:block;object-fit:contain;
  pointer-events:none;-webkit-user-drag:none;
  filter:drop-shadow(0 24px 28px rgba(6,42,94,.18));
}
/* enquanto os frames carregam */
.tee-loader{
  position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  width:104px;height:3px;border-radius:100px;background:rgba(8,33,63,.10);
  overflow:hidden;transition:opacity .4s;
}
.tee-loader span{
  display:block;height:100%;width:var(--p,0%);border-radius:100px;
  background:linear-gradient(90deg,var(--blue),var(--mint));
  transition:width .3s ease;
}
.tee-loader.done{opacity:0;}

.tee-controls{display:inline-flex;padding:5px;border-radius:100px;background:var(--bg-soft);border:1px solid var(--line);gap:4px;}
.tee-btn{
  font-family:var(--font-display);font-size:13.5px;font-weight:700;
  padding:10px 24px;border-radius:100px;border:0;background:transparent;color:var(--dim);
  cursor:pointer;transition:background .3s,color .3s,box-shadow .3s;
}
.tee-btn.is-on{background:#fff;color:var(--navy);box-shadow:0 2px 8px rgba(8,33,63,.10);}
.tee-hint{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);opacity:.7;transition:opacity .5s;}
.tee-hint.gone{opacity:0;}
/* o aviso fica, ao contrário da dica de arrastar, que some ao interagir */
.tee-note{
  margin-top:-8px;font-size:11.5px;letter-spacing:.06em;
  color:var(--dim);opacity:.62;font-style:italic;
}

@media (max-width:900px){
  .tee-wrap{grid-template-columns:1fr;}
  .tee-copy{text-align:center;}
  .tee-copy .eyebrow{display:flex;justify-content:center;}
  .sec-title.left,.sec-lead.left{text-align:center;}
  .sec-lead.left{margin-inline:auto;}
  .tee-specs li{justify-content:center;flex-direction:column;gap:4px;text-align:center;align-items:center;}
  .tee-specs span{text-align:center;}
  .tee-stage{order:-1;margin-bottom:12px;}
  .tee360{width:min(330px,78vw);}
}

/* =========================================================
   INFORMAÇÕES
   ========================================================= */
#info{padding:clamp(84px,13vw,150px) 0;background:var(--bg-soft);}
.info-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(14px,2vw,20px);
}
.info-card{
  position:relative;padding:clamp(26px,3vw,34px);border-radius:22px;background:#fff;
  border:1px solid var(--line-2);box-shadow:var(--shadow-s);overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.3,1),box-shadow .4s;
}
.info-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);}
.info-card.wide{grid-column:span 2;
  background:linear-gradient(135deg,#fff 0%,#eef8ff 100%);}
@media (max-width:620px){ .info-card.wide{grid-column:span 1;} }
.info-card.accent{
  background:linear-gradient(140deg,var(--navy) 0%,var(--blue) 100%);
  border-color:transparent;
}
.info-card.accent .ic-label{color:var(--mint);}
.info-card.accent .ic-value{color:#fff;}
.info-card.accent .ic-value em{color:var(--lime);}
.info-card.accent .ic-sub{color:rgba(255,255,255,.72);}

.ic-label{
  font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;
}
.ic-big{
  font-family:var(--font-display);font-size:clamp(46px,7vw,74px);font-weight:900;
  line-height:.9;letter-spacing:-.045em;color:var(--navy);
}
.ic-big em{font-style:normal;font-size:.36em;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);margin-left:.16em;vertical-align:.5em;}
.ic-value{
  font-family:var(--font-display);font-size:clamp(21px,2.6vw,27px);font-weight:800;
  line-height:1.15;letter-spacing:-.02em;color:var(--navy);
}
.ic-value em{font-style:normal;font-weight:600;color:var(--cyan);}
.ic-sub{margin-top:11px;font-size:14.2px;line-height:1.6;color:var(--dim);}

/* kit */
.kit{
  margin-top:clamp(24px,3vw,34px);padding:clamp(28px,3.6vw,44px);border-radius:24px;
  background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow-s);
}
.kit h3{
  font-family:var(--font-display);font-size:clamp(19px,2.2vw,24px);font-weight:800;
  color:var(--navy);margin-bottom:26px;letter-spacing:-.015em;
}
.kit-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(18px,2.4vw,28px);}
.kit-list li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 14px;align-items:center;}
.kit-ic{
  grid-row:span 2;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(140deg,#e9f6ff,#e3fbf5);color:var(--blue);
}
.kit-ic svg{width:24px;height:24px;}
.kit-list b{font-family:var(--font-display);font-size:15.5px;font-weight:700;color:var(--navy);align-self:end;}
.kit-list i{font-style:normal;font-size:13.2px;color:var(--dim);align-self:start;}

/* o item surpresa se destaca dos demais */
.kit-list .is-surprise .kit-ic{
  background:linear-gradient(140deg,#0b5fbf,#35bfe4);color:#fff;
  box-shadow:0 6px 16px rgba(11,95,191,.28);
}
.kit-list .is-surprise b{color:var(--blue);}

/* =========================================================
   INSCRIÇÃO
   ========================================================= */
#inscricao{
  position:relative;overflow:hidden;padding:clamp(84px,13vw,150px) 0;color:#fff;
  background:
    radial-gradient(ellipse 70% 60% at 80% 10%,rgba(79,227,201,.26),transparent 62%),
    radial-gradient(ellipse 60% 60% at 10% 90%,rgba(53,191,228,.24),transparent 62%),
    linear-gradient(160deg,#062a5e 0%,#0a3f86 55%,#0b5fbf 100%);
}
.cta-wrap{text-align:center;display:flex;flex-direction:column;align-items:center;}
.cta-title{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(32px,6vw,66px);line-height:1.04;letter-spacing:-.03em;
  margin-top:20px;color:#fff;text-wrap:balance;
}

.price-card{
  width:100%;max-width:460px;margin-top:clamp(36px,5vw,52px);
  padding:clamp(30px,4vw,44px);border-radius:28px;text-align:left;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 30px 70px rgba(0,0,0,.30);
}
.pc-top{
  font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mint);
}
.pc-price{
  font-family:var(--font-display);font-weight:900;font-size:clamp(58px,11vw,86px);
  line-height:1;letter-spacing:-.045em;color:#fff;margin-top:12px;
}
.pc-price em{font-style:normal;font-size:.34em;font-weight:700;vertical-align:.72em;margin-right:.22em;color:rgba(255,255,255,.72);}
.pc-price span{font-size:.34em;font-weight:700;color:rgba(255,255,255,.72);}
.pc-plus{margin-top:8px;font-size:14.5px;color:var(--lime);font-weight:600;}
.pc-list{list-style:none;margin:26px 0;display:grid;gap:12px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);}
.pc-list li{position:relative;padding-left:28px;font-size:14.6px;color:rgba(255,255,255,.88);line-height:1.5;}
.pc-list li::before{
  content:"";position:absolute;left:0;top:.34em;width:15px;height:8px;
  border-left:2.2px solid var(--mint);border-bottom:2.2px solid var(--mint);
  transform:rotate(-45deg);border-radius:1px;
}
.pc-note{margin-top:16px;text-align:center;font-size:12.5px;letter-spacing:.06em;color:rgba(255,255,255,.6);}
.cta-foot{
  margin-top:clamp(34px,5vw,48px);font-family:var(--font-display);font-style:italic;
  font-weight:600;font-size:clamp(17px,2.4vw,24px);color:var(--mint);
}

/* =========================================================
   FOOTER
   ========================================================= */
footer{background:#041c40;color:rgba(255,255,255,.7);padding-top:clamp(56px,8vw,84px);}
.foot-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(28px,4vw,48px);padding-bottom:clamp(40px,6vw,64px);
}
.foot-brand img{height:46px;width:auto;margin-bottom:22px;}
.foot-brand p{font-size:14px;line-height:1.72;max-width:38ch;color:rgba(255,255,255,.6);}
.foot-tag{
  margin-top:16px;font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:17px;color:var(--mint) !important;
}
.foot-col h4{
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;margin-bottom:18px;
}
.foot-col a,.foot-col p{
  display:block;font-size:14px;line-height:1.5;color:rgba(255,255,255,.6);
  text-decoration:none;margin-bottom:11px;transition:color .25s;
}
.foot-col a:hover{color:var(--mint);}
.foot-col p b{color:rgba(255,255,255,.9);font-weight:600;}
.foot-social{display:flex;gap:10px;margin-top:18px;}
.foot-social a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin:0;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.8);transition:background .3s,color .3s,transform .3s,border-color .3s;
}
.foot-social a:hover{background:var(--mint);color:#041c40;transform:translateY(-3px);border-color:transparent;}
.foot-social svg{width:19px;height:19px;}

.foot-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-top:24px;padding-bottom:clamp(78px,10vw,96px);
  border-top:1px solid rgba(255,255,255,.10);
  font-size:12.5px;color:rgba(255,255,255,.42);
}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr;} .foot-brand{grid-column:span 2;} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr;} .foot-brand{grid-column:span 1;} .foot-bottom{flex-direction:column;} }

/* =========================================================
   INDICADOR DE ROLAGEM (global, some ao rolar)
   ========================================================= */
.scroll-cue{
  position:fixed;left:50%;bottom:22px;z-index:55;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:11px 20px 13px;border-radius:100px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(8,33,63,.07);
  backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);
  box-shadow:0 6px 24px rgba(8,33,63,.08);
  color:var(--navy);
  font-family:var(--font-display);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  pointer-events:none;
  opacity:0;transform:translate(-50%,14px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1);
}
.scroll-cue.show{opacity:1;transform:translate(-50%,0);}
.scroll-cue svg{width:15px;height:19px;animation:cueBob 1.9s ease-in-out infinite;}
@keyframes cueBob{
  0%,100%{transform:translateY(-2px);opacity:.45;}
  50%{transform:translateY(3px);opacity:1;}
}
/* sobre as faixas escuras, o indicador inverte */
.scroll-cue.on-dark{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.20);color:#fff;
  box-shadow:0 6px 24px rgba(0,0,0,.20);
}

/* =========================================================
   REVELAÇÃO AO ROLAR
   ========================================================= */
/* o estado escondido só existe com JS ativo — sem JS tudo aparece normalmente */
.js .reveal-up{
  opacity:0;transform:translateY(30px);
  transition:opacity .8s cubic-bezier(.2,.8,.3,1),transform .8s cubic-bezier(.2,.8,.3,1);
  transition-delay:var(--d,0s);
}
.js .reveal-up.show{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal-up,.statement .c{opacity:1 !important;transform:none !important;}
}