/* ==========================================================================
   EDIFICIO PRAGA — components.css
   Botones, cifras, tarjetas, planos, mapa y llamados a la acción.
   ========================================================================== */

/* ==========================================================================
   Botones
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: .82rem 1.7rem;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
}
.btn > span { position: relative; z-index: 1; }
.btn svg {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn--gold {
  border: 1px solid var(--c-gold);
  color: var(--c-gold-light);
}

.btn--ghost {
  border: 1px solid var(--line-strong);
  color: var(--c-cream);
  align-self: flex-start;
}

/* ==========================================================================
   Cifra editorial (36 parqueaderos · 2 locales)
   ========================================================================== */
.stats { gap: clamp(2rem, 4vw, 3.2rem); }

.stat {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.stat__num {
  font-family: var(--f-display);
  font-size: var(--t-stat);
  font-weight: 300;
  line-height: .78;
  color: var(--c-sage);
  border-left: 1px solid var(--c-gold);
  padding-left: clamp(.5rem, 1vw, .9rem);
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1;
}

/* El «1» de estilo antiguo de Cormorant se confunde con una «I» mayúscula.
   Para cifras de un solo dígito bajo, caja alta. */
.stat__num--lining {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.stat__body h3 { margin-bottom: .5rem; }

/* ---- Rangos de áreas y precios ---- */
.ranges { margin-top: .3rem; }
.ranges__row {
  display: grid;
  grid-template-columns: minmax(4.6rem, auto) 1fr;
  align-items: baseline;
  gap: .4rem 1rem;
  padding-block: .75rem;
}
.ranges__row + .ranges__row { border-top: 1px solid var(--line-soft); }

.ranges dt {
  font-size: calc(var(--t-label) - .04rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.ranges dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1.15rem;
}

.ranges__pair {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
}
.ranges__pair i {
  font-style: normal;
  font-size: calc(var(--t-label) - .06rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-olive);
}
.ranges__pair b {
  font-weight: 400;
  font-size: var(--t-lede);
  color: var(--c-cream);
  font-variant-numeric: tabular-nums;
}
/* Dato aún sin confirmar por el proyecto */
.ranges__pair b.is-pending {
  font-size: var(--t-body);
  font-style: italic;
  color: var(--c-muted);
}
.stat__body p {
  font-size: var(--t-body);
  line-height: 1.85;
  color: rgba(244, 237, 224, .62);
  max-width: 38ch;
}

/* ==========================================================================
   Ventajas exclusivas
   ========================================================================== */
.ventajas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.2rem, 5vw, 4.5rem);
  margin-top: clamp(3.5rem, 8vw, 6.5rem);
}

.ventaja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

/* El anillo y el fondo vienen dibujados en el propio icono del dossier,
   así que aquí sólo se aporta el halo dorado del hover. */
.ventaja__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(110px, 13vw, 148px);
  aspect-ratio: 1;
  border-radius: 50%;
  isolation: isolate;
}
.ventaja__ring::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid var(--c-gold);
  opacity: 0;
  transform: scale(.88);
}
.ventaja__ring img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}

.ventaja h3 { line-height: 1.9; }

.section--center .note { margin-top: clamp(3.5rem, 7vw, 5.5rem); }

/* ==========================================================================
   Imágenes enmarcadas
   ========================================================================== */
.shot { display: flex; flex-direction: column; }
.shot--tall { height: 100%; }

.shot__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--c-surface);
  isolation: isolate;
}
.shot--tall .shot__frame { flex: 1; }
.shot--tall .shot__frame img { height: 100%; object-fit: cover; }

.shot__frame img { width: 100%; }

.shot figcaption {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: 1rem;
  color: var(--c-olive);
}
.shot figcaption.label,
.shot > .label { margin-top: 1rem; color: var(--c-olive); }

/* ==========================================================================
   Ficha de especificaciones
   ========================================================================== */
.specs { margin-top: clamp(2rem, 4vw, 3rem); }
.specs li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-body);
  color: rgba(244, 237, 224, .70);
}
.specs li .label { color: var(--c-olive); }

/* ==========================================================================
   Índice de tipologías
   ========================================================================== */
/* Se llena hacia abajo y luego a la derecha: A–F | G–K, como en el dossier */
.index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  align-content: start;
}
.index li { border-bottom: 1px solid var(--line-soft); }
.index a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(.85rem, 1.6vw, 1.15rem);
}
.index__letter {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--c-sage);
  line-height: 1;
}
.index__area {
  font-size: var(--t-label);
  letter-spacing: .14em;
  color: rgba(244, 237, 224, .72);
  font-variant-numeric: tabular-nums;
}

/* ---- Rango de áreas ---- */
.range {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.6rem);
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
}
.range__item { display: flex; flex-direction: column; gap: .55rem; }
.range__item + .range__item {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.5rem, 3vw, 2.6rem);
}
.range__val {
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--c-cream);
  letter-spacing: -.01em;
}

/* ==========================================================================
   Planos de apartamentos
   ========================================================================== */
.planos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.6rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.plano { display: flex; flex-direction: column; }

.plano__frame {
  position: relative;
  display: grid;
  place-items: stretch;
  aspect-ratio: 4 / 5;
  padding: 1.2rem;
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(ellipse 75% 65% at 50% 45%, var(--c-surface-2) 0%, var(--c-surface) 78%);
  overflow: hidden;
  cursor: zoom-in;
  isolation: isolate;
}
/* El alto del marco sale de su aspect-ratio, y contra ese alto un porcentaje
   no llega a resolverse: la imagen se desbordaba y el overflow del marco le
   comía el pie del plano. Estirando la casilla —sin porcentajes— y dejando
   que scale-down decida, el plano se ve entero y nunca se agranda de más. */
.plano__frame img {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  object-fit: scale-down;
}

.plano__zoom {
  position: absolute;
  inset: auto 0 0 0;
  padding: .8rem;
  text-align: center;
  font-size: calc(var(--t-label) - .03rem);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-void);
  background: var(--c-gold);
  opacity: 0;
  transform: translateY(100%);
}

.plano__head {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: 1.3rem;
}
.plano__head .label { color: var(--c-olive); }

.plano__specs { margin-top: 1.1rem; border-top: 1px solid var(--line-soft); }
.plano__specs > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: .7rem;
}
.plano__specs > div + div { border-top: 1px solid var(--line-soft); }
.plano__specs dt {
  font-size: calc(var(--t-label) - .04rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.plano__specs dd {
  font-size: var(--t-body);
  color: var(--c-cream);
  font-variant-numeric: tabular-nums;
}

/* ---- Fichas de tres columnas: parqueaderos, locales y oficina ---- */
.planos--tres { grid-template-columns: repeat(3, 1fr); }

/* ---- Fichas de dos plantas ----
   Cada planta lleva su propio marco: así el visor amplía la que se pide,
   no siempre la primera. Apiladas por defecto, como en el dossier. */
.plano__levels { display: grid; gap: .9rem; }
.plano__levels .plano__frame { padding: .9rem; }

/* Las dos plantas en fila ocupan justo el alto de una ficha de un solo plano:
   así los rótulos y las fichas técnicas siguen alineados en toda la rejilla. */
.plano__levels--row {
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 4 / 5;
}
.plano__levels--row .plano__level { display: flex; flex-direction: column; min-height: 0; }
.plano__levels--row .plano__frame { flex: 1; aspect-ratio: auto; }

.plano__level-name {
  margin-top: .6rem;
  text-align: center;
  font-size: calc(var(--t-label) - .05rem);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* La oficina tiene una sola planta y una silueta muy alargada: ocupa el
   alto de las dos plantas de los locales para que las fichas se alineen. */
.plano__frame--tall { aspect-ratio: 1 / 2; }
.locales .plano__levels .plano__frame { aspect-ratio: 1 / 1; }
.locales .plano__levels .plano__frame--tall { aspect-ratio: 1 / 2.06; }
.locales .drop { letter-spacing: .02em; }

/* ==========================================================================
   Colección premium
   ========================================================================== */
.premium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.8rem, 4vw, 3.2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.premium__card { display: flex; flex-direction: column; }
.premium__card .plano__frame { aspect-ratio: 3 / 4; }
/* Con las dos plantas a la vista, el marco se hace cuadrado: entre plantas
   apaisadas y otras muy verticales, es el formato que no castiga a ninguna */
.premium__card .plano__levels .plano__frame { aspect-ratio: 1 / 1; }

.premium__name {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin-top: 1.4rem;
  margin-bottom: 1rem;
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-style: italic;
  font-weight: 400;
  color: var(--c-cream);
}
.premium__roman {
  font-style: normal;
  font-size: .62em;
  letter-spacing: .1em;
  color: var(--c-gold);
}

/* ==========================================================================
   Ubicación
   ========================================================================== */
.mapa { margin-top: clamp(2rem, 4vw, 3rem); }
.mapa .shot__frame { background: var(--c-surface-2); }

/* El mapa lleva a Google Maps: la pista sigue el gesto de los planos —aparece
   al pasar por encima y se queda fija en táctil, donde no hay hover que valga. */
.mapa__link { display: block; position: relative; }
.mapa__hint {
  position: absolute;
  right: clamp(.8rem, 2vw, 1.4rem);
  bottom: clamp(.8rem, 2vw, 1.4rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  font-size: calc(var(--t-label) - .03rem);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-void);
  background: var(--c-gold);
  opacity: 0;
  transform: translateY(8px);
}
.mapa__hint svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.cercanos { margin-top: 1.6rem; }
.cercanos li {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding-block: .85rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-body);
  color: rgba(244, 237, 224, .74);
}
.cercanos__mark { color: var(--c-gold); font-size: .7em; line-height: 1; }
.cercanos .is-primary { color: var(--c-cream); }
.cercanos .is-primary .cercanos__mark { color: var(--c-gold-light); }

/* ---- Precio ---- */
.precio { gap: 1rem; }
.precio__head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.precio__val {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--c-sage);
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1;
  margin-block: .5rem 1.8rem;
  background: linear-gradient(100deg, var(--c-gold-dark) 0%, var(--c-gold) 30%, var(--c-gold-light) 65%, var(--c-sage) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   Llamado final
   ========================================================================== */
.cta {
  position: relative;
  padding-block: clamp(5rem, 10vw, 9rem);
  background:
    radial-gradient(ellipse 65% 60% at 50% 42%, rgba(46, 122, 20, .10) 0%, transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 50%, var(--c-surface) 0%, var(--c-void) 78%);
  overflow: hidden;
}

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta__logo {
  width: clamp(140px, 18vw, 210px);
  height: auto;
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, .5));
}

.cta__wordmark {
  width: clamp(190px, 25vw, 300px);
  height: auto;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, .5));
}

.cta .rule--ornament { margin-block: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 2.5vw, 2rem); }

.cta__phone {
  display: inline-block;
  margin-top: .9rem;
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.9rem);
  font-weight: 300;
  letter-spacing: .02em;
  color: var(--c-cream);
  font-variant-numeric: tabular-nums;
  padding-bottom: .2rem;
  background-image: linear-gradient(var(--c-gold), var(--c-gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
}

.cta__invite {
  margin-top: .8rem;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  font-style: italic;
  color: var(--c-sage);
}

/* Centrar el par —código y rótulo— dejaba el cuadro descolgado a la izquierda
   del eje que marcan el logo, el wordmark y el teléfono. Con una columna vacía
   de igual peso a cada lado, el QR cae justo sobre ese eje y el rótulo lo
   acompaña sin arrastrarlo. */
.cta__qr {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  align-self: stretch;
  gap: 1.4rem;
  margin-top: clamp(2.5rem, 5vw, 3.8rem);
  text-align: left;
}
.cta__qr-frame { grid-column: 2; }
.cta__qr .label { grid-column: 3; }
.cta__qr-frame {
  padding: 8px;
  background: var(--c-cream);
  line-height: 0;
}
.cta__qr-frame img { width: clamp(88px, 10vw, 116px); height: auto; }
.cta__qr .label { color: var(--c-olive); line-height: 1.8; }

/* ==========================================================================
   Aviso emergente bajo la barra de navegación
   ========================================================================== */
.aviso {
  position: fixed;
  top: calc(clamp(64px, 8vh, 86px) + var(--frame-in));
  right: calc(var(--frame-in) + clamp(.8rem, 2vw, 1.6rem));
  z-index: 115;
  width: min(390px, calc(100vw - 2rem));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: .9rem;
  padding: 1.1rem 1.1rem 1.25rem;
  overflow: hidden;
  background: rgba(30, 34, 17, .96);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--c-gold);
  border-radius: 4px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, .6),
    0 0 40px rgba(192, 160, 88, .12);
}
.aviso[hidden] { display: none; }

.aviso__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}
.aviso__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--c-gold-light);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aviso__title {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold-light);
  margin-bottom: .45rem;
}
.aviso__text {
  font-size: calc(var(--t-body) - .04rem);
  line-height: 1.7;
  color: rgba(244, 237, 224, .82);
}

.aviso__close {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--c-olive);
}
.aviso__close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* Barra que consume los 5 segundos */
.aviso__timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(1);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--c-gold-dark), var(--c-gold), var(--c-gold-light));
}

/* ==========================================================================
   Recorrido 360° — la sección más destacada de la página
   ========================================================================== */
.tour {
  /* Menos aire que el resto de secciones: el visor debe entrar en pantalla */
  padding-block: clamp(3.2rem, 1.4rem + 6vw, 6.5rem);
  background:
    radial-gradient(ellipse 70% 60% at 50% 8%,  rgba(192, 160, 88, .16) 0%, transparent 62%),
    radial-gradient(ellipse 90% 80% at 50% 50%, var(--c-surface-2) 0%, var(--c-void) 82%);
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.tour__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Distintivo con punto latiendo */
.tour__badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1.1rem;
  border: 1px solid var(--c-gold);
  border-radius: 999px;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-gold-light);
  background: rgba(192, 160, 88, .07);
}
.tour__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-gold-light);
  box-shadow: 0 0 0 0 rgba(228, 211, 160, .7);
}

.tour__title {
  margin-top: clamp(.9rem, 1.8vw, 1.4rem);
  font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4.2rem);
}
.tour .rule--ornament { margin-top: clamp(1rem, 1.8vw, 1.4rem); }
.tour__note { margin-top: clamp(.9rem, 1.6vw, 1.3rem); max-width: 56ch; }

/* Escenario del visor: marco dorado con resplandor para que domine la página */
.tour__stage {
  width: 100%;
  max-width: 1180px;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.tour__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--c-gold);
  background: var(--c-void);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(192, 160, 88, .18),
    0 30px 90px rgba(0, 0, 0, .6),
    0 0 70px rgba(192, 160, 88, .14);
}
/* Cada recorrido es una capa apilada: al cambiar de pestaña no se recarga */
.tour__view {
  position: absolute;
  inset: 0;
}
.tour__view[hidden] { display: none; }
.tour__view iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---- Selector de recorrido ---- */
.tour__switch {
  display: inline-flex;
  gap: .35rem;
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  padding: .38rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(13, 16, 7, .55);
}

.tour__tab {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .72rem 1.3rem;
  border-radius: 999px;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-olive);
}
.tour__tab svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tour__tab.is-active {
  background: linear-gradient(140deg, var(--c-gold-light), var(--c-gold) 55%, var(--c-gold-dark));
  color: var(--c-void);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.tour__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
}
.tour__hint {
  font-size: calc(var(--t-label) - .02rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ==========================================================================
   Botones flotantes — 360° sobre WhatsApp, presentes en toda la página
   ========================================================================== */
.fabs {
  position: fixed;
  right: clamp(1rem, 2.2vw, 1.9rem);
  bottom: clamp(1rem, 2.2vw, 1.9rem);
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .8rem;
}

.fab-tour {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.15rem;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--c-gold-light), var(--c-gold) 55%, var(--c-gold-dark));
  color: var(--c-void);
  font-size: calc(var(--t-label) - .01rem);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.fab-tour svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-void);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wa {
  position: relative;   /* ancla del anillo pulsante, ya no lo da el fixed */
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--c-gold-light), var(--c-gold) 55%, var(--c-gold-dark));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.wa svg { width: 27px; height: 27px; fill: var(--c-void); }

/* ==========================================================================
   Lightbox de planos
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  background: rgba(9, 11, 5, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  max-height: 100%;
}
.lightbox__figure img {
  max-width: min(1100px, 92vw);
  max-height: 78vh;
  width: auto;
  object-fit: contain;
}
.lightbox__figure figcaption {
  font-size: var(--t-label);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-olive);
}

.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2.2rem);
  right: clamp(1rem, 3vw, 2.2rem);
  width: 46px;
  height: 46px;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--c-cream);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.lightbox__close:hover {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-void);
}

body.is-locked { overflow: hidden; }