/* ============================================================
   OUTUBRO ROSA 2026 — tema temporário da home
   Entra com o PR do Outubro Rosa e sai em 01/11/2026: reverter o PR.
   (Mexe também em style.css, main.js, cookie-banner.js, chat-widget.js e nos
   blocos "OUTUBRO ROSA" do index.html: o vermelho fixo virou variável.)
   Carrega depois do style.css.
   ============================================================ */

/* ====== PALETA ======
   O rosa da logo nova é #FF4672. Como cor de fundo de botão, o branco sobre ele
   dá 3,3:1 e reprova no AA; o #DB2F66 dá 4,55:1 (igual ou melhor que o vermelho
   de antes) e o #FF4672 fica para brilho e hover. Os rgba() do style.css
   derivam de --red-rgb. A abertura do site continua vermelha (cor fixa no
   keyframe introBolt, de propósito). */
:root {
  --red-rgb: 219,47,102;
  --red: #DB2F66;
  --red-dark: #8F1740;
  --red-light: #FF4672;
  --rosa-h: 32px;
}

/* ====== FAIXA ROSA ======
   Faixa escura com friso rosa, para não se confundir com a faixa da corrida
   (que agora também é rosa). Fica logo abaixo dela. */
.rosa-bar {
  position: fixed; top: var(--announce-h); left: 0; right: 0; z-index: 101;
  height: var(--rosa-h); overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 12px; color: var(--white);
  font-family: var(--ff-heading); font-size: 12px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap;
  background: #1A1A1A;
  border-bottom: 2px solid var(--red-light);
  box-shadow: 0 2px 16px rgba(var(--red-rgb),0.35);
  animation: rosaIn 0.6s ease 1.3s both;
}
.rosa-fita { width: 14px; height: 16px; flex-shrink: 0; }
.rosa-nome { font-weight: 700; color: var(--red-light); }
.rosa-sep { opacity: 0.55; }
.rosa-curto { display: none; }
@keyframes rosaIn { from { opacity: 0; } to { opacity: 1; } }

/* A faixa rosa entra na conta de tudo o que já se posiciona abaixo da faixa
   vermelha (style.css: #navbar, scroll-padding-top e #impacto-run). */
#navbar { top: calc(var(--announce-h) + var(--rosa-h)); }
html { scroll-padding-top: calc(80px + var(--announce-h) + var(--rosa-h)); }
#impacto-run { padding-top: calc(var(--announce-h) + var(--rosa-h) + var(--nav-h) + 24px); }
@media (max-width: 768px) {
  #impacto-run { padding-top: calc(var(--announce-h) + var(--rosa-h) + var(--nav-h) + 8px); }
}

/* Menu do celular: a lista começava 100 px abaixo do topo, e com a faixa rosa a
   navbar desce 28 a 32 px e a logo cobria o item "Sobre". A lista passa a
   começar logo abaixo da navbar (86 px de altura; 62 px em celular baixo). */
.mobile-menu { padding-top: calc(var(--announce-h) + var(--rosa-h) + 86px); }

/* Celular baixo: a seção da corrida ocupa exatamente a primeira tela e o botão
   "Garantir minha vaga" tem que ficar nela. Sem o ajuste, os 32 px da faixa
   jogam o botão para fora em 320×568 (era 558 de 568; ficou 590). Recupera o
   espaço no menu e no vão da seção, sem esconder nada. Celulares altos
   (390×844) têm folga e não entram aqui. */
@media (max-width: 600px) and (max-height: 700px) {
  :root { --rosa-h: 28px; }
  #navbar { padding: 12px 0; }
  #impacto-run { --nav-h: 62px; }
  .run-hero-inner { gap: 10px; }
  .mobile-menu { padding-top: calc(var(--announce-h) + var(--rosa-h) + 62px + 8px); }
}

/* Celular estreito: texto curto na faixa. */
@media (max-width: 480px) {
  .rosa-bar { letter-spacing: 1px; }
  .rosa-longo { display: none; }
  .rosa-curto { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .rosa-bar { animation: none !important; }
}