/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1a2a33;
  background: #fdfcf9;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: 'Playfair Display', Georgia, serif; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }

.container { width: min(1180px, 92%); margin: 0 auto; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  font-weight: 600;
  color: #c47b3f;
  margin: 0 0 .6em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn--primary {
  background: #0f6e7e;
  color: #fff;
  box-shadow: 0 6px 18px rgba(15, 110, 126, 0.3);
}
.btn--primary:hover { background: #0a5663; transform: translateY(-1px); }
.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.7);
}
.btn--ghost:hover { background: rgba(255,255,255,.15); }
.btn--block { width: 100%; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(253, 252, 249, 0.85);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.brand__mark {
  background: #0f6e7e;
  color: #fff;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-family: 'Playfair Display', serif;
  font-size: .9rem;
}
.brand__name { font-family: 'Playfair Display', serif; font-size: 1.15rem; }
.nav__links { display: flex; gap: 1.6rem; }
.nav__links a {
  font-size: .95rem;
  color: #34464f;
  transition: color .15s ease;
}
.nav__links a:hover { color: #0f6e7e; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  align-items: center;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(15, 110, 126, 0.55), rgba(20, 40, 60, 0.65)),
    url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=2000&q=80') center/cover;
  padding: 4rem 0 3rem;
}
.hero__overlay { display: none; }
.hero__content { position: relative; max-width: 760px; }
.hero h1 { color: #fff; margin-bottom: 1rem; }
.hero .eyebrow { color: #ffd9a8; }
.lead { font-size: 1.1rem; color: rgba(255,255,255,.92); max-width: 600px; margin-bottom: 2rem; }

.booking {
  background: #fff;
  color: #1a2a33;
  padding: 1.2rem;
  border-radius: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 1rem;
  align-items: end;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  max-width: 760px;
}
.booking__field { display: flex; flex-direction: column; }
.booking__field label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  color: #6b7a82;
  margin-bottom: .35rem;
}
.booking input, .booking select {
  border: 1px solid #d8dde0;
  padding: .7rem .8rem;
  border-radius: 10px;
  font-size: .95rem;
  font-family: inherit;
  background: #fff;
}
.booking input:focus, .booking select:focus { outline: 2px solid #0f6e7e; border-color: transparent; }
.booking .btn { padding: .85rem 1.6rem; }

.hero__badges {
  list-style: none;
  padding: 0;
  margin: 1.8rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.hero__badges li {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  padding: .4rem .9rem;
  border-radius: 999px;
  font-size: .85rem;
  backdrop-filter: blur(4px);
}

/* ---------- Section base ---------- */
.section { padding: 5rem 0; }
.section--alt { background: #f4efe7; }
.section__head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.section__sub { color: #5a6b73; font-size: 1.05rem; }

/* ---------- Features ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.feature {
  background: #fff;
  padding: 1.8rem;
  border-radius: 14px;
  border: 1px solid #eee5d6;
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.06); }
.feature__icon { font-size: 2rem; margin-bottom: .8rem; }
.feature h3 { color: #0f6e7e; }
.feature p { color: #5a6b73; margin: 0; font-size: .95rem; }

/* ---------- Gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: 12px;
  border-radius: 16px;
  overflow: hidden;
}
.gallery__item {
  position: relative;
  background: linear-gradient(135deg, #b7d4d8, #0f6e7e);
  border-radius: 8px;
  display: flex;
  align-items: end;
  padding: 1rem;
  color: #fff;
  font-size: .85rem;
  font-weight: 500;
  transition: transform .25s ease;
}
.gallery__item::before {
  content: attr(data-label);
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.gallery__item:hover { transform: scale(1.02); }
.gallery__item--lg { grid-column: span 2; grid-row: span 2; }
.gallery__item:nth-child(2) { background: linear-gradient(135deg, #f5d6a4, #c47b3f); }
.gallery__item:nth-child(3) { background: linear-gradient(135deg, #c7e0d2, #4d9170); }
.gallery__item:nth-child(4) { background: linear-gradient(135deg, #e8c5b0, #b8704a); }
.gallery__item:nth-child(5) { background: linear-gradient(135deg, #a8d4e3, #1a6985); }
.gallery__note { text-align: center; color: #8a9aa3; font-size: .85rem; margin-top: 1rem; }

/* ---------- Zona ---------- */
.zona {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.zona__list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: .6rem;
}
.zona__list li {
  padding: .7rem 1rem;
  background: #f4efe7;
  border-left: 3px solid #c47b3f;
  border-radius: 6px;
}
.zona__list strong { color: #0f6e7e; margin-right: .5rem; }
.zona__map {
  height: 380px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 60% 40%, rgba(196, 123, 63, 0.4), transparent 50%),
    linear-gradient(135deg, #b7d4d8, #0f6e7e);
  position: relative;
  box-shadow: 0 20px 50px rgba(15, 110, 126, 0.25);
}
.zona__map::after {
  content: "📍 Santa Marta";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #1a2a33;
  padding: .6rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

/* ---------- Reviews ---------- */
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.review {
  background: #fff;
  padding: 1.8rem;
  border-radius: 14px;
  border: 1px solid #eee5d6;
}
.review__stars { color: #e0a449; margin-bottom: .8rem; }
.review p { font-style: italic; color: #34464f; }
.review footer { color: #8a9aa3; font-size: .9rem; }

/* ---------- CTA ---------- */
.cta {
  background: linear-gradient(135deg, #0f6e7e, #1a2a33);
  color: #fff;
  padding: 5rem 0;
  text-align: center;
}
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.85); margin-bottom: 2rem; }
.cta__buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer {
  background: #1a2a33;
  color: rgba(255,255,255,.7);
  padding: 3rem 0 1rem;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
.brand--footer .brand__name { color: #fff; }
.footer__copy { font-size: .9rem; margin-top: .5rem; }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer__cols h4 { color: #fff; font-family: inherit; font-size: .95rem; margin-bottom: .6rem; }
.footer__cols p { font-size: .9rem; margin: .2rem 0; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1.2rem;
  text-align: center;
  font-size: .85rem;
  color: rgba(255,255,255,.5);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav__links { display: none; }
  .booking { grid-template-columns: 1fr 1fr; }
  .booking .btn--block { grid-column: span 2; }
  .zona { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery__item--lg { grid-column: span 2; grid-row: span 1; }
  .footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .booking { grid-template-columns: 1fr; }
  .booking .btn--block { grid-column: span 1; }
}