/* ============================================================
   AQUARELA SCHOOL — PÁGINAS DE TURMA
   (bercario, mini-maternal, maternal, jardim)
============================================================ */

/* ── HERO TURMA ──────────────────────────────────────────── */
.turma-hero {
  padding: 72px 0 0;
  overflow: hidden;
}
/* Cada turma define --turma-cor e --turma-cor-texto via style inline */
.turma-hero-bg-amarelo    { background: var(--amarelo-dobra); }
.turma-hero-bg-azul       { background: var(--azul); }
.turma-hero-bg-verde      { background: var(--verde); }
.turma-hero-bg-azul-claro { background: var(--azul-claro); }

.turma-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  row-gap: 0;
  align-items: start;
  padding-bottom: 56px;
}
.turma-hero-inner > div .turma-hero-texto:last-child { margin-bottom: 0; }
.turma-hero-inner > .btn-group { margin-top: 24px; }
.turma-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azul-escuro);
  background: rgba(52, 63, 180, 0.1);
  padding: 6px 14px;
  border-radius: 30px;
  margin-bottom: 20px;
}
.turma-hero-titulo {
  font-family: var(--font-titulo);
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  color: var(--azul-escuro);
  line-height: 1.1;
  margin-bottom: 16px;
}
.turma-hero-subtitulo {
  font-size: 1rem;
  color: var(--azul-deep);
  margin-bottom: 24px;
  font-weight: 600;
}
.turma-hero-texto {
  font-size: 1rem;
  color: var(--texto);
  line-height: 1.78;
  margin-bottom: 32px;
  max-width: 520px;
}
.turma-hero-texto strong { font-weight: 700; color: var(--azul-escuro); }
.turma-hero-img-wrap {
  display: flex;
  justify-content: center;
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}
.turma-hero-img {
  width: 420px;
  height: 420px;
  object-fit: cover;
}
.turma-hero-deco {
  position: absolute;
  bottom: 10px;
  left: 40px;
  width: 60px;
  height: 60px;
  background: var(--amarelo);
  border-radius: 50%;
  border: 4px solid var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: var(--shadow-md);
}
.turma-hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.turma-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.turma-stat strong {
  font-family: var(--font-titulo);
  font-size: 1.5rem;
  color: var(--azul-escuro);
}
.turma-stat span {
  font-size: 0.8rem;
  color: var(--azul-deep);
  font-weight: 500;
}

/* ── TABS TURMA ──────────────────────────────────────────── */
/* usa .ciclos-tabs do style.css */

/* ── SEÇÕES DE CONTEÚDO TURMA ────────────────────────────── */
.turma-section {
  padding: 88px 0;
}
.turma-section.bg-branco    { background: var(--branco); }
.turma-section.bg-amarelo   { background: var(--amarelo-dobra); }
.turma-section.bg-cinza     { background: var(--cinza-claro); }
.turma-section.bg-azul-claro{ background: #EDF5FF; }

.turma-section-header {
  text-align: center;
  margin-bottom: 56px;
}
.turma-section-header h2 {
  font-family: var(--font-titulo);
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  color: var(--azul-escuro);
  margin-bottom: 14px;
}
.turma-section-header p {
  font-size: 1rem;
  color: var(--cinza);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Conteúdo dividido imagem + texto */
.turma-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.turma-split.reverse { direction: rtl; }
.turma-split.reverse > * { direction: ltr; }

/* Berçário — estímulos: CTA fica na col 2, abaixo do conteúdo (desktop) */
/* PPP e App agenda desktop: imagem na col 2, conteúdo na col 1 */
.ppp-split { align-items: center; }
.ppp-split .ppp-img { grid-column: 2; grid-row: 1; }
.ppp-split .turma-split-content { grid-column: 1; grid-row: 1; }
.app-split { align-items: center; }
.app-split .app-img { grid-column: 2; grid-row: 1; }
.app-split .turma-split-content { grid-column: 1; grid-row: 1; }

/* Mini Maternal — pedagógico: imagem col2 desktop, primeiro no DOM para mobile */
#pedagogico-split .pedagogico-img    { grid-column: 2; grid-row: 1; }
#pedagogico-split .turma-split-content { grid-column: 1; grid-row: 1; }

#estimulos-split { align-items: start; grid-template-rows: auto auto auto; }
#estimulos-split .estimulos-head { grid-column: 2; grid-row: 1; align-self: end; }
#estimulos-split .estimulos-img  { grid-column: 1; grid-row: 1 / 4; align-self: center; }
#estimulos-split .estimulos-body { grid-column: 2; grid-row: 2; align-self: start; }
#estimulos-split .estimulos-ctas {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.turma-split-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  max-width: 360px;
  margin: 0 auto;
  display: block;
}
.turma-split-content h3 {
  font-family: var(--font-titulo);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  color: var(--azul-escuro);
  margin-bottom: 16px;
}
.app-title,
.app-alim-title {
  font-family: var(--font-titulo);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  color: var(--azul-escuro);
  margin-bottom: 32px;
}
.turma-split-content p {
  font-size: 1rem;
  color: var(--texto);
  line-height: 1.78;
  margin-bottom: 14px;
}
.turma-split-content p strong { font-weight: 700; color: var(--azul-escuro); }
.turma-split-content ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}
.turma-split-content ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--texto);
  line-height: 1.6;
}
.turma-split-content ul li::before {
  content: '✓';
  color: var(--azul-escuro);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Cards informativos (diferenciais) */
.turma-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.turma-card {
  background: var(--branco);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  border-top: 4px solid var(--azul-escuro);
}
.turma-card-body {
  padding: 24px 28px 32px;
}
.turma-card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.turma-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.turma-card h4 {
  font-family: var(--font-titulo);
  font-size: 1.15rem;
  color: var(--azul-escuro);
  margin-bottom: 10px;
}
.turma-card p {
  font-size: 0.9rem;
  color: var(--cinza);
  line-height: 1.65;
}

/* Galeria fotos turma */
.turma-galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 40px;
}
.turma-galeria img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: var(--transition);
}
.turma-galeria img:hover { transform: scale(1.02); box-shadow: var(--shadow-md); }

/* Informações práticas */
.turma-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.turma-info-item {
  background: var(--branco);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
}
.turma-info-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}
.turma-info-item h4 {
  font-family: var(--font-titulo);
  font-size: 1rem;
  color: var(--azul-escuro);
  margin-bottom: 6px;
}
.turma-info-item p {
  font-size: 0.88rem;
  color: var(--cinza);
  line-height: 1.6;
}

/* ── DIFERENCIAIS GRID ───────────────────────────────────── */
.turma-diferenciais-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.turma-diferencial {
  background: var(--branco);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.turma-diferencial:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.turma-diferencial-icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}
.turma-diferencial h4 {
  font-family: var(--font-titulo);
  font-size: 1.05rem;
  color: var(--azul-escuro);
  margin-bottom: 8px;
}
.turma-diferencial p {
  font-size: 0.9rem;
  color: var(--cinza);
  line-height: 1.65;
}
@media (max-width: 860px) {
  .turma-diferenciais-grid { grid-template-columns: 1fr; }
}

/* ── DEPOIMENTO ──────────────────────────────────────────── */
.turma-depoimento {
  padding: 48px 0;
  background: var(--azul-escuro);
}
.turma-depoimento-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: center;
}
.turma-depoimento-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  display: block;
}
.turma-depoimento-aspas {
  font-family: var(--font-titulo);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--amarelo);
  margin-bottom: 12px;
  display: block;
}
.turma-depoimento-texto {
  font-family: var(--font-titulo);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--branco);
  line-height: 1.5;
  margin-bottom: 20px;
}
.turma-depoimento-autor {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.turma-depoimento-nome {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--amarelo);
}
.turma-depoimento-papel {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.65);
}
@media (max-width: 860px) {
  .turma-depoimento-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .turma-hero-inner { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .turma-hero-img-wrap { grid-column: unset; grid-row: unset; align-self: unset; }
  .turma-hero-img { width: 280px; height: 280px; }
  .turma-split { grid-template-columns: 1fr; gap: 36px; }
  .turma-split.reverse { direction: ltr; }
  .turma-cards { grid-template-columns: 1fr 1fr; }
  .turma-info-grid { grid-template-columns: 1fr; }
  .turma-galeria { grid-template-columns: 1fr 1fr; }
  /* Berçário — alimentação: imagem aparece antes do conteúdo no mobile */
  #alimentacao .turma-split-content { order: 2; }
  #alimentacao .turma-split > div:not(.turma-split-content) { order: 1; }
  /* PPP e App: reseta grid-column explícito do desktop para fluxo de 1 coluna */
  .ppp-split .ppp-img,
  .app-split .app-img { grid-column: unset; grid-row: unset; }
  .ppp-split .turma-split-content,
  .app-split .turma-split-content { grid-column: unset; grid-row: unset; }
  /* Mini Maternal — pedagógico: imagem > conteúdo no mobile (DOM order) */
  #pedagogico-split .pedagogico-img,
  #pedagogico-split .turma-split-content { grid-column: 1; grid-row: auto; }
  #app .app-title { margin-bottom: 24px; }
  /* Berçário — estímulos: título > imagem > conteúdo > CTAs no mobile (DOM order) */
  #estimulos-split .estimulos-head,
  #estimulos-split .estimulos-img,
  #estimulos-split .estimulos-body { grid-column: 1; grid-row: auto; align-self: auto; }
  #estimulos-split .estimulos-ctas { grid-column: 1; grid-row: auto; justify-content: center; flex-wrap: nowrap; }
}
@media (max-width: 540px) {
  .turma-cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-bottom: 12px;
    scrollbar-width: none;
  }
  .turma-cards::-webkit-scrollbar { display: none; }
  .turma-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .turma-galeria { grid-template-columns: 1fr; }
  .turma-galeria img { height: 180px; }
  .turma-hero-stats { gap: 20px; }
}