/* ==========================================================================
   GLAM FLOW STUDIO — Arriendo del espacio
   Página de promoción del arriendo de la sala para clases externas.
   Reutiliza tokens.css + global.css (header, footer, botones, reveal).
   ========================================================================== */

/* ==================== HERO ==================== */
.arr-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + var(--space-12)) clamp(1.25rem, 5vw, 3rem) var(--space-16);
  overflow: hidden;
  isolation: isolate;
}
.arr-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.arr-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transform: scale(1.05);
}
.arr-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(17,12,14,0.35), transparent 70%),
    linear-gradient(180deg, rgba(17,12,14,0.78) 0%, rgba(17,12,14,0.5) 40%, var(--color-bg) 96%);
}
.arr-hero__inner { max-width: 900px; }
.arr-hero .eyebrow { justify-content: center; margin-bottom: var(--space-6); }
.arr-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-hero);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-shadow: 0 8px 50px rgba(17,12,14,0.6);
}
.arr-hero h1 em {
  font-style: italic;
  color: var(--brand-rosa);
}
.arr-hero__lead {
  margin: var(--space-6) auto var(--space-8);
  max-width: 46ch;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.5rem);
  color: var(--color-text);
  text-shadow: 0 2px 20px rgba(17,12,14,0.7);
}
.arr-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}
.arr-hero__stats {
  margin-top: var(--space-16);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  justify-content: center;
}
.arr-stat { text-align: center; }
.arr-stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--brand-dorado);
  line-height: 1;
}
.arr-stat span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ==================== TOUR (scrollytelling sticky) ==================== */
.tour {
  position: relative;
  /* Un tramo de scroll generoso: el video del estudio avanza fotograma a
     fotograma a lo largo de todo este alto (scroll-scrubbing). */
  height: calc(100svh * 7);
  background: var(--color-bg);
}
.tour-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

/* Escenario "cinema": el fotograma del recorrido se dibuja NÍTIDO y centrado en
   formato vertical (fg) sobre un fondo ambiental difuminado del mismo fotograma
   (bg). Así el video vertical del estudio se ve profesional tanto en desktop
   (columna central flotante + fondo) como en móvil (a pantalla completa).
   Dos canvas alimentados con el mismo fotograma; el scroll avanza el video. */
.tour-stage { position: absolute; inset: 0; overflow: hidden; }

/* Fondo ambiental: mismo fotograma a pantalla completa, difuminado y oscuro. */
#tourBg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.18 + var(--p, 0) * 0.05));
  filter: blur(46px) brightness(0.48) saturate(1.15);
  will-change: transform;
}
.tour-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(17,12,14,0.55) 100%),
    linear-gradient(0deg, rgba(17,12,14,0.85) 0%, rgba(17,12,14,0.3) 22%, transparent 46%);
}

/* Columna vertical centrada: fotograma nítido + hotspots, "flotando" sobre el fondo. */
.tour-fg-wrap {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  height: 100%;
  /* Los clips salieron en 3:4 (Higgsfield mantuvo el aspecto de las fotos). */
  aspect-ratio: 3 / 4;
  max-width: 100%;
  z-index: 3;
  transform: translateX(-50%) scale(calc(1 + var(--p, 0) * 0.04));
  transform-origin: center 45%;
  will-change: transform;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  overflow: hidden;
}
#tourFg,
.tour-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Degradado inferior dentro de la columna: legibilidad del panel sobre el video. */
.tour-fg-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(17,12,14,0.85) 0%, rgba(17,12,14,0.25) 26%, transparent 50%);
}

/* -------- Panel de información (cambia por zona; parallax leve) -------- */
.tour-info {
  position: absolute;
  left: clamp(1.25rem, 5vw, 4.5rem);
  bottom: clamp(2rem, 7vh, 5rem);
  max-width: 30rem;
  z-index: 4;
  transform: translateY(calc(var(--p, 0) * -32px));
  will-change: transform;
}
.tour-info__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--brand-dorado);
}
.tour-info__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.02;
  margin: 6px 0 12px;
}
.tour-info__desc {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-text);
  margin: 0;
}
/* Al cambiar de zona, el texto entra de nuevo con un fundido hacia arriba
   (JS re-dispara la clase .anim). */
.tour-info.anim .tour-info__num   { animation: infoUp 0.5s var(--ease-out-expo) both; }
.tour-info.anim .tour-info__title { animation: infoUp 0.5s var(--ease-out-expo) 0.06s both; }
.tour-info.anim .tour-info__desc  { animation: infoUp 0.5s var(--ease-out-expo) 0.12s both; }
@keyframes infoUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* -------- Hotspots: viven DENTRO de la columna vertical (se alinean con el
   fotograma nítido). Cada punto aparece cuando su elemento se ve en el
   recorrido (rango de fotograma via data-in/out en JS). -- */
.tour-hotspots {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hotspot {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-out-expo),
              transform var(--dur-normal) var(--ease-out-expo);
}
.hotspot.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.hotspot__dot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand-rosa);
  box-shadow: 0 0 0 4px rgba(234,157,181,0.28), var(--glow-rosa);
}
.hotspot__dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-rosa);
  animation: hotspotPulse 2.4s var(--ease-out-expo) infinite;
}
@keyframes hotspotPulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
.hotspot__label {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(17,12,14,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}
/* Etiquetas que se salen por la derecha se muestran hacia la izquierda. */
.hotspot--left .hotspot__label {
  left: auto;
  right: 26px;
}

/* -------- Rail de progreso (stepper vertical) -------- */
.tour-rail {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.tour-rail button {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--color-text-faint);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
  flex-direction: row-reverse;
  transition: color var(--dur-fast);
}
.tour-rail button .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--color-text-faint);
  flex: none;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.tour-rail button .txt { opacity: 0; transform: translateX(8px); transition: opacity var(--dur-fast), transform var(--dur-fast); }
.tour-rail button:hover { color: var(--color-text-muted); }
.tour-rail button:hover .txt { opacity: 1; transform: none; }
.tour-rail button[aria-current="true"] { color: var(--brand-rosa); }
.tour-rail button[aria-current="true"] .dot {
  background: var(--brand-rosa);
  border-color: var(--brand-rosa);
  transform: scale(1.3);
}
.tour-rail button[aria-current="true"] .txt { opacity: 1; transform: none; }

/* Indicación inicial de scroll dentro del tour */
.tour-cue {
  position: absolute;
  bottom: 22px;
  right: clamp(1.25rem, 5vw, 4.5rem);
  z-index: 5;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity var(--dur-normal);
}
.tour-cue::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--brand-rosa);
  animation: cueSlide 1.8s var(--ease-in-out) infinite;
}
@keyframes cueSlide { 0%,100% { transform: scaleX(0.4); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } }

/* ==================== VALORES / PRICING ==================== */
.pricing-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
.price-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-card);
}
.price-card--feature {
  border-color: rgba(234,157,181,0.35);
  box-shadow: var(--shadow-card), var(--glow-rosa);
}
.price-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.price-card h3 { font-size: var(--text-xl); }
.price-tag {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-dorado);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}
.price-includes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-6);
}
.price-includes li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
}
.price-includes svg { width: 15px; height: 15px; color: var(--brand-rosa); flex: none; }

.price-table { width: 100%; border-collapse: collapse; }
.price-table th,
.price-table td {
  padding: 13px 10px;
  text-align: right;
  font-family: var(--font-ui);
  border-bottom: 1px solid var(--color-border-soft);
}
.price-table th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-faint); font-weight: 600; }
.price-table td:first-child,
.price-table th:first-child { text-align: left; color: var(--color-text); font-weight: 500; }
.price-table tbody tr:last-child td { border-bottom: none; }
.price-table .col-imp { color: var(--brand-rosa); font-weight: 700; }
.price-table td.dur { font-weight: 600; }
.price-table .base { color: var(--color-text); font-weight: 700; }

.price-note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.price-note strong { color: var(--brand-rosa); }

/* Add-ons (implementación especial) */
.addon-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.addon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 14px 16px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}
.addon b { font-family: var(--font-ui); font-weight: 600; color: var(--color-text); }
.addon span { font-family: var(--font-ui); font-weight: 700; color: var(--brand-dorado); white-space: nowrap; }
.addon span.consult { color: var(--color-text-muted); font-weight: 500; font-size: var(--text-sm); }

/* ==================== USOS ==================== */
.uses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}
.use-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--dur-normal) var(--ease-out-expo), border-color var(--dur-normal);
}
.use-card:hover { transform: translateY(-4px); border-color: rgba(234,157,181,0.35); }
.use-card svg { width: 30px; height: 30px; color: var(--brand-rosa); margin-bottom: 12px; }
.use-card b { display: block; font-family: var(--font-ui); font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
.use-card p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ==================== CTA FINAL ==================== */
.arr-cta {
  position: relative;
  text-align: center;
  padding-block: var(--space-section);
  overflow: hidden;
  isolation: isolate;
}
.arr-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 60% at 50% 30%, rgba(234,157,181,0.16), transparent 70%),
    radial-gradient(40% 40% at 80% 80%, rgba(210,160,242,0.12), transparent 70%);
}
.arr-cta h2 { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.arr-cta p { max-width: 48ch; margin: 0 auto var(--space-8); color: var(--color-text-muted); font-size: var(--text-lg); }
.arr-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.arr-cta__meta {
  margin-top: var(--space-12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.arr-cta__meta a { color: var(--color-text); }
.arr-cta__meta div { display: flex; align-items: center; gap: 8px; }
.arr-cta__meta svg { width: 17px; height: 17px; color: var(--brand-rosa); }

/* Botón de WhatsApp verde para acciones de contacto directo */
.btn-whatsapp { background: #25D366; color: #0B3D24; }
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 0 46px rgba(37,211,102,0.35); }
.btn-whatsapp svg { width: 20px; height: 20px; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 960px) {
  .pricing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .tour-rail { display: none; }
  .tour-info { left: clamp(1.25rem, 5vw, 3rem); right: clamp(1.25rem, 5vw, 3rem); max-width: none; }
  .hotspot__label { font-size: var(--text-xs); padding: 6px 11px; }
  /* En móvil las etiquetas largas pueden desbordar: se acortan con ellipsis. */
  .hotspot__label { max-width: 52vw; overflow: hidden; text-overflow: ellipsis; }
  .tour-cue { display: none; }
  .price-table th, .price-table td { padding: 11px 6px; font-size: var(--text-sm); }

  /* En móvil la columna ocupa toda la ventana (video vertical a pantalla
     completa) y el fondo ambiental deja de hacer falta. */
  #tourBg { display: none; }
  .tour-fg-wrap {
    left: 0;
    width: 100%;
    aspect-ratio: auto;
    transform: scale(calc(1 + var(--p, 0) * 0.04));
    box-shadow: none;
  }
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
  #tourBg { transform: scale(1.18) !important; }
  .tour-fg-wrap { transform: translateX(-50%) !important; }
  .tour-info { transform: none !important; }
  .hotspot__dot::after { animation: none; }
  .tour-cue::after { animation: none; }
  .arr-hero__bg img { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .tour-fg-wrap { transform: none !important; }
}