/* ============================================
   PROVITA ANESTESIA — COMPONENTS
   Header, footer, botões e cards reutilizáveis.
   Mobile-first. Só consome variáveis de tokens.css.
   ============================================ */

/* ── PULAR PARA CONTEÚDO (acessibilidade) ── */
.pular-link {
  position: absolute; left: -100%; top: var(--esp-sm);
  padding: var(--esp-xs) var(--esp-sm);
  background: var(--cor-azul-profundo); color: var(--cor-branco);
  font-weight: var(--peso-forte); border-radius: var(--raio-sm);
  z-index: var(--z-overlay); transition: left 0.2s;
}
.pular-link:focus { left: var(--esp-sm); }

/* ── CABEÇALHO ── */
.cabecalho {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--cor-fundo); transition: box-shadow var(--transicao);
}
.cabecalho--rolado { box-shadow: var(--sombra-suave); }

.cabecalho__interno {
  display: flex; align-items: center;
  justify-content: space-between; height: 64px;
}

/* ── LOGO ── */
.cabecalho__logo { display: flex; align-items: center; gap: var(--esp-xs); }
.cabecalho__simbolo { height: 36px; width: auto; }
.cabecalho__marca { display: flex; flex-direction: column; line-height: 1; }

.cabecalho__nome {
  font-family: var(--fonte-titulo); font-weight: var(--peso-titulo);
  font-size: 1.35rem; color: var(--cor-azul-profundo); letter-spacing: 0.02em;
}
.cabecalho__sub {
  font-family: var(--fonte-corpo); font-size: 0.62rem;
  font-weight: var(--peso-medio); letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--cor-verde-agua);
}

/* ── NAV MOBILE — overlay em degradê ── */
.cabecalho__nav {
  position: fixed; inset: 0; background: var(--gradiente-marca);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--esp-lg);
  transform: translateX(100%); opacity: 0; visibility: hidden;
  transition: var(--transicao);
}
body.menu-aberto .cabecalho__nav { transform: none; opacity: 1; visibility: visible; }

.cabecalho__lista {
  display: flex; flex-direction: column;
  align-items: center; gap: var(--esp-md); list-style: none;
}
.cabecalho__link {
  color: var(--cor-branco); font-size: 1.25rem;
  font-weight: var(--peso-medio); text-transform: uppercase; letter-spacing: 0.1em;
}
.cabecalho__link--ativo { color: var(--cor-verde-agua); }

/* ── BOTÃO HAMBÚRGUER ── */
.cabecalho__menu-btn {
  color: var(--cor-azul-profundo); display: flex;
  align-items: center; justify-content: center;
  z-index: calc(var(--z-header) + 1);
}
.icone-fechar { display: none; }
#menu-btn[aria-expanded="true"] .icone-abrir  { display: none; }
#menu-btn[aria-expanded="true"] .icone-fechar { display: block; }
#menu-btn[aria-expanded="true"] { color: var(--cor-branco); }

/* ── BOTÕES GLOBAIS ── */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--esp-xs); padding: 0.75rem 1.5rem; border-radius: var(--raio-full);
  font-family: var(--fonte-corpo); font-weight: var(--peso-forte); font-size: 1rem;
  transition: var(--transicao); cursor: pointer; border: none; text-decoration: none;
}
.botao--acento { background: var(--cor-acento); color: var(--cor-branco); }
.botao--acento:hover,
.botao--acento:focus-visible {
  background: var(--cor-acento-escuro); transform: translateY(-2px); box-shadow: var(--sombra-media);
}
.botao--contorno { background: transparent; border: 1.5px solid var(--cor-azul-profundo); color: var(--cor-azul-profundo); }
.botao--contorno:hover,
.botao--contorno:focus-visible { background: var(--cor-azul-profundo); color: var(--cor-branco); }

/* ── DESKTOP ── */
@media (min-width: 992px) {
  .cabecalho__menu-btn { display: none; }
  .cabecalho__simbolo { height: 40px; }

  .cabecalho__nav {
    position: static; flex-direction: row; background: none;
    transform: none; opacity: 1; visibility: visible; gap: var(--esp-md);
  }
  .cabecalho__lista { flex-direction: row; gap: var(--esp-md); }

  .cabecalho__link {
    color: var(--cor-texto); font-size: 1rem; font-weight: var(--peso-medio);
    text-transform: none; letter-spacing: normal; position: relative;
  }
  .cabecalho__link::after {
    content: ''; position: absolute; bottom: -3px; left: 0;
    width: 100%; height: 2px; background: var(--cor-acento);
    transform: scaleX(0); transform-origin: left; transition: transform var(--transicao);
  }
  .cabecalho__link:hover::after,
  .cabecalho__link:focus-visible::after { transform: scaleX(1); }
  .cabecalho__link--ativo { color: var(--cor-acento); }
  .cabecalho__link--ativo::after { transform: scaleX(1); }
}