/* ═══════════════════════════════════════════════════════════
   Fabi Taróloga — folha de estilo única
   Duas camadas visuais convivendo:
   [místico]  veludo, ouro, luz de vela  → hero, sobre, serviços, depoimentos
   [clínico]  superfície neutra, fio de 1px, sem brilho → formações
   ═══════════════════════════════════════════════════════════ */

/* ── 1. tokens ─────────────────────────────────────────────── */
:root{
  /* fundo */
  --noite:      #0B0710;
  --veludo:     #150E1C;
  --veludo-2:   #1D1327;
  --ametista:   #3D1F52;

  /* ouro */
  --ouro:       #C9A227;
  --ouro-luz:   #F0D178;
  --ouro-fio:   rgba(201,162,39,.28);

  /* texto */
  --pergaminho: #EDE6DA;
  --nevoa:      #A99CB0;

  /* ação */
  --verde:      #25D366;
  --verde-esc:  #0E7A3C;
  --verde-tinta:#062012;

  /* camada clínica */
  --clin-bg:    #0F0D14;
  --clin-sup:   #16141D;
  --clin-fio:   rgba(237,230,218,.12);
  --clin-ac:    #93A7BC;

  /* tipografia */
  --display: "Fraunces", "Georgia", serif;
  --corpo:   "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* espaço */
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --bloco:  clamp(4.5rem, 11vw, 8.5rem);
  --max:    1180px;

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

*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}

body{
  margin:0;
  background:var(--noite);
  color:var(--pergaminho);
  font-family:var(--corpo);
  font-size:1.0625rem;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
h1,h2,h3{ margin:0; line-height:1.08 }
p{ margin:0 0 1.1em }

:focus-visible{
  outline:2px solid var(--ouro-luz);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ouro-luz); color:#180F02;
  padding:.75rem 1.25rem; font-weight:700; border-radius:0 0 8px 0;
}
.skip:focus{ left:0 }

.wrap{
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ── 2. atmosfera ──────────────────────────────────────────── */

/* luz de vela que acompanha a leitura */
.ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:var(--ambient-on,1);
  transition:opacity .9s ease;
  background:
    radial-gradient(58vmax 52vmax at var(--lx,50%) var(--ly,20%),
      rgba(201,162,39,.15), rgba(201,162,39,0) 62%),
    radial-gradient(72vmax 64vmax at 84% 104%,
      rgba(61,31,82,.62), rgba(61,31,82,0) 66%),
    radial-gradient(64vmax 60vmax at 6% 44%,
      rgba(43,20,60,.55), rgba(43,20,60,0) 62%);
}

/* grão de filme — textura estática, custo zero de animação */
.grain{
  position:fixed; inset:-50%; z-index:0; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

body[data-mood="clinico"] .ambient{ opacity:.14 }
body[data-mood="clinico"] .grain{ opacity:.03 }

main, .topbar, .rodape, .fab{ position:relative; z-index:1 }

/* ── 3. marca e barra de topo ──────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem var(--gutter);
  background:rgba(11,7,16,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s ease, background .4s ease;
}
.topbar.is-stuck{ border-bottom-color:var(--ouro-fio) }

.mark{
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:44px;                     /* alvo de toque */
  text-decoration:none; letter-spacing:.02em;
}
.mark__glyph{ width:22px; height:22px; fill:var(--ouro); flex:none }
.mark__name{
  font-family:var(--display);
  font-variation-settings:"opsz" 40,"SOFT" 30,"WONK" 1;
  font-weight:600; font-size:1.06rem; color:var(--pergaminho);
}
.mark__name em{ font-style:italic; color:var(--ouro-luz); font-weight:400 }

.topbar__acoes{ display:flex; align-items:center; gap:.5rem }

.topbar__ig{
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:44px; padding:.5rem .8rem; border-radius:999px;
  border:1px solid var(--ouro-fio);
  color:var(--nevoa); text-decoration:none;
  font-weight:600; font-size:.9rem;
  transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.topbar__ig .ico{ width:18px; height:18px; fill:currentColor; flex:none }
.topbar__ig-nome{ display:none }
.topbar__ig:hover{ color:var(--ouro-luz); border-color:var(--ouro); background:rgba(201,162,39,.08) }

.topbar__cta{
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:44px;
  padding:.5rem .95rem; border-radius:999px;
  border:1px solid rgba(37,211,102,.45);
  color:var(--verde); text-decoration:none;
  font-weight:600; font-size:.9rem;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.topbar__cta:hover{ background:var(--verde); color:var(--verde-tinta); transform:translateY(-1px) }
.topbar__cta .ico{ width:17px; height:17px; fill:currentColor }

/* ── 4. hero ───────────────────────────────────────────────── */
.hero{
  position:relative;
  overflow:hidden;               /* o leque sangra de propósito — sem barra lateral */
  display:grid;
  gap:clamp(.75rem,3vw,2rem);
  padding:clamp(1rem,4vw,3rem) var(--gutter) clamp(3.5rem,9vw,6rem);
  min-height:calc(100svh - 3.6rem);
  align-content:center;
}

.hero__halo{
  position:absolute; z-index:0;
  left:50%; top:16%;
  width:min(760px,120vw); aspect-ratio:1;
  translate:-50% 0;
  background:radial-gradient(circle, rgba(201,162,39,.20), rgba(201,162,39,.05) 42%, transparent 68%);
  filter:blur(12px);
  animation:respira 9s var(--curva) infinite;
}
@keyframes respira{
  0%,100%{ transform:scale(1); opacity:.85 }
  50%    { transform:scale(1.07); opacity:1 }
}

/* palco: leque de cartas + foto */
.hero__stage::before{
  content:""; position:absolute; z-index:0;
  inset:4% -14% 22%;
  background:radial-gradient(ellipse at 52% 52%, rgba(61,31,82,.92), rgba(43,20,60,.45) 46%, transparent 72%);
}
.hero__stage{
  position:relative; z-index:1;
  display:grid;
  grid-template-rows:1fr auto;
  gap:clamp(.4rem,1.5vw,1rem);
  height:clamp(300px,46svh,520px);
  perspective:1100px;
}

/* faixa de cima: ela */
.hero__figura{
  position:relative; z-index:2;
  display:grid; place-items:end center;
  min-height:0;
}
.hero__figura picture{ display:contents }

/* faixa de baixo: o leque, aberto na mesa à frente dela */
.fan{
  --espalha:14px;
  position:relative; z-index:1;
  height:clamp(96px,22vw,150px);
  display:grid; place-items:start center;
  transform-style:preserve-3d;
  /* as cartas continuam para fora do bloco: a base dissolve */
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);
  mask-image:linear-gradient(180deg,#000 72%,transparent);
}
.fan__card{
  position:absolute; top:0;
  width:clamp(80px,19vw,120px);
  aspect-ratio:120/200;
  transform-origin:50% 160%;
  transform:
    rotate(calc(var(--i) * (15deg + var(--px,0) * 5deg)))
    translateX(calc(var(--i) * var(--espalha)))
    translateY(calc(var(--i) * var(--i) * -5px))
    translateY(calc(var(--py,0) * var(--i) * -5px));
  transition:transform .45s var(--curva);
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55));
  opacity:.72;
}
.fan__card svg{ width:100%; height:100%; display:block; overflow:visible }
.fan__card .ink{ stroke:var(--ouro-luz); stroke-width:1.5; fill:none; opacity:.85 }
.fan__card .ink .fill{ fill:var(--ouro-luz); stroke:none }
/* brilho de folha de ouro que corre com o ponteiro */
.fan__card::after{
  content:""; position:absolute; inset:0; border-radius:7px;
  background:linear-gradient(105deg,
    transparent 34%,
    rgba(240,209,120,.20) calc(46% + var(--px,0) * 16%),
    transparent 60%);
  pointer-events:none;
}

.hero__stage picture{ display:contents }
.hero__foto{
  position:relative; z-index:2;
  width:auto; height:100%;
  max-width:min(82vw,380px);
  object-fit:contain; object-position:bottom center;
  border-radius:10px;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.7));
  /* o recorte termina no meio do tronco: dissolve em vez de cortar */
  animation:flutua 11s ease-in-out infinite;
}
@keyframes flutua{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-10px) }
}
/* se a foto ainda não foi enviada, o leque assume o palco inteiro */
.hero__stage.sem-foto{ grid-template-rows:1fr }
.hero__stage.sem-foto .hero__figura{ display:none }
.hero__stage.sem-foto .fan{
  height:100%; align-items:center;
  -webkit-mask-image:none; mask-image:none;
}
.hero__stage.sem-foto .fan__card{ width:clamp(112px,29vw,180px); opacity:.92; transform-origin:50% 150% }

.hero__texto{ position:relative; z-index:1; text-align:center; max-width:44rem; margin-inline:auto }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  margin:0 0 1rem;
  font-size:.72rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ouro);
}
.eyebrow__num{
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:1.05rem; letter-spacing:0; text-transform:none;
  color:var(--ouro-luz); opacity:.75;
  padding-right:.6rem; border-right:1px solid var(--ouro-fio);
  line-height:1;
}

.hero__h1{
  font-family:var(--display);
  font-variation-settings:"opsz" 144,"SOFT" 46,"WONK" 1;
  font-weight:600;
  font-size:clamp(2.5rem,10.5vw,5rem);
  letter-spacing:-.02em;
  margin-bottom:1.1rem;
}
.hero__h1 .foil{
  display:block;
  background:linear-gradient(100deg,
    #8E7420 0%, var(--ouro) 22%, #FFF3CE 42%, var(--ouro-luz) 55%, var(--ouro) 74%, #8E7420 100%);
  background-size:280% 100%;
  background-position:120% 0;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:folha 2.4s var(--curva) .35s 1 forwards;
}
@keyframes folha{ to{ background-position:-20% 0 } }

.hero__h1-sub{
  display:block;
  font-size:.48em; font-style:italic; font-weight:400;
  font-variation-settings:"opsz" 72,"SOFT" 60,"WONK" 1;
  color:var(--pergaminho); opacity:.9;
  margin-top:.15em;
}

.hero__lead{
  color:var(--nevoa);
  font-size:clamp(1rem,3.6vw,1.18rem);
  max-width:38rem; margin-inline:auto; margin-bottom:1.9rem;
}
.hero__lead strong{ color:var(--pergaminho); font-weight:600 }

.trustrow{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.5rem .95rem;
  list-style:none; margin:1.5rem 0 0; padding:0;
  font-size:.8rem; letter-spacing:.05em;
  color:var(--nevoa);
}
.trustrow li{ display:inline-flex; align-items:center; gap:.6rem }
.trustrow li+li::before{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--ouro); opacity:.6;
}

.hero__scroll{
  position:relative;
  justify-self:center; margin-top:.5rem;
  width:26px; height:44px; border-radius:14px;
  border:1px solid var(--ouro-fio);
  display:grid; place-items:start center; padding-top:8px;
}
/* a pílula continua estreita; o alvo de toque não */
.hero__scroll::before{ content:""; position:absolute; inset:0 -9px }
.hero__scroll span{
  width:3px; height:8px; border-radius:2px; background:var(--ouro);
  animation:desce 1.9s var(--curva) infinite;
}
@keyframes desce{
  0%{ opacity:0; transform:translateY(-3px) }
  40%{ opacity:1 }
  100%{ opacity:0; transform:translateY(14px) }
}

/* ── 4b. recortes ──────────────────────────────────────────── */
/* Todas as fotos com fundo removido encostam na borda do quadro
   original. Em vez de terminar num corte reto, dissolvem. */
.hero__foto,
.retrato img,
.servicos__foto img,
.fecho__foto img{
  -webkit-mask-image:
    linear-gradient(180deg,#000 80%,rgba(0,0,0,.4) 93%,transparent),
    linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:
    linear-gradient(180deg,#000 80%,rgba(0,0,0,.4) 93%,transparent),
    linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* ── 5. botões ─────────────────────────────────────────────── */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:54px; padding:.9rem 1.7rem;
  border-radius:999px;
  font-family:var(--corpo); font-weight:700; font-size:1.02rem;
  letter-spacing:.01em; text-decoration:none;
  cursor:pointer;
  transition:transform .25s var(--curva), box-shadow .25s ease, background .25s ease;
}
.cta .ico{ width:21px; height:21px; fill:currentColor; flex:none }

.cta--hero{
  background:linear-gradient(180deg, #34E276, var(--verde) 55%, #1DAE54);
  color:var(--verde-tinta);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,
             0 14px 34px -10px rgba(37,211,102,.62),
             0 0 46px -18px rgba(37,211,102,.9);
}
.cta--hero:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,
             0 20px 42px -10px rgba(37,211,102,.72),
             0 0 60px -14px rgba(37,211,102,1);
}
.cta--hero:active{ transform:translateY(0) }

.cta--ghost{
  background:transparent; color:var(--ouro-luz);
  border:1px solid var(--ouro-fio);
  font-weight:600;
}
.cta--ghost:hover{ background:rgba(201,162,39,.10); border-color:var(--ouro) }
.ico--arrow{ fill:none; stroke:currentColor; transition:transform .25s var(--curva) }
.cta--ghost:hover .ico--arrow{ transform:translateX(4px) }

/* CTA flutuante */
.fab{
  position:fixed; z-index:50;
  right:max(1rem, env(safe-area-inset-right));
  bottom:max(1rem, env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:56px; padding:0 1.35rem 0 1.1rem;
  border-radius:999px;
  background:linear-gradient(180deg, #34E276, var(--verde) 55%, #1DAE54);
  color:var(--verde-tinta);
  font-weight:700; font-size:1rem; text-decoration:none;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.7),
             0 0 0 1px rgba(255,255,255,.16) inset,
             0 0 0 0 rgba(37,211,102,.55);
  animation:pulso 3.4s ease-out infinite;
  transition:transform .3s var(--curva), opacity .3s ease;
}
/* dois botões verdes iguais na mesma tela competem entre si:
   o flutuante recua enquanto o CTA da seção está visível */
.fab.is-hidden{ opacity:0; pointer-events:none; transform:translateY(14px) scale(.9) }
.fab:hover{ transform:translateY(-2px) scale(1.02) }
.fab .ico{ width:24px; height:24px; fill:currentColor }
@keyframes pulso{
  0%   { box-shadow:0 14px 30px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.16) inset, 0 0 0 0 rgba(37,211,102,.5) }
  60%  { box-shadow:0 14px 30px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.16) inset, 0 0 0 16px rgba(37,211,102,0) }
  100% { box-shadow:0 14px 30px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.16) inset, 0 0 0 0 rgba(37,211,102,0) }
}

/* ── 6. seções (base) ──────────────────────────────────────── */
.section{ padding-block:var(--bloco) }

.h2{
  font-family:var(--display);
  font-variation-settings:"opsz" 96,"SOFT" 40,"WONK" 1;
  font-weight:600;
  font-size:clamp(1.85rem,5.6vw,3rem);
  letter-spacing:-.015em;
  margin-bottom:1.2rem;
  max-width:22ch;
}

/* revelação ao rolar (só quando há JS) */
.js [data-reveal] > .wrap > *{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s var(--curva), transform .7s var(--curva);
}
.js [data-reveal].is-in > .wrap > *{ opacity:1; transform:none }
.js [data-reveal].is-in > .wrap > *:nth-child(2){ transition-delay:.09s }
.js [data-reveal].is-in > .wrap > *:nth-child(3){ transition-delay:.18s }
.js [data-reveal].is-in > .wrap > *:nth-child(4){ transition-delay:.27s }
.js [data-reveal].is-in > .wrap > *:nth-child(5){ transition-delay:.36s }

/* ── 7. sobre ──────────────────────────────────────────────── */
.sobre, .servicos, .radio, .fecho{ overflow:hidden }

.sobre__grid{ display:grid; gap:clamp(2rem,6vw,4rem); align-items:center }

.retrato{
  margin:0; position:relative;
  justify-self:center;
  width:min(100%,330px); aspect-ratio:1;
  display:grid; place-items:center;
}
/* o disco é o fundo; a foto recortada flutua na frente e transborda */
.retrato::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 50% 38%, rgba(61,31,82,.9), rgba(11,7,16,.35) 72%);
  border:1px solid var(--ouro-fio);
}
.retrato::after{
  content:""; position:absolute; inset:-14%; border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,39,.16), transparent 62%);
}
.retrato picture{ display:contents }
.retrato img{
  position:relative; z-index:1;
  width:92%; height:auto; margin-top:-6%;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.6)) saturate(.96);
}

/* se o recorte do retrato ainda não existe, o texto ocupa a largura toda */
.sobre__grid.sem-retrato{ grid-template-columns:1fr }
.sobre__grid.sem-retrato .retrato{ display:none }

.sobre__texto p{ color:var(--nevoa) }
.sobre__texto strong{ color:var(--pergaminho); font-weight:600 }
.sobre__texto .cta{ margin-top:.6rem }

/* ── 8. credenciais — a camada clínica ─────────────────────── */
/* aqui o brilho sai de cena: superfície neutra, fio de 1px, tipo sóbrio */
.credenciais{
  background:var(--clin-bg);
  border-block:1px solid var(--clin-fio);
}
.eyebrow--clin{ color:var(--clin-ac) }
.eyebrow--clin .eyebrow__num{ color:var(--clin-ac); border-right-color:var(--clin-fio); opacity:.6 }

.h2--clin{
  max-width:30ch;
  font-family:var(--corpo);
  font-weight:700;
  font-size:clamp(1.5rem,4.4vw,2.15rem);
  letter-spacing:-.01em;
  color:var(--pergaminho);
  margin-bottom:2.4rem;
}

.pilares{
  display:grid; gap:1rem;
  margin-bottom:1rem;
}
.pilar{
  background:var(--clin-sup);
  border:1px solid var(--clin-fio);
  border-radius:4px;
  padding:1.8rem 1.6rem;
}
.pilar__ico{ width:40px; height:40px; color:var(--clin-ac); margin-bottom:1.1rem; display:block }
.pilar__t{
  font-family:var(--corpo); font-weight:700; font-size:1.28rem;
  letter-spacing:.01em; margin-bottom:.2rem;
}
.pilar__n{
  margin:0 0 .9rem;
  font-size:.82rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--clin-ac);
}
.pilar__d{ margin:0; color:var(--nevoa); font-size:.97rem; line-height:1.65 }

/* o complementar é menor — e parece menor */
.complemento{
  display:flex; gap:1.1rem; align-items:flex-start;
  padding:1.25rem 1.4rem;
  border:1px dashed var(--clin-fio);
  border-radius:4px;
  background:transparent;
}
.complemento__ico{ width:30px; height:30px; color:var(--clin-ac); opacity:.75; flex:none; margin-top:.15rem }
.complemento__t{
  font-family:var(--corpo); font-weight:600; font-size:1rem;
  color:var(--pergaminho); margin-bottom:.35rem;
}
.complemento__d{ margin:0; color:var(--nevoa); font-size:.9rem; line-height:1.6 }
.complemento__d strong{ color:var(--pergaminho); font-weight:600 }

.aviso{
  display:flex; gap:.95rem; align-items:flex-start;
  margin-top:1.6rem; padding:1.15rem 1.35rem;
  border-radius:4px;
  border:1px solid var(--clin-fio);
  border-left:3px solid var(--clin-ac);
  background:rgba(147,167,188,.05);
}
.aviso__ico{ width:22px; height:22px; color:var(--clin-ac); flex:none; margin-top:.2rem }
.aviso p{
  margin:0; max-width:88ch;
  font-size:.95rem; line-height:1.6; color:var(--nevoa);
}
.aviso strong{ color:var(--pergaminho); font-weight:600 }

/* ── 9. serviços ───────────────────────────────────────────── */
.servicos__cabeca{ display:grid; gap:1.5rem; margin-bottom:2.2rem }
.servicos__lead{ color:var(--nevoa); max-width:44ch; margin-bottom:0 }

.servicos__foto{
  position:relative; margin:0;
  justify-self:center; width:min(54vw,200px);
}
.servicos__foto::before{
  content:""; position:absolute; inset:-8% -12% -4%;
  border-radius:50% 50% 44% 44%;
  background:radial-gradient(circle at 50% 42%, rgba(61,31,82,.85), transparent 68%);
}
.servicos__foto picture{ display:contents }
.servicos__foto img{
  position:relative; width:100%;
  filter:drop-shadow(0 22px 32px rgba(0,0,0,.62));
}

.cards{
  display:grid; gap:1rem;
  perspective:1400px;
}
.card{
  position:relative;
  display:flex; flex-direction:column;
  padding:1.7rem 1.5rem 1.4rem;
  border-radius:14px;
  background:linear-gradient(165deg, var(--veludo-2), var(--veludo));
  border:1px solid var(--ouro-fio);
  overflow:hidden;
  transition:transform .5s var(--curva), border-color .35s ease, box-shadow .35s ease;
}
/* fio de luz no topo — some quando o cartão não está em foco */
.card::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg, transparent, var(--ouro-luz), transparent);
  opacity:.5; transition:opacity .35s ease;
}
.card:hover{
  transform:translateY(-5px);
  border-color:var(--ouro);
  box-shadow:0 26px 50px -24px rgba(0,0,0,.85), 0 0 42px -26px rgba(201,162,39,.7);
}
.card:hover::before{ opacity:1 }

.card__ico{ width:40px; height:40px; color:var(--ouro-luz); margin-bottom:1.1rem }
.card__t{
  font-family:var(--display);
  font-variation-settings:"opsz" 40,"SOFT" 40,"WONK" 0;
  font-weight:600; font-size:1.28rem; letter-spacing:-.005em;
  margin-bottom:.55rem;
}
.card__d{ color:var(--nevoa); font-size:.96rem; line-height:1.6; flex:1 }
.card__cta{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:46px; padding:.7rem 0;
  color:var(--verde); font-weight:700; font-size:.94rem;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, gap .25s var(--curva);
}
.card__cta::after{ content:"→"; transition:transform .25s var(--curva) }
.card__cta:hover{ border-bottom-color:var(--verde) }
.card__cta:hover::after{ transform:translateX(3px) }


/* entrada em leque: cada cartão é virado na mesa */
.js .cards .card{
  opacity:0;
  transform:translateY(26px) rotateX(12deg);
  transform-origin:50% 100%;
  transition:opacity .6s var(--curva), transform .6s var(--curva),
             border-color .35s ease, box-shadow .35s ease;
}
.js .servicos.is-in .cards .card{ opacity:1; transform:none }
.js .servicos.is-in .cards .card:nth-child(2){ transition-delay:.08s }
.js .servicos.is-in .cards .card:nth-child(3){ transition-delay:.16s }
.js .servicos.is-in .cards .card:nth-child(4){ transition-delay:.24s }

/* ── 10. rádio ─────────────────────────────────────────────── */
.radio__grid{ display:grid; gap:clamp(1.8rem,5vw,3.5rem); align-items:center }

.radio__figura{
  position:relative; margin:0;
  justify-self:center; width:min(84vw,380px);
  border-radius:12px; overflow:hidden;
  border:1px solid var(--ouro-fio);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
}
.radio__figura picture{ display:contents }
.radio__figura img{
  display:block; width:100%; height:auto;
}
.radio__figura::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 62%, rgba(11,7,16,.86));
  pointer-events:none;
}
.radio__figura figcaption{
  position:absolute; z-index:1; left:0; right:0; bottom:0;
  padding:.9rem 1.1rem;
  font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ouro-luz);
}

.radio__h2{ margin-bottom:.5rem }
.radio__h2 em{
  font-style:italic; font-weight:400;
  padding-inline:.1em;
  color:var(--ouro-luz); opacity:.85;
}
.radio__emissora{
  margin-bottom:1.1rem;
  font-size:.98rem; color:var(--nevoa);
}
.radio__emissora strong{ color:var(--pergaminho); font-weight:600 }

.radio__quando{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:1.1rem;
}
.radio__quando span{
  padding:.35rem .85rem; border-radius:999px;
  border:1px solid var(--ouro-fio);
  font-size:.82rem; font-weight:600; letter-spacing:.03em;
  color:var(--ouro-luz);
}
.radio__texto p{ color:var(--nevoa) }


/* ── 11. depoimentos ───────────────────────────────────────── */
.depoimentos__cabeca{ display:grid; gap:1.5rem; margin-bottom:2rem }
.depoimentos__lead{ color:var(--nevoa); max-width:42ch; margin-bottom:0 }

.banda{
  position:relative; margin:0;
  justify-self:center; width:min(100%,460px);
  border-radius:14px; overflow:hidden;
  border:1px solid var(--ouro-fio);
}
.banda picture{ display:contents }
.banda img{
  display:block; width:100%; height:auto;   /* nada de recorte: a roda aparece inteira */
  filter:saturate(.92) contrast(1.02);
}
.banda::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,7,16,.15) 30%, rgba(11,7,16,.88));
  pointer-events:none;
}
.banda figcaption{
  position:absolute; z-index:1; left:0; right:0; bottom:0;
  padding:.9rem 1.1rem;
  font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ouro-luz);
}

.depos{ display:grid; gap:1rem }
.depo{
  position:relative; margin:0;
  padding:2.2rem 1.6rem 1.5rem;
  border-radius:14px;
  background:linear-gradient(165deg, var(--veludo-2), var(--veludo));
  border:1px solid var(--ouro-fio);
}
.depo__aspas{
  width:30px; height:24px; fill:var(--ouro); opacity:.32;
  margin-bottom:.9rem;
}
.depo blockquote{
  margin:0 0 1.2rem;
  font-family:var(--display);
  font-variation-settings:"opsz" 36,"SOFT" 50,"WONK" 0;
  font-style:italic; font-weight:400;
  font-size:clamp(1.05rem,3.4vw,1.2rem); line-height:1.55;
  color:var(--pergaminho);
}
.depo figcaption{
  display:flex; flex-direction:column;
  padding-top:.9rem; border-top:1px solid var(--ouro-fio);
}
.depo__quem{ font-weight:700; font-size:.92rem }
.depo__onde{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ouro); margin-top:.15rem;
}

/* ── 12. fechamento ────────────────────────────────────────── */
.fecho__grid{ display:grid; gap:clamp(1.5rem,5vw,3.5rem); align-items:center }

.fecho__foto{
  position:relative; margin:0;
  justify-self:center; width:min(54vw,206px);
}
.fecho__foto::before{
  content:""; position:absolute; inset:-14% -18% 2%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 44%, rgba(201,162,39,.20), rgba(61,31,82,.7) 46%, transparent 72%);
}
.fecho__foto picture{ display:contents }
.fecho__foto img{
  position:relative; width:100%;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.65));
}

.fecho__h2{ max-width:20ch; margin-bottom:1.3rem }
.fecho__lead{
  color:var(--nevoa); max-width:54ch;
  margin-bottom:1.1rem;
  font-size:clamp(1rem,3.4vw,1.1rem);
}
.fecho__lead strong{ color:var(--pergaminho); font-weight:700 }
.fecho__texto .cta{ margin-top:.8rem }
.fecho__nota{
  margin:1.1rem 0 0;
  font-size:.86rem; color:var(--nevoa); opacity:.8;
}

/* ── 13. rodapé ────────────────────────────────────────────── */
.rodape{
  border-top:1px solid var(--ouro-fio);
  padding-block:clamp(2.5rem,7vw,4rem) calc(6rem + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, transparent, rgba(21,14,28,.75));
}
.rodape__grid{ display:grid; gap:1.8rem; justify-items:center; text-align:center }
.mark--rodape .mark__name{ font-size:1.3rem }

.social{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem }
.social a{
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:44px; padding:.5rem 1.05rem;
  border-radius:999px; border:1px solid var(--ouro-fio);
  color:var(--nevoa); text-decoration:none;
  font-size:.88rem; font-weight:600;
  transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.social a svg{ width:19px; height:19px; fill:currentColor }
.social a:hover{ color:var(--ouro-luz); border-color:var(--ouro); background:rgba(201,162,39,.08) }

.rodape__legal{
  margin:0; max-width:48ch;
  font-size:.78rem; line-height:1.6;
  color:var(--nevoa); opacity:.65;
}

/* ── 14. respiro em telas maiores ──────────────────────────── */
@media (min-width:640px){
  .fan{ --espalha:20px }
  .pilares{ grid-template-columns:1fr 1fr; gap:1.2rem }
  .depos{ grid-template-columns:1fr 1fr; gap:1.2rem }
  .cards{ grid-template-columns:1fr 1fr; gap:1.2rem }
  .fab{ padding:0 1.5rem 0 1.2rem }
}

@media (min-width:900px){
  .topbar{ padding-inline:clamp(2rem,4vw,3rem) }
  .topbar__ig-nome{ display:inline }

  .hero{
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    column-gap:clamp(2rem,5vw,4.5rem);
    padding-block:clamp(2rem,5vw,4rem) clamp(5rem,8vw,7rem);
    max-width:1240px; margin-inline:auto;
  }
  .hero__texto{ text-align:left; grid-column:1; grid-row:1; margin-inline:0 }
  .hero__texto .eyebrow{ justify-content:flex-start }
  .hero__lead{ margin-inline:0 }
  .trustrow{ justify-content:flex-start }
  .hero__stage{ grid-column:2; grid-row:1; height:min(66svh,540px) }
  .hero__foto{ max-width:none; height:100% }
  .hero__halo{ left:68%; top:12%; width:min(640px,52vw) }
  .hero__scroll{ grid-column:1/-1; justify-self:start }

  .sobre__grid{ grid-template-columns:.8fr 1.2fr }
  .retrato{ justify-self:start; max-width:380px }

  .servicos__cabeca{
    grid-template-columns:1.35fr .65fr;
    align-items:end; column-gap:2.5rem;
  }
  .servicos__foto{ justify-self:end; width:min(100%,300px) }

  .cards{ grid-template-columns:repeat(2,1fr) }

  .radio__grid{ grid-template-columns:.85fr 1.15fr }
  .radio__figura{ justify-self:start; width:min(100%,400px) }

  .depoimentos__cabeca{
    grid-template-columns:1.05fr .95fr;
    align-items:center; column-gap:2.5rem;
  }
  .banda{ justify-self:end; width:min(100%,460px) }

  .fecho__grid{ grid-template-columns:.72fr 1.28fr }
  .fecho__foto{ justify-self:start; width:min(100%,300px) }

  .rodape__grid{
    grid-template-columns:auto 1fr auto;
    align-items:center; justify-items:start; text-align:left;
  }
  .social{ justify-self:center }
  .rodape__legal{ justify-self:end; text-align:right }
}

@media (min-width:1100px){
  .cards{ grid-template-columns:repeat(2,1fr); gap:1.4rem }
}

/* ── 14b. barra de consentimento ───────────────────────────── */
/* Pertence à camada clínica de propósito: é aviso, não convite.
   Cinza-ardósia, sem ouro, sem brilho — não disputa com o CTA verde. */
.consentimento{
  position:fixed; z-index:60;
  left:max(1rem, env(safe-area-inset-left));
  bottom:max(1rem, env(safe-area-inset-bottom));
  right:max(1rem, env(safe-area-inset-right));
  max-width:26rem;
  display:grid; gap:.7rem;
  padding:.85rem 1rem;
  border-radius:10px;
  border:1px solid var(--clin-fio);
  background:rgba(15,13,20,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.9);
}
.consentimento[hidden]{ display:none }

.consentimento__texto{
  margin:0;
  font-size:.82rem; line-height:1.45; color:var(--nevoa);
}
.consentimento__acoes{ display:flex; flex-wrap:wrap; gap:.5rem }

.consentimento__btn{
  flex:1 1 auto;
  min-height:44px; padding:.45rem .9rem;
  border-radius:999px;
  border:1px solid var(--clin-fio);
  background:transparent; color:var(--nevoa);
  font-family:var(--corpo); font-weight:600; font-size:.86rem;
  cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.consentimento__btn:hover{ color:var(--pergaminho); border-color:var(--clin-ac) }
.consentimento__btn--sim{
  border-color:var(--clin-ac); color:var(--pergaminho);
  background:rgba(147,167,188,.12);
}
.consentimento__btn--sim:hover{ background:rgba(147,167,188,.22) }

/* enquanto o aviso está na tela, o flutuante sobe para não brigar com ele */
body.com-consentimento .fab{ bottom:calc(max(1rem, env(safe-area-inset-bottom)) + 8.5rem) }

@media (min-width:560px){
  .consentimento{ right:auto; grid-template-columns:1fr auto; align-items:center; max-width:34rem }
  .consentimento__acoes{ flex-wrap:nowrap }
  body.com-consentimento .fab{ bottom:max(1rem, env(safe-area-inset-bottom)) }
}

/* ── 15. movimento reduzido ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal] > .wrap > *,
  .js .cards .card{ opacity:1 !important; transform:none !important }
  .hero__h1 .foil{ background-position:50% 0 }
  .fan__card{ transform:rotate(calc(var(--i) * 15deg)) translateX(calc(var(--i) * var(--espalha))) translateY(calc(var(--i) * var(--i) * -5px)) }
}