/* =========================================================================
   responsive.css · adaptações para notebook, tablet e celular
   Prioridade de projeto: 1920×1080. Também 1366×768, tablet e mobile.
   ========================================================================= */

/* Notebook / telas menores de altura */
@media (max-height: 800px) {
  .tela { padding-top: 4.5rem; }
  .display { font-size: clamp(2.2rem, 5vw, 4.4rem); }
}

/* Tablet */
@media (max-width: 1024px) {
  .pilares, .eco-grid, .cards-3, .faixas { grid-template-columns: repeat(2, 1fr); }
  .sim-layout { grid-template-columns: 1fr; }
  .composicao-viva { position: static; }
  .corretor-card { grid-template-columns: 1fr; text-align: center; }
  .corretor-foto { max-width: 220px; margin-inline: auto; }
  .split, .app-preview { grid-template-columns: 1fr; }
  .comp-linha { grid-template-columns: 120px 1fr auto; }
}

/* Celular */
@media (max-width: 680px) {
  .tela { padding: 4.5rem 1.2rem 6.5rem; }
  .pilares, .eco-grid, .cards-3, .cards-2, .faixas, .proposta-form, .sim-campos { grid-template-columns: 1fr; }
  .emp-grid { grid-template-columns: 1fr; }
  .display { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .titulo-secao { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .numeros { gap: 1.4rem; }
  .progresso-legenda, .marca-topo .marca-nome { display: none; }
  .comp-linha { grid-template-columns: 100px 1fr; }
  .comp-linha .comp-valor { grid-column: 2; text-align: left; }
  .balao-linha { grid-template-columns: 1fr 1fr; }
  .modal-painel { margin: 0; border-radius: 0; min-height: 100vh; }
  .passos-linha .seta { display: none; }
  #barra-comparar { left: 1rem; right: 1rem; transform: translateY(30px); width: auto; }
  #barra-comparar.mostra { transform: translateY(0); }
  .nav-passo { display: none; }
}

/* Toque: alvos maiores */
@media (pointer: coarse) {
  .filtro-btn, .chip { padding-top: 0.7em; padding-bottom: 0.7em; }
}