/* ============================================================
   RESPONSIVIDADE — KIDS Centro Educacional
   Mobile-first: adaptações por breakpoint.
   ============================================================ */


/* -------- TABLET GRANDE (até 1100px) -------- */
@media (max-width: 1100px) {

  :root {
    --espaco-secao: 5.5rem;
    --espaco-extra:  7rem;
  }

  .hero-grade {
    gap: var(--espaco-medio);
  }
}


/* -------- TABLET (até 960px) -------- */
@media (max-width: 960px) {

  :root {
    --espaco-secao: 4.5rem;
    --espaco-extra:  5.5rem;
    --espaco-grande: 3rem;
  }

  /* Hero: coluna única */
  .hero-grade {
    grid-template-columns: 1fr;
  }

  .hero-imagem {
    display: none; /* esconde imagem hero em tablet para priorizar texto */
  }

  .bloco-hero {
    min-height: auto;
    padding: calc(var(--espaco-grande) + 80px) 0 var(--espaco-grande);
  }

  .hero-titulo {
    font-size: clamp(2.25rem, 7vw, 3.5rem);
  }

  /* Blocos de duas colunas */
  .bloco-duas-colunas {
    grid-template-columns: 1fr;
    gap: var(--espaco-medio);
  }

  .bloco-duas-colunas.invertido .imagem-bloco {
    order: unset;
  }

  .bloco-duas-colunas .imagem-bloco {
    aspect-ratio: 16 / 9;
  }

  /* Pilares: 2 colunas em tablet */
  .grade-pilares {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Último pilar-item e CTA ocupam largura total */
  .grade-pilares > .pilar-item:nth-last-child(2) {
    grid-column: span 2;
  }

  .pilar-cta {
    grid-column: span 2;
    min-height: auto;
    padding: var(--espaco-grande) var(--espaco-medio);
  }

  .pilar-cta .botao {
    margin-top: 0;
  }


  /* Turmas: 1 coluna */
  .grade-turmas {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin-inline: auto;
  }

  .card-turma {
    min-height: 320px;
  }

  /* Unidades */
  .grade-unidades {
    grid-template-columns: 1fr;
    max-width: 580px;
    margin-inline: auto;
  }

  /* Containers */
  .conteudo-central,
  .conteudo-estreito {
    padding: 0 var(--espaco-pequeno);
  }

  /* Botão WA float menor */
  .btn-whatsapp-float {
    bottom: 20px;
    right: 16px;
    padding: 12px 18px 12px 14px;
    font-size: var(--texto-mini);
  }
}


/* -------- MOBILE (até 640px) -------- */
@media (max-width: 640px) {

  :root {
    --espaco-secao:  3.5rem;
    --espaco-grande: 2.5rem;
    --espaco-extra:  4rem;
    --espaco-medio:  1.5rem;
  }

  body {
    font-size: 0.9375rem;
  }

  /* Hero */
  .bloco-hero {
    padding: calc(var(--espaco-grande) + 72px) 0 var(--espaco-grande);
  }

  .hero-titulo {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

  .hero-subtitulo {
    font-size: var(--texto-base);
  }

  .hero-acoes {
    flex-direction: column;
    gap: 10px;
  }

  .hero-acoes .botao {
    width: 100%;
    justify-content: center;
  }

  .hero-credibilidade {
    gap: var(--espaco-pequeno);
    flex-wrap: wrap;
  }

  .indicador strong {
    font-size: var(--titulo-pequeno);
  }

  /* Turmas */
  .card-turma {
    min-height: 280px;
  }

  /* Diferenciais */
  .grade-diferenciais {
    grid-template-columns: 1fr;
  }

  /* Pilares — bento grid mobile: 2 colunas, item 5 e CTA em largura total */
  .grade-pilares {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .grade-pilares-3 {
    grid-template-columns: 1fr;
  }

  .grade-pilares > .pilar-item:nth-last-child(2) {
    grid-column: span 2;
  }

  .pilar-cta {
    grid-column: span 2;
    flex-direction: column;
    min-height: 180px;
    padding: var(--espaco-medio);
  }

  /* Estatísticas */
  .grade-estatisticas {
    grid-template-columns: 1fr 1fr;
  }

  .estatistica {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: var(--espaco-pequeno);
  }

  .estatistica:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.08);
  }

  /* Depoimentos */
  .grade-depoimentos {
    grid-template-columns: 1fr;
  }

  /* CTA Final */
  .bloco-chamada {
    padding: var(--espaco-grande) var(--espaco-pequeno);
    border-radius: var(--raio-grande);
  }

  .bloco-chamada .acoes-cta {
    flex-direction: column;
  }

  .bloco-chamada .acoes-cta .botao {
    width: 100%;
    justify-content: center;
  }

  .bloco-chamada-mascote {
    display: none;
  }

  /* Cabeçalho de página */
  .cabecalho-pagina {
    padding: calc(var(--espaco-medio) + 72px) 0 var(--espaco-grande);
  }

  /* Formulários */
  .linha-formulario {
    grid-template-columns: 1fr;
  }

  /* Modal WA */
  .modal-whatsapp {
    border-radius: var(--raio-grande) var(--raio-grande) 0 0;
  }

  /* Btn WA float: só ícone em mobile muito pequeno */
  .btn-whatsapp-float .btn-wa-texto {
    display: none;
  }

  .btn-whatsapp-float {
    padding: 14px;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    justify-content: center;
  }

  /* Timeline */
  .timeline::before {
    left: 18px;
  }

  .timeline-ponto {
    width: 38px;
    height: 38px;
    font-size: var(--texto-pequeno);
  }

  /* Grade editorial */
  .grade-editorial {
    grid-template-columns: 1fr;
  }

  .grade-editorial .item-principal {
    grid-row: auto;
  }
}


/* -------- MOBILE PEQUENO (até 400px) -------- */
@media (max-width: 400px) {

  :root {
    --espaco-secao: 3rem;
  }

  .conteudo-central,
  .conteudo-estreito {
    padding: 0 1rem;
  }

  .botao {
    padding: 13px 22px;
  }

  /* Pilares: coluna única abaixo de 400px */
  .grade-pilares {
    grid-template-columns: 1fr;
  }

  .grade-pilares > .pilar-item:nth-last-child(2),
  .pilar-cta {
    grid-column: auto;
  }

  .grade-estatisticas {
    grid-template-columns: 1fr;
  }

  .estatistica:nth-child(odd) {
    border-right: none;
  }
}


/* -------- PREFERÊNCIA: MENOS MOVIMENTO -------- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .entrada-rolagem,
  .entrada-rolagem-esquerda,
  .entrada-rolagem-direita {
    opacity: 1;
    transform: none;
  }

  .hero-mascote {
    animation: none;
  }

  .btn-whatsapp-float::before {
    animation: none;
  }

  .hero-tag .ponto {
    animation: none;
  }
}