/* Página de escolas e cursos: o que muda em relação à de bombeiro (o resto vem do base.css). */
.hero {
  background: radial-gradient(120% 80% at 70% 110%, #2a0507 0%, #0f0506 45%, var(--black) 75%);
}
.hero__sala {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; pointer-events: none;
  /* a plateia fica atrás da ficha e no pé da tela, longe do título */
  -webkit-mask-image: radial-gradient(70% 75% at 72% 92%, #000 35%, transparent 80%);
          mask-image: radial-gradient(70% 75% at 72% 92%, #000 35%, transparent 80%);
}
@media (max-width: 960px) {
  .hero__sala {
    -webkit-mask-image: linear-gradient(180deg, transparent 45%, #000 85%);
            mask-image: linear-gradient(180deg, transparent 45%, #000 85%);
  }
}

.eyebrow__ponto {
  width: 10px; height: 10px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 0 rgba(229, 9, 20, .7);
  animation: ponto 1.8s infinite;
}
@keyframes ponto {
  0% { box-shadow: 0 0 0 0 rgba(229, 9, 20, .7); }
  70% { box-shadow: 0 0 0 10px rgba(229, 9, 20, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 9, 20, 0); }
}

/* A última linha do título acende como a sala: luz quente que passa devagar. */
.luz-text {
  background: linear-gradient(100deg, #ffffff 0%, #ffd9a0 30%, var(--orange) 55%, var(--red) 80%, #ffffff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: luzText 5s ease-in-out infinite alternate;
}
@keyframes luzText { from { background-position: 0 0; } to { background-position: 100% 0; } }

/* Seis tipos de escola em duas colunas; no celular, uma. */
.opcoes--tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opcoes--tipos .opcao span { min-height: 58px; display: flex; align-items: center; line-height: 1.2; }
@media (max-width: 480px) {
  .opcoes--tipos { grid-template-columns: minmax(0, 1fr); }
  .opcoes--tipos .opcao span { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .luz-text, .eyebrow__ponto { animation: none; }
}