/* ========= MASTER STYLESHEET V3 (2 steps + header branco + fix logo + fix espaçamento) ========= */

/* Paleta */
:root{
  --verde-corporativo:#2A6442;
  --laranja-acao:#FF8C00;
  --verde-gelo:#F0F7F3;
  --branco-puro:#FFFFFF;
  --cinza-escuro:#212529;
  --cinza-suave:#555555;

  --dark-bg:#1a1a1a; --dark-card-bg:#2a2a2a; --dark-text:#f0f0f0;

  --primary-color:var(--verde-corporativo);
  --accent-color:var(--laranja-acao);
  --footer-bg:var(--verde-corporativo);
  --white:var(--branco-puro);

  --bg-color:var(--branco-puro);
  --text-color:var(--cinza-escuro);
  --text-color-secondary:var(--cinza-suave);
  --card-bg:var(--branco-puro);
  --section-bg-dark:var(--verde-corporativo);
  --border-color:#e9ecef;
  --header-bg:#ffffff; /* branco sólido para a logo */
  --hero-bg-color:var(--verde-gelo);
  --hero-text-color:var(--verde-corporativo);

  /* Tokens do formulário moderno */
  --input-bg:#f7f9f8;
  --input-border:rgba(0,0,0,0.06);
  --ring:rgba(42,100,66,.25);
  --shadow-lg:0 10px 30px rgba(0,0,0,.08);
  --shadow-md:0 6px 18px rgba(0,0,0,.06);
}

body.dark-mode{
  --bg-color:var(--dark-bg);
  --text-color:var(--dark-text);
  --text-color-secondary:#a0a0a0;
  --card-bg:var(--dark-card-bg);
  --section-bg-dark:#2a3320;
  --border-color:#444;
  --header-bg:#1a1a1a;
  --hero-bg-color:#222;
  --hero-text-color:#e8f5e9;
  --input-bg:#232323;
  --input-border:#343434;
  --ring:rgba(255,255,255,.2);
}

/* Base */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Poppins',sans-serif;line-height:1.6;color:var(--text-color);background:var(--bg-color);transition:background .3s,color .3s}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
a{color:var(--primary-color);text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:var(--header-bg);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-color);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:all .3s;
  padding-top: env(safe-area-inset-top);
}
.header-container{display:flex;justify-content:space-between;align-items:center;height:70px}
.logo{height:45px;width:auto}
.main-nav{display:flex;align-items:center;gap:25px}
.main-nav a{font-weight:600;font-size:.95rem;color:var(--text-color)}
.main-nav a:hover{color:var(--primary-color);text-decoration:none}

/* Theme toggle */
.theme-toggle{background:none;border:none;cursor:pointer;padding:5px;display:flex;color:var(--text-color-secondary)}
.theme-toggle:hover{color:var(--primary-color)}
.moon-icon{display:none}

/* Menu Mobile */
.menu-toggle{display:none;background:transparent;border:none;cursor:pointer;z-index:1001}
.menu-toggle span{display:block;width:25px;height:3px;background:var(--text-color);margin:5px 0;transition:all .3s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Hero */
.hero{
  background:var(--hero-bg-color);
  padding:120px 0 80px;
  color:var(--hero-text-color);
  position:relative;
  overflow:hidden;
  scroll-margin-top: calc(70px + env(safe-area-inset-top));
  margin-bottom:-1px; /* FIX GAP */
}
.hero-video-container{position:absolute;inset:0;z-index:0}
.hero-video{width:100%;height:100%;object-fit:cover;transform:translateZ(0);will-change:transform}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,0) 100%);z-index:1;transform:translateZ(0);will-change:transform}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:2}
.hero-content{position:relative;padding:18px 22px;border-radius:16px;background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,0) 100%)}
.hero-content h1{font-size:2.8rem;line-height:1.2;font-weight:800;margin-bottom:20px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.hero-content p{font-size:1.1rem;max-width:560px;color:rgba(255,255,255,.92);text-shadow:0 1px 6px rgba(0,0,0,.3)}

/* Form container (moderno) */
.form-container{background:var(--card-bg);padding:28px;border-radius:18px;box-shadow:var(--shadow-lg);border:1px solid rgba(0,0,0,.04)}
.form-container h2{text-align:center;margin-bottom:14px;color:var(--primary-color)}

/* Steps (2 pills) */
.msf-steps{list-style:none;display:flex;gap:10px;margin:8px 0 18px;padding:8px;background:rgba(0,0,0,.03);border-radius:999px}
.msf-steps li{flex:1;text-align:center;font-size:.85rem;font-weight:600;padding:10px 12px;border-radius:999px;color:var(--text-color-secondary);background:transparent;border:1px dashed var(--border-color);transition:all .2s}
.msf-steps li.active{background:var(--primary-color);color:#fff;border-color:transparent;box-shadow:var(--shadow-md)}

/* Fieldsets SEM borda */
.msf-step{border:none;padding:0;margin:0;animation:fade .18s ease-in-out}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Inputs */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-weight:600;margin-bottom:8px;font-size:.9rem}
.form-group input,.form-group select{
  width:100%;padding:12px 13px;border-radius:12px;
  border:1px solid var(--input-border);background:var(--input-bg);
  font-size:1rem;outline:none;transition:border-color .15s, box-shadow .15s, background .15s
}
.form-group input:focus,.form-group select:focus{border-color:var(--primary-color);box-shadow:0 0 0 6px var(--ring);background:#fff}
.input-error{border-color:#e03131 !important;box-shadow:0 0 0 6px rgba(224,49,49,.15) !important;background:#fff}
.consent-group{display:flex;align-items:center;gap:10px}
.consent-group input{width:auto}
.consent-group label{margin:0;font-size:.9rem}
.consent-error label{color:#e03131}

/* Buttons */
.msf-actions{display:flex;gap:12px}
.btn-secondary{width:100%;padding:14px;border:none;border-radius:12px;background:#e9ecef;color:#333;font-size:1.05rem;font-weight:700;cursor:pointer}
.cta-button{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(180deg, #ffa733 0%, var(--accent-color) 100%);color:#fff;font-size:1.08rem;font-weight:800;cursor:pointer;transition:filter .2s, transform .02s}
.cta-button:hover{filter:brightness(.98)}
.cta-button:active{transform:translateY(1px)}
.form-message{padding:10px;margin-top:12px;border-radius:10px;text-align:center;display:none}
.msg-success{color:#0a7a2e;background:#d1e7dd}
.msg-error{color:#a82222;background:#f8d7da}

/* Seções padrão */
.benefits,.how-it-works,.testimonials-section,.faq,.physical-store,.final-cta{padding:80px 0}
.section-title{text-align:center;font-size:2.2rem;color:var(--primary-color);margin-bottom:16px}
.section-subtitle{text-align:center;font-size:1.1rem;color:var(--text-color-secondary);max-width:600px;margin:0 auto 60px}

/* Benefits */
.benefits{background:var(--section-bg-dark);color:#fff;position:relative;top:-1px} /* FIX GAP */
.benefits h2{color:#fff;text-align:center;margin-bottom:16px}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.benefit-card{text-align:center}
.benefit-icon{margin-bottom:15px;color:var(--accent-color)}
.benefit-icon svg{width:40px;height:40px}
.benefit-card p{font-size:.95rem;color:rgba(255,255,255,.9)}
/* How it works */
.how-it-works{background:var(--bg-color)}
.steps-container{display:flex;justify-content:space-between;gap:30px;text-align:center}
.step{flex:1}
.step span{display:inline-block;width:50px;height:50px;line-height:50px;border-radius:50%;background:var(--primary-color);color:#fff;font-weight:700;font-size:1.5rem;margin-bottom:15px}

/* Testimonials */
.testimonials-section{background:var(--section-bg-dark)}
.testimonials-section .section-title,.testimonials-section .section-subtitle{color:#fff}
.google-reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.google-review-card img{width:100%;height:auto;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.1)}

/* FAQ */
.faq{background:var(--branco-puro)}
.faq-container{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border-color)}
.faq-question{width:100%;background:none;border:none;text-align:left;padding:20px 0;font-size:1.1rem;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-question::after{content:'+';font-size:1.8rem;color:var(--primary-color);transition:transform .3s}
.faq-question[aria-expanded="true"]::after{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-answer p{padding:0 0 20px;color:var(--text-color-secondary)}

/* Final */
.physical-store{background:var(--primary-color);color:#fff;text-align:center;padding:40px 0}
.final-cta{text-align:center;background:var(--branco-puro)}
.final-cta h2{margin-bottom:20px}

/* Footer */
.footer{background:var(--footer-bg);color:#e0e0e0;padding:40px 0 20px}
.footer-content{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:30px}
.footer-col h4{color:#fff;margin-bottom:15px}
.footer-col p{font-size:.9rem;margin-bottom:10px}
.social-links{margin-top:15px}
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;color:#fff}
.social-icon.instagram{background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem}
.legal-links a{color:#e0e0e0}

/* Cookie banner */
.cookie-banner{
  position:fixed;left:20px;right:20px;bottom:20px;background:#2c2c2c;color:#fff;padding:20px;border-radius:12px;
  display:none;align-items:center;justify-content:space-between;gap:20px;z-index:2000;box-shadow:0 8px 30px rgba(0,0,0,.2)
}
.cookie-banner a{color:#a6e3b5}
.cookie-btn{background:var(--primary-color);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer}

/* Responsivo */
@media (max-width:992px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-content{order:1;margin-bottom:24px;border-radius:20px}
  .form-container{order:2;margin-bottom:40px}
  .hero-content p{margin:0 auto 20px}
  .benefits-grid{grid-template-columns:repeat(2,1fr)}
  .google-reviews-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}
  .msf-steps{flex-direction:column}
}
@media (max-width:768px){
  .header-container{padding:0 15px;height:52px} /* FIX LOGO TOP */
  .logo{height:30px}
  .hero{padding-top:92px}
  .hero-content{padding:14px 16px;border-radius:14px;background:linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.22) 45%, rgba(0,0,0,0) 100%)}

  .menu-toggle{display:block}
  .main-nav{
    position:absolute;top:52px;left:0;right:0;background:var(--header-bg);
    flex-direction:column;padding:20px;align-items:flex-start;gap:0;border-top:1px solid var(--border-color);
    transform:translateY(-120%);transition:transform .4s ease
  }
  .main-nav.open{transform:translateY(0)}
  .main-nav a{width:100%;padding:15px 0;border-bottom:1px solid var(--border-color)}
  .theme-toggle{display:none}
  .benefits-grid,.footer-content{grid-template-columns:1fr}
  .footer-content{text-align:center}
  .social-links{justify-content:center}
  .steps-container{flex-direction:column}
  .cookie-banner{flex-direction:column;text-align:center}
}

html{scroll-behavior:smooth}