/* === Base layout and mobile overflow fixes === */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg { max-width: 100%; height: auto; }
:where(.wrap, .container, .content, .page) { max-width: 1100px; margin-inline: auto; padding-inline: 16px; }
:where(.grid) { width: 100%; }
:where(section, .card) { min-width: 0; } /* allow grid children to shrink */
/* Evitar que textos normais explodam a largura; NÃO incluir links/botões aqui */
:where(h1, h2, h3, h4, h5, h6, p, span, li) { overflow-wrap: anywhere; word-break: break-word; }
:where(button, a.btn) { touch-action: manipulation; }
:where(header, nav, footer) { width: 100%; }

/* Evita 100vw causar barra por conta da scroll bar */
.full-width { width: 100%; }

/* Utilitário para cortar overflow local */
.overflow-clip { overflow: clip; }

/* Bloqueia scroll do body ao abrir a sidebar */
body.no-scroll { overflow: hidden; }

/* Controle visibilidade por breakpoint */
.mobile-only { display: none; }
.desktop-only { display: block; }

/* === Page styles (moved from inline) === */
:root{
  --bg:#0b0b0c; --card:#121316; --ink:#f6f7fb; --muted:#b5b8c5;
  --brand:#ff6a00; --brand-2:#ff3b3b; --ok:#2ecc71; --warn:#ffd166;
  --radius:18px; --shadow: 0 20px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(255,106,0,.18), transparent),
    radial-gradient(900px 600px at -10% 0%, rgba(255,59,59,.14), transparent),
    var(--bg);
  color:var(--ink); line-height:1.5
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}
header{position:sticky;top:0;background:rgba(11,11,12,.7);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);z-index:10}
header .row{display:flex;align-items:center;gap:16px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:48px;height:48px;object-fit:cover;border-radius:10px;border:2px solid #ff6a00}
.brand .t1{font-weight:800;letter-spacing:.4px}
.cta{display:flex;gap:10px}

.btn{
  padding:12px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background:#1a1b1f;color:var(--ink);cursor:pointer;font-weight:700;transition:.2s;
  box-shadow:0 8px 24px rgba(0,0,0,.25)
}
.btn:hover{transform:translateY(-1px);}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border:none}
.btn.whats{background:#22c55e;border:none}

.hero{padding:48px 0 18px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.tag{
  display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);padding:6px 12px;border-radius:999px;font-size:13px;color:var(--muted)
}
.title{font-size:44px;line-height:1.08;margin:14px 0 10px;font-weight:800}
.title .grad{background:linear-gradient(90deg,#fff, #ffd9bf 40%, #ffae66);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:#d8dae2;font-size:18px}

.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero .right{position:relative}
.glow{position:absolute;inset:-20px -30px -30px -20px;pointer-events:none;filter:blur(60px);
  opacity:.45;background:conic-gradient(from 120deg at 50% 50%, rgba(255,106,0,.6), rgba(255,59,59,.5), transparent 60%)}
.logo{width:100%;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:#0c0d10;padding:16px}

.grid{display:grid;gap:18px}
.features{grid-template-columns:repeat(3,1fr);margin:28px 0}
.feat{padding:16px}
.feat h4{margin:8px 0 6px}
.feat p{color:var(--muted);margin:0}
.section{padding:48px 0}
.section h2{font-size:30px;margin:0 0 8px}
.muted{color:var(--muted)}
.pricing{grid-template-columns:repeat(2,1fr)}
.price .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.price .tagpill{font-size:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  padding:4px 10px;border-radius:999px}
.price ul{margin:12px 0 0;padding:0 0 0 18px;color:#d7d9e1}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.form .full{grid-column:1 / -1}
label{font-size:13px;color:var(--muted)}
input, select, textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:#0f1013;color:#f2f4f8
}
textarea{min-height:110px}
.policy{font-size:12px;color:var(--muted)}
.faq{grid-template-columns:repeat(2,1fr)}
details{padding:14px;border-radius:12px;background:#0f1013;border:1px solid rgba(255,255,255,.12)}
summary{cursor:pointer;font-weight:700}
footer{border-top:1px solid rgba(255,255,255,.08);padding:26px 0;color:var(--muted)}
.whatsapp-float{
  position:fixed;right:18px;bottom:18px;background:#22c55e;border-radius:50%;
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 18px 40px rgba(0,0,0,.35);z-index:20
}
.whatsapp-float svg{width:28px;height:28px;fill:#0b0b0c}

/* Responsivo */
@media (max-width: 920px){
  .hero .wrap{grid-template-columns:1fr}
  .features{grid-template-columns:1fr 1fr}
  .pricing,.faq{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.6);
  z-index:1200;            /* era 50 — precisa ser maior que sidebar/backdrop */
}
.modal.active{ display:flex; }

.modal .box{width:min(640px,92vw);background:#0f1013;border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.55);overflow:hidden}
.modal header{position:relative;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border-bottom:1px solid rgba(255,255,255,.08)}
.tabs{display:flex;gap:6px;padding:8px;background:#0b0b0c}
.tab{flex:1;text-align:center;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.10);cursor:pointer}
.tab.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));border:none;font-weight:700}
.modal .content{padding:18px}
.close-x{position:absolute;right:14px;top:14px;background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer}
.alert{display:block;padding:10px 12px;border-radius:12px;margin-bottom:12px;background:rgba(255,59,59,.12);border:1px solid rgba(255,59,59,.35);color:#ffb4b4}

/* === Fix: impedir letras na vertical (apenas navegação) === */
header a, header .cta a.btn, nav a, .menu a {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Layout horizontal de menus; com opção de rolagem em telas muito estreitas */
.menu, nav .menu, header .menu { display:flex; flex-wrap:wrap; gap:10px; }
.menu.is-scrollable {
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.menu.is-scrollable::-webkit-scrollbar { display: none; }

/* === Mobile Sidebar Menu === */
.mobile-header {
  position: sticky; top: 0; z-index: 999;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line, rgba(148,163,184,.22));
}
.mobile-header .brand { display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; }
.mobile-menu-btn {
  border:0; border-radius: var(--radius, 14px); padding:10px;
  background: var(--card, #121316); color: var(--ink, #e5e7eb);
  box-shadow: var(--shadow, 0 10px 20px rgba(0,0,0,.25));
  display:inline-flex; align-items:center; justify-content:center;
}
.mobile-menu-btn:active { transform: translateY(1px); }

/* Painel lateral */
.sidebar {
  position: fixed; top: 0; right: 0;
  width: min(82vw, 360px); height: 100dvh;
  background: var(--card, #0f172a);
  box-shadow: -20px 0 40px rgba(0,0,0,.5);
  transform: translateX(100%); transition: transform .28s ease;
  z-index: 1001; display:flex; flex-direction:column; padding:18px; gap:10px;
}
.sidebar.open { transform: translateX(0%); }
.sidebar header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.sidebar .menu { display:flex; flex-direction:column; gap:10px; }
.sidebar a.btn {
  display:flex; justify-content:center; align-items:center; white-space:nowrap;
  text-decoration:none; border-radius:var(--radius, 14px); padding:12px 14px;
  background:#121316; color:#e5e7eb; border:1px solid var(--line, rgba(148,163,184,.22));
}
.sidebar a.btn.primary { background:#22c55e; color:#08130a; border-color:transparent; }

/* Backdrop */
.backdrop {
  position: fixed; inset: 0; background: rgba(2, 6, 23, 0.46);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index:1000;
}
.backdrop.show { opacity: 1; pointer-events: auto; }

/* Breakpoints: mostra mobile header no mobile e esconde desktop header */
@media (max-width: 780px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
}
@media (min-width: 781px) {
  .mobile-only { display: none !important; }
}

/* === HOTFIX: overflow lateral no mobile (grids e hero) === */
.grid > * { min-width: 0; } /* filhos de grid podem encolher */
.wrap > * { min-width: 0; }

@media (max-width: 780px){
  .container { padding-inline: 16px; }   /* reduz padding lateral */
  main, .section, .hero, .hero .wrap, .grid { overflow-x: clip; }

  /* Hero: impedir estouro por efeitos e forçar CTAs a quebrarem linha */
  .hero { overflow-x: clip; }
  .hero .right { overflow: hidden; contain: paint; }
  .hero .right .glow { inset: -8px; filter: blur(40px); }

  .hero .cta {
    display: flex; flex-wrap: wrap; gap: 10px;
  }
  .hero .cta .btn {
    flex: 1 1 100%; text-align: center;
  }
}