/* tema A, Respiro: noite serena, luzes que respiram, fio guia que desce com a rolagem, fio que se desembaraça e palavras que flutuam */
:root{
  /* paleta igual à do site da Raíni Crepaldi: creme, vinho, blush e dourado */
  --creme:#fbf8f6; --papel:#fffdfc; --blush:#f6e7e9; --blush2:#efd6da; --ouro:#c2a15c;
  --vin:#7b2436; --vin-d:#5d1927; --vin-l:#c98a99; --noite:#2a0d14; --noite2:#3b1620; --noite3:#1c080d;
  --bg:var(--creme); --bg2:var(--papel); --bg3:var(--blush);
  --ink:#2a1f22; --txt:#4d3d41; --mut:#6c5a5e; --mut2:#6f5d62;
  --ac:var(--vin); --ac2:#9a4a5c; --ac-ink:#fff; --ac-h:var(--vin-d);
  --acR:123,36,54; --ac2R:201,138,153; --inkR:42,31,34;
  --line:rgba(123,36,54,.14); --line2:rgba(123,36,54,.24);
  --card:var(--papel);
  --ease:cubic-bezier(.22,1,.36,1);
  --f-d:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-s:"Instrument Serif",Georgia,serif;
  --wrap:1200px; --h:68px; --col:40rem;
  --i-wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.6.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3a.5.5 0 0 0 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 2.9 2.9 0 0 0-.9 2.2 5.1 5.1 0 0 0 1 2.7 11.6 11.6 0 0 0 4.5 4 5 5 0 0 0 3.1.6 2.6 2.6 0 0 0 1.7-1.2 2.1 2.1 0 0 0 .2-1.2c-.1-.1-.3-.2-.5-.3Z'/%3E%3C/svg%3E");
  --i-sai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-vai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:light;
}
@media (min-width:1600px){ :root{ --wrap:1320px } }

/* faixas escuras: as mesmas variáveis, invertidas */
.noite,.pg-inicio #midia,.final,.rodape-site{
  --bg:var(--noite); --bg2:var(--noite2); --bg3:var(--noite2);
  --ink:#fbeff1; --txt:#efdde1; --mut:#e3c9ce; --mut2:#d4b8bf;
  --ac:#e2c48c; --ac2:#e3c9ce; --ac-ink:var(--noite); --ac-h:#ecd5a8;
  --acR:226,196,140; --ac2R:227,201,206; --inkR:251,239,241;
  --line:rgba(251,239,241,.14); --line2:rgba(251,239,241,.24);
  --card:linear-gradient(180deg,rgba(251,239,241,.07),rgba(251,239,241,.03));
  color-scheme:dark; color:var(--ink) }

/* ---------------------------------------------------------------- base */
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--h) + 16px); overflow-x:clip; -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 1.0625rem/1.65 var(--f-d); font-optical-sizing:auto; overflow-x:clip }
main{ display:block }
img,video,svg{ display:block; max-width:100% }
img{ height:auto }
h1,h2,h3,p,figure,blockquote,dl,dd,ul,ol{ margin:0 }
ul,ol{ padding:0; list-style:none }
a{ color:inherit }
h1,h2,h3{ font-family:var(--f-d); font-weight:500; text-wrap:balance; letter-spacing:-.025em; line-height:1.06; color:var(--ink) }
h1{ font-size:clamp(2.25rem,1.5rem + 2.8vw,3.6rem); letter-spacing:-.032em; line-height:1.03 }
h2{ font-size:clamp(1.6rem,1.3rem + 1.2vw,2.2rem); line-height:1.12 }
h3{ font-size:1.3rem; letter-spacing:-.015em; line-height:1.2; font-weight:600 }
p{ text-wrap:pretty }
h1 em,h2 em,.titulo-hero em,.chamada-t em{ font-family:var(--f-s); font-style:italic; font-weight:400; letter-spacing:0; color:var(--ac); font-size:1.08em; line-height:.9 }
::selection{ background:rgba(var(--acR),.18); color:var(--ink) }
:focus-visible{ outline:2px solid var(--ac); outline-offset:3px; border-radius:6px }
.faixa,.wrap{ width:min(100% - 32px, var(--wrap)); margin-inline:auto }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.pular{ position:absolute; left:16px; top:-80px; z-index:100; display:inline-flex; align-items:center; min-height:44px; background:var(--ac); color:var(--ac-ink); padding:10px 18px; border-radius:12px; font-weight:600; text-decoration:none; transition:top .2s }
.pular:focus{ top:12px }

/* céu de fundo: três luzes que respiram devagar e um grão leve (fora da página do link da bio, que tem o seu) */
html:not(:has(body.pg-link))::before,html:not(:has(body.pg-link))::after,body:not(.pg-link)::before{ content:""; position:fixed; z-index:-2; border-radius:50%; pointer-events:none; will-change:transform,opacity }
html:not(:has(body.pg-link))::before{ width:70vmax; height:70vmax; left:-22vmax; top:-26vmax; background:radial-gradient(closest-side,rgba(239,214,218,.55),transparent 70%); animation:ceu1 22s ease-in-out infinite alternate }
html:not(:has(body.pg-link))::after{ width:62vmax; height:62vmax; right:-24vmax; top:18vh; background:radial-gradient(closest-side,rgba(246,231,233,.75),transparent 70%); animation:ceu2 26s ease-in-out infinite alternate }
body:not(.pg-link)::before{ width:58vmax; height:58vmax; left:10vw; bottom:-34vmax; background:radial-gradient(closest-side,rgba(194,161,92,.08),transparent 70%); animation:ceu1 30s ease-in-out infinite alternate-reverse }
body:not(.pg-link)::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
/* leveza: sem o grão fixo (no fundo claro ele quase não aparece e pesa na rolagem) e luzes paradas no celular */
body:not(.pg-link)::after{ display:none }
@media (max-width:767px){ html:not(:has(body.pg-link))::before,html:not(:has(body.pg-link))::after,body:not(.pg-link)::before{ animation:none; will-change:auto } }
@keyframes ceu1{ from{ transform:translate3d(0,0,0) scale(.92); opacity:.75 } to{ transform:translate3d(6vw,4vh,0) scale(1.08); opacity:1 } }
@keyframes ceu2{ from{ transform:translate3d(0,0,0) scale(1.05); opacity:1 } to{ transform:translate3d(-5vw,-6vh,0) scale(.9); opacity:.7 } }
@keyframes pulsa{ from{ transform:scale(.92); opacity:.7 } to{ transform:scale(1.06); opacity:1 } }
/* 4 s inspira, 4 s segura, 6 s solta */
@keyframes respira{ 0%{ transform:scale(.82) } 28.57%{ transform:scale(1) } 57.14%{ transform:scale(1) } 100%{ transform:scale(.82) } }

/* ---------------------------------------------------------------- botões e links */
.bt{ --mx:0px; --my:0px; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:14px 24px; border-radius:999px; background:var(--ac); color:var(--ac-ink); font:600 1rem/1.2 var(--f-d); text-align:center; text-decoration:none; border:0; cursor:pointer;
  box-shadow:0 12px 30px -12px rgba(var(--acR),.5), inset 0 1px 0 rgba(255,255,255,.18); transform:translate3d(var(--mx),var(--my),0); transition:transform .25s var(--ease), box-shadow .25s, background-color .25s }
.bt:hover{ background:var(--ac-h); box-shadow:0 16px 40px -12px rgba(var(--acR),.6), inset 0 1px 0 rgba(255,255,255,.22) }
.bt-wa::before{ content:""; flex:none; width:20px; height:20px; background:currentColor; -webkit-mask:var(--i-wa) center/contain no-repeat; mask:var(--i-wa) center/contain no-repeat }
.bt-agendar{ min-height:44px; padding:10px 18px; font-size:.95rem }
.btn-fant{ display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:14px 20px; border-radius:999px; color:var(--ink); text-decoration:none; font-weight:500; border:1px solid var(--line2); transition:border-color .25s, background-color .25s }
.btn-fant:hover{ border-color:var(--ac); background:rgba(var(--acR),.08) }
.btn-fant::after{ content:""; width:16px; height:16px; background:currentColor; -webkit-mask:var(--i-vai) center/contain no-repeat; mask:var(--i-vai) center/contain no-repeat; transition:transform .25s var(--ease) }
.btn-fant:hover::after{ transform:translateX(3px) }
.link{ display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--ac); font-weight:600; text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/0 1.5px no-repeat; transition:background-size .35s var(--ease) }
.link:hover{ background-size:100% 1.5px }
.link .seta{ transition:transform .25s var(--ease) }
.link:hover .seta{ transform:translateX(4px) }

/* ---------------------------------------------------------------- topo */
.topo-site{ position:sticky; top:0; z-index:50; height:var(--h) }
.topo-site::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(251,248,246,.88); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--line); transition:opacity .3s }
.js .topo-site:not(.cheio)::before{ opacity:0 }
.topo-site .faixa{ height:100%; display:flex; align-items:center; gap:16px }
.marca{ position:relative; z-index:2; display:flex; align-items:center; gap:8px; min-height:44px; margin-right:auto; text-decoration:none }
.marca-simbolo{ width:38px; height:auto; flex:none }
.marca-logo{ width:auto; height:30px }
@media (max-width:379px){ .marca-simbolo{ width:32px } .marca-logo{ height:25px } }
.menu ul{ list-style:none; margin:0; padding:0 }
.menu a,.sub-bt{ text-decoration:none; font-family:var(--f-d) }
.sub-bt{ background:none; border:0; cursor:pointer; color:inherit }
.sub-bt::after{ content:""; width:9px; height:9px; margin-left:8px; flex:none; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .3s var(--ease) }
.sub-bt[aria-expanded="true"]::after{ transform:translateY(2px) rotate(-135deg) }
.menu-bt{ display:none }

@media (min-width:1140px){
  .menu{ display:flex; align-items:center; gap:14px }
  .menu > ul{ display:flex; align-items:center; gap:2px }
  .menu > ul > li > a,.sub-bt{ position:relative; display:inline-flex; align-items:center; min-height:44px; padding:0 11px; color:var(--mut); font-size:.95rem; transition:color .2s }
  .menu > ul > li > a::after{ content:""; position:absolute; left:11px; right:11px; bottom:8px; height:1.5px; background:var(--ac); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease) }
  .menu > ul > li > a:hover,.sub-bt:hover,.sub-bt[aria-expanded="true"]{ color:var(--ink) }
  .menu > ul > li > a:hover::after,.menu > ul > li > a[aria-current="page"]::after{ transform:scaleX(1) }
  .menu [aria-current="page"],.sub-bt[data-ativo]{ color:var(--ink) }
  .tem-sub{ position:relative }
  .sub{ display:none; position:absolute; top:calc(100% + 8px); left:-6px; min-width:260px; padding:8px; border-radius:18px; background:var(--bg2); border:1px solid var(--line2); box-shadow:0 30px 60px -24px rgba(93,25,39,.22) }
  .sub::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px }
  .sub-bt[aria-expanded="true"] + .sub{ display:block }
  .sub a{ display:flex; align-items:center; min-height:44px; padding:0 14px; border-radius:12px; color:var(--mut); font-size:.95rem; transition:background-color .2s,color .2s }
  .sub a:hover,.sub a[aria-current="page"]{ background:rgba(var(--acR),.1); color:var(--ink) }
}
@media (min-width:1140px) and (hover:hover){ .tem-sub:hover .sub{ display:block } }

@media (max-width:1139.98px){
  .menu-bt{ position:relative; z-index:2; display:grid; place-content:center; gap:5px; width:44px; height:44px; margin-right:-8px; background:none; border:0; border-radius:12px; color:var(--ink); cursor:pointer }
  .menu-bt i{ display:block; width:22px; height:2px; border-radius:2px; background:currentColor; transition:transform .3s var(--ease), opacity .2s }
  .menu-bt[aria-expanded="true"] i:nth-of-type(1){ transform:translateY(7px) rotate(45deg) }
  .menu-bt[aria-expanded="true"] i:nth-of-type(2){ opacity:0 }
  .menu-bt[aria-expanded="true"] i:nth-of-type(3){ transform:translateY(-7px) rotate(-45deg) }
  .menu{ position:fixed; inset:0; z-index:1; display:flex; flex-direction:column; gap:28px; padding:calc(var(--h) + 18px) 24px calc(28px + env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain;
    background:radial-gradient(90vmax 70vmax at 100% 0%,rgba(239,214,218,.8),transparent 60%),var(--creme); visibility:hidden; opacity:0; transition:opacity .3s, visibility 0s .3s }
  .menu-aberto .menu{ visibility:visible; opacity:1; transition:opacity .3s }
  .menu > ul > li{ border-bottom:1px solid var(--line) }
  .menu > ul > li > a,.sub-bt{ display:flex; align-items:center; justify-content:space-between; width:100%; min-height:60px; padding:0 2px; color:var(--ink); font:500 clamp(1.45rem,1.2rem + 1.2vw,1.9rem)/1.1 var(--f-d); letter-spacing:-.02em; text-align:left }
  .menu > ul > li > a[aria-current="page"],.sub-bt[data-ativo]{ color:var(--ac) }
  .sub{ display:none; padding:0 0 14px 16px }
  .sub-bt[aria-expanded="true"] + .sub{ display:block }
  .sub a{ display:flex; align-items:center; min-height:48px; color:var(--mut); font-size:1.12rem }
  .sub a[aria-current="page"]{ color:var(--ac) }
  .menu .bt-agendar{ margin-top:auto; min-height:56px; font-size:1.05rem }
  .js .menu > ul > li{ opacity:0; transform:translateY(10px); transition:opacity .4s var(--ease), transform .5s var(--ease) }
  .menu-aberto .menu > ul > li{ opacity:1; transform:none }
  .menu-aberto .menu > ul > li:nth-child(2){ transition-delay:.04s } .menu-aberto .menu > ul > li:nth-child(3){ transition-delay:.08s }
  .menu-aberto .menu > ul > li:nth-child(4){ transition-delay:.12s } .menu-aberto .menu > ul > li:nth-child(5){ transition-delay:.16s } .menu-aberto .menu > ul > li:nth-child(6){ transition-delay:.2s }
  html.menu-aberto{ overflow:hidden }
  .menu-aberto .wa-flutua{ opacity:0; visibility:hidden }
}

/* ---------------------------------------------------------------- entradas (classes do base.js) */
.js .entra{ opacity:0; transform:translate3d(0,22px,0); transition:opacity .75s var(--ease) var(--d,0s), transform .85s var(--ease) var(--d,0s) }
.js .entra.visto{ opacity:1; transform:none }
.js .luz.entra,.js .cartao-post.entra,.js .perfil.entra{ transition:opacity .75s var(--ease) var(--d,0s), transform .85s var(--ease) var(--d,0s), translate .35s var(--ease), border-color .3s, box-shadow .35s }

/* cartões com luz que segue o cursor */
.luz,.cartao-post,.perfil{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:24px; transition:translate .35s var(--ease), border-color .3s, box-shadow .35s }
.luz::before,.cartao-post::before,.perfil::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s; background:radial-gradient(320px circle at var(--lx,50%) var(--ly,0%), rgba(var(--acR),.16), transparent 70%) }
@media (hover:hover){
  .luz:hover,.cartao-post:hover,.perfil:hover{ translate:0 -4px; border-color:rgba(var(--acR),.35); box-shadow:0 24px 50px -24px rgba(93,25,39,.2) }
  .luz:hover::before,.cartao-post:hover::before,.perfil:hover::before{ opacity:1 }
}

/* ---------------------------------------------------------------- páginas internas */
.pagina,.post{ position:relative; width:min(100% - 32px, var(--col)); margin:0 auto; padding:8px 0 64px }
.trilha ol{ display:flex; flex-wrap:wrap; align-items:center; column-gap:10px; font-size:.88rem; color:var(--mut2) }
.trilha li{ display:flex; align-items:center; gap:10px; min-height:44px }
.trilha li+li::before{ content:""; width:6px; height:6px; margin-right:2px; border-right:1.5px solid var(--ac); border-bottom:1.5px solid var(--ac); transform:rotate(-45deg); opacity:.8 }
.trilha a{ display:inline-flex; align-items:center; min-height:44px; color:var(--mut); text-decoration:none; transition:color .2s }
.trilha a:hover{ color:var(--ac) }
.trilha [aria-current]{ color:var(--mut2) }
.cab-pagina,.cab-post{ position:relative; isolation:isolate; padding:18px 0 4px }
.cab-pagina::before,.cab-post::before{ content:""; position:absolute; z-index:-1; width:min(560px,130vw); aspect-ratio:1; right:-34%; top:-70%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(239,214,218,.75),rgba(var(--ac2R),.12) 55%,transparent 75%); animation:pulsa 9s ease-in-out infinite alternate }
.cab-post h1{ font-size:clamp(2.05rem,1.45rem + 2.3vw,3.15rem) }
.fio-h1{ width:100%; height:56px; margin:14px 0 2px }
.post-meta{ margin-top:12px; color:var(--mut); font-size:.95rem; line-height:1.6 }
.post-meta a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--line2); text-underline-offset:.2em }
.post-meta a:hover{ text-decoration-color:var(--ac) }
.lead{ margin-top:20px; font-size:clamp(1.08rem,1rem + .3vw,1.25rem); line-height:1.6; color:var(--mut); max-width:52ch }

/* texto longo: coluna de leitura, 18 px, entrelinha 1,7 */
.texto{ margin-top:30px; font-size:1.125rem; line-height:1.7; color:var(--txt) }
.texto > * + *{ margin-top:1.05em }
.texto h2{ margin-top:2.3em; font-size:clamp(1.55rem,1.3rem + 1vw,2rem); line-height:1.15 }
.texto h3{ margin-top:1.9em; font-size:1.28rem; line-height:1.25 }
.texto > h2 + *,.texto > h3 + *{ margin-top:.65em }
.texto > :first-child{ margin-top:0 }
.texto a:not(.perfil){ color:var(--ac); text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:rgba(var(--acR),.5); text-underline-offset:.22em; transition:text-decoration-color .2s }
.texto a:not(.perfil):hover{ text-decoration-color:var(--ac); text-decoration-thickness:2px }
.texto strong{ color:var(--ink); font-weight:600 }
.texto ul:not(.perfis) > li,.texto ol > li{ position:relative; padding-left:1.6em }
.texto ul:not(.perfis) > li::before{ content:""; position:absolute; left:.35em; top:.68em; width:7px; height:7px; border-radius:50%; background:var(--ac); box-shadow:0 0 0 3px rgba(var(--acR),.16) }
.texto ol{ counter-reset:n }
.texto ol > li{ counter-increment:n }
.texto ol > li::before{ content:counter(n) "."; position:absolute; left:0; top:0; font-weight:600; color:var(--ac); font-variant-numeric:tabular-nums }
/* foto e vídeo dentro do texto das páginas internas */
.texto .foto{ margin-top:1.6em }
.texto .foto img{ width:100%; height:auto; max-height:640px; object-fit:cover; border-radius:24px; box-shadow:0 30px 60px -36px rgba(93,25,39,.4) }
.texto .foto figcaption,.texto .vid figcaption{ margin-top:10px; font-size:.92rem; line-height:1.45; color:var(--mut) }
.texto .vid{ width:min(100%,320px); margin-top:1.6em }
.texto li + li{ margin-top:.5em }
.texto li > ul,.texto li > ol{ margin-top:.5em }
.texto blockquote{ margin-block:1.6em; padding:2px 0 2px 22px; border-left:2px solid var(--ac); font:italic 400 clamp(1.3rem,1.15rem + .55vw,1.55rem)/1.38 var(--f-s); color:var(--ink) }
.texto blockquote p + p{ margin-top:.6em }
.texto hr{ border:0; height:1px; background:var(--line2); margin-block:2.4em }

/* tabelas: rolam de lado no celular, com sombra indicando que há mais */
.tabela-rola{ margin-block:1.7em; overflow-x:auto; border:1px solid var(--line2); border-radius:18px; -webkit-overflow-scrolling:touch;
  background:linear-gradient(90deg,var(--bg2) 30%,rgba(255,253,252,0)) left/40px 100% no-repeat local, linear-gradient(270deg,var(--bg2) 30%,rgba(255,253,252,0)) right/40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(42,13,20,.16),transparent) left/14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%,rgba(42,13,20,.16),transparent) right/14px 100% no-repeat scroll, var(--bg2) }
.tabela-rola table{ width:100%; min-width:600px; border-collapse:collapse; font-size:.98rem; line-height:1.55 }
.tabela-rola th{ padding:14px 16px; text-align:left; vertical-align:bottom; font-weight:600; color:var(--ink); background:rgba(var(--acR),.08); border-bottom:1px solid var(--line2) }
.tabela-rola td{ padding:14px 16px; vertical-align:top; color:var(--txt); border-bottom:1px solid var(--line) }
.tabela-rola tr:last-child td{ border-bottom:0 }
.tabela-rola td:first-child{ color:var(--ink); font-weight:500 }
.tabela-rola th + th,.tabela-rola td + td{ border-left:1px solid var(--line) }

/* resposta direta e alerta de crise: destaque calmo */
.resposta-curta{ position:relative; overflow:hidden; isolation:isolate; margin-top:30px; padding:22px 24px 24px; border-radius:22px; border:1px solid rgba(var(--acR),.3); background:linear-gradient(120deg,rgba(var(--acR),.13),rgba(var(--ac2R),.07) 60%,rgba(var(--inkR),.02)) }
.rc-t{ display:flex; align-items:center; gap:12px; margin-bottom:8px; font-size:.92rem; font-weight:600; color:var(--ac) }
.rc-t::before{ content:""; flex:none; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,var(--vin-l) 45%,var(--vin)); box-shadow:0 0 0 5px rgba(var(--acR),.16); animation:respira 14s ease-in-out infinite }
.resposta-curta p + p{ font-size:1.12rem; line-height:1.62; color:var(--ink) }
.alerta-crise{ margin-top:44px; padding:20px 22px 20px 56px; position:relative; border-radius:20px; border:1px solid rgba(var(--ac2R),.38); background:rgba(var(--ac2R),.08); color:var(--ink); font-size:1rem; line-height:1.62 }
.alerta-crise::before{ content:""; position:absolute; left:22px; top:25px; width:14px; height:14px; border-radius:50%; background:var(--ac2); box-shadow:0 0 0 5px rgba(var(--ac2R),.18) }

/* perguntas frequentes com details */
.faq{ margin-top:60px }
.faq > h2{ margin-bottom:18px }
.faq details{ border-bottom:1px solid var(--line) }
.faq details:first-of-type{ border-top:1px solid var(--line) }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:64px; padding:16px 2px; font-weight:500; font-size:1.1rem; line-height:1.35; color:var(--ink); transition:color .2s }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:""; flex:none; width:22px; height:22px; border-radius:50%;
  background:linear-gradient(var(--ac),var(--ac)) center/14px 2px no-repeat, linear-gradient(var(--ac),var(--ac)) center/2px 14px no-repeat; transition:background-size .35s var(--ease), transform .35s var(--ease) }
.faq details[open] > summary::after{ background-size:14px 2px, 2px 0; transform:rotate(180deg) }
.faq summary:hover{ color:var(--ac) }
.faq details > p{ padding:0 2px 22px; color:var(--mut); line-height:1.68; max-width:66ch }
.faq details[open] > p{ animation:abre .5s var(--ease) }
@keyframes abre{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

/* referências discretas */
.referencias{ margin-top:60px; padding-top:28px; border-top:1px solid var(--line) }
.referencias h2{ font-size:1.05rem; font-weight:600; letter-spacing:0; color:var(--mut) }
.referencias ol{ margin-top:14px; padding-left:1.5em; list-style:decimal; font-size:.9rem; line-height:1.6; color:var(--mut2) }
.referencias li{ padding-left:6px }
.referencias li + li{ margin-top:10px }
.referencias li::marker{ color:var(--ac); font-weight:600 }
.referencias a{ color:var(--mut); text-decoration:underline; text-decoration-color:var(--line2); text-underline-offset:.2em; overflow-wrap:anywhere }
.referencias a:hover{ color:var(--ac); text-decoration-color:var(--ac) }
.referencias em{ font-style:italic }

/* quem escreveu */
.autora{ display:grid; grid-template-columns:56px 1fr; align-items:center; gap:14px 16px; margin-top:44px; padding:22px 24px 24px; border-radius:22px; background:var(--card); border:1px solid var(--line) }
.autora::before{ content:""; width:56px; height:56px; border-radius:50%; background:var(--bg3) url(/img/autora.jpg) 50% 22%/cover; box-shadow:0 0 0 2px var(--bg),0 0 0 3px rgba(var(--acR),.6) }
.autora-t{ font-weight:600; color:var(--ac) }
.autora p:not(.autora-t){ grid-column:1 / -1; color:var(--mut); font-size:1rem; line-height:1.65 }
.autora a{ color:var(--ink); text-decoration:underline; text-decoration-color:rgba(var(--acR),.6); text-underline-offset:.2em }
.autora a:hover{ color:var(--ac) }

/* chamada para agendar */
.chamada{ position:relative; overflow:hidden; isolation:isolate; margin-top:56px; padding:34px 26px 30px; border-radius:28px; border:1px solid rgba(var(--acR),.26); background:linear-gradient(150deg,rgba(var(--acR),.14),rgba(var(--ac2R),.08) 55%,rgba(var(--inkR),.02)) }
.chamada::before{ content:""; position:absolute; z-index:-1; width:300px; aspect-ratio:1; right:-110px; top:-130px; border-radius:50%; background:radial-gradient(closest-side,rgba(239,214,218,.9),rgba(var(--ac2R),.2) 62%,transparent); animation:respira 14s ease-in-out infinite }
.chamada-t{ font:500 clamp(1.6rem,1.3rem + 1.2vw,2.2rem)/1.1 var(--f-d); letter-spacing:-.025em; color:var(--ink); text-wrap:balance; max-width:20ch }
.chamada p:not(.chamada-t){ margin-top:12px; color:var(--mut); max-width:50ch }
.chamada .bt{ margin-top:24px }

/* cartões de post */
.relacionados{ margin-top:64px }
.grade-posts{ display:grid; gap:14px; margin-top:22px; counter-reset:cp }
@media (min-width:640px){ .grade-posts{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)) } }
.cartao-post{ display:flex; flex-direction:column; gap:10px; padding:26px 24px 24px; counter-increment:cp }
.cartao-post::after{ content:counter(cp,decimal-leading-zero) / ""; position:absolute; right:22px; top:18px; font:italic 400 2.3rem/1 var(--f-s); color:rgba(var(--acR),.45); pointer-events:none }
.cp-tema{ font-size:.85rem; color:var(--ac2); padding-right:3.2rem }
.cartao-post h3{ font-size:1.3rem; padding-right:2.4rem }
.cartao-post h3 a{ color:var(--ink); text-decoration:none }
.cartao-post h3 a::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:1 }
.cartao-post h3 a:focus-visible{ outline:none }
.cartao-post:has(a:focus-visible){ outline:2px solid var(--ac); outline-offset:3px }
.cartao-post p:not(.cp-tema){ color:var(--mut); font-size:1rem; line-height:1.6 }

/* índice do blog */
.blog-indice{ width:min(100% - 32px, var(--wrap)) }
.blog-indice .cab-pagina{ max-width:var(--col) }
.grupo-blog{ margin-top:64px; display:grid; grid-template-columns:1fr; align-items:end; gap:4px 24px }
.grupo-blog h2{ font-size:clamp(1.7rem,1.35rem + 1.4vw,2.5rem) }
.grupo-pilar a{ display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--ac); font-weight:600; text-decoration:none }
.grupo-pilar a::after{ content:""; width:16px; height:16px; background:currentColor; -webkit-mask:var(--i-vai) center/contain no-repeat; mask:var(--i-vai) center/contain no-repeat; transition:transform .25s var(--ease) }
.grupo-pilar a:hover::after{ transform:translateX(4px) }
.grupo-blog .grade-posts{ grid-column:1 / -1 }
@media (min-width:860px){ .grupo-blog{ grid-template-columns:1fr auto } }
@media (min-width:1000px){ .blog-indice .grade-posts{ grid-template-columns:repeat(3,1fr) } }

/* onde encontrar a Cristiane */
.perfis{ list-style:none; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)) }
.texto .perfis{ margin-block:1.4em }
.perfis li{ margin:0; padding:0 }
.perfis .perfil{ display:flex; flex-direction:column; gap:4px; height:100%; padding:20px 52px 22px 22px; border-radius:20px; color:var(--ink); text-decoration:none }
.perfil::after{ content:""; position:absolute; right:20px; top:20px; width:20px; height:20px; background:var(--ac); -webkit-mask:var(--i-sai) center/contain no-repeat; mask:var(--i-sai) center/contain no-repeat; transition:transform .3s var(--ease) }
.perfil:hover::after{ transform:translate(2px,-2px) }
.perfil-rede{ font:italic 400 1.55rem/1.1 var(--f-s); color:var(--ac) }
.perfil-t{ font-weight:600; font-size:1.02rem; line-height:1.35 }
.perfil-d{ color:var(--mut); font-size:.95rem; line-height:1.55 }

/* página de 404 e de links sem tema próprio */
.pg-link .texto ul{ display:grid; gap:10px }
.pg-link .texto ul > li{ padding:16px 18px; border:1px solid var(--line); border-radius:18px; background:var(--card) }
.pg-link .texto ul > li::before{ display:none }

/* ---------------------------------------------------------------- rodapé */
.pg-inicio .rodape-site{ margin-top:0 }
.rodape-site{ position:relative; margin-top:48px; padding:56px 0 112px; border-top:0; background:var(--noite3); font-size:.95rem }
.rodape-site .faixa{ display:grid; gap:30px }
.rod-logo{ width:min(250px,72%); height:auto; margin:0 0 18px -6px }
.rod-fatos p{ color:var(--mut); max-width:62ch }
.rod-fatos p + p{ margin-top:10px }
.rod-fatos a{ display:inline-flex; align-items:center; min-height:44px; color:var(--ac); font-weight:600; text-decoration:underline; text-decoration-color:rgba(var(--acR),.45); text-underline-offset:.22em }
.rod-links ul{ list-style:none; padding:0; margin:0 }
.rod-links > ul:first-child{ display:grid; grid-template-columns:1fr 1fr; column-gap:20px }
.rod-links a{ display:flex; align-items:center; min-height:44px; color:var(--mut); text-decoration:none; transition:color .2s }
.rod-links a:hover{ color:var(--ac) }
.rod-redes{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px !important }
.rod-redes a{ padding:0 16px; border:1px solid var(--line2); border-radius:999px; color:var(--ink); transition:border-color .2s,color .2s }
.rod-redes a:hover{ border-color:var(--ac) }
.rod-urgencia{ padding:18px 20px; border-radius:18px; border:1px solid rgba(var(--ac2R),.35); background:rgba(var(--ac2R),.07); color:var(--ink); line-height:1.6 }
.rod-credito{ font-size:.88rem; color:var(--mut2) }
.rod-credito a{ display:inline-flex; align-items:center; min-height:44px; color:var(--mut); text-decoration:underline; text-decoration-color:var(--line2); text-underline-offset:.2em }
.rod-credito a:hover{ color:var(--ac) }
@media (min-width:900px){
  .rodape-site{ padding-bottom:56px }
  .rodape-site .faixa{ grid-template-columns:1.25fr 1fr; column-gap:64px }
  .rod-urgencia,.rod-credito{ grid-column:1 / -1 }
}

/* ---------------------------------------------------------------- WhatsApp flutuante */
.wa-flutua{ position:fixed; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); z-index:60; display:inline-flex; align-items:center; justify-content:center; gap:10px; width:56px; height:56px; border-radius:999px; background:#25d366; color:#0b2a17; text-decoration:none; font:600 1rem/1 var(--f-d);
  box-shadow:0 12px 30px -8px rgba(42,13,20,.35), inset 0 0 0 1px rgba(255,255,255,.2); transition:transform .25s var(--ease), opacity .2s, visibility .2s }
.wa-flutua svg{ width:30px; height:30px; flex:none }
.wa-flutua::before{ content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid #25d366; animation:wa 3.6s ease-out infinite; pointer-events:none }
@keyframes wa{ 0%{ transform:scale(1); opacity:.7 } 70%,100%{ transform:scale(1.4); opacity:0 } }
.wa-txt{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
@media (min-width:768px){
  .wa-flutua{ width:auto; padding:0 22px 0 16px }
  .wa-flutua::before{ animation-name:wa-pilula }
  .wa-txt{ position:static; width:auto; height:auto; overflow:visible; clip:auto }
}
@keyframes wa-pilula{ 0%{ transform:scale(1); opacity:.7 } 70%,100%{ transform:scale(1.12,1.4); opacity:0 } }
@media (hover:hover){ .wa-flutua:hover{ transform:scale(1.05) } }

/* ================================================================ home */
.hero{ --b:.5; position:relative; overflow:clip; padding:36px 0 72px; isolation:isolate }
.hero::before{ content:""; position:absolute; z-index:-1; width:min(900px,140vw); aspect-ratio:1; right:-20%; top:-10%; border-radius:50%;
  background:radial-gradient(closest-side,rgba(239,214,218,.9),rgba(var(--ac2R),.14) 55%,transparent 75%); opacity:calc(.55 + .45 * var(--b)); transform:scale(calc(.9 + .14 * var(--b))) }
.hero-grade{ display:grid; gap:44px; align-items:center }
.h1-linha{ display:flex; align-items:center; gap:12px; margin-bottom:18px; font:500 1rem/1.4 var(--f-d); letter-spacing:0; color:var(--mut); text-wrap:pretty }
.h1-linha::before{ content:""; flex:none; width:28px; height:1.5px; background:var(--ac) }
.titulo-hero{ font:500 clamp(2.5rem,1.4rem + 3.9vw,5.2rem)/1 var(--f-d); letter-spacing:-.035em; color:var(--ink); text-wrap:balance }
.hero .lead{ margin-top:22px; max-width:38ch }
.acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }
.acoes-nota{ margin-top:12px; font-size:.92rem; color:var(--mut2) }
.hero-midia{ margin-top:22px }
.hero-midia-t{ display:block; margin-bottom:8px; font-size:.88rem; font-weight:500; color:var(--mut) }
.hero-midia ul{ display:flex; flex-wrap:wrap; gap:8px }
.hero-midia a{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px; background:var(--papel); border:1px solid var(--line2); color:var(--ink); font-size:.92rem; font-weight:500; text-decoration:none; transition:border-color .25s, color .25s }
.hero-midia a:hover{ border-color:var(--ac); color:var(--ac) }
.assina{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:34px; padding-top:22px; border-top:1px solid var(--line) }
.assina-eu{ display:flex; align-items:center; gap:12px }
.assina-eu img{ width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:50% 22%; box-shadow:0 0 0 2px var(--bg),0 0 0 3px rgba(var(--acR),.6) }
.assina-eu b{ display:block; font-weight:600; font-size:1rem; line-height:1.2 }
.assina-eu span{ font-size:.88rem; color:var(--mut) }
.registro{ display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--ink); text-decoration:none; font-size:.95rem; border-bottom:1px dashed var(--line2) }
.registro::after{ content:""; width:16px; height:16px; background:var(--ac); -webkit-mask:var(--i-sai) center/contain no-repeat; mask:var(--i-sai) center/contain no-repeat }
.registro:hover{ border-bottom-color:var(--ac) }

/* logo no topo da home */
.hero-logo{ position:relative; width:min(100%,520px); margin-inline:auto }
@media (min-width:1600px){ .hero-logo{ width:min(100%,600px) } }
@media (max-width:959px){ .hero-logo{ order:-1; width:min(78%,340px) } .hero-grade{ gap:30px } }
.hero-logo::before{ content:""; position:absolute; inset:-14% -10%; z-index:-1; border-radius:50%; background:radial-gradient(closest-side,rgba(255,253,252,.95),rgba(var(--ac2R),.1) 58%,transparent) }
.hero-logo img{ width:100%; height:auto; filter:drop-shadow(0 10px 26px rgba(93,25,39,.12)); animation:logo-entra 1.6s var(--ease) .15s both }
@keyframes logo-entra{ from{ opacity:0; transform:translateY(16px) scale(.97); filter:blur(8px) drop-shadow(0 10px 26px rgba(93,25,39,.12)) } }

/* lado direito do topo: logo em cima e o vídeo principal embaixo; no celular cada um vai para o seu lugar (logo antes do texto, vídeo depois) */
.hero-lado{ display:contents }
.vid-hero{ width:min(100%,300px); margin-inline:auto }
@media (min-width:960px){
  .hero-lado{ display:flex; flex-direction:column; align-items:center; gap:34px }
  .hero-lado .hero-logo{ width:min(100%,360px) }
  .vid-hero{ width:min(100%,272px) }
}
@media (min-width:1600px){ .hero-lado .hero-logo{ width:min(100%,420px) } .vid-hero{ width:min(100%,300px) } }

/* vídeos: capa com botão; o do topo toca no lugar, os outros abrem por cima da página */
.vid{ position:relative }
.vid-cap{ position:relative; display:block; width:100%; padding:0; border:0; border-radius:24px; overflow:hidden; aspect-ratio:4/5; background:#2a0d14; color:#fff; text-align:left; cursor:pointer;
  box-shadow:0 0 0 1px rgba(var(--inkR),.12), 0 30px 60px -36px rgba(93,25,39,.45) }
.vid-cap img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; transition:transform .8s var(--ease) }
.vid-cap::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(42,13,20,0) 42%,rgba(42,13,20,.55) 68%,rgba(42,13,20,.9)) }
@media (hover:hover){ .vid-cap:hover img{ transform:scale(1.04) } }
.vid-cap:focus-visible{ outline:3px solid var(--ac); outline-offset:4px }
.vid-play{ position:absolute; z-index:1; left:50%; top:46%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; background:var(--ac);
  box-shadow:0 0 0 7px rgba(194,161,92,.42), 0 16px 34px -12px rgba(42,13,20,.7); transition:transform .3s var(--ease) }
.vid-play::before{ content:""; position:absolute; left:26px; top:21px; border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff }
@media (hover:hover){ .vid-cap:hover .vid-play{ transform:scale(1.08) } }
.vid-sel{ position:absolute; z-index:1; left:18px; right:18px; bottom:16px; display:flex; flex-direction:column; gap:2px }
.vid-sel b{ font:600 1.06rem/1.25 var(--f-d); text-wrap:balance }
.vid-sel span{ font-size:.86rem; opacity:.85 }
.vid-hero .vid-cap{ aspect-ratio:9/16; border-radius:30px; box-shadow:0 0 0 1px rgba(var(--inkR),.16), 0 0 0 8px rgba(var(--inkR),.04), 0 50px 90px -40px rgba(93,25,39,.4) }
.vid-hero .vid-v{ display:block; width:100%; aspect-ratio:9/16; border-radius:30px; background:#000; object-fit:cover }

.vids{ display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) }
.vids .vid-nota{ margin-top:10px; font-size:.88rem; color:var(--mut) }
.vid:not(.vid-hero) .vid-play{ top:60% }
@media (min-width:1100px){ .vids{ grid-template-columns:repeat(4,1fr); gap:24px } }
@media (max-width:767px){
  .vids{ grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:72%; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; overscroll-behavior-x:contain }
  .vids > .vid{ scroll-snap-align:start }
}
.mid-img.vid-cap{ border-radius:0; aspect-ratio:4/3; box-shadow:none }
.mid-img.vid-cap img{ object-position:50% 30% }

.vid-dlg{ width:min(92vw,440px); max-width:none; max-height:none; padding:0; border:0; background:transparent; overflow:visible }
.vid-dlg.larga{ width:min(94vw,960px) }
.vid-dlg::backdrop{ background:rgba(28,8,13,.86) }
.vid-dlg video{ display:block; width:100%; max-height:84vh; border-radius:20px; background:#000 }
.vid-dlg-t{ margin-top:12px; color:#fff; font:500 1rem/1.35 var(--f-d); text-align:center }
.vid-fecha{ position:absolute; right:0; top:-56px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.1); color:#fff; cursor:pointer }
.vid-fecha svg{ width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none }
.vid-fecha:focus-visible{ outline:3px solid var(--ouro); outline-offset:3px }

/* fio guia: uma linha só desce pela página e a ponta acompanha a rolagem */
main{ position:relative }
#fio-guia{ position:absolute; left:0; top:0; z-index:5; pointer-events:none; overflow:visible }
#fio-guia .linha{ fill:none; stroke:rgba(194,161,92,.9); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
#fio-guia .halo{ fill:rgba(194,161,92,.16); stroke:rgba(194,161,92,.7); stroke-width:1; transform-box:fill-box; transform-origin:center; animation:guia-pulsa 2.6s ease-in-out infinite }
#fio-guia .ponta{ fill:var(--ouro) }
@keyframes guia-pulsa{ 50%{ transform:scale(1.7); opacity:.35 } }
.com-guia main .sec > .faixa > .fio,.com-guia main .final > .faixa > .fio{ visibility:hidden }
@media (max-width:767px){ #fio-guia .linha{ stroke-width:1.4 } }
@media (min-width:960px){
  .hero{ padding:56px 0 96px; min-height:min(calc(100dvh - var(--h)),920px); display:flex; align-items:center }
  .hero > .faixa{ width:min(100% - 64px, var(--wrap)) }
  .hero-grade{ grid-template-columns:1.08fr .92fr; gap:56px }
}

/* fio que se desembaraça */
.fio{ width:100%; height:100px; overflow:visible; margin:0 0 24px }
.fio path{ fill:none; stroke:url(#gFio); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0 }
.fio.fio-h1{ height:56px; margin:14px 0 2px }
@media (min-width:960px){ .fio{ height:120px; margin-bottom:36px } .fio.fio-h1{ height:60px; margin-bottom:2px } }

/* seções: faixas de fundo alternadas, como no site da Raíni */
.pg-inicio #como-funciona,.pg-inicio #sobre{ --bg:var(--blush) }
.pg-inicio #por-que-online,.pg-inicio #blog{ --bg:var(--papel) }
.pg-inicio main > .sec,.final{ background:var(--bg) }
.pg-inicio #como-funciona .luz,.pg-inicio #sobre .luz{ --card:var(--papel) }
.pg-inicio #por-que-online .luz,.pg-inicio #blog .cartao-post{ --card:var(--creme) }

/* seções */
.sec{ position:relative; padding:16px 0 56px }
.sec-cab{ max-width:760px; margin-bottom:44px }
.sec-cab h2,.final h2,.faq-lado h2{ font-size:clamp(2.1rem,1.35rem + 2.8vw,3.75rem); line-height:1.04 }
.sec-cab p{ margin-top:18px; color:var(--mut); font-size:1.12rem; max-width:58ch }
.rotulo{ display:block; margin-bottom:12px; font-size:.95rem; font-weight:500; color:var(--ac) }
@media (min-width:960px){ .sec{ padding:24px 0 72px } .sec > .faixa{ width:min(100% - 64px, var(--wrap)) } }

/* por que online */
.po-grade{ display:grid; gap:40px; align-items:center }
.moldura{ position:relative; overflow:hidden; border-radius:999px 999px 28px 28px; aspect-ratio:4/5; background:var(--bg3); box-shadow:0 40px 80px -40px rgba(93,25,39,.35) }
.moldura img{ width:100%; height:112%; object-fit:cover; margin-top:-6%; will-change:transform }
.moldura::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(var(--inkR),.12); pointer-events:none }
.selo{ position:absolute; left:16px; bottom:16px; display:flex; align-items:center; gap:10px; padding:10px 16px 10px 12px; border-radius:999px; background:rgba(255,253,252,.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--line2); font-size:.9rem }
.selo i{ width:10px; height:10px; border-radius:50%; background:#8fe0b0; box-shadow:0 0 0 0 rgba(143,224,176,.6); animation:ping 2.4s ease-out infinite }
@keyframes ping{ to{ box-shadow:0 0 0 10px rgba(143,224,176,0) } }
.motivos{ display:grid; gap:12px }
.motivo{ display:grid; grid-template-columns:52px 1fr; gap:18px; padding:24px 22px }
.motivo svg{ width:44px; height:44px; color:var(--ac) }
.motivo svg *{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.js .motivo.entra svg *{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.4s var(--ease) calc(var(--d,0s) + .2s) }
.js .motivo.entra.visto svg *{ stroke-dashoffset:0 }
.motivo p{ margin-top:6px; color:var(--mut) }
.po-fim{ margin-top:22px }
@media (min-width:960px){ .po-grade{ grid-template-columns:.85fr 1.15fr; gap:72px } .moldura{ max-width:460px } }

/* como funciona */
.passos{ --p:0; position:relative; display:grid; gap:14px; padding-left:44px }
.passos::before,.passos::after{ content:""; position:absolute; left:15px; top:12px; bottom:12px; width:2px; border-radius:2px }
.passos::before{ background:var(--line) }
.passos::after{ background:linear-gradient(var(--ac),var(--ac2)); transform-origin:top; transform:scaleY(var(--p)) }
.passo{ padding:24px 24px 26px }
.passo .n{ position:absolute; left:-44px; top:22px; z-index:1; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--bg); border:2px solid var(--ac); font:600 .85rem var(--f-d); color:var(--ac) }
.passo .num{ display:block; margin-bottom:8px; font:italic 400 3.2rem/1 var(--f-s); color:rgba(var(--acR),.68) }
.passo p{ margin-top:8px; color:var(--mut) }
.passos-fim{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:34px }
.passos-fim p{ color:var(--mut); max-width:44ch }
.passos-mais{ display:flex; flex-wrap:wrap; gap:0 22px; margin-top:10px }
@media (min-width:960px){
  .passos{ grid-template-columns:repeat(4,1fr); gap:18px; padding:46px 0 0 }
  .passos::before,.passos::after{ left:16px; right:16px; top:15px; bottom:auto; width:auto; height:2px }
  .passos::after{ transform-origin:left; transform:scaleX(var(--p)) }
  .passo .n{ left:24px; top:-46px }
  .passo:nth-child(even){ margin-top:36px }
}

/* temas */
.bento{ display:grid; gap:14px; grid-auto-flow:dense }
.tema{ display:flex; flex-direction:column; gap:10px; min-height:180px; padding:26px 24px 28px }
.tema .ix{ font:italic 400 1.15rem/1 var(--f-s); color:var(--ac2) }
.tema h3{ font-size:1.45rem; padding-right:28px }
.tema h3 a{ text-decoration:none }
.tema h3 a::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit }
.tema h3 a:focus-visible{ outline:none }
.tema:has(a:focus-visible){ outline:2px solid var(--ac); outline-offset:3px }
.tema:has(a)::after{ content:""; position:absolute; right:22px; top:24px; width:20px; height:20px; background:var(--ac); -webkit-mask:var(--i-vai) center/contain no-repeat; mask:var(--i-vai) center/contain no-repeat; transition:transform .3s var(--ease) }
.tema:has(a):hover::after{ transform:translateX(4px) }
.tema p{ color:var(--mut) }
.tema-grande h3{ font-size:clamp(1.7rem,1.3rem + 1.2vw,2.3rem) }
.tema-grande p{ font-size:1.08rem; max-width:44ch }
.tema-peri{ background:linear-gradient(120deg,rgba(var(--acR),.13),rgba(var(--ac2R),.08) 60%,rgba(var(--inkR),.02)) }
.tema-peri .marca-pg{ align-self:flex-start; margin-top:auto; padding:8px 14px; border-radius:999px; border:1px solid rgba(var(--acR),.4); color:var(--ac); font-size:.9rem }
@media (min-width:700px){ .bento{ grid-template-columns:repeat(2,1fr) } .t2,.t3{ grid-column:span 2 } }
@media (min-width:1024px){ .bento{ grid-template-columns:repeat(4,1fr) } .t2{ grid-column:span 2 } .t3{ grid-column:span 3 } .tema-grande{ min-height:240px; justify-content:flex-end } }
.nuvem-cx{ margin-top:48px; padding:30px 24px; border-radius:24px; border:1px dashed var(--line2) }
.nuvem-cx h3{ font-size:1.15rem; font-weight:500; color:var(--mut) }
.nuvem{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px }
.solto{ display:inline-block; transition:transform 1.1s var(--ease) var(--d,0s), opacity 1s var(--ease) var(--d,0s), filter 1s var(--ease) var(--d,0s) }
.solto span{ display:inline-block; padding:10px 16px; border-radius:999px; background:rgba(var(--inkR),.05); border:1px solid var(--line); font-size:.98rem; transition:background-color .25s,border-color .25s,transform .25s var(--ease) }
.solto span:hover{ background:rgba(var(--acR),.12); border-color:rgba(var(--acR),.45); transform:translateY(-2px) }
.nuvem.solta .solto{ transform:translate3d(var(--sx),var(--sy),0) rotate(var(--sr)); opacity:.5; filter:blur(1.5px) }
.nuvem.solta .solto span{ animation:vagar var(--t,9s) ease-in-out var(--dl,0s) infinite alternate }
.temas-fim{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:28px; color:var(--mut) }

/* sobre */
.sobre-grade{ display:grid; gap:40px; align-items:start }
.sobre-foto .moldura{ border-radius:28px 28px 999px 999px; aspect-ratio:1/1.12 }
.sobre-foto .moldura img{ object-position:40% 30% }
.citacao{ position:relative; margin-top:28px; padding-top:46px; font:italic 400 clamp(1.4rem,1.15rem + .8vw,1.95rem)/1.25 var(--f-s); color:var(--ink) }
.citacao svg{ position:absolute; top:0; left:0; width:52px; height:40px; color:var(--ac) }
.citacao svg path{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round }
.citacao footer{ margin-top:14px; font:400 .95rem var(--f-d); font-style:normal; color:var(--mut) }
.sobre-txt > p{ margin-top:22px; color:var(--mut); max-width:60ch }
.fatos{ display:grid; margin-top:28px; border-top:1px solid var(--line) }
.fatos div{ display:grid; gap:2px; padding:14px 0; border-bottom:1px solid var(--line) }
.fatos dt{ font-size:.88rem; color:var(--mut2) }
.fatos dd{ font-weight:500 }
@media (min-width:700px){ .fatos{ grid-template-columns:1fr 1fr; column-gap:28px } }
@media (min-width:960px){ .sobre-grade{ grid-template-columns:.9fr 1.1fr; gap:72px } .sobre-foto{ position:sticky; top:calc(var(--h) + 30px) } }

/* consultório */
.cons-grade{ display:grid; gap:44px; align-items:center }
.tela{ position:relative; isolation:isolate; width:min(100%,340px); margin-inline:auto }
.tela::before{ content:""; position:absolute; inset:-14%; z-index:-1; border-radius:50%; background:radial-gradient(closest-side,rgba(var(--acR),.3),rgba(var(--ac2R),.12) 60%,transparent); animation:pulsa 8s ease-in-out infinite alternate }
.tela-vid{ position:relative; overflow:hidden; border-radius:34px; aspect-ratio:9/16; background:var(--bg3); box-shadow:0 0 0 1px rgba(var(--inkR),.16), 0 0 0 8px rgba(var(--inkR),.04), 0 50px 90px -40px rgba(93,25,39,.35) }
.tela-vid video{ width:100%; height:100%; object-fit:cover }
.tela-btn{ position:absolute; left:14px; bottom:14px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(255,253,252,.85); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--line2); color:var(--ink); cursor:pointer }
.tela-btn[hidden]{ display:none }
.tela-btn svg{ width:16px; height:16px; fill:currentColor }
.tela-leg{ margin-top:14px; text-align:center; font-size:.9rem; color:var(--mut) }
.modos{ display:grid; gap:12px; margin-top:28px }
.modo{ padding:22px 22px 24px }
.modo b{ display:block; font-size:1.12rem; font-weight:600 }
.modo p{ margin-top:6px; color:var(--mut) }
.modo address{ margin-top:8px; font-style:normal; color:var(--ink) }
.cons-nota{ margin-top:18px; color:var(--mut) }
@media (min-width:700px){ .modos{ grid-template-columns:1fr 1fr } }
@media (min-width:960px){ .cons-grade{ grid-template-columns:.8fr 1.2fr; gap:80px } }

/* na mídia */
.midia-grade{ display:grid; gap:14px }
.mid{ display:flex; flex-direction:column; overflow:hidden }
.mid-img{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--bg3) }
.mid-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
@media (hover:hover){ .mid:hover .mid-img img{ transform:scale(1.05) } }
.mid-corpo{ display:flex; flex-direction:column; gap:8px; flex:1; padding:22px 22px 18px }
.mid-data{ font-size:.88rem; color:var(--ac2) }
.mid-corpo p{ color:var(--mut) }
.mid-links{ display:flex; flex-wrap:wrap; gap:0 18px; margin-top:auto }
.mid-dest{ display:grid }
.mid-dest .mid-img{ aspect-ratio:1/1 }
.mid-dest .mid-img img{ object-position:50% 40% }
.mid-dest blockquote{ margin:6px 0 4px; padding-left:18px; border-left:2px solid var(--ac); font:italic 400 clamp(1.35rem,1.1rem + .8vw,1.8rem)/1.28 var(--f-s); color:var(--ink) }
@media (min-width:760px){ .midia-grade{ grid-template-columns:repeat(2,1fr) } .mid-dest{ grid-column:1 / -1; grid-template-columns:.9fr 1.1fr } .mid-dest .mid-corpo{ justify-content:center; padding:34px 34px 26px } }
@media (min-width:1100px){ .midia-grade{ grid-template-columns:repeat(4,1fr) } .mid-dest{ grid-template-columns:.75fr 1.25fr } }
.mid:not(.mid-dest) blockquote{ margin:4px 0 2px; padding-left:14px; border-left:2px solid var(--ac); font:italic 400 1.12rem/1.35 var(--f-s); color:var(--ink) }
.mid-recorte{ object-position:72% 30% }

/* encontre a Cristiane também em */
.sec-perfis .sec-cab{ margin-bottom:28px }
.sec-perfis .sec-cab h2{ font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem) }
@media (min-width:900px){ .sec-perfis .perfis{ grid-template-columns:repeat(3,1fr) } }

/* blog na home */
.pg-inicio .grade-posts{ margin-top:0 }
@media (min-width:860px){ .pg-inicio .grade-posts{ grid-template-columns:repeat(3,1fr) } .pg-inicio .grade-posts .cartao-post:nth-child(2){ margin-top:28px } .pg-inicio .grade-posts .cartao-post{ min-height:230px } }
.blog-fim{ margin-top:22px }
@media (min-width:860px){ .blog-fim{ margin-top:40px } }

/* dúvidas na home */
.faq-grade{ display:grid; gap:36px }
.faq-grade .faq{ margin-top:0 }
.faq-lado .cx{ margin-top:28px; padding:24px }
.faq-lado .cx b{ font-weight:600 }
.faq-lado .cx p{ margin:6px 0 10px; color:var(--mut) }
@media (min-width:960px){ .faq-grade{ grid-template-columns:.8fr 1.2fr; gap:72px } .faq-lado{ position:sticky; top:calc(var(--h) + 30px); align-self:start } }

/* chamada final */
.final{ position:relative; padding:24px 0 112px; text-align:center; isolation:isolate }
.final-anel{ position:relative; width:180px; height:180px; margin:0 auto 32px }
.final-anel span{ position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(var(--acR),.5); animation:anel 7s ease-in-out infinite }
.final-anel span:nth-child(2){ animation-delay:-2.33s } .final-anel span:nth-child(3){ animation-delay:-4.66s }
.final-anel img{ position:absolute; inset:34px; width:112px; height:112px; border-radius:50%; object-fit:cover; object-position:50% 25% }
@keyframes anel{ 0%{ transform:scale(.62); opacity:0 } 30%{ opacity:.9 } 100%{ transform:scale(1.12); opacity:0 } }
.final h2{ max-width:16ch; margin-inline:auto; font-size:clamp(2.3rem,1.4rem + 3.6vw,4.6rem) }
.final p{ max-width:46ch; margin:20px auto 0; color:var(--mut); font-size:1.12rem }
.final .acoes{ justify-content:center }

/* ---------------------------------------------------------------- movimento reduzido e impressão */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation:none !important; transition:none !important }
  .js .entra{ opacity:1; transform:none }
}
@media print{
  html::before,html::after,body::before,body::after,.topo-site,.wa-flutua,.fio,#fio-guia,.chamada::before{ display:none !important }
  body{ background:#fff; color:#111 }
  .js .entra{ opacity:1; transform:none }
}

/* aviso de cookies (só aparece na versão final, com a tag do Google) */
.aviso-cookies{ position:fixed; z-index:60; left:16px; right:16px; bottom:16px; max-width:560px; margin-inline:auto; display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; padding:14px 16px; border-radius:18px; background:var(--noite); color:#fbeff1; box-shadow:0 18px 50px -18px rgba(42,13,20,.55); font:400 .9rem/1.45 var(--f-d) }
.aviso-cookies p{ flex:1 1 260px; margin:0 }
.aviso-cookies a{ color:#e2c48c; text-decoration:underline; text-underline-offset:3px }
.aviso-cookies-bts{ display:flex; gap:8px; margin-left:auto }
.aviso-cookies button{ min-height:44px; padding:10px 18px; border-radius:999px; border:1px solid rgba(251,239,241,.35); background:transparent; color:#fbeff1; font:600 .9rem/1 var(--f-d); cursor:pointer }
.aviso-cookies button[data-c="sim"]{ background:#e2c48c; border-color:#e2c48c; color:var(--noite) }
.aviso-cookies button:focus-visible, .aviso-cookies a:focus-visible{ outline:2px solid #e2c48c; outline-offset:2px }

/* ================================================================
   Link da bio (/link/), visual Respiro. Funciona sozinho: variáveis,
   fontes e reset próprios, tudo preso a .bio e à página .pg-link.
   ================================================================ */
.pg-link, .bio{
  /* paleta do site da Raíni Crepaldi: creme, vinho, blush e dourado */
  --bio-bg:#fbf8f6; --bio-bg3:#f6e7e9; --bio-papel:#fffdfc;
  --bio-ink:#2a1f22; --bio-mut:#6c5a5e; --bio-mut2:#6f5d62;
  --bio-ac:#7b2436; --bio-ac2:#9a4a5c; --bio-ac-ink:#fff;
  --bio-line:rgba(123,36,54,.14); --bio-line2:rgba(123,36,54,.24);
  --bio-ease:cubic-bezier(.22,1,.36,1); --bio-sopro:cubic-bezier(.37,0,.63,1);
  --bio-fd:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bio-fs:"Instrument Serif",Georgia,"Times New Roman",serif;
}
body.pg-link{ margin:0; min-height:100dvh; background:var(--bio-bg); color:var(--bio-ink); font:400 1rem/1.55 var(--bio-fd); font-optical-sizing:auto; color-scheme:light; overflow-x:clip; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent }
.pg-link main{ display:block; margin:0; padding:0; max-width:none; background:none }
.pg-link .pular{ position:absolute; left:16px; top:-80px; z-index:100; padding:12px 18px; min-height:48px; display:inline-flex; align-items:center; border-radius:12px; background:var(--bio-ac); color:var(--bio-ac-ink); font:600 1rem/1.2 var(--bio-fd); text-decoration:none; transition:top .2s }
.pg-link .pular:focus{ top:12px }

.bio, .bio *, .bio *::before, .bio *::after{ box-sizing:border-box }
.bio{ position:relative; isolation:isolate; min-height:100dvh; font-family:var(--bio-fd); color:var(--bio-ink) }
.bio :where(h1,h2,p,ul,li){ margin:0; padding:0 }
.bio ul{ list-style:none }
:where(.bio) a{ color:inherit; text-decoration:none }
.bio svg, .bio img{ display:block; max-width:100% }
.bio :focus-visible{ outline:2px solid var(--bio-ac); outline-offset:3px }
.bio-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }

/* céu: auroras que respiram atrás de tudo */
.bio-ceu{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none }
.bio-ceu span{ position:absolute; border-radius:50%; will-change:transform,opacity }
.bio-ceu span:nth-child(1){ width:90vmax; height:90vmax; left:-40vmax; top:-38vmax; background:radial-gradient(closest-side,rgba(239,214,218,.6),transparent 70%); animation:bio-ceu1 22s ease-in-out infinite alternate }
.bio-ceu span:nth-child(2){ width:80vmax; height:80vmax; right:-42vmax; top:24vh; background:radial-gradient(closest-side,rgba(246,231,233,.85),transparent 70%); animation:bio-ceu2 26s ease-in-out infinite alternate }
.bio-ceu span:nth-child(3){ width:70vmax; height:70vmax; left:-10vmax; bottom:-44vmax; background:radial-gradient(closest-side,rgba(194,161,92,.08),transparent 70%); animation:bio-ceu1 30s ease-in-out infinite alternate-reverse }
.bio-ceu::after{ content:""; position:absolute; inset:0; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
.bio-ceu::after{ display:none }
@media (max-width:767px){ .bio-ceu span{ animation:none; will-change:auto } }
@keyframes bio-ceu1{ from{ transform:translate3d(0,0,0) scale(.92); opacity:.75 } to{ transform:translate3d(8vw,5vh,0) scale(1.08); opacity:1 } }
@keyframes bio-ceu2{ from{ transform:translate3d(0,0,0) scale(1.05); opacity:1 } to{ transform:translate3d(-7vw,-6vh,0) scale(.9); opacity:.7 } }

/* coluna central */
.bio-coluna{ width:min(100% - 32px, 460px); margin-inline:auto; padding:28px 0 calc(40px + env(safe-area-inset-bottom)) }
@media (min-width:700px){ .bio-coluna{ padding-top:56px; padding-bottom:72px } }

/* entrada escalonada */
.bio-in{ animation:bio-sobe .9s var(--bio-ease) both; animation-delay:calc(var(--i,0) * 70ms + 120ms) }
@keyframes bio-sobe{ from{ opacity:0; transform:translate3d(0,16px,0) } to{ opacity:1; transform:none } }

/* topo: foto dentro do anel (sem a animação de respiração, a pedido da Cristiane) */
.bio-topo{ text-align:center }
.bio-palco{ position:relative; height:252px; display:grid; place-items:center; margin-bottom:6px }
.bio-foto{ position:relative; width:220px; height:220px }
.bio-halo{ position:absolute; inset:-24%; border-radius:50%; background:radial-gradient(closest-side,rgba(239,214,218,.95),rgba(201,138,153,.2) 58%,transparent 76%); transform:scale(.86); opacity:.75 }
.bio-esfera{ position:absolute; inset:14px; border-radius:50%; background:radial-gradient(circle at 38% 32%,#fff 0,#f6e7e9 38%,#c98a99 72%,#7b2436 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 0 40px rgba(123,36,54,.18); transform:scale(.94) }
.bio-orbita{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.bio-arco{ stroke-dashoffset:0 }
.bio-retrato{ position:absolute; inset:34px; width:152px; height:152px; border-radius:50%; object-fit:cover; object-position:50% 40%; background:var(--bio-bg3); box-shadow:0 0 0 4px var(--bio-bg), 0 18px 40px -14px rgba(93,25,39,.35) }

/* palavras que flutuam em volta */
.bio-pens{ position:absolute; inset:0; pointer-events:none }
.bio-pens span{ position:absolute; left:var(--x); top:var(--y); font:italic 400 1.1rem/1 var(--bio-fs); color:var(--bio-ink); opacity:.3; white-space:nowrap; animation:bio-vagar var(--t,20s) ease-in-out var(--dl,0s) infinite alternate }
@keyframes bio-vagar{ 0%{ transform:translate3d(0,0,0) rotate(-2deg) } 50%{ transform:translate3d(10px,-12px,0) rotate(1deg) } 100%{ transform:translate3d(-8px,8px,0) rotate(-1deg) } }

.bio-nome{ font:500 clamp(2.1rem,1.7rem + 1.6vw,2.6rem)/1.02 var(--bio-fd); letter-spacing:-.035em; color:var(--bio-ink); text-wrap:balance }
.bio-logo{ display:block; width:min(300px,80%); height:auto; margin:4px auto 2px }
.bio-prof{ margin-top:8px; font-size:1rem; font-weight:500; color:var(--bio-mut) }
.bio-onde{ margin:12px auto 0; max-width:30ch; font-size:1.02rem; line-height:1.5; color:var(--bio-mut); text-wrap:balance }
.bio-onde em{ font:italic 400 1.18em/1 var(--bio-fs); color:var(--bio-ac) }

/* fio que se desenha */
.bio-fio{ width:200px; height:24px; margin:22px auto 22px; overflow:visible }
.bio-fio path{ fill:none; stroke:url(#bioFio); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; animation:bio-fio 2.4s var(--bio-ease) .5s both }
@keyframes bio-fio{ from{ stroke-dashoffset:1 } to{ stroke-dashoffset:0 } }

/* botão de destaque: Agendar consulta */
.bio-cta{ position:relative; margin-bottom:30px }
.bio-agendar{ --lx:50%; --ly:50%; position:relative; display:grid; grid-template-columns:52px 1fr 22px; align-items:center; gap:12px; min-height:80px; padding:12px 20px 12px 14px; border-radius:999px;
  background:#7b2436 linear-gradient(115deg,#93304a 0%,#7b2436 46%,#5d1927 100%); color:var(--bio-ac-ink); text-align:left;
  box-shadow:0 14px 34px -12px rgba(123,36,54,.45), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(120,40,70,.18);
  transition:translate .3s var(--bio-ease), scale .2s var(--bio-ease), filter .3s; animation:bio-brilho 14s infinite }
.bio-agendar::before{ content:""; position:absolute; inset:-5px; border-radius:inherit; border:1.5px solid rgba(194,161,92,.75); pointer-events:none; animation:bio-anel 14s infinite }
.bio-ag-brilho{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none }
.bio-ag-brilho::before{ content:""; position:absolute; inset:0; background:radial-gradient(180px circle at var(--lx) var(--ly),rgba(255,255,255,.4),transparent 70%); opacity:0; transition:opacity .3s }
.bio-ag-brilho::after{ content:""; position:absolute; top:-20%; bottom:-20%; left:0; width:38%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent); transform:translateX(-140%) skewX(-18deg); animation:bio-reflexo 7s var(--bio-ease) 1.6s infinite }
.bio-ag-ic{ position:relative; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--bio-ac); box-shadow:0 6px 16px -6px rgba(42,13,20,.35) }
.bio-ag-ic svg{ width:27px; height:27px; fill:currentColor }
.bio-ag-txt{ position:relative; display:flex; flex-direction:column; gap:3px; min-width:0 }
.bio-ag-t{ font:600 1.32rem/1.1 var(--bio-fd); letter-spacing:-.02em }
.bio-ag-d{ font-size:.88rem; line-height:1.3; font-weight:500; color:rgba(255,255,255,.86) }
.bio-ag-seta{ position:relative; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--bio-ease) }
.bio-cta-nota{ margin-top:14px; text-align:center; font-size:.92rem; color:var(--bio-mut2) }
@keyframes bio-anel{
  0%{ inset:-4px; opacity:.3; animation-timing-function:var(--bio-sopro) }
  28.571%{ inset:-11px; opacity:.85; animation-timing-function:linear }
  57.143%{ inset:-11px; opacity:.85; animation-timing-function:var(--bio-sopro) }
  100%{ inset:-4px; opacity:.3 } }
@keyframes bio-brilho{
  0%{ box-shadow:0 12px 30px -14px rgba(123,36,54,.35), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(120,40,70,.18); animation-timing-function:var(--bio-sopro) }
  28.571%{ box-shadow:0 18px 50px -10px rgba(123,36,54,.6), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(120,40,70,.18); animation-timing-function:linear }
  57.143%{ box-shadow:0 18px 50px -10px rgba(123,36,54,.6), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(120,40,70,.18); animation-timing-function:var(--bio-sopro) }
  100%{ box-shadow:0 12px 30px -14px rgba(123,36,54,.35), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(120,40,70,.18) } }
@keyframes bio-reflexo{ 0%{ transform:translateX(-140%) skewX(-18deg) } 22%,100%{ transform:translateX(330%) skewX(-18deg) } }
@media (hover:hover){
  .bio-agendar:hover{ translate:0 -2px; filter:saturate(1.08) brightness(1.03) }
  .bio-agendar:hover .bio-ag-brilho::before{ opacity:1 }
  .bio-agendar:hover .bio-ag-seta{ transform:translateX(4px) }
}
.bio-agendar:active{ scale:.985 }

/* cartões de links */
.bio-links{ display:grid; gap:10px }
.bio-cartao{ --lx:50%; --ly:0%; position:relative; display:grid; grid-template-columns:44px 1fr 16px; align-items:center; gap:13px; min-height:72px; padding:12px 16px 12px 12px; border-radius:22px; overflow:hidden;
  background:var(--bio-papel); border:1px solid var(--bio-line);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:translate .35s var(--bio-ease), scale .2s var(--bio-ease), border-color .3s, background-color .3s, box-shadow .35s }
.bio-cartao::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s; background:radial-gradient(240px circle at var(--lx) var(--ly),rgba(123,36,54,.18),transparent 70%) }
.bio-ic{ position:relative; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:var(--bio-ac); background:rgba(123,36,54,.1); border:1px solid rgba(123,36,54,.24); transition:background-color .3s, border-color .3s, box-shadow .35s }
.bio-ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.bio-c-txt{ position:relative; display:flex; flex-direction:column; gap:2px; min-width:0 }
.bio-c-t{ font-size:1.04rem; font-weight:600; line-height:1.25; letter-spacing:-.01em; color:var(--bio-ink); text-wrap:balance }
.bio-c-d{ font-size:.9rem; line-height:1.35; color:var(--bio-mut); text-wrap:balance }
.bio-c-seta{ position:relative; width:16px; height:16px; fill:none; stroke:var(--bio-mut2); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--bio-ease), stroke .3s }
@media (hover:hover){
  .bio-cartao:hover{ translate:0 -3px; border-color:rgba(123,36,54,.4); box-shadow:0 22px 44px -24px rgba(93,25,39,.22) }
  .bio-cartao:hover::before{ opacity:1 }
  .bio-cartao:hover .bio-ic{ background:rgba(123,36,54,.18); border-color:rgba(123,36,54,.5); box-shadow:0 0 0 6px rgba(123,36,54,.08) }
  .bio-cartao:hover .bio-c-seta{ transform:translateX(3px); stroke:var(--bio-ac) }
}
.bio-cartao:active{ scale:.985; border-color:rgba(123,36,54,.45) }
.bio-cartao:active::before{ opacity:1 }

/* também estou em */
.bio-tambem{ margin-top:34px }
.bio-tambem-t{ display:flex; align-items:center; gap:12px; font:italic 400 1.45rem/1.1 var(--bio-fs); letter-spacing:0; color:var(--bio-ink); margin-bottom:14px }
.bio-tambem-t::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--bio-line2),transparent) }
.bio-perfis{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.bio-perfil{ --lx:50%; --ly:0%; position:relative; display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:68px; height:100%; padding:12px 12px 12px 14px; border-radius:18px; overflow:hidden;
  background:var(--bio-papel); border:1px solid var(--bio-line); transition:translate .35s var(--bio-ease), scale .2s var(--bio-ease), border-color .3s }
.bio-perfil::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s; background:radial-gradient(180px circle at var(--lx) var(--ly),rgba(201,138,153,.16),transparent 70%) }
.bio-p-t{ position:relative; font-size:.98rem; font-weight:600; line-height:1.2; letter-spacing:-.01em; color:var(--bio-ink) }
.bio-p-d{ position:relative; padding-right:20px; font-size:.84rem; line-height:1.3; color:var(--bio-mut) }
.bio-p-seta{ position:absolute; bottom:13px; right:12px; width:15px; height:15px; fill:none; stroke:var(--bio-mut2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--bio-ease), stroke .3s }
@media (hover:hover){
  .bio-perfil:hover{ translate:0 -2px; border-color:rgba(201,138,153,.42) }
  .bio-perfil:hover::before{ opacity:1 }
  .bio-perfil:hover .bio-p-seta{ transform:translate(2px,-2px); stroke:var(--bio-ac2) }
}
.bio-perfil:active{ scale:.98; border-color:rgba(201,138,153,.45) }

/* rodapé curto */
.bio-rodape{ margin-top:36px; padding-top:22px; border-top:1px solid var(--bio-line); text-align:center; font-size:.9rem; color:var(--bio-mut) }
.bio-r-nome{ color:var(--bio-ink); font-weight:500 }
.bio-r-link{ display:inline-flex; align-items:center; min-height:48px; padding:0 8px; color:var(--bio-ac); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:rgba(123,36,54,.45); transition:text-decoration-color .25s }
.bio-r-link:hover{ text-decoration-color:currentColor }
.bio-urgencia{ margin:10px 0 6px; padding:16px; border-radius:18px; border:1px solid rgba(201,138,153,.35); background:rgba(201,138,153,.07); color:var(--bio-ink); text-align:left; line-height:1.5 }
.bio-u-tel{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }
.bio-u-tel a{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 18px; border-radius:999px; border:1px solid rgba(201,138,153,.5); background:var(--bio-papel); color:var(--bio-ink); font-weight:600; font-variant-numeric:tabular-nums; transition:background-color .25s, border-color .25s }
.bio-u-tel a:hover{ background:rgba(201,138,153,.16); border-color:var(--bio-ac2) }

/* telas bem estreitas (a partir de 320 px) */
@media (max-width:389px){
  .bio-agendar{ grid-template-columns:46px 1fr 18px; gap:12px; padding-right:18px }
  .bio-ag-ic{ width:46px; height:46px }
  .bio-ag-t{ font-size:1.2rem }
  .bio-ag-d{ font-size:.82rem }
  .bio-p-t{ font-size:.92rem }
}

/* computador: um pouco mais de presença no topo */
@media (min-width:700px){
  .bio-palco{ height:280px }
  .bio-foto{ transform:scale(1.1) }
  .bio-pens span{ font-size:1.25rem }
}

/* tudo parado para quem pediu menos movimento */
@media (prefers-reduced-motion:reduce){
  .bio *, .bio *::before, .bio *::after{ animation:none !important; transition:none !important }
  .bio-ceu span{ animation:none !important }
  .bio-halo{ transform:none; opacity:.8 }
  .bio-esfera{ transform:scale(.96) }
  .bio-arco{ stroke-dashoffset:.25 }
  .bio-agendar::before{ inset:-7px; opacity:.6 }
  .bio-ag-brilho::after{ display:none }
  .bio-agendar:hover, .bio-cartao:hover, .bio-perfil:hover, .bio-agendar:active, .bio-cartao:active, .bio-perfil:active{ translate:none; scale:none }
  .pg-link .pular{ transition:none }
}

/* segundo botão em destaque (online) */
.bio-agendar + .bio-agendar{ margin-top:14px }
.bio-credito{ margin-top:8px; font-size:.82rem; color:var(--bio-mut2) }