/* ==========================================================================
   Melba · Ana Paula Alba — Design tokens & base styles
   Loaded on the front end and inside the Elementor editor.

   NOTE: Elementor renders custom CSS classes on *widgets* but strips them from
   *containers*. CSS IDs (_element_id) DO render on containers, so all
   container-level layout hooks below target #ids; widget/inline hooks use
   .classes. Layout-critical pieces are driven here (not by Elementor element
   settings) so they render reliably for programmatically-built pages.
   ========================================================================== */

:root {
  /* ---- Primitives ---------------------------------------------------- */
  --c-cream-50:  #f9f5f0;
  --c-cream-100: #f4efe7;
  --c-sand-200:  #ece5db;
  --c-border:    #ddd6cf;

  --c-ink-900:   #1b1511;
  --c-ink-800:   #261d18;
  --c-stone-600: #4d4642;
  --c-stone-400: #7f7974;

  --c-terra-600: #7c3422;
  --c-terra-500: #9c503e;
  --c-terra-100: #f6dfd3;

  --c-white: #ffffff;

  /* ---- Semantic ------------------------------------------------------ */
  --color-surface:        var(--c-cream-50);
  --color-surface-alt:    var(--c-cream-100);
  --color-surface-panel:  var(--c-sand-200);
  --color-surface-dark:   var(--c-ink-900);
  --color-surface-dark-2: var(--c-ink-800);

  --color-text:           var(--c-ink-900);
  --color-text-body:      var(--c-stone-600);
  --color-text-muted:     var(--c-stone-400);
  --color-text-on-dark:   var(--c-cream-50);
  --color-muted-on-dark:  rgba(249, 245, 240, 0.62);

  --color-accent:         var(--c-terra-500);
  --color-accent-strong:  var(--c-terra-600);
  --color-accent-tint:    var(--c-terra-100);
  --color-accent-on-dark: #e3a98f;

  --color-border:         var(--c-border);
  --color-border-dark:    rgba(249, 245, 240, 0.14);

  /* ---- Typography ---------------------------------------------------- */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body:    "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --fs-display: clamp(3rem, 5.2vw, 5.125rem);
  --fs-h2:      clamp(2.4rem, 4.2vw, 4rem);
  --fs-h3:      clamp(1.8rem, 2.6vw, 2.25rem);
  --fs-price:   clamp(1.9rem, 3vw, 2.9rem);
  --fs-body:    1.0625rem;
  --fs-eyebrow: 0.6875rem;

  --lh-display: 1.06;
  --lh-body:    1.65;
  --track-eyebrow: 0.16em;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 999px;
  --container-max: 1088px;
}

/* ==========================================================================
   Base
   ========================================================================== */
.melba-site {
  background: var(--color-surface);
  color: var(--color-text-body);
  font-family: var(--font-body);
}
.melba-site h1, .melba-site h2, .melba-site h3,
.melba-display, .melba-display * {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: var(--lh-display);
  color: var(--color-text);
}
.melba-display em, .melba-display .accent {
  font-style: italic;
  color: var(--color-accent);
}

/* ==========================================================================
   Inline / widget helpers (these classes DO render — widgets & HTML)
   ========================================================================== */
.melba-eyebrow, .melba-eyebrow * {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.melba-eyebrow--accent, .melba-eyebrow--accent * { color: var(--color-accent-strong); }

.melba-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-accent-tint);
  color: var(--color-accent-strong);
  font-weight: 600; font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 14px; border-radius: var(--radius-pill);
}

.melba-body, .melba-body * {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-body);
}

.melba-display.is-hero { font-size: var(--fs-display); }
.melba-display.is-h2   { font-size: var(--fs-h2); }
.melba-display.is-h3   { font-size: var(--fs-h3); margin: 0; }
.melba-display p, .melba-body p { margin: 0 0 .6em; }
.melba-center, .melba-center * { text-align: center; }
.melba-measure { max-width: 620px; margin-left: auto; margin-right: auto; }
.melba-price { font-family: var(--font-display); font-size: var(--fs-price); color: var(--color-text); line-height: 1; }

.melba-body strong, .melba-body b { font-weight: 700; color: var(--color-text); }

/* Cohesive thin-line icon set (Phosphor light, rendered as <i> in text widgets). */
.melba-ico { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.melba-ico::before { line-height: 1; }

/* Buttons (button widgets). High specificity + !important so the Elementor
   global Kit can't override the base state — that override was leaving CTAs
   cream-on-cream and only revealing the text on hover. Icons inherit color. */
/* One shared button motion for every variant (Elementor buttons AND the hero
   inline .hero-btn): lift -2px on hover, same easing/duration everywhere. */
.melba-site .elementor-widget-button .elementor-button,
.melba-hero .hero-btn {
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.melba-site .elementor-widget-button .elementor-button { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.02em; }
.melba-site .elementor-widget-button .elementor-button:hover,
.melba-hero .hero-btn:hover { transform: translateY(-2px); }
.melba-site .elementor-button .elementor-button-icon i,
.melba-site .elementor-button .elementor-button-icon svg { color: inherit !important; fill: currentColor !important; }

/* primary = terracotta fill */
.melba-site .melba-btn-primary .elementor-button,
.melba-site .melba-btn-primary .elementor-button:visited {
  background-color: var(--color-accent) !important; color: #fff !important; border-color: var(--color-accent) !important;
}
.melba-site .melba-btn-primary .elementor-button:hover {
  background-color: var(--color-accent-strong) !important; border-color: var(--color-accent-strong) !important; color: #fff !important;
}

/* dark = ink fill (in-page primary CTA, e.g. Ana Paula) */
.melba-site .melba-btn-dark .elementor-button,
.melba-site .melba-btn-dark .elementor-button:visited {
  background-color: var(--color-text) !important; color: var(--color-text-on-dark) !important; border-color: var(--color-text) !important;
}
.melba-site .melba-btn-dark .elementor-button:hover {
  background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; color: #fff !important;
}

/* ghost = outline */
.melba-site .melba-btn-ghost .elementor-button,
.melba-site .melba-btn-ghost .elementor-button:visited {
  background-color: transparent !important; color: var(--color-text) !important; border-color: var(--color-border) !important;
}
.melba-site .melba-btn-ghost .elementor-button:hover {
  background-color: transparent !important; border-color: var(--color-accent) !important; color: var(--color-accent) !important;
}

/* nav = light pill on the dark header bar */
.melba-site .melba-btn-nav .elementor-button,
.melba-site .melba-btn-nav .elementor-button:visited {
  background-color: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-surface) !important;
}
.melba-site .melba-btn-nav .elementor-button:hover {
  background-color: var(--color-accent) !important; color: #fff !important; border-color: var(--color-accent) !important;
}

/* scroll-reveal (JS adds .melba-reveal, then .melba-in as a section scrolls in) */
.melba-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.melba-reveal.melba-in { opacity: 1; transform: none; }

/* ==========================================================================
   Sticky header (Theme Builder header bar carries #melba-header)
   ========================================================================== */
/* fixed (not sticky): the Theme Builder header's parent is only as tall as the
   bar, so position:sticky has no room to travel and scrolls away. fixed pins it
   to the viewport and follows the user; the hero sits full-bleed beneath it. */
#melba-header { position: fixed !important; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; }
/* offset anchor jumps so section tops aren't hidden under the fixed bar */
#inicio, #galeria, #amenidades, #ubicacion, #invertir, #asesora, #otras-unidades, #testimonios, #contacto { scroll-margin-top: 88px; }

/* ==========================================================================
   Mobile menu — full-screen takeover. melba.js mirrors the burger's open state
   onto <body class="melba-menu-open">; this works at whatever width Elementor
   chooses to show the burger (not tied to a media query). z-index 999 keeps it
   under the fixed header (1000) so the logo + X stay visible/clickable on top.
   ========================================================================== */
body.melba-menu-open #melba-header .elementor-nav-menu--dropdown {
  position: fixed !important; inset: 0 !important;
  width: 100vw !important; height: 100vh !important; height: 100dvh !important;
  max-height: none !important; margin: 0 !important;
  padding: 88px 24px 48px !important;
  background: radial-gradient(ellipse 80% 55% at 50% 42%, rgba(156,80,62,0.18), rgba(156,80,62,0) 70%), var(--color-surface-dark) !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  display: flex !important; z-index: 999 !important; overflow-y: auto !important;
  animation: melbaMenuIn .28s ease both;
}
@keyframes melbaMenuIn { from { opacity: 0; } to { opacity: 1; } }
body.melba-menu-open #melba-header .elementor-nav-menu--dropdown ul {
  margin: auto !important; width: 100% !important; padding: 0 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important; gap: 2px !important;
  background: transparent !important; border: 0 !important;
}
body.melba-menu-open #melba-header .elementor-nav-menu--dropdown li,
body.melba-menu-open #melba-header .elementor-nav-menu--dropdown .menu-item {
  width: auto !important; border: 0 !important;
}
body.melba-menu-open #melba-header .elementor-nav-menu--dropdown a {
  font-family: var(--font-display) !important; font-size: 2.1rem !important;
  line-height: 1.3 !important; color: var(--color-text-on-dark) !important;
  text-transform: none !important; letter-spacing: 0 !important;
  padding: 10px 24px !important; border: 0 !important; text-align: center !important;
  background: transparent !important;
}
body.melba-menu-open #melba-header .elementor-nav-menu--dropdown a:hover,
body.melba-menu-open #melba-header .elementor-nav-menu--dropdown a:active,
body.melba-menu-open #melba-header .elementor-nav-menu--dropdown .current-menu-item a {
  color: var(--color-accent-on-dark) !important; background: transparent !important;
}
/* Injected close (X) — sits above the overlay (z-index 1001 > the overlay's
   999, both inside the fixed header's stacking context) and is only shown while
   the menu is open. melba.js wires it to Elementor's real toggle. */
.melba-menu-close { display: none; }
body.melba-menu-open #melba-header .melba-menu-close {
  display: flex !important; align-items: center; justify-content: center;
  position: fixed !important; top: 18px; right: 18px; z-index: 1001 !important;
  width: 48px; height: 48px; padding: 0; margin: 0;
  background: transparent; border: 0; cursor: pointer; line-height: 1;
  font-size: 2rem; color: var(--color-text-on-dark);
  transition: color .2s ease, transform .2s ease;
}
body.melba-menu-open #melba-header .melba-menu-close:hover,
body.melba-menu-open #melba-header .melba-menu-close:focus-visible {
  color: var(--color-accent-on-dark); transform: scale(1.08); outline: none;
}

/* Mobile/tablet burger: use a Phosphor light glyph (matches the page's icon set)
   instead of Elementor's default inline SVG. IMPORTANT: the flex/centering must
   be scoped to the burger breakpoint (tablet ≤1024) — an unscoped
   `display:flex` overrides Elementor's own desktop `display:none` and leaks the
   burger onto desktop. The svg-hide + icon styling are harmless unscoped (the
   toggle isn't rendered on desktop anyway). */
#melba-header .elementor-menu-toggle svg { display: none !important; }
#melba-header .melba-burger-ico {
  font-size: 30px; line-height: 1; color: var(--color-text-on-dark);
}
@media (max-width: 1024px) {
  #melba-header .elementor-menu-toggle {
    display: flex !important; align-items: center; justify-content: center;
    margin: 0 !important; padding: 0;
  }
}

/* ==========================================================================
   Hero carousel (Slides widget — .melba-hero class renders on the widget)
   ========================================================================== */
/* left-align hero content on the SAME 1088 column as the sections below, so the
   eyebrow/headline share one invisible left line (max-width = column + the 24px
   side padding the sections carry on their outer wrapper). */
.melba-hero .swiper-slide-contents {
  max-width: calc(var(--container-max) + 48px);
  margin-left: auto; margin-right: auto;
  padding-left: 24px; padding-right: 24px;
  text-align: left;
}
.melba-hero .elementor-slide-content { max-width: 660px; margin: 0 !important; text-align: left !important; }
.melba-hero .elementor-slide-button { display: none !important; } /* belt: never show native button */
.melba-hero .elementor-slide-heading {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  color: #fff;
  font-size: clamp(2.4rem, 4.6vw, 3.85rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.28);
  margin-bottom: 16px;
}
.melba-hero .elementor-slide-heading em { font-style: italic; color: var(--color-accent-on-dark); }
.melba-hero .hero-eyebrow {
  display: block; font-family: var(--font-body);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.82); margin-bottom: 20px;
}
.melba-hero .elementor-slide-description { margin: 0; }
.melba-hero .hero-sub {
  display: block; font-family: var(--font-body);
  font-size: 1.02rem; line-height: 1.6; color: rgba(255,255,255,0.9);
  max-width: 460px; margin-bottom: 24px; text-shadow: 0 1px 20px rgba(0,0,0,0.3);
}
.melba-hero .hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.melba-hero .hero-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--radius-pill); padding: 13px 24px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.melba-hero .hero-btn.primary { background: var(--color-accent); color: #fff; font-weight: 700; box-shadow: 0 8px 22px rgba(124,52,34,0.38); }
.melba-hero .hero-btn.primary:hover { background: var(--color-accent-strong); box-shadow: 0 10px 26px rgba(124,52,34,0.45); }
.melba-hero .hero-btn.ghost {
  background: rgba(255,255,255,0.10); color: #fff;
  border: 1px solid rgba(255,255,255,0.5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.melba-hero .hero-btn.ghost:hover { background: rgba(255,255,255,0.2); }
.melba-hero .elementor-slides .swiper-slide-inner::before {
  content: ""; position: absolute; inset: 0;
  /* brighter image overall; darkness concentrated on the left for text legibility */
  background: linear-gradient(90deg, rgba(12,9,6,0.55) 0%, rgba(12,9,6,0.18) 48%, rgba(12,9,6,0) 72%);
  pointer-events: none;
}

/* refined, subtle entrance for the active slide's content (replaces fadeInUp) */
.melba-hero .swiper-slide-active .swiper-slide-contents {
  animation: melbaHeroIn .9s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes melbaHeroIn {
  from { opacity: 0; transform: translateY(16px); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* no grab/hand cursor over the slide — only the real controls are clickable.
   !important because Swiper sets cursor:grab as an inline style. */
.melba-hero .swiper-slide, .melba-hero .swiper-slide-inner,
.melba-hero .swiper-slide-bg, .melba-hero .swiper-wrapper,
.melba-hero .swiper, .melba-hero .swiper-container,
.melba-hero .elementor-slides { cursor: default !important; }
.melba-hero .hero-btn, .melba-hero .swiper-pagination-bullet { cursor: pointer !important; }

/* subtle pagination dots */
.melba-hero .swiper-pagination { bottom: 72px; }
.melba-hero .swiper-pagination-bullet {
  width: 7px; height: 7px; margin: 0 5px !important;
  background: rgba(249,245,240,0.45); opacity: 1; border: 0;
  transition: background .25s ease, width .25s ease, border-radius .25s ease;
}
.melba-hero .swiper-pagination-bullet-active {
  background: var(--color-accent-on-dark); width: 22px; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .melba-hero .swiper-slide-active .swiper-slide-contents { animation: none; }
}

/* ==========================================================================
   Pranzo gallery  (#pranzo-grid) — asymmetric masonry of 8 image widgets
   ========================================================================== */
#pranzo-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 150px;
  gap: 14px;
}
#pranzo-grid > .elementor-element { position: relative; height: 100%; overflow: hidden; border-radius: var(--radius-sm); cursor: zoom-in; }
#pranzo-grid > .elementor-element > * { height: 100%; }
#pranzo-grid a { display: block; height: 100%; cursor: zoom-in; }
#pranzo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
/* hover affordance: gentle zoom + darken so it reads as "click to enlarge" */
#pranzo-grid > .elementor-element:hover img { transform: scale(1.06); }
#pranzo-grid > .elementor-element::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(27,21,17,0.32), rgba(27,21,17,0) 42%);
  opacity: 0; transition: opacity .4s ease;
}
#pranzo-grid > .elementor-element:hover::after { opacity: 1; }
#pranzo-grid > *:nth-child(1) { grid-column: span 3; grid-row: span 2; }
#pranzo-grid > *:nth-child(2) { grid-column: span 3; }
#pranzo-grid > *:nth-child(3) { grid-column: span 3; }
#pranzo-grid > *:nth-child(4) { grid-column: span 2; }
#pranzo-grid > *:nth-child(5) { grid-column: span 2; }
#pranzo-grid > *:nth-child(6) { grid-column: span 2; }
#pranzo-grid > *:nth-child(7) { grid-column: span 3; grid-row: span 2; }
#pranzo-grid > *:nth-child(8) { grid-column: span 3; grid-row: span 2; }

/* ==========================================================================
   Spec strip (#spec-strip)
   ========================================================================== */
#spec-strip {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
#spec-strip > .elementor-element {
  padding: 26px 12px;
  border-left: 1px solid var(--color-border);
  align-items: center; text-align: center;
}
#spec-strip > .elementor-element:first-child { border-left: 0; }
#spec-strip .spec-ico { font-size: 1.45rem; color: var(--color-accent); margin-bottom: 4px; }
.melba-spec-label {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 500;
  color: var(--color-text); line-height: 1.35; text-align: center; display: block;
}

/* ==========================================================================
   Amenities (#amenity-grid + card children)
   ========================================================================== */
#amenity-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  padding: 0 !important; /* kill Elementor's default container padding — it was
                            revealing the gray bg as a thick frame around the grid */
  background: var(--color-border);
  border: 1px solid var(--color-border);
}
#amenity-grid > .elementor-element {
  position: relative;
  background: var(--color-surface-alt);
  padding: 32px 28px 38px;
  min-height: 210px;
  display: flex; flex-direction: column; gap: 12px;
}
/* top row holds icon (left) + number (right); zero its default container
   padding so the icon lines up with the title/description left edge */
#amenity-grid > .elementor-element > .elementor-element:first-child { padding: 0 !important; }
.amenity-num {
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--color-text-muted);
}
#amenity-grid .amenity-ico { font-size: 1.7rem; color: var(--color-text); }
.melba-amenity-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-text); margin-top: 10px; }
.amenity-desc { font-family: var(--font-body); font-size: 0.85rem; line-height: 1.55; color: var(--color-text-muted); margin: 0; }

/* ==========================================================================
   Location (#loc-grid items, #loc-map, #map-caption)
   ========================================================================== */
/* two-column row: content left, map right (was flex-wrapping the map below
   because 46% + 50% + 60px gap > 100%; grid keeps them side by side) */
#loc-row { display: grid !important; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 60px; align-items: start; }
#loc-row > .elementor-element { width: 100% !important; }

#loc-grid { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
#loc-grid > .elementor-element { padding: 14px 0; border-bottom: 1px solid var(--color-border); }
#loc-grid .melba-body { font-size: 0.95rem; }
#loc-grid .loc-ico { font-size: 1.2rem; color: var(--color-text); }
.melba-ver-mapa { display: inline-flex; align-items: center; gap: 6px; }
.melba-ver-mapa .melba-ico { font-size: 0.95rem; }

#loc-map { position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); }
#loc-map iframe, #loc-map .elementor-widget-google_maps { display: block; width: 100%; }
#map-caption {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  background: rgba(249,245,240,0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--radius-sm); padding: 14px 18px;
  box-shadow: 0 12px 30px rgba(27,21,17,0.16);
}
.melba-map-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-text); }
.melba-map-addr  { font-size: 0.78rem; color: var(--color-text-muted); }

/* ==========================================================================
   Investment formula (.melba-formula — HTML inside text widget)
   ========================================================================== */
.melba-formula { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.melba-formula .pill {
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 12px 24px; font-weight: 600; font-size: 0.95rem; color: var(--color-text);
}
.melba-formula .op { font-family: var(--font-display); font-size: 2.2rem; color: var(--color-accent); line-height: 1; }

/* Investment callout is a DARK band (#invertir) */
#invertir .melba-eyebrow, #invertir .melba-eyebrow * { color: rgba(227,169,143,0.85); }
#invertir .melba-display, #invertir .melba-display * { color: var(--color-accent-on-dark); font-size: clamp(2.8rem, 6vw, 5rem); }
#invertir .melba-body, #invertir .melba-body * { color: var(--color-muted-on-dark); }
#invertir .melba-formula .pill { border-color: rgba(249,245,240,0.28); color: var(--color-text-on-dark); }
#invertir .melba-formula .op { color: var(--color-accent-on-dark); }

/* ==========================================================================
   Ana Paula portrait (#ap-portrait) + contact (inline classes)
   ========================================================================== */
#ap-portrait { position: relative; border-radius: var(--radius-md); overflow: hidden; }
/* radius on the img too (not just the container) so it always renders rounded,
   matching the map + gallery — cohesive across all content images */
#ap-portrait img { width: 100%; height: auto; object-fit: cover; display: block; border-radius: var(--radius-md); }
#ap-actions .elementor-button { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; }
.melba-ap-contact { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 10px; border-top: 1px solid var(--color-border); padding-top: 22px; }
.melba-ap-val { font-family: var(--font-display); font-size: 1.25rem; color: var(--color-text); text-decoration: none; }

/* ==========================================================================
   Testimonials (#quote-row + card children)
   ========================================================================== */
/* three flat cards in one row (was wrapping to a 2-col masonry because
   3 × 32% + gaps > 100%; grid keeps them equal and side by side) */
#quote-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
#quote-row > .elementor-element {
  width: 100% !important; height: 100%;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 30px 28px 26px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: none;
}
/* push the author to the bottom so the divider lands consistently */
#quote-row > .elementor-element > .elementor-element:last-child { margin-top: auto; }
.melba-quote-mark { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--color-accent); }
#quote-row .melba-body { font-size: 0.96rem; }
.melba-quote-name { display: block; padding-top: 18px; border-top: 1px solid var(--color-border); font-weight: 600; color: var(--color-text); }

/* ==========================================================================
   Contact (#contacto — DARK band) + the vertical icon list
   ========================================================================== */
#contacto { position: relative; overflow: hidden; }
/* ONE warm bloom in the Hablemos content area that fades fully to the solid
   dark well before the bottom edge — so it resolves into the (also solid #1b1511)
   footer with no hard clip line and no competing second bloom. */
#contacto::before {
  content: ""; position: absolute; z-index: 0; right: -10%; top: 36%;
  transform: translateY(-50%); width: 70%; height: 95%;
  background: radial-gradient(ellipse 56% 50% at center, rgba(156,80,62,0.34), rgba(156,80,62,0) 70%);
  pointer-events: none;
}
#contacto > .elementor-element { position: relative; z-index: 1; }
/* footer stays solid — the bloom above has already faded to this exact color */
#contacto .melba-eyebrow, #contacto .melba-eyebrow * { color: rgba(249,245,240,0.60); }
#contacto .melba-display, #contacto .melba-display * { color: var(--color-text-on-dark); }
#contacto .melba-display em { color: var(--color-accent-on-dark); }
#contacto .melba-body, #contacto .melba-body * { color: var(--color-muted-on-dark); }
#contacto .melba-display, #contacto .melba-body, #contacto .melba-contact-list { max-width: 560px; }

.melba-contact-list { display: flex; flex-direction: column; }
.melba-contact-list a {
  display: flex; align-items: center; gap: 14px; padding: 16px 0;
  border-bottom: 1px solid rgba(249,245,240,0.12);
  text-decoration: none; color: var(--color-text-on-dark); transition: color .18s ease;
}
.melba-contact-list a:hover { color: var(--color-accent-on-dark); }
.melba-contact-list .melba-ico { flex: none; font-size: 1.3rem; color: var(--color-accent-on-dark); }
.melba-contact-val { font-family: var(--font-body); font-size: 1.02rem; color: inherit; }

/* ==========================================================================
   Footer (dark) — inline classes + #wa-fab
   ========================================================================== */
.melba-foot-blurb { color: var(--color-muted-on-dark); font-size: 0.9rem; line-height: 1.6; }
.melba-foot-links { display: flex; flex-direction: column; gap: 10px; }
.melba-foot-links a { color: rgba(249,245,240,0.82); text-decoration: none; font-size: 0.95rem; transition: color .18s ease; }
.melba-foot-links a:hover { color: var(--color-accent-tint); }
.melba-foot-fine { color: var(--color-muted-on-dark); font-size: 0.78rem; }

#wa-fab { position: fixed !important; right: 24px; bottom: 24px; z-index: 9999; width: auto !important; }
#wa-fab .elementor-button {
  background: #25D366; color: #fff; border-radius: var(--radius-pill);
  box-shadow: 0 10px 30px rgba(0,0,0,.22); padding: 13px 20px; font-weight: 600;
}
#wa-fab .elementor-button:hover { background: #1ebe5a; transform: translateY(-2px); }

/* ==========================================================================
   Home (front page): full-bleed dark hero — brand lockup + two property cards.
   Home has its own minimal (logos-only) Theme Builder header, assigned to the
   front page in Elementor.
   ========================================================================== */
#melba-home-hero {
  min-height: 100vh; min-height: 100dvh;
  background:
    radial-gradient(58% 42% at 50% 30%, rgba(144, 125, 94, 0.16), rgba(144, 125, 94, 0) 62%),
    linear-gradient(160deg, var(--color-surface-dark-2) 0%, var(--color-surface-dark) 100%);
}
#home-brand img { display: block; height: auto; }

/* two cards, centered; wrap to one column on small screens */
#home-cards > .elementor-element { flex: 0 1 340px; max-width: 340px; }
/* Clip at the WIDGET element (like #pranzo-grid items do) — a border-radius on
   the <img> alone was not rendering on the home cards; overflow:hidden on the
   image widget reliably rounds the corners regardless of Elementor's wrappers.
   md (10px) matches the other large framed photos (map + Ana Paula portrait);
   the dense Pranzo gallery keeps the tighter sm radius. Covers the home cards
   AND the sibling cross-link card (both use .melba-card-img). */
.melba-card-img { border-radius: var(--radius-md); overflow: hidden; }
.melba-card-img img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 327 / 290; object-fit: cover;
  border-radius: var(--radius-md);
}
.melba-card-title .elementor-heading-title {
  font-family: var(--font-display); font-weight: 400; text-align: center;
  line-height: 1.08; font-size: clamp(2.2rem, 4vw, 3.25rem);
  color: var(--color-text-on-dark) !important; /* beat the kit's dark heading color on the dark hero */
  margin: 22px 0 20px;
}
.melba-card-cta .elementor-button {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.8125rem; padding: 15px 26px;
}

/* Cross-link band ("También en Melba"): minimal centered card → sibling unit.
   Reuses .melba-card-img + .melba-card-cta; only the title differs (ink, not
   on-dark, because this band sits on a light surface). */
#xlink-card { max-width: 300px; width: 100%; }
.melba-xcard-title .elementor-heading-title {
  font-family: var(--font-display); font-weight: 400; text-align: center;
  line-height: 1.08; font-size: clamp(1.65rem, 2.4vw, 2.1rem);
  color: var(--color-text); margin: 16px 0 14px;
}

/* Home header: intentionally INVISIBLE. It only exists to own the header
   location so the Hello theme's default header (cream "Ana Paula" bar) stays
   suppressed; the dark hero runs full-bleed to the top. See header-home.php. */
#melba-home-header {
  background: transparent !important;
  border: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}
.melba-home-header-noop { display: none; }

/* ==========================================================================
   2 recámaras — editorial layouts (split hero · Relier split · amenity list).
   Note: 2-rec headlines emphasise in UPRIGHT terracotta (.hl) rather than the
   italic <em> used on the 1-recámara pages.
   ========================================================================== */
.melba-display .hl, .melba-display .hl * { color: var(--color-accent); font-style: normal; }

/* --- Hero (split editorial) --------------------------------------------- */
#hero2-row { min-height: 76vh; }
/* keep the meta on ONE line: the rotating #hero2-theme label changes width per
   slide, and with wrap it bumped to a 2nd line → shifted everything below.
   nowrap + non-wrapping items = the label's width change is trailing-only. */
#hero2-meta { flex-wrap: nowrap !important; }
#hero2-meta .melba-eyebrow { white-space: nowrap; }
/* each item is a flex box so the "•" ::before sits INLINE with the label —
   otherwise Elementor's block widget-container bumps the bullet onto its own
   line above the text (the floating-dot misalignment). */
#hero2-meta > .elementor-element { display: flex; align-items: center; }
#hero2-meta > .elementor-element:not(:first-child)::before {
  content: "•"; margin-right: 14px; color: var(--color-text-muted); opacity: .7;
}
#hero2-left .melba-body { max-width: 40ch; }
#hero2-card {
  position: relative; align-self: center;
  aspect-ratio: 1160 / 1924; max-height: 82vh;
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-surface-panel);
}
/* Force the stack: Elementor otherwise leaves these in normal flow, which pushed
   images 2 & 3 below the card (clipped → "empty") and made the card height shift
   per active slide. !important beats Elementor's element positioning. */
.hero2-img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.2s ease; }
.hero2-img.is-active { opacity: 1; z-index: 1; }
.hero2-img .elementor-widget-container { height: 100%; width: 100%; }
.hero2-img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); }
/* crossfade + a slow ambient zoom (Ken Burns) on the active slide so the hero
   feels alive as images come and go. */
.hero2-img.is-active img { animation: hero2Zoom 7s ease-out both; }
@keyframes hero2Zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero2-img { transition: none; }
  .hero2-img.is-active img { animation: none; }
}
.hero2-pill {
  position: absolute; top: 20px; left: 20px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: var(--radius-pill);
  background: rgba(27,21,17,0.5); backdrop-filter: blur(6px);
  color: var(--color-text-on-dark);
  font-family: var(--font-body); font-weight: 600;
  font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.hero2-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-on-dark); }
.hero2-counter {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2;
  color: rgba(249,245,240,0.85); font-family: var(--font-body);
  font-size: 0.72rem; letter-spacing: 0.22em;
}

/* --- Relier (editorial split: gallery mosaic + ficha técnica aside) ------ */
/* grid, not flex: as %-widths + gap this row exceeded 100% and wrapped (same
   fix as #loc-row). Children fill their tracks via width:100%!important. */
#relier-row { display: grid !important; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: start; }
#relier-row > .elementor-element { width: 100% !important; }
#relier-gallery {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 128px; gap: 12px;
}
#relier-gallery > .elementor-element { position: relative; height: 100%; overflow: hidden; border-radius: var(--radius-sm); cursor: zoom-in; }
#relier-gallery > .elementor-element > * { height: 100%; }
#relier-gallery a { display: block; height: 100%; cursor: zoom-in; }
#relier-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
#relier-gallery > .elementor-element:hover img { transform: scale(1.06); }
#relier-gallery > *:nth-child(1) { grid-column: span 6; grid-row: span 2; }
#relier-gallery > *:nth-child(2), #relier-gallery > *:nth-child(3) { grid-column: span 3; grid-row: span 2; }
#relier-gallery > *:nth-child(4), #relier-gallery > *:nth-child(5) { grid-column: span 3; grid-row: span 2; }
#relier-gallery > *:nth-child(6), #relier-gallery > *:nth-child(7), #relier-gallery > *:nth-child(8) { grid-column: span 2; grid-row: span 2; }

#relier-ficha {
  align-self: flex-start;
  border: 1px solid rgba(156,80,62,0.30); border-radius: var(--radius-md);
  padding: 32px 30px 28px; background: #fbf8f3;
}
#ficha-list { border-top: 1px solid var(--color-border); margin-top: 4px; }
#ficha-list > .elementor-element { border-bottom: 1px solid var(--color-border); padding: 13px 0; }
.ficha-key { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: 0.95rem; color: var(--color-text); }
.ficha-ico { color: var(--color-accent); font-size: 20px; }
.ficha-val { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }

/* --- Amenidades (editorial list) --------------------------------------- */
#amen2-list > .elementor-element { border-top: 1px solid var(--color-border); padding: 22px 0; }
#amen2-list > .elementor-element:last-child { border-bottom: 1px solid var(--color-border); }
/* number + icon paired on one line above the title */
.amen2-head { display: flex; align-items: center; gap: 14px; }
.amen2-num { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--color-text-muted); }
.amen2-title { font-family: var(--font-display); font-weight: 400; line-height: 1.1; font-size: clamp(1.5rem, 2.1vw, 1.9rem); color: var(--color-text); }
.amen2-desc { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.5; color: var(--color-text-body); max-width: 46ch; margin: 0; }
.amen2-ico { color: var(--color-text); font-size: 26px; }
.amen2-count { font-family: var(--font-display); font-weight: 400; line-height: 0.9; font-size: clamp(3rem, 5vw, 4.4rem); color: var(--color-accent); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  #pranzo-grid { grid-auto-rows: 120px; }
  #relier-gallery { grid-auto-rows: 108px; }
  #amenity-grid { grid-template-columns: repeat(2, 1fr); }
  #quote-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  /* home: cards go one-per-row (capped) and the brand lockup scales down */
  #home-cards > .elementor-element { flex-basis: 100%; max-width: 420px; }
  #home-brand > .elementor-element:nth-child(1) img { width: 150px !important; } /* GRUPO VAZ */
  #home-brand > .elementor-element:nth-child(2) img { width: 88px !important; }  /* MELBA */

  #pranzo-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  #pranzo-grid > *:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  #pranzo-grid > *:nth-child(1) { grid-column: span 2; }
  #amenity-grid { grid-template-columns: 1fr 1fr; }
  #spec-strip { grid-template-columns: repeat(3, 1fr); }
  #spec-strip > .elementor-element { border-top: 1px solid var(--color-border); }
  #loc-grid { grid-template-columns: 1fr; }

  /* single-column the grid-based two-column rows */
  #loc-row, #quote-row { grid-template-columns: 1fr !important; }

  /* stack the flex-based two-column rows (containers targeted by id) */
  #pranzo-intro, #ap-row, #foot-cols { flex-direction: column !important; }
  #pranzo-intro > .elementor-element,
  #ap-row > .elementor-element,
  #foot-cols > .elementor-element { width: 100% !important; }

  /* 2-recámaras: stack the split rows + reflow the gallery mosaic */
  #hero2-row, #amen2-row { flex-direction: column !important; }
  #relier-row { grid-template-columns: 1fr !important; } /* grid, not flex — stack via columns */
  #hero2-row > .elementor-element,
  #relier-row > .elementor-element,
  #amen2-row > .elementor-element { width: 100% !important; }

  /* hero: less crammed under the fixed header — smaller headline + tighter */
  #hero2 { padding-top: 104px !important; padding-bottom: 64px !important; }
  #hero2-row { min-height: 0; row-gap: 30px; }
  #hero2 .melba-display.is-hero { font-size: clamp(2.3rem, 9vw, 3rem); }
  /* stack the meta vertically on mobile and drop the "•" separators (they only
     read as separators on a single horizontal line). */
  #hero2-meta { flex-direction: column !important; align-items: flex-start; row-gap: 5px; }
  #hero2-meta > .elementor-element::before { display: none !important; }
  #hero2-card { max-height: none; aspect-ratio: 1160 / 1360; margin-top: 4px; }

  #relier-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  #relier-gallery > *:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  #relier-gallery > *:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .amen2-desc { max-width: none; }

  .melba-ap-contact { gap: 18px; }

  /* investment "equation": stack the pills + operators vertically so it reads
     top-to-bottom on a narrow screen */
  .melba-formula { flex-direction: column; align-items: center; gap: 10px; }
  .melba-formula .pill { padding: 10px 18px; font-size: 0.9rem; }
  .melba-formula .op { font-size: 1.6rem; }

  #map-caption { position: static; margin-top: 12px; box-shadow: none; left: auto; right: auto; bottom: auto; }

  /* hero: use the full width with a modest gutter — Elementor's responsive slide
     padding was eating most of the width and squishing the content */
  .melba-hero .swiper-slide-contents { max-width: 100% !important; padding-left: 24px !important; padding-right: 24px !important; margin: 0 !important; }
  .melba-hero .elementor-slide-content { max-width: 100% !important; padding: 0 !important; }
  .melba-hero .hero-sub { max-width: 100%; }

  /* header → one clean row: [MELBA logo | burger].
     - CTA hidden (redundant with the floating WhatsApp button)
     - GRUPO VAZ hidden on mobile (still on desktop header + footer)
     - the nav-menu widget kept to its content width: in burger mode Elementor
       lets it go full-width, which is what was pushing the burger to its own row */
  #melba-header .melba-btn-nav { display: none !important; }
  #melba-logos > .elementor-element:nth-child(2) { display: none !important; }
  /* keep the logo + burger centered on the same line: block-level the logo img
     (kills the inline baseline gap that dropped it below the burger) and center
     the logo widget at every level */
  #melba-logos,
  #melba-logos .elementor-widget-image,
  #melba-logos .elementor-widget-image .elementor-widget-container { display: flex !important; align-items: center !important; }
  #melba-logos img { max-height: 30px !important; width: auto !important; display: block !important; margin: 0 !important; }
  #melba-bar, #melba-bar > .e-con-inner { flex-wrap: nowrap !important; align-items: center !important; }
  #melba-bar .elementor-widget-nav-menu { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; }
  #melba-bar .elementor-nav-menu--main { justify-content: flex-end; }

  /* floating WhatsApp: show ONLY the icon as a clean circle. The previous rule
     hid the whole content wrapper (icon included), leaving a bare green dot. */
  #wa-fab { right: 14px; bottom: 14px; }
  #wa-fab .elementor-button {
    width: 56px; height: 56px; padding: 0 !important; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
  #wa-fab .elementor-button .elementor-button-text { display: none; }
  #wa-fab .elementor-button .elementor-button-icon { margin: 0 !important; }
  #wa-fab .elementor-button-icon i { font-size: 24px; }
}