/* ============================================================
   RESPONSIVIDADE — Mapa do Católico
   ============================================================ */

/* Tablet */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns: 1fr; text-align:center; }
  .hero .lead{ margin: 0 auto; }
  .hero-cta{ justify-content:center; }
  .rosario-arte{ margin-top: 40px; }

  .grade-beneficios{ grid-template-columns: repeat(2,1fr); }
  .grade-passos{ grid-template-columns: 1fr; }
  .grade-depoimentos{ grid-template-columns: 1fr; }

  .terco-layout{ grid-template-columns: 1fr; }
  .painel-biblia{ grid-template-columns: 1fr; }
  .grade-dupla{ grid-template-columns: 1fr; }
  .grade-novenas{ grid-template-columns: repeat(2,1fr); }
  .grade-oracoes{ grid-template-columns: repeat(2,1fr); }
  .grade-jornada{ grid-template-columns: repeat(2,1fr); }
  .grade-medalhas{ grid-template-columns: repeat(2,1fr); }

  .tela-auth{ grid-template-columns: 1fr; }
  .auth-lado{ display:none; }
}

/* App shell -> vira mobile com menu inferior */
@media (max-width: 900px){
  .sidebar{ display:none; }
  .conteudo-app{ margin-left:0; padding: 24px 18px 96px; }
  .bottom-nav{ display:flex; }
  .topo-pagina{ align-items:center; }
}

/* Mobile */
@media (max-width: 640px){
  .container{ padding: 0 18px; }
  .header-site .container{ height:64px; }
  .nav-site{ display:none; }
  .hero{ padding: 70px 0 80px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }

  .faixa{ padding: 60px 0; }
  .grade-beneficios{ grid-template-columns: 1fr; }
  .grade-novenas{ grid-template-columns: 1fr; }
  .grade-oracoes{ grid-template-columns: 1fr; }
  .grade-jornada{ grid-template-columns: repeat(2,1fr); gap:12px; }
  .grade-medalhas{ grid-template-columns: repeat(2,1fr); }
  .lista-acoes-rapidas{ grid-template-columns: 1fr; }

  .auth-form-wrap{ padding: 24px; }

  .detalhe-novena-topo{ grid-template-columns: 1fr; }
  .detalhe-novena-topo .capa{ height:150px; }

  .palco-terco{ padding: 28px 20px; min-height: 420px; }
  .passo-titulo{ font-size:1.5rem; }

  .footer-site .container{ flex-direction:column; text-align:center; }

  .modal-caixa{ padding: 26px 20px; }

  .saudacao-card{ padding: 26px; }
  .cabecalho-liturgico{ padding: 20px; }
}