/* ============================================================
   DESAFIO DESTRAVA PESO — v2 (navy + dourado, mobile-first)
   Estrutura: tokens → base → utilities (subset Tailwind) →
   componentes da marca. Markup usa classes Tailwind padrão;
   este arquivo equivale ao build compilado + @layer components.
============================================================ */

/* ---------- TOKENS DA MARCA ---------- */
:root{
  --navy:#0a1628; --navy2:#0f2040; --navy3:#162952;
  --blue:#1a5fa8; --gold:#c9a84c; --gold2:#e8c96a;
  --light:#dce6f7; --gray:#6b7a99; --white:#ffffff; --red:#e84040;
  --font-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-body:'DM Sans',-apple-system,'Segoe UI',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;
}

/* ---------- BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--navy);color:var(--light);
  font-family:var(--font-body);font-size:1rem;line-height:1.6;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img,video{height:auto} /* atributos width/height dão só a proporção; nunca esticam */
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--font-display);line-height:1.15;text-wrap:balance;font-weight:700}
p{max-width:65ch}
strong{color:var(--white)}
em{font-style:italic}
:focus-visible{outline:2px solid var(--gold2);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold);color:var(--navy)}

/* ---------- UTILITIES (subset Tailwind compilado) ---------- */
.relative{position:relative}.absolute{position:absolute}.inset-0{inset:0}
.sticky{position:sticky}.top-0{top:0}.z-50{z-index:50}.z-10{z-index:10}
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}
.hidden{display:none}
.flex-col{flex-direction:column}
.items-center{align-items:center}.items-start{align-items:flex-start}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}
.flex-wrap{flex-wrap:wrap}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}
.w-full{width:100%}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-px{height:1px}
.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.pt-10{padding-top:2.5rem}.pt-14{padding-top:3.5rem}
.pb-16{padding-bottom:4rem}.pb-24{padding-bottom:6rem}
.text-center{text-align:center}.text-left{text-align:left}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.35rem}
.text-base{font-size:1rem;line-height:1.6rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-5xl{font-size:3rem;line-height:1}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.italic{font-style:italic}
.uppercase{text-transform:uppercase}
.tracking-wide{letter-spacing:.025em}.tracking-widest{letter-spacing:.14em}
.leading-tight{line-height:1.2}.leading-snug{line-height:1.375}
.leading-relaxed{line-height:1.65}
.line-through{text-decoration:line-through}
.tabular-nums{font-variant-numeric:tabular-nums}
.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}
.rounded-full{border-radius:9999px}
.border{border-width:1px;border-style:solid}
.border-t{border-top-width:1px;border-top-style:solid}
.overflow-hidden{overflow:hidden}
.opacity-60{opacity:.6}.opacity-80{opacity:.8}
.pointer-events-none{pointer-events:none}
.list-none{list-style:none}

/* variantes responsivas — md: (≥768px) e lg: (≥1024px) */
@media (min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:flex-row{flex-direction:row}
  .md\:items-start{align-items:flex-start}
  .md\:text-left{text-align:left}
  .md\:text-3xl{font-size:1.875rem;line-height:2.25rem}
  .md\:text-4xl{font-size:2.25rem;line-height:2.6rem}
  .md\:text-5xl{font-size:3rem;line-height:1.12}
  .md\:text-lg{font-size:1.125rem;line-height:1.75rem}
  .md\:text-xl{font-size:1.25rem;line-height:1.85rem}
  .md\:py-20{padding-top:5rem;padding-bottom:5rem}
  .md\:pt-20{padding-top:5rem}
  .md\:max-w-2xl{max-width:42rem}
  .md\:w-auto{width:auto}
  .md\:px-10{padding-left:2.5rem;padding-right:2.5rem}
  .md\:inline{display:inline}
}
@media (min-width:768px){
  .md\:justify-start{justify-content:flex-start}
}
@media (min-width:1024px){
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:max-w-5xl{max-width:64rem}
  .lg\:text-left{text-align:left}
  .lg\:mx-0{margin-left:0;margin-right:0}
  .lg\:items-start{align-items:flex-start}
}

/* ---------- COMPONENTES DA MARCA ---------- */
.font-display{font-family:var(--font-display)}
.font-mono{font-family:var(--font-mono)}
.bg-navy{background-color:var(--navy)}
.bg-navy2{background-color:var(--navy2)}
.bg-navy3{background-color:var(--navy3)}
.text-light{color:var(--light)}
.text-muted{color:var(--gray)}
.text-gold{color:var(--gold)}
.text-gold2{color:var(--gold2)}
.text-white{color:var(--white)}
.border-gold{border-color:var(--gold)}
.border-soft{border-color:rgba(201,168,76,.18)}
.border-line{border-color:rgba(220,230,247,.1)}

/* Header fixo enxuto */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,22,40,.88);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(201,168,76,.15);
}
.site-brand{white-space:nowrap;font-size:.875rem}
@media (min-width:768px){.site-brand{font-size:1rem}}
.header-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:2.75rem;padding:.625rem 1.5rem;border-radius:9999px;
  background:linear-gradient(180deg,var(--gold2),var(--gold));
  color:var(--navy);font-size:.8125rem;font-weight:700;letter-spacing:.02em;
  white-space:nowrap;transition:filter .15s ease;
}
.header-cta:hover{filter:brightness(1.07)}

/* Eyebrow / etiqueta de seção */
.eyebrow{
  font-family:var(--font-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}

/* CTA dourado — o elemento mais visível da página */
.btn-cta{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;min-height:3.5rem;padding:.75rem 1.5rem;
  border:0;border-radius:9999px;cursor:pointer;
  background:linear-gradient(180deg,var(--gold2) 0%,var(--gold) 55%,#b3923d 100%);
  color:var(--navy);font-family:var(--font-body);font-weight:700;
  font-size:1rem;letter-spacing:.04em;text-align:center;line-height:1.25;
  box-shadow:0 10px 28px rgba(201,168,76,.35),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.btn-cta:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 14px 34px rgba(201,168,76,.45),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-cta:active{transform:translateY(0)}
@media (min-width:768px){.btn-cta{width:auto;min-width:22rem}}
.btn-cta--hero{min-height:4rem;font-size:1.0625rem}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 10px 28px rgba(201,168,76,.35),0 0 0 0 rgba(232,201,106,.45)}
  50%{box-shadow:0 10px 28px rgba(201,168,76,.45),0 0 0 14px rgba(232,201,106,0)}
}
.btn-cta--pulse{animation:ctaPulse 2.6s ease-in-out infinite}

/* Cartões */
.card{background:var(--navy2);border:1px solid rgba(201,168,76,.16);border-radius:1rem}
.card--deep{background:var(--navy3)}

/* Hero: coluna única no mobile; a partir de 1024px vira duas colunas
   (texto + promessa/CTA à esquerda, vídeo vertical à direita) */
.hero-grid{display:flex;flex-direction:column}
@media (min-width:1024px){
  .hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 19rem;
    grid-template-areas:"head video" "deal video";
    column-gap:4.5rem;
    align-content:center;
  }
  .hero-head{grid-area:head;align-self:end;padding-bottom:.5rem}
  .hero-deal{grid-area:deal;align-self:start;max-width:30rem}
  .hero-video{grid-area:video;align-self:center;margin-top:0}
}

/* Player de vídeo real (asset vertical 720×1280) */
.video-frame{
  width:100%;max-width:20rem;margin-left:auto;margin-right:auto;
  border-radius:1.25rem;overflow:hidden;
  border:1px solid rgba(201,168,76,.45);
  box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 0 6px rgba(201,168,76,.06);
  background:#000;
}
/* height:auto + sem aspect-ratio forçado: o player segue a proporção
   intrínseca do arquivo (via atributos width/height), sem corte nem zoom */
.video-frame video{width:100%;height:auto}

/* Bloco de dor — única seção autorizada a usar o vermelho */
.dor-card{border-top:2px solid rgba(232,64,64,.55)}
.dor-emoji{
  width:2.5rem;height:2.5rem;border-radius:.625rem;
  display:flex;align-items:center;justify-content:center;font-size:1.125rem;
  background:rgba(232,64,64,.12);border:1px solid rgba(232,64,64,.25);
}
.dor-quote{
  border-left:3px solid var(--gold);
  background:linear-gradient(90deg,rgba(201,168,76,.08),rgba(201,168,76,0));
  border-radius:0 1rem 1rem 0;
}

/* Nós numerados dos 6 eixos (motivo Meridiano Áureo) */
.eixo-node{
  width:2.5rem;height:2.5rem;border-radius:9999px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.8125rem;font-weight:600;
  color:var(--gold2);background:rgba(201,168,76,.1);
  border:1px solid rgba(201,168,76,.45);
}

/* Capa do produto */
.cover-img{
  width:11rem;height:auto;border-radius:.75rem;flex-shrink:0;
  box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 1px rgba(201,168,76,.3);
}

/* Linha do tempo vertical das fases */
.timeline{position:relative;padding-left:2.25rem}
.timeline::before{
  content:"";position:absolute;left:.6875rem;top:.5rem;bottom:.5rem;width:2px;
  background:linear-gradient(180deg,rgba(201,168,76,.15),var(--gold) 50%,rgba(201,168,76,.15));
}
.tl-item{position:relative;padding-bottom:2.25rem}
.tl-item:last-child{padding-bottom:0}
.tl-dot{
  position:absolute;left:-2.25rem;top:.35rem;
  width:1.5rem;height:1.5rem;border-radius:9999px;
  background:var(--navy);border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
}
.tl-dot::after{content:"";width:.5rem;height:.5rem;border-radius:9999px;background:var(--gold2)}

/* Autor */
.author-avatar{
  width:5.5rem;height:5.5rem;border-radius:9999px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1.75rem;font-weight:700;color:var(--gold2);
  background:rgba(201,168,76,.1);border:2px solid rgba(201,168,76,.5);
}
.cred-badge{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;
  color:var(--light);background:rgba(26,95,168,.18);
  border:1px solid rgba(26,95,168,.45);
  border-radius:9999px;padding:.375rem .875rem;
}

/* Moldura de foto (antes & depois) */
.photo-frame{
  border-radius:1.25rem;overflow:hidden;
  border:1px solid rgba(201,168,76,.4);
  box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 0 6px rgba(201,168,76,.06);
}
.photo-frame img{width:100%}

/* Depoimentos */
.testi-dot{
  width:2.75rem;height:2.75rem;border-radius:9999px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.75rem;font-weight:600;
  color:var(--navy);background:linear-gradient(180deg,var(--gold2),var(--gold));
}

/* Comparação 48 ➔ 44 */
.promise-box{
  background:linear-gradient(180deg,rgba(22,41,82,.85),rgba(15,32,64,.85));
  border:1px solid rgba(201,168,76,.3);
}
.promise-num{font-family:var(--font-mono);font-weight:600;line-height:1}

/* Âncora de valor */
.value-row{display:flex;justify-content:space-between;gap:1rem;font-size:.8125rem;color:var(--light)}
.value-row .old{font-family:var(--font-mono);text-decoration:line-through;color:var(--gray);white-space:nowrap}

/* Selos de confiança da oferta */
.trust-chip{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;
  color:var(--gold2);background:rgba(201,168,76,.08);
  border:1px solid rgba(201,168,76,.35);
  border-radius:9999px;padding:.375rem .875rem;
}

/* FAQ — <details> nativo (teclado + leitores de tela, sem JS) */
.faq-item{
  background:var(--navy2);border:1px solid rgba(201,168,76,.16);
  border-radius:.75rem;overflow:hidden;
}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;
  padding:1rem 1.25rem;font-weight:600;color:var(--white);font-size:.9375rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-family:var(--font-mono);font-size:1.25rem;color:var(--gold);
  flex-shrink:0;transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 1.25rem 1.125rem;font-size:.875rem;color:var(--gray);line-height:1.65}

/* Botão flutuante do WhatsApp */
.wa-float{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:60;
  width:3.5rem;height:3.5rem;border-radius:9999px;
  display:flex;align-items:center;justify-content:center;
  background:#25d366;box-shadow:0 4px 24px rgba(37,211,102,.5);
  transition:transform .15s ease;
}
.wa-float:hover{transform:scale(1.06)}

/* Revelação suave no scroll */
.fade{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.fade.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fade{opacity:1;transform:none;transition:none}
  .btn-cta--pulse{animation:none}
  .btn-cta,.btn-cta:hover,.wa-float:hover{transform:none;transition:none}
}