/* ── TRAVA DE OVERFLOW HORIZONTAL ──────────────────────────────────
   O hero usa o truque width:100vw + margin-left:calc(50%-50vw) pra
   sangrar a imagem até a borda no mobile. Na matemática fecha exato
   no viewport, mas 1px de sub-pixel já basta pro Safari iOS ativar
   o rubber-band horizontal — abre uma gaveta de um lado e corta o
   texto do outro. Trava o eixo X pra esse bounce nunca acontecer. */
html,body{overflow-x:hidden;max-width:100%}

/* ── HERO (herdado do preview local) ───────────────────────────── */
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;padding:44px 0 64px;align-items:center}
.madame-brand{width:min(390px,100%);display:flex;flex-direction:column;align-items:center;margin-bottom:24px}
.madame-portrait{width:340px;max-width:100%;height:auto;margin-bottom:-38px}
.madame-brand .brand-logo{position:relative;width:330px;max-width:100%;height:auto;margin:0;filter:drop-shadow(0 8px 16px #000)}
h1{font-size:clamp(2.2rem,3.7vw,3.8rem)}
.hero-text strong{color:var(--color-gold-soft);font-weight:700}
.hero-note{margin-top:18px;font-size:.88rem;color:var(--color-muted);opacity:.85}
.hero-visual{min-height:0;width:100%;max-width:510px;justify-self:center}
.hero-visual .instagram-deferred{height:530px}
.hero-store{display:block;overflow:hidden;border:1px solid var(--color-line);border-radius:18px;box-shadow:0 24px 60px #0009}
.hero-store img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.hero-proof{margin:14px 0 0;color:var(--color-gold-soft);font-size:.9rem;text-align:center}
.hero-video-mobile{display:none}
.video-fallback{display:block;text-align:center;color:var(--color-gold-soft);font-size:.85rem;margin-top:19px;text-underline-offset:5px}

/* ── PROVA SOCIAL ──────────────────────────────────────────────── */
.social-proof{padding:76px 0;background:var(--color-bg-soft);border-top:1px solid var(--color-line)}
.social-proof-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:52px;align-items:center}
.social-proof h2{margin:8px 0 14px;max-width:16ch}
.social-proof p:not(.eyebrow){color:var(--color-muted);max-width:44ch}
.instagram-video{display:block;width:100%;height:530px;border:0;border-radius:12px;background:#100b0e}
.instagram-deferred{display:block;width:100%;height:530px;border:1px solid var(--color-line);border-radius:12px;background:linear-gradient(145deg,#211019,#100b0e);overflow:hidden}
.instagram-load-button{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:0;background:transparent;color:var(--color-gold);font:inherit;font-weight:700;cursor:pointer}
.instagram-load-button::before{content:"▶";display:grid;place-items:center;width:48px;height:48px;margin-right:12px;border:1px solid currentColor;border-radius:50%;font-size:.9rem}

/* ── COMO FUNCIONA ─────────────────────────────────────────────── */
.steps-section{padding:76px 0;background:var(--color-bg-soft);border-block:1px solid var(--color-line)}
.steps-section h2{margin:6px 0 38px;max-width:22ch}
.steps-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px}
.steps-list li{display:flex;gap:16px;align-items:flex-start}
.step-num{flex-shrink:0;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(140deg,var(--color-pink),var(--color-pink-dark));color:#fff;
  font-weight:800;font-size:1rem;box-shadow:0 0 0 2px #f33f9733,0 6px 16px #0008}
.steps-list h3{margin:6px 0 6px;font-size:1.05rem;color:var(--color-gold-soft)}
.steps-list p{margin:0;color:var(--color-muted);font-size:.94rem;line-height:1.6}

/* ── O QUE COMPRAMOS ───────────────────────────────────────────── */
.cats-section{padding:76px 0}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px}
.cat-col{background:var(--color-card);border:1px solid var(--color-line);border-radius:14px;padding:22px 24px}
.cat-col h3{margin:0 0 14px;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-gold)}
.cat-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.cat-col li{color:var(--color-muted);font-size:.94rem;padding-left:18px;position:relative}
.cat-col li::before{content:"◆";position:absolute;left:0;top:0;color:var(--color-pink);font-size:.62rem;line-height:1.9}
.info-box-warn{border-color:rgba(243,63,151,.45)}
.info-box-warn h3{color:var(--color-pink)}

/* ── CTA FINAL ─────────────────────────────────────────────────── */
.cta-final{padding:84px 0;text-align:center;
  background:radial-gradient(circle at 50% 0%,rgba(243,63,151,.16),transparent 62%),var(--color-bg-soft);
  border-top:1px solid var(--color-line)}
.cta-final h2{margin:0 0 12px}
.cta-final p{margin:0 auto 30px;max-width:46ch;color:var(--color-muted)}
.button-lg{padding:18px 40px;font-size:1.04rem}

/* ── BOTÃO PRIMÁRIO ────────────────────────────────────────────────
   Cor sólida no lugar do degradê #f33f97→#c91f72: o degradê fazia a
   cor lida na tela variar conforme o ponto do botão. #df1648 fica na matiz média entre
   o nome do logo (341°) e o capacete (350°), amostrados dos próprios
   arquivos de imagem, e mais escuro que ambos (L 48%). */
.button-primary{background:#df1648;border-color:#df1648}

/* ── RESPONSIVO ────────────────────────────────────────────────── */
@media(max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .madame-brand{margin-inline:auto}
  .hero-visual{max-width:440px;margin:auto}
  /* min-width:0 impede que a imagem full-bleed infle a largura do item de
     grid — sem isso o 50% da margem negativa vira 50.5vw e se anula. */
  .hero-content{text-align:center;min-width:0}
  .hero-actions{justify-content:center}
  .hero-text,.hero-note{margin-inline:auto}
  .steps-section,.cats-section{padding:56px 0}
}

@media(max-width:640px){
  .hero-grid{padding-top:0}
  .madame-brand{position:relative;width:101vw;max-width:none;height:calc(101vw * 1300 / 984);overflow:hidden;margin-left:calc(50% - 50.5vw);margin-bottom:20px}
  .madame-portrait{display:block;width:101vw;max-width:none;height:auto;margin:-30px 0 0}
  .madame-brand .brand-logo{position:absolute;z-index:1;top:calc(60% - 10px);left:50%;width:min(72vw,330px);transform:translateX(-50%);margin:0}
  .madame-brand::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(to bottom,transparent 82%,var(--color-bg) 100%)}
  .hero-content>.eyebrow,.hero-content>h1,.hero-content>.hero-text,.hero-content>.hero-actions,.hero-content>.hero-video-mobile,.hero-content>.hero-note{position:relative;z-index:2}
  .hero-visual,.social-proof{display:none}
  .hero-video-mobile{display:block;max-width:360px;height:430px;overflow:hidden;margin:30px auto 0;text-align:left;border-radius:12px}
  .hero-video-mobile .instagram-video,.hero-video-mobile .instagram-deferred{height:530px}
  .hero-video-mobile .video-fallback{display:none}
  .diamond-frame{padding:19px}
  .social-proof{padding:56px 0}.social-proof-grid{grid-template-columns:1fr;gap:28px}.instagram-video{height:570px}
  .gem{width:16px;height:20px}
  .rail-left,.rail-right{width:18px}
  .rail-top,.rail-bottom{height:18px}
  .cta-final{padding:60px 0}
}

@media(min-width:641px){
  .hero-grid{z-index:auto}
  .madame-portrait{mix-blend-mode:normal}
  .madame-brand>picture:first-child{display:block;mix-blend-mode:screen}
}

@media (min-width: 641px) {
  .brand-tagline { display: none; }
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ── BOTÃO FLUTUANTE WHATSAPP ─────────────────────────────────────
   Padrão idêntico a Potência Auto Center e Hendall Truck Center:
   círculo 56px fixo, #25D366, glifo oficial do WhatsApp, canto
   inferior direito, hover com leve scale. Anel de pulso na cor
   dourada da própria marca (mesmo mecanismo que a Hendall usa
   com o dourado dela). */
.fab-whatsapp{
  position:fixed;bottom:20px;right:20px;z-index:50;
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.3),0 2px 4px -2px rgba(0,0,0,.3);
  transition:transform .2s ease;
  animation:fab-pulse 2s infinite;
}
.fab-whatsapp:hover{transform:scale(1.05)}
.fab-whatsapp svg{width:28px;height:28px;fill:#fff}
@media(min-width:768px){.fab-whatsapp{bottom:28px;right:28px}}
@keyframes fab-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(243,197,111,.45),0 4px 6px -1px rgba(0,0,0,.3)}
  50%{box-shadow:0 0 0 12px rgba(243,197,111,0),0 4px 6px -1px rgba(0,0,0,.3)}
}

/* Garimpo da Madame — correção de cor para telas de menor brilho.
   Carregada depois das regras-base; não altera medidas, recorte ou posição. */
@media (max-width: 640px) {
  .hero-section { background-color: #090304; }
  .hero-section { background-image: none; }
  .reasons-section::before { background-image: none; }
  .madame-portrait { filter: saturate(1.24) contrast(1.15) brightness(1.05); }
  .madame-brand::after {
    background: linear-gradient(to bottom, transparent 45%, rgba(10, 2, 5, .32) 61%, var(--color-bg) 100%);
  }
}

/* CTA principal: rosa de marca único, com leitura estável em painéis menos brilhantes. */
/* Cor aprovada pelo owner em 10/09/2026. #df1648 = hsl(345, 82%, 48%): matiz
   entre o nome do logo (341°) e o capacete (350°), amostrados dos arquivos de
   imagem, e mais escuro que ambos. Contraste 4,83:1 com texto branco — passa
   no mínimo WCAG AA de 4,5:1, que o #d63c78 anterior (4,40:1) não atingia. */
.button-primary { border-color: #df1648; background: #df1648; }
.button-primary:hover, .button-primary:focus { background: #ba123c; }

@media (min-width: 900px) {
  .reason-list { grid-template-columns: 1fr; }
  .reason-card { min-height: 0; padding: 22px 28px 22px 110px; }
}

/* Selo comercial dentro do rodapé da imagem da Madame. */
.madame-brand { position: relative; }
.brand-tagline {
  position: absolute;
  z-index: 3;
  bottom: 14px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 6px 10px;
  border: 1px solid rgba(243, 197, 111, .55);
  border-radius: 999px;
  background: rgba(9, 3, 4, .76);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  color: var(--color-gold-soft);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .brand-tagline { bottom: 28px; font-size: .66rem; }
}

/* Mobile usa a mesma cor natural da imagem desktop. */
@media (max-width: 640px) {
  .madame-portrait { filter: none; }
  .madame-brand::after { background:linear-gradient(to bottom,transparent 62%,rgba(9,3,4,.42) 78%,#090304 100%); }
}