/* ===== BASE — Nay Henna Barbosa · sistema visual (não editar nas seções) ===== */
:root{
  /* cores — do hero E */
  --oliva:#868d64;         /* pedido do usuário (arte DWPEjI2ERUx) */
  --oliva-esc:#5d6444;
  --oliva-fundo:#3a4130;
  --noite:#232a1c;
  --noite-2:#2c3322;
  --salvia:#d9dcc4;
  --salvia-2:#cace93;
  --musgo:#657d1b;
  --papel:#f6f5ef;
  --papel-2:#ecebe0;
  --bege:#e6cfb8;
  --led:#f6c99a;
  --ouro:#c9a464;
  --ouro-claro:#ecd29c;
  --ouro-tinta:#8a6a2e;     /* dourado legível sobre papel (AA em texto ≥ 18px bold) */
  --lilas:#b8a2c0;          /* sofá do consultório — só em pequenas áreas */
  --rosa:#d08889;           /* fachada — só em pequenas áreas */
  --tinta:#1f2418;
  --tinta-suave:#4b5141;    /* texto de apoio sobre papel (AA) */
  --claro-suave:#dfe1cf;    /* texto de apoio sobre oliva/noite */

  /* tipografia */
  --f-titulo:"Boska", "Times New Roman", serif;
  --f-texto:"Inclusive Sans", system-ui, sans-serif;
  --t-titulo:clamp(3rem, 1.3rem + 5.4vw, 6.6rem);   /* só o h1 do hero */
  --t-h2:clamp(2.5rem, 1.5rem + 3.6vw, 5rem);
  --t-h3:clamp(1.55rem, 1.25rem + 1vw, 2.1rem);
  --t-citacao:clamp(1.7rem, 1.2rem + 1.8vw, 2.8rem);
  --t-apoio:clamp(1.06rem, .98rem + .3vw, 1.2rem);
  --t-corpo:1.125rem;       /* mínimo 18 px */
  --t-mini:.875rem;         /* rótulos, mínimo 14 px */

  /* espaço e forma */
  --pad:clamp(1.25rem, .5rem + 3vw, 4rem);
  --sec-y:clamp(5rem, 3rem + 7vw, 9.5rem);
  --larg:76rem;
  --raio:18px;
  --raio-g:28px;
  --sombra:0 24px 60px -30px rgba(20,24,12,.55);

  /* movimento */
  --ease:cubic-bezier(.2,.7,.1,1);
  --dur:1s;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:5rem}
html,body{background:var(--noite);color:var(--papel)}
body{font-family:var(--f-texto);font-size:var(--t-corpo);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:3px;border-radius:4px}
.wf-papel :focus-visible{outline-color:var(--musgo)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* granulado único, fixo */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* navegação (do hero) */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:2rem;padding:1.1rem var(--pad);
  font-size:.95rem;letter-spacing:.01em;transition:background .5s ease, padding .5s ease, box-shadow .5s ease}
.nav.rolou{background:color-mix(in oklab, var(--noite) 82%, transparent);backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1);
  padding-block:.7rem;box-shadow:0 1px 0 color-mix(in oklab, var(--ouro) 35%, transparent)}
.marca{font-family:var(--f-titulo);font-weight:300;font-size:1.45rem;text-decoration:none;white-space:nowrap}
.marca b{font-family:var(--f-texto);font-weight:600;letter-spacing:.02em}
.nav-links{display:flex;gap:1.6rem;margin-left:auto}
.nav-links a{text-decoration:none;opacity:.85}
.nav-links a:hover{opacity:1}
.nav-cta{text-decoration:none;border:1px solid color-mix(in oklab, var(--papel) 60%, transparent);padding:.55rem 1.1rem;border-radius:99px;
  background:color-mix(in oklab, var(--oliva-fundo) 40%, transparent);backdrop-filter:blur(6px);min-height:44px;display:inline-flex;align-items:center}
@media (max-width:900px){ .nav-links{display:none} .nav{gap:1rem} .nav-cta{margin-left:auto} }

/* ===== paredes (seções) ===== */
.wf-sec{position:relative;isolation:isolate;overflow:clip;padding:var(--sec-y) var(--pad)}
.wf-sec > .wf-dentro{max-width:var(--larg);margin-inline:auto;position:relative}
.wf-malha{position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent);mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent)}
.wf-oliva{background:var(--oliva);color:var(--papel)}
.wf-oliva .wf-malha{background:
  radial-gradient(circle closest-side at 12% 20% in oklab, #9aa178, color-mix(in oklab, #9aa178 50%, transparent) 45%, transparent),
  radial-gradient(circle closest-side at 88% 70% in oklab, color-mix(in oklab, var(--led) 50%, var(--oliva)), transparent),
  radial-gradient(circle closest-side at 30% 95% in oklab, var(--oliva-esc), transparent)}
.wf-papel{background:var(--papel);color:var(--tinta)}
.wf-papel .wf-malha{background:
  radial-gradient(circle closest-side at 85% 15% in oklab, color-mix(in oklab, var(--salvia) 80%, var(--papel)), transparent),
  radial-gradient(circle closest-side at 10% 85% in oklab, color-mix(in oklab, var(--bege) 45%, var(--papel)), transparent)}
.wf-noite{background:var(--noite);color:var(--papel)}
.wf-noite .wf-malha{background:
  radial-gradient(circle closest-side at 80% 10% in oklab, color-mix(in oklab, var(--led) 26%, var(--noite)), transparent),
  radial-gradient(circle closest-side at 15% 80% in oklab, var(--oliva-fundo), transparent),
  radial-gradient(circle closest-side at 50% 50% in oklab, color-mix(in oklab, var(--oliva) 22%, var(--noite)), transparent)}

/* ===== tipografia ===== */
.wf-sobre{font-size:var(--t-mini);letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.wf-oliva .wf-sobre, .wf-noite .wf-sobre{color:var(--salvia)}
.wf-papel .wf-sobre{color:var(--musgo)}
.wf-titulo{font-family:var(--f-titulo);font-weight:700;font-size:var(--t-h2);line-height:.98;letter-spacing:-.005em;text-wrap:balance}
.wf-titulo .wf-fina, .wf-fina{font-weight:200;font-style:italic}
.wf-h3{font-family:var(--f-titulo);font-weight:700;font-size:var(--t-h3);line-height:1.08}
.wf-apoio{font-size:var(--t-apoio);line-height:1.65;max-width:38rem}
.wf-papel .wf-apoio{color:var(--tinta-suave)}
.wf-oliva .wf-apoio, .wf-noite .wf-apoio{color:var(--claro-suave)}
.wf-citacao{font-family:var(--f-titulo);font-weight:200;font-style:italic;font-size:var(--t-citacao);line-height:1.15}
.wf-assina{font-size:var(--t-mini);letter-spacing:.06em}
.wf-assina b{font-weight:600}

/* ===== o motivo: a prateleira de LED ===== */
/* linha dourada com o brilho morno embaixo; nasce de um lado (data-lado="dir" = cresce da direita) */
.wf-prateleira{display:block;position:relative;height:2px;width:100%;
  background:linear-gradient(90deg in oklab, transparent, var(--ouro) 14%, var(--ouro-claro) 86%, transparent);
  transform-origin:0 50%}
.wf-prateleira[data-lado="dir"]{transform-origin:100% 50%}
.wf-prateleira::after{content:"";position:absolute;left:8%;right:8%;top:2px;height:clamp(3rem,6vw,5.5rem);pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0 in oklab, color-mix(in oklab, var(--led) 45%, transparent), transparent);opacity:.6}
.wf-papel .wf-prateleira{background:linear-gradient(90deg in oklab, transparent, var(--ouro) 14%, #d9b877 86%, transparent)}
.wf-papel .wf-prateleira::after{opacity:.45}
/* texto que pousa na prateleira: <span class="wf-pousa">palavra<span class="wf-prateleira"></span></span> */
.wf-pousa{position:relative;display:inline-block}
.wf-pousa > .wf-prateleira{position:absolute;left:-.12em;right:-.4em;bottom:.08em;width:auto}

/* ===== botões ===== */
.wf-btn{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;text-decoration:none;font-weight:600;background:var(--papel);color:var(--tinta);
  padding:.95rem 1.6rem;border-radius:99px;box-shadow:0 10px 30px -12px rgba(20,24,12,.55);transition:background .3s ease, transform .3s var(--ease)}
.wf-btn:hover{background:#fff;transform:translateY(-1px)}
.wf-papel .wf-btn{background:var(--noite);color:var(--papel)}
.wf-papel .wf-btn:hover{background:var(--oliva-fundo)}
.wf-btn svg{width:1.15em;height:1.15em;flex:none}
.wf-link{min-height:48px;display:inline-flex;align-items:center;text-underline-offset:.3em;text-decoration-thickness:1px}
.wf-papel .wf-link{color:var(--tinta)}

/* ===== entrada por rolagem ===== */
.js [data-rev]{opacity:0;transform:translateY(18px);transition:opacity var(--dur) ease, transform var(--dur) var(--ease);transition-delay:var(--atraso,0s)}
.js [data-rev].wf-visto{opacity:1;transform:none}
.js [data-rev="prateleira"]{opacity:1;transform:scaleX(0);transition:transform 1.5s var(--ease);transition-delay:var(--atraso,0s)}
.js [data-rev="prateleira"].wf-visto{transform:scaleX(1)}
.js [data-rev="foto"]{transform:scale(1.03);filter:brightness(.7) saturate(.6);transition:opacity 1.2s ease, transform 2.2s var(--ease), filter 2s ease;transition-delay:var(--atraso,0s)}
.js [data-rev="foto"].wf-visto{transform:none;filter:none}
.js .wf-chegou [data-rev]{transition-delay:0s!important}

/* ===== WhatsApp flutuante (celular) ===== */
.wf-zap{position:fixed;right:1rem;bottom:1rem;z-index:60;width:58px;height:58px;border-radius:50%;display:none;align-items:center;justify-content:center;
  background:var(--papel);color:var(--musgo);box-shadow:0 12px 30px -10px rgba(10,14,6,.6);border:1px solid color-mix(in oklab, var(--ouro) 50%, transparent);
  opacity:0;transform:translateY(12px);transition:opacity .4s ease, transform .4s var(--ease);pointer-events:none}
.wf-zap svg{width:28px;height:28px}
.wf-zap.ativo{opacity:1;transform:none;pointer-events:auto}
@media (max-width:900px){ .wf-zap{display:flex} }

/* ===== HERO E (aprovado; fonte do título trocada para Boska a pedido) ===== */


/* hero */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);isolation:isolate;overflow:clip}
.malha{position:absolute;inset:0;z-index:-2;background:var(--oliva)}
.malha i{position:absolute;border-radius:50%;filter:blur(0)}
.malha .m1{width:90vmax;height:90vmax;left:-35vmax;top:-40vmax;background:radial-gradient(closest-side in oklab, #9aa178, transparent)}
.malha .m2{width:70vmax;height:70vmax;left:-20vmax;bottom:-45vmax;background:radial-gradient(closest-side in oklab, var(--oliva-esc), transparent);animation:respira 32s ease-in-out infinite alternate}
.malha .m3{width:60vmax;height:60vmax;left:22vw;top:-10vmax;background:radial-gradient(closest-side in oklab, color-mix(in oklab, var(--led) 55%, var(--oliva)), transparent);opacity:.75;animation:respira 26s ease-in-out infinite alternate-reverse}
.malha .m4{width:50vmax;height:50vmax;left:5vw;top:30vh;background:radial-gradient(closest-side in oklab, var(--salvia-2), transparent);opacity:.28;animation:deriva 38s ease-in-out infinite alternate}
.malha::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes respira{to{transform:translate(4vw,-3vh) scale(1.08)}}
@keyframes deriva{to{transform:translate(-5vw,4vh) scale(.92)}}

.foto{grid-column:2;grid-row:1;position:relative;z-index:-1;height:100%;min-height:100svh}
.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 22%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.18) 5%, rgba(0,0,0,.55) 11%, rgba(0,0,0,.88) 17%, #000 23%);mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.18) 5%, rgba(0,0,0,.55) 11%, rgba(0,0,0,.88) 17%, #000 23%)}
.foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:none}
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:9rem;z-index:1;pointer-events:none;
  background:linear-gradient(180deg in oklab, color-mix(in oklab, var(--oliva-fundo) 55%, transparent), transparent)}

.prateleiras{position:absolute;left:0;top:0;width:var(--pw,50vw);height:100%;z-index:-1;pointer-events:none}
.prateleiras span{position:absolute;left:var(--x0,0);right:0;height:2px;top:var(--y,50%);
  background:linear-gradient(90deg in oklab, transparent, var(--ouro) 18%, var(--ouro-claro));
  transform-origin:100% 50%;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.2,.7,.1,1)}
.prateleiras span::after{content:"";position:absolute;left:10%;right:0;top:2px;height:5.5rem;
  background:radial-gradient(60% 100% at 70% 0 in oklab, color-mix(in oklab, var(--led) 45%, transparent), transparent);opacity:.55}
.pronto .prateleiras span{transform:scaleX(1)}
.pronto .prateleiras span:nth-child(2){transition-delay:.18s}
.pronto .prateleiras span:nth-child(3){transition-delay:.36s}

.texto{grid-column:1;grid-row:1;align-self:center;padding:7rem var(--pad) 4rem;transform:translateY(var(--dy,0px));position:relative;z-index:2;max-width:46rem}
.kicker{font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--salvia);margin-bottom:1.4rem}
.titulo{font-family:var(--f-titulo);font-weight:700;font-size:var(--t-titulo);line-height:.98;letter-spacing:-.005em;color:#fffdf6;
  text-shadow:0 1px 30px color-mix(in oklab, var(--oliva-fundo) 35%, transparent)}
.titulo .l{display:block;white-space:nowrap}
.titulo .fina{font-weight:200;font-style:italic;letter-spacing:.005em;color:color-mix(in oklab, #fffdf6 92%, var(--salvia))}
.titulo .pousa{display:inline-block}
.titulo .l{position:static}
.titulo .base{display:inline-block;width:0;height:0;vertical-align:baseline}
.apoio{margin-top:1.3rem;font-size:var(--t-apoio);line-height:1.6;max-width:32rem;color:color-mix(in oklab, var(--papel) 92%, var(--oliva))}
.acoes{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;margin-top:1.7rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:600;background:var(--papel);color:var(--tinta);
  padding:1rem 1.6rem;border-radius:99px;box-shadow:0 10px 30px -12px rgba(20,24,12,.55)}
.btn:hover{background:#fff}
.link2{min-height:48px;display:inline-flex;align-items:center;text-underline-offset:.3em}
.provas{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 0;margin-top:1.8rem;font-size:.95rem;color:var(--salvia)}
.provas li{padding:0 1.2rem;border-left:1px solid color-mix(in oklab, var(--salvia) 40%, transparent)}
.provas li:first-child{padding-left:0;border-left:0}
.provas .est{color:var(--ouro-claro);letter-spacing:.12em;margin-right:.35rem}
.provas strong{color:#fffdf6;font-weight:600}

.etiqueta{position:absolute;right:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,4vh,2.2rem);z-index:2;display:inline-flex;align-items:center;gap:.6rem;
  min-height:48px;padding:.65rem 1.1rem;border-radius:99px;text-decoration:none;font-size:.9rem;color:var(--papel);
  background:color-mix(in oklab, var(--oliva-fundo) 52%, transparent);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid color-mix(in oklab, var(--papel) 28%, transparent)}
.etiqueta .ponto{width:.55rem;height:.55rem;border-radius:50%;background:var(--ouro-claro);box-shadow:0 0 0 4px color-mix(in oklab, var(--ouro-claro) 25%, transparent)}
.etiqueta .sep{opacity:.6}
.kicker .dot{opacity:.6}
.so-cel{display:none}
/* entrada */
.js .texto > *{opacity:0;transform:translateY(14px);transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.1,1)}
.js .titulo .l{opacity:0;transform:translateY(.4em);transition:opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.1,1)}
.js.pronto .texto > *, .js.pronto .titulo .l{opacity:1;transform:none}
.js.pronto .titulo{transition-delay:.1s}
.js.pronto .titulo .l:nth-child(2){transition-delay:.25s}
.js.pronto .titulo .l:nth-child(3){transition-delay:.45s}
.js.pronto .apoio{transition-delay:.7s}
.js.pronto .acoes{transition-delay:.85s}
.js.pronto .provas{transition-delay:1s}
.js .foto img{transform:scale(1.04);filter:brightness(.62) saturate(.55) hue-rotate(-8deg);
  transition:transform 2.6s cubic-bezier(.2,.7,.1,1), filter 2.2s ease .35s}
.js.pronto .foto img{transform:none;filter:none}
/* o LED acende junto com as prateleiras */
.foto::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;opacity:0;
  background:radial-gradient(70% 45% at 55% 22% in oklab, #ffd6a3, transparent);transition:opacity 2.4s ease .6s}
.js.pronto .foto::before{opacity:.55}
.prateleiras span{filter:brightness(.6)}
.pronto .prateleiras span{filter:none}
.prateleiras span:nth-child(3)::after{opacity:.85;height:8rem}

@media (max-width: 900px){
        .hero{grid-template-columns:1fr;grid-template-rows:auto auto}
  .foto{grid-column:1;grid-row:1;min-height:0;height:auto;aspect-ratio:4/4.6}
  .foto img{object-position:62% 18%;-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent);mask-image:linear-gradient(180deg,#000 74%,transparent)}
  .texto{grid-column:1;grid-row:2;padding:0 var(--pad) 3rem;margin-top:-1.5rem;transform:none}
  .provas li{padding:0 .9rem}
  .kicker{font-size:.74rem;letter-spacing:.16em;line-height:1.7}
  .kicker span{display:block}
  .kicker .dot{display:none}
  .titulo .pousa{position:relative}
  .titulo .pousa::after{content:"";position:absolute;left:-.1em;right:calc(-1 * (100vw - 100%));bottom:.09em;height:2px;
    background:linear-gradient(90deg in oklab, var(--ouro), var(--ouro-claro));transform-origin:100% 50%;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.2,.7,.1,1) .7s}
  .pronto .titulo .pousa::after{transform:scaleX(1)}
  .titulo .pousa::before{content:"";position:absolute;left:0;right:-40vw;top:100%;height:4.5rem;pointer-events:none;
    background:radial-gradient(60% 100% at 60% 0 in oklab, color-mix(in oklab, var(--led) 40%, transparent), transparent);opacity:0;transition:opacity 1.6s ease 1.1s}
  .pronto .titulo .pousa::before{opacity:.7}
  .etiqueta{display:none}
  .provas .so-cel{display:list-item}
  .titulo{font-size:clamp(2.8rem, 1.2rem + 7.6vw, 4.2rem)}
  .prateleiras{width:100%;height:var(--ph,60vh)}
}
@media (max-width: 380px){ .titulo .l{white-space:normal} }
@media (min-width: 901px) and (max-width: 1180px){ .titulo{font-size:clamp(3rem, .6rem + 5vw, 4.6rem)} }


/* ===== seção hi ===== */
/* 1 · Minha história — a estante de porta-retratos */
.hi-topo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,6rem);align-items:end}
.hi-topo .wf-sobre{margin-bottom:1.2rem}
.hi-abre{padding-left:clamp(1.2rem,2vw,2rem);border-left:1px solid color-mix(in oklab, var(--ouro) 60%, transparent)}
.hi-abre .hi-fala--grande p{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.3rem);margin-bottom:.4rem}
.hi-titulo .wf-fina{display:inline}
.hi-grade{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,5vw,6rem);margin-top:clamp(3rem,5vw,5rem);align-items:start}

/* retrato de hoje, preso enquanto a estante passa */
.hi-lado{position:sticky;top:6rem}
.hi-retrato{position:relative;margin:0;aspect-ratio:618/1248;max-height:max(24rem,calc(100svh - 21rem));margin-inline:auto}
.hi-ficha{font-size:1rem}
.hi-arco{position:absolute;left:-6%;right:0;top:8.4%;bottom:0;border-radius:100% 0 0 0 / 46% 0 0 0;
  background:radial-gradient(80% 60% at 50% 30% in oklab, color-mix(in oklab, var(--salvia) 90%, var(--papel)), color-mix(in oklab, var(--salvia-2) 55%, var(--papel)) 70%);}
.hi-retrato img{position:relative;width:100%;height:100%;object-fit:contain;object-position:100% 100%;filter:drop-shadow(-14px 18px 24px rgba(60,60,30,.12))}
.hi-base{position:absolute!important;left:-8%;right:-8%;bottom:0;width:auto}
.hi-ficha{margin-top:1.6rem;display:grid;gap:.7rem}
.hi-ficha div{display:grid;grid-template-columns:12.5rem 1fr;gap:1rem;align-items:baseline;padding-bottom:.7rem;border-bottom:1px solid color-mix(in oklab, var(--tinta) 12%, transparent)}
.hi-ficha dt{font-size:var(--t-mini);letter-spacing:.14em;text-transform:uppercase;color:var(--musgo);font-weight:500}
.hi-ficha dd{font-size:1rem;color:var(--tinta-suave)}

/* a estante */
.hi-estante{list-style:none;display:grid;gap:clamp(3.5rem,6vw,5.5rem);position:relative;padding-inline:clamp(1rem,2vw,1.8rem)}
/* montantes de metal dourado, como a estante do consultório */
.hi-estante::before, .hi-estante::after{content:"";position:absolute;top:-2rem;bottom:-1rem;width:2px;border-radius:2px;
  background:linear-gradient(180deg in oklab, transparent, var(--ouro) 8%, #d9b877 50%, var(--ouro) 92%, transparent);opacity:.75}
.hi-estante::before{left:0}
.hi-estante::after{right:0}
.hi-fase{position:relative}
.hi-cena{display:grid;grid-template-columns:minmax(10rem,17.5rem) minmax(0,1fr);gap:clamp(1.4rem,3vw,2.6rem);align-items:end;padding-bottom:1.1rem}
.hi-fase--inv .hi-cena{grid-template-columns:minmax(0,1fr) minmax(10rem,17.5rem)}
.hi-fase--inv .hi-quadro{order:2}
.hi-fase--espelho .hi-cena{grid-template-columns:minmax(0,1fr)}

/* porta-retrato em pé sobre a prateleira */
.hi-quadro{position:relative;margin:0;padding:.55rem;background:#fbfaf5;border-radius:4px;
  box-shadow:0 0 0 1px color-mix(in oklab, var(--ouro) 70%, transparent), 0 0 0 5px #fbfaf5, 0 0 0 6px color-mix(in oklab, var(--ouro-tinta) 55%, transparent), 0 26px 30px -22px rgba(30,30,10,.55)}
.hi-quadro img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:2px;filter:saturate(.72) sepia(.14) contrast(1.04) brightness(1.02)}
/* véu morno de álbum: une as fotos antigas à paleta */
.hi-quadro::after{content:"";position:absolute;inset:.55rem;border-radius:2px;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(160deg in oklab, color-mix(in oklab, var(--led) 70%, transparent), color-mix(in oklab, var(--oliva) 55%, transparent))}

.hi-ano{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .8rem;margin-bottom:.8rem}
.hi-ano b{font-family:var(--f-titulo);font-weight:700;font-size:clamp(2.4rem,1.6rem + 2.4vw,4.2rem);line-height:1;color:var(--ouro-tinta);letter-spacing:-.01em}
.hi-ano span{font-size:var(--t-mini);letter-spacing:.16em;text-transform:uppercase;color:var(--musgo);font-weight:500}
.hi-fala p{font-size:var(--t-apoio);line-height:1.6;color:var(--tinta);max-width:34rem}
.hi-fala + .hi-fala{margin-top:.9rem}
.hi-ano + .hi-falas{margin-top:0}
.hi-fala--grande p{font-family:var(--f-titulo);font-weight:200;font-style:italic;font-size:var(--t-citacao);line-height:1.12;color:var(--tinta)}
.hi-fala--nota p{color:var(--tinta-suave)}
.hi-conta{font-size:var(--t-apoio);color:var(--tinta-suave);max-width:34rem;margin-bottom:1rem}

/* fecho: a segunda metade da frase */
.hi-fecho{margin-top:clamp(4rem,7vw,7rem);text-align:right;font-size:clamp(2.4rem,1.4rem + 3.4vw,4.8rem)}

@media (max-width:900px){
  .hi-topo{grid-template-columns:minmax(0,1fr);gap:2rem}
  .hi-grade{grid-template-columns:minmax(0,1fr);gap:3.5rem}
  .hi-lado{position:relative;top:auto;display:contents}
  .hi-retrato{max-height:none;width:min(72%,20rem);margin-inline:auto 8%}
  .hi-ficha{order:3;margin-top:0}
  .hi-ficha div{grid-template-columns:minmax(0,1fr);gap:.15rem}
  .hi-estante{gap:3.2rem;padding-inline:1rem;width:100%;max-width:36rem;margin-inline:auto}
  /* no celular: porta-retrato e ano em pé na prateleira; as falas embaixo */
  .hi-fase{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"q a" "p p" "f f";column-gap:1.1rem;align-items:end}
  .hi-fase--inv{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"a q" "p p" "f f"}
  .hi-fase--espelho{grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "p" "f"}
  .hi-cena, .hi-txt{display:contents}
  .hi-quadro{grid-area:q;margin-bottom:.9rem}
  .hi-ano{grid-area:a;flex-direction:column;align-items:flex-start;gap:.35rem;margin:0 0 1.1rem}
  .hi-fase--inv .hi-ano{align-items:flex-end;text-align:right}
  .hi-ano b{font-size:clamp(2.1rem,1.2rem + 3.6vw,2.7rem);white-space:nowrap}
  .hi-fase > .wf-prateleira{grid-area:p}
  .hi-falas{grid-area:f;margin-top:1.6rem}
  .hi-fecho{text-align:left}
}


/* ===== seção jt ===== */
/* 2 · De dentro para fora — prefixo jt */
.jt-topo{text-align:center;display:grid;justify-items:center}
.jt-topo .wf-sobre{margin-bottom:1.2rem}
.jt-titulo{color:#fffdf6;font-size:clamp(3rem,1.6rem + 4.6vw,6.2rem);line-height:.95}
.jt-titulo .wf-fina{display:block;color:var(--salvia)}
.jt-titulo .wf-pousa > .wf-prateleira{left:-.3em;right:-.3em}
.jt-apoio{margin-top:1.6rem;max-width:34rem}

/* palco: pilares em volta, ela no miolo */
.jt-palco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:center;margin-top:clamp(3rem,6vw,5rem)}

.jt-miolo{position:relative;margin:0;display:grid;justify-items:center;gap:1.4rem}
.jt-miolo > .jt-aneis, .jt-miolo > .jt-foto, .jt-miolo > .jt-luz{grid-area:1 / 1}
.jt-aneis{width:100%;aspect-ratio:1;overflow:visible}
.jt-luz{width:128%;margin:-14%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side in oklab, color-mix(in oklab, var(--led) 46%, transparent), color-mix(in oklab, var(--led) 12%, transparent) 64%, transparent)}
.jt-foto{width:56%;aspect-ratio:1;align-self:center;border-radius:50%;overflow:clip;
  box-shadow:0 0 0 1px color-mix(in oklab, var(--ouro-claro) 65%, transparent), 0 30px 80px -30px rgba(0,0,0,.7)}
.jt-foto img{width:100%;height:100%;object-fit:cover}
.jt-anel{fill:none;stroke:var(--ouro);stroke-width:1.3;opacity:.75;stroke-dasharray:1;stroke-dashoffset:0;
  transform:rotate(-90deg);transform-origin:300px 300px;transition:stroke .4s ease, opacity .4s ease, stroke-width .4s ease}
.jt-rotulo{font-family:var(--f-texto);font-size:15px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;fill:var(--ouro-claro);opacity:.9;transition:opacity .4s ease, fill .4s ease}
.js .jt-anel{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease), stroke .4s ease, opacity .4s ease, stroke-width .4s ease;transition-delay:calc(.25s + var(--i) * .28s)}
.js .jt-rotulo{opacity:0;transition:opacity 1s ease, fill .4s ease;transition-delay:calc(.9s + var(--i) * .28s)}
.js .jt-miolo.wf-visto .jt-anel{stroke-dashoffset:0}
.js .jt-miolo.wf-visto .jt-rotulo{opacity:.9}
.jt-miolo[data-aceso] .jt-anel, .jt-miolo[data-aceso] .jt-rotulo{opacity:.3;transition-delay:0s}
.jt-miolo[data-aceso="0"] [data-i="0"], .jt-miolo[data-aceso="1"] [data-i="1"],
.jt-miolo[data-aceso="2"] [data-i="2"], .jt-miolo[data-aceso="3"] [data-i="3"]{opacity:1;stroke:var(--ouro-claro);stroke-width:2.6}
.jt-miolo[data-aceso="0"] text[data-i="0"], .jt-miolo[data-aceso="1"] text[data-i="1"],
.jt-miolo[data-aceso="2"] text[data-i="2"], .jt-miolo[data-aceso="3"] text[data-i="3"]{fill:#fffdf6;stroke:none}
.jt-legenda{font-family:var(--f-titulo);font-weight:200;font-style:italic;font-size:clamp(1.3rem,1.1rem + .6vw,1.65rem);line-height:1.3;text-align:center;max-width:24rem;color:var(--claro-suave)}

/* os quatro pilares como prateleiras */
.jt-pilares{list-style:none;display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
.jt-pilar{position:relative;padding-bottom:1.6rem;transition:opacity .4s ease}
.jt-num{display:block;font-family:var(--f-titulo);font-weight:200;font-style:italic;font-size:2.6rem;line-height:1;color:var(--ouro-claro);margin-bottom:.5rem}
.jt-nome{color:#fffdf6}
.jt-fala{margin-top:.6rem;font-size:var(--t-corpo);line-height:1.6;color:var(--claro-suave)}
.jt-linha{position:absolute;left:0;right:0;bottom:0}
.jt-linha::after{opacity:.22;height:1.6rem}
.jt-esq .jt-pilar{text-align:right}
.jt-esq .jt-linha{right:-1.5rem}
.jt-dir .jt-linha{left:-1.5rem}

/* a ponte: a frase dela */
.jt-ponte-b .wf-pousa{white-space:nowrap}
.jt-ponte-b .wf-pousa > .wf-prateleira{bottom:-.02em}
.jt-ponte{margin:clamp(4.5rem,9vw,8rem) auto 0;max-width:60rem;text-align:center}
.jt-ponte-a{font-family:var(--f-titulo);font-weight:700;font-size:var(--t-citacao);line-height:1.12;color:#fffdf6;text-wrap:balance}
.jt-ponte-b{margin-top:.6rem;font-family:var(--f-titulo);font-weight:200;font-style:italic;font-size:var(--t-citacao);line-height:1.15;color:var(--salvia);text-wrap:balance}
.jt-ponte footer{margin-top:1.6rem;color:var(--claro-suave)}

@media (max-width:1100px){
  .jt-palco{align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(1.5rem,4vw,3rem);row-gap:3.5rem}
  .jt-miolo{grid-column:1 / -1;grid-row:1;max-width:36rem;width:100%;margin-inline:auto}
  .jt-esq .jt-pilar{text-align:left}
  .jt-esq .jt-linha, .jt-dir .jt-linha{left:0;right:0}
}
@media (max-width:700px){
  .jt-palco{grid-template-columns:minmax(0,1fr);row-gap:1.8rem}
  .jt-pilares{gap:1.7rem}
  .jt-pilar{display:grid;grid-template-columns:2.4rem minmax(0,1fr);column-gap:.8rem;padding-bottom:1.3rem}
  .jt-num{grid-row:1 / span 2;font-size:2rem;margin:0}
  .jt-rotulo{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .js .jt-anel{stroke-dashoffset:0;transition:none}
  .js .jt-rotulo{opacity:.9;transition:none}
}
/* sinal de anéis ao lado do numeral (telas sem o palco lado a lado): o anel do pilar aceso */
.jt-sinal{display:none}
@media (max-width:1100px){
  .jt-sinal{display:block;width:34px;height:34px;margin-bottom:.6rem;--a0:var(--ouro);--a1:var(--ouro);--a2:var(--ouro);--a3:var(--ouro);
    background:radial-gradient(circle closest-side, color-mix(in oklab, var(--led) 70%, transparent) 0 4px, transparent 4.5px 6px, var(--a0) 6px 7.2px, transparent 7.6px 9.5px, var(--a1) 9.5px 10.7px, transparent 11.1px 13px, var(--a2) 13px 14.2px, transparent 14.6px 16.2px, var(--a3) 16.2px 17px, transparent 17px);opacity:.95}
  .jt-pilar[data-anel="0"] .jt-sinal{--a0:#fffdf6}
  .jt-pilar[data-anel="1"] .jt-sinal{--a1:#fffdf6}
  .jt-pilar[data-anel="2"] .jt-sinal{--a2:#fffdf6}
  .jt-pilar[data-anel="3"] .jt-sinal{--a3:#fffdf6}
}
@media (max-width:700px){ .jt-sinal{grid-column:1;grid-row:3;margin:.7rem 0 0 .1rem;width:30px;height:30px} }


/* ===== seção cs ===== */
/* 3 · A consulta — prefixo cs */
.cs-topo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.cs-texto .wf-sobre{margin-bottom:1.2rem}
.cs-titulo .wf-fina{color:var(--oliva-esc)}
.cs-voz{margin-top:1.8rem;padding-left:1.3rem;border-left:2px solid var(--ouro)}
.cs-voz .wf-assina{display:block;margin-top:.7rem;color:var(--tinta-suave)}
.cs-cabem{margin-top:2rem}
.cs-cabem-lead{color:var(--tinta-suave)}
.cs-cabem-lista{display:grid;justify-items:start;gap:.15rem;margin-top:.4rem}
.cs-cabe{position:relative;display:inline-block;font-family:var(--f-titulo);font-weight:200;font-style:italic;font-size:clamp(1.45rem,1.2rem + .8vw,1.9rem);line-height:1.45;color:var(--tinta);padding-right:.6em}
.cs-cabe:nth-child(2){margin-left:1.4rem}
.cs-cabe:nth-child(3){margin-left:2.8rem}
.cs-cabe > .wf-prateleira{position:absolute;left:-.2em;right:0;bottom:.12em;width:auto}
.cs-cabe > .wf-prateleira::after{height:1.4rem}
/* a foto sangra até a borda direita da tela */
.cs-foto{position:relative;margin:0 calc(-1 * max(var(--pad), (100vw - var(--larg)) / 2)) 0 0;border-radius:var(--raio-g) 0 0 var(--raio-g);overflow:clip;box-shadow:var(--sombra);aspect-ratio:4/3.2}
.cs-foto img{width:100%;height:100%;object-fit:cover;object-position:42% 30%}
.cs-tempo{position:absolute;left:clamp(1rem,2.4vw,2rem);bottom:clamp(1rem,2.4vw,2rem);display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.4rem 1.1rem;border-radius:var(--raio);
  background:color-mix(in oklab, var(--noite) 80%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--papel)}
.cs-tempo b{font-family:var(--f-titulo);font-weight:700;font-size:clamp(2.2rem,1.6rem + 1.8vw,3.4rem);line-height:1}
.cs-tempo span{font-size:var(--t-mini);letter-spacing:.14em;text-transform:uppercase;color:var(--claro-suave)}

/* a estante: um móvel escuro com três prateleiras de LED em níveis */
.cs-estante{position:relative;isolation:isolate;margin-top:clamp(4.5rem,9vw,8rem);border-radius:var(--raio-g);overflow:clip;color:var(--papel);
  padding:clamp(2.2rem,4vw,3.5rem) clamp(1.4rem,4vw,3.5rem) clamp(2.5rem,4vw,3.5rem);
  background:radial-gradient(70% 60% at 50% 100% in oklab, color-mix(in oklab, var(--led) 22%, var(--noite-2)), transparent),linear-gradient(180deg in oklab, var(--noite-2), var(--noite));
  box-shadow:0 40px 90px -40px rgba(20,24,12,.7), inset 0 0 0 1px color-mix(in oklab, var(--ouro) 40%, transparent)}
.cs-estante-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 2rem;padding-bottom:1.6rem;border-bottom:1px solid color-mix(in oklab, var(--ouro) 30%, transparent)}
.cs-estante .wf-sobre{color:var(--salvia)}
.cs-estante-tit{font-family:var(--f-titulo);font-weight:700;font-size:clamp(1.7rem,1.3rem + 1.3vw,2.6rem);line-height:1.05}
.cs-estante-tit .wf-fina{color:var(--salvia)}
.cs-fases{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;margin-top:2rem}
.cs-fase{position:relative;padding:0 clamp(1rem,2.2vw,2rem) 2rem}
/* montantes dourados entre as colunas */
.cs-fase + .cs-fase::before{content:"";position:absolute;left:0;top:-2rem;bottom:-3.5rem;width:2px;
  background:linear-gradient(180deg in oklab, transparent, color-mix(in oklab, var(--ouro) 70%, transparent) 20%, var(--ouro) 80%, transparent)}
.cs-fase:nth-child(1){margin-bottom:0}
.cs-fase:nth-child(2){margin-bottom:4.5rem}
.cs-fase:nth-child(3){margin-bottom:9rem}
.cs-grande{display:block;font-family:var(--f-titulo);font-weight:200;font-style:italic;font-size:clamp(4.5rem,3rem + 4vw,8rem);line-height:.8;color:color-mix(in oklab, var(--ouro) 70%, transparent);margin-bottom:.8rem}
.cs-n{display:block;font-size:var(--t-mini);letter-spacing:.16em;text-transform:uppercase;color:var(--ouro-claro);font-weight:600}
.cs-nome{font-size:clamp(2rem,1.5rem + 1.6vw,3rem);margin-top:.3rem;color:#fffdf6}
.cs-sub{font-family:var(--f-titulo);font-weight:200;font-style:italic;font-size:1.4rem;color:var(--salvia);margin-top:.15rem}
.cs-desc{margin-top:.9rem;color:var(--claro-suave)}
.cs-tabua{position:absolute;left:0;right:0;bottom:0}
.cs-estante .cs-tabua{background:linear-gradient(90deg in oklab, color-mix(in oklab, var(--ouro) 50%, transparent), var(--ouro-claro) 50%, color-mix(in oklab, var(--ouro) 50%, transparent));height:3px}
.cs-estante .cs-tabua::after{opacity:.75}

/* junto: citação + entre consultas */
.cs-junto{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start;margin-top:clamp(4rem,8vw,7rem)}
.cs-cita .wf-citacao{color:var(--tinta)}
.cs-entre-tit{margin-bottom:.8rem}
.cs-entre-txt{color:var(--tinta-suave)}
.cs-modos{margin:1.2rem 0 1.8rem;font-weight:600;color:var(--tinta)}
.cs-ponto{color:var(--ouro-tinta);margin:0 .5rem}
.cs-modo{white-space:nowrap}

@media (max-width:900px){
  .cs-topo, .cs-junto{grid-template-columns:minmax(0,1fr)}
  .cs-foto{aspect-ratio:4/3.5;margin-inline:calc(-1 * var(--pad));border-radius:0}
  .cs-modos{display:grid;gap:.2rem}
  .cs-ponto{display:none}
  .cs-grande{font-size:3.6rem;margin-bottom:.5rem}
  .cs-fases{grid-template-columns:minmax(0,1fr);gap:2.6rem}
  .cs-fase:nth-child(n){margin-bottom:0;padding:0 0 1.6rem}
  .cs-fase + .cs-fase::before{display:none}
}
@media (max-width:420px){
  .cs-btn{padding-inline:1.1rem;font-size:1rem}
  .cs-cabe:nth-child(2){margin-left:.8rem}
  .cs-cabe:nth-child(3){margin-left:1.6rem}
  .cs-cabe{font-size:1.4rem}
}


/* ===== seção co ===== */
/* 4 · O consultório — a sala acende */
/* chão em oliva-escuro: no #868d64 o texto claro não passa AA (papel 3,2:1) */
.co.wf-oliva{background:var(--oliva-esc)}
.co .wf-malha{background:
  radial-gradient(circle closest-side at 92% 6% in oklab, color-mix(in oklab, var(--led) 32%, var(--oliva-esc)), transparent),
  radial-gradient(circle closest-side at 4% 96% in oklab, color-mix(in oklab, var(--oliva) 55%, var(--oliva-esc)), transparent)}
.co-topo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem clamp(2rem,5vw,5rem);align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.co-topo .wf-sobre{margin-bottom:1.2rem}
.co-titulo .wf-fina{display:block}
.co-apoio{max-width:30rem;padding-bottom:.4rem}

/* a cena: a sala de ponta a ponta, entra apagada e acende */
.co-cena{position:relative;margin-inline:calc(-1 * var(--pad))}
.co-sala{position:relative;margin:0;aspect-ratio:16/10;width:100%;overflow:clip;background:var(--oliva-fundo)}
.co-sala img{width:100%;height:100%;object-fit:cover;object-position:0% 50%}
.co-sala::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg in oklab, color-mix(in oklab, var(--oliva-esc) 75%, transparent), transparent 9%, transparent 86%, color-mix(in oklab, var(--oliva-esc) 90%, transparent))}
.co-sala::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 55% at 64% 34% in oklab, color-mix(in oklab, var(--led) 60%, transparent), transparent);mix-blend-mode:soft-light;opacity:.8}
.co-luz{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.co-fita{fill:none;stroke:var(--ouro-claro);stroke-width:4;stroke-linecap:round}
.co-halo{fill:none;stroke:var(--led);stroke-width:30;stroke-linecap:round;opacity:.6;filter:url(#co-brilho)}
.co-leds > g{transform-box:fill-box;transform-origin:0 50%}
.co-marcas circle{r:24px;fill:var(--papel);stroke:var(--ouro);stroke-width:3}
.co-marcas .co-aro{r:24px;fill:none;stroke:var(--led);stroke-width:3;opacity:0;transition:r .5s var(--ease), opacity .5s ease}
.co-marcas g.co-ativo .co-aro{r:46px;opacity:1}
.co-acesa .co-marcas .co-aro{animation:co-pulso 1.6s var(--ease) 2.6s 1 both}
@keyframes co-pulso{0%{r:24px;opacity:.9}100%{r:70px;opacity:0}}
.co-marcas text{font-family:var(--f-texto);font-weight:600;font-size:24px;text-anchor:middle;fill:var(--tinta)}

/* entrada: só com JS, um gesto — a sala acende */
.js .co-sala img{transition:filter 2.6s ease .6s}
.js .co-cena:not(.co-acesa) .co-sala img{filter:brightness(.26) saturate(.4)}
.js .co-sala::after{transition:opacity 2s ease 1s}
.js .co-cena:not(.co-acesa) .co-sala::after{opacity:0}
.js .co-leds > g{transition:transform 1.4s var(--ease), opacity .5s ease;transition-delay:calc(var(--i) * .16s)}
.js .co-cena:not(.co-acesa) .co-leds > g{transform:scaleX(0);opacity:0}
.js .co-marcas{transition:opacity .8s ease 2s}
.js .co-cena:not(.co-acesa) .co-marcas{opacity:0}

/* os três lugares */
.co-lugares{list-style:none;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,4fr);gap:clamp(1.5rem,3.5vw,3.5rem);align-items:start;
  margin-top:clamp(2.5rem,5vw,4.5rem);position:relative;z-index:3}
.co-det{margin:0;border-radius:var(--raio);overflow:clip;box-shadow:var(--sombra);background:var(--oliva-fundo)}
.co-det img{width:100%;height:100%;object-fit:cover}
.co-l1{align-self:start}
.co-l2{margin-top:clamp(2rem,4vw,3.5rem)}
.co-lugar .co-det img{transition:transform 1.2s var(--ease)}
.co-lugar:hover .co-det img{transform:scale(1.03)}
.co-l1 .co-leg{padding-top:0}
.co-l1 h3{font-size:clamp(2rem,1.4rem + 2vw,3.2rem);margin-bottom:1rem}
.co-l2 .co-det{aspect-ratio:1500/920}
.co-l3{margin-top:clamp(7rem,13vw,12rem)}
.co-l3 .co-det{aspect-ratio:1/1}
.co-leg{position:relative;margin-top:1.3rem;padding-left:3.1rem}
.co-leg h3{margin-bottom:.35rem}
.co-leg p{color:var(--claro-suave);font-size:var(--t-corpo);line-height:1.55;max-width:24rem}
.co-num{position:absolute;left:0;top:.15rem;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;
  background:var(--papel);color:var(--tinta);font-family:var(--f-texto);font-weight:600;font-size:1rem;box-shadow:0 0 0 2px var(--ouro)}

.co-fecho{margin-top:clamp(3.5rem,7vw,6rem);padding-top:2rem;border-top:1px solid color-mix(in oklab, var(--papel) 28%, transparent);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem}
.co-fecho-frase{font-family:var(--f-titulo);font-weight:700;font-size:var(--t-h3);line-height:1.15;max-width:40rem}
.co-fecho-frase .wf-fina{color:var(--salvia)}
.co-btn{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:.9rem 1.5rem;border-radius:99px;text-decoration:none;font-weight:600;
  border:1px solid color-mix(in oklab, var(--papel) 65%, transparent);transition:background .3s ease, color .3s ease}
.co-btn:hover{background:var(--papel);color:var(--tinta)}

@media (max-width:900px){
  .co-topo{grid-template-columns:minmax(0,1fr)}
  .co-sala{aspect-ratio:1/1}
  .co-marcas circle{r:44px}
  .co-marcas .co-aro{r:24px;fill:none;stroke:var(--led);stroke-width:3;opacity:0;transition:r .5s var(--ease), opacity .5s ease}
.co-marcas g.co-ativo .co-aro{r:46px;opacity:1}
.co-acesa .co-marcas .co-aro{animation:co-pulso 1.6s var(--ease) 2.6s 1 both}
@keyframes co-pulso{0%{r:24px;opacity:.9}100%{r:70px;opacity:0}}
.co-marcas text{font-size:44px}
  .co-lugares{grid-template-columns:minmax(0,1fr);gap:3rem;margin-top:2.5rem}
  .co-l2{margin-top:0}
  .co-l2 .co-det{width:88%}
  .co-l3{margin-top:0}
  .co-l3 .co-det{width:80%;margin-left:auto;aspect-ratio:1/1}
  .co-l3 .co-leg{margin-left:auto;max-width:88%}
}
@media (prefers-reduced-motion:reduce){
  .js .co-cena .co-sala img, .js .co-cena .co-leds > g, .js .co-cena .co-marcas, .js .co-cena .co-sala::after{transition:none}
  .co-acesa .co-marcas .co-aro{animation:none}
}


/* ===== seção vz ===== */
/* 5 · Minha amora — ela sentada na prateleira, a frase anotada à mão */
.vz{--vz-w:clamp(16rem, 9rem + 20vw, 31rem);--vz-amora:#6b2f4e}
.vz-luz{position:absolute;z-index:-1;pointer-events:none;right:-10%;top:5%;width:70%;height:80%;
  background:radial-gradient(closest-side at 60% 50% in oklab, color-mix(in oklab, var(--led) 30%, var(--noite)), transparent)}
.vz-grade{display:grid;grid-template-columns:minmax(0,1fr) var(--vz-w);grid-template-areas:"cima palco" "tabua tabua" "frases frases" "pe pe";column-gap:clamp(2rem,5vw,6rem)}
.vz-cima{grid-area:cima;align-self:end;padding-bottom:clamp(1.6rem,3vw,2.6rem)}
.vz-cima .wf-sobre{margin-bottom:1.1rem}
.vz-titulo{font-size:clamp(3rem,1.6rem + 4.6vw,6.2rem)}
.vz-apoio{margin-top:1.4rem}

/* a arte: frase dela com as marcas à mão em branco */
.vz-arte{margin:clamp(2.2rem,4vw,3.4rem) 0 0}
.vz-arte p{font-family:var(--f-titulo);font-weight:500;font-size:clamp(1.9rem,1.1rem + 2.5vw,3.5rem);line-height:1.28;letter-spacing:-.005em;color:var(--papel);max-width:17em;text-wrap:balance}
.vz-m{position:relative;display:inline-block;white-space:nowrap}
.vz-m--circ{margin-inline:.2em .12em}
.vz-m svg{position:absolute;overflow:visible;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.vz-m--circ svg{left:-.32em;right:-.32em;top:-.06em;bottom:-.06em;width:calc(100% + .64em);height:calc(100% + .12em)}
.vz-m--onda svg{left:-.04em;width:calc(100% + .08em);top:86%;height:.26em}
.vz-m--risco svg{left:-.06em;width:calc(100% + .12em);top:88%;height:.24em}
.vz-m path{stroke-dasharray:1;stroke-dashoffset:0}
.js .vz-arte .vz-m path{stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease)}
.js .vz-arte .vz-m--circ path{transition-delay:.9s}
.js .vz-arte .vz-m--onda path{transition-delay:1.6s;transition-duration:1.3s}
.js .vz-arte .vz-m--risco path:first-child{transition-delay:2.4s;transition-duration:.6s}
.js .vz-arte .vz-m--risco path:last-child{transition-delay:2.8s;transition-duration:.6s}
.js .vz-arte.wf-visto .vz-m path{stroke-dashoffset:0}
.vz-assina{margin-top:1.1rem;font-size:1.05rem;letter-spacing:.02em;color:var(--claro-suave)}
.vz-assina b{font-weight:600;color:var(--papel)}

/* ela, sentada na prateleira: a caixa vai até o assento; as pernas descem por cima da tábua */
.vz-palco{grid-area:palco;align-self:end;position:relative;margin:0;width:var(--vz-w);aspect-ratio:1038/1574;z-index:1}
.vz-palco img{position:absolute;left:0;top:0;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 83%,transparent 92.5%);mask-image:linear-gradient(180deg,#000 83%,transparent 92.5%)}
.vz-tabua{grid-area:tabua;margin-inline:calc(var(--pad) * -.5)}

/* outras frases dela, penduradas embaixo da tábua */
.vz-frases{grid-area:frases;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,3vw,3rem);
  margin-top:clamp(3rem,5vw,4.5rem);padding-right:calc(var(--vz-w) * .35)}
.vz-frases{margin-top:0}
/* cada frase pendurada num fio dourado que desce da tábua, em alturas diferentes */
.vz-frases li{position:relative;padding-top:calc(var(--fio) + 1.4rem);padding-left:1.4rem}
.vz-f1{--fio:1.6rem}.vz-f2{--fio:3.6rem}.vz-f3{--fio:6.4rem}
.vz-frases li::before{content:"";position:absolute;top:0;left:5px;width:1px;height:var(--fio);background:linear-gradient(180deg in oklab, var(--ouro-claro), color-mix(in oklab, var(--ouro) 60%, transparent))}
.vz-frases li::after{content:"";position:absolute;top:calc(var(--fio) - 1px);left:0;width:11px;height:11px;border-radius:50%;background:var(--vz-amora);box-shadow:0 0 0 2px color-mix(in oklab, var(--ouro) 75%, transparent), 0 0 18px color-mix(in oklab, var(--led) 45%, transparent)}
.vz-frases p{font-family:var(--f-titulo);font-weight:200;font-style:italic;font-size:clamp(1.45rem,1.15rem + .9vw,1.95rem);line-height:1.22;color:var(--papel)}

.vz-pe{grid-area:pe;margin-top:clamp(4rem,7vw,6.5rem);display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1.6rem 3rem}
.vz-grito{font-family:var(--f-titulo);font-weight:700;font-size:clamp(1.9rem,1.2rem + 2.4vw,3.4rem);line-height:1.08;max-width:20em;color:var(--papel)}
.vz-grito .wf-fina{display:block;color:var(--salvia-2)}
.vz-insta{color:var(--papel);font-size:1.06rem;text-decoration:none;gap:.7rem;padding:.4rem 1.3rem .4rem .5rem;border-radius:99px;border:1px solid color-mix(in oklab, var(--ouro) 55%, transparent);transition:background .3s ease}
.vz-insta:hover{background:color-mix(in oklab, var(--papel) 8%, transparent)}
.vz-insta svg{width:2.3rem;height:2.3rem;padding:.45rem;border-radius:50%;background:var(--vz-amora);color:var(--papel);flex:none}
.vz-insta b{font-weight:600}

@media (prefers-reduced-motion:reduce){ .js .vz-arte .vz-m path{transition:none;stroke-dashoffset:0} }

@media (max-width:900px){
  .vz{--vz-w:min(74vw,21rem)}
  .vz-grade{grid-template-columns:minmax(0,1fr);grid-template-areas:"cima" "palco" "tabua" "frases" "pe"}
  .vz-cima{padding-bottom:2.4rem}
  .vz-palco{justify-self:end;margin-right:4%}
  .vz-frases{grid-template-columns:minmax(0,1fr);padding-right:0;margin-top:calc(var(--vz-w) * .2);gap:1.2rem}
  .vz-f1{--fio:1.4rem}.vz-f2{--fio:2.6rem;margin-left:10%}.vz-f3{--fio:1.8rem;margin-left:4%}
  .vz-luz{width:120%;right:-40%;top:30%;height:50%}
}


/* ===== seção pf ===== */
/* 6 · Dúvidas — cada pergunta é uma prateleira; a aberta acende */
.pf-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6.5rem);align-items:start}
.pf-lado{position:sticky;top:7rem}
.pf-lado .wf-sobre{margin-bottom:1.2rem}
.pf-titulo .wf-fina{display:block}
.pf-voz{margin:clamp(2rem,4vw,3rem) 0 0}
.pf-voz blockquote{font-family:var(--f-titulo);font-weight:200;font-style:italic;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);line-height:1.22;color:var(--tinta)}
.pf-prat{margin-top:1.4rem;width:72%}
.pf-voz figcaption{margin-top:.9rem;color:var(--tinta-suave)}
.pf-acao{margin-top:2rem}

.pf-lista{position:relative}
.pf-lista::after{content:"";display:block;height:1px;background:color-mix(in oklab, var(--ouro) 45%, var(--papel-2))}
.pf-item{position:relative}
.pf-item::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1s ease .15s;
  background:radial-gradient(70% 90% at 50% 0 in oklab, color-mix(in oklab, var(--led) 34%, transparent), transparent)}
.pf-item[open]::before{opacity:1}
.pf-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3rem minmax(0,1fr) 2.75rem;align-items:center;gap:.5rem;
  min-height:56px;padding:1.35rem 0;border-radius:6px}
.pf-item summary::-webkit-details-marker{display:none}
.pf-n{font-size:var(--t-mini);letter-spacing:.14em;color:var(--musgo);font-weight:600}
.pf-q{font-family:var(--f-titulo);font-weight:700;font-size:clamp(1.3rem,1.1rem + .7vw,1.75rem);line-height:1.2;transition:color .3s ease}
.pf-item summary:hover .pf-q{color:var(--oliva-esc)}
.pf-item summary:hover .pf-sinal{border-color:color-mix(in oklab, var(--tinta) 30%, transparent)}
.pf-sinal{position:relative;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid transparent;transition:background .4s ease, border-color .4s ease, transform .5s var(--ease)}
.pf-sinal::before,.pf-sinal::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.pf-sinal::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .5s var(--ease)}
.pf-item[open] .pf-sinal{background:var(--noite);color:var(--papel);border-color:var(--noite)}
.pf-item[open] .pf-sinal::after{transform:translate(-50%,-50%) rotate(0)}

.pf-resp{padding:0 3.25rem 1.6rem 3.5rem}
.pf-resp p{font-size:var(--t-apoio);line-height:1.65;color:var(--tinta-suave);max-width:36rem}
.pf-item[open] .pf-resp{animation:pf-abre .7s var(--ease) both}
q.pf-fala{quotes:"“" "”";font-family:var(--f-titulo);font-weight:200;font-style:italic;font-size:1.3em;line-height:1.3;color:var(--tinta)}
.pf-resp p + p{margin-top:.7rem}
@keyframes pf-abre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* a prateleira de cada pergunta mora no summary (num details fechado só ele é desenhado) */
.pf-item summary{position:relative}
.pf-item summary::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:color-mix(in oklab, var(--ouro) 45%, var(--papel-2))}
.pf-item summary::after{content:"";position:absolute;left:0;right:0;top:-.5px;height:2px;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg in oklab, transparent, var(--ouro) 10%, #d9b877 88%, transparent);transition:transform 1.2s var(--ease)}
.pf-item[open] summary::after{transform:scaleX(1)}
.pf-item[open] .pf-q{color:var(--musgo)}
.pf-n{position:relative;transition:color .4s ease}
.pf-item[open] .pf-n{color:var(--ouro-tinta)}
.pf-item[open] .pf-n::after{content:"";position:absolute;left:-.85rem;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--led);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--ouro) 60%, transparent), 0 0 14px 4px color-mix(in oklab, var(--led) 70%, transparent)}

/* oitava prateleira: a saída para o WhatsApp */
.pf-mais{position:relative;display:grid;grid-template-columns:3rem minmax(0,1fr) 2.75rem;align-items:center;gap:.5rem;min-height:56px;padding:1.4rem 0;text-decoration:none;
  border-top:1px solid color-mix(in oklab, var(--ouro) 45%, var(--papel-2));border-bottom:1px solid color-mix(in oklab, var(--ouro) 45%, var(--papel-2))}
.pf-mais-txt{font-size:var(--t-apoio);color:var(--tinta-suave)}
.pf-mais-txt b{color:var(--tinta);font-weight:600;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
.pf-seta{justify-self:center;font-size:1.3rem;transition:transform .4s var(--ease)}
.pf-mais:hover .pf-seta{transform:translateX(4px)}
.pf-lista::after{content:none}

@media (max-width:900px){
  .pf-grade{grid-template-columns:minmax(0,1fr)}
  .pf-lado{position:static;display:contents}
  .pf-lado > .wf-sobre{order:0}
  .pf-titulo{order:1;margin-bottom:.5rem}
  .pf-lista{order:2}
  .pf-voz{order:3;margin-top:1rem}
  .pf-acao{order:4;margin-top:0}
  .pf-item summary, .pf-mais{grid-template-columns:2rem minmax(0,1fr) 2.75rem;gap:.35rem;padding:1.15rem 0}
  .pf-resp{padding:0 0 1.4rem 2.35rem}
  .pf-item[open] .pf-n::after{left:-.7rem}
}
@media (prefers-reduced-motion:reduce){
  .pf-item[open] .pf-resp{animation:none}
  .pf-item summary::after{transition:none}
}


/* ===== seção ct ===== */
.ct{padding-bottom:calc(var(--sec-y) * .75)}
/* luz morna atrás da porta, não atrás do texto */
.ct .wf-malha{background:
  radial-gradient(circle closest-side at 22% 30% in oklab, color-mix(in oklab, var(--led) 42%, var(--oliva)), transparent),
  radial-gradient(circle closest-side at 85% 15% in oklab, #9aa178, transparent),
  radial-gradient(circle closest-side at 70% 100% in oklab, color-mix(in oklab, var(--oliva-esc) 70%, var(--oliva)), transparent)}
.ct-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5.5rem);align-items:center}
.ct-texto{min-width:0}
.ct-foto{position:relative;margin:0;border-radius:var(--raio-g);overflow:clip;box-shadow:var(--sombra);aspect-ratio:4/4.6}
.ct-foto img{width:100%;height:100%;object-fit:cover;object-position:42% 50%}
.ct-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg in oklab, transparent 55%, color-mix(in oklab, var(--noite) 55%, transparent));pointer-events:none}
.ct-placa{position:absolute;left:1.4rem;bottom:1.4rem;z-index:1;display:grid;justify-items:start;gap:.15rem;padding:.9rem 1.2rem 1rem;border-radius:14px;
  color:var(--papel);background:color-mix(in oklab, var(--noite) 45%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid color-mix(in oklab, var(--ouro-claro) 45%, transparent)}
.ct-placa span{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--salvia)}
.ct-placa b{font-family:var(--f-titulo);font-weight:700;font-size:clamp(3rem,2.2rem + 2.4vw,4.4rem);line-height:.9;letter-spacing:-.01em}
.ct-titulo{font-size:clamp(2.6rem, 1.6rem + 3.4vw, 4.9rem)}
.ct-titulo .wf-fina{display:block;font-size:.56em;line-height:1.1;margin-bottom:.25em;color:var(--salvia)}
.ct-titulo .wf-pousa > .wf-prateleira{right:-1.2em}
.ct-texto .wf-sobre{margin-bottom:1.2rem}
.ct-apoio{margin-top:1.6rem}
.ct-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:2rem}
.ct-nota{margin-top:1.4rem;font-size:1rem;color:var(--claro-suave)}
.ct-nota b{color:var(--papel)}
.ct-nota .wf-link{min-height:44px;display:inline-flex;margin-left:.5rem}
.ct-cep{white-space:nowrap}
.ct-dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid color-mix(in oklab, var(--papel) 28%, transparent)}
.ct-dados dt{font-size:var(--t-mini);letter-spacing:.16em;text-transform:uppercase;color:var(--salvia);margin-bottom:.45rem}
.ct-dados dd{font-size:1rem;line-height:1.55;color:var(--papel)}
.ct-dados .wf-link{min-height:44px}
.ct-est{color:var(--ouro-claro);letter-spacing:.1em}
@media (max-width:900px){
  .ct-grade{grid-template-columns:minmax(0,1fr);gap:2rem}
  .ct-foto{aspect-ratio:4/3.6;order:2}
  .ct-texto{display:contents}
  .ct-texto > .wf-sobre{order:0;margin-bottom:-1.2rem}
  .ct-texto > .ct-titulo{order:1}
  .ct-texto > *:not(.wf-sobre):not(.ct-titulo){order:3}
  .ct-texto > .ct-apoio{margin-top:0}
  .ct-texto > .ct-acoes, .ct-texto > .ct-nota, .ct-texto > .ct-dados{margin-top:-.9rem}
  .ct-acoes{gap:.4rem 1.4rem}
  .ct-nota .wf-link{margin-left:0}
  .ct-titulo .wf-pousa > .wf-prateleira{right:-.3em}
  .ct-titulo .wf-fina{font-size:.6em}
  .ct-dados{grid-template-columns:minmax(0,1fr);gap:1.2rem}
}

/* ===== rodapé ===== */
.fim{position:relative;background:var(--noite);color:var(--claro-suave);padding:0 var(--pad) 1.6rem;font-size:1rem}
.fim-linha{max-width:var(--larg);margin:0 auto}
.fim-dentro{max-width:var(--larg);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;padding:3.6rem 0 2.6rem}
.fim-marca{font-family:var(--f-titulo);font-weight:300;font-size:2rem;color:var(--papel);line-height:1.1;margin-bottom:.6rem}
.fim-marca b{font-family:var(--f-texto);font-weight:600;font-size:.62em;letter-spacing:.03em}
.fim-rot{font-size:var(--t-mini);letter-spacing:.16em;text-transform:uppercase;color:var(--salvia);margin-bottom:.5rem}
.fim a{color:var(--papel);text-underline-offset:.25em;line-height:2.2}
.fim-base{max-width:var(--larg);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 2rem;padding-top:1.4rem;
  border-top:1px solid color-mix(in oklab, var(--papel) 14%, transparent);font-size:.9rem}
.fim-selo a{font-weight:600;text-decoration:underline;text-decoration-color:var(--ouro);line-height:1.6;display:inline-block;padding:.5rem 0}
@media (max-width:900px){ .fim-dentro{grid-template-columns:1fr;gap:1.6rem} }

/* ===== AJUSTES DA MONTAGEM (por último) ===== */

/* contraste AA: o texto miúdo do hero fica sobre um oliva um pouco mais fundo (o título continua no #868d64) */
.hero .texto::before{content:"";position:absolute;z-index:-1;left:-20%;right:-10%;top:42%;bottom:-6%;pointer-events:none;
  background:radial-gradient(closest-side in oklab, color-mix(in oklab, #59603f 92%, transparent), color-mix(in oklab, #59603f 60%, transparent) 55%, transparent)}
.hero .apoio, .hero .provas{color:#f1f1e6}
.hero .provas strong{color:#fff}
@media (max-width:900px){
  .hero .texto::before{left:-10%;right:-10%;top:30%;bottom:0;
    background:linear-gradient(180deg in oklab, transparent, color-mix(in oklab, #59603f 85%, transparent) 25%, #59603f)}
}

/* contato: parede oliva mais funda do lado do texto, oliva da foto do lado da porta */
.ct.wf-oliva{background:#5f6646}
.ct .wf-malha{background:
  radial-gradient(circle closest-side at 22% 40% in oklab, color-mix(in oklab, var(--led) 30%, var(--oliva)), color-mix(in oklab, var(--oliva) 60%, transparent) 55%, transparent),
  radial-gradient(circle closest-side at 85% 10% in oklab, color-mix(in oklab, var(--oliva) 55%, #5f6646), transparent)}
.ct .wf-apoio, .ct-dados dd, .ct-nota{color:#f1f1e6}

/* rótulos mínimos */
.wf-sobre{font-size:max(var(--t-mini), 14px)}

/* movimento reduzido: tudo pronto, nada andando */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;
    transition-duration:.01ms!important;transition-delay:0s!important}
  .js [data-rev]{opacity:1!important;transform:none!important;filter:none!important}
}