/* ============================================================
   RESPONSIVE.CSS
   Entra DEPOIS do style.css e reorganiza o layout para tablet e
   celular. Atualizado para o menu sanduíche, contador, marquee de
   convênios, cards de depoimento e nova seção de contato.
   ============================================================ */

/* ---------- TABLET (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  .frame-10,
  .frame-31,
  .frame-23,
  .frame-26,
  .frame-15,
  .frame-27,
  .frame-18 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  .frame-28 {
    padding: 70px 40px !important;
    height: auto !important;
  }

  .frame-20 {
    height: auto !important;
    padding: 60px 40px !important;
  }

  .frame-27 {
    flex-direction: column !important;
  }
  .mapa-contato iframe {
    min-height: 320px;
  }
  .frame-22 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .frame-26 {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .frame-26 .botao-cta-secao {
    justify-self: center !important;
  }
}

/* ---------- MOBILE (≤ 768px) ---------- */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  /* Rede de segurança: nenhuma imagem deve estourar a largura da tela */
  .mac-book-air-1 img {
    max-width: 100%;
  }

  /* ---- Cabeçalho / menu sanduíche ---- */
  .cabecalho-espacador {
    height: 72px;
  }
  .frame-10 {
    flex-direction: row !important;
    justify-content: space-between !important;
    padding: 14px 20px !important;
  }
  .modo-de-isolamento {
    transform: scale(0.75);
    transform-origin: left center;
  }
  .menu-hamburguer {
    display: flex !important;
  }
  .frame-9 {
    position: fixed !important;
    top: 0;
    right: 0;
    height: 100vh;
    width: 260px;
    background: #987240;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    padding: 100px 30px !important;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    box-shadow: -6px 0px 24px rgba(0, 0, 0, 0.3);
  }
  .frame-9.aberto {
    transform: translateX(0);
  }
  .home,
  .tratamentos,
  .quem-sou-eu,
  .depoimentos,
  .atendimento,
  .contato {
    font-size: 16px !important;
  }

  /* ---- Hero ---- */
  .frame-20 {
    height: auto !important;
    min-height: 0 !important;
    padding: 40px 20px !important;
    gap: 40px !important;
    background: #0d1a32 !important;
    position: relative;
    overflow: hidden;
  }
  .frame-20::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(Assets/frame-200.png);
    background-size: cover;
    background-position: 68% 85%;
    background-repeat: no-repeat;
    opacity: 0.3;
    z-index: 0;
  }
  .frame-19,
  .group-5 {
    position: relative;
    z-index: 1;
  }
  .frame-19 {
    width: 100% !important;
  }
  .volte-a-enxergar-o-mundo-com-clareza-e-confian-a {
    font-size: 32px !important;
  }
  .cirurgia-de-catarata-com-tecnologia-avan-ada-e-cuidado-personalizado {
    font-size: 17px !important;
  }
  .vector-1 {
    width: 80px !important;
  }
  .group-3 {
    width: 100% !important;
    max-width: 320px !important;
  }
  .group-5 {
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto;
  }
  .rectangle-3 {
    width: 100% !important;
  }

  /* ---- "Por que confiar" (diferenciais) ---- */
  .frame-31 {
    padding: 60px 20px !important;
  }
  .por-que-confiar-sua-vis-o-ao-dr-pedro-xavier {
    font-size: 30px !important;
  }
  .subtitulo-diferenciais {
    font-size: 16px !important;
  }
  .frame-30 {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
  }
  .group-6,
  .group-7,
  .group-102,
  .group-9 {
    height: auto !important;
    padding: 20px !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .frame-29 {
    flex-direction: column !important;
    text-align: center !important;
  }
  .experi-ncia-comprovada,
  .experi-ncia-comprovada2 {
    text-align: center !important;
  }
  .mais-de-45-000-cirurgias-realizadas-trazendo-o-preparo-necess-rio-para-lidar-com-qualquer-complexidade {
    text-align: center !important;
  }

  /* ---- Tratamentos (cards de serviços) ---- */
  .frame-23 {
    padding: 60px 20px !important;
  }
  .nossos-principais-atendimentos {
    font-size: 30px !important;
  }
  .frame-22 {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
  .group-11,
  .group-12,
  .group-13,
  .group-14 {
    position: relative !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    height: auto !important;
    background: #ffffff;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.15);
  }
  .rectangle-6,
  .rectangle-62,
  .rectangle-63,
  .rectangle-64 {
    display: none !important;
  }
  .image-2,
  .image-6,
  .image-5,
  .image-4 {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 190px !important;
  }
  .cirurgia-de-catarata-substitui-o-do-cristalino-opaco-por-uma-lente-intraocular-moderna-devolvendo-a-nitidez-e-a-vivacidade-das-cores,
  .escolha-da-lente-intraocular-avalia-o-detalhada-para-definir-a-lente-ideal-para-o-seu-caso-monofocal-t-rica-multifocal-visando-reduzir-a-depend-ncia-de-culos,
  .tratamentos-para-glaucoma-diagn-stico-precoce-e-controle-da-press-o-ocular-para-preserva-o-da-sa-de-do-nervo-ptico,
  .exames-e-diagn-sticos-de-alta-precis-o-avalia-o-oftalmol-gica-completa-com-equipamentos-de-ltima-gera-o-para-seguran-a-cir-rgica {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 14px !important;
  }

  /* ---- Quem é o Dr. Pedro Xavier ---- */
  .frame-25 {
    flex-direction: column !important;
    padding: 60px 20px !important;
  }
  .frame-24 {
    width: 100% !important;
  }
  .quem-o-dr-pedro-xavier {
    font-size: 30px !important;
    width: 100% !important;
    height: auto !important;
  }
  .frame-242,
  .group-18 {
    width: 100% !important;
    max-width: 320px !important;
    height: 400px !important;
    margin: 0 auto !important;
    position: relative !important;
  }
  .image-7 {
    width: 68% !important;
    height: 78% !important;
    left: 14% !important;
    top: 0 !important;
  }
  .image-8 {
    width: 52% !important;
    height: 60% !important;
    left: 0 !important;
    top: 38% !important;
  }

  /* ---- Convênios ---- */
  .frame-26 {
    padding: 60px 20px !important;
  }
  .conv-nios-atendidos {
    text-align: center !important;
    font-size: 30px !important;
  }
  .frame-26 {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .frame-26 .botao-cta-secao {
    justify-self: center !important;
  }
  .unimed-1,
  .camada-1-1 {
    height: auto !important;
    max-height: 50px;
  }

  /* ---- Depoimentos ---- */
  .frame-15 {
    padding: 60px 20px !important;
  }
  .o-que-dizem-os-pacientes-do-dr-pedro {
    width: 100% !important;
    font-size: 28px !important;
  }

  /* ---- Como funciona a recuperação ---- */
  .frame-28 {
    padding: 60px 20px !important;
    height: auto !important;
  }
  .como-funciona-a-recupera-o-da-cirurgia-de-catarata {
    font-size: 26px !important;
  }
  .uso-correto-dos-col-rios-recomendados-os-col-rios-s-o-fundamentais-para-uma-recupera-o-segura-ajudando-a-prevenir-infec-es-controlar-a-inflama-o-e-garantir-a-cicatriza-o-adequada-dos-olhos-evitar-co-ar-ou-pressionar-os-olhos-nos-primeiros-dias-co-ar-ou-exercer-press-o-sobre-os-olhos-pode-comprometer-o-processo-de-recupera-o-e-aumentar-o-risco-de-irrita-es-ou-complica-es-p-s-operat-rias-repouso-f-sico-moderado-e-evitar-piscinas-temporariamente-atividades-f-sicas-intensas-e-o-contato-com-a-gua-de-piscinas-podem-aumentar-o-risco-de-infec-es-e-interferir-na-cicatriza-o-siga-as-orienta-es-m-dicas-sobre-o-per-odo-ideal-para-retomar-essas-atividades {
    font-size: 16px !important;
  }

  /* ---- Entre em contato ---- */
  .frame-27 {
    padding: 60px 20px !important;
    gap: 40px !important;
  }
  .group-21,
  .mapa-contato {
    min-width: 0 !important;
    width: 100% !important;
  }
  .entre-em-contato {
    font-size: 28px !important;
    text-align: center;
  }
  .lista-contato-item {
    font-size: 16px !important;
  }

  /* ---- Rodapé ---- */
  .frame-18 {
    flex-direction: column !important;
    gap: 24px !important;
    padding: 40px 20px !important;
    text-align: center !important;
  }
  .frame-16,
  .frame-17 {
    align-items: center !important;
  }
  .modo-de-isolamento2 {
    transform: scale(0.85);
  }
  .frame-18-rodape-legal {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* ---- Botão flutuante / cookies ---- */
  .whatsapp-flutuante {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
  .aviso-cookies {
    flex-direction: column;
    text-align: center;
    padding: 16px;
  }
}

/* ---------- MOBILE PEQUENO (≤ 480px) ---------- */
@media (max-width: 480px) {
  .volte-a-enxergar-o-mundo-com-clareza-e-confian-a {
    font-size: 26px !important;
  }
  .por-que-confiar-sua-vis-o-ao-dr-pedro-xavier,
  .nossos-principais-atendimentos,
  .quem-o-dr-pedro-xavier,
  .conv-nios-atendidos {
    font-size: 24px !important;
  }
  .o-que-dizem-os-pacientes-do-dr-pedro,
  .como-funciona-a-recupera-o-da-cirurgia-de-catarata,
  .entre-em-contato {
    font-size: 22px !important;
  }
}