/* Header · Relógio do plantão (22/10/2026, conceito C escolhido pelo Lucas)
   Sem barra sobre a foto: só texto, links junto da logo, a hora de Brasília à direita como no canto de um monitor
   de UTI. Ao rolar vira uma faixa noite fina. Mockup: squads/analise-sistemas/output/2026-10-22-vixh-header/
   design-imagem/mockups/header-c.png (no opensquad).
   30/10/2026: o relógio e o "Plantão 24h" saíram (a Vix vende a tecnologia de telemedicina, não a consulta). */

#site-header.site-header--plantao {
    --hp-snow: #F2F6F9;
    --hp-mist: #8A9AB0;
    --hp-ink: #0F1E2E;
    --hp-ink-2: #4A5A6B;
    --hp-teal: #12BDAB;
    --hp-teal-ink: #0E8F84;
    --hp-night: #0A1422;
    --hp-line-night: #1C2A3D;
    --hp-ease: cubic-bezier(.16, 1, .3, 1);
    --hp-text: var(--hp-snow);
    --hp-text-soft: rgba(242, 246, 249, .68);
    background: transparent !important;
    border-bottom: 1px solid transparent;
    transition: background-color .35s ease, border-color .35s ease;
}

/* Véu escuro só no alto, para o texto ler bem sobre qualquer parte da foto */
#site-header.site-header--plantao::before {
    content: '';
    position: absolute;
    inset: 0 0 -45% 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(10, 20, 34, .6), rgba(10, 20, 34, 0));
    pointer-events: none;
    transition: opacity .35s ease;
}

/* Topo claro das páginas internas (antes de rolar): tinta no lugar da neve */
#site-header.site-header--plantao.site-header--tone-light:not(.site-header--scrolled) {
    --hp-text: var(--hp-ink);
    --hp-text-soft: rgba(15, 30, 46, .66);
}
#site-header.site-header--plantao.site-header--tone-light:not(.site-header--scrolled)::before { opacity: 0; }

/* Rolou: faixa noite fina, com desfoque leve e o fio de baixo */
#site-header.site-header--plantao.site-header--scrolled {
    background: rgba(10, 20, 34, .9) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom-color: var(--hp-line-night);
}
#site-header.site-header--plantao.site-header--scrolled::before { opacity: 0; }

/* Sai a pílula antiga: fundo, fio degradê, borda, sombra */
#site-header.site-header--plantao :is(.site-header__backdrop, .site-header__accent) { display: none !important; }
#site-header.site-header--plantao .site-header__wrap {
    max-width: 80rem !important;
    margin-inline: auto;
    padding: 0 1.5rem !important;
}
#site-header.site-header--plantao .site-header__bar {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    max-width: none !important;
}
#site-header.site-header--plantao .site-header__bar::before,
#site-header.site-header--plantao .site-header__bar::after { display: none !important; }
#site-header.site-header--plantao .site-header__row {
    height: 4.5rem !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: flex-start;
    transform: translateY(.375rem);
    transition: transform .35s var(--hp-ease);
}
/* Ao rolar só o transform muda (sem recalcular layout): a faixa sobe e encolhe */
#site-header.site-header--plantao.site-header--scrolled .site-header__row { transform: none; }

/* Logo */
#site-header.site-header--plantao .site-header__brand { margin-right: clamp(1.5rem, 3.2vw, 3.25rem); }
#site-header.site-header--plantao .site-logo--word {
    display: block;
    width: auto;
    height: 2.125rem;
    transform-origin: left center;
    transition: transform .35s var(--hp-ease);
}
#site-header.site-header--plantao.site-header--scrolled .site-logo--word { transform: scale(.82); }

/* Links: logo ao lado da marca, cinza claro; a página atual em branco com um ponto teal */
#site-header.site-header--plantao .site-header__links { gap: clamp(1rem, 1.8vw, 1.75rem) !important; }
#site-header.site-header--plantao .site-header__links .nav-link {
    position: relative;
    padding: .5rem 0 !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: .9375rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: var(--hp-text-soft) !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: color .15s ease;
}
#site-header.site-header--plantao .site-header__links .nav-link::before { display: none !important; }
#site-header.site-header--plantao .site-header__links .nav-link::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    left: 50% !important;
    bottom: -.1rem !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: var(--hp-teal) !important;
    box-shadow: none !important;
    opacity: 0 !important;
    transform: translateX(-50%) scale(0) !important;
    transition: opacity .2s ease, transform .3s var(--hp-ease) !important;
}
#site-header.site-header--plantao .site-header__links .nav-link:hover,
#site-header.site-header--plantao .site-header__links .nav-link.is-active { color: var(--hp-text) !important; }
#site-header.site-header--plantao .site-header__links .nav-link:hover::after {
    opacity: .45 !important;
    transform: translateX(-50%) scale(1) !important;
}
#site-header.site-header--plantao .site-header__links .nav-link.is-active::after {
    opacity: 1 !important;
    transform: translateX(-50%) scale(1) !important;
}

/* Direita: o botão (na landing da NR-1, também o telefone) */
#site-header.site-header--plantao .site-header__cta {
    margin-left: auto;
    gap: 1.5rem !important;
}

#site-header.site-header--plantao .site-header__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: 0 1.25rem !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--hp-teal) !important;
    color: #04211E !important;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: .9375rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color .2s ease, transform .2s var(--hp-ease);
}
#site-header.site-header--plantao .site-header__cta-btn:hover { background: #2BD0BE !important; }
#site-header.site-header--plantao .site-header__cta-btn:active { transform: scale(.98); }
#site-header.site-header--plantao .site-header__cta-btn svg { transition: transform .25s var(--hp-ease); }
#site-header.site-header--plantao .site-header__cta-btn:hover svg { transform: translateX(2px); }

#site-header.site-header--plantao :is(.nav-link, .site-header__brand, .site-header__cta-btn, .site-header__menu-btn):focus-visible {
    outline: 2px solid var(--hp-teal);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Botão do menu (celular): um ícone por vez */
#site-header.site-header--plantao .site-header__menu-btn {
    margin-left: auto;
    color: var(--hp-text) !important;
    background: none !important;
    border: 0 !important;
}
#site-header .nav-menu-btn__icon--close { display: none !important; }
body.nav-body--menu-open #site-header .nav-menu-btn__icon--open { display: none !important; }
body.nav-body--menu-open #site-header .nav-menu-btn__icon--close { display: block !important; }

@media (min-width: 1024px) and (max-width: 1279px) {
    #site-header.site-header--plantao .site-header__links { gap: .95rem !important; }
    #site-header.site-header--plantao .site-header__links .nav-link { font-size: .875rem !important; }
    #site-header.site-header--plantao .site-header__cta-btn { padding: 0 1rem !important; font-size: .875rem !important; }
}
@media (max-width: 1023px) {
    #site-header.site-header--plantao .site-header__row { height: 4rem !important; transform: none; }
    #site-header.site-header--plantao .site-logo--word,
    #site-header.site-header--plantao.site-header--scrolled .site-logo--word { height: 1.625rem; transform: none; }
    #site-header.site-header--plantao .site-header__wrap { padding: 0 1rem !important; }
}

/* Menu do celular: a mesma logo, no tamanho certo, na altura do botão de fechar */
.nav-drawer__head { align-items: center; }
.nav-drawer__wordmark { display: block; align-self: flex-start; width: auto; height: 1.625rem; }

@media (prefers-reduced-motion: reduce) {
    #site-header.site-header--plantao,
    #site-header.site-header--plantao :is(.site-header__row, .site-logo--word, .nav-link, .nav-link::after, .site-header__cta-btn, .site-header__cta-btn svg) {
        transition: none !important;
    }
}