/* Donna Nutrition · design system das LPs (brandbook 2026) */

:root{
  --verde:#17996B;--verde-esc:#0E7A54;--noite:#10261C;--folha:#6FC680;--folha-claro:#A9E0B4;
  --creme:#F3EEE3;--creme2:#E9E2D1;--creme3:#DDD4BE;--amarelo:#DDE337;--amarelo-esc:#C9CF1F;
  --preto:#000;--ink:#101712;--cinza:#5E6A62;--linha:#D9D1BD;--branco:#fff;--vermelho:#D9342B;
  --r:28px;--r2:18px;--max:1120px;--gutter:max(16px,env(safe-area-inset-left,0px));
  --d:"Anton","Impact","Arial Narrow",sans-serif;--t:"Montserrat Alternates","Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
}
img{max-width:100%;height:auto}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--t);color:var(--ink);background:var(--creme);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.narrow{max-width:760px}

/* tipografia */
.d,h1,h2,h3.d{font-family:var(--d);font-weight:400;text-transform:uppercase;letter-spacing:0;line-height:.9}
h1{font-size:clamp(40px,10.5vw,76px);text-wrap:balance}
h2{font-size:clamp(30px,7.4vw,52px);line-height:.92;text-wrap:balance}
h3{font-size:19px;font-weight:800;line-height:1.25}
p{font-size:17px}
.lead{font-size:clamp(17px,4.4vw,20px);line-height:1.5}
.kicker{display:inline-flex;align-items:center;gap:8px;font:800 12px/1 var(--t);letter-spacing:.14em;text-transform:uppercase}
.kicker .br{width:12px;height:12px}
.y{color:var(--amarelo)}.v{color:var(--verde)}.c{color:var(--creme)}
.mark{background:linear-gradient(transparent 52%,var(--amarelo) 52%);padding:0 .06em}
.small{font-size:14px}.muted{color:var(--cinza)}
.center{text-align:center}

/* bandas */
.band{padding:52px 0;position:relative;overflow:hidden}
.band-verde{background:var(--verde);color:var(--creme)}
.band-noite{background:var(--noite);color:var(--creme)}
.band-creme{background:var(--creme);color:var(--ink)}
.band-creme2{background:var(--creme2);color:var(--ink)}
.band-amarelo{background:var(--amarelo);color:var(--preto)}
.band > .wrap{position:relative;z-index:1}
.blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:64px;padding:16px 26px;border:0;border-radius:999px;background:var(--verde);color:var(--creme);font:400 21px/1 var(--d);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;cursor:pointer;box-shadow:0 7px 0 var(--noite);transition:transform .08s,box-shadow .08s;text-align:center}
.btn:active{transform:translateY(5px);box-shadow:0 2px 0 var(--noite)}
.btn .ar{width:26px;height:26px;flex:none}
.btn.amarelo{background:var(--amarelo);color:var(--preto);box-shadow:0 7px 0 var(--noite)}
.btn.noite{background:var(--noite);color:var(--creme);box-shadow:0 7px 0 #000}
.btn.ghost{background:transparent;color:var(--noite);border:2.5px solid var(--noite);box-shadow:none;min-height:56px}
.btn.sm{min-height:50px;font-size:17px;padding:10px 18px;width:auto;box-shadow:0 5px 0 var(--noite)}
@media (min-width:760px){.btn{width:auto;min-width:320px}}

/* tarjas (pílulas) */
.tarja{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:9px 15px;font:700 13px/1 var(--t);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.tarja .br{width:12px;height:12px;flex:none}
.t-amarelo{background:var(--amarelo);color:var(--noite)}
.t-creme{background:var(--creme);color:var(--verde)}
.t-noite{background:var(--noite);color:var(--creme)}
.t-verde{background:var(--verde);color:var(--creme)}
.t-branco{background:#fff;color:var(--noite);box-shadow:0 6px 18px rgba(16,38,28,.12)}
.tarjas{display:flex;flex-wrap:wrap;gap:8px}

/* brilho (estrela de 4 pontas do brandbook) */
.br{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle}

/* cards */
.card{background:#fff;border-radius:var(--r);padding:22px}
.card-creme{background:var(--creme);border-radius:var(--r);padding:22px}
.card-noite{background:var(--noite);color:var(--creme);border-radius:var(--r);padding:24px}
.card-verde{background:var(--verde);color:var(--creme);border-radius:var(--r);padding:24px}

/* listas com brilho */
.lista{list-style:none;display:grid;gap:12px}
.lista li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45}
.lista li .br{margin-top:4px;color:var(--amarelo)}
.lista.ink li .br{color:var(--verde)}

/* marquee */
.marquee{background:var(--noite);color:var(--creme);font:400 15px/1 var(--d);letter-spacing:.06em;text-transform:uppercase;overflow:hidden;white-space:nowrap;padding:12px 0}
.marquee .trk{display:inline-flex;gap:0;animation:mq 28s linear infinite;will-change:transform}
.marquee span{display:inline-flex;align-items:center;gap:18px;padding-right:18px}
.marquee .br{width:11px;height:11px;color:var(--amarelo)}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee .trk{animation:none}}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.top .logo{height:34px;width:auto;color:var(--verde)}
.top .logo svg{height:100%;width:auto}
.top nav{display:none;gap:26px;font:700 14px/1 var(--t)}
.top nav a{text-decoration:none;color:var(--noite)}
@media (min-width:900px){.top nav{display:flex}}

/* faq */
details{background:#fff;border-radius:var(--r2);padding:0 18px;margin-bottom:10px}
summary{cursor:pointer;padding:16px 0;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font:400 26px/1 var(--d);color:var(--verde);flex:none}
details[open] summary:after{content:"–"}
details p{padding:0 0 16px;font-size:15px;line-height:1.55}

/* barra fixa mobile */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--creme);border-top:1px solid var(--linha);padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:12px;box-shadow:0 -10px 30px rgba(16,38,28,.12)}
.barra .pr{font:400 24px/1 var(--d);color:var(--noite)}
.barra .pr small{display:block;font:700 11px/1.2 var(--t);color:var(--cinza);margin-bottom:3px;text-transform:uppercase;letter-spacing:.06em}
.barra .btn{flex:1;min-height:52px;font-size:17px;box-shadow:0 5px 0 var(--noite);min-width:0}
@media (min-width:900px){.barra{display:none}}

footer{padding:28px 0 120px;font-size:12px;color:var(--cinza);text-align:center;line-height:1.6}
@media (min-width:900px){footer{padding-bottom:40px}}
.fade{animation:fade .35s ease both}@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}