/* ==========================================================================
   UpMobb — Responsivo
   Abordagem: o layout base e o de desktop; aqui ele e simplificado para
   telas menores. Ultimo arquivo carregado, para vencer por ordem de cascata.
   ========================================================================== */

/* --- Ate 1080px: rodape e metricas perdem colunas ----------------------- */

@media (max-width: 1080px) {

  .rodape-grade {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--e-10) var(--e-6);
  }

  .rodape-marca { grid-column: 1 / -1; }

  .metricas {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e-8) var(--e-6);
  }
}

/* --- Ate 900px: troca da navegacao desktop pelo menu mobile ------------- */

@media (max-width: 900px) {

  .nav-principal { display: none; }
  .acoes-cabecalho .btn-contorno { display: none; }
  .btn-menu { display: inline-flex; }

  /* Blocos de duas colunas viram uma so */
  .hero-interno,
  .vitrine,
  .contato-grade {
    grid-template-columns: 1fr;
  }

  /* No mobile a imagem sempre vem depois do texto, mesmo na versao invertida */
  .vitrine.invertida .vitrine-midia { order: 0; }

  .hero { text-align: left; }
  .hero-descricao { max-width: none; }

  .hero-visual { margin-top: var(--e-8); }
  .hero-cartao.pos-a { left: 0; bottom: -18px; }
  .hero-cartao.pos-b { right: 0; top: -16px; }

  .grade-3,
  .grade-4 { grid-template-columns: repeat(2, 1fr); }

  .planos { grid-template-columns: 1fr; }
  /* Sem colunas lado a lado, o plano em destaque vem primeiro */
  .plano-destaque { order: -1; }

  .cabecalho-secao { margin-bottom: var(--e-10); }
}

/* --- Ate 720px: tudo em coluna unica ------------------------------------ */

@media (max-width: 720px) {

  :root { --altura-cabecalho: 66px; }

  .grade-2,
  .grade-3,
  .grade-4 { grid-template-columns: 1fr; }

  .metricas {
    grid-template-columns: repeat(2, 1fr);
    padding: var(--e-8) var(--e-5);
    margin-top: calc(var(--secao-y) * -0.4);
  }

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

  .formulario-duplo { grid-template-columns: 1fr; }
  .formulario { padding: var(--e-6); }

  .card { padding: var(--e-6); }

  .hero-cartao {
    position: static;
    animation: none;
    margin-top: var(--e-4);
  }

  .passo { padding-left: var(--e-12); }
  .passo::before { width: 38px; height: 38px; }
  .passo:not(:last-child)::after { left: 19px; top: 46px; }

  .rodape-base { flex-direction: column; align-items: flex-start; }

  .abas-lista { width: 100%; justify-content: flex-start; }

  .whatsapp-flutuante { width: 50px; height: 50px; }
  .whatsapp-flutuante svg { width: 25px; height: 25px; }
}

/* --- Ate 520px: ajustes finos ------------------------------------------- */

@media (max-width: 520px) {

  .metricas { grid-template-columns: 1fr; gap: var(--e-6); }

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

  .hero-acoes { flex-direction: column; align-items: stretch; }
  .hero-acoes .btn { width: 100%; }

  .linha-tempo { padding-left: var(--e-6); }
  .marco::before { left: calc(var(--e-6) * -1 - 7px); }

  .acordeao-gatilho { padding: var(--e-4) var(--e-5); font-size: var(--t-sm); }
  .acordeao-conteudo { padding: 0 var(--e-5) var(--e-4); }
}

/* --- Impressao ---------------------------------------------------------- */

@media print {

  .cabecalho,
  .nav-mobile,
  .whatsapp-flutuante,
  .chamada,
  .hero-acoes { display: none !important; }

  .conteudo { padding-top: 0; }

  .hero,
  .hero-pagina,
  .secao-escura,
  .secao-marca {
    background: none !important;
    color: #000 !important;
  }

  .hero h1,
  .hero-pagina h1 { color: #000 !important; }

  .revelar { opacity: 1 !important; transform: none !important; }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555;
  }
}