/* v23.03 — grade, ritmo vertical, legibilidade e áreas de toque do site público.
   Camada final: só ajusta espaçamentos e tamanhos, não muda estrutura nem conteúdo. */

/* 1. Uma única borda de conteúdo para cabeçalho, capa, seções e rodapé.
   Antes, cabeçalho e capa usavam só o recuo lateral (72 px) e as seções usavam o recuo + contêiner
   centralizado: em telas largas o logo ficava a centenas de pixels do restante do conteúdo. */
:root {
  --container: 1600px;
  --edge: max(var(--gutter), calc((100% - var(--container)) / 2));
  --measure: 66ch;               /* largura de leitura confortável para parágrafos corridos */
}
.site-header { padding-inline: var(--edge); }
.hero { padding-inline: var(--edge); }

/* 2. Texto corrido não se estica além da medida de leitura. */
.section-heading p,
.about-copy p,
.about-text p,
.process-step p { max-width: var(--measure); }

/* 3. Ritmo vertical no celular: todas as seções com o mesmo respiro (antes 44/52 px ou 72/72 px). */
@media (max-width: 720px) {
  body#white-text-site main > section.section-wrap:not(#inicio) {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* 4. Tamanhos mínimos de texto (nada abaixo de 12 px em conteúdo de leitura). */
.project-type { font-size: .75rem; }
.portfolio-swipe-hint:not([hidden]) { font-size: .75rem; }
#ilustracoes .illustration-3d-card .project-type { font-size: 10px; letter-spacing: .1em; }
#ilustracoes .illustration-3d-card .illustration-index { font-size: 11px; }
#ilustracoes .illustration-3d-stage::after { font-size: 10px; }
@media (max-width: 640px) {
  #ilustracoes .illustration-3d-stage::after { font-size: 9px; }
}

/* 5. Áreas de toque de pelo menos 44 px em telas de toque. */
@media (pointer: coarse) {
  .main-nav a,
  .mobile-store-shortcut,
  .detail-list a,
  .site-footer a,
  .site-footer button,
  .admin-footer-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .contact-privacy a,
  .contact-form-fallback a,
  .privacy-consent-copy a {
    display: inline-block;
    padding-block: 12px;
    margin-block: -12px;
  }
}

/* 6. Capa em telas muito largas: o texto agora alinha com o restante do conteúdo (mais à direita),
   então o título reduz um pouco para continuar fora do rosto na foto. */
@media (min-width: 1700px) {
  .hero h1 { font-size: calc(5.2rem * var(--hero-title-scale, 1)); }
}