/* ==========================================================================
   MARCA — ESCOLA AMANHECER | CENTRO DE EDUCAÇÃO INFANTIL
   Recria o linkbio antigo (WordPress/Elementor): hero ilustrado (creme) com
   logo e título em arte, cards em arte (2 colunas no desktop), faixa azul
   ondulada com dois carrosséis (Equipe e Unidades) e rodapé amarelo.
   Medidas copiadas do Elementor: conteúdo de 1120px, hero de 581px
   (789px no celular), 4 fotos por tela (3 no tablet, 1 no celular).
   ========================================================================== */

/* ---- Hero --------------------------------------------------------------- */
.hero {
  min-height: 581px;
  padding: 0 0 75px;
  justify-content: center;
}
.hero__bg {
  inset: 0;                      /* a onda branca fica colada no fim do hero */
  background: var(--hero-img) center bottom / cover no-repeat, var(--hero-base);
}
.hero__inner {
  width: min(1140px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.hero__logo {
  width: 12%;
  max-width: none;
  margin: 0;
}
.hero__title { line-height: 0; width: 100%; }
.hero__texto {
  display: block;
  width: 24%;
  height: auto;
  margin: 0 auto;
}

/* ---- Cards em arte ------------------------------------------------------ */
.cards {
  grid-template-columns: 1fr 1fr;
  gap: 40px 20px;
  padding: 0 10px;
  margin: 50px 0;
}
.card {
  box-shadow: none;
  background: transparent;
}
.card img { height: auto; }
.card--email {
  grid-column: 1 / -1;
  justify-self: center;
  width: 665px;                  /* 86% da arte, como no original */
  max-width: 100%;
}
.cards .card:nth-child(5).reveal { transition-delay: .45s; }

.card:hover img { transform: none; }          /* arte com texto: sem zoom */
.card.is-visible:hover,
.card:hover {
  transform: translateY(-6px);
  box-shadow: none;
}
.card.is-visible:active,
.card:active { transform: translateY(-2px); }

/* ---- Faixa azul com os carrosséis -------------------------------------- */
.azul {
  background: url("../assets/fundo-azul.webp") center top / cover no-repeat, #4a7bb2;
  padding: 160px 20px 80px;
}

.vitrine {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
}
.vitrine--equipe { margin-bottom: 49px; }

.vitrine__cabecalho {
  justify-content: center;
  padding: 0;
  margin-bottom: 20px;
}
.vitrine__titulo {
  margin: 0;
  line-height: 0;
  width: 100%;
  text-align: center;
}
.vitrine__titulo img {
  display: inline-block;
  width: 30%;
  height: auto;
}

.trilho {
  gap: 5px;
  padding: 0;
}
.slide {
  width: calc((100% - 15px) / 4);            /* 4 fotos por tela */
  scroll-snap-align: start;
  border-radius: 0;
  background: transparent;
}
.vitrine--equipe .slide__foto  { aspect-ratio: 314 / 557; }
.vitrine--unidades .slide__foto { aspect-ratio: 1000 / 1600; }

.pontos {
  gap: 12px;
  margin-top: 21px;
}
.pontos button {
  width: 6px;
  height: 6px;
  background: var(--borda);
}
.vitrine--unidades .pontos button { width: 5px; height: 5px; }
.pontos button[aria-current="true"] {
  background: var(--acao);
  transform: none;
}

/* ---- Rodapé ------------------------------------------------------------- */
.footer { padding: 10px; }
.footer small {
  display: block;
  font-size: 15px;
  line-height: 15px;
  font-weight: 500;
}

/* ---- Tablet ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__logo  { width: 22%; }
  .hero__texto { width: 37%; }
  .slide { width: calc((100% - 10px) / 3); } /* 3 fotos por tela */
}

/* ---- Celular ------------------------------------------------------------ */
@media (max-width: 767px) {
  .hero {
    min-height: 789px;
    padding: 0 0 175px;
  }
  .hero__bg {
    background: var(--hero-img-mobile) center bottom / cover no-repeat, var(--hero-base);
  }
  .hero__logo  { width: 44%; height: 145px; }
  .hero__texto { width: 77%; }

  .cards {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 20px;
    margin: 50px 0;
  }
  .card--email { width: auto; }
  .cards .card:nth-child(3),
  .cards .card:nth-child(5) { margin-top: 1px; }   /* 21px, como no Elementor */

  .vitrine__titulo img { width: 71%; }
  .trilho { gap: 20px; }
  .slide { width: 100%; }                     /* 1 foto por vez */
  .vitrine--equipe .slide__foto {
    width: 314px;                             /* tamanho natural, centralizada */
    max-width: 100%;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card.is-visible:hover,
  .card:hover,
  .card:active { transform: none; }
}