:root {
  /* Fondo de página en oscuro: verde selva oscuro CON degradado, no negro.
     Recorre #101c0e arriba → #0b140a → #070e06 abajo. Es un recorrido corto a
     propósito: el suficiente para que la página respire y no se lea como un
     bloque plano, pero no tanto como para que una sección quede visiblemente
     más clara que otra (el problema del degradado anterior, que iba de
     #35562f a #040803 y hacía que el tono dependiera del scroll).

     Verde y no negro, pero apenas: arriba es r20 g27 b24. El verde sigue
     mandando —g es el canal más alto— y el azul va por encima del rojo, que
     es lo que lo aleja del verde crudo. Lo que cambió en el último paso fue
     la DISTANCIA: de 14 puntos de g sobre r a 7. A 14 el verde se anunciaba;
     a 7 solo se insinúa. Subir esa distancia devuelve el énfasis verde;
     igualar los tres canales lo mata y queda gris muerto.
     Recorrido completo: #1e311b → #0c140b → #070c06 (negro del todo) →
     #101c0e (verde puro) → #121d17 → #18261e (verde aún muy anunciado) →
     estos tres.
     (Antes de todo esto el fondo era azul petróleo #0b2d38 con turquesa
     #2b868f arriba — el azul que más se veía del sitio.) */
  --page-bg-soft: #141b18;
  --page-bg-mid:  #0f1512;
  /* Versión rgb: los velos de sección necesitan aplicarle alfa. */
  --page-bg-mid-rgb: 15, 21, 18;
  --page-bg-deep: #0a0f0d;
  --page-panel: rgba(var(--brand-water-rgb), 0.20);
  --page-panel-strong: rgba(var(--brand-water-rgb), 0.28);
  --page-panel-soft: rgba(var(--brand-sage-rgb), 0.16);
  --page-line: rgba(var(--brand-sand-rgb), 0.12);
  --page-line-strong: rgba(var(--brand-canopy-rgb), 0.28);
  --page-water-soft: rgba(var(--brand-water-rgb), 0.30);
  --page-sage-soft: rgba(var(--brand-sage-rgb), 0.18);
  --page-earth-soft: rgba(var(--brand-earth-rgb), 0.28);
  --page-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  --page-shadow-strong: 0 30px 80px rgba(0, 0, 0, 0.28);
}

html {
  scroll-padding-top: 6rem;
}

/* Estructura recuperada de la versión anterior del sitio (JoyTree en
   Descargas): un halo ancho arriba —el 34% de alto, muy abierto— sobre un
   degradado que va del verde tinta suave al fondo profundo. Ese halo es lo
   que evitaba que la parte alta se leyera plana. Lo único que cambia
   respecto de aquel archivo es la paleta: allí el halo era el agua turquesa
   (#5d95a8) y aquí es el verde de marca. */
body.joytree-home {
  background:
    radial-gradient(circle at top, rgba(var(--brand-water-rgb), 0.20) 0%, rgba(var(--brand-water-rgb), 0) 34%),
    linear-gradient(180deg, var(--brand-ink-soft) 0%, var(--page-bg-deep) 100%);
}

/* El fondo plano es una decisión del tema oscuro. En claro se conserva el
   degradado de siempre: ahí los tres stops siguen valiendo distinto. */
html[data-theme="light"] body.joytree-home {
  background:
    radial-gradient(circle at top, rgba(var(--brand-water-rgb), 0.28) 0%, rgba(var(--brand-water-rgb), 0) 24%),
    linear-gradient(180deg, rgba(8, 26, 7, 0.24) 0%, var(--page-bg-soft) 14%, var(--page-bg-mid) 30%, var(--page-bg-deep) 100%);
}

.site-main {
  position: relative;
  z-index: 1;
}

.site-main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--brand-sand-rgb), 0.025) 0, rgba(var(--brand-sand-rgb), 0.025) 1px, transparent 1px, transparent 100%);
  background-size: min(100%, 4.5rem) 100%;
  opacity: 0.28;
  mask-image: linear-gradient(180deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.joytree-navbar {
  padding: 1rem 0;
  border-bottom: 1px solid transparent;
  background: rgba(var(--brand-ink-rgb), 0.18);
  backdrop-filter: blur(0);
  transform: translateY(-110%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 360ms ease,
    opacity 360ms ease,
    background-color 360ms ease,
    border-color 360ms ease,
    box-shadow 360ms ease,
    padding 240ms ease;
}

.joytree-navbar.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  background: rgba(var(--brand-ink-rgb), 0.86);
  backdrop-filter: blur(18px);
  border-color: rgba(var(--brand-canopy-rgb), 0.12);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
}

.joytree-navbar.is-compact {
  padding: 0.7rem 0;
}

/* La esfera domina la pantalla — el nav se difumina para no taparle
   el dial (ver bindHeroNavDim en page-enhancements.js). Vuelve a su
   opacidad normal en cuanto se sale del umbral de intersección. */
.joytree-navbar.is-hero-dimmed {
  opacity: 0.1;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 500ms ease, transform 500ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .joytree-navbar.is-hero-dimmed { transition: none; }
}

/* ── CTA "Descubre más" → revela la nav ──────────────────────────────────────── */

/* Botón se desvanece al tocarlo */
.hero-cta.is-dismissed {
  opacity:        0    !important;
  pointer-events: none !important;
  transform:      translateY(8px) !important;
  transition:     opacity 300ms ease, transform 300ms ease !important;
}

/* Logo entra desde la izquierda */
@keyframes jt-nav-brand-left {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0);     }
}

/* Links entran desde la derecha con stagger */
@keyframes jt-nav-item-right {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0);    }
}

.joytree-navbar.is-cta-revealed .joytree-brand {
  animation: jt-nav-brand-left 400ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
}

.joytree-navbar.is-cta-revealed .nav-item {
  animation: jt-nav-item-right 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.joytree-navbar.is-cta-revealed .nav-item:nth-child(1) { animation-delay: 120ms; }
.joytree-navbar.is-cta-revealed .nav-item:nth-child(2) { animation-delay: 175ms; }
.joytree-navbar.is-cta-revealed .nav-item:nth-child(3) { animation-delay: 230ms; }
.joytree-navbar.is-cta-revealed .nav-item:nth-child(4) { animation-delay: 285ms; }
.joytree-navbar.is-cta-revealed .nav-item:nth-child(5) { animation-delay: 340ms; }
.joytree-navbar.is-cta-revealed .nav-item:nth-child(6) { animation-delay: 395ms; }
.joytree-navbar.is-cta-revealed .nav-item:nth-child(7) { animation-delay: 450ms; }
.joytree-navbar.is-cta-revealed .nav-item:nth-child(8) { animation-delay: 505ms; }

@media (prefers-reduced-motion: reduce) {
  .hero-cta.is-dismissed { transition: none !important; }
  .joytree-navbar.is-cta-revealed .joytree-brand,
  .joytree-navbar.is-cta-revealed .nav-item { animation: none; }
}

.joytree-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  perspective: 600px;
  perspective-origin: center center;
}

.joytree-brand-jt-link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  transform-origin: center center;
  animation: jtJTLift 10s 1.6s infinite both;
  will-change: transform;
}

.joytree-brand-logo {
  width: clamp(7.5rem, 11vw, 10rem);
  filter: brightness(1.08) contrast(1.02);
  animation: jtJTGlow 10s 1.6s infinite;
}

/* Sello "By TAO" — misma coreografía que antes vivía en la esfera
   (ver comentario de la secuencia en hero.css, junto a @keyframes jtTaoReveal) */
.joytree-brand-tao-badge {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  animation: jtTaoReveal 10s 1.6s infinite both;
  will-change: opacity, transform, filter;
}

.joytree-brand-tao-by {
  font-family: var(--font-body);
  line-height: 1;
  font-size: clamp(0.8rem, 1.4vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(var(--brand-sand-rgb), 0.80);
  white-space: nowrap;
}

/* El logo de TAO en claro es el "FULL COLOR" (círculo dorado + texto oscuro).
   El brightness(1.12) y la sombra negra del tema oscuro le lavaban el dorado y
   le dejaban un halo sucio sobre el fondo claro: aquí se sustituyen por una
   sombra suave que solo lo despega del fondo. */
html[data-theme="light"] .joytree-brand-tao-logo {
  filter: drop-shadow(0 1px 3px rgba(26, 43, 46, 0.14));
}

html[data-theme="light"] .joytree-brand-tao-by {
  color: rgba(var(--brand-ink-rgb), 0.72);
}

.joytree-brand-tao-logo {
  height: clamp(1.5rem, 2.8vw, 2.2rem);
  width: auto;
  max-width: none;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(1.12) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.38));
}

@media (prefers-reduced-motion: reduce) {
  .joytree-brand-tao-badge { animation: none; opacity: 0; }
  .joytree-brand-jt-link,
  .joytree-brand-logo { animation: none; }
}

/* ── Espacio del sello "By TAO" ───────────────────────────────────────────────
   El sello va en position:absolute, así que NO ocupa sitio en la barra: la
   marca mide solo lo que el logo (~146px) mientras el sello llega hasta ~373px.
   Con el menú horizontal al lado, el sello acababa encima de "INICIO" — medido:
   solape desde 1366px (la resolución de portátil más común) hacia abajo; a
   1440px y más había holgura, y por eso no se veía en cualquier equipo.
   Aquí se reserva su huella real: recorrido de la animación + su propio ancho.

   Estas dos reglas van DESPUÉS de .joytree-brand-tao-badge a propósito: las
   media queries no suman especificidad, así que el display:none de abajo solo
   gana al display:flex de arriba por orden de aparición. */

/* 1000px y no el breakpoint lg de Bootstrap: el menú horizontal de este sitio
   aparece hacia los 900px, pero entre 900 y 980px los seis enlaces ya ocupan
   casi todo el ancho y reservar sitio para el sello empujaba la barra a DOS
   filas (153px de alto en vez de 134px). Por debajo de 1000px se resuelve
   escondiendo el sello, no reservando. */
@media (min-width: 1000px) {
  .joytree-brand {
    min-width: calc(clamp(6.5rem, 9.5vw, 9.5rem) + 8.5rem);
  }
}

/* Las dos franjas donde el sello no cabe de ninguna manera:
   · 768–999px — aquí el menú horizontal completo puede estar presente (a partir
     de ~900px, y desde 768px en tablet apaisada por la regla de más abajo que
     replica navbar-expand-lg). El ancho es justo: reservarle sitio al sello
     parte la barra en dos filas, así que se retira en vez de reservarlo.
   · ≤419px — se montaba sobre "Invierte ahora" (48px de solape a 320px, 8px a
     360px). No caben logo + sello + CTA + hamburguesa. */
@media (min-width: 768px) and (max-width: 999.98px),
       (max-width: 419.98px) {
  .joytree-brand-tao-badge { display: none; }
}

.joytree-navbar-toggler {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border-color: rgba(var(--brand-sand-rgb), 0.16);
  border-radius: var(--button-radius);
  box-shadow: none !important;
}

.joytree-toggler-bar {
  display: block;
  width: 1.2rem;
  height: 1.5px;
  background: rgba(var(--brand-sand-rgb), 0.85);
  border-radius: 2px;
  transition:
    transform 280ms ease,
    opacity 180ms ease,
    width 280ms ease;
  transform-origin: center;
}

.joytree-navbar-toggler[aria-expanded="true"] .joytree-toggler-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.joytree-navbar-toggler[aria-expanded="true"] .joytree-toggler-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.joytree-navbar-toggler[aria-expanded="true"] .joytree-toggler-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.joytree-mobile-cta {
  display: none;
}

.joytree-navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-canopy-rgb), 0.18) !important;
}

.joytree-navbar .navbar-nav {
  flex-wrap: nowrap;
}

.joytree-nav-link,
.joytree-nav-cta {
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.joytree-nav-link {
  position: relative;
  color: rgba(var(--brand-sand-rgb), 0.74);
  padding: 0.85rem 0.95rem !important;
  transition: color 220ms ease;
}

.joytree-nav-link::after {
  content: "";
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 0.45rem;
  height: 1px;
  transform: scaleX(0);
  transform-origin: center;
  background: linear-gradient(90deg, transparent, var(--hero-accent), transparent);
  transition: transform 260ms ease;
}

.joytree-nav-link:hover,
.joytree-nav-link:focus-visible,
.joytree-nav-link.active {
  color: var(--hero-text);
}

.joytree-nav-link:hover::after,
.joytree-nav-link:focus-visible::after,
.joytree-nav-link.active::after {
  transform: scaleX(1);
}

.joytree-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.95rem;
  padding: 0.75rem 1.3rem;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.42);
  border-radius: var(--button-radius);
  background: linear-gradient(135deg, rgba(var(--brand-canopy-rgb), 0.96), rgba(var(--brand-earth-rgb), 0.9));
  color: var(--brand-ink);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
}

.joytree-nav-cta:hover,
.joytree-nav-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24);
  filter: brightness(1.04);
}

.hero-footer-inner {
  gap: 1rem;
}

.hero-scrollcue {
  --scrollcue-lift: -1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.3rem 0;
  border-radius: var(--button-radius);
  color: rgba(var(--brand-sand-rgb), 0.82);
  transform: translateY(var(--scrollcue-lift));
  transition: color 220ms ease, transform 220ms ease;
}

.hero-scrollcue:hover,
.hero-scrollcue:focus-visible {
  color: var(--hero-accent);
  transform: translateY(calc(var(--scrollcue-lift) - 1px));
}

.hero-scrollcue-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.hero-scrollcue-arrows {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
}

.hero-scrollcue-arrows span {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-bottom: 1.75px solid currentColor;
  border-right: 1.75px solid currentColor;
  transform: rotate(45deg);
  animation: heroCueDrift 2s infinite;
}

.hero-scrollcue-arrows span:nth-child(2) {
  animation-delay: -0.2s;
}

.hero-scrollcue-arrows span:nth-child(3) {
  animation-delay: -0.4s;
}

.story-section {
  position: relative;
  padding: clamp(6rem, 10vw, 8.5rem) 0;
  overflow: clip;
}

.story-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── Secciones sin foto de fondo ───────────────────────────────────────────
   Cada una pinta su propio degradado, como en la versión anterior del sitio.
   Un rato estuvieron transparentes, dejando ver el fondo de página: se veía
   plano y, peor, el tono de cada sección dependía de dónde cayera en el
   scroll. Con degradado propio y opaco, cada sección controla su tono y el
   recorrido del fondo de página deja de importar.

   El radial de acento va muy abierto y muy bajo de opacidad (0.07–0.13): no
   se ve como una mancha, se ve como que la superficie tiene volumen.

   Los degradados no son opacos del todo (0.90–0.92): dejan pasar un resto
   del fondo de página, que es lo que impide que cada sección se lea como un
   rectángulo pegado encima de la anterior.

   Las que SÍ llevan foto (#amenidades, #why-joytree, #ubicacion, #contacto)
   conservan su velo — ahí el degradado es lo que deja asomar la imagen. ── */
.story-section--explore {
  padding: clamp(4rem, 6vw, 6.5rem) 0;
  background:
    radial-gradient(circle at 85% 18%, rgba(var(--brand-water-rgb), 0.13), transparent 34%),
    linear-gradient(180deg, rgba(var(--page-bg-mid-rgb), 0.92), rgba(var(--brand-ink-rgb), 0.92));
}

/* Secciones a sangre completa.
   .story-section--explore trae padding vertical, pensado para secciones cuyo
   contenido vive dentro de un .container. Pero #explore y #arquitecto tienen
   hijos que ocupan todo el ancho y traen su propio fondo (.intro-block,
   .explore-entrance, .explore-architect con la foto .amezcua-hero). En esos
   dos, el padding no separaba nada: solo dejaba ~86px arriba y abajo donde
   asomaba el degradado claro de la sección, y se leía como una franja azul
   entre dos bloques oscuros.
     · #explore   — arriba empujaba la imagen de entrada fuera de cuadro;
                    abajo cortaba la continuidad con #price-anchor.
     · #arquitecto — arriba metía una franja entre la esfera y la foto de
                    Julio Amezcua; abajo, otra entre las cifras y #kineki.
   La barra de navegación es fixed-top y arranca oculta, así que tampoco hay
   que reservarle espacio arriba.
   #escenarios usa la misma clase pero su contenido sí va en .container: ahí el
   padding es espaciado real y se conserva. */
#explore,
#arquitecto {
  padding-top: 0;
  padding-bottom: 0;
}

.story-section--invest {
  background:
    radial-gradient(circle at 8% 18%, rgba(var(--brand-earth-rgb), 0.13), transparent 32%),
    linear-gradient(180deg, rgba(var(--brand-ink-soft-rgb), 0.98) 0%, rgba(var(--brand-ink-rgb), 0.98) 100%);
}

.story-section--invest::before {
  background:
    linear-gradient(90deg, rgba(var(--brand-sand-rgb), 0.025), transparent 24%, transparent 76%, rgba(var(--brand-sand-rgb), 0.025));
}

.story-section--amenities {
  padding: 0;
  background:
    linear-gradient(rgba(var(--brand-shadow-rgb), 0.66), rgba(var(--brand-shadow-rgb), 0.70)),
    url("../images/explora.jpg") center/cover;
  background-attachment: fixed, fixed;
}

/* iOS Safari / Chrome mobile no soportan background-attachment:fixed */
@supports (-webkit-touch-callout: none) {
  .story-section--amenities {
    background-attachment: scroll, scroll;
  }
}

.story-section--amenities::before {
  display: none;
}

.story-section--benefits {
  background:
    radial-gradient(circle at 90% 12%, rgba(var(--brand-sage-rgb), 0.14), transparent 30%),
    linear-gradient(180deg, rgba(var(--brand-ink-rgb), 0.98) 0%, rgba(var(--brand-ink-soft-rgb), 0.98) 100%);
}

/* ── Sección unificada Por qué Joy Tree ──────────────────────────────────────
   Fondo: la vista aérea de la costa (xcacel) bajo un velo oscuro. El velo no
   es decorativo — la foto es de día, con cielo y agua muy claros, y sin él ni
   el título ni el texto de apoyo llegarían al contraste mínimo. Se abre al
   centro para que el turquesa y la selva se lean entre las cards.

   El velo es --brand-shadow (casi negro), no --brand-ink (verde). El cambio
   no es estético: sobre el 5% más claro de esta foto (196,212,241 — cielo y
   agua) el verde obliga a subir la opacidad hasta 0.80 para que el texto de
   cuerpo llegue a 4.5:1, y a esa densidad la foto ya no se ve. Con el casi
   negro se cumple con bastante menos, así que la imagen respira Y el
   contraste sube.

   DÓNDE ESTÁ EL LÍMITE (medido, no a ojo). El único texto que se apoya
   directamente sobre el fondo es el encabezado: .section-kicker, .section-title
   y .section-copy. El de las tarjetas no cuenta — va sobre el panel de
   .unified-card, que aporta su propio 0.70 de tinta y aguanta 5.6:1 aunque el
   velo baje a 0.28. Componiendo el velo sobre el peor pixel de la foto de
   respaldo, el texto de cuerpo (sand al 82%) da:
       velo 0.70 → 5.08:1    velo 0.66 → 4.52:1    velo 0.62 → 4.04:1  ✗
   O sea que el suelo real para la zona del encabezado es ~0.66. Se deja en
   0.70 para conservar margen: ahí incluso el percentil 99 de la foto
   (220,235,255) sigue dando 4.63:1.

   OJO CON EL DESTELLO. Medido sobre el render real con el video corriendo, en
   la banda del párrafo aparecen píxeles de espuma de ~240 —bastante más claros
   que el p95 de la foto— y ahí el texto de cuerpo necesita 0.70 de velo para
   llegar a 4.5:1. Por eso la rampa lineal termina en 680px y no en 300: a
   300px el párrafo caía ya en la zona clara y se quedaba en 3.5:1. Esto no se
   ve modelando la foto, solo muestreando los píxeles del video.

   Antes la zona del encabezado acumulaba 1−(1−0.82)(1−0.61) = 0.93, tres veces
   más velo del necesario, y por eso el video de Xcacel no se distinguía. Ahora
   queda ~0.80 en el título, ~0.72 en el párrafo y 0.46 en el centro —donde no
   hay texto suelto y está la mayor parte de la imagen visible—, contra 0.93 /
   0.88 / 0.70 de antes. Si se vuelven a mover, hay que rehacer esta cuenta.
   Mismo criterio en --amenities, --location y --contact. */
.story-section--why {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 6.5vw, 6rem) 0;
  /* Solo la foto: los degradados se movieron a .why-bg-tint, que va por
     encima del video de fondo. Aquí quedan como respaldo para cuando el
     video no se carga (móvil, ahorro de datos, menos animación). */
  background: url("../images/amenidades/xcacel-bg.webp") center/cover;
  background-attachment: fixed;
}

/* ── Fondo de video de la sección ───────────────────────────────────────────
   El video se sirve como capa propia y no como background porque CSS no
   admite video: va detrás de todo, con el tinte encima y el contenido sobre
   ambos. */
.why-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.why-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Aparece cuando ya hay fotograma que enseñar: sin esto se ve un salto del
     poster al primer frame del video. */
  opacity: 0;
  transition: opacity 700ms ease;
}

.why-bg-video.is-playing { opacity: 1; }

/* Los tres degradados que antes vivían en el background de la sección: el
   texto de las tarjetas necesita este contraste para leerse sobre el mar. */
.why-bg-tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--brand-shadow-rgb), 0.33) 0%, rgba(var(--brand-shadow-rgb), 0.42) 55%, rgba(var(--brand-shadow-rgb), 0.53) 100%),
    linear-gradient(180deg, rgba(var(--brand-shadow-rgb), 0.68) 0, rgba(var(--brand-shadow-rgb), 0.20) 680px, rgba(var(--brand-shadow-rgb), 0.20) calc(100% - 680px), rgba(var(--brand-shadow-rgb), 0.68) 100%);
}

/* En tema claro --brand-shadow-rgb es crema, no tinta, así que este mismo velo
   se invierte solo y aclara en vez de oscurecer. Pero ahí el título y el texto
   de apoyo son OSCUROS, de modo que la relación se da la vuelta: aligerar el
   velo —que en oscuro hace que se vea más el video— en claro les QUITA
   contraste. Medido con los valores nuevos, el texto de cuerpo caía a 4.51:1,
   pegado al mínimo de 4.5 y a merced del fotograma que toque. Se conservan
   aquí las opacidades de antes, con las que el tema claro se ve exactamente
   igual que siempre. */
html[data-theme="light"] .why-bg-tint {
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--brand-shadow-rgb), 0.55) 0%, rgba(var(--brand-shadow-rgb), 0.68) 55%, rgba(var(--brand-shadow-rgb), 0.82) 100%),
    linear-gradient(180deg, rgba(var(--brand-shadow-rgb), 0.88) 0, rgba(var(--brand-shadow-rgb), 0.34) 300px, rgba(var(--brand-shadow-rgb), 0.34) calc(100% - 300px), rgba(var(--brand-shadow-rgb), 0.88) 100%);
}

/* El contenido por encima de las dos capas de fondo. */
.story-section--why > .section-shell,
.story-section--why > .container {
  position: relative;
  z-index: 2;
}

/* En pantallas chicas basta la versión de 1280px: la de 2048 son 174 KB de
   más que nadie llega a ver. */
/* En pantallas chicas basta la versión de 1280px: la de 2048 son 174 KB de
   más que nadie llega a ver. */
@media (max-width: 900px) {
  .story-section--why {
    background-image: url("../images/amenidades/xcacel-bg-1280.webp");
    /* En móvil el fondo va con scroll aunque el navegador soporte fixed: con
       fixed la imagen se dimensiona al viewport (390x844 vertical) y de una
       foto 16:9 solo se alcanza a ver un recorte diminuto. */
    background-attachment: scroll;
  }
}

/* iOS Safari / Chrome mobile no soportan background-attachment: fixed — sin
   esto la imagen se estira o desaparece. Mismo apaño que en amenidades. */
@supports (-webkit-touch-callout: none) {
  .story-section--why {
    background-attachment: scroll;
  }
}

.story-section--why::before {
  background:
    linear-gradient(90deg, rgba(var(--brand-sand-rgb), 0.025), transparent 22%, transparent 78%, rgba(var(--brand-sand-rgb), 0.025));
}

/* ── Unified card (fusión insight-card + benefit-tile) ───── */
.unified-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  height: 100%;
  padding: 1.75rem 1.6rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.07);
  background: linear-gradient(145deg,
    rgba(var(--brand-ink-soft-rgb), 0.80) 0%,
    rgba(var(--brand-ink-rgb), 0.70) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 320ms ease, transform 280ms ease, box-shadow 320ms ease;
  position: relative;
  overflow: hidden;
}

.unified-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--brand-canopy-rgb), 0.06), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms ease;
}

.unified-card:hover {
  border-color: rgba(var(--brand-canopy-rgb), 0.38);
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(0,0,0,0.32), 0 0 0 1px rgba(var(--brand-canopy-rgb), 0.14);
}

/* Las caras de las cards de escenarios ya viven dentro de un contenedor con
   su propio transform 3D (el flip) — el lift de hover del .unified-card
   normal pelearía con esa rotación, así que se desactiva aquí.
   OJO: el reverso NO puede llevar "transform: none". Su rotateY(180deg) es lo
   único que lo mantiene de frente cuando la card está volteada, y :hover
   (0,2,0) le gana a .esc-card-back (0,1,0). Al borrarlo, backface-visibility
   deja la cara de espaldas, deja de recibir hit-test, se pierde el :hover,
   vuelve el rotateY, vuelve el :hover... la card parpadea a velocidad de frame
   con solo dejar el cursor encima. Hay que reafirmar la rotación, no anularla. */
.esc-card-front:hover { transform: none; }
.esc-card-back:hover  { transform: rotateY(180deg); }

.unified-card:hover::before {
  opacity: 1;
}

.unified-card:hover .card-icon {
  background: var(--hero-accent);
  border-color: var(--hero-accent);
  color: var(--brand-ink);
  transform: scale(1.12) translateY(-2px);
}

.unified-card .card-icon {
  font-size: 1.4rem;
  color: var(--hero-accent);
  margin-bottom: 0;
  flex-shrink: 0;
}

.unified-card .card-tag {
  font-size: 0.60rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(var(--brand-canopy-rgb), 0.75);
  background: rgba(var(--brand-canopy-rgb), 0.07);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.16);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  align-self: center;
}

.unified-card h3 {
  font-family: var(--font-serif);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 400;
  color: var(--hero-text);
  margin: 0;
  text-align: center;
}

.unified-card p {
  font-size: 0.86rem;
  line-height: 1.80;
  color: rgba(var(--brand-sand-rgb), 0.68);
  margin: 0;
  flex: 1;
  text-align: center;
}

/* ── Cards de dos caras de "13 motivos que aseguran tu inversión" ──────────
   Frente: icono + etiqueta + gancho.  Reverso: el texto largo.
   Se voltean con el botón de cada card, nunca solas (why-cards.js).
   Mismo patrón 3D que las .esc-card de #escenarios. */
.why-card {
  position: relative;
  height: 100%;
  perspective: 1600px;
  border-radius: 1.25rem;
}

.why-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  /* Las dos caras van en position:absolute y no aportan altura, así que el
     alto lo fija esta variable. La calcula why-cards.js midiendo la cara más
     alta de las 26: así las 13 quedan exactamente iguales en cualquier ancho,
     sin números mágicos que se rompan al cambiar un texto. */
  min-height: var(--why-card-h, 17rem);
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.4, 0.2, 0.2, 1);
}

.why-card.is-flipped .why-card-inner {
  transform: rotateY(180deg);
}

.why-card-face {
  position: absolute;
  inset: 0;
  margin: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  justify-content: center;
}

/* Hueco para la píldora de volteo, que va en absolute y no reserva sitio.
   Con el ID delante a propósito: .unified-card redefine su padding entero en
   tres media queries (991, 767 y 575px) y sin ganar especificidad el hueco
   desaparecía justo en móvil, donde el botón se montaba sobre el texto. */
#why-joytree .why-card-face {
  padding-bottom: 3.6rem;
}

/* El lift de hover de .unified-card pelea con la rotación 3D del contenedor:
   aquí el hover lo maneja .why-card, no cada cara. El reverso reafirma su
   rotateY en vez de anularla — ver la nota larga en .esc-card-back:hover:
   con "transform: none" la card entra en un bucle de parpadeo en cuanto el
   cursor se queda quieto sobre ella. */
.why-card-front:hover { transform: none; }
.why-card-back:hover  { transform: rotateY(180deg); }

.why-card:hover .why-card-face {
  border-color: rgba(var(--brand-canopy-rgb), 0.38);
  box-shadow: 0 20px 56px rgba(0,0,0,0.32), 0 0 0 1px rgba(var(--brand-canopy-rgb), 0.14);
}

/* backface-visibility solo oculta el pintado: la cara de espaldas sigue
   capturando clics en algunos navegadores. Se corta el hit-test a mano. */
.why-card-back {
  transform: rotateY(180deg);
  pointer-events: none;
}

.why-card.is-flipped .why-card-front { pointer-events: none; }
.why-card.is-flipped .why-card-back  { pointer-events: auto; }

/* En el reverso el texto es el protagonista. Ojo: el alto de TODAS las cards
   lo fija el reverso más largo, así que cada décima de line-height aquí se
   paga como cientos de píxeles de card vacía en el frente. */
.why-card-back p {
  flex: 0 1 auto;
  font-size: 0.86rem;
  line-height: 1.68;
  color: rgba(var(--brand-sand-rgb), 0.82);
}

/* Misma píldora que "Ver detalles" en #escenarios, centrada abajo porque
   estas cards son mucho más estrechas: pegada a una esquina se comía el
   ancho útil del texto. Vive fuera de .why-card-inner, así que no gira. */
.why-flip-btn {
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  transform: translateX(-50%);
  z-index: 2;
  min-height: 2.15rem;
  padding: 0 0.85rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(var(--brand-ink-rgb), 0.78);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.35);
  color: var(--hero-accent);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.why-flip-btn i {
  font-size: 0.72rem;
  /* Solo gira el icono: si rotara el botón entero, la etiqueta quedaría
     de cabeza. */
  transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.why-card.is-flipped .why-flip-btn i {
  transform: rotate(180deg);
}

.why-flip-btn:hover {
  background: rgba(var(--brand-canopy-rgb), 0.18);
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
}

html[data-theme="light"] .why-flip-btn {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(var(--brand-canopy-rgb), 0.30);
  color: var(--brand-canopy);
}

html[data-theme="light"] .why-flip-btn:hover {
  background: rgba(var(--brand-canopy-rgb), 0.12);
}

/* En tema claro --brand-ink ES el crema (los roles se invierten), así que sin
   esto el reverso quedaba crema sobre crema: invisible, 1.00:1 medido. */
html[data-theme="light"] .why-card-back p { color: rgba(var(--brand-sand-rgb), 0.82); }

/* Icono servido como PNG en lugar de glifo o SVG en línea (world.png).
   Va como máscara CSS, no como <img>: así el dibujo se pinta con currentColor
   y hereda tanto el acento de la card como el vuelco a --brand-ink del hover,
   igual que los <i class="fas ..."> de las otras doce. Un <img> se quedaría
   blanco fijo y cantaría en el hover y en tema claro.
   Mismo tamaño que .card-icon svg para que las trece pesen igual. */
.card-icon-img {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.card-icon-img--world {
  -webkit-mask-image: url("../iconos/world-icon.png");
          mask-image: url("../iconos/world-icon.png");
}

.card-icon-img--preventa {
  -webkit-mask-image: url("../iconos/preventa-icon.png");
          mask-image: url("../iconos/preventa-icon.png");
}

/* Gancho del frente. Tres cosas a la vez:
   · en minúsculas (el resto de .unified-card h3 va en versales) porque a dos
     renglones y en caja alta se leía como un letrero, no como una frase;
   · 1.125rem es el cuerpo más grande con el que los trece caben en DOS
     renglones incluso en la columna más estrecha (228px, entre 1200 y 1399px);
     a 1.1875rem dos de ellos ya se van a tres;
   · min-height de dos renglones para que los que ocupan uno reserven lo mismo
     y los trece iconos, etiquetas y ganchos queden a la misma altura. */
#why-joytree .why-card-front h3 {
  text-transform: none;
  font-size: 1.125rem;
  line-height: 1.2;
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* La etiqueta sube de 0.60 a 0.68rem. El tope lo pone "Financiamiento
   disponible", la más larga de las trece: por encima de esto se parte en dos
   renglones y descuadra la fila. */
#why-joytree .why-card .card-tag {
  white-space: nowrap;
  font-size: 0.68rem;
}

/* A partir de 1200px son 5 por fila: la columna se vuelve estrecha y el texto
   necesita más líneas. Se compacta un punto para que la card no se dispare. */
@media (min-width: 1200px) {
  .why-card-back p { font-size: 0.8rem; line-height: 1.6; }
  .why-card-front  { padding-left: 1.15rem; padding-right: 1.15rem; }
  .why-card-back   { padding-left: 1.15rem; padding-right: 1.15rem; }

  /* A 1200–1399 la columna baja a 204px y "PARQUES ECOTURÍSTICOS" —la
     etiqueta más larga— se partía en dos líneas, rompiendo la alineación de
     toda la fila. Se compacta cuerpo, tracking y padding para que entre de
     una sola línea con margen de sobra, y se prohíbe el salto. */
  #why-joytree .why-card .card-tag {
    white-space: nowrap;
    font-size: 0.62rem;
    letter-spacing: 0.10em;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }
}

/* Entre 1200 y 1399 la columna se queda clavada en 204px mientras el gancho
   sigue creciendo con el clamp del vw: a 1280 el título ya pide 19.2px y
   "Tres aeropuertos. Un mismo destino." se parte en cuatro líneas, que empuja
   el alto común de las trece. Se congela el cuerpo del gancho en esa banda; a
   partir de 1400 la columna vuelve a ensancharse y el clamp sigue su curso.
   Al mismo tiempo, "FINANCIAMIENTO DISPONIBLE" (25 caracteres) es la etiqueta
   más larga de las trece y con el nowrap ya no cabía: se compacta un punto
   más solo aquí. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* Baja a 1rem: en esta banda la columna se queda clavada en 228px y a
     1.125rem dos de los trece ganchos se van a un tercer renglón. */
  #why-joytree .why-card h3 { font-size: 1rem; }

  #why-joytree .why-card .card-tag {
    font-size: 0.55rem;
    letter-spacing: 0.08em;
  }
}

/* El kicker de esta sección va un punto por encima del resto: es la entrada a
   los 13 motivos y compite con una foto de fondo a pantalla completa. */
.story-section--why .section-kicker {
  font-size: clamp(0.92rem, 1.5vw, 1.15rem);
  letter-spacing: 0.2em;
}

/* Grid de 13 cards "Por qué Joy Tree": 5 por fila en desktop, 2 en tablet (col-md-6),
   1 en mobile. Como 13 no divide exacto en ningún breakpoint, el .row lleva
   justify-content-center: la última fila queda centrada en vez de colgar a la
   izquierda. Si cambia el número de cards, esto sigue funcionando sin tocar nada. */
@media (min-width: 1200px) {
  .why-card-col { flex: 0 0 20%; max-width: 20%; }
}

/* Tema claro */
/* En claro el texto es oscuro, así que el velo va del otro lado: crema en vez
   de tinta. Mismo encuadre y misma imagen. */
html[data-theme="light"] .story-section--why {
  background:
    radial-gradient(circle at 50% 45%, rgba(247, 243, 235, 0.52) 0%, rgba(247, 243, 235, 0.72) 55%, rgba(247, 243, 235, 0.86) 100%),
    linear-gradient(180deg, rgba(245, 242, 235, 0.96) 0, rgba(245, 242, 235, 0.42) 300px, rgba(238, 233, 216, 0.42) calc(100% - 300px), rgba(238, 233, 216, 0.96) 100%),
    url("../images/amenidades/xcacel-bg.webp") center/cover;
  background-attachment: scroll, scroll, fixed;
}

@media (max-width: 900px) {
  html[data-theme="light"] .story-section--why {
    background-image:
      radial-gradient(circle at 50% 45%, rgba(247, 243, 235, 0.52) 0%, rgba(247, 243, 235, 0.72) 55%, rgba(247, 243, 235, 0.86) 100%),
      linear-gradient(180deg, rgba(245, 242, 235, 0.96) 0, rgba(245, 242, 235, 0.42) 300px, rgba(238, 233, 216, 0.42) calc(100% - 300px), rgba(238, 233, 216, 0.96) 100%),
      url("../images/amenidades/xcacel-bg-1280.webp");
    /* En móvil el fondo va con scroll aunque el navegador soporte fixed: con
       fixed la imagen se dimensiona al viewport (390x844 vertical) y de una
       foto 16:9 solo se alcanza a ver un recorte diminuto. */
    background-attachment: scroll, scroll, scroll;
  }
}

@supports (-webkit-touch-callout: none) {
  html[data-theme="light"] .story-section--why {
    background-attachment: scroll, scroll, scroll;
  }
}

html[data-theme="light"] .unified-card {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0,0,0,0.07);
}

html[data-theme="light"] .unified-card:hover {
  border-color: rgba(var(--brand-canopy-rgb), 0.28);
}

html[data-theme="light"] .unified-card h3 {
  color: var(--brand-sand);
}

html[data-theme="light"] .unified-card p {
  color: rgba(var(--brand-sand-rgb), 0.68);
}

html[data-theme="light"] .unified-card .card-tag {
  color: #6b6030;
  background: rgba(var(--brand-canopy-rgb), 0.10);
}

.story-section--location {
  padding: clamp(4rem, 6.5vw, 6rem) 0;
  background:
    radial-gradient(circle at 12% 82%, rgba(var(--brand-water-rgb), 0.10), transparent 34%),
    linear-gradient(180deg, rgba(var(--brand-shadow-rgb), 0.70) 0%, rgba(var(--brand-shadow-rgb), 0.76) 100%),
    url("../images/explora.jpg") center / cover no-repeat;
}

/* ── Location section: tipografía impactante ── */
.location-title {
  /* Antes llegaba a 6.5rem: era, con diferencia, el título más grande de la
     página. Comparte cuerpo con el resto de los títulos de sección. */
  font-size: var(--section-title-size) !important;
  font-weight: 500 !important;
  line-height: 0.96 !important;
  margin-bottom: 0 !important;
}

/* Subtítulo del bloque de ubicación. En caja baja a propósito —es la única
   línea de la cabecera que no va en versales— y por debajo del cuerpo del
   titular, para que se lea como el remate de la frase y no como otro título. */
.location-subtitle {
  margin: 0.55rem 0 0;
  font-family: var(--font-body);
  text-transform: none;
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.4;
  color: rgba(var(--brand-sand-rgb), 0.78);
}

.location-heading {
  margin-bottom: 1.75rem;
}

@media (min-width: 992px) {
  .story-section--location .row {
    align-items: stretch;
  }

  .story-section--location .col-lg-7 {
    display: flex;
    flex-direction: column;
  }

  .story-section--location .map-frame {
    flex: 1;
    aspect-ratio: unset;
    min-height: 32rem;
  }
}

.location-copy {
  font-size: 1.05rem;
  line-height: 1.85;
  color: rgba(var(--brand-sand-rgb), 0.72);
  margin-bottom: 0;
}

.map-open-btn span {
  font-family: var(--font-body);
}

.story-section--gallery {
  background:
    radial-gradient(circle at 84% 20%, rgba(var(--brand-earth-rgb), 0.12), transparent 30%),
    linear-gradient(180deg, rgba(var(--brand-ink-rgb), 0.99) 0%, rgba(var(--brand-shadow-rgb), 0.99) 100%);
}

.story-section--testimonials {
  padding: clamp(4rem, 6.5vw, 6rem) 0;
  background:
    radial-gradient(circle at 16% 0%, rgba(var(--brand-sage-rgb), 0.13), transparent 32%),
    linear-gradient(180deg, rgba(var(--brand-ink-soft-rgb), 0.99) 0%, rgba(var(--brand-ink-rgb), 0.99) 100%);
}

.story-section--contact {
  background:
    linear-gradient(180deg, rgba(var(--brand-shadow-rgb), 0.70), rgba(var(--brand-shadow-rgb), 0.88)),
    url("../images/explora.jpg") center/cover no-repeat;
}

/* El título de contacto es el más largo del sitio ("La vida que imaginaste
   tiene un lugar en Akumal"). Con los 50rem de .section-heading--center caía
   en tres renglones; con 70rem entra en dos y ocupa el ancho de verdad.
   Doble clase (.section-heading.contact-heading) a propósito: hace falta más
   especificidad que .section-heading--center, que se define más abajo en este
   mismo archivo y si no gana por orden de cascada. */
.section-heading.contact-heading {
  max-width: 70rem;
  margin-bottom: clamp(2.75rem, 4.5vw, 4.5rem);
}

@media (min-width: 1600px) {
  .section-heading.contact-heading { max-width: 78rem; }
}

.section-shell {
  position: relative;
  z-index: 1;
}

.section-heading {
  margin-bottom: 2.75rem;
}

.section-heading--center {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* En monitores anchos, 50rem se ve como una isla angosta y amontonada en
   medio de mucho espacio muerto — se ensancha progresivamente (igual que
   .container en base.css) para que el título ocupe mejor el ancho real
   del slide, sin perder el centrado ni la simetría. */
@media (min-width: 1600px) {
  .section-heading--center { max-width: 62rem; }
}
@media (min-width: 1920px) {
  .section-heading--center { max-width: 72rem; }
}
@media (min-width: 2400px) {
  .section-heading--center { max-width: 84rem; }
}
@media (min-width: 3000px) {
  .section-heading--center { max-width: 96rem; }
}

.section-kicker {
  margin-bottom: 1.1rem;
  color: var(--hero-accent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.section-title {
  margin: 0;
  font-family: var(--font-serif);
  text-transform: uppercase;
  line-height: 1;
  font-size: var(--section-title-size);
  font-weight: 500;
  color: var(--hero-text);
}

.section-copy {
  margin-top: 1.4rem;
  margin-bottom: 1.5rem;
  max-width: 42rem;
  color: rgba(var(--brand-sand-rgb), 0.82);
  font-size: 1.02rem;
  line-height: 1.88;
}

.section-copy--center {
  margin-left: auto;
  margin-right: auto;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.section-actions--center {
  justify-content: center;
}

.joytree-btn {
  min-height: 3.25rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--button-radius);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease;
}

.joytree-btn--accent {
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.48);
  background: linear-gradient(135deg, rgba(var(--brand-canopy-rgb), 0.98), rgba(var(--brand-earth-rgb), 0.92));
  color: var(--brand-ink);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.16);
}

.joytree-btn--accent:hover,
.joytree-btn--accent:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.24);
  color: var(--brand-ink);
}

/* CTA al Master Plan: es el paso siguiente a simular el pago y tiene que
   verse como tal. Mismo lenguaje que el botón de acento pero en grande —más
   cuerpo, más aire y más sombra— con el icono de mapa delante para que se
   entienda a dónde lleva antes de leerlo. */
.calc-masterplan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 4.25rem;
  padding: 1.25rem 3rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.28);
}

.calc-masterplan-cta i {
  font-size: 1.15em;
}

.calc-masterplan-cta:hover,
.calc-masterplan-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 30px 62px rgba(0, 0, 0, 0.34);
}

@media (max-width: 575.98px) {
  /* En teléfono ocupa el ancho de la columna: partir el texto en dos líneas
     dentro de una píldora estrecha se ve peor que un botón de borde a borde. */
  .calc-masterplan-cta {
    width: 100%;
    padding: 1.15rem 1.5rem;
    font-size: 0.86rem;
    letter-spacing: 0.14em;
  }
}

.joytree-btn--ghost {
  border: 1px solid rgba(var(--brand-sand-rgb), 0.18);
  background: rgba(var(--brand-ink-soft-rgb), 0.42);
  color: var(--hero-text);
}

.joytree-btn--ghost:hover,
.joytree-btn--ghost:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(var(--brand-canopy-rgb), 0.4);
  background: rgba(var(--brand-canopy-rgb), 0.14);
  color: var(--hero-text);
}

.features-list {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  margin: 2.5rem 0 3rem;
  padding: 0 0 0 2rem;
  list-style: none;
  border-left: 3px solid var(--hero-accent);
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--hero-text);
  transition: transform 300ms ease;
}

.feature-item:hover {
  transform: translateX(10px);
}

.feature-item strong {
  color: rgba(var(--brand-sand-rgb), 0.94);
  font-size: 1rem;
  line-height: 1.55;
}

.story-section--explore .section-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  line-height: 1.6;
  max-width: 34rem;
}

.story-section--explore .section-title {
  /* El max-width sube de 42rem a 56rem: con el cuerpo unificado (más grande
     que el 3rem que tenían antes) a 42rem estos títulos partían en tres
     líneas. Conservan text-transform:none, que es lo que los distingue. */
  max-width: 56rem;
  font-size: var(--section-title-size);
  line-height: 1;
  text-transform: none;
}

/* Aquí vivían cuatro escalados por ancho de pantalla (1600/1920/2400/3000px)
   que llevaban estos títulos hasta 6rem. Se retiraron: hacían que #kineki y
   #escenarios fueran los títulos más grandes del sitio en monitores anchos,
   mientras el resto seguía topado en 3.9rem. Ahora todos comparten
   --section-title-size. */
/* Los títulos de .story-section--explore llevan max-width (42rem y subiendo),
   pero sin márgenes automáticos: la CAJA se quedaba pegada a la izquierda de
   su bloque y el text-align:center solo centraba el texto DENTRO de esa caja
   estrecha. Resultado medido: "Una nueva forma de construir" (#kineki) y
   "Elige tu escenario" (#escenarios) salían 64px corridos a la izquierda en
   1280, 1440 y 1920 — los únicos dos títulos centrados del sitio con
   max-width propio.
   Va después del bloque de arriba a propósito: misma especificidad (0,2,0),
   así que gana por orden. Solo afecta a los títulos dentro de un heading
   centrado; los del layout a dos columnas siguen alineados a la izquierda. */
.section-heading--center .section-title {
  margin-inline: auto;
}

.story-section--explore .section-copy {
  margin-bottom: 1.4rem;
  color: rgba(var(--brand-sand-rgb), 0.78);
}

.story-section--explore .section-actions {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════
   EXPLORE — PREÁMBULO · FILOSOFÍA · JULIO AMEZCUA · INVERSIÓN
═══════════════════════════════════════════════════════════ */

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes jtKenBurns {
  0%   { transform: scale(1.00) translate(0,     0   ); }
  40%  { transform: scale(1.06) translate(-0.5%, -0.4%); }
  100% { transform: scale(1.03) translate( 0.3%,  0.3%); }
}
@keyframes jtFadeUp {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes jtFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes jtLineGrow {
  from { width: 0;    opacity: 0; }
  to   { width: 3rem; opacity: 1; }
}
@keyframes jtScrollPulse {
  0%, 100% { transform: translateY(0);   opacity: 0.8; }
  50%       { transform: translateY(6px); opacity: 0.3; }
}
@keyframes jtMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes jtGlowPulse {
  0%, 100% { opacity: 0.18; }
  50%       { opacity: 0.32; }
}

/* ═══════════════════════════════════════════
   INTRO-BLOCK — imagen + filosofía unidos
═══════════════════════════════════════════ */
.intro-block {
  position: relative;
  background: var(--brand-ink);
}

/* ═══════════════════════════════════════════
   PREÁMBULO — ENTRADA MONUMENTAL
═══════════════════════════════════════════ */
.explore-entrance {
  position: relative;
  width: 100%;
  height: var(--jt-screen-h);
  /* El min-height es un suelo para que la entrada no quede como una franja en
     pantallas bajas, pero como número absoluto se volvía en contra: en un
     viewport de 520px de alto (una laptop de 768px con escalado de Windows al
     125%) forzaba 560px y la entrada ya no cabía en su propia pantalla. El
     min() lo limita a lo que realmente hay disponible. */
  min-height: min(560px, var(--jt-screen-h));
  max-height: 1200px;
  overflow: hidden;
  margin-bottom: 0;
}

/* Solo la foto de fondo, que es hijo directo. Antes esto alcanzaba a
   CUALQUIER <img> dentro de la entrada, así que al meter el logo se lo comía:
   se lo llevaba a position:absolute con inset:0 y object-fit:cover, es decir,
   lo estiraba a pantalla completa como si fuera el fondo. */
.explore-entrance > picture,
.explore-entrance > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
  animation: jtKenBurns 24s ease-in-out infinite alternate;
  will-change: transform;
  transform-origin: center center;
}

.explore-entrance-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    /* Tope superior — ahora donde vive el titular, oscurecido con margen
       de sobra para que el blanco del texto nunca se pierda contra el
       cielo, sin importar cuán clara sea la nube de fondo */
    linear-gradient(to bottom, rgba(12, 20, 11,0.95) 0%, rgba(12, 20, 11,0.74) 32%, transparent 56%),
    /* Izquierda→derecha — cobertura principal del texto, extendida más allá
       del ancho típico del titular para que "ree." nunca quede sobre cielo
       despejado sin respaldo oscuro */
    linear-gradient(to right, rgba(12, 20, 11,0.98) 0%, rgba(12, 20, 11,0.88) 38%, rgba(12, 20, 11,0.62) 72%, transparent 92%),
    /* Esquina superior-izquierda — zona más densa donde vive el titular */
    linear-gradient(to bottom-right, rgba(12, 20, 11,0.99) 0%, rgba(12, 20, 11,0.88) 46%, rgba(12, 20, 11,0.40) 74%, transparent 88%),
    /* Capa radial dedicada: oscurece específicamente el bloque de texto */
    radial-gradient(ellipse 92% 68% at 24% 20%, rgba(12, 20, 11,0.82) 0%, rgba(12, 20, 11,0.32) 64%, transparent 86%),
    /* Acento canopy */
    radial-gradient(ellipse 90% 55% at 20% 0%, rgba(var(--brand-canopy-rgb),0.08) 0%, transparent 60%);
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Estado inicial del vignette — se aplica sin transición al cargar la página */
.explore-entrance--hidden .explore-entrance-vignette {
  opacity: 0.15;
  transform: translateX(-2.5%);
  transition: none;
}

/* ── Animaciones de texto disparadas por scroll (IntersectionObserver) ── */
.explore-entrance.is-visible .explore-entrance-rule {
  animation: jtLineGrow 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards 0s;
}
.explore-entrance.is-visible .explore-entrance-kicker {
  animation: jtFadeUp 0.9s ease forwards 0.15s;
}
.explore-entrance.is-visible .explore-entrance-headline {
  animation: jtFadeUp 1.0s ease forwards 0.3s;
}
.explore-entrance.is-visible .explore-entrance-sub {
  animation: jtFadeUp 0.9s ease forwards 0.55s;
}

.explore-entrance-glow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;
  z-index: 3;
  background: radial-gradient(ellipse 70% 80% at 18% 100%, rgba(var(--brand-canopy-rgb),0.12) 0%, transparent 65%);
  animation: jtGlowPulse 6s ease-in-out infinite;
  pointer-events: none;
}

.explore-entrance::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0.038;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.explore-entrance-badge {
  position: absolute;
  top: 2rem;
  right: 2.5rem;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(12, 20, 11,0.60);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.32);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.63rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--brand-canopy);
  font-weight: 500;
  opacity: 1;
  cursor: pointer;
  transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.explore-entrance-badge:hover,
.explore-entrance-badge:focus-visible {
  background: rgba(var(--brand-canopy-rgb), 0.22);
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
  transform: translateY(-1px);
}

/* Se desvanece al hacer clic — misma mecánica que .hero-cta.is-dismissed
   (revela la nav), reutilizada aquí ahora que el CTA vive en el tope real
   de la página en vez de dentro de la sección de la esfera. */
.explore-entrance-badge.is-dismissed {
  opacity:        0    !important;
  pointer-events: none !important;
  transform:      translateY(8px) !important;
  transition:     opacity 300ms ease, transform 300ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .explore-entrance-badge.is-dismissed { transition: none !important; }
}

.explore-entrance-badge-dot { opacity: 0.40; }

.explore-entrance-copy {
  /* Beige dorado de marca, el mismo que el resto de los textos del sitio.
     Se declaran aquí para que titular, subtítulo y filete los hereden.
     El halo va OSCURO, no claro: con tinta clara sobre la foto, un halo claro
     no separa nada — lo que da legibilidad es la sombra que oscurece el cielo
     detrás de las letras. Va en capas: filo nítido, sombra corta, bloom medio
     y aura amplia. */
  --entrance-ink: var(--hero-text);
  --entrance-halo:
    0 1px  1px  rgba(0,0,0,1),
    0 2px  5px  rgba(12, 20, 11,0.98),
    0 4px  22px rgba(12, 20, 11,0.92),
    0 10px 48px rgba(12, 20, 11,0.75);
  position: absolute;
  top: 0;
  left: 0;
  /* right:auto + width:max-content encoge la columna al ancho de su hijo más
     ancho (el eslogan) en vez de ocupar todo el flanco. Eso es lo que permite
     que align-items:center centre el logo SOBRE el eslogan sin mover el
     bloque al centro de la foto: los dos comparten eje, pero el conjunto
     sigue anclado a la izquierda donde estaba. */
  right: auto;
  width: max-content;
  max-width: 100%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* El padding superior arranca más arriba desde que se quitó el kicker: el
     bloque se apoya en el borde alto de la imagen, que es cielo despejado. */
  padding: clamp(0.9rem, 1.8vw, 1.5rem) clamp(2rem, 6vw, 7rem) 0;
}

.explore-entrance-rule {
  display: block;
  width: 3rem;
  height: 1.5px;
  /* Acompaña al titular, así que hereda su color. Como el filete no puede
     llevar text-shadow, se apoya en un drop-shadow propio para no perderse
     contra el cielo claro de la foto. */
  background: var(--entrance-ink);
  filter: drop-shadow(0 1px 3px rgba(12, 20, 11,0.9));
  margin-bottom: 1.2rem;
  opacity: 1;
}

.explore-entrance-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand-canopy);
  font-weight: 600;
  margin: 0 0 0.8rem;
  opacity: 1;
  /* Mismo halo en capas que el titular: filo nítido + sombra tight + bloom
     medio + aura amplia — el dorado por sí solo se lava contra cielo claro,
     así que necesita el mismo respaldo oscuro que "Joy Tree." */
  text-shadow:
    0 1px  1px  rgba(0,0,0,1),
    0 1px  6px  rgba(12, 20, 11,0.98),
    0 2px  18px rgba(12, 20, 11,0.94),
    0 6px  30px rgba(12, 20, 11,0.85),
    0 12px 50px rgba(12, 20, 11,0.65);
}

/* Ya no lleva texto: solo envuelve el logo y conserva el id del encabezado y
   la animación de entrada. */
.explore-entrance-headline {
  margin: 0 0 1.1rem;
  line-height: 0;
  opacity: 1;
}

.explore-entrance-logo {
  display: block;
  /* Baja desde clamp(11rem, 24vw, 21rem): a ese tamaño el logo crecía
     tanto que se montaba sobre la palmera de la foto. */
  width: clamp(8rem, 16vw, 14rem);
  height: auto;
  /* El PNG blanco necesita el mismo respaldo oscuro que tenía el titular en
     text-shadow, pero un text-shadow no afecta a una imagen: se replica la
     misma escalera de sombras con drop-shadow, que sí sigue el contorno del
     dibujo. Sin esto el logo se pierde en las zonas claras de la foto —cielo
     y luces del acceso—, que es justo donde cae. */
  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.95))
    drop-shadow(0 2px 6px rgba(12, 20, 11, 0.85))
    drop-shadow(0 6px 26px rgba(12, 20, 11, 0.70))
    drop-shadow(0 12px 48px rgba(12, 20, 11, 0.55));
}

.explore-entrance-sub {
  /* Baja desde clamp(0.95rem, 1.6vw, 1.4rem): el eslogan ahora son dos
     renglones en caja alta bajo el logo, y a ese cuerpo pesaba más que la
     marca a la que acompaña. */
  font-size: clamp(0.72rem, 1.15vw, 1rem);
  color: var(--entrance-ink);
  letter-spacing: 0.03em;
  margin: 0;
  opacity: 1;
  text-align: center;
  text-shadow: var(--entrance-halo);
}

/* El eslogan va en versalitas por CSS y no en mayúsculas dentro de la cadena:
   así el lector de pantalla sigue oyendo una frase normal y la traducción se
   escribe en su capitalización natural. El interletraje sube porque el texto
   en caja alta a este cuerpo se apelmaza. */
.explore-entrance-sub span {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.55;
}

/* Estado inicial para animación de entrada (JS añade esta clase antes del scroll) */
.explore-entrance--anim .explore-entrance-rule    { width: 0;   opacity: 0; }
.explore-entrance--anim .explore-entrance-kicker,
.explore-entrance--anim .explore-entrance-headline,
.explore-entrance--anim .explore-entrance-sub,
.explore-entrance--anim .explore-entrance-badge {
  opacity: 1;
  transform: none;
}

/* is-visible: JS la añade cuando la sección entra en pantalla */
.explore-entrance.is-visible .explore-entrance-badge {
  animation: jtFadeIn 0.9s ease forwards 0.7s;
}

.explore-entrance-scroll {
  position: absolute;
  bottom: 2rem;
  right: 2.5rem;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  animation: jtFadeIn 1s ease forwards 2s;
}

.entrance-scroll-line {
  display: block;
  width: 1px;
  height: 3rem;
  background: linear-gradient(to bottom, var(--brand-canopy), transparent);
  animation: jtScrollPulse 2.2s ease-in-out infinite;
}

.entrance-scroll-label {
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.60);
  writing-mode: vertical-rl;
}

/* ═══════════════════════════════════════════
   FILOSOFÍA — split imagen / texto
═══════════════════════════════════════════ */
.explore-philosophy {
  padding: 0;
  overflow: hidden;
  position: relative;
}

.explore-philosophy::before,
.explore-philosophy::after { display: none; }

.philosophy-split {
  display: grid;
  /* Mitades exactas: la columna del video ES media diapositiva, no una
     columna algo más angosta con una tarjeta flotando dentro. Era 54fr/46fr. */
  grid-template-columns: 1fr 1fr;
  /* Sube de 68vh a 84vh: el video vertical es el protagonista de la
     columna derecha y con 68vh se quedaba corto en desktop. */
  min-height: clamp(34rem, calc(84vh / var(--jt-zoom)), 62rem);
}

.philosophy-split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
  /* El aire vertical también mira el alto: en una pantalla de 625px estos
     paddings valían 96px arriba y abajo —los mismos que en un monitor de
     982— y se comían un tercio de lo poco que había. En pantallas altas el
     tope de 6.5rem sigue mandando, así que ahí no cambia nada. */
  padding: clamp(2.25rem, min(7vw, 11vh), 6.5rem) clamp(2rem, 6vw, 5.5rem);
  background: var(--brand-ink);
}

.philosophy-split-visual {
  position: relative;
  overflow: hidden;
  background: var(--brand-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Menos aire alrededor del video: el alto disponible manda su tamaño. */
  padding: clamp(1.25rem, 2.2vw, 2.25rem) clamp(1rem, 2vw, 2rem);
}

/* La columna del video llevaba detrás una copia del poster desenfocada
   (blur 6px, opacidad 0.30) a modo de "aura". Se retiró: ensuciaba el
   fondo sólido de la sección y el video queda mejor recortado contra el
   verde tinta liso. El <picture> también salió del HTML. ────────────── */

/* Tarjeta de video flotante — proporción retrato (9:16), dimensionada
   por alto (no ancho) para que el video vertical nunca se recorte ni
   desborde el contenedor, sea cual sea el ancho de la columna. ────── */
.philosophy-video-card {
  position: relative;
  z-index: 2;
  height: 100%;
  /* El tope sube de 42rem a 50rem para que la pieza gane presencia, pero
     acotado al alto de pantalla menos la navbar fija (~9rem) y un respiro:
     si la tarjeta es más alta que la ventana, sus dos botones (fullscreen
     arriba, pausa abajo) no pueden verse a la vez y uno queda siempre
     tapado por la navbar o fuera de cuadro. */
  max-height: min(50rem, calc(var(--jt-screen-h) - 11rem));
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  transform: translateY(-8px);
  background: var(--brand-ink-soft);
  box-shadow:
    0 56px 110px rgba(0, 0, 0, 0.72),
    0 24px 52px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(var(--brand-canopy-rgb), 0.22);
}

.philosophy-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--brand-ink-soft);
  cursor: pointer;
}

/* ── De tablet en adelante: el video ocupa media diapositiva exacta ───────
   Deja de ser una tarjeta 9:16 flotando con aire alrededor y pasa a llenar
   su mitad de lado a lado y de arriba abajo: sin padding en la columna, sin
   esquinas redondeadas, sin sombra y sin el desplazamiento vertical que le
   daba el aire de pieza suelta.
   El precio a pagar: el archivo es vertical (9:16) y la mitad de la
   diapositiva es casi cuadrada, así que "cover" recorta arriba y abajo.
   En móvil no aplica nada de esto — ahí sigue siendo una tarjeta tipo
   story, ver el bloque de ≤767.98px. */
@media (min-width: 768px) {
  .philosophy-split-visual {
    padding: 0;
  }

  /* En absolute a propósito. Con la tarjeta en el flujo, el <video> —que es
     vertical— imponía su proporción y estiraba la fila: a 1440 pedía 1280px
     de alto (720 × 16/9) y la sección entera crecía de 926 a 1280px con el
     mismo texto. Sacada del flujo, la altura la sigue mandando la columna de
     texto y el video se limita a llenar la mitad que le toca. */
  .philosophy-video-card {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
    transform: none;
    box-shadow: none;
  }
}

/* Fondo difuminado detrás del video en pantalla completa: en fullscreen el
   video pasa a "contain" (alto original, sin recorte ni distorsión), lo que
   deja franjas vacías a los costados en pantallas anchas — esta copia del
   mismo video, agrandada y desenfocada, las rellena en vez de dejarlas en
   negro. Fuera de fullscreen queda oculta. */
.philosophy-video-bg {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(48px) saturate(1.15) brightness(0.55);
  transform: scale(1.15);
  z-index: 0;
}

.philosophy-video-card:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  max-height: none;
  aspect-ratio: auto;
}

.philosophy-video-card:fullscreen .philosophy-video-bg {
  display: block;
}

.philosophy-video-card:fullscreen .philosophy-video {
  position: relative;
  z-index: 1;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.philosophy-video-card:-webkit-full-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  max-height: none;
  aspect-ratio: auto;
}

.philosophy-video-card:-webkit-full-screen .philosophy-video-bg {
  display: block;
}

.philosophy-video-card:-webkit-full-screen .philosophy-video {
  position: relative;
  z-index: 1;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.philosophy-video-fullscreen {
  position: absolute;
  right: 0.9rem;
  top: 0.9rem;
  z-index: 3;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 20, 11, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 0.76rem;
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease, border-color 200ms ease;
}

.philosophy-video-fullscreen:hover,
.philosophy-video-fullscreen:focus-visible {
  background: rgba(12, 20, 11, 0.82);
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
  transform: scale(1.07);
}

.philosophy-video-toggle {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 3;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 20, 11, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 0.76rem;
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease, border-color 200ms ease;
}

.philosophy-video-toggle:hover,
.philosophy-video-toggle:focus-visible {
  background: rgba(12, 20, 11, 0.82);
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
  transform: scale(1.07);
}

/* ── Cierre de la columna de filosofía ────────────────────────────
   Nació como tres etiquetas-píldora cortas ("Preventa activa · Fase 1")
   haciendo eco de las escenas del video. Hoy es una sola frase larga, y
   la píldora ya no le servía: la encajonaba y la dejaba en cuerpo 0.66rem
   pegada a la izquierda. Ahora es una línea de cierre centrada en todo el
   ancho de la columna, en la tipografía de títulos y en grande. ────── */
/* Continúa el bloque de "media diapositiva" de arriba: va aquí, después de
   las reglas base de los dos controles, porque tienen la misma especificidad
   y si fuera antes ganarían ellas por orden de cascada. */
@media (min-width: 768px) {
  /* Los dos controles se juntan abajo a la izquierda. Antes vivían en
     esquinas opuestas (pantalla completa arriba, pausa abajo), lo que solo
     funciona si la tarjeta cabe entera en la ventana: ahora mide lo que mide
     la sección —hasta 1120px— y uno de los dos quedaba siempre fuera de
     cuadro. Además la esquina inferior DERECHA es justo donde flotan los
     botones de WhatsApp y "volver arriba", que tapaban la pausa. */
  .philosophy-video-fullscreen {
    top: auto;
    right: auto;
    bottom: 0.9rem;
    left: 0.9rem;
  }

  .philosophy-video-toggle {
    right: auto;
    /* 0.9rem del borde + los 2.4rem del botón de al lado + 0.6rem de aire */
    left: 3.9rem;
  }
}

.philosophy-rituals {
  display: flex;
  justify-content: center;
  margin-top: 0.9rem;
}

.philosophy-ritual-tag {
  max-width: 100%;
  text-align: center;
  text-wrap: balance;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.9vw, 1.85rem);
  font-weight: 300;
  line-height: 1.24;
  letter-spacing: -0.005em;
  color: var(--brand-canopy);
}

/* Línea canopy */
.philosophy-rule {
  display: block;
  width: 3rem;
  height: 1.5px;
  background: var(--brand-canopy);
  flex-shrink: 0;
}

/* Kicker */
.philosophy-kicker {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.72);
  margin: 0;
  font-weight: 500;
}

.philosophy-headline {
  font-family: var(--font-serif);
  text-transform: uppercase;
  /* 1.06 y no 1: son dos frases largas y a interlineado exacto las líneas se
     apelmazan. Es la excepción a "títulos sin interlineado". */
  line-height: 1.06;
  /* Bajado desde clamp(2.6rem, 4.2vw, 4.4rem): con el titular corto anterior
     ("No construimos casas") cabía en 4 líneas; la frase actual es el triple
     de larga y a ese cuerpo ocupaba 8 líneas y 484px, empujando el texto de
     abajo fuera de la pantalla. */
  font-size: clamp(1.9rem, 2.9vw, 3rem);
  font-weight: 300;
  letter-spacing: -0.018em;
  color: var(--hero-text);
  margin: 0;
  /* Evita que "SU VIDA." quede partido con la palabra clave huérfana. */
  text-wrap: balance;
}

.philosophy-headline em {
  font-style: italic;
  color: var(--brand-canopy);
}

.philosophy-byline {
  margin: -0.8rem 0 0;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(var(--brand-sand-rgb), 0.58);
}

/* Separador */
.philosophy-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(var(--brand-canopy-rgb), 0.16);
  flex-shrink: 0;
}

.philosophy-body-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.philosophy-body {
  font-size: clamp(0.90rem, 1.2vw, 1.02rem);
  line-height: 1.85;
  color: rgba(var(--brand-sand-rgb), 0.68);
  margin: 0;
}

.philosophy-body--emphasis {
  font-size: clamp(0.94rem, 1.3vw, 1.06rem);
  color: rgba(var(--brand-sand-rgb), 0.88);
  font-style: italic;
}

/* Mismo tratamiento que el resto de títulos de sección del sitio: versalitas
   y --section-title-size, la variable que comparten todos. */
.philosophy-headline--promesas {
  font-size: var(--section-title-size);
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
}

/* ── Las cinco promesas ──────────────────────────────────────────────────────
   Lista editorial, no tarjetas: la columna de texto mide poco más de 500px y
   una rejilla ahí solo admite dos por fila, con lo que la quinta quedaba
   huérfana y descentrada. En una sola columna las cinco se recorren de arriba
   abajo, con el filete marcando el ritmo. */
.promise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.promise-item {
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
  padding: 1.15rem 0;
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.16);
}

/* El filete inferior solo en la última: entre elementos ya lo pone el
   border-top de la siguiente, y duplicarlo engrosaría la línea. */
.promise-item:last-child {
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.16);
}

.promise-num {
  flex: 0 0 auto;
  min-width: 2.2ch;
  padding-top: 0.3rem;
  font-family: var(--font-serif);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--hero-accent);
}

/* flex: 1 y no el ancho automático: siendo un flex-item, la caja se ajustaba
   al largo de SU descripción, así que cada fila terminaba en un punto distinto
   y los "+" —anclados al borde derecho del botón— quedaban en escalera. */
.promise-text {
  flex: 1;
  min-width: 0;
}

.promise-title {
  margin: 0 0 0.32rem;
  font-family: var(--font-serif);
  text-transform: uppercase;
  font-size: clamp(0.96rem, 1.25vw, 1.06rem);
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--hero-text);
}

/* El apodo de la zona va destacado dentro de la descripción. El peso sube
   solo a 600: en un cuerpo de 0.9rem sobre fondo oscuro, un bold pleno
   engorda el trazo y se lee peor que el resto de la línea. */
.promise-desc strong {
  font-weight: 600;
  color: rgba(var(--brand-sand-rgb), 0.92);
}

.promise-desc em { font-style: italic; }

.promise-desc {
  margin: 0;
  font-size: clamp(0.85rem, 1.1vw, 0.92rem);
  line-height: 1.6;
  color: rgba(var(--brand-sand-rgb), 0.68);
}

/* ── Promesas desplegables ───────────────────────────────────────────────────
   Cada promesa abre su material debajo. El disparador es un <button> real
   —no un div con onclick— para que funcione con teclado y lo anuncie un
   lector de pantalla; por eso hay que devolverle la apariencia de texto. */
.promise-trigger {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.promise-trigger:focus-visible {
  outline: 2px solid var(--hero-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.promise-trigger .promise-title { transition: color 200ms ease; }
.promise-trigger:hover .promise-title { color: var(--hero-accent); }

/* Chevron dibujado con bordes: dos lados de un cuadrado girado 45°. Evita
   cargar un icono más solo para esto. */
.promise-chevron {
  flex: 0 0 auto;
  width: 0.48rem;
  height: 0.48rem;
  margin-left: auto;
  margin-bottom: 0.32rem;
  border-right: 1.5px solid rgba(var(--brand-sand-rgb), 0.55);
  border-bottom: 1.5px solid rgba(var(--brand-sand-rgb), 0.55);
  transform: rotate(45deg);
  transition: transform 260ms ease, border-color 200ms ease;
}

.promise-trigger[aria-expanded="true"] .promise-chevron {
  transform: rotate(-135deg);
  border-color: var(--hero-accent);
}

.promise-trigger[aria-expanded="true"] .promise-title { color: var(--hero-accent); }

/* El panel se anima con grid-template-rows 0fr→1fr: es la única forma de
   pasar de "cerrado" a "la altura que ocupe su contenido" sin fijar un
   max-height a ojo que recorte el panel más alto. */
.promise-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

.promise-panel > * { overflow: hidden; }

.promise-panel.is-open { grid-template-rows: 1fr; }

/* hidden lo quita del flujo mientras está cerrado; al abrir, el JS lo retira
   antes de animar. Sin esto el contenido seguiría siendo enfocable con Tab. */
.promise-panel[hidden] { display: none; }

.promise-panel-inner { padding-top: 0.9rem; }

.promise-video-wrap {
  border-radius: 0.85rem;
  overflow: hidden;
  background: rgba(var(--brand-ink-rgb), 0.6);
  margin-bottom: 0.6rem;
}

.promise-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* El vídeo del corredor es vertical: recortado a 16/9 se quedaba en un
   pasillo de asfalto. Se le deja su propio alto. */
.promise-panel--vertical .promise-video { aspect-ratio: 9 / 16; max-height: 22rem; }

.promise-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}

/* Con cuatro imágenes, tres arriba y una suelta abajo queda descuadrado:
   en ese caso van de dos en dos. */
.promise-gallery:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }

.promise-shot {
  margin: 0;
  border-radius: 0.6rem;
  overflow: hidden;
  background: rgba(var(--brand-ink-rgb), 0.6);
}

.promise-shot img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 500ms ease;
}

.promise-shot:hover img { transform: scale(1.04); }

/* La promesa 05 no despliega nada: no lleva botón ni "+", así que su título
   necesita el mismo hueco a la derecha que los demás para que las cinco
   descripciones arranquen y terminen en la misma vertical. */
.promise-item--estatica .promise-title {
  padding-right: 1.5rem;
}

/* ── Esquemas de pago (promesa 04) ── */
.promise-schemes {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.promise-scheme {
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.14);
  border-radius: 0.7rem;
  background: rgba(var(--brand-ink-rgb), 0.5);
}

.promise-scheme-tag {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hero-accent);
  margin-bottom: 0.28rem;
}

.promise-scheme-line {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(var(--brand-sand-rgb), 0.72);
}

.promise-cta {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hero-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.45);
  padding-bottom: 0.15rem;
}

.promise-cta:hover { color: var(--hero-text); border-color: var(--hero-text); }

@media (prefers-reduced-motion: reduce) {
  .promise-panel { transition: none; }
  .promise-chevron { transition: none; }
  .promise-shot img { transition: none; }
}

@media (max-width: 575.98px) {
  .promise-gallery,
  .promise-gallery:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
  .philosophy-split {
    grid-template-columns: 1fr;
  }
  /* Sin order: -1. El video iba primero y empujaba el texto por debajo del
     pliegue: en un teléfono, lo primero después de la entrada era una pieza
     muda. Ahora se lee el kicker, el titular y los dos párrafos, y el video
     llega después, ya con el contexto puesto. */
  .philosophy-split-visual {
    height: auto;
    padding: 2.75rem 1.5rem;
  }
  /* Video vertical: en mobile hay ancho de sobra y poca necesidad de
     recortar alto, así que se dimensiona por ancho (no por alto como
     en desktop) para que la tarjeta se vea como una story, no un sello. */
  .philosophy-video-card {
    height: auto;
    width: 62%;
    max-height: none;
  }
  .philosophy-split-text {
    padding: clamp(3rem, 8vw, 4.5rem) clamp(1.25rem, 5vw, 2.5rem);
  }
  .philosophy-headline {
    font-size: clamp(1.7rem, 6vw, 2.4rem);
  }
}

/* ═══════════════════════════════════════════
   JULIO AMEZCUA — SECCIÓN PROTAGONISTA
═══════════════════════════════════════════ */
.explore-architect {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(var(--brand-canopy-rgb),0.06) 0%, transparent 55%),
    linear-gradient(180deg, rgba(var(--brand-ink-soft-rgb),0.99) 0%, rgba(var(--brand-ink-rgb),0.99) 100%);
  position: relative;
}

.explore-architect::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(var(--brand-canopy-rgb),0.18), transparent);
}

/* ── Hero: imagen arquitectónica + nombre superpuesto ── */
.amezcua-hero {
  position: relative;
  /* La foto (2000x1305) manda: con la proporción exacta de la imagen, el
     encuadre se ve completo en vez de recortado a una franja. El max-height
     evita que en pantallas muy anchas empuje todo lo demás fuera de la vista;
     ahí sí recorta un poco, pero solo ahí. */
  aspect-ratio: 2000 / 1305;
  /* width:100% es obligatorio: con aspect-ratio y solo min-height, el navegador
     deduce el ancho a partir del alto mínimo y la caja se salía de la pantalla
     en teléfono (490px de ancho en un viewport de 390). */
  width: 100%;
  height: auto;
  /* 100vh y no menos: la instrucción es que la foto ocupe la diapositiva
     completa. A partir de ~16:9 el alto de pantalla se queda corto para la
     proporción 1.53 de la imagen y recorta un poco por arriba y por abajo
     (~14% en 1920x1080, ~3% en un portátil 16:10); ese recorte se lleva cielo
     y agua, no la casa, que está al centro. */
  max-height: var(--jt-screen-h);
  min-height: 16rem;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

/* Acotado al <picture> del fondo: antes era `.amezcua-hero img` a secas y
   atrapaba también la firma del titular, que salía estirada a todo el ancho
   del hero y en position:absolute. */
.amezcua-hero > picture,
.amezcua-hero > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.amezcua-hero-tint {
  position: absolute;
  inset: 0;
  /* Antes eran dos velos que cubrían la imagen entera (uno de arriba abajo
     desde 0.18 y otro lateral al 0.55): apagaban la foto completa. Ahora la
     mitad superior queda limpia —la imagen es el argumento— y solo se oscurece
     la franja de abajo, que es donde va el nombre y donde hace falta contraste
     para leerlo. El último tramo cierra en el color de fondo de la sección
     para que no se marque el corte. */
  background: linear-gradient(
    to bottom,
    rgba(12, 20, 11,0)    0%,
    rgba(12, 20, 11,0)    42%,
    rgba(12, 20, 11,0.16) 55%,
    rgba(12, 20, 11,0.58) 70%,
    rgba(12, 20, 11,0.88) 86%,
    rgb(12, 20, 11)      100%
  );
}

.amezcua-hero-content {
  position: relative;
  z-index: 1;
  padding: 2rem clamp(1.25rem, 5vw, 4.5rem) clamp(2.5rem, 4.5vw, 4rem);
  width: 100%;
}

.amezcua-eyebrow {
  display: block;
  font-size: clamp(0.82rem, 1.15vw, 1.05rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand-canopy);
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.amezcua-name {
  /* Ya no lleva texto: solo envuelve la firma y conserva el encabezado. El
     margen es el mismo que tenía el nombre compuesto, para no mover el bloque. */
  margin: 0.6rem 0 1.5rem;
  line-height: 0;
}

/* La firma sustituye al nombre en Dancing Script. Se dimensiona por ANCHO y no
   por font-size, que es lo que hacía el texto: es una imagen, y el alto sale
   solo de su proporción. Los cortes de abajo bajan en la misma escala que
   tenían los cuatro tamaños del nombre. */
.amezcua-name-sign {
  display: block;
  width: clamp(19rem, 34vw, 38rem);
  height: auto;
  /* El trazo es blanco y cae sobre una foto con zonas claras: la misma
     escalera de sombras que llevaba el text-shadow del nombre, pero en
     drop-shadow, que sí sigue el contorno del dibujo. */
  filter:
    drop-shadow(0 2px 6px rgba(12, 20, 11, 0.55))
    drop-shadow(0 4px 40px rgba(0, 0, 0, 0.5));
}

/* Badges de prensa — estáticos y siempre visibles (antes ticker en movimiento) */

.amezcua-strip {
  width: 100%;
  overflow: hidden;
  background: rgba(var(--brand-canopy-rgb), 0.06);
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
  padding: 0.9rem 0;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

.amezcua-strip-track {
  display: flex;
  align-items: center;
  gap: 2rem;
  white-space: nowrap;
  animation: jtMarquee 28s linear infinite;
  width: max-content;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.65);
  font-weight: 500;
}

.amezcua-strip-track .sd {
  opacity: 0.35;
  font-size: 0.8rem;
}

.amezcua-body-wrap {
  /* Sin este padding el retrato de Julio quedaba pegado, a 0 px, del borde
     inferior de la foto grande de arriba. */
  padding-top: clamp(2.5rem, 5.5vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* ── Split: texto a la izquierda, retrato de Julio a la derecha ── */
.amezcua-split {
  display: grid;
  /* La columna de texto pesa más que la del retrato: el retrato es vertical
     (854x1280) y con más ancho se comería el alto de toda la sección. */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.amezcua-split-text {
  min-width: 0;
}

.amezcua-portrait {
  margin: 0;
  min-width: 0;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.16);
  box-shadow: 0 28px 70px -34px rgba(0, 0, 0, 0.9);
  /* Sin aspect-ratio fijo: la foto manda su propia proporción y se ve
     completa, sin recortarle la cabeza ni los pies. */
  line-height: 0;
}

.amezcua-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Cita editorial ── */
.amezcua-quote-block {
  text-align: left;
  padding: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* La cita es el headline principal de la sección — no un adorno tipográfico
   que el ojo pueda saltarse. Grande, al frente, con el nombre como firma. */
.amezcua-quote-block .amezcua-quote {
  border-left: none;
  padding: 0;
  margin: 0;
  text-align: left;
  font-family: var(--font-serif);
  text-transform: uppercase;
  line-height: 1;
  font-style: normal;
  font-weight: 300;
  font-size: clamp(2.1rem, 4.6vw, 3.75rem);
  color: var(--hero-text);
  max-width: 50rem;
}

.amezcua-quote-block .amezcua-quote cite {
  font-size: 0.72rem;
  margin-top: 1.5rem;
}

/* Línea separadora entre la cita y las columnas */
.amezcua-divider {
  height: 1px;
  /* Alineado a la izquierda como el texto: el degradado arranca opaco y se
     apaga hacia la derecha, en vez de difuminarse por los dos lados como
     cuando el bloque iba centrado. */
  background: linear-gradient(to right, rgba(var(--brand-canopy-rgb), 0.30), transparent);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.amezcua-bio-col {
  max-width: 46rem;
  margin: 0;
  text-align: left;
}

.amezcua-bio {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.85;
}

.amezcua-bio strong {
  color: var(--hero-accent);
  font-weight: 600;
}

.amezcua-story {
  font-size: clamp(0.94rem, 1.3vw, 1.05rem);
  line-height: 1.90;
  color: rgba(var(--brand-sand-rgb), 0.78);
  margin-bottom: 1.3rem;
}

.amezcua-story strong { color: var(--hero-text); font-weight: 600; }
.amezcua-story em { font-style: italic; color: var(--brand-canopy); }

.amezcua-quote {
  margin: 0 0 2.5rem;
  padding: 0.5rem 0 1.5rem 2.2rem;
  border-left: 2px solid rgba(var(--brand-canopy-rgb), 0.65);
  background: none;
  border-radius: 0;
  font-family: var(--font-body);
  line-height: 1.3;
  font-size: clamp(1.45rem, 2.8vw, 2.2rem);
  font-style: italic;
  font-weight: 300;
  color: rgba(var(--brand-sand-rgb), 0.92);
}

.amezcua-quote cite {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.70);
  font-style: normal;
  margin-top: 1.2rem;
}

.amezcua-media {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.5rem;
  background: rgba(var(--brand-canopy-rgb), 0.04);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.10);
  border-radius: 0.85rem;
}

.amezcua-media-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--brand-sand-rgb), 0.40);
  flex-shrink: 0;
  margin: 0;
}

.amezcua-media-logos {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  flex-wrap: wrap;
}

.press-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.36rem 0.88rem;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.25);
  border-radius: 999px;
  background: rgba(var(--brand-canopy-rgb), 0.06);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--brand-sand-rgb), 0.75);
  transition: border-color 250ms ease, background 250ms ease, color 250ms ease;
}

.press-badge:hover {
  border-color: rgba(var(--brand-canopy-rgb), 0.45);
  background: rgba(var(--brand-canopy-rgb), 0.12);
  color: var(--hero-text);
}

.amezcua-media-logos span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(var(--brand-sand-rgb), 0.58);
  text-transform: uppercase;
}

.amezcua-media--center {
  justify-content: center;
  max-width: fit-content;
  margin: 2.5rem auto 0;
}

/* ═══════════════════════════════════════════
   KINEKI — sección propia
═══════════════════════════════════════════ */
.story-section--kineki {
  padding: clamp(4rem, 6.5vw, 6rem) 0;
}

/* Los 3 pares dato → remate emocional, antes de las tarjetas expandidas */
/* Párrafo de entrada de KINEKI — sustituye a la lista de 3 filas
   "dato → remate". Mismo ensanchado progresivo que .section-heading--center
   para que crezca junto al título en pantallas anchas en vez de quedarse
   angosto debajo de él. */
.kineki-intro {
  max-width: 46rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto;
  text-align: center;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.85;
  color: rgba(var(--brand-sand-rgb), 0.72);
}

@media (min-width: 1600px) { .kineki-intro { max-width: 56rem; } }
@media (min-width: 1920px) { .kineki-intro { max-width: 62rem; } }

.kineki-pillars {
  margin-top: clamp(1rem, 3vw, 2rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.kineki-pillar {
  height: 100%;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border-radius: 1.25rem;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.08);
  background: linear-gradient(160deg, rgba(var(--brand-ink-soft-rgb), 0.80) 0%, rgba(var(--brand-ink-rgb), 0.72) 100%);
  text-align: center;
}

.kineki-pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.24);
  background: rgba(var(--brand-canopy-rgb), 0.10);
  color: var(--hero-accent);
}

.kineki-pillar-icon svg { width: 1.3rem; height: 1.3rem; }

.kineki-pillar-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.75);
  margin-bottom: 0.6rem;
}

.kineki-pillar h3 {
  font-family: var(--font-serif);
  text-transform: uppercase;
  line-height: 1;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--hero-text);
  margin: 0 0 0.6rem;
}

.kineki-pillar p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(var(--brand-sand-rgb), 0.68);
  margin: 0 0 0.85rem;
}

.kineki-pillar-punch {
  font-style: italic;
  color: var(--hero-accent) !important;
  margin-bottom: 0 !important;
}

.kineki-closing {
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
  text-align: center;
  font-size: 0.96rem;
  line-height: 1.85;
  color: rgba(var(--brand-sand-rgb), 0.72);
}

.amezcua-stats {
  background: linear-gradient(to right, rgba(var(--brand-canopy-rgb),0.06) 0%, transparent 50%);
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
}

.amezcua-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.amezcua-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 1rem clamp(0.75rem, 2vw, 2rem);
  border-right: 1px solid rgba(var(--brand-canopy-rgb), 0.10);
}

.amezcua-stat:last-child { border-right: none; }

.amezcua-stat-num {
  font-family: var(--font-body);
  line-height: 1.05;
  /* Baja desde clamp(2.5rem, 5vw, 5.5rem) —88px— porque los valores dejaron de
     ser cifras cortas ("3", "0") y ahora son palabras ("COLUMBIA", "KINEKI").
     A 88px "COLUMBIA" medía más que su propia columna y desbordaba. */
  font-size: clamp(1.5rem, 2.8vw, 3rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--brand-canopy);
  text-shadow: 0 0 60px rgba(var(--brand-canopy-rgb), 0.28);
}

.amezcua-stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 0.62 y no 0.50: las etiquetas pasaron de dos palabras a frases con la
     información real (dónde se formó, qué premio, qué fundó). Ya no son un pie
     de cifra, son el contenido. */
  color: rgba(var(--brand-sand-rgb), 0.62);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════
   CONFIANZA — "19+ años" + respaldo TAO
═══════════════════════════════════════════ */
.story-section--confianza {
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}

.confianza-panel {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid var(--page-line);
  background: linear-gradient(160deg, rgba(var(--brand-ink-soft-rgb), 0.72), rgba(var(--brand-ink-rgb), 0.60));
  box-shadow: var(--page-shadow);
  padding: clamp(2.25rem, 5vw, 3.75rem);
}

/* La marca de TAO era una filigrana recortada por el borde del panel: se
   intuía un círculo a medias y el reparto en tres no se leía. Ahora es la
   tercera columna, con el mismo peso visual que la cifra del otro extremo
   y su propia línea divisoria. */
.confianza-brand {
  flex: 0 0 clamp(8rem, 13vw, 11.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.confianza-brand-logo {
  width: clamp(7rem, 11vw, 10rem);
  height: auto;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity 320ms ease;
}

.confianza-panel:hover .confianza-brand-logo { opacity: 0.72; }

.confianza-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
}

/* Va DESPUÉS de ".story-section--explore .section-title", que pone
   text-transform:none: misma especificidad (0,2,0), así que gana por orden.
   El resto de secciones "explore" conservan su caja baja a propósito. */
.story-section--confianza .section-title {
  text-transform: uppercase;
}

.confianza-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.confianza-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.20);
  background: rgba(var(--brand-canopy-rgb), 0.08);
  font-size: 0.76rem;
  color: rgba(var(--brand-sand-rgb), 0.75);
}

.confianza-chip i {
  color: var(--hero-accent);
  font-size: 0.68rem;
}

.confianza-figure {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  flex: 0 0 clamp(8rem, 13vw, 11.5rem);
}

.confianza-figure-num {
  font-family: var(--font-body);
  line-height: 1;
  font-size: clamp(4.2rem, 8vw, 6.75rem);
  font-weight: 300;
  color: var(--brand-canopy);
  text-shadow: 0 0 60px rgba(var(--brand-canopy-rgb), 0.28);
}

.confianza-figure-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--brand-sand-rgb), 0.55);
}

.confianza-divider {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  background: rgba(var(--brand-canopy-rgb), 0.16);
}

.confianza-copy {
  flex: 1 1 auto;
  min-width: 0;
}

/* El panel ya no recorta nada, pero se conserva por los bordes redondeados */

/* La columna central se lee centrada de arriba abajo: título, párrafos y
   botón. Antes solo el móvil lo hacía. */
.confianza-copy { text-align: center; }
.confianza-copy .section-heading { margin-bottom: 1rem; }
.confianza-copy .section-copy {
  margin-left: auto;
  margin-right: auto;
}

/* .story-section--explore pone las acciones a margin-top:0; aquí el botón va
   colgado del último párrafo del copy y sí necesita su propio aire. Va
   centrado en su columna, no pegado al margen del texto. */
.confianza-copy .section-actions {
  margin-top: 1.9rem;
  justify-content: center;
}

#confianza .section-title {
  font-size: var(--section-title-size);
  text-transform: uppercase;
}

#kineki-heading,
#escenarios-heading {
  text-transform: uppercase;
}

/* Con tres columnas el texto se estrecha demasiado antes de ~1100px: ahí la
   marca se retira y el panel vuelve a leerse en dos partes. */
@media (max-width: 1100px) {
  .confianza-brand,
  .confianza-divider--brand { display: none; }
}

@media (max-width: 767.98px) {
  .confianza-row {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }
  .confianza-divider {
    width: min(12rem, 60%);
    height: 1px;
  }
  .confianza-copy .section-heading,
  .confianza-copy .section-copy {
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .confianza-chips,
  .confianza-copy .section-actions {
    justify-content: center;
  }
  .confianza-figure,
  .confianza-brand { flex: 0 0 auto; }
  .confianza-brand-logo { width: 8rem; opacity: 0.5; }
}

@media (max-width: 575.98px) {
  .confianza-brand,
  .confianza-divider--brand { display: none; }
}

/* ═══════════════════════════════════════════
   SECCIÓN INVERSIÓN
═══════════════════════════════════════════ */
/* Mismo criterio que .story-section--explore, con el acento en tierra y
   entrando por la esquina contraria para que dos secciones seguidas no
   repitan el mismo gesto. */
.story-section--inversion,
.story-section--calc {
  padding: clamp(4rem, 6.5vw, 6rem) 0;
  background:
    radial-gradient(circle at 8% 18%, rgba(var(--brand-earth-rgb), 0.07), transparent 32%),
    linear-gradient(180deg, rgba(var(--brand-ink-soft-rgb), 0.90) 0%, rgba(var(--brand-ink-rgb), 0.92) 100%);
}

/* Sin padding-top: este bloque es lo primero de #inversion y la sección ya
   aporta su propio padding superior. Los 2rem que había aquí se sumaban a ese
   padding y al margen del banner, y dejaban la frase de entrada flotando muy
   por debajo del borde de la sección. */
.explore-lotes { margin-bottom: 0; padding-bottom: 0; padding-top: 0; }

.explore-lotes-title {
  font-size: var(--section-title-size) !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

.price-display-block {
  background: linear-gradient(160deg, rgba(var(--brand-ink-soft-rgb),0.72), rgba(var(--brand-ink-rgb),0.60));
  border: 1px solid var(--page-line);
  border-radius: 1.75rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--page-shadow);
}

.price-display-label {
  font-size: 0.70rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--brand-sand-rgb), 0.56);
  font-weight: 500;
  margin: 0 0 0.5rem;
}

.price-display-value {
  font-family: var(--font-body);
  line-height: 1;
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  font-weight: 400;
  color: var(--hero-accent);
  margin: 0;
}

.price-display-value em {
  font-size: 1rem;
  font-style: normal;
  color: rgba(var(--brand-sand-rgb), 0.55);
  margin-left: 0.3rem;
  vertical-align: middle;
}

.price-display-rule {
  height: 1px;
  background: var(--page-line);
  margin: 1.5rem 0;
}

.price-display-hint {
  font-size: 0.88rem;
  line-height: 1.75;
  color: rgba(var(--brand-sand-rgb), 0.74);
  margin: 0;
}

.price-display-hint strong { color: var(--hero-text); font-weight: 500; }

/* ══════════════════════════════════════════════════════
   PREVENTA SYSTEM — banner full-width + price aside
   ══════════════════════════════════════════════════════ */

/* ── Precio compacto (columna derecha) ── */
.pv-price-aside {
  padding: 1.8rem 0 0;
}
.pv-pa-label {
  font-family: var(--font-body);
  /* Intercambiado con .pv-pa-launch-label. El rótulo grande estaba sobre el
     precio tachado —el que ya no aplica— y el pequeño sobre el de
     lanzamiento, que es el que importa. */
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--brand-sand-rgb), 0.70);
  margin: 0 0 0.4rem;
}
.pv-pa-value {
  font-family: var(--font-body);
  line-height: 1.1;
  /* Sube desde clamp(2rem, 4.5vw, 2.8rem): este es el número que tiene que
     robar la mirada, y ahora compite con el precio de lista justo encima. */
  font-size: clamp(2.6rem, 6vw, 3.9rem);
  font-weight: 400;
  color: var(--brand-sand);
  margin: 0;
  /* Misma rejilla que la fila del tachado — ver la nota en .pv-pa-strike-wrap. */
  display: grid;
  width: max-content;
  grid-template-columns: var(--pv-amount-col) max-content;
  align-items: baseline;
}

.pv-pa-value strong { font-weight: 500; }
.pv-pa-value em {
  font-style: normal;
  font-size: 0.7em;
  color: rgba(var(--brand-sand-rgb), 0.45);
  margin-left: 0.3em;
  vertical-align: middle;
}

/* ── Precio de lista tachado — ancla psicológica antes del precio real ── */
/* Rejilla de dos columnas: cifra | costo por m². La primera columna mide lo
   mismo en las DOS líneas de precio (--pv-amount-col, definida en
   .pv-detail-price), que es lo único que consigue que los dos "/m²" arranquen
   en la misma vertical pese a que una cifra va a 26px y la otra a 62px.
   inline-grid y no grid: así la fila mide lo que mide su contenido y el
   tachado —que es un ::after al 100% de ancho— termina justo donde termina el
   costo por m², sin colgar hasta el borde de la columna. */
.pv-pa-strike-wrap {
  position: relative;
  display: grid;
  width: max-content;
  grid-template-columns: var(--pv-amount-col) max-content;
  align-items: baseline;
  margin: 0 0 0.35rem;
}

.pv-pa-strike-text {
  font-family: var(--font-body);
  /* Sube desde 1.15rem para que el precio de lista se lea como cifra, no
     como nota: es la referencia contra la que se compara el lanzamiento. */
  font-size: 1.65rem;
  font-weight: 400;
  color: rgba(var(--brand-sand-rgb), 0.78);
}

/* El tachado se dibuja con un pseudo-elemento y no con text-decoration
   porque text-decoration no se puede animar: aquí la línea crece de
   izquierda a derecha, al mismo tiempo que el precio se apaga.
   Cuelga de la FILA, no de la cifra, para cruzar también el $5,000/m². */
.pv-pa-strike-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  top: 52%;
  height: 2px;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: rgba(var(--brand-canopy-rgb), 0.75);
  box-shadow: 0 0 6px rgba(var(--brand-canopy-rgb), 0.35);
  pointer-events: none;
}
.pv-banner.is-visible .pv-pa-strike-wrap::after {
  animation: pvStrike 520ms cubic-bezier(0.65, 0, 0.35, 1) 1.25s both;
}
@keyframes pvStrike {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.pv-pa-strike-text em {
  font-style: normal;
  font-size: 0.72em;
  color: rgba(var(--brand-sand-rgb), 0.32);
  margin-left: 0.25em;
}

/* ── PREVENTA BANNER — full width editorial ── */
.pv-banner {
  /* Era clamp(2.5rem, 5vw, 4rem) — 64px en escritorio que se apilaban sobre el
     padding de la sección. El banner abre #inversion, no separa dos bloques. */
  margin-top: 0;
  position: relative;
}

@keyframes pvDotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(var(--brand-canopy-rgb), 0.65); opacity: 1; }
  50%      { box-shadow: 0 0 0 8px rgba(var(--brand-canopy-rgb), 0); opacity: 0.72; }
}

/* ── Reglas que se dibujan ── */
.pv-rule {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--brand-canopy-rgb), 0.35) 20%,
    rgba(var(--brand-canopy-rgb), 0.55) 50%,
    rgba(var(--brand-canopy-rgb), 0.35) 80%,
    transparent 100%
  );
  transform: scaleX(0);
  transform-origin: center;
}
.pv-banner.is-visible .pv-rule--top {
  animation: pvRuleDraw 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.pv-banner.is-visible .pv-rule--bottom {
  animation: pvRuleDraw 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both;
}
@keyframes pvRuleDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── LA PALABRA ── */
.pv-word-wrap {
  padding: clamp(0.6rem, 1.5vw, 1.2rem) 0;
  text-align: center;
  overflow: hidden;
  opacity: 0;
}
.pv-banner.is-visible .pv-word-wrap {
  animation: pvWordIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
@keyframes pvWordIn {
  from {
    opacity: 0;
    letter-spacing: 0.01em;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    letter-spacing: 0.18em;
    transform: translateY(0);
  }
}

.pv-word {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(3rem, 11.5vw, 9.5rem);
  font-weight: 300;
  letter-spacing: 0.18em;
  text-indent: 0.18em; /* compensa centrado con letter-spacing */
  color: var(--brand-canopy);
  display: inline-block;
  text-shadow:
    0 0 60px rgba(var(--brand-canopy-rgb), 0.22),
    0 0 120px rgba(var(--brand-canopy-rgb), 0.10);
}

/* ── La frase bajo la palabra, todavía dentro de las dos reglas ── */
.pv-tagline {
  margin: 0;
  padding: 0 1rem clamp(0.7rem, 1.6vw, 1.2rem);
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.75vw, 1.45rem);
  font-weight: 700;
  font-style: italic;
  /* Menos espaciado que un kicker: al cuerpo actual la frase ya pesa por
     tamaño y con 0.2em se partía en tres líneas en teléfono. */
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(var(--brand-sand-rgb), 0.7);
  opacity: 0;
}
/* Entra después de la palabra y antes de que se dibuje la regla de abajo. */
.pv-banner.is-visible .pv-tagline {
  animation: pvFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

/* Shimmer sweep sobre la palabra */
.pv-word-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--brand-canopy-rgb), 0.10),
    transparent
  );
  animation: pvSweep 7s ease-in-out 1.5s infinite;
  pointer-events: none;
}
.pv-word-wrap { position: relative; }

@keyframes pvSweep {
  0%     { left: -70%; }
  50%, 100% { left: 130%; }
}

/* Keyframe compartido */
@keyframes pvFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Light theme ── */
html[data-theme="light"] .pv-pa-value { color: var(--brand-sand); }

/* ── Bloque del precio en tema claro ───────────────────────────────────────
   --hero-accent sigue siendo --brand-canopy (#d6d4bf) también en claro, pese
   a lo que dice el comentario del bloque de variables. Sobre el crema de la
   página eso es beige sobre beige: medido, el precio de lanzamiento entero
   —etiqueta y cifra— quedaba prácticamente invisible.
   Se usa el oro profundo que el propio tema ya define en --page-line-strong
   (#7d6e30), que sí tiene cuerpo sobre crema.
   Lo del costo por m² se arregla aquí porque es la misma línea de precio y
   se veía igual de lavada. */
html[data-theme="light"] .pv-pa-launch-label { color: #6f6129; }
html[data-theme="light"] .pv-pa-value .pv-pa-per-m2 { color: #6f6129; }
html[data-theme="light"] .pv-pa-limit        { color: rgba(var(--brand-sand-rgb), 0.68); }
/* El del precio de lista va con el gris del propio tachado, no en dorado:
   es un dato caducado, no una cifra que quiera atención. */
html[data-theme="light"] .pv-pa-strike-text ~ .pv-pa-per-m2 { color: rgba(var(--brand-sand-rgb), 0.55); }
html[data-theme="light"] .pv-pa-strike-wrap::after {
  background: rgba(125, 110, 48, 0.85);
  box-shadow: none;
}

html[data-theme="light"] .pv-pa-shine {
  background-image: linear-gradient(
    100deg,
    #6f6129 38%,
    #a8912f 50%,
    #6f6129 62%
  );
  filter: drop-shadow(0 0 14px rgba(125, 110, 48, 0.18));
}
html[data-theme="light"] .pv-word {
  text-shadow: 0 0 50px rgba(var(--brand-canopy-rgb), 0.20);
}

/* ── Detail strip: precio + bondades + CTA ── */
.pv-detail-strip {
  display: grid;
  /* Dos columnas iguales desde que se quitaron los botones.
     Con `auto 1fr` la de precio se ajustaba a su contenido (~442 px) y la de
     texto se quedaba con el resto (~798 px): el argumento terminaba a media
     altura y dejaba un hueco abajo a la derecha. A 1fr 1fr las dos miden lo
     mismo, el texto ocupa más renglones y las dos cajas cierran parejas.
     `start` en lugar de `center` para que ambas arranquen en la misma línea. */
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.4rem, 3vw, 2rem) 0 0;
  opacity: 0;
  transform: translateY(10px);
}
.pv-banner.is-visible .pv-detail-strip {
  animation: pvFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
}

/* ══ Secuencia del precio ══════════════════════════════════════════════════
   1.25s  el precio de lista se APAGA — no se tacha. Sigue legible como
          referencia; solo pierde presencia para que deje de competir.
   1.50s  entra "Precio de lanzamiento".
   1.65s  entra $945,000 con un rebote corto y se queda con un brillo que
          recorre la cifra en bucle.
   Los retardos se cuentan sobre el 0.65s en que aparece la tira entera. */

.pv-banner.is-visible .pv-pa-strike-text {
  animation: pvPriceDim 900ms ease 1.25s both;
}

@keyframes pvPriceDim {
  from { color: rgba(var(--brand-sand-rgb), 0.78); }
  to   { color: rgba(var(--brand-sand-rgb), 0.55); }
}

.pv-banner.is-visible .pv-pa-launch-label {
  animation: pvFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.5s both;
}

.pv-banner.is-visible .pv-pa-value {
  animation: pvPriceIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.65s both;
}

/* transform-origin a la izquierda: el precio está alineado a la izquierda y
   escalar desde el centro lo hace bailar sobre su propio margen. */
@keyframes pvPriceIn {
  0%   { opacity: 0; transform: translateY(12px) scale(0.92); }
  55%  { opacity: 1; transform: translateY(0)    scale(1.05); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

.pv-pa-value { transform-origin: left center; }

/* El brillo va sobre el número, no sobre el "MXN": background-clip:text con
   fill transparente se heredaría al <em> y lo dejaría invisible. */
.pv-pa-shine {
  background-image: linear-gradient(
    100deg,
    var(--hero-accent) 38%,
    #fff8e0 50%,
    var(--hero-accent) 62%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: priceAnchorShine 5s ease-in-out 2.2s infinite;
  filter: drop-shadow(0 0 18px rgba(var(--brand-canopy-rgb), 0.28));
}

@media (prefers-reduced-motion: reduce) {
  .pv-banner.is-visible .pv-pa-strike-text,
  .pv-banner.is-visible .pv-pa-launch-label,
  .pv-banner.is-visible .pv-pa-value {
    animation: none;
  }
  /* El precio de lista se queda apagado igualmente: es información, no adorno. */
  .pv-pa-strike-text { color: rgba(var(--brand-sand-rgb), 0.55); }
  .pv-pa-shine {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--hero-accent);
    filter: none;
  }
}

.pv-detail-price {
  /* Ancho de la primera columna de las dos filas de precio. Es 6.5 veces el
     cuerpo del precio de lanzamiento —que es el que manda, porque su cifra es
     la más ancha: mide 6.37em— y usa el MISMO clamp, así que las dos filas
     siguen alineadas en cualquier ancho de pantalla sin números fijos. */
  --pv-amount-col: calc(clamp(2.6rem, 6vw, 3.9rem) * 6.5);
  border-right: 1px solid rgba(var(--brand-canopy-rgb), 0.18);
  padding-right: clamp(1.5rem, 3vw, 3rem);
  /* El filete divisorio tiene que llegar abajo aunque esta columna sea la
     corta: con align-items:start la celda ya no se estira sola. */
  height: 100%;
}

/* ── Etiqueta "Precio de lanzamiento" ──────────────────────────────────────
   Mismo peso tipográfico que "Precio desde" pero en dorado: es la que marca
   el salto entre el precio de lista apagado y el precio que importa. */
.pv-pa-launch-label {
  display: block;
  font-family: var(--font-body);
  /* Intercambiado con .pv-pa-label — ver la nota allí — y luego subido otro
     punto: es el rótulo del precio que manda. */
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.88);
  margin: 0.35rem 0 0.25rem;
}

/* Costo por m² — ya no es una línea suelta debajo del bloque: va al final de
   la cifra a la que pertenece, en la misma línea ($5,000/m² con el precio de
   lista, $3,500/m² con el de lanzamiento). El cuerpo se define en "em" para
   que cada uno se ajuste a la cifra que acompaña, que son de tamaños muy
   distintos: 26.4px la tachada y hasta 62.4px la de lanzamiento. */
.pv-pa-per-m2 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  /* En rem, no en em: cada fila tiene un cuerpo distinto y en "em" el margen
     salía distinto en cada una — 13.4 contra 18.3px — y descuadraba justo lo
     que esta rejilla está para cuadrar. */
  margin-left: 1rem;
}

.pv-pa-per-m2 span {
  font-weight: 500;
  opacity: 0.78;
}

/* Sobre el precio de lista: mismo gris apagado del resto de la línea, porque
   lo cruza el mismo tachado. */
/* En rem y no en em: al sacar el m² de dentro de la cifra, su "em" pasó a
   heredar del contenedor (16px) en vez de los 26.4px de la cifra, y quedaba
   más chico que antes. La cifra de esta fila es fija (1.65rem), así que un
   valor en rem es igual de estable. */
.pv-pa-strike-text ~ .pv-pa-per-m2 {
  font-size: 1.2rem;
  color: rgba(var(--brand-sand-rgb), 0.52);
}

/* Sobre el de lanzamiento: dorado, como estaba cuando era línea propia. */
.pv-pa-value .pv-pa-per-m2 {
  font-size: 0.42em;
  color: var(--hero-accent);
}

/* Por debajo de 576px la columna de la cifra ya no deja sitio al m² al lado:
   las dos filas pasan a una sola columna y el m² baja a su propio renglón.
   Siguen alineados entre sí — ahora los dos contra el margen izquierdo. */
@media (max-width: 575.98px) {
  .pv-pa-strike-wrap,
  .pv-pa-value {
    grid-template-columns: max-content;
  }
  .pv-pa-per-m2 { margin-left: 0; }
}

.pv-pa-limit {
  margin: 0.45rem 0 0;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-style: italic;
  /* 0.62 y no 0.5: esta línea pasó de ser una nota al pie ("solo para los
     primeros 30 lotes") a llevar la urgencia ("única ocasión, date prisa").
     A 0.5 se leía como letra pequeña y se perdía. */
  color: rgba(var(--brand-sand-rgb), 0.62);
}

.pv-detail-body { min-width: 0; }

/* Frase de cierre: va sola, un punto más apagada y sin el ancho de columna
   del párrafo largo, para que se lea como remate y no como continuación. */
.pv-detail-text--close {
  margin-top: 0.85rem;
  font-style: italic;
  color: rgba(var(--brand-sand-rgb), 0.62);
}

.pv-detail-title {
  font-family: var(--font-serif);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 400;
  color: var(--hero-text);
  margin: 0 0 0.5rem;
}

.pv-detail-text {
  font-family: var(--font-body);
  font-size: clamp(0.82rem, 1.15vw, 0.92rem);
  color: rgba(var(--brand-sand-rgb), 0.58);
  line-height: 1.75;
  margin: 0;
}

/* ── Lote row — separado visualmente ── */
.pv-lote-row {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.14);
}

/* ── Light theme ── */
html[data-theme="light"] .pv-detail-price { border-color: rgba(var(--brand-sand-rgb), 0.15); }
html[data-theme="light"] .pv-detail-text { color: rgba(var(--brand-sand-rgb), 0.62); }
html[data-theme="light"] .pv-lote-row { border-color: rgba(var(--brand-sand-rgb), 0.14); }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .pv-word-wrap,
  .pv-rule,
  .pv-detail-strip { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .pv-detail-strip { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .pv-detail-price { grid-column: 1; grid-row: 1; border-right: none; border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.18); padding-right: 0; padding-bottom: 1rem; }
  .pv-detail-body  { grid-column: 1; grid-row: 2; }
}
@media (max-width: 767px) {
  .pv-word { letter-spacing: 0.12em; text-indent: 0.12em; }
  .pv-detail-strip { grid-template-columns: 1fr; grid-template-rows: auto; gap: 1.2rem; }
  .pv-detail-price { grid-column: 1; grid-row: 1; border-bottom: none; padding-bottom: 0; }
  .pv-detail-body  { grid-column: 1; grid-row: 2; }
}
@media (max-width: 400px) {
  .pv-word { font-size: clamp(2.5rem, 14vw, 3.5rem); letter-spacing: 0.08em; text-indent: 0.08em; }
}

.explore-payment {
  margin-top: 0;
  padding-top: 0;
}

.explore-payment .section-heading { margin-bottom: 3rem; }

.payment-path {
  background: linear-gradient(160deg, rgba(var(--brand-ink-soft-rgb),0.60), rgba(var(--brand-ink-rgb),0.50));
  border: 1px solid var(--page-line);
  border-radius: 1.75rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--page-shadow);
  transition: border-color 320ms ease, box-shadow 320ms ease, transform 280ms ease;
  position: relative;
  overflow: hidden;
}

.payment-path::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--brand-canopy-rgb), 0.07), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms ease;
}

.payment-path:hover {
  border-color: rgba(var(--brand-canopy-rgb), 0.38);
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(0,0,0,0.32), 0 0 0 1px rgba(var(--brand-canopy-rgb), 0.14);
}

.payment-path:hover::before {
  opacity: 1;
}

.payment-path-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-accent);
  background: rgba(var(--brand-canopy-rgb), 0.08);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.22);
  border-radius: 999px;
  padding: 0.28rem 0.85rem;
  font-weight: 500;
}

.payment-path-title {
  font-family: var(--font-serif);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 400;
  color: var(--hero-text);
  margin: 0;
}

.payment-path-copy {
  font-size: 0.91rem;
  line-height: 1.82;
  color: rgba(var(--brand-sand-rgb), 0.78);
  margin: 0;
  flex: 1;
}

.payment-path-copy strong { color: var(--hero-text); font-weight: 600; }

.payment-path-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--page-line);
}

.payment-path-items li {
  font-size: 0.83rem;
  color: rgba(var(--brand-sand-rgb), 0.70);
  padding-left: 1.3rem;
  position: relative;
  line-height: 1.5;
}

.payment-path-items li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--hero-accent);
  font-size: 0.75rem;
  top: 0.05em;
}

/* ═══════════════════════════════════════════
   TEMA CLARO
═══════════════════════════════════════════ */
/* explore-philosophy y explore-architect: siempre dark — manejado por el bloque master de variables */
html[data-theme="light"] .explore-entrance-vignette {
  background:
    linear-gradient(to bottom, rgba(12, 20, 11,0.82) 0%, transparent 30%),
    linear-gradient(to right, rgba(12, 20, 11,0.97) 0%, rgba(12, 20, 11,0.82) 30%, rgba(12, 20, 11,0.52) 62%, transparent 82%),
    linear-gradient(to top-right, rgba(12, 20, 11,0.99) 0%, rgba(12, 20, 11,0.80) 38%, rgba(12, 20, 11,0.28) 64%, transparent 78%),
    radial-gradient(ellipse 78% 62% at 16% 78%, rgba(12, 20, 11,0.72) 0%, rgba(12, 20, 11,0.22) 58%, transparent 82%),
    radial-gradient(ellipse 90% 55% at 20% 100%, rgba(var(--brand-canopy-rgb),0.08) 0%, transparent 60%);
}
html[data-theme="light"] .explore-entrance-badge {
  background: rgba(240,235,220,0.75);
  border-color: rgba(var(--brand-canopy-rgb),0.35);
  color: #5a5228;
}
html[data-theme="light"] .price-display-block,
html[data-theme="light"] .payment-path {
  background: rgba(255,255,255,0.82);
  border-color: rgba(0,0,0,0.07);
}
html[data-theme="light"] .payment-path-title { color: var(--brand-sand); }
html[data-theme="light"] .payment-path-copy,
html[data-theme="light"] .price-display-hint { color: rgba(var(--brand-sand-rgb),0.70); }
html[data-theme="light"] .payment-path-copy strong,
html[data-theme="light"] .price-display-hint strong { color: var(--brand-sand); }
html[data-theme="light"] .amezcua-media { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.07); }
html[data-theme="light"] .amezcua-media-logos span { color: rgba(var(--brand-sand-rgb),0.52); }

/* ═══════════════════════════════════════════════════════════
   EXPLORE — OBRA VISUAL (galería de imágenes Kineki)
═══════════════════════════════════════════════════════════ */
.explore-obra {
  display: none;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 7vw, 6rem);
}
.explore-obra-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.explore-obra-rule {
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--brand-canopy);
  flex-shrink: 0;
}
.explore-obra-label {
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--brand-canopy);
  margin: 0;
}

/* ═══════════════════════════════════════════
   RESPONSIVAS — EXPLORE / FILOSOFÍA / AMEZCUA / INVERSIÓN
═══════════════════════════════════════════ */

/* ── Tablet: 768px – 991px ───────────────────────────────── */
@media (max-width: 991.98px) {
  /* Preamble */
  .explore-entrance { max-height: 1000px; }
  .explore-entrance-badge { top: 1.25rem; right: 1.25rem; }

  /* Filosofía — el split maneja su propio padding */
  .explore-philosophy { padding: 0; }
  .philosophy-headline { font-size: clamp(1.9rem, 4.6vw, 2.9rem); }

  /* Amezcua header */
  .amezcua-hero { max-height: 78vh; min-height: 18rem; }
  .amezcua-name-sign { width: clamp(15rem, 46vw, 26rem); }

  /* Amezcua body row — stacks at lg */
  .amezcua-body-wrap { padding-bottom: 2.5rem; }
  .amezcua-story { font-size: 0.95rem; }
  /* Una sola columna: el retrato pasa arriba del texto, con ancho contenido
     para que una foto vertical no ocupe pantallas enteras al hacer scroll. */
  .amezcua-split { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 2.5rem); }
  .amezcua-portrait { order: -1; max-width: 26rem; width: 100%; margin: 0 auto; }
  .amezcua-quote { font-size: clamp(1.1rem, 2.5vw, 1.35rem); }
  .amezcua-quote-block { padding: 1.5rem 2rem 1.25rem; }
  .amezcua-quote-block .amezcua-quote { font-size: clamp(1.3rem, 2.5vw, 2rem); }

  /* Stats 4→2 columns */
  .amezcua-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .amezcua-stat:nth-child(2) { border-right: none; }
  .amezcua-stat:nth-child(3) {
    border-right: 1px solid rgba(var(--brand-canopy-rgb),0.10);
    border-top: 1px solid rgba(var(--brand-canopy-rgb),0.10);
  }
  .amezcua-stat:nth-child(4) { border-right: none; border-top: 1px solid rgba(var(--brand-canopy-rgb),0.10); }

  /* Why-joytree cards: 2-col en tablet */
  .unified-card { padding: 1.5rem; }
}

/* ── Mobile: 576px – 767px ───────────────────────────────── */
@media (max-width: 767.98px) {
  /* Preamble */
  .explore-entrance { height: 92svh; min-height: min(480px, 92svh); max-height: 780px; }
  /* En retrato angosto, "cover" solo deja ver el 28% del ancho de la foto, y
     con el foco centrado el letrero "Joy Tree Akumal" —que está pegado al
     borde derecho— se queda fuera de cuadro. Con el 80% anterior el recorte
     llegaba al 86% de la foto y el letrero seguía cortado a media palabra.
     Al 96% el borde derecho del encuadre cae en el 97% de la foto, así que
     el letrero entra completo. */
  .explore-entrance > picture > img { object-position: 96% 42%; }
  .explore-entrance-logo { width: clamp(7rem, 28vw, 11rem); }
  .explore-entrance-copy { padding: 2.25rem 1.5rem 0; }
  .explore-entrance-scroll { display: none; }

  /* Filosofía */
  .explore-philosophy { padding: 0; }
  .philosophy-body { font-size: 0.95rem; line-height: 1.80; }

  /* Amezcua */
  .amezcua-hero { max-height: 72vh; min-height: 17rem; }
  .amezcua-name-sign { width: clamp(13rem, 52vw, 21rem); }
  .amezcua-strip { margin-bottom: 2.5rem; }
  .amezcua-body-wrap { padding-bottom: 2rem; }
  .amezcua-story { font-size: 0.93rem; line-height: 1.82; }
  .amezcua-quote { padding: 1.25rem 1.25rem; font-size: 1.1rem; }
  .amezcua-quote-block { padding: 1.25rem 1rem 1rem; }
  .amezcua-quote-block .amezcua-quote { font-size: 1.25rem; }
  .amezcua-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .amezcua-stat-num { font-size: clamp(1.35rem, 5.2vw, 2rem); }

  /* Inversión */
  .price-display-value { font-size: clamp(2rem, 7vw, 2.6rem); }

  /* Why-joytree */
  .unified-card { padding: 1.4rem; }

  .explore-obra { padding: 2.5rem 0 3rem; }
}

/* ── Mobile pequeño: <576px ──────────────────────────────── */
@media (max-width: 575.98px) {
  /* Preamble */
  .explore-entrance { min-height: 520px; height: 95svh; }
  .explore-entrance-badge { display: none; }
  .explore-entrance-logo { width: clamp(6.5rem, 32vw, 9.5rem); }
  .explore-entrance-copy { padding: 1.5rem 1.25rem 0; }

  /* Filosofía */
  .explore-philosophy { padding: 0; }
  .philosophy-body-col { max-width: 100%; }
  .philosophy-body { font-size: 0.92rem; }

  /* Amezcua */
  .amezcua-hero { max-height: 68vh; min-height: 15rem; }
  .amezcua-name-sign { width: clamp(11rem, 62vw, 16rem); }
  .amezcua-eyebrow { font-size: 0.74rem; letter-spacing: 0.18em; }
  .amezcua-strip { padding: 0.7rem 0; }
  .amezcua-strip-track { font-size: 0.60rem; gap: 1.25rem; }
  .amezcua-body-wrap { padding-bottom: 0; }
  .amezcua-story { font-size: 0.91rem; }
  .amezcua-quote { padding: 1rem; font-size: 1rem; margin-top: 1.75rem; }
  .amezcua-quote-block { padding: 1rem 0.5rem 0.75rem; }
  .amezcua-quote-block .amezcua-quote { font-size: 1.1rem; }
  .amezcua-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .amezcua-stat { padding: 0.85rem 0.5rem; }
  .amezcua-stat-num { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .amezcua-stat-label { font-size: 0.55rem; }
  .amezcua-media { flex-direction: column; gap: 0.5rem; padding: 0.75rem 1rem; }
  .amezcua-media-logos { gap: 0.6rem; }

  /* Obra */
  .explore-obra { padding: 2rem 0 2.5rem; }
  .price-display-block { padding: 1.25rem; }
  .price-display-value { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .payment-path { padding: 1.25rem; }
  .payment-path-title { font-size: 1.2rem; }
  .payment-path-copy { font-size: 0.88rem; }
  .payment-path-items li { font-size: 0.80rem; }

  /* Why-joytree */
  .unified-card { padding: 1.25rem; border-radius: 1rem; }
  .unified-card h3 { font-size: 0.95rem; }
  .unified-card p { font-size: 0.85rem; }
}
.feature-card,
.insight-card,
.benefit-tile,
.testimonial-card,
.contact-panel,
.location-item,
.contact-point {
  border: 1px solid var(--page-line);
  background: linear-gradient(180deg, rgba(var(--brand-ink-soft-rgb), 0.94), rgba(var(--brand-ink-rgb), 0.82));
  box-shadow: var(--page-shadow);
}

.feature-card,
.contact-point {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.4rem 1.5rem;
  border-radius: 1.35rem;
  transition:
    transform 260ms ease,
    border-color 260ms ease,
    background-color 260ms ease,
    box-shadow 260ms ease;
}

.feature-icon,
.card-icon,
.amenity-icon,
.location-icon,
.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.22);
  background: rgba(var(--brand-canopy-rgb), 0.1);
  color: var(--hero-accent);
  transition:
    transform 420ms ease,
    background-color 260ms ease,
    border-color 260ms ease,
    color 260ms ease;
}

.feature-icon {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--hero-accent);
  color: var(--brand-ink);
}

.card-icon {
  width: 4.2rem;
  height: 4.2rem;
  margin-bottom: 1.15rem;
  border-radius: 50%;
  font-size: 1.55rem;
  align-self: center;
}

/* Los SVG de línea fina (cards de Vecindario) no escalan con font-size
   como los íconos de fuente (<i class="fas ...">) — se fija su tamaño
   explícitamente para que se vean del mismo peso visual que el resto. */
.card-icon svg {
  width: 1.7rem;
  height: 1.7rem;
}

.amenity-icon {
  width: 3.6rem;
  height: 3.6rem;
  margin-bottom: 0.35rem;
  border-radius: 50%;
  font-size: 1.35rem;
  background: rgba(var(--brand-ink-rgb), 0.54);
  backdrop-filter: blur(10px);
}

.location-icon,
.contact-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

.feature-card-index,
.card-tag,
.testimonial-rating,
.contact-point-label {
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.card-tag,
.contact-point-label {
  flex: 0 0 auto;
  color: var(--hero-accent);
  font-size: 0.68rem;
  font-weight: 700;
}

.feature-card:hover {
  transform: translateX(0.65rem);
  border-color: var(--page-line-strong);
  background: linear-gradient(180deg, rgba(var(--brand-water-rgb), 0.2), rgba(var(--brand-ink-rgb), 0.9));
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.28);
}

.feature-card:hover .feature-icon,
.contact-point:hover .contact-icon {
  background: var(--hero-accent);
  border-color: var(--hero-accent);
  color: var(--brand-ink);
  transform: scale(1.06);
}

.feature-card h3,
.insight-card h3,
.benefit-tile h3,
.amenity-card-copy h3,
.project-card-copy h3,
.testimonial-card strong,
.site-footer-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--hero-text);
}

.project-card-copy h3 {
  font-size: clamp(0.82rem, 1.6vw, 0.95rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feature-card h3,
.insight-card h3,
.benefit-tile h3 {
  font-size: 1.05rem;
}

.feature-card p,
.insight-card p,
.benefit-tile p,
.amenity-card-copy p,
.project-card-copy p,
.testimonial-card p,
.location-item p,
.contact-panel-heading p,
.contact-inline-note,
.site-footer-list,
.site-footer-bar p {
  margin: 0;
  color: rgba(var(--brand-sand-rgb), 0.78);
  line-height: 1.7;
}

.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  min-height: 24rem;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.08);
  box-shadow: var(--page-shadow-strong);
  background: var(--brand-ink-soft);
}

.media-frame--tall {
  min-height: 34rem;
}

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

.media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--brand-ink-rgb), 0.08) 0%, rgba(var(--brand-ink-rgb), 0.54) 100%),
    linear-gradient(90deg, rgba(var(--brand-water-rgb), 0.28) 0%, rgba(var(--brand-water-rgb), 0) 54%, rgba(var(--brand-shadow-rgb), 0.46) 100%);
}

.media-frame-badge {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: min(14rem, 60%);
  padding: 1.15rem 1.2rem;
  border-radius: 1.4rem;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.26);
  background: rgba(var(--brand-ink-rgb), 0.72);
  backdrop-filter: blur(14px);
}

.media-frame-badge__value {
  font-family: var(--font-body);
  line-height: 0.9;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--hero-accent);
}

.media-frame-badge__label {
  color: rgba(var(--brand-sand-rgb), 0.8);
  font-size: 0.86rem;
  line-height: 1.5;
}

.explore-media {
  position: relative;
  overflow: visible;
}

.explore-media img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: var(--page-shadow-strong);
  object-fit: cover;
}

.experience-badge {
  position: absolute;
  right: -1.25rem;
  bottom: -1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9.375rem;
  height: 9.375rem;
  padding: 2rem;
  border-radius: 50%;
  background: var(--hero-accent);
  color: var(--brand-ink);
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: exploreBadgePulse 2s infinite;
}

.badge-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
}

.badge-text {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.15;
}

@keyframes exploreBadgePulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

.insight-card,
.benefit-tile,
.testimonial-card {
  height: 100%;
  padding: 2.1rem 1.9rem;
  border-radius: 1.55rem;
  position: relative;
  overflow: hidden;
  transition:
    transform 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease;
}

.insight-card:hover,
.benefit-tile:hover,
.testimonial-card:hover,
.contact-panel:hover {
  transform: translateY(-0.6rem);
  border-color: var(--page-line-strong);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
}

.insight-card:hover .card-icon {
  background: var(--hero-accent);
  border-color: var(--hero-accent);
  color: var(--brand-ink);
  transform: rotateY(360deg);
}

.story-section--invest .insight-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.story-section--invest .insight-card h3 {
  min-height: calc(1.2rem * 1.35 * 2);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.benefit-tile:hover .card-icon {
  background: var(--hero-accent);
  border-color: var(--hero-accent);
  color: var(--brand-ink);
  transform: translateY(-0.2rem) scale(1.04);
}

.testimonial-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--brand-canopy-rgb), 0.07), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms ease;
}

.testimonial-card:hover {
  border-color: rgba(var(--brand-canopy-rgb), 0.38);
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(0,0,0,0.32), 0 0 0 1px rgba(var(--brand-canopy-rgb), 0.14);
}

.testimonial-card:hover::before {
  opacity: 1;
}

.testimonial-card:hover .testimonial-rating {
  background: rgba(var(--brand-canopy-rgb), 0.18);
  border-color: rgba(var(--brand-canopy-rgb), 0.40);
  transition: background 280ms ease, border-color 280ms ease;
}

.amenities-shell {
  position: relative;
  z-index: 1;
  width: 100%;
}

.amenities-header {
  margin-bottom: 0;
  padding: 5rem clamp(1.25rem, 2vw, 2.25rem);
}

/* El titular va escrito en dos renglones fijos con un <br>, y el primero
   —"+59 amenidades para conectar"— pide 1003px al cuerpo común. El bloque
   heredaba el max-width de 50rem de .section-heading--center, que dejaba 742px
   de caja y lo partía en tres. Se ensancha solo el encabezado, no el párrafo
   de abajo, que conserva su medida de lectura. */
@media (min-width: 992px) {
  .amenities-header.section-heading--center { max-width: 70rem; }
  .amenities-header .section-copy { max-width: 46rem; margin-inline: auto; }
}

/* En teléfono NO se fuerza el cuerpo hacia abajo: por decisión del cliente el
   titular conserva el tamaño común de los títulos de sección aunque ahí se
   parta en tres renglones. Encogerlo hasta que cupiera en dos lo dejaba en
   19.8px a 360px de ancho, muy por debajo del resto. */

.amenity-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  padding: 0 clamp(1rem, 2.5vw, 2.5rem) clamp(0.5rem, 1.5vw, 1rem);
}

.amenity-card {
  position: relative;
  flex: 1 1 calc(33.333% - 0.67rem);
  min-width: 18.75rem;
  height: 21.875rem;
  min-height: 21.875rem;
  padding: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.36);
  outline: none;
}

.amenity-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: none;
}

.amenity-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(var(--brand-shadow-rgb), 0.72);
  opacity: 0;
  transition: opacity 500ms ease;
}

.amenity-card:hover img,
.amenity-card:focus-visible img {
  transform: none;
}

.amenity-card:hover::before,
.amenity-card:focus-visible::before {
  opacity: 1;
}

.amenity-card:hover .amenity-icon,
.amenity-card:focus-visible .amenity-icon {
  background: transparent;
  border-color: transparent;
  color: var(--hero-accent);
  transform: none;
}

.amenity-card-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: clamp(1.35rem, 3vw, 2.2rem);
  min-height: 100%;
  text-align: center;
  background: transparent;
  backdrop-filter: none;
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 500ms ease,
    transform 500ms ease;
}

.amenity-icon {
  width: auto;
  height: auto;
  margin-bottom: 0.4rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--hero-accent);
  font-size: 2.75rem;
  backdrop-filter: none;
}

.amenity-card-copy .card-tag {
  display: none;
}

.amenity-card-copy h3 {
  font-size: 1.5rem;
}

.project-card-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  justify-content: flex-end;
  min-height: 100%;
}

.amenity-card:hover .amenity-card-copy,
.amenity-card:focus-visible .amenity-card-copy {
  opacity: 1;
  transform: translateY(0);
}

.amenities-actions {
  padding: 3rem 0;
  background: rgba(var(--brand-shadow-rgb), 0.86);
}

.amenities-actions .section-actions {
  margin-top: 0;
}

/* ── Layout: cabecera centrada ───────────────────────────────── */
.location-header {
  margin-bottom: 2.75rem;
  max-width: none;   /* anula el 50rem de .section-heading--center: ocupa el container completo */
}

/* Copia: más ancha para equilibrar con el título grande */
.location-copy {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* ── Vecindario: 8 cards de valor estratégico bajo el mapa ── */
.location-neighborhood {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.location-neighborhood .section-heading {
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

/* ── Mapa siempre grande, cards de referencia abajo, CTA centrado ──
   El mapa ya no se "abre" — vive expandido de forma permanente. ── */
.location-body--stacked {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 2.75rem);
}

.location-body--stacked .map-frame {
  width: 100%;
  height: clamp(26rem, 52vw, 40rem);
  aspect-ratio: unset;
}

.location-body--stacked .location-list .location-item {
  flex-basis: 15rem;
}

/* ── Lista de distancias ─────────────────────────────────── */
/* flex (no grid) a propósito: 8 tarjetas no siempre llenan un múltiplo
   exacto de columnas a cualquier ancho — un grid auto-fit deja la
   última fila pegada a la izquierda en vez de centrada. */
.location-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 0;
}

.location-list .location-item {
  flex: 1 1 20rem;
}

/* Las cards son 5 y no siempre caben en un múltiplo exacto de columnas: en
   tablet la última fila se queda con una sola y, sin tope, flex-grow la estira
   a todo el ancho — deja de parecer una card y parece un banner. El tope no
   afecta a escritorio, donde las cinco caben en una fila a 248px. */
@media (min-width: 576px) {
  .location-list .location-item { max-width: 22rem; }
}

.location-item {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  align-content: start;   /* título siempre arriba, espacio extra va abajo */
  row-gap: 0.3rem;
  padding: 1rem 1rem 0.9rem;
  border-radius: 1.35rem;
  transition:
    transform 260ms ease,
    border-color 260ms ease,
    background-color 260ms ease,
    box-shadow 260ms ease;
}

/* Botón "Cómo llegar" — ruta real Joy Tree → POI en Google Maps,
   inyectado por page-enhancements.js a partir del mismo data-route */
.location-item-directions {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.28);
  background: rgba(var(--brand-ink-rgb), 0.5);
  color: var(--brand-canopy);
  font-size: 0.7rem;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 200ms ease, transform 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

.location-item:hover .location-item-directions,
.location-item-directions:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.location-item-directions:hover,
.location-item-directions:focus-visible {
  background: var(--hero-accent);
  border-color: var(--hero-accent);
  color: var(--brand-ink);
}

/* Sin hover real (táctil) — siempre visible, no depende de :hover */
@media (hover: none) {
  .location-item-directions {
    opacity: 1;
    transform: none;
  }
}

/* Icono: ocupa ambas filas, centrado en el alto del contenido */
.location-item .location-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
}

/* Título / distancia — siempre arriba */
.location-item span {
  grid-column: 2;
  grid-row: 1;
  display: block;
  color: var(--hero-accent);
  font-family: var(--font-body);
  line-height: 1;
  font-size: 1.35rem;
}

/* Descripción — directamente debajo del título */
.location-item p {
  grid-column: 2;
  grid-row: 2;
  margin-left: 0;
}

.location-item:hover {
  transform: translateX(0.55rem);
  border-color: var(--page-line-strong);
  background: linear-gradient(180deg, rgba(var(--brand-water-rgb), 0.2), rgba(var(--brand-ink-rgb), 0.9));
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.24);
}

.location-item:hover .location-icon {
  background: var(--hero-accent);
  border-color: var(--hero-accent);
  color: var(--brand-ink);
  transform: scale(1.05);
}

/* Cards con ruta interactiva */
.location-item--routable { cursor: pointer; }

.location-item--routable:hover .location-icon::after {
  content: '\f3c5';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 0.55rem;
  color: var(--hero-accent);
  background: var(--brand-ink);
  border-radius: 999px;
  width: 11px;
  height: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.location-icon { position: relative; }

/* La card de playas usa la misma palmera que el motivo "Playas icónicas" de
   los 13 motivos: es un SVG en línea, no un icono de fuente, así que hay que
   darle tamaño a mano para que ocupe lo mismo que los <i> de las demás.
   Va en un <i> y no en un <span> a propósito: ".location-item span" pone
   display:block y lo manda a la columna del texto. */
.location-icon--svg svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.location-item--active {
  border-color: var(--hero-accent) !important;
  background: linear-gradient(180deg,
    rgba(var(--brand-canopy-rgb), 0.15),
    rgba(var(--brand-ink-rgb), 0.85)) !important;
  box-shadow: 0 0 0 1px rgba(var(--brand-canopy-rgb), 0.30),
              0 18px 40px rgba(0,0,0,0.28) !important;
}

.location-item--active .location-icon {
  background: var(--hero-accent);
  border-color: var(--hero-accent);
  color: var(--brand-ink);
}

.location-item--loading {
  opacity: 0.55;
  pointer-events: none;
}

@keyframes jtMapGlow {
  0%, 100% {
    box-shadow:
      var(--page-shadow-strong),
      0 0 0 1px rgba(var(--brand-canopy-rgb), 0.10),
      inset 0 0 32px rgba(var(--brand-canopy-rgb), 0.03);
  }
  50% {
    box-shadow:
      var(--page-shadow-strong),
      0 0 0 1px rgba(var(--brand-canopy-rgb), 0.28),
      inset 0 0 58px rgba(var(--brand-canopy-rgb), 0.10);
  }
}

.map-frame {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.10);
  animation: jtMapGlow 7s ease-in-out infinite;
  aspect-ratio: 5 / 3;
  min-height: 20rem;
  background: var(--brand-ink-soft);
}

/* Overlay que bloquea interacción durante el vuelo cinemático.
   JS añade/quita el atributo [hidden] al terminar la animación. */
.map-flight-lock {
  position: absolute;
  inset: 0;
  z-index: 3;          /* encima del vignette (z-index:2) del ::after */
  cursor: progress;
}
.map-flight-lock[hidden] { display: none; }

/* Mapa informativo: sin arrastre ni zoom por gesto (JS deshabilita los
   handlers). Aquí se refuerza el lado CSS: el scroll táctil vertical de la
   página nunca se lo queda el canvas y el cursor no invita a arrastrar.
   Los clicks siguen llegando a marcadores, lotes y popups. */
#joytree-map .maplibregl-canvas-container,
#joytree-map .maplibregl-canvas {
  cursor: default;
  touch-action: pan-y pinch-zoom;
}

/* Vignette cinemático sobre el mapa (pointer-events: none → no bloquea interacción) */
.map-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(to bottom,
      rgba(12, 20, 11, 0.30) 0%,
      transparent 22%,
      transparent 72%,
      rgba(12, 20, 11, 0.22) 100%
    ),
    radial-gradient(
      ellipse 80% 75% at 56% 54%,
      transparent 34%,
      rgba(12, 20, 11, 0.32) 66%,
      rgba(12, 20, 11, 0.62) 100%
    );
}

html[data-theme="light"] .map-frame::after {
  background:
    linear-gradient(to bottom,
      rgba(26, 43, 46, 0.10) 0%,
      transparent 22%,
      transparent 72%,
      rgba(26, 43, 46, 0.08) 100%
    ),
    radial-gradient(
      ellipse 80% 75% at 56% 54%,
      transparent 38%,
      rgba(26, 43, 46, 0.08) 68%,
      rgba(26, 43, 46, 0.22) 100%
    );
}

/* ── MapLibre map ── */
#joytree-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Filtro de mapa: estilo light fijo en AMBOS temas ────────
   El mapa siempre muestra su estilo claro (cartografía diurna).
   saturate(1.45): Caribe turquesa intenso, selva verde viva.
   hue-rotate(-8deg): agua más cian tropical.
   contrast(1.12): relieve y carreteras más nítidos.
   brightness(1.03): compensa el hillshade-shadow oscuro.
── */
.maplibregl-canvas-container {
  filter: saturate(1.58) brightness(1.04) contrast(1.15) hue-rotate(-8deg) sepia(0.05);
}

/* ── Marcadores: estructura info → stem → dot (anchor bottom) ── */
.jt-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  cursor: default;
}

/* Pill de etiqueta */
.jt-marker__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.06rem;
  padding: 0.3rem 0.65rem;
  border-radius: 0.55rem;
  background: rgba(12, 20, 11, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.24);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  pointer-events: none;
  margin-bottom: 5px;
}

/* Línea vertical de pin */
.jt-marker__stem {
  width: 1.5px;
  height: 14px;
  background: linear-gradient(
    to bottom,
    rgba(var(--brand-canopy-rgb), 0.45),
    rgba(var(--brand-canopy-rgb), 0.08)
  );
  flex-shrink: 0;
}

.jt-marker--main .jt-marker__stem {
  width: 2.5px;
  height: 28px;
  background: linear-gradient(
    to bottom,
    rgba(var(--brand-canopy-rgb), 0.90),
    rgba(var(--brand-canopy-rgb), 0.12)
  );
}

/* Punto del pin */
.jt-marker__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--brand-water);
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  transition: transform 220ms ease;
}

.jt-marker--main .jt-marker__dot {
  width: 18px;
  height: 18px;
  background: var(--brand-canopy);
  border: 3px solid rgba(255, 255, 255, 0.94);
  animation: jtDotPulse 2.8s ease-in-out infinite;
}

/* Doble anillo pulsante + glow exterior */
@keyframes jtDotPulse {
  0%, 100% {
    box-shadow:
      0 2px 14px rgba(0, 0, 0, 0.60),
      0 0 0 0   rgba(200, 192, 126, 0.72),
      0 0 0 0   rgba(200, 192, 126, 0.28),
      0 0 20px  rgba(200, 192, 126, 0.16);
  }
  50% {
    box-shadow:
      0 2px 14px rgba(0, 0, 0, 0.60),
      0 0 0 8px  rgba(200, 192, 126, 0),
      0 0 0 18px rgba(200, 192, 126, 0),
      0 0 44px  rgba(200, 192, 126, 0.44);
  }
}

/* Anillo de impacto — una sola vez, al aterrizar el vuelo cinemático */
.jt-marker__dot--burst { position: relative; }
.jt-marker__dot--burst::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(200, 192, 126, 0.85);
  animation: jtLandingBurst 1050ms cubic-bezier(0.16, 1, 0.3, 1) both;
  pointer-events: none;
}
@keyframes jtLandingBurst {
  0%   { transform: scale(0.4); opacity: 0.95; border-width: 3px; }
  70%  { opacity: 0.35; }
  100% { transform: scale(4.2); opacity: 0; border-width: 0.5px; }
}

/* Hover sutil en marcadores secundarios */
.jt-marker:not(.jt-marker--main) {
  cursor: pointer;
}

.jt-marker__info {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.jt-marker:not(.jt-marker--main):hover .jt-marker__info {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.68);
  border-color: rgba(var(--brand-canopy-rgb), 0.48);
}

.jt-marker:not(.jt-marker--main):hover .jt-marker__dot {
  transform: scale(1.35);
}

/* Marcador de destino de ruta */
.jt-marker--dest .jt-marker__dot {
  width: 14px;
  height: 14px;
  background: #38b2f8;
  border: 2px solid rgba(12, 20, 11,0.80);
  box-shadow: 0 0 0 3px rgba(56, 178, 248, 0.35), 0 4px 14px rgba(0,0,0,0.50);
  animation: jtDestPulse 2s ease-in-out infinite;
}

.jt-marker--dest .jt-marker__stem {
  width: 2px;
  height: 20px;
  background: linear-gradient(to bottom, #38b2f8, transparent);
}

@keyframes jtDestPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(56, 178, 248, 0.35), 0 4px 14px rgba(0,0,0,0.50); }
  50%       { box-shadow: 0 0 0 7px rgba(56, 178, 248, 0.15), 0 4px 14px rgba(0,0,0,0.50); }
}

/* ── Puntos de interés: hoteles / cenotes / playas ─────────────
   Reutilizan la anatomía .jt-marker con su propio color de
   categoría, más un ícono pequeño dentro de la pill. ────────── */
.jt-marker--poi .jt-marker__info {
  flex-direction: row;
  gap: 0.38rem;
  padding: 0.26rem 0.6rem 0.26rem 0.4rem;
}
.jt-marker__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}
.jt-marker__icon svg { width: 100%; height: 100%; }
.jt-marker--poi .jt-marker__name { font-size: 0.6rem; letter-spacing: 0.04em; }

.jt-marker--hotel .jt-marker__dot  { background: #e0935f; }
.jt-marker--hotel .jt-marker__stem { background: linear-gradient(to bottom, rgba(224,147,95,0.65), transparent); }
.jt-marker--hotel .jt-marker__icon { color: #e0935f; }
.jt-marker--hotel .jt-marker__info { border-color: rgba(224,147,95,0.30); }

.jt-marker--cenote .jt-marker__dot  { background: #42c7e0; }
.jt-marker--cenote .jt-marker__stem { background: linear-gradient(to bottom, rgba(66,199,224,0.65), transparent); }
.jt-marker--cenote .jt-marker__icon { color: #42c7e0; }
.jt-marker--cenote .jt-marker__info { border-color: rgba(66,199,224,0.30); }

.jt-marker--playa .jt-marker__dot  { background: #2fbfb0; }
.jt-marker--playa .jt-marker__stem { background: linear-gradient(to bottom, rgba(47,191,176,0.65), transparent); }
.jt-marker--playa .jt-marker__icon { color: #2fbfb0; }
.jt-marker--playa .jt-marker__info { border-color: rgba(47,191,176,0.30); }

.jt-marker--poi:hover .jt-marker__info { transform: translateY(-3px); }
.jt-marker--poi .jt-marker__dot { width: 8px; height: 8px; border-width: 1.5px; }

html[data-theme="light"] .jt-marker--hotel .jt-marker__info  { border-color: rgba(224,147,95,0.40); }
html[data-theme="light"] .jt-marker--cenote .jt-marker__info { border-color: rgba(66,199,224,0.40); }
html[data-theme="light"] .jt-marker--playa .jt-marker__info  { border-color: rgba(47,191,176,0.40); }

/* Pill del marcador principal — más prominente */
.jt-marker--main .jt-marker__info {
  padding: 0.36rem 0.78rem;
  border-color: rgba(var(--brand-canopy-rgb), 0.45);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.58),
    0 0 18px rgba(var(--brand-canopy-rgb), 0.14);
}

/* Textos */
.jt-marker__name {
  color: rgba(var(--brand-sand-rgb), 0.92);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.jt-marker--main .jt-marker__name {
  color: var(--brand-canopy);
  font-size: 0.72rem;
  font-weight: 700;
}

.jt-marker__dist {
  color: rgba(var(--brand-sand-rgb), 0.52);
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* ── Tema claro: marcadores ── */
html[data-theme="light"] .jt-marker__info {
  background: rgba(247, 243, 235, 0.95);
  border-color: rgba(26, 43, 46, 0.16);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .jt-marker__name {
  color: #1a2b2e;
}

html[data-theme="light"] .jt-marker--main .jt-marker__name {
  color: #7a6a30;
}

html[data-theme="light"] .jt-marker__dist {
  color: rgba(26, 43, 46, 0.50);
}

html[data-theme="light"] .jt-marker__stem {
  background: linear-gradient(
    to bottom,
    rgba(26, 43, 46, 0.38),
    rgba(26, 43, 46, 0.06)
  );
}

html[data-theme="light"] .jt-marker--main .jt-marker__stem {
  background: linear-gradient(
    to bottom,
    rgba(var(--brand-canopy-rgb), 0.75),
    rgba(var(--brand-canopy-rgb), 0.10)
  );
}

html[data-theme="light"] .jt-marker__dot {
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

/* ── MapLibre controles — base ── */
.maplibregl-ctrl-group {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-radius: 0.65rem !important;
  overflow: hidden !important;
}

.maplibregl-ctrl-group button {
  background-color: transparent !important;
  border-radius: 0 !important;
}

.maplibregl-ctrl-group button + button {
  border-top-width: 1px !important;
  border-top-style: solid !important;
}

.maplibregl-ctrl-attrib {
  font-size: 0.58rem !important;
  border-radius: 0.4rem !important;
}

/* Dark theme */
html[data-theme="dark"] .maplibregl-ctrl-group {
  background: rgba(12, 20, 11, 0.90) !important;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.22) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.40) !important;
}

html[data-theme="dark"] .maplibregl-ctrl-group button {
  color: rgba(var(--brand-sand-rgb), 0.80) !important;
}

html[data-theme="dark"] .maplibregl-ctrl-group button:hover {
  background: rgba(var(--brand-canopy-rgb), 0.14) !important;
  color: var(--brand-canopy) !important;
}

html[data-theme="dark"] .maplibregl-ctrl-group button + button {
  border-top-color: rgba(var(--brand-canopy-rgb), 0.12) !important;
}

html[data-theme="dark"] .maplibregl-ctrl-attrib {
  background: rgba(12, 20, 11, 0.76) !important;
  color: rgba(var(--brand-sand-rgb), 0.42) !important;
}

html[data-theme="dark"] .maplibregl-ctrl-attrib a {
  color: rgba(var(--brand-canopy-rgb), 0.64) !important;
}

/* Light theme */
html[data-theme="light"] .maplibregl-ctrl-group {
  background: rgba(247, 243, 235, 0.94) !important;
  border: 1px solid rgba(26, 43, 46, 0.14) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] .maplibregl-ctrl-group button {
  color: rgba(26, 43, 46, 0.72) !important;
}

html[data-theme="light"] .maplibregl-ctrl-group button:hover {
  background: rgba(26, 43, 46, 0.08) !important;
  color: #0c140b !important;
}

html[data-theme="light"] .maplibregl-ctrl-group button + button {
  border-top-color: rgba(26, 43, 46, 0.10) !important;
}

html[data-theme="light"] .maplibregl-ctrl-attrib {
  background: rgba(247, 243, 235, 0.88) !important;
  color: rgba(26, 43, 46, 0.48) !important;
}

html[data-theme="light"] .maplibregl-ctrl-attrib a {
  color: rgba(26, 43, 46, 0.70) !important;
}

.map-open-btn {
  position: absolute;
  bottom: 1.1rem;
  right: 1.1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  background: rgba(12, 20, 11, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.5);
  color: var(--brand-canopy);
  font-family: var(--font-body);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease;
}

.map-open-btn:hover,
.map-open-btn:focus-visible {
  background: rgba(12, 29, 33, 0.9);
  border-color: rgba(var(--brand-canopy-rgb), 0.75);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

.map-open-btn i {
  font-size: 0.68rem;
  color: inherit;
}

/* ── Filtro de capas del mapa (Todos / Hoteles / Cenotes / Playas) ── */
.map-poi-filter {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 3;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  max-width: calc(100% - 2.2rem);
}

.map-poi-pill {
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  background: rgba(12, 20, 11, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.28);
  color: rgba(var(--brand-sand-rgb), 0.78);
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.map-poi-pill:hover { border-color: rgba(var(--brand-canopy-rgb), 0.5); color: var(--brand-sand); }

.map-poi-pill.is-active {
  background: var(--brand-canopy);
  border-color: var(--brand-canopy);
  color: var(--brand-ink);
  transform: translateY(-1px);
}

html[data-theme="light"] .map-poi-pill {
  background: rgba(247, 243, 235, 0.88);
  border-color: rgba(26, 43, 46, 0.18);
  color: rgba(26, 43, 46, 0.68);
}
html[data-theme="light"] .map-poi-pill.is-active {
  background: var(--brand-canopy);
  border-color: var(--brand-canopy);
  color: #0c140b;
}

/* ── Botón "Ver Master Plan completo" — lleva a master-plan.html ──
   Espejo del pill "Cómo llegar" (bottom-right), apilado justo arriba,
   simetría intencional en la esquina inferior del mapa. Siempre
   visible (el mapa ya no se "abre" in-page, así que este link es la
   única puerta a la vista completa del plano). ── */
.map-expand-btn {
  position: absolute;
  bottom: 3.7rem;
  right: 1.1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  background: rgba(12, 20, 11, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.5);
  color: var(--brand-canopy);
  font-family: var(--font-body);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.map-expand-btn:hover,
.map-expand-btn:focus-visible {
  background: rgba(12, 29, 33, 0.9);
  border-color: rgba(var(--brand-canopy-rgb), 0.75);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

.map-expand-btn i { font-size: 0.68rem; color: inherit; }

html[data-theme="light"] .map-expand-btn {
  background: rgba(247, 243, 235, 0.86);
  border-color: rgba(26, 43, 46, 0.22);
  color: #1a2b2e;
}

/* benefit-tile centrado */
.benefit-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.benefit-tile .card-tag {
  font-size: 0.84rem;
  letter-spacing: 0.2em;
  margin-bottom: 0.65rem;
}

.benefit-tile h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 0.85rem;
}

/* WhatsApp FAB */
.whatsapp-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 5.5rem;
  z-index: 1034;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  font-size: 1.45rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  transition:
    transform 240ms ease,
    box-shadow 240ms ease,
    opacity 280ms ease;
}

.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  transform: translateY(-0.25rem) scale(1.06);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36);
  color: #fff;
}

.whatsapp-fab-tooltip {
  position: absolute;
  right: calc(100% + 0.9rem);
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: rgba(var(--brand-ink-soft-rgb), 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.28);
  color: var(--brand-sand);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding: 0.55rem 1.1rem;
  border-radius: 2rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease, transform 400ms ease;
}

.whatsapp-fab-tooltip::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 7px solid transparent;
  border-left-color: rgba(var(--brand-ink-soft-rgb), 0.92);
}

.whatsapp-fab.tooltip-visible .whatsapp-fab-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.whatsapp-fab.tooltip-visible {
  animation: wa-pulse 2.2s ease-in-out 2;
}

@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); }
  50%       { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), 0 0 0 10px rgba(37, 211, 102, 0.15); }
}

html[data-theme="light"] .whatsapp-fab-tooltip {
  background: rgba(247, 243, 235, 0.97);
  border-color: rgba(26, 43, 46, 0.14);
  color: #1a2b2e;
  box-shadow: 0 8px 28px rgba(26, 43, 46, 0.12);
}

html[data-theme="light"] .whatsapp-fab-tooltip::after {
  border-left-color: rgba(247, 243, 235, 0.97);
}

/* hero-poster fallback: queda detrás de los videos por orden DOM */
.hero-poster {
  position: absolute;
  inset: 0;
}

.project-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.project-card {
  position: relative;
  flex: 1 1 calc(33.333% - 1rem);
  min-width: 300px;
  height: 300px;
  min-height: 300px;
  padding: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  box-shadow: var(--page-shadow-strong);
}

.project-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 760ms ease;
}

.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(var(--brand-shadow-rgb), 0.72);
  opacity: 1;
  transition: opacity 500ms ease;
}

.project-card:hover img,
.project-card:focus-visible img {
  transform: scale(1.05);
}

.project-card:hover::before,
.project-card:focus-visible::before {
  opacity: 0;
}

.project-card:hover .project-card-copy,
.project-card:focus-visible .project-card-copy {
  opacity: 0;
}

.project-card-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 2rem;
  background: transparent;
  opacity: 1;
  justify-content: flex-end;
  transition: opacity 500ms ease;
}

.project-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 3rem;
}

.project-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: #A5AB89;
  color: var(--brand-ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Kineki system pillars ── */
.kineki-pillars {
  display: flex;
  gap: 0;
  margin: 2.5rem 0 3rem;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.22);
  border-radius: 1rem;
  background: rgba(var(--brand-ink-soft-rgb), 0.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

.kineki-pillar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 2rem 1.75rem;
  border-right: 1px solid rgba(var(--brand-canopy-rgb), 0.15);
}

.kineki-pillar:last-child {
  border-right: none;
}

.kineki-pillar-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(var(--brand-canopy-rgb), 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hero-accent);
  font-size: 1rem;
  margin-bottom: 0.4rem;
  flex-shrink: 0;
}

.kineki-pillar-label {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--brand-sand-rgb), 0.45);
  font-family: var(--font-body);
}

.kineki-pillar h4 {
  font-size: clamp(0.82rem, 1.4vw, 0.96rem);
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--brand-sand);
  margin: 0;
  line-height: 1.3;
}

.kineki-pillar p {
  font-size: clamp(0.72rem, 1.1vw, 0.82rem);
  color: rgba(var(--brand-sand-rgb), 0.62);
  margin: 0;
  line-height: 1.6;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.testimonial-rating {
  display: inline-flex;
  gap: 0.22rem;
  width: fit-content;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.22);
  background: rgba(var(--brand-canopy-rgb), 0.08);
  color: var(--hero-accent);
  font-size: 0.7rem;
  font-weight: 700;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.testimonial-author span {
  color: rgba(var(--brand-sand-rgb), 0.72);
  font-size: 0.88rem;
}

.testimonial-quote {
  margin: 0;
}

.contact-points {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.contact-point {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  align-items: center;
  transition:
    transform 260ms ease,
    border-color 260ms ease,
    background-color 260ms ease,
    box-shadow 260ms ease;
}

.contact-point a,
.contact-point p,
.contact-inline-note a,
.site-footer a {
  color: var(--hero-text);
}

.contact-point-label,
.contact-point a,
.contact-point p {
  flex: 1 1 calc(100% - 3.35rem);
}

.contact-icon {
  align-self: center;
}

.contact-point a,
.contact-point p {
  margin-left: 3.35rem;
}

a.contact-point {
  text-decoration: none;
  color: inherit;
}

.contact-point-value {
  flex: 1 1 calc(100% - 3.35rem);
  margin-left: 3.35rem;
  color: var(--hero-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(var(--hero-text-rgb, 240, 234, 210), 0.35);
}

a.contact-point:hover .contact-point-value,
a.contact-point:focus-visible .contact-point-value {
  color: var(--hero-accent);
  text-decoration-color: var(--hero-accent);
}

.contact-point:hover {
  transform: translateX(0.55rem);
  border-color: var(--page-line-strong);
  background: linear-gradient(180deg, rgba(var(--brand-water-rgb), 0.2), rgba(var(--brand-ink-rgb), 0.9));
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.24);
}

.contact-panel {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: 1.85rem;
  backdrop-filter: blur(18px);
  transition:
    transform 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease;
}

.contact-panel-heading {
  margin-bottom: 1.6rem;
}

.contact-form .form-label,
.contact-inline-note {
  color: rgba(var(--brand-sand-rgb), 0.82);
  font-size: 0.88rem;
}

.contact-form .form-control,
.contact-form .form-select {
  min-height: 3.35rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.1);
  background: rgba(var(--brand-ink-rgb), 0.86);
  color: var(--hero-text);
}

/* Select horizonte de inversión — flecha personalizada, sin flecha nativa */
.form-select-jt {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b3c0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px 12px;
  padding-right: 2.6rem;
  cursor: pointer;
}

.form-select-jt option {
  background: #0c140b;
  color: #ded7ba;
}

/* Campo fijo "Lote Joy Tree" — mismo alto que form-control, no editable */
.interest-fixed-tag {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.35rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.40);
  background: rgba(var(--brand-canopy-rgb), 0.07);
  color: var(--brand-canopy);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: default;
  user-select: none;
}

.interest-fixed-tag i {
  opacity: 0.70;
  font-size: 0.85rem;
}

.contact-form textarea.form-control {
  min-height: auto;
}

.phone-input-group {
  display: flex;
  gap: 0.5rem;
}

.contact-form .phone-country-select {
  flex: 0 0 4.5rem;
  width: 4.5rem;
  padding-left: 0.5rem;
  padding-right: 0.2rem;
  font-size: 0.85rem;
}

.contact-form .phone-number-input {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0.7rem;
  padding-right: 0.5rem;
  letter-spacing: normal;
}

.contact-form .form-control::placeholder {
  color: rgba(var(--brand-sand-rgb), 0.36);
}

.contact-form .form-control:focus,
.contact-form .form-select:focus,
.contact-form .form-check-input:focus {
  border-color: rgba(var(--brand-canopy-rgb), 0.44);
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-canopy-rgb), 0.14);
  background: rgba(var(--brand-ink-rgb), 0.92);
  color: var(--hero-text);
}

.contact-form .form-check {
  padding: 1rem 1rem 1rem 2.8rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.08);
  background: rgba(var(--brand-ink-soft-rgb), 0.54);
}

.contact-form .form-check-input {
  margin-top: 0.2rem;
  background-color: rgba(var(--brand-ink-rgb), 0.9);
  border-color: rgba(var(--brand-canopy-rgb), 0.42);
}

.contact-form .form-check-input:checked {
  background-color: var(--hero-accent);
  border-color: var(--hero-accent);
}

.contact-form .form-check-label {
  color: rgba(var(--brand-sand-rgb), 0.76);
  line-height: 1.6;
}

.contact-form .form-control.is-invalid,
.contact-form .form-select.is-invalid,
.contact-form .form-check-input.is-invalid {
  border-color: rgba(var(--brand-danger-rgb), 0.76);
}

.contact-form .form-control.is-valid,
.contact-form .form-select.is-valid,
.contact-form .form-check-input.is-valid {
  border-color: rgba(var(--brand-success-rgb), 0.72);
}

/* Check visual en vivo — solo en inputs de texto (no selects, que ya
   llevan su propia flecha de fondo y no admiten un segundo ícono). */
.contact-form input.form-control.is-valid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2374b87a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3 3 7-7'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 15px 12px;
  padding-right: 2.6rem;
}

.contact-form .invalid-feedback {
  display: block;
  min-height: 1rem;
  margin-top: 0.45rem;
  color: rgba(var(--brand-danger-rgb), 0.95);
  font-size: 0.82rem;
}

.contact-submit {
  min-width: 15rem;
}

.contact-submit .spinner-border {
  margin-right: 0.55rem;
}

/* ── Wizard del formulario de contacto ── */
.wizard-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2.2rem;
}

.wizard-progress-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.18);
  background: rgba(var(--brand-ink-rgb), 0.86);
  color: rgba(var(--brand-sand-rgb), 0.5);
  font-size: 0.95rem;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}

.wizard-progress-dot.is-active {
  border-color: var(--hero-accent);
  color: var(--brand-ink);
  background: var(--hero-accent);
}

.wizard-progress-dot.is-done {
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
  color: var(--hero-accent);
  background: rgba(var(--brand-canopy-rgb), 0.1);
}

.wizard-progress-line {
  position: relative;
  width: clamp(1.5rem, 4vw, 3rem);
  height: 1px;
  background: rgba(var(--brand-sand-rgb), 0.18);
  overflow: hidden;
}

.wizard-progress-line::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--hero-accent);
  transition: width 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wizard-progress-line.is-filled::after {
  width: 100%;
}

.wizard-step-counter {
  margin: -1.4rem 0 1.6rem;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--brand-sand-rgb), 0.42);
}

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

.wizard-step {
  display: none;
  border: 0;
  margin: 0;
  padding: 0;
}

.wizard-step.is-active {
  display: block;
  animation: wizardStepIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .wizard-step.is-active { animation: none; }
  .wizard-progress-line::after { transition: none; }
}

.wizard-step-title {
  margin-bottom: 1.4rem;
  padding: 0;
  font-family: var(--font-serif);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  color: var(--hero-text);
}

/* flex (no grid) a propósito: con 5 tarjetas, un grid auto-fit deja la
   última fila de 2 pegada a la izquierda — flex-wrap + justify-content:
   center sí centra la fila corta que sobra. */
.wizard-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}

.wizard-cards.is-invalid-group {
  outline: 1px solid rgba(var(--brand-danger-rgb), 0.7);
  outline-offset: 0.5rem;
  border-radius: 1rem;
}

.wizard-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 13rem;
  max-width: 16rem;
  gap: 0.65rem;
  padding: 1.3rem 1rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.14);
  background: rgba(var(--brand-ink-rgb), 0.86);
  color: rgba(var(--brand-sand-rgb), 0.82);
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}

.wizard-card:hover {
  border-color: rgba(var(--brand-canopy-rgb), 0.4);
  transform: translateY(-2px);
}

.wizard-card.is-selected {
  border-color: var(--hero-accent);
  background: rgba(var(--brand-canopy-rgb), 0.14);
  color: var(--hero-text);
}

.wizard-card-check {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hero-accent);
  color: var(--brand-ink);
  font-size: 0.62rem;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 200ms ease, transform 200ms ease;
}

.wizard-card.is-selected .wizard-card-check {
  opacity: 1;
  transform: scale(1);
}

.wizard-card-icon {
  font-size: 1.5rem;
  color: var(--hero-accent);
}

/* ── Confirmación de WhatsApp (radios) ─────────────────────────────────────
   Dos opciones excluyentes, así que son <input type="radio"> reales: el
   círculo se dibuja en .wa-confirm-mark y el input va oculto pero enfocable,
   para conservar teclado y lectores de pantalla. El grid de dos columnas
   iguales (stretch) mantiene ambas tarjetas del mismo ancho y alto aunque
   un texto ocupe dos renglones y el otro uno. */
.wa-confirm {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.wa-confirm-question {
  float: left;   /* un <legend> ignora width sin esto */
  width: 100%;
  margin-bottom: 0.6rem;
}

.wa-confirm-options {
  clear: both;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 0.7rem;
}

@media (min-width: 576px) {
  .wa-confirm-options { grid-template-columns: 1fr 1fr; }
}

.wa-confirm-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.14);
  background: rgba(var(--brand-ink-rgb), 0.86);
  color: rgba(var(--brand-sand-rgb), 0.82);
  font-size: 0.92rem;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}

.wa-confirm-option:hover {
  border-color: rgba(var(--brand-canopy-rgb), 0.4);
}

.wa-confirm-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.wa-confirm-mark {
  flex: 0 0 1.15rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.45);
  background: transparent;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.wa-confirm-input:checked ~ .wa-confirm-mark {
  border-color: var(--hero-accent);
  box-shadow: inset 0 0 0 0.24rem var(--hero-accent);
}

.wa-confirm-option:has(.wa-confirm-input:checked) {
  border-color: var(--hero-accent);
  background: rgba(var(--brand-canopy-rgb), 0.14);
  color: var(--hero-text);
}

.wa-confirm-input:focus-visible ~ .wa-confirm-mark {
  outline: 2px solid var(--hero-accent);
  outline-offset: 3px;
}

.wa-confirm.is-invalid-group .wa-confirm-options {
  outline: 1px solid rgba(var(--brand-danger-rgb), 0.7);
  outline-offset: 0.5rem;
  border-radius: 0.9rem;
}

.wa-confirm .invalid-feedback { display: none; }

.wa-confirm.is-invalid-group .invalid-feedback {
  display: block;
  margin-top: 1rem;
}

.wizard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.8rem;
}

.wizard-step[data-step="1"] .wizard-actions {
  justify-content: flex-end;
}

.form-status {
  min-height: 1.2rem;
  margin-top: 1rem;
  color: rgba(var(--brand-sand-rgb), 0.76);
  font-size: 0.9rem;
}

.form-status.is-success {
  color: rgba(var(--brand-success-rgb), 0.95);
}

.form-status.is-error {
  color: rgba(var(--brand-danger-rgb), 0.95);
}

.site-footer {
  position: relative;
  padding: 3.8rem 0 2rem;
  border-top: 1px solid rgba(var(--brand-sand-rgb), 0.08);
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--brand-sage-rgb), 0.12), transparent 30%),
    linear-gradient(180deg, rgba(var(--brand-ink-soft-rgb), 0.98) 0%, rgba(var(--brand-shadow-rgb), 0.98) 100%);
}

.site-footer-brand {
  --footer-logo-w: clamp(8rem, 13vw, 10rem);
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.1rem;
}

/* Aquí vivía una coreografía de 10s (jtJTLift + jtJTGlow) en la que el logo
   se elevaba para dejar aparecer el sello "By TAO" y volvía a bajar. El sello
   se retiró del pie, así que el logo se queda quieto. El del navbar conserva
   la suya, con sus propias clases. */
.site-footer-brand-jt-link {
  display: inline-flex;
}

.site-footer-brand-jt-link img {
  width: var(--footer-logo-w);
  /* El PNG trae un 22% de su ancho en transparencia a la izquierda (medido
     sobre el alfa del archivo: la tinta empieza en el píxel 187 de 851). Sin
     esto el árbol quedaba 35px adentro mientras los botones de redes y los
     títulos de las otras dos columnas arrancaban pegados al borde de la
     rejilla: tres bordes izquierdos distintos. El tirón compensa justo ese
     vacío, así que lo que se alinea es la tinta, no la caja. */
  margin-left: calc(var(--footer-logo-w) * -0.22);
  /* Obligatorias junto al margen negativo: el margen encoge el ancho al que se
     ajusta el contenedor, y con el max-width:100% global de base.css la imagen
     se encogía con él — el logo salía un 18% más chico de lo debido. */
  flex-shrink: 0;
  max-width: none;
  filter: brightness(1.08) contrast(1.02);
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--button-radius);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.22);
  background: rgba(var(--brand-canopy-rgb), 0.08);
  color: var(--hero-accent);
  transition:
    transform 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease;
}

.social-link--placeholder {
  cursor: default;
  opacity: 0.82;
  pointer-events: none;
}

.social-link:hover,
.social-link:focus-visible {
  transform: translateY(-0.25rem);
  background: var(--hero-accent);
  border-color: var(--hero-accent);
  color: var(--brand-ink);
}

.site-footer-title {
  font-size: 1.4rem;
}

.site-footer-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0;
  list-style: none;
}

.site-footer-list li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}

.contact-point a,
.contact-inline-note a,
.site-footer-list a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.contact-point a:hover,
.contact-point a:focus-visible,
.contact-inline-note a:hover,
.contact-inline-note a:focus-visible,
.site-footer-list a:hover,
.site-footer-list a:focus-visible {
  color: var(--hero-accent);
}

.site-footer-list i {
  width: 1rem;
  margin-top: 0.25rem;
  color: var(--hero-accent);
}

/* ── Botón "Studio Playa" + selector de app de mapas ──────────────────
   El <a> es un hipervínculo normal a Google Maps; en móvil el JS abre
   encima el menú .footer-studio-menu (ver bindMapAppPicker en
   page-enhancements.js). El contenedor es relative para que el menú se
   ancle al botón y no al pie entero. */
/* No es un botón: el enlace se ve igual que el teléfono, el correo o el
   WhatsApp de la misma lista —mismo tamaño, mismo subrayado, mismo hover
   al acento—, y el icono de mapa de la izquierda (fa-map-location-dot, con
   el estilo de .site-footer-list i) es lo que avisa de que lleva a una
   ubicación. El contenedor solo existe para anclarle el menú de apps. */
.footer-studio {
  position: relative;
}

.footer-studio-menu {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 20;
  min-width: 13.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.28);
  background: rgba(var(--brand-shadow-rgb), 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.footer-studio-menu[hidden] {
  display: none;
}

.footer-studio-menu-title {
  margin: 0 0 0.35rem;
  padding: 0 0.55rem;
  font-size: 0.72rem;
  opacity: 0.7;
}

.footer-studio-menu a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem;
  border-radius: 0.6rem;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.footer-studio-menu a:hover,
.footer-studio-menu a:focus-visible {
  background: rgba(var(--brand-canopy-rgb), 0.14);
  text-decoration: none;
}

.footer-studio-menu a i {
  width: 1.1rem;
  margin-top: 0;
  text-align: center;
}

/* La barra iba en columna y centrada, mientras las tres columnas de arriba van
   alineadas a la izquierda: el copyright arrancaba en x=241 en vez de x=72 y el
   sello de TAO caía en un renglón suelto debajo. Ahora es una fila que ocupa el
   mismo ancho que las columnas —copyright a la izquierda, sello a la derecha—
   así los bordes del footer coinciden de arriba abajo. */
.site-footer-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(var(--brand-sand-rgb), 0.08);
}

/* Debajo de lg las columnas del footer ya se apilan y quedan centradas: la
   barra hace lo mismo para no quedar desalineada respecto a ellas. */
@media (max-width: 991.98px) {
  .site-footer-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.34);
  border-radius: var(--button-radius);
  background: rgba(var(--brand-ink-rgb), 0.86);
  color: var(--hero-accent);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.26);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition:
    opacity 260ms ease,
    visibility 260ms ease,
    transform 260ms ease,
    background-color 220ms ease;
  z-index: 1035;
}

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

.back-to-top:hover,
.back-to-top:focus-visible {
  background: rgba(var(--brand-canopy-rgb), 0.16);
  transform: translateY(-0.25rem) scale(1.06);
}

.back-to-top i,
.back-to-top svg {
  width: 1.1rem;
  height: 1.1rem;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1055;
}

.gallery-lightbox[hidden] {
  display: none !important;
}

.gallery-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--brand-shadow-rgb), 0.9);
  backdrop-filter: blur(10px);
}

.gallery-lightbox__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(68rem, calc(100vw - 2rem));
  margin: clamp(1rem, 4vw, 2rem) auto;
  padding: clamp(1rem, 3vw, 1.5rem);
  border-radius: 1.8rem;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.08);
  background: rgba(var(--brand-ink-rgb), 0.95);
  box-shadow: var(--page-shadow-strong);
}

.gallery-lightbox__close {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--button-radius);
  border: 1px solid rgba(var(--brand-sand-rgb), 0.12);
  background: rgba(var(--brand-sand-rgb), 0.08);
  color: var(--hero-text);
  font-size: 1.8rem;
  line-height: 1;
}

.gallery-lightbox__close:hover,
.gallery-lightbox__close:focus-visible {
  background: rgba(var(--brand-canopy-rgb), 0.16);
  border-color: rgba(var(--brand-canopy-rgb), 0.4);
}

.gallery-lightbox__image {
  width: 100%;
  max-height: calc(var(--jt-screen-h) - 12rem);
  object-fit: cover;
  border-radius: 1.3rem;
}

.gallery-lightbox__meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.gallery-lightbox__meta h3 {
  margin: 0;
  font-family: var(--font-serif);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--hero-text);
}

.gallery-lightbox__meta p {
  margin: 0;
  color: rgba(var(--brand-sand-rgb), 0.74);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(2rem);
  pointer-events: none;
  transition:
    opacity 700ms ease,
    transform 700ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body.is-lightbox-open {
  overflow: hidden;
}

@keyframes heroCueDrift {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-0.35rem, -0.35rem);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: rotate(45deg) translate(0.35rem, 0.35rem);
  }
}

@media (max-width: 991.98px) {
  .joytree-brand-logo {
    width: clamp(6.2rem, 20vw, 8rem);
  }

  .joytree-navbar-toggler {
    margin-left: 0;
  }

  .joytree-navbar .navbar-collapse {
    order: 4;
    width: 100%;
    margin-top: 0.9rem;
    padding: 0.65rem 0 0.2rem;
    border-top: 1px solid rgba(var(--brand-sand-rgb), 0.08);
  }

  .hero-topbar {
    padding-top: clamp(4.65rem, 10vw, 5.5rem);
  }

  .amenity-card {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
  }

  .project-card {
    flex-basis: calc(50% - 0.75rem);
  }

  .kineki-pillar {
    padding: 1.5rem 1.25rem;
  }

  .location-header {
    margin-bottom: 2rem;
  }

  /* Mapa apilado: restaurar aspect-ratio */
  .location-body .map-frame {
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 18rem;
  }

  /* Mapa: esquinas más suaves en tablet */
  .map-frame {
    border-radius: 1.5rem;
  }

  /* Marcadores: ligeramente más compactos en tablet */
  .jt-marker__info {
    padding: 0.26rem 0.56rem;
  }

  .map-open-btn {
    font-size: 0.62rem;
    padding: 0.48rem 0.9rem;
  }
}

@media (max-width: 767.98px) {
  .joytree-mobile-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.7rem;
    margin-left: auto;
    margin-right: 0.6rem;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(var(--brand-sand-rgb), 0.18);
    border-radius: var(--button-radius);
    background: rgba(var(--brand-ink-soft-rgb), 0.58);
    color: var(--hero-text);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
    transition:
      background-color 220ms ease,
      border-color 220ms ease,
      transform 220ms ease;
  }

  .joytree-mobile-cta:hover,
  .joytree-mobile-cta:focus-visible {
    background: rgba(var(--brand-canopy-rgb), 0.22);
    border-color: rgba(var(--brand-canopy-rgb), 0.5);
    transform: translateY(-1px);
  }

  .hero-footer-inner {
    padding-right: 0.5rem;
  }

  .hero-scrollcue {
    --scrollcue-lift: 4rem;
  }

  .story-section {
    padding: clamp(4rem, 10vw, 5rem) 0;
  }

  .media-frame--tall {
    min-height: 28rem;
  }

  .experience-badge {
    width: 7.5rem;
    height: 7.5rem;
    padding: 1.5rem;
    right: -0.65rem;
    bottom: -0.65rem;
  }

  .badge-number {
    font-size: 2rem;
  }

  .amenity-card {
    flex: 1 1 100%;
    min-width: 0;
    height: 18.75rem;
    min-height: 18.75rem;
  }

  .project-card {
    flex-basis: 100%;
    min-height: 21rem;
  }

  .kineki-pillars {
    flex-direction: column;
  }

  .kineki-pillar {
    border-right: none;
    border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.15);
    padding: 1.25rem 1.25rem;
  }

  .kineki-pillar:last-child {
    border-bottom: none;
  }

  /* En móvil el mapa se apila: height auto y deja aspect-ratio del bloque base */
  .location-body .map-frame {
    height: auto;
    aspect-ratio: 4 / 3;
    transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                min-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Ruta activa en móvil: mapa más alto para mostrar ambos pins */
  .location-body .map-frame.map-frame--route-active {
    aspect-ratio: unset;
    height: 78vw;
    min-height: 360px;
  }

  .location-header {
    margin-bottom: 1.5rem;
  }

  .location-cards-col .section-actions {
    padding-top: 1.25rem;
  }

  .section-actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Centrar acciones en secciones centradas */
  .section-actions--center {
    align-items: center;
  }

  .section-actions--center .joytree-btn {
    width: auto;
    min-width: min(16rem, 90%);
  }

  .contact-submit {
    width: 100%;
  }

  .back-to-top {
    right: 1rem;
    bottom: 1rem;
  }

  /* Sección explore: imagen sin overflow del badge */
  .explore-media {
    padding-bottom: 1rem;
    padding-right: 1rem;
  }

  /* Insight cards en móvil: texto más compacto */
  .insight-card,
  .benefit-tile,
  .testimonial-card {
    padding: 1.2rem;
  }

  .map-frame {
    aspect-ratio: 4 / 3;
    min-height: 18rem;
    border-radius: 1.25rem;
  }

  /* Marcadores en teléfono */
  .jt-marker__info {
    padding: 0.22rem 0.48rem;
    gap: 0.02rem;
  }

  .jt-marker__name {
    font-size: 0.58rem;
  }

  .jt-marker--main .jt-marker__name {
    font-size: 0.65rem;
  }

  .jt-marker__dist {
    font-size: 0.5rem;
  }

  .jt-marker__stem {
    height: 11px;
  }

  .jt-marker--main .jt-marker__stem {
    height: 18px;
    width: 2px;
  }

  /* Dot principal: reducir de 18px a 14px en teléfono */
  .jt-marker--main .jt-marker__dot {
    width: 14px;
    height: 14px;
    border-width: 2.5px;
  }

  /* Botón abrir mapa */
  .map-open-btn {
    font-size: 0.58rem;
    padding: 0.4rem 0.72rem;
    gap: 0.36rem;
    bottom: 0.85rem;
    right: 0.85rem;
  }

  /* Testimonios: estrella rating más pequeña */
  .testimonial-rating {
    font-size: 0.62rem;
  }
}

@media (max-width: 575.98px) {
  .joytree-brand-logo {
    width: clamp(5.25rem, 19vw, 6.4rem);
  }

  .joytree-mobile-cta {
    min-height: 2.45rem;
    margin-right: 0.45rem;
    padding: 0.65rem 0.75rem;
    font-size: 0.56rem;
    letter-spacing: 0.1em;
  }

  .joytree-nav-link {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .joytree-nav-link::after {
    left: 0;
    right: auto;
    width: 2.75rem;
    transform-origin: left;
  }

  .joytree-nav-cta,
  .joytree-btn {
    width: 100%;
  }

  /* badge circular en móvil pequeño — mantiene forma, solo reduce tamaño */
  .experience-badge {
    width: 6.5rem;
    height: 6.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    padding: 0.75rem;
  }

  .badge-number {
    font-size: 1.9rem;
  }

  .badge-text {
    font-size: 0.72rem;
  }

  .gallery-lightbox__dialog {
    width: calc(100vw - 1rem);
    margin: 0.5rem auto;
    border-radius: 1.2rem;
  }

  .gallery-lightbox__image {
    max-height: calc(100vh - 10rem);
  }

  /* Secciones: reducir spacing en pantallas muy angostas */
  .story-section {
    padding: clamp(4rem, 9vw, 6rem) 0;
  }

  .section-heading {
    margin-bottom: 2rem;
  }

  .section-kicker {
    margin-bottom: 0.75rem;
  }

  .section-copy {
    margin-top: 1rem;
    margin-bottom: 1.25rem;
  }

  .section-actions {
    margin-top: 2rem;
  }

  .insight-card,
  .benefit-tile,
  .testimonial-card {
    padding: 1.65rem 1.5rem;
  }

  .features-list {
    gap: 1rem;
    margin: 1.75rem 0 2.25rem;
    padding-left: 1rem;
  }

  /* Contact points: quitar sangría en móvil muy pequeño */
  .contact-point a,
  .contact-point p,
  .contact-point-value {
    margin-left: 0;
  }

  .contact-point-label {
    flex-basis: 100%;
  }

  /* Location list: 1 columna en teléfono pequeño (flex ya apila solo,
     pero forzamos el ancho completo para que no queden 2 por fila) */
  .location-list .location-item {
    flex-basis: 100%;
  }

  /* WhatsApp FAB: alejar del bottom en móvil pequeño */
  .whatsapp-fab {
    right: 1rem;
    bottom: 5rem;
  }

  .back-to-top {
    right: 1rem;
    bottom: 1rem;
  }

  /* Amenity cards header: menos padding */
  .amenities-header {
    padding: 3rem clamp(1rem, 4vw, 1.5rem);
  }

  /* Mapa en teléfono pequeño */
  .map-frame {
    border-radius: 0.875rem;
    min-height: 15rem;
  }

  .location-body .map-frame.map-frame--route-active {
    height: 85vw;
    min-height: 300px;
  }

  /* Ocultar distancia en pills — muy pequeños para mostrar */
  .jt-marker__dist {
    display: none;
  }

  .jt-marker__info {
    padding: 0.18rem 0.4rem;
    gap: 0;
  }

  .jt-marker__name {
    font-size: 0.54rem;
  }

  .jt-marker--main .jt-marker__name {
    font-size: 0.6rem;
  }

  .jt-marker__dot {
    width: 8px;
    height: 8px;
  }

  .jt-marker--main .jt-marker__dot {
    width: 12px;
    height: 12px;
  }

  /* Botón abrir mapa en pantallas pequeñas */
  .map-open-btn {
    font-size: 0.54rem;
    padding: 0.35rem 0.62rem;
    gap: 0.28rem;
    bottom: 0.65rem;
    right: 0.65rem;
  }

  /* Control zoom: botones más pequeños */
  .maplibregl-ctrl-group button {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }
}

@media (hover: none) {
  .unified-card:active,
  .payment-path:active,
  .testimonial-card:active {
    transform: translateY(-4px) scale(0.99);
    border-color: rgba(var(--brand-canopy-rgb), 0.38);
    box-shadow: 0 12px 36px rgba(0,0,0,0.28), 0 0 0 1px rgba(var(--brand-canopy-rgb), 0.12);
  }

  .unified-card:active::before,
  .payment-path:active::before,
  .testimonial-card:active::before {
    opacity: 1;
  }

  .unified-card:active .card-icon {
    background: var(--hero-accent);
    border-color: var(--hero-accent);
    color: var(--brand-ink);
    transform: scale(1.1) translateY(-2px);
  }

  .testimonial-card:active .testimonial-rating {
    background: rgba(var(--brand-canopy-rgb), 0.18);
    border-color: rgba(var(--brand-canopy-rgb), 0.40);
  }
}

@media (prefers-reduced-motion: reduce) {
  .joytree-navbar,
  .joytree-nav-link::after,
  .joytree-nav-cta,
  .joytree-btn,
  .feature-card,
  .feature-icon,
  .card-icon,
  .amenity-icon,
  .location-icon,
  .contact-icon,
  .unified-card,
  .payment-path,
  .insight-card,
  .benefit-tile,
  .testimonial-card,
  .contact-panel,
  .amenity-card img,
  .project-card img,
  .project-card-copy,
  .map-open-btn,
  .social-link,
  .back-to-top,
  [data-reveal] {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .hero-scrollcue-arrows span {
    transition: none !important;
    animation: none !important;
    transform: rotate(45deg) !important;
  }

  [data-reveal] {
    opacity: 1 !important;
  }

  .map-open-btn {
    transform: none !important;
    animation: none !important;
  }

  /* Las cards de dos caras se arreglan al final del archivo (ver
     "CARDS DE DOS CARAS + PREFERS-REDUCED-MOTION"): la regla tiene que ir
     después de la definición de .esc-card-*, que vive más abajo. */
}

/* ══════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════════════════════════════ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 50%;
  background: rgba(var(--brand-sand-rgb), 0.08);
  border: 1px solid rgba(var(--brand-sand-rgb), 0.16);
  color: rgba(var(--brand-sand-rgb), 0.78);
  font-size: 0.82rem;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background-color 240ms ease,
    border-color 240ms ease,
    color 240ms ease,
    transform 400ms ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: rgba(var(--brand-canopy-rgb), 0.15);
  border-color: rgba(var(--brand-canopy-rgb), 0.38);
  color: var(--brand-canopy);
  transform: rotate(22deg);
}

/* Wrapper that keeps theme + lang buttons in one row always */
.nav-toggles {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 50%;
  background: rgba(var(--brand-sand-rgb), 0.06);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(var(--brand-sand-rgb), 0.68);
  line-height: 1;
  cursor: pointer;
  transition: border-color 220ms ease, background-color 220ms ease, transform 220ms ease, color 220ms ease;
}

.lang-btn--active {
  border-color: rgba(var(--brand-canopy-rgb), 0.5);
  background: rgba(var(--brand-canopy-rgb), 0.1);
  color: var(--brand-canopy);
}

.lang-btn:hover:not(.lang-btn--active) {
  background: rgba(var(--brand-sand-rgb), 0.12);
  transform: scale(1.08);
}

/* Mobile collapsed menu: fila de toggles centrada con separador */
@media (max-width: 991.98px) {
  .nav-item--toggles {
    width: 100%;
    padding: 0.8rem 0 0.4rem;
    margin-top: 0.2rem;
    border-top: 1px solid rgba(var(--brand-sand-rgb), 0.1);
  }

  .nav-item--toggles .nav-toggles {
    gap: 0.75rem;
    justify-content: center;
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME  —  html[data-theme="light"]
   ══════════════════════════════════════════════════════════════ */

html[data-theme="light"] {
  /* ── Swap roles: ink (dark) → warm cream; sand (light) → dark ink ── */
  --brand-ink:          #f7f3eb;
  --brand-ink-rgb:      247, 243, 235;
  --brand-ink-soft:     #ede8dc;
  --brand-ink-soft-rgb: 237, 232, 220;
  --brand-shadow:       #e4ddd1;
  --brand-shadow-rgb:   228, 221, 209;

  --brand-sand:         #1a2b2e;
  --brand-sand-rgb:     26, 43, 46;

  /* ── Accent: slightly deeper gold for legibility on light backgrounds ── */
  --hero-accent:      var(--brand-canopy);
  --hero-accent-soft: rgba(var(--brand-canopy-rgb), 0.36);

  /* ── Semantic / hero vars (used in body + non-photo sections) ── */
  --hero-text:    #1a2b2e;
  --hero-muted:   rgba(26, 43, 46, 0.62);
  --hero-ring:    rgba(var(--brand-water-rgb), 0.18);
  --hero-surface: rgba(var(--brand-water-rgb), 0.10);
  --hero-border:  rgba(var(--brand-water-rgb), 0.12);
  --hero-ink:     rgba(247, 243, 235, 0.7);

  /* ── Page layout vars ── */
  --page-bg-deep:       #f7f3eb;
  --page-bg-mid:        #ede8dc;
  --page-bg-mid-rgb:    237, 232, 220;
  --page-bg-soft:       #e4ddd1;
  --page-panel:         rgba(255, 255, 255, 0.88);
  --page-panel-strong:  rgba(255, 255, 255, 0.97);
  --page-panel-soft:    rgba(var(--brand-sage-rgb), 0.07);
  --page-line:          rgba(26, 43, 46, 0.1);
  --page-line-strong:   rgba(125, 110, 48, 0.4);
  --page-shadow:        0 4px 20px rgba(26, 43, 46, 0.07);
  --page-shadow-strong: 0 8px 36px rgba(26, 43, 46, 0.11);
}

/* ── Sections con fondo de foto mantienen su look oscuro ──
   .story-section--calc (solo en landing.html) NO va aquí: es una sección
   de contenido normal sin foto de fondo, y el widget de la calculadora ya
   trae su propio sistema completo de overrides claros (.calc-widget,
   .calc-result, etc.) que dependen de que estas variables sí cambien. ── */
html[data-theme="light"] .hero-section,
html[data-theme="light"] .explore-entrance,
html[data-theme="light"] .explore-philosophy,
html[data-theme="light"] .explore-architect,
html[data-theme="light"] .story-section--amenities,
html[data-theme="light"] .story-section--contact,
html[data-theme="light"] .story-section--location {
  --brand-ink:          #0c140b;
  --brand-ink-rgb:      12, 20, 11;
  --brand-ink-soft:     #0c1d21;
  --brand-ink-soft-rgb: 12, 29, 33;
  --brand-shadow:       #03090b;
  --brand-shadow-rgb:   3, 9, 11;
  --brand-sand:         #ded7ba;
  --brand-sand-rgb:     222, 215, 186;
  --hero-text:          #ded7ba;
  --hero-muted:         rgba(222, 215, 186, 0.72);
  --hero-accent:        var(--brand-canopy);
  --hero-ring:          rgba(var(--brand-water-rgb), 0.20);
  --hero-surface:       rgba(var(--brand-water-rgb), 0.12);
  --hero-border:        rgba(var(--brand-water-rgb), 0.12);
  --page-line:          rgba(222, 215, 186, 0.09);
  --page-line-strong:   rgba(var(--brand-canopy-rgb), 0.32);
}

/* ── .unified-card dentro de estas secciones "siempre oscuras": el override
   claro de .unified-card (fondo blanco sólido, línea 554) no respeta estas
   variables y deja texto claro sobre fondo blanco casi invisible. Se revierte
   al look oscuro original aquí. ── */
html[data-theme="light"] .hero-section .unified-card,
html[data-theme="light"] .explore-entrance .unified-card,
html[data-theme="light"] .explore-philosophy .unified-card,
html[data-theme="light"] .explore-architect .unified-card,
html[data-theme="light"] .story-section--amenities .unified-card,
html[data-theme="light"] .story-section--contact .unified-card,
html[data-theme="light"] .story-section--location .unified-card {
  background: linear-gradient(145deg, rgba(12, 29, 33, 0.80) 0%, rgba(12, 20, 11, 0.70) 100%);
  border-color: rgba(222, 215, 186, 0.07);
}
html[data-theme="light"] .hero-section .unified-card h3,
html[data-theme="light"] .explore-entrance .unified-card h3,
html[data-theme="light"] .explore-philosophy .unified-card h3,
html[data-theme="light"] .explore-architect .unified-card h3,
html[data-theme="light"] .story-section--amenities .unified-card h3,
html[data-theme="light"] .story-section--contact .unified-card h3,
html[data-theme="light"] .story-section--location .unified-card h3 {
  color: #ded7ba;
}
html[data-theme="light"] .hero-section .unified-card p,
html[data-theme="light"] .explore-entrance .unified-card p,
html[data-theme="light"] .explore-philosophy .unified-card p,
html[data-theme="light"] .explore-architect .unified-card p,
html[data-theme="light"] .story-section--amenities .unified-card p,
html[data-theme="light"] .story-section--contact .unified-card p,
html[data-theme="light"] .story-section--location .unified-card p {
  color: rgba(222, 215, 186, 0.68);
}
html[data-theme="light"] .hero-section .unified-card .card-tag,
html[data-theme="light"] .explore-entrance .unified-card .card-tag,
html[data-theme="light"] .explore-philosophy .unified-card .card-tag,
html[data-theme="light"] .explore-architect .unified-card .card-tag,
html[data-theme="light"] .story-section--amenities .unified-card .card-tag,
html[data-theme="light"] .story-section--contact .unified-card .card-tag,
html[data-theme="light"] .story-section--location .unified-card .card-tag {
  color: #c8c07e;
  background: rgba(200, 192, 126, 0.14);
}

/* ── Overlays de hover en cards con foto siempre oscuros ── */
html[data-theme="light"] .amenity-card::before,
html[data-theme="light"] .project-card::before {
  background: rgba(3, 9, 11, 0.74);
}

/* ── Mapa en light mode: filtro suave en lugar del estilo oscuro invertido ── */
html[data-theme="light"] .map-frame {
  border-color: rgba(26, 43, 46, 0.1);
  background: #ede8dc;
}

html[data-theme="light"] .map-frame iframe {
  filter: grayscale(65%) brightness(1.04) contrast(1.06) sepia(8%);
}

html[data-theme="light"] .map-open-btn {
  background: rgba(247, 243, 235, 0.86);
  border-color: rgba(26, 43, 46, 0.22);
  color: #1a2b2e;
}

html[data-theme="light"] .map-open-btn:hover,
html[data-theme="light"] .map-open-btn:focus-visible {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(26, 43, 46, 0.4);
}

/* ── Project cards: texto siempre blanco (fondo es foto con overlay oscuro) ── */
html[data-theme="light"] .project-card {
  --brand-sand:     #ded7ba;
  --brand-sand-rgb: 222, 215, 186;
  --hero-text:      #ded7ba;
  --hero-accent:    #c8c07e;
}

/* ── Navbar en light mode ── */
html[data-theme="light"] .joytree-navbar.is-visible {
  background: rgba(247, 243, 235, 0.96);
  border-color: rgba(26, 43, 46, 0.1);
  box-shadow: 0 2px 28px rgba(26, 43, 46, 0.09);
}

/* ── Nav links en light mode: override Bootstrap .navbar-dark (mayor especificidad) ── */
html[data-theme="light"] .joytree-navbar .navbar-nav .joytree-nav-link {
  color: rgba(26, 43, 46, 0.68);
}

html[data-theme="light"] .joytree-navbar .navbar-nav .joytree-nav-link:hover,
html[data-theme="light"] .joytree-navbar .navbar-nav .joytree-nav-link:focus-visible,
html[data-theme="light"] .joytree-navbar .navbar-nav .joytree-nav-link.active {
  color: #1a2b2e;
}

/* ── Toggler bars en light mode ── */
html[data-theme="light"] .joytree-toggler-bar {
  background: rgba(26, 43, 46, 0.82);
}

/* ── Logo: negro sobre fondo claro ── */
html[data-theme="light"] .joytree-brand-logo,
html[data-theme="light"] .site-footer-brand-jt-link img {
  filter: brightness(0) saturate(0) opacity(0.82);
}

/* ── Botones dorados: texto siempre oscuro independiente del tema ── */
html[data-theme="light"] .joytree-btn--accent {
  color: #0c140b;
}

html[data-theme="light"] .joytree-nav-cta {
  color: #0c140b;
}

/* ── Formulario de contacto ── */
html[data-theme="light"] .contact-form .form-control {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(26, 43, 46, 0.14);
  color: #1a2b2e;
}

/* Select: imagen de flecha + color de fondo en un solo shorthand para evitar que la flecha se repita */
html[data-theme="light"] .contact-form .form-select {
  background:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231a2b2e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")
    no-repeat right 0.75rem center / 16px 12px,
    rgba(255, 255, 255, 0.92);
  border-color: rgba(26, 43, 46, 0.14);
  color: #1a2b2e;
}

html[data-theme="light"] .contact-form .form-control::placeholder {
  color: rgba(26, 43, 46, 0.38);
}

html[data-theme="light"] .contact-form .form-control:focus {
  background: rgba(255, 255, 255, 0.99);
  color: #1a2b2e;
}

html[data-theme="light"] .contact-form .form-select:focus {
  background:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231a2b2e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")
    no-repeat right 0.75rem center / 16px 12px,
    rgba(255, 255, 255, 0.99);
  color: #1a2b2e;
}

html[data-theme="light"] .contact-form .form-check {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(26, 43, 46, 0.1);
}

html[data-theme="light"] .contact-form .form-check-input {
  background-color: rgba(255, 255, 255, 0.95);
  border-color: rgba(12, 20, 11, 0.30);
}

/* Label del checkbox — la sección fuerza fondo oscuro pero el wrapper se pone blanco, el label debe ser oscuro */
html[data-theme="light"] .contact-form .form-check-label {
  color: rgba(12, 20, 11, 0.72);
}

/* Checked: fondo verde visible sobre blanco + palomita Bootstrap legible */
html[data-theme="light"] .contact-form .form-check-input:checked {
  background-color: var(--brand-canopy);
  border-color: var(--brand-canopy);
}

/* Labels de campo — forzar color legible sobre el panel oscuro de la sección */
html[data-theme="light"] .contact-form .form-label,
html[data-theme="light"] .contact-inline-note {
  color: rgba(222, 215, 186, 0.85);
}

/* Select horizonte — flecha oscura en tema claro */
html[data-theme="light"] .form-select-jt {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231a2b2e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

html[data-theme="light"] .form-select-jt option {
  background: #ffffff;
  color: #1a2b2e;
}

/* Tag fijo "Lote Joy Tree" — ajuste de contraste en tema claro */
html[data-theme="light"] .interest-fixed-tag {
  border-color: rgba(var(--brand-canopy-rgb), 0.50);
  background: rgba(var(--brand-canopy-rgb), 0.12);
}

/* ── Contact point hover más sutil en fondo claro ── */
html[data-theme="light"] .contact-point:hover {
  background: linear-gradient(180deg, rgba(var(--brand-water-rgb), 0.07), rgba(255, 255, 255, 0.92));
}

/* ── Project badges ── */
html[data-theme="light"] .project-badge {
  color: #0c140b;
}

/* ── Footer ── */
html[data-theme="light"] .site-footer {
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--brand-sage-rgb), 0.08), transparent 30%),
    linear-gradient(180deg, rgba(237, 232, 220, 0.98) 0%, rgba(228, 221, 209, 0.98) 100%);
  border-top-color: rgba(26, 43, 46, 0.1);
}

/* ── Social links ── */
html[data-theme="light"] .social-link:hover,
html[data-theme="light"] .social-link:focus-visible {
  color: #f7f3eb;
}

/* ── Back-to-top ── */
html[data-theme="light"] .back-to-top {
  background: rgba(247, 243, 235, 0.92);
  border-color: rgba(26, 43, 46, 0.2);
  color: #1a2b2e;
  box-shadow: 0 8px 28px rgba(26, 43, 46, 0.14);
}

html[data-theme="light"] .back-to-top:hover,
html[data-theme="light"] .back-to-top:focus-visible {
  background: rgba(125, 110, 48, 0.14);
  border-color: rgba(125, 110, 48, 0.38);
}

/* ── Transicion suave de tema ── */
html[data-theme] body,
html[data-theme] .story-section,
html[data-theme] .joytree-navbar,
html[data-theme] .insight-card,
html[data-theme] .benefit-tile,
html[data-theme] .testimonial-card,
html[data-theme] .contact-point,
html[data-theme] .location-item,
html[data-theme] .contact-panel,
html[data-theme] .site-footer {
  transition:
    background-color 320ms ease,
    border-color 320ms ease,
    color 320ms ease,
    box-shadow 320ms ease;
}

/* ── Amenidades Coverflow ──────────────────────────────────────────────────── */
/* El wrap hace overflow:hidden para clipear las cartas laterales */
.amenity-carousel-wrap {
  width: 100%;
  padding: clamp(0.5rem, 1.5vw, 1rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  justify-content: center;
  overflow: hidden;
}

/* Frame: ventana de visión, más ancha que el carousel central */
.amenity-carousel-frame {
  position: relative;
  width: 100%;
  max-width: clamp(700px, 92%, 1200px);
}

/* Carousel: la carta principal ocupa 76% del frame */
.amenity-carousel {
  position: relative;
  width: 76%;
  margin: 0 auto;
  height: clamp(400px, 60vh, 650px);
  overflow: visible; /* permite que prev/next asomen a los lados */
}

/* Bootstrap muestra solo .active por defecto — forzamos todos visibles */
.amenity-carousel .carousel-inner {
  overflow: visible !important;
  position: relative;
  width: 100%;
  height: 100%;
}

/* ── Slides: posición absoluta, todos siempre en el DOM ─────────────────────── */
.amenity-carousel .carousel-item {
  display: block !important;   /* anula display:none de Bootstrap */
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 1.5rem;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.78);
  pointer-events: none;
  z-index: 0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.38);
  transition:
    transform 680ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity   680ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 680ms ease;
}

/* Carta anterior — asoma desde la izquierda */
.amenity-carousel .carousel-item.is-prev {
  opacity: 0.52;
  transform: translateX(-92%) scale(0.88);
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}

/* Carta activa — centrada, tamaño completo */
.amenity-carousel .carousel-item.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  z-index: 3;
  pointer-events: auto;
  box-shadow:
    0 16px 52px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(200, 192, 126, 0.14);
}

/* Carta siguiente — asoma desde la derecha */
.amenity-carousel .carousel-item.is-next {
  opacity: 0.52;
  transform: translateX(92%) scale(0.88);
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}

/* Cartas ocultas — detrás, invisibles */
.amenity-carousel .carousel-item.is-hidden {
  opacity: 0;
  transform: scale(0.78);
  pointer-events: none;
  z-index: 1;
}

/* ── Ken Burns en slide activo ──────────────────────────────────────────────── */
@keyframes amenity-ken-burns {
  from { transform: scale(1);    }
  to   { transform: scale(1.08); }
}

.amenity-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.amenity-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-item.is-active .amenity-slide-img {
  animation: amenity-ken-burns 6s ease-out forwards;
}

/* ── Overlay degradado ──────────────────────────────────────────────────────── */
.amenity-slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(12, 20, 11, 0.94) 0%,
    rgba(12, 20, 11, 0.58) 32%,
    rgba(12, 20, 11, 0) 60%
  );
}

/* Overlay más oscuro en prev/next para dar sensación de profundidad */
.carousel-item.is-prev .amenity-slide-overlay,
.carousel-item.is-next .amenity-slide-overlay {
  background: rgba(12, 20, 11, 0.55);
}

/* ── Contenido del slide — solo título (centrado, abajo), ícono
   (esquina inf. izquierda) y nombre del ritual (esquina inf. derecha).
   La descripción larga ya no vive aquí — es el encabezado de la
   galería del ritual (ver .rg-header / ritual-gallery.js) ──────────── */
.amenity-slide-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.25rem clamp(1.25rem, 4vw, 2.75rem) clamp(1.25rem, 3.4vw, 2rem);
  /* Beige de marca, no blanco puro: es el único sitio de la página que se
     salía del color de texto del sitio. Va como literal y no como
     var(--hero-text) porque este texto vive sobre una foto, no sobre el fondo
     de la página — en tema claro la variable se vuelve oscura y aquí eso lo
     haría ilegible. */
  color: #ded7ba;
}

.amenity-slide-content .amenity-icon {
  position: absolute;
  left: clamp(1.25rem, 4vw, 2.75rem);
  bottom: clamp(1.25rem, 3.4vw, 2rem);
  font-size: 1.6rem;
  color: var(--brand-canopy);
  margin: 0;
}

.amenity-slide-content .card-tag {
  position: absolute;
  right: clamp(1.25rem, 4vw, 2.75rem);
  bottom: clamp(1.45rem, 3.6vw, 2.2rem);
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-canopy);
  border: 1px solid rgba(200, 192, 126, 0.45);
  border-radius: 2rem;
  padding: 0.2rem 0.8rem;
  white-space: nowrap;
}

/* El título sale de la vista para que la fotografía tenga el protagonismo:
   en el slide quedan solo el icono y el nombre del ritual. Se oculta, no se
   borra —sigue en el DOM y con su clave de i18n— porque es el único texto que
   describe la escena para un lector de pantalla o para el buscador; sin él, el
   slide se anunciaría solo como "Ritual del Agua". */
.amenity-slide-content h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.amenity-slide-content p {
  display: none;
}

/* ── Indicadores — puntos dorados arriba ────────────────────────────────────── */
.amenity-indicators {
  position: absolute;
  bottom: auto;
  top: 1.1rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  z-index: 10;
  list-style: none;
  margin: 0;
  padding: 0;
}

.amenity-indicators button {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(200, 192, 126, 0.35);
  opacity: 1;
  transition: background 300ms ease, transform 300ms ease;
  flex-shrink: 0;
  cursor: pointer;
}

.amenity-indicators button.active {
  background: var(--brand-canopy);
  transform: scale(1.5);
}

/* ── Controles — flechas circulares ─────────────────────────────────────────── */
.amenity-carousel-prev,
.amenity-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  background: rgba(12, 20, 11, 0.55);
  border: 1px solid rgba(200, 192, 126, 0.30);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 1;
  transition: background 280ms ease, border-color 280ms ease, transform 280ms ease;
}

.amenity-carousel-prev { left: 1rem; }
.amenity-carousel-next { right: 1rem; }

.amenity-carousel-prev:hover,
.amenity-carousel-next:hover {
  background: rgba(200, 192, 126, 0.18);
  border-color: var(--brand-canopy);
  transform: translateY(-50%) scale(1.08);
}

.amenity-carousel-prev i,
.amenity-carousel-next i {
  font-size: 0.95rem;
  color: var(--brand-canopy);
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .amenity-carousel {
    width: 74%;
    height: clamp(380px, 68vw, 520px);
  }
  .amenity-carousel .carousel-item.is-prev {
    opacity: 0.58;
    transform: translateX(-88%) scale(0.86);
  }
  .amenity-carousel .carousel-item.is-next {
    opacity: 0.58;
    transform: translateX(88%) scale(0.86);
  }
  .amenity-carousel-prev,
  .amenity-carousel-next {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .amenity-carousel {
    width: 70%;
    height: clamp(360px, 72vw, 480px);
  }
  .amenity-carousel .carousel-item.is-prev {
    opacity: 0.55;
    transform: translateX(-85%) scale(0.84);
  }
  .amenity-carousel .carousel-item.is-next {
    opacity: 0.55;
    transform: translateX(85%) scale(0.84);
  }
  .amenity-slide-content {
    padding: 0.75rem 1.1rem 3rem;
  }
  .amenity-slide-content .amenity-icon {
    font-size: 1.35rem;
    bottom: 0.9rem;
    left: 1.1rem;
  }
  .amenity-slide-content .card-tag {
    bottom: 0.95rem;
    right: 1.1rem;
    font-size: 0.56rem;
    padding: 0.16rem 0.6rem;
  }
  .amenity-carousel-prev { left: 0.3rem; }
  .amenity-carousel-next { right: 0.3rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET LANDSCAPE — lo más parecido posible a la versión desktop
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 992px–1199px: iPads modernos en landscape (ya tienen nav desktop) ── */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Este apretado no bastaba: con 6 enlaces + CTA + los dos botones de
     tema/idioma el menú seguía pidiendo 858px y la marca ocupaba 240, así que
     entre 1024 y 1199 el botón de idioma se salía de la pantalla (134px a
     1024). Aquí no cabe a medias — o se compacta de verdad o hay que pasar a
     hamburguesa. Se compacta, con valores intermedios entre este tramo y el
     de 768–991 landscape, que sí cabe. */
  .joytree-nav-link {
    padding: 0.5rem 0.42rem !important;
    font-size: 0.6rem;
    letter-spacing: 0.09em;
    white-space: nowrap;
  }

  .joytree-nav-link::after {
    left: 0.42rem;
    right: 0.42rem;
  }

  .joytree-nav-cta {
    padding: 0.45rem 0.7rem;
    font-size: 0.6rem;
    letter-spacing: 0.09em;
    min-height: 2.2rem;
    white-space: nowrap;
  }

  .joytree-brand-logo {
    width: clamp(5.2rem, 11vw, 7rem);
  }

  .nav-toggles { gap: 0.35rem; }

  .story-section {
    padding: clamp(4rem, 8vw, 6rem) 0;
  }
}

/* ── 1200px–1399px: el hueco que faltaba ─────────────────────────────────
   La barra usa .navbar-nav { flex-wrap: nowrap } y sus enlaces son
   white-space: nowrap, así que no se parte en dos líneas: se desborda. Con el
   espaciado completo el menú mide ~978px y, sumado a la marca (~260px) y al
   padding del contenedor, necesita ~1290px. A partir de 1200 ya no aplicaba
   ningún ajuste, así que entre 1200 y 1400 el borde derecho del menú caía
   FUERA de la pantalla —53px a 1280px de ancho— y el botón de idioma quedaba
   inalcanzable. Se reutiliza el apretado del tramo 992–1199. Arriba de 1400
   sobra espacio de sobra y no se toca nada. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .joytree-nav-link {
    padding: 0.75rem 0.72rem !important;
    font-size: 0.69rem;
    letter-spacing: 0.13em;
  }

  .joytree-nav-link::after {
    left: 0.72rem;
    right: 0.72rem;
  }

  .joytree-nav-cta {
    padding: 0.6rem 0.95rem;
    font-size: 0.69rem;
  }
}

/* ── 768px–991px landscape: forzar navbar horizontal + layouts de 2 columnas ── */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) {
  /* 1 ── Navbar: replica comportamiento navbar-expand-lg */
  #site-nav .navbar-toggler          { display: none !important; }
  #site-nav .joytree-mobile-cta      { display: none !important; }

  #site-nav .navbar-collapse {
    display: flex !important;
    flex-basis: auto !important;
    order: 0 !important;
    width: auto !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
  }

  #site-nav .navbar-nav {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  #site-nav .nav-item--toggles {
    width: auto;
    padding: 0;
    margin-top: 0;
    border-top: 0;
  }

  #site-nav .nav-item--toggles .nav-toggles {
    justify-content: flex-start;
  }

  .joytree-brand-logo {
    width: clamp(5rem, 12vw, 6.5rem);
  }

  .joytree-nav-link {
    padding: 0.4rem 0.42rem !important;
    font-size: 0.6rem;
    letter-spacing: 0.09em;
    white-space: nowrap;
  }

  .joytree-nav-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.42rem 0.7rem;
    font-size: 0.6rem;
    letter-spacing: 0.09em;
    min-height: 2.1rem;
    white-space: nowrap;
  }

  /* 2 ── Layouts de 2 columnas (replica lo que Bootstrap hace a >= 992px) */
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6667%;
  }

  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333%;
  }

  /* 3 ── Secciones: spacing más compacto en landscape */
  .story-section {
    padding: clamp(3rem, 7vw, 4.5rem) 0;
  }

  .section-heading {
    margin-bottom: 1.75rem;
  }

  /* 4 ── Cards: mantener grid de 2-3 columnas */
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.3333%;
  }

  /* 5 ── Amenity carousel: tamaño apropiado */
  .amenity-carousel {
    height: clamp(360px, 55vh, 520px);
  }

  /* 6 ── Topbar hero padding apropiado para nav horizontal */
  .hero-topbar {
    padding-top: clamp(4.5rem, 9vw, 5.5rem);
  }
}

/* ══════════════════════════════════════════════════════════════
   EXPLORE — Stats + Pricing cards
   ══════════════════════════════════════════════════════════════ */

/* ── Tarjeta de datos clave del lote (superficie / playa / respaldo TAO) ── */
.pv-facts-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: clamp(1.5rem, 2.6vw, 2.1rem) clamp(1.6rem, 2.8vw, 2.3rem);
  background: linear-gradient(160deg, rgba(var(--brand-ink-soft-rgb), 0.75), rgba(var(--brand-ink-rgb), 0.55));
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.20);
  border-radius: 1.5rem;
  box-shadow: var(--page-shadow), inset 0 1px 0 rgba(var(--brand-sand-rgb), 0.05);
  overflow: hidden;
}

.pv-facts-corner {
  position: absolute;
  top: -40%;
  right: -20%;
  width: 65%;
  height: 140%;
  background: radial-gradient(closest-side, rgba(var(--brand-canopy-rgb), 0.10), transparent 72%);
  pointer-events: none;
}

.pv-fact {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 600ms ease, transform 600ms ease;
  transition-delay: var(--pv-fact-delay, 0ms);
}
.pv-lote-row.is-visible .pv-fact { opacity: 1; transform: translateX(0); }
.pv-fact:nth-child(2)  { --pv-fact-delay: 0ms; }
.pv-fact:nth-child(4)  { --pv-fact-delay: 110ms; }
.pv-fact:nth-child(6)  { --pv-fact-delay: 220ms; }

.pv-fact-icon {
  flex-shrink: 0;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--brand-canopy-rgb), 0.10);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.28);
  color: var(--brand-canopy);
  transition: background 220ms ease, transform 220ms ease;
}
.pv-fact-icon svg { width: 1.3rem; height: 1.3rem; }
.pv-fact:hover .pv-fact-icon {
  background: rgba(var(--brand-canopy-rgb), 0.18);
  transform: scale(1.06);
}

.pv-fact-text {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.pv-fact-value {
  font-family: var(--font-body);
  line-height: 1.05;
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  font-weight: 400;
  color: var(--hero-accent);
  letter-spacing: -0.01em;
}

.pv-fact-label {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* 0.62 y no 0.5: las etiquetas volvieron a ser frases completas, y a media
     opacidad una línea larga en versalitas se vuelve difícil de leer. */
  opacity: 0.62;
  line-height: 1.35;
}

.pv-fact-divider {
  height: 1px;
  margin-left: calc(2.85rem + 1rem);
  background: rgba(var(--brand-canopy-rgb), 0.14);
}

html[data-theme="light"] .pv-facts-card { border-color: rgba(var(--brand-sand-rgb), 0.16); }
html[data-theme="light"] .pv-fact-divider { background: rgba(var(--brand-sand-rgb), 0.14); }

@media (max-width: 767px) {
  .pv-facts-card { padding: 1.4rem 1.5rem; }
  .pv-fact-icon { width: 2.5rem; height: 2.5rem; }
  .pv-fact-icon svg { width: 1.15rem; height: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pv-fact { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Pricing cards */
.pricing-cards {
  display: flex;
  gap: 0.8rem;
  margin-bottom: 0.65rem;
}

.pricing-card {
  flex: 1;
  background: rgba(var(--brand-ink-soft-rgb), 0.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.18);
  border-radius: 0.9rem;
  padding: 1.1rem 1rem 1rem;
  position: relative;
}

.pricing-card--featured {
  border-color: rgba(200, 192, 126, 0.38);
  box-shadow: 0 0 0 1px rgba(200, 192, 126, 0.1) inset;
}

.pricing-card-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--hero-accent);
  color: #0d1f22;
  padding: 0.2rem 0.65rem;
  border-radius: 2rem;
  margin-bottom: 0.75rem;
}

.pricing-card-badge--soft {
  background: rgba(var(--brand-canopy-rgb), 0.2);
  color: var(--brand-sand);
}

.pricing-card-type {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.52;
  margin: 0 0 0.12rem;
}

.pricing-card-was {
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-decoration: line-through;
  opacity: 0.32;
  margin: 0 0 0.08rem;
}

.pricing-card-price {
  font-family: var(--font-body);
  line-height: 1.1;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 300;
  color: var(--hero-accent);
  margin: 0 0 0.1rem;
  letter-spacing: -0.01em;
}

.pricing-card-price em {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  opacity: 0.6;
  vertical-align: top;
  margin-top: 0.32rem;
  display: inline-block;
  margin-left: 0.18rem;
}

.pricing-card-perks {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.13);
  padding-top: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.pricing-card-perks li {
  font-family: var(--font-body);
  font-size: 0.67rem;
  opacity: 0.62;
  padding-left: 1rem;
  position: relative;
  line-height: 1.35;
}

.pricing-card-perks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--hero-accent);
  opacity: 0.9;
  font-size: 0.6rem;
  top: 0.07em;
}

.pricing-note {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  opacity: 0.35;
  text-align: center;
  margin: 0 0 1.25rem;
}

/* Light theme */
html[data-theme="light"] .pricing-card {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(26, 43, 46, 0.11);
}

html[data-theme="light"] .pricing-card--featured {
  border-color: rgba(125, 110, 48, 0.32);
}

html[data-theme="light"] .pricing-card-badge--soft {
  background: rgba(26, 43, 46, 0.1);
  color: #1a2b2e;
}

/* Cards: apilar en todo lo que no sea desktop amplio (≥1200px) */
@media (max-width: 1199.98px) {
  .pricing-cards {
    flex-direction: column;
  }
}

/* Móvil: centrar todo el contenido de la sección explore */
@media (max-width: 767.98px) {
  .story-section--explore .section-heading,
  .story-section--explore .section-copy {
    text-align: center;
  }

  .story-section--explore .section-kicker::before {
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-card {
    text-align: center;
  }

  .pricing-card-perks {
    text-align: left;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-note {
    text-align: center;
  }
}

/* ── Logo según tema ───────────────────────────────────────────────────────── */
/* Tema oscuro (default): blanco visible, oscuro oculto */
.logo-light-theme { display: none; }
.logo-dark-theme  { display: inline-block; }

/* ═══════════════════════════════════════════════════════════
   RITUAL GALLERY — overlay que se abre al tocar una imagen
   del carrusel de rituales
═══════════════════════════════════════════════════════════ */

/* Cursor para indicar que la slide es interactiva */
.amenity-slide { cursor: pointer; }

/* ══════════════════════════════════════════════════════════
   GALERÍA DE RITUALES — overlay expandible
══════════════════════════════════════════════════════════ */

/* ── Overlay base ── */
.ritual-gallery {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  flex-direction: column;
  background: #040e10;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Apertura: escala desde el origen con blur y rebote suave ── */
.ritual-gallery.is-open {
  display: flex;
  animation: rgOpen 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Cierre: colapsa rápido hacia el origen ── */
.ritual-gallery.is-closing {
  display: flex;
  animation: rgClose 320ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes rgOpen {
  0%   { transform: scale(0.04); opacity: 0;   filter: blur(28px); }
  55%  { opacity: 1;                            filter: blur(0px);  }
  75%  { transform: scale(1.025);                                   }
  100% { transform: scale(1);    opacity: 1;   filter: blur(0px);  }
}

@keyframes rgClose {
  0%   { transform: scale(1);    opacity: 1;  filter: blur(0px);  }
  25%  { transform: scale(1.015);                                  }
  100% { transform: scale(0.04); opacity: 0;  filter: blur(20px); }
}

/* ── Header sticky ── */
.rg-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem clamp(1.25rem, 5vw, 3.5rem);
  background: rgba(4, 14, 16, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(222, 215, 186, 0.08);
}

.rg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid rgba(200, 192, 126, 0.32);
  background: rgba(200, 192, 126, 0.08);
  color: var(--brand-canopy);
  font-size: 1.2rem;
}

.rg-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  flex: 1 1 auto;
}

/* Nombre del ritual */
.rg-label {
  margin: 0;
  font-family: var(--font-body);
  text-transform: uppercase;
  line-height: 1.1;
  font-size: clamp(1.3rem, 3.5vw, 2.1rem);
  font-weight: 300;
  letter-spacing: 0.1em;
  color: #ded7ba;
}

/* Tagline bajo el nombre — ahora lleva la descripción completa que antes
   vivía en la tarjeta de afuera */
.rg-tagline {
  margin: 0;
  font-family: var(--font-body, sans-serif);
  font-size: clamp(0.72rem, 1.6vw, 0.85rem);
  font-style: italic;
  letter-spacing: 0.02em;
  color: rgba(222, 215, 186, 0.58);
  line-height: 1.5;
  max-width: 60ch;
}

/* Botón cerrar */
.rg-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid rgba(222, 215, 186, 0.18);
  background: rgba(222, 215, 186, 0.06);
  color: #ded7ba;
  font-size: 1rem;
  cursor: pointer;
  transition: background 240ms ease, border-color 240ms ease, transform 300ms cubic-bezier(0.34, 1.6, 0.64, 1), color 240ms ease;
}

.rg-close:hover,
.rg-close:focus-visible {
  background: rgba(200, 192, 126, 0.18);
  border-color: rgba(200, 192, 126, 0.45);
  color: #c8c07e;
  transform: scale(1.1) rotate(90deg);
  outline: none;
}

/* ── Masonry vertical — deliberadamente NO es una grilla uniforme de
   filas/columnas iguales: cada imagen conserva su alto natural (vía
   CSS columns), creando un mosaico escalonado sin scroll horizontal —
   la página se desplaza verticalmente como cualquier otra sección. El
   título vive centrado abajo de cada imagen, igual que en la tarjeta
   del carrusel de afuera (sin descripción — esa ya está en el
   encabezado). ── */
.rg-grid {
  columns: 3 17rem;
  column-gap: 1.1rem;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 5vw, 3.5rem);
}

/* ── Tarjeta de imagen ── */
.rg-item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 1.1rem;
  break-inside: avoid;
  border-radius: 1.1rem;
  overflow: hidden;
  opacity: 0;
  animation: rgItem 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  background: rgba(12, 29, 33, 0.7);
  cursor: default;
}

.rg-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .rg-item:hover img { transform: scale(1.06); }
}

/* El pie de foto se retiró: las imágenes de la galería van limpias, sin
   título ni degradado encima (ver ritual-gallery.js). */

/* ── Animación de entrada por item ── */
@keyframes rgItem {
  from { opacity: 0; transform: translateX(2.5rem) scale(0.97); }
  to   { opacity: 1; transform: translateX(0)       scale(1);   }
}

@media (max-width: 575.98px) {
  .rg-header {
    padding: 1rem 1.1rem;
    gap: 0.75rem;
  }
  .rg-icon { width: 2.3rem; height: 2.3rem; font-size: 1rem; }
  .rg-tagline { display: none; }
  .rg-grid {
    gap: 0.85rem;
    padding: 1rem 1rem 1.75rem;
  }
  .rg-item {
    flex-basis: 78vw;
    height: 62vw;
  }
}

/* Tema claro: oscuro visible, blanco oculto */
html[data-theme="light"] .logo-light-theme { display: inline-block; }
html[data-theme="light"] .logo-dark-theme  { display: none; }

/* ═══════════════════════════════════════════════════════════
   KINEKI MAGNET BUTTON + MODAL
═══════════════════════════════════════════════════════════ */

/* ── Botón magnet ── */
.kineki-magnet-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.4rem;
  padding: 0.75rem 1.4rem;
  border-radius: 100px;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.55);
  background: rgba(var(--brand-canopy-rgb), 0.08);
  color: var(--brand-canopy);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 280ms ease, border-color 280ms ease, transform 260ms cubic-bezier(0.16,1,0.3,1), box-shadow 260ms ease;
  will-change: transform;
}

.kineki-magnet-btn:hover {
  background: rgba(var(--brand-canopy-rgb), 0.18);
  border-color: var(--brand-canopy);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(var(--brand-canopy-rgb), 0.22);
}

.kineki-magnet-arrow {
  display: inline-block;
  transition: transform 260ms cubic-bezier(0.16,1,0.3,1);
}

.kineki-magnet-btn:hover .kineki-magnet-arrow {
  transform: translate(2px, -2px);
}

/* Variante compacta: CTA secundario dentro de la card Kineki en "Por qué Joy Tree" */
.kineki-magnet-btn--card {
  align-self: center;
  margin-top: 0.9rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.72rem;
}

/* ════════════════════════════════════════════════════
   STORY MODAL — Galería editorial full-screen
   Base compartida por el modal de Kineki (#kinekiModal) y el
   de TAO (#taoModal). El prefijo .km-* de los bloques internos
   se conserva tal cual: nació con Kineki, hoy es el vocabulario
   común de los dos modales.
   ════════════════════════════════════════════════════ */

/* ── Overlay + Panel ── */
.story-modal {
  position: fixed;
  inset: 0;
  z-index: 1090;
  overflow: hidden; /* evita segunda scrollbar — solo el panel interno scrollea */
}
.story-modal[hidden] { display: none; }

.story-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 9, 11, 0.62);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.story-modal-panel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: #0c140b;
  outline: none;
  animation: kmSlideIn 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes kmSlideIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Sin overflow propio: si se mezcla overflow-x:hidden con overflow-y:visible,
   la spec de CSS fuerza igual overflow-y:auto (la regla aplica en ambas
   direcciones), creando un segundo contenedor de scroll casi del alto de su
   contenido que atrapa la rueda del mouse antes de que llegue al panel real
   (.story-modal-panel). El overflow-x:hidden del panel padre ya recorta
   cualquier desborde horizontal, así que .km-scroll no necesita el suyo. */
.km-scroll { width: 100%; }

/* ── Botón cerrar — fijo, grande y visible ── */
.km-close {
  position: fixed;
  top: max(1.2rem, env(safe-area-inset-top, 1.2rem));
  right: max(1.4rem, env(safe-area-inset-right, 1.4rem));
  z-index: 1095; /* sobre el modal (1090) y su contenido */
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: 1.5px solid rgba(222, 215, 186, 0.36);
  background: rgba(12, 20, 11, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: rgba(222, 215, 186, 0.82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  cursor: pointer;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.60),
    0 0 0 4px rgba(var(--brand-canopy-rgb), 0.08),
    inset 0 1px 0 rgba(222, 215, 186, 0.06);
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.km-close:hover {
  background: rgba(12, 20, 11, 1);
  color: #ded7ba;
  border-color: rgba(222, 215, 186, 0.58);
  box-shadow:
    0 6px 32px rgba(0, 0, 0, 0.65),
    0 0 22px rgba(var(--brand-canopy-rgb), 0.22),
    inset 0 1px 0 rgba(222, 215, 186, 0.10);
  transform: scale(1.07);
}
.km-close:focus-visible {
  outline: 2px solid var(--brand-canopy);
  outline-offset: 3px;
}
.km-close-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}
.km-close-label {
  font-family: 'Montserrat', var(--font-body);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(222, 215, 186, 0.42);
  line-height: 1;
}
@media (min-width: 768px) {
  .km-close {
    width: auto;
    height: 2.9rem;
    border-radius: 100px;
    flex-direction: row;
    padding: 0 1.3rem 0 1.1rem;
    gap: 0.5rem;
  }
  .km-close-label {
    font-size: 0.6rem;
    color: rgba(222, 215, 186, 0.55);
  }
}

/* ── Primitivos compartidos ── */
.km-kicker {
  display: block;
  font-family: 'Montserrat', var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-canopy);
  margin-bottom: 0.85rem;
}
.km-kicker--light { color: rgba(200, 192, 126, 0.75); }

.km-section-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 400;
  color: #ded7ba;
  margin: 0 0 1.2rem;
}
.km-st--light { color: rgba(222, 215, 186, 0.95); }

.km-body-text {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.25vw, 0.95rem);
  overflow-wrap: break-word;
  color: rgba(222, 215, 186, 0.62);
  line-height: 1.88;
  margin: 0;
}
.km-bt--light { color: rgba(222, 215, 186, 0.72); }

/* ── HERO ── */
.km-hero {
  position: relative;
  height: var(--jt-screen-h);
  /* Mismo motivo que en .explore-entrance: el suelo en px no puede superar el
     alto real de la pantalla o la sección desborda su propio viewport. */
  min-height: min(560px, var(--jt-screen-h));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.km-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  animation: kmHeroZoom 9s ease-out both;
}
@keyframes kmHeroZoom {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}
.km-hero-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(12, 20, 11,0.97) 0%, rgba(12, 20, 11,0.52) 48%, rgba(12, 20, 11,0.10) 100%),
    linear-gradient(90deg, rgba(12, 20, 11,0.70) 0%, transparent 60%);
}
.km-hero-content {
  position: relative;
  z-index: 1;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 6vw, 6rem);
  max-width: 820px;
}
.km-badge {
  display: inline-block;
  font-family: 'Montserrat', var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-canopy);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.42);
  border-radius: 100px;
  padding: 0.28rem 0.88rem;
  margin-bottom: 1rem;
}
.km-hero-name {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(4.5rem, 15vw, 10.5rem);
  font-weight: 900;
  letter-spacing: 0.28em;
  color: #ded7ba;
  line-height: 0.9;
  margin: 0.3rem 0 1.1rem;
  text-transform: uppercase;
}
.km-hero-sub {
  font-size: clamp(0.78rem, 1.2vw, 0.88rem);
  color: rgba(222, 215, 186, 0.50);
  letter-spacing: 0.04em;
  margin-bottom: 0.65rem;
}
.km-hero-sub em { font-style: italic; color: var(--brand-canopy); }
.km-hero-tagline {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  font-weight: 400;
  color: rgba(222, 215, 186, 0.85);
  margin: 0;
  max-width: 520px;
}
.km-scroll-cue {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: rgba(222, 215, 186, 0.30);
  font-size: 0.65rem;
  animation: kmCueBounce 2.4s ease-in-out infinite;
  z-index: 2;
}
.km-scroll-cue span {
  width: 1px;
  height: 26px;
  background: linear-gradient(to bottom, transparent, rgba(200,192,126,0.45));
}
@keyframes kmCueBounce {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: 0.30; }
  50%      { transform: translateX(-50%) translateY(6px); opacity: 0.55; }
}

/* ── SPLIT — imagen + texto ── */
.km-split {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: clamp(440px, 60vh, 680px);
}
.km-split--rev { grid-template-columns: 45% 55%; }

.km-split-img { overflow: hidden; position: relative; }
.km-split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.km-split:hover .km-split-img img { transform: scale(1.04); }

.km-split-text {
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1.75rem, 4.5vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(160deg, rgba(9,22,26,0.98) 0%, rgba(5,14,17,1) 100%);
}

/* ── FULL IMAGE con overlay texto ── */
.km-fullimg {
  position: relative;
  min-height: clamp(480px, 68vh, 780px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.km-fullimg > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* Fotos con mucho cielo arriba: encuadrando desde abajo, el mar entra detrás
   del texto y el bloque deja de leerse como un lavado gris. */
.km-fullimg--lower > img { object-position: center 78%; }
.km-fullimg-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(12, 20, 11,0.97) 0%, rgba(12, 20, 11,0.70) 40%, rgba(12, 20, 11,0.15) 75%, transparent 100%),
    linear-gradient(90deg, rgba(12, 20, 11,0.55) 0%, transparent 65%);
}
.km-fullimg-content {
  position: relative;
  z-index: 1;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 6vw, 6rem);
  max-width: 900px;
}

/* ── Chips (Shou Sugi Ban, etc.) ── */
.km-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.1rem 0 1.2rem;
}
.km-chip {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(222, 215, 186, 0.78);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.30);
  background: rgba(var(--brand-canopy-rgb), 0.07);
  border-radius: 0.65rem;
  padding: 0.55rem 0.9rem;
  transition: background 200ms ease, border-color 200ms ease;
}
.km-chip:hover {
  background: rgba(var(--brand-canopy-rgb), 0.14);
  border-color: rgba(var(--brand-canopy-rgb), 0.54);
}
/* Cuatro chips de ancho dispar en flex-wrap caen 3 + 1, con la última suelta.
   En rejilla de dos columnas quedan 2 × 2, todas del mismo ancho. */
.km-chips--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 34rem;
}
@media (max-width: 480px) {
  .km-chips--grid { grid-template-columns: 1fr; }
}
.km-chip strong { display: block; color: var(--brand-canopy); font-weight: 600; font-size: 0.8rem; }

/* ── S2b: Proceso de tratamiento de la madera ── */
.km-process {
  background: #0c140b;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem);
}
.km-process-header {
  max-width: 640px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.km-process-body {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.km-process-img {
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.km-process-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.km-process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.km-process-step {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
}
.km-process-step:first-child { border-top: none; padding-top: 0; }
.km-step-num {
  font-family: var(--font-body);
  line-height: 1;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  color: rgba(var(--brand-canopy-rgb), 0.45);
  flex-shrink: 0;
  min-width: 2.2rem;
}
.km-step-text strong {
  display: block;
  font-family: 'Montserrat', var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-canopy);
  margin-bottom: 0.35rem;
}
.km-step-text p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(222, 215, 186, 0.62);
}

/* ── Specs strip (modelo) ── */
.km-specs {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 1.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.16);
}
.km-spec { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.km-spec--div {
  flex: none;
  width: 1px;
  height: 2rem;
  background: rgba(var(--brand-canopy-rgb), 0.20);
  margin: 0 1.2rem;
}
.km-spec-val {
  font-family: var(--font-body);
  line-height: 1;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 300;
  color: var(--brand-canopy);
}
.km-spec-lbl {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(222, 215, 186, 0.42);
}

/* ── Banda de cifras (modal TAO) ──
   El mismo strip de .km-specs, pero suelto entre secciones en vez de colgado
   del final de una columna de texto: aquí la línea superior la pone la banda,
   no el strip, y el ancho se limita para que las tres cifras queden centradas
   y del mismo tamaño en pantallas anchas. */
.km-stats-band {
  background: linear-gradient(180deg, #0c140b 0%, #071114 100%);
  padding: clamp(2.2rem, 4.5vw, 3.6rem) clamp(1.5rem, 5vw, 5rem);
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
}
.km-stats-band .km-specs {
  max-width: 880px;
  margin: 0 auto;
  padding-top: 0;
  border-top: none;
  text-align: center;
}
.km-stats-band .km-spec { align-items: center; }
.km-stats-band .km-spec-val { white-space: nowrap; }
/* En pantallas muy angostas el strip base envuelve a 45% de ancho, que con
   tres cifras deja dos arriba y una suelta abajo. Aquí se apilan las tres
   completas para que la banda siga leyéndose centrada y pareja. */
@media (max-width: 400px) {
  .km-stats-band .km-spec { width: 100%; }
}

/* ══ Hero del modal de TAO ══════════════════════════════════════════════
   El de Kineki es un hero de proyecto: nombre gigante abajo a la izquierda.
   Este es un hero de marca, y la marca ya existe — así que manda el logotipo
   real de TAO, centrado, sobre la vista aérea de Sek Akumal. Todo va acotado
   a .km-hero--tao para no tocar el modal de Kineki. */
.km-hero--tao {
  align-items: center;
  text-align: center;
}
.km-hero--tao .km-hero-img {
  object-position: center 42%;
  animation: taoHeroDrift 28s ease-in-out infinite alternate both;
}
@keyframes taoHeroDrift {
  from { transform: scale(1.04); }
  to   { transform: scale(1.13); }
}
/* Velo simétrico: la imagen respira en la banda central y se apaga arriba y
   abajo, en vez del degradado lateral que usa Kineki. */
.km-hero--tao .km-hero-tint {
  background:
    linear-gradient(180deg, rgba(12, 20, 11, 0.86) 0%, rgba(12, 20, 11, 0.42) 38%, rgba(12, 20, 11, 0.62) 68%, rgba(7, 17, 20, 0.97) 100%),
    radial-gradient(120% 80% at 50% 45%, transparent 35%, rgba(7, 17, 20, 0.55) 100%);
}
.km-hero--tao .km-hero-content {
  margin: 0 auto;
  max-width: 780px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: clamp(4.5rem, 9vw, 7rem);
}
.km-hero--tao .km-badge { margin-bottom: 1.6rem; }
.tao-hero-logo {
  width: clamp(11rem, 21vw, 17rem);
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}
.tao-hero-rule {
  display: block;
  width: clamp(4rem, 9vw, 7rem);
  height: 1px;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
  background: linear-gradient(90deg, transparent, rgba(var(--brand-canopy-rgb), 0.75), transparent);
}
.km-hero--tao .km-hero-tagline {
  max-width: 30ch;
  color: rgba(222, 215, 186, 0.94);
  text-wrap: balance;
}
.km-hero--tao .km-hero-sub {
  margin: 1.1rem 0 0;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: clamp(0.6rem, 1vw, 0.7rem);
  color: rgba(222, 215, 186, 0.42);
}

/* Las cifras suben a montarse sobre el hero: dejan de ser una franja más y
   se leen como la ficha de la desarrolladora. */
#taoModal .km-stats-band {
  position: relative;
  z-index: 3;
  max-width: min(1040px, calc(100% - 3rem));
  margin: clamp(-5rem, -7vw, -3.25rem) auto clamp(2rem, 4vw, 3.25rem);
  padding: clamp(1.6rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.18);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.18);
  border-radius: 1.35rem;
  background: rgba(9, 23, 27, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.45);
}
#taoModal .km-stats-band .km-spec-val { color: var(--brand-canopy); }

@media (prefers-reduced-motion: reduce) {
  .km-hero--tao .km-hero-img { animation: none; }
}
@media (max-width: 767.98px) {
  .km-hero--tao .km-hero-content { padding-bottom: clamp(3.5rem, 12vw, 5rem); }
  #taoModal .km-stats-band {
    max-width: calc(100% - 2rem);
    margin-top: -2.25rem;
    border-radius: 1.1rem;
  }
}

/* ── IMPACT 39% ── */
.km-impact {
  position: relative;
  min-height: clamp(480px, 72vh, 780px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.km-impact-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.28) brightness(0.55);
}
.km-impact-tint {
  position: absolute;
  inset: 0;
  background: rgba(3, 9, 11, 0.72);
}
.km-impact-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 7vw, 7rem);
  width: 100%;
}
.km-impact-left { overflow: visible; min-width: 0; }
.km-impact-right { min-width: 0; }
.km-impact-pct {
  font-family: var(--font-body);
  line-height: 1;
  font-size: clamp(5.5rem, 13vw, 11rem);
  font-weight: 300;
  color: var(--brand-canopy);
  letter-spacing: -0.02em;
  white-space: nowrap;
  padding-top: 0.12em;
}
.km-impact-pct sup {
  font-size: 0.42em;
  vertical-align: 0.42em;
}
.km-impact-pct-lbl {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.75);
  margin-top: 1.1rem;
}
.km-impact-right { display: flex; flex-direction: column; gap: 1.4rem; }
.km-impact-data {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.km-impact-datum { display: flex; flex-direction: column; gap: 0.25rem; min-width: 90px; }
.km-id-val {
  font-family: var(--font-body);
  line-height: 1;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 300;
  color: var(--brand-canopy);
}
.km-id-lbl {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: rgba(222, 215, 186, 0.50);
  line-height: 1.4;
}

/* ── PERMANENCE — mosaico 3 imgs + timeline ── */
.km-permanence {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: clamp(560px, 80vh, 920px);
}
.km-perm-mosaic {
  display: grid;
  grid-template-rows: 58% 42%;
  overflow: hidden;
}
.km-perm-top { overflow: hidden; }
.km-perm-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.km-perm-top:hover img { transform: scale(1.04); }
.km-perm-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-top: 2px solid #0c140b;
}
.km-perm-bottom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.km-perm-bottom img:first-child { border-right: 2px solid #0c140b; }
.km-perm-bottom img:hover { transform: scale(1.05); }

.km-perm-content {
  padding: clamp(2.5rem, 4vw, 4.5rem) clamp(1.75rem, 3.5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #0c140b;
  overflow-y: auto;
}

/* ── Timeline (muelles y templos) ── */
.km-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1.4rem 0 1.6rem;
}
.km-tl-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 1rem;
  padding: 0.9rem 0 0.9rem 1rem;
  border-left: 2px solid rgba(var(--brand-canopy-rgb), 0.28);
  position: relative;
  transition: border-color 220ms ease;
}
.km-tl-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--brand-canopy-rgb), 0.40);
  transition: background 220ms ease;
}
.km-tl-item:hover { border-color: var(--brand-canopy); }
.km-tl-item:hover::before { background: var(--brand-canopy); }

.km-tl-place {
  grid-column: 1;
  grid-row: 1;
  font-family: 'Montserrat', var(--font-body);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-canopy);
}
.km-tl-years {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-body);
  line-height: 1;
  font-size: 1.45rem;
  font-weight: 400;
  color: #ded7ba;
  text-align: right;
  white-space: nowrap;
}
.km-tl-years small {
  font-size: 0.55em;
  color: rgba(222, 215, 186, 0.45);
  margin-left: 0.2em;
}
.km-tl-detail {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--font-body);
  font-size: 0.77rem;
  color: rgba(222, 215, 186, 0.50);
  line-height: 1.55;
  margin-top: 0.22rem;
}

.km-perm-quote {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 400;
  font-style: italic;
  color: rgba(222, 215, 186, 0.48);
  margin: 0;
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.14);
  padding-top: 1.2rem;
}

/* ── Scroll reveal ── */
[data-km-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 680ms ease, transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--km-reveal-delay, 0ms);
}
[data-km-reveal].is-km-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-km-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Gallery row ── */
.km-gallery-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: clamp(200px, 32vw, 360px);
  gap: 3px;
  background: #0c140b;
}
.km-gallery-item {
  overflow: hidden;
  position: relative;
}
.km-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.km-gallery-item:hover img { transform: scale(1.07); }

/* ── Quote block ── */
.km-quote-block {
  background: linear-gradient(180deg, rgba(9,23,27,1) 0%, rgba(12, 20, 11,1) 100%);
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1.5rem, 8vw, 8rem);
  display: flex;
  justify-content: center;
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.10);
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.10);
}
.km-quote-inner {
  max-width: 700px;
  text-align: center;
  position: relative;
}
.km-quote-mark {
  font-family: var(--font-body);
  line-height: 0.75;
  font-size: clamp(6rem, 14vw, 10rem);
  font-weight: 300;
  color: rgba(var(--brand-canopy-rgb), 0.12);
  position: absolute;
  top: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}
.km-quote-text {
  font-family: var(--font-body);
  line-height: 1.52;
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  font-weight: 400;
  font-style: italic;
  color: rgba(222, 215, 186, 0.82);
  margin: 0 0 1.6rem;
  position: relative;
  z-index: 1;
  padding-top: 1.8rem;
}
.km-quote-cite {
  display: block;
  font-family: 'Montserrat', var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-canopy);
  font-style: normal;
}

/* ── S5b: Mitos y verdades — tarjetas que se voltean ── */
.km-myths {
  /* Fondo: la propia madera carbonizada del Shou Sugi Ban. El degradado que
     antes era el fondo ahora va encima como velo, con la opacidad justa para
     que la textura se intuya sin restarle legibilidad a las tarjetas. */
  background:
    linear-gradient(180deg, rgba(12, 20, 11, 0.86) 0%, rgba(9, 23, 27, 0.80) 55%, rgba(9, 23, 27, 0.99) 100%),
    url('../images/kineki/kineki-madera-textura-carbon.webp') center / cover no-repeat;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem);
}
.km-myths-header {
  max-width: 600px;
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
.km-myths-intro {
  margin-top: 0.85rem;
  color: rgba(222, 215, 186, 0.42);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
}
/* Carrusel: la pista lleva todas las tarjetas y se desplaza de página en
   página. --km-myth-cols define cuántas caben a la vista; el JS lee ese
   mismo valor para calcular las páginas, así el breakpoint vive solo aquí. */
.km-myths-carousel {
  --km-myth-cols: 3;
  --km-myth-gap: 1.2rem;
  /* Sin tope de ancho: llena la sección igual que .km-poss-grid */
  width: 100%;
}
.km-myths-viewport {
  overflow: hidden;
}
.km-myths-track {
  display: flex;
  gap: var(--km-myth-gap);
  transition: transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: translateX(calc(var(--km-myth-page, 0) * -1 * (100% + var(--km-myth-gap))));
}
.km-myths-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(1.4rem, 3vw, 2rem);
}
.km-myths-nav {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  background: rgba(12, 20, 11, 0.55);
  border: 1px solid rgba(200, 192, 126, 0.30);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 280ms ease, border-color 280ms ease, transform 280ms ease, opacity 280ms ease;
}
.km-myths-nav i {
  font-size: 0.95rem;
  color: var(--brand-canopy);
}
.km-myths-nav:hover {
  background: rgba(200, 192, 126, 0.18);
  border-color: var(--brand-canopy);
  transform: scale(1.08);
}
.km-myths-nav:disabled {
  opacity: 0.3;
  cursor: default;
  transform: none;
}
.km-myths-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  min-width: 6rem;
}
.km-myths-dots button {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(200, 192, 126, 0.35);
  transition: background 300ms ease, transform 300ms ease;
  flex-shrink: 0;
  cursor: pointer;
}
.km-myths-dots button.active {
  background: var(--brand-canopy);
  transform: scale(1.5);
}
.km-myths-counter {
  margin: 0;
  min-width: 6rem;
  text-align: center;
  font-family: 'Montserrat', var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: rgba(var(--brand-canopy-rgb), 0.7);
}
.km-myths-counter[hidden],
.km-myths-dots[hidden] { display: none; }
.km-myth-card {
  flex: 0 0 calc((100% - (var(--km-myth-cols) - 1) * var(--km-myth-gap)) / var(--km-myth-cols));
  perspective: 1400px;
  /* El JS mide el texto real y ajusta --km-myth-h a la tarjeta más alta del
     carrusel: así ninguna queda con medio recuadro vacío. El valor de aquí
     es solo el respaldo si el script no corre. */
  height: var(--km-myth-h, 250px);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.km-myth-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 620ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
}
.km-myth-card[aria-pressed="true"] .km-myth-card-inner {
  transform: rotateY(180deg);
}
.km-myth-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 1.1rem;
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.16);
  transition: border-color 220ms ease;
}
/* Estado momentáneo mientras el JS mide el alto real del texto */
.km-myths-carousel.is-measuring .km-myth-face {
  justify-content: flex-start;
  transition: none;
}
.km-myth-face--front {
  background: rgba(9, 23, 27, 0.92);
}
.km-myth-face--back {
  background: rgba(var(--brand-canopy-rgb), 0.12);
  transform: rotateY(180deg);
  border-color: rgba(var(--brand-canopy-rgb), 0.42);
}
.km-myth-card:hover .km-myth-face--front {
  border-color: rgba(var(--brand-canopy-rgb), 0.4);
}
.km-myth-card:focus-visible .km-myth-card-inner {
  outline: 2px solid var(--brand-canopy);
  outline-offset: 4px;
}
.km-myth-tag {
  align-self: flex-start;
  font-family: 'Montserrat', var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 2rem;
  margin-bottom: 0.75rem;
}
.km-myth-tag--myth {
  background: rgba(240, 234, 210, 0.10);
  color: rgba(222, 215, 186, 0.65);
}
.km-myth-tag--truth {
  background: var(--brand-canopy);
  color: var(--brand-ink);
}
.km-myth-text {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.4;
  font-size: clamp(0.92rem, 1.5vw, 1.08rem);
  font-weight: 400;
  color: rgba(222, 215, 186, 0.92);
  flex: 0 1 auto;
}
.km-myth-flip-hint {
  margin-top: 0.8rem;
  font-family: var(--font-body);
  font-size: 0.64rem;
  letter-spacing: 0.03em;
  color: rgba(var(--brand-canopy-rgb), 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .km-myth-card-inner,
  .km-myths-track { transition: none; }
}

/* ── S5c: Preguntas frecuentes — acordeón ──
   La respuesta se abre animando grid-template-rows de 0fr a 1fr: es la única
   forma de transicionar hacia una altura desconocida sin medirla en JS. El
   estado abierto se marca en .km-faq-item porque el botón vive dentro del
   <h4> y desde ahí no hay selector hermano hacia la respuesta. */
.km-faq {
  background: linear-gradient(180deg, rgba(9, 23, 27, 1) 0%, rgba(12, 20, 11, 1) 100%);
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem);
}
.km-faq-header {
  max-width: 640px;
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
.km-faq-intro {
  margin-top: 0.85rem;
  color: rgba(222, 215, 186, 0.55);
}
.km-faq-list {
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.16);
}
.km-faq-item {
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.16);
}
.km-faq-q {
  margin: 0;
  font: inherit;
}
.km-faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: rgba(222, 215, 186, 0.92);
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  line-height: 1.4;
  transition: color 220ms ease;
  -webkit-tap-highlight-color: transparent;
}
.km-faq-trigger:hover,
.km-faq-trigger[aria-expanded="true"] {
  color: var(--brand-canopy);
}
.km-faq-trigger:focus-visible {
  outline: 2px solid var(--brand-canopy);
  outline-offset: 3px;
}
.km-faq-icon {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: rgba(var(--brand-canopy-rgb), 0.65);
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1), color 220ms ease;
}
.km-faq-trigger[aria-expanded="true"] .km-faq-icon {
  transform: rotate(180deg);
  color: var(--brand-canopy);
}
.km-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.km-faq-a-inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s 380ms;
}
.km-faq-item.is-open .km-faq-a {
  grid-template-rows: 1fr;
}
.km-faq-item.is-open .km-faq-a-inner {
  visibility: visible;
  transition-delay: 0s;
}
.km-faq-a .km-body-text {
  margin: 0;
  padding: 0 0.25rem 1.4rem;
  font-size: clamp(0.88rem, 1.35vw, 1rem);
  color: rgba(222, 215, 186, 0.72);
}
@media (prefers-reduced-motion: reduce) {
  .km-faq-a, .km-faq-icon { transition: none; }
}

/* ── Possibilities ── */
.km-possibilities {
  background: #0c140b;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem);
}
.km-poss-header {
  max-width: 600px;
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
.km-poss-intro {
  margin-top: 0.85rem;
  color: rgba(222, 215, 186, 0.50);
}
.km-poss-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.km-poss-card {
  overflow: hidden;
  border-radius: 1.1rem;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.14);
  background: rgba(9, 23, 27, 0.80);
  transition: border-color 280ms ease, transform 280ms ease, box-shadow 280ms ease;
}
.km-poss-card:hover {
  border-color: rgba(var(--brand-canopy-rgb), 0.38);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.40);
}
.km-poss-img {
  height: clamp(150px, 20vw, 240px);
  overflow: hidden;
}
.km-poss-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.km-poss-card:hover .km-poss-img img { transform: scale(1.06); }
.km-poss-info {
  padding: 1.2rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.km-poss-num {
  font-family: 'Montserrat', var(--font-body);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--brand-canopy);
  opacity: 0.65;
}
.km-poss-label {
  font-family: 'Montserrat', var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #ded7ba;
  display: block;
}
.km-poss-desc {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(222, 215, 186, 0.48);
  line-height: 1.65;
  margin: 0.1rem 0 0;
}

/* ── CTA final ── */
.km-cta {
  padding: clamp(3.5rem, 7vw, 6rem) 2rem;
  padding-bottom: max(clamp(3.5rem, 7vw, 6rem), calc(clamp(3.5rem, 7vw, 6rem) + env(safe-area-inset-bottom, 0px)));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  background: linear-gradient(180deg, #0c140b 0%, #040d0f 100%);
  text-align: center;
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
}
.km-cta-label {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
  font-weight: 400;
  color: rgba(222, 215, 186, 0.55);
  margin: 0;
}
.km-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  align-items: center;
}
.km-cta-kineki-link {
  display: inline-flex;
  align-items: center;
  font-family: 'Montserrat', var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-canopy);
  text-decoration: none;
  border: 1.5px solid rgba(var(--brand-canopy-rgb), 0.38);
  border-radius: 100px;
  padding: 0.78rem 1.65rem;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.km-cta-kineki-link:hover {
  background: rgba(var(--brand-canopy-rgb), 0.10);
  border-color: rgba(var(--brand-canopy-rgb), 0.68);
  color: #ded7ba;
  box-shadow: 0 0 18px rgba(var(--brand-canopy-rgb), 0.16);
}

/* ════ RESPONSIVE ════ */

/* Tablet 768–1023 */
@media (max-width: 1023px) {
  .km-split,
  .km-split--rev { grid-template-columns: 1fr; min-height: auto; }

  .km-split-img { height: clamp(280px, 48vw, 400px); order: -1; }
  .km-split-img img { object-position: center 25%; }
  .km-split--rev .km-split-img { order: -1; }

  .km-split-text { padding: 2.25rem 1.75rem; }

  .km-impact-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
    padding: 3rem 1.75rem;
  }
  .km-impact-left { overflow: visible; }
  .km-impact-pct { font-size: clamp(5rem, 20vw, 9rem); }
  .km-impact-data { justify-content: center; }

  .km-permanence { grid-template-columns: 1fr; min-height: auto; }
  /* grid-template-rows NO se sobreescribe — hereda "58% 42%" del grid
     base, que ya reparte el alto del mosaico correctamente. Antes,
     .km-perm-top/.km-perm-bottom TAMBIÉN traían su propio height:60%/40%,
     que resuelve contra el alto de su PROPIA fila del grid (ya al 58%/42%)
     en vez del mosaico completo — 60% de 58% ≈ 35% real, dejando ~65%
     de la fila vacía. Se quitan esos height redundantes: el stretch por
     defecto de los grid items ya llena la fila completa sin necesidad
     de fijar un porcentaje aparte. */
  .km-perm-mosaic {
    height: clamp(320px, 60vw, 480px);
  }
  /* justify-content:center (base, desktop) se ve bien cuando el texto
     comparte fila con el mosaico alto — pero al apilar en tablet, el
     contenido tiene su propia fila auto-alta y centrarlo deja huecos
     vacíos arriba y abajo. flex-start lo pega arriba, como se espera
     en un layout apilado. */
  .km-perm-content { padding: 2.25rem 1.75rem; justify-content: flex-start; }
  .km-timeline { margin: 1.1rem 0 1.2rem; }

  .km-poss-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .km-poss-img { height: clamp(120px, 18vw, 200px); }

  .km-quote-block { padding: 3rem 2rem; }
  .km-quote-text { font-size: clamp(1.2rem, 3vw, 1.7rem); }

  .km-process-body { grid-template-columns: 1fr; gap: 1.75rem; }
  .km-process-img { height: clamp(240px, 45vw, 360px); order: -1; }

  .km-myths-carousel { --km-myth-cols: 2; --km-myth-gap: 1rem; }
}

/* Móvil <768 */
@media (max-width: 767px) {
  .km-hero { height: 100svh; min-height: min(480px, 100svh); }
  .km-hero-content { padding: 2rem 1.25rem; }
  .km-hero-name { font-size: clamp(3.5rem, 17vw, 6rem); letter-spacing: 0.22em; }
  .km-hero-tagline { font-size: clamp(1.1rem, 4vw, 1.5rem); max-width: 100%; }

  .km-fullimg { min-height: clamp(400px, 90vw, 580px); }
  .km-fullimg-content { padding: 1.75rem 1.25rem; }
  .km-chips { gap: 0.45rem; }
  .km-chip { font-size: 0.73rem; padding: 0.45rem 0.75rem; }

  .km-split-text { padding: 1.75rem 1.25rem; }
  .km-specs { gap: 0; }
  .km-spec--div { margin: 0 0.75rem; }
  .km-spec-val { font-size: 1.6rem; }

  .km-impact { min-height: clamp(420px, 100vw, 620px); }
  .km-impact-inner { padding: 2.5rem 1.25rem; gap: 1.2rem; }
  .km-impact-pct { font-size: clamp(4.5rem, 22vw, 7rem); }
  .km-impact-data { gap: 1rem; }

  .km-perm-mosaic { height: clamp(260px, 65vw, 380px); }
  .km-perm-content { padding: 2rem 1.25rem; }
  .km-tl-item { padding: 0.75rem 0 0.75rem 0.85rem; }
  .km-tl-years { font-size: 1.2rem; }
  .km-tl-detail { font-size: 0.72rem; }
  .km-perm-quote { font-size: 0.95rem; }
  .km-timeline { margin: 1rem 0 1.1rem; }

  .km-gallery-row {
    grid-template-columns: repeat(3, 72vw);
    height: clamp(180px, 56vw, 280px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 2px;
  }
  .km-gallery-item { scroll-snap-align: start; }

  .km-quote-block { padding: 3rem 1.5rem; }
  .km-quote-text { font-size: clamp(1.15rem, 5vw, 1.45rem); padding-top: 2.5rem; }
  .km-quote-mark { font-size: clamp(5rem, 16vw, 7rem); top: -1rem; }

  .km-possibilities { padding: 2.5rem 1.25rem; }
  .km-poss-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .km-poss-img { height: clamp(160px, 48vw, 220px); }

  .km-cta-btns { flex-direction: column; align-items: stretch; }
  .km-cta-btns .joytree-btn { text-align: center; justify-content: center; }
  .km-cta-kineki-link { text-align: center; justify-content: center; }

  .km-process { padding: 2.5rem 1.25rem; }
  .km-process-img { height: clamp(200px, 60vw, 300px); }
  .km-process-step { padding: 0.9rem 0; gap: 0.85rem; }

  .km-myths { padding: 2.5rem 1.25rem; }
  .km-faq { padding: 2.5rem 1.25rem; }
  .km-faq-trigger { padding: 1rem 0.15rem; gap: 0.9rem; }
  .km-myths-carousel { --km-myth-cols: 1; --km-myth-gap: 0.9rem; }
  .km-myths-controls { gap: 0.75rem; }
  .km-myths-counter, .km-myths-dots { min-width: 5rem; }
}

/* Landscape phones — pantalla corta (<500px de alto) */
@media (orientation: landscape) and (max-height: 500px) {
  .km-hero { height: 60svh; min-height: 260px; }
  .km-hero-content { padding: 1rem 1.5rem 1.5rem; gap: 0.2rem; }
  .km-hero-name { font-size: clamp(2.5rem, 8vh, 4rem); }
  .km-hero-tagline { font-size: clamp(0.9rem, 2vh, 1.15rem); }
  .km-hero-sub { font-size: 0.62rem; margin-bottom: 0.2rem; }
}

/* Teléfonos muy pequeños (<400px) — specs + datos de impacto */
@media (max-width: 400px) {
  /* Specs del módulo */
  .km-specs { flex-wrap: wrap; row-gap: 0.75rem; }
  .km-spec--div { display: none; }
  .km-spec { flex: none; width: 45%; }

  /* Datums del impacto 39%: columna en lugar de fila */
  .km-impact-data { flex-direction: column; gap: 0.85rem; }
  .km-impact-datum { min-width: unset; flex-direction: row; align-items: baseline; gap: 0.6rem; }
  .km-id-val { font-size: 1.6rem; }
  .km-id-lbl { font-size: 0.68rem; }

  /* Chips más compactos */
  .km-chip { font-size: 0.72rem; padding: 0.4rem 0.65rem; }

  /* Hero: más espacio abajo para el scroll cue */
  .km-hero-content { padding-bottom: 5rem; }

  .km-poss-grid { gap: 0.75rem; }
}

/* ════════════════════════════════════════════════════════════
   COUNTDOWN TREE ORB  ·  cd-*
   Flotante bottom-left, simétrico al WhatsApp FAB.
   El árbol SVG crece diariamente de semilla (may) a árbol pleno (sep 1).
   ════════════════════════════════════════════════════════════ */

.cd-orb {
  position: fixed;
  left: 1.5rem;
  bottom: 5.5rem;   /* mismo nivel que el WhatsApp FAB */
  z-index: 1034;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  pointer-events: none; /* el contenedor (252px) no bloquea — solo los hijos activos */
  transition: opacity 280ms ease;
}

/* ── Wrapper botón + anillos ── */
.cd-btn-wrap {
  position: relative;
  width: 3.25rem;
  height: 3.25rem;
}

/* ── Anillos de pulso (organismo vivo) ── */
.cd-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--brand-canopy-rgb), 0.46);
  animation: cdPulse 3.8s ease-out infinite;
  pointer-events: none;
}
.cd-ring-2 { animation-delay: 1.9s; }

@keyframes cdPulse {
  0%   { transform: scale(1);   opacity: 0.68; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ── Botón circular ── */
.cd-btn {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(12, 20, 11, 0.91);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.38);
  cursor: pointer;
  pointer-events: auto; /* restaurar sobre el contenedor none */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 300ms ease, box-shadow 300ms ease, transform 220ms ease;
  box-shadow:
    0 4px 22px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(var(--brand-canopy-rgb), 0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0;
  outline: none;
  overflow: visible;
}
.cd-btn:hover {
  border-color: rgba(var(--brand-canopy-rgb), 0.78);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.36),
    0 0 24px rgba(var(--brand-canopy-rgb), 0.20),
    inset 0 1px 0 rgba(var(--brand-canopy-rgb), 0.14);
  transform: translateY(-0.25rem) scale(1.06);
}
.cd-btn:focus-visible {
  outline: 2px solid var(--brand-canopy);
  outline-offset: 3px;
}

/* ── SVG árbol ── */
.cd-tree-svg {
  width: 46px;
  height: 46px;
  overflow: visible;
}

/* El icono es un CALCO del original (ver scripts/trace-icon.js): un solo
   grupo de contornos rellenos, sin trazos ni piezas separadas. El aro queda
   hueco por fill-rule: evenodd, que ya viene puesto en el marcado. */
.cd-el-art {
  fill: rgba(var(--brand-canopy-rgb), 0.92);
  stroke: none;
}

/* Días pill */
.cd-days-pill {
  position: absolute;
  bottom: -4px;
  right: -4px;
  min-width: 24px;
  height: 18px;
  background: var(--brand-canopy);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 700;
  color: rgba(12, 20, 11, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  letter-spacing: 0.01em;
  border: 2px solid rgba(12, 20, 11, 0.91);
}

/* ── Panel flotante ── */
.cd-panel {
  background: rgba(12, 20, 11, 0.93);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.26);
  border-radius: 1.1rem;
  padding: 1.1rem 1.25rem 0.95rem;
  width: 252px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.58),
    inset 0 0 0 0.5px rgba(var(--brand-canopy-rgb), 0.06);
  /* Estado cerrado */
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  transition:
    opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: bottom left;
  will-change: opacity, transform;
}
.cd-orb.is-open .cd-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Kicker */
.cd-panel-kicker {
  font-family: var(--font-body);
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.78);
  margin: 0 0 0.72rem;
}

/* Grid de dígitos */
.cd-grid {
  display: flex;
  align-items: flex-end;
  gap: 0;
}
.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.cd-num {
  display: block;
  font-family: var(--font-body);
  line-height: 1;
  font-size: 2.3rem;
  font-weight: 300;
  color: rgba(222, 215, 186, 0.96);
  min-width: 2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cd-lbl {
  display: block;
  font-family: var(--font-body);
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.56);
  margin-top: 0.18rem;
}
.cd-sep {
  font-family: var(--font-body);
  line-height: 1;
  font-size: 1.6rem;
  font-weight: 300;
  color: rgba(var(--brand-canopy-rgb), 0.30);
  align-self: flex-start;
  padding-top: 0.22rem;
  flex: none;
  width: 12px;
  text-align: center;
}

/* Fecha objetivo */
.cd-date {
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0.10em;
  color: rgba(222, 215, 186, 0.46);
  margin: 0.58rem 0 0.70rem;
  text-align: center;
}

/* Barra de progreso */
.cd-bar-track {
  height: 2px;
  background: rgba(var(--brand-canopy-rgb), 0.14);
  border-radius: 100px;
  overflow: hidden;
}
.cd-bar-fill {
  height: 100%;
  background: linear-gradient(90deg,
    rgba(var(--brand-canopy-rgb), 0.36),
    var(--brand-canopy));
  border-radius: 100px;
  width: 0%;
  transition: width 1.2s ease;
}
.cd-prog-label {
  font-family: var(--font-body);
  font-size: 0.53rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.38);
  margin: 0.42rem 0 0;
  text-align: right;
}

/* Flash al cambiar dígito */
@keyframes cdFlash {
  0%   { opacity: 1;   transform: none; }
  40%  { opacity: 0.4; transform: translateY(-2px); }
  100% { opacity: 1;   transform: none; }
}
.cd-flash { animation: cdFlash 0.24s ease; }

/* ── Responsive ── */
@media (max-width: 575.98px) {
  .cd-orb   { left: 1rem; bottom: 5.5rem; }
  .cd-panel { width: 232px; }
  .cd-num   { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-ring      { animation: none; opacity: 0; }
  /* La hoja aparece igual, pero sin el rebote de escala */
  .cd-flash     { animation: none; }
}

/* ══════════════════════════════════════════════
   MUSIC FAB  ·  mf-*
══════════════════════════════════════════════ */
.music-fab {
  position: fixed;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 1034;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--button-radius);
  background: rgba(var(--brand-ink-rgb), 0.86);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.34);
  color: var(--hero-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.26);
  transition: transform 240ms ease, background-color 220ms ease, border-color 220ms ease, opacity 280ms ease;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  touch-action: manipulation; /* elimina el 300ms delay en móvil */
  -webkit-tap-highlight-color: transparent;
}
.music-fab:hover,
.music-fab:focus-visible {
  background: rgba(var(--brand-canopy-rgb), 0.16);
  border-color: rgba(var(--brand-canopy-rgb), 0.72);
  transform: translateY(-0.25rem) scale(1.06);
}

/* ── Icono nota (estado pausa) ── */
.music-fab-icon {
  width: 22px;
  height: 22px;
  pointer-events: none;
}

/* ── Barras de onda (estado reproduciendo) ── */
.music-fab-bars {
  display: none;
  align-items: flex-end;
  gap: 4px;
  height: 22px;
  pointer-events: none;
}
.music-fab-bar {
  display: block;
  width: 3.5px;
  border-radius: 2px;
  background: currentColor;
  animation: musicBar 1.1s ease-in-out infinite;
}
.music-fab-bar:nth-child(1) { height: 11px; animation-delay: 0s; }
.music-fab-bar:nth-child(2) { height: 22px; animation-delay: 0.18s; }
.music-fab-bar:nth-child(3) { height: 7px;  animation-delay: 0.36s; }

@keyframes musicBar {
  0%, 100% { transform: scaleY(0.35); }
  50%       { transform: scaleY(1); }
}

/* ── Estado reproduciendo ── */
.music-fab[aria-pressed="true"] {
  border-color: rgba(var(--brand-canopy-rgb), 0.60);
  box-shadow: 0 0 0 1px rgba(var(--brand-canopy-rgb), 0.16),
              0 0 20px rgba(var(--brand-canopy-rgb), 0.12);
}
.music-fab[aria-pressed="true"] .music-fab-icon  { display: none; }
.music-fab[aria-pressed="true"] .music-fab-bars  { display: flex; }

/* Anillo de pulso activo */
.music-fab[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--brand-canopy-rgb), 0.42);
  animation: musicRing 3.4s ease-out infinite;
  pointer-events: none;
}
@keyframes musicRing {
  0%   { transform: scale(1);   opacity: 0.72; }
  100% { transform: scale(2.2); opacity: 0; }
}

@media (max-width: 575.98px) {
  .music-fab { left: 1rem; bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .music-fab-bar                        { animation: none; transform: scaleY(0.75); }
  .music-fab[aria-pressed="true"]::after { animation: none; opacity: 0; }
}

/* ══════════════════════════════════════════════════════════
   CATALOG MODAL — Catálogo de Rituales · PDF-ready
══════════════════════════════════════════════════════════ */

.catalog-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.catalog-modal.is-open { display: flex; }

.catalog-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 9, 11, 0.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.catalog-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 980px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border-radius: 1.6rem;
  background: #0c140b;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.16);
  box-shadow: 0 48px 120px rgba(0, 0, 0, 0.72);
  overflow: hidden;
  animation: catSlideIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes catSlideIn {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

body.is-catalog-open { overflow: hidden; }

/* ── Header sticky ── */
.catalog-hdr {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.5rem;
  background: rgba(4, 12, 14, 0.96);
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.13);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.catalog-hdr-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.catalog-hdr-logo {
  height: 2rem;
  width: auto;
}

.catalog-hdr-label {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: rgba(var(--brand-sand-rgb), 0.58);
  letter-spacing: 0.03em;
}

.catalog-hdr-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.catalog-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.52rem 1.1rem;
  border-radius: var(--button-radius);
  background: var(--hero-accent);
  color: var(--brand-ink);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  border: none;
  cursor: pointer;
  transition: opacity 180ms ease, transform 180ms ease;
  white-space: nowrap;
}
.catalog-dl-btn:hover { opacity: 0.86; transform: translateY(-1px); }

.catalog-close-btn {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.16);
  background: rgba(var(--brand-ink-rgb), 0.5);
  color: rgba(var(--brand-sand-rgb), 0.52);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 200ms, color 200ms;
}
.catalog-close-btn:hover {
  background: rgba(var(--brand-canopy-rgb), 0.14);
  color: var(--brand-sand);
}

/* ── Scrollable body ── */
.catalog-body {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ── Shared section tokens ── */
.cat-kicker {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hero-accent);
  margin-bottom: 0.6rem;
  display: block;
}

.cat-h2 {
  font-family: var(--font-serif);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  color: var(--hero-text);
  margin-bottom: 0.95rem;
}

.cat-p {
  color: rgba(var(--brand-sand-rgb), 0.68);
  font-size: 0.92rem;
  line-height: 1.72;
}

.cat-list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.cat-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(var(--brand-sand-rgb), 0.74);
  font-size: 0.88rem;
}
.cat-list li i {
  color: var(--hero-accent);
  width: 1rem;
  text-align: center;
  flex-shrink: 0;
}

.cat-section {
  padding: clamp(2.4rem, 5vw, 3.8rem) clamp(1.5rem, 4vw, 3rem);
}

/* ── 1. Cover ── */
.cat-cover {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.cat-cover-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.cat-cover-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(12, 20, 11, 0.38) 0%,
    rgba(12, 20, 11, 0.7)  55%,
    rgba(12, 20, 11, 0.96) 100%
  );
}

.cat-cover-inner {
  position: relative;
  z-index: 1;
  padding: 2.5rem clamp(1.5rem, 4vw, 3rem);
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.cat-cover-logo {
  height: 5rem;
  width: auto;
  flex-shrink: 0;
}

.cat-cover-copy { text-align: right; }

.cat-cover-kicker {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hero-accent);
  margin-bottom: 0.5rem;
}

.cat-cover-h1 {
  font-family: var(--font-serif);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  color: var(--hero-text);
  margin-bottom: 0.7rem;
}

.cat-cover-tagline {
  font-size: 0.87rem;
  color: rgba(var(--brand-sand-rgb), 0.64);
  line-height: 1.65;
}

/* ── 2. Intro ── */
.cat-intro {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3.5rem;
  align-items: center;
  background: linear-gradient(180deg, rgba(var(--brand-ink-soft-rgb), 0.55), transparent);
}

.cat-stats {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.cat-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.cat-stat-n {
  font-family: var(--font-body);
  line-height: 1;
  font-size: 2.8rem;
  color: var(--hero-accent);
  font-weight: 700;
}
.cat-stat-n small { font-size: 1.1rem; }

.cat-stat-l {
  font-size: 0.74rem;
  color: rgba(var(--brand-sand-rgb), 0.5);
  line-height: 1.45;
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
}

/* ── 3. Experiences ── *

/* ── 3. Galería de amenidades — dos por conexión ── */
.cat-amen-gal { background: rgba(var(--brand-ink-soft-rgb), 0.35); }
.cat-amen-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}
.cat-amen-photo {
  margin: 0;
  border-radius: 0.95rem;
  overflow: hidden;
  background: rgba(var(--brand-ink-rgb), 0.55);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.1);
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
.cat-amen-photo:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--brand-canopy-rgb), 0.28);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.36);
}
.cat-amen-photo img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
  transition: transform 560ms ease;
}
.cat-amen-photo:hover img { transform: scale(1.06); }
.cat-amen-photo figcaption {
  padding: 0.7rem 0.8rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.cat-amen-photo-tag {
  font-family: 'Montserrat', var(--font-body);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-accent);
}
.cat-amen-photo-name {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.3;
  color: rgba(222, 215, 186, 0.92);
}

/* ── 3b. Listado de amenidades — las cuatro conexiones del carrusel ── */
.cat-amen { background: rgba(var(--brand-ink-rgb), 0.42); }
.cat-amen-head { margin-bottom: 1.6rem; }
.cat-amen-intro { max-width: 46ch; }
.cat-amen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.4rem;
}
.cat-amen-cat {
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
  border-radius: 0.95rem;
  background: rgba(var(--brand-ink-rgb), 0.55);
  padding: 1rem 1.15rem 1.1rem;
}
.cat-amen-h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.16);
  font-family: 'Montserrat', var(--font-body);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-accent);
}
.cat-amen-count {
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(222, 215, 186, 0.42);
}
.cat-amen-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}
.cat-amen-list li {
  position: relative;
  padding-left: 0.9rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(222, 215, 186, 0.78);
}
.cat-amen-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--brand-canopy-rgb), 0.55);
}
@media (max-width: 900px) {
  .cat-amen-photos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .cat-amen-grid { grid-template-columns: 1fr; }
}

/* ── 5. Duo (location + invest) ── */
.cat-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  background: rgba(var(--brand-shadow-rgb), 0.48);
}

.cat-duo-card {
  padding: 2rem;
  border-radius: 1.4rem;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
  background: rgba(var(--brand-ink-soft-rgb), 0.55);
}
.cat-duo-card .cat-h2 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }

.cat-invest-card {
  border-color: rgba(var(--brand-canopy-rgb), 0.24);
  background: rgba(var(--brand-canopy-rgb), 0.06);
}

/* ── 6. CTA / Contact ── */
.cat-cta {
  text-align: center;
  background: linear-gradient(180deg, rgba(var(--brand-ink-soft-rgb), 0.4), rgba(4, 12, 14, 0.9));
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
}

.cat-cta-inner { max-width: 560px; margin: 0 auto; }

.cat-cta-logo {
  height: 3.4rem;
  width: auto;
  margin-bottom: 1.8rem;
}

.cat-cta .cat-h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  margin-bottom: 0.75rem;
}

.cat-cta .cat-p { margin-bottom: 1.8rem; }

.cat-cta-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.cat-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.05rem;
  border-radius: 3rem;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.24);
  background: rgba(var(--brand-canopy-rgb), 0.07);
  color: var(--hero-text);
  font-size: 0.83rem;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease;
}
.cat-cta-link:hover {
  background: rgba(var(--brand-canopy-rgb), 0.15);
  border-color: rgba(var(--brand-canopy-rgb), 0.38);
  color: var(--hero-text);
}
.cat-cta-link i { color: var(--hero-accent); }

.cat-legal {
  font-size: 0.7rem;
  color: rgba(var(--brand-sand-rgb), 0.32);
  letter-spacing: 0.05em;
}

/* ── Responsive ── */
@media (max-width: 575.98px) {
  .catalog-modal { padding: 0; }
  .catalog-modal-panel { max-height: 100svh; border-radius: 0; }
  .catalog-hdr-label { display: none; }
  .catalog-dl-btn span { display: none; }
  .catalog-dl-btn { padding: 0.52rem 0.75rem; }
  .cat-cover { min-height: 320px; }
  .cat-cover-inner { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .cat-cover-copy { text-align: left; }
  .cat-cover-logo { height: 3rem; }
  .cat-intro { grid-template-columns: 1fr; gap: 2rem; }
  .cat-stats { flex-direction: row; justify-content: space-between; }
  .cat-stat { align-items: flex-start; text-align: left; }
  .cat-stat-n { font-size: 2.2rem; }
  .cat-duo { grid-template-columns: 1fr; }
  .cat-duo-card { padding: 1.5rem; }
  .cat-cta-contacts { flex-direction: column; align-items: center; }
}

@media (min-width: 576px) and (max-width: 767px) {
  .catalog-modal { padding: 0.5rem; }
  .catalog-modal-panel { max-height: 98svh; border-radius: 1rem; }
  .cat-duo { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 1023px) {
}

/* ════════════════════════════════════════════════════
   CATALOG — Tema claro (light mode overrides)
════════════════════════════════════════════════════ */
html[data-theme="light"] .catalog-modal-overlay {
  background: rgba(14, 34, 37, 0.56);
}

html[data-theme="light"] .catalog-modal-panel {
  background: #f5f1e8;
  border-color: rgba(var(--brand-canopy-rgb), 0.18);
  box-shadow: 0 32px 96px rgba(14, 34, 37, 0.26);
}

html[data-theme="light"] .catalog-hdr {
  background: rgba(245, 241, 232, 0.97);
  border-bottom-color: rgba(14, 34, 37, 0.10);
}

html[data-theme="light"] .catalog-hdr-label {
  color: rgba(14, 34, 37, 0.46);
}

html[data-theme="light"] .catalog-close-btn {
  border-color: rgba(14, 34, 37, 0.18);
  background: rgba(14, 34, 37, 0.06);
  color: rgba(14, 34, 37, 0.50);
}

html[data-theme="light"] .catalog-close-btn:hover {
  background: rgba(var(--brand-canopy-rgb), 0.12);
  color: #0e2225;
}

/* Tokens de texto compartidos */
html[data-theme="light"] .cat-h2  { color: #0e2225; }
html[data-theme="light"] .cat-p   { color: rgba(14, 34, 37, 0.68); }
html[data-theme="light"] .cat-list li { color: rgba(14, 34, 37, 0.72); }
html[data-theme="light"] .cat-stat-l  { color: rgba(14, 34, 37, 0.50); }

/* Intro — fondo con toque verde muy sutil */
html[data-theme="light"] .cat-intro {
  background: linear-gradient(180deg, rgba(var(--brand-canopy-rgb), 0.05), transparent);
}

/* Rituales *

/* Duo (Ubicación + Inversión) */
html[data-theme="light"] .cat-duo {
  background: rgba(14, 34, 37, 0.04);
}

html[data-theme="light"] .cat-duo-card {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(14, 34, 37, 0.10);
}

html[data-theme="light"] .cat-invest-card {
  background: rgba(var(--brand-canopy-rgb), 0.07);
  border-color: rgba(var(--brand-canopy-rgb), 0.22);
}

/* CTA — mantenemos oscuro para contraste de cierre */
html[data-theme="light"] .cat-cta {
  background: linear-gradient(180deg, #132c30 0%, #0c140b 100%);
  border-top-color: rgba(var(--brand-canopy-rgb), 0.18);
}

/* Restaurar colores claros en CTA ya que su fondo sigue oscuro */
html[data-theme="light"] .cat-cta .cat-h2 { color: var(--brand-sand); }
html[data-theme="light"] .cat-cta .cat-p  { color: rgba(var(--brand-sand-rgb), 0.68); }

/* ════════════════════════════════════════════════════
   MODAL DE ORIENTACIÓN DE IMPRESIÓN
════════════════════════════════════════════════════ */
.print-opts {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 20, 11, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, visibility 260ms ease;
}

.print-opts.is-open {
  opacity: 1;
  visibility: visible;
}

.print-opts-box {
  position: relative;
  background: linear-gradient(
    152deg,
    rgba(var(--brand-canopy-rgb), 0.10) 0%,
    var(--page-bg-mid)                  55%,
    rgba(12, 20, 11, 0.95)               100%
  );
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.26);
  border-radius: 1.6rem;
  padding: 2.4rem 2.4rem 2rem;
  text-align: center;
  box-shadow:
    0 48px 96px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(var(--brand-canopy-rgb), 0.06) inset;
  max-width: 360px;
  width: 88vw;
  /* Animación de entrada: escala + desplazamiento */
  transform: scale(0.92) translateY(12px);
  transition: transform 320ms cubic-bezier(0.34, 1.42, 0.64, 1);
}

.print-opts.is-open .print-opts-box {
  transform: scale(1) translateY(0);
}

/* Línea de acento superior */
.print-opts-box::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 48%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--brand-canopy-rgb), 0.7),
    transparent
  );
  border-radius: 0 0 50% 50%;
}

/* Ícono de impresora centrado arriba */
.print-opts-lead {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 1.3rem;
  background: rgba(var(--brand-canopy-rgb), 0.1);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.22);
  border-radius: 0.85rem;
  color: var(--brand-canopy);
}

.print-opts-lead svg {
  width: 20px;
  height: 20px;
}

.print-opts-title {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(var(--brand-sand-rgb), 0.42);
  margin: 0 0 1rem;
}

/* Línea divisora degradada */
.print-opts-rule {
  width: 2.8rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--brand-canopy-rgb), 0.45),
    transparent
  );
  margin: 0 auto 1.8rem;
}

.print-opts-choices {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

/* Botones: tamaño fijo idéntico para simetría perfecta */
.print-opts-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 128px;
  height: 140px;
  background: rgba(var(--brand-canopy-rgb), 0.06);
  border: 1.5px solid rgba(var(--brand-canopy-rgb), 0.15);
  border-radius: 1.1rem;
  color: var(--brand-sand);
  cursor: pointer;
  transition:
    background   220ms ease,
    border-color 220ms ease,
    box-shadow   220ms ease,
    transform    240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.print-opts-btn:hover {
  background:   rgba(var(--brand-canopy-rgb), 0.13);
  border-color: rgba(var(--brand-canopy-rgb), 0.58);
  transform:    translateY(-5px);
  box-shadow:
    0 12px 32px rgba(var(--brand-canopy-rgb), 0.2),
    0 0 0 1px rgba(var(--brand-canopy-rgb), 0.08) inset;
}

.print-opts-btn:focus-visible {
  outline: 2px solid var(--brand-canopy);
  outline-offset: 3px;
}

/* Iconos en viewBox 48×48 unificado — mismo peso visual para vertical y horizontal */
.print-opts-icon {
  width: 46px;
  height: 46px;
  color: var(--brand-canopy);
}

.print-opts-btn span {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(var(--brand-sand-rgb), 0.75);
}

.print-opts-cancel {
  background: none;
  border: none;
  color: rgba(var(--brand-sand-rgb), 0.27);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0.5rem 1.2rem;
  transition: color 180ms ease;
}

.print-opts-cancel:hover {
  color: rgba(var(--brand-sand-rgb), 0.52);
}

/* ════════════════════════════════════════════════════
   PÁGINA — fallback landscape; JS inyecta la orientación
   correcta según lo que el usuario elige en el modal.
   El catálogo PDF usa su propio override en catalog.js.
════════════════════════════════════════════════════ */
@page {
  size: A4 portrait;
  margin: 1.5cm 1.2cm;
}

/* ════════════════════════════════════════════════════
   PRINT / PDF — dos rutas según estado del catálogo
════════════════════════════════════════════════════ */
@media print {

  /* ── Forzar fondos y colores tal como se ven en pantalla ── */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ══ LANDING PAGE (Ctrl+P sin catálogo abierto) ═══════════════════ */

  /* 0. Ocultar el modal de orientación (siempre, en ambas rutas) */
  .print-opts { display: none !important; }

  /* 1. Ocultar chrome de UI, lightboxes y elementos decorativos no imprimibles */
  body:not(.is-catalog-open) .skip-link,
  body:not(.is-catalog-open) #site-nav,
  body:not(.is-catalog-open) .cd-orb,
  body:not(.is-catalog-open) .music-fab,
  body:not(.is-catalog-open) .whatsapp-fab,
  body:not(.is-catalog-open) .back-to-top,
  body:not(.is-catalog-open) #kinekiModal,
  body:not(.is-catalog-open) #catalogModal,
  body:not(.is-catalog-open) .gallery-lightbox,
  body:not(.is-catalog-open) .ritual-gallery,
  body:not(.is-catalog-open) .amezcua-strip,
  body:not(.is-catalog-open) .explore-entrance-scroll { display: none !important; }

  /* 1b. Cancelar TODAS las animaciones CSS al estado base (sin fill-mode)
         Los resets explícitos de abajo se encargan de la visibilidad */
  body:not(.is-catalog-open) *,
  body:not(.is-catalog-open) *::before,
  body:not(.is-catalog-open) *::after {
    animation:         none !important;
    transition-duration: 0s !important;
    transition-delay:  0s   !important;
  }

  /* 2. Quitar overflow:clip para que el contenido no sea recortado */
  body:not(.is-catalog-open) .story-section { overflow: visible !important; }

  /* 3. Resetear sistema de scroll-reveal ([data-reveal]) al estado final visible */
  body:not(.is-catalog-open) [data-reveal] {
    opacity:   1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /* 4. Sección Explore: limpiar estados de animación de entrada */
  body:not(.is-catalog-open) .explore-entrance--anim .explore-entrance-rule,
  body:not(.is-catalog-open) .explore-entrance--anim .explore-entrance-kicker,
  body:not(.is-catalog-open) .explore-entrance--anim .explore-entrance-headline,
  body:not(.is-catalog-open) .explore-entrance--anim .explore-entrance-sub,
  body:not(.is-catalog-open) .explore-entrance--anim .explore-entrance-badge {
    opacity:   1 !important;
    transform: none !important;
    width:     auto !important;
  }

  /* 5. Sección Inversión: banner pv (pv-rule, pv-word-wrap, pv-detail-strip) */
  body:not(.is-catalog-open) .pv-word-wrap,
  body:not(.is-catalog-open) .pv-tagline,
  body:not(.is-catalog-open) .pv-detail-strip {
    opacity:   1        !important;
    transform: none     !important;
    overflow:  visible  !important;
  }
  body:not(.is-catalog-open) .pv-rule { transform: scaleX(1) !important; }

  /* 6. Sección Amenidades: carrusel → lista imprimible (11 de 12 slides eran invisibles) */
  body:not(.is-catalog-open) .amenity-carousel-prev,
  body:not(.is-catalog-open) .amenity-carousel-next,
  body:not(.is-catalog-open) .amenity-indicators,
  body:not(.is-catalog-open) .amenity-slide-overlay { display: none !important; }

  body:not(.is-catalog-open) .amenity-carousel-frame {
    position: static   !important;
    height:   auto     !important;
    overflow: visible  !important;
  }
  body:not(.is-catalog-open) .amenity-carousel-wrap { overflow: visible !important; }
  body:not(.is-catalog-open) .amenity-carousel,
  body:not(.is-catalog-open) .carousel-inner {
    overflow: visible !important;
    height:   auto    !important;
  }
  /* Todos los slides visibles, apilados verticalmente */
  body:not(.is-catalog-open) .amenity-carousel .carousel-item {
    display:       block    !important;
    position:      static   !important;
    opacity:       1        !important;
    transform:     none     !important;
    pointer-events: auto    !important;
    width:         100%     !important;
    height:        200px    !important;
    margin-bottom: 0.75rem  !important;
    break-inside:  avoid    !important;
    border-radius: 0.8rem   !important;
    overflow:      hidden   !important;
  }
  body:not(.is-catalog-open) .amenity-slide {
    height:   200px   !important;
    position: relative !important;
  }
  body:not(.is-catalog-open) .amenity-slide-img {
    position:  absolute !important;
    inset:     0        !important;
    width:     100%     !important;
    height:    100%     !important;
    object-fit: cover   !important;
    opacity:    1       !important;
    transform:  none    !important;
  }
  body:not(.is-catalog-open) .amenity-slide-content {
    position:   absolute    !important;
    bottom:     0           !important;
    left:       0           !important;
    right:      0           !important;
    top:        auto        !important;
    opacity:    1           !important;
    transform:  none        !important;
    padding:    0.8rem 1rem !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.75)) !important;
  }
  body:not(.is-catalog-open) .amenity-card-copy {
    opacity:   1 !important;
    transform: none !important;
  }

  /* 7. Cada sección empieza en página nueva */
  body:not(.is-catalog-open) .story-section {
    break-before:      page;
    page-break-before: always;
  }
  body:not(.is-catalog-open) .hero-section {
    break-after:      page;
    page-break-after: always;
  }

  /* ══ HORIZONTAL: cada sección = captura de pantalla de la web ═══════════════════
     Sin zoom: las secciones se renderizan al ancho real del viewport de impresión,
     que es lo más cercano posible a cómo se ve en pantalla.
     max-height + overflow:hidden → efecto "screenshot", sin cortes a la mitad.    */

  body.jt-print-landscape .hero-section,
  body.jt-print-landscape .story-section {
    max-height: 100vh !important;
    overflow:   hidden !important;
  }

  /* ── Carrusel de amenidades en landscape: solo slide activo (igual que en web) ── */

  /* Restaurar frame al comportamiento de pantalla */
  body.jt-print-landscape .amenity-carousel-frame {
    position: relative                   !important;
    height:   clamp(400px, 60vh, 650px) !important;
    overflow: hidden                     !important;
  }
  body.jt-print-landscape .amenity-carousel-wrap { overflow: hidden !important; }

  /* Carrusel ocupa todo el ancho del frame (sin cartas laterales que asomen) */
  body.jt-print-landscape .amenity-carousel {
    width:    100%   !important;
    overflow: hidden !important;
    height:   100%   !important;
  }
  body.jt-print-landscape .carousel-inner {
    overflow: hidden !important;
    height:   100%   !important;
  }

  /* Revertir la lista del modo portrait — en landscape todos ocultos salvo el activo */
  body.jt-print-landscape .amenity-carousel .carousel-item {
    position:      absolute  !important;
    width:         100%      !important;
    height:        100%      !important;
    opacity:       0         !important;
    transform:     scale(0.78) !important;
    margin-bottom: 0         !important;
    break-inside:  auto      !important;
    border-radius: 1.5rem    !important;
  }
  body.jt-print-landscape .amenity-carousel .carousel-item.is-active {
    opacity:   1    !important;
    transform: none !important;
  }

  /* Slide activo: restaurar posicionamiento absoluto dentro del item */
  body.jt-print-landscape .amenity-slide {
    height:   100%    !important;
    position: absolute !important;
    inset:    0        !important;
  }

  /* 8. Evitar cortes a mitad de tarjetas y bloques de contenido */
  body:not(.is-catalog-open) .unified-card,
  body:not(.is-catalog-open) .payment-path,
  body:not(.is-catalog-open) .testimonial-card,
  body:not(.is-catalog-open) .amenity-card,
  body:not(.is-catalog-open) .insight-card,
  body:not(.is-catalog-open) .explore-card,
  body:not(.is-catalog-open) .contact-block {
    break-inside:      avoid;
    page-break-inside: avoid;
  }

  /* 9. Mantener título con el contenido que le sigue */
  body:not(.is-catalog-open) .section-heading,
  body:not(.is-catalog-open) .section-kicker,
  body:not(.is-catalog-open) h2,
  body:not(.is-catalog-open) h3 {
    break-after:      avoid;
    page-break-after: avoid;
  }

  /* ── Catálogo abierto: ocultar todo excepto el modal ── */
  body.is-catalog-open,
  body.is-catalog-open html { overflow: visible !important; }
  body.is-catalog-open > *:not(#catalogModal) { display: none !important; }

  body.is-catalog-open #catalogModal {
    display:  block !important;
    position: static !important;
    padding:  0 !important;
  }

  body.is-catalog-open .catalog-modal-overlay,
  body.is-catalog-open .catalog-hdr { display: none !important; }

  body.is-catalog-open .catalog-modal-panel {
    width:         100% !important;
    max-width:     100% !important;
    max-height:    none !important;
    height:        auto !important;
    overflow:      visible !important;
    border-radius: 0 !important;
    border:        none !important;
    box-shadow:    none !important;
    animation:     none !important;
    background:    #0c140b !important;
  }

  body.is-catalog-open .catalog-body { overflow: visible !important; height: auto !important; }

  /* ── Cada sección = 1 página A4 ── */
  body.is-catalog-open .cat-cover {
    min-height: 100vh;
    page-break-after: always;
    break-after: page;
  }

  body.is-catalog-open .cat-intro,
  body.is-catalog-open .cat-amen-gal,
  body.is-catalog-open .cat-amen,
  body.is-catalog-open .cat-duo,
  body.is-catalog-open .cat-cta {
    min-height:       100vh;
    box-sizing:       border-box;
    padding:          2.2cm 2.5cm !important;
    page-break-after: always;
    break-after:      page;
  }

  /* ── Layouts de impresión para A4 portrait ── */

  /* Intro: texto izquierda + stats derecha */
  body.is-catalog-open .cat-intro {
    display:               grid !important;
    grid-template-columns: 1fr 200px !important;
    gap:                   3rem !important;
    align-items:           center !important;
  }
  body.is-catalog-open .cat-stats {
    flex-direction: column !important;
    gap:            2rem !important;
  }
  body.is-catalog-open .cat-stat   { align-items: flex-end !important; text-align: right !important; }
  body.is-catalog-open .cat-stat-n { font-size: 3rem !important; }

  /* Amenidades · galería: 2 columnas x 4 filas — cada fila, una conexión */
  body.is-catalog-open .cat-amen-gal,
  body.is-catalog-open .cat-amen {
    display:         flex !important;
    flex-direction:  column !important;
    justify-content: flex-start !important;
  }
  body.is-catalog-open .cat-amen-photos    { grid-template-columns: repeat(2, 1fr) !important; gap: 0.7rem !important; }
  body.is-catalog-open .cat-amen-photo img { height: 118px !important; }
  body.is-catalog-open .cat-amen-photo figcaption { padding: 0.55rem 0.65rem 0.65rem !important; }
  body.is-catalog-open .cat-amen-photo,
  body.is-catalog-open .cat-amen-cat {
    break-inside:      avoid !important;
    page-break-inside: avoid !important;
  }

  /* Amenidades · listado: cuatro bloques en 2 x 2, en una sola hoja */
  body.is-catalog-open .cat-amen-head    { margin-bottom: 1rem !important; }
  body.is-catalog-open .cat-amen-grid    { grid-template-columns: repeat(2, 1fr) !important; gap: 0.7rem 0.9rem !important; }
  body.is-catalog-open .cat-amen-cat     { padding: 0.75rem 0.85rem !important; }
  body.is-catalog-open .cat-amen-list li { font-size: 0.7rem !important; line-height: 1.35 !important; }

  /* Ubicación + Inversión: dos cards lado a lado */
  body.is-catalog-open .cat-duo {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   1.5rem !important;
    align-items:           start !important;
  }
  body.is-catalog-open .cat-duo-card { padding: 1.8rem !important; }
  /* Ninguna tarjeta se parte entre dos hojas */
  body.is-catalog-open .cat-duo-card { break-inside: avoid; page-break-inside: avoid; }

  /* CTA: centrado */
  body.is-catalog-open .cat-cta {
    display:         flex !important;
    flex-direction:  column !important;
    align-items:     center !important;
    justify-content: center !important;
    text-align:      center !important;
  }
  body.is-catalog-open .cat-cta-contacts {
    flex-direction: row !important;
    flex-wrap:      wrap !important;
    justify-content: center !important;
  }

  /* ── Evitar cortes dentro de cards ── *

  /* ── Portada: imagen de fondo ocupa la página completa ── */
  body.is-catalog-open .cat-cover-bg    { object-fit: cover; width: 100%; height: 100%; }
  body.is-catalog-open .cat-cover-inner { padding: 2cm 2.5cm !important; }
  body.is-catalog-open .cat-cover-logo  { height: 5rem !important; }
  body.is-catalog-open .cat-cover-h1    { font-size: 3rem !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   AVISO DE PRIVACIDAD — Cookie Banner + Modal
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Cookie consent banner ─────────────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9800;
  background: rgba(12, 20, 11, 0.97);
  border-top: 1px solid rgba(200, 192, 126, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.45);
  padding: 1.25rem 1.5rem;
  animation: cookie-slide-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cookie-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.cookie-banner[hidden] { display: none; }

.cookie-banner-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.cookie-banner-text { flex: 1 1 320px; }

.cookie-banner-title {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8c07e;
}

.cookie-banner-title .fas { margin-right: 0.45rem; }

.cookie-banner-body {
  margin: 0;
  font-size: 0.825rem;
  color: rgba(240, 234, 210, 0.65);
  line-height: 1.6;
}

.cookie-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #c8c07e;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-size: inherit;
  font-family: inherit;
}

.cookie-link:hover { color: #ded7ba; }

.cookie-banner-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.4rem;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
  white-space: nowrap;
}

.cookie-btn--primary {
  background: #c8c07e;
  color: #0c140b;
  border-color: #c8c07e;
}

.cookie-btn--primary:hover {
  background: #ded7ba;
  border-color: #ded7ba;
}

.cookie-btn--secondary {
  background: transparent;
  color: rgba(240, 234, 210, 0.7);
  border-color: rgba(200, 192, 126, 0.3);
}

.cookie-btn--secondary:hover {
  color: #c8c07e;
  border-color: rgba(200, 192, 126, 0.6);
}

/* ── Footer privacy link ────────────────────────────────────────────────────── */
/* flex:1 1 26rem + min-width:0 para que este bloque se encoja y envuelva su
   propio contenido. Sin eso medía 957px de ancho fijo, no cabía junto al sello
   de TAO (566px) dentro de los 1296px de la barra, y empujaba el sello a un
   renglón aparte — que era justo el desalineado a corregir. */
.site-footer-bar-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem 1rem;
  flex-wrap: wrap;
  flex: 1 1 26rem;
  min-width: 0;
}

@media (max-width: 991.98px) {
  .site-footer-bar-left { justify-content: center; flex: 0 1 auto; }
}

.site-footer-bar-left p { margin: 0; }

.privacy-footer-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgba(200, 192, 126, 0.75);
  font-size: 0.8rem;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color 180ms ease;
}

.privacy-footer-link:hover { color: #c8c07e; }

/* ── Privacy notice modal ───────────────────────────────────────────────────── */
.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.privacy-modal[hidden] { display: none; }

.privacy-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 9, 11, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.privacy-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 740px;
  max-height: 88vh;
  background: #0c140b;
  border: 1px solid rgba(200, 192, 126, 0.2);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  animation: prv-fade-in 0.3s ease both;
}

@keyframes prv-fade-in {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.privacy-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem 0 0;
  border-bottom: 1px solid rgba(200, 192, 126, 0.15);
  flex-shrink: 0;
  min-height: 3.25rem;
}

.privacy-modal-kicker {
  margin: 0 0 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c8c07e;
}

.privacy-modal-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 300;
  color: #ded7ba;
  letter-spacing: 0.04em;
}

.privacy-modal-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(200, 192, 126, 0.2);
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  cursor: pointer;
  color: rgba(240, 234, 210, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  margin-left: 0.75rem;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.privacy-modal-close:hover {
  background: rgba(200, 192, 126, 0.15);
  border-color: rgba(200, 192, 126, 0.5);
  color: #c8c07e;
}

.privacy-modal-body {
  overflow-y: auto;
  padding: 1.75rem 2rem;
  flex: 1;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 192, 126, 0.3) transparent;
}

.privacy-modal-body::-webkit-scrollbar { width: 5px; }
.privacy-modal-body::-webkit-scrollbar-track { background: transparent; }
.privacy-modal-body::-webkit-scrollbar-thumb { background: rgba(200, 192, 126, 0.3); border-radius: 3px; }

.privacy-modal-footer {
  padding: 1.25rem 2rem 1.5rem;
  border-top: 1px solid rgba(200, 192, 126, 0.1);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ── Privacy notice content typography ─────────────────────────────────────── */
.prv-notice-box {
  background: rgba(200, 192, 126, 0.08);
  border: 1px solid rgba(200, 192, 126, 0.2);
  border-left: 3px solid #c8c07e;
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  font-size: 0.8rem;
  color: rgba(240, 234, 210, 0.6);
  line-height: 1.65;
  margin-bottom: 1.75rem;
}

.prv-notice-box .fas { color: #c8c07e; margin-right: 0.45rem; }

.prv-h3 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c8c07e;
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(200, 192, 126, 0.12);
}

.prv-p {
  font-size: 0.875rem;
  color: rgba(240, 234, 210, 0.72);
  line-height: 1.75;
  margin: 0 0 0.85rem;
}

.prv-p a, .prv-notice-box a {
  color: #c8c07e;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.prv-p a:hover { color: #ded7ba; }

.prv-list {
  padding-left: 1.4rem;
  margin: 0 0 0.85rem;
  font-size: 0.875rem;
  color: rgba(240, 234, 210, 0.72);
  line-height: 1.75;
}

.prv-list li { margin-bottom: 0.35rem; }

.prv-list a { color: #c8c07e; text-decoration: underline; text-underline-offset: 0.18em; }

.prv-note {
  font-size: 0.78rem;
  color: rgba(240, 234, 210, 0.45);
  font-style: italic;
}

.prv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin: 0 0 1rem;
  color: rgba(240, 234, 210, 0.72);
}

.prv-table th {
  background: rgba(200, 192, 126, 0.1);
  color: #c8c07e;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.7rem;
  padding: 0.65rem 0.85rem;
  text-align: left;
  border: 1px solid rgba(200, 192, 126, 0.12);
}

.prv-table td {
  padding: 0.6rem 0.85rem;
  border: 1px solid rgba(200, 192, 126, 0.08);
  vertical-align: top;
  line-height: 1.55;
}

.prv-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }

.prv-footer-note {
  margin-top: 2.25rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid rgba(200, 192, 126, 0.1);
  font-size: 0.78rem;
  color: rgba(240, 234, 210, 0.4);
  line-height: 1.65;
}

/* ── Light theme overrides ──────────────────────────────────────────────────── */
html[data-theme="light"] .cookie-banner {
  background: rgba(245, 242, 235, 0.97);
  border-top-color: rgba(26, 43, 46, 0.12);
}

html[data-theme="light"] .cookie-banner-title { color: #7a6830; }
html[data-theme="light"] .cookie-banner-body  { color: rgba(26, 43, 46, 0.65); }
html[data-theme="light"] .cookie-link         { color: #7a6830; }
html[data-theme="light"] .cookie-link:hover   { color: #1a2b2e; }

html[data-theme="light"] .cookie-btn--primary {
  background: #7a6830;
  color: #fff;
  border-color: #7a6830;
}

html[data-theme="light"] .cookie-btn--primary:hover {
  background: #5d4f24;
  border-color: #5d4f24;
}

html[data-theme="light"] .cookie-btn--secondary {
  color: rgba(26, 43, 46, 0.65);
  border-color: rgba(26, 43, 46, 0.25);
}

html[data-theme="light"] .cookie-btn--secondary:hover {
  color: #1a2b2e;
  border-color: rgba(26, 43, 46, 0.5);
}

html[data-theme="light"] .privacy-footer-link { color: rgba(26, 43, 46, 0.7); }
html[data-theme="light"] .privacy-footer-link:hover { color: #1a2b2e; }

/* ── Tema claro — privacy modal ─────────────────────────────────────────────── */
html[data-theme="light"] .privacy-modal-panel {
  background: #f5f2eb;
  border-color: rgba(26, 43, 46, 0.12);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .privacy-modal-header {
  border-bottom-color: rgba(26, 43, 46, 0.1);
}

html[data-theme="light"] .privacy-modal-kicker { color: #7a6830; }

html[data-theme="light"] .privacy-modal-title { color: #1a2b2e; }

html[data-theme="light"] .privacy-modal-close {
  background: rgba(26, 43, 46, 0.06);
  border-color: rgba(26, 43, 46, 0.15);
  color: rgba(26, 43, 46, 0.55);
}

html[data-theme="light"] .privacy-modal-close:hover {
  background: rgba(26, 43, 46, 0.1);
  border-color: rgba(26, 43, 46, 0.35);
  color: #1a2b2e;
}

html[data-theme="light"] .privacy-modal-footer {
  border-top-color: rgba(26, 43, 46, 0.1);
}

html[data-theme="light"] .prv-notice-box {
  background: rgba(122, 104, 48, 0.07);
  border-color: rgba(122, 104, 48, 0.25);
  border-left-color: #7a6830;
  color: rgba(26, 43, 46, 0.6);
}

html[data-theme="light"] .prv-notice-box .fas { color: #7a6830; }

html[data-theme="light"] .prv-h3 {
  color: #7a6830;
  border-bottom-color: rgba(26, 43, 46, 0.1);
}

html[data-theme="light"] .prv-p,
html[data-theme="light"] .prv-list {
  color: rgba(26, 43, 46, 0.78);
}

html[data-theme="light"] .prv-p a,
html[data-theme="light"] .prv-list a { color: #7a6830; }
html[data-theme="light"] .prv-p a:hover,
html[data-theme="light"] .prv-list a:hover { color: #1a2b2e; }

html[data-theme="light"] .prv-note { color: rgba(26, 43, 46, 0.45); }

html[data-theme="light"] .prv-table th {
  background: rgba(122, 104, 48, 0.08);
  color: #7a6830;
  border-color: rgba(26, 43, 46, 0.1);
}

html[data-theme="light"] .prv-table td {
  color: rgba(26, 43, 46, 0.75);
  border-color: rgba(26, 43, 46, 0.07);
}

html[data-theme="light"] .prv-table tr:nth-child(even) td {
  background: rgba(26, 43, 46, 0.03);
}

html[data-theme="light"] .prv-footer-note {
  background: rgba(26, 43, 46, 0.03);
  border-color: rgba(26, 43, 46, 0.08);
  color: rgba(26, 43, 46, 0.45);
}

html[data-theme="light"] .privacy-modal-body::-webkit-scrollbar-thumb {
  background: rgba(26, 43, 46, 0.2);
}

html[data-theme="light"] .cookie-btn--primary {
  background: #7a6830;
  color: #fff;
  border-color: #7a6830;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cookie-banner-inner { gap: 1rem; }
  .cookie-banner-actions { width: 100%; }
  .cookie-btn { flex: 1; text-align: center; }

  .privacy-modal        { padding: 0; align-items: flex-end; }
  .privacy-modal-panel  { max-height: 94vh; border-radius: 12px 12px 0 0; align-self: flex-end; }
  .privacy-modal-header { padding: 0 0.75rem 0 0; }
  .privacy-modal-close  { margin-left: 0.25rem; }
  .privacy-modal-body   { padding: 1.25rem; }
  .privacy-modal-footer { padding: 1rem 1.25rem 1.5rem; }
  .prv-tab { font-size: 0.68rem; padding: 0.85rem 0.75rem; }

  /* Las tablas del aviso se desplazan horizontal en mobile */
  .prv-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.72rem;
  }
  .prv-table th, .prv-table td { padding: 0.5rem 0.6rem; }
}

@media (max-width: 400px) {
  .cookie-banner { padding: 1rem; }
  .cookie-banner-title { font-size: 0.75rem; }
  .cookie-banner-body  { font-size: 0.78rem; }
  .cookie-btn { padding: 0.6rem 1rem; font-size: 0.75rem; }
}

/* ── Legal tabs (Privacidad / Términos / Cookies) ──────────────────────────── */
.prv-tabs {
  display: flex;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.prv-tabs::-webkit-scrollbar { display: none; }

.prv-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(240, 234, 210, 0.4);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 1.25rem;
  white-space: nowrap;
  transition: color 180ms ease, border-color 180ms ease;
}
.prv-tab:hover { color: rgba(240, 234, 210, 0.75); }
.prv-tab.is-active {
  color: #c8c07e;
  border-bottom-color: #c8c07e;
}
.prv-tab:focus-visible {
  outline: 2px solid rgba(200, 192, 126, 0.6);
  outline-offset: -3px;
  border-radius: 3px;
}

.prv-pane { display: none; }
.prv-pane.is-active { display: block; }

.prv-inline-tab-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: #c8c07e;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: color 180ms ease;
}
.prv-inline-tab-link:hover { color: #ded7ba; }

.privacy-modal-body code {
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  background: rgba(200, 192, 126, 0.08);
  border: 1px solid rgba(200, 192, 126, 0.15);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  color: #c8c07e;
}

.prv-list ul {
  padding-left: 1.4rem;
  margin: 0.35rem 0;
  list-style-type: circle;
}
.prv-list ul li {
  font-size: 0.85rem;
  color: rgba(240, 234, 210, 0.65);
  margin-bottom: 0.2rem;
}

/* ── Legal footer nav ───────────────────────────────────────────────────────── */
.legal-footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
}
.legal-footer-sep {
  color: rgba(200, 192, 126, 0.3);
  font-size: 0.7rem;
  pointer-events: none;
}

/* ── Light theme — tabs & footer nav ──────────────────────────────────────── */
html[data-theme="light"] .prv-tab              { color: rgba(26, 43, 46, 0.4); }
html[data-theme="light"] .prv-tab:hover        { color: rgba(26, 43, 46, 0.7); }
html[data-theme="light"] .prv-tab.is-active    { color: #7a6830; border-bottom-color: #7a6830; }
html[data-theme="light"] .prv-tab:focus-visible { outline-color: rgba(122, 104, 48, 0.55); }
html[data-theme="light"] .prv-inline-tab-link  { color: #7a6830; }
html[data-theme="light"] .prv-inline-tab-link:hover { color: #1a2b2e; }
html[data-theme="light"] .legal-footer-sep     { color: rgba(26, 43, 46, 0.25); }
html[data-theme="light"] .privacy-modal-body code {
  background: rgba(122, 104, 48, 0.07);
  border-color: rgba(122, 104, 48, 0.2);
  color: #7a6830;
}
html[data-theme="light"] .prv-list ul li { color: rgba(26, 43, 46, 0.7); }

/* ── FAB footer-proximity fade ──────────────────────────────────────────────
   When the site footer enters the viewport, all floating buttons fade out so
   they don't cover the legal links or copyright bar.
   IntersectionObserver (page-enhancements.js inline) toggles this class.
   ─────────────────────────────────────────────────────────────────────────── */
body.fabs-near-footer .whatsapp-fab,
body.fabs-near-footer .cd-orb,
body.fabs-near-footer .music-fab,
body.fabs-near-footer .back-to-top {
  opacity: 0;
  pointer-events: none;
}

/* ── Precio ancla — franja fija justo después del hero ──────────────────────
   El precio no aparecía hasta la sección de inversión (scroll 6); un lead de
   pauta que no lo ve en los primeros 3 scrolls se va. Esta franja lo sube
   justo debajo del hero. ────────────────────────────────────────────────── */
.price-anchor {
  position: relative;
  background: linear-gradient(180deg, rgba(var(--brand-ink-rgb), 0.96) 0%, rgba(var(--brand-ink-soft-rgb), 0.96) 100%);
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.22);
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.14);
  padding: 1.1rem 0;
  overflow: hidden;
}

/* Respiración sutil del borde superior — le da vida a la barra sin
   distraer del contenido */
.price-anchor::before {
  content: '';
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--brand-canopy-rgb), 0.9) 50%, transparent 100%);
  animation: priceAnchorSweep 5s ease-in-out infinite;
}

@keyframes priceAnchorSweep {
  0%   { transform: translateX(-100%); opacity: 0.4; }
  50%  { transform: translateX(0%);    opacity: 1;   }
  100% { transform: translateX(100%);  opacity: 0.4; }
}

.price-anchor-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.75rem;
  text-align: center;
}

.price-anchor-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--hero-text);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
}

.price-anchor-text strong {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--hero-accent);
}

/* Brillo dorado que recorre el precio cada pocos segundos — sutil,
   nunca interrumpe la lectura, solo le da un toque "vivo" al ancla */
.price-anchor-shine {
  background-image: linear-gradient(
    100deg,
    var(--hero-accent) 40%,
    #fff8e0 50%,
    var(--hero-accent) 60%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: priceAnchorShine 5s ease-in-out infinite;
}

@keyframes priceAnchorShine {
  0%, 20%  { background-position: 100% 0; }
  70%, 100% { background-position: -60% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .price-anchor::before { animation: none; opacity: 0.7; }
  .price-anchor-shine { animation: none; background: none; -webkit-text-fill-color: currentColor; color: var(--hero-accent); }
}

.price-anchor-text strong em {
  font-style: normal;
  font-size: 0.7rem;
  opacity: 0.75;
  margin-left: 0.15rem;
}

.price-anchor-sep {
  opacity: 0.35;
}

.price-anchor-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(var(--brand-canopy-rgb), 0.85);
  padding: 0.3rem 0.6rem 0.3rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.24);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.price-anchor-tag:hover,
.price-anchor-tag:focus-visible {
  background: rgba(var(--brand-canopy-rgb), 0.14);
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
  color: var(--brand-canopy);
  transform: translateY(-1px);
}

.price-anchor-pulse {
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-canopy);
  flex-shrink: 0;
}

.price-anchor-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--brand-canopy);
  animation: priceAnchorPulse 2.2s ease-out infinite;
}

@keyframes priceAnchorPulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .price-anchor-pulse::after { animation: none; opacity: 0; }
}

.price-anchor-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}

.price-anchor .joytree-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.4rem;
  font-size: 0.78rem;
}

.price-anchor .joytree-btn i {
  font-size: 0.85rem;
}

.price-anchor .joytree-btn--accent {
  position: relative;
  overflow: hidden;
}

/* Brillo que recorre el botón principal — mismo lenguaje del precio de
   al lado (.price-anchor-shine), refuerza que es la acción prioritaria */
.price-anchor .joytree-btn--accent::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 48%, transparent 66%);
  transform: translateX(-120%);
  animation: priceAnchorBtnShine 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes priceAnchorBtnShine {
  0%, 25%  { transform: translateX(-120%); }
  55%, 100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .price-anchor .joytree-btn--accent::after { animation: none; display: none; }
}

html[data-theme="light"] .price-anchor {
  background: linear-gradient(180deg, #f5f2eb 0%, #eee9d8 100%);
  border-top-color: rgba(var(--brand-canopy-rgb), 0.3);
}

html[data-theme="light"] .price-anchor-text { color: var(--brand-sand); }

@media (max-width: 575.98px) {
  .price-anchor-text { font-size: 0.85rem; }
  .price-anchor-text strong { font-size: 1.05rem; }
}

/* ═══════════════════════════════════════════
   ESCENARIOS — cards con flip + diálogo de cotización rápida
═══════════════════════════════════════════ */
.esc-card {
  position: relative;
  height: 100%;
  perspective: 1600px;
}

.esc-card-inner {
  position: relative;
  width: 100%;
  min-height: 19rem;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 650ms cubic-bezier(0.4, 0.2, 0.2, 1);
}

.esc-card.is-flipped .esc-card-inner {
  transform: rotateY(180deg);
}

.esc-card-front,
.esc-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  margin: 0;
}

/* backface-visibility:hidden solo oculta el render — en algunos navegadores
   (Safari sobre todo) la cara "de espaldas" sigue siendo clicable, y el
   botón "Quiero este escenario" del reverso no respondía porque el frente
   invisible seguía interceptando el clic. Se corta el hit-test a mano. */
.esc-card-back {
  transform: rotateY(180deg);
  justify-content: flex-start;
  pointer-events: none;
}

/* El reverso está apagado por ahora: las cards ya no se voltean y su CTA
   ("Me interesa esta opción") vive en la cara frontal. El markup del reverso
   se conserva con [hidden] para poder reactivar el volteo sin rehacerlo; el
   display:none va explícito porque .unified-card declara display:flex y le
   gana al display:none que el navegador aplica a [hidden]. */
.esc-card-back[hidden],
#escenarios .esc-card-back[hidden] { display: none; }

/* Los cuatro títulos no miden lo mismo: dos caben en una línea y dos se
   parten en dos, así que la descripción de esas dos arrancaba un renglón más
   abajo y las cuatro cards se leían desalineadas. Se reserva la altura de dos
   líneas y el título se centra dentro de ella: mida lo que mida, el texto de
   abajo siempre empieza a la misma altura. */
#escenarios .esc-card-front h3 {
  min-height: 2em;   /* line-height: 1 en .unified-card h3 → 2 líneas */
  display: flex;
  align-items: center;
  justify-content: center;
}

.esc-card.is-flipped .esc-card-front {
  pointer-events: none;
}

.esc-card.is-flipped .esc-card-back {
  pointer-events: auto;
}

.esc-back-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.75);
}

/* Descripción del esquema, arriba del "Ideal para": va antes porque explica
   QUÉ es la opción, y el bloque de abajo dice PARA QUIÉN. Al revés se leían
   dos frases seguidas con la misma estructura. */
/* .unified-card p lleva un margin-bottom de 1rem que aquí se sumaba al gap
   del contenedor. En el reverso el espaciado lo maneja el gap, y solo. */
.esc-card-back p { margin-bottom: 0; }

.esc-back-who {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--hero-text);
  margin: 0;
}

.esc-back-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 auto;
}

.esc-back-list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(var(--brand-sand-rgb), 0.72);
}

.esc-back-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-canopy);
}

.esc-select-btn {
  margin-top: auto;
  padding: 0.7rem 1rem;
  border-radius: 0.75rem;
  border: none;
  background: var(--hero-accent);
  color: var(--brand-ink);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity 200ms ease, transform 200ms ease;
}

.esc-select-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* Antes era un círculo de 2.15rem con solo un icono: nadie sabía que servía
   para voltear la card. Ahora es una píldora con texto. */
.esc-flip-btn {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  z-index: 2;
  min-height: 2.15rem;
  padding: 0 0.85rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(var(--brand-ink-rgb), 0.7);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.35);
  color: var(--hero-accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.esc-flip-btn i {
  font-size: 0.78rem;
  /* Solo gira el icono. Antes rotaba el botón entero y con la etiqueta dentro
     el texto quedaría de cabeza. */
  transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.esc-card.is-flipped .esc-flip-btn i {
  transform: rotate(180deg);
}

.esc-flip-btn:hover {
  background: rgba(var(--brand-canopy-rgb), 0.22);
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
}

html[data-theme="light"] .esc-flip-btn {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(var(--brand-canopy-rgb), 0.30);
  color: var(--brand-canopy);
}

html[data-theme="light"] .esc-flip-btn:hover {
  background: rgba(var(--brand-canopy-rgb), 0.12);
}

  /* Diseño específico para la sección de escenarios */
  #escenarios {
    padding: clamp(3rem, 4vw, 5rem) 0;
  }

  /* 1080px era el ancho de la rejilla 2x2. Con las cuatro cards en una sola
     fila cada una se quedaba en 249px; a 1320px respiran ~300px. */
  #escenarios .section-shell {
    position: relative;
    z-index: 1;
    max-width: min(1320px, 100%);
    margin: 0 auto;
  }

  #escenarios .section-heading {
    margin-bottom: 3rem;
  }

  #escenarios .section-copy {
    max-width: 44rem;
    margin: 0 auto 2.25rem;
    color: rgba(var(--brand-sand-rgb), 0.78);
  }

  /* Las cuatro cards van en UNA sola fila de 768px hacia arriba (escritorio e
     iPad, en vertical y en horizontal): los cuatro caminos de pago solo se
     comparan bien si se ven juntos. El hueco se estrecha con la pantalla para
     no comerse el ancho de las cards en tablet, y el flex-basis se calcula a
     partir del mismo valor para que la fila cierre exacta en cuatro. */
  #escenarios .row.g-4 {
    --esc-gap: clamp(0.85rem, 1.6vw, 1.75rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--esc-gap);
    align-items: stretch;
  }

  #escenarios .row.g-4 > .col {
    flex: 1 1 calc((100% - 3 * var(--esc-gap)) / 4);
    max-width: calc((100% - 3 * var(--esc-gap)) / 4);
  }

  /* Por debajo de 768px no hay ancho para cuatro columnas legibles: una por
     fila, como estaba. */
  @media (max-width: 767.98px) {
    #escenarios .row.g-4 > .col {
      flex: 1 1 100%;
      max-width: 100%;
    }
  }

  /* La altura la fija la cara más alta de las cuatro, que es el reverso de
     Contado. Baja de 29.5rem a 24rem: el texto es el mismo, lo que se recortó
     fue el aire — padding de las caras, icono, interlineado y el min-height
     vacío de .esc-back-who. Si se alarga cualquier texto del reverso, esto
     vuelve a ser lo primero que hay que subir. */
  #escenarios .esc-card {
    min-height: 24rem;
    display: flex;
    flex-direction: column;
    transition: transform 260ms ease;
  }

  #escenarios .esc-card:hover {
    transform: translateY(-6px);
  }

  /* Rejilla de una sola celda con las dos caras encima: al no estar en
     position:absolute, la celda mide lo que mide la cara MAS ALTA y la card
     crece sola con el texto. Con las caras absolutas la altura era un numero
     fijo (24rem) que había que recalcular a mano, y al pasar a cuatro columnas
     el reverso se salía hasta 312px por debajo del borde. */
  #escenarios .esc-card-inner {
    position: relative;
    width: 100%;
    min-height: 23.5rem;
    height: 100%;
    display: grid;
    grid-template-columns: 100%;
    transform-style: preserve-3d;
    transition: transform 520ms cubic-bezier(0.22, 0.27, 0.15, 1);
    will-change: transform;
  }

  #escenarios .esc-card-front,
  #escenarios .esc-card-back {
    /* position/inset se reponen a mano: el bloque general de .esc-card-front
       las deja en absolute y, al no declararlas aquí, seguían ganando. */
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 1.8rem;
    border: 1px solid rgba(var(--brand-sage-rgb), 0.12);
    box-shadow: 0 18px 40px rgba(5, 12, 5, 0.12);
    overflow: hidden;
    padding: 1.45rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.8rem;
    background: rgba(var(--brand-ink-soft-rgb), 0.10);
  }

  #escenarios .esc-card-front {
    /* El hueco de 3.2rem reservaba el espacio de la píldora "Ver detalles",
       que iba absoluta sobre la esquina. Ya no existe: el CTA está en el flujo
       normal y el padding vuelve al de las demás caras. */
    padding-bottom: 1.45rem;
    background:
      radial-gradient(circle at top left, rgba(var(--brand-water-rgb), 0.18), transparent 26%),
      linear-gradient(180deg, rgba(var(--brand-water-rgb), 0.14) 0%, rgba(var(--brand-ink-soft-rgb), 0.12) 100%);
    border-color: rgba(var(--brand-water-rgb), 0.16);
    color: var(--hero-text);
    text-align: center;
  }

  #escenarios .esc-card-back {
    transform: rotateY(180deg);
    border-color: rgba(var(--brand-sage-rgb), 0.12);
    background:
      radial-gradient(circle at top right, rgba(var(--brand-water-rgb), 0.12), transparent 28%),
      linear-gradient(180deg, rgba(var(--brand-ink-soft-rgb), 0.10) 0%, rgba(var(--brand-ink-rgb), 0.08) 100%);
    justify-content: flex-start;
    padding-top: 1.45rem;
    text-align: center;
  }

  #escenarios .esc-card-front .card-icon,
  #escenarios .esc-card-back .card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--brand-canopy-rgb), 0.16);
    border: 1px solid rgba(var(--brand-canopy-rgb), 0.20);
    color: var(--hero-accent);
    margin: 0 auto 0.65rem;
  }

  #escenarios .esc-card-front h3,
  #escenarios .esc-card-back h3 {
    margin: 0 0 0.6rem;
    color: var(--hero-text);
    line-height: 1;
    text-align: center;
  }

  #escenarios .esc-card-front p,
  #escenarios .esc-back-who,
  #escenarios .esc-back-list li {
    color: rgba(var(--brand-sand-rgb), 0.82);
  }

  /* La frase de arriba ya no estira (flex:1): ahora es un titular corto y quien
     ocupa el espacio restante es la lista de viñetas de debajo. */
  #escenarios .esc-card-front p {
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0;
    flex: 0 0 auto;
  }

  /* Los cuatro títulos no miden lo mismo: "Máximo beneficio" ocupa un renglón
     y "Hazlo posible desde hoy" dos. Sin un alto reservado, el párrafo y las
     viñetas de cada card arrancan a distinta altura y la fila se ve torcida.
     Se reserva el alto del caso más largo: dos renglones de título (el título
     lleva line-height:1, así que 2em son exactamente dos renglones) y dos de
     párrafo. Entre 768 y 991px caben menos caracteres por renglón y el título
     más largo se va a tres. */
  @media (min-width: 768px) {
    #escenarios .esc-card-front h3 { min-height: 2em; }
    #escenarios .esc-card-front p { min-height: 3.2em; }
  }

  @media (min-width: 768px) and (max-width: 991.98px) {
    #escenarios .esc-card-front h3 { min-height: 3em; }

    /* A este ancho "Meses sin intereses" y "El primer paso" no caben en un
       renglón dentro de la píldora y se parten en dos, empujando hacia abajo
       todo el texto de esas dos cards. Se reserva el alto de dos renglones en
       las cuatro. */
    #escenarios .esc-card-front .card-tag {
      display: flex;
      align-items: center;
      min-height: 3.8em;
      text-align: center;
    }
  }

  /* Mismas viñetas que el reverso, para que las dos caras se lean igual. */
  #escenarios .esc-front-list {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
    text-align: center;
  }

  /* El hueco de la viñeta se reserva a los DOS lados: con padding solo a la
     izquierda el texto queda centrado respecto a un ancho descentrado y la
     columna se ve corrida 8px. */
  #escenarios .esc-front-list li {
    position: relative;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(var(--brand-sand-rgb), 0.74);
  }

  #escenarios .esc-front-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-canopy);
  }

  /* Sin min-height: reservaba 3.8rem para alinear el "Ideal para" de las cuatro
     cards, pero ninguna frase llega a ese alto y el resto era hueco muerto.
     Las cuatro caras siguen alineadas porque comparten el min-height de la
     card, y el bloque de abajo va pegado con margin-top:auto. */
  #escenarios .esc-back-who {
    margin-bottom: 0.6rem;
  }

  /* El botón "Ver detalles" va en position:absolute abajo a la derecha, así que
     no reserva espacio: sin este hueco extra se montaba encima del CTA
     "Quiero este escenario", que va pegado al fondo con margin-top:auto. */
  #escenarios .esc-card-back {
    padding-bottom: 3.7rem;
  }

  #escenarios .esc-back-list li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.9rem;
    line-height: 1.55;
  }

  #escenarios .esc-back-list li::before {
    width: 6px;
    height: 6px;
    background: var(--brand-canopy);
  }

  #escenarios .esc-select-btn {
    margin-top: auto;
  }

  #escenarios .esc-card-back {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #escenarios .esc-back-who {
    color: var(--brand-sand);
    margin-bottom: 0.6rem;
  }

  #escenarios .esc-back-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
  }

  #escenarios .esc-back-list li {
    color: rgba(var(--brand-sand-rgb), 0.78);
    margin: 0;
    padding-left: 1.1rem;
    position: relative;
    font-size: 0.82rem;
    line-height: 1.5;
  }

  #escenarios .esc-back-list li::before {
    left: 0;
    top: 0.65rem;
    width: 6px;
    height: 6px;
    background: var(--brand-canopy);
  }

  /* Píldora con etiqueta, no círculo: el icono solo no comunicaba que la card
     se voltea. Ancho automático para que quepa el texto en ES y EN. */
  #escenarios .esc-flip-btn {
    background: rgba(var(--brand-ink-rgb), 0.78);
    border-color: rgba(var(--brand-canopy-rgb), 0.35);
    color: var(--hero-accent);
    width: auto;
    min-height: 2.35rem;
    border-radius: 999px;
    padding: 0 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
  }

  #escenarios .esc-flip-btn:hover {
    background: rgba(var(--brand-canopy-rgb), 0.18);
  }

  #escenarios .section-actions {
    margin-top: clamp(3rem, 4vw, 4.5rem);
  }

  #escenarios .joytree-btn--accent {
    min-width: 16rem;
  }

  /* En teléfonos estrechos la card no se estrecha: se alarga, porque las
     mismas frases ocupan más renglones. Con 24rem el reverso de Contado se
     salía 14px y su CTA chocaba con "Ver detalles". Es el único ancho que
     necesita más alto; de 576px en adelante manda el 24rem de arriba. */
  @media (max-width: 575.98px) {
    #escenarios .esc-card { min-height: 27rem; }
    #escenarios .esc-card-inner { min-height: 26.5rem; }
  }

/* Contenedor del diálogo de escenarios.
   FALTABA POR COMPLETO: sin esta regla el elemento quedaba en position:static,
   es decir suelto en el flujo del documento allá donde está en el HTML (cerca
   del final). Al pulsar "Quiero este escenario" el JS quitaba [hidden] y ponía
   body.overflow:hidden, pero el panel se pintaba a miles de píxeles de la
   pantalla: el visitante veía la página congelada, sin diálogo y sin manera de
   cerrarlo (la X también quedaba fuera de vista). Esto lo convierte en el modal
   fijo y centrado que el JS y el resto de los estilos daban por hecho. */
.esc-dialog {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
}

/* El atributo [hidden] vale display:none en la hoja del navegador, pero la
   regla de arriba (display:flex) le gana por especificidad: hay que
   restaurarlo a mano o el diálogo se quedaría siempre visible. */
.esc-dialog[hidden] {
  display: none;
}

.esc-dialog-overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 9, 11, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.esc-dialog-panel {
  position: relative;
  z-index: 1;
  width: min(30rem, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 2.25rem 1.9rem;
  border-radius: 1.5rem;
  background: linear-gradient(160deg, rgba(12, 29, 33, 0.99) 0%, rgba(12, 20, 11, 0.995) 100%);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.24);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
  animation: escDialogIn 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes escDialogIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.esc-dialog-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.2);
  color: var(--brand-sand);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms ease, transform 220ms cubic-bezier(0.34, 1.6, 0.64, 1);
}

.esc-dialog-close:hover {
  background: rgba(var(--brand-canopy-rgb), 0.18);
  transform: rotate(90deg);
}

.esc-dialog-recap {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.esc-dialog-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.8);
  background: rgba(var(--brand-canopy-rgb), 0.1);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.24);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}

.esc-dialog-price {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.3rem;
  color: var(--hero-accent);
}

.esc-dialog-title {
  font-family: var(--font-serif);
  text-transform: uppercase;
  line-height: 1;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--hero-text);
  margin: 0 0 0.4rem;
}

.esc-dialog-sub {
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(var(--brand-sand-rgb), 0.62);
  margin: 0 0 1.4rem;
}

.esc-dialog-form { display: flex; flex-direction: column; gap: 1rem; }

.esc-field-group { display: flex; flex-direction: column; gap: 0.4rem; }

.esc-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(var(--brand-sand-rgb), 0.62);
}

.esc-input {
  padding: 0.8rem 0.95rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.14);
  background: rgba(var(--brand-ink-rgb), 0.86);
  color: var(--hero-text);
  font-size: 0.88rem;
}

.esc-input:focus {
  outline: none;
  border-color: rgba(var(--brand-canopy-rgb), 0.5);
  box-shadow: 0 0 0 0.18rem rgba(var(--brand-canopy-rgb), 0.14);
}

.esc-phone-group { display: flex; gap: 0.5rem; }
.esc-country-select { flex: 0 0 5rem; }
.esc-phone-group .esc-input:not(.esc-country-select) { flex: 1 1 auto; min-width: 0; }

.esc-field-group--check { flex-direction: row; align-items: flex-start; gap: 0; }

.esc-check-label {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding-left: 1.9rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(var(--brand-sand-rgb), 0.65);
  cursor: pointer;
}

.esc-check {
  position: absolute;
  opacity: 0;
  left: 0;
  top: 0.15rem;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0;
  cursor: pointer;
}

.esc-check-box {
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.3);
  background: rgba(var(--brand-ink-rgb), 0.7);
}

.esc-check:checked + .esc-check-box {
  background: var(--hero-accent);
  border-color: var(--hero-accent);
}

.esc-check:checked + .esc-check-box::after {
  content: '';
  position: absolute;
  left: 0.42rem;
  top: 0.2rem;
  width: 0.3rem;
  height: 0.6rem;
  border: solid var(--brand-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.esc-check:focus-visible + .esc-check-box {
  box-shadow: 0 0 0 0.18rem rgba(var(--brand-canopy-rgb), 0.35);
}

.esc-error {
  display: block;
  min-height: 0.95rem;
  font-size: 0.72rem;
  color: #e07070;
}

.esc-legal-note {
  font-size: 0.68rem;
  line-height: 1.5;
  color: rgba(var(--brand-sand-rgb), 0.42);
  border-top: 1px solid rgba(var(--brand-sand-rgb), 0.1);
  padding-top: 0.75rem;
  margin: 0.25rem 0 0;
}

.esc-status {
  min-height: 1rem;
  font-size: 0.8rem;
  text-align: center;
  color: rgba(var(--brand-sand-rgb), 0.6);
  margin: 0;
}

.esc-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.25rem;
  border: none;
  border-radius: 100px;
  background: var(--brand-canopy);
  color: var(--brand-ink);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 200ms ease;
}

.esc-submit-btn:hover { opacity: 0.88; }
.esc-submit-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.esc-spinner { width: 1.05rem; height: 1.05rem; animation: escSpin 900ms linear infinite; }
@keyframes escSpin { to { transform: rotate(360deg); } }

.esc-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
}

.esc-success-icon { width: 3.5rem; height: 3.5rem; color: var(--brand-canopy); }
.esc-success-icon svg { width: 100%; height: 100%; }
.esc-success-icon-warn { display: none; }
.esc-success.is-fallback .esc-success-icon { color: #d9a441; }
.esc-success.is-fallback .esc-success-icon-ok { display: none; }
.esc-success.is-fallback .esc-success-icon-warn { display: block; }
.esc-success.is-fallback .esc-success-title { color: #d9a441; }

.esc-success-title {
  font-family: var(--font-serif);
  text-transform: uppercase;
  line-height: 1;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--hero-text);
  margin: 0;
}

.esc-success-body {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(var(--brand-sand-rgb), 0.65);
  margin: 0;
}

.esc-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.4rem;
  border-radius: 100px;
  background: #25D366;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

html[data-theme="light"] .esc-input { background: rgba(255,255,255,0.7); color: #1a2b2e; border-color: rgba(0,0,0,0.14); }
html[data-theme="light"] .esc-dialog-panel { background: linear-gradient(160deg, #fff, #f4f1ea); border-color: rgba(0,0,0,0.1); }
html[data-theme="light"] .esc-dialog-title,
html[data-theme="light"] .esc-success-title { color: #1a2b2e; }
html[data-theme="light"] .esc-back-who { color: #1a2b2e; }

/* ── Tema claro: reverso de las cards de escenarios ──────────────────────────
   En claro, --brand-ink pasa a ser crema (#f7f3eb) y --hero-accent un arena
   claro. Las reglas base usaban esos tokens dando por hecho el tema oscuro, y
   el resultado era crema sobre crema:
     · "Quiero este escenario" quedaba INVISIBLE (1.35:1)
     · "Ver detalles" casi invisible (1.35:1)
     · "Ideal para" en arena claro sobre card blanca
   Los selectores llevan #escenarios porque las reglas que hay que vencer
   (#escenarios .esc-select-btn / .esc-flip-btn) también usan el ID. */
html[data-theme="light"] #escenarios .esc-select-btn {
  color: #12211f;
}

html[data-theme="light"] #escenarios .esc-flip-btn {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(var(--brand-canopy-rgb), 0.34);
  color: #1f4d43;
}

html[data-theme="light"] #escenarios .esc-flip-btn:hover {
  background: rgba(var(--brand-canopy-rgb), 0.14);
}

html[data-theme="light"] #escenarios .esc-back-label {
  color: rgba(26, 43, 46, 0.62);
}

html[data-theme="light"] .kineki-pillar {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0,0,0,0.07);
}
html[data-theme="light"] .kineki-pillar h3 { color: var(--brand-sand); }
html[data-theme="light"] .kineki-pillar p { color: rgba(var(--brand-sand-rgb), 0.68); }

@media (max-width: 575.98px) {
  .esc-dialog-panel { padding: 1.75rem 1.35rem; }
}

/* ══════════════════════════════════════════════════════════════
   CARDS DE DOS CARAS + PREFERS-REDUCED-MOTION
   ══════════════════════════════════════════════════════════════
   Afecta a #why-joytree (.why-card) y a #escenarios (.esc-card).

   Sus dos caras son .unified-card, y el bloque general de
   prefers-reduced-motion le aplica "transform: none !important". Eso borra el
   rotateY(180deg) del reverso; sin esa rotación backface-visibility ya no
   oculta nada y las DOS caras quedan superpuestas, con el texto de una encima
   del de la otra.

   Aquí se renuncia al 3D y el cambio de cara pasa a hacerse con opacidad —
   que además es lo correcto cuando alguien pidió menos movimiento.

   Va al FINAL del archivo a propósito: .esc-card-front/.esc-card-back se
   definen más abajo que el bloque general, así que una regla colocada allá
   arriba perdería por orden de cascada. */
@media (prefers-reduced-motion: reduce) {
  .why-card-inner,
  .esc-card-inner {
    transform: none !important;
  }

  /* Los selectores de #escenarios llevan el ID delante a propósito: la regla
     que pone backface-visibility:hidden es "#escenarios .esc-card-back", y sin
     igualar esa especificidad esto no ganaría. */
  .why-card-face,
  #escenarios .esc-card-front,
  #escenarios .esc-card-back {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }

  .why-card-back,
  #escenarios .esc-card-back {
    opacity: 0;
  }

  .why-card.is-flipped .why-card-front,
  #escenarios .esc-card.is-flipped .esc-card-front {
    opacity: 0;
  }

  .why-card.is-flipped .why-card-back,
  #escenarios .esc-card.is-flipped .esc-card-back {
    opacity: 1;
  }
}

/* ── Copias de dos renglones ─────────────────────────────────────────────
   Tres párrafos llevan un <br> en el i18n para partirse justo por la mitad
   (escenarios, por qué Joy Tree y ubicación). El <br> marca DÓNDE cortar,
   pero no garantiza que cada mitad quepa en un renglón: con los 42rem de
   .section-copy cada mitad se volvía a partir y salían cuatro. Aquí se
   ensancha la copia —y la cabecera que la limita a 50rem— lo justo para que
   las dos mitades entren enteras.

   Va al final del archivo a propósito: #escenarios .section-copy (44rem) y
   .location-copy (68ch) se declaran más abajo con la misma especificidad o
   más, así que un bloque colocado junto a .section-copy--center perdía por
   orden de cascada.

   Solo de 1200px hacia arriba: por debajo no hay ancho físico para 117
   caracteres y el texto se reparte en los renglones que necesite. */
@media (min-width: 1200px) {
  #escenarios .section-heading--center { max-width: 68rem; }
  #escenarios .section-copy.section-copy--center { max-width: 66rem; }

  #why-joytree .section-heading--center { max-width: 60rem; }
  #why-joytree .section-copy.section-copy--center { max-width: 58rem; }

  .location-header .location-copy { max-width: 74rem; }
}

/* ── Cabecera del panel de contacto y paso 1 del formulario ─────────────
   El panel ya no lleva <h3>: se quitó "¿Listo para dar el siguiente paso?"
   y el párrafo quedó como única entrada, así que sube de tamaño para hacer
   de encabezado sin competir con el <h2> de la sección.

   El título del paso 1 se centra sobre las tarjetas —que ya van centradas
   con flex-wrap + justify-content: center—, así el bloque completo queda
   simétrico. Va al final del archivo porque .wizard-step-title se declara
   más arriba con la misma especificidad. */
.contact-panel-heading p {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;   /* reparte los renglones en vez de dejar uno corto suelto */
  margin-inline: auto;
  max-width: 34rem;
  color: rgba(var(--brand-sand-rgb), 0.86);
}

.wizard-step-title {
  width: 100%;
  text-align: center;
}

/* ── Simetría de las 5 tarjetas de perfil ───────────────────────────────
   Con `flex: 1 1 13rem; max-width: 16rem` la fila de 3 salía de 212px y la
   de 2 se estiraba hasta el tope de 16rem (256px): dos anchos distintos en
   el mismo bloque. Y al acortarse los textos ("Vivir en Joy Tree" cabe en
   un renglón, "Invertir para crecer mi patrimonio" en dos) las alturas se
   desnivelaron, 118px arriba contra 98px abajo.

   Se fija el ancho en un tercio exacto del contenedor —así la fila corta
   de abajo mide lo mismo que las de arriba, centrada— y se reserva en la
   etiqueta el alto de dos renglones para que las cinco midan igual. */
@media (min-width: 576px) {
  .wizard-card {
    flex: 0 1 calc((100% - 1.8rem) / 3);
    max-width: calc((100% - 1.8rem) / 3);
  }
}

.wizard-card > span:not(.wizard-card-check) {
  display: block;
  min-height: 2.7em;   /* 2 renglones a line-height 1.35 */
}

/* El selector de lada pasó de 2 opciones a ~50 países agrupados. Con 4.5rem
   el texto cerrado quedaba pegado a la flecha; se le da algo más de aire.
   Sigue mostrando solo bandera + código: el nombre del país únicamente hace
   falta en el desplegable abierto, que lo pinta el sistema a su ancho. */
.contact-form .phone-country-select {
  flex: 0 0 4.9rem;
  width: 4.9rem;
}

/* #escenarios usa .story-section--explore, cuyo kicker lleva max-width:34rem
   —pensado para los encabezados alineados a la izquierda—. Dentro de un
   heading centrado esa caja se quedaba pegada al borde izquierdo y el texto
   se veía descolocado, aunque su text-align fuera center. El título de al
   lado ya se centra con margin-inline:auto; el kicker faltaba. */
#escenarios .section-heading--center .section-kicker {
  margin-inline: auto;
}

/* La firma de Julio Amezcua es ahora su rúbrica real en imagen, no el texto
   "— Julio Amezcua". El <cite> deja de aportar tipografía y solo encuadra la
   imagen; el nombre sigue en el alt para lectores de pantalla. El ancho es
   relativo al bloque para que acompañe a la cita al reducirse la pantalla. */
.amezcua-quote-block .amezcua-quote-sign {
  display: block;
  margin-top: 1.5rem;
  line-height: 0;
}

/* Discreta, del ancho que ocupaba el texto "— JULIO AMEZCUA" que sustituye
   (unos 140px): es una firma al pie, no un segundo titular.
   Va pegada a la derecha con margin-left:auto y no con text-align, que sobre
   un elemento en display:block no mueve nada: lo que se centra o alinea con
   text-align es el contenido en línea, y aquí la imagen ES el bloque. Al pie
   de una cita, la rúbrica cierra a la derecha como en una carta firmada. */
.amezcua-sign-img {
  display: block;
  width: clamp(10.5rem, 15vw, 13.5rem);
  height: auto;
  margin-left: auto;
  margin-right: 0;
  opacity: 0.94;
}

/* ── Tarjetas de contacto rápido ────────────────────────────────────────
   Compartían el relleno de .feature-card (1.4rem 1.5rem), pensado para
   tarjetas con párrafo: aquí solo hay una etiqueta y un dato, 40px de texto
   dentro de una caja de 116px. Se recorta el relleno y se sube el cuerpo de
   ambas líneas para que la proporción entre caja y contenido tenga sentido. */
.contact-points .contact-point {
  /* De flex-wrap a rejilla: antes el icono ocupaba una primera fila entera
     (40px) con la etiqueta al lado y el dato caía debajo con una sangría de
     3.35rem que imitaba una segunda columna. Ahora la columna existe de
     verdad —el icono abarca las dos filas— y la caja mide lo que mide su
     contenido en lugar de arrastrar el alto del icono. */
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.85rem;
  row-gap: 0.15rem;
  align-items: center;
  padding: 1rem 1.25rem;
}

.contact-points .contact-point .contact-icon {
  grid-row: span 2;
}

.contact-points .contact-point .contact-point-label,
.contact-points .contact-point .contact-point-value {
  flex: none;
  margin-left: 0;
  grid-column: 2;
}

.contact-point .contact-point-label {
  font-size: 0.74rem;
}

.contact-point .contact-point-value {
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.35;
}

/* ── Columna de marca del pie ───────────────────────────────────────────
   Al retirarse el sello "By TAO" la columna quedó con un logo de 160px y
   cuatro botones de 42 en un ancho de 440–560px: mucho aire muerto a la
   derecha. Logo e iconos crecen para ocupar la columna, manteniendo la
   alineación de la tinta del logo con el borde de los botones. */
.site-footer-brand {
  --footer-logo-w: clamp(11rem, 17vw, 15rem);
}

.site-footer .social-links {
  gap: 0.85rem;
}

.site-footer .social-link {
  width: 3.35rem;
  height: 3.35rem;
  font-size: 1.15rem;
}

/* ══════════════════════════════════════════════
   FICHA DE PRENSA  ·  press-modal-*
   Se abre al pulsar un sello de "Publicado y reconocido por". El visitante ve
   de qué va el artículo sin salir del sitio; irse es un segundo clic suyo.
══════════════════════════════════════════════ */
.press-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
.press-modal[hidden] { display: none; }

.press-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 12, 6, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 240ms ease;
}
.press-modal.is-open .press-modal-overlay { opacity: 1; }

.press-modal-panel {
  position: relative;
  /* Sube de 34rem: la ficha ya no es un aviso de dos líneas sino el artículo
     resumido, con cuerpo, datos y cita. A 34rem las líneas quedaban tan
     cortas que el texto parecía una columna de periódico. */
  width: min(46rem, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  background: var(--page-bg-deep, #101a10);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.30);
  border-radius: 1.1rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  /* Entra desde abajo, no desde el centro: la ficha nace del sello que se
     acaba de pulsar, que siempre queda por debajo en la página. */
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 240ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
}
.press-modal.is-open .press-modal-panel {
  opacity: 1;
  transform: none;
}

.press-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.22);
  border-radius: 50%;
  color: rgba(var(--brand-sand-rgb), 0.85);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.press-modal-close svg { width: 1rem; height: 1rem; }
.press-modal-close:hover { border-color: rgba(var(--brand-canopy-rgb), 0.6); color: var(--brand-canopy); }

.press-modal-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 2.5rem 0.85rem 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.press-modal-source { color: var(--brand-canopy); font-weight: 600; }
.press-modal-sep,
.press-modal-kind,
.press-modal-date { color: rgba(var(--brand-sand-rgb), 0.60); }

.press-modal-title {
  font-family: var(--font-serif);
  /* El titular va en su idioma original: es una cita textual de la
     publicación, no un texto nuestro que se traduzca. */
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.28;
  color: var(--brand-sand);
  margin: 0 0 0.85rem;
}

/* Entradilla: un punto más grande que el cuerpo, como en cualquier revista */
.press-modal-lead {
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(var(--brand-sand-rgb), 0.92);
  margin: 0 0 1.35rem;
}

.press-modal-body p {
  font-size: 0.94rem;
  line-height: 1.68;
  color: rgba(var(--brand-sand-rgb), 0.80);
  margin: 0 0 1rem;
}

/* Datos duros del proyecto, en rejilla. Solo aparecen en los dos artículos
   reales; en los perfiles el bloque se oculta desde JS. */
.press-modal-data {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem 1.25rem;
  list-style: none;
  margin: 1.35rem 0;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.18);
  border-radius: 0.6rem;
  background: rgba(var(--brand-canopy-rgb), 0.04);
}
.press-modal-data li {
  position: relative;
  padding-left: 0.9rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(var(--brand-sand-rgb), 0.78);
}
.press-modal-data li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-canopy);
}

/* Cita textual del arquitecto. Va marcada como cita —filete y cursiva— para
   que se distinga a simple vista del resumen, que es texto nuestro. */
.press-modal-quote {
  margin: 1.5rem 0;
  padding-left: 1.1rem;
  border-left: 2px solid rgba(var(--brand-canopy-rgb), 0.45);
}
.press-modal-quote p {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--brand-sand);
  margin: 0 0 0.5rem;
}
.press-modal-quote cite {
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--brand-sand-rgb), 0.58);
}

/* Fuente al pie: es la atribución que acompaña a la cita, no un adorno */
.press-modal-source-note {
  margin: 1.35rem 0 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.14);
  font-size: 0.74rem;
  color: rgba(var(--brand-sand-rgb), 0.55);
}

.press-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.press-modal-go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.press-modal-go svg { width: 0.9rem; height: 0.9rem; }

/* "Cerrar artículo" heredaba el color casi negro del botón base sobre un panel
   casi negro: 1.1:1 de contraste, es decir, invisible. Se le da tinta y
   contorno propios — es la salida del modal y tiene que verse. */
.press-modal-actions .btn:not(.joytree-btn--accent) {
  color: rgba(var(--brand-sand-rgb), 0.88);
  background: transparent;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.38);
}
.press-modal-actions .btn:not(.joytree-btn--accent):hover,
.press-modal-actions .btn:not(.joytree-btn--accent):focus-visible {
  color: var(--brand-canopy);
  border-color: rgba(var(--brand-canopy-rgb), 0.75);
  background: rgba(var(--brand-canopy-rgb), 0.06);
}

.press-modal-note {
  margin: 0.9rem 0 0;
  font-size: 0.72rem;
  color: rgba(var(--brand-sand-rgb), 0.55);
}

/* Bloquea el scroll del fondo mientras la ficha está abierta */
body.press-modal-open { overflow: hidden; }

@media (max-width: 575.98px) {
  .press-modal-panel { width: 100%; padding: 1.5rem 1.15rem; }
  .press-modal-actions .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .press-modal-overlay,
  .press-modal-panel { transition: none; }
}

/* ══ Despliegue de las promesas — presentación ══════════════════════════════ */

/* La fila abierta se marca con un filete vertical en el acento, no con un
   velo de fondo: el velo dibujaba un rectángulo gris de borde recto que
   ensuciaba una columna hecha a base de líneas finas. */
.promise-item {
  position: relative;
  transition: padding-left 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.promise-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15rem;
  bottom: 1.15rem;
  width: 2px;
  border-radius: 2px;
  background: var(--hero-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.promise-item.is-open { padding-left: 0.9rem; }
.promise-item.is-open::before { transform: scaleY(1); }

.promise-item.is-open .promise-num {
  color: var(--hero-accent);
  transform: scale(1.15);
}

.promise-num { transition: color 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1); }

/* El chevron pasa a un aspa: girar 45° una cruz da el mismo gesto de
   "cerrar" que ya usan el resto de diálogos del sitio. */
.promise-chevron {
  position: relative;
  width: 0.9rem;
  height: 0.9rem;
  border: 0;
  transform: none;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.promise-chevron::before,
.promise-chevron::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: rgba(var(--brand-sand-rgb), 0.55);
  transition: background 220ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.promise-chevron::after { transform: rotate(90deg); }

.promise-trigger[aria-expanded="true"] .promise-chevron { transform: rotate(135deg); }
.promise-trigger[aria-expanded="true"] .promise-chevron::before,
.promise-trigger[aria-expanded="true"] .promise-chevron::after { background: var(--hero-accent); }

.promise-panel-inner {
  padding-top: 1.15rem;
  padding-bottom: 0.35rem;
}

/* ── Entrada escalonada ──────────────────────────────────────────────────────
   El video y las fotos no aparecen de golpe con el panel: suben en cascada.
   El retardo va por :nth-child y no en línea para que añadir una foto no
   obligue a tocar el HTML. */
@keyframes promiseReveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.promise-panel.is-open .promise-video-wrap,
.promise-panel.is-open .promise-shot,
.promise-panel.is-open .promise-scheme,
.promise-panel.is-open .promise-cta {
  animation: promiseReveal 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.promise-panel.is-open .promise-video-wrap { animation-delay: 60ms; }
.promise-panel.is-open .promise-shot:nth-child(1),
.promise-panel.is-open .promise-scheme:nth-child(1) { animation-delay: 130ms; }
.promise-panel.is-open .promise-shot:nth-child(2),
.promise-panel.is-open .promise-scheme:nth-child(2) { animation-delay: 200ms; }
.promise-panel.is-open .promise-shot:nth-child(3),
.promise-panel.is-open .promise-scheme:nth-child(3) { animation-delay: 270ms; }
.promise-panel.is-open .promise-shot:nth-child(4) { animation-delay: 340ms; }
.promise-panel.is-open .promise-cta { animation-delay: 380ms; }

/* ── Video del panel ── */
.promise-video-wrap {
  position: relative;
  border-radius: 1rem;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(var(--brand-sand-rgb), 0.10);
  margin-bottom: 0.75rem;
}

/* Sombra interior en los bordes: sin ella el video se recorta a hueso contra
   el fondo oscuro y se ve pegado. */
.promise-video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45);
}

/* ── Galería ── */
.promise-gallery { gap: 0.55rem; }

.promise-shot {
  position: relative;
  border-radius: 0.75rem;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.08);
}

.promise-shot img { aspect-ratio: 1 / 1; }

/* El pie aparece al pasar por encima, sobre un degradado que lo hace legible
   sin oscurecer la foto entera. En táctil no hay hover: ahí se muestra fijo
   (ver la consulta de abajo). */
.promise-shot-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem 0.6rem 0.5rem;
  font-size: 0.7rem;
  line-height: 1.35;
  color: rgba(var(--brand-sand-rgb), 0.92);
  background: linear-gradient(180deg, transparent, rgba(var(--brand-ink-rgb), 0.92));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 280ms ease, transform 280ms ease;
}

.promise-shot:hover .promise-shot-cap,
.promise-shot:focus-within .promise-shot-cap {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .promise-shot-cap { opacity: 1; transform: none; }
}

/* ── Esquemas de pago ── */
.promise-scheme {
  transition: border-color 240ms ease, background 240ms ease;
}

.promise-scheme:hover {
  border-color: rgba(var(--brand-canopy-rgb), 0.35);
  background: rgba(var(--brand-ink-rgb), 0.72);
}

.promise-cta {
  margin-top: 0.15rem;
  transition: color 200ms ease, border-color 200ms ease, letter-spacing 200ms ease;
}

.promise-cta:hover { letter-spacing: 0.13em; }

@media (prefers-reduced-motion: reduce) {
  .promise-item, .promise-item::before { transition: none; }
  .promise-panel.is-open .promise-video-wrap,
  .promise-panel.is-open .promise-shot,
  .promise-panel.is-open .promise-scheme,
  .promise-panel.is-open .promise-cta { animation: none; }
  .promise-num, .promise-chevron, .promise-chevron::before, .promise-chevron::after { transition: none; }
}