/* ==========================================================================
   GrowMap — Design System 2026
   Inteligência de Mercado para Expansão Comercial

   Arquivo ÚNICO da vitrine pública. Substitui landing.css, landing-modern.css
   e landing-premium.css. Define tokens, tipografia, componentes e dark mode.

   Ordem: 1. Tokens · 2. Base · 3. Navbar · 4. Botões · 5. Seções
          6. Hero · 7. Cards · 8. Dados · 9. Formulários · 10. Rodapé
          11. Movimento · 12. Responsivo
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* --- Marca ---------------------------------------------------------- */
    --gm-deep-blue: #0F3D91;
    --gm-tech-blue: #1E88E5;
    --gm-turquoise: #16B8A6;
    --gm-growth: #35C46B;
    --gm-graphite: #1E293B;
    --gm-accent: #18C7D3;

    /* Gradiente oficial */
    --gm-gradient: linear-gradient(90deg,
            #35C46B 0%,
            #16B8A6 35%,
            #1E88E5 70%,
            #0F3D91 100%);
    --gm-gradient-diag: linear-gradient(135deg,
            #35C46B 0%,
            #16B8A6 35%,
            #1E88E5 70%,
            #0F3D91 100%);
    --gm-gradient-soft: linear-gradient(135deg,
            rgba(53, 196, 107, .12) 0%,
            rgba(22, 184, 166, .12) 35%,
            rgba(30, 136, 229, .12) 70%,
            rgba(15, 61, 145, .12) 100%);

    /* Variantes para superfícies PEQUENAS (ícones, badges, números).
       O gradiente oficial de 4 paradas, comprimido em 40px, mostra quase
       só a faixa verde — o oposto do posicionamento. Estas versões entram
       pelo turquesa e fecham no azul, mantendo a leitura tecnológica. */
    --gm-gradient-mark: linear-gradient(135deg, #16B8A6 0%, #1E88E5 55%, #0F3D91 100%);
    --gm-gradient-text: linear-gradient(90deg, #16B8A6 0%, #1E88E5 58%, #0F3D91 100%);

    /* --- Superfícies (light) -------------------------------------------- */
    --gm-bg: #FFFFFF;
    --gm-bg-alt: #F7F9FC;
    --gm-surface: #FFFFFF;
    --gm-surface-2: #F1F5FA;
    --gm-ink: #0B1220;
    --gm-text: #334155;
    --gm-muted: #64748B;
    --gm-line: #E4EAF3;
    --gm-line-strong: #CBD7E8;

    /* Superfície escura fixa (seções de contraste em qualquer tema) */
    --gm-night: #08111F;
    --gm-night-2: #101A2D;
    --gm-night-3: #1A2740;

    /* --- Forma ---------------------------------------------------------- */
    --gm-r-sm: 10px;
    --gm-r: 14px;
    --gm-r-lg: 20px;
    --gm-r-xl: 28px;

    /* --- Elevação ------------------------------------------------------- */
    --gm-shadow-xs: 0 1px 2px rgba(11, 18, 32, .04);
    --gm-shadow-sm: 0 2px 8px rgba(11, 18, 32, .05);
    --gm-shadow: 0 12px 32px rgba(11, 18, 32, .07);
    --gm-shadow-lg: 0 28px 64px rgba(11, 18, 32, .10);
    --gm-ring: 0 0 0 4px rgba(30, 136, 229, .14);

    /* --- Movimento ------------------------------------------------------ */
    --gm-ease: cubic-bezier(.16, .84, .44, 1);
    --gm-fast: .18s var(--gm-ease);
    --gm-base: .32s var(--gm-ease);

    /* --- Compatibilidade com o CSS legado ------------------------------- */
    --primary-green: var(--gm-tech-blue);
    --primary-green-dark: var(--gm-deep-blue);
    --primary-green-light: var(--gm-turquoise);
    --brand-gradient: var(--gm-gradient-diag);
    --text-main: var(--gm-ink);
    --text-muted: var(--gm-muted);
    --bg-light: var(--gm-bg);
    --white: #FFFFFF;
    --gm-grad: var(--gm-gradient-diag);
    --gm-grad-bright: var(--gm-gradient-diag);
    --gm-green: var(--gm-tech-blue);
    --gm-green-bright: var(--gm-turquoise);
    --gm-forest: var(--gm-deep-blue);
    --gm-forest-deep: var(--gm-night);
    --gm-sand: var(--gm-bg-alt);
    --gm-white: #FFFFFF;
    --gm-radius: var(--gm-r);
    --gm-radius-lg: var(--gm-r-lg);
    --gm-shadow-premium: var(--gm-shadow-lg);
}

/* --- Dark mode ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --gm-bg: #08111F;
        --gm-bg-alt: #0C1626;
        --gm-surface: #101A2D;
        --gm-surface-2: #1A2740;
        --gm-ink: #FFFFFF;
        --gm-text: #CBD5E1;
        --gm-muted: #94A3B8;
        --gm-line: #1E2C45;
        --gm-line-strong: #2A3B58;
        --gm-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
        --gm-shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
        --gm-shadow: 0 14px 36px rgba(0, 0, 0, .45);
        --gm-shadow-lg: 0 30px 70px rgba(0, 0, 0, .55);
    }
}

:root[data-theme="dark"] {
    --gm-bg: #08111F;
    --gm-bg-alt: #0C1626;
    --gm-surface: #101A2D;
    --gm-surface-2: #1A2740;
    --gm-ink: #FFFFFF;
    --gm-text: #CBD5E1;
    --gm-muted: #94A3B8;
    --gm-line: #1E2C45;
    --gm-line-strong: #2A3B58;
    --gm-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --gm-shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
    --gm-shadow: 0 14px 36px rgba(0, 0, 0, .45);
    --gm-shadow-lg: 0 30px 70px rgba(0, 0, 0, .55);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--gm-text);
    background: var(--gm-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color var(--gm-base), color var(--gm-base);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.heading-xl,
.heading-section,
.section-title,
.display-num {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.15;
    color: var(--gm-ink);
}

p { color: var(--gm-text); }

a { text-decoration: none; }

::selection {
    background: rgba(30, 136, 229, .18);
    color: var(--gm-ink);
}

:focus-visible {
    outline: 2px solid var(--gm-tech-blue);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Texto com o gradiente da marca */
.text-gradient,
.brand-accent,
.heading-xl .accent,
.heading-xl span.accent {
    background: var(--gm-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.gm-container-narrow {
    max-width: 780px;
    margin-inline: auto;
}

/* ==========================================================================
   3. NAVBAR
   ========================================================================== */

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1050;
    padding: 1rem 0;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color var(--gm-base), border-color var(--gm-base),
                box-shadow var(--gm-base), padding var(--gm-base);
}

.navbar.scrolled {
    padding: .65rem 0;
    background: color-mix(in srgb, var(--gm-bg) 82%, transparent);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--gm-line);
    box-shadow: 0 4px 24px rgba(11, 18, 32, .05);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    transition: opacity var(--gm-fast);
}

.navbar-brand:hover { opacity: .82; }

.navbar-brand img {
    height: 38px;
    width: auto;
    display: block;
}

.navbar-brand .brand-name {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--gm-ink);
}

.nav-link {
    position: relative;
    margin: 0 .1rem;
    padding: .5rem .85rem !important;
    font-size: .94rem;
    font-weight: 500;
    color: var(--gm-text);
    border-radius: var(--gm-r-sm);
    transition: color var(--gm-fast), background-color var(--gm-fast);
}

.nav-link:hover,
.nav-link.active {
    color: var(--gm-ink);
    background: var(--gm-surface-2);
}

/* Remove o sublinhado animado do sistema antigo */
.nav-link::after { display: none !important; }
.nav-link.dropdown-toggle::after {
    display: inline-block !important;
    border: none;
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .7rem;
    margin-left: .35rem;
    opacity: .5;
    vertical-align: middle;
}

.dropdown-menu {
    margin-top: .5rem;
    padding: .5rem;
    border: 1px solid var(--gm-line);
    border-radius: var(--gm-r);
    background: var(--gm-surface);
    box-shadow: var(--gm-shadow);
    min-width: 268px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem .75rem;
    border-radius: var(--gm-r-sm);
    font-size: .92rem;
    font-weight: 500;
    color: var(--gm-text);
    white-space: normal;
    transition: background-color var(--gm-fast), color var(--gm-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--gm-surface-2);
    color: var(--gm-ink);
}

.dropdown-item i {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--gm-gradient-soft);
    color: var(--gm-tech-blue);
    font-size: .85rem;
}

.dropdown-item small {
    display: block;
    font-weight: 400;
    font-size: .78rem;
    color: var(--gm-muted);
}

.dropdown-divider { border-color: var(--gm-line); }

/* Alternador de tema */
.theme-toggle {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--gm-line);
    border-radius: var(--gm-r-sm);
    background: transparent;
    color: var(--gm-text);
    font-size: .9rem;
    cursor: pointer;
    transition: background-color var(--gm-fast), color var(--gm-fast), border-color var(--gm-fast);
}

.theme-toggle:hover {
    background: var(--gm-surface-2);
    color: var(--gm-ink);
    border-color: var(--gm-line-strong);
}

.navbar-toggler {
    border: 1px solid var(--gm-line);
    border-radius: var(--gm-r-sm);
    padding: .4rem .6rem;
}

.navbar-toggler:focus { box-shadow: var(--gm-ring); }

/* Todo herói é escuro: enquanto a navbar está transparente, o texto precisa
   inverter — caso contrário fica cinza-escuro sobre fundo noturno. */
body:has(:is(.hero-section, .hero-home, .hero-flat, .hero-night, .censo-hero, .cnpj-hero, .redes-hero, .servicos-hero)) .navbar:not(.scrolled) .brand-name,
body:has(:is(.hero-section, .hero-home, .hero-flat, .hero-night, .censo-hero, .cnpj-hero, .redes-hero, .servicos-hero)) .navbar:not(.scrolled) .nav-link {
    color: rgba(255, 255, 255, .88);
}

body:has(:is(.hero-section, .hero-home, .hero-flat, .hero-night, .censo-hero, .cnpj-hero, .redes-hero, .servicos-hero)) .navbar:not(.scrolled) .nav-link:hover,
body:has(:is(.hero-section, .hero-home, .hero-flat, .hero-night, .censo-hero, .cnpj-hero, .redes-hero, .servicos-hero)) .navbar:not(.scrolled) .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

body:has(:is(.hero-section, .hero-home, .hero-flat, .hero-night, .censo-hero, .cnpj-hero, .redes-hero, .servicos-hero)) .navbar:not(.scrolled) .theme-toggle {
    color: rgba(255, 255, 255, .88);
    border-color: rgba(255, 255, 255, .22);
}

body:has(:is(.hero-section, .hero-home, .hero-flat, .hero-night, .censo-hero, .cnpj-hero, .redes-hero, .servicos-hero)) .navbar:not(.scrolled) .theme-toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .4);
}

body:has(:is(.hero-section, .hero-home, .hero-flat, .hero-night, .censo-hero, .cnpj-hero, .redes-hero, .servicos-hero)) .navbar:not(.scrolled) .navbar-toggler {
    border-color: rgba(255, 255, 255, .28);
}

body:has(:is(.hero-section, .hero-home, .hero-flat, .hero-night, .censo-hero, .cnpj-hero, .redes-hero, .servicos-hero)) .navbar:not(.scrolled) .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
}

/* O menu suspenso continua sendo superfície clara, então não inverte. */
body:has(:is(.hero-section, .hero-home, .hero-flat, .hero-night, .censo-hero, .cnpj-hero, .redes-hero, .servicos-hero)) .navbar:not(.scrolled) .dropdown-menu .dropdown-item {
    color: var(--gm-text);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2364748B' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
}

/* ==========================================================================
   4. BOTÕES
   ========================================================================== */

.btn {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: -.01em;
    border-radius: var(--gm-r-sm);
    padding: .7rem 1.35rem;
    transition: transform var(--gm-fast), box-shadow var(--gm-fast),
                background-color var(--gm-fast), color var(--gm-fast),
                border-color var(--gm-fast), opacity var(--gm-fast);
}

.btn-lg {
    padding: .9rem 1.7rem;
    font-size: 1rem;
    border-radius: var(--gm-r);
}

.btn-sm { padding: .45rem .9rem; font-size: .85rem; }

/* Primário — gradiente oficial completo, visível de ponta a ponta */
.btn-primary-green,
.btn-gm-primary {
    position: relative;
    overflow: hidden;
    border: none;
    color: #fff;
    background: var(--gm-gradient);
    box-shadow: 0 8px 22px rgba(15, 61, 145, .22);
}

.btn-primary-green:hover,
.btn-gm-primary:hover {
    color: #fff;
    filter: brightness(1.07) saturate(1.05);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(15, 61, 145, .3);
}

.btn-primary-green:active,
.btn-gm-primary:active { transform: translateY(0); }

/* Secundário — contorno neutro */
.btn-gm-secondary,
.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--gm-ink);
    background: var(--gm-surface);
    border: 1px solid var(--gm-line-strong);
}

.btn-gm-secondary:hover,
.btn-hero-secondary:hover {
    color: var(--gm-ink);
    background: var(--gm-surface-2);
    border-color: var(--gm-muted);
    transform: translateY(-2px);
}

/* Sobre fundo escuro */
.on-night .btn-gm-secondary,
.on-night .btn-hero-secondary,
.final-cta .btn-gm-secondary,
.final-cta .btn-hero-secondary,
.hero-night .btn-hero-secondary {
    color: #fff;
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .28);
    backdrop-filter: blur(6px);
}

.on-night .btn-gm-secondary:hover,
.on-night .btn-hero-secondary:hover,
.final-cta .btn-gm-secondary:hover,
.final-cta .btn-hero-secondary:hover,
.hero-night .btn-hero-secondary:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

/* Mapeia os botões Bootstrap legados para a marca */
.btn-success,
.btn-primary {
    border: none;
    background: var(--gm-gradient);
    color: #fff;
}

.btn-success:hover,
.btn-primary:hover {
    filter: brightness(1.07);
    color: #fff;
    transform: translateY(-2px);
}

.btn-outline-success,
.btn-outline-primary {
    color: var(--gm-tech-blue);
    border: 1px solid var(--gm-tech-blue);
    background: transparent;
}

.btn-outline-success:hover,
.btn-outline-primary:hover {
    background: var(--gm-tech-blue);
    border-color: var(--gm-tech-blue);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--gm-text);
    border-color: var(--gm-line-strong);
}

.btn-text {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: 0;
    color: var(--gm-tech-blue);
    font-weight: 600;
    background: none;
    border: none;
}

.btn-text:hover { color: var(--gm-deep-blue); gap: .7rem; }

/* ==========================================================================
   5. SEÇÕES
   ========================================================================== */

.section-padding { padding: 112px 0; }
.section-white { background: var(--gm-bg); }
.section-sand,
.section-alt { background: var(--gm-bg-alt); }

.section-night {
    background: var(--gm-night);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.section-night h1, .section-night h2, .section-night h3,
.section-night h4, .section-night h5, .section-night .section-title,
.section-night .heading-section { color: #fff; }

.section-night p, .section-night .subheading { color: #CBD5E1; }

/* Etiqueta acima do título */
.gm-eyebrow,
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .85rem;
    margin-bottom: 1.15rem;
    border: 1px solid var(--gm-line);
    border-radius: 999px;
    background: var(--gm-surface-2);
    color: var(--gm-tech-blue);
    font-family: 'Inter', sans-serif;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1;
}

.gm-eyebrow .dot,
.section-eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gm-growth);
    box-shadow: 0 0 0 3px rgba(53, 196, 107, .2);
}

.gm-eyebrow.on-dark,
.section-eyebrow.on-dark,
.section-night .gm-eyebrow,
.section-night .section-eyebrow {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    color: var(--gm-accent);
}

.heading-xl {
    font-size: clamp(2.4rem, 5.4vw, 4.15rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.04em;
    margin-bottom: 1.35rem;
}

.heading-section,
.section-title {
    font-size: clamp(1.9rem, 3.2vw, 2.9rem);
    font-weight: 700;
    line-height: 1.12;
    margin-bottom: 1.1rem;
}

.section-title { margin-bottom: 1.1rem; }

.subheading {
    font-size: 1.12rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--gm-muted);
    margin-bottom: 2rem;
}

.section-head {
    max-width: 720px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.section-head .subheading { margin-bottom: 0; }

/* ==========================================================================
   6. HERO
   ========================================================================== */

/* A PRIMEIRA seção de toda página é escura — é a assinatura da marca.
   Vale para os heróis do design system e para os herdados das páginas
   de recurso (censo / cnpj / redes). */
.hero-section,
.hero-home,
.hero-flat,
.censo-hero,
.cnpj-hero,
.redes-hero,
.servicos-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 128px 0 84px;
    background: var(--gm-night);
    color: #fff;
    /* Ocupa a tela inteira. `min-height` (não `height`) para que o conteúdo
       possa crescer além da dobra quando for maior que a viewport. */
    min-height: 100vh;
    min-height: 100svh;
}

.hero-home { padding: 136px 0 92px; }

.hero-section .container,
.hero-home .container,
.hero-flat .container,
.censo-hero .container,
.cnpj-hero .container,
.redes-hero .container,
.servicos-hero .container {
    position: relative;
    z-index: 2;
}

/* Malha de gradiente da marca sobre o fundo noturno */
.hero-section::before,
.hero-home::before,
.hero-flat::before,
.censo-hero::before,
.cnpj-hero::before,
.redes-hero::before,
.servicos-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(58% 46% at 10% 6%, rgba(53, 196, 107, .22), transparent 62%),
        radial-gradient(52% 44% at 84% 2%, rgba(30, 136, 229, .26), transparent 60%),
        radial-gradient(46% 40% at 60% 98%, rgba(22, 184, 166, .16), transparent 62%);
}

/* Grade técnica */
.hero-section::after,
.hero-home::after,
.hero-flat::after,
.censo-hero::after,
.cnpj-hero::after,
.redes-hero::after,
.servicos-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 78% 62% at 50% 40%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 40%, #000 20%, transparent 75%);
}

/* --- Conteúdo do herói sobre fundo escuro ------------------------------- */
.hero-section :is(h1, h2, h3, h4, .heading-xl, .heading-section, .section-title),
.hero-home :is(h1, h2, h3, h4, .heading-xl),
.hero-flat :is(h1, h2, h3, h4, .heading-xl),
.censo-hero :is(h1, h2, h3, h4, .heading-xl),
.cnpj-hero :is(h1, h2, h3, h4, .heading-xl),
.redes-hero :is(h1, h2, h3, h4, .heading-xl),
.servicos-hero :is(h1, h2, h3, h4, .heading-xl) { color: #fff; }

.hero-section :is(.subheading, .lead, p),
.hero-home :is(.subheading, .lead, p),
.hero-flat :is(.subheading, .lead, p),
.censo-hero :is(.subheading, .lead, p),
.cnpj-hero :is(.subheading, .lead, p),
.redes-hero :is(.subheading, .lead, p),
.servicos-hero :is(.subheading, .lead, p) { color: #CBD5E1; }

.hero-section .subheading,
.hero-home .subheading,
.hero-flat .subheading { font-size: clamp(1.05rem, 1.4vw, 1.25rem); }

/* Etiqueta do herói assume automaticamente a variante escura */
.hero-section .gm-eyebrow,
.hero-section .section-eyebrow,
.hero-home .gm-eyebrow,
.hero-flat .gm-eyebrow,
.censo-hero .gm-eyebrow,
.cnpj-hero .gm-eyebrow,
.redes-hero .gm-eyebrow,
.servicos-hero .gm-eyebrow {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    color: var(--gm-accent);
}

/* Números e divisórias do herói */
.hero-section :is(.hero-stats, .hero-trust-row),
.hero-home :is(.hero-stats, .hero-trust-row) { border-top-color: rgba(255, 255, 255, .12); }

.hero-section :is(.hero-stats .stat .lbl, .hero-trust-row span, .hero-note),
.hero-home :is(.hero-stats .stat .lbl, .hero-trust-row span, .hero-note) { color: #94A3B8; }

/* Botão secundário dentro do herói */
.hero-section :is(.btn-gm-secondary, .btn-hero-secondary),
.hero-home :is(.btn-gm-secondary, .btn-hero-secondary),
.hero-flat :is(.btn-gm-secondary, .btn-hero-secondary),
.censo-hero :is(.btn-gm-secondary, .btn-hero-secondary),
.cnpj-hero :is(.btn-gm-secondary, .btn-hero-secondary),
.redes-hero :is(.btn-gm-secondary, .btn-hero-secondary) {
    color: #fff;
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .28);
    backdrop-filter: blur(6px);
}

.hero-section :is(.btn-gm-secondary, .btn-hero-secondary):hover,
.hero-home :is(.btn-gm-secondary, .btn-hero-secondary):hover,
.hero-flat :is(.btn-gm-secondary, .btn-hero-secondary):hover,
.censo-hero :is(.btn-gm-secondary, .btn-hero-secondary):hover,
.cnpj-hero :is(.btn-gm-secondary, .btn-hero-secondary):hover,
.redes-hero :is(.btn-gm-secondary, .btn-hero-secondary):hover {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .5);
}

/* Cartões translúcidos quando aparecem dentro do herói */
.hero-section :is(.info-tile, .gm-card, .contato-channel, .pillar),
.hero-flat :is(.info-tile, .gm-card, .contato-channel, .pillar) {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: none;
}

.hero-section :is(.info-tile, .gm-card, .contato-channel, .pillar) :is(h4, h5, strong),
.hero-flat :is(.info-tile, .gm-card, .contato-channel, .pillar) :is(h4, h5, strong) { color: #fff; }

.hero-section :is(.info-tile, .gm-card, .contato-channel, .pillar) :is(p, span),
.hero-flat :is(.info-tile, .gm-card, .contato-channel, .pillar) :is(p, span) { color: #94A3B8; }

.hero-section .contato-channel i,
.hero-flat .contato-channel i {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    color: var(--gm-accent);
}

.hero-home .heading-xl {
    max-width: 19ch;
    font-size: clamp(2.6rem, 5.2vw, 4.3rem);
}

.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2.2rem;
}

.hero-section.text-center .hero-cta-row,
.hero-flat.text-center .hero-cta-row { justify-content: center; }

.hero-note {
    margin-top: 1.1rem;
    font-size: .87rem;
    color: var(--gm-muted);
}

/* Hero escuro — para páginas que pedem contraste */
.hero-night {
    background: var(--gm-night);
    color: #fff;
}

.hero-night::before {
    background:
        radial-gradient(58% 46% at 10% 6%, rgba(53, 196, 107, .22), transparent 62%),
        radial-gradient(52% 44% at 84% 2%, rgba(30, 136, 229, .26), transparent 60%),
        radial-gradient(46% 40% at 60% 98%, rgba(22, 184, 166, .16), transparent 62%);
}

.hero-night::after {
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
    opacity: 1;
}

.hero-night .heading-xl { color: #fff; }
.hero-night .subheading { color: #CBD5E1; }

/* Linha do gradiente no topo do hero */
.hero-section > .gm-topline,
.hero-home > .gm-topline {
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--gm-gradient);
    z-index: 3;
}

/* Neutraliza os fundos FOTOGRÁFICOS herdados.
   Restrito às classes que carregavam url(...): um `background-image: none`
   amplo derrubaria também os linear-gradient() legítimos dos heróis. */
.hero-sobre, .hero-contato, .hero-sobre-full, .hero-contato-full,
.hero-servicos-full, .hero-home-lg {
    background-image: none !important;
    background-attachment: initial !important;
}

.hero-leaves .hleaf, #leaves-container { display: none !important; }

/* Painel "moldura de navegador" — mantido, retematizado */
.gm-browser-frame {
    border: 1px solid var(--gm-line);
    border-radius: var(--gm-r-lg);
    background: var(--gm-surface);
    overflow: hidden;
    box-shadow: var(--gm-shadow-lg);
}

.gm-browser-frame .frame-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .9rem;
    background: var(--gm-surface-2);
    border-bottom: 1px solid var(--gm-line);
}

.gm-browser-frame .frame-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.gm-browser-frame .frame-url {
    margin-left: .4rem;
    font-size: .78rem;
    color: var(--gm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gm-browser-frame .frame-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .6rem .9rem;
    background: var(--gm-surface);
}

.gm-browser-frame .frame-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .6rem .9rem;
    background: var(--gm-surface-2);
    border-top: 1px solid var(--gm-line);
    font-size: .85rem;
    color: var(--gm-ink);
}

/* ==========================================================================
   7. CARDS
   ========================================================================== */

.card-feature,
.service-card,
.info-tile,
.values-card,
.gm-card {
    position: relative;
    height: 100%;
    padding: 2rem;
    background: var(--gm-surface);
    border: 1px solid var(--gm-line);
    border-radius: var(--gm-r-lg);
    box-shadow: var(--gm-shadow-xs);
    transition: transform var(--gm-base), box-shadow var(--gm-base),
                border-color var(--gm-base);
}

.card-feature:hover,
.service-card:hover,
.info-tile:hover,
.gm-card:hover {
    transform: translateY(-4px);
    border-color: var(--gm-line-strong);
    box-shadow: var(--gm-shadow);
}

.card-feature h3,
.service-card h3,
.gm-card h3 {
    font-size: 1.22rem;
    font-weight: 700;
    margin-bottom: .6rem;
}

.card-feature p,
.service-card p,
.gm-card p {
    font-size: .97rem;
    color: var(--gm-muted);
    margin-bottom: 0;
}

/* Ícone padrão do card */
.gm-icon,
.card-feature .b-icon,
.service-card .s-icon,
.info-tile .t-icon,
.feature-icon,
.feature-icon-cnpj,
.feature-icon-redes {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 1.3rem;
    border-radius: 12px;
    background: var(--gm-gradient-soft);
    border: 1px solid var(--gm-line);
    color: var(--gm-tech-blue);
    font-size: 1.15rem;
}

.gm-icon--solid {
    background: var(--gm-gradient-mark);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px rgba(15, 61, 145, .22);
}

/* Ícone dos cards antigos (usavam <i> direto) */
.card-feature > i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1.3rem;
    border-radius: 12px;
    background: var(--gm-gradient-soft);
    border: 1px solid var(--gm-line);
    color: var(--gm-tech-blue);
    font-size: 1.15rem;
    -webkit-text-fill-color: currentColor;
}

.service-badge {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--gm-surface-2);
    border: 1px solid var(--gm-line);
    color: var(--gm-muted);
    font-family: 'Inter', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.service-list {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 0;
}

.service-list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .65rem;
    font-size: .93rem;
    color: var(--gm-muted);
}

.service-list li i {
    margin-top: .28rem;
    font-size: .72rem;
    color: var(--gm-growth);
}

.values-card {
    border-left: 3px solid transparent;
    border-image: var(--gm-gradient) 1;
    border-image-slice: 1;
}

.info-tile { padding: 1.7rem; }
.info-tile h5 { font-size: 1.05rem; font-weight: 700; margin-bottom: .3rem; }
.info-tile p { color: var(--gm-muted); margin: 0; font-size: .93rem; }

.check-row,
.map-check {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .9rem;
}

.check-row .ico,
.map-check .ico {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--gm-gradient-soft);
    color: var(--gm-turquoise);
    font-size: .72rem;
}

.map-check span { color: var(--gm-text); font-weight: 500; }

/* Passos numerados */
.gm-steps { counter-reset: step; }

.gm-step {
    position: relative;
    height: 100%;
    padding: 1.9rem 1.6rem;
    border-radius: var(--gm-r-lg);
    background: var(--gm-surface);
    border: 1px solid var(--gm-line);
}

.gm-step::before {
    counter-increment: step;
    content: counter(step);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 1rem;
    border-radius: 10px;
    background: var(--gm-gradient-mark);
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: .95rem;
}

.gm-step h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }
.gm-step p { font-size: .95rem; color: var(--gm-muted); margin: 0; }

/* Cards Bootstrap genéricos */
.card {
    border: 1px solid var(--gm-line);
    border-radius: var(--gm-r-lg);
    background: var(--gm-surface);
    box-shadow: var(--gm-shadow-xs);
}

.card-header, .card-footer {
    background: var(--gm-surface-2);
    border-color: var(--gm-line);
}

/* --- Grade de segmentos ------------------------------------------------- */
.segment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}

.segment-card {
    display: block;
    padding: 1.6rem 1.4rem;
    border-radius: var(--gm-r-lg);
    background: var(--gm-surface);
    border: 1px solid var(--gm-line);
    color: inherit;
    transition: transform var(--gm-base), box-shadow var(--gm-base),
                border-color var(--gm-base);
}

.segment-card:hover {
    transform: translateY(-4px);
    border-color: var(--gm-line-strong);
    box-shadow: var(--gm-shadow);
    color: inherit;
}

.segment-card .seg-ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 1rem;
    border-radius: 11px;
    background: var(--gm-gradient-soft);
    border: 1px solid var(--gm-line);
    color: var(--gm-tech-blue);
    font-size: 1.05rem;
}

.segment-card h4 {
    font-size: 1.02rem;
    font-weight: 700;
    margin-bottom: .3rem;
    color: var(--gm-ink);
}

.segment-card p {
    font-size: .88rem;
    color: var(--gm-muted);
    margin: 0;
    line-height: 1.55;
}

/* --- Lista de módulos --------------------------------------------------- */
.module-row {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--gm-line);
}

.module-row:last-child { border-bottom: none; }

.module-row .mod-ico {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--gm-gradient-soft);
    border: 1px solid var(--gm-line);
    color: var(--gm-tech-blue);
    font-size: 1.05rem;
}

.module-row h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.module-row .mod-tag {
    display: inline-block;
    margin-left: .55rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    background: var(--gm-surface-2);
    border: 1px solid var(--gm-line);
    font-family: 'Inter', sans-serif;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gm-muted);
    vertical-align: middle;
}

.module-row p { font-size: .95rem; color: var(--gm-muted); margin: 0; }

/* ==========================================================================
   8. DADOS E NÚMEROS
   ========================================================================== */

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem 1rem;
}

.stat-item { text-align: center; }

.stat-item .num,
.display-num {
    display: block;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: clamp(1.9rem, 3.2vw, 2.7rem);
    line-height: 1;
    letter-spacing: -.04em;
    background: var(--gm-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-item .lbl {
    display: block;
    margin-top: .6rem;
    font-size: .87rem;
    color: var(--gm-muted);
}

/* Barra de estatísticas do hero */
.hero-stats,
.hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem;
    margin-top: 3rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--gm-line);
}

.hero-stats .stat,
.hero-trust-row div { min-width: 110px; }

.hero-stats .stat .num,
.hero-trust-row strong {
    display: block;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    line-height: 1;
    letter-spacing: -.03em;
    background: var(--gm-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-stats .stat .lbl,
.hero-trust-row span {
    display: block;
    margin-top: .45rem;
    font-size: .82rem;
    color: var(--gm-muted);
}

.section-night .stat-item .lbl,
.hero-night .hero-stats .stat .lbl { color: #94A3B8; }

.hero-night .hero-stats,
.hero-night .hero-trust-row { border-top-color: rgba(255, 255, 255, .12); }

/* Logotipo / prova social */
.logo-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 2.5rem;
    opacity: .55;
}

.logo-strip span {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--gm-muted);
    letter-spacing: -.01em;
}

/* Moldura do mapa demo */
.map-frame,
.map-demo-container {
    position: relative;
    border-radius: var(--gm-r-xl);
    overflow: hidden;
    background: var(--gm-surface);
    border: 1px solid var(--gm-line);
    padding: 10px;
    box-shadow: var(--gm-shadow-lg) !important;
    transition: transform var(--gm-base), box-shadow var(--gm-base);
}

.map-frame { height: 520px; }
.map-frame #landing-map { border-radius: calc(var(--gm-r-xl) - 10px); }
.map-demo-container:hover { transform: translateY(-4px); }

.map-legend-landing {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    padding: 14px 16px;
    border-radius: var(--gm-r);
    background: color-mix(in srgb, var(--gm-surface) 92%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid var(--gm-line);
    box-shadow: var(--gm-shadow);
    font-family: 'Inter', sans-serif;
    font-size: .82rem;
    color: var(--gm-text);
}

.legend-item { display: flex; align-items: center; margin-bottom: 5px; }

.legend-color {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    margin-right: 10px;
}

/* Mapa em tom neutro para combinar com a identidade */
.leaflet-tile-pane { filter: grayscale(100%) contrast(.92) brightness(1.04); }

:root[data-theme="dark"] .leaflet-tile-pane,
:root[data-theme="dark"] .leaflet-container { filter: grayscale(100%) invert(1) brightness(.92) contrast(.9); }

/* ==========================================================================
   9. FORMULÁRIOS
   ========================================================================== */

.contact-form {
    max-width: 720px;
    margin: 0 auto;
    padding: 2.6rem;
    background: var(--gm-surface);
    border: 1px solid var(--gm-line);
    border-radius: var(--gm-r-xl);
    box-shadow: var(--gm-shadow);
}

.form-control,
.form-select {
    padding: .72rem .9rem;
    background: var(--gm-bg-alt);
    border: 1px solid var(--gm-line);
    border-radius: var(--gm-r-sm);
    color: var(--gm-ink);
    font-size: .95rem;
    transition: border-color var(--gm-fast), box-shadow var(--gm-fast),
                background-color var(--gm-fast);
}

.form-control::placeholder { color: var(--gm-muted); opacity: .75; }

.form-control:focus,
.form-select:focus {
    background: var(--gm-surface);
    border-color: var(--gm-tech-blue);
    box-shadow: var(--gm-ring);
    color: var(--gm-ink);
}

.form-label {
    margin-bottom: .35rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--gm-ink);
}

/* ==========================================================================
   10. CTA FINAL E RODAPÉ
   ========================================================================== */

.final-cta,
.cta-area {
    position: relative;
    overflow: hidden;
    background: var(--gm-night);
    color: #fff;
    border-radius: var(--gm-r-xl);
}

.final-cta { border-radius: var(--gm-r-xl) var(--gm-r-xl) 0 0; }

.final-cta::before,
.cta-area::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(46% 60% at 12% 0%, rgba(53, 196, 107, .18), transparent 62%),
        radial-gradient(44% 58% at 88% 100%, rgba(30, 136, 229, .22), transparent 62%);
}

.final-cta::after,
.cta-area::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--gm-gradient);
}

.final-cta .container,
.cta-area > * { position: relative; z-index: 1; }

.final-cta h2, .final-cta .section-title, .final-cta .heading-section,
.cta-area h2, .cta-area .section-title { color: #fff; }

.final-cta p, .final-cta .subheading,
.cta-area p, .cta-area .subheading { color: #CBD5E1; }

.cta-area {
    padding: 3.2rem;
    text-align: center;
    border: none;
}

/* No tema escuro o fundo da página já é #08111F: as faixas noturnas
   precisam subir um degrau de elevação para não sumirem. */
:root[data-theme="dark"] .final-cta,
:root[data-theme="dark"] .cta-area,
:root[data-theme="dark"] .section-night,
:root[data-theme="dark"] footer { background: var(--gm-night-2); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .final-cta,
    :root:not([data-theme="light"]) .cta-area,
    :root:not([data-theme="light"]) .section-night,
    :root:not([data-theme="light"]) footer { background: var(--gm-night-2); }
}

footer {
    padding: 76px 0 34px;
    background: var(--gm-night);
    color: #94A3B8;
}

footer p, footer li, footer small { color: #94A3B8; }

footer h5 {
    margin-bottom: 1.25rem;
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
}

footer a { color: #94A3B8; transition: color var(--gm-fast); }
footer a:hover { color: #fff; }

footer hr { border-color: rgba(255, 255, 255, .08); }

.footer-brand-line {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    margin-bottom: .35rem;
}

footer .social-ico {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--gm-r-sm);
    background: rgba(255, 255, 255, .06);
    color: #CBD5E1;
    transition: background-color var(--gm-fast), color var(--gm-fast),
                transform var(--gm-fast);
}

footer .social-ico:hover {
    background: var(--gm-tech-blue);
    color: #fff;
    transform: translateY(-2px);
}

/* CTA fixo mobile */
#mobile-sticky-cta {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 1040;
    transform: translateY(130%);
    transition: transform var(--gm-base);
}

#mobile-sticky-cta.visible { transform: translateY(0); }

/* ==========================================================================
   11. MOVIMENTO
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .gm-reveal {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .65s var(--gm-ease), transform .65s var(--gm-ease);
    }

    .gm-reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   12. RESPONSIVO
   ========================================================================== */

@media (max-width: 1199.98px) {
    .nav-link { padding: .5rem .6rem !important; font-size: .9rem; }
}

@media (max-width: 991.98px) {
    .section-padding { padding: 76px 0; }

    .hero-section, .hero-flat,
    .censo-hero, .cnpj-hero, .redes-hero, .servicos-hero { padding: 112px 0 72px; }
    .hero-home { padding: 116px 0 76px; }

    .navbar-collapse {
        margin-top: .9rem;
        padding: 1rem;
        background: var(--gm-surface);
        border: 1px solid var(--gm-line);
        border-radius: var(--gm-r-lg);
        box-shadow: var(--gm-shadow-lg);
    }

    .navbar-collapse .nav-link {
        padding: .8rem .75rem !important;
        border-bottom: 1px solid var(--gm-line);
        border-radius: 0;
    }

    .navbar-collapse > ul > li:last-child .nav-link { border-bottom: none; }

    .navbar-collapse .btn-primary-green {
        display: block;
        width: 100%;
        margin-top: 1rem;
        text-align: center;
    }

    .dropdown-menu {
        border: none;
        box-shadow: none;
        background: var(--gm-surface-2);
        margin: .25rem 0 .5rem;
    }

    .hero-stats, .hero-trust-row { gap: 1.4rem 2rem; }
}

@media (max-width: 767.98px) {
    .section-padding { padding: 62px 0; }

    .heading-xl { font-size: clamp(2.1rem, 9vw, 3rem); }

    .hero-cta-row .btn { width: 100%; justify-content: center; }

    .card-feature, .service-card, .gm-card, .values-card { padding: 1.6rem; }

    .map-frame { height: 380px; }

    .final-cta, .cta-area { border-radius: var(--gm-r-lg) var(--gm-r-lg) 0 0; }

    .cta-area { padding: 2rem 1.4rem; }

    .segment-grid { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }

    .contact-form { padding: 1.6rem; }

    body.cta-visible { padding-bottom: 84px; }
}

@media (min-width: 768px) {
    #mobile-sticky-cta { display: none; }
}