/* ==========================================================================
   1. BASE ENVIRONMENT & RESET
   ========================================================================== */
body, html {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  background-color: #0c0c0e;
}

.stage-container {
  width: 100vw; height: 100vh; position: relative;
  background: url('bg.png') no-repeat center center; background-size: cover;
}

/* ==========================================================================
   2. CAMERA POV ENGINE
   ========================================================================== */
.carousel-3d-viewport {
  width: 100%; height: 82vh; max-width: 1350px; margin: 0 auto;
  perspective: 1200px; perspective-origin: center 60%;
  display: flex; justify-content: center; align-items: flex-end;
  box-sizing: border-box; padding: 0 40px 4vh 40px; 
}

.stands-track {
  width: 100%; height: 100%; display: flex; justify-content: center;
  align-items: flex-end; position: relative; transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.25, 1, 0.3, 1), filter 0.4s ease;
}

/* --- Cinema Motion Blur Turn --- */
.spin-camera-left { animation: cameraTurnLeft 0.9s cubic-bezier(0.25, 1, 0.3, 1); }
.spin-camera-right { animation: cameraTurnRight 0.9s cubic-bezier(0.25, 1, 0.3, 1); }
@keyframes cameraTurnLeft { 0% { transform: rotateY(0deg); filter: blur(0px); } 45% { filter: blur(5px); } 100% { transform: rotateY(-360deg); filter: blur(0px); } }
@keyframes cameraTurnRight { 0% { transform: rotateY(0deg); filter: blur(0px); } 45% { filter: blur(5px); } 100% { transform: rotateY(360deg); filter: blur(0px); } }

/* ==========================================================================
   3. STRUCTURAL STAND NODES & CAPA 3D (ASPECT RATIO 16/15 SOLICITADO)
   ========================================================================== */
.stand-node {
    pointer-events: auto;
  position: absolute;
  width: 26%; 
  aspect-ratio: 16 / 15; 
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  transform-style: flat;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.5s ease;
  backface-visibility: hidden;
}

/* --- CASO A: Distribución cuando hay 3 elementos --- */
.stands-track[data-count="3"] .stand-node.pos-0 { transform: translateX(-124%) rotateY(30deg) translateZ(-120px); z-index: 5; }
.stands-track[data-count="3"] .stand-node.pos-1 { transform: translateX(0) rotateY(0deg) translateZ(40px); z-index: 30; }
.stands-track[data-count="3"] .stand-node.pos-2 { transform: translateX(124%) rotateY(-30deg) translateZ(-120px); z-index: 5; }

/* --- CASO B: SOLUCIÓN AL PUNTO 2 (Distribución cuando hay solo 2 elementos) --- */
.stands-track[data-count="2"] .stand-node.pos-left { transform: translateX(-54%) rotateY(16deg) translateZ(-60px); z-index: 20; }
.stands-track[data-count="2"] .stand-node.pos-right { transform: translateX(54%) rotateY(-16deg) translateZ(-60px); z-index: 20; }

/* --- CASO C: Distribución cuando hay solo 1 elemento --- */
.stands-track[data-count="1"] .stand-node.pos-center { transform: translateX(0) rotateY(0deg) translateZ(50px); z-index: 30; }

/* ==========================================================================
   4. RESPONSIVIDAD INTEGRAL (MÓVILES)
   ========================================================================== */
@media (max-width: 1024px) {
  .carousel-3d-viewport { perspective: 1000px; padding: 0 20px 2vh 20px; }
  .stand-node { width: 29%; }
  .stands-track[data-count="3"] .stand-node.pos-0 { transform: translateX(-115%) rotateY(26deg) translateZ(-140px) scale(0.95); }
  .stands-track[data-count="3"] .stand-node.pos-1 { transform: translateX(0) rotateY(0deg) translateZ(20px); }
  .stands-track[data-count="3"] .stand-node.pos-2 { transform: translateX(115%) rotateY(-26deg) translateZ(-140px) scale(0.95); }
  .stands-track[data-count="2"] .stand-node.pos-left { transform: translateX(-50%) rotateY(14deg) translateZ(-80px); }
  .stands-track[data-count="2"] .stand-node.pos-right { transform: translateX(50%) rotateY(-14deg) translateZ(-80px); }
}

@media (max-width: 720px) {
  .carousel-3d-viewport { perspective: 900px; height: 68vh; padding-bottom: 1vh; }
  .stand-node { width: 31%; }
  .stands-track[data-count="3"] .stand-node.pos-0 { transform: translateX(-108%) rotateY(22deg) translateZ(-160px) scale(0.9); }
  .stands-track[data-count="3"] .stand-node.pos-1 { transform: translateX(0) rotateY(0deg) translateZ(10px); }
  .stands-track[data-count="3"] .stand-node.pos-2 { transform: translateX(108%) rotateY(-22deg) translateZ(-160px) scale(0.9); }
  .stands-track[data-count="2"] .stand-node.pos-left { transform: translateX(-46%) rotateY(12deg) translateZ(-100px) scale(0.95); }
  .stands-track[data-count="2"] .stand-node.pos-right { transform: translateX(46%) rotateY(-12deg) translateZ(-100px) scale(0.95); }
}

/* ==========================================================================
   5. ZOOM INTERACTIVO AL ENFOCAR
   ========================================================================== */
.stand-node.focus-active { transform: translateX(0) rotateY(0deg) translateZ(350px) translateY(1%) !important; z-index: 200 !important; }
@media (max-width: 768px) { .stand-node.focus-active { transform: translateX(0) rotateY(0deg) translateZ(200px) translateY(0) !important; } }
.stands-track.dimmed-effect .stand-node:not(.focus-active) { opacity: 0 !important; pointer-events: none !important; }

/* ==========================================================================
   6. CANVAS INTERNO Y ELEMENTOS COMUNES
   ========================================================================== */
   
.stand-internal-canvas { position: relative; width: 100%; height: 100%;pointer-events: auto; }
.brand-logo { position: absolute; display: flex; justify-content: center; align-items: center; z-index: 12; }
.brand-logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.video-screen-container { position: absolute; background: #000; z-index: 10; overflow: hidden; }
.video-cover-wrapper { position: relative; width: 100%; height: 100%;   }
.video-cover-img { width: 100%; height: 100%; object-fit: cover; }
.video-play-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); display: flex; justify-content: center; align-items: center; transition: background 0.25s ease; }
.video-play-overlay i { font-size: 1.4rem; color: #ffffff; background: rgba(0, 0, 0, 0.75); width: 42px; height: 42px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 10px rgba(0,0,0,0.5); transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.2), background-color 0.25s; }
.video-cover-wrapper:hover .video-play-overlay { background: rgba(0, 0, 0, 0.15); }
.video-cover-wrapper:hover .video-play-overlay i { transform: scale(1.1); background-color: #ff0000; }
.inline-video-player { width: 100%; height: 100%; border: none; }
.promo-banner { position: absolute; z-index: 12;   }
.promo-banner img { width: 100%; height: 100%; object-fit: cover; }
.social-shelf { position: absolute; display: flex; justify-content: center; gap: 6px; align-items: center; z-index: 15; }
/* Asegurar que todos los elementos internos sean los que dictan el cursor */
.stand-node {
  pointer-events: auto;
}
.stand-internal-canvas {
  pointer-events: none; /* El contenedor principal no bloquea el clic */
}

.promo-banner, 
.video-cover-wrapper, 
.social-link-btn {
  pointer-events: auto !important; /* Los hijos SÍ reciben el clic */
}

/* Forzar cursor explícito */
.promo-banner { cursor: zoom-in !important; }
.video-cover-wrapper { cursor: pointer !important; }
.social-link-btn { cursor: pointer !important; }
/* ==========================================================================
   7. PUNTO 3: POSICIONAMIENTO MAPEADO SEGÚN EL STANDTYPE
   ========================================================================== */

/* --- TIPO A: STAND CYBER --- */
.stand-node.stand-cyber .brand-logo { 
  top: 2%; 
  left:60%; 
  width: 38%; 
  height: 35%; 
}
.stand-node.stand-cyber .video-screen-container { 
  top: 34.5%;
    left:30%;
    width: 36%;
    height: 24.5%;
}
.stand-node.stand-cyber .promo-banner { 
   top: 17%;
    right: 74%;
    width: 15%;
    height: 50%;
 }
.stand-node.stand-cyber .social-shelf { bottom: 30%; left: 28%; width: 37.8%; height: 9%; }

/* --- TIPO B: STAND ECO (Cambio de posiciones internas de prueba) --- */
.stand-node.stand-eco .brand-logo { top:71%; left: 15%; width: 21%; height: 18%; }
.stand-node.stand-eco .video-screen-container { 
  top:25%;
    left:25%;
    width: 45%;
    height: 30%;
}
.stand-node.stand-eco .promo-banner { 
  top: 28%; 
  right: 79%; 
  width: 11.0%; 
  height: 28.0%; 
}
.stand-node.stand-eco .social-shelf {
   bottom: 36.5%; 
   left: 25%; 
   width: 34.0%; 
   height: 9%; 
  }

/* --- TIPO C: STAND FUTURISTIC --- */
.stand-node.stand-futuristic .brand-logo { 
  top: 6%; 
  left: 33%; 
  width: 34%; 
  height: 16%; 
}
.stand-node.stand-futuristic .video-screen-container { 
  top: 26.0%; 
  left:30%; 
  width:37%; 
  height: 38%;
 }
.stand-node.stand-futuristic .promo-banner { 
  top: 7%; 
  right: 9.0%; 
  width: 20%; 
  height: 90%; 
}
.stand-node.stand-futuristic .social-shelf { bottom: 22%; left: 27%; width: 40.0%; height: 8.5%; }

/* ==========================================================================
   8. REDES SOCIALES (PUNTO 1: SOLUCIÓN DE BUGS DE PUNTERO)
   ========================================================================== */
.social-link-btn {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  text-decoration: none; font-size: 0.65rem;
  transition: filter 0.2s ease, background-color 0.2s ease;
  
  /* PUNTO 1: Forzamos cursor pointer nativo únicamente en el link contenedor */
  cursor: pointer !important; 
  pointer-events: auto !important; 
}
.social-link-btn:hover { filter: brightness(1.3); }

/* Para evitar cualquier parpadeo de foco, el icono interno ignora por completo al ratón */
.social-link-btn i { pointer-events: none !important; }

/* ==========================================================================
   9. INTERFACES UI / DOCK DE NAVEGACIÓN BAJA
   ========================================================================== */
.btn-back-room {
  position: absolute; top: 4%; left: 4%; z-index: 250;
  display: flex; align-items: center; gap: 8px;
  background: rgba(10, 10, 14, 0.55); color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25); padding: 9px 20px;
  border-radius: 30px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn-back-room:hover { background: #ffffff; color: #111111; text-shadow: none; transform: translateY(-1px); }

.navigation-dock { position: absolute; bottom: 3vh; left: 50%; transform: translateX(-50%); display: flex; gap: 20px; z-index: 300; }
.nav-arrow { background: rgba(20, 20, 25, 0.85); border: 1px solid rgba(255, 255, 255, 0.15); color: white; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 1.05rem; transition: background 0.25s, transform 0.2s; }
.nav-arrow:hover { background: #ffffff; color: #000000; transform: scale(1.05); }

/* ==========================================================================
   10. POPUP MODAL COMPACTO Y COMPLETAMENTE RESPONSIVO
   ========================================================================== */
.popup-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(5, 5, 8, 0.85); backdrop-filter: blur(20px); z-index: 500; display: flex; justify-content: center; align-items: center; padding: 15px; box-sizing: border-box; }
.popup-overlay:not(.hidden) { animation: popupOverlayFadeIn 0.35s ease; }
.popup-portal-card { background: linear-gradient(135deg, #13131e 0%, #08080d 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; width: 100%; max-width: 980px; max-height: 90vh; overflow-y: auto; color: #fff; position: relative; z-index: 2; padding: 30px; box-sizing: border-box; }
.popup-overlay:not(.hidden) .popup-portal-card { animation: popupCardZoomIn 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes popupOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes popupCardZoomIn {
  from { opacity: 0; transform: scale(0.92) translateY(14px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Partículas flotantes del backdrop --- */
.popup-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.popup-particle {
  position: absolute;
  left: var(--left);
  bottom: -12px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--particle-color, #00f0ff);
  box-shadow: 0 0 10px 1px var(--particle-color, #00f0ff);
  opacity: 0;
  animation: popupParticleFloat var(--duration) linear infinite;
  animation-delay: var(--delay);
}
@keyframes popupParticleFloat {
  0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translate(calc(var(--drift) * 0.5), -50vh) scale(1); }
  90%  { opacity: 0.7; }
  100% { transform: translate(var(--drift), -105vh) scale(0.4); opacity: 0; }
}

/* --- Columna 1: logo + redes sociales / Columna 2: video / Columna 3: acordeón --- */
.popup-columns-container { display: flex; flex-direction: row; gap: 26px; align-items: stretch; }
.popup-col { display: flex; flex-direction: column; }

.popup-col-logo { flex: 0 0 22%; align-items: center; text-align: center; }
.popup-logo-wrap {
  width: 100%; aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center;
  background: rgba(255, 255, 255, 0.03); border-radius: 16px; padding: 12px; box-sizing: border-box;
}
.popup-logo-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.popup-col-logo .popup-title { font-size: 1.15rem; color: #00f0ff; font-weight: 600; margin: 14px 0 8px; }
.popup-social-shelf { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: auto; }

.popup-col-video { flex: 0 0 32%; }
.popup-video-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; cursor: pointer; background: #000; align-self: flex-start; }
.popup-video-cover-img { width: 100%; height: 100%; object-fit: cover; }
.popup-video-play-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); display: flex; justify-content: center; align-items: center; transition: background 0.25s ease; }
.popup-video-wrapper:hover .popup-video-play-overlay { background: rgba(0, 0, 0, 0.15); }
.popup-video-play-overlay i { font-size: 1.3rem; color: #fff; background: rgba(0, 0, 0, 0.75); width: 46px; height: 46px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.2), background-color 0.25s; }
.popup-video-wrapper:hover .popup-video-play-overlay i { transform: scale(1.1); background-color: #ff0000; }

.popup-col-accordion { flex: 1; min-width: 0; }
.popup-section-header { border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; font-size: 0.95rem; color: #aaa; }
.popup-description { margin-top: 15px; color: #e2e2ec; font-size: 0.95rem; line-height: 1.6; }

.popup-accordion { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.accordion-item { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, 0.02); }
.accordion-header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: none; border: none; color: #fff; padding: 10px 14px; font-size: 0.9rem; cursor: pointer; text-align: left; font-family: inherit; }
.accordion-chevron { transition: transform 0.25s ease; color: #00f0ff; flex-shrink: 0; }
.accordion-item.active .accordion-chevron { transform: rotate(180deg); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 14px; }
.accordion-item.active .accordion-panel { max-height: 300px; padding: 0 14px 14px; }
.accordion-panel p { margin: 0; color: #c9c9d4; font-size: 0.85rem; line-height: 1.55; }

.popup-meta-data { margin-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 15px; font-size: 0.85rem; }
.popup-meta-data p { margin: 6px 0; color: #999; }
.popup-meta-data span { color: #fff; }
.popup-close-x { position: absolute; top: 15px; right: 20px; background: none; border: none; color: #666; font-size: 1.8rem; cursor: pointer; transition: color 0.2s; }
.popup-close-x:hover { color: #fff; }

@media (max-width: 900px) {
  .popup-col-logo { flex: 0 0 26%; }
  .popup-col-video { flex: 0 0 34%; }
}

@media (max-width: 780px) {
  .popup-portal-card { padding: 20px; }
  .popup-columns-container { flex-direction: column; gap: 18px; }
  .popup-col-logo, .popup-col-video, .popup-col-accordion { flex: 1 1 auto; width: 100%; }
  .popup-col-logo { flex-direction: row; align-items: center; text-align: left; gap: 14px; }
  .popup-logo-wrap { width: 70px; height: 70px; flex-shrink: 0; }
  .popup-col-logo .popup-title { margin: 0; }
  .popup-social-shelf { margin-top: 0; margin-left: auto; justify-content: flex-end; }
  .popup-video-wrapper { align-self: stretch; }
}

.hidden { display: none !important; }

/* ==========================================================================
   11. FIX FINAL PARA PRIORIDAD DE EVENTOS (NO BORRAR)
   ========================================================================== */
.stand-internal-canvas { pointer-events: none !important; }

.brand-logo
  {
    pointer-events: auto !important;
    z-index: 110 !important;
}
 
.video-screen-container, 
.video-cover-wrapper, 
.promo-banner, 
.social-shelf, 
.social-link-btn {
    pointer-events: auto !important;
    z-index: 100 !important;
}


.video-play-overlay { pointer-events: none !important; }