:root{
  --primary:#FF8400;
  --secondary:#7F0B7A;
  --sky:#00ADEF;
  --yellow:#FEF100;
  --gray-100:#FCFEFE;
  --gray-200:#E3E6E7;
  --gray-900:#211F20;
  --white:#FFFFFF;
  --whatsappgreen: #25D366;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:var(--gray-900);
  font-family:"Nexa", Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--secondary); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%; max-width:1140px; margin:0 auto; padding:0 16px}
.center{text-align:center}.small{font-size:.875rem}.muted{color:#555}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:blur(6px); background:rgba(255,255,255,.92); border-bottom:1px solid var(--gray-200)}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--gray-900)}
.brand-logo{width:40px; height:40px; border-radius:12px; background:var(--white); object-fit:contain}
.brand-txt{font-weight:900; letter-spacing:.2px}
.nav-toggle{display:none}
.menu{display:flex; gap:16px; list-style:none; margin:0; padding:0}
.menu a{font-weight:600; color:var(--gray-900); padding:8px 12px; border-radius:10px}
.menu a:hover{background:var(--gray-100); text-decoration:none}
.cta-whats{background:var(--primary); color:#fff; padding:10px 14px; border-radius:12px; font-weight:800}

@media (max-width:860px){
  .nav-toggle{display:inline-flex; border:1px solid var(--gray-200); padding:8px 12px; border-radius:10px; background:#fff}
  .menu{display:none; position:absolute; top:72px; right:16px; background:#fff; border:1px solid var(--gray-200); border-radius:12px; padding:10px; width:min(280px, 90vw); flex-direction:column}
  .menu.open{display:flex}
  .cta-whats{display:none}
}

/* Hero */
.hero{background:linear-gradient(135deg, var(--secondary) 0%, var(--primary) 55%, var(--sky) 100%); color:#fff}
.hero-inner{padding:64px 0; display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center}
.hero .badge{display:inline-flex; gap:8px; align-items:center; font-weight:700; background:rgba(255,255,255,.15); padding:6px 10px; border-radius:999px}
.hero h1{font-size:clamp(28px,4vw,48px); line-height:1.1; margin:14px 0}
.hero .lead{opacity:.9; font-size:clamp(14px,2.2vw,18px); max-width:580px}
.hero .cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:16px; font-weight:800; border:0; cursor:pointer}
.btn-primary{background:var(--yellow); color:var(--gray-900)}
.btn-outline-white{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5)}
.hero-stats-box{margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; background:rgba(255,255,255,.1); padding:16px; border-radius:18px}
.stat{text-align:center}.stat .value{font-weight:900; font-size:22px; color:var(--yellow)}.stat .label{color:rgba(255,255,255,.85)}
/*.preview-card{border:2px solid rgba(255,255,255,.25); border-radius:26px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.25)}
.aspect-4-3{position:relative; width:100%; padding-bottom:75%; background:rgba(255,255,255,.08); display:grid; place-items:center} */
.preview-card { position: relative; border:2px solid rgba(255,255,255,.25); border-radius:26px; overflow:hidden; }
/*.aspect-4-3 { position: relative; width:100%; padding-bottom:75%; }
.aspect-4-3 > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } */
/* ===== Utilitário de proporção ===== */
.aspect { position: relative; width:100%; }
.aspect > * { position:absolute; inset:0; width:100%; height:100%; }

/* Razões modernas via aspect-ratio */
.aspect-4-3  { aspect-ratio: 4 / 3; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-1-1  { aspect-ratio: 1 / 1; }

/* Ajuste de preenchimento do conteúdo */
.media-fit-cover  { object-fit: cover; }
.media-fit-contain{ object-fit: contain; background:#000; } /* útil para vídeo sem corte */

/* Iframes e vídeos dentro do wrapper */
.aspect iframe,
.aspect video,
.aspect img { width:100%; height:100%; border:0; }

/* Fallback para browsers sem aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .aspect-4-3::before, .aspect-16-9::before, .aspect-1-1::before {
    content:""; display:block;
  }
  .aspect-4-3::before  { padding-bottom:75%; }
  .aspect-16-9::before { padding-bottom:56.25%; } /* 9/16 */
  .aspect-1-1::before  { padding-bottom:100%; }
  .aspect > * { position:absolute; inset:0; }
}


@media (max-width:980px){.hero-inner{grid-template-columns:1fr}}

/* Sections */
.section{padding:64px 0}
.section-title{text-align:center; max-width:720px; margin:0 auto 24px}
.eyebrow{text-transform:uppercase; letter-spacing:.18em; font-weight:800; color:var(--secondary); font-size:12px}
.section h2{font-size:clamp(22px,3vw,36px); margin:8px 0 6px}
.section p.lead{color:#555}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:#fff; border:1px solid var(--gray-200); border-radius:18px; padding:18px; transition:box-shadow .2s}
.card:hover{box-shadow:0 10px 30px rgba(0,0,0,.08)}
.card h3{margin-top:0}
.age{display:inline-flex; background:var(--gray-200); color:var(--gray-900); border-radius:999px; padding:3px 10px; font-size:12px; font-weight:700}
.feature-list{list-style:none; padding:0; margin:0}
.feature-list li{display:flex; gap:8px; margin:8px 0}
.feature-list li::before{content:"›"; color:var(--secondary); font-weight:900}

@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

.columns-2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:860px){.columns-2{grid-template-columns:1fr}}

.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:20px}
@media (max-width:980px){.contact-grid{grid-template-columns:1fr}}

.form-control{width:100%; border:1px solid var(--gray-200); padding:10px 12px; border-radius:12px}
label{font-weight:600; font-size:14px; color:#333}
.checkbox-row{display:flex; align-items:start; gap:8px; font-size:14px; color:#444}
.error{color:#B00020; font-size:.85rem; margin:4px 0}

.map-embed{border:1px solid var(--gray-200); border-radius:0px; min-height:280px}

/* Footer */
.site-footer{background:#fff; border-top:1px solid var(--gray-200); padding-top:24px}
.footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:20px; padding:10px 0 18px}
.site-footer h4{margin:8px 0}
.list-plain{list-style:none; padding-left:0; margin:0}
.list-plain li{margin:6px 0}

/* WhatsApp float */
.whats-float{position:fixed; right:18px; bottom:18px; background:var(--whatsappgreen); color:#fff; padding:12px 18px; border-radius:999px; font-weight:900; display:inline-flex; align-items:center; gap:8px; box-shadow:0 6px 24px rgba(0,0,0,.2)}
.whats-float img{width:22px; height:22px; filter:brightness(0) invert(1)}

/* Cookies */
.cookie-banner{position:fixed; inset-inline:0; bottom:0; background:#fff; border-top:1px solid var(--gray-200); padding:12px 16px; display:flex; gap:12px; align-items:center; justify-content:space-between; z-index:60}
.cookie-banner .cookie-text{max-width:740px; font-size:14px}
.cookie-actions{display:flex; gap:8px}
.btn-outline{border:1px solid var(--gray-200); background:#fff; color:#333}
.btn-dark{background:var(--gray-900); color:#fff}

/* Legal */
.legal-content pre{white-space:pre-wrap; line-height:1.6; font-size:15px; color:#333}

.breadcrumbs{font-size:14px; color:#555}.breadcrumbs a{color:inherit}

/* Ícones sociais no footer (monocromáticos) */
.social-icons{
  display:flex !important;
  flex-direction:row;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
.social-icons a{
  display:inline-grid; place-items:center;
  width:36px; height:36px; flex:0 0 auto;
  border-radius:10px; background:#fff;
  border:1px solid var(--gray-200);
  text-decoration:none; transition:transform .15s ease, color .15s ease, border-color .15s ease;
}
.social-icons a:hover{ transform:translateY(-1px); border-color:var(--primary); }
.social-icons svg{ width:18px; height:18px; color:var(--gray-900); fill:currentColor; }
@media (max-width:860px){ .social-icons{ margin-left:auto; } }

.social-icons{display:flex;gap:10px;align-items:center;white-space:nowrap}
.social-icons a{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--gray-200);background:#fff;flex:0 0 auto;transition:transform .15s ease,border-color .15s ease}
.social-icons a:hover{transform:translateY(-1px);border-color:var(--primary)}
/* NÃO aplicar fill direto no <svg> */
.social-icons svg{width:18px;height:18px;color:var(--gray-900)}
/* Preencher apenas os elementos sólidos */
.social-icons svg path,
.social-icons svg polygon{fill:currentColor}