/* ==========================================================================
   03. INTRODUCCIÓN EDITORIAL & ENTRADA CINEMATOGRÁFICA SINCRONIZADA
   ========================================================================== */
.intro-editorial {
  position: relative;
  width: 100%;
  min-height: clamp(340px, 48vh, 500px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  text-align: center;
  padding: calc(var(--nav-height) + clamp(2rem, 4vh, 3.5rem)) var(--space-4) clamp(2rem, 4vh, 3rem);
  z-index: 10;
  overflow: hidden;
}

.intro-content-wrapper {
  max-width: 780px;
  margin: 0 auto;
}

/* Estado inicial antes del reveal: sutil desplazamiento vertical y opacidad cero */
.intro-h1 {
  font-family: var(--font-ui);
  font-size: clamp(2.1rem, 3.8vw, 3.4rem);
  line-height: 1.15;
  color: var(--color-brand-blue-deep);
  margin-bottom: var(--space-3);
  font-weight: 700;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.intro-subhead {
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.intro-spacer {
  margin-top: var(--space-5);
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.intro-indicator-line {
  display: block;
  width: 1.5px;
  height: 48px;
  background: linear-gradient(180deg, var(--color-brand-blue) 0%, transparent 100%);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Entrada activada automáticamente al desvanecerse el preloader (experience-ready) */
body.experience-ready .intro-h1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}

body.experience-ready .intro-subhead {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.35s;
}

body.experience-ready .intro-spacer {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.55s;
}

body.experience-ready .intro-indicator-line {
  transform: scaleY(1);
  transition-delay: 0.75s;
}

/* Fallback inmediato si reduced-motion está activo */
@media (prefers-reduced-motion: reduce) {
  .intro-h1,
  .intro-subhead,
  .intro-spacer {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .intro-indicator-line {
    transform: scaleY(1) !important;
    transition: none !important;
  }
}

/* ==========================================================================
   04. HERO SECTION (Cinematic Flow)
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. HERO VIEWPORT CONTAINER & ATMÓSFERA CELESTIAL
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  min-height: clamp(640px, 86vh, 880px);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: clamp(2rem, 4vh, 3.5rem);
  padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
  overflow: hidden;
  box-sizing: border-box;
  /* Domo celeste diurno con difusión de luz cenital */
  background: 
    radial-gradient(ellipse 120% 75% at 50% -5%, #FFFFFF 0%, #F5FAFF 32%, #DCEEFE 68%, #C9E5FC 88%, #EDF6FE 100%);
  z-index: var(--z-base);
}

/* Núcleo de Difusión de Luz Solar Superior */
.sky-sun-core {
  position: absolute;
  top: -15vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, 1000px);
  height: min(70vh, 700px);
  border-radius: var(--radius-circle);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.45) 35%, rgba(56, 182, 255, 0.12) 65%, transparent 80%);
  pointer-events: none;
  filter: blur(32px);
  z-index: var(--z-sky);
}

/* --------------------------------------------------------------------------
   02. CAPAS DE NUBES VOLUMÉTRICAS (ATMOSPHERIC DEPTH SYSTEM)
   -------------------------------------------------------------------------- */
.clouds-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: var(--z-clouds-bg);
}

/* Nube 1: Banco de nubes en horizonte */
.cloud-bank-horizon {
  position: absolute;
  bottom: 0;
  left: -10vw;
  width: 120vw;
  height: clamp(240px, 46vh, 520px);
  background: 
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.82) 40%, rgba(220, 238, 254, 0.35) 75%, transparent 100%),
    radial-gradient(circle 340px at 22% 62%, rgba(255, 255, 255, 0.95) 0%, transparent 70%),
    radial-gradient(circle 400px at 78% 58%, rgba(255, 255, 255, 0.95) 0%, transparent 75%);
  filter: blur(14px);
  opacity: 0.88;
  animation: driftHorizon 34s ease-in-out infinite alternate;
  will-change: transform;
}

/* Nube 2: Formación lateral izquierda (Plano Medio) */
.cloud-bank-left {
  position: absolute;
  top: clamp(20%, 26vh, 35%);
  left: -10vw;
  width: clamp(280px, 42vw, 560px);
  height: clamp(280px, 48vh, 560px);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.94) 0%, rgba(235, 246, 255, 0.6) 45%, rgba(199, 228, 252, 0.15) 70%, transparent 85%);
  filter: blur(12px);
  opacity: 0.78;
  animation: driftMidLeft 26s var(--ease-in-out-gentle) infinite alternate;
  will-change: transform;
  z-index: var(--z-clouds-mid);
}

/* Nube 3: Formación lateral derecha (Plano Medio Alto) */
.cloud-bank-right {
  position: absolute;
  top: clamp(14%, 18vh, 25%);
  right: -8vw;
  width: clamp(300px, 45vw, 600px);
  height: clamp(300px, 50vh, 600px);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, rgba(240, 248, 255, 0.58) 50%, rgba(56, 182, 255, 0.1) 75%, transparent 85%);
  filter: blur(14px);
  opacity: 0.82;
  animation: driftMidRight 28s var(--ease-in-out-gentle) 2s infinite alternate;
  will-change: transform;
  z-index: var(--z-clouds-mid);
}

/* Nube 4: Velo difuso en primer plano (Foreground Pass-through) */
.cloud-veil-foreground {
  position: absolute;
  bottom: -15vh;
  left: 0;
  width: 100vw;
  height: clamp(180px, 35vh, 380px);
  background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0.94) 45%, rgba(255, 255, 255, 0) 100%);
  filter: blur(8px);
  pointer-events: none;
  z-index: var(--z-clouds-fg);
}

@keyframes driftHorizon {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(3vw, -2vh, 0) scale(1.03); }
}

@keyframes driftMidLeft {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2.5vw, 2vh, 0) scale(1.04); }
}

@keyframes driftMidRight {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2vw, -2.5vh, 0) scale(1.035); }
}

/* --------------------------------------------------------------------------
   03. CONTENIDO EDITORIAL & MENSAJES ROTATIVOS (CENTRO NARRATIVO)
   -------------------------------------------------------------------------- */
.hero-content-wrapper {
  position: relative;
  z-index: var(--z-hero-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: min(92vw, 1080px);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--space-4);
  box-sizing: border-box;
}

/* Tag Superior Sutil */
.hero-badge-container {
  margin-bottom: clamp(0.75rem, 2vh, 1.5rem);
}

.hero-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 1rem;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 74, 173, 0.09);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tag);
  text-transform: uppercase;
  color: var(--color-brand-blue);
  box-shadow: 0 4px 16px rgba(0, 74, 173, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-pill-tag .tag-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background-color: var(--color-brand-cyan);
  box-shadow: 0 0 8px var(--color-brand-cyan);
}

/* Escenario de Mensajes con Gran Anchura y Proporción */
.hero-message-theatre {
  position: relative;
  min-height: clamp(160px, 24vh, 220px);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-message-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  filter: blur(6px);
  transition: 
    opacity 0.95s var(--ease-natural),
    transform 0.95s var(--ease-natural),
    filter 0.95s var(--ease-natural);
  pointer-events: none;
}

.hero-message-slide.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

/* Modificador para texto anclado fijo */
.static-narrative .hero-message-slide {
  position: relative;
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
  z-index: 30;
}

/* Modificador para carrusel central */
.hero-carousel-narrative {
  position: relative;
  min-height: clamp(120px, 15vh, 200px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
}

.hero-carousel-narrative .hero-message-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s var(--ease-natural), transform 1.5s var(--ease-natural);
}

.hero-carousel-narrative .hero-message-slide.active {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.hero-carousel-narrative .hero-message-slide.leaving {
  opacity: 0;
  transform: translate(-50%, -60%) scale(0.98);
}

/* Tipografía Editorial del H1 (Montserrat Bold de Marca) */
.hero-h1 {
  font-family: var(--font-ui);
  font-size: clamp(1.8rem, 3.2vw, 2.75rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-hero);
  letter-spacing: -0.02em;
  color: var(--color-brand-blue-deep);
  margin-bottom: clamp(0.75rem, 1.8vh, 1.25rem);
  text-wrap: balance;
}

.hero-title-accent {
  color: var(--color-brand-blue);
  background: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-brand-cyan) 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hero-subhead {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  max-width: min(90vw, 640px);
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   04. PRODUCTOS SUSPENDIDOS EN EL ESPACIO (SPATIAL FLUID COMPOSITION)
   -------------------------------------------------------------------------- */
.hero-spatial-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-hero-main-products);
}

.hero-floating-product {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* NO transition on transform so requestAnimationFrame runs at pure 60fps */
  transition: filter 0.3s ease;
  will-change: transform, opacity, z-index;
}

/* Envoltura visual con máscara suave de integración */
.product-visual-wrapper {
  position: relative;
  overflow: visible;
  mask-image: radial-gradient(ellipse 85% 85% at center, black 65%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at center, black 65%, transparent 95%);
}

.product-isolated-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 16px 28px rgba(0, 45, 110, 0.16));
}

/* Sombra de Contacto Atmosférica Flotante */
.product-cloud-shadow {
  width: 68%;
  height: 14px;
  border-radius: var(--radius-circle);
  background: radial-gradient(ellipse at center, rgba(0, 74, 173, 0.16) 0%, rgba(56, 182, 255, 0.05) 50%, transparent 80%);
  filter: blur(6px);
  margin-top: -8px;
}

/* --- Posicionamiento Espacial Fluido (clamp & vw/vh) --- */

/* 1. Cama Eléctrica */
.product-depth-hero {
  width: clamp(210px, 22vw, 300px);
  opacity: 0;
}

/* 2. Silla de Ruedas */
.product-depth-mid {
  width: clamp(170px, 17vw, 240px);
  opacity: 0;
}

/* 3. Caminador / Muletas / Colchoneta */
.product-depth-far {
  width: clamp(130px, 13vw, 180px);
  opacity: 0;
}

/* --- Microinteracciones al Hover / Enfoque --- */
.hero-floating-product:hover {
  /* Let JS handle transform changes on hover, or keep a small scale boost */
  z-index: 35 !important;
}

.hero-floating-product:hover .product-isolated-img {
  filter: drop-shadow(0 28px 50px rgba(0, 60, 150, 0.25)) drop-shadow(0 0 28px rgba(56, 182, 255, 0.35));
}

.hero-floating-product:hover .product-cloud-shadow {
  transform: scale(0.9);
  opacity: 0.7;
}

/* Píldora Contextual de Producto */
.product-hover-badge {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-natural), transform var(--duration-fast) var(--ease-natural);
}

.hero-floating-product:hover .product-hover-badge {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   06. CTA INTEGRADO
   -------------------------------------------------------------------------- */
.hero-bottom-actions {
  position: relative;
  z-index: var(--z-hero-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: clamp(0.75rem, 1.8vh, 1.5rem);
}

.hero-cta-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}