:root {
  --page-bg-deep: #061113;
  --page-bg-mid: #0b1e23;
  --page-bg-soft: #132821;
  --page-panel: rgba(var(--brand-ink-soft-rgb), 0.84);
  --page-panel-strong: rgba(var(--brand-ink-soft-rgb), 0.94);
  --page-panel-soft: rgba(var(--brand-sage-rgb), 0.12);
  --page-line: rgba(var(--brand-sand-rgb), 0.09);
  --page-line-strong: rgba(var(--brand-canopy-rgb), 0.36);
  --page-water-soft: rgba(var(--brand-water-rgb), 0.22);
  --page-sage-soft: rgba(var(--brand-sage-rgb), 0.18);
  --page-earth-soft: rgba(var(--brand-earth-rgb), 0.22);
  --page-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  --page-shadow-strong: 0 30px 80px rgba(0, 0, 0, 0.34);
}

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

body.joytree-home {
  background:
    radial-gradient(circle at top, rgba(var(--brand-water-rgb), 0.34) 0%, rgba(var(--brand-water-rgb), 0) 34%),
    linear-gradient(180deg, var(--brand-ink-soft) 0%, 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;
}

/* ── 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 {
  display: inline-flex;
  align-items: center;
}

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

.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;
}

.story-section--explore {
  padding: 0;
  background:
    radial-gradient(circle at 85% 18%, rgba(var(--brand-water-rgb), 0.22), transparent 34%),
    linear-gradient(180deg, var(--page-bg-mid), var(--brand-ink));
}

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

.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.78), rgba(var(--brand-shadow-rgb), 0.82)),
    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 ──────────────────── */
.story-section--why {
  padding: clamp(4rem, 6.5vw, 6rem) 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(var(--brand-canopy-rgb), 0.07), transparent 38%),
    radial-gradient(circle at 90% 80%, rgba(var(--brand-sage-rgb), 0.10), transparent 34%),
    linear-gradient(180deg, rgba(var(--brand-ink-soft-rgb), 0.99) 0%, rgba(var(--brand-ink-rgb), 0.99) 100%);
}

.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);
}

.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);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 400;
  color: var(--hero-text);
  line-height: 1.25;
  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;
}

/* Tema claro */
html[data-theme="light"] .story-section--why {
  background:
    radial-gradient(circle at 10% 20%, rgba(var(--brand-canopy-rgb), 0.06), transparent 38%),
    linear-gradient(180deg, #f5f2eb 0%, #eee9d8 100%);
}

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.14), transparent 34%),
    linear-gradient(180deg, rgba(var(--brand-ink-rgb), 0.87) 0%, rgba(var(--brand-ink-soft-rgb), 0.90) 100%),
    url("../images/explora.jpg") center / cover no-repeat;
}

/* ── Location section: tipografía impactante ── */
.location-kicker {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.location-kicker::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 2.25rem;
  height: 1.5px;
  background: var(--brand-canopy);
  border-radius: 999px;
}

.location-title {
  font-size: clamp(2.8rem, 5vw, 6.5rem) !important;
  font-weight: 500 !important;
  line-height: 0.96 !important;
  margin-bottom: 0 !important;
}

.location-title em {
  font-style: normal;
  color: var(--brand-canopy);
}

.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: "Inter", sans-serif;
}

.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-ink-soft-rgb), 0.94), rgba(var(--brand-shadow-rgb), 0.96)),
    url("../images/explora.jpg") center/cover no-repeat;
}

.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;
}

.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);
  font-size: clamp(2rem, 5vw, 3.9rem);
  font-weight: 500;
  line-height: 0.94;
  text-transform: uppercase;
  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);
}

.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 {
  max-width: 42rem;
  font-size: clamp(2.05rem, 4vw, 3rem);
  line-height: 1.08;
  text-transform: none;
}

.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: 70svh;
  min-height: 480px;
  max-height: 820px;
  overflow: hidden;
  margin-bottom: 0;
}

.explore-entrance picture,
.explore-entrance 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 — borde superior siempre oscuro */
    linear-gradient(to bottom, rgba(7,19,22,0.82) 0%, transparent 30%),
    /* Izquierda→derecha — cobertura principal del texto, extenida a 82% */
    linear-gradient(to right, rgba(7,19,22,0.97) 0%, rgba(7,19,22,0.82) 30%, rgba(7,19,22,0.52) 62%, transparent 82%),
    /* Esquina inferior-izquierda — zona más densa donde vive el titular */
    linear-gradient(to top-right, rgba(7,19,22,0.99) 0%, rgba(7,19,22,0.80) 38%, rgba(7,19,22,0.28) 64%, transparent 78%),
    /* Capa radial dedicada: oscurece específicamente el bloque de texto */
    radial-gradient(ellipse 78% 62% at 16% 78%, rgba(7,19,22,0.72) 0%, rgba(7,19,22,0.22) 58%, transparent 82%),
    /* Acento canopy */
    radial-gradient(ellipse 90% 55% at 20% 100%, 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(7,19,22,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;
}

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

.explore-entrance-copy {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: clamp(2.5rem, 5vw, 6rem) clamp(2rem, 6vw, 7rem) clamp(3.5rem, 5vw, 5rem);
}

.explore-entrance-rule {
  display: block;
  width: 3rem;
  height: 1.5px;
  background: var(--brand-canopy);
  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;
  text-shadow: 0 1px 6px rgba(7,19,22,0.98), 0 2px 18px rgba(7,19,22,0.90);
}

.explore-entrance-headline {
  font-family: var(--font-serif);
  font-size: clamp(3.2rem, 8vw, 7.5rem);
  font-weight: 300;
  line-height: 0.97;
  color: var(--hero-text);
  margin: 0 0 1rem;
  opacity: 1;
  /* Halo en capas: sombra tight → bloom medio → aura amplia que oscurece el fondo */
  text-shadow:
    0 2px  5px  rgba(7,19,22,0.98),
    0 4px  22px rgba(7,19,22,0.92),
    0 10px 50px rgba(7,19,22,0.82),
    0 20px 90px rgba(7,19,22,0.62);
}

.explore-entrance-sub {
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  color: rgba(var(--brand-sand-rgb), 0.90);
  font-style: italic;
  letter-spacing: 0.03em;
  margin: 0;
  opacity: 1;
  text-shadow: 0 1px 8px rgba(7,19,22,0.98), 0 2px 22px rgba(7,19,22,0.88);
}

/* 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  { opacity: 0; transform: translateY(1.5rem); }
.explore-entrance--anim .explore-entrance-headline{ opacity: 0; transform: translateY(1.8rem); }
.explore-entrance--anim .explore-entrance-sub     { opacity: 0; transform: translateY(1.2rem); }
.explore-entrance--anim .explore-entrance-badge   { opacity: 0; }

/* 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;
  grid-template-columns: 54fr 46fr;
  min-height: clamp(34rem, 68vh, 56rem);
}

.philosophy-split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
  padding: clamp(4rem, 7vw, 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;
  padding: clamp(2rem, 4.5vw, 4rem) clamp(1.5rem, 3.5vw, 3rem);
}

/* Imagen de fondo: desvanecida y ligeramente borrosa — actúa como "aura"
   detrás de la tarjeta de video (poster estático, no el video en vivo —
   evita decodificar dos streams a la vez por una sola sección). ────── */
.philosophy-img-bg {
  position: absolute;
  inset: 0;
}

.philosophy-img-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  opacity: 0.30;
  filter: blur(6px) saturate(0.75);
}

/* 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%;
  max-height: 42rem;
  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);
}

.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(7, 19, 22, 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(7, 19, 22, 0.82);
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
  transform: scale(1.07);
}

/* ── Tags de rituales — eco de las 3 escenas del video ─────────── */
.philosophy-rituals {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
}

.philosophy-ritual-tag {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.28);
  background: rgba(var(--brand-canopy-rgb), 0.08);
  color: rgba(var(--brand-sand-rgb), 0.82);
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 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);
  font-size: clamp(2.6rem, 4.2vw, 4.4rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--hero-text);
  margin: 0;
}

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

/* 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;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
  .philosophy-split {
    grid-template-columns: 1fr;
  }
  .philosophy-split-visual {
    height: auto;
    padding: 2.75rem 1.5rem;
    order: -1;
  }
  /* 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(2.2rem, 9vw, 3.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;
  height: clamp(36rem, 72vh, 58rem);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.amezcua-hero picture,
.amezcua-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.amezcua-hero-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(7,19,22,0.18) 0%, rgba(7,19,22,0.55) 42%, rgba(7,19,22,0.92) 75%, rgb(7,19,22) 100%),
    linear-gradient(to right, rgba(7,19,22,0.55) 0%, transparent 68%);
}

.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: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brand-canopy);
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.amezcua-name {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(1.3rem, 3.6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--hero-text);
  margin: 0.6rem 0 1.5rem;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 40px rgba(0,0,0,0.5);
}

.amezcua-name-first {
  display: block;
  font-size: 1em;
  line-height: 1.2;
}

.amezcua-tagline {
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  color: rgba(var(--brand-sand-rgb), 0.68);
  font-style: italic;
  max-width: 42rem;
  margin: 0;
  line-height: 1.7;
}

.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 {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* ── Cita editorial: full-width centrada, por encima de las columnas ── */
.amezcua-quote-block {
  text-align: center;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(0rem, 8vw, 8rem) clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* En el bloque editorial la cita no lleva borde lateral */
.amezcua-quote-block .amezcua-quote-mark {
  margin-left: 0;
  font-size: clamp(3.5rem, 6vw, 5rem);
}

.amezcua-quote-block .amezcua-quote {
  border-left: none;
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  max-width: 40rem;
}

/* Línea separadora entre la cita y las columnas */
.amezcua-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(var(--brand-canopy-rgb), 0.30), transparent);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* Columnas simétricas: arrancan desde el tope */
.amezcua-body {
  align-items: flex-start;
}

.amezcua-kineki-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.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-serif);
  font-size: clamp(1.45rem, 2.8vw, 2.2rem);
  font-style: italic;
  font-weight: 300;
  color: rgba(var(--brand-sand-rgb), 0.92);
  line-height: 1.3;
}

.amezcua-quote-mark {
  display: block;
  font-size: 5.5rem;
  line-height: 0.45;
  color: var(--brand-canopy);
  opacity: 0.30;
  margin-bottom: 1rem;
  font-style: normal;
  margin-left: -0.4rem;
}

.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;
}

.kineki-card {
  background: linear-gradient(160deg, rgba(var(--brand-ink-soft-rgb),0.85), rgba(var(--brand-ink-rgb),0.75));
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.22);
  border-top: 2px solid var(--brand-canopy);
  border-radius: 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 1.5rem;
  box-shadow: 0 24px 64px rgba(0,0,0,0.30);
  position: relative;
  overflow: hidden;
}

.kineki-card::after {
  content: '66807';
  position: absolute;
  bottom: -1.5rem;
  right: -0.5rem;
  font-family: var(--font-serif);
  font-size: 8rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  color: rgba(var(--brand-canopy-rgb), 0.065);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.kineki-card-top {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
}

.kineki-card-badge {
  display: inline-block;
  font-size: 0.60rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.80);
  background: rgba(var(--brand-canopy-rgb), 0.08);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.20);
  border-radius: 999px;
  padding: 0.22rem 0.75rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.kineki-card-name {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--hero-text);
  margin: 0 0 0.4rem;
  line-height: 1;
}

.kineki-card-origin {
  font-size: 0.80rem;
  color: rgba(var(--brand-sand-rgb), 0.52);
  font-style: italic;
  margin: 0;
}

.kineki-card-origin em {
  font-style: normal;
  color: var(--brand-canopy);
}

.kineki-card-facts {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.kineki-card-facts li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: 0.87rem;
  line-height: 1.65;
  color: rgba(var(--brand-sand-rgb), 0.72);
}

.kineki-card-facts li strong { color: var(--hero-text); font-weight: 600; }

.kcf-icon {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--brand-canopy);
}

.kcf-icon svg { width: 100%; height: 100%; }

.kineki-card-patent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
}

.kcp-label {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--brand-sand-rgb), 0.40);
}

.kcp-num {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(var(--brand-canopy-rgb), 0.75);
  letter-spacing: 0.05em;
}

.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-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-serif);
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  font-weight: 300;
  color: var(--brand-canopy);
  line-height: 1;
  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;
  color: rgba(var(--brand-sand-rgb), 0.50);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════
   SECCIÓN INVERSIÓN
═══════════════════════════════════════════ */
.story-section--inversion {
  padding: clamp(4rem, 6.5vw, 6rem) 0;
  background:
    radial-gradient(circle at 8% 18%, rgba(var(--brand-earth-rgb), 0.10), transparent 32%),
    linear-gradient(180deg, rgba(var(--brand-ink-soft-rgb), 0.99) 0%, rgba(var(--brand-ink-rgb), 0.99) 100%);
}

.explore-lotes { margin-bottom: 0; padding-bottom: 0; padding-top: 2rem; }

.explore-lotes-title {
  font-size: clamp(1.9rem, 3.5vw, 3.4rem) !important;
  text-transform: none !important;
  line-height: 1.06 !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-serif);
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  font-weight: 400;
  color: var(--hero-accent);
  line-height: 1;
  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: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--brand-sand-rgb), 0.42);
  margin: 0 0 0.3rem;
}
.pv-pa-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  font-weight: 400;
  color: var(--brand-sand);
  margin: 0;
  line-height: 1.1;
}
.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;
}

/* ── PREVENTA BANNER — full width editorial ── */
.pv-banner {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  position: relative;
}

/* Meta bar: kicker izquierda + nota derecha */
.pv-banner-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  opacity: 0;
  transform: translateY(8px);
}
.pv-banner.is-visible .pv-banner-meta {
  animation: pvFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.pv-banner-kicker {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

/* Dot pulsante */
.pv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-canopy);
  flex-shrink: 0;
  animation: pvDotPulse 2.8s ease-in-out infinite;
}
@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; }
}

.pv-banner-kicker-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.78);
}

.pv-banner-note {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: rgba(var(--brand-sand-rgb), 0.42);
  margin: 0;
  text-align: right;
}

/* ── 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: 'Cormorant Garamond', serif;
  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;
  line-height: 1;
  text-shadow:
    0 0 60px rgba(var(--brand-canopy-rgb), 0.22),
    0 0 120px rgba(var(--brand-canopy-rgb), 0.10);
}

/* 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); }
html[data-theme="light"] .pv-banner-note { color: rgba(var(--brand-sand-rgb), 0.52); }
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;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  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;
}

.pv-detail-price {
  flex-shrink: 0;
  border-right: 1px solid rgba(var(--brand-canopy-rgb), 0.18);
  padding-right: clamp(1.5rem, 3vw, 3rem);
}

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

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

.pv-detail-cta { flex-shrink: 0; min-width: 220px; }

/* ── 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-banner-meta,
  .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 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 / -1; grid-row: 2; }
  .pv-detail-cta   { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; }
}
@media (max-width: 767px) {
  .pv-banner-meta { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .pv-banner-note { text-align: left; }
  .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; }
  .pv-detail-cta   { grid-column: 1; grid-row: 3; min-width: 0; width: 100%; }
}
@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);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 400;
  color: var(--hero-text);
  line-height: 1.15;
  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(7,19,22,0.82) 0%, transparent 30%),
    linear-gradient(to right, rgba(7,19,22,0.97) 0%, rgba(7,19,22,0.82) 30%, rgba(7,19,22,0.52) 62%, transparent 82%),
    linear-gradient(to top-right, rgba(7,19,22,0.99) 0%, rgba(7,19,22,0.80) 38%, rgba(7,19,22,0.28) 64%, transparent 78%),
    radial-gradient(ellipse 78% 62% at 16% 78%, rgba(7,19,22,0.72) 0%, rgba(7,19,22,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;
}

/* ═══════════════════════════════════════════════════════════
   CALCULADORA DE PAGO
═══════════════════════════════════════════════════════════ */
.story-section--calc {
  padding: clamp(4rem, 6.5vw, 6rem) 0;
  background:
    linear-gradient(180deg, rgba(var(--brand-ink-soft-rgb), 0.94) 0%, rgba(var(--brand-shadow-rgb), 0.96) 100%),
    url("../images/explora.jpg") center / cover no-repeat;
}
.calc-widget {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  background: linear-gradient(135deg,
    rgba(var(--brand-canopy-rgb), 0.06) 0%,
    rgba(var(--brand-ink-soft-rgb), 0.60) 100%
  );
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.14);
  border-radius: 1.25rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--page-shadow);
}
.calc-controls {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.calc-row {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.calc-label {
  font-size: 0.65rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.80);
}
.calc-price-display {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.calc-price-value {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 300;
  color: var(--hero-text);
  line-height: 1;
}
.calc-price-currency {
  font-size: 0.75rem;
  color: rgba(var(--brand-canopy-rgb), 0.70);
  letter-spacing: 0.12em;
}
.calc-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.calc-term-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.8rem 0 0.6rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--brand-sand-rgb), 0.4);
}
.calc-term-divider::before,
.calc-term-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(var(--brand-canopy-rgb), 0.14);
}
.calc-btn-group--interest .calc-btn {
  border-color: rgba(var(--brand-canopy-rgb), 0.18);
}
.calc-btn-group--interest .calc-btn.is-active {
  background: rgba(var(--brand-canopy-rgb), 0.85);
}
.calc-slider-wrap {
  position: relative;
  padding-top: 1.9rem;
}
.calc-slider-bubble {
  position: absolute;
  top: 0;
  left: 6.25%;
  transform: translateX(-50%);
  background: var(--brand-ink);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.65);
  color: var(--brand-canopy);
  font-family: var(--font-serif);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.3rem 0.6rem;
  border-radius: 0.4rem;
  white-space: nowrap;
  pointer-events: none;
  transition: left 0.05s linear;
}
.calc-slider-bubble::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--brand-ink);
  border-right: 1px solid rgba(var(--brand-canopy-rgb), 0.65);
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.65);
  transform: translateX(-50%) rotate(45deg);
}
.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2rem;
  background: linear-gradient(to right,
    var(--brand-canopy) 0%,
    var(--brand-canopy) var(--calc-slider-fill, 6.25%),
    rgba(var(--brand-canopy-rgb), 0.20) var(--calc-slider-fill, 6.25%),
    rgba(var(--brand-canopy-rgb), 0.20) 100%
  );
  outline: none;
  cursor: pointer;
  margin: 0;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-canopy);
  border: 2px solid var(--brand-ink);
  box-shadow: 0 0 0 1px rgba(var(--brand-canopy-rgb), 0.5);
  cursor: pointer;
  transition: transform 0.18s;
}
.calc-slider::-webkit-slider-thumb:hover,
.calc-slider:active::-webkit-slider-thumb { transform: scale(1.18); }
.calc-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-canopy);
  border: 2px solid var(--brand-ink);
  box-shadow: 0 0 0 1px rgba(var(--brand-canopy-rgb), 0.5);
  cursor: pointer;
  transition: transform 0.18s;
}
.calc-slider::-moz-range-thumb:hover,
.calc-slider:active::-moz-range-thumb { transform: scale(1.18); }
.calc-slider::-moz-range-track {
  height: 4px;
  border-radius: 2rem;
  background: transparent;
}
.calc-slider-ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 9px;
  margin-top: 0.55rem;
}
.calc-slider-tick {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(var(--brand-canopy-rgb), 0.28);
  transition: background 0.2s, transform 0.2s;
}
.calc-slider-tick.is-filled {
  background: rgba(var(--brand-canopy-rgb), 0.75);
}
.calc-slider-tick.is-current {
  background: var(--brand-canopy);
  transform: scale(1.9);
}
.calc-slider-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: rgba(var(--brand-sand-rgb), 0.45);
  margin-top: 0.35rem;
}
.calc-cash-toggle {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.22);
  border-radius: 0.7rem;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.22s, background 0.22s;
}
.calc-cash-toggle:hover {
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
}
.calc-cash-toggle-check {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--brand-canopy-rgb), 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.22s, border-color 0.22s;
}
.calc-cash-toggle-check svg {
  width: 11px;
  height: 11px;
  color: var(--brand-ink);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.18s, transform 0.18s;
}
.calc-cash-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.calc-cash-toggle-text strong {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hero-text);
}
.calc-cash-toggle-text small {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(var(--brand-sand-rgb), 0.55);
}
.calc-cash-toggle.is-active {
  border-color: var(--brand-canopy);
  background: rgba(var(--brand-canopy-rgb), 0.10);
}
.calc-cash-toggle.is-active .calc-cash-toggle-check {
  background: var(--brand-canopy);
  border-color: var(--brand-canopy);
}
.calc-cash-toggle.is-active .calc-cash-toggle-check svg {
  opacity: 1;
  transform: scale(1);
}
.calc-btn {
  padding: 0.45rem 1rem;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.25);
  background: transparent;
  color: var(--hero-muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  border-radius: 2rem;
  cursor: pointer;
  transition: border-color 0.22s, background 0.22s, color 0.22s;
}
.calc-btn:hover {
  border-color: rgba(var(--brand-canopy-rgb), 0.60);
  color: var(--hero-text);
}
.calc-btn.is-active {
  background: var(--brand-canopy);
  border-color: var(--brand-canopy);
  color: var(--brand-ink);
  font-weight: 600;
}
.calc-result {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(var(--brand-ink-rgb), 0.55);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
  border-radius: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: sticky;
  top: 5rem;
}
.calc-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
}
.calc-result-row--highlight {
  padding-top: 1.25rem;
}
.calc-result-row--highlight .calc-result-label {
  color: var(--brand-canopy);
}
.calc-result-row--highlight .calc-result-value {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  color: var(--brand-canopy);
}
.calc-result-row--interest {
  padding-top: 0.4rem;
}
.calc-result-row--interest .calc-result-label {
  color: rgba(var(--brand-sand-rgb), 0.5);
}
.calc-result-row--interest .calc-result-value {
  font-size: 0.95rem;
  color: rgba(var(--brand-sand-rgb), 0.75);
}
.calc-result-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--brand-sand-rgb), 0.65);
  white-space: nowrap;
}
.calc-result-value {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 300;
  color: var(--hero-text);
  text-align: right;
}
.calc-result-divider {
  height: 1px;
  background: rgba(var(--brand-canopy-rgb), 0.10);
  flex-shrink: 0;
}

/* ── Precio del lote: tachado a mano cuando hay descuento por enganche ── */
.calc-result-value--price {
  position: relative;
  display: inline-block;
}
.calc-result-value--price .calc-result-value-text {
  position: relative;
  display: inline-block;
  transition: color 380ms ease 360ms;
}
.calc-result-value--price.is-struck .calc-result-value-text {
  color: rgba(var(--brand-sand-rgb), 0.4);
}
.calc-strike-svg {
  position: absolute;
  left: 0;
  top: -20%;
  width: 100%;
  height: 140%;
  overflow: visible;
  pointer-events: none;
}
.calc-strike-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  opacity: 0;
  /* El SVG usa preserveAspectRatio="none" para que la línea siempre
     cubra el ancho del precio (que cambia de longitud según el texto).
     Sin esto, el grosor del trazo se estira junto con el viewBox y
     se vuelve desproporcionado — grueso hasta ilegible en el panel de
     resultados (más chico que donde se diseñó originalmente). Con
     non-scaling-stroke el trazo mantiene su grosor real en píxeles
     sin importar cuánto se estire el viewBox. */
  vector-effect: non-scaling-stroke;
}
.calc-strike-path-1 {
  stroke: var(--brand-canopy);
  stroke-width: 2;
  filter: drop-shadow(0 0 1.5px rgba(var(--brand-canopy-rgb), 0.6));
}
.calc-strike-path-2 {
  stroke: rgba(255, 246, 216, 0.92);
  stroke-width: 1.3;
  filter: drop-shadow(0 0 1px rgba(var(--brand-canopy-rgb), 0.45));
}
.calc-result-value--price.is-struck .calc-strike-path-1 {
  animation: calcStrikeDraw1 380ms cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
}
.calc-result-value--price.is-struck .calc-strike-path-2 {
  animation: calcStrikeDraw2 300ms cubic-bezier(0.55, 0.06, 0.68, 0.19) 210ms both;
}
@keyframes calcStrikeDraw1 {
  0%   { stroke-dashoffset: 340; opacity: 0; }
  6%   { opacity: 1; }
  92%  { stroke-dashoffset: -4; }
  100% { stroke-dashoffset: -4; opacity: 1; }
}
@keyframes calcStrikeDraw2 {
  0%   { stroke-dashoffset: 340; opacity: 0; }
  8%   { opacity: 0.88; }
  92%  { stroke-dashoffset: -4; }
  100% { stroke-dashoffset: -4; opacity: 0.88; }
}

/* ── Banner de descuento — ancho completo dentro del panel de resultados ── */
.calc-discount-reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms cubic-bezier(0.25, 0.8, 0.25, 1) 260ms;
}
.calc-discount-reveal.is-open {
  grid-template-rows: 1fr;
}
.calc-discount-reveal-inner {
  overflow: hidden;
  min-height: 0;
}
.calc-discount-banner {
  margin: 0.85rem 0;
  padding: clamp(0.9rem, 3vw, 1.2rem) clamp(1rem, 3.5vw, 1.3rem);
  border-radius: 0.8rem;
  background: linear-gradient(135deg, rgba(var(--brand-canopy-rgb), 0.14), rgba(var(--brand-canopy-rgb), 0.04));
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.28);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
}
.calc-discount-reveal.is-open .calc-discount-banner {
  animation: calcDiscountBannerIn 620ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both;
}
@keyframes calcDiscountBannerIn {
  0%   { opacity: 0; transform: translateY(14px) scale(0.96); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.calc-discount-banner-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.calc-discount-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.26rem 0.6rem 0.26rem 0.5rem;
  border-radius: 2rem;
  background: rgba(var(--brand-canopy-rgb), 0.16);
  color: var(--brand-canopy);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.calc-discount-tag svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.calc-discount-badge {
  display: inline-block;
  padding: 0.24rem 0.6rem;
  border-radius: 2rem;
  background: var(--brand-canopy);
  color: var(--brand-ink);
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0;
  transform: rotate(-8deg) scale(0.4);
}
.calc-discount-reveal.is-open .calc-discount-badge {
  animation: calcDiscountStamp 480ms cubic-bezier(0.34, 1.56, 0.64, 1) 640ms both;
}
@keyframes calcDiscountStamp {
  0%   { opacity: 0; transform: rotate(-10deg) scale(0.4); }
  60%  { opacity: 1; transform: rotate(3deg) scale(1.08); }
  100% { opacity: 1; transform: rotate(-4deg) scale(1); }
}
.calc-discount-new-price {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  opacity: 0;
}
.calc-discount-reveal.is-open .calc-discount-new-price {
  animation: calcDiscountFadeUp 460ms cubic-bezier(0.25, 0.8, 0.25, 1) 480ms both;
}
.calc-discount-new-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.68);
  width: 100%;
}
.calc-discount-new-value {
  position: relative;
  display: inline-block;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 500;
  background: linear-gradient(100deg,
    var(--brand-canopy) 25%,
    #fff8e2 48%,
    var(--brand-canopy) 68%
  );
  background-size: 240% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--brand-canopy);
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px rgba(var(--brand-canopy-rgb), 0.4);
}
.calc-discount-reveal.is-open .calc-discount-new-value {
  animation:
    calcDiscountShine 1400ms ease 760ms 1 both,
    calcDiscountGlow  2100ms ease 880ms 2;
}
@keyframes calcDiscountFadeUp {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes calcDiscountShine {
  from { background-position: 200% 0; }
  to   { background-position: -60% 0; }
}
@keyframes calcDiscountGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(var(--brand-canopy-rgb), 0.32); }
  50%      { text-shadow: 0 0 26px rgba(var(--brand-canopy-rgb), 0.9), 0 0 10px rgba(255, 255, 255, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .calc-result-value--price.is-struck .calc-strike-path-1,
  .calc-result-value--price.is-struck .calc-strike-path-2,
  .calc-discount-reveal.is-open .calc-discount-banner,
  .calc-discount-reveal.is-open .calc-discount-badge,
  .calc-discount-reveal.is-open .calc-discount-new-price,
  .calc-discount-reveal.is-open .calc-discount-new-value {
    animation: none;
  }
  .calc-result-value--price.is-struck .calc-strike-path-1,
  .calc-result-value--price.is-struck .calc-strike-path-2 {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  .calc-discount-reveal.is-open .calc-discount-banner,
  .calc-discount-reveal.is-open .calc-discount-new-price {
    opacity: 1;
    transform: none;
  }
  .calc-discount-reveal { transition-duration: 200ms; transition-delay: 0ms; }
}

.calc-result-note {
  font-size: 0.72rem;
  color: rgba(var(--brand-sand-rgb), 0.48);
  margin-top: 1.25rem;
  margin-bottom: 0;
  line-height: 1.6;
  text-align: center;
}

/* Light theme adjustments */
html[data-theme="light"] .calc-widget {
  background: linear-gradient(135deg,
    rgba(var(--brand-canopy-rgb), 0.06) 0%,
    rgba(var(--brand-sand-rgb), 0.06) 100%
  );
}
html[data-theme="light"] .calc-result {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(var(--brand-sand-rgb), 0.12);
}
html[data-theme="light"] .calc-btn {
  color: rgba(var(--brand-sand-rgb), 0.65);
}
html[data-theme="light"] .calc-btn:hover { color: var(--brand-sand); }
html[data-theme="light"] .calc-btn.is-active { color: var(--brand-sand); }
html[data-theme="light"] .calc-result-value { color: var(--brand-sand); }
html[data-theme="light"] .calc-price-value { color: var(--brand-sand); }

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

/* ── Tablet: 768px – 991px ───────────────────────────────── */
@media (max-width: 991.98px) {
  /* Preamble */
  .explore-entrance { max-height: 720px; }
  .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(2.6rem, 7vw, 4.8rem); }

  /* Amezcua header */
  .amezcua-hero { height: clamp(30rem, 65vh, 48rem); }
  .amezcua-name { font-size: clamp(4rem, 12vw, 9rem); }

  /* Amezcua body row — stacks at lg */
  .amezcua-body-wrap { padding-bottom: 2.5rem; }
  .amezcua-story { font-size: 0.95rem; }
  .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; }

  /* Calculadora */
  .calc-widget { grid-template-columns: 1fr; }
  .calc-result { position: static; }
}

/* ── Mobile: 576px – 767px ───────────────────────────────── */
@media (max-width: 767.98px) {
  /* Preamble */
  .explore-entrance { height: 92svh; min-height: 480px; max-height: 780px; }
  .explore-entrance-headline { font-size: clamp(2.5rem, 10vw, 4rem); }
  .explore-entrance-copy { padding: 2rem 1.5rem 2.5rem; }
  .explore-entrance-scroll { display: none; }

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

  /* Amezcua */
  .amezcua-hero { height: clamp(28rem, 58vh, 44rem); }
  .amezcua-name { font-size: clamp(3.2rem, 14vw, 6rem); }
  .amezcua-tagline { font-size: 0.9rem; }
  .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-quote-block .amezcua-quote-mark { font-size: 3rem; }
  .amezcua-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .amezcua-stat-num { font-size: clamp(1.8rem, 7vw, 2.6rem); }

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

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

  /* Calculadora */
  .calc-btn-group { gap: 0.4rem; }
  .calc-btn { padding: 0.4rem 0.85rem; font-size: 0.75rem; }
  .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-headline { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .explore-entrance-copy { padding: 1.5rem 1.25rem 2rem; }

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

  /* Amezcua */
  .amezcua-hero { height: clamp(24rem, 55vh, 38rem); }
  .amezcua-name { font-size: clamp(2.8rem, 15vw, 4.5rem); letter-spacing: -0.015em; }
  .amezcua-eyebrow { font-size: 0.60rem; letter-spacing: 0.22em; }
  .amezcua-tagline { font-size: 0.85rem; }
  .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-mark { font-size: 2.2rem; }
  .amezcua-quote-block { padding: 1rem 0.5rem 0.75rem; }
  .amezcua-quote-block .amezcua-quote { font-size: 1.1rem; }
  .amezcua-quote-block .amezcua-quote-mark { font-size: 2.5rem; }
  .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; }

  /* Kineki card */
  .kineki-card { padding: 1.25rem; }
  .kineki-card-name { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .kcf-icon { width: 1rem; height: 1rem; }
  .kineki-card-facts li { font-size: 0.82rem; gap: 0.65rem; }

  /* Calculadora */
  .calc-widget { padding: 1.25rem; gap: 1.5rem; }
  .calc-btn-group { gap: 0.35rem; }
  .calc-btn { padding: 0.38rem 0.75rem; font-size: 0.72rem; }
  .calc-price-value { font-size: clamp(1.5rem, 8vw, 2rem); }
  .calc-result-row--highlight .calc-result-value { font-size: clamp(1.2rem, 6vw, 1.5rem); }

  /* 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;
}

.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,
.site-footer-badge {
  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,
.contact-panel-heading h3,
.site-footer-title {
  margin: 0 0 0.55rem;
  font-family: "Inter", sans-serif;
  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-copy,
.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-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 0.9;
  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);
}

.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;
}

/* ── Columna de cards: ocupa toda la altura de la row ─────── */
.location-cards-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.location-cards-col .section-actions {
  margin-top: auto;
  padding-top: 1.75rem;
}

/* ── Mapa: altura fluida en la row de cuerpo ─────────────── */
.location-body .map-frame {
  height: 100%;
  min-height: 22rem;
  aspect-ratio: unset;
}

/* ── Mapa expandido in-page ─────────────────────────────────
   ≥992px (lg): la row cards|mapa es un CSS Grid de 2 columnas.
   grid-template-columns SÍ se puede animar con transition siempre
   que el número de tracks no cambie — por eso la expansión ocurre
   en dos fases controladas por JS (ver bindMapExpand en map.js),
   en vez de saltar directo a un grid de 1 columna / 2 filas:

   Fase 1 — .is-map-expanded:      2 columnas → 0fr / 1fr
            (el mapa crece, las cards se desvanecen hacia la
            izquierda con opacity, sin saltar de forma).
   Fase 2 — + .is-map-stacked:     grid de 1 columna, mapa arriba,
            cards abajo a todo el ancho (el "salto" de forma ocurre
            mientras las cards están invisibles, así que no se nota).

   Bootstrap's row/col siguen aplicando tal cual en <992px — ese
   rango ya apila por su cuenta y el botón de expandir está oculto.
──────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
  .location-body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto;
    grid-template-areas: "cards map";
    align-items: stretch;
    transition: grid-template-columns 620ms cubic-bezier(0.65, 0, 0.35, 1);
  }
  .location-body > .col-lg-5 {
    grid-area: cards;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: start;
    transition: opacity 300ms ease;
  }
  /* El track de cards puede encogerse a 0fr durante la Fase 1, pero su
     contenido NUNCA debe re-flowearse a un ancho menor — eso dispara
     un salto de altura (texto envolviendo a 1 palabra por línea) que
     jala la fila entera (align-items:stretch) y se ve como si el mapa
     "saltara" de golpe. Con este piso de ancho, la columna se queda
     con su forma normal y overflow:hidden simplemente la recorta. */
  .location-body > .col-lg-5 .location-cards-col { min-width: 30rem; }

  .location-body > .col-lg-7 { grid-area: map; width: 100%; max-width: 100%; }

  .location-body.is-map-expanded {
    grid-template-columns: 0fr 1fr;
  }
  .location-body.is-map-expanded > .col-lg-5 {
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .location-body.is-map-expanded .map-frame {
    min-height: 34rem;
    transition: min-height 620ms cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* Fase 2: forma final apilada — mapa arriba, cards abajo */
  .location-body.is-map-stacked {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "map" "cards";
  }
  .location-body.is-map-stacked > .col-lg-5 {
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
    transition: opacity 420ms ease 80ms;
  }

  /* Con todo el ancho disponible, las 8 cards respiran mejor en 4 columnas */
  .location-body.is-map-stacked .location-list {
    grid-template-columns: repeat(4, 1fr);
  }
  .location-body.is-map-stacked .location-cards-col .section-actions {
    margin-top: 1.5rem;
  }
}

/* ── Lista de distancias ─────────────────────────────────── */
.location-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
  margin-top: 0;
  align-content: start;
}

/* 8 items fluyen naturalmente en 4 filas de 2 — sin regla especial para el último */

.location-item {
  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;
}

/* 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-serif);
  font-size: 1.35rem;
  line-height: 1;
}

/* 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; }

.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; }

/* 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(7, 19, 22, 0.30) 0%,
      transparent 22%,
      transparent 72%,
      rgba(7, 19, 22, 0.22) 100%
    ),
    radial-gradient(
      ellipse 80% 75% at 56% 54%,
      transparent 34%,
      rgba(7, 19, 22, 0.32) 66%,
      rgba(7, 19, 22, 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(7, 19, 22, 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(7,19,22,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(7, 19, 22, 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(7, 19, 22, 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: #071316 !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(7, 19, 22, 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: "Inter", sans-serif;
  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(7, 19, 22, 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: 'Inter', sans-serif;
  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: #071316;
}

/* ── Botón "Abrir mapa" — expande el contenedor in-page ────────
   Espejo del pill "Joy Tree" (bottom-right) en la esquina opuesta,
   simetría intencional en las dos esquinas inferiores del mapa. ── */
.map-expand-btn {
  /* Apilado justo arriba del pill "Joy Tree" (misma esquina, mismo
     ancho de padding/tipografía) — no en la esquina opuesta. */
  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(7, 19, 22, 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: 'Inter', sans-serif;
  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.is-active {
  background: var(--brand-canopy);
  color: var(--brand-ink);
}

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

html[data-theme="light"] .map-poi-filter ~ .map-expand-btn,
html[data-theme="light"] .map-expand-btn {
  background: rgba(247, 243, 235, 0.86);
  border-color: rgba(26, 43, 46, 0.22);
  color: #1a2b2e;
}
html[data-theme="light"] .map-expand-btn.is-active {
  background: var(--brand-canopy);
  color: #071316;
}

/* Por debajo de 992px (lg) el layout ya apila mapa arriba / cards abajo
   —incluye teléfonos y iPad en portrait— así que expandir no aporta
   nada nuevo ahí y el botón se oculta. En iPad landscape (≥992px) y
   desktop, donde sí hay dos columnas lado a lado, el botón aparece. */
@media (max-width: 991.98px) {
  .map-expand-btn { display: none; }
}

/* 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: "Inter", sans-serif;
  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: #071316;
  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;
}

.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);
}

.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;
}

.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 {
  display: inline-flex;
  margin-bottom: 1.1rem;
}

.site-footer-brand img {
  width: clamp(8rem, 13vw, 10rem);
  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);
}

.site-footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(var(--brand-sand-rgb), 0.08);
}

.site-footer-badge {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.26);
  background: rgba(var(--brand-canopy-rgb), 0.1);
  color: var(--hero-accent);
  font-size: 0.7rem;
  font-weight: 700;
}

.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(100vh - 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);
  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-title {
    font-size: clamp(2.4rem, 5.5vw, 4.4rem) !important;
  }

  .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,
  .site-footer-bar {
    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;
  }

  .location-title {
    font-size: clamp(2rem, 9vw, 3.2rem) !important;
  }

  .location-kicker::before {
    width: 1.5rem;
  }

  /* 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 */
  .location-list {
    grid-template-columns: 1fr;
  }
  .location-list .location-item:last-child {
    grid-column: auto;
  }

  /* 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;
  }
}

/* ══════════════════════════════════════════════════════════════
   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-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 220ms ease, background-color 220ms ease, transform 220ms ease;
}

.lang-btn--active {
  border-color: rgba(var(--brand-canopy-rgb), 0.5);
  background: rgba(var(--brand-canopy-rgb), 0.1);
}

.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:      #7d6e30;
  --hero-accent-soft: rgba(125, 110, 48, 0.32);

  /* ── Semantic / hero vars (used in body + non-photo sections) ── */
  --hero-text:    #1a2b2e;
  --hero-muted:   rgba(26, 43, 46, 0.62);
  --hero-ring:    rgba(26, 43, 46, 0.12);
  --hero-surface: rgba(255, 255, 255, 0.72);
  --hero-border:  rgba(26, 43, 46, 0.1);
  --hero-ink:     rgba(247, 243, 235, 0.7);

  /* ── Page layout vars ── */
  --page-bg-deep:       #f7f3eb;
  --page-bg-mid:        #ede8dc;
  --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 ── */
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,
html[data-theme="light"] .story-section--calc {
  --brand-ink:          #071316;
  --brand-ink-rgb:      7, 19, 22;
  --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:        #c8c07e;
  --hero-ring:          rgba(165, 171, 137, 0.24);
  --hero-surface:       rgba(12, 29, 33, 0.44);
  --hero-border:        rgba(222, 215, 186, 0.14);
  --page-line:          rgba(222, 215, 186, 0.09);
  --page-line-strong:   rgba(200, 192, 126, 0.36);
}

/* ── Card de resultados de la calculadora: siempre dark ── */
html[data-theme="light"] .calc-result {
  --brand-ink-rgb:  7, 19, 22;
  --brand-sand-rgb: 222, 215, 186;
  --hero-text:      #ded7ba;
  --hero-accent:    #c8c07e;
  background: rgba(7, 19, 22, 0.72);
  border-color: rgba(200, 192, 126, 0.18);
  color: #ded7ba;
}

html[data-theme="light"] .calc-result-label {
  color: rgba(222, 215, 186, 0.65);
}

html[data-theme="light"] .calc-result-value,
html[data-theme="light"] .calc-result-row--highlight .calc-result-value {
  color: #ded7ba;
}

html[data-theme="light"] .calc-result-row--highlight .calc-result-label,
html[data-theme="light"] .calc-result-row--highlight .calc-result-value {
  color: #c8c07e;
}

html[data-theme="light"] .calc-result-divider {
  background: rgba(200, 192, 126, 0.12);
}

html[data-theme="light"] .calc-result-note {
  color: rgba(222, 215, 186, 0.48);
}

/* ── 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 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: #071316;
}

html[data-theme="light"] .joytree-nav-cta {
  color: #071316;
}

/* ── 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(7, 19, 22, 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(7, 19, 22, 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: #071316;
}

/* ── 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(7, 19, 22, 0.94) 0%,
    rgba(7, 19, 22, 0.58) 32%,
    rgba(7, 19, 22, 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(7, 19, 22, 0.55);
}

/* ── Contenido del slide ────────────────────────────────────────────────────── */
.amenity-slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem clamp(1.5rem, 6vw, 5rem) clamp(1.8rem, 4vw, 2.8rem);
  text-align: center;
  color: #fff;
}

.amenity-slide-content .amenity-icon {
  font-size: 2.6rem;
  color: var(--brand-canopy);
  margin-bottom: 0.15rem;
}

.amenity-slide-content .card-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-canopy);
  border: 1px solid rgba(200, 192, 126, 0.45);
  border-radius: 2rem;
  padding: 0.2rem 0.85rem;
}

.amenity-slide-content h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight: 500;
  color: #fff;
  margin: 0;
  line-height: 1.2;
  min-height: calc(clamp(1.75rem, 3.5vw, 2.6rem) * 2.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.amenity-slide-content p {
  font-size: clamp(0.875rem, 1.4vw, 1.05rem);
  color: rgba(255, 255, 255, 0.80);
  max-width: 52ch;
  margin: 0;
  line-height: 1.65;
}

/* ── 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(7, 19, 22, 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.5rem 1.1rem 1.6rem;
    gap: 0.35rem;
  }
  .amenity-slide-content .amenity-icon {
    font-size: 2rem;
  }
  .amenity-slide-content h3 {
    font-size: clamp(1.35rem, 5.5vw, 1.7rem);
    min-height: calc(clamp(1.35rem, 5.5vw, 1.7rem) * 2.4);
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .amenity-slide-content p {
    font-size: 0.8rem;
    max-width: 30ch;
  }
  .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) {
  .joytree-nav-link {
    padding: 0.65rem 0.7rem !important;
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    white-space: nowrap;
  }

  .joytree-nav-cta {
    padding: 0.6rem 0.95rem;
    font-size: 0.68rem;
    min-height: 2.65rem;
    white-space: nowrap;
  }

  .joytree-brand-logo {
    width: clamp(6rem, 14vw, 8rem);
  }

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

/* ── 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 (300m² / 5min / Escriturado) ── */
.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-serif);
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  font-weight: 400;
  color: var(--hero-accent);
  line-height: 1.05;
  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;
  opacity: 0.5;
  line-height: 1.3;
}

.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-serif);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 300;
  color: var(--hero-accent);
  line-height: 1.1;
  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-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

/* Nombre del ritual */
.rg-label {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 3.5vw, 2.1rem);
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ded7ba;
  line-height: 1.1;
}

/* Tagline bajo el nombre */
.rg-tagline {
  margin: 0;
  font-family: var(--font-body, sans-serif);
  font-size: clamp(0.72rem, 1.8vw, 0.9rem);
  font-style: italic;
  letter-spacing: 0.02em;
  color: rgba(222, 215, 186, 0.52);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 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;
}

/* ── Grid de imágenes ── */
.rg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 5vw, 3.5rem);
  align-content: start;
}

/* ── Tarjeta de imagen ── */
.rg-item {
  position: relative;
  margin: 0;
  border-radius: 0.9rem;
  overflow: hidden;
  opacity: 0;
  animation: rgItem 480ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  aspect-ratio: 4 / 3;
  background: rgba(12, 29, 33, 0.7);
  cursor: default;
}

.rg-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Caption con título y descripción ── */
.rg-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2.5rem 1.1rem 1.1rem;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(4, 14, 16, 0.55) 35%,
    rgba(4, 14, 16, 0.92) 100%
  );
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transform: translateY(0);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rg-caption-title {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #ded7ba;
  line-height: 1.25;
}

.rg-caption-desc {
  display: block;
  font-size: clamp(0.68rem, 1.2vw, 0.78rem);
  color: rgba(222, 215, 186, 0.65);
  line-height: 1.45;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 380ms ease, opacity 320ms ease;
}

/* Desktop: descripción aparece en hover */
@media (hover: hover) {
  .rg-item:hover img {
    transform: scale(1.06);
  }
  .rg-item:hover .rg-caption-desc {
    max-height: 5rem;
    opacity: 1;
  }
}

/* Mobile: descripción siempre visible (2 líneas) */
@media (hover: none) {
  .rg-caption-desc {
    max-height: 3rem;
    opacity: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ── Animación de entrada por item ── */
@keyframes rgItem {
  from { opacity: 0; transform: translateY(1.5rem) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)       scale(1);   }
}

/* ── Responsive: 2 columnas en tablet, 1 en móvil ── */
@media (max-width: 991.98px) {
  .rg-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

@media (max-width: 575.98px) {
  .rg-header {
    padding: 1rem 1.1rem;
    gap: 0.75rem;
  }
  .rg-tagline { display: none; }
  .rg-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    padding: 0.85rem 0.85rem 2rem;
  }
  .rg-item { aspect-ratio: 4 / 3; }
  .rg-caption-desc {
    max-height: 2.8rem;
    opacity: 1;
  }
}

/* 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: 'Inter', sans-serif;
  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);
}

/* ════════════════════════════════════════════════════
   KINEKI MODAL — Galería editorial full-screen
   ════════════════════════════════════════════════════ */

/* ── Overlay + Panel ── */
.kineki-modal {
  position: fixed;
  inset: 0;
  z-index: 1090;
  overflow: hidden; /* evita segunda scrollbar — solo el panel interno scrollea */
}
.kineki-modal[hidden] { display: none; }

.kineki-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 9, 11, 0.62);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.kineki-modal-panel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: #071316;
  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
   (.kineki-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(7, 19, 22, 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(7, 19, 22, 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', 'Inter', sans-serif;
  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', 'Inter', sans-serif;
  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: 'Cormorant Garamond', serif;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 400;
  color: #ded7ba;
  line-height: 1.18;
  margin: 0 0 1.2rem;
}
.km-st--light { color: rgba(222, 215, 186, 0.95); }

.km-body-text {
  font-family: 'Inter', sans-serif;
  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: 100dvh;
  min-height: 560px;
  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(7,19,22,0.97) 0%, rgba(7,19,22,0.52) 48%, rgba(7,19,22,0.10) 100%),
    linear-gradient(90deg, rgba(7,19,22,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', 'Inter', sans-serif;
  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: 'Cormorant Garamond', serif;
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  font-weight: 400;
  color: rgba(222, 215, 186, 0.85);
  line-height: 1.38;
  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%;
}
.km-fullimg-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(7,19,22,0.97) 0%, rgba(7,19,22,0.70) 40%, rgba(7,19,22,0.15) 75%, transparent 100%),
    linear-gradient(90deg, rgba(7,19,22,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: 'Inter', sans-serif;
  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);
}
.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: #071316;
  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: 'Cormorant Garamond', serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  color: rgba(var(--brand-canopy-rgb), 0.45);
  line-height: 1;
  flex-shrink: 0;
  min-width: 2.2rem;
}
.km-step-text strong {
  display: block;
  font-family: 'Montserrat', 'Inter', sans-serif;
  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: 'Inter', sans-serif;
  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: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 300;
  color: var(--brand-canopy);
  line-height: 1;
}
.km-spec-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(222, 215, 186, 0.42);
}

/* ── 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: 'Cormorant Garamond', serif;
  font-size: clamp(5.5rem, 13vw, 11rem);
  font-weight: 300;
  color: var(--brand-canopy);
  line-height: 1;
  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: 'Inter', sans-serif;
  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: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 300;
  color: var(--brand-canopy);
  line-height: 1;
}
.km-id-lbl {
  font-family: 'Inter', sans-serif;
  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 #071316;
}
.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 #071316; }
.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: #071316;
  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', 'Inter', sans-serif;
  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: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  font-weight: 400;
  color: #ded7ba;
  line-height: 1;
  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: 'Inter', sans-serif;
  font-size: 0.77rem;
  color: rgba(222, 215, 186, 0.50);
  line-height: 1.55;
  margin-top: 0.22rem;
}

.km-perm-quote {
  font-family: 'Cormorant Garamond', serif;
  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: #071316;
}
.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(7,19,22,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: 'Cormorant Garamond', serif;
  font-size: clamp(6rem, 14vw, 10rem);
  font-weight: 300;
  color: rgba(var(--brand-canopy-rgb), 0.12);
  line-height: 0.75;
  position: absolute;
  top: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}
.km-quote-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  font-weight: 400;
  font-style: italic;
  color: rgba(222, 215, 186, 0.82);
  line-height: 1.52;
  margin: 0 0 1.6rem;
  position: relative;
  z-index: 1;
  padding-top: 1.8rem;
}
.km-quote-cite {
  display: block;
  font-family: 'Montserrat', 'Inter', sans-serif;
  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 {
  background: linear-gradient(180deg, rgba(7,19,22,1) 0%, rgba(9,23,27,1) 100%);
  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;
}
.km-myths-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  max-width: 900px;
  margin: 0 auto;
}
.km-myth-card {
  perspective: 1400px;
  height: 230px;
  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.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.16);
  transition: border-color 220ms ease;
}
.km-myth-face--front {
  background: rgba(9, 23, 27, 0.85);
}
.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', 'Inter', sans-serif;
  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.9rem;
}
.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: 'Cormorant Garamond', serif;
  font-size: clamp(1.0rem, 1.8vw, 1.2rem);
  font-weight: 400;
  line-height: 1.42;
  color: rgba(222, 215, 186, 0.92);
  flex: 1;
}
.km-myth-flip-hint {
  margin-top: 0.8rem;
  font-family: 'Inter', sans-serif;
  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 { transition: none; }
}

/* ── Possibilities ── */
.km-possibilities {
  background: #071316;
  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', 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--brand-canopy);
  opacity: 0.65;
}
.km-poss-label {
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #ded7ba;
  display: block;
}
.km-poss-desc {
  font-family: 'Inter', sans-serif;
  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, #071316 0%, #040d0f 100%);
  text-align: center;
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
}
.km-cta-label {
  font-family: 'Cormorant Garamond', serif;
  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', 'Inter', sans-serif;
  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-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .km-myth-card { height: 210px; }
}

/* Móvil <768 */
@media (max-width: 767px) {
  .km-hero { height: 100svh; min-height: 480px; }
  .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-myths-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .km-myth-card { height: 190px; }
}

/* 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(7, 19, 22, 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: 40px;
  height: 51px;
  overflow: visible;
}

/* Ground */
.cd-el-ground {
  fill: rgba(var(--brand-canopy-rgb), 0.14);
  stroke: rgba(var(--brand-canopy-rgb), 0.28);
  stroke-width: 0.5;
}

/* Roots */
.cd-el-root {
  fill: none;
  stroke: rgba(160, 128, 82, 0.38);
  stroke-width: 1.1;
  stroke-linecap: round;
}

/* Trunk — más grueso, orgánico */
.cd-el-trunk {
  fill: none;
  stroke: rgba(155, 122, 76, 0.92);
  stroke-width: 4.5;
  stroke-linecap: round;
}

/* Branches */
.cd-el-br1 path,
.cd-el-br2 path,
.cd-el-br3 path {
  fill: none;
  stroke: rgba(140, 110, 68, 0.82);
  stroke-linecap: round;
}
.cd-el-br1 path { stroke-width: 1.8; }
.cd-el-br2 path { stroke-width: 1.4; }
.cd-el-br3 path { stroke-width: 1.1; }

/* Leaf blobs — formas orgánicas (paths + circles en lv1 y lv2) */
.cd-el-lv1 .cd-leaf-blob { fill: rgba(var(--brand-canopy-rgb), 0.84); }
.cd-el-lv2 .cd-leaf-blob { fill: rgba(var(--brand-canopy-rgb), 0.78); }

/* Copa principal — blob grande */
.cd-canopy-main { fill: rgba(var(--brand-canopy-rgb), 0.88); }
/* Capa de luz interna (superpuesta, semitransparente) */
.cd-canopy-hi   { fill: rgba(var(--brand-canopy-rgb), 0.32); }

/* Sway idle — solo transform, la opacity la controla JS via setAttribute */
.cd-el-lv1, .cd-el-lv2, .cd-el-lv3 { transform-origin: 50% 100%; }
.cd-el-lv1 { animation: cdSway  8s  ease-in-out infinite; }
.cd-el-lv2 { animation: cdSway  10s ease-in-out infinite; animation-delay: -3.5s; }
.cd-el-lv3 { animation: cdSway  7s  ease-in-out infinite; animation-delay: -1.5s; }

@keyframes cdSway {
  0%, 100% { transform: rotate(-1.2deg); }
  50%       { transform: rotate(1.2deg);  }
}

/* Apex orb / fruto dorado */
.cd-el-orb {
  fill: rgba(246, 222, 130, 0.95);
  filter: drop-shadow(0 0 3px rgba(246, 218, 110, 0.82));
  transform-origin: center;
  animation: cdOrbPulse 2.6s ease-in-out infinite;
}
@keyframes cdOrbPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.38); }
}

/* 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: 'Inter', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  color: rgba(7, 19, 22, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  letter-spacing: 0.01em;
  border: 2px solid rgba(7, 19, 22, 0.91);
}

/* ── Panel flotante ── */
.cd-panel {
  background: rgba(7, 19, 22, 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: 'Inter', sans-serif;
  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: 'Cormorant Garamond', serif;
  font-size: 2.3rem;
  font-weight: 300;
  color: rgba(222, 215, 186, 0.96);
  line-height: 1;
  min-width: 2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cd-lbl {
  display: block;
  font-family: 'Inter', sans-serif;
  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: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 300;
  color: rgba(var(--brand-canopy-rgb), 0.30);
  line-height: 1;
  align-self: flex-start;
  padding-top: 0.22rem;
  flex: none;
  width: 12px;
  text-align: center;
}

/* Fecha objetivo */
.cd-date {
  font-family: 'Cormorant Garamond', serif;
  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: 'Inter', sans-serif;
  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; }
  .cd-el-lv1,
  .cd-el-lv2,
  .cd-el-lv3 { animation: none; }
  .cd-el-orb { animation: none; }
  .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 Experiencias · 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: #071316;
  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-serif);
  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);
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  line-height: 1.15;
  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(7, 19, 22, 0.38) 0%,
    rgba(7, 19, 22, 0.7)  55%,
    rgba(7, 19, 22, 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);
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  line-height: 1.08;
  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-serif);
  font-size: 2.8rem;
  line-height: 1;
  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 ── */
.cat-exps {
  background: rgba(var(--brand-ink-soft-rgb), 0.35);
}

.cat-exps-head { margin-bottom: 1.8rem; }

.cat-exp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}

.cat-exp {
  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-exp: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-exp-img { height: 120px; overflow: hidden; }
.cat-exp-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 560ms ease;
}
.cat-exp:hover .cat-exp-img img { transform: scale(1.06); }

.cat-exp-body { padding: 0.8rem; }

.cat-exp-t {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--hero-accent);
  margin-bottom: 0.2rem;
  font-style: normal;
}

.cat-exp-h {
  font-family: var(--font-serif);
  font-size: 0.93rem;
  color: var(--hero-text);
  margin-bottom: 0.2rem;
}

.cat-exp-p {
  font-size: 0.73rem;
  color: rgba(var(--brand-sand-rgb), 0.54);
  line-height: 1.5;
}

/* ── 4. Architecture ── */
.cat-arch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.cat-arch-img-wrap {
  border-radius: 1.4rem;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.cat-arch-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 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-exp-grid { grid-template-columns: repeat(2, 1fr); gap: 0.65rem; }
  .cat-arch { grid-template-columns: 1fr; gap: 1.5rem; }
  .cat-arch-img-wrap { order: -1; aspect-ratio: 16/9; }
  .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-exp-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-arch { grid-template-columns: 1fr; gap: 1.8rem; }
  .cat-arch-img-wrap { order: -1; aspect-ratio: 16/9; }
  .cat-duo { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .cat-exp-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════
   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);
}

/* Experiencias */
html[data-theme="light"] .cat-exps {
  background: rgba(14, 34, 37, 0.04);
}

html[data-theme="light"] .cat-exp {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(14, 34, 37, 0.08);
}

html[data-theme="light"] .cat-exp:hover {
  border-color: rgba(var(--brand-canopy-rgb), 0.30);
  box-shadow: 0 10px 28px rgba(14, 34, 37, 0.11);
}

html[data-theme="light"] .cat-exp-h { color: #0e2225; }
html[data-theme="light"] .cat-exp-p { color: rgba(14, 34, 37, 0.56); }

/* 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%, #071316 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(7, 19, 22, 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(7, 19, 22, 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: 'Inter', sans-serif;
  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: 'Inter', sans-serif;
  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: 'Inter', sans-serif;
  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-banner-meta, pv-rule, pv-word-wrap, pv-detail-strip) */
  body:not(.is-catalog-open) .pv-banner-meta,
  body:not(.is-catalog-open) .pv-word-wrap,
  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,
  body:not(.is-catalog-open) .calc-widget {
    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:    #071316 !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-exps,
  body.is-catalog-open .cat-arch,
  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; }

  /* Experiencias: 2 columnas × 4 filas (legible en portrait) */
  body.is-catalog-open .cat-exps {
    display:         flex !important;
    flex-direction:  column !important;
    justify-content: flex-start !important;
  }
  body.is-catalog-open .cat-exps-head { margin-bottom: 1.2rem !important; }
  body.is-catalog-open .cat-exp-grid  { grid-template-columns: repeat(2, 1fr) !important; gap: 0.7rem !important; }
  body.is-catalog-open .cat-exp-img   { height: 110px !important; }
  body.is-catalog-open .cat-exp-body  { padding: 0.65rem !important; }

  /* Arquitectura: texto + imagen lado a lado */
  body.is-catalog-open .cat-arch {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   2.5rem !important;
    align-items:           center !important;
  }
  body.is-catalog-open .cat-arch-img-wrap { aspect-ratio: 4/3 !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; }

  /* 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 ── */
  body.is-catalog-open .cat-exp,
  body.is-catalog-open .cat-duo-card { break-inside: avoid; page-break-inside: avoid; }

  /* ── 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; }
}


/* ═══════════════════════════════════════════════════════════
   CALC QUOTE MODAL — .cq-*
   z-index: 1090 (below kineki 1095, above general overlays)
═══════════════════════════════════════════════════════════ */

/* ── Full-screen shell ── */
.cq-modal {
  position: fixed;
  inset: 0;
  z-index: 1090;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.cq-modal[hidden] { display: none; }

/* ── Dark overlay ── */
.cq-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.70);
  backdrop-filter: blur(6px);
}

/* ── Close button (fixed in viewport, outside scrollable panel) ── */
.cq-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: 1096;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: 1.5px solid rgba(222, 215, 186, 0.32);
  background: rgba(7, 19, 22, 0.95);
  backdrop-filter: blur(18px);
  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.55),
    0 0 0 4px rgba(var(--brand-canopy-rgb), 0.07),
    inset 0 1px 0 rgba(222, 215, 186, 0.06);
  transition: background 180ms, border-color 180ms, transform 120ms;
}
.cq-close:hover {
  background: rgba(var(--brand-canopy-rgb), 0.18);
  border-color: rgba(var(--brand-canopy-rgb), 0.60);
  transform: scale(1.06);
}
.cq-close-icon {
  width: 1.1rem;
  height: 1.1rem;
  color: rgba(222, 215, 186, 0.85);
  flex-shrink: 0;
}
.cq-close-label {
  display: none;
  font-size: 0.68rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(222, 215, 186, 0.70);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .cq-close {
    width: auto;
    height: 2.9rem;
    border-radius: 100px;
    flex-direction: row;
    padding: 0 1.3rem 0 1rem;
    gap: 0.45rem;
  }
  .cq-close-label { display: block; }
}

/* ── Slide-in panel (right side on desktop, full-screen on mobile) ── */
.cq-panel {
  position: relative;
  z-index: 1091;
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  background: linear-gradient(
    160deg,
    rgba(7, 19, 22, 0.99) 0%,
    rgba(11, 28, 22, 0.99) 100%
  );
  border-left: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: cqSlideIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
  outline: none;
}
@keyframes cqSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Scrollable inner ── */
.cq-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 2rem);
}

/* ── Header ── */
.cq-header {
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 5vw, 3rem) 1.25rem;
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cq-header-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.cq-logo {
  height: 2.4rem;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.90;
  flex-shrink: 0;
}
.cq-header-divider {
  width: 1px;
  height: 2rem;
  background: rgba(var(--brand-canopy-rgb), 0.28);
  flex-shrink: 0;
}
.cq-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.cq-header-label {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--brand-canopy);
}
.cq-header-sub {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(240, 234, 210, 0.65);
}
.cq-header-disclaimer {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(240, 234, 210, 0.38);
  margin: 0;
}

/* ── Quote summary ── */
.cq-summary {
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 5vw, 3rem);
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.10);
}
.cq-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  margin-bottom: 1.25rem;
}
.cq-sum-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cq-sum-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 234, 210, 0.45);
}
.cq-sum-value {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 300;
  color: rgba(240, 234, 210, 0.88);
}
.cq-sum-item--accent .cq-sum-value {
  color: var(--brand-canopy);
}

/* ── Pago de contado: tachado a mano + revelado del nuevo precio ──
   .cq-sum-item es flex column — sus hijos se estiran al ancho completo
   por defecto (align-self:stretch), lo que ensancha este span mucho
   más allá del texto real y deja el SVG del tachado flotando sobre
   espacio vacío. align-self:flex-start lo regresa a su ancho natural. */
.cq-sum-value--strikeable {
  position: relative;
  display: inline-block;
  align-self: flex-start;
}
.cq-sum-value-text {
  position: relative;
  display: inline-block;
  transition: color 380ms ease 360ms;
}
.cq-sum-value--strikeable.is-struck .cq-sum-value-text {
  color: rgba(240, 234, 210, 0.36);
}
.cq-strike-svg {
  position: absolute;
  left: 0;
  top: -20%;
  width: 100%;
  height: 140%;
  overflow: visible;
  pointer-events: none;
}
.cq-strike-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  opacity: 0;
  /* Ver comentario equivalente en .calc-strike-path (sections.css) —
     mismo fix: sin non-scaling-stroke el trazo se deforma/engrosa al
     estirarse el viewBox con preserveAspectRatio="none". */
  vector-effect: non-scaling-stroke;
}
.cq-strike-path-1 {
  stroke: var(--brand-canopy);
  stroke-width: 2;
  filter: drop-shadow(0 0 1.5px rgba(var(--brand-canopy-rgb), 0.6));
}
.cq-strike-path-2 {
  stroke: rgba(255, 246, 216, 0.92);
  stroke-width: 1.3;
  filter: drop-shadow(0 0 1px rgba(var(--brand-canopy-rgb), 0.45));
}
.cq-sum-value--strikeable.is-struck .cq-strike-path-1 {
  animation: cqStrikeDraw1 380ms cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
}
.cq-sum-value--strikeable.is-struck .cq-strike-path-2 {
  animation: cqStrikeDraw2 300ms cubic-bezier(0.55, 0.06, 0.68, 0.19) 210ms both;
}
@keyframes cqStrikeDraw1 {
  0%   { stroke-dashoffset: 340; opacity: 0; }
  6%   { opacity: 1; }
  92%  { stroke-dashoffset: -4; }
  100% { stroke-dashoffset: -4; opacity: 1; }
}
@keyframes cqStrikeDraw2 {
  0%   { stroke-dashoffset: 340; opacity: 0; }
  8%   { opacity: 0.88; }
  92%  { stroke-dashoffset: -4; }
  100% { stroke-dashoffset: -4; opacity: 0.88; }
}

.cq-cash-reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms cubic-bezier(0.25, 0.8, 0.25, 1) 260ms;
}
.cq-cash-reveal.is-open {
  grid-template-rows: 1fr;
}
.cq-cash-reveal-inner {
  overflow: hidden;
  min-height: 0;
}

/* ── Banner de contado — bloque de ancho completo, fuera del grid ── */
.cq-cash-banner {
  margin-top: 1.1rem;
  padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.2rem, 3.5vw, 1.75rem);
  border-radius: 0.9rem;
  background: linear-gradient(135deg, rgba(var(--brand-canopy-rgb), 0.14), rgba(var(--brand-canopy-rgb), 0.04));
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.28);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
}
.cq-cash-reveal.is-open .cq-cash-banner {
  animation: cqCashBannerIn 620ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both;
}
@keyframes cqCashBannerIn {
  0%   { opacity: 0; transform: translateY(14px) scale(0.96); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.cq-cash-banner-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}
.cq-cash-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem 0.3rem 0.55rem;
  border-radius: 2rem;
  background: rgba(var(--brand-canopy-rgb), 0.16);
  color: var(--brand-canopy);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cq-cash-tag svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.cq-cash-badge {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border-radius: 2rem;
  background: var(--brand-canopy);
  color: var(--brand-ink);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: rotate(-8deg) scale(0.4);
}
.cq-cash-reveal.is-open .cq-cash-badge {
  animation: cqCashStamp 480ms cubic-bezier(0.34, 1.56, 0.64, 1) 640ms both;
}
@keyframes cqCashStamp {
  0%   { opacity: 0; transform: rotate(-10deg) scale(0.4); }
  60%  { opacity: 1; transform: rotate(3deg) scale(1.08); }
  100% { opacity: 1; transform: rotate(-4deg) scale(1); }
}

.cq-cash-new-price {
  margin: 0 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  opacity: 0;
}
.cq-cash-reveal.is-open .cq-cash-new-price {
  animation: cqCashFadeUp 460ms cubic-bezier(0.25, 0.8, 0.25, 1) 480ms both;
}
.cq-cash-new-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.68);
  width: 100%;
}
.cq-cash-new-value {
  position: relative;
  display: inline-block;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.6vw, 1.9rem);
  font-weight: 500;
  background: linear-gradient(100deg,
    var(--brand-canopy) 25%,
    #fff8e2 48%,
    var(--brand-canopy) 68%
  );
  background-size: 240% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--brand-canopy);
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px rgba(var(--brand-canopy-rgb), 0.4);
}
.cq-cash-reveal.is-open .cq-cash-new-value {
  animation:
    cqCashShine 1400ms ease 760ms 1 both,
    cqCashGlow  2100ms ease 880ms 2;
}
.cq-cash-note {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.55;
  color: rgba(240, 234, 210, 0.6);
  opacity: 0;
}
.cq-cash-reveal.is-open .cq-cash-note {
  animation: cqCashFadeUp 440ms cubic-bezier(0.25, 0.8, 0.25, 1) 600ms both;
}
@keyframes cqCashFadeUp {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cqCashShine {
  from { background-position: 200% 0; }
  to   { background-position: -60% 0; }
}
@keyframes cqCashGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(var(--brand-canopy-rgb), 0.32); }
  50%      { text-shadow: 0 0 26px rgba(var(--brand-canopy-rgb), 0.9), 0 0 10px rgba(255, 255, 255, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .cq-sum-value--strikeable.is-struck .cq-strike-path-1,
  .cq-sum-value--strikeable.is-struck .cq-strike-path-2,
  .cq-cash-reveal.is-open .cq-cash-banner,
  .cq-cash-reveal.is-open .cq-cash-badge,
  .cq-cash-reveal.is-open .cq-cash-new-price,
  .cq-cash-reveal.is-open .cq-cash-new-value,
  .cq-cash-reveal.is-open .cq-cash-note {
    animation: none;
  }
  .cq-sum-value--strikeable.is-struck .cq-strike-path-1,
  .cq-sum-value--strikeable.is-struck .cq-strike-path-2 {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  .cq-cash-reveal.is-open .cq-cash-banner,
  .cq-cash-reveal.is-open .cq-cash-badge,
  .cq-cash-reveal.is-open .cq-cash-new-price,
  .cq-cash-reveal.is-open .cq-cash-note {
    opacity: 1;
    transform: none;
  }
  .cq-cash-reveal { transition-duration: 200ms; transition-delay: 0ms; }
}

/* Monthly payment – full-width highlight row */
.cq-monthly-card {
  padding: 1rem 1.25rem;
  background: rgba(var(--brand-canopy-rgb), 0.08);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.18);
  border-radius: 0.6rem;
}
.cq-monthly-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.cq-sum-monthly-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-canopy);
}
.cq-sum-monthly-value {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 300;
  color: var(--brand-canopy);
  white-space: nowrap;
}
.cq-monthly-card-row--interest {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.14);
}
.cq-monthly-card-row--interest .cq-sum-monthly-label {
  color: rgba(var(--brand-canopy-rgb), 0.65);
  font-size: 0.62rem;
}
.cq-monthly-card-row--interest .cq-sum-monthly-value {
  font-size: 1.15rem;
  color: rgba(var(--brand-canopy-rgb), 0.8);
}
.cq-interest-note {
  margin: 0.65rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.10);
  font-size: 0.68rem;
  line-height: 1.5;
  color: rgba(240, 234, 210, 0.42);
  text-align: center;
}
html[data-theme="light"] .cq-interest-note { color: rgba(26, 43, 46, 0.42); }

/* ── Payment schedule ── */
.cq-schedule-wrap {
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 5vw, 3rem);
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.10);
}
.cq-section-title {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.70);
  margin: 0 0 1.25rem;
}
.cq-table-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0.6rem;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
  max-height: 21rem;
  transition: max-height 420ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.cq-table-wrap.is-expanded {
  max-height: 3000px;
}
.cq-table-fade {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.75rem;
  margin-top: -2.75rem;
  background: linear-gradient(to bottom, transparent, rgba(var(--brand-ink-rgb), 0.94));
  pointer-events: none;
  transition: opacity 200ms ease;
}
.cq-table-wrap.is-expanded .cq-table-fade {
  opacity: 0;
}
.cq-table-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.6rem;
  background: transparent;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.22);
  border-radius: 2rem;
  color: var(--brand-canopy);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.cq-table-toggle:hover {
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
  background: rgba(var(--brand-canopy-rgb), 0.06);
}
.cq-table-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform 0.25s ease;
}
.cq-table-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.cq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.80rem;
}
.cq-table thead tr {
  background: rgba(var(--brand-canopy-rgb), 0.10);
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.15);
}
.cq-table th {
  padding: 0.65rem 0.85rem;
  text-align: left;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.75);
  white-space: nowrap;
}
.cq-table td {
  padding: 0.6rem 0.85rem;
  color: rgba(240, 234, 210, 0.72);
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.06);
}
.cq-table tbody tr:last-child td { border-bottom: none; }
.cq-table tbody tr:hover td {
  background: rgba(var(--brand-canopy-rgb), 0.05);
}
.cq-table .cq-tr-last td {
  color: rgba(240, 234, 210, 0.45);
}
.cq-td-num {
  color: rgba(240, 234, 210, 0.35) !important;
  font-size: 0.70rem;
}
.cq-td-date {
  text-transform: capitalize;
  white-space: nowrap;
}
.cq-td-amount {
  font-family: var(--font-serif);
  color: rgba(240, 234, 210, 0.88) !important;
}
.cq-td-saldo {
  font-family: var(--font-serif);
  color: rgba(var(--brand-canopy-rgb), 0.65) !important;
}

/* ── Contact form ── */
.cq-form-wrap {
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 5vw, 3rem);
}
.cq-form-intro {
  font-size: 0.88rem;
  color: rgba(240, 234, 210, 0.55);
  margin-bottom: 1.75rem;
  line-height: 1.55;
}
.cq-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.cq-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cq-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 234, 210, 0.55);
}
.cq-input {
  background: rgba(var(--brand-canopy-rgb), 0.05);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.20);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.90rem;
  color: rgba(240, 234, 210, 0.90);
  outline: none;
  transition: border-color 180ms, background 180ms;
  width: 100%;
}
.cq-input::placeholder { color: rgba(240, 234, 210, 0.25); }
.cq-input:focus {
  border-color: rgba(var(--brand-canopy-rgb), 0.60);
  background: rgba(var(--brand-canopy-rgb), 0.09);
}

/* Custom checkbox */
.cq-field-group--check { gap: 0.5rem; }
.cq-check-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}
.cq-check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cq-check-box {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  border: 1.5px solid rgba(var(--brand-canopy-rgb), 0.35);
  border-radius: 0.25rem;
  background: rgba(var(--brand-canopy-rgb), 0.05);
  margin-top: 0.1rem;
  position: relative;
  transition: border-color 160ms, background 160ms;
}
.cq-check:checked + .cq-check-box {
  background: var(--brand-canopy);
  border-color: var(--brand-canopy);
}
.cq-check:checked + .cq-check-box::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 0.55rem;
  height: 0.35rem;
  border-left: 2px solid var(--brand-ink);
  border-bottom: 2px solid var(--brand-ink);
}
.cq-check-text {
  font-size: 0.82rem;
  color: rgba(240, 234, 210, 0.60);
  line-height: 1.55;
}

.cq-error {
  font-size: 0.72rem;
  color: #e07070;
  min-height: 1rem;
}

/* Submit button */
.cq-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 2rem;
  background: var(--brand-canopy);
  color: var(--brand-ink);
  border: none;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  margin-top: 0.5rem;
  transition: opacity 200ms, transform 120ms;
}
.cq-submit-btn:hover { opacity: 0.88; }
.cq-submit-btn:active { transform: scale(0.98); }
.cq-submit-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Spinner */
.cq-spinner {
  width: 1.1rem;
  height: 1.1rem;
  animation: cqSpin 900ms linear infinite;
}
@keyframes cqSpin { to { transform: rotate(360deg); } }

/* Status message */
.cq-status {
  font-size: 0.80rem;
  color: rgba(240, 234, 210, 0.60);
  min-height: 1.2rem;
  text-align: center;
}
.cq-status--error { color: #e07070; }

/* ── Success state ── */
.cq-success {
  padding: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}
.cq-success-icon {
  width: 3.5rem;
  height: 3.5rem;
  color: var(--brand-canopy);
}
.cq-success-icon svg { width: 100%; height: 100%; }
.cq-success-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 300;
  color: rgba(240, 234, 210, 0.90);
  margin: 0.25rem 0 0;
}
.cq-success-body {
  font-size: 0.90rem;
  color: rgba(240, 234, 210, 0.55);
  max-width: 32ch;
  line-height: 1.6;
  margin: 0;
}

/* WhatsApp button */
.cq-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.75rem;
  background: #25D366;
  color: #fff;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: opacity 200ms, transform 120ms;
  margin-top: 0.5rem;
}
.cq-wa-btn:hover { opacity: 0.88; color: #fff; text-decoration: none; }
.cq-wa-btn:active { transform: scale(0.97); }
.cq-wa-btn svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

/* ── Botones de acción rápida (PDF + WA en resumen) ── */
.cq-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-top: 1rem;
}
.cq-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 0.9rem;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: opacity 180ms, transform 120ms;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.cq-action-btn svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; }
.cq-action-btn:active { transform: scale(0.97); }
.cq-action-btn--pdf {
  background: rgba(var(--brand-canopy-rgb), 0.08);
  border-color: rgba(var(--brand-canopy-rgb), 0.28);
  color: rgba(240, 234, 210, 0.75);
}
.cq-action-btn--pdf:hover {
  background: rgba(var(--brand-canopy-rgb), 0.15);
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
  color: rgba(240, 234, 210, 0.95);
}
.cq-action-btn--wa {
  background: rgba(37, 211, 102, 0.10);
  border-color: rgba(37, 211, 102, 0.30);
  color: #4ddb7a;
}
.cq-action-btn--wa:hover {
  background: rgba(37, 211, 102, 0.18);
  border-color: rgba(37, 211, 102, 0.60);
}

/* ── Success actions row ── */
.cq-success-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 320px;
}
.cq-success-pdf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  background: rgba(var(--brand-canopy-rgb), 0.10);
  border: 1.5px solid rgba(var(--brand-canopy-rgb), 0.30);
  border-radius: 100px;
  color: rgba(240, 234, 210, 0.80);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  width: 100%;
  transition: opacity 180ms, background 180ms;
}
.cq-success-pdf-btn svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; }
.cq-success-pdf-btn:hover {
  background: rgba(var(--brand-canopy-rgb), 0.18);
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
  color: rgba(240, 234, 210, 0.95);
}
.cq-wa-btn { width: 100%; justify-content: center; }

/* ── Responsive ── */
@media (max-width: 479px) {
  .cq-summary-grid { grid-template-columns: 1fr; }
  .cq-action-row { grid-template-columns: 1fr; }
  .cq-sum-monthly-row {
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
  }
}
@media (max-width: 767px) {
  .cq-panel { max-width: 100%; border-left: none; }
  .cq-table th, .cq-table td { padding: 0.55rem 0.65rem; }
}

/* Prevent outer scroll bleed (same fix as kineki modal) */
.cq-modal { overflow: hidden; }

/* ── Quote modal — light theme ── */
html[data-theme="light"] .cq-panel {
  background: linear-gradient(160deg, #f5f2eb 0%, #ede9dc 100%);
  border-left-color: rgba(0, 0, 0, 0.09);
}
html[data-theme="light"] .cq-close {
  background: rgba(245, 242, 235, 0.97);
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.14),
    0 0 0 4px rgba(var(--brand-canopy-rgb), 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
}
html[data-theme="light"] .cq-close:hover {
  background: #fff;
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
}
html[data-theme="light"] .cq-close-icon { color: rgba(26, 43, 46, 0.65); }
html[data-theme="light"] .cq-close-label { color: rgba(26, 43, 46, 0.65); }

html[data-theme="light"] .cq-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .cq-logo {
  filter: brightness(0);
  opacity: 0.82;
}
html[data-theme="light"] .cq-header-divider { background: rgba(0, 0, 0, 0.12); }
html[data-theme="light"] .cq-header-sub { color: rgba(26, 43, 46, 0.52); }
html[data-theme="light"] .cq-header-disclaimer { color: rgba(26, 43, 46, 0.36); }

html[data-theme="light"] .cq-summary { border-bottom-color: rgba(0, 0, 0, 0.07); }
html[data-theme="light"] .cq-sum-label { color: rgba(26, 43, 46, 0.50); }
html[data-theme="light"] .cq-sum-value { color: rgba(26, 43, 46, 0.88); }
html[data-theme="light"] .cq-sum-value--strikeable.is-struck .cq-sum-value-text { color: rgba(26, 43, 46, 0.32); }
html[data-theme="light"] .cq-cash-note { color: rgba(26, 43, 46, 0.55); }

html[data-theme="light"] .cq-schedule-wrap { border-bottom-color: rgba(0, 0, 0, 0.07); }
html[data-theme="light"] .cq-section-title { color: rgba(var(--brand-canopy-rgb), 0.62); }
html[data-theme="light"] .cq-table-wrap { border-color: rgba(0, 0, 0, 0.09); }
html[data-theme="light"] .cq-table-fade { background: linear-gradient(to bottom, transparent, rgba(237, 233, 220, 0.96)); }
html[data-theme="light"] .cq-table thead tr {
  background: rgba(0, 0, 0, 0.04);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .cq-table th { color: rgba(26, 43, 46, 0.52); }
html[data-theme="light"] .cq-table td {
  color: rgba(26, 43, 46, 0.72);
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .cq-table tbody tr:hover td { background: rgba(0, 0, 0, 0.03); }
html[data-theme="light"] .cq-table .cq-tr-last td { color: rgba(26, 43, 46, 0.35); }
html[data-theme="light"] .cq-td-num { color: rgba(26, 43, 46, 0.28) !important; }
html[data-theme="light"] .cq-td-amount { color: rgba(26, 43, 46, 0.85) !important; }
html[data-theme="light"] .cq-td-saldo { color: rgba(var(--brand-canopy-rgb), 0.60) !important; }

html[data-theme="light"] .cq-form-intro { color: rgba(26, 43, 46, 0.55); }
html[data-theme="light"] .cq-label { color: rgba(26, 43, 46, 0.55); }
html[data-theme="light"] .cq-input {
  background: rgba(255, 255, 255, 0.80);
  border-color: rgba(0, 0, 0, 0.14);
  color: rgba(26, 43, 46, 0.90);
}
html[data-theme="light"] .cq-input::placeholder { color: rgba(26, 43, 46, 0.28); }
html[data-theme="light"] .cq-input:focus {
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
  background: rgba(255, 255, 255, 0.96);
}
html[data-theme="light"] .cq-check-box {
  border-color: rgba(0, 0, 0, 0.22);
  background: rgba(255, 255, 255, 0.70);
}
html[data-theme="light"] .cq-check:checked + .cq-check-box::after {
  border-left-color: #1a2b2e;
  border-bottom-color: #1a2b2e;
}
html[data-theme="light"] .cq-check-text { color: rgba(26, 43, 46, 0.60); }
html[data-theme="light"] .cq-submit-btn { color: #1a2b2e; }
html[data-theme="light"] .cq-status { color: rgba(26, 43, 46, 0.58); }

html[data-theme="light"] .cq-success-title { color: rgba(26, 43, 46, 0.90); }
html[data-theme="light"] .cq-success-body { color: rgba(26, 43, 46, 0.55); }
html[data-theme="light"] .cq-success-pdf-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.14);
  color: rgba(26, 43, 46, 0.72);
}
html[data-theme="light"] .cq-success-pdf-btn:hover {
  background: rgba(0, 0, 0, 0.09);
  border-color: rgba(var(--brand-canopy-rgb), 0.50);
  color: rgba(26, 43, 46, 0.90);
}
html[data-theme="light"] .cq-action-btn--pdf {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.16);
  color: rgba(26, 43, 46, 0.65);
}
html[data-theme="light"] .cq-action-btn--pdf:hover {
  background: rgba(0, 0, 0, 0.09);
  border-color: rgba(var(--brand-canopy-rgb), 0.50);
  color: rgba(26, 43, 46, 0.88);
}


/* ══════════════════════════════════════════════════════════════════════════════
   AVISO DE PRIVACIDAD — Cookie Banner + Modal
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Cookie consent banner ─────────────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9800;
  background: rgba(7, 19, 22, 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: #071316;
  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 ────────────────────────────────────────────────────── */
.site-footer-bar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.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: #071316;
  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;
  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;
}