/* Identidad propia de Dynastic Spa: agua, azul profundo y acento naranja del logotipo oficial. */
:root {
  --ink: #07364f;
  --muted: #547284;
  --cream: #eaf7fa;
  --white: #fff;
  --gold: #ff8a2a;
  --dark: #042f4a;
  --line: #c9e5eb;
  --aqua: #3bd0d1;
  --sans: Arial, Helvetica, sans-serif;
}

body { background: #eaf7fa; color: var(--ink); }
h1, h2, h3, .treatment-feature h3 { font-family: var(--sans); letter-spacing: -.055em; }
h1, h2 { font-weight: 700; }
h1 i, h2 i, .treatment-feature i { font-weight: 400; font-style: normal; color: #19bac4; }
h2 { font-size: clamp(2.65rem, 5vw, 5.25rem); line-height: 1.04; }

.topline { background: #031f35; color: #a3d4dc; letter-spacing: .17em; }
.site-header {
  height: 102px;
  background: #053753;
  color: #fff;
  border-bottom: 1px solid rgba(101, 218, 223, .24);
}
.site-header .brand { align-self: stretch; display: flex; align-items: center; }
.brand img { width: 143px; height: 83px; object-fit: contain; }
.site-header nav { gap: 34px; }
.site-header nav a { font-size: .73rem; letter-spacing: .035em; }
.site-header nav a:hover { color: #60d9da; }
.header-actions select { color: #fff; background: #053753; }
.button {
  border-radius: 100px;
  padding: 17px 29px;
  letter-spacing: .09em;
  box-shadow: 0 7px 25px rgba(1, 36, 57, .12);
}
.button.gold { background: #ff8a2a; color: #07354f; }
.button.gold:hover { background: #ffad5a; box-shadow: 0 11px 28px rgba(1, 36, 57, .2); }

.hero { min-height: 600px; height: min(760px, 78vh); }
.hero-photo img { object-position: center 49%; }
.hero-shade {
  background: linear-gradient(90deg, rgba(2, 35, 60, .94) 0%, rgba(2, 44, 73, .64) 44%, rgba(1, 41, 69, .06) 100%),
              linear-gradient(0deg, rgba(0, 55, 85, .22), transparent 50%);
}
.hero-content { max-width: 860px; padding-top: 10.5%; }
.hero h1 { font-size: clamp(4.3rem, 8.8vw, 8.8rem); line-height: .95; }
.hero h1 i { color: #6ae7e4; }
.eyebrow { color: #087b9a; letter-spacing: .19em; }
.eyebrow.light { color: #7ae5df; }
.hero-content p { color: #e2f4f5; }
.hero-link { border-bottom: 1px solid rgba(177, 232, 232, .8); padding-bottom: 7px; }
.hero-link:hover, .light-link:hover { color: #85ebeb; }
.hero-side { color: #dcf8f9; }

.trust-strip {
  background: #043c5b;
  color: #d1edf0;
  border-top: 2px solid #2cc5ce;
}
.trust-strip b { color: #ff8a2a; }
.intro {
  position: relative;
  overflow: hidden;
  background: #063e5d;
  color: #f4ffff;
}
.intro::before, .intro::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(77, 211, 218, .17);
  border-radius: 50%;
  pointer-events: none;
}
.intro::before { width: 760px; height: 760px; right: -255px; top: -460px; box-shadow: 0 0 0 85px rgba(77, 211, 218, .035), 0 0 0 170px rgba(77, 211, 218, .025); }
.intro::after { width: 420px; height: 420px; left: -280px; bottom: -280px; }
.intro .eyebrow { color: #72dfdd; }
.intro .section-kicker .line { background: rgba(125, 225, 225, .35); }
.intro h2 i { color: #7ce7e2; }
.intro-grid > div { color: #b9d9e1; }
.intro .lead { font-family: var(--sans); font-weight: 600; color: #fff; }

.experiences {
  position: relative;
  background: linear-gradient(140deg, #d9f3f7 0%, #f1fbfc 58%, #d8f0f5 100%);
}
.experiences::before {
  content: '';
  position: absolute;
  top: 36px; right: 5%;
  width: 180px; height: 180px;
  border: 1px solid rgba(9, 128, 158, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(9, 128, 158, .035);
  pointer-events: none;
}
.experience-grid { gap: 30px; position: relative; align-items: stretch; }
.experience-card { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 50px rgba(3, 71, 100, .1); display: flex; flex-direction: column; height: 100%; }
.card-copy { display: flex; flex-direction: column; flex: 1; }
.card-meta { margin-top: auto; }
.card-image { height: 350px; }
.image-tag { background: #053c59; color: #fff; border-radius: 100px; }
.card-copy { padding: 35px 38px 38px; }
.card-title-row h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.04em; }
.card-title-row strong { font-family: var(--sans); font-weight: 700; color: #087da0; }
.card-copy p { color: #587586; }
.card-meta { color: #147b96; border-color: #c7e5eb; }
.text-button { color: #087895; border-color: #0d98b5; }
.text-button:hover { color: #f47a22; border-color: #f47a22; }
.essentials { margin-top: 32px; color: #2f6479; }
.essentials > span:first-child { color: #fe8525; }

.editorial { background: #034a6c; }
.editorial-copy { background: linear-gradient(150deg, #064c70, #022f50); }
.editorial h2 i { color: #68e5dc; }
.editorial p { color: #c2e5ec; }
.light-link { border-color: #72dce0; }

.treatments { background: #f9fdfe; }
.treatments .section-head p { color: #567589; }
.treatment-feature { border-radius: 22px; overflow: hidden; box-shadow: 0 16px 46px rgba(0, 58, 85, .13); }
.treatment-feature::after { background: linear-gradient(0deg, rgba(2, 37, 67, .92), transparent 69%); }
.treatment-feature i { color: #6de4df; }
.treatment-row { border-color: #c9e5ea; }
.treatment-row h3 { font-family: var(--sans); font-size: 1.19rem; font-weight: 700; letter-spacing: -.025em; }
.treatment-row .price { font-family: var(--sans); font-size: 1.15rem; font-weight: 700; color: #0783a3; }
.treatment-row button { color: #097e9b; }
.offer-bar {
  border-radius: 18px;
  background: linear-gradient(110deg, #04466b, #08748b);
  box-shadow: 0 15px 36px rgba(0, 70, 100, .16);
}
.offer-bar small { color: #89e7e3; }
.offer-bar h3 { font-family: var(--sans); font-weight: 700; }
.offer-bar p { color: #d6f2f5; }
.offer-bar strong { font-family: var(--sans); font-weight: 700; color: #84e8e5; }
.other-service { color: #567889; }

.gallery::after { background: linear-gradient(100deg, rgba(2, 42, 72, .79), rgba(2, 63, 85, .42)); }
.gallery h2 i { color: #6de8e5; }
.contact { background: #e2f3f7; }
.contact address { color: #416d7c; }
.contact-links a { font-family: var(--sans); font-weight: 700; }
.contact-links a:hover { color: #fa7d24; }
.hours { border-color: #0b7695; }
.hours h3 { font-family: var(--sans); font-weight: 700; }
.hours-row { border-color: #bddde5; }
.hours-row strong { color: #087c9a; }
footer { background: #032d4a; color: #c7e7ee; border-top: 3px solid #22bfca; }
footer .brand img { width: 130px; height: 75px; }
footer a:hover { color: #66e6e2; }

dialog { background: #ecf9fb; color: #07364f; border-radius: 20px; }
dialog::backdrop { background: rgba(1, 26, 45, .79); }
.booking-form input, .booking-form select { border-color: #b7dbe5; border-radius: 9px; }
.booking-total strong { font-family: var(--sans); font-weight: 700; color: #0885a5; }
.booking-section { border-color: #badde5; }
.booking-section h3 { font-family: var(--sans); font-weight: 700; }
.dialog-head h2 { font-size: 2.45rem; }
.dialog-head h2, .success strong { font-family: var(--sans); font-weight: 700; }
.success { background: #d5f3ed; border-radius: 12px; }
.pending { background: #d8f0f5; color: #194d60; border-radius: 10px; }

@media (max-width: 1050px) {
  .site-header nav { gap: 18px; }
  .brand img { width: 130px; height: 75px; }
}
@media (max-width: 750px) {
  .site-header { height: 78px; padding: 0 5%; }
  .site-header .brand img { width: 113px; height: 67px; }
  .hero { min-height: 610px; }
  .hero-shade { background: linear-gradient(90deg, rgba(2, 37, 61, .84), rgba(2, 47, 73, .26)), linear-gradient(0deg, rgba(0, 40, 68, .55), transparent 66%); }
  .hero h1 { font-size: clamp(3.6rem, 13.5vw, 6rem); }
  .essentials { margin-top: 32px; }
  .mobile-book { border-radius: 100px; box-shadow: 0 8px 30px rgba(0, 55, 80, .32); }
  .intro::before { right: -550px; }
}
@media (max-width: 490px) {
  .hero h1 { font-size: 3.7rem; }
  .hero-content { bottom: 120px; }
  .hero-side { display: none; }
  .site-header .brand img { width: 106px; }
  .card-copy { padding: 26px; }
  .card-title-row h3 { font-size: 1.55rem; }
  .card-title-row strong { font-size: 1.25rem; }
  .offer-bar { padding: 26px; }
}