/* =========================================================
   BASE · YESHUA
   Containers seguindo o pedido: 1440 em desktop, 1140 em
   laptop, e daí pra baixo os breakpoints do Material Design 3
   (compact <600 · medium 600 · expanded 840 · large 1200 · xl 1600).
   ========================================================= */

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

/* sem scroll-behavior:smooth: quem faz a suavização é o Lenis, e os
   dois juntos disputam o mesmo gesto. Sem JS, o salto seco continua
   correto. */
html{ -webkit-text-size-adjust:100%; overflow-x:clip }

body{
  background:var(--bg);
  color:var(--texto);
  font-family:var(--serif);
  font-size:var(--t-corpo);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

/* grão por cima de tudo: tira o plástico do fundo chapado e ecoa o
   papel da capa. pointer-events none pra não capturar clique. */
body::after{
  content:''; position:fixed; inset:0; z-index:100; pointer-events:none;
  background-image:url('../assets/grao.webp');
  background-size:220px;
  opacity:.045; mix-blend-mode:overlay;
}

img{ max-width:100%; display:block }
a{ color:inherit }

::selection{ background:var(--gold-700); color:var(--texto-forte) }

/* Foco visível. O audit pegou outline:none e box-shadow:none em tudo,
   o que apagava a navegação por teclado inteira. :focus-visible só
   aparece pra quem navega por tecla, não no clique de mouse. */
:where(a, button, summary, [tabindex]):focus-visible{
  outline:2px solid var(--acento);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* O menu é fixo, então a âncora precisa parar abaixo dele em vez de
   deixar o topo da seção escondido atrás da pílula. */
:where([id]){ scroll-margin-top:calc(var(--nav-topo) + var(--nav-h) + 24px) }

/* ---------------- container ---------------- */
.container{
  width:100%;
  margin-inline:auto;
  padding-inline:16px;                 /* MD compact */
}
@media (min-width:600px){  .container{ padding-inline:24px } }
@media (min-width:840px){  .container{ padding-inline:32px } }
@media (min-width:1200px){ .container{ max-width:calc(1140px + 64px) } }  /* laptop: 1140 de conteúdo */
@media (min-width:1600px){ .container{ max-width:calc(1440px + 80px); padding-inline:40px } }

/* coluna estreita: texto corrido não deve passar de ~72 caracteres */
.leitura{ max-width:var(--cont-leitura); margin-inline:auto }

/* ---------------- seções ---------------- */
.secao{ padding-block:clamp(72px, 9vw, 144px); position:relative }
/* alternância desligada de propósito: a página é uma superfície
   contínua por enquanto. Quando uma quebra tiver função, ela volta. */
.secao--alt{ background:transparent }

/* ---------------- tipografia ---------------- */
.eyebrow{
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  letter-spacing:normal;      /* sem kerning forçado */
  text-transform:none;        /* caixa natural, do jeito que foi escrito */
  color:var(--acento);
}
h1, h2, h3{ font-family:var(--serif); font-weight:400; color:var(--texto-forte) }
h1{ font-size:var(--t-h1); line-height:var(--lh-titulo); letter-spacing:var(--ls-titulo);
    text-wrap:balance }   /* distribui as linhas sozinho, sem <br> e sem órfã */
h2{ font-size:var(--t-h2); line-height:1.06; letter-spacing:var(--ls-titulo) }
h3{ font-size:var(--t-h3); line-height:1.28; letter-spacing:-.02em }
.h-realce{ color:var(--acento); font-style:italic }

/* rótulo técnico: o recurso que o thewatch usa pra dar ar de ficha
   de produto sem ocupar espaço */
.rotulo{
  font-family:var(--sans); font-size:var(--t-rotulo); font-weight:500;
  /* Caixa natural em toda a página: em caixa alta com kerning aberto,
     nome próprio e palavra corrida leem como código de arquivo.
     ink-500 e não ink-600 porque o 600 dava razão 3.32, abaixo dos 4.5
     que a WCAG AA exige pra texto pequeno. */
  letter-spacing:normal; text-transform:none; color:var(--ink-500);
}

p{ color:var(--texto-suave) }
p strong, .forte{ color:var(--texto-forte); font-weight:400 }
.lead{ font-size:var(--t-lead); color:var(--ink-200); line-height:1.5 }
.suave{ color:var(--ink-500) }
.centro{ text-align:center }

/* ---------------- botões ---------------- */
.btn{
  font-family:var(--sans);
  font-size:15px; font-weight:600; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:10px;
  padding:17px 32px; border-radius:var(--r-full);
  border:1px solid transparent; cursor:pointer;
  text-decoration:none; transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:scale(.98) }
.btn--primario{
  color:var(--ink-950);
  background:linear-gradient(180deg, var(--gold-300) 0%, var(--gold-500) 100%);
  /* três camadas fazem o material: luz na aresta de cima, sombra
     interna embaixo pra dar espessura, e um apoio externo curto. Sem
     elas o dourado lê como retângulo chapado. */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .42),
    inset 0 -2px 4px rgb(0 0 0 / .14),
    0 2px 4px rgb(0 0 0 / .28);
}
.btn--primario:hover{
  background:linear-gradient(180deg, var(--gold-200) 0%, var(--gold-400) 100%);
}
.btn--primario:active{ transform:scale(.98) }
.btn--fantasma{ border-color:var(--line-forte); color:var(--texto) }
.btn--fantasma:hover{ border-color:var(--acento); color:var(--acento) }
.btn--grande{ padding:21px 44px; font-size:16px }
@media (max-width:600px){
  /* medido: o rótulo mais longo dá 281px e sobram 343 no container.
     Com 44px de cada lado ele quebrava em duas linhas. */
  .btn--grande{ padding:19px 24px; font-size:15px }
  .btn{ text-align:center }
}

.micro{
  font-family:var(--sans); font-size:13px; color:var(--ink-500);
  display:flex; align-items:center; gap:8px;
}

/* ---------------- entrada por scroll ----------------
   Uma classe só, aplicada por IntersectionObserver. Sem
   biblioteca de animação: é transform + opacity. */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1) }
.reveal.visivel{ opacity:1; transform:none }
.reveal[data-atraso="1"]{ transition-delay:.08s }
.reveal[data-atraso="2"]{ transition-delay:.16s }
.reveal[data-atraso="3"]{ transition-delay:.24s }
.reveal[data-atraso="4"]{ transition-delay:.32s }

/* ---------------- soft-blur-in ----------------
   Do catálogo animate-text: entrada por palavra com desfoque que
   assenta. 900ms, degrau de 25ms, a curva de saída da spec.
   armada = já quebrada em palavras e escondida;
   pronta  = entrou na tela e pode assentar. */
[data-anima="soft-blur"].anima-armada .palavra{
  display:inline-block;
  opacity:0; translate:0 16px; filter:blur(12px);
  will-change:opacity, translate, filter;
}
[data-anima="soft-blur"].anima-pronta .palavra{
  opacity:1; translate:none; filter:blur(0);
  transition:
    opacity   .9s cubic-bezier(.22, 1, .36, 1),
    translate .9s cubic-bezier(.22, 1, .36, 1),
    filter    .9s cubic-bezier(.22, 1, .36, 1);
  transition-delay:calc(var(--i, 0) * 25ms);
  will-change:auto;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none; transition:none }
  /* sem quebra em palavras: o texto já nasce no lugar */
  [data-anima="soft-blur"] .palavra{ opacity:1; translate:none; filter:none; transition:none }
}