/* Paleta tirada da logo oficial (azul, creme e ocre). As cores de cada módulo
   ficam em js/data.js e são provisórias até a definição do Morcego. */
:root {
  --azul: #2b5883;
  --azul-escuro: #17314f;
  --papel: #faeadf;
  --papel-escuro: #f1dccd;
  --tinta: #17314f;
  --tinta-suave: #4a5d73;
  --terra: #2b5883;
  --terra-escura: #17314f;
  --ocre: #d38e27;
  --ocre-escuro: #9c6415;
  --ceu-topo: #0f2440;
  --ceu-meio: #2b5883;
  --ceu-base: #d38e27;
  --branco: #fffaf4;

  --fonte-titulo: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --fonte-destaque: "Amatic SC", "Comic Sans MS", cursive;
  --fonte-texto: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --raio: 18px;
  --largura: 1120px;
  --altura-topo: 68px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--altura-topo);
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--ocre);
  outline-offset: 3px;
}

.pular {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 100;
  background: var(--tinta);
  color: var(--branco);
  padding: 8px 14px;
  border-radius: 8px;
}

.pular:focus {
  left: 8px;
}

.container {
  width: min(100% - 40px, var(--largura));
  margin-inline: auto;
}

.container--estreito {
  width: min(100% - 40px, 760px);
}

/* ---------- Botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 2px solid var(--ocre);
  background: var(--ocre);
  color: var(--azul-escuro);
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.botao:hover {
  background: #e5a445;
  border-color: #e5a445;
  transform: translateY(-1px);
}

.botao--contorno {
  background: transparent;
  color: var(--branco);
  border-color: var(--branco);
}

.botao--contorno:hover {
  background: rgba(255, 250, 242, 0.15);
  border-color: var(--branco);
}

.botao--pequeno {
  padding: 9px 18px;
  font-size: 0.95rem;
}

/* ---------- Topo ---------- */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--altura-topo);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  color: var(--branco);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.topo--solido {
  background: rgba(246, 239, 228, 0.96);
  color: var(--tinta);
  box-shadow: 0 1px 0 rgba(43, 29, 20, 0.12);
  backdrop-filter: blur(8px);
}

.topo__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.05rem;
}

.topo__nav {
  display: flex;
  gap: 26px;
}

.topo__nav a {
  text-decoration: none;
  font-weight: 500;
  opacity: 0.9;
}

.topo__nav a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px;
}

@media (max-width: 820px) {
  .topo__nav {
    display: none;
  }
}

/* ---------- Abertura em camadas ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  color: var(--branco);
  isolation: isolate;
}

.hero__ceu {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--ceu-topo) 0%, var(--ceu-meio) 52%, #7d8a8a 74%, var(--ceu-base) 100%);
  z-index: -2;
}

.camada {
  position: absolute;
  left: 50%;
  width: 100%;
  min-width: 1200px;
  transform: translate3d(-50%, 0, 0);
  pointer-events: none;
  will-change: transform;
}

.camada--sol {
  width: clamp(120px, 16vw, 230px);
  min-width: 0;
  top: 13%;
  left: 82%;
  opacity: 0.9;
  animation: girar 90s linear infinite;
}

.camada--serra-fundo {
  bottom: 18%;
}

.camada--serra-frente {
  bottom: 8%;
}

.camada--casario {
  bottom: -2%;
}

.camada--quintal {
  bottom: -6%;
}

.camada--brincantes {
  width: min(92vw, 1100px);
  min-width: 0;
  bottom: 1%;
  filter: drop-shadow(0 10px 18px rgba(10, 20, 35, 0.45));
}

@media (max-width: 700px) {
  .camada--sol {
    display: none;
  }
}

@keyframes girar {
  to {
    rotate: 360deg;
  }
}

.hero__texto {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px 26vh;
  will-change: transform;
  z-index: 1;
}

.hero__sobretitulo {
  margin: 0 0 26px;
  font-size: clamp(0.75rem, 1.5vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.92;
}

.hero__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(3rem, 9.5vw, 7.8rem);
  line-height: 0.88;
  color: var(--papel);
  text-shadow: 0 4px 30px rgba(10, 25, 45, 0.45);
}

.hero__titulo span {
  font-size: 0.72em;
}

.hero__subtitulo {
  display: inline-block;
  margin: 10px 0 12px;
  padding-bottom: 4px;
  border-bottom: 3px solid var(--ocre);
  font-family: var(--fonte-destaque);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ocre);
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(10, 25, 45, 0.5);
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.hero__rolar {
  position: absolute;
  bottom: 22px;
  left: 50%;
  translate: -50% 0;
  width: 28px;
  height: 46px;
  border: 2px solid var(--branco);
  border-radius: 20px;
  z-index: 2;
}

.hero__rolar span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--branco);
  animation: rolar 1.6s ease-in-out infinite;
}

@keyframes rolar {
  50% {
    transform: translateY(14px);
    opacity: 0.3;
  }
}

/* ---------- Seções ---------- */
.secao {
  padding: 110px 0;
}

.rotulo {
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ocre-escuro);
}

.faixa {
  height: 48px;
  background: var(--azul) url("../assets/img/identidade/faixa-padrao.png") repeat-x center / auto 100%;
}

.secao__titulo {
  margin: 0 0 28px;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  color: var(--azul);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.1;
}

.secao__intro {
  max-width: 620px;
  color: var(--tinta-suave);
  margin: -10px 0 40px;
}

.formacao__grade {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: start;
}

.formacao__texto p {
  margin: 0 0 16px;
}

.numeros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.numeros li {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 22px;
  border: 1px solid rgba(43, 29, 20, 0.08);
}

.numeros strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--terra);
}

.numeros span {
  font-size: 0.95rem;
  color: var(--tinta-suave);
}

.cards {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  background: var(--papel-escuro);
  border-radius: var(--raio);
  padding: 28px;
}

.card h3 {
  margin: 0 0 10px;
  font-family: var(--fonte-titulo);
  font-size: 1.3rem;
}

.card p {
  margin: 0;
  color: var(--tinta-suave);
}

@media (max-width: 860px) {
  .formacao__grade,
  .cards {
    grid-template-columns: 1fr;
  }
}

/* ---------- Módulos: um por rolagem ---------- */
.modulos {
  padding-top: 110px;
}

.modulos__intro {
  margin-bottom: 50px;
}

.modulo {
  --cor: var(--terra);
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 90px 0;
  background: var(--cor);
  color: var(--branco);
  overflow: hidden;
}

.modulo__marca-dagua {
  position: absolute;
  right: -120px;
  top: 50%;
  width: 520px;
  translate: 0 -50%;
  opacity: 0.12;
  pointer-events: none;
}

.modulo__grade {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}

.modulo__numero {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 0.8;
  opacity: 0.35;
  margin: 0;
}

.modulo__datas {
  display: inline-block;
  margin: 18px 0 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 250, 242, 0.18);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.modulo__titulo {
  margin: 0 0 6px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.1;
}

.modulo__subtitulo {
  margin: 0 0 16px;
  font-style: italic;
  opacity: 0.85;
}

.modulo__resumo {
  margin: 0 0 22px;
  max-width: 560px;
}

.modulo__rostos {
  display: flex;
  align-items: center;
  margin-bottom: 26px;
}

.modulo__rostos .avatar {
  width: 48px;
  height: 48px;
  margin-right: -10px;
  border: 3px solid var(--cor);
  font-size: 0.9rem;
}

.modulo__rostos span.modulo__rostos-texto {
  margin-left: 22px;
  font-size: 0.95rem;
  opacity: 0.9;
}

.modulo__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.modulo .botao {
  background: var(--branco);
  border-color: var(--branco);
  color: var(--cor);
}

.modulo .botao:hover {
  background: var(--papel);
}

.modulo .botao--contorno {
  background: transparent;
  color: var(--branco);
}

.modulo__foto {
  aspect-ratio: 4 / 5;
  border-radius: 200px 200px var(--raio) var(--raio);
  overflow: hidden;
  background: rgba(255, 250, 242, 0.14);
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(255, 250, 242, 0.75);
  font-size: 0.95rem;
}

.modulo__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sanfona "saber mais" */
.modulo__detalhes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease;
}

.modulo__detalhes[data-aberto="true"] {
  grid-template-rows: 1fr;
}

.modulo__detalhes > div {
  overflow: hidden;
}

.detalhes__conteudo {
  margin-top: 36px;
  padding: 36px;
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--tinta);
}

.detalhes__conteudo h3 {
  margin: 0 0 16px;
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
  color: var(--cor);
}

.detalhes__bloco + .detalhes__bloco {
  margin-top: 34px;
}

.turnos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.turnos li {
  border-left: 4px solid var(--cor);
  background: var(--papel);
  border-radius: 0 12px 12px 0;
  padding: 14px 16px;
}

.turnos .turno__quando {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor);
}

.turnos .turno__tema {
  display: block;
  margin: 4px 0 6px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.1rem;
}

.turnos p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--tinta-suave);
}

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.galeria img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}

.galeria__vazia {
  padding: 26px;
  border: 2px dashed rgba(43, 29, 20, 0.2);
  border-radius: 12px;
  color: var(--tinta-suave);
  text-align: center;
}

.detalhes__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.detalhes__rodape .botao {
  background: var(--cor);
  border-color: var(--cor);
  color: var(--branco);
}

.detalhes__rodape .botao--whatsapp {
  background: #1e8f4e;
  border-color: #1e8f4e;
  color: #fff;
}

.detalhes__rodape .botao--whatsapp:hover {
  background: #177540;
  border-color: #177540;
}

.detalhes__nota {
  margin: 0;
  font-size: 0.95rem;
  color: var(--tinta-suave);
}

@media (max-width: 860px) {
  .modulo {
    min-height: auto;
  }
  .modulo__grade {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .modulo__foto {
    max-width: 380px;
  }
  .detalhes__conteudo {
    padding: 24px;
  }
}

/* ---------- Docentes: fotos redondas ---------- */
.avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cor, var(--terra));
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grade-docentes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 44px 28px;
}

.docente {
  text-align: center;
}

.docente .avatar {
  width: min(190px, 100%);
  aspect-ratio: 1;
  margin: 0 auto 16px;
  font-size: 2.6rem;
}

.docente__nome {
  margin: 0 0 4px;
  font-family: var(--fonte-titulo);
  font-size: 1.2rem;
  font-weight: 600;
}

.docente__resumo {
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: var(--tinta-suave);
}

.docente__modulos {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terra);
}

.docente a {
  color: var(--tinta-suave);
  font-size: 0.9rem;
}

.detalhes__docentes {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 28px 20px;
}

.detalhes__docentes .avatar {
  width: 120px;
  font-size: 1.8rem;
}

.detalhes__docentes .docente__bio {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--tinta-suave);
}

/* ---------- Inscrições ---------- */
.inscricoes {
  background: var(--papel-escuro);
}

.passos {
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
  counter-reset: passo;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.passos li {
  counter-increment: passo;
  background: var(--branco);
  border-radius: var(--raio);
  padding: 26px;
}

.passos li::before {
  content: counter(passo);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--terra);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 800;
}

.inscricoes__botoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.inscricao-modulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 14px;
  background: var(--cor);
  color: var(--branco);
  text-decoration: none;
  font-weight: 700;
  transition: transform 0.15s ease;
}

.inscricao-modulo:hover {
  transform: translateY(-2px);
}

.inscricao-modulo small {
  display: block;
  font-weight: 400;
  opacity: 0.85;
}

.inscricoes__geral {
  margin-top: 24px;
}

@media (max-width: 860px) {
  .passos {
    grid-template-columns: 1fr;
  }
}

/* ---------- Dúvidas ---------- */
.pergunta {
  border-bottom: 1px solid rgba(43, 29, 20, 0.15);
  padding: 18px 0;
}

.pergunta summary {
  cursor: pointer;
  font-family: var(--fonte-titulo);
  font-size: 1.2rem;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.pergunta summary::after {
  content: "+";
  color: var(--terra);
  font-size: 1.5rem;
  line-height: 1;
}

.pergunta[open] summary::after {
  content: "–";
}

.pergunta p {
  margin: 10px 0 0;
  color: var(--tinta-suave);
}

/* ---------- Rodapé ---------- */
.rodape {
  background: var(--tinta);
  color: var(--papel);
  padding: 70px 0 40px;
}

.rodape__grade {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}

.rodape__marca {
  margin: 0 0 8px;
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
}

.rodape p {
  margin: 0 0 8px;
}

.rodape__logos {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(246, 239, 228, 0.2);
}

.rodape__credito {
  font-size: 0.85rem;
  opacity: 0.8;
}

.regua-provisoria {
  margin-top: 18px;
  padding: 22px;
  border: 1px dashed rgba(246, 239, 228, 0.4);
  border-radius: 10px;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ---------- WhatsApp flutuante ---------- */
.whatsapp-flutuante {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.whatsapp-flutuante:hover {
  transform: scale(1.07);
}

/* ---------- Aparecer ao rolar ---------- */
.revelar {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.revelar--visivel {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .camada--sol,
  .hero__rolar span {
    animation: none;
  }
  .revelar {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .modulo__detalhes {
    transition: none;
  }
}