/* ============================================================
   REFINO 21/09 — ritmo, leitura e matéria, sobre a revisão 19/09.
   Carregado por último em todas as páginas. Tempos e curvas vêm da
   medição da referência (mersi-architecture.com); cores, tipos e
   conteúdo são Western.
   ============================================================ */
/* As fotos levam width/height (23/09) para reservar o espaço antes de carregar. Sem esta linha, a
   altura do atributo vence o aspect-ratio das páginas editoriais (Sobre, UNA, Collabs, Woodstone) e a
   foto sai com a altura do arquivo. :where() = peso zero: qualquer regra que defina altura continua valendo. */
:where(img) { height: auto; }
:root {
  --rf-inout: cubic-bezier(.76, 0, .24, 1);      /* power4.inOut */
  --rf-out: cubic-bezier(.215, .61, .355, 1);    /* power3.out */
  --rf-nav-h: 76px;
  --obra-tinta: var(--tinta);
}

/* ---------- 1. Noise: fixo, estático, por cima de tudo ----------
   Um tratamento único do site: o mesmo grão sobre foto, cor, menu e
   cortina de transição. Não se move. */
.grain-bg {
  display: block !important;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: 1700;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  background-image: url("../img/grain.png");
  background-size: 150px;
  background-repeat: repeat;
  opacity: .42;
  animation: none !important;
}
.transicao-grao { display: none !important; }
/* 07/10, bug "as transições estão perdendo o noise": UNA, Woodstone, A Western e Design e produtos desligam o grão
   geral (as fotos e os fundos delas já trazem o grão), e a cortina, que dependia dele, passava lisa ao sair ou chegar
   nessas páginas (medido: desvio 0,0 nas metades). Nelas, a cortina usa o grão próprio, com a força do geral. */
body[data-page="una"] .transicao-grao, body[data-page="woodstone"] .transicao-grao,
body[data-page="sobre"] .transicao-grao, body[data-page="collabs-ed"] .transicao-grao { display: block !important; opacity: .5; }

/* ---------- 2. Navegação sem faixa ----------
   Logo e texto repousam direto sobre a página e trocam de cor conforme
   o que está embaixo (refino.js lê foto ou cor sob cada lado). */
.navbar {
  height: var(--rf-nav-h) !important;
  min-height: var(--rf-nav-h) !important;
  padding: 12px var(--ws-gutter) !important;
  background: transparent !important;
  border-bottom: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  color: var(--tinta) !important;
  transition: color .5s var(--rf-out) !important;
}
.navbar::before { content: none !important; }
.navbar .nav-link,
.navbar .nav-link:not(.mob) {
  font: 500 15px/1.2 var(--font-display) !important;
  letter-spacing: 0 !important;
  color: inherit !important;
  opacity: 1 !important;
  text-shadow: none;
  /* a cor vem da barra, que já faz a transição: uma segunda transição aqui atrasava
     as palavras em relação ao Explorar (o menu parecia mudar item por item) */
  transition: text-shadow .5s var(--rf-out) !important;
}
.navbar .nav-link.menu { border-left-color: currentColor !important; border-left-color: color-mix(in srgb, currentColor 35%, transparent) !important; }
.navbar .nav-link[aria-current=page] { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.navbar .logo-nav img { transition: opacity .5s var(--rf-out) !important; }
.navbar.nav-dir-escura,
.navbar.nav-dir-foto { color: var(--marfim) !important; }

.navbar.nav-esq-escura .logo-nav .logo-escuro,
.navbar.nav-esq-foto .logo-nav .logo-escuro { opacity: 0 !important; }
.navbar.nav-esq-escura .logo-nav .logo-claro { opacity: 1 !important; }
.navbar.nav-esq-foto .logo-nav .logo-branco { opacity: 1 !important; }
.navbar.nav-esq-foto .logo-nav { filter: drop-shadow(0 0 14px rgba(25, 23, 17, .35)); }
body.menu-is-open .navbar { opacity: 0; }

/* ---------- 3. Menu Explorar: as réguas viram linhas que se desenham ---------- */
.ws-menu .nav-menu,
.ws-menu-primary > a,
.ws-menu-bottom { position: relative; border-color: transparent !important; }
[data-menu-linha] {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ws-rule);
  transform-origin: left center;
  pointer-events: none;
}
.ws-menu .nav-menu > [data-menu-linha],
.ws-menu-primary > a > [data-menu-linha] { bottom: 0; }
.ws-menu-bottom > [data-menu-linha] { top: 0; }
.ws-menu-primary > a { transition: color .45s var(--rf-out), padding-left .6s var(--rf-inout); }
.ws-menu-primary > a:hover { padding-left: 14px; color: var(--terra); }

/* ---------- 4. Home: o motor ocupa a tela inteira ---------- */
.page-home .page_view { padding-top: 0 !important; }
.ws-motor {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-height: none !important;
  min-height: 100svh !important;
  pointer-events: auto !important;
  z-index: 1;
}
.home-slider_stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
/* véu suave no alto, parte da foto (medido: #1a1a1a66 → 0 em 20rem) */
.home-slider_stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: min(288px, 32vh);
  background: linear-gradient(rgba(26, 26, 26, .4), rgba(26, 26, 26, 0));
  z-index: 4;
  pointer-events: none;
}
.ws-motor .home-slider_list_w,
.ws-motor .home-slider_list_w.left,
.ws-motor .home-slider_list_w.right {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  width: calc(50% + 1px) !important;
  display: block !important;
}
.ws-motor .home-slider_list_w.left { left: 0 !important; right: auto !important; }
.ws-motor .home-slider_list_w.right { right: 0 !important; left: auto !important; }
.ws-motor .home-slider_list { position: relative; width: 100%; height: 100%; }
.ws-motor .home-slider_item {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: clip-path;
  background: var(--verde-western);
}
.ws-motor .home-slider_item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: none !important;
}
.ws-motor .home-slider_btn_w {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: clamp(20px, 4vh, 40px) !important;
  width: auto !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  z-index: 6;
  pointer-events: auto;
}
.ws-motor .home-slider_btn_list { width: clamp(310px, 34vw, 480px); min-height: 130px; overflow: hidden; }
.ws-motor .home-slider_btn_item { position: absolute; inset: 0; will-change: clip-path; }
.ws-motor .home-slider_btn_item .etq-lin1,
.ws-motor .home-slider_btn_item .etq-meta { animation: none !important; }
.home-slider_btn .etq-meta .ws-meta-end { text-align: right; }
.home-slider_cantos {
  position: absolute;
  inset: auto var(--ws-gutter) clamp(24px, 4.4vh, 44px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 5;
  color: var(--marfim);
  font: 500 11px/1.5 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(25, 23, 17, .45);
  pointer-events: none;
}
.ws-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home-controls { display: none !important; }

/* Home — depois do motor */
.page-home .ws-manifesto { align-items: end; }
.page-home .ws-manifesto .ws-title { font-size: clamp(52px, 7.4vw, 124px); line-height: .96; letter-spacing: -.045em; }
.page-home .ws-manifesto .ws-lead { max-width: 34ch; font: var(--ws-reading)/1.6 var(--font-body); }
.ws-creation-n { font: 500 11px/1.5 var(--font-mono); letter-spacing: .06em; margin-right: 14px; opacity: .6; }
.ws-item-head h3 { margin-right: auto; }
.ws-creation img { transition: clip-path .9s var(--rf-inout), transform 1.4s var(--rf-inout); }
.ws-creation:hover img { clip-path: inset(10px); }

/* Croqui como gravura: o traço vira cor da página, sem papel por trás. */
.ws-croqui { margin: 0; min-width: 0; color: var(--areia); }
.ws-croqui-traco {
  width: 100%;
  aspect-ratio: var(--croqui-ratio, 1488 / 1052);
  background: currentColor;
  -webkit-mask: var(--croqui) center / contain no-repeat;
  mask: var(--croqui) center / contain no-repeat;
  opacity: .82;
  clip-path: inset(0 calc((1 - var(--traco, 1)) * 100%) 0 0);
}
.ws-croqui figcaption {
  margin-top: 18px;
  font: 500 11px/1.5 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
}
.ws-atelier { grid-template-columns: .9fr 1.1fr !important; gap: 8% !important; }

/* ---------- 5. Obra: sem barra, texto que lê, croqui no trilho ---------- */
.gallery_item .ws-gallery-caption { display: none !important; }
.gallery_editorial { color: var(--obra-tinta) !important; }
.gallery_editorial-k { font-size: 11px !important; letter-spacing: .1em !important; opacity: .72 !important; }
.gallery_editorial small { opacity: .8; }
.gallery_editorial p { font-family: var(--font-display) !important; font-size: clamp(22px, 1.9vw, 32px) !important; line-height: 1.22 !important; letter-spacing: -.015em; max-width: 20ch; }
@media (min-width: 992px) {
  .gallery_list > .gallery_editorial:last-child p { font-size: clamp(40px, 4.4vw, 76px) !important; line-height: 1 !important; max-width: 17ch; }
}
.gallery_croqui {
  flex: 0 0 auto;
  width: min(118vh, 92vw);
  height: 100vh;
  margin: 0;
  padding: calc(var(--rf-nav-h) + 4vh) 4vw 5vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  background: var(--obra, var(--verde-western));
  color: var(--obra-tinta);
}
.gallery_croqui-traco {
  width: 100%;
  aspect-ratio: 1488 / 1052;
  max-height: calc(100% - 40px);
  background: currentColor;
  -webkit-mask: var(--croqui) center / contain no-repeat;
  mask: var(--croqui) center / contain no-repeat;
  opacity: .86;
  clip-path: inset(0 calc((1 - var(--traco, 1)) * 100%) 0 0);
}
.gallery_croqui figcaption {
  display: flex;
  justify-content: space-between;
  font: 500 11px/1.5 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .72;
}
body[data-page="projet"] .obra-quote_w[hidden],
body[data-page="projet"] [data-ficha][hidden] { display: none !important; }

/* ---------- 6. Revelações no ritmo medido ---------- */
.ws-reveal-ready {
  opacity: 1 !important;
  transform: none !important;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.35s var(--rf-inout) !important;
}
.ws-reveal-ready.is-visible { clip-path: inset(0 0 0 0); }
.rf-linha { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.rf-linha > span { display: block; }
.rf-espera .rf-linha > span { transform: translateY(105%); }
.rf-sobe { opacity: 0; transform: translateY(22px); }
.rf-sobe.is-in { opacity: 1; transform: none; transition: opacity 1s var(--rf-out), transform 1s var(--rf-out); transition-delay: var(--rf-atraso, 0s); }

/* ---------- 7. Linhas da marca: vivas com a rolagem e o mouse ---------- */
.ws-lines { pointer-events: none; }
.ws-lines path { transition: none !important; }

/* Hover dos links: letras rolam para cima e a cópia de baixo assume. */
.rf-rola { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.25; }
.rf-rola-a, .rf-rola-b { display: block; white-space: nowrap; }
.rf-rola-b { position: absolute; left: 0; top: 100%; }
.rf-rola span > span { display: inline-block; transition: transform .45s cubic-bezier(.645, .045, .355, 1); transition-delay: calc(var(--i) * 15ms); }
a:hover > .rf-rola span > span,
a:focus-visible > .rf-rola span > span,
.nav-link.menu:hover .rf-rola span > span,
.nav-link.menu:focus-visible .rf-rola span > span { transform: translateY(-100%); }
/* Explorar segue o mesmo gesto: as letras rolam e as duas linhas se abrem. */
.navbar .nav-link.menu:hover { opacity: 1 !important; }
.navbar .menu i { transition: height .45s cubic-bezier(.645, .045, .355, 1), width .45s cubic-bezier(.645, .045, .355, 1); }
.navbar .nav-link.menu:hover i { height: 10px; width: 20px; }
.ws-footer-columns a:hover, .ws-menu-secondary a:hover, .ws-footer-bottom a:hover { text-decoration: none !important; }
.navbar .nav-link[aria-current=page] { text-decoration: none !important; }
.navbar .nav-link[aria-current=page] .rf-rola::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; }

/* ---------- 8. Celular ---------- */
@media (max-width: 767px) {
  :root { --rf-nav-h: 64px; }
  .navbar { height: 64px !important; min-height: 64px !important; padding: 10px 20px !important; }
  .navbar .nav-link.menu { font-size: 14px !important; }
  .ws-motor .home-slider_list_w.left,
  .ws-motor .home-slider_list_w.right { width: 100% !important; height: calc(50% + 1px) !important; bottom: auto !important; }
  .ws-motor .home-slider_list_w.left { top: 0 !important; }
  .ws-motor .home-slider_list_w.right { top: auto !important; bottom: 0 !important; display: block !important; }
  .ws-motor .home-slider_btn_w { bottom: auto !important; top: 50% !important; transform: translate(-50%, -50%) !important; }
  .ws-motor .home-slider_btn_list { width: min(330px, calc(100vw - 40px)); min-height: 112px; }
  .home-slider_cantos { bottom: 18px; font-size: 10px; }
  .page-home .ws-manifesto .ws-title { font-size: 54px; }
  .ws-atelier { grid-template-columns: 1fr !important; }
  .gallery_croqui { width: 100%; height: auto; min-height: 0; padding: 72px 20px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-reveal-ready { clip-path: none !important; transition: none !important; }
  .rf-espera .rf-linha > span, .rf-sobe { transform: none !important; opacity: 1 !important; }
  .ws-croqui-traco, .gallery_croqui-traco { clip-path: none !important; }
}

/* ---------- 9. Flip da home para a obra ---------- */
.transicao-flip {
  position: fixed;
  left: 0;
  top: 0;
  width: 50vw;
  height: 100vh;
  z-index: 1650;
  overflow: hidden;
  pointer-events: none;
}
.transicao-flip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.transicao.is-flip .transicao-registro { display: none !important; }

/* ---------- 10. Leitura: ajustes de contraste e colunas ---------- */
/* Especificar: o link caía na coluna do número (2rem) e quebrava palavra a palavra. */
.spec-v2-card .spec-v2-link { grid-column: 2; justify-self: start; white-space: nowrap; }
/* Texto de apoio a 72% sobre sálvia não lia; tinta cheia lê (contraste ~7:1). */
.spec-v2-card p { opacity: 1 !important; }
/* UNA: a sub-navegação fixa virava uma segunda faixa sob o menu; agora rola com a página. */
.ws-product-nav { position: relative !important; top: auto !important; background: transparent !important; }

/* ---------- 11. Véu do menu ao aproximar o mouse ----------
   Muito leve: só ajuda a leitura. Escuro quando a tinta é marfim, claro
   quando a tinta é escura. */
.navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 130%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom, rgba(249, 246, 237, .2), rgba(249, 246, 237, 0));
  transition: opacity .7s cubic-bezier(.215, .61, .355, 1);
}
.navbar.nav-dir-escura::after,
.navbar.nav-dir-foto::after { background: linear-gradient(to bottom, rgba(25, 23, 17, .08), rgba(25, 23, 17, 0)); }
.navbar.nav-perto::after { opacity: 1; }

/* ---------- 12. Etiqueta C3 (de volta, redesenhada) ----------
   Cantos curvos em diagonal, cor da obra, grão do site por cima, linhas da
   marca no canto na tinta que conversa com o fundo. */
.home-slider_btn.etq-c3 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 118px;
  padding: 22px 32px 20px 34px !important;
  border: 0 !important;
  border-radius: 3px 64px 3px 64px !important;
  box-shadow: none !important;
  color: var(--tinta);
  overflow: hidden;
  transition: background-color .9s cubic-bezier(.215, .61, .355, 1);
}
.etq-c3 .etq-facetas { display: none !important; }
.etq-c3 .etq-linhas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* As linhas vivem no miolo vazio da etiqueta e somem antes de chegar ao
   ano e à seta: nada cruza o texto. */

.etq-c3 .etq-linhas path { fill: none; stroke: rgba(25, 23, 17, .2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.etq-c3.is-escuro .etq-linhas path { stroke: rgba(216, 199, 167, .34); }
.etq-c3 .etq-lin1 { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-right: 40px; position: relative; z-index: 1; }
.etq-c3 .h2-project-btn { font: 500 clamp(20px, 1.55vw, 26px)/1.15 var(--font-display) !important; letter-spacing: -.02em; color: inherit !important; margin: 0; text-align: left !important; }
.etq-c3 .etq-ano { font: 400 11px/1 var(--font-mono) !important; letter-spacing: .06em; color: inherit !important; opacity: .7; }
.etq-c3 .etq-lin2 { display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; z-index: 1; }
.etq-c3 .etq-cat { font: 500 10.5px/1.4 var(--font-display) !important; letter-spacing: .13em; text-transform: uppercase; color: inherit !important; opacity: .76; }
.etq-c3 .etq-vai { font-size: 17px !important; line-height: 1; color: inherit !important; opacity: .8; transition: transform .45s cubic-bezier(.215, .61, .355, 1); }
.etq-c3.is-escuro { color: var(--marfim); }
.etq-c3.is-escuro .etq-vai { color: inherit !important; }
a:hover .etq-c3 .etq-vai { transform: translate(4px, -4px); }
.ws-motor .home-slider_btn_list,
.ws-motor .home-slider_btn_list { width: clamp(360px, 34vw, 540px) !important; min-height: 118px !important; border-radius: 3px 64px 3px 64px; }
@media (max-width: 767px) {
  .home-slider_btn.etq-c3 { min-height: 112px; padding: 18px 22px 16px 24px !important; border-radius: 3px 48px 3px 48px !important; gap: 10px; }
  .ws-motor .home-slider_btn_list, .ws-motor .home-slider_btn_list { width: min(340px, calc(100vw - 40px)) !important; min-height: 112px !important; border-radius: 3px 48px 3px 48px; }
  .etq-c3 .h2-project-btn { font-size: 22px !important; }
  /* no celular a linha de baixo é sempre igual: o tipo e o ano numa linha, o lugar inteiro na linha de baixo
     (06/10: o lugar partia no meio, "São / Paulo", e o ano ora ficava na linha, ora descia sozinho) */
  .etq-c3 .etq-lin2 { align-items: flex-end; }
  .home-slider_btn.etq-c3 .etq-meta-txt { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0; row-gap: 5px; }
  .etq-c3 .etq-cat { display: contents; }
  .etq-c3 .etq-tipo, .etq-c3 .etq-lugar { opacity: .76; }
  .etq-c3 .etq-sep { display: none; }
  .etq-c3 .etq-tipo { order: 1; }
  .etq-c3 .etq-meta-txt .etq-ano { order: 2; }
  .etq-c3 .etq-cat:has(.etq-tipo) + .etq-ano::before { content: "·"; margin: 0 .6em; }
  .etq-c3 .etq-lugar { order: 3; flex-basis: 100%; }
}
/* o palco das obras cobre a tela inteira também quando a barra do navegador do celular recolhe (100lvh: com
   100svh sobrava uma faixa embaixo no primeiro gesto); a troca de obra continua medida em 100svh (site.js), e o
   contador sobe o que a barra cobre, para ficar à vista com a barra aberta */
@supports (height: 100lvh) {
  .home-slider_stage { height: 100lvh; }
  @media (max-width: 767px) {
    .home-slider_cantos { bottom: calc(18px + 100lvh - 100svh); }
  }
}

/* ---------- 13. Obra: percurso em colagem, fecho e as próximas obras ---------- */
body[data-page="projet"] .project-slider_w[hidden] { display: none !important; }
@media (min-width: 992px) {
  /* Fotos na altura inteira, separadas por um respiro na cor da obra. */
  body[data-page="projet"] .gallery_list { align-items: stretch !important; background: var(--obra, var(--verde-western)); gap: clamp(44px, 4.2vw, 76px) !important; }
  body[data-page="projet"] .gallery_item {
    height: 100vh !important;
    width: calc(100vh * var(--gallery-ratio, 1.333)) !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
  body[data-page="projet"] .gallery_item img { width: 100%; height: 100%; object-fit: cover; }
}
.gallery_fecho {
  flex: 0 0 min(92vw, 1100px);
  min-height: 100vh;
  padding: calc(var(--rf-nav-h) + 6vh) 5vw 6vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  background: var(--obra, var(--verde-western));
  color: var(--obra-tinta);
}
.gallery_fecho-frase { font: 500 clamp(44px, 5.2vw, 88px)/.98 var(--font-display); letter-spacing: -.04em; margin: 0; }
.gallery_fecho-apoio { font: var(--ws-reading)/1.6 var(--font-body); max-width: 38ch; margin: 28px 0 0; }
.gallery_fecho-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.gallery_fecho-links a { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid color-mix(in srgb, currentColor 32%, transparent); text-decoration: none; font: 15px/1.4 var(--font-body); }
.gallery_fecho-links a span:first-child { font: 500 11px/1.9 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.gallery_fecho-links a:hover span:last-child { text-decoration: underline; text-underline-offset: 4px; }
.obra-seguinte { position: relative; }
@media (max-width: 991px) {
  .gallery_fecho { flex-basis: auto; min-height: 0; padding: 72px 20px 48px; }
  .gallery_fecho-links { grid-template-columns: 1fr; }
}

/* ---------- 14. O que criamos: croquis, e a obra aparece por baixo ----------
   O croqui é a peça. Ao passar o mouse, a fotografia sobe por trás do
   traço e o desenho clareia e some: do croqui à obra. */
.ws-creation--croqui figure.ws-creation-quadro {
  position: relative;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  aspect-ratio: 1488 / 1052;
  overflow: hidden;
}
.ws-creation--croqui .ws-creation-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto !important;
  clip-path: inset(100% 0 0 0) !important;
  transition: clip-path 1.1s var(--rf-inout) !important;
}
.ws-creation--croqui .ws-creation-croqui {
  position: absolute;
  inset: 0;
  background: var(--tinta);
  opacity: .86;
  transition: background-color .7s var(--rf-out), opacity .8s var(--rf-out) .2s;
}
.ws-creation--croqui:hover .ws-creation-foto,
.ws-creation--croqui:focus-visible .ws-creation-foto { clip-path: inset(0 0 0 0) !important; }
.ws-creation--croqui:hover .ws-creation-croqui,
.ws-creation--croqui:focus-visible .ws-creation-croqui { background: var(--marfim); opacity: 0; }
.ws-creation--croqui:nth-child(2) { margin-top: 120px; }
.ws-creation--croqui:nth-child(3) { margin-top: 56px; }
@media (hover: none) {
  .ws-creation--croqui .ws-creation-foto { display: none; }
}
@media (max-width: 767px) {
  .ws-creation--croqui:nth-child(n) { margin-top: 0; }
}

/* ---------- 15. Logo que reage ao fundo ----------
   Um só desenho (o PNG da marca vira máscara) pintado na cor do lado
   esquerdo: verde Western sobre claro, marfim sobre escuro ou foto. Sem
   três arquivos trocando de opacidade, o contraste é sempre o mesmo. */
.navbar .logo-nav {
  color: var(--verde-western);
  background-color: currentColor;
  -webkit-mask: url("../brand/logo-h-branco-480.webp") left center / contain no-repeat;
  mask: url("../brand/logo-h-branco-480.webp") left center / contain no-repeat;
  filter: none !important;
  transition: color .5s cubic-bezier(.215, .61, .355, 1);
}
.navbar .logo-nav img { opacity: 0 !important; visibility: hidden !important; }
.navbar.nav-esq-escura .logo-nav,
.navbar.nav-esq-foto .logo-nav { color: var(--marfim); }

/* ---------- 16. Abertura das obras: o mesmo desenho em todas ----------
   Moldura na tinta da obra (a cobre sumia sobre argila e oliva) e o título
   com altura de duas linhas, para a miniatura ficar sempre no mesmo lugar. */
body[data-page="projet"] .test-block::after { display: none !important; }
body[data-page="projet"] .project-hero-left { color: var(--obra-tinta) !important; }
body[data-page="projet"] .project-hero-left .info-date-project,
body[data-page="projet"] .project-hero-left .courte-desc { color: inherit !important; }
@media (min-width: 992px) {
  body[data-page="projet"] .h1-project {
    min-height: calc(2 * .9em);
    display: flex !important;
    flex-wrap: wrap;
    align-content: flex-end;
    column-gap: .24em;
    line-height: .9 !important;
  }
  body[data-page="projet"] .thumb_w { margin-top: auto; }
}

/* ---------- 17. Moldura Western (desenhada por refino.js) ---------- */
.rf-moldura { position: absolute; pointer-events: none; overflow: visible; z-index: 2; color: inherit; }
.rf-moldura path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .5; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s cubic-bezier(.77, 0, .175, 1); }
.rf-moldura.is-on path { stroke-dashoffset: 0; transition-duration: 1.3s; }
/* a moldura substitui as bordas quadradas antigas */
.ws-frame-picture, .project-index-card figure { border-color: transparent !important; }
.ws-frame .ws-frame-picture::after { display: none !important; }
.ws-frame-picture > img, .project-index-card figure img { border-radius: 2px 32px 2px 2px !important; }
.ws-creation--croqui figure.ws-creation-quadro { border-radius: 2px 40px 2px 2px; }
.ws-creation { position: relative; }
@media (prefers-reduced-motion: reduce) { .rf-moldura path { transition: none; } }

/* ---------- 18. Home: croqui estático no verde e caminhos alinhados ---------- */
.ws-croqui-estatico {
  width: 100%;
  aspect-ratio: var(--croqui-ratio, 1488 / 1052);
  background: currentColor;
  -webkit-mask: var(--croqui) center / contain no-repeat;
  mask: var(--croqui) center / contain no-repeat;
  opacity: .82;
}
.ws-creation:nth-child(n), .ws-creation--croqui:nth-child(n) { margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
.ws-creation-grid { align-items: start; gap: clamp(28px, 3vw, 48px) !important; }

/* ---------- 19. Hierarquia e respiro ----------
   Uma escala só. Títulos com tracking menos fechado e entrelinha que
   respira; parágrafos a 1,65; distância fixa entre bloco de texto,
   lista e números. */
:root {
  --rf-t-display: clamp(40px, 4.6vw, 72px);
  --rf-t-titulo: clamp(34px, 3.6vw, 56px);
  --rf-t-frase: clamp(22px, 1.95vw, 30px);
  --rf-t-leitura: clamp(16px, 1.12vw, 18px);
  --rf-t-apoio: 14px;
  --rf-t-rotulo: 11px;
}
.ws-title { font-size: var(--rf-t-titulo) !important; line-height: 1.08 !important; letter-spacing: -.028em !important; }
.ws-kicker, .ws-eyebrow { letter-spacing: .1em !important; }
.ws-section-head { margin-bottom: clamp(56px, 6vw, 88px) !important; }
.ws-section-head .ws-title { margin-top: 20px !important; }
.ws-section-head > p, .ws-manifesto .ws-lead, .ws-atelier .ws-lead, .ws-una-story > .ws-lead, .ws-store-world p { font-size: var(--rf-t-leitura) !important; line-height: 1.65 !important; }
.ws-item-head h3 { font-size: clamp(21px, 1.7vw, 27px) !important; letter-spacing: -.015em !important; }
.ws-creation p { font-size: var(--rf-t-apoio) !important; line-height: 1.6 !important; margin-top: 10px !important; }
.ws-atelier h2 { margin: 24px 0 28px !important; }
.ws-atelier .ws-link { margin-top: 32px !important; }

/* Obra — abertura */
body[data-page="projet"] .info-date-project { font-size: var(--rf-t-rotulo) !important; letter-spacing: .08em !important; margin-bottom: 18px !important; }
body[data-page="projet"] .courte-desc { font-size: 15px !important; line-height: 1.55 !important; max-width: 30ch; }
body[data-page="projet"] .info-desc-project { margin-top: 22px !important; }
body[data-page="projet"] .h1-project { letter-spacing: -.035em !important; }
/* Obra — texto, créditos e números */
body[data-page="projet"] .container.desc-project { justify-content: flex-start !important; gap: clamp(40px, 6vh, 72px); padding-top: calc(var(--rf-nav-h) + 10vh) !important; padding-bottom: 8vh !important; }
body[data-page="projet"] .desc-projet:not(.obra-quote) { font-size: var(--rf-t-frase) !important; line-height: 1.34 !important; letter-spacing: -.012em !important; max-width: 25ch !important; }
body[data-page="projet"] .heading { font-size: var(--rf-t-apoio) !important; line-height: 1.45; }
body[data-page="projet"] .obra-ficha { gap: 36px 56px !important; }
body[data-page="projet"] .surface { font-size: clamp(56px, 5.4vw, 84px) !important; font-weight: 500 !important; letter-spacing: -.035em !important; margin-bottom: 0 !important; }
body[data-page="projet"] .m2 { font-size: clamp(16px, 1.3vw, 20px) !important; font-weight: 500 !important; margin-left: 4px; }
body[data-page="projet"] .numero-legenda { font-size: var(--rf-t-apoio) !important; line-height: 1.5 !important; margin-top: 14px !important; max-width: 22ch !important; }
/* Obra — a frase assinada pelo cristal */
body[data-page="projet"] .obra-quote_w .container.desc-project { justify-content: center !important; gap: 28px !important; }
body[data-page="projet"] .obra-quote { font-size: clamp(26px, 2.4vw, 38px) !important; line-height: 1.24 !important; letter-spacing: -.018em !important; max-width: 19ch !important; }
body[data-page="projet"] .obra-quote_w .info-cat { font-size: 13px !important; letter-spacing: .01em; opacity: .75; }
body[data-page="projet"] .obra-quote-pedra { width: 26px !important; height: 26px !important; opacity: .7; }
/* Painéis do trilho */
.gallery_editorial { padding: calc(var(--rf-nav-h) + 8vh) clamp(32px, 3vw, 48px) 8vh !important; }
.gallery_editorial p { max-width: 19ch !important; }

/* Títulos grandes das outras páginas: menos aperto */
.projects-index-copy h1, .ws-store-copy h1, .ws-product-intro h1, .page_view h1.h1-news { letter-spacing: -.032em !important; }
.ws-footer-top .ws-footer-frase { letter-spacing: -.028em !important; line-height: 1.06 !important; }

/* ---------- 20. Explorar: as duas metades ---------- */
.ws-menu { background: transparent !important; }
.ws-menu-metade { position: fixed; top: 0; bottom: 0; width: calc(50% + 1px); background: var(--marfim); z-index: 0; pointer-events: none; }
.ws-menu-metade--esq { left: 0; }
.ws-menu-metade--dir { right: 0; }
.ws-menu > :not(.ws-menu-metade) { position: relative; z-index: 1; }

/* ---------- 21. Cada página com a sua cor ----------
   Como nas obras (painel na cor da obra + foto), toda página abre com um
   painel na sua cor característica. A cortina da troca de página usa as
   duas cores dessa abertura (ver WS_PARES_PAGE em site.js), então a
   chegada continua a mesma composição em vez de trazer outra paleta. */
body[data-page="projets"] .projects-index-intro { background: var(--areia); }
body[data-page="projets"] .projects-index-copy h1 em { color: var(--terra) !important; }





/* dentro dos painéis escuros, o texto herda o marfim e os botões invertem */

/* ---------- 22. Obra com "reduzir movimento": percurso na vertical ----------
   Sem o trilho animado, a obra vira uma leitura vertical que funciona. */
.horizontal_wrap.is-static .project-hero_w:not(.test) { display: flex !important; height: 100vh !important; width: 100% !important; }
.horizontal_wrap.is-static .section-h { width: 100% !important; min-height: 0 !important; }
.horizontal_wrap.is-static .gallery_list { background: var(--obra, var(--verde-western)); gap: 12px !important; padding: 12px !important; }
.horizontal_wrap.is-static .gallery_item { width: auto !important; height: auto !important; margin: 0 !important; aspect-ratio: var(--gallery-ratio, 1.333) !important; }
.horizontal_wrap.is-static .gallery_item img { height: 100% !important; }
.horizontal_wrap.is-static .gallery_croqui,
.horizontal_wrap.is-static .gallery_editorial,
.horizontal_wrap.is-static .gallery_fecho { grid-column: 1 / -1; width: auto !important; height: auto !important; min-height: 60vh !important; flex: none !important; }
.horizontal_wrap.is-static .gallery_croqui-traco { max-height: 70vh; }
@media (max-width: 991px) { .horizontal_wrap.is-static .project-hero_w:not(.test) { height: auto !important; flex-direction: column; } }
.horizontal_wrap.is-static .gallery_croqui-traco { aspect-ratio: auto !important; height: 60vh; width: 100%; clip-path: none !important; }
body[data-page="projet"] .h1-project .char-mask { padding-top: .16em; margin-top: -.16em; }

/* O painel colorido começa no topo, por trás da navegação (como nas obras). */
@media (min-width: 768px) {
}

/* Etiqueta: nome sozinho na primeira linha; categoria, lugar e ano na
   segunda; o canto direito fica para as linhas da marca. */
.etq-c3 .etq-lin1 { justify-content: flex-start !important; padding-right: 0 !important; }
.etq-c3 .etq-meta-txt { display: inline-flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.etq-c3 .etq-meta-txt .etq-ano { opacity: .62; }


/* ---------- 23. Páginas de conteúdo (catálogo): um modelo só ----------
   A Western, Matéria & processo, UNA e Woodstone. Abertura como nas obras
   (painel na cor da página + foto), texto em duas colunas, par detalhe /
   vista aberta, números, fecho. */
.ed-pagina { --ed-cor: var(--verde-western); --ed-tinta: var(--marfim); background: var(--marfim); color: var(--tinta); }
body[data-page="sobre"] .ed-pagina { --ed-cor: #B6926F; --ed-tinta: var(--tinta); }
body[data-page="processo"] .ed-pagina { --ed-cor: #503E2D; --ed-tinta: var(--marfim); }
body[data-page="una-ed"] .ed-pagina { --ed-cor: #414A33; --ed-tinta: var(--marfim); }
body[data-page="woodstone"] .ed-pagina { --ed-cor: #23261B; --ed-tinta: var(--marfim); }

.ed-hero { display: grid; grid-template-columns: 34% 66%; min-height: 100svh; }
.ed-hero-painel {
  background: var(--ed-cor); color: var(--ed-tinta);
  padding: calc(var(--rf-nav-h) + 12vh) clamp(24px, 2.6vw, 44px) clamp(32px, 5vh, 56px) var(--ws-gutter);
  display: flex; flex-direction: column; gap: 22px;
  --ws-rule: color-mix(in srgb, currentColor 28%, transparent);
}
.ed-hero-painel .ws-kicker { opacity: .8; }
.ed-hero-titulo { font: 500 var(--rf-t-display)/1.02 var(--font-display); letter-spacing: -.034em; margin: auto 0 0; text-wrap: balance; }
.ed-hero-lead { font: var(--rf-t-leitura)/1.6 var(--font-body); max-width: 34ch; margin: 0; }
.ed-hero-painel .ws-actions { margin-top: 10px; }
.ed-hero-painel .ws-button { background: var(--ed-tinta); color: var(--ed-cor); border-color: var(--ed-tinta); }
.ed-hero-painel .ws-link { color: inherit; }
.ed-fatos { display: flex; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--ws-rule); font: 500 var(--rf-t-rotulo)/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ed-hero-foto { position: relative; margin: 0; overflow: hidden; }
.ed-hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-hero-foto figcaption { position: absolute; left: 24px; bottom: 22px; color: var(--marfim); font: 500 var(--rf-t-rotulo)/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 0 14px rgba(25, 23, 17, .5); }

.ed-texto .ws-kicker, .ed-exposicao .ws-kicker, .ed-trio-head .ws-kicker, .ed-pessoas .ws-kicker, .ed-etapas-lista .ws-kicker { display: block; margin-bottom: 28px; opacity: .7; }
.ed-texto-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 8%; align-items: start; }
.ed-frase { font: 500 var(--rf-t-titulo)/1.1 var(--font-display); letter-spacing: -.028em; margin: 0; text-wrap: balance; }
.ed-corpo p { font: var(--rf-t-leitura)/1.7 var(--font-body); max-width: 40ch; margin: 0 0 20px; }
.ed-corpo .ws-link { margin-top: 12px; }
.ed-contato { display: grid; gap: 18px; margin: 36px 0 0; padding-top: 24px; border-top: 1px solid var(--ws-rule); }
.ed-contato dt { font: 500 var(--rf-t-rotulo)/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.ed-contato dd { margin: 4px 0 0; font: var(--rf-t-leitura)/1.6 var(--font-body); }
.ed-contato a { text-decoration: none; border-bottom: 1px solid var(--ws-rule); }

.ed-par { display: grid; grid-template-columns: 34% 66%; gap: clamp(44px, 4.2vw, 76px); padding: 0 var(--ws-gutter) var(--ws-space); align-items: end; }
.ed-par { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.ed-par figure { margin: 0; position: relative; overflow: hidden; }
.ed-par-detalhe img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.ed-par-aberta img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.ed-par figcaption, .ed-credito { margin-top: 14px; font: var(--rf-t-apoio)/1.5 var(--font-body); opacity: .75; }

.ed-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; border-top: 1px solid var(--ws-rule); }
.ed-numero strong { display: block; font: 500 clamp(48px, 5vw, 80px)/1 var(--font-display); letter-spacing: -.035em; }
.ed-numero span { display: block; margin-top: 16px; font: var(--rf-t-apoio)/1.55 var(--font-body); max-width: 30ch; }

.ed-pessoas-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: clamp(28px, 3vw, 48px); align-items: end; }
.ed-pessoas figure { margin: 0; }
.ed-pessoas figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; filter: grayscale(1); }
.ed-pessoas figcaption { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.ed-pessoas figcaption strong { font: 500 clamp(19px, 1.5vw, 24px)/1.2 var(--font-display); }
.ed-pessoas figcaption span { font: 500 var(--rf-t-rotulo)/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.ed-pessoas-texto p { font: var(--rf-t-leitura)/1.7 var(--font-body); max-width: 36ch; margin: 24px 0 0; }

.ed-trio { background: var(--areia); }
.ed-trio-head { margin-bottom: 48px; }
.ed-trio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2vw, 32px); }
.ed-trio-grid figure { margin: 0; }
.ed-trio-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }

.ed-pecas { padding: var(--ws-space) var(--ws-gutter); display: flex; flex-direction: column; gap: var(--ws-space); }
.ed-peca { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 6%; align-items: start; }
.ed-peca:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.ed-peca:nth-child(even) .ed-peca-fotos { order: 2; }
.ed-peca-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2vw, 32px); }
.ed-peca-fotos figure { margin: 0; overflow: hidden; }
.ed-peca-fotos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.ed-peca-info h3 { font: 500 var(--rf-t-titulo)/1.05 var(--font-display); letter-spacing: -.03em; margin: 18px 0 14px; }
.ed-peca-selo { display: inline-block; margin-bottom: 18px; padding: 6px 12px; border: 1px solid var(--ws-rule); border-radius: 2px 14px 2px 2px; font: 500 var(--rf-t-rotulo)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ed-peca-info > p { font: var(--rf-t-leitura)/1.65 var(--font-body); max-width: 38ch; margin: 0 0 28px; }
.ed-peca-info dl { margin: 0 0 28px; }
.ed-peca-info dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--ws-rule); }
.ed-peca-info dt { font: 500 var(--rf-t-rotulo)/1.8 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.ed-peca-info dd { margin: 0; font: var(--rf-t-apoio)/1.55 var(--font-body); }
.ed-peca-preco { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.ed-peca-preco strong { font: 500 clamp(22px, 1.9vw, 30px)/1 var(--font-display); letter-spacing: -.02em; }
.ed-peca-preco span { font: var(--rf-t-apoio)/1.4 var(--font-body); opacity: .7; }
.ed-exposicao { background: var(--areia); }

.ed-fecho { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; border-top: 1px solid var(--ws-rule); }
.ed-fecho-frase { font: 500 var(--rf-t-display)/1 var(--font-display); letter-spacing: -.035em; margin: 0; }

@media (max-width: 991px) {
  .ed-hero { grid-template-columns: 1fr; }
  .ed-hero-foto { order: -1; min-height: 62svh; }
  .ed-hero-painel { padding-top: 48px; }
  .ed-texto-grid, .ed-par, .ed-peca, .ed-peca:nth-child(even), .ed-pessoas-grid { grid-template-columns: 1fr; gap: 36px; }
  .ed-peca:nth-child(even) .ed-peca-fotos { order: 0; }
  .ed-numeros, .ed-trio-grid { grid-template-columns: 1fr; gap: 32px; }
}


/* ---------- 24. Noise vivo ----------
   O mesmo grão do estudo (salta de posição em passos de ~0,11 s), um pouco
   mais leve. Sem movimento para quem pede menos movimento. */
.grain-bg {
  opacity: .5 !important;
  animation: grao-vivo .9s steps(1) infinite !important;
}
@media (prefers-reduced-motion: reduce) { .grain-bg { animation: none !important; } }

/* ---------- 25. Cores das páginas de conteúdo ---------- */
body[data-page="processo"] .ed-pagina { --ed-cor: #6E7457; --ed-tinta: var(--marfim); }
body[data-page="collabs-ed"] .ed-pagina { --ed-cor: #503E2D; --ed-tinta: var(--marfim); }
.ed-hero-foto img { object-position: var(--ed-foco, 50% 50%); }

/* ---------- 26. As cinco etapas ----------
   Palco fixo durante ~4 telas de rolagem. A pedra de cada etapa entra por
   uma varredura de borda macia, como pincel ou molde: de cima (o molde
   cobre), de baixo (o molde sai), da direita e da esquerda (a pátina). A
   lista acompanha: a etapa ativa acende e abre o seu texto. */
.ed-etapas { --papel: #F1EAD6; background: var(--papel); position: relative; }
.ed-etapas[data-ativo] { height: 460vh; }
.ed-etapas-palco {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
  column-gap: 5%; padding: calc(var(--rf-nav-h) + 4vh) var(--ws-gutter) 6vh;
  overflow: hidden;
}
.ed-etapas:not([data-ativo]) .ed-etapas-palco { position: relative; height: auto; }
.ed-etapas-cabeca { grid-column: 2; grid-row: 1; }
.ed-etapas-cabeca .ws-kicker { display: block; margin-bottom: 20px; opacity: .7; }
.ed-etapas-pedras { grid-column: 1; grid-row: 1 / span 2; position: relative; align-self: stretch; }
.ed-etapa-pedra {
  position: absolute; left: -2%; right: 0; top: 52%; width: 104%; max-height: 92%; object-fit: contain;
  transform: translateY(-50%);
  -webkit-mask-image: var(--m, none); mask-image: var(--m, none);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  will-change: mask-image, opacity;
}
.ed-etapas-passos { grid-column: 2; grid-row: 2; list-style: none; margin: 0; padding: 0; align-self: center; }
.ed-etapas-passos li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 18px 0; border-top: 1px solid var(--ws-rule); opacity: .32; transition: opacity .6s var(--rf-out); }
.ed-etapas-passos li.is-ativo { opacity: 1; }
.ed-etapa-n { font: 500 var(--rf-t-rotulo)/2.2 var(--font-mono); letter-spacing: .08em; }
.ed-etapas-passos h3 { font: 500 clamp(22px, 1.9vw, 30px)/1.15 var(--font-display); letter-spacing: -.018em; margin: 0; }
.ed-etapa-curta { font: var(--rf-t-apoio)/1.5 var(--font-body); margin: 6px 0 0; }
.ed-etapa-longa {
  font: var(--rf-t-leitura)/1.6 var(--font-body); margin: 0; max-width: 36ch;
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  opacity: 0; max-height: 0; transition: max-height .8s var(--rf-inout), opacity .6s var(--rf-out), margin .8s var(--rf-inout);
}
.ed-etapas-passos li.is-ativo .ed-etapa-longa { opacity: .85; max-height: 8em; margin-top: 14px; }
.ed-etapas-trilho { position: absolute; left: var(--ws-gutter); right: var(--ws-gutter); bottom: 4vh; height: 1px; background: var(--ws-rule); }
.ed-etapas-trilho i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--prog, 0) * 100%); background: currentColor; opacity: .55; }
/* sem o palco fixo (celular, menos movimento): cada etapa com a sua pedra */
.ed-etapas:not([data-ativo]) .ed-etapas-palco { grid-template-columns: 1fr; row-gap: 32px; }
.ed-etapas:not([data-ativo]) .ed-etapas-cabeca, .ed-etapas:not([data-ativo]) .ed-etapas-passos { grid-column: 1; grid-row: auto; }
.ed-etapas:not([data-ativo]) .ed-etapas-pedras { display: none; }
.ed-etapas:not([data-ativo]) .ed-etapas-passos li { opacity: 1; grid-template-columns: 40px 1fr; }
.ed-etapas:not([data-ativo]) .ed-etapa-longa { opacity: .85; max-height: none; margin-top: 12px; }
.ed-etapas:not([data-ativo]) .ed-etapas-passos li::after { content: ""; grid-column: 1 / -1; aspect-ratio: 2.4; background: var(--pedra-img) center / contain no-repeat; margin-top: 8px; }
.ed-etapas:not([data-ativo]) .ed-etapas-trilho { display: none; }

/* ---------- 27. Sustentabilidade e GBC ---------- */
.ed-verde { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10%; align-items: center; background: var(--verde-western); color: var(--marfim); --ws-rule: rgba(249, 246, 237, .24); }
.ed-verde-texto .ws-kicker { display: block; margin-bottom: 26px; opacity: .7; }
.ed-verde-texto p { font: var(--rf-t-leitura)/1.7 var(--font-body); max-width: 42ch; margin: 28px 0 0; opacity: .88; }
.ed-verde-selo { display: grid; grid-template-columns: 132px 1fr; gap: 32px; align-items: center; padding-left: 40px; border-left: 1px solid var(--ws-rule); }
.ed-selo { width: 132px; aspect-ratio: 1; background: currentColor; -webkit-mask: url("../img/gbc-brasil-membro.png") center / contain no-repeat; mask: url("../img/gbc-brasil-membro.png") center / contain no-repeat; }
.ed-verde-selo .ws-kicker { opacity: .7; }
.ed-selo-titulo { font: 500 clamp(20px, 1.6vw, 26px)/1.2 var(--font-display) !important; letter-spacing: -.015em; margin: 10px 0 12px !important; opacity: 1 !important; }
.ed-verde-selo p:not(.ed-selo-titulo) { font: var(--rf-t-apoio)/1.6 var(--font-body); margin: 0; opacity: .8; max-width: 34ch; }

/* ---------- 28. Collabs: a faixa da Woodstone ---------- */
.ed-collab { background: var(--marfim); }
.ed-collab .ed-texto-grid { margin-bottom: 56px; align-items: end; }
.ed-collab .ws-kicker { display: block; margin-bottom: 24px; opacity: .7; }
.ed-faixa { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 28px); }
.ed-faixa-item { text-decoration: none; color: inherit; }
.ed-faixa-item figure { margin: 0; overflow: hidden; background: #fff; }
.ed-faixa-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform 1.2s var(--rf-inout); }
.ed-faixa-item:hover img { transform: scale(1.035); }
.ed-faixa-item span { display: block; margin-top: 14px; font: 500 var(--rf-t-rotulo)/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
body[data-page="collabs-ed"] .ed-trio { background: var(--areia); }
body[data-page="collabs-ed"] .ed-texto { background: var(--bege-claro); }

@media (max-width: 991px) {
  .ed-verde { grid-template-columns: 1fr; gap: 48px; }
  .ed-verde-selo { padding-left: 0; border-left: 0; padding-top: 32px; border-top: 1px solid var(--ws-rule); grid-template-columns: 96px 1fr; }
  .ed-selo { width: 96px; }
  .ed-faixa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body[data-page="collabs-ed"] .ed-hero-titulo { font-size: clamp(34px, 3.3vw, 52px); }

/* ---------- 29. Espaço da barra de rolagem sempre reservado ----------
   Na chegada de uma página, a barra aparecia 10–60 ms depois do primeiro
   quadro: a tela encolhia 10 px no meio da cortina e as metades pulavam
   para a esquerda. Com a barra sempre presente, a largura nunca muda
   (scrollbar-gutter não funciona com a barra estilizada do site). */
html { overflow-y: scroll; }  /* também inline no <head> de cada página, para valer desde o primeiro quadro */

/* ---------- 30. Etapas compostas na GPU ----------
   As cinco pedras dividem um quadro só (as costuras coincidem). Cada uma
   mora numa janela com máscara fixa; a varredura move a janela e a pedra
   em sentidos opostos (transform), sem repintar nada. */
.ed-etapas-quadro {
  position: absolute; left: -2%; width: 104%; top: 52%;
  aspect-ratio: 1736 / 748; max-height: 92%;
  transform: translateY(-50%);
}
.ed-etapa-janela {
  position: absolute; inset: -22%;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  will-change: transform;
}
.ed-etapa-janela > .ed-etapa-pedra {
  left: 15.2778%; top: 15.2778%; right: auto; width: 69.4444%; height: 69.4444%; max-height: none;
  object-fit: contain; transform: none;
  -webkit-mask-image: none; mask-image: none;
  will-change: transform;
}
/* texto longo: altura exata (0fr → 1fr), mesma curva para abrir e fechar */
.ed-etapa-longa { max-height: none; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--rf-inout), opacity .45s var(--rf-out), margin .8s var(--rf-inout); }
.ed-etapa-longa > span { min-height: 0; overflow: hidden; }
.ed-etapas-passos li.is-ativo .ed-etapa-longa { grid-template-rows: 1fr; max-height: none; transition-delay: 0s, .2s, 0s; }
.ed-etapas:not([data-ativo]) .ed-etapa-longa { grid-template-rows: 1fr; }
/* trilho: escala em vez de largura */
.ed-etapas-trilho i { width: 100%; transform: scaleX(var(--prog, 0)); transform-origin: 0 50%; will-change: transform; }

/* ---------- 31. Grão composto ----------
   O mesmo salto de ~0,11 s, mas movendo a camada (transform, no compositor)
   em vez de trocar background-position (repintura da tela inteira). */
@keyframes grao-passo {
  0%    { transform: translate3d(0, 0, 0); }
  12.5% { transform: translate3d(-38px, -96px, 0); }
  25%   { transform: translate3d(-108px, -12px, 0); }
  37.5% { transform: translate3d(-52px, -123px, 0); }
  50%   { transform: translate3d(-132px, -87px, 0); }
  62.5% { transform: translate3d(-27px, -24px, 0); }
  75%   { transform: translate3d(-93px, -132px, 0); }
  87.5% { transform: translate3d(-123px, -57px, 0); }
  100%  { transform: translate3d(0, 0, 0); }
}
.grain-bg {
  top: 0; left: 0; right: auto; bottom: auto;
  width: calc(100% + 150px); height: calc(100vh + 150px);
  background-position: 0 0;
  animation: grao-passo .9s steps(1) infinite !important;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .grain-bg { animation: none !important; } }

/* pedras decorativas fora do hit-test (a leitura da nav e o mouse passam direto para o papel) */
.ed-etapas-pedras { pointer-events: none; }


/* ---------- 32. Enquadramentos (auditoria 22/09) ---------- */
/* Processo: a foto em retrato mostra folhagem em cima, o degrau nítido
   inteiro e uma fatia do degrau da frente; véu leve no alto para o menu. */
body[data-page="processo"] .ed-hero-foto { --ed-foco: 50% 28%; }
body[data-page="processo"] .ed-hero-foto::after { content: ""; position: absolute; inset: 0 0 auto 0; height: clamp(110px, 16vh, 170px); background: linear-gradient(rgba(25, 23, 17, .38), rgba(25, 23, 17, 0)); pointer-events: none; }
/* A Western: a pessoa entrando na água no terço direito. */
body[data-page="sobre"] .ed-hero-foto { --ed-foco: 62% 50%; }
/* UNA: a peça quase inteira, com o mar e o pico. */
body[data-page="una-ed"] .ed-hero-foto { --ed-foco: 24% 50%; }
/* UNA: o produto recortado flutua inteiro (fundo igual ao da página). */
.ed-par-aberta img[src*="una-peca"] { object-fit: contain; background: #F9F6EA; }
/* Woodstone: as peças largas em estúdio aparecem inteiras. */
.ed-faixa-item img { aspect-ratio: 1 / 1; }
.ed-faixa-item img[src*="nucleo-estudio"], .ed-faixa-item img[src*="origem-estudio"], .ed-faixa-item img[src*="agora-estudio"],
.ed-peca-estudio img[src*="nucleo-estudio"], .ed-peca-estudio img[src*="origem-estudio"], .ed-peca-estudio img[src*="agora-estudio"] { object-fit: contain; background: #fdfdfd; }
.ed-peca-ambiente img[src*="origem-ambiente"] { object-position: 44% 50%; }
/* Especificar: o balcão revestido é o assunto do card de revestimentos. */
.spec-v2-card img[src*="revestimento-restaurante"] { object-position: 20% 50%; }
@media (max-width: 991px) {
  body[data-page="sobre"] .ed-hero-foto { --ed-foco: 72% 50%; }
  body[data-page="una-ed"] .ed-hero-foto { --ed-foco: 30% 50%; }
  body[data-page="collabs-ed"] .ed-hero-foto { --ed-foco: 46% 50%; }
  body[data-page="woodstone"] .ed-hero-foto { --ed-foco: 38% 50%; }
}


/* ---------- 33. WesternStore ----------
   Abertura com a loja real: notebook e celular desenhados em código, com as
   telas verdadeiras da loja (nítidas e sem interface inventada), pousados
   no mesmo papel das etapas. */
body[data-page="loja"] .ed-pagina { --ed-cor: #142615; --ed-tinta: var(--marfim); }
.ed-loja-cena {
  position: relative; margin: 0; background: #F1EAD6; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--rf-nav-h) + 4vh) 5vw 10vh;
}
.ed-aparelho { position: relative; }
.ed-tela { position: relative; overflow: hidden; background: #fff; }
.ed-tela img { display: block; width: 100%; height: auto; }
.ed-notebook { width: min(46vw, 760px); }
.ed-notebook .ed-tela {
  aspect-ratio: 16 / 10; border: clamp(8px, .75vw, 12px) solid #191711; border-bottom-width: clamp(12px, 1.1vw, 18px);
  border-radius: clamp(10px, 1vw, 16px) clamp(10px, 1vw, 16px) 4px 4px;
}
.ed-notebook .ed-tela img { height: 100%; object-fit: cover; object-position: top; }
.ed-notebook-base {
  display: block; height: clamp(8px, .7vw, 12px); margin: 0 -7%;
  background: linear-gradient(#D9D4C8, #B9B2A4); border-radius: 0 0 14px 14px / 0 0 10px 10px;
}
.ed-notebook-base::after { content: ""; display: block; width: 16%; height: 40%; margin: 0 auto; background: rgba(25, 23, 17, .18); border-radius: 0 0 8px 8px; }
.ed-celular {
  position: absolute; right: 7vw; bottom: 8vh; width: min(12vw, 200px);
}
.ed-celular .ed-tela {
  aspect-ratio: 9 / 19.5; border: clamp(5px, .45vw, 7px) solid #191711; border-radius: clamp(22px, 2.2vw, 34px);
}
.ed-celular .ed-tela img { height: 100%; object-fit: cover; object-position: top; }
/* sombra de contato macia no papel (a aquarela do GPT entra aqui depois) */
.ed-notebook::after, .ed-celular::after {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -26px; height: 34px; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(80, 62, 45, .28), rgba(80, 62, 45, 0));
  filter: blur(4px);
}
.ed-celular::after { bottom: -18px; height: 24px; }
.ed-loja-cena figcaption { position: absolute; left: 24px; bottom: 22px; font: 500 var(--rf-t-rotulo)/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .6; }

.ed-passos .ed-texto-grid, .ed-vitrine .ed-texto-grid, .ed-acabamentos .ed-texto-grid { margin-bottom: 56px; align-items: end; }
.ed-passos .ws-kicker, .ed-vitrine .ws-kicker, .ed-acabamentos .ws-kicker { display: block; margin-bottom: 24px; opacity: .7; }
.ed-passos-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); }
.ed-passos-lista li { padding-top: 20px; border-top: 1px solid var(--ws-rule); }
.ed-passos-lista span { font: 500 var(--rf-t-rotulo)/1.5 var(--font-mono); letter-spacing: .08em; opacity: .7; }
.ed-passos-lista h3 { font: 500 clamp(21px, 1.7vw, 27px)/1.2 var(--font-display); letter-spacing: -.015em; margin: 18px 0 10px; }
.ed-passos-lista p { font: var(--rf-t-apoio)/1.6 var(--font-body); margin: 0; max-width: 28ch; }

.ed-vitrine { background: #F1EAD6; }
.ed-vitrine-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); }
.ed-vitrine-item { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.ed-vitrine-item figure { margin: 0 0 20px; aspect-ratio: 4 / 3; overflow: visible; }
.ed-vitrine-item img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: transform 1.2s var(--rf-inout); }
.ed-vitrine-item:hover img { transform: translateY(-6px); }
.ed-vitrine-item span { font: 500 var(--rf-t-rotulo)/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .65; padding-top: 14px; border-top: 1px solid var(--ws-rule); }
.ed-vitrine-item strong { font: 500 clamp(19px, 1.5vw, 24px)/1.25 var(--font-display); letter-spacing: -.012em; margin-top: 6px; }

.ed-acab-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); }
.ed-acab-grade figure { margin: 0; }
.ed-acab-grade img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; display: block; }
.ed-acab-grade figcaption { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ws-rule); font: 500 clamp(18px, 1.4vw, 22px)/1.2 var(--font-display); }
.ed-fecho-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

@media (max-width: 991px) {
  .ed-hero--loja .ed-loja-cena { order: -1; min-height: 64svh; padding: 88px 20px 56px; }
  .ed-notebook { width: 82vw; }
  .ed-celular { width: 24vw; right: 6vw; bottom: 5vh; }
  .ed-passos-lista, .ed-vitrine-grade, .ed-acab-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 34. (removida em 22/09: o menu volta a mudar de cor inteiro, como bloco) ---------- */

/* ---------- 35. Barra de rolagem durante a cortina ---------- */
/* No Chrome, scrollbar-color desliga o ::-webkit-scrollbar de 10 px e a barra volta aos 15 px (a página
   pula 5 px): lá valem só os pseudo-elementos; o scrollbar-color fica para quem não os tem (Firefox) */
@supports not selector(::-webkit-scrollbar) { html.ws-cortina { scrollbar-color: transparent var(--ws-cortina-cor, #191711); } }
html.ws-cortina body::-webkit-scrollbar-track, html.ws-cortina::-webkit-scrollbar-track { background: var(--ws-cortina-cor, #191711); }
html.ws-cortina body::-webkit-scrollbar-thumb, html.ws-cortina::-webkit-scrollbar-thumb { background: transparent; }

/* ---------- 36. Etapas em telas baixas ----------
   Lista mais compacta para o palco fixo caber em notebooks de 768 px de
   altura; abaixo disso a seção vira leitura em lista (refino.js). */
@media (min-width: 992px) and (max-height: 820px) {
  .ed-etapas-palco { padding-top: calc(var(--rf-nav-h) + 2vh); padding-bottom: 5vh; }
  .ed-etapas-cabeca .ws-kicker { margin-bottom: 12px; }
  .ed-etapas-cabeca .ed-frase { font-size: clamp(28px, 2.6vw, 40px); }
  .ed-etapas-passos li { padding: 11px 0; }
  .ed-etapas-passos h3 { font-size: clamp(19px, 1.5vw, 24px); }
  .ed-etapas-passos li:not(.is-ativo) .ed-etapa-curta { display: none; }
  .ed-etapas-trilho { bottom: 2.5vh; }
}

/* ---------- 37. Ajustes da verificação 22/09 ---------- */
/* vitrine: a peça mais alta não empurra a legenda */
.ed-vitrine-item figure { min-height: 0; }
/* Elo: a janela quadrada desvia da borda do softbox */
.ed-faixa-item img[src*="elo-estudio"] { object-position: 72% 50%; }
/* contador da home legível sobre fotos claras */
.home-slider_stage::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: min(140px, 18vh); z-index: 4; pointer-events: none;
  background: linear-gradient(rgba(25, 23, 17, 0), rgba(25, 23, 17, .3) 45%, rgba(25, 23, 17, .62));
}
/* fim do trilho das obras: o fecho ocupa a tela inteira e o painel anterior sai por completo */
@media (min-width: 992px) {
  .gallery_fecho { flex-basis: 100vw !important; width: 100vw; }
}

/* ---------- 38. Chão das etapas (aquarelas de apoio) ----------
   Caixa estendida em relação ao quadro das pedras: -12%/-10%, 124% x 165%
   (mesma caixa em que as camadas foram montadas). Fica atrás das pedras. */
.ed-etapas-chaos { position: absolute; inset: 0; pointer-events: none; }
.ed-chao { position: absolute; left: -12%; top: -10%; width: 124%; height: 165%; max-width: none; opacity: 0; will-change: opacity; }
.ed-etapas:not([data-ativo]) .ed-etapas-chaos { display: none; }

/* ---------- 39. WesternStore: fotos com as telas reais ---------- */
.ed-loja-foto-celular { display: none; }
.ed-loja-mesa { position: relative; margin: 0; height: min(100vh, 66vw); overflow: hidden; }
.ed-loja-mesa img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }  /* o alto da tampa do notebook sai de baixo da nav */
.ed-loja-mesa figcaption { position: absolute; left: var(--ws-gutter); bottom: 24px; color: var(--marfim); font: 500 var(--rf-t-rotulo)/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 0 14px rgba(25, 23, 17, .5); }
@media (max-width: 991px) {
  .ed-hero--loja .ed-loja-cena { padding: 0; min-height: 0; background: none; display: block; }
  .ed-hero--loja .ed-loja-cena .ed-aparelho { display: none; }
  .ed-loja-foto-celular { display: block; width: 100%; aspect-ratio: 2 / 3; max-height: 78svh; object-fit: cover; object-position: 50% 42%; }
  /* tablet: a foto inteira (notebook e celular) na proporção dela */
  .ed-loja-mesa { height: auto; aspect-ratio: 3 / 2; }
}

/* ---------- 40. Cinema do processo (Pedra Grande 3) ----------
   Sem JS ou com "reduzir movimento": lista das cinco etapas com as fotos.
   Com JS (data-ativo): palco fixo; a rolagem conduz o vídeo nos trechos em que a
   câmera anda e, no meio (câmera fixa), o canvas WebGL desenha o quadro contínuo
   (o JS cria o .ed-cinema-gl logo depois do vídeo). As fotos nítidas cobrem as
   pontas paradas e, sem WebGL, o meio em passos. */
.ed-cinema { --papel: #F1EAD6; position: relative; background: var(--papel); color: var(--tinta); overflow-anchor: none; }
.ed-cinema-palco { padding: calc(var(--rf-nav-h) + 6vh) var(--ws-gutter) 10vh; }
.ed-cinema-tela, .ed-cinema-veu, .ed-cinema-trilho { display: none; }
.ed-cinema-cabeca .ws-kicker { display: block; margin-bottom: 20px; opacity: .7; }
.ed-cinema-cabeca { margin-bottom: 48px; }
.ed-cinema-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 56px; }
.ed-cinema-passos li { display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; padding-top: 18px; border-top: 1px solid var(--ws-rule); }
.ed-cinema-passos h3 { font: 500 clamp(22px, 1.9vw, 30px)/1.15 var(--font-display); letter-spacing: -.018em; margin: 0; }
.ed-cinema-passos .ed-etapa-curta { font: var(--rf-t-apoio)/1.5 var(--font-body); margin: 6px 0 0; }
.ed-cinema-passos .ed-etapa-longa { font: var(--rf-t-leitura)/1.6 var(--font-body); margin: 14px 0 0; max-width: 46ch; opacity: .85; }
.ed-cinema-lista-foto { grid-column: 1 / -1; display: block; margin-top: 22px; }
.ed-cinema-lista-foto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-aspect-ratio: 1/1) { .ed-cinema-lista-foto img { aspect-ratio: 4 / 5; } }

.ed-cinema[data-ativo] { height: 900vh; }
.ed-cinema[data-ativo] .ed-cinema-palco { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
.ed-cinema[data-ativo] .ed-cinema-tela { display: block; position: absolute; inset: 0; background: #16150f; overflow: hidden; }
.ed-cinema-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* o canvas do meio: começa transparente e o JS faz a troca com o vídeo onde a câmera está parada */
.ed-cinema-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
/* a miniatura borrada fica atrás do quadro nítido enquanto ele baixa */
.ed-cinema-quadro { position: absolute; inset: 0; display: block; opacity: 0; will-change: opacity; background: var(--lqip-d) center / cover no-repeat; }
/* o alto do filme escurece de leve: a nav marfim lê sobre o pátio e a prainha */
.ed-cinema-tela::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 220px; pointer-events: none; background: linear-gradient(rgba(22, 21, 15, .5), rgba(22, 21, 15, 0)); }
.ed-cinema-tela * { pointer-events: none; }
.ed-cinema-quadro img:not([src]) { visibility: hidden; }
/* nav sobre o filme enquanto o palco entra ou sai de baixo dela: véu escuro atrás da barra
   (com o palco fixo quem faz esse papel é o véu do alto da tela) */
html.ws-nav-filme .navbar::before { content: "" !important; display: block; opacity: 1 !important; position: absolute; inset: 0 0 auto 0; height: 170%; z-index: -1; pointer-events: none; background: linear-gradient(rgba(22, 21, 15, .5), rgba(22, 21, 15, 0)); }
/* antes do JS assumir (ou se ele falhar): a abertura e o título à mostra, nunca palco vazio */
.ed-cinema[data-ativo]:not([data-vivo]) [data-parada="abertura"] { opacity: 1; }
.ed-cinema-quadro img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* véu de baixo forte o bastante para o marfim passar de 4,5:1 até sobre a areia da prainha */
.ed-cinema[data-ativo] .ed-cinema-veu { display: block; position: absolute; inset: auto 0 0 0; height: 66vh; pointer-events: none; background: linear-gradient(rgba(22, 21, 15, 0) 0%, rgba(22, 21, 15, .52) 40%, rgba(22, 21, 15, .8) 100%); }
.ed-cinema[data-ativo] .ed-cinema-passos .ed-etapa-longa { opacity: 1; }
.ed-cinema[data-ativo] .ed-cinema-lista-foto { display: none; }
.ed-cinema[data-ativo] .ed-cinema-cabeca,
.ed-cinema[data-ativo] .ed-cinema-passos { position: absolute; left: var(--ws-gutter); bottom: 11vh; width: min(560px, 46vw); margin: 0; color: var(--marfim); text-shadow: 0 1px 18px rgba(22, 21, 15, .35); }
/* troca de texto em sequência: o que sai some rápido e o que entra espera (nunca dois juntos) */
.ed-cinema[data-ativo] .ed-cinema-cabeca { opacity: 0; transform: translateY(14px); transition: opacity .25s var(--rf-out), transform .4s var(--rf-out); }
.ed-cinema[data-ativo] .ed-cinema-cabeca.is-ativo,
.ed-cinema[data-ativo]:not([data-vivo]) .ed-cinema-cabeca { opacity: 1; transform: none; transition: opacity .6s var(--rf-out) .24s, transform .8s var(--rf-out) .24s; }
.ed-cinema[data-ativo] .ed-cinema-passos { display: block; }
.ed-cinema[data-ativo] .ed-cinema-passos li { position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid rgba(249, 246, 237, .35); opacity: 0; transform: translateY(14px); transition: opacity .25s var(--rf-out), transform .4s var(--rf-out); pointer-events: none; }
.ed-cinema[data-ativo] .ed-cinema-passos li.is-ativo { opacity: 1; transform: none; pointer-events: auto; transition: opacity .6s var(--rf-out) .24s, transform .8s var(--rf-out) .24s; }
.ed-cinema[data-ativo] .ed-cinema-trilho { display: block; position: absolute; left: var(--ws-gutter); right: var(--ws-gutter); bottom: 5vh; height: 1px; background: rgba(249, 246, 237, .3); }
.ed-cinema-trilho i { position: absolute; inset: 0; background: var(--marfim); transform: scaleX(var(--prog, 0)); transform-origin: 0 50%; will-change: transform; }
/* celular em pé: o filme (4:5) fica numa janela abaixo da nav e o texto no papel */
@media (max-aspect-ratio: 1/1) {
  .ed-cinema[data-ativo] .ed-cinema-tela { inset: auto 0 auto 0; top: var(--rf-nav-h); width: 100%; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--rf-nav-h) - 220px); }
  .ed-cinema[data-ativo] .ed-cinema-veu, .ed-cinema-tela::after { display: none; }
  .ed-cinema-quadro { background-image: var(--lqip-c); }
  /* o texto encosta logo abaixo da janela do filme (altura = a da janela 4:5, limitada pela tela) */
  .ed-cinema[data-ativo] .ed-cinema-cabeca,
  .ed-cinema[data-ativo] .ed-cinema-passos { left: var(--ws-gutter); right: var(--ws-gutter); width: auto; bottom: auto; top: calc(var(--rf-nav-h) + min(125vw, 100svh - var(--rf-nav-h) - 220px) + 26px); color: var(--tinta); text-shadow: none; }
  .ed-cinema[data-ativo] .ed-cinema-passos li { top: 0; bottom: auto; border-top-color: var(--ws-rule); }
  .ed-cinema[data-ativo] .ed-cinema-passos .ed-etapa-longa { display: none; }
  .ed-cinema[data-ativo] .ed-cinema-trilho { bottom: 3svh; background: var(--ws-rule); }
  .ed-cinema-trilho i { background: var(--tinta); }
}
/* telas baixas no computador: o texto longo sai para não encostar no título */
@media (min-aspect-ratio: 1/1) and (max-height: 720px) {
  .ed-cinema[data-ativo] .ed-cinema-passos .ed-etapa-longa { display: none; }
}

/* ---------- 41. Contraste e enquadramento (verificação de 22/09) ---------- */
/* celular: a janela da foto da mesa pega a tela inteira do notebook */
@media (max-width: 767px) {
  .ed-loja-mesa { height: 72svh; aspect-ratio: auto; }
  .ed-loja-mesa img { object-position: 51% 50%; }   /* a tampa inteira do notebook (foto endireitada de 22/09) */
}
/* legendas sobre foto: um degradê no rodapé, porque o piso ou a madeira claros apagam o marfim */
.ed-loja-mesa::after, .ed-hero-foto::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 120px; pointer-events: none;
  background: linear-gradient(rgba(25, 23, 17, 0), rgba(25, 23, 17, .55));
}
.ed-loja-mesa figcaption, .ed-hero-foto figcaption { z-index: 1; }
/* contador da home: o número pequeno ganha um halo curto além do degradê */
.home-slider_cantos { text-shadow: 0 0 3px rgba(25, 23, 17, .7), 0 0 14px rgba(25, 23, 17, .35); }

/* ---------- 42. Catálogos (23/09 — substitui o Especifique) ----------
   Três catálogos lado a lado. A capa é provisória (cor da paleta + o canto da marca) até os PDFs
   ficarem prontos; o link de baixar fica apagado enquanto o arquivo não existe (.is-placeholder). */
body[data-page="catalogos-ed"] .ed-pagina { --ed-cor: #9AA284; --ed-tinta: var(--tinta); }
.ed-catalogos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); align-items: start; }
.ed-catalogo .ed-catalogo-capa {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 3 / 4; padding: clamp(20px, 2vw, 32px); margin-bottom: 26px;
  border-radius: 2px 32px 2px 2px; background: var(--verde-western); color: var(--marfim);
}
.ed-catalogo-capa--produtos { background: var(--areia) !important; color: var(--tinta) !important; }
.ed-catalogo-capa--design { background: #414A33 !important; color: var(--marfim) !important; }
.ed-catalogo-capa span, .ed-catalogo-capa em { font: 500 11px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; opacity: .8; }
.ed-catalogo-capa strong { margin-top: auto; margin-bottom: 14px; font: 500 clamp(26px, 2.4vw, 38px)/1.08 var(--font-display); letter-spacing: -.025em; max-width: 9ch; }
.ed-catalogo .ws-kicker { opacity: .7; }
.ed-catalogo h3 { margin: 12px 0 10px; font: 500 clamp(21px, 1.7vw, 27px)/1.2 var(--font-display); letter-spacing: -.015em; }
.ed-catalogo p { max-width: 36ch; font: var(--rf-t-apoio)/1.6 var(--font-body); }
.ed-catalogo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 18px; }
.ed-catalogo .is-placeholder { opacity: .45; pointer-events: none; }
.ed-catalogo-status { font: 500 11px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
@media (max-width: 991px) {
  .ed-catalogos { grid-template-columns: 1fr; gap: 56px; }
  .ed-catalogo .ed-catalogo-capa { aspect-ratio: 4 / 3; }
}

/* ---------- 43. PT / EN na barra (23/09) ----------
   O idioma fica à vista em qualquer tela, fora do Explorar, e muda de cor junto
   com o resto do menu (a cor vem da barra). O ativo fica cheio; o outro, apagado. */
.navbar .lang-switch { display: flex !important; align-items: center; gap: 5px; margin: 0; font: 500 15px/1.2 var(--font-display) !important; letter-spacing: 0 !important; }
.navbar .lang-switch .lang-op { min-height: 44px; display: inline-flex; align-items: center; padding: 0 1px; color: inherit !important; text-decoration: none !important; opacity: .7; font: inherit !important; letter-spacing: inherit !important; transition: opacity .3s var(--rf-out); }
@media (hover: hover) { .navbar .lang-switch .lang-op:hover { opacity: .9; } }
.navbar .lang-switch .lang-op:focus-visible { opacity: .9; }
.navbar .lang-switch .lang-op.is-on { opacity: 1; color: inherit !important; }
.navbar .lang-switch .lang-sep { opacity: .35; }
@media (max-width: 991px) {
  .navbar .lang-switch { font-size: 14px !important; }
}
/* no celular não cabem dois alvos de 44 px entre o logo e o Explorar: fica só o
   outro idioma, cheio, como uma ação (EN nas páginas em português, PT nas em inglês) */
@media (max-width: 767px) {
  .navbar .lang-switch .lang-op.is-on, .navbar .lang-switch .lang-sep { display: none !important; }
  .navbar .lang-switch .lang-op:not(.is-on) { opacity: 1; min-width: 44px; justify-content: center; font-size: 15px !important; }
}

/* ---------- 44. Celular: uma construção própria (23/09) ----------
   Revisão medida a 360, 390 e 430 px (relatório mobile de 23/09): o site encolhia
   em vez de se reorganizar. No celular: uma coluna, margem de 20 px, uma escada de
   espaço fixa, quatro tamanhos de texto (rótulo nunca abaixo de 11 px), nenhum
   painel com altura de tela fora da abertura e alvos de toque de 44 px. */
@media (max-width: 767px) {
  :root {
    --ws-gutter: 24px;
    --ws-space: 76px;                            /* 152 px entre faixas: o respiro de antes */
    --rf-nav-h: 64px;
    --rf-t-display: clamp(36px, 10.3vw, 44px);   /* abertura e fecho: 37 @360 · 40 @390 · 44 @430 */
    --rf-t-titulo: clamp(28px, 7.7vw, 32px);     /* seção e rodapé */
    --rf-t-frase: 22px;                          /* frase editorial, citação, título de cartão */
    --rf-t-leitura: 16px;
    --rf-t-apoio: 14px;
    --rf-t-rotulo: 11px;
  }

  /* escada de espaço: rótulo → título 12, título → texto 20, texto → foto 32 */
  .ed-texto .ws-kicker, .ed-exposicao .ws-kicker, .ed-trio-head .ws-kicker, .ed-pessoas .ws-kicker,
  .ed-collab .ws-kicker, .ed-passos .ws-kicker, .ed-acabamentos .ws-kicker,
  .ed-verde-texto .ws-kicker, .ed-cinema-cabeca .ws-kicker { margin-bottom: 16px; }
  .ws-section-head { gap: 20px; margin-bottom: 40px !important; }
  .ws-section-head .ws-title { margin-top: 16px !important; }
  .ed-texto-grid, .ed-peca { gap: 24px; }
  .ed-corpo p { margin-bottom: 16px; }
  .ed-collab .ed-texto-grid, .ed-passos .ed-texto-grid { margin-bottom: 40px; }
  .page-home .ws-manifesto { padding-bottom: 96px; }
  .page-home .ws-manifesto .ws-lines { height: 96px; margin-bottom: -96px; }

  /* títulos: display na abertura e no fecho, título de seção no resto; sem palavra sozinha */
  .ed-hero-titulo, .projects-index-copy h1, .contact-v2-intro h1, .legal-v2-head h1, .ed-fecho-frase, .gallery_fecho-frase {
    font-size: var(--rf-t-display) !important; line-height: 1.02 !important; letter-spacing: -.034em; text-wrap: balance;
  }
  .ws-title, .ed-frase, .ws-footer-top .ws-footer-frase, .legal-v2-grid h2 { font-size: var(--rf-t-titulo) !important; line-height: 1.1 !important; text-wrap: balance; }
  .desc-projet, .obra-quote, .gallery_editorial p, .ed-frase { text-wrap: pretty; }

  /* A. aberturas com painel e foto: foto → rótulo → título → texto → ações */
  .ed-hero { min-height: 0; }
  .ed-hero-foto { order: -1; min-height: 0; height: 56svh; max-height: 520px; }
  .ed-hero-foto figcaption { left: var(--ws-gutter); }
  .ed-hero-painel { padding: 40px var(--ws-gutter) 48px !important; gap: 16px; }
  .ed-hero-titulo { margin: 0; }
  .ed-hero-lead { margin-top: 8px; }
  .ed-hero-painel .ws-actions { margin-top: 12px; }
  .ed-fatos { flex-wrap: wrap; justify-content: flex-start; gap: 8px 24px; }
  .ed-hero--loja .ed-loja-foto-celular { max-height: 56svh; }

  /* B. abertura da obra: foto → Obra · ano · lugar → nome → frase. A miniatura (alvo
     do voo da home, que não existe abaixo de 768 px) sai. */
  body[data-page="projet"] .project-hero-right { height: 56svh; max-height: 520px; }
  body[data-page="projet"] .project-hero-left { min-height: 0 !important; padding: 36px var(--ws-gutter) 48px !important; display: flex; flex-direction: column; justify-content: flex-start !important; gap: 0 !important; }
  body[data-page="projet"] .thumb_w { display: contents; }
  body[data-page="projet"] .info-date-project { order: -2; margin: 0 !important; }
  body[data-page="projet"] .h1-project { order: -1; margin: 12px 0 0 !important; font-size: var(--rf-t-display) !important; line-height: 1 !important; }
  body[data-page="projet"] .info-desc-project { margin-top: 16px !important; }
  body[data-page="projet"] .test-block { display: none !important; }

  /* C. o corpo da obra: sem painéis de altura de tela, margem de 20 px */
  body[data-page="projet"] .section-h { min-height: 0 !important; }
  body[data-page="projet"] .container.desc-project { padding: 76px var(--ws-gutter) !important; gap: 40px !important; }
  body[data-page="projet"] .obra-quote_w .container.desc-project { padding: 72px var(--ws-gutter) !important; gap: 20px !important; }
  body[data-page="projet"] .obra-ficha { gap: 24px !important; }
  body[data-page="projet"] .desc-projet:not(.obra-quote) { max-width: 24ch !important; }
  body[data-page="projet"] .obra-quote { font-size: var(--rf-t-frase) !important; max-width: 24ch !important; }
  body[data-page="projet"] .obra-quote_w .info-cat { font-size: 14px !important; }

  /* D. listas numeradas: número em cima, régua de 1 px, 14 px de respiro */
  .ed-passos-lista { grid-template-columns: 1fr !important; gap: 0 !important; }
  .ed-passos-lista li { padding: 14px 0; }
  .ed-passos-lista h3 { font-size: var(--rf-t-frase); margin: 8px 0 6px; }
  .ed-cinema-passos li { grid-template-columns: 1fr !important; row-gap: 4px; }
  .legal-v2-head { min-height: 0 !important; padding: 40px var(--ws-gutter) 48px !important; gap: 20px; }
  .legal-v2-head { align-items: flex-start !important; }
  .legal-v2-head h1 { margin: 12px 0 0 !important; align-self: flex-start !important; max-width: none !important; text-align: left !important; }
  .contact-v2-intro h1 { max-width: none !important; }
  .legal-v2-grid article { min-height: 0 !important; padding: 56px var(--ws-gutter) !important; gap: 16px; }
  .legal-v2-grid h2 { margin: 0 0 12px !important; max-width: none !important; }
  .legal-v2-head > span, .legal-v2-head strong, .legal-v2-grid article > span, .legal-v2-bottom { font-size: 11px !important; }
  .legal-v2-bottom { display: none !important; }
  .contact-v2-bottom a { font-size: 11px !important; min-height: 44px; display: inline-flex; align-items: center; }
  .contact-v2-address small { font-size: 14px !important; }

  /* E. par de fotos e pessoas: a vista aberta primeiro, o detalhe menor ao lado */
  .ed-par { padding: 0 0 var(--ws-space); gap: 12px; }
  .ed-par-aberta { order: -1; }
  .ed-par-detalhe { width: 64%; margin: 0 var(--ws-gutter) 0 auto; }
  .ed-par figcaption { margin: 10px var(--ws-gutter) 0; }
  .ed-pessoas-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .ed-pessoas-texto { grid-column: 1 / -1; }
  .ed-pessoas figcaption strong { font-size: 17px; }
  .ed-contato dd a { min-height: 44px; display: inline-flex; align-items: center; }

  /* F. números */
  .ed-numeros { grid-template-columns: 1fr; gap: 0; }
  .ed-numero { padding: 24px 0; border-top: 1px solid var(--ws-rule); }
  .ed-numero:first-child { border-top: 0; }
  .ed-numero strong { font-size: 44px; }
  .ed-numero span { margin-top: 8px; }
  body[data-page="una-ed"] .ed-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  body[data-page="una-ed"] .ed-numero { border-top: 0; padding: 16px 0 0; }
  body[data-page="una-ed"] .ed-numero strong { font-size: 30px; }
  .ed-verde-selo { grid-template-columns: 1fr !important; row-gap: 16px; }

  /* G. galeria da obra e frases editoriais: a altura vem do texto */
  body[data-page="projet"] .gallery_list { gap: 8px; background: var(--obra, var(--verde-western)); }
  .gallery_editorial { min-height: 0 !important; padding: 72px var(--ws-gutter) !important; }
  .gallery_editorial p { font-size: var(--rf-t-frase) !important; max-width: 24ch !important; }
  .gallery_croqui { padding: 64px var(--ws-gutter) 40px !important; }
  .gallery_fecho { padding: 76px var(--ws-gutter) 64px !important; }

  /* H. cartões: imagem → número · categoria → título → texto, tudo a 20 px */
  .ws-creation-grid { gap: 64px !important; }
  .ws-item-head { flex-wrap: wrap; row-gap: 6px; margin-top: 14px; }
  .ws-creation-n { order: -1; flex-basis: 100%; margin: 0; }
  .ws-item-head h3 { font-size: var(--rf-t-frase) !important; }
  .project-index-card figure { padding: 0 !important; }
  .project-index-meta { grid-template-columns: 1fr !important; gap: 6px !important; padding: 16px 0 0 !important; }
  .project-index-number { padding-top: 0 !important; }
  .project-index-facts { grid-column: 1 !important; font-size: 11px !important; }
  .project-index-meta h2 { font-size: var(--rf-t-frase) !important; }
  .projects-index-filters { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--ws-gutter)); padding: 0 var(--ws-gutter); }
  .projects-index-filters::-webkit-scrollbar { display: none; }
  .projects-index-filters button { flex: 0 0 auto; }
  .projects-index-close > span { font-size: 11px !important; }

  /* I. rodapé: título de seção, links de 44 px */
  .ws-footer { padding: 76px var(--ws-gutter) 0 !important; }
  .ws-footer-top { gap: 40px !important; }
  .ws-footer-top .ws-footer-frase { margin: 12px 0 20px !important; }
  .ws-footer-columns { gap: 24px 20px !important; }
  .ws-footer-columns > div { gap: 0 !important; }
  .ws-footer-columns a { font-size: 15px !important; min-height: 44px; display: flex !important; align-items: center; }
  .ws-footer .ws-lines { height: 64px; }
  .ws-footer-bottom { flex-direction: column; align-items: flex-start !important; gap: 0 !important; padding: 12px 0 24px !important; font-size: 11px !important; }
  .ws-footer-bottom a { min-height: 44px; display: flex; align-items: center; }

  /* textos pequenos que escapavam dos tokens (rem antigos e regras de 10 px) */
  .home-slider_cantos, .ws-finish-current .ws-kicker, .ws-menu-bottom { font-size: 11px !important; }
  .ws-finish-options button { font-size: 13px !important; }
  .etq-c3 .etq-cat { font-size: 11px !important; }

  /* barra e menu: alvos de 44 px, Explorar em 15 px */
  .navbar .logo-nav { height: 44px !important; }
  .navbar .nav-link.menu { font-size: 15px !important; }
  .ws-menu-secondary a { min-height: 44px; display: flex; align-items: center; }

  /* Woodstone: a peça em ambiente em largura total; o estúdio menor, abaixo, à direita */
  .ed-peca-fotos { grid-template-columns: 1fr !important; gap: 8px !important; }
  .ed-peca-ambiente { order: -1; }
  .ed-peca-estudio { width: 64%; justify-self: end; }

  /* Próxima obra: no celular, um cartão no lugar do motor de oito telas */
  .obra-proxima { padding: 76px var(--ws-gutter) 80px; background: var(--marfim); color: var(--tinta); }
  .obra-proxima > .ws-kicker { display: block; margin-bottom: 16px; }
  .obra-proxima-link { display: block; color: inherit; text-decoration: none; }
  .obra-proxima-foto { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px 36px 2px 2px; background: var(--areia); }
  .obra-proxima-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .obra-proxima .home-slider_btn { position: relative; height: auto; margin: -56px 0 0; width: calc(100% - 24px); }
  .obra-proxima-todas { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 20px; font: 500 15px/1.2 var(--font-display); color: inherit; text-decoration: none; }

  /* cinema: a altura de 9 telas fica (é o ritmo em que o vídeo da câmera acompanha o dedo; com 6
     telas a aproximação cabia numa passada e o zoom saía aos trancos); o texto longo fica à vista */
}
@media (max-width: 767px) and (max-aspect-ratio: 1/1) {
  .ed-cinema[data-ativo] .ed-cinema-passos .ed-etapa-longa { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-size: 15px; line-height: 1.5; margin-top: 8px; opacity: .85; }
}

/* Toque (celular e tablet): nada depende do mouse e o movimento é curto. */
@media (hover: none) and (pointer: coarse) {
  /* a barra sai do caminho ao descer e volta ao subir, com um véu na cor do fundo */
  .navbar { transition: color .5s var(--rf-out), transform .35s var(--rf-out) !important; }
  .navbar.nav-recolhida { transform: translateY(-100%); }
  .navbar.nav-veu::after { opacity: 1 !important; height: 150%; background: linear-gradient(to bottom, rgba(249, 246, 237, .94) 50%, rgba(249, 246, 237, 0)) !important; }
  .navbar.nav-veu.nav-dir-escura::after,
  .navbar.nav-veu.nav-dir-foto::after { background: linear-gradient(to bottom, rgba(25, 23, 17, .55) 45%, rgba(25, 23, 17, 0)) !important; }
  /* entradas: 12 px e 0,6 s */
  .rf-sobe { transform: translateY(12px); }
  .rf-sobe.is-in { transition-duration: .6s, .6s; }
  /* etiqueta do motor troca inteira no meio da troca */
  .ws-motor .home-slider_btn_item { transition: opacity .18s linear; }
  /* três caminhos: a obra sobe por trás do croqui conduzida pela rolagem (o JS dá --foto) */
  .ws-creation--croqui .ws-creation-foto { display: block !important; clip-path: inset(calc((1 - var(--foto, 0)) * 100%) 0 0 0) !important; transition: none !important; }
  .ws-creation--croqui .ws-creation-croqui { opacity: calc(.86 * (1 - var(--foto, 0))) !important; transition: none !important; }
  /* hover que gruda no toque: neutralizado */
  .ws-creation--croqui:hover .ws-creation-croqui { background: var(--tinta) !important; }
  .ws-creation:hover img { clip-path: none !important; }
  .ws-menu-primary > a:hover { padding-left: 0 !important; color: inherit !important; }
  .contact-v2-routes > a:hover { background: transparent !important; color: inherit !important; }
  .projects-index-filters button:not(.is-active):hover { background: transparent !important; color: inherit !important; }
  .navbar .nav-link:hover { transform: none !important; }
  .nav-r:hover .nav-link:not(:hover):not(.w--current) { opacity: 1 !important; }
  .ed-faixa-item:hover img, .ed-vitrine-item:hover img { transform: none !important; }
  .ws-link:hover > span, .ws-button:hover > span, a:hover .etq-vai, a:hover .etq-c3 .etq-vai { transform: none !important; }
  .obra-volta-fluxo:hover, .cta-caixa:hover, .grid__state__2__link:hover { transform: none !important; }
}

/* Tablet (768-991): os valores do celular crescendo sem degrau, grades de 2 e 3 colunas. */
@media (min-width: 768px) and (max-width: 991px) {
  :root { --ws-gutter: 32px; --ws-space: 72px; --rf-t-display: clamp(44px, 6vw, 56px); --rf-t-titulo: 36px; }
  body[data-page="projet"] .h1-project { font-size: var(--rf-t-display) !important; }
  body[data-page="projet"] .project-hero-right { height: 62svh; }
  .ed-hero-foto { min-height: 56svh; }
  .ed-pessoas-grid, .ed-par { grid-template-columns: 1fr 1fr; }
  .ed-numeros { grid-template-columns: repeat(3, 1fr); }
  .ed-faixa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ed-catalogos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body[data-page="projet"] .section-h { min-height: 0 !important; }
  .gallery_editorial { min-height: 0 !important; }
}

/* ---------- 45. Imagens sob demanda (23/09) ----------
   Croqui cuja máscara ainda não entrou (site.js, wsMascaras): invisível, nunca um bloco de cor. */
[data-croqui] { --croqui: linear-gradient(transparent, transparent); }

/* ---------- 46. Fotos do UNA fora da página dele (25/09) ----------
   As fotos tratadas do catálogo aprovado (assets/img/una-site) em Design e produtos: toda imagem gerada leva
   "imagem ilustrativa" na vertical, na borda direita da foto (regra do dono); a peça recortada fica no campo
   de areia com o mesmo grão do catálogo, nunca numa cor chapada. Na página do UNA, o una.css manda. */
.ed-pagina .ed-par-detalhe, .ed-pagina .ed-par-aberta { position: relative; }
.ed-pagina .u-ilustrativa { position: absolute; z-index: 3; right: 12px; bottom: 18%; writing-mode: vertical-rl; transform: rotate(180deg);
  font: 500 10px/1 "Spline Sans Mono", ui-monospace, Consolas, monospace; letter-spacing: .18em; text-transform: uppercase;
  color: #f9f6ed; text-shadow: 0 0 10px #191711cc; opacity: .85; pointer-events: none; }
@media (min-width: 992px) { .ed-pagina .u-ilustrativa { font-size: 11px; right: 16px; } }
.ed-pagina .ed-par-aberta img[src*="peca-topo"] { object-fit: contain; padding: 6% 8%; box-sizing: border-box;
  background-color: #d8c7a7; background-size: 256px 256px;
  background-image: image-set(url("../img/una-site/grao-areia-256.jpg") 1x, url("../img/una-site/grao-areia-512.jpg") 2x, url("../img/una-site/grao-areia-768.jpg") 3x); }
.ed-pagina .ed-par-aberta:has(img[src*="peca-topo"]) .u-ilustrativa { color: #191711; text-shadow: none; opacity: .62; }

/* ---------- 47. O filme da home (06/10/2026) ----------
   Depois dos três caminhos, em tela larga: a capa no mesmo filme das fotos, o play marfim de canto curvo, e a
   legenda em mono embaixo. O vídeo só carrega no clique (assets/js/filme.js). No celular, de borda a borda. */
.ws-filme { display: grid; gap: 16px; }
.ws-filme-quadro { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px 32px 2px 2px; background: #191711; }
.ws-filme-quadro :is(video, .ws-filme-capa) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ws-filme-capa { transition: opacity .6s cubic-bezier(.16, 1, .3, 1); }
.ws-filme-quadro.is-pronto .ws-filme-capa { opacity: 0; pointer-events: none; }
.ws-filme-play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; display: grid; place-items: center;
  border: 0; border-radius: 2px 28px 2px 2px; background: var(--marfim, #f9f6ed); color: #191711; cursor: pointer;
  box-shadow: 0 12px 32px rgba(25, 23, 17, .3); transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .3s; }
.ws-filme-play svg { width: 36px; height: 36px; }
.ws-filme-play path { fill: currentColor; }
.ws-filme-play:focus-visible { outline: 2px solid var(--marfim, #f9f6ed); outline-offset: 4px; }
@media (hover: hover) { .ws-filme-play:hover { transform: scale(1.06); } }
.ws-filme-quadro.is-carregando .ws-filme-play { opacity: .72; cursor: progress; }
.ws-filme-quadro.is-pronto .ws-filme-play { display: none; }
.ws-filme-erro { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px; margin: 0; padding: 14px 16px; background: var(--marfim, #f9f6ed);
  color: #191711; border-radius: 2px 14px 2px 2px; font: 400 15px/1.45 var(--font-body, "Satoshi", sans-serif); }
.ws-filme-legenda { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin: 0;
  font: 500 var(--rf-t-rotulo, 11.5px)/1.5 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
@media (max-width: 767px) {
  .ws-filme-quadro { margin: 0 calc(var(--ws-gutter, 20px) * -1); border-radius: 0; }
  .ws-filme-play { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
}

/* ---------- 48. Perguntas frequentes (06/10/2026) ----------
   Os blocos curtos das páginas e a página "Perguntas" (texto aprovado pelo dono; tools/faq_site.py). Acordeão com
   <details>: abre pelo teclado e sem JS; o + vira − (o traço em pé deita). As linhas usam --ws-rule, então o bloco
   serve em fundo claro e escuro. Computador: o título à esquerda, as perguntas à direita; abaixo de 900 px, um
   embaixo do outro. */
.faq-bloco, .faq-grupo, .faq-pagina-fecho { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 120px); align-items: start; }
.faq-bloco { padding: var(--ws-space) var(--ws-gutter); }
.faq-titulo { margin: 0; font: 500 var(--rf-t-titulo)/1.04 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.faq-bloco > .faq-lista, .faq-bloco > .faq-pe, .faq-grupo > .faq-lista, .faq-pagina-fecho > a { grid-column: 2; }
.faq-pagina-fecho > a { justify-self: start; }
.faq-lista { border-bottom: 1px solid var(--ws-rule); }
.faq-item { border-top: 1px solid var(--ws-rule); }
.faq-item > summary { display: grid; grid-template-columns: minmax(0, 1fr) 16px; align-items: center; gap: 28px; min-height: 44px; padding: 24px 0;
  cursor: pointer; list-style: none; font: 500 clamp(18px, 1.4vw, 22px)/1.32 var(--font-display); letter-spacing: -.012em; text-wrap: pretty;
  -webkit-tap-highlight-color: transparent; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary > span { text-decoration: underline 1px transparent; text-underline-offset: .22em; transition: text-decoration-color .3s; }
@media (hover: hover) and (pointer: fine) { .faq-item > summary:hover > span { text-decoration-color: currentColor; } }
.faq-item > summary:active > span { opacity: .66; }
.faq-sinal { position: relative; width: 16px; height: 16px; }
.faq-sinal::before, .faq-sinal::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -.75px; background: currentColor;
  transition: transform .5s var(--ws-ease); }
.faq-sinal::after { transform: rotate(90deg); }
.faq-item[open] .faq-sinal::after { transform: rotate(0deg); }
.faq-resposta { padding: 0 44px 30px 0; }
.faq-resposta p { max-width: 62ch; margin: 0; font: 400 var(--rf-t-leitura)/1.65 var(--font-body); }
.faq-resposta p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.faq-resposta .faq-link { margin-top: 18px; }
.faq-link { gap: 18px; }
.faq-pe { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 28px 0 0; }
/* abrir e fechar com altura animada onde o navegador sabe (Chrome 131+); nos outros, abre na hora */
@supports selector(::details-content) {
  .faq-lista { interpolate-size: allow-keywords; }
  .faq-item::details-content { block-size: 0; overflow-y: clip; transition: block-size .55s var(--ws-ease), content-visibility .55s allow-discrete; }
  .faq-item[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content, .faq-sinal::before, .faq-sinal::after { transition: none !important; }
}
/* onde os blocos caem: na home, junto dos três caminhos; em Obras, dentro da listagem, antes de "Tem um lugar em
   mente?" (o site.js leva o bloco para lá); antes de um fecho na mesma cor (que abre com uma linha), um respiro
   menor que o de seção, para o link não encostar na linha nem o vão dobrar */
.ws-creations + .faq-bloco { padding-top: 0; }
.projects-index-shell > .faq-bloco { padding: clamp(72px, 8vw, 128px) 0 0; }
.faq-bloco:has(+ .ed-fecho) { padding-bottom: clamp(56px, 6.5vw, 104px); }

/* a página "Perguntas": o título grande como na página legal, os grupos como atalhos e, no computador, o nome do
   grupo parado ao lado das perguntas dele enquanto a lista passa */
.faq-pagina { padding: clamp(136px, 13vw, 196px) var(--ws-gutter) var(--ws-space); }
.faq-pagina-cabeca { display: grid; gap: clamp(28px, 3vw, 44px); padding-bottom: clamp(56px, 7vw, 112px); }
.faq-pagina-titulo { margin: 0; font: 500 clamp(48px, 9vw, 152px)/.9 var(--font-display); letter-spacing: -.04em; }
.faq-indice { display: flex; flex-wrap: wrap; gap: 0 28px; }
.faq-indice a { display: inline-flex; align-items: center; min-height: 44px; font: 500 11px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid var(--ws-rule); transition: border-color .3s; }
@media (hover: hover) and (pointer: fine) { .faq-indice a:hover { border-color: currentColor; } }
.faq-grupo { scroll-margin-top: 96px; }
.faq-grupo + .faq-grupo { margin-top: clamp(64px, 7vw, 112px); }
.faq-grupo-nome { position: sticky; top: 112px; margin: 0; padding-top: 20px; font: 500 var(--rf-t-frase)/1.15 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.faq-pagina-fecho { margin: clamp(72px, 8vw, 128px) 0 0; }

@media (max-width: 899px) {
  .faq-bloco, .faq-grupo, .faq-pagina-fecho { grid-template-columns: minmax(0, 1fr); }
  .faq-bloco > .faq-lista, .faq-bloco > .faq-pe, .faq-grupo > .faq-lista, .faq-pagina-fecho > a { grid-column: 1; }
  .faq-titulo { margin-bottom: 28px; }
  .faq-grupo-nome { position: static; padding-top: 0; margin-bottom: 20px; }
}
@media (max-width: 767px) {
  .faq-bloco { padding: 72px var(--ws-gutter); }
  .projects-index-shell > .faq-bloco { padding: 64px 0 0; }
  .faq-item > summary { gap: 20px; padding: 20px 0; font-size: 18px; }
  .faq-resposta { padding: 0 0 24px; }
  .faq-resposta p { font-size: 16px; }
  .faq-pagina { padding-top: 116px; }
  .faq-indice { gap: 0 20px; }
}

/* ---------- 49. Contato: o título nas duas linhas do texto (07/10/2026) ----------
   "Queremos criar<br>com você." saía em três linhas no computador ("Queremos / criar / com você."): a largura máxima de
   8,5 caracteres (site.css) quebrava a primeira linha. Sem ela, o tamanho de sempre cabe na coluna de 992 a 1920 px
   (medido: a linha mais longa ocupa 89% da coluna). No celular já era assim (seção 44). */
.contact-v2-intro h1 { max-width: none; }