/* =========================================================
   ZENMIMO — design system
   Tokens medidos no DOM real da referência (alevia.com):
   títulos Jost 700 · títulos comerciais Readex Pro 500/700 · corpo Poppins 400
   ========================================================= */

@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:600 700;font-style:normal;font-display:swap;src:url("../fonts/poppins-700.woff2") format("woff2")}
@font-face{font-family:"Jost";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/jost-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/jost-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-weight:600 700;font-style:normal;font-display:swap;src:url("../fonts/jost-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Readex Pro";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/readex-pro-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Readex Pro";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/readex-pro-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Readex Pro";font-weight:600 700;font-style:normal;font-display:swap;src:url("../fonts/readex-pro-latin-700-normal.woff2") format("woff2")}

:root{
  --jost:"Jost",-apple-system,BlinkMacSystemFont,sans-serif;
  --readex:"Readex Pro",-apple-system,BlinkMacSystemFont,sans-serif;
  --poppins:"Poppins",-apple-system,BlinkMacSystemFont,sans-serif;

  --tinta:rgba(18,18,18,.75);
  --tinta-forte:#121212;
  --verde-titulo:#0C482B;
  --verde-cta:#32C230;
  --verde-cta-esc:#26A426;
  --escuro:#081C08;
  --timeline:#03311B;
  --mint:#C2FFC6;
  --cinza:#F9F9F9;
  --borda:#E3F3EC;
  --borda-neutra:#E5E7EB;
  --preto:#000;

  --r-btn:2px;
  --r-card:4px;
  --r-pill:12px;
  --wrap:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--tinta);font-family:var(--poppins);
  font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--jost);font-weight:700;line-height:1.2;color:var(--tinta-forte)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
sup{font-size:.6em;position:relative;top:-.5em;line-height:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sec{padding:60px 0}
.sec--cinza{background:var(--cinza)}
.sec--escuro{background:var(--escuro);color:#fff}
.sec--timeline{background:var(--timeline);color:#fff}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid #EFEFEF}
.hdr__in{display:flex;align-items:center;justify-content:space-between;height:59px;
  max-width:var(--wrap);margin:0 auto;padding:0 20px}
.hdr__logo{display:flex;align-items:center;line-height:0}
.hdr__logo img{height:20px;width:auto}
.burger,.cartbtn{width:40px;height:40px;display:grid;place-items:center;color:#121212}
.nav{position:fixed;inset:0 auto 0 0;width:min(320px,86vw);background:#fff;
  transform:translateX(-102%);transition:transform .3s ease;z-index:80;padding:22px;
  box-shadow:0 0 40px rgba(0,0,0,.2)}
.nav.open{transform:none}
.nav a{display:block;padding:14px 4px;border-bottom:1px solid #EFEFEF;font-weight:500;font-size:16px}
.nav .hdr__logo{margin-bottom:18px}
.nav .hdr__logo img{height:22px}
.nav__close{position:absolute;right:14px;top:12px;font-size:26px;line-height:1}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;
  transition:opacity .3s;z-index:70}
.scrim.on{opacity:1;pointer-events:auto}

/* ---------- Botões ---------- */
.btn-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--verde-cta);color:#fff;font-size:clamp(19px,2.2vw,25px);font-weight:600;
  padding:26px 20px;border-radius:var(--r-btn);transition:background .15s}
.btn-cta:hover{background:var(--verde-cta-esc)}
.btn-cta del{opacity:.7;font-weight:500}
.btn-preto{display:inline-flex;align-items:center;gap:10px;background:var(--preto);color:#fff;
  border-radius:var(--r-pill);padding:14px 24px;font-size:17px;font-weight:500}
.btn-preto:hover{background:#222}
.btn-branco{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#000;
  border-radius:3px;padding:15px 34px;font-size:17px;font-weight:500}
.btn-branco:hover{background:#F1F1F1}

/* ---------- Hero ---------- */
.hero{position:relative;background:#081C08 center/cover no-repeat;
  min-height:483px;display:flex;align-items:center;color:#fff}
.hero__in{max-width:var(--wrap);margin:0 auto;padding:48px 20px;width:100%}
.hero h1{font-family:var(--jost);font-size:clamp(30px,4vw,44px);font-weight:700;
  line-height:1.2;color:#fff;max-width:16ch;margin-bottom:24px}
.hero p{color:rgba(255,255,255,.86);max-width:42ch;margin-bottom:24px;font-size:17px}

/* ---------- Marquee ---------- */
.mq{background:var(--preto);overflow:hidden;height:63px;display:flex;align-items:center}
.mq__track{display:flex;width:max-content;animation:mq 26s linear infinite}
.mq:hover .mq__track{animation-play-state:paused}
.mq__item{display:flex;align-items:center;gap:12px;padding:0 30px;color:#fff;
  font-family:var(--poppins);font-size:18px;font-weight:400;white-space:nowrap}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@media(prefers-reduced-motion:reduce){.mq__track{animation:none}}

/* ticker fino da pagina de produto: 8 itens unicos repetidos 2x, loop em -50% */
.mq--fina{height:56px}
.mq--fina .mq__track{animation:mq50 38s linear infinite}
.mq--fina .mq__item{font-size:16px;padding:0 26px;gap:11px}
.mq--fina .mq__item img{width:24px;height:24px}
@keyframes mq50{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:760px){.mq--fina{height:50px}.mq--fina .mq__item{font-size:14.5px;padding:0 18px}}

/* ---------- Títulos ---------- */
.sec__eyebrow{text-align:center;font-size:14px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--verde-titulo);margin-bottom:10px;font-family:var(--poppins)}
.sec__title{text-align:center;font-family:var(--readex);font-size:clamp(26px,3.2vw,36px);
  font-weight:500;color:var(--verde-titulo);margin-bottom:12px;text-transform:uppercase}
.sec__title--jost{font-family:var(--jost);font-weight:700;font-size:clamp(28px,3.4vw,40px);
  color:var(--tinta-forte);text-transform:none}
.sec__lead{text-align:center;max-width:760px;margin:0 auto 40px;font-size:17px}
.sec--escuro .sec__lead,.sec--timeline .sec__lead{color:rgba(255,255,255,.82)}
.hl{color:var(--verde-cta)}

/* ---------- Vitrine ---------- */
.cards{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:820px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--borda-neutra);border-radius:var(--r-card);overflow:hidden;
  background:#fff;display:flex;flex-direction:column}
.card__img{background:#F4F4F4;position:relative;display:grid;place-items:end center;padding:24px 24px 0;min-height:250px}
.card__img img{max-height:230px;width:auto}
.card__tag{position:absolute;left:14px;top:14px;background:var(--verde-titulo);color:#fff;
  font-size:12px;font-weight:500;padding:5px 11px;border-radius:99px;letter-spacing:.04em;
  text-transform:uppercase;font-family:var(--poppins)}
.card__body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.card__kicker{font-size:13px;color:var(--verde-titulo);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.card__body h3{font-family:var(--readex);font-size:clamp(22px,2.2vw,28px);font-weight:700}
.card__body p{font-size:16px;flex:1}
.card__price{font-family:var(--readex);font-weight:500;font-size:19px;color:var(--verde-titulo)}
.card .btn-cta{font-size:18px;padding:16px}

/* ---------- Ticker de depoimentos ---------- */
.rvs{overflow:hidden;padding:40px 0}
.rvs__viewport{overflow:hidden}
.rvs__track{display:flex;gap:24px;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform}
.rvs__card{flex:0 0 340px;background:#fff;border:1px solid var(--borda-neutra);border-radius:16px;
  padding:24px;display:flex;flex-direction:column;gap:10px}
@media(min-width:760px){.rvs__card{flex-basis:370px}}
@media(max-width:520px){.rvs__card{flex:0 0 84vw}}
.rvs__rating{display:flex;align-items:center;gap:8px}
.rvs__num{font-weight:600;font-size:15px;color:var(--tinta-forte)}
.rvs__stars{color:#F0A500;font-size:14px;letter-spacing:1px}
.rvs__head{font-family:var(--jost);font-size:19px;font-weight:700;line-height:1.25}
.rvs__body{font-size:15.5px;flex:1}
.rvs__foot{display:flex;align-items:center;gap:10px;border-top:1px solid #EFEFEF;padding-top:14px;margin-top:4px}
.rvs__foot img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 36px}
.rvs__name{font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--tinta-forte)}
.rvs__verified{font-size:11px;letter-spacing:.06em;color:var(--verde-titulo);font-weight:500}
.rvs__arrows{display:flex;gap:10px;justify-content:center;margin-top:28px}
.rvs__arrow{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--borda-neutra);
  display:grid;place-items:center;font-size:19px;color:#121212}
.rvs__arrow:hover{background:#121212;color:#fff;border-color:#121212}

/* ---------- Bloco "sem risco" ---------- */
.risco{background:var(--cinza);padding:60px 0;text-align:center}
.risco__in{max-width:760px;margin:0 auto;padding:0 20px}
.risco .escudo{margin:0 auto 18px;display:block}
.risco__eyebrow{font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;font-weight:500}
.risco h2{font-family:var(--jost);font-size:clamp(28px,3.4vw,40px);font-weight:700;
  text-transform:uppercase;margin-bottom:14px}
.risco p{font-size:17px;margin-bottom:22px}
.risco__bullets{display:flex;flex-wrap:wrap;gap:14px 34px;justify-content:center;margin-bottom:26px}
.risco__bullets li{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:500;color:var(--tinta-forte)}

/* ---------- FAQ ---------- */
.faq-col{max-width:820px;margin:0 auto}
.faq-col .acc{border:0;border-bottom:1px solid #E8E8E8;border-radius:0;background:none;margin:0}
.faq-col .acc__head{padding:22px 4px;font-size:18px}
.faq-col .acc__body{padding:0 4px 22px}
.faqgrid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:820px){.faqgrid{grid-template-columns:1fr 1fr}}
.acc{border:1px solid var(--borda);border-radius:var(--r-card);margin-top:12px;background:#fff}
.faqgrid .acc{margin-top:0}
.acc__head{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;
  padding:20px;font-family:var(--jost);font-size:18px;font-weight:700;text-align:left;color:var(--tinta-forte)}
.acc__ico{font-size:24px;font-weight:400;color:var(--verde-titulo);transition:transform .25s;line-height:1}
.acc.on .acc__ico{transform:rotate(45deg)}
.acc__body{display:none;padding:0 20px 20px;font-size:16px}
.acc.on .acc__body{display:block}
.acc__body h4{font-family:var(--jost);font-size:17px;margin:12px 0 6px}
.acc__body li{display:flex;gap:10px;margin-bottom:8px}

/* ---------- Contato ---------- */
.contato{text-align:center;padding:60px 0}
.contato h2{font-family:var(--jost);font-size:clamp(24px,2.8vw,32px);font-weight:700;margin-bottom:12px}
.contato p{font-size:17px;margin-bottom:22px}

/* ---------- PDP ---------- */
.pdp{padding:60px 0 0}
.pdp__grid{display:grid;grid-template-columns:1fr;gap:34px;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.pdp__grid>*{min-width:0}
@media(min-width:1000px){.pdp__grid{grid-template-columns:minmax(0,1fr) minmax(0,649px);gap:48px;align-items:start}}
.gal__main{position:relative;border-radius:var(--r-card);overflow:hidden;background:#F4F4F4}
.gal__slide{display:none}.gal__slide.on{display:block}
.gal__slide img{width:100%;aspect-ratio:1/1;object-fit:cover}
.gal__nav{position:absolute;top:50%;translate:0 -50%;width:38px;height:38px;border-radius:50%;
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.15);display:grid;place-items:center;font-size:18px;color:#121212}
.gal__nav--prev{left:12px}.gal__nav--next{right:12px}
.gal__thumbsrow{position:relative;display:flex;align-items:center;gap:8px;margin-top:12px}
.gal__thumbs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;flex:1;min-width:0}
.gal__thumbs::-webkit-scrollbar{display:none}
.gal__thumbs button{flex:0 0 84px;height:84px;border-radius:var(--r-card);overflow:hidden;
  border:2px solid transparent;background:#F4F4F4}
.gal__thumbs button.on{border-color:var(--verde-titulo)}
.gal__thumbs img{width:100%;height:100%;object-fit:cover}
/* a seta JA e' o circulo (SVG com fill branco e traco #081C08) — o botao nao
   pode desenhar um segundo circulo por cima, senao fica borda dupla */
.thumbnav{flex:0 0 38px;width:38px;height:38px;border:0;background:none;padding:0;
  display:grid;place-items:center;cursor:pointer}
.thumbnav svg{display:block;width:38px;height:38px}
@media(min-width:1000px){.gal--sticky{position:sticky;top:80px}}

.pdp__title{font-family:var(--readex);font-size:clamp(30px,3.6vw,41px);font-weight:500;
  color:var(--verde-titulo);line-height:1.15;margin-bottom:12px}
.pdp__sub{font-size:17px;margin-bottom:22px}
.benefits{background:#F1F8F3;border-radius:var(--r-card);padding:20px 22px;display:grid;gap:14px;margin-bottom:24px}
.benefits li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.benefits b{color:var(--tinta-forte);font-weight:600}
.tick{flex:0 0 19px;height:19px;margin-top:3px;border:1.5px solid var(--verde-cta);border-radius:3px;
  display:grid;place-items:center;font-size:11px;line-height:1;color:var(--verde-cta);background:#fff}
.sec--escuro .tick,.sec--timeline .tick,.statsbox .tick{border-color:var(--mint);color:var(--mint);background:transparent}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.tier{position:relative;border:1px solid var(--borda-neutra);border-radius:var(--r-card);background:#fff;
  padding:32px 10px 14px;display:grid;grid-template-columns:56px 1fr;align-items:center;gap:8px;cursor:pointer}
.tier input{position:absolute;opacity:0;pointer-events:none}
.tier img{height:58px;width:100%;object-fit:contain}
.tier__flag{position:absolute;inset:0 0 auto 0;height:26px;display:grid;place-items:center;
  font-size:12px;font-weight:500;background:#EAF6EC;color:var(--verde-titulo);
  border-radius:3px 3px 0 0;font-family:var(--poppins)}
.tier--pop{border-color:var(--verde-titulo)}
.tier--pop .tier__flag{background:var(--verde-titulo);color:#fff}
.tier__name{font-family:var(--jost);font-weight:700;font-size:16px;color:var(--tinta-forte)}
.tier__save{display:inline-block;background:#E23B3B;color:#fff;font-size:11px;font-weight:500;
  padding:2px 7px;border-radius:3px;margin:4px 0 3px;white-space:nowrap}
.tier__price{font-weight:600;font-size:16px;color:var(--tinta-forte);white-space:nowrap}
.tier__old{color:#9AA39C;text-decoration:line-through;font-size:13px;white-space:nowrap}
.tier:has(input:checked){border-color:var(--verde-titulo);background:#F7FCF8}
@media(max-width:640px){
  .tiers{gap:8px}
  .tier{grid-template-columns:1fr;justify-items:center;text-align:center;padding:30px 4px 12px;gap:2px}
  .tier img{height:46px}.tier__name{font-size:14px}.tier__save{font-size:10px}
  .tier__price{font-size:14px}.tier__old{font-size:12px}.tier__flag{font-size:10.5px;height:23px}
}

.stock{display:flex;align-items:center;gap:9px;justify-content:center;font-size:16px;margin:14px 0}
.dot{width:9px;height:9px;border-radius:50%;background:var(--verde-cta);box-shadow:0 0 0 4px rgba(50,194,48,.2)}
.subbar{height:5px;border-radius:99px;background:linear-gradient(90deg,var(--verde-cta),#9BE59A);margin:22px 0 12px}
.subnote{font-size:14px;color:#8A948C;margin-bottom:12px}
.sublist li{display:flex;gap:9px;align-items:center;font-size:16px;margin-bottom:6px}
.buyonce{display:inline-flex;gap:8px;align-items:center;font-weight:600;text-decoration:underline;
  text-underline-offset:4px;margin:14px 0 6px;color:var(--tinta-forte);font-size:16px}
.buyonce span{font-weight:500;color:#8A948C}
.trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;
  background:var(--cinza);border-radius:var(--r-card);padding:16px;margin:20px 0;font-size:15px;font-weight:500}
.pay{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.pay span{background:#fff;border:1px solid var(--borda-neutra);border-radius:3px;padding:4px 8px;
  font-size:11px;font-weight:600}
.guarabox{border:1px solid var(--verde-titulo);border-radius:var(--r-card);padding:20px 22px;background:#F7FCF8}
.guarabox h3{font-family:var(--jost);font-size:19px;display:flex;gap:10px;align-items:center;
  margin-bottom:6px;color:var(--verde-titulo)}
.guarabox p{font-size:16px}

/* ---------- Split ---------- */
.split{display:grid;gap:34px;align-items:center;grid-template-columns:1fr}
.split>*{min-width:0}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:50px}}
.split img{border-radius:var(--r-card);width:100%;object-fit:cover;aspect-ratio:4/3}
.checklist li{display:flex;gap:14px;align-items:flex-start;padding:10px 0;font-size:17px}
.checkbox{flex:0 0 21px;height:21px;border-radius:3px;border:1.5px solid #F06060;display:grid;
  place-items:center;color:#F06060;font-size:12px;margin-top:3px}

/* ---------- Card "a fruta que cuida" ---------- */
.core{background:linear-gradient(120deg,#0F5230,#1E7A45);border-radius:var(--r-card);padding:44px;
  display:grid;gap:28px;grid-template-columns:1fr;overflow:hidden;margin-top:48px}
.core>*{min-width:0}
@media(min-width:900px){.core{grid-template-columns:1.05fr .95fr;align-items:center;padding:48px}}
.core h2{font-family:var(--readex);font-weight:500;color:#fff}
.core__icons{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:24px}
@media(min-width:620px){.core__icons{grid-template-columns:repeat(4,1fr)}}
.core__icons div{font-size:15px;font-weight:500;line-height:1.35;color:#fff}
.core__icons svg{color:var(--mint);margin-bottom:10px}
.core__img{align-self:end}
.core__img img{width:100%;margin-bottom:-18px;filter:drop-shadow(0 22px 36px rgba(0,0,0,.35))}
@media(min-width:900px){.core__img img{margin-bottom:-22px}}

/* ---------- Estágios ---------- */
.stages{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:880px){.stages{grid-template-columns:repeat(3,1fr)}}
.stage{background:#F1F8F3;border-radius:var(--r-card);overflow:hidden;display:grid;grid-template-columns:145px 1fr}
@media(max-width:519px){.stage{grid-template-columns:1fr}.stage img{aspect-ratio:16/9}}
.stage img{height:100%;width:100%;object-fit:cover}
.stage__txt{padding:20px}
.stage__n{font-size:13px;font-weight:500;letter-spacing:.12em;color:var(--verde-titulo);
  text-transform:uppercase;margin-bottom:6px}
.stage__txt h3{font-family:var(--jost);font-size:21px;margin-bottom:8px}
.stage__txt p{font-size:15.5px}

/* ---------- Linha do tempo ---------- */
.tl{display:grid;gap:30px;grid-template-columns:1fr}
@media(min-width:880px){.tl{grid-template-columns:repeat(4,1fr);gap:24px}}
.tl__dot{width:13px;height:13px;border-radius:3px;background:#fff;margin-bottom:16px;position:relative}
.tl__dot::after{content:"";position:absolute;left:21px;top:6px;height:2px;width:calc(100% + 24px);background:rgba(255,255,255,.28)}
@media(max-width:879px){.tl__dot::after{display:none}}
.tl__item:last-child .tl__dot::after{display:none}
.tl__wk{color:var(--mint);font-weight:600;font-size:17px;margin-bottom:10px}
.tl__tag{display:inline-block;background:#fff;color:var(--timeline);font-family:var(--jost);
  font-weight:700;font-size:15px;padding:7px 13px;border-radius:3px;margin-bottom:12px}
.tl__item p{font-size:15px;color:rgba(255,255,255,.82);margin-bottom:12px}
.tl__item li{display:flex;gap:9px;font-size:14.5px;color:rgba(255,255,255,.92);margin-bottom:8px}
.tl__item .tick{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.guaranote{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);border-radius:var(--r-card);
  padding:22px 26px;max-width:640px;margin:44px auto 0}
.guaranote h3{font-family:var(--jost);font-size:19px;display:flex;gap:10px;align-items:center;
  margin-bottom:6px;color:#fff}
.guaranote p{color:rgba(255,255,255,.85);font-size:16px}

/* ---------- Comparativo ---------- */
.cmp{max-width:900px;margin:0 auto;border:1px solid var(--borda);border-radius:var(--r-card);overflow:hidden}
.cmp__row{display:grid;grid-template-columns:1fr 100px 100px;align-items:center;gap:8px;
  padding:18px 20px;border-bottom:1px solid var(--borda);font-size:16px}
@media(min-width:700px){.cmp__row{grid-template-columns:1fr 150px 150px;padding:20px 30px;font-size:17px}}
.cmp__row:last-child{border-bottom:0}
.cmp__row--head{background:#F1F8F3;font-weight:600;font-size:14px;text-align:center;color:var(--verde-titulo)}
.cmp__row--head span:first-child{text-align:left}
.cmp__row div{text-align:center;font-size:20px;font-weight:700}
.yes{color:var(--verde-cta)}
.no{color:#D96A6A}
.cmp__brand{color:var(--verde-titulo)}

/* ---------- Estatísticas ---------- */
.statsbox{background:linear-gradient(135deg,#0F5230,#062E1B);border-radius:var(--r-card);
  padding:clamp(28px,5vw,52px);color:#fff;overflow:hidden}
.statsbox h2,.statsbox h3{color:#fff}
.statsbox h2{font-family:var(--readex);font-weight:500}
.statsplit{display:grid;gap:34px;grid-template-columns:1fr;align-items:start}
@media(min-width:1000px){.statsplit{grid-template-columns:1.6fr 1fr;gap:44px}}
.statsplit>*{min-width:0}
.statsplit>img{border-radius:var(--r-card);width:100%;object-fit:cover;aspect-ratio:1/1}
.stats{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:760px){.stats{grid-template-columns:repeat(3,1fr)}}
.stats>*{min-width:0}
.stat b{display:block;font-family:var(--readex);font-size:clamp(38px,5vw,49px);color:var(--mint);
  line-height:1;font-weight:700;margin-bottom:10px}
.stat h3{font-family:var(--jost);font-size:18px;margin-bottom:10px}
.stat p{font-size:14px;color:rgba(255,255,255,.82)}
.statsbox .sublist li{color:rgba(255,255,255,.92)}
/* Na referencia os frascos deste bloco NAO sangram: ficam apoiados acima do
   padding, deixando uma faixa de verde embaixo, e ocupam pouco mais de dois
   tercos da coluna. Sangrar aqui empurrava o produto para fora da caixa e
   comia a respiracao que o bloco precisa. */
.bleed-bottom{align-self:end !important;margin-bottom:0 !important;
  border-radius:0 !important;aspect-ratio:auto !important}
/* Os frascos ocupam a coluna inteira e crescem ate a altura do bloco. Em 62%
   sobravam 106px de verde vazio em cima e uma faixa larga do lado — o produto
   ficava perdido num canto. Agora `align-self:stretch` faz a caixa da imagem
   ter a altura da coluna de texto e o `object-fit:contain` desenha os frascos
   no maior tamanho que couber, sem cortar e sem distorcer. */
.statsbox .split>img.bleed-bottom{width:88%;height:auto;justify-self:center;
  align-self:center !important;margin-bottom:0 !important}
@media(max-width:899px){
  .statsbox .split>img.bleed-bottom{width:88%;justify-self:center;margin-bottom:4px !important}
}
/* Troca de arte por largura: 3 frascos no desktop, 2 no celular -- e' assim que a
   referencia faz (dois <img>, `.desktop-display` e `.mobile-display`, um escondido
   em cada breakpoint), e nao redimensionando a mesma arte. Com 3 frascos num
   celular o da frente encolhe tanto que o rotulo some.
   Especificidade alta de proposito: `.split>img` ja define display:block. */
.split>img.so-mobile,img.so-mobile{display:none}
@media(max-width:899px){
  .split>img.so-desktop,img.so-desktop{display:none}
  .split>img.so-mobile,img.so-mobile{display:block}
}

/* ---------- Rodapé ---------- */
.ft{background:var(--preto);color:rgba(255,255,255,.72);padding:60px 0 34px}
.ft__grid{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:760px){.ft__grid{grid-template-columns:1.4fr 1fr 1fr}}
.ft__logo{line-height:0;margin-bottom:14px}
.ft__logo img{height:26px;width:auto}
.ft a:hover{color:#fff;text-decoration:underline}
.ft li{margin-bottom:11px;font-size:16px}
/* fileira de redes: os cinco botões têm a mesma caixa, então nenhum ícone
   parece mais importante que o outro. O do caminhão leva ao rastreio dos
   Correios — não é rede social, mas é o link que o cliente mais procura no
   rodapé, e ali ele fica ao alcance do polegar no celular. */
.ft__redes{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.ft .ig{display:inline-grid;place-items:center;width:36px;height:36px;
  border:1px solid rgba(255,255,255,.35);border-radius:6px;color:#fff;
  transition:border-color .2s,background .2s}
.ft .ig:hover{border-color:#fff;background:rgba(255,255,255,.10)}
.ft__legal{border-top:1px solid rgba(255,255,255,.16);margin-top:34px;padding-top:22px;
  font-size:12.5px;color:rgba(255,255,255,.55);display:grid;gap:12px}

/* ---------- CTA fixo mobile ---------- */
/* Barra fixa de compra no celular. Medida na referencia (414px de largura):
   faixa branca com 20px de padding, botao ocupando toda a largura util, 72px de
   altura, raio 2px, verde #32C230; primeira linha 17px/500 com letter-spacing
   -0.48px e segunda linha 13px/500 em #A5E8AD. A segunda linha e' o gatilho:
   repete a garantia no momento do clique, quando a duvida aparece. */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;
  border-top:1px solid #EFEFEF;padding:20px;transform:translateY(120%);transition:transform .28s;
  box-shadow:0 -6px 24px rgba(0,0,0,.07)}
.stickycta.on{transform:none}
@media(min-width:1000px){.stickycta{display:none}}
.stickycta .btn-cta{display:grid;place-content:center;gap:3px;min-height:72px;padding:10px 14px;
  font-size:17px;font-weight:500;letter-spacing:-.48px;border-radius:2px;line-height:1.2;text-align:center}
.stickycta .btn-cta small{display:block;font-size:13px;font-weight:500;letter-spacing:0;
  color:#A5E8AD;text-transform:none}
.stickycta .btn-cta del{display:none}
@media(max-width:359px){.stickycta{padding:14px}.stickycta .btn-cta{font-size:15.5px;min-height:64px}}

@media(max-width:820px){
  .hero{background-position:72% center;min-height:420px}
  .hero__in{padding:40px 20px}
}

/* =========================================================
   v5 — paridade com alevia.com/products/amla-192011
   ========================================================= */

/* --- barra de aviso --- */
.anuncio{background:var(--timeline);color:#fff;text-align:center;padding:12px 20px;
  font-size:16px;font-weight:500;letter-spacing:.02em}
@media(min-width:760px){.anuncio{font-size:18px}}

/* --- grade do PDP: 609 / 649 com gap 70, sem sticky --- */
.pdp__grid{max-width:1328px}
@media(min-width:1000px){
  .pdp__grid{grid-template-columns:minmax(0,609fr) minmax(0,649fr);gap:70px;align-items:start}
}
.gal{position:static}
.gal__nav{display:none}

/* --- linha de avaliação --- */
.rating{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.rating__stars{color:#121212;font-size:17px;letter-spacing:2px;line-height:1}
.rating__txt{font-size:16px;color:var(--tinta)}

/* --- pacotes: "Compre 2 / Leve 3" --- */
.tier__free{color:var(--verde-cta);font-weight:700}
.tier__save{background:#FF5B52;font-weight:600}
.tier--frete .tier__flag{background:#DFF1E4;color:var(--verde-titulo)}

/* --- selos de confiança + bandeiras --- */
.trust{display:block;text-align:center;background:var(--cinza);border-radius:var(--r-card);padding:18px 16px;margin:18px 0}
.trust__row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  font-size:17px;font-weight:500;color:var(--tinta-forte);margin-bottom:12px}
.trust__row span{display:inline-flex;align-items:center;gap:9px}
.trust__row img{width:26px;height:26px}
.trust__sep{color:#B9C4BC}
.trust__pay{max-width:420px;width:100%;margin:0 auto}

.buyonce-row{text-align:center;margin:16px 0 20px}
.buyonce{font-size:15.5px;letter-spacing:.02em}
.guarabox h3{gap:9px}
.guarabox h3 img{width:20px;height:22px}
.subnote{font-size:14.5px;color:#8A948C;margin:16px 0 4px;line-height:1.5}

/* --- carrossel de depoimentos (bloco verde) --- */
.rsl__box{background:var(--timeline) url("../img/review-bg.webp") center/cover;
  border-radius:var(--r-card);padding:48px clamp(20px,4vw,44px) 40px;color:#fff;overflow:hidden}
.rsl__title{font-family:var(--readex);font-weight:500;font-size:clamp(24px,3vw,34px);
  color:#fff;text-align:center;margin-bottom:12px}
.rsl__rating{display:flex;align-items:center;justify-content:center;gap:10px;
  color:rgba(255,255,255,.9);font-size:16px;margin-bottom:32px;flex-wrap:wrap}
.rsl__rating .rating__stars{color:#fff}
.rsl__viewport{overflow:hidden}
.rsl__track{display:flex;gap:20px;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform}
.rsl__card{flex:0 0 338px;background:#fff;border-radius:var(--r-card);padding:24px;
  display:flex;flex-direction:column;gap:10px;color:var(--tinta)}
/* o proximo card precisa aparecer pela borda: e o "espia" que avisa que ha mais
   depoimentos para arrastar. Sem ele o carrossel parece um card unico. */
@media(max-width:520px){.rsl__card{flex:0 0 77vw}}
.rsl__card h3{font-family:var(--jost);font-size:20px;font-weight:700;line-height:1.25;color:var(--tinta-forte)}
.rsl__rate{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--tinta-forte)}
.rsl__rate .rating__stars{color:#F0A500;font-size:14px}
.rsl__card p{font-size:15.5px;flex:1}
.rsl__foot{display:flex;align-items:center;gap:10px;border-top:1px solid #EFEFEF;padding-top:14px}
.rsl__foot img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 38px}
.rsl__name{font-size:14px;font-weight:600;color:var(--tinta-forte)}
.rsl__name span{color:var(--verde-cta);font-weight:500}
.rsl__date{font-size:13px;color:#8A948C}
.rsl__dots{display:flex;gap:0;justify-content:center;margin-top:28px}
.rsl__dots button{width:74px;height:2px;background:rgba(255,255,255,.35);border-radius:2px}
.rsl__dots button.on{background:#fff;height:3px}
.rsl__arrows{display:flex;gap:12px;justify-content:center;margin-top:18px}
.rsl__arrow{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  color:#fff;display:grid;place-items:center;font-size:18px}
.rsl__arrow:hover{background:#fff;color:var(--timeline)}

/* --- gráfico do declínio --- */
.split--grafico{align-items:center}
.grafico{border-radius:0;aspect-ratio:auto;width:100%;height:auto;background:none}
.core__eyebrow{font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mint);margin-bottom:10px}

/* --- linha do tempo com trilho e marcador --- */
.tl__item{position:relative;padding-top:34px}
.tl__ind{position:absolute;top:0;left:0;width:100%;height:16px}
.tl__ind::before{content:"";position:absolute;left:0;top:7px;width:100%;height:1px;background:rgba(255,255,255,.45)}
.tl__ind span{position:absolute;left:0;top:0;width:16px;height:16px;background:#fff;border-radius:2px;
  transition:box-shadow .3s}
.tl__item.ativo .tl__ind::before{background:#fff}
.tl__item.ativo .tl__ind span{box-shadow:0 0 0 6px rgba(194,255,198,.28)}
.tl__fill{position:absolute;left:0;top:7px;height:1px;background:var(--mint);width:0;transition:width .4s linear}
.tl__dot{display:none}

/* --- avaliações verificadas --- */
.rvsec__rating{display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:16px;margin:6px 0 34px;flex-wrap:wrap}
.rvsec__grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:780px){.rvsec__grid{grid-template-columns:repeat(3,1fr)}}
.rvsec__item{display:flex;flex-direction:column;gap:12px}
.rvsec__item--oculto{display:none}
.rvsec__item.mostrar{display:flex}
.rvsec__rate{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--tinta-forte)}
.rvsec__rate .rating__stars{color:#F0A500;font-size:14px}
.rvsec__item p{font-size:16px}
.rvsec__who{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--tinta-forte)}
.rvsec__who img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.rvsec__who em{font-style:normal;color:var(--verde-titulo);font-weight:500}

/* --- CTA sem preço quando o JS ainda não rodou --- */
/* nowrap so quando a coluna e' larga o bastante: entre 1000 e 1200px a coluna de
   compra tem ~470px e o texto "ADICIONAR AO CARRINHO - R$ 359,80 R$ 539,70" numa
   linha so empurrava a pagina 200px para o lado */
.btn-cta{white-space:normal}
@media(min-width:1200px){.btn-cta{white-space:nowrap}}

/* a coluna da galeria acompanha a rolagem: em PT o texto é mais longo
   que no site em inglês e sobraria um vazio grande à esquerda */
@media(min-width:1000px){.gal{position:sticky;top:78px}}
.grafico{display:block;width:100%;max-width:100%;height:auto;object-fit:contain}

@media(max-width:700px){
  .tiers>*{min-width:0}
  .tier__save{white-space:normal;font-size:9.5px;line-height:1.25;padding:3px 5px}
  .tier__price,.tier__old{white-space:normal}
  .tier__name{font-size:13px;line-height:1.2}
  .rsl__box{padding:36px 16px 30px}
}

/* =========================================================
   v6 — correções apontadas na revisão
   ========================================================= */

/* 1) `.split img` estava pegando ícones dentro de colunas (o escudo virava um
      coração gigante). Agora só atinge imagem filha direta do split. */
.split img{all:unset}
.split > img{display:block;border-radius:var(--r-card);width:100%;object-fit:cover;aspect-ratio:4/3}
.split > img.grafico,.split > img.bleed-bottom{aspect-ratio:auto;object-fit:contain}
.split div img{display:block;max-width:100%;height:auto;width:auto}

/* 2) a variante do meio não fica mais com borda fixa — só a tarja "Mais vendido" */
.tier--pop{border-color:var(--borda-neutra)}
.tier:has(input:checked){border-color:var(--verde-titulo);background:#F7FCF8;
  box-shadow:0 0 0 1px var(--verde-titulo) inset}

/* 3) galeria do desktop — agora igual a referencia. A grade de imagens grandes
      que eu tinha posto aqui era errada: na Alevia a coluna da esquerda leva
      imagem grande + tira de miniaturas QUADRADAS embaixo, e a coluna inteira
      ACOMPANHA A ROLAGEM (position:sticky). O vazio de 858px que eu tentava
      preencher com a grade e' resolvido pelo sticky, nao por mais imagem.
      Medido no DOM de alevia.com/products/amla-192011:
        .product-offer__media-inner  position:sticky  top:90px
        miniatura 99x99 (passo 109 -> gap 10), tira com margin-top:16px, raio 2px
        miniatura ativa: border 1px solid #03311B
        setas 46x46, circulo branco com traco #081C08 1.63px, metade para fora
        (left:-22.5px / right:-22.5px), centradas na altura da tira */
.gal__resto{display:none}
@media(min-width:1000px){
  .gal{position:sticky;top:78px}
  .gal__main{margin-bottom:0}
  .gal__thumbsrow{display:flex;margin-top:16px;gap:0}
  .gal__thumbs{gap:10px}
  .gal__thumbs button{flex:0 0 99px;height:99px;border-radius:2px}
  .gal__thumbs button.on{border-color:var(--timeline);border-width:1px}
  .thumbnav{position:absolute;top:50%;translate:0 -50%;flex:0 0 46px;width:46px;height:46px;
    border:0;background:none;padding:0;z-index:3}
  #thumbPrev{left:-23px}
  #thumbNext{right:-23px}
  .thumbnav svg{display:block;width:46px;height:46px}
}

/* 4) carrossel rolando sozinho */
.rsl__track,.rvs__track{will-change:transform}

/* ---------- páginas legais / contato ---------- */
.legal{padding:56px 0 72px}
.legal__in{max-width:820px;margin:0 auto;padding:0 20px}
.legal h1{font-family:var(--jost);font-size:clamp(30px,4vw,42px);font-weight:700;margin-bottom:8px}
.legal__data{font-size:15px;color:#8A948C;margin-bottom:36px}
.legal h2{font-family:var(--jost);font-size:clamp(20px,2.4vw,24px);font-weight:700;
  margin:34px 0 12px;color:var(--verde-titulo)}
.legal p{font-size:17px;margin-bottom:14px}
.legal a{color:var(--verde-titulo);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--verde-cta)}
/* botao dentro de pagina legal continua botao: sem sublinhado e com a cor
   propria dele (o `.legal a` deixava o texto verde escuro sobre preto) */
.legal a.btn-cta,.legal a.btn-preto,.legal a.btn-branco{text-decoration:none;color:#fff}
.legal a.btn-cta:hover,.legal a.btn-preto:hover{color:#fff}
.legal__lista{margin:0 0 16px;padding-left:0}
.legal__lista li{position:relative;padding-left:26px;font-size:17px;margin-bottom:10px}
.legal__lista li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;
  border-radius:2px;background:var(--verde-cta)}
.legal__lista--num{counter-reset:n}
.legal__lista--num li{counter-increment:n}
.legal__lista--num li::before{content:counter(n);background:none;color:var(--verde-titulo);
  font-weight:700;font-size:15px;top:0;left:2px;width:auto;height:auto}
.legal__voltar{margin-top:44px;padding-top:28px;border-top:1px solid #EFEFEF}
.legal__cta{margin-top:32px}
.legal strong{color:var(--tinta-forte);font-weight:600}

/* =========================================================
   v7 — arte nova
   ========================================================= */
.statsbox{background:var(--timeline) url("../img/counter-bg.webp") center/cover}
.cmp__col{display:flex;flex-direction:column;align-items:center;gap:6px}
.cmp__col img{height:52px;width:auto;object-fit:contain}
.cmp__col em{font-style:normal;font-size:14px;font-weight:600}
.cmp__row--head{padding-top:16px;padding-bottom:16px}
.mq__item img{width:26px;height:26px;filter:brightness(0) invert(1);opacity:.95}
.tier img{height:62px}
@media(max-width:640px){.tier img{height:50px}}

/* =========================================================
   v11 — fotografia própria
   ========================================================= */

/* hero vertical no celular: composicao propria, nao um corte do panorama */
@media(max-width:820px){
  .hero{background-image:linear-gradient(180deg,rgba(6,20,13,.55) 0%,rgba(6,20,13,.15) 45%,rgba(6,20,13,.75) 100%),url("../img/hero-vertical.webp") !important;
        background-position:center top;min-height:560px;align-items:flex-start}
  .hero__in{padding:44px 20px 0}
  .hero h1{max-width:12ch}
}

/* a galeria agora abre com foto real de produto */
.gal__main{background:#EFEFEA}
.gal__resto button{background:#EFEFEA}

/* =========================================================
   v14 — detalhes do celular colhidos na referencia
   ========================================================= */

/* 1) O PRODUTO ATRAVESSA A SECAO.
   Na Alevia, no celular, `.product-usp__feat-img` tem `margin-bottom:-70px`:
   os frascos passam da borda do bloco verde e invadem a secao branca de baixo.
   E' um gatilho de continuidade -- o produto "sai da caixa" e puxa o olho para
   o proximo bloco em vez de deixar a pagina terminar ali. Para funcionar, o
   card nao pode cortar (`overflow:visible`) e o produto precisa pintar por
   cima do que vem depois (`z-index`). */
@media(max-width:899px){
  .core{overflow:visible;padding-bottom:0}
  .core__img{position:relative;z-index:2}
  .core__img img{margin-bottom:-70px;filter:drop-shadow(0 26px 34px rgba(0,0,0,.42))}
  .sec--escuro:has(.core){padding-bottom:0}
  /* o titulo seguinte precisa de folga, senao os frascos que invadem passam
     por cima dele -- na referencia a secao de baixo abre mais espaco */
  .sec--escuro:has(.core)+.sec{padding-top:104px}
}

/* 2) Rodape: preto com a textura de folha por cima, nao preto chapado.
   Medido: background-color #000 + background-image cover; links 14px/400 brancos;
   texto legal 12px com 18px de entrelinha em branco 75%; divisor branco de 0.5px. */
.ft{background:var(--preto) url("../img/review-bg.webp") center/cover}
.ft li{font-size:14px}
.ft__legal{border-top:0;font-size:12px;line-height:18px;color:rgba(255,255,255,.75)}
.ft__legal::before{content:"";display:block;width:109px;height:.5px;background:#fff;
  opacity:.55;margin-bottom:20px}
/* ordem do rodape da referencia: marca -> divisor -> links -> divisor ->
   copyright -> avisos legais. O copyright fica junto do bloco legal, depois do
   divisor, e nao colado no e-mail. */
.ft__copy{font-size:14px;color:rgba(255,255,255,.9);margin-bottom:6px}
@media(max-width:759px){
  .ft__brand::after{content:"";display:block;width:109px;height:.5px;background:#fff;
    opacity:.55;margin:24px 0 4px}
  .ft__grid{gap:20px}
}

/* Entre 1000 e 1200px a coluna de compra fica com ~470px e os tres cards de
   variante nao cabem lado a lado no tamanho cheio: o `min-content` deles somava
   693px e empurrava a pagina inteira 200px para o lado (barra de rolagem
   horizontal em notebook de 13"). Mesmo tratamento que ja existe no celular. */
@media(min-width:1000px) and (max-width:1199px){
  .tiers{gap:8px}
  .tier{padding-left:8px;padding-right:8px}
  .tier__name{font-size:14px;line-height:1.2}
  .tier__price{font-size:14.5px;white-space:nowrap}
  .tier__old{font-size:12px;white-space:nowrap}
  .tier__save{font-size:9.5px;line-height:1.25;padding:3px 5px;white-space:normal}
  .tier__flag{font-size:11px}
}

/* ---------- Presente surpresa ----------
   Duas caras: quem já ganha vê a faixa verde de confirmação, quem não ganha vê
   a faixa neutra com quanto falta. A segunda é a que converte — por isso ela
   não pode parecer erro nem alerta, só uma informação a mais. */
.brinde{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;padding:12px 14px;
  border:1px solid var(--borda-neutra);border-radius:var(--r-card);background:#FAFAF8}
.brinde img{flex:0 0 30px;margin-top:1px;opacity:.85}
.brinde p{font-size:14.5px;line-height:1.45;margin:0}
.brinde strong{color:var(--tinta-forte);font-weight:600}
.brinde--on{border-color:var(--borda);background:#F3FBF5}
.brinde--on img{opacity:1;filter:brightness(0) saturate(100%) invert(23%) sepia(28%)
  saturate(1600%) hue-rotate(107deg) brightness(94%) contrast(93%)}
.brinde--on strong{color:var(--verde-titulo)}
.tier__brinde{margin-top:5px;font-size:10.5px;font-weight:600;line-height:1.2;
  color:var(--verde-cta-esc);letter-spacing:.01em}
@media(max-width:700px){.tier__brinde{font-size:9.5px}}

/* Cards "em breve": produto que ainda não existe não pode usar a foto do que
   existe. Antes eram três vezes o mesmo frasco de Amla com nomes diferentes —
   quem prestasse atenção via a palavra AMLA nos três. Agora é o frasco em
   branco, mesma silhueta da marca e nenhum rótulo: diz a verdade. */
.card--breve{opacity:.9}
.card--breve .card__img{background:#EFEFEA}
.card--breve h3,.card--breve .card__kicker{color:#5F6B62}
.card__tag--breve{background:#8AA394}
.card__price--breve{color:#8A948C;font-weight:500}
.card--breve .btn-preto{background:#5F6B62}
.card--breve .btn-preto:hover{background:#4C574F}
.card__brinde{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;
  color:var(--verde-titulo);margin:-4px 0 14px}
.card__brinde img{flex:0 0 18px;filter:brightness(0) saturate(100%) invert(23%) sepia(28%)
  saturate(1600%) hue-rotate(107deg) brightness(94%) contrast(93%)}

/* ---------- Faixa do Pix ----------
   Fica logo abaixo do botão porque é ali que a pessoa decide como pagar. Verde
   claro, não vermelho: é vantagem, não urgência. O selo de 5% carrega o peso e
   o texto explica por que vale — aprovação imediata é benefício concreto, não
   só desconto. */
.pix{display:flex;align-items:flex-start;gap:12px;margin:14px 0 0;padding:13px 15px;
  border:1px solid var(--borda);border-radius:var(--r-card);background:#F3FBF5}
.pix__selo{flex:0 0 auto;background:var(--verde-titulo);color:#fff;font-size:12px;
  font-weight:700;letter-spacing:.04em;padding:5px 9px;border-radius:2px;margin-top:1px}
.pix p{font-size:15px;line-height:1.45;margin:0}
.pix strong{display:block;color:var(--verde-titulo);font-weight:600;font-size:16px}
.pix__sub{display:block;color:var(--tinta);font-size:13.5px;margin-top:2px}
@media(max-width:420px){.pix{padding:11px 12px;gap:10px}.pix p{font-size:14px}
  .pix strong{font-size:15px}.pix__sub{font-size:12.5px}}