/* =========================================================
   Responsividade — mobile-first overrides
   Breakpoints: 1280, 1024, 768, 600, 480
   ========================================================= */

@media (max-width: 1280px){
  :root{ --max-width: 1080px; }
}

@media (max-width: 1024px){
  /* Tablet: continua dividido em 2 "colunas" (foto de fundo em tela cheia +
     texto sobreposto à esquerda), só com o bloco de texto mais estreito para
     continuar dentro da faixa esmaecida da foto — o H1 (clamp) e os botões
     (flex-wrap) se auto-ajustam a essa largura menor, quebrando linha quando
     preciso em vez de estourar sobre a parte nítida da imagem. */
  .hero{ min-height: 520px; }
  .hero-copy-inner{ max-width: 440px; }
  .signs-grid{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .split-media{ order: -1; }
  .services-grid{ grid-template-columns: repeat(3, 1fr); }
  .feature-block, .feature-block.reverse{ grid-template-columns: 1fr; }
  .feature-block .feature-media, .feature-block.reverse .feature-media{ order: -1; }
  .steps{ grid-template-columns: repeat(2, 1fr); row-gap: var(--space-4); }
  /* A linha de pulso foi desenhada para 4 colunas alinhadas; em 2 ou 1
     coluna ela não bate mais com os badges, então fica só no desktop. */
  .steps-pulse-line{ display: none; }
  .diff-grid{ grid-template-columns: repeat(2, 1fr); }
  .exam-grid{ grid-template-columns: 1fr; }
  .about-grid{ grid-template-columns: 1fr; }
  .about-media{ max-width: 360px; margin: 0 auto; }
  .area-box{ grid-template-columns: 1fr; }
  .testimonial-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-inner{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px){
  .main-nav{ display: none; }
  .header-actions .btn-header{ display: none; }
  .nav-toggle{ display: flex; }
  .mobile-cta-bar{
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--white);
    border-top: 1px solid var(--line);
  }
  body{ padding-bottom: 70px; }

  .main-nav.is-open{
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    padding: var(--space-2) 0;
  }
  .main-nav.is-open ul{ flex-direction: column; gap: 0; padding: 0 var(--space-3); }
  .main-nav.is-open li{ border-bottom: 1px solid var(--line); }
  .main-nav.is-open a{ display: block; padding: 14px 0; }

  .nav-toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-active span:nth-child(2){ opacity: 0; }
  .nav-toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .section{ padding: var(--space-5) 0; }
  .hero-decor-heart, .hero-decor-ecg{ display: none; }

  .trust-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .trust-item + .trust-item::before{ display: none; }
  .trust-item:nth-child(2)::before{ display: none; }

  .signs-list{ grid-template-columns: 1fr; }

  .services-head{ flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .services-grid{ grid-template-columns: repeat(2, 1fr); }

  .steps{ grid-template-columns: 1fr; }
  .diff-grid{ grid-template-columns: 1fr; }

  .about-quote{ font-size: 1.1rem; }
  .about-credentials li{ flex-direction: column; gap: 2px; }

  .testimonial-grid{ grid-template-columns: 1fr; }

  .cta-final{ padding: var(--space-4) var(--space-2); }
  .cta-final .hero-ctas{ flex-direction: column; }

  .form-row{ grid-template-columns: 1fr; }

  .footer-inner{ grid-template-columns: 1fr; gap: var(--space-3); text-align: left; }
  .footer-bottom-inner{ flex-direction: column; text-align: center; }

  .wa-float{ right: 14px; bottom: 84px; width: 54px; height: 54px; }
}

@media (max-width: 600px){
  /* Só abaixo de 600px (celular) a foto do Hero deixa de ser plano de fundo
     com o texto sobreposto e vira um bloco normal empilhado acima do texto —
     em telas tão estreitas não sobra faixa esmaecida suficiente para manter
     o texto legível por cima da foto sem prejudicar a leitura. Tablets
     (768–1024px) continuam com as duas "colunas" (ver breakpoint 1024px). */
  .hero{ display: block; min-height: 0; }
  .hero-visual{ position: relative; inset: auto; height: 320px; }
  .hero-photo{ object-position: 78% center; }
  .hero-scrim{ display: none; }
  .hero-layout{ position: relative; }
  .hero-copy{ padding: var(--space-4) var(--space-3) var(--space-3); }
  .hero-copy-inner{ max-width: none; }
  .hero-check-decor{ display: none; }
  .hero-ctas{ flex-direction: column; align-items: stretch; }
  .hero-ctas .btn{ width: 100%; }

  /* Botões "soltos" no fluxo do conteúdo (fora de grupos como .hero-ctas, que já
     viram 100% em telas menores) também passam a ocupar a largura total e a
     quebrar linha se o rótulo for longo, evitando estourar a viewport. */
  .section .btn, .cta-final .btn{
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  /* Campos de formulário a 16px evitam o zoom automático do Safari/iOS ao focar. */
  .form-group input, .form-group select, .form-group textarea{
    font-size: 16px;
  }
}

@media (max-width: 480px){
  h1{ font-size: 2rem; }
  h2{ font-size: 1.5rem; }
  .hero-sub{ font-size: 1rem; }
  .hero-visual{ height: 240px; }
  .area-box{ padding: var(--space-3); }
  .contact-form{ padding: var(--space-3); }
  .services-grid{ grid-template-columns: 1fr; }
}