/* Refinamentos da auditoria de design: legibilidade, hero em arco, faixa da marca, escala tipográfica e movimento. */

/* Legibilidade: nenhum texto de conteúdo abaixo de 12px. O logotipo é a única exceção. */
.wordmark small{font-size:9px;line-height:2.4;letter-spacing:.24em;white-space:nowrap}
@media(max-width:600px){.wordmark small{letter-spacing:.14em}}
.media{--media-ink:#3f4a3a}
.media.sand{--media-ink:#5f4f2e}
.media.pale{--media-ink:#555d4a}
.media.clay{--media-ink:#5e4e3f}
.media-label small{letter-spacing:.08em}
.media-label small,.experience-photo-tag{font-weight:500}

/* Barra superior: mais leve, sem peso de faixa escura. */
.topline{background:#eeebe0;color:var(--deep);border-bottom:1px solid var(--line);height:38px;letter-spacing:.12em}
.topline .wrap{height:100%}
@media(max-width:600px){.topline{height:34px;letter-spacing:.08em}}

/* Botão de contato flutuante: vira um círculo discreto e só abre o texto ao receber foco ou mouse. */
.floating-contact{font-size:0;gap:0;padding:0;width:52px;height:52px;justify-content:center;overflow:hidden;white-space:nowrap;transition:width .35s var(--ease),padding .35s var(--ease),gap .35s var(--ease),opacity .3s,transform .3s,visibility .3s}
.floating-contact .contact-dot{width:10px;height:10px;flex:none}
.floating-contact:hover,.floating-contact:focus{font-size:12px;width:184px;padding:0 22px;gap:12px;justify-content:flex-start}
.floating-contact:focus-visible{outline:2px solid #d4bd91;outline-offset:3px}
@media(max-width:600px){.floating-contact{right:14px;bottom:14px;width:48px;height:48px;padding:0}.floating-contact:hover,.floating-contact:focus{font-size:12px;width:176px;padding:0 20px}}
.dialog-open .floating-contact{visibility:hidden}

/* Escala tipográfica: três níveis em vez de um só tamanho de título. */
#como-funciona h2,#faciais h2,#corporais h2,#espaco h2,#protocolos h2{font-size:clamp(42px,5vw,66px);line-height:1.06}
#experience-title,#sobre h2,#depoimentos h2,#faq h2{font-size:clamp(34px,3.5vw,46px)}
#contato h2{font-size:clamp(52px,6.4vw,86px);line-height:1.02}
@media(max-width:600px){#contato h2{font-size:clamp(46px,13vw,60px)}}

/* Hero editorial: foto única de ponta a ponta com um canto amplo e faixa de pilares embutida na base. */
.hero-composition{position:relative;min-height:660px;background:var(--ivory);overflow:hidden}
.hero-media{position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;border-radius:170px 0 0 0;translate:none;transform:none;background:#dce0d3}
.hero-media .media-label{justify-content:center;padding:40px 28px}
.hero-media .media-label small{white-space:normal;max-width:240px;line-height:1.5}
@media(min-width:1600px){.hero-composition{min-height:730px}}
@media(max-width:1100px){.hero-composition{min-height:650px}.hero-media{border-top-left-radius:120px}}
@media(max-width:600px){.hero-composition{aspect-ratio:auto;min-height:0;height:auto;display:block;overflow:visible}.hero-media{position:relative;inset:auto;aspect-ratio:4/4.4;width:100%;border-top-left-radius:90px}}

/* Faixa da marca: respiro de largura total entre duas seções densas. */
.band{position:relative;padding-bottom:0;background:var(--ivory)}
.band-media{height:clamp(300px,36vw,500px);border-radius:0;background:#d8dccf}
.band-media .media-label{justify-content:flex-start;padding-top:48px}
.band-wrap{position:relative;margin-top:calc(clamp(60px,7vw,100px) * -1);margin-bottom:var(--space-section);z-index:2}
.band-card{background:var(--ivory);width:min(100%,640px);padding:clamp(28px,4vw,52px) clamp(24px,4vw,56px) clamp(30px,4vw,48px);border-radius:3px 80px 3px 3px}
.band-quote{font:400 clamp(34px,4.4vw,58px)/1.08 var(--serif);letter-spacing:-.045em;color:var(--ink)}
.band-quote em{color:var(--gold-text);font-style:italic}
.gold-rule{display:block;width:72px;height:2px;background:var(--gold);margin-top:26px;transform-origin:left}
@media(prefers-reduced-motion:no-preference){.band-card .gold-rule{transform:scaleX(0);transition:transform 1s .25s var(--ease)}.band-card.drawn .gold-rule{transform:scaleX(1)}}
@media(max-width:600px){.band-wrap{margin-top:-48px;margin-bottom:calc(var(--space-section) * .55)}.band-card{border-top-right-radius:50px}}

/* Placeholders com intenção: composições diferentes por tipo, sem repetir o mesmo retângulo. */
.treatment-card:nth-child(odd) .treatment-media{border-radius:999px 999px 3px 3px}
.treatment-card:nth-child(even) .treatment-media{border-radius:3px 3px 90px 3px}
.team-grid>article:nth-child(2) .team-media{border-radius:999px 999px 3px 3px}
.team-grid>article:nth-child(3) .team-media{border-radius:3px 3px 3px 70px}
.treatment-card:hover .treatment-media{border-radius:3px}

/* Movimento discreto: deslocamento leve e revelação em sequência (a sequência está em site.js). */
.hero-media,.hero-inset,.band-card{will-change:translate}
.band-card{translate:0 calc(var(--py-c,0) * 1px)}
@media(prefers-reduced-motion:reduce){.hero-media,.hero-inset,.band-card{translate:none!important}}
.experience-photo-tag{color:var(--deep)}

/* Cartões de tratamento: superfície própria, informações práticas e ação ocupando a largura. */
.treatment-card{background:#fcfbf7;border:1px solid var(--line);border-radius:3px;padding:14px 14px 20px;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.treatment-card:hover,.treatment-card:focus-within{transform:translateY(-5px);border-color:#c3c9b6;box-shadow:0 12px 26px #2831221a}
.treatment-card .treatment-media{margin-bottom:22px}
.treatment-card h3,.treatment-card p{padding-inline:6px}
.treatment-card p{margin-bottom:18px}
.treatment-facts{margin:0 0 20px;padding:14px 6px 0;border-top:1px solid var(--line);width:100%;display:grid;gap:10px}
.treatment-facts div{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.treatment-facts dt{font-size:12px;letter-spacing:.06em;color:var(--gold-text);text-transform:uppercase;flex:none}
.treatment-facts dd{margin:0;font-size:13px;color:var(--ink);text-align:right}
body .treatment-card .text-link{width:100%;margin-top:auto}
@media(max-width:600px){.treatment-card{flex-basis:86%;padding:12px 12px 18px}}
@media(prefers-reduced-motion:reduce){.treatment-card:hover,.treatment-card:focus-within{transform:none}}

/* Queixas: ação do cartão em destaque preenchida, os demais com borda. */
body .concern-list[data-active-category="rosto"]>button:first-child>i{background:var(--olive);border-color:var(--olive);color:#fff}
body .concern-list>button:hover>i,body .concern-list>button:focus-visible>i{background:var(--olive);border-color:var(--olive);color:#fff}
.treatment-card p{flex:1 1 auto}