/* ============ base do site (sistema visual do hero C · "Mesma luz") ============ */
:root{
  /* cor: noite neutra tirada do retrato em P&B */
  --preto:#0b0b0c;
  --grafite-0:#111113;
  --grafite-1:#1a1a1d;
  --grafite-2:#2a2a2e;
  --grafite-morno:#221f1c;
  --pele:#b9b6b1;
  --marfim:#efeae2;
  --marfim-70:rgb(239 234 226 / .72);
  --marfim-45:rgb(239 234 226 / .5);
  --marfim-18:rgb(239 234 226 / .18);
  --marfim-08:rgb(239 234 226 / .08);
  --mel:#d9b77a;
  --mel-escuro:#7a5a1e;      /* mel sobre parede clara (AA) */
  /* parede clara (uma única seção): papel fotográfico */
  --papel:#e9e5de;
  --papel-2:#d9d5ce;
  --tinta:#131315;
  --tinta-70:rgb(19 19 21 / .74);
  --tinta-18:rgb(19 19 21 / .18);
  /* tipografia */
  --f-titulo:"Prata", "Times New Roman", serif;
  --f-texto:"Work Sans", system-ui, sans-serif;
  --t-titulo:clamp(2.35rem, 5.5vw, 5.3rem);   /* h1 do hero */
  --t-h2:clamp(2rem, 4.2vw, 3.9rem);
  --t-h3:clamp(1.3rem, 1.9vw, 1.75rem);
  --t-compl:clamp(1.06rem, 1.55vw, 1.5rem);
  --t-texto:clamp(1rem, 1.08vw, 1.06rem);
  --t-mini:.875rem;
  --t-rotulo:.78rem;
  /* espaço */
  --margem:clamp(1.25rem, 5vw, 4.5rem);
  --largura:82rem;
  --e-1:.5rem; --e-2:1rem; --e-3:1.5rem; --e-4:2.25rem; --e-5:3.5rem; --e-6:5.5rem;
  --secao:clamp(5rem, 11vw, 10rem);
  /* movimento */
  --suave:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:1.5rem}
body{margin:0;background:var(--preto);color:var(--marfim);font-family:var(--f-texto);font-size:var(--t-texto);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
p,h1,h2,h3,h4,blockquote,figure,ul,ol,dl,dd{margin:0}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--mel);outline-offset:4px}
::selection{background:var(--mel);color:var(--preto)}

/* granulado de filme: um só, fixo, por cima da página */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .9 .9 .9 0 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:220px 220px}

/* ---------- seção ---------- */
.wf-secao{position:relative;isolation:isolate;padding:var(--secao) var(--margem);overflow:clip}
.wf-dentro{max-width:var(--largura);margin-inline:auto}
/* paredes */
.wf-noite{background:var(--preto);color:var(--marfim)}
.wf-grafite{background:var(--grafite-0);color:var(--marfim)}
.wf-papel{background:var(--papel);color:var(--tinta);--marfim:var(--tinta);--marfim-70:var(--tinta-70);--marfim-45:rgb(19 19 21 / .5);--marfim-18:var(--tinta-18);--marfim-08:rgb(19 19 21 / .07);--mel:var(--mel-escuro)}
/* mancha de luz de fundo (malha): pôr <i class="wf-luz"> dentro da seção e posicionar com --x --y --t */
.wf-luz{position:absolute;z-index:-1;left:var(--x,50%);top:var(--y,30%);width:var(--t,60vmax);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(closest-side in oklab, var(--c,rgb(185 182 177 / .11)), transparent);filter:blur(30px)}
.wf-papel .wf-luz{--c:rgb(255 255 255 / .55)}

/* ---------- tipografia ---------- */
.wf-rotulo{font-size:var(--t-rotulo);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--marfim-70);display:flex;align-items:center;gap:.9rem}
.wf-rotulo::before{content:"";width:2.2rem;height:1px;background:var(--marfim-45);flex:none}
.wf-h2{font-family:var(--f-titulo);font-weight:400;font-size:var(--t-h2);line-height:1.08;letter-spacing:-.012em;text-wrap:balance}
.wf-h3{font-family:var(--f-titulo);font-weight:400;font-size:var(--t-h3);line-height:1.2}
.wf-compl{font-size:var(--t-compl);font-weight:300;line-height:1.45}
.wf-texto{color:var(--marfim-70);max-width:36rem}
.wf-texto strong{font-weight:500;color:var(--marfim)}
.wf-mini{font-size:var(--t-mini);color:var(--marfim-70)}
.wf-mel{color:var(--mel)}
/* fala (dela ou de paciente): sempre em Prata */
.wf-fala{font-family:var(--f-titulo);font-size:clamp(1.25rem,2.1vw,1.9rem);line-height:1.35}
.wf-fala-de{display:block;margin-top:.6rem;font-family:var(--f-texto);font-size:var(--t-mini);color:var(--marfim-70)}

/* ---------- ações ---------- */
.wf-botao{display:inline-flex;align-items:center;gap:.8rem;min-height:3.25rem;padding:1rem 1.6rem 1rem 1.3rem;border-radius:999px;background:#efeae2;color:#0b0b0c;font-weight:600;font-size:.98rem;text-decoration:none;letter-spacing:.005em;transition:transform .4s var(--suave), box-shadow .4s var(--suave)}
.wf-botao i{width:.62rem;height:.62rem;border-radius:50%;background:#d9b77a;box-shadow:0 0 0 3px rgb(217 183 122 / .28);flex:none}
.wf-botao:hover,.wf-botao:focus-visible{transform:translateY(-2px);box-shadow:0 .9rem 2.6rem -.6rem rgb(239 234 226 / .35)}
.wf-papel .wf-botao{background:var(--tinta);color:#efeae2}
.wf-papel .wf-botao:hover{box-shadow:0 .9rem 2.2rem -.7rem rgb(19 19 21 / .5)}
.wf-link{display:inline-flex;align-items:center;min-height:3rem;font-size:.95rem;color:var(--marfim);text-decoration:none;background:linear-gradient(var(--marfim-45),var(--marfim-45)) 0 calc(50% + .85em)/100% 1px no-repeat;transition:background-size .4s var(--suave)}
.wf-link:hover{background-image:linear-gradient(var(--marfim),var(--marfim))}

/* ---------- o motivo: o trilho da luz ----------
   fio horizontal com marcos nas pontas e o marco "mesma luz" em mel no meio.
   Uso: <div class="wf-trilho" style="--p:.5"><i></i></div>  (--p de 0 a 1 = posição do ponto; sem <i> não há ponto) */
.wf-trilho{position:relative;height:1.75rem;--p:.5}
.wf-trilho::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(to right in oklab, var(--marfim-45), var(--marfim-18) 35%, var(--marfim-18) 65%, var(--marfim-45))}
.wf-trilho::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:1.15rem;border-radius:1px;background:var(--mel);transform:translate(-50%,-50%)}
.wf-trilho > i{position:absolute;top:50%;left:calc(var(--p) * 100%);width:1.5rem;height:1.5rem;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--marfim);background:rgb(11 11 12 / .78);box-shadow:0 0 0 .4rem rgb(239 234 226 / .06), 0 0 1.6rem rgb(239 234 226 / .32);transition:left 1.2s var(--suave)}
.wf-trilho > i::after{content:"";position:absolute;inset:.42rem;border-radius:50%;background:var(--mel)}
.wf-papel .wf-trilho > i{background:rgb(233 229 222 / .8);box-shadow:0 0 0 .4rem rgb(19 19 21 / .05)}
/* ponto de luz solto (marcador) */
.wf-ponto{display:inline-block;width:.62rem;height:.62rem;border-radius:50%;background:var(--mel);box-shadow:0 0 0 3px rgb(217 183 122 / .22), 0 0 1.2rem rgb(217 183 122 / .5)}

/* ---------- entrada por rolagem ---------- */
.wf-js [data-entra]{opacity:0;transform:translateY(1.1rem);transition:opacity .9s var(--suave), transform .9s var(--suave);transition-delay:calc(var(--i,0) * 90ms)}
.wf-js [data-entra="luz"]{transform:none;filter:brightness(.35);transition:opacity 1.4s var(--suave), filter 1.6s var(--suave)}
.wf-js [data-entra].wf-visto{opacity:1;transform:none;filter:none}

/* ---------- botão que acompanha a rolagem (celular) ---------- */
.wf-fixo{position:fixed;z-index:80;left:50%;bottom:max(.9rem, env(safe-area-inset-bottom));transform:translate(-50%,160%);transition:transform .5s var(--suave);display:none;box-shadow:0 .6rem 2rem rgb(0 0 0 / .55)}
.wf-fixo.wf-on{transform:translate(-50%,0)}
@media (max-width:820px){.wf-fixo{display:inline-flex;white-space:nowrap}}

/* hero C aprovado (classes sem prefixo: nao reutilizar estes nomes nas secoes) */
.hero{--t-mini:.74rem}

.hero{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;background:var(--preto);display:flex;flex-direction:column}

/* malha de manchas de grafite */
.malha{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.malha i{position:absolute;display:block;border-radius:50%;filter:blur(50px);will-change:transform}
.malha i:nth-child(1){width:70vmax;height:62vmax;left:-22vmax;top:-26vmax;background:radial-gradient(closest-side in oklab, var(--grafite-2), transparent);opacity:.6;animation:deriva-1 34s ease-in-out infinite alternate}
.malha i:nth-child(2){width:64vmax;height:64vmax;left:-12vmax;bottom:-34vmax;background:radial-gradient(closest-side in oklab, var(--grafite-morno), transparent);opacity:.95;animation:deriva-2 27s ease-in-out infinite alternate}
.malha i:nth-child(3){width:58vmax;height:52vmax;right:-14vmax;top:8vmax;background:radial-gradient(closest-side in oklab, var(--grafite-1), transparent);opacity:.9;animation:deriva-3 38s ease-in-out infinite alternate}
.malha i:nth-child(4){width:44vmax;height:40vmax;left:26vmax;top:20vmax;background:radial-gradient(closest-side in oklab, var(--grafite-morno), transparent);opacity:.5;animation:deriva-1 22s ease-in-out infinite alternate-reverse}
@keyframes deriva-1{to{transform:translate3d(7vmax,5vmax,0) scale(1.12)}}
@keyframes deriva-2{to{transform:translate3d(9vmax,-6vmax,0) scale(.9)}}
@keyframes deriva-3{to{transform:translate3d(-8vmax,6vmax,0) scale(1.1)}}


/* ---------- navegação ---------- */
.nav{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);padding:clamp(1rem,2.4vw,1.75rem) var(--margem)}
.marca{text-decoration:none;display:flex;flex-direction:column;line-height:1.2}
.marca b{font-family:var(--f-titulo);font-weight:400;font-size:1.12rem;letter-spacing:.01em}
.marca small{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--marfim-70);margin-top:.2rem}
.nav{justify-content:flex-start}
.nav ul{list-style:none;margin:0 0 0 clamp(2rem,5.5vw,5.5rem);padding:0;display:flex;gap:clamp(1.2rem,2.4vw,2.4rem)}
.nav li a{text-decoration:none;font-size:.86rem;letter-spacing:.02em;color:var(--marfim-70);transition:color .3s}
.nav li a:hover,.nav li a:focus-visible{color:var(--marfim)}
.nav .so-celular{display:none}

/* ---------- cena: retrato + luz ---------- */
.cena{
  --l:0; --d:0; --f:0; --p:.5;
  position:absolute;z-index:1;top:0;right:max(1vw, calc((100vw - 1700px) / 2));
  height:108svh;aspect-ratio:1792/2390;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  cursor:ew-resize;
}
.halo{position:absolute;z-index:0;top:36%;left:calc(50% + var(--l) * 44%);width:calc(92% + var(--f) * 70% - var(--d) * 34%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side in oklab, rgb(185 182 177 / .2), rgb(185 182 177 / .07) 55%, transparent);
  opacity:calc(.75 + var(--f) * .25 + var(--d) * .25)}
.palco{position:absolute;inset:0;z-index:1;isolation:isolate;mix-blend-mode:screen;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 16%), linear-gradient(to bottom, #000 62%, transparent 86%);
  mask-image:linear-gradient(to right, transparent 0, #000 16%), linear-gradient(to bottom, #000 62%, transparent 86%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.palco img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.955) contrast(1.098) contrast(calc(1 + var(--d) * .18)) brightness(calc(1 + var(--d) * .1))}
.palco span{position:absolute;inset:0;display:block}
/* luz de lado: a sombra toma o lado oposto, a luz raspa o lado de cá */
.c-sombra{mix-blend-mode:multiply;opacity:var(--d);background:radial-gradient(118% 92% at -16% 36% in oklab, #fff 0, #fff 33%, #8a8a8a 49%, #1e1e1e 63%, #000 80%)}
.c-raspa{mix-blend-mode:overlay;opacity:calc(var(--d) * .7);background:radial-gradient(52% 60% at 6% 38% in oklab, #fff, #808080 80%)}
/* luz de frente: enche as sombras e estoura a pele */
.c-enche{mix-blend-mode:overlay;opacity:calc(var(--f) * .25);background:radial-gradient(75% 62% at 50% 42% in oklab, #fff, #cfcfcf 60%, #808080)}
.c-frente{mix-blend-mode:color-dodge;opacity:var(--f);background:radial-gradient(66% 56% at 50% 40% in oklab, #565656, #444 55%, #1a1a1a)}

/* ---------- controle da luz ---------- */
.luz{position:absolute;z-index:3;left:50%;bottom:calc(8svh + clamp(1.4rem,4svh,2.6rem));width:min(25rem, 58%);transform:translateX(-50%);cursor:default}
.luz::before{content:"";position:absolute;inset:-2.6rem -4.5rem -2rem;z-index:-1;background:radial-gradient(closest-side in oklab, rgb(11 11 12 / .86) 35%, rgb(11 11 12 / .5) 70%, transparent);pointer-events:none}
.luz__rotulo{position:relative;height:1.5rem;margin-bottom:.35rem}
.luz__rotulo span{position:absolute;bottom:0;left:calc(var(--p) * 100%);transform:translateX(calc(var(--p) * -100%));white-space:nowrap;font-size:var(--t-mini);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--marfim)}
.cena[data-estado="mesma"] .luz__rotulo span{color:var(--mel)}
.luz__trilho{position:relative;height:1.75rem}
.luz__trilho::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(to right in oklab, var(--marfim-45), var(--marfim-18) 35%, var(--marfim-18) 65%, var(--marfim-45))}
.luz__marco{position:absolute;top:50%;width:1px;height:.6rem;background:var(--marfim-45);transform:translate(-50%,-50%)}
.luz__marco--lado{left:0}
.luz__marco--frente{left:100%}
.luz__marco--meio{left:50%;height:1.15rem;width:2px;background:var(--mel);border-radius:1px}
.luz__ponto{position:absolute;top:50%;left:calc(var(--p) * 100%);width:1.5rem;height:1.5rem;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--marfim);background:rgb(11 11 12 / .78);box-shadow:0 0 0 .4rem rgb(239 234 226 / .06), 0 0 1.6rem rgb(239 234 226 / .32);pointer-events:none}
.luz__ponto::after{content:"";position:absolute;inset:.42rem;border-radius:50%;background:var(--marfim);transition:background .5s}
.cena[data-estado="mesma"] .luz__ponto::after{background:var(--mel)}
.luz__campo{position:absolute;top:50%;left:-1.375rem;width:calc(100% + 2.75rem);height:2.75rem;margin:0;transform:translateY(-50%);opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none;background:transparent}
.luz__campo::-webkit-slider-thumb{-webkit-appearance:none;width:2.75rem;height:2.75rem}
.luz__campo::-moz-range-thumb{width:2.75rem;height:2.75rem;border:0}
.luz__campo:focus-visible ~ .luz__ponto{outline:2px solid var(--mel);outline-offset:4px}
.luz__escala{display:flex;justify-content:space-between;margin-top:.15rem;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--marfim-70)}
.luz__escala span:nth-child(2){color:var(--mel)}
.luz__frase{margin-top:.85rem;text-align:center;font-size:.86rem;line-height:1.45;color:var(--marfim-70);text-wrap:balance}
.luz__frase b{font-weight:500;color:var(--marfim)}

/* ---------- texto ---------- */
.texto{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;width:min(100%, 43rem);padding:var(--e-3) 0 clamp(2rem,6svh,4rem) var(--margem);pointer-events:none}
.texto > *{pointer-events:auto}
.registro{font-size:var(--t-mini);letter-spacing:.2em;text-transform:uppercase;color:var(--marfim-70);display:flex;align-items:center;gap:.9rem}
.registro::before{content:"";width:2.2rem;height:1px;background:var(--marfim-45)}
h1{font-family:var(--f-titulo);font-weight:400;font-size:var(--t-titulo);line-height:1.04;letter-spacing:-.012em;margin-top:var(--e-3);color:var(--marfim)}
h1 span{display:block}
.compl{font-size:var(--t-compl);font-weight:300;color:var(--marfim);margin-top:var(--e-3)}
.apoio{max-width:33rem;margin-top:var(--e-2);color:var(--marfim-70)}
.apoio strong{font-weight:500;color:var(--marfim)}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3) var(--e-4);margin-top:var(--e-4)}
.botao{display:inline-flex;align-items:center;gap:.8rem;padding:1rem 1.6rem 1rem 1.3rem;border-radius:999px;background:var(--marfim);color:var(--preto);font-weight:600;font-size:.98rem;text-decoration:none;letter-spacing:.005em;transition:transform .4s var(--suave), box-shadow .4s var(--suave);box-shadow:0 0 0 0 rgb(239 234 226 / 0)}
.botao i{width:.62rem;height:.62rem;border-radius:50%;background:var(--mel);box-shadow:0 0 0 3px rgb(217 183 122 / .28)}
.botao:hover,.botao:focus-visible{transform:translateY(-2px);box-shadow:0 .9rem 2.6rem -.6rem rgb(239 234 226 / .35)}
.botao:focus-visible,.segundo:focus-visible,.nav a:focus-visible{outline:2px solid var(--mel);outline-offset:4px}
.segundo{font-size:.93rem;color:var(--marfim);text-decoration:none;border-bottom:1px solid var(--marfim-45);padding-bottom:.15rem;transition:border-color .3s}
.segundo:hover{border-color:var(--marfim)}
.prova{margin-top:var(--e-5);padding-top:var(--e-3);border-top:1px solid var(--marfim-18);max-width:33rem;display:grid;grid-template-columns:1fr auto;gap:var(--e-2) var(--e-4);align-items:end}
.prova blockquote{font-family:var(--f-titulo);font-size:1.12rem;line-height:1.4;color:var(--marfim)}
.prova figcaption{font-size:.8rem;color:var(--marfim-70);margin-top:.35rem}
.nota{font-size:.8rem;color:var(--marfim-70);white-space:nowrap;text-align:right;line-height:1.35}
.nota b{display:block;font-family:var(--f-titulo);font-weight:400;font-size:1.7rem;color:var(--marfim);line-height:1}

/* ---------- entrada ---------- */
@keyframes sobe{from{opacity:0;transform:translateY(1.1rem)}to{opacity:1;transform:none}}
@keyframes acende{from{opacity:0;filter:brightness(.3)}to{opacity:1;filter:none}}
@keyframes surge{from{opacity:0}to{opacity:1}}
.palco{animation:acende 1.7s .1s var(--suave) both}
.halo{animation:surge 2.2s .5s ease both}
.nav{animation:surge 1s .2s ease both}
.registro{animation:sobe .9s .35s var(--suave) both}
h1 span:nth-child(1){animation:sobe 1s .5s var(--suave) both}
h1 span:nth-child(2){animation:sobe 1s .68s var(--suave) both}
.compl{animation:sobe .9s .95s var(--suave) both}
.apoio{animation:sobe .9s 1.1s var(--suave) both}
.acoes{animation:sobe .9s 1.25s var(--suave) both}
.prova{animation:sobe .9s 1.45s var(--suave) both}
.luz{animation:surge 1s 1.2s ease both}

/* ---------- telas médias ---------- */
@media (max-width:1100px) and (min-width:821px){
  /* figura mais para dentro da tela: menor e encostada na margem, sem cortar o rosto */
  .cena{right:min(0px, calc((100vw - 1071px) * .8));height:96svh}
  .nav li a{text-shadow:0 0 .6rem var(--preto), 0 0 1.2rem var(--preto)}
  .texto{width:min(100%, 31rem)}
  .apoio,.prova{max-width:27rem}
}

/* abaixo de 1071 px a figura sai um pouco pela direita: o controle da luz fica inteiro na tela */
@media (max-width:1070px) and (min-width:821px){
  .luz{left:auto;right:calc((1071px - 100vw) * .8 + 1.5rem);transform:none;width:min(22rem, 52%)}
  .prova{grid-template-columns:1fr;max-width:19rem}
  .nota{text-align:left;display:flex;align-items:baseline;gap:.6rem}
  .nota b{display:inline;font-size:1.3rem}
}

/* ---------- celular ---------- */
@media (max-width:820px){
  .hero{min-height:0}
  .nav{position:absolute;top:0;left:0;right:0;justify-content:space-between}
  .nav ul{margin-left:0}
  .nav ul li{display:none}
  .nav ul li.so-celular{display:block}
  .nav li a{color:var(--marfim)}
  .marca b,.marca small,.nav li a{text-shadow:0 0 .6rem var(--preto), 0 0 1.2rem var(--preto)}
  .marca small{color:var(--marfim)}
  /* o retrato ocupa a largura toda; o controle começa abaixo do queixo */
  .cena{--lf:min(108vw, 34rem);position:relative;top:auto;right:auto;height:auto;aspect-ratio:auto;width:var(--lf);left:50%;margin-left:calc(var(--lf) / -2);cursor:default}
  .palco{inset:0 0 auto 0;aspect-ratio:1792/2390;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent), linear-gradient(to bottom, rgb(0 0 0 / .3) 0, rgb(0 0 0 / .55) 7%, #000 16%, #000 57%, transparent 78%);
    mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent), linear-gradient(to bottom, rgb(0 0 0 / .3) 0, rgb(0 0 0 / .55) 7%, #000 16%, #000 57%, transparent 78%)}
  .luz{position:relative;left:auto;bottom:auto;transform:none;width:calc(100vw - 2 * var(--margem));margin:0 auto;padding-top:calc(var(--lf) * 2390 / 1792 * .648)}
  .luz::before{inset:auto -1rem -1rem;height:11.5rem;background:radial-gradient(closest-side in oklab, rgb(11 11 12 / .9) 40%, rgb(11 11 12 / .55) 72%, transparent)}
  .luz__rotulo,.luz__trilho,.luz__escala{margin-inline:1.6rem}
  .luz__rotulo span,.luz__escala span{text-shadow:0 0 .5rem var(--preto), 0 0 1rem var(--preto)}
  .luz__frase{font-size:.84rem;margin-top:.7rem}
  .texto{width:100%;padding:var(--e-3) var(--margem) var(--e-5);justify-content:flex-start}
  h1{margin-top:.8rem}
  .compl{margin-top:.8rem}
  .acoes{order:1;margin-top:var(--e-3);gap:var(--e-2) .85rem;flex-wrap:nowrap}
  .apoio{order:2;margin-top:var(--e-3)}
  .prova{order:3;margin-top:var(--e-4);grid-template-columns:1fr}
  .botao{padding:.95rem 1.1rem .95rem .95rem;font-size:.94rem;gap:.6rem;white-space:nowrap}
  .segundo{font-size:.86rem;white-space:nowrap}
  .nota{text-align:left;display:flex;align-items:baseline;gap:.6rem}
  .nota b{display:inline;font-size:1.3rem}
}



/* ===== mf ===== */
/* mf · Resultado real: as palavras-truque ficam na sombra, "real" fica aceso */
.mf{padding-top:clamp(4rem,9vw,8rem)}
/* emenda com o hero: as mesmas manchas do fundo dele continuam aqui (mesma geometria e mesma animação de hero.css) */
.mf-emenda{position:absolute;inset:0;z-index:-1;pointer-events:none}
.mf-emenda i{position:absolute;display:block;border-radius:50%;filter:blur(50px);will-change:transform}
.mf-emenda i:nth-child(1){width:64vmax;height:64vmax;left:-12vmax;top:-30vmax;background:radial-gradient(closest-side in oklab, var(--grafite-morno), transparent);opacity:.95;animation:deriva-2 27s ease-in-out infinite alternate}
.mf-emenda i:nth-child(2){width:58vmax;height:52vmax;right:-14vmax;top:calc(8vmax - var(--mf-h,100svh));background:radial-gradient(closest-side in oklab, var(--grafite-1), transparent);opacity:.9;animation:deriva-3 38s ease-in-out infinite alternate}
.mf-emenda i:nth-child(3){width:44vmax;height:40vmax;left:26vmax;top:calc(20vmax - var(--mf-h,100svh));background:radial-gradient(closest-side in oklab, var(--grafite-morno), transparent);opacity:.5;animation:deriva-1 22s ease-in-out infinite alternate-reverse}
.mf-rotulo{margin-bottom:var(--e-5)}

.mf-pergunta p{font-family:var(--f-titulo);font-size:clamp(1.5rem,2.75vw,2.6rem);line-height:1.26;text-wrap:pretty}
.mf-pergunta p:first-child{max-width:19em}
.mf-pergunta p + p{margin:var(--e-5) 0 0 auto;max-width:21em}
.mf-truque{color:rgb(239 234 226 / .42);filter:blur(.035em);transition:color 1.6s var(--suave) 1.1s, filter 1.6s var(--suave) 1.1s}

/* corte de cinema: só os olhos, de ponta a ponta */
.mf-olhos{width:100vw;margin:var(--e-6) 0 var(--e-5) calc(50% - 50vw)}
.mf-olhos img{width:100%;height:clamp(8rem,15vw,15.5rem);object-fit:cover;object-position:50% 48%;filter:grayscale(1) contrast(1.05) brightness(.92);
  -webkit-mask-image:linear-gradient(to right, transparent 3%, #000 32%, #000 68%, transparent 97%);mask-image:linear-gradient(to right, transparent 3%, #000 32%, #000 68%, transparent 97%)}

.mf-titulo{font-family:var(--f-titulo);font-weight:400;font-size:clamp(2.35rem,6.7vw,6.5rem);line-height:1.04;letter-spacing:-.016em;text-wrap:balance}
.mf-real{position:relative;color:var(--mel);transition:color 1.4s var(--suave) .7s}
.mf-real::before{content:"";position:absolute;z-index:-1;left:50%;top:54%;width:7.5em;height:4.2em;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side in oklab, rgb(217 183 122 / .2), rgb(185 182 177 / .07) 55%, transparent);transition:opacity 2.2s var(--suave) .7s}
.mf-assina{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,31rem);gap:var(--e-4) var(--e-6);align-items:start;margin-top:var(--e-5)}
.mf-magica{font-size:clamp(1.2rem,1.75vw,1.6rem)}

.mf-hoje{margin-top:calc(var(--secao) * 1.15)}
.mf-hoje-intro{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--e-2) var(--e-5);padding-bottom:var(--e-3);border-bottom:1px solid var(--marfim-18)}
.mf-votos{list-style:none;padding:0}
.mf-votos li{display:grid;grid-template-columns:5.1em minmax(0,1fr);font-size:clamp(1.5rem,3.5vw,3.3rem);padding:clamp(1.4rem,2.6vw,2.4rem) 0;border-bottom:1px solid var(--marfim-18)}
.mf-voto{display:contents;font-family:var(--f-titulo);line-height:1.14;letter-spacing:-.01em}
.mf-voto span{font-family:var(--f-titulo);line-height:1.14;letter-spacing:-.01em}
.mf-nv{color:var(--marfim-70)}
/* a paciente responde ao primeiro compromisso */
.mf-eco{grid-column:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1.1rem;margin-top:clamp(.9rem,1.5vw,1.4rem);font-size:1rem}
.mf-eco::before{content:"";width:2.2rem;height:1px;background:var(--marfim-45);align-self:center;flex:none}
.mf-eco blockquote{font-family:var(--f-titulo);font-size:clamp(1.06rem,1.45vw,1.3rem);line-height:1.4;color:var(--marfim)}
.mf-eco figcaption{font-size:var(--t-mini);color:var(--marfim-70)}

.mf-fecho{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--e-5) var(--e-6);align-items:start;margin-top:var(--e-6)}
.mf-fecho-dela .wf-fala{max-width:22em}
.mf-fecho-paciente .wf-fala{font-size:clamp(1.15rem,1.6vw,1.45rem)}

/* a luz passa: cada trecho acende quando chega a vez (só com JS) */
.mf-js .mf-acende{opacity:.16;transition:opacity 1.5s var(--suave)}
.mf-js .mf-acende.mf-on{opacity:1}
.mf-js .mf-acende:not(.mf-on) .mf-truque{color:inherit;filter:none}
.mf-js .mf-olhos{opacity:1}
.mf-js .mf-olhos img{clip-path:inset(49.6% 0);transition:clip-path 2.1s var(--suave)}
.mf-js .mf-olhos.mf-on img{clip-path:inset(0)}
.mf-js .mf-titulo:not(.mf-on) .mf-real{color:inherit}
.mf-js .mf-titulo:not(.mf-on) .mf-real::before{opacity:0}

@media (max-width:820px){
  .mf-rotulo{margin-bottom:var(--e-4)}
  .mf-pergunta p + p{margin-top:var(--e-3)}
  .mf-olhos{margin-block:var(--e-5) var(--e-4)}
  .mf-olhos img{height:9.5rem;-webkit-mask-image:none;mask-image:none}
  .mf-assina{grid-template-columns:1fr;margin-top:var(--e-3);gap:var(--e-4)}
  .mf-votos li{display:block}
  .mf-voto{display:block}
  .mf-eco{display:block;margin-top:1rem;padding-left:1rem;border-left:1px solid var(--marfim-45)}
  .mf-eco::before{content:none}
  .mf-eco figcaption{margin-top:.3rem}
  .mf-fecho{grid-template-columns:1fr;gap:var(--e-4);margin-top:var(--e-5)}
}

/* ===== ct ===== */
/* ct · A conta: cada parcela acende na sua vez; o total fica em mel */
.ct{--ct-g:clamp(4.4rem,9.4vw,8.6rem);--ct-p:clamp(2.5rem,4.5vw,4.1rem);--ct-int:calc(var(--ct-g) * .56);--ct-col:calc(var(--ct-int) + var(--ct-p) * 1.15 + 4.2rem)}
.ct-fundo{--x:27%;--y:21rem;--t:66vmax;--c:rgb(185 182 177 / .13)}
.ct-contra{--x:30%;--y:19rem;--t:34vmax;--c:rgb(214 211 205 / .16)}
/* emendas de parede: nasce do preto e volta ao preto */
.ct::before,.ct::after{content:"";position:absolute;z-index:-2;left:0;right:0;height:clamp(6rem,14vw,12rem);pointer-events:none}
.ct::before{top:0;background:linear-gradient(to bottom in oklab, var(--preto), transparent)}
.ct::after{bottom:0;background:linear-gradient(to top in oklab, var(--preto), transparent)}
.ct-dentro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--e-6) clamp(2rem,5vw,5rem);align-items:start}
.ct-foto{margin:calc(var(--secao) * -.42) 0 0 calc(var(--margem) * -1 - 1vw);width:calc(100% + var(--margem) + 4.5vw)}
.ct-foto img{width:100%;filter:grayscale(1) contrast(1.08) brightness(.84);
  -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent 99%);mask-image:linear-gradient(to bottom, #000 72%, transparent 99%)}
.ct-titulo{margin-top:var(--e-3);max-width:11em}
.ct-abre{margin-top:var(--e-3);max-width:27rem}

/* a soma: vírgulas num eixo só */
.ct-conta{list-style:none;padding:0;margin-top:var(--e-5)}
.ct-grupo{padding:clamp(.5rem,1vw,.9rem) 0;border-top:1px solid var(--marfim-18)}
.ct-linha{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-columns:var(--ct-col) minmax(0,1fr);align-items:baseline;padding:clamp(.35rem,.7vw,.6rem) 0}
.ct-linha{grid-template-columns:auto auto minmax(0,1fr)}
.ct-num{display:inline-grid;grid-template-columns:var(--ct-int) auto;font-family:var(--f-titulo);font-size:var(--ct-p);line-height:1.05;letter-spacing:-.01em}
.ct-num b{font-weight:400;text-align:right}
.ct-num i{font-style:normal;min-width:1.08em}
.ct-un{font-size:.95rem;letter-spacing:.04em;color:var(--marfim-70);width:4.2rem;padding-left:.45rem}
.ct-onde{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .9rem}
.ct-de{font-size:var(--t-mini);color:var(--marfim-70)}
.ct-total{border-top:1px solid var(--marfim-45);padding-top:clamp(.6rem,1.4vw,1.2rem)}
.ct-total .ct-num{font-size:var(--ct-g);line-height:1;color:var(--mel);text-shadow:0 0 3rem rgb(217 183 122 / .28)}
.ct-total .ct-num i{min-width:0}
.ct-total .ct-un{width:auto;padding-right:1.2rem}
.ct-total .ct-onde{display:block}
.ct-soma{display:block;font-family:var(--f-titulo);font-size:var(--t-h3);line-height:1.2}
.ct-nota{margin-top:var(--e-4);max-width:30rem}

.ct-paciente{align-self:start;padding-top:var(--e-4);border-top:1px solid var(--marfim-18)}
.ct-paciente .wf-fala{font-size:clamp(1.35rem,2.3vw,2.1rem);line-height:1.3}
.ct-outras{padding-top:var(--e-4);border-top:1px solid var(--marfim-18)}
.ct-medidas{list-style:none;padding:0;margin-top:var(--e-2)}
.ct-medidas li{display:grid;grid-template-columns:10.5rem minmax(0,1fr);gap:.3rem var(--e-4);align-items:baseline;padding:var(--e-3) 0;border-bottom:1px solid var(--marfim-18)}
.ct-ctx span{display:block}
.ct-medidas q{quotes:"“" "”"}
.ct-medidas .wf-fala{font-size:clamp(1.15rem,1.7vw,1.5rem)}
.ct-varia{margin-top:var(--e-2)}

/* cada parcela acende na sua vez (só com JS) */
.ct-js .ct-linha{opacity:.2;transition:opacity 1.3s var(--suave)}
.ct-js .ct-linha.ct-on{opacity:.8}
.ct-js .ct-linha.ct-vez,.ct-js .ct-fechada .ct-linha.ct-on{opacity:1}
.ct-js .ct-total .ct-num{transition:color 1.4s var(--suave) .3s, text-shadow 1.8s var(--suave) .3s}
.ct-js .ct-total:not(.ct-on) .ct-num{color:inherit;text-shadow:none}

@media (max-width:820px){
  .ct{--ct-g:4.6rem;--ct-p:2.5rem}
  .ct-dentro{grid-template-columns:1fr;gap:var(--e-4)}
  .ct-foto{margin:calc(var(--secao) * -.35) calc(var(--margem) * -1) 0;width:auto}
  .ct-contra{--x:50%;--y:13rem;--t:30rem}
  .ct-foto img{height:27rem;object-fit:cover;object-position:40% 0;-webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent 98%);mask-image:linear-gradient(to bottom, #000 55%, transparent 98%)}
  .ct-un{width:2.9rem}
  .ct-onde{display:block}
  .ct-onde .ct-de{display:block}
  .ct-paciente{margin-top:var(--e-4)}
  .ct-medidas li{grid-template-columns:1fr}
  .ct-ctx span{display:inline}
  .ct-ctx span::before{content:"· "}
}

/* ===== tr ===== */
/* tr · Tratamentos: índice em duas alturas; o trilho em pé, o ponto pára no item aceso */
.tr{--tr-recuo:clamp(2.5rem,5.2vw,4.75rem);--tr-eixo:.8rem;--tr-col:60%}
.tr-cab{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--e-5);align-items:end;margin-bottom:var(--e-6)}
.tr-cab .wf-rotulo{margin-bottom:var(--e-3)}
.tr-h2{font-size:clamp(2.2rem,5.6vw,5.2rem);line-height:1.04}
.tr-abre{padding-bottom:.7rem;max-width:24rem}
.tr cite{font-style:normal}

/* corpo: trilho vertical + lista */
.tr-corpo{position:relative;padding-left:var(--tr-recuo)}
.tr-fio{position:absolute;left:var(--tr-eixo);top:.62rem;bottom:0;width:1px;background:linear-gradient(to bottom in oklab, var(--marfim-45), var(--marfim-18) 22%, var(--marfim-18) 78%, var(--marfim-45))}
.tr-pt{position:absolute;left:var(--tr-eixo);top:var(--tr-y,5.2rem);width:1.5rem;height:1.5rem;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--marfim);background:rgb(11 11 12 / .82);box-shadow:0 0 0 .4rem rgb(239 234 226 / .06), 0 0 1.6rem rgb(239 234 226 / .32);transition:top 1s var(--suave), opacity .5s;display:none}
.tr-pt::after{content:"";position:absolute;inset:.42rem;border-radius:50%;background:var(--mel)}
.tr-clarao{position:absolute;z-index:-1;left:72%;top:var(--tr-y,5.2rem);width:min(62rem,120vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(closest-side in oklab, rgb(185 182 177 / .17), rgb(185 182 177 / .05) 55%, transparent);transition:top 1.5s var(--suave);display:none}

.tr-grupo + .tr-grupo{margin-top:var(--e-5)}
.tr-grupo-cab{position:relative;margin-bottom:var(--e-3)}
.tr-grupo-nome{position:relative;font-size:var(--t-rotulo);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--marfim-70)}
.tr-grupo-nome b{font-weight:600;color:var(--marfim);margin-right:.6em}
.tr-grupo-nome::before{content:"";position:absolute;left:calc(var(--tr-eixo) - var(--tr-recuo));top:.62rem;width:1.15rem;height:1px;background:var(--marfim-70);transform:translate(-50%,-50%)}
.tr-grupo-fala{font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.36;max-width:30rem;margin-top:.7rem}
.tr-grupo-de{margin-top:.35rem}
.tr-grupo-cab{transition:opacity .9s var(--suave)}
.tr-grupo-nome::before{transition:width .9s var(--suave), background-color .9s}

.tr-lista{list-style:none;margin:0;padding:0}
.tr-nome{font-weight:400;font-size:inherit}
.tr-bt{appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:0;margin:0;padding:.5rem 0;min-height:3rem;display:flex;align-items:center;gap:1.4rem;width:100%;text-align:left;font-family:var(--f-titulo);font-weight:400;font-size:clamp(1.8rem,3.3vw,3.05rem);line-height:1.14;letter-spacing:-.012em;color:var(--marfim);-webkit-tap-highlight-color:transparent}
.tr-bt span{flex:0 1 auto}
.tr-painel{max-width:34rem;padding:.4rem 0 1.6rem}
.tr-painel > * + *{margin-top:1rem}
.tr-onde{display:none}
.tr-oque{color:var(--marfim)}
.tr-dito{font-size:clamp(1.15rem,1.65vw,1.5rem);line-height:1.34}
.tr-dito-2{color:var(--marfim-70)}
.tr-obs{max-width:30rem}
.tr-fatos{margin-bottom:0;margin-inline:0;border-top:1px solid var(--marfim-18)}
.tr-painel > .tr-fatos{margin-top:1.4rem}
.tr-fatos > div{padding:.95rem 0 1rem;border-bottom:1px solid var(--marfim-18)}
.tr-fatos dt{font-size:var(--t-rotulo);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--marfim-70)}
.tr-fatos dt{margin-bottom:.35rem}
.tr-fatos dd{font-family:var(--f-titulo);font-size:clamp(1.08rem,1.4vw,1.25rem);line-height:1.38}

/* com JS: um aceso, os outros em penumbra */
.tr-pronto .tr-pt,.tr-pronto .tr-clarao{display:block}
.tr-pronto .tr-fio{bottom:auto;height:calc(var(--tr-fim,100%) - .62rem)}
.tr-pronto .tr-sem .tr-pt{opacity:0}
.tr-pronto .tr-bt{cursor:pointer;color:rgb(239 234 226 / .5);transition:color .7s var(--suave), text-shadow .9s var(--suave)}
.tr-pronto .tr-bt:hover{color:rgb(239 234 226 / .8)}
.tr-pronto .tr-aceso .tr-bt{color:var(--marfim);text-shadow:0 0 2.4rem rgb(239 234 226 / .3)}
.tr-pronto .tr-grupo:not(.tr-grupo-aceso):not(.tr-ordem) .tr-grupo-cab{opacity:.72}
.tr-pronto .tr-grupo-aceso .tr-grupo-nome::before{width:1.7rem;background:var(--marfim)}
.tr-pronto .tr-item:not(.tr-aceso) .tr-painel{display:none}
.tr-pronto .tr-aceso .tr-painel{animation:tr-acende 1.1s var(--suave) both}
@keyframes tr-acende{from{opacity:0;filter:brightness(.4)}to{opacity:1;filter:none}}

@media (min-width:900px){
  .tr-pronto .tr-item{width:56%}
  /* o facho: do fim do nome até a descrição */
  .tr-pronto .tr-bt::after{content:"";flex:1 1 2rem;min-width:2rem;height:1px;background:linear-gradient(to right in oklab, transparent, var(--marfim-45));transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--suave)}
  .tr-pronto .tr-aceso .tr-bt::after{transform:none}
  .tr-pronto .tr-painel{position:absolute;left:calc(var(--tr-recuo) + (100% - var(--tr-recuo)) * .585);right:0;top:0;padding:0;max-width:none}
  .tr-pronto .tr-onde{display:flex;color:var(--marfim)}
  .tr-pronto .tr-onde::before{display:none}
  .tr-pronto .tr-onde + *{margin-top:1.5rem}
  .tr-pronto .tr-grupo-cab{width:56%}
  .tr-pronto .tr-ordem{width:58%;margin-top:10rem !important}
  .tr-pronto .tr-ordem .tr-grupo-cab{width:auto}
}
@media (max-width:899px){
  .tr-cab{grid-template-columns:1fr;gap:var(--e-4);margin-bottom:var(--e-5)}
  .tr-pt{width:1.3rem;height:1.3rem}
  .tr-pt::after{inset:.36rem}
  .tr-bt{padding:.7rem 0;font-size:clamp(1.8rem,7.4vw,2.2rem)}
  .tr-grupo-nome b{display:block;margin:0 0 .15rem}
}

/* terceiro marco: a ordem de cada pessoa sai da avaliação */
.tr-ordem{margin-top:var(--e-6) !important;padding-bottom:.2rem}
.tr-ordem-fala .wf-fala{font-size:clamp(1.45rem,2.7vw,2.35rem);line-height:1.22;max-width:21em;text-wrap:balance}
.tr-convite{display:flex;align-items:center;gap:var(--e-3) var(--e-4);flex-wrap:wrap;margin-top:var(--e-4)}
.tr-convite-nota{max-width:24rem}
@media (max-width:899px){.tr-ordem{margin-top:var(--e-5) !important}}

/* ===== dp ===== */
/* dp · O depois: o trilho vira linha do tempo; o ponto anda com a rolagem */
.dp{--dp-recuo:clamp(2.5rem,4.6vw,4.25rem);--dp-eixo:.8rem;--dp-alt:min(80vh,47rem)}
.dp-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(2.5rem,6vw,6rem);align-items:start}
.dp cite{font-style:normal}

.dp-cab{grid-column:1 / -1;margin-bottom:var(--e-6)}
.dp-cab .wf-rotulo{margin-bottom:var(--e-3)}
.dp-h2{color:var(--marfim-45);font-size:clamp(2.2rem,5.6vw,5.2rem);line-height:1.05;max-width:17em}
.dp-forte{color:var(--marfim)}
.dp-abre cite{margin-top:1.3rem}

/* a foto: presa enquanto a linha do tempo passa; a janela é a luz; ganha luz conforme o ponto avança */
.dp-foto{position:sticky;top:max(1.5rem, calc((100vh - var(--dp-alt)) / 2));margin:0;height:var(--dp-alt)}
.dp-quadro{display:block;height:100%;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 2%,#000 30%,#000 74%,transparent),linear-gradient(to bottom,transparent 3%,#000 30%,#000 58%,transparent 96%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 2%,#000 30%,#000 74%,transparent),linear-gradient(to bottom,transparent 3%,#000 30%,#000 58%,transparent 96%);mask-composite:intersect}
.dp-quadro img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:46% 30%;transform:scale(1.32);transform-origin:47% 35%;filter:grayscale(1) contrast(1.08) brightness(calc(.6 + .34 * var(--dp-p,1)));transition:filter .7s linear}
.dp-agora{position:absolute;left:14%;bottom:1.2rem;color:var(--marfim);display:none}

/* linha do tempo */
.dp-intro{padding-left:var(--dp-recuo)}
.dp-linha{position:relative;margin-top:var(--e-5);padding-left:var(--dp-recuo)}
.dp-fio{position:absolute;left:var(--dp-eixo);top:var(--dp-ini,2rem);bottom:0;width:1px;background:var(--marfim-18)}
.dp-fio::after{content:"";position:absolute;left:0;top:0;width:1px;height:calc(var(--dp-y,0px) - var(--dp-ini,0px));max-height:100%;background:linear-gradient(to bottom in oklab, var(--marfim-18), var(--marfim))}
.dp-pt{position:absolute;left:var(--dp-eixo);top:0;width:1.5rem;height:1.5rem;transform:translate(-50%,calc(var(--dp-y,2rem) - 50%));border-radius:50%;border:1px solid var(--marfim);background:rgb(17 17 19 / .82);box-shadow:0 0 0 .4rem rgb(239 234 226 / .06), 0 0 1.6rem rgb(239 234 226 / .32);display:none;will-change:transform}
.dp-pt::after{content:"";position:absolute;inset:.42rem;border-radius:50%;background:var(--mel)}
.dp-marcos{list-style:none;margin:0;padding:0}
.dp-marco{position:relative;padding-bottom:clamp(4.5rem,9vw,8rem);--dp-corpo:clamp(3rem,6.2vw,5.6rem)}
.dp-marco:last-child{padding-bottom:0}
.dp-marco::before{content:"";position:absolute;left:calc(var(--dp-eixo) - var(--dp-recuo));top:calc(var(--dp-corpo) * .5);width:1.15rem;height:1px;background:var(--marfim-70);transform:translate(-50%,-50%)}
.dp-quando{font-weight:400;line-height:1;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.dp-n{font-family:var(--f-titulo);font-size:var(--dp-corpo);line-height:1;letter-spacing:-.02em}
.dp-u{font-family:var(--f-texto);font-size:clamp(1.15rem,1.7vw,1.6rem);font-weight:300;color:var(--marfim)}
.dp-oque{font-size:var(--t-mini);color:var(--marfim-70);margin-top:.9rem}
.dp-marco > .wf-texto,.dp-marco > .wf-fala{margin-top:1.2rem}
.dp-dito{font-size:clamp(1.2rem,1.75vw,1.6rem);max-width:31rem}
.dp-paciente{font-size:clamp(1.02rem,1.2vw,1.12rem);color:var(--marfim-70);max-width:27rem;margin-top:1.6rem !important}
.dp-paciente .wf-fala-de{display:flex;align-items:center;gap:.7rem;margin-top:.5rem}
.dp-paciente .wf-fala-de::before{content:"";width:1.6rem;height:1px;background:var(--marfim-45);flex:none}
.dp-prata{font-family:var(--f-titulo);color:var(--marfim)}
.dp-saida{margin-top:var(--e-5);padding-left:var(--dp-recuo)}
.dp-fonte{margin-top:var(--e-3);padding-left:var(--dp-recuo);max-width:34rem}

/* com JS: o que o ponto ainda não alcançou fica em penumbra */
.dp-pronto .dp-pt{display:block}
.dp-pronto .dp-agora{display:flex}
.dp-pronto .dp-marco{transition:opacity 1.1s var(--suave)}
.dp-pronto .dp-marco:not(.dp-aceso){opacity:.6}
.dp-pronto .dp-marco:not(.dp-aceso) *{color:var(--marfim)}
.dp-pronto .dp-marco::before{transition:width .9s var(--suave), background-color .9s}
.dp-pronto .dp-aceso::before{width:1.7rem;background:var(--marfim)}

@media (max-width:899px){
  .dp{--dp-alt:auto}
  .dp-grade{grid-template-columns:1fr}
  .dp-cab{margin-bottom:var(--e-4)}
  .dp-foto{position:static;height:auto;margin:0 calc(var(--margem) * -1) var(--e-4)}
  .dp-quadro{height:auto;aspect-ratio:4/5;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 60%,transparent 98%);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 60%,transparent 98%)}
  .dp-quadro img{transform:scale(1.18);object-position:46% 26%;filter:grayscale(1) contrast(1.08) brightness(.92)}
  .dp-pronto .dp-agora{display:none}
  .dp-intro,.dp-fonte,.dp-saida{padding-left:0}
  .dp-pt{width:1.3rem;height:1.3rem}
  .dp-pt::after{inset:.36rem}
}

/* ===== av ===== */
/* av · Avaliações: 44 pontos de luz, as palavras que se repetem acendem quem as escreveu */
.av-topo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--e-5);align-items:end;margin-top:var(--e-5)}
.av-nota{display:flex;align-items:flex-end;gap:1.4rem}
.av-nota-n{font-family:var(--f-titulo);font-size:clamp(8.5rem,17vw,15.5rem);line-height:.78;letter-spacing:-.03em;color:var(--marfim)}
.av-nota-l{font-size:var(--t-mini);color:var(--marfim-70);line-height:1.5;padding-bottom:.35rem}
.av-abre .wf-texto{margin-top:var(--e-3);max-width:30rem}

/* o campo: um ponto por avaliação, da mais antiga à mais recente, agrupados por época;
   o tamanho acompanha o quanto a pessoa escreveu */
.av-campo{margin-top:var(--e-6)}
.av-pontos{position:relative;display:flex;height:3.5rem;margin-bottom:2rem}
.av-pontos::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(to right in oklab,var(--marfim-18),var(--marfim-08) 30%,var(--marfim-08) 70%,var(--marfim-18))}
.av-ano{position:relative;flex:var(--q) 1 0;display:flex;justify-content:space-around;align-items:center}
.av-ano::before{content:"";position:absolute;left:0;top:calc(50% - .45rem);width:1px;height:.9rem;background:var(--marfim-18)}
.av-ano b{position:absolute;left:0;top:calc(100% + .35rem);font-size:var(--t-rotulo);font-weight:500;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:var(--marfim-70)}
.av-p{position:relative;flex:none;width:calc(.24rem + var(--g,0) * .34rem);aspect-ratio:1;border-radius:50%;background:rgb(239 234 226 / .42);transition:background-color .8s var(--suave),transform .8s var(--suave),box-shadow .8s var(--suave);transition-delay:calc(var(--k,0) * 16ms)}
.av-p--cit{background:var(--marfim);box-shadow:0 0 0 .3rem rgb(239 234 226 / .07),0 0 1.4rem rgb(239 234 226 / .55)}
.av-filtrada .av-p{background:var(--marfim-18);box-shadow:none}
.av-filtrada .av-p.av-on{background:var(--marfim);transform:scale(1.4);box-shadow:0 0 0 .3rem rgb(239 234 226 / .08),0 0 1.5rem rgb(239 234 226 / .7)}
.av-eixo{display:none}

/* corpo: as palavras à esquerda (ficam à vista), as frases à direita */
.av-corpo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--e-5);margin-top:var(--e-6);align-items:start}
.av-lado{position:sticky;top:4.5rem}
.av-estado{font-size:var(--t-mini);color:var(--marfim-70);max-width:23rem;min-height:3.2em;margin-bottom:var(--e-3)}
.av-filtro{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem}
.av-palavra{appearance:none;background:none;border:0;padding:.1rem 0;min-height:2.75rem;cursor:pointer;display:inline-flex;align-items:center;gap:1.1rem;font-family:var(--f-titulo);font-size:calc(clamp(2.7rem,6.6vw,6.1rem) * var(--n,1));line-height:1.12;letter-spacing:-.012em;color:var(--marfim);white-space:nowrap;transition:color .5s var(--suave)}
.av-palavra:disabled{cursor:default}
.av-palavra i{flex:none;width:.62rem;height:.62rem;border-radius:50%;border:1px solid var(--marfim-45);transition:background-color .5s var(--suave),border-color .5s var(--suave),box-shadow .5s var(--suave)}
.av-palavra small{align-self:flex-start;margin-top:.45em;margin-left:-.6rem;font-family:var(--f-texto);font-size:.82rem;font-weight:500;letter-spacing:.06em;color:var(--marfim-70);transition:color .5s var(--suave)}
.av-palavra:not(:disabled):hover i{border-color:var(--marfim)}
.av-filtrada .av-palavra[aria-pressed="false"]{color:rgb(239 234 226 / .55)}
.av-filtrada .av-palavra[aria-pressed="false"]:hover{color:var(--marfim)}
.av-palavra[aria-pressed="true"] i{background:var(--mel);border-color:var(--mel);box-shadow:0 0 0 3px rgb(217 183 122 / .22),0 0 1.2rem rgb(217 183 122 / .5)}
.av-palavra--todas{margin-top:var(--e-3);font-family:var(--f-texto);font-size:var(--t-rotulo);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--marfim-70)}
.av-palavra--todas[aria-pressed="true"]{color:var(--marfim)}
.av-palavra--todas[aria-pressed="true"] i{background:var(--marfim);border-color:var(--marfim);box-shadow:0 0 .9rem rgb(239 234 226 / .5)}

/* as frases: uma coluna de leitura, curtas grandes, longas menores */
.av-frases{display:flex;flex-direction:column;gap:var(--e-5)}
.av-frase .wf-fala{font-size:clamp(1.2rem,1.75vw,1.6rem);transition:color .8s var(--suave)}
.av-frase--g .wf-fala{font-size:clamp(1.6rem,3vw,2.75rem);line-height:1.18;letter-spacing:-.008em}
.av-frase:nth-child(even){padding-left:14%}
.av-frase:nth-child(odd){padding-right:8%}
.av-frase .wf-fala-de{transition:color .8s var(--suave)}
.av-m{transition:color .8s var(--suave)}
.av-filtrada .av-frase:not(.av-on) .wf-fala,.av-filtrada .av-frase:not(.av-on) .wf-fala-de{color:rgb(239 234 226 / .55)}
.av-filtrada .av-m.av-on{color:var(--mel)}

.av-fim{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem var(--e-4);margin-top:var(--e-6);padding-top:var(--e-3);border-top:1px solid var(--marfim-18)}

@media (max-width:820px){
  .av-topo{grid-template-columns:1fr;gap:var(--e-4);margin-top:var(--e-4)}
  .av-nota{flex-direction:column;align-items:flex-start;gap:1.5rem}
  .av-nota-l br{display:none}
  .av-campo{margin-top:var(--e-5)}
  .av-pontos{height:3rem;margin-bottom:0}
  .av-ano b,.av-ano::before{display:none}
  .av-p{width:calc(.2rem + var(--g,0) * .2rem)}
  .av-p:nth-of-type(odd){top:-.5rem}
  .av-p:nth-of-type(even){top:.5rem}
  .av-eixo{display:flex;justify-content:space-between;margin-top:.4rem;font-size:var(--t-rotulo);letter-spacing:.2em;text-transform:uppercase;color:var(--marfim-70)}
  .av-corpo{grid-template-columns:1fr;gap:var(--e-4);margin-top:var(--e-4)}
  .av-lado{position:static}
  .av-estado{margin-bottom:var(--e-2)}
  .av-filtro{gap:0}
  .av-palavra{font-size:calc(3.1rem * var(--n,1));gap:.9rem}
  .av-palavra--todas{font-size:var(--t-rotulo);margin-top:var(--e-1)}
  .av-frases{gap:var(--e-4);padding-top:var(--e-2)}
  .av-frase:nth-child(n){padding-inline:0}
  .av-filtrada .av-frase:not(.av-on){order:2}
  .av-fim{margin-top:var(--e-5)}
}

/* ===== sb ===== */
/* ===== sb · Sobre (a única parede clara) ===== */
.sb{--sb-borda:calc(var(--margem) + max(0px, (100vw - 2 * var(--margem) - var(--largura)) / 2));padding-top:0;padding-bottom:calc(var(--secao) + clamp(3rem,7vw,6rem))}
/* emendas: a luz nasce de um ponto. No alto ela acende sobre o retrato (sombra em arco, mais demorada à direita);
   no fim ela baixa do lado oposto, para a seção grafite */
.sb::before,.sb::after{content:"";position:absolute;left:0;right:0;pointer-events:none}
.sb::before{z-index:1;top:0;height:clamp(9rem,22vw,20rem);-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 100%);mask-image:linear-gradient(to bottom,#000 45%,transparent 100%);background:radial-gradient(150% 120% at 26% 118%, rgb(11 11 12 / 0) 38%, rgb(11 11 12 / .07) 50%, rgb(11 11 12 / .24) 62%, rgb(11 11 12 / .52) 74%, rgb(11 11 12 / .82) 86%, rgb(11 11 12) 97%)}
.sb::after{z-index:-1;bottom:0;height:clamp(7rem,16vw,14rem);-webkit-mask-image:linear-gradient(to top,#000 45%,transparent 100%);mask-image:linear-gradient(to top,#000 45%,transparent 100%);background:radial-gradient(150% 120% at 74% -18%, rgb(17 17 19 / 0) 38%, rgb(17 17 19 / .07) 50%, rgb(17 17 19 / .24) 62%, rgb(17 17 19 / .52) 74%, rgb(17 17 19 / .82) 86%, rgb(17 17 19) 97%)}

.sb-grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2vw,2rem);row-gap:clamp(4rem,8vw,8rem);align-items:start}
/* retrato: sangra até a borda esquerda e até o alto; o fundo de estúdio se dissolve no papel */
.sb-retrato{grid-column:1 / span 6;grid-row:1;margin-left:calc(-1 * var(--sb-borda))}
.sb-retrato img{width:100%;aspect-ratio:1100 / 1640;object-fit:cover;object-position:50% 0;filter:grayscale(1) contrast(1.05);
  -webkit-mask-image:linear-gradient(to right,#000 62%,transparent 100%),linear-gradient(to bottom,#000 74%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,#000 62%,transparent 100%),linear-gradient(to bottom,#000 74%,transparent 100%);mask-composite:intersect}
.sb-abre{grid-column:8 / -1;grid-row:1;padding-top:clamp(11rem,24vw,21rem)}
.sb-titulo{font-size:clamp(2.6rem,6.2vw,5.9rem);line-height:1.02;margin-top:var(--e-3);margin-left:-.04em}
.sb-dela{margin-top:var(--e-3)}
.sb-coluna{margin-top:var(--e-5);display:grid;gap:var(--e-3);max-width:27rem}
.sb-fala{grid-column:2 / span 10;grid-row:2}
@media (min-width:1280px){.sb-fala{margin-top:-4.5rem}}
.sb-fala-texto{font-size:clamp(1.55rem,3.7vw,3.5rem);line-height:1.2;letter-spacing:-.012em;text-wrap:balance}
.sb-fala-de{margin-top:var(--e-3);display:flex;align-items:center;gap:.9rem}
.sb-fala-de::before{content:"";width:2.2rem;height:1px;background:var(--marfim-45);flex:none}
.sb-vida{grid-column:1 / -1;grid-row:3;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2vw,2rem);align-items:end}
.sb-vida-texto{grid-column:2 / span 7}
.sb-estrelas{font-size:clamp(1.7rem,3.7vw,3.5rem);line-height:1.12;letter-spacing:-.012em;max-width:11em;text-wrap:balance}
.sb-notas{margin-top:var(--e-5);display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem)}
.sb-notas p{padding-top:var(--e-2);border-top:1px solid var(--marfim-18)}
/* cópia fotográfica pequena, em pé */
.sb-lago{grid-column:10 / -1}
.sb-lago img{width:100%;aspect-ratio:4 / 5;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.sb-lago figcaption{margin-top:.6rem}

/* o gesto da seção: a sala começa em penumbra e acende quando o visitante chega (só com JS; sem JS já está acesa) */
.sb-penumbra{display:none;position:absolute;inset:0;z-index:2;pointer-events:none;background:rgb(11 11 12 / .62);transition:opacity 1.6s var(--suave)}
.sb-pronto .sb-penumbra{display:block}
.sb-aceso .sb-penumbra{opacity:0}

@media (max-width:820px){
  .sb-grade{row-gap:var(--e-5)}
  .sb-retrato,.sb-abre,.sb-fala,.sb-vida{grid-column:1 / -1;grid-row:auto}
  .sb-retrato{margin-right:calc(-1 * var(--sb-borda))}
  .sb-retrato img{aspect-ratio:4 / 5.2;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,#000 78%,transparent 100%)}
  .sb-abre{padding-top:0;margin-top:-4.5rem;position:relative}
  .sb-coluna{margin-top:var(--e-4)}
  .sb-vida{display:flex;flex-direction:column;align-items:stretch;gap:var(--e-5)}
  .sb-notas{grid-template-columns:1fr;margin-top:var(--e-4)}
  .sb-lago{width:62%;margin-left:auto}
}

/* ===== pg ===== */
/* pg · Perguntas: o trilho em pé; o ponto de luz desliza até a pergunta aberta */
.pg-grade{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--e-6);align-items:start}
.pg-abre{position:sticky;top:5rem}
.pg-abre .wf-h2{margin-top:var(--e-3)}
.pg-abre .wf-texto{margin-top:var(--e-3);max-width:24rem}
.pg-conta{color:var(--marfim)}
.pg-conta:not(:empty)::before{content:"·";margin-right:.9rem;color:var(--marfim-70)}
.pg-outra{margin-top:var(--e-4);display:flex;flex-wrap:wrap;align-items:center;gap:0 .9rem}

.pg-lista{position:relative;--recuo:3.6rem;padding-left:var(--recuo)}
/* o trilho em pé */
.pg-lista::before{content:"";position:absolute;left:.75rem;top:0;bottom:0;width:1px;background:linear-gradient(to bottom in oklab,var(--marfim-45),var(--marfim-18) 30%,var(--marfim-18) 70%,var(--marfim-45))}
/* a luz nasce do ponto e anda com ele */
.pg-foco{position:absolute;z-index:-1;left:.75rem;top:0;width:62rem;height:34rem;margin:-17rem 0 0 -22rem;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side in oklab,rgb(185 182 177 / .2),rgb(185 182 177 / .07) 55%,transparent);transform:translateY(var(--y,3rem));opacity:var(--o,1);transition:transform 1.1s var(--suave),opacity 1.1s var(--suave)}
.pg-viajante{display:none;position:absolute;z-index:2;left:.75rem;top:0;width:1.5rem;height:1.5rem;margin:-.75rem 0 0 -.75rem;border-radius:50%;border:1px solid var(--marfim);background:rgb(17 17 19 / .82);box-shadow:0 0 0 .4rem rgb(239 234 226 / .06),0 0 1.6rem rgb(239 234 226 / .32);pointer-events:none;transform:translateY(var(--y,3rem));opacity:var(--o,1);transition:transform 1.1s var(--suave),opacity .8s var(--suave)}
.pg-viajante::after{content:"";position:absolute;inset:.42rem;border-radius:50%;background:var(--mel)}
.pg-viva .pg-viajante{display:block}

.pg-q{margin:0;font:inherit}
.pg-b{position:relative;appearance:none;background:none;border:0;width:100%;text-align:left;cursor:pointer;display:block;padding:.95rem 0;min-height:3rem;color:rgb(239 234 226 / .6);transition:color .7s var(--suave)}
/* marco de cada pergunta no trilho */
.pg-b::before{content:"";position:absolute;left:calc(.75rem - var(--recuo) - .3rem);top:calc(.95rem + .6em * 1.2);width:.6rem;height:1px;background:var(--marfim-45);font-size:clamp(1.2rem,1.7vw,1.6rem)}
.pg-t{display:block;font-family:var(--f-titulo);font-size:clamp(1.2rem,1.7vw,1.6rem);line-height:1.2;transition:font-size .75s var(--suave)}
.pg-b:hover,.pg-b:focus-visible{color:var(--marfim)}
.pg-b[aria-expanded="true"]{color:var(--marfim)}
.pg-b[aria-expanded="true"] .pg-t{font-size:clamp(1.75rem,2.9vw,2.7rem);max-width:16em;text-wrap:balance}
.pg-viva .pg-b[aria-expanded="true"]{padding-top:1.5rem}
.pg-item:first-child .pg-b{padding-top:0}

.pg-r{display:grid;grid-template-rows:1fr}
.pg-r-dentro{min-height:0;overflow:hidden;padding-right:var(--e-5);display:flex;flex-direction:column;gap:var(--e-3)}
.pg-r-dentro > :first-child{margin-top:var(--e-2)}
.pg-r-dentro > :last-child{margin-bottom:var(--e-5)}
.pg-viva .pg-item:not(.pg-aberta) .pg-r{grid-template-rows:0fr;visibility:hidden}
.pg-viva .pg-item:not(.pg-aberta) .pg-r-dentro{opacity:0;filter:brightness(.3)}
.pg-pronta .pg-r{transition:grid-template-rows .75s var(--suave),visibility 0s .75s}
.pg-pronta .pg-aberta .pg-r{transition:grid-template-rows .75s var(--suave),visibility 0s 0s}
.pg-pronta .pg-r-dentro{transition:opacity .5s var(--suave),filter .5s var(--suave)}
.pg-pronta .pg-aberta .pg-r-dentro{transition:opacity .9s .2s var(--suave),filter 1.5s .2s var(--suave)}
.pg-pronta .pg-b{transition:color .7s var(--suave),padding .75s var(--suave)}

.pg-r .wf-fala{font-size:clamp(1.15rem,1.6vw,1.5rem);max-width:36rem}
.pg-r .wf-fala + .wf-fala{margin-top:.5rem}
.pg-r .wf-texto,.pg-r .wf-mini{max-width:34rem}
.pg-r .pg-maior{font-size:var(--t-compl);font-weight:300;line-height:1.5;color:var(--marfim)}
.pg-r q{font-family:var(--f-titulo);quotes:"“" "”"}
.pg-prazos{display:flex;flex-direction:column;gap:var(--e-3);max-width:44rem}
.pg-prazo-linha{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem var(--e-3);padding-top:var(--e-2);border-top:1px solid var(--marfim-18)}
.pg-prazos dt{grid-column:1 / -1;font-size:var(--t-rotulo);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--marfim-70)}
.pg-prazos dd b{display:block;font-family:var(--f-titulo);font-weight:400;font-size:clamp(1.45rem,2.3vw,2.15rem);line-height:1.15;color:var(--marfim);white-space:nowrap}
.pg-prazos dd span{display:block;margin-top:.3rem;font-size:var(--t-mini);color:var(--marfim-70);line-height:1.4}

@media (max-width:820px){
  .pg-grade{grid-template-columns:1fr;gap:var(--e-5)}
  .pg-abre{position:static}
  .pg-lista{--recuo:2.6rem}
  .pg-r-dentro{padding-right:0}
  .pg-prazo-linha{grid-template-columns:1fr 1fr;gap:var(--e-2)}
  .pg-r .wf-fala{font-size:1.1rem}
  .pg-outra{margin-top:var(--e-2)}
  .pg-foco{width:44rem;height:26rem;margin:-13rem 0 0 -14rem}
}

/* ===== on ===== */
/* ===== on · Onde e quando ===== */
.on{--on-t:clamp(3.4rem,10vw,9.4rem);--on-qh:clamp(19rem,32vw,29rem);--on-qw:calc(var(--on-qh) * 560 / 520)}
.on-grade{display:grid;row-gap:clamp(3.5rem,7vw,6.5rem)}
.on-titulo{font-size:var(--on-t);line-height:.95;letter-spacing:-.02em;margin-left:-.03em;white-space:nowrap;width:max-content;max-width:100%}
/* o palco: o título é o rótulo do ponto. O mapa fica ancorado no meio das letras do título:
   a via sai do "303" e chega ao ponto em mel (o ponto está a 280/520 da altura do desenho) */
.on-palco{position:relative;margin-top:var(--e-3);min-height:calc(var(--on-t) * .475 + var(--on-qh) * .462 + 7.5rem)}
.on-linha{margin-top:var(--e-3)}
.on-notas{list-style:none;margin:var(--e-2) 0 0;padding:0;display:grid;gap:.15rem}
.on-acoes{margin-top:var(--e-4);display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-4)}
.on-abre > .wf-rotulo,.on-titulo,.on-linha,.on-notas,.on-acoes{position:relative;z-index:1}
.on-linha,.on-notas{max-width:calc(100% - var(--on-qw) - 2rem)}

.on-mapa{position:absolute;right:0;top:calc(var(--on-t) * .475 - var(--on-qh) * .5385 + .03 * var(--on-t));width:var(--on-qw)}
.on-luz{left:calc(100% - var(--on-qw) / 2);top:calc(var(--on-t) * .5);width:max(46vmax,34rem);--c:rgb(185 182 177 / .13)}
.on-quadro{position:relative;aspect-ratio:560 / 520}
.on-desenho{position:absolute;inset:0}
.on-desenho[hidden]{display:none}
.on-desenho svg{display:block;width:100%;height:100%;overflow:visible}
.on-halo{transform-box:fill-box;transform-origin:center;animation:on-respira 6s ease-in-out infinite alternate}
@keyframes on-respira{from{opacity:.65;transform:scale(.9)}to{opacity:1;transform:scale(1.08)}}
.on-r{position:absolute;font-size:var(--t-rotulo);font-weight:500;letter-spacing:.2em;line-height:1.5;text-transform:uppercase;color:var(--marfim-70);white-space:nowrap}
.on-r-parque{text-align:right}
.on-r-bairro{transform:translateX(-50%);letter-spacing:.34em;margin-left:.17em}
.on-quadro iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05);background:var(--grafite-1)}
.on-quadro iframe[hidden]{display:none}
.on-sob{margin-top:var(--e-2);padding-top:var(--e-2);border-top:1px solid var(--marfim-18);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.25rem var(--e-3)}
.on-sob-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--e-3)}
.on-carregar{min-height:3rem;padding:0;border:0;background:linear-gradient(var(--marfim-45),var(--marfim-45)) 0 calc(50% + .85em)/100% 1px no-repeat;font-size:.95rem;color:var(--marfim);cursor:pointer}
.on-carregar:hover{background-image:linear-gradient(var(--marfim),var(--marfim))}

/* quando */
.on-quando{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2vw,2rem);align-items:end;padding-top:clamp(2.5rem,5vw,4.5rem);border-top:1px solid var(--marfim-18)}
.on-viva{grid-column:1 / span 6}
.on-agora{margin-top:var(--e-3);font-family:var(--f-titulo);font-size:clamp(1.7rem,3.5vw,3.3rem);line-height:1.1;letter-spacing:-.012em;text-wrap:balance;max-width:11em}
.on-extenso{margin-top:var(--e-3)}
.on-fonte{margin-top:.35rem}
.on-semana{--on-alto:7.5rem;grid-column:8 / -1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));position:relative}
.on-semana::before{content:"";position:absolute;left:0;right:0;top:calc(var(--on-alto) + 1.4rem);height:1px;background:linear-gradient(to right in oklab, var(--marfim-45), var(--marfim-18) 35%, var(--marfim-18) 65%, var(--marfim-45))}
.on-semana li{position:relative;padding-top:calc(var(--on-alto) + 2.2rem)}
.on-semana li > i{position:absolute;left:0;top:calc(1.4rem + (1 - var(--h) - var(--d,0)) * var(--on-alto));width:1px;height:calc(var(--h) * var(--on-alto));background:var(--marfim-45)}
.on-semana li > i em{position:absolute;left:0;bottom:calc(100% + .3rem);font-style:normal;font-size:var(--t-rotulo);letter-spacing:.08em;color:var(--marfim-70);white-space:nowrap}
.on-semana li > i em.on-pe{bottom:.05rem;left:.45rem;line-height:1}
.on-semana li b{font-size:var(--t-rotulo);font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.on-semana .on-fechado b{color:var(--marfim-70)}
.on-semana .on-fechado::after{content:"";position:absolute;left:-2px;top:calc(var(--on-alto) + 1.4rem - 2px);width:5px;height:5px;border-radius:50%;background:var(--marfim-18)}
.on-semana .on-hoje b{color:var(--mel)}
.on-semana .on-hoje > i{background:var(--marfim)}
/* o ponto de luz: a hora de agora no dia de hoje (base = abre, topo = fecha) */
.on-semana .on-hoje.on-aberto > i::after{content:"";position:absolute;left:50%;bottom:calc(var(--agora,.5) * 100%);width:.62rem;height:.62rem;border-radius:50%;transform:translate(-50%,50%);background:var(--mel);box-shadow:0 0 0 3px rgb(217 183 122 / .22), 0 0 1.2rem rgb(217 183 122 / .5)}

@media (max-width:820px){
  .on{--on-t:clamp(3rem,16.6vw,6rem)}
  .on-palco{min-height:0}
  .on-linha,.on-notas{max-width:none}
  .on-mapa{position:static;width:auto;margin-top:var(--e-5)}
  .on-luz{left:50%;top:70%}
  .on-quando{display:block}
  .on-semana{margin-top:var(--e-5);--on-alto:6rem}
}

/* ===== fe ===== */
/* ===== fe · Fecho ===== */
.fe{padding-top:var(--e-5);padding-bottom:0;--fe-s:0}
.fe-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(2rem,6vw,6rem);align-items:end}

/* retrato: figura até o chão da seção, foco de estúdio atrás, sombra que sai do rosto */
.fe-foto{position:relative;align-self:end;width:min(100%,30rem);justify-self:end}
.fe-foto img{-webkit-mask-image:linear-gradient(#000 46%,rgb(0 0 0 / .3) 70%,transparent 92%);mask-image:linear-gradient(#000 46%,rgb(0 0 0 / .3) 70%,transparent 92%)}
.fe-foto img{position:relative;width:100%;aspect-ratio:945/1560;object-fit:cover;object-position:top}
.fe-foco{position:absolute;left:52%;top:24%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side in oklab, rgb(185 182 177 / .32), rgb(185 182 177 / .09) 48%, transparent 92%);pointer-events:none;transition:transform 1.9s var(--suave), opacity 1.9s var(--suave)}
/* a sombra usa a própria foto como máscara: escurece só a figura, do lado oposto ao da luz */
.fe-sombra{position:absolute;inset:0;pointer-events:none;opacity:var(--fe-s);transition:opacity 1.9s var(--suave);
  background:linear-gradient(to right in oklab, transparent 22%, rgb(11 11 12 / .5) 40%, rgb(11 11 12 / .93) 58%);
  -webkit-mask-image:url(../img/fe-retrato.webp);mask-image:url(../img/fe-retrato.webp);-webkit-mask-size:100% auto;mask-size:100% auto;-webkit-mask-position:top;mask-position:top;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.fe-legenda{position:absolute;left:0;right:0;bottom:calc(var(--secao) - .35rem);padding-right:1rem}
.fe-fala{font-size:clamp(1.25rem,1.9vw,1.7rem);line-height:1.3;max-width:13em;text-wrap:balance}

.fe-txt{padding-bottom:var(--secao)}
.fe-titulo{margin-top:var(--e-3);font-size:clamp(2.3rem,5vw,4.7rem);line-height:1.05;max-width:9.5em}
.fe-compl{margin-top:var(--e-3);color:var(--marfim-70);max-width:27rem}
/* o trilho do hero: três marcos, o ponto parado no do meio */
.fe-marcos{margin-top:var(--e-4);max-width:38rem}
.fe-trilho{background:linear-gradient(var(--marfim-45),var(--marfim-45)) 0 50%/1px .6rem no-repeat, linear-gradient(var(--marfim-45),var(--marfim-45)) 100% 50%/1px .6rem no-repeat}
.fe-trilho > i{transition:left 1.9s var(--suave)}
.fe-nomes{display:grid;grid-template-columns:1fr auto 1fr;font-size:var(--t-rotulo);letter-spacing:.2em;text-transform:uppercase;color:var(--marfim-70);margin-top:.35rem}
.fe-nomes span:last-child{text-align:right}
.fe-botao{margin-top:var(--e-4);min-height:3.75rem;padding:1.15rem 2.1rem 1.15rem 1.6rem;font-size:1.06rem}
.fe-servico{margin-top:var(--e-4);padding-top:var(--e-3);border-top:1px solid var(--marfim-18);display:grid;grid-template-columns:auto auto;justify-content:space-between;column-gap:var(--e-4);max-width:38rem}
.fe-servico dt{font-size:var(--t-rotulo);letter-spacing:.2em;text-transform:uppercase;color:var(--marfim-70);margin-bottom:.35rem}
.fe-fone{font-family:var(--f-titulo);font-size:clamp(1.7rem,2.5vw,2.3rem);line-height:1.2;text-decoration:none;display:inline-flex;align-items:center;min-height:2.75rem;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;background:linear-gradient(var(--mel),var(--mel)) 0 100%/0 1px no-repeat;transition:background-size .5s var(--suave)}
.fe-fone:hover,.fe-fone:focus-visible{background-size:100% 1px}
.fe-hora{color:var(--marfim);line-height:1.55;padding-top:.35rem}

/* gesto único (só com JS): a luz chega de lado, metade do rosto na sombra, e volta ao ponto certo */
.fe-espera{--fe-s:1}
.fe-espera .fe-foco{transform:translate(-92%,-50%);opacity:.5}
.fe-espera .fe-trilho > i{left:4%}

@media (max-width:820px){
  .fe{padding-top:var(--e-3)}
  .fe-grade{grid-template-columns:1fr}
  .fe-foto{order:-1;width:100%;max-width:24rem;justify-self:center}
  .fe-foto img{aspect-ratio:945/1240}
  .fe-foto img{-webkit-mask-image:linear-gradient(#000 48%,rgb(0 0 0 / .3) 68%,transparent 88%);mask-image:linear-gradient(#000 48%,rgb(0 0 0 / .3) 68%,transparent 88%)}
  .fe-legenda{bottom:0}
  .fe-txt{padding-bottom:var(--e-6);margin-top:var(--e-4)}
  .fe-botao{width:100%;justify-content:center}
  .fe-servico{grid-template-columns:1fr;row-gap:var(--e-3)}
}

/* ===== ajustes da montagem ===== */
/* o "1" da Prata tem desenho de "I": só esse numeral vem de outra didone (Playfair Display), hospedada */
@font-face{font-family:"WF Um";src:url(../fontes/um.woff2) format("woff2");unicode-range:U+31;font-display:swap}
:root{--f-titulo:"WF Um","Prata","Times New Roman",serif}
/* emendas: as paredes grafite nascem e morrem no preto das vizinhas */
.dp.wf-grafite{background:linear-gradient(to bottom in oklab, var(--preto), var(--grafite-0) 14rem, var(--grafite-0) calc(100% - 14rem), var(--preto))}
.pg.wf-grafite{background:linear-gradient(to bottom in oklab, var(--grafite-0) calc(100% - 12rem), var(--preto))}
.wf-trilho > i{z-index:1}
/* rótulos legíveis no celular */
@media (max-width:820px){:root{--t-rotulo:.8125rem}}

/* ===== rodapé ===== */
.ro{background:var(--preto);color:var(--marfim);padding:var(--e-5) var(--margem) calc(var(--e-5) + 3rem)}
.ro-dentro{max-width:var(--largura);margin-inline:auto}
.ro-trilho{margin-bottom:var(--e-5)}
.ro-grade{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.1fr);gap:var(--e-4)}
.ro-nome{font-family:var(--f-titulo);font-size:1.6rem;line-height:1.2;margin-bottom:.6rem}
.ro-linha{font-size:var(--t-rotulo);letter-spacing:.16em;text-transform:uppercase;color:var(--marfim-70);line-height:1.9}
.ro-nav{display:grid;grid-template-columns:1fr 1fr;gap:.1rem 1.5rem;align-content:start}
.ro-nav a,.ro-contato a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none;color:var(--marfim-70);font-size:.95rem;transition:color .3s}
.ro-nav a:hover,.ro-contato a:hover{color:var(--marfim)}
.ro-contato{font-style:normal;display:flex;flex-direction:column;align-items:flex-start;color:var(--marfim-70);font-size:.95rem}
.ro-contato span{margin-bottom:.6rem;line-height:1.6}
.ro-aviso{margin-top:var(--e-5);padding-top:var(--e-3);border-top:1px solid var(--marfim-18);font-size:var(--t-mini);color:var(--marfim-70);max-width:44rem}
.ro-selo{margin-top:var(--e-2);font-size:var(--t-mini);color:var(--marfim-70)}
.ro-selo a{color:var(--marfim);text-underline-offset:.25em;text-decoration-color:var(--mel)}
@media (max-width:820px){.ro-grade{grid-template-columns:1fr}.ro{padding-bottom:6.5rem}}

/* ===== ajuste geral: movimento reduzido (fica no fim do último CSS) ===== */
@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}
  .wf-js [data-entra]{opacity:1 !important;transform:none !important;filter:none !important}
}