/* Transparent Labs: a página é o rótulo do pote. Fundos e ritmo da home real (REFERENCIA.md); réguas de painel de fatos no lugar de costura. */

/* Instrument Sans: fonte do próprio site, OFL (substitui neue-haas-unica e Aeonik, licenciadas). Arquivos no padrão do fontes.mjs. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:local('Instrument Sans'),local('InstrumentSans-Regular'),url(fonts/instrument-sans-400.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:local('Instrument Sans Medium'),local('InstrumentSans-Medium'),url(fonts/instrument-sans-500.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:local('Instrument Sans SemiBold'),local('InstrumentSans-SemiBold'),url(fonts/instrument-sans-600.woff2) format('woff2')}

:root{
  /* primitivos medidos no CSS real (MARCA.json) */
  --tinta:#121212;
  --branco:#ffffff;
  --nevoa:#f8f9fb;
  --nevoa-funda:#e8ebf2;
  --marinho:#173446;
  --marinho-borda:#2a4756;
  --marinho-calmo:#b3bfc7;
  --gelo:#b3e0ff;
  --azul-estrela:#1b73b3;
  --cinza-texto:#676767;
  /* papéis */
  --tx:var(--tinta);
  --tx-2:#4a4f55;
  --tx-3:var(--cinza-texto);
  --acao:var(--tinta);
  --sobre-escuro:var(--branco);
  --linha-clara:#d9dde4;
  /* medidas */
  --max:1292px;
  --margem:clamp(16px,5.2vw,74px);
  --raio:6px;
  --ease:cubic-bezier(.23,1,.32,1);
  --fonte:'Instrument Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --t-h2:clamp(30px,1.6vw + 18px,42px);
  --t-h3:clamp(18px,.5vw + 15px,22px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--branco);color:var(--tx);font-family:var(--fonte);font-size:17px;line-height:1.55;font-weight:400}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
p{text-wrap:pretty}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:from-font}
a,button,label,input{touch-action:manipulation}
button{font:inherit;color:inherit}
::selection{background:var(--marinho);color:var(--branco)}
:focus-visible{outline:2px solid var(--azul-estrela);outline-offset:3px;border-radius:2px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- casca do pacote ---------- */
.pular{position:absolute;left:12px;top:12px;z-index:50;background:var(--tinta);color:var(--branco);padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:500;transform:translateY(-200%);transition:transform .2s var(--ease)}
.pular:focus{transform:none}
.rascunho{background:var(--marinho);color:var(--branco);text-align:center;font-size:14px;font-weight:500;padding:10px var(--margem);line-height:1.4}
.pacote{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px var(--margem);background:var(--branco);border-bottom:1px solid var(--nevoa-funda)}
.pacote-abas{display:flex;gap:4px;flex-wrap:wrap;min-width:0}
.pacote-abas a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;color:var(--tinta);white-space:nowrap;transition:background-color .16s ease}
.pacote-abas a[aria-current="page"]{background:var(--nevoa);box-shadow:inset 0 0 0 1px var(--tinta)}
.pacote-abas .curto{display:none}
.chat{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--tinta);color:var(--branco);font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color .16s ease,transform .16s var(--ease)}
.chat:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .pacote-abas a:hover{background:var(--nevoa)}
  .chat:hover{background:#2c2c2c}
}

/* ---------- estrutura comum ---------- */
main > section{position:relative;overflow-x:clip}
.largura{width:min(100% - 2*var(--margem),var(--max));margin-inline:auto}
section h2{font-size:var(--t-h2)}
section h3{font-size:var(--t-h3)}

/* réguas de painel de fatos: a passagem entre seções */
.regua{background:var(--tinta);transform-origin:left center}
.regua-grossa{height:10px}
.regua-media{height:4px}
.regua-fina{height:1px}

/* botões-pílula da marca */
.pilula{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:999px;font-size:16px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color .18s ease,color .18s ease,transform .16s var(--ease)}
.pilula:active{transform:scale(.97)}
.pilula-escura{background:var(--tinta);color:var(--branco)}
.pilula-contorno{box-shadow:inset 0 0 0 1.5px var(--tinta);color:var(--tinta);background:transparent}
.pilula-clara{background:var(--branco);color:var(--tinta)}
.pilula-contorno-clara{box-shadow:inset 0 0 0 1.5px var(--branco);color:var(--branco)}
@media (hover:hover) and (pointer:fine){
  .pilula-escura:hover{background:#2c2c2c}
  .pilula-contorno:hover{background:var(--tinta);color:var(--branco)}
  .pilula-clara:hover{background:var(--nevoa-funda)}
  .pilula-contorno-clara:hover{background:var(--branco);color:var(--tinta)}
}
.link-seta{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:500;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px;min-height:32px}
.link-seta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
@media (hover:hover) and (pointer:fine){.link-seta:hover svg{transform:translateX(3px)}}
.link-claro{color:var(--gelo)}
.valor{font-variant-numeric:tabular-nums;font-weight:600}
.estrelas{width:90px;height:16px;fill:var(--azul-estrela)}
.estrelas-claras{fill:var(--gelo)}

/* ---------- 1. painel frontal (hero) ---------- */
#rotulo{background-color:var(--marinho);color:var(--sobre-escuro);min-height:clamp(600px,84svh,820px);display:grid;align-items:center;isolation:isolate}
.rotulo-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 50%;z-index:-2}
/* película escura: a mesma que a marca usa no hero do celular (--sb-mobile-overlay-gradient) */
.rotulo-pelicula{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(23,52,70,.92) 0%,rgba(23,52,70,.84) 50%,rgba(23,52,70,.22) 76%,rgba(23,52,70,0) 100%)}
.rotulo-texto{padding-block:72px}
.rotulo-texto > *{max-width:620px}
.rotulo-prova{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:500;margin-bottom:22px}
.rotulo-prova .ico{width:28px;height:28px}
#rotulo h1{font-size:clamp(40px,3.4vw + 14px,66px);letter-spacing:-.03em;line-height:1.02;font-weight:500}
.rotulo-sub{font-size:clamp(17px,.4vw + 15px,20px);margin-top:22px;line-height:1.5}
.rotulo-botoes{display:grid;gap:12px;width:min(100%,360px);margin-top:34px}
.rotulo-tagline{margin-top:26px;font-size:14px;color:var(--nevoa-funda);letter-spacing:.01em}

/* ---------- 2. selos ---------- */
#selos{background-color:var(--nevoa);padding-block:22px}
.selos-lista{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.selo{display:flex;align-items:center;gap:14px;font-size:16px;font-weight:500;line-height:1.3}
.selo .ico{width:44px;height:44px;padding:9px;border-radius:50%;box-shadow:inset 0 0 0 1px #cfd5de;background:var(--branco)}

/* ---------- 3. Supplement Facts ---------- */
#painel{padding-block:96px 112px}
.painel-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4.4vw,72px);margin-top:48px;align-items:start}
.pote{position:sticky;top:24px;background:var(--nevoa);border-radius:var(--raio);padding:28px}
.pote-foto{aspect-ratio:1;max-width:460px;margin-inline:auto}
.pote-foto img{width:100%;height:100%;object-fit:contain}
.pote-nome{font-size:28px!important;margin-top:12px}
.pote-nota{color:var(--tx-2);margin-top:8px;font-size:16px}
.pote-estrelas{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:14px;color:var(--tx-3)}
.pote-preco{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--linha-clara)}
.pote-preco .valor{font-size:24px}
.pote-preco .variante{font-size:14px;color:var(--tx-3);white-space:nowrap}
.pote-sabores{font-size:14px;color:var(--tx-2);margin-top:12px}

.fatos{border:2px solid var(--tinta);padding:24px clamp(18px,2.4vw,34px) 28px;background:var(--branco)}
.fatos-titulo{font-size:clamp(42px,3.6vw + 8px,68px)!important;font-weight:600!important;letter-spacing:-.04em!important;line-height:.95!important}
.fatos-sub{font-size:15px;margin-top:10px;color:var(--tx-2)}
.regua-fatos{background:var(--tinta);transform-origin:left center;margin-block:12px}
.regua-fatos-10{height:10px}
.regua-fatos-4{height:4px;margin-top:8px}
.fatos-cab{display:flex;justify-content:space-between;gap:16px;font-size:14px;font-weight:600}
.fatos-cab span + span{font-weight:400;color:var(--tx-3)}
.dose{border-bottom:1px solid var(--tinta)}
.dose-linha{display:grid;grid-template-columns:minmax(0,1fr) auto 22px;align-items:center;gap:16px;width:100%;padding:16px 4px;border:0;background:none;text-align:left;cursor:pointer;font-size:18px;line-height:1.3;transition:background-color .16s ease}
.dose-nome{font-weight:600}
.dose-qtd{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.dose-seta{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .24s var(--ease)}
.dose.aberta .dose-seta{transform:rotate(180deg)}
.dose-texto{padding:0 4px 20px;font-size:16px;color:var(--tx-2);display:grid;gap:10px;max-width:66ch}
.com-js .dose:not(.aberta) .dose-texto{display:none}
@media (hover:hover) and (pointer:fine){.dose-linha:hover{background:var(--nevoa)}}
.fatos-pe{font-size:15px;color:var(--tx-2);margin-top:12px}

/* ---------- 4. isolado ---------- */
#isolado{padding-block:88px}
.isolado-cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.4vw,72px);align-items:end;margin-top:40px}
.isolado-cab h2{font-size:clamp(32px,2.2vw + 14px,48px)}
.isolado-cab h3{margin-bottom:10px}
.isolado-cab p{color:var(--tx-2)}
.tabela-rolo{margin-top:48px;overflow-x:auto}
.tabela-rotulo{width:100%;min-width:620px;border-collapse:collapse;border-top:10px solid var(--tinta);border-bottom:4px solid var(--tinta);font-variant-numeric:tabular-nums}
.tabela-rotulo th,.tabela-rotulo td{padding:18px 16px;text-align:left;border-bottom:1px solid var(--tinta);vertical-align:top}
.tabela-rotulo thead th{font-size:15px;font-weight:600}
.tabela-rotulo tbody th{font-weight:600;font-size:16px;width:22%}
.tabela-rotulo td{font-size:18px}
.tabela-rotulo td:last-child,.tabela-rotulo thead th:last-child{background:var(--nevoa);font-weight:500}
.isolado-notas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:40px;font-size:16px;color:var(--tx-2)}
.isolado-notas p:first-child{font-size:20px;color:var(--tx);font-weight:500;line-height:1.35}

/* ---------- 5. limpo ---------- */
#limpo{padding-block:72px 96px}
.limpo-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4.4vw,72px);margin-top:40px;align-items:center}
.limpo-lista h2{margin-bottom:28px;max-width:12ch}
.itens-finos li{display:flex;gap:14px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--linha-clara);font-size:19px;line-height:1.4}
.itens-finos li:first-child{border-top:1px solid var(--linha-clara)}
.itens-finos a{color:var(--azul-estrela);text-decoration:underline}
.limpo-pote{background:var(--nevoa);border-radius:var(--raio);padding:clamp(20px,3vw,40px)}
.limpo-pote img{width:100%;max-width:600px;margin-inline:auto;aspect-ratio:1;object-fit:contain}
.limpo-pote figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:12px;font-size:15px;color:var(--tx-3)}
.limpo-pote figcaption strong{font-size:19px;font-weight:500;color:var(--tx);margin-right:auto}
.limpo-textos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4.4vw,72px);margin-top:64px;padding-top:40px;border-top:1px solid var(--linha-clara)}
.limpo-textos h3{margin-bottom:12px}
.limpo-textos p{color:var(--tx-2);font-size:16px}
.limpo-textos p + p{margin-top:12px}

/* ---------- 6. modo de uso ---------- */
#modo-de-uso{padding-block:72px 88px}
.uso-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.4vw,72px);margin-top:40px;align-items:start}
.uso-foto{position:sticky;top:24px;border-radius:var(--raio);overflow:hidden}
.uso-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:40% 50%}
.uso-bloco{margin-top:28px;padding-top:24px;border-top:4px solid var(--tinta)}
.uso-bloco h3{margin-bottom:12px}
.uso-bloco p{font-size:16px;color:var(--tx-2)}
.uso-bloco p + p{margin-top:10px}

/* ---------- 7. alérgenos ---------- */
#alergenos{padding-block:8px 96px}
.aviso{border:2px solid var(--tinta);background-color:var(--nevoa);padding:clamp(22px,3vw,36px)}
.aviso h2{font-size:clamp(26px,1vw + 18px,32px)}
.aviso-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:22px}
.aviso-item{border-top:1px solid var(--tinta);padding-top:16px}
.aviso-item h3{font-size:17px!important;font-weight:600;line-height:1.3;margin-bottom:10px}
.aviso-item p{font-size:15px;color:var(--tx-2)}
.aviso-item p + p{margin-top:10px}

/* ---------- 8. ensaios (faixa marinho) ---------- */
#ensaios{background-color:var(--marinho);color:var(--sobre-escuro);padding-block:96px}
#ensaios :focus-visible{outline-color:var(--gelo)}
.ensaios-grade{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,4.4vw,72px)}
.ensaios-titulo p{color:var(--marinho-calmo);margin-top:16px;font-size:16px}
.ensaios-titulo .link-seta{margin-top:24px}
.ensaios-tipos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.ensaio-regua{display:block;height:1px;background:var(--marinho-calmo);transform-origin:left center;margin-bottom:22px}
.ensaios-tipos h3{font-size:clamp(20px,.8vw + 14px,26px)!important}
.ensaios-tipos p{color:var(--marinho-calmo);font-size:15px;margin-top:10px}
.ensaios-baixo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:72px;padding-top:36px;border-top:1px solid var(--marinho-borda);font-size:15px;color:var(--marinho-calmo)}
.ensaios-baixo h3{color:var(--branco);font-size:18px!important;margin-bottom:10px}
.ensaios-baixo p + p{margin-top:10px}

/* ---------- 9. prateleira ---------- */
#prateleira{padding-block:88px 104px}
.prateleira-cab{position:sticky;top:0;z-index:4;background:var(--branco);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-block:28px 18px;border-bottom:1px solid var(--linha-clara)}
.prateleira-abas{display:grid;grid-template-columns:repeat(4,auto);gap:8px}
.prateleira-abas a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px #9aa3ad;text-decoration:none;font-size:15px;white-space:nowrap;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
.prateleira-abas a[aria-current="true"]{background:var(--tinta);color:var(--branco);box-shadow:inset 0 0 0 1px var(--tinta)}
@media (hover:hover) and (pointer:fine){.prateleira-abas a:not([aria-current="true"]):hover{box-shadow:inset 0 0 0 1px var(--tinta)}}
.prateleira-grupo{padding-top:44px;scroll-margin-top:96px}
.grupo-titulo{font-size:22px!important;display:flex;align-items:center;gap:16px;margin-bottom:22px}
.grupo-titulo::after{content:"";flex:1;height:1px;background:var(--tinta)}
.grupo-nota{font-size:15px;color:var(--tx-2);max-width:92ch;margin:-6px 0 22px}
.frascos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.frasco{display:flex;flex-direction:column;background:var(--nevoa);border-radius:var(--raio);padding:18px 18px 20px;transition:background-color .2s ease}
@media (hover:hover) and (pointer:fine){.frasco:hover{background:var(--nevoa-funda)}}
.frasco-foto{aspect-ratio:4/3;display:grid;place-items:center}
.frasco-foto img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease)}
@media (hover:hover) and (pointer:fine){.frasco:hover .frasco-foto img{transform:scale(1.03)}}
.frasco h4{font-size:19px;margin-top:14px;line-height:1.25}
.frasco-nota{font-size:15px;color:var(--tx-2);margin-top:8px;line-height:1.45}
.frasco-meta{display:grid;gap:2px;margin-top:12px;font-size:13px;color:var(--tx-3)}
.frasco-preco{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px}
.frasco-preco .valor{font-size:20px}
.frasco-preco .variante{font-size:13px;color:var(--tx-3);text-align:right}
.frasco-meta{margin-bottom:4px}

/* ---------- 10. metas ---------- */
#metas{background-color:var(--nevoa);padding-block:104px}
.metas-grade{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,4.4vw,72px);align-items:start}
.metas-titulo{position:sticky;top:32px}
.metas-titulo p{font-size:19px;color:var(--tx-2);margin-top:16px;max-width:30ch}
.metas-cartoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.meta{background:var(--branco);border-radius:var(--raio);overflow:hidden;display:flex;flex-direction:column}
.meta h3{padding:20px 20px 0}
.meta h3 span{color:var(--tx-3);font-weight:400;font-size:.8em}
.meta > p{padding:4px 20px 16px;font-size:15px;color:var(--tx-2)}
.meta-foto img{width:100%;aspect-ratio:3/2;object-fit:cover}
.meta-potes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--nevoa-funda);margin-top:auto}
.meta-potes li{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:14px;line-height:1.3}
.meta-potes li + li{border-left:1px solid var(--nevoa-funda)}
.meta-potes img{width:56px;height:56px;flex:none;object-fit:contain;background:var(--nevoa);border-radius:4px}

/* ---------- 11. vozes (faixa marinho) ---------- */
#vozes{background-color:var(--marinho);color:var(--sobre-escuro);padding-block:72px}
#vozes :focus-visible{outline-color:var(--gelo)}
.vozes-grade{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,64px);align-items:center}
.vozes-titulo h2{margin-top:14px}
.vozes-titulo p{color:var(--marinho-calmo);margin-top:10px}
.pausa{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:22px;padding:0 18px;border-radius:999px;border:1px solid var(--marinho-calmo);background:transparent;cursor:pointer;font-size:14px;font-weight:500;transition:background-color .16s ease}
.pausa svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pausa .ic-tocar{display:none}
.pausa[aria-pressed="true"] .ic-pausa{display:none}
.pausa[aria-pressed="true"] .ic-tocar{display:block}
.sem-js .pausa{display:none}
@media (hover:hover) and (pointer:fine){.pausa:hover{background:var(--marinho-borda)}}
.vozes-janela{overflow-x:auto;scroll-snap-type:x mandatory;min-width:0}
.vozes-trilha{display:flex;gap:20px;width:max-content}
.voz{width:340px;flex:none;scroll-snap-align:start;border:1px solid var(--marinho-borda);border-radius:var(--raio);padding:24px;display:flex;flex-direction:column;gap:10px}
.voz-quem{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.voz-inicial{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--azul-estrela);font-size:14px;font-weight:600}
.voz h3{font-size:19px!important}
.voz blockquote{font-size:15px;line-height:1.5}
.voz-produto{margin-top:auto;font-size:14px;color:var(--gelo)}
.com-js .vozes-janela.anda{overflow:hidden;scroll-snap-type:none}
.com-js .vozes-janela.anda .vozes-trilha{animation:desliza 64s linear infinite}
.com-js .vozes-janela.anda.parada .vozes-trilha{animation-play-state:paused}
@keyframes desliza{to{transform:translateX(calc(-50% - 10px))}}

/* ---------- 12. parceiros ---------- */
#parceiros{padding-block:96px}
.parceiros-cab{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,4.4vw,72px);margin-top:40px}
.parceiros-cab > div:first-child p{color:var(--tx-2);margin-top:14px;font-size:18px}
.citacoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.citacao blockquote p{font-size:clamp(19px,.6vw + 15px,23px);font-weight:500;line-height:1.38;letter-spacing:-.01em}
.citacao figcaption{display:grid;gap:2px;margin-top:18px;font-size:14px;color:var(--tx-3)}
.citacao figcaption strong{font-size:17px;font-weight:500;color:var(--tx)}
.elenco{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,3vw,40px);margin-top:72px;border-top:4px solid var(--tinta)}
.elenco li{display:grid;gap:2px;padding:18px 0;border-bottom:1px solid var(--linha-clara)}
.elenco strong{font-size:18px;font-weight:500}
.elenco span{font-size:14px;color:var(--tx-3)}

/* ---------- 13. história ---------- */
#historia{padding-block:96px 112px}
#historia .historia-grande{font-size:clamp(38px,5.2vw,88px);font-weight:500;letter-spacing:-.04em;line-height:1.02;margin-top:32px;max-width:23ch;text-wrap:balance}
.historia-rotulo{font-size:18px!important;font-weight:600;margin-bottom:10px}
.historia-colunas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:56px;align-items:start}
.historia-colunas p{font-size:18px;color:var(--tx-2)}
.historia-colunas .historia-fecho{font-size:clamp(22px,.8vw + 16px,28px);font-weight:500;color:var(--tx);line-height:1.2;border-top:4px solid var(--tinta);padding-top:14px}

/* ---------- 14. linha ---------- */
#linha{background-color:var(--nevoa);padding-block:96px}
.linha-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px}
.linha-cab h2{font-size:clamp(34px,3.6vw + 6px,64px)!important;max-width:20ch;letter-spacing:-.03em}
.linha-potes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:48px}
.linha-potes li{background:var(--branco);border-radius:var(--raio);padding:14px 14px 18px;display:flex;flex-direction:column;gap:4px}
.linha-potes figure{aspect-ratio:1}
.linha-potes img{width:100%;height:100%;object-fit:contain}
.linha-potes h3{font-size:15px!important;font-weight:600;line-height:1.3;margin-top:8px}
.linha-potes p{font-size:13px;color:var(--tx-3)}
.linha-potes .valor{font-size:17px;color:var(--tx);margin-top:auto;padding-top:6px}

/* ---------- 15. assinatura ---------- */
#assinatura{padding-block:88px 96px}
.assinatura-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4.4vw,72px);margin-top:40px;align-items:start}
.assinatura-passos > p{color:var(--tx-2);margin-top:14px;font-size:18px}
.passos{margin-top:28px;border-top:1px solid var(--tinta)}
.passos li{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--tinta);font-size:19px}
.passo-n{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--tinta);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.duas-formas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.forma{display:flex;flex-direction:column;gap:8px;border:1px solid var(--linha-clara);border-radius:8px;padding:26px}
.forma .pilula{margin-top:auto}
.forma-assina{border:2px solid var(--tinta);background:var(--nevoa)}
.forma h3{font-size:20px!important}
.forma-produto{font-weight:500;margin-top:6px}
.forma-variante{font-size:14px;color:var(--tx-3)}
.forma-preco{font-size:44px;letter-spacing:-.02em;margin-block:10px 18px}
.forma-oferta strong{display:block;font-size:22px;font-weight:600;line-height:1.2}
.forma-oferta span{font-size:14px;color:var(--tx-3)}
.frequencia{border:0;padding:0;margin:12px 0 0;min-width:0}
.frequencia legend{font-size:14px;font-weight:600;padding:0;margin-bottom:10px}
.frequencia-opcoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.frequencia label{position:relative;display:block;cursor:pointer}
.frequencia input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.frequencia label span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--tinta);font-size:14px;white-space:nowrap;background:var(--branco);transition:background-color .16s ease,color .16s ease}
.frequencia input:checked + span{background:var(--tinta);color:var(--branco)}
.frequencia input:focus-visible + span{outline:2px solid var(--azul-estrela);outline-offset:3px}
.forma-escolha{font-size:15px;margin-top:10px}
.forma-escolha output{font-weight:600}
.forma-lista{margin:6px 0 18px;font-size:15px;color:var(--tx-2)}
.forma-lista li{padding:6px 0;border-bottom:1px solid var(--linha-clara)}

/* ---------- 16. envio ---------- */
#envio{padding-block:72px 96px}
.envio-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4.4vw,72px);margin-top:40px;align-items:start}
.envio-texto > p{color:var(--tx-2);margin-top:14px;font-size:16px}
.envio-texto .envio-destaque{font-size:24px;font-weight:500;color:var(--tx);line-height:1.3;margin-top:22px}
.envio-tabelas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.prazo h3{font-size:18px!important;font-weight:600;padding-bottom:10px;border-bottom:4px solid var(--tinta)}
.prazo li{padding:12px 0;border-bottom:1px solid var(--tinta);font-size:15px;font-variant-numeric:tabular-nums}
.garantia{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);gap:clamp(20px,3vw,40px);margin-top:56px;padding-top:22px;border-top:10px solid var(--tinta)}
.garantia h3{font-size:22px!important}
.garantia p{font-size:15px;color:var(--tx-2)}

/* ---------- 17. dúvidas ---------- */
#duvidas{padding-block:88px 96px}
.duvidas-grade{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,4.4vw,72px);align-items:start}
.duvidas-titulo{position:sticky;top:32px;border-top:10px solid var(--tinta);padding-top:24px}
.duvidas-titulo p{color:var(--tx-2);margin-top:14px;font-size:16px;max-width:34ch}
.perguntas{border-top:4px solid var(--tinta)}
.pergunta{padding:20px 0;border-bottom:1px solid var(--tinta)}
.pergunta dt{font-size:19px;font-weight:500;line-height:1.35}
.pergunta dd{margin:8px 0 0;font-size:16px;color:var(--tx-2);max-width:72ch}

/* ---------- 18. aprender ---------- */
#aprender{background-color:var(--nevoa);padding-block:96px}
.aprender-grade{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:start}
.aprender-h2{border-top:10px solid var(--tinta);padding-top:18px}
@media (max-width:900px){.aprender-coluna{order:-1}.artigo-grande{order:0}}
.artigo{background:var(--branco);border-radius:var(--raio);overflow:hidden}
.artigo-foto img{width:100%;aspect-ratio:16/9;object-fit:cover}
.artigo-corpo,.aprender-coluna .artigo{padding:26px 28px 28px}
.artigo-data{font-size:14px;color:var(--tx-3)}
.artigo h3{margin-top:6px;font-size:clamp(20px,.8vw + 15px,26px)!important}
.artigo ul{margin-top:16px}
.artigo li{padding:12px 0 12px 22px;border-top:1px solid var(--nevoa-funda);font-size:15px;color:var(--tx-2);position:relative}
.artigo li::before{content:"";position:absolute;left:2px;top:21px;width:10px;height:2px;background:var(--tinta)}
.aprender-coluna{display:grid;gap:24px}
.autor{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:start;background:var(--branco);border-radius:var(--raio);padding:24px}
.autor-foto{width:96px;height:96px;border-radius:50%;background:var(--nevoa);overflow:hidden}
.autor-foto img{width:100%;height:100%;object-fit:cover}
.autor h3{font-size:17px!important;font-weight:600}
.autor p{font-size:14px;color:var(--tx-2);margin-top:8px}
.escritores{display:grid;gap:12px;font-size:14px;color:var(--tx-2)}
.escritores p{padding-top:12px;border-top:1px solid #cfd5de}
.escritores .link-seta{justify-self:start;color:var(--tx);margin-top:4px}

/* ---------- 19. distributed by ---------- */
#distribuido{padding-block:88px 72px}
.distribuido-grade{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4.4vw,72px);margin-top:40px;align-items:center}
.distribuido-texto h2{font-size:clamp(36px,3vw + 10px,60px)!important;letter-spacing:-.03em}
.distribuido-texto > p{color:var(--tx-2);margin-top:14px;font-size:17px;max-width:62ch}
.distribuido-texto h3{margin-top:30px}
.distribuido-botoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.distribuido-potes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.distribuido-potes li{background:var(--nevoa);border-radius:var(--raio);padding:18px}
.distribuido-potes figure{aspect-ratio:1}
.distribuido-potes img{width:100%;height:100%;object-fit:contain}
.distribuido-potes h3{font-size:17px!important;margin-top:10px}
.distribuido-potes p{font-size:14px;color:var(--tx-3);margin-top:2px}
.distribuido-linha{display:flex;flex-wrap:wrap;gap:6px 36px;margin-top:72px;padding-top:14px;border-top:4px solid var(--tinta);font-size:14px;color:var(--tx-2)}

/* ---------- rodapé do pacote ---------- */
.rodape{background:var(--marinho);color:var(--branco);padding:48px var(--margem) 40px;display:grid;gap:16px;justify-items:start}
.rodape p{max-width:72ch;font-size:15px}
.rodape-chat{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--branco);text-decoration:none;font-weight:500;transition:background-color .16s ease,color .16s ease}
@media (hover:hover) and (pointer:fine){.rodape-chat:hover{background:var(--branco);color:var(--marinho)}}
.rodape .rodape-fontes{font-size:13px;color:var(--marinho-calmo)}
.rodape :focus-visible{outline-color:var(--gelo)}

/* ---------- movimento (estado escondido só sob .com-js) ---------- */
.com-js .entra{animation:entra .9s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + 120ms)}
.com-js .rotulo-prova{animation:entra .9s var(--ease) both;animation-delay:60ms}
.com-js .rotulo-foto{animation:foto 1.6s var(--ease) both}
@keyframes entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes foto{from{transform:scale(1.05)}to{transform:none}}

.com-js .rv{transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.com-js .rv-sobe:not(.in){opacity:0;transform:translateY(18px)}
.com-js .rv-escala:not(.in){opacity:0;transform:scale(.96)}
.com-js .rv-palavra:not(.in){opacity:0;transform:translateY(24px);filter:blur(6px)}
.com-js .rv-regua{transition:transform 1.1s var(--ease)}
.com-js .rv-regua:not(.in){transform:scaleX(0)}
.com-js .rv-cortina{transition:clip-path 1.1s var(--ease)}
.com-js .rv-cortina:not(.in){clip-path:inset(0 0 100% 0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .com-js .entra,.com-js .rotulo-prova{animation:entra-calmo .4s ease both}
  .com-js .rotulo-foto{animation:none}
  .com-js .rv{transition:opacity .4s ease;transition-delay:0s}
  .com-js .rv:not(.in){transform:none;filter:none;clip-path:none}
  .com-js .rv-regua:not(.in),.com-js .rv-cortina:not(.in){opacity:0}
  .com-js .vozes-janela.anda .vozes-trilha{animation:none}
  .frasco-foto img,.link-seta svg,.dose-seta{transition:none}
}
@keyframes entra-calmo{from{opacity:0}to{opacity:1}}

/* ---------- larguras ---------- */
@media (max-width:1120px){
  .linha-potes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .frascos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ensaios-grade,.vozes-grade{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .painel-grade,.isolado-cab,.limpo-grade,.uso-grade,.metas-grade,.parceiros-cab,.assinatura-grade,.envio-grade,.duvidas-grade,.aprender-grade,.distribuido-grade{grid-template-columns:minmax(0,1fr)}
  .pote,.uso-foto,.metas-titulo,.duvidas-titulo{position:static}
  .pote{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:4px 20px;align-items:start}
  .pote-foto{grid-row:span 5}
  .pote-nome{margin-top:0}
  .isolado-notas,.historia-colunas,.ensaios-baixo,.garantia{grid-template-columns:minmax(0,1fr)}
  .aviso-grade{grid-template-columns:minmax(0,1fr)}
  .uso-foto img{aspect-ratio:3/2}
  .selos-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .elenco{grid-template-columns:repeat(2,minmax(0,1fr))}
  .elenco li:last-child{grid-column:1 / -1}
}
@media (max-width:760px){
  .rotulo-pelicula{background:linear-gradient(180deg,rgba(23,52,70,.74) 0%,rgba(23,52,70,.8) 55%,rgba(23,52,70,.92) 100%)}
  .rotulo-foto{object-position:62% 50%}
  .rotulo-texto{padding-block:48px 56px}
  .rotulo-botoes{width:100%}
  .metas-cartoes,.citacoes,.duas-formas,.envio-tabelas{grid-template-columns:minmax(0,1fr)}
  .ensaios-tipos{grid-template-columns:minmax(0,1fr)}
  .prateleira-cab{position:static}
  .prateleira-abas{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .prateleira-abas a{padding:0 8px;font-size:14px}
  .elenco{grid-template-columns:minmax(0,1fr)}
  .elenco li:last-child{grid-column:auto}
  .linha-potes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .voz{width:280px}
  #painel,#isolado,#limpo,#modo-de-uso,#ensaios,#prateleira,#metas,#parceiros,#historia,#linha,#assinatura,#envio,#duvidas,#aprender,#distribuido{padding-block:64px}
  #alergenos{padding-block:0 64px}
}
@media (max-width:560px){
  body{font-size:16px}
  .selos-lista{gap:16px 12px}
  .selo{flex-direction:column;text-align:center;font-size:15px}
  .frascos{grid-template-columns:minmax(0,1fr);gap:14px}
  .frasco{display:grid;grid-template-columns:110px minmax(0,1fr);column-gap:16px;padding:14px}
  .frasco-foto{grid-row:span 5;aspect-ratio:1;align-self:start}
  .frasco h4{margin-top:0;font-size:17px}
  .frasco-preco{padding-top:10px}
  .pote{grid-template-columns:minmax(0,1fr)}
  .pote-foto{grid-row:auto;max-width:260px}
  .dose-linha{font-size:16px;gap:10px}
  .meta-potes li{padding:10px 12px;font-size:13px}
  .meta-potes img{width:44px;height:44px}
  .autor{grid-template-columns:72px minmax(0,1fr)}
  .autor-foto{width:72px;height:72px}
  .distribuido-botoes .pilula{width:100%}
  .forma-preco{font-size:38px}
  .fatos-cab span + span{display:none}
}

/* Rodada 2b (Sensei): corpo da landing >= 16 px em 1440 e >= 15 px em 390; cabeçalho de #linha sem buraco. So CSS. */
@media (min-width:900px){
  #alergenos p,#aprender p,#aprender li,#vozes p,#prateleira p.frasco-nota,#prateleira p.grupo-nota,#ensaios p,#painel p.fatos-pe,#painel p.fatos-sub,#envio p,#envio li{font-size:16px}
}
@media (max-width:899px){
  #aprender p,#aprender li,#painel p.pote-sabores,#distribuido p{font-size:15px}
}
.linha-cab h2{max-width:none!important;flex:1 1 0;min-width:min(100%,520px)}@media (min-width:901px){.aprender-grade .artigo-grande{position:sticky;top:24px}}