/* ==========================================================================
   responsive.css — TODAS as media queries do projeto ficam neste arquivo
   Estratégia: desktop-first, com 4 pontos de quebra consolidados.

     1200px  notebooks menores
     1000px  tablet paisagem / troca para menu mobile
      760px  tablet retrato
      560px  smartphones

   Alvos verificados: 375 · 430 · 768 · 1024 · 1366 · 1440 · 1920
   ========================================================================== */

/* --------------------------------------------------------------------------
   1200px — notebooks
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1440px — o cabeçalho começa a apertar

   Os links são `nowrap` (quebrar em duas linhas desalinhava a barra inteira),
   então o espaço tem de sair dos intervalos, não do texto.
   -------------------------------------------------------------------------- */

@media (max-width: 1460px) {
  .nav-desktop {
    gap: 18px;
  }

  .site-header__inner {
    gap: 18px;
  }
}

@media (max-width: 1200px) {
  .nav-desktop {
    gap: 14px;
    font-size: 13px;
  }

  .site-header__inner {
    gap: 16px;
  }

  .site-header__cta {
    padding: 12px 14px;
    font-size: 13px;
  }

  .brand-logo img {
    width: 128px;
  }

  .hero__grid,
  .white-label__grid,
  .how__grid,
  .tele-grid {
    gap: 40px;
  }

  .metric-card {
    padding: 26px 22px;
  }
}

/* --------------------------------------------------------------------------
   1120px — o CTA sai do cabeçalho

   Logo + 7 links + botão não cabem mais na mesma linha, e os links são
   `nowrap` de propósito (quebrar em duas linhas desalinhava a barra inteira).
   Some o botão, não a navegação: "Falar com um consultor" já aparece no hero,
   uma dobra abaixo, e volta ao menu mobile a partir de 1000px.
   -------------------------------------------------------------------------- */

@media (max-width: 1120px) {
  .site-header__cta {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   980px — o menu desktop dá lugar ao menu mobile
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .nav-desktop,
  .site-header__cta {
    display: none;
  }

  .nav-toggle {
    display: grid;
  }

  .hero {
    padding: 64px 0 56px;
  }

  .hero__grid,
  .white-label__grid,
  .how__grid,
  .tele-grid,
  .products,
  .support {
    grid-template-columns: 1fr;
  }

  /* No mobile o vídeo vem sempre depois do texto */
  .white-label__media,
  .how__media {
    order: 2;
  }

  .mockup {
    transform: none;
  }

  .plans-grid,
  .steps,
  .tele-highlights,
  .tele-models {
    grid-template-columns: 1fr 1fr;
  }

  /* A elevação do card em destaque só faz sentido lado a lado com os
     outros dois na mesma linha — em 2 ou 1 coluna ele deixa de "flutuar"
     e passa a empilhar como os demais. */
  .plan--featured {
    margin-block: 0;
  }

  .metric-card__value {
    font-size: clamp(52px, 10vw, 78px);
  }

  .resource-panel,
  .resource-panel:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .resource-panel:nth-child(even) .resource-panel__copy {
    order: 0;
  }

  .resource-panel.resource-panel--flip,
  .resource-panel.resource-panel--noflip {
    grid-template-columns: 1fr;
  }

  .resource-panel.resource-panel--flip .resource-panel__copy,
  .resource-panel.resource-panel--noflip .resource-panel__copy {
    order: 0;
  }

  .support {
    padding: 40px 30px;
  }
}

/* --------------------------------------------------------------------------
   760px — tablets em retrato
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .metrics {
    grid-template-columns: 1fr;
  }

  .metric-card {
    min-height: 0;
    padding: 24px 26px;
  }

  .metric-card__value {
    font-size: 64px;
    letter-spacing: -3px;
  }

  .metric-card__unit {
    font-size: 25px;
  }

  .steps,
  .tele-models,
  .tele-highlights {
    grid-template-columns: 1fr;
  }

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

  .cta__box {
    padding: 40px 26px;
  }

  .product {
    padding: 30px;
    min-height: 0;
  }

  .product h3 {
    font-size: 28px;
  }
}

/* --------------------------------------------------------------------------
   560px — smartphones (375px e 430px incluídos)
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  h1 {
    letter-spacing: -2px;
  }

  .hero__lead {
    font-size: 17px;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .brand-logo img {
    width: 122px;
  }

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

  .resource-panel {
    padding: 18px;
  }

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

  .donut-grid,
  .map-grid {
    grid-template-columns: 1fr;
  }

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

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

  .marquee__track {
    gap: 26px;
  }

  .partner-card {
    width: 132px;
    height: 66px;
    padding: 10px 12px;
  }

  .partner-card img {
    height: 32px;
  }

  .video-phone {
    width: min(260px, 100%);
    border-radius: 34px;
    padding: 10px;
  }

  .video-phone video,
  .video-phone .video-missing {
    border-radius: 26px;
  }

  .section-head {
    margin-bottom: 30px;
  }

  .support,
  .cta__box {
    padding: 30px 22px;
  }

  .tele-demo,
  .tele-screen {
    padding: 12px;
  }
}

/* --------------------------------------------------------------------------
   Telas muito estreitas (≤ 360px) — evita qualquer estouro horizontal
   -------------------------------------------------------------------------- */

@media (max-width: 360px) {
  .metric-card__value {
    font-size: 54px;
  }

  .chat__msg {
    max-width: 94%;
  }
}

/* --------------------------------------------------------------------------
   Telas largas (≥ 1600px) — o conteúdo respira sem esticar demais
   -------------------------------------------------------------------------- */

@media (min-width: 1600px) {
  :root {
    --container-width: 1280px;
  }

  .hero {
    padding: 110px 0 90px;
  }
}

/* ==========================================================================
   ADAPTAÇÃO POR CONTEXTO — não por largura

   Largura de tela não diz método de entrada nem formato do aparelho.
   As regras abaixo respondem ao que importa de fato: se o ponteiro é grosso,
   se a tela tem recorte (notch) e se a altura é curta.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Áreas seguras — aparelhos com notch e barra de gestos

   Com viewport-fit=cover a página passa a ocupar a tela toda, inclusive
   debaixo do recorte e do indicador de home. Sem env(), o logo some atrás do
   notch em paisagem e o botão do rodapé fica sob a barra de gestos.
   -------------------------------------------------------------------------- */

.site-header__inner,
.nav-mobile {
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}

.nav-mobile {
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}

.site-footer {
  padding-bottom: max(55px, calc(40px + env(safe-area-inset-bottom)));
}

/* --------------------------------------------------------------------------
   Ponteiro grosso (dedo, caneta)

   Vale em qualquer largura: notebook com tela sensível ao toque também cai
   aqui. Alvos crescem e o espaço entre eles aumenta — dedo não tem a precisão
   do cursor.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  .btn {
    padding: 15px 22px;
    min-height: 48px;
  }

  .nav-mobile a {
    padding: 18px 4px;
    min-height: 56px;
  }

  .nav-toggle {
    width: 48px;
    height: 48px;
  }

  .brand-logo {
    min-height: 48px;
  }

  .faq summary {
    min-height: 60px;
  }

  .resource-tabs__tab {
    min-height: 44px;
  }

  .resource-tabs-repeat__item {
    padding: 10px 2px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Sem ponteiro fino não existe hover: a faixa de marcas nunca pausaria e
     ficaria fora de alcance. Aqui ela vira uma lista que se arrasta. */
  .marquee {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .marquee::-webkit-scrollbar {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Altura curta — celular em paisagem

   Em 390px de altura o menu aberto não cabe: os 8 itens exigiriam rolagem
   dentro do painel, e o último ficava fora da tela. Aqui ele compacta.
   -------------------------------------------------------------------------- */

@media (max-height: 480px) and (max-width: 1000px) {
  .nav-mobile {
    padding-top: 12px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    gap: 0;
  }

  .nav-mobile a {
    padding: 10px 4px;
    min-height: 0;
    font-size: 16px;
  }

  .nav-mobile .btn {
    margin-top: 12px;
    min-height: 44px;
  }

  .hero {
    padding: 40px 0 36px;
  }
}

/* --------------------------------------------------------------------------
   Impressão

   Uma proposta comercial impressa ou salva em PDF é um uso real deste site.
   Fora navegação, faixas e molduras; dentro os destinos dos links.
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .nav-mobile,
  .partner-strip,
  .skip-link,
  .video-phone,
  .video-frame,
  .mockup {
    display: none;
  }

  body {
    color: #000;
    background: #fff;
  }

  .section,
  .telemedicine,
  .cta {
    padding: 14px 0;
  }

  /* Evitar quebra vale para blocos pequenos. Aplicar em seções inteiras
     empurra cada uma para uma página nova e infla o documento. */
  .plan,
  .step,
  .tele-model,
  .product,
  details {
    break-inside: avoid;
  }

  .hero__grid,
  .white-label__grid,
  .how__grid,
  .tele-grid,
  .products,
  .plans-grid,
  .steps,
  .resource-panel {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dash-card,
  .tele-demo {
    display: none; /* dashboards são ilustrativos: não valem tinta */
  }

  .product,
  .cta__box,
  .support {
    background: none;
    color: #000;
    border: 1px solid #999;
  }

  .product p,
  .cta__box p,
  .support p {
    color: #000;
  }

  /* Link impresso sem destino é link perdido. */
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 11px;
    word-break: break-all;
  }

  details > p {
    display: block; /* respostas do FAQ saem abertas no papel */
  }
}