/* =====================================================================
   PÁGINA INICIAL · rodada de 26/09/2026 (pacote 1 do brief)
   Carregado DEPOIS do marca-2026.css, só na página inicial.

   Movimento pela regra da casa (sem-cara-de-ia): transição de interface
   em 240ms com saída suave, nunca ease-in, nunca "transition: all".
   Os dois movimentos contínuos (cápsulas flutuando e a palavra que gira)
   param com "reduzir movimento" do aparelho e com ?quieto=1 na URL.
   ===================================================================== */
:root{--saida:cubic-bezier(.23,1,.32,1)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- cabeçalho: Instagram monocromático, sempre com o @ ---------- */
.nav-dir{display:flex;align-items:center;gap:18px}
.ig-cab{display:inline-flex;align-items:center;gap:7px;min-height:44px;color:#1F6B5A;font-size:14px;font-weight:600;text-decoration:none}
.ig-cab:hover span{text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){.ig-cab span{display:none}.ig-cab{min-width:44px;justify-content:center}}

/* ---------- topo ---------- */
.hero h1{font-size:clamp(2.4rem,5vw,4.1rem)}
/* a palavra que gira mora numa linha só dela: trocar "lidera" por
   "dá feedback" não empurra o resto do título de lugar */
/* a troca DESLIZA dentro de uma janela recortada, sem esmaecer: a letra
   fica sempre na cor cheia, então o contraste nunca cai no meio da troca */
.gira-linha{display:block;overflow:clip;overflow-clip-margin:.12em;padding-bottom:.06em}
.gira{display:inline-block;transition:transform 240ms var(--saida)}
.gira.sai{transform:translateY(-110%)}
.gira.entra{transform:translateY(110%);transition:none}
.hero .btn--grande{font-size:18px;padding:19px 32px}
.hero .btn--grande:active{transform:scale(.97)}

/* cápsulas desenhadas: jade e rosê meio a meio, inclinadas -35°,
   posição escolhida à mão. A grande leva o degradê da dose. */
.capsulas{position:absolute;inset:0;pointer-events:none;z-index:0}
.cap{position:absolute;display:block;animation:flutua var(--t,7s) ease-in-out var(--d,0s) infinite alternate}
.cap svg{display:block;width:100%;height:auto;transform:rotate(-35deg)}
@keyframes flutua{from{transform:translateY(0)}to{transform:translateY(var(--y,-8px))}}
.cap--g{width:150px;top:1.5%;right:1.5%;--t:8.5s;--y:-10px}
.cap--1{width:64px;top:9%;left:47%;--t:6.4s;--d:-2s;--y:-7px;opacity:.9}
.cap--2{width:68px;bottom:2%;left:54%;--t:7.6s;--d:-4s;--y:-9px;opacity:.85}
.cap--3{width:46px;top:52%;left:1.5%;--t:6.8s;--d:-1s;--y:-6px;opacity:.7}
.cap--4{width:58px;bottom:9%;right:2%;--t:9s;--d:-3s;--y:-8px;opacity:.8}
@media(max-width:860px){
  /* no celular o único vão sem texto é a faixa acima do rótulo e as margens */
  .cap--g{width:78px;top:6px;right:5%}
  .cap--1{width:40px;top:22px;left:52%}
  .cap--2{display:none}
  .cap--3{top:auto;bottom:1.2%;left:5%}
  .cap--4{display:none}
}

/* ---------- faixa de quebra entre seções: as cápsulas em opacidade baixa ---------- */
.quebra{height:56px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='56' viewBox='0 0 240 56'%3E%3Cg fill-opacity='.09' transform='rotate(-35 40 28)'%3E%3Crect x='16' y='20' width='48' height='16' rx='8' fill='%23DBA4A4'/%3E%3Cpath d='M40 20h16a8 8 0 0 1 0 16H40z' fill='%2323806B'/%3E%3C/g%3E%3Cg fill-opacity='.08' transform='rotate(-35 160 30)'%3E%3Crect x='142' y='24' width='36' height='12' rx='6' fill='%23DBA4A4'/%3E%3Cpath d='M160 24h12a6 6 0 0 1 0 12H160z' fill='%2323806B'/%3E%3C/g%3E%3C/svg%3E") repeat-x center/240px 56px}

/* ---------- faixa dos 3 reels ---------- */
.reels{padding:64px 0 72px}
.reels h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin:18px 0 34px}
.reels-faixa{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:780px}
.reel{display:flex;flex-direction:column;gap:12px;color:var(--ink);text-decoration:none}
.reel-tela{display:block;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#16433A;box-shadow:0 18px 40px -26px rgba(20,35,31,.55);transition:transform 240ms var(--saida),box-shadow 240ms var(--saida)}
.reel-tela video{display:block;width:100%;height:100%;object-fit:cover}
.reel-frase{font-family:var(--serif);font-weight:700;font-size:18px;line-height:1.25;letter-spacing:-.015em}
.reel-ver{font-size:14px;font-weight:600;color:#1F6B5A;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#DBA4A4}
@media(hover:hover){
  .reel:hover .reel-tela{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(20,35,31,.6)}
  .reel:hover .reel-ver{color:#16433A;text-decoration-color:#16433A}
}
.reel:focus-visible,.ig-link:focus-visible,.ig-cab:focus-visible{outline:2px solid #1F6B5A;outline-offset:4px;border-radius:12px}
.ig-link{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:26px;color:#1F6B5A;font-size:16px;text-decoration:none}
.ig-link b{font-weight:700}
.ig-link:hover span{text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){
  /* no celular: rolagem de lado com encaixe, e a ponta esmaecida avisa que tem mais */
  .reels-faixa{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:0 24px 6px 0;margin-right:-16px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .reels-faixa::-webkit-scrollbar{display:none}
  .reel{flex:0 0 68%;scroll-snap-align:start}
}

/* ---------- últimos posts (só aparece quando a vitrine tem post) ---------- */
.posts{padding:0 0 72px}
.posts-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
.posts-grade iframe{display:block;width:100%;height:560px;border:0;border-radius:14px;background:#F3F6F4}
.posts-grade p{font-size:14px;color:#41615a;margin-top:8px}
@media(max-width:860px){.posts-grade{grid-template-columns:1fr;max-width:420px}}

/* ---------- a escada de produtos: grátis, R$ 19,90, clube, palestra ---------- */
.escada{padding:72px 0;border-top:var(--hairline)}
.escada h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin:18px 0 30px}
.degraus{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:d}
.degraus li{counter-increment:d}
.degraus a{position:relative;display:flex;flex-direction:column;gap:6px;height:100%;padding:22px 20px 20px;border-radius:18px;border:1px solid #E1EAE6;background:#fff;color:var(--ink);text-decoration:none;transition:transform 240ms var(--saida),border-color 240ms var(--saida),box-shadow 240ms var(--saida)}
.degraus a::before{content:"0" counter(d);font-family:var(--serif);font-weight:700;font-size:13px;color:#1F6B5A;letter-spacing:.06em}
.degraus .preco{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:-.02em;color:#16433A}
.degraus b{font-size:16.5px}
.degraus .o-que{font-size:14.5px;color:#41615a;line-height:1.45;flex:1}
.degraus .ir{font-size:14px;font-weight:700;color:#1F6B5A;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#DBA4A4}
.degraus li:nth-child(3) a{background:#16433A;border-color:#16433A;color:#fff}
.degraus li:nth-child(3) a::before,.degraus li:nth-child(3) .ir{color:#EBCF9C}
.degraus li:nth-child(3) .preco{color:#EBCF9C}
.degraus li:nth-child(3) .o-que{color:rgba(255,255,255,.84)}
@media(hover:hover){.degraus a:hover{transform:translateY(-4px);border-color:#9BCDBF;box-shadow:0 22px 40px -26px rgba(20,35,31,.45)}}
.degraus a:focus-visible{outline:2px solid #1F6B5A;outline-offset:4px}
@media(max-width:960px){.degraus{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.degraus{grid-template-columns:1fr}}

/* ---------- para empresas: a foto do palco com a cápsula como selo ---------- */
.palco{position:relative;max-width:360px}
.palco .arch{box-shadow:0 26px 60px -30px rgba(20,35,31,.5)}
.palco-selo{position:absolute;width:118px;right:-30px;bottom:38px;animation:flutua 7.8s ease-in-out -2s infinite alternate;--y:-8px}
.palco-selo svg{display:block;width:100%;height:auto;transform:rotate(-35deg)}
@media(max-width:860px){.palco{margin:0 auto}.palco-selo{right:-8px;width:96px}}

/* ---------- rodapé ---------- */
.ig-rod{display:inline-flex;align-items:center;gap:7px;color:#FFFFFF}
.ig-rod svg{flex:none}

/* ---------- barra fixa no celular: aparece depois do topo, some no fechamento ---------- */
.barra-teste{display:none}
@media(max-width:760px){
  .barra-teste{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:#16433A;box-shadow:0 -10px 30px -18px rgba(0,0,0,.5);transform:translateY(110%);transition:transform 240ms var(--saida)}
  .barra-teste.on{transform:none}
  .barra-teste .btn{width:100%;justify-content:center;background:#EBCF9C;color:#16332C;font-size:17px;padding:15px}
  .barra-teste .btn .dot{background:#16433A}
  footer{padding-bottom:104px}
}

/* ---------- parar tudo: aparelho pedindo menos movimento, ou ?quieto=1 ---------- */
html.quieto .cap,html.quieto .palco-selo,html.quieto .selo{animation:none!important}
@media (prefers-reduced-motion:reduce){.cap,.palco-selo,.selo{animation:none!important}}


/* ===== rodada 11/10/2026: Doses de Gestão com função, Entrar, ícones, cartão dominante ===== */
.entrar-cab{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:#1F6B5A;font-weight:700;font-size:15px;text-decoration:none}
.entrar-cab:hover{text-decoration:underline;text-underline-offset:4px}
.btn{min-height:44px}
.mini-dose{width:26px;height:auto;transform:rotate(-35deg);margin-right:8px;vertical-align:-3px}
.dor .num{display:inline-flex;align-items:center}
.dor--destaque{background:#16433A;border-color:#16433A;color:#fff}
.dor--destaque h3{color:#fff}
.dor--destaque p{color:rgba(255,255,255,.86)}
.dor--destaque .num{color:#EBCF9C!important}
@media(min-width:861px){.dor-grid{grid-template-columns:1.35fr 1fr 1fr}.dor--destaque h3{font-size:25px}}
.entrega .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.reels-faixa{grid-template-columns:repeat(4,1fr);max-width:none}
.reel-tela--mais{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;color:#EBCF9C;background:linear-gradient(160deg,#1C5246,#16433A)}
.reel-tela--mais b{font-family:var(--serif);font-size:20px;line-height:1.2;color:#fff}
.reel-tela--mais span{font-size:14px;color:#C9DED6}
@media(max-width:760px){.entrar-cab{font-size:14px;padding:0 2px}}


/* =====================================================================
   RODADA 12/10/2026: vidro, profundidade e cinética (mesma receita do /kit)
   - cor ATRÁS do vidro: pílulas borradas (rosê, manteiga, jade alegre),
     sempre dentro de uma seção com overflow cortando, nunca sobre rosto
   - painel de vidro sobre fundo escuro leva um véu de jade por baixo,
     pra o texto branco nunca cair abaixo de 4,5:1 em cima da mancha
   - movimento: 160 a 240ms, saída suave, sem "all", sem ease-in; só
     transform, opacity e cor. O fio de luz do botão é o único laço.
   ===================================================================== */

/* ---------- pílulas de cor ---------- */
.blob{position:absolute;display:block;border-radius:999px;transform:rotate(-35deg);filter:blur(40px);opacity:.55;pointer-events:none;z-index:0}
.blob--rose{background:#DBA4A4;opacity:.4}
.blob--manteiga{background:#EBCF9C;opacity:.42}
.blob--jade{background:#47A98F;opacity:.55}
.blob--suave{opacity:.3!important;filter:blur(52px)}
.hero>.blob,.final>.blob{z-index:0}
.hero .b1{width:560px;height:200px;top:-70px;right:4%}
.hero .b2{width:620px;height:220px;bottom:-90px;left:-120px}
.hero .b3{width:420px;height:150px;top:34%;left:40%}
.cred--prova{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,#F3F8F5)}
.cred--prova>.wrap,.dores>.wrap,.escada>.wrap,.b2b>.wrap,.produto>.wrap{position:relative;z-index:1}
.cred--prova .b1{width:520px;height:170px;top:-40px;left:-140px}
.cred--prova .b2{width:480px;height:160px;bottom:-40px;right:-120px}
.dores{position:relative;overflow:hidden}
.dores .b1{width:560px;height:190px;top:40px;right:-160px}
.dores .b2{width:520px;height:180px;bottom:-30px;left:-150px}
.dores .b3{width:420px;height:150px;top:46%;left:34%;opacity:.22}
.escada{position:relative;overflow:hidden}
.escada .b1{width:500px;height:170px;top:-30px;right:-100px}
.escada .b2{width:520px;height:170px;bottom:-50px;left:-140px}
.produto{position:relative;overflow:clip}   /* clip, não hidden: hidden mata o sticky do cartão de preço */
.produto .b1{width:560px;height:200px;top:90px;right:-170px}
.produto .b2{width:520px;height:190px;bottom:-80px;right:16%;opacity:.3}
.produto .b3{width:460px;height:170px;top:-60px;left:-220px;opacity:.4}
.b2b .b1{width:520px;height:180px;top:-50px;right:-120px}
.b2b .b2{width:480px;height:170px;bottom:-60px;left:-160px}
.final .b1{width:620px;height:220px;top:-80px;right:-120px}
.final .b2{width:560px;height:200px;bottom:-90px;left:-140px}
.final .b3{width:380px;height:140px;top:40%;left:58%}
@media(max-width:860px){
  .blob{filter:blur(34px)}
  .hero .b1{width:360px;height:130px;top:-30px;right:-90px}
  .hero .b2{width:380px;height:140px;bottom:-60px;left:-110px}
  .hero .b3,.dores .b3,.final .b3{display:none}
  .produto .b1{top:auto;bottom:30%}
}

/* ---------- vidro ---------- */
.vidro{position:relative;border-radius:28px;border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04)),rgba(18,55,47,.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 24px 60px rgba(8,30,26,.28)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vidro{background:rgba(22,67,58,.86)}
}
.hero-vidro{padding:34px 32px 36px;margin:-34px -4px -34px -32px}
@media(max-width:1199px){.hero-vidro{padding:30px 22px 32px;margin:-30px -20px}}
@media(max-width:860px){.hero-vidro{padding:26px 22px 28px;margin:0}}
.final-vidro{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:56px 44px 52px}
@media(max-width:640px){.final-vidro{padding:34px 16px 32px}}

/* ---------- chip de ícone: gradiente suave + aro fino em degradê ---------- */
.chip{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;flex:none;color:#1F6B5A;
  background:linear-gradient(135deg,rgba(71,169,143,.2),rgba(219,164,164,.28));box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.chip::before,.entrega .ic::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,#47A98F,#DBA4A4);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.chip svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cred-item .chip{margin-bottom:16px}

/* ---------- botões: nada chapado ---------- */
.btn{--rel:inset 0 1px 0 rgba(255,255,255,.34),inset 0 14px 16px -14px rgba(255,255,255,.3),inset 0 -12px 16px -12px rgba(0,0,0,.22);
  box-shadow:var(--rel),0 12px 26px -12px rgba(35,128,107,.7);
  transition:transform 200ms var(--saida),box-shadow 200ms var(--saida),background-color 200ms var(--saida),color 200ms var(--saida),border-color 200ms var(--saida)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--rel),0 18px 34px -12px rgba(35,128,107,.78)}
.btn:active{transform:scale(.97);transition-duration:120ms}
.btn.btn--ghost{--rel:inset 0 1px 0 rgba(255,255,255,.8);color:var(--verde-900);border:1px solid rgba(35,128,107,.38);
  background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.5));
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);box-shadow:var(--rel),0 8px 20px -14px rgba(31,66,59,.45)}
.btn.btn--ghost:hover{background:#16433A;border-color:#16433A;color:#fff;box-shadow:0 16px 30px -14px rgba(22,67,58,.7)}
.btn.btn--ghost:hover .dot{background:#EBCF9C}
/* os botões manteiga (topo, fechamento, barra do celular) levam relevo claro, não escuro */
.hero .btn,.final .btn,.barra-teste .btn{--rel:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -10px 14px -10px rgba(150,110,40,.28);box-shadow:var(--rel),0 14px 30px -14px rgba(235,207,156,.6)}
.hero .btn:hover,.final .btn:hover{box-shadow:var(--rel),0 20px 38px -14px rgba(235,207,156,.75)}

/* ---------- fio de luz que corre na borda do botão principal ---------- */
.beam{position:relative;overflow:hidden;isolation:isolate}
.beam::before{content:"";position:absolute;left:-50%;top:50%;width:200%;aspect-ratio:1/1;margin-top:-100%;z-index:-2;
  background:conic-gradient(from 0deg,transparent 0 70%,#EBCF9C 82%,#FFFFFF 88%,transparent 95%);
  animation:beam-gira 3.2s linear infinite}
.beam::after{content:"";position:absolute;inset:2px;border-radius:inherit;background:var(--fill);z-index:-1}
@keyframes beam-gira{to{transform:rotate(1turn)}}
.btn.beam,.btn.beam:hover,.hero .btn.beam,.hero .btn.beam:hover,.final .btn.beam,.final .btn.beam:hover{
  --fill:linear-gradient(180deg,#F7E9C9 0%,#EBCF9C 52%,#E2C285 100%);
  background:rgba(235,207,156,.3);color:#16332C}
.btn.beam:hover,.hero .btn.beam:hover,.final .btn.beam:hover{--fill:linear-gradient(180deg,#FCF2DA 0%,#F4E3C0 52%,#EAD09B 100%)}
@media (prefers-reduced-motion:reduce){.beam::before{animation:none;opacity:0}}
html.quieto .beam::before{animation:none;opacity:0}

/* ---------- credenciais ---------- */
.cred-grid .cred-item{background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.62));
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(31,66,59,.1);border-radius:24px;padding:28px 26px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 34px -24px rgba(31,66,59,.35);
  transition:transform 240ms var(--saida),box-shadow 240ms var(--saida),border-color 240ms var(--saida)}
.cred-item b{font-size:21px;letter-spacing:-.015em}
@media(hover:hover) and (pointer:fine){
  .cred-grid .cred-item:hover{transform:translateY(-5px);border-color:rgba(71,169,143,.5);box-shadow:inset 0 1px 0 #fff,0 26px 46px -24px rgba(22,67,58,.45)}
}

/* ---------- Doses de gestão: vidro claro; escuro (destaque ou hover) com título manteiga ---------- */
.dor-grid .dor{position:relative;isolation:isolate;overflow:hidden;border-radius:26px;
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.55));
  -webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35);
  border:1px solid rgba(31,66,59,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 36px -24px rgba(31,66,59,.38);
  transition:transform 240ms var(--saida),box-shadow 240ms var(--saida),border-color 240ms var(--saida),color 240ms var(--saida)}
.dor-grid .dor::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(135deg,#1F6253 0%,#16433A 62%);opacity:0;transition:opacity 240ms var(--saida)}
.dor-grid .dor::after{content:"";position:absolute;z-index:-1;width:220px;height:80px;right:-70px;top:-30px;border-radius:999px;transform:rotate(-35deg);
  background:#47A98F;filter:blur(34px);opacity:0;transition:opacity 240ms var(--saida)}
.dor-grid .dor--destaque{border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 26px 50px -24px rgba(22,67,58,.6)}
.dor-grid .dor--destaque::before{opacity:1}
.dor-grid .dor--destaque::after{opacity:.5}
.dor-grid .dor h3{transition:color 240ms var(--saida)}
.dor-grid .dor p{transition:color 240ms var(--saida)}
.dor-grid .dor--destaque h3,.dor-grid .dor--destaque:hover h3{color:#EBCF9C}
.dor-grid .dor--destaque p{color:rgba(255,255,255,.88)}
@media(hover:hover) and (pointer:fine){
  .dor-grid .dor:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 28px 50px -22px rgba(22,67,58,.6)}
  .dor-grid .dor:hover::before{opacity:1}
  .dor-grid .dor:hover::after{opacity:.5}
  .dor-grid .dor:hover h3{color:#EBCF9C}
  .dor-grid .dor:hover p{color:rgba(255,255,255,.88)}
  .dor-grid .dor:hover .num{color:#EBCF9C}
}
.dor-grid .dor .num{transition:color 240ms var(--saida)}

/* ---------- vídeos ---------- */
.reel-tela{border:1px solid rgba(31,66,59,.12)}
@media(hover:hover) and (pointer:fine){
  .reel:hover .reel-tela{transform:translateY(-5px);border-color:rgba(71,169,143,.6);box-shadow:0 26px 48px -22px rgba(22,67,58,.55)}
}
.reel-tela--mais{background:radial-gradient(120% 80% at 20% 0%,rgba(219,164,164,.28),transparent 60%),linear-gradient(160deg,#1F6253,#16433A);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 40px -26px rgba(20,35,31,.55)}

/* ---------- produto: ícones em chip de vidro, cartão de preço em vidro claro ---------- */
.entrega .ic{position:relative;width:44px;height:44px;border-radius:14px;color:#EBCF9C;
  background:linear-gradient(135deg,rgba(71,169,143,.34),rgba(219,164,164,.26));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.entrega .ic svg{width:21px;height:21px;stroke-width:1.8}
.entrega .ic{transition:transform 240ms var(--saida)}
@media(hover:hover) and (pointer:fine){.entrega:hover .ic{transform:translateY(-2px)}}
.oferta{background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(255,255,255,.9));
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid rgba(255,255,255,.6);border-radius:30px;
  box-shadow:inset 0 1px 0 #fff,0 34px 70px -30px rgba(0,0,0,.6)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.oferta{background:rgba(255,255,255,.97)}}
.oferta .tag{background:linear-gradient(135deg,#F8ECEA,#FAF1DD);box-shadow:inset 0 0 0 1px rgba(219,164,164,.5)}

/* ---------- a escada: vidro claro; o degrau do clube em vidro escuro ---------- */
.degraus li a{border-radius:24px;border:1px solid rgba(31,66,59,.1);
  background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.6));
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 32px -24px rgba(31,66,59,.35);
  transition:transform 240ms var(--saida),border-color 240ms var(--saida),box-shadow 240ms var(--saida)}
.degraus li a::before{display:inline-grid;place-items:center;align-self:flex-start;min-width:36px;height:26px;padding:0 10px;margin-bottom:8px;border-radius:999px;
  background:linear-gradient(135deg,rgba(71,169,143,.2),rgba(219,164,164,.3));box-shadow:inset 0 0 0 1px rgba(71,169,143,.38)}
.degraus li:nth-child(3) a{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.03)),#16433A;border-color:rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 24px 48px -24px rgba(22,67,58,.7)}
.degraus li:nth-child(3) a::before{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(235,207,156,.45)}
@media(hover:hover) and (pointer:fine){
  .degraus li a:hover{transform:translateY(-5px);border-color:rgba(71,169,143,.55);box-shadow:inset 0 1px 0 #fff,0 26px 44px -24px rgba(22,67,58,.5)}
  .degraus li:nth-child(3) a:hover{border-color:rgba(235,207,156,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 30px 52px -22px rgba(22,67,58,.8)}
}

/* ---------- empresas ---------- */
.b2b li{transition:transform 240ms var(--saida)}
@media(hover:hover) and (pointer:fine){.b2b li:hover{transform:translateX(4px)}}
.b2b li::before{background:linear-gradient(135deg,#47A98F,#DBA4A4);width:10px;height:10px}

/* ---------- perguntas: cartões, com elevação e aro no hover ---------- */
.faq details,.faq details:first-of-type{background:#fff;border:1px solid rgba(31,66,59,.1);border-radius:20px;margin-bottom:12px;padding:0 22px;
  box-shadow:0 10px 26px -24px rgba(31,66,59,.4);
  transition:transform 240ms var(--saida),border-color 240ms var(--saida),box-shadow 240ms var(--saida),background-color 240ms var(--saida)}
.faq summary{padding:20px 0;gap:16px}
.faq summary::after{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;line-height:1;padding-bottom:3px;
  background:linear-gradient(135deg,rgba(71,169,143,.2),rgba(219,164,164,.3));box-shadow:inset 0 0 0 1px rgba(71,169,143,.4);
  transition:transform 200ms var(--saida)}
.faq details[open]{border-color:rgba(71,169,143,.5);background:linear-gradient(135deg,#F3F8F5,#fff)}
.faq .resp{padding:0 0 24px}
.faq summary:focus-visible{outline:2px solid #1F6B5A;outline-offset:4px;border-radius:12px}
@media(hover:hover) and (pointer:fine){
  .faq details:hover{transform:translateY(-3px);border-color:rgba(71,169,143,.5);box-shadow:0 20px 38px -26px rgba(22,67,58,.5)}
}

/* ---------- fechamento e rodapé ---------- */
.final{position:relative;overflow:hidden}
.final h2{position:relative}
footer{border-top:1px solid rgba(235,207,156,.18);background:linear-gradient(180deg,#1F423B,#18382F)}

/* ---------- reduzir movimento: nada de elevação nem laço ---------- */
@media (prefers-reduced-motion:reduce){
  .dor-grid .dor,.cred-grid .cred-item,.degraus li a,.faq details,.reel-tela,.btn,.b2b li,.entrega .ic{transition:none!important;transform:none!important}
}

/* o cartão é translúcido: o cinza-menta do texto apagado não chega a 4,5:1 sobre ele, então escurece um degrau */
.oferta .parc,.oferta .garantia{color:#3E5E55}
.oferta .de{color:#52665F}
.btn:focus-visible{outline:2px solid #1F6B5A;outline-offset:4px}
.hero .btn:focus-visible,.final .btn:focus-visible,.barra-teste .btn:focus-visible{outline-color:#EBCF9C}

/* ---------- 12/10: o topo cabe inteiro na tela ----------
   O título crescia só pela largura (5vw): em notebook e janela baixa a caixa de vidro
   passava da dobra e o botão sumia. Agora a altura da tela também limita o tamanho. */
.hero h1{font-size:clamp(2rem,min(4.2vw,6.4vh),3.3rem);line-height:1.02;margin-bottom:14px}
.hero .sub{font-size:clamp(15px,min(1.2vw,2.1vh),17.5px);line-height:1.55;max-width:34em}
.hero .eyebrow{margin-bottom:10px}
.hero .cta-row{margin-top:20px}
.hero .btn--grande{font-size:17px;padding:16px 28px}
.hero-vidro{padding:26px 28px 28px}
@media(max-width:1199px){.hero-vidro{padding:24px 22px 26px}}
@media(max-width:860px){.hero h1{font-size:clamp(1.9rem,8.4vw,2.6rem)}.hero-vidro{padding:22px 20px 24px}}