/* O site de vendas (095): o movimento reduzido e os ajustes por tamanho de tela. Vem por último:
   as regras daqui valem sobre as dos outros arquivos. */

/* ---------- Para quem pediu menos movimento: os desenhos ficam parados, completos (CA-010). ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .cena,
  .cena *,
  .cena *::before,
  .cena *::after,
  .vitrine figcaption a::before {
    animation: none !important;
  }

  .etiqueta,
  .principal,
  .menu a,
  .lista-de-perguntas summary::after {
    transition: none;
  }

  .etiqueta:hover,
  .principal:hover {
    transform: none;
  }
}

/* ---------- Tela baixa (notebook): o título, o botão e a garantia cabem na primeira tela. ---------- */

@media (min-width: 1081px) and (max-height: 820px) {
  .abertura {
    padding-top: 1.5rem;
  }

  .abertura h1 {
    font-size: 3rem;
  }

  .abertura .apoio {
    margin-top: 0.75rem;
    font-size: 1.0625rem;
  }

  .abertura .vistos {
    margin-top: 1rem;
  }

  .abertura .dizer > .principal {
    margin-top: 1.25rem;
  }
}

/* ---------- Tela média: o menu vira a caixa que abre, e as colunas viram uma. ---------- */

/* Com "IA" no menu (108), a barra só cabe inteira a partir de 1141 pontos: abaixo, o menu é a caixa. */
@media (max-width: 1140px) {
  .menu {
    display: none;
  }

  .menu-do-celular {
    display: block;
  }
}

@media (max-width: 1080px) {
  .abertura .miolo,
  .recurso .miolo,
  .teste .miolo {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Empilhado, o texto vem sempre antes do desenho. */
  .recursos > .recurso:nth-of-type(even) .cena {
    order: 0;
  }

  .cena {
    max-width: 36rem;
  }

  .teste .dizer {
    position: static;
  }

  .lista-de-planos {
    grid-template-columns: minmax(0, 1fr);
    max-width: 30rem;
  }

  .para-quem {
    min-height: 0;
  }

  .plano.sob-consulta,
  .plano.sem-planos {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* ---------- Telas estreitas. ---------- */

@media (max-width: 760px) {
  .topo {
    min-height: 3.75rem;
  }

  .topo .demonstracao {
    display: none;
  }

  /* No celular, o mapa é a captura do próprio celular, na largura toda: só o alto dela, com os preços. */
  .telas {
    padding: 0;
  }

  .no-computador {
    display: none;
  }

  .no-celular {
    position: static;
    width: 100%;
    aspect-ratio: 780 / 1040;
    object-fit: cover;
    object-position: top;
    border-width: 1.5px;
    border-radius: 1.25rem;
    box-shadow: 0 14px 30px rgb(27 27 24 / 18%);
  }

  .vitrine figcaption {
    padding-left: 0;
  }

  .dizer > .principal,
  .cabeca-da-pagina .principal,
  .recurso .principal,
  .fecho .principal,
  .caso .principal {
    width: 100%;
  }

  .vistos,
  .em-todos .vistos {
    grid-template-columns: minmax(0, 1fr);
  }

  .cadastro {
    padding: 1.25rem 1.125rem 1rem;
  }

  .rota li {
    padding-left: 4.5rem;
  }

  .lista-de-perguntas summary {
    font-size: 1.125rem;
  }

  .abas .etiqueta {
    flex: 1 1 100%;
    justify-content: center;
  }

}

/* ---------- Telas muito estreitas (320 pontos): a barra cabe sem rolar de lado. ---------- */

@media (max-width: 420px) {
  .topo {
    gap: 0.5rem;
  }

  .marca {
    font-size: 1.1875rem;
    letter-spacing: 0.01em;
  }

  .topo .etiqueta,
  .menu-do-celular summary {
    padding: 0 0.75rem;
    font-size: 0.9375rem;
  }

  .preco strong {
    font-size: 3rem;
  }

  .com-botao {
    grid-template-columns: minmax(0, 1fr);
  }
}