/* ==========================================================================
   Dra. Telmi Kawagoe · base do site (derivada do hero D)
   Leia 02-conceito/sistema.md antes de mexer. Seções usam só estas variáveis.
   ========================================================================== */
:root{
  --noite:#0e1730; --noite-2:#17254a; --noite-3:#0a1124; --ameixa:#2a2147;
  --marfim:#f4ecdd; --marfim-2:#b9b6c2;
  --papel:#f6efe2; --papel-2:#efe2cb;
  --tinta:#141d38; --tinta-2:#515a72;
  --manha:#f3bccb; --creme:#f6e6c6; --ouro:#dcb96f; --tarde:#e58a4c;
  --ouro-tinta:#8a6420; --tarde-tinta:#a9521c;
  --fio:linear-gradient(90deg in oklch,var(--manha),var(--creme) 35%,var(--ouro) 65%,var(--tarde));
  --fio-escuro:linear-gradient(90deg in oklch,#b8566f,var(--ouro-tinta) 55%,var(--tarde-tinta));
  --f-titulo:'Petrona',Georgia,'Times New Roman',serif;
  --f-texto:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --esp:clamp(20px,4.4vw,64px);
  --calha:clamp(84px,8.6vw,132px);
  --largura:1240px;
  --resp:clamp(84px,12vh,160px);
  --curva:cubic-bezier(.2,.8,.2,1);
  /* valores padrão de uma seção escura; .sec--clara troca */
  --fundo:var(--noite); --texto:var(--marfim); --texto-2:var(--marfim-2);
  --linha:rgba(244,236,221,.14); --hora:var(--ouro);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:var(--f-texto);font-size:clamp(16.5px,1.3vw,19px);line-height:1.6;color:var(--marfim);background:var(--noite);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--hora);outline-offset:3px;border-radius:4px}
.so-leitor{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- seção ---------- */
.sec{position:relative;isolation:isolate;overflow:hidden;padding-block:var(--resp);background:var(--fundo);color:var(--texto)}
.sec--escura{--fundo:var(--noite);--texto:var(--marfim);--texto-2:var(--marfim-2);--linha:rgba(244,236,221,.14);--hora:var(--ouro)}
.sec--clara{--fundo:var(--papel);--texto:var(--tinta);--texto-2:var(--tinta-2);--linha:rgba(20,29,56,.16);--hora:var(--ouro-tinta)}
.sec__dentro{position:relative;max-width:calc(var(--largura) + 2 * var(--esp));margin-inline:auto;padding-inline:var(--esp)}
@media (min-width:1100px){
  .sec__dentro{max-width:calc(var(--largura) + var(--calha) + var(--esp));padding-left:var(--calha)}
}
/* malha de fundo: cada seção define o próprio background nesta camada */
.sec__malha{position:absolute;inset:-10%;z-index:-2;filter:blur(56px);pointer-events:none}
.grao{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sec--clara .grao{mix-blend-mode:multiply;opacity:.05}

/* ---------- tipografia ---------- */
.olho{display:flex;align-items:center;gap:12px;font-size:12.5px;line-height:1.3;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-2)}
.tit-2{font-family:var(--f-titulo);font-weight:400;font-size:clamp(34px,4.6vw,70px);line-height:1;letter-spacing:-.022em;color:var(--texto);text-wrap:balance}
.tit-3{font-family:var(--f-titulo);font-weight:400;font-size:clamp(23px,2.1vw,31px);line-height:1.12;letter-spacing:-.012em;color:var(--texto)}
.tit-2 em,.tit-3 em{font-style:italic}
.txt{color:var(--texto-2);max-width:34em}
.txt b,.txt strong{color:var(--texto);font-weight:500}
.miudo{font-size:13.5px;line-height:1.5;color:var(--texto-2)}
/* itálico com o degradê do fio; compensa a perna do f e do g */
.fio-texto{font-style:italic;background:var(--fio);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .08em .2em 0;margin-bottom:-.2em;display:inline-block}
.sec--clara .fio-texto{background-image:var(--fio-escuro)}
/* citação: a voz dela ou de paciente */
.voz{font-family:var(--f-titulo);font-style:italic;font-weight:400;color:var(--texto);quotes:"“" "”"}
/* linhas de título que sobem */
.l{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.l>span{display:inline-block}

/* ---------- formas do hero ---------- */
.dente{border:1.3px solid color-mix(in srgb,var(--texto) 50%,transparent);background:color-mix(in srgb,var(--texto) 4%,transparent);border-radius:26px}
.dente--p{border-radius:12px}
.braq{flex:none;display:inline-block;width:12px;height:12px;border-radius:2.5px;background:
  linear-gradient(var(--fundo),var(--fundo)) padding-box, var(--fio) border-box;border:1.4px solid transparent}
.sec--clara .braq{background:linear-gradient(var(--fundo),var(--fundo)) padding-box, var(--fio-escuro) border-box}
.fio{display:block;height:2.5px;border-radius:3px;background:var(--fio)}
.sec--clara .fio{background:var(--fio-escuro)}
.no{flex:none;display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--texto);background:var(--fundo)}
.no--aceso{background:var(--ouro);border-color:var(--ouro);box-shadow:0 0 0 8px color-mix(in srgb,var(--ouro) 22%,transparent)}

/* ---------- ações ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ouro);color:#1a1830;text-decoration:none;font-weight:600;font-size:16.5px;line-height:1.2;padding:16px 26px;border-radius:99px;border:0;cursor:pointer;transition:transform .25s,box-shadow .25s;box-shadow:0 12px 30px -14px rgba(220,185,111,.7)}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:19px;height:19px;fill:currentColor;flex:none}
.btn--tinta{background:var(--tinta);color:var(--marfim);box-shadow:0 12px 30px -14px rgba(20,29,56,.6)}
.btn:focus-visible{outline:2px solid var(--texto);outline-offset:3px;border-radius:99px}
.lnk{color:var(--texto);text-decoration:none;border-bottom:1px solid var(--hora);padding-bottom:1px;transition:border-color .25s}
.lnk:hover{border-bottom-color:var(--texto)}

/* ---------- revelação na rolagem (base.js põe .visto) ---------- */
.js [data-rev]{opacity:0;transform:translateY(18px);transition:opacity .95s var(--curva),transform .95s var(--curva);transition-delay:calc(var(--i,0) * 90ms)}
.js [data-rev].visto{opacity:1;transform:none}
.js [data-rev="linhas"],.js [data-rev="nada"]{opacity:1;transform:none;transition:none}
.js [data-rev="linhas"] .l>span{transform:translateY(112%);transition:transform 1.05s var(--curva);transition-delay:calc(var(--i,0) * 90ms)}
.js [data-rev="linhas"] .l:nth-child(2)>span{transition-delay:calc(var(--i,0) * 90ms + 90ms)}
.js [data-rev="linhas"] .l:nth-child(3)>span{transition-delay:calc(var(--i,0) * 90ms + 180ms)}
.js [data-rev="linhas"] .l:nth-child(4)>span{transition-delay:calc(var(--i,0) * 90ms + 270ms)}
.js [data-rev="linhas"].visto .l>span{transform:none}

/* ---------- o fio da página (computador): um trecho por seção, na calha ---------- */
.sec__fio{display:none}
@media (min-width:1100px){
  .sec__fio{display:block;position:absolute;z-index:3;top:0;bottom:0;left:calc(var(--calha) * .46);width:2px;margin-left:max(0px,(100vw - var(--largura) - var(--calha) - var(--esp)) / 2);background:var(--linha);pointer-events:none}
  .sec__fio::before{content:"";position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0) * 100%);background:linear-gradient(to bottom in oklch,var(--fio-a,var(--hora)),var(--fio-b,var(--hora)));border-radius:0 0 2px 2px}
  .sec__fio::after{content:"";position:absolute;left:50%;top:calc(var(--p,0) * 100%);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--fio-b,var(--hora));box-shadow:0 0 0 5px color-mix(in srgb,var(--fio-b,var(--hora)) 24%,transparent),0 0 18px 4px color-mix(in srgb,var(--fio-b,var(--hora)) 55%,transparent);opacity:var(--luz,0);transition:opacity .4s}
  .sec__fio i{position:absolute;left:50%;top:var(--y,120px);width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:3px;background:var(--fundo);border:1.5px solid var(--fio-b,var(--hora));transition:background .5s}
  .sec__fio.passou i{background:var(--fio-b,var(--hora))}
  #pessoa{--fio-a:var(--ouro);--fio-b:var(--manha)}
  #infancia{--fio-a:var(--manha);--fio-b:var(--creme)}
  #alinhar{--fio-a:#b8566f;--fio-b:var(--ouro-tinta)}
  #antes-de-doer{--fio-a:var(--ouro-tinta);--fio-b:var(--tarde-tinta)}
  #protese{--fio-a:var(--tarde);--fio-b:var(--tarde)}
  #dentista{--fio-a:var(--tarde);--fio-b:var(--ouro)}
  #avaliacoes{--fio-a:var(--ouro);--fio-b:var(--ouro)}
  #consulta{--fio-a:var(--ouro-tinta);--fio-b:var(--ouro-tinta)}
  #onde{--fio-a:var(--ouro);--fio-b:var(--ouro)}
}

/* ---------- barra fixa: aparece depois do hero; o menu é um fio com nós ---------- */
.barra{position:fixed;z-index:60;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px var(--esp);
  background:color-mix(in srgb,var(--noite-3) 82%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid rgba(244,236,221,.1);
  transform:translateY(-102%);transition:transform .5s var(--curva);color:var(--marfim)}
.barra.mostra{transform:none}
.barra__marca{font-family:var(--f-titulo);font-weight:500;font-size:19px;line-height:1.2;text-decoration:none;white-space:nowrap}
.barra__nav{position:relative;display:flex;gap:clamp(14px,2vw,30px);font-size:13.5px}
.barra__nav::before{content:"";position:absolute;left:6px;right:6px;top:5px;height:1.5px;background:rgba(244,236,221,.2)}
.barra__nav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:var(--marfim-2);white-space:nowrap;transition:color .3s}
.barra__nav a::before{content:"";width:11px;height:11px;border-radius:50%;border:1.6px solid var(--marfim-2);background:var(--noite-3);transition:background .3s,border-color .3s,box-shadow .3s}
.barra__nav a:hover{color:var(--marfim)}
.barra__nav a[aria-current="true"]{color:var(--marfim)}
.barra__nav a[aria-current="true"]::before{background:var(--ouro);border-color:var(--ouro);box-shadow:0 0 0 5px rgba(220,185,111,.22)}
.barra__zap{display:inline-flex;align-items:center;gap:8px;background:var(--ouro);color:#1a1830;text-decoration:none;font-weight:600;font-size:14.5px;line-height:1.2;padding:10px 18px;border-radius:99px;white-space:nowrap}
.barra__zap svg{width:16px;height:16px;fill:currentColor}
.barra__onde{display:none;font-size:12.5px;line-height:1.3;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro);white-space:nowrap}
.barra__prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--pg,0));background:var(--fio)}
@media (max-width:1099px){
  .barra__nav,.barra__zap{display:none}
  .barra__onde{display:block}
  .barra{padding-block:13px}
  .barra__marca{font-size:17.5px}
}
/* botão do WhatsApp que acompanha a rolagem no celular */
.zapfix{position:fixed;z-index:55;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:none;align-items:center;gap:9px;background:var(--ouro);color:#1a1830;text-decoration:none;font-weight:600;font-size:15.5px;line-height:1.2;padding:13px 19px;border-radius:99px;box-shadow:0 14px 30px -10px rgba(4,8,20,.7),0 0 0 1px rgba(26,24,48,.12);transform:translateY(160%);transition:transform .5s var(--curva)}
.zapfix svg{width:19px;height:19px;fill:currentColor}
.zapfix.mostra{transform:none}
@media (max-width:1099px){.zapfix{display:inline-flex}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01s!important;transition-delay:0s!important}
}

/* ---------- hero (hipótese D, aprovada). Classes com prefixo he- ---------- */
.he{position:relative;min-height:100svh;display:flex;flex-direction:column;isolation:isolate;overflow:hidden;background:var(--noite);color:var(--marfim)}
.he__malha{position:absolute;inset:-12%;z-index:-2;filter:blur(60px);
  background:
   radial-gradient(34% 40% at 58% 22%, color-mix(in oklch,var(--manha) 16%,var(--noite-2)) 0%, transparent 70%),
   radial-gradient(40% 46% at 96% 78%, color-mix(in oklch,var(--tarde) 24%,var(--noite)) 0%, transparent 70%),
   radial-gradient(46% 50% at 20% 30%, var(--noite-2) 0%, transparent 72%),
   radial-gradient(40% 44% at 10% 100%, var(--ameixa) 0%, transparent 72%),
   var(--noite);
  animation:he-respira 34s ease-in-out infinite alternate}
@keyframes he-respira{to{transform:translate3d(-2%,2%,0) scale(1.06)}}
.he__grao{z-index:5}
.he__topo{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px var(--esp) 0}
.he__marca{text-decoration:none;display:flex;align-items:baseline;gap:12px}
.he__marca b{font-family:var(--f-titulo);font-weight:500;font-size:21px;line-height:1.2}
.he__marca span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--marfim-2)}
.he__topo nav{display:flex;gap:26px;font-size:14.5px}
.he__topo nav a{text-decoration:none;color:var(--marfim-2)}
.he__topo nav a:hover{color:var(--marfim)}
.he__topo nav .he__zap{color:var(--ouro)}
.he__palco{flex:1;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:center;gap:clamp(8px,2vw,32px);padding:clamp(14px,3vh,34px) var(--esp) 18px}
.he__texto{min-width:0}
.he__olho{font-size:12.5px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--marfim-2);display:flex;gap:12px;align-items:center}
.he__olho i{display:block;width:30px;height:1px;background:var(--ouro)}
.he h1{font-family:var(--f-titulo);font-weight:400;font-size:clamp(40px,5.5vw,88px);line-height:.98;letter-spacing:-.025em;margin:20px 0 0}
.he h1 em{font-style:italic;background:linear-gradient(90deg in oklch,var(--manha),var(--ouro) 55%,var(--tarde));-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .08em .2em 0;margin-bottom:-.2em;display:inline-block}
.he h1 .l>span{transform:translateY(110%);animation:he-sobe 1s var(--curva) forwards}
.he h1 .l:nth-child(2)>span{animation-delay:.1s}.he h1 .l:nth-child(3)>span{animation-delay:.2s}
@keyframes he-sobe{to{transform:none}}
.he__apoio{margin-top:24px;font-size:clamp(16.5px,1.3vw,19px);line-height:1.55;color:var(--marfim-2);max-width:30em}
.he__apoio b{color:var(--marfim);font-weight:500}
.he__acoes{margin-top:28px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.he__voz{font-size:13.5px;line-height:1.45;color:var(--marfim-2);max-width:250px}
.he__voz q{display:block;font-family:var(--f-titulo);font-style:italic;font-size:19px;line-height:1.25;color:var(--marfim);quotes:"“" "”";margin-bottom:4px}
.he__cena{position:relative;min-width:0;display:grid;place-items:center}
.he__cena svg{width:min(100%,700px);height:auto;max-height:76svh;overflow:visible;max-width:none}
.he__arco{fill:none;stroke:url(#he-gLinha);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:he-desenha 2.6s .3s cubic-bezier(.5,.1,.2,1) forwards}
@keyframes he-desenha{to{stroke-dashoffset:0}}
.he__dente{fill:rgba(244,236,221,.035);stroke:rgba(244,236,221,.5);stroke-width:1.3;opacity:0;animation:he-surge .7s ease forwards}
.he__braq{fill:var(--noite);stroke:url(#he-gLinha);stroke-width:1.4;opacity:0;animation:he-surge .7s ease forwards}
@keyframes he-surge{to{opacity:1}}
.he__est{cursor:pointer;outline:none}
.he__est .he__halo{fill:var(--ouro);opacity:0;transition:opacity .5s}
.he__est .he__no{fill:var(--noite);stroke:var(--marfim);stroke-width:2;transition:fill .4s,stroke .4s}
.he__est text{font-family:var(--f-texto);font-size:17px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;fill:var(--marfim-2);transition:fill .4s}
.he__est[aria-pressed=true] .he__halo{opacity:.22}
.he__est[aria-pressed=true] .he__no{fill:var(--ouro);stroke:var(--ouro)}
.he__est[aria-pressed=true] text,.he__est:hover text{fill:var(--marfim)}
.he__est:focus-visible .he__no{stroke:var(--ouro);stroke-width:4}
.he__luz{fill:#fff8e6;filter:url(#he-fBrilho)}
.he__fase{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:min(46%,300px);text-align:center;pointer-events:none}
.he__fase small{display:block;font-size:12px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--ouro)}
.he__fase strong{display:block;font-family:var(--f-titulo);font-weight:400;font-size:clamp(24px,2.5vw,36px);line-height:1.08;margin:10px 0 12px;letter-spacing:-.01em}
.he__fase p{font-size:clamp(14px,1.1vw,16px);line-height:1.5;color:var(--marfim-2)}
.he__fase a{pointer-events:auto;display:inline-block;margin-top:12px;font-size:13.5px;line-height:1.3;color:var(--marfim);text-decoration:none;border-bottom:1px solid var(--ouro);padding-bottom:1px}
.he__fase a:hover{border-bottom-color:var(--marfim)}
.he__fase>*{transition:opacity .35s,transform .35s}
.he__fase.troca>*{opacity:0;transform:translateY(8px)}
.he__pe{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:14px var(--esp) 20px;font-size:13px;line-height:1.5;color:var(--marfim-2);border-top:1px solid rgba(244,236,221,.12)}
.he__pe b{color:var(--marfim);font-weight:500}
@media (max-width:940px){
  .he__topo nav a:not(.he__zap){display:none}
  .he__marca span{display:none}
  .he__palco{display:block;padding-top:22px}
  .he h1{font-size:clamp(38px,11vw,60px)}
  .he__cena{margin:30px -6px 0}
  .he__cena svg{max-height:none}
  .he__est text{display:none}
  .he__fase{width:56%;top:56%}
  .he__fase small{font-size:10.5px;letter-spacing:.1em}
  .he__fase strong{font-size:21px;margin:6px 0 8px}
  .he__fase p{font-size:13.5px;line-height:1.4}
  .he__fase a{margin-top:8px;font-size:13px}
  .he__voz{max-width:none}
  .he__acoes{gap:18px}
  .he__pe{margin-top:18px}
}
@media (prefers-reduced-motion:reduce){.he__luz{display:none}}

/* ---------- manifesto (#pessoa). Prefixo ma- ----------
   A frase dela é partida em duas pelo retrato: o fio sublinha as duas metades e passa por trás dela. */
.ma{--ma-fs:clamp(36px,10.4vw,58px);--ma-rw:min(92vw,430px);padding-block:clamp(76px,10vh,116px) 0}
.ma__malha{background:
  radial-gradient(34% 40% at 52% 40%, color-mix(in oklch,var(--ouro) 20%,var(--noite-2)) 0%, transparent 70%),
  radial-gradient(30% 34% at 88% 62%, color-mix(in oklch,var(--manha) 12%,var(--noite-2)) 0%, transparent 72%),
  radial-gradient(38% 40% at 12% 56%, var(--noite-2) 0%, transparent 72%),
  radial-gradient(26% 26% at 70% 26%, var(--ameixa) 0%, transparent 72%),
  var(--noite)}
.ma__olho{position:relative;z-index:3}

/* ----- celular e tablet: frase, retrato, frase (de cima para baixo) ----- */
.ma__palco{position:relative;margin-top:22px;padding-bottom:var(--resp)}
.ma__frase{position:relative;z-index:3;font-size:var(--ma-fs);font-style:italic}
.ma__antes,.ma__depois{display:block}
.ma__depois{margin-top:calc(var(--ma-rw) * 1.2)}
.ma__retrato{position:absolute;z-index:2;right:calc(var(--esp) * -1);top:calc(var(--ma-fs) * 1.72);width:var(--ma-rw);margin:0;pointer-events:none}
.ma__retrato img{width:100%;height:auto;max-width:none;
  -webkit-mask-image:linear-gradient(180deg,#000 66%,transparent 97%);mask-image:linear-gradient(180deg,#000 66%,transparent 97%)}
.ma__halo{position:absolute;z-index:0;right:calc(var(--esp) * -1 - var(--ma-rw) * .14);top:calc(var(--ma-fs) * 1.2);width:calc(var(--ma-rw) * 1.2);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in oklch,var(--ouro) 30%,transparent),color-mix(in oklch,var(--manha) 9%,transparent) 55%,transparent);filter:blur(26px);pointer-events:none}
/* o fio: no celular sublinha a segunda metade e cruza a base do retrato */
.ma__fio{position:absolute;z-index:3;left:0;right:-50vw;top:calc(var(--ma-fs) * 4.06 + var(--ma-rw) * 1.2 + 14px);height:2.5px;pointer-events:none}
.ma__linha{position:absolute;inset:0;border-radius:3px;background:linear-gradient(90deg in oklch,var(--manha),var(--creme) 22%,var(--ouro) 48%,var(--tarde) 72%);transform-origin:0 50%}
.js .ma__linha{transform:scaleX(0);transition:transform 2.3s cubic-bezier(.5,.1,.2,1) .45s}
.js .ma__fio.visto .ma__linha{transform:none}
.ma__braq{position:absolute;left:-1px;top:50%;margin-top:-6px;--fundo:var(--noite)}
.ma__luz{position:absolute;inset:0;transform:translateX(-100%);animation:ma-corre 36s linear 3.2s infinite}
.ma__luz::after{content:"";position:absolute;right:0;top:50%;width:8px;height:8px;margin:-4px -4px 0 0;border-radius:50%;background:#fff8e6;box-shadow:0 0 0 4px rgba(255,248,230,.18),0 0 16px 5px rgba(255,236,190,.6)}
@keyframes ma-corre{to{transform:none}}

.ma__lado{position:relative;z-index:3}
.ma__lado--a{margin-top:38px}
.ma__origem{display:flex;align-items:center;gap:10px}
.ma__origem::before{content:"";flex:none;width:22px;height:1px;background:var(--hora)}
.ma__apoio{margin-top:26px;font-size:clamp(20px,1.6vw,23px);line-height:1.36;max-width:21em}
.ma__origem--b{margin-top:12px}
.ma__lado--b{margin-top:38px}
.ma__fatos{display:grid;gap:11px;font-size:16px;line-height:1.35;color:var(--texto)}
.ma__fatos li{display:flex;align-items:baseline;gap:12px}
.ma__fatos .braq{position:relative;top:1px;--fundo:var(--noite)}
.ma__junto{white-space:nowrap}
.ma__zap{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-size:16px;font-weight:500;line-height:1.3;padding-bottom:3px}
.ma__zap svg{width:18px;height:18px;fill:var(--hora);flex:none}

/* ----- computador: a frase passa por ela, da esquerda para a direita ----- */
@media (min-width:1000px){
  .ma{--ma-h:clamp(520px,min(86svh,52vw),840px);--ma-w:calc(var(--ma-h) * .697);--ma-fs:clamp(34px,4.6vw,70px)}
  .ma__palco{height:var(--ma-h);margin-top:14px;padding-bottom:0}
  .ma__retrato{right:auto;left:calc(50% - var(--ma-w) / 2);top:0;width:var(--ma-w)}
  .ma__retrato img{
    -webkit-mask-image:linear-gradient(90deg,#000 74%,transparent 97%),linear-gradient(180deg,#000 80%,transparent 91.5%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,#000 74%,transparent 97%),linear-gradient(180deg,#000 80%,transparent 91.5%);mask-composite:intersect}
  .ma__halo{right:auto;left:calc(50% - var(--ma-w) * .62);top:calc(var(--ma-h) * -.06);width:calc(var(--ma-w) * 1.24)}
  .ma__frase{position:static}
  .ma__antes,.ma__depois{position:absolute;z-index:3;bottom:calc(var(--ma-h) * .5 + 16px);margin:0}
  .ma__antes{right:calc(50% + var(--ma-w) * .27);text-align:right}
  .ma__depois{left:calc(50% + var(--ma-w) * .44)}
  /* o fio: sublinha as duas metades e passa por trás do retrato, na altura dos ombros */
  .ma__fio{z-index:1;top:calc(var(--ma-h) * .5)}
  .ma__lado{position:absolute;top:calc(var(--ma-h) * .5 + 30px);margin:0}
  .ma__lado--a{left:0;width:calc(50% - var(--ma-w) * .5 - 28px);max-width:370px}
  .ma__lado--b{left:calc(50% + var(--ma-w) * .44);right:0}
}
@media (prefers-reduced-motion:reduce){.ma__luz{display:none}}

/* ---------- infância (in-): o amanhecer; aqui, e só aqui, entram as cores do acrílico ---------- */
@property --in-c { syntax:'<color>'; inherits:true; initial-value:#7a3fb0; }
@property --in-d { syntax:'<color>'; inherits:true; initial-value:#45207a; }
@property --in-l { syntax:'<color>'; inherits:true; initial-value:#b995e6; }
.in{--hora:var(--manha);--in-c:#7a3fb0;--in-d:#45207a;--in-l:#b995e6;transition:--in-c .9s ease,--in-d .9s ease,--in-l .9s ease;padding-bottom:calc(var(--resp) + 70px)}
.in__malha{background:
   radial-gradient(40% 30% at 74% 26%, color-mix(in oklch,var(--in-c) 34%,var(--noite)) 0%, transparent 72%),
   radial-gradient(46% 30% at 16% 12%, var(--noite-2) 0%, transparent 72%),
   radial-gradient(60% 26% at 50% 78%, color-mix(in oklch,var(--manha) 26%,var(--ameixa)) 0%, transparent 72%),
   radial-gradient(50% 30% at 96% 60%, var(--ameixa) 0%, transparent 72%),
   var(--noite)}
/* o dia clareia no pé */
.in::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:560px;background:linear-gradient(to bottom in oklch,transparent,color-mix(in oklch,var(--manha) 26%,var(--ameixa)) 50%,color-mix(in oklch,var(--manha) 62%,var(--creme)) 84%,var(--papel) 100%)}
.in__topo{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-areas:"texto cena" "ficha cena";column-gap:clamp(20px,3vw,56px);row-gap:28px;align-items:start}
.in__texto{grid-area:texto;min-width:0}
.in .tit-2{margin-top:20px}
.in__apoio{margin-top:24px}
/* a ficha: quatro perguntas, cada uma num bráquete, presas num fio */
.in__ficha{grid-area:ficha;position:relative;padding:8px 26px 8px 30px;max-width:560px}
.in__ficha::before{content:"";position:absolute;left:35px;top:34px;bottom:34px;width:2px;border-radius:2px;background:linear-gradient(to bottom in oklch,var(--manha),var(--creme),var(--ouro))}
.in__linha{position:relative;display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:8px 18px;padding:15px 0;min-height:68px}
.in__linha+.in__linha{border-top:1px solid var(--linha)}
.in__linha .braq{position:relative;z-index:1}
.in__perg{font-family:var(--f-titulo);font-style:italic;font-size:clamp(19px,1.65vw,23px);line-height:1.2;color:var(--marfim)}
.in__cores{display:flex;gap:9px}
.in__cores button{--k:#888;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;position:relative;background:radial-gradient(circle at 32% 28%,color-mix(in oklch,var(--k) 45%,white),var(--k) 58%,color-mix(in oklch,var(--k) 70%,black));transition:transform .25s}
.in__cores button:hover{transform:translateY(-2px)}
.in__cores button[aria-pressed=true]::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--marfim)}
.in__figs{display:flex;gap:8px}
.in__figs button{width:38px;height:38px;border-radius:11px;border:1.3px solid rgba(244,236,221,.3);background:rgba(244,236,221,.05);cursor:pointer;display:grid;place-items:center;transition:background .25s,border-color .25s}
.in__figs button svg{width:20px;height:20px;fill:var(--marfim-2)}
.in__figs button[aria-pressed=true]{border-color:var(--marfim);background:rgba(244,236,221,.12)}
.in__figs button[aria-pressed=true] svg{fill:var(--in-l)}
.in__brilho{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:var(--marfim-2);background:none;border:0;cursor:pointer;padding:6px 0}
.in__brilho i{width:40px;height:23px;border-radius:99px;background:rgba(244,236,221,.22);position:relative;transition:background .3s}
.in__brilho i::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .3s}
.in__brilho[aria-pressed=true] i{background:var(--in-c)}
.in__brilho[aria-pressed=true] i::after{transform:translateX(17px)}
.in__brilho[aria-pressed=true]{color:var(--marfim)}
.in__nome{font:inherit;font-size:16px;color:var(--marfim);background:rgba(244,236,221,.06);border:1.3px solid rgba(244,236,221,.3);border-radius:11px;padding:9px 14px;width:150px}
.in__nome::placeholder{color:var(--marfim-2)}
.in__cores button:focus-visible,.in__figs button:focus-visible,.in__brilho:focus-visible,.in__nome:focus-visible{outline:2px solid var(--marfim);outline-offset:3px}
/* a cena: o aparelho, com a luz passando pelo acrílico */
.in__cena{grid-area:cena;position:relative;min-width:0;display:grid;place-items:center;align-self:center}
.in__halo{position:absolute;left:8%;right:8%;top:6%;bottom:8%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklch,var(--in-c) 62%,transparent),color-mix(in oklch,var(--in-l) 22%,transparent) 55%,transparent);filter:blur(30px);opacity:.75}
.in__aparelho{position:relative;width:min(112%,760px);height:auto;overflow:visible;max-width:none;filter:drop-shadow(0 34px 34px rgba(4,8,20,.5))}
.in__resumo{position:relative;margin-top:4px;font-family:var(--f-titulo);font-style:italic;font-size:clamp(20px,1.9vw,27px);line-height:1.2;color:var(--marfim);text-align:center}
.in__nota{position:relative;margin-top:8px;text-align:center}
.in__estojo{transform-box:fill-box}
.js .in__cena .in__estojo{opacity:0;transition:opacity 1s var(--curva) .9s}
.js .in__cena.visto .in__estojo{opacity:1}
.in__aparelho.in--pulso{animation:in-pulso .5s var(--curva)}
@keyframes in-pulso{0%{transform:scale(1)}40%{transform:scale(1.018)}100%{transform:scale(1)}}
.in__placa{transform-origin:50% 55%}
.js .in__cena .in__placa{opacity:0;transform:scale(.9) translateY(-14px);transition:opacity 1.1s var(--curva) .2s,transform 1.1s var(--curva) .2s}
.js .in__cena.visto .in__placa{opacity:1;transform:none}
.in__aco{stroke-dasharray:1;stroke-dashoffset:0}
.js .in__cena .in__aco{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s ease .7s}
.js .in__cena.visto .in__aco{stroke-dashoffset:0}
.in__glit{transition:opacity .6s}
.in__glit circle,.in__glit path{animation:in-pisca 5s ease-in-out infinite}
@keyframes in-pisca{0%,100%{opacity:.25}50%{opacity:1}}
.in__cena.in--sembrilho .in__glit{opacity:0}
.in__nometxt{font-family:var(--f-texto);font-weight:600;letter-spacing:.02em;fill:rgba(255,255,255,.92);paint-order:stroke;stroke:color-mix(in oklch,var(--in-d) 60%,transparent);stroke-width:1.2px}
/* o de verdade: as duas fotos como estavam na bandeja */
.in__reais{margin-top:clamp(64px,10vh,120px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,88px);align-items:center}
.in__par{position:relative;aspect-ratio:1/.82;max-width:620px}
.in__foto{position:absolute;margin:0;overflow:hidden;border-radius:22px;border:1.3px solid rgba(244,236,221,.5);box-shadow:0 30px 50px -24px rgba(4,8,20,.8)}
.in__foto img{width:100%;height:100%;object-fit:cover}
.in__foto--estojo{left:0;top:0;width:54%;aspect-ratio:770/1050;transform:rotate(-4deg)}
.in__foto--aparelho{right:0;bottom:2%;width:58%;aspect-ratio:650/550;transform:rotate(3deg)}
.in__fiozinho{width:30px}
.in__vertit{margin-top:16px;font-size:clamp(30px,3.200vw,48px);line-height:1.04}
.in__reaistxt .txt{margin-top:16px}
.in__reaistxt .in__porque{margin-top:12px;color:var(--marfim)}
/* quando vale avaliar: três bráquetes num fio, já na luz do amanhecer */
.in__quando{margin-top:clamp(64px,10vh,120px)}
.in__sinais{position:relative;margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,48px)}
.in__sinais::before{content:"";position:absolute;left:0;right:0;top:5px;height:2.5px;border-radius:3px;background:var(--fio);transform-origin:0 50%}
.js .in__sinais::before{transform:scaleX(0);transition:transform 1.6s var(--curva)}
.js .in__sinais.visto::before{transform:none}
.in__sinais li{position:relative;padding-top:30px;color:var(--marfim);font-size:clamp(17px,1.4vw,20px);line-height:1.45}
.in__sinais li .braq{position:absolute;left:0;top:0}
.js .in__sinais li{opacity:0;transform:translateY(12px);transition:opacity .8s var(--curva),transform .8s var(--curva)}
.js .in__sinais.visto li{opacity:1;transform:none}
.js .in__sinais.visto li:nth-child(2){transition-delay:.25s}.js .in__sinais.visto li:nth-child(3){transition-delay:.5s}
.in__quandotopo{display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap}
.in__idade{margin-top:26px;max-width:44em;color:var(--marfim)}
@media (max-width:1099px){
  .in__topo{grid-template-columns:minmax(0,1fr);grid-template-areas:"texto" "cena" "ficha";row-gap:14px}
  .in__aparelho{width:min(108%,520px)}
  .in__quandotopo{flex-direction:column;align-items:flex-start}
  .in__btn{order:3}
  .in__ficha{max-width:none;padding:6px 18px 6px 22px}
  .in__ficha::before{left:27px}
  .in__linha{gap:8px 14px;min-height:64px}
  .in__cores{gap:7px}.in__cores button{width:30px;height:30px}
  .in__figs{gap:6px}.in__figs button{width:36px;height:36px}
  .in__nome{width:128px}
  .in__reais{grid-template-columns:minmax(0,1fr);gap:26px}
  .in__sinais{grid-template-columns:minmax(0,1fr);gap:0}
  .in__sinais::before{left:5px;right:auto;top:6px;bottom:22px;width:2.5px;height:auto;background:linear-gradient(to bottom in oklch,var(--manha),var(--creme),var(--ouro));transform-origin:50% 0}
  .js .in__sinais::before{transform:scaleY(0)}
  .in__sinais li{padding:0 0 18px 30px}
  .in__sinais li .braq{top:1px}
}
@media (max-width:420px){
  .in__linha{grid-template-columns:12px minmax(0,1fr)}
  .in__linha>:nth-child(3){grid-column:2}
  .in__nome{width:100%}
}

/* ---------- alinhar (adolescência e vida adulta) · meio-dia · prefixo al ---------- */
.al{--hora:var(--ouro-tinta);--al-m:clamp(44px,5.2vw,76px)}
.al__malha{background:
  radial-gradient(34% 20% at 84% 22%, color-mix(in oklch,var(--ouro) 22%,var(--papel)) 0%, transparent 72%),
  radial-gradient(30% 18% at 10% 38%, color-mix(in oklch,var(--manha) 24%,var(--papel)) 0%, transparent 72%),
  radial-gradient(36% 20% at 26% 62%, color-mix(in oklch,var(--ouro) 20%,var(--papel)) 0%, transparent 72%),
  radial-gradient(40% 20% at 76% 80%, color-mix(in oklch,var(--creme) 70%,var(--papel)) 0%, transparent 72%),
  var(--papel)}

.al__abre{display:grid;grid-template-columns:minmax(0,7.2fr) minmax(0,4.8fr);gap:clamp(28px,5vw,80px);align-items:end}
.al__tit{margin-top:22px}
.al__lead{padding-bottom:.5em}

/* a fileira: dentes em traço, vistos de frente, e o fio */
.al__linha{position:relative;margin-top:clamp(30px,3.6vw,52px)}
.al__svg{width:100%;height:auto;overflow:visible}
.al__dente{fill:color-mix(in srgb,var(--tinta) 4%,transparent);stroke:color-mix(in srgb,var(--tinta) 54%,transparent);stroke-width:1.4}
.al__siso path{fill:none;stroke:color-mix(in srgb,var(--tinta) 50%,transparent);stroke-width:1.4;stroke-dasharray:5 6;stroke-linecap:round}
.al__fio-base{fill:none;stroke:color-mix(in srgb,var(--tinta) 22%,transparent);stroke-width:2;stroke-linecap:round}
.al__fio-cor{fill:none;stroke:url(#al-g);stroke-width:3.2;stroke-linecap:round}
.al__braq{fill:var(--papel);stroke:url(#al-g);stroke-width:1.6}
.al__halo{fill:var(--ouro);opacity:.36}
.al__ponto{fill:var(--tarde-tinta)}
/* do siso desce um prumo tracejado até os três sinais */
.al__prumo{position:absolute;left:95.57%;top:63%;height:calc(37% + var(--al-m));border-left:1.4px dashed color-mix(in srgb,var(--tinta) 44%,transparent)}

/* capítulos */
.al__cap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);align-items:start}
.al__rotulo{display:flex;align-items:center;gap:12px;font-family:var(--f-texto);font-size:12.5px;line-height:1.3;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--hora)}
.al__rotulo .no{width:10px;height:10px;border-width:1.6px;border-color:var(--hora)}
.al__frase{margin-top:18px;font-family:var(--f-titulo);font-size:clamp(27px,3.1vw,46px);line-height:1.06;letter-spacing:-.018em;color:var(--texto);text-wrap:balance;max-width:13em}
.al__frase em{font-style:italic;color:var(--hora)}
.al__cap-txt .txt{margin-top:20px}

.al__cap--ado{margin-top:var(--al-m)}
.al__cap--ado .al__cap-txt{grid-column:1/7}
.al__siso-bloco{grid-column:8/13;padding-top:26px;border-top:1.4px dashed color-mix(in srgb,var(--tinta) 44%,transparent)}
.al__sub{font-family:var(--f-texto);font-weight:600;font-size:16.5px;line-height:1.35;color:var(--texto);max-width:20em}
.al__sinais{margin-top:16px;display:grid}
.al__sinais li{display:grid;grid-template-columns:34px 1fr;align-items:baseline;padding:13px 0;border-top:1px solid var(--linha);color:var(--texto)}
.al__sinais li:first-child{border-top:0;padding-top:4px}
.al__sinais span{font-family:var(--f-titulo);font-style:italic;font-size:23px;line-height:1;color:var(--hora)}
.al__siso-bloco .miudo{margin-top:12px}

.al__cap--adu{margin-top:clamp(76px,9.6vw,148px);align-items:center}
.al__foto{grid-column:1/7;position:relative}
.al__moldura{display:block;overflow:hidden}
.al__moldura img{width:100%;height:auto;aspect-ratio:1160/840;object-fit:cover}
/* a luz do refletor da foto vaza para o papel */
.al__clarao{position:absolute;z-index:-1;left:-16%;top:-26%;width:64%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklch,var(--ouro) 58%,transparent),transparent);filter:blur(26px);pointer-events:none}
.al__cap--adu .al__cap-txt{grid-column:8/13}
.al__cit{margin-top:18px}
.al__cit .voz{font-size:clamp(27px,3.1vw,46px);line-height:1.06;letter-spacing:-.018em;text-wrap:balance}
.al__cit footer{margin-top:14px}
.al__cit--p .voz{font-size:clamp(24px,2.3vw,33px);line-height:1.12;letter-spacing:-.012em}

.al__cap--ava{margin-top:clamp(76px,9.6vw,148px);padding-top:clamp(34px,4vw,56px);border-top:1px solid var(--linha)}
.al__ava-abre{grid-column:1/5}
.al__ava-corpo{grid-column:6/13}
.al__olha{font-family:var(--f-titulo);font-size:clamp(25px,2.8vw,41px);line-height:1.16;letter-spacing:-.016em;color:var(--texto);text-wrap:pretty}
.al__olha em{font-style:italic;color:var(--hora)}
.al__fecha{margin-top:clamp(28px,3vw,42px);display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.al__fecha-voz{font-size:13.5px;line-height:1.45;color:var(--texto-2);max-width:300px}
.al__fecha-voz q{display:block;font-size:20px;line-height:1.22;margin-bottom:4px}

@media (max-width:899px){
  .al__abre{display:block}
  .al__lead{margin-top:20px;padding-bottom:0}
  /* celular: a janela mostra os dentes da frente, sangrando nas duas bordas */
  .al__linha{margin-inline:calc(var(--esp) * -1);overflow:hidden;margin-top:34px}
  .al__svg{width:270%;max-width:none;margin-left:-74.4%}
  .al__prumo{display:none}
  .al__cap{display:block}
  .al__cap--ado{margin-top:36px}
  .al__siso-bloco{margin-top:34px}
  .al__cap--adu{margin-top:68px}
  .al__clarao{left:-10%;top:-16%;width:70%}
  .al__cap--adu .al__cap-txt{margin-top:30px}
  .al__cap--ava{margin-top:68px}
  .al__ava-corpo{margin-top:30px}
  .al__fecha-voz{max-width:none}
}

/* ---------- prótese (prefixo te-): fim de tarde, ameixa com âmbar ---------- */
.te{--hora:var(--tarde)}
.te__malha{background:
  radial-gradient(36% 20% at 80% 22%, color-mix(in oklch,var(--tarde) 34%,var(--ameixa)) 0%, transparent 70%),
  radial-gradient(40% 24% at 8% 42%, color-mix(in oklch,var(--ameixa) 82%,var(--tarde)) 0%, transparent 72%),
  radial-gradient(46% 22% at 54% 60%, color-mix(in oklch,var(--tarde) 14%,var(--noite-2)) 0%, transparent 72%),
  radial-gradient(40% 20% at 92% 80%, var(--noite-2) 0%, transparent 72%),
  linear-gradient(180deg in oklch,#241a3a 0%,#241a3a 15%,var(--ameixa) 38%,var(--noite) 80%,var(--noite) 100%)}

/* abertura: a frase dela e as mãos */
.te__abre{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,84px);align-items:end}
.te__texto{min-width:0}
.te__tit{margin-top:22px}
.te__origem{margin-top:20px}
.te__apoio{margin-top:26px}
.te__foto{min-width:0}
.te__moldura{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:28px}
.te__moldura img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.te__legenda{margin-top:12px}

/* a adaptação: cinco dentes num fio */
.te__arcada{margin-top:clamp(64px,9vw,128px)}
.te__nota{margin-top:8px}
.te__trilho{position:relative;isolation:isolate;margin-top:40px}
.te__fio{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1;max-width:none}
.te__fio-traco{fill:none;stroke:url(#te-gFio);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.te__luz{fill:#fff8e6;filter:url(#te-fBrilho)}
.te__passos{--queda:46px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.te-passo{position:relative;min-width:0;padding:96px 22px 30px;margin-top:calc(var(--d) * var(--queda));margin-bottom:calc((1 - var(--d)) * var(--queda))}
.te-passo__braq{position:absolute;z-index:2;left:50%;top:48px;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:3.5px;border:1.6px solid var(--tarde);background:#241a3a;transition:background .6s var(--curva),box-shadow .6s var(--curva)}
.te-passo__rot{font-size:13px;line-height:1.3;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2);display:flex;align-items:baseline;gap:10px}
.te-passo__rot b{font-family:var(--f-titulo);font-weight:400;font-size:22px;letter-spacing:0;color:var(--tarde)}
.te-passo__voz{margin-top:12px;font-size:clamp(20px,1.75vw,25px);line-height:1.22}

/* o fio se desenha e os bráquetes acendem um a um */
.js .te__arcada .te__sub,.js .te__arcada .te__nota{opacity:0;transform:translateY(18px);transition:opacity .95s var(--curva),transform .95s var(--curva)}
.js .te__arcada.visto .te__sub,.js .te__arcada.visto .te__nota{opacity:1;transform:none}
.js .te__arcada .te__nota{transition-delay:.1s}
.js .te__arcada .te__fio-traco{stroke-dashoffset:1;transition:stroke-dashoffset 2.6s .25s cubic-bezier(.5,.1,.2,1)}
.js .te__arcada.visto .te__fio-traco{stroke-dashoffset:0}
.js .te__arcada .te__luz{opacity:0;transition:opacity 1s 2.8s}
.js .te__arcada.visto .te__luz{opacity:1}
.js .te__arcada .te-passo{border-color:transparent;background-color:transparent;transition:border-color 1s var(--curva),background-color 1s var(--curva);transition-delay:calc(.5s + var(--i) * .42s)}
.js .te__arcada.visto .te-passo{border-color:color-mix(in srgb,var(--texto) 50%,transparent);background-color:color-mix(in srgb,var(--texto) 4%,transparent)}
.js .te__arcada .te-passo__rot,.js .te__arcada .te-passo__voz{opacity:0;transform:translateY(12px);transition:opacity 1s var(--curva),transform 1s var(--curva);transition-delay:calc(.75s + var(--i) * .42s)}
.js .te__arcada.visto .te-passo__rot,.js .te__arcada.visto .te-passo__voz{opacity:1;transform:none}
.js .te__arcada .te-passo__braq{opacity:0;transition:opacity .6s,background .6s var(--curva),box-shadow .6s var(--curva);transition-delay:calc(.5s + var(--i) * .42s)}
.js .te__arcada.visto .te-passo__braq{opacity:1;background:var(--tarde);box-shadow:0 0 0 7px color-mix(in srgb,var(--tarde) 20%,transparent)}
html:not(.js) .te-passo__braq{background:var(--tarde)}

/* fecho: a cor dos dentes e o compromisso */
.te__fecha{margin-top:clamp(56px,8vw,112px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) auto;gap:clamp(24px,4vw,64px);align-items:center}
.te__cor{display:flex;align-items:center;gap:20px}
.te__escala{flex:none;width:150px;height:auto;overflow:visible}
.te__paleta line{stroke:color-mix(in srgb,var(--texto) 40%,transparent);stroke-width:1.2}
.te__paleta rect{fill:color-mix(in oklch,var(--marfim),var(--ouro) var(--m));stroke:color-mix(in srgb,var(--texto) 50%,transparent);stroke-width:1.1;fill-opacity:.92}
.te__escolhida rect{stroke:var(--tarde);stroke-width:2}
.te__cor-txt{font-size:15.5px;line-height:1.5;color:var(--texto-2);max-width:17em}
.te__cor-txt b{color:var(--texto);font-weight:500}
.te__compromisso-voz{font-size:clamp(24px,2.4vw,34px);line-height:1.15;letter-spacing:-.012em}
.te__compromisso footer{margin-top:12px}
.te__acao{display:flex;flex-direction:column;align-items:flex-start;gap:12px}

@media (max-width:899px){
  .te__abre{display:block}
  .te__foto{margin-top:34px}
  .te__moldura{aspect-ratio:5/6}
  .te__passos{display:block}
  .te-passo{margin:0 0 12px;padding:22px 20px 24px 62px}
  .te-passo:last-child{margin-bottom:0}
  .te-passo__braq{left:31px;top:33px}
  .te-passo__voz{margin-top:8px;font-size:22px}
  .te__fecha{display:block}
  .te__compromisso{margin-top:40px}
  .te__acao{margin-top:28px}
}
@media (prefers-reduced-motion:reduce){.te__luz{display:none}}

/* ---------- consulta (manhã seguinte). Classes com prefixo co ---------- */
.co{--hora:var(--ouro-tinta);--co-rosa:#b8566f;padding-bottom:calc(var(--resp) + 130px)}
.co__malha{background:
  radial-gradient(30% 15% at 80% 21%, color-mix(in oklch,var(--manha) 46%,var(--papel)) 0%, transparent 72%),
  radial-gradient(36% 18% at 10% 40%, color-mix(in oklch,var(--creme) 80%,var(--papel)) 0%, transparent 72%),
  radial-gradient(40% 16% at 80% 60%, var(--papel-2) 0%, transparent 72%),
  radial-gradient(32% 14% at 16% 76%, color-mix(in oklch,var(--manha) 24%,var(--papel)) 0%, transparent 72%),
  var(--papel)}
/* o dia acaba no pé: papel -> noite, sem pôr do sol (esse já aconteceu em "antes de doer") */
.co::after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom in oklch,rgb(246 239 226 / 0) 0%,color-mix(in oklch,var(--manha) 30%,var(--papel-2)) 26%,color-mix(in oklch,var(--ameixa) 62%,var(--manha)) 54%,color-mix(in oklch,var(--noite) 80%,var(--ameixa)) 78%,var(--noite) 100%)}

/* abertura: título, retrato e a frase dela numa só composição */
.co__abre{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,37%,470px);grid-template-areas:"a f" "d f";grid-template-rows:auto 1fr;column-gap:clamp(32px,6vw,96px)}
.co__cabeca{grid-area:a;min-width:0}
.co__tit{margin-top:22px}
.co__foto{grid-area:f;overflow:hidden;aspect-ratio:4/5;background:var(--papel-2);border-radius:28px}
.co__foto img{width:100%;height:100%;object-fit:cover}
.co__dito{grid-area:d;align-self:end;min-width:0;padding-top:40px;max-width:35em}
.co__voz{font-size:clamp(22px,2.15vw,32px);line-height:1.22;letter-spacing:-.012em;text-wrap:pretty}
.co__origem{margin-top:14px;display:flex;align-items:center;gap:12px}
.co__origem::before{content:"";flex:none;width:30px;height:1px;background:var(--hora)}

/* os cinco passos: faixa tipográfica */
.co__como{margin-top:clamp(60px,8vw,116px)}
.co__rotulo{font-family:var(--f-texto);font-size:12.5px;line-height:1.3;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-2);padding-bottom:16px;border-bottom:1px solid var(--linha)}
.co__passos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:clamp(26px,3vw,40px)}
.co-passo{min-width:0;padding-inline:clamp(14px,1.7vw,24px);border-left:1px solid var(--linha)}
.co-passo:first-child{padding-left:0;border-left:0}
.co-passo:last-child{padding-right:0}
.co-passo__n{display:block;font-family:var(--f-titulo);font-style:italic;font-weight:400;font-size:clamp(64px,7.2vw,108px);line-height:.82;letter-spacing:-.04em;color:var(--hora)}
.co-passo:nth-child(1) .co-passo__n{color:var(--co-rosa)}
.co-passo:nth-child(2) .co-passo__n{color:color-mix(in oklch,var(--co-rosa),var(--ouro-tinta))}
.co-passo:nth-child(4) .co-passo__n{color:color-mix(in oklch,var(--ouro-tinta),var(--tarde-tinta))}
.co-passo:nth-child(5) .co-passo__n{color:var(--tarde-tinta)}
.co-passo__t{font-family:var(--f-titulo);font-weight:400;font-size:clamp(24px,2.2vw,32px);line-height:1.08;letter-spacing:-.015em;color:var(--texto);margin-top:clamp(14px,1.6vw,22px)}
.co-passo__x{margin-top:10px;font-size:clamp(15.5px,1.15vw,16.5px);line-height:1.55;color:var(--texto-2)}
.co-passo__voz{margin-top:14px;font-size:clamp(18px,1.4vw,20px);line-height:1.28}
.co-passo__o{margin-top:6px}

/* perguntas que abrem dentro de um dente */
.co__duvidas{margin-top:clamp(72px,10vw,140px)}
.co__duvidas-c{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 40px;flex-wrap:wrap}
.co__sub{font-family:var(--f-titulo);font-weight:400;font-size:clamp(29px,3.5vw,52px);line-height:1.02;letter-spacing:-.02em;color:var(--texto);text-wrap:balance}
.co__sub em{font-style:italic;color:var(--hora)}
.co__dica{max-width:21em;padding-bottom:4px}
.co__pergs{--co-vao:20px;--co-no:36px;--co-pad:26px;--co-ny:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--co-vao);align-items:start;margin-top:clamp(28px,3.2vw,44px)}
.co-perg{position:relative;min-width:0;background:transparent;transition:background .5s,border-color .5s,box-shadow .6s}
/* o fio atravessa a fileira de dentes, na altura dos nós */
.co-perg::before{content:"";position:absolute;z-index:0;top:calc(var(--co-ny) - 1.25px);left:-1.3px;right:calc(-1 * var(--co-vao));height:2.5px;background:var(--fio-escuro);background-size:310% 100%;pointer-events:none}
.co-perg:nth-child(3n+2)::before{background-position:50% 0}
.co-perg:nth-child(3n)::before{background-position:100% 0;right:-1.3px}
.co-perg__h{font:inherit}
.co-perg__bt{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;width:100%;min-height:198px;padding:var(--co-pad);padding-top:calc(var(--co-pad) + var(--co-no) + 26px);background:none;border:0;border-radius:24px;text-align:left;cursor:pointer;color:var(--texto);-webkit-tap-highlight-color:transparent}
.co-perg__bt:focus-visible{outline:2px solid var(--hora);outline-offset:-7px;border-radius:20px}
.co-perg__no{position:absolute;left:var(--co-pad);top:calc(var(--co-ny) - var(--co-no) / 2);width:var(--co-no);height:var(--co-no);border-radius:50%;border:1.5px solid color-mix(in srgb,var(--tinta) 72%,transparent);background:var(--papel);transition:background .4s,border-color .4s,box-shadow .5s}
.co-perg__no::before,.co-perg__no::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:var(--tinta);border-radius:2px;transition:transform .5s var(--curva)}
.co-perg__no::after{transform:rotate(90deg)}
.co-perg__tema{display:block;font-size:12.5px;line-height:1.3;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--hora);margin-bottom:9px}
.co-perg__q{display:block;font-family:var(--f-titulo);font-size:clamp(22px,1.95vw,28px);line-height:1.1;letter-spacing:-.014em;text-wrap:balance}
.co-perg__bt:hover .co-perg__no{border-color:var(--hora);box-shadow:0 0 0 6px color-mix(in srgb,var(--ouro) 20%,transparent)}
/* aberta: o dente acende */
.co-perg.aberta{background:color-mix(in srgb,var(--papel) 72%,transparent);border-color:color-mix(in srgb,var(--ouro-tinta) 70%,transparent);box-shadow:0 0 54px -18px color-mix(in srgb,var(--ouro) 85%,transparent)}
.co-perg.aberta .co-perg__no{background:var(--ouro);border-color:var(--ouro);box-shadow:0 0 0 8px color-mix(in srgb,var(--ouro) 28%,transparent)}
.co-perg.aberta .co-perg__no::after{transform:rotate(0deg)}
.co-perg__rd{padding:0 var(--co-pad) var(--co-pad);color:var(--texto-2);font-size:16.5px;line-height:1.55}
.co-perg__rd>*+*{margin-top:10px}
.co-perg__rd>p:first-child{color:var(--texto)}
.co-perg__voz{font-size:20px;line-height:1.3;padding-left:14px;border-left:2px solid var(--hora)}
.co-perg__o{margin-top:6px!important;padding-left:16px}
/* fechada (só com script; sem script tudo fica aberto) */
.js .co-perg__r{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--curva)}
.js .co-perg__rd{min-height:0;overflow:hidden;padding-bottom:0;visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .55s,padding-bottom .55s var(--curva)}
.js .co-perg.aberta .co-perg__r{grid-template-rows:1fr}
.js .co-perg.aberta .co-perg__rd{visibility:visible;opacity:1;padding-bottom:var(--co-pad);transition:opacity .5s .14s,visibility 0s,padding-bottom .55s var(--curva)}
/* entrada: o fio se desenha e os dentes aparecem em sequência */
.js .co__pergs .co-perg{opacity:0;transform:translateY(16px);transition:opacity .8s var(--curva),transform .8s var(--curva),background .5s,border-color .5s,box-shadow .6s}
.js .co__pergs .co-perg::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .5s linear}
.js .co__pergs.visto .co-perg{opacity:1;transform:none}
.js .co__pergs.visto .co-perg::before{transform:none}
.js .co__pergs.visto .co-perg:nth-child(2){transition-delay:.1s}
.js .co__pergs.visto .co-perg:nth-child(3){transition-delay:.2s}
.js .co__pergs.visto .co-perg:nth-child(4){transition-delay:.3s}
.js .co__pergs.visto .co-perg:nth-child(5){transition-delay:.4s}
.js .co__pergs.visto .co-perg:nth-child(6){transition-delay:.5s}
.js .co__pergs.visto .co-perg:nth-child(3n+1)::before{transition-delay:.3s}
.js .co__pergs.visto .co-perg:nth-child(3n+2)::before{transition-delay:.8s}
.js .co__pergs.visto .co-perg:nth-child(3n)::before{transition-delay:1.3s}

/* fim: a ação */
.co__fim{margin-top:clamp(64px,8vw,116px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px 48px}
.co__fim-t{font-family:var(--f-titulo);font-size:clamp(31px,4.2vw,62px);line-height:1;letter-spacing:-.022em;max-width:11.5em;text-wrap:balance}
.co__fim-t em{font-style:italic;color:var(--hora)}
.co__fim-a{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:6px}

@media (max-width:1099px){
  /* passos em lista: número à esquerda */
  .co__passos{grid-template-columns:minmax(0,1fr);max-width:640px}
  .co-passo{display:grid;grid-template-columns:clamp(50px,9vw,84px) minmax(0,1fr);column-gap:8px;padding:20px 0;border-left:0;border-top:1px solid var(--linha)}
  .co-passo:first-child{border-top:0;padding-top:0}
  .co-passo:last-child{padding-bottom:0}
  .co-passo__n{grid-row:1 / span 4;font-size:clamp(50px,9vw,76px)}
  .co-passo__t{margin-top:0;grid-column:2}
  .co-passo__x,.co-passo__voz,.co-passo__o{grid-column:2}
  .co-passo__x{font-size:16.5px}
  .co-passo__voz{font-size:19.5px}
}
@media (max-width:899px){
  .co__pergs{grid-template-columns:minmax(0,1fr);--co-vao:12px;--co-no:34px;--co-pad:20px;--co-ny:46px}
  /* no celular o fio desce pelos nós */
  .co-perg::before,.co-perg:nth-child(3n)::before{top:var(--co-ny);bottom:calc(-1 * (var(--co-vao) + var(--co-ny)));left:calc(var(--co-pad) + var(--co-no) / 2 - 1.25px);right:auto;width:2.5px;height:auto;background:linear-gradient(180deg in oklch,var(--co-rosa),var(--ouro-tinta) 55%,var(--tarde-tinta));background-size:100% 520%}
  .co-perg:nth-child(1)::before{background-position:0 0}
  .co-perg:nth-child(2){--co-k:1}.co-perg:nth-child(2)::before{background-position:0 25%}
  .co-perg:nth-child(3){--co-k:2}.co-perg:nth-child(3)::before{background-position:0 50%}
  .co-perg:nth-child(4){--co-k:3}.co-perg:nth-child(4)::before{background-position:0 75%}
  .co-perg:nth-child(5){--co-k:4}.co-perg:nth-child(5)::before{background-position:0 100%}
  .co-perg:last-child::before{display:none}
  .co-perg.dente{border-radius:22px}
  .co-perg__bt{min-height:92px;padding:18px var(--co-pad);padding-left:calc(var(--co-pad) + var(--co-no) + 14px);justify-content:center;border-radius:20px}
  .co-perg__tema{margin-bottom:5px}
  .co-perg__rd{padding-left:calc(var(--co-pad) + var(--co-no) + 14px)}
  .js .co__pergs .co-perg::before{transform:scaleY(0);transform-origin:50% 0}
  .js .co__pergs.visto .co-perg:nth-child(n)::before{transition-delay:calc(.3s + var(--co-k,0) * .25s)}
  .co__fim{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:759px){
  .co__abre{grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "f" "d";grid-template-rows:auto}
  .co__foto{margin-top:34px;aspect-ratio:1/1.08}
  .co__foto img{object-position:50% 22%}
  .co__dito{padding-top:24px}
}

/* ---------- rodapé (ro-) ---------- */
.ro{position:relative;background:var(--noite-3);color:var(--marfim);padding:clamp(56px,9vh,110px) 0 28px;--fundo:var(--noite-3);--texto:var(--marfim);--texto-2:var(--marfim-2);--hora:var(--ouro)}
.ro__dentro{max-width:calc(var(--largura) + 2 * var(--esp));margin-inline:auto;padding-inline:var(--esp)}
.ro__palco{position:relative}
.ro__fecho{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.ro__fecho .btn{margin-top:26px}
.ro__olho{justify-content:center}
.ro__tit{font-family:var(--f-titulo);font-size:clamp(34px,4.6vw,70px);line-height:1;letter-spacing:-.022em}
.ro__tit{margin-top:14px}
.ro__arco{display:block;width:100%;height:auto;overflow:visible;max-width:none}
.ro__arco--g{margin-top:clamp(-150px,-9.5vw,-70px)}
.ro__arco--p{display:none}
.ro__luz{fill:#fff8e6;filter:drop-shadow(0 0 5px #fff8e6) drop-shadow(0 0 10px rgba(255,248,230,.7))}
.ro__fio{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.ro__dente{fill:rgba(244,236,221,.035);stroke:rgba(244,236,221,.45);stroke-width:1.3}
.ro__braq{fill:var(--noite-3);stroke-width:1.4}
.ro__no{text-decoration:none;cursor:pointer}
.ro__halo{fill:var(--ouro);opacity:.2;transition:opacity .3s}
.ro__ponto{fill:var(--ouro);stroke:var(--ouro);stroke-width:2}
.ro__no text{font-family:var(--f-texto);font-size:16px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;fill:var(--marfim-2);transition:fill .3s}
.ro__no:hover text,.ro__no:focus-visible text{fill:var(--marfim)}
.ro__no:hover .ro__halo,.ro__no:focus-visible .ro__halo{opacity:.42}
.ro__no:focus-visible{outline:none}
.ro__no:focus-visible .ro__ponto{stroke:var(--marfim);stroke-width:3}
.js .ro__arco .ro__fio{stroke-dashoffset:1;transition:stroke-dashoffset 2.4s cubic-bezier(.5,.1,.2,1)}
.js .ro__arco.visto .ro__fio{stroke-dashoffset:0}
.js .ro__arco .ro__dente,.js .ro__arco .ro__braq{opacity:0;transition:opacity .7s ease calc(.3s + var(--i) * .1s)}
.js .ro__arco.visto .ro__dente,.js .ro__arco.visto .ro__braq{opacity:1}
.js .ro__arco .ro__no{opacity:0;transition:opacity .7s ease calc(1.2s + var(--i) * .25s)}
.js .ro__arco.visto .ro__no{opacity:1}
.ro__fases{display:none}
.ro__cols{margin-top:clamp(30px,5vw,56px);padding-top:32px;border-top:1px solid rgba(244,236,221,.12);display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
.ro__nome{font-family:var(--f-titulo);font-size:24px;line-height:1.2}
.ro__rot{display:flex;align-items:center;gap:10px;font-size:12.5px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--marfim-2)}
.ro__txt{margin-top:10px;font-size:15px;line-height:1.7;color:var(--marfim-2)}
.ro__txt a{color:var(--marfim);text-decoration:none;border-bottom:1px solid rgba(220,185,111,.6)}
.ro__fim{margin-top:40px;padding-top:20px;border-top:1px solid rgba(244,236,221,.1);font-size:13.5px;line-height:1.6;color:var(--marfim-2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ro__topo{margin-left:10px;color:var(--marfim);text-decoration:none;border-bottom:1px solid rgba(220,185,111,.6);white-space:nowrap}
.ro__selo a{color:var(--marfim);text-decoration:none;border-bottom:1px solid var(--ouro)}
@media (max-width:800px){
  .ro__cols{grid-template-columns:1fr}
  .ro__arco--g{display:none}
  .ro__arco--p{display:block;margin-top:14px}
  .ro__fecho{align-items:flex-start;text-align:left}
  .ro__olho{justify-content:flex-start}
  .ro__fecho .btn{margin-top:20px}
  .ro__fases{position:relative;margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;font-size:16px}
  .ro__fases a{display:flex;align-items:center;gap:14px;color:var(--marfim);text-decoration:none}
  .ro__fases .no{width:11px;height:11px;box-shadow:0 0 0 6px rgba(220,185,111,.2)}
  .ro__fim{flex-direction:column}
  .ro__topo{margin-left:0;display:inline-block;margin-top:6px}
  .ro{padding-bottom:96px}
}
@media (prefers-reduced-motion:reduce){.ro__luz{display:none}}