/* ===================================================================
   Camada de design e movimento v2 — carregada DEPOIS do CSS base,
   então estas regras vencem o que veio antes.
   Nada que cause CLS, nada que atrase o LCP, respeita prefers-reduced-motion,
   e sem JS a página aparece inteira.
   =================================================================== */

:root{
  --navy:#0A1E30; --navy2:#0C2430;
  --green:#00A335;
  --verde-texto:#63D69B;
  --teal:#2F788A; --ink:#33424D; --muted:#5A6B77;
  --r-md:13px;
  --sh-1:0 1px 2px rgba(10,30,48,.06);
  --sh-2:0 8px 26px rgba(10,30,48,.08);
  --sh-3:0 22px 55px rgba(10,30,48,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- tipografia ---------- */
.seg p,.seg li{line-height:1.68;letter-spacing:.002em}
.seg p{max-width:68ch}
.seg .lead{line-height:1.62;color:#C3D3DB}
.seg-hero h1{letter-spacing:-.024em;line-height:1.08}
.seg h2{position:relative;padding-left:17px;letter-spacing:-.021em}
.seg h2::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--green),rgba(0,163,53,.25));}
.seg .sub{max-width:70ch;color:var(--muted);font-size:15.5px}
.seg .lead b,.seg .lead strong{color:#fff}
.seg ul.lista b,.seg ol.lista b,.seg .card b,.seg .card h3{color:var(--navy)}

/* ---------- hero: profundidade ---------- */
.hero.seg-hero{position:relative;overflow:hidden;isolation:isolate}
.hero.seg-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 58% at 14% 18%,rgba(0,163,53,.17),transparent 60%),
    radial-gradient(40% 52% at 86% 6%,rgba(47,120,138,.30),transparent 62%),
    radial-gradient(60% 45% at 50% 100%,rgba(4,14,22,.55),transparent 70%);
  animation:aurora 24s ease-in-out infinite alternate;}
.hero.seg-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;z-index:0;
  pointer-events:none;background:linear-gradient(180deg,transparent,rgba(255,255,255,.06));}
.hero.seg-hero>.wrap{position:relative;z-index:1}
@keyframes aurora{0%{transform:translate3d(-1.5%,-1%,0) scale(1)}
  100%{transform:translate3d(1.5%,1.5%,0) scale(1.06)}}

/* ---------- selo ---------- */
.seg-hero .tag{display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.055);border:1px solid rgba(99,214,155,.34);
  color:var(--verde-texto);font-size:11px;font-weight:800;letter-spacing:.17em;
  padding:7px 15px 7px 13px;border-radius:999px;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.seg-hero .tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);
  flex:none;box-shadow:0 0 0 0 rgba(0,163,53,.65);animation:pulso 2.8s var(--ease) infinite;}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(0,163,53,.55)}
  70%{box-shadow:0 0 0 10px rgba(0,163,53,0)}100%{box-shadow:0 0 0 0 rgba(0,163,53,0)}}

/* ---------- frase editorial ---------- */
.seg-hero .frase{position:relative;margin:24px 0 0;padding:18px 22px 18px 52px;max-width:620px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-md);color:#DCE8EE;font-size:16.5px;line-height:1.55;font-style:italic;}
.seg-hero .frase::before{content:"\201C";position:absolute;left:16px;top:6px;
  font-family:Georgia,"Times New Roman",serif;font-size:46px;line-height:1;
  color:var(--verde-texto);opacity:.75;font-style:normal;}
.seg-hero .frase .frase-marca{display:block;font-style:normal;font-size:10px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--verde-texto);margin-bottom:7px;opacity:.9;}

/* ---------- botões ---------- */
.btn-green{position:relative;overflow:hidden;background:linear-gradient(180deg,#00BB3E,var(--green));
  box-shadow:0 10px 26px rgba(0,163,53,.30),inset 0 1px 0 rgba(255,255,255,.26);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease);}
.btn-green:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(0,163,53,.40);filter:brightness(1.05)}
.btn-green:active{transform:translateY(0) scale(.995)}
.btn-green::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.40),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease);}
.btn-green:hover::after{left:125%}
.btn-green:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{
  outline:3px solid var(--verde-texto);outline-offset:3px;border-radius:8px;}

/* ---------- números ---------- */
.seg-hero .meta b{font-variant-numeric:tabular-nums;color:var(--verde-texto);letter-spacing:-.02em}

/* ---------- card lateral do hero + print do produto ---------- */
.seg-hero .side{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(6px);}
.seg-hero .side li{color:#C6D6DE;font-size:14px;padding:10px 0 10px 24px;position:relative;
  border-bottom:1px solid rgba(255,255,255,.07);}
.seg-hero .side li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;
  border-radius:2px;background:var(--green);transform:rotate(45deg);}
.seg-hero .side-shot{margin:18px 0 0;border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);background:#08161F;box-shadow:0 12px 28px rgba(0,0,0,.35);}
.seg-hero .side-shot img{display:block;width:100%;height:132px;object-fit:cover;object-position:top center}
.seg-hero .side-shot figcaption{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:#8FA6B2;padding:7px 11px;background:rgba(0,0,0,.28);}

/* ---------- cartões ---------- */
.seg .card{position:relative;overflow:hidden;background:#fff;border:1px solid #E3EBEF;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);}
.seg .card::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--green),var(--teal));transition:width .34s var(--ease);}
.seg .card:hover{transform:translateY(-4px);border-color:#CBE2D8;box-shadow:var(--sh-2)}
.seg .card:hover::before{width:100%}

/* ---------- imagens ---------- */
.seg .shot{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.seg .shot:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.seg .shot.full img{transition:none}

/* ---------- FAQ ---------- */
.seg details{transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.seg details:hover{border-color:#CBE2D8;box-shadow:var(--sh-1)}
.seg summary{position:relative;padding-right:48px;transition:color .18s var(--ease)}
.seg summary::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:rotate(45deg);transition:transform .26s var(--ease);}
.seg details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.seg details[open] p{animation:entraFAQ .28s var(--ease)}
@keyframes entraFAQ{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- CTA final ---------- */
.seg .cta-box{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.10)}
.seg .cta-box::before{content:"";position:absolute;inset:-45% -25% auto -25%;height:85%;pointer-events:none;
  background:radial-gradient(48% 62% at 50% 0%,rgba(0,163,53,.26),transparent 70%);}
.seg .cta-box>*{position:relative;z-index:1}

/* ---------- revelação no scroll ---------- */
.js .rev{opacity:0;transform:translateY(20px);
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
.js .rev.in{opacity:1;transform:none}
.js .rev.d1{transition-delay:.07s}
.js .rev.d2{transition-delay:.14s}

/* ---------- progresso, nav e CTA fixo ---------- */
#prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:999;
  background:linear-gradient(90deg,var(--green),var(--verde-texto));transition:width .1s linear}
.nav.rolou{box-shadow:0 10px 30px rgba(4,14,22,.35)}
.cta-fixo{display:none}
@media(max-width:560px){
  .cta-fixo{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:900;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(8,24,38,.93);backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.10);
    transform:translateY(110%);transition:transform .3s var(--ease);}
  .cta-fixo.visivel{transform:none}
  .cta-fixo a{flex:1;text-align:center;background:var(--green);color:#fff;font-weight:800;
    padding:13px;border-radius:10px;font-size:14.5px;text-decoration:none}
  body{padding-bottom:74px}
  .seg-hero .frase{padding:16px 18px 16px 46px;font-size:15.5px}
  .seg-hero .side-shot img{height:104px}
}

/* ---------- acessibilidade ---------- */
.pular{position:absolute;left:-9999px;top:0;background:#fff;color:var(--navy);padding:12px 18px;
  z-index:1000;border-radius:0 0 10px 0;font-weight:700}
.pular:focus{left:0}
::selection{background:rgba(0,163,53,.28)}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .js .rev{opacity:1!important;transform:none!important}
  .cta-fixo{transform:none!important}
  .hero.seg-hero::before{animation:none}
}

/* ---------- banner de teste: curto no celular ---------- */
@media(max-width:560px){
  .banner-teste{font-size:11.5px;padding:7px 10px;letter-spacing:.02em}
  .banner-longo{display:none}
}

/* ---------- bloco de vocabulário do segmento ---------- */
.vocab-sec{padding:46px 0;background:#fff}
.vocab{background:#F4F7F8;border:1px solid #E3EBEF;border-radius:16px;padding:30px 32px}
.vocab h2{font-size:clamp(20px,2.3vw,26px);letter-spacing:-.02em;margin:0 0 8px;padding-left:0}
.vocab h2::before{display:none}
.vocab > p{color:#4A5A66;font-size:15.5px;margin:0 0 20px;max-width:70ch}
.vocab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:20px}
.vocab-grid > div{background:#fff;border:1px solid #E3EBEF;border-radius:12px;padding:16px 18px}
.vocab-grid b{display:block;font-size:15px;color:#0A1E30;margin-bottom:5px}
.vocab-grid span{font-size:13.5px;color:#5A6B77;line-height:1.5}
.vocab-fim{margin:0;font-size:15px;color:#33424D}
@media(max-width:560px){.vocab{padding:22px 18px}}

/* ---------- 5 cards: 3 colunas (3+2) para não deixar cartão órfão ---------- */
.seg .cards-quem{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
@media(max-width:1100px){.seg .cards-quem{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.seg .cards-quem{grid-template-columns:1fr}}

/* 5 cards: primeira linha 3, segunda linha 2 preenchendo a largura toda */
.seg .cards-quem:has(.card:nth-child(5)){grid-template-columns:repeat(6,1fr)}
.seg .cards-quem:has(.card:nth-child(5)) .card{grid-column:span 2}
.seg .cards-quem:has(.card:nth-child(5)) .card:nth-child(4),
.seg .cards-quem:has(.card:nth-child(5)) .card:nth-child(5){grid-column:span 3}
@media(max-width:1100px){
  .seg .cards-quem:has(.card:nth-child(5)){grid-template-columns:repeat(2,1fr)}
  .seg .cards-quem:has(.card:nth-child(5)) .card,
  .seg .cards-quem:has(.card:nth-child(5)) .card:nth-child(4),
  .seg .cards-quem:has(.card:nth-child(5)) .card:nth-child(5){grid-column:auto}
}
@media(max-width:660px){
  .seg .cards-quem:has(.card:nth-child(5)){grid-template-columns:1fr}
}