/* =========================================================
   CORES E FONTES PROVISÓRIO: Direção B · Laboratório Noturno
   Trocar só aqui.
   ========================================================= */
:root{
  /* CORES PROVISÓRIO: Direção C · Pele Acesa */
  --c-escuro:#0F3B47;      /* PROVISÓRIO azul petróleo (seções escuras) */
  --c-escuro-2:#16505F;    /* PROVISÓRIO cartões no escuro */
  --c-escuro-3:#2B6B7D;    /* PROVISÓRIO bordas no escuro */
  --c-rodape:#082A33;      /* PROVISÓRIO rodapé */
  --c-gelo:#F3F7F8;        /* PROVISÓRIO gelo (seções claras) */
  --c-branco:#FFFFFF;      /* PROVISÓRIO */
  --c-acido:#FF7A66;       /* PROVISÓRIO coral vivo (botões e números) */
  --c-acido-esc:#FF6450;   /* PROVISÓRIO coral do hover */
  --c-texto:#000000;       /* PROVISÓRIO texto no claro */
  --c-texto-esc:#FFFFFF;   /* PROVISÓRIO texto no escuro */
  --c-suave-esc:#D9EBF0;   /* PROVISÓRIO texto de apoio no escuro */
  --c-linha:#CFDFE3;       /* PROVISÓRIO linhas no claro */
  --c-aviso:#FFF3A8;       /* PROVISÓRIO etiquetas de mockup */
  --rgb-escuro:15,59,71;
  --rgb-acido:255,122,102;

  --f-titulo:"Plus Jakarta Sans",system-ui,sans-serif;   /* PROVISÓRIO */
  --f-texto:"Figtree",system-ui,sans-serif;              /* PROVISÓRIO */
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --ease:cubic-bezier(.2,.8,.2,1);
  --mola:cubic-bezier(.3,1.5,.5,1);
  --sombra:0 24px 50px -26px rgba(0,0,0,.55);
  --gutter:20px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:70px;overflow-x:clip;-webkit-text-size-adjust:100%}
body{background:var(--c-escuro);color:var(--c-texto-esc);font-family:var(--f-texto);font-size:20px;font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--f-titulo);font-weight:400;line-height:1.05;letter-spacing:-.02em}
b,strong{font-weight:700}
:focus-visible{outline:3px solid var(--c-acido);outline-offset:3px;border-radius:10px}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gutter)}
.estreito{max-width:780px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sec{position:relative;padding:68px 0;overflow:hidden}
.f-escuro{background:var(--c-escuro);color:var(--c-texto-esc)}
.f-gelo{background:var(--c-gelo);color:var(--c-texto)}
.f-branco{background:var(--c-branco);color:var(--c-texto)}
.titulo{font-size:clamp(34px,8vw,64px);text-align:center;margin-bottom:18px}
.titulo .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.titulo .w>span{display:inline-block;transform:translateY(112%);transition:transform .9s var(--ease)}
.titulo.in .w>span{transform:none}
.titulo em{font-style:normal}
.f-escuro .titulo em{color:var(--c-acido)}
.titulo .risco{display:block;width:110px;height:6px;margin:16px auto 0;border-radius:6px;background:var(--c-acido);transform:scaleX(0);transition:transform 1s .5s var(--ease)}
.f-gelo .titulo .risco,.f-branco .titulo .risco{background:var(--c-escuro)}
.titulo.in .risco{transform:scaleX(1)}
.lead{font-size:21px;font-weight:700;text-align:center;max-width:32ch;margin:0 auto 34px;line-height:1.4}
.f-escuro .lead{color:var(--c-suave-esc)}
.fonte{font-size:16px;line-height:1.4;margin-top:12px;opacity:.85}
.mock{display:inline-flex;gap:8px;align-items:center;font-family:var(--f-texto);font-weight:700;font-size:16px;line-height:1.35;color:#000;background:var(--c-aviso);border:2px dashed #8A7A00;border-radius:12px;padding:6px 12px}
.ph{position:relative;display:grid;place-items:center;text-align:center;padding:16px;border:3px dashed currentColor;border-radius:24px;font-family:var(--f-titulo);font-size:18px;line-height:1.2;opacity:.9}
.f-escuro .ph{border-color:var(--c-escuro-3);color:var(--c-suave-esc);background:var(--c-escuro-2)}
.f-gelo .ph,.f-branco .ph{border-color:#9DB6AB;color:#28453B;background:#DCE7E2}

/* ---------- Botão de compra ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:66px;padding:16px 30px;border:0;border-radius:20px;background:var(--c-acido);color:var(--c-escuro);font-family:var(--f-titulo);font-size:21px;line-height:1.15;text-align:center;text-decoration:none;overflow:hidden;isolation:isolate;box-shadow:0 18px 34px -14px rgba(var(--rgb-acido),.75);transition:transform .25s var(--ease),background .2s}
.f-gelo .btn,.f-branco .btn{box-shadow:0 0 0 3px var(--c-escuro),0 18px 30px -14px rgba(var(--rgb-escuro),.6)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);background-size:260% 100%;animation:brilho 3.4s ease-in-out infinite}