/* Photographic presentation. Original clinical images remain unretouched. */
:root { --bg:#fbf8f4; --blush:#f0e6e0; --border:#e5d8d0; --muted:#71635e; --ink:#42342e; }
.header { background:rgba(251,248,244,.97); }
.hero { gap:72px; padding-block:64px 80px; }
.hero h1 { font-size:clamp(42px,4.4vw,64px); }
.hero-visual { margin:0; padding:0 0 50px; }
.hero-visual:before { display:none; inset:24px -16px 30px 24px; border-radius:4px; transform:none; background:#e7d8cc; }
.hero-visual .portrait { aspect-ratio:1; border-radius:4px; border:0; }
.portrait img { object-position:center; }
.photo-note { left:24px; right:-16px; bottom:0; padding:22px 14px; background:#f4ece5; border:0; }
.vertical-caption { display:none; }
.about-visual .portrait { aspect-ratio:1; border-radius:4px; border:0; }
.about { background:#f0e6e0; }
.treatments { background:#f4eee8; }
.treatment-grid { gap:40px 32px; align-items:start; }
.treatment-card { border:0; border-radius:4px; background:var(--bg); box-shadow:0 8px 28px #49363806; }
.treatment-card:hover { transform:none; }
.treatment-card .treatment-image { aspect-ratio:4/3; background:#e6dcd3; border:0; }
.treatment-card .treatment-image>img { object-fit:cover; }
.treatment-card [data-image="peelings"]>img { object-fit:cover; }
.treatment-card [data-image="micropigmentacao"].has-image>img { object-fit:cover; }
.treatment-card [data-image="preenchimento"].has-image>img { object-fit:cover; }
.treatment-content { padding:24px 30px 30px; }
.treatment-content h3 { margin-bottom:12px; }
.treatment-content p { min-height:78px; }
.treatment-content::before { content:'REGISTRO REAL · LUH OLIVEIRA BEAUTY'; font:600 10px var(--sans); letter-spacing:1.6px; color:#80685a; margin-bottom:14px; }
.gallery-intro { font-size:13px; margin:0 0 26px; max-width:650px; }
.gallery-open { position:absolute; inset:0; z-index:3; border:0; background:transparent; cursor:zoom-in; color:var(--ink); }
.gallery-open span { position:absolute; bottom:12px; right:12px; border:1px solid #e5d8d0; background:var(--bg); padding:8px 12px; font-size:11px; border-radius:3px; box-shadow:0 2px 12px #00000012; }
.gallery-open:hover span { background:white; }
.gallery-open:focus-visible { outline-offset:-5px; }
.comparison { border-radius:4px; background:transparent; padding:0; border:0; }
.comparison-montage .image-label { bottom:auto; top:12px; }
.photo-viewer { width:min(1080px,calc(100% - 32px)); max-height:92dvh; padding:20px; border-radius:6px; }
.photo-viewer::backdrop { background:#211c19db; }
.photo-viewer header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; }
.photo-viewer h2 { font-size:25px; margin:0; }
.photo-viewer .dialog-close { position:static; flex-shrink:0; width:44px; height:44px; }
.photo-viewer img { width:100%; height:auto; max-height:70dvh; object-fit:contain; background:#eee6de; }
.photo-viewer p { font-size:12px; margin:14px 0 0; }
body:has(.photo-viewer[open]) { overflow:hidden; }
@media(min-width:641px) {
  .treatment-grid>.treatment-card:last-child:nth-child(odd) { width:100%; display:grid; grid-template-columns:1fr 1fr; align-items:center; }
  .treatment-grid>.treatment-card:last-child .treatment-image { border:0; }
}
@media(max-width:900px) { .hero { gap:32px; } .photo-note { font-size:10px; gap:6px; } .treatment-content { padding:22px; } }
@media(max-width:640px) {
  .hero { padding-block:36px 50px; gap:36px; }
  .hero h1 { font-size:43px; }
  .hero-visual { margin-inline:0 12px; padding-bottom:42px; }
  .hero-visual:before { right:-12px; }
  .photo-note { right:-12px; left:12px; padding:16px 10px; }
  .treatment-grid { gap:26px; }
  .treatment-content p { min-height:0; }
  .treatment-card .treatment-image { border:0; }
  .gallery-open span { bottom:8px; right:8px; }
  .photo-viewer { padding:14px; }
  .photo-viewer h2 { font-size:21px; }
}

.treatment-card:has([data-image=skinbooster]) .treatment-content::before, .treatment-card:has([data-image=peelings]) .treatment-content::before { content:'IMAGEM ILUSTRATIVA'; }

.map-address { text-align:center; padding-inline:20px; margin:12px 0; font-size:14px; }

/* Mapa incorporado do Google Maps na seção de localização. */
.map-card { border:1px solid #ddc8c5; border-radius:5px; overflow:hidden; background:#eaddd8; box-shadow:0 8px 28px #49363808; }
.map-embed { display:block; width:100%; height:340px; border:0; background:#eaddd8; }
.map-info { display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; padding:18px 22px; background:var(--bg); }
.map-info .map-address { text-align:left; padding:0; margin:0; font-size:13px; line-height:1.6; color:var(--muted); }
.map-info .map-address strong { color:var(--ink); font-weight:600; }
.map-info .text-link { padding-top:0; }
@media(max-width:640px) { .map-embed { height:260px; } .map-info { padding:16px; } }

/* Ícones em SVG (sem emoji): herdam cor e tamanho do texto. */
.icon { display:inline-block; width:.8em; height:.8em; vertical-align:-.08em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.button .icon, .text-link .icon { width:.75em; height:.75em; }
.trust-items i .icon { width:.85em; height:.85em; stroke-width:1.6; }
.note-flower .icon, .cta-flower .icon { width:.75em; height:.75em; stroke-width:1.4; }
.note-flower { display:inline-flex; vertical-align:middle; }
.dialog-close .icon { width:.75em; height:.75em; stroke-width:1.6; }
.footer-bottom a .icon { width:1em; height:1em; vertical-align:-.15em; }
.gallery-open span .icon { width:1em; height:1em; vertical-align:-.15em; }