/*
 * Outubro Rosa: o herói da página inicial vira um rosa bem claro, quase
 * branco, com a mensagem da campanha em magenta escuro e a mulher apoiada na
 * faixa de ícones. Só é carregado enquanto a campanha está ativa
 * (capitao_2025_outubro_rosa_ativo em inc/enqueue.php): em outubro, ou quando
 * um filtro liga.
 *
 * O rosa não faz parte da paleta da marca. Contrastes conferidos sobre o fundo
 * #fdeaf2: título #9c0f4c (7:1), texto #3d2230 (12:1), destaque #d11a6e
 * (4,5:1, só em texto grande).
 */

.cap-outubro-rosa .cap-hero {
  background: linear-gradient(135deg, #fff7fa 0%, #fdeaf2 55%, #fbdbe8 100%);
  color: #3d2230;
}

/* Com o vídeo de abertura, o rosa claro deixa o vídeo aparecer só de leve por baixo. */
.cap-outubro-rosa.cap-com-abertura .cap-hero {
  background: rgba(253, 234, 242, 0.93);
}

/* Na campanha o fundo fica limpo: sem o símbolo grande atrás da mensagem. */
.cap-outubro-rosa .cap-hero__marca-dagua {
  display: none;
}

.cap-outubro-rosa .cap-abertura__escuro {
  background:
    linear-gradient(90deg, rgba(8, 14, 46, 0.66) 0, rgba(8, 14, 46, 0.18) 62%, rgba(8, 14, 46, 0.3) 100%),
    linear-gradient(0deg, rgba(8, 14, 46, 0.5) 0, rgba(8, 14, 46, 0) 28%);
}

/* Texto escuro sobre o rosa claro. */
.cap-outubro-rosa .cap-hero__titulo {
  color: #9c0f4c;
}

.cap-outubro-rosa .cap-hero__titulo em {
  color: #d11a6e;
}

.cap-outubro-rosa .cap-hero__sub {
  color: #3d2230;
  font-weight: var(--fw-corpo-forte);
}

/* O selo da campanha, no lugar da linha de apresentação. */
.cap-hero__campanha {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--esp-3);
  padding: 0.4rem 1.1rem 0.4rem 0.9rem;
  background: var(--cor-branco);
  border: 1px solid #f2a5c3;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(209, 26, 110, 0.12);
  color: #9c0f4c;
  font-family: var(--f-titulo);
  font-weight: var(--fw-titulo);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cap-hero__campanha svg {
  flex: none;
  color: #d11a6e;
}

/*
 * A foto da campanha ocupa a direita do herói e termina encostada na faixa de
 * ícones (a faixa cobre a emenda), então a mulher não flutua. A borda esquerda
 * da foto se dissolve no rosa do herói, para o texto ficar sobre fundo limpo.
 */
.cap-hero--foto {
  background: #fdeaf2;
}

.cap-hero__foto {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: auto;
  max-width: none;
  height: 26rem;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 32%);
  mask-image: linear-gradient(180deg, transparent 0, #000 32%);
}

@media (min-width: 64em) {
  .cap-hero__foto {
    height: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%);
    mask-image: linear-gradient(90deg, transparent 0, #000 40%);
  }
}

/* As barras da marca, do mesmo tamanho de antes, agora atrás do texto à esquerda. */
.cap-hero--foto .cap-hero__texto {
  position: relative;
  isolation: isolate;
}

.cap-hero__pilares--texto {
  position: absolute;
  right: auto;
  bottom: -3.5rem;
  left: -2rem;
  z-index: -1;
  width: 30rem;
  max-width: none;
  opacity: 0.55;
  pointer-events: none;
}

@media (min-width: 48em) {
  .cap-hero__pilares--texto {
    bottom: -4.5rem;
    width: 44rem;
    opacity: 0.9;
  }
}

/* O laço da campanha preso ao canto do logo, no topo de todas as páginas. */
.cap-marca {
  position: relative;
}

.cap-marca__laco {
  position: absolute;
  top: -0.7rem;
  left: -0.9rem;
  z-index: 2;
  width: 2.1rem;
  height: 2.1rem;
  transform: rotate(-20deg);
  transform-origin: 50% 90%;
  filter: drop-shadow(0 2px 3px rgba(120, 10, 60, 0.35));
  animation: cap-laco-balanca 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cap-laco-balanca {
  0%,
  100% {
    transform: rotate(-20deg);
  }

  50% {
    transform: rotate(-9deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cap-marca__laco {
    animation: none;
  }
}

/* Um fio rosa no topo do cabeçalho. */
.cap-outubro-rosa .cap-topo {
  border-top: 4px solid #d11a6e;
}

/* Alto contraste desliga o rosa: volta ao preto, branco e amarelo. */
html[data-contraste="alto"] .cap-outubro-rosa .cap-hero {
  background: #000000;
  color: #ffffff;
}

html[data-contraste="alto"] .cap-outubro-rosa .cap-hero__titulo,
html[data-contraste="alto"] .cap-outubro-rosa .cap-hero__titulo em,
html[data-contraste="alto"] .cap-outubro-rosa .cap-hero__sub {
  color: #ffffff;
}

html[data-contraste="alto"] .cap-outubro-rosa .cap-hero__campanha {
  background: #000000;
  border-color: #ffffff;
  color: #ffff00;
}