/* Revisão de 19/10/2026. Luiz, abrindo o site no computador: "tem arte cortada, ou muito pequeno as coisas".
   Carregado depois do estilo de cada página: só corrige o que estava cortado ou miúdo, não muda o desenho. */

/* nada passa da largura da tela (o raio decorativo da 404 criava barra de rolagem de lado) */
html, body { overflow-x: clip; }

/* 1. nenhuma arte cortada: o "antes" e o print do site aparecem inteiros, sem esfumado por cima */
.janela, .tela-cel, .janela-site { max-height: none !important; }
.janela::after, .tela-cel::after, .janela-site::after { display: none !important; }
@media (min-width: 861px) {
  /* inteiro ele fica alto: no computador, mais estreito e no centro da coluna */
  .duo .janela { width: 100%; max-width: 440px; justify-self: center; }
}

/* 2. home, "Três frentes": os stories mantêm a proporção do story (antes o cover cortava os lados na tela grande)
      lado a lado, sem um tapar o outro */
@media (min-width: 981px) {
  .degrau { gap: 3%; }
  .degrau img { width: 31% !important; height: auto !important; max-width: none !important; aspect-ratio: 640 / 1138; object-fit: cover; }
}

/* 3. folha da identidade na largura toda da página (em 820 px a letra da folha ficava miúda) */
img.quadro { max-width: 100% !important; }

/* 4. tela grande (1600 px ou mais): conteúdo mais largo e letra maior, para não ficar uma faixa estreita no meio */
@media (min-width: 1600px) {
  .wrap { max-width: 1400px !important; }
  body { font-size: 22px; }
  .lead { font-size: 25px !important; }
  .nota, .aviso, .rotTxt, .rotDemo { font-size: 19px !important; }
  .aviso { max-width: 900px; }
  .chapeu { font-size: 18px !important; }
  .lista { font-size: 22px; }
  .stories { max-width: 1120px; }
  .par { max-width: 960px; }
  footer { font-size: 19px; }
  /* home: as partes que cabem numa tela podem crescer junto */
  .fixa .frente { max-height: 700px !important; }
  .fixa .marcas { max-height: 760px !important; }
  .fone { width: min(380px, calc((var(--tela) - 2 * var(--pad) - 22px) * 9 / 16 + 22px)) !important; }
  .hero .sub { font-size: clamp(18px, min(1.9vw, 3.6vh), 28px) !important; }
  .frente h3 { font-size: clamp(26px, min(3vw, 5.6vh), 46px) !important; }
  .frente .resolve { font-size: clamp(19px, min(2vw, 3.8vh), 29px) !important; }
  .frente p { font-size: clamp(17px, min(1.5vw, 3.1vh), 22px) !important; }
  .passo p { font-size: clamp(16px, 3.1vh, 21px) !important; }
  .passo h3 { font-size: clamp(24px, 5vh, 36px) !important; }
  .tile .info { font-size: clamp(14px, 2.8vh, 19px) !important; }
  .tile .info b { font-size: 18px !important; }
  details p { font-size: 21px; }
  .lado figure { max-width: 320px; }
}

/* 5. Revisão de 20/10/2026 (checklist do Davi): no tablet o nome do ramo cortava nos quadros de "Nossos trabalhos".
      De 701 a 980 px (rola normal) os quadros ficam dois por linha; de 981 a 1180 px (parte inteira na tela)
      continuam quatro e três, e o nome pode quebrar em duas linhas. */
@media (min-width: 701px) and (max-width: 980px) {
  .marcas { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 180px !important; }
  .marcas .tile { grid-column: auto !important; }
  .marcas .tile:last-child { grid-column: span 2 !important; }
  .marcas .tile:last-child .logo img { max-width: 56%; }
}
@media (min-width: 981px) and (max-width: 1180px) {
  .tile .info b { white-space: normal; letter-spacing: .08em; }
}