/* === 01-tokens.css === */
/* ==========================================================================
   1. TOKENS — design-guide.md da Palladio é a fonte de verdade
   ========================================================================== */

@font-face{
  font-family:'Mireka';
  src:url(/fonts/Mireka-400.woff2) format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Mireka';
  src:url(/fonts/Mireka-400-italic.woff2) format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url(/fonts/Inter.woff2) format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* paleta oficial */
  --ink:#101D22;
  --slate:#223740;
  --vicenza:#5C7780;
  --marmo:#C2C4BF;
  --carta:#F2EFE8;
  --travertino:#BFAE97;

  /* Base da emenda do véu. Fica ABAIXO do Ink de propósito: Ink puro mede
     0,0116 de luminância e o alvo da emenda é ≤0,005 (guia, seção 11). */
  --veu-emenda:#080F13;

  /* texto sobre escuro */
  --on-dark:#F2EFE8;
  --on-dark-soft:rgba(242,239,232,.76);
  --on-dark-mute:rgba(242,239,232,.60);   /* piso pra passar AA em label de 11px */
  --line-dark:rgba(242,239,232,.14);
  --line-dark-strong:rgba(242,239,232,.28);

  /* texto sobre claro */
  --on-light:#101D22;
  --on-light-soft:rgba(16,29,34,.78);
  --on-light-mute:rgba(16,29,34,.66);     /* piso pra passar AA em label de 11px */
  --line-light:rgba(16,29,34,.14);
  --line-light-strong:rgba(16,29,34,.26);

  /* papéis correntes, trocados por superfície em 02-base.css */
  --fg:var(--on-light);
  --fg-soft:var(--on-light-soft);
  --fg-mute:var(--on-light-mute);
  --bg:var(--carta);
  --line:var(--line-light);
  --line-strong:var(--line-light-strong);

  /* tipografia */
  --display:'Mireka','Didot',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;

  /* escala: título é sempre caps com tracking aberto */
  --t-display:clamp(3.4rem,9vw,10rem);
  --t-h1:clamp(2.25rem,5.4vw,4rem);
  --t-h2:clamp(1.75rem,3.6vw,2.75rem);
  --t-h3:clamp(1.25rem,2.2vw,1.75rem);
  --t-body:clamp(1rem,.42vw + .92rem,1.0625rem);
  --t-lead:clamp(1.0625rem,.6vw + .95rem,1.25rem);
  --t-small:.875rem;
  --t-label:.6875rem;

  /* espaço: grid base 8 */
  --gap:1.5rem;
  --pad:clamp(1.25rem,4vw,2rem);
  --sec:clamp(4.5rem,9vw,8.75rem);      /* respiro vertical de seção */
  --sec-lg:clamp(6rem,13vw,12rem);      /* seções que precisam de silêncio */
  --max:1200px;
  --max-wide:1560px;
  --max-read:60ch;

  /* raio: chanfro constante, teto de 16px */
  --r-xs:2px; --r-sm:6px; --r-md:10px; --r-lg:14px;

  /* movimento */
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:200ms;
  --t-base:400ms;
  --t-reveal:700ms;
  --t-cross:1200ms;

  --hdr-h:76px;
}

@media (min-width:860px){ :root{ --hdr-h:88px; } }


/* === 02-base.css === */
/* ==========================================================================
   2. BASE, SUPERFÍCIES E TEXTURA
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
/* [hidden] tem que ganhar de qualquer display de classe: senão um overlay
   invisível (lightbox, menu) continua capturando o clique da página inteira. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--carta);
  color:var(--on-light);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;            /* nenhum overflow horizontal acidental */
}
img,picture,svg,video{display:block;max-width:100%}
.logo{max-width:none}
img{height:auto;background:var(--marmo)}
button{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}

::selection{background:var(--travertino);color:var(--ink)}

/* Foco visível em tudo que recebe teclado, nas duas superfícies. */
:focus-visible{
  outline:2px solid var(--vicenza);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
.s--ink :focus-visible,.s--slate :focus-visible,.menu :focus-visible,.ftr :focus-visible{
  outline-color:var(--travertino);
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--carta);
  padding:14px 20px;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:12px;top:12px}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Nome acessível de elemento que é desenho na tela (a marca do hero). */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   Superfícies. Duas oficiais (Carta e Ink) mais Slate como profundidade.
   Nada 100% liso: cada superfície leva grão de papel muito baixo.
   -------------------------------------------------------------------------- */

.s{position:relative;isolation:isolate}

.s--carta{background:var(--carta);color:var(--on-light)}
.s--ink{background:var(--ink);color:var(--on-dark)}
.s--slate{background:var(--slate);color:var(--on-dark)}

.s--ink,.s--slate,.ftr{
  --fg:var(--on-dark); --fg-soft:var(--on-dark-soft); --fg-mute:var(--on-dark-mute);
  --line:var(--line-dark); --line-strong:var(--line-dark-strong);
}
.s--carta{
  --fg:var(--on-light); --fg-soft:var(--on-light-soft); --fg-mute:var(--on-light-mute);
  --line:var(--line-light); --line-strong:var(--line-light-strong);
}

/* Grão: materialidade, não ruído. Fica fora das fotos do trabalho. */
.s::before,.ftr::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);
  background-size:220px 220px;
  opacity:.05;
  mix-blend-mode:multiply;
}
.s--ink::before,.s--slate::before,.ftr::before{opacity:.09;mix-blend-mode:soft-light}
.s > *,.ftr > *{position:relative;z-index:1}

:root{
  --grain:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap--wide{max-width:var(--max-wide)}
.wrap--read{max-width:calc(var(--max-read) + var(--pad) * 2)}

.pad-y{padding-block:var(--sec)}
.pad-y-lg{padding-block:var(--sec-lg)}
.pad-t{padding-top:var(--sec)}
.pad-b{padding-bottom:var(--sec)}

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */

.headline{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.045em;
  line-height:1.08;
  text-wrap:balance;
  font-size:var(--t-h2);
}
.headline--display{font-size:var(--t-display);letter-spacing:.02em;line-height:1.02}
.headline--h1{font-size:var(--t-h1);letter-spacing:.04em}
.headline--h3{font-size:var(--t-h3);letter-spacing:.06em}

.eyebrow{
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg-mute);
  margin-bottom:1.5rem;
}

.body{color:var(--fg-soft);max-width:var(--max-read);text-wrap:pretty}
.body p + p{margin-top:1.1em}

/* Ritmo vertical entre as peças de uma seção. */
.headline + .body,.headline + .rule,.headline + .terms{margin-top:1.5rem}
.body + .rule,.body + .terms{margin-top:1.75rem}
.rule + .body{margin-top:1.5rem}
.actions + .rule,.actions + .body{margin-top:2.25rem}
.body--lead{font-size:var(--t-lead);color:var(--fg)}
.body--wide{max-width:72ch}

.rule{
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg-mute);
  display:flex;flex-wrap:wrap;align-items:center;gap:.75em;
}
.lozenge{font-size:.7em;opacity:.7;transform:translateY(-1px)}

.sig{
  font-size:var(--t-label);letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg-mute);
}

/* --------------------------------------------------------------------------
   Botões — sem seta, sem pill, sem lift
   -------------------------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:15px 30px;
  border-radius:var(--r-md);
  border:1px solid transparent;
  font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  text-align:center;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
  cursor:pointer;
}
.btn--primary{background:var(--ink);color:var(--carta);border-color:var(--ink)}
.btn--primary:hover{background:transparent;color:var(--ink)}

.btn--solid-light{background:var(--carta);color:var(--ink);border-color:var(--carta)}
.btn--solid-light:hover{background:transparent;color:var(--carta)}

.btn--ghost{background:transparent;color:currentColor;border-color:currentColor}
/* Mesmo cuidado do .rail__btn: currentColor no background resolve contra a cor
   trocada logo abaixo e apaga o botao inteiro. Preencher com --fg, explicito. */
.btn--ghost:hover{background:var(--fg);border-color:var(--fg)}
.s--carta .btn--ghost:hover{color:var(--carta)}
.s--ink .btn--ghost:hover,.s--slate .btn--ghost:hover,.ftr .btn--ghost:hover{color:var(--ink)}

.btn--foil{background:var(--travertino);color:var(--ink);border-color:var(--travertino)}
.btn--foil:hover{background:transparent;color:var(--travertino)}

.btn--line{
  background:transparent;border-color:currentColor;
  min-height:42px;padding:10px 20px;font-size:12px;
}
/* O header tem tres estados de superficie e o preenchimento segue o texto de
   cada um (o --fg do header vem do 03-chrome). Sobre hero escuro preenche
   claro; no header claro preenche escuro. */
.btn--line:hover{background:var(--fg);border-color:var(--fg)}
.hdr--over-dark .btn--line:hover{color:var(--ink)}
.hdr:not(.hdr--over-dark) .btn--line:hover{color:var(--carta)}

/* Dado pendente do cliente: aparece, não finge ser link. */
.is-pending{cursor:default}
.btn.is-pending{opacity:.72}
a.is-pending,span.is-pending{text-decoration:none}

.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.5rem}

/* --------------------------------------------------------------------------
   Toque: alvo de 48px e resposta imediata ao dedo
   O guia pede alvo ≥48px e :active em tudo que se toca. Fica sob
   `pointer:coarse` pra não inchar a interface no desktop.
   -------------------------------------------------------------------------- */
@media (pointer:coarse){
  .burger,.rail__btn,.filter,.cmp__tab,.lb__close,.lb__prev,.lb__next{
    min-height:48px;min-width:48px;
  }
  .hdr__brand,.skip{display:flex;align-items:center;min-height:48px}
  .ftr__nav a,.ftr__line,.menu__group a,.menu__line{
    display:flex;align-items:center;min-height:48px;
  }
  .ftr__lines,.ftr__nav{gap:0}

  /* :active sem transform — o guia proíbe deslocar botão. */
  .btn:active,.filter:active,.rail__btn:active,.cmp__tab:active,
  .lb__close:active,.lb__prev:active,.lb__next:active{filter:brightness(.90)}
  a:active{opacity:.8}
  .tipo:active .tipo__ph img,.cross:active .cross__ph img{filter:brightness(.84)}
  .idx__row:active,.route-line:active{background:rgba(242,239,232,.05)}
}

/* --------------------------------------------------------------------------
   Reveal — opacidade + 16px, nada além disso
   -------------------------------------------------------------------------- */

.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--t-reveal) var(--ease) var(--d,0ms),transform var(--t-reveal) var(--ease) var(--d,0ms)}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
}


/* === 03-chrome.css === */
/* ==========================================================================
   3. HEADER, MENU E FOOTER
   ========================================================================== */

.logo{width:100%;height:auto;color:currentColor;fill:currentColor}

.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  height:var(--hdr-h);
  color:var(--on-light);
  background:var(--carta);
  border-bottom:1px solid var(--line-light);
  transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
/* Sobre hero escuro o header é transparente e vira Ink quando gruda. */
.hdr{--fg:var(--on-light)}
.hdr--over-dark{--fg:var(--on-dark)}
.hdr--over-dark{background:transparent;border-bottom-color:transparent;color:var(--on-dark)}
.hdr--over-dark.is-stuck{background:var(--ink);border-bottom-color:var(--line-dark);color:var(--on-dark)}
.hdr:not(.hdr--over-dark).is-stuck{background:var(--carta)}

/* Mesma coluna do conteudo e do rodape (--max, nao --max-wide): o logo tem que
   nascer na vertical exata onde comeca o texto da pagina, senao o header parece
   descentralizado mesmo estando simetrico na janela. */
.hdr__in{
  height:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);
}
.hdr__brand{display:block;flex:0 0 auto}
.logo--hdr{width:clamp(122px,13vw,168px)}

.nav{margin-inline-start:auto}
.nav__list{display:flex;align-items:center;gap:clamp(1.25rem,2.4vw,2.5rem)}
.nav__item{position:relative}
.nav__link{
  display:inline-block;padding:.5rem 0;
  background:none;border:0;
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:currentColor;opacity:.64;
  transition:opacity var(--t-fast) var(--ease);
  cursor:pointer;
}
.nav__link:hover,.nav__link.is-current{opacity:1}
.nav__link.is-current{position:relative}
.nav__link.is-current::after{
  content:'';position:absolute;left:0;right:0;bottom:.15rem;height:1px;background:currentColor;opacity:.5;
}
.nav__toggle::after{content:'◆';font-size:.55em;margin-left:.7em;opacity:.55;transform:translateY(-2px);display:inline-block;transition:opacity var(--t-fast)}
.nav__toggle[aria-expanded="true"]::after{opacity:1}

/* Dropdown: sombra só aqui, porque é elemento que flutua de verdade. */
.nav__menu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:250px;padding:.5rem 0;
  background:var(--ink);color:var(--on-dark);
  border:1px solid var(--line-dark);border-radius:var(--r-md);
  box-shadow:0 24px 60px rgba(16,29,34,.35);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),visibility var(--t-fast);
}
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu,
.nav__menu.is-open{opacity:1;visibility:visible;transform:translateX(-50%)}
.nav__sub{
  display:block;padding:.85rem 1.5rem;
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:rgba(242,239,232,.7);
  transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.nav__sub:hover,.nav__sub.is-current{color:var(--carta);background:rgba(242,239,232,.06)}

.hdr__call{flex:0 0 auto}

.burger{
  display:none;
  width:44px;height:44px;margin-inline-start:auto;margin-inline-end:-8px;
  background:none;border:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.burger span{display:block;width:22px;height:1px;background:currentColor;transition:transform var(--t-base) var(--ease),opacity var(--t-base) var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

@media (max-width:959px){
  .nav,.hdr__call{display:none}
  .burger{display:flex}
}

/* Menu de celular: página inteira em Ink, não uma gaveta. */
.menu{
  position:fixed;inset:0;z-index:99;
  background:var(--ink);color:var(--on-dark);
  padding:calc(var(--hdr-h) + 2rem) var(--pad) calc(2rem + env(safe-area-inset-bottom));
  overflow-y:auto;
  opacity:0;transition:opacity var(--t-base) var(--ease);
}
.menu.is-open{opacity:1}
.menu__in{display:flex;flex-direction:column;min-height:100%;gap:3rem;justify-content:space-between}
.menu__list{display:flex;flex-direction:column;gap:.35rem}
.menu__list > li > a,.menu__label{
  display:block;padding:.45rem 0;
  font-family:var(--display);font-size:clamp(1.75rem,7vw,2.5rem);
  text-transform:uppercase;letter-spacing:.05em;text-decoration:none;line-height:1.1;
}
.menu__group{padding-block:.5rem}
.menu__label{color:var(--on-dark-mute);font-size:clamp(1.5rem,5.5vw,2rem)}
.menu__group ul{display:flex;flex-direction:column;gap:.15rem;padding-left:1rem;border-left:1px solid var(--line-dark);margin-top:.4rem}
.menu__group a{
  display:block;padding:.5rem 0;
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--on-dark-soft);
}
.menu__group a:hover{color:var(--carta)}
.menu__foot{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start;padding-top:2rem;border-top:1px solid var(--line-dark)}
.menu__lines{display:flex;flex-direction:column;gap:.4rem}
.menu__line{font-size:var(--t-small);color:var(--on-dark-soft);text-decoration:none}
body.menu-open{overflow:hidden}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* O ciano institucional tem material próprio: uma madeira tingida no tom da
   marca (guia, seção 7 "A textura padrão do ciano"). Ela é Ink com veio, não
   uma cor nova — média #14242C, entre Ink 950 e Slate 800. A COR FICA
   EMBAIXO: se a imagem falhar, o rodapé continua Ink. */
.ftr{
  position:relative;isolation:isolate;
  background:
    url(/img/superficie-ink-madeira.584a547b.webp) center/cover no-repeat,
    var(--ink);
  color:var(--on-dark);
  padding-top:clamp(4rem,9vw,7rem);
  overflow:hidden;
}
/* Uma textura por superfície: onde a madeira entra, o grão de ruído sai. */
.ftr::before{content:none}
/* Logo grande, cortado de propósito nas bordas: a marca brinca com escala. */
.ftr__mark{
  padding-inline:var(--pad);
  margin-bottom:clamp(3rem,7vw,5.5rem);
}
.logo--ftr{
  width:min(1400px,124%);
  max-width:none;
  margin-inline:auto;
  margin-left:50%;transform:translateX(-50%);
  color:var(--carta);
  opacity:.96;
}
.ftr__grid{
  display:grid;gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  padding-bottom:clamp(3rem,6vw,4.5rem);
}
.ftr__lines{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.ftr__line{font-size:var(--t-small);color:var(--on-dark-soft);text-decoration:none;transition:color var(--t-fast) var(--ease)}
a.ftr__line:hover{color:var(--carta)}
.ftr__line--lg{font-size:clamp(1.125rem,2vw,1.375rem);color:var(--carta);letter-spacing:.02em}
.ftr__nav{display:flex;flex-direction:column;gap:.55rem}
.ftr__nav a{
  font-size:var(--t-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-soft);text-decoration:none;transition:color var(--t-fast) var(--ease);
}
.ftr__nav a:hover{color:var(--carta)}
.ftr__place{font-family:var(--display);font-size:var(--t-h3);text-transform:uppercase;letter-spacing:.08em}
.ftr__col--end{align-self:start}
.ftr__base{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  padding-block:1.75rem;border-top:1px solid var(--line-dark);
}
.ftr__legal{font-size:var(--t-label);letter-spacing:.1em;color:var(--on-dark-mute);text-transform:uppercase}


/* === 04-blocks.css === */
/* ==========================================================================
   4. BLOCOS

   Os componentes são reaproveitados; as composições, não. Cada página combina
   estes blocos numa ordem e num ritmo próprios.
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.1 Foto: a marca assina a fotografia, não a emoldura
   -------------------------------------------------------------------------- */

.ph{position:relative;overflow:hidden;background:var(--marmo)}
.ph picture{display:block;width:100%;height:100%}
.ph img{width:100%;height:100%;object-fit:cover}
.ph--r{border-radius:var(--r-lg)}
.ph--r-md{border-radius:var(--r-md)}

/* --------------------------------------------------------------------------
   O véu: a escada de luz (design-guide 11 e 12)

   Foto de trabalho com texto por cima sempre leva véu, e o véu não é um preto
   genérico: é uma escada medida pela luminância MÉDIA da zona onde o texto
   cai. Alvos: emenda ≤0,005 · zona de texto ≤0,03 · faixa da nav ≤0,11 ·
   metade livre 0,14–0,18 (e ali não entra texto).

   Empilha do mais específico pro mais geral, a emenda primeiro. A camada de
   cor chapada é a que segura o piso quando a foto do carrossel muda; as
   outras três desenham.

   Conferir com `node tools/veu.mjs` — ele mede no frame MAIS CLARO.
   -------------------------------------------------------------------------- */
.ph--sign::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(0deg,
      var(--veu-emenda) 0%, var(--veu-emenda) 4%,
      rgba(12,21,25,.72) 15%, rgba(11,19,23,0) 54%),                  /* emenda  */
    radial-gradient(120% 52% at 50% -10%,
      rgba(228,224,214,.17), transparent 62%),                        /* luz     */
    linear-gradient(90deg, rgba(6,10,12,.34), transparent 26%,
      transparent 74%, rgba(6,10,12,.34)),                            /* vinheta */
    linear-gradient(rgba(16,19,21,.62), rgba(16,19,21,.62));          /* cor 62% */
}

/* Na composição centralizada o texto cai no meio, que é justo onde a receita
   é mais fina: o degradê da emenda escurece a base e a luz do radial clareia o
   topo, mas o miolo só tem a camada chapada. Some um poço central, da mesma
   família da vinheta, pra abrir leitura onde a marca fica. */
.hero--mark .ph--sign::after{
  background:
    radial-gradient(78% 52% at 50% 50%,
      rgba(6,10,12,.52), rgba(6,10,12,.26) 62%, transparent 84%),      /* poço    */
    linear-gradient(0deg,
      var(--veu-emenda) 0%, var(--veu-emenda) 4%,
      rgba(12,21,25,.72) 15%, rgba(11,19,23,0) 54%),                   /* emenda  */
    radial-gradient(120% 52% at 50% -10%,
      rgba(228,224,214,.17), transparent 62%),                         /* luz     */
    linear-gradient(90deg, rgba(6,10,12,.34), transparent 26%,
      transparent 74%, rgba(6,10,12,.34)),                             /* vinheta */
    linear-gradient(rgba(16,19,21,.62), rgba(16,19,21,.62));           /* cor 62% */
}

/* Hero full-bleed que carrega HEADLINE (e não a marca): o texto ancora na
   base à esquerda, então o poço vai pra lá. Sem ele, cabinetry e trade ficam
   em 0,036 e 0,032 no frame mais claro do carrossel — acima do teto de 0,03. */
.hero--full:not(.hero--mark) .ph--sign::after{
  background:
    radial-gradient(96% 58% at 30% 92%,
      rgba(5,9,11,.48), rgba(5,9,11,.24) 56%, transparent 84%),       /* poço    */
    linear-gradient(0deg,
      var(--veu-emenda) 0%, var(--veu-emenda) 4%,
      rgba(12,21,25,.72) 15%, rgba(11,19,23,0) 54%),                  /* emenda  */
    radial-gradient(120% 52% at 50% -10%,
      rgba(228,224,214,.17), transparent 62%),                        /* luz     */
    linear-gradient(90deg, rgba(6,10,12,.34), transparent 26%,
      transparent 74%, rgba(6,10,12,.34)),                            /* vinheta */
    linear-gradient(rgba(16,19,21,.62), rgba(16,19,21,.62));          /* cor 62% */
}

/* A faixa da nav ganha scrim próprio: sem ele o link do topo cai pra 1,5:1
   no frame errado do carrossel. Fica ACIMA da luz do radial, que é justamente
   a camada que clareia o topo. */
.ph--sign::before{
  content:'';position:absolute;inset:0 0 auto;z-index:1;
  height:calc(var(--hdr-h) + 4.5rem);
  background:linear-gradient(180deg,rgba(6,10,12,.62) 0%,rgba(6,10,12,.34) 46%,rgba(6,10,12,0) 100%);
}
.ph--veil::after{content:'';position:absolute;inset:0;background:rgba(16,29,34,.30)}

.ratio-4-5{aspect-ratio:4/5}
.ratio-3-4{aspect-ratio:3/4}
.ratio-1-1{aspect-ratio:1/1}
.ratio-3-2{aspect-ratio:3/2}
.ratio-16-9{aspect-ratio:16/9}
.ratio-2-1{aspect-ratio:2/1}

/* Hover de imagem clicável: escala mínima, nada de lift. */
.zoom{overflow:hidden}
.zoom img{transition:transform var(--t-cross) var(--ease),opacity var(--t-base) var(--ease)}
a:hover .zoom img,button:hover .zoom img,.zoom:hover img{transform:scale(1.028)}

/* --------------------------------------------------------------------------
   4.1b Carrossel de fundo do header
   Mesmo desenho do link bio: dois jogos iguais e a deriva anda exatamente um
   jogo, então o loop fecha em si mesmo. As fotos mantêm a proporção original.
   -------------------------------------------------------------------------- */

.drift{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink)}
.drift__track{
  display:flex;height:100%;width:max-content;
  margin:0;padding:0;list-style:none;
  will-change:transform;
  animation:drift var(--drift,120s) linear infinite;
}
.drift__slide{flex:0 0 auto;height:100%}
/* Sob o véu escuro as fotos precisam ler como UM campo, não como três fotos
   emendadas. Mesmo tratamento do link bio: tira um pouco de saturação e de
   contraste pra as diferenças de luz entre elas pararem de brigar.
   Nos heros claros a foto é protagonista e não leva filtro. */
.ph--sign .drift__track,.ph--veil .drift__track{filter:saturate(.72) contrast(.94)}
.drift__slide img{height:100%;width:auto;max-width:none;object-fit:cover;background:var(--slate)}

@keyframes drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* Movimento reduzido: a deriva para e o header vira uma foto só, sem corte
   estranho — o primeiro slide passa a preencher o quadro. */
@media (prefers-reduced-motion:reduce){
  .drift__track{animation:none;width:100%}
  .drift__slide{display:none}
  .drift__slide:first-child{display:block;width:100%}
  .drift__slide:first-child img{width:100%;height:100%;object-fit:cover}
}

/* Em tela estreita a foto em pé já cobre: menos slides à vista, mesma deriva. */
@media (max-width:639px){
  .drift{--drift:150s}
}

/* --------------------------------------------------------------------------
   4.2 Heros
   -------------------------------------------------------------------------- */

.hero{position:relative;isolation:isolate}

/* (a) Full-bleed: foto ocupa a tela, a marca assina por cima. */
.hero--full{min-height:100svh;display:grid;color:var(--on-dark);background:var(--ink)}
.hero--full > .hero__ph{position:absolute;inset:0;z-index:0}
.hero--full > .hero__ph picture,.hero--full > .hero__ph img{width:100%;height:100%;object-fit:cover}
.hero__in{
  position:relative;z-index:1;
  width:100%;max-width:var(--max-wide);margin-inline:auto;
  padding:calc(var(--hdr-h) + clamp(3rem,9vh,6rem)) var(--pad) clamp(2.5rem,7vh,4.5rem);
  display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(1.75rem,4vh,2.75rem);
  min-height:100svh;
}
/* Logo display: domina a composição e chega perto das bordas. */
.hero__mark{width:min(100%,1180px);color:var(--carta)}
.hero__mark .logo{width:100%}

/* A marca do hero na versão com textura. O PNG é branco no RGB com a textura
   no ALFA, então ele entra como máscara e a cor vem do token — assim a marca
   é Carta de verdade, e não branco puro (que o guia proíbe).
   O arquivo original trazia o telefone do Geliabi queimado embaixo; o asset
   do site é o recorte só do lockup. */
.hero__mark--textura{
  width:min(100%,1180px);
  aspect-ratio:2154 / 420;
  margin:0;
  background-color:var(--carta);
  -webkit-mask:url(/palladio-lockup-textura.png) center/contain no-repeat;
  mask:url(/palladio-lockup-textura.png) center/contain no-repeat;
}

/* Composição centralizada do hero de marca (contexto/ajustes/hero.png). */
.hero__in--center{
  align-items:center;text-align:center;
  justify-content:center;
  gap:clamp(1.75rem,4vh,2.75rem);
}
.hero__in--center .eyebrow{margin-bottom:0}
.hero__in--center .body{margin-inline:auto;max-width:46ch}
.hero__in--center .hero__cta{justify-content:center}
.hero--mark .hero__in{padding-bottom:clamp(3rem,9vh,5.5rem)}
.hero__foot{
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:flex-end;justify-content:space-between;
}
.hero__foot .body{max-width:38ch;color:rgba(242,239,232,.82)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem}

/* (b) Split: tipografia de um lado, foto de altura inteira do outro. */
.hero--split{display:grid;background:var(--ink);color:var(--on-dark);min-height:100svh}
.hero--split .hero__type{
  padding:calc(var(--hdr-h) + clamp(3rem,8vh,5rem)) var(--pad) clamp(3rem,7vh,5rem);
  display:flex;flex-direction:column;justify-content:flex-end;
  max-width:720px;margin-inline:auto;width:100%;
}
.hero--split .hero__ph{position:relative;min-height:62svh}
/* A nav corre por cima da foto: escurece só o topo, o resto fica intacto. */
.hero--split .hero__ph::before{
  content:'';position:absolute;inset:0 0 auto;height:clamp(160px,26vh,260px);z-index:1;
  background:linear-gradient(180deg,rgba(16,29,34,.72),rgba(16,29,34,0));
}
.hero--split .hero__ph img{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){
  .hero--split{grid-template-columns:1fr 1fr;align-items:stretch}
  .hero--split .hero__type{margin-inline:0;margin-left:auto;padding-right:clamp(2rem,4vw,4rem)}
  .hero--split .hero__ph{min-height:100svh}
}

/* (c) Claro: Carta, tipografia à esquerda e a foto grande sangrando pra fora
   da margem direita. A melhor foto de built-in do acervo é vertical, então a
   composição se ajusta a ela em vez de espremê-la numa faixa. */
.hero--light{background:var(--carta);color:var(--on-light)}
.hero-light{
  display:grid;gap:clamp(2.5rem,5vw,4rem);
  padding-top:calc(var(--hdr-h) + clamp(2.5rem,7vh,4.5rem));
  padding-bottom:clamp(3rem,6vw,5rem);
}
.hero-light__head .headline{margin-bottom:1.5rem;max-width:11ch}
.hero-light__head .body{max-width:44ch}
.hero-light__ph{
  position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--marmo);
  height:clamp(340px,52vh,600px);      /* o carrossel precisa de altura definida */
}
@media (min-width:900px){
  .hero-light{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center}
  .hero-light__ph{
    border-radius:var(--r-lg) 0 0 var(--r-lg);
    /* sangra exatamente até a borda da viewport, sem estourar */
    margin-right:calc(var(--pad) * -1 - max(0px,(100vw - var(--max)) / 2));
  }
}
@media (min-width:1560px){
  .hero-light__ph{margin-right:0;border-radius:var(--r-lg)}
}

/* (d) Tipográfico: quase sem imagem (contato). */
.hero--type{background:var(--carta);color:var(--on-light)}
.hero--type .hero__in2{padding-top:calc(var(--hdr-h) + clamp(3rem,8vh,5.5rem))}

/* --------------------------------------------------------------------------
   4.3 Declaração (bloco tipográfico com evidência estreita ao lado)
   -------------------------------------------------------------------------- */

.stmt{display:grid;gap:clamp(2.5rem,6vw,5rem);align-items:center}
@media (min-width:900px){
  .stmt{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
  .stmt--flip{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
  .stmt--flip .stmt__ph{order:-1}
  .stmt--tight.stmt--flip{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
  .stmt--tight{grid-template-columns:minmax(0,1fr) minmax(0,320px)}
}
.stmt__ph{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--marmo)}
.stmt__ph img{width:100%;height:100%;object-fit:cover}
/* O corte se abre devagar conforme a página desce: a peça entrando no lugar. */
.stmt__ph--grow{clip-path:inset(14% 0 0 0);transition:clip-path 1.4s var(--ease)}
.stmt__ph--grow.is-in{clip-path:inset(0 0 0 0)}

/* --------------------------------------------------------------------------
   4.4 Editorial alternado (aplicações, tipos de trabalho)
   -------------------------------------------------------------------------- */

.ed{display:grid;gap:clamp(3rem,8vw,7rem)}
.ed__row{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:center}
@media (min-width:860px){
  .ed__row--a{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .ed__row--b{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .ed__row--b .ed__ph{order:2}
  .ed__row--c{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ed__row--wide{grid-template-columns:1fr}
}
.ed__ph{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--marmo)}
.ed__ph img{width:100%;height:100%;object-fit:cover}
.ed__txt{max-width:46ch}
.ed__txt .headline{margin-bottom:1rem}
/* Item sem foto no acervo: tipografia carrega, e é honesto. */
.ed__row--text .ed__txt{
  max-width:none;padding:clamp(2rem,4vw,3rem) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
@media (min-width:860px){
  .ed__row--text{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);align-items:start}
  .ed__row--text .ed__txt{max-width:52ch}
}

/* --------------------------------------------------------------------------
   4.5 Galeria de detalhe: deriva em loop, e a mão pode assumir a qualquer hora
   -------------------------------------------------------------------------- */

.rail{position:relative}
.rail__track{
  display:flex;gap:clamp(.75rem,1.6vw,1.25rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-left:max(var(--pad),calc(50vw - var(--max) / 2 + var(--pad)));
  padding-right:var(--pad);
  cursor:grab;
}
.rail__track::-webkit-scrollbar{display:none}
.rail__track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.rail__track > *{scroll-snap-align:center;flex:0 0 auto}
.rail__item{
  width:min(78vw,760px);
  border-radius:var(--r-lg);overflow:hidden;background:var(--marmo);
  position:relative;
}
.rail__item img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.rail__item--tall{width:min(58vw,460px)}
@media (min-width:900px){
  .rail__item{width:min(52vw,720px)}
  .rail__item--tall{width:min(28vw,400px)}
}
.rail__cap{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.5rem;
}
.rail__nav{display:flex;gap:.5rem}
.rail__btn{
  width:46px;height:46px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:transparent;
  display:grid;place-items:center;cursor:pointer;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);
}
/* Preenche com o proprio texto da secao e vira a seta pro fundo dela. Nao usar
   currentColor no background: ele resolve contra a cor JA trocada aqui embaixo,
   e o botao inteiro sai da mesma cor, sumindo dentro da pagina. */
.rail__btn:hover{background:var(--fg);border-color:var(--fg)}
.s--ink .rail__btn:hover,.s--slate .rail__btn:hover{color:var(--ink)}
.s--carta .rail__btn:hover{color:var(--carta)}
.rail__btn[disabled]{opacity:.3;cursor:default}
.rail__btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4}
.rail__hint{font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute)}

/* Régua de rótulos de detalhe (GRAIN ◆ HARDWARE ◆ …) */
.terms{display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin-top:2rem}
.terms li{
  font-size:var(--t-label);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-mute);
}
.terms li::before{content:'◆';font-size:.62em;margin-right:.85em;opacity:.6;vertical-align:.15em}

/* --------------------------------------------------------------------------
   4.6 Grade de trabalho art-directed
   -------------------------------------------------------------------------- */

.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.75rem,1.6vw,1.25rem)}
.grid__i{grid-column:span 6;position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--marmo)}
.grid__i img{width:100%;height:100%;object-fit:cover}
.grid__i button{
  display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;
}
@media (min-width:760px){
  .grid__i--full{grid-column:span 6}
  .grid__i--half{grid-column:span 3}
  .grid__i--third{grid-column:span 2}
  .grid__i--two-thirds{grid-column:span 4}
}
.grid__i[hidden]{display:none}
/* Filtro troca por crossfade, não por reflow brusco. */
.grid--filtering .grid__i{transition:opacity var(--t-base) var(--ease)}
.grid__i.is-out{opacity:0}

.filters{display:flex;flex-wrap:nowrap;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding-block:.25rem}
.filters::-webkit-scrollbar{display:none}
.filter{
  flex:0 0 auto;
  padding:10px 18px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:transparent;
  font-size:var(--t-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-mute);cursor:pointer;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.filter:hover{color:var(--fg);border-color:var(--line-strong)}
.filter[aria-pressed="true"]{color:var(--carta);background:var(--ink);border-color:var(--ink)}
.s--ink .filter[aria-pressed="true"],.s--slate .filter[aria-pressed="true"]{color:var(--ink);background:var(--carta);border-color:var(--carta)}
.filters__bar{
  display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;justify-content:space-between;
  padding-block:1.5rem;border-block:1px solid var(--line);
}
.filters__count{font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute)}

/* --------------------------------------------------------------------------
   4.7 Lightbox mínimo
   -------------------------------------------------------------------------- */

.lb{
  position:fixed;inset:0;z-index:150;
  background:var(--ink);   /* campo limpo: sobre Ink, 3% de vazamento ainda se lê */
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;  /* 1fr puro cresceria até a altura nativa da foto */
  opacity:0;transition:opacity var(--t-base) var(--ease);
}
.lb.is-open{opacity:1}
.lb__bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem var(--pad)}
.lb__count{font-size:var(--t-label);letter-spacing:.18em;color:var(--on-dark-mute);text-transform:uppercase}
.lb__close,.lb__prev,.lb__next{
  width:48px;height:48px;border-radius:var(--r-sm);
  border:1px solid var(--line-dark);background:transparent;color:var(--on-dark);
  display:grid;place-items:center;cursor:pointer;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.lb__close:hover,.lb__prev:hover,.lb__next:hover{background:var(--carta);color:var(--ink)}
.lb__close svg,.lb__prev svg,.lb__next svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4}
.lb__stage{position:relative;min-height:0;overflow:hidden}
/* Absoluto + margin auto: a foto centraliza e o teto de altura resolve contra
   a linha da grade, sem depender de percentual em altura indefinida. */
.lb__stage img{
  position:absolute;inset:0 var(--pad);margin:auto;
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border-radius:var(--r-md);background:none;
}
.lb__foot{display:flex;justify-content:center;gap:.75rem;padding:1.25rem var(--pad) calc(1.25rem + env(safe-area-inset-bottom))}

/* --------------------------------------------------------------------------
   4.8 Processo — três gramáticas diferentes, uma por página
   -------------------------------------------------------------------------- */

/* (a) Sticky: o texto fica, as etapas passam (Cabinetry) */
.proc{display:grid;gap:clamp(2.5rem,6vw,4.5rem)}
@media (min-width:960px){
  .proc{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
  .proc__aside{position:sticky;top:calc(var(--hdr-h) + clamp(2rem,8vh,5rem))}
}
.proc__steps{display:grid}
.proc__step{
  padding:clamp(2rem,4vw,3rem) 0;
  border-top:1px solid var(--line);
  display:grid;gap:1rem;
  transition:opacity var(--t-base) var(--ease);
}
html:not(.no-js) .proc__step{opacity:.52}
.proc__step:first-child{border-top:0;padding-top:0}
.proc__step.is-active{opacity:1}
.proc__num{
  font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mute);
  transition:color var(--t-base) var(--ease);
}
.proc__step .headline,.stage__item .headline,.tl__step .headline{margin-top:.35rem}
.proc__step.is-active .proc__num{color:var(--travertino)}

.proc__step .body{max-width:44ch}
.proc__ph{margin-top:1.5rem;border-radius:var(--r-md);overflow:hidden;background:var(--marmo)}
.proc__note{
  font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);
  margin-top:1rem;
}

/* (b) Imagem fixa, texto que avança (Built-Ins) */
.stage{display:grid;gap:clamp(2rem,5vw,3.5rem)}
.stage__ph{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--marmo)}
@media (min-width:960px){
  .stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .stage__ph{position:sticky;top:calc(var(--hdr-h) + clamp(2rem,8vh,5rem))}
}
.stage__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease),object-position 1.6s var(--ease)}
.stage__list{display:grid;gap:clamp(2rem,5vw,3.25rem)}
.stage__item{
  padding-left:clamp(1.25rem,2.5vw,2rem);
  border-left:1px solid var(--line);
  transition:opacity var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
html:not(.no-js) .stage__item{opacity:.52}
.stage__item.is-active{opacity:1;border-left-color:var(--travertino)}
.stage__item .headline{font-size:var(--t-h3);margin-bottom:.65rem}

/* (c) Linha vertical que sobe (Staircases) */
.tl{position:relative;padding-left:clamp(2.5rem,5vw,4rem)}
.tl::before{
  content:'';position:absolute;left:clamp(.5rem,1.2vw,1rem);top:.55rem;bottom:.55rem;width:1px;
  background:var(--line);
}
.tl__fill{
  position:absolute;left:clamp(.5rem,1.2vw,1rem);top:.55rem;width:1px;
  background:var(--travertino);
  height:var(--fill,0%);
  transition:height var(--t-base) linear;
}
.tl__step{position:relative;padding-bottom:clamp(2.5rem,6vw,4rem)}
.tl__step:last-child{padding-bottom:0}
.tl__step::before{
  content:'◆';position:absolute;left:calc(clamp(2.5rem,5vw,4rem) * -1 + clamp(.5rem,1.2vw,1rem) - .38em);
  top:.15rem;font-size:.72rem;color:var(--fg-mute);
  transition:color var(--t-base) var(--ease);
  background:var(--bg);padding-block:.15rem;
}
.s--carta .tl__step::before{background:var(--carta)}
.tl__step.is-active::before{color:var(--travertino)}
.tl__step .headline{font-size:var(--t-h3);margin-block:.4rem .65rem}
.tl__step .body{max-width:46ch}

/* --------------------------------------------------------------------------
   4.9 Comparação por crossfade (custom não é um estilo)
   -------------------------------------------------------------------------- */

.cmp{display:grid;gap:clamp(2rem,4vw,3rem)}
.cmp__frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--marmo);aspect-ratio:4/5}
@media (min-width:760px){.cmp__frame{aspect-ratio:16/10}}
.cmp__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--t-cross) var(--ease)}
.cmp__frame img.is-on{opacity:1}
.cmp__tabs{display:flex;flex-wrap:wrap;gap:.5rem}
.cmp__tab{
  padding:12px 20px;border-radius:var(--r-sm);border:1px solid var(--line);background:transparent;
  font-size:var(--t-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);
  cursor:pointer;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.cmp__tab[aria-selected="true"]{color:var(--fg);border-color:var(--fg)}
.cmp__cap{font-size:var(--t-small);color:var(--fg-mute);min-height:2.4em}

/* --------------------------------------------------------------------------
   4.10 Passagem pra outra frente (bloco editorial clicável inteiro)
   -------------------------------------------------------------------------- */

.cross{position:relative;display:block;color:var(--on-dark);text-decoration:none;overflow:hidden;background:var(--ink)}
.cross__ph{position:absolute;inset:0}
.cross__ph img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-cross) var(--ease)}
.cross::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,29,34,.30),rgba(16,29,34,.78));
  transition:background var(--t-base) var(--ease);
}
.cross:hover .cross__ph img{transform:scale(1.03)}
.cross__in{
  position:relative;z-index:1;
  min-height:clamp(400px,58vh,640px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(2.5rem,6vw,5rem) var(--pad);
  max-width:var(--max);margin-inline:auto;
}
.cross__in .headline{max-width:16ch}
.cross__in .body{max-width:44ch;color:rgba(242,239,232,.8);margin-top:1rem}
.cross__go{
  display:inline-flex;align-items:center;gap:.9em;margin-top:2rem;
  font-size:var(--t-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
}
.cross__go::before{content:'◆';font-size:.72em;opacity:.75}
.cross:hover .cross__go{text-decoration:underline;text-underline-offset:5px}
.cross--pair{display:grid}
@media (min-width:900px){.cross--pair{grid-template-columns:1fr 1fr}}
.cross--pair .cross__in{min-height:clamp(380px,50vh,560px)}

/* --------------------------------------------------------------------------
   4.11 Índice tipográfico com troca de imagem no hover
   -------------------------------------------------------------------------- */

.idx{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:900px){.idx{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center}}
.idx__list{display:grid}
.idx__row{
  display:block;padding:clamp(1.5rem,3vw,2.25rem) 0;
  border-top:1px solid var(--line);text-decoration:none;
  transition:padding-left var(--t-base) var(--ease);
}
.idx__row:last-child{border-bottom:1px solid var(--line)}
.idx__row:hover,.idx__row:focus-visible{padding-left:.75rem}
.idx__row .headline{font-size:var(--t-h3);transition:color var(--t-base) var(--ease)}
.idx__row .body{margin-top:.5rem;max-width:44ch;font-size:var(--t-small)}
.idx__ph{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--marmo);aspect-ratio:4/5}
.idx__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--t-cross) var(--ease)}
.idx__ph img.is-on{opacity:1}
@media (max-width:899px){.idx__ph{display:none}}

/* --------------------------------------------------------------------------
   4.12 Faixa de depoimento (contexto/ajustes/Depoimentos.png)
   Mesmo motor do hero, régua diferente: 4:1 no desktop e o mesmo carrossel ao
   fundo, com mais véu. Texto pequeno pede zona mais escura (0,014).
   -------------------------------------------------------------------------- */

.proof-band{position:relative;isolation:isolate;overflow:hidden;background:var(--ink)}
.proof-band__ph{position:absolute;inset:0;z-index:0}

/* Véu do depoimento: a mesma escada do hero, um degrau abaixo. */
.ph--proof::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(6,10,12,.58), rgba(6,10,12,.30) 46%,
      rgba(6,10,12,.30) 62%, rgba(6,10,12,.58)),                      /* vinheta */
    linear-gradient(0deg, rgba(8,15,19,.62), rgba(8,15,19,.34) 40%,
      rgba(8,15,19,.50) 100%),                                        /* corpo   */
    linear-gradient(rgba(16,19,21,.70), rgba(16,19,21,.70));          /* cor 70% */
}
.ph--proof .drift__track{filter:saturate(.62) contrast(.92)}

.proof{
  position:relative;z-index:1;
  display:grid;gap:clamp(2rem,5vw,4rem);
  padding-block:clamp(3.5rem,9vw,4.5rem);
  align-items:center;
}
@media (min-width:860px){
  /* 4:1 na prancheta (1920×480); o clamp segura a faixa em tela menor */
  .proof-band{min-height:clamp(360px,25vw,480px);display:grid;align-items:center}
  .proof{grid-template-columns:auto minmax(0,1fr);gap:clamp(3rem,7vw,6rem);padding-block:0}
}
.proof__col--score{display:grid;gap:.5rem;justify-items:start}
@media (min-width:860px){.proof__col--score{justify-items:center;text-align:center}}
.proof__stars{
  font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:.22em;color:var(--travertino);line-height:1;
}
.proof__score{
  font-family:var(--display);font-size:clamp(2.5rem,5vw,3.75rem);
  text-transform:uppercase;letter-spacing:.04em;line-height:1;
}
.proof__label{font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-mute)}
.proof__col--say .headline{font-size:clamp(1.6rem,3.2vw,2.5rem)}
/* No máximo duas linhas de apoio, como manda o modelo. */
.proof__col--say .body{max-width:58ch}

/* --------------------------------------------------------------------------
   4.13 Contato
   -------------------------------------------------------------------------- */

.contact{display:grid;gap:clamp(2.5rem,6vw,4rem);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.contact__block{display:grid;gap:.65rem;align-content:start;padding-top:1.75rem;border-top:1px solid var(--line)}
.contact__val{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.045em;line-height:1.1;
  font-size:clamp(1.375rem,2.6vw,1.875rem);text-decoration:none;overflow-wrap:anywhere;
}
a.contact__val{transition:color var(--t-fast) var(--ease)}
a.contact__val:hover{color:var(--vicenza);text-decoration:underline;text-underline-offset:6px}
.contact__note{font-size:var(--t-small);color:var(--fg-mute);max-width:34ch}
/* O telefone é a maior peça funcional da página. */
.contact__phone{font-size:clamp(2rem,6vw,3.75rem);letter-spacing:.02em}

.form{display:grid;gap:clamp(1.5rem,3vw,2rem);max-width:640px}
.field{display:grid;gap:.6rem}
.field label{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}
.field input,.field textarea{
  width:100%;min-height:52px;padding:14px 0;
  background:transparent;color:var(--fg);
  border:0;border-bottom:1px solid var(--line-strong);border-radius:var(--r-xs);
  font-family:var(--sans);font-size:var(--t-body);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.field textarea{min-height:120px;resize:vertical;padding-top:12px}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-mute)}
.field input:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--vicenza);
  box-shadow:0 1px 0 0 var(--vicenza);
}
.field.is-invalid input,.field.is-invalid textarea{border-bottom-color:#8C4A3F}
.field__err{font-size:var(--t-small);color:#8C4A3F;display:none}
.field.is-invalid .field__err{display:block}
.form__note{font-size:var(--t-small);color:var(--fg-mute)}
.form__ok{
  padding:1.25rem 1.5rem;border:1px solid var(--line-strong);border-radius:var(--r-md);
  font-size:var(--t-small);
}

/* --------------------------------------------------------------------------
   4.14 Utilidades de composição
   -------------------------------------------------------------------------- */

.stack{display:grid;gap:clamp(2.5rem,5vw,4rem)}
.stack--tight{gap:clamp(1.5rem,3vw,2rem)}
.head-row{display:grid;gap:clamp(1.5rem,4vw,3rem)}
@media (min-width:900px){
  .head-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
  .head-row--top{align-items:start}
}
.divider{height:1px;background:var(--line);border:0;margin:0}
.measure{max-width:var(--max-read)}
/* Display no meio da página vai centralizado, e o BLOCO INTEIRO junto:
   eyebrow, título, apoio e botões (guia, seção 5 "Alinhamento"). Texto
   corrido nunca centraliza — por isso o .body ganha teto de leitura e só
   centraliza o eixo, não o parágrafo longo. */
.eixo{text-align:center;max-width:none}
.eixo .eyebrow,.eixo .headline{margin-inline:auto}
.eixo .headline{max-width:18ch}
.eixo .body{margin-inline:auto;max-width:56ch}
.eixo .actions,.eixo .rule{justify-content:center}
.eixo .actions{margin-inline:auto}

.center{text-align:center;margin-inline:auto}
.bleed{margin-inline:calc(var(--pad) * -1)}
@media (min-width:1560px){.bleed{margin-inline:0}}

/* Parallax discreto: usado uma vez só, e desligado no reduced-motion. */
.para{will-change:transform}
@media (prefers-reduced-motion:reduce){.para{transform:none !important}}


/* === 05-pages.css === */
/* ==========================================================================
   5. COMPOSIÇÕES DE PÁGINA
   ========================================================================== */

/* Foto ocupa o bloco inteiro: grão sai de cima do trabalho. */
.no-grain::before{content:none !important}

/* --------------------------------------------------------------------------
   5.1 Home
   -------------------------------------------------------------------------- */

.hero__say .headline{margin-bottom:1rem}
.hero__say .body{max-width:40ch}
.hero__mark--about{width:min(100%,860px)}

/* Rotas de serviço: escalonadas, com proporções diferentes. Não são três
   cards iguais — é uma composição. */
.routes{
  display:grid;gap:clamp(2rem,4vw,3rem);
  margin-top:clamp(3rem,6vw,4.5rem);
}
@media (min-width:860px){
  .routes{grid-template-columns:repeat(3,1fr);align-items:start;gap:clamp(1.5rem,3vw,2.5rem)}
  .route--2{margin-top:clamp(3rem,7vw,6rem)}
  .route--3{margin-top:clamp(1.25rem,3vw,2.5rem)}
}
.route{display:block;text-decoration:none;color:inherit}
.route__ph{display:block;position:relative;overflow:hidden}
.route__body{display:block;padding-top:1.75rem}
.route__label{
  display:block;font-size:var(--t-label);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-mute);margin-bottom:1rem;
}
.route__body .headline{display:block;margin-bottom:.65rem}
.route__body .body{font-size:var(--t-small)}
.route__cta{
  display:inline-block;margin-top:1.5rem;
  font-size:var(--t-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:.35rem;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.route:hover .route__cta{color:var(--travertino);border-color:var(--travertino)}

/* Processo da home: foto presa à esquerda que muda o enquadramento por etapa
   (mesma mecânica data-steps do built-ins) e as quatro etapas empilhadas à
   direita, cada uma com a sua linha fina. Sem caixa pintada: o grão da
   superfície continua atravessando o bloco. No celular a foto sai e sobra a
   lista empilhada, sem sticky. */
.steps{
  display:grid;gap:clamp(2rem,5vw,3.5rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
.steps__stage{
  display:none;position:relative;
  border-radius:var(--r-lg);overflow:hidden;background:var(--marmo);
}
.steps__stage img{width:100%;height:100%;object-fit:cover;transition:object-position 1.6s var(--ease)}
@media (min-width:960px){
  .steps{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start}
  .steps__stage{display:block;position:sticky;top:calc(var(--hdr-h) + clamp(2rem,8vh,5rem))}
}
.steps__list{display:grid}
.step{
  position:relative;
  padding:clamp(1.75rem,3vw,2.5rem) 0 clamp(1.75rem,3vw,2.5rem) clamp(1.25rem,2.5vw,2rem);
  display:grid;gap:.85rem;align-content:start;
}
/* A linha divisória desenha de cima pra baixo quando a etapa revela, e vira
   travertino na etapa que está no meio da tela. */
.step::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--line-strong);
  transform:scaleY(0);transform-origin:top;
  transition:transform var(--t-cross) var(--ease) var(--d,0ms),background-color var(--t-base) var(--ease);
}
.step.is-in::before,.no-js .step::before{transform:none}
.step.is-active::before{background:var(--travertino)}
html:not(.no-js) .reveal.step.is-in:not(.is-active){opacity:.55}
.step__n{font-size:var(--t-label);font-weight:500;letter-spacing:.2em;color:var(--travertino)}
.step .body{font-size:var(--t-small)}
.steps__foot{
  display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;
  margin-top:clamp(2.5rem,5vw,3.5rem);
}
.steps__foot .actions{margin-top:0}

/* Editorial: a imagem não pode engolir a coluna de texto, e o texto ancora na
   base da foto — o vazio fica em cima, como respiro, não como buraco. */
@media (min-width:860px){
  .ed__row--a{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:end}
  .ed__row--b{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:end}
  .ed__row--a .ed__txt,.ed__row--b .ed__txt{padding-bottom:clamp(.5rem,2vw,1.75rem)}
}

/* Em celular, par de botões vira coluna de largura cheia: alinhado e no polegar. */
@media (max-width:559px){
  .actions,.hero__cta{flex-direction:column;align-items:stretch}
  .actions .btn,.hero__cta .btn{width:100%}
}

/* --------------------------------------------------------------------------
   5.2 Cabinetry
   -------------------------------------------------------------------------- */

.hero--service .hero__head .headline{max-width:14ch}
.hero--service .hero__foot .body{max-width:44ch;color:rgba(242,239,232,.82)}

/* --------------------------------------------------------------------------
   5.3 Built-Ins
   -------------------------------------------------------------------------- */

.ed__txt--inset{max-width:52ch;margin-top:2rem}
@media (min-width:860px){
  .ed__row--wide{position:relative}
  .ed__txt--inset{
    position:absolute;left:clamp(2rem,4vw,4rem);bottom:clamp(2rem,4vw,3.5rem);
    max-width:36ch;margin:0;padding:clamp(1.5rem,2.5vw,2rem);
    background:var(--carta);border-radius:var(--r-md);
  }
}

/* Atmosfera: a única seção com parallax, e bem contido. */
.atmos{overflow:hidden}
.atmos__ph{position:relative;height:clamp(360px,62vh,720px);overflow:hidden}
.atmos__ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}

/* --------------------------------------------------------------------------
   5.4 Staircases — a composição segue a vertical
   -------------------------------------------------------------------------- */

.tall{display:grid;gap:clamp(2rem,5vw,3.5rem)}
@media (min-width:900px){
  .tall{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
  .tall__ph{position:sticky;top:calc(var(--hdr-h) + clamp(1.5rem,5vh,3rem))}
}
.tall__ph{border-radius:var(--r-lg);overflow:hidden;background:var(--marmo)}
.tall__ph img{width:100%;height:100%;object-fit:cover}
.tall__txt{display:grid;gap:clamp(2.5rem,6vw,4.5rem);padding-top:clamp(0rem,4vw,3rem)}
.tall__aside{border-radius:var(--r-lg);overflow:hidden;background:var(--marmo);position:relative}
.tall__aside img{width:100%;height:100%;object-fit:cover}
.tall__cap{
  padding-top:1rem;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);
}

/* --------------------------------------------------------------------------
   5.5 Work
   -------------------------------------------------------------------------- */

.hero--archive .hero__head .headline{max-width:13ch}
.hero--archive .hero__foot .body{max-width:44ch;color:rgba(242,239,232,.82)}
/* Cards de tipo de trabalho (contexto/ajustes/Modelo de Tipo.png).
   Larguras desiguais, altura e linha de base iguais. */
.tipos{display:grid}
.tipo{
  position:relative;display:block;overflow:hidden;
  color:var(--on-dark);text-decoration:none;background:var(--ink);
  container-type:size;                  /* o inset é medido no próprio card */
  aspect-ratio:1.66;
}
@media (max-width:759px){ .tipo{aspect-ratio:4 / 5} }
@media (min-width:760px){
  .tipos{grid-template-columns:1.34fr .83fr .83fr}
  /* o dominante fixa a altura da fileira; os outros dois esticam pra ela */
  .tipo{aspect-ratio:auto}
  .tipo:first-child{aspect-ratio:1.66}
}
/* A camada chapada vai por card: as três fotos do acervo têm brilhos bem
   diferentes e o alvo da metade livre (0,14–0,18) é o mesmo pros três.
   Números medidos com `node tools/veu.mjs work`. */
.tipo:nth-child(1){--veu-cor:.31}   /* cozinha branca, a mais clara */
.tipo:nth-child(2){--veu-cor:.16}    /* copa verde: já é a mais escura do trio */
.tipo:nth-child(2) .tipo__ph img{filter:brightness(1.10)}
.tipo:nth-child(3){--veu-cor:.35}    /* escada em madeira clara */

.tipo__ph{position:absolute;inset:0}
.tipo__ph img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-cross) var(--ease)}
.tipo:hover .tipo__ph img{transform:scale(1.03)}

/* Véu diagonal do card, montado em dois eixos em vez de uma diagonal só:
   assim dá pra mirar o canto do texto (≤0,028) sem apagar a metade oposta,
   que tem que ficar entre 0,14 e 0,18 — é lá que a marcenaria aparece.
   `--veu-cor` é a camada chapada e vai por card, porque as três fotos do
   acervo têm brilhos bem diferentes. Conferir com `node tools/veu.mjs`. */
.tipo::after{
  content:'';position:absolute;inset:0;
  background:
    /* poço com a FORMA do bloco de texto: é ele que abre a leitura no canto,
       e por ser localizado não rouba luz da metade livre */
    radial-gradient(58% 52% at 26% 80%,
      rgba(5,9,11,.74) 0%, rgba(5,9,11,.54) 46%,
      rgba(5,9,11,.20) 74%, rgba(5,9,11,0) 92%),                    /* poço    */
    /* A base morre em 50% da altura de propósito: a metade livre começa aos
       48% e não pode ser tocada por ela. */
    linear-gradient(0deg,
      rgba(5,9,11,.58) 0%, rgba(5,9,11,.40) 22%,
      rgba(5,9,11,.12) 40%, rgba(5,9,11,0) 50%),                    /* base    */
    linear-gradient(90deg,
      rgba(5,9,11,.30) 0%, rgba(5,9,11,.10) 38%, rgba(5,9,11,0) 60%), /* lateral */
    linear-gradient(rgba(16,19,21,var(--veu-cor,.18)),
                    rgba(16,19,21,var(--veu-cor,.18)));             /* cor     */
}
.tipo__in{
  position:absolute;z-index:1;inset:auto auto 0 0;
  display:block;
  padding:0 6cqw 10cqh;
  width:max-content;              /* abraça o texto: a caixa não finge largura */
  max-width:min(92%,30ch);
}
.tipo__in .eyebrow{margin-bottom:.75rem;color:rgba(242,239,232,.72)}
/* Título do card tem régua própria: precisa fechar em duas linhas dentro do
   card mais estreito, sem hifenizar e sem estourar a caixa. */
.tipo__in .headline{
  display:block;
  font-size:clamp(1.5rem,2.4vw,2.125rem);
  line-height:1.06;
  hyphens:none;overflow-wrap:normal;text-wrap:balance;
}
.tipo:focus-visible{outline-offset:-4px}
@supports not (width:1cqw){
  .tipo__in{padding:0 6% 6%}
}

/* --------------------------------------------------------------------------
   5.6 About
   -------------------------------------------------------------------------- */

.story{display:grid;gap:clamp(2rem,5vw,3rem)}
.story__head .headline{max-width:14ch}
.story__text .body p{font-size:clamp(1.0625rem,.55vw + .95rem,1.1875rem);line-height:1.72}

/* Brasão como marca d'água: presença material, não decoração. */
.crest{
  display:grid;place-items:center;
  margin-top:clamp(3rem,7vw,5rem);
  color:var(--ink);opacity:.07;
}
.crest .logo{width:min(560px,72vw)}

.closing{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;
  font-size:var(--t-h3);
}

.actions--flush{margin-top:0}

.signoff{position:relative;display:grid;gap:clamp(2.5rem,6vw,4rem)}
@media (min-width:900px){
  .signoff{grid-template-columns:minmax(0,1fr) auto;align-items:end}
}
.signoff__mark{color:var(--ink);opacity:.14}
.signoff__mark .logo{width:clamp(120px,16vw,200px)}

/* --------------------------------------------------------------------------
   5.7 Trade
   -------------------------------------------------------------------------- */

.hero--trade .hero__head .headline{max-width:13ch}
.hero--trade .hero__say{max-width:46ch}
.hero--trade .hero__say .body{color:rgba(242,239,232,.82);margin-bottom:1.5rem}

/* --------------------------------------------------------------------------
   5.8 Contact
   -------------------------------------------------------------------------- */

.contact-hero{display:grid;gap:clamp(2.5rem,6vw,4rem);padding-bottom:clamp(3rem,6vw,4.5rem)}
@media (min-width:900px){
  .contact-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end}
}
.contact-hero__say .headline{max-width:12ch;margin-bottom:1.5rem}
.contact-hero__ph{border-radius:var(--r-lg);overflow:hidden}
.contact__block--wide{grid-column:1 / -1}
@media (min-width:760px){.contact__block--wide{grid-column:span 2}}

.form__foot{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;justify-content:space-between}

.route-line{
  display:grid;gap:.75rem;
  padding:clamp(2rem,4vw,3rem) 0;
  border-block:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:padding-left var(--t-base) var(--ease);
}
.route-line:hover{padding-left:.75rem}
.route-line .body{max-width:48ch}
.route-line .cross__go{margin-top:1rem}

/* Fecho da página de contato: o brasão como selo. O logo display fica pro
   footer, logo abaixo — repetir o mesmo desenho duas vezes seria ruído. */
.brandmark{display:grid;justify-items:center;padding-inline:var(--pad)}
.brandmark__crest{width:clamp(148px,17vw,208px);color:var(--carta)}
.brandmark__crest .logo{width:100%}


/* === 06-motion.css === */
/* ==========================================================================
   6. MOVIMENTO DA HOME (set/2026)

   Regra do movimento (site.js): lento, contido, deliberado. Nada sequestra o
   scroll, nada quica. Scroll-driven em CSS (animation-timeline) onde o
   navegador alcança; IntersectionObserver e scroll no JS como fallback.

   Contrato: estado inicial escondido só existe quando o mecanismo que revela
   está disponível (@supports pro CSS, html:not(.no-js) pro JS). Sem JS e sem
   suporte, tudo nasce no estado final. Com prefers-reduced-motion nada se
   move, nada conta, nada deriva.
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.1 Hero: entrada na carga e cortina no scroll
   O hero fica preso e a seção seguinte sobe por cima. Durante o trajeto o
   conteúdo desce a 0.4x do scroll e escurece até 40%.
   -------------------------------------------------------------------------- */

.p-home .hero--mark{position:sticky;top:0;z-index:0}
.p-home main > .s{z-index:1}

@keyframes hero-fade-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* Entrada (ajuste do Luan, 22/set): o lockup sobe com fade, sem máscara.
   Eyebrow e CTAs seguem atrás, 120ms entre cada um. */
.p-home .hero__mark--textura{animation:hero-fade-in 900ms var(--ease) both}
.p-home .hero__in--center > .eyebrow{animation:hero-fade-in var(--t-reveal) var(--ease) 240ms both}
.p-home .hero__cta{animation:hero-fade-in var(--t-reveal) var(--ease) 360ms both}
/* Chegando por view transition, o wordmark do header vira o lockup: a
   entrada não roda de novo por cima disso. */
.vt-in .hero__mark--textura{animation:none}

/* Logo reveal em vídeo com alpha (hero-reveal.webm / .mp4). O vídeo é o
   recorte exato da caixa do lockup estático, então os dois ocupam a mesma
   caixa e o final do vídeo cai em cima do PNG com textura. Enquanto
   `reveal-pending` está no html, as entradas em CSS ficam pausadas no
   primeiro quadro; o site.js solta tudo no fim do vídeo (ou na hora, se o
   vídeo não puder rodar). */
.hero__lockup{position:relative;width:min(100%,1180px)}
/* Na home o lockup estático É o último frame do vídeo (lockup-reveal.png,
   alpha como máscara, cor do token): mesmo desenho, mesma posição da linha,
   sem salto na troca. O PNG com textura segue nas outras páginas. */
.hero__lockup .hero__mark--textura{
  width:100%;
  aspect-ratio:1738 / 340;
  -webkit-mask-image:url(/img/lockup-reveal.6ffec2f7.png);
  mask-image:url(/img/lockup-reveal.6ffec2f7.png);
}
/* Celular: versão vertical do reveal (PALL / ADIO / CABINETRY), com o
   mesmo tratamento: o estático é o último frame do vídeo vertical. */
@media (max-width:639px){
  .hero__lockup .hero__mark--textura{
    aspect-ratio:1896 / 1398;
    -webkit-mask-image:url(/img/lockup-reveal-v.3c2e27ca.png);
    mask-image:url(/img/lockup-reveal-v.3c2e27ca.png);
  }
}
.hero__reveal{
  position:absolute;left:0;top:0;width:100%;height:auto;display:block;
  pointer-events:none;
  transition:opacity var(--t-base) var(--ease);
}
.reveal-pending .hero__mark--textura,
.reveal-pending .hero__in--center > .eyebrow,
.reveal-pending .hero__cta{animation-play-state:paused}
@keyframes hero-fade-only{from{opacity:0}to{opacity:1}}
.hero__lockup.is-done .hero__mark--textura{animation:hero-fade-only var(--t-base) var(--ease) both}
.hero__lockup.is-done .hero__reveal{opacity:0}
/* O bloco central era centralizado entre um padding de topo (header + respiro)
   e um de base menor, o que o empurrava 44px pra baixo do centro. Base igual
   ao topo mais 6vh: fica um pouco acima do centro da tela. */
.p-home .hero--mark .hero__in--center{
  padding-bottom:calc(var(--hdr-h) + clamp(3rem,9vh,6rem) + 6vh);
}

@keyframes hero-sink{to{transform:translateY(40svh);opacity:.4}}
@supports (animation-timeline:scroll()){
  .p-home .hero__in{
    animation:hero-sink linear both;
    animation-timeline:scroll(root);
    animation-range:0px 100svh;
  }
}
@supports not (animation-timeline:scroll()){
  .p-home .hero__in{
    transform:translateY(calc(var(--hero-p,0) * 40svh));
    opacity:calc(1 - var(--hero-p,0) * .6);
  }
}
/* Coberto pela cortina, o carrossel do fundo para de gastar GPU. */
.p-home.is-sunk .hero .drift__track{animation-play-state:paused}

/* Sem JS ninguém adiciona .is-in: a foto da declaração nasce inteira. */
.no-js .stmt__ph--grow{clip-path:inset(0 0 0 0)}

/* --------------------------------------------------------------------------
   6.2 Headlines de display em linhas
   O JS separa o texto em linhas (cópia inteira fica no sr-only) e cada linha
   sobe de dentro da própria máscara, 80ms depois da anterior, dentro do mesmo
   reveal do bloco. Parágrafo e eyebrow seguem no fade de sempre.
   -------------------------------------------------------------------------- */

.hl__line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hl__in{
  display:block;transform:translateY(100%);
  transition:transform var(--t-reveal) var(--ease) calc(var(--d,0ms) + var(--i,0) * 80ms);
}
.reveal.is-in .hl__in{transform:none}
.hl--still .hl__in{transition:none}

/* --------------------------------------------------------------------------
   6.3 Três formas de craft: parallax leve e hover
   0.9x, 1x e 1.1x contra o scroll. Em view(), o deslocamento é (v - 1) vezes
   a distância ao centro: a distância vai de +(vh+h)/2 a -(vh+h)/2 no cover,
   então 10% disso é 5vh + 5% da própria altura.
   -------------------------------------------------------------------------- */

/* Contido de proposito (0.96x e 1.04x): a composicao ja e escalonada, e em
   0.9x/1.1x as colunas andavam 80px e a escada parecia quebrada. */
@keyframes para-slow{from{transform:translateY(calc(-2vh - 2%))}to{transform:translateY(calc(2vh + 2%))}}
@keyframes para-fast{from{transform:translateY(calc(2vh + 2%))}to{transform:translateY(calc(-2vh - 2%))}}
@media (min-width:860px){
  @supports (animation-timeline:view()){
    .p-home .route--1,.p-home .route--3{animation-timeline:view();animation-range:cover}
    .p-home .route--1{animation:para-slow linear both}
    .p-home .route--3{animation:para-fast linear both}
  }
}
/* O texto do card e um span: em bloco, o CTA para de cair na mesma linha do
   paragrafo e de abrir um vao entre as linhas. */
.route__body .body{display:block}
.p-home .route .route__ph img{
  filter:saturate(.85);
  transition:transform var(--t-cross) var(--ease),filter var(--t-cross) var(--ease);
}
.p-home .route:hover .route__ph img,.p-home .route:focus-visible .route__ph img{transform:scale(1.04);filter:saturate(1)}
/* O sublinhado de repouso fica; o de travertino cresce por cima, da esquerda. */
.p-home .route__cta{position:relative}
.p-home .route__cta::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--travertino);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--ease);
}
.p-home .route:hover .route__cta{border-color:var(--fg)}
.p-home .route:hover .route__cta::after,.p-home .route:focus-visible .route__cta::after{transform:scaleX(1)}

/* Cabeçalhos de seção da home: o parágrafo da direita nasce na altura da
   primeira linha do título (desce a altura do eyebrow mais a margem dele),
   em vez de ficar pendurado na base ou no eyebrow. */
@media (min-width:900px){
  .p-home .head-row{align-items:start}
  .p-home .head-row > :last-child{padding-top:calc(var(--t-label) * 1.65 + 1.5rem)}
}

/* Declaração de abertura (Made to belong): foto maior e coluna de texto mais
   curta. A régua estreita deixava uma linha de 75 caracteres ao lado de uma
   foto de 320px. */
@media (min-width:900px){
  .p-home .stmt--tight{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(3rem,7vw,6rem)}
  .p-home .stmt--tight .body{max-width:44ch}
}

/* --------------------------------------------------------------------------
   6.4 Carrossel de trabalhos (.rail--work)
   -------------------------------------------------------------------------- */

/* Legenda: eyebrow que sobe de baixo no hover ou no foco. */
.rail__tag{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:flex;align-items:center;gap:.75em;
  padding:3rem clamp(1rem,2vw,1.5rem) clamp(1rem,2vw,1.5rem);
  font-family:var(--sans);font-size:var(--t-label);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--carta);
  background:linear-gradient(180deg,rgba(6,10,12,0),rgba(6,10,12,.58));
  transform:translateY(100%);opacity:0;
  transition:transform var(--t-base) var(--ease),opacity var(--t-base) var(--ease);
  pointer-events:none;
}
.rail__tag .lozenge{opacity:.8}
.rail__item:hover .rail__tag,.rail__item:focus-visible .rail__tag{transform:none;opacity:1}
.rail__item:focus-visible{outline-offset:-4px}

/* Profundidade: a peça mais perto do centro da janela em scale 1 e saturação
   1, as outras em .96 e .85, contínuo conforme a fita anda. O timeline é a
   posição da peça dentro da faixa (view(x)); sem suporte o JS escreve --depth. */
@keyframes rail-depth{
  0%,100%{transform:scale(.96);filter:saturate(.85)}
  50%{transform:scale(1);filter:saturate(1)}
}
@supports (animation-timeline:view()){
  .rail--work .rail__item{animation:rail-depth linear both;animation-timeline:view(x);animation-range:cover}
}
@supports not (animation-timeline:view()){
  .rail--work .rail__item{
    transform:scale(calc(.96 + .04 * var(--depth,1)));
    filter:saturate(calc(.85 + .15 * var(--depth,1)));
  }
}

/* Filete de progresso: 1px abaixo da faixa, acompanha a posição no ciclo.
   O cursor tem um gêmeo um comprimento de linha à esquerda, então na emenda
   ele sai pela direita enquanto entra pela esquerda. */
.rail__progress{
  position:relative;height:1px;margin-top:clamp(1.5rem,3vw,2.25rem);
  background:var(--line);overflow:hidden;
}
.rail__thumb{
  position:absolute;top:0;bottom:0;left:0;
  width:calc(var(--rail-w,.3) * 100%);
  background:var(--fg);
  transform:translateX(calc(var(--rail-p,0) / var(--rail-w,.3) * 100%));
}
.rail__thumb::after{
  content:'';position:absolute;top:0;bottom:0;width:100%;
  left:calc(-100% / var(--rail-w,.3));
  background:inherit;
}
.rail--work .rail__btn[disabled]{opacity:1;cursor:pointer}

/* Ticker: 30px/s (o JS acerta a duração pela largura medida), emenda em
   -50%, pausa no hover. */
.ticker{
  flex:1 1 auto;min-width:0;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker__track{display:flex;width:max-content;animation:ticker var(--ticker-dur,44s) linear infinite}
.ticker__set{flex:0 0 auto;flex-wrap:nowrap;white-space:nowrap;margin-right:.75em}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes ticker{to{transform:translate3d(-50%,0,0)}}

/* --------------------------------------------------------------------------
   6.5 Faixa de prova: o 5.0 conta e as estrelas acendem uma por vez
   -------------------------------------------------------------------------- */

.proof__score{font-variant-numeric:tabular-nums}
.proof__stars span{
  display:inline-block;
  transition:opacity var(--t-base) var(--ease) calc(var(--i,0) * 80ms),color var(--t-base) var(--ease) calc(var(--i,0) * 80ms);
}
.proof__stars span:nth-child(2){--i:1}
.proof__stars span:nth-child(3){--i:2}
.proof__stars span:nth-child(4){--i:3}
.proof__stars span:nth-child(5){--i:4}
html:not(.no-js) .proof-band:not(.is-in) .proof__stars span{opacity:.28;color:var(--on-dark-mute)}

/* --------------------------------------------------------------------------
   6.6 Rodapé: wordmark por clip-path e textura a 0.6x
   -------------------------------------------------------------------------- */

@keyframes ftr-mark{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
/* A textura mora num pseudo mais alto que o rodapé (1.4H + 0.4vh) e desce
   0.4 do trajeto de cover: 0.4(vh + H) = 28.571% da própria altura + 28.571vh. */
@keyframes ftr-tex{to{transform:translateY(calc(28.571% + 28.571vh))}}
/* O rodapé tem overflow:hidden, o que faz dele o scroller de um view() posto
   no wordmark. Por isso o wordmark lê o timeline nomeado do próprio rodapé:
   revela enquanto os primeiros 45% dele entram na tela, que é onde ele mora. */
@supports (animation-timeline:view()){
  .ftr{view-timeline-name:--ftr}
  .logo--ftr{animation:ftr-mark linear both;animation-timeline:--ftr;animation-range:entry 0% entry 45%}
  .ftr::before{
    content:'';position:absolute;left:0;right:0;bottom:0;z-index:0;
    top:calc(-40% - 40vh);
    background:url(/img/superficie-ink-madeira.584a547b.webp) center/cover no-repeat;
    opacity:1;mix-blend-mode:normal;
    animation:ftr-tex linear both;animation-timeline:--ftr;animation-range:cover;
    will-change:transform;
  }
}
@supports not (animation-timeline:view()){
  .logo--ftr{transition:clip-path var(--t-cross) var(--ease)}
  html:not(.no-js) .ftr:not(.is-in) .logo--ftr{clip-path:inset(100% 0 0 0)}
}

/* Rodapé no celular (ajuste do Luan, 22/set): o wordmark gigante cortado
   nas bordas sai de cena e entra o lockup pequeno, alinhado à coluna. Contato
   em cima, páginas em duas colunas compactas, região e a base em seguida.
   Alvo de toque continua em 44px, mas sem o vão de 48px por linha. */
@media (max-width:859px){
  /* Sem a madeira no celular: só o degradê de Ink, como nas outras seções. */
  .ftr{
    padding-top:clamp(2.75rem,8vw,4rem);
    background:linear-gradient(180deg,#152329 0%,var(--ink) 50%,#0B161A 100%);
  }
  .ftr::before{content:none}
  .ftr__mark{padding-inline:var(--pad);margin-bottom:2.25rem}
  .logo--ftr{width:min(200px,56%);margin-inline:0;transform:none}
  .ftr__grid{grid-template-columns:1fr;gap:2rem;padding-bottom:2.25rem}
  .ftr__col .eyebrow{margin-bottom:.6rem}
  .ftr__lines{gap:0}
  .ftr__line{min-height:40px}
  .ftr__line--lg{font-size:1.5rem;min-height:44px}
  .ftr__nav{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
  .ftr__nav a{min-height:40px}
  .ftr__place{font-size:1.25rem}
  .ftr__col--end{padding-top:1.5rem;border-top:1px solid var(--line-dark)}
  .ftr__base{flex-direction:column;align-items:flex-start;gap:.35rem;padding-block:1.25rem 1.5rem}
}

/* --------------------------------------------------------------------------
   6.7 Detalhes
   -------------------------------------------------------------------------- */

/* No toque, o alvo de 48px do wordmark (02-base) era anulado pelo
   display:block do 03-chrome: o logo ficava colado no topo da caixa, 16px
   acima do centro do hambúrguer. Flex centraliza os dois na mesma linha. */
.hdr__brand{display:flex;align-items:center}

/* Header grudado: wordmark encolhe 15% junto da troca de cor. Só no
   desktop: no celular o wordmark já é pequeno e encolher desequilibra a
   barra contra o hambúrguer. */
.logo--hdr{transform-origin:left center;transition:transform var(--t-base) var(--ease)}
@media (min-width:960px){
  .hdr.is-stuck .logo--hdr{transform:scale(.85)}
}

/* Losango dentro de CTA gira 45° no hover. */
.btn .lozenge,.route__cta .lozenge{display:inline-block;transition:transform var(--t-base) var(--ease)}
.btn:hover .lozenge,.route:hover .route__cta .lozenge{transform:translateY(-1px) rotate(45deg)}
.cross__go::before{display:inline-block;transition:transform var(--t-base) var(--ease)}
.cross:hover .cross__go::before{transform:rotate(45deg)}

/* Hover de botão: o preenchimento entra da esquerda como uma cortina
   (--btn-fill), o texto troca de cor no mesmo tempo. Sem lift, sem seta. O
   fundo original fica embaixo, então o estado final é o mesmo de antes. */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  transition:color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
.btn::before{
  content:'';position:absolute;inset:-1px;z-index:-1;
  background:var(--btn-fill,transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--ease);
}
/* A cortina só em dispositivo com hover de verdade: no toque o :hover gruda
   depois do tap e o botão ficava invertido. */
@media (hover:hover){
  .btn:hover::before{transform:scaleX(1)}
}
.btn:focus-visible::before{transform:scaleX(1)}
.btn.is-pending::before{content:none}
.btn--primary{--btn-fill:var(--carta)}
.btn--primary:hover{background:var(--ink)}
.btn--solid-light{--btn-fill:var(--ink)}
.btn--solid-light:hover{background:var(--carta)}
.btn--ghost{--btn-fill:var(--fg)}
.btn--ghost:hover{background:transparent}
.btn--foil{--btn-fill:var(--ink)}
.btn--foil:hover{background:var(--travertino)}
.btn--line{--btn-fill:var(--fg)}
.btn--line:hover{background:transparent}

/* Superfícies com um leve degradê vertical: profundidade, não cor nova. */
.s--carta:not(.hero){background:linear-gradient(180deg,#F5F2EB 0%,var(--carta) 45%,#ECE8E0 100%)}
.s--ink:not(.hero):not(.proof-band){background:linear-gradient(180deg,#152329 0%,var(--ink) 50%,#0B161A 100%)}
.s--slate{background:linear-gradient(180deg,#27404A 0%,var(--slate) 50%,#1B2E36 100%)}

/* View transition entre páginas: o wordmark do hero encolhe até o header.
   Na home o nome mora no lockup enquanto ele está à vista (is-sunk troca pro
   header quando a cortina já cobriu o hero). Nome duplicado cancela a
   transição, por isso só um elemento por página carrega `brand`. */
@view-transition{navigation:auto}
.hdr__brand{view-transition-name:brand}
.p-home .hdr__brand{view-transition-name:none}
.p-home .hero__mark--textura{view-transition-name:brand}
.p-home.is-sunk .hdr__brand{view-transition-name:brand}
.p-home.is-sunk .hero__mark--textura{view-transition-name:none}
::view-transition-group(brand){animation-duration:var(--t-base);animation-timing-function:var(--ease)}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t-base);animation-timing-function:var(--ease)}

/* --------------------------------------------------------------------------
   6.8 Movimento reduzido: tudo já no estado final
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .p-home .hero__mark--textura,.p-home .hero__in--center > .eyebrow,.p-home .hero__cta{animation:none}
  .p-home .hero__in{animation:none;transform:none;opacity:1}
  .p-home .route--1,.p-home .route--3{animation:none}
  .rail--work .rail__item{animation:none;transform:none;filter:none}
  .ticker__track{animation:none}
  .ticker__set[aria-hidden]{display:none}
  .proof__stars span{opacity:1 !important;color:var(--travertino) !important}
  .logo--ftr{animation:none;clip-path:none !important}
  .ftr::before{animation:none}
  .hl__in{transform:none}
  .step::before{transform:none}
  .btn{transform:none !important}
  .btn::before{transition:none}
}