/* =====================================================================
   RISE · Amenidades (mesa de trabajo 3)
   ===================================================================== */

/* ---------------------------------------------------------------- hero con slider */
/* El hero sube detrás del encabezado translúcido; el contenido conserva su posición del diseño. */
/* Alto: a la mitad entre el del diseño (1244) y el de la pantalla, sin pasar de 1244 ni bajar de 640.
   El contenido se acomoda desde abajo. */
.amen-hero {
  position: relative; overflow: hidden; background: var(--c-ink);
  height: min(calc(1244.1 * var(--u)), max((calc(1244.1 * var(--u)) + 100vh) / 2, calc(640 * var(--u))));
  height: min(calc(1244.1 * var(--u)), max((calc(1244.1 * var(--u)) + 100svh) / 2, calc(640 * var(--u))));
}
/* Las diapositivas ocultas no se muestran (ni se descargan) hasta que se eligen. */
/* Fondo de tinta propio: el oscurecimiento al 79 % nunca deja ver la diapositiva anterior. */
.amen-hero__slide { position: absolute; inset: 0; display: none; background: var(--c-ink); }
.amen-hero__slide.is-active, .amen-hero__slide.is-leaving { display: block; }
.amen-hero__slide.is-active { z-index: 1; animation: amen-fade .8s var(--ease); }
.amen-hero__slide.is-instant { animation: none; }

/* Foto que crece desde la tarjeta hasta cubrir el fondo al cambiar de amenidad.
   Queda por encima del fondo actual y por debajo de las tarjetas y el texto. */
.amen-expander { position: absolute; z-index: 1; overflow: hidden; background: var(--c-ink); pointer-events: none; will-change: left, top, width, height; }
.amen-expander img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes amen-fade { from { opacity: 0; } to { opacity: 1; } }
.amen-hero__img { width: 100%; height: 100%; object-fit: cover; opacity: .79; }
.amen-hero .frame { z-index: 2; top: var(--header-design); height: calc(100% - var(--header-design)); }

.amen-hero__text {
  position: absolute; left: calc(174.3 * var(--u)); bottom: calc(222.64 * var(--u)); width: calc(660 * var(--u)); /* título, Tour virtual y tarjetas: 100 más abajo que en el diseño para que se vea más la foto */
  color: var(--c-paper); font-weight: 700; letter-spacing: var(--track);
  text-shadow: 0 calc(4 * var(--u)) calc(22 * var(--u)) rgb(0 0 0 / .45);
}
.amen-hero__title { font-size: calc(88 * var(--u)); line-height: calc(88 * var(--u)); }
.amen-hero__cat { margin-top: calc(1.4 * var(--u)); font-size: calc(47 * var(--u)); line-height: calc(47 * var(--u)); white-space: nowrap; }
.amen-hero__text.is-changing { animation: amen-text .6s var(--ease); }
@keyframes amen-text { from { opacity: 0; transform: translateY(calc(12 * var(--u))); } to { opacity: 1; transform: none; } }

.amen-hero__tour {
  position: absolute; left: calc(174.3 * var(--u)); bottom: calc(95 * var(--u));
  width: calc(236.2 * var(--u)); height: calc(67.9 * var(--u)); border-radius: calc(11 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgb(0 0 0 / .3);
}

/* Fila de tarjetas: se desplaza hacia la derecha para ver todas. El relleno deja ver sombras. */
.amen-hero__thumbs-scroll {
  position: absolute; left: calc(858.9 * var(--u)); right: calc(50% - 960 * var(--u)); bottom: calc(11 * var(--u));
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab;
}
.amen-hero__thumbs-scroll::-webkit-scrollbar { display: none; }
.amen-hero__thumbs-scroll.is-dragging { cursor: grabbing; }
.amen-hero__thumbs { display: flex; gap: calc(35.5 * var(--u)); width: max-content; padding: calc(20 * var(--u)) calc(80 * var(--u)) calc(40 * var(--u)) 0; }
.amen-hero__thumbs li[hidden] { display: none; }
.amen-hero__thumbs li { will-change: transform; }
.amen-hero__thumbs button {
  display: block; width: calc(253.6 * var(--u)); height: calc(369.7 * var(--u)); padding: 0; border: 0;
  border-radius: calc(29.7 * var(--u)); overflow: hidden; cursor: pointer; background: var(--c-ink);
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgb(0 0 0 / .35);
  transition: transform .35s var(--ease);
}
.amen-hero__thumbs button:hover { transform: translateY(calc(-8 * var(--u))); }
.amen-hero__thumbs img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* Barra temporizadora bajo el encabezado: al llenarse, avanza el slider. */
.slide-progress {
  position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 51;
  height: max(5px, calc(7 * var(--u))); pointer-events: none;
}
.slide-progress span {
  display: block; height: 100%; background: var(--c-yellow);
  transform: scaleX(0); transform-origin: left;
}
.slide-progress.is-running span { animation: slide-fill var(--slide-ms, 7000ms) linear forwards; }
.slide-progress.is-paused span { animation-play-state: paused; }
@keyframes slide-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------------------------------------------------------- planta y listas */
.amen-plan { position: relative; height: calc(1470.3 * var(--u)); background: var(--c-paper); overflow: hidden; }
.amen-plan__stage, .amen-plan__canvas { display: contents; } /* solo generan caja en móvil (movil.css) */
/* Posición y ancho medidos para que los puntos con número de la foto queden justo debajo de los del SVG (si no, se
   asoma la orilla amarilla de la foto a un lado del punto). */
.amen-plan__img { position: absolute; left: calc(97.6 * var(--u)); top: calc(100.05 * var(--u)); width: calc(1730 * var(--u)); height: auto; }
.amen-plan__capa { position: absolute; left: calc(85 * var(--u)); top: calc(25.9 * var(--u)); width: calc(1750 * var(--u)); height: auto; pointer-events: none; }
.amen-plan__mini { position: absolute; left: calc(1240 * var(--u)); top: calc(995.9 * var(--u)); width: calc(460 * var(--u)); height: auto; }

.amen-list { position: absolute; top: calc(1049.77 * var(--u)); font-weight: 700; letter-spacing: var(--track); }
.amen-list--int { left: calc(284.8 * var(--u)); --num-w: calc(59.9 * var(--u)); }
.amen-list--ext { left: calc(724.5 * var(--u)); --num-w: calc(62.6 * var(--u)); }
.amen-list h3 { position: relative; font-size: var(--fs-sm); line-height: var(--fs-sm); }
.amen-list h3::before {
  content: ""; position: absolute; left: calc(-51.6 * var(--u)); top: calc(8.5 * var(--u));
  width: calc(32.9 * var(--u)); height: 1px; background: var(--c-ink);
}
.amen-list--ext h3::before { left: calc(-51.6 * var(--u)); }
.amen-list ol { margin: calc(45.78 * var(--u)) 0 0 calc(-51.6 * var(--u)); font-size: var(--fs-lg); line-height: calc(37.33 * var(--u)); }
.amen-list li { display: flex; white-space: nowrap; }
.amen-list li span { flex: none; width: var(--num-w); color: var(--c-yellow); }