:root {
  color-scheme: light;
  --cream: #fbf6ef;
  --paper: #fffbf6;
  --blush: #f3e2de;
  --espresso: #2e1e1a;
  --ink: #37241f;
  --muted: #6a5149;
  --rose: #8b4d55;
  --gold: #9a6d3d;
  --line: #e4cfc2;
  --hair: rgb(55 36 31 / .09);
  --metal: linear-gradient(110deg, #c39762 0%, #f2d9a6 46%, #d6ae78 72%, #e9c695 100%);
  --serif: "Baskervville", "Baskerville", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --r-lg: 2rem;
  --shadow-soft: 0 1px 2px rgb(74 44 32 / .04), 0 12px 32px -12px rgb(74 44 32 / .14), 0 40px 80px -40px rgb(74 44 32 / .18);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; accent-color: var(--rose); caret-color: var(--rose); scrollbar-color: var(--line) var(--cream); -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 1rem/1.7 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--blush); color: var(--ink); }
a { color: inherit; text-underline-offset: .24em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }
p { margin: 0 0 1.2rem; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.02; text-wrap: balance; }
h1 em, h2 em { color: var(--rose); }
h2 { font-size: clamp(2.4rem, 4.8vw, 4rem); letter-spacing: -.035em; }
h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -.025em; }
.wrap { width: min(1180px, calc(100% - 3rem)); margin-inline: auto; }

/* Icons */
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.14em; transition: transform .5s var(--ease); }
a:hover > .icon { transform: translateX(3px); }
a[target="_blank"]:hover > .icon { transform: translate(2px, -2px); }
a[href="#servicios"]:hover > .icon { transform: translateY(2px); }

/* Header: floating island */
.site-header { position: sticky; top: 0; z-index: 10; padding: 1rem 1.5rem 0; }
.header-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(1180px, 100%);
  margin-inline: auto;
  padding: .55rem .6rem .55rem 1.6rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgb(251 246 239 / .8);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 30px -18px rgb(74 44 32 / .35);
}
.brand { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand span { font: italic 2.1rem/.9 var(--serif); letter-spacing: -.04em; padding-inline: .1em; }
.brand small { margin-top: .4rem; font-size: .7rem; font-weight: 600; letter-spacing: .22em; }
nav { display: flex; align-items: center; gap: clamp(.4rem, 2vw, 1.4rem); }
.nav-link { position: relative; padding: .4rem .2rem; font-size: .9rem; font-weight: 500; text-decoration: none; }
.nav-link::after { content: ""; position: absolute; left: .2rem; right: .2rem; bottom: .2rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* Buttons: pill with nested icon island */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: .45rem .45rem .45rem 1.5rem;
  border: 1px solid rgb(154 109 61 / .55);
  border-radius: 999px;
  background: var(--metal);
  color: #36241a;
  font: 600 .93rem/1.4 var(--sans);
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), 0 8px 20px -10px rgb(97 63 41 / .45);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.button > .icon {
  width: 2.2rem;
  height: 2.2rem;
  padding: .62rem;
  border-radius: 50%;
  background: rgb(54 36 26 / .1);
  vertical-align: middle;
  transition: transform .5s var(--ease), background-color .5s var(--ease);
}
.button:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), 0 14px 28px -12px rgb(97 63 41 / .55); }
.button:hover > .icon { transform: translate(3px, -1px) scale(1.05); background: rgb(54 36 26 / .16); }
.button:active { transform: scale(.98); }
.button-small { padding-left: 1.15rem; font-size: .86rem; }
.button-small > .icon { width: 1.9rem; height: 1.9rem; padding: .5rem; }
.button-light { background: var(--paper); border-color: transparent; color: var(--espresso); box-shadow: none; }
.button-light:hover { box-shadow: 0 14px 28px -14px rgb(0 0 0 / .5); }
.button-light > .icon { background: var(--blush); }
.button-block { width: 100%; justify-content: space-between; }

.text-link { display: inline-flex; align-items: center; gap: .45rem; font-size: .92rem; font-weight: 600; }

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 7rem);
  padding-block: clamp(3.5rem, 9vw, 8rem) clamp(4.5rem, 10vw, 9rem);
}
h1 { font-size: clamp(3.4rem, 8vw, 6rem); letter-spacing: -.04em; line-height: .94; }
.hero-lede { max-width: 34ch; margin-block: 1.8rem 2.4rem; color: var(--muted); font-size: clamp(1.02rem, 1.4vw, 1.15rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.8rem; }
.hero-figure { position: relative; margin: 0; }
.bezel {
  padding: .45rem;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: rgb(55 36 31 / .035);
  box-shadow: var(--shadow-soft);
}
.bezel-core {
  height: 100%;
  border-radius: calc(var(--r-lg) - .45rem);
  background: var(--paper);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .9), 0 0 0 1px rgb(55 36 31 / .05);
}
.bezel-arch { border-radius: 50% 50% var(--r-lg) var(--r-lg) / 32% 32% var(--r-lg) var(--r-lg); }
.bezel-arch img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.12;
  object-fit: cover;
  object-position: center 44%;
  border-radius: 50% 50% calc(var(--r-lg) - .45rem) calc(var(--r-lg) - .45rem) / 31% 31% calc(var(--r-lg) - .45rem) calc(var(--r-lg) - .45rem);
}
.hero-note {
  position: absolute;
  left: -2.2rem;
  bottom: 2.4rem;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .95rem 1.25rem;
  border: 1px solid var(--hair);
  border-radius: 1.1rem;
  background: rgb(255 251 246 / .94);
  box-shadow: var(--shadow-soft);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--muted);
  rotate: -2deg;
}
.hero-note strong { color: var(--ink); font-weight: 600; }
.dot { flex: none; width: .55rem; height: .55rem; margin-top: .4rem; border-radius: 50%; background: #6f9a6a; box-shadow: 0 0 0 4px rgb(111 154 106 / .18); }

/* Services: asymmetric bento */
.services { padding-block: clamp(5rem, 11vw, 9rem); background: var(--blush); }
.section-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head p { max-width: 38ch; margin: 0 0 .4rem auto; color: var(--muted); }
.service-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
.service { grid-column: span 5; transition: transform .7s var(--ease); }
.service:hover { transform: translateY(-4px); }
.service-feature { grid-column: span 7; grid-row: span 2; }
.service .bezel-core { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.6rem, 3vw, 2.4rem); }
.service p { margin: .9rem 0 1.8rem; color: var(--muted); max-width: 36ch; }
.ornament { width: 1.6rem; height: 1.6rem; fill: var(--gold); margin-bottom: 1.4rem; }
.service-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: auto; color: var(--rose); font-weight: 600; font-size: .9rem; }
.service-feature .bezel-core {
  min-height: 26rem;
  padding: clamp(2rem, 4vw, 3.2rem);
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(195 151 98 / .32), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgb(139 77 85 / .35), transparent 60%),
    var(--espresso);
  color: #f7ece2;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .12);
}
.service-feature .ornament { width: 2.2rem; height: 2.2rem; margin-bottom: auto; fill: #e3c08c; }
.service-feature h3 { margin-top: 3rem; font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
.service-feature p { color: rgb(247 236 226 / .8); font-size: 1.05rem; }

/* Visit + booking */
.visit { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem, 7vw, 7rem); align-items: center; padding-block: clamp(5rem, 11vw, 9rem); }
.visit-info h2 { margin-bottom: 2.2rem; }
.facts { display: grid; gap: 1.4rem; margin: 0 0 2.2rem; }
.facts div { padding-top: 1.1rem; border-top: 1px solid var(--line); }
.facts dt { margin-bottom: .3rem; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.facts dd { margin: 0; color: var(--muted); }
.booking .bezel-core { padding: clamp(1.6rem, 4vw, 2.8rem); }
.booking h2 { margin-bottom: 1rem; font-size: clamp(2.2rem, 4vw, 3.2rem); }
.booking .bezel-core > p { color: var(--muted); }
form label { display: block; margin: 1rem 0 .4rem; font-size: .84rem; font-weight: 600; }
form input, form select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 3.1rem;
  border: 1px solid var(--line);
  border-radius: .9rem;
  background: #fffdf9;
  color: var(--ink);
  font: inherit;
  padding: .55rem .9rem;
  box-shadow: inset 0 1px 2px rgb(74 44 32 / .05);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
form input:hover, form select:hover { border-color: #cdb2a2; }
form input:focus, form select:focus { border-color: var(--rose); box-shadow: 0 0 0 4px rgb(139 77 85 / .12); outline: none; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem; }
form .button { margin-top: 1.8rem; }

/* Footer */
footer { background: var(--espresso); color: #efe2d8; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 2.6rem; }
.legal-links { flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; }
.legal-links a, .footer-wa { font-size: .9rem; text-decoration: none; color: rgb(239 226 216 / .82); transition: color .4s var(--ease); }
.legal-links a:hover, .footer-wa:hover { color: #fff; text-decoration: underline; }

/* Legal pages */
.legal { max-width: 46rem; padding-block: clamp(3rem, 8vw, 6rem); }
.legal h1 { font-size: clamp(2.8rem, 6vw, 4.4rem); }
.legal-date { margin-top: 1.1rem; color: var(--muted); font-size: .88rem; }
.legal h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.025em; margin: 2.6rem 0 .8rem; }
.legal p, .legal li { color: var(--muted); }
.legal strong { color: var(--ink); }
.legal ul, .legal ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.legal li { margin-bottom: .45rem; }
.legal a { color: var(--rose); }

/* Scroll reveal (only when JS is on) */
.js .reveal { opacity: 0; transform: translateY(2.2rem); filter: blur(6px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 1s var(--ease-out); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }
.js .service.reveal.is-in:hover { transform: translateY(-4px); transition-delay: 0s; }

@media (max-width: 860px) {
  .hero, .visit { grid-template-columns: 1fr; }
  .hero-figure { width: min(100%, 460px); margin-inline: auto; }
  .hero-note { left: -.5rem; bottom: 1.4rem; rotate: none; }
  .section-head { grid-template-columns: 1fr; }
  .section-head p { margin-left: 0; }
  .service, .service-feature { grid-column: 1 / -1; grid-row: auto; }
  .service-feature .bezel-core { min-height: 20rem; }
  .footer-inner { flex-direction: column; text-align: center; }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 2rem); }
  .site-header { padding: .6rem .75rem 0; }
  .header-pill { padding-left: 1.1rem; gap: .6rem; }
  .brand span { font-size: 1.75rem; }
  .nav-link { display: none; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .hero-note { position: relative; left: 0; bottom: 0; margin: -2.2rem 1rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; filter: none; }
}