:root {
  /* Rendered navbar height per breakpoint (logo + padding + border).
     The booking modal opens below it so the bar stays usable. */
  --dc-nav-h: 197px;
  --dc-bg1: #0d1f0d;
  --dc-bg2: #102010;
  --dc-cream: #f5f0e8;
  --dc-cream-dim: rgba(245, 240, 232, 0.55);
  --dc-cream-muted: rgba(245, 240, 232, 0.75);
  --dc-gold: #c9a96e;
  --font-serif: "Playfair Display", serif;
  --font-sans: "Open Sans", sans-serif;
}

/* The original sets this on both html and body; full-bleed sections and
   Bootstrap's negative row gutters otherwise poke past the viewport and
   raise a horizontal scrollbar the reference never shows. */
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }

/* Scrollbars in the page's own colours. Applied to every scrollable box, not
   just the document: the navbar's room dropdown, the mobile nav panel and the
   weddings module bodies all scroll on their own and would otherwise show the
   browser's default light bar over a dark surface. Modern Chrome honours the
   standard properties and ignores the ::-webkit- ones where both apply, so
   the latter stay as the fallback for older engines. */
html, body, * { scrollbar-color: var(--dc-bg2) var(--dc-bg1); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--dc-bg1); }
::-webkit-scrollbar-thumb { background-color: var(--dc-bg2); border-radius: 6px; border: 2px solid var(--dc-bg1); }
::-webkit-scrollbar-thumb:hover { background-color: #1a331a; }

/* Filters hide cards with this rather than an inline display, because the
   cards carry Bootstrap's .d-block, whose !important beats an inline style. */
.dc-filtered-out { display: none !important; }

/* Scroll-reveal (mirrors the original site's Framer Motion fade+slide-in-on-scroll) */
.reveal {
  opacity: 0;
  transition: opacity .6s ease-out, transform .6s ease-out;
  will-change: opacity, transform;
}
.reveal-up { transform: translateY(24px); }
.reveal-left { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

@keyframes fadeInUpOnce {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-fade-in { animation: fadeInUpOnce 1.1s ease-out .3s both; }

body {
  background-color: var(--dc-bg1);
  color: var(--dc-cream);
  font-family: var(--font-sans);
  /* The original runs on an 18px root with Tailwind's 1.5 leading, so every
     element that doesn't set its own size inherits an 18px/27px line box.
     Set on body rather than html so Bootstrap's rem-based spacing utilities
     keep their 16px basis and stay where the rest of this file expects. */
  font-size: 18px;
  line-height: 1.5;
}

h1, h2, h3, h4, .font-serif { font-family: var(--font-serif); }

/* Tailwind's preflight zeroes heading margins and lets them inherit the
   body's 1.5 leading; Bootstrap instead ships margin-bottom .5rem and
   line-height 1.2. Reset to the original's behaviour — the classes and
   inline styles below still win where a heading sets its own values. */
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.5; }
p { margin: 0; }

/* The original is Tailwind's `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8` on an
   18px root: 80rem = 1440px wide with 2rem = 36px gutters. Bootstrap's
   .container tops out at 1320px with 12px gutters, so retune it to match
   (this file loads after bootstrap.min.css, so equal-specificity wins). */
.container, .dc-container {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  /* px-4 sm:px-6 lg:px-8 on an 18px root, i.e. the original's own scale:
     18px on phones, 27px from sm (640px), 36px from lg (1024px). */
  padding-left: 18px;
  padding-right: 18px;
}
@media (min-width: 640px) {
  .container, .dc-container { padding-left: 27px; padding-right: 27px; }
}
@media (min-width: 1024px) {
  .container, .dc-container { padding-left: 36px; padding-right: 36px; }
}

a { color: var(--dc-gold); text-decoration: none; }
a:hover { color: var(--dc-cream); }

.bg-dc1 { background-color: var(--dc-bg1); }
.bg-dc2 { background-color: var(--dc-bg2); }
.text-cream { color: var(--dc-cream); }
.text-cream-dim { color: var(--dc-cream-dim); }
.text-gold { color: var(--dc-gold); }

/* Section primitives — these mirror the original's DcTag / DcHeading /
   DcBody / DcButton components. Their sizes come from Tailwind classes on an
   18px root, so they are written out here in the pixel values they resolve
   to (text-xs = 13.5px, mb-5 = 22.5px, mb-6 = 27px, and so on). */
.tag-line {
  display: block;
  height: 1px;
  width: 48px;
  background-color: var(--dc-gold);
  margin-bottom: 11px;
}
.tag-label {
  display: block;
  color: var(--dc-gold);
  /* Tailwind's text-xs pairs 0.75rem with a 1rem line box, so the leading is
     18px here rather than the inherited 1.5. */
  font-size: 13.5px;
  line-height: 18px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 22.5px;
}
.section-heading {
  color: var(--dc-cream);
  font-weight: 700;
  font-size: clamp(40.5px, 5vw, 67.5px);
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 27px;
}
.section-heading.section-heading-md { font-size: clamp(34.2px, 4vw, 54px); }

/* Body copy inside sections: 19px at 75% cream, generous leading. */
.dc-body {
  color: var(--dc-cream-muted);
  font-size: 19px;
  line-height: 1.625;
  white-space: pre-line;
}

/* Section rhythm: the original's `py-20 lg:py-28`. */
.dc-section { padding-top: 90px; padding-bottom: 90px; }
@media (min-width: 992px) {
  .dc-section { padding-top: 126px; padding-bottom: 126px; }
}
/* `gap-12 lg:gap-20` between the two halves of a split section. */
.dc-split { display: grid; gap: 54px; align-items: center; }
@media (min-width: 768px) { .dc-split:not(.dc-split-lg) { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .dc-split { gap: 90px; } .dc-split-lg { grid-template-columns: 1fr 1fr; } }

/* The large call-to-action link (DcButton), distinct from the compact
   navbar/booking outline button above. */
.btn-gold-cta {
  border: 1px solid var(--dc-gold);
  color: var(--dc-gold);
  background: transparent;
  font-family: var(--font-sans);
  padding: 12px 36px;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color .25s, color .25s;
}
.btn-gold-cta:hover { background-color: var(--dc-gold); color: var(--dc-bg1); }

/* Navbar — logo hard left, every link plus the language picker and the
   reserve button grouped on the right, exactly as the original lays it out. */
.dc-navbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dc-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1050;
  background-color: rgba(13, 31, 13, 0.96);
  border-bottom: 1px solid rgba(245, 240, 232, 0.12);
  backdrop-filter: blur(8px);
}
.dc-navbar .navbar-brand { padding: 9px 0; }
.dc-navbar .navbar-brand img { height: 178px; width: auto; display: block; }
/* Selector deliberately as specific as Bootstrap's
   `.navbar-expand-lg .navbar-nav .nav-link`, which would otherwise add
   8px of horizontal padding and widen every label by 16px. */
.dc-navbar .navbar-nav .nav-link {
  color: rgba(245, 240, 232, 0.7) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4.5px;              /* Tailwind gap-1 on an 18px root */
  white-space: nowrap;
}
/* A link with no submenu is a direct child of the flex row in the original,
   so it centres on the row (y=88). One with a chevron sits inside a block
   wrapper whose 27px line box pushes it 3px lower (y=91). Dropping the <li>
   out of the layout for the plain ones reproduces both positions. */
@media (min-width: 992px) {
  .dc-navbar .navbar-nav .nav-item:not(.dropdown) { display: contents; }
  .dc-navbar .navbar-nav .nav-item:not(.dropdown) > .nav-link { display: block; }
}

/* Two navbars, two layouts. On the home page the links, the settings slot and
   the language/reserve pair form a single right-hand group at `xl:gap-5`
   (22.5px). On subpages the row is three groups spaced apart — back+logo,
   links at `xl:gap-4` (18px), and language+reserve at `gap-2` (9px) — so the
   collapse has to stop being a box of its own and let its children take part
   in the row directly. */
@media (min-width: 992px) {
  .dc-navbar.is-home .navbar-collapse { display: flex !important; align-items: center; gap: 22.5px; }
  .dc-navbar.is-sub .navbar-collapse { display: contents !important; }
  /* Below xl the original spaces both rows at gap-3 (13.5px) — home is
     `gap-2 lg:gap-3 xl:gap-5`, subpages `gap-3 xl:gap-4` — and only widens
     at 1280. Applying the xl values from 992 up, as this used to, crowded the
     row: at 1024 the links ran 8px past the viewport and the last ones were
     clipped. */
  .dc-navbar.is-home .dc-nav-list { gap: 13.5px; }
  .dc-navbar.is-home .dc-nav-tail { gap: 22.5px; }
  .dc-navbar.is-sub .dc-nav-list { gap: 13.5px; }
  .dc-navbar.is-sub .dc-nav-tail { gap: 9px; }
}
/* Tailwind's xl. From here the row has room for the original's wider spacing,
   which is what the pixel comparisons at 1440 were made against. */
@media (min-width: 1280px) {
  .dc-navbar.is-home .dc-nav-list { gap: 22.5px; }
  .dc-navbar.is-sub .dc-nav-list { gap: 18px; }
}
.dc-nav-list { gap: 22.5px; }
.dc-nav-tail { gap: 9px; }
/* Language trigger: flag at text-base with no leading, code at text-xs
   semibold — the original shows no chevron here. */
.dc-lang-btn {
  gap: 6.75px;
  padding: 0 9px;
  height: 36px;
  background: transparent;
  /* Transparent 1px border, as on the original's ghost button: without it the
     trigger measures 63px instead of 65 and drags the whole row across. */
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--dc-cream);
  transition: background-color .2s;
}
.dc-lang-btn:hover { background-color: rgba(255, 255, 255, 0.1); }
.dc-lang-btn::after { display: none; }
.dc-lang-flag { font-size: 18px; line-height: 1; }
.dc-lang-code {
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  line-height: 18px;
}

/* Submenus open on hover from lg up, matching the original's behaviour;
   the parent label stays a normal link. */
@media (min-width: 992px) {
  .dc-hover-menu > .dropdown-menu { display: block; visibility: hidden; opacity: 0; margin-top: 0; transition: opacity .15s; }
  .dc-hover-menu:hover > .dropdown-menu { visibility: visible; opacity: 1; }
}
.dc-navbar .nav-link:hover, .dc-navbar .nav-link.active { color: var(--dc-cream) !important; }
.dc-navbar .dropdown-toggle::after { display: none; }
/* Submenu chevrons are h-3 (13.5px) in the original; only the home navbar's
   "Información" trigger uses h-3.5 (15.75px). Getting this wrong widens each
   label by ~2px and shifts everything to its left. */
.dc-navbar .navbar-nav .nav-link .bi-chevron-down { font-size: 13.5px; line-height: 1; }
.dc-navbar.is-home .dc-nav-info > .nav-link .bi-chevron-down { font-size: 15.75px; }
/* That trigger is a direct flex child in the original, so it centres on the
   row like the plain links. display:contents would do it but would also drop
   the containing block its dropdown is positioned against, so shrink the
   item's line box instead. */
@media (min-width: 992px) {
  .dc-navbar.is-home .dc-nav-info { line-height: 19.5px; }
}
.dc-navbar .dropdown-toggle .bi-chevron-down { font-size: .7em; line-height: 1; }
.dc-navbar .dropdown-menu {
  background-color: var(--dc-bg2);
  border: 1px solid rgba(245,240,232,0.12);
  border-radius: 0;
}
.dc-navbar .dropdown-item { color: var(--dc-cream); font-size: 14px; padding: 10px 16px; }
.dc-navbar .dropdown-item:hover { background-color: rgba(255,255,255,0.06); color: var(--dc-cream); }
.btn-gold-outline {
  border: 1px solid var(--dc-gold);
  color: var(--dc-gold);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 0;
  transition: all .2s;
}
.dc-navbar .btn-gold-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.dc-navbar .btn-gold-outline i { font-size: 15.75px; line-height: 1; }
.btn-gold-outline:hover { background-color: var(--dc-gold); color: var(--dc-bg1); }
.btn-gold-solid {
  background-color: var(--dc-gold);
  color: var(--dc-bg1);
  border: 1px solid var(--dc-gold);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 26px;
  border-radius: 0;
  font-weight: 600;
  transition: all .2s;
}
.btn-gold-solid:hover { background-color: transparent; color: var(--dc-gold); }

.dc-carousel-square {
  width: 42px; height: 42px;
  background: rgba(13, 31, 13, 0.75);
  border: 1px solid rgba(245, 240, 232, 0.3);
  border-radius: 2px;
  backdrop-filter: blur(6px);
  color: var(--dc-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.dc-carousel-square:hover { background: rgba(13, 31, 13, 0.95); border-color: var(--dc-gold); color: var(--dc-gold); }

/* Accommodations listing: alternating full-bleed gallery / copy bands. */
.dc-acc-row { display: grid; grid-template-columns: 1fr; }
.dc-acc-media { position: relative; min-height: 260px; aspect-ratio: 16 / 9; }
.dc-acc-text { padding: 63px 36px; }
@media (min-width: 768px) {
  .dc-acc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dc-acc-media { min-height: 400px; }
  .dc-acc-text { padding: 63px 63px; }
  .dc-acc-row.is-flipped .dc-acc-media { order: 2; }
  .dc-acc-row.is-flipped .dc-acc-text { order: 1; }
}

/* Solid cream button (the "see the rooms" call to action). */
.dc-btn-cream {
  background-color: var(--dc-cream);
  color: var(--dc-bg1);
  font-family: var(--font-sans);
  padding: 11px 28px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  transition: opacity .2s;
}
.dc-btn-cream:hover { opacity: .85; color: var(--dc-bg1); }

/* Reusable room/category gallery: fills its parent, arrows and dots on top. */
.dc-slideshow { position: relative; width: 100%; height: 100%; overflow: hidden; }
.dc-slideshow .carousel-label {
  position: absolute;
  bottom: 18px;
  left: 20px;
  z-index: 5;
  font-family: var(--font-serif);
  font-size: clamp(22.5px, 2.5vw, 27px);
  font-weight: 600;
  color: var(--dc-cream);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  transition: opacity .7s ease;
}
.dc-slide-dots {
  position: absolute;
  bottom: 12px;
  left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* Square 45px arrows on room-photo slideshows (the hero's are round). The
   positioning belongs here, not on the markup: index.php happened to add
   Bootstrap's position utilities, so the missing rules only showed up once
   the room pages reused this class and the arrows stacked in the corner. */
.dc-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px; height: 45px;
  background-color: rgba(13, 31, 13, 0.80);
  border: 1px solid rgba(245, 240, 232, 0.35);
  border-radius: 0;
  color: rgba(245, 240, 232, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  z-index: 10;
  transition: background-color .2s;
}
.dc-slide-arrow:hover { background-color: rgba(13, 31, 13, 0.97); }
.carousel-indicators { position: relative !important; inset: auto !important; margin: 0; justify-content: center; }
.carousel-indicators .dc-carousel-dot,
.dc-carousel-dot {
  box-sizing: content-box;
  width: 22px; height: 3px;
  background-color: rgba(245, 240, 232, 0.35);
  border: none;
  border-top: 0; border-bottom: 0;
  padding: 0;
  margin: 0;
  opacity: 1;
  text-indent: 0;
  transition: background-color .2s;
}
.carousel-indicators .dc-carousel-dot.active,
.dc-carousel-dot.active { background-color: var(--dc-gold); }
.carousel-indicators .dc-carousel-pilldot,
.dc-carousel-pilldot {
  box-sizing: content-box;
  width: 8px; height: 8px;
  border-radius: 4px;
  background-color: rgba(245, 240, 232, 0.35);
  border: none;
  padding: 0;
  margin: 0;
  opacity: 1;
  text-indent: 0;
  transition: width .3s, background-color .3s;
}
.carousel-indicators .dc-carousel-pilldot.active,
.dc-carousel-pilldot.active { width: 24px; background-color: var(--dc-cream); }

/* The navbar renders 197px tall (178px logo + 2x9px padding + 1px border)
   but the original reserves only 194px, so the page slides 3px under it.
   Matched here so every section below lands on the same y as the original. */
.navbar-spacer { height: 194px; }
section[id] { scroll-margin-top: 197px; }
/* Phones and tablets. The original is not responsive here — it keeps the
   full 197px desktop bar and its 178px logo on a 390px screen — so this is a
   deliberate divergence: the clone has to be usable on a phone. */
@media (max-width: 991px) {
  :root { --dc-nav-h: 115px; }
  .navbar-spacer { height: 116px; }
  section[id] { scroll-margin-top: 116px; }
  .dc-navbar .navbar-brand img { height: 96px; }
  .dc-navbar .navbar-brand { padding: 9px 0; }

  /* The open panel is taller than a phone viewport, so it scrolls on its own
     over an opaque background instead of running past the fold and letting
     the hero show through the links. The negative margin cancels the
     container gutter so the panel spans the full bar. */
  .dc-navbar .navbar-collapse.show,
  .dc-navbar .navbar-collapse.collapsing {
    /* Full-bleed: cancel the container gutter so the panel's background
       reaches both edges of the bar. The growth goes on flex-basis, which
       wins over width for a flex item's main size. The gutter is 18px here
       and 27px from sm up, so it grows by twice whichever applies. */
    flex: 0 0 calc(100% + 36px);
    margin: 0 -18px;
    padding: 6px 18px 18px;
    max-height: calc(100dvh - 116px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: rgba(13, 31, 13, 0.98);
    border-top: 1px solid rgba(245, 240, 232, 0.12);
  }
  /* The 22.5px desktop gap plus this padding leaves the list far too airy on
     a phone; the padding alone already gives a comfortable tap target. */
  .dc-navbar .dc-nav-list { gap: 4px; }
  .dc-navbar .navbar-nav .nav-link {
    font-size: 15px;
    padding: 12px 0;
    justify-content: space-between;
  }
  .dc-navbar .navbar-nav .nav-link .bi-chevron-down { font-size: 15px; }

  /* Submenus sit in the flow of the panel rather than floating over it (a
     floating menu would be clipped by the panel's own scrolling), and stay
     collapsed until their chevron is tapped — expanding all four at once
     makes the panel several screens long. */
  .dc-navbar .navbar-nav .dropdown-menu {
    position: static;
    display: none;
    float: none;
    background: transparent;
    border: 0;
    max-height: none;
    padding: 0 0 6px 14px;
    margin: 0;
  }
  .dc-navbar .navbar-nav .dc-hover-menu.is-open > .dropdown-menu { display: block; }
  .dc-navbar .navbar-nav .dropdown-item { padding: 9px 0; font-size: 14px; }

  /* The label still navigates to the hub page; only the chevron toggles, so
     give it a finger-sized target without changing where it renders. */
  .dc-navbar .navbar-nav .nav-link .bi-chevron-down {
    padding: 12px;
    margin: -12px -12px -12px 0;
    transition: transform .2s;
  }
  .dc-navbar .navbar-nav .dc-hover-menu.is-open > .nav-link .bi-chevron-down { transform: rotate(180deg); }

  /* Language picker + reserve button share one row across the panel. */
  .dc-nav-tail { width: 100%; gap: 12px; }
  .dc-nav-tail > .dropdown { flex-shrink: 0; }
  .dc-nav-tail .btn-gold-outline { flex: 1; justify-content: center; padding: 11px 16px; }
  .dc-lang-btn { height: 42px; padding: 0 12px; border-color: rgba(245, 240, 232, 0.22); }

  /* dropdown-menu-end pins the menu's right edge to the trigger's, and the
     trigger sits near x=0 here, so the menu ran ~77px off the left of the
     screen. Anchor it to the left edge instead and cap it to the viewport. */
  .dc-nav-tail .dropdown-menu.dropdown-menu-end {
    position: absolute;
    left: 0;
    right: auto;
    bottom: 100%;
    top: auto;
    margin-bottom: 6px;
    min-width: 180px;
    max-width: calc(100vw - 36px);
  }
}

@media (min-width: 640px) and (max-width: 991px) {
  .dc-navbar .navbar-collapse.show,
  .dc-navbar .navbar-collapse.collapsing {
    flex: 0 0 calc(100% + 54px);
    margin: 0 -27px;
    padding: 6px 27px 18px;
  }
}

@media (max-width: 575px) {
  :root { --dc-nav-h: 83px; }
  .navbar-spacer { height: 84px; }
  section[id] { scroll-margin-top: 84px; }
  .dc-navbar .navbar-brand img { height: 64px; }
  .dc-navbar .navbar-collapse.show,
  .dc-navbar .navbar-collapse.collapsing { max-height: calc(100dvh - 84px); }
  .dc-navbar .navbar-toggler i { font-size: 28px !important; }
}

.cam-live-dot {
  display: inline-block;
  width: 13.5px; height: 13.5px;
  border-radius: 50%;
  background-color: #ef4444;
  flex-shrink: 0;
  animation: cam-live-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes cam-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.cam-live-label {
  font-family: var(--font-sans);
  font-size: clamp(19.8px, 2.5vw, 32.4px);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #ffffff;
  text-transform: uppercase;
  text-align: center;
}

/* Hero */
.dc-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}
.dc-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(13,31,13,.55), rgba(13,31,13,.85));
}
.dc-hero .container { position: relative; z-index: 2; }
.dc-page-hero {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  margin-top: 0;
}
.dc-page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(13,31,13,.65);
}
.dc-page-hero .container { position: relative; z-index: 2; }

/* Subpage hero: `h-[65vh] min-h-[420px]` over a full-bleed photo. */
/* Height and min-height come from the template: pages differ (60vh here,
   65vh there, 55vh on the bungalows listing). */
.dc-page-hero-tall {
  position: relative;
  height: 65vh;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Full-bleed banner with centred tag/heading/copy over a darkened photo,
   used to introduce the restaurants and adventures sections. */
.dc-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  background-color: var(--dc-bg1);
  overflow: hidden;
}
@media (min-width: 768px) { .dc-banner { aspect-ratio: 21 / 9; } }
.dc-banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 31, 13, 0.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(245, 240, 232, 0.3);
  border-radius: 2px;
  color: var(--dc-cream);
  font-size: 22.5px;
  transition: background .2s;
}
.dc-banner-arrow:hover { background: rgba(13, 31, 13, 0.97); }
.dc-banner-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 8px;
  align-items: center;
}
.dc-banner-tag { margin-bottom: 20px; }
.dc-banner-tag .tag-label { margin-bottom: 0; }
.dc-banner-heading {
  font-family: var(--font-serif);
  color: var(--dc-cream);
  font-weight: 700;
  font-size: clamp(40.5px, 5vw, 81px);
  line-height: 1.25;
  margin-bottom: 18px;
}
.dc-banner-desc {
  color: rgba(245, 240, 232, 0.8);
  font-size: 19px;
  line-height: 1.625;
  white-space: pre-line;
  max-width: 756px;
  margin: 0 auto;
}

/* The content band under a banner: `py-16 lg:py-20` in the original. */
.dc-band { padding-top: 72px; padding-bottom: 72px; }
@media (min-width: 992px) { .dc-band { padding-top: 90px; padding-bottom: 90px; } }

/* The weddings hero band sits much taller: `py-32 lg:py-44`. */
.dc-weddings-band { padding-top: 144px; padding-bottom: 144px; }
@media (min-width: 992px) { .dc-weddings-band { padding-top: 198px; padding-bottom: 198px; } }

.dc-card-grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
@media (min-width: 576px) { .dc-card-grid-4 { gap: 18px; } }
@media (min-width: 992px) { .dc-card-grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* Three cards since Spa & Wellness was dropped; auto-fit keeps the row full
   whatever the count, instead of leaving a hole where the fourth used to be. */
.dc-activity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22.5px; }
@media (min-width: 768px) {
  .dc-activity-grid { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
}

.dc-room-grid { display: grid; gap: 27px; }
@media (min-width: 576px) { .dc-room-grid { grid-template-columns: 1fr 1fr; } }

.dc-discover-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 576px) { .dc-discover-grid { grid-template-columns: 1fr 1fr; gap: 27px; } }
@media (min-width: 768px) { .dc-discover-grid { grid-template-columns: repeat(3, 1fr); } }
.dc-discover-card {
  border: 1px solid rgba(245, 240, 232, 0.14);
  padding: 27px;
  transition: border-color .2s;
}
@media (min-width: 576px) { .dc-discover-card { padding: 36px; } }
.dc-discover-card:hover { border-color: var(--dc-gold); }

/* Alternating full-bleed image/text bands (adventures sub-pages). */
.dc-split-module { display: grid; grid-template-columns: 1fr; }
.dc-split-module-img { min-height: 280px; }
.dc-split-module-text { padding: 63px 36px; }
@media (min-width: 768px) {
  .dc-split-module { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dc-split-module-img { min-height: 520px; }
  .dc-split-module-text { padding: 63px 63px; }
  .dc-split-module.is-flipped .dc-split-module-img { order: 2; }
  .dc-split-module.is-flipped .dc-split-module-text { order: 1; }
}

.dc-hub-grid { display: grid; grid-template-columns: 1fr; gap: 27px; }
@media (min-width: 768px) { .dc-hub-grid { grid-template-columns: repeat(3, 1fr); } }
.dc-hub-card {
  border: 1px solid rgba(245, 240, 232, 0.1);
  background-color: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  transition: border-color .3s;
}
.dc-hub-card:hover { border-color: rgba(245, 240, 232, 0.3); }

.dc-tour-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (min-width: 768px) { .dc-tour-grid { grid-template-columns: repeat(3, 1fr); } }

.dc-tour-grid-4 { display: grid; grid-template-columns: 1fr; gap: 13px; }
@media (min-width: 576px) { .dc-tour-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .dc-tour-grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .dc-tour-grid-4 { grid-template-columns: repeat(4, 1fr); } }

.dc-related-link {
  border: 1px solid rgba(201, 169, 110, 0.4);
  color: var(--dc-gold);
  background: transparent;
  font-size: 15px;
  padding: 11px 22px;
  transition: background-color .2s, color .2s, border-color .2s;
}
.dc-related-link:hover { background-color: var(--dc-gold); color: var(--dc-bg1); border-color: var(--dc-gold); }

/* The contact form's fields come from a different component than the booking
   forms: taller controls (h-11), text-sm type, a 41px select trigger, and a
   13px slot under each field reserved for its validation message. */
.dc-form-input {
  min-height: 50px;
  padding: 9px 13.5px;
  font-size: 15.75px;
  line-height: 22.5px;
}
/* min-height, not just height: the base .dc-input floor would otherwise win.
   The original renders this control as a custom trigger with its own chevron,
   so the native arrow is replaced rather than left showing. The booking-form
   selects stay native, matching the original there too. */
select.dc-form-input {
  min-height: 41px !important;
  height: 41px;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f5f0e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13.5px center;
  background-size: 18px 18px;
}
textarea.dc-form-input { min-height: 120px; }
#contacto .dc-field, #contacto .dc-field-pair { margin-bottom: 13px; }
#contacto .dc-field-pair .dc-field { margin-bottom: 0; }

.dc-contact-grid { display: grid; gap: 54px; }
@media (min-width: 992px) { .dc-contact-grid { grid-template-columns: 1fr 1fr; } }
.dc-contact-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border: 1px solid rgba(245, 240, 232, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dc-cream-dim);
}
.dc-contact-h { color: var(--dc-cream); font-family: var(--font-sans); font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.dc-contact-sub { color: var(--dc-cream-dim); font-size: 15px; margin: 0; }
.dc-contact-val { color: var(--dc-cream-muted); font-size: 16px; font-weight: 500; margin: 0; }

/* Horizontally scrollable category filter, with no visible scrollbar. */
/* The pills are wider than any viewport (2018px for 13 categories), so the bar
   scrolls sideways. The original hides its scrollbar; here it stays visible
   and themed, because with a mouse an invisible one leaves no way to reach
   the categories at the far end. */
.dc-filter-bar {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 13.5px;
  margin-bottom: 36px;
}
.dc-pill {
  flex: 0 0 auto;
  padding: 6px 16px;
  font-size: 11px;
  font-family: var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid rgba(201, 169, 110, 0.4);
  background: transparent;
  color: rgba(201, 169, 110, 0.65);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 0;
  transition: all .2s ease;
}
.dc-pill:hover { color: var(--dc-gold); border-color: var(--dc-gold); }
.dc-pill.is-active {
  background-color: var(--dc-gold);
  color: var(--dc-bg1);
  border-color: var(--dc-gold);
}

/* Photo zooms slightly when its card is hovered. */
.dc-zoom img { transition: transform .5s ease; }
.dc-zoom:hover img { transform: scale(1.05); }

.dc-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Cards */
.dc-card {
  background-color: var(--dc-bg2);
  border: 1px solid rgba(245,240,232,0.1);
  overflow: hidden;
  transition: transform .25s, border-color .25s;
}
.dc-card:hover { transform: translateY(-4px); border-color: var(--dc-gold); }
.dc-card img { width: 100%; height: 240px; object-fit: cover; transition: transform .5s ease; }
.dc-card:hover img { transform: scale(1.06); }
.dc-card { transition: transform .3s ease, border-color .3s ease; }
.dc-card .body { padding: 22px; }
.dc-card .price { color: var(--dc-gold); font-weight: 700; font-size: 20px; }

.feature-badge {
  display: inline-block;
  border: 1px solid rgba(245,240,232,0.2);
  color: var(--dc-cream-dim);
  font-size: 12px;
  padding: 3px 10px;
  margin: 2px 3px 2px 0;
}

/* Footer */
footer.dc-footer {
  background-color: var(--dc-bg2);
  border-top: 1px solid rgba(245, 240, 232, 0.1);
  padding: 63px 0;
}
footer.dc-footer h4 {
  color: var(--dc-cream);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dc-footer-grid { display: grid; grid-template-columns: 1fr; gap: 45px; margin-bottom: 54px; }
@media (min-width: 576px) { .dc-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .dc-footer-grid { grid-template-columns: repeat(4, 1fr); } }

.dc-footer-list { margin: 0; }
.dc-footer-list li + li { margin-top: 13.5px; }
.dc-footer-list a { color: rgba(245, 240, 232, 0.5); font-size: 16px; transition: color .2s; }
.dc-footer-list a:hover { color: var(--dc-cream); }

.dc-footer-contact { margin: 0; color: rgba(245, 240, 232, 0.5); font-size: 15px; }
.dc-footer-contact li + li { margin-top: 9px; }

.dc-footer-copy {
  border-top: 1px solid rgba(245, 240, 232, 0.08);
  padding-top: 28px;
  text-align: center;
  color: rgba(245, 240, 232, 0.3);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.form-control, .form-select {
  background-color: rgba(245,240,232,0.05);
  border: 1px solid rgba(245,240,232,0.15);
  color: var(--dc-cream);
  border-radius: 0;
}
.form-control:focus, .form-select:focus {
  background-color: rgba(245,240,232,0.08);
  border-color: var(--dc-gold);
  color: var(--dc-cream);
  box-shadow: none;
}
.form-control::placeholder { color: rgba(245,240,232,0.35); }
.form-label { color: var(--dc-gold); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }

.review-star { color: var(--dc-gold); }

/* Dark booking form (hero strip + "reservar" panel): squared-off fields with
   a gold micro-label, laid out as one inline row from lg up. */
.dc-label {
  color: var(--dc-gold);
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}
/* The contact form's labels come from a different component: a slightly
   taller box and a wider gap to the control. */
#contacto .dc-label { line-height: 14px; margin-bottom: 9px; }
/* Booking forms (hero strip, 727 panel) — the original's heroInputStyle. */
.dc-input {
  background-color: rgba(245, 240, 232, 0.05);
  color: var(--dc-cream);
  border: 1px solid rgba(245, 240, 232, 0.15);
  border-radius: 0;
  padding: 10px 14px;
  font-size: 16px;
  line-height: 1.5;
  /* Chrome gives the original's date inputs a 48px box; pin every control in
     the row to it so they line up whatever the input type. */
  min-height: 48px;
  font-family: var(--font-sans);
  outline: none;
  width: 100%;
  color-scheme: dark;
}
.dc-input:focus { border-color: var(--dc-gold); }
.dc-input option { background-color: var(--dc-bg2); color: var(--dc-cream); }

.dc-booking-strip {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.dc-field { display: flex; flex-direction: column; }

/* Stacked booking panel (the 727 section): two 2-up rows, then a
   full-width submit — the original's "dark" form variant. */
.dc-booking-panel { display: flex; flex-direction: column; gap: 18px; }
.dc-field-pair { display: grid; gap: 18px; }
@media (min-width: 576px) { .dc-field-pair { grid-template-columns: 1fr 1fr; } }
.dc-booking-submit {
  min-height: 44px;
  padding: 10px 16px;
  letter-spacing: 0.18em;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
@media (min-width: 992px) {
  .dc-booking-strip { flex-direction: row; align-items: flex-end; }
  .dc-field-grow { flex: 1 1 0; }
  .dc-booking-submit { align-self: flex-end; }
}

.carousel-item img { height: 92vh; object-fit: cover; width: 100%; }

.lang-notice {
  background: rgba(201,169,110,0.12);
  border: 1px solid rgba(201,169,110,0.3);
  color: var(--dc-cream-dim);
  font-size: 13px;
  padding: 10px 16px;
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .dc-hero, .carousel-item img { min-height: 70vh; height: 70vh; }
}

/* "Back to …" link above a subpage title. */
.dc-back-link {
  color: rgba(245, 240, 232, 0.6);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color .2s;
}
.dc-back-link:hover { color: var(--dc-cream); }

/* Back-to-home arrow, shown on subpages only (p-2 around a 22.5px icon). */
.dc-nav-back {
  width: 41px;
  height: 41px;
  flex-shrink: 0;
  color: rgba(245, 240, 232, 0.5);
  font-size: 22.5px;
  line-height: 1;
  transition: color .2s;
}
.dc-nav-back:hover { color: var(--dc-cream); }

/* Restaurant cards: photo half at a fixed 450px minimum, copy half padded. */
.dc-rest-row { display: grid; grid-template-columns: 1fr; }
.dc-rest-media { height: 27rem; }
.dc-rest-text { padding: 36px; }
@media (min-width: 768px) {
  .dc-rest-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dc-rest-media { height: auto; min-height: 450px; }
  .dc-rest-text { padding: 54px; }
  .dc-rest-row.is-flipped .dc-rest-media { order: 2; }
  .dc-rest-row.is-flipped .dc-rest-text { order: 1; }
}

/* Centred 1440px wrapper with no gutters of its own — for sections that put
   their horizontal padding on the section instead of the inner container. */
.dc-wide { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; }

/* Gallery grid: 2 columns, 3 from md up, 4:3 tiles. */
.dc-gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13.5px; }
@media (min-width: 768px) { .dc-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.dc-gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.dc-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Full-screen viewer for a gallery photo. */
.dc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(7, 16, 7, 0.95);
}
.dc-lightbox[hidden] { display: none; }
.dc-lightbox-img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.dc-lightbox-close,
.dc-lightbox-nav {
  position: absolute;
  background: none;
  border: none;
  color: var(--dc-cream);
  padding: 9px;
  cursor: pointer;
  line-height: 1;
}
.dc-lightbox-close { top: 18px; right: 18px; font-size: 27px; }
.dc-lightbox-nav { top: 50%; transform: translateY(-50%); font-size: 36px; }
@media (min-width: 768px) { .dc-lightbox-nav { padding: 9px 27px; } }

/* Room detail: full-width slideshow, then a 1200px content column. */
.dc-room-hero {
  position: relative;
  width: 100%;
  height: clamp(320px, 70vh, 80vh);
  background-color: var(--dc-bg1);
}
.dc-room-hero .dc-slideshow img { cursor: zoom-in; }
.dc-room-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(16px, 5vw, 48px);
}
.dc-room-grid { display: grid; grid-template-columns: 1fr; gap: 45px; margin-bottom: 72px; }
@media (min-width: 768px) { .dc-room-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Boxed lightbox arrows and the "3 / 15" counter used on room pages. */
.dc-lightbox-boxed {
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px;
  font-size: 22.5px;
}
.dc-lightbox-count {
  position: absolute;
  bottom: 12px;
  right: 16px;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-sans);
  font-size: 14px;
}

/* Intro band under a subpage hero: `py-12 px-4` on the darker background. */
.dc-intro-band { padding: 54px 18px; background-color: var(--dc-bg2); }

/* Accordion (FAQ): a hairline between rows, plus/minus on the right, no
   card chrome — the original draws only the bottom border. */
.dc-accordion-item { border-bottom: 1px solid rgba(245, 240, 232, 0.12); }
.dc-accordion-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 20px 4px;
  color: var(--dc-cream);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
}
.dc-accordion-head i {
  flex-shrink: 0;
  font-size: 22.5px;
  line-height: 1;
  color: var(--dc-cream-dim);
}

/* Bordered card with a boxed icon on top, used by the map, shuttle,
   sustainability and legal pages. */
.dc-icon-grid { display: grid; grid-template-columns: 1fr; gap: 22.5px; }
@media (min-width: 576px) { .dc-icon-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .dc-icon-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.dc-icon-card {
  height: 100%;
  padding: 27px;
  text-align: center;
  border: 1px solid rgba(245, 240, 232, 0.10);
  background-color: rgba(255, 255, 255, 0.02);
}
.dc-icon-card .dc-icon-box {
  display: inline-flex;
  padding: 13.5px;
  margin: 0 auto 18px;
  border: 1px solid rgba(245, 240, 232, 0.15);
  color: var(--dc-cream-dim);
  font-size: 27px;
  line-height: 1;
}
.dc-icon-card h3 {
  color: var(--dc-cream);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 10px;
}
.dc-icon-card p {
  color: var(--dc-cream-dim);
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-line;
  margin: 0;
}

/* ---- Weddings subpages ---- */
.dc-wed-hero { position: relative; width: 100%; height: 65vh; overflow: hidden; background-color: #0a1a0a; }
.dc-wed-hero-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 48px;
  text-align: center;
}
.dc-wed-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dc-gold);
  margin-bottom: 14px;
}
.dc-wed-hero-nav { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 6px; }
.dc-wed-hero-nav button {
  width: 38px; height: 38px;
  background: rgba(13, 31, 13, 0.75);
  border: 1px solid rgba(245, 240, 232, 0.25);
  color: var(--dc-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.dc-breadcrumb {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px 24px;
  background-color: rgba(13, 31, 13, 0.95);
  border-bottom: 1px solid rgba(245, 240, 232, 0.08);
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dc-breadcrumb a { color: rgba(245, 240, 232, 0.48); padding: 6px 4px; transition: color .2s; }
.dc-breadcrumb a:hover { color: var(--dc-gold); }
.dc-breadcrumb-sep { color: rgba(245, 240, 232, 0.48); padding: 6px 0; letter-spacing: normal; }
.dc-breadcrumb-current { color: var(--dc-gold); padding: 6px 4px; }

/* Centred intro block between the hero and a page's main content. */
.dc-wed-intro {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 64px);
  text-align: center;
}
.dc-wed-intro .dc-rule { height: 1px; background-color: var(--dc-gold); width: 48px; margin: 0 auto 20px; }
.dc-wed-intro h2 {
  font-family: var(--font-serif);
  font-size: clamp(28.8px, 3.5vw, 50.4px);
  font-weight: 700;
  color: var(--dc-cream);
  margin: 0 0 20px;
  line-height: 1.12;
}
.dc-wed-intro p { font-family: var(--font-sans); font-size: 16px; line-height: 1.82; color: rgba(245,240,232,.78); margin: 0; white-space: pre-line; }

/* Wedding photo grid: 1/2/3 columns, 4:3 tiles, gold wash on hover. */
.dc-wed-grid { display: grid; grid-template-columns: 1fr; gap: 9px; max-width: 1400px; margin: 0 auto; }
@media (min-width: 576px) { .dc-wed-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .dc-wed-grid { gap: 13.5px; } }
@media (min-width: 992px) { .dc-wed-grid { grid-template-columns: repeat(3, 1fr); } }
.dc-wed-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer;
  border: none;
  padding: 0;
  background: #0a1a0a;
}
.dc-wed-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.dc-wed-tile:hover img { transform: scale(1.05); }
.dc-wed-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s;
  background: linear-gradient(to top, rgba(201, 169, 110, 0.18) 0%, transparent 60%);
}
.dc-wed-tile:hover::after { opacity: 1; }

/* Testimonials: a masonry-ish two-column flow so cards of different heights
   pack tightly, matching the original's CSS columns. */
.dc-tes-grid { columns: 2 360px; column-gap: 24px; }
.dc-tes-item { margin-bottom: 24px; display: inline-block; width: 100%; }
.dc-tes-card {
  position: relative;
  background-color: var(--dc-bg2);
  border: 1px solid rgba(245, 240, 232, 0.08);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 3.5vw, 40px) clamp(24px, 3.5vw, 36px);
  display: flex;
  flex-direction: column;
  break-inside: avoid;
  transition: background-color .2s, border-color .2s;
}
.dc-tes-card:hover { background-color: #112211; border-color: rgba(201, 169, 110, 0.35); }
.dc-tes-quote-mark {
  font-family: var(--font-serif);
  font-size: clamp(72px, 8vw, 96px);
  line-height: 0.7;
  color: var(--dc-gold);
  opacity: .3;
  margin-bottom: 16px;
  user-select: none;
  letter-spacing: -0.04em;
  transition: opacity .2s;
}
.dc-tes-card:hover .dc-tes-quote-mark { opacity: .55; }
.dc-tes-card blockquote { margin: 0; padding: 0; flex: 1; }
.dc-tes-card blockquote p {
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.5vw, 21.6px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.72;
  color: rgba(245, 240, 232, 0.78);
  margin: 0 0 28px;
  white-space: pre-line;
}
.dc-tes-rule { width: 32px; height: 1px; background-color: var(--dc-gold); margin-bottom: 18px; opacity: .7; }
.dc-tes-couple {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dc-cream);
  margin: 0 0 5px;
}
.dc-tes-place { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.06em; color: var(--dc-gold); margin: 0; opacity: .85; }

/* Eyebrow with a rule to its left, used above weddings section headings. */
.dc-wed-eyebrow-row { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.dc-wed-eyebrow-row .dc-rule { height: 1px; background-color: var(--dc-gold); width: 48px; flex-shrink: 0; opacity: .7; }
.dc-wed-eyebrow-row p {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dc-gold);
  margin: 0;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Thank-you screen (gracias.php)
   Chrome-less page: a max-w-lg (576px) card centred in the viewport. The
   original's Tailwind sizes on an 18px root: py-12 = 54px, px-4 = 18px,
   mb-8 = 36px, w-16/h-16 = 72px, mb-5 = 22.5px, space-y-2 = 9px, mb-10 = 45px.
--------------------------------------------------------------------------- */
.dc-thanks {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 54px 18px;
  background-color: var(--dc-bg1);
}
.dc-thanks-card { width: 100%; max-width: 576px; text-align: center; }

.dc-thanks-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 22.5px;
  border: 1px solid rgba(245, 240, 232, 0.2);
}

.dc-thanks-box {
  border: 1px solid rgba(245, 240, 232, 0.12);
  background-color: rgba(255, 255, 255, 0.02);
  padding: 40px 32px;
}

.dc-thanks-contact { margin-bottom: 45px; }
.dc-thanks-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: 15px;
}
.dc-thanks-line + .dc-thanks-line { margin-top: 9px; }
.dc-thanks-line span { color: rgba(245, 240, 232, 0.45); }
.dc-thanks-line a { color: var(--dc-cream-muted); text-decoration: none; }
.dc-thanks-line a:hover { color: var(--dc-cream); }

/* Full-width gold outline button; not the shared .btn-gold-outline, whose
   metrics belong to the navbar. */
.dc-thanks-back {
  width: 100%;
  border: 1px solid #c9a96e;
  color: #c9a96e;
  background-color: transparent;
  font-family: var(--font-sans);
  padding: 13px 28px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.dc-thanks-back:hover { color: #c9a96e; }

/* ---------------------------------------------------------------------------
   Weddings block: shared closing ornament + footer links, and the alternating
   image/text modules used by bodas-locaciones.
--------------------------------------------------------------------------- */
.dc-wed-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}
.dc-wed-ornament-rule { height: 1px; width: 60px; background-color: var(--dc-gold); opacity: .3; }
.dc-wed-ornament-dot { width: 4px; height: 4px; border-radius: 50%; background-color: var(--dc-gold); opacity: .5; }

.dc-wed-footlinks { display: flex; justify-content: center; flex-wrap: wrap; }
.dc-wed-footlinks a {
  font-family: var(--font-sans);
  font-size: 12px;
  color: rgba(245, 240, 232, 0.48);
  text-decoration: none;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(245, 240, 232, 0.15);
  padding-bottom: 4px;
  transition: color .2s, border-color .2s;
}
.dc-wed-footlinks a:hover { color: var(--dc-gold); border-bottom-color: var(--dc-gold); }
/* bodas-locaciones uses slightly larger, wider-tracked links. */
.dc-wed-footlinks.is-loc a {
  font-size: 13px;
  letter-spacing: 0.1em;
  border-bottom-color: rgba(245, 240, 232, 0.18);
  padding: 4px 0;
}

/* One venue: photo slider on one side, copy on the other, sides swapping on
   every other module. Stacked below lg (1024px), as in the original. */
.dc-wed-mod {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  border-bottom: 1px solid rgba(245, 240, 232, 0.07);
  overflow: hidden;
}
.dc-wed-mod-media {
  position: relative;
  flex-shrink: 0;
  min-height: 260px;
  overflow: hidden;
  background-color: #0a1a0a;
  width: 100%;
}
.dc-wed-mod-media .carousel-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dc-wed-mod-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13, 31, 13, 0.15) 0%, transparent 55%);
  pointer-events: none;
}
.dc-wed-mod-nav {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 5px;
  z-index: 2;
}
.dc-wed-mod-nav button {
  width: 32px;
  height: 32px;
  background: rgba(13, 31, 13, 0.80);
  border: 1px solid rgba(245, 240, 232, 0.22);
  color: var(--dc-cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}
.dc-wed-mod-body {
  flex: 1;
  background-color: var(--dc-bg1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px);
  overflow-y: auto;
}
.dc-wed-mod-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dc-gold);
  margin: 0 0 14px;
}
.dc-wed-mod-body h2 {
  font-family: var(--font-serif);
  font-size: clamp(25.2px, 2.8vw, 39.6px);
  font-weight: 700;
  color: var(--dc-cream);
  margin: 0 0 18px;
  line-height: 1.15;
}
.dc-wed-mod-desc {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.78;
  color: rgba(245, 240, 232, 0.78);
  margin: 0 0 32px;
  max-width: 420px;
  white-space: pre-line;
}
.dc-wed-mod-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--dc-gold);
  color: var(--dc-gold);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 26px;
  text-decoration: none;
  align-self: flex-start;
  transition: background-color .2s, color .2s;
}
.dc-wed-mod-cta:hover { background-color: var(--dc-gold); color: var(--dc-bg1); }

@media (min-width: 1024px) {
  .dc-wed-mod { flex-direction: row; max-height: 560px; }
  .dc-wed-mod.is-flipped { flex-direction: row-reverse; }
  .dc-wed-mod-media { width: 55%; }
}

/* Full-bleed pause between the ceremony and reception venues. */
.dc-wed-divider {
  background-color: #0a1800;
  border-top: 1px solid rgba(201, 169, 110, 0.18);
  border-bottom: 1px solid rgba(201, 169, 110, 0.18);
  padding: clamp(52px, 8vw, 96px) clamp(24px, 6vw, 80px);
  text-align: center;
}
.dc-wed-divider h2 {
  font-family: var(--font-serif);
  font-size: clamp(28.8px, 3.5vw, 50.4px);
  font-weight: 700;
  color: var(--dc-cream);
  margin: 0 auto 20px;
  line-height: 1.12;
  max-width: 720px;
}
.dc-wed-divider p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.82;
  color: rgba(245, 240, 232, 0.78);
  margin: 0 auto;
  max-width: 640px;
  white-space: pre-line;
}

/* bodas-planificacion's modules are taller, roomier and carry a single still
   photo plus a stack of outbound links instead of a paragraph and CTA. */
.dc-wed-mod.is-plan { min-height: 480px; }
.dc-wed-mod.is-plan .dc-wed-mod-media { min-height: 280px; }
.dc-wed-mod.is-plan .dc-wed-mod-body { padding: clamp(36px, 6vw, 80px); overflow-y: visible; }
.dc-wed-mod.is-plan .dc-wed-mod-body h2 { margin-bottom: 28px; }
@media (min-width: 1024px) { .dc-wed-mod.is-plan { max-height: none; } }

.dc-wed-linklist { display: flex; flex-direction: column; gap: 10px; }
.dc-wed-linklist a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--dc-gold);
  color: var(--dc-gold);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 11px 22px;
  text-decoration: none;
  align-self: flex-start;
  transition: background-color .2s, color .2s;
}
.dc-wed-linklist a:hover { background-color: var(--dc-gold); color: var(--dc-bg1); }

/* Standing call-out pointing at the legal guide. */
.dc-wed-legal {
  padding: clamp(48px, 6vw, 72px) clamp(20px, 5vw, 64px);
  max-width: 1100px;
  margin: 0 auto;
  border-top: 1px solid rgba(245, 240, 232, 0.07);
}
.dc-wed-legal-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 32px;
  background-color: #102010;
  border: 1px solid rgba(201, 169, 110, 0.20);
}
.dc-wed-legal-box h3 {
  font-family: var(--font-serif);
  font-size: clamp(19.8px, 2vw, 28.8px);
  font-weight: 700;
  color: var(--dc-cream);
  margin: 0 0 8px;
}
.dc-wed-legal-box p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(245, 240, 232, 0.78);
  margin: 0;
  max-width: 480px;
  white-space: pre-line;
}
.dc-wed-legal-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--dc-gold);
  color: var(--dc-gold);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 12px 24px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background-color .2s, color .2s;
}
.dc-wed-legal-cta:hover { background-color: var(--dc-gold); color: var(--dc-bg1); }

/* ---------------------------------------------------------------------------
   DcTag: the gold rule + small caps label the original puts above a heading.
   Distinct from .tag-label, which matches a different (larger) tag markup.
--------------------------------------------------------------------------- */
.dc-tag { margin-bottom: 22.5px; }
.dc-tag.is-centered { text-align: center; }
.dc-tag-rule { height: 1px; background-color: var(--dc-gold); width: 48px; margin-bottom: 11px; }
.dc-tag.is-centered .dc-tag-rule { margin: 0 auto 11px; }
.dc-tag-label {
  display: block;
  color: var(--dc-gold);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.27em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Reviews page (resenas)
--------------------------------------------------------------------------- */
.dc-res-hero {
  position: relative;
  height: 55vh;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dc-res-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dc-res-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,31,13,0.9) 0%, rgba(13,31,13,0.4) 50%, rgba(13,31,13,0.2) 100%);
}
.dc-res-hero-body { position: relative; z-index: 10; text-align: center; padding: 0 18px; }
.dc-res-hero-body h1 {
  color: var(--dc-cream);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(45px, 6vw, 90px);
  line-height: 1.1;
}

.dc-res-stars { display: flex; align-items: center; gap: 2.25px; }

/* Summary card per review source. */
.dc-res-summary {
  max-width: 864px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 27px;
}
@media (min-width: 640px) { .dc-res-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dc-res-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 9px;
  padding: 36px;
  background-color: rgba(245, 240, 232, 0.04);
  border: 1px solid rgba(245, 240, 232, 0.12);
}
.dc-res-card-head { display: flex; align-items: center; gap: 13.5px; margin-bottom: 18px; }
.dc-res-card-head span { color: var(--dc-cream); font-family: var(--font-sans); font-weight: 600; font-size: 18px; }
.dc-res-score { color: var(--dc-gold); font-family: var(--font-serif); font-size: 44px; line-height: 1; }
.dc-res-card .dc-res-stars { margin: 13.5px 0; }
.dc-res-overall {
  color: rgba(245, 240, 232, 0.55);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.dc-res-count { color: var(--dc-cream-muted); font-family: var(--font-sans); font-size: 16px; margin: 0; }
.dc-res-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 27px;
  color: var(--dc-bg1);
  background-color: var(--dc-gold);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  padding: 10px 22px;
  border-radius: 999px;
  text-decoration: none;
}
.dc-res-cta:hover { color: var(--dc-bg1); }

/* Grid of individual reviews. */
.dc-res-grid {
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 27px;
}
@media (min-width: 768px) { .dc-res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dc-res-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dc-res-review {
  display: flex;
  flex-direction: column;
  border-radius: 9px;
  padding: 27px;
  background-color: rgba(245, 240, 232, 0.04);
  border: 1px solid rgba(245, 240, 232, 0.12);
}
.dc-res-review .dc-res-quote { color: var(--dc-gold); opacity: .6; margin-bottom: 18px; }
.dc-res-review-body {
  margin: 18px 0 0;
  flex: 1;
  color: var(--dc-cream-muted);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.75;
  white-space: pre-line;
}
.dc-res-review-foot {
  margin-top: 22.5px;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(245, 240, 232, 0.1);
}
.dc-res-review-foot .author { color: var(--dc-cream); font-family: var(--font-sans); font-weight: 600; font-size: 16px; }
.dc-res-review-foot .source {
  display: inline-flex;
  align-items: center;
  gap: 6.75px;
  color: rgba(245, 240, 232, 0.55);
  font-family: var(--font-sans);
  font-size: 14px;
}

/* Closing call to action. */
.dc-res-cta-section { background-color: var(--dc-bg2); padding: 90px 18px; }
.dc-res-cta-inner { max-width: 864px; margin: 0 auto; text-align: center; }
.dc-res-cta-inner h2 {
  color: var(--dc-cream);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(32.4px, 3.5vw, 50.4px);
  margin: 0 0 16px;
}
.dc-res-cta-inner > p {
  color: var(--dc-cream-muted);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 32px;
  white-space: pre-line;
}
.dc-res-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c9a96e;
  color: #c9a96e;
  background-color: transparent;
  font-family: var(--font-sans);
  padding: 13px 36px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.dc-res-cta-btn:hover { background-color: #c9a96e; color: var(--dc-bg1); }

/* ---------------------------------------------------------------------------
   Weddings landing page (bodas)
--------------------------------------------------------------------------- */
.dc-wedh {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--dc-bg1);
}
.dc-wedh > .carousel-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dc-wedh-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13,31,13,0.3) 0%, transparent 35%, transparent 48%, rgba(13,31,13,0.88) 100%);
  pointer-events: none;
}
.dc-wedh-body {
  position: absolute;
  bottom: 88px;
  left: 0;
  right: 0;
  padding: 0 clamp(24px, 5vw, 72px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.dc-wedh-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dc-gold);
  margin: 0 0 12px;
}
.dc-wedh-body h1 {
  font-family: var(--font-serif);
  font-size: clamp(39.6px, 5.5vw, 81px);
  font-weight: 700;
  color: var(--dc-cream);
  margin: 0;
  line-height: 1.08;
  text-shadow: 0 2px 24px rgba(13, 31, 13, 0.6);
  max-width: 680px;
}
.dc-wedh-nav { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.dc-wedh-arrows { display: flex; gap: 8px; }
.dc-wedh-arrows button {
  width: 42px;
  height: 42px;
  background: rgba(13, 31, 13, 0.75);
  border: 1px solid rgba(245, 240, 232, 0.30);
  color: var(--dc-cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 22.5px;
  line-height: 1;
}
.dc-wedh-arrows button:hover { background: var(--dc-bg1); }
.dc-wedh-dots { display: flex; gap: 6px; }
.dc-wedh-discover {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: 1px solid rgba(245, 240, 232, 0.30);
  color: rgba(245, 240, 232, 0.48);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 8px 20px;
  text-decoration: none;
}
.dc-wedh-discover:hover { background-color: rgba(245, 240, 232, 0.10); color: rgba(245, 240, 232, 0.48); }

/* Opening editorial column: eyebrow, big heading, two-column copy, video. */
.dc-wed-lead {
  background-color: var(--dc-bg1);
  padding: clamp(60px, 10vw, 120px) clamp(20px, 6vw, 80px);
  max-width: 1280px;
  margin: 0 auto;
}
.dc-wed-lead h2 {
  font-family: var(--font-serif);
  font-size: clamp(32.4px, 4.5vw, 64.8px);
  font-weight: 700;
  color: var(--dc-cream);
  margin: 0 0 44px;
  line-height: 1.1;
  max-width: 780px;
}
.dc-wed-lead-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-bottom: 68px;
}
@media (min-width: 1024px) { .dc-wed-lead-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 72px; row-gap: 36px; } }
.dc-wed-lead-cols p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.82;
  color: rgba(245, 240, 232, 0.78);
  margin: 0;
  white-space: pre-line;
}
.dc-wed-video { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 80vh; overflow: hidden; }
.dc-wed-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* The five numbered editorial blocks. */
.dc-wed-ed { display: flex; flex-direction: column; min-height: 520px; }
.dc-wed-ed-media {
  position: relative;
  flex-shrink: 0;
  min-height: 320px;
  overflow: hidden;
  background-color: #0a1a0a;
  width: 100%;
}
.dc-wed-ed-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dc-wed-ed-badge {
  position: absolute;
  top: 24px;
  left: 24px;
  background: rgba(13, 31, 13, 0.80);
  border: 1px solid var(--dc-gold);
  padding: 5px 14px;
}
.dc-wed-ed.is-flipped .dc-wed-ed-badge { left: auto; right: 24px; }
.dc-wed-ed-badge span {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--dc-gold);
}
.dc-wed-ed-body {
  flex: 1;
  background-color: var(--dc-bg1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 6vw, 80px);
  border-top: 1px solid rgba(245, 240, 232, 0.06);
  border-bottom: 1px solid rgba(245, 240, 232, 0.06);
}
.dc-wed-ed-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dc-gold);
  margin: 0 0 18px;
}
.dc-wed-ed-body h2 {
  font-family: var(--font-serif);
  font-size: clamp(27px, 3vw, 45px);
  font-weight: 700;
  color: var(--dc-cream);
  margin: 0 0 18px;
  line-height: 1.15;
}
.dc-wed-ed-body > p:not(.dc-wed-ed-label) {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.78;
  color: rgba(245, 240, 232, 0.78);
  margin: 0 0 36px;
  max-width: 420px;
  white-space: pre-line;
}
@media (min-width: 1024px) {
  .dc-wed-ed { flex-direction: row; }
  .dc-wed-ed.is-flipped { flex-direction: row-reverse; }
  .dc-wed-ed-media { width: 55%; }
}

/* Enquiry block: contact column beside the form. */
.dc-wed-inq {
  background-color: var(--dc-bg1);
  padding: clamp(60px, 10vw, 110px) clamp(20px, 6vw, 80px);
  border-top: 1px solid rgba(201, 169, 110, 0.18);
}
.dc-wed-inq-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 54px;
  align-items: flex-start;
}
@media (min-width: 1024px) { .dc-wed-inq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 90px; } }
.dc-wed-inq h2 {
  font-family: var(--font-serif);
  font-size: clamp(32.4px, 4vw, 54px);
  font-weight: 700;
  color: var(--dc-cream);
  margin: 0 0 20px;
  line-height: 1.1;
}
.dc-wed-inq-sub { font-family: var(--font-sans); font-size: 15px; color: rgba(245,240,232,.78); line-height: 1.8; margin: 0 0 40px; }
.dc-wed-inq-or {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.48);
  margin: 0 0 16px;
}
.dc-wed-inq-actions { display: flex; flex-direction: column; gap: 12px; }
.dc-wed-inq-actions a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 24px;
  text-decoration: none;
  align-self: flex-start;
  transition: opacity .2s, background-color .2s, color .2s;
}
.dc-wed-inq-wa { background-color: #25D366; border: none; color: #fff; font-weight: 600; }
.dc-wed-inq-wa:hover { opacity: .85; color: #fff; }
.dc-wed-inq-mail { border: 1px solid var(--dc-gold); color: var(--dc-gold); background: transparent; }
.dc-wed-inq-mail:hover { background-color: var(--dc-gold); color: var(--dc-bg1); }

.dc-wed-form { display: flex; flex-direction: column; gap: 20px; }
.dc-wed-form-row { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .dc-wed-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dc-wed-form label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dc-gold);
  display: block;
  margin-bottom: 8px;
}
.dc-wed-form input,
.dc-wed-form select,
.dc-wed-form textarea {
  width: 100%;
  background-color: rgba(245, 240, 232, 0.05);
  border: 1px solid rgba(245, 240, 232, 0.15);
  color: var(--dc-cream);
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 12px 16px;
  outline: none;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}
.dc-wed-form input[type="date"] { color-scheme: dark; }
.dc-wed-form select { cursor: pointer; }
.dc-wed-form textarea { resize: vertical; }
.dc-wed-form option { background-color: var(--dc-bg1); }
.dc-wed-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--dc-gold);
  border: none;
  color: var(--dc-bg1);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px 32px;
  cursor: pointer;
  font-weight: 700;
  align-self: flex-start;
  transition: opacity .2s;
}
.dc-wed-form button[type="submit"]:hover { opacity: .85; }

/* Closing "explore" pills. */
.dc-wed-explore { background-color: var(--dc-bg1); padding: 72px 24px; text-align: center; border-top: 1px solid rgba(245,240,232,.07); }
.dc-wed-explore > p {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.48);
  margin: 0 0 28px;
}
.dc-wed-explore-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.dc-wed-explore-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(245, 240, 232, 0.22);
  color: rgba(245, 240, 232, 0.78);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 10px 22px;
  text-decoration: none;
  transition: all .2s;
}
.dc-wed-explore-links a:hover { background-color: var(--dc-gold); border-color: var(--dc-gold); color: var(--dc-bg1); }

/* bodas-consultas narrows the intro and opens the rule further from the text. */
.dc-wed-intro.is-narrow {
  max-width: 760px;
  padding: clamp(48px, 7vw, 80px) clamp(24px, 5vw, 64px);
}
.dc-wed-intro.is-narrow .dc-rule { margin: 0 auto 28px; }
.dc-wed-intro.is-narrow h2 { line-height: 1.1; }
.dc-wed-intro.is-narrow p { line-height: 1.85; }

/* ---------------------------------------------------------------------------
   Editorial page shell (historia-727, bodas-legal): tall photo hero, an
   italic intro band, a stack of centred story blocks and a photo grid.
--------------------------------------------------------------------------- */
.dc-story-hero {
  position: relative;
  height: 60vh;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dc-story-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dc-story-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,31,13,0.9) 0%, rgba(13,31,13,0.4) 50%, rgba(13,31,13,0.2) 100%);
}
.dc-story-hero-body { position: relative; z-index: 10; text-align: center; padding: 0 18px; }
.dc-story-hero-body h1 {
  color: var(--dc-cream);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(39.6px, 5vw, 81px);
  line-height: 1.1;
}

.dc-story-intro { padding: 54px 18px; background-color: var(--dc-bg2); }
.dc-story-intro p {
  max-width: 864px;
  margin: 0 auto;
  text-align: center;
  color: var(--dc-cream-muted);
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.8;
  font-style: italic;
  white-space: pre-line;
}

.dc-story-body { padding: 72px 18px; }
.dc-story-body-inner { max-width: 864px; margin: 0 auto; }
.dc-story-body-inner > * + * { margin-top: 54px; }
.dc-story-body h2 {
  color: var(--dc-cream);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(27px, 2.6vw, 39.6px);
  margin: 0 0 12px;
  text-align: center;
}
.dc-story-body p {
  color: var(--dc-cream-muted);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.8;
  text-align: center;
  white-space: pre-line;
  margin: 0;
}

.dc-story-gallery { padding: 72px 18px; background-color: var(--dc-bg2); }
.dc-story-gallery-grid {
  max-width: 1296px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13.5px;
}
@media (min-width: 768px) { .dc-story-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dc-story-gallery-grid > div { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.dc-story-gallery-grid img { width: 100%; height: 100%; object-fit: cover; }

/* bodas-legal's hero is a touch shorter than the 727 one. */
.dc-story-hero.is-short { height: 55vh; min-height: 380px; }
/* Its documents block is one unit, so the stack rhythm is suppressed there. */
.dc-story-body-inner[style*="--dc-story-gap"] > * + * { margin-top: 0; }
.dc-legal-docs { list-style: none; padding: 0; margin: 0; }
.dc-legal-docs li { display: flex; align-items: flex-start; gap: 13.5px; }
.dc-legal-docs li + li { margin-top: 18px; }
.dc-legal-docs li > svg { flex-shrink: 0; margin-top: 2.25px; }
.dc-legal-docs span {
  color: var(--dc-cream-muted);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  white-space: pre-line;
}

/* ---------------------------------------------------------------------------
   Beds24 booking modal — the full-screen frame the availability forms open,
   mirroring the original's BookingModal.
--------------------------------------------------------------------------- */
.dc-booking-modal {
  position: fixed;
  top: var(--dc-nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  /* Under the navbar's 1050 on purpose: the bar stays fully visible and its
     dropdowns open over the booking engine instead of behind it. */
  z-index: 1040;
  display: flex;
  flex-direction: column;
  background-color: var(--dc-bg1);
}
/* The modal has no bar of its own: its reassurance line and close button sit
   in the navbar (.dc-booking-strip-nav) so the engine gets the full height. */
.dc-booking-modal-body { position: relative; flex: 1; overflow: hidden; }
.dc-booking-modal-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.dc-booking-modal-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background-color: var(--dc-bg1);
}
.dc-booking-modal-loading p { color: rgba(245, 240, 232, 0.55); font-size: 14px; margin: 0; }
.dc-spinner {
  width: 45px;
  height: 45px;
  border: 2px solid rgba(201, 169, 110, 0.25);
  border-top-color: var(--dc-gold);
  border-radius: 50%;
  animation: dc-spin 1s linear infinite;
}
@keyframes dc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dc-spinner { animation: none; } }

/* ---------------------------------------------------------------------------
   Booking mode: while the Beds24 engine is open the navbar goes compact and
   carries the engine's reassurance line and its close button. The 178px logo
   is the tallest thing on the page and the engine needs the room.
--------------------------------------------------------------------------- */
.dc-booking-strip-nav { display: none; }

body.is-booking { --dc-nav-h: 115px; }
body.is-booking .dc-navbar .navbar-brand img { height: 96px; }
/* Reserve is redundant once the engine is open, and its slot is the room the
   strip needs. */
body.is-booking .dc-navbar .dc-nav-tail .btn-gold-outline { display: none; }

body.is-booking .dc-booking-strip-nav {
  display: flex;
  align-items: center;
  gap: 13.5px;
  order: 3;
  min-width: 0;
}
.dc-booking-strip-note {
  font-family: var(--font-sans);
  font-size: 14px;
  color: rgba(245, 240, 232, 0.55);
  white-space: nowrap;
}
/* The note only appears where the row can actually hold it: too narrow below
   768px, and between 992 and 1279 the full link row leaves no room. The close
   button is 42px and always fits. */
@media (max-width: 767px) { .dc-booking-strip-note { display: none; } }
@media (min-width: 992px) and (max-width: 1279px) { .dc-booking-strip-note { display: none; } }
.dc-booking-strip-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(245, 240, 232, 0.25);
  color: rgba(245, 240, 232, 0.75);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: background-color .2s, color .2s, border-color .2s;
}
.dc-booking-strip-close:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--dc-cream);
  border-color: rgba(245, 240, 232, 0.5);
}

/* Below lg the strip has to clear the collapsed panel, so it sits beside the
   hamburger rather than after the links. */
@media (max-width: 991px) {
  body.is-booking { --dc-nav-h: 83px; }
  body.is-booking .dc-navbar .navbar-brand img { height: 64px; }
  body.is-booking .dc-booking-strip-nav { order: 2; margin-left: auto; margin-right: 9px; }
}