/* ============================================================
   CEIBA LANDS — "The Modern Hacienda" Design System
   High-End Editorial Real Estate
   ============================================================ */

/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,300;1,6..72,400;1,6..72,500&family=Manrope:wght@300;400;500;600;700&display=swap');

/* === DESIGN TOKENS === */
:root {
  /* --- Colors: The Earth & The Canopy --- */

  /* Surfaces (Tonal Layering) */
  --surface-container-lowest: #ffffff;
  --surface-container-low: #fdf2e3;
  --surface-container: #f5eadb;
  --surface-container-high: #efe4d4;
  --surface-container-highest: #e9dece;
  --surface: #faf6ee;
  --surface-bright: #fcf8f0;
  --surface-variant: #ebe1d2;
  --background: #fdf8f2;

  /* Primary — Terracotta */
  --primary: #904826;
  --primary-container: #ae5f3b;
  --primary-hover: #7a3c1f;
  --on-primary: #ffffff;
  --on-primary-container: #fdf2e3;

  /* Secondary — Forest Green (The Canopy) */
  --secondary: #3d6b4e;
  --secondary-container: #4a7f5e;
  --on-secondary: #ffffff;
  --on-secondary-container: #e8f5ec;

  /* Tertiary — Limestone Gold */
  --tertiary: #8a7a5a;
  --tertiary-container: #a69474;
  --on-tertiary: #ffffff;

  /* Text */
  --on-background: #1f1b12;
  --on-surface: #1f1b12;
  --on-surface-variant: #54433c;

  /* Outlines */
  --outline: #87736b;
  --outline-variant: #dac1b8;

  /* States */
  --error: #a63d2f;
  --on-error: #ffffff;
  --success: #3d6b4e;
  --warning: #c48a3f;
  --info: #4a6fa5;

  /* --- Typography Scale --- */
  --font-serif: 'Newsreader', 'Georgia', serif;
  --font-sans: 'Manrope', 'Helvetica Neue', sans-serif;

  /* Display */
  --display-lg: 3.5rem;
  --display-md: 2.75rem;
  --display-sm: 2.25rem;

  /* Headline */
  --headline-lg: 2rem;
  --headline-md: 1.75rem;
  --headline-sm: 1.5rem;

  /* Title */
  --title-lg: 1.375rem;
  --title-md: 1.125rem;
  --title-sm: 0.875rem;

  /* Body */
  --body-lg: 1rem;
  --body-md: 0.875rem;
  --body-sm: 0.75rem;

  /* Label */
  --label-lg: 0.875rem;
  --label-md: 0.75rem;
  --label-sm: 0.6875rem;

  /* --- Spacing Scale --- */
  --sp-1: 0.25rem;
  /* 4px */
  --sp-2: 0.5rem;
  /* 8px */
  --sp-3: 0.75rem;
  /* 12px */
  --sp-4: 1rem;
  /* 16px */
  --sp-5: 1.5rem;
  /* 24px */
  --sp-6: 2rem;
  /* 32px */
  --sp-7: 2.5rem;
  /* 40px */
  --sp-8: 3rem;
  /* 48px */
  --sp-9: 3.5rem;
  /* 56px */
  --sp-10: 4rem;
  /* 64px */
  --sp-11: 5rem;
  /* 80px */
  --sp-12: 6rem;
  /* 96px */
  --sp-16: 8rem;
  /* 128px */
  --sp-20: 10rem;
  /* 160px */

  /* --- Roundedness --- */
  --round-none: 0;
  --round-sm: 0.25rem;
  --round-md: 0.375rem;
  --round-lg: 0.5rem;
  --round-xl: 0.75rem;
  --round-2xl: 1rem;

  /* --- Shadows (Ambient only) --- */
  --shadow-ambient: 0 12px 40px rgba(31, 27, 18, 0.06);
  --shadow-soft: 0 4px 20px rgba(31, 27, 18, 0.04);
  --shadow-elevated: 0 20px 60px rgba(31, 27, 18, 0.08);

  /* --- Transitions --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 700ms;
  --duration-reveal: 1000ms;

  /* --- Z-index Scale --- */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* --- Layout --- */
  --max-width: 1400px;
  --nav-height: 5rem;
}

/* === RESET & BASE === */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-container) var(--surface-container-high);
}

html, body {
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

body {
  font-family: var(--font-sans);
  font-size: var(--body-lg);
  line-height: 1.6;
  color: var(--on-background);
  background-color: var(--background);
}

/* Selección de texto — gama terracotta / bosque (el color del texto hereda para contrastar en claros y oscuros) */
::selection {
  background: color-mix(in srgb, var(--primary-container) 44%, var(--secondary) 16%);
  color: inherit;
}

::-moz-selection {
  background: color-mix(in srgb, var(--primary-container) 44%, var(--secondary) 16%);
  color: inherit;
}

/* Barra de desplazamiento — Chromium / Safari */
html::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

html::-webkit-scrollbar-track {
  background: var(--surface-container-high);
  border-radius: 9999px;
}

html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary-container), var(--secondary-container));
  border-radius: 9999px;
  border: 2px solid var(--surface-container-high);
}

html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--primary), var(--secondary));
}

html::-webkit-scrollbar-corner {
  background: var(--surface-container-high);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul,
ol {
  list-style: none;
}

/* === TYPOGRAPHY UTILITIES === */
.font-serif {
  font-family: var(--font-serif);
}

.font-sans {
  font-family: var(--font-sans);
}

/* Text Color Accents */
.text-primary {
  color: var(--primary);
}

.text-green {
  color: var(--secondary);
}

.text-gold {
  color: var(--tertiary);
}

.text-green-bold {
  color: var(--secondary);
  font-weight: 600;
}

.text-primary-bold {
  color: var(--primary);
  font-weight: 600;
}

.text-highlight {
  color: var(--tertiary); /* Limestone Gold color */
  font-weight: 700;
  border-bottom: 2px solid var(--tertiary);
  padding-bottom: 1px;
}
.highlight-box {
  background-color: var(--secondary);
  /* Green highlight */
  color: var(--on-secondary);
  font-weight: 700;
  padding: 0 0.2em;
  border-radius: var(--round-sm);
  box-shadow: var(--shadow-soft);
}

.highlight-box--primary {
  background-color: var(--primary);
  /* Terracotta */
  color: var(--on-primary);
}

.highlight-box--tertiary {
  background-color: var(--tertiary);
  /* Gold */
  color: var(--on-tertiary);
}

.display-lg {
  font-family: var(--font-serif);
  font-size: var(--display-lg);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.display-md {
  font-family: var(--font-serif);
  font-size: var(--display-md);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 400;
}

.display-sm {
  font-family: var(--font-serif);
  font-size: var(--display-sm);
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.headline-lg {
  font-family: var(--font-serif);
  font-size: var(--headline-lg);
  line-height: 1.25;
  font-weight: 500;
}

.headline-md {
  font-family: var(--font-serif);
  font-size: var(--headline-md);
  line-height: 1.3;
  font-weight: 500;
}

.headline-sm {
  font-family: var(--font-serif);
  font-size: var(--headline-sm);
  line-height: 1.3;
  font-weight: 500;
}

.title-lg {
  font-family: var(--font-sans);
  font-size: var(--title-lg);
  line-height: 1.35;
  font-weight: 600;
}

.title-md {
  font-family: var(--font-sans);
  font-size: var(--title-md);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.title-sm {
  font-family: var(--font-sans);
  font-size: var(--title-sm);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.body-lg {
  font-family: var(--font-sans);
  font-size: var(--body-lg);
  line-height: 1.6;
}

.body-md {
  font-family: var(--font-sans);
  font-size: var(--body-md);
  line-height: 1.5;
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--body-sm);
  line-height: 1.45;
}

.label-lg {
  font-family: var(--font-sans);
  font-size: var(--label-lg);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.label-md {
  font-family: var(--font-sans);
  font-size: var(--label-md);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.label-sm {
  font-family: var(--font-sans);
  font-size: var(--label-sm);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* === COLOR UTILITIES === */
.text-primary {
  color: var(--primary);
}

.text-secondary {
  color: var(--on-surface-variant);
}

.text-accent {
  color: var(--secondary);
}

.text-muted {
  color: var(--outline);
}

/* === GLASSMORPHISM === */
.glass {
  background: rgba(250, 246, 238, 0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* === GHOST BORDER === */
.ghost-border {
  box-shadow: inset 0 0 0 1px rgba(218, 193, 184, 0.15);
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-8);
  z-index: var(--z-sticky);
  transition: background var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

@keyframes nav-border-flow {
  0% {
    background-position: 0% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 33%, var(--tertiary) 66%, var(--primary) 100%);
  background-size: 200% auto;
  animation: nav-border-flow 4s linear infinite;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.nav.scrolled::after {
  opacity: 1;
}

.nav.scrolled {
  background: rgba(250, 246, 238, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow-soft);
}

/* Móvil: con menú abierto, quitar blur del nav para que .nav__links (fixed) no quede
   acotado al alto de la barra (backdrop-filter crea bloque de contención). */
@media (max-width: 900px) {
  .nav.nav--menu-open.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
    box-shadow: none;
  }

  .nav.nav--menu-open.scrolled::after {
    opacity: 0;
  }
}

body.nav-menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Debajo de .nav (--z-sticky: 100) para no tapar panel, borde animado ni botones */
@media (max-width: 900px) {
  body.nav-menu-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-sticky) - 1);
    background: rgba(44, 36, 25, 0.55);
    pointer-events: auto;
  }
}

body.nav-menu-open .whatsapp-float,
body.nav-menu-open .back-to-top {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.nav__logo {
  display: flex;
  align-items: center;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  opacity: 0;
  /* Fully hidden when at top */
  pointer-events: none;
  transform: translateY(-10px);
  transition: all var(--duration-normal) var(--ease-out);
}

.nav.scrolled .nav__logo {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav.scrolled .nav__logo {
  color: var(--on-background);
}

.nav__links {
  display: flex;
  gap: var(--sp-7);
  align-items: center;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--label-lg);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  position: relative;
  transition: color var(--duration-fast) var(--ease-out);
}

.nav__link-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  opacity: 0.92;
}

.nav.scrolled .nav__link {
  color: var(--on-surface-variant);
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--primary);
  transition: width var(--duration-normal) var(--ease-out);
}

.nav__link:hover::after {
  width: 100%;
}

.nav__link:hover {
  color: var(--primary);
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-primary);
  font-size: var(--label-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--round-md);
  transition: transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.nav__cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-ambient);
}

/* Desplegable Proyectos */
.nav__dropdown {
  position: relative;
}

.nav__dropdown-toggle {
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.nav__dropdown-caret {
  flex-shrink: 0;
  margin-left: 2px;
  opacity: 0.88;
  transition: transform var(--duration-fast) var(--ease-out);
}

.nav__dropdown.is-open .nav__dropdown-caret {
  transform: rotate(180deg);
}

.nav__dropdown-menu {
  list-style: none;
  margin: 0;
  padding: var(--sp-2) 0;
}

.nav__dropdown-link {
  display: block;
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-sans);
  font-size: var(--label-md);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--on-background);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.nav__dropdown-link:hover,
.nav__dropdown-link:focus-visible {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  outline: none;
}

.nav__dropdown-link--muted {
  font-size: var(--label-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.nav__dropdown-link--muted:hover,
.nav__dropdown-link--muted:focus-visible {
  color: var(--primary);
}

@media (min-width: 901px) {
  .nav__dropdown-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    min-width: min(17.5rem, calc(100vw - 2rem));
    background: rgba(250, 246, 238, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--round-md);
    border: 1px solid rgba(135, 115, 107, 0.16);
    box-shadow: var(--shadow-elevated);
    z-index: calc(var(--z-sticky) + 10);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
      opacity var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out),
      visibility var(--duration-fast) var(--ease-out);
  }

  .nav__dropdown.is-open .nav__dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Mobile menu toggle */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  padding: 4px 0;
}

.nav__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--on-primary);
  border-radius: 2px;
  transition: all var(--duration-fast) var(--ease-out);
}

.nav.scrolled .nav__toggle span {
  background: var(--on-background);
}

/* Mobile nav open state */
@media (max-width: 900px) {
  .nav__links {
    display: flex;
    position: fixed;
    inset: var(--sp-4);
    width: auto;
    min-height: calc(100vh - 2 * var(--sp-4));
    min-height: calc(100dvh - 2 * var(--sp-4));
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    /* Mismo cristal y borde que .hero__content */
    background: rgba(31, 27, 18, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--round-2xl);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: var(--shadow-elevated);
    z-index: var(--z-overlay);
    opacity: 0;
    pointer-events: none;
    overscroll-behavior: contain;
    transition: opacity var(--duration-normal) var(--ease-out);
  }

  .nav__links::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--round-2xl);
    padding: 3px;
    background: conic-gradient(from var(--border-angle),
      transparent 0%,
      transparent 60%,
      rgba(255, 255, 255, 0.5) 80%,
      var(--tertiary) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: bg-spin 4s linear infinite;
    pointer-events: none;
    z-index: 0;
  }

  .nav__links > * {
    position: relative;
    z-index: 1;
  }

  .nav__links.nav__links--open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .nav__toggle {
    display: flex;
    z-index: var(--z-modal);
  }

  /* Hamburguesa animada a X */
  .nav__toggle--active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav__toggle--active span:nth-child(2) {
    opacity: 0;
  }
  .nav__toggle--active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav__links .nav__link {
    font-size: var(--title-lg);
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    gap: var(--sp-3);
  }

  .nav__links .nav__link-icon {
    width: 22px;
    height: 22px;
  }

  .nav__links .nav__cta {
    margin-top: var(--sp-4);
  }

  .nav__dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 22rem;
  }

  .nav__dropdown-toggle {
    justify-content: center;
    width: auto;
  }

  .nav__dropdown-menu {
    position: static;
    display: none;
    width: 100%;
    margin-top: var(--sp-3);
    padding: var(--sp-2) 0;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--round-md);
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    box-shadow: none;
  }

  .nav__dropdown.is-open .nav__dropdown-menu {
    display: block;
  }

  .nav__links .nav__dropdown-link {
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
  }

  .nav__links .nav__dropdown-link--muted {
    color: rgba(255, 255, 255, 0.55);
  }

  .nav__links .nav__dropdown-link:hover,
  .nav__links .nav__dropdown-link:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-container);
  }

  /* Menú abierto + scroll: .scrolled no debe teñir enlaces/toggle (pensados para barra clara). */
  .nav.nav--menu-open.scrolled .nav__links .nav__link,
  .nav.nav--menu-open .nav__links .nav__link {
    color: rgba(255, 255, 255, 0.85);
  }

  .nav.nav--menu-open .nav__links .nav__link:hover {
    color: var(--primary);
  }

  .nav.nav--menu-open .nav__toggle span {
    background: #fff;
  }

  /* Eliminado bloque redundante que causaba problemas de visibilidad */
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-12) var(--sp-8);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(31, 27, 18, 0.7) 0%,
      rgba(31, 27, 18, 0.3) 40%,
      rgba(31, 27, 18, 0.05) 100%);
}

.hero__content {
  position: relative;
  max-width: 900px;
  color: var(--on-primary);
  display: flex;
  flex-direction: column;
  z-index: 2;
  width: 100%;
}

/* Dark glass box around hero content for home page */
@property --border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes bg-spin {
  to {
    --border-angle: 360deg;
  }
}

/* Dark glass box around hero content */
.hero__content {
  position: relative;
  background: rgba(31, 27, 18, 0.35);
  /* Solid glass background */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--round-2xl);
  box-shadow: var(--shadow-elevated);
  /* Permanent faint inner border */
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Glowing animated border */
.hero__content::before {
  content: '';
  position: absolute;
  inset: -1px;
  /* Slightly outside to cover the faint border nicely */
  border-radius: var(--round-2xl);
  padding: 3px;
  /* Border thickness */
  background: conic-gradient(from var(--border-angle),
      transparent 0%,
      transparent 60%,
      rgba(255, 255, 255, 0.5) 80%,
      var(--tertiary) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: bg-spin 4s linear infinite;
  pointer-events: none;
  z-index: 1;
  /* Renders above the background/glass, just like a border */
}

/* Centering hero content for a brand focal point */
.hero:has(.hero__logo-box),
.hero--project {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero:has(.hero__logo-box) .hero__content,
.hero--project .hero__content {
  align-items: center;
}

.hero:has(.hero__logo-box) .hero__subtitle,
.hero--project .hero__subtitle {
  margin-inline: auto;
}

.hero:has(.hero__logo-box) .hero__actions,
.hero--project .hero__actions {
  justify-content: center;
}

/* Brand focal point in Hero (Transparent with shadow) */
.hero__logo-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border-radius: 0;
  margin-bottom: var(--sp-8);
  box-shadow: none;
  /* Shadow moved to image filter */
  transition: transform 0.1s linear, opacity 0.1s linear;
  will-change: transform, opacity;
  border: none;
}

.hero__logo-img-large {
  max-width: 320px;
  /* Slightly larger since it has no container now */
  height: auto;
  max-height: 140px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
  /* Shadow for contrast on images */
}

/* Hero con “Presenta:”, logo contenido y eyebrow esquina (fichas proyecto / landings) */
.hero--presents .hero__logo-box {
  margin-bottom: var(--sp-3);
}

.hero--presents .hero__logo-img-large {
  max-width: min(200px, 44vw);
  max-height: 72px;
}

.hero__presents {
  font-family: var(--font-sans);
  font-size: var(--label-sm);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
  margin: 0 0 var(--sp-4);
}

.hero--presents .hero__eyebrow {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  left: auto;
  margin: 0;
  text-align: right;
  max-width: min(16rem, calc(100% - var(--sp-10)));
  z-index: 3;
}

.hero--presents .hero__title {
  font-size: clamp(2.85rem, 6.8vw, 5rem);
  margin-bottom: var(--sp-5);
}

.hero__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--label-md);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--sp-5);
}

.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-bottom: var(--sp-6);
}

.hero__title em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
}

.hero__subtitle {
  font-size: var(--body-lg);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  max-width: 550px;
  margin-bottom: var(--sp-8);
}

.hero__actions {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
}

.hero__scroll-indicator {
  position: absolute;
  bottom: var(--sp-8);
  right: var(--sp-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--label-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero__scroll-line {
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: 60px;
  background: rgba(255, 255, 255, 0.8);
  animation: scrollLine 2s var(--ease-in-out) infinite;
}

@keyframes scrollLine {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(120px);
  }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--label-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--round-md);
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}

.btn--primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-primary);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-ambient);
}

.btn--secondary {
  background: var(--surface-container-high);
  color: var(--primary);
}

.btn--secondary:hover {
  background: var(--surface-container-highest);
}

.btn--tertiary {
  background: transparent;
  color: var(--on-primary);
  padding: var(--sp-3) var(--sp-1);
  text-decoration: none;
  position: relative;
}

.btn--tertiary::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: var(--sp-1);
  right: var(--sp-1);
  height: 1px;
  background: currentColor;
  transform: scaleX(0.5);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out);
}

.btn--tertiary:hover::after {
  transform: scaleX(1);
}

.btn--dark-tertiary {
  background: transparent;
  color: var(--primary);
  padding: var(--sp-3) var(--sp-1);
  position: relative;
}

.btn--dark-tertiary::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: var(--sp-1);
  right: var(--sp-1);
  height: 1px;
  background: var(--primary);
  transform: scaleX(0.5);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out);
}

.btn--dark-tertiary:hover::after {
  transform: scaleX(1);
}

/* ============================================================
   SECTION LAYOUT
   ============================================================ */
.section {
  padding: var(--sp-12) var(--sp-8);
}

.section--alt {
  background: var(--surface-container-low);
}

.section__container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--label-md);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--sp-4);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section__heading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, var(--display-md));
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--on-background);
  max-width: 700px;
  margin-bottom: var(--sp-5);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section__description {
  font-size: var(--body-lg);
  line-height: 1.7;
  color: var(--on-surface-variant);
  max-width: 550px;
  margin-bottom: var(--sp-8);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   PROPERTY CARDS
   ============================================================ */
.properties-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.property-card {
  background: var(--surface-container-lowest);
  border-radius: var(--round-lg);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out);
}

.property-card:hover {
  transform: translateY(-4px);
}

/* Asymmetric: make the first card span 2 columns and be taller */
.property-card--featured {
  grid-column: span 2;
  grid-row: span 2;
}

.property-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.property-card--featured .property-card__image {
  aspect-ratio: auto;
  height: 100%;
}

.property-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.property-card:hover .property-card__image img {
  transform: scale(1.04);
}

.property-card__status {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  background: var(--surface-container-highest);
  color: var(--on-background);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--round-md);
  font-size: var(--label-md);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.property-card__status--sold {
  background: var(--primary);
  color: var(--on-primary);
}

.property-card__status--available {
  background: var(--secondary);
  color: var(--on-secondary);
}

.property-card__body {
  padding: var(--sp-6);
}

.property-card__location {
  font-size: var(--label-md);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--sp-3);
}

.property-card__title {
  font-family: var(--font-serif);
  font-size: var(--headline-sm);
  line-height: 1.3;
  font-weight: 400;
  color: var(--on-background);
  margin-bottom: var(--sp-4);
}

.property-card__specs {
  display: flex;
  gap: var(--sp-5);
  color: var(--on-surface-variant);
  font-size: var(--body-md);
  margin-bottom: var(--sp-6);
}

.property-card__spec {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.property-card__price {
  font-family: var(--font-serif);
  font-size: var(--headline-md);
  font-weight: 500;
  color: var(--on-background);
}

.property-card__price-unit {
  font-family: var(--font-sans);
  font-size: var(--body-sm);
  color: var(--on-surface-variant);
  font-weight: 400;
  margin-left: var(--sp-1);
}

/* ============================================================
   HERITAGE SPLITTER (Asymmetric Feature)
   ============================================================ */
.heritage {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  min-height: min(72vh, 720px);
  overflow: hidden;
}

@media (min-width: 901px) {
  #ubicacion-ccm.heritage {
    grid-template-columns: 1.65fr 1fr;
  }

  #golf-ccm.heritage {
    grid-template-columns: 1.2fr 1fr;
  }
}

/* Golf CCM — gráfica fotográfica 16:9 (sin lightbox) */
#golf-ccm.heritage .heritage__image {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: min(48vh, 540px);
  background: var(--surface-container);
}

#golf-ccm.heritage .heritage__image img {
  width: 100%;
  height: 100%;
  min-height: min(48vh, 540px);
  object-fit: cover;
  object-position: center;
  padding: 0;
  display: block;
}

/* Golf en móvil: sin recorte horizontal (cover + 16/10 cortaba el texto del arte) */
@media (max-width: 900px) {
  #golf-ccm.heritage {
    overflow: visible;
  }

  #golf-ccm.heritage .heritage__image {
    width: min(94vw, 100%);
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--round-lg);
    aspect-ratio: auto;
    min-height: 0;
  }

  #golf-ccm.heritage .heritage__image img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    object-position: center top;
  }
}

#golf-ccm .golf-ccm-highlights {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-6);
  padding: var(--sp-5);
  background: color-mix(in srgb, var(--surface-container) 65%, transparent);
  border: 1px solid rgba(135, 115, 107, 0.1);
  border-radius: var(--round-lg);
  box-shadow: var(--shadow-soft);
}

#golf-ccm .golf-ccm-highlights__item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  min-width: 0;
}

#golf-ccm .golf-ccm-highlights__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid rgba(135, 115, 107, 0.1);
}

#golf-ccm .golf-ccm-highlights__icon svg {
  display: block;
}

#golf-ccm .golf-ccm-highlights__text {
  margin: 0;
  font-size: var(--body-md);
  line-height: 1.55;
  color: var(--on-surface);
}

@media (min-width: 640px) {
  #golf-ccm .golf-ccm-highlights {
    gap: var(--sp-4);
    padding: var(--sp-6);
  }
}

@keyframes golf-ccm-highlight-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  #golf-ccm .golf-ccm-highlights--animate .golf-ccm-highlights__item {
    opacity: 0;
  }

  .heritage__content.reveal-right.visible .golf-ccm-highlights--animate .golf-ccm-highlights__item {
    animation: golf-ccm-highlight-in 0.52s var(--ease-out) forwards;
  }

  .heritage__content.reveal-right.visible .golf-ccm-highlights--animate .golf-ccm-highlights__item:nth-child(1) {
    animation-delay: 0.14s;
  }

  .heritage__content.reveal-right.visible .golf-ccm-highlights--animate .golf-ccm-highlights__item:nth-child(2) {
    animation-delay: 0.28s;
  }

  .heritage__content.reveal-right.visible .golf-ccm-highlights--animate .golf-ccm-highlights__item:nth-child(3) {
    animation-delay: 0.42s;
  }
}

@media (prefers-reduced-motion: reduce) {
  #golf-ccm .golf-ccm-highlights--animate .golf-ccm-highlights__item {
    opacity: 1 !important;
    animation: none !important;
  }
}

.heritage__image {
  position: relative;
  overflow: hidden;
}

.heritage__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.heritage__image--zoomable {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(64vh, 620px);
  background: linear-gradient(
    165deg,
    var(--surface-container) 0%,
    var(--surface-container-high) 45%,
    var(--surface-variant) 100%
  );
}

.heritage__zoom-hit {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  background: transparent;
  text-align: inherit;
}

.heritage__zoom-hit:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 2px;
}

.heritage__zoom-hit img {
  pointer-events: none;
  display: block;
  width: 100%;
  height: 100%;
  max-height: min(70vh, 720px);
  object-fit: contain;
  object-position: center;
}

.heritage__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--surface-container-low);
  padding: var(--sp-12) var(--sp-10);
  margin-left: calc(-1 * var(--sp-10));
  position: relative;
  z-index: 2;
  border-radius: var(--round-lg) 0 0 var(--round-lg);
}

.heritage__content .section__eyebrow {
  margin-bottom: var(--sp-5);
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.heritage__content .section__heading {
  font-size: clamp(1.75rem, 3.5vw, var(--display-sm));
  margin-bottom: var(--sp-6);
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

.heritage__content .body-lg {
  color: var(--on-surface-variant);
  line-height: 1.8;
  margin-bottom: var(--sp-8);
}

.heritage__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  padding-top: var(--sp-8);
  position: relative;
}

.heritage__stats::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--outline-variant);
  opacity: 0.15;
}

.heritage__stats > div {
  position: relative;
  text-align: center;
  padding: calc(var(--sp-6) + 4px) var(--sp-4) var(--sp-5);
  background: linear-gradient(145deg, rgba(61, 107, 78, 0.09), rgba(253, 248, 242, 0.97));
  border: 1px solid rgba(135, 115, 107, 0.12);
  border-radius: var(--round-lg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.heritage__stats > div::before {
  content: '';
  position: absolute;
  top: var(--sp-3);
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 2px;
  opacity: 0.9;
}

@media (prefers-reduced-motion: no-preference) {
  .heritage__stats > div:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(31, 27, 18, 0.08);
  }
}

.heritage__stat-number {
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 3.2vw, var(--display-sm));
  font-weight: 500;
  line-height: 1.05;
  margin-bottom: var(--sp-2);
  margin-top: var(--sp-1);
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.heritage__stat-number--plain {
  background: none;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  -webkit-background-clip: unset;
  color: var(--secondary);
  font-size: clamp(1.65rem, 3.5vw, 2.1rem);
  line-height: 1.15;
}

.heritage__stat-label {
  font-size: var(--label-md);
  color: var(--on-surface-variant);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ============================================================
   AMENITIES / LIFESTYLE
   ============================================================ */
.amenities__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}

@media (min-width: 1201px) {
  #amenidades-ccm .amenities__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.amenity-card {
  background: var(--surface-container-lowest);
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--round-lg);
  transition: transform var(--duration-normal) var(--ease-out);
}

.amenity-card:hover {
  transform: translateY(-4px);
}

.amenity-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(61, 107, 78, 0.08);
  border-radius: var(--round-md);
  margin-bottom: var(--sp-6);
  font-size: 1.5rem;
  color: var(--secondary);
  transition: background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.amenity-card:hover .amenity-card__icon {
  background: var(--secondary);
  color: var(--on-secondary);
}

.amenity-card__title {
  font-family: var(--font-serif);
  font-size: var(--title-lg);
  font-weight: 500;
  color: var(--on-background);
  margin-bottom: var(--sp-3);
}

.amenity-card__text {
  font-size: var(--body-md);
  color: var(--on-surface-variant);
  line-height: 1.6;
}

/* ============================================================
   LOCATION / MAP SECTION
   ============================================================ */
.location {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  min-height: min(72vh, 720px);
  overflow: hidden;
}

.location__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-12) var(--sp-10);
  background: var(--surface-container-low);
}

.location__map {
  position: relative;
  overflow: hidden;
}

.location__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location__features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

.location__feature {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

.location__feature-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(61, 107, 78, 0.1);
  border-radius: var(--round-md);
  color: var(--secondary);
  font-size: 1.1rem;
}

.location__feature-text h4 {
  font-family: var(--font-sans);
  font-size: var(--title-md);
  font-weight: 600;
  margin-bottom: var(--sp-1);
}

.location__feature-text p {
  font-size: var(--body-md);
  color: var(--on-surface-variant);
}

/* ============================================================
   EDITORIAL QUOTE
   ============================================================ */
.quote-section {
  padding: var(--sp-12) var(--sp-8);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--surface-container-low);
}

.quote__content {
  max-width: 900px;
}

.quote__mark {
  display: block;
  font-family: var(--font-serif);
  font-size: 5rem;
  line-height: 0.5;
  color: var(--secondary);
  opacity: 0.3;
  margin-bottom: var(--sp-5);
}

.quote__text {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.5vw, var(--display-sm));
  line-height: 1.3;
  font-weight: 300;
  font-style: italic;
  color: var(--on-background);
  margin-bottom: var(--sp-8);
}

.quote__author {
  font-size: var(--label-md);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

/* ============================================================
   CONTACT / CTA
   ============================================================ */
.contact {
  background: var(--on-background);
  padding: var(--sp-12) var(--sp-8);
  color: var(--surface-container-low);
}

.contact__container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.contact__heading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, var(--display-md));
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--surface-container-lowest);
  margin-bottom: var(--sp-6);
  text-align: center;
}

.contact .section__eyebrow {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#contacto-ccm .section__eyebrow,
#contacto-ccm .contact__heading {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

#contacto-ccm .contact__description {
  text-align: left;
}

#contacto-ccm .contact__info {
  align-items: flex-start;
}

.contact__description {
  font-size: var(--body-lg);
  line-height: 1.7;
  color: var(--outline-variant);
  margin-bottom: var(--sp-8);
}

.contact__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.contact__info-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--surface-container-high);
  font-size: var(--body-md);
}

.contact__info-item span:first-child {
  font-size: 1.1rem;
}

.contact__info-item--email-col {
  align-items: flex-start;
}

.contact__info-email-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}

.contact__email-btn {
  font: inherit;
  font-size: var(--body-sm);
  font-weight: 600;
  color: var(--primary-container);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact__email-btn:hover {
  color: var(--surface-container-lowest);
}

.footer__mailto-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.form-field {
  position: relative;
}

.form-field input,
.form-field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--body-lg);
  padding: var(--sp-4) var(--sp-4);
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-bottom: 1px solid rgba(135, 115, 107, 0.2);
  color: var(--surface-container-lowest);
  border-radius: 0;
  transition: border-color var(--duration-fast) var(--ease-out);
  outline: none;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--outline);
}

.form-field input:focus,
.form-field textarea:focus {
  border-bottom-color: var(--primary);
  border-bottom-width: 2px;
}

.form-field textarea {
  resize: vertical;
  min-height: 120px;
}

/* ============================================================
   BROCHURE GATE (modal lead magnet)
   ============================================================ */
.contact__brochure-trigger {
  display: inline;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  cursor: pointer;
  text-align: left;
}

.contact__brochure-trigger:hover {
  color: var(--primary-container);
}

.brochure-gate {
  padding: 0;
  border: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: calc(100vw - 2rem);
  width: min(52rem, calc(100vw - 2rem));
  max-height: min(90dvh, calc(100vh - 2rem));
  overflow-y: auto;
  background: transparent;
  z-index: var(--z-toast);
}

.brochure-gate::backdrop {
  background: var(--on-background);
  opacity: 0.55;
}

/* Mismo tratamiento que .hero__content: cristal oscuro + borde cónico animado */
.brochure-gate__panel {
  position: relative;
  box-sizing: border-box;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  border-radius: var(--round-2xl);
  background: rgba(31, 27, 18, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-elevated);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.brochure-gate__panel::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--round-2xl);
  padding: 3px;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0%,
    transparent 60%,
    rgba(255, 255, 255, 0.5) 80%,
    var(--tertiary) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: bg-spin 4s linear infinite;
  pointer-events: none;
  z-index: 1;
}

.brochure-gate__panel > * {
  position: relative;
  z-index: 2;
}

.brochure-gate__layout {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: var(--sp-8);
  align-items: start;
}

.brochure-gate__aside {
  padding-right: var(--sp-6);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 0;
}

.brochure-gate__aside-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--label-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--sp-4);
}

.brochure-gate__aside-headline {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1.25;
  margin-bottom: var(--sp-4);
}

.brochure-gate__aside-lead {
  font-size: var(--body-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: var(--sp-5);
}

.brochure-gate__aside-points {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.brochure-gate__aside-points li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--body-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

.brochure-gate__aside-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-container);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.brochure-gate__aside-trust {
  font-size: var(--label-sm);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.48);
  font-style: italic;
}

.brochure-gate__form-col {
  min-width: 0;
}

.brochure-gate__title--form {
  padding-right: 2.5rem;
  margin-bottom: var(--sp-2);
}

.brochure-gate__lede--form {
  margin-bottom: var(--sp-4);
}

@media (max-width: 900px) {
  .brochure-gate {
    width: min(28rem, calc(100vw - 2rem));
  }

  .brochure-gate__layout {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .brochure-gate__aside {
    padding-right: 0;
    border-right: none;
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .brochure-gate__title--form {
    padding-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brochure-gate__panel::before {
    animation: none;
  }
}

.brochure-gate__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: var(--round-full);
  background: color-mix(in srgb, #fff 10%, transparent);
  color: var(--surface-bright);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.brochure-gate__close:hover {
  background: color-mix(in srgb, #fff 18%, transparent);
}

.brochure-gate__close:focus-visible {
  outline: 2px solid var(--primary-container);
  outline-offset: 2px;
}

.brochure-gate__title {
  font-family: var(--font-serif);
  font-size: var(--title-md);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.96);
  margin-bottom: var(--sp-3);
  padding-right: 2rem;
  line-height: 1.2;
}

.brochure-gate__lede {
  font-size: var(--body-md);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--sp-5);
}

.brochure-gate__error {
  font-size: var(--body-sm);
  color: color-mix(in srgb, #ffb4a8 88%, var(--surface-bright));
  margin-bottom: var(--sp-4);
  line-height: 1.45;
}

.brochure-gate__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.brochure-gate__form .form-field input:not(.iti__tel-input) {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--round-md);
  background: rgba(255, 255, 255, 0.07);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.brochure-gate__form .form-field input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.brochure-gate__form .form-field input:not(.iti__tel-input):focus {
  border-color: color-mix(in srgb, var(--primary-container) 75%, rgba(255, 255, 255, 0.25));
  border-bottom-width: 1px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* intl-tel-input — contacto y modal catálogo (tema oscuro) */
.contact-form .iti,
.brochure-gate__form .iti {
  width: 100%;
  display: block;
}

.contact-form .iti__country-container,
.brochure-gate__form .iti__country-container {
  border-radius: var(--round-md) 0 0 var(--round-md);
}

.contact-form .iti button.iti__selected-country,
.brochure-gate__form .iti button.iti__selected-country {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-right: none;
  border-radius: var(--round-md) 0 0 var(--round-md);
}

.contact-form .iti button.iti__selected-country:hover,
.contact-form .iti button.iti__selected-country:focus,
.brochure-gate__form .iti button.iti__selected-country:hover,
.brochure-gate__form .iti button.iti__selected-country:focus {
  background: rgba(255, 255, 255, 0.1);
}

.contact-form .iti__selected-dial-code,
.brochure-gate__form .iti__selected-dial-code {
  color: rgba(255, 255, 255, 0.92);
}

.contact-form .iti__arrow,
.brochure-gate__form .iti__arrow {
  border-top-color: rgba(255, 255, 255, 0.55);
}

.contact-form .iti input.iti__tel-input,
.brochure-gate__form .iti input.iti__tel-input {
  border-radius: 0 var(--round-md) var(--round-md) 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: none;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.95);
}

.contact-form .iti input.iti__tel-input::placeholder,
.brochure-gate__form .iti input.iti__tel-input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.contact-form .iti input.iti__tel-input:focus,
.brochure-gate__form .iti input.iti__tel-input:focus {
  border-color: color-mix(in srgb, var(--primary-container) 75%, rgba(255, 255, 255, 0.25));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
}

.contact-form .iti__dropdown-content,
.brochure-gate__form .iti__dropdown-content {
  z-index: calc(var(--z-toast) + 75);
  border-radius: var(--round-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-elevated);
  background: color-mix(in srgb, var(--on-background) 96%, var(--surface-container-lowest));
  color: var(--surface-container-lowest);
}

.contact-form .iti__search-input,
.brochure-gate__form .iti__search-input {
  border-radius: var(--round-sm);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: var(--surface-container-lowest);
}

.contact-form .iti__country-name,
.contact-form .iti__dial-code,
.brochure-gate__form .iti__country-name,
.brochure-gate__form .iti__dial-code {
  color: inherit;
}

.contact-form .iti__country.iti__highlight,
.brochure-gate__form .iti__country.iti__highlight {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
}

.brochure-gate__form .form-disclaimer {
  margin-top: calc(var(--sp-2) * -1);
  color: rgba(255, 255, 255, 0.52);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--on-background);
  padding: var(--sp-10) var(--sp-8) var(--sp-6);
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--sp-8);
  right: var(--sp-8);
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.footer__container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__logo {
  font-family: var(--font-serif);
  font-size: var(--title-lg);
  font-weight: 600;
  color: var(--surface-container-lowest);
  letter-spacing: 0.04em;
}

.footer__links {
  display: flex;
  gap: var(--sp-6);
}

.footer__link {
  font-size: var(--body-sm);
  color: var(--outline);
  transition: color var(--duration-fast) var(--ease-out);
}

.footer__link:hover {
  color: var(--surface-container-lowest);
}

.footer__copy {
  font-size: var(--body-sm);
  color: var(--outline);
}

/* ============================================================
   NAV LOGO IMAGE
   ============================================================ */
.nav__logo-img {
  height: 54px;
  width: auto;
  display: block;
}

.nav__cta svg {
  vertical-align: middle;
  margin-right: 4px;
}

/* ============================================================
   PROJECT SHOWCASE CARDS
   ============================================================ */
.projects-showcase {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.project-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface-container-lowest);
  border-radius: var(--round-lg);
  overflow: hidden;
  transition:
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--on-surface) 6%, transparent);
}

/* Sin translateY: en hijos reescalados (miniaturas) el transform del padre emborrona la imagen */
.project-card:hover {
  transform: none;
  box-shadow:
    0 20px 48px color-mix(in srgb, var(--on-surface) 12%, transparent),
    0 1px 0 color-mix(in srgb, var(--on-surface) 6%, transparent);
}

.project-card__image {
  position: relative;
  overflow: hidden;
  min-height: 480px;
}

.project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.project-card:hover .project-card__image img {
  transform: scale(1.04);
}

.project-card__image:has(.media-carousel) img {
  transition: none;
}

.project-card:hover .project-card__image:has(.media-carousel) img {
  transform: none;
}

.project-card__image:has(.media-carousel) {
  position: relative;
}

.project-card__image:has(.media-carousel) .project-card__badges,
.project-card__image:has(.project-card__thumb-grid) .project-card__badges,
.project-card__image:has(.media-carousel--ccm-mobile) .project-card__badges {
  z-index: 4;
}

.project-card__thumb-grid {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr minmax(100px, 1.15fr);
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: color-mix(in srgb, var(--surface-container-low) 88%, var(--on-surface));
}

.project-card__thumb:nth-child(5) {
  grid-column: 1 / -1;
}

.project-card__thumb {
  position: relative;
  min-height: 0;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: var(--round-md);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--surface-container-high);
  transition: box-shadow var(--duration-fast) var(--ease-out);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-surface) 8%, transparent);
}

.project-card__thumb:hover {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tertiary) 45%, transparent),
    0 8px 24px color-mix(in srgb, var(--on-surface) 14%, transparent);
}

.project-card__thumb:focus-visible {
  outline: 2px solid var(--tertiary);
  outline-offset: 2px;
}

.project-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.project-card:hover .project-card__image:has(.project-card__thumb-grid) .project-card__thumb img {
  transform: none;
}

.project-card__thumb:hover img {
  transform: none;
}

@supports (image-rendering: high-quality) {

  .project-card__thumb img {
    image-rendering: high-quality;
  }
}

/* —— Media carousel (index project card, sin dependencias) —— */
.media-carousel--project {
  position: absolute;
  inset: 0;
  min-height: 100%;
}

/* Carrusel solo móvil — index #project-ccm (grid en escritorio) */
.media-carousel--ccm-mobile {
  display: none;
}

@media (max-width: 600px) {
  #project-ccm .project-card__thumb-grid {
    display: none;
  }

  #project-ccm .media-carousel--ccm-mobile {
    display: block;
  }

  .media-carousel--ccm-mobile .media-carousel__arrow {
    display: none;
  }

  #project-ccm .media-carousel--ccm-mobile .media-carousel__track,
  #project-ccm .media-carousel--ccm-mobile .media-carousel__slide {
    min-height: min(72vw, 380px);
  }
}

@media (min-width: 601px) {
  #project-ccm .media-carousel--ccm-mobile {
    display: none !important;
  }
}

/* Video promocional — ficha CCM (tras barra de KPIs) */
#video-ccm .section__description {
  max-width: 640px;
}

/* Menos aire entre video y “Sobre el proyecto”; solo en ficha CCM */
#video-ccm.section {
  padding-bottom: var(--sp-10);
}

#sobre-ccm.section {
  padding-top: var(--sp-10);
}

#sobre-ccm .section__description {
  max-width: 700px;
}

.ccm-promo-video {
  margin-top: var(--sp-8);
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--round-lg);
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-container-low) 88%, var(--on-surface));
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
}

.ccm-promo-video__media {
  display: block;
  width: 100%;
  height: auto;
  accent-color: var(--tertiary-container);
}

/* Controles nativos — tonos marca (terracota / oro caliza); WebKit/Blink */
.ccm-promo-video__media::-webkit-media-controls-enclosure {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--on-background) 78%, transparent),
    transparent
  );
  border-radius: 0 0 var(--round-lg) var(--round-lg);
}

.ccm-promo-video__media::-webkit-media-controls-panel {
  background-color: transparent;
}

.ccm-promo-video__media::-webkit-media-controls-play-button {
  color: var(--tertiary-container);
}

.ccm-promo-video__media::-webkit-media-controls-mute-button,
.ccm-promo-video__media::-webkit-media-controls-fullscreen-button {
  color: var(--on-primary-container);
}

.ccm-promo-video__media::-webkit-media-controls-current-time-display,
.ccm-promo-video__media::-webkit-media-controls-time-remaining-display {
  color: var(--on-primary-container);
  font-family: var(--font-sans);
  font-size: var(--label-md);
}

.ccm-promo-video__media::-webkit-media-controls-timeline {
  background-color: color-mix(in srgb, var(--tertiary) 40%, transparent);
  border-radius: var(--round-sm);
  margin-inline: var(--sp-2);
}

.ccm-promo-video__media::-webkit-media-controls-timeline::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--tertiary-container);
  border-radius: var(--round-full);
}

.ccm-promo-video.ccm-promo-video--embed {
  max-width: none;
  width: 100%;
}

.ccm-promo-video--embed {
  position: relative;
  width: 100%;
  height: clamp(720px, 92svh, min(1200px, 100dvh));
}

/* Móvil: menos alto para dejar margen y poder hacer scroll fuera del iframe */
@media (max-width: 768px) {
  .ccm-promo-video--embed {
    height: clamp(220px, 50svh, 400px);
  }

  #ccmVrEmbedWrap.is-vr-expanded {
    min-height: clamp(220px, 50svh, 400px);
  }
}

.ccm-promo-video--embed .ccm-promo-video__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  display: block;
}

/* Controles fuera de .reveal (evita stacking/clics raros con transform + iframe) */
#recorrido-virtual-ccm #ccmVrEmbedWrap.ccm-vr-embed-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
}

.ccm-vr-embed-player {
  width: 100%;
  position: relative;
  z-index: 1;
}

.ccm-vr-embed-meta {
  position: relative;
  z-index: 10;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: var(--sp-5);
  pointer-events: auto;
  isolation: isolate;
}

.ccm-vr-embed-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.ccm-vr-fullscreen-btn {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

#ccmVrEmbedWrap.is-vr-expanded {
  min-height: clamp(720px, 92svh, min(1200px, 100dvh));
}

/* .reveal usa transform → anula el “viewport” de position:fixed en el hijo */
#ccmVrEmbedWrap.is-vr-expanded .ccm-vr-embed-player.reveal,
#ccmVrEmbedWrap.is-vr-expanded .ccm-vr-embed-player.reveal.visible,
#ccmVrEmbedWrap:fullscreen .ccm-vr-embed-player.reveal,
#ccmVrEmbedWrap:fullscreen .ccm-vr-embed-player.reveal.visible,
#ccmVrEmbedWrap:-webkit-full-screen .ccm-vr-embed-player.reveal,
#ccmVrEmbedWrap:-webkit-full-screen .ccm-vr-embed-player.reveal.visible {
  transform: none !important;
}

/* Fallback sin API fullscreen: host fijo respecto al viewport real */
#ccmVrEmbedWrap.is-vr-expanded:not(:fullscreen):not(:-webkit-full-screen) #ccmVrEmbedHost {
  position: fixed;
  inset: 0;
  z-index: 100050;
  width: 100vw;
  height: 100vh !important;
  max-height: none !important;
  border-radius: 0;
  margin: 0;
}

#ccmVrEmbedWrap.is-vr-expanded:not(:fullscreen):not(:-webkit-full-screen) .ccm-vr-embed-meta {
  position: fixed;
  bottom: var(--sp-5);
  left: 0;
  right: 0;
  z-index: 100051;
  margin-top: 0;
  pointer-events: none;
  align-items: center;
}

/* Pantalla completa nativa: todo el wrap (iframe + botón) */
#ccmVrEmbedWrap:fullscreen,
#ccmVrEmbedWrap:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  margin: 0;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0)
    env(safe-area-inset-left, 0);
  box-sizing: border-box;
  background: var(--surface-container-low);
}

#ccmVrEmbedWrap:fullscreen .ccm-vr-embed-player,
#ccmVrEmbedWrap:-webkit-full-screen .ccm-vr-embed-player {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

#ccmVrEmbedWrap:fullscreen #ccmVrEmbedHost,
#ccmVrEmbedWrap:-webkit-full-screen #ccmVrEmbedHost {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  border-radius: 0;
  margin: 0;
}

#ccmVrEmbedWrap:fullscreen .ccm-vr-embed-meta,
#ccmVrEmbedWrap:-webkit-full-screen .ccm-vr-embed-meta {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  margin-top: var(--sp-3);
  margin-bottom: 0;
  padding-bottom: var(--sp-2);
  pointer-events: auto;
  z-index: 1;
}

#ccmVrEmbedWrap.is-vr-expanded .ccm-embed-fallback {
  display: none;
}

#ccmVrEmbedWrap.is-vr-expanded .ccm-vr-embed-meta .btn {
  pointer-events: auto;
}

.ccm-embed-fallback {
  margin-top: var(--sp-4);
  margin-bottom: 0;
  max-width: min(40rem, 100%);
  text-align: center;
  font-size: var(--body-sm);
  color: color-mix(in srgb, var(--on-surface) 72%, transparent);
}

.ccm-embed-fallback a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Carrusel galería en ficha CCM (mismo patrón que index) */
.ccm-page-carousel {
  position: relative;
  width: 100%;
  min-height: 440px;
  height: clamp(300px, 48vw, 560px);
  border-radius: var(--round-lg);
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-container-low) 88%, var(--on-surface));
}

.media-carousel--ccm-page {
  position: absolute;
  inset: 0;
  min-height: 100%;
}

.media-carousel--ccm-page .media-carousel__track {
  min-height: 100%;
  height: 100%;
}

.media-carousel--ccm-page .media-carousel__slide {
  min-height: 100%;
  height: auto;
}

/* Miniaturas solo escritorio — mosaico irregular (ficha CCM) */
.ccm-page-carousel__thumbs {
  display: none;
}

@media (min-width: 1024px) {
  /* Solo mosaico visible: el carrusel principal queda fuera de flujo (scroll interno sigue en JS) */
  .ccm-page-carousel {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: var(--sp-2);
  }

  .ccm-page-carousel .media-carousel--ccm-page {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
    inset: auto;
    left: 0;
    top: 0;
    min-height: 0;
    border-radius: 0;
  }

  .media-carousel--ccm-page .media-carousel__dots {
    display: none;
  }

  .ccm-page-carousel__thumbs {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 48px;
    gap: var(--sp-2);
    grid-auto-flow: dense;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    padding: var(--sp-3);
    max-height: min(72vh, 880px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    border-radius: var(--round-lg);
    background: color-mix(in srgb, var(--surface-container-high) 82%, var(--on-surface));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
    scrollbar-width: thin;
  }

  .ccm-page-carousel__thumb {
    position: relative;
    display: block;
    padding: 0;
    border: none;
    border-radius: var(--round-md);
    overflow: hidden;
    cursor: pointer;
    background: var(--surface-container-low);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--on-surface) 6%, transparent);
    transition:
      transform 0.2s var(--ease-out),
      box-shadow 0.2s var(--ease-out),
      outline-color 0.15s ease;
  }

  .ccm-page-carousel__thumb:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--on-surface) 12%, transparent);
  }

  .ccm-page-carousel__thumb:focus-visible {
    outline: 2px solid var(--tertiary);
    outline-offset: 2px;
  }

  .ccm-page-carousel__thumb[aria-current='true'] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
    z-index: 1;
  }

  .ccm-page-carousel__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Mosaico: destacados y tamaños mixtos (ciclo de 11 miniaturas) */
  .ccm-page-carousel__thumb:nth-child(11n + 1) {
    grid-column: span 4;
    grid-row: span 2;
  }

  .ccm-page-carousel__thumb:nth-child(11n + 2) {
    grid-column: span 2;
    grid-row: span 1;
  }

  .ccm-page-carousel__thumb:nth-child(11n + 3) {
    grid-column: span 3;
    grid-row: span 2;
  }

  .ccm-page-carousel__thumb:nth-child(11n + 4) {
    grid-column: span 3;
    grid-row: span 1;
  }

  .ccm-page-carousel__thumb:nth-child(11n + 5) {
    grid-column: span 2;
    grid-row: span 1;
  }

  .ccm-page-carousel__thumb:nth-child(11n + 6) {
    grid-column: span 4;
    grid-row: span 1;
  }

  .ccm-page-carousel__thumb:nth-child(11n + 7) {
    grid-column: span 2;
    grid-row: span 2;
  }

  .ccm-page-carousel__thumb:nth-child(11n + 8) {
    grid-column: span 3;
    grid-row: span 1;
  }

  .ccm-page-carousel__thumb:nth-child(11n + 9) {
    grid-column: span 3;
    grid-row: span 2;
  }

  .ccm-page-carousel__thumb:nth-child(11n + 10) {
    grid-column: span 2;
    grid-row: span 1;
  }

  .ccm-page-carousel__thumb:nth-child(11n + 11) {
    grid-column: span 4;
    grid-row: span 1;
  }
}

/* Ficha CCM (y CCP si usa el mismo bloque): móvil/tablet — menos alto, sin rejilla de puntos */
@media (max-width: 1023px) {
  .ccm-page-carousel {
    min-height: 0;
    height: clamp(200px, 34svh, 300px);
  }

  .media-carousel--ccm-page .media-carousel__dots {
    display: none !important;
  }

  .ccm-page-carousel__thumbs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--sp-2);
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--sp-2) 0 var(--sp-3);
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    max-height: none;
    grid-template-columns: unset;
    grid-auto-rows: unset;
    grid-auto-flow: unset;
  }

  .ccm-page-carousel__thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 42px;
    grid-column: unset;
    grid-row: unset;
  }

  .ccm-page-carousel__thumb img {
    min-height: 0;
  }
}

.media-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: var(--round-full);
  background: color-mix(in srgb, var(--surface-container-lowest) 82%, transparent);
  color: var(--on-surface);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--on-surface) 12%, transparent);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.media-carousel__arrow:hover {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.media-carousel__arrow:focus-visible {
  outline: 2px solid var(--tertiary);
  outline-offset: 2px;
}

.media-carousel__arrow--prev {
  left: var(--sp-3);
}

.media-carousel__arrow--next {
  right: var(--sp-3);
}

.media-carousel__viewport {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  outline: none;
}

.media-carousel__viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--tertiary);
}

.media-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.media-carousel__track {
  display: flex;
  height: 100%;
  min-height: 480px;
}

.media-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  min-height: 480px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: color-mix(in srgb, var(--surface-container-low) 92%, var(--on-surface));
}

/* Fotos horizontales: encajan completas (letterbox); en el modal se ve aún más nitido */
.media-carousel__zoom-hit {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
}

.media-carousel__zoom-hit:focus-visible {
  outline: 2px solid var(--tertiary);
  outline-offset: -2px;
}

.media-carousel__zoom-hit img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

.media-carousel__dots {
  position: absolute;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--round-full);
  background: color-mix(in srgb, var(--surface-container-lowest) 75%, transparent);
  backdrop-filter: blur(6px);
}

.media-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--on-surface) 28%, transparent);
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.media-carousel__dot:hover {
  transform: scale(1.15);
  background: color-mix(in srgb, var(--on-surface) 45%, transparent);
}

.media-carousel__dot[aria-current='true'] {
  background: var(--primary);
  transform: scale(1.2);
}

@media (prefers-reduced-motion: reduce) {

  .media-carousel__viewport {
    scroll-behavior: auto;
  }

  .media-carousel__dot {
    transition: none;
  }
}

/* —— Lightbox carrusel proyecto (index) —— */
@keyframes project-carousel-lightbox-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.97;
  }
}

@keyframes project-carousel-lightbox-inner-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(0.75rem);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes project-carousel-lightbox-backdrop-out {
  from {
    opacity: 0.97;
  }

  to {
    opacity: 0;
  }
}

@keyframes project-carousel-lightbox-inner-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.94) translateY(0.5rem);
  }
}

.project-carousel-lightbox {
  padding: 0;
  border: none;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  /* Sin barra propia: el diálogo no debe ser scroll container */
  overflow: hidden;
  /* Capa sobre el backdrop: verde tipo vidrio (como en DevTools) */
  background: rgba(74, 124, 111, 0.4);
}

html:has(.project-carousel-lightbox[open]),
body:has(.project-carousel-lightbox[open]) {
  overflow: hidden;
  overscroll-behavior: none;
}

.project-carousel-lightbox[open]:not(.project-carousel-lightbox--closing)::backdrop {
  background: var(--on-background);
  animation: project-carousel-lightbox-backdrop-in 420ms var(--ease-out) both;
}

.project-carousel-lightbox::backdrop {
  background: var(--on-background);
  opacity: 0.97;
}

.project-carousel-lightbox--closing::backdrop {
  animation: project-carousel-lightbox-backdrop-out 360ms var(--ease-out) both;
}

.project-carousel-lightbox__inner {
  position: relative;
  /* border-box: height incluye padding; content-box desbordaba el viewport (doble scroll) */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(98vw, 1420px);
  max-height: min(100dvh - 8px, 100vh - 8px);
  height: min(100dvh - 8px, 100vh - 8px);
  margin: 4px auto;
  padding: var(--sp-2) var(--sp-3);
  padding-top: 3.25rem;
  border-radius: var(--round-lg);
  background: #2c2419;
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}

.project-carousel-lightbox[open]:not(.project-carousel-lightbox--closing) .project-carousel-lightbox__inner {
  animation: project-carousel-lightbox-inner-in 450ms var(--ease-out) both;
}

.project-carousel-lightbox--closing .project-carousel-lightbox__inner {
  animation: project-carousel-lightbox-inner-out 380ms var(--ease-out) both;
}

.project-carousel-lightbox__viewport-area {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.project-carousel-lightbox__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: var(--round-full);
  background: color-mix(in srgb, #fff 12%, transparent);
  color: var(--surface-bright);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.project-carousel-lightbox__close:hover {
  background: color-mix(in srgb, var(--primary) 75%, transparent);
  color: var(--on-primary);
}

.project-carousel-lightbox__close:focus-visible {
  outline: 2px solid var(--tertiary);
  outline-offset: 2px;
}

.project-carousel-lightbox__footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
}

.project-carousel-lightbox__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--round-md);
  background: #2c2419;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}

.project-carousel-lightbox__arrow {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--tertiary) 35%, transparent);
  border-radius: var(--round-full);
  background: color-mix(in srgb, var(--primary) 88%, #000 12%);
  color: var(--on-primary);
  box-shadow: 0 2px inset color-mix(in srgb, #fff 14%, transparent);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.project-carousel-lightbox__arrow:hover {
  background: var(--primary);
  color: var(--on-primary);
  border-color: color-mix(in srgb, var(--tertiary) 55%, transparent);
}

.project-carousel-lightbox__arrow:focus-visible {
  outline: 2px solid var(--tertiary);
  outline-offset: 2px;
}

.project-carousel-lightbox__arrow:active {
  transform: scale(0.96);
}

.project-carousel-lightbox__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: var(--round-md);
  background: color-mix(in srgb, #000 35%, var(--on-background));
  overflow: hidden;
}

.project-carousel-lightbox__zoom-layer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  transition: transform 0.2s var(--ease-out);
  -webkit-user-select: none;
  user-select: none;
}

.project-carousel-lightbox__stage.is-pinch-dragging .project-carousel-lightbox__zoom-layer {
  transition: none;
}

.project-carousel-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  vertical-align: middle;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  transition: opacity var(--duration-normal) var(--ease-out);
  will-change: opacity;
  -webkit-user-drag: none;
}

/* Vista única al abrir desde botón (mapa): sin barra de carrusel; mismo tamaño/comportamiento que el resto del lightbox */
.project-carousel-lightbox--standalone .project-carousel-lightbox__footer {
  display: none;
}

@media (max-width: 600px) {
  .project-carousel-lightbox__stage {
    touch-action: none;
    overscroll-behavior: contain;
  }
}

.project-carousel-lightbox__caption {
  flex-shrink: 0;
  margin: 0;
  padding-inline: var(--sp-2);
  font-size: var(--body-md);
  color: color-mix(in srgb, var(--surface-container-low) 88%, transparent);
  text-align: center;
  line-height: 1.45;
  max-width: 56ch;
  margin-inline: auto;
  opacity: 1;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.project-carousel-lightbox__dots {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  padding: 0 var(--sp-1);
  margin: 0 auto;
}

.project-carousel-lightbox__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 32%, transparent);
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.project-carousel-lightbox__dot:hover {
  transform: scale(1.12);
  background: color-mix(in srgb, #fff 52%, transparent);
}

.project-carousel-lightbox__dot[aria-current='true'] {
  background: var(--primary-container);
  transform: scale(1.28);
}

@media (max-width: 600px) {
  .media-carousel__arrow {
    width: 2.125rem;
    height: 2.125rem;
  }

  .media-carousel__arrow--prev {
    left: var(--sp-2);
  }

  .media-carousel__arrow--next {
    right: var(--sp-2);
  }

  .project-carousel-lightbox__inner {
    padding: var(--sp-2);
    padding-top: 2.75rem;
  }

  .project-carousel-lightbox__arrow {
    width: 2.25rem;
    height: 2.25rem;
  }

  .project-carousel-lightbox__dot {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .project-carousel-lightbox__img,
  .project-carousel-lightbox__caption {
    transition: none;
  }

  .project-carousel-lightbox__dot {
    transition: none;
  }

  .project-carousel-lightbox[open]:not(.project-carousel-lightbox--closing)::backdrop,
  .project-carousel-lightbox[open]:not(.project-carousel-lightbox--closing) .project-carousel-lightbox__inner,
  .project-carousel-lightbox--closing::backdrop,
  .project-carousel-lightbox--closing .project-carousel-lightbox__inner {
    animation: none !important;
  }
}

/* —— CCM galería + lightbox —— */
.ccm-gallery {
  margin-top: var(--sp-10);
}

.ccm-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-4);
}

.ccm-gallery__trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: var(--round-md);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--surface-container-low);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--on-surface) 12%, transparent);
  transition:
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.ccm-gallery__trigger:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--on-surface) 14%, transparent);
}

.ccm-gallery__trigger:focus-visible {
  outline: 2px solid var(--tertiary);
  outline-offset: 2px;
}

.ccm-gallery__trigger img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  vertical-align: middle;
}

.ccm-lightbox {
  padding: 0;
  border: none;
  max-width: min(96vw, 1200px);
  max-height: 92vh;
  background: transparent;
}

.ccm-lightbox::backdrop {
  background: color-mix(in srgb, var(--surface-container-lowest) 88%, var(--on-surface));
  opacity: 0.92;
}

.ccm-lightbox__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--round-lg);
  background: var(--surface-container-low);
  box-shadow: var(--shadow-elevated);
}

.ccm-lightbox__close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: var(--round-full);
  background: var(--surface-container-highest);
  color: var(--on-surface);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease-out);
}

.ccm-lightbox__close:hover {
  background: var(--primary-container);
}

.ccm-lightbox__close:focus-visible {
  outline: 2px solid var(--tertiary);
  outline-offset: 2px;
}

.ccm-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: min(78vh, 900px);
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: var(--round-md);
  object-fit: contain;
}

.project-card__badge {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  background: var(--primary);
  color: var(--on-primary);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--round-md);
  font-size: var(--label-md);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-card__badge--coastal {
  background: var(--secondary);
  color: var(--on-secondary);
}

.project-card__body {
  padding: var(--sp-10) var(--sp-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.project-card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.project-card__location {
  font-size: var(--label-md);
  font-weight: 600;
  color: var(--primary);
}

.project-card__developer {
  font-size: var(--label-sm);
  color: var(--outline);
  font-style: italic;
}

.project-card__title {
  font-family: var(--font-serif);
  font-size: var(--headline-md);
  font-weight: 400;
  color: var(--on-background);
  margin-bottom: var(--sp-2);
}

.project-card__subtitle {
  font-family: var(--font-serif);
  font-size: var(--title-md);
  color: var(--on-surface-variant);
  font-style: italic;
  margin-bottom: var(--sp-5);
}

.project-card__subtitle em {
  color: var(--secondary);
  font-style: italic;
}

.project-card__price-teaser {
  margin: calc(-1 * var(--sp-4)) 0 var(--sp-4);
  max-width: 36rem;
  color: color-mix(in srgb, var(--on-surface-variant) 92%, transparent);
  line-height: 1.45;
}

.project-card__price-teaser a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.project-card__description {
  font-size: var(--body-md);
  color: var(--on-surface-variant);
  line-height: 1.7;
  margin-bottom: var(--sp-6);
}

.project-card__description .project-card__inline-link {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--body-sm);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
}

.project-card__description .project-card__inline-link:hover {
  color: color-mix(in srgb, var(--primary) 85%, black);
  border-bottom-color: var(--primary);
}

.project-card__highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding: var(--sp-5) 0;
  position: relative;
}

.project-card__highlights::before,
.project-card__highlights::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--outline-variant);
  opacity: 0.12;
}

.project-card__highlights::before {
  top: 0;
}

.project-card__highlights::after {
  bottom: 0;
}

.project-card__highlight {
  text-align: center;
}

.project-card__highlight-number {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--headline-sm);
  color: var(--secondary);
  font-weight: 400;
  margin-bottom: var(--sp-1);
}

.project-card__highlight-label {
  font-size: var(--label-sm);
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.project-card__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}

/* --- Multiple Badges Container --- */
.project-card__badges {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  right: var(--sp-2);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  z-index: 2;
  max-width: calc(100% - var(--sp-4));
}

.project-card__badges .project-card__badge {
  position: static;
  padding: 0.28rem 0.55rem;
  font-size: clamp(0.58rem, 2.35vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  border-radius: var(--round-sm);
}

.project-card__badges .project-card__badge--gold {
  font-size: clamp(0.58rem, 2.35vw, 0.75rem);
  line-height: 1.15;
}

.project-card__badge--gold {
  background: linear-gradient(135deg, #c48a3f, #d4a254, #b8872e);
  color: #fff;
  font-size: var(--label-sm);
  animation: badge-glow 2.5s ease-in-out infinite alternate;
}

@media (max-width: 600px) {
  .project-card__badges .project-card__badge--gold {
    font-size: clamp(0.48rem, 1.85vw, 0.62rem);
    padding: 0.18rem 0.4rem;
    letter-spacing: 0.012em;
  }
}

@media (min-width: 768px) {
  .project-card__badges {
    top: var(--sp-4);
    left: var(--sp-4);
    right: auto;
    max-width: min(100% - 2 * var(--sp-4), 42rem);
    flex-wrap: nowrap;
    gap: var(--sp-2);
  }

  .project-card__badges .project-card__badge {
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--label-sm);
    border-radius: var(--round-md);
  }

  .project-card__badges .project-card__badge--gold {
    font-size: var(--label-sm);
    padding: var(--sp-1) var(--sp-3);
    letter-spacing: 0.02em;
  }
}

@keyframes badge-glow {
  0% { box-shadow: 0 2px 8px rgba(196, 138, 63, 0.2); }
  100% { box-shadow: 0 4px 20px rgba(196, 138, 63, 0.5); }
}

/* --- Enhanced Highlights (Bigger Stats) --- */
.project-card__highlights--enhanced {
  background: linear-gradient(135deg, rgba(61, 107, 78, 0.04), rgba(144, 72, 38, 0.04));
  border-radius: var(--round-lg);
  padding: var(--sp-6) var(--sp-4);
  margin-bottom: var(--sp-6);
}

.project-card__highlights--enhanced::before,
.project-card__highlights--enhanced::after {
  display: none;
}

.project-card__highlights--enhanced .project-card__highlight {
  position: relative;
  padding: var(--sp-2) 0;
}

.project-card__highlights--enhanced .project-card__highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 2px;
  opacity: 0.6;
}

.project-card__highlights--enhanced .project-card__highlight-number {
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: 500;
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: var(--sp-2);
  margin-top: var(--sp-2);
}

.project-card__highlights--enhanced .project-card__highlight-label {
  font-size: var(--label-md);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--on-surface-variant);
}

/* --- Amenity Chips Grid (Icon-based) --- */
.project-card__amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}

.amenity-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(61, 107, 78, 0.05);
  border-radius: var(--round-md);
  transition: all var(--duration-fast) var(--ease-out);
  cursor: default;
}

.amenity-chip:hover {
  background: rgba(61, 107, 78, 0.12);
  transform: translateY(-1px);
}

.amenity-chip__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--secondary), rgba(61, 107, 78, 0.7));
  color: var(--on-secondary);
  border-radius: var(--round-sm);
  transition: transform var(--duration-fast) var(--ease-out);
}

.amenity-chip:hover .amenity-chip__icon {
  transform: scale(1.1);
}

.amenity-chip__icon--coastal {
  background: linear-gradient(135deg, #2e6b8a, #3d8ab0);
}

.amenity-chip--golf {
  background: rgba(61, 107, 78, 0.09);
  box-shadow: inset 0 0 0 1px rgba(61, 107, 78, 0.18);
}

.amenity-chip--golf:hover {
  background: rgba(61, 107, 78, 0.14);
}

.amenity-chip--golf .amenity-chip__icon {
  background: linear-gradient(135deg, #2d4a32, var(--secondary));
}

.amenity-chip span {
  font-size: var(--body-sm);
  font-weight: 500;
  color: var(--on-surface-variant);
  line-height: 1.3;
}

/* Counter-up animation */
@keyframes countPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.project-card__highlight-number.counted,
.stats-bar__number.counted {
  animation: countPulse 0.45s var(--ease-out);
}

.project-card__actions {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  flex-wrap: wrap;
}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-showcase {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  margin-bottom: var(--sp-12);
}

.stat-box {
  background: linear-gradient(135deg, var(--surface-container-lowest), var(--surface-container));
  border: 1px solid rgba(135, 115, 107, 0.1);
  border-radius: var(--round-xl);
  padding: var(--sp-8) var(--sp-6);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.stat-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

.stat-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.stat-box:hover::before {
  opacity: 1;
}

.stat-box__icon {
  width: 48px;
  height: 48px;
  background: rgba(144, 72, 38, 0.08); /* Primary semi-transparent */
  color: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-6);
  transition: transform var(--duration-fast) var(--ease-out);
}

.stat-box:hover .stat-box__icon {
  transform: scale(1.1) rotate(5deg);
  background: var(--primary);
  color: var(--on-primary);
}

.stat-box__icon svg {
  width: 24px;
  height: 24px;
}

.stat-box__value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: var(--sp-2);
  font-family: var(--font-serif);
}

.stat-box__prefix,
.stat-box__suffix {
  font-size: var(--headline-sm);
  color: var(--tertiary);
  font-weight: 500;
}

.stat-box__number {
  font-size: var(--display-sm);
  font-weight: 400;
  line-height: 1;
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-box__label {
  font-size: var(--body-md);
  font-weight: 600;
  line-height: 1.4;
  color: var(--on-surface-variant);
  letter-spacing: 0.02em;
}

/* Barra de KPI en fichas ciudad-central-* (paridad con stat-box / highlights del index) */
.stats-bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding: var(--sp-7) var(--sp-5);
  background: linear-gradient(135deg, rgba(61, 107, 78, 0.07), rgba(144, 72, 38, 0.05));
  border: 1px solid rgba(135, 115, 107, 0.12);
  border-radius: var(--round-xl);
  box-shadow: var(--shadow-soft);
}

.stats-bar__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-2) var(--sp-3);
}

.stats-bar__divider {
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  margin: var(--sp-2) 0;
  background: linear-gradient(
    180deg,
    transparent 8%,
    rgba(135, 115, 107, 0.22) 50%,
    transparent 92%
  );
}

.stats-bar__number {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 2.6vw, 2.55rem);
  font-weight: 500;
  line-height: 1.08;
  margin-bottom: var(--sp-2);
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stats-bar__label {
  font-size: var(--label-md);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  line-height: 1.35;
  max-width: 12rem;
}

.stats-bar--with-icons .stats-bar__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-2);
  border-radius: 50%;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  border: 1px solid rgba(135, 115, 107, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

.stats-bar--with-icons .stats-bar__icon svg {
  display: block;
}

.stats-bar__number--compact {
  font-size: clamp(1.4rem, 2.3vw, 2.05rem);
  letter-spacing: 0.02em;
}

.stats-bar.stats-bar--stagger.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.stats-bar.stats-bar--stagger.reveal:not(.visible) .stats-bar__item,
.stats-bar.stats-bar--stagger.reveal:not(.visible) .stats-bar__divider {
  opacity: 0;
  transform: translateY(20px);
}

.stats-bar.stats-bar--stagger.reveal.visible .stats-bar__item,
.stats-bar.stats-bar--stagger.reveal.visible .stats-bar__divider {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.52s var(--ease-out);
}

.stats-bar.stats-bar--stagger.reveal.visible .stats-bar__item:nth-child(1) {
  transition-delay: 0.04s;
}

.stats-bar.stats-bar--stagger.reveal.visible .stats-bar__divider:nth-child(2) {
  transition-delay: 0.09s;
}

.stats-bar.stats-bar--stagger.reveal.visible .stats-bar__item:nth-child(3) {
  transition-delay: 0.14s;
}

.stats-bar.stats-bar--stagger.reveal.visible .stats-bar__divider:nth-child(4) {
  transition-delay: 0.19s;
}

.stats-bar.stats-bar--stagger.reveal.visible .stats-bar__item:nth-child(5) {
  transition-delay: 0.24s;
}

.stats-bar.stats-bar--stagger.reveal.visible .stats-bar__divider:nth-child(6) {
  transition-delay: 0.29s;
}

.stats-bar.stats-bar--stagger.reveal.visible .stats-bar__item:nth-child(7) {
  transition-delay: 0.34s;
}

.stats-bar.stats-bar--stagger.reveal.visible .stats-bar__divider:nth-child(8) {
  transition-delay: 0.39s;
}

.stats-bar.stats-bar--stagger.reveal.visible .stats-bar__item:nth-child(9) {
  transition-delay: 0.44s;
}

@media (prefers-reduced-motion: reduce) {
  .stats-bar.stats-bar--stagger.reveal:not(.visible) .stats-bar__item,
  .stats-bar.stats-bar--stagger.reveal:not(.visible) .stats-bar__divider,
  .stats-bar.stats-bar--stagger.reveal.visible .stats-bar__item,
  .stats-bar.stats-bar--stagger.reveal.visible .stats-bar__divider {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 900px) {
  .stats-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: var(--sp-6) var(--sp-3);
  }

  .stats-bar__divider {
    display: none;
  }

  .stats-bar__item {
    padding: var(--sp-4) var(--sp-3);
    text-align: center;
    border: 1px solid rgba(135, 115, 107, 0.08);
  }

  .stats-bar--with-icons .stats-bar__item:last-of-type {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 22rem;
    width: 100%;
  }

  .stats-bar__number {
    font-size: var(--headline-md);
  }

  .stats-bar__label {
    font-size: var(--label-sm);
    max-width: none;
  }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.testimonial-card {
  background: var(--surface-container-low);
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--round-lg);
  display: flex;
  flex-direction: column;
}

.testimonial-card__stars {
  color: var(--primary);
  font-size: var(--body-lg);
  letter-spacing: 2px;
  margin-bottom: var(--sp-5);
}

.testimonial-card__text {
  font-family: var(--font-serif);
  font-size: var(--body-lg);
  line-height: 1.7;
  color: var(--on-background);
  font-style: italic;
  flex: 1;
  margin-bottom: var(--sp-6);
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.testimonial-card__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--on-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--label-md);
}

.testimonial-card__name {
  font-weight: 600;
  font-size: var(--body-md);
  color: var(--on-background);
}

.testimonial-card__origin {
  font-size: var(--body-sm);
  color: var(--on-surface-variant);
}

/* ============================================================
   FORM SELECT STYLING
   ============================================================ */
.form-field select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--body-lg);
  padding: var(--sp-4) var(--sp-4);
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-bottom: 1px solid rgba(135, 115, 107, 0.2);
  color: var(--surface-container-lowest);
  border-radius: 0;
  transition: border-color var(--duration-fast) var(--ease-out);
  outline: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2387736b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.form-field select:focus {
  border-bottom-color: var(--primary);
  border-bottom-width: 2px;
}

.form-field select option {
  background: var(--on-background);
  color: var(--surface-container-lowest);
}

.form-disclaimer {
  font-size: var(--label-sm);
  color: var(--outline);
  line-height: 1.5;
  margin-top: calc(-1 * var(--sp-2));
}

/* ============================================================
   FOOTER V2 (Multi-column)
   ============================================================ */
.footer__brand {
  grid-column: 1 / -1;
  margin-bottom: var(--sp-6);
}

.footer__logo-img {
  height: 80px;
  width: auto;
  margin-bottom: var(--sp-3);
  filter: brightness(0) invert(1);
}

.footer__tagline {
  font-size: var(--body-md);
  color: var(--outline);
  max-width: 300px;
}

.footer__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
  margin-bottom: var(--sp-10);
}

.footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer__column-title {
  font-family: var(--font-sans);
  font-size: var(--label-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--surface-container-high);
  margin-bottom: var(--sp-2);
}

.footer__bottom {
  padding-top: var(--sp-6);
  position: relative;
}

.footer__bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

.footer__disclaimer {
  font-size: var(--label-sm);
  color: var(--outline);
  line-height: 1.6;
  margin-top: var(--sp-3);
  max-width: 700px;
}

/* ============================================================
   WHATSAPP FLOATING BUTTON
   ============================================================ */
.whatsapp-float {
  position: fixed;
  bottom: var(--sp-8);
  right: var(--sp-8);
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-toast);
  transition: transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  animation: whatsapp-pulse 2s infinite;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
  animation: none;
}

@keyframes whatsapp-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
  }

  50% {
    box-shadow: 0 0 0 12px rgba(37, 211, 102, 0);
  }
}

/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: calc(var(--sp-8) + 60px + var(--sp-4)); /* Encima del botón de WhatsApp */
  right: var(--sp-8);
  width: 48px;
  height: 48px;
  background: var(--surface-container-lowest);
  color: var(--primary);
  border: 1px solid rgba(135, 115, 107, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-toast);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--duration-normal) var(--ease-out);
  box-shadow: var(--shadow-elevated);
  outline: none;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--primary);
  color: var(--on-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(144, 72, 38, 0.2);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.5px;
}

/* ============================================================
   INFRASTRUCTURE GRID
   ============================================================ */
.infra-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.infra-item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-6);
  background: var(--surface-container-low);
  border-radius: var(--round-lg);
  transition: transform var(--duration-fast) var(--ease-out);
}

.infra-item:hover {
  transform: translateY(-2px);
}

.infra-item__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary);
  color: var(--on-secondary);
  border-radius: 50%;
  font-size: var(--body-sm);
  font-weight: 700;
}

.infra-item__title {
  font-family: var(--font-sans);
  font-size: var(--title-md);
  font-weight: 600;
  margin-bottom: var(--sp-1);
}

.infra-item__text {
  font-size: var(--body-md);
  color: var(--on-surface-variant);
  line-height: 1.5;
}

/* ============================================================
   INVESTMENT CARDS
   ============================================================ */
.investment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.investment-card {
  background: var(--surface-container-lowest);
  border-radius: var(--round-lg);
  padding: var(--sp-8) var(--sp-6);
  position: relative;
  transition: transform var(--duration-normal) var(--ease-out);
}

.investment-card:hover {
  transform: translateY(-4px);
}

.investment-card--featured {
  background: var(--on-background);
  color: var(--surface-container-lowest);
}

.investment-card--featured .investment-card__label {
  color: var(--primary);
}

.investment-card--featured .investment-card__title {
  color: var(--surface-container-lowest);
}

.investment-card--featured .investment-card__detail {
  color: var(--outline-variant);
}

.investment-card__header {
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-5);
  position: relative;
}

.investment-card__header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--outline-variant);
  opacity: 0.12;
}

.investment-card__label {
  font-size: var(--label-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: var(--sp-2);
}

.investment-card__title {
  font-family: var(--font-serif);
  font-size: var(--headline-sm);
  font-weight: 400;
}

.investment-card__detail {
  font-size: var(--body-md);
  color: var(--on-surface-variant);
  line-height: 1.7;
}

.investment-card__detail strong {
  color: var(--secondary);
  font-weight: 700;
}

.investment-card--featured .investment-card__detail strong {
  color: var(--primary);
}

/* Precios “desde” — patrón ORVE (fichas ciudad-central-*) */
.price-teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

.price-teaser-card {
  background: var(--surface-container-lowest);
  border-radius: var(--round-lg);
  padding: var(--sp-8) var(--sp-6);
  border: 1px solid rgba(135, 115, 107, 0.1);
  box-shadow: var(--shadow-soft);
}

.price-teaser-card--accent {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--surface-container-low) 92%, var(--primary) 4%),
    var(--surface-container-lowest)
  );
  border-color: color-mix(in srgb, var(--primary) 18%, transparent);
}

.price-teaser-kicker {
  font-size: var(--label-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
  margin: 0 0 var(--sp-3);
}

.price-teaser-card--accent .price-teaser-kicker {
  color: var(--primary);
}

.price-teaser-label {
  font-size: var(--label-md);
  font-weight: 600;
  color: var(--on-surface-variant);
  margin: 0 0 var(--sp-2);
  letter-spacing: 0.04em;
}

.price-teaser-figure {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.5vw, var(--display-sm));
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 var(--sp-4);
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.price-teaser-figure--text {
  font-size: clamp(1.5rem, 3.5vw, var(--headline-md));
  line-height: 1.15;
  background: none;
  background-clip: unset;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  color: var(--on-surface);
}

.price-teaser-unit {
  font-size: 0.55em;
  font-weight: 600;
  -webkit-text-fill-color: transparent;
}

.price-teaser-detail {
  font-size: var(--body-md);
  color: var(--on-surface-variant);
  line-height: 1.65;
  margin: 0 0 var(--sp-6);
}

.price-teaser-detail strong {
  color: var(--on-surface);
  font-weight: 600;
}

.price-teaser-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.price-teaser-disclaimer {
  margin: var(--sp-6) 0 0;
  max-width: 48rem;
  font-size: var(--label-sm);
  line-height: 1.5;
  color: color-mix(in srgb, var(--on-surface) 58%, transparent);
  font-style: italic;
}

@media (max-width: 900px) {
  .price-teaser-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-list {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.faq-item {
  border: 1px solid rgba(135, 115, 107, 0.2);
  border-radius: var(--round-lg);
  background: linear-gradient(165deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(250, 246, 238, 0.72) 100%);
  box-shadow: 0 2px 12px rgba(31, 27, 18, 0.04);
  overflow: hidden;
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

.faq-item:hover {
  border-color: rgba(61, 107, 78, 0.28);
  box-shadow: 0 8px 28px rgba(31, 27, 18, 0.07);
}

.faq-item[open] {
  border-color: rgba(61, 107, 78, 0.42);
  box-shadow: 0 12px 36px rgba(31, 27, 18, 0.08);
}

.faq-item__question {
  font-family: var(--font-serif);
  font-size: var(--title-lg);
  font-weight: 400;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  cursor: pointer;
  color: var(--on-background);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  user-select: none;
  transition:
    color var(--duration-fast) var(--ease-out),
    background var(--duration-normal) var(--ease-out);
}

.faq-item__question:hover {
  color: var(--primary);
}

.faq-item[open] .faq-item__question {
  color: var(--on-background);
  background: linear-gradient(90deg,
      rgba(61, 107, 78, 0.06) 0%,
      transparent 55%);
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__question::after {
  content: '+';
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  color: var(--secondary);
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(61, 107, 78, 0.12);
  transition:
    transform 0.5s cubic-bezier(0.33, 1, 0.68, 1),
    background var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.faq-item__question:hover::after {
  background: rgba(61, 107, 78, 0.2);
  transform: scale(1.05);
}

.faq-item[open] .faq-item__question::after {
  content: '+';
  transform: rotate(45deg) scale(1);
  background: linear-gradient(145deg, var(--primary), var(--primary-container));
  color: var(--on-primary);
  box-shadow: 0 4px 14px rgba(135, 68, 49, 0.25);
}

.faq-item[open] .faq-item__question:hover::after {
  transform: rotate(45deg) scale(1.05);
}

.faq-item__question:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

/* Respuesta: max-height la fija JS al alto real (script.js initFaqAccordion); sin JS el fallback abre con altura generosa */
.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--sp-6);
  opacity: 0;
  transform: translateY(-8px);
  transition:
    max-height 0.58s cubic-bezier(0.45, 0, 0.22, 1),
    opacity 0.45s var(--ease-out),
    transform 0.45s var(--ease-out);
}

.faq-item[open] .faq-item__answer {
  max-height: 70rem;
  opacity: 1;
  transform: translateY(0);
}

.faq-item__answer p {
  font-size: var(--body-lg);
  color: var(--on-surface-variant);
  line-height: 1.75;
  max-width: 700px;
  padding-bottom: var(--sp-6);
  margin: 0;
}

.section--alt .faq-item {
  background: linear-gradient(165deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(250, 246, 238, 0.88) 100%);
}

.section--alt .faq-item[open] {
  background: linear-gradient(165deg,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(250, 246, 238, 0.95) 100%);
}

@media (prefers-reduced-motion: reduce) {

  .faq-item,
  .faq-item__question,
  .faq-item__question::after,
  .faq-item__answer {
    transition: none !important;
  }

  .faq-item__answer {
    transform: none;
  }
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays */
.delay-1 {
  transition-delay: 100ms;
}

.delay-2 {
  transition-delay: 200ms;
}

.delay-3 {
  transition-delay: 300ms;
}

.delay-4 {
  transition-delay: 400ms;
}

.delay-5 {
  transition-delay: 500ms;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Large tablets and small desktops */
@media (max-width: 1200px) {
  .properties-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .property-card--featured {
    grid-column: span 2;
    grid-row: span 1;
  }

  .amenities__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-card__highlights {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-card__amenities-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials-grid .testimonial-card:last-child {
    grid-column: span 2;
    max-width: 600px;
    margin: 0 auto;
  }

  .stats-showcase {
    gap: var(--sp-4);
  }

  .stat-box__number {
    font-size: var(--headline-lg);
  }

  .infra-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .investment-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .investment-grid .investment-card--featured {
    grid-column: span 2;
  }
}

/* Tablets */
@media (max-width: 900px) {
  :root {
    --nav-height: 4rem;
  }

  /* Removed display:none to allow mobile menu to function */
  /* Removed display:none logic to allow visibility-based menu */
  .nav__links {
    display: flex;
  }

  /* Removed hero focal styles from here (moved to global) */
  .section {
    padding: var(--sp-12) var(--sp-5);
  }

  .hero {
    padding: var(--sp-10) var(--sp-5);
  }

  .hero__scroll-indicator {
    display: none;
  }

  .heritage {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .heritage__image {
    aspect-ratio: 16 / 10;
  }

  .heritage__image--zoomable {
    aspect-ratio: auto;
    min-height: min(56vh, 540px);
    max-height: min(82vh, 960px);
  }

  .heritage__image--zoomable .heritage__zoom-hit img {
    max-height: min(70vh, 680px);
  }

  .heritage__content {
    margin-left: 0;
    padding: var(--sp-10) var(--sp-5);
    border-radius: 0;
  }

  .heritage__stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .location {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .location__map {
    aspect-ratio: 16 / 10;
    order: -1;
  }

  .location__content {
    padding: var(--sp-10) var(--sp-5);
  }

  .contact__container {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .properties-grid {
    grid-template-columns: 1fr;
  }

  .property-card--featured {
    grid-column: span 1;
  }

  .amenities__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .infra-grid {
    grid-template-columns: 1fr;
  }

  .investment-grid {
    grid-template-columns: 1fr;
  }

  .investment-grid .investment-card--featured {
    grid-column: span 1;
  }

  /* Project cards stack vertically */
  .project-card {
    grid-template-columns: 1fr;
  }

  .project-card__image {
    min-height: 300px;
  }

  .project-card:not(:has(.media-carousel--ccm-page)) .media-carousel__track,
  .project-card:not(:has(.media-carousel--ccm-page)) .media-carousel__slide,
  .project-card:not(:has(.media-carousel--ccm-page)) .media-carousel__slide img {
    min-height: 300px;
  }

  .media-carousel--ccm-page .media-carousel__track,
  .media-carousel--ccm-page .media-carousel__slide {
    min-height: 100%;
  }

  .project-card__body {
    padding: var(--sp-8) var(--sp-5);
  }

  /* Stats showcase wraps */
  .stats-showcase {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  /* Testimonials stack */
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .testimonials-grid .testimonial-card:last-child {
    grid-column: span 1;
    max-width: none;
  }

  /* Footer columns */
  .footer__container {
    display: block;
  }

  .footer__columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .hero__title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .heritage__stats {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .amenities__grid {
    grid-template-columns: 1fr;
  }

  .faq-item__question {
    font-size: var(--body-lg);
    padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  }

  .faq-item__answer {
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
  }

  .project-card__highlights {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-card__amenities-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-card__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .project-card__actions .btn {
    text-align: center;
  }

  .stats-showcase {
    grid-template-columns: 1fr;
  }

  .footer__columns {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .footer__bottom {
    text-align: center;
  }

  .footer__disclaimer {
    max-width: none;
  }

  .nav {
    padding: 0 var(--sp-5);
  }

  .whatsapp-float {
    bottom: var(--sp-5);
    right: var(--sp-5);
    width: 52px;
    height: 52px;
  }

  .whatsapp-float svg {
    width: 24px;
    height: 24px;
  }
}

/* ============================================================
   MOBILE REFINEMENTS — max-width: 600px (extended fixes)
   Correcciones encontradas en revisión de UI móvil
   ============================================================ */
@media (max-width: 600px) {

  /* --- Hero: Safe area + overflow seguro --- */
  .hero {
    min-height: 100svh;
    padding: var(--sp-8) var(--sp-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
  }

  .hero__content {
    padding: var(--sp-6) var(--sp-5);
    width: 100%;
    margin: 0 auto;
    position: relative;
  }

  .hero__logo-img-large {
    max-width: 220px;
    max-height: 100px;
  }

  .hero--presents .hero__logo-img-large {
    max-width: min(168px, 48vw);
    max-height: 64px;
  }

  .hero--presents .hero__logo-box {
    margin-bottom: var(--sp-2);
  }

  .hero--presents .hero__presents {
    letter-spacing: 0.22em;
    margin-bottom: var(--sp-3);
  }

  .hero--presents .hero__eyebrow {
    top: var(--sp-4);
    right: var(--sp-4);
    max-width: min(14rem, calc(100% - var(--sp-8)));
    font-size: var(--label-sm);
    letter-spacing: 0.12em;
  }

  .hero__logo-box {
    margin-bottom: var(--sp-5);
  }

  .hero__subtitle {
    font-size: var(--body-md);
    line-height: 1.65;
    margin-bottom: var(--sp-6);
  }

  .hero__actions {
    width: 100%;
    gap: var(--sp-3);
  }

  .hero__actions .btn--primary {
    width: 100%;
    justify-content: center;
    padding: var(--sp-4) var(--sp-5);
  }

  /* --- Back to top: Posición correcta sobre WhatsApp en móvil --- */
  .back-to-top {
    bottom: calc(var(--sp-5) + 52px + var(--sp-3));
    right: var(--sp-5);
    width: 44px;
    height: 44px;
  }

  /* --- Stats showcase: 2 columnas en vez de 1 col --- */
  .stats-showcase {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  .stat-box {
    padding: var(--sp-5) var(--sp-4);
  }

  .stat-box__icon {
    width: 40px;
    height: 40px;
    margin-bottom: var(--sp-4);
  }

  .stat-box__number {
    font-size: var(--headline-md);
  }

  /* --- Project card highlights: más compacto en móvil --- */
  .project-card__highlights--enhanced {
    padding: var(--sp-4) var(--sp-3);
  }

  .project-card__highlights--enhanced .project-card__highlight-number {
    font-size: var(--headline-sm);
  }

  /* --- Heritage stats: 3 columnas (los números son cortos) --- */
  .heritage__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
  }

  .heritage__stats > div {
    padding: calc(var(--sp-5) + 2px) var(--sp-2) var(--sp-4);
  }

  .heritage__stat-number {
    font-size: var(--headline-md);
  }

  .heritage__stat-label {
    font-size: var(--label-sm);
    letter-spacing: 0.04em;
  }

  /* --- Section padding más ajustado --- */
  .section {
    padding: var(--sp-10) var(--sp-4);
  }

  .contact {
    padding: var(--sp-10) var(--sp-4);
  }

  .quote-section {
    padding: var(--sp-10) var(--sp-4);
  }

  /* --- Section heading: escala proporcional --- */
  .section__heading {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  .contact__heading {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  /* --- Heritage content --- */
  .heritage__content {
    padding: var(--sp-8) var(--sp-4);
  }

  /* --- Infra y Investment grids: 1 columna forzada --- */
  .infra-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .infra-item {
    padding: var(--sp-4) var(--sp-5);
  }

  .investment-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .investment-grid .investment-card--featured {
    grid-column: span 1;
  }

  /* --- FAQ: mejores touch targets --- */
  .faq-item__question {
    padding: var(--sp-5) var(--sp-4);
    min-height: 48px;
  }

  .faq-item__answer {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }

  /* --- Form: prevenir zoom en iOS al hacer focus --- */
  .form-field input,
  .form-field textarea,
  .form-field select {
    font-size: 16px;
    padding: var(--sp-4) var(--sp-3);
  }

  /* --- Contact form button full width --- */
  .contact-form .btn--primary {
    width: 100% !important;
  }

  /* --- Footer --- */
  .footer__logo-img {
    height: 60px;
  }

  .footer__tagline {
    font-size: var(--label-lg);
  }

  /* --- Nav toggle: touch target más grande --- */
  .nav__toggle {
    padding: 8px;
    margin-right: -8px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ============================================================
   EXTRA SMALL MOBILE — max-width: 380px
   Para dispositivos pequeños: iPhone SE, teléfonos Android budget
   ============================================================ */
@media (max-width: 380px) {
  .hero__title {
    font-size: clamp(1.75rem, 8vw, 2.2rem);
    word-break: break-word;
  }

  .hero__content {
    padding: var(--sp-5) var(--sp-4);
  }

  .hero__logo-img-large {
    max-width: 180px;
    max-height: 80px;
  }

  /* En pantallas muy pequeñas, 1 columna para stats */
  .stats-showcase {
    grid-template-columns: 1fr;
  }

  .stats-bar {
    grid-template-columns: 1fr;
  }

  /* Amenity chips en 1 columna */
  .project-card__amenities-grid {
    grid-template-columns: 1fr;
  }

  .section__heading {
    font-size: clamp(1.5rem, 6.5vw, 1.8rem);
  }

  .section__eyebrow {
    font-size: var(--label-sm);
  }

  .btn {
    font-size: var(--label-md);
    padding: var(--sp-3) var(--sp-4);
  }

  .contact__container {
    gap: var(--sp-8);
  }

  .heritage__content {
    padding: var(--sp-6) var(--sp-4);
  }
}

/* ============================================================
   Transición editorial al navegar a fichas de proyecto
   ============================================================ */
.project-page-transition {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  background-color: rgba(253, 248, 242, 0.94);
  background-image: linear-gradient(
    152deg,
    rgba(253, 248, 242, 0.97) 0%,
    rgba(228, 241, 233, 0.88) 48%,
    rgba(245, 234, 219, 0.95) 100%
  );
  -webkit-backdrop-filter: blur(18px) saturate(1.06);
  backdrop-filter: blur(18px) saturate(1.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.38s ease, visibility 0.38s ease;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .project-page-transition {
    background-color: rgba(253, 248, 242, 0.98);
  }
}

.project-page-transition.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.project-page-transition__panel {
  max-width: 26rem;
  text-align: center;
  padding: var(--sp-8) var(--sp-7);
  border-radius: var(--round-lg);
  background: rgba(255, 253, 248, 0.82);
  box-shadow:
    0 28px 56px rgba(31, 27, 18, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.65) inset;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.project-page-transition__mark {
  display: block;
  width: 11px;
  height: 11px;
  margin: 0 auto var(--sp-5);
  background: var(--secondary);
  opacity: 0.88;
  transform: rotate(45deg) scale(0.45);
  transition: transform 0.55s cubic-bezier(0.34, 1.35, 0.64, 1);
}

.project-page-transition.is-active .project-page-transition__mark {
  transform: rotate(45deg) scale(1);
}

.project-page-transition__kicker {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--label-sm);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(31, 27, 18, 0.62);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 20px rgba(255, 255, 255, 0.75);
}

.project-page-transition__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 4.2vw, 2.35rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--on-background);
  text-shadow:
    0 2px 22px rgba(255, 255, 255, 0.98),
    0 1px 3px rgba(255, 255, 255, 0.9),
    0 0 1px rgba(31, 27, 18, 0.08);
}

.project-page-transition__title em {
  font-style: italic;
  font-weight: 500;
  color: #2d5a3d;
  text-shadow:
    0 2px 20px rgba(255, 255, 255, 0.95),
    0 0 2px rgba(255, 255, 255, 0.8);
}

.project-page-transition__line {
  height: 1px;
  width: 0;
  max-width: 11rem;
  margin: var(--sp-6) auto 0;
  background: linear-gradient(90deg, transparent, rgba(61, 107, 78, 0.45), var(--secondary), rgba(61, 107, 78, 0.45), transparent);
  transition: width 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

.project-page-transition.is-active .project-page-transition__line {
  width: 100%;
}

.project-page-transition .project-page-transition__panel {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-page-transition.is-active .project-page-transition__panel {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.project-page-transition-lock,
html.project-page-transition-lock body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .project-page-transition {
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .project-page-transition__mark {
    transform: rotate(45deg) scale(1);
    transition: none;
  }

  .project-page-transition__line {
    width: 100%;
    max-width: 10rem;
    transition: none;
  }

  .project-page-transition .project-page-transition__panel,
  .project-page-transition.is-active .project-page-transition__panel {
    transform: none;
    transition: opacity 0.25s ease;
  }
}

/* Velo de llegada a ficha (después de “Ingresando a…”) */
.project-page-arrival {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  visibility: visible;
  opacity: 1;
  background: rgba(253, 248, 242, 0.97);
  -webkit-backdrop-filter: blur(12px) saturate(1.04);
  backdrop-filter: blur(12px) saturate(1.04);
  transition:
    opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.58s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-page-arrival--exit {
  opacity: 0;
  visibility: hidden;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .project-page-arrival {
    background: rgba(253, 248, 242, 0.99);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-page-arrival {
    transition: opacity 0.22s ease, visibility 0.22s ease;
  }
}