:root {
  --ivory: #f4f0e8;
  --paper: #faf7f1;
  --sage: #778064;
  --olive: #4d563c;
  --forest: #303724;
  --gold: #b5924d;
  --ink: #23251e;
  --muted: #6d7065;
  --line: rgba(48, 55, 36, .18);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--ivory); font-family: var(--sans); }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; }

.kicker {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* BIO */
.bio-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 5%, rgba(255,255,255,.8), transparent 33%),
    radial-gradient(circle at 90% 85%, rgba(181,146,77,.16), transparent 28%),
    #d9d4c7;
}
.bio-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.bio-card {
  width: min(100%, 480px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 42px;
  background: rgba(250,247,241,.9);
  box-shadow: 0 30px 90px rgba(31,35,24,.18);
}
.bio-visual {
  position: relative;
  height: 330px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(255,255,255,.06), rgba(36,43,29,.68)),
    url("../img/procedimentos/recepção espaço.jpeg") center/cover no-repeat,
    linear-gradient(145deg, #697255, #303724 72%);
}
.bio-visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 100px;
  background: linear-gradient(transparent, rgba(48,55,36,.84));
}
.bio-logo {
  position: relative;
  z-index: 2;
  width: 174px;
  height: 174px;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.18));
}
.bio-eyebrow {
  position: absolute;
  z-index: 3;
  bottom: 24px;
  margin: 0;
  color: rgba(255,255,255,.76);
  font: 500 .68rem var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.bio-orbit { position: absolute; border: 1px solid rgba(244,240,232,.18); border-radius: 50%; }
.orbit-one { width: 310px; height: 310px; }
.orbit-two { width: 430px; height: 190px; transform: rotate(-22deg); }
.bio-content { position: relative; z-index: 4; padding: 34px 34px 30px; text-align: center; }
.bio-content h1 { margin: 0; color: var(--forest); font: 500 3rem/.9 var(--serif); letter-spacing: -.04em; }
.bio-subtitle { margin: 9px 0 0; color: var(--gold); font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.bio-intro { max-width: 340px; margin: 18px auto 26px; color: var(--muted); font: 500 .84rem/1.65 var(--sans); }
.bio-links { display: grid; gap: 11px; }
.bio-link {
  min-height: 67px;
  display: grid;
  grid-template-columns: 42px 1fr 24px;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  text-align: left;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.4);
  transition: transform .25s, background .25s, border-color .25s;
}
.bio-link:hover { transform: translateY(-2px); border-color: var(--gold); background: #fff; }
.link-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--olive); border-radius: 50%; background: rgba(119,128,100,.12); }
.link-icon svg, .floating-whatsapp svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bio-link strong { display: block; color: var(--forest); font: 600 1.06rem var(--serif); }
.bio-link small { display: block; margin-top: 2px; color: var(--muted); font-size: .68rem; }
.icon-arrow { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.arrow { color: var(--gold); transition: transform .25s; }
.bio-link:hover .arrow { transform: translate(2px,-2px); }
.bio-footer { display: flex; align-items: center; gap: 12px; margin-top: 25px; }
.bio-footer span { height: 1px; flex: 1; background: var(--line); }
.bio-footer p { margin: 0; color: var(--sage); font: 500 .62rem var(--sans); letter-spacing: .12em; text-transform: uppercase; }

/* PROCEDIMENTOS */
.procedures-page { background: var(--paper); }
.site-header {
  width: min(100% - 56px, 1240px);
  height: 96px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand img { width: 112px; height: 70px; object-fit: contain; }
.header-cta, .closing-cta a {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 13px 20px;
  color: #fff;
  background: var(--forest);
  border-radius: 100px;
  text-decoration: none;
  font-size: .75rem;
  letter-spacing: .04em;
}
.header-cta .icon-arrow, .closing-cta a .icon-arrow { color: #d7be83; }
.procedures-hero {
  width: min(100% - 56px, 1240px);
  min-height: 620px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr .9fr;
  align-items: center;
  gap: 80px;
  padding: 72px 0;
}
.hero-copy h1 { max-width: 680px; margin: 0; color: var(--forest); font: 500 clamp(3.5rem,6vw,6.4rem)/.87 var(--serif); letter-spacing: -.055em; }
.hero-copy h1 em { color: var(--sage); font-weight: 400; }
.hero-copy > p:not(.kicker) { max-width: 520px; margin: 28px 0; color: var(--muted); font-size: .88rem; line-height: 1.8; }
.text-link { display: inline-flex; align-items: center; gap: 22px; color: var(--forest); text-decoration: none; border-bottom: 1px solid var(--forest); padding-bottom: 7px; font-size: .78rem; }
.text-link .icon-arrow { color: var(--gold); }
.icon-down { width: 16px; height: 16px; }
.hero-art {
  position: relative;
  aspect-ratio: .82;
  max-height: 520px;
  overflow: hidden;
  border-radius: 230px 230px 28px 28px;
  background: linear-gradient(155deg, rgba(75,84,59,.08), rgba(35,42,28,.42)), url("../img/procedimentos/respire profundamente.jpeg") center/cover no-repeat, linear-gradient(155deg, #9fa68e 0%, #687157 42%, #303724 100%);
}
.hero-art::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 35% 20%, rgba(255,255,255,.38), transparent 33%); }
.hero-art p { position: absolute; z-index: 3; left: 50%; top: 48%; transform: translate(-50%,-50%); margin: 0; color: #fff; text-align: center; font: 500 3rem/.85 var(--serif); }
.hero-art p i { color: #e1ca96; font-weight: 400; }
.sun { position:absolute; left:50%; top:21%; width:180px; height:180px; transform:translateX(-50%); border-radius:50%; background:rgba(239,221,178,.16); box-shadow:0 0 60px rgba(239,221,178,.15); }
.leaf { position:absolute; z-index:2; width:230px; height:430px; border:1px solid rgba(255,255,255,.26); border-radius:100% 0 100% 0; }
.leaf::after { content:""; position:absolute; width:1px; height:100%; left:50%; background:rgba(255,255,255,.22); transform:rotate(25deg); }
.leaf-a { left:-55px; bottom:-110px; transform:rotate(17deg); }
.leaf-b { right:-90px; bottom:-70px; transform:rotate(-35deg) scale(.8); }
.intro-band { padding: 85px max(28px, calc((100% - 920px)/2)); color: var(--ivory); background: var(--forest); text-align: center; }
.intro-band p { margin: 0; font: 400 clamp(2rem,4vw,3.5rem)/1.08 var(--serif); }
.experiences { width: min(100% - 56px, 1240px); margin: auto; padding: 110px 0; }
.section-heading { display: grid; grid-template-columns: 1fr 420px; align-items: end; gap: 60px; margin-bottom: 48px; }
.section-heading h2 { margin: 0; color: var(--forest); font: 500 clamp(3rem,5vw,5rem)/.9 var(--serif); letter-spacing: -.04em; }
.section-heading > p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.8; }
.procedure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.procedure-card { overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: #f1ede4; }
.procedure-card.is-dark { color: #f6f1e8; background: var(--forest); }
.procedure-image {
  position: relative;
  min-height: 270px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 24px;
  background-position: center;
  background-size: cover;
}
.procedure-image::before { content:""; position:absolute; inset:0; background: linear-gradient(145deg, rgba(90,100,76,.18), rgba(34,39,27,.75)); }
.procedure-image span, .procedure-image p { position: relative; z-index: 2; color:#fff; }
.procedure-image span { font: 400 3.2rem var(--serif); }
.procedure-image p { margin:0; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; opacity:.75; }
.image-day { background-image: url("../img/procedimentos/head spa day.jpeg"), linear-gradient(145deg,#b2ad9e,#59634c); }
.image-ouro { background-image: url("../img/procedimentos/head spa ouro.jpeg"), linear-gradient(145deg,#b29a68,#4b4934); }
.image-diamante { background-image: url("../img/procedimentos/head spa diamante.jpeg"), linear-gradient(145deg,#8a9384,#303a32); }
.image-presente { background-image: url("../img/procedimentos/head spa presente.png"), linear-gradient(145deg,#c0a992,#624d40); }
.procedure-content { padding: 30px; }
.procedure-topline { display:flex; justify-content:space-between; color: var(--gold); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; }
.procedure-content h3 { margin: 24px 0 8px; font: 500 clamp(2.2rem,4vw,3.2rem)/.95 var(--serif); }
.duration-badge { display:flex; align-items:center; gap:9px; padding:8px 13px; color:var(--forest); background:rgba(181,146,77,.18); border:1px solid rgba(181,146,77,.42); border-radius:12px; text-transform:none; letter-spacing:0; }
.duration-badge svg { width:22px; height:22px; fill:none; stroke:var(--gold); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.duration-badge span { display:grid; gap:1px; font-size:1rem; line-height:1; }
.duration-badge small { color:var(--muted); font-size:.52rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.is-dark .duration-badge { color:#fff; background:rgba(215,190,131,.13); border-color:rgba(215,190,131,.35); }
.is-dark .duration-badge small { color:rgba(255,255,255,.58); }
.procedure-quote { min-height: 46px; margin:0 0 22px; color:var(--muted); font-size:.78rem; line-height:1.6; }
.is-dark .procedure-quote { color:rgba(255,255,255,.58); }
.details-toggle { width:100%; display:flex; justify-content:space-between; padding:15px 0; color:inherit; border:0; border-top:1px solid currentColor; border-bottom:1px solid currentColor; background:none; cursor:pointer; font-size:.72rem; text-align:left; opacity:.82; }
.details-toggle b { font-size:1.2rem; font-weight:400; transition:transform .25s; }
.details-toggle[aria-expanded="true"] b { transform:rotate(45deg); }
.procedure-details { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.procedure-details > ul { overflow:hidden; }
.details-toggle[aria-expanded="true"] + .procedure-details { grid-template-rows:1fr; }
.procedure-details ul { margin:0; padding:0; list-style:none; }
.procedure-details li { position:relative; padding:9px 0 9px 20px; color:var(--muted); font-size:.72rem; line-height:1.45; border-bottom:1px solid var(--line); }
.procedure-details li::before { content:"✦"; position:absolute; left:0; color:var(--gold); font-size:.58rem; }
.is-dark .procedure-details li { color:rgba(255,255,255,.68); border-color:rgba(255,255,255,.1); }
.card-cta { margin-top:24px; display:inline-flex; align-items:center; gap:18px; color:inherit; text-decoration:none; font-size:.72rem; border-bottom:1px solid currentColor; padding-bottom:5px; }
.card-cta .icon-arrow { color:var(--gold); }
.closing-cta { padding:110px 28px; color:#fff; background:linear-gradient(rgba(48,55,36,.94),rgba(48,55,36,.94)), radial-gradient(circle at center,#778064,#303724); text-align:center; }
.closing-cta h2 { max-width:800px; margin:0 auto; font:400 clamp(3rem,6vw,5.8rem)/.9 var(--serif); letter-spacing:-.04em; }
.closing-cta > p:not(.kicker) { max-width:500px; margin:24px auto; color:rgba(255,255,255,.58); font-size:.82rem; line-height:1.7; }
.closing-cta a { background:var(--paper); color:var(--forest); }
.site-footer { min-height:210px; padding:48px max(28px,calc((100% - 1240px)/2)); display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:24px; background:#e9e4d9; }
.site-footer img { width:140px; height:90px; object-fit:contain; }
.site-footer p { margin:0; color:var(--forest); text-align:center; font:500 1.4rem var(--serif); }
.site-footer div { display:flex; justify-content:flex-end; gap:20px; }
.site-footer a { color:var(--muted); font-size:.68rem; text-decoration:none; }
.floating-whatsapp { position:fixed; z-index:20; right:22px; bottom:22px; width:52px; height:52px; display:grid; place-items:center; color:#fff; background:#657050; border-radius:50%; box-shadow:0 10px 28px rgba(48,55,36,.3); }
.floating-whatsapp svg { width:24px; }

@media (max-width: 800px) {
  .site-header, .procedures-hero, .experiences { width:min(100% - 36px,1240px); }
  .site-header { height:82px; }
  .procedures-hero { min-height:auto; grid-template-columns:1fr; gap:45px; padding:54px 0 70px; }
  .hero-copy h1 { font-size:clamp(3.3rem,15vw,5.4rem); }
  .hero-art { width:100%; max-height:none; }
  .section-heading { grid-template-columns:1fr; gap:22px; }
  .procedure-grid { grid-template-columns:1fr; }
  .experiences { padding:78px 0; }
  .procedure-image { min-height:230px; }
  .site-footer { grid-template-columns:1fr; text-align:center; }
  .site-footer img { margin:auto; }
  .site-footer div { justify-content:center; }
}
@media (max-width: 520px) {
  .bio-shell { padding:0; }
  .bio-card { min-height:100vh; border-radius:0; }
  .bio-visual { height:300px; }
  .bio-content { padding:30px 22px 24px; }
  .bio-content h1 { font-size:2.75rem; }
  .site-header { width:calc(100% - 30px); }
  .brand img { width:96px; height:62px; }
  .procedures-hero, .experiences { width:calc(100% - 30px); }
  .procedure-content { padding:25px 22px; }
  .intro-band { padding:65px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; transition:none !important; }
}