/* ==========================================================================
   Dra. Francielle Terrinha — base do site
   Sistema: 02-conceito/sistema.md. Parede (creme) / Tampo (carvalho) / Frente (marinho).
   Classes compartilhadas têm prefixo wf-. Cada seção usa o próprio prefixo.
   ========================================================================== */
:root{
  /* cores: carvalho e marinho da mesa dela, parede clara */
  --parede:#f5eee4;
  --parede-2:#ecdcc6;
  --parede-3:#dde4ea;
  --carvalho:#e2a465;
  --carvalho-claro:#f2c894;
  --carvalho-tinta:#3a2410;      /* texto sobre o tampo */
  --carvalho-fio:#b9793f;        /* fio fino em tom de madeira, sobre parede */
  --marinho:#16233b;
  --marinho-2:#203254;
  --marinho-fundo:#0f1829;
  --tinta:#1a2436;
  --tinta-suave:#4d5769;
  --creme:#f7f0e5;
  --creme-suave:rgb(247 240 229 / .78);
  --ceu:#cfe3f4;                 /* só na seção da cadeira: o céu da janela da sala clínica */
  --ceu-fundo:#abcfef;
  --fio:rgb(26 36 54 / .14);
  --fio-claro:rgb(247 240 229 / .18);
  /* tipografia */
  --serifa:"Brygada 1918", Georgia, serif;
  --sem:"Familjen Grotesk", system-ui, sans-serif;
  --h2:clamp(40px, 5.4vw, 88px);
  --h3:clamp(23px, 2.1vw, 32px);
  --corpo:clamp(16px, 1.18vw, 19px);
  --miudo:13px;
  /* espaço, forma, movimento */
  --margem:6vw;
  --secao:clamp(84px, 11vw, 172px);
  --raio:22px;
  --raio-p:12px;
  --curva:cubic-bezier(.2,.7,.2,1);
  --curva-estende:cubic-bezier(.65,0,.2,1);
  /* geometria do hero (só o hero usa) */
  --alt:clamp(680px, 100svh, 1000px);
  --hp:calc(var(--alt) * 1.1);
  --wp:calc(var(--hp) * 0.7948);
  --linha:calc(var(--alt) * 0.615);
  --y0:calc(var(--linha) - var(--hp) * 0.687);
  --x0:calc(94vw - var(--wp) * 0.87);
  --tampo:calc(var(--hp) * 0.134);
  --frente:calc(var(--y0) + var(--hp) * 0.821);
  --gigante:min(calc(var(--alt) * .24), calc((88vw - var(--alt) * .695 - 18px) / 3.08));
  --linha-h1:min(calc(var(--alt) * .118), 7.4vw, calc((88vw - var(--alt) * .695 - 34px) / 4.8));
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;background:var(--parede);scroll-behavior:smooth;scroll-padding-top:24px}
body{font-family:var(--sem);font-size:var(--corpo);line-height:1.55;color:var(--tinta);background:var(--parede);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.hero img{max-width:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
.wf-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wf-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- seção ---------- */
.wf-secao{position:relative;padding:var(--secao) var(--margem);isolation:isolate}
.wf-parede{background:var(--parede);color:var(--tinta)}
.wf-frente{background:radial-gradient(70vw 90% at 18% 0, rgb(52 78 122 / .42), transparent 70%), linear-gradient(180deg, #17243d 0, var(--marinho-fundo) 70%);color:var(--creme)}

/* malha da parede: três manchas que derivam devagar. Pôr <div class="wf-malha" aria-hidden="true"><i></i><i></i><i></i></div> como primeiro filho */
.wf-malha{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.wf-malha i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.wf-malha i:nth-child(1){width:60vw;height:60vw;left:-16vw;top:-22vw;background:radial-gradient(closest-side, color-mix(in oklch, var(--parede-2) 90%, white), transparent);animation:wf-deriva1 34s ease-in-out infinite alternate}
.wf-malha i:nth-child(2){width:54vw;height:54vw;right:-14vw;top:-10vw;background:radial-gradient(closest-side, var(--parede-3), transparent);animation:wf-deriva2 28s ease-in-out infinite alternate}
.wf-malha i:nth-child(3){width:52vw;height:52vw;left:22vw;bottom:-30vw;background:radial-gradient(closest-side, color-mix(in oklch, var(--carvalho-claro) 50%, var(--parede)), transparent);animation:wf-deriva3 38s ease-in-out infinite alternate}
@keyframes wf-deriva1{to{transform:translate3d(5vw,3vw,0) scale(1.08)}}
@keyframes wf-deriva2{to{transform:translate3d(-6vw,4vw,0) scale(1.12)}}
@keyframes wf-deriva3{to{transform:translate3d(7vw,-3vw,0) scale(.94)}}
/* granulado: <div class="wf-grao" aria-hidden="true"></div> como último filho de uma seção com position:relative */
.wf-grao{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>")}

/* ---------- tipografia ---------- */
.wf-olho{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave)}
.wf-olho::before{content:"";width:34px;height:1px;background:currentColor}
.wf-frente .wf-olho,.wf-olho--claro{color:var(--creme-suave)}
.wf-h2{font-family:var(--serifa);font-weight:400;font-size:var(--h2);line-height:.98;letter-spacing:-.022em;text-wrap:balance}
.wf-h2 em{font-style:italic;color:var(--marinho-2)}
.wf-frente .wf-h2 em{color:var(--carvalho-claro)}
.wf-h3{font-family:var(--serifa);font-weight:500;font-size:var(--h3);line-height:1.12;letter-spacing:-.012em}
.wf-texto{color:var(--tinta-suave);max-width:34em}
.wf-texto strong{color:var(--tinta);font-weight:600}
.wf-frente .wf-texto{color:var(--creme-suave)}
.wf-frente .wf-texto strong{color:var(--creme)}
.wf-citacao{font-family:var(--serifa);font-style:italic;line-height:1.3}
.wf-citacao cite{display:block;font-family:var(--sem);font-style:normal;font-size:12.5px;letter-spacing:.06em;margin-top:8px;opacity:.7}

/* ---------- ações ---------- */
.wf-botao{display:inline-flex;align-items:center;gap:11px;padding:15px 25px 15px 21px;border-radius:999px;background:var(--marinho);color:var(--creme);font-weight:600;font-size:16px;line-height:1.2;box-shadow:0 14px 30px -14px rgb(22 35 59 / .7);transition:transform .35s var(--curva), background .3s}
.wf-botao:hover{transform:translateY(-2px);background:var(--marinho-2)}
.wf-botao svg{width:19px;height:19px;flex:none}
.wf-botao--carvalho{background:var(--carvalho-claro);color:var(--marinho);box-shadow:0 14px 34px -14px rgb(242 200 148 / .55)}
.wf-botao--carvalho:hover{background:#f8d9af}
.wf-link{display:inline-flex;align-items:baseline;gap:8px;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:3px;transition:gap .3s var(--curva)}
.wf-link:hover{gap:13px}
.wf-frente .wf-link{color:var(--carvalho-claro);border-color:rgb(242 200 148 / .5)}

/* ---------- o tampo: faixa de carvalho, sempre horizontal ---------- */
/* <div class="wf-tampo" aria-hidden="true"></div>. Espessura em --t. As coisas ficam em pé sobre ele. */
.wf-tampo{position:relative;height:var(--t, clamp(58px, 7.4vw, 118px));
  background:
    linear-gradient(180deg, rgb(50 30 12 / .5) 0, transparent 3px),
    linear-gradient(180deg, transparent 0, transparent 76%, #e9b888 76%, #e7b583 100%),
    linear-gradient(180deg, #d0935a 0, #dc9c5e 30%, #e4a464 76%)}
.wf-tampo::before{content:"";position:absolute;inset:0;opacity:.2;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1400' height='140'><filter id='v'><feTurbulence type='fractalNoise' baseFrequency='.0022 .42' numOctaves='4' seed='11'/><feColorMatrix values='0 0 0 0 .34  0 0 0 0 .19  0 0 0 0 .07  0 0 0 1.5 -.42'/></filter><rect width='1400' height='140' filter='url(%23v)'/></svg>");background-size:max(100%, 1400px) 100%}
.wf-tampo::after{content:"";position:absolute;left:0;right:0;top:100%;height:30px;background:linear-gradient(180deg, rgb(6 10 18 / .42), transparent);pointer-events:none}
.wf-tampo--sem-sombra::after{display:none}
/* tampo que sangra para fora do padding da seção */
.wf-sangra{margin-left:calc(var(--margem) * -1);margin-right:calc(var(--margem) * -1)}

/* ---------- palavra em pé sobre o tampo ---------- */
/* svg de 1x1 com overflow visível: a linha de base do texto cai exatamente no topo do svg.
   Posicione o svg (left/top) no ponto da linha de base. Tamanho em --tam. */
.wf-em-pe{position:absolute;width:1px;height:1px;overflow:visible;pointer-events:none}
.wf-em-pe text{font-family:var(--serifa);font-style:italic;font-weight:400;font-size:var(--tam, 120px);letter-spacing:-.03em}
.wf-em-pe .letras{fill:url(#wf-luz-letras)}
.wf-em-pe .sombra{fill:#2c1704;opacity:.5}
.wf-em-pe .sombra-longa{fill:#3a2008;opacity:.16}
.wf-em-pe--marfim .letras{fill:url(#wf-luz-marfim)}

/* ---------- janela: foto de canto arredondado em cima, apoiada num tampo ou numa linha ---------- */
.wf-janela{position:relative;border-radius:var(--raio) var(--raio) 0 0;overflow:hidden;background:#2b3038}
.wf-janela img{width:100%;height:100%;object-fit:cover}
.wf-janela::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 22px 44px -18px rgb(10 16 28 / .5), inset 16px 0 30px -20px rgb(10 16 28 / .35), inset -16px 0 30px -20px rgb(10 16 28 / .35), inset 0 0 0 1px rgb(255 255 255 / .16)}
.wf-etiqueta{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:999px;background:rgb(15 24 41 / .5);backdrop-filter:blur(8px);color:var(--creme);font-size:12px;letter-spacing:.08em;line-height:1.2}
.wf-etiqueta::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--carvalho-claro)}

/* ---------- entrada na rolagem ---------- */
/* [data-revela] some até entrar na tela; .visto dispara. Atraso por --d. data-revela="pousa" cai de cima. */
.js [data-revela]{opacity:0}
.js [data-revela].visto{animation:wf-sobe .95s var(--d, 0s) both var(--curva)}
.js [data-revela="pousa"].visto{animation-name:wf-pousa}
.js [data-revela="aparece"].visto{animation-name:wf-aparece}
@keyframes wf-sobe{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes wf-pousa{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
@keyframes wf-aparece{from{opacity:0}to{opacity:1}}
@keyframes wf-estende{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- WhatsApp que acompanha a rolagem ---------- */
.wf-zap-fixo{position:fixed;right:18px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;display:inline-flex;align-items:center;gap:10px;padding:14px 20px 14px 16px;border-radius:999px;background:var(--carvalho-claro);color:var(--marinho);font-weight:600;font-size:15.5px;line-height:1;box-shadow:0 16px 36px -12px rgb(10 16 28 / .55), 0 0 0 1px rgb(22 35 59 / .12);opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .4s, transform .5s var(--curva)}
.wf-zap-fixo.aparente{opacity:1;transform:none;pointer-events:auto}
.wf-zap-fixo svg{width:20px;height:20px}
@media (max-width:820px){ .wf-zap-fixo{left:16px;right:16px;justify-content:center;padding:16px 20px} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wf-malha i{animation:none}
  .js [data-revela]{opacity:1;animation:none !important}
  .wf-zap-fixo{transition:none}
}


/* ===== hero ===== */
/* hero aprovado (E · Antes da cadeira, a mesa). Tudo com escopo em .hero; animações com prefixo h- */
.hero{font-size:16px;line-height:normal}
/* ---------- navegação ---------- */
.hero .nav{position:absolute;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px var(--margem)}
.hero .marca{display:flex;flex-direction:column;line-height:1.1}
.hero .marca b{font-family:var(--serifa);font-weight:500;font-size:20px;letter-spacing:.01em}
.hero .marca span{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--tinta-suave);margin-top:5px}
.hero .nav nav{display:flex;align-items:center;gap:28px;font-size:15px;color:var(--tinta-suave)}
.hero .nav nav a{padding:6px 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.hero .nav nav a:hover{color:var(--tinta);border-color:var(--tinta)}
.hero .nav .zap{display:inline-flex;align-items:center;gap:9px;padding:10px 17px;border:1px solid rgb(26 36 54 / .28);border-radius:999px;color:var(--tinta);font-weight:500;background:rgb(255 255 255 / .35);backdrop-filter:blur(6px)}
.hero .nav .zap:hover{border-color:var(--tinta);background:rgb(255 255 255 / .6)}
.hero .nav .zap svg{width:17px;height:17px}
/* ---------- hero ---------- */
.hero{position:relative;height:var(--alt);overflow:hidden;background:var(--parede);isolation:isolate}
/* malha da parede */
.hero .malha{position:absolute;inset:0 0 auto 0;height:var(--linha);z-index:-3;overflow:hidden;background:var(--parede)}
.hero .malha i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.hero .malha i:nth-child(1){width:62vw;height:62vw;left:-18vw;top:-36vw;background:radial-gradient(closest-side, color-mix(in oklch, var(--parede-2) 90%, white), transparent);animation:h-deriva1 34s ease-in-out infinite alternate}
.hero .malha i:nth-child(2){width:56vw;height:56vw;left:26vw;top:-34vw;background:radial-gradient(closest-side, var(--parede-3), transparent);animation:h-deriva2 28s ease-in-out infinite alternate}
.hero .malha i:nth-child(3){width:50vw;height:50vw;left:6vw;top:10vw;background:radial-gradient(closest-side, color-mix(in oklch, var(--carvalho-claro) 52%, var(--parede)), transparent);animation:h-deriva3 38s ease-in-out infinite alternate}
.hero .malha i:nth-child(4){width:44vw;height:44vw;right:-10vw;top:-4vw;background:radial-gradient(closest-side, color-mix(in oklch, var(--carvalho-claro) 30%, white), transparent);animation:h-deriva1 30s ease-in-out infinite alternate-reverse}
@keyframes h-deriva1{to{transform:translate3d(5vw,3vw,0) scale(1.08)}}
@keyframes h-deriva2{to{transform:translate3d(-6vw,4vw,0) scale(1.12)}}
@keyframes h-deriva3{to{transform:translate3d(7vw,-3vw,0) scale(.94)}}
.hero .malha::before{content:"";position:absolute;left:-12vw;width:78vw;bottom:-22vh;height:56vh;border-radius:50%;background:radial-gradient(closest-side, rgb(240 190 132 / .62), rgb(242 200 148 / .22) 60%, transparent);filter:blur(36px);animation:h-rebate 22s ease-in-out infinite alternate}
.hero .malha::after{content:"";position:absolute;right:-8vw;top:-18vh;width:60vw;height:60vh;border-radius:50%;background:radial-gradient(closest-side, rgb(196 210 226 / .7), transparent);filter:blur(50px)}
@keyframes h-rebate{from{opacity:.72;transform:translateX(-3vw)}to{opacity:1;transform:translateX(6vw)}}
.hero .grao{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>")}
/* ---------- cena: a mesa sai da foto ---------- */
.hero .cena{position:absolute;inset:0;z-index:-1}
.hero .ext{position:absolute;top:var(--y0);height:var(--hp);background-repeat:no-repeat;background-size:100% 100%;clip-path:inset(68.72% 0 0 0)}
.hero .ext-esq{left:0;width:calc(var(--x0) + var(--wp) * .09);background-image:url(../img/e-faixa-esq.png);transform-origin:100% 50%}
.hero .ext-dir{left:calc(var(--x0) + var(--wp) * .9);right:0;background-image:url(../img/e-faixa-dir.png)}
.hero .foto{position:absolute;left:var(--x0);top:var(--y0);height:var(--hp);width:var(--wp)}
.hero .foto-mesa{clip-path:inset(68.62% 0 0 0);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
/* a janela para a sala de conversa */
.hero .janela{position:absolute;left:var(--x0);top:var(--y0);height:var(--hp);width:var(--wp);clip-path:inset(24% 13% 31.3% 7.5% round 22px 22px 0 0)}
.hero .janela img{width:100%;height:100%;transform:translate3d(calc(var(--px,0) * -7px), calc(var(--py,0) * -4px), 0) scale(1.02);transform-origin:50% 68%;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.hero .janela::after{content:"";position:absolute;inset:24% 13% 31.3% 7.5%;border-radius:22px 22px 0 0;box-shadow:inset 0 22px 44px -18px rgb(10 16 28 / .55), inset 16px 0 30px -20px rgb(10 16 28 / .4), inset -16px 0 30px -20px rgb(10 16 28 / .4), inset 0 0 0 1px rgb(255 255 255 / .16)}
.hero .janela figcaption{position:absolute;left:calc(7.5% + 16px);top:calc(24% + 15px);z-index:2;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:999px;background:rgb(15 24 41 / .46);backdrop-filter:blur(8px);color:var(--creme);font-size:12px;letter-spacing:.08em}
.hero .janela figcaption::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--carvalho-claro)}
/* veio da madeira, contínuo, para a emenda sumir */
.hero .veio{position:absolute;left:0;right:0;top:var(--linha);height:var(--tampo);opacity:.2;mix-blend-mode:multiply;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--x0) - 4vw),rgb(0 0 0 / .25) calc(var(--x0) + var(--wp) * .12));mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--x0) - 4vw),rgb(0 0 0 / .25) calc(var(--x0) + var(--wp) * .12));
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1400' height='140'><filter id='v'><feTurbulence type='fractalNoise' baseFrequency='.0022 .42' numOctaves='4' seed='11'/><feColorMatrix values='0 0 0 0 .34  0 0 0 0 .19  0 0 0 0 .07  0 0 0 1.5 -.42'/></filter><rect width='1400' height='140' filter='url(%23v)'/></svg>");background-size:1400px 100%}
/* luz da janela andando sobre o tampo */
.hero .luz{position:absolute;left:0;top:var(--linha);height:var(--tampo);width:44vw;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(closest-side, rgb(255 246 228 / .8), transparent);animation:h-luz 26s ease-in-out infinite alternate}
@keyframes h-luz{from{transform:translateX(-12vw)}to{transform:translateX(34vw)}}
/* frente da mesa: marinho por cima de tudo, da quina para baixo */
.hero .frente{position:absolute;left:0;right:0;top:var(--frente);bottom:0;
  background:
    radial-gradient(60vw 120% at 18% 0, rgb(52 78 122 / .5), transparent 70%),
    linear-gradient(180deg, rgb(24 38 64 / .88) 0, rgb(19 30 52 / .96) 30%, var(--marinho-fundo) 78%)}
.hero .frente::before{content:"";position:absolute;inset:0 0 auto 0;height:30px;background:linear-gradient(180deg, rgb(6 10 18 / .5), transparent)}
/* ---------- o título ---------- */
.hero .titulo{position:absolute;left:var(--margem);top:calc(var(--alt) * .212);z-index:5;width:calc(var(--x0) + var(--wp) * .075 - var(--margem) - 30px)}
.hero .olho{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave)}
.hero .olho::before{content:"";width:34px;height:1px;background:currentColor}
h1{font-family:var(--serifa);font-weight:400;font-size:var(--linha-h1);line-height:.96;letter-spacing:-.024em;margin-top:calc(var(--alt) * .022);color:var(--tinta)}
h1 span{display:block}
h1 .l3{font-style:italic;color:var(--marinho-2)}
/* "a mesa." em pé sobre o tampo */
.hero .palavra{position:absolute;left:calc(var(--margem) - var(--gigante) * .035);top:calc(var(--linha) + var(--tampo) * .2);width:1px;height:1px;overflow:visible;z-index:4;pointer-events:none}
.hero .palavra text{font-family:var(--serifa);font-style:italic;font-weight:400;font-size:var(--gigante);letter-spacing:-.03em}
.hero .palavra .letras{fill:url(#luz-letras)}
.hero .palavra .sombra{fill:#2c1704;opacity:.5}
.hero .palavra .sombra-longa{fill:#3a2008;opacity:.16}
/* ---------- na frente da mesa ---------- */
.hero .na-frente{position:absolute;left:var(--margem);right:var(--margem);top:var(--frente);bottom:0;z-index:5;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr) minmax(0,.95fr);align-items:center;gap:clamp(24px,3.6vw,64px);color:var(--creme)}
.hero .apoio{font-size:clamp(15px, 1.2vw, 18px);line-height:1.5;color:rgb(247 240 229 / .82);max-width:34em}
.hero .apoio strong{color:var(--creme);font-weight:600}
.hero .botao{display:inline-flex;align-items:center;gap:11px;margin-top:16px;padding:14px 24px 14px 20px;border-radius:999px;background:var(--carvalho-claro);color:var(--marinho);font-weight:600;font-size:16px;box-shadow:0 14px 34px -14px rgb(242 200 148 / .55);transition:transform .35s cubic-bezier(.2,.7,.2,1), background .3s}
.hero .botao:hover{transform:translateY(-2px);background:#f8d9af}
.hero .botao svg{width:19px;height:19px;flex:none}
.hero .prova{border-left:1px solid rgb(247 240 229 / .2);padding-left:clamp(20px,2.6vw,44px)}
.hero .nota{display:flex;align-items:baseline;gap:12px}
.hero .nota b{font-family:var(--serifa);font-weight:400;font-size:clamp(34px, 3.2vw, 50px);line-height:1;letter-spacing:-.02em}
.hero .nota small{font-size:13px;line-height:1.35;color:rgb(247 240 229 / .8)}
.hero .nota small i{font-style:normal;display:block;letter-spacing:.22em;color:var(--carvalho-claro);font-size:12px}
.hero .voz{font-family:var(--serifa);font-style:italic;font-size:clamp(15px,1.16vw,17.5px);line-height:1.36;margin-top:10px;color:rgb(247 240 229 / .92)}
.hero .voz cite{display:block;font-family:var(--sem);font-style:normal;font-size:12px;letter-spacing:.06em;margin-top:5px;color:rgb(247 240 229 / .6)}
.hero .placa{display:flex;align-items:center;justify-content:flex-end;gap:clamp(16px,2vw,30px)}
.hero .quem{font-size:13px;line-height:1.55;color:rgb(247 240 229 / .7);text-align:right}
.hero .quem b{display:block;font-family:var(--serifa);font-weight:500;font-size:18px;color:var(--creme);letter-spacing:.01em;margin-bottom:2px}
.hero .depois{position:relative;flex:none;display:block;width:clamp(84px,7.2vw,112px);border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgb(255 255 255 / .18), 0 18px 36px -18px #000}
.hero .depois img{width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;filter:saturate(.75) brightness(.82);transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s}
.hero .depois:hover img{transform:scale(1.05);filter:saturate(.95) brightness(.95)}
.hero .depois span{position:absolute;inset:auto 0 0 0;padding:26px 10px 9px;background:linear-gradient(180deg,transparent,rgb(10 16 28 / .86));font-size:12.5px;line-height:1.25;font-weight:500;color:var(--creme)}
.hero .depois span i{font-style:normal;color:var(--carvalho-claro)}
/* ---------- entrada ---------- */
.js .hero .olho,.js h1 span,.js .hero .janela,.js .hero .na-frente>*{opacity:0}
.js .hero .foto-mesa{opacity:0}
.js .hero .ext-esq{transform:scaleX(0)}
.js .hero .palavra .letras,.js .hero .palavra .sombra,.js .hero .palavra .sombra-longa{opacity:0}
.pronto .hero .olho{animation:h-sobe .8s .1s both}
.pronto h1 .l1{animation:h-sobe 1s .2s both cubic-bezier(.2,.7,.2,1)}
.pronto h1 .l2{animation:h-sobe 1s .34s both cubic-bezier(.2,.7,.2,1)}
.pronto h1 .l3{animation:h-sobe 1s .48s both cubic-bezier(.2,.7,.2,1)}
.pronto .hero .janela{animation:h-abre 1.2s .3s both cubic-bezier(.2,.7,.2,1)}
.pronto .hero .foto-mesa{animation:h-aparece .7s .8s both}
.pronto .hero .ext-esq{animation:h-estende 1.2s .95s both cubic-bezier(.65,0,.2,1)}
.pronto .hero .palavra .letras{animation:h-pousa 1s 1.75s both cubic-bezier(.2,.8,.2,1)}
.pronto .hero .palavra .sombra{animation:h-sombra .9s 2.05s both}
.pronto .hero .palavra .sombra-longa{animation:h-sombra-longa 1.2s 2.05s both}
.pronto .hero .na-frente>*:nth-child(1){animation:h-sobe .8s 1.5s both}
.pronto .hero .na-frente>*:nth-child(2){animation:h-sobe .8s 1.65s both}
.pronto .hero .na-frente>*:nth-child(3){animation:h-sobe .8s 1.8s both}
@keyframes h-sobe{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes h-pousa{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
@keyframes h-sombra{from{opacity:0}to{opacity:.5}}
@keyframes h-sombra-longa{from{opacity:0}to{opacity:.16}}
@keyframes h-aparece{from{opacity:0}to{opacity:1}}
@keyframes h-abre{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes h-estende{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* no computador a terceira linha do h1 é a palavra em pé */
@media (min-width:821px){
  h1 .l3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media (max-width:1180px){
  .hero .nav nav a:not(.zap){display:none}
  .hero .na-frente{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .hero .depois{display:none}
  .hero .placa{display:none}
}
/* ---------- celular ---------- */
@media (max-width:820px){
  :root{--margem:22px;--hp:calc(100vw * 1.258);--wp:100vw;--x0:0px;--corte:.17}
  .hero{height:auto;overflow:visible;background:var(--marinho-fundo)}
  .hero .nav{padding:16px var(--margem)}
  .hero .marca b{font-size:17.5px}
  .hero .marca span{font-size:9.5px;letter-spacing:.14em}
  .hero .nav .zap{padding:9px 13px;font-size:14px}
  .hero .nav .zap span{display:none}
  .hero .parede-cel{position:relative;background:var(--parede);overflow:hidden;isolation:isolate}
  .hero .malha{height:100%}
  .hero .titulo{position:relative;left:auto;top:auto;width:auto;padding:88px var(--margem) 22px}
  .hero .olho{font-size:11.5px}
  h1{font-size:clamp(40px, 12.4vw, 58px);margin-top:14px;line-height:.98}
  h1 .l3{font-size:1.24em;line-height:.9;margin-top:.04em}
  .hero .palavra{display:none}
  .hero .cena{position:relative;inset:auto;z-index:0;height:calc(var(--hp) * (0.821 - var(--corte)));--y0:calc(var(--hp) * var(--corte) * -1);--linha:calc(var(--hp) * (0.687 - var(--corte)));background:linear-gradient(var(--parede),var(--parede)) 0 0 / 100% calc(var(--linha) + 2px) no-repeat}
  .hero .janela{clip-path:inset(17.6% 4.5% 31.3% 4.5% round 18px 18px 0 0)}
  .hero .janela::after{inset:17.6% 4.5% 31.3% 4.5%;border-radius:18px 18px 0 0}
  .hero .janela figcaption{left:calc(4.5% + 12px);top:calc(17.6% + 12px);font-size:11px}
  .hero .janela img{transform:none}
  .hero .foto-mesa{-webkit-mask-image:none;mask-image:none}
  .hero .ext,.hero .luz,.hero .frente,.hero .veio{display:none}
  .hero .na-frente{position:relative;inset:auto;display:flex;flex-direction:column;align-items:stretch;gap:26px;padding:24px var(--margem) 36px;
    background:radial-gradient(120vw 60% at 20% 0, rgb(52 78 122 / .5), transparent 70%), linear-gradient(180deg,#1b2a47 0,var(--marinho-fundo) 60%)}
  .hero .na-frente::before{content:"";position:absolute;inset:0 0 auto 0;height:22px;background:linear-gradient(180deg, rgb(6 10 18 / .5), transparent)}
  .hero .na-frente>div:first-child{display:flex;flex-direction:column}
  .hero .apoio{font-size:16.5px;order:2;margin-top:20px}
  .hero .botao{width:100%;justify-content:center;padding:16px 22px;margin-top:0;order:1}
  .hero .prova{border-left:0;padding-left:0;border-top:1px solid rgb(247 240 229 / .16);padding-top:24px}
  .hero .voz{font-size:17px}
  .hero .placa{display:flex;justify-content:space-between;border-top:1px solid rgb(247 240 229 / .16);padding-top:24px}
  .hero .quem{text-align:left;font-size:13.5px}
  .hero .depois{display:block;width:92px}
}
@media (prefers-reduced-motion:reduce){
  .hero .malha i,.hero .luz,.hero .malha::before{animation:none}
  .js .hero .olho,.js h1 span,.js .hero .janela,.js .hero .na-frente>*,.js .hero .foto-mesa,.js .hero .palavra .letras{opacity:1;animation:none}
  .js .hero .palavra .sombra{opacity:.5;animation:none}
  .js .hero .palavra .sombra-longa{opacity:.16;animation:none}
  .js .hero .ext-esq{transform:none;animation:none}
  .hero .janela img{transition:none;transform:none}
  /* as regras de entrada têm mais peso que as de cima: aqui elas são desligadas de vez */
  .js .hero *,.js h1 span{animation:none !important}
  .js .hero .olho,.js h1 span,.js .hero .janela,.js .hero .na-frente>*,.js .hero .foto-mesa,.js .hero .palavra .letras{opacity:1 !important}
}

/* ===== conversa ===== */
/* 2 · conversa — "Como é a conversa". Seção de parede. Prefixo cv-. Animações cv-. */
.cv{--cv-tam:clamp(96px, 9.4vw, 144px);--cv-fio:linear-gradient(180deg,#c98a4c,var(--carvalho-fio))}
/* a malha e o grão somem nas bordas: a seção começa e termina em creme puro */
.cv-malha,.cv-grao{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%)}

/* ---------- uma prateleira só: tudo em pé na mesma linha ---------- */
.cv-mesa{display:grid;grid-template-columns:minmax(0,4.5fr) repeat(3,minmax(0,2.6fr));column-gap:clamp(26px,3.3vw,56px);grid-template-rows:minmax(0,1fr) auto auto}
.cv-fio{grid-column:1 / -1;grid-row:3;align-self:start;height:3px;margin:0 calc(var(--margem) * -1);background:var(--cv-fio);transform-origin:18% 50%}

.cv-cabeca{grid-column:2 / -1;grid-row:1;align-self:start;padding-bottom:clamp(30px,3.4vw,54px)}
.cv-olho{margin-bottom:clamp(16px,1.7vw,24px)}
.cv-h2 em{display:block}
.cv-lide{margin-top:clamp(18px,1.9vw,28px)}

.cv-quadro{grid-column:1;grid-row:1 / 4;display:grid;grid-template-rows:subgrid;min-width:0}
.cv-janela{grid-row:1 / 3;align-self:end;aspect-ratio:3 / 4;width:100%;max-height:660px}
.cv-janela img{position:absolute;inset:0;transform:translate3d(calc(var(--cv-px,0) * -7px), calc(var(--cv-py,0) * -5px), 0) scale(1.035);transition:transform .9s var(--curva)}
.cv-etq{position:absolute;left:16px;top:15px;z-index:2}
.cv-lugar{position:absolute;left:69.5%;top:28.5%;z-index:2;transform:translateX(-50%);font-family:var(--serifa);font-style:italic;font-size:17px;line-height:1;color:var(--creme);white-space:nowrap;padding-bottom:30px;text-shadow:0 1px 10px rgb(10 16 28 / .6)}
.cv-lugar::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:22px;background:linear-gradient(180deg,var(--creme),rgb(247 240 229 / .2))}
.cv-legenda{grid-row:3;padding-top:26px;font-size:14.5px;line-height:1.5;color:var(--tinta-suave);max-width:27em}
.cv-chave{margin-top:16px;padding-top:15px;border-top:1px solid var(--fio);font-family:var(--serifa);font-style:italic;font-size:17px;line-height:1.36;color:var(--marinho-2)}
.cv-chave span{display:block}

.cv-momentos{grid-column:2 / -1;grid-row:2 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;min-width:0}
.cv-m{position:relative;grid-row:1 / 3;display:grid;grid-template-rows:subgrid;min-width:0}
/* em cima da linha: uma frase dela, o numeral e uma coisa da mesa dela */
.cv-cima{grid-row:1;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
/* no celular cada momento tem a própria linha; no computador ela existe mas não aparece (alternar display reinicia animações) */
.cv-cima::after{content:"";display:block;flex:none;height:0;visibility:hidden;margin:0 calc(var(--margem) * -1);background:var(--cv-fio);transform-origin:0 50%}
.cv-dela{font-size:clamp(16.5px,1.28vw,19px);line-height:1.28;color:var(--marinho-2);margin-bottom:clamp(14px,1.5vw,22px);max-width:13.5em}
.cv-dela cite{color:var(--tinta-suave);opacity:1;margin-top:6px;font-size:12px}
.cv-zona{display:flex;align-items:flex-end;gap:calc(var(--cv-tam) * .1);height:calc(var(--cv-tam) * .84)}
.cv-n{position:relative;flex:none;align-self:stretch;width:calc(var(--cv-tam) * .5)}
.cv-m--1 .cv-n{width:calc(var(--cv-tam) * .46)}
.cv-n .wf-em-pe{left:-.04em;top:100%;--tam:var(--cv-tam)}
.cv-sombra-parede{fill:#3a2008;opacity:.17}
.cv-obj{position:relative;flex:none;display:block}
.cv-obj img{width:100%;filter:drop-shadow(7px 5px 7px rgb(58 32 8 / .22))}
.cv-obj::after{content:"";position:absolute;left:4%;right:-6%;bottom:-4px;height:9px;border-radius:50%;background:rgb(44 23 4 / .4);filter:blur(5px);z-index:-1}
.cv-obj--caneca{width:calc(var(--cv-tam) * .6)}
.cv-obj--bloco{width:calc(var(--cv-tam) * 1.02)}
.cv-obj--agenda{width:calc(var(--cv-tam) * 1.1)}
/* embaixo da linha: a fala, o texto, a voz de quem já foi */
.cv-corpo{grid-row:2;padding-top:28px}
.cv-fala{font-family:var(--serifa);font-weight:400;font-size:clamp(24px,2.25vw,33px);line-height:1.04;letter-spacing:-.018em;color:var(--tinta)}
.cv-fala em{display:block;font-style:italic;color:var(--marinho-2)}
.cv-corpo .wf-texto{margin-top:16px;font-size:clamp(15.5px,1.12vw,17px)}
.cv-corpo .wf-texto i{font-family:var(--serifa);font-style:italic;font-size:1.06em;color:var(--tinta)}
.cv-voz{margin-top:22px;font-size:clamp(16.5px,1.24vw,18.5px);color:var(--tinta)}
.cv-voz::before{content:"";display:block;width:28px;height:1px;background:var(--carvalho-fio);margin-bottom:14px}
.cv-voz cite{color:var(--tinta-suave);opacity:1}

/* ---------- entrada: a linha se estende a partir da foto; numeral e objeto pousam; a frase dela chega por último ---------- */
.js .cv-m[data-revela]{opacity:1}
.js .cv-m[data-revela].visto{animation:none}
.js .cv-fio[data-revela]{opacity:1;transform:scaleX(0)}
.js .cv-fio[data-revela].visto{animation:cv-estende 1.3s both var(--curva-estende)}
.js .cv-m .cv-n .letras,.js .cv-m .cv-sombra-parede,.js .cv-m .cv-obj,.js .cv-m .cv-corpo,.js .cv-m .cv-dela{opacity:0}
.js .cv-m .cv-cima::after{transform:scaleX(0)}
.js .cv-m.visto .cv-cima::after{animation:cv-estende 1.1s both var(--curva-estende)}
.js .cv-m.visto .cv-n .letras{animation:cv-pousa 1s calc(.45s + var(--d,0s)) both cubic-bezier(.2,.8,.2,1)}
.js .cv-m.visto .cv-sombra-parede{animation:cv-sombra .9s calc(.8s + var(--d,0s)) both}
.js .cv-m.visto .cv-obj{animation:cv-pousa 1s calc(.7s + var(--d,0s)) both cubic-bezier(.2,.8,.2,1)}
.js .cv-m.visto .cv-dela{animation:cv-sobe .9s calc(1.15s + var(--d,0s)) both var(--curva)}
.js .cv-m.visto .cv-corpo{animation:cv-sobe .9s calc(.55s + var(--d,0s)) both var(--curva)}
@keyframes cv-estende{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cv-pousa{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
@keyframes cv-sombra{from{opacity:0}to{opacity:.17}}
@keyframes cv-sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* telas médias: a foto e o título em cima, a prateleira com os três momentos embaixo, de borda a borda */
@media (max-width:1060px) and (min-width:821px){
  .cv-mesa{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto}
  .cv-quadro{grid-column:1;grid-row:1;display:block;margin-bottom:64px}
  .cv-janela{max-height:none}
  .cv-legenda{padding-top:18px}
  .cv-cabeca{grid-column:2 / -1;grid-row:1;align-self:center;padding-bottom:64px}
  .cv-momentos{grid-column:1 / -1}
}
@media (max-width:820px){
  .cv{--cv-tam:96px}
  .cv-mesa{display:block}
  .cv-fio{visibility:hidden;height:0}
  .cv-cabeca{padding-bottom:34px}
  .cv-h2 em{display:inline}
  .cv-quadro{display:block}
  .cv-janela{max-width:520px;max-height:none}
  .cv-janela img{transform:none}
  .cv-etq{left:12px;top:12px}
  .cv-lugar{font-size:16px}
  .cv-legenda{margin:0 calc(var(--margem) * -1);padding:18px var(--margem) 0;max-width:none;border-top:3px solid var(--carvalho-fio)}
  .cv-momentos{display:block;margin-top:10px}
  .cv-m{display:block;padding-top:48px;--d:0s !important}
  .cv-cima{display:block}
  .cv-cima::after{height:2px;visibility:visible}
  .cv-dela{font-size:18px;max-width:none;margin-bottom:14px}
  .cv-zona{justify-content:space-between}
  .cv-obj--caneca{width:66px}
  .cv-obj--bloco{width:118px}
  .cv-obj--agenda{width:128px}
  .cv-corpo{padding:22px 0 4px}
  .cv-fala{font-size:29px}
  .cv-corpo .wf-texto{font-size:16px;margin-top:12px}
  .cv-voz{margin-top:18px;font-size:17.5px}
}
@media (prefers-reduced-motion:reduce){
  .js .cv-fio[data-revela],.js .cv-m .cv-cima::after{transform:none !important;animation:none !important}
  .js .cv-m .cv-n .letras,.js .cv-m .cv-obj,.js .cv-m .cv-corpo,.js .cv-m .cv-dela{opacity:1;animation:none !important}
  .js .cv-m .cv-sombra-parede{opacity:.17;animation:none !important}
  .cv-janela img{transition:none;transform:none}
}


/* ===== facetas ===== */
/* facetas — "Faceta não é tecla de piano". Seção de mesa: parede, tampo (a tampa do piano), frente.
   Na parede, uma janela marinho (a caixa do piano); diante dela, em pé sobre o tampo, quatro teclas de marfim iguais
   e três sustenidos de ébano entre elas. A tecla tocada desce e a resposta aparece na frente, embaixo do piano. */
.fa-secao{padding:0;background:var(--parede);
  --fa-l:clamp(72px, 7vw, 112px);              /* largura da tecla branca */
  --fa-a:calc(var(--fa-l) * 4.9);              /* altura da tecla branca */
  --fa-g:7px;                                   /* vão entre teclas */
  --fa-p:calc(var(--fa-l) * .54);              /* largura da tecla preta */
  --fa-pa:.6;                                   /* altura da preta, em fração da branca */
  --fa-borda:clamp(24px, 3.6vw, 60px);         /* folga da caixa dos lados */
  --fa-topo:clamp(54px, 4.6vw, 76px);          /* folga da caixa em cima */
  --fa-caixa:calc(var(--fa-l) * 4 + var(--fa-g) * 3 + var(--fa-borda) * 2);
  --fa-t:clamp(58px, 7.4vw, 118px);            /* espessura do tampo */
  --fa-pe:calc(var(--fa-t) * .2);              /* onde a tecla pisa, abaixo da borda do tampo */
  --fa-funda:.09;                              /* quanto a tecla tocada desce */
  --fa-col:clamp(30px, 6vw, 110px)}

/* ---------- parede ---------- */
.fa-parede{position:relative;z-index:2;padding:var(--secao) var(--margem) 0;display:grid;grid-template-columns:minmax(0,1fr) var(--fa-caixa);column-gap:var(--fa-col)}
.fa-parede .wf-malha{-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 34%);mask-image:linear-gradient(180deg, transparent 0, #000 34%)}
/* a borda de cima é creme puro (malha e grão entram aos poucos), para emendar com a seção de parede que vem antes */
.fa-secao>.wf-grao{-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 clamp(140px, 16vw, 240px));mask-image:linear-gradient(180deg, transparent 0, #000 clamp(140px, 16vw, 240px))}
.fa-fundo{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.fa-fundo::before{content:"";position:absolute;left:-12vw;width:80vw;bottom:-30vh;height:60vh;border-radius:50%;background:radial-gradient(closest-side, rgb(240 190 132 / .6), rgb(242 200 148 / .2) 60%, transparent);filter:blur(36px)}
.fa-cabeca{min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding-bottom:clamp(40px, 4.6vw, 76px)}
.fa-cabeca .wf-h2{margin-top:clamp(14px, 1.6vw, 24px)}
.fa-apoio{max-width:27em;padding-top:clamp(16px, 1.5vw, 22px);border-top:1px solid var(--fio)}

/* ---------- o piano: caixa marinho e teclas ---------- */
.fa-piano{position:relative;width:var(--fa-caixa);padding:var(--fa-topo) var(--fa-borda) 0}
.fa-caixa{position:absolute;inset:0;border-radius:var(--raio) var(--raio) 0 0;
  background:radial-gradient(120% 70% at 20% 0, rgb(52 78 122 / .5), transparent 70%), linear-gradient(180deg, #1b2a47 0, #131d33 62%, #0f1829 100%);
  box-shadow:inset 0 22px 44px -18px rgb(4 8 16 / .6), inset 16px 0 30px -20px rgb(4 8 16 / .5), inset -16px 0 30px -20px rgb(4 8 16 / .5), inset 0 0 0 1px rgb(255 255 255 / .1)}
.fa-caixa::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(180deg, transparent, rgb(226 164 101 / .13))}
.fa-dica{position:absolute;left:var(--fa-borda);right:var(--fa-borda);top:0;height:var(--fa-topo);display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;color:rgb(247 240 229 / .74)}
.fa-dica span:first-child{color:var(--carvalho-claro)}
.fa-dica-toque{display:none}
@media (hover:none), (max-width:820px){ .fa-dica-mouse{display:none} .fa-dica-toque{display:inline} }
.fa-teclado{position:relative;display:flex;gap:var(--fa-g);margin-bottom:calc(var(--fa-pe) * -1)}
.fa-tecla{position:relative;flex:none;display:block;width:var(--fa-l);height:var(--fa-a);overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:0;filter:drop-shadow(-9px 0 10px rgb(3 6 12 / .5))}
.fa-corpo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;border-radius:5px 5px 0 0;
  background:
    linear-gradient(90deg, rgb(126 96 58 / .24) 0, rgb(126 96 58 / 0) 9%),
    linear-gradient(90deg, transparent 93%, rgb(255 255 255 / .85) 100%),
    linear-gradient(180deg, #fffdf8 0, #f9f1e4 50%, #f1e4cd 86%, #e8cca4 96.5%, #ddb380 100%);
  box-shadow:inset 0 2px 0 #fff;
  transition:transform .6s var(--curva)}
.fa-corpo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .6s var(--curva);
  background:linear-gradient(180deg, rgb(92 66 30 / .3) 0, rgb(92 66 30 / .11) 26%, rgb(92 66 30 / .03) 62%, transparent);
  box-shadow:inset 12px 0 14px -9px rgb(58 38 12 / .5), inset -12px 0 14px -9px rgb(58 38 12 / .42)}
.fa-num{position:relative;z-index:1;font-family:var(--serifa);font-style:italic;font-size:calc(var(--fa-l) * .5);line-height:1;color:var(--marinho-2);margin-top:calc(var(--fa-a) * var(--fa-pa) + var(--fa-l) * .15)}
.fa-medo{position:relative;z-index:1;margin-top:calc(var(--fa-l) * .1);font-size:clamp(12px, .92vw, 13px);font-weight:600;letter-spacing:.1em;line-height:1.32;text-transform:uppercase;text-align:center;color:var(--carvalho-tinta)}
.fa-medo span{display:block}
.fa-tecla:focus-visible .fa-corpo{box-shadow:inset 0 0 0 3px var(--marinho-2), inset 0 0 0 5px #fff}
.fa-resposta:focus-visible{outline-offset:10px}
/* sustenidos: ébano com brilho, pendurados do alto, por cima das brancas */
.fa-pretas{position:absolute;inset:0;pointer-events:none}
.fa-pretas i{position:absolute;top:0;left:calc((var(--fa-l) + var(--fa-g)) * (var(--i) + 1) - var(--fa-g) / 2 - var(--fa-p) / 2);width:var(--fa-p);height:calc(var(--fa-a) * var(--fa-pa));border-radius:0 0 4px 4px;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0) 14%, rgb(255 255 255 / .17) 23%, rgb(255 255 255 / 0) 36%),
    linear-gradient(180deg, rgb(255 255 255 / .06), transparent 30%),
    linear-gradient(90deg, #04070d 0, #18223b 28%, #202c4a 56%, #080d18 100%);
  box-shadow:-7px 9px 13px -3px rgb(46 30 10 / .55), 0 3px 4px rgb(46 30 10 / .35)}
.fa-pretas i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8.5%;border-radius:0 0 4px 4px;background:linear-gradient(180deg, #33446f, #101930);box-shadow:inset 0 1px 0 rgb(255 255 255 / .24)}
/* tocada: desce no tampo e fica na sombra das vizinhas; sob o dedo, cede um pouco mais */
.fa-viva .fa-tecla[aria-selected="true"] .fa-corpo{transform:translateY(calc(var(--fa-funda) * 100%))}
.fa-viva .fa-tecla[aria-selected="true"] .fa-corpo::after{opacity:1}
.fa-viva .fa-tecla:active .fa-corpo{transform:translateY(calc((var(--fa-funda) + .022) * 100%));transition-duration:.16s}
.fa-estreia .fa-tecla[aria-selected="true"] .fa-corpo,.fa-estreia .fa-tecla[aria-selected="true"] .fa-corpo::after{transition-delay:1.5s}

/* ---------- o tampo: luz, contato e reflexo de cada tecla ---------- */
.fa-tampo{--t:var(--fa-t);z-index:1;overflow:hidden}
.fa-tampo::after{display:none}
.fa-luz{position:absolute;left:0;top:0;height:76%;width:46vw;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(closest-side, rgb(255 246 228 / .8), transparent);animation:fa-luz 30s ease-in-out infinite alternate}
@keyframes fa-luz{from{transform:translateX(4vw)}to{transform:translateX(50vw)}}
.fa-chao{position:absolute;left:0;right:0;top:0;height:76%;padding:var(--fa-pe) calc(var(--margem) + var(--fa-borda)) 0;display:flex;justify-content:flex-end;gap:var(--fa-g);overflow:hidden}
.fa-chao::before{content:"";position:absolute;right:calc(var(--margem) - 22px);top:0;width:calc(var(--fa-caixa) + 44px);height:10px;background:linear-gradient(180deg, rgb(30 16 4 / .46), transparent);-webkit-mask-image:linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);mask-image:linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent)}
.fa-chao i{position:relative;flex:none;width:var(--fa-l);height:0}
.fa-chao i::before{content:"";position:absolute;left:-3px;right:-3px;top:-2px;height:7px;border-radius:50%;background:rgb(38 20 4 / .72);filter:blur(2px)}
.fa-chao i::after{content:"";position:absolute;left:2px;right:2px;top:2px;height:calc(var(--fa-t) * .5);background:linear-gradient(180deg, rgb(255 244 224 / .5), rgb(255 244 224 / 0) 82%);filter:blur(1.5px)}

/* ---------- a frente: a resposta, embaixo do piano ---------- */
.fa-frente{position:relative;padding:0 var(--margem) clamp(60px, 7vw, 108px);display:grid;grid-template-columns:minmax(0,1fr) var(--fa-caixa);column-gap:var(--fa-col);row-gap:clamp(40px, 5vw, 72px);align-items:start}
.fa-frente::before{content:"";position:absolute;inset:0 0 auto 0;height:30px;background:linear-gradient(180deg, rgb(6 10 18 / .45), transparent);pointer-events:none}
.fa-esquerda{padding-top:clamp(56px, 6.4vw, 100px);min-width:0;display:flex;flex-direction:column;gap:clamp(32px, 4vw, 60px)}
.fa-nada p{font-family:var(--serifa);font-style:italic;font-size:clamp(36px, 4.5vw, 72px);line-height:1;letter-spacing:-.022em;color:var(--creme);text-wrap:balance}
.fa-nada em{color:var(--carvalho-claro)}
.fa-nada cite{display:block;margin-top:20px;font-style:normal;font-size:12.5px;letter-spacing:.06em;color:rgb(247 240 229 / .7)}
.fa-voz{max-width:25em;padding-top:clamp(18px, 1.8vw, 26px);border-top:1px solid var(--fio-claro);font-family:var(--serifa);font-style:italic;font-size:clamp(16px, 1.25vw, 19px);line-height:1.36;color:rgb(247 240 229 / .92)}
.fa-voz cite{display:block;font-family:var(--sem);font-style:normal;font-size:12px;letter-spacing:.06em;margin-top:7px;color:rgb(247 240 229 / .66)}
.fa-direita{min-width:0}
/* trilho: os quatro numerais embaixo das quatro teclas; o da tecla tocada acende e pende do tampo por um fio */
.fa-trilho{display:flex;gap:var(--fa-g);padding:0 var(--fa-borda);height:clamp(88px, 7.6vw, 120px)}
.fa-trilho i{position:relative;flex:none;width:var(--fa-l);display:flex;align-items:flex-end;justify-content:center;font-family:var(--serifa);font-style:italic;font-size:clamp(26px, 2.5vw, 38px);line-height:1;color:rgb(247 240 229 / .2);transition:color .5s}
.fa-trilho i.fa-vista{color:rgb(247 240 229 / .55)}
.fa-trilho i::before{content:"";position:absolute;left:50%;top:0;bottom:calc(1em + 12px);width:1px;background:linear-gradient(180deg, rgb(242 200 148 / 0), var(--carvalho-claro));transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--curva)}
.fa-respostas{display:grid;min-width:0;margin-top:clamp(18px, 2vw, 28px);padding-top:clamp(20px, 2.2vw, 32px);border-top:1px solid var(--fio-claro)}
.fa-resposta{grid-area:1 / 1;min-width:0}
.fa-rotulo{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--creme-suave)}
.fa-rotulo b{display:none}
.fa-manchete{margin-top:12px;font-family:var(--serifa);font-weight:400;font-size:clamp(27px, 2.75vw, 42px);line-height:1.06;letter-spacing:-.018em;color:var(--creme);text-wrap:balance}
.fa-manchete em{font-style:italic;color:var(--carvalho-claro)}
.fa-resposta .wf-texto{margin-top:clamp(16px, 1.6vw, 24px)}
.fa-dela{margin-top:clamp(18px, 1.8vw, 26px);padding-left:18px;border-left:1px solid rgb(242 200 148 / .55);font-size:clamp(18px, 1.5vw, 23px);color:var(--creme)}
.fa-dela cite{color:var(--carvalho-claro);opacity:1}
.fa-fecho{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 28px;padding-top:clamp(22px, 2.2vw, 30px);border-top:1px solid var(--fio-claro);color:var(--creme-suave)}

/* sem JavaScript as quatro respostas ficam empilhadas e legíveis; com ele, uma por vez, no mesmo lugar */
.fa-secao:not(.fa-ligada) .fa-resposta{grid-area:auto}
.fa-secao:not(.fa-ligada) .fa-resposta + .fa-resposta{margin-top:44px;padding-top:36px;border-top:1px solid var(--fio-claro)}
.fa-secao:not(.fa-ligada) .fa-rotulo b{display:inline;font-family:var(--serifa);font-style:italic;font-weight:400;font-size:26px;letter-spacing:0;color:var(--carvalho-claro);margin-right:8px}
.fa-secao:not(.fa-ligada) .fa-trilho{height:clamp(40px, 5vw, 72px)}
.fa-secao:not(.fa-ligada) .fa-trilho i{visibility:hidden}
.fa-ligada .fa-resposta{visibility:hidden;opacity:0;transform:translateY(16px);transition:opacity .22s, transform 0s .22s, visibility 0s .22s}
.fa-ligada.fa-viva .fa-resposta.fa-ativa{visibility:visible;opacity:1;transform:none;transition:opacity .7s .14s, transform .8s .14s var(--curva), visibility 0s}
.fa-estreia.fa-viva .fa-resposta.fa-ativa{transition-delay:1.75s, 1.75s, 0s}
.fa-viva[data-ativa="1"] .fa-trilho i:nth-child(1),.fa-viva[data-ativa="2"] .fa-trilho i:nth-child(2),.fa-viva[data-ativa="3"] .fa-trilho i:nth-child(3),.fa-viva[data-ativa="4"] .fa-trilho i:nth-child(4){color:var(--carvalho-claro)}
.fa-viva[data-ativa="1"] .fa-trilho i:nth-child(1)::before,.fa-viva[data-ativa="2"] .fa-trilho i:nth-child(2)::before,.fa-viva[data-ativa="3"] .fa-trilho i:nth-child(3)::before,.fa-viva[data-ativa="4"] .fa-trilho i:nth-child(4)::before{transform:scaleY(1)}
.fa-estreia .fa-trilho i,.fa-estreia .fa-trilho i::before{transition-delay:1.65s}

/* entrada: a caixa sobe, as brancas pousam uma a uma, as pretas depois, o contato por último */
.fa-ligada .fa-caixa,.fa-ligada .fa-dica,.fa-ligada .fa-tecla,.fa-ligada .fa-pretas i,.fa-ligada .fa-chao i{opacity:0}
.fa-viva .fa-caixa{animation:fa-sobe 1s both var(--curva)}
.fa-viva .fa-dica{animation:fa-aparece .8s .5s both}
.fa-viva .fa-tecla{animation:fa-pousa .95s calc(.25s + var(--i) * .1s) both var(--curva)}
.fa-viva .fa-pretas i{animation:fa-pousa .8s calc(.75s + var(--i) * .09s) both var(--curva)}
.fa-viva .fa-chao i{animation:fa-aparece .7s calc(.7s + var(--i) * .1s) both}
@keyframes fa-pousa{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}
@keyframes fa-sobe{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fa-aparece{from{opacity:0}to{opacity:1}}

@media (max-width:1100px) and (min-width:821px){
  .fa-secao{--fa-borda:18px;--fa-col:28px}
  .fa-medo{letter-spacing:.06em}
}
@media (max-width:820px){
  .fa-secao{--fa-g:5px;--fa-borda:8px;--fa-topo:48px;--fa-pa:.57;--fa-l:min(calc((100vw - 44px - 16px - 15px) / 4), 104px);--fa-a:calc(var(--fa-l) * 4.3)}
  .fa-parede{grid-template-columns:minmax(0,1fr)}
  .fa-cabeca{gap:20px;padding-bottom:30px}
  .fa-apoio{border-top:0;padding-top:0}
  .fa-piano{margin:0 auto}
  .fa-chao{justify-content:center;padding-left:0;padding-right:0}
  .fa-chao::before{right:auto;left:50%;transform:translateX(-50%)}
  .fa-trilho{justify-content:center;padding:0}
  .fa-caixa{border-radius:18px 18px 0 0}
  .fa-dica{left:16px;right:16px;letter-spacing:.12em}
  .fa-num{font-size:calc(var(--fa-l) * .44);margin-top:calc(var(--fa-a) * var(--fa-pa) + 9px)}
  .fa-medo{font-size:12px;letter-spacing:.06em;margin-top:5px;line-height:1.28}
  .fa-pretas i{box-shadow:-5px 7px 10px -3px rgb(46 30 10 / .55), 0 3px 4px rgb(46 30 10 / .35)}
  .fa-frente{grid-template-columns:minmax(0,1fr);row-gap:0;padding-bottom:56px}
  .fa-direita{order:-1}
  .fa-trilho{height:66px}
  .fa-trilho i{font-size:27px}
  .fa-respostas{margin-top:16px}
  .fa-esquerda{padding-top:52px;gap:30px}
  .fa-nada p{font-size:clamp(36px, 10.6vw, 46px)}
  .fa-fecho{margin-top:40px}
}
@media (max-width:345px){ .fa-medo{letter-spacing:0;overflow-wrap:anywhere} }

@media (prefers-reduced-motion:reduce){
  .fa-ligada .fa-caixa,.fa-ligada .fa-dica,.fa-ligada .fa-tecla,.fa-ligada .fa-pretas i,.fa-ligada .fa-chao i{opacity:1;animation:none !important}
  .fa-luz{animation:none}
  .fa-corpo,.fa-corpo::after,.fa-trilho i,.fa-trilho i::before,.fa-ligada .fa-resposta,.fa-ligada.fa-viva .fa-resposta.fa-ativa{transition:none !important}
}


/* ===== tratamentos ===== */
/* tratamentos — "O que mais se resolve nesta mesa". Seção de parede, tipográfica:
   cada tratamento é uma palavra em itálico em pé num fio de carvalho (uma prateleira), com a explicação apoiada no mesmo fio.
   A lista vai em decrescendo: o canal pesa mais, depois dois médios, depois três menores. */
.tr-secao{--tr-base:.165em;                    /* distância da linha de base ao pé da caixa da Brygada com entrelinha 1 */
  --tr-c1:minmax(0, 4.9fr);--tr-c2:minmax(0, 3.6fr);--tr-c3:minmax(0, 2.9fr);--tr-vao:clamp(24px, 3.4vw, 52px);
  --tr-foto:clamp(92px, 8.4vw, 122px)}
/* bordas de cima e de baixo em creme puro: a malha e o grão ficam no miolo */
.tr-secao .wf-malha{-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);mask-image:linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%)}
.tr-secao>.wf-grao{-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 clamp(140px, 16vw, 240px), #000 calc(100% - clamp(140px, 16vw, 240px)), transparent 100%);mask-image:linear-gradient(180deg, transparent 0, #000 clamp(140px, 16vw, 240px), #000 calc(100% - clamp(140px, 16vw, 240px)), transparent 100%)}
.tr-cabeca .wf-h2{margin-top:clamp(14px, 1.6vw, 24px);max-width:11.2em}

.tr-lista{margin-top:clamp(44px, 5.4vw, 92px)}
.tr-item{position:relative;display:grid;grid-template-columns:var(--tr-c1) var(--tr-c2) var(--tr-c3);column-gap:var(--tr-vao);align-items:end;margin-bottom:1px}
.tr-item::after{content:"";position:absolute;left:0;right:0;top:100%;height:1px;background:var(--carvalho-fio)}
.tr-nome{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.5em;font-family:var(--serifa);font-weight:400;font-size:clamp(17px, 1.6vw, 24px);line-height:1;color:var(--tinta)}
.tr-nome em{display:block;font-style:italic;font-size:var(--tr-tam);line-height:1;letter-spacing:-.03em;color:var(--marinho-2);margin-bottom:calc(var(--tr-base) * -1)}
.tr-pre,.tr-pos{display:block;line-height:1;margin-bottom:calc(var(--tr-base) * -1)}
.tr-txt{grid-column:2 / -1;padding-bottom:clamp(13px, 1.4vw, 22px);min-width:0}
.tr-lide{font-family:var(--serifa);font-weight:500;font-size:clamp(19px, 1.55vw, 23.5px);line-height:1.2;letter-spacing:-.008em;color:var(--tinta);max-width:30em}
.tr-lide--dela{font-weight:400;font-style:italic;line-height:1.26;max-width:27em}
.tr-lide--dela cite,.tr-dela cite{display:block;font-family:var(--sem);font-style:normal;font-size:12.5px;letter-spacing:.06em;margin-top:7px;color:var(--tinta-suave);opacity:1}
.tr-txt .wf-texto{margin-top:8px;font-size:clamp(15.5px, 1.1vw, 17px);max-width:34em}
.tr-zap{font-weight:600;color:var(--marinho);border-bottom:1px solid currentColor;white-space:nowrap}
/* a peça: uma janela pequena em pé na prateleira, à direita, sem empurrar a linha */
.tr-item--foto .tr-txt{padding-right:calc(var(--tr-foto) + var(--tr-vao))}
.tr-foto{position:absolute;right:0;bottom:0;width:var(--tr-foto);border-radius:var(--raio-p) var(--raio-p) 0 0;box-shadow:0 1px 0 rgb(58 36 16 / .4)}
.tr-foto img{aspect-ratio:3 / 4;height:auto}

/* decrescendo: três alturas de linha */
.tr-item--2{--tr-tam:clamp(48px, 6.2vw, 92px);padding-top:clamp(34px, 4.1vw, 64px)}
.tr-item--3{--tr-tam:clamp(40px, 4.5vw, 66px);padding-top:clamp(26px, 3vw, 46px)}
/* o canal pesa mais: palavra gigante com luz de objeto, texto, e ao lado a frase dela e os livros da estante */
.tr-item--canal{--tr-tam:clamp(110px, 14.6vw, 216px);margin-bottom:3px;align-items:stretch}
.tr-item--canal::after{height:3px;background:linear-gradient(180deg, #c98a4c, var(--carvalho-fio))}
.tr-item--canal .tr-nome{position:relative;display:flow-root;align-self:end}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .tr-item--canal .tr-nome em{padding:0 .09em;margin-left:-.09em;margin-right:-.09em;color:transparent;-webkit-background-clip:text;background-clip:text;
    background-image:linear-gradient(180deg, #2c4777 10%, #1c2d4e 48%, #1a2640 72%, #3d343a 79.5%, #7d5530 83.5%)}
}
.tr-item--canal .tr-pre{position:absolute;left:.14em;bottom:calc(var(--tr-tam) * .56);margin:0;font-size:clamp(19px, 1.9vw, 28px);color:var(--tinta-suave)}
.tr-item--canal .tr-txt{grid-column:2;align-self:end}
.tr-lado{grid-column:3;display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-width:0}
.tr-dela{font-size:clamp(17px, 1.3vw, 19.5px);line-height:1.28;color:var(--tinta);padding-left:16px;border-left:1px solid var(--carvalho-fio)}
/* os dois livros da estante dela, deitados na prateleira do canal */
.tr-livros{display:flex;flex-direction:column;align-items:flex-start}
.tr-livros figcaption{font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.3;color:var(--tinta-suave);margin-bottom:11px}
.tr-livro{position:relative;display:flex;align-items:center;height:clamp(30px, 2.5vw, 36px);padding:0 22px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1;white-space:nowrap;border-radius:2px}
.tr-livro::before,.tr-livro::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:rgb(255 255 255 / .22)}
.tr-livro::before{left:10px}
.tr-livro::after{right:10px}
.tr-livro--a{margin-left:16px;background:linear-gradient(180deg, #dca066 0, #cf9056 60%, #c2834a 100%);color:var(--carvalho-tinta);box-shadow:inset 0 1px 0 rgb(255 255 255 / .35)}
.tr-livro--b{background:linear-gradient(180deg, #2a3c63 0, #1d2b49 60%, #172340 100%);color:var(--creme);box-shadow:inset 0 1px 0 rgb(255 255 255 / .16), 0 -1px 0 rgb(30 16 4 / .35), 0 1px 0 rgb(58 36 16 / .4)}

/* fecho: a frase que leva para a cadeira */
.tr-fecho{margin-top:clamp(34px, 3.8vw, 60px);margin-left:calc((100% - var(--tr-vao) * 2) * 4.9 / 11.4 + var(--tr-vao));max-width:27em;font-family:var(--serifa);font-style:italic;font-size:clamp(19px, 1.55vw, 23.5px);line-height:1.3;color:var(--tinta-suave)}

/* entrada: o fio se estende, a palavra pousa nele, o texto sobe. Tudo por transição: ao terminar não sobra nada animado */
.tr-ligada .tr-item::after{clip-path:inset(0 100% 0 0);transition:clip-path 1.15s var(--curva-estende)}
.tr-ligada .tr-item.tr-visto::after{clip-path:inset(0 0 0 0)}
.tr-ligada .tr-nome em,.tr-ligada .tr-foto{opacity:0;transform:translateY(-22px);transition:opacity .9s .32s, transform .95s .32s var(--curva)}
.tr-ligada .tr-foto{transition-delay:.6s}
.tr-ligada .tr-pre,.tr-ligada .tr-pos{opacity:0;transition:opacity .8s .62s}
.tr-ligada .tr-txt,.tr-ligada .tr-lado{opacity:0;transform:translateY(18px);transition:opacity .9s .42s, transform .9s .42s var(--curva)}
.tr-ligada .tr-lado{transition-delay:.54s}
.tr-ligada .tr-item.tr-visto .tr-nome em,.tr-ligada .tr-item.tr-visto .tr-foto,.tr-ligada .tr-item.tr-visto .tr-pre,.tr-ligada .tr-item.tr-visto .tr-pos,.tr-ligada .tr-item.tr-visto .tr-txt,.tr-ligada .tr-item.tr-visto .tr-lado{opacity:1;transform:none}

@media (max-width:1100px) and (min-width:821px){
  .tr-secao{--tr-c1:minmax(0, 4.6fr);--tr-c3:minmax(0, 3.1fr);--tr-vao:22px}
  .tr-item--canal{--tr-tam:clamp(108px, 13.4vw, 150px)}
  .tr-livro{padding:0 16px;letter-spacing:.1em}
  .tr-fecho{margin-left:calc((100% - var(--tr-vao) * 2) * 4.6 / 11.3 + var(--tr-vao))}
}
@media (max-width:820px){
  .tr-secao{--tr-foto:64px}
  .tr-lista{margin-top:30px}
  .tr-item{display:block;margin-bottom:0;padding-top:36px}
  .tr-item::after{display:none}
  .tr-nome{position:relative;flex-wrap:nowrap}
  .tr-nome::after{content:"";position:absolute;left:0;right:0;top:100%;height:1px;background:var(--carvalho-fio)}
  .tr-txt{padding:17px 0 0}
  .tr-txt .wf-texto{font-size:16px}
  .tr-lide{font-size:20px}
  .tr-item--2{--tr-tam:clamp(46px, 13.6vw, 60px)}
  .tr-item--3{--tr-tam:clamp(40px, 11.4vw, 50px);padding-top:32px}
  .tr-item--canal{--tr-tam:clamp(104px, 33vw, 150px);padding-top:6px;margin-bottom:0}
  .tr-item--canal .tr-nome::after{height:3px;background:linear-gradient(180deg, #c98a4c, var(--carvalho-fio))}
  .tr-item--canal .tr-pre{font-size:19px}
  .tr-lado{margin-top:20px;gap:26px}
  .tr-dela{font-size:18px}
  .tr-livros{position:relative;align-items:flex-start}
  .tr-livros::after{content:"";position:absolute;left:0;width:min(100%, 250px);top:100%;height:1px;background:var(--carvalho-fio)}
  /* coroas: a peça fica em pé no mesmo fio da palavra, à direita */
  .tr-item--foto{display:grid;grid-template-columns:minmax(0,1fr) var(--tr-foto);column-gap:10px;align-items:end;--tr-tam:clamp(42px, 12vw, 56px)}
  .tr-item--foto .tr-nome{grid-area:1 / 1;font-size:15.5px;column-gap:.45em}
  .tr-item--foto .tr-nome::after{right:calc((var(--tr-foto) + 10px) * -1)}
  .tr-item--foto .tr-foto{position:relative;right:auto;bottom:auto;grid-area:1 / 2;box-shadow:none}
  .tr-item--foto .tr-txt{grid-area:2 / 1 / 3 / 3;padding-right:0}
  .tr-fecho{margin:34px 0 0;font-size:19.5px}
  .tr-ligada .tr-nome::after{clip-path:inset(0 100% 0 0);transition:clip-path 1.05s var(--curva-estende)}
  .tr-ligada .tr-item.tr-visto .tr-nome::after{clip-path:inset(0 0 0 0)}
}
@media (max-width:345px){ .tr-item--foto{display:block} .tr-item--foto .tr-foto{display:none} .tr-item--foto .tr-nome::after{right:0} }
@media (prefers-reduced-motion:reduce){
  .tr-ligada .tr-item::after,.tr-ligada .tr-nome::after{clip-path:none;transition:none}
  .tr-ligada .tr-nome em,.tr-ligada .tr-pre,.tr-ligada .tr-pos,.tr-ligada .tr-txt,.tr-ligada .tr-lado,.tr-ligada .tr-foto{opacity:1;transform:none;transition:none}
}


/* ===== cadeira ===== */
/* 5 · cadeira — "Depois, a cadeira". A única seção em que o céu entra: creme → céu → creme.
   A foto dela sangra pela direita; o céu e a bancada de granito saem da foto e atravessam a página
   (tons medidos na coluna esquerda da foto, altura por altura). A foto da cadeira fica em pé na bancada,
   com reflexo no granito polido. Não há carvalho aqui. Prefixo cd-. */
.cd-secao{padding:0 var(--margem) calc(var(--secao) * .75);background:var(--parede);
  --cd-h:clamp(520px,54vw,880px);            /* altura da foto */
  --cd-w:calc(var(--cd-h) * .8);             /* largura da foto (4:5) */
  --cd-topo:clamp(110px,13vw,210px);         /* faixa em que a parede vira céu */
  --cd-ws:clamp(190px,18.5vw,300px);         /* largura da janela da cadeira */
  --cd-pe:.795;                              /* onde a janela da cadeira pisa, em fração da altura da foto */
  --cd-tinta-ceu:#2f3b55}
.cd-alto{position:relative;margin:0 calc(var(--margem) * -1);height:calc(var(--cd-topo) + var(--cd-h))}

/* o céu: creme no alto, depois os azuis da foto na mesma altura em que aparecem nela, até o clarão do horizonte */
.cd-ceu{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,
    var(--parede) 0,
    #ebeceb calc(var(--cd-topo) * .3),
    var(--ceu) calc(var(--cd-topo) * .64),
    var(--ceu-fundo) var(--cd-topo),
    #8ebaeb calc(var(--cd-topo) + var(--cd-h) * .16),
    #98c5ef calc(var(--cd-topo) + var(--cd-h) * .24),
    #add4f0 calc(var(--cd-topo) + var(--cd-h) * .32),
    #c7e0ef calc(var(--cd-topo) + var(--cd-h) * .40),
    #e6f2f4 calc(var(--cd-topo) + var(--cd-h) * .48),
    #f2f6f9 calc(var(--cd-topo) + var(--cd-h) * .56),
    #f4f0e9 calc(var(--cd-topo) + var(--cd-h) * .745))}
/* a parede entra pela esquerda, em diagonal: o azul se abre na direção da janela dela, e não em faixa */
.cd-ceu::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 64vw calc(var(--cd-topo) + var(--cd-h) * .6) at 0 0, var(--parede) 0, rgb(245 238 228 / .9) 30%, rgb(245 238 228 / .45) 62%, rgb(245 238 228 / 0) 100%)}
/* dois fiapos de nuvem, na diagonal, como os da foto */
.cd-ceu i{position:absolute;border-radius:50%;background:radial-gradient(closest-side, rgb(255 255 255 / .6), transparent);will-change:transform}
.cd-ceu i:nth-child(1){width:50vw;height:8vw;left:16vw;top:calc(var(--cd-topo) + var(--cd-h) * .3);rotate:-9deg;animation:cd-nuvem1 60s ease-in-out infinite alternate}
.cd-ceu i:nth-child(2){width:36vw;height:5vw;left:30vw;top:calc(var(--cd-topo) + var(--cd-h) * .12);rotate:-12deg;opacity:.7;animation:cd-nuvem2 74s ease-in-out infinite alternate}
@keyframes cd-nuvem1{to{transform:translate3d(7vw,-1.4vw,0)}}
@keyframes cd-nuvem2{to{transform:translate3d(-6vw,1vw,0)}}

/* título no céu */
.cd-texto{position:absolute;left:var(--margem);top:calc(var(--cd-topo) + var(--cd-h) * .07);right:calc(var(--cd-w) * .95 + var(--cd-ws) + 40px)}
.cd-olho{color:var(--cd-tinta-ceu)}
.cd-h2{font-family:var(--serifa);font-weight:400;font-size:clamp(52px,6.6vw,110px);line-height:.96;letter-spacing:-.024em;margin-top:clamp(16px,1.8vw,28px);color:var(--tinta)}
.cd-h2 em{display:block;font-style:italic;color:var(--marinho-2);white-space:nowrap}
.cd-apoio{margin-top:clamp(18px,1.9vw,30px);max-width:21em;color:var(--cd-tinta-ceu)}

/* a foto: borda direita na borda da página; a esquerda e o alto se dissolvem no céu (alfa no próprio arquivo) */
.cd-flores{position:absolute;right:0;top:var(--cd-topo);width:var(--cd-w);height:var(--cd-h);margin:0;z-index:1}
.cd-flores img{width:100%;height:100%;max-width:none}

/* a bancada de granito sai da foto e atravessa a página */
.cd-bancada{position:absolute;left:0;right:0;top:calc(var(--cd-topo) + var(--cd-h) * .745);bottom:0;transform-origin:100% 50%;
  background:linear-gradient(180deg, #1b293c 0, #162539 8%, #10213b 22%, #0f2038 52%, #18263c 66%, #333e54 71.5%, #565f76 74.6%, #5d6675 76%, #2c3749 79%, #182438 83%, #0a1b31 91%, #04172d 100%)}
.cd-bancada::before{content:"";position:absolute;inset:0 0 26% 0;opacity:.2;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .8  0 0 0 0 .87  0 0 0 0 1  0 0 0 9 -5.9'/></filter><rect width='260' height='160' filter='url(%23g)'/></svg>")}
.cd-bancada::after{content:"";position:absolute;left:0;right:0;top:100%;height:34px;background:linear-gradient(180deg, rgb(15 24 41 / .3), transparent);pointer-events:none}
.cd-dela{position:absolute;z-index:2;left:var(--margem);right:calc(var(--cd-w) * .95 + var(--cd-ws) + 40px);top:calc(var(--cd-topo) + var(--cd-h) * .772);font-size:clamp(19px,2.2vw,34px);line-height:1.14;letter-spacing:-.01em;color:var(--creme);text-wrap:balance}
.cd-dela cite{margin-top:9px;opacity:1;color:rgb(247 240 229 / .74)}

/* a foto da cadeira, em pé sobre a bancada, onde a foto grande se dissolve; o granito polido a reflete */
.cd-sala{position:absolute;z-index:3;margin:0;width:var(--cd-ws);aspect-ratio:2/3;right:calc(var(--cd-w) * .95);top:calc(var(--cd-topo) + var(--cd-h) * var(--cd-pe) - var(--cd-ws) * 1.5);box-shadow:0 1px 0 rgb(2 8 18 / .7), 0 22px 30px -18px rgb(2 8 18 / .9)}
.cd-sala img{position:absolute;inset:0}
.cd-etq{position:absolute;left:12px;top:12px;z-index:2;background:rgb(15 24 41 / .72)}
.cd-reflexo{position:absolute;z-index:2;right:calc(var(--cd-w) * .95);top:calc(var(--cd-topo) + var(--cd-h) * var(--cd-pe) + 1px);width:var(--cd-ws);height:calc(var(--cd-h) * .128);max-width:none;object-fit:cover;object-position:50% 100%;transform:scaleY(-1);opacity:.36;filter:blur(1.4px) saturate(.75);pointer-events:none;
  -webkit-mask-image:linear-gradient(0deg, #000 0, rgb(0 0 0 / .35) 45%, transparent 100%);mask-image:linear-gradient(0deg, #000 0, rgb(0 0 0 / .35) 45%, transparent 100%)}

/* embaixo da bancada, a parede de novo */
.cd-baixo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);column-gap:clamp(28px,7vw,120px);align-items:start;padding-top:clamp(60px,7vw,112px)}
.cd-rotina{order:1}
.cd-par{order:2}
.cd-passos{margin-top:clamp(16px,1.6vw,24px);font-family:var(--serifa);font-size:clamp(22px,2.3vw,36px);line-height:1.24;letter-spacing:-.012em;color:var(--tinta);text-wrap:pretty}
.cd-passos em{font-style:italic;color:var(--marinho-2)}
.cd-legenda{margin-top:clamp(22px,2.4vw,36px);font-size:clamp(16px,1.3vw,20px);color:var(--tinta-suave);max-width:30em}
.cd-legenda cite,.cd-voz cite{opacity:1;color:var(--tinta-suave)}
.cd-voz blockquote{margin-top:clamp(16px,1.6vw,24px);font-size:clamp(19px,1.75vw,27px);color:var(--tinta)}

/* um gesto só: a bancada se estende a partir da foto, a foto da cadeira pousa nela, o reflexo aparece */
@media (min-width:1101px){
  .cd-anima:not(.cd-pronto) .cd-bancada{transform:scaleX(0)}
  .cd-anima.cd-pronto .cd-bancada{animation:cd-estende 1.15s both var(--curva-estende)}
  .js .cd-anima:not(.cd-pronto) .cd-sala[data-revela],.js .cd-anima:not(.cd-pronto) .cd-dela[data-revela]{opacity:0;animation:none}
  .js .cd-anima.cd-pronto .cd-sala[data-revela]{animation:wf-pousa 1s .8s both var(--curva)}
  .js .cd-anima.cd-pronto .cd-dela[data-revela]{animation:wf-sobe .9s .95s both var(--curva)}
  .cd-anima:not(.cd-pronto) .cd-reflexo{opacity:0}
  .cd-anima.cd-pronto .cd-reflexo{animation:cd-reflete 1s 1.45s both}
  /* terminado o gesto, tudo fica parado no estado final (sem animação pendurada) */
  .cd-anima.cd-feito .cd-bancada{animation:none;transform:none}
  .js .cd-anima.cd-feito .cd-sala[data-revela],.js .cd-anima.cd-feito .cd-dela[data-revela]{animation:none;opacity:1}
  .cd-anima.cd-feito .cd-reflexo{animation:none;opacity:.36}
}
@keyframes cd-estende{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cd-reflete{from{opacity:0}to{opacity:.36}}

/* telas médias: a foto da cadeira desce para a parede, ao lado de quem já sentou nela */
@media (max-width:1100px){
  .cd-texto{right:calc(var(--cd-w) * .84)}
  .cd-dela{right:calc(var(--cd-w) * .98)}
  .cd-baixo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,5vw,60px)}
  .cd-par{display:grid;grid-template-columns:46% minmax(0,1fr);column-gap:18px;align-items:end;border-bottom:3px solid #17233a}
  .cd-sala{position:relative;right:auto;top:auto;width:auto;box-shadow:none}
  .cd-reflexo{display:none}
  .cd-voz{padding-bottom:16px}
}
@media (max-width:820px){
  .cd-alto{height:auto}
  .cd-ceu{background:linear-gradient(180deg, var(--parede) 0, #ebeceb 60px, var(--ceu) 170px, var(--ceu-fundo) 300px)}
  .cd-ceu::before{background:radial-gradient(ellipse 96vw 250px at 0 0, var(--parede) 0, rgb(245 238 228 / .8) 34%, rgb(245 238 228 / 0) 100%)}
  .cd-ceu i:nth-child(1){width:120vw;height:22vw;left:-10vw;top:210px}
  .cd-ceu i:nth-child(2){display:none}
  .cd-texto{position:static;padding:84px var(--margem) 22px}
  .cd-h2{font-size:clamp(40px,12.4vw,58px);margin-top:14px}
  .cd-apoio{margin-top:16px}
  .cd-flores{position:relative;top:auto;width:100%;height:auto;aspect-ratio:4/5;
    background:linear-gradient(180deg, var(--ceu-fundo) 0, #8ebaeb 16%, #98c5ef 24%, #add4f0 32%, #c7e0ef 40%, #e6f2f4 48%, #f2f6f9 56%, #f2f6f9 100%)}
  .cd-flores img{position:absolute;inset:0}
  .cd-bancada{display:none}
  .cd-dela{position:relative;left:auto;right:auto;top:auto;padding:26px var(--margem) 32px;font-size:24px;background:linear-gradient(180deg, #04172d 0, var(--marinho-fundo) 100%)}
  .cd-baixo{display:block;padding-top:46px}
  .cd-voz blockquote{font-size:19px;margin-top:12px}
  .cd-voz .wf-olho{font-size:12px;letter-spacing:.14em;gap:8px}
  .cd-voz .wf-olho::before{width:18px}
  .cd-rotina{margin-top:44px}
  .cd-passos{font-size:23px;margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .cd-ceu i{animation:none}
}


/* ===== consultorio ===== */
/* 6 · consultorio — "Foi sonho um dia". Parede: quatro janelas de tamanhos diferentes em pé na mesma linha
   de carvalho, em dois pares, a pequena na frente da grande, como porta-retratos encostados num aparador. Prefixo co-. */
.co-secao{--co-w1:30vw;--co-w2:15vw;--co-w3:34.6vw;--co-w4:12.8vw;--co-s1:4.2vw;--co-s2:3.6vw;--co-v:2.6vw;--co-leg:104px}
/* malha só no miolo: as bordas de cima e de baixo ficam em creme puro; a parede esquenta perto da linha */
.co-malha{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);mask-image:linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%)}
.co-malha i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.co-malha i:nth-child(1){width:56vw;height:44vw;right:-12vw;top:4%;background:radial-gradient(closest-side, var(--parede-3), transparent);animation:wf-deriva2 30s ease-in-out infinite alternate}
.co-malha i:nth-child(2){width:70vw;height:34vw;left:-10vw;top:40%;background:radial-gradient(closest-side, color-mix(in oklch, var(--carvalho-claro) 52%, var(--parede)), transparent);animation:wf-deriva1 36s ease-in-out infinite alternate}
.co-malha i:nth-child(3){width:50vw;height:30vw;right:0;top:44%;background:radial-gradient(closest-side, color-mix(in oklch, var(--carvalho-claro) 34%, var(--parede)), transparent);animation:wf-deriva3 40s ease-in-out infinite alternate}

.co-palco{position:relative}
/* o título fica na parede, por cima das janelas baixas */
.co-cabeca{position:absolute;left:calc(var(--co-w1) + var(--co-v));right:0;top:clamp(0px,.6vw,10px);z-index:3}
.co-h2{margin-top:clamp(14px,1.6vw,24px)}
.co-h2 span{display:block;font-size:.42em;line-height:1.12;letter-spacing:-.012em;color:var(--tinta)}
.co-h2 em{display:block;font-size:1.1em;line-height:1;margin-top:.05em;white-space:nowrap}
.co-autora{margin-top:clamp(10px,1.1vw,16px);font-size:12.5px;letter-spacing:.06em;color:var(--tinta-suave)}

/* a fileira: bases alinhadas na linha, alturas diferentes; as pequenas ficam na frente das grandes */
.co-fileira{margin:0 calc(var(--margem) * -1)}
.co-trilho{position:relative;display:flex;align-items:flex-end;padding:0 var(--margem) var(--co-leg)}
.co-jan{position:relative;flex:none;margin:0}
.co-jan .wf-janela{width:100%}
.co-jan img{position:absolute;inset:0}
.co-j1{width:var(--co-w1)}
.co-j1 .wf-janela{aspect-ratio:900/1286}
.co-j2{width:var(--co-w2);margin-left:calc(var(--co-s1) * -1)}
.co-j2 .wf-janela{aspect-ratio:640/673}
.co-j3{width:var(--co-w3);margin-left:var(--co-v)}
.co-j3 .wf-janela{aspect-ratio:1000/667}
.co-j4{width:var(--co-w4);margin-left:calc(var(--co-s2) * -1)}
.co-j4 .wf-janela{aspect-ratio:600/857}
.co-frente{z-index:2}
.co-frente .wf-janela{box-shadow:-20px 4px 34px -14px rgb(10 16 28 / .62), -2px 0 0 rgb(245 238 228 / .9)}
.co-linha{position:absolute;left:0;right:0;bottom:calc(var(--co-leg) - 3px);height:3px;z-index:3;transform-origin:0 50%;background:linear-gradient(180deg, #dba56b 0, #dba56b 1px, var(--carvalho-fio) 1px);box-shadow:0 9px 16px -6px rgb(58 36 16 / .3)}
/* a legenda pende da linha, embaixo de cada janela */
.co-jan figcaption{position:absolute;left:0;top:calc(100% + 22px);width:100%;min-width:170px;display:flex;flex-direction:column;gap:5px}
.co-jan figcaption::before{content:"";position:absolute;left:0;top:-19px;width:1px;height:12px;background:var(--carvalho-fio)}
.co-j1 figcaption{width:calc(100% - var(--co-s1) - 14px)}
.co-j3 figcaption{width:calc(100% - var(--co-s2) - 14px)}
.co-j2 figcaption{width:calc(100% + var(--co-v) - 16px)}
.co-jan figcaption b{font-family:var(--serifa);font-style:italic;font-weight:400;font-size:clamp(16.5px,1.4vw,21px);line-height:1.16;color:var(--marinho-2)}
.co-jan figcaption span{font-size:13px;line-height:1.3;color:var(--tinta-suave)}
.co-jan figcaption .co-so{font-family:var(--serifa);font-size:clamp(16px,1.3vw,19px);color:var(--tinta)}
.co-barra{display:none}

/* quem fala das legendas */
.co-nota{margin-top:-6px;font-size:12.5px;letter-spacing:.04em;color:var(--tinta-suave)}
/* fecho: do sonho à porta aberta, e a resposta de quem esteve lá (a frase da paciente responde à dela, no alto) */
.co-fecho{display:grid;grid-template-columns:var(--co-w1) minmax(0,1fr);column-gap:var(--co-v);align-items:start;margin-top:clamp(44px,5vw,80px)}
.co-datas{position:relative;display:grid;gap:22px;padding:0 var(--co-s1) 0 26px}
.co-datas div:first-child::after{content:"";position:absolute;left:-22px;top:15px;width:1px;height:calc(100% + 12px);background:var(--carvalho-fio)}
.co-datas div{position:relative}
.co-datas div::before{content:"";position:absolute;left:-26px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--parede);box-shadow:inset 0 0 0 1.5px var(--carvalho-fio)}
.co-datas div:last-child::before{background:var(--carvalho-fio)}
.co-datas dt{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
.co-datas dd{margin-top:5px;font-family:var(--serifa);font-size:clamp(17px,1.4vw,21px);line-height:1.3;color:var(--tinta)}
.co-carolina{margin-top:clamp(16px,1.7vw,26px);font-family:var(--serifa);font-weight:400;font-size:clamp(27px,3.5vw,56px);line-height:1.06;letter-spacing:-.02em;color:var(--tinta);text-wrap:balance;max-width:17.5em}
.co-carolina em{font-style:italic;color:var(--marinho-2)}
.co-carolina cite{display:block;margin-top:clamp(14px,1.5vw,22px);font-family:var(--sem);font-style:normal;font-size:12.5px;letter-spacing:.06em;line-height:1.3;color:var(--tinta-suave)}

/* profundidade: as janelas da frente e as fotos acompanham o ponteiro em planos diferentes (até 7 px) */
.co-jan .wf-janela,.co-jan img{transition:transform .9s var(--curva)}
.co-jan img{transform:translate3d(calc(var(--px,0) * -6px), calc(var(--py,0) * -4px), 0) scale(1.035)}
.co-frente .wf-janela{transform:translate3d(calc(var(--px,0) * 7px), 0, 0)}
.co-frente img{transform:translate3d(calc(var(--px,0) * -3px), calc(var(--py,0) * -2px), 0) scale(1.035)}

/* entrada: a linha se estende e as janelas pousam nela, primeiro as de trás, depois as da frente */
.js .co-fileira .co-jan{opacity:0}
.js .co-fileira.visto .co-jan{animation:wf-pousa .95s calc(.3s + var(--i) * .16s) both var(--curva)}
.js .co-fileira .co-linha{transform:scaleX(0)}
.js .co-fileira.visto .co-linha{animation:wf-estende 1.2s both var(--curva-estende)}

/* telas médias: a recepção fica mais baixa para o título caber na parede */
@media (max-width:1040px){
  .co-secao{--co-w1:31vw;--co-w3:32vw;--co-w4:13.4vw}
  .co-autora{margin-top:8px}
}
@media (max-width:820px){
  .co-secao{--co-leg:96px;--co-v:14px;--co-w1:64vw;--co-w3:80vw}
  .co-cabeca{position:static}
  .co-h2{margin-top:14px}
  .co-h2 span{font-size:.5em}
  .co-fileira{margin-top:30px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .co-fileira::-webkit-scrollbar{display:none}
  .co-trilho{display:inline-flex;min-width:100%}
  .co-j1{width:64vw}
  .co-j2{width:36vw;margin-left:-12vw}
  .co-j3{width:80vw}
  .co-j4{width:31vw;margin-left:-11vw}
  .co-jan .wf-janela,.co-jan img{transform:none;transition:none}
  .co-j1 figcaption{width:calc(100% - 12vw - 12px)}
  .co-j3 figcaption{width:calc(100% - 11vw - 12px)}
  .co-j2 figcaption,.co-j4 figcaption{width:calc(100% + 8px);min-width:0}
  .co-jan figcaption b{font-size:17px}
  .co-jan figcaption .co-so{font-size:16px}
  /* a régua mostra em que ponto da fileira o dedo está */
  .co-barra{display:flex;align-items:center;gap:14px;margin-top:6px;--co-p:0;--co-t:.46}
  .co-barra i{position:relative;flex:1;height:1px;background:var(--fio)}
  .co-barra i::after{content:"";position:absolute;top:-1px;height:3px;border-radius:2px;left:calc(var(--co-p) * (100% - var(--co-t) * 100%));width:calc(var(--co-t) * 100%);background:var(--carvalho-fio)}
  .co-barra span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave);transition:opacity .5s}
  .co-barra span::after{content:" →"}
  .co-rolou .co-barra span{opacity:.35}
  .co-nota{margin-top:14px}
  .co-fecho{display:block;margin-top:40px}
  .co-datas{padding-right:0}
  .co-prova{margin-top:44px}
  .co-conta{font-size:12px;letter-spacing:.12em;gap:10px;align-items:flex-start;line-height:1.5}
  .co-conta::before{width:22px;margin-top:.75em;flex:none}
  .co-carolina{font-size:clamp(27px,8vw,34px);margin-top:16px}
}
@media (prefers-reduced-motion:reduce){
  .co-malha i{animation:none}
  .js .co-fileira .co-jan{opacity:1;animation:none}
  .js .co-fileira .co-linha{transform:none;animation:none}
  .co-jan .wf-janela,.co-jan img{transition:none;transform:none}
}


/* ===== vozes ===== */
/* vozes: do outro lado da mesa. Parede (título) / tampo com o "5,0" em pé / frente com as frases dos pacientes em concordância. */
.vz-secao{padding:0;--t:clamp(62px, 9.2vw, 136px);--vz-tam:clamp(190px, 27vw, 420px)}
/* ---------- parede ---------- */
.vz-parede{position:relative;overflow:hidden;background:var(--parede);padding:clamp(84px, 9.4vw, 148px) var(--margem) 0;isolation:isolate}
.vz-malha{position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 40%);mask-image:linear-gradient(180deg, transparent 0, #000 40%)}
.vz-malha i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.vz-malha i:nth-child(1){width:56vw;height:36vw;left:-14vw;bottom:-22vw;background:radial-gradient(closest-side, color-mix(in oklch, var(--carvalho-claro) 62%, var(--parede)), transparent);animation:vz-deriva1 32s ease-in-out infinite alternate}
.vz-malha i:nth-child(2){width:50vw;height:40vw;right:-12vw;top:0;background:radial-gradient(closest-side, var(--parede-3), transparent);animation:vz-deriva2 28s ease-in-out infinite alternate}
.vz-malha i:nth-child(3){width:64vw;height:30vw;right:0;bottom:-19vw;background:radial-gradient(closest-side, color-mix(in oklch, var(--carvalho-claro) 74%, var(--parede)), transparent);animation:vz-deriva3 36s ease-in-out infinite alternate}
@keyframes vz-deriva1{to{transform:translate3d(6vw,-2vw,0) scale(1.08)}}
@keyframes vz-deriva2{to{transform:translate3d(-5vw,3vw,0) scale(1.1)}}
@keyframes vz-deriva3{to{transform:translate3d(-7vw,-2vw,0) scale(.95)}}
.vz-cab{max-width:46%;padding-bottom:clamp(38px, 4.2vw, 66px)}
.vz-cab .wf-h2{margin-top:clamp(16px, 1.8vw, 26px)}
.vz-cab .wf-h2 em{display:block}
/* ---------- mesa: o tampo e o 5,0 em pé ---------- */
.vz-mesa{position:relative;z-index:2}
.js .vz-mesa[data-revela]{opacity:1}
.js .vz-mesa[data-revela].visto{animation:none}
.vz-tampo::before{background-size:max(100%, 1400px) 100%}
.vz-luz{position:absolute;top:0;bottom:24%;right:calc(var(--margem) + var(--vz-tam) * .5);width:46vw;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(closest-side, rgb(255 246 228 / .85), transparent);animation:vz-luz 26s ease-in-out infinite alternate}
@keyframes vz-luz{from{transform:translateX(-10vw)}to{transform:translateX(8vw)}}
.vz-sombras{position:absolute;inset:0;overflow:hidden}
.vz-cinco{right:var(--margem);top:20%;--tam:var(--vz-tam);font-size:var(--vz-tam)}
.vz-cinco--letras{top:calc(var(--t) * .2)}
.vz-cinco text{text-anchor:end}
.vz-contato{fill:#2a1503;opacity:.55}
.vz-rotulo{position:absolute;right:calc(var(--margem) + var(--vz-tam) * 1.3 + clamp(20px, 2.4vw, 40px));bottom:calc(100% + clamp(16px, 1.8vw, 28px));display:grid;justify-items:end;text-align:right;color:var(--tinta);line-height:1.3;padding-right:clamp(16px, 1.6vw, 24px);border-right:1px solid var(--carvalho-fio)}
.vz-rotulo i{font-family:var(--serifa);font-style:italic;font-size:clamp(22px, 2vw, 30px);line-height:1.1;color:var(--marinho-2);margin-top:6px}
.vz-rotulo b{font-weight:500;font-size:clamp(14px, 1.05vw, 16px);margin-top:8px}
.vz-rotulo small{font-size:12.5px;color:var(--tinta-suave);margin-top:8px;letter-spacing:.02em}
.vz-estrelas{color:var(--carvalho-fio);letter-spacing:.24em;font-size:15px;margin-right:-.24em}
.vz-placa{display:none}
/* entrada: o numeral pousa, a sombra chega depois */
.js .vz-mesa .letras,.js .vz-mesa .sombra,.js .vz-mesa .sombra-longa,.js .vz-mesa .vz-contato{opacity:0}
/* o rótulo entra por transição (não por animação): ele some no celular, e uma animação recomeçaria do zero a cada vez que voltasse a existir */
.js .vz-mesa .vz-rotulo{opacity:0;transform:translateY(20px);transition:opacity .9s .75s, transform .9s .75s var(--curva)}
.js .vz-mesa.visto .vz-rotulo{opacity:1;transform:none}
.js .vz-mesa.visto .letras{animation:vz-pousa 1.05s .15s both cubic-bezier(.2,.8,.2,1)}
.js .vz-mesa.visto .sombra{animation:vz-sombra .9s .5s both}
.js .vz-mesa.visto .sombra-longa{animation:vz-sombra-longa 1.2s .5s both}
.js .vz-mesa.visto .vz-contato{animation:vz-contato .5s .62s both}
@keyframes vz-pousa{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
@keyframes vz-sombra{from{opacity:0}to{opacity:.5}}
@keyframes vz-sombra-longa{from{opacity:0}to{opacity:.16}}
@keyframes vz-contato{from{opacity:0}to{opacity:.55}}
/* ---------- frente ---------- */
.vz-frente{position:relative;padding:clamp(56px, 6.4vw, 100px) var(--margem) clamp(72px, 8.6vw, 136px);--vz-nome:clamp(126px, 9.8vw, 142px)}
.vz-abre{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(16px, 1.8vw, 26px) 32px}
.vz-abre .wf-olho{grid-column:1 / -1;justify-self:start}
/* as palavras: sem JavaScript são títulos dos grupos; com JavaScript viram o controle */
.vz-palavra{font-family:var(--serifa);font-weight:400;font-style:italic;font-size:clamp(28px, 3.2vw, 48px);line-height:1.1;color:var(--creme);margin:0 0 clamp(18px, 2vw, 30px)}
.vz-palavra b{font-weight:400}
.vz-palavra small{font-family:var(--sem);font-style:normal;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--creme-suave);margin-left:.6em}
.vz-painel + .vz-painel{margin-top:clamp(40px, 5vw, 72px)}
html:not(.js) .vz-rep{display:none}
.vz-abas:empty,.vz-dica{display:none}
.vz-abas{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px clamp(24px, 3.4vw, 56px)}
.vz-aba{display:grid;justify-items:start;gap:8px;min-height:48px;text-align:left;color:var(--creme);-webkit-tap-highlight-color:transparent}
.vz-aba-palavra{position:relative;z-index:0;font-family:var(--serifa);font-style:italic;font-size:clamp(30px, 3.5vw, 54px);line-height:1.12;letter-spacing:-.015em;padding:0 .16em;margin-left:-.16em;color:rgb(247 240 229 / .66);transition:color .35s}
.vz-aba-palavra::before{content:"";position:absolute;z-index:-1;inset:.12em 0 .06em;border-radius:4px;background:var(--carvalho-claro);transform:skewX(-9deg) scaleX(0);transform-origin:0 50%;transition:transform .55s var(--curva-estende)}
.vz-aba-palavra::after{content:"";position:absolute;left:.16em;right:.16em;bottom:.04em;border-bottom:1px dashed rgb(242 200 148 / .75);transition:opacity .3s}
.vz-aba:hover .vz-aba-palavra{color:var(--creme)}
.vz-aba[aria-selected="true"] .vz-aba-palavra{color:var(--marinho-fundo)}
.vz-aba[aria-selected="true"] .vz-aba-palavra::before{transform:skewX(-9deg) scaleX(1)}
.vz-aba[aria-selected="true"] .vz-aba-palavra::after{opacity:0}
.vz-aba-conta{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:rgb(247 240 229 / .72)}
.vz-aba[aria-selected="true"] .vz-aba-conta{color:var(--carvalho-claro)}
.vz-aba:focus-visible{outline:2px solid var(--carvalho-claro);outline-offset:6px;border-radius:6px}
.vz-com-abas .vz-palavra{display:none}
.vz-com-abas .vz-painel + .vz-painel{margin-top:0}
.vz-com-abas .vz-dica{display:block;max-width:19em;text-align:right;font-size:clamp(14px, 1.02vw, 16px);line-height:1.45;color:var(--creme-suave);padding-bottom:4px}
.vz-painel[hidden]{display:none}
.vz-painel:focus-visible{outline:1px solid rgb(242 200 148 / .6);outline-offset:14px;border-radius:6px}
.vz-palco{margin-top:clamp(36px, 4.2vw, 68px)}
.vz-palco.vz-mudando{overflow:hidden;transition:height .55s var(--curva)}
/* a concordância: nome | o que vem antes | a palavra | o que vem depois. A coluna do "antes" tem a largura da frase mais comprida e nunca quebra. */
.vz-painel--1{--vz-corpo:clamp(21px, 2.45vw, 38px)}
.vz-painel--2{--vz-corpo:clamp(20px, 2.05vw, 31px)}
.vz-conc{display:grid;grid-template-columns:var(--vz-nome) max-content max-content minmax(0,1fr);column-gap:.28em;row-gap:clamp(14px, 1.7vw, 28px);font-family:var(--serifa);font-style:italic;font-size:var(--vz-corpo);line-height:1.24;letter-spacing:-.008em;color:var(--creme)}
.vz-linha{display:grid;grid-column:1 / -1;grid-template-columns:var(--vz-nome) max-content max-content minmax(0,1fr);column-gap:.28em;align-items:baseline}
@supports (grid-template-columns:subgrid){ .vz-linha{grid-template-columns:subgrid} }
.vz-linha blockquote,.vz-linha p,.vz-solta blockquote{display:contents}
.vz-linha footer,.vz-solta footer{grid-column:1;grid-row:1;font-size:0;line-height:1}
.vz-linha cite,.vz-solta cite{font-family:var(--sem);font-style:normal;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:rgb(247 240 229 / .76);white-space:nowrap}
.vz-antes{grid-column:2;display:flex;align-items:baseline;justify-content:flex-end;gap:.5em;white-space:nowrap;color:rgb(247 240 229 / .88)}
.vz-antes::before{content:"";flex:1 1 1em;min-width:.8em;border-top:1px solid var(--fio-claro);transform:translateY(-.3em)}
.vz-eixo{grid-column:3;white-space:nowrap}
.vz-pos{position:absolute}
.vz-painel--2 .vz-depois{margin-left:.2em}
.vz-depois{grid-column:4;color:rgb(247 240 229 / .88)}
.vz-chave{position:relative;z-index:0;background:none;color:var(--marinho-fundo);padding:0 .16em}
.vz-chave::before{content:"";position:absolute;z-index:-1;inset:.12em 0 .06em;background:var(--carvalho-claro);border-radius:3px;transform:skewX(-9deg);transform-origin:0 50%}
.js .vz-linha.visto .vz-chave::before{animation:vz-grifa .6s calc(var(--d, 0s) + .35s) both var(--curva-estende)}
@keyframes vz-grifa{from{transform:skewX(-9deg) scaleX(0)}to{transform:skewX(-9deg) scaleX(1)}}
.vz-quantas{margin:clamp(20px, 2.2vw, 32px) 0 0 calc(var(--vz-nome) + 8px);font-size:clamp(14px, 1.02vw, 16px);color:var(--creme-suave)}
/* as duas frases sem nenhuma das duas palavras: mesma gramática (nome, fio, frase), corpo menor */
.vz-soltas{display:grid;gap:clamp(12px, 1.3vw, 20px);margin-top:clamp(44px, 5vw, 80px);padding-top:clamp(26px, 2.6vw, 40px);border-top:1px solid var(--fio-claro)}
.vz-solta{display:grid;grid-template-columns:var(--vz-nome) minmax(0,1fr);column-gap:8px;align-items:baseline}
.vz-solta p{grid-column:2;position:relative;padding-left:calc(34px + .6em);font-family:var(--serifa);font-style:italic;font-size:clamp(18px, 1.55vw, 24px);line-height:1.32;color:rgb(247 240 229 / .88)}
.vz-solta p::before{content:"";position:absolute;left:0;top:.66em;width:34px;border-top:1px solid var(--fio-claro)}
.vz-origem{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 40px;margin-top:clamp(40px, 4.6vw, 72px)}
.vz-origem p{font-size:clamp(14px, 1.02vw, 16px);line-height:1.5;color:var(--creme-suave);max-width:40em}

@media (max-width:1023px) and (min-width:821px){
  .vz-secao{--vz-tam:24vw}
}
/* abaixo de 1000 px a concordância empilha: o começo da frase em cima, a palavra abre a linha seguinte */
@media (max-width:999px){
  .vz-painel--1,.vz-painel--2{--vz-corpo:clamp(19px, 5.5vw, 26px)}
  .vz-conc{grid-template-columns:minmax(0,1fr);row-gap:26px;line-height:1.3}
  .vz-linha,.vz-solta{display:block}
  .vz-linha blockquote,.vz-linha p,.vz-solta blockquote{display:block}
  .vz-antes{display:block;white-space:normal;text-wrap:balance}
  .vz-antes::before{display:none}
  .vz-eixo{white-space:normal}
  .vz-pos{position:static}
  .vz-painel--2 .vz-depois{margin-left:0}
  .vz-linha footer,.vz-solta footer{margin-top:10px}
  .vz-quantas{margin-left:0}
  .vz-soltas{gap:24px}
  .vz-solta p{padding-left:0;font-size:19px}
  .vz-solta p::before{display:none}
}
@media (max-width:820px){
  .vz-secao{--t:68px;--vz-tam:min(62vw, 300px)}
  .vz-parede{padding-top:84px}
  .vz-cab{max-width:none;padding-bottom:calc(var(--vz-tam) * .69 + 22px)}
  .vz-luz{right:auto;left:-10vw;width:90vw}
  .vz-cinco{right:auto;left:calc(var(--margem) + var(--vz-tam) * 1.27)}
  .vz-rotulo{display:none}
  .vz-frente{padding-top:30px}
  .vz-placa{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding-bottom:22px;margin-bottom:30px;border-bottom:1px solid var(--fio-claro)}
  .vz-placa .vz-estrelas{color:var(--carvalho-claro);font-size:14px;letter-spacing:.2em;margin-right:0}
  .vz-placa i{font-family:var(--serifa);font-style:italic;font-size:23px;line-height:1.15;color:var(--creme)}
  .vz-placa-texto{flex:1 0 100%;font-size:13.5px;line-height:1.45;color:var(--creme-suave)}
  .vz-abre{grid-template-columns:minmax(0,1fr);gap:14px}
  .vz-aba-palavra{font-size:clamp(28px, 8.4vw, 38px)}
  .vz-abas{gap:6px 28px}
  .vz-com-abas .vz-dica{max-width:none;text-align:left;font-size:14px;padding-bottom:0}
  .vz-palco{margin-top:28px}
  .vz-soltas{margin-top:38px;padding-top:28px}
  .vz-origem{margin-top:32px}
}
/* entre 641 e 820 px (tablet em pé) sobra parede ao lado do numeral: o rótulo volta para lá */
@media (min-width:641px) and (max-width:820px){
  .vz-rotulo{display:grid;right:auto;left:calc(var(--margem) + var(--vz-tam) * 1.3 + 22px);justify-items:start;text-align:left;padding:0 0 0 18px;border-right:0;border-left:1px solid var(--carvalho-fio)}
  .vz-rotulo .vz-estrelas{margin-right:0}
  .vz-placa{display:none}
  .vz-frente{padding-top:48px}
}
@media (prefers-reduced-motion:reduce){
  .vz-malha i,.vz-luz{animation:none}
  .js .vz-mesa .letras{opacity:1;animation:none !important}
  .js .vz-mesa .vz-rotulo{opacity:1;transform:none;transition:none}
  .js .vz-mesa .sombra{opacity:.5;animation:none !important}
  .js .vz-mesa .sombra-longa{opacity:.16;animation:none !important}
  .js .vz-mesa .vz-contato{opacity:.55;animation:none !important}
  .js .vz-linha.visto .vz-chave::before{animation:none}
  .vz-aba-palavra::before,.vz-palco.vz-mudando{transition:none}
}


/* ===== sobre ===== */
/* sobre: quem senta do outro lado. Parede. O caminho dela desce pela esquerda, uma cidade por fio; o último fio (Piracicaba) atravessa a página e é nele que a janela se apoia. */
.sb-secao{--sb-foto:clamp(300px, 35vw, 540px);--sb-vao:clamp(32px, 5.4vw, 92px)}
.sb-malha{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);mask-image:linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%)}
.sb-malha i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.sb-malha i:nth-child(1){width:52vw;height:46vw;right:-12vw;top:2vw;background:radial-gradient(closest-side, var(--parede-3), transparent);animation:sb-deriva1 30s ease-in-out infinite alternate}
.sb-malha i:nth-child(2){width:58vw;height:38vw;left:-16vw;top:26vw;background:radial-gradient(closest-side, color-mix(in oklch, var(--carvalho-claro) 58%, var(--parede)), transparent);animation:sb-deriva2 36s ease-in-out infinite alternate}
.sb-malha i:nth-child(3){width:46vw;height:40vw;left:30vw;bottom:4vw;background:radial-gradient(closest-side, color-mix(in oklch, var(--parede-2) 90%, white), transparent);animation:sb-deriva3 33s ease-in-out infinite alternate}
@keyframes sb-deriva1{to{transform:translate3d(-5vw,3vw,0) scale(1.1)}}
@keyframes sb-deriva2{to{transform:translate3d(6vw,-2vw,0) scale(1.06)}}
@keyframes sb-deriva3{to{transform:translate3d(-4vw,-3vw,0) scale(.94)}}
/* o granulado some no pé da seção: a vizinha de baixo (perguntas) começa em creme sem granulado */
.sb-secao > .wf-grao{-webkit-mask-image:linear-gradient(180deg, #000 0, #000 84%, transparent 100%);mask-image:linear-gradient(180deg, #000 0, #000 84%, transparent 100%)}
/* ---------- o caminho e a janela ---------- */
.sb-palco{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--sb-foto);grid-template-rows:repeat(5, auto);column-gap:var(--sb-vao)}
.sb-cab{grid-column:1;grid-row:1;padding-bottom:clamp(36px, 4.4vw, 70px)}
.sb-junto{white-space:nowrap}
.sb-cab .wf-olho::before{flex:none}
.sb-cab .wf-h2{margin-top:clamp(16px, 1.8vw, 26px)}
.sb-cab .wf-h2 em{display:block}
.sb-lead{margin-top:clamp(20px, 2.2vw, 34px);max-width:31em}
.sb-caminho{grid-column:1;grid-row:2 / 6;display:grid;grid-template-rows:subgrid}
.sb-passo{min-width:0;padding-bottom:clamp(30px, 3.4vw, 54px)}
.sb-passo--aqui{grid-row:3 / 5;display:grid;grid-template-rows:subgrid;padding-bottom:0}
.js .sb-passo[data-revela]{opacity:1}
.js .sb-passo[data-revela].visto{animation:none}
.sb-passo h3{position:relative;font-family:var(--serifa);font-style:italic;font-weight:400;font-size:clamp(30px, 3.3vw, 50px);line-height:.67;letter-spacing:-.02em;color:var(--marinho-2);padding-top:.3em}
/* o fio de cada cidade: sai da borda da página e vai até a janela */
.sb-passo h3::after{content:"";position:absolute;left:calc(var(--margem) * -1);right:calc(var(--sb-vao) * -1);top:100%;height:1px;background:var(--carvalho-fio);opacity:.75;transform-origin:0 50%}
.sb-passo--aqui h3::after{display:none}
.sb-passo p{margin-top:clamp(14px, 1.3vw, 20px);max-width:35em;font-size:clamp(16px, 1.16vw, 18px);line-height:1.55;color:var(--tinta-suave)}
.sb-janela{grid-column:2;grid-row:1 / 5;align-self:end;margin:0;aspect-ratio:1200 / 1778;z-index:1}
/* a frase dela pousada na mesa da foto, ao lado da caneca; fica no terço de baixo, longe do rosto */
.sb-cafe{position:absolute;left:14px;bottom:14px;z-index:2;max-width:calc(100% - 28px)}
.sb-cafe q{quotes:"“" "”";font-family:var(--serifa);font-style:italic;font-size:14.5px;letter-spacing:0;line-height:1.15}
.sb-janela img{width:100%;height:100%;object-fit:cover}
.sb-fio{grid-column:1 / -1;grid-row:4;align-self:end;position:relative;top:3px;margin:0 calc(var(--margem) * -1);height:3px;background:linear-gradient(180deg, var(--carvalho-fio), #cf9154);box-shadow:0 10px 18px -8px rgb(58 36 16 / .3);transform-origin:0 50%}
.sb-legenda{grid-column:2;grid-row:5;margin-top:clamp(17px, 1.5vw, 23px);font-size:13.5px;line-height:1.5;color:var(--tinta-suave)}
/* entrada: o fio se estende, a cidade pousa nele, o texto sobe */
.js .sb-passo h3,.js .sb-passo p{opacity:0}
.js .sb-passo h3::after{transform:scaleX(0)}
.js .sb-passo.visto h3{animation:sb-pousa 1s .35s both var(--curva)}
.js .sb-passo.visto h3::after{animation:wf-estende 1.2s both var(--curva-estende)}
.js .sb-passo.visto p{animation:wf-sobe .9s .5s both var(--curva)}
.js .sb-fio[data-revela]{opacity:1;transform:scaleX(0)}
.js .sb-fio[data-revela].visto{animation:wf-estende 1.6s both var(--curva-estende)}
@keyframes sb-pousa{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
/* ---------- a frase dela e as duas pontas ---------- */
.sb-oficio{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(32px, 6vw, 104px);align-items:start;margin-top:clamp(64px, 8vw, 128px)}
.sb-dela p{font-size:clamp(24px, 2.5vw, 38px);line-height:1.3;letter-spacing:-.012em;color:var(--marinho-2)}
.sb-dela cite{margin-top:20px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;opacity:1;color:var(--tinta-suave)}
.sb-ve{text-decoration:underline solid var(--carvalho-fio);text-decoration-thickness:2px;text-underline-offset:.2em}
.sb-nao-ve{text-decoration:underline dotted var(--carvalho-fio);text-decoration-thickness:2px;text-underline-offset:.2em}
.sb-estante{display:grid;grid-template-columns:minmax(0,1fr) clamp(170px, 17.5vw, 260px);grid-template-rows:auto auto auto auto;column-gap:clamp(20px, 2.4vw, 36px);padding-top:6px}
.sb-pontas{grid-column:1 / -1;grid-row:1 / 3;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}
.sb-pontas div:first-child{grid-column:1 / -1;max-width:30em;padding-bottom:clamp(18px, 1.8vw, 26px)}
.sb-pontas div:last-child{grid-column:1;align-self:end;padding-bottom:clamp(18px, 1.8vw, 26px)}
.sb-pontas dt{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta)}
.sb-pontas dd{margin-top:8px;font-size:clamp(15px, 1.1vw, 17px);line-height:1.5;color:var(--tinta-suave)}
.sb-pontas dd i{font-family:var(--serifa);font-style:italic;font-size:1.1em;color:var(--tinta)}
/* a prateleira: a foto dos livros fica em pé no fio que fecha a legenda */
.sb-livros{grid-column:2;grid-row:2;align-self:end;margin:0;border-radius:var(--raio-p) var(--raio-p) 0 0;overflow:hidden;aspect-ratio:640 / 368;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .12)}
.sb-livros img{width:100%;height:100%;object-fit:cover}
.sb-estante::after{content:"";grid-column:1 / -1;grid-row:3;height:2px;background:linear-gradient(180deg, var(--carvalho-fio), #cf9154);box-shadow:0 8px 14px -8px rgb(58 36 16 / .28)}
.sb-nota{grid-column:1 / -1;grid-row:4;justify-self:end;margin-top:12px;font-size:13.5px;color:var(--tinta-suave)}

@supports not (grid-template-rows:subgrid){
  .sb-pontas{display:block;grid-column:1;grid-row:1 / 3}
  .sb-caminho{display:block;grid-row:2}
  .sb-passo--aqui{display:block}
  .sb-passo--aqui h3::after{display:block}
  .sb-janela{grid-row:1 / 3;align-self:start}
  .sb-fio{display:none}
  .sb-legenda{grid-row:3}
}
@media (max-width:820px){
  .sb-secao{--sb-foto:42vw;--sb-vao:28px}
  .sb-passo h3{font-size:34px}
  .sb-passo p{font-size:16px;margin-top:14px}
  .sb-oficio{grid-template-columns:minmax(0,1fr);gap:34px;margin-top:56px}
  .sb-dela p{font-size:25px}
  .sb-estante{grid-template-columns:minmax(0,1fr) 132px;column-gap:16px}
  .sb-cafe{left:10px;bottom:10px}
}
/* celular: a janela ocupa a largura e vem antes do caminho; cada cidade tem o seu fio */
@media (max-width:640px){
  .sb-palco{display:flex;flex-direction:column}
  .sb-cab{order:1;padding-bottom:30px}
  .sb-janela{order:2;width:100%}
  .sb-fio{order:3;top:0;flex:none;align-self:stretch}
  .sb-legenda{order:4;margin-top:14px}
  .sb-caminho{order:5;display:block;margin-top:40px}
  .sb-passo,.sb-passo--aqui{display:block;padding-bottom:34px}
  .sb-passo--aqui{padding-bottom:0}
  .sb-passo h3::after,.sb-passo--aqui h3::after{display:block;left:0;right:calc(var(--margem) * -1)}
}
@media (prefers-reduced-motion:reduce){
  .sb-malha i{animation:none}
  .js .sb-passo h3,.js .sb-passo p{opacity:1;animation:none !important}
  .js .sb-passo h3::after{transform:none;animation:none !important}
  .js .sb-fio[data-revela]{transform:none}
}


/* ===== perguntas ===== */
/* 9 · perguntas — "O que costumam perguntar". Seção de parede. Prefixo pg-. Animações pg-. */
.pg{--pg-tam:clamp(42px, 5.2vw, 82px);--pg-d:.165;--pg-fio:linear-gradient(180deg,#c98a4c,var(--carvalho-fio))}
/* a malha e o grão somem nas bordas: a seção começa e termina em creme puro */
.pg-malha,.pg-grao{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%)}

.pg-cabeca{margin-bottom:clamp(36px,4.4vw,64px)}
.pg-olho{margin-bottom:clamp(16px,1.7vw,24px)}
.pg-lide{margin-top:clamp(16px,1.6vw,22px);max-width:27em}
.pg-lado{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave)}
.pg-voce{display:none}

/* ---------- base, sem JavaScript: os pares em duas colunas, tudo à vista ---------- */
.pg-palco,.pg-fio,.pg-prox{display:none}
.pg-quadro::after{content:"";display:none}
.pg-ela{max-width:320px;aspect-ratio:10 / 11;margin-bottom:44px}
.pg-ela img{position:absolute;inset:0;object-position:38% 50%}
.pg-item{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,4vw,72px);padding:30px 0;border-top:1px solid var(--fio)}
.pg-h{font-weight:400}
.pg-q{display:flex;align-items:baseline;gap:14px;text-align:left;font-family:var(--serifa);font-style:italic;font-weight:400;font-size:clamp(23px,2.05vw,30px);line-height:1.14;letter-spacing:-.012em;color:var(--marinho-2);cursor:default}
.pg-num{flex:none;min-width:1.1em;font-family:var(--sem);font-style:normal;font-size:12.5px;letter-spacing:.08em;color:var(--tinta-suave)}
.pg-txt{text-decoration:underline 2px transparent;text-underline-offset:.24em;transition:text-decoration-color .4s}
.pg-r .pg-lado{margin-bottom:14px}
.pg-abre{font-family:var(--serifa);font-size:clamp(23px,2.1vw,31px);line-height:1.14;letter-spacing:-.014em;color:var(--tinta);max-width:20em}
.pg-abre--aspas{text-indent:-.42em}
.pg-r .wf-texto{margin-top:14px;max-width:36em}
.pg-voz{margin-top:20px;font-size:clamp(17px,1.3vw,19.5px);color:var(--marinho-2)}
.pg-voz::before{content:"";display:block;width:28px;height:1px;background:var(--carvalho-fio);margin-bottom:13px}
.pg-voz cite{color:var(--tinta-suave);opacity:1}
.pg-acao{margin-top:18px}
.pg-outra{padding-top:30px;border-top:1px solid var(--fio)}
.pg-outra span{font-family:var(--serifa);font-style:italic;font-size:clamp(19px,1.5vw,22px);color:var(--tinta-suave);margin-right:.5em}
.pg-outra .wf-link{font-size:16px;color:var(--tinta)}

/* ---------- com JavaScript: uma pergunta na mesa por vez ---------- */
/* a pergunta escolhida fica em pé na linha, com a luz de objeto do hero: azul em cima, o calor da madeira só rente ao pé */
.pg-fala{font-family:var(--serifa);font-style:italic;font-weight:400;font-size:var(--pg-tam);line-height:.98;letter-spacing:-.03em;text-wrap:balance;margin-top:14px;margin-bottom:calc(var(--pg-tam) * var(--pg-d) * -1);filter:drop-shadow(0 2px 1.5px rgb(44 23 4 / .26)) drop-shadow(8px 6px 8px rgb(58 32 8 / .14))}
.pg-fala span{display:inline-block;padding:.14em .16em .3em 0;margin:-.14em 0 -.3em;color:var(--marinho-2)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pg-fala span{background:linear-gradient(to top, #8a5a2e 0, #8a5a2e calc((.3 + var(--pg-d)) * 1em), #4a3a36 calc((.35 + var(--pg-d)) * 1em), #1a2640 calc((.44 + var(--pg-d)) * 1em), #1c2d4e 58%, #2c4777 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.pg-pousa{animation:pg-pousa .9s both cubic-bezier(.2,.8,.2,1)}
.js .pg-vivo .pg-palco:not(.pg-visto) .pg-fala{opacity:0}
.pg-vivo .pg-q{cursor:pointer}
.pg-vivo .pg-ativa .pg-q{cursor:default}
.pg-vivo .pg-ativa .pg-r{animation:pg-vem .85s both var(--curva)}
.pg-vivo .pg-ativa .pg-txt{text-decoration-color:var(--carvalho-fio)}
.pg-h::after{content:"";display:block;height:0;visibility:hidden}

@media (min-width:821px){
  .pg-vivo .pg-mesa{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,1.7vw,24px);grid-template-rows:repeat(4,auto) auto auto auto}
  .pg-vivo .pg-cabeca{grid-column:1 / 7;grid-row:1 / 5;align-self:start;margin:0}
  .pg-vivo .pg-quadro,.pg-vivo .pg-lista,.pg-vivo .pg-item{display:contents}
  /* em cima, à direita: as sete perguntas para escolher */
  .pg-vivo .pg-h{align-self:start;border-top:1px solid var(--fio)}
  .pg-vivo .pg-item:nth-child(-n+4) .pg-h{grid-column:7 / 10}
  .pg-vivo .pg-item:nth-child(n+5) .pg-h{grid-column:10 / 13}
  .pg-vivo .pg-item:nth-child(4n+1) .pg-h{grid-row:1}
  .pg-vivo .pg-item:nth-child(4n+2) .pg-h{grid-row:2}
  .pg-vivo .pg-item:nth-child(4n+3) .pg-h{grid-row:3}
  .pg-vivo .pg-item:nth-child(4n) .pg-h{grid-row:4}
  .pg-vivo .pg-q{width:100%;font-size:clamp(18.5px,1.56vw,23px);color:var(--tinta-suave);padding:15px 0 16px;transition:color .3s}
  .pg-vivo .pg-q:hover{color:var(--tinta)}
  .pg-vivo .pg-ativa .pg-q{color:var(--marinho-2)}
  /* embaixo: a mesa. A pergunta em pé à esquerda; do outro lado, a resposta e ela */
  .pg-vivo .pg-palco{display:block;grid-column:1 / 6;grid-row:5;align-self:end;min-width:0;padding-top:clamp(40px,4vw,60px)}
  .pg-vivo .pg-r{grid-column:6 / 10;grid-row:5;align-self:end;min-width:0;padding:clamp(40px,4vw,60px) 0 28px;visibility:hidden;opacity:0}
  .pg-vivo .pg-ativa .pg-r{visibility:visible;opacity:1}
  .pg-vivo .pg-ela{grid-column:10 / 13;grid-row:5;align-self:end;max-width:none;width:100%;margin:clamp(40px,4vw,60px) 0 0;aspect-ratio:1 / 1}
  .pg-vivo .pg-fio{display:block;grid-column:1 / -1;grid-row:6;height:3px;margin:0 calc(var(--margem) * -1);background:var(--pg-fio);transform-origin:86% 50%}
  /* debaixo da mesa: a próxima pergunta e a saída para o WhatsApp */
  .pg-vivo .pg-sob{grid-column:1 / -1;grid-row:7;padding-top:16px}
  .pg-vivo .pg-outra{grid-column:10 / 13;grid-row:4;align-self:start;padding:15px 0 0}
  .pg-vivo .pg-outra span{display:block;font-size:clamp(18.5px,1.56vw,23px);line-height:1.14;margin:0 0 6px}
  .pg-vivo .pg-outra .wf-link{font-size:15px}
  .pg-vivo .pg-prox{display:inline-flex;align-items:baseline;gap:14px;padding:10px 0;font-size:16px;color:var(--tinta-suave);text-align:left}
  .pg-conta{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--tinta-suave);padding-right:14px;border-right:1px solid var(--fio)}
  .pg-prox-t i{font-family:var(--serifa);font-style:italic;font-size:1.25em;color:var(--marinho-2);margin-left:.2em}
  .pg-seta{color:var(--marinho-2);transition:transform .35s var(--curva)}
  .pg-prox:hover .pg-seta{transform:translateX(5px)}
}
/* telas médias: a pergunta em pé um pouco menor para caber em duas linhas */
@media (max-width:1060px) and (min-width:821px){
  .pg{--pg-tam:4.5vw}
}

/* ---------- entrada ---------- */
.js .pg-vivo .pg-fio[data-revela]{opacity:1;transform:scaleX(0)}
.js .pg-vivo .pg-fio[data-revela].visto{animation:pg-estende 1.3s both var(--curva-estende)}
@keyframes pg-estende{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pg-pousa{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
@keyframes pg-vem{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

@media (max-width:820px){
  .pg-cabeca{margin-bottom:28px}
  .pg-ela{max-width:none;aspect-ratio:3 / 2;margin-bottom:0}
  .pg-ela img{object-position:50% 12%}
  .pg-quadro{margin-bottom:30px}
  .pg-quadro::after{display:block;height:3px;margin:0 calc(var(--margem) * -1);background:var(--pg-fio)}
  .pg-item{display:block;padding:22px 0}
  .pg-q{font-size:25px}
  .pg-item .pg-r{margin-top:16px}
  .pg-outra{padding-top:24px}
  .pg-outra span{display:block;font-size:22px;margin:0 0 8px}
  /* com JavaScript: a resposta abre embaixo da pergunta tocada; as outras fecham */
  .pg-vivo .pg-voce{display:block;margin-bottom:14px}
  .pg-vivo .pg-palco{display:block;position:absolute;visibility:hidden;height:0;overflow:hidden}
  .pg-vivo .pg-fio{display:block;visibility:hidden;height:0}
  .pg-vivo .pg-item{padding:0}
  .pg-vivo .pg-q{width:100%;padding:20px 0 19px;min-height:64px;font-size:23px;color:var(--tinta-suave)}
  /* a pergunta aberta cresce (sem transição de tamanho: a página não pode andar debaixo do dedo) */
  .pg-vivo .pg-ativa .pg-q{font-size:30px;line-height:1.06;letter-spacing:-.02em;color:var(--marinho-2);padding:24px 0 20px}
  .pg-vivo .pg-ativa .pg-txt{text-decoration-color:transparent;text-wrap:balance}
  .pg-vivo .pg-item .pg-r{margin-top:0;height:0;overflow:hidden;visibility:hidden}
  .pg-vivo .pg-ativa .pg-r{height:auto;overflow:visible;visibility:visible;padding:20px 0 34px 26px}
  /* a linha da pergunta aberta vem do lado dela (da direita) */
  .pg-vivo .pg-ativa .pg-h::after{height:2px;visibility:visible;margin-right:calc(var(--margem) * -1);background:var(--pg-fio);transform-origin:100% 50%;animation:pg-estende .9s both var(--curva-estende)}
}
@media (prefers-reduced-motion:reduce){
  .js .pg-vivo .pg-fio[data-revela]{transform:none !important;animation:none !important}
  .pg-pousa,.pg-vivo .pg-ativa .pg-r,.pg-vivo .pg-ativa .pg-h::after{animation:none !important}
  .pg-txt,.pg-seta{transition:none}
}


/* ===== chegar ===== */
/* chegar: da calçada à porta 308. O tampo é o caminho: a placa do prédio pisa nele à esquerda, o número da porta à direita. */
.ch-secao{position:relative;--t:clamp(54px, 6.8vw, 104px);--num:clamp(96px, 14.6vw, 222px);--jw:clamp(200px, 17.4vw, 262px)}
.ch-parede{padding-bottom:0}
/* o título abre pelas duas pontas do caminho, ligadas por uma linha pontilhada */
.ch-titulo{display:flex;align-items:baseline;gap:clamp(18px, 2.4vw, 40px);margin-top:clamp(16px, 1.8vw, 26px);font-size:clamp(40px, 6vw, 96px)}
.ch-titulo span,.ch-titulo em{flex:none}
.ch-trilha{flex:1;min-width:40px;height:.12em;align-self:center;margin-top:.18em;
  background:radial-gradient(circle, var(--carvalho-fio) 0 1.6px, transparent 2.2px) 0 50% / 16px 100% repeat-x;opacity:.75;
  transform-origin:0 50%}
.js .ch-titulo .ch-trilha{clip-path:inset(0 100% 0 0)}
.js .ch-titulo.visto .ch-trilha{animation:ch-anda 1.5s .35s both var(--curva-estende)}
@keyframes ch-anda{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.ch-caminho{display:grid;grid-template-columns:var(--jw) minmax(0,1.2fr) minmax(0,1fr) calc(var(--num) * 1.86);gap:clamp(26px, 3.6vw, 60px);align-items:end;margin-top:clamp(22px, 2.6vw, 40px)}
.ch-caminho li{min-width:0;display:flex;flex-direction:column}
.ch-p1,.ch-p4{align-self:stretch;justify-content:space-between}
.ch-fala{padding-bottom:clamp(20px, 2vw, 30px)}
.ch-fala b{font-family:var(--serifa);font-style:italic;font-weight:400;font-size:clamp(30px, 2.7vw, 40px);line-height:1;color:var(--carvalho-fio)}
.ch-fala h3{display:inline-block;font-family:var(--sem);font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-suave);margin:0 0 0 10px;vertical-align:.5em}
.ch-fala p{color:var(--tinta-suave);font-size:clamp(15px, 1.08vw, 17px);line-height:1.5;margin-top:10px}
.ch-fala .wf-citacao{color:var(--tinta);font-size:clamp(20px, 1.72vw, 27px);line-height:1.24}
.ch-p1 .ch-fala{width:max(100%, 15.5em);padding-bottom:clamp(24px, 2.6vw, 40px)}
.ch-p4 .ch-fala{text-align:right;padding-bottom:clamp(10px, 1.2vw, 18px)}
.ch-vao{display:block;flex:none}
.ch-vao-janela{height:calc(var(--jw) * 1.25)}
.ch-vao-numero{height:calc(var(--num) * .7)}
.ch-andares{display:flex;gap:8px;margin-top:16px}
.ch-andares span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--tinta-suave);box-shadow:inset 0 0 0 1px var(--fio)}
.ch-andares span:last-child{color:var(--carvalho-tinta);background:var(--carvalho-claro);box-shadow:0 0 0 5px rgb(242 200 148 / .32)}
/* T, 1, 2, 3 acendem em sequência quando o passo entra; o 3 fica aceso */
.js .ch-p3.visto .ch-andares span{animation:ch-acende .5s both}
.js .ch-p3.visto .ch-andares span:nth-child(1){animation-delay:.55s}
.js .ch-p3.visto .ch-andares span:nth-child(2){animation-delay:.8s}
.js .ch-p3.visto .ch-andares span:nth-child(3){animation-delay:1.05s}
.js .ch-p3.visto .ch-andares span:nth-child(4){animation:ch-fica .6s 1.3s both}
@keyframes ch-acende{0%{background:transparent}45%{background:var(--carvalho-claro);color:var(--carvalho-tinta)}100%{background:transparent}}
@keyframes ch-fica{from{background:transparent;color:var(--tinta-suave);box-shadow:inset 0 0 0 1px var(--fio)}to{background:var(--carvalho-claro);color:var(--carvalho-tinta);box-shadow:0 0 0 5px rgb(242 200 148 / .32)}}
.ch-nota{position:absolute;left:calc(var(--margem) + var(--jw) + clamp(26px, 3.6vw, 60px));top:calc(var(--secao) + clamp(40px, 6vw, 96px) * 1.9 + 60px);max-width:24em;font-size:13.5px;line-height:1.5;color:var(--tinta-suave)}
.ch-soleira{position:relative}
.ch-janela{position:absolute;left:var(--margem);bottom:100%;width:var(--jw);aspect-ratio:4/5;margin:0}
.ch-janela .wf-etiqueta{position:absolute;left:10px;top:10px}
.ch-numero{left:calc(100% - var(--margem) + var(--num) * .02);top:calc(var(--t) * .2);--tam:var(--num)}
.ch-frente{padding:clamp(54px, 6.4vw, 96px) var(--margem) clamp(64px, 8vw, 120px)}
.ch-despedida{font-size:clamp(28px, 3.5vw, 54px);line-height:1.08;letter-spacing:-.014em;color:var(--creme)}
.ch-despedida span{display:block;color:var(--carvalho-claro)}
.ch-despedida cite{margin-top:18px;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.ch-despedida cite::before{content:"";display:inline-block;width:34px;height:1px;background:currentColor;vertical-align:middle;margin-right:12px}
.ch-dados{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px, 5vw, 88px);align-items:stretch;margin-top:clamp(40px, 5vw, 76px)}
.ch-ficha dl>div{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid var(--fio-claro)}
.ch-ficha dl>div:last-child{border-bottom:1px solid var(--fio-claro)}
.ch-ficha dt{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:rgb(247 240 229 / .66);padding-top:4px}
.ch-ficha dd{color:var(--creme);font-size:clamp(16px, 1.2vw, 18.5px);line-height:1.5}
.ch-ficha dd a{border-bottom:1px solid rgb(247 240 229 / .4)}
.ch-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:28px}
.ch-mapa{position:relative;min-height:320px;border-radius:var(--raio);overflow:hidden;background:#1a2942;box-shadow:inset 0 0 0 1px var(--fio-claro)}
.ch-mapa-capa{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;
  background:
    linear-gradient(118deg, transparent 0 46%, rgb(247 240 229 / .1) 46% 47.4%, transparent 47.4%),
    linear-gradient(28deg, transparent 0 58%, rgb(247 240 229 / .07) 58% 59%, transparent 59%),
    linear-gradient(90deg, transparent 0 22%, rgb(247 240 229 / .05) 22% 22.6%, transparent 22.6% 71%, rgb(247 240 229 / .05) 71% 71.6%, transparent 71.6%),
    radial-gradient(60% 80% at 50% 45%, rgb(52 78 122 / .5), transparent)}
.ch-pino{width:14px;height:14px;border-radius:50%;background:var(--carvalho-claro);box-shadow:0 0 0 7px rgb(242 200 148 / .2), 0 0 0 16px rgb(242 200 148 / .08)}
.ch-mapa-capa p{font-family:var(--serifa);font-size:clamp(20px, 1.7vw, 26px);line-height:1.2;color:var(--creme)}
.ch-mapa-capa small{font-family:var(--sem);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--creme-suave)}
.ch-mapa-botao{padding:11px 20px;border-radius:999px;border:1px solid rgb(247 240 229 / .4);color:var(--creme);font-weight:500;font-size:15px;transition:background .3s, border-color .3s}
.ch-mapa-botao:hover{background:rgb(247 240 229 / .1);border-color:var(--creme)}
.ch-mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (max-width:1100px){
  .ch-caminho{grid-template-columns:var(--jw) minmax(0,1fr) minmax(0,1fr)}
  .ch-p4{grid-column:2 / -1}
  .ch-nota{position:static;margin-top:18px;max-width:none}
}
@media (max-width:820px){
  .ch-secao{--num:24vw;--jw:40vw;--t:46px}
  .ch-titulo{font-size:clamp(38px, 11.6vw, 54px);flex-wrap:wrap;gap:0 14px;line-height:1}
  .ch-trilha{order:3;flex:0 0 100%;height:14px;margin-top:14px}
  .ch-caminho{display:block;margin-top:8px;position:relative}
  .ch-caminho::before{content:"";position:absolute;left:11px;top:44px;bottom:36px;width:1px;background:linear-gradient(var(--carvalho-fio), var(--carvalho-fio)) 0 0 / 1px 100% no-repeat;opacity:.4}
  .ch-caminho li{display:block;padding:16px 0 14px}
  .ch-fala{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:6px;padding-bottom:0;width:auto}
  .ch-p1 .ch-fala{width:auto;padding-bottom:0}
  .ch-fala b{grid-row:1 / span 4;font-size:34px;background:var(--parede);position:relative;justify-self:start;padding:2px 6px 6px 0;align-self:start}
  .ch-fala h3{margin:8px 0 2px;display:block;vertical-align:baseline}
  .ch-fala p,.ch-andares{grid-column:2}
  .ch-fala .wf-citacao{font-size:21px}
  .ch-p4 .ch-fala{text-align:left;padding-bottom:0}
  .ch-vao{display:none}
  .ch-nota{padding-bottom:calc(var(--jw) * 1.25 + 30px);margin-top:10px;font-size:13px}
  .ch-janela .wf-etiqueta{left:8px;top:8px;font-size:12px;padding:5px 9px 5px 8px}
  .ch-dados{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .ch-ficha dl>div{grid-template-columns:minmax(0,6.4em) minmax(0,1fr);gap:12px}
  .ch-acoes .wf-botao{width:100%;justify-content:center}
  .ch-mapa{min-height:260px}
}
@media (prefers-reduced-motion:reduce){
  .js .ch-titulo .ch-trilha{clip-path:none;animation:none}
  .js .ch-p3.visto .ch-andares span{animation:none}
}
/* a parede começa em creme puro, para emendar com a seção de cima */
.ch-parede .wf-malha{-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 clamp(140px, 16vw, 240px));mask-image:linear-gradient(180deg, transparent 0, #000 clamp(140px, 16vw, 240px))}


/* ===== fecho ===== */
/* fecho: a mesa vista da poltrona do paciente, e o rodapé como a frente da mesa */
.fe-bloco{position:relative}
.fe-parede{padding-bottom:0;overflow:hidden}
.fe-titulo{margin-top:clamp(16px, 1.8vw, 26px);font-size:clamp(44px, 6.4vw, 104px);line-height:.96}
.fe-titulo span,.fe-titulo em{display:block}
/* a mesa recortada: a borda de trás do tampo fica a 17,85% da altura da imagem; os objetos sobem para a parede */
.fe-cena{position:relative;line-height:0;margin:calc(clamp(52px, 5.4vw, 84px) - 9.67vw) calc(var(--margem) * -1) 0}
.fe-mesa{width:100%;height:auto;position:relative;z-index:1}
.js .fe-mesa[data-revela].visto{animation-duration:1.5s}
.fe-cena::before{content:"";position:absolute;left:0;right:0;top:37.9%;bottom:0;background:#0c0e13}
.fe-chamada{position:absolute;z-index:2;left:var(--margem);right:var(--margem);top:43%;height:27%;display:flex;align-items:center;justify-content:space-between;gap:clamp(24px, 4vw, 72px);line-height:1.4;color:var(--creme)}
.fe-chamada .wf-citacao{font-size:clamp(24px, 3.1vw, 48px);line-height:1.1;letter-spacing:-.012em}
.fe-chamada .wf-citacao span{display:block}
.fe-acoes{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex:none}
.fe-acoes .wf-botao{font-size:clamp(16px, 1.3vw, 19px);padding:clamp(15px, 1.4vw, 20px) clamp(25px, 2.2vw, 34px) clamp(15px, 1.4vw, 20px) clamp(21px, 1.9vw, 28px)}
.fe-fone{font-size:14px;letter-spacing:.04em;color:var(--creme-suave)}
.fe-rodape{background:linear-gradient(180deg, #090a0d 0, var(--marinho-fundo) 110px);color:var(--creme);padding:clamp(48px, 6vw, 88px) var(--margem) 28px}
.fe-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.fe-marca b{display:block;font-family:var(--serifa);font-weight:500;font-size:clamp(26px, 2.6vw, 38px);letter-spacing:.005em;line-height:1.1}
.fe-marca span{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--creme-suave);margin-top:8px}
.fe-assina{font-family:var(--serifa);font-size:clamp(22px, 2.4vw, 36px);line-height:1.1;letter-spacing:-.012em;color:rgb(247 240 229 / .5)}
.fe-assina em{color:var(--carvalho-claro)}
.fe-junto{white-space:nowrap}
.fe-colunas{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:clamp(22px, 3vw, 56px);margin-top:clamp(36px, 4.4vw, 64px);padding-top:28px;border-top:1px solid var(--fio-claro)}
.fe-colunas h3{font-family:var(--sem);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgb(247 240 229 / .6);margin-bottom:12px}
.fe-colunas p{font-size:15px;line-height:1.7;color:var(--creme-suave)}
.fe-colunas a{border-bottom:1px solid transparent;transition:border-color .3s, color .3s}
.fe-colunas a:hover{color:var(--creme);border-color:rgb(247 240 229 / .5)}
.fe-fim{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-top:clamp(40px, 5vw, 72px);padding-top:20px;border-top:1px solid var(--fio-claro);font-size:13px;color:rgb(247 240 229 / .6)}
.fe-selo a{color:var(--carvalho-claro);border-bottom:1px solid rgb(242 200 148 / .55);padding-bottom:1px;font-weight:500}
.fe-selo a:hover{border-color:var(--carvalho-claro)}

@media (max-width:820px){
  .fe-titulo{font-size:clamp(42px, 12.6vw, 60px)}
  .fe-cena{margin-top:30px}
  .fe-cena::before{top:auto;height:62%}
  .fe-mesa{height:84vw;object-fit:cover;object-position:57% 0}
  .fe-chamada{position:relative;left:auto;right:auto;top:auto;height:auto;flex-direction:column;align-items:stretch;gap:20px;padding:22px var(--margem) 8px;background:#0b0d11;line-height:1.4}
  .fe-chamada .wf-citacao{font-size:24px}
  .fe-chamada .wf-citacao span{display:inline}
  .fe-acoes{align-items:stretch}
  .fe-acoes .wf-botao{justify-content:center;padding:17px 22px;font-size:17px}
  .fe-fone{text-align:center}
  .fe-rodape{background:linear-gradient(180deg, #0b0d11 0, var(--marinho-fundo) 90px)}
  .fe-topo{flex-direction:column;align-items:flex-start;gap:18px}
  .fe-colunas{grid-template-columns:repeat(2, minmax(0,1fr));gap:28px 20px}
  .fe-colunas p{font-size:14.5px}
  .fe-fim{flex-direction:column;gap:10px}
}


/* ===== ajustes da montagem (carregado por último) ===== */
/* um granulado só, por cima da página inteira: cada seção tratava o seu de um jeito e as emendas apareciam */
.wf-grao,.hero .grao{display:none}
body::after{content:"";position:fixed;inset:0;z-index:55;pointer-events:none;opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>")}
@media (max-width:820px){ body::after{mix-blend-mode:normal;opacity:.04} }
/* foco visível na tecla do piano: a sombra da tecla escolhida cobria o anel de foco */
.fa-tecla:focus-visible .fa-corpo{outline:3px solid var(--marinho-2);outline-offset:-7px}
/* movimento reduzido: nada em laço, tudo direto no estado final (vale para todas as seções) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
}