/* ==========================================================================
   header.css — cabeçalho do site público (barra desktop, barra mobile e menu
   offcanvas) + a base tipográfica e o foco visível do site.

   Regras da casa:
   - Tudo do cabeçalho mira .site-header (ou .mobile-offcanvas), nunca a tag
     <header>/.navbar/.nav-link soltas: cards de planos usam <header>, e as
     abas de planos usam .nav-link. Regra solta aqui vazava para eles.
   - Camadas pelos tokens --vn-z-* (tema/tokens.css). O cabeçalho fica abaixo
     de menu, backdrop e modal.
   - Tema escuro só. As ~60 regras .light-theme que existiam aqui eram código
     morto (nenhum template ou script aplica essa classe) e saíram.
   ========================================================================== */

/* ---------- 1. Base do documento ---------- */

body {
    /* Era 14px. Conteúdo >= 16px no celular (público idoso/leigo); o
       experimento nas 20 páginas em 360/390 não gerou rolagem nem corte. */
    font-size: 1rem;
}

:root {
    --anchor-offset: 96px;
    --vn-cut-corner: 14px;
    --vn-cut-corner-sm: 10px;
    --vn-chanfro: polygon(var(--vn-cut-corner-sm) 0, 100% 0, 100% calc(100% - var(--vn-cut-corner-sm)), calc(100% - var(--vn-cut-corner-sm)) 100%, 0 100%, 0 var(--vn-cut-corner-sm));
}

html {
    scroll-padding-top: var(--anchor-offset);
}

/* Foco de teclado visível no site inteiro. :where() = especificidade zero:
   o componente que desenhar o próprio foco continua mandando. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--vn-focus-ring-width, 3px) solid var(--vn-focus-ring, #ffb547);
    outline-offset: var(--vn-focus-ring-offset, 3px);
}

/* Atalho "Pular para o conteúdo": primeiro Tab da página. Fica fora da tela
   até receber foco; acima de tudo (inclusive do cabeçalho). */
.skip-link {
    position: absolute;
    top: 0;
    left: 12px;
    z-index: var(--vn-z-toast, 1090);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    font-weight: 800;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--vn-btn-primary-fg, #111827);
    background: var(--vn-btn-primary-bg, #ff4d1d);
    clip-path: var(--vn-chanfro);
    transform: translateY(-120%);
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(12px);
    color: var(--vn-btn-primary-fg, #111827);
    outline: 2px solid #ffffff;
    outline-offset: -5px;
}

/* O <main> recebe o foco do atalho (tabindex=-1); não precisa de anel. */
main#conteudo:focus {
    outline: none;
}

/* Botão flutuante do chat (componente da frente N6) na escala de camadas:
   com um modal do Bootstrap aberto ele cobria os botões do rodapé do diálogo
   (ex.: "Assine agora" da grade de canais), porque usa z-index 10000. */
body.modal-open .n8n-chat-btn,
body.modal-open .n8n-chat-container {
    visibility: hidden;
}

/* ---------- 2. Cabeçalho (comum) ---------- */

.site-header {
    position: relative;
    z-index: var(--vn-z-header, 1030);
    color: #ffffff;
}

.site-header .navbar,
.site-header .header-custom,
.site-header .container,
.site-header .navbar-nav {
    overflow: visible;
}

.site-header .navbar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    color: inherit;
}

/* O símbolo do logo é 450x100 (4,5:1) e centraliza dentro do svg; o svg
   tem a mesma proporção para o logo encostar à esquerda. */
.site-header .navbar-brand svg {
    display: block;
    width: 230px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 4.5 / 1;
}

.vr-divider {
    background-color: rgba(236, 244, 255, 0.22);
    width: 1px;
    height: 1.5rem;
    margin: 0 0.5rem;
}

/* ---------- 3. Navegação desktop ---------- */

.site-header .nav-link {
    color: #ffffff;
    font-size: 0.9375rem;
    transition: color 0.2s ease;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus-visible {
    color: #ff9800;
}

.site-header .nav-link.active {
    color: #ff9800;
    font-weight: 700;
}

.site-header .nav-link[data-testid="careers-top-link"] {
    white-space: nowrap;
}

.site-header .dropdown-menu {
    z-index: var(--vn-z-dropdown, 1000);
    /* Texto do hero não atravessa a superfície dos links de navegação. */
    background: #050b14 !important;
    border-radius: 0;
    clip-path: var(--vn-chanfro);
}

.site-header .dropdown-menu.show {
    display: block;
    opacity: 1;
    visibility: visible;
}

.dropdown-item {
    transition: background-color 0.2s ease, color 0.2s ease;
    text-align: center;
}

.dropdown-item:focus-visible {
    outline: 2px solid var(--vn-focus-ring, #ffb547);
    outline-offset: -3px;
}

/* Avatar da conta (logado, desktop): alvo de 44 px em volta da foto de 32 px. */
.site-header #userMenu {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    color: #ffffff;
}

/* Ícones sociais (cabeçalho desktop e rodapé) */
.desktop-social-icons {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Alvo de 44 px (o ícone continua com 20 px). */
.desktop-social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    text-decoration: none;
}

.desktop-social-icons .icon {
    display: block;
    width: 20px;
    height: 20px;
    fill: var(--bs-light, #f8f9fa);
    transition: fill 0.2s ease;
}

.desktop-social-icons a:hover .icon,
.desktop-social-icons a:focus-visible .icon {
    fill: #ff9800;
}

/* ---------- 4. CTA legado .assine-agora (planos, sobre o cliente) ---------- */

@keyframes pulseBase {
    0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 152, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); }
}

.assine-agora {
    color: #ffffff;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 0 0 rgba(255, 152, 0, 0);
    animation: pulseBase 2s infinite;
}

.assine-agora:hover {
    background-color: #ff9800;
    color: #ffffff !important;
    transform: scale(1.05);
}


/* ---------- 5. Barra mobile/tablet (até 1199px) ---------- */

.site-header__acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: 8px;
}

.site-header__assine,
.site-header__cliente {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 13px;
    font-size: 0.8125rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: #ffffff;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Vidro laranja: o mesmo "ASSINE AGORA" do cabeçalho desktop. */
.site-header__assine {
    background: var(--vn-glass-orange-bg, linear-gradient(135deg, rgba(255, 77, 29, 0.2), rgba(255, 140, 0, 0.2)));
    border: 1px solid var(--vn-neon-orange, #ff4d1d);
    box-shadow: var(--vn-glass-orange-glow, 0 0 20px rgba(255, 77, 29, 0.2));
    text-shadow: 0 0 8px rgba(255, 77, 29, 0.55);
}

.site-header__assine i {
    font-size: 1.05rem;
    color: #ffffff;
}

.site-header__assine:hover,
.site-header__assine:focus-visible {
    color: #ffffff;
    background: var(--vn-glass-orange-bg-hover, linear-gradient(135deg, rgba(255, 77, 29, 0.32), rgba(255, 140, 0, 0.32)));
    box-shadow: var(--vn-glass-orange-glow-hover, 0 0 28px rgba(255, 77, 29, 0.38));
}

.site-header__assine-longo {
    display: none;
}

/* Contorno ciano: o mesmo "ÁREA DO CLIENTE" do desktop. */
.site-header__cliente {
    background: rgba(5, 11, 20, 0.58);
    border: 1px solid rgba(0, 255, 234, 0.42);
    box-shadow: inset 0 0 18px rgba(0, 255, 234, 0.08);
}

.site-header__cliente:hover,
.site-header__cliente:focus-visible {
    color: #ffffff;
    border-color: #00ffea;
    background: rgba(0, 255, 234, 0.12);
}

/* Elementos recortados por clip-path perdem o contorno de fora: o foco
   é desenhado por dentro. */
.site-header__assine:focus-visible,
.site-header__cliente:focus-visible,
.mobile-menu-toggle:focus-visible,
.mobile-offcanvas-close:focus-visible {
    outline: 2px solid var(--vn-focus-ring, #ffb547);
    outline-offset: -5px;
}

@media (max-width: 1199.98px) {
    .site-header {
        background: rgba(3, 8, 14, 0.92);
        padding: 7px 8px 8px;
    }

    .site-header .navbar {
        min-height: 58px;
        padding: 0;
    }

    .site-header nav .header-custom.border-lg {
        position: relative;
        width: 100%;
        min-height: 58px;
        margin: 0 auto;
        padding: 0 7px 0 12px;
        border: 0;
        background: transparent;
        isolation: isolate;
    }

    .site-header nav .header-custom.border-lg::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            linear-gradient(180deg, rgba(16, 54, 70, 0.96) 0%, rgba(11, 36, 49, 0.96) 100%),
            radial-gradient(circle at 16% 0%, rgba(0, 255, 234, 0.18), transparent 45%);
        border: 1px solid rgba(0, 255, 234, 0.22);
        border-bottom-color: rgba(255, 77, 29, 0.5);
        clip-path: polygon(var(--vn-cut-corner) 0, 100% 0, 100% calc(100% - var(--vn-cut-corner)), calc(100% - var(--vn-cut-corner)) 100%, 0 100%, 0 var(--vn-cut-corner));
        box-shadow: 0 10px 24px rgba(5, 11, 20, 0.36);
    }

    .site-header nav .header-custom.border-lg::after {
        content: "";
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: -1px;
        z-index: 1;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0, 255, 234, 0.42), rgba(255, 77, 29, 0.55), transparent);
        pointer-events: none;
    }

    .site-header nav .header-custom.border-lg > .d-flex {
        position: relative;
        z-index: 2;
    }

    .site-header .navbar-brand {
        flex: 1 1 auto;
        max-width: 230px;
        min-height: 44px;
    }

    .mobile-menu-toggle {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        border-color: rgba(0, 255, 234, 0.28);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)),
            linear-gradient(135deg, rgba(255, 77, 29, 0.18), transparent 55%);
        box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.08), 0 10px 22px rgba(5, 11, 20, 0.28);
    }

    .mobile-menu-toggle__icon i {
        font-size: 1.72rem;
    }
}

/* Tablet: barra cheia, Área do Cliente aparece (d-md-inline-flex) e o CTA
   ganha o texto completo. */
@media (min-width: 576px) and (max-width: 1199.98px) {
    .site-header__assine-curto {
        display: none;
    }

    .site-header__assine-longo {
        display: inline;
    }

    .site-header__assine,
    .site-header__cliente {
        padding: 0 16px;
        font-size: 0.875rem;
    }

    .site-header__acoes {
        gap: 10px;
    }
}

@media (max-width: 374.98px) {
    .site-header {
        padding-left: 6px;
        padding-right: 6px;
    }

    .site-header nav .header-custom.border-lg {
        padding-left: 9px;
        padding-right: 5px;
    }

    .site-header__acoes {
        gap: 6px;
        margin-left: 6px;
    }

    .site-header__assine {
        padding: 0 10px;
        gap: 6px;
    }

    .mobile-menu-toggle {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
}

/* ---------- 6. Barra desktop (1200px+) ---------- */

@media (min-width: 1200px) {
    .site-header nav .header-custom.border-lg {
        position: relative;
        border: 0;
        background: transparent;
        isolation: isolate;
    }

    .site-header nav .header-custom.border-lg::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            linear-gradient(180deg, rgba(16, 54, 70, 0.55) 0%, rgba(8, 22, 32, 0.82) 100%),
            radial-gradient(circle at 12% 0%, rgba(0, 255, 234, 0.12), transparent 40%);
        border: 1px solid #ff9800;
        clip-path: polygon(var(--vn-cut-corner) 0, 100% 0, 100% calc(100% - var(--vn-cut-corner)), calc(100% - var(--vn-cut-corner)) 100%, 0 100%, 0 var(--vn-cut-corner));
        box-shadow: 0 10px 24px rgba(10, 23, 44, 0.32);
    }

    .site-header nav .header-custom.border-lg > * {
        position: relative;
        z-index: 1;
    }

    /* Respiro para os CTAs (44 px) não encostarem na borda chanfrada da barra:
       7 px em cima/embaixo e 16 px à direita (o chanfro de 14 px não cruza o
       canto do "Assine agora"). Sem isto a moldura tinha a altura do botão e as
       bordas coincidiam. */
    .site-header nav .header-custom.border-lg {
        min-height: 58px;
        padding: 7px 16px 7px 14px;
    }

    .site-header .navbar-brand {
        flex: 0 0 clamp(170px, 15vw, 230px);
        width: clamp(170px, 15vw, 230px);
        /* Alvo de 44 px também no logo (em 1200–1399 o desenho tem 38 px). */
        min-height: 44px;
    }

    /* Menu central compacto: o conjunto (menu + utilitários + 2 CTAs) não
       cabia na barra e empurrava o "Assine Agora" para fora. */
    .site-header .navbar-nav .nav-link:not(.area-cliente) {
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }

    /* Alvos de 44 px no menu desktop (antes 39 px). */
    .site-header .navbar-nav .nav-link {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .site-header .navbar-nav .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Até ~1600px os ícones sociais saem do cabeçalho (continuam no rodapé e
   no menu mobile); a divisória que os acompanha some junto. */
@media (min-width: 1200px) and (max-width: 1599.98px) {
    .site-header .desktop-social-icons,
    .site-header .desktop-social-icons + .vr-divider {
        display: none;
    }
}

/* 1200–1399 px: o container tem 1140 px e logo + menu + 2 CTAs passavam da
   moldura (em 1366 o "Assine agora" saía 12 px pela borda chanfrada). Logo,
   menu e CTAs um pouco mais justos; os alvos continuam com 44 px de altura. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .site-header .navbar-brand {
        flex-basis: clamp(170px, 13.5vw, 230px);
        width: clamp(170px, 13.5vw, 230px);
    }

    .site-header .navbar-nav .nav-link:not(.area-cliente) {
        padding-left: 0.45rem !important;
        padding-right: 0.45rem !important;
    }

    /* (0,3,0): vence o ".site-header .btn-tech" do gamer-tech-v5, que carrega depois. */
    .site-header .header-custom .btn-tech {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/* 1600 px+: os 4 ícones sociais (44 px) não cabem nos 1320 px do container;
   a barra do cabeçalho ganha 1480 px (antes o "Assine agora" saía 40 px). */
@media (min-width: 1600px) {
    .site-header nav .header-custom.border-lg {
        max-width: 1480px;
    }
}

/* ---------- 7. Botão do menu mobile ---------- */

.mobile-menu-toggle {
    border: 1px solid rgba(236, 244, 255, 0.24);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
    color: #ffffff;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 0;
    clip-path: var(--vn-chanfro);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
    box-shadow: 0 8px 20px rgba(5, 11, 20, 0.22);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus-visible {
    border-color: rgba(255, 77, 29, 0.85);
    background: rgba(255, 77, 29, 0.14);
    box-shadow: 0 12px 26px rgba(255, 77, 29, 0.22);
    color: #ffffff;
}

.mobile-menu-toggle:focus:not(:focus-visible) {
    box-shadow: none;
}

.mobile-menu-toggle__icon {
    position: relative;
    display: inline-flex;
    width: 25px;
    height: 19px;
    align-items: center;
    justify-content: center;
}

.mobile-menu-toggle__icon::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 1px;
    right: 1px;
    top: 2px;
    height: 2px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow:
        0 7px 0 #ffffff,
        0 14px 0 #ffffff,
        0 0 10px rgba(0, 255, 234, 0.85);
}

.mobile-menu-toggle__icon::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 255, 234, 0.14), transparent 64%);
    pointer-events: none;
}

.mobile-menu-toggle__icon i {
    font-size: 1.6rem;
    opacity: 0;
}

/* ---------- 8. Menu mobile (offcanvas) ---------- */

.offcanvas.mobile-offcanvas {
    --vn-offcanvas-cut: 18px;
    z-index: var(--vn-z-offcanvas, 1045);
    /* Último plano sólido: a página não aparece "fantasma" atrás do menu. */
    background:
        linear-gradient(90deg, rgba(255, 77, 29, 0.08), transparent 42%, rgba(0, 230, 195, 0.05)),
        linear-gradient(180deg, #050b14 0%, #08111c 58%, #050b14 100%) !important;
    color: #f4fbff;
    border-left: 0;
    clip-path: polygon(var(--vn-offcanvas-cut) 0, 100% 0, 100% calc(100% - var(--vn-offcanvas-cut)), calc(100% - var(--vn-offcanvas-cut)) 100%, 0 100%, 0 var(--vn-offcanvas-cut));
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.42);
}

.offcanvas.mobile-offcanvas:not(.show):not(.showing):not(.hiding) {
    transform: none !important;
    visibility: hidden;
    pointer-events: none;
}

.offcanvas.mobile-offcanvas::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border: 1px solid rgba(255, 77, 29, 0.5);
    clip-path: inherit;
}

.offcanvas-backdrop.mobile-offcanvas-backdrop {
    z-index: var(--vn-z-offcanvas-backdrop, 1040);
}

.mobile-offcanvas-header {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 88px;
    padding: 0.85rem 1.05rem 0.9rem;
    border-bottom: 0;
    isolation: isolate;
}

.mobile-offcanvas-header::before {
    content: "";
    position: absolute;
    inset: 10px 12px 9px;
    z-index: 0;
    background:
        linear-gradient(135deg, rgba(12, 52, 66, 0.78), rgba(5, 12, 22, 0.96) 56%, rgba(8, 18, 30, 0.92)),
        linear-gradient(90deg, rgba(0, 230, 195, 0.12), transparent 48%, rgba(255, 77, 29, 0.16));
    border: 1px solid rgba(0, 230, 195, 0.2);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 14px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 32px rgba(0, 0, 0, 0.22);
}

.mobile-offcanvas-header::after {
    content: "";
    position: absolute;
    left: 1.45rem;
    right: 1.45rem;
    bottom: 0.55rem;
    z-index: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 230, 195, 0.55), rgba(255, 77, 29, 0.45), transparent);
}

.mobile-offcanvas-header > * {
    position: relative;
    z-index: 2;
}

.mobile-offcanvas-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 58px);
    gap: 3px;
}

.mobile-offcanvas-brand svg {
    width: min(200px, calc(100vw - 136px));
    height: auto;
    aspect-ratio: 4.5 / 1;
    max-width: 100%;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
}

/* Selo do menu: rótulo curto em caixa alta, 12 px (o piso de rótulo da casa;
   texto de conteúdo é 16 px). Antes 10,6 px. */
.mobile-offcanvas-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 0.72rem;
    font-size: 0.75rem;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(236, 248, 255, 0.86);
    font-weight: 800;
    background: linear-gradient(90deg, rgba(0, 230, 195, 0.12), rgba(255, 77, 29, 0.08));
    border: 1px solid rgba(236, 244, 255, 0.1);
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
    white-space: nowrap;
}

.mobile-offcanvas-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mobile-offcanvas-close {
    flex: 0 0 auto;
    border: 1px solid rgba(236, 244, 255, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03)),
        rgba(3, 8, 14, 0.72);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 0;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.mobile-offcanvas-close::before,
.mobile-offcanvas-close::after {
    content: "";
    position: absolute;
    width: 21px;
    height: 2px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 0 12px rgba(0, 255, 234, 0.78);
}

.mobile-offcanvas-close::before {
    transform: rotate(45deg);
}

.mobile-offcanvas-close::after {
    transform: rotate(-45deg);
}

.mobile-offcanvas-close i {
    font-size: 1.2rem;
    opacity: 0;
}

.mobile-offcanvas-close:hover,
.mobile-offcanvas-close:focus-visible {
    border-color: rgba(255, 77, 29, 0.8);
    background: rgba(255, 77, 29, 0.14);
    color: #fff;
    box-shadow: 0 10px 22px rgba(255, 77, 29, 0.22);
}

.mobile-offcanvas-body {
    position: relative;
    z-index: 3;
    padding: 0.5rem 1.25rem 1.5rem;
    scrollbar-color: rgba(255, 77, 29, 0.6) rgba(255, 255, 255, 0.04);
    scrollbar-width: thin;
}

.mobile-divider {
    flex: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 77, 29, 0.42), rgba(0, 230, 195, 0.18), transparent);
    margin: 1rem 0;
}

/* Itens de navegação */
.mobile-nav .nav-btn.btn-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    width: 100%;
    min-height: 48px;
    margin: 0;
    gap: 0;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(236, 244, 255, 0.14);
    color: rgba(236, 244, 255, 0.9);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    padding: 0.8rem 2.85rem;
    border-radius: 0;
    clip-path: var(--vn-chanfro);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.mobile-nav .nav-btn.btn-menu i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 230, 195, 0.85);
    font-size: 1rem;
    margin-right: 0 !important;
}

.mobile-nav .dropdown-toggle::after {
    position: absolute;
    right: 1rem;
    margin-left: 0;
    color: rgba(236, 244, 255, 0.7);
}

.mobile-nav .nav-btn.btn-menu:hover,
.mobile-nav .nav-btn.btn-menu:focus-visible,
.mobile-nav .nav-btn.btn-menu[aria-expanded="true"] {
    color: #ffffff;
    border-color: rgba(255, 77, 29, 0.78);
    background: rgba(255, 77, 29, 0.16);
}

/* Página atual: vidro laranja + filete à esquerda (o laranja cheio fica só para
   o CTA de contratar, que é a ação principal do menu). */
.mobile-nav .nav-btn.btn-menu.active-btn {
    color: #ffffff;
    border-color: rgba(255, 77, 29, 0.85);
    background: linear-gradient(135deg, rgba(255, 77, 29, 0.24), rgba(255, 140, 0, 0.12));
    box-shadow: inset 3px 0 0 #ff4d1d;
}

.mobile-nav .nav-btn.btn-menu.active-btn i,
.mobile-nav .nav-btn.btn-menu:hover i,
.mobile-nav .nav-btn.btn-menu:focus-visible i,
.mobile-nav .nav-btn.btn-menu.active-btn::after,
.mobile-nav .nav-btn.btn-menu:hover::after,
.mobile-nav .nav-btn.btn-menu:focus-visible::after {
    color: #ffffff;
}

.mobile-nav .nav-btn.btn-menu:focus-visible {
    outline: 2px solid var(--vn-focus-ring, #ffb547);
    outline-offset: -5px;
}

/* Submenu do menu mobile abre NO FLUXO, empurrando os itens de baixo.
   Os botões têm data-bs-display="static" (sem Popper); o !important em
   position/inset é a rede de segurança caso o Popper escreva estilo inline
   (fora de .navbar o Bootstrap usa Popper e o submenu cobria o próprio botão). */
.mobile-offcanvas .dropdown-menu {
    background: rgba(3, 8, 14, 0.74) !important;
    border: 1px solid rgba(236, 244, 255, 0.12);
    box-shadow: none;
    backdrop-filter: blur(12px);
    padding: 0.4rem;
    position: static !important;
    inset: auto !important;
    float: none;
    transform: none !important;
    margin-top: 8px !important;
    border-radius: 0;
    clip-path: var(--vn-chanfro);
    text-align: left;
}

.mobile-offcanvas .dropdown-menu:not(.show) {
    display: none !important;
}

.mobile-offcanvas .dropdown-menu.show {
    display: block !important;
}

.mobile-offcanvas .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    color: rgba(236, 244, 255, 0.9) !important;
    border-radius: 0;
    border-left: 0;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    font-size: 1rem;
    text-align: center;
    padding: 0.6rem 0.8rem;
}

.mobile-offcanvas .dropdown-item:hover,
.mobile-offcanvas .dropdown-item:focus {
    background: rgba(255, 77, 29, 0.14);
    color: #ffffff !important;
    padding-left: 0.8rem;
}

/* Ações principais do menu */
.mobile-offcanvas .btn-tech,
.mobile-offcanvas .btn-tech-outline {
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1rem;
    border-radius: 0;
    clip-path: var(--vn-chanfro);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.9375rem;
}

.mobile-offcanvas .btn-tech {
    background: var(--vn-btn-primary-bg, #ff4d1d);
    color: var(--vn-btn-primary-fg, #111827) !important;
    box-shadow: 0 5px 15px rgba(255, 77, 29, 0.25);
}

.mobile-offcanvas .btn-tech:hover {
    transform: none;
    background: var(--vn-btn-primary-bg-hover, #ff6a3d);
}

.mobile-offcanvas .btn-tech-outline {
    border: 1px solid rgba(0, 255, 234, 0.42);
    color: #ffffff !important;
    background: rgba(5, 11, 20, 0.58);
    box-shadow: inset 0 0 18px rgba(0, 255, 234, 0.08);
}

.mobile-offcanvas .btn-tech-outline:hover {
    background: rgba(0, 255, 234, 0.12);
    box-shadow: inset 0 0 18px rgba(0, 255, 234, 0.12);
}

.mobile-offcanvas .btn-tech:focus-visible,
.mobile-offcanvas .btn-tech-outline:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -5px;
    box-shadow: none;
}

.mobile-offcanvas .mobile-cta .dropdown {
    width: 100%;
}

.mobile-offcanvas .mobile-cta .mobile-account-toggle {
    width: 100%;
    min-height: 48px;
    height: auto;
    justify-content: flex-start;
    gap: 0.65rem;
    border: 1px solid rgba(236, 244, 255, 0.16);
    background: rgba(255, 255, 255, 0.065);
    color: #ffffff !important;
    padding: 0.65rem 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    clip-path: var(--vn-chanfro);
}

.mobile-offcanvas .mobile-cta .mobile-account-toggle::after {
    margin-left: auto;
}

.mobile-offcanvas .mobile-cta .mobile-account-toggle img {
    border: 1px solid rgba(0, 230, 195, 0.45);
    box-shadow: 0 0 0 3px rgba(0, 230, 195, 0.08);
}

.mobile-account-toggle__label {
    font-size: 0.875rem;
}

/* Atendimento (números discáveis) */
.mobile-contato {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mobile-contato__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0.55rem 0.75rem;
    color: #ffffff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 234, 0.2);
    clip-path: var(--vn-chanfro);
    font-weight: 700;
    /* Número de telefone é conteúdo: 16 px, como no rodapé. */
    font-size: 1rem;
    line-height: 1.2;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.mobile-contato__item i {
    flex: 0 0 auto;
    font-size: 1.15rem;
    color: #00ffea;
}

.mobile-contato__item .bi-whatsapp {
    color: #25d366;
}

.mobile-contato__item small {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(232, 241, 255, 0.72);
}

.mobile-contato__item:hover,
.mobile-contato__item:focus-visible {
    color: #ffffff;
    border-color: rgba(255, 77, 29, 0.7);
    background: rgba(255, 77, 29, 0.12);
}

.mobile-contato__item:focus-visible {
    outline: 2px solid var(--vn-focus-ring, #ffb547);
    outline-offset: -5px;
}

/* Redes sociais */
.mobile-social {
    margin-top: 1rem;
}

.mobile-offcanvas .mobile-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(236, 244, 255, 0.14);
    border-radius: 0;
    /* Chanfro da casa (antes círculos: únicos elementos redondos do menu). */
    clip-path: var(--vn-chanfro);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.mobile-offcanvas .mobile-social a:focus-visible {
    outline: 2px solid var(--vn-focus-ring, #ffb547);
    outline-offset: -5px;
}

.mobile-offcanvas .mobile-social svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.mobile-offcanvas .mobile-social a:hover,
.mobile-offcanvas .mobile-social a:focus-visible {
    background: rgba(255, 77, 29, 0.16);
    border-color: rgba(255, 77, 29, 0.72);
}

@media (max-width: 991px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .mobile-offcanvas {
        --bs-offcanvas-width: min(420px, 100vw);
        left: auto;
        right: calc(100% - 100vw) !important;
        top: 0;
        bottom: 0;
        width: min(420px, 100vw) !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    .mobile-offcanvas .offcanvas-body {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (max-width: 575.98px) {
    .mobile-offcanvas {
        --bs-offcanvas-width: 100vw;
        left: 0;
        right: 0 !important;
        width: 100vw !important;
    }
}

/* Duas colunas só a partir de 400 px: abaixo disso (360, 375...) o número
   inteiro não cabe na meia largura e quebrava no meio ("0800 591 / 0381"). */
@media (max-width: 399.98px) {
    .mobile-contato {
        grid-template-columns: 1fr;
    }
}

@media (max-height: 640px) and (max-width: 575.98px) {
    .mobile-offcanvas-header {
        min-height: 80px;
        padding: 0.7rem 0.85rem 0.75rem;
    }

    .mobile-offcanvas-header::before {
        inset: 8px 10px 8px;
    }

    .mobile-offcanvas-body {
        padding: 0.4rem 1rem 1rem;
    }

    .mobile-divider {
        margin: 0.7rem 0;
    }
}