/* ==========================================================================
   GutEase — Base
   Reset, fontes, tipografia, layout primitivo, acessibilidade.
   Depende de tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTES
   Self-hosted. Nomes sem número de versão para não quebrar se você
   rebaixar as fontes depois.
   Inter ainda não está na pasta — até chegar, o fallback assume.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/playfair-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/playfair-600.woff2') format('woff2');
}

/* Peso 800, baixado do Google Fonts com autorizacao do cliente e servido do
   proprio dominio, como D13 exige (D152). Existe porque os mockups usam um
   titulo bem mais gordo do que o 600 entrega: aumentar o corpo de um 600 nao
   vira um 800, so fica um 600 grande — foi o que eu errei duas rodadas
   seguidas antes de medir a espessura do traco. Revoga o "Nunca 700+" de
   design.md 3.2. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/playfair-800.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Trava de estouro horizontal — no HTML e com `clip`, nao no body e com
     `hidden` (D153).

     Pela especificacao, fixar UM eixo em `hidden` forca o outro para `auto`:
     `body { overflow-x: hidden }` virava `overflow: hidden auto` e
     transformava o body num container de rolagem proprio. No celular isso
     mata a inercia do dedo, confunde o `position: sticky` do header e, em
     navegador embutido de app — que e onde este site vive (D123) —, a pagina
     fica dificil de rolar. Era a queixa do cliente.

     `clip` nao cria container de rolagem, entao o eixo vertical continua
     `visible` e quem rola e o documento, como deve ser. Em navegador que nao
     conhece `clip` a declaracao e ignorada e sobra `visible`, que e
     exatamente o estado atual: ja esta verificado que nao ha estouro
     horizontal de 320 a 1280px. Degrada para o certo. */
  overflow-x: clip;
  /* compensa o header fixo ao pular para uma âncora */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  margin: 0;
  background: var(--cream-50);
  color: var(--text-hi);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, picture, svg, video {
  display: block;
  max-width: 100%;
}
img { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { background: none; border: none; padding: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   Playfair Display: H1–H3, preço, números grandes.
   Inter: H4 e abaixo, corpo, botão, label, chip, tabela, formulário.
   -------------------------------------------------------------------------- */

.t-display, h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  max-width: var(--measure-h1);
  text-wrap: balance;
}

.t-h2, h2 {
  font-family: var(--font-display);
  font-weight: 800;   /* D152 */
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  max-width: var(--measure-h2);
  text-wrap: balance;
}

.t-h3, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  text-wrap: balance;
}

.t-h4, h4 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--tr-h4);
}

p { text-wrap: pretty; }

.t-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-mid);
  max-width: var(--measure);
}

.t-small   { font-size: var(--fs-small);   line-height: var(--lh-small); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-low); }

.t-label {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-low);
}

/* Preço. Tabular é obrigatório: seis valores trocam no mesmo lugar e o
   número não pode mudar de largura. */
.t-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-price);
  line-height: var(--lh-price);
  letter-spacing: var(--tr-price);
  font-variant-numeric: tabular-nums;
  color: var(--text-hi);
}

.num { font-variant-numeric: tabular-nums; }

/* Corpo de texto travado na medida de leitura, mesmo em coluna larga */
.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   4. MARCADOR DE DESTAQUE
   Único linear-gradient permitido no projeto, e é um degrau sólido.
   -------------------------------------------------------------------------- */

.mark {
  background-image: linear-gradient(to bottom,
                    transparent 58%, var(--olive-100) 58%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-inline: 0.08em;
}

.on-dark .mark {
  background-image: linear-gradient(to bottom,
                    transparent 58%, var(--forest-800) 58%);
}

/* --------------------------------------------------------------------------
   5. LINKS
   -------------------------------------------------------------------------- */

a { color: var(--olive-700); }

.prose a,
a.link {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--dur-fast) ease-out;
}
.prose a:hover,
a.link:hover { text-decoration-thickness: 2px; }

.on-dark a { color: var(--accent-inv); }

/* --------------------------------------------------------------------------
   6. LAYOUT
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 720px; }

.section { padding-block: var(--section-y); }

/* Cartão de seção: retângulo arredondado flutuando sobre o creme.
   Seções com fundo --cream-50 fluem direto sobre a base, sem cartão. */
.section--card {
  margin-inline: var(--card-inset);
  border-radius: var(--r-xl);
}
/* Dentro de um cartao o gutter do container encolhe, porque o cartao JA
   afastou o conteudo da borda da tela. Somados davam 16 + 20 = 36px de recuo
   de cada lado numa tela de 393 — 18% da largura so em margem —, e foi isso
   que empurrou a terceira descricao dos pilares para uma linha a mais quando
   a secao virou cartao. design.md 6 fixa os dois valores mas nunca disse que
   eles se somam. (D160b) */
.section--card > .container { padding-inline: var(--sp-3); }

/* Abaixo de 360px o cartao vira FAIXA: perde margem e raio, mantem a cor.
   O que o cartao existe para fazer e alternar o tom (design.md 1.1) — o recuo
   e o arredondamento sao o acabamento, nao a funcao. Medido a 320px, o recuo
   custava +122px de altura na secao dos pilares, porque as descricoes
   refluiam na coluna mais estreita; a 393px o mesmo cartao custa ZERO. Numa
   tela dessas a largura vale mais que o canto redondo. (D160c) */
@media (max-width: 359px) {
  .section--card { margin-inline: 0; border-radius: 0; }
  .section--card > .container { padding-inline: var(--gutter); }
}

.bg-cream  { background: var(--cream-50); }
.bg-paper  { background: var(--paper); }
.bg-cream2 { background: var(--cream-100); }

/* Bloco escuro. No máximo três na página, nunca dois seguidos. */
.bg-forest,
.on-dark {
  background: var(--forest-900);
  color: var(--text-hi-inv);
}
.on-dark .t-caption,
.on-dark .t-label  { color: var(--text-mid-inv); }
.on-dark .t-lead   { color: var(--text-mid-inv); }
.on-dark .t-price  { color: var(--text-hi-inv); }

/* --------------------------------------------------------------------------
   7. ACESSIBILIDADE
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: var(--z-skiplink);
  transform: translateY(-200%);
  background: var(--forest-900);
  color: var(--on-forest);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--dur-fast) ease-out;
}
.skip-link:focus { transform: translateY(0); }

/* Foco visível em tudo. Nunca outline:none sem substituto. */
:focus-visible {
  outline: 2px solid var(--olive-700);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible { outline-color: var(--lime-300); }

/* Só para leitor de tela */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Alvo de toque mínimo */
.tap { min-width: 44px; min-height: 44px; }

/* --------------------------------------------------------------------------
   8. REVELAÇÃO DE SEÇÃO
   Ativada por IntersectionObserver, uma única vez.
   -------------------------------------------------------------------------- */

/* Seguro contra JS que nao chega (D129): quem esconde e a classe
   `reveal-armado`, posta pelo HTML antes da pintura e retirada por um
   cronometro se o reveal.js nao inicializar. Sem JS, a pagina aparece
   inteira em vez de ficar com 34 blocos invisiveis para sempre. */
.reveal {
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal-armado .reveal { opacity: 0; transform: translateY(12px); }
.reveal-armado .reveal.is-in { opacity: 1; transform: none; }

/* Stagger entre irmãos, no máximo 6. Passo de 40ms, não 60ms (D134): o
   escalonamento existe para o olho perceber ordem, e 40ms já entrega isso.
   A 60ms o quinto irmão só COMEÇAVA a aparecer 240ms depois de entrar na
   tela, e terminava em 720ms — tarde demais para quem rola em velocidade de
   reel. Agora o pior caso é 160 + 340 = 500ms. */
.reveal:nth-child(2) { transition-delay:  40ms; }
.reveal:nth-child(3) { transition-delay:  80ms; }
.reveal:nth-child(4) { transition-delay: 120ms; }
.reveal:nth-child(5) { transition-delay: 160ms; }
.reveal:nth-child(6) { transition-delay: 200ms; }

/* --------------------------------------------------------------------------
   9. MOVIMENTO REDUZIDO
   Desliga tudo, inclusive o marquee.
   -------------------------------------------------------------------------- */

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

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* entradas usam só opacity, sem deslocamento */
  .reveal { transform: none; }
}