/*
Theme Name: Brindara Garrafas
Theme URI: https://brindara.com.br
Author: IMMER IA
Description: Landing de garrafas e squeezes personalizados da Brindara. Tema de página única, HTML/CSS artesanal, sem framework e sem build. Convertido do index.html original preservando o CSS e o JS na íntegra.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietário — uso exclusivo Brindara
Text Domain: brindara-garrafas
*/

/* ==========================================================================
   Tudo abaixo veio do <style> do index.html original, sem uma vírgula alterada.
   Se precisar mexer no visual, mexa aqui — é o mesmo CSS de sempre.
   ========================================================================== */


/* ===== Tokens ===== */
:root{
  --navy-900:#0D1A38; --navy-800:#14264E; --navy-600:#1E3A6E;
  /* Tom ÚNICO da sequência quiz→ocasiões→qualidade (ref. cliente): é o navy-900 com o glow
     dourado .14 já composto (#0D1A38 + rgba(227,200,136,.14) ≈ #2A3041). Chapado, sem glow —
     o radial por seção rendia cores diferentes conforme a altura da caixa (emenda visível). */
  --navy-850:#2A3041;
  --ink-soft:#3A4663; --gold-500:#C9A24B;--gold-ink:#7F662F; --gold-300:#E3C888;
  --cream:#F7F3EC; --cream-600:#EDE6D8;
  /* Scrim do hero — leitura DOMINANTE horizontal (pedido do cliente): navy forte na coluna
     do texto (esquerda), morrendo ~71% da largura com stops em curva smoothstep (sem borda
     de Mach vertical). Resíduo vertical mínimo só p/ o nav (faixa ~136px, alpha baixa).
     Sem scrim na base: a .hero__usp (vidro + brightness .74) garante o próprio contraste. */
  --scrim-hero:
    linear-gradient(180deg, rgba(13,26,56,.40) 0, rgba(13,26,56,.22) 64px, rgba(13,26,56,.07) 104px, rgba(13,26,56,0) 136px),
    linear-gradient(90deg,
      rgba(13,26,56,.86) 0%,
      rgba(13,26,56,.82) 24%,
      rgba(13,26,56,.72) 34%,
      rgba(13,26,56,.50) 44%,
      rgba(13,26,56,.27) 53%,
      rgba(13,26,56,.11) 60%,
      rgba(13,26,56,.03) 66%,
      rgba(13,26,56,0) 71%);
  --glow-gold:radial-gradient(ellipse at 12% 8%, rgba(227,200,136,.14), transparent 55%);
  --shadow-product:0 32px 64px -32px rgba(13,26,56,.45);
  --hairline-cor:rgba(201,162,75,.45);
  --hairline:1px solid var(--hairline-cor);
  --font-brand:'Cinzel', serif;
  --font-head:'Cormorant Garamond', serif;
  --font-body:'Alegreya Sans','AS fallback', sans-serif;
  --fs-display:clamp(2.75rem, 1.2rem + 5.2vw, 4.75rem);
  --fs-h2:clamp(2rem, 1.1rem + 3vw, 3.25rem);
  --fs-h3:clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  --fs-lead:1.25rem; --fs-body:1.0625rem; --fs-small:.875rem;
  --fs-eyebrow:.8125rem;
}
/* ≤1023px o texto do hero ocupa a largura toda (grid vira 1/13) e o crop `cover` do poster
   centraliza as canetas claras — fade horizontal deixaria a metade direita sem proteção.
   Fallback vertical suave: texto ancorado na base, mesmo platô .82 + smoothstep. */
@media(max-width:1023px){
  :root{
    --scrim-hero:
      linear-gradient(180deg, rgba(13,26,56,.42) 0, rgba(13,26,56,.24) 60px, rgba(13,26,56,.08) 100px, rgba(13,26,56,0) 132px),
      linear-gradient(0deg,
        rgba(13,26,56,.86) 0%,
        rgba(13,26,56,.82) 52%,
        rgba(13,26,56,.72) 63%,
        rgba(13,26,56,.53) 72%,
        rgba(13,26,56,.31) 80%,
        rgba(13,26,56,.12) 88%,
        rgba(13,26,56,0) 96%);
  }
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important} /* regra de autor em .btn (display) anula o [hidden] do user-agent sem isto */
html{scroll-behavior:smooth;scroll-padding-top:clamp(100px,14vh,128px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* A face de fallback mata o salto de fileira durante o display=swap: razao
   medida Alegreya/Helvetica = 0,8024, e com size-adjust:80% o line-box bate
   19,8px nos dois. */
@font-face{font-family:'AS fallback';src:local('Helvetica'),local('Arial'),local('Liberation Sans');
  size-adjust:80%;ascent-override:112%;descent-override:36%;line-gap-override:0%}
/* lining-nums GLOBAL: Alegreya Sans e Cormorant entregam figuras OLD-STYLE por
   padrao -- o zero sobe so a 79,7% da caixa-alta e o "500" em CAIXA ALTA le
   "5oo". Atinge tambem "313 das 524 pecas", "500 ml . 246 g", "58 cores".
   Local na .usp deixaria a pagina com duas gramaticas de algarismo. */
body{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.65;color:var(--ink-soft);background:var(--cream);font-variant-numeric:lining-nums}
img,video{display:block;max-width:100%}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,5rem)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:32px}
@media(max-width:640px){.grid{gap:16px}}
.eyebrow{font-family:var(--font-brand);font-weight:700;font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--gold-500);transform-origin:left}
h1,h2,h3{font-family:var(--font-head);font-weight:500;color:var(--navy-900);line-height:1.1}
.btn{display:inline-block;font-family:var(--font-body);font-weight:700;font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:1rem 2rem;border-radius:2px;transition:background 200ms,color 200ms,border-color 200ms;cursor:pointer;border:1px solid transparent;text-align:center}
.btn--gold{background:var(--gold-500);color:var(--navy-900)}
.btn--gold:hover{background:var(--gold-300)}
.btn--ghost{border:1px solid var(--gold-500);color:var(--gold-300);background:transparent}
.btn--ghost:hover{border-color:var(--gold-300);color:var(--gold-300)}
.btn--ghost.on-cream{color:var(--navy-900)}
.btn--ghost.on-cream:hover{background:rgba(201,162,75,.08)}
/* GLASS nos CTAs ghost que flutuam sobre vídeo/navy (hero, nav, CTA final) — extensão sancionada da
   exceção §4.5 (DIRECAO-LAYOUT.md, pedido do cliente). Receita derivada da .hero__usp, calibrada p/
   área pequena: blur 12px (18 da faixa borraria demais num botão), fill navy .22 (mais leve que .30),
   mesmo saturate 130% + brightness(.74) — a garantia de AA: escurece qualquer frame claro do vídeo
   ANTES do fill compor, mantendo o texto gold-300 legível. Borda/texto dourados e hover intactos
   (só border-color/color, sem lift). Ghost transparente atual = fallback; vidro só no @supports.
   NUNCA em contexto creme (.on-cream fica fora) nem nos ghosts sobre navy chapado (.qstep/.f-tile),
   onde não há nada pra refratar. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .btn--glass{background:rgba(13,26,56,.22);-webkit-backdrop-filter:blur(12px) saturate(130%) brightness(.74);backdrop-filter:blur(12px) saturate(130%) brightness(.74);box-shadow:inset 0 1px 0 rgba(247,243,236,.06)}
  @media(prefers-reduced-transparency:reduce){.btn--glass{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}}
}
:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
.wa-glyph{display:inline-block;width:1em;height:1em;vertical-align:-.12em;margin-right:.5em;fill:currentColor}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 600ms cubic-bezier(.16,1,.3,1),transform 600ms cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ===== Nav ===== */

.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ===== EMENDAS ===== Fio dourado na junta entre seccoes: e lei da casa
   (DIRECAO-LAYOUT §1.2). Sem ele, navy-850 contra navy-900 le como banding. */
section+section{border-top:1px solid rgba(201,162,75,.22)}
.proof,.cat,.why{border-top:1px solid rgba(201,162,75,.34)}
/* ===== 0b NAV ===== */
.nav{position:fixed;inset:0 0 auto;z-index:60;transition:background .3s,box-shadow .3s}
.nav .wrap{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);padding-block:1rem}
/* lockup OFICIAL no lugar do texto recriado. Vertical, razao 1,27. */
.nav__logo{display:flex;align-items:center;text-decoration:none}
.nav__logo img{height:72px;width:auto;display:block}
@media(max-width:640px){.nav__logo img{height:52px}}
.nav__logo b{color:var(--gold-500)}
.nav__menu{display:none;gap:1.6rem;margin-inline-start:auto;list-style:none}
.nav__menu a{color:var(--cream);text-decoration:none;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;opacity:.86}
.nav__menu a:hover{opacity:1;color:var(--gold-300)}
.nav__tel{display:none;color:var(--gold-300);text-decoration:none;font-weight:700;font-size:.82rem}
/* telefone fixo: acento neutro para o dourado seguir sendo um so na dobra */
.nav__tel--fixo{color:var(--cream);opacity:.88}
.nav__tel--fixo:hover{opacity:1;color:var(--gold-300)}
.nav.stuck{background:rgba(13,26,56,.94);box-shadow:0 1px 0 var(--hairline-cor)}
@media(min-width:900px){.nav__menu{display:flex}.nav__tel{display:inline}}
/* o fixo so entra onde a nav comporta os dois numeros em uma linha (medido) */
@media(max-width:1099px){.nav__tel--fixo{display:none}}

/* ===== 1 HERO ===== */
/* Foto de catalogo tem fundo BRANCO: esticada como cover vira mancha e some com o
   contraste do texto. Ate existir asset de hero (Fase 6, atras da parada P1), a peca
   entra recortada do branco por ALFA (limiar de luminancia + blur de borda, em PIL),
   nao por blend mode: screen sobre fundo branco chapa o quadro inteiro. */
.hero{position:relative;min-height:min(92vh,780px);display:flex;align-items:center;background:var(--navy-900);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 78% 45%,rgba(30,58,110,.55),transparent 62%)}
/* A barra de USP ocupa o rodape do hero: a peca tem de terminar ACIMA dela,
   senao o pe da garrafa aparece cortado por uma faixa. */
.hero__peca{position:absolute;right:clamp(1rem,7vw,8rem);bottom:15%;top:18%;z-index:1;
  width:auto;height:67%;object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.55));pointer-events:none}
@media(max-width:899px){.hero__peca{opacity:.22;width:52vw;right:-4vw}}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(6rem,14vh,9rem) clamp(5rem,11vh,7rem)}
.hero h1{font-family:var(--font-head);font-weight:500;font-size:var(--fs-display);line-height:1.04;color:var(--cream);
  max-width:15ch;text-wrap:balance;text-shadow:0 1px 24px rgba(13,26,56,.7)}
.hero h1 i{font-style:italic;color:var(--gold-300)}
.hero__sub{margin-top:1.4rem;max-width:52ch;color:rgba(247,243,236,.88);font-size:var(--fs-lead);line-height:1.55}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.hero__micro{margin-top:1.1rem;font-size:var(--fs-small);color:rgba(247,243,236,.65);max-width:46ch}
@media(min-width:1280px){.hero .wrap{margin-inline:min(3.5vw,84px) auto}}

/* ===== 1b BARRA DE PROMESSAS =====
   UMA fileira em TODA largura -- e o caminho para isso e a COPY, nao so o
   movimento: os quatro textos cairam de 29-36 para 18-19 caracteres.
     >=900 : fileira estatica + varredura de ENTRADA E->D, finita (assenta em
             790ms). Zero clone na tela. Por durar <5s nao e alcancada pela
             WCAG 2.2.2 e nao pede controle.
     <=899 : ESTEIRA infinita E->D (translateX -50% -> 0, o mesmo vetor da
             .proof__track), COM botao de pausa, que a 2.2.2 exige.
   O `gap` NAO existe no trilho da esteira: translateX(-50%) percorre metade da
   LARGURA e o laco precisa do PERIODO -- com gap os dois diferem em gap/2,
   invariante. Por isso margin-inline-end em TODO li, inclusive o ultimo.
   FUNDO CHAPADO em toda largura: medi por pixel nos 12 quadros do filme, com o
   veu rgba(13,26,56,.38) por cima -- creme ficou entre 2,69:1 (pior quadro) e
   4,20:1 (melhor), nunca alcancando os 4,5 de AA, e gold-300 no maximo 3,60:1.
   Chapado em navy-900: creme 15,54:1 e gold-300 10,54:1. */
.usp{--eixo:calc(max(0px,(100% - 1200px)/2) + clamp(1.25rem,5vw,5rem));
  position:absolute;inset:auto 0 0;z-index:3;
  display:flex;align-items:center;flex-wrap:nowrap;gap:0;
  padding:.7rem var(--eixo);
  border-top:2px solid rgba(201,162,75,.62);
  background:var(--navy-900);
  font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cream)}
/* de 1280 pra cima a .hero>.wrap deixa de ser centrada; o eixo acompanha. */
@media(min-width:1280px){.usp{--eixo:calc(min(3.5vw,84px) + clamp(1.25rem,5vw,5rem))}}
.usp__janela{position:relative;flex:1 1 auto;min-width:0;overflow:visible}
.usp__trilho{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;
  gap:.4rem 24px;list-style:none;margin:0;padding:0}
.usp__trilho li{display:flex;align-items:center;gap:.5rem}
.usp__trilho li[data-clone]{display:none}
/* 18px e nao 20: cabe INTEIRO nos 19,8px do line-box (12px x 1,65). stroke 2.25
   em viewBox 24 = traco de 1,6875px, o mesmo do desktop de hoje (20/2.0). */
.usp svg{width:18px;height:18px;stroke:var(--gold-300);fill:none;stroke-width:2.25;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.usp__pausa{display:none}

@media(min-width:900px) and (prefers-reduced-motion:no-preference){
  .usp__trilho li{opacity:0;translate:-16px 0;
    animation:usp-varre 520ms cubic-bezier(.16,1,.3,1) both}
  .usp__trilho li:nth-child(2){animation-delay:90ms}
  .usp__trilho li:nth-child(3){animation-delay:180ms}
  .usp__trilho li:nth-child(4){animation-delay:270ms}
}
@keyframes usp-varre{to{opacity:1;translate:0 0}}

@media(max-width:899px){
  .usp{padding-inline:0}
  /* clip, nao hidden: `hidden` faz o axe pedir scrollable-region-focusable e
     alguem "conserta" pondo tabindex=0 numa faixa que anda. E vive na JANELA,
     nao na .usp -- o anel de foco do botao nao pode ser recortado. */
  .usp__janela{overflow:clip}
  /* difusao por GRADIENTE DA PROPRIA COR, nao mask-image: sobre fundo chapado o
     pixel e identico e custa so pintura, enquanto mask-image forca
     render-surface offscreen por quadro. rgba(13,26,56,0) e NUNCA `transparent`
     (a palavra-chave interpola via rgba(0,0,0,0) e produz banda cinza). */
  .usp__janela::before,.usp__janela::after{content:"";position:absolute;inset-block:0;
    width:clamp(20px,5vw,44px);z-index:2;pointer-events:none}
  .usp__janela::before{left:0;background:linear-gradient(90deg,var(--navy-900),rgba(13,26,56,0))}
  .usp__janela::after{right:0;background:linear-gradient(270deg,var(--navy-900),rgba(13,26,56,0))}
  .usp__trilho{flex-wrap:nowrap;width:max-content;gap:0;
    animation:usp-belt 14s linear .6s infinite backwards}
  .usp__trilho li{margin-inline-end:48px}
  .usp__trilho li[data-clone]{display:flex}
  .usp.is-parada .usp__trilho,.usp.is-fora .usp__trilho{animation-play-state:paused}
  /* caixa visual de 24px, alvo de toque de 44px pelo ::before -- assim o botao
     nao infla a faixa. Glifo creme .65 sobre navy-900 = 7,14:1. */
  .usp__pausa{flex:none;display:grid;place-items:center;position:relative;
    width:24px;height:24px;margin-inline-end:10px;
    background:none;border:0;padding:0;cursor:pointer;border-radius:2px;
    color:rgba(247,243,236,.65);transition:color 160ms cubic-bezier(.4,0,.2,1)}
  .usp__pausa::before{content:"";position:absolute;top:50%;left:50%;
    translate:-50% -50%;width:44px;height:44px}
  .usp__pausa:hover,.usp__pausa:focus-visible{color:var(--cream)}
  .usp__pausa:focus-visible{outline:2px solid var(--gold-300);outline-offset:-2px}
  .usp .usp__pausa svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
  .usp__pausa .usp__ic-r{display:none;fill:currentColor;stroke:none}
  .usp.is-parada .usp__pausa .usp__ic-p{display:none}
  .usp.is-parada .usp__pausa .usp__ic-r{display:block}
}
@keyframes usp-belt{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* movimento reduzido RESTAURA o layout, nao so congela: sem o transform:none o
   -50% sobrevive ao wrap e joga a fileira meia tela para a esquerda. */
@media(max-width:899px) and (prefers-reduced-motion:reduce){
  .usp{padding-inline:var(--eixo)}
  .usp__janela{overflow:visible}
  .usp__janela::before,.usp__janela::after{display:none}
  .usp__trilho{animation:none;transform:none;width:auto;flex-wrap:wrap;gap:.4rem 24px;
    justify-content:flex-start}
  .usp__trilho li{margin-inline-end:0}
  .usp__trilho li[data-clone]{display:none}
  .usp__pausa{display:none}
}
@media(max-width:560px){.hero{min-height:auto}.hero__peca{display:none}}

/* ===== 2 PROVA ===== (componentes copiados do doador: title com fio dos dois
   lados, esteira mascarada nas bordas e cartao branco por logo) */
.proof{background:var(--cream);padding-block:clamp(3.5rem,8vh,5.5rem);text-align:center}
.proof__title{font-family:var(--font-brand);font-weight:700;font-size:.9375rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-500);display:flex;align-items:center;justify-content:center;gap:16px}
.proof__title::before,.proof__title::after{content:"";width:36px;height:1px;background:rgba(201,162,75,.45)}
.proof__frase{font-family:var(--font-head);font-style:italic;
  font-size:clamp(1.125rem,1rem + .6vw,1.375rem);color:var(--ink-soft);max-width:58ch;margin:14px auto 0}
.proof__frase b{font-style:normal;font-weight:600;color:var(--navy-900)}
.proof__belt{margin-top:26px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
/* gap:0 + margin-inline-end: com `gap`, metade da largura e periodo diferem em
   gap/2 = 7px -- e o salto lateral que esta esteira da a cada 46s hoje.
   `will-change` saiu: transform animado ja promove a camada, e declarado em
   CSS estatico o layer nunca e liberado. */
.proof__track{display:flex;gap:0;width:max-content;animation:belt-scroll 46s linear infinite}
.proof__track .logo-card{margin-inline-end:14px}
@keyframes belt-scroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.logo-card{display:flex;align-items:center;justify-content:center;flex:none;min-width:150px;height:72px;
  padding:10px 24px;background:#fff;border:1px solid rgba(13,26,56,.1);border-radius:2px}
.logo-card img{height:34px;width:auto;max-width:120px;object-fit:contain;display:block}
/* Contrastes calculados: repouso rgba(13,26,56,.55)=#767C89 sobre creme 3,79:1
   (1.4.11 pede 3:1); hover/foco navy-900 15,54:1; anel gold-ink 4,94:1.
   gold-500 sobre creme da 2,17:1 e esta PROIBIDO -- por isso gold-ink. */
.belt-pausa{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-top:8px;padding:0;
  background:none;border:0;border-radius:2px;cursor:pointer;
  color:rgba(13,26,56,.55);transition:color 160ms cubic-bezier(.4,0,.2,1)}
.belt-pausa:hover,.belt-pausa:focus-visible{color:var(--navy-900)}
.belt-pausa:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px}
.belt-pausa svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.belt-pausa .usp__ic-r{display:none;fill:currentColor;stroke:none}
.proof.is-parada .belt-pausa .usp__ic-p{display:none}
.proof.is-parada .belt-pausa .usp__ic-r{display:block}
.proof.is-parada .proof__track,.proof.is-fora .proof__track{animation-play-state:paused}
.proof__cta{margin-top:26px}
@media(prefers-reduced-motion:reduce){
  .proof__belt{-webkit-mask-image:none;mask-image:none}
  .proof__track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .proof__track .logo-card{margin:7px}
  .belt-pausa{display:none}}

/* ===== 3 ORCAMENTO ===== */
.quote{position:relative;background:var(--navy-850);
  /* .occ e .quote tem o mesmo navy-850: sem esta regra a emenda fica em 1,00:1
     e o formulario nao parece uma secao nova. Fio dourado = 5,48:1 medido. */
  border-top:2px solid var(--gold-500);padding-block:clamp(4rem,10vh,6.5rem);color:var(--cream)}
.quote h2{font-family:var(--font-head);font-weight:500;font-size:var(--fs-h2);line-height:1.1;max-width:18ch;color:var(--cream)}
.quote__lead{margin-top:1rem;max-width:56ch;color:rgba(247,243,236,.86);line-height:1.6}
.quote__lead b{color:var(--cream);font-weight:700}
/* 2 colunas: a esquerda argumenta e fica GRUDADA enquanto o painel rola.
   Foi assim que a de canetas resolveu -- a coluna sticky e o que segura o
   argumento ao lado de cada pergunta. */
.quote__grid{display:grid;gap:clamp(2rem,5vw,4rem);margin-top:2.2rem;align-items:start}
@media(min-width:1000px){.quote__grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
  .quote__intro{position:sticky;top:14vh}}
/* ===== CONDENSACAO DE BORDA =====================================================
   Uma gota e uma LENTE: ela inverte o que esta atras dela. Sobre navy chapado nao
   ha nada para inverter -- por isso canvas/WebGL (200 a 2000 mW) entregariam zero
   pixel de diferenca aqui. A refracao so e visivel na fronteira navy<->creme, e e
   exatamente onde as gotas moram. Auditamos 7 marcas de agua (Liquid Death, Owala,
   LARQ, Stanley, VOSS, evian, waterdrop): nenhuma usa canvas ou WebGL.
   Custo: ~330 B gzip, 0 B de JS extra, 0 @keyframes, 0 loop always-on, 0 mW.
   ARMADILHA: nao por overflow:hidden na .quote para conter as gotas -- isso mata o
   position:sticky da .quote__intro. As gotas ficam dentro do proprio .gt-box. */
.gt-box{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.quote .wrap{position:relative;z-index:1}
.gt{position:absolute;border-radius:52% 48% 46% 54%/48% 52% 48% 52%;
  /* especular pequeno e DURO no quadrante superior-esquerdo (agua e lisa: IOR 1,33,
     F0 0,02 -- o realce e minusculo, nunca um brilho espalhado); a lasca creme do
     lado OPOSTO ao cartao e a inversao da lente, o unico pixel que paga a gota. */
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.40) 0 18%, transparent 42%),
    radial-gradient(circle at 72% 74%, rgba(247,243,234,.26) 0 30%, transparent 62%),
    rgba(255,255,255,.045);
  /* fio de Fresnel embaixo-a-direita + sombra DESLOCADA com cautica clara dentro.
     Sombra centrada e cinza uniforme e o delator numero 1 de gota falsa. */
  box-shadow:
    inset -1px -1px 1px rgba(255,255,255,.30),
    2px 3px 4px rgba(5,12,28,.34),
    2px 3px 2px -1px rgba(247,243,234,.13);
  /* entra uma vez quando a dobra aparece: motion sem loop permanente */
  opacity:0;transform:translateY(4px) scale(.82);
  transition:opacity .7s ease-out,transform .7s cubic-bezier(.2,.7,.3,1)}
.gt-box.on .gt{opacity:1;transform:none}
/* o rastro da unica gota grande e ESTATICO: gota real nao desliza liso, ela prende
   e solta por histerese de angulo de contato -- translateY linear entrega o truque. */
.gt--rastro::after{content:"";position:absolute;left:38%;bottom:100%;width:2px;height:26px;
  background:linear-gradient(to top,rgba(255,255,255,.16),transparent);border-radius:1px}
@media(max-width:999px){.gt-box{display:none}}
@media(prefers-reduced-motion:reduce){.gt{transition:none;opacity:1;transform:none}}
@media(prefers-reduced-data:reduce){.gt-box{display:none}}
.quote__painel{background:var(--cream);border:1px solid rgba(201,162,75,.45);
  padding:clamp(1.5rem,3vw,2.6rem);color:var(--navy-900)}
.quote__painel::before{content:"";display:block;width:44px;height:2px;background:var(--gold-500);margin-bottom:1.1rem}
.quote__conta{font-family:var(--font-brand);letter-spacing:.2em;font-size:.8rem;color:var(--gold-500)}
.quote__painel h3{font-family:var(--font-head);font-weight:500;font-size:clamp(1.3rem,1.05rem + .8vw,1.6rem);
  color:var(--navy-900);margin-top:.5rem;line-height:1.25}
.quote__dica{font-family:var(--font-head);font-style:italic;color:var(--ink-soft);font-size:.95rem;margin-top:.2rem}
.quote form{margin-top:1.6rem;display:grid;gap:1rem}
.quote__painel label{color:var(--navy-900)}
.quote__painel input,.quote__painel select{color:var(--navy-900)}
.quote__painel input::placeholder{color:rgba(13,26,56,.42)}
/* O formulario vive DENTRO do painel creme, que fica dentro da secao navy.
   Declarar a cor do label na secao escura pintava creme sobre creme -- 1:1, invisivel.
   Regra: quem define a cor e o fundo em que o elemento REALMENTE esta. */
.quote label{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700}
.quote input,.quote select{width:100%;margin-top:.45rem;padding:.85rem 0;background:none;border:0;
  border-bottom:1px solid rgba(13,26,56,.28);font:inherit}
.quote input:focus,.quote select:focus{outline:2px solid var(--gold-500);outline-offset:3px;
  border-bottom-color:var(--gold-500)}
.quote select option{color:var(--navy-900)}
/* mora no painel creme, nao na secao navy */
.quote__re{font-size:var(--fs-small);color:var(--ink-soft);margin-top:-.3rem;
  font-family:var(--font-head);font-style:italic}

/* ===== 4 OCASIOES ===== (cartao BRANCO com miniatura, como no doador: o card
   escuro sobre secao escura sumia; o branco e o que faz a faixa existir) */
.occ{border-top:2px solid var(--gold-500);background:var(--navy-850);padding-block:clamp(2.5rem,6vh,4rem) clamp(2rem,5vh,3.5rem) clamp(3.5rem,8vh,5rem)}
.occ__head{text-align:center;margin-bottom:1.6rem}
.occ__head .proof__title{color:var(--gold-500)}
.occ__head p{font-family:var(--font-head);font-style:italic;color:rgba(247,243,236,.78);margin-top:.5rem}
/* Esteira com fade nas duas bordas -- valores do doador, nao reinventados:
   mascara em 7%/93%, 60 s lineares, pausa no hover e o dobro de cards no track
   (sem a segunda volta, o -50% da animacao mostra vazio). */
.occ__belt{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.occ__track{display:flex;gap:0;width:max-content;animation:occ-scroll 60s linear infinite}
.occ__track .occ__card{margin-inline-end:14px}
@keyframes occ-scroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* o :hover GRUDA no iOS depois do toque e a esteira congela ate o dedo cair
   noutro lugar -- le como pagina quebrada. O guarda conserta. */
@media(hover:hover) and (pointer:fine){
  .occ__belt:hover .occ__track,.occ__belt:focus-within .occ__track{animation-play-state:paused}}
.occ.is-fora .occ__track{animation-play-state:paused}
.occ__card{display:flex;align-items:center;gap:14px;width:340px;flex:none;background:#FFFDF8;
  border:1px solid rgba(201,162,75,.35);border-radius:2px;padding:12px 16px;text-decoration:none;
  transition:border-color 200ms;box-shadow:0 18px 36px -24px rgba(0,0,0,.45)}
.occ__card:hover{border-color:var(--gold-500)}
/* Sem movimento infinito para quem pediu: vira grade centrada, com tudo a vista. */
@media(prefers-reduced-motion:reduce){
  .occ__belt{mask-image:none;-webkit-mask-image:none}
  .occ__track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .occ__track .occ__card{margin-inline-end:0;margin:7px}}
.occ__card img{width:58px;height:58px;flex:none;object-fit:contain;background:#fff;
  border:1px solid rgba(13,26,56,.07);border-radius:2px;padding:.2rem}
.occ__c{display:block;min-width:0}
.occ__t{display:block;font-family:var(--font-brand);font-size:.82rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--navy-900);font-weight:700}
.occ__p{display:block;margin-top:.3rem;font-size:var(--fs-small);color:var(--ink-soft);line-height:1.4}
/* classe propria: `.occ__card span` tambem casava com o WRAPPER e deixava o texto
   de apoio das 6 ocasioes em bold espacejado, com a coluna fora do eixo da miniatura */
.occ__cta{display:inline-block;margin-top:.45rem;font-size:.72rem;letter-spacing:.1em;
  color:var(--gold-500);font-weight:700}

/* ===== 5 QUALIDADE ===== */
@media(min-width:900px){.qual__wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
/* A peca vive SOBRE o navy, recortada em alfa (scripts/recorta-peca.py).
   O quadro branco de estudio abria um buraco claro no meio da secao escura. */
@media(min-width:900px){.qual__media{position:sticky;top:14vh}}
/* max-height:100% NAO resolve aqui: o pai e grid com altura vinda de aspect-ratio,
   entao a porcentagem nao tem contra o que medir e o navegador usa o tamanho
   natural. Medido: caixa de 602 px com a imagem em 828 -- transbordava 226 px e
   a garrafa vazava para fora da secao. Teto em unidade ABSOLUTA, a mesma da caixa. */
/* linha vertical + ponto por parada: e o fio que liga as 5 provas */
@media(min-width:900px){.qual__list li{opacity:.55}.qual__list li.on{opacity:1}}
@media(prefers-reduced-motion:reduce){.qual__list li{opacity:1!important}}
/* > b: SO o titulo da parada. Sem o filho direto, o <b> inline de dentro do <p>
   ("inox <b>304</b>") tambem virava bloco e quebrava a frase em duas linhas. */
/* swatch da peca-face: troca a foto ao lado. Botao de verdade -- e clicavel e focavel. */
/* grade do catalogo inteiro: e prova de amplitude, nao controle -- nao clica */

/* ===== 6 CATALOGO ===== */
.cat{background:var(--cream);padding-block:clamp(4rem,10vh,6.5rem)}
.cat h2{font-family:var(--font-head);font-weight:500;font-size:var(--fs-h2);color:var(--navy-900);max-width:20ch;line-height:1.1}
.lbadge{flex:none;background:var(--navy-900);color:var(--gold-300);font-family:var(--font-brand);
  font-size:.82rem;letter-spacing:.06em;padding:.2rem .55rem;border-radius:2px}
/* 2 colunas, nao 4: garrafa e alta e estreita -- em celula de 50 px ela some.
   A proporcao 3/4 e a da peca, entao sobra pouco branco dentro do quadro. */

/* ===== 7 PROCESSO ===== as regras desta dobra ficam no FIM desta folha de estilo
   (bloco "A REGUA COM O NUMERO NA COTA"), para entrarem DEPOIS de qualquer regra antiga
   e nao perderem a cascata. Aqui nao sobrou nenhuma regra .proc. */

/* ===== 7b A PECA, POR INTEIRO ===== (dobra nova)
   O still ja vem COM fundo e luz proprios -- nao se recorta. O movimento continuo
   nao finge que a foto gira: gira a LUZ e a profundidade. Sao 2 gestos, o teto. */
.pf{--pf-pad:clamp(1.25rem,5vw,5rem);--pf-palco:calc(min(1200px,100vw) - 2*var(--pf-pad));--pf-vid:calc(min(70vh,600px)*.5625);--pf-card:clamp(250px,23vw,300px);--pf-gap:calc(.47*var(--pf-palco) - .5*var(--pf-vid) - var(--pf-card));position:relative;background:var(--navy-900);overflow:hidden;
  padding-block:clamp(4rem,10vh,6.5rem)}
.pf__palco{position:relative;display:grid;grid-template-areas:"palco";place-items:center;
  min-height:min(78vh,660px);padding-bottom:150px;isolation:isolate}
/* O fundo do video e #0A1729 e o da pagina e #0D1A38 -- 21 a 36 pontos de diferenca
   medidos nos 4 cantos. Sem dissolver a borda, a chapa aparece como um retangulo. */

/* O video JA gira: deriva em CSS por cima seria movimento dobrado, e girar o
   poster parado e tilt 3D -- recurso ja reprovado neste projeto. Sem animacao aqui. */
.pf__peca{grid-area:palco;display:block;
  /* a borda do mp4 e um retangulo 12 niveis mais escuro que a secao; a mascara
     dissolve os 4 lados e o quadro deixa de existir, em qualquer fundo. */
  --fade:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),
        linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-image:var(--fade);mask-image:var(--fade);
  -webkit-mask-composite:source-in;mask-composite:intersect;width:auto;height:min(70vh,600px);object-fit:contain}
.pf__bt{position:absolute;inset:auto auto 6% 50%;translate:-50% 0;z-index:4}
/* O varrimento de luz sobre o palco inteiro foi REMOVIDO: soft-light sobre fundo
   chapado nao le como luz, le como um retangulo atravessando a dobra -- e ainda
   brigava com a luz que ja esta fotografada na peca. Fica so a deriva 3D. */

.pf__q.on{opacity:1;transform:none}
/* ETIQUETA DEITADA + VIDRO. Foto a esquerda, texto a direita: de 1,31 (retrato)
   para 0,33 -- +54% de largura, ocupa 67% da calha morta contra 43%.
   VIDRO SEM BLUR: medimos 3 builds pixel a pixel -- backdrop-filter:blur(8px) muda
   no maximo 4 de 255 sobre navy chapado (nao ha o que refratar), contra 12 do
   gradiente. O blur custava 5 camadas de composicao sobre o video e nao aparecia. */
.pf__q{position:absolute;z-index:3;opacity:0;transform:translateY(10px);
  transition:opacity .5s ease-out,transform .5s ease-out;display:grid;grid-template-columns:72px 1fr;gap:12px;
  align-items:center;width:clamp(250px,23vw,320px);min-height:104px;padding:12px;
  background:linear-gradient(150deg,rgba(31,54,102,.55),rgba(13,26,56,.62));
  border:1px solid rgba(201,162,75,.62);
  box-shadow:inset 0 1px 0 rgba(247,243,236,.10),0 10px 30px rgba(0,0,0,.35)}
.pf__lupa{width:72px;height:72px;border-radius:50%;overflow:hidden;
  border:1px solid rgba(201,162,75,.45);
  box-shadow:inset 0 0 0 3px rgba(13,26,56,.9)}
.pf__lupa img{width:100%;height:100%;object-fit:cover;display:block}
/* o fio sai da borda do cartao virada para a peca e TERMINA NUM PONTO. Comprimento
   por etiqueta (--fio), nao fixo: fixo nunca encosta, foi o defeito anterior. */
.pf__q::after{content:"";position:absolute;top:50%;width:var(--fio,140px);height:1px;
  border-top:1px dotted rgba(201,162,75,.62)}
/* seta no lugar do ponto: indica o lugar E a direcao do apontamento.
   Triangulo por borda -- 0 imagem, 0 requisicao. */
.pf__q::before{content:"";position:absolute;top:52px;width:0;height:0;
  margin-top:-5px;border-block:5px solid transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.pf__q[data-lado="e"]::before{border-left:9px solid var(--gold-500)}
.pf__q[data-lado="d"]::before{border-right:9px solid var(--gold-500)}
.pf__q[data-lado="e"]::after{left:100%}
.pf__q[data-lado="e"]::before{left:calc(100% + var(--fio,140px) - 9px)}
.pf__q[data-lado="d"]::after{right:100%}
.pf__q[data-lado="d"]::before{right:calc(100% + var(--fio,140px) - 9px)}
@media(max-width:1099px){.pf__q::after,.pf__q::before{display:none}}
/* SEXTO CARTAO: seletor de cor. Sem foto na coluna da esquerda -- o proprio
   amostrador e o conteudo visual, e ele precisa da largura toda. */
.pf__q--cor{grid-template-columns:200px 1fr;gap:16px;padding:11px 18px;width:clamp(340px,46vw,560px);min-height:0;left:50%;right:auto;translate:-50% 0}
.pf__q--cor::after,.pf__q--cor::before{display:none}
/* 2 fileiras de 2: 44+8+44 = 96px de coluna. Alvo de toque intacto. */
.pf__cores{display:grid;grid-template-columns:repeat(4,44px);gap:8px;align-content:center}
.pf__cor{width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  background:var(--sw);border:1px solid rgba(247,243,236,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);position:relative;
  transition:transform .18s ease-out,box-shadow .18s ease-out}
.pf__cor:hover{transform:translateY(-2px)}
.pf__cor:focus-visible{outline:2px solid var(--gold-300);outline-offset:3px}
/* selecionado NAO depende so de cor: anel dourado E um tique desenhado, para
   quem nao distingue as cores continuar sabendo qual esta ativa. */
.pf__cor[aria-pressed="true"]{box-shadow:0 0 0 2px var(--gold-500),
  inset 0 1px 0 rgba(255,255,255,.22)}
/* left/top 50% caem no centro do botao em qualquer tamanho. O translate de
   -50%/-50% centra a CAIXA (que na real e 15x9, nao 13x7: o reset de
   box-sizing nao alcanca pseudo-elemento, entao as 2 bordas somam por fora).
   O -2.925px extra centra a TINTA: o tique e um "L" de duas bordas, a tinta
   pesa 2.068px a esquerda e abaixo do centro da caixa, e o giro de -45graus
   vira esse desvio em 2.068 x raiz de 2 = 2.925px puro pra baixo. */
.pf__cor[aria-pressed="true"]::after{content:"";position:absolute;
  left:50%;top:50%;width:13px;height:7px;border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:translate(-50%,-50%) translate(0,-2.925px) rotate(-45deg);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.9))}
.pf__cor--claro[aria-pressed="true"]::after{border-color:#111;filter:none}
/* dois videos empilhados: o novo carrega e busca o MESMO instante por tras e so
   entao aparece. Trocar o src de um <video> unico pisca preto no meio. */
.pf__palco{position:relative}
.pf__peca{transition:opacity .28s ease-out}
.pf__peca--b{grid-area:palco;opacity:0;z-index:1}
/* quem NAO tem .on fica invisivel -- vale para os dois, nao so para o de tras */
.pf__palco video:not(.on){opacity:0}
.pf__palco video.on{opacity:1;z-index:2}
.pf__peca--b.on{opacity:1}
.pf__txt{min-width:0}
.pf__q{color:#DCE3F0}
.pf__q b,.pf__q strong{display:block;font-family:var(--font-brand);letter-spacing:.12em;font-size:.68rem;
  text-transform:uppercase;color:var(--gold-300);margin-bottom:.2rem}
@media(max-width:1099px){.pf__q{position:static;max-width:none;margin-top:.6rem;opacity:1;transform:none}
  /* piso de 12px da casa: a regra da linha 1510 so entra em <=1023px, entao de
     1024 a 1099 o rotulo ficava em .68rem = 10,88px. */
  .pf__q b{font-size:12px}
  .pf__palco{min-height:auto}.pf__peca{height:52vh}}
@media(prefers-reduced-motion:reduce){
  .pf__q{opacity:1;transform:none;transition:none}}

/* ===== 8 POR QUE GARRAFA ===== As nove regras que moravam aqui (.why, .why__quote, .why__grid,
   .why__grid>div, .why__grid h3, .why__grid p, .why__close e .why__close b) sairam INTEIRAS. A
   dobra foi reescrita no FIM desta folha, depois da .proc, para nao perder a cascata. Nao sobrou
   nenhuma regra .why aqui -- so o border-top compartilhado em ".proof,.cat,.why" (lei de emenda
   da casa), que fica. */

/* ===== 10 CTA ===== */
.final{background:var(--navy-900);padding-block:clamp(3.5rem,8vh,5rem);color:var(--cream)}
@media(min-width:1024px){}
.final__brand{font-family:var(--font-brand);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-500);font-size:1rem;line-height:1.2}
.final h2{font-family:var(--font-head);font-weight:500;font-size:var(--fs-h3);margin-top:.6rem;max-width:24ch;line-height:1.15;color:var(--cream)}
.final p{margin-top:.9rem;max-width:60ch;color:rgba(247,243,236,.82);line-height:1.5}
.final__ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.4rem}
.final__micro{margin-top:1rem;font-size:var(--fs-small);color:rgba(247,243,236,.66);max-width:52ch}
.final__micro b{color:var(--gold-300);font-weight:700}

/* ===== 11 FAQ ===== */
.faq{border-top:1px solid rgba(201,162,75,.34);background:var(--navy-800);
  padding-block:clamp(3.5rem,8vh,5rem);color:var(--cream)}
.faq details{border-top:var(--hairline)}
.faq details[open]{padding-bottom:.9rem}
/* O padding-block vivia no <details>, mas quem tem activation behavior e o <summary>:
   o alvo real era 25px em 11 alvos empilhados, num site cujo trafego chega por celular
   -- e o .pf__cor (384) e 44x44 com "Alvo de toque intacto" escrito ao lado. O padding
   muda de dono: a area que PARECE clicavel passa a SER clicavel. */
.faq summary{cursor:pointer;list-style:none;display:flex;gap:0;align-items:baseline;
  padding-block:.9rem;min-height:44px;font-size:var(--fs-lead);line-height:1.3;
  font-weight:700;color:var(--cream);text-wrap:balance}
/* --fs-lead e 1.25rem FIXO (45). Abaixo de 400px a pergunta mais longa encostaria na
   coluna util, entao o degrau cai aqui -- mesmo a 17px o alvo fica em 50,9px. */
@media(max-width:400px){.faq summary{font-size:var(--fs-body)}}
/* a regra global h1,h2,h3 (76) pinta navy-900: 1,16:1 sobre navy-800, o texto sumiria. */
.faq summary h3{font:inherit;color:inherit;margin:0}
/* o anel global (96) tem outline-offset:2px; com o summary encostado no fio de baixo,
   offset positivo invadiria a pergunta seguinte. */
.faq summary:focus-visible{outline-offset:-2px}
.faq summary::-webkit-details-marker{display:none}
/* caixa FIXA no marcador: pergunta e resposta partem do mesmo x em qualquer estado, e o
   deslize de ~1px na troca de glifo morre aqui. */
.faq summary::before{content:"+";color:var(--gold-500);font-family:var(--font-brand);
  flex:none;width:1.5rem}
.faq details[open] summary::before{content:"\00d7"}
/* alt vazio: o estado ja e anunciado pelo proprio <details>, e `content` de CSS entra no
   nome acessivel no Chrome/Safari. Dentro de @supports porque sem a sintaxe
   `content: <valor> / <alt>` a declaracao inteira cai e o marcador sumiria. */
@supports (content:"a" / "b"){
  .faq summary::before{content:"+" / ""}
  .faq details[open] summary::before{content:"\00d7" / ""}
}
/* teto de medida: a resposta corria 1.049px de caixa -- 144 caracteres MEDIDOS por linha,
   contra a faixa confortavel de 45-75. O valor saiu de medicao nas 11 respostas, nao de
   estimativa por avanco de glifo (que erra ~1 passo aqui): 52ch da media 57 / max 63;
   56ch da media 62 / max 69; 60ch ja estoura (max 76). 56ch e o maior que cabe inteiro. */
.faq details p{margin-top:.35rem;color:rgba(247,243,236,.8);line-height:1.6;
  font-size:var(--fs-small);padding-left:1.5rem;max-width:56ch;text-wrap:pretty}
/* mesma junta cabeceira->lista da .proc__passos (659); o border-bottom fecha a lista
   com o mesmo fio que a abre. */
.faq__list{margin-top:clamp(2.1rem,4.5vh,2.9rem);border-bottom:var(--hairline)}
/* controle utilitario, no registro de .occ__cta (290): o pill dourado volta a significar
   so conversao. */
.faq__ac{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}
.faq__todas{background:none;border:0;padding:.55rem 0;min-height:44px;cursor:pointer;
  font-family:var(--font-body);font-weight:700;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-300);
  text-decoration:underline;text-underline-offset:3px}
.faq__todas:hover{color:var(--gold-500)}
.faq__fecho{margin-top:clamp(1.6rem,3vh,2.2rem);display:flex;flex-wrap:wrap;
  align-items:center;gap:1rem 1.4rem}
.faq__fecho p{max-width:46ch;font-size:var(--fs-small);color:rgba(247,243,236,.66)}
.faq__fecho b{color:var(--gold-300);font-weight:700}

/* ===== 12 FOOTER ===== */
.foot{background:var(--navy-900);color:rgba(247,243,236,.7);padding-block:2.6rem;font-size:var(--fs-small)}
.foot .grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.foot b{color:var(--cream);display:block;margin-bottom:.5rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.foot a{color:inherit;text-decoration:none}
.foot a:hover{color:var(--gold-300)}
.foot__fim{margin-top:2rem;padding-top:1.2rem;border-top:var(--hairline);opacity:.75}
.confirme{display:none}
/* GALERIA DE CATEGORIAS -- para o time comercial mostrar os 7 tipos de uma vez.
   Fundo bege como as outras secoes claras. Sobre a foto vai um fade NAVY da
   identidade, e atras de cada peca um tom escolhido pelo MATERIAL, nao por
   enfeite: vidro e inox precisam de fundo escuro para o contorno aparecer;
   plastico de cor forte e aluminio precisam de fundo claro para nao brigar. */
/* 7 categorias nao dividem por 6: a setima vai para a linha de baixo,
   centralizada entre as colunas 3 e 4 -- e nao sozinha na ponta esquerda. */
/* fade navy da identidade, subindo do pe -- e onde o rotulo se apoia */
/* reveal de uma vez, sem loop permanente: transition, nao @keyframes */
@media(max-width:1100px){.gal__grid{grid-template-columns:repeat(4,1fr)}
  .gal__item:nth-child(7){grid-column:auto;max-width:none}}
@media(max-width:720px){.gal__grid{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.gal__item{opacity:1;transform:none;transition:none}
  .gal__link:hover{transform:none}}

/* dourado claro so passa em contraste sobre navy; sobre bege usa --gold-ink.
   Medido: #C9A24B sobre #F7F3EC = 2,17:1 (reprova AA); #7F662F = 4,94:1. */
.hero .eyebrow,.quote .eyebrow,.pf .eyebrow,.occ .eyebrow,
.hero .proof__title,.quote .proof__title,.pf .proof__title{color:var(--gold-500)}
/* CATALOGO no padrao dos cartoes de colecao das canetas: capa, olho, titulo,
   promessa, selo com a contagem, miniaturas COM codigo e CTA. Substitui a
   galeria #tipos, que repetia o mesmo H2, as mesmas 7 contagens e os mesmos usos. */
.cat__card{margin:0;background:var(--cream);border:1px solid rgba(201,162,75,.45);
  display:flex;flex-direction:column;overflow:hidden}
.cat__capa{position:relative;display:block;background:var(--cb);
  /* padding-top em vez de aspect-ratio: o <span> nao tem altura propria e a
     <img> em height:100% criava dependencia ciclica -- media 1,04:1. */
  height:0;overflow:hidden}
.cat__capa img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:5% 7%;box-sizing:border-box;display:block}
/* a capa COM ambiente preenche o quadro; a de recorte continua em contain */
.cat__capa--foto img{object-fit:cover;padding:0}
/* o selo vai no cartao de fundo CLARO: navy sobre #E7E0D2 = 13,09:1; sobre o
   navy do cartao 01 daria 1,20:1 e reprovaria. */
.cat__af{position:absolute;right:0;top:0;background:var(--navy-900);color:var(--gold-300);
  font-family:var(--font-brand);font-weight:700;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.5rem .7rem}
.cat__corpo{padding:clamp(1.2rem,2vw,1.75rem);display:flex;flex-direction:column;gap:.7rem;flex:1}
.cat__olho{font-family:var(--font-brand);font-weight:700;font-size:.69rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);margin:0}
.cat__card h3{font-family:var(--font-head);font-weight:600;
  font-size:clamp(1.3rem,1.05rem + .7vw,1.75rem);line-height:1.1;margin:0;color:var(--navy-900)}
.cat__prom{font-weight:700;font-size:clamp(.94rem,.88rem + .2vw,1.06rem);
  line-height:1.45;margin:0;color:var(--navy-900)}
.cat__uso{margin:0;font-size:clamp(.82rem,.78rem + .12vw,.92rem);line-height:1.5;
  color:var(--navy-800)}
.cat__mais{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.3rem}
.cat__mais span{font-family:var(--font-brand);font-weight:700;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy-800)}
.cat__mais .cat__selo{background:var(--navy-900);color:var(--gold-300);padding:.3rem .6rem .35rem;
  font-family:var(--font-brand);font-weight:700;font-size:.8rem;letter-spacing:.04em}
.cat__selo i{font-style:normal;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cream);margin-left:.35rem}
.cat__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0;padding:0;
  list-style:none;max-width:380px}
.cat__thumbs li{margin:0}
.cat__thumbs figure{margin:0;border:1px solid rgba(20,38,78,.16)}
/* height:auto ANTES do aspect-ratio: o atributo height="320" do <img> matava a
   proporcao e a miniatura saia 144x320, comendo 84,8% do cartao.
   cover em vez de contain: os arquivos sao quadrados e opacos -- contain deixaria
   a garrafa 44% menor e um quadrado branco a 1,24:1 sobre o creme. */
.cat__thumbs img{display:block;width:100%;height:auto;aspect-ratio:3/4;
  object-fit:cover;background:#fff}
.cat__thumbs figcaption{font-family:var(--font-brand);font-size:.62rem;letter-spacing:.04em;
  color:var(--navy-800);padding:.25rem .3rem;text-align:center}
.cat__link{margin-top:auto;padding-top:.3rem;font-weight:700;font-size:.88rem;
  color:var(--navy-900);text-decoration:none;align-self:start}
/* gold-500 sobre creme da 2,17:1 e REPROVA -- no hover vai gold-ink + sublinhado */
.cat__link:hover{color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px}
.cat__link:focus-visible{outline:2px solid var(--navy-600);outline-offset:3px}
/* MOSAICO 2/3/3. A grade de 2 colunas com 7 cartoes ja abria 8 lugares e o
   oitavo ficava VAZIO -- o CTA tapa esse buraco, nao desloca colecao.
   Testados 6 arranjos: todos dao ~3.552px de altura, porque a fileira e ditada
   pelo tile mais alto dela. Entao altura nao e critério; o que decide e que
   2/3/2 derrubaria uma colecao e a pagina afirma "524" em 5 lugares. */
.cat__grid{display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(1.2rem,2.4vw,2rem);margin-top:clamp(1.8rem,4vh,2.8rem)}
.cat__card:nth-child(1),.cat__card:nth-child(2){grid-column:span 3}
.cat__card:nth-child(3),.cat__card:nth-child(4),.cat__card:nth-child(5){grid-column:span 2}
.cat__card:nth-child(6),.cat__card:nth-child(7),.cat__cta{grid-column:span 2}
/* 9:16 no desktop; no celular a capa a 9:16 ocuparia 91% da tela -- medido.
   4:5 no mobile resolve e economiza 1.544px de secao. */
.cat__capa{padding-top:100%}
@media(max-width:1023px){
  .cat__grid{grid-template-columns:1fr}
  .cat__card,.cat__cta{grid-column:auto;max-width:420px;margin-inline:auto;width:100%}
  .cat__capa{padding-top:100%}
  .cat__thumbs{max-width:340px}}
/* o tile estreito nao cabe 4 miniaturas (68,2px cada): 3 nele, 4 nos largos */
.cat__card:nth-child(n+3) .cat__thumbs{grid-template-columns:repeat(3,1fr)}
.cat__card:nth-child(n+3) .cat__thumbs li:nth-child(4){display:none}
/* TILE DE CTA: o unico lugar onde o dourado e texto legivel -- #C9A24B sobre
   navy da 7,16:1; sobre creme daria 2,17:1 e reprovaria. */
.cat__cta{background:var(--navy-900);border:1px solid rgba(201,162,75,.5);
  display:flex;flex-direction:column;gap:.9rem;padding:clamp(1.4rem,2.2vw,2rem);
  justify-content:center}
.cat__cta b{display:block;font-family:var(--font-brand);font-weight:700;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-500)}
.cat__cta h3{font-family:var(--font-head);font-weight:600;
  font-size:clamp(1.35rem,1.1rem + .7vw,1.8rem);line-height:1.12;margin:0;color:var(--cream)}
.cat__cta p{margin:0;font-size:clamp(.84rem,.8rem + .14vw,.94rem);line-height:1.5;
  color:rgba(247,243,236,.86)}
.cat__cta ul{margin:.2rem 0 0;padding:0;list-style:none;display:grid;gap:.3rem;
  font-size:.78rem;color:rgba(247,243,236,.74)}
.cat__cta ul li::before{content:"\2014\00a0";color:var(--gold-500)}
.cat__cta a{margin-top:auto;font-weight:700;font-size:.92rem;color:var(--gold-300);
  text-decoration:none}
.cat__cta a:hover{text-decoration:underline;text-underline-offset:3px}
.cat__cta a:focus-visible{outline:2px solid var(--gold-300);outline-offset:3px}

/* ===== FILME DO HERO =====================================================
   As 6 cenas foram enquadradas com o TERCO ESQUERDO escuro e vazio de
   informacao justamente para o H1 e os botoes caberem ali. O scrim abaixo
   nao "escurece a imagem": ele garante o contraste do texto mesmo no quadro
   mais claro do filme (a doca de 16h50, que estoura o ceu de proposito).
   A peca recortada continua no HTML e reaparece sozinha se o video nao rodar
   -- sem JS, com movimento reduzido, ou se o arquivo nao carregar. */
.hero{position:relative;isolation:isolate}
.hero__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:0;transition:opacity 900ms ease-out;pointer-events:none}
.hero.film-on .hero__film{opacity:1}
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity 900ms ease-out;
  background:
    linear-gradient(90deg, rgba(20,32,46,.96) 0%, rgba(20,32,46,.90) 34%,
                    rgba(20,32,46,.55) 58%, rgba(20,32,46,.30) 78%, rgba(20,32,46,.42) 100%),
    linear-gradient(180deg, rgba(20,32,46,.55) 0%, rgba(20,32,46,0) 26%);
}
.hero.film-on .hero__scrim{opacity:1}
/* so a .wrap precisa subir de camada. A .usp NAO entra aqui: ela ja e
   position:absolute com z-index:3 (ancorada em inset:auto 0 0). Ao incluir
   .usp nesta regra eu troquei o absolute por relative e, com .hero em flex,
   ela virou um segundo item do flex: roubou 890px da coluna de texto, o H1
   passou de 3 para 5 linhas e os CTAs cairam abaixo da dobra. */
.hero>.wrap{position:relative;z-index:2}
/* com o filme no ar a peca recortada sobraria em cima da propria peca filmada */
.hero.film-on .hero__peca{opacity:0;transition:opacity 500ms ease-out}
@media(prefers-reduced-motion:reduce){
  .hero__film{display:none}
  .hero.film-on .hero__peca{opacity:1}
  .hero.film-on .hero__scrim{opacity:0}
}

/* ===== 7 PROCESSO ===== A REGUA COM O NUMERO NA COTA
   (bloco movido para o FIM da folha de estilo de proposito: as regras novas precisam
   entrar DEPOIS de qualquer regra antiga para nao perder a cascata.)
   Diagnostico medido da versao anterior: 32,8% da dobra era UM retangulo vazio contiguo
   (916x316 px comecando em x=524), os quatro numerais de 112px consumiam 43,7% de toda a tinta
   contra 20,9% do H2, e entre um passo e o seguinte havia 145 a 169 px de fundo puro -- nenhuma
   regua, nenhum trilho, nenhum conector. A unica linha que atravessava a dobra era o filete de
   emenda de 1px em y=0.
   Desenho: UM elemento grafico so -- um fio dourado que atravessa os 1056 px uteis do .wrap --
   e o numeral encolhido para 15px SENTADO SOBRE esse fio, com o fundo da secao furando a linha
   por tras dele, como cota de desenho tecnico. O numero deixa de ser enfeite e passa a ser o
   proprio tique: e ele que marca a parada na escala. Nao existe segundo conector (seta, chevron,
   ponto, icone) porque a regua furada pelo numeral ja diz sequencia -- dois conectores dizendo a
   mesma coisa e enfeite. O dispositivo e o MESMO em 390 e em 1920: muda o numero de colunas,
   nunca o desenho. */
.proc{background:var(--navy-850);padding-block:clamp(3.5rem,8vh,5rem);color:var(--cream)}
/* OBRIGATORIO: a regra base da .eyebrow usa --gold-ink (#7F662F), que sobre este navy-850 mede
   2,406:1 e reprova. Aqui vale gold-300 chapado = 8,064:1. Especificidade (0,2,0) contra (0,1,0):
   ganha da base em qualquer ordem -- por isso a dobra fica autocontida e a linha compartilhada
   dos olhos dourados (.hero/.quote/.pf/.occ) NAO precisa ser tocada. */
/* a base .eyebrow (74) usa --gold-ink: 2,71:1 sobre navy-800, REPROVA em AA.
   gold-300 = 9,09:1. Especificidade (0,2,0) ganha da base (0,1,0). */
.proc .eyebrow,.faq .eyebrow{color:var(--gold-300)}

/* CABECEIRA -- o titulo para de flutuar sozinho no terco esquerdo (deixava 916,5 px, 63,6% da
   largura, sem nada a direita). Ele e a coluna 1 de dois registros e o lead ocupa a coluna 2,
   que era o vazio. align-items:end assenta as duas caixas na MESMA base, e e dessa base que a
   regua parte -- e o que amarra cabeceira e grade em vez de deixar duas ilhas. */
.proc__head,.faq__head{display:grid;gap:1.1rem}
/* SEM max-width no H2: o 18ch antigo apertava um texto que nem chegava nele (usava 74,7% do
   limite) e rendia 3 linhas com um toco de 136,3 px na terceira, 41% da maior. Quem mede agora
   e a coluna. O &nbsp; em "quatro passos" e o que impede o toco voltar; o balance divide o resto
   parelho. Medido: 2 linhas de 450,9 e 356,3 px (a menor com 79% da maior). */
.proc h2,.faq h2{font-family:var(--font-head);font-weight:500;font-size:var(--fs-h2);
  line-height:1.1;color:var(--cream);text-wrap:balance;margin-top:.7rem}
/* O LEAD nao e texto de enchimento: e a promessa que estava presa num <b> dentro da legenda do
   passo 02, a 14px e 78% de opacidade numa coluna de 32ch. Subiu para o italico Cormorant, que
   e o registro de voz da casa (.why__close, .occ__head p), e de 7,89:1 para 9,171:1. */
.proc__lead,.faq__lead{font-family:var(--font-head);font-style:italic;
  font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.42;
  color:rgba(247,243,236,.86);max-width:42ch;text-wrap:pretty}
.proc__lead b,.faq__lead b{font-style:normal;font-weight:600;color:var(--cream)}
@media(min-width:1000px){
  .proc__head,.faq__head{grid-template-columns:minmax(0,6fr) minmax(0,5fr);
    column-gap:clamp(2rem,4vw,3.5rem);align-items:end}
  .proc h2,.faq h2{margin-top:.8rem}
}

/* A REGUA. E <ol>/<li> porque a ordem e informacao de verdade: o leitor de tela ouve "item 1 de
   4" pela propria estrutura -- e exatamente por isso o numeral visivel leva aria-hidden, senao a
   posicao seria anunciada duas vezes.
   column-gap:0 nao e descuido: e o que faz os border-top dos passos se ENCOSTAREM e virarem UMA
   linha continua (medido em 1440: 4 segmentos de 264 px contiguos, de x=192 a x=1248, vaos
   0/0/0). A calha entre os passos vem do padding-right da celula, nao do gap -- com gap a regua
   sairia picada em quatro pedacos, que e o problema de origem. E como o fio mora em cada passo,
   e nao no container, cada fileira ganha o seu: serve a 4, a 2 e a 1 coluna sem regra extra. */
.proc__passos{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);
  column-gap:0;row-gap:1.7rem;margin-top:clamp(2.1rem,4.5vh,2.9rem)}
.proc__passo{position:relative;border-top:1px solid rgba(201,162,75,.65);padding-top:1.1rem}

/* O NUMERAL E O TIQUE. Duas classes em `.proc__passo .proc__n` porque o numeral e um <p> e
   perderia line-height e margin para `.proc__passo p` -- o arquivo antigo ja se defendia assim
   em `.proc__grid .proc__n`: mesma armadilha, mesma defesa.
   112px -> 15px: o indice para de disputar com a mensagem (era 2,15x o H2; agora 0,29x).
   gold-300 CHAPADO no lugar de gold-500 a 85%: como estava media 4,391:1 e reprovava AA de texto
   normal, e a opacity jogava 20% de contraste fora sem nenhum ganho visual. Chapado da 8,064:1 e
   passa AAA mesmo em corpo pequeno. A 112px o dourado se salvava pela regra de texto grande; a
   15px essa isencao nao existe mais, entao remover a opacity deixou de ser opcional.
   Bonus de ritmo: a caixa do Cinzel e 1,348em, entao o leading invisivel cai de 39px (a 112px)
   para 5,2px -- os valores escritos no CSS voltam a bater com o que aparece na tela (medido:
   caixa de 15px, glifo centrado a +1px do fio).
   ACOPLAMENTO DECLARADO: o `background` TEM de ser o mesmo da secao -- e ele que fura a regua por
   tras do numero. Se o navy-850 da .proc mudar, esta linha muda tambem. */
.proc__passo .proc__n{position:absolute;left:-.45rem;top:0;transform:translateY(-50%);
  font-family:var(--font-brand);font-weight:700;font-size:.9375rem;letter-spacing:.14em;
  line-height:1;margin:0;padding-block:0;padding-inline:.45rem .6rem;
  color:var(--gold-300);background:var(--navy-850)}

/* TITULO DO PASSO em Cinzel caixa-alta, nao em Cormorant 1,2rem: em Cormorant o H3 tinha
   altura-x de 7,41 px contra 6,45 px do paragrafo -- razao optica 1,149x, hierarquia nenhuma, e
   "Escolha a peca" lia como a primeira frase do paragrafo, em serifa. Em Cinzel a altura de
   caixa-alta da ~10 px sobre os mesmos 6,45 = ~1,55x, com familia, caixa e espacejamento
   diferentes, num corpo MENOR. E a voz de etiqueta que a casa ja usa em .occ__t, .cat__olho e
   .proof__title -- nao e estilo novo, e o estilo certo para uma parada de processo. Em caixa-alta
   os quatro titulos cabem em UMA linha na coluna de 228 px (o mais largo mede 190 px). */
.proc__passo h3{margin:0;font-family:var(--font-brand);font-weight:700;font-size:.85rem;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.2;color:var(--cream)}
/* .55rem entre titulo e corpo contra o titulo colado na regua: a proximidade faz a hierarquia
   que o corpo de letra sozinho nao faz. */
.proc__passo p{margin-top:.55rem;font-size:var(--fs-small);
  color:rgba(247,243,236,.78);line-height:1.55;text-wrap:pretty}
.proc__passo p b{color:var(--cream);font-weight:700}

/* 2 COLUNAS ANTES DE 4, NUNCA 3. O `repeat(auto-fit,minmax(220px,1fr))` que estava aqui quebrava
   a sequencia em 3+1 de 834 px a 1080 px (iPad deitado e notebook de 1080 inclusos) e jogava a
   altura de 598 para 809 px num unico breakpoint. Um processo numerado que le "tres passos... e
   mais um" perde exatamente a propriedade que a numeracao existe para transmitir.
   As quatro em fileira entram em 1120 px e nao em 1080: medido, a 1080 a coluna de texto fica com
   214,9 px e "ACOMPANHE A PRODUCAO" em Cinzel caixa-alta quebra em duas linhas. 1120 da 222,9 px,
   que e a folga de que o titulo mais longo precisa (190 px de tinta). */
@media(min-width:640px){
  .proc__passos{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(2rem,4.5vh,2.75rem)}
  .proc__passo{padding-right:clamp(1.5rem,2.6vw,2.25rem)}
  /* NAO reservei duas linhas de altura na legenda, e a decisao foi medida: um
     `min-height:calc(2*1.55*var(--fs-small))` aqui zera o desalinho de caixa em todas as 29
     larguras, mas custa +43 px de espaco vazio em TODA a faixa de 780 a 1110 px (onde as quatro
     legendas ja cabem em uma linha e ja estao alinhadas) -- 43 px de nada para consertar 21,7 px
     de tinta numa faixa de 75 px. Um teto de medida (max-width:38ch) custa +22 px na mesma faixa
     e alinha tambem a tinta, mas so funciona numa janela de 15 px de largura de texto: qualquer
     reescrita da legenda o quebra. Fica sem nenhum dos dois, e o residuo esta declarado: entre
     705 e 779 px a legenda do passo 02 termina uma linha antes das outras tres (21 a 22 px). Em
     TODAS as outras larguras medidas, de 300 a 1920, o desalinho e 0. */
}
@media(min-width:1120px){
  .proc__passos{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ===== DUAS EDICOES FORA DESTE BLOCO (feitas) =====
   (a) SUBSTITUICAO: as sete regras antigas .proc, .proc h2, .proc__grid, .proc__grid h3,
       .proc__grid p, .proc__grid p b e .proc__grid .proc__n (linhas 320 a 326) sairam INTEIRAS.
       Conferido por grep: nao existe nenhuma outra referencia a .proc__grid no arquivo -- nem em
       media query, nem no JS.
   (b) APAGADO o token --fs-numeral:clamp(4rem, 2rem + 6vw, 7rem); do :root (linha 47). Conferido
       por grep: tinha 1 uso so, exatamente na regra do numeral que saiu. Token orfao numa escala
       tipografica e convite para alguem ressuscitar um numeral de 112px por acidente.
   NAO precisou mexer em mais nada: a linha compartilhada dos olhos dourados (".hero .eyebrow,
   .quote .eyebrow,.pf .eyebrow,.occ .eyebrow,...") fica intacta porque .proc .eyebrow tem regra
   propria, e o "section+section{border-top:1px rgba(201,162,75,.22)}" (lei de emenda da casa)
   tambem fica. */

/* ===== 8 POR QUE GARRAFA -- RECONSTRUCAO FOTOGRAFICA =====
   O QUE ESTAVA ERRADO, MEDIDO: 15 elementos, 0 midia, 4 elementos graficos (quatro fios de 1px) e
   97,349% da area sem tinta em 1440. A dobra que sustenta a tese do produto ("a garrafa vai junto")
   nunca mostrava a garrafa. Junto com isso: 264,18px (40,1%) de banda morta, um retangulo de
   510x316px com 0,0000% de tinta a direita da linha de display, orfao 2+1 em 303 larguras reais
   (569-871px, iPad retrato incluso), quarta trilha fantasma do auto-fit em 267 larguras, h3 em
   Cormorant com razao optica 1,148x sobre o paragrafo (o MESMO defeito que o bloco da .proc acima
   declara ter matado), nenhum H2 (os 3 H3 penduravam no H2 do processo) e 0,1138% de dourado.

   O QUE O DESENHO FAZ AGORA:
   (a) UMA FOTO POR COLUNA em 8:5. 1,60:1 nao e proporcao nova -- e a das 7 capas de colecao desta
       mesma pagina (1020x638). As tres colunas sao PARALELAS, entao a fileira custa UMA altura de
       foto, nao tres: 206,7px em 1440. Pago com a banda morta: padding-block 90->72 (o MESMO token
       da .proc, clamp(3.5rem,8vh,5rem)) e os dois vaos de 41,59 -> 30,6 e 41,4.
   (b) OS DOIS VAOS DEIXAM DE SER IGUAIS. Antes mediam 41,59px identicos, tratando "titulo->grade"
       (virada de assunto) e "grade->fecho" (coda) como a mesma juntura. Agora o fecho tem mais ar
       que a abertura, e e o ar que diz que aquilo fecha.
   (c) O FIO DE 1px CONTINUA, mas para de ser enfeite: ele e a borda de cima da foto, e a foto
       pendura nele. Cor de rgba(13,26,56,.14) (composta #D6D4D2, 1,336:1 -- reprovava o 3:1 de
       1.4.11) para --gold-ink #7F662F, MEDIDO nesta composicao, nao herdado. E o unico dourado que
       passa sobre creme (gold-500 mede 2,17:1 e reprova).
   (d) H2 + OLHO que a dobra nao tinha. O outline da pagina para de pendurar os 3 argumentos da
       garrafa como sub-itens do processo de fabrica. O olho leva ::before em gold-ink porque este
       e o PRIMEIRO .eyebrow da pagina em fundo creme: o gold-500 do fio base mede 2,17:1 aqui.
   (e) H3 EM CINZEL CAIXA-ALTA, nao em Cormorant 1,2rem -- a voz de etiqueta que a casa ja usa em
       .proc__passo h3, .cat__olho e .final__brand. Em Cormorant a altura-x era 7,411px contra
       6,454px do paragrafo (1,1483x, hierarquia nenhuma). A .why era o ultimo bolso do padrao
       condenado, encostado na secao que foi consertada.
   (f) 1 COLUNA ATE 759px, 3 DE 760px PARA CIMA. NUNCA 2. O auto-fit antigo partia o trio em 2+1 em
       303 larguras (52% da largura util vazia ao lado do terceiro cartao) e deixava a altura NAO
       monotonica: 871px rendia 776,3px e 872px rendia 652,0px -- 124,3px a menos por 1px a mais de
       tela. Some tambem a quarta trilha fantasma (o minmax(240px,1fr) com gap 32 batia em 1056px
       uteis, que e EXATAMENTE a largura util em 1440: o desenho rodava no fio da navalha).
       Varredura de 1 em 1px de 300 a 1920 depois do conserto: orfao 0, trilha fantasma 0, caixas
       desiguais 0, overflow horizontal 0. O porque do 760 (e nao 720) esta na @media, medido.
   (g) ABAIXO DE 760px A FOTO VIRA QUADRADO DE 96px AO LADO do h3+p. Nao e degradacao por gosto: e
       geometria. Em 390 as tres fotos empilhadas em 8:5 custariam 3x218,75+vaos = 704px (+82% de
       altura); o quadrado lateral cabe na altura que o bloco de texto ja ocupa e custa quase nada.
       Por isso o ensaio foi enquadrado com o assunto no quadrado central do master.
   (h) O FECHO SE MUDA PARA AS COLUNAS 2-3 em >=760px. A borda esquerda dele cai exatamente no
       inicio da 2a coluna (100%/3 + gap/3 -- conta fechada para 3 trilhas iguais), entao o vazio
       que sobra fica embaixo da primeira foto, em diagonal com o vazio a direita do titulo. Dois
       vazios gridados leem como composicao; um buraco de 17% da dobra num canto le como sobra.
   ACOPLAMENTO DECLARADO: --why-gap alimenta o column-gap da grade E a conta do recuo do fecho.
   Mudar o gap sem mudar os dois desalinha o fecho da coluna 2. */
.why{background:var(--cream);padding-block:clamp(3.5rem,8vh,5rem);--why-gap:32px}
/* PRIMEIRO olho em fundo creme da pagina: o texto ja vem certo da base (--gold-ink, 4,94:1), mas o
   fio de 24px da base e gold-500 = 2,17:1 sobre creme. Aqui ele acompanha o texto. */
.why .eyebrow::before{background:var(--gold-ink)}
.why__t{font-size:var(--fs-h2);line-height:1.1;color:var(--navy-900);
  max-width:30ch;text-wrap:balance;margin-top:.7rem}
.why__grid{display:grid;grid-template-columns:minmax(0,1fr);
  column-gap:var(--why-gap);row-gap:clamp(1.5rem,3.4vh,2rem);
  margin-top:clamp(1.9rem,3.4vh,2.4rem)}
.why__card{margin:0;display:grid;grid-template-columns:96px minmax(0,1fr);
  column-gap:.9rem;row-gap:.35rem;border-top:1px solid var(--gold-ink)}
/* aspect-ratio + width EXPLICITOS nos dois regimes: e o que reserva a caixa antes do byte chegar.
   A dobra comeca a 7,45 telas (1440) e 14,88 telas (390) da linha, entao as tres sao lazy e o
   custo de first paint e zero -- mas sem a caixa reservada tres fotos injetariam CLS numa dobra
   que hoje mede CLS 0. O background cream-600 e o que a caixa mostra enquanto (ou se) o arquivo
   nao chega: prato morno, nao buraco. object-position central porque o quadrado de 96px corta
   62,5% da largura do master -- o assunto foi enquadrado no meio por causa deste corte.

   display:block + overflow:hidden + min-height:0 NAO sao tres linhas de higiene: sao o conserto de
   uma quebra que eu MEDI com os tres arquivos fora do disco. Sem elas, a <img> quebrada continua
   sendo inline e o Chrome desenha o texto do ALT dentro da caixa: o alt transborda, entra nas
   linhas do cartao e a dobra vai de 812,69 para 942,59px em 1440 (+16,0%), empurrando o h3 do
   cartao 3 uns 100px abaixo dos outros dois. No celular e pior -- a <img> ali e ITEM DE GRADE, e
   item de grade tem min-height:auto, que e o tamanho do conteudo: os 96x96px viravam 96x757,27px e
   a dobra ia de 983,03 para 3.256,69px (+231%). overflow:hidden apara o alt dentro da caixa
   reservada, min-height:0 desarma o minimo automatico do item de grade, e display:block tira o
   alt do fluxo inline do cartao. O alt continua inteiro para o leitor de tela: quem perde e so o
   texto de cortesia que apareceria na tela de quem ja esta vendo um retangulo vazio. */
.why__foto{grid-column:1;grid-row:1/span 2;align-self:start;display:block;overflow:hidden;
  width:96px;height:auto;aspect-ratio:1/1;min-height:0;object-fit:cover;object-position:50% 50%;
  background:var(--cream-600)}
.why__card h3{grid-column:2;grid-row:1;margin:0;padding-top:.5rem;
  font-family:var(--font-brand);font-weight:700;font-size:.85rem;letter-spacing:.09em;
  text-transform:uppercase;line-height:1.2;color:var(--navy-900)}
.why__card p{grid-column:2;grid-row:2;margin:0;font-size:var(--fs-small);
  line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
.why__card p b{font-weight:700;color:var(--navy-900)}
/* balance, NAO pretty. O fecho antigo terminava com um toco de 227px (52,3% da maior linha) e a
   .proc__lead ja tem escrito no CSS que toco de 41% e defeito. Medi as duas saidas nesta caixa de
   693px (as colunas 2+3): com `pretty` as linhas sairam 690/690/135 -- toco de 19,6%, TRES VEZES
   pior que o defeito de origem, porque pretty so protege a ultima linha contra viuva de uma
   palavra, nao equilibra o bloco. `balance` reparte os mesmos 1.515px de tinta em tres linhas de
   ~505px. Serve aqui e nao no paragrafo dos cartoes porque balance vale so ate 6 linhas e o
   paragrafo passa disso em coluna estreita -- por isso o cartao ficou com pretty. */
/* O FECHO E UM TERMINADOR, NAO UM RODAPE. Tres coisas medidas mudaram nesta regra.
   1) FILETE. Os tres cartoes ABREM cada um com `border-top:1px solid var(--gold-ink)` (medido:
      1px rgb(127,102,47) nos tres). A colunata abria e nunca fechava. Um filete de mesma cor e
      mesma espessura, correndo a largura INTEIRA da grade, e o terminador horizontal -- que e
      exatamente o argumento ja escrito na .marca__fecho ("nao a medida do texto"). Custa 1px.
   2) FLUSH A ESQUERDA. O fecho ficava pendurado no inicio da 2a coluna. Medido em 1440: a tinta
      comecava em 554,7px, com 434,7px (36,2% do wrap) de creme vazio a esquerda -- e como
      `balance` so entinta 1.515px/3 = 525,8px, a caixa declarada de 693,3px (as colunas 2+3)
      ficava com 167,5px (24%) que nunca recebiam tinta. Alinhamento que so aparece de um lado
      nao le como alinhamento, le como recuo aleatorio: a borda esquerda batia no cartao 2 e a
      direita nao batia em nada. Agora comeca em 192px, junto do eyebrow, do h2 e do cartao 1, e
      quem responde pelas duas bordas e o filete.
   3) DUAS LINHAS, NAO TRES. Numero de linhas e medida sao a MESMA conta: 172 caracteres em 3
      linhas dao 57 por linha, em 2 linhas dao 86 -- nao ha ajuste de corpo que mude isso. Com a
      caixa passando de 693 para 1.056px (a grade inteira), 24px ainda caia em 3 linhas de 526px,
      ou 49,8% da grade entintada. Abrindo a fonte ate 1,75rem -- o mesmo teto de --fs-h3 que a
      .marca__fecho usa -- o bloco vai a 2 linhas de 842/899px = 85,1% da grade, rag de 57px.
      86 caracteres passa do teto de leitura corrida e passa DE PROPOSITO: isto e uma cartela de
      fecho de duas linhas em display italico, nao um paragrafo de leitura.
   A rampa `.35rem + 1.9vw` saiu de medicao, nao de arredondamento: e a menor que segura 2 linhas
   na faixa inteira de 760 a 1920px (760px:20,8px ... 1180px:28px) sem passar de 20,8px no
   celular -- 390 e 430px continuam com as mesmas 4 linhas de hoje, sem regressao nenhuma.
   O grifo <b> quebrava no meio ("A peca errada" / "vira gaveta") em 9 das 14 larguras medidas.
   Com 2 linhas ele fica inteiro sozinho, sem nenhum &nbsp;: sobra partido so em 600 e 700px, onde
   o bloco tem 3 linhas de qualquer jeito. Testei colar o grifo com &nbsp; nessas duas: conserta a
   quebra e joga o rag de 56 para 146px. Rag de 146px e mais visivel que grifo partido -- por isso
   o &nbsp; NAO entrou. `balance` continua: `pretty` foi medido aqui e deu 690/690/135. */
.why__close{margin-top:clamp(2.4rem,4.6vh,3rem);padding-top:1.3rem;
  border-top:1px solid var(--gold-ink);
  font-family:var(--font-head);font-style:italic;
  font-size:clamp(1.3rem,.35rem + 1.9vw,1.75rem);line-height:1.34;color:var(--ink-soft);
  max-width:none;text-wrap:balance}
/* ink-soft no corpo e navy-900 no grifo, MEDIDO: 8,49:1 e 15,54:1 sobre o creme -- os dois
   passam em AA com folga. Subir o corpo para navy-900 tambem passaria, mas deixaria o grifo sem
   para onde ir: sobraria so o peso 600 para diferenciar. Os dois niveis de tinta ficam. */
.why__close b{font-style:normal;font-weight:600;color:var(--navy-900)}

/* 760px, NAO 720px -- o mesmo criterio que a .proc usou para entrar em 4 colunas so em 1120px: o
   ponto de quebra e onde o TITULO cabe, nao onde as colunas caberiam. Medido de 2 em 2px de 720 a
   1920: de 720 a 746px "A CONSTRUCAO DECIDE, NAO O DESENHO." quebra em TRES linhas na coluna de
   194-203px, e as tres linhas nao caberiam na reserva de duas -- o paragrafo do cartao 3 descia
   16,32px e o trio perdia a fileira em 28 larguras. A partir de 748px ele volta a duas linhas;
   760px da 12px de folga sobre o limite medido. Custo da escolha: 720-759px (40 larguras: Surface
   Duo e janelas em meia tela) continuam em 1 coluna com a miniatura de 96px. iPad retrato (768,
   810, 834) fica DENTRO do regime de 3 fotos, que e o que importava. */
@media(min-width:760px){
  /* 3 trilhas EXPLICITAS. Nao ha auto-fit: um argumento de tres nao pode virar 2+1 sozinho. */
  .why__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* o cartao volta a fluxo de bloco: a foto passa a ser a primeira faixa da coluna, de largura
     cheia, e o fio de 1px vira a borda de cima dela. */
  .why__card{display:block}
  .why__foto{width:100%;aspect-ratio:8/5;margin-bottom:clamp(.8rem,1.6vh,1.1rem)}
  /* DUAS LINHAS RESERVADAS no titulo, e SO aqui: "A CONSTRUCAO DECIDE, NAO O DESENHO." mede ~332px
     de tinta em Cinzel caixa-alta e ocupa 2 linhas em toda a faixa de 3 colunas, enquanto "ELA TEM
     DONO." cabe em 1. Sem a reserva o paragrafo do cartao 1 comeca 16,32px acima dos outros dois e
     o trio perde a leitura de fileira -- que e a propriedade que a grade existe para transmitir.
     Nao entra na base porque em 1 coluna os cartoes estao EMPILHADOS: nao ha com o que alinhar, e
     a reserva la seria 16,32px de ar de graca no celular. */
  .why__card h3{padding-top:0;min-height:calc(2 * 1.2 * .85rem)}
  .why__card p{margin-top:.5rem}
  /* o fecho NAO tem regra aqui de proposito: ele corre a largura da grade nos dois regimes, e
     quem fecha a colunata dos tres cartoes e o filete de gold-ink no topo dele. A regra que
     morava aqui pendurava o fecho no inicio da 2a coluna com
     calc(100% / 3 + var(--why-gap) / 3) -- a medicao que a derrubou esta no bloco base. */
}

/* ---- .final: chapa de fecho (still + filme) ---------------------------------
   A classe .grid e um utilitario GLOBAL de repeat(12,1fr) e o override antigo
   so valia dentro de @media(min-width:1024px): abaixo disso a figure renderizava
   2x2px no celular e o botao dourado quebrava em duas linhas. Cinto e suspensorio
   aqui: a classe saiu do markup E a regra mata o grid, caso volte. -------------*/
.final .grid{display:block}
.final__cena{position:relative;margin:0 0 clamp(1.6rem,4vw,2.4rem);
  aspect-ratio:3/2;overflow:hidden;border-radius:2px;
  border:1px solid rgba(201,162,75,.62);
  background:var(--navy-800);isolation:isolate}
@media(min-width:900px){.final__cena{aspect-ratio:2/1}}
/* os dois planos tem a MESMA proporcao de master (3:2), o mesmo object-fit e o
   mesmo object-position: ficam registrados pixel a pixel e o cross-fade nao
   desloca a imagem. Por isso o video e codificado em 3:2 e quem corta pra 2:1
   no desktop e o CSS -- nas duas camadas ao mesmo tempo. */
.final__still,.final__film{position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover;object-position:50% 78%}
.final__film{opacity:0;transition:opacity 700ms ease-out;
  pointer-events:none;z-index:1}
.final__cena.film-on .final__film{opacity:1}
@media(prefers-reduced-motion:reduce){.final__film{display:none}}

/* Em coluna unica o max-width:24ch do h2 global rendia 321px -- MAIS ESTREITO que o
   proprio paragrafo (539px) e que o olho (609px). A hierarquia ficava invertida: o
   display quebrava em 3 linhas curtas num vao de 1056px. 46ch poe o h2 de volta como
   a maior medida da dobra (h2 > paragrafo > micro) e o balance iguala as linhas. */
.final h2{max-width:46ch;text-wrap:balance}

/* ---- .final: hierarquia e duas colunas -------------------------------------
   O h2 do FECHO usava --fs-h3 (28px) enquanto .quote/.cat/.proc/.why usam
   --fs-h2 (52px): o titulo que fecha a venda era o menor da pagina, empatado
   com o do FAQ. E o meu proprio comentario acima ("46ch poe o h2 como a maior
   medida") foi medido e e FALSO: text-wrap:balance devolvia 409px de tinta numa
   caixa de 614px. Trocado por pretty, que so trata a orfa.
   ARMADILHA DE ESPECIFICIDADE: `.final p` (0,1,1) vence `.final__micro` (0,1,0),
   entao o margin-top do micro nunca valeu. Por isso `.final p.final__micro`. */
.final p.final__brand{font-size:var(--fs-eyebrow);letter-spacing:.18em;margin-top:0}
.final h2{font-size:var(--fs-h2);max-width:none;text-wrap:pretty;margin-top:.75rem}
.final__col>div>p{margin-top:1.25rem;max-width:none}
.final p.final__micro{margin-top:1.25rem;max-width:46ch}
/* Em coluna unica a chapa de 528px empurrava o botao para 113px ABAIXO da borda
   da tela num 1440x900 (medido, com a barra fixa de 104px descontada): a foto e
   o CTA nunca apareciam juntos. Duas colunas resolvem e ainda ocupam a faixa
   morta da direita, que era 49,8% da caixa de conteudo. */
@media(min-width:1024px){
  .final__col{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
  .final__col>.final__cena{order:2;margin:0}
  .final__col>div{order:1}
}

/* ---- .final: chapa 4:5 unica nas duas larguras -----------------------------
   O fork (3/2 no celular, 2/1 no desktop) entregava o PIOR quadro para a MENOR
   tela: a faixa que so o celular via tinha 74% de pixels chapados, e o corpo da
   garrafa renderizava com 19px CSS. Uma caixa 4:5 sobre um master 3:2 corta so
   LARGURA (janela x 280..920 de 1200) -- conferi nos tres recortes candidatos e
   a mao sobrevive em todos, porque o braco atravessa a metade direita inteira.
   Corte identico nos dois planos, entao o cross-fade continua registrado. */
.final__cena{aspect-ratio:4/5}
@media(min-width:900px){.final__cena{aspect-ratio:4/5}}
.final__still,.final__film{object-position:50% 50%}

/* O filme agora nasce em 4:5 (mesma proporcao da chapa), entao o cover nao corta
   nada dele; o still continua 3:2 e e o cover que o recorta para a mesma janela
   central. Os dois planos mostram a mesma regiao -- conferido quadro a quadro. */
.final__film{object-fit:cover;object-position:50% 50%}

/* O still passou a ser 4:5 NATIVO (mesmo quadro que abre o filme, q22 do master),
   entao o cover nao corta mais nada de nenhum dos dois planos: os dois entram
   inteiros e batem pixel a pixel (NCC 0,9999). Antes o still era 3:2 e dependia
   do recorte do cover para casar com o filme. */
/* ===================== 10b · A MARCA ========================================
   Institucional entre .final (navy-900) e .faq (navy-800).

   FUNDO = --cream, por eliminacao: navy-900 empata com a .final logo acima,
   navy-800 empata com a .faq logo abaixo, e navy-850 e o tom da sequencia
   quiz->ocasioes->qualidade (alem de ser o fundo da .proc). Sobra o creme, que
   ainda entrega a alternancia de densidade do miolo: navy denso (CTA) -> creme
   aberto (institucional) -> navy denso (11 duvidas).

   EMENDA .34, nao .22: e a lei de casa para secao creme (linha 110,
   ".proof,.cat,.why"). Declarada aqui dentro porque `.marca` (0,1,0) ja vence
   `section+section` (0,0,2) -- assim a entrega e 100% insercao, sem editar
   linha nenhuma do arquivo. (Se preferir zero duplicacao do literal, o
   equivalente e trocar a linha 110 por ".proof,.cat,.why,.marca{...}" e apagar
   o border-top daqui.)

   CONTRASTE, medido nesta composicao (nao herdado):
     navy-900/creme 15,5:1 . ink-soft #3A4663/creme 8,5:1 . gold-ink/creme 4,9:1
     gold-500/creme 2,17:1 <- REPROVA, e por isso nao aparece em lugar nenhum
     desta secao. O token --hairline (rgba(201,162,75,.45)) tambem NAO e usado
     aqui: composto sobre creme ele da #E2CEA4 = 1,4:1, o filete sumiria. E a
     mesma licao que a .why ja documenta e resolveu trocando para --gold-ink.
     O token continua certo onde nasceu, sobre navy -- e nas linhas 445, 483,
     503 e 123 ele JA esta escrito na forma correta (`border-top:var(--hairline)`
     e `box-shadow:0 1px 0 var(--hairline-cor)`). Conferido: `1px solid
     var(--hairline)` tem 0 ocorrencias no arquivo. Nao ha nada a consertar. ---*/
.marca{background:var(--cream);border-top:1px solid rgba(201,162,75,.34);
  padding-block:0 clamp(3.5rem,8vh,5rem)}
/* OBRIGATORIO: a base `.eyebrow::before` traz o fio de 24px em gold-500, que
   sobre creme mede 2,17:1. Mesma correcao que `.why .eyebrow::before` faz.
   NAO acrescentar `.marca` a lista da linha 522 (aquela forca gold-500 e existe
   so para as secoes navy) nem a da 670 (gold-300, idem). */
.marca .eyebrow::before{background:var(--gold-ink)}

/* ---- A FAIXA ---------------------------------------------------------------
   ARQUIVO REAL, medido nos tres webp: 2048x994, 1280x621, 800x388 -- proporcao
   2,0604:1. O briefing dizia 2048x853 / 2,40:1 "com folga vertical": essa folga
   NAO existe. Toda a conta abaixo usa 2,0604.

   MAPA DO QUADRO (% do arquivo, lido na imagem):
     garrafa heroi ..... x 37..53   y 2..100  (tampa ~2..21, ombro conico ate
                                               ~41, corpo reto dai para baixo)
     cordao preto ...... x 30..44   y  0..49
     FUMACA ............ x 52..60   y  0..53
     FAISCA ............ x 51,3     y 64,1
     bico do laser ..... x 62,3     y 50,5   (o barril sai pelo canto sup. dir.)
     fileira + apoio ... x  0..37   y 72..99
   Nao ha gabarito de metal: a garrafa esta solta. O que sustenta a fileira e um
   perfil horizontal alaranjado que nao decide entre bancada e rack -- por isso
   o alt nao nomeia o apoio.

   A faixa e FULL-BLEED (a <figure> fica FORA da .wrap). Full-bleed porque uma
   foto contida viraria mais um cartao e empataria com a chapa 4:5 da .final
   logo acima; e porque colada no topo (padding-block-start:0) ela faz a propria
   transicao navy -> foto -> creme, com a emenda dourada de moldura.
   NUNCA resolver o full-bleed com `margin-inline:calc(50% - 50vw)`: 100vw
   inclui a barra de rolagem e devolve overflow horizontal. -------------------*/
.marca__faixa{margin:0}
.marca__quadro{position:relative;overflow:hidden;background:var(--navy-850)}
.marca__foto{width:100%;height:100%;object-fit:cover;object-position:50% 50%}

/* <640px -- PROPORCAO NATIVA DO ARQUIVO (2048/994). Corte ZERO: tampa, cordao,
   fumaca, faisca, cabecote e a fileira inteira sobrevivem, e a faixa continua
   sendo faixa (2,06:1 em 390px = 189px de altura). E o unico estado em que a
   foto que o dono mandou produzir aparece como foi enquadrada. */
.marca__quadro{aspect-ratio:3168/1344}

/* 640-1119px -- 10/3 = 3,333:1. Janela vertical de 61,8% do arquivo.
   Y=85% (e nao 100%): com Y=100% a janela comeca em 38,2% e o barril do laser
   vira um toco colado na borda de cima, com a fumaca inteira fora do quadro.
   Com Y=85% a janela e y 32,5..94,3%: o bico fica a 29% da altura da faixa, o
   barril entra inteiro, sobra fumaca acima da faisca, e a fileira segue apoiada
   na base (o apoio sangra 2,6 pontos por baixo, que e o que se quer).
   640px -> 192px de altura; 1119px -> 336px. */
@media(min-width:640px){
  .marca__quadro{aspect-ratio:10/3}
  .marca__foto{object-position:50% 38%}
}
/* >=1120px -- 4/1, o estado cheio, e o mesmo limiar em que o texto vira quatro
   colunas. Janela y 36,9..88,4%: o topo cai logo abaixo do fim do ombro (a
   garrafa vira uma coluna reta sangrando pelo topo -- corte deliberado, nao
   "tampa decepada"), o bico do laser fica a 26% da altura, a FAISCA a 53% e a
   fileira ocupa a faixa de baixo. 1120px -> 280px, 1440px -> 360px.
   SEM max-height de proposito: um teto de altura alarga a proporcao efetiva e
   empurra a janela para cima -- a 5:1 o bico do laser sai do quadro e o feixe
   perde a origem. Com a proporcao travada a composicao e a MESMA em qualquer
   largura; o que cresce em tela larga e so a altura em px. */
@media(min-width:1120px){
  .marca__quadro{aspect-ratio:4/1}
  .marca__foto{object-position:50% 32%}
}

/* ---- LEGENDA --------------------------------------------------------------
   Alinhada com o texto da secao pelo PROPRIO .wrap (linha 72), nao por uma
   copia dos tres valores dele -- se .wrap mudar, a legenda acompanha. O <span>
   e obrigatorio: <figcaption> precisa continuar filho direto de <figure> para
   manter o vinculo semantico com a imagem.
   Nao sobreposta na foto: sobrepor legenda e a forma da landing de canetas. */
.marca__cap{padding-top:.7rem;font-family:var(--font-head);font-style:italic;
  font-weight:500;font-size:var(--fs-small);line-height:1.45;color:var(--ink-soft)}
.marca__cap>.wrap{display:block}

/* ---- CABECALHO ------------------------------------------------------------
   Olho, h2 e linha de apoio entram como UMA unidade tipografica (um so delay):
   escalonar dentro dela criaria tres eventos onde ha um.
   --fs-h2 e nao --fs-h3: e secao de miolo, nao rodape de FAQ. `pretty` e nao
   `balance` -- a .final ja mediu que balance devolve tinta de menos. */
.marca__texto{padding-block-start:clamp(2.25rem,5vh,3.25rem)}
.marca__head h2{font-size:var(--fs-h2);max-width:22ch;text-wrap:pretty;margin-top:.7rem}
.marca__apoio{margin-top:1.1rem;max-width:56ch;font-size:var(--fs-lead);
  line-height:1.5;color:var(--ink-soft);text-wrap:pretty}

/* ---- AS QUATRO PARTES ------------------------------------------------------
   Friso partido por FILETES VERTICAIS, sem cartao, sem numeral, sem regua
   horizontal. Os tres "nao" sao deliberados e todos evitam empate com vizinho:
     - numeral + regua horizontal em quatro colunas e a assinatura da .proc, que
       tambem vira 4-up em 1120px;
     - cartao e a assinatura da .why e da .cat;
     - grade 2x2 com foto vertical a direita e a forma da landing de canetas --
       e o 2x2 nao acontece em largura nenhuma aqui, de proposito.
   Filete vertical nao existe em nenhuma outra linha do arquivo (todo divisor da
   casa e horizontal) e ainda rima com o que a foto tem de vertical: a garrafa
   em pe e a fileira em pe. */
.marca__quatro{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.6rem,3.4vh,2.1rem);margin-top:clamp(2rem,4.5vh,2.75rem)}
/* 62ch e teto de MEDIDA, nao decoracao: sem ele a linha empilhada iria a ~110
   caracteres. Vale so abaixo de 640px; dos 640 para cima quem limita e o teto de
   58ch do proprio paragrafo (e, no >=1120, a largura da coluna). */
.marca__parte{position:relative;padding-inline-start:1.25rem;max-width:62ch;margin:0}
/* filete como pseudo (e nao border-inline-start) porque BORDA NAO ANIMA -- este
   precisa se desenhar de cima para baixo. gold-ink CHAPADO: a mesma cor a 38%
   cairia para 1,7:1 e reprovaria o 3:1 de elemento grafico. */
.marca__parte::before{content:"";position:absolute;inset-block:.15em .1em;
  inset-inline-start:0;width:1px;background:var(--gold-ink)}

/* ARMADILHA DE ESPECIFICIDADE -- a mesma que a folha ja documenta em
   `.final p.final__micro`. O rotulo e um <span display:block>, NAO um <p>, e o
   paragrafo e mirado por `.marca__parte>p`. Com o rotulo em <p> e o seletor
   `.marca__parte p`, o paragrafo (0,1,1) venceria `.marca__rot` (0,1,0) e
   roubaria do rotulo o tamanho, a cor e, de 640 a 1119px, a PROPRIA CELULA DA
   GRADE -- o rotulo cairia em cima do texto.
   ESCALA: rotulo 11px Cinzel/.2em -- menor e mais espacado que o .eyebrow de
   13px/.18em, para haver hierarquia dentro do mesmo alfabeto. Texto 15px,
   abaixo do --fs-body de 17px porque em quatro colunas de ~230px o 17px daria
   ~26 caracteres por linha. h3 com escala propria: --fs-h3 (ate 28px) nessa
   coluna sairia em 4 linhas. */
.marca__rot{display:block;font-family:var(--font-brand);font-weight:700;
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-ink);line-height:1.3}
.marca__parte h3{margin-top:.5rem;font-weight:600;
  font-size:clamp(1.15rem,1.02rem + .4vw,1.4rem);line-height:1.16;
  text-wrap:balance}
.marca__parte>p{margin-top:.5rem;font-size:.9375rem;line-height:1.6;
  color:var(--ink-soft);text-wrap:pretty}
.marca__parte>p b{font-weight:700;color:var(--navy-900)}

/* 640-1119: rotulo AO LADO do titulo. Preenche a largura sem virar 2x2 e segura
   a medida em ~58ch. 8,5rem de minimo: com 7rem "A PARCERIA" quebrava em duas
   linhas em 900px. */
@media(min-width:640px) and (max-width:1119px){
  .marca__parte{display:grid;grid-template-columns:minmax(8.5rem,22%) minmax(0,1fr);
    column-gap:clamp(1.25rem,2.5vw,2rem);align-items:baseline;max-width:none}
  .marca__rot{grid-column:1;grid-row:1}
  .marca__parte h3{grid-column:2;grid-row:1;margin-top:0}
  .marca__parte>p{grid-column:2;grid-row:2;max-width:58ch}
}
/* 1120px e o mesmo limiar que a .proc mediu para caber quatro colunas. gap:0
   porque quem separa e o filete; o primeiro nao tem filete nem recuo, para o
   friso alinhar a esquerda com o h2. */
@media(min-width:1120px){
  .marca__quatro{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .marca__parte{max-width:none;padding-inline:clamp(1.25rem,2.2vw,2rem)}
  .marca__parte:first-child{padding-inline-start:0}
  .marca__parte:last-child{padding-inline-end:0}
  .marca__parte:first-child::before{display:none}
  /* DUAS LINHAS RESERVADAS no h3, e SO aqui -- mesmo conserto que
     `.why__card h3{min-height:...}` faz sete secoes acima. Sem isso, o titulo
     que couber em 1 linha empurra o paragrafo daquela coluna ~26px acima dos
     outros e o friso perde a leitura de FILEIRA, que e a propriedade que a
     grade existe para transmitir. Em `em` (e nao rem) porque o font-size do h3
     e clamp(): 2 linhas x 1,16 = 2,32em exatos em qualquer largura. */
  /* A reserva de 2 linhas existe para as quatro fotos nascerem no mesmo y. Mas com
     `min-height` puro o espaco sobra DEPOIS do titulo, e o titulo de 1 linha (partes
     1 e 4) fica flutuando longe da propria foto enquanto o de 2 linhas encosta nela.
     Colando o conteudo no fim da caixa, o espaco reservado passa a cair ACIMA, junto
     do rotulo, onde le como respiro -- e a foto nasce sempre logo abaixo da ultima
     linha do titulo, nas quatro. Mesma altura, buraco nenhum. */
  .marca__parte h3{min-height:2.32em;display:flex;align-items:flex-end}
}

/* ============================================================================
   INSERIR imediatamente ANTES do bloco "/* ---- FECHO ---" (hoje linha 1155).
   Zero biblioteca nova, zero fonte nova, zero cor fora dos tokens.
   Mais UMA emenda de uma palavra na linha 1104 (ver o fim deste bloco).
   ============================================================================

   ---- A CENA DE CADA PARTE --------------------------------------------------
   UMA foto por parte, mas a leitura tem de ser de UMA TIRA -- nao de quatro
   cartoes. Duas decisoes fazem isso, e as duas foram MEDIDAS no arquivo real
   (Chrome headless, .marca isolada, 1440/1120/900/640/500):

   1) A foto entra ENTRE o h3 e o paragrafo, NUNCA acima do rotulo. Cartao e
      caixa com imagem numa BORDA -- e todo cartao desta pagina (.why >=760px,
      .cat, .proc) poe imagem ou numeral no topo do bloco. Imagem com tipografia
      acima E abaixo nao e cartao: e paragrafo ilustrado. A .why fica 1.577,61px
      acima na MESMA rolagem (medi .why em 6.668,89 e .marca em 8.246,50) e ja e
      exatamente "foto de largura cheia no topo da coluna + Cinzel + paragrafo":
      repetir a forma aqui duplicaria o vizinho fotografico mais proximo.
      Ganho editorial de graca: rotulo -> afirmacao -> PROVA -> detalhe. E o
      proprio h2 da secao, "o que vem antes": o pensamento vem antes da imagem.

   2) A foto ocupa a TRILHA INTEIRA (264px em 1440, 252px em 1120), nao a caixa
      de texto. Com o gap:0 que a linha 1141 ja tem, as quatro encostam e formam
      uma faixa continua de 1.056px (1.008px em 1120) que comeca na margem
      esquerda do h2 e termina na direita do wrap. Medi os quatro topos: caem no
      MESMO y, sem regra nova, porque o rotulo tem altura fixa (14,3px) e a
      reserva de duas linhas do h3 (linha 1152) ja iguala o resto. Essa linha
      1152 passa a ser CARGA ESTRUTURAL da foto: nao pode ser removida.

   POR QUE O PADDING TROCOU DE DONO (>=1120) -- e o erro que estragaria a
   entrega, e e invisivel sem medir. O padding-inline morava na .marca__parte,
   mas :first-child e :last-child zeram o lado de fora: as quatro caixas de
   texto NAO tem a mesma largura. Medido: 232,32 / 200,64 / 200,64 / 232,32.
   Foto herdando essa caixa com aspect-ratio fixo sairia com DUAS alturas
   (232,32/1,5 = 154,88 e 200,64/1,5 = 133,76) e um degrau de 21,12px entre
   colunas vizinhas -- destruindo a leitura de FILEIRA que a reserva do h3
   existe para proteger, e de forma bem mais visivel que o h3. Movendo o padding
   para os filhos de TEXTO, re-medi a caixa de texto: 232,32 / 200,64 / 200,64 /
   232,32. IDENTICA, nem 1px de diferenca. E a foto passa a medir 264px nas
   quatro. (Sem :is() de proposito: o arquivo tem 0 ocorrencias dele.)

   O FILETE PARA NA FOTO sem calc e sem numero magico: a cena e
   position:relative + z-index:1 e simplesmente COBRE o fio na propria altura.
   Nao precisa partir o pseudo em ::before/::after, nao precisa calcular onde a
   foto comeca, e o motion nao muda UMA LINHA -- continua um so pseudo com um so
   transform:scaleY. O que se ve sao dois tiques dourados emoldurando a tira por
   cima e por baixo, com as fotos encostadas sem nada entre elas. E o gesto da
   propria faixa la em cima: o laser desce e marca.
   (gold-ink #7F662F sobre FOTO nao tem garantia de contraste nenhuma -- ele foi
   escolhido na linha 1102 para medir 3:1 contra CREME. Cobrir e mais correto
   que atravessar tambem por isso.)

   MOTION: as cenas sao filhas DIRETAS de .marca__parte, entao ja sao pegas por
   `.marca__parte>*` (linhas 1194/1238/1241) e entram no escalonamento de
   90ms/parte sem uma linha nova. O observador do JS (#marcaQuatro) nao muda.
   Como o filete entra 100ms ANTES do texto da propria parte, o fio se desenha
   inteiro e SO DEPOIS as fotos pousam em cima dele -- a coreografia melhora de
   graca.

   3:2 e a unica proporcao fotografica LIVRE no arquivo: 3/4 na .cat (linha
   566), 1/1 e 8/5 na .why (852, 886), 4/5 na .final (958) e 2,06/10:3/4:1 na
   faixa. O `aspect-ratio:3/2` da linha 908 e declaracao MORTA -- a 958
   sobrescreve com 4/5, e medi a .final__cena em 504x630.

   CLS: aspect-ratio + width/height explicitos + display:block + overflow:hidden
   + min-height:0 e a MESMA receita que a .why__foto documenta nas linhas
   834-853, e pelo mesmo motivo medido la: de 640 a 1119px estas <img> sao ITEM
   DE GRADE, e item de grade tem min-height:auto -- uma imagem quebrada viraria
   uma coluna de texto de alt e levaria a secao junto. cream-600 e o prato morno
   enquanto (ou se) o byte nao chega. lazy/async porque a secao esta a 8.246px
   da linha em 1440: custo de first paint zero.

   CUSTO VERTICAL MEDIDO (secao inteira, ja com a copy encurtada):
     1440   1.154,28 -> 1.247,88   (+93,60 . +8,1% da secao . +0,9% da pagina)
     1120   1.069,56 -> 1.155,16   (+85,60 . +8,0%)
      900   1.293,09 -> 1.426,91   (+133,82 . +10,3%)  e IGUALA as quatro alturas
      640   1.291,80 -> 1.252,80   (-39,00 . a secao ENCOLHE)
      500   1.414,78 -> 2.202,78   (+788,00 . +55,7% da secao, +4,4% da pagina)
   No celular quatro fotos custam rolagem e nao tem como nao custar: o unico
   corte honesto e a PROPORCAO (2:1, nao 3:2), nunca a contagem. --------------*/
.marca__cena{display:block;overflow:hidden;min-height:0;width:100%;height:auto;
  aspect-ratio:2/1;object-fit:cover;object-position:50% 46%;
  background:var(--cream-600);margin-top:.75rem;margin-bottom:.15rem;
  position:relative;z-index:1}

/* 640-1119px -- a foto vai para a celula VAZIA da grade, e sai de graca.
   A .marca__parte ja e grade de 2 colunas com posicao EXPLICITA para os tres
   filhos (rotulo 1/1, h3 2/1, paragrafo 2/2, linhas 1133-1135): a celula (1,2),
   embaixo do rotulo, esta livre desde sempre. Declarar grid-column/grid-row e
   OBRIGATORIO -- sem isso o auto-placement joga a <img> numa linha nova e a
   faixa inteira de 480 larguras desmonta.

   align-self:start NAO e higiene, e conserto de armadilha que eu MEDI: a linha
   1132 tem `align-items:baseline`, e a baseline de uma <img> e a borda de baixo
   dela. Sem align-self, o paragrafo desce para alinhar com a BASE da foto e
   cada parte engorda 55px -- medi 148,56 -> 203,56 nas quatro, +220px na secao,
   de ar puro e invisivel na revisao.

   Efeito colateral bom: em 900px as quatro partes passam a medir 148,56 IGUAIS
   (hoje sao 127,11 / 103,11 / 103,11 / 127,11). A foto CONSERTA a fileira nesse
   regime em vez de estraga-la.

   Colisao aceita e delimitada: de 640 a 759px a .why ainda esta em 1 coluna com
   miniatura de 96x96 A ESQUERDA do titulo, e aqui a foto fica na coluna do
   rotulo. Sao 120 larguras; a da .marca tem 173,8px, e 3:2 deitada e fica
   ABAIXO do rotulo, a da .why tem 96px, e quadrada e fica AO LADO do titulo.
   Custo registrado de proposito, no mesmo registro das linhas 877-879. */
@media(min-width:640px) and (max-width:1119px){
  .marca__cena{grid-column:1;grid-row:2;align-self:start;
    aspect-ratio:3/2;margin-top:.6rem;margin-bottom:0}
}

/* >=1120px -- a tira. O padding sai da parte e vai para o texto (ver acima). */
@media(min-width:1120px){
  .marca__cena{aspect-ratio:3/2;margin-top:.85rem;margin-bottom:.2rem}
  .marca__parte{padding-inline:0}
  .marca__rot,.marca__parte h3,.marca__parte>p{padding-inline:clamp(1.25rem,2.2vw,2rem)}
  .marca__parte:first-child .marca__rot,
  .marca__parte:first-child h3,
  .marca__parte:first-child>p{padding-inline-start:0}
  .marca__parte:last-child .marca__rot,
  .marca__parte:last-child h3,
  .marca__parte:last-child>p{padding-inline-end:0}
}

/* ============================================================================
   EMENDA DE UMA PALAVRA na linha 1104 -- `transform-origin:top` no filete.
   Nao e capricho: o comentario da linha 1232 diz que o filete "se desenha de
   cima para baixo" e que "o gesto do laser da foto e descer e marcar", mas
   transform-origin NUNCA foi declarado, entao o scaleY(0)->scaleY(1) cresce a
   partir do CENTRO. Hoje passa despercebido; com a foto no meio da coluna o
   centro do filete cai DENTRO da foto e o fio brotaria de tras dela para os
   dois lados. Com origin:top ele desce do topo, e engolido pela tira e
   reaparece embaixo -- que e exatamente o que o comentario descreve.

   DE:   inset-inline-start:0;width:1px;background:var(--gold-ink)}
   PARA: inset-inline-start:0;width:1px;background:var(--gold-ink);transform-origin:top}
   ============================================================================ */

/* ---- FECHO ----------------------------------------------------------------
   Italico Cormorant e o registro de fecho da casa (.why__close, .occ__head p).
   Filete em gold-ink pela razao medida la em cima, e correndo a LARGURA INTEIRA
   do conteudo (nao a medida do texto): ele e o terminador horizontal que fecha
   a colunata dos quatro filetes verticais, e ecoa a faixa la em cima.
   A tagline nao aparece em lugar nenhum do corpo da pagina hoje: esta e a
   primeira vez que ela e dita, e e a ultima palavra antes da FAQ. */
.marca__fecho{margin-top:clamp(2.25rem,5vh,3rem);padding-top:1.3rem;
  border-top:1px solid var(--gold-ink);
  font-family:var(--font-head);font-style:italic;font-weight:600;
  font-size:var(--fs-h3);line-height:1.25;color:var(--navy-900)}

/* ---- MOTION ================================================================
   ARQUITETURA (e a correcao mais importante desta versao): TUDO acima ja e o
   estado FINAL. Nada nasce escondido. Quem esconde e este unico bloco, e ele so
   entra quando as DUAS condicoes valem:
     (1) `@media (prefers-reduced-motion: no-preference)` -- quem pediu menos
         movimento nunca ve nem a cortina nem o fade, e nao ha um segundo bloco
         de `transition:none` para manter em sincronia;
     (2) `.js-marca` no <html>, marcado por um <script> de uma linha que vai
         JUNTO com o HTML da secao, portanto e executado pelo parser ANTES de a
         secao existir -- sem piscada.
   Se o JS nao rodar (CSP, extensao, erro em outro bloco, script apagado numa
   edicao futura), a classe nao existe, este bloco inteiro nao casa e a secao
   aparece pronta: foto visivel, h2, as quatro partes, os filetes e a tagline.
   `@media (scripting:none)` NAO resolveria isso -- ela so casa quando o
   NAVEGADOR desliga script, nao quando um script existente falha.
   Especificidade: esconder e `.js-marca .x` (0,2,0); revelar e `.marca.on .x`
   (0,3,0). Revelar ganha em qualquer ordem, sem !important.
   A cortina inteira (inclusive o `content`) vive aqui dentro: se o ::after
   existisse fora, em reduced-motion ele ficaria chapado de creme sobre a foto
   para sempre. --------------------------------------------------------------*/
@media (prefers-reduced-motion: no-preference){

  /* -- estado inicial (so com JS confirmado) -- */
  .js-marca .marca__foto{transform:scale(1.045)}
  .js-marca .marca__cap{opacity:0;transform:translateY(8px)}
  .js-marca .marca__head{opacity:0;transform:translateY(16px)}
  .js-marca .marca__parte::before{transform:scaleY(0)}
  .js-marca .marca__parte>*{opacity:0;transform:translateY(14px)}
  .js-marca .marca__fecho{opacity:0;transform:translateY(14px)}

  /* -- a cortina --------------------------------------------------------------
     Revelacao da ESQUERDA PARA A DIREITA, na ordem em que a foto conta a
     historia: primeiro a fila que espera, depois a peca e a faisca, por ultimo o
     cabecote. E um bloco CHAPADO da cor da secao com transform-origin:right e
     scaleX 1->0. So `transform`: roda no compositor e nao repinta o bitmap em
     nenhum quadro. (A .diff das canetas animava `filter` sobre a imagem, o que
     rasteriza a foto inteira a cada quadro.)
     A foto assenta de scale(1.045) ao repouso em 1200ms, entao o quadro "chega"
     enquanto e descoberto. 1,045 e escala curta de proposito: 1040 x 1,045 =
     1087px de demanda, abaixo dos 1280px do arquivo 1x -- nenhum quadro amplia
     acima da resolucao do arquivo, entao nao ha instante borrado.
     A cortina vive no .marca__quadro, NAO na <figure>: na figure cobriria a
     legenda tambem. */
  .js-marca .marca__quadro::after{content:"";position:absolute;inset:0;z-index:2;
    background:var(--cream);transform-origin:right;transform:scaleX(1);
    transition:transform 900ms cubic-bezier(.16,1,.3,1)}
  .marca.foto .marca__quadro::after{transform:scaleX(0)}
  .js-marca .marca__foto{transition:transform 1200ms cubic-bezier(.16,1,.3,1)}
  .marca.foto .marca__foto{transform:none}

  /* -- legenda: chega aos 480ms, com a cortina passada da metade -- */
  .js-marca .marca__cap{transition:opacity 520ms cubic-bezier(.16,1,.3,1) 480ms,
                                   transform 520ms cubic-bezier(.16,1,.3,1) 480ms}
  .marca.on .marca__cap{opacity:1;transform:none}

  /* -- cabecalho -- */
  .js-marca .marca__head{transition:opacity 600ms cubic-bezier(.16,1,.3,1) 320ms,
                                    transform 600ms cubic-bezier(.16,1,.3,1) 320ms}
  .marca.on .marca__head{opacity:1;transform:none}

  /* -- as quatro partes -------------------------------------------------------
     passo de 90ms entre partes: a sacada ocular entre colunas adjacentes numa
     linha de ~1040px e de 60-90ms. Abaixo disso o escalonamento nao e percebido
     (gasto sem retorno); acima de ~150ms vira fila e o leitor espera. A landing
     de canetas usou 70ms, mas era grade 2x2 -- percurso do olho menor.
     O filete entra 100ms ANTES do texto da propria parte: a regua se desenha e o
     texto pousa dentro dela -- e o gesto do laser da foto, que desce e marca.
     Coreografia do grupo: filetes 0-730 . textos 100-970 . fecho 460-1100.
     Curva .2,.7,.3,1 so no filete: traco desenhado precisa de miolo quase
     constante; expo-out faria o fio cair de uma vez e rastejar no fim. */
  .js-marca .marca__parte::before{transition:transform 460ms cubic-bezier(.2,.7,.3,1)}
  .js-marca .marca__parte>*{transition:opacity 600ms cubic-bezier(.16,1,.3,1),
                                       transform 600ms cubic-bezier(.16,1,.3,1)}
  .marca__quatro.on .marca__parte::before{transform:scaleY(1)}
  .marca__quatro.on .marca__parte>*{opacity:1;transform:none}
  .js-marca .marca__parte:nth-child(1)::before{transition-delay:0ms}
  .js-marca .marca__parte:nth-child(2)::before{transition-delay:90ms}
  .js-marca .marca__parte:nth-child(3)::before{transition-delay:180ms}
  .js-marca .marca__parte:nth-child(4)::before{transition-delay:270ms}
  .js-marca .marca__parte:nth-child(1)>*{transition-delay:100ms}
  .js-marca .marca__parte:nth-child(2)>*{transition-delay:190ms}
  .js-marca .marca__parte:nth-child(3)>*{transition-delay:280ms}
  .js-marca .marca__parte:nth-child(4)>*{transition-delay:370ms}

  /* -- fecho: entra aos 460ms, entre a ultima parte comecar (370) e terminar
     (970) -- no ritmo, mas atrasado o bastante para ser lido como outra voz. */
  .js-marca .marca__fecho{transition:opacity 640ms cubic-bezier(.16,1,.3,1) 460ms,
                                     transform 640ms cubic-bezier(.16,1,.3,1) 460ms}
  .marca__quatro.on~.marca__fecho{opacity:1;transform:none}
}
/* ===== EMENDA 2026-07-28 · CONSERTO DE LAYOUT ==============================
   Append-only, na convenção dos blocos .proc/.why/.marca: entra DEPOIS de tudo
   para não perder a cascata. Ordem interna importa (ver E2). */

/* E1 · A CAIXA DO HERO -----------------------------------------------------
   .hero era display:flex e a .hero>.wrap, como ITEM FLEX (flex:0 1 auto), nascia
   com a largura do CONTEUDO: o max-width:1200px + margin-inline:auto da linha 72
   nao estica item flex. Medido: 235px de coluna em 390 (60,2%) e 692px em 1330
   (52,0%, com 591px de sobra a direita). Quem guarda a altura da dobra passa a
   ser a propria .wrap. ACOPLAMENTO: o min(92vh,780px) abaixo e COPIA do
   min-height da linha 131 -- se um mudar, o outro muda junto. */
.hero{display:block}
.hero>.wrap{min-height:min(92vh,780px);display:flex;flex-direction:column;justify-content:center}

/* E2 · A FAIXA DE PROMESSAS ------------------------------------------------
   Ate 560px ela era `static` DENTRO de um .hero flex: virava irma flex da copy e
   roubava 155px da coluna. Entre 901 e 1349px ela e absoluta com 2 fileiras num
   hero mais alto que a dobra (23,4px dela ficavam cortados pela borda em 1330x720)
   -- e nao ha padding que resolva: caberia so com padding-bottom <=56,6px, e a
   faixa exige >=79,8px. Regra: absoluta so onde ela e UMA fileira e cabe inteira;
   no resto, banda em fluxo.
   z-index:3 NAO e enfeite: em fluxo sem posicionamento a faixa pinta ANTES do
   .hero__scrim (absoluto, z-index:1, inset:0) e o texto creme some. Medido por
   pixel a 390 com o filme no ar: pico de luminancia 55,7 com `static` contra
   243,3 com `relative;z-index:3`. */
@media(min-width:1350px) and (min-height:761px){
  .usp{position:absolute;inset:auto 0 0}   /* re-afirma a linha 150 num lugar so */
}
@media(max-width:1349px),(max-height:760px){
  .usp{position:relative;z-index:3;padding-block:.85rem}
  .hero>.wrap{padding-bottom:clamp(2.5rem,6vh,3.5rem)}
}
/* <=560: uma promessa por linha (em 4 colunas de 155px o texto quebrava em 3
   linhas e caia para 10,56px). O padding-block daqui TEM de vir depois do
   padding-bottom acima -- mesma especificidade, quem decide e a ordem. */
@media(max-width:560px){
  .hero>.wrap{min-height:0;padding-block:clamp(5rem,12vh,7rem) 1.25rem}
  /* o grid de 1 coluna era o remendo para 4 promessas longas; com 18-19
     caracteres a fileira e unica e a esteira devolve ~75px de dobra. */
  .usp{letter-spacing:.08em}
}

/* E3 · SCRIM NO CELULAR ----------------------------------------------------
   O scrim no ar e o horizontal do desktop (protege so o terco esquerdo). Com a
   copy voltando a ocupar a largura toda, ela cai na metade clara do quadro:
   medido antes, no pior quadro, olho 1,85 / H1 2,62 / sub 1,73 / micro 1,03:1.
   Gradiente vertical medido: olho 7,51 / H1 10,55 / sub 7,45 / micro 7,66:1.
   (O token --scrim-hero das linhas 52-65 existe e NUNCA e usado -- codigo morto;
   nao mexa nele agora, o .hero__scrim da linha 626 escreve o proprio gradiente.) */
@media(max-width:1023px){
  .hero__scrim{background:linear-gradient(180deg,rgba(13,26,56,.90) 0%,
               rgba(13,26,56,.82) 50%,rgba(13,26,56,.88) 100%)}
  .hero__micro{color:rgba(247,243,236,.86)}
  .hero .eyebrow{color:var(--gold-300)}
}

/* E4 · CATALOGO: as trilhas do mosaico nao podem vazar para 1 coluna --------
   `.cat__card:nth-child(3)` (0,2,0) vencia `.cat__card` (0,1,0) da linha 590:
   `grid-column:span 2` sobrevivia dentro de uma grade de UMA trilha. Medido:
   cartoes 3 a 7 com 19,2px de largura de 320 a ~520px, 142-145px de conteudo
   decepado por overflow:hidden. `>` + `:nth-child(n)` da (0,3,0) e ganha sempre.
   `auto` (e nao 1/-1) porque a mesma regra tem de servir a grade de 2 colunas
   do tablet, logo abaixo. */
@media(max-width:1023px){
  .cat__grid>.cat__card:nth-child(n),.cat__grid>.cat__cta:nth-child(n){grid-column:auto}
  /* 4 miniaturas em todo cartao: a regra de 3 colunas existe por causa do tile
     estreito do mosaico e vira arbitraria fora dele (no tablet ficavam 4 de 65,9px
     ao lado de 3 de 91,2px na mesma fileira). */
  .cat__card:nth-child(n+3) .cat__thumbs{grid-template-columns:repeat(4,1fr)}
  .cat__card:nth-child(n+3) .cat__thumbs li:nth-child(4){display:list-item}
}
/* TABLET: com 1 coluna a faixa 768-1023 deixava 45% a 59% da tela vazia e a secao
   ia a 6.5k-6.8k px, mais que o dobro do desktop. */
@media(min-width:768px) and (max-width:1023px){
  .cat__grid{grid-template-columns:repeat(2,1fr)}
  .cat__grid>.cat__card:nth-child(n),.cat__grid>.cat__cta:nth-child(n){
    max-width:none;width:auto;margin-inline:0}
}
/* MOSAICO (>=1024): no tile estreito cai a DUPLICATA da capa, nao o 4o modelo
   novo -- a 1a miniatura repetia o modelo da capa em 7 dos 7 cartoes, sob um
   rotulo que diz "Outros modelos". Mesma especificidade da linha 595 (0,4,1):
   quem decide e a ordem, entao a linha 595 fica onde esta. */
@media(min-width:1024px){
  .cat__card:nth-child(n+3) .cat__thumbs li:nth-child(4){display:list-item}
  .cat__card:nth-child(n+3) .cat__thumbs li:nth-child(1){display:none}
}

/* E5 · PISO DE 12px --------------------------------------------------------
   A regra da casa e 12px no celular. No catalogo o piso vale em TODA largura:
   e o codigo que o comprador dita no telefone, e a .62rem ele sai a 9,92px
   inclusive no desktop. Medido a 1024/1330/1440 com o piso ligado: 0 legenda
   decepada, 0 transbordo, +35,7px de altura na secao. */
.cat__thumbs figcaption{font-size:12px;letter-spacing:.02em}
.cat__selo i{font-size:12px;letter-spacing:.1em}
.cat__mais .cat__selo{font-size:16px}   /* (0,2,0): so assim vence a linha 554 */
.cat__mais span{font-size:12px}
.cat__olho{font-size:12px}
.cat__af{font-size:12px}
.cat__cta b{font-size:12px}
@media(max-width:1023px){
  .pf__q b,.marca__rot,.occ__cta,.quote label,.faq__todas,.foot b{font-size:12px}
}

/* E6 · ALVOS DE TOQUE ------------------------------------------------------
   Os 7 .cat__link mediam 28,0px e o .cat__cta a media 24,3px. No .cat__link a
   margem negativa de baixo preserva o `margin-top:auto` que ancora o link no pe
   do cartao; no tile de CTA ela NAO entra (comia o padding do tile: folga
   inferior caia de 23,4 para 12,4px contra 22-32px em cima). */
@media(max-width:1023px){
  .cat__link{display:inline-flex;align-items:center;min-height:44px;
             padding-top:11px;padding-bottom:11px;margin-bottom:-11px}
  .cat__cta a{display:inline-flex;align-items:center;min-height:44px;
              padding-top:11px;padding-bottom:11px}
  .foot .grid>div>a{display:inline-flex;align-items:center;min-height:44px}
}
/* a 360/375 a nav quebrava em duas linhas e ocupava 115,5px -- ela e fixed, entao
   isso e tela TAPADA: o olho do hero comeca em y=80. Medido depois: 66,6px. */
@media(max-width:640px){
  .nav .wrap{padding-block:.55rem}
  .nav__logo img{height:44px}
  .nav .btn{padding:.8rem 1rem;font-size:.8125rem;letter-spacing:.05em}
}
html{scroll-padding-top:clamp(112px,14vh,132px)}
/* os 3 links do menu ficavam a 11,52px -- o unico texto abaixo do piso de 12px que sobrou
   depois da emenda. So aparecem >=900px; a nav continua em uma linha (medido). */
@media(min-width:900px){.nav__menu a{font-size:12px}}

/* E7 · DOURADO SOBRE FUNDO CLARO -------------------------------------------
   #C9A24B sobre creme = 2,17:1 e reprova AA -- as linhas 520-521 ja escrevem
   isso. Tres pontos escaparam. #7F662F da 4,94:1 sobre #F7F3EC e 5,37:1 sobre
   #FFFDF8. Escopo restrito: .proof__title tambem vive sobre navy, e la o
   gold-500 passa e fica. */
.proof .proof__title{color:var(--gold-ink)}
.occ__card .occ__cta{color:var(--gold-ink)}

/* E8 · SELETOR DE COR ------------------------------------------------------
   A linha 420 devolve `position:static`, mas `translate:-50% 0` da linha 381 e
   propriedade autonoma e continua valendo. Com o .pf__palco em place-items:center
   o cartao era centrado e depois arrastado meia largura para a esquerda: left
   medido de -150px (320) a 0 (680) -- 3 dos 4 botoes de 44px fora da viewport. */
@media(max-width:1099px){
  .pf__q--cor{translate:none;left:auto;right:auto;width:100%;
              grid-template-columns:minmax(0,1fr);gap:12px;padding:12px}
  .pf__cores{grid-template-columns:repeat(4,44px);justify-content:start}
}

/* E9 · ETIQUETA DE MATERIAL NO OLHO (acrescimo 1 de 2) ---------------------- */
.cat__olho i{font-style:normal;color:var(--gold-ink);margin-left:.55rem;
  padding-left:.55rem;border-left:1px solid rgba(201,162,75,.5)}

/* E10 · A PECA ANCORADA NO CELULAR (360-520px) -----------------------------
   No desktop cada etiqueta fica ancorada na parte da peca que ela descreve, com
   um fio dourado apontando. Ate 1099px isso virava pilha e a relacao espacial
   morria. A descoberta que destrava: a SILHUETA ocupa so 31% da largura do
   quadro (corpo em x=248..471 de 720, medido nos 4 mp4 de cor); os outros 69%
   sao fundo. Encostando a silhueta em x=12 e deixando a caixa vazar para
   -123,6px, o vazio vira coluna de etiquetas sem custar um pixel da peca -- que
   ainda CRESCE, de 60-84px (hoje varia com a ALTURA do telefone) para 122px
   fixos, e a secao encurta 28,6%.
   DEPENDE de .pf{overflow:hidden} (linha 332): sem ele, rolagem lateral.
   TEM de ficar depois do bloco 426 e do E8 (1551): e a ordem que decide.
   So top/left/right levam !important -- eles vivem no atributo style= de cada
   <p>, e estilo inline vence folha.
   Piso de 360px: a 344 o cartao 0 ja colide 2px com o 1, e a 320 colidem 4.
   De 320 a 359, e de 521 a 1099, fica a pilha de hoje, sem tocar. */
@media(min-width:360px) and (max-width:520px){
  .pf{--pf-h:700px;--pf-w:calc(var(--pf-h)*.5625);--pf-x0:12px;--pf-lc:154px;--pf-ri:14px}

  /* palco sangra ate as bordas da tela; o seletor de cor vai para a linha 2 */
  .pf__palco{margin-inline:calc(-1*var(--pf-pad));width:calc(100% + 2*var(--pf-pad));
             min-height:0;padding-bottom:0;justify-items:start;align-items:start;row-gap:28px}

  /* max-width:none e obrigatorio: a linha 72 (img,video{max-width:100%})
     esmaga a caixa para 360 e 375px e desloca todas as ancoras de y.
     0.344444 = 248/720 = borda esquerda do corpo no quadro. */
  .pf__peca{height:var(--pf-h);width:auto;max-width:none;
            margin-left:calc(var(--pf-x0) - 0.344444*var(--pf-w))}

  /* as 5 etiquetas voltam a ser absolutas, em coluna unica a direita da peca.
     background-color OPACO: a chapa translucida foi desenhada para viver sobre
     navy chapado; deitada sobre o video o rotulo dourado caia para 3,1:1 e
     mudava a cada quadro do giro. Opaca: 8,6:1 no rotulo e 11,0:1 no texto.
     margin-top:0 mata os .6rem da linha 426, que valem tambem em absoluto. */
  .pf__q:not(.pf__q--cor){position:absolute;left:var(--pf-lc)!important;right:var(--pf-ri)!important;
      width:auto;max-width:none;margin-top:0;min-height:72px;pointer-events:none;
      grid-template-columns:48px 1fr;gap:8px;padding:12px;
      font-size:13.5px;line-height:1.35;background-color:var(--navy-900)}
  .pf__lupa{width:48px;height:48px}

  /* fio e seta: [data-lado] e (0,2,0) -- so assim vencem as linhas 378-383 sem
     !important (com !important o fio ressuscitaria no seletor de cor, onde a
     linha 388 o desligou de proposito). Saida a 35/36px do topo = CENTRO DA
     LUPA: nao anda quando o texto quebra mais uma linha.
     --fio-m e novo: o --fio antigo fica NEGATIVO abaixo de ~990px e serve so
     o desktop -- largura negativa e aparada para 0 e a seta entra no cartao. */
  .pf__q[data-lado]::after,.pf__q[data-lado]::before{display:block}
  .pf__q[data-lado]::after{left:auto;right:100%;top:35px;width:var(--fio-m);
      transform-origin:100% 50%;transform:rotate(var(--ang-m,0deg))}
  .pf__q[data-lado]::before{left:auto;right:100%;top:36px;margin-top:-5px;
      border-left:0;border-right:9px solid var(--gold-500);transform-origin:100% 50%;
      transform:rotate(var(--ang-m,0deg)) translateX(calc(9px - var(--fio-m)))}
  .pf__q--cor[data-lado]::after,.pf__q--cor[data-lado]::before{display:none}

  /* ancoras em fracao da ALTURA da peca: 0,1875 alca | 0,3125 tampa |
     0,5114 e 0,6857 corpo | 0,8930 base. As de 0/1/4 sao as autorais do
     desktop (K do style inline x 0,5625). As duas do corpo empatavam em 0,625
     la porque ficam em lados opostos; aqui vem as duas da direita e tiveram de
     se separar -- seguem dentro do corpo medido (0,45 a 0,88).
     Fio e angulo sao constantes: garrafa e coluna estao travadas em px.
     Os dois primeiros inclinam porque alca e tampa distam so 0,125 da altura,
     e nao ha altura de video que faca dois cartoes legiveis caberem nesse vao
     com fio reto a 360px. */
  .pf__q[data-i="0"]{top:81.0px!important;--fio-m:85.0px;--ang-m:-8.96deg}
  .pf__q[data-i="1"]{top:195.0px!important;--fio-m:59.7px;--ang-m:12.83deg}
  .pf__q[data-i="2"]{top:321.0px!important;--fio-m:38.7px;--ang-m:0.00deg}
  .pf__q[data-i="3"]{top:443.0px!important;--fio-m:55.0px;--ang-m:0.00deg}
  .pf__q[data-i="4"]{top:588.1px!important;--fio-m:38.1px;--ang-m:0.00deg}

  /* seletor de cor: fica no fluxo, linha 2 da grade, alinhado com o .wrap.
     Nao aponta pedaco nenhum da peca -- por isso e o unico sem fio.
     TEM de estar depois do E8 (linha 1551), senao o E8 devolve width:100%. */
  .pf__q--cor{position:static;width:calc(100% - 2*var(--pf-pad));margin:0 var(--pf-pad);
      grid-template-columns:minmax(0,1fr);gap:12px;padding:12px;min-height:0}
  .pf__cores{grid-template-columns:repeat(4,44px);justify-content:start}
}

/* E11 · HEADER NO CELULAR: DUAS ANCORAS E UMA REGUA (360-640px) ------------
   O QUE ESTAVA MEDIDO ANTES (headless, viewport real):
   - o bloco util da barra tinha largura FIXA de 267,5px em TODA a faixa
     360-520, entao 96,2% de cada pixel de tela a mais virava vazio a direita:
     72,6px a 360 e 226,6px a 520 (42,8% da propria medida da .wrap). No
     desktop esta MESMA nav justifica exato, de x=192 a x=1248.
   - a altura da barra tinha trocado de dono: desktop 104px = logo 72 + 16x2
     (a marca manda); celular 66,6px = botao 49 + 8,8x2, com o logo a 44px --
     5px MENOR que o botao.
   - o vao entre marca e botao media 17,7px e o padding INTERNO do botao media
     16px: 10,6% de diferenca, que o olho nao resolve. Por proximidade os dois
     liam como um objeto so, e a marca ficava mais perto do botao (17,7px) do
     que da borda da tela (25,5px).
   - chapa dourada 195,9x49 = 9.604px2 contra 260,3px2 de tinta real da marca =
     36,90:1 no celular contra 22,07:1 no desktop.

   ESTA EMENDA NAO ACRESCENTA ELEMENTO E NAO TOCA NO MARKUP. Faz cinco coisas:
   1) devolve a segunda ancora -- o botao encosta na margem direita da .wrap,
      exatamente como a mesma nav ja faz no desktop;
   2) devolve a altura para a marca -- logo 54px contra botao 46px;
   3) casa as duas alturas OPTICAS -- a tinta do lockup ocupa 199 de 232px do
      PNG (85,78%), entao a 54px ela mede 46,32px e o botao mede 46,00px;
   4) poe uma REGUA de 1px no vao -- flex:1, entao ela come 100% de cada pixel
      de tela a mais em vez de o vazio ir para fora do desenho;
   5) torna o .stuck visivel -- em rgba(...,.45) o fio media 2,37:1 contra o
      hero e a mudanca de estado era imperceptivel nos ~740px em que ocorre.

   O -6,75px do logo alinha a TINTA (nao a caixa) com a margem da pagina: o PNG
   tem 29px de transparencia a esquerda de 293 de largura, e 29/232 = 1/8 --
   entao a compensacao e sempre ALTURA / 8. A 54px de altura da 6,75px.
   Sem isso a tinta comecava em x=25,5 e o eyebrow do hero, 19px abaixo, em
   x=20: um degrau de 5,5px na linha de margem da pagina.

   PISO DE 360px, como o E10 ja faz: de 320 a 359 nada muda. Medido -- a 320 a
   caixa util e 280px e logo(61,44 efetivos) + 2 gaps(24) + botao(191,88)
   fecham 277,32, com 2,68px de folga: margem de 1% nao e margem.

   VENCE POR ORDEM, sem !important: a linha 118 (52px) e a 1532 (44px) sao o
   mesmo seletor com a mesma especificidade, entao quem manda e a ultima da
   folha. Este bloco TEM de ficar colado no fim da folha, depois do E10 -- se
   subir, a altura do logo volta a 44px e a emenda quebra pela metade.
   env(safe-area-inset-top) resolve 0px hoje (nao ha viewport-fit=cover em
   lugar nenhum da pagina): a linha nao muda um pixel agora e existe para o dia
   em que alguem ligar o cover e o filme sangrar. */
@media(min-width:360px) and (max-width:640px){

  /* a barra passa a ser medida pelo logo: 54 + 8x2 = 70px (era botao 49 +
     8,8x2 = 66,6). gap de 12px (era 16) para a regua nascer com corpo ja a 360. */
  .nav .wrap{padding-block:8px;gap:12px;
             padding-top:max(8px,env(safe-area-inset-top,0px))}

  /* flex:0 0 auto mata o esmagamento do lockup no zoom de texto: a img tem
     height fixo e width:auto, entao encolher a caixa DEFORMA a marca -- medido
     24% a 150% e 52% a 200%. `order` e obrigatorio: a regua e um ::after e,
     sem order, nasceria DEPOIS do botao. */
  .nav__logo{order:1;flex:0 0 auto;margin-inline-start:-6.75px}   /* = 54/8 */
  .nav__logo img{height:54px}

  /* A REGUA. Nao carrega informacao, entao reordenar por `order` nao mexe na
     ordem de leitura nem na de foco (a nav segue com 2 paradas de tabulacao).
     flex:1 1 0 + min-width:0 = ela absorve TODO o ganho de largura. E o mesmo
     fio de 1px dourado que a folha ja usa nas juntas de seccao (linhas 110-111)
     e no pe da .stuck: --hairline-cor, sem cor nova. */
  .nav .wrap::after{content:"";order:2;flex:1 1 0;min-width:0;
                    align-self:center;height:1px;
                    background:var(--hairline-cor)}

  /* A SEGUNDA ANCORA. min-height em vez de padding vertical: assim 46px e um
     PISO, nao um acidente de line-height -- so com padding o botao caia para
     45,4px, a 1,4px do minimo de toque, e qualquer mexida futura em
     font-size/line-height o derrubaria. margin-inline-start:auto e redundante
     com a regua (flex:1 nao deixa folga sobrando) e fica de proposito: se
     alguem apagar a regua, o botao continua na margem direita.
     flex:0 1 auto (e NAO 0 0 auto) e obrigatorio, medido: com o encolhimento
     travado, a 150% de zoom de texto o botao mede 286,8px e sua borda direita
     cai em x=402 numa tela de 360 -- o rotulo sai da tela e some (WCAG 1.4.4).
     Deixando encolher, ele quebra em duas linhas e a barra cresce, que e
     exatamente o que a barra de hoje ja faz. A regua encolhe antes de tudo
     (base 0), entao no zoom ela some primeiro e o botao fica com a largura. */
  /* CALIBRAGEM DE TAMANHO (medida, nao estimada). A chapa ocupava 60,0% da
     FAIXA UTIL a 360 e 54,8% a 390 -- faixa util = viewport menos as margens de
     20px, que e a grade em que o desenho vive; contra o viewport cheio o numero
     sai menor e engana. O corte que importa e a inversao: no desktop
     botao/regua = 0,42 (o vazio comanda e a chapa e pontuacao); a 390 era 2,64.
     Padding 14->10px e entreletra .05->.03em levam a chapa de 191,9 para 178,7px
     (60,0->55,8% a 360 e 54,8->51,0% a 390) SEM mexer na fonte de 13px, que a
     lente de ergonomia defendeu com numero: em caixa alta ela poe 8,37px de
     tinta contra 6,45px do corpo de 14px, ou seja 29,8% MAIS do que o piso de
     14px protege. Descer para 12px compraria so mais 3,4 pontos e custaria isso.
     O ALVO DE 40% NAO E ALCANCAVEL POR CSS: dos 191,9px originais, 161,9 sao
     texto. Medido, so o rotulo fecha a conta -- "Meu orcamento" da 136,4px
     (39,0% a 390) e com este padding 128,4px (40,1/38,3/36,7/33,2%). Fica para
     decisao do dono, porque e copy.
     min-height:46px continua sendo PISO de toque, nao acidente de line-height. */
  .nav .btn{order:3;flex:0 1 auto;margin-inline-start:auto;
            display:inline-flex;align-items:center;justify-content:center;
            min-height:46px;padding:0 .625rem;line-height:1.2;
            font-size:.8125rem;letter-spacing:.03em}

  /* O ESTADO ARMADO. A placa .94 da linha 127 mede 1,13:1 contra o hero: quem
     tem de carregar a mudanca de estado e o fio, e a .45 ele saia a 2,37:1.
     Em .78 da 4,56:1 contra o hero e 4,88:1 contra a propria placa (amostrado
     no render a DPR 3: o fio sai (161,133,73)) -- passa com folga o piso de
     3:1 de componente de interface (WCAG 1.4.11) e a barra finalmente descola
     do hero. So no celular: o desktop segue com --hairline-cor intacto. */
  .nav.stuck{box-shadow:0 1px 0 rgba(201,162,75,.78)}

  /* 70px de barra nao pedem os 112-118px da linha 1535: sobravam 45,4px (360)
     e 51,6px (390) de tela morta em CADA uma das 26 ancoras para #orcamento.
     70 + 14 de folga = 84. */
  html{scroll-padding-top:84px}
}

/* E12 · O HERO NO CELULAR: DIETA, NAO AMPUTACAO (ate 560px) ----------------
   O dono disse "poluida". A medicao diz onde: a 360x640 o olho (64,3), o titulo
   (137,3) e o subtitulo (248) somam 449,6px de 640 -- 70,3% da primeira tela e
   caixa de texto -- e o subtitulo sozinho tem 1,81x a ALTURA do h1 e 1,77x a
   TINTA dele (pixels acesos no render, limiar fundo+45: 39.272 contra 22.164).
   A peca da pagina era o TERCEIRO objeto em massa da tela. E o bloco de CTA caia
   ABAIXO da dobra nos tres telefones mais comuns: base em 719,0 numa tela util
   de 640 (-79,0), em 688,0 numa de 553 (-135,0) e em 666,6 numa de 664 (-2,6).

   ESTE BLOCO NAO TIRA UM ELEMENTO, NAO MUDA NADA DE ORDEM E NAO TOCA EM UMA
   LETRA. So encolhe corpo, entrelinha, margem e altura de botao. O h1 fica
   INTACTO em 44px: e por isso que a hierarquia se inverte de volta sozinha
   (sub/h1 em altura 1,81 -> 1,01; em tinta 1,77 -> 1,19) sem o titulo ganhar
   um pixel.

   MEDIDO (headless, iframe na altura util real, base do .hero__ctas):
                base do CTA        sobra ate a dobra
     320x568   764,8 -> 623,1     -196,8 -> -55,1   (a unica que segue fora)
     344x600   719,0 -> 536,7     -119,0 -> +63,3
     360x640   719,0 -> 537,5      -79,0 -> +102,5
     375x553   688,0 -> 536,7     -135,0 -> +16,3   (a tela que manda)
     390x664   666,6 -> 517,2       -2,6 -> +146,8
     402x694   669,9 -> 520,8      +24,1 -> +173,2
     412x735   643,8 -> 525,7      +91,2 -> +209,3
     430x752   645,8 -> 527,8     +106,2 -> +224,2
   Hero a 360: 959,3 -> 740,2 (-22,8%). Texto corrido antes do 1o botao:
   507,1 -> 355,1 (-30,0%). Tinta do subtitulo: -32,5%. Zero transbordo
   horizontal nas 16 telas medidas. Menor fonte 12px, menor alvo 48px.
   DE 561px PARA CIMA NADA MUDA -- medido a 561, 600, 640, 1024, 1330 e 1440:
   base do CTA, altura do hero e tamanho dos botoes IDENTICOS ate a decima.

   SEM PISO DE 360, ao contrario do E10 e do E11: eles recortam a PECA e a NAV;
   este recorta o TEXTO, e a faixa 320-359 e a que mais sofre. Medido, incluir
   ela custa zero e paga (344x600 sai de -119,0 para +63,3). TETO EM 560 e nao
   640: de 561 para cima a .hero__peca volta, a .usp vira fileira e o min-height
   do wrap deixa de ser letra morta -- e outro desenho.
   Sem !important: nao ha style= inline em no nenhum do hero e este bloco vence
   por ORDEM. Por isso TEM de ser o ultimo da folha. */
@media(max-width:560px){

  /* O topo e um cofre com 10px dentro: a .nav e fixed com 70px e o olho comeca
     em y=80. Baixando o PISO para 4,75rem (76px) sobram 6px de folga e os
     aparelhos grandes nao perdem nada, porque 12vh e 7rem seguem intactos.
     NAO desca abaixo de 4,75rem: a 70px o olho encosta na barra. */
  .hero>.wrap{padding-top:clamp(4.75rem,12vh,7rem)}

  /* Em 13px/.18em ele quebrava em TRES linhas a 360 e 375 -- 64,3px, 47% da
     altura do h1 -- e fazia trabalho de titulo. A 12px/.06em cabe em DUAS
     (34,8px). 12px e o piso da casa, nao um pixel abaixo. UMA linha nao e
     alcancavel por CSS: medido com white-space:nowrap, os 50 caracteres pedem
     443px (411 de texto + fio 20 + gap 12) contra uma coluna de 320px -- o teto
     e ~35 caracteres, e isso e copy. O margin-bottom e o unico gasto do bloco:
     paga um vao que era 0,0px medido (olho e titulo colados liam como um
     titulo unico de 5-6 linhas), e a entrelinha 1,65 -> 1,45 o devolve. */
  .hero .eyebrow{font-size:12px;letter-spacing:.06em;line-height:1.45;margin-bottom:.35rem}

  /* Medido, a largura do ::before hoje: 13,5px a 360, 14,2 a 375, 14,8 a 390,
     16,5 a 430 -- quatro larguras para o mesmo desenho, porque o fio e item
     flex sem base e cede quando o texto nao cabe. flex:0 0 20px trava, e 20px e
     a proporcao certa para um rotulo de 12px. Conferido: com o fio travado o
     olho CONTINUA em 2 linhas nas seis telas -- nao volta para 3. */
  .hero .eyebrow::before{flex:0 0 20px;width:20px}

  /* 248 -> 139,1px a 360 e 375 (8 e 7 linhas -> 6) e 217 -> 115,9 a 390 (7 -> 5).
     Nada e cortado nem escondido: os 263 caracteres seguem inteiros no DOM, na
     tela, no leitor de tela e no indice do Google -- offsetHeight == scrollHeight
     nas seis telas. Nada de line-clamp: renderizado, ele corta no meio da
     palavra e ainda deixa o texto invisivel na arvore.
     16px e o corpo padrao de leitura no celular, 4px acima do piso da casa. A
     16px o paragrafo passa a dever 4,5:1 de contraste (a 20px era "texto
     grande" e devia so 3:1): o E3 mediu 7,45:1 com o filme no ar e a amostragem
     no render sem filme deu 12,17:1 -- passa nos dois criterios. Nenhuma cor
     muda aqui; quem mexer na opacidade do .hero__scrim refaz esta conta. */
  .hero__sub{font-size:16px;line-height:1.45;margin-top:1rem}

  /* Eles ja empilhavam (518px de botoes numa coluna de 320 a 387), mas com
     larguras diferentes: 261,8 e 241,6, um degrau de 20,2px na borda direita
     que o olho le como erro de alinhamento. Em coluna esticada nascem na mesma
     margem: 320px a 360, 335 a 375, 387 a 430. Custo medido na dobra: 0,0px.
     O max-width nao morde telefone nenhum (a maior largura util e 387px a 430);
     ele existe para a chapa nao virar uma barra de 504px na faixa 540-560. */
  .hero__ctas{margin-top:1.4rem;gap:.6rem;flex-direction:column;flex-wrap:nowrap;
              align-items:stretch;max-width:26rem}

  /* Os dois botoes nunca tinham sido tocados no celular: seguiam com padding e
     corpo de desktop, 58,8px de altura. 48px continua 4px ACIMA do minimo de
     toque de 44 e 2px acima da chapa da propria nav (46px, E11) -- a hierarquia
     entre a ancora do hero e a do header fica escrita na altura.
     min-height (e nao padding) porque assim 48 e um PISO: com padding, qualquer
     mexida futura em corpo ou entrelinha derruba o alvo sem avisar. Medido: o
     rotulo mais longo continua em UMA linha em todas as telas (altura exata de
     48,0px). `.hero__ctas .btn` (0,2,0) e obrigatorio: `.btn` cru pegaria os
     outros 25 botoes da pagina. */
  .hero__ctas .btn{display:flex;align-items:center;justify-content:center;
                   min-height:48px;padding:.55rem 1rem;line-height:1.2}

  /* AVISO A QUEM COBRAR NUMERO: micro e .usp vivem ABAIXO do bloco de CTA e
     rendem 0,0px de dobra nas seis telas (medido). Estao aqui so para o hero
     cair de 959,3 para 740,2px a 360. Efeito colateral bom e medido: a 360 o
     micro-texto entra acima da dobra pela primeira vez (base 805,9 -> 594,8
     numa tela de 640). A .usp segue com 12px, o piso da casa -- so o respiro
     interno dela encolhe. */
  .hero__micro{font-size:13px;margin-top:.9rem}
  .usp{padding-block:.75rem}
}
/* ===== E13 · O FORMULARIO DE ORCAMENTO NO CELULAR =========================
   O dono disse "distorcido". A medicao diz que nao e distorcao: os quatro campos
   tinham altura IDENTICA em 360/390/430/768/1280 (56,23 / 56,23 / 50,19 / 56,23).
   O que quebra e:
   (a) INCOERENCIA ENTRE IRMAOS -- os campos 3 e 4 leem como campo porque tem
       texto dentro ("SIPAT e saude", "pode estimar") e os 1 e 2 eram 56px de
       vazio sobre um fio de 1,83:1, MAIS FRACO que o dourado 2,17:1 que esta
       casa ja proibiu;
   (b) ORDEM -- ancorando em #orcamento com scroll-padding 84px, o 1o campo
       nascia a 731-752px do topo da secao: FICA FORA da primeira tela num
       iPhone SE (375x667) e num Android de 360x640. Medido nos quatro.
   ESTE BLOCO TEM DE SER O ULTIMO DA FOLHA: `.quote__painel input` e
   `.quote input` (linha 367) tem a MESMA especificidade (0,1,1), e
   `.quote__painel label` empata com `.quote label`. Media query nao soma
   especificidade. Quem vem depois manda. Nenhum !important. */
:root{--erro:#A4231C}

/* 1 · A ORDEM. display:contents dissolve a .quote__intro e promove os filhos dela
   a itens do proprio .quote__grid (ja e 1 coluna abaixo de 1000px), o que permite
   ordenar sem tocar em UMA linha de marcacao. Acima de 1000px a regra nem existe:
   o sticky da .quote__intro e as duas colunas seguem intactos. */
@media(max-width:999px){
  .quote__grid{gap:0;margin-top:1.4rem}
  .quote__intro{display:contents}
  .quote .eyebrow{order:1}
  .quote__intro h2{order:2}
  .quote__painel{order:3;margin-top:1.4rem}
  .quote__lead{order:4;margin-top:1rem}
  .quote__lead:first-of-type{margin-top:2rem}
}

/* 2 · O CAMPO VIRA CAIXA. O poco #FFFDF8 fica a 1,09:1 do painel creme -- ele NAO
   e o que faz a caixa existir, e substrato: quem carrega o limite e a borda de
   4 lados. rgba(13,26,56,.6) sobre o creme = 4,42:1 contra o painel (piso da
   1.4.11 e 3:1; era 1,83:1). #FFFDF8 nao e token novo: ja e o fundo do .occ__card.
   min-height e NAO height: altura fixa decepa o texto no zoom de 200% (WCAG 1.4.4).
   17px e obrigatorio: abaixo de 16 o Safari do iOS da zoom ao focar.
   O defeito da altura era o line-height 1,65 herdado do body -- 1,35 e leading de
   campo, e com appearance:none + min-height zera o degrau de 6px do <select>. */
.quote__painel{padding:clamp(1.25rem,5vw,2.6rem)}
.quote__painel>h3{margin-top:0}
.quote form{margin-top:1.4rem;gap:18px}
.quote__painel label{display:block;font-size:13px;letter-spacing:.08em;line-height:1.3;
  text-transform:uppercase;font-weight:700;color:var(--navy-900)}
.quote__painel label i{text-transform:none;letter-spacing:normal;font-weight:400;font-style:normal;
  font-size:12px;color:var(--ink-soft);margin-inline-start:.5em}
.quote__painel input,.quote__painel select{
  width:100%;min-height:52px;margin-top:7px;padding:12px 14px;
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.35;
  color:var(--navy-900);background:#FFFDF8;
  border:1px solid rgba(13,26,56,.6);border-radius:2px;
  -webkit-appearance:none;appearance:none}
.quote__painel input::placeholder{color:#5F687C;opacity:1}

/* 3 · O SELECT. Chevron em navy-900, nao em dourado: o painel ja gastava quatro
   eventos de dourado e chevron e UI, nao acento. O :has() faz o select vazio ler
   como placeholder e nao como resposta dada. CSS nativo, sem lib. */
.quote__painel select{padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%230D1A38' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
.quote__painel select:has(option[value=""]:checked){color:#5F687C}

/* 4 · O FOCO. O anel de hoje e gold-500 sobre creme = 2,17:1, o numero que esta
   casa proibiu, dentro do unico ponto de conversao da pagina. navy-900 da 15,54:1.
   :focus nos campos e :focus-visible no botao de proposito: :focus-visible nao
   casa em <select> aberto por toque. Nos outros botoes dourados o anel navy
   precisa de halo creme, senao sobre a secao navy o indicador some. */
.quote__painel input:focus,.quote__painel select:focus,
.quote__painel button:focus-visible{
  outline:3px solid var(--navy-900);outline-offset:2px;border-color:var(--navy-900)}
.btn--gold:focus-visible{outline:3px solid var(--navy-900);outline-offset:0;
  box-shadow:0 0 0 6px var(--cream)}

/* 5 · AUTOFILL. So inputs. O select FICA DE FORA: a sombra interna pinta acima do
   background-image e abaixo da borda -- com ele na lista, os 100px de inset
   apagariam o chevron. -webkit-text-fill-color e obrigatorio. */
.quote__painel input:-webkit-autofill,.quote__painel input:-webkit-autofill:hover,
.quote__painel input:-webkit-autofill:focus,.quote__painel input:-webkit-autofill:active{
  -webkit-box-shadow:inset 0 0 0 100px #FFFDF8;box-shadow:inset 0 0 0 100px #FFFDF8;
  -webkit-text-fill-color:var(--navy-900);caret-color:var(--navy-900)}

/* 6 · O ERRO. --erro:#A4231C e token novo (a casa nao tinha cor de erro): 6,70:1
   sobre o painel creme. O no existe SEMPRE e so o texto muda -- e assim que
   role="alert" anuncia com confianca; :empty zera a margem, nunca display:none. */
.quote__err{margin-top:6px;font-size:13px;line-height:1.35;font-family:var(--font-body);
  font-weight:700;font-style:normal;letter-spacing:0;text-transform:none;color:var(--erro)}
.quote__err:empty{margin-top:0}
.quote__painel [aria-invalid="true"]{border-color:var(--erro);border-width:2px}
.quote__painel [aria-invalid="true"]:focus{border-color:var(--erro)}

/* 7 · O BOTAO. min-height + flex, o mesmo padrao do .nav .btn, e nao padding
   engordado. 56px fica 4px acima dos campos de 52: hierarquia legivel. */
.quote__painel .btn--gold{display:flex;align-items:center;justify-content:center;width:100%;
  min-height:56px;padding:.9rem 1rem;line-height:1.2;margin-top:.5rem}

/* 8 · O REASSEGURO sai do Cormorant italico para o corpo: a 14px, italico de
   serifa e o texto menos legivel do painel -- e e justo ele que desarma a objecao. */
.quote__re{font-family:var(--font-body);font-style:normal;margin-top:0}

/* 9 · A BARRA FIXA PARA DE VAZAR. Uma linha, zero JS. O fantasma do texto da
   secao por tras da barra media 1,15:1 e passa a 1,00:1. O fio de estado
   box-shadow da linha da .stuck continua intacto: esta regra toca SO background. */
.nav.stuck{background:var(--navy-900)}