/* LA CLINIC · base do site (derivada do hero E "De perto") */
:root{
  --wf-papel:#f3f1f2; --wf-parede:#dce2f1; --wf-parede-2:#cdd5e8; --wf-pele:#efc1b0; --wf-pele-clara:#f6e3da;
  --wf-tinta:#2c2b3b; --wf-tinta-2:#55546a; --wf-mel:#a8662f; --wf-mel-tinta:#7c4517; --wf-batom:#c96774; --wf-batom-tinta:#a8434f;
  --wf-barril:#22212d; --wf-barril-2:#3a3948; --wf-ouro:#c9a273; --wf-creme:#e9dcc8; --wf-noite:#1d1c28;
  --wf-serif:"Ibarra Real Nova",Georgia,serif; --wf-sans:"Funnel Sans",system-ui,sans-serif;
  --wf-margem:clamp(20px,4.6vw,72px); --wf-secao:clamp(84px,12vw,168px); --wf-larg:1280px;
  --wf-t-h2:clamp(2.2rem,5.2vw,4.6rem); --wf-t-h3:clamp(1.35rem,2vw,1.8rem); --wf-t-texto:clamp(1rem,1.2vw,1.14rem); --wf-t-mini:.875rem;
  --wf-raio:14px; --wf-curva:cubic-bezier(.2,.7,.2,1);
  --wf-sombra:0 40px 80px -44px rgba(44,43,59,.55);
  /* nomes do hero */
  --he-parede:var(--wf-parede); --he-parede-2:var(--wf-parede-2); --he-papel:var(--wf-papel); --he-pele:var(--wf-pele); --he-mel:var(--wf-mel); --he-mel-tinta:var(--wf-mel-tinta);
  --he-tinta:var(--wf-tinta); --he-tinta-2:var(--wf-tinta-2); --he-batom:var(--wf-batom); --he-serif:var(--wf-serif); --he-sans:var(--wf-sans); --he-margem:var(--wf-margem);
}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--wf-sans);font-size:var(--wf-t-texto);line-height:1.6;color:var(--wf-tinta);background:var(--wf-papel);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--wf-batom-tinta);outline-offset:3px;border-radius:4px}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* seção e paredes */
.wf-secao{position:relative;isolation:isolate;padding:var(--wf-secao) var(--wf-margem);overflow:clip}
.wf-dentro{max-width:var(--wf-larg);margin-inline:auto}
.wf-clara{background:var(--wf-papel)}
.wf-nevoa{background:
  radial-gradient(50% 60% at 12% 10% in oklab,var(--wf-parede) 0%,transparent 72%),
  radial-gradient(46% 55% at 92% 92% in oklab,color-mix(in oklab,var(--wf-pele) 40%,var(--wf-papel)) 0%,transparent 70%),
  radial-gradient(40% 40% at 70% 20% in oklab,#fff 0%,transparent 70%),var(--wf-papel)}
.wf-pele{background:
  radial-gradient(55% 60% at 85% 12% in oklab,color-mix(in oklab,var(--wf-pele) 55%,var(--wf-papel)) 0%,transparent 72%),
  radial-gradient(50% 55% at 8% 90% in oklab,var(--wf-parede) 0%,transparent 70%),var(--wf-pele-clara)}
.wf-noite{color:var(--wf-creme);background:
  radial-gradient(50% 60% at 82% 16% in oklab,#3d3b52 0%,transparent 72%),
  radial-gradient(46% 55% at 8% 92% in oklab,#3a2c2e 0%,transparent 70%),var(--wf-noite);
  --wf-tinta:#f3ece0; --wf-tinta-2:#c3bdc9; --wf-mel-tinta:#e3b98a; --wf-batom-tinta:#f09aa3}

/* tipografia */
.wf-olho{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wf-mel-tinta);display:flex;align-items:center;gap:12px;font-weight:500}
.wf-olho::before{content:"";width:34px;height:1px;background:currentColor;flex:none}
.wf-h2{font-family:var(--wf-serif);font-weight:400;font-size:var(--wf-t-h2);line-height:1;letter-spacing:-.015em;color:var(--wf-tinta);text-wrap:balance;margin:.3em 0 .4em}
.wf-h2 em,.wf-h3 em{font-style:italic;color:var(--wf-mel-tinta)}
.wf-h3{font-family:var(--wf-serif);font-weight:500;font-size:var(--wf-t-h3);line-height:1.15;color:var(--wf-tinta)}
.wf-texto{color:var(--wf-tinta-2);max-width:34em}
.wf-texto strong{color:var(--wf-tinta);font-weight:600}
.wf-mini{font-size:var(--wf-t-mini);color:var(--wf-tinta-2)}
.wf-fala{font-family:var(--wf-serif);font-style:italic;font-size:clamp(1.3rem,2.2vw,2rem);line-height:1.25;color:var(--wf-tinta)}
.wf-autor{font-size:var(--wf-t-mini);color:var(--wf-mel-tinta);letter-spacing:.04em}

/* botões */
.wf-bt{display:inline-flex;align-items:center;gap:10px;min-height:52px;background:var(--wf-barril);color:#fff;text-decoration:none;font-weight:500;padding:14px 26px;border-radius:999px;box-shadow:0 14px 30px -14px rgba(44,43,59,.7);transition:transform .25s var(--wf-curva)}
.wf-noite .wf-bt{background:var(--wf-creme);color:var(--wf-barril)}
.wf-bt:hover{transform:translateY(-2px)}
.wf-bt svg{width:19px;height:19px;fill:currentColor;flex:none}
.wf-link{display:inline-flex;align-items:center;min-height:48px;color:var(--wf-mel-tinta);text-underline-offset:5px;font-size:.98rem}

/* a lente: barril escuro, vidro, aro com inscrição (o motivo do site) */
.wf-lente{position:relative;aspect-ratio:1;width:var(--wf-lente,min(100%,520px))}
.wf-lente-barril{position:absolute;inset:6.2%;border-radius:50%;background:conic-gradient(from 210deg in oklab,#3a3948,#1d1c28 22%,#4a4959 45%,#22212d 70%,#3a3948);box-shadow:var(--wf-sombra),0 0 0 1px rgba(255,255,255,.35),inset 0 0 0 1.5px var(--wf-ouro)}
.wf-lente-vidro{position:absolute;inset:9.4%;border-radius:50%;overflow:hidden;background:var(--wf-parede);box-shadow:0 0 0 1.5px var(--wf-ouro)}
.wf-lente-vidro>img{width:100%;height:100%;object-fit:cover;max-width:none}
.wf-lente-vidro::before{content:"";position:absolute;inset:0;z-index:2;border-radius:50%;background:radial-gradient(60% 40% at 30% 8% in oklab,rgba(255,255,255,.3),transparent 70%);pointer-events:none}
.wf-lente-vidro::after{content:"";position:absolute;inset:0;z-index:2;border-radius:50%;background:radial-gradient(circle at 50% 50% in oklab,transparent 58%,rgba(44,43,59,.2) 100%);pointer-events:none}
.wf-lente-anel{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.wf-lente-anel line{stroke:var(--wf-tinta)}
/* aro sem foto: só o anel fino, para envolver número ou texto */
.wf-aro{border-radius:50%;box-shadow:0 0 0 1px color-mix(in oklab,var(--wf-tinta) 30%,transparent),0 0 0 9px color-mix(in oklab,var(--wf-tinta) 5%,transparent),0 0 0 10px var(--wf-ouro)}
/* círculos de desfoque */
.wf-bokeh{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.wf-bokeh i{position:absolute;border-radius:50%;--c:#fff;background:radial-gradient(circle in oklab,color-mix(in oklab,var(--c) 55%,transparent) 0 62%,color-mix(in oklab,var(--c) 80%,transparent) 66%,transparent 70%);filter:blur(var(--b,6px));opacity:.45;animation:wf-deriva var(--t,28s) ease-in-out infinite alternate}
.wf-noite .wf-bokeh i{opacity:.14}
@keyframes wf-deriva{to{transform:translate3d(2.2vw,-1.6vw,0) scale(1.08)}}
/* etiqueta de vidro */
.wf-ficha{background:rgba(255,255,255,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:12px 18px 12px 16px;border-radius:var(--wf-raio);border-left:2px solid var(--wf-batom);box-shadow:0 18px 40px -22px rgba(44,43,59,.5);display:grid;gap:2px;font-size:var(--wf-t-mini);color:#55546a}
.wf-ficha b{font-family:var(--wf-serif);font-weight:500;font-size:1.18rem;color:#2c2b3b}
/* índice (a setinha batom que marca o ponto de foco) */
.wf-indice{width:0;height:0;border:7px solid transparent;border-top:11px solid var(--wf-batom);display:inline-block}

/* o gesto do site: entrar em foco */
.js [data-foco]{opacity:0;filter:blur(14px);transform:scale(1.03);transition:opacity 1.1s var(--wf-curva),filter 1.4s var(--wf-curva),transform 1.4s var(--wf-curva);transition-delay:calc(var(--i,0)*.12s)}
.js [data-foco].wf-visto{opacity:1;filter:none;transform:none}
.js [data-sobe]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--wf-curva),transform .9s var(--wf-curva);transition-delay:calc(var(--i,0)*.12s)}
.js [data-sobe].wf-visto{opacity:1;transform:none}

/* botão que acompanha a rolagem */
.wf-flutua{position:fixed;right:18px;bottom:18px;z-index:80;display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 22px 0 18px;border-radius:999px;background:var(--wf-barril);color:#fff;text-decoration:none;font-weight:500;font-size:.95rem;box-shadow:0 16px 34px -14px rgba(29,28,40,.8),0 0 0 1.5px var(--wf-ouro);opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .4s,transform .4s var(--wf-curva)}
.wf-flutua svg{width:22px;height:22px;fill:currentColor}
.wf-flutua.wf-on{opacity:1;transform:none;pointer-events:auto}
@media (max-width:860px){.wf-flutua{width:54px;padding:0;justify-content:center}.wf-flutua span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .wf-olho::before{width:18px}}


.he-hero{position:relative;min-height:100svh;display:grid;grid-template-rows:auto 1fr;isolation:isolate;overflow:hidden}
.he-malha{position:absolute;inset:-12%;z-index:-2;
  background:
   radial-gradient(42% 46% at 72% 46% in oklab,#ffffff 0%,transparent 70%),
   radial-gradient(50% 55% at 14% 18% in oklab,var(--he-parede) 0%,transparent 72%),
   radial-gradient(46% 50% at 92% 88% in oklab,color-mix(in oklab,var(--he-pele) 46%,var(--he-papel)) 0%,transparent 70%),
   radial-gradient(54% 60% at 30% 96% in oklab,var(--he-parede-2) 0%,transparent 72%),
   var(--he-papel);
  animation:he-respira 32s ease-in-out infinite alternate}
@keyframes he-respira{to{transform:translate3d(2.5%,-2%,0) scale(1.05)}}
.he-bokeh{position:absolute;inset:0;z-index:-1;pointer-events:none}
.he-bokeh i{position:absolute;border-radius:50%;background:radial-gradient(circle in oklab,color-mix(in oklab,var(--c) 55%,transparent) 0 62%,color-mix(in oklab,var(--c) 80%,transparent) 66%,transparent 70%);filter:blur(var(--b,6px));opacity:.5;animation:he-deriva var(--t,28s) ease-in-out infinite alternate}
.he-bokeh i:nth-child(1){--c:#fff;width:22vw;height:22vw;left:4%;top:58%;--b:10px}
.he-bokeh i:nth-child(2){--c:var(--he-pele);width:13vw;height:13vw;left:31%;top:70%;--t:34s;opacity:.38}
.he-bokeh i:nth-child(3){--c:#fff;width:9vw;height:9vw;left:38%;top:9%;--t:22s}
.he-bokeh i:nth-child(4){--c:#e7c9a4;width:7vw;height:7vw;left:22%;top:84%;--b:4px;opacity:.4;--t:25s}
.he-bokeh i:nth-child(5){--c:var(--he-parede-2);width:17vw;height:17vw;left:-5%;top:12%;--b:12px;--t:38s}
@keyframes he-deriva{to{transform:translate3d(2.2vw,-1.6vw,0) scale(1.08)}}
.he-nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px var(--he-margem) 0}
.he-marca{font-family:var(--he-serif);font-size:1.25rem;letter-spacing:.22em;text-decoration:none;font-weight:500}
.he-links{display:flex;gap:30px;font-size:.93rem}
.he-links a{text-decoration:none;color:var(--he-tinta-2)}
.he-links a:hover{color:var(--he-tinta)}
.he-nav-bt{font-size:.92rem;text-decoration:none;padding:10px 18px;border:1px solid color-mix(in oklab,var(--he-tinta) 55%,transparent);border-radius:999px}
.he-corpo{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,46vw) 1fr;align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(20px,4vh,48px) var(--he-margem) clamp(28px,5vh,56px)}
.he-olho{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--he-mel-tinta);display:flex;align-items:center;gap:12px}
.he-olho::before{content:"";width:34px;height:1px;background:currentColor}
.he-titulo{font-family:var(--he-serif);font-weight:400;font-size:clamp(2.7rem,7.3vw,7.4rem);line-height:.94;letter-spacing:-.018em;margin:.32em 0 .36em;text-wrap:balance}
.he-titulo em{font-style:italic;color:var(--he-mel-tinta);display:inline-block;animation:he-foco-t 2.8s cubic-bezier(.2,.7,.2,1) .35s both}
@keyframes he-foco-t{0%{filter:blur(14px);opacity:.5}60%{filter:blur(2px)}100%{filter:blur(0);opacity:1}}
.he-apoio{font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.6;color:var(--he-tinta-2);max-width:33em}
.he-apoio strong{color:var(--he-tinta);font-weight:600}
.he-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:30px}
.he-bt{display:inline-flex;align-items:center;gap:10px;background:var(--he-tinta);color:#fff;text-decoration:none;font-weight:500;padding:16px 26px;border-radius:999px;box-shadow:0 14px 30px -14px rgba(44,43,59,.7);transition:transform .25s}
.he-bt:hover{transform:translateY(-2px)}
.he-bt svg{width:19px;height:19px;fill:currentColor}
.he-sec{font-size:.95rem;color:var(--he-mel-tinta);text-underline-offset:5px}
.he-prova{margin-top:34px;padding-top:20px;border-top:1px solid color-mix(in oklab,var(--he-tinta) 18%,transparent);display:grid;gap:6px;font-size:.86rem;color:var(--he-tinta-2);max-width:40em}
.he-prova b{color:var(--he-tinta);font-weight:600}
.he-campo{position:absolute;right:calc(-1*min(9vw,130px));bottom:calc(-1*min(12svh,110px));width:min(62vw,104svh,880px);aspect-ratio:1;z-index:0}
.he-barril{position:absolute;inset:6.2%;border-radius:50%;background:conic-gradient(from 210deg in oklab,#3a3948,#1d1c28 22%,#4a4959 45%,#22212d 70%,#3a3948);box-shadow:0 50px 90px -40px rgba(44,43,59,.6),0 0 0 1px rgba(255,255,255,.35),inset 0 0 0 1.5px #c9a273}
.he-lente{position:absolute;inset:9.4%;border-radius:50%;overflow:hidden;background:var(--he-parede);box-shadow:0 0 0 1.5px #c9a273;animation:he-pulso 26s ease-in-out 4s infinite alternate}
@keyframes he-pulso{to{transform:scale(1.012)}}
.he-lente::before{content:"";position:absolute;inset:0;z-index:2;border-radius:50%;background:radial-gradient(60% 40% at 30% 8% in oklab,rgba(255,255,255,.34),transparent 70%);pointer-events:none}
.he-lente img{width:100%;height:100%;object-fit:cover;object-position:0% 0%;transform:scale(1.0);transform-origin:38% 44%;animation:he-foco 2.8s cubic-bezier(.2,.7,.2,1) .35s both}
@keyframes he-foco{0%{filter:blur(26px) saturate(.7);transform:scale(1.14)}60%{filter:blur(3px)}100%{filter:blur(0);transform:scale(1)}}
.he-lente::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50% in oklab,transparent 58%,rgba(44,43,59,.22) 100%)}
.he-anel{position:absolute;inset:0;width:100%;height:100%;animation:he-gira 2.8s cubic-bezier(.2,.7,.2,1) .35s both}
@keyframes he-gira{from{transform:rotate(-64deg);opacity:0}30%{opacity:1}to{transform:rotate(0)}}
.he-anel circle{fill:none;stroke:var(--he-tinta)}
.he-anel{z-index:3}
.he-indice{position:absolute;z-index:4;left:calc(50% - 25.6%);top:calc(50% - 47.4%);width:0;height:0;border:7px solid transparent;border-top:11px solid var(--he-batom);transform:rotate(-30deg)}
.he-ficha{position:absolute;left:-3%;bottom:27%;z-index:4;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:12px 18px 12px 16px;border-radius:14px;border-left:2px solid var(--he-batom);box-shadow:0 18px 40px -22px rgba(44,43,59,.5);display:grid;gap:2px;font-size:.8rem;color:var(--he-tinta-2)}
.he-ficha b{font-family:var(--he-serif);font-weight:500;font-size:1.18rem;color:var(--he-tinta)}
.he-rot{position:absolute;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--he-tinta-2);white-space:nowrap}
.he-rot-1{left:50%;top:-2px;transform:translateX(-50%)}
.he-rot-2{left:50%;bottom:-4px;transform:translateX(-50%)}
.he-entra{opacity:0;transform:translateY(16px);animation:he-sobe .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.25s + var(--i,0)*.14s)}
@keyframes he-sobe{to{opacity:1;transform:none}}
@media (max-width:860px){
  .he-links{display:none}
  .he-nav{padding-top:18px}
  .he-corpo{grid-template-columns:1fr;gap:10px;padding-top:10px}
  .he-corpo{padding-top:calc(min(84vw,340px) + 34px)}
  .he-campo{top:58px;bottom:auto;right:-13vw;width:min(84vw,340px)}
  .he-ficha{left:-22%;bottom:6%;padding:8px 12px;font-size:.68rem}.he-ficha b{font-size:.98rem}
  .he-olho::before{width:18px}
  .he-bokeh i{opacity:.3}
  .he-titulo{font-size:clamp(2.2rem,10vw,3rem);margin:.2em 0 .28em}
  .he-titulo br:first-of-type{display:none}
  .he-olho{display:none}
  .he-titulo{margin-top:.5em}
  .he-acoes{margin-top:18px;order:2}
  .he-texto{display:flex;flex-direction:column}
  .he-apoio{order:3;margin-top:22px}.he-prova{order:4}
  .he-rot{font-size:.6rem}
}
@media (prefers-reduced-motion:reduce){.he-entra{opacity:1;transform:none}}

/* === vo === */
/* vo · avaliações · profundidade de campo */
.vo-secao{padding-top:clamp(72px,9vw,132px)}
/* emenda com o pé do hero (malha azulada à esquerda, pêssego à direita) */
.vo-secao::before{content:"";position:absolute;inset:0 0 auto 0;height:min(70%,560px);z-index:-2;pointer-events:none;
  background:
    radial-gradient(70% 100% at 22% 0% in oklab,var(--wf-parede-2) 0%,transparent 72%),
    radial-gradient(52% 90% at 96% 0% in oklab,color-mix(in oklab,var(--wf-pele) 46%,var(--wf-papel)) 0%,transparent 70%);
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.vo-bokeh i:nth-child(1){--c:#fff;width:26vw;height:26vw;right:-4%;top:6%;--b:12px;--t:34s}
.vo-bokeh i:nth-child(2){--c:var(--wf-pele);width:11vw;height:11vw;right:22%;bottom:8%;--b:6px;opacity:.3;--t:26s}
.vo-bokeh i:nth-child(3){--c:var(--wf-parede-2);width:15vw;height:15vw;left:36%;top:30%;--b:10px;opacity:.4;--t:30s}
.vo-bokeh i:nth-child(4){--c:#e7c9a4;width:6vw;height:6vw;left:6%;bottom:12%;--b:4px;opacity:.32;--t:23s}

.vo-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"cabeca palco" "painel palco";column-gap:clamp(32px,6vw,96px);row-gap:clamp(28px,4vw,52px);align-items:start}
.vo-cabeca{grid-area:cabeca}
.vo-palco{grid-area:palco;align-self:center;min-width:0}
.vo-painel{grid-area:painel;display:grid;justify-items:center;gap:16px;width:min(100%,440px)}
.vo-dica{display:none}
.vo-on .vo-dica{display:inline}

/* falas: sem JS ou com movimento reduzido, lista legível */
.vo-falas{list-style:none;padding:0;display:grid;gap:clamp(26px,3vw,40px)}
.vo-fala{display:grid;gap:12px;align-content:center}
.vo-fala blockquote{font-size:clamp(1.3rem,1.9vw,1.7rem);max-width:24em;text-wrap:pretty}
.vo-fala .wf-autor b{font-weight:600;color:var(--wf-tinta)}
.vo-fala .wf-autor{display:flex;align-items:center;gap:.5em}
.vo-fala .wf-autor::before{content:"";width:22px;height:1px;background:var(--wf-batom);flex:none}

/* com JS: planos de foco */
.vo-on .vo-falas{min-height:clamp(420px,37vw,540px);gap:0}
.vo-on .vo-fala{align-content:end}
.vo-on .vo-fala blockquote{text-indent:-.42em}
.vo-on .vo-fala{grid-area:1/1;transform-origin:0 100%;transition:transform 1.5s var(--wf-curva),filter 1.5s var(--wf-curva),opacity 1.2s var(--wf-curva);will-change:transform,filter,opacity;user-select:none;-webkit-user-select:none}
.vo-on .vo-fala blockquote{font-size:clamp(1.55rem,3.1vw,3rem);line-height:1.12;max-width:15em}
.vo-on .vo-fala .wf-autor{margin-top:6px;width:fit-content}
.vo-on .vo-curta blockquote{font-size:clamp(2rem,5vw,4.8rem);line-height:1.02;max-width:8.6em;letter-spacing:-.014em}
.vo-on .vo-longa blockquote{font-size:clamp(1.4rem,2.5vw,2.4rem);line-height:1.16;max-width:18.5em}
.vo-on .vo-fala[data-p="0"]{transform:none;filter:none;opacity:1;z-index:2;user-select:text;-webkit-user-select:text}
.vo-on .vo-fala[data-p="1"]{transform:translate(52%,-62%) scale(.44);filter:blur(2.4px);opacity:.58;cursor:pointer}
.vo-on .vo-fala[data-p="2"]{transform:translate(3%,-70%) scale(.28);filter:blur(4.5px);opacity:.36;cursor:pointer}
.vo-on .vo-fala[data-p="3"]{transform:translate(70%,-90%) scale(.18);filter:blur(9px);opacity:0;pointer-events:none}
.vo-on .vo-fala[data-p="-1"]{transform:translate(36%,74%) scale(1.5);filter:blur(9px);opacity:.17;pointer-events:none}
.vo-on .vo-fala[data-p="-2"]{transform:translate(40%,160%) scale(2);filter:blur(22px);opacity:0;pointer-events:none}
.vo-on .vo-fala:not([data-p="0"]) .wf-autor{opacity:.7}
@media (hover:hover){
  .vo-on .vo-fala[data-p="1"]:hover{filter:blur(.9px);opacity:.82}
  .vo-on .vo-fala[data-p="2"]:hover{filter:blur(1.8px);opacity:.7}
}

/* o anel de foco: uma objetiva pequena, com os nomes gravados no barril e a nota no vidro */
.vo-disco{position:relative;width:100%;aspect-ratio:1;container-type:inline-size}
.vo-barril{position:absolute;inset:4.6%;border-radius:50%;background:conic-gradient(from 210deg in oklab,#34333f,#1d1c28 22%,#403f4e 45%,#22212d 70%,#34333f);box-shadow:var(--wf-sombra),0 0 0 1px rgba(255,255,255,.4),inset 0 0 0 1.5px var(--wf-ouro)}
.vo-gira{position:absolute;inset:0;border-radius:50%;transition:transform 1.5s var(--wf-curva)}
.vo-nota::after{content:"";position:absolute;inset:7%;border-radius:50%;border:1px solid color-mix(in oklab,var(--wf-tinta) 14%,transparent);pointer-events:none}
.vo-escala{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vo-escala line{stroke:var(--wf-tinta)}
.vo-escala text{font-family:var(--wf-sans);font-size:16.5px;letter-spacing:2.4px;fill:var(--wf-creme);font-weight:500;transition:fill .8s,opacity .8s;opacity:.7}
.vo-escala .vo-ativo text{fill:#fff;opacity:1;font-weight:600}
.vo-marca{position:absolute;left:50%;top:50%;width:30cqw;height:48px;margin:-24px 0 0 -15cqw;border:0;background:none;border-radius:999px;cursor:pointer;transform:rotate(var(--a)) translateY(-39.6cqw);-webkit-tap-highlight-color:transparent}
.vo-marca:focus-visible{outline-color:#fff;outline-offset:-4px}
.vo-indice{position:absolute;left:50%;top:-3.4%;margin-left:-7px;z-index:2;filter:drop-shadow(0 3px 4px rgba(201,103,116,.35))}
.vo-nota{position:absolute;inset:16.4%;border-radius:50%;display:grid;place-content:center;justify-items:center;text-align:center;gap:4px;
  background:radial-gradient(circle at 32% 16% in oklab,#fff 0%,color-mix(in oklab,var(--wf-papel) 80%,var(--wf-parede)) 62%,color-mix(in oklab,var(--wf-papel) 60%,var(--wf-parede-2)) 100%);
  box-shadow:0 0 0 1.5px var(--wf-ouro),inset 0 0 0 7px rgba(255,255,255,.5),inset 0 -18px 40px -22px rgba(44,43,59,.35)}
.vo-num{font-family:var(--wf-serif);font-size:clamp(4rem,30cqw,8rem);line-height:.86;color:var(--wf-tinta);letter-spacing:-.03em}
.vo-conta-nota{line-height:1.3;color:var(--wf-tinta-2);letter-spacing:.02em}

/* a mira: quatro cantos que abraçam a fala em foco */
.vo-palco{position:relative}
.vo-mira{display:none}
.vo-on .vo-mira{display:block;position:absolute;left:0;top:0;width:var(--mw,60%);height:var(--mh,40%);transform:translate(var(--mx,0),var(--my,0));pointer-events:none;z-index:3;transition:transform 1.3s var(--wf-curva),width 1.3s var(--wf-curva),height 1.3s var(--wf-curva),opacity .6s;opacity:0}
.vo-on .vo-mira.vo-pronta{opacity:1}
.vo-mira i{position:absolute;width:18px;height:18px;border:0 solid color-mix(in oklab,var(--wf-tinta) 62%,transparent)}
.vo-mira i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}
.vo-mira i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.vo-mira i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}
.vo-mira i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}

.vo-ctrl{display:none;align-items:center;gap:14px;position:relative;z-index:4;margin-top:clamp(40px,4.4vw,62px)}
.vo-on .vo-ctrl{display:flex}
.vo-seta{flex:none;width:52px;height:52px;border-radius:50%;border:1px solid color-mix(in oklab,var(--wf-tinta) 40%,transparent);background:rgba(255,255,255,.55);color:var(--wf-tinta);display:grid;place-items:center;cursor:pointer;transition:background .3s,color .3s,transform .3s var(--wf-curva)}
.vo-seta:hover{background:var(--wf-barril);color:#fff;transform:translateY(-2px)}
.vo-seta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vo-conta{min-width:4.4em;text-align:center;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.vo-conta b{font-weight:600;color:var(--wf-tinta);font-size:1.02rem}
.vo-estado{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:860px){
  .vo-grade{grid-template-columns:minmax(0,1fr);grid-template-areas:"cabeca" "palco" "painel"}
  .vo-painel{justify-self:center;width:min(calc(100% + 20px),380px);margin-inline:-10px}
  .vo-on .vo-falas{min-height:0;padding:78px 0 0}
  .vo-ctrl{margin-top:36px;justify-content:space-between}
  .vo-painel{margin-top:26px}
  .vo-on .vo-fala blockquote{font-size:1.5rem;max-width:none;text-indent:0}
  .vo-on .vo-curta blockquote{font-size:clamp(2.1rem,10.4vw,2.7rem);max-width:8.6em}
  .vo-on .vo-longa blockquote{font-size:1.36rem}
  .vo-on .vo-fala[data-p="1"],.vo-on .vo-fala[data-p="2"]{align-self:start}
  .vo-on .vo-fala[data-p="1"]{transform:translate(30%,-70px) scale(.5);transform-origin:0 0}
  .vo-on .vo-fala[data-p="2"]{transform:translate(0,-66px) scale(.3);transform-origin:0 0;opacity:.26}
  .vo-on .vo-fala[data-p="-1"]{transform:translate(18%,84%) scale(1.3);opacity:.12}
  .vo-on .vo-falas{touch-action:pan-y}
}
html:not(.js) .vo-indice{display:none}

/* === or === */
/* or · a história: duas objetivas */
.or-secao .wf-bokeh i:nth-child(1){--c:#fff;width:24vw;height:24vw;right:-6%;top:6%;--b:12px;--t:34s}
.or-secao .wf-bokeh i:nth-child(2){--c:var(--wf-pele);width:12vw;height:12vw;right:22%;top:64%;--b:6px;--t:26s;opacity:.35}
.or-secao .wf-bokeh i:nth-child(3){--c:#fff;width:9vw;height:9vw;left:44%;top:4%;--t:22s}
.or-secao .wf-bokeh i:nth-child(4){--c:var(--wf-parede-2);width:16vw;height:16vw;left:-5%;top:70%;--b:12px;--t:38s}

.or-grade{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"esq cabeca" "esq corpo" "dados dados";column-gap:clamp(36px,6vw,96px);align-items:start}
.or-cabeca{grid-area:cabeca;align-self:end}
.or-corpo{grid-area:corpo}
.or-esq{grid-area:esq;align-self:center;min-width:0}
.or-h2{margin-bottom:.5em}
.or-h2 em{display:block}

/* o palco das duas objetivas */
.or-palco{position:relative;padding-bottom:22%;padding-left:9%}
.or-retrato{--wf-lente:100%;margin:0;z-index:1}
.or-trabalho{--wf-lente:52%;margin:0;position:absolute;left:-3%;bottom:0;z-index:2}
/* barris mais largos que o do hero: a inscrição se lê */
.or-retrato .wf-lente-barril{inset:4.6%}
.or-retrato .wf-lente-vidro{inset:10.4%}
.or-trabalho .wf-lente-barril{inset:4.6%;box-shadow:0 30px 60px -30px rgba(44,43,59,.7),0 0 0 1px rgba(255,255,255,.35),inset 0 0 0 1.5px var(--wf-ouro)}
.or-trabalho .wf-lente-vidro{inset:13.6%;background:#e6e2df}
/* foto em pé dentro do círculo: o quadro inteiro (rosto e mãos) ao centro; nas sobras laterais, o próprio quadro espelhado e fora de foco */
.or-trabalho .wf-lente-vidro>img,.or-espelho{position:absolute;left:10%;top:-19.4%;width:77.8%;height:163.9%}
.or-trabalho .wf-lente-vidro>img{object-fit:fill;z-index:1;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%);mask-image:linear-gradient(90deg,transparent 0,#000 5%)}
.or-espelho{background:url("../img/luana-perfil.webp") 0 0/100% 100% no-repeat;filter:blur(3px)}
/* o brilho da base acinzenta o cabelo escuro do alto: aqui vai mais leve */
.or-trabalho .wf-lente-vidro::before{opacity:.3}
.or-espelho-e{transform-origin:0 50%;transform:scaleX(-1)}
.or-espelho-d{transform-origin:100% 50%;transform:scaleX(-1)}
.or-indice{position:absolute;left:50%;top:-1.2%;margin-left:-7px;z-index:4}

/* legendas das objetivas */
.or-legenda{position:absolute;z-index:4;font-size:var(--wf-t-mini);line-height:1.35;color:var(--wf-tinta-2)}
.or-legenda-retrato{right:-2%;bottom:5%;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:12px 18px 12px 16px;border-radius:var(--wf-raio);border-left:2px solid var(--wf-batom);box-shadow:0 18px 40px -22px rgba(44,43,59,.5);display:grid;gap:2px;max-width:15.5em}
.or-legenda-retrato b{font-family:var(--wf-serif);font-weight:500;font-size:1.18rem;color:var(--wf-tinta)}
.or-legenda-trabalho{left:50%;top:99%;transform:translateX(-50%);white-space:nowrap;letter-spacing:.04em;color:var(--wf-tinta)}
/* o eixo óptico que liga as duas */
.or-eixo{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none}
.or-eixo line{stroke:var(--wf-mel);stroke-width:1;stroke-dasharray:1 6;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.9}
.or-eixo-p{display:none}
/* a fala de apoio, pendurada ao lado da objetiva de trabalho */
.or-apoio{margin:-15% 0 0 53%;position:relative;z-index:3}
.or-apoio .wf-fala{font-size:clamp(1.35rem,2vw,1.85rem)}
.or-apoio .wf-autor{margin-top:8px}

/* o gesto: os anéis giram enquanto a imagem entra em foco */
.js .or-secao [data-foco] .wf-lente-anel{transform:rotate(-52deg);transition:transform 2s var(--wf-curva);transition-delay:calc(var(--i,0)*.12s)}
.js .or-secao .or-trabalho[data-foco] .wf-lente-anel{transform:rotate(64deg)}
.js .or-secao [data-foco].wf-visto .wf-lente-anel{transform:none}

/* o texto */
.or-corpo{display:grid;gap:clamp(22px,2.4vw,32px);justify-items:start}
.or-duas{list-style:none;padding:0;display:grid;gap:18px;border-top:1px solid color-mix(in oklab,var(--wf-tinta) 16%,transparent);padding-top:clamp(20px,2.2vw,28px);width:100%}
.or-duas li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.or-duas .wf-mini{margin-top:6px;max-width:30em;font-size:.95rem;color:var(--wf-tinta-2)}
.or-olhal{width:30px;height:30px;margin-top:2px;border-radius:50%;background:radial-gradient(circle in oklab,#fff 0 22%,var(--wf-parede) 24% 46%,var(--wf-barril) 48% 62%,transparent 64%);box-shadow:0 0 0 1px var(--wf-ouro);margin-left:7px;margin-right:7px}
.or-olhal-g{width:44px;height:44px;margin-left:0;margin-right:0}
.or-fala{margin:0;padding-left:22px;border-left:2px solid var(--wf-batom);max-width:33em}
.or-fala .wf-fala{font-size:clamp(1.25rem,1.75vw,1.6rem)}
.or-fala .wf-autor{margin-top:10px}
.or-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}

.or-grifo{background:linear-gradient(transparent 88%,color-mix(in oklab,var(--wf-batom) 60%,transparent) 88% 94%,transparent 94%)}
.or-h2 em[data-foco]{transform-origin:0 60%}
/* serrilhado na borda do barril da objetiva de trabalho */
.or-trabalho::before{content:"";position:absolute;inset:2.9%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#15141d 0 1.1deg,#5a596b 1.1deg 2.2deg);-webkit-mask-image:radial-gradient(closest-side,transparent 96.2%,#000 96.6%);mask-image:radial-gradient(closest-side,transparent 96.2%,#000 96.6%);box-shadow:0 0 0 1px rgba(255,255,255,.3)}

/* ficha da objetiva: os dados gravados, em linha */
.or-dados{grid-area:dados;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(48px,6vw,88px);border-top:1px solid color-mix(in oklab,var(--wf-tinta) 22%,transparent);position:relative}
.or-dados::before{content:"";position:absolute;left:0;top:-6px;border:6px solid transparent;border-top:9px solid var(--wf-batom);border-bottom:0}
.or-dados>div{padding:22px 24px 4px 0}
.or-dados>div+div{padding-left:24px;border-left:1px solid color-mix(in oklab,var(--wf-tinta) 14%,transparent)}
.or-dados dt{font-size:.875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wf-mel-tinta);font-weight:500}
.or-dados dd{font-family:var(--wf-serif);font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.15;color:var(--wf-tinta);margin-top:8px}
.or-dados dd span{display:block;font-family:var(--wf-sans);font-size:.875rem;line-height:1.45;color:var(--wf-tinta-2);margin-top:6px}

@media (max-width:980px){
  .or-grade{grid-template-columns:1fr;grid-template-areas:"cabeca" "esq" "corpo" "dados";row-gap:26px}
  .or-esq{max-width:520px;width:100%;justify-self:center}
  .or-palco{padding-left:6%;padding-bottom:30%}
  .or-trabalho{--wf-lente:50%;left:-4%}
  .or-eixo-g{display:none}.or-eixo-p{display:block}
  .or-legenda-retrato{right:-1%;bottom:-5%;padding:9px 13px 9px 12px;max-width:13em}
  .or-legenda-retrato b{font-size:1.05rem}
  .or-legenda-trabalho{left:104%;top:auto;bottom:14%;transform:none;white-space:normal;width:9em}
  .or-apoio{margin:44px 0 6px;padding-left:22px;border-left:2px solid var(--wf-ouro)}
  .or-dados{grid-template-columns:1fr 1fr;margin-top:44px}
  .or-dados>div{padding:18px 14px 18px 0}
  .or-dados>div+div{padding-left:0;border-left:0}
  .or-dados>div:nth-child(even){padding-left:16px;border-left:1px solid color-mix(in oklab,var(--wf-tinta) 14%,transparent)}
  .or-dados>div:nth-child(n+3){border-top:1px solid color-mix(in oklab,var(--wf-tinta) 14%,transparent)}
}

/* === tr === */
/* tr · tratamentos: o anel da objetiva como seletor de três posições */
.tr-secao .wf-bokeh i:nth-child(1){--c:#fff;width:20vw;height:20vw;left:38%;top:8%;--b:12px;--t:32s}
.tr-secao .wf-bokeh i:nth-child(2){--c:var(--wf-pele);width:11vw;height:11vw;right:6%;top:58%;--b:6px;--t:26s;opacity:.32}
.tr-secao .wf-bokeh i:nth-child(3){--c:var(--wf-parede-2);width:15vw;height:15vw;left:-4%;top:74%;--b:12px;--t:38s}

.tr-grade{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-areas:"cabeca cabeca" "seletor paineis" "pe pe";column-gap:clamp(36px,6vw,96px);row-gap:clamp(40px,5vw,72px);align-items:start}
.tr-cabeca{grid-area:cabeca;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:end}
.tr-h2{margin-bottom:0}
.tr-apoio{padding-bottom:.5em}

/* o seletor */
.tr-seletor{grid-area:seletor;display:grid;justify-items:center;gap:18px}
html:not(.js) .tr-seletor{display:none}
.tr-dial{position:relative;width:min(100%,520px);aspect-ratio:1}
.tr-barril{position:absolute;inset:2.5%;border-radius:50%;background:conic-gradient(from 210deg in oklab,#3a3948,#1d1c28 22%,#4a4959 45%,#22212d 70%,#3a3948);box-shadow:var(--wf-sombra),0 0 0 1px rgba(255,255,255,.4),inset 0 0 0 1.5px var(--wf-ouro)}
.tr-gira{position:absolute;inset:0;transform:rotate(calc(var(--tr-sel,0)*-45deg));will-change:transform;transition:transform 1s var(--wf-curva)}
.tr-gravado{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tr-gravado line{stroke:var(--wf-tinta)}
.tr-gravado .tr-pal{font-family:var(--wf-sans);font-size:15px;font-weight:500;letter-spacing:3.4px;fill:var(--wf-creme);opacity:.6;transition:opacity .5s,fill .5s}
.tr-gravado .tr-pal.tr-on{fill:#fff;opacity:1}
.tr-gravado .tr-insc{font-family:var(--wf-sans);font-size:6.4px;letter-spacing:2.4px;fill:var(--wf-creme);opacity:.5}
.tr-gravado .tr-ponto{fill:var(--wf-ouro)}
.tr-gravado .tr-serrilha{fill:none;stroke:#8a899c;stroke-width:4.2;stroke-dasharray:1.05 1.4;opacity:.55}
.tr-gravado .tr-friso{fill:none;stroke:var(--wf-ouro);stroke-width:.5;opacity:.55}
.tr-gravado .tr-batente{fill:var(--wf-ouro)}
.tr-abas{position:absolute;inset:0}
.tr-raio{position:absolute;inset:0;transform:rotate(calc(var(--k)*45deg));pointer-events:none}
.tr-aba{position:absolute;left:50%;top:7.5%;width:30%;height:max(48px,11%);transform:translate(-50%,-50%);pointer-events:auto;background:none;border:0;border-radius:999px;color:transparent;font:inherit;font-size:1rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tr-aba:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.tr-vidro{position:absolute;inset:12.6%;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.5px var(--wf-ouro);display:grid;align-content:center;justify-items:center;text-align:center;gap:6px;padding:10%;background:var(--wf-papel)}
/* a luz dentro do vidro muda de lugar quando o anel gira */
.tr-luz{position:absolute;inset:-6%;border-radius:50%;transform:rotate(calc(var(--tr-sel,0)*96deg));transition:transform 1.6s var(--wf-curva);
  background:radial-gradient(42% 42% at 76% 78% in oklab,color-mix(in oklab,var(--wf-pele) 66%,transparent),transparent 72%),radial-gradient(50% 50% at 18% 70% in oklab,var(--wf-parede-2),transparent 72%),radial-gradient(34% 34% at 70% 18% in oklab,color-mix(in oklab,var(--wf-ouro) 26%,transparent),transparent 72%)}
.tr-vidro::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(60% 40% at 30% 8% in oklab,rgba(255,255,255,.8),transparent 70%);pointer-events:none}
.tr-vidro::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50% in oklab,transparent 60%,rgba(44,43,59,.16) 100%);pointer-events:none}
.tr-vidro-olho{font-size:.875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wf-mel-tinta);font-weight:500}
/* profundidade de campo dentro do vidro: a palavra escolhida nítida, as outras duas em planos desfocados */
.tr-plano{position:relative;display:block;width:100%;height:clamp(3rem,7.4vw,6.2rem)}
.tr-pw{position:absolute;left:50%;top:50%;white-space:nowrap;font-family:var(--wf-serif);font-style:italic;font-size:clamp(3rem,7.4vw,6.2rem);line-height:1;color:var(--wf-tinta);letter-spacing:-.01em;
  transform:translate(-50%,-56%) translate(var(--x,0),var(--y,0)) scale(var(--s,1));filter:blur(var(--b,0));opacity:var(--o,1);
  transition:transform 1.1s var(--wf-curva),filter 1.1s var(--wf-curva),opacity 1.1s var(--wf-curva)}
.tr-pw[data-plano="1"]{--x:22%;--y:-132%;--s:.6;--b:4.5px;--o:.36;color:var(--wf-mel-tinta)}
.tr-pw[data-plano="2"]{--x:-16%;--y:142%;--s:.84;--b:8px;--o:.24}
.tr-vidro-olho,.tr-resumo{position:relative;z-index:1}
.tr-resumo{font-size:.95rem;line-height:1.35;color:var(--wf-tinta-2);max-width:13em;transition:opacity .4s}
.tr-vidro.tr-troca .tr-resumo{opacity:0}
.tr-indice{position:absolute;left:50%;top:-2.2%;margin-left:-9px;border-width:9px;border-top-width:14px;z-index:4}
.tr-dica{text-align:center;letter-spacing:.02em}

/* os painéis */
.tr-paineis{grid-area:paineis;display:grid;gap:44px;min-width:0}
.js .tr-paineis{gap:0}
.js .tr-painel{grid-area:1/1;transition:opacity .6s var(--wf-curva),filter .7s var(--wf-curva),visibility 0s}
.js .tr-painel:not(.tr-ativo){visibility:hidden;opacity:0;filter:blur(10px);transition:opacity .3s,filter .3s,visibility 0s .3s}
.tr-nome{display:flex;align-items:baseline;gap:16px;font-size:clamp(1.7rem,2.6vw,2.3rem);padding-bottom:14px;border-bottom:1px solid color-mix(in oklab,var(--wf-tinta) 26%,transparent)}
.tr-lista{list-style:none;padding:0}
.tr-lista li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:6px 28px;align-items:baseline;padding:15px 0;border-bottom:1px solid color-mix(in oklab,var(--wf-tinta) 12%,transparent)}
.tr-lista h4{font-family:var(--wf-serif);font-weight:500;font-size:clamp(1.2rem,1.55vw,1.4rem);line-height:1.2;color:var(--wf-tinta)}
.tr-lista p{font-size:.97rem;line-height:1.5;color:var(--wf-tinta-2)}
/* as linhas do painel entram em foco uma a uma quando o anel para */
.js .tr-painel.tr-ativo .tr-lista li{animation:tr-foca .8s var(--wf-curva) both;animation-delay:calc(.12s + var(--n,0)*.055s)}
.tr-lista li:nth-child(2){--n:1}.tr-lista li:nth-child(3){--n:2}.tr-lista li:nth-child(4){--n:3}.tr-lista li:nth-child(5){--n:4}.tr-lista li:nth-child(6){--n:5}.tr-lista li:nth-child(7){--n:6}
@keyframes tr-foca{from{opacity:0;filter:blur(7px)}to{opacity:1;filter:blur(0)}}
.tr-fala{margin:26px 0 0;padding-left:20px;border-left:2px solid var(--wf-batom);max-width:34em}
.tr-fala blockquote{font-family:var(--wf-serif);font-style:italic;font-size:clamp(1.15rem,1.5vw,1.36rem);line-height:1.3;color:var(--wf-tinta)}
.tr-fala .wf-autor{margin-top:8px}
.tr-nota{margin-top:22px;font-size:.97rem}

/* o título acompanha o anel: o índice batom pousa na palavra escolhida */
.js .tr-t{position:relative;display:inline-block}
.js .tr-t::before{content:"";position:absolute;left:50%;top:-.16em;margin-left:-6px;border:6px solid transparent;border-top:9px solid var(--wf-batom);border-bottom:0;opacity:0;transform:translateY(-10px);transition:opacity .5s var(--wf-curva),transform .7s var(--wf-curva)}
.js .tr-t.tr-t-on::before{opacity:1;transform:none}
/* a palavra da segunda linha recebe o índice por baixo, para não encostar na linha de cima */
.js em.tr-t::before{top:auto;bottom:-.12em;border-top:0;border-bottom:9px solid var(--wf-batom);transform:translateY(10px)}
/* girar sem voltar ao anel: o passo seguinte no fim de cada lista */
.tr-seguinte{display:inline-flex;align-items:center;gap:12px;min-height:48px;margin-top:22px;padding:0 20px 0 8px;border-radius:999px;border:1px solid color-mix(in oklab,var(--wf-tinta) 40%,transparent);background:rgba(255,255,255,.5);color:var(--wf-tinta);font:inherit;font-size:.97rem;font-weight:500;cursor:pointer;transition:background .3s,transform .25s var(--wf-curva)}
.tr-seguinte:hover{background:#fff;transform:translateY(-2px)}
.tr-seguinte-aro{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle in oklab,var(--wf-papel) 0 44%,var(--wf-barril) 46% 100%);box-shadow:inset 0 0 0 1px var(--wf-ouro);position:relative;flex:none;transition:transform .8s var(--wf-curva)}
.tr-seguinte-aro::after{content:"";position:absolute;left:50%;top:1px;width:2px;height:7px;margin-left:-1px;border-radius:1px;background:var(--wf-batom)}
.tr-seguinte:hover .tr-seguinte-aro{transform:rotate(45deg)}
html:not(.js) .tr-seguinte{display:none}

/* o pé */
.tr-pe{grid-area:pe;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding-top:26px;border-top:1px solid color-mix(in oklab,var(--wf-tinta) 20%,transparent)}
.tr-aviso{display:flex;align-items:center;gap:12px;font-size:1rem;color:var(--wf-tinta);max-width:32em}
.tr-aviso .wf-indice{transform:rotate(-90deg);flex:none}

@media (max-width:980px){
  .tr-grade{grid-template-columns:1fr;grid-template-areas:"cabeca" "seletor" "paineis" "pe";row-gap:30px}
  .tr-cabeca{grid-template-columns:1fr;gap:6px}
  .tr-h2{margin-bottom:.35em}
  .tr-dial{width:min(100%,400px)}
  .tr-gravado .tr-pal{font-size:18px;letter-spacing:1.9px}
  .tr-gravado .tr-insc{display:none}
  .tr-vidro{inset:14.6%}
  .tr-resumo{font-size:.875rem}
  .tr-plano,.tr-pw{font-size:clamp(2.7rem,13vw,3.6rem)}.tr-plano{height:1em}
  .js .tr-painel:not(.tr-ativo){display:none}
  .tr-lista li{grid-template-columns:1fr;padding:14px 0}
}

/* === et === */
/* et · etapas · a escala de foco vira régua de tempo (seção escura: a objetiva por dentro) */
.et-secao{--et-p:1;box-shadow:inset 0 1.5px 0 var(--wf-ouro),inset 0 -1.5px 0 var(--wf-ouro)}
.et-bokeh i:nth-child(1){--c:#8f8aa8;width:24vw;height:24vw;left:-6%;top:8%;--b:14px;--t:36s}
.et-bokeh i:nth-child(2){--c:var(--wf-pele);width:10vw;height:10vw;left:44%;bottom:6%;--b:6px;--t:27s}
.et-bokeh i:nth-child(3){--c:var(--wf-ouro);width:6vw;height:6vw;right:30%;top:12%;--b:4px;--t:23s}
/* o diafragma, visto de dentro */
.et-optica{position:absolute;z-index:-1;width:min(88vw,1120px);aspect-ratio:1;right:max(-20vw,-280px);top:clamp(-220px,-12vw,-80px);pointer-events:none;fill:none;stroke:var(--wf-creme);stroke-width:.7}
.et-optica circle{opacity:.16}
.et-optica .et-pontos{stroke-dasharray:.8 8.52;stroke-width:6;opacity:.16}
.et-optica .et-ouro{stroke:var(--wf-ouro);opacity:.5;stroke-width:1.1}
.et-iris{transform-origin:400px 400px;transform:rotate(calc(var(--et-p)*16deg - 16deg))}
.et-iris path{stroke-opacity:.2;stroke-linejoin:round}
.et-pa0{fill:rgba(233,220,200,.05)}.et-pa1{fill:rgba(233,220,200,.022)}.et-pa2{fill:rgba(20,19,28,.3)}

.et-grade{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(32px,6vw,96px);row-gap:clamp(48px,7vw,104px);align-items:end}
.et-cabeca .wf-h2{font-size:clamp(2.5rem,6.4vw,5.8rem);margin-bottom:0}
.et-apoio{font-size:clamp(1.05rem,1.4vw,1.28rem);line-height:1.55;padding-bottom:.5em}

.et-foco{grid-column:1/-1;display:grid;gap:clamp(40px,5vw,76px)}
.et-frase{display:grid;gap:18px}
.et-frase blockquote{font-size:clamp(1.9rem,4.9vw,4.7rem);line-height:1.06;letter-spacing:-.014em;max-width:16.5em;color:var(--wf-tinta-2);text-wrap:balance}
.et-p{color:var(--wf-mel-tinta);white-space:nowrap}
.et-on .et-p{display:inline-block;filter:blur(12px);opacity:.42;transform:scale(1.04);transform-origin:50% 60%;transition:filter 1.5s var(--wf-curva),opacity 1.1s var(--wf-curva),transform 1.5s var(--wf-curva)}
.et-on .et-p.et-nitida{filter:none;opacity:1;transform:none}

/* a régua */
.et-regua{position:relative;padding-top:50px}
.et-tracos{position:relative;height:38px;border-bottom:1px solid currentColor;color:color-mix(in oklab,var(--wf-creme) 26%,transparent)}
.et-tracos i{position:absolute;bottom:0;width:1px;height:9px;background:currentColor;margin-left:-.5px}
.et-tracos i.et-g{height:20px}
.et-tracos i.et-gg{height:38px}
.et-luz{position:absolute;left:0;right:0;top:50px;color:var(--wf-creme);clip-path:inset(-2px calc(100% - var(--et-p)*100%) -2px 0)}
.et-cursor{position:absolute;top:0;left:calc(var(--et-p)*100%);width:0;z-index:2}
.et-cursor::before{content:"";position:absolute;left:-90px;top:8px;width:180px;height:110px;border-radius:50%;background:radial-gradient(closest-side in oklab,rgba(240,154,163,.2),transparent);pointer-events:none}
.et-cursor::after{content:"";position:absolute;top:38px;left:-.5px;width:1px;height:51px;background:var(--wf-batom)}
.et-cursor .wf-indice{position:absolute;top:28px;left:-7px}
.et-dia{position:absolute;top:0;left:0;white-space:nowrap;font-size:var(--wf-t-mini);letter-spacing:.14em;text-transform:uppercase;color:var(--wf-batom-tinta);transform:translateX(calc(var(--et-p)*-100%));font-variant-numeric:tabular-nums}
.et-dia b{font-weight:600}
.et-nums{position:relative;height:38px;font-size:var(--wf-t-mini);color:var(--wf-tinta-2);font-variant-numeric:tabular-nums}
.et-nums span{position:absolute;top:12px;transform:translateX(-50%);opacity:.7}
.et-nums span.et-n5{opacity:1;color:var(--wf-tinta)}
.et-nums span:last-child{transform:translateX(-100%);color:var(--wf-batom-tinta);font-weight:600}
.et-inicio{position:absolute;left:0;top:12px;white-space:nowrap;letter-spacing:.04em}
.et-nums b,.et-quando b{color:var(--wf-tinta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-right:.5em}
.et-nums span:nth-child(2){display:none}
.et-pontas{display:flex;justify-content:flex-end}
/* a legenda dela, pendurada no dia 15 */
.et-legenda{position:relative;display:grid;gap:6px;justify-items:end;text-align:right;padding:22px 24px 6px 0;border-right:1px solid var(--wf-batom)}
.et-legenda::after{content:"";position:absolute;right:-4px;bottom:-3px;width:7px;height:7px;border-radius:50%;background:var(--wf-batom)}
.et-legenda blockquote{font-size:clamp(1.45rem,2.5vw,2.3rem);line-height:1.1;color:var(--wf-tinta)}
.et-legenda .et-quando b{color:var(--wf-batom-tinta)}

.et-fecho{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);padding-top:clamp(28px,3.4vw,48px);border-top:1px solid color-mix(in oklab,var(--wf-creme) 16%,transparent);column-gap:clamp(32px,6vw,96px);row-gap:28px;align-items:end}
.et-leitura{font-family:var(--wf-serif);font-size:clamp(1.35rem,2.1vw,1.95rem);line-height:1.28;color:var(--wf-tinta-2);max-width:25em;text-wrap:pretty}
.et-leitura q{font-style:italic;color:var(--wf-tinta);quotes:"“" "”"}
.et-acao{display:grid;gap:14px;justify-items:start}

@media (max-width:860px){
  .et-grade,.et-fecho{grid-template-columns:minmax(0,1fr)}
  .et-grade{align-items:start;row-gap:40px}
  .et-optica{width:150vw;right:-70vw;top:-4%}
  .et-frase blockquote{font-size:clamp(1.9rem,8.6vw,2.5rem);text-wrap:pretty}
  .et-tracos i:not(.et-g):not(.et-gg){display:none}
  .et-nums span:not(.et-n5){display:none}
  .et-nums span:nth-child(6){display:none}
  .et-legenda{padding-right:18px}
  .et-acao .wf-bt{border-radius:28px;padding:14px 22px}
}

/* === sa === */
/* sa · o espaço: três campos de visão */
.sa-secao{--sa-u:min(1vw,14.4px)}
.sa-secao .wf-olho{font-size:.875rem}
.sa-secao .wf-bokeh i:nth-child(1){--c:var(--wf-parede-2);width:30vw;height:30vw;left:58%;top:38%;--b:14px;--t:34s;opacity:.5}
.sa-secao .wf-bokeh i:nth-child(2){--c:var(--wf-pele);width:12vw;height:12vw;left:31%;top:33%;--b:7px;--t:26s;opacity:.34}
.sa-secao .wf-bokeh i:nth-child(3){--c:#fff;width:17vw;height:17vw;left:-5%;top:6%;--b:9px;--t:30s}

/* duas colunas independentes, em zigue-zague: texto + plaqueta | lentes + vozes */
.sa-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
.sa-col{display:flex;flex-direction:column;min-width:0}
.sa-texto{padding-top:calc(var(--sa-u)*7);position:relative;z-index:2}
.sa-fala{margin:calc(var(--sa-u)*2.6) 0 14px;padding-left:22px;border-left:1px solid var(--wf-ouro);max-width:27em}
.sa-fala .wf-fala{font-size:clamp(1.3rem,1.9vw,1.7rem)}
.sa-fala .wf-autor{display:block;margin-top:12px}

/* o campo: três lentes de tamanhos diferentes */
.sa-campo{position:relative;height:calc(var(--sa-u)*61)}
.sa-vista{position:absolute;margin:0}
.sa-lente{width:100%}
.sa-lente .wf-lente-vidro>img{position:absolute;left:var(--sa-x);top:var(--sa-y);width:var(--sa-w);height:auto;object-fit:fill}
.sa-vista-sala{width:calc(var(--sa-u)*48);top:0;right:calc(var(--sa-u)*-9.6);z-index:1}
.sa-vista-sala .wf-lente-vidro{inset:10.2%}
.sa-vista-sala img{--sa-w:120%;--sa-x:-20%;--sa-y:-40%}
.sa-vista-recepcao{width:calc(var(--sa-u)*27);left:calc(var(--sa-u)*-3);top:calc(var(--sa-u)*28);z-index:2}
.sa-vista-recepcao .wf-lente-vidro{inset:12.6%}
.sa-vista-recepcao img{--sa-w:187.5%;--sa-x:-9.4%;--sa-y:-73.4%}
.sa-vista-cabine{width:calc(var(--sa-u)*16);left:calc(var(--sa-u)*.5);top:0;z-index:2}
.sa-vista-cabine .wf-lente-vidro{inset:15.4%}
.sa-vista-cabine img{--sa-w:109.1%;--sa-x:0%;--sa-y:-40.9%}
.sa-indice{position:absolute;z-index:4;left:calc(50% - 25.6%);top:calc(50% - 47.4%);transform:rotate(-30deg)}

/* legenda de cada campo: um fio desce do aro e o nome fica fora da foto */
.sa-legenda{position:absolute;z-index:-1;top:var(--sa-ly);left:var(--sa-lx);width:max-content;max-width:210px;padding:calc(var(--sa-fio,56px) - 4px) 0 0 16px;border-left:1px solid var(--wf-ouro)}
.sa-legenda::before{content:"";position:absolute;left:-3px;bottom:0;width:5px;height:5px;border-radius:50%;background:var(--wf-tinta)}
.sa-legenda .wf-h3{font-size:1.3rem}
.sa-legenda .wf-mini{margin-top:2px;line-height:1.4}
.sa-legenda-esq{left:auto;right:var(--sa-lx);padding:calc(var(--sa-fio,56px) - 4px) 16px 0 0;border-left:0;border-right:1px solid var(--wf-ouro);text-align:right}
.sa-legenda-esq::before{left:auto;right:-3px}
.sa-vista-sala .sa-legenda{--sa-lx:40%;--sa-ly:92%;--sa-fio:62px}
.sa-vista-recepcao .sa-legenda{--sa-lx:50%;--sa-ly:92%;--sa-fio:54px}
.sa-vista-cabine .sa-legenda{--sa-lx:50%;--sa-ly:92%;--sa-fio:36px}

/* o gesto: cada campo entra em foco (o vidro desfoca, o barril fica nítido, o anel gira até parar) */
.js .sa-vista[data-foco]{filter:none;transform:none;transition:opacity 1s var(--wf-curva);transition-delay:calc(var(--i,0)*.22s)}
.js .sa-vista .wf-lente-vidro>img{filter:blur(20px) saturate(.7);transform:scale(1.14);transition:filter 2s var(--wf-curva),transform 2.2s var(--wf-curva);transition-delay:calc(var(--i,0)*.22s + .1s)}
.js .sa-vista.wf-visto .wf-lente-vidro>img{filter:none;transform:none}
.js .sa-vista .wf-lente-anel{transform:rotate(-38deg);transition:transform 2.2s var(--wf-curva);transition-delay:calc(var(--i,0)*.22s)}
.js .sa-vista.wf-visto .wf-lente-anel{transform:none}
.js .sa-vista .sa-legenda{opacity:0;transform:translateY(-10px);transition:opacity .8s var(--wf-curva),transform .8s var(--wf-curva);transition-delay:calc(var(--i,0)*.22s + 1.1s)}
.js .sa-vista.wf-visto .sa-legenda{opacity:1;transform:none}

/* as duas vozes, em planos diferentes: uma grande, a outra menor e recuada */
.sa-vozes{display:grid;gap:calc(var(--sa-u)*2.4);margin-top:calc(var(--sa-u)*7.5);padding-left:calc(var(--sa-u)*13)}
.sa-voz{margin:0;padding-left:22px;border-left:1px solid var(--wf-ouro)}
.sa-voz .wf-fala{font-size:clamp(1.6rem,3vw,2.7rem);line-height:1.12;text-wrap:balance}
.sa-voz .wf-autor{display:block;margin-top:12px}
.sa-voz-2{margin-left:calc(var(--sa-u)*9)}
.sa-voz-2 .wf-fala{font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.25}

/* a plaqueta da casa (gravada como o barril) */
.sa-placa{position:relative;z-index:2;margin:calc(var(--sa-u)*5.5) calc(var(--sa-u)*4.5) 0 0;border-radius:var(--wf-raio);padding:clamp(24px,2.6vw,38px) clamp(22px,2.8vw,40px) clamp(10px,1.2vw,18px);color:var(--wf-creme);
  background:radial-gradient(70% 90% at 88% 0% in oklab,#3d3b52 0%,transparent 70%),linear-gradient(160deg in oklab,var(--wf-barril-2),var(--wf-barril) 46%,var(--wf-noite));
  box-shadow:var(--wf-sombra),inset 0 0 0 1px color-mix(in oklab,var(--wf-ouro) 70%,transparent),inset 0 0 0 5px var(--wf-barril),inset 0 0 0 6px color-mix(in oklab,var(--wf-ouro) 28%,transparent)}
.sa-fonte{display:flex;align-items:center;gap:12px;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wf-creme);margin-bottom:clamp(14px,1.6vw,22px)}
.sa-fonte .wf-indice{transform:rotate(-90deg);flex:none}
.sa-lista>div{display:grid;grid-template-columns:7.6em minmax(0,1fr);gap:4px 18px;align-items:baseline;padding:16px 0;border-top:1px solid color-mix(in oklab,var(--wf-ouro) 42%,transparent)}
.sa-lista dt{font-family:var(--wf-serif);font-size:1.28rem;line-height:1.2;color:#f3ece0}
.sa-lista dd{color:#c9c3cf;font-size:1rem;line-height:1.5}

@media (max-width:1180px){
  .sa-lista>div{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .sa-grade{grid-template-columns:minmax(0,1fr)}
  .sa-col{display:contents}
  .sa-texto{order:1;padding-top:0}
  .sa-campo{order:2}.sa-vozes{order:3}.sa-placa{order:4}
  .sa-fala{margin-top:26px}
  .sa-campo{height:auto;display:grid;margin-top:34px}
  .sa-vista{position:relative;left:auto;right:auto;top:auto;display:grid}
  .sa-vista-sala{width:min(104vw,600px);justify-self:end;margin-right:-14vw}
  .sa-vista-recepcao{width:min(70vw,420px);justify-self:start;margin:10px 0 0 -5vw}
  .sa-vista-cabine{width:min(52vw,300px);justify-self:end;margin:10px 0 0}
  .sa-legenda,.sa-legenda-esq{position:relative;z-index:0;top:auto;left:auto;right:auto;max-width:200px;margin-top:-34px;padding-top:46px}
  .sa-vista-sala .sa-legenda{justify-self:start;margin-left:22%;border-right:0;border-left:1px solid var(--wf-ouro);padding-left:14px;padding-right:0;text-align:left}
  .sa-vista-sala .sa-legenda::before{right:auto;left:-3px}
  .sa-vista-recepcao .sa-legenda{justify-self:start;margin-left:50%;padding-left:14px}
  .sa-vista-cabine .sa-legenda{justify-self:end;margin-right:50%;padding-right:14px}
  .sa-vozes{margin-top:52px;padding-left:0;gap:26px}
  .sa-voz .wf-fala{font-size:1.7rem}
  .sa-voz-2{margin-left:12%}
  .sa-voz-2 .wf-fala{font-size:1.3rem}
  .sa-placa{margin:48px 0 0}
  .sa-lista>div{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:600px) and (max-width:900px){
  .sa-vista-cabine{margin-top:-120px}
}

/* === on === */
/* on · onde fica: o índice batom vira o marcador do endereço */
.on-secao .wf-olho{font-size:.875rem}
.on-secao .wf-bokeh i:nth-child(1){--c:#fff;width:20vw;height:20vw;left:46%;top:2%;--b:10px;--t:32s}
.on-secao .wf-bokeh i:nth-child(2){--c:var(--wf-pele);width:12vw;height:12vw;left:2%;top:78%;--b:6px;--t:26s;opacity:.3}
.on-grade{display:grid;grid-template-columns:minmax(0,6.5fr) minmax(0,5.5fr);gap:clamp(28px,5vw,76px);align-items:stretch}
.on-lado{min-width:0;display:flex;flex-direction:column}

/* o mapa e a escala */
.on-mapa-bloco{position:relative;margin-top:clamp(26px,3vw,44px);padding-bottom:4px;flex:1;display:flex;flex-direction:column}
.on-escala{display:flex;align-items:flex-end;gap:16px;height:24px;margin:0 var(--wf-raio);flex:none}
.on-coord{font-size:.875rem;line-height:1;letter-spacing:.14em;color:var(--wf-tinta-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.on-tracos{flex:1;height:14px;opacity:.55;
  background:
   repeating-linear-gradient(90deg,var(--wf-tinta) 0 1px,transparent 1px 60px) 100% 100%/calc(100% + 1px) 14px no-repeat,
   repeating-linear-gradient(90deg,var(--wf-tinta) 0 1px,transparent 1px 12px) 100% 100%/calc(100% + 1px) 6px no-repeat}
.on-mapa{position:relative;flex:1;min-height:clamp(340px,40vw,520px);border-radius:var(--wf-raio);background:var(--wf-parede) linear-gradient(135deg in oklab,var(--wf-parede),var(--wf-papel));box-shadow:var(--wf-sombra),0 0 0 1px color-mix(in oklab,var(--wf-ouro) 80%,transparent),0 0 0 7px rgba(255,255,255,.55);margin-top:20px}
.on-mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--wf-raio);filter:saturate(.78) contrast(.97)}
.on-mapa::before{content:"";position:absolute;inset:-15px;border:1px solid var(--wf-mel);border-radius:calc(var(--wf-raio) + 12px);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) 0 0/30px 30px no-repeat,linear-gradient(#000 0 0) 100% 0/30px 30px no-repeat,linear-gradient(#000 0 0) 0 100%/30px 30px no-repeat,linear-gradient(#000 0 0) 100% 100%/30px 30px no-repeat;
  mask:linear-gradient(#000 0 0) 0 0/30px 30px no-repeat,linear-gradient(#000 0 0) 100% 0/30px 30px no-repeat,linear-gradient(#000 0 0) 0 100%/30px 30px no-repeat,linear-gradient(#000 0 0) 100% 100%/30px 30px no-repeat}
/* a marca: fio que desce da escala, índice e o aro de foco em volta do ponto */
.on-marca{position:absolute;left:50%;top:-36px;height:calc(50% + 36px - 18px - 46px);width:0;pointer-events:none;z-index:2}
.on-fio{position:absolute;left:-.5px;top:0;bottom:10px;width:1px;background:var(--wf-batom);transform-origin:50% 0}
.on-indice{position:absolute;left:-7px;bottom:-7px}
.on-alvo{position:absolute;left:-46px;top:100%;width:92px;height:92px;border-radius:50%;box-shadow:0 0 0 1.5px var(--wf-barril),0 0 0 6px rgba(255,255,255,.72),0 0 0 7px var(--wf-ouro),0 18px 30px -12px rgba(44,43,59,.5)}
.on-etiqueta{position:absolute;z-index:2;right:22px;top:-12px;max-width:calc(50% - 34px);pointer-events:none;background:rgba(255,255,255,.92)}
.on-pe{margin-top:24px}

/* o gesto: o índice corre a escala e para sobre o endereço; o aro fecha o foco */
.js .on-mapa-bloco[data-foco]{opacity:1;filter:none;transform:none}
.js .on-mapa-bloco .on-marca{left:4%;transition:left 1.4s var(--wf-curva) .1s}
.js .on-mapa-bloco.wf-visto .on-marca{left:50%}
.js .on-mapa-bloco .on-fio{transform:scaleY(.06);transition:transform .8s var(--wf-curva) 1s}
.js .on-mapa-bloco.wf-visto .on-fio{transform:none}
.js .on-mapa-bloco .on-indice{bottom:calc(100% - 22px);transition:bottom .8s var(--wf-curva) 1s}
.js .on-mapa-bloco.wf-visto .on-indice{bottom:-7px}
.js .on-mapa-bloco .on-alvo{opacity:0;transform:scale(1.8);transition:opacity .6s var(--wf-curva) 1.5s,transform .8s var(--wf-curva) 1.5s}
.js .on-mapa-bloco.wf-visto .on-alvo{opacity:1;transform:none}

/* a ficha de chegada */
.on-ficha{position:relative;align-self:start;background:rgba(255,255,255,.66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--wf-raio);border-left:2px solid var(--wf-batom);box-shadow:var(--wf-sombra);padding:clamp(24px,2.8vw,40px);margin-top:clamp(40px,4vw,58px);--on-lente:clamp(150px,16.5vw,232px)}
.on-rotulo{font-size:.875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wf-mel-tinta);font-weight:500;margin-bottom:18px}
.on-lente{--wf-lente:var(--on-lente);position:absolute;top:calc(var(--on-lente)*-.26);right:calc(var(--on-lente)*-.13);z-index:2}
.on-lente .wf-lente-vidro{inset:13.4%}
.on-lente .wf-lente-vidro>img{position:absolute;width:184.6%;left:-30.8%;top:-46.2%;height:auto;object-fit:fill}
.on-chegada .wf-h3,.on-endereco{padding-right:calc(var(--on-lente)*.82)}
.on-endereco{font-style:normal;color:var(--wf-tinta-2);margin-top:8px;line-height:1.55}
.on-porta-txt{margin-top:16px;font-family:var(--wf-serif);font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.25;color:var(--wf-tinta);text-wrap:balance}
.on-porta-txt strong{font-weight:600;color:var(--wf-mel-tinta)}
.on-bloco{margin-top:24px;padding-top:20px;border-top:1px solid color-mix(in oklab,var(--wf-tinta) 14%,transparent)}
.on-horario{width:100%;border-collapse:collapse;margin-top:6px}
.on-horario caption{caption-side:bottom;text-align:left;padding-top:8px}
.on-horario th,.on-horario td{padding:11px 0;font-weight:400;text-align:left;color:var(--wf-tinta-2);border-bottom:1px solid color-mix(in oklab,var(--wf-tinta) 9%,transparent)}
.on-horario td{text-align:right;color:var(--wf-tinta);font-variant-numeric:tabular-nums}
.on-horario tr.on-hoje th,.on-horario tr.on-hoje td{color:var(--wf-tinta);font-weight:600}
.on-hoje-rot{display:inline-flex;align-items:center;gap:6px;margin-left:12px;font-size:.875rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--wf-batom-tinta)}
.on-hoje-rot::before{content:"";width:0;height:0;border:5px solid transparent;border-left:8px solid var(--wf-batom)}
.on-contato{list-style:none;padding:0;margin-top:2px}
.on-contato li{border-bottom:1px solid color-mix(in oklab,var(--wf-tinta) 9%,transparent)}
.on-contato a{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px;min-height:54px;padding:6px 26px 6px 0;color:var(--wf-tinta);text-decoration:none;transition:padding .35s var(--wf-curva)}
.on-contato a::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;margin-top:-4px;border-top:1.5px solid var(--wf-mel);border-right:1.5px solid var(--wf-mel);transform:rotate(45deg);transition:right .35s var(--wf-curva)}
.on-contato a:hover{padding-left:6px}
.on-contato a:hover::after{right:0}
.on-contato span{font-size:var(--wf-t-mini);color:var(--wf-tinta-2)}
.on-contato b{font-weight:500;overflow-wrap:anywhere;min-width:0}
.on-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px}
.on-bt2{display:inline-flex;align-items:center;min-height:52px;padding:14px 24px;border-radius:999px;text-decoration:none;font-weight:500;color:var(--wf-tinta);border:1px solid color-mix(in oklab,var(--wf-tinta) 55%,transparent);transition:background .25s,color .25s}
.on-bt2:hover{background:var(--wf-barril);color:#fff}

@media (max-width:900px){
  .on-grade{grid-template-columns:minmax(0,1fr);gap:26px}
  .on-mapa{min-height:0;aspect-ratio:1;flex:none}
  .on-ficha{margin-top:54px}
  .on-lente{right:-6px}
  .on-chegada .wf-h3,.on-endereco{padding-right:calc(var(--on-lente)*.9)}
  .on-contato a{padding-top:10px;padding-bottom:10px}
  .on-contato span{flex-basis:100%}
  .on-etiqueta{right:10px;top:-10px;padding:9px 12px 9px 11px}
  .on-etiqueta b{font-size:1.05rem}
  .on-coord{letter-spacing:.06em}
}
@media (min-width:601px) and (max-width:900px){.on-mapa{aspect-ratio:4/3}}

/* === fim === */
.fe-fecho{padding-bottom:0;border-top:1px solid var(--wf-ouro)}
.fe-grade{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,5vw,80px);align-items:end}
.fe-texto{padding-bottom:clamp(64px,10vw,140px)}
.fe-titulo{font-size:clamp(2.6rem,6.4vw,6rem);line-height:.96}
.fe-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:30px}
.fe-hora{margin-top:22px}
.fe-campo{position:relative;isolation:isolate;justify-self:end;align-self:end;width:min(108%,820px);margin-top:calc(-1*clamp(40px,6vw,110px));margin-bottom:-17%;margin-right:calc(-1*min(4vw,60px))}
.fe-lente{--wf-lente:100%}
.fe-lente .wf-lente-anel line{stroke:var(--wf-creme)}
.fe-vidro>img{object-position:60% 20%;transform:scale(1.04)}
.fe-hora{margin-top:26px}
.fe-indice{position:absolute;left:23.5%;top:3.2%;transform:rotate(-30deg)}
.fe-halo{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle in oklab,rgba(201,162,115,.5) 0%,rgba(239,193,176,.2) 40%,transparent 64%);z-index:-1}
.fe-lente .wf-lente-barril{background:conic-gradient(from 210deg in oklab,#6a6880,#34333f 22%,#7b7990 45%,#3a3948 70%,#6a6880);box-shadow:0 60px 110px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.5),inset 0 0 0 2px var(--wf-ouro)}
.fe-lente .wf-lente-barril{inset:4.4%}
.fe-fala{margin-top:34px;padding-left:18px;border-left:1px solid var(--wf-ouro);max-width:30em}
.fe-fala .wf-fala{font-size:clamp(1.1rem,1.5vw,1.35rem)}
.fe-fala .wf-autor{margin-top:8px;display:block}
.ro-pe{position:relative;z-index:1;background:#16151f;color:#c3bdc9;padding:clamp(48px,7vw,84px) var(--wf-margem) 28px;font-size:var(--wf-t-mini);line-height:1.7;border-top:1px solid rgba(201,162,115,.5)}
.ro-pe a{color:#f3ece0;text-underline-offset:4px;text-decoration-color:rgba(243,236,224,.4)}
.ro-pe a:hover{text-decoration-color:var(--wf-ouro)}
.ro-grade{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:36px}
.ro-logo{font-family:var(--wf-serif);font-size:1.7rem;letter-spacing:.22em;color:#f3ece0;line-height:1.1}
.ro-sub{letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;margin-top:8px;color:#e3b98a}
.ro-rot{letter-spacing:.18em;text-transform:uppercase;font-size:.75rem;color:#e3b98a;margin-bottom:8px}
.ro-col p+p{color:#d9d3dc}
.ro-base{margin-top:48px;padding-top:22px;border-top:1px solid rgba(243,236,224,.14);display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;justify-content:space-between}
.ro-nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.ro-nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.ro-aviso{color:#aaa3b3}
.ro-selo{color:#c3bdc9}
.ro-selo a{font-weight:600}
@media (max-width:860px){
  .fe-grade{grid-template-columns:1fr;gap:0}
  .fe-texto{padding-bottom:36px}
  .fe-campo{justify-self:center;width:min(92vw,420px);margin-right:0;margin-bottom:-16%}
  .ro-grade{grid-template-columns:1fr;gap:26px}
  .ro-base{flex-direction:column;align-items:flex-start;padding-bottom:70px}
}

.fe-titulo em{display:inline-block}
.fe-regua{display:block;height:14px;margin-top:34px;max-width:30em;background:repeating-linear-gradient(90deg,rgba(243,236,224,.55) 0 1px,transparent 1px 12px) bottom/100% 6px no-repeat,repeating-linear-gradient(90deg,rgba(243,236,224,.9) 0 1px,transparent 1px 60px) bottom/100% 14px no-repeat;border-bottom:1px solid rgba(243,236,224,.4);position:relative}
.fe-regua::after{content:"";position:absolute;right:0;top:-12px;border:6px solid transparent;border-top:9px solid var(--wf-batom)}
.fe-fala{margin-top:28px}
@media (max-width:860px){.fe-campo{width:min(96vw,440px);margin-top:10px;margin-bottom:-18%}.fe-regua{margin-top:24px}}

/* ajustes da montagem (entra por último) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js [data-foco],.js [data-sobe]{opacity:1;filter:none;transform:none}
}

/* montagem */
.wf-secao .wf-olho{font-size:.875rem}
.fe-regua{max-width:min(30em,100%)}
[data-registro]:empty{display:none}