/*
 * Novembro Azul: o herói da página inicial vira um azul bem claro, com a
 * mensagem da campanha em azul escuro. A estrutura (foto à direita, selo, laço
 * no logo) vem de 04-outubro-rosa.css, que também é carregado nesta campanha;
 * aqui só trocamos as cores. Só é carregado enquanto a campanha está ativa
 * (capitao_2025_novembro_azul_ativo em inc/enqueue.php): em novembro, ou
 * quando um filtro liga.
 *
 * O azul da campanha não faz parte da paleta da marca. Contrastes conferidos
 * sobre o fundo #eaf3fd: título #0a3a8a (9:1), texto #14253d (14:1), destaque
 * #1565d8 (4,7:1, só em texto grande).
 */

.cap-novembro-azul .cap-hero,
.cap-novembro-azul .cap-hero--foto {
  background: linear-gradient(135deg, #f6faff 0%, #eaf3fd 55%, #d9e9fb 100%);
  color: #14253d;
}

/* Com o vídeo de abertura, o azul claro fica opaco: translúcido, o vídeo da cidade aparecia como uma mancha atrás do texto. */
.cap-novembro-azul.cap-com-abertura .cap-hero {
  background: #eaf3fd;
}

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

.cap-novembro-azul .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%);
}

/*
 * As barras da marca ficam atrás do texto e também atrás da foto: sem isto, a
 * terceira barra passava por cima do braço da criança. O herói vira o contexto
 * de empilhamento (as barras, em z-index -1, ficam sob a foto) e os textos
 * sobem para ficar acima dela.
 */
.cap-novembro-azul .cap-hero--foto {
  isolation: isolate;
}

.cap-novembro-azul .cap-hero--foto .cap-hero__in {
  z-index: auto;
}

.cap-novembro-azul .cap-hero--foto .cap-hero__texto {
  isolation: auto;
}

.cap-novembro-azul .cap-hero--foto .cap-hero__texto > :not(.cap-hero__pilares) {
  position: relative;
  z-index: 2;
}

/* Texto escuro sobre o azul claro. */
.cap-novembro-azul .cap-hero__titulo {
  color: #0a3a8a;
}

.cap-novembro-azul .cap-hero__titulo em {
  color: #1565d8;
}

.cap-novembro-azul .cap-hero__sub {
  color: #14253d;
  font-weight: var(--fw-corpo-forte);
}

/*
 * No celular a foto é mais larga que a tela e fica presa à direita: a criança,
 * à esquerda do grupo, saía cortada. Empurra a foto um pouco para a direita.
 */
@media (max-width: 63.99em) {
  .cap-novembro-azul .cap-hero__foto {
    right: -3rem;
  }

  /* O grupo ocupa quase toda a altura da foto: reserva a altura dela (26rem) para não subir sobre o texto. */
  .cap-novembro-azul .cap-hero__arte {
    min-height: 26rem;
  }
}

/* Em telas médias a foto começa perto do texto: empurra um pouco para a direita. */
@media (min-width: 64em) and (max-width: 80em) {
  .cap-novembro-azul .cap-hero__foto {
    right: -4rem;
  }
}

/* O selo da campanha, no lugar da linha de apresentação. */
.cap-novembro-azul .cap-hero__campanha {
  border-color: #9ec5f5;
  box-shadow: 0 6px 18px rgba(21, 101, 216, 0.14);
  color: #0a3a8a;
}

.cap-novembro-azul .cap-hero__campanha svg {
  color: #1565d8;
}

/* O laço azul preso ao canto do logo. */
.cap-novembro-azul .cap-marca__laco {
  filter: drop-shadow(0 2px 3px rgba(10, 58, 138, 0.35));
}

/* Um fio azul no topo do cabeçalho. */
.cap-novembro-azul .cap-topo {
  border-top: 4px solid #1565d8;
}

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

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

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