/* ==========================================================================
   Go Stays Premium — Design System
   Ultra-luxury, mobile-first, minimal chrome, strategic red accent.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Palette */
  --color-black: #0b0b0c;
  --color-charcoal: #17171a;
  --color-charcoal-soft: #232326;
  --color-white: #ffffff;
  --color-off-white: #f7f6f3;
  --color-bone: #fbfbfa;
  --color-line: #e7e4de;

  --color-gold: #c9a86a;
  --color-gold-soft: rgba(201, 168, 106, 0.14);

  --color-red: #bc1622;
  --color-red-dark: #8f0f18;
  --color-red-soft: rgba(188, 22, 34, 0.08);

  --color-ink: #17171a;
  --color-ink-muted: #6b6a67;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;

  /* Motion */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.3s;
  --duration-med: 0.6s;
  --duration-slow: 0.9s;

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --container-width: 1200px;
  --header-height: 76px;
}

/* ---------------------------------- Reset --------------------------------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}

p {
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

@media (min-width: 640px) {
  .container {
    padding-inline: var(--space-lg);
  }
}

/* ---------------------------------- Header --------------------------------- */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--header-height);
  background: rgba(17, 17, 20, 0.45);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background var(--duration-fast) var(--ease-premium);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

@media (max-width: 640px) {
  :root {
    --header-height: 64px;
  }

  .brand {
    font-size: 1rem;
  }
}

.brand {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  color: var(--color-white);
  font-weight: 600;
}

.brand-accent {
  color: var(--color-gold);
}

.brand-footer {
  color: var(--color-white);
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  z-index: 10000;
}

@media (max-width: 899px) {
  .nav-toggle {
    position: fixed;
    inset-block-start: 22px;
    inset-inline-end: var(--space-sm);
  }
}

.nav-toggle span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform var(--duration-fast) var(--ease-premium), opacity var(--duration-fast) var(--ease-premium);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Menú móvil — overlay de pantalla completa (ultra-lujo) */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(10, 10, 10, 0.95);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition:
    opacity var(--duration-med) var(--ease-premium),
    transform var(--duration-med) var(--ease-premium),
    visibility 0s linear var(--duration-med);
}

.site-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--duration-med) var(--ease-premium),
    transform var(--duration-med) var(--ease-premium),
    visibility 0s linear 0s;
}

.nav-link {
  font-size: 1.7rem;
  font-family: var(--font-display);
  color: var(--color-off-white);
  letter-spacing: 0.02em;
  transition: color var(--duration-fast) var(--ease-premium);
}

@media (max-width: 899px) {
  .nav-link {
    margin: 20px 0;
  }
}

.nav-link:hover {
  color: var(--color-gold);
}

body.nav-open {
  overflow: hidden;
}

/* ---------------------------------- Currency & language selectors --------------------------------- */

.selector-group {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

@media (max-width: 899px) {
  .selector-group {
    flex-direction: column;
    margin-block-start: var(--space-sm);
  }
}

.currency-select,
.language-select {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 2px;
}

.currency-option,
.language-option {
  padding: 0.32rem 0.65rem;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.65);
  background: none;
  border: none;
  border-radius: 999px;
  transition: background var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium);
}

.currency-option.is-active,
.language-option.is-active {
  background: var(--color-gold);
  color: var(--color-black);
}

/* ---------------------------------- Discounts --------------------------------- */

.discount-badge {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-end: var(--space-sm);
  background: linear-gradient(135deg, var(--color-red-dark), var(--color-black));
  color: var(--color-gold);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border-radius: 2px;
  border: 1px solid rgba(201, 168, 106, 0.45);
  z-index: 2;
}

.discount-badge--static {
  position: static;
  display: inline-block;
  margin-block-end: 0.5rem;
  width: fit-content;
}

.price-original {
  text-decoration: line-through;
  font-weight: 400;
  font-size: 0.82em;
  margin-inline-end: 0.4rem;
  color: var(--color-ink-muted);
}

.price-original--dark {
  color: rgba(245, 245, 245, 0.45);
}

@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    position: static;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .selector-group {
    flex-direction: row;
  }

  .nav-link {
    font-size: 0.95rem;
    margin: 0;
  }
}

/* ---------------------------------- Nav "Más" dropdown (desktop) --------------------------------- */
/* En móvil el wrapper no debe existir como caja: sus enlaces se comportan
   como cualquier otro .nav-link del menú de pantalla completa. */

.nav-more {
  display: contents;
}

.nav-more-toggle {
  display: none;
}

.nav-more-panel {
  display: contents;
}

@media (min-width: 900px) {
  .nav-more {
    display: flex;
    position: relative;
    align-items: center;
  }

  .nav-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-off-white);
    background: none;
    border: none;
    padding: 0;
    transition: color var(--duration-fast) var(--ease-premium);
  }

  .nav-more-toggle:hover,
  .nav-more-toggle[aria-expanded="true"] {
    color: var(--color-gold);
  }

  .nav-more-caret {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-3px);
    transition: transform var(--duration-fast) var(--ease-premium);
  }

  .nav-more-toggle[aria-expanded="true"] .nav-more-caret {
    transform: rotate(225deg) translateY(3px);
  }

  .nav-more-panel {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset-block-start: calc(100% + 22px);
    inset-inline-end: 0;
    min-width: 210px;
    padding: 0.6rem;
    background: rgba(11, 11, 12, 0.92);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.65);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity var(--duration-fast) var(--ease-premium),
      transform var(--duration-fast) var(--ease-premium),
      visibility 0s linear var(--duration-fast);
  }

  .nav-more.is-open .nav-more-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
      opacity var(--duration-fast) var(--ease-premium),
      transform var(--duration-fast) var(--ease-premium),
      visibility 0s linear 0s;
  }

  .nav-more-panel .nav-link {
    font-size: 0.88rem;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-sm);
    color: rgba(245, 245, 245, 0.82);
    white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium);
  }

  .nav-more-panel .nav-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--color-gold);
  }
}

/* ---------------------------------- Buttons --------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 2.1rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition:
    transform var(--duration-fast) var(--ease-premium),
    box-shadow var(--duration-fast) var(--ease-premium),
    background var(--duration-fast) var(--ease-premium),
    border-color var(--duration-fast) var(--ease-premium);
  will-change: transform;
}

.btn-primary {
  background: var(--color-red);
  color: var(--color-white);
  box-shadow: 0 8px 24px -8px rgba(188, 22, 34, 0.55);
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--color-red-dark);
  box-shadow: 0 14px 30px -10px rgba(188, 22, 34, 0.65);
}

.btn-ghost {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.35);
}

.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.btn-hero {
  padding: 1.1rem 2.6rem;
  font-size: 1rem;
  border: 1px solid rgba(201, 168, 106, 0.4);
}

.btn-hero:hover {
  box-shadow:
    0 0 0 1px rgba(201, 168, 106, 0.55),
    0 0 40px 4px rgba(201, 168, 106, 0.35),
    0 14px 30px -10px rgba(188, 22, 34, 0.65);
}

/* ---------------------------------- Hero --------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-charcoal);
}

.hero-media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(201, 168, 106, 0.12), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(188, 22, 34, 0.16), transparent 45%),
    linear-gradient(160deg, #101012 0%, #1c1c1f 55%, #0b0b0c 100%);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.45) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-2xl);
  color: var(--color-white);
}

.hero-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-block-end: var(--space-sm);
}

.hero-title {
  font-size: clamp(2.4rem, 8vw, 4.6rem);
  color: var(--color-white);
  max-width: 16ch;
}

.hero-title em {
  color: var(--color-gold);
  font-style: italic;
}

.hero-subtitle {
  margin-block-start: var(--space-md);
  max-width: 46ch;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 300;
}

.hero-actions {
  margin-block-start: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ---------------------------------- Trust Bar --------------------------------- */

.trust-bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 3;
  background: rgba(11, 11, 12, 0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-block-start: 1px solid rgba(255, 255, 255, 0.08);
}

.trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  padding-block: var(--space-sm);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.trust-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-gold);
  opacity: 0.85;
}

@media (max-width: 640px) {
  .trust-bar-inner {
    gap: var(--space-xs) var(--space-md);
  }

  .trust-item {
    font-size: 0.62rem;
  }
}

/* ---------------------------------- Sections --------------------------------- */

.section {
  padding-block: var(--space-2xl);
}

.section-catalog {
  background: var(--color-off-white);
}

.section-heading {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: var(--space-xl);
}

.section-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-red);
  font-weight: 600;
  margin-block-end: var(--space-xs);
}

.section-title {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  color: var(--color-ink);
}

.section-subtitle {
  margin-block-start: var(--space-sm);
  color: var(--color-ink-muted);
  font-size: 1.02rem;
  font-weight: 300;
}

/* ---------------------------------- El Estándar (Bento) --------------------------------- */

.section-standard {
  background:
    radial-gradient(circle at 12% 0%, rgba(201, 168, 106, 0.08), transparent 45%),
    radial-gradient(circle at 90% 100%, rgba(188, 22, 34, 0.12), transparent 45%),
    var(--color-black);
}

.section-standard .section-eyebrow {
  color: var(--color-gold);
}

.section-standard .section-title {
  color: var(--color-white);
}

.section-standard .section-subtitle {
  color: rgba(255, 255, 255, 0.6);
  max-width: 52ch;
  margin-inline: auto;
}

.standard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .standard-grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .standard-card:nth-child(1) { grid-column: span 7; }
  .standard-card:nth-child(2) { grid-column: span 5; }
  .standard-card:nth-child(3) { grid-column: span 5; }
  .standard-card:nth-child(4) { grid-column: span 7; }
}

.standard-card {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    transform var(--duration-med) var(--ease-premium),
    border-color var(--duration-med) var(--ease-premium),
    background var(--duration-med) var(--ease-premium);
  will-change: transform;
}

.standard-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(201, 168, 106, 0.4);
}

.standard-icon {
  width: 30px;
  height: 30px;
  color: var(--color-red);
  margin-block-end: var(--space-md);
  transition: color var(--duration-med) var(--ease-premium);
}

.standard-card:hover .standard-icon {
  color: var(--color-gold);
}

.standard-card h3 {
  font-size: 1.2rem;
  color: var(--color-white);
  margin-block-end: 0.5rem;
}

.standard-card p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.6;
}

/* ---------------------------------- Properties Grid --------------------------------- */

.properties-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .properties-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .properties-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.property-card--clickable {
  cursor: pointer;
}

.property-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(23, 23, 26, 0.04);
  transition:
    transform var(--duration-med) var(--ease-premium),
    box-shadow var(--duration-med) var(--ease-premium);
  will-change: transform;
}

.property-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -20px rgba(23, 23, 26, 0.28);
}

.property-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, #2a2a2d, #101012);
}

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

.property-card:hover .property-media img {
  transform: scale(1.06);
}

.property-media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
}

.property-badge {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  background: rgba(11, 11, 12, 0.55);
  backdrop-filter: blur(6px);
  color: var(--color-white);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 168, 106, 0.5);
}

.property-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.property-location {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.property-name {
  font-size: 1.3rem;
  color: var(--color-ink);
}

.property-description {
  color: var(--color-ink-muted);
  font-size: 0.92rem;
  font-weight: 300;
  flex: 1;
}

/* Escudo anti-rotura de tarjetas: trunca la descripción corta a 2 líneas
   sin importar su longitud, para que todas las tarjetas del catálogo
   midan lo mismo. Va scoped a .property-card porque property.html
   reutiliza la misma clase .property-description para la descripción
   larga completa de la vista de detalle, que no debe truncarse. */
.property-card .property-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.property-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-block-start: var(--space-xs);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-line);
}

.property-price {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-red);
}

.property-price span {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-ink-muted);
  font-weight: 400;
  margin-inline-start: 0.3rem;
}

.property-link {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-ink);
  position: relative;
  padding-block-end: 2px;
  border-bottom: 1px solid var(--color-ink);
  transition: color var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium);
}

.property-link:hover {
  color: var(--color-red);
  border-color: var(--color-red);
}

/* Skeleton loading state */

.property-card.is-skeleton {
  pointer-events: none;
}

.skeleton-block {
  background: linear-gradient(100deg, #1c1c1e 25%, #37373c 50%, #1c1c1e 75%);
  background-size: 200% 100%;
  animation: skeletonShine 1.6s ease-in-out infinite, skeletonPulse 1.8s ease-in-out infinite;
}

.property-media.skeleton-block {
  background: linear-gradient(100deg, #101012 25%, #2a2a2d 50%, #101012 75%);
  background-size: 200% 100%;
}

@keyframes skeletonShine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.skeleton-line {
  height: 0.85rem;
  border-radius: 999px;
  margin-block: 0.4rem;
}

/* Amenidades principales en la tarjeta de catálogo */

.property-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.property-amenities li {
  position: relative;
  padding-inline-start: 0.85rem;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  color: var(--color-ink-muted);
}

.property-amenities li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-gold);
}

.properties-empty,
.properties-error {
  text-align: center;
  color: var(--color-ink-muted);
  margin-block-start: var(--space-lg);
}

.properties-error {
  color: var(--color-red);
}

/* ---------------------------------- La Experiencia Go Stays --------------------------------- */

.section-experiences {
  background: var(--color-off-white);
}

.experiences-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .experiences-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .experiences-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tarjeta editorial full-bleed: la fotografía ES la tarjeta (estilo
   lookbook Aman/LVMH), con el copy flotando sobre un scrim de gradiente
   en vez de vivir en un panel blanco debajo. Los grados de libertad del
   tilt 3D (lux.js, TILT_SELECTOR incluye .experience-card) y el stagger
   de entrada (.reveal) ya cablean a esta misma clase raíz. */
.experience-card {
  position: relative;
  display: block;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #2a2a2d, #101012);
  box-shadow: 0 1px 2px rgba(11, 11, 12, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform var(--duration-med) var(--ease-premium),
    box-shadow var(--duration-med) var(--ease-premium),
    border-color var(--duration-med) var(--ease-premium);
}

.experience-card:hover,
.experience-card:focus-visible {
  box-shadow: 0 40px 70px -24px rgba(11, 11, 12, 0.55);
  border-color: rgba(201, 168, 106, 0.45);
}

.experience-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.experience-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 0.7s var(--ease-premium), filter 0.7s var(--ease-premium);
}

.experience-card:hover .experience-media img,
.experience-card:focus-visible .experience-media img {
  transform: scale(1.09);
}

/* Scrim: transparente arriba, negro sólido abajo — garantiza contraste
   AA del texto blanco sin necesidad de opacar toda la foto. */
.experience-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(11, 11, 12, 0) 35%,
    rgba(11, 11, 12, 0.55) 66%,
    rgba(11, 11, 12, 0.92) 100%
  );
  transition: background var(--duration-med) var(--ease-premium);
  pointer-events: none;
}

.experience-card:hover::after,
.experience-card:focus-visible::after {
  background: linear-gradient(
    180deg,
    rgba(11, 11, 12, 0.05) 20%,
    rgba(11, 11, 12, 0.65) 58%,
    rgba(11, 11, 12, 0.94) 100%
  );
}

.experience-media-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 15%, rgba(201, 168, 106, 0.16), transparent 55%),
    radial-gradient(circle at 85% 90%, rgba(188, 22, 34, 0.14), transparent 50%),
    linear-gradient(160deg, #1c1c1f 0%, #101012 100%);
  color: var(--color-gold);
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
}

.experience-kicker {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  background: rgba(11, 11, 12, 0.45);
  border: 1px solid rgba(201, 168, 106, 0.5);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-gold);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.experience-content {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--color-white);
}

.experience-name {
  font-size: 1.28rem;
  line-height: 1.25;
  color: var(--color-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.experience-description {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Progressive enhancement: en dispositivos sin hover fino (táctiles) la
   descripción queda siempre visible; en desktop se revela con la tarjeta
   para mantener el "gancho visual" limpio hasta la interacción. */
@media (hover: hover) and (pointer: fine) {
  .experience-description {
    max-height: 0;
    opacity: 0;
    margin-block-end: -0.5rem;
    transition: max-height var(--duration-med) var(--ease-premium),
      opacity var(--duration-fast) var(--ease-premium),
      margin var(--duration-med) var(--ease-premium);
  }

  .experience-card:hover .experience-description,
  .experience-card:focus-visible .experience-description {
    max-height: 3.6rem;
    opacity: 1;
    margin-block-end: 0;
  }
}

.experience-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block-start: 0.65rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.18);
}

.experience-price {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-gold);
}

.experience-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  transition: gap var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium);
}

.experience-cta svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-fast) var(--ease-premium);
}

.experience-card:hover .experience-cta,
.experience-card:focus-visible .experience-cta {
  color: var(--color-gold);
}

.experience-card:hover .experience-cta svg,
.experience-card:focus-visible .experience-cta svg {
  transform: translateX(3px);
}

/* ---------------------------------- Go Stays Black (banda CTA genérica) --------------------------------- */
/* Reutilizada por about.html como cierre de página (CTA "Descubra la
   Colección"), independiente del bloque del Círculo Privado de la home. */

.section-vip {
  background:
    radial-gradient(circle at 15% 20%, rgba(201, 168, 106, 0.1), transparent 50%),
    radial-gradient(circle at 85% 85%, rgba(188, 22, 34, 0.14), transparent 50%),
    var(--color-charcoal);
}

.vip-inner {
  max-width: 640px;
  text-align: center;
}

.vip-inner .section-eyebrow {
  color: var(--color-gold);
  text-align: center;
}

/* ---------------------------------- Círculo Privado (Colección Oculta) --------------------------------- */

.section-vip-circle {
  position: relative;
  overflow: hidden;
  background: var(--color-black);
  padding-block: var(--space-xl);
}

/* Atmósfera: dos "orbes" dorado/rojo que respiran muy lento detrás del
   glass card, más una textura de ruido sutil para que el negro nunca se
   sienta plano — igual espíritu premium que el resto de bloques oscuros. */
.vip-circle-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.vip-circle-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  animation: vip-orb-drift 14s var(--ease-premium) infinite alternate;
}

.vip-circle-orb--1 {
  width: 42vw;
  height: 42vw;
  max-width: 560px;
  max-height: 560px;
  inset-inline-start: -10%;
  inset-block-start: -12%;
  background: radial-gradient(circle, rgba(201, 168, 106, 0.28), transparent 70%);
}

.vip-circle-orb--2 {
  width: 36vw;
  height: 36vw;
  max-width: 480px;
  max-height: 480px;
  inset-inline-end: -8%;
  inset-block-end: -14%;
  background: radial-gradient(circle, rgba(188, 22, 34, 0.22), transparent 70%);
  animation-delay: -6s;
}

.vip-circle-noise {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes vip-orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(4%, 6%) scale(1.08); }
}

.vip-circle-container {
  position: relative;
  z-index: 1;
}

/* El glass card: fondo semitransparente + blur real (glassmorphism), borde
   con gradiente dorado que se percibe como un marco tallado, y un "shine"
   diagonal que recorre la tarjeta una vez al entrar en pantalla. */
.vip-glass-card {
  position: relative;
  border-radius: 28px;
  padding: clamp(2rem, 4vw, 3.25rem);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

/* Specificidad ".vip-glass-card.reveal" a propósito: debe ganarle a la
   regla genérica ".reveal" (que declara su propio opacity/transform más
   abajo en la hoja) para conservar el scale() de entrada del glass card. */
.vip-glass-card.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition:
    opacity var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium);
}

.vip-glass-card.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.vip-glass-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(242, 226, 184, 0.55), rgba(201, 168, 106, 0.08) 35%, rgba(201, 168, 106, 0.08) 65%, rgba(242, 226, 184, 0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.vip-glass-shine {
  position: absolute;
  inset-block-start: -60%;
  inset-inline-start: -20%;
  width: 45%;
  height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: rotate(12deg);
  pointer-events: none;
  opacity: 0;
}

.vip-glass-card.is-visible .vip-glass-shine {
  animation: vip-shine-sweep 1.6s var(--ease-premium) 0.4s 1;
}

@keyframes vip-shine-sweep {
  0%   { opacity: 0; transform: translateX(-40%) rotate(12deg); }
  15%  { opacity: 1; }
  60%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateX(320%) rotate(12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .vip-glass-card,
  .vip-glass-shine,
  .vip-circle-orb {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}

.vip-card-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .vip-card-grid {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
  }
}

.vip-lock-badge {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 106, 0.4);
  background: rgba(201, 168, 106, 0.08);
  color: var(--color-gold);
  margin-block-end: var(--space-sm);
}

.vip-lock-badge svg {
  width: 20px;
  height: 20px;
}

.vip-eyebrow {
  color: var(--color-gold);
}

.vip-title {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  color: var(--color-white);
  margin-block-start: var(--space-xs);
}

.vip-subtitle {
  margin-block-start: var(--space-sm);
  color: rgba(255, 255, 255, 0.68);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
}

.vip-perks {
  list-style: none;
  margin-block-start: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.vip-perk {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
}

.vip-perk svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: var(--color-gold);
}

.vip-scarcity {
  margin-block-start: var(--space-md);
  padding-inline-start: 0.9rem;
  border-inline-start: 2px solid rgba(201, 168, 106, 0.4);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.6;
  max-width: 42ch;
}

.vip-card-form {
  position: relative;
}

.vip-form {
  flex-direction: column;
  align-items: stretch;
  gap: 1.1rem;
  transition: opacity var(--duration-med) var(--ease-premium), transform var(--duration-med) var(--ease-premium);
}

.vip-form:not([hidden]) {
  display: flex;
}

.vip-form-fields {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vip-field-group {
  position: relative;
}

.vip-input {
  width: 100%;
  min-width: 0;
  padding: 0.95rem 2.6rem 0.95rem 1.3rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.045);
  color: var(--color-white);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color var(--duration-fast) var(--ease-premium), background var(--duration-fast) var(--ease-premium);
}

.vip-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.vip-input:focus {
  outline: none;
  border-color: var(--color-gold);
  background: rgba(255, 255, 255, 0.075);
}

.vip-field-group.is-valid .vip-input {
  border-color: rgba(126, 211, 158, 0.55);
}

.vip-field-group.is-invalid .vip-input {
  border-color: rgba(188, 22, 34, 0.75);
}

.vip-field-check {
  position: absolute;
  inset-inline-end: 0.95rem;
  inset-block-start: 50%;
  transform: translateY(-50%) scale(0.6);
  width: 18px;
  height: 18px;
  color: #7ed39e;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium);
  pointer-events: none;
}

.vip-field-group.is-valid .vip-field-check {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.vip-field-error {
  display: block;
  min-height: 1.1em;
  margin-block-start: 0.35rem;
  padding-inline-start: 0.2rem;
  color: #ff9c9c;
  font-size: 0.78rem;
}

@keyframes vip-shake-kf {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(3px); }
}

.vip-field-group.vip-shake .vip-input {
  animation: vip-shake-kf 0.4s var(--ease-premium);
}

@media (prefers-reduced-motion: reduce) {
  .vip-field-group.vip-shake .vip-input {
    animation: none;
  }
}

.vip-submit {
  flex-shrink: 0;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding-inline: 1.8rem;
}

.vip-submit-icon {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast) var(--ease-premium);
}

.vip-submit:hover .vip-submit-icon {
  transform: translateX(3px);
}

.vip-privacy-note {
  margin-block-start: 0.75rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}

.vip-feedback {
  margin-block-start: var(--space-sm);
  color: var(--color-gold);
  font-size: 0.9rem;
  text-align: center;
}

/* Estado "desbloqueado": el formulario se desvanece y cede el lugar a la
   llave dorada que gira suavemente, como si abriera una cerradura. */

.vip-form.is-unlocking {
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
}

.vip-unlock {
  flex-direction: column;
  align-items: center;
  margin-block-start: var(--space-lg);
}

.vip-unlock:not([hidden]) {
  display: flex;
}

.vip-unlock-key {
  width: 56px;
  height: 56px;
  animation: vip-key-turn 1.1s var(--ease-premium) both;
}

.vip-unlock-title {
  margin-block-start: var(--space-sm);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-white);
  opacity: 0;
  animation: vip-unlock-fade-in var(--duration-med) var(--ease-premium) 0.5s forwards;
}

.vip-unlock-subtitle {
  margin-block-start: 0.35rem;
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
  opacity: 0;
  animation: vip-unlock-fade-in var(--duration-med) var(--ease-premium) 0.75s forwards;
}

@keyframes vip-key-turn {
  0% {
    opacity: 0;
    transform: rotate(-45deg) scale(0.7);
  }
  55% {
    opacity: 1;
    transform: rotate(20deg) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes vip-unlock-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vip-unlock-key {
    animation: none;
  }

  .vip-unlock-title,
  .vip-unlock-subtitle {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Estado "ya eres miembro": el email ya existe en el Círculo Privado, así
   que en vez de repetir el desbloqueo se revela un diamante minimalista con
   la invitación a escribirle al conserje por WhatsApp. Misma coreografía y
   paleta dorada/champagne que `.vip-unlock` para que se sienta como la
   misma familia de animaciones. */

.vip-exists {
  flex-direction: column;
  align-items: center;
  margin-block-start: var(--space-lg);
  text-align: center;
}

.vip-exists:not([hidden]) {
  display: flex;
}

.vip-exists-diamond {
  width: 52px;
  height: 52px;
  animation: vip-diamond-reveal 1.1s var(--ease-premium) both;
}

.vip-exists-title {
  margin-block-start: var(--space-sm);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-white);
  opacity: 0;
  animation: vip-unlock-fade-in var(--duration-med) var(--ease-premium) 0.5s forwards;
}

.vip-exists-subtitle {
  margin-block-start: 0.35rem;
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
  opacity: 0;
  animation: vip-unlock-fade-in var(--duration-med) var(--ease-premium) 0.75s forwards;
}

.vip-exists-cta {
  margin-block-start: var(--space-md);
  opacity: 0;
  animation: vip-unlock-fade-in var(--duration-med) var(--ease-premium) 1s forwards;
}

@keyframes vip-diamond-reveal {
  0% {
    opacity: 0;
    transform: scale(0.7) rotate(-8deg);
  }
  55% {
    opacity: 1;
    transform: scale(1.08) rotate(3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vip-exists-diamond {
    animation: none;
  }

  .vip-exists-title,
  .vip-exists-subtitle,
  .vip-exists-cta {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------- Reseñas Visuales (Prueba Social) --------------------------------- */

/* Fondo negro profundo con la misma "atmósfera" (vignette dorado muy sutil)
   que el resto de bloques oscuros del sitio (.section-standard,
   .section-vip-circle), para que esta sección se sienta parte de la misma
   familia visual en vez de un módulo insertado a la fuerza. */
.section-visual-reviews {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 168, 106, 0.08), transparent 55%),
    var(--color-black);
  padding-inline: 0;
}

.section-visual-reviews .section-eyebrow {
  color: var(--color-gold);
}

.section-visual-reviews .section-title {
  color: var(--color-white);
}

.section-visual-reviews .section-subtitle {
  color: rgba(255, 255, 255, 0.62);
}

.section-visual-reviews .container {
  position: relative;
  z-index: 1;
  padding-inline: var(--space-sm);
}

@media (min-width: 900px) {
  .section-visual-reviews .container {
    padding-inline: var(--space-lg);
  }
}

.visual-reviews-carousel-wrap {
  position: relative;
  z-index: 1;
  margin-block-start: var(--space-xl);
}

/* Gap generoso (24-32px, según viewport) + scroll-snap "mandatory": el
   navegador siempre reposa el carrusel con una tarjeta perfectamente
   alineada al borde, nunca a medias, aunque el usuario suelte el gesto de
   scroll a mitad de camino. */
.visual-reviews-carousel {
  display: flex;
  gap: clamp(24px, 2.6vw, 32px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-sm);
  padding: 0.5rem var(--space-sm) 1.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

@media (min-width: 900px) {
  .visual-reviews-carousel {
    padding-inline: var(--space-lg);
    scroll-padding-inline: var(--space-lg);
  }
}

.visual-reviews-carousel::-webkit-scrollbar {
  display: none;
}

/* Ancho de tarjeta expresado como % del viewport del carrusel: matemática
   deliberada para que la última tarjeta visible quede siempre "cortada" a
   la mitad e invite al scroll, en vez de encajar un número entero de
   tarjetas por casualidad.
   Móvil:  ~1 tarjeta entera + ~15% de la siguiente asomándose.
   Tablet: ~2 tarjetas + una asomándose.
   Desktop: 3.5–4 tarjetas visibles. */
.visual-review-slide {
  position: relative;
  flex: 0 0 auto;
  width: 85%;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid rgba(201, 168, 106, 0.16);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  padding: 0;
  transition:
    transform var(--duration-fast) var(--ease-premium),
    box-shadow var(--duration-fast) var(--ease-premium),
    border-color var(--duration-fast) var(--ease-premium);
}

@media (min-width: 480px) {
  .visual-review-slide { width: 62%; }
}

@media (min-width: 640px) {
  .visual-review-slide { width: 45%; }
}

@media (min-width: 900px) {
  .visual-review-slide { width: 30%; }
}

@media (min-width: 1200px) {
  .visual-review-slide { width: 26%; }
}

.visual-review-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform var(--duration-med) var(--ease-premium);
}

/* Hover premium: elevación levísima + el borde dorado se enciende como si
   la tarjeta reaccionara al cursor, señalando con sutileza que es
   clicable (abre el Lightbox). */
.visual-review-slide:hover,
.visual-review-slide:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(201, 168, 106, 0.55);
  box-shadow:
    0 22px 44px -18px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(201, 168, 106, 0.12),
    0 0 24px rgba(201, 168, 106, 0.18);
  outline: none;
}

.visual-review-slide:hover img {
  transform: scale(1.05);
}

.visual-review-slide-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(255, 255, 255, 0.18), transparent 45%);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-premium);
  pointer-events: none;
}

.visual-review-slide:hover .visual-review-slide-shine {
  opacity: 1;
}

.visual-reviews-arrow {
  display: none;
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 106, 0.24);
  background: rgba(23, 23, 26, 0.85);
  backdrop-filter: blur(8px);
  color: var(--color-white);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5);
  transition: opacity var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium);
}

.visual-reviews-arrow svg { width: 18px; height: 18px; }

.visual-reviews-arrow--prev { inset-inline-start: 0.25rem; }
.visual-reviews-arrow--next { inset-inline-end: 0.25rem; }

.visual-reviews-arrow.is-disabled {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 900px) {
  .visual-reviews-arrow {
    display: flex;
  }

  .visual-reviews-arrow:hover {
    transform: translateY(-50%) scale(1.08);
    border-color: rgba(201, 168, 106, 0.55);
  }
}

/* ---------------------------- Lightbox premium (pantalla completa) ---------------------------- */

.visual-reviews-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-med) var(--ease-premium), visibility 0s linear var(--duration-med);
}

.visual-reviews-lightbox.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-med) var(--ease-premium);
}

.visual-reviews-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 12, 0.94);
  backdrop-filter: blur(6px);
}

.visual-reviews-lightbox-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.visual-reviews-lightbox-stage {
  position: relative;
  max-width: min(90vw, 720px);
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.94);
  opacity: 0;
  transition: transform var(--duration-med) var(--ease-premium), opacity var(--duration-med) var(--ease-premium);
}

.visual-reviews-lightbox.is-visible .visual-reviews-lightbox-stage {
  transform: scale(1);
  opacity: 1;
}

.visual-reviews-lightbox-stage img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.7);
}

.visual-reviews-lightbox-close {
  position: absolute;
  top: var(--space-sm);
  inset-inline-end: var(--space-sm);
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--color-white);
  transition: background var(--duration-fast) var(--ease-premium);
}

.visual-reviews-lightbox-close:hover { background: rgba(255, 255, 255, 0.18); }
.visual-reviews-lightbox-close svg { width: 18px; height: 18px; }

.visual-reviews-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--color-white);
  transition: background var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium);
}

.visual-reviews-lightbox-nav:hover { background: rgba(255, 255, 255, 0.18); }
.visual-reviews-lightbox-nav svg { width: 20px; height: 20px; }

.visual-reviews-lightbox-nav--prev { inset-inline-start: var(--space-xs); }
.visual-reviews-lightbox-nav--next { inset-inline-end: var(--space-xs); }

@media (min-width: 900px) {
  .visual-reviews-lightbox-nav--prev { inset-inline-start: var(--space-lg); }
  .visual-reviews-lightbox-nav--next { inset-inline-end: var(--space-lg); }
}

.visual-reviews-lightbox-counter {
  position: absolute;
  bottom: var(--space-sm);
  inset-inline: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

@media (prefers-reduced-motion: reduce) {
  .visual-review-slide,
  .visual-review-slide img,
  .visual-reviews-lightbox,
  .visual-reviews-lightbox-stage {
    transition: none;
  }
}

/* ---------------------------------- FAQ --------------------------------- */

.section-faq {
  background: var(--color-black);
}

.section-faq .section-eyebrow {
  color: var(--color-gold);
}

.section-faq .section-title {
  color: var(--color-white);
}

.faq-container {
  max-width: 780px;
}

.faq-list {
  margin-block-start: var(--space-lg);
  border-block-start: 1px solid #333;
}

.faq-item {
  border-block-end: 1px solid #333;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 1.4rem;
  background: none;
  border: none;
  color: var(--color-white);
  text-align: start;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
}

.faq-question:hover span:first-child {
  color: var(--color-gold);
}

.faq-question span:first-child {
  transition: color var(--duration-fast) var(--ease-premium);
}

.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: transform var(--duration-med) var(--ease-premium);
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--color-gold);
}

.faq-icon::before {
  inset-inline-start: 0;
  inset-block-start: 50%;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.faq-icon::after {
  inset-inline-start: 50%;
  inset-block-start: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
}

.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-med) var(--ease-premium);
}

.faq-answer-inner {
  overflow: hidden;
}

.faq-answer-inner p {
  padding-block-end: 1.4rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.7;
  max-width: 62ch;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--duration-med) var(--ease-premium), transform var(--duration-med) var(--ease-premium);
}

.faq-item.is-open .faq-answer-wrap {
  grid-template-rows: 1fr;
}

.faq-item.is-open .faq-answer-inner p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

/* ---------------------------------- Footer --------------------------------- */

.site-footer {
  background: var(--color-black);
  color: rgba(255, 255, 255, 0.6);
  padding-block: var(--space-lg);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
  text-align: center;
}

@media (min-width: 640px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: start;
  }
}

.footer-copy {
  font-size: 0.85rem;
}

/* ---------------------------------- Scroll Reveal --------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-slow) var(--ease-premium), transform var(--duration-slow) var(--ease-premium);
}

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

.properties-grid .reveal:nth-child(2n) {
  transition-delay: 0.08s;
}

.properties-grid .reveal:nth-child(3n) {
  transition-delay: 0.16s;
}

/* ==========================================================================
   Property Detail Page
   ========================================================================== */

/* Nav simple no colapsable (usada en checkout.html) */
.site-nav--static {
  position: static;
  width: auto;
  height: auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  gap: var(--space-md);
  padding-block: 0;
  z-index: auto;
}

.site-nav--static .nav-link {
  font-size: 0.9rem;
  margin: 0;
}

body.property-page {
  background: var(--color-bone);
}

.property-page main {
  min-height: 100vh;
}

/* Loading state */

.property-loading {
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: var(--color-off-white);
}

.property-loading:not([hidden]) {
  display: flex;
}

.loading-shimmer {
  width: min(90vw, 420px);
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--color-line) 30%, var(--color-gold-soft) 50%, var(--color-line) 70%);
  background-size: 200% 100%;
  animation: skeletonShine 1.4s ease-in-out infinite;
}

/* Error state */

.property-error-state {
  min-height: 100vh;
  align-items: center;
  background: var(--color-off-white);
}

.property-error-state:not([hidden]) {
  display: flex;
}

.error-content {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--space-2xl);
}

.error-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-red);
  font-weight: 600;
  margin-block-end: var(--space-sm);
}

.error-title {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  margin-block-end: var(--space-md);
}

.error-copy {
  color: var(--color-ink-muted);
  font-weight: 300;
  margin-block-end: var(--space-lg);
}

/* Hero gallery — carrusel táctil mobile-first, Bento Grid en desktop */

.property-hero {
  background: var(--color-charcoal);
}

.property-hero-gallery-wrap {
  position: relative;
}

.property-hero-gallery {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 0;
  height: 350px;
  scrollbar-width: none;
}

.property-hero-gallery::-webkit-scrollbar {
  display: none;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2a2a2d, #101012);
  cursor: zoom-in;
  flex: 0 0 100vw;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@keyframes kenBurns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}

.gallery-item img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-premium);
  animation: kenBurns 15s infinite alternate ease-in-out;
}

.gallery-item:hover img {
  animation-play-state: paused;
  transform: scale(1.045);
}

.gallery-more-badge {
  position: absolute;
  inset-block-end: var(--space-sm);
  inset-inline-end: var(--space-sm);
  background: rgba(11, 11, 12, 0.6);
  backdrop-filter: blur(6px);
  color: var(--color-white);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.gallery-view-all-btn {
  display: none;
}

/* Desktop (≥1024px): Bento Grid fotográfico estilo Airbnb Luxe —
   principal 60% a la izquierda, dos apiladas 40% a la derecha. */
@media (min-width: 1024px) {
  .property-hero-gallery-wrap {
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--space-lg);
    padding-block-start: var(--space-md);
  }

  .property-hero-gallery {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    height: 60vh;
    min-height: 440px;
    max-height: 680px;
    overflow: visible;
  }

  .gallery-item {
    flex: initial;
    scroll-snap-align: none;
    border-radius: var(--radius-lg);
  }

  .gallery-item:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .gallery-item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .gallery-item:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .gallery-item:nth-child(n + 4) {
    display: none;
  }

  /* Con menos de 3 fotos, la grilla 3fr/2fr de 2 filas dejaba celdas
     vacías a la derecha. property.js marca el número real de fotos
     visibles en .property-hero-gallery para que la arquitectura de la
     grilla se adapte y nunca haya un hueco en blanco. */
  .property-hero-gallery.gallery-count-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .property-hero-gallery.gallery-count-1 .gallery-item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .property-hero-gallery.gallery-count-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }

  .property-hero-gallery.gallery-count-2 .gallery-item:nth-child(1),
  .property-hero-gallery.gallery-count-2 .gallery-item:nth-child(2) {
    grid-row: 1;
  }

  .property-hero-gallery.gallery-count-2 .gallery-item:nth-child(1) {
    grid-column: 1;
  }

  .property-hero-gallery.gallery-count-2 .gallery-item:nth-child(2) {
    grid-column: 2;
  }

  .gallery-item img {
    height: 100%;
  }

  .gallery-more-badge {
    display: none;
  }

  .gallery-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    position: absolute;
    inset-block-end: calc(var(--space-md) + 10px);
    inset-inline-end: calc(var(--space-lg) + 10px);
    z-index: 5;
    background: rgba(11, 11, 12, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    padding: 0.7rem 1.2rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition:
      background var(--duration-fast) var(--ease-premium),
      border-color var(--duration-fast) var(--ease-premium),
      transform var(--duration-fast) var(--ease-premium);
  }

  .gallery-view-all-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .gallery-view-all-btn:hover,
  .gallery-view-all-btn:focus-visible {
    background: rgba(11, 11, 12, 0.95);
    border-color: var(--color-gold);
    transform: translateY(-2px);
    outline: none;
  }
}

/* Lightbox (visor de pantalla completa de la galería) */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(4, 4, 5, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity var(--duration-med) var(--ease-premium);
}

.lightbox-overlay:not([hidden]) {
  display: flex;
}

.lightbox-overlay.is-visible {
  opacity: 1;
}

.lightbox-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-2xl);
}

.lightbox-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium);
  animation: none;
}

.lightbox-overlay.is-visible .lightbox-image.is-loaded {
  opacity: 1;
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-end: var(--space-md);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-white);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium);
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
  transform: scale(1.05);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-premium), background var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium);
}

.lightbox-nav svg {
  width: 22px;
  height: 22px;
}

.lightbox-nav:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-50%) scale(1.06);
}

.lightbox-nav--prev {
  inset-inline-start: var(--space-md);
}

.lightbox-nav--next {
  inset-inline-end: var(--space-md);
}

.lightbox-counter {
  position: absolute;
  inset-block-end: var(--space-md);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 768px) {
  .lightbox-stage {
    padding: var(--space-lg) var(--space-sm);
  }

  .lightbox-nav {
    width: 42px;
    height: 42px;
  }

  .lightbox-nav--prev {
    inset-inline-start: var(--space-xs);
  }

  .lightbox-nav--next {
    inset-inline-end: var(--space-xs);
  }

  .lightbox-close {
    inset-block-start: var(--space-sm);
    inset-inline-end: var(--space-sm);
  }
}

/* Main layout */

.property-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-block: var(--space-xl) var(--space-2xl);
}

@media (min-width: 1000px) {
  .property-layout {
    grid-template-columns: 7fr 3fr;
    align-items: start;
    padding-block: var(--space-2xl);
  }
}

.property-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  min-width: 0;
  /* Es texto editorial de solo lectura: nunca debe verse el cursor de
     edición (I-beam) al pasar sobre párrafos, títulos o espacios en blanco. */
  cursor: default;
}

.property-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-block-end: var(--space-xs);
}

.property-title {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  color: var(--color-ink);
}

.property-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--color-line);
}

.property-meta:empty {
  display: none;
  border: none;
}

.meta-item {
  font-size: 0.92rem;
  color: var(--color-ink-muted);
}

.meta-item strong {
  color: var(--color-ink);
  font-weight: 600;
}

.property-section-title {
  position: relative;
  font-size: 1.4rem;
  margin-block-end: var(--space-md);
  padding-inline-start: 1rem;
}

.property-section-title::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.18em;
  width: 3px;
  height: 1em;
  background: var(--color-red);
  border-radius: 2px;
}

.property-description {
  color: var(--color-ink-muted);
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.85;
  max-width: 68ch;
}

/* Letra capital: rompe la planitud del bloque de lectura con el rojo
   corporativo, solo en la descripción larga de la página de propiedad
   (no en las tarjetas del catálogo, que reutilizan la misma clase). */
#property-description::first-letter {
  float: inline-start;
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 0.8;
  font-weight: 600;
  color: var(--color-red);
  padding-inline-end: 0.5rem;
  padding-block-start: 0.15rem;
}

.amenities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md);
}

.amenity-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1.4rem;
  background: linear-gradient(160deg, #171717 0%, #0b0b0c 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform var(--duration-fast) var(--ease-premium),
    border-color var(--duration-fast) var(--ease-premium),
    box-shadow var(--duration-fast) var(--ease-premium);
}

.amenity-item:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 168, 106, 0.4);
  box-shadow:
    0 18px 34px -14px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(201, 168, 106, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.amenity-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(245, 245, 245, 0.7);
  transition: color var(--duration-fast) var(--ease-premium);
}

.amenity-item:hover .amenity-icon {
  color: var(--color-gold);
}

.amenity-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.amenity-label {
  font-size: 0.92rem;
  color: rgba(245, 245, 245, 0.85);
  font-weight: 500;
  transition: color var(--duration-fast) var(--ease-premium);
}

.amenity-item:hover .amenity-label {
  color: var(--color-gold);
}

/* ---------------------------------- Servicios Bespoke --------------------------------- */

.bespoke-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-md);
}

.bespoke-card {
  position: relative;
  padding: 2.25rem 1.6rem;
  background: linear-gradient(160deg, #141414 0%, #0b0b0c 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium);
}

.bespoke-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-red));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-med) var(--ease-premium);
}

.bespoke-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 168, 106, 0.35);
}

.bespoke-card:hover::before {
  transform: scaleX(1);
}

.bespoke-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-block-end: 1.4rem;
  border-radius: 50%;
  background: rgba(201, 168, 106, 0.08);
  color: var(--color-gold);
}

.bespoke-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bespoke-card-title {
  font-size: 1.1rem;
  color: var(--color-white);
  margin-block-end: 0.6rem;
}

.bespoke-card-copy {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.62);
}

.bespoke-note {
  margin-block-start: var(--space-lg);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-ink-muted);
  max-width: 60ch;
}

/* ---------------------------------- El Entorno --------------------------------- */

.entorno-block {
  padding: 2.5rem 2.75rem;
  border-inline-start: 3px solid var(--color-red);
  background: linear-gradient(90deg, rgba(188, 22, 34, 0.05), transparent 65%);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.entorno-title {
  font-size: 1.5rem;
  margin-block-end: 1rem;
  color: var(--color-ink);
}

.entorno-copy {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--color-ink-muted);
  max-width: 62ch;
}

/* ---------------------------------- Políticas de la Residencia --------------------------------- */

.policies-accordion {
  border-block-start: 1px solid var(--color-line);
}

.policy-item {
  border-block-end: 1px solid var(--color-line);
}

.policy-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 1.4rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--color-ink);
  transition: color var(--duration-fast) var(--ease-premium);
}

.policy-item summary::-webkit-details-marker {
  display: none;
}

.policy-item summary:hover {
  color: var(--color-red);
}

.policy-icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: transform var(--duration-med) var(--ease-premium);
}

.policy-icon::before,
.policy-icon::after {
  content: '';
  position: absolute;
  background: var(--color-gold);
}

.policy-icon::before {
  inset-inline-start: 0;
  inset-block-start: 50%;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.policy-icon::after {
  inset-inline-start: 50%;
  inset-block-start: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}

.policy-item[open] .policy-icon {
  transform: rotate(45deg);
}

.policy-content {
  padding-block-end: 1.6rem;
}

.policy-content p {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--color-ink-muted);
  max-width: 62ch;
}

@media (max-width: 640px) {
  .entorno-block {
    padding: 1.8rem 1.4rem;
  }

  .bespoke-card {
    padding: 1.8rem 1.4rem;
  }
}

/* ---------------------------------- Booking Widget --------------------------------- */

.property-sidebar {
  min-width: 0;
}

.booking-widget {
  background:
    linear-gradient(155deg, rgba(38, 38, 41, 0.7), rgba(9, 9, 10, 0.88)),
    rgba(15, 15, 16, 0.6);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  color: #f5f5f5;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 2.75rem 2.25rem;
  box-shadow:
    0 28px 64px -16px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: relative;
  overflow: hidden;
}

/* Borde metálico fino: anillo de degradado enmascarado a 1px, la
   sensación "Black Card" sin depender de una imagen ni de más marcado. */
.booking-widget::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0) 32%,
    rgba(255, 255, 255, 0) 68%,
    rgba(201, 168, 106, 0.4)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@media (min-width: 1000px) {
  .property-sidebar .booking-widget {
    position: sticky;
    top: 100px;
  }
}

.widget-close,
.widget-drag-handle {
  display: none;
}

.booking-price-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-block-end: var(--space-md);
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

.booking-price {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--color-gold);
}

.booking-price-amount {
  font-variant-numeric: tabular-nums;
}

.booking-price-unit {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(245, 245, 245, 0.6);
  font-weight: 400;
  margin-inline-start: 0.3rem;
}

.booking-note {
  font-size: 0.78rem;
  color: rgba(245, 245, 245, 0.55);
}

.booking-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Date pickers */

.booking-dates {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.booking-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.7rem 0.55rem;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-premium);
}

.booking-widget .booking-field:hover {
  background: rgba(255, 255, 255, 0.08);
}

.booking-field--checkin {
  border-inline-end: 1px solid rgba(255, 255, 255, 0.1);
}

.booking-widget .booking-field-label {
  color: rgba(245, 245, 245, 0.55);
}

.booking-field-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  font-weight: 600;
}

.booking-date-input {
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: #f5f5f5;
  padding: 0;
  outline: none;
  width: 100%;
  min-width: 0;
  color-scheme: dark;
  cursor: pointer;
}

/* ------------------------- Flatpickr — tema "Black Card" ------------------------- */

.flatpickr-calendar {
  background: #1a1a1a;
  color: #f5f5f5;
  font-family: var(--font-body);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  z-index: 9999;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  display: none;
}

.flatpickr-guide-text {
  padding: 0.85rem 1rem 0.6rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 1;
  transition: opacity 0.16s var(--ease-premium);
}

.flatpickr-guide-text.is-fading {
  opacity: 0;
}

.flatpickr-months {
  /* Flatpickr posiciona las flechas prev/next en absoluto (top: 0) respecto
     al ancestro posicionado más cercano. Sin esta regla, ese ancestro es
     .flatpickr-calendar (position: absolute) y las flechas quedan ancladas
     al borde superior de TODO el calendario en vez de a esta fila de mes,
     superponiéndose con el texto guía inyectado justo debajo. */
  position: relative;
  padding: 1rem 0.75rem 0.25rem;
}

.flatpickr-month {
  color: #f5f5f5;
}

.flatpickr-current-month {
  font-family: var(--font-display);
  font-size: 1.05rem;
  padding: 0;
}

.flatpickr-current-month span.cur-month {
  color: var(--color-gold) !important;
  font-weight: bold;
}

.flatpickr-current-month input.cur-year {
  color: #f5f5f5;
  font-family: var(--font-display);
  font-weight: 500;
  border-bottom: 1px solid var(--color-gold);
  cursor: pointer;
}

.flatpickr-current-month input.cur-year:hover,
.flatpickr-current-month input.cur-year:focus {
  color: var(--color-gold);
  outline: none;
}

/* El input de año necesita reservas a largo plazo (huésped reservando para
   el año próximo): sus spinners nativos se recolorean a dorado para que se
   perciban como interactivos sobre el fondo oscuro, en vez del gris apagado
   por defecto de flatpickr.min.css. */
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--color-gold);
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: var(--color-gold);
}

.flatpickr-current-month .numInputWrapper:hover {
  background: var(--color-gold-soft);
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent;
  color: #f5f5f5;
  font-family: var(--font-display);
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: #1a1a1a;
  color: #f5f5f5;
}

/* Las flechas prev/next de Flatpickr quedaban invisibles sobre el tema
   oscuro "Black Card": la hoja de estilos de Flatpickr (cargada antes que
   este archivo) pinta el SVG con un fill oscuro pensado para calendarios
   claros, y ese fill queda "congelado" en el propio elemento <svg> más allá
   de lo que sobreescribamos en el contenedor .flatpickr-prev-month. Se fuerza
   con !important en cada capa (contenedor, svg y path/g internos) para
   garantizar contraste y clic en los 12 meses de navegación permitidos. */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  color: var(--color-gold) !important;
  fill: var(--color-gold) !important;
  opacity: 1 !important;
  z-index: 20;
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-premium),
    fill var(--duration-fast) var(--ease-premium),
    background var(--duration-fast) var(--ease-premium),
    opacity var(--duration-fast) var(--ease-premium);
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  width: 20px !important;
  height: 20px !important;
  fill: var(--color-gold) !important;
  opacity: 1 !important;
}

.flatpickr-prev-month svg path,
.flatpickr-next-month svg path,
.flatpickr-prev-month svg g,
.flatpickr-next-month svg g {
  fill: var(--color-gold) !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #ffffff !important;
  fill: #ffffff !important;
  background: rgba(201, 168, 106, 0.2);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg,
.flatpickr-months .flatpickr-prev-month:hover svg path,
.flatpickr-months .flatpickr-next-month:hover svg path,
.flatpickr-months .flatpickr-prev-month:hover svg g,
.flatpickr-months .flatpickr-next-month:hover svg g {
  fill: #ffffff !important;
}

/* Especificidad igual a la regla nativa de Flatpickr que oculta
   (display: none) la flecha al llegar al límite de fechas — se
   sobreescribe a propósito para dejarla visible pero atenuada, en vez de
   que desaparezca de golpe y parezca un error de la interfaz. */
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: flex !important;
  color: rgba(201, 168, 106, 0.3) !important;
  fill: rgba(201, 168, 106, 0.3) !important;
  opacity: 0.35 !important;
  cursor: not-allowed;
  pointer-events: none;
  background: transparent;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled svg,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled svg,
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled svg path,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled svg path,
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled svg g,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled svg g {
  fill: rgba(201, 168, 106, 0.3) !important;
}

.flatpickr-weekdays {
  background: transparent;
}

span.flatpickr-weekday {
  background: transparent;
  color: rgba(245, 245, 245, 0.4);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.flatpickr-days {
  border: none;
}

.dayContainer {
  padding: 0 0.5rem 0.75rem;
}

.flatpickr-day {
  color: rgba(245, 245, 245, 0.82);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.78rem;
}

.flatpickr-day.nextMonthDay,
.flatpickr-day.prevMonthDay {
  color: rgba(245, 245, 245, 0.18);
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: transparent;
}

.flatpickr-day.today {
  border-color: var(--color-gold);
}

.flatpickr-day.today:hover {
  background: var(--color-gold-soft);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-black);
  font-weight: 600;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.flatpickr-day.inRange {
  background: var(--color-gold-soft);
  border-color: transparent;
  box-shadow: -5px 0 0 var(--color-gold-soft), 5px 0 0 var(--color-gold-soft);
}

.flatpickr-day.startRange.endRange {
  box-shadow: none;
}

/* Fechas ya reservadas: tenues y no interactivas, sin lucir como un error. */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: rgba(245, 245, 245, 0.18);
  background: transparent;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: rgba(245, 245, 245, 0.15);
}

.booking-dates-hint {
  font-size: 0.8rem;
  color: #ff6b6b;
  margin-block-start: -0.5rem;
}

.booking-validation-message {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #ff6b6b;
  background: rgba(188, 22, 34, 0.16);
  border: 1px solid rgba(188, 22, 34, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  margin-block-end: -0.4rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s var(--ease-premium), transform 0.3s var(--ease-premium);
}

.booking-validation-message:not([hidden]) {
  animation: booking-validation-in 0.3s var(--ease-premium) forwards;
}

@keyframes booking-validation-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Guest stepper */

.booking-guests {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
}

.booking-guests-label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.booking-guests-sub {
  font-size: 0.72rem;
  color: rgba(245, 245, 245, 0.55);
}

.guest-stepper {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.guest-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #f5f5f5;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--duration-fast) var(--ease-premium),
    color var(--duration-fast) var(--ease-premium),
    transform var(--duration-fast) var(--ease-premium);
}

.guest-btn:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.guest-btn:active {
  transform: scale(0.92);
}

.guest-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.guest-count {
  min-width: 1.4ch;
  text-align: center;
  font-size: 0.98rem;
  font-weight: 600;
  color: #f5f5f5;
  font-variant-numeric: tabular-nums;
}

/* Upsell module */

.booking-upsell {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-block-start: var(--space-xs);
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.upsell-title {
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: #f5f5f5;
}

.upsell-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.upsell-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-premium),
    background var(--duration-fast) var(--ease-premium),
    transform var(--duration-fast) var(--ease-premium);
}

.upsell-item:hover {
  border-color: var(--color-gold);
  transform: translateY(-1px);
}

.upsell-item.is-selected {
  border-color: var(--color-red);
  background: rgba(188, 22, 34, 0.16);
}

.upsell-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-gold);
}

.upsell-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.upsell-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.upsell-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #f5f5f5;
}

.upsell-description {
  font-size: 0.78rem;
  color: rgba(245, 245, 245, 0.55);
  line-height: 1.4;
}

.upsell-price {
  font-size: 0.8rem;
  color: var(--color-gold);
  font-weight: 500;
}

.upsell-switch {
  flex-shrink: 0;
  position: relative;
  width: 42px;
  height: 24px;
}

.upsell-checkbox {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.upsell-slider {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  transition: background var(--duration-fast) var(--ease-premium);
}

.upsell-slider::before {
  content: '';
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform var(--duration-fast) var(--ease-premium);
}

.upsell-checkbox:checked + .upsell-slider {
  background: var(--color-red);
}

.upsell-checkbox:checked + .upsell-slider::before {
  transform: translateX(18px);
}

.upsell-checkbox:focus-visible + .upsell-slider {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Financial breakdown */

.booking-breakdown {
  flex-direction: column;
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.booking-breakdown:not([hidden]) {
  display: flex;
}

.breakdown-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.88rem;
  color: rgba(245, 245, 245, 0.55);
  padding-block: 0.3rem;
}

.breakdown-row .row-value {
  color: #f5f5f5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#row-addons {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-block: 0;
  transition:
    max-height var(--duration-med) var(--ease-premium),
    opacity var(--duration-fast) ease,
    padding var(--duration-med) var(--ease-premium);
}

#row-addons.is-visible {
  max-height: 60px;
  opacity: 1;
  padding-block: 0.3rem;
}

.breakdown-total {
  margin-block-start: 0.3rem;
  padding-block-start: 0.6rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 1.05rem;
  font-weight: 600;
  color: #f5f5f5;
}

.breakdown-total .row-value {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-gold);
}

#total-amount.is-flash {
  animation: totalPulse 0.6s var(--ease-premium);
}

@keyframes totalPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.1); color: var(--color-gold); }
  100% { transform: scale(1); }
}

/* CTA button with loading state */

.booking-cta {
  width: 100%;
  position: relative;
}

.booking-cta .cta-spinner,
.login-submit .cta-spinner,
.checkin-submit-btn .cta-spinner {
  display: none;
}

.booking-cta.is-loading .cta-label,
.login-submit.is-loading .cta-label,
.checkin-submit-btn.is-loading .cta-label {
  opacity: 0;
}

.booking-cta.is-loading .cta-spinner,
.login-submit.is-loading .cta-spinner,
.checkin-submit-btn.is-loading .cta-spinner {
  display: block;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  width: 18px;
  height: 18px;
  margin-inline-start: -9px;
  margin-block-start: -9px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-block-start-color: var(--color-white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.booking-cta:disabled,
.login-submit:disabled,
.checkin-submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------- Gatillos psicológicos (CRO) --------------------------------- */

.exclusive-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block: 0.6rem 0;
  padding: 0.4rem 0.9rem;
  background: #111111;
  border: 1px solid rgba(201, 168, 106, 0.5);
  border-radius: 999px;
  color: var(--color-gold);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.scarcity-note {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0;
  padding: 0.6rem 0.75rem;
  background: rgba(188, 22, 34, 0.08);
  border: 1px solid rgba(188, 22, 34, 0.18);
  border-radius: var(--radius-md);
  color: rgba(245, 245, 245, 0.65);
  font-size: 0.74rem;
  line-height: 1.45;
}

.scarcity-note svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-block-start: 0.1rem;
  fill: var(--color-red);
  stroke: none;
}

/* Fase 15 (Yield Management): nota transparente de que el precio mostrado
   ya incluye una regla de tarifa dinámica activa (temporada alta, evento,
   fin de semana) — mismo lenguaje visual que .scarcity-note pero en acento
   dorado, para no confundirla con una alerta. */
.dynamic-pricing-note {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0 0 0.6rem;
  padding: 0.55rem 0.75rem;
  background: var(--color-gold-soft);
  border: 1px solid rgba(201, 168, 106, 0.3);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-size: 0.74rem;
  line-height: 1.45;
  animation: dynamic-pricing-fade-in var(--duration-med) var(--ease-premium);
}

.dynamic-pricing-note svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-block-start: 0.1rem;
  color: var(--color-gold);
}

@keyframes dynamic-pricing-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dynamic-pricing-note {
    animation: none;
  }
}

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

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: rgba(245, 245, 245, 0.5);
  white-space: nowrap;
}

.trust-badge svg {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Mobile booking bar + bottom sheet */

.mobile-booking-bar,
.sheet-backdrop {
  display: none;
}

@media (max-width: 999px) {
  .property-detail {
    padding-block-end: 96px;
  }

  .booking-widget {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 210;
    /* This variant is a full-viewport bottom-sheet modal, not the sticky desktop
       card, so it keeps a height cap + scroll to guarantee the CTA stays reachable. */
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.45);
    transform: translateY(100%);
    transition: transform var(--duration-med) var(--ease-premium);
    overflow-y: auto;
    padding-inline: 1.5rem;
    padding-block: var(--space-lg) 1.75rem;
  }

  .booking-widget.is-open {
    transform: translateY(0);
  }

  .widget-close {
    display: flex;
    position: absolute;
    inset-block-start: var(--space-sm);
    inset-inline-end: var(--space-sm);
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: #f5f5f5;
    font-size: 1.2rem;
    z-index: 2;
  }

  .widget-drag-handle {
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 10px;
    transform: translateX(-50%);
  }

  .sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 11, 12, 0.5);
    backdrop-filter: blur(3px);
    z-index: 205;
    opacity: 0;
    transition: opacity var(--duration-med) var(--ease-premium);
  }

  .sheet-backdrop:not([hidden]) {
    display: block;
  }

  .sheet-backdrop.is-visible {
    opacity: 1;
  }

  .mobile-booking-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 90;
    padding: 0.85rem var(--space-md);
    padding-block-end: calc(0.85rem + env(safe-area-inset-bottom, 0px));
    background: #141414;
    border-block-start: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -12px 30px -12px rgba(0, 0, 0, 0.5);
    /* Oculta por defecto: solo aparece cuando el hero sale de pantalla
       (ver observer en property.html), para no competir con el hero visual. */
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--duration-med) var(--ease-premium), opacity var(--duration-med) var(--ease-premium);
  }

  .mobile-booking-bar.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-bar-price {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--color-gold);
  }

  .mobile-bar-cta {
    flex-shrink: 0;
    padding-inline: 1.75rem;
  }
}

body.no-scroll {
  overflow: hidden;
}

/* ---------------------------------- Modals (Login + Confirmation) --------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: rgba(11, 11, 12, 0.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--duration-med) var(--ease-premium);
}

.modal-overlay:not([hidden]) {
  display: flex;
}

.modal-overlay.is-visible {
  opacity: 1;
}

.modal-card {
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.45);
  transform: translateY(18px) scale(0.98);
  opacity: 0;
  transition: transform var(--duration-med) var(--ease-premium), opacity var(--duration-med) var(--ease-premium);
}

.modal-overlay.is-visible .modal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-close {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-end: var(--space-sm);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-off-white);
  color: var(--color-ink);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-red);
  font-weight: 600;
  margin-block-end: 0.4rem;
}

.modal-title {
  font-size: 1.5rem;
  margin-block-end: 0.5rem;
}

.modal-copy {
  color: var(--color-ink-muted);
  font-size: 0.92rem;
  font-weight: 300;
  margin-block-end: var(--space-md);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.login-form .booking-field {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
  cursor: default;
}

.login-form input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-ink);
  padding: 0;
  margin-block-start: 0.2rem;
  width: 100%;
}

.login-error {
  color: var(--color-red);
  font-size: 0.85rem;
  background: var(--color-red-soft);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
}

.login-submit {
  width: 100%;
  margin-block-start: 0.3rem;
  position: relative;
}

.modal-eyebrow--light {
  color: var(--color-gold);
}

@keyframes bookingSuccessCircle {
  to { stroke-dashoffset: 0; }
}

@keyframes bookingSuccessMark {
  to { stroke-dashoffset: 0; }
}

/* ---------------------------------- Toast notifications --------------------------------- */

.toast {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 110px;
  margin-inline: auto;
  width: max-content;
  max-width: min(90vw, 420px);
  z-index: 400;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  text-align: center;
  color: var(--color-white);
  background: var(--color-charcoal);
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium);
}

.toast:not([hidden]) {
  display: block;
}

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

.toast--error {
  background: var(--color-red-dark);
}

.toast--warning {
  background: #7a5a12;
  border: 1px solid var(--color-gold);
}

.toast--success {
  background: #1f5c3d;
}

@media (min-width: 1000px) {
  .toast {
    inset-block-end: var(--space-lg);
  }
}

/* ==========================================================================
   Guest Portal — Mis Estadías (Pasaporte Digital)
   ========================================================================== */

.my-stays-page {
  background: var(--color-black);
}

.my-stays-page main {
  min-height: 100vh;
}

.my-stays-hero {
  position: relative;
  padding-block: calc(var(--space-2xl) + 2rem) var(--space-lg);
  background:
    radial-gradient(circle at 15% 10%, rgba(201, 168, 106, 0.12), transparent 55%),
    radial-gradient(circle at 90% 30%, rgba(188, 22, 34, 0.14), transparent 45%),
    linear-gradient(160deg, #101012 0%, #1c1c1f 55%, #0b0b0c 100%);
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
}

.my-stays-hero-inner {
  max-width: 680px;
}

.my-stays-hero .hero-eyebrow {
  margin-block-end: var(--space-xs);
}

.my-stays-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--color-white);
}

.my-stays-subtitle {
  margin-block-start: var(--space-sm);
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  font-weight: 300;
  max-width: 52ch;
}

/* Acceso VIP (formulario de acceso al Portal del Huésped) */

.guest-lookup-card {
  width: 100%;
  max-width: 460px;
  background: linear-gradient(160deg, #17171a 0%, #1c1c1f 60%, #101012 100%);
  border: 1px solid rgba(201, 168, 106, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6);
}

.guest-lookup-title {
  font-size: 1.5rem;
  color: var(--color-white);
  margin-block-end: 0.5rem;
}

.guest-lookup-copy {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.92rem;
  font-weight: 300;
  margin-block-end: var(--space-md);
}

.guest-lookup-form .booking-field {
  border-color: rgba(255, 255, 255, 0.16);
}

.guest-lookup-form .booking-field-label {
  color: rgba(255, 255, 255, 0.5);
}

.guest-lookup-form input {
  color: var(--color-white);
}

/* ---------------------------------- Portal del Huésped: Dashboard --------------------------------- */

.guest-dashboard:not([hidden]) {
  display: block;
}

.dashboard-hero {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  background-color: var(--color-charcoal);
  background-image: linear-gradient(160deg, #101012 0%, #1c1c1f 55%, #0b0b0c 100%);
  background-size: cover;
  background-position: center;
}

.dashboard-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.55) 100%);
}

.dashboard-hero-content {
  position: relative;
  z-index: 2;
  padding-block: calc(var(--header-height) + var(--space-lg)) var(--space-lg);
  color: var(--color-white);
}

.dashboard-hero-code {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-block-end: var(--space-xs);
  font-variant-numeric: tabular-nums;
}

.dashboard-hero-title {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  color: var(--color-white);
  max-width: 22ch;
}

.dashboard-hero-dates {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-block-start: var(--space-md);
}

.dashboard-hero-date {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.dashboard-review-cta {
  display: inline-flex;
  margin-block-start: var(--space-md);
}

.dashboard-hero-date span {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.dashboard-hero-date strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-white);
}

.dashboard-hero-divider {
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.dashboard-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-block: var(--space-lg) var(--space-2xl);
}

.dashboard-card {
  background: var(--color-charcoal);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-md);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.6);
}

.dashboard-card-title {
  font-size: 1.2rem;
  color: var(--color-white);
  margin-block-end: var(--space-sm);
}

.dashboard-card-empty {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.6;
}

/* Wi-Fi */

.wifi-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.wifi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(201, 168, 106, 0.2);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
}

.wifi-row-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.wifi-row-label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.wifi-row-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-gold);
  word-break: break-word;
}

.wifi-copy-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-white);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  transition: border-color var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium);
}

.wifi-copy-btn:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.wifi-copy-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Reglas de la casa */

.rules-text {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.85;
}

/* Conserjería y contactos */

.dashboard-concierge-cta {
  width: 100%;
  margin-block-end: var(--space-md);
}

.contacts-subtitle {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-block-end: var(--space-sm);
}

.contacts-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.contact-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  padding-block-end: 0.7rem;
  border-block-end: 1px dashed rgba(255, 255, 255, 0.12);
  font-size: 0.9rem;
}

.contact-item:last-child {
  border-block-end: none;
  padding-block-end: 0;
}

.contact-label {
  color: rgba(255, 255, 255, 0.55);
}

.contact-value {
  color: var(--color-white);
  font-weight: 500;
}

.contact-value a {
  color: var(--color-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dashboard-back {
  align-self: center;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.4rem;
  margin-block-start: var(--space-sm);
  transition: color var(--duration-fast) var(--ease-premium);
}

.dashboard-back:hover {
  color: var(--color-gold);
}

@media (min-width: 720px) {
  .dashboard-body {
    max-width: 720px;
  }
}

/* ==========================================================================
   Fase 8 — Check-in Digital y Verificación VIP (my-stays.html)
   Interfaz de "seguridad bancaria" mostrada antes de revelar Wi-Fi,
   dirección exacta y contactos: documento de identidad, contrato digital
   y firma en <canvas>.
   ========================================================================== */

.checkin-flow:not([hidden]) {
  display: block;
}

.checkin-hero {
  position: relative;
  min-height: 32vh;
  display: flex;
  align-items: flex-end;
  background-color: var(--color-charcoal);
  background-image: linear-gradient(160deg, #101012 0%, #1c1c1f 55%, #0b0b0c 100%);
  background-size: cover;
  background-position: center;
}

.checkin-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.6) 100%);
}

.checkin-hero-content {
  position: relative;
  z-index: 2;
  padding-block: calc(var(--header-height) + var(--space-md)) var(--space-md);
  color: var(--color-white);
}

.checkin-hero-code {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
}

.checkin-body {
  padding-block: var(--space-lg) var(--space-2xl);
  transition: opacity var(--duration-med) var(--ease-premium);
}

.checkin-body.is-fading-out {
  opacity: 0;
}

.checkin-card {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  background: linear-gradient(160deg, #17171a 0%, #1c1c1f 60%, #101012 100%);
  border: 1px solid rgba(201, 168, 106, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.65);
  text-align: center;
}

.checkin-shield {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-block-end: var(--space-sm);
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 106, 0.4);
  background: var(--color-gold-soft);
  color: var(--color-gold);
}

.checkin-shield svg {
  width: 26px;
  height: 26px;
}

.checkin-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 600;
}

.checkin-title {
  margin-block-start: var(--space-xs);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--color-white);
}

.checkin-subtitle {
  margin-block-start: var(--space-xs);
  margin-inline: auto;
  max-width: 48ch;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.7;
}

/* ---------------------------------- Stepper ---------------------------------- */

.checkin-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-block-start: var(--space-lg);
}

.checkin-stepper-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 64px;
}

.checkin-stepper-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium), background var(--duration-fast) var(--ease-premium);
}

.checkin-stepper-label {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.checkin-stepper-item.is-active .checkin-stepper-dot {
  border-color: var(--color-gold);
  background: var(--color-gold-soft);
  color: var(--color-gold);
}

.checkin-stepper-item.is-active .checkin-stepper-label {
  color: var(--color-gold);
}

.checkin-stepper-item.is-done .checkin-stepper-dot {
  border-color: var(--color-gold);
  background: var(--color-gold);
  color: var(--color-black);
}

.checkin-stepper-line {
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  margin-block-end: 20px;
}

.checkin-stepper-item.is-done + .checkin-stepper-line {
  background: var(--color-gold);
}

/* ---------------------------------- Pasos ---------------------------------- */

.checkin-steps {
  margin-block-start: var(--space-lg);
  text-align: start;
}

.checkin-step-title {
  font-size: 1.3rem;
  color: var(--color-white);
}

.checkin-step-copy {
  margin-block-start: 0.4rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.7;
}

.checkin-error {
  margin-block-start: var(--space-sm);
  color: var(--color-red);
  font-size: 0.85rem;
}

.checkin-step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

.checkin-step-actions--end {
  justify-content: flex-end;
}

.checkin-step-actions .btn {
  min-width: 200px;
}

.checkin-back-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.5rem;
  transition: color var(--duration-fast) var(--ease-premium);
}

.checkin-back-btn:hover {
  color: var(--color-gold);
}

/* Paso 1: Documento (drag & drop) */

.checkin-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  margin-block-start: var(--space-md);
  padding: var(--space-md);
  border: 1.5px dashed rgba(201, 168, 106, 0.35);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-premium), background var(--duration-fast) var(--ease-premium);
}

.checkin-dropzone:hover,
.checkin-dropzone:focus-visible {
  border-color: var(--color-gold);
  background: var(--color-gold-soft);
  outline: none;
}

.checkin-dropzone.is-dragover {
  border-color: var(--color-gold);
  background: var(--color-gold-soft);
  transform: scale(1.01);
}

.checkin-dropzone-empty[hidden],
.checkin-dropzone-file[hidden] {
  display: none;
}

.checkin-dropzone-empty,
.checkin-dropzone-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

.checkin-dropzone-empty svg,
.checkin-dropzone-file svg {
  width: 32px;
  height: 32px;
  color: var(--color-gold);
}

.checkin-dropzone-cta {
  font-size: 0.92rem;
  color: var(--color-white);
  font-weight: 500;
}

.checkin-dropzone-hint {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.45);
}

.checkin-file-name {
  max-width: 40ch;
  overflow-wrap: break-word;
  color: var(--color-gold);
  font-size: 0.9rem;
  font-weight: 500;
}

.checkin-file-remove {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.76rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  transition: border-color var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium);
}

.checkin-file-remove:hover {
  border-color: var(--color-red);
  color: var(--color-red);
}

.checkin-trust-text {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-block-start: var(--space-md);
  padding: 0.9rem 1rem;
  border: 1px solid rgba(201, 168, 106, 0.18);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.78rem;
  font-weight: 300;
  line-height: 1.6;
}

.checkin-trust-text svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-block-start: 0.1rem;
  color: var(--color-gold);
}

/* Paso 2: Contrato Digital */

.checkin-contract-scroll {
  max-height: 260px;
  overflow-y: auto;
  margin-block-start: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.35);
}

.checkin-contract-clause {
  padding-block: var(--space-sm);
  border-block-end: 1px dashed rgba(255, 255, 255, 0.1);
}

.checkin-contract-clause:last-child {
  border-block-end: none;
}

.checkin-contract-clause h3 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-block-end: 0.4rem;
}

.checkin-contract-clause p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.75;
}

.checkin-contract-clause--emphasis {
  padding-inline-start: var(--space-sm);
  border-inline-start: 2px solid var(--color-red);
}

.checkin-accept-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-block-start: var(--space-md);
  cursor: pointer;
}

.checkin-accept-row input[type='checkbox'] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-block-start: 0.15rem;
  accent-color: var(--color-gold);
  cursor: pointer;
}

.checkin-accept-row span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.84rem;
  font-weight: 300;
  line-height: 1.6;
}

/* Paso 3: Firma digital */

.checkin-signature-pad {
  position: relative;
  margin-block-start: var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(201, 168, 106, 0.35);
  background: var(--color-white);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.6);
}

.checkin-signature-pad canvas {
  display: block;
  width: 100%;
  touch-action: none;
  cursor: crosshair;
}

.checkin-signature-line {
  position: absolute;
  inset-inline: 6%;
  inset-block-end: 18%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(23, 23, 26, 0.25) 0 6px, transparent 6px 12px);
  pointer-events: none;
}

.checkin-signature-actions {
  display: flex;
  justify-content: flex-end;
  margin-block-start: var(--space-sm);
}

.checkin-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-white);
  font-size: 0.78rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  transition: border-color var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium);
}

.checkin-clear-btn:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.checkin-clear-btn svg {
  width: 14px;
  height: 14px;
}

.checkin-submit-btn {
  position: relative;
}

/* ---------------------------------- Transición de Desbloqueo ---------------------------------- */

.unlock-transition[hidden] {
  display: none;
}

.unlock-transition {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  background:
    radial-gradient(circle at 50% 40%, rgba(201, 168, 106, 0.16), transparent 60%),
    linear-gradient(160deg, #101012 0%, #1c1c1f 55%, #0b0b0c 100%);
  opacity: 0;
  transition: opacity var(--duration-med) var(--ease-premium);
}

.unlock-transition.is-visible {
  opacity: 1;
}

.unlock-icon {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--duration-med) var(--ease-premium), transform var(--duration-med) var(--ease-premium);
}

.unlock-transition.is-visible .unlock-icon {
  opacity: 1;
  transform: scale(1);
}

.unlock-icon svg {
  width: 80px;
  height: 80px;
  overflow: visible;
}

.unlock-icon-body {
  stroke: var(--color-gold);
}

.unlock-icon-shackle {
  stroke: var(--color-gold);
  transform-origin: 41px 22px;
}

.unlock-transition.is-visible .unlock-icon-shackle {
  animation: unlockShackleOpen 0.6s var(--ease-premium) 0.35s forwards;
}

.unlock-icon-keyhole {
  fill: var(--color-gold);
}

.unlock-eyebrow {
  margin-block-start: var(--space-sm);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 600;
  opacity: 0;
  transition: opacity var(--duration-med) var(--ease-premium) 0.5s;
}

.unlock-title {
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  color: var(--color-white);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-med) var(--ease-premium) 0.6s, transform var(--duration-med) var(--ease-premium) 0.6s;
}

.unlock-transition.is-visible .unlock-eyebrow,
.unlock-transition.is-visible .unlock-title {
  opacity: 1;
  transform: none;
}

@keyframes unlockShackleOpen {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-32deg);
  }
}

@media (max-width: 640px) {
  .checkin-card {
    padding: var(--space-lg) var(--space-sm) var(--space-md);
  }

  .checkin-stepper-label {
    display: none;
  }

  .checkin-step-actions .btn {
    min-width: 0;
    flex: 1;
  }

  .checkin-contract-scroll {
    max-height: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .property-card,
  .property-media img,
  .gallery-item img,
  .btn,
  .scroll-cue span,
  .upsell-item,
  .upsell-slider,
  .upsell-slider::before,
  .booking-widget,
  .sheet-backdrop,
  .modal-overlay,
  .modal-card,
  .lightbox-overlay,
  .lightbox-image,
  .lightbox-nav,
  .lightbox-close,
  .toast,
  #total-amount,
  .dashboard-hero,
  .checkin-body,
  .checkin-dropzone,
  .unlock-transition,
  .unlock-icon,
  .unlock-icon-shackle,
  .unlock-eyebrow,
  .unlock-title {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .booking-success-check-circle,
  .booking-success-check-mark {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ==========================================================================
   Venta Cruzada — Otras Joyas de Nuestra Colección (property.html)
   ========================================================================== */

.cross-sell-section {
  background: var(--color-black);
  padding-block: var(--space-xl) var(--space-2xl);
  border-block-start: 1px solid rgba(255, 255, 255, 0.06);
}

.cross-sell-section .section-eyebrow {
  color: var(--color-gold);
}

.cross-sell-section .section-title {
  color: var(--color-white);
}

.cross-sell-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .cross-sell-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cross-sell-card {
  display: flex;
  flex-direction: column;
  background: #111111;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--duration-med) var(--ease-premium), border-color var(--duration-med) var(--ease-premium), box-shadow var(--duration-med) var(--ease-premium);
}

.cross-sell-card:hover,
.cross-sell-card:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(201, 168, 106, 0.4);
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.55);
  outline: none;
}

.cross-sell-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, #2a2a2d, #101012);
}

.cross-sell-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-premium);
}

.cross-sell-card:hover .cross-sell-media img {
  transform: scale(1.06);
}

.cross-sell-body {
  padding: 1.1rem 1.25rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cross-sell-location {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.45);
}

.cross-sell-name {
  font-size: 1.05rem;
  color: var(--color-white);
}

.cross-sell-price {
  margin-block-start: 0.2rem;
  font-family: var(--font-display);
  font-size: 0.98rem;
  color: var(--color-gold);
}

.cross-sell-price span {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: rgba(245, 245, 245, 0.5);
  font-weight: 400;
  margin-inline-start: 0.25rem;
}

/* ==========================================================================
   Checkout Premium (checkout.html)
   ========================================================================== */

.checkout-page main {
  min-height: 100vh;
  background: var(--color-off-white);
}

.checkout-back-link {
  font-size: 0.85rem !important;
}

.checkout-section {
  padding-block: calc(var(--header-height) + var(--space-lg)) var(--space-2xl);
}

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.checkout-summary-col {
  order: -1;
}

@media (min-width: 1000px) {
  .checkout-layout {
    grid-template-columns: 3fr 2fr;
    align-items: start;
  }

  .checkout-summary-col {
    order: 0;
  }
}

.checkout-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-red);
  font-weight: 600;
  margin-block-end: var(--space-xs);
}

.checkout-title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--color-ink);
}

.checkout-subtitle {
  margin-block-start: var(--space-xs);
  color: var(--color-ink-muted);
  font-weight: 300;
}

.checkout-form {
  margin-block-start: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.checkout-block {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.checkout-block-title {
  font-size: 1.15rem;
  color: var(--color-ink);
  margin-block-end: var(--space-md);
}

.checkout-fields-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

@media (min-width: 560px) {
  .checkout-fields-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.checkout-field {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
  cursor: default;
}

.checkout-field--full {
  grid-column: 1 / -1;
}

.checkout-field input,
.checkout-field textarea {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-ink);
  padding: 0;
  margin-block-start: 0.25rem;
  width: 100%;
  resize: vertical;
}

.checkout-field textarea {
  min-height: 4.5rem;
}

/* Payment method tabs */

.payment-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  margin-block-end: var(--space-md);
}

@media (min-width: 560px) {
  .payment-tabs {
    grid-template-columns: repeat(3, 1fr);
  }
}

.payment-tab {
  position: relative;
  display: block;
}

.payment-tab input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.payment-tab-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1.1rem 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  color: var(--color-ink-muted);
  transition: border-color var(--duration-fast) var(--ease-premium), background var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium);
}

.payment-tab-icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.payment-tab-label {
  font-size: 0.82rem;
  font-weight: 500;
}

.payment-tab input:hover + .payment-tab-inner {
  border-color: rgba(188, 22, 34, 0.35);
}

.payment-tab input:checked + .payment-tab-inner {
  border-color: var(--color-red);
  background: var(--color-red-soft);
  color: var(--color-red);
}

.payment-tab input:focus-visible + .payment-tab-inner {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.payment-panel {
  animation: paymentPanelIn 0.35s var(--ease-premium);
}

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

.payment-panel-copy {
  font-size: 0.9rem;
  color: var(--color-ink-muted);
  font-weight: 300;
  line-height: 1.6;
  background: var(--color-off-white);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
}

.card-mock-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

@media (min-width: 560px) {
  .card-mock-fields {
    grid-template-columns: 1fr 1fr;
  }
}

.checkout-error {
  color: var(--color-red);
  font-size: 0.85rem;
  background: var(--color-red-soft);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
}

.checkout-submit {
  width: 100%;
  position: relative;
  background: #bc1622;
}

.checkout-submit .cta-spinner {
  display: none;
}

.checkout-submit.is-loading .cta-label {
  opacity: 0;
}

.checkout-submit.is-loading .cta-spinner {
  display: block;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  width: 18px;
  height: 18px;
  margin-inline-start: -9px;
  margin-block-start: -9px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-block-start-color: var(--color-white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.checkout-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--color-ink-muted);
  text-align: center;
}

.checkout-secure-note svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sticky order summary */

.checkout-summary {
  background: #141414;
  color: #f5f5f5;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

@media (min-width: 1000px) {
  .checkout-summary-col {
    position: sticky;
    top: calc(var(--header-height) + var(--space-md));
  }
}

.checkout-summary-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #2a2a2d, #101012);
}

.checkout-summary-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.checkout-summary-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.checkout-summary-location {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.5);
}

.checkout-summary-name {
  font-size: 1.4rem;
  color: var(--color-white);
  margin-block-end: 0.5rem;
}

.checkout-dates-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
}

.checkout-date {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.checkout-date-value {
  font-size: 0.85rem;
  color: #f5f5f5;
  font-weight: 500;
}

.checkout-dates-divider {
  flex-shrink: 0;
  color: var(--color-gold);
  display: flex;
}

.checkout-dates-divider svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.checkout-guests {
  font-size: 0.8rem;
  color: rgba(245, 245, 245, 0.55);
  margin-block-start: 0.6rem;
}

.checkout-breakdown {
  display: flex;
  flex-direction: column;
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.checkout-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block-start: 0.3rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 1.05rem;
  font-weight: 600;
  color: #f5f5f5;
}

.checkout-total-row span:last-child {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-gold);
}

.checkout-trust-badges {
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid rgba(201, 168, 106, 0.25);
  justify-content: flex-start;
  gap: 0.7rem 1.6rem;
}

.checkout-trust-badges .trust-badge {
  gap: 0.55rem;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-gold);
}

.checkout-trust-badges .trust-badge svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-gold);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 5px rgba(201, 168, 106, 0.4));
}

/* ---------------------------------- Overlay de Pago Simulado ---------------------------------- */

.payment-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(4, 4, 5, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--duration-med) var(--ease-premium);
}

.payment-overlay:not([hidden]) {
  display: flex;
}

.payment-overlay.is-visible {
  opacity: 1;
}

.payment-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
  padding: var(--space-lg);
}

.payment-overlay-spinner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-block-start-color: var(--color-gold);
  border-inline-end-color: var(--color-red);
  animation: spin 0.9s linear infinite;
}

.payment-overlay-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 600;
}

.payment-overlay-text {
  max-width: 320px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
}

/* ==========================================================================
   Página de Éxito (success.html)
   ========================================================================== */

.success-page {
  background: var(--color-black);
}

.success-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background:
    radial-gradient(circle at 20% 15%, rgba(201, 168, 106, 0.12), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(188, 22, 34, 0.16), transparent 50%),
    linear-gradient(160deg, #101012 0%, #1c1c1f 55%, #0b0b0c 100%);
}

.success-card {
  width: 100%;
  max-width: 520px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.success-check svg {
  width: 84px;
  height: 84px;
  overflow: visible;
}

.success-check-circle {
  stroke: var(--color-gold);
  stroke-width: 1.5;
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  animation: bookingSuccessCircle 0.7s var(--ease-premium) 0.15s forwards;
}

.success-check-mark {
  stroke: var(--color-gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: bookingSuccessMark 0.45s var(--ease-premium) 0.7s forwards;
}

.success-eyebrow {
  margin-block-start: var(--space-sm);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-red);
  font-weight: 600;
}

.success-title {
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: var(--color-white);
}

.success-copy {
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 300;
  line-height: 1.7;
}

.success-actions {
  margin-block-start: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

@media (prefers-reduced-motion: reduce) {
  .cross-sell-card,
  .payment-overlay,
  .payment-panel,
  .success-check-circle,
  .success-check-mark {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .success-check-circle,
  .success-check-mark {
    stroke-dashoffset: 0 !important;
  }
}

/* ==========================================================================
   Embudo NPS público (review.html) — Fase 17, Épica 5B
   ========================================================================== */

.review-card { gap: var(--space-md); }

.review-access-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  text-align: left;
}

.review-access-form .booking-field {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
}

.review-access-form .booking-field-label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.review-access-form input,
.review-access-form textarea {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-white);
  padding: 0;
  margin-block-start: 0.2rem;
  width: 100%;
  resize: vertical;
}

.review-stars {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-block-start: var(--space-sm);
}

.review-star {
  background: none;
  border: none;
  font-size: 2.6rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium);
  padding: 0.15rem;
}

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

.review-star.is-active { color: var(--color-gold); transform: scale(1.05); }

.review-gmb-btn {
  font-size: 1.05rem;
  padding: 1.15rem 2.6rem;
  box-shadow: 0 12px 32px -8px rgba(201, 168, 106, 0.5);
  background: var(--color-gold);
  color: var(--color-black);
  border: none;
}

.review-gmb-btn:hover {
  background: #ddc088;
  box-shadow: 0 18px 40px -10px rgba(201, 168, 106, 0.65);
}

/* ==========================================================================
   Página "Nosotros" (about.html)
   ========================================================================== */

.about-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-charcoal);
}

/* Fallback sin foto (about.js nunca toca este fondo si site_settings.image_url
   está vacío): degradé oscuro premium, nunca negro plano. */
.about-hero-media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(201, 168, 106, 0.16), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(188, 22, 34, 0.14), transparent 45%),
    linear-gradient(160deg, #101012 0%, #1c1c1f 55%, #0b0b0c 100%);
  background-size: cover;
  background-position: center;
}

/* Capa de contraste: equivalente a componer
   linear-gradient(to bottom, rgba(0,0,0,.4), rgba(10,10,10,1)) directamente
   sobre la foto, pero como div propio para no pisar el fondo de fallback de
   .about-hero-media cuando no hay imagen. Nunca baja de 0.45 de opacidad, así
   que el título/subtítulo blancos siempre tienen contraste suficiente sin
   importar qué tan clara sea la foto que suba el admin. */
.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(6, 6, 7, 0.62) 45%, rgba(4, 4, 5, 0.9) 100%);
}

.about-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-2xl);
  color: var(--color-white);
  text-align: center;
}

.about-hero-content .hero-title,
.about-hero-content .hero-subtitle {
  margin-inline: auto;
}

.about-manifesto-section {
  background: var(--color-charcoal);
}

/* El propio bloque de texto ES el contenedor: envuelve el manifiesto en una
   tarjeta oscura con glow sutil y padding amplio, en vez de dejarlo flotando
   sobre el negro sólido de .about-manifesto-section. */
.about-manifesto {
  max-width: 800px;
  margin-inline: auto;
  line-height: 1.8;
  color: #ebebeb;
  font-size: 1.08rem;
  font-weight: 300;
  text-align: left;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 60px rgba(201, 168, 106, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.about-manifesto p {
  margin: 0 0 2.5rem;
}

.about-manifesto p:last-child {
  margin-bottom: 0;
}

/* Letra capital en el primer párrafo: rompe la monotonía del bloque y marca
   el inicio de la lectura, con el mismo acento dorado que el resto de la
   página. */
.about-manifesto p:first-of-type::first-letter {
  font-size: 3.5em;
  float: left;
  line-height: 1;
  padding-right: 12px;
  padding-top: 4px;
  font-weight: 600;
  color: var(--color-gold);
}

/* Acento de "cita": todos los párrafos salvo el primero llevan un borde
   izquierdo fino (dorado, alternando a rojo) para dar ritmo visual y romper
   la monotonía del texto largo. */
.about-manifesto p:not(:first-of-type) {
  border-left: 2px solid var(--color-gold);
  padding-left: 20px;
}

.about-manifesto p:not(:first-of-type):nth-of-type(even) {
  border-left-color: var(--color-red);
}

.about-manifesto ul {
  margin: 0 0 2.5rem;
  padding-inline-start: 1.4em;
}

.about-manifesto ul:last-child {
  margin-bottom: 0;
}

.about-manifesto li {
  margin-bottom: 0.5em;
}

.about-manifesto li::marker {
  color: var(--color-gold);
}

@media (max-width: 640px) {
  .about-manifesto p:not(:first-of-type) {
    padding-left: 14px;
  }
}

/* Tarjeta "Conecta con Nosotros": Dark Glassmorphism (fondo translúcido,
   borde fino con degradé dorado/rojo) para transmitir exclusividad. Oculta
   por completo (about.js) si el admin no configuró ningún canal de contacto. */
.about-contact-card {
  max-width: 800px;
  margin: var(--space-2xl) auto 0;
  padding: var(--space-lg) var(--space-lg);
  text-align: center;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}

.about-contact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--color-gold) 0%, rgba(201, 168, 106, 0.15) 35%, rgba(188, 22, 34, 0.35) 70%, var(--color-red) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.about-contact-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 600;
}

.about-contact-title {
  margin: var(--space-xs) 0 0;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  color: var(--color-white);
}

.about-contact-subtitle {
  margin: var(--space-xs) auto 0;
  max-width: 480px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.96rem;
  font-weight: 300;
}

.about-contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-block-start: var(--space-md);
}

.about-contact-whatsapp,
.about-contact-email {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium), background var(--duration-fast) var(--ease-premium);
}

.about-contact-whatsapp svg,
.about-contact-email svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.about-contact-whatsapp {
  background: var(--color-gold);
  color: var(--color-black);
  border: 1px solid var(--color-gold);
}

.about-contact-whatsapp:hover {
  transform: translateY(-2px);
}

.about-contact-email {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.about-contact-email:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.about-contact-social {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  margin-block-start: var(--space-md);
}

.about-contact-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.72);
  transition: border-color var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium);
}

.about-contact-social-link svg {
  width: 19px;
  height: 19px;
}

.about-contact-social-link:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .about-contact-card {
    padding: var(--space-md);
  }
}

/* ==========================================================================
   The Journal — journal.html (grid editorial) / article.html (lectura)
   Fase 7: VLOG / Revista Digital.
   ========================================================================== */

.journal-hero {
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(201, 168, 106, 0.18), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(188, 22, 34, 0.14), transparent 45%),
    linear-gradient(160deg, #101012 0%, #1c1c1f 55%, #0b0b0c 100%);
}

.journal-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.3) 100%);
}

.journal-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-xl);
  color: var(--color-white);
  text-align: center;
}

.journal-hero-title {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  color: var(--color-white);
  margin-block-start: var(--space-xs);
}

.journal-hero-subtitle {
  margin-block-start: var(--space-sm);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--color-gold);
  font-weight: 500;
}

.journal-section {
  background: var(--color-off-white);
}

/* Cuadrícula editorial tipo "masonry" con columnas CSS puras (sin librería). */
.journal-grid {
  column-count: 1;
  column-gap: var(--space-lg);
}

@media (min-width: 640px) {
  .journal-grid {
    column-count: 2;
  }
}

@media (min-width: 1080px) {
  .journal-grid {
    column-count: 3;
  }
}

.journal-card {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  margin-block-end: var(--space-lg);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(23, 23, 26, 0.04);
  transition:
    transform var(--duration-med) var(--ease-premium),
    box-shadow var(--duration-med) var(--ease-premium);
}

.journal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(23, 23, 26, 0.25);
}

.journal-card-media-link {
  display: block;
}

.journal-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-off-white);
}

.journal-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-premium);
}

.journal-card:hover .journal-card-media img {
  transform: scale(1.05);
}

.journal-card-media-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--color-off-white) 0%, #ece9e2 100%);
}

.journal-card-body {
  padding: var(--space-md);
}

.journal-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block-end: var(--space-xs);
}

.journal-tag {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-red);
  background: var(--color-red-soft);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}

.journal-tag--light {
  color: var(--color-gold);
  background: rgba(201, 168, 106, 0.14);
}

.journal-card-title {
  font-size: 1.35rem;
  line-height: 1.3;
  margin-block-end: var(--space-xs);
}

.journal-card-title a {
  color: var(--color-ink);
  transition: color var(--duration-fast) var(--ease-premium);
}

.journal-card-title a:hover {
  color: var(--color-red);
}

.journal-card-excerpt {
  color: var(--color-ink-muted);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.6;
  margin-block-end: var(--space-sm);
}

.journal-card-readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-ink);
  transition:
    gap var(--duration-fast) var(--ease-premium),
    color var(--duration-fast) var(--ease-premium);
}

.journal-card-readmore svg {
  width: 16px;
  height: 16px;
}

.journal-card-readmore:hover {
  gap: 0.65rem;
  color: var(--color-red);
}

.journal-loading {
  display: flex;
  justify-content: center;
  padding-block: var(--space-lg);
}

/* ---------------------------- article.html: lectura de lujo ---------------------------- */

.article-hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-charcoal);
}

.article-hero-media {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #101012 0%, #1c1c1f 55%, #0b0b0c 100%);
}

.article-hero-media--empty {
  background:
    radial-gradient(circle at 18% 20%, rgba(201, 168, 106, 0.18), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(188, 22, 34, 0.14), transparent 45%),
    linear-gradient(160deg, #101012 0%, #1c1c1f 55%, #0b0b0c 100%);
}

.article-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.35) 100%);
}

.article-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  padding-block: calc(var(--header-height) + var(--space-lg)) var(--space-xl);
  color: var(--color-white);
  text-align: center;
}

.article-back-link {
  display: inline-block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-block-end: var(--space-md);
  transition: color var(--duration-fast) var(--ease-premium);
}

.article-back-link:hover {
  color: var(--color-gold);
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-block-end: var(--space-sm);
}

.article-title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--color-white);
  line-height: 1.2;
}

.article-date {
  margin-block-start: var(--space-sm);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.article-reading {
  background: var(--color-white);
  padding-block: var(--space-2xl);
}

.article-reading-container {
  max-width: 700px;
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

.article-body {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.9;
  color: var(--color-ink);
  white-space: pre-line;
  text-align: center;
}

@media (min-width: 640px) {
  .article-reading-container {
    padding-inline: var(--space-lg);
  }
}

/* ==========================================================================
   experience.html / vip_services.html — Landing de venta Dark Premium
   Ficha high-ticket: hero cinemático, cuerpo editorial sobre fondo oscuro,
   galería en mosaico asimétrico con lightbox, tarjeta de precio con
   neuromarketing (anclaje de valor, no de precio falso — no hay dato de
   "antes/después" real, así que el anclaje se hace por valor percibido y
   garantías, nunca con descuentos inventados) y barra CTA sticky en móvil.
   Clases "offer-*" dedicadas: NO se comparten con article.html/journal
   para poder llevar esta landing a oscuro sin tocar la lectura del
   Editorial, que sigue viviendo en `.article-*` sobre fondo claro.
   ========================================================================== */

body.experience-page,
body.vip-service-page {
  background: var(--color-black);
}

body.experience-page .property-loading,
body.vip-service-page .property-loading,
body.experience-page .property-error-state,
body.vip-service-page .property-error-state {
  background: var(--color-black);
}

body.experience-page .error-title,
body.vip-service-page .error-title {
  color: var(--color-white);
}

body.experience-page .error-copy,
body.vip-service-page .error-copy {
  color: rgba(255, 255, 255, 0.65);
}

/* ---------------------------- Hero cinemático ---------------------------- */

.offer-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-charcoal);
}

.offer-hero-media {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #101012 0%, #1c1c1f 55%, #0b0b0c 100%);
}

.offer-hero-media--empty {
  background:
    radial-gradient(circle at 18% 20%, rgba(201, 168, 106, 0.2), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(188, 22, 34, 0.16), transparent 45%),
    linear-gradient(160deg, #101012 0%, #1c1c1f 55%, #0b0b0c 100%);
}

.offer-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.22) 55%, rgba(0, 0, 0, 0.48) 100%);
}

.offer-hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding-block: calc(var(--header-height) + var(--space-lg)) var(--space-xl);
  color: var(--color-white);
}

.offer-back-link {
  display: inline-block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-block-end: var(--space-md);
  transition: color var(--duration-fast) var(--ease-premium);
}

.offer-back-link:hover {
  color: var(--color-gold);
}

.offer-title {
  margin-block-start: var(--space-sm);
  font-size: clamp(2.2rem, 5.4vw, 3.8rem);
  color: var(--color-white);
  line-height: 1.12;
}

.offer-subtitle {
  max-width: 60ch;
  margin-block-start: var(--space-sm);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

/* ---------------------- Layout editorial de dos columnas ---------------------- */

.offer-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-block: var(--space-xl) var(--space-2xl);
}

@media (min-width: 960px) {
  .offer-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
  }
}

.offer-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  min-width: 0;
}

.offer-section-heading {
  margin-block-end: var(--space-md);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.offer-body {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.85);
}

.offer-body p {
  margin-block-end: var(--space-sm);
}

.offer-body p:last-child {
  margin-block-end: 0;
}

/* ---------------------------- Galería editorial ---------------------------- */
/* Mosaico asimétrico (no una cuadrícula uniforme): la primera imagen ancla
   el bloque en 2x2 y cada tanda de 6 repite una pieza horizontal, dando
   ritmo de moodboard de revista en vez de una parrilla monótona. */

.offer-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 130px;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .offer-gallery {
    grid-auto-rows: 160px;
    gap: 0.75rem;
  }
}

.offer-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: zoom-in;
  background: linear-gradient(135deg, #232326, #101012);
  border: 0;
  padding: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.offer-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-premium);
}

.offer-gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-premium);
}

.offer-gallery-item:hover img,
.offer-gallery-item:focus-visible img {
  transform: scale(1.08);
}

.offer-gallery-item:hover::after,
.offer-gallery-item:focus-visible::after {
  opacity: 1;
}

.offer-gallery-item:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.offer-gallery-item:nth-child(6n + 5) {
  grid-column: span 2;
}

@media (max-width: 480px) {
  .offer-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .offer-gallery-item:nth-child(6n + 5) {
    grid-column: span 1;
  }
}

.offer-gallery-expand {
  position: absolute;
  z-index: 1;
  inset-block-end: 0.5rem;
  inset-inline-end: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(11, 11, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-premium);
  pointer-events: none;
}

.offer-gallery-item:hover .offer-gallery-expand,
.offer-gallery-item:focus-visible .offer-gallery-expand {
  opacity: 1;
}

.offer-gallery-expand svg {
  width: 14px;
  height: 14px;
}

/* ------------------------------ Curaduría / trust ------------------------------ */

.offer-assurance-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.offer-assurance-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: var(--space-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  line-height: 1.5;
}

.offer-assurance-icon {
  color: var(--color-gold);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ---------------------- Tarjeta de precio: neuromarketing ---------------------- */

.offer-aside {
  position: relative;
}

@media (min-width: 960px) {
  .offer-aside {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-md));
  }
}

.offer-price-card {
  position: relative;
  overflow: hidden;
  text-align: left;
  background: linear-gradient(165deg, rgba(35, 35, 38, 0.92), rgba(11, 11, 12, 0.96));
  border: 1px solid rgba(201, 168, 106, 0.35);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.offer-price-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% -10%, rgba(201, 168, 106, 0.25), transparent 60%);
  pointer-events: none;
}

.offer-price-eyebrow {
  position: relative;
  margin-block-end: var(--space-sm);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.offer-price-label {
  position: relative;
  margin-block-end: 0.35rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.offer-price-amount {
  position: relative;
  margin-block-end: var(--space-md);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  color: var(--color-white);
}

.offer-price-cta {
  position: relative;
  width: 100%;
  text-align: center;
}

.offer-value-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
}

.offer-value-list li {
  position: relative;
  padding-inline-start: 1.2rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.4;
}

.offer-value-list li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-gold);
  font-weight: 700;
}

.offer-price-note {
  position: relative;
  margin-block-start: var(--space-md);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ------------------------- Barra CTA flotante (móvil) ------------------------- */
/* Mantiene "Consultar Disponibilidad" siempre a un toque mientras el
   huésped lee la ficha — se activa cuando el hero sale de vista
   (IntersectionObserver en experience.js / vip-service.js). */

.offer-sticky-bar {
  position: fixed;
  z-index: 40;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.85rem var(--space-sm);
  padding-block-end: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  background: rgba(11, 11, 12, 0.9);
  border-block-start: 1px solid rgba(201, 168, 106, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(110%);
  transition: transform var(--duration-med) var(--ease-premium);
}

.offer-sticky-bar.is-visible {
  transform: translateY(0);
}

.offer-sticky-bar-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.offer-sticky-bar-label {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.offer-sticky-bar-price {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-white);
}

.offer-sticky-bar .btn {
  flex-shrink: 0;
}

@media (min-width: 960px) {
  .offer-sticky-bar {
    display: none;
  }
}

/* ==========================================================================
   Fase 11 — Capa Cinemática "Lux"
   Micro-interacciones magnéticas, tilt 3D, progreso de lectura y Ken Burns.
   Todo se apaga bajo prefers-reduced-motion (lux.js ni siquiera se inicia).
   ========================================================================== */

/* Barra de progreso de lectura (inyectada por lux.js) */

.lux-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  z-index: 200;
  background: linear-gradient(90deg, var(--color-gold), #e8d5ab);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* Header: al hacer scroll gana cuerpo (más contraste, línea dorada sutil) */

.site-header.is-scrolled {
  background: rgba(11, 11, 12, 0.82);
  border-bottom-color: rgba(201, 168, 106, 0.22);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.55);
}

/* Botones magnéticos: persiguen sutilmente al cursor y regresan con resorte */

.lux-magnetic {
  transform: translate(var(--lux-mx, 0px), var(--lux-my, 0px));
  transition: transform 0.35s var(--ease-premium);
  will-change: transform;
}

/* Tilt 3D: mientras lux.js controla el transform inline, la sombra del
   hover se mantiene y la transición del CSS no compite con el puntero. */

.lux-tilting {
  transition: box-shadow var(--duration-fast) var(--ease-premium);
  will-change: transform;
}

/* Ken Burns: paneo/zoom lentísimo del video del hero, capa de cine.
   100% CSS, acelerado por GPU (translate3d + will-change), sin JS en el
   scroll: el navegador compone la capa una sola vez y la anima aparte del
   hilo principal, garantizando 60fps sin importar el hardware del cliente. */

@media (prefers-reduced-motion: no-preference) {
  .hero-video {
    will-change: transform;
    animation: lux-ken-burns 32s ease-in-out infinite alternate;
  }
}

@keyframes lux-ken-burns {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(0, 0, 0) scale(1.06); }
}

/* Círculo Privado: honeypot invisible y estado de error del feedback */

.vip-website {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.vip-feedback.is-error {
  color: #f2a7ad;
}