@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

:root { --bg:#fff; --fg:#2f2f2f; --muted:#666; --line:#e5e6e8; --accent:#8a1c1c; --header-height:72px; }

/* Strict typographic guide for primary headings: use Playfair Display and brand granate */
h1, h2 {
  font-family: 'Playfair Display', serif;
  color: var(--accent) !important; /* enforce granate color across the site */
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0 0 .5em;
}

/* Subtítulos y lemas — Sans-Serif elegante (Montserrat / Inter) en gris #444
   Applied to hero lines, promo blurbs, promo meta, inmo feature texts and generic .lead */
.subtitle,
.lead,
.hero p,
.promo p,
.promo-reference,
.promo-place,
.promo-desc,
.inmo-feature__text,
.promo-feature__label,
.about-header .lead {
  font-family: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  color: #444 !important;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}

/* Make sure hero headings also follow the typographic guide while keeping contrast via text-shadow if needed */
.hero h1, .hero h2 {
  color: #ffffff !important; /* force white for hero headings for contrast over the hero image */
  text-shadow: 0 2px 8px rgba(0,0,0,0.35); /* darker shadow for legibility on bright images */
}

/* Slight global tweak for status badges to make labels a touch larger and more legible.
   This complements the inline page-specific rules and ensures consistent sizing site-wide. */
.badge {
  font-size: 14px;        /* marginally larger than before (was 13px) */
  padding: 7px 12px;      /* slightly roomier */
  min-width: 92px;        /* ensure consistent width for longer labels */
  box-sizing: border-box;
}

/* On narrower viewports keep badges compact but still a bit larger than original for readability */
@media (max-width: 900px) {
  .badge { font-size: 13.5px; padding: 7px 10px; min-width: 78px; }
}
/* Compensate for sticky header when jumping to anchors and enable smooth scrolling */
html { scroll-padding-top: var(--header-height); scroll-behavior: smooth; }
* { box-sizing: border-box; }
/* Use Montserrat for navigation and a modern sans stack for body */
html,body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif; color:var(--fg); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.wrap { max-width:1100px; margin:0 auto; padding:0 20px; }

/* Header visual: white solid with a very subtle shadow */
.site-header {
  position: sticky;
  top: 0;
  /* Glassmorphism: translucent white + backdrop blur for a frosted glass effect */
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  /* Remove heavy shadow; keep a very fine hairline separator for definition */
  box-shadow: none;
  border-bottom: 1px solid rgba(15,20,25,0.04);
  z-index: 9999; /* very high so header always floats above content */
  /* ensure smoothing and compositing for backdrop */
  will-change: backdrop-filter, transform;
}
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; height:var(--header-height); gap:12px; padding:8px 20px; }
.brand { font-weight:800; letter-spacing:.5px; }
.brand img { display:block; height:72px; max-height:72px; transform-origin: left center; transform: scale(1.32); will-change: transform; margin: 0 20px 0 0; } /* logo scaled +15% and given right margin for spacing */

/* When intro animation runs, keep header logo hidden until the animated logo moves into place */
.brand img.intro-hidden { visibility: hidden !important; opacity: 0; pointer-events: none; }

/* Navigation: Montserrat, dark grey by default, granate on hover */
.nav a {
  margin-left:12px;
  text-decoration:none;
  color: #333333; /* darker grey for nav links */
  opacity:0.98;
  font-weight:600;
  padding:8px 10px;
  border-radius:8px;
  display:inline-block;
  min-height:40px;
  line-height:24px;
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:15px;
  transition: color .14s ease, background-color .12s ease, transform .08s ease;
}

/* Hover: change text to brand granate, remove grey background so it feels like a color change */
.nav a:hover {
  color: var(--accent);
  background: transparent;
  transform: translateY(-1px);
}

/* 'Contacto' becomes an outlined granate button (outline style) */
.nav a.cta {
  padding:8px 12px;
  border:1px solid var(--accent);
  border-radius:10px;
  color: var(--accent);
  background: transparent;
  font-weight:700;
  box-shadow: none;
  transition: background-color .12s ease, color .12s ease, transform .08s ease;
}
.nav a.cta:hover {
  background: rgba(138,28,28,0.06);
  color: var(--accent);
}

/* Hamburger toggle: transparent button with three granate lines stacked vertically (25x2px each) */
.mobile-toggle {
  background: transparent !important;
  border: none;
  padding: 8px;
  display: inline-flex !important;
  flex-direction: column;        /* stack lines vertically */
  align-items: center;           /* center them relative to button */
  justify-content: center;
  gap: 6px;                      /* consistent 6px spacing between each line */
  width: 44px;
  height: 44px;
  cursor: pointer;
  visibility: visible !important;
  z-index: 260;
}

/* The three span lines that compose the hamburger — exact size and color per spec */
.mobile-toggle .hamburger-line {
  display: block;
  width: 25px;                   /* required width */
  height: 2px;                   /* required thickness */
  background: #800000;           /* exact granate color required */
  border-radius: 2px;
  box-shadow: none;
}

/* Remove legacy margin-based stacking — gap handles spacing now */

/* Focus/hover accessibility: subtle lift but keep button transparent */
.mobile-toggle:hover,
.mobile-toggle:focus {
  transform: translateY(-1px);
  outline: none;
}

/* Active press state */
.mobile-toggle:active {
  transform: translateY(0);
}

/* Ensure header action group is perfectly centered vertically with the logo on desktop and mobile */
.header-actions {
  display: inline-flex;
  align-items: center;          /* center vertically with brand image */
  justify-content: flex-end;
  gap: 20px;
  margin-top: 0;                /* remove earlier visual patch; flex alignment handles centering */
}

/* Make sure the header wrap aligns items center so logo and actions align on the same baseline */
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; height:var(--header-height); gap:12px; padding:8px 20px; }

/* Inmobiliaria button (kept outside the menu) — used on mobile and desktop */
.mobile-inm {
  display: inline-flex; /* visible on desktop and mobile */
  text-decoration: none;
  color: var(--accent);
  border: 1px solid var(--accent); /* thin 1px granate outline */
  padding: 5px 6px;                 /* slightly smaller to improve contrast with enlarged logo */
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;                  /* reduced for better visual balance on mobile */
  background: transparent;
  align-items: center;
  justify-content: center;
  height: 34px;                     /* slightly reduced height */
  line-height: 1;
  margin-left: 6px;
  margin-right: 8px;
  transition: background .12s ease, transform .08s ease, box-shadow .12s ease;
}
.mobile-inm:hover, .mobile-inm:focus {
  background: rgba(138,28,28,0.04);
  transform: translateY(-1px);
  outline: none;
}

/* Additional helper class to target desktop-specific layout when needed
   and provide an elegant gap between the button and the hamburger icon */
.desktop-inm { display: inline-flex; margin-right: 10px; }

/* Header actions group: aligns Inmobiliaria button and hamburger to the right as a single group */
.header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px; /* ensure ~20px separation between button and hamburger */
}

/* Ensure header uses space-between so logo and action group sit at opposite ends */
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; height:var(--header-height); gap:12px; padding:8px 20px; }

/* Simplified mobile menu panel: full-screen glassmorphism overlay (premium & minimal) */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 10005; /* sits above header and all content */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* inert until opened */
  opacity: 0;
  transition: opacity 280ms ease, backdrop-filter 380ms ease;
  -webkit-tap-highlight-color: transparent;
  /* base background is slightly translucent so underlying content subtly shows through */
  background: rgba(255,255,255,0.56);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
}

/* When opened, make the overlay active and interactive (fade-in) */
.mobile-menu[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

/* Inner panel: center links vertically and keep a comfortable max-width */
.mobile-menu__inner {
  width: 100%;
  max-width: 640px;
  margin: 0 20px;
  padding: 48px 28px;
  display:flex;
  flex-direction:column;
  gap: 18px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: rgba(255,255,255,0.75); /* slightly more opaque inner surface for contrast */
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(6,10,15,0.12);
  transition: transform 320ms cubic-bezier(.2,.9,.25,1);
  transform: translateY(6px);
}

/* When menu opens, nudge inner panel into place */
.mobile-menu[aria-hidden="false"] .mobile-menu__inner { transform: translateY(0); }

/* Menu links: Playfair Display, large granate, centered vertically, minimal decoration */
.mobile-menu__inner .mobile-link {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  color: var(--accent);
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 12px 8px;
  line-height: 1.05;
  letter-spacing: 0.6px;
  font-weight: 700;
  text-align: center;
  width: 100%;
  max-width: 520px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color 160ms ease, transform 120ms ease;
}

/* Slight lift on hover/focus for tactile feel (desktop & touch feedback) */
.mobile-menu__inner .mobile-link:hover,
.mobile-menu__inner .mobile-link:focus {
  transform: translateY(-3px);
  text-decoration: underline;
}

/* Close control: elegant 'X' top-right, visible above overlay content */
.mobile-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: none;
  font-size: 34px;
  line-height: 1;
  color: var(--accent);
  padding: 8px 10px;
  cursor: pointer;
  z-index: 10030;             /* raised so it's always above the hamburger/toggle */
  pointer-events: auto;       /* ensure the X receives direct events rather than the button beneath */
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, transform 120ms ease, opacity 120ms ease;
}

/* Prevent the close button from inheriting mobile-link pressed/active visuals */
.mobile-close:focus,
.mobile-close:active,
.mobile-close:hover {
  background: rgba(138,28,28,0.06);
  transform: none; /* avoid translating so it doesn't resemble a pressed menu item */
  outline: none;
}

/* Hover state for the X: gentle glass tint */
.mobile-close:hover,
.mobile-close:focus {
  background: rgba(138,28,28,0.06);
  transform: translateY(-2px);
  outline: none;
}

/* Ensure the header remains visually above content when overlay is closed.
   When overlay is open, keep header visible underneath the glass but not interactive. */
.site-header { position: sticky; z-index: 9999; }

/* Desktop behavior: keep the overlay centered but not full-screen feeling */
@media (min-width: 901px) {
  .mobile-menu__inner { max-width: 520px; padding: 36px 24px; }
  .mobile-menu__inner .mobile-link { font-size: 22px; }
}

/* Mobile-specific tweaks for maximum vertical centering and comfortable tap targets */
@media (max-width: 900px) {
  .mobile-menu__inner { padding: 34px 20px; gap: 14px; border-radius: 10px; }
  .mobile-menu__inner .mobile-link { font-size: 20px; padding: 14px 6px; }
  .mobile-close { top: calc(var(--header-height) - 8px); right: 12px; font-size: 30px; padding: 6px; }
}

/* Desktop: right-side sliding panel version */
@media (min-width: 901px) {
  .mobile-menu {
    top: 0;
    right: 0;
    left: auto;
    width: 340px;
    height: 100vh;
    padding-top: 80px; /* keep consistent top spacing on panel */
    transform: translateX(100%);
    display: none;
  }
  .mobile-menu[aria-hidden="false"] {
    display: flex;
    transform: translateX(0);
  }
}

/* Mobile: full-screen stacked panel */
@media (max-width: 900px) {
  .mobile-menu {
    inset: 0;
    display: none;
  }
  .mobile-menu[aria-hidden="false"] {
    display: flex;
    transform: none;
  }
}

/* Inner container for menu links (kept). Adjust mobile link styles below for unified button look. */
/* Mobile menu inner: unified solid white panel with safe top padding so the close X is unobstructed.
   Desktop side-panel uses a smaller padding-top while mobile uses a larger offset to keep the 'X' free. */
.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  width: 100%;
  max-width: calc(100% - 40px);
  padding-right: 12px;
  padding-left: 12px;
  padding-bottom: 18px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: visible;
  word-break: break-word;
  background: #ffffff;           /* solid white background for improved readability */
  border-radius: 8px;            /* small rounding to keep the panel feeling elevated and neat */
  box-shadow: 0 6px 18px rgba(6,10,15,0.06); /* subtle lift so panel reads above page */
}

/* Desktop side panel: smaller top padding so items sit closer to the close button but do not overlap */
@media (min-width: 901px) {
  .mobile-menu__inner {
    align-items: flex-start;
    max-width: 300px;
    padding-top: 28px !important;
    gap: 18px;
  }
  .mobile-link { font-size: 20px; }
  .mobile-link.mobile-cta { width:100%; font-size:18px; padding:12px 14px; border-radius:10px; }
}

/* Mobile: larger safe top padding so the 'X' close button remains unobstructed (matches Inmobiliaria look) */
@media (max-width: 900px) {
  .mobile-menu__inner {
    padding-top: 180px !important; /* ample free space above first link for close control */
    align-items: center;
    gap: 14px;
  }
  .mobile-link { font-size: 16px; width: calc(100% - 40px); }
  .mobile-link.mobile-cta { padding: 14px 16px; width: calc(100% - 36px); }
}

/* Desktop side panel: larger typography, left-aligned (keeps visual balance on wider viewports) */
@media (min-width:901px) {
  /* Keep menu items aligned to the top so buttons appear higher on desktop */
  .mobile-menu__inner {
    align-items: flex-start; /* align links to the top of the side panel */
    max-width: 300px;
    /* Adjusted so the first buttons sit closer to the close 'X' but do not overlap it */
    padding-top: 28px !important;
    gap: 18px;
  }
  .mobile-link { font-size: 20px; }
  .mobile-link.mobile-cta { width:100%; font-size:18px; padding:12px 14px; border-radius:10px; }
}

/* Mobile links: unified simple style requested by client
   Typography updated to match Promociones filter buttons (Montserrat 13px, 600) */
.mobile-link {
  display: block;
  width: calc(100% - 40px);
  max-width: 100%;
  text-align: center;
  padding: 12px 16px;
  background: #f5f5f5; /* requested light background for links */
  border-radius: 8px;  /* requested rounded corners */
  color: var(--fg);
  text-decoration: none;
  font-family: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  font-weight: 600;            /* match Promociones filter buttons */
  font-size: 13px;             /* match Promociones filter buttons */
  line-height: 1.2;
  box-sizing: border-box;
  margin: 0 20px 10px 20px; /* 10px vertical spacing between links */
}

/* Make the CTA variant (Contacto) more prominent while matching full-width style */
.mobile-link.mobile-cta {
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 10px 28px rgba(138,28,28,0.18);
  padding: 14px 16px;
  border-radius: 12px;
  width: calc(100% - 36px);
  margin: 8px 18px;
}

/* While the mobile menu is open, keep links visually neutral on focus/active
   to avoid the "pressed / grey" appearance when JS moves focus into the panel */
.mobile-menu[aria-hidden="false"] .mobile-link:focus,
.mobile-menu[aria-hidden="false"] .mobile-link:active {
  background: #f9f9f9 !important;
  color: var(--fg) !important;
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Additionally keep the CTA variant neutral when menu open so it doesn't flash */
.mobile-menu[aria-hidden="false"] .mobile-link.mobile-cta:focus,
.mobile-menu[aria-hidden="false"] .mobile-link.mobile-cta:active {
  background: var(--accent) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: 0 10px 28px rgba(138,28,28,0.18) !important;
  outline: none !important;
}

/* Hover/focus feedback for enhanced button affordance - desktop only */
@media (min-width: 901px) {
  .mobile-link:hover,
  .mobile-link:focus {
    background: #ededed;
    transform: translateY(-2px);
    outline: none;
  }
}

/* Space between links increased for easier tapping */
.mobile-link + .mobile-link { margin-top: 8px; }

/* Primary CTA variant inside the menu (Contacto) kept prominent but unified with token */
.mobile-link.mobile-cta {
  background: var(--accent);
  color: #fff;
  border: 2px solid transparent;
  box-shadow: 0 10px 28px rgba(138,28,28,0.18);
  font-size: 18px;
  padding: 14px 16px;
}

/* Subtle hover/focus feedback for menu buttons: outline -> solid fill for clear affordance */
.mobile-link:hover,
.mobile-link:focus {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(138,28,28,0.14);
  outline: none;
}

/* CTA variant keeps inverted hover (slight darken) */
.mobile-link.mobile-cta:hover,
.mobile-link.mobile-cta:focus {
  filter: brightness(0.92);
  transform: translateY(-2px);
}

/* Close button (top-right) — placed above the panel content for instant access */
.mobile-close {
  position: absolute;
  top: 18px; /* moved slightly down to avoid overlapping the first menu link */
  right: 18px;
  background: transparent;
  border: none;
  font-size: 34px;
  line-height: 1;
  color: var(--accent);
  padding: 6px 10px;
  cursor: pointer;
  z-index: 10001; /* ensure it is clickable above all menu elements */
}

/* Menu side panel style: white curtain, links large, centered, Playfair Display granate */
.mobile-menu[aria-hidden="false"] {
  display: flex;
  transform: translateX(0);
}

/* Menu inner: center items and make links large and elegant */
.mobile-menu__inner {
  display:flex;
  flex-direction:column;
  gap: 14px;
  align-items:center;
  width:100%;
  max-width: calc(100% - 40px);
  transform: translateY(0);
  /* ensure a large safe top offset so the first mobile link is well below the close control */
  padding-top: 250px !important; /* extra top spacing to keep close control unobstructed */
  padding-right: 12px;
  padding-left: 12px;
  padding-bottom: 12px;
  margin: 0 auto;
  box-sizing: border-box;
  background: #ffffff;           /* solid white background so menu links remain readable over page artwork */
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(6,10,15,0.06);
}

/* MOBILE-ONLY: stronger top spacing and uniform button sizing for <=768px */
@media (max-width: 768px) {
  /* Ensure the close X never overlaps menu items by reserving enough top space inside the inner panel.
     This value gives consistent room across pages while remaining responsive. */
  .mobile-menu__inner {
    padding-top: 220px !important; /* uniform safe offset so the X does not cover buttons */
    padding-bottom: 18px;
    gap: 14px;
    align-items: center;
  }

  /* Make all mobile menu buttons identical in height, centered content, same horizontal inset */
  .mobile-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 56px !important;               /* consistent touch target */
    min-width: calc(100% - 40px);
    max-width: calc(100% - 40px);
    padding: 0 16px !important;            /* horizontal padding only, vertical controlled by height */
    font-size: 16px !important;
    line-height: 1;
    border-radius: 10px;
    background: #f9f9f9;
    color: var(--fg);
    border: 1px solid rgba(0,0,0,0.04);
    box-sizing: border-box;
    font-weight: 700;
    text-align: center;
    margin: 0 20px 10px 20px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* CTA keeps same visual prominence but matches the height */
  .mobile-link.mobile-cta {
    height: 56px !important;
    padding: 0 16px !important;
    font-size: 16px !important;
    border-radius: 10px;
    margin: 8px 18px !important;
  }

  /* Keep hover/focus feedback subtle and non-displacing */
  .mobile-link:hover,
  .mobile-link:focus {
    transform: none;
    background: #f2f2f2;
    color: var(--fg);
    box-shadow: none;
    outline: none;
  }
}

/* Mobile links (panel variant): large readable buttons, consistent with site tokens */
.mobile-link {
  display: inline-flex;
  width: 100%;
  text-align: center;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  background: transparent;
  border: 2px solid var(--accent);
  transition: background 180ms ease, color 180ms ease, transform 120ms ease, box-shadow 180ms ease;
  font-family: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  box-sizing: border-box;
}

/* Ensure CTA link in the menu is also styled but remains prominent */
.mobile-link.mobile-cta {
  background: var(--accent);
  color: #fff;
  border: 2px solid transparent;
  padding: 10px 14px;
  font-size: 15px;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(138,28,28,0.18);
}

/* Center links visually when the menu is panel-style on desktop too */
@media (min-width:901px) {
  .mobile-menu__inner { align-items:flex-start; padding-left:28px; }
  /* for the desktop side-panel variant keep links visually centered for the requested look */
  .mobile-menu__inner .mobile-link { text-align:center; width:100%; font-size:22px; }
}

/* Hide the traditional desktop nav and use the hamburger + side panel instead */
.nav { display: none; }

/* Keep header alignment tidy */
.site-header .wrap { align-items: center; gap: 8px; }

/* On small screens, ensure the desktop nav links hidden and mobile-menu occupies full screen */
@media (max-width: 640px) {
  .mobile-menu__inner { gap: 18px; }
  .mobile-link { font-size: 22px; padding: 18px; border-radius: 12px; }
  .mobile-link.mobile-cta { font-size: 20px; padding: 16px; border-radius: 12px; width:100%; }
  .brand img { height: 60px; transform-origin: left center; transform: scale(1.35); will-change: transform; }
}

/* HERO: Ken Burns background + delicate overlay */
.hero {
  position: relative;
  color: #fff;
  padding: 48px 0;
  overflow: hidden; /* contain animated pseudo-element */
}

/* Desktop: keep hero textual content left-aligned for a classic layout.
   Mobile: keep centered for better balance on small viewports. */
.hero .hero-wrap { text-align: left; }
.hero .hero-sub { text-align: left; }

/* Re-center on small screens for mobile view */
@media (max-width: 900px) {
  .hero .hero-wrap { text-align: center; }
  .hero .hero-sub { text-align: center; }
}

/* Background image is provided via a pseudo-element so we can animate transform (smooth GPU-accelerated zoom) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("promo_exterior.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform-origin: center center;
  will-change: transform;
  z-index: 0;
  /* slightly darken the background image and keep the slow zoom */
  filter: brightness(0.78);
  animation: heroKenBurns 20s ease-in-out infinite;
}

/* Subtle dark overlay preserved on top of the image */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Darker overlay to improve legibility while preserving image detail */
  background: linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,.52));
  z-index: 1;
  pointer-events: none;
}

/* Ensure content sits above background + overlay */
.hero .wrap { position: relative; z-index: 2; }

/* Heading entrance: fade in from below with 0.5s delay for an elegant start */
@keyframes heroHeadingIn {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
.hero h1 {
  font-size: clamp(20px, 6vw, 32px);
  margin: 0 0 8px;
  opacity: 0;
  transform: translateY(14px);
  /* entrance: fade + up, start 0.5s after load */
  animation: heroHeadingIn 700ms cubic-bezier(.2,.9,.25,1) 500ms both;
}

/* Small supporting paragraph and CTA fade in from below together 0.5s after load */
.hero p {
  color: rgba(255,255,255,.95);
  margin: 0 0 16px;
  max-width: 720px;
  opacity: 0;
  transform: translateY(10px);
  /* reduced delay to match heading: 0.5s after load for cohesive entrance */
  animation: heroHeadingIn 700ms cubic-bezier(.2,.9,.25,1) 500ms both;
}

/* CTA button in hero: fade-in + slide up (same timing as text: start at 0.5s) */
.hero .btn {
  opacity: 0;
  transform: translateY(12px);
  animation: heroHeadingIn 700ms cubic-bezier(.2,.9,.25,1) 500ms both;
}

/* Ken Burns keyframes: smooth scale in and slight out movement for natural feel */
@keyframes heroKenBurns {
  0%   { transform: scale(1) translateY(0); }
  50%  { transform: scale(1.1) translateY(-1%); }
  100% { transform: scale(1) translateY(0); } /* loop back softly to avoid jumpy snaps */
}

/* Use a gentler, slower Ken Burns cycle (10s) for a premium, almost imperceptible zoom */
.hero::after {
  animation: heroKenBurns 10s ease-in-out infinite;
}
.btn { appearance:none; border:none; background:var(--accent); color:#fff; padding:12px 16px; border-radius:12px; cursor:pointer; transition:transform .08s ease, opacity .2s; text-decoration: none; display:inline-block; font-weight:700; box-shadow: 0 8px 20px rgba(138,28,28,0.12); }
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); opacity:.95; }
.btn.primary { background: var(--accent); color:#fff; border: none; box-shadow: 0 12px 32px rgba(138,28,28,0.22); }
.btn.ghost { background:#fff; color:var(--accent); border:1px solid var(--accent); }

/* info-venta kept as primary CTA but updated to unified style */
.info-venta {
  margin-top: 12px;
  border-radius: 4px;
  padding: 12px 24px;
  font-weight: 600;
  letter-spacing: 1px;
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: 0 10px 28px rgba(138,28,28,0.12);
}

/* Referencia de comercialización (pequeña, discreta) */
.promo-reference {
  margin: 8px 0 0;
  font-size: 12px; /* ligeramente más pequeño para discreción */
  color: #666 !important; /* gris suave solicitado */
  font-family: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  font-style: italic; /* cursiva discreta */
  font-weight: 400;
  line-height: 1.4;
}

/* ------------------ UNIFIED BUTTON SYSTEM (STRICT) ------------------ */
/* Base token for all interactive buttons */
.btn,
.button,
button,
a.btn,
.filter-btn,
.btn.verify,
.btn.experience,
.mobile-inm,
.nav a.cta {
  font-family: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  line-height: 1;
  cursor: pointer;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  border-radius: 4px; /* strict: 4px radius everywhere */
  padding: 10px 14px;
  box-sizing: border-box;
}

/* Primary action buttons: solid granate, white text, no border */
.btn.primary,
.info-venta,
.btn.primary:link,
.btn.primary:visited,
a.btn.primary,
.info-venta {
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: none; /* remove decorative shadows for a cleaner, stricter look */
  transition: background-color 140ms ease, transform 90ms ease, filter 120ms ease;
}

/* Slight darkening on hover for primary buttons */
.btn.primary:hover,
.info-venta:hover {
  background: color-mix(in srgb, var(--accent) 88%, #000 12%); /* subtle darken */
  transform: translateY(-1px);
}

/* Outline / Navigation buttons: transparent background, thin granate border and granate text
   and unified hover to solid granate with white text (smooth 0.3s transition) */
.btn.ghost,
.btn.ver-mas,
.btn.verify,
.btn.experience,
.filter-btn,
a.btn {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, transform 120ms ease;
}

/* Hover / focus: become solid granate with white text for clear CTA feedback */
.btn.ghost:hover,
.btn.ver-mas:hover,
.btn.verify:hover,
.btn.experience:hover,
.filter-btn:hover,
.btn.ghost:focus,
.btn.ver-mas:focus,
.btn.verify:focus,
.btn.experience:focus,
.filter-btn:focus,
a.btn:hover,
a.btn:focus {
  background: var(--accent);
  color: #fff !important;
  border-color: transparent;
  transform: translateY(-1px);
}

/* Ensure the Inmobiliaria header button uses the same hover behaviour */
.mobile-inm,
.mobile-inm:hover,
.mobile-inm:focus {
  transition: background-color 300ms ease, color 300ms ease, transform 120ms ease;
}
.mobile-inm:hover,
.mobile-inm:focus {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
}

/* Enforce text-only buttons: hide any inline svgs placed inside most button elements,
   but allow SVGs inside the gallery/inmobiliaria nav controls so chevrons remain visible. */
.btn svg,
.filter-btn svg,
.btn.verify svg,
.btn.experience svg,
.mobile-inm svg,
.nav a.cta svg,
button:not(.gallery-nav):not(.inmo-nav) svg {
  display: none !important;
}

/* Explicitly allow and style SVG chevrons inside the gallery and inmo nav buttons so arrows are visible */
.gallery-nav svg,
.inmo-nav svg {
  display: block !important;
  width: 28px;
  height: 28px;
  box-sizing: content-box;
  /* ensure the chevron sits centered inside the circular tile */
  vertical-align: middle;
}

/* Make chevron strokes bold, solid brand granate and ensure high contrast over images */
.gallery-nav svg path,
.gallery-nav svg polyline,
.inmo-nav svg path,
.inmo-nav svg polyline {
  stroke: var(--accent);
  stroke-width: 3.2; /* thicker for clear visibility */
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}

/* Ensure svgs inside these nav buttons are not hidden by any generic rules and remain centered in the circle */
.gallery-nav, .inmo-nav { align-items: center; justify-content: center; display: inline-flex; }

/* Ensure mobile-inm follows outline style by default */
.mobile-inm {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 4px;
}

/* Make 'Ver más' explicit outline variant */
.btn.ver-mas { background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 10px 20px; border-radius: 4px; font-weight:600; font-size:14px; letter-spacing:1px; text-transform:uppercase; box-shadow:none; }

/* 'Solicitar estudio personalizado' and other CTAs should use primary tokens */
.btn.solicitar,
.btn.primary.solicitar,
.info-venta { font-weight:600; font-size:14px; text-transform:uppercase; }

/* Ensure contact form submit follows primary tokens */
#contact-submit,
.btn.primary#contact-submit {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Buttons that were previously large: keep responsive sizing but same tokens */
@media (max-width:900px) {
  .btn, .filter-btn, .btn.verify, .btn.experience { padding: 10px 12px; font-size:14px; }
  .mobile-inm { padding: 8px 10px; font-size:13px; }
}

/* Accessibility: focus outline */
.btn:focus, .filter-btn:focus, .btn.verify:focus, .btn.experience:focus, .mobile-inm:focus {
  outline: 3px solid rgba(138,28,28,0.12);
  outline-offset: 2px;
  box-shadow: none;
}

/* Alineado y tamaño en móvil: botón centrado y proporcionado */
@media (max-width: 900px) {
  /* Tighter section spacing for small screens */
  .promo, .ejemplos, .ia, .contacto, .sueno { padding:36px 0; }
  .wrap { padding:0 16px; }
}
@media (max-width: 640px) {
  /* Slightly reduced spacing between hero and promotions for a more compact mobile view */
  .hero { padding:32px 0 22px; background-position: center 30%; }

  /* Slightly tighter top padding for promo sections to bring content closer on mobile */
  .promo, .ejemplos, .ia, .contacto, .sueno { padding:28px 0; }

  /* Reduce the visual weight of the primary CTA on mobile for better balance */
  .promo .info-venta { display:block; margin:10px auto 0; text-align:center; width:calc(100% - 40px); max-width:360px; padding:8px 12px; }

  .promo-reference { text-align:center; }
  .gallery { grid-template-columns:1fr; gap:10px; }
  .gallery figure { border-radius:10px; }
  .facts { gap:8px 8px; }
  h2 { font-size:20px; }
  p { font-size:15px; }
  .site-header .wrap { flex-direction:row; align-items:center; }
  .brand img { height:68px; transform-origin: left center; transform: scale(1.28); will-change: transform; } /* slightly larger on mobile but remains within header constraints */
  /* Ensure anchors are not hidden behind the sticky header on small screens */
  html { scroll-padding-top: calc(var(--header-height) + 8px); }
}

.cta-solicitar { display:block; margin:-8px 0 14px; }

/* Unified section vertical spacing for consistent, balanced rhythm across the site */
:root { --section-vertical: 48px; } /* global vertical padding for main sections (top + bottom) */

/* Apply consistent spacing + subtle divider to main content sections */
.promo, .ejemplos, .ia, .contacto, .sueno,
.about-section, .inmobiliaria-preview, #promociones, #viviendas-medida, #inmobiliaria, #contacto-final {
  padding: var(--section-vertical) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-height) + 8px);
}

/* Reduce the specific gap between 'Promociones' and next section to match global rhythm
   Also set promociones background to match inmobiliaria preview for visual consistency. */
#promociones { padding-bottom: calc(var(--section-vertical) * 0.9); background: #f9f9f9; }
#viviendas-medida { padding-top: calc(var(--section-vertical) * 0.9); }

/* Ensure section titles share identical spacing from their content */
h2 {
  font-size: clamp(22px, 3vw, 32px);
  margin: 0 0 16px; /* unified gap between title and section content */
  line-height: 1.4;

  /* Ensure H2 inherits the strict Playfair style (duplicate for specificity in case other rules target h2) */
  font-family: 'Playfair Display', serif;
  color: var(--accent) !important;
  font-weight: 700;
}
p { margin:0 0 14px; color:var(--fg); }
/* Horizontal scroll gallery: single-row flex with natural scrolling and snap */
.gallery {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin: 14px 0 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 0; /* remove extra bottom gap to avoid visible bar on mobile */
  padding-right: 48px; /* allow a small visible area for the next card on desktop */
}

/* Hide native scrollbar visually while keeping functionality */
.gallery {
  scrollbar-width: none; /* Firefox */
}
.gallery::-webkit-scrollbar { height: 0; width: 0; } /* WebKit */

/* Wrapper to position navigation arrows without covering core content */
.gallery-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* Carousel chevrons: visible chevron-only controls with subtle circular white contrast, larger size and soft shadow for legibility */
.gallery-nav {
  position: absolute;
  top: calc(50% - 6px); /* nudged slightly upward for better alignment */
  transform: translateY(-50%);
  width: 44px;                    /* consistent circular hit area */
  height: 44px;
  border: none;
  padding: 6px;                   /* touch-friendly internal padding */
  display: none;                  /* shown on desktop via media query or by JS */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 120;
  opacity: 0;                      /* hidden by default; JS / hover will set opacity */
  transition: opacity 180ms ease, transform 120ms ease, background-color 160ms ease, box-shadow 160ms ease;
  background: rgba(255,255,255,0.24); /* subtle white circle for contrast (≈24% opacity) */
  box-shadow: 0 6px 18px rgba(6,10,15,0.12); /* soft shadow to lift the control */
  border-radius: 50%;             /* circular contrast tile */
  pointer-events: auto;
  color: var(--accent);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

/* Positioning inside image edges — keep offsets small so chevrons float near edges */
.gallery-nav--left { left: 16px; }
.gallery-nav--right { right: 16px; }

/* Make chevrons larger so they are clearly visible (24–32px as requested) */
.gallery-nav svg { width: 28px; height: 28px; display:block; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.14)); }

/* Chevron stroke: use brand granate, slightly thicker for visibility */
.gallery-nav svg path,
.gallery-nav svg polyline {
  stroke: var(--accent);
  stroke-width: 2.6; /* increased thickness for strong contrast */
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}

/* Visible state: fully opaque circular tile and slight scale for affordance */
.gallery-nav.nav-visible,
.gallery-wrap:hover .gallery-nav,
.gallery-nav:hover,
.gallery-nav:focus {
  opacity: 1;
  transform: translateY(-50%) scale(1.04);
  background: rgba(255,255,255,0.28); /* slightly stronger contrast while hovered/visible */
  box-shadow: 0 8px 22px rgba(6,10,15,0.16);
}

/* Ensure the gallery arrows are enabled and show as floating chevrons on desktop */
@media (min-width: 901px) {
  .gallery-nav { display: inline-flex; }
}

/* Hidden on mobile (touch devices) */
@media (max-width: 900px) {
  .gallery-nav { display: none !important; }
}

/* Hidden on mobile (touch devices) */
@media (max-width: 900px) {
  .gallery-nav { display: none !important; }
}

/* Ensure gallery figures still show two per viewport on desktop (keeps previous calc) */
.gallery figure { flex: 0 0 calc(50% - 8px); }

/* Add focus styles for accessibility */
.gallery-nav:focus { outline: 2px solid rgba(138,28,28,0.16); border-radius: 50%; }

/* Each figure becomes a snap-aligned card; on desktop show exactly 2 per viewport (50% width) */
.gallery figure {
  scroll-snap-align: start;
  flex: 0 0 calc(50% - 8px); /* two items per full-width row with gap compensation */
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  min-height: 160px;
  background: #fafafa;
}

/* Ensure the img keeps the current behavior and sizing inside the new flex layout */
.gallery img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.6s ease; /* smooth, slow zoom on hover */
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: center center;
}

/* Hide native scrollbar visually while preserving scroll functionality */
.gallery::-webkit-scrollbar { height: 0; width: 0; }
.gallery::-webkit-scrollbar-thumb { background: transparent; border-radius: 0; }
.gallery { scrollbar-width: none; scrollbar-color: transparent transparent; }
.gallery figure { margin:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fafafa; }
.gallery img { display:block; width:100%; height:auto; object-fit:contain; }
.gallery figcaption { padding:10px 12px; font-size:14px; color:var(--muted); }

.sueno .facts { margin-bottom: 12px; }
.sueno .btn { display: block; margin-top: 16px; }

.facts { display:flex; flex-wrap:wrap; gap:10px 14px; padding:0; margin:16px 0 0; list-style:none; }
.facts li { border:1px solid var(--line); padding:8px 12px; border-radius:999px; font-size:14px; }

.plans { display:grid; grid-template-columns:1fr; gap:12px; }
.plans .plan-card { border:1px solid var(--line); border-radius:12px; padding:10px; background:#fff; cursor:pointer; }
.plans .plan-card.active { outline:2px solid var(--accent); }
.plans svg { width:100%; height:auto; display:block; }
.note { font-size:13px; color:var(--muted); }

.ejemplos { position:relative; background:url("render_promocion.png") center/cover no-repeat; }
.ejemplos::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)); backdrop-filter: blur(2px); }
.ejemplos .wrap { position:relative; z-index:1; }
.ejemplos h2, .ejemplos p { color:#fff; }
.ejemplos .facts li { color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); }

.ia .ia-ui { display:grid; gap:12px; }
#prompt { width:100%; padding:12px; border:1px solid var(--line); border-radius:10px; resize:vertical; }
.ia-actions { display:flex; gap:8px; align-items:center; }
#lienzo { width:100%; height:auto; border:1px dashed var(--line); border-radius:12px; background:#fff; }

.sueno { position:relative; background:url("240626 PROPUESTA 1 PLANTA CARRANQUE_8 - Foto (5).jpg") center/cover no-repeat; }
.sueno::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)); backdrop-filter: blur(2px); }
.sueno .wrap { position:relative; z-index:1; }
.sueno h2, .sueno p { color:#fff; }
.sueno .facts li { color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); }

.tips { font-size:14px; color:var(--muted); }
.tips summary { cursor:pointer; }

.contacto form .grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

 /* Viviendas a Medida — responsive horizontal carousel on mobile */
.steps-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
  box-sizing: border-box;
}
.step-card {
  min-height: 160px;
  box-sizing: border-box;
}

/* Mobile: horizontal touch carousel with snap + visible peeking cards */
@media (max-width: 640px) {
  .steps-row {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 12px 8px;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;  /* hide IE/Edge scrollbar */
    scrollbar-width: none; /* hide Firefox scrollbar */
  }
  .steps-row::-webkit-scrollbar { display: none; } /* hide WebKit scrollbar */

  .step-card {
    flex: 0 0 calc(80% - 24px); /* show partial next card to hint more content */
    max-width: calc(80% - 24px);
    scroll-snap-align: start;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(18,24,28,0.06);
    margin-left: 8px;
    margin-right: 8px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 140px;
    box-sizing: border-box;
  }

  /* Comfortable extra spacing at ends so cards are not cut abruptly */
  .steps-row .step-card:first-child { margin-left: 14px; }
  .steps-row .step-card:last-child { margin-right: 14px; }

  /* Keep content inside cards readable on small widths */
  .step-card svg { width:40px; height:40px; flex: 0 0 40px; }
  .step-card strong { font-size:15px; line-height:1.1; }
  .step-card p { font-size:13px; color:var(--muted); margin:0; }

  /* Make sure images / svgs and inner content don't overflow */
  .step-card, .step-card * { max-width: 100%; overflow: visible; }

  /* Improve touch targets */
  .step-card { min-width: 220px; }

  /* Visual cue: slight leading/trailing padding so the first and last cards breathe */
  .steps-row { padding-left: 6px; padding-right: 6px; }
}
.contacto label { display:grid; gap:6px; font-size:14px; }
.contacto .full { grid-column:1 / -1; }
input, textarea { padding:10px 12px; border:1px solid var(--line); border-radius:10px; }
.form-actions { display:flex; align-items:center; gap:12px; margin-top:10px; }
#form-status { font-size:14px; color:var(--muted); min-height:20px; }
/* Contact block with icons */
.contacto .contact-info { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.contacto .contact-item { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,0.02); padding:10px 12px; border-radius:10px; border:1px solid var(--line); max-width:520px; }
/* Make email/phone icons a bit smaller for a more compact contact block */
.contact-icon { width:22px; height:22px; color:var(--accent); flex:0 0 22px; }
.contact-item a { color:var(--fg); text-decoration:none; font-weight:700; font-size:15px; }
.contact-item a:hover { text-decoration:underline; color:var(--accent); }
.contact-phones { display:flex; align-items:center; gap:8px; font-weight:700; }
.contact-phones .sep { color:var(--muted); font-weight:500; }
@media (max-width:640px) {
  .contacto .contact-info { gap:8px; }
  .contact-item { width:100%; max-width:calc(100% - 32px); margin:0 auto; padding:12px; }
  .contact-icon { width:20px; height:20px; flex:0 0 20px; }
  .contact-item a { font-size:16px; text-align:left; }
}

.site-footer { border-top:1px solid var(--line); padding:20px 0; }
.site-footer .wrap { display:flex; justify-content:center; align-items:center; gap:16px; font-size:14px; }

/* Mobile: slightly smaller footer link text so the quick-links occupy less vertical space */
@media (max-width: 640px) {
  .site-footer .wrap { gap:12px; font-size:12px; }
  .site-footer .wrap a { font-size:12px; padding:6px 8px; }
}
.site-footer a { color:var(--fg); text-decoration:none; }

/* Mobile-only: show the reordered footer variant and hide the desktop single-line CIF on small screens.
   Desktop remains unchanged; this only affects viewports up to 640px (app/mobile view). */
@media (max-width: 640px) {
  .footer-desktop { display: none !important; }
  .footer-mobile { display: flex !important; }
  /* Keep spacing and typography identical; only line breaks / element order changes. */
  .site-footer .wrap { flex-direction:column; gap:8px; align-items:center; }
}

/* Inmobiliaria preview carousel: horizontal scroll on desktop with arrows, touch-swipe on mobile */
.inmo-wrap { position: relative; }

/* Mobile: make 'Solicitar estudio personalizado' full-width but inset 20px from device edges,
   reduce lateral padding, ensure centered single-line text and slightly tighter letter spacing. */
@media (max-width: 900px) {
  .btn.solicitar.full-mobile {
    display: block;
    width: calc(100% - 40px); /* full width minus 20px margin each side */
    margin: 12px 20px 0;       /* breathing space from device edges */
    padding: 10px 8px;        /* reduced horizontal padding to maximize text space */
    border-radius: 12px;
    text-align: center;
    white-space: nowrap;      /* keep text on a single line if possible */
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.6px;    /* slightly reduced spacing to gain room */
    font-size: 14px;
  }
  /* Ensure any SVG inside the button doesn't affect sizing on mobile */
  .btn.solicitar.full-mobile svg { display: none !important; }
}

/* Inmobiliaria features (values) — desktop inline with thin granate icons; mobile stacked pills */
.inmo-features {
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 12px 0 18px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  color: var(--fg);
  font-size: 13.5px; /* small, unobtrusive */
}
.inmo-feature {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: var(--accent); /* granate text */
  min-height: 28px;
}
.inmo-feature__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--accent);
  stroke: currentColor;
  fill: none;
  opacity: 0.95;
}
.inmo-feature__text {
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
}

/* MOBILE: stack features as compact "píldoras" with very light grey background and granate text */
@media (max-width: 900px) {
  .inmo-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    margin: 12px 0 14px;
  }
  .inmo-feature {
    background: #f6f6f7; /* very light grey */
    padding: 8px 12px;
    border-radius: 999px;
    align-items: center;
    justify-content: center; /* center content inside the pill */
    box-shadow: none;
  }
  .inmo-feature__icon { width: 16px; height: 16px; flex: 0 0 16px; opacity: 0.9; }
  .inmo-feature__text { font-size: 13px; color: var(--accent); font-weight:700; text-align:center; }
}

/* ensure visual rhythm with surrounding content on very small viewports */
@media (max-width: 640px) {
  .inmo-features { margin-bottom: 12px; gap: 8px; }
  .inmo-feature__text { font-size: 13px; }
}

/* the scrolling container */
.inmobiliaria-grid {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.inmobiliaria-grid::-webkit-scrollbar { height: 0; width: 0; }

/* each card keeps existing visual appearance but becomes a fixed-width snap item */
.inmobiliaria-grid .inm-card {
  min-width: 320px;      /* comfortable card width on desktop */
  flex: 0 0 48%;         /* show two cards per row on wide viewports */
  scroll-snap-align: start;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 320px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  overflow: hidden; /* ensure image stays clipped inside the card during zoom */
}

/* keep image sizing consistent */
.inmobiliaria-grid .inm-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 auto;
  transition: transform 0.6s ease; /* smooth, slow zoom on hover */
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: center center;
}

/* action row pinned to bottom like before */
.inmobiliaria-grid .inm-card > div:last-of-type { margin-top: auto; display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* navigation arrows similar to promotions gallery */
/* Inmobiliaria chevrons: visible chevrons with subtle circular white contrast, larger size and soft shadow */
.inmo-nav {
  position: absolute;
  top: calc(50% - 10px); /* moved up a few pixels to sit slightly higher over images */
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  padding: 6px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 120;
  opacity: 0;
  transition: opacity 180ms ease, transform 120ms ease, background-color 160ms ease, box-shadow 160ms ease;
  background: rgba(255,255,255,0.24); /* subtle white circle for contrast */
  box-shadow: 0 6px 18px rgba(6,10,15,0.12);
  border-radius: 50%;
  pointer-events: auto;
  color: var(--accent);
  will-change: opacity, transform;
}

/* Positioning */
.inmo-nav--left { left: 16px; }
.inmo-nav--right { right: 16px; }

/* Larger chevrons for strong visibility */
.inmo-nav svg { width: 28px; height: 28px; display:block; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.14)); }

/* Chevron stroke: brand granate solid and thicker */
.inmo-nav svg path,
.inmo-nav svg polyline {
  stroke: var(--accent);
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}

/* Visible state: circular white tile stronger and slight scale */
.inmo-nav.nav-visible,
.inmo-wrap:hover .inmo-nav,
.inmo-nav:hover,
.inmo-nav:focus {
  opacity: 1;
  transform: translateY(-50%) scale(1.04);
  background: rgba(255,255,255,0.28);
  box-shadow: 0 8px 22px rgba(6,10,15,0.16);
}

/* Appear as floating chevrons on desktop */
@media (min-width: 901px) {
  .inmo-nav { display: inline-flex; }
}

/* Hidden on mobile */
@media (max-width: 900px) {
  .inmo-nav { display: none !important; }
}

/* Hidden on mobile */
@media (max-width: 900px) {
  .inmo-nav { display: none !important; }
}

/* hide arrows if JS sets aria-hidden to true (fallback) */
.inmo-nav[aria-hidden="true"] { display: none !important; }

/* responsive adjustments */
@media (min-width: 901px) {
  /* show two cards visible per viewport (already handled by flex basis); ensure comfortable gutters */
  .inmobiliaria-grid { gap: 16px; padding: 6px 48px; } /* padding so arrows don't overlap essential content */
  .inmobiliaria-grid .inm-card { min-width: 380px; flex: 0 0 calc(50% - 16px); }
}

@media (max-width: 900px) {
  /* MOBILE: make each card 82vw so the next card peeks (18% visible), keep clear spacing and snap behavior */
  .inmobiliaria-grid {
    gap: 16px;                    /* fixed gap between cards */
    padding: 6px 12px;            /* top/bottom + left padding kept */
    padding-right: 20px;          /* ensure last card doesn't stick to edge and next card can enter */
    overflow-x: auto;             /* enable horizontal scrolling on mobile */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; /* ensure snapping remains active */
  }
  .inmobiliaria-grid .inm-card {
    flex: 0 0 82vw;               /* exact width per request */
    min-width: 82vw;              /* enforce visual width */
    margin-left: 0;               /* remove any lateral margins that could increase width */
    margin-right: 0;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(18,24,28,0.06);
    scroll-snap-align: start;     /* ensure each card snaps to the left edge on swipe */
  }
  /* hide desktop nav controls on small screens */
  .inmo-nav { display: none; }
}

/* keep previous rule that limited preview cards on homepage to 3 visually — still apply but now as fallback hiding beyond 6 */
.inmobiliaria-preview .inmobiliaria-grid .inm-card:nth-child(n+7) { display: none; }

/* Unified card layout and typography for Promociones e Inmobiliaria
   - Force consistent left-aligned text
   - Same title font-size & weight
   - Identical internal padding
   - All cards in the same row stretch to equal height so bottom actions align
*/
.gallery figure,
.inmobiliaria-grid .inm-card,
.promo-block,
.property-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;          /* force left alignment of all text inside cards */
  padding: 12px;             /* unified internal padding */
  box-sizing: border-box;
  height: 100%;              /* allow parent to size; will be constrained by container rows */
  min-height: 0;             /* avoid flex overflow issues */
}

/* Ensure the visual content (image) doesn't force different card heights and remains at the top */
.gallery figure,
.gallery figure > img,
.inmobiliaria-grid .inm-card img,
.property-card img,
.promo-block img {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

/* Make the main textual area expand so action row stays at bottom */
.gallery figure > figcaption,
.inmobiliaria-grid .inm-card > h3,
.inmobiliaria-grid .inm-card > p,
.property-card > h3,
.property-card > p,
.promo-block > .promo-meta + .promo-desc,
.promo-block .promo-desc {
  margin: 10px 0 0;
  color: var(--muted);
  flex: 1 1 auto; /* occupy remaining space so cards match heights */
}

/* Standardize property title appearance across cards — use Playfair Display for an elegant, premium look */
.inmobiliaria-grid .inm-card h3,
.property-card h3,
.promo-block .promo-meta .promo-title,
.gallery figure h3 {
  font-family: 'Playfair Display', serif;
  font-size: 15px;            /* slightly smaller than main headings for subtle elegance */
  font-weight: 700;
  margin: 10px 0 6px;
  color: var(--accent);       /* use brand granate for coherence with site headings */
  line-height: 1.15;
  text-align: left;
}

/* Ensure action row (status + button) stays pinned to card bottom and aligns horizontally */
.inmobiliaria-grid .inm-card > div:last-of-type,
.property-card > div,
.promo-block .facts,
.promo-block > .facts,
.gallery figure .fig-actions {
  margin-top: 12px;
  flex: 0 0 auto;
}

/* For the gallery figures: ensure full-card height and content distribution */
.gallery figure {
  scroll-snap-align: start;
  flex: 0 0 calc(50% - 8px);
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fafafa;
  border: 1px solid var(--line);
  padding: 12px;
}

/* Ensure figcaption content is left-aligned inside gallery figures */
.gallery figcaption {
  padding: 8px 0 0;
  font-size: 14px;
  color: var(--muted);
  text-align: left;
  flex: 1 1 auto;
}

/* Hover interaction: subtle premium image zoom for Promotions & Inmobiliaria */
.gallery figure:hover img,
.inmobiliaria-grid .inm-card:hover img {
  transform: scale(1.05);
}

/* Button interaction: subtle glow and lift for 'Ver inmueble' CTA */
.inmobiliaria-grid .inm-card a.btn,
.inmobiliaria-grid .inm-card a.button {
  transition: box-shadow 260ms ease, background-color 260ms ease, transform 180ms ease, color 180ms ease;
  will-change: box-shadow, transform, background-color;
}
.inmobiliaria-grid .inm-card a.btn:hover,
.inmobiliaria-grid .inm-card a.button:hover {
  background: rgba(138,28,28,0.06); /* gentle brand-tinted highlight */
  box-shadow: 0 10px 30px rgba(138,28,28,0.12); /* soft glow */
  transform: translateY(-2px);
  color: var(--accent);
}

/* When using flex rows, ensure the parent can make children equal height:
   - For desktop two-column gallery we keep the container a flex row; each child uses height:100%
   - Add a fallback for older browsers by ensuring a consistent min-height */
.gallery, .inmobiliaria-grid {
  align-items: stretch;
}

/* Desktop: ensure cards visually match height by making the container compute row height.
   Use a helper so two cards appear same height even when text differs. */
@media (min-width: 901px) {
  .gallery figure, .inmobiliaria-grid .inm-card, .property-card, .promo-block {
    min-height: 320px; /* baseline; containers adjust, but this helps avoid tiny cards */
  }
}

/* Mobile: keep unified padding and left alignment but allow vertical stacking */
@media (max-width: 900px) {
  .inmobiliaria-grid .inm-card,
  .gallery figure,
  .property-card,
  .promo-block {
    flex: 0 0 auto;
    height: auto;
    padding: 12px;
  }
}

/* Ver más button: outline secondary per request (keeps centered) */
.btn.ver-mas {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 10px 20px;                             /* slightly tighter, balanced padding without icon */
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-block;
  margin: 0 auto;
  box-shadow: none;
  transition: background-color 140ms ease, border-color 140ms ease, transform 80ms ease;
  font-family: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif; /* explicit button font */
  text-align: center;                             /* ensure centered text */
}

/* Hover: subtle background and border emphasis */
.btn.ver-mas:hover {
  background: rgba(138,28,28,0.06);
  border-width: 1.5px;
  transform: translateY(-2px);
}

/* Nuestra Experiencia — outline, centered and using unified button tokens */
.about-experience-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.btn.experience {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 12px 24px;
  border-radius: 4px;
  font-family: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, transform 80ms ease;
  box-shadow: none;
}
.btn.experience:hover,
.btn.experience:focus {
  background: rgba(138,28,28,0.06);
  border-width: 1.5px;
  transform: translateY(-2px);
  outline: none;
}

/* Ensure proper spacing on small screens */
@media (max-width: 640px) {
  .btn.experience { font-size: 14px; padding: 10px 16px; }
}

/* MOBILE-ONLY: ensure inmobiliaria preview is strictly single column, cards full-width,
   stacked vertically, and no horizontal scrolling on small viewports. Desktop remains unchanged. */
@media (max-width: 640px) {
  .inmobiliaria-preview .inmobiliaria-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    overflow: hidden; /* prevent horizontal scroll */
    width: 100%;
  }
  .inmobiliaria-preview .inmobiliaria-grid .inm-card {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  /* Ensure action row is pinned to the bottom of every card and buttons align consistently */
  .inmobiliaria-preview .inmobiliaria-grid .inm-card > div:last-of-type {
    margin-top: auto;                /* push actions to card bottom */
    display: flex;
    align-items: center;
    justify-content: space-between;  /* badge left, button right */
    gap: 8px;
    width: 100%;
  }

  /* Make all action buttons consistent size and alignment on mobile */
  .inmobiliaria-preview .inmobiliaria-grid .inm-card a.btn {
    min-width: 110px;
    padding: 10px 12px;
    text-align: center;
    flex: 0 0 auto;
  }

  /* Ensure badges don't push content and remain positioned top-right of image area */
  .inmobiliaria-preview .inmobiliaria-grid .inm-card .badge {
    position: absolute;
    top: 10px;
    right: 12px;
    transform: none;
  }

  /* Desktop: nudge inmobiliaria badges slightly lower so they don't overlap navigation arrows */
  @media (min-width: 901px) {
    .inmobiliaria-preview .inmobiliaria-grid .inm-card .badge {
      top: 24px;   /* move badges down on desktop */
      right: 20px; /* small inward nudge to keep clear of arrow area */
    }
  }
}

/* Contacto final: dos columnas, fondo gris suave y estilo minimalista */
.contacto-final { background:#f6f6f7; padding:36px 0; border-top:1px solid var(--line); }
.contacto-final__wrap { display:grid; grid-template-columns:1fr 360px; gap:24px; align-items:start; }
.contacto-final__left { padding:6px 0; }
.contacto-final__right { padding:6px 0; }

.contacto-form input[type="text"],
.contacto-form input[type="email"],
.contacto-form input[type="tel"],
.contacto-form textarea {
  width:100%;
  padding:10px 12px;
  border:1px solid #d7d8da;
  border-radius:10px;
  background: #fff;
  font-size:15px;
  color:var(--fg);
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.contacto-form input:focus,
.contacto-form textarea:focus {
  border-color: rgba(138,28,28,0.28);
  box-shadow: 0 6px 18px rgba(138,28,28,0.06);
}

/* small helper grid for name/email fields */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid-2 label input { display:block; }

/* full width label */
.contacto-form label { display:block; margin-bottom:10px; font-size:14px; color:var(--fg); }
.contacto-form label.full { margin-bottom:8px; }
.contacto-form .form-actions { display:flex; gap:12px; align-items:center; margin-top:8px; }
.contacto-form .btn { padding:10px 14px; border-radius:10px; }

/* contact data list */
.contact-data { display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.contact-row { display:flex; gap:12px; align-items:flex-start; }
.contact-row .icon { width:36px; height:36px; flex:0 0 36px; color:var(--accent); }
.contact-row strong { display:block; font-size:14px; color:var(--fg); }
.contact-row a { color:var(--fg); text-decoration:none; font-weight:700; display:inline-block; margin-top:2px; }
.contact-row .muted { color:var(--muted); font-size:14px; margin-top:2px; }

/* small accessibility helper for labels hidden visually */
.sr { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Responsive: stack columns on narrow screens */
@media (max-width:900px) {
  .contacto-final__wrap { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
}

/* Lightbox */
#lightbox { position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index:10005; pointer-events: auto; }
#lightbox img { max-width:90vw; max-height:90vh; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.35); z-index:10006; }

/* --- Intro animation overlay (premium, fast, non-blocking) --- */
#site-intro {
  position: fixed;
  inset: 0;
  /* Ensure the intro overlay (and especially its logo) sits above the header glassmorphism */
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;       /* allow interactions beneath after animation starts */
  will-change: transform, opacity;
  -webkit-font-smoothing: antialiased;
}

/* background image covers full viewport and will animate to hero area */
.site-intro__bg {
  /* Hidden: only the logo will appear during the intro animation */
  display: none !important;
  position: absolute;
  inset: 0;
  background: transparent;
  will-change: none;
  transition: none;
}

/* centered logo inside the overlay */
.site-intro__logo {
  position: absolute;
  width: clamp(220px, 28vw, 420px); /* make logo larger during the intro */
  max-height: 220px;
  transform-origin: center center;
  /* long smooth transition: 4 seconds */
  transition: transform 4000ms cubic-bezier(.2,.9,.25,1), opacity 600ms ease;
  will-change: transform, opacity;
  /* Put the animated logo above the header so it remains crisp over the glass */
  z-index: 10003;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* final state classes applied by JS: shrink bg to hero and move/scale logo toward header */
.site-intro--to-hero .site-intro__bg {
  /* scale down gently; final transform target is computed in JS but this provides a gentle base */
  transform: scale(0.48) translateY(-6vh);
  opacity: 0.96;
}

/* hide overlay visuals at the end (fade) */
.site-intro--fade .site-intro__bg { opacity: 0; transition: opacity 420ms ease; }
.site-intro--fade .site-intro__logo { opacity: 0; transition: opacity 420ms ease; }

/* ensure overlay is removed visually on reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  #site-intro,
  .site-intro__bg,
  .site-intro__logo { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; display: none !important; }
}

/* Keep z-index ordering safe with header (header z-index is 120) */
@media (min-width: 0) {
  .site-header { z-index: 9999; } /* ensure header stays above all content during animations and scroll */
}

/* ALIGNMENT FIX (PC):
   Force the header's wrap and the right action group to use flex centering so the logo
   and the action buttons share the exact same vertical center; neutralize any stray margins.
   Also includes styles for a desktop inline "expansive" menu that unfolds left-to-right. */
.site-header .wrap {
  display: flex !important;
  align-items: center !important;       /* vertical centering of logo and actions */
  justify-content: space-between !important;
  height: var(--header-height);
  gap: 12px;
  padding: 8px 20px;
}

.header-actions {
  display: inline-flex !important;
  align-items: center !important;       /* ensure the right block's axis matches the logo */
  margin-top: 0 !important;             /* remove any fixed margin that could offset vertical alignment */
  position: relative;                   /* anchor for the expanding menu */
}

/* Desktop inline expanded menu (hidden on mobile) */
.desktop-expanded {
  display: none; /* mobile/default: keep hidden */
  gap: 12px;
  align-items: center;
  transition: opacity 300ms cubic-bezier(.2,.9,.25,1), transform 300ms cubic-bezier(.2,.9,.25,1);
  will-change: opacity, transform;
  opacity: 0;
  transform: translateX(10px) translateY(0);
  position: relative;

  /* Ensure the expanded menu sits inside a white rounded box aligned with the header
     so buttons remain inside the white area and vertically centered. */
  background: #ffffff;
  padding: 6px 10px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(6,10,15,0.06);
  height: calc(var(--header-height) - 18px); /* keep vertically centered within header */
  align-items: center;
  overflow: hidden; /* prevent buttons from spilling out */
  box-sizing: border-box;
}

/* Desktop inline expanded menu: hidden by default and revealed when .expanded is applied (controlled by the hamburger) */
@media (min-width: 901px) {
  .desktop-expanded {
    display: flex;
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
  }

  /* Links inside the desktop container start hidden and shifted; they will animate when the container expands */
  .desktop-expanded .desktop-link {
    opacity: 0;
    transform: translateX(12px);
    transition-delay: 0ms;
    height: 100%;
    line-height: calc(var(--header-height) - 18px);
  }

  /* Visible/expanded state: enable pointer events and show links */
  .desktop-expanded.expanded {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
  .desktop-expanded.expanded .desktop-link {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Each link starts slightly shifted to the right and invisible so we can fade/slide them in */
.desktop-expanded .desktop-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  font-family: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  font-weight: 600;           /* match Promociones filter buttons */
  text-decoration: none;
  font-size: 13px;            /* match Promociones filter buttons */
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 320ms cubic-bezier(.22,.9,.36,1), transform 320ms cubic-bezier(.22,.9,.36,1);
  will-change: opacity, transform;
  margin: 0;                  /* remove extra vertical spacing */
  height: 100%;               /* stretch links to the menu box height for perfect vertical centering */
  line-height: calc(var(--header-height) - 18px);
}

/* Staggered delays so items appear right-to-left (first shown is the closest to Inmobiliaria) */
.desktop-expanded .desktop-link:nth-child(1) { transition-delay: 160ms; }
.desktop-expanded .desktop-link:nth-child(2) { transition-delay: 100ms; }
.desktop-expanded .desktop-link:nth-child(3) { transition-delay: 40ms; }

/* Expanded state: container visible and links slide/fade into place */
.desktop-expanded.expanded {
  display: flex;
  opacity: 1;
  transform: translateX(0);
}
.desktop-expanded.expanded .desktop-link {
  opacity: 1;
  transform: translateX(0);
}

/* CTA variant in desktop expanded */
.desktop-expanded .desktop-link.desktop-cta {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

/* Hover / focus affordances */
.desktop-expanded .desktop-link:hover,
.desktop-expanded .desktop-link:focus {
  background: rgba(138,28,28,0.06);
  color: var(--fg);
  transform: translateY(-2px);
  outline: none;
}

/* On desktop viewports show the inline expanded container; on mobile hide it */
@media (min-width: 901px) {
  .desktop-expanded { display: flex; pointer-events: auto; }
  /* initial collapsed visuals: keep visually hidden until toggled via .expanded */
  .desktop-expanded:not(.expanded) { opacity: 0; transform: translateX(8px); pointer-events:none; }
}

/* Smooth push of the Inmobiliaria button when the desktop menu expands */
.mobile-inm {
  transition: transform 360ms cubic-bezier(.2,.9,.25,1);
}

/* When the inline menu expands JS will set transform on .mobile-inm; ensure vertical centering */
.mobile-inm,
.mobile-inm.desktop-inm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* keep a small gap so the pushed button doesn't collide visually with the hamburger */
.header-actions .desktop-inm { margin-right: 6px; }

/* Ensure brand image baseline stays centered with the action block */
.brand,
.brand img {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  /* On narrower viewports make the horizontal gallery show one item per viewport for comfortable swipe */
  .gallery figure { flex: 0 0 100%; }
  .ejemplos .cards { grid-template-columns:1fr; }
  .contacto form .grid { grid-template-columns:1fr; }
}

@media (max-width: 640px) {
  /* Keep header horizontal on small screens: logo left, hamburger right, centered vertically */
  .site-header .wrap {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    padding: 8px 20px;
    gap: 8px;
  }

  /* Mobile header logo: increase and add right margin so it's visually separated and centered with actions */
  .brand img {
    height: 66px;
    transform-origin: left center;
    transform: scale(1.50);
    will-change: transform;
    margin: 0 28px 0 0; /* generous right margin to prevent overlap with header actions */
  }

  /* Desktop nav stays hidden on mobile (handled at max-width:900px), keep hero spacing */
  .nav { display: none; }

  /* Ensure space around hero remains reasonable */
  .hero { padding: 40px 0 40px; }

  /* Make mobile toggle right-aligned and vertically centered */
  .mobile-toggle {
    display: inline-flex;
    margin: 0;
    align-self: center;
  }

  /* Mobile override: move Inmobiliaria button slightly to the right of the logo and make it a bit smaller */
  .mobile-inm {
    margin-left: 18px;        /* increase gap from logo so it doesn't sit too close */
    margin-right: 8px;        /* keep a small gap before the hamburger */
    padding: 6px 8px;         /* slightly reduced padding for smaller visual footprint */
    font-size: 12px;          /* smaller type on mobile for balance with enlarged logo */
    height: 30px;             /* slightly reduced button height */
    line-height: 1;
    border-radius: 8px;
  }
}

.ejemplos h2, .ejemplos p, .sueno h2, .sueno p { text-shadow: 0 2px 6px rgba(0,0,0,.35); }

/* ABOUT / Sobre nosotros — institutional, elegant */
.about-section { padding: 80px 0; background: #ffffff; border-top:1px solid var(--line); }
.about-wrap { max-width:1100px; margin:0 auto; padding:0 20px; }
.about-grid { display:grid; grid-template-columns: 1fr 420px; gap:34px; align-items:start; }
.about-header h2 { font-family: 'Playfair Display', serif; color: var(--accent); font-weight:700; font-size:34px; margin:0 0 8px; letter-spacing:0.2px; }
.about-header .lead { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif; font-size:16px; color:var(--fg); line-height:1.6; margin:0 0 12px; }
.about-body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif; color:var(--fg); line-height:1.6; font-size:15px; }
.about-grid .about-body p { margin:0 0 14px; max-width:680px; }

/* Responsive: single column on narrow viewports */
@media (max-width:900px) {
  .about-grid { grid-template-columns: 1fr; gap:18px; }
  .about-header h2 { text-align:center; font-size:26px; }
  .about-header .lead { text-align:center; }
  .about-milestones { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
}

/* Milestones block: four minimal granate icons with compact figures */
.about-milestones {
  display:flex;
  gap:18px;
  margin-top:22px;
  justify-content:space-between;
  align-items:stretch;
  flex-wrap:wrap;
}
.milestone {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  flex:1 1 22%;
  min-width:160px;
  text-align:center;
}
.milestone svg { width:36px; height:36px; stroke:#8a1c1c; fill:none; stroke-width:1.4; }
.milestone__text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif; color:var(--fg); }
.milestone__text strong { display:block; font-size:18px; color:var(--accent); font-weight:700; }
.milestone__text span { display:block; font-size:13px; color:var(--muted); margin-top:2px; }

/* Emphasized closing line in elegant italic */
.about-quote {
  margin-top:18px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: var(--accent);
  font-size:22px;
  line-height:1.25;
  text-align:center;
  margin-bottom:0;
}

/* keep some spacing when milestones wrap on small screens */
@media (max-width:640px) {
  .milestone { min-width:120px; flex:1 1 45%; }
}

/* WhatsApp floating button: right lateral, aesthetic, unobtrusive and fixed */
#whatsapp {
  position: fixed;
  right: 28px; /* nudged left for comfortable spacing on desktop */
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(180deg,#25d366,#1da851);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(37,211,102,0.18);
  z-index: 140;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  opacity: 0.75; /* matched to requested translucency for desktop */
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
#whatsapp svg { width:28px; height:28px; display:block; }
#whatsapp:hover { transform: translateY(-50%) scale(1.04); box-shadow: 0 12px 28px rgba(37,211,102,0.22); opacity:1; }
#whatsapp:active { transform: translateY(calc(-50% - 6px)) scale(0.98); } /* subtle upward press like mobile */

/* Keep it out of the way on small screens: move slightly up and reduce size */

/* Desktop adjustment: nudge WhatsApp lower on larger screens so it sits farther down the page */
@media (min-width: 901px) {
  #whatsapp {
    top: 68%;
    transform: translateY(-50%);
  }
}

/* Mobile swipe hint styles (minimalist granate chevron floating on the right, mobile only) */
.mobile-swipe-hint {
  width: 44px;
  height: 44px;
  border-radius: 0; /* no circular tile — only the icon itself */
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; /* icon-only, no background */
  box-shadow: none;
  transform-origin: center;
  opacity: 0;
  transition: opacity 260ms cubic-bezier(.2,.8,.2,1), transform 300ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
  pointer-events: none;
  border: none;
}

/* Visible state: gentle left-to-right slide + delicate fade over 2s */
.mobile-swipe-hint--visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1);
  animation: hintSlide 2000ms ease-in-out 1;
}

/* Smooth slide keyframes with fade-in/out */
@keyframes hintSlide {
  0%   { transform: translateY(-50%) translateX(-8px); opacity: 0; }
  10%  { transform: translateY(-50%) translateX(-4px); opacity: 1; }
  50%  { transform: translateY(-50%) translateX(4px);  opacity: 1; }
  90%  { transform: translateY(-50%) translateX(8px);  opacity: 1; }
  100% { transform: translateY(-50%) translateX(12px); opacity: 0; }
}

/* Ensure inner SVG uses brand granate and a very thin stroke */
.mobile-swipe-hint svg path,
.mobile-swipe-hint svg polyline {
  stroke: var(--accent);
  stroke-width: 1.2;
  fill: none;
}

/* Ensure hint is hidden on desktop to avoid overlay */
@media (min-width: 901px) {
  .mobile-swipe-hint { display: none !important; }
}

/* Force primary appearance for key CTAs: always solid brand granate with white text.
   Keep subtle darken on hover using a slight brightness reduction (≈10%) for tactile feedback.
   These rules target 'VER INMUEBLE', 'VER MÁS', 'SOLICITAR ESTUDIO' and general .btn tokens. */
.btn,
.inmobiliaria-grid .inm-card a.btn,
.btn.ver-mas,
.btn.solicitar.full-mobile,
.info-venta,
.btn.primary,
.btn.experience,
.btn.verify {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(138,28,28,0.12);
  text-decoration: none;
  transition: transform .08s ease, filter 160ms ease, box-shadow 200ms ease;
}

/* Subtle hover darken (10%) via brightness filter so color values remain accessible and consistent */
.btn:hover,
.inmobiliaria-grid .inm-card a.btn:hover,
.btn.ver-mas:hover,
.btn.solicitar.full-mobile:hover,
.info-venta:hover,
.btn.primary:hover,
.btn.experience:hover,
.btn.verify:hover {
  filter: brightness(0.90);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(138,28,28,0.14);
}

/* Keep focus visible but consistent with solid look */
.btn:focus,
.inmobiliaria-grid .inm-card a.btn:focus,
.btn.ver-mas:focus,
.btn.solicitar.full-mobile:focus {
  outline: 3px solid rgba(138,28,28,0.14);
  outline-offset: 2px;
}

/* Scroll reveal helpers: start sections hidden and translate up into place with a slow, elegant transition */
.reveal {
  opacity: 0;
  transform: translateY(30px); /* subtle vertical offset before reveal */
  will-change: opacity, transform;
  transition: opacity 900ms cubic-bezier(.2,.9,.25,1), transform 900ms cubic-bezier(.2,.9,.25,1); /* slow, premium timing (~0.9s) */
  visibility: hidden;
}

/* When element becomes visible */
.reveal.reveal--visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity 900ms cubic-bezier(.2,.9,.25,1), transform 900ms cubic-bezier(.2,.9,.25,1);
}

/* Utility: reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.reveal--visible {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}



@media (max-width: 640px) {
  /* Keep the button bottom-right on mobile with fixed 20px margins from edges */
  #whatsapp {
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    top: auto;
    transform: translateY(0);
    z-index: 160;
    opacity: 0.75;
  }
  #whatsapp svg { width:24px; height:24px; }

  /* Preserve the subtle upward lift on press while keeping original scale behavior */
  #whatsapp:active {
    transform: translateY(-6px) scale(0.98);
  }

  /* If viewport is very short, keep the same 20px bottom margin (no additional offsets) */
  @media (max-height: 600px) {
    #whatsapp { bottom: 20px; }
  }

  /* Hide the footer 'Inicio' link on small screens (mobile-only) */
  .site-footer .wrap a[href$="index.html"],
  .site-footer .wrap a[href="/"],
  .site-footer .wrap a[aria-label="Inicio"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}