/* =========================================================================
   MEDC — Cabeçalho e rodapé da identidade nova (index2 e /planos/)
   Autossuficiente de propósito: define as próprias variáveis para poder
   ser carregado em qualquer página, sem depender do CSS dela.
   ========================================================================= */

:root {
    --c2-azul:       #0052CC;
    --c2-azul-forte: #003D99;
    --c2-noite:      #041129;
    --c2-tinta:      #06183A;
    --c2-linha:      #DCE5F2;
    --c2-papel:      #FFFFFF;
    --c2-fundo:      #F4F7FB;
    --c2-claro:      #C7D6EA;
    --c2-apagado:    #7386A0;
    --c2-borda-esc:  #163464;

    /* fonte do menu: a stack de sistema do base.css, mais enxuta que a
       Poppins nesse tamanho. Declarada aqui de propósito — sem isto a
       Poppins do body da /planos/ vazaria para o cabeçalho. */
    --c2-fonte-menu: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --c2-fonte: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ============================ CABEÇALHO v2 ============================
   Herda comportamento do base.css (menu mobile e dropdown com :focus-within)
   e troca só o visual, seguindo as medidas do arquivo de referência:
   barra grudada no topo, 72px, logo de 30px e links de 14px. */
.header-v2 {
    font-family: var(--c2-fonte-menu);
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--c2-linha);
    z-index: 50;
}

.header-v2 .nav-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 24px;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-v2 .logo-img { height: 34px; width: auto; display: block; }

.header-v2 .nav-wrapper { flex: 1 1 auto; min-width: 0; }

.header-v2 .nav-menu {
    display: flex;
    align-items: center;
    /* centralizado no espaço que sobra entre a logo e os botões, como no
       cabeçalho antigo */
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-v2 .nav-menu > li > a {
    font-size: 15px;
    font-weight: 500;
    color: #26374E;
    text-decoration: none;
    white-space: nowrap;
}

.header-v2 .nav-menu > li > a:hover { color: var(--c2-azul); }
.header-v2 .nav-menu a:focus-visible { outline: 2px solid var(--c2-azul); outline-offset: 3px; }

.header-v2 .submenu-toggle { display: inline-flex; align-items: center; gap: 6px; }

.header-v2 .submenu {
    list-style: none;
    margin: 0;
    padding: 8px;
    min-width: 250px;
    background: var(--c2-papel);
    border: 1px solid var(--c2-linha);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(6, 24, 58, 0.14);
}

.header-v2 .submenu a {
    display: block;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 15px;
    font-weight: 500;
    color: #26374E;
    text-decoration: none;
    white-space: nowrap;
}

.header-v2 .submenu a:hover { background: var(--c2-fundo); color: var(--c2-azul); }

.header-v2 .nav-acoes {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

.header-v2 .nav-entrar {
    font-size: 14px;
    font-weight: 600;
    color: #52657F;
    text-decoration: none;
    white-space: nowrap;
}

.header-v2 .nav-entrar:hover { color: var(--c2-tinta); }

.header-v2 .cta-button {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--c2-azul);
    padding: 11px 16px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
}

.header-v2 .cta-button:hover { background: var(--c2-azul-forte); color: #fff; }


/* ============================== RODAPÉ v2 ============================= */
.footer-v2 {
    font-family: var(--c2-fonte);
    background: var(--c2-noite);
    padding: 72px 24px 36px;
}

.footer-v2-inner { max-width: 1240px; margin: 0 auto; }

.footer-v2-grade {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--c2-borda-esc);
}

.footer-v2-logo { height: 28px; width: auto; display: block; margin-bottom: 20px; }

.footer-v2-sobre {
    margin: 0 0 20px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--c2-claro);
    max-width: 30em;
}

.footer-v2-selo { margin: 0; font-size: 13px; color: var(--c2-apagado); }

.footer-v2-titulo {
    margin: 0 0 18px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c2-apagado);
}

.footer-v2-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-v2-lista a {
    font-size: 14.5px;
    color: var(--c2-claro);
    text-decoration: none;
}

.footer-v2-lista a:hover { color: #fff; }

.footer-v2-base {
    padding-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    align-items: center;
    justify-content: space-between;
}

.footer-v2-base p { margin: 0; font-size: 12.5px; color: var(--c2-apagado); }

.footer-v2-legal { display: flex; flex-wrap: wrap; gap: 22px; }

.footer-v2-legal a {
    font-size: 12.5px;
    color: var(--c2-apagado);
    text-decoration: none;
}

.footer-v2-legal a:hover { color: #fff; }

.footer-v2 a:focus-visible { outline: 2px solid #6FB0FF; outline-offset: 3px; }

/* ---- Larguras do menu --------------------------------------------------
   Medido: o cabeçalho inteiro (logo + sete itens + Entrar + botão) ocupa
   1175 px com o espaçamento cheio e 1101 px apertado.
   Daí os dois cortes abaixo. Sem eles o menu quebrava em duas linhas dentro
   da barra, porque o base.css só troca pelo hambúrguer aos 768 px — medida
   do cabeçalho antigo, que tem menos itens. */
@media (max-width: 1194px) {
    .header-v2 .nav-menu { gap: 8px 20px; }
    .header-v2 .nav-menu > li > a { font-size: 14px; }
}

@media (max-width: 1119px) {
    .header-v2 .mobile-menu-toggle { display: flex; }
    .header-v2 .cta-button { display: none; }
    .header-v2 .nav-wrapper { display: none; }

    .header-v2 .nav-wrapper.active {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--c2-papel);
        border-bottom: 1px solid var(--c2-linha);
    }

    .header-v2 .nav-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 20px 24px;
    }

    /* o dropdown deixa de flutuar e vira lista aberta, indentada */
    .header-v2 .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        padding: 2px 0 2px 14px;
        border: 0;
        box-shadow: none;
        background: transparent;
    }
    .header-v2 .submenu::before { display: none; }
    .header-v2 .submenu a { padding: 7px 0; }
    .header-v2 .caret { display: none; }
}

@media (max-width: 860px) {
    .footer-v2 { padding: 52px 20px 32px; }
    .footer-v2-grade { grid-template-columns: 1fr; gap: 36px; padding-bottom: 36px; }
}