/* ============================================================
   IMAGINE MÓVEIS PLANEJADOS — responsive.css
   Ajustes finos por dispositivo (o restante usa Mobile First)
   Breakpoints: 640 / 768 / 992 / 1200
   ============================================================ */

/* ---------- Base (mobile) ---------- */
.menu-primario, .acoes-cabecalho .btn-orcamento-cabecalho { display: none; }
.botao-menu-mobile { display: grid; }

/* ---------- 640px: tablets pequenos ---------- */
@media (min-width: 640px) {
  .pagina-404 .acoes-404 { flex-wrap: nowrap; }
}

/* ---------- 768px: início do desktop ---------- */
@media (min-width: 768px) {
  body { font-size: 17.5px; }
  h1 { font-size: 40px; }
  h2 { font-size: 27px; }
  .cabecalho .container { gap: 26px; }
}

/* ---------- 992px: desktop ---------- */
@media (min-width: 992px) {
  h1 { font-size: 44px; }
  h2 { font-size: 30px; }
  .botao-menu-mobile, .menu-mobile, .cortina-menu { display: none !important; }
  .menu-primario { display: block; }
  .acoes-cabecalho .btn-orcamento-cabecalho { display: inline-flex; }
  .faixa-confianca li { white-space: nowrap; justify-content: center; }
  .faixa-confianca svg { flex: none; }
}

/* ---------- 1200px+ ---------- */
@media (min-width: 1200px) {
  .cabecalho .container { gap: 34px; }
  .menu-primario > ul { gap: 10px; }
}

/* ---------- Ajustes específicos de telas pequenas ---------- */
@media (max-width: 639.98px) {
  body { font-size: 16px; }
  /* Logo menor no mobile */
  .logotipo img { width: 190px; }
  .cabecalho.is-sticky .logotipo img { width: 165px; }
  /* Hero das páginas internas com respiro no breadcrumb */
  .breadcrumbs { margin-bottom: 18px; }
  .page-hero .lede { margin-top: 12px; font-size: 15.5px; }
  h1 { font-size: 30px; }
  .card-depo { padding: 26px 22px; }
  .card-diferencial { padding: 26px 22px; }
  .painel-form { padding: 24px 20px; }
  .flutuantes { right: 14px; bottom: 14px; }
  .btn-whatsapp-flutuante { width: 54px; height: 54px; }
  .btn { padding: 14px 24px; }
  .chamada-whats { padding: 24px; }
}

/* ---------- Banner mobile x desktop (garantia extra) ---------- */
/* A troca desktop/mobile do banner é nativa do <picture> */

/* ---------- Impressão ---------- */
@media print {
  .cabecalho, .rodape, .flutuantes, .aviso-cookies, .chamada-contato { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- Notebook pequeno (992–1179): header compacto ---------- */
@media (min-width: 992px) and (max-width: 1179.98px) {
  .logotipo img { width: 205px; }
  .cabecalho.is-sticky .logotipo img { width: 180px; }
  .cabecalho .container { gap: 12px; }
  .menu-primario > ul { gap: 0; }
  .menu-primario a { padding: 30px 8px; font-size: 13px; }
  .menu-primario .submenu { min-width: 270px; }
  .acoes-cabecalho .btn-orcamento-cabecalho { padding: 0; width: 42px; height: 42px; font-size: 0; gap: 0; border-radius: 50%; }
  .acoes-cabecalho .btn-orcamento-cabecalho svg { width: 20px; height: 20px; }
  .faixa-confianca ul { grid-template-columns: repeat(2, 1fr); }
  .faixa-confianca li { white-space: normal; justify-content: flex-start; }
}