/* =========================================================
   NEEM KEY COLLECTION — styles.css
   Premium Luxury Resort · Mobile First · Production Ready
   =========================================================
   ÍNDICE
   01. Variables & Reset
   02. Tipografía base
   03. Header
   04. Nav mobile
   05. Botones
   06. Hero
   07. Search card
   08. Explore more
   09. Feature section
   10. Phrases rotator
   11. Featured properties
   12. Experiencia Neem Key
   13. Ofertas exclusivas
   14. Trust / Badges
   15. Footer
   16. WhatsApp float + Accesibilidad
   17. Scroll reveal
   18. Cursor personalizado
   19. Desktop @media 768px
   20. Desktop @media 992px
   21. Desktop @media 1100px
   ========================================================= */

/* =========================================================
   01. VARIABLES & RESET
   ========================================================= */

:root {
  /* Paleta principal */
  --color-bg: #111111;         /* negro profundo */
  --color-bg-alt: #161616;      /* negro secciones alternas */
  --color-bg-deep: #1e1e1e;    /* negro hover de cards */
  --color-brown: #DDD0A8;       /* crema, headings */
  --color-brown-lt: rgba(221,208,168,0.55); /* crema muted */
  --color-gold: #C49B3C;        /* dorado oficial */
  --color-gold-dark: #A07D28;  /* dorado hover */
  --color-navy: #C49B3C;        /* dorado, CTA primario */
  --color-navy-lt: #A07D28;    /* dorado oscuro, hover */
  --color-white: #ffffff;
  --color-ink: #DDD0A8;         /* crema, texto principal */
  --color-ink-mid: rgba(221,208,168,0.55); /* crema muted */
  --color-ink-soft: rgba(221,208,168,0.4); /* crema soft */
  --color-border: rgba(196,155,60,0.25); /* dorado sutil */
  --color-border-lt: rgba(196,155,60,0.12); /* dorado muy sutil */

  /* Tipografía */
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: Georgia, "Times New Roman", serif;

  /* Espaciado */
  --header-h-mobile: 64px;
  --section-px: 1.5rem;
  --section-py: 4.5rem;

  /* Transiciones */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;

  /* Sombras */
  --shadow-sm: 0 4px 14px rgba(0,0,0,0.4);
  --shadow-md: 0 12px 32px rgba(0,0,0,0.5);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.6);
  --shadow-xl: 0 30px 70px rgba(0,0,0,0.7);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  background-color: var(--color-bg);
  color: var(--color-brown);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

button {
  font-family: var(--font-sans);
  cursor: pointer;
}

/* Foco visible — accesibilidad */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================
   02. TIPOGRAFÍA BASE
   ========================================================= */

/* Títulos principales: serif elegante */
h1,
h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-ink);
  letter-spacing: 0.02em;
}

h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-ink);
}

strong {
  font-weight: 500;
  color: var(--color-ink);
}

/* =========================================================
   03. HEADER
   sticky + glassmorphism al hacer scroll (.scrolled via JS)
   ========================================================= */

.main-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  transition:
    background-color var(--dur-slow) var(--ease-out),
    backdrop-filter var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}

/* Estado scrolled: glassmorphism premium */
.main-header.scrolled {
  background-color: rgba(248, 243, 233, 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.07);
  border-bottom-color: rgba(224, 212, 195, 0.6);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--section-px);
  min-height: var(--header-h-mobile);
  gap: 1rem;
}

/* Botones de ícono (hamburguesa / teléfono) */
.icon-button {
  background: transparent;
  border: none;
  padding: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brown);
  transition: opacity var(--dur-fast);
}

.icon-button:hover {
  opacity: 0.7;
}

/* Ícono hamburguesa */
.menu-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.menu-icon span {
  display: block;
  width: 20px;
  height: 1.5px;
  background-color: var(--color-brown);
  border-radius: 999px;
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}

/* Animación X al abrir el menú */
body.nav-open .menu-icon span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
body.nav-open .menu-icon span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
body.nav-open .menu-icon span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Logo */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  color: var(--color-brown);
  transition: opacity var(--dur-fast);
}

/* Logo centrado en el nav (desktop): oculto en mobile */
.nav-item--logo {
  display: none;
}

.logo:hover {
  opacity: 0.75;
}

.logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-family: var(--font-serif);
  letter-spacing: 0.1em;
  color: var(--color-brown);
}

.logo-text {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-weight: 400;
}

/* Teléfono / WhatsApp icon */
.phone-svg {
  width: 22px;
  height: 22px;
  fill: var(--color-brown);
}

/* =========================================================
   04. NAV MOBILE — panel desplegable
   ========================================================= */

.main-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.09);
  display: none;
  /* Animación de entrada */
  transform-origin: top center;
}

body.nav-open .main-nav {
  display: block;
  animation: navDrop var(--dur-base) var(--ease-out) both;
}

@keyframes navDrop {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.5rem 0;
}

.nav-item {
  border-bottom: 1px solid rgba(224, 212, 195, 0.5);
}

.nav-item:last-child {
  border-bottom: none;
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem var(--section-px);
  text-decoration: none;
  color: var(--color-brown);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    color var(--dur-fast),
    background-color var(--dur-fast);
}

.nav-link:hover {
  color: var(--color-ink);
  background-color: rgba(180, 147, 98, 0.06);
}

/* Flechita del nav */
.nav-arrow {
  width: 7px;
  height: 7px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg) translateY(-2px);
  opacity: 0.6;
  flex-shrink: 0;
}

/* Acciones dentro del dropdown */
.header-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem var(--section-px) 1.25rem;
}

/* =========================================================
   05. BOTONES — sistema unificado
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.6rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* Variante outline */
.btn-outline {
  border-color: var(--color-brown);
  color: var(--color-brown);
  background-color: transparent;
}

.btn-outline:hover {
  background-color: var(--color-brown);
  color: var(--color-white);
}

/* Variante primaria — navy */
.btn-primary {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
  box-shadow: 0 4px 14px rgba(20, 37, 54, 0.22);
}

.btn-primary:hover {
  background-color: var(--color-navy-lt);
  border-color: var(--color-navy-lt);
  box-shadow: 0 8px 22px rgba(20, 37, 54, 0.3);
}

/* Variante hero dorado */
.btn-hero {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-white);
  font-size: 0.78rem;
  box-shadow: 0 6px 20px rgba(180, 147, 98, 0.35);
}

.btn-hero:hover {
  background-color: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
  box-shadow: 0 10px 28px rgba(180, 147, 98, 0.45);
}

/* Variante outline blanca — sobre hero */
.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 2rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.55);
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-fast);
  margin-top: 1.75rem;
}

.btn-hero-outline:hover {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
}

/* Variante feature — rounded-square navy */
.feature-btn {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  border-radius: 8px;
  color: var(--color-white);
  padding: 0.9rem 2.2rem;
  letter-spacing: 0.12em;
  box-shadow: 0 6px 20px rgba(20, 37, 54, 0.22);
}

.feature-btn:hover {
  background-color: var(--color-navy-lt);
  border-color: var(--color-navy-lt);
  box-shadow: 0 10px 28px rgba(20, 37, 54, 0.3);
}

/* =========================================================
   06. HERO PRINCIPAL
   ========================================================= */

.page-main {
  position: relative;
}

.hero {
  position: relative;
  min-height: 88svh; /* svh: viewport real en mobile (sin barra del browser) */
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Imagen / video de fondo */
.hero-media {
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/site/villa_background.png");
  background-size: cover;
  background-position: center;
  transform: scale(1.04); /* permite un micro-zoom en carga sin clipping */
  animation: heroZoom 12s var(--ease-out) forwards;
  will-change: transform;
}

@keyframes heroZoom {
  to {
    transform: scale(1);
  }
}

/* Overlay gradiente — legibilidad del texto */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    170deg,
    rgba(14, 24, 34, 0.38) 0%,
    rgba(14, 24, 34, 0.55) 60%,
    rgba(14, 24, 34, 0.72) 100%
  );
}

/* Contenido centrado */
.hero-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem var(--section-px) 4rem;
  color: var(--color-white);
  animation: heroFadeUp 1.1s 0.3s var(--ease-out) both;
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Kicker sobre el título */
.hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1.1rem;
  font-weight: 400;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 8vw, 4.8rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.08;
  color: var(--color-white);
  margin-bottom: 1.1rem;
}

.hero-subtitle {
  font-size: clamp(0.88rem, 2vw, 1rem);
  font-weight: 300;
  max-width: 520px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}

/* =========================================================
   07. SEARCH CARD — tarjeta de búsqueda
   ========================================================= */

.hero-search-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0 var(--section-px) 2rem;
  margin-top: -2.5rem;
  animation: heroFadeUp 1.1s 0.6s var(--ease-out) both;
}

.search-card {
  width: 100%;
  max-width: 960px;
  background-color: var(--color-white);
  border-radius: 18px;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.search-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
}

.search-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.search-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brown-lt);
  font-weight: 500;
}

.search-value {
  padding: 0.3rem 0;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-ink);
  cursor: pointer;
  transition: color var(--dur-fast);
}

.search-value:hover {
  color: var(--color-brown);
}

.search-arrow {
  width: 8px;
  height: 8px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0.5;
  flex-shrink: 0;
}

.search-underline {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
  transition: background-color var(--dur-fast);
}

.search-field:focus-within .search-underline {
  background-color: var(--color-gold);
}

.search-button-wrapper {
  border-top: 1px solid rgba(196,155,60,0.25);
  padding: 1rem 1.6rem 1.5rem;
}

.btn-hero {
  width: 100%;
}

/* =========================================================
   08. EXPLORE MORE
   ========================================================= */

.explore-more-section {
  background-color: var(--color-bg-deep);
  padding: 1rem var(--section-px);
  display: flex;
  justify-content: center;
}

.explore-more-button {
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--color-brown-lt);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--dur-fast);
}

.explore-more-button:hover {
  color: var(--color-brown);
}

.explore-arrow {
  width: 9px;
  height: 9px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg);
  animation: bounceArrow 2s var(--ease-in-out) infinite;
}

@keyframes bounceArrow {
  0%,
  100% {
    transform: rotate(-45deg) translateY(0);
  }
  50% {
    transform: rotate(-45deg) translateY(3px);
  }
}

@keyframes floatImgA {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

@keyframes floatImgB {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* =========================================================
   09. FEATURE SECTION — texto + imágenes superpuestas
   ========================================================= */

.feature-section {
  padding: 5rem var(--section-px);
  background-color: var(--color-bg-alt);
}

.feature-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.feature-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-bottom: 0.5rem;
}

.feature-text {
  position: relative;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* Línea decorativa superior */
.feature-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(100%, 480px);
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold) 0%, transparent 100%);
  opacity: 0.6;
}

/* Línea decorativa inferior */
.feature-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(100%, 480px);
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold) 0%, transparent 100%);
  opacity: 0.6;
}

.feature-tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  font-weight: 500;
  margin-bottom: 1rem;
}

.feature-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 300;
  color: var(--color-ink);
  margin-bottom: 1.25rem;
  letter-spacing: 0.03em;
}

.feature-description {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-ink-mid);
  max-width: 520px;
}

/* Imágenes — ocultas en mobile, visibles en desktop */
.feature-images {
  display: none;
}

.feature-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

/* =========================================================
   10. PHRASES ROTATOR
   ========================================================= */

.phrases-section {
  background-color: var(--color-bg-alt);
  padding: 4.5rem var(--section-px);
}

.phrases-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  gap: 1.6rem;
  text-align: center;
}

.phrases-line {
  display: block;
  height: 1px;
  width: 100px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-gold),
    transparent
  );
  opacity: 0.7;
}

.phrases-rotator {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 4vw, 2rem);
  font-weight: 300;
  line-height: 1.3;
  color: var(--color-ink);
  letter-spacing: 0.02em;
  margin: 0;
}

.phrases-text {
  display: inline-block;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.phrases-text.is-leaving {
  opacity: 0;
  transform: translateX(-18px);
}

.phrases-text.is-entering {
  opacity: 0;
  transform: translateX(18px);
}

/* =========================================================
   11. FEATURED PROPERTIES — tabs + cards
   ========================================================= */

.featured-properties {
  position: relative;
  overflow: hidden;
  padding: 5rem var(--section-px);
  text-align: center;
  color: var(--color-white);
}

/* Fondos dinámicos */
.background-container {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.background-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
  transform: scale(1.04);
  will-change: opacity;
}

.background-image.active {
  opacity: 1;
}

.background-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 18, 28, 0.5) 0%,
    rgba(10, 18, 28, 0.55) 100%
  );
}

/* Rutas de fondos — relativas al CSS dentro de /Styles/ */
#bg-villas {
  background-image: url("../assets/images/site/villa_background.png");
}
#bg-apartments {
  background-image: url("../assets/images/site/residence_background.png");
}

/* Todo el contenido encima del fondo */
.featured-properties > *:not(.background-container) {
  position: relative;
  z-index: 1;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--color-white);
  margin-bottom: 1.25rem;
}

.section-description {
  max-width: 700px;
  margin: 0 auto 2rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 300;
  min-height: 1.65em; /* evita saltos de layout al cambiar texto */
  transition: opacity var(--dur-slow) var(--ease-out);
}

/* Tabs */
.sub-menu {
  display: inline-flex;
  gap: 0.5rem;
  margin: 0 auto 0.75rem;
  padding: 0.3rem 0.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.menu-item {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0.55rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.menu-item:hover {
  color: var(--color-white);
}

.menu-item.active {
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-white);
}

/* Slider de cards — scroll horizontal en mobile */
.properties-slider {
  display: flex;
  gap: 1.25rem;
  padding: 0.5rem 0.25rem 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* -webkit-overflow-scrolling: touch — deprecado en iOS 13+, removido */
  margin-top: 1.75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.properties-slider::-webkit-scrollbar {
  height: 6px;
}

.properties-slider::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

/* Card individual */
.property-card {
  flex: 0 0 78vw;
  max-width: 300px;
  background: var(--color-white);
  color: var(--color-ink);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  scroll-snap-align: center;
  display: none; /* ocultas por defecto */
  position: relative;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.property-card.is-active {
  display: block;
}

.property-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45);
}

.property-image {
  height: 195px;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s var(--ease-out);
}

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

.property-info {
  padding: 1.15rem 1.15rem 1.4rem;
}

.property-info h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
  color: var(--color-ink);
}

.property-info p {
  color: var(--color-ink-mid);
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 1.1rem;
}

.property-btn {
  background: var(--color-navy);
  color: var(--color-white);
  border: none;
  padding: 0.7rem 1.2rem;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    background-color var(--dur-fast),
    transform var(--dur-fast);
}

.property-btn:hover {
  background-color: var(--color-navy-lt);
  transform: translateY(-1px);
}

/* Stretched link — toda la tarjeta es clickeable */
a.property-btn::after {
  content: "";
  position: absolute;
  inset: 0;
}


/* =========================================================
   12. EXPERIENCIA NEEM KEY — editorial cards
   ========================================================= */

.nk-experience {
  background-color: var(--color-bg);
  padding: 5rem var(--section-px) 5.5rem;
}

.nk-experience-container {
  max-width: 1200px;
  margin: 0 auto;
}

.nk-experience-title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  font-weight: 300;
  margin-bottom: 0.75rem;
  color: var(--color-ink);
  letter-spacing: 0.02em;
}

.nk-experience-subtitle {
  color: var(--color-ink-soft);
  max-width: 680px;
  line-height: 1.65;
  font-size: 1rem;
  font-weight: 300;
  margin-bottom: 2.5rem;
}

/* Mobile: scroll horizontal */
.nk-experience-grid {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  padding: 0.25rem 0 1rem;
  scroll-snap-type: x mandatory;
  /* -webkit-overflow-scrolling: touch — deprecado en iOS 13+, removido */
  scrollbar-width: thin;
  scrollbar-color: rgba(106, 75, 47, 0.2) transparent;
}

.nk-experience-grid::-webkit-scrollbar {
  height: 5px;
}
.nk-experience-grid::-webkit-scrollbar-thumb {
  background: rgba(106, 75, 47, 0.22);
  border-radius: 999px;
}

.nk-experience-card {
  flex: 0 0 82%;
  scroll-snap-align: start;
}

.nk-experience-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition:
    transform 0.7s var(--ease-out),
    box-shadow 0.7s var(--ease-out);
  will-change: transform;
}

.nk-experience-card:hover .nk-experience-media {
  transform: scale(1.025);
  box-shadow: var(--shadow-xl);
}

.nk-experience-body {
  padding: 1.3rem 0.2rem 0;
}

.nk-experience-card-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.5vw, 1.85rem);
  font-weight: 400;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}

.nk-experience-card-text {
  color: var(--color-ink-soft);
  line-height: 1.7;
  font-size: 0.97rem;
  font-weight: 300;
  max-width: 460px;
  margin-bottom: 0.9rem;
}

/* CTA "Explorar ›" con underline animado */
.nk-experience-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  color: var(--color-brown);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  position: relative;
  padding-bottom: 0.2rem;
}

.nk-experience-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 68%;
  height: 1px;
  background-color: rgba(106, 75, 47, 0.45);
  transition: width var(--dur-base) var(--ease-out);
}

.nk-experience-link:hover::after {
  width: 100%;
}

/* =========================================================
   13. OFERTAS EXCLUSIVAS
   ========================================================= */

.offers-section {
  background: var(--color-bg-alt);
  padding: 4rem var(--section-px) 5rem;
}

.offers-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.offers-heading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  margin-bottom: 1.75rem;
  color: var(--color-ink);
}

/* Card grande */
.offer-card {
  background: var(--color-bg-deep);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  box-shadow: var(--shadow-md);
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
  /* Animación flotante suave */
  animation: floatCard 7s var(--ease-in-out) infinite;
  will-change: transform;
}

@keyframes floatCard {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

/* Cancela la animación en hover para evitar salto visual mid-float */
.offer-card:hover {
  animation: none;
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.offer-media {
  padding: 1.25rem 1.25rem 0;
}

.offer-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}

.offer-card:hover .offer-media img {
  transform: scale(1.03);
}

.offer-content {
  padding: 1.75rem 1.4rem 2rem;
  text-align: left;
}

/* Pill indicadora */
.offer-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(180, 147, 98, 0.18);
  border: 1px solid rgba(180, 147, 98, 0.3);
  color: var(--color-gold-dark);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}

.offer-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-gold);
  animation: pulseDot 2.5s ease-in-out infinite;
}

@keyframes pulseDot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.75);
  }
}

.offer-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 400;
  color: var(--color-ink);
  margin: 1rem 0 0.75rem;
  letter-spacing: 0.02em;
}

.offer-text {
  color: var(--color-ink-mid);
  line-height: 1.65;
  font-size: 0.97rem;
  font-weight: 300;
  max-width: 52ch;
  margin-bottom: 1.4rem;
}

.offer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-ink);
  text-decoration: none;
  font-size: 0.92rem;
  position: relative;
  padding-bottom: 0.2rem;
}

.offer-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(44, 44, 44, 0.28);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
}

.offer-link:hover::after {
  transform: scaleX(0.65);
  transform-origin: left;
}

/* =========================================================
   14. TRUST / BADGES — reconocimientos
   ========================================================= */

.trust-section {
  background: var(--color-bg-alt);
  padding: 5rem 0;
  border-top: 1px solid var(--color-border-lt);
}

.trust-container {
  width: min(1100px, 92%);
  margin: 0 auto;
  text-align: center;
}

.trust-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-brown-lt);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.trust-badges {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  flex-wrap: wrap;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(30, 30, 30, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.trust-badge:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(30, 30, 30, 0.16);
}

.trust-logo,
.trust-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(17, 17, 17, 0.07);
  border: 1px solid rgba(17, 17, 17, 0.12);
  flex-shrink: 0;
}

.trust-icon {
  font-size: 15px;
  font-weight: 600;
  color: rgba(17, 17, 17, 0.8);
}

.trust-logo-svg {
  width: 17px;
  height: 17px;
  fill: rgba(17, 17, 17, 0.8);
}

/* Airbnb */
.trust-airbnb .trust-logo {
  background: rgba(255, 90, 95, 0.1);
  border-color: rgba(255, 90, 95, 0.28);
}
.trust-airbnb .trust-logo-svg {
  fill: #ff5a5f;
}

/* Booking */
.trust-booking .trust-logo {
  background: rgba(0, 53, 128, 0.1);
  border-color: rgba(0, 53, 128, 0.28);
}
.trust-booking .trust-logo-svg {
  fill: #003580;
}

.trust-text {
  text-align: left;
  line-height: 1.15;
}

.trust-text strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(17, 17, 17, 0.9);
}

.trust-text small {
  display: block;
  margin-top: 3px;
  font-size: 0.75rem;
  color: rgba(17, 17, 17, 0.55);
  font-weight: 300;
}

.trust-note {
  margin-top: 1.5rem;
  font-size: 0.78rem;
  color: rgba(17, 17, 17, 0.45);
  font-weight: 300;
  letter-spacing: 0.04em;
}

/* =========================================================
   15. FOOTER
   ========================================================= */

.nk-footer {
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border-lt);
  padding: 4rem var(--section-px) 2rem;
}

.nk-footer__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Mobile: columna única */
.nk-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.nk-footer__column {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.nk-footer__heading {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-brown-lt);
  margin-bottom: 0.2rem;
}

/* Cards de contacto */
.nk-footer__card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: var(--color-ink);
  background-color: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--color-border-lt);
  border-radius: 14px;
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.nk-footer__card:hover {
  transform: translateY(-2px);
  border-color: rgba(106, 75, 47, 0.2);
  background-color: rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-sm);
}

.nk-footer__card-icon {
  width: 2.1rem;
  height: 2.1rem;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(106, 75, 47, 0.18);
  color: var(--color-brown);
  font-size: 0.95rem;
  line-height: 1;
}

.nk-footer__card-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.nk-footer__card-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.3;
}

.nk-footer__card-text {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
  font-weight: 300;
}

/* Links del footer */
.nk-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.nk-footer__links a {
  text-decoration: none;
  color: var(--color-ink-mid);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.5;
  transition:
    color var(--dur-fast),
    transform var(--dur-fast);
}

.nk-footer__links a:hover {
  color: var(--color-brown);
  transform: translateX(3px);
}

/* Bottom row */
.nk-footer__bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(106, 75, 47, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nk-footer__copyright {
  font-size: 0.82rem;
  color: var(--color-brown-lt);
  font-weight: 300;
}

.nk-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.nk-footer__socials a {
  text-decoration: none;
  font-size: 0.82rem;
  color: var(--color-brown);
  position: relative;
  padding-bottom: 0.15rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.nk-footer__socials a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(106, 75, 47, 0.25);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.nk-footer__socials a:hover::after {
  transform: scaleX(0.6);
}

/* =========================================================
   16. WHATSAPP FLOAT + ACCESIBILIDAD
   ========================================================= */

/* WhatsApp — botón flotante derecha */
.whatsapp-float {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #25d366;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 26px rgba(37, 211, 102, 0.42);
  z-index: 9999;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
  text-decoration: none;
  /* Entrada suave al cargar */
  animation: waBounceIn 0.6s 1.2s var(--ease-out) both;
}

@keyframes waBounceIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
  fill: var(--color-white);
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 34px rgba(37, 211, 102, 0.55);
}

/* Botón de accesibilidad — izquierda */
.accessibility-button {
  position: fixed;
  left: 1.4rem;
  bottom: 1.4rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: rgba(248, 243, 233, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brown);
  box-shadow: var(--shadow-md);
  z-index: 9998;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.accessibility-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* =========================================================
   17. SCROLL REVEAL — animación de entrada
   (.is-visible agregada por el IntersectionObserver en JS)
   ========================================================= */

.reveal-section {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.75s var(--ease-out),
    transform 0.75s var(--ease-out);
}

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

/* Respeta "prefiero sin animaciones" */
@media (prefers-reduced-motion: reduce) {
  .reveal-section {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-media {
    animation: none;
    transform: scale(1);
  }

  .hero-content {
    animation: none;
  }

  .hero-search-wrapper {
    animation: none;
  }

  .explore-arrow {
    animation: none;
  }

  .offer-card {
    animation: none;
  }

  .whatsapp-float {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }

  .img-left,
  .img-right {
    animation: none;
  }
}

/* =========================================================
   18. CURSOR PERSONALIZADO — detalle nivel luxury
   (solo en dispositivos con mouse)
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
  /* Cursor exterior — anillo */
  .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(180, 147, 98, 0.6);
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition:
      width 0.28s var(--ease-out),
      height 0.28s var(--ease-out),
      border-color 0.2s,
      opacity 0.2s;
  }

  /* Cursor puntito interior */
  .cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-gold);
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition:
      transform 0.08s,
      background 0.2s;
  }

  /* Hover sobre elementos interactivos */
  body.cursor-hover .cursor-ring {
    width: 54px;
    height: 54px;
    border-color: rgba(180, 147, 98, 0.9);
  }

  body.cursor-hover .cursor-dot {
    transform: translate(-50%, -50%) scale(0);
  }
}

/* =========================================================
   19. TABLET @media 768px
   ========================================================= */

@media (min-width: 768px) {
  /* Trust badges: no scroll en tablet */
  .trust-badges {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Footer: 2 columnas */
  .nk-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.75rem 2.25rem;
  }

  .nk-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  /* Properties slider: cards más anchas */
  .property-card {
    flex: 0 0 300px;
  }
}

/* =========================================================
   20. DESKTOP @media 992px
   ========================================================= */

@media (min-width: 992px) {
  /* ----- Header desktop ----- */
  .header-inner {
    max-width: 100%;
    padding: 0 2.5rem;
    gap: 1.5rem;
  }

  /* Ocultar ícono hamburguesa y teléfono en desktop */
  .menu-toggle,
  .phone-button {
    display: none;
  }

  /* Ocultar logo del header en desktop (se muestra dentro del nav) */
  .logo--header {
    display: none;
  }

  /* Mostrar logo centrado dentro del nav en desktop */
  .nav-item--logo {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    border-bottom: none;
  }

  .nav-item--logo .logo {
    gap: 0.25rem;
  }

  /* Nav inline */
  .main-nav {
    position: static;
    display: flex !important; /* sobrescribe display:none mobile */
    align-items: center;
    justify-content: center;
    box-shadow: none;
    border-bottom: none;
    flex: 1;
    animation: none;
    transform: none;
    background: transparent;
  }

  .nav-list {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
  }

  .nav-item {
    border-bottom: none;
  }

  .nav-link {
    padding: 0.5rem 0.85rem;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    opacity: 0.85;
    transition:
      opacity var(--dur-fast),
      color var(--dur-fast);
  }

  .nav-link:hover {
    opacity: 1;
    background-color: transparent;
    color: var(--color-ink);
  }

  .header-actions {
    padding: 0;
    margin-left: 1.5rem;
    flex-direction: row;
    gap: 0.65rem;
  }

  .btn {
    font-size: 0.72rem;
    padding: 0.5rem 1.4rem;
  }

  /* ----- Hero desktop ----- */
  .hero {
    min-height: 90svh;
  }

  .hero-content {
    padding: 7rem var(--section-px) 10rem;
  }

  .hero-title {
    font-size: clamp(3.5rem, 7vw, 5.2rem);
  }

  /* Search card horizontal en desktop */
  .hero-search-wrapper {
    margin-top: -5rem;
    padding-bottom: 3rem;
  }

  .search-card {
    flex-direction: row;
    align-items: stretch;
  }

  .search-fields {
    flex: 1;
    flex-direction: row;
    padding: 1.5rem 2rem;
    gap: 2rem;
    align-items: flex-end;
  }

  .search-field {
    flex: 1;
  }

  .search-button-wrapper {
    border-top: none;
    border-left: 1px solid rgba(196,155,60,0.25);
    padding: 0;
    display: flex;
    align-items: stretch;
  }

  .btn-hero {
    width: auto;
    height: 100%;
    border-radius: 0 18px 18px 0;
    padding: 0 2.4rem;
    white-space: nowrap;
  }

  /* ----- Feature section desktop ----- */
  .feature-section {
    padding: 4rem 2.5rem 6rem;
  }

  .feature-container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
  }

  /* El divider ocupa el ancho completo del grid */
  .feature-divider {
    grid-column: 1 / -1;
    margin-bottom: 0.5rem;
  }

  .feature-title {
    font-size: clamp(2.4rem, 4vw, 3.2rem);
  }

  /* Imágenes aparecen en desktop */
  .feature-images {
    display: block;
    position: relative;
    width: 100%;
    min-height: 460px;
  }

  .feature-images .img {
    position: absolute;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    will-change: transform;
  }

  .img-left {
    width: 58%;
    height: 74%;
    left: 0;
    top: -30px;
    animation: floatImgA 6s var(--ease-in-out) infinite;
  }

  .img-right {
    width: 56%;
    height: 68%;
    right: 0;
    bottom: 60px;
    animation: floatImgB 8s var(--ease-in-out) infinite;
    animation-delay: 1.5s;
  }

  /* ----- Phrases rotator desktop ----- */
  .phrases-section {
    padding: 6.5rem 2.5rem;
  }

  .phrases-line {
    width: 200px;
  }

  /* ----- Featured properties desktop ----- */
  .properties-slider {
    justify-content: center;
    overflow-x: hidden;
    flex-wrap: wrap;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    gap: 1.5rem;
    padding-bottom: 0.5rem;
  }

  .property-card {
    flex: 0 0 280px;
  }

  /* ----- Experiencia desktop ----- */
  .nk-experience {
    padding: 6rem 2.5rem 7rem;
  }

  .nk-experience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    padding: 0;
    gap: 2.5rem;
  }

  .nk-experience-card {
    flex: none;
  }

  .nk-experience-media {
    aspect-ratio: 3 / 4; /* vertical editorial en desktop */
  }

  /* Animación stagger para las 3 cards */
  .nk-experience-card:nth-child(2) {
    transition-delay: 0.1s;
  }
  .nk-experience-card:nth-child(3) {
    transition-delay: 0.2s;
  }

  /* ----- Ofertas desktop ----- */
  .offers-section {
    padding: 5rem 2.5rem 6rem;
  }

  .offer-card {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    min-height: 460px;
  }

  .offer-media {
    padding: 2rem;
  }

  .offer-media img {
    height: 380px;
    border-radius: 14px;
  }

  .offer-content {
    padding: 2rem 2.5rem 2rem 0.5rem;
  }

  /* ----- Trust desktop ----- */
  .trust-section {
    padding: 6rem 0;
  }

  /* ----- Trust mobile scroll ----- */
  /* (solo activo en mobile, se sobreescribe en desktop) */
}

/* =========================================================
   21. WIDE @media 1100px — footer 4 columnas
   ========================================================= */

@media (min-width: 1100px) {
  .nk-footer {
    padding: 5.5rem 2.5rem 2.5rem;
  }

  .nk-footer__grid {
    grid-template-columns: 1.25fr 1fr 1fr 1fr;
    gap: 2.75rem;
  }
}

/* =========================================================
   MOBILE ONLY — trust scroll horizontal
   ========================================================= */

@media (max-width: 640px) {
  .trust-section {
    padding: 4rem 0;
  }

  .trust-container {
    text-align: center;
  }

  .trust-badges {
    flex-direction: column;
    align-items: stretch;
    padding: 0 1.5rem;
    gap: 0.75rem;
  }

  .trust-badge {
    width: 100%;
  }
}