/* 09 Clínica editorial (ref. Amperos) */
:root {
  --pad: 88px;
  --f-script: 'Nothing You Could Do', cursive;
  --f-assinatura: 'Mrs Saint Delafield', cursive;
  --r: 6px;
}
body { font-size: 16px; color: var(--fg); }
.sec { background: var(--bg); }

/* tipografia */
.serif { font-family: var(--f-titulo); font-weight: 400; letter-spacing: -.022em; line-height: 1.04; font-optical-sizing: auto; }
.h1 { font-size: 68px; }
.h2 { font-size: 54px; line-height: 1.08; }
.h3 { font-size: 38px; line-height: 1.1; }
.eyebrow { font-size: 15px; color: #6B645E; letter-spacing: -.005em; }
.caps { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #958D86; }
.script { font-family: var(--f-script); }
.assin { font-family: var(--f-assinatura); line-height: 1; }
.mono { font-family: var(--f-mono); font-size: 12px; line-height: 1.6; color: rgba(46, 44, 42, .32); white-space: pre; letter-spacing: .02em; }
.muted { color: var(--muted); }

/* botões */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 17px; border-radius: var(--r); font-size: 15px; font-weight: 500; letter-spacing: -.005em; transition: transform .2s var(--ease), background-color .2s, border-color .2s; }
.btn:active { transform: scale(.97); }
.btn-esc { background: var(--cafe); color: var(--creme); }
.btn-out { background: #fff; color: var(--fg); box-shadow: inset 0 0 0 1px rgba(46, 44, 42, .14); }
.btn-claro { background: var(--creme); color: var(--cafe); }
.btn-linha { color: var(--creme); box-shadow: inset 0 0 0 1px rgba(244, 242, 239, .35); }
.btn svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .btn-esc:hover { background: #2E2C2A; }
  .btn-out:hover { box-shadow: inset 0 0 0 1px rgba(46, 44, 42, .32); }
  .btn-linha:hover { box-shadow: inset 0 0 0 1px rgba(244, 242, 239, .7); }
}

/* nav */
.nav { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: 82px; display: flex; align-items: center; padding: 0 var(--pad); }
.logo { display: flex; align-items: center; gap: 9px; font-family: var(--f-titulo); font-size: 30px; font-weight: 500; letter-spacing: -.035em; }
.logo svg { width: 26px; height: 26px; }
.nav ul { display: flex; gap: 38px; margin-left: 62px; font-size: 15.5px; }
.nav .dir { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 15.5px; }
.nav .btn { height: 40px; }
@media (hover: hover) and (pointer: fine) { .nav ul a { transition: opacity .2s; } .nav ul:hover a:not(:hover) { opacity: .55; } }

/* peças de colagem */
.peca { position: absolute; display: block; pointer-events: none; }
.peca img { width: 100%; height: auto; }
.colagem .rv { transform: translateY(26px) rotate(var(--rot, 0deg)) scale(.97); transition-duration: .9s, 1.1s; }
.in .colagem .rv { transform: rotate(var(--rot, 0deg)); }

/* ───── 01 Hero ───── */
.hero .topo { position: absolute; left: var(--pad); top: 140px; }
.hero h1 { margin-top: 18px; }
.hero .acoes { display: flex; gap: 12px; margin-top: 40px; }
.hero .tabela { left: 352px; top: 556px; }
.hero .tabela2 { left: 548px; top: 556px; }
.hero .kraft { left: 340px; top: 700px; width: 238px; }
.hero .dra { left: 556px; top: 384px; width: 340px; z-index: 4; }
.hero .dra img { filter: saturate(.92) contrast(1.02); }
.hero .rodape-papel { left: 470px; top: 838px; width: 520px; z-index: 5; }
.hero .ficha { left: 838px; top: 566px; width: 318px; z-index: 2; background: #FAF7F3; box-shadow: 0 0 0 1px rgba(46, 44, 42, .07); padding: 12px 14px 60px; font-family: var(--f-texto); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(46, 44, 42, .55); }
.ficha .lin { display: grid; grid-template-columns: 1.1fr 1fr; border-bottom: 1px solid rgba(46, 44, 42, .2); }
.ficha .lin > div { padding: 7px 8px 9px; border-right: 1px solid rgba(46, 44, 42, .2); }
.ficha .lin > div:last-child { border-right: 0; }
.ficha .cx { display: flex; gap: 7px; white-space: nowrap; margin-top: 6px; text-transform: none; letter-spacing: 0; font-size: 9.5px; }
.ficha .cx i { display: inline-block; width: 9px; height: 9px; border: 1px solid rgba(46, 44, 42, .45); margin-right: 3px; vertical-align: -1px; }
.ficha .cx i.x { background: linear-gradient(45deg, transparent 44%, var(--fg) 45% 55%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--fg) 45% 55%, transparent 56%); }
.hero .bilhete { left: 905px; top: 664px; width: 360px; z-index: 3; }
.hero .bilhete .assin { position: absolute; left: 40px; top: 30px; font-size: 52px; color: #2E2C2A; white-space: nowrap; transform: rotate(-4deg); }
.hero .bilhete .quem { position: absolute; left: 46px; top: 112px; font-family: var(--f-titulo); font-size: 14.5px; line-height: 1.35; color: #4A4744; }
.assin-anim { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s cubic-bezier(.65, 0, .35, 1) 1.1s; }
.in .assin-anim { clip-path: inset(0 0 0 0); }
.hero .selo { left: 1188px; top: 548px; width: 112px; height: 112px; z-index: 6; }
.selo svg { width: 100%; height: 100%; animation: gira 28s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.hero .metrica { left: 140px; top: 602px; width: 362px; z-index: 6; background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px rgba(46, 44, 42, .07), 0 18px 40px -24px rgba(46, 44, 42, .35); padding: 22px 22px 18px; pointer-events: auto; }
.metrica .rot { font-size: 15px; font-weight: 500; }
.metrica .linha { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 18px; height: 70px; }
.metrica .val { font-family: var(--f-titulo); font-size: 48px; letter-spacing: -.03em; line-height: 1; }
.metrica .leg { font-size: 13px; color: var(--muted); margin-top: 6px; }
.metrica .troca { position: relative; height: 82px; flex: 1; }
.metrica .item { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); filter: blur(3px); transition: opacity .5s var(--ease), transform .6s var(--ease), filter .5s var(--ease); }
.metrica .item.on { opacity: 1; transform: none; filter: none; }
.metrica .grafico { width: 150px; height: 64px; flex: none; }
.metrica .grafico path { transition: d .8s var(--ease); }
.metrica .base { margin-top: 14px; display: flex; gap: 6px; align-items: center; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(46, 44, 42, .07); padding: 9px 12px; font-size: 13px; color: var(--muted); }
.metrica .base b { color: var(--fg); font-weight: 600; }
.metrica .pts { margin-left: auto; display: flex; gap: 4px; }
.metrica .pts i { width: 5px; height: 5px; border-radius: 9px; background: rgba(46, 44, 42, .18); transition: background .3s, width .4s var(--ease); }
.metrica .pts i.on { background: var(--fg); width: 14px; }

/* ───── 02 Statement + ficha ───── */
.stmt .frase { position: absolute; left: var(--pad); top: 84px; width: 1040px; font-size: 56px; line-height: 1.07; }
.stmt .retrato { left: var(--pad); top: 420px; width: 500px; height: 452px; border-radius: 10px; overflow: hidden; }
.stmt .retrato .fundo { position: absolute; left: -40px; top: 130px; width: 600px; }
.stmt .retrato .pessoa { position: absolute; left: 92px; top: 18px; width: 330px; }
.stmt .tabela { left: 362px; top: 352px; z-index: 0; }
.stmt .lilas { left: 958px; top: 344px; width: 410px; z-index: 1; }
.stmt .bolinha { left: 1060px; top: 362px; width: 120px; height: 120px; border-radius: 50%; background: var(--cafe); z-index: 2; clip-path: inset(0 0 60px 0); }
.stmt .marca { left: 1262px; top: 378px; width: 52px; height: 52px; border-radius: 8px; background: var(--cafe); z-index: 5; display: grid; place-items: center; box-shadow: 0 0 0 5px #fff; }
.stmt .marca svg { width: 26px; height: 26px; }
.painel { left: 628px; top: 422px; width: 724px; height: 480px; z-index: 3; background: #fff; display: grid; grid-template-columns: 46px 1fr; box-shadow: 0 0 0 1px rgba(46, 44, 42, .06); }
.painel .trilho { border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 22px; }
.painel .trilho svg { width: 18px; height: 18px; color: #AEA69F; }
.painel .trilho svg:first-child { color: var(--fg); }
.painel .cab { display: flex; gap: 8px; align-items: center; height: 54px; padding: 0 22px; border-bottom: 1px solid var(--line); font-size: 15px; }
.painel .cab .dot { width: 4px; height: 4px; border-radius: 9px; background: var(--lilas); }
.painel .cab .sep { width: 1px; height: 16px; background: var(--line); margin: 0 6px; }
.painel .cab .fraco { color: #A39B94; }
.painel .corpo { display: grid; grid-template-columns: 262px 1fr; }
.painel .dados { padding: 20px 22px; border-right: 1px solid var(--line); }
.painel h4 { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.painel .kv { display: flex; justify-content: space-between; font-size: 13px; padding: 8px 0; }
.painel .kv span:first-child { color: #978F88; }
.painel .kv span:last-child { font-weight: 500; }
.painel .kv + h4 { margin-top: 18px; }
.painel .obs { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: #88807A; line-height: 1.5; }
.painel .tl { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.tl .ev { display: grid; grid-template-columns: 28px 1fr; gap: 0 12px; transition: opacity .5s var(--ease); opacity: .5; }
.tl .ev.on { opacity: 1; }
.tl .ic { width: 28px; height: 28px; border-radius: 6px; background: var(--lilas-claro); display: grid; place-items: center; color: #5E5852; }
.tl .ic svg { width: 15px; height: 15px; }
.tl .t { font-size: 14px; line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl .t b { font-weight: 500; }
.tl .t .p { display: inline-block; width: 4px; height: 4px; border-radius: 9px; background: var(--lilas); vertical-align: middle; margin: 0 6px; }
.tl .t .fraco { color: #A39B94; margin-right: 6px; }
.tl .nota { grid-column: 2; margin-top: 6px; background: #F8F5F1; border-radius: 6px; padding: 10px 14px; font-size: 12.5px; line-height: 1.5; color: #57524D; transition: background .5s var(--ease), box-shadow .5s var(--ease); }
.tl .ev.on .nota { background: #F1ECE6; box-shadow: inset 0 0 0 1px rgba(179, 170, 163, .7); }
.tl .nota small { display: block; color: #A39B94; font-size: 11.5px; margin-top: 4px; }

/* ───── 03 Procedimentos ───── */
.proc .esq { position: absolute; left: var(--pad); top: 92px; width: 470px; }
.proc .esq h2 { margin-top: 18px; font-size: 46px; }
.proc .quadro { position: absolute; left: var(--pad); top: 296px; width: 430px; height: 400px; }
.proc .quadro .papel { position: absolute; left: -22px; top: -34px; width: 300px; transform: rotate(-4deg); }
.proc .fotos { position: absolute; left: 30px; top: 0; width: 400px; height: 330px; border-radius: 10px; overflow: hidden; transform: rotate(1.2deg); box-shadow: 0 22px 40px -28px rgba(46, 44, 42, .5); }
.proc .fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 1.4s var(--ease); }
.proc .fotos img.on { opacity: 1; transform: none; }
.proc .legenda { position: absolute; left: 30px; top: 356px; width: 420px; height: 90px; }
.proc .legenda p { position: absolute; inset: 0; font-size: 16px; line-height: 1.5; color: #57524D; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.proc .legenda p.on { opacity: 1; transform: none; }
.proc .acao { position: absolute; left: calc(var(--pad) + 30px); top: 770px; display: flex; gap: 12px; }
.proc .lista { position: absolute; left: 648px; right: var(--pad); top: 70px; }
.proc .item { display: grid; grid-template-columns: 54px 1fr auto; align-items: baseline; padding: 20px 0 19px; border-bottom: 1px solid var(--line); cursor: pointer; }
.proc .item:first-child { border-top: 1px solid var(--line); }
.proc .item .n { font-family: var(--f-mono); font-size: 12px; color: #B2AAA3; transform: translateY(-4px); }
.proc .item .nome { font-family: var(--f-titulo); font-size: 31px; letter-spacing: -.02em; line-height: 1.12; transition: color .4s var(--ease), transform .5s var(--ease); color: rgba(46, 44, 42, .38); }
.proc .item .meta { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.proc .item .script { font-size: 19px; color: rgba(46, 44, 42, .42); transition: color .4s; }
.proc .item .tempo { font-size: 13px; color: #A59D96; }
.proc .item .seta { width: 34px; height: 34px; border-radius: 99px; display: grid; place-items: center; background: var(--lilas); opacity: 0; transform: translateX(-8px) scale(.94); transition: opacity .4s var(--ease), transform .5s var(--ease); align-self: center; }
.proc .item .seta svg { width: 15px; height: 15px; }
.proc .item.on .nome { color: var(--fg); transform: translateX(4px); }
.proc .item.on .script { color: #6E6660; }
.proc .item.on .seta { opacity: 1; transform: none; }

/* ───── 04 Números ───── */
.nums .mancha { left: -70px; top: 70px; width: 320px; }
.nums .tit { position: absolute; left: 300px; top: 150px; font-size: 40px; line-height: 1.1; width: 300px; }
.nums .nota { position: absolute; left: 300px; top: 260px; font-size: 24px; color: #6E6660; transform: rotate(-3deg); }
.nums .lista { position: absolute; left: 650px; right: var(--pad); top: 130px; }
.nums .lin { display: grid; grid-template-columns: 365px 1fr; align-items: center; height: 158px; position: relative; }
.nums .lin::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(46, 44, 42, .12) 12%, rgba(46, 44, 42, .12) 88%, transparent); }
.nums .lin:last-child::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(46, 44, 42, .12) 12%, rgba(46, 44, 42, .12) 88%, transparent); }
.nums .val { font-family: var(--f-titulo); font-size: 68px; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.nums .rot { font-size: 17px; line-height: 1.5; color: #57524D; max-width: 320px; }

/* ───── 05 Primeira consulta (escuro) ───── */
.consulta { background: var(--cafe); color: var(--creme); }
.consulta .tit { position: absolute; left: var(--pad); top: 118px; width: 600px; font-size: 54px; line-height: 1.08; }
.consulta .passos { position: absolute; left: var(--pad); top: 430px; display: flex; gap: 8px; }
.consulta .passo { width: 128px; padding-top: 14px; font-size: 13.5px; color: rgba(244, 242, 239, .45); position: relative; cursor: pointer; transition: color .3s; }
.consulta .passo b { display: block; font-family: var(--f-mono); font-weight: 400; font-size: 11px; margin-bottom: 3px; }
.consulta .passo::before, .consulta .passo i { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(244, 242, 239, .14); }
.consulta .passo i { background: var(--lilas); transform-origin: left; transform: scaleX(0); }
.consulta .passo.feito i { transform: scaleX(1); }
.consulta .passo.on { color: var(--creme); }
.consulta .passo.on i { animation: enche var(--t, 4200ms) linear forwards; }
@keyframes enche { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.consulta .bloco { position: absolute; left: var(--pad); top: 540px; width: 560px; height: 260px; }
.consulta .bl { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none; }
.consulta .bl.on { opacity: 1; transform: none; pointer-events: auto; }
.consulta .bl .eb { font-size: 14px; color: rgba(244, 242, 239, .55); }
.consulta .bl h3 { font-size: 36px; margin-top: 12px; }
.consulta .bl p { font-size: 17px; line-height: 1.55; color: rgba(244, 242, 239, .78); margin-top: 12px; max-width: 520px; }
.consulta .bloco .btn { position: absolute; left: 0; top: 214px; }
.consulta .linha-base { position: absolute; left: 140px; right: 140px; bottom: 58px; height: 1px; background: linear-gradient(90deg, transparent, rgba(244, 242, 239, .12), transparent); }
.consulta .card { position: absolute; left: 812px; top: 392px; width: 452px; padding: 22px 22px 24px; border-radius: 10px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(244, 242, 239, .08), 0 40px 80px -40px rgba(0, 0, 0, .6); }
.consulta .glow { position: absolute; left: 760px; top: 260px; width: 560px; height: 460px; background: radial-gradient(closest-side, rgba(179, 170, 163, .13), transparent); filter: blur(10px); }
.consulta .card .c1 { display: flex; justify-content: space-between; align-items: center; }
.consulta .card .nm { font-family: var(--f-titulo); font-size: 21px; }
.consulta .card .st { font-size: 12px; font-weight: 500; padding: 4px 9px; border-radius: 5px; background: rgba(179, 170, 163, .16); color: #E6E0DA; box-shadow: inset 0 0 0 1px rgba(179, 170, 163, .3); }
.consulta .card .dt { display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 12px; padding: 4px 8px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(244, 242, 239, .18); color: rgba(244, 242, 239, .85); }
.consulta .card .dt svg { width: 12px; height: 12px; }
.consulta .card .in { margin-top: 26px; border-radius: 7px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(244, 242, 239, .06); padding: 6px 16px; }
.consulta .card .kv { display: flex; justify-content: space-between; padding: 12px 0; font-size: 13.5px; border-bottom: 1px solid rgba(244, 242, 239, .06); }
.consulta .card .kv:last-child { border: 0; }
.consulta .card .kv span:first-child { color: rgba(244, 242, 239, .45); }
.consulta .card .troca { transition: opacity .35s var(--ease), filter .35s var(--ease); }
.consulta .card.mud .troca { opacity: 0; filter: blur(3px); }
.consulta .card .rod { margin-top: 18px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(244, 242, 239, .5); }
.consulta .card .rod .bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(244, 242, 239, .1); overflow: hidden; }
.consulta .card .rod .bar i { display: block; height: 100%; background: var(--lilas); transform-origin: left; transition: transform .8s var(--ease); }
.consulta .dra-mini { position: absolute; left: 812px; top: 262px; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--lilas); z-index: 2; box-shadow: 0 0 0 6px var(--cafe); }
.consulta .dra-mini img { width: 100%; margin-top: 8px; }

/* ───── 06 Manifesto ───── */
.mani .tab { left: 210px; top: 36px; }
.mani .termo { left: 1058px; top: 0; width: 382px; z-index: 1; }
.mani .termo .doc { background: #E9E1D8; font-family: var(--f-titulo); font-size: 15px; color: rgba(46, 44, 42, .55); clip-path: polygon(0 0, 100% 0, 100% 100%, 92% 97%, 80% 99%, 66% 94%, 52% 96%, 40% 90%, 28% 88%, 18% 80%, 9% 76%, 4% 64%, 0 62%); }
.mani .termo .r { display: grid; grid-template-columns: 1fr 1.2fr; border-bottom: 1px solid rgba(46, 44, 42, .35); }
.mani .termo .r span { padding: 8px 12px; }
.mani .termo .r span:first-child { border-right: 1px solid rgba(46, 44, 42, .35); }
.mani .termo .tx { padding: 14px 40px 92px 120px; line-height: 1.55; font-size: 14px; }
.mani h2 { position: absolute; z-index: 4; left: 0; right: 0; top: 176px; text-align: center; font-size: 70px; }
.mani .circ { left: 645px; top: 290px; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background: var(--lilas); z-index: 2; }
.mani .circ img { position: absolute; left: -62px; top: 2px; width: 196px; max-width: none; transform: scaleX(-1); }
.mani .circ::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(46, 44, 42, .08); }
.mani .circ .meia { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; background: #E9E1D8; clip-path: polygon(22% 0, 100% 0, 100% 100%, 30% 100%, 18% 88%, 28% 76%, 14% 62%, 26% 50%, 12% 38%, 24% 24%, 12% 12%); padding: 30px 0 0 26px; font-family: var(--f-mono); font-size: 7px; line-height: 1.5; color: rgba(46, 44, 42, .55); white-space: pre; }
.mani .cols { position: absolute; left: 225px; right: 225px; top: 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.mani .cols p { font-size: 18px; line-height: 1.6; color: #4A4642; }
.mani .cols p + p { margin-top: 22px; }
.mani .cols .frase { font-family: var(--f-titulo); font-size: 27px; line-height: 1.25; color: var(--fg); letter-spacing: -.015em; margin-top: 30px; }
.mani .ass { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.mani .ass .assin { font-size: 50px; color: var(--fg); white-space: nowrap; }
.mani .ass small { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* ───── 07 Depoimentos ───── */
.dep .rotulo { position: absolute; left: var(--pad); top: 70px; font-size: 30px; line-height: 1; transform: rotate(-4deg); }
.dep .quotes { position: absolute; left: 300px; top: 200px; width: 780px; height: 440px; }
.dep .q { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease), transform .8s var(--ease), filter .6s var(--ease); transform: translateY(10px); filter: blur(4px); }
.dep .q.on { opacity: 1; transform: none; filter: none; }
.dep .q p { font-family: var(--f-titulo); font-size: 50px; line-height: 1.1; letter-spacing: -.025em; }
.dep .q .quem { display: flex; align-items: baseline; gap: 14px; margin-top: 34px; }
.dep .q .quem .script { font-size: 30px; }
.dep .q .quem small { font-size: 14px; color: var(--muted); }
.dep .estrelas { display: flex; gap: 3px; margin-top: 18px; color: var(--fg); }
.dep .estrelas svg { width: 16px; height: 16px; }
.dep .rodape { position: absolute; left: 300px; top: 740px; display: flex; align-items: center; gap: 28px; }
.dep .dots { display: flex; gap: 8px; }
.dep .dots button { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--line); background: var(--lilas-claro); opacity: .45; transition: opacity .3s, box-shadow .3s; padding: 0; }
.dep .dots button.on { opacity: 1; box-shadow: 0 0 0 2px var(--fg); }
.dep .dots img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.dep .google { font-size: 15px; color: #57524D; }
.dep .google b { font-weight: 600; color: var(--fg); }
.dep .papel { left: 1040px; top: 190px; width: 470px; z-index: 0; }
.dep .papel img { width: 100%; }
.dep .papel .txt { position: absolute; left: 40px; top: 46px; width: 300px; font-family: var(--f-titulo); font-size: 15px; line-height: 1.6; color: rgba(46, 44, 42, .5); }
.dep .pessoas { position: absolute; left: 1060px; top: 300px; width: 330px; height: 600px; z-index: 2; }
.dep .pessoas img { position: absolute; left: 50%; bottom: 0; height: 540px; width: auto; max-width: none; transform: translateX(-50%) translateY(14px); opacity: 0; transition: opacity .7s var(--ease), transform .9s var(--ease); }
.dep .pessoas img.on { opacity: 1; transform: translateX(-50%); }

/* ───── 08 FAQ ───── */
.faq .mancha { left: -60px; top: 330px; width: 330px; }
.faq .esq { position: absolute; left: 300px; top: 66px; width: 400px; }
.faq .esq h2 { margin-top: 18px; font-size: 54px; line-height: 1.04; }
.faq .esq .btn { margin-top: 34px; }
.faq .aviso { position: absolute; left: 300px; top: 770px; width: 380px; font-size: 13.5px; line-height: 1.55; color: #958D86; }
.faq .lista { position: absolute; left: 856px; right: var(--pad); top: 40px; }
.faq .lin { position: relative; padding: 26px 0 25px; }
.faq .lin::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(46, 44, 42, .12) 10%, rgba(46, 44, 42, .12) 90%, transparent); }
.faq .lin:last-child::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(46, 44, 42, .12) 10%, rgba(46, 44, 42, .12) 90%, transparent); }
.faq .lin .r { font-family: var(--f-titulo); font-size: 52px; letter-spacing: -.03em; line-height: 1.05; margin-top: 10px; }
.faq .lin p { font-size: 16.5px; line-height: 1.5; color: #77706A; margin-top: 10px; max-width: 470px; }

/* ───── 09 Contato + rodapé (escuro) ───── */
.contato { background: var(--cafe); color: var(--creme); }
.contato .card { position: absolute; left: 24px; right: 24px; top: 24px; height: 620px; border-radius: 14px; overflow: hidden; background: var(--cafe-2); }
.contato .card .foto { position: absolute; right: 0; top: 0; bottom: 0; width: 62%; background-size: cover; background-position: center; }
.contato .card .foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--cafe-2) 0%, rgba(74, 71, 68, .55) 30%, rgba(74, 71, 68, 0) 62%), linear-gradient(0deg, rgba(46, 44, 42, .35), transparent 40%); }
.contato .card .papel { position: absolute; left: -30px; bottom: -40px; width: 300px; transform: rotate(8deg); opacity: .95; }
.contato .txt { position: absolute; left: 64px; top: 150px; width: 640px; }
.contato .chip { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(244, 242, 239, .85); }
.contato .chip span:first-child { padding: 5px 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(244, 242, 239, .4); color: var(--creme); }
.contato .chip span:first-child::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 9px; background: #9BE3A8; margin-right: 7px; vertical-align: 1px; animation: pulsa 2.4s var(--ease) infinite; }
.contato .chip span.is-fechado:first-child::before { background: #E9A07E; }
@keyframes pulsa { 50% { opacity: .35; } }
.contato h2 { font-size: 62px; margin-top: 26px; line-height: 1.04; }
.contato .sub { font-size: 18px; line-height: 1.5; color: rgba(244, 242, 239, .8); margin-top: 18px; max-width: 520px; }
.contato .acoes { display: flex; gap: 12px; margin-top: 34px; }
.contato .info { position: absolute; left: 88px; right: var(--pad); top: 690px; display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr 1fr; gap: 32px; }
.contato .info .lb { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 242, 239, .45); margin-bottom: 10px; }
.contato .info .vl { font-size: 15.5px; line-height: 1.5; color: rgba(244, 242, 239, .9); }
.contato .info .logo { color: var(--creme); font-size: 28px; }
.contato .info .logo-sub { font-size: 14px; color: rgba(244, 242, 239, .55); margin-top: 8px; line-height: 1.5; }
.contato .base { position: absolute; left: 88px; right: var(--pad); bottom: 34px; display: flex; justify-content: space-between; font-size: 13px; color: rgba(244, 242, 239, .42); padding-top: 18px; border-top: 1px solid rgba(244, 242, 239, .08); }
@media (hover: hover) and (pointer: fine) { .contato .info a.vl:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } }
.consulta .quem-recebe { position: absolute; left: 924px; top: 292px; font-size: 21px; line-height: 1.3; color: rgba(244, 242, 239, .8); transform: rotate(-3deg); }

/* ═════════ Página única (Boldness Clinic) ═════════ */
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { background: var(--bg); }
.sec { height: auto; min-height: 0; padding: 120px 0; overflow: clip; }
.sec.hero { padding: 0; }
.sec.mani { padding-top: 0; }
.sec.contato { padding: 0; }
/* palco: o layout do template (1440 de largura), recortado em cima (--t) e com altura útil (--h) */
.stage { position: relative; width: 1440px; height: calc(var(--h) * 1px); margin: 0 auto; zoom: var(--s, 1); }
.cv { position: absolute; left: 0; top: calc(var(--t) * -1px); width: 1440px; height: 900px; }
em { font-style: italic; }
.hero h1 em { font-style: italic; font-weight: 300; }

/* entrada das sections quando aparecem (a .vis vem do site.js) */
.sec:not(.vis) .rv { opacity: 0; transform: translateY(16px); }
.sec:not(.vis) .colagem .rv { transform: translateY(26px) rotate(var(--rot, 0deg)) scale(.97); }
.sec:not(.vis) .assin-anim { clip-path: inset(0 100% 0 0); }

/* logo composto (monograma + nome, como no Instagram) */
.marca-bc { display: inline-flex; align-items: center; gap: 12px; font-family: 'Cormorant Garamond', 'Newsreader', serif; color: inherit; line-height: 1; }
.marca-bc .mono-bc { font-size: 36px; font-weight: 400; letter-spacing: -.09em; padding-right: 3px; }
.marca-bc .barra { width: 1px; align-self: stretch; background: currentColor; opacity: .55; margin: 2px 0; }
.marca-bc .nm { display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 500; letter-spacing: .09em; }
.marca-bc .nm small { font-family: var(--f-texto); font-size: 7.5px; font-weight: 500; letter-spacing: .32em; opacity: .7; margin-top: 3px; }

/* nav fixo */
.hdr { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.hdr-bar { pointer-events: auto; display: flex; align-items: center; gap: 24px; width: 100%; max-width: 1440px; height: 84px; padding: 0 var(--pad); margin-top: 0; border-radius: 0; color: var(--fg); background: transparent; transition: max-width .6s var(--ease), height .5s var(--ease), margin-top .5s var(--ease), padding .5s var(--ease), border-radius .5s var(--ease), background-color .4s, box-shadow .4s, color .3s; }
.hdr.mini .hdr-bar { max-width: 1264px; height: 64px; margin-top: 12px; padding: 0 12px 0 22px; border-radius: 12px; background: rgba(246, 243, 239, .82); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 0 0 1px rgba(46, 44, 42, .08), 0 18px 40px -26px rgba(46, 44, 42, .45); }
.hdr.mini.escuro .hdr-bar { background: rgba(63, 61, 59, .78); color: var(--creme); box-shadow: 0 0 0 1px rgba(244, 242, 239, .1), 0 18px 40px -26px rgba(0, 0, 0, .6); }
.hdr .marca-bc .mono-bc { font-size: 34px; }
.hdr-links { display: flex; gap: 32px; margin-left: auto; font-size: 15px; }
.hdr-dir { margin-left: 36px; display: flex; align-items: center; gap: 18px; font-size: 15px; }
.hdr .btn { height: 42px; }
.hdr.mini.escuro .btn-esc { background: var(--creme); color: var(--cafe); }
.hdr-menu { display: none; }
.menu-painel { display: none; }
@media (hover: hover) and (pointer: fine) { .hdr-links a { transition: opacity .2s; } .hdr-links:hover a:not(:hover) { opacity: .55; } .hdr-dir .ig:hover { opacity: .6; } }
.btn-esc svg, .btn-claro svg { width: 17px; height: 17px; }

/* WhatsApp flutuante (só celular) */
.wa-float { display: none; }

/* hero */
.hero .topo { top: 156px; }
.hero h1 { font-size: 66px; line-height: 1.04; }
.hero .bilhete .assin { color: #2E2C2A; font-size: 54px; left: 36px; top: 34px; }
.hero .bilhete .quem { color: #4A4744; }
.hero .metrica { pointer-events: auto; }
.hero .dra { left: 560px; top: 368px; width: 360px; }
.selo text { font-family: Inter, sans-serif; }

/* statement */
.stmt .retrato .pessoa { left: 86px; top: 22px; width: 330px; }
.stmt .marca { font-family: 'Cormorant Garamond', serif; color: var(--creme); font-size: 24px; letter-spacing: -.08em; }
.tl .ic { color: #57524D; }

/* procedimentos */
.proc .esq h2 { font-size: 46px; }
.proc .item .tempo { font-size: 13px; }

/* números */
.nums .val { min-width: 2ch; }

/* manifesto */
.mani .circ { background: var(--bege); }
.mani .circ img { left: -40px; top: 6px; width: 200px; transform: none; }

/* depoimentos: card do Google no lugar da foto da paciente */
.dep .q p { font-size: 44px; line-height: 1.12; }
.dep .dots button { display: grid; place-items: center; font-family: var(--f-titulo); font-size: 15px; color: var(--fg); background: var(--lilas-claro); }
.dep .gcard { position: absolute; left: 1090px; top: 300px; width: 290px; z-index: 2; background: #fff; border-radius: 10px; padding: 26px 26px 22px; box-shadow: 0 0 0 1px rgba(46, 44, 42, .07), 0 30px 60px -34px rgba(46, 44, 42, .5); transform: rotate(2deg); }
.dep .gcard .g { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.dep .gcard .g svg { width: 18px; height: 18px; }
.dep .gcard .nota5 { font-family: var(--f-titulo); font-size: 92px; letter-spacing: -.04em; line-height: 1; margin-top: 14px; }
.dep .gcard .estrelas { margin-top: 10px; }
.dep .gcard .qtd { font-size: 14px; color: #57524D; margin-top: 10px; }
.dep .gcard .temas { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.dep .gcard .temas p { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #958D86; }
.dep .gcard .temas ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dep .gcard .temas li { font-size: 13px; padding: 4px 9px; border-radius: 99px; background: var(--lilas-claro); color: #4A4642; }
.dep .papel { left: 1040px; top: 210px; }

/* contato */
.contato .card .foto { background-position: 50% 18%; }
.contato .card .foto::after { background: linear-gradient(90deg, var(--cafe-2) 0%, rgba(74, 71, 68, .7) 28%, rgba(74, 71, 68, 0) 60%), linear-gradient(0deg, rgba(46, 44, 42, .3), transparent 40%); }
.contato .info .marca-bc { color: var(--creme); }
.contato .info { grid-template-columns: 1.15fr 1.1fr 1.25fr .85fr 1fr; }
.consulta .passo { text-align: left; }
.proc .desc-m { display: none; }
.contato .card { height: 596px; }
.contato .info { top: 652px; grid-template-columns: 1fr 1.3fr 1.4fr .8fr .9fr; }
.contato .card .foto::after { background: linear-gradient(90deg, var(--cafe-2) 0%, rgba(74, 71, 68, .7) 26%, rgba(74, 71, 68, 0) 55%); }
.hdr-links a, .hdr-dir a { white-space: nowrap; }
@media (max-width: 1320px) { .hdr-links { gap: 24px; } .hdr-dir { margin-left: 28px; } .hdr-dir .ig { display: none; } }