/* ═══════════════════════════════════════════════════════
   BASE — Reset, body, mobile menu, utilitários legados
   Fontes: DM Sans (body) · Playfair Display (headings) · JetBrains Mono (labels)
   ═══════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
    background: #F6F9F7;
    color: rgba(18,33,26,0.938);
    font-family: 'Poppins', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
    overflow-x: hidden;
    margin: 0;
}

.font-heading {
    font-family: 'Playfair Display', Georgia, serif;
}

/* ── Mobile menu ── */
#mobile-menu {
    /* Acima do .site-header (z-index 1000): senão o header fica por cima
       da faixa superior do menu e engole o toque no botão de fechar. */
    position: fixed; inset: 0; z-index: 1100;
    background: #F6F9F7;
    display: flex; flex-direction: column; padding: 24px;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);

    /* O menu tem 9 links de 62px, mais o cabeçalho e o botão do painel:
       passa de 760px de altura. Num aparelho de 640px o conteúdo era
       cortado no "FAQ" e o botão ficava inalcançável, porque a camada é
       fixed em inset:0 e não rolava. */
    overflow-y: auto;
    /* Sem isto, chegar ao fim da rolagem do menu passa a rolar a página
       atrás dele. O body já fica com overflow:hidden enquanto o menu está
       aberto, mas o encadeamento acontece antes disso valer no iOS. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    /* Camada de tela cheia: respeita o entalhe em cima e a barra de
       gestos embaixo, senão o botão do painel fica sob o indicador. */
    padding-top: max(24px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* A lista cresce para empurrar o botão ao pé em telas altas, mas nunca
   encolhe abaixo do próprio conteúdo em telas curtas: é o que mantém a
   rolagem funcionando em vez de espremer os links. */
#mobile-menu nav { flex-shrink: 0; }
#mobile-menu.open { transform: translateX(0); }

.mobile-link {
    display: block; padding: 16px 0;
    font-size: 24px; font-weight: 300;
    color: rgba(18,33,26,0.766);
    text-decoration: none;
    border-bottom: 1px solid rgba(18,33,26,0.078);
    transition: color 0.2s;
}
.mobile-link:hover { color: var(--ink); }

/* ── Utilitários ── */
.dot-grid {
    background-image: radial-gradient(rgba(18,33,26,0.072) 1px, transparent 1px);
    background-size: 28px 28px;
}

.ed-rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(18,33,26,0.104) 30%, rgba(18,33,26,0.104) 70%, transparent);
}

.btn-shimmer { position: relative; overflow: hidden; }
.btn-shimmer::after {
    content: ''; position: absolute; inset: -50%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
    transform: translateX(-100%) rotate(25deg);
}
.btn-shimmer:hover::after {
    transform: translateX(100%) rotate(25deg);
    transition: transform 1.2s cubic-bezier(0.16,1,0.3,1);
}

.rise-up {
    opacity: 0; transform: translateY(22px);
    animation: riseUp 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes riseUp { to { opacity: 1; transform: translateY(0); } }

/* ── Marquee vertical (legado — seções de prova social) ── */
@keyframes scrollUp {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}
.marquee-track { animation: scrollUp 42s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

/* ── Cards (mockups internos) ── */
.r-card {
    background: rgba(251,191,36,0.04);
    border: 1px solid rgba(251,191,36,0.16);
    border-radius: 12px;
    padding: 10px;
}
.a-card {
    background: rgba(16,185,129,0.05);
    border: 1px solid rgba(16,185,129,0.18);
    border-radius: 12px;
    padding: 10px;
}
.a-card-warn {
    background: rgba(251,191,36,0.04);
    border: 1px solid rgba(251,191,36,0.18);
    border-radius: 12px;
    padding: 10px;
}
.insight-card { border-radius: 10px; padding: 8px; }

.star   { color: #fbbf24; width: 10px; height: 10px; }
.star-e { color: rgba(18,33,26,0.156); width: 10px; height: 10px; }

.gg {
    display: inline-flex; align-items: center; justify-content: center;
    width: 12px; height: 12px; border-radius: 50%;
    background: linear-gradient(135deg,#4285F4,#34A853,#FBBC05,#EA4335);
    color: #fff; font-size: 7px; font-weight: 800; line-height: 1;
}

.sp { fill-rule: evenodd; }

/* ── Map pin pulse (seção Agravante) ── */
@keyframes pinPulse {
    0%   { transform: scale(1); opacity: 0.7; }
    70%  { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(1.8); opacity: 0; }
}
.ds-pin-pulse { animation: pinPulse 2s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .rise-up        { animation: none; opacity: 1; transform: none; }
    .marquee-track  { animation: none; }
    .btn-shimmer::after { display: none; }
    .ds-pin-pulse   { animation: none; opacity: 0; }
}