/* ============================================================
   BASE — tokens de design, reset, tipografia e utilitários
   Dário Pisos · estilo imersivo
   ============================================================ */
:root {
  /* ── Azul da marca (escala) ── */
  --azul-950:#04122e; --azul-900:#06205a; --azul-800:#0a3d91; --azul-700:#114bb0;
  --azul-600:#1e5fd0; --azul-500:#3b7bea; --azul-400:#6f9be8; --azul-200:#b9cdf2;
  --azul-100:#e8eef8; --azul-50:#f4f6fb;

  /* ── Amarelo promocional ── */
  --amarelo:#ffd200; --amarelo-600:#e6bc00; --amarelo-200:#fff0a8;

  /* ── WhatsApp ── */
  --wa:#25d366; --wa-escuro:#1daa55;

  /* ── Neutros ── */
  --tinta:#0d1526; --tinta-2:#3a4356; --tinta-3:#5e6878;
  --linha:#e6eaf2; --nuvem:#f4f6fb; --branco:#fff; --carvao:#0b1020;

  /* ── Papéis semânticos ── */
  --primaria:var(--azul-800); --primaria-forte:var(--azul-900);
  --acento:var(--amarelo);
  --bg:var(--nuvem); --superficie:var(--branco);
  --texto:var(--tinta); --texto-suave:var(--tinta-3); --borda:var(--linha);

  /* ── Gradientes assinatura ── */
  --grad-marca:linear-gradient(135deg,#3b7bea 0%,#0a3d91 55%,#06205a 100%);
  --grad-escuro:linear-gradient(165deg,#0a3d91 0%,#06205a 55%,#04122e 100%);
  --grad-dourado:linear-gradient(135deg,#ffe066 0%,#ffd200 45%,#f5a800 100%);
  --grad-vidro:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.04));

  /* ── Sombras ── */
  --sombra-sm:0 1px 3px rgba(10,61,145,.08);
  --sombra:0 4px 18px rgba(10,61,145,.10);
  --sombra-md:0 10px 30px rgba(10,61,145,.13);
  --sombra-lg:0 20px 50px rgba(10,61,145,.18);
  --sombra-xl:0 32px 70px rgba(6,32,90,.28);
  --sombra-acento:0 12px 30px rgba(255,178,0,.35);
  --sombra-wa:0 12px 28px rgba(37,211,102,.38);

  /* ── Raios ── */
  --r-sm:10px; --r:16px; --r-md:20px; --r-lg:26px; --r-xl:34px; --r-full:999px;

  /* ── Tipografia ── */
  --ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --ff-display:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  /* escala modular calculada (mesma da home/catálogo/produto) */
  --fs-display:clamp(2.6rem,1.6rem + 7vw,5.6rem);
  --fs-h1:clamp(1.95rem,1.4rem + 4vw,3rem);
  --fs-h2:clamp(1.6rem,1.2rem + 2.8vw,2.4rem);
  --fs-h3:clamp(1.2rem,1.05rem + 1vw,1.45rem);
  --fs-lead:clamp(1.0625rem,1rem + .6vw,1.25rem);
  --fs-md:1.125rem; --fs-base:1rem; --fs-sm:.9375rem; --fs-xs:.8125rem; --fs-2xs:.75rem;

  /* ── Espaçamento ── */
  /* escala 4/8 — gaps, paddings e margens encaixam nestes degraus */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px; --sp-11:80px; --sp-12:96px;
  --pad-secao:clamp(48px,8vw,112px);
  --gap:clamp(16px,3vw,32px);
  --container:1440px; --container-estreito:920px;

  /* ── Movimento ── */
  --t:.22s ease;
  --t-suave:.4s cubic-bezier(.4,0,.2,1);
  --t-mola:.5s cubic-bezier(.34,1.56,.64,1);

  /* ── Camadas ── */
  --z-fab:900; --z-bottomnav:950; --z-header:1000; --z-menu:1100; --z-lightbox:1200;
}

/* ============================================================ RESET */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
/* Garante que [hidden] sempre esconda, mesmo com display:flex/grid nas regras abaixo */
[hidden] { display:none !important; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--ff);
  background:var(--bg);
  color:var(--texto);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video { display:block; max-width:100%; }
img { height:auto; }
ul,ol { list-style:none; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:inherit; color:inherit; border:none; background:none; }
input,textarea,select { font-family:inherit; font-size:1rem; }
:focus-visible { outline:3px solid var(--azul-500); outline-offset:2px; border-radius:4px; }
::selection { background:var(--amarelo); color:var(--azul-900); }

h1,h2,h3,h4 { font-family:var(--ff-display); line-height:1.2; letter-spacing:-.02em; color:var(--texto); }
h1 { font-size:var(--fs-h1); font-weight:800; line-height:1.05; }
h2 { font-size:var(--fs-h2); font-weight:800; line-height:1.15; }
h3 { font-size:var(--fs-h3); font-weight:700; line-height:1.25; }

/* Scrollbar */
@supports (scrollbar-width:thin){ html{ scrollbar-width:thin; scrollbar-color:var(--azul-200) transparent; } }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--azul-200); border-radius:999px; border:2px solid var(--bg); }

/* ============================================================ LAYOUT */
.dp-container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(16px,4vw,32px); }
.dp-container-estreito { max-width:var(--container-estreito); }
.secao { padding-block:var(--pad-secao); }
main { display:block; min-height:60vh; }

/* Cabeçalho de seção */
.secao-cabecalho { max-width:680px; margin-bottom:clamp(24px,5vw,44px); }
.secao-cabecalho.centro { margin-inline:auto; text-align:center; }
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-xs); font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--azul-600); margin-bottom:14px;
}
.eyebrow::before { content:""; width:22px; height:2px; background:var(--amarelo); border-radius:2px; }
.secao-cabecalho.centro .eyebrow { justify-content:center; }
.secao-cabecalho p { color:var(--texto-suave); font-size:var(--fs-lead); margin-top:12px; }

/* ============================================================ TEXTO UTIL */
.texto-gradiente {
  background:var(--grad-marca); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.texto-dourado {
  background:var(--grad-dourado); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.glass {
  background:var(--grad-vidro);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.22);
}

/* ============================================================ BOTÕES */
.btn {
  --b-bg:var(--azul-800); --b-cor:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; font-size:1rem; line-height:1;
  padding:15px 28px; border-radius:var(--r-sm);
  background:var(--b-bg); color:var(--b-cor);
  transition:transform var(--t), box-shadow var(--t), background var(--t), filter var(--t);
  white-space:nowrap;
}
.btn svg { flex-shrink:0; }
.btn:hover,.btn:focus-visible { transform:translateY(-2px); }
.btn:active { transform:translateY(0) scale(.98); }

.btn-primario { background:var(--grad-marca); color:#fff; box-shadow:var(--sombra-md); }
.btn-primario:hover { box-shadow:var(--sombra-lg); }
.btn-acento { background:var(--amarelo); color:var(--azul-900); box-shadow:var(--sombra); }
.btn-wa { background:var(--wa); color:#fff; box-shadow:var(--sombra-wa); }
.btn-wa:hover { background:var(--wa-escuro); }
.btn-claro { background:#fff; color:var(--azul-800); box-shadow:var(--sombra); }
.btn-vidro { background:rgba(255,255,255,.14); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.btn-vidro:hover { background:rgba(255,255,255,.24); }
.btn-fantasma { background:transparent; color:var(--texto); box-shadow:inset 0 0 0 1.5px var(--borda); }
.btn-fantasma:hover { box-shadow:inset 0 0 0 1.5px var(--azul-500); color:var(--azul-700); }
.btn-grande { padding:18px 34px; font-size:1.08rem; }
.btn-bloco { width:100%; white-space:normal; }

/* Pílula WhatsApp (header/footer/menu) */
.btn-wa-pill {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--wa); color:#fff; font-weight:700; font-size:.9rem;
  padding:10px 18px; border-radius:var(--r-sm);
  transition:background var(--t), transform var(--t);
}
.btn-wa-pill:hover { background:var(--wa-escuro); transform:translateY(-1px); }

/* Chips / pílulas informativas */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-xs); font-weight:700;
  padding:7px 13px; border-radius:8px;
  background:var(--azul-100); color:var(--azul-700);
}
.chip-claro { background:rgba(255,255,255,.14); color:#fff; }

/* Badge de promoção (cards) */
.tag-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-xs); font-weight:800; letter-spacing:.03em;
  padding:6px 12px; border-radius:8px;
  background:var(--amarelo); color:var(--azul-900);
  box-shadow:var(--sombra-acento);
}
.tag-badge[data-tipo="promo"]  { background:linear-gradient(135deg,#ff8a3d,#ff5a5a); color:#fff; box-shadow:0 10px 24px rgba(255,90,90,.35); }
.tag-badge[data-tipo="ultima"] { background:linear-gradient(135deg,#7c5cff,#5b3bd6); color:#fff; box-shadow:0 10px 24px rgba(124,92,255,.35); }
.tag-desconto {
  font-size:var(--fs-xs); font-weight:800; color:#fff;
  background:#e23b3b; padding:5px 9px; border-radius:8px;
}

/* ============================================================ REVEAL / ANIMAÇÕES */
.reveal { opacity:0; transform:translateY(34px); transition:opacity .7s var(--t-suave), transform .7s var(--t-suave); }
.reveal-zoom { opacity:0; transform:scale(.94); transition:opacity .7s var(--t-suave), transform .7s var(--t-suave); }
.reveal-esq { opacity:0; transform:translateX(-40px); transition:opacity .7s var(--t-suave), transform .7s var(--t-suave); }
.reveal-dir { opacity:0; transform:translateX(40px); transition:opacity .7s var(--t-suave), transform .7s var(--t-suave); }
.revelado { opacity:1 !important; transform:none !important; }

@keyframes badgePop { 0%{transform:scale(.4)} 60%{transform:scale(1.25)} 100%{transform:scale(1)} }
.badge-pop { animation:badgePop .4s var(--t-mola); }

@keyframes flutuar { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.flutua { animation:flutuar 6s ease-in-out infinite; }

@keyframes brilho { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.skeleton {
  background:linear-gradient(90deg,#eef1f8 25%,#e3e8f3 37%,#eef1f8 63%);
  background-size:200% 100%; animation:brilho 1.4s infinite;
}

@keyframes subirFade { from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none} }
@keyframes pulsoSuave { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ============================================================ ACESSIBILIDADE */
.sr-only {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal,.reveal-zoom,.reveal-esq,.reveal-dir { opacity:1; transform:none; }
  [data-parallax] { transform:none !important; }
}