/* --- ajuste2 --- */
/* Ajuste do Gubs: acentos da marca, abertura curta, explicações e perfil. */
.titulo em{color:var(--rosa);font-style:italic}
.servicos .titulo em,.onde .titulo em{color:var(--rosa2)}
.destaque{color:var(--rosa);font-weight:650}
.hero .destaque{color:var(--rosa2)}
.hero h1 span:nth-child(3) i{color:var(--rosa2)}
.verbo-hero{display:block;background:none;color:inherit;border:0;padding:0;text-align:left;font:inherit;letter-spacing:inherit;cursor:pointer;line-height:inherit}
.verbo-hero:hover{color:var(--rosa2)}
.verbo-hero:focus-visible{outline-offset:-3px}
.hero h1 span i{transition:transform .65s cubic-bezier(.2,.8,.2,1)}
.hero h1 span:nth-child(2) i{transition-delay:.13s}
.hero h1 span:nth-child(3) i{transition-delay:.26s}
.foto-hero img{transform:none;transition:none}
.motion .foto-hero img{animation:retrato-entrada 1.25s cubic-bezier(.2,.8,.2,1) both}
.traco path{transition:stroke-dashoffset .85s cubic-bezier(.6,0,.2,1) .25s}
.hero h1 span:last-child{position:relative;padding-bottom:.22em}
.hero h1 span:last-child::after{content:"";position:absolute;left:0;bottom:.03em;width:2.3em;height:2px;background:var(--rosa2);transform-origin:left;transform:scaleX(1)}
.motion:not(.pronto) .hero h1 span:last-child::after{transform:scaleX(0)}
.motion .hero h1 span:last-child::after{transition:transform .5s ease .6s}
.linha-tempo .foto-atual img{object-position:70% center}
.verbo-servico{appearance:none;background:none;border:0;color:var(--rosa2);padding:0;text-align:left;font:inherit;letter-spacing:inherit;cursor:pointer;max-width:100%}
.verbo-servico>span{display:block;font:600 14px/1.5 "Segoe UI",Arial,sans-serif;letter-spacing:0;color:#e3e7f2;margin-top:18px}
.verbo-servico>span span{display:inline-block;margin-left:6px;transition:transform .2s}
.verbo-servico:hover>span span{transform:translate(3px,-3px)}
.cap h3{font-size:clamp(42px,10vw,80px);overflow-wrap:anywhere}
button.item{width:100%;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.servicos-nota{font-size:15px;color:#d5dae5;margin:22px 0 0}
.servico-dialog{border:1px solid #c6caeb;border-radius:22px;padding:0;width:min(880px,calc(100% - 28px));max-height:calc(100dvh - 36px);color:var(--texto);background:var(--creme);overscroll-behavior:contain;box-shadow:0 24px 100px #0006}
.servico-dialog::backdrop{background:#0a0e1aba;backdrop-filter:blur(7px)}
.servico-dialog[open]{animation:painel-entrada .28s cubic-bezier(.2,.8,.2,1)}
.dialog-fechar{position:sticky;top:14px;float:right;margin:14px 14px -58px 0;z-index:2;border:1px solid #cfd5e1;border-radius:50%;width:44px;height:44px;background:#fff;color:#353d60;font:500 28px/1 Arial,sans-serif;cursor:pointer;box-shadow:0 2px 12px #1d243d1f}
.dialog-layout{display:grid;grid-template-columns:.85fr 1.15fr;min-width:0}
.dialog-foto{margin:0;background:#eff1f6}
.dialog-foto img{width:100%;height:100%;min-height:390px;object-fit:cover;object-position:68% center}
.dialog-foto:has([data-formato="paisagem"]){display:flex;align-items:center;justify-content:center;padding:22px;background:#353d60}
.dialog-foto img[data-formato="paisagem"]{height:auto;min-height:0;object-fit:contain;border-radius:10px}
.dialog-texto{padding:52px 32px 30px;min-width:0}
.dialog-texto h2{font-size:clamp(30px,5vw,44px);line-height:1.12;color:var(--rosa);overflow-wrap:anywhere}
.dialog-texto h3{font:700 16px/1.4 "Segoe UI",Arial,sans-serif;margin:24px 0 7px}
.dialog-texto p{font-size:16px;line-height:1.7;margin:10px 0;color:var(--suave)}
.dialog-texto .dialog-nota{font-size:13px;border-top:1px solid var(--linha);padding-top:16px;margin-top:24px}
.dialog-texto .btn{margin-top:16px;line-height:1.4;padding:14px 22px}
html:has(.servico-dialog[open]){overflow:hidden}
.instagram-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:center;margin-top:40px}
.instagram-layout .instagram-grade{margin-top:0}
.perfil-celular{width:min(100%,320px);margin:auto;padding:9px;background:#1d243d;border:2px solid #515a82;border-radius:42px;box-shadow:0 28px 55px -25px #1d243d66;position:relative}
.perfil-tela{border-radius:31px;overflow:hidden;background:#fff;color:#1d243d;padding-bottom:22px;font:14px/1.5 "Segoe UI",Arial,sans-serif}
.perfil-ilha{width:82px;height:20px;background:#1d243d;border-radius:0 0 16px 16px;margin:0 auto 16px}
.perfil-barra{display:flex;align-items:center;justify-content:space-between;padding:0 17px 16px;font-size:15px;font-weight:700}
.perfil-barra>span{font-size:22px;font-weight:400}
.perfil-info{padding:0 17px 18px}
.perfil-avatar{width:68px;height:68px;border-radius:50%;padding:3px;border:2px solid var(--rosa);object-fit:cover;object-position:70% center;margin-bottom:12px}
.perfil-info b{display:block;font-size:15px;margin-bottom:4px}
.perfil-info p{margin:0;font-size:13px;line-height:1.65}
.perfil-info a{display:block;text-align:center;text-decoration:none;color:#fff;background:var(--rosa);padding:9px;border-radius:9px;font-size:13px;font-weight:700;margin-top:14px}
.perfil-abas{text-align:center;border-top:1px solid #dfe3ec;border-bottom:1px solid #dfe3ec;padding:11px;font-size:12px;color:#515a82}
.perfil-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.perfil-grade img{width:100%;aspect-ratio:1;object-fit:cover}
.perfil-legenda{text-align:center;margin:18px 0 0;font-size:13px;color:var(--suave)}
.zap-fixo:not(.on){visibility:hidden;pointer-events:none}
@keyframes retrato-entrada{from{transform:scale(1.045)}to{transform:scale(1)}}
@keyframes painel-entrada{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:859px){
 .instagram-layout{grid-template-columns:1fr;gap:40px}
 .dialog-layout{grid-template-columns:1fr}
 .dialog-foto img{height:190px;min-height:0;object-position:68% 38%}
 .dialog-foto:has([data-formato="paisagem"]){padding:0}
 .dialog-foto img[data-formato="paisagem"]{height:190px;object-fit:cover;border-radius:0}
 .dialog-texto{padding:26px 22px}
 .servico-dialog{max-height:calc(100dvh - 24px)}
 .dialog-texto h2{font-size:34px}
}

/* --- ajuste3 --- */
/* v3 (02/11): textos da Cheila, espaços para as fotos que ela vai mandar e polimento (skill unslop, CC BY 4.0, @heydamir).
   Identidade mantida: Bodoni Moda + Segoe UI, tinta, creme, rosa e ouro. */

/* Espaço reservado para foto: discreto, rotulado, sem imagem de banco nem IA */
.reserva{display:grid;place-items:center;margin:0;padding:16px;border:1px dashed #bcc4d4;border-radius:12px;background:#eff1f6;color:#737ba5;text-align:center;font:500 14px/1.45 "Segoe UI",Arial,sans-serif}
.reserva>span{max-width:24ch}
.reserva-quadrada{aspect-ratio:1;max-width:380px;margin-top:20px}
.reserva-larga{aspect-ratio:4/3;margin-top:24px;max-width:440px}
.servicos .reserva{background:rgba(251,252,254,.04);border-color:rgba(198,202,235,.32);color:#cdd3e0}

/* Quem sou */
.quem-sou{margin-top:24px;max-width:52ch}
.quem-sou p{margin:0 0 16px;color:var(--suave);font-size:17px;line-height:1.8}
.formacao-texto{margin-top:28px;padding:24px;border-radius:12px;background:#eff1f6}
.formacao-texto h4{margin:0 0 8px;font:600 18px/1.4 "Segoe UI",Arial,sans-serif;color:var(--texto)}
.formacao-texto p{margin:8px 0 0}

/* Serviços: menos espaço vazio acima do título */
.servicos{padding-top:64px}
.servicos .cap:first-of-type{margin-top:40px}

/* Realço: título, "Saiba mais" em destaque, montagem à esquerda, serviços à direita */
.cap-realco h3{color:var(--rosa2)}
.saiba-mais{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:20px;padding:0 20px;border:1px solid var(--rosa2);border-radius:22px;background:transparent;color:var(--rosa2);font:600 15px/1 "Segoe UI",Arial,sans-serif;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.saiba-mais svg{width:16px;height:16px;fill:currentColor}
.saiba-mais:hover{background:var(--rosa2);color:var(--tinta)}
.saiba-mais:active{transform:scale(.98)}
.montagem{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}
.montagem .reserva{aspect-ratio:4/5;font-size:13px}
.cap-realco .item{min-height:68px;padding:16px 20px}

/* Janela do serviço: corpo variável e foto reservada */
.dialog-texto .dialog-intro{color:var(--texto);font-size:17px}
.dialog-foto.tem-reserva,.dialog-foto.tem-montagem{display:grid;padding:20px;background:#eff1f6}
.dialog-foto.tem-reserva .reserva{min-height:360px;background:#fbfcfe}
.dialog-foto .montagem{margin:0;align-content:center}
.dialog-foto .montagem .reserva{background:#fbfcfe;font-size:12px;padding:8px}
.dialog-foto img{min-height:390px}

/* Unslop, polimento */
.assin small{font-size:12px;letter-spacing:.02em;text-transform:none;font-weight:500}
.btn{transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.btn:hover{transform:none;box-shadow:none;background:#2a4c80}
.btn.claro:hover{background:rgba(238,241,247,.1)}
.btn:active{transform:scale(.98)}
.item{transition:background-color .2s ease}
.item:hover{transform:none}
.item .seta{transition:background-color .2s ease,color .2s ease}
.rosa-box{background:rgba(198,202,235,.06);box-shadow:inset 0 0 0 1px rgba(198,202,235,.16)}
.faixa span::after{content:"·";font-size:22px;margin-left:44px;opacity:.6}
.compara .tag{font:600 12px/1 "Segoe UI",Arial,sans-serif;letter-spacing:.02em;text-transform:none;padding:6px 12px}
.verbo-servico>span svg{width:16px;height:16px;fill:currentColor;margin-left:8px;vertical-align:-2px;transition:transform .2s ease}
.verbo-servico:hover>span svg{transform:translateX(3px)}
.perfil-celular{box-shadow:0 24px 48px -24px rgba(10,14,26,.45)}
.instagram-grade img{transition:none}
.instagram-grade a:hover img{transform:none}
.instagram-grade a{transition:opacity .2s ease}
.instagram-grade a:hover{opacity:.88}

@media (min-width:860px){
  .servicos{padding-top:88px}
  .historia .fixo{position:static}
  .cap-realco{align-items:start}
  .montagem{max-width:460px}
}
@media (max-width:859px){
  .dialog-foto.tem-reserva .reserva{min-height:160px}
  .dialog-foto.tem-reserva,.dialog-foto.tem-montagem{padding:14px}
  .dialog-foto .montagem{grid-template-columns:repeat(4,1fr)}
  .dialog-foto .montagem .reserva{aspect-ratio:3/4;font-size:11px;padding:4px}
  .dialog-foto img{min-height:0}
}

/* --- ajuste4 --- */
/* v3 ajuste 1 (02/11): cores do espelho do studio (azul royal e preto sobre claro), resumo nos serviços e motion.
   Movimento segue o unslop (CC BY 4.0, @heydamir): uma curva, poucas durações, nada em loop. */
:root{
  --tinta:#1d243d;--tinta2:#353d60;--creme:#fbfcfe;--creme2:#eff1f6;--linha:#c6caeb;
  --texto:#1d243d;--suave:#515a82;--rosa:#365f9d;--rosa2:#c6caeb;--ouro:#c6caeb;
  --azul:#365f9d;--azul-escuro:#2a4c80;--azul-claro:#c6caeb;
  --curva:cubic-bezier(.22,1,.36,1);--rapido:160ms;--medio:220ms;--entrada:480ms;
}

/* Topo claro, nome no estilo do espelho até o logo redesenhado chegar */
.topo,.topo.solido{background:rgba(251,252,254,.94);color:var(--texto);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(53,61,96,.08)}
.assin{font:italic 600 24px/1 "Bodoni Moda",Georgia,serif;color:var(--azul)}
.assin em{font-style:italic;color:var(--texto);font-weight:500;font-size:.78em;margin-left:4px}
.assin small{color:var(--suave);opacity:1;margin-top:5px;font-size:11.5px}
.topo nav a{transition:color var(--rapido) var(--curva)}
.topo nav a:hover{color:var(--azul)}

/* Capa clara: preto e azul sobre claro, como no espelho */
.hero{background:var(--creme);color:var(--texto)}
.hero .ano{color:var(--azul)}
.hero h1 span:nth-child(3) i,.hero .destaque{color:var(--azul)}
.verbo-hero:hover{color:var(--azul)}
.hero h1 span:last-child::after{background:var(--azul)}
.hero .sub{color:var(--suave)}
.hero .sub b{color:var(--texto)}
.hero .btn.claro{color:var(--texto);box-shadow:inset 0 0 0 1px rgba(53,61,96,.22)}
.hero .btn.claro:hover{background:rgba(54,95,157,.07);box-shadow:inset 0 0 0 1px var(--azul);color:var(--azul)}
.nota{color:var(--suave)}
.nota b{color:var(--texto)}
.nota .est{color:var(--azul)}
.hero :focus-visible{outline-color:var(--azul)}
.foto-hero::after{background:linear-gradient(180deg,transparent 62%,rgba(10,14,26,.78))}
.traco path{stroke:var(--azul-claro)}

/* Botões: só cor e uma leve pressão */
.btn{transition:background-color var(--rapido) var(--curva),color var(--rapido) var(--curva),box-shadow var(--rapido) var(--curva),transform var(--rapido) var(--curva)}
.btn:hover{background:var(--azul-escuro)}
.btn.claro:hover{background:rgba(238,241,247,.1)}
.btn svg{transition:transform var(--rapido) var(--curva)}
.btn:hover svg{transform:translateX(2px)}
.btn:active,.saiba-mais:active,.item:active{transform:scale(.98)}

/* Serviços: resumo antes do clique */
.item{align-items:center;transition:background-color var(--rapido) var(--curva),box-shadow var(--rapido) var(--curva),transform var(--rapido) var(--curva)}
.item:hover{background:#515a82;box-shadow:inset 0 0 0 1px rgba(198,202,235,.22)}
.item b{font-size:17px}
.item small{color:#c6caeb;font-size:14.5px;line-height:1.55;margin-top:6px;max-width:52ch}
.item .seta{background:rgba(198,202,235,.12);color:var(--azul-claro);transition:background-color var(--rapido) var(--curva),color var(--rapido) var(--curva),transform var(--rapido) var(--curva)}
.item:hover .seta{background:var(--azul);color:#fff;transform:translateX(3px)}
.cap-realco .item{min-height:0;padding:18px 20px}
.saiba-mais{transition:background-color var(--rapido) var(--curva),color var(--rapido) var(--curva),transform var(--rapido) var(--curva)}
.rosa-box b{color:var(--azul-claro)}

/* Janela do serviço: frase da Cheila no rodapé */
.dialog-texto .dialog-frase{margin:26px 0 0;padding:18px 20px;border-left:3px solid var(--azul);background:var(--creme2);border-radius:0 10px 10px 0;font:italic 500 19px/1.5 "Bodoni Moda",Georgia,serif;color:var(--texto)}
.dialog-texto h2{color:var(--azul)}
.dialog-fechar{transition:background-color var(--rapido) var(--curva),color var(--rapido) var(--curva)}
.dialog-fechar:hover{background:var(--texto);color:#fff}

/* Motion: abertura e fechamento da janela */
.servico-dialog::backdrop{background:rgba(10,14,26,.62);backdrop-filter:blur(6px)}
.motion .servico-dialog[open]{animation:janela-abre var(--entrada) var(--curva)}
.motion .servico-dialog[open]::backdrop{animation:fundo-abre var(--entrada) var(--curva)}
.motion .servico-dialog.fechando{animation:janela-fecha var(--medio) var(--curva) forwards}
.motion .servico-dialog.fechando::backdrop{animation:fundo-fecha var(--medio) var(--curva) forwards}
.motion .servico-dialog[open] .dialog-texto>*{animation:sobe-leve var(--entrada) var(--curva) both}
.motion .servico-dialog[open] .dialog-texto>:nth-child(2){animation-delay:50ms}
.motion .servico-dialog[open] .dialog-texto>:nth-child(n+3){animation-delay:100ms}
@keyframes janela-abre{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes janela-fecha{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.985)}}
@keyframes fundo-abre{from{opacity:0}to{opacity:1}}
@keyframes fundo-fecha{from{opacity:1}to{opacity:0}}
@keyframes sobe-leve{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Motion: entrada da capa */
.motion .hero .ano,.motion .hero .sub,.motion .hero .acoes,.motion .hero .nota{opacity:0;transform:translateY(12px);transition:opacity var(--entrada) var(--curva),transform var(--entrada) var(--curva)}
.motion .hero .sub{transition-delay:300ms}
.motion .hero .acoes{transition-delay:360ms}
.motion .hero .nota{transition-delay:420ms}
.motion.pronto .hero .ano,.motion.pronto .hero .sub,.motion.pronto .hero .acoes,.motion.pronto .hero .nota{opacity:1;transform:none}
.hero h1 span i{transition:transform 640ms var(--curva)}
.hero h1 span:nth-child(2) i{transition-delay:60ms}
.hero h1 span:nth-child(3) i{transition-delay:120ms}
.motion .foto-hero{clip-path:inset(0 0 100% 0);transition:clip-path 900ms var(--curva) 120ms}
.motion.pronto .foto-hero{clip-path:inset(0 0 0 0)}

/* Motion: revelar no scroll, com escalonamento curto nas listas */
.motion .sobe{opacity:0;transform:translateY(12px);transition:opacity var(--entrada) var(--curva),transform var(--entrada) var(--curva)}
.motion .sobe.vis{opacity:1;transform:none}
.motion .linha-tempo li{transform:translateY(12px)}
.motion .linha-tempo li.vis{transform:none}
.motion .itens>*{opacity:0;transform:translateY(10px);transition:opacity var(--entrada) var(--curva),transform var(--entrada) var(--curva),background-color var(--rapido) var(--curva),box-shadow var(--rapido) var(--curva)}
.motion .vis .itens>*{opacity:1;transform:none}
.motion .vis .itens>:nth-child(2){transition-delay:50ms,50ms,0s,0s}
.motion .vis .itens>:nth-child(3){transition-delay:100ms,100ms,0s,0s}
.motion .vis .itens>:nth-child(4){transition-delay:150ms,150ms,0s,0s}
.motion .vis .itens>:nth-child(5){transition-delay:200ms,200ms,0s,0s}
.motion .vis .itens>*:hover{transition-delay:0s}
.motion .montagem .reserva{opacity:0;transform:scale(.97);transition:opacity var(--entrada) var(--curva),transform var(--entrada) var(--curva)}
.motion .vis .montagem .reserva{opacity:1;transform:none}
.motion .vis .montagem .reserva:nth-child(2){transition-delay:60ms}
.motion .vis .montagem .reserva:nth-child(3){transition-delay:120ms}
.motion .vis .montagem .reserva:nth-child(4){transition-delay:180ms}
.linha-tempo li.vis::before{background:var(--azul);box-shadow:0 0 0 6px var(--creme2)}

@media(max-width:859px){
  .hero{padding-top:84px}
  .foto-hero::after{background:linear-gradient(180deg,transparent 62%,rgba(10,14,26,.78))}
  .assin{font-size:21px}
  .assin small{font-size:11px}
}

/* Ajuste 2 (02/11): logo oficial recortado do arquivo da Cheila (troca pelo PNG do Pincel quando chegar) */
.assin-logo{display:block;line-height:0}
.assin-logo img{display:block;height:44px;width:auto}
footer.rodape{background:var(--creme2);color:var(--suave);border-top:1px solid var(--linha)}
.rodape .logo-rodape{width:min(300px,72vw);height:auto;margin-bottom:10px}
footer.rodape .demo{color:var(--suave)}
@media(max-width:859px){.assin-logo img{height:36px}}
.motion .vis .itens>:nth-child(6){transition-delay:250ms,250ms,0s,0s}

/* --- ajuste5 --- */
/* v3 ajuste 5 (02/11): menos "site pronto". Direção (unslop, CC BY 4.0, @heydamir):
   produto: studio de uma mulher só, 37 anos de micropigmentação e sobrancelha em Praia Grande;
   caráter: acolhedor, minucioso, feito à mão; mundo: papel de desenho, lápis de sobrancelha, o fio do dermógrafo;
   momentos: a foto dela na capa e a galeria de antes e depois; assinatura: o fio com coração do logo.
   Script: Style Script (OFL), a mais próxima da logo, só em 3 acentos. Sem branco puro: papel quente, lavanda diluída e névoa azulada. */
@font-face{font-family:"Style Script";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/style-script.woff2") format("woff2")}
:root{
  --papel:#f6f3ee;--papel2:#fbf9f5;--lavanda:#e9eaf6;--lavanda2:#dfe1f2;--nevoa:#edf0f5;
  --tinta:#1d243d;--noite:#0a0e1a;--azul:#365f9d;--suave:#515a82;
  --creme:var(--papel);--creme2:var(--lavanda);
}
body{background:var(--papel)}
/* grão de papel, bem sutil, por cima de tudo */
body::after{content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .14 0 0 0 0 .24 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}

.script{font-family:"Style Script",cursive;font-weight:400;font-style:normal;color:var(--azul);font-size:1.18em;line-height:.9;letter-spacing:0}
.num{margin:0}
.num i{font:italic 400 18px "Bodoni Moda",Georgia,serif;color:var(--azul)}
.fio path{fill:none;stroke:var(--azul);stroke-width:1.4;stroke-linecap:round}
.fio .coracao{fill:var(--azul);stroke:none}

/* topo */
.topo,.topo.solido{background:rgba(246,243,238,.92);box-shadow:0 1px 0 rgba(29,36,61,.07)}

/* capa: névoa lavanda, foto em arco, o fio do dermógrafo saindo dela */
.hero{background:var(--lavanda)}
.hero .btn.claro{background:rgba(251,249,245,.5)}
.foto-hero{margin:0;overflow:visible;border-radius:0}
.foto-hero img,.foto-hero::after{border-radius:50% 50% 14px 14px / 30% 30% 14px 14px}
.foto-hero::after{inset:0}
.traco{display:none}
.fio-capa{position:absolute;z-index:3;width:150px;left:-40px;bottom:-34px;pointer-events:none}
.faixa{background:var(--lavanda);color:var(--azul);border-top:1px solid rgba(29,36,61,.08);font-size:20px;padding:18px 0}
.faixa span::after{opacity:.5}

/* Quem sou: papel quente; foto de arquivo como foto colada, a de hoje com canto de folha */
.historia{background:var(--papel)}
.formacao-texto{background:var(--lavanda)}
.linha-tempo .foto-atual img{border-radius:28px 4px 28px 4px}
.linha-tempo li.vis::before{box-shadow:0 0 0 6px var(--papel)}
.reserva{background:rgba(198,202,235,.26);border-color:#bfc4e2;color:#515a82}

/* a frase dela, grande */
.frase{background:var(--lavanda2);padding:88px 0}
.frase blockquote{margin:0;max-width:960px}
.frase p{margin:0;font:400 clamp(34px,6.2vw,72px)/1.12 "Bodoni Moda",Georgia,serif;color:var(--tinta);letter-spacing:-.01em}
.frase .script{display:inline-block;font-size:1.12em;margin-top:.08em}
.frase cite{display:block;margin-top:24px;font:500 15px "Segoe UI",Arial,sans-serif;font-style:normal;color:var(--suave)}

/* serviços: lista com fio, não cartões */
.servicos .itens{gap:0}
.servicos .item{background:transparent;border-radius:0;border-top:1px solid rgba(198,202,235,.18);padding:20px 4px}
.servicos .item:last-child{border-bottom:1px solid rgba(198,202,235,.18)}
.servicos .item:hover{background:rgba(198,202,235,.06);box-shadow:none}
.cap-realco .item{padding:20px 4px}
.montagem .reserva:nth-child(1){border-radius:120px 120px 12px 12px}
.montagem .reserva:nth-child(4){border-radius:12px 12px 120px 120px}

/* Removo e reconstruo: um bloco só, largo, com a galeria de antes e depois */
.removo{background:var(--papel)}
.removo .wrap{display:grid;gap:40px}
.removo .titulo{max-width:none}
.removo .intro{color:var(--suave)}
.lista{list-style:none;margin:28px 0 0;padding:0}
.lista li{border-top:1px solid rgba(29,36,61,.12)}
.lista li:last-child{border-bottom:1px solid rgba(29,36,61,.12)}
.lista button{display:grid;grid-template-columns:1fr auto;column-gap:16px;width:100%;padding:18px 4px;border:0;background:none;text-align:left;font:inherit;color:var(--tinta);cursor:pointer;transition:background-color var(--rapido) var(--curva)}
.lista button:hover{background:rgba(198,202,235,.22)}
.lista b{font:600 17px/1.4 "Segoe UI",Arial,sans-serif}
.lista small{grid-column:1;color:var(--suave);font-size:15px;line-height:1.55;margin-top:4px}
.lista svg{grid-column:2;grid-row:1/3;align-self:center;width:20px;height:20px;fill:var(--azul);transition:transform var(--rapido) var(--curva)}
.lista button:hover svg{transform:translateX(3px)}
.galeria{display:grid;gap:20px}
.par{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.par .reserva{aspect-ratio:4/5;font-size:13px;padding:8px}
.par .reserva:first-child{border-radius:14px 2px 2px 14px}
.par .reserva:nth-child(2){border-radius:2px 14px 14px 2px}
.par figcaption{grid-column:1/-1;font:italic 400 15px "Bodoni Moda",Georgia,serif;color:var(--suave);margin-top:6px}

/* Aréola: seção própria, tom delicado */
.areola{background:var(--lavanda);position:relative}
.areola .wrap{display:grid;gap:36px;align-items:center}
.areola-foto{aspect-ratio:4/5;max-width:440px;width:100%;border-radius:50% 50% 14px 14px / 30% 30% 14px 14px}
.areola .titulo{font-weight:400;max-width:none}
.areola .intro{color:var(--tinta);font-size:19px}
.areola-texto>p:not(.rotulo):not(.intro):not(.areola-sub){color:var(--suave);max-width:52ch}
.areola-formacao{border-left:2px solid var(--azul);padding-left:16px;font-size:15px}
.areola .btn{margin-top:12px}
.fio-coracao{display:block;width:180px;margin-top:36px}

/* resto da página: tons alternados */
.resultados{background:var(--nevoa)}
.compara{border-radius:16px}
.avaliacoes{background:var(--papel)}
.trilho blockquote{background:var(--papel2);border-color:rgba(29,36,61,.1)}
.instagram{background:var(--lavanda)}
footer.rodape{background:var(--papel)}

@media (min-width:860px){
  .fio-capa{width:200px;left:-110px;bottom:auto;top:54%}
  .frase{padding:140px 0}
  .frase blockquote{margin-left:8%}
  .removo .wrap{gap:56px}
  .removo-texto{display:grid;grid-template-columns:1fr 1fr;column-gap:80px}
  .removo-texto>.num{grid-column:1;grid-row:1}
  .removo-texto>.titulo{grid-column:1;grid-row:2;margin-top:12px}
  .removo-texto>.intro{grid-column:2;grid-row:1/3;align-self:end;margin:0}
  .removo-texto>.lista{grid-column:1/-1;grid-row:3;margin-top:40px;display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
  .galeria{grid-template-columns:repeat(3,1fr);gap:28px}
  .lista li:last-child{border-bottom:0}
  .lista li{border-bottom:1px solid rgba(29,36,61,.12)}
  .areola .wrap{grid-template-columns:.85fr 1.15fr;gap:96px}
}
@media (max-width:859px){
  .galeria{grid-template-columns:1fr}
  .areola-foto{max-width:320px;margin-inline:auto}
}

/* ajuste 6 (Cheila, 02/11 19h44): horário de atendimento */
.horario{display:grid;gap:6px;margin:20px 0 0;font-size:15px;color:#d5dae5}
.horario div{display:flex;gap:12px}
.horario dt{min-width:136px;color:var(--lavanda2)}
.horario dd{margin:0;font-variant-numeric:tabular-nums}
.rodape-horario a{color:var(--azul)}
/* ajuste 7: subtítulo da aréola */
.areola .titulo{margin-bottom:6px}
.areola-sub{margin:0 0 18px;font:600 15px/1.4 "Segoe UI",Arial,sans-serif;letter-spacing:.04em;color:var(--rosa)}

/* --- ajuste8 --- */
/* Ajuste 8 (02/11): pente-fino do que a Cheila mandou + antes e depois de arrastar em todos os serviços */

/* foto que chegou ocupa o espaço reservado inteiro */
.reserva.com-foto{padding:0;border:0;background:none;overflow:hidden}
.reserva.com-foto>img{width:100%;height:100%;object-fit:cover}

/* Quem sou: espaço da foto atual (no lugar da foto de criança) */
.reserva-atual{aspect-ratio:4/5;max-width:340px;margin-top:28px;border-radius:120px 120px 14px 14px}

/* Serviços: abertura dela e o botão de agendar, mais perto da lista */
.servicos{padding-top:64px}
.servicos-abertura{margin-top:14px}
.servicos .sobe>.btn{margin-top:22px}
.servicos .cap-realco{margin-top:40px}

/* Realço: "Saiba mais" com destaque */
.cap-realco .saiba-mais{min-height:50px;padding:0 26px;border:0;background:var(--azul,#365f9d);color:#fff;font-size:16px}
.cap-realco .saiba-mais:hover{background:#fff;color:var(--tinta)}

/* comparador vazio: os dois lados como espaço reservado, com o mesmo arraste da sobrancelha */
.compara-vazio{background:#dfe2f2}
.compara .lado{position:absolute;inset:0;display:grid;place-items:center;padding:16px;font:500 14px/1.4 "Segoe UI",Arial,sans-serif;text-align:center;pointer-events:none}
.compara .lado-antes{background:repeating-linear-gradient(135deg,#e7e9f5 0 10px,#dfe2f2 10px 20px);color:#515a82;justify-items:start;padding-left:12%}
.compara .lado-depois{background:#c6caeb;color:#1d243d;justify-items:end;padding-right:12%}
.compara .lado span{max-width:12ch}
.compara-vazio .barra{background:#fff}
.dica-arraste{margin:12px 0 0;font:500 14px/1.4 "Segoe UI",Arial,sans-serif;color:var(--suave)}
.dica-arraste::before{content:"";display:inline-block;width:22px;height:1px;background:currentColor;vertical-align:middle;margin-right:10px}

/* janelas: foto de trabalho em cima, comparador embaixo */
.dialog-foto.tem-compara{display:flex;flex-direction:column;gap:14px;padding:20px;background:#eff1f6}
.dialog-foto.tem-compara>img{height:auto;min-height:0;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.dialog-foto.tem-compara>.reserva{min-height:0;aspect-ratio:4/3}
.dialog-compara .compara{aspect-ratio:16/10}
.compara-legenda{margin:0 0 6px;font:600 14px/1.4 "Segoe UI",Arial,sans-serif;color:var(--tinta)}
.dialog-foto .dica-arraste{margin-top:0}

/* Removo: a parte mais importante; 3 comparadores largos */
.galeria-compara .caso{margin:0}
.galeria-compara .compara{aspect-ratio:4/5;border-radius:14px}
.galeria-compara figcaption{font:italic 400 16px "Bodoni Moda",Georgia,serif;color:var(--suave);margin-top:10px}
.removo-fim{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.removo-fim .dica-arraste{margin:0}

/* Aréola: foto + comparador */
.areola-fotos{display:grid;gap:14px;max-width:440px;width:100%}
.areola-fotos .compara{aspect-ratio:16/10;border-radius:14px}
.areola-fotos .dica-arraste{margin:0}

/* Avaliação em destaque (ela vai escolher qual) */
.avaliacao-destaque{margin:34px 0 0;max-width:760px}
.avaliacao-rotulo{margin:0 0 10px;font:600 14px/1.4 "Segoe UI",Arial,sans-serif;color:var(--azul,#365f9d)}
.avaliacao-destaque .reserva{margin:0;min-height:150px;font-size:15px;border-radius:14px}

@media (min-width:860px){
  .servicos{padding-top:96px}
  .galeria-compara{grid-template-columns:repeat(3,1fr)}
  .dialog-foto.tem-compara{justify-content:center}
}
@media (max-width:859px){
  .galeria-compara{grid-template-columns:1fr}
  .galeria-compara .compara{aspect-ratio:4/3}
  .areola-fotos{max-width:none}
  .areola-fotos .areola-foto{max-width:320px;margin-inline:auto}
  .dialog-foto.tem-compara{padding:14px}
  .dialog-foto.tem-compara>.reserva{aspect-ratio:16/9}
  .reserva-atual{max-width:280px}
}

/* --- ajuste9 --- */
/* Ajuste 9 (Cheila, 02/11 20h24): textos novos do Removo e botão do WhatsApp no "Conversar com a Cheila" */

/* "Importante" dela: caixa de aviso suave na janela da nova micropigmentação */
.dialog-texto .dialog-importante{margin:26px 0 0;padding:16px 18px 18px;border:1px solid var(--linha);border-left:3px solid var(--azul,#365f9d);border-radius:0 12px 12px 0;background:var(--creme2)}
.dialog-importante .importante-rotulo{display:inline-block;margin-bottom:6px;font:700 12px/1 Manrope,"Segoe UI",Arial,sans-serif;color:var(--azul,#365f9d)}
.dialog-texto .dialog-importante h3{margin-top:0}
.dialog-texto .dialog-importante p{margin-bottom:0}

/* bloco Removo sem a frase de abertura (repetia o 1º botão): título e lista seguem juntos */
@media (min-width:860px){ .removo-texto>.lista{margin-top:32px} }

/* --- ajuste10 --- */
/* Ajuste 10 (Gubs, 02/11 20h30): seção "Horários e local" + melhorias de navegação e WhatsApp */

/* status calculado no navegador pelo horário de São Paulo; texto diz o estado, a cor só reforça */
.status-agora{display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;font:600 14px/1.4 "Segoe UI",Arial,sans-serif;color:#d5dae5}
.status-agora::before{content:"";width:8px;height:8px;border-radius:50%;background:#9aa0c8;flex:none}
.status-agora.aberto::before{background:#5fbf8a}
.status-capa{margin:20px 0 0;color:var(--tinta);text-decoration:none}
.status-capa:hover{text-decoration:underline}
.status-capa.aberto::before{background:#2f8f5b}

/* seção horários e local */
.horarios-grid{display:grid;gap:32px;margin-top:40px}
.tabela-horarios{width:100%;border-collapse:collapse;font:400 16px/1.4 "Segoe UI",Arial,sans-serif;font-variant-numeric:tabular-nums}
.tabela-horarios caption{text-align:left;font-size:13px;color:#b3b9c7;padding-bottom:8px}
.tabela-horarios th,.tabela-horarios td{padding:14px 12px;border-bottom:1px solid #3a4268;text-align:left;font-weight:400}
.tabela-horarios th{color:var(--lavanda2,#c6caeb)}
.tabela-horarios td{text-align:right;color:var(--creme)}
.tabela-horarios tr.hoje{background:#2a3254}
.tabela-horarios tr.hoje th,.tabela-horarios tr.hoje td{color:#fff;font-weight:600}
.hoje-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--creme);color:var(--tinta);font-size:12px;font-weight:600;vertical-align:1px}
.horarios .endereco{display:block;font-style:normal;margin-top:28px}
.horarios .endereco small{display:block;font-size:15px;font-weight:400;margin-top:4px}
.horarios-mapa{display:grid;gap:16px}
.horarios-mapa .mapa{margin-top:0}
.horarios .btn.claro svg{width:18px;height:18px}

/* convite final, sem repetir endereço */
.contato-final{padding:72px 0}
.contato-final .contato-bloco{border-top:0;margin-top:0;padding-top:0;max-width:720px}

/* atalhos no celular: a navegação do topo só aparece a partir de 860 px */
.topo .atalhos{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:0 12px 8px;margin-top:-4px;font:600 13px/1 "Segoe UI",Arial,sans-serif}
.atalhos::-webkit-scrollbar{display:none}
.atalhos a{flex:none;padding:8px 12px;border-radius:999px;color:inherit;text-decoration:none;opacity:.85;transition:background-color var(--rapido,.2s) ease,color var(--rapido,.2s) ease}
.atalhos a.ativo,.topo nav a.ativo{opacity:1}
.atalhos a.ativo{background:var(--tinta);color:var(--creme)}
.topo nav a.ativo{color:var(--azul,#365f9d);text-decoration:underline;text-underline-offset:6px}
section[id]{scroll-margin-top:120px}

@media (min-width:860px){
  .topo .atalhos{display:none}
  section[id]{scroll-margin-top:88px}
  .horarios-grid{grid-template-columns:1fr 1fr;gap:40px 60px;align-items:stretch}
  .horarios-mapa{display:contents}
  .horarios-mapa figure{grid-column:2;grid-row:1}
  .horarios-mapa figure img{height:100%;aspect-ratio:auto}
  .horarios-mapa .mapa{grid-column:1/-1;grid-row:2;height:340px}
  .horarios-cabeca{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 40px}
  .horarios-cabeca .rotulo{flex-basis:100%}
  .horarios-cabeca .titulo{margin-top:0}
  .contato-final{padding:96px 0}
}

/* --- ajuste11 --- */
/* Ajuste 11 (Cheila, 02/11 20h32 e 20h37): aréola com os textos dela e um antes e depois por serviço */

/* aréola: botão como os do Removo e destaque "Capacitação e cuidado" */
.areola .lista{margin-top:24px}
.areola .lista li{border-color:rgba(29,36,61,.16)}
.areola .lista button:hover{background:rgba(255,255,255,.35)}
.areola-cuidado{margin:28px 0 0;padding:18px 20px 20px;border-left:3px solid var(--azul,#365f9d);border-radius:0 12px 12px 0;background:rgba(255,255,255,.55);max-width:52ch}
.areola-cuidado h3{margin:0 0 8px;font:700 13px/1.3 Manrope,"Segoe UI",Arial,sans-serif;color:var(--azul,#365f9d)}
.areola-cuidado p{margin:0;color:var(--tinta);font-size:16px;line-height:1.55}
.areola-cuidado .cuidado-ano{margin-top:10px;color:var(--suave)}
.areola-fotos{max-width:440px}

/* link "Ver antes e depois" (seção da aréola e janelas) */
.ver-ad{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font:600 15px/1.4 "Segoe UI",Arial,sans-serif;color:var(--azul,#365f9d);text-decoration:underline;text-underline-offset:4px}
.ver-ad::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.ver-ad:hover{text-decoration-thickness:2px}
.areola .ver-ad{display:flex;width:max-content}
.dialog-foto .ver-ad{margin-top:14px}

/* janela: destaque usa a caixa do "Importante" sem o rótulo */
.dialog-texto .dialog-destaque h3{color:var(--azul,#365f9d)}
.dialog-texto .dialog-destaque p+p{margin-top:8px}

/* seção Antes e depois: 1 comparador por serviço, nome do serviço embaixo */
.comparas-servicos .caso{margin:0;scroll-margin-top:140px}
.comparas-servicos .compara{aspect-ratio:4/3;border-radius:14px}
.comparas-servicos figcaption,.galeria-2 figcaption{margin-top:10px;font:600 15px/1.4 "Segoe UI",Arial,sans-serif;color:var(--tinta)}
/* exemplo de cada lado fica na sua metade, longe da barra */
.compara .lado{padding-top:44px;padding-bottom:20px}
.compara .lado-antes{padding-left:6%}
.compara .lado-depois{padding-right:6%}
.compara .lado span{max-width:38%;font-size:13px}
.compara .lado-antes span{text-align:left}
.compara .lado-depois span{text-align:right}
.compara .lado b{display:block;font-weight:600}
.resultados .dica-arraste{margin-top:24px}
.galeria-2 .compara{aspect-ratio:4/3}

@media (min-width:860px){
  .comparas-servicos{grid-template-columns:repeat(3,1fr);gap:36px 24px}
  .galeria-compara.galeria-2{grid-template-columns:1fr 1fr}
  .comparas-servicos .caso{scroll-margin-top:110px}
}

/* --- ajuste15 --- */
/* Ajuste 15 (02/11, #539, Gubs: "Azul base + rosa detalhe"): paletas que a Cheila mandou às 19h01.
   Azul-ardósia #C6CAEB #9AA0C8 #737BA5 #515A82 #353D60 #1D243D #0A0E1A: fundos, textos, títulos e botões.
   Fundos claros = #C6CAEB diluído no branco (15%, 30%, 55%), sem branco puro.
   Rosa-vinho #F3ACAE #DA8D95 #C07180 #A7586D #8E425C #742F4C #5B1F3D: só detalhe pequeno
   (filetes, estrelas, marcadores, "Aberto agora", ícones pequenos, a palavra "Removo."). Nunca fundo grande nem botão principal. */
:root{
  --papel:#eeeff9;--papel2:#f6f7fc;--lavanda:#e0e2f4;--lavanda2:#c6caeb;--nevoa:#e0e2f4;
  --creme:var(--papel);--creme2:var(--lavanda);--linha:#c6caeb;
  --tinta:#1d243d;--tinta2:#353d60;--noite:#0a0e1a;--texto:#1d243d;--suave:#515a82;
  --azul:#353d60;--azul-escuro:#1d243d;--azul-claro:#c6caeb;--rosa:#353d60;--rosa2:#c6caeb;--ouro:#c6caeb;
  --vinho:#8e425c;--vinho-claro:#a7586d;--vinho-noite:#f3acae;
}
body{background:var(--papel)}

/* topo e atalhos */
.topo,.topo.solido{background:rgba(238,239,249,.94);box-shadow:0 1px 0 rgba(29,36,61,.08)}
.topo nav a.ativo{color:var(--tinta);text-decoration-color:var(--vinho-claro);text-decoration-thickness:2px}
.topo .atalhos a.ativo{background:var(--tinta);color:var(--papel);text-decoration:none;box-shadow:inset 0 -2px 0 var(--vinho-noite)}

/* botões: azul. Escuro sobre claro; claro sobre escuro */
.btn{background:var(--azul);color:#f6f7fc}
.btn:hover{background:var(--tinta)}
.btn.claro{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1px rgba(53,61,96,.35)}
.hero .btn.claro{background:rgba(246,247,252,.6)}
.btn.claro:hover,.hero .btn.claro:hover{background:rgba(198,202,235,.35);color:var(--tinta);box-shadow:inset 0 0 0 1px var(--azul)}
.servicos .btn:not(.claro),.onde .btn:not(.claro){background:#c6caeb;color:#0a0e1a}
.servicos .btn:not(.claro):hover,.onde .btn:not(.claro):hover{background:#9aa0c8;color:#0a0e1a}
.servicos .btn.claro,.onde .btn.claro{color:var(--papel);box-shadow:inset 0 0 0 1px rgba(198,202,235,.45)}
.servicos .btn.claro:hover,.onde .btn.claro:hover{background:rgba(198,202,235,.12);color:var(--papel)}
.cap-realco .saiba-mais{background:#c6caeb;color:#0a0e1a}
.cap-realco .saiba-mais:hover{background:#9aa0c8;color:#0a0e1a}
.zap-fixo .btn{background:var(--azul);color:#f6f7fc}

/* capa */
.hero{background:var(--lavanda)}
.hero .ano{color:var(--suave)}
.hero h1 span:nth-child(3) i{color:var(--vinho)}
.hero h1 span:last-child::after{background:var(--vinho-claro)}
.avaliacoes .titulo{max-width:none}
/* no celular o topo ganhou os atalhos (ajuste 10) e cobria "Desde 1989" */
@media (max-width:859px){.hero{padding-top:132px}}
.hero .destaque,.destaque{color:var(--azul)}
.nota .est,.google .est{color:var(--vinho)}
.frase cite{color:var(--tinta2)}
.fio path{stroke:var(--vinho-claro)}
.fio .coracao{fill:var(--vinho)}

/* "Aberto agora": rosa no ponto e no texto; fechado segue azul */
.status-agora.aberto{color:var(--vinho)}
.status-agora.aberto::before,.status-capa.aberto::before{background:var(--vinho-claro)}
.onde .status-agora.aberto{color:var(--vinho-noite)}
.onde .status-agora.aberto::before{background:var(--vinho-noite)}

/* faixa: texto azul, estrelinha rosa */
.faixa{background:var(--lavanda2);color:var(--azul)}
.faixa span::after{color:var(--vinho);opacity:1}

/* filetes e marcadores */
.rotulo{color:var(--suave)}
.rotulo::before{background:var(--vinho-claro)}
.servicos .rotulo,.onde .rotulo{color:var(--lavanda2)}
.servicos .rotulo::before,.onde .rotulo::before{background:var(--vinho-noite)}
.linha-tempo li::before{box-shadow:inset 0 0 0 1.5px var(--vinho-claro)}
.linha-tempo li.on::before,.linha-tempo li.vis::before{background:var(--vinho-claro)}
.linha-tempo .ano{color:var(--azul)}
.pontos i.on{background:var(--vinho-claro)}
.areola-formacao,.areola-cuidado{border-left-color:var(--vinho-claro)}
.dialog-texto .dialog-importante{border-left-color:var(--vinho-claro)}
.lista svg{fill:var(--vinho)}
.script,.num i{color:var(--suave)}
.areola-sub{color:var(--suave)}

/* textos de destaque em azul (eram o azul da logo) */
.avaliacao-rotulo,.areola-cuidado h3,.dialog-texto .dialog-destaque h3,.dialog-importante .importante-rotulo,.ver-ad,.fonte a,.rodape-horario a{color:var(--azul)}

/* fundos tingidos no lugar do branco */
.dialog-fechar{background:var(--papel2)}
.areola-cuidado{background:rgba(246,247,252,.7)}
.trilho blockquote{background:var(--papel2);border-color:rgba(29,36,61,.1)}
.historia,.removo,.avaliacoes{background:var(--papel)}
.resultados,.instagram,.areola{background:var(--lavanda)}
footer.rodape{background:var(--lavanda);border-top-color:var(--linha)}

:focus-visible{outline-color:var(--azul)}
.servicos :focus-visible,.onde :focus-visible{outline-color:#c6caeb}

/* --- ajuste16 --- */
/* Ajuste 16 (02/11, Cheila 22h09 a 22h25). Carregado por último.
   Fontes dela (22h25), todas do Google Fonts (OFL), servidas daqui:
   Yeseva One nos títulos grandes, Bree Serif em subtítulos e nomes de serviço,
   Anton só em detalhes curtos (números e rótulos). Texto corrido segue na sans.
   A assinatura dela continua sendo a logo em imagem.
   Rosa da 1ª paleta (v3 inicial, #ad1858 / #ffd1e4) nos botões e em algumas palavras; fundo claro com os azuis dela. */
@font-face{font-family:"Yeseva One";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/yeseva-one.woff2") format("woff2")}
@font-face{font-family:"Bree Serif";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/bree-serif.woff2") format("woff2")}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/anton.woff2") format("woff2")}

:root{
  --titulo:"Yeseva One",Georgia,serif;--sub:"Bree Serif",Georgia,serif;--detalhe:Anton,Impact,sans-serif;
  --rosa-1:#ad1858;--rosa-1-hover:#951450;--rosa-1-claro:#ffd1e4;
  --vinho:#ad1858;--vinho-claro:#c2306f;--vinho-noite:#ffd1e4;
}

/* ---------- fontes ---------- */
h1,h2,.titulo,.hero h1,.frase p,.citacao,.contador b,#servicoTitulo,.cap header h3,.contato-bloco h3{font-family:var(--titulo);font-weight:400;letter-spacing:0}
.hero h1{font-weight:400;letter-spacing:-.005em}
/* Yeseva não tem itálico: nada de itálico falso */
.hero h1 span i,.hero h1 span:nth-child(3) i,.titulo em,.citacao,.frase p{font-style:normal}
h3,h4,.item b,.lista b,.linha-tempo h3,.formacao b,.endereco,.trilho blockquote p,.dialog-texto h3,.areola-cuidado h3,
.foto-hero figcaption b,.galeria-compara figcaption,.par figcaption,.caso figcaption,.dialog-texto .dialog-frase,.faixa,.formacao-texto h4{font-family:var(--sub);font-weight:400;font-style:normal;letter-spacing:0}
.item b,.lista b{font-size:18px}
.linha-tempo h3{font-size:18px}
.trilho blockquote p{font-size:18px;line-height:1.5}
/* Anton: só números e rótulos curtos */
.rotulo,.num i,.cap header i,.linha-tempo .ano,.nota b,.google b{font-family:var(--detalhe);font-weight:400;font-style:normal}
.rotulo{font-size:13px;letter-spacing:.14em}
.num i,.cap header i{font-size:20px;letter-spacing:.04em}
.linha-tempo .ano{font-size:38px;letter-spacing:.01em}
.nota b{font-size:34px;letter-spacing:.01em}
.google b{font-size:76px;letter-spacing:0}

/* ---------- rosa da 1ª paleta: botões e algumas palavras ---------- */
.btn,.servicos .btn:not(.claro),.onde .btn:not(.claro),.zap-fixo .btn{background:var(--rosa-1);color:#fff}
.btn:hover,.servicos .btn:not(.claro):hover,.onde .btn:not(.claro):hover,.zap-fixo .btn:hover{background:var(--rosa-1-hover);color:#fff}
.btn.claro{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1px rgba(53,61,96,.35)}
.hero .btn.claro{background:rgba(246,247,252,.6)}
.btn.claro:hover,.hero .btn.claro:hover{background:rgba(198,202,235,.35);color:var(--tinta);box-shadow:inset 0 0 0 1px var(--azul)}
.servicos .btn.claro,.onde .btn.claro{background:transparent;color:var(--papel)}
.servicos .btn.claro:hover,.onde .btn.claro:hover{background:rgba(198,202,235,.12);color:var(--papel)}
/* palavras */
.hero h1 span:nth-child(3) i,.titulo em,.script,.areola-info h3{color:var(--rosa-1)}
.servicos .titulo em,.servicos .script,.onde .titulo em,.onde .script{color:var(--rosa-1-claro)}
.verbo-hero{display:block;color:inherit;text-decoration:none}
.verbo-hero:hover{color:var(--rosa-1)}
.hero h1 span:last-child::after{background:var(--rosa-1)}
.lista svg{fill:var(--rosa-1)}
.nota .est,.google .est{color:var(--rosa-1)}
.fio path{stroke:var(--vinho-claro)}
.fio .coracao{fill:var(--rosa-1)}
.status-agora.aberto{color:var(--rosa-1)}

/* ---------- foto quadrada (sem o arco), em todo o site ---------- */
.foto-hero img,.foto-hero::after{border-radius:6px}
.reserva-atual{border-radius:6px}
.montagem .reserva:nth-child(1),.montagem .reserva:nth-child(4){border-radius:6px}
.areola-foto{border-radius:6px}

/* ---------- aréola: texto visível, sem janela ---------- */
.areola-info{margin-top:22px;padding-top:22px;border-top:1px solid var(--linha);max-width:600px}
.areola-info h3{font-size:24px;line-height:1.25;margin:0}
.areola-info .areola-intro{margin:10px 0 0;color:var(--texto);font-size:17px;line-height:1.6}
.areola-info h4{margin:20px 0 6px;font-size:18px;color:var(--tinta)}
.areola-info p{margin:0 0 10px;color:var(--suave);font-size:16px;line-height:1.65}
.areola-texto .btn{margin-top:22px}

/* ---------- imagem da remoção a laser: a foto inteira (Cheila e a paciente), na proporção dela, sem cortar nem esticar ---------- */
.dialog-foto:not(.tem-reserva):not(.tem-montagem){align-content:start;align-self:start;background:var(--lavanda)}
.dialog-foto>img{display:block;width:100%;height:auto!important;min-height:0!important;aspect-ratio:auto;object-fit:contain;object-position:center;background:var(--lavanda)}
@media (max-width:859px){
  #servicoTitulo{font-size:clamp(24px,7.4vw,32px);line-height:1.15;overflow-wrap:normal;word-break:normal}
  .hero h1{font-size:clamp(46px,14vw,64px)}
  .dialog-foto>img{width:min(100%,280px);margin:16px auto 0;border-radius:10px}
}

/* --- ajuste17 --- */
/* ajuste 17 (Cheila, 02/11 22h35): na capa, status e nota estavam colados na mesma linha.
   Cada um ganha linha própria, com respiro dos botões e entre si. */
.hero .status-capa{display:flex;width:fit-content;margin:30px 0 0}
.hero .nota{display:flex;width:fit-content;margin:18px 0 0}
.hero .status-capa[hidden]+.nota{margin-top:30px}

/* --- ajuste18 --- */
/* ajuste 18 · correções da Cheila (03/11) */

/* 1 · topo: mais espaço entre os títulos e a frase */
.hero .sub{margin-top:40px}
@media (min-width:860px){.hero .sub{margin-top:48px}}

/* 2 · selo do Google sem o "fechado agora": a nota fica com o espaço que o status tinha */
.hero .nota{margin-top:30px}

/* 4 · faixa de serviços: corre devagar, em loop, sem pulo (as duas metades são iguais) */
.faixa div{animation:corre 60s linear infinite;will-change:transform}
.faixa span{white-space:nowrap}

/* 5 · avaliações: cartões inteiros, espaços menores, setas e deslizar */
/* no celular o espaço entre cartões = a margem da tela, para aparecer 1 cartão inteiro, sem pedaço do próximo */
.trilho{gap:20px;padding:22px 20px 8px;scroll-padding:0 20px}
.trilho blockquote{flex:0 0 100%;max-width:none;scroll-snap-align:start;padding:22px 22px;gap:12px}
@media (min-width:600px){.trilho{gap:12px;margin:0;padding:22px 0 8px;scroll-padding:0}.trilho blockquote{flex-basis:calc((100% - 12px)/2)}}
@media (min-width:860px){
  .trilho blockquote{flex-basis:calc((100% - 24px)/3)}
}
.trilho-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:10px}
.trilho-nav .pontos{margin-top:0}
.trilho-nav .seta{width:42px;height:42px;border-radius:50%;border:1px solid rgba(29,36,61,.18);background:var(--papel2);color:var(--azul);font:400 26px/1 var(--sub),Georgia,serif;display:grid;place-items:center;padding:0 0 3px;cursor:pointer;transition:background .2s,opacity .2s}
.trilho-nav .seta:hover{background:#fff}
.trilho-nav .seta:disabled{opacity:.3;cursor:default}

/* 7 · 1990: foto mais estreita que a de 1989 (é em pé) */

/* 8 · frase com as fotos das ferramentas */
.frase-fotos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px;max-width:460px}
@media (min-width:860px){
  .frase .wrap{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:48px;align-items:center}
  .frase blockquote{margin-left:0}
  .frase p{font-size:clamp(34px,4.6vw,64px)}
  .frase-fotos{margin-top:0}
}

/* 11 · Removo: um antes e depois só, em pé, e a linha da remoção */
.galeria-compara.galeria-1{display:block;max-width:560px;width:100%}
.galeria-1 .compara{aspect-ratio:5/4}
.removo-linha{margin:10px 0 0;color:var(--suave);font-size:15px;line-height:1.5}
#ad-laser .compara{aspect-ratio:5/4}

/* --- ajuste19 --- */
/* ajuste 19 · respostas da Cheila (03/11, 16h34–16h53) */

/* 1 · laser: 3 fotos soltas, mesmo tamanho e recorte */
.laser-seq{display:grid;gap:14px;margin-top:8px;max-width:900px}
.laser-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.laser-tres figure{margin:0}
.laser-tres img{display:block;width:100%;height:auto;aspect-ratio:777/622;object-fit:cover;border-radius:6px}
.laser-tres figcaption{margin-top:6px;font-size:13px;line-height:1.35;color:var(--texto);font-weight:600}
@media (min-width:860px){
  .laser-seq{grid-template-columns:minmax(0,1fr) 170px;align-items:start;gap:18px}
  .laser-tres figcaption{font-size:14px}
}
#ad-laser .laser-tres{padding:0}
#ad-laser .laser-tres figcaption{font-size:12px}

/* 2 · foto da mãe (04), pequena, legenda discreta */

/* 3 · aréola: pequena, sem destaque, sem abrir maior */
.areola-fotos .areola-foto,.areola-foto{max-width:200px!important;margin-inline:0!important}
.areola-foto img{pointer-events:none}
.dialog-foto>img[src*="areola"]{width:min(100%,200px)!important;margin:16px auto!important;border-radius:6px}

/* 4 · avaliação em destaque */
.avaliacao-destaque blockquote{margin:0;padding:22px 24px;background:#fff;border:1px solid #dde1ea;border-radius:12px}
.avaliacao-destaque blockquote p{margin:0;font:400 16.5px/1.75 "Segoe UI",Arial,sans-serif;color:var(--texto)}
.avaliacao-destaque blockquote footer{margin-top:12px;font-size:13.5px;color:var(--suave)}
.avaliacao-destaque blockquote footer b{color:var(--texto)}

/* 5 · botão do perfil do Google */
.perfil-google{margin:22px 0 0;text-align:center}
.perfil-google .btn{min-height:48px;padding:0 24px}

/* --- ajuste20 --- */
/* ajuste 20 · mensagens da Cheila (03/11, 16h53–16h59) */

/* 1 · Antes e depois: montagens inteiras, sem barrinha */
.resultados-prontos{align-items:start}
.montagem-ad img{display:block;width:100%;height:auto;border-radius:10px;background:#fff}
#ad-laser .laser-tres{gap:6px}
.mais-insta{margin:28px 0 0}
.mais-insta a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--azul);text-decoration:underline;text-underline-offset:4px}
@media (min-width:860px){
  .resultados-prontos{grid-template-columns:repeat(3,1fr)}
}

/* 2 · WhatsApp fixo no celular: botão redondo no canto, sempre à mão, sem cobrir o conteúdo */
@media (max-width:859px){
  .zap-fixo,.zap-fixo:not(.on){left:auto;right:14px;bottom:14px;transform:none;visibility:visible;pointer-events:auto}
  .zap-fixo .btn{width:56px;height:56px;min-height:56px;padding:0;border-radius:50%;background:#1f9d55;gap:0}
  .zap-fixo .btn svg{width:28px;height:28px;fill:#fff;margin:0}
  .zap-fixo .btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  footer.rodape{padding-bottom:96px}
}

/* 2 · área de toque de 44 px ou mais em todos os botões de agendar e falar com ela */
.btn,.topo .btn{min-height:44px}
.rodape-horario a[data-zap]{display:inline-flex;align-items:center;min-height:44px}

/* --- ajuste21 --- */
/* ajuste 21 · Gubs (03/11 17h05): fotos sem repetição, grupos com o mesmo tamanho, responsividade */

/* linha do tempo: as três fotos (mãe, 1990, hoje) com o mesmo tamanho e recorte 3:4 */

/* antes e depois: duas montagens, lado a lado no computador */
@media (min-width:860px){
  .resultados-prontos.duas{grid-template-columns:repeat(2,minmax(0,380px))}
}

/* janelas dos serviços: enquanto a foto carrega, nada de texto de espaço reservado */
.dialog-foto.esperando .reserva:not(.com-foto)>span{visibility:hidden}

/* 360 px: "Micropigmentação" no título da aréola passava 2 px da tela (rolagem lateral) */
@media (max-width:859px){ .areola .wrap{grid-template-columns:minmax(0,1fr)} }
@media (max-width:380px){ .areola .titulo{font-size:min(36px,9.4vw)} }

/* --- ajuste22 --- */
/* ajuste 22 · Cheila (áudio 03/11 17h06: "clica no título e aí ele abre"): blocos longos recolhidos em <details> nativo.
   O texto continua no HTML, palavra por palavra. Fica sempre aberto: topo, Quem sou, 1990 (pioneirismo), agendar, avaliações, horários e local. */

.abre>summary{position:relative;display:block;min-height:44px;padding:10px 46px 10px 0;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.abre>summary::-webkit-details-marker{display:none}
.abre>summary:focus-visible{outline:2px solid var(--azul,#365f9d);outline-offset:3px;border-radius:6px}

/* o sinal de que abre: + vira − */
.abre>summary::before,.abre>summary::after{content:"";position:absolute;right:9px;top:50%;width:16px;height:2px;margin-top:-1px;border-radius:2px;background:var(--azul,#365f9d)}
.abre>summary::after{transform:rotate(90deg);transition:transform .25s ease}
.abre[open]>summary::after{transform:rotate(0)}
@media (hover:hover){.abre>summary:hover h3,.abre>summary:hover h4{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}}

/* o texto entra de leve; com movimento reduzido, entra direto */
.motion .abre[open]>:not(summary){animation:sobe-leve .3s ease both}

/* linha do tempo: ano e título no resumo, no mesmo desenho dos anos abertos */
.abre-tempo>summary{padding-top:0}
.abre-tempo>summary .ano{display:block}
.abre-tempo>summary h3{margin:6px 0 0}
.abre-tempo>p{margin-top:6px}
.linha-tempo li:has(>.abre-tempo){padding-bottom:26px}

/* Formação: cartão baixo quando fechado */
.formacao-texto.abre{margin-top:6px;padding:4px 18px}
.formacao-texto.abre>summary{display:flex;align-items:center}
.formacao-texto.abre>summary h4{margin:0}
.formacao-texto.abre[open]{padding-bottom:18px}

/* Aréola: duas linhas de título, com a foto e o botão fora */
.areola-info.abre{margin-top:18px;padding-top:8px}
.areola-info.abre>summary{display:flex;align-items:center}
.areola-info.abre>.areola-intro{margin-top:4px}
.areola-info.abre>h4:first-of-type{margin-top:16px}
.areola-cuidado{margin-top:14px;padding:4px 16px}
.areola-cuidado .abre>summary{display:flex;align-items:center}
.areola-cuidado .abre>summary h3{margin:0;font-size:18px;line-height:1.3}
.areola-cuidado .abre[open]{padding-bottom:14px}

/* linha do tempo: mãe, 1990 e hoje no mesmo tamanho e recorte. Corrige o ajuste 21, cuja regra perdia para ajuste2, ajuste5 e ajuste18 */

/* --- ajuste23 --- */
/* ajuste 23 · Gubs (03/11 18h5x, "dá um talento nesse site"): movimento sempre ligado, polaroid, serviços no +, laser em 3 etapas */

/* 1 · movimento que se vê: entra de mais longe, sem pesar */
.motion .sobe{transform:translateY(36px);transition:opacity .8s var(--curva),transform .9s var(--curva)}
.motion .sobe.vis{transform:none}
#historia{overflow-x:clip}
.motion .linha-tempo li{transform:translateX(30px)}
.motion .linha-tempo li.vis{transform:none}
.faixa div{animation-duration:42s}
.btn:active{transform:scale(.97)}

/* 6 · polaroid: a mesma moldura em todas as fotos pessoais */
.pola{--r:-1.4deg;--pos:center 22%;margin:0;padding:10px 10px 12px;background:#f8f8fb;border-radius:2px;box-shadow:0 1px 2px rgba(29,36,61,.14),0 16px 30px -14px rgba(29,36,61,.42);transform:rotate(var(--r));transition:transform .35s var(--curva)}
.pola img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:var(--pos);border-radius:1px}
.pola:not(:has(figcaption)){padding-bottom:30px}
.pola figcaption{margin-top:9px;font-size:13px;line-height:1.35;font-style:italic;color:#4a5170;text-align:center}
.motion .pola{opacity:0;transform:translateY(34px) rotate(calc(var(--r)*-3)) scale(.96);transition:opacity .7s var(--curva),transform .95s var(--curva)}
.motion .pola.vis{opacity:1;transform:rotate(var(--r))}
@media (hover:hover){.motion .pola.vis:hover{transform:rotate(0) scale(1.015)}}

/* 2 e 4 · Quem sou e histórico */
.historia .contador{margin-top:26px}
.contador b{display:inline-block;min-width:1.12em;font-variant-numeric:lining-nums tabular-nums}
.quem-sou{margin-top:30px}
.pola-atual{width:min(400px,84%);margin-top:34px}
.pola-atual img{aspect-ratio:4/5;object-position:center 18%}
.linha-tempo li .pola{width:min(340px,80%);max-width:none;margin:22px 0 10px 6px}
.linha-tempo li{padding-bottom:34px}
.formacao-texto{margin-top:30px;padding:18px 20px;background:var(--lavanda);border-radius:10px}
.formacao-texto h4{margin:0 0 8px}
.formacao-texto p{margin:0 0 10px}
.formacao-texto p:last-child{margin-bottom:0}

/* 6 · Antes de desenhar: as mesmas fotos, com moldura */
.frase-fotos{display:grid;grid-template-columns:1fr 1fr;max-width:none;gap:0}
@media (max-width:859px){
  .frase-fotos{grid-template-columns:1fr;margin-top:36px}
  .frase-fotos .pola{width:64%}
  .frase-fotos .pola:last-child{justify-self:end;margin-top:-24%}
}
@media (min-width:860px){
  .frase .wrap{grid-template-columns:1fr 520px;gap:40px}
  .frase-fotos{gap:20px;margin-top:0}
}

/* 6 · Realço: 4 polaroids em grade */
.montagem{gap:16px 14px;max-width:none;margin-top:28px}
.montagem .pola{padding:7px 7px 20px}
.montagem .pola img{aspect-ratio:4/5}
@media (min-width:860px){
  .montagem{gap:22px 20px;max-width:490px}
  .montagem .pola{padding:9px 9px 26px}
  .cap-realco>div:first-child{align-self:start}
}
@media (min-width:860px) and (min-height:820px){.cap-realco>div:first-child{position:sticky;top:96px}}

/* 5 · lista de serviços: o mesmo + da paramédica */
.srv{--srv-borda:rgba(198,202,235,.2);--srv-nome:#fff;--srv-sub:#c6caeb;--srv-texto:#dde1ea;--srv-tit:#ffd1e4;--srv-fundo:rgba(198,202,235,.07);--sinal:#fff;--sinal-borda:rgba(198,202,235,.45);border-top:1px solid var(--srv-borda);transition:background-color .3s var(--curva)}
.srv:last-child{border-bottom:1px solid var(--srv-borda)}
.removo .srv{--srv-borda:rgba(29,36,61,.16);--srv-nome:var(--tinta);--srv-sub:var(--suave);--srv-texto:var(--suave);--srv-tit:var(--rosa-1);--srv-fundo:rgba(255,255,255,.55);--sinal:var(--rosa-1);--sinal-borda:rgba(173,24,88,.4)}
.srv[open]{background:var(--srv-fundo)}
.itens.srv-lista{gap:0}
.abre>summary::before,.abre>summary::after{content:none}
.abre>summary{padding-right:58px}
.srv>summary{display:block;padding:20px 62px 20px 12px;min-height:72px}
.srv-nome{display:block}
.srv-nome b{display:block;font:400 19px/1.3 var(--sub),Georgia,serif;color:var(--srv-nome)}
.srv-nome small{display:block;margin-top:6px;max-width:52ch;font-size:14.5px;line-height:1.55;color:var(--srv-sub)}
.srv[open] .srv-nome small{display:none}
@media (hover:hover){.srv>summary:hover{background:var(--srv-fundo)}.srv>summary:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}}

/* o sinal: círculo com + que gira e vira − */
.mais{--sinal:var(--azul);--sinal-borda:rgba(54,95,157,.4);position:absolute;right:8px;top:50%;width:40px;height:40px;margin-top:-20px;border:1.5px solid var(--sinal-borda);border-radius:50%;transition:background-color .25s var(--curva),border-color .25s var(--curva),transform .35s var(--curva)}
.srv .mais{--sinal:inherit;--sinal-borda:inherit}
.srv>summary .mais{border-color:var(--sinal-borda);top:20px;margin-top:0;right:12px}
.mais::before,.mais::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;border-radius:2px;background:var(--sinal);transition:transform .35s var(--curva),background-color .25s}
.mais::after{transform:rotate(90deg)}
.abre[open]>summary .mais{background:var(--rosa-1);border-color:var(--rosa-1);transform:rotate(180deg)}
.abre[open]>summary .mais::before,.abre[open]>summary .mais::after{background:#fff}
.abre[open]>summary .mais::after{transform:rotate(0)}
@media (hover:hover){.abre:not([open])>summary:hover .mais{background:var(--rosa-1);border-color:var(--rosa-1)}.abre:not([open])>summary:hover .mais::before,.abre:not([open])>summary:hover .mais::after{background:#fff}}
.areola-info.abre>summary,.areola-cuidado .abre>summary{min-height:56px}

/* painel que abre */
.srv-corpo{padding:0 12px 24px}
.srv-texto{min-width:0}
.srv-corpo p{margin:0 0 12px;font-size:16px;line-height:1.65;color:var(--srv-texto)}
.srv-corpo .srv-intro{font-size:17px;color:var(--srv-nome)}
.srv-corpo h4{margin:20px 0 6px;font:400 18px/1.3 var(--sub),Georgia,serif;color:var(--srv-tit)}
.srv-texto>h4:first-child{margin-top:0}
.srv-corpo .srv-frase{margin:20px 0 0;padding:14px 16px;border-left:3px solid var(--rosa-1);font:400 18px/1.45 var(--titulo),Georgia,serif;color:var(--srv-nome)}
.srv-importante{margin-top:20px;padding:16px 18px;border:1px solid var(--srv-borda);border-radius:10px;background:var(--srv-fundo)}
.srv-importante span{display:block;font:400 13px var(--detalhe);letter-spacing:.08em;color:var(--srv-tit)}
.srv-importante h4{margin:6px 0}
.srv-importante p:last-child{margin:0}
.srv-corpo .srv-nota{margin-top:18px;font-size:14px;line-height:1.5;color:var(--srv-sub)}
.srv-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:14px}
.srv-ad{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--srv-nome);text-underline-offset:4px}
.srv-foto{width:min(62%,240px);margin:6px auto 22px}
.srv-par{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 22px}
.srv-par img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}
@media (min-width:1200px){
  .srv-corpo.tem-foto{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:0 26px;align-items:start}
  .srv-corpo.tem-foto .srv-foto{grid-column:2;grid-row:1;width:100%;margin:4px 0 0}
  .srv-corpo.tem-foto .srv-texto{grid-column:1;grid-row:1}
}

/* 5 e 7 · Removo: lista de um lado, fotos do outro */
.removo-grade{display:grid;gap:30px}
/* celular: título, lista, barrinha */
.removo-esq,.removo-fotos{display:contents}
.removo-cab{order:1}
.removo-lista{order:3;min-width:0}
.etapas{order:4}
.removo-cab .titulo{margin-top:10px}
.removo-fim{display:block;margin-top:26px}
@media (min-width:860px){
  .removo-grade{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
  .removo-esq{display:grid;gap:28px;min-width:0}
  .removo-fotos{display:grid;gap:34px;min-width:0}
  .etapas{order:0}
}

/* 7 · laser: um quadro só, 3 etapas */
.etapas{min-width:0}
.etapas-quadro{position:relative;aspect-ratio:777/622;overflow:hidden;border-radius:8px;background:#ddd;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;box-shadow:0 16px 34px -20px rgba(29,36,61,.5)}
.etapa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;will-change:opacity}
.etapa[data-i="1"],.etapa[data-i="2"]{opacity:0}
.etapas-barra{--v:0;position:relative;height:56px;margin:2px 0 0;touch-action:pan-y;cursor:grab;outline:0}
.etapas-barra.pegou{cursor:grabbing}
.etapas-trilho{position:absolute;left:22px;right:22px;top:50%;height:6px;margin-top:-3px;border-radius:6px;background:rgba(29,36,61,.16)}
.etapas-cheio{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v)*50%);border-radius:6px;background:var(--rosa-1)}
.etapas-trilho i{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(29,36,61,.3)}
.etapas-trilho i:nth-of-type(1){left:0}
.etapas-trilho i:nth-of-type(2){left:50%}
.etapas-trilho i:nth-of-type(3){left:100%}
.etapas-puxador{position:absolute;top:50%;left:calc(22px + (100% - 44px)*var(--v)/2);width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;border-radius:50%;background:var(--rosa-1);box-shadow:0 6px 16px -4px rgba(29,36,61,.55);transition:transform .2s var(--curva)}
.etapas-puxador svg{width:24px;height:24px;fill:#fff}
.etapas-barra.pegou .etapas-puxador{transform:scale(1.1)}
.etapas-barra:focus-visible .etapas-puxador{outline:3px solid var(--azul);outline-offset:3px}
.etapas-rotulos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.etapas-rotulos button{min-height:44px;padding:4px 2px;border:0;background:none;font:600 14px/1.25 "Segoe UI",Arial,sans-serif;color:var(--suave);cursor:pointer;transition:color .2s}
.etapas-rotulos button:nth-child(1){text-align:left}
.etapas-rotulos button:nth-child(3){text-align:right}
.etapas-rotulos button.on{color:var(--rosa-1);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* 8 · antes e depois: título ao lado, grade que recebe novas fotos */
.resultados-prontos,.resultados-prontos.duas{display:grid;grid-template-columns:1fr;gap:28px 24px;margin-top:30px}
.montagem-ad img{box-shadow:0 16px 34px -22px rgba(29,36,61,.5)}
.montagem-ad figcaption{margin-top:10px}
@media (min-width:600px){.resultados-prontos,.resultados-prontos.duas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){
  .resultados .wrap{display:grid;grid-template-columns:330px minmax(0,1fr);column-gap:60px;align-items:start}
  .resultados .wrap>.sobe:first-child{grid-column:1;grid-row:1/3;position:sticky;top:110px}
  .resultados-prontos,.resultados-prontos.duas{grid-column:2;margin-top:0}
  .resultados .mais-insta{grid-column:2}
}

/* 9 · Vamos conversar: os três botões em uma linha no web */
.contato-final .contato-bloco{max-width:none}
@media (min-width:860px){
  .contato-bloco .acoes{flex-wrap:nowrap}
  .contato-bloco .acoes .btn{white-space:nowrap}
}

/* 10 · rodapé */
.rodape .desenvolvido{justify-self:center;width:100%;margin-top:10px;text-align:center;font-size:12px;color:var(--suave)}

/* rodada 8: Serviços com o mesmo capricho de Quem sou */
.areola-foto{margin:0;overflow:hidden}
.areola-foto img{display:block;width:100%;height:100%;object-fit:cover}
.srv[open]>summary b,.srv[open]>summary:hover b{text-decoration:none}
.srv[open] .srv-foto{animation:srvFoto .7s var(--curva) both}
@keyframes srvFoto{from{opacity:0;transform:translateY(18px) rotate(calc(var(--r,0deg)*3))}to{opacity:1;transform:rotate(var(--r,0deg))}}
@media (min-width:1200px){.srv-corpo.tem-foto .srv-foto{position:sticky;top:96px}}
/* Realço com duas fotos grandes, na medida das de Quem sou */
@media (min-width:860px){
  .cap-realco .montagem{display:block;max-width:520px;margin-top:34px}
  .cap-realco .montagem .pola{width:62%;padding:11px 11px 32px}
  .cap-realco .montagem .pola:last-child{margin:-11% 0 0 auto}
}
@media (min-width:1200px){.srv-corpo.tem-foto{grid-template-columns:minmax(0,1fr) 232px}}
/* as duas fotos do Realço cabem inteiras na tela enquanto a lista rola */
@media (min-width:860px) and (min-height:820px){.cap-realco>div:first-child{top:min(96px,calc(100vh - 890px))}}

/* ajustes do Gubs, 04/11: paramédica com composição, seções mais próximas e rodapé centralizado */
.areola-monta{grid-template-columns:1fr 1fr;align-items:start;gap:14px;max-width:440px}
.areola-monta .areola-ex-material{grid-column:1;grid-row:1}
.areola-monta .areola-ex-material img{aspect-ratio:1/1}
.areola-monta .areola-foto{grid-column:2;grid-row:1;align-self:center;width:100%;max-width:190px!important}
.areola-ex{padding:7px 7px 8px}
.areola-ex figcaption{margin-top:6px;font-size:11px}
.srv-foto figcaption{margin-top:6px;font-size:11px}

body section.historia,body section.removo,body section.avaliacoes,body section.horarios{padding-top:60px;padding-bottom:60px}
body section.frase{padding:60px 0}
body section.servicos{padding-top:56px;padding-bottom:60px}
body section.contato-final{padding:52px 0}
body section.areola{padding-top:60px;padding-bottom:24px}
body section.resultados{padding-top:24px;padding-bottom:24px}
body section.instagram{padding-top:24px;padding-bottom:60px}
@media (min-width:860px){
  body section.historia,body section.removo,body section.avaliacoes,body section.horarios{padding-top:88px;padding-bottom:88px}
  body section.frase{padding:88px 0}
  body section.servicos{padding-top:72px;padding-bottom:88px}
  body section.contato-final{padding:72px 0}
  body section.areola{padding-top:88px;padding-bottom:32px}
  body section.resultados{padding-top:32px;padding-bottom:32px}
  body section.instagram{padding-top:32px;padding-bottom:88px}
}

footer.rodape .wrap{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
footer.rodape .wrap>*{width:auto;max-width:100%;margin-inline:auto;text-align:center}
footer.rodape .wrap>img.logo-rodape{display:block;width:min(300px,72vw);height:auto}

/* Fotos dos serviços sem legenda: moldura sem espaço reservado ao texto. */
.pola.srv-foto:not(:has(figcaption)),.pola.areola-ex:not(:has(figcaption)){padding-bottom:12px}

/* rodada de 04/11: ajustes da reunião com a Cheila */
/* capa: Realço vem primeiro e leva a cor; selo do pioneirismo */
.hero h1 span:nth-child(3) i{color:inherit}
.hero h1 span:first-child i{color:var(--rosa-1)}
.hero .ano.selo-pioneira{font:400 clamp(20px,2vw,25px)/1.25 var(--sub);letter-spacing:0;color:var(--tinta)}
.selo-pioneira b{font-weight:400;color:var(--rosa-1)}
.hero .sub-2{margin-top:12px}
@media (min-width:860px){.hero .sub-2{margin-top:12px}}
/* capa em camadas: estúdio atrás, ela na frente com a cabeça saindo do quadro */
.foto-3d{aspect-ratio:4/5;background:none}
.foto-3d img{aspect-ratio:auto;object-position:center bottom;border-radius:0}
.motion .foto-3d img{animation:none}
.foto-3d .capa-fundo{position:absolute;inset:17.8% 0 0;overflow:hidden;border-radius:6px;background:#d9d5d2}
.foto-3d .capa-fundo img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);will-change:transform}
.foto-3d .capa-ela{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;transform:scale(1.03);will-change:transform;filter:drop-shadow(0 10px 22px rgba(29,36,61,.28))}
.foto-3d::after{inset:17.8% 0 0;z-index:2;pointer-events:none}
.foto-3d figcaption{z-index:3}
/* linha do tempo: 1990 e Hoje inteiras */
.linha-tempo .foto-inteira img{aspect-ratio:auto;height:auto}
/* frase: uma imagem só */
.frase-unica{display:block}
.frase-unica .pola{width:min(380px,84%);margin:0 auto}
.frase-unica .pola:last-child{margin:0 auto}
.frase-video{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#ddd}
@media (min-width:860px){
  .frase .wrap{grid-template-columns:1fr 400px}
  .frase-unica .pola{width:100%}
}
/* serviço com foto deitada */
.srv-foto-deitada img{aspect-ratio:4/3}
/* Realço: quatro fotos em grade, sem sobrepor */
.cap-realco .montagem{display:grid;grid-template-columns:1fr 1fr}
.cap-realco .montagem .pola:last-child{margin:0}
@media (min-width:860px){
  .cap-realco .montagem{display:grid;max-width:520px;gap:18px}
  .cap-realco .montagem .pola{width:auto;padding:9px 9px 24px}
  .cap-realco .montagem .pola:last-child{margin:0}
}
/* paramédica: uma foto, maior */
.areola-monta{display:block;max-width:none}
.areola-monta .areola-foto{width:min(340px,78vw);max-width:none!important;margin:0 auto}
.areola-monta .areola-foto img{height:auto;aspect-ratio:9/16;border-radius:12px}
/* comparador: arrasta em qualquer ponto; a barra convida ao aparecer */
.resultados-prontos .caso{min-width:0}
.compara:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.compara img{display:block}
.compara .barra::after{box-shadow:0 2px 10px rgba(10,14,26,.35)}
/* a foto de rosa aparece inteira */
.areola-monta .areola-foto{aspect-ratio:auto}
@media (min-width:860px){.foto-3d{width:min(100%,calc((100svh - 210px)*.8));margin-left:auto}}

/* rodada 2 (06/11): fotos quadradas nos serviços */
.srv-foto-quadrada img{aspect-ratio:1}

/* rodada 2 (06/11): resultados em grupos por serviço; poucos por vez, sem janela */
.res-grupos{min-width:0;margin-top:30px}
.res-grupo+.res-grupo{margin-top:46px}
.res-grupo-titulo{margin:0 0 14px;font-size:21px;line-height:1.25;color:var(--tinta)}
.res-grupo .resultados-prontos{margin-top:0}
.res-grupo.fechado .caso:nth-child(n+2){display:none}
.res-mais{display:none;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:16px;padding:8px 16px;border:1px solid currentColor;border-radius:999px;background:none;color:var(--tinta);font:600 14px/1.2 "Segoe UI",Arial,sans-serif;cursor:pointer}
.res-grupo.fechado .res-mais{display:flex}
.caso .etapas-quadro{aspect-ratio:4/3;border-radius:14px}
@media (min-width:600px){
  .res-grupo.fechado .caso:nth-child(n+2){display:block}
  .res-grupo.fechado .caso:nth-child(n+3){display:none}
  .res-grupo.fechado.n2 .res-mais{display:none}
  .res-mais{width:auto;margin-inline:auto}
}
@media (min-width:1024px){
  .res-grupos{grid-column:2;margin-top:0}
}

/* ===== missão 09/11 (Fresa): topo, selo, mapa, toque ===== */
/* topo no celular: fundo opaco e linha de baixo; antes era 94% transparente, da mesma cor da página,
   e o conteúdo parecia correr por dentro da barra ao rolar */
.topo,.topo.solido{background:#eeeff9;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 rgba(29,36,61,.12),0 10px 18px -14px rgba(29,36,61,.45)}
/* atalhos com área de toque maior */
.topo .atalhos{padding-bottom:5px}
.topo .atalhos a{display:inline-flex;align-items:center;min-height:36px}
.perfil-info a{min-height:44px;display:flex;align-items:center;justify-content:center}
.fonte a,.rodape-horario a[href="#horarios"]{display:inline-block;padding:12px 4px;margin:-12px -4px}

/* selo "Resultado imediato" nas fotos de antes e depois (lado do depois) */
.selo-imediato{position:absolute;right:10px;bottom:10px;z-index:3;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--tinta,#1d243d);font:600 11px/1.2 "Segoe UI",Arial,sans-serif;letter-spacing:.01em;pointer-events:none;box-shadow:0 2px 8px -3px rgba(29,36,61,.4)}
.etapas .selo-imediato{opacity:clamp(0,calc(var(--v,0) - 1),1);transition:opacity .15s}

/* mapa: capa que carrega o Google Maps só ao tocar */
.mapa-capa{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;color:var(--tinta,#1d243d);font:inherit;background:#e6e8f3 radial-gradient(circle at 50% 40%,#fff 0,transparent 70%);border:1px solid rgba(29,36,61,.12)}
.mapa-capa svg{width:34px;height:34px;fill:var(--vinho,#9b2c5a)}
.mapa-capa b{font-size:16px}
.mapa-capa small{font-size:13px;opacity:.75}
.mapa-capa:hover,.mapa-capa:focus-visible{background-color:#dfe2f0}