/* Hero B aprovado em 07/10/2026, copiado sem ajustes de 03-heros/b/ */
:root{
  /* cor: tirada do retrato de estúdio e do logo dourado da parede */
  --grafite-900:#0d1618;   /* pé da foto */
  --grafite-800:#141b1c;
  --grafite-700:#182122;   /* fundo da foto */
  --grafite-600:#1c2629;   /* topo da foto */
  --grafite-500:#202a2e;
  --ouro:#c8a45a;          /* letras do logo */
  --ouro-claro:#e9d7a6;
  --ouro-fundo:#a8853f;
  --petroleo:#1f6f7a;      /* a calça dela, no outro retrato */
  --marfim:#efe9dc;
  --nevoa:#a7b0ae;
  --linha:rgba(200,164,90,.28);

  /* tipografia */
  --f-titulo:"Cinzel","Times New Roman",serif;
  --f-texto:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-titulo:clamp(1.9rem,9.3vw,2.75rem);
  --t-frase:clamp(1.05rem,4.9vw,1.3rem);
  --t-texto:.92rem;
  --t-mini:.72rem;

  /* espaço */
  --margem:20px;
  --vao:56px;              /* distância entre as duas metades, com o filete no meio */
  --eixo:54.3%;            /* onde o filete cruza a foto: o vão entre as duas cabeças */
  --foto-prop:1087/1600;

  --sai:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grafite-800);color:var(--marfim);font-family:var(--f-texto);font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
p,h1,figure,blockquote{margin:0}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ============ HERO ============ */
.hb{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:0 var(--margem) 30px}

/* ---- fundo: malha em OKLCH que respira ---- */
.hb-fundo{position:absolute;inset:0;z-index:-3;overflow:hidden;
  background:linear-gradient(in oklch to bottom,var(--grafite-600) 0%,var(--grafite-700) 26%,oklch(.219 .014 212.8) 52%,var(--grafite-900) 100%)}
.hb-mancha{position:absolute;border-radius:50%;will-change:transform}
.hb-mancha--ouro{left:-38%;top:2%;width:120vmax;height:120vmax;max-width:1500px;max-height:1500px;
  background:radial-gradient(closest-side in oklch,oklch(.736 .102 83.9 / .15) 0%,oklch(.636 .098 82.6 / .07) 38%,oklch(.4 .05 120 / 0) 100%);
  animation:hb-respira-a 31s ease-in-out infinite alternate}
.hb-mancha--claro{left:14%;top:-34%;width:105vmax;height:105vmax;max-width:1400px;max-height:1400px;
  background:radial-gradient(closest-side in oklch,oklch(.277 .016 224.2 / .85) 0%,oklch(.26 .015 218 / .4) 45%,oklch(.239 .013 204.7 / 0) 100%);
  animation:hb-respira-b 27s ease-in-out infinite alternate}
.hb-mancha--petroleo{right:-16%;bottom:-20%;width:64vmax;height:64vmax;max-width:820px;max-height:820px;
  background:radial-gradient(closest-side in oklch,oklch(.5 .076 208.4 / .3) 0%,oklch(.38 .05 210 / .12) 46%,oklch(.22 .014 212 / 0) 100%);
  animation:hb-respira-c 35s ease-in-out infinite alternate}
.hb-mancha--sombra{left:-20%;bottom:-46%;width:110vmax;height:80vmax;
  background:radial-gradient(closest-side in oklch,oklch(.17 .012 212 / .8) 0%,oklch(.19 .014 212 / 0) 100%);
  animation:hb-respira-b 33s ease-in-out infinite alternate-reverse}
@keyframes hb-respira-a{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(6%,5%,0) scale(1.12)}}
@keyframes hb-respira-b{from{transform:translate3d(4%,0,0) scale(1.06)}to{transform:translate3d(-5%,6%,0) scale(1)}}
@keyframes hb-respira-c{from{transform:translate3d(0,4%,0) scale(.94)}to{transform:translate3d(-8%,-6%,0) scale(1.1)}}

/* granulado fino por cima de tudo, foto inclusive */
.hb-grao{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.075;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px}
.hb-grao::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px}

/* ---- o filete do logo ---- */
.hb-filete{position:relative;display:block;width:2px;overflow:hidden;transform-origin:50% 0;
  background:linear-gradient(in oklch to bottom,var(--ouro-claro),var(--ouro) 40%,var(--ouro-fundo))}
.hb-eixo{display:none}
.hb-filete::after{content:"";position:absolute;left:0;right:0;top:0;height:90px;
  background:linear-gradient(to bottom,rgba(255,250,232,0),rgba(255,250,232,.95) 50%,rgba(255,250,232,0));
  transform:translateY(-100px);animation:hb-brilho 11s cubic-bezier(.45,0,.55,1) infinite}
@keyframes hb-brilho{0%,8%{transform:translateY(-100px)}62%,100%{transform:translateY(var(--curso,700px))}}

/* ---- navegação ---- */
.hb-nav{width:100%;display:flex;align-items:center;justify-content:space-between;padding:18px 0 0;z-index:4;animation:hb-surge .9s var(--sai) .1s both}
.hb-marca{display:flex;align-items:center;gap:10px;font-family:var(--f-titulo);line-height:1}
.hb-marca b{font-weight:600;font-size:1.02rem;letter-spacing:.2em;color:var(--ouro-claro)}
.hb-marca i{display:block;width:1px;height:26px;background:var(--ouro)}
.hb-marca span{font-family:var(--f-titulo);font-size:.56rem;letter-spacing:.2em;line-height:1.5;text-transform:uppercase;color:var(--nevoa)}
.hb-nav ul{display:none;list-style:none;margin:0;padding:0;gap:34px}
.hb-nav ul a{font-family:var(--f-titulo);font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--nevoa);padding:8px 0;transition:color .3s}
.hb-nav ul a:hover,.hb-nav ul a:focus-visible{color:var(--ouro-claro)}
.hb-local{font-family:var(--f-titulo);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--nevoa)}

/* ---- título ---- */
.hb-titulo{z-index:3;margin-top:16px;text-align:center;font-family:var(--f-titulo);font-weight:500;font-size:var(--t-titulo);line-height:1.08;letter-spacing:.045em;text-transform:uppercase}
.hb-titulo span{display:block;color:var(--ouro);
  background:linear-gradient(176deg in oklch,#f3e7c2 8%,#dcc085 34%,var(--ouro) 56%,#b08c46 78%,#d6b877 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(8,12,13,.55)) drop-shadow(0 6px 22px rgba(8,12,13,.55))}
.hb-t-esq{animation:hb-da-esquerda 1.5s var(--sai) .55s both}
.hb-t-dir{animation:hb-da-direita 1.5s var(--sai) .55s both}
.hb-atrib{z-index:3;margin-top:10px;font-size:var(--t-mini);letter-spacing:.04em;color:var(--nevoa);text-align:center;animation:hb-surge 1.1s var(--sai) 1.25s both}
.hb-atrib::before{content:"";display:inline-block;width:18px;height:1px;background:var(--ouro);vertical-align:middle;margin-right:9px}

/* ---- foto: as duas metades se encontram no filete ---- */
.hb-foto{position:relative;z-index:1;flex:none;width:min(100vw,30rem);aspect-ratio:var(--foto-prop);
  margin-top:0;margin-bottom:calc(min(100vw,30rem) * -0.665);
  left:calc(min(100vw,30rem) * -0.043)}
.hb-foto-mascara{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 15%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 5%,#000 40%,rgba(0,0,0,.5) 50%,transparent 60%);
  mask-image:linear-gradient(to right,transparent 0,#000 15%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 5%,#000 40%,rgba(0,0,0,.5) 50%,transparent 60%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.hb-metade{position:absolute;inset:0}
.hb-metade img{display:block;width:100%;height:100%;object-fit:cover}
.hb-metade--ele{clip-path:inset(0 calc(100% - var(--eixo) - .5px) 0 0);animation:hb-foto-esq 1.7s var(--sai) .2s both}
.hb-metade--ela{clip-path:inset(0 0 0 calc(var(--eixo) - .5px));animation:hb-foto-dir 1.7s var(--sai) .2s both}
.hb-foto .hb-filete{position:absolute;left:var(--eixo);top:1.5%;height:14.6%;margin-left:-1px;--curso:140px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 70%,transparent 100%);
  animation:hb-desce .8s var(--sai) .15s both}
.hb-foto .hb-filete::after{animation-name:hb-brilho-alto}
@keyframes hb-brilho-alto{0%{transform:translateY(-100px)}14%,100%{transform:translateY(var(--curso))}}

/* ---- os dois ---- */
.hb-dupla{z-index:3;width:100%;max-width:27rem;display:grid;grid-template-columns:1fr 2px 1fr;column-gap:16px;align-items:stretch}
.hb-dupla > .hb-filete{margin-top:-46px;--curso:320px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 46px);mask-image:linear-gradient(to bottom,transparent 0,#000 46px);
  animation:hb-desce 1.1s var(--sai) .75s both}
.hb-lado{padding:2px 0 4px}
.hb-lado--ele{text-align:right;animation:hb-da-esquerda 1.4s var(--sai) .95s both}
.hb-lado--ela{text-align:left;animation:hb-da-direita 1.4s var(--sai) .95s both}
.hb-nome{font-family:var(--f-titulo);font-weight:500;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro-claro);line-height:1.35}
.hb-nome span{display:block}
.hb-cro{margin-top:3px;font-size:.68rem;letter-spacing:.08em;color:var(--nevoa);font-variant-numeric:tabular-nums}
.hb-frase{margin-top:12px;font-weight:300;font-size:var(--t-frase);line-height:1.2;letter-spacing:-.005em;color:var(--marfim)}
.hb-atua{margin-top:7px;font-size:.76rem;line-height:1.5;color:var(--nevoa)}

/* ---- apoio, ação, prova ---- */
.hb-apoio{z-index:3;margin-top:18px;max-width:27rem;text-align:center;font-size:var(--t-texto);font-weight:300;line-height:1.6;color:#d4d3ca;animation:hb-surge 1.2s var(--sai) 1.35s both}
.hb-acoes{z-index:3;margin-top:16px;width:100%;max-width:27rem;display:flex;flex-direction:column;align-items:center;gap:12px;animation:hb-surge 1.2s var(--sai) 1.5s both}
.hb-botao{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;padding:0 26px;border-radius:2px;
  font-weight:600;font-size:.95rem;letter-spacing:.01em;color:#141b1c;
  background:linear-gradient(176deg in oklch,#f0e2b8 0%,#d9bc7c 42%,var(--ouro) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 14px 34px -14px rgba(200,164,90,.55);transition:transform .35s var(--sai),box-shadow .35s var(--sai),filter .35s}
.hb-botao svg{width:19px;height:19px;flex:none;fill:currentColor}
.hb-botao:hover,.hb-botao:focus-visible{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 20px 40px -14px rgba(200,164,90,.7)}
.hb-segunda{display:inline-flex;align-items:center;gap:8px;padding:8px 2px;font-size:.86rem;color:var(--marfim);border-bottom:1px solid var(--linha);transition:border-color .3s,color .3s}
.hb-segunda:hover,.hb-segunda:focus-visible{border-color:var(--ouro);color:var(--ouro-claro)}
.hb-segunda svg{width:12px;height:12px;stroke:var(--ouro);fill:none;stroke-width:1.6}
a:focus-visible{outline:1px solid var(--ouro-claro);outline-offset:4px}

.hb-prova{z-index:3;margin-top:26px;padding-top:18px;width:100%;max-width:27rem;border-top:1px solid rgba(200,164,90,.16);text-align:center;animation:hb-surge 1.2s var(--sai) 1.7s both}
.hb-prova blockquote{font-size:.86rem;font-weight:300;line-height:1.5;color:var(--marfim)}
.hb-prova figcaption{margin-top:8px;font-size:var(--t-mini);letter-spacing:.04em;color:var(--nevoa)}
.hb-prova figcaption b{font-weight:500;color:var(--ouro-claro)}
.hb-prova .hb-ponto{display:inline-block;margin:0 7px;color:var(--ouro)}

/* ---- entrada ---- */
@keyframes hb-surge{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hb-da-esquerda{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
@keyframes hb-da-direita{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}
@keyframes hb-foto-esq{from{opacity:0;transform:translateX(-5%)}to{opacity:1;transform:none}}
@keyframes hb-foto-dir{from{opacity:0;transform:translateX(5%)}to{opacity:1;transform:none}}
@keyframes hb-desce{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ============ DESKTOP ============ */
@media (min-width:900px){
  :root{
    --margem:clamp(32px,4vw,64px);
    --vao:clamp(48px,5vw,76px);
    --hero-a:max(100svh,700px);
    --foto-a:calc(var(--hero-a) * 1.05);
    --foto-l:calc(var(--foto-a) * 0.679375);
    --t-titulo:clamp(2.4rem,min(4.25vw,7.6svh),4.4rem);
    --t-frase:clamp(1.3rem,1.85vw,1.75rem);
    --t-texto:1rem;
    --t-mini:.78rem;
  }
  .hb{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--vao);grid-template-rows:auto 1fr auto auto auto auto;align-items:start;height:var(--hero-a);min-height:0;padding:0 var(--margem) 34px}

  .hb-nav{grid-column:1/-1;grid-row:1;padding-top:26px}
  .hb-nav ul{display:flex}
  .hb-local{display:none}
  .hb-marca b{font-size:1.18rem}
  .hb-marca i{height:30px}
  .hb-marca span{font-size:.6rem}

  .hb-foto{position:absolute;top:calc(var(--hero-a) * .022);left:calc(50% - var(--foto-l) * .543);width:var(--foto-l);height:var(--foto-a);aspect-ratio:auto;margin:0}
  .hb-foto-mascara{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 17%,#000 85%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 5%,#000 50%,rgba(0,0,0,.52) 62%,rgba(0,0,0,.2) 74%,rgba(0,0,0,.05) 82%,transparent 88%);
    mask-image:linear-gradient(to right,transparent 0,#000 17%,#000 85%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 5%,#000 50%,rgba(0,0,0,.52) 62%,rgba(0,0,0,.2) 74%,rgba(0,0,0,.05) 82%,transparent 88%)}
  .hb-foto .hb-filete{top:-3%;height:19%;--curso:240px;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 74%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 74%,transparent 100%)}

  .hb-dupla{grid-column:1/-1;grid-row:2;align-self:center;max-width:none;grid-template-columns:1fr 1fr;column-gap:calc(var(--foto-l) * .98);margin-top:calc(var(--hero-a) * -.05)}
  .hb-dupla > .hb-filete{display:none}
  .hb-lado{padding:0}
  .hb-lado--ele{justify-self:end}
  .hb-lado--ela{justify-self:start}
  .hb-nome{font-size:.92rem;letter-spacing:.16em}
  .hb-nome span{display:inline}
  .hb-cro{font-size:.74rem;margin-top:5px}
  .hb-frase{margin-top:20px;padding-top:20px;position:relative}
  .hb-frase::before{content:"";position:absolute;top:0;width:34px;height:1px;background:var(--ouro)}
  .hb-lado--ele .hb-frase::before{right:0}
  .hb-lado--ela .hb-frase::before{left:0}
  .hb-atua{margin-top:10px;font-size:.88rem}

  .hb-titulo{grid-column:1/-1;grid-row:3;margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--vao);width:100%;line-height:1;white-space:nowrap}
  .hb-t-esq{justify-self:end}
  .hb-t-dir{justify-self:start}

  .hb-eixo{display:block;grid-column:1/-1;grid-row:3/6;justify-self:center;align-self:stretch;z-index:3;margin-top:-34px;--curso:420px;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34px,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 34px,#000 86%,transparent 100%);
    animation:hb-desce 1.2s var(--sai) .7s both}
  .hb-eixo::after{animation-name:hb-brilho-baixo}
  @keyframes hb-brilho-baixo{0%,26%{transform:translateY(-100px)}72%,100%{transform:translateY(var(--curso))}}

  .hb-atrib{grid-column:2;grid-row:4;justify-self:start;text-align:left;margin-top:16px}
  .hb-apoio{grid-column:1;grid-row:4/6;justify-self:end;text-align:right;margin-top:18px;max-width:25.5rem}
  .hb-acoes{grid-column:2;grid-row:5;justify-self:start;flex-direction:row;align-items:center;gap:26px;width:auto;max-width:none;margin-top:20px}
  .hb-botao{width:auto;min-height:52px}

  .hb-prova{grid-column:1/-1;grid-row:6;justify-self:center;max-width:none;width:auto;margin-top:26px;padding-top:0;border-top:0;display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap}
  .hb-prova blockquote{font-size:.9rem}
  .hb-prova figcaption{margin-top:0;font-size:.8rem}
}
@media (min-width:900px) and (max-width:1180px){
  .hb-nav ul{gap:22px}
  .hb-dupla{column-gap:calc(var(--foto-l) * .9)}
  .hb-nome span{display:block}
}

/* celulares estreitos */
@media (max-width:374px){
  :root{--margem:16px}
  .hb-local{display:none}
  .hb-dupla{column-gap:13px}
  .hb-nome{font-size:.74rem;letter-spacing:.12em}
  .hb-atua{font-size:.72rem}
}

@media (prefers-reduced-motion:reduce){
  .hb *,.hb *::before,.hb *::after{animation:none !important;transition:none !important}
  .hb-filete::after{display:none}
}

/* ============ BASE DO SITE (vem depois de hero.css; usa as variáveis de lá) ============ */
:root{
  /* superfícies e tintas além do hero */
  --tinta:#141b1c;            /* texto sobre marfim */
  --tinta-2:#3d4749;
  --marfim-2:#e4dccb;         /* marfim um degrau abaixo, para a malha clara */
  --texto:#d4d3ca;            /* corpo de texto sobre grafite */
  --ouro-texto:#8a6a2c;       /* ouro para texto pequeno sobre marfim (contraste AA) */
  --ambar:#e8a45a;            /* a luz do diploma; só perto dele */

  /* escala */
  --mg-tit:clamp(1.65rem,1.1rem + 2.6vw,3.25rem);
  --mg-sub:clamp(1.15rem,1rem + .8vw,1.6rem);
  --mg-corpo:clamp(.98rem,.95rem + .15vw,1.06rem);
  --mg-respiro:clamp(88px,11vw,168px);
  --mg-miolo:1180px;

  --ouro-letra:linear-gradient(176deg in oklch,#f3e7c2 8%,#dcc085 34%,var(--ouro) 56%,#b08c46 78%,#d6b877 100%);
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html{scroll-behavior:smooth;scroll-padding-top:72px}
h2,h3,ul,ol,dl,dd,table{margin:0;padding:0}
img{max-width:100%;height:auto}
button{font:inherit;color:inherit}
::selection{background:var(--ouro);color:var(--grafite-800)}

/* ---- seção ---- */
.mg-secao{position:relative;isolation:isolate;overflow:clip;padding:var(--mg-respiro) var(--margem)}
.mg-miolo{position:relative;max-width:var(--mg-miolo);margin-inline:auto}
.mg-grao{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.07;mix-blend-mode:soft-light;background-image:var(--grao);background-size:240px 240px}

/* sobrelinha com numeral romano, como capítulo */
.mg-sobre{display:flex;align-items:center;gap:14px;margin:0 0 22px;font-family:var(--f-titulo);font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--nevoa)}
.mg-sobre b{font-weight:600;color:var(--ouro);letter-spacing:.1em}
.mg-sobre::after{content:"";width:34px;height:1px;background:var(--ouro);order:-1}
.mg-sobre--centro{justify-content:center}

/* título de seção: as letras douradas da parede */
.mg-tit{font-family:var(--f-titulo);font-weight:500;font-size:var(--mg-tit);line-height:1.12;letter-spacing:.04em;text-transform:uppercase;color:var(--ouro);
  background:var(--ouro-letra);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-wrap:balance}
.mg-frase{font-weight:300;font-size:var(--mg-sub);line-height:1.3;letter-spacing:-.005em;color:var(--marfim);text-wrap:balance}
.mg-texto{font-size:var(--mg-corpo);font-weight:300;line-height:1.72;color:var(--texto);max-width:34rem}
.mg-texto b,.mg-texto strong{font-weight:500;color:var(--marfim)}
.mg-mini{font-size:.76rem;letter-spacing:.05em;color:var(--nevoa)}

/* sobre marfim */
.mg-claro{background:var(--marfim);color:var(--tinta)}
.mg-claro .mg-sobre{color:var(--tinta-2)}
.mg-claro .mg-sobre b{color:var(--ouro-texto)}
.mg-claro .mg-tit{background:none;-webkit-text-fill-color:currentColor;color:var(--tinta)}
.mg-claro .mg-frase{color:var(--tinta)}
.mg-claro .mg-texto{color:var(--tinta-2)}
.mg-claro .mg-texto b{color:var(--tinta)}
.mg-claro .mg-grao{mix-blend-mode:multiply;opacity:.05}

/* ---- o filete (motivo central): mesma peça do hero, para usar fora dele ---- */
.mg-filete{position:relative;display:block;width:2px;overflow:hidden;background:linear-gradient(in oklch to bottom,var(--ouro-claro),var(--ouro) 40%,var(--ouro-fundo))}
.mg-filete::after{content:"";position:absolute;left:0;right:0;top:0;height:90px;background:linear-gradient(to bottom,rgba(255,250,232,0),rgba(255,250,232,.95) 50%,rgba(255,250,232,0));transform:translateY(-100px);animation:mg-brilho 11s cubic-bezier(.45,0,.55,1) infinite}
@keyframes mg-brilho{0%,8%{transform:translateY(-100px)}62%,100%{transform:translateY(var(--curso,700px))}}

/* ---- ações ---- */
.mg-botao{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:2px;border:0;cursor:pointer;
  font-weight:600;font-size:.95rem;letter-spacing:.01em;color:#141b1c;
  background:linear-gradient(176deg in oklch,#f0e2b8 0%,#d9bc7c 42%,var(--ouro) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 14px 34px -14px rgba(200,164,90,.55);transition:transform .35s var(--sai),box-shadow .35s var(--sai),filter .35s}
.mg-botao svg{width:19px;height:19px;flex:none;fill:currentColor}
.mg-botao:hover,.mg-botao:focus-visible{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 20px 40px -14px rgba(200,164,90,.7)}
.mg-link{display:inline-flex;align-items:center;gap:8px;padding:8px 2px;font-size:.9rem;color:var(--marfim);border-bottom:1px solid var(--linha);transition:border-color .3s,color .3s}
.mg-link:hover,.mg-link:focus-visible{border-color:var(--ouro);color:var(--ouro-claro)}
.mg-claro .mg-link{color:var(--tinta);border-color:rgba(138,106,44,.4)}
.mg-claro .mg-link:hover,.mg-claro .mg-link:focus-visible{color:var(--ouro-texto);border-color:var(--ouro-texto)}
:focus-visible{outline:1px solid var(--ouro-claro);outline-offset:4px}
.mg-claro :focus-visible{outline-color:var(--ouro-texto)}

/* ---- entrada na rolagem: mesmo gesto do hero (as metades chegam e se encaixam) ---- */
.mg-js [data-mg]{opacity:0;transition:opacity 1.2s var(--sai),transform 1.4s var(--sai);transition-delay:var(--mg-atraso,0s);will-change:transform,opacity}
.mg-js [data-mg="sobe"]{transform:translateY(22px)}
.mg-js [data-mg="esq"]{transform:translateX(-46px)}
.mg-js [data-mg="dir"]{transform:translateX(46px)}
.mg-js [data-mg="desce"]{opacity:1;transform:scaleY(0);transform-origin:50% 0}
.mg-js [data-mg].mg-visto{opacity:1;transform:none}

/* ---- barra que aparece depois do hero (só desktop) ---- */
.mg-barra{display:none}
@media (min-width:900px){
  .mg-barra{position:fixed;z-index:40;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:24px;height:60px;padding:0 var(--margem);
    background:rgba(16,23,24,.78);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid rgba(200,164,90,.16);
    transform:translateY(-102%);transition:transform .6s var(--sai)}
  .mg-barra.mg-ativa{transform:none}
  .mg-barra .hb-marca b{font-size:1rem}
  .mg-barra .hb-marca i{height:24px}
  .mg-barra ul{display:flex;gap:30px;list-style:none}
  .mg-barra ul a{font-family:var(--f-titulo);font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--nevoa);padding:8px 0;transition:color .3s}
  .mg-barra ul a:hover,.mg-barra ul a:focus-visible,.mg-barra ul a[aria-current]{color:var(--ouro-claro)}
  .mg-barra .mg-botao{min-height:38px;padding:0 18px;font-size:.82rem;box-shadow:none}
}

/* ---- WhatsApp que acompanha a rolagem no celular ---- */
.mg-zap{position:fixed;z-index:40;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;transform:translateY(140%);transition:transform .6s var(--sai)}
.mg-zap.mg-ativa{transform:none}
.mg-zap .mg-botao{flex:1;min-height:52px;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 18px 40px -10px rgba(0,0,0,.7)}
@media (min-width:900px){.mg-zap{display:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mg-js [data-mg]{opacity:1 !important;transform:none !important;transition:none !important}
  .mg-filete::after{display:none}
  .mg-barra,.mg-zap{transition:none}
}

/* ============ historia ============ */
/* II · A HISTÓRIA — sala escura de galeria, um único quadro iluminado.
   O filete desce do alto, segura o quadro do diploma, atravessa os três tempos pelo meio
   (19|95, 20|22, HO|JE) e pousa na barra do logo de verdade, na parede atrás dos dois.
   Prefixo: hi- */
.hi{
  --hi-aro:5px;                                   /* a moldura dourada */
  --hi-passe:clamp(12px,3.8vw,24px);              /* o passe-partout */
  --hi-bisel:3px;                                 /* o corte do passe-partout */
  --hi-quadro-l:min(100vw - 20px,600px);
  --hi-img:calc(var(--hi-quadro-l) - 2*(var(--hi-aro) + var(--hi-passe) + var(--hi-bisel)));
  --hi-quadro-a:calc(var(--hi-img)*.6975 + 2*(var(--hi-aro) + var(--hi-passe) + var(--hi-bisel)));
  --hi-pe:clamp(120px,36vw,200px);                /* altura do foco de luz acima do quadro */
  --hi-trecho:clamp(48px,13vw,76px);              /* um trecho de fio entre duas contas */
  --hi-ano-t:clamp(3.3rem,17.5vw,5.2rem);           /* corpo dos anos */
  --hi-fenda:clamp(26px,7.6vw,40px);              /* a fenda por onde o fio atravessa o ano */
  --hi-foto-l:min(100vw,620px);                   /* a foto dos dois */
  --hi-barra-n:.5;                                /* onde a barra do logo fica na foto (fração da largura) */
  --hi-barra-fim:23.1%;                           /* até onde ela desce na foto */
}

/* ---- a parede ---- */
.hi-parede{position:absolute;inset:0;z-index:-2;overflow:hidden;
  background:linear-gradient(in oklch to bottom,var(--grafite-900) 0%,oklch(.152 .012 214) 22%,oklch(.162 .012 212) 58%,var(--grafite-800) 100%)}
.hi-mancha{position:absolute;border-radius:50%;will-change:transform}
.hi-mancha--fria{right:-30%;top:36%;width:90vmax;height:90vmax;max-width:1200px;max-height:1200px;
  background:radial-gradient(closest-side in oklch,oklch(.27 .016 222 / .5) 0%,oklch(.24 .014 216 / .2) 50%,oklch(.2 .012 212 / 0) 100%);
  animation:hi-respira-a 33s ease-in-out infinite alternate}
.hi-mancha--ouro{left:-22%;bottom:5%;width:80vmax;height:80vmax;max-width:1100px;max-height:1100px;
  background:radial-gradient(closest-side in oklch,oklch(.736 .102 83.9 / .11) 0%,oklch(.636 .098 82.6 / .05) 42%,oklch(.4 .05 120 / 0) 100%);
  animation:hi-respira-b 29s ease-in-out infinite alternate}
@keyframes hi-respira-a{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.08)}}
@keyframes hi-respira-b{from{transform:translate3d(3%,0,0) scale(1.05)}to{transform:translate3d(-3%,4%,0) scale(1)}}
@keyframes hi-respira-c{from{transform:translate3d(0,3%,0) scale(.96)}to{transform:translate3d(-3%,-3%,0) scale(1.06)}}

/* ---- o fio ---- */
.hi-fio{flex:none}
.hi-fio--longo{display:none}

/* ---- abertura ---- */
.hi-palco{position:relative;display:flex;flex-direction:column;align-items:center}
.hi-fio--entrada{position:absolute;left:50%;margin-left:-1px;top:calc(4px - var(--mg-respiro));height:calc(var(--mg-respiro) - 34px);--curso:140px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 60%);mask-image:linear-gradient(to bottom,transparent 0,#000 60%)}
.hi-abre{position:relative;z-index:2;text-align:center}
.hi-sobre{justify-content:center}
.hi-atrib{margin-top:14px}
.hi-atrib::before{content:"";display:inline-block;width:18px;height:1px;background:var(--ouro);vertical-align:middle;margin-right:9px}

/* ---- o quadro ---- */
.hi-obra{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 2px minmax(0,1fr);column-gap:16px}
.hi-cena{grid-column:1/-1;position:relative;display:flex;flex-direction:column;align-items:center}
.hi-pendulo{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0}
.hi-fio--alto{height:var(--hi-trecho);margin-top:22px;--curso:150px}
/* a sombra que o quadro deixa na parede, com a luz vindo de cima */
.hi-pendulo::after{content:"";position:absolute;z-index:-1;left:50%;width:calc(var(--hi-quadro-l) - 8px);margin-left:calc(var(--hi-quadro-l)/-2 + 4px);
  bottom:-26px;height:calc(var(--hi-quadro-a)*.8);background:rgba(3,6,7,.78);filter:blur(20px)}

.hi-moldura{position:relative;flex:none;width:var(--hi-quadro-l);padding:var(--hi-aro);
  background:
    linear-gradient(to bottom,rgba(255,248,222,.6) 0,rgba(255,248,222,0) 20%,rgba(40,26,6,0) 72%,rgba(40,26,6,.38) 100%),
    linear-gradient(100deg in oklch,#ecdcae 0%,#c8a45a 20%,#a8853f 44%,#e6d39e 60%,#b08c46 82%,#9a7a38 100%);
  box-shadow:0 0 0 1px rgba(16,11,3,.78),inset 0 1px 0 rgba(255,250,228,.9),inset 0 -1px 0 rgba(50,34,8,.65),inset 1px 0 0 rgba(255,250,228,.4),inset -1px 0 0 rgba(50,34,8,.4)}
/* a argola em que o fio prende */
.hi-moldura::before{content:"";position:absolute;left:50%;top:-11px;width:12px;height:12px;margin-left:-6px;border-radius:50%;
  border:2px solid var(--ouro-claro);background:var(--grafite-900);box-shadow:0 0 0 1px rgba(16,11,3,.7)}
.hi-passe{position:relative;padding:var(--hi-passe);
  background:linear-gradient(in oklch to bottom,#f6ecd6 0%,#ece1c8 46%,#d8cbab 100%);
  box-shadow:inset 0 0 0 2px #17110a,inset 0 0 0 3px #d2b06a,inset 0 0 0 4px rgba(40,26,6,.55),
    inset 0 18px 20px -12px rgba(50,32,6,.6),inset 14px 0 16px -14px rgba(50,32,6,.34),inset -14px 0 16px -14px rgba(50,32,6,.34)}
/* o corte em 45° do passe-partout: quatro faces, cada uma com a sua luz */
.hi-bisel{border:var(--hi-bisel) solid;border-color:#cbbd9c #efe6d0 #fffaf0 #e6dcc4;box-shadow:0 0 0 1px rgba(60,44,16,.3)}
.hi-bisel img{display:block;width:100%;height:auto;outline:1px solid rgba(30,20,6,.42);outline-offset:-1px}
.hi-vidro{position:absolute;inset:var(--hi-aro);pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(108deg,rgba(255,252,240,0) 0 22%,rgba(255,252,240,.1) 30%,rgba(255,252,240,.02) 38%,rgba(255,252,240,0) 46% 70%,rgba(255,252,240,.05) 77%,rgba(255,252,240,0) 85%)}

/* a luz âmbar: só aqui o site esquenta. Foco de galeria vindo do alto + o pôr do sol vazando para a parede */
.hi-luz{position:absolute;left:50%;bottom:calc(var(--hi-quadro-a)/2);width:0;height:0;z-index:0;pointer-events:none}
.hi-cone{position:absolute;left:calc(var(--hi-quadro-l)*-.8);width:calc(var(--hi-quadro-l)*1.6);top:calc(var(--hi-quadro-a)*-.5 - var(--hi-pe));height:calc(var(--hi-pe) + var(--hi-quadro-a)*1.15);
  background:conic-gradient(from 142deg at 50% 0 in oklch,color-mix(in oklch,var(--ambar) 0%,transparent) 0deg,color-mix(in oklch,var(--ambar) 13%,transparent) 26deg,color-mix(in oklch,var(--ambar) 21%,transparent) 38deg,color-mix(in oklch,var(--ambar) 13%,transparent) 50deg,color-mix(in oklch,var(--ambar) 0%,transparent) 76deg);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 32%,#000 60%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 32%,#000 60%,transparent 100%);
  filter:blur(10px)}
.hi-brasa{position:absolute;width:var(--l);height:var(--a);left:calc(var(--x,0px) - var(--l)/2);top:calc(var(--y,0px) - var(--a)/2);border-radius:50%;will-change:transform}
.hi-brasa--halo{--l:calc(var(--hi-quadro-l)*2.1);--a:calc(var(--hi-quadro-a)*2.2);
  background:radial-gradient(closest-side in oklch,color-mix(in oklch,var(--ambar) 40%,transparent) 0%,color-mix(in oklch,var(--ambar) 19%,transparent) 40%,color-mix(in oklch,var(--ambar) 6%,transparent) 70%,color-mix(in oklch,var(--ambar) 0%,transparent) 100%);
  animation:hi-respira-b 31s ease-in-out infinite alternate}
.hi-brasa--foco{--l:calc(var(--hi-quadro-l)*1.25);--a:calc(var(--hi-quadro-a)*1.05);--y:calc(var(--hi-quadro-a)*-.44);
  background:radial-gradient(closest-side in oklch,color-mix(in oklch,var(--ambar) 34%,transparent) 0%,color-mix(in oklch,var(--ambar) 11%,transparent) 55%,color-mix(in oklch,var(--ambar) 0%,transparent) 100%);
  animation:hi-respira-c 27s ease-in-out infinite alternate}
/* a linha do horizonte do diploma continua na parede, dos dois lados */
.hi-brasa--horizonte{--l:calc(var(--hi-quadro-l)*2.3);--a:calc(var(--hi-quadro-a)*1.05);--y:calc(var(--hi-quadro-a)*.08);
  background:radial-gradient(closest-side in oklch,oklch(.74 .15 58 / .24) 0%,oklch(.7 .15 52 / .1) 46%,oklch(.6 .12 45 / 0) 100%);
  animation:hi-respira-a 35s ease-in-out infinite alternate}
/* e o mar cor de vinho escorre para baixo */
.hi-brasa--vinho{--l:calc(var(--hi-quadro-l)*1.7);--a:calc(var(--hi-quadro-a)*1.15);--y:calc(var(--hi-quadro-a)*.52);
  background:radial-gradient(closest-side in oklch,oklch(.4 .115 18 / .34) 0%,oklch(.34 .09 16 / .13) 52%,oklch(.26 .05 16 / 0) 100%);
  animation:hi-respira-c 29s ease-in-out infinite alternate-reverse}

/* a etiqueta de museu: um cartão de papel na parede, à direita do fio */
.hi-obra::after{content:"";grid-column:2;grid-row:2;background:linear-gradient(in oklch to bottom,var(--ouro-claro),var(--ouro))}
.hi-etiqueta{grid-column:3;grid-row:2;justify-self:start;position:relative;z-index:2;margin:30px 0 34px;max-width:15rem;padding:11px 13px 12px;text-align:left;
  background:linear-gradient(in oklch to bottom,#ece2cb,#d9cdb0);box-shadow:0 0 0 1px rgba(16,11,3,.55),0 14px 22px -8px rgba(3,6,7,.8);
  font-size:.72rem;line-height:1.5;letter-spacing:.01em;color:var(--tinta-2)}
.hi-etiqueta b{display:block;margin-bottom:6px;font-weight:500;font-size:.76rem;line-height:1.4;letter-spacing:0;color:var(--tinta)}
.hi-etiqueta span{display:block}

/* ---- os três tempos: o fio passa por dentro de cada ano ---- */
.hi-espinha{position:relative}
.hi-tempos{list-style:none;display:flex;flex-direction:column;gap:34px}
.hi-tempo{display:flex;flex-direction:column;align-items:center}
.hi-fio--trecho{height:calc(var(--hi-trecho) + var(--hi-ano-t)*.88);margin-bottom:calc(var(--hi-ano-t)*-.88);--curso:220px}
.hi-tempo:first-child .hi-fio--trecho{background:linear-gradient(in oklch to bottom,var(--ouro),var(--ouro-fundo))}
.hi-ano{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--hi-fenda);
  font-family:var(--f-titulo);font-weight:500;font-size:var(--hi-ano-t);line-height:.88;letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:lining-nums}
.hi-ano span{color:var(--ouro);background:var(--ouro-letra);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hi-ano-e{justify-self:end;margin-right:-.04em}
.hi-ano-d{justify-self:start}
.hi-conta{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:.95em;text-align:center}
.hi-conta .mg-texto{max-width:31rem}
.hi-voz{display:flex;flex-direction:column;align-items:center;gap:.9em}
.hi-fala{max-width:26rem;font-weight:300;font-size:clamp(1.16rem,1rem + .68vw,1.5rem);line-height:1.32;letter-spacing:-.005em;color:var(--marfim);text-wrap:balance}
.hi-fala span{color:var(--nevoa);font-size:.78em;letter-spacing:.01em}

/* ---- hoje: a segunda luz da sala. Os dois, fundidos na parede, e o fio pousando na barra do logo ---- */
.hi-hoje{position:relative;width:var(--hi-foto-l);margin:34px 0 0 calc(50% - var(--hi-foto-l)*var(--hi-barra-n));padding-top:var(--hi-trecho)}
.hi-hoje::before{content:"";position:absolute;z-index:-1;left:-12%;right:-12%;top:8%;bottom:-6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side in oklch,oklch(.74 .05 86 / .17) 0%,oklch(.6 .035 150 / .07) 52%,oklch(.4 .02 200 / 0) 100%)}
.hi-janela{position:relative;aspect-ratio:1286/1080}
.hi-foto{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 56%,rgba(0,0,0,.5) 76%,transparent 97%);mask-image:linear-gradient(to bottom,#000 0,#000 56%,rgba(0,0,0,.5) 76%,transparent 97%)}
/* o fio dourado da janela: em cima e dos lados, sumindo para baixo junto com a foto */
.hi-janela::after{content:"";position:absolute;inset:-9px 9px 0;z-index:1;border:1px solid rgba(200,164,90,.5);border-bottom:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 44%,transparent 86%);mask-image:linear-gradient(to bottom,#000 0,#000 44%,transparent 86%)}
.hi-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:100% 50%;filter:saturate(.9) contrast(1.05) brightness(.94) sepia(.07)}
.hi-foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 92% at 56% 38%,rgba(11,18,20,0) 40%,rgba(11,18,20,.34) 72%,rgba(11,18,20,.74) 100%)}
.hi-fio--pouso{position:absolute;z-index:2;left:calc(var(--hi-barra-n)*100%);margin-left:-1px;top:calc(-1*var(--hi-trecho));height:calc(var(--hi-trecho) + var(--hi-barra-fim));--curso:240px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 64%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 64%,transparent 100%)}
.hi-legenda{position:relative;z-index:2;margin:-14px auto 0;max-width:19rem;padding:0 var(--margem);text-align:center;line-height:1.6}
/* a luz dos dois acende quando a foto entra, como a do quadro */
.mg-js .hi-hoje[data-mg]{transform:none}
.mg-js .hi-hoje[data-mg] .hi-foto{filter:brightness(.45) saturate(.5);transition:filter 2.8s ease-out .35s}
.mg-js .hi-hoje[data-mg].mg-visto .hi-foto{filter:none}
.mg-js .hi-hoje[data-mg]::before{opacity:0;transition:opacity 3s ease-out .5s}
.mg-js .hi-hoje[data-mg].mg-visto::before{opacity:1}

/* ---- fecho: o fato de um lado, a fala do outro ---- */
.hi-fecho{position:relative;z-index:3;margin-top:clamp(34px,9vw,56px);display:flex;flex-direction:column;align-items:center;text-align:center}
.hi-frase{max-width:30rem;font-size:clamp(1.34rem,1rem + 1.5vw,2.15rem);line-height:1.27}
.hi-dito-quem{margin-top:16px}
.hi-dito-quem::before{content:"";display:inline-block;width:18px;height:1px;background:var(--ouro);vertical-align:middle;margin-right:9px}
.hi-segue{margin-top:26px}
.hi-seta{width:12px;height:12px;stroke:var(--ouro);fill:none;stroke-width:1.6}

/* ---- o gesto: o fio desce, o quadro assenta com um balanço que para, a luz acende ---- */
.hi-js .hi-fio--alto,.hi-js .hi-obra::after{transform:scaleY(0);transform-origin:50% 0}
.hi-js .hi-moldura,.hi-js .hi-luz,.hi-js .hi-etiqueta,.hi-js .hi-pendulo::after{opacity:0}
.hi-assenta .hi-fio--alto{animation:hi-desce 1.3s var(--sai) both}
.hi-assenta .hi-pendulo{animation:hi-balanco 7.2s cubic-bezier(.37,0,.63,1) .5s both}
.hi-assenta .hi-moldura{animation:hi-pousa 1.6s var(--sai) .5s both}
.hi-assenta .hi-pendulo::after{animation:hi-acende 2.4s ease-out 1s both}
.hi-assenta .hi-luz{animation:hi-acende 3.4s ease-out 1s both}
.hi-assenta .hi-obra::after{animation:hi-desce 1.3s var(--sai) 2.1s both}
.hi-assenta .hi-etiqueta{animation:hi-acende 1.4s var(--sai) 2.5s both}
@keyframes hi-desce{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hi-pousa{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
@keyframes hi-acende{from{opacity:0}to{opacity:1}}
@keyframes hi-balanco{0%{transform:rotate(1.6deg)}17%{transform:rotate(-1.1deg)}34%{transform:rotate(.72deg)}51%{transform:rotate(-.44deg)}67%{transform:rotate(.25deg)}82%{transform:rotate(-.11deg)}100%{transform:rotate(0)}}

/* ============ DESKTOP: o fio vira eixo, como no hero ============ */
@media (min-width:900px){
  .hi{
    --hi-aro:9px;
    --hi-passe:clamp(26px,2.9vw,40px);
    --hi-bisel:4px;
    --hi-quadro-l:clamp(500px,51vw,736px);
    --hi-pe:clamp(200px,22vw,310px);
    --hi-ano-t:clamp(4.4rem,9.2vw,8.2rem);
    --hi-fenda:clamp(30px,3.4vw,48px);
    --hi-foto-l:min(800px,80vw);
    --hi-foto-a:calc(var(--hi-foto-l)*1080/1700);
    --hi-barra-n:.623;
    --hi-sobe:calc(var(--hi-foto-a)*.13);           /* quanto o fecho sobe sobre o pé esmaecido da foto */
  }
  .hi-fio--entrada,.hi-fio--trecho,.hi-fio--pouso,.hi-obra::after{display:none}

  .hi-palco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--vao);grid-template-rows:auto var(--hi-quadro-a);align-items:stretch}
  .hi-abre{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--vao);padding-bottom:clamp(44px,5vw,76px);text-align:left}
  .hi-sobre{grid-column:1;justify-content:flex-end}
  .hi-tit{grid-column:1;grid-row:2;text-align:right;margin-right:-.04em}
  .hi-atrib{grid-column:2;grid-row:2;align-self:end;margin:0 0 .7em}

  .hi-obra{grid-column:1/-1;grid-row:1/3;margin-top:calc(-1*var(--mg-respiro));display:flex;flex-direction:column}
  .hi-cena,.hi-pendulo{flex:1}
  .hi-fio--alto{flex:1 1 auto;height:auto;margin-top:0;--curso:560px;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 90px);mask-image:linear-gradient(to bottom,transparent 0,#000 90px)}
  .hi-moldura::before{top:-12px;width:14px;height:14px;margin-left:-7px}
  .hi-pendulo::after{bottom:-40px;filter:blur(30px)}

  .hi-etiqueta{position:absolute;left:calc(50% + var(--hi-quadro-l)/2 + 26px);bottom:0;margin:0;max-width:none;width:min(214px,50% - var(--hi-quadro-l)/2 - 26px);padding:14px 16px 15px;font-size:.74rem}
  .hi-etiqueta b{font-size:.82rem}

  .hi-fio--longo{display:block;position:absolute;z-index:2;left:50%;margin-left:-1px;top:0;bottom:calc(var(--hi-foto-a)*.769);--curso:1800px;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 80px,#000 calc(100% - 70px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 80px,#000 calc(100% - 70px),transparent 100%)}
  .hi-fio--longo::after{animation-duration:19s}
  .hi-tempos{gap:clamp(72px,8vw,116px);padding:clamp(96px,10vw,148px) 0 clamp(84px,9vw,124px)}
  .hi-tempo{display:block}
  .hi-conta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--vao);align-items:start;gap:0 var(--vao);margin-top:clamp(22px,2.6vw,36px);text-align:left}
  .hi-fato{justify-self:end;max-width:25rem;text-align:right;text-wrap:balance}
  .hi-voz{align-items:flex-start}
  .hi-fala{max-width:27rem}
  .hi-voz .mg-texto{max-width:25rem}

  .hi-hoje{margin-top:0;padding-top:0}
  .hi-janela{aspect-ratio:1700/1080}
  .hi-janela::after{inset:-12px -12px 0}
  .hi-foto img{object-position:50% 50%}
  .hi-legenda{position:absolute;right:calc(100% - var(--hi-barra-n)*100% + var(--vao)/2);top:calc(100% - var(--hi-sobe));width:15rem;max-width:none;margin:0;padding:.75em 0 0;text-align:right}
  .hi-legenda::before{content:"";display:block;width:34px;height:1px;margin:0 0 14px auto;background:var(--ouro)}

  .hi-fecho{margin:calc(-1*var(--hi-sobe)) 0 0 calc(50% + var(--vao)/2);align-items:flex-start;text-align:left}
  .hi-frase{max-width:33rem}
}

@media (prefers-reduced-motion:reduce){
  .hi-mancha,.hi-brasa{animation:none}
}

/* ============ atuacao ============ */
/* III · ATUAÇÃO: o zíper. O filete é o eixo; o que ele faz entra pela esquerda, o que ela faz pela direita,
   e um cursor dourado desce com a rolagem fechando os dois lados. Sem JS (ou com movimento reduzido) o zíper já está fechado. */
.at{
  --at-larg:44px;                                   /* largura do cursor; o trilho inteiro deriva dela */
  --at-abertura:calc(var(--at-larg) * .3333);       /* meia distância entre as fitas abertas (20/60) */
  --at-corpo:calc(var(--at-larg) * .7);             /* altura do corpo do cursor (42/60) */
  --at-pende:calc(var(--at-larg) * .7334);          /* quanto o puxador pende abaixo do corpo (44/60) */
  --at-v:calc(var(--at-larg) * 2.5);                /* corpo + o trecho em V (150/60) */
  --at-eixo:15px;                                   /* x do eixo (celular: junto à margem) */
  --at-folga:34px;                                  /* do eixo ao texto */
  --at-curso:26px;                                  /* quanto cada lado viaja para fechar */
  background:linear-gradient(in oklch to bottom,var(--grafite-800) 0%,oklch(.2 .02 214) 22%,oklch(.186 .023 216) 58%,oklch(.17 .016 214) 84%,var(--grafite-800) 100%);
}

/* ---- fundo: malha com mais petróleo ---- */
.at-fundo{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.at-mancha{position:absolute;border-radius:50%;will-change:transform}
/* o lado dela puxa para o petróleo (a cor da calça dela no outro retrato); o dele, para o grafite morno com um pouco de ouro */
.at-mancha--a{right:-40%;top:12%;width:124vmax;height:124vmax;max-width:1320px;max-height:1320px;
  background:radial-gradient(closest-side in oklch,oklch(.5 .08 208.4 / .42) 0%,oklch(.4 .058 210 / .17) 44%,oklch(.22 .014 212 / 0) 100%);
  animation:at-respira-a 33s ease-in-out infinite alternate}
.at-mancha--b{left:-44%;top:50%;width:104vmax;height:104vmax;max-width:1080px;max-height:1080px;
  background:radial-gradient(closest-side in oklch,oklch(.44 .066 214 / .24) 0%,oklch(.36 .05 214 / .09) 48%,oklch(.22 .014 212 / 0) 100%);
  animation:at-respira-b 29s ease-in-out infinite alternate}
.at-mancha--ouro{left:-22%;top:-8%;width:96vmax;height:96vmax;max-width:1000px;max-height:1000px;
  background:radial-gradient(closest-side in oklch,oklch(.7 .09 82 / .115) 0%,oklch(.6 .08 80 / .045) 44%,oklch(.4 .05 120 / 0) 100%);
  animation:at-respira-c 35s ease-in-out infinite alternate}
.at-mancha--sombra{left:-10%;bottom:-22%;width:120%;height:46%;
  background:radial-gradient(closest-side in oklch,oklch(.16 .012 212 / .8) 0%,oklch(.19 .014 212 / 0) 100%);
  animation:at-respira-b 31s ease-in-out infinite alternate-reverse}
@keyframes at-respira-a{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(7%,5%,0) scale(1.1)}}
@keyframes at-respira-b{from{transform:translate3d(4%,2%,0) scale(1.06)}to{transform:translate3d(-6%,-5%,0) scale(1)}}
@keyframes at-respira-c{from{transform:translate3d(0,3%,0) scale(.95)}to{transform:translate3d(-7%,-4%,0) scale(1.1)}}

/* ---- o zíper: abertura e lista dividem a mesma grade; o trilho ocupa as linhas por cima ---- */
.at-ziper{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
.at-abre{grid-area:1 / 1;display:grid;grid-template-columns:minmax(0,1fr);row-gap:22px;padding-left:calc(var(--at-eixo) + var(--at-folga))}
.at-l{display:inline}
.at-apoio{max-width:33rem}
.at-lista{grid-area:2 / 1}
.at-trilho{grid-area:1 / 1 / 3 / 2;position:relative;z-index:2;justify-self:start;width:var(--at-larg);margin:-30px 0 0 calc(var(--at-eixo) - var(--at-larg) / 2);pointer-events:none}

/* parte fechada: o filete e os dentes entrelaçados sobre ele */
.at-fechado{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40px);mask-image:linear-gradient(to bottom,transparent 0,#000 40px)}
.at-fio{position:absolute;left:50%;top:0;height:100%;margin-left:-1px;--curso:1700px}
.at-fechado::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:14px;margin-left:-7px;opacity:.82;
  background:linear-gradient(90deg,var(--ouro-fundo) 0%,var(--ouro-claro) 50%,var(--ouro-fundo) 100%);
  -webkit-mask:repeating-linear-gradient(to bottom,#000 0 2px,transparent 2px 10px) left top/9px 100% no-repeat,repeating-linear-gradient(to bottom,transparent 0 5px,#000 5px 7px,transparent 7px 10px) right top/9px 100% no-repeat;
  mask:repeating-linear-gradient(to bottom,#000 0 2px,transparent 2px 10px) left top/9px 100% no-repeat,repeating-linear-gradient(to bottom,transparent 0 5px,#000 5px 7px,transparent 7px 10px) right top/9px 100% no-repeat}

/* pespontos: a costura que acompanha o zíper fechado */
.at-fechado::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:calc(var(--at-larg) - 8px);transform:translateX(-50%);opacity:.9;
  background:repeating-linear-gradient(to bottom,rgba(233,215,166,.2) 0 5px,transparent 5px 10px) left top/1px 100% no-repeat,repeating-linear-gradient(to bottom,rgba(233,215,166,.2) 0 5px,transparent 5px 10px) right top/1px 100% no-repeat}

/* parte aberta: as duas fitas de dentes, afastadas, à espera */
.at-aberto{position:absolute;inset:0;display:none}
.at-aberto::before,.at-aberto::after{content:"";position:absolute;top:0;bottom:0;width:8px;margin-left:-4px;background:var(--ouro);opacity:.5}
.at-aberto::before{left:calc(50% - var(--at-abertura));
  -webkit-mask-image:repeating-linear-gradient(to bottom,#000 0 2px,transparent 2px 10px);mask-image:repeating-linear-gradient(to bottom,#000 0 2px,transparent 2px 10px)}
.at-aberto::after{left:calc(50% + var(--at-abertura));
  -webkit-mask-image:repeating-linear-gradient(to bottom,transparent 0 5px,#000 5px 7px,transparent 7px 10px);mask-image:repeating-linear-gradient(to bottom,transparent 0 5px,#000 5px 7px,transparent 7px 10px)}

/* a fresta: enquanto o zíper está aberto, passa luz entre as fitas (uma faixa e um halo que nasce abaixo do cursor) */
.at-luz{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 120px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 120px),transparent 100%)}
.at-luz::after{content:"";position:absolute;inset:0;background:rgba(108,195,206,.24);
  /* uma máscara só para a cunha (logo abaixo do cursor) e a faixa reta, para emendarem sem costura */
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 150' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-opacity='0'/%3E%3Cstop offset='.5' stop-opacity='.66'/%3E%3Cstop offset='1' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M30 34C28 72 10 88 10 150H50C50 88 32 72 30 34z' fill='url(%23g)'/%3E%3C/svg%3E"),linear-gradient(90deg,transparent 16.667%,#000 16.667%,#000 83.333%,transparent 83.333%);
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 150' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-opacity='0'/%3E%3Cstop offset='.5' stop-opacity='.66'/%3E%3Cstop offset='1' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M30 34C28 72 10 88 10 150H50C50 88 32 72 30 34z' fill='url(%23g)'/%3E%3C/svg%3E"),linear-gradient(90deg,transparent 16.667%,#000 16.667%,#000 83.333%,transparent 83.333%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% var(--at-v),100% 100%;mask-size:100% var(--at-v),100% 100%;
  -webkit-mask-position:0 var(--at-p,0px),0 calc(var(--at-p,0px) + var(--at-v) - 1px);mask-position:0 var(--at-p,0px),0 calc(var(--at-p,0px) + var(--at-v) - 1px)}
.at-luz::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 90px);width:180px;
  background:linear-gradient(90deg in oklch,oklch(.62 .09 207 / 0) 0%,oklch(.66 .09 205 / .17) 50%,oklch(.62 .09 207 / 0) 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--at-p,0px) + var(--at-v) * .55),#000 calc(var(--at-p,0px) + var(--at-v) + 90px));
  mask-image:linear-gradient(to bottom,transparent calc(var(--at-p,0px) + var(--at-v) * .55),#000 calc(var(--at-p,0px) + var(--at-v) + 90px))}

/* batente: onde as duas fitas terminam juntas */
.at-batente{position:absolute;left:50%;bottom:-1px;width:calc(var(--at-abertura) * 2 + 9px);height:3px;transform:translateX(-50%);
  background:linear-gradient(90deg,var(--ouro-fundo),var(--ouro-claro) 50%,var(--ouro-fundo))}

/* cursor */
.at-cursor{position:absolute;left:0;top:calc(100% - var(--at-corpo));width:var(--at-larg);height:var(--at-v)}
.at-cursor svg{position:relative;display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 8px 12px rgba(4,8,9,.6))}
.at-cursor::before{content:"";position:absolute;left:50%;top:calc(var(--at-corpo) / 2);width:380px;height:380px;margin:-190px 0 0 -190px;border-radius:50%;
  background:radial-gradient(closest-side in oklch,oklch(.78 .1 84 / .17) 0%,oklch(.64 .098 82.6 / .055) 44%,oklch(.4 .05 120 / 0) 100%)}
.at-v{opacity:0}

/* ---- com JS: o cursor acompanha a rolagem ---- */
.at-vivo .at-aberto{display:block}
.at-vivo .at-aberto::before,.at-vivo .at-aberto::after{clip-path:inset(calc(var(--at-p,0px) + var(--at-v)) 0 0 0)}
.at-vivo .at-aberto{transition:opacity .9s var(--sai)}
.at-vivo .at-fim .at-aberto{opacity:0}
.at-vivo .at-fechado{clip-path:inset(0 0 calc(100% - var(--at-p,0px) - 6px) 0)}
.at-vivo .at-cursor{top:0;transform:translate3d(0,var(--at-p,0px),0);will-change:transform}
.at-vivo .at-v{opacity:1;transition:opacity .9s var(--sai)}
.at-vivo .at-fim .at-v{opacity:0}

/* ---- os dentes: um dele, um dela ---- */
.at-lista{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(40px,11vw,52px);
  padding-top:calc(34px + var(--at-corpo) + 22px);padding-bottom:calc(var(--at-corpo) + 30px)}
.at-item{position:relative;padding-left:calc(var(--at-eixo) + var(--at-folga))}
.at-item--ela{padding-left:calc(var(--at-eixo) + var(--at-folga) + 20px)}

/* o dente: uma barra de metal que sai do eixo até o item, com a raiz presa ao filete */
.at-item::before{content:"";position:absolute;top:calc(.55rem - 1px);left:var(--at-eixo);width:calc(var(--at-folga) - 11px);height:2px;background:linear-gradient(90deg,var(--ouro-claro),var(--ouro) 55%,var(--ouro-fundo))}
.at-item--ela::before{width:calc(var(--at-folga) + 9px)}
.at-item::after{content:"";position:absolute;top:calc(.55rem - 5px);width:5px;height:10px;background:linear-gradient(180deg,var(--ouro-claro),var(--ouro) 60%,var(--ouro-fundo))}
.at-item--ele::after{left:calc(var(--at-eixo) - 6px)}
.at-item--ela::after{left:calc(var(--at-eixo) + 1px)}

.at-cab{display:flex;align-items:center;gap:12px;line-height:1.1rem}
.at-num{font-family:var(--f-titulo);font-weight:500;font-size:.76rem;letter-spacing:.1em;color:var(--ouro);font-variant-numeric:lining-nums tabular-nums}
.at-de{font-family:var(--f-titulo);font-weight:500;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--nevoa);white-space:nowrap}
.at-nome{margin-top:14px;font-family:var(--f-texto);font-weight:300;font-size:clamp(1.5rem,1.02rem + 2vw,2.75rem);line-height:1.08;letter-spacing:-.018em;color:var(--marfim);text-wrap:balance}
.at-desc{margin-top:12px;max-width:28rem;font-size:var(--mg-corpo);font-weight:300;line-height:1.68;color:var(--texto);text-wrap:pretty}

/* estado aberto (só com JS): cada lado afastado do eixo até o cursor passar */
.at-vivo .at-item{transition:opacity 1.2s var(--sai),transform 1.4s var(--sai)}
.at-vivo .at-item:not(.at-preso){opacity:0}
.at-vivo .at-item--ele:not(.at-preso){transform:translate3d(calc(var(--at-curso) * -.6),0,0)}
.at-vivo .at-item--ela:not(.at-preso){transform:translate3d(var(--at-curso),0,0)}

/* o dente prende: um brilho curto na raiz, depois de o lado chegar */
.at-vivo .at-preso::after{animation:at-clique 1.1s var(--sai) .5s both}
@keyframes at-clique{0%{box-shadow:0 0 0 0 rgba(255,236,180,0);filter:brightness(1)}28%{box-shadow:0 0 14px 3px rgba(255,236,180,.7);filter:brightness(1.7)}100%{box-shadow:0 0 0 0 rgba(255,236,180,0);filter:brightness(1)}}

/* ---- o fecho: zíper fechado, uma frase só, assinada pelos dois ---- */
.at-fecho{margin-top:calc(var(--at-pende) + 30px)}
.at-frase{font-size:clamp(1.6rem,1rem + 3vw,3.2rem);line-height:1.14;letter-spacing:-.022em;max-width:20ch}
.at-certo{display:block;margin-top:.1em;padding-bottom:.08em;color:var(--ouro-claro);background:var(--ouro-letra);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.at-fonte{margin-top:18px;padding-left:28px;text-indent:-28px;line-height:1.5}
.at-fonte::before{content:"";display:inline-block;width:18px;height:1px;margin-right:10px;vertical-align:middle;background:var(--ouro)}

.at-assina{margin-top:30px;display:grid;grid-template-columns:2px minmax(0,1fr);column-gap:16px;row-gap:12px}
.at-assina-fio{grid-row:1 / span 2;grid-column:1;height:auto;--curso:140px}
.at-q{grid-column:2;display:flex;flex-direction:column;gap:3px;line-height:1.3}
.at-q-nome{font-family:var(--f-titulo);font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro-claro)}
.at-q-cro{font-size:.68rem;letter-spacing:.08em;color:var(--nevoa);font-variant-numeric:tabular-nums}

/* com JS, a frase só sobe quando o cursor encosta no batente */
.at-vivo .at-dito,.at-vivo .at-assina{transition:opacity 1.2s var(--sai),transform 1.4s var(--sai)}
.at-vivo .at-assina{transition-delay:.18s}
.at-vivo:not(.at-fechou) .at-dito,.at-vivo:not(.at-fechou) .at-assina{opacity:0;transform:translateY(22px)}

.at-acoes{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.at-acoes .mg-botao{width:100%}
.at-seta{width:12px;height:12px;fill:none;stroke:var(--ouro);stroke-width:1.6}

/* ============ a partir do tablet: eixo no centro, um lado de cada vez ============ */
@media (min-width:700px){
  .at{--at-larg:52px;--at-folga:40px;--at-curso:14px}
  .at-tit{font-size:clamp(1.6rem,4.3vw,2.5rem)}
  .at-abre{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:calc(var(--at-folga) * 2);align-items:end;padding-left:0}
  .at-abre-tit{text-align:right}
  .at-abre-tit .mg-sobre{justify-content:flex-end;margin-bottom:26px}
  .at-l{display:block}
  .at-apoio{padding-bottom:.3em}

  .at-trilho{justify-self:center;margin:-34px 0 0}

  .at-lista{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:calc(var(--at-folga) * 2);row-gap:clamp(30px,3.4vw,46px);
    padding-top:calc(clamp(40px,5vw,64px) + var(--at-corpo) + 20px);padding-bottom:calc(var(--at-corpo) + 36px)}
  .at-item,.at-item--ela{padding-left:0}
  .at-item--ele{grid-column:1;text-align:right}
  .at-item--ela{grid-column:2}
  .at-item:nth-child(1){grid-row:1 / span 2}
  .at-item:nth-child(2){grid-row:2 / span 2}
  .at-item:nth-child(3){grid-row:3 / span 2}
  .at-item:nth-child(4){grid-row:4 / span 2}
  .at-item:nth-child(5){grid-row:5 / span 2}
  .at-item:nth-child(6){grid-row:6 / span 2}

  .at-item::before,.at-item--ela::before{width:calc(var(--at-folga) - 13px)}
  .at-item--ele::before{left:auto;right:calc(var(--at-folga) * -1);background:linear-gradient(270deg,var(--ouro-claro),var(--ouro) 55%,var(--ouro-fundo))}
  .at-item--ela::before{left:calc(var(--at-folga) * -1)}
  .at-item--ele::after{left:auto;right:calc(var(--at-folga) * -1 + 1px)}
  .at-item--ela::after{left:calc(var(--at-folga) * -1 + 1px)}

  .at-item--ele .at-cab{flex-direction:row-reverse}
  .at-item--ele .at-desc{margin-left:auto}
  .at-desc{max-width:25.5rem}

  .at-vivo .at-item:not(.at-preso){opacity:.3}
  .at-vivo .at-item--ele:not(.at-preso){transform:translate3d(calc(var(--at-curso) * -1),0,0)}

  .at-fecho{margin-top:calc(var(--at-pende) + 44px);display:flex;flex-direction:column;align-items:center;text-align:center}
  .at-frase{max-width:none}
  .at-fonte{padding-left:0;text-indent:0}
  .at-assina{margin-top:38px;grid-template-columns:minmax(0,1fr) 2px minmax(0,1fr);column-gap:24px;align-items:center;width:100%;max-width:38rem}
  .at-assina-fio{grid-row:1;grid-column:2;height:46px}
  .at-q{grid-row:1}
  .at-q--ele{grid-column:1;text-align:right}
  .at-q--ela{grid-column:3;text-align:left}
  .at-acoes{flex-direction:row;align-items:center;justify-content:center;gap:28px;margin-top:38px}
  .at-acoes .mg-botao{width:auto}
}
@media (min-width:900px){
  .at{--at-curso:30px}
}
@media (min-width:960px){
  .at-tit{font-size:var(--mg-tit)}
}
@media (min-width:1100px){
  .at{--at-larg:58px;--at-folga:54px}
}
@media (min-width:1280px){
  .at{--at-curso:46px}
}
/* onde o botão do WhatsApp já acompanha a rolagem (abaixo de 900 px, posto pelo base.js), a seção fica só com o link */
@media (max-width:899px){
  .mg-js .at-acoes .mg-botao{display:none}
}

@media (max-width:374px){
  .at{--at-eixo:13px;--at-folga:30px;--at-larg:40px}
  .at-item--ela{padding-left:calc(var(--at-eixo) + var(--at-folga) + 16px)}
  .at-item--ela::before{width:calc(var(--at-folga) + 5px)}
}

@media (prefers-reduced-motion:reduce){
  .at-mancha{animation:none}
}

/* ============ obra ============ */
/* IV · Como tratamos — a única seção clara. O filete é um fio de prumo:
   passa pela primeira haste de I, II, III e IV, que por isso ficam a prumo. */
.ob-secao{
  --ob-noite-cima:var(--grafite-800);    /* tom em que a seção de cima termina; troque aqui se for outro */
  --ob-noite-baixo:var(--grafite-800);   /* tom em que a seção de baixo começa */
  --ob-borda:clamp(120px,17vw,250px);    /* altura da borda em que a noite clareia */
  --ob-topo:calc(var(--ob-borda) + clamp(26px,4vw,64px));
  --ob-eixo:15px;                        /* onde o prumo desce, medido do miolo */
  --ob-recuo:38px;                       /* no celular, o texto começa depois do fio */
  --ob-vao:clamp(30px,4vw,54px);         /* folga entre o fio e o texto no desktop */
  --ob-num:clamp(4.3rem,21vw,5.6rem);    /* corpo dos numerais */
  --ob-piao-a:48px;
  --ob-arco-l:260%;                      /* largura do arco de luz das bordas (no celular, quase reto) */
  --ob-miolo-l:min(var(--mg-miolo),100vw - 2 * var(--margem));
  --ob-eixo-x:calc(50% - var(--ob-miolo-l) / 2 + var(--ob-eixo));   /* o fio, medido da seção */
  --ouro-texto:#70541d;                  /* ouro de texto mais fundo: o da base (#8a6a2c) dá 4,1:1 sobre marfim; este fica acima de 4,5:1 em toda a malha */
  --ob-fio-fino:rgba(122,92,34,.42);
  --ob-palido:oklch(.86 .026 86);        /* numeral antes de o prumo passar */
  padding-top:var(--ob-topo);
  padding-bottom:calc(var(--ob-borda) + clamp(20px,3vw,48px));
}

/* ---- fundo: malha clara que respira ---- */
.ob-fundo{position:absolute;inset:0;z-index:-3;overflow:hidden;
  background:linear-gradient(in oklab to bottom,var(--marfim) 0%,oklch(.925 .02 88) 52%,var(--marfim-2) 100%)}
.ob-mancha{position:absolute;border-radius:50%;will-change:transform}
.ob-mancha--luz{right:-22%;top:3%;width:96vmax;height:96vmax;max-width:1500px;max-height:1500px;
  background:radial-gradient(closest-side in oklch,oklch(.982 .02 92 / .95) 0%,oklch(.962 .02 90 / .55) 44%,oklch(.94 .018 88 / 0) 100%);
  animation:ob-respira-a 31s ease-in-out infinite alternate}
.ob-mancha--areia{left:-34%;top:30%;width:104vmax;height:104vmax;max-width:1500px;max-height:1500px;
  background:radial-gradient(closest-side in oklch,oklch(.878 .034 84 / .75) 0%,oklch(.9 .028 86 / .38) 46%,oklch(.93 .02 88 / 0) 100%);
  animation:ob-respira-b 27s ease-in-out infinite alternate}
.ob-mancha--ouro{left:18%;top:52%;width:70vmax;height:70vmax;max-width:980px;max-height:980px;
  background:radial-gradient(closest-side in oklch,oklch(.9 .07 84 / .3) 0%,oklch(.92 .05 86 / .14) 50%,oklch(.93 .02 88 / 0) 100%);
  animation:ob-respira-c 35s ease-in-out infinite alternate}
.ob-mancha--rosa{right:-18%;bottom:2%;width:64vmax;height:64vmax;max-width:860px;max-height:860px;
  background:radial-gradient(closest-side in oklch,oklch(.955 .03 70 / .7) 0%,oklch(.945 .024 78 / .3) 50%,oklch(.93 .02 88 / 0) 100%);
  animation:ob-respira-b 33s ease-in-out infinite alternate-reverse}
@keyframes ob-respira-a{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(5%,5%,0) scale(1.1)}}
@keyframes ob-respira-b{from{transform:translate3d(4%,0,0) scale(1.06)}to{transform:translate3d(-5%,5%,0) scale(1)}}
@keyframes ob-respira-c{from{transform:translate3d(0,4%,0) scale(.95)}to{transform:translate3d(-7%,-5%,0) scale(1.1)}}

/* ---- bordas: a noite se abre em arco em volta do fio e volta a fechar, sem corte ---- */
.ob-borda{position:absolute;left:0;right:0;height:var(--ob-borda);z-index:-2;pointer-events:none;
  --ob-arco:transparent 0%,oklch(.8 .035 84 / .04) 16%,oklch(.62 .05 78 / .12) 28%,oklch(.5 .052 74 / .25) 40%,oklch(.41 .05 72 / .43) 52%,oklch(.33 .04 74 / .63) 64%,oklch(.27 .026 90 / .81) 76%,oklch(.235 .014 170 / .94) 87%}
.ob-borda--cima{top:0;
  background:radial-gradient(var(--ob-arco-l) 100% at var(--ob-eixo-x) 100% in oklab,var(--ob-arco),var(--ob-noite-cima) 97%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 34%,rgba(0,0,0,.72) 56%,rgba(0,0,0,.34) 76%,rgba(0,0,0,.1) 90%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 34%,rgba(0,0,0,.72) 56%,rgba(0,0,0,.34) 76%,rgba(0,0,0,.1) 90%,transparent 100%)}
.ob-borda--baixo{bottom:0;
  background:radial-gradient(var(--ob-arco-l) 100% at var(--ob-eixo-x) 0% in oklab,var(--ob-arco),var(--ob-noite-baixo) 97%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 34%,rgba(0,0,0,.72) 56%,rgba(0,0,0,.34) 76%,rgba(0,0,0,.1) 90%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,#000 34%,rgba(0,0,0,.72) 56%,rgba(0,0,0,.34) 76%,rgba(0,0,0,.1) 90%,transparent 100%)}

/* ---- o fio de prumo ---- */
.ob-miolo{padding-left:var(--ob-recuo)}
.ob-prumo{position:absolute;z-index:3;left:var(--ob-eixo);top:calc(var(--ob-topo) * -1);bottom:calc(var(--ob-piao-a) - 6px);width:0;pointer-events:none}
.ob-fio{position:absolute;left:-1px;top:0;height:100%;--curso:2400px;
  background:linear-gradient(in oklab to bottom,var(--ouro-claro) 0,var(--ouro) calc(var(--ob-borda) * .5),#b08c46 var(--ob-borda),#a27f3a 100%);
  clip-path:inset(0 0 calc(100% - var(--ob-y,100%)) 0)}
.ob-fio::after{height:120px;animation-duration:13s;background:linear-gradient(to bottom,rgba(255,248,224,0),rgba(255,248,224,.6) 50%,rgba(255,248,224,0))}
.ob-piao{position:absolute;left:0;top:var(--ob-y,100%);width:auto;height:var(--ob-piao-a);margin-top:-2px;transform:translateX(-50%);overflow:visible;
  filter:drop-shadow(0 7px 9px rgba(109,82,32,.26))}
.ob-pousou .ob-piao{animation:ob-assenta 1.9s var(--sai) both}
@keyframes ob-assenta{0%{translate:0 0}32%{translate:0 3px}100%{translate:0 0}}

/* ---- abertura ---- */
.ob-linha{position:relative}
.ob-tit{margin-top:4px}
.ob-abre-texto{margin-top:20px}

/* a foto encosta no fio: ele é o lado esquerdo da janela */
.ob-vista{margin-top:clamp(34px,6vw,60px)}
.ob-foto{margin-left:calc(var(--ob-eixo) - var(--ob-recuo));margin-right:calc(var(--margem) * -1)}
.ob-janela{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--marfim-2)}
.ob-janela img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 38%;filter:sepia(.2) saturate(.92) contrast(1.03)}
.ob-janela::before{content:"";position:absolute;inset:0;z-index:1;background:oklch(.945 .032 84);mix-blend-mode:multiply;pointer-events:none}
.ob-janela::after{content:"";position:absolute;inset:0;z-index:2;border:solid var(--ob-fio-fino);border-width:1px 0 1px 0;pointer-events:none;
  background:linear-gradient(in oklab to top,oklch(.3 .03 70 / .18),oklch(.3 .03 70 / 0) 34%)}
.ob-prova{margin-top:24px}
.ob-prova blockquote{font-size:var(--mg-sub);font-weight:300;line-height:1.28;letter-spacing:-.005em;color:var(--tinta);text-wrap:balance}
.ob-prova figcaption{margin-top:10px;color:var(--ouro-texto)}
.ob-prova figcaption::before{content:"";display:inline-block;width:18px;height:1px;background:currentColor;vertical-align:middle;margin-right:9px}

/* ---- os quatro tempos: a primeira haste de cada numeral está no fio ---- */
.ob-tempos{list-style:none;margin-top:clamp(60px,10vw,128px);display:grid;row-gap:clamp(54px,7vw,96px)}
.ob-tempo{position:relative}
.ob-num{width:max-content;margin-left:calc(var(--ob-eixo) - var(--ob-recuo) - .164em);padding-top:.05em;margin-bottom:-.05em;
  font-family:var(--f-titulo);font-weight:400;font-size:var(--ob-num);line-height:.704;letter-spacing:.035em;color:var(--tinta);transition:color 1.8s var(--sai)}
/* a soleira: uma linha de nível onde o numeral e o nome do tempo pisam; sai do fio para os dois lados */
.ob-tempo::before,.ob-tempo::after,.ob-fecho::before,.ob-fecho::after{content:"";position:absolute;height:1px;transition:transform 1.7s var(--sai)}
.ob-tempo::before,.ob-tempo::after{top:calc(var(--ob-num) * .704 + 14px)}
.ob-tempo::before,.ob-fecho::before{display:none;transform-origin:100% 50%;background:linear-gradient(to left,var(--ob-fio-fino),var(--ob-fio-fino) 45%,rgba(122,92,34,0))}
.ob-tempo::after,.ob-fecho::after{left:calc(var(--ob-eixo) - var(--ob-recuo));right:0;transform-origin:0 50%;background:linear-gradient(to right,var(--ob-fio-fino),var(--ob-fio-fino) 30%,rgba(122,92,34,.06))}
.ob-tempo{display:grid;grid-template-columns:calc(var(--ob-num) * 1.2 - var(--ob-recuo) + var(--ob-eixo)) minmax(0,1fr);align-items:start}
.ob-num{grid-column:1;grid-row:1}
.ob-nome{grid-column:2;grid-row:1;align-self:end;display:flex;flex-direction:column;gap:5px;font-weight:300}
.ob-rotulo{font-family:var(--f-titulo);font-weight:500;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ouro-texto)}
.ob-etapa{font-size:var(--mg-sub);font-weight:300;line-height:1.16;letter-spacing:-.005em;color:var(--tinta)}
.ob-corpo{grid-column:1 / -1;margin-top:34px}
.ob-corpo .mg-texto + .mg-texto{margin-top:12px}
.ob-fala{margin-top:14px;max-width:34rem;font-size:var(--mg-corpo);font-weight:500;line-height:1.6;color:var(--tinta);text-indent:-.44em}
.ob-fala--fica{margin-top:0;font-weight:300;font-size:clamp(1.06rem,1rem + .45vw,1.28rem);line-height:1.55}
.ob-botao{margin-top:24px}

/* ---- a frase de fecho: a última soleira, onde o pião para ---- */
.ob-fecho{position:relative;margin-top:clamp(64px,10vw,128px);padding-bottom:26px;display:flex;flex-direction:column-reverse}
.ob-fecho::before,.ob-fecho::after{bottom:-9px}
.ob-frase{font-size:clamp(1.5rem,1.05rem + 2.2vw,2.7rem);line-height:1.2;letter-spacing:-.012em;text-indent:-.41em}
.ob-assina{margin-top:18px;font-family:var(--f-titulo);font-weight:500;font-size:.72rem;letter-spacing:.2em;line-height:1.7;text-transform:uppercase;color:var(--ouro-texto)}
.ob-assina span{display:block}

/* ---- com JS: o prumo desce com a rolagem; quando passa, o numeral ganha tinta e a soleira se estende ---- */
.ob-vivo .ob-tempo:not(.ob-assentado) .ob-num{color:var(--ob-palido)}
.ob-vivo .ob-tempo:not(.ob-assentado)::before,.ob-vivo .ob-tempo:not(.ob-assentado)::after,
.ob-vivo:not(.ob-pousou) .ob-fecho::before,.ob-vivo:not(.ob-pousou) .ob-fecho::after{transform:scaleX(0)}

/* no celular o botão dourado fixo da base já está na tela: aqui a ação vira contorno, para não haver dois iguais.
   Sem JS o fixo não aparece (.mg-js ausente) e este continua dourado. */
@media (max-width:899px){
  .mg-js .ob-botao{background:none;color:var(--tinta);box-shadow:inset 0 0 0 1px var(--ouro-texto)}
  .mg-js .ob-botao:hover,.mg-js .ob-botao:focus-visible{filter:none;box-shadow:inset 0 0 0 1px var(--tinta)}
}

@media (min-width:600px){
  .ob-janela{aspect-ratio:16/9}
  .ob-janela img{object-position:50% 30%}
}

/* ============ a partir de 900 px: o fio sai da margem e divide a página ============ */
@media (min-width:900px){
  .ob-secao{--ob-eixo:38%;--ob-recuo:0px;--ob-piao-a:64px;--ob-arco-l:118%;--ob-num:clamp(6rem,9.6vw,8.8rem);
    --ob-eixo-x:calc(50% - var(--ob-miolo-l) / 2 + var(--ob-miolo-l) * .38)}
  .ob-linha{display:grid;grid-template-columns:minmax(0,calc(var(--ob-eixo) - var(--ob-vao))) var(--ob-vao) var(--ob-vao) minmax(0,1fr);align-items:start}
  .ob-esq{grid-column:1;justify-self:end;text-align:right}
  .ob-dir{grid-column:4}

  .ob-abre .mg-sobre{justify-content:flex-end}
  .ob-abre .mg-sobre::after{order:1;width:calc(var(--ob-vao) - 16px);margin-right:calc((var(--ob-vao) - 2px) * -1)}
  .ob-tit{margin-top:0;font-size:min(var(--mg-tit),4.2vw)}
  .ob-abre-texto{margin-top:42px}

  .ob-vista{margin-top:clamp(40px,4.4vw,64px);align-items:end}
  .ob-foto{grid-column:3 / -1;grid-row:1;margin:0}
  .ob-janela{aspect-ratio:16/10}
  .ob-janela img{object-position:50% 38%}
  .ob-janela::after{border-width:1px 1px 1px 0}
  .ob-prova{grid-row:1;margin:0 0 6px}
  .ob-prova blockquote{max-width:11.5em;margin-left:auto}
  .ob-prova figcaption::before{display:none}
  .ob-prova figcaption::after{content:"";display:inline-block;width:calc(var(--ob-vao) - 16px);height:1px;background:currentColor;vertical-align:middle;margin-left:12px;margin-right:calc((var(--ob-vao) - 2px) * -1)}

  .ob-tempos{margin-top:clamp(84px,9vw,132px);row-gap:clamp(64px,6.4vw,96px)}
  .ob-tempo{grid-template-columns:minmax(0,calc(var(--ob-eixo) - var(--ob-vao))) var(--ob-vao) calc(var(--ob-num) * 1.36) minmax(0,1fr)}
  .ob-num{grid-column:3;margin-left:-.164em}
  .ob-tempo::before,.ob-fecho::before{display:block;left:8%;right:calc(100% - var(--ob-eixo))}
  .ob-tempo::after{left:var(--ob-eixo);right:auto;width:calc(var(--ob-num) * 1.12);background:var(--ob-fio-fino)}
  .ob-nome{grid-column:1;justify-self:end;align-self:start;height:calc(var(--ob-num) * .704);justify-content:flex-end;text-align:right;gap:8px}
  .ob-rotulo{font-size:.78rem}
  .ob-etapa{line-height:1.2}
  .ob-corpo{grid-column:4;grid-row:1;margin-top:-.4em}
  .ob-botao{margin-top:26px}

  .ob-fecho{flex-direction:initial;margin-top:clamp(96px,10vw,150px);padding-bottom:30px;align-items:end}
  .ob-fecho::after{left:var(--ob-eixo);right:0;background:linear-gradient(to right,var(--ob-fio-fino),var(--ob-fio-fino) 55%,rgba(122,92,34,0))}
  .ob-assina{margin:0 0 .5em}
  .ob-frase{font-size:clamp(2rem,3.3vw,3rem);line-height:1.16}
}

@media (max-width:374px){
  .ob-secao{--ob-eixo:13px;--ob-recuo:34px}
}

@media (prefers-reduced-motion:reduce){
  .ob-mancha{animation:none}
  .ob-num,.ob-tempo::before,.ob-tempo::after,.ob-fecho::before,.ob-fecho::after{transition:none}
  .ob-pousou .ob-piao{animation:none}
}

/* ============ avaliacoes ============ */
/* V · Avaliações: o filete separa a nota das palavras. Prefixo av-. */
.av{--av-vao:18px;background:linear-gradient(in oklch to bottom,var(--grafite-800) 0%,oklch(.232 .017 205) 46%,var(--grafite-800) 100%)}

/* ---- fundo: a mesma malha da noite, com mais ouro (é quando os pacientes falam) ---- */
.av-fundo{position:absolute;inset:0;z-index:-1;overflow:hidden}
.av-mancha{position:absolute;border-radius:50%;will-change:transform}
.av-mancha--ouro{left:-22%;top:-18%;width:92vmax;height:92vmax;max-width:1250px;max-height:1250px;
  background:radial-gradient(closest-side in oklch,oklch(.736 .102 83.9 / .2) 0%,oklch(.636 .098 82.6 / .09) 40%,oklch(.4 .05 120 / 0) 100%);
  animation:av-respira-a 31s ease-in-out infinite alternate}
.av-mancha--brasa{right:-14%;bottom:-34%;width:70vmax;height:70vmax;max-width:960px;max-height:960px;
  background:radial-gradient(closest-side in oklch,oklch(.68 .1 72 / .13) 0%,oklch(.55 .08 78 / .05) 46%,oklch(.3 .03 100 / 0) 100%);
  animation:av-respira-c 35s ease-in-out infinite alternate}
.av-mancha--claro{left:30%;top:-40%;width:100vmax;height:100vmax;max-width:1300px;max-height:1300px;
  background:radial-gradient(closest-side in oklch,oklch(.277 .016 224.2 / .7) 0%,oklch(.26 .015 218 / .32) 45%,oklch(.239 .013 204.7 / 0) 100%);
  animation:av-respira-b 27s ease-in-out infinite alternate}
.av-mancha--petroleo{right:-10%;top:-12%;width:46vmax;height:46vmax;max-width:620px;max-height:620px;
  background:radial-gradient(closest-side in oklch,oklch(.5 .076 208.4 / .16) 0%,oklch(.38 .05 210 / .06) 46%,oklch(.22 .014 212 / 0) 100%);
  animation:av-respira-c 33s ease-in-out infinite alternate-reverse}
@keyframes av-respira-a{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(6%,5%,0) scale(1.12)}}
@keyframes av-respira-b{from{transform:translate3d(4%,0,0) scale(1.06)}to{transform:translate3d(-5%,6%,0) scale(1)}}
@keyframes av-respira-c{from{transform:translate3d(0,4%,0) scale(.94)}to{transform:translate3d(-8%,-6%,0) scale(1.1)}}

/* ---- a nota (no celular: numeral | filete | contagem; embaixo, o índice) ---- */
.av-nota{display:grid;grid-template-columns:auto 2px minmax(0,1fr);grid-template-areas:"sobre sobre sobre" "num fil meta" "indice indice indice";column-gap:var(--av-vao);align-items:center}
.av-sobre{grid-area:sobre}
.av-tit{grid-area:num;justify-self:end;line-height:.8;letter-spacing:0;background:none}
/* o numeral: as letras douradas da parede; a luz que desce pelo filete passa antes por ele */
.av-num{display:block;font-size:clamp(5.4rem,26vw,6.8rem);line-height:.82;letter-spacing:-.01em;font-variant-numeric:lining-nums;padding:.04em 0 .06em;color:var(--ouro);
  background:linear-gradient(to bottom,rgba(255,250,232,0),rgba(255,250,232,.62) 50%,rgba(255,250,232,0)) 0 -52%/100% 34% no-repeat,var(--ouro-letra);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(8,12,13,.55)) drop-shadow(0 10px 30px rgba(8,12,13,.5));
  animation:av-luz 11s cubic-bezier(.45,0,.55,1) infinite}
@keyframes av-luz{0%{background-position:0 -52%,0 0}15%,100%{background-position:0 152%,0 0}}
.av-filete--m{grid-area:fil;align-self:stretch;margin-block:-12px -30px;--curso:240px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 66%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 66%,transparent 100%)}
.av-filete--d{display:none}
.av-meta{grid-area:meta;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.av-conta{font-family:var(--f-titulo);font-weight:500;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro-claro)}
.av-onde{font-weight:300;font-size:1.4rem;line-height:1.15;letter-spacing:-.005em;color:var(--marfim)}
.av-estrelas{display:block;margin-top:8px;overflow:visible}
.av-estrelas-cheias{fill:var(--ouro);opacity:.34}
.av-estrelas-fio{fill:none;stroke:var(--ouro);stroke-width:1.25;stroke-linejoin:round}
.mg-js .av-meta[data-mg]:not(.mg-visto){transform:translateX(46px)}

/* ---- índice: do que eles falam ---- */
.av-indice{grid-area:indice;margin-top:46px}
.av-indice[hidden]{display:none}
.av-rotulo{font-family:var(--f-titulo);font-weight:500;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--nevoa)}
.av-abas{display:flex;justify-content:space-between;gap:10px;margin-top:4px;border-bottom:1px solid rgba(200,164,90,.16)}
.av-aba{position:relative;flex:none;min-height:48px;padding:0 1px;background:none;border:0;border-radius:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
  font-family:var(--f-texto);font-weight:300;font-size:1rem;letter-spacing:-.005em;color:var(--nevoa);transition:color .4s}
.av-aba::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(to right,var(--ouro-claro),var(--ouro));transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--sai)}
.av-aba:hover{color:var(--marfim)}
.av-aba[aria-selected="true"]{color:var(--marfim)}
.av-aba[aria-selected="true"]::after{transform:scaleX(1)}
.av-aba:focus-visible{outline-offset:2px}

/* ---- as palavras ---- */
.av-palavras{margin-top:30px;min-width:0}
.av-paineis{display:grid;grid-template-columns:minmax(0,1fr);gap:56px}
.av-painel{min-width:0}
.av-pronto .av-painel:not(.av-ativo){display:none}
.av-mote{margin-bottom:22px;font-family:var(--f-texto);font-weight:300;font-size:.95rem;line-height:1.5;letter-spacing:.01em;color:var(--nevoa)}

.av-voz + .av-voz{margin-top:30px}
.av-voz blockquote p{font-weight:300;color:var(--marfim);text-indent:-.44em;text-wrap:pretty}
.av-voz figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:14px;font-size:.78rem;letter-spacing:.04em;color:var(--nevoa)}
.av-voz figcaption::before{content:"";align-self:center;width:18px;height:1px;background:var(--ouro)}
.av-voz figcaption b{font-family:var(--f-titulo);font-weight:500;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ouro-claro)}
.av-voz--g blockquote p{font-size:clamp(1.36rem,.9rem + 1.9vw,2.5rem);line-height:1.27;letter-spacing:-.016em}
.av-voz--m2 blockquote p{font-size:clamp(1.16rem,.95rem + .95vw,1.8rem);line-height:1.38;letter-spacing:-.01em}
.av-voz--m blockquote p{font-size:clamp(1.1rem,.98rem + .66vw,1.5rem);line-height:1.42;letter-spacing:-.006em}
.av-voz--p blockquote p{font-size:clamp(1.02rem,.98rem + .2vw,1.14rem);line-height:1.6;color:var(--texto)}
.av-voz--x blockquote p{font-size:clamp(3.2rem,1.6rem + 6.6vw,6.8rem);line-height:1;letter-spacing:-.035em;text-indent:-.24em}
.av-voz em{font-style:normal;color:var(--ouro-claro)}

.av-par{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.av-par .av-voz + .av-voz{margin-top:0}
.av-fio{display:block;height:1px;width:34px;background:var(--ouro)}
.av-grifo{margin-top:20px;opacity:.8}

.av-pronto .av-painel.av-troca .av-mote,.av-pronto .av-painel.av-troca .av-voz,.av-pronto .av-painel.av-troca .av-grifo{animation:av-chega 1s var(--sai) both}
.av-pronto .av-painel.av-troca .av-voz ~ .av-voz,.av-pronto .av-painel.av-troca .av-fio ~ .av-voz{animation-delay:.12s}
@keyframes av-chega{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}

.av-pe{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 28px;margin-top:34px}
.av-link svg{fill:none;stroke:var(--ouro);stroke-width:1.5}

/* ============ a partir de 600 px: índice folgado, o par vira espelho ============ */
@media (min-width:600px){
  .av{--av-vao:26px}
  .av-num{font-size:8.4rem}
  .av-abas{justify-content:flex-start;gap:38px}
  .av-aba{font-size:1.08rem}
  .av-par{grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);column-gap:28px}
  .av-fio{width:1px;height:auto;background:linear-gradient(to bottom,var(--ouro),rgba(200,164,90,.1))}
  .av-voz--ele{text-align:right}
  .av-voz--ele blockquote p{text-indent:0;margin-right:-.44em}
  .av-voz--ele figcaption{justify-content:flex-end}
  .av-voz--ele figcaption::before{order:3}
}

/* ============ DESKTOP: nota à esquerda, palavras à direita, as duas encostadas no filete ============ */
@media (min-width:900px){
  .av{--av-vao:clamp(30px,3.4vw,48px)}
  .av-palco{display:grid;grid-template-columns:minmax(0,.64fr) 2px minmax(0,1fr);column-gap:var(--av-vao);align-items:stretch}
  .av-nota{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
  .av-sobre{margin-bottom:30px;white-space:nowrap}
  .av-sobre::after{order:3}
  .av-filete--m{display:none}
  .av-filete--d{display:block;margin-block:-30px;--curso:760px;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 86%,transparent 100%)}
  .av-num{font-size:clamp(10rem,20vw,18.5rem);margin-right:-.035em}
  .av-meta{align-items:flex-end;margin-top:18px;gap:8px}
  .av-conta{font-size:.86rem;letter-spacing:.22em;margin-right:-.22em}
  .av-onde{font-size:1.65rem}
  .av-estrelas{margin-top:10px}
  .mg-js .av-meta[data-mg]:not(.mg-visto),.mg-js .av-indice[data-mg]:not(.mg-visto){transform:translateX(-46px)}

  .av-indice{margin-top:auto;padding-top:46px;display:flex;flex-direction:column;align-items:flex-end}
  .av-rotulo{margin-right:-.22em;margin-bottom:8px}
  .av-abas{flex-direction:column;align-items:flex-end;gap:0;margin-top:0;border-bottom:0}
  .av-aba{min-height:40px;padding:0;font-size:1.18rem}
  .av-aba::after{left:calc(100% + 16px);right:auto;top:50%;bottom:auto;width:calc(var(--av-vao) - 4px);background:linear-gradient(to right,rgba(200,164,90,.2),var(--ouro-claro) 70%)}

  .av-palavras{margin-top:0;display:flex;flex-direction:column}
  .av-paineis{flex:1;gap:64px}
  .av-pronto .av-painel{grid-area:1/1;display:flex;flex-direction:column}
  .av-pronto .av-painel:not(.av-ativo){display:flex;visibility:hidden}
  .av-mote{margin:-4px 0 31px;font-size:1rem}
  .av-pronto .av-voz + .av-voz{margin-top:auto;padding-top:36px}
  .av-pronto .av-par{margin-top:auto}
  .av-pronto .av-grifo{margin-bottom:auto}
  .av-voz--p{max-width:38rem}
  .av-voz--x blockquote p{text-indent:-.3em}
  .av-painel:focus-visible{outline-offset:10px}
  .av-par{column-gap:34px}
  .av-par .av-voz + .av-voz,.av-pronto .av-par .av-voz + .av-voz{margin-top:0;padding-top:0}
  .av-pe{margin-top:0;padding-top:40px;min-height:40px;box-sizing:content-box;align-items:center}
}

@media (min-width:900px) and (max-width:1020px){
  .av-sobre{letter-spacing:.18em}
  .av-sobre::after{display:none}
}

@media (max-width:374px){
  .av{--av-vao:14px}
  .av-aba{font-size:.96rem}
}

@media (max-width:349px){
  .av-abas{gap:6px}
  .av-aba{font-size:.86rem}
  .av-num{font-size:4.9rem}
}

@media (prefers-reduced-motion:reduce){
  .av-mancha,.av-num{animation:none}
  .av-aba::after{transition:none}
  .av-pronto .av-painel.av-troca .av-mote,.av-pronto .av-painel.av-troca .av-voz,.av-pronto .av-painel.av-troca .av-grifo{animation:none}
}

/* ============ perguntas ============ */
/* VI · Perguntas. Prefixo pe-. Seção de leitura: título fixo à esquerda, lista à direita.
   O filete marca a resposta aberta: pende do numeral, desce ao lado do texto e fica enquanto ela estiver aberta.
   Sem JavaScript (sem .pe-viva) todas as respostas aparecem, com o filete ao lado de cada uma. */
.pe{background:linear-gradient(in oklch to bottom,var(--grafite-800) 0%,var(--grafite-900) 24%,var(--grafite-900) 76%,var(--grafite-800) 100%)}
.pe-fundo{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.pe-mancha{position:absolute;border-radius:50%;will-change:transform}
.pe-mancha--ouro{right:-20%;top:-8%;width:72vmax;height:72vmax;max-width:1000px;max-height:1000px;
  background:radial-gradient(closest-side in oklch,oklch(.736 .102 83.9 / .085) 0%,oklch(.636 .098 82.6 / .04) 42%,oklch(.4 .05 120 / 0) 100%);
  animation:pe-respira-a 33s ease-in-out infinite alternate}
.pe-mancha--petroleo{left:-24%;bottom:-14%;width:64vmax;height:64vmax;max-width:860px;max-height:860px;
  background:radial-gradient(closest-side in oklch,oklch(.5 .076 208.4 / .17) 0%,oklch(.38 .05 210 / .07) 46%,oklch(.22 .014 212 / 0) 100%);
  animation:pe-respira-b 29s ease-in-out infinite alternate}
@keyframes pe-respira-a{from{transform:translate3d(-2%,-2%,0) scale(1)}to{transform:translate3d(5%,6%,0) scale(1.1)}}
@keyframes pe-respira-b{from{transform:translate3d(0,3%,0) scale(.95)}to{transform:translate3d(6%,-5%,0) scale(1.08)}}

.pe-miolo{max-width:1080px}
.pe-tit{font-size:clamp(1.65rem,1.2rem + 2.1vw,2.75rem)}
.pe-apoio{margin-top:22px;max-width:23rem}

/* quem responde: nome inteiro e registro; o filete acende ao lado de quem tem resposta aberta */
.pe-vozes{list-style:none;display:grid;gap:14px;margin-top:26px}
.pe-voz{position:relative;display:grid;gap:4px;padding-left:18px}
.pe-voz::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:1px;background:var(--linha)}
.pe-voz b{font-family:var(--f-titulo);font-weight:500;font-size:.76rem;letter-spacing:.15em;line-height:1.35;text-transform:uppercase;color:var(--ouro-claro)}
.pe-voz span{font-size:.74rem;letter-spacing:.04em;line-height:1.5;color:var(--nevoa);font-variant-numeric:tabular-nums}
.pe-voz-fio{position:absolute;left:0;top:3px;bottom:3px;transform-origin:50% 0}
.pe-voz-fio::after{display:none}

/* ---- lista: numerais pendurados na margem, fios só sob o texto ---- */
.pe-col{margin-top:40px}
.pe-lista{list-style:none}
.pe-item{--pe-num:38px;--pe-sinal:26px;--pe-fio-topo:56px;--pe-fio-pe:32px;position:relative}
.pe-item::after,.pe-item:first-child::before{content:"";position:absolute;left:var(--pe-num);right:0;height:1px;background:rgba(200,164,90,.17)}
.pe-item::after{bottom:0}
.pe-item:first-child::before{top:0}
.pe-perg{font-size:1rem;font-weight:400;line-height:inherit}
.pe-abre{display:grid;grid-template-columns:var(--pe-num) minmax(0,1fr) var(--pe-sinal);align-items:baseline;width:calc(100% + 24px);margin-inline:-12px;padding:24px 12px 22px;
  background:none;border:0;border-radius:0;text-align:left;cursor:default;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pe-num{grid-column:1;grid-row:1;font-family:var(--f-titulo);font-weight:500;font-size:.74rem;letter-spacing:.12em;color:var(--ouro);font-variant-numeric:lining-nums;transition:color .6s var(--sai)}
.pe-q{grid-column:2;grid-row:1;text-wrap:pretty;transition:color .6s var(--sai)}
.pe-quem{grid-column:2;grid-row:2;margin-top:9px;font-family:var(--f-titulo);font-weight:500;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--nevoa)}
.pe-quem b{font-weight:500;color:var(--ouro-claro)}
.pe-sinal{display:none;grid-column:3;grid-row:1;justify-self:end;align-self:center;position:relative;width:13px;height:13px}
.pe-sinal::before,.pe-sinal::after{content:"";position:absolute;left:0;top:6px;width:13px;height:1px;background:var(--ouro);transition:transform .8s var(--sai),opacity .8s var(--sai)}
.pe-sinal::after{transform:rotate(90deg)}

/* o filete: do pé do numeral até o fim da resposta */
.pe-fio{position:absolute;left:7px;top:var(--pe-fio-topo);bottom:var(--pe-fio-pe);--curso:520px;transform-origin:50% 0;pointer-events:none}

.pe-resp{display:grid;grid-template-rows:1fr}
.pe-dentro{min-height:0;overflow:hidden}
.pe-corpo{padding:2px var(--pe-sinal) 30px var(--pe-num)}
.pe-texto{max-width:33rem}
.pe-dito{color:var(--marfim)}
/* a fala literal fecha a resposta, em corpo maior */
.pe-fala{max-width:26rem;margin-top:18px;font-weight:300;font-size:clamp(1.12rem,1.02rem + .5vw,1.34rem);line-height:1.36;letter-spacing:-.005em;color:var(--marfim);text-wrap:balance}

/* ---- com JavaScript: acordeão ---- */
.pe-viva .pe-abre{cursor:pointer}
.pe-viva .pe-sinal{display:block}
.pe-viva .pe-item:not(.pe-aberta) .pe-resp{grid-template-rows:0fr;visibility:hidden}
.pe-viva .pe-item:not(.pe-aberta) .pe-corpo{opacity:0;transform:translateY(10px)}
.pe-viva .pe-fio,.pe-viva .pe-voz-fio{transform:scaleY(0)}
.pe-viva.pe-vista .pe-aberta .pe-fio,.pe-viva.pe-vista .pe-voz--agora .pe-voz-fio{transform:none}
/* o brilho só corre em resposta aberta e recomeça a cada abertura, depois de o filete descer */
.pe-viva .pe-fio::after{animation:none}
.pe-viva.pe-vista .pe-aberta .pe-fio::after{animation:mg-brilho 11s cubic-bezier(.45,0,.55,1) 1s infinite}
.pe-viva .pe-aberta .pe-sinal::after{transform:rotate(0deg);opacity:0}
.pe-viva .pe-aberta .pe-q,.pe-viva .pe-aberta .pe-num{color:var(--ouro-claro)}
.pe-anima .pe-resp{transition:grid-template-rows .9s var(--sai),visibility 0s linear .9s}
.pe-anima .pe-aberta .pe-resp{transition:grid-template-rows .9s var(--sai),visibility 0s}
.pe-anima .pe-corpo{transition:opacity .45s var(--sai),transform .7s var(--sai)}
.pe-anima .pe-aberta .pe-corpo{transition:opacity 1s var(--sai) .12s,transform 1.1s var(--sai) .12s}
.pe-anima .pe-fio,.pe-anima .pe-voz-fio{transition:transform .5s var(--sai)}
.pe-anima.pe-vista .pe-aberta .pe-fio{transition:transform 1.4s var(--sai) .15s}
.pe-anima.pe-vista .pe-voz--agora .pe-voz-fio{transition:transform 1.1s var(--sai) .3s}
.pe-sinal{transition:transform .6s var(--sai)}
@media (hover:hover){
  .pe-viva .pe-abre:hover .pe-q,.pe-viva .pe-abre:hover .pe-num{color:var(--ouro-claro)}
  .pe-viva .pe-abre:hover .pe-sinal{transform:scale(1.3)}
}
.pe-abre:focus-visible{outline:1px solid var(--ouro-claro);outline-offset:-1px}

/* ---- depois da lista ---- */
.pe-fim{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:44px}
.pe-fim .mg-botao{width:100%}
.pe-nota{max-width:22rem;line-height:1.6}

/* ============ a partir do tablet ============ */
@media (min-width:700px){
  .pe-item{--pe-num:60px;--pe-sinal:40px;--pe-fio-topo:68px;--pe-fio-pe:42px}
  .pe-abre{padding-top:30px;padding-bottom:26px}
  .pe-num{font-size:.78rem}
  .pe-corpo{padding-bottom:40px}
  .pe-fim{padding-left:60px}
  .pe-fim .mg-botao{width:auto}
}

/* ============ desktop: o título fica, a lista rola, a chamada espera no pé da coluna ============ */
@media (min-width:900px){
  .pe-miolo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto;column-gap:clamp(48px,7vw,104px);row-gap:56px;align-items:start}
  .pe-trilho{grid-column:1;grid-row:1;align-self:stretch}
  .pe-vozes{margin-top:34px}
  .pe-col{grid-column:2;grid-row:1 / 3;margin-top:0}
  .pe-apoio{margin-top:26px}
  .pe-fim{grid-column:1;grid-row:2;align-self:end;margin-top:0;padding-left:0;padding-top:28px;border-top:1px solid rgba(200,164,90,.17);max-width:23rem}
}

/* o título só acompanha a rolagem quando cabe inteiro na janela; corre dentro do trilho e para acima da chamada */
@media (min-width:900px) and (min-height:640px){
  .pe-cab{position:sticky;top:104px}
}

@media (prefers-reduced-motion:reduce){
  .pe-mancha{animation:none}
  .pe .pe-resp,.pe .pe-corpo,.pe .pe-fio,.pe .pe-voz-fio,.pe .pe-sinal,.pe .pe-q,.pe .pe-num,.pe .pe-sinal::before,.pe .pe-sinal::after{transition:none !important}
}

/* ============ onde ============ */
/* VII · Onde estamos — o filete desce do alto da seção e pousa no ponto do mapa */
.on-secao{--on-vao:clamp(40px,5.4vw,84px);--on-queda:84px;--on-sangra:var(--margem);--on-r:clamp(1.4rem,7.35vw,2.5rem);--on-fl:min(64vw,250px);background:var(--grafite-800)}

/* fundo: noite com mais petróleo (seção de serviço) e um resto de ouro perto do endereço */
.on-fundo{position:absolute;inset:0;z-index:-1;overflow:hidden;
  background:linear-gradient(in oklch to bottom,var(--grafite-800) 0%,oklch(.205 .016 214) 44%,var(--grafite-900) 100%)}
.on-mancha{position:absolute;border-radius:50%;will-change:transform}
.on-mancha--petroleo{right:-26%;top:-12%;width:96vmax;height:96vmax;max-width:1240px;max-height:1240px;
  background:radial-gradient(closest-side in oklch,oklch(.5 .076 208.4 / .24) 0%,oklch(.38 .05 210 / .1) 46%,oklch(.22 .014 212 / 0) 100%);
  animation:on-respira-a 33s ease-in-out infinite alternate}
.on-mancha--ouro{left:-30%;top:-22%;width:80vmax;height:80vmax;max-width:1000px;max-height:1000px;
  background:radial-gradient(closest-side in oklch,oklch(.736 .102 83.9 / .1) 0%,oklch(.636 .098 82.6 / .045) 42%,oklch(.4 .05 120 / 0) 100%);
  animation:on-respira-b 29s ease-in-out infinite alternate}
.on-mancha--sombra{left:-10%;bottom:-40%;width:120vmax;height:70vmax;
  background:radial-gradient(closest-side in oklch,oklch(.16 .012 212 / .8) 0%,oklch(.19 .014 212 / 0) 100%);
  animation:on-respira-a 35s ease-in-out infinite alternate-reverse}
@keyframes on-respira-a{from{transform:translate3d(3%,-2%,0) scale(1)}to{transform:translate3d(-6%,5%,0) scale(1.1)}}
@keyframes on-respira-b{from{transform:translate3d(-3%,2%,0) scale(1.06)}to{transform:translate3d(6%,-3%,0) scale(1)}}

.on-miolo{display:grid;grid-template-columns:minmax(0,1fr)}
.on-lugar{display:contents}
.on-cabeca{order:1}.on-mapa{order:2}.on-corpo{order:3}.on-ficha{order:4}

/* ---- o endereço como título: rua e número travados na mesma medida, como os algarismos de uma fachada ---- */
.on-cabeca{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.on-end{font-family:var(--f-titulo);font-weight:500;text-transform:uppercase;line-height:1}
.on-end span{display:block;color:var(--ouro);background:var(--ouro-letra);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.on-rua{padding-top:.3em;margin-top:-.3em;font-size:var(--on-r);letter-spacing:.06em;white-space:nowrap}
.on-num{margin-top:.02em;margin-right:-.03em;font-weight:400;font-size:calc(var(--on-r) * 5.4);line-height:.9;letter-spacing:.03em;filter:drop-shadow(0 10px 28px rgba(8,12,13,.5))}
.on-compl{display:flex;flex-wrap:wrap;justify-content:center;gap:0 1.6em;margin-top:12px;font-family:var(--f-titulo);font-size:.7rem;font-weight:500;letter-spacing:.2em;line-height:1.9;text-transform:uppercase;color:var(--nevoa)}
.on-compl span{white-space:nowrap}
.on-compl i{font-style:normal;color:var(--ouro);margin:0 .3em}

/* ---- o mapa: a cidade sai da noite; ouro em volta do ponto, petróleo nas bordas ---- */
.on-mapa{position:relative;margin:var(--on-queda) calc(-1 * var(--on-sangra)) 0;height:calc(var(--on-fl) * 1.25 + 256px)}
.on-mapa::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--linha);pointer-events:none}
.on-janela{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#151c1d;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 10%,#000 22%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 10%,#000 22%)}
.on-quadro{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;
  filter:grayscale(1) invert(.92) contrast(.9) sepia(.3) hue-rotate(140deg) saturate(.7) brightness(.92)}
.on-livre .on-quadro{pointer-events:auto}
.on-tinta{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color;
  background:radial-gradient(circle at 50% 50%,rgba(200,164,90,.95) 0,rgba(200,164,90,.62) 96px,rgba(40,98,108,.5) 290px)}
.on-veu{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 78% at 50% 50%,rgba(13,22,24,0) 46%,rgba(13,22,24,.42) 100%);
  transition:opacity .8s var(--sai)}
.on-livre .on-veu{opacity:.3}

/* o filete: vem de fora e termina no ponto */
.on-mapa .on-filete{position:absolute;z-index:2;left:50%;margin-left:-1px;top:calc(-1 * var(--on-queda) + 12px);bottom:50%;--curso:420px;transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 44px);mask-image:linear-gradient(to bottom,transparent 0,#000 44px)}
.on-alfinete{position:absolute;z-index:4;left:50%;top:50%;width:0;height:0;pointer-events:none}
.on-alfinete i{position:absolute;display:block}
.on-halo{left:-46px;top:-78px;width:92px;height:112px;border-radius:50%;background:radial-gradient(closest-side,rgba(15,21,22,.97) 0,rgba(15,21,22,.92) 48%,rgba(15,21,22,0) 100%)}
.on-gema{left:-8px;top:-8px;width:16px;height:16px;transform:rotate(45deg);background:linear-gradient(135deg in oklch,#fbf3d6,var(--ouro) 55%,var(--ouro-fundo));box-shadow:0 0 0 3px rgba(13,22,24,.92),0 0 26px 4px rgba(233,215,166,.5)}
.on-aro{left:-15px;top:-15px;width:30px;height:30px;transform:rotate(45deg);border:1px solid rgba(233,215,166,.55)}
.on-pulso{left:-15px;top:-15px;width:30px;height:30px;border:1px solid var(--ouro-claro);transform:rotate(45deg) scale(1);opacity:0;animation:on-pulso 11s cubic-bezier(.2,.6,.3,1) infinite}
/* o pulso responde ao brilho que desce pelo filete (mesmo ciclo de 11 s) */
@keyframes on-pulso{0%,57%{transform:rotate(45deg) scale(1);opacity:0}61%{opacity:.8}94%,100%{transform:rotate(45deg) scale(3.4);opacity:0}}

/* ---- a foto é a bandeira do alfinete: o ponto se abre nos dois à mesa ---- */
.on-foto{position:absolute;z-index:3;left:50%;top:calc(50% + 40px);width:var(--on-fl);margin:0 0 0 calc(var(--on-fl) / -2);background:rgba(13,21,23,.94);border:1px solid var(--linha);border-top-color:var(--ouro);
  transition:opacity .9s var(--sai),transform 1.2s var(--sai),visibility 0s}
.on-foto::before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:19px;background:linear-gradient(to bottom,rgba(200,164,90,0),var(--ouro))}
.on-foto-janela{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--grafite-700)}
.on-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 28%}
.on-foto figcaption{padding:10px 8px 11px;font-weight:300;font-size:.88rem;white-space:nowrap;line-height:1.3;letter-spacing:.005em;color:var(--marfim);text-align:center}

/* liberar o mapa: fora da janela, para nunca cobrir a cidade nem os créditos */
.on-explorar{display:none;position:absolute;z-index:4;right:var(--on-sangra);top:100%;margin-top:6px;align-items:center;gap:9px;min-height:44px;padding:0 2px;border:0;border-bottom:1px solid var(--linha);background:none;cursor:pointer;
  font-size:.8rem;font-weight:400;letter-spacing:.03em;color:var(--marfim);transition:border-color .3s,color .3s}
.on-js .on-explorar{display:inline-flex}
.on-explorar svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--ouro);stroke-width:1.2;stroke-linecap:round}
.on-explorar:hover,.on-explorar:focus-visible{border-color:var(--ouro);color:var(--ouro-claro)}

/* pouso e decolagem (.on-pousou vem do onde.js quando a janela está à vista; .on-livre, do botão) */
.on-js .on-filete{transform:scaleY(0);transition:transform 2.6s var(--sai)}
.on-js .on-pousou .on-filete{transform:none}
.on-js .on-pousou.on-livre .on-filete{transform:scaleY(var(--on-recuo,.4));transition-duration:1.2s}
.on-js .on-alfinete{opacity:0;transform:translateY(-18px);transition:opacity .9s var(--sai),transform 1.2s var(--sai)}
.on-js .on-foto{opacity:0;transform:translateY(16px)}
.on-js .on-pousou .on-alfinete{opacity:1;transform:none;transition-delay:.85s}
.on-js .on-pousou .on-foto{opacity:1;transform:none;transition-delay:1.4s}
.on-js .on-pousou.on-livre .on-alfinete{opacity:0;transform:translateY(-18px);transition-delay:0s}
.on-js .on-pousou.on-livre .on-foto{opacity:0;visibility:hidden;transform:translateY(16px);transition-delay:0s,0s,.9s}

/* ---- o que o paciente precisa, na ordem em que decide: quando, como, por onde ---- */
.on-rotulo{font-family:var(--f-titulo);font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ouro)}
.on-corpo{display:flex;flex-direction:column;align-items:stretch;min-width:0;margin-top:82px}
.on-agora{display:flex;align-items:center;gap:13px;margin-top:14px;font-weight:300;font-size:clamp(1.12rem,1rem + .55vw,1.34rem);line-height:1.3;letter-spacing:-.003em;color:var(--texto)}
.on-agora[hidden]{display:none}
.on-agora i{flex:none;width:9px;height:9px;transform:rotate(45deg);border:1px solid var(--nevoa)}
.on-agora.on-aberto{color:var(--ouro-claro)}
.on-agora.on-aberto i{border-color:var(--ouro-claro);background:var(--ouro-claro);box-shadow:0 0 14px rgba(233,215,166,.65)}
.on-horas{margin-top:14px;padding-top:14px;border-top:1px solid rgba(200,164,90,.16)}
.on-hora{display:flex;align-items:baseline;gap:.6em;font-weight:300;font-size:clamp(1.18rem,1rem + 1.05vw,1.62rem);line-height:1.5;letter-spacing:-.005em}
.on-hora dt{display:flex;flex:1;align-items:baseline;gap:.6em;color:var(--nevoa);white-space:nowrap}
.on-hora dt::after{content:"";flex:1;min-width:18px;height:1px;background:rgba(200,164,90,.2);transform:translateY(-.3em)}
.on-hora dd{color:var(--nevoa);font-variant-numeric:tabular-nums;white-space:nowrap}
.on-hora.on-hoje dt,.on-hora.on-hoje dd{color:var(--marfim)}
.on-hora.on-hoje dt::after{background:linear-gradient(to right,var(--ouro),rgba(200,164,90,.3))}
.on-secao:not(.on-js) .on-hora dt,.on-secao:not(.on-js) .on-hora dd{color:var(--marfim)}
.on-nota{margin-top:10px}

.on-apoio{margin-top:34px;text-wrap:pretty}
.on-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:26px}
.on-acoes .mg-botao{width:100%;margin-bottom:8px}
.on-acoes .mg-link{gap:9px}
.on-quebra{display:none}
.on-seta{width:11px;height:11px;fill:none;stroke:var(--ouro);stroke-width:1.5}
.on-icone{width:14px;height:14px;flex:none;fill:none;stroke:var(--ouro);stroke-width:1.1;stroke-linejoin:round}
.on-fone{display:inline-flex;align-items:center;gap:9px;padding:8px 2px;font-size:.9rem;color:var(--marfim);font-variant-numeric:tabular-nums;border-bottom:1px solid var(--linha);transition:color .3s,border-color .3s}
.on-fone:hover,.on-fone:focus-visible{color:var(--ouro-claro);border-color:var(--ouro)}

.on-ficha{margin-top:44px;padding-top:22px;border-top:1px solid rgba(200,164,90,.16)}
.on-ficha ul{list-style:none;margin-top:10px}
.on-ficha li{position:relative;padding-left:18px;font-size:.86rem;font-weight:300;line-height:1.6;color:var(--texto)}
.on-ficha li::before{content:"";position:absolute;left:1px;top:.62em;width:5px;height:5px;transform:rotate(45deg);background:var(--ouro)}
.on-ficha li + li{margin-top:4px}

@media (min-width:600px) and (max-width:899px){
  .on-secao{--on-fl:280px}
  .on-corpo,.on-ficha{width:100%;max-width:31rem;margin-inline:auto}
}

/* ============ a partir do tablet deitado ============ */
@media (min-width:900px){
  .on-secao{--on-queda:var(--mg-respiro);--on-sangra:max(var(--margem),calc((100vw - var(--mg-miolo)) / 2));--on-r:clamp(1.6rem,3.02vw,2.72rem);--on-entra:clamp(48px,8vw,120px)}
  .on-miolo{grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);grid-template-rows:auto 1fr;column-gap:var(--on-vao);align-items:start}
  .on-cabeca,.on-mapa,.on-corpo,.on-ficha{order:0}
  .on-cabeca{grid-column:1;grid-row:1;align-items:flex-start;text-align:left}
  .on-lugar{display:flex;flex-direction:column;min-width:0;grid-column:2;grid-row:1 / 3;align-self:stretch}
  .on-corpo{grid-column:1;grid-row:2;margin-top:40px}
  .on-compl{justify-content:space-between;width:calc(var(--on-r) * 11.32);margin-top:16px}

  /* o mapa sangra até a borda direita da tela, some na noite à esquerda e tem a altura da coluna do endereço */
  .on-mapa{flex:1 1 auto;margin:0 calc(-1 * var(--on-sangra)) 0 calc(-1 * var(--on-entra));height:auto;min-height:610px}
  .on-mapa::after{background:linear-gradient(to right,rgba(200,164,90,0) 14%,var(--linha) 46%)}
  .on-janela{
    -webkit-mask-image:linear-gradient(to right,transparent 9%,rgba(0,0,0,.45) 22%,#000 40%),linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 10%,#000 20%);
    mask-image:linear-gradient(to right,transparent 9%,rgba(0,0,0,.45) 22%,#000 40%),linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 10%,#000 20%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .on-mapa .on-filete{top:calc(-1 * var(--on-queda));--curso:560px}

  .on-secao{--on-fl:270px}
  .on-foto{top:calc(50% + 44px)}
  .on-foto figcaption{font-size:.95rem}

  .on-horas{max-width:30rem}
  .on-agora,.on-nota{max-width:30rem}
  .on-acoes{gap:16px 28px;margin-top:28px}
  .on-acoes .mg-botao{width:auto;margin-bottom:0}
  .on-quebra{display:block;flex-basis:100%;height:0}

  .on-ficha{flex:none;margin:16px 190px 0 0;padding-top:0;border-top:0}
}

/* tela larga: a bandeira pende do alfinete para a direita, fora do caminho da avenida */
@media (min-width:1200px){
  .on-mapa{min-height:clamp(560px,46vw,680px)}
  .on-foto{left:calc(50% + 52px);top:50%;width:clamp(250px,21vw,310px);margin:-1px 0 0}
  .on-foto::before{left:auto;right:100%;bottom:auto;top:-1px;width:37px;height:1px;background:linear-gradient(to right,rgba(200,164,90,0),var(--ouro))}
  .on-foto-janela{aspect-ratio:3/2}
  .on-foto figcaption{padding:12px 14px 13px;text-align:left}
  .on-js .on-foto{transform:translateX(18px)}
  .on-js .on-pousou.on-livre .on-foto{transform:translateX(18px)}
}

@media (prefers-reduced-motion:reduce){
  .on-mancha,.on-pulso{animation:none}
  .on-js .on-filete,.on-js .on-alfinete,.on-js .on-foto,.on-veu{transition:none}
  .on-js .on-filete{transform:none}
  .on-js .on-alfinete,.on-js .on-foto{opacity:1;transform:none}
  .on-js .on-pousou.on-livre .on-alfinete,.on-js .on-pousou.on-livre .on-foto{opacity:0}
}

/* ============ fecho ============ */
/* Fecho: as duas metades se encontram outra vez. Prefixos fc- (fecho) e rp- (rodapé). */
.fc{padding-bottom:0;background:linear-gradient(in oklch to bottom,var(--grafite-800),var(--grafite-700) 40%,var(--grafite-900))}
.fc-fundo{position:absolute;inset:0;z-index:-1;overflow:hidden}
.fc-mancha{position:absolute;border-radius:50%}
.fc-mancha--ouro{left:-20%;top:10%;width:90vmax;height:90vmax;max-width:1200px;max-height:1200px;background:radial-gradient(closest-side in oklch,oklch(.736 .102 83.9 / .13),oklch(.5 .07 90 / 0));animation:hb-respira-a 31s ease-in-out infinite alternate}
.fc-mancha--petroleo{right:-18%;bottom:-10%;width:70vmax;height:70vmax;max-width:900px;max-height:900px;background:radial-gradient(closest-side in oklch,oklch(.5 .076 208.4 / .26),oklch(.22 .014 212 / 0));animation:hb-respira-c 35s ease-in-out infinite alternate}

.fc-cena{position:relative;max-width:1320px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(18px,2.6vw,48px)}
.fc-titulo{grid-column:1/-1;grid-row:1;position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--vao);font-family:var(--f-titulo);font-weight:500;font-size:clamp(1.9rem,5.6vw,5.2rem);line-height:1;letter-spacing:.045em;text-transform:uppercase;white-space:nowrap}
.fc-titulo span{display:block;color:var(--ouro);background:var(--ouro-letra);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 6px 22px rgba(8,12,13,.55))}
.fc-t-esq{justify-self:end}.fc-t-dir{justify-self:start}
.fc-sob{grid-column:1/-1;grid-row:1;align-self:end;position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--vao);margin-bottom:-22px;transform:translateY(100%)}
.fc-sob p{font-size:.86rem;line-height:1.5;color:var(--nevoa);max-width:22rem}
.fc-sob p:first-child{justify-self:end;text-align:right;font-weight:300;font-size:1rem;color:var(--marfim)}
.fc-sob p:last-child{justify-self:start;align-self:center}
.fc-sob p:last-child::before{content:"";display:inline-block;width:18px;height:1px;background:var(--ouro);vertical-align:middle;margin-right:9px}

.fc-foto{grid-column:2;grid-row:2;position:relative;margin:clamp(-64px,-4.4vw,-20px) 0 0;width:min(42vw,36rem);aspect-ratio:1091/1560;left:calc(min(42vw,36rem) * -.03)}
.fc-foto::before{content:"";position:absolute;z-index:-1;left:-18%;right:-18%;top:6%;height:62%;border-radius:50%;background:radial-gradient(closest-side in oklch,oklch(.78 .09 84 / .2),oklch(.6 .08 84 / .07) 55%,oklch(.4 .04 100 / 0));animation:fc-luz 14s ease-in-out infinite alternate}
@keyframes fc-luz{from{opacity:.65;transform:scale(.96)}to{opacity:1;transform:scale(1.05)}}
.fc-foto-mascara{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 20%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 2%,#000 13%,#000 74%,rgba(0,0,0,.4) 88%,transparent 99%);
  mask-image:linear-gradient(to right,transparent 0,#000 20%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 2%,#000 13%,#000 74%,rgba(0,0,0,.4) 88%,transparent 99%);-webkit-mask-composite:source-in;mask-composite:intersect}
.fc-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;max-width:none}
/* o filete sai do vão do título, passa entre as duas cabeças e termina onde as costas se encostam */
.fc-eixo{position:absolute;z-index:2;left:53%;top:clamp(-96px,-6.4vw,-40px);height:calc(33.5% + clamp(40px,6.4vw,96px));margin-left:-1px;--curso:460px;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent)}

.fc-lado{grid-row:2;position:relative;z-index:3;align-self:start;display:flex;flex-direction:column;gap:16px;max-width:21rem;padding-top:22px;margin-top:calc(min(42vw,36rem) * .52)}
.fc-lado::before{content:"";position:absolute;top:0;width:34px;height:1px;background:var(--ouro)}
.fc-lado--esq{grid-column:1;justify-self:end;align-items:flex-end;text-align:right}
.fc-lado--esq::before{right:0}
.fc-lado--dir{grid-column:3;justify-self:start;align-items:flex-start}
.fc-lado--dir::before{left:0}
.fc-rotulo{font-family:var(--f-titulo);font-size:.74rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ouro-claro)}
.fc-lado .mg-frase{font-size:clamp(1.2rem,1.75vw,1.65rem)}
.fc-fone{font-size:.95rem;letter-spacing:.06em;color:var(--marfim);border-bottom:1px solid var(--linha);padding-bottom:3px;font-variant-numeric:tabular-nums;transition:border-color .3s,color .3s}
.fc-fone:hover,.fc-fone:focus-visible{border-color:var(--ouro);color:var(--ouro-claro)}
.fc-hora{font-size:.92rem;line-height:1.7;color:var(--texto)}
.fc-hora b{font-weight:400;color:var(--nevoa)}

.rp{position:relative;background:linear-gradient(in oklch to bottom,var(--grafite-900),#0a1213);padding:clamp(48px,7vw,96px) var(--margem) 26px;text-align:center}
.rp-assina{display:inline-flex;align-items:center;gap:clamp(14px,2vw,28px);font-family:var(--f-titulo);line-height:1}
.rp-assina b{font-weight:500;font-size:clamp(2rem,6.4vw,5.4rem);letter-spacing:.16em;margin-right:-.16em;color:var(--ouro);background:var(--ouro-letra);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rp-assina .mg-filete{height:clamp(44px,7vw,104px);--curso:140px}
.rp-assina span{text-align:left;font-size:clamp(.6rem,1.15vw,.92rem);letter-spacing:.24em;line-height:1.7;text-transform:uppercase;color:var(--nevoa)}
.rp-dupla{margin-top:clamp(30px,4vw,52px);display:flex;justify-content:center;align-items:stretch;gap:22px}
.rp-dupla p{display:flex;flex-direction:column;gap:5px;flex:1 1 0;max-width:19rem}
.rp-dupla p:first-child{text-align:right}
.rp-dupla p:last-child{text-align:left}
.rp-dupla b{font-family:var(--f-titulo);font-weight:500;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ouro-claro)}
.rp-dupla span{font-size:.76rem;letter-spacing:.05em;color:var(--nevoa);font-variant-numeric:tabular-nums}
.rp-fio{flex:none;width:1px;background:var(--ouro)}
.rp-links{margin-top:clamp(28px,3.4vw,44px);display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;list-style:none}
.rp-links a{font-family:var(--f-titulo);font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--nevoa);padding:6px 0;transition:color .3s}
.rp-links a:hover,.rp-links a:focus-visible{color:var(--ouro-claro)}
.rp-fim{max-width:var(--mg-miolo);margin:clamp(30px,4vw,48px) auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;align-items:center;gap:7px;font-size:.76rem;line-height:1.5;color:#8f9997}
.rp-selo{margin-top:8px;font-size:.8rem;color:var(--nevoa)}
.rp-selo a{color:var(--ouro-claro);border-bottom:1px solid var(--linha);padding-bottom:1px;transition:border-color .3s,color .3s}
.rp-selo a:hover,.rp-selo a:focus-visible{border-color:var(--ouro);color:#fff5d8}

@media (max-width:899px){
  .fc{padding-top:72px}
  .fc-cena{grid-template-columns:minmax(0,1fr);grid-template-rows:none;justify-items:center}
  .fc-titulo{grid-column:1;grid-row:auto;grid-template-columns:minmax(0,1fr);row-gap:.14em;text-align:center;font-size:clamp(2rem,10.8vw,3.4rem)}
  .fc-t-esq,.fc-t-dir{justify-self:center}
  .fc-sob{grid-column:1;grid-row:auto;grid-template-columns:minmax(0,1fr);transform:none;margin:16px 0 0;row-gap:6px;justify-items:center;text-align:center}
  .fc-sob p:first-child,.fc-sob p:last-child{justify-self:center;text-align:center}
  .fc-foto{grid-column:1;grid-row:auto;order:1;width:min(116vw,30rem);left:calc(min(116vw,30rem) * -.03);margin-top:4px}
  .fc-eixo{top:0;height:33.5%}
  .fc-lado,.fc-lado--esq,.fc-lado--dir{grid-column:1;grid-row:auto;justify-self:center;align-items:center;text-align:center;max-width:22rem;margin-top:0}
  .fc-lado--esq{order:2;margin-top:calc(min(116vw,30rem) * -.2)}
  .fc-lado--dir{order:3;margin-top:46px;padding-bottom:60px}
  .fc-lado::before,.fc-lado--esq::before,.fc-lado--dir::before{left:50%;right:auto;margin-left:-17px}
  .fc .mg-botao{width:100%;min-width:min(20rem,84vw)}
  .rp{padding-bottom:104px}
  .rp-dupla{gap:14px}
  .rp-dupla b{font-size:.74rem;letter-spacing:.12em}
  .rp-dupla span{font-size:.68rem}
}
@media (prefers-reduced-motion:reduce){.fc-mancha,.fc-foto::before{animation:none}}

/* ============ ajustes gerais (sempre por último) ============ */
@media (max-width:359px){
  .rp-assina{gap:10px}
  .rp-assina b{font-size:1.55rem;letter-spacing:.12em;margin-right:-.12em}
  .rp-assina span{font-size:.54rem;letter-spacing:.18em}
}
/* emenda do hero com a seção II: o pé do hero escurece até o tom em que a história começa (fica atrás do conteúdo) */
.hb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:170px;z-index:-1;pointer-events:none;background:linear-gradient(in oklch to bottom,rgba(13,22,24,0),rgba(13,22,24,.7) 60%,var(--grafite-900))}