/* ==========================================================================
   UNBOXING BRASIL: sistema de design compartilhado
   Preto absoluto + branco + rosa da marca, por enquanto sem paleta extra.
   Preto predomina, rosa é detalhe, branco é contraste.
   Tipografia: pilha estilo Apple (SF Pro em dispositivos Apple, Segoe UI/Helvetica nos demais)
   ========================================================================== */

:root{
  --black:#0a0a0a;
  --white:#ffffff;
  --rosa:#e31258;
  --surface:rgba(10,10,10,.04);

  --line:rgba(255,255,255,.14);
  --line-dark:rgba(10,10,10,.12);

  --ff-display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ff-mono:var(--ff-display);

  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:10px;
  --radius-pill:999px;

  --container:1180px;
  --header-h:76px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:var(--header-h);}
body{
  font-family:var(--ff-display);
  background:var(--white);
  color:var(--black);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
ul{list-style:none;}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  font-family:var(--ff-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--rosa);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background:var(--rosa);
  display:inline-block;
}
.bg-black .eyebrow, .produto-card--dark .eyebrow{color:rgba(255,255,255,.85);}

h1,h2,h3,h4{
  font-family:var(--ff-display);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.04;
}
h1{font-size:clamp(2.6rem, 6vw, 5.2rem);}
h2{font-size:clamp(2rem, 4vw, 3.2rem);}
h3{font-size:clamp(1.3rem, 2.2vw, 1.7rem);}
p{font-size:1.05rem; line-height:1.65;}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.55; color:#4a4a4a;}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 30px;
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:.98rem;
  transition:transform .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--rosa); color:var(--white);}
.btn-dark{background:var(--black); color:var(--white);}
.btn-light{background:var(--white); color:var(--black); border:1.5px solid var(--black);}
.btn-ghost{background:transparent; color:currentColor; border:1.5px solid currentColor;}

/* ---------- header fixo ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--header-h);
  z-index:1000;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark);
  box-shadow:0 1px 24px rgba(0,0,0,.08);
}
.site-header .wrap{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  font-family:var(--ff-mono);
  font-weight:700;
  font-size:1rem;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--black);
  display:inline-flex;
  align-items:center;
}
.logo .accent{color:var(--rosa); margin-left:1px;}
.nav-menu{
  display:flex;
  align-items:center;
  gap:28px;
}
.nav-menu a{
  color:#555;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  transition:color .15s ease;
}
.nav-menu a:hover, .nav-menu a.active{color:var(--black);}
.nav-cta{display:flex; align-items:center; gap:22px;}
.nav-cta .btn{padding:11px 22px; font-size:.88rem;}
.nav-toggle{
  display:none;
  width:40px; height:40px;
  color:var(--black);
}
.nav-toggle span{
  display:block;
  width:22px; height:2px;
  background:currentColor;
  margin:5px auto;
  transition:transform .2s ease, opacity .2s ease;
}

/* header transparente sobre um hero escuro: inverte as cores até rolar a página */
.header-on-dark .site-header:not(.is-scrolled) .logo{color:var(--white);}
.header-on-dark .site-header:not(.is-scrolled) .nav-toggle{color:var(--white);}
.header-on-dark .site-header:not(.is-scrolled) .nav-cta .btn-dark{background:var(--white); color:var(--black);}
@media (min-width:881px){
  .header-on-dark .site-header:not(.is-scrolled) .nav-menu a{color:rgba(255,255,255,.75);}
  .header-on-dark .site-header:not(.is-scrolled) .nav-menu a:hover,
  .header-on-dark .site-header:not(.is-scrolled) .nav-menu a.active{color:var(--white);}
}

@media (max-width:880px){
  .nav-toggle{display:flex; flex-direction:column; align-items:center; justify-content:center;}
  .nav-menu{
    position:fixed;
    top:var(--header-h); left:0; right:0;
    background:var(--white);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:12px 32px 24px;
    border-bottom:1px solid var(--line-dark);
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .nav-menu.is-open{opacity:1; transform:translateY(0); pointer-events:auto;}
  .nav-menu a{padding:14px 0; width:100%; border-bottom:1px solid var(--line-dark);}
  .nav-cta{display:none;}
}

/* ---------- faixa de assinatura visual ---------- */
.vhs-stripe{
  height:10px;
  width:100%;
  background:var(--rosa);
}
.vhs-stripe.thin{height:4px;}
.vhs-stripe.vertical{width:10px; height:auto; align-self:stretch; background:var(--rosa);}

/* ---------- rodapé ---------- */
.site-footer{
  background:var(--black);
  color:var(--white);
  padding:80px 0 28px;
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr repeat(3, 1fr);
  gap:48px;
  padding-bottom:56px;
  border-bottom:1px solid var(--line);
}
.site-footer .logo{color:var(--white);}
.footer-top h4{
  font-family:var(--ff-mono);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:18px;
}
.footer-top ul li{margin-bottom:10px;}
.footer-top a{color:rgba(255,255,255,.85); font-size:.96rem; text-transform:uppercase;}
.footer-top a:hover{color:var(--rosa);}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:24px;
  font-family:var(--ff-mono);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.58);
  flex-wrap:wrap;
  gap:12px;
}
@media (max-width:820px){
  .footer-top{grid-template-columns:1fr 1fr; gap:36px 24px;}
}

/* ---------- utilitários de seção ---------- */
.section{padding:120px 0;}
.section-tight{padding:80px 0;}
.bg-black{background:var(--black); color:var(--white);}
.bg-cream{background:var(--surface); color:var(--black);}
.bg-white{background:var(--white); color:var(--black);}
.center{text-align:center;}

@media (max-width:640px){
  .section{padding:72px 0;}
  .section-tight{padding:56px 0;}
  [style*="header-h"]{padding-top:calc(var(--header-h) + 40px) !important;}
}

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .btn:hover{transform:none;}
}

:focus-visible{
  outline:2.5px solid var(--rosa);
  outline-offset:3px;
}

/* ---------- conversão: WhatsApp flutuante + microcopy de CTA ---------- */
.wa-float{
  position:fixed;
  right:22px; bottom:22px;
  z-index:1500;
  display:flex; align-items:center; gap:10px;
  padding:14px 22px 14px 16px;
  border-radius:var(--radius-pill);
  background:var(--rosa);
  color:var(--white);
  font-weight:600;
  font-size:.92rem;
  box-shadow:0 12px 28px rgba(227,18,88,.35);
  transition:transform .15s ease;
}
.wa-float:hover{transform:scale(1.04);}
.wa-float svg{width:22px; height:22px; fill:currentColor; flex-shrink:0;}
@media (max-width:560px){
  .wa-float span{display:none;}
  .wa-float{padding:14px;}
}

.cta-note{
  display:block;
  margin-top:14px;
  font-family:var(--ff-mono);
  font-size:.78rem;
  letter-spacing:.03em;
  opacity:.65;
}

.trust-bar{
  margin-top:44px;
  font-family:var(--ff-mono);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}