/* DTO Publicidade — shared.css
   Nav, footer, variáveis, reset, fontes, mobile menu.
   Inclua este arquivo em todas as páginas antes do CSS específico. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --orange:#F47920; --pink:#E91E72; --bg:#08060D; }
/* overflow-x no html (não no body) — evita quebrar position:sticky no Chrome/Safari mobile */
html { scroll-behavior: smooth; overflow-x:hidden; }
body {
  width:100%; background:var(--bg);
  color:#F0EEF5; font-family:'DM Sans',sans-serif;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 58% 58% at 28% 46%, rgba(88,12,138,.22) 0%, transparent 68%),
    radial-gradient(ellipse 44% 52% at 70% 34%, rgba(112,8,56,.18) 0%, transparent 65%),
    radial-gradient(ellipse 52% 36% at 50% 84%, rgba(52,6,88,.14) 0%, transparent 70%);
}

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 56px;
  background:linear-gradient(to bottom, rgba(8,6,13,.95) 0%, rgba(8,6,13,.40) 68%, transparent 100%);
}
.nav-logo { display:flex; align-items:center; text-decoration:none; }
.nav-logo svg { height:43px; width:auto; }
.nav-links { display:flex; align-items:center; gap:32px; list-style:none; }
.nav-links a {
  font-family:'Sora',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
  color:rgba(240,238,245,.50); transition:color .22s;
}
.nav-links a:hover, .nav-links a.active { color:#fff; }
.nav-links .cta {
  padding:8px 22px; border:1px solid rgba(244,121,32,.44); border-radius:2px;
  color:rgba(244,121,32,.78); transition:background .22s,border-color .22s,color .22s;
}
.nav-links .cta:hover { background:rgba(244,121,32,.08); border-color:var(--orange); color:var(--orange); }
.hamburger {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px; z-index:300;
}
.hamburger span { display:block; width:24px; height:2px; background:#F0EEF5; border-radius:1px; transition:transform .3s,opacity .3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* FOOTER */
footer {
  position:relative; z-index:10;
  background:rgba(8,6,13,.98);
  border-top:1px solid rgba(240,238,245,.06);
  padding:64px 56px 36px;
}
.footer-top {
  display:grid; grid-template-columns:auto 1fr 1fr 1fr;
  gap:clamp(32px,6vw,96px); margin-bottom:48px;
}
.footer-logo svg { height:96px; width:auto; }
.footer-col h4 {
  font-family:'Sora',sans-serif; font-size:9px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(240,238,245,.30); margin-bottom:16px;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col ul a {
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:300;
  color:rgba(240,238,245,.50); text-decoration:none; transition:color .2s;
}
.footer-col ul a:hover { color:rgba(240,238,245,.88); }
.footer-addr {
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:300;
  color:rgba(240,238,245,.42); line-height:1.8;
}
.footer-socials { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.footer-socials a {
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(240,238,245,.14);
  display:flex; align-items:center; justify-content:center;
  color:rgba(240,238,245,.44); text-decoration:none; font-size:13px;
  transition:border-color .2s,color .2s;
}
.footer-socials a:hover { border-color:rgba(244,121,32,.5); color:var(--orange); }
.footer-bottom {
  border-top:1px solid rgba(240,238,245,.06); padding-top:24px;
  display:flex; align-items:center; justify-content:center;
}
.footer-copy {
  font-family:'DM Sans',sans-serif; font-size:12px; font-weight:300;
  color:rgba(240,238,245,.24); letter-spacing:.04em; text-align:center;
}

/* MOBILE */
@media (max-width:767px) {
  nav { padding:16px 20px; }
  .nav-logo svg { height:32px; }
  .nav-links {
    display:none; position:fixed; inset:0;
    background:rgba(8,6,13,.97); flex-direction:column;
    align-items:center; justify-content:flex-start;
    padding-top:88px; gap:32px; z-index:250;
    overflow-y:auto;
  }
  .nav-links.open { display:flex; }
  .nav-links a { font-size:18px; letter-spacing:.08em; color:rgba(240,238,245,.72); }
  .nav-links .cta { padding:12px 36px; font-size:14px; }
  .hamburger { display:flex; }
  footer { padding:40px 20px 24px; overflow:hidden; }
  .footer-top { grid-template-columns:1fr; gap:28px; }
  .footer-logo { display:flex; justify-content:flex-start; }
  .footer-logo svg { height:56px; }
  .footer-socials { flex-wrap:wrap; }
}

/* MOBILE NAV: logo centralizada acima dos links */
.nav-mobile-logo {
  display:none;
}
@media (max-width:767px) {
  .nav-mobile-logo {
    display:block; position:fixed; top:22px; left:50%; transform:translateX(-50%);
    z-index:260; pointer-events:none; opacity:0; transition:opacity .3s;
  }
  .nav-links.open ~ .nav-mobile-logo,
  .nav-links.open + .nav-mobile-logo { opacity:1; }
  .nav-mobile-logo svg { height:36px; width:auto; }
}

/* WhatsApp footer link */
.footer-wa-link {
  display:inline-flex; align-items:center; gap:4px;
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:400;
  color:rgba(72,195,116,.75); text-decoration:none;
  transition:color .2s;
}
.footer-wa-link:hover { color:rgba(72,195,116,1); }

/* Modal WhatsApp */
#wh-modal {
  display:none; position:fixed; inset:0; z-index:9000;
  background:rgba(8,6,13,.88); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:20px;
}
#wh-modal.open { display:flex; }
.wh-modal-box {
  background:#130f1e; border:1px solid rgba(240,238,245,.08);
  border-radius:8px; padding:40px 36px 32px; max-width:480px; width:100%;
  position:relative;
}
.wh-modal-close {
  position:absolute; top:16px; right:18px; background:none; border:none;
  color:rgba(240,238,245,.35); font-size:22px; cursor:pointer; line-height:1;
  transition:color .2s;
}
.wh-modal-close:hover { color:rgba(240,238,245,.8); }
.wh-modal-title {
  font-family:'Sora',sans-serif; font-size:22px; font-weight:700;
  color:#F0EEF5; margin-bottom:6px; letter-spacing:-.02em;
}
.wh-modal-sub {
  font-size:13px; color:rgba(240,238,245,.42); margin-bottom:24px; line-height:1.5;
}
.wh-field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.wh-label {
  font-family:'Sora',sans-serif; font-size:9px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(240,238,245,.35);
}
.wh-input {
  background:rgba(240,238,245,.04); border:1px solid rgba(240,238,245,.1);
  border-radius:4px; padding:11px 14px; color:#F0EEF5;
  font-family:'DM Sans',sans-serif; font-size:14px; outline:none;
  transition:border-color .2s;
}
.wh-input:focus { border-color:rgba(244,121,32,.45); }
.wh-input.error { border-color:rgba(233,30,114,.7); }
.wh-err { font-size:11px; color:rgba(233,30,114,.85); min-height:14px; }
.wh-captcha-row { display:flex; align-items:center; gap:12px; }
.wh-captcha-q { font-size:14px; color:rgba(240,238,245,.6); white-space:nowrap; }
.wh-captcha-input {
  width:72px; background:rgba(240,238,245,.04); border:1px solid rgba(240,238,245,.1);
  border-radius:4px; padding:11px 14px; color:#F0EEF5;
  font-family:'DM Sans',sans-serif; font-size:14px; outline:none;
  transition:border-color .2s; text-align:center;
}
.wh-captcha-input:focus { border-color:rgba(244,121,32,.45); }
.wh-captcha-input.error { border-color:rgba(233,30,114,.7); }
.wh-btn {
  width:100%; margin-top:20px; padding:14px;
  background:linear-gradient(90deg,#25D366,#128C7E);
  border:none; border-radius:4px; cursor:pointer;
  font-family:'Sora',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#fff;
  transition:opacity .2s; display:flex; align-items:center; justify-content:center; gap:8px;
}
.wh-btn:hover { opacity:.88; }
.wh-btn:disabled { opacity:.5; cursor:not-allowed; }
@media (max-width:480px) {
  .wh-modal-box { padding:32px 20px 24px; }
}

/* ── GLOBAL MOBILE: aumento base de fonte ── */
@media (max-width:767px) {
  body { font-size:17px; }
}

/* ── BOTÃO FLUTUANTE WHATSAPP ── */
#wa-fab {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #075110;
  border: none;
  border-radius: 50px;
  padding: 13px 22px 13px 16px;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
}
#wa-fab:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
#wa-fab svg { flex-shrink: 0; }
.wa-fab-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.wa-fab-text span {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
}
@media (max-width: 767px) {
  #wa-fab {
    bottom: 20px;
    right: 16px;
    padding: 11px 16px 11px 12px;
    gap: 8px;
  }
  .wa-fab-text span { font-size: 11px; }
}
