/* Tipografia delicada e legível: Lato nos textos e Fraunces nos títulos. */
@font-face {
  font-family: "Lato Local";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lato Local";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/lato-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lato Local";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/lato-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lato Local";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lato-latin-700-normal.woff2") format("woff2");
}
:root {
  --font-sans: "Lato Local", "Segoe UI", Arial, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --default-font-family: "Lato Local", "Segoe UI", Arial, sans-serif;
}
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: auto;
  -webkit-font-smoothing: auto;
}
body {
  font-family: "Lato Local", "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  font-kerning: normal;
}
h1, h2, h3,
.font-display {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: -.015em;
}

/* Textos pequenos um pouco maiores no computador, sem depender de zoom. */
.text-xs { font-size: .8125rem; line-height: 1.45; }
.text-sm { font-size: .9375rem; line-height: 1.5; }

/* Evita que as animações mantenham textos em uma camada transformada. */
.reveal.is-visible {
  transform: none;
  will-change: auto;
}

@media (max-width: 767px) {
  body { font-size: 16px; }
  .text-xs { font-size: .8125rem; }
  .text-sm { font-size: .9375rem; }
}

/* Galeria de alunos */
.student-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  position: relative;
  padding: 1.25rem;
  border: 1px solid rgba(151, 110, 70, .12);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 10% 10%, rgba(225, 176, 91, .16), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(244,237,226,.68));
  box-shadow: 0 20px 55px -38px rgba(81, 57, 39, .5);
}

.student-photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
  border: 4px solid rgba(255, 255, 255, 0.94);
  border-radius: 1.15rem;
  background: #f4ede2;
  box-shadow: 0 14px 28px rgba(81, 57, 39, 0.13);
  transition: transform 350ms ease, box-shadow 350ms ease;
}

.student-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.student-photo:hover img {
  transform: scale(1.045);
}

.student-photo:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 38px rgba(81, 57, 39, 0.2);
}

@media (max-width: 767px) {
  .student-gallery {
    display: flex;
    gap: 1rem;
    margin-inline: -1.25rem;
    padding: 1rem 1.25rem 1.25rem;
    border-inline: 0;
    border-radius: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .student-gallery::-webkit-scrollbar {
    display: none;
  }

  .student-photo,
  .student-photo:nth-child(4) {
    flex: 0 0 min(62vw, 15rem);
    grid-column: auto;
    scroll-snap-align: center;
  }
}

/* Títulos com acabamento delicado e mais presença visual. */
main h2 {
  position: relative;
  padding-bottom: .55rem;
  color: #513927;
  text-shadow: 0 2px 18px rgba(179, 126, 49, .12);
}

main h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: .75rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #e2ad4f, #b87835 70%, transparent);
  box-shadow: 0 3px 10px rgba(184, 120, 53, .22);
}

/* O bloco marrom pede uma versão clara do mesmo detalhe. */
.bg-brand-brown h2 { color: #fffaf2; }
.bg-brand-brown h2::after {
  background: linear-gradient(90deg, #f5cd7b, rgba(245, 205, 123, .15));
}

.hero-kicker {
  text-transform: none;
  letter-spacing: .035em;
  font-size: .875rem;
  color: #664631;
  background: linear-gradient(120deg, rgba(247,231,200,.96), rgba(239,197,117,.72));
  border: 1px solid rgba(184,120,53,.16);
  box-shadow: 0 8px 22px -15px rgba(81,57,39,.65);
}

/* Mantém todos os pequenos títulos de seção com o mesmo acabamento do destaque inicial. */
.section-kicker {
  text-transform: none;
  letter-spacing: .035em;
  font-size: .875rem;
  color: #664631;
  background: linear-gradient(120deg, rgba(247,231,200,.96), rgba(239,197,117,.72));
  border: 1px solid rgba(184,120,53,.16);
  box-shadow: 0 8px 22px -15px rgba(81,57,39,.65);
}

#inicio h1 {
  background: linear-gradient(105deg, #513927 10%, #7a5132 62%, #b87835 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 5px 28px rgba(81,57,39,.08);
}

@media (prefers-reduced-motion: reduce) {
  .student-photo, .student-photo img { transition: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .student-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===========================================================
   Ajustes finos de tipografia, ritmo e acabamento (v10)
   =========================================================== */

/* Âncoras: o cabeçalho é fixo, então o título da seção precisa
   de folga ao rolar pelo menu. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-visible { transition: none !important; }
}

/* Espaçamento entre seções mais equilibrado (menos vazio no
   computador, respiro suficiente no celular). */
main > section {
  padding-block: clamp(3.25rem, 6.5vw, 5.25rem);
}
main > section#inicio {
  padding-top: clamp(6.5rem, 11vw, 9rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* Títulos: quebra de linha mais bonita e entrelinha mais firme. */
h1, h2, h3 { text-wrap: balance; }
h1 { line-height: 1.06; }
h2 { line-height: 1.14; }
h3 { line-height: 1.25; }
p  { text-wrap: pretty; }

/* Título principal com escala fluida: nunca quebra em 4 linhas. */
#inicio h1 {
  font-size: clamp(2.3rem, 5.1vw, 3.65rem);
  letter-spacing: -.02em;
}
#inicio h1 + p {
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  line-height: 1.65;
}

/* Corpo de texto: leitura mais confortável. */
body { line-height: 1.6; }
.text-brand-brown-mid { line-height: 1.65; }

/* Etiquetas (pílulas) com respiro melhor entre letras. */
.uppercase.tracking-wider { letter-spacing: .12em; }

/* Foto do hero: moldura clara para destacar da luz de fundo. */
#inicio img {
  box-shadow:
    0 26px 60px -28px rgba(81, 57, 39, .45),
    0 0 0 1px rgba(255, 255, 255, .7) inset;
}

/* Cartões: hover discreto e consistente em todo o site. */
.shadow-card {
  transition: transform .28s ease, box-shadow .28s ease;
}
article.shadow-card:hover,
details.shadow-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -24px rgba(81, 57, 39, .38);
}

/* Menu: leitura mais clara e alvo de clique maior. */
nav[aria-label="Principal"] a:not(.warm-gradient) {
  position: relative;
  padding-block: .35rem;
}
nav[aria-label="Principal"] a:not(.warm-gradient)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: .6;
  transition: right .25s ease;
}
nav[aria-label="Principal"] a:not(.warm-gradient):hover::after { right: 0; }

/* Perguntas frequentes: linhas mais legíveis no computador. */
#duvidas summary { font-size: 1.0125rem; }

/* Formulário: campos com foco visível e altura confortável. */
input, textarea {
  font-family: inherit;
}
input:focus-visible, textarea:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
  border-radius: 999px;
}

/* Rodapé com hierarquia um pouco mais suave. */
footer a { transition: opacity .2s ease; }
footer a:hover { opacity: .78; }

/* Imagens nunca estouram o contêiner. */
img, video { max-width: 100%; }