/* ==========================================================================
   COMPONENTES — peças reutilizáveis em qualquer seção do site.
   Ordem: cabeçalho, navegação, botões, cartões flutuantes, placa do retrato.
   ========================================================================== */

/* ==========================================================================
   1. CABEÇALHO
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  padding-block: 22px;
  border-bottom: 1px solid transparent;
  transition:
    padding .35s ease,
    background .35s ease,
    color .35s ease,
    border-color .35s ease;
}

.site-header.is-scrolled {
  padding-block: 13px;
  color: #fff;
  background: rgba(35, 33, 34, .9);
  border-bottom-color: rgba(255, 255, 255, .1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Mesmo box model do .container — max-width primeiro, goteira por dentro.
   Só assim a marca alinha com a headline e o CTA com a borda direita do
   bloco visual em qualquer largura de tela. */
.nav-container {
  position: relative;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

/* --------------------------------------------------------------------------
   Marca — lockup tipográfico que espelha a logo (Oswald + selo)
   Para usar o vetor, trocar o conteúdo de .brand por uma <img>.
   -------------------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

/* Ícone da marca via mask-image: a cor vem sempre de currentColor, então
   acompanha automaticamente a transição para branco no cabeçalho escuro.

   A imagem vai embutida como data URI, não como url('../logo/mark.png').
   Sob file:// (o site aberto direto, sem servidor) o Chrome exige CORS
   para carregar uma imagem usada como máscara, e uma origem file:// é
   tratada como nula — a busca é bloqueada e o ícone nunca aparece. Um
   <img> comum não sofre essa restrição, só mask-image; embutir a imagem
   evita a rede de arquivos por completo e funciona em qualquer contexto.
   Fonte do recorte: assets/logo/mark.png (gerado a partir do preview do
   arquivo CorelDRAW em assets/logo/). */
.brand-mark {
  flex: none;
  width: 42px;
  aspect-ratio: 172 / 164;
  background-color: currentColor;
  --mark-src: url('data:image/png;base64,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');
  -webkit-mask-image: var(--mark-src);
  mask-image: var(--mark-src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color .35s ease;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1;
}

.brand-tag {
  padding: 4px 9px 3px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-family: var(--font-tech);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .62;
}

/* ==========================================================================
   2. NAVEGAÇÃO
   ========================================================================== */
.menu-list {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2vw, 30px);
}

.menu-link {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .78;
  transition: opacity var(--speed-fast) ease;
}

.menu-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .34s var(--ease-out);
}

.menu-link:hover,
.menu-link:focus-visible { opacity: 1; }

.menu-link:hover::after,
.menu-link:focus-visible::after,
.menu-link.is-active::after { width: 100%; }

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 24px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .3s ease, color .3s ease, transform var(--speed-fast) ease;
}

.header-cta:hover,
.header-cta:focus-visible {
  transform: translateY(-2px);
  background: var(--c-ink);
  color: #fff;
}

.site-header.is-scrolled .header-cta:hover,
.site-header.is-scrolled .header-cta:focus-visible {
  background: #fff;
  color: var(--c-ink);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--speed-fast) ease;
}
.nav-toggle:hover { background: rgba(55, 52, 53, .06); }

/* Os "3 traços": barras reais, não um ícone trocado por outro — assim dá
   para animar cada uma (girar, encolher) e formar o X, em vez de só
   trocar um desenho por outro.

   O fallback ao alternar `aria-expanded` (mais abaixo) só vale sob
   `.anim-off` (classe que assets/js/main.js põe no <html> quando falta
   GSAP ou o usuário pediu movimento reduzido — ver main.js). Com GSAP
   disponível o menuIconTl assume a transformação inteira numa timeline
   própria; se o fallback CSS também estivesse ativo, o atributo mudaria
   o `transform` instantaneamente (a transição já é desligada por JS para
   não brigar com o tween) e o GSAP encontraria as barras já no estado
   final — animação nenhuma visível, só o salto direto para o X. */
.nav-toggle-bars {
  position: relative;
  width: 18px;
  height: 14px;
}

.nav-toggle-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--speed-fast) var(--ease-out), opacity var(--speed-fast) ease;
}

.nav-toggle-bar--top    { top: 0; }
.nav-toggle-bar--mid    { top: 6px; }
.nav-toggle-bar--bottom { top: 12px; }

.anim-off .nav-toggle[aria-expanded="true"] .nav-toggle-bar--top {
  transform: translateY(6px) rotate(45deg);
}
.anim-off .nav-toggle[aria-expanded="true"] .nav-toggle-bar--mid {
  opacity: 0;
  transform: scaleX(0);
}
.anim-off .nav-toggle[aria-expanded="true"] .nav-toggle-bar--bottom {
  transform: translateY(-6px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bar { transition: none; }
}

/* ==========================================================================
   3. BOTÕES
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition:
    transform var(--speed-fast) ease,
    border-color var(--speed-fast) ease,
    color var(--speed-fast) ease,
    background var(--speed-fast) ease,
    box-shadow var(--speed-fast) ease;
}

.btn:hover,
.btn:focus-visible { transform: translateY(-2px); }
.btn:active { transform: scale(.98); }

.btn svg {
  width: 17px;
  height: 17px;
  transition: transform .3s var(--ease-out);
}

/* Ação de maior valor: varredura do gradiente vital, como no design system */
.btn--primary {
  color: var(--c-ink);
  background: var(--c-vital);
  box-shadow: 0 12px 28px rgba(55, 52, 53, .18);
}

.btn--primary::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--grad-vital);
  transform: translateX(-102%);
  transition: transform var(--speed-mid) var(--ease-out);
}

.btn--primary:hover::before,
.btn--primary:focus-visible::before { transform: none; }

.btn--primary:hover,
.btn--primary:focus-visible { box-shadow: 0 18px 38px rgba(168, 201, 87, .3); }

.btn--primary:hover svg,
.btn--primary:focus-visible svg { transform: translate(2px, -2px); }

.btn--glass {
  border-color: rgba(55, 52, 53, .22);
  color: var(--c-ink);
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.btn--glass:hover,
.btn--glass:focus-visible {
  border-color: var(--c-ink);
  background: #fff;
}

.btn--glass:hover svg,
.btn--glass:focus-visible svg { transform: translateY(2px); }

/* ==========================================================================
   4. CARTÕES FLUTUANTES
   ========================================================================== */
.float-card {
  position: absolute;
  z-index: 4;
  width: clamp(184px, 17.5vw, 226px);
  padding: 17px 18px 18px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 20px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .45s ease;
}

/* O float ambiente vive no wrapper interno para não disputar a
   propriedade `transform` com o parallax aplicado ao cartão. */
.float-inner {
  display: block;
  animation: floatDrift 8s ease-in-out infinite;
}

.card-label {
  display: block;
  margin-bottom: 13px;
  color: var(--c-muted);
  font-family: var(--font-tech);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.card-note {
  margin-top: 12px;
  color: var(--c-soft-text);
  font-size: 11px;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Barras da semana
   -------------------------------------------------------------------------- */
.week-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 40px;
}

.week-bars i {
  flex: 1;
  height: var(--h, 50%);
  border-radius: 3px;
  background: var(--c-vital);
  transform-origin: bottom;
}

.week-bars i.is-pending {
  height: 26%;
  background: var(--c-border);
}

/* --------------------------------------------------------------------------
   Trilho do dia
   -------------------------------------------------------------------------- */
.day-rail { display: grid; gap: 11px; }

.day-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  padding-left: 16px;
}

.day-step::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--c-border);
}

.day-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 6px;
  top: calc(50% + 5px);
  width: 1px;
  height: calc(100% + 6px);
  background: var(--c-border);
}

.day-step.is-key::before {
  background: var(--c-vital);
  box-shadow: 0 0 0 4px rgba(168, 201, 87, .22);
}

.day-step time {
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
}

.day-step span {
  color: var(--c-ink);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}

.day-step.is-key span { font-weight: 500; }

/* ==========================================================================
   5. PLACA DE IDENTIFICAÇÃO
   ========================================================================== */
.name-plate {
  position: absolute;
  z-index: 3;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 20px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 18px;
  color: #fff;
  background: rgba(35, 33, 34, .38);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.name-plate b {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.3;
}

.name-plate span {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, .6);
  font-family: var(--font-tech);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.name-plate__crn {
  flex: none;
  color: rgba(255, 255, 255, .68);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
}

/* ==========================================================================
   6. MOVIMENTO AMBIENTE
   ========================================================================== */
@keyframes floatDrift {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-15px) translateX(5px); }
}

@keyframes floatDriftAlt {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(10px) translateX(-8px); }
}

/* ==========================================================================
   7. RESPONSIVO
   ========================================================================== */
@media (max-width: 1120px) {
  .menu-list { gap: 14px; }
  .menu-link { font-size: 10px; letter-spacing: .12em; }
  .header-cta { display: none; }
  .float-card { width: clamp(164px, 19vw, 196px); }
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  /* Painel alinhado às bordas internas da goteira, como o resto do conteúdo */
  .menu-list {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: calc(100% + 18px);
    flex-direction: column;
    gap: 0;
    padding: 12px;
    border: 1px solid rgba(55, 52, 53, .1);
    border-radius: 20px;
    color: var(--c-ink);
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--speed-fast) ease, transform var(--speed-fast) ease, visibility var(--speed-fast) ease;
  }

  .menu-list.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* No painel empilhado o sublinhado viraria um divisor: o estado ativo
     passa a ser um ponto vital, o mesmo sinal usado no resto da hero. */
  .menu-link {
    display: block;
    padding: 13px 12px 13px 26px;
    font-size: 12px;
    letter-spacing: .14em;
    opacity: 1;
  }

  .menu-link::after { display: none; }
  .menu-link.is-active { font-weight: 600; }

  .menu-link.is-active::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--c-vital);
  }

  .float-card { width: 200px; }
}

@media (max-width: 640px) {
  .brand { gap: 8px; }
  .brand-mark { width: 32px; }
  .brand-name { font-size: 17px; }
  .brand-tag { font-size: 7px; padding: 3px 7px 2px; }

  .float-card {
    width: min(62%, 196px);
    padding: 14px 15px 15px;
    border-radius: 18px;
  }

  .week-bars { height: 34px; }
  .card-note { font-size: 10px; }

  /* A placa empilha: o cargo completo cabe em uma linha e o CRN ganha respiro. */
  .name-plate {
    left: 16px;
    right: 16px;
    bottom: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 13px 15px;
  }

  .name-plate b { font-size: 13px; }
}