.elementor-81253 .elementor-element.elementor-element-58b4fdb{--display:flex;}.elementor-81253 .elementor-element.elementor-element-f96c145{width:100%;max-width:100%;}.elementor-81253 .elementor-element.elementor-element-f96c145 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-f96c145 *//* 
=======================
VARIABLES GLOBALES
======================= 
*/
:root {
  --color-primario: #0A1128;
  --color-secundario: #001F54;
  --color-acento: #00E676;
  --color-acento-hover: #00C853;
  --color-peligro: #F44336;
  --color-info: #448AFF;
  --color-raro: #B388FF;
  
  --borde-redondeado: 8px;
  --sombra-suave: 0 2px 10px rgba(0, 0, 0, 0.2);
  --sombra-media: 0 4px 20px rgba(0, 0, 0, 0.3);
  --sombra-fuerte: 0 8px 30px rgba(0, 0, 0, 0.5);
  
  --transicion-rapida: 0.2s ease;
  --transicion-media: 0.4s ease;
  --transicion-lenta: 0.7s ease;
  
  --glow-effect: 0 0 15px rgba(0, 230, 118, 0.6);
  --font-principal: 'Montserrat', 'Segoe UI', sans-serif;
}

/* 
=======================
ESTILOS GENERALES
======================= 
*/
#cosmos-experiencia {
  font-family: var(--font-principal);
  color: white;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background-color: var(--color-primario);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  height: 760px;
  box-shadow: var(--sombra-fuerte);
  box-sizing: border-box;
  line-height: 1.6;
}

#cosmos-experiencia * {
  box-sizing: border-box;
}

/* 
=======================
PANTALLA DE INICIO
======================= 
*/
#pantalla-inicio {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(135deg, rgba(10, 17, 40, 0.8), rgba(0, 31, 84, 0.9));
}

.inicio-bg-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, white, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 40px 70px, white, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 60px 110px, white, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 200px 150px, white, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 160px 280px, white, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
  z-index: 0;
}

.inicio-bg-nebula {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 30% 40%, rgba(76, 175, 80, 0.05), transparent 70%),
    radial-gradient(circle at 70% 60%, rgba(33, 150, 243, 0.1), transparent 70%);
  z-index: 0;
  opacity: 0.7;
}

.astronauta-flotando {
  position: absolute;
  top: 40%;
  left: 70%;
  width: 120px;
  height: 180px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150"%3E%3Cg%3E%3Crect x="30" y="20" width="40" height="50" rx="20" fill="%23fff" /%3E%3Ccircle cx="50" cy="45" r="15" fill="%23000" /%3E%3Ccircle cx="50" cy="45" r="12" fill="%23222" /%3E%3Crect x="40" y="70" width="20" height="40" rx="5" fill="%23fff" /%3E%3Crect x="30" y="110" width="40" height="20" rx="5" fill="%23fff" /%3E%3Crect x="30" y="130" width="15" height="20" rx="5" fill="%23fff" /%3E%3Crect x="55" y="130" width="15" height="20" rx="5" fill="%23fff" /%3E%3Cline x1="30" y1="30" x2="15" y2="15" stroke="%23fff" stroke-width="1" /%3E%3C/g%3E%3C/svg%3E');
  background-repeat: no-repeat;
  z-index: 2;
  animation: flotar 8s infinite ease-in-out;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

.particulas-espaciales {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(1px 1px at 150px 50px, rgba(255, 255, 255, 0.8), rgba(0,0,0,0)),
    radial-gradient(1px 1px at 90px 150px, rgba(255, 255, 255, 0.8), rgba(0,0,0,0)),
    radial-gradient(1px 1px at 230px 250px, rgba(255, 255, 255, 0.8), rgba(0,0,0,0)),
    radial-gradient(1px 1px at 60px 300px, rgba(255, 255, 255, 0.8), rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 300px 300px;
  z-index: 1;
}

.planeta-decorativo {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}

.planeta-1 {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 30% 40%, #1565C0, #0D47A1);
  top: 20%;
  left: 10%;
  box-shadow: 0 0 20px rgba(13, 71, 161, 0.5);
}

.planeta-2 {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at 40% 30%, #7B1FA2, #4A148C);
  bottom: 15%;
  right: 15%;
  box-shadow: 0 0 15px rgba(74, 20, 140, 0.4);
}

.cometa-animado {
  position: absolute;
  top: 15%;
  right: -5%;
  width: 3px;
  height: 3px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.7);
  z-index: 1;
  animation: cometa 10s linear infinite;
}

.cometa-animado::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 2px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.7), transparent);
  transform: rotate(15deg);
}

@keyframes cometa {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate(-1200px, 400px) scale(1.2);
    opacity: 0;
  }
}

.titulo-principal {
  font-size: 4rem;
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: 4px;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
  color: white;
  position: relative;
  z-index: 2;
  animation: aparecer 1.5s ease-out;
}

.subtitulo-inicio {
  font-size: 1.4rem;
  margin: 0 0 30px;
  letter-spacing: 1px;
  opacity: 0.9;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 2;
  animation: aparecer 1.5s ease-out 0.3s backwards;
}

.card-descripcion {
  background: rgba(10, 17, 40, 0.8);
  border-radius: var(--borde-redondeado);
  padding: 20px 30px;
  max-width: 600px;
  margin: 0 auto 30px;
  box-shadow: var(--sombra-media);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 2;
  animation: aparecer 1.5s ease-out 0.6s backwards;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.controles-info {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
  animation: aparecer 1.5s ease-out 0.9s backwards;
}

.control-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.4);
  padding: 10px 15px;
  border-radius: 30px;
  font-size: 14px;
}

.icono-control {
  width: 24px;
  height: 24px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.icono-oxigeno {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300E676' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3Cpath fill='%2300E676' d='M12.93 9.13v2.16h2.3v1.43h-2.3V15h-1.85v-2.28H8.75v-1.43h2.33V9.13z'/%3E%3C/svg%3E");
}

.icono-energia {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300E676' d='M13 2.05v3.03c3.39.49 6 3.39 6 6.92 0 .9-.18 1.75-.48 2.54l2.6 1.53c.56-1.24.88-2.62.88-4.07 0-5.18-3.95-9.45-9-9.95zM12 19c-3.87 0-7-3.13-7-7 0-3.53 2.61-6.43 6-6.92V2.05c-5.06.5-9 4.76-9 9.95 0 5.52 4.47 10 9.99 10 3.31 0 6.24-1.61 8.06-4.09l-2.6-1.53C16.17 17.98 14.21 19 12 19z'/%3E%3C/svg%3E");
}

.icono-estabilidad {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300E676' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z'/%3E%3C/svg%3E");
}

.btn-accion-principal {
  background: linear-gradient(135deg, var(--color-acento), var(--color-acento-hover));
  color: var(--color-primario);
  border: none;
  padding: 15px 30px;
  border-radius: 30px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 0 20px rgba(0, 230, 118, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 2;
  font-family: var(--font-principal);
  letter-spacing: 1px;
  animation: aparecer 1.5s ease-out 1.2s backwards;
}

.btn-accion-principal:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 30px rgba(0, 230, 118, 0.7);
}

.btn-accion-principal:active {
  transform: translateY(0);
  box-shadow: 0 0 15px rgba(0, 230, 118, 0.3);
}

.pulse-animation {
  animation: pulsar 2s infinite;
}

.icono-cohete {
  font-size: 24px;
  animation: vibrar 5s infinite;
}

.inspirado-en {
  position: absolute;
  bottom: 15px;
  font-size: 12px;
  opacity: 0.7;
  z-index: 2;
}

@keyframes pulsar {
  0% {
    box-shadow: 0 0 15px rgba(0, 230, 118, 0.5);
  }
  50% {
    box-shadow: 0 0 25px rgba(0, 230, 118, 0.8);
  }
  100% {
    box-shadow: 0 0 15px rgba(0, 230, 118, 0.5);
  }
}

@keyframes vibrar {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flotar {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(3deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(15px) rotate(-3deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* 
=======================
TUTORIAL
======================= 
*/
#tutorial {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 30px;
}

.tutorial-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0, 31, 84, 0.4), transparent 70%);
  z-index: -1;
}

.tutorial-paso {
  background: rgba(10, 17, 40, 0.9);
  padding: 30px;
  border-radius: var(--borde-redondeado);
  max-width: 600px;
  width: 100%;
  text-align: center;
  box-shadow: var(--sombra-media);
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tutorial-paso.activo {
  display: block;
  animation: fadeIn 0.5s ease;
}

.tutorial-paso h3 {
  margin-top: 0;
  color: var(--color-acento);
  font-size: 1.8rem;
}

.tutorial-imagen {
  width: 200px;
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 20px auto;
  opacity: 0.8;
}

.tutorial-paso .paso-1 {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cg%3E%3Ccircle cx="50" cy="50" r="45" fill="%23001F54" /%3E%3Cpath d="M50 25 C 25 40 25 60 50 75 C 75 60 75 40 50 25" fill="%230A1128" /%3E%3Ccircle cx="50" cy="50" r="7" fill="%23fff" /%3E%3Ccircle cx="30" cy="40" r="2" fill="%23fff" /%3E%3Ccircle cx="42" cy="65" r="1" fill="%23fff" /%3E%3Ccircle cx="60" cy="32" r="1.5" fill="%23fff" /%3E%3Ccircle cx="70" cy="58" r="1" fill="%23fff" /%3E%3C/g%3E%3C/svg%3E');
}

.tutorial-paso .paso-2 {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cg%3E%3Crect x="10" y="30" width="80" height="15" rx="2" fill="%2300E676" opacity="0.7" /%3E%3Crect x="10" y="50" width="60" height="15" rx="2" fill="%23448AFF" opacity="0.7" /%3E%3Crect x="10" y="70" width="40" height="15" rx="2" fill="%23F44336" opacity="0.7" /%3E%3Ctext x="95" y="42" fill="%23fff" font-size="12"%%3EO%3C/text%3E%3Ctext x="95" y="62" fill="%23fff" font-size="12"%%3EE%3C/text%3E%3Ctext x="95" y="82" fill="%23fff" font-size="12"%%3EC%3C/text%3E%3C/g%3E%3C/svg%3E');
}

.tutorial-paso .paso-3 {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cg%3E%3Ccircle cx="50" cy="50" r="40" fill="none" stroke="%23fff" stroke-width="1" /%3E%3Cpath d="M50 10 L 50 90 M 10 50 L 90 50" stroke="%23fff" stroke-width="1" opacity="0.3" /%3E%3Cpath d="M50 40 L 65 65 L 35 65 Z" fill="%2300E676" /%3E%3Cpath d="M75 35 L 60 50 L 60 20 Z" fill="%23448AFF" /%3E%3Cpath d="M25 35 L 40 50 L 40 20 Z" fill="%23F44336" /%3E%3C/g%3E%3C/svg%3E');
}

.controles-tutorial {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 600px;
  margin-top: 30px;
}

.indicadores-pasos {
  display: flex;
  gap: 10px;
}

.indicador {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.3s ease;
}

.indicador.activo {
  background: var(--color-acento);
}

#btn-tutorial-anterior,
#btn-tutorial-siguiente {
  background: rgba(0, 230, 118, 0.2);
  color: white;
  border: 1px solid var(--color-acento);
  padding: 10px 20px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-principal);
}

#btn-tutorial-anterior:hover,
#btn-tutorial-siguiente:hover {
  background: rgba(0, 230, 118, 0.4);
}

#btn-tutorial-anterior:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#btn-saltar-tutorial {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: none;
  margin-top: 20px;
  cursor: pointer;
  font-family: var(--font-principal);
  font-size: 14px;
  transition: color 0.3s ease;
}

#btn-saltar-tutorial:hover {
  color: white;
  text-decoration: underline;
}

/* 
=======================
ESCENA PRINCIPAL
======================= 
*/
#nave-principal {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "panel panel"
    "ventana registro"
    "terminal registro";
  gap: 15px;
  padding: 15px;
  height: 100%;
  background: linear-gradient(135deg, var(--color-primario), var(--color-secundario));
  position: relative;
}

.escena-espacial {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.nebulosa-fondo,
.estrellas-lejanas,
.estrellas-cercanas,
.polvo-espacial {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.1s ease-out;
}

.nebulosa-fondo {
  background: 
    radial-gradient(circle at 30% 40%, rgba(76, 175, 80, 0.05), transparent 70%),
    radial-gradient(circle at 70% 60%, rgba(33, 150, 243, 0.1), transparent 70%);
  z-index: 0;
  opacity: 0.5;
}

.estrellas-lejanas {
  background-image: 
    radial-gradient(1px 1px at 20px 30px, white, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 40px 70px, white, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 60px 110px, white, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 200px 150px, white, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 400px 400px;
  z-index: 1;
}

.estrellas-cercanas {
  background-image: 
    radial-gradient(1.5px 1.5px at 150px 150px, white, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 250px 250px, white, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 350px 350px, white, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 500px 500px;
  z-index: 2;
}

.polvo-espacial {
  background-image: 
    radial-gradient(1px 1px at 150px 50px, rgba(255, 255, 255, 0.4), rgba(0,0,0,0)),
    radial-gradient(1px 1px at 90px 150px, rgba(255, 255, 255, 0.4), rgba(0,0,0,0)),
    radial-gradient(1px 1px at 230px 250px, rgba(255, 255, 255, 0.4), rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 300px 300px;
  z-index: 3;
}

#nave-distante {
  width: 40px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.5);
  border-radius: 50% 50% 0 0;
  position: absolute;
  top: 20%;
  right: 15%;
  z-index: 2;
  animation: parpadeoNave 3s infinite alternate;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20"%3E%3Cpath d="M20 0 L40 15 L30 20 L10 20 L0 15 Z" fill="%23ccc"/%3E%3Crect x="15" y="12" width="10" height="8" fill="%23555"/%3E%3C/svg%3E');
  background-size: contain;
  background-repeat: no-repeat;
}

@keyframes parpadeoNave {
  0% {
    opacity: 0.4;
    box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.6);
  }
}

/* 
=======================
PANEL DE CONTROL
======================= 
*/
#panel-control {
  grid-area: panel;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: rgba(10, 17, 40, 0.8);
  border-radius: var(--borde-redondeado);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1;
  box-shadow: var(--sombra-media);
  backdrop-filter: blur(10px);
}

#recursos {
  display: flex;
  gap: 20px;
}

.recurso {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icono-recurso {
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
}

.recurso-oxigeno .icono-recurso {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300E676' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}

.recurso-energia .icono-recurso {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300E676' d='M7 2v11h3v9l7-12h-4l4-8z'/%3E%3C/svg%3E");
}

.recurso-distancia .icono-recurso {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300E676' d='M13 5.08c3.06.44 5.48 2.86 5.92 5.92h3.03c-.47-4.72-4.23-8.48-8.95-8.95v3.03zM18.92 13c-.44 3.06-2.86 5.48-5.92 5.92v3.03c4.72-.47 8.48-4.23 8.95-8.95h-3.03zM11 18.92c-3.39-.49-6-3.4-6-6.92s2.61-6.43 6-6.92V2.05c-5.05.5-9 4.76-9 9.95 0 5.19 3.95 9.45 9 9.95v-3.03z'/%3E%3C/svg%3E");
}

.info-recurso {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
}

.nombre-recurso {
  font-size: 12px;
  color: #B0BEC5;
}

.contenedor-barra {
  width: 150px;
  height: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.barra-progreso {
  height: 100%;
  width: 100%;
  background: var(--color-acento);
  border-radius: 4px;
  transition: width 0.5s ease, background-color 0.5s ease;
}

.nivel-optimo {
  background: var(--color-acento);
}

.nivel-alerta {
  background: #FFC107;
}

.nivel-critico {
  background: var(--color-peligro);
}

#acto-actual {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--color-acento);
  font-weight: 500;
}

.acto-icono {
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300E676' d='M12 16.5l4-4h-3v-9h-2v9H8z M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
}

#contenedor-vidas {
  display: flex;
  gap: 5px;
}

.vida {
  font-size: 20px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.vida-perdida {
  opacity: 0.3;
  transform: scale(0.8);
  filter: grayscale(1);
}

/* 
=======================
VENTANA DE OBSERVACIÓN
======================= 
*/
#ventana-observacion {
  grid-area: ventana;
  background: rgba(10, 17, 40, 0.4);
  border-radius: var(--borde-redondeado);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
  transition: var(--transicion-media);
  transform-style: preserve-3d;
  perspective: 1000px;
  z-index: 1;
  height: 350px;
}

#fondo-espacio {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  transform-style: preserve-3d;
}

/* Astronauta */
#astronauta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 120px;
  background: url('data:image/svg+xml,%3Csvg width="80" height="120" viewBox="0 0 80 120" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg filter="url(%23filter0_d)"%3E%3Crect x="22" y="15" width="36" height="45" rx="18" fill="white"/%3E%3Ccircle cx="40" cy="37.5" r="15" fill="%23121212"/%3E%3Ccircle cx="40" cy="37.5" r="12" fill="%23000"/%3E%3Crect x="32.5" y="60" width="15" height="35" fill="white"/%3E%3Crect x="25" y="95" width="30" height="15" rx="5" fill="white"/%3E%3Crect x="25" y="105" width="12" height="15" rx="5" fill="white"/%3E%3Crect x="43" y="105" width="12" height="15" rx="5" fill="white"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_d" x="0" y="0" width="80" height="120" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/%3E%3CfeOffset dy="4"/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E') no-repeat center/contain;
  filter: drop-shadow(0 0 20px rgba(0, 230, 118, 0.4));
  z-index: 5;
  transition: transform 0.5s ease;
}

/* Estilo para la nave destino */
#nave-objetivo {
  position: absolute;
  width: 60px;
  height: 40px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"%3E%3Cpath d="M30 0 L60 25 L45 40 L15 40 L0 25 Z" fill="%23ddd"/%3E%3Crect x="20" y="25" width="20" height="15" fill="%23555"/%3E%3Ccircle cx="30" cy="20" r="5" fill="%2370c2ff"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 4;
  top: 15%;
  right: 10%;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.7));
  animation: naveFloat 5s infinite ease-in-out;
}

@keyframes naveFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}

/* Contenedor de meteoritos */
#contenedor-meteoritos {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.meteorito {
  position: absolute;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"%3E%3Ccircle cx="20" cy="20" r="18" fill="%23555" /%3E%3Ccircle cx="13" cy="15" r="3" fill="%23777" /%3E%3Ccircle cx="26" cy="22" r="4" fill="%23777" /%3E%3Ccircle cx="17" cy="26" r="2" fill="%23777" /%3E%3C/svg%3E');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 3;
  filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.3));
  animation: girarMeteorito 10s linear infinite;
}

@keyframes girarMeteorito {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Efecto de propulsión */
.propulsion-activa::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 20px;
  background: radial-gradient(ellipse at center, rgba(0, 230, 118, 1) 0%, rgba(0, 230, 118, 0) 70%);
  z-index: -1;
  animation: propulsion 0.5s ease infinite;
}

@keyframes propulsion {
  0% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
}

/* Efecto de respiración */
#efecto-respiracion {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.5) 100%);
  z-index: 10;
  opacity: 0.2;
  pointer-events: none;
  animation: respiracion 5s infinite;
}

@keyframes respiracion {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.4;
  }
}

/* Visor del casco (efecto viñeta) */
#visor-casco {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  pointer-events: none;
  border-radius: var(--borde-redondeado);
  box-shadow: inset 0 0 150px 30px rgba(0, 0, 0, 0.7);
  opacity: 0.7;
}

/* Efectos para eventos y transiciones */
.dano-efecto {
  animation: danoEfecto 1.5s ease;
}

.parpadeo-alerta {
  animation: parpadeoAlerta 1s ease;
}

@keyframes parpadeoAlerta {
  0%, 100% {
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
  }
  25%, 75% {
    box-shadow: inset 0 0 50px rgba(244, 67, 54, 0.3);
  }
  50% {
    box-shadow: inset 0 0 50px rgba(244, 67, 54, 0.5);
  }
}

@keyframes danoEfecto {
  0% {
    filter: brightness(1) saturate(1);
    transform: scale(1);
  }
  10% {
    filter: brightness(1.5) saturate(1.2) hue-rotate(45deg);
    transform: scale(1.02) rotate(1deg);
  }
  20% {
    filter: brightness(1) saturate(1) hue-rotate(90deg);
    transform: scale(1) rotate(-1deg);
  }
  30% {
    filter: brightness(1.5) saturate(1.2) hue-rotate(135deg);
    transform: scale(1.02) rotate(1deg);
  }
  40% {
    filter: brightness(1) saturate(1) hue-rotate(180deg);
    transform: scale(1) rotate(-1deg);
  }
  50% {
    filter: brightness(1.5) saturate(1.2) hue-rotate(225deg);
    transform: scale(1.02) rotate(1deg);
  }
  75% {
    filter: brightness(1) saturate(1) hue-rotate(270deg);
    transform: scale(1) rotate(-1deg);
  }
  100% {
    filter: brightness(1) saturate(1) hue-rotate(0deg);
    transform: scale(1) rotate(0deg);
  }
}

/* 
=======================
TERMINAL NARRATIVA
======================= 
*/
#terminal-narrativa {
  grid-area: terminal;
  background: rgba(10, 17, 40, 0.8);
  border-radius: var(--borde-redondeado);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--sombra-media);
  backdrop-filter: blur(10px);
  z-index: 1;
}

#indicador-transmision {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #b0bec5;
  transition: color 0.3s ease;
}

#indicador-transmision.transmision-activa {
  color: var(--color-acento);
}

.luz-parpadeo {
  width: 10px;
  height: 10px;
  background-color: var(--color-acento);
  border-radius: 50%;
  animation: luces 1.5s infinite alternate;
}

@keyframes luces {
  0% {
    opacity: 0.4;
    box-shadow: 0 0 5px rgba(0, 230, 118, 0.4);
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.8);
  }
}

#texto-narrativo {
  background: rgba(0, 0, 0, 0.4);
  padding: 15px;
  border-radius: var(--borde-redondeado);
  border-left: 3px solid var(--color-acento);
  font-size: 16px;
  line-height: 1.6;
  height: 100px;
  overflow-y: auto;
  position: relative;
  color: #eceff1;
}

#texto-narrativo.escribiendo::after {
  content: '|';
  display: inline-block;
  animation: cursor 1s infinite;
  margin-left: 2px;
}

@keyframes cursor {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Propulsores */
#propulsores-controles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#propulsores-horizontales {
  display: flex;
  gap: 10px;
}

.btn-propulsor {
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--color-acento);
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-propulsor:hover {
  background: rgba(0, 230, 118, 0.3);
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.5);
}

.btn-propulsor:active, 
.btn-propulsor.active {
  background: rgba(0, 230, 118, 0.5);
  transform: scale(0.95);
}

/* 
=======================
REGISTRO DE EVENTOS
======================= 
*/
#registro-eventos {
  grid-area: registro;
  background: rgba(10, 17, 40, 0.8);
  border-radius: var(--borde-redondeado);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--sombra-media);
  backdrop-filter: blur(10px);
  z-index: 1;
}

.titulo-registro {
  font-size: 14px;
  text-align: center;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #b0bec5;
  letter-spacing: 1px;
}

.lista-eventos {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  overflow-y: auto;
  padding-right: 5px;
}

.evento {
  background: rgba(0, 0, 0, 0.3);
  padding: 10px 12px;
  border-radius: var(--borde-redondeado);
  font-size: 13px;
  position: relative;
  padding-left: 15px;
  border-left: 2px solid var(--color-info);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.evento.visible {
  opacity: 1;
  transform: translateY(0);
}

.evento.inicial {
  border-left-color: var(--color-acento);
  opacity: 1;
  transform: translateY(0);
}

/* Scrollbar personalizada */
#registro-eventos::-webkit-scrollbar,
.lista-eventos::-webkit-scrollbar,
#texto-narrativo::-webkit-scrollbar {
  width: 6px;
}

#registro-eventos::-webkit-scrollbar-track,
.lista-eventos::-webkit-scrollbar-track,
#texto-narrativo::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

#registro-eventos::-webkit-scrollbar-thumb,
.lista-eventos::-webkit-scrollbar-thumb,
#texto-narrativo::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}

#registro-eventos::-webkit-scrollbar-thumb:hover,
.lista-eventos::-webkit-scrollbar-thumb:hover,
#texto-narrativo::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* 
=======================
QUIZ ESPACIAL
======================= 
*/
#quiz-espacial {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}

.quiz-contenedor {
  background: rgba(10, 17, 40, 0.9);
  border-radius: var(--borde-redondeado);
  padding: 25px;
  max-width: 600px;
  width: 90%;
  box-shadow: var(--sombra-fuerte);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: aparecer 0.5s ease;
}

#quiz-titulo {
  color: var(--color-acento);
  margin-top: 0;
  text-align: center;
  font-size: 1.8rem;
}

#quiz-pregunta {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

#quiz-opciones {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quiz-opcion {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  padding: 12px 15px;
  border-radius: var(--borde-redondeado);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  font-family: var(--font-principal);
}

.quiz-opcion:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: var(--color-acento);
}

.quiz-opcion.correcta {
  background: rgba(0, 230, 118, 0.3);
  border-color: var(--color-acento);
}

.quiz-opcion.incorrecta {
  background: rgba(244, 67, 54, 0.3);
  border-color: var(--color-peligro);
}

#quiz-feedback {
  margin-top: 20px;
  min-height: 40px;
  text-align: center;
  font-weight: bold;
}

/* 
=======================
MENSAJES FLOTANTES
======================= 
*/
#contenedor-mensajes {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 300px;
  height: auto;
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mensaje {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  border-radius: var(--borde-redondeado);
  transform: translateX(120%);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: var(--sombra-media);
  color: #fff;
  max-width: 100%;
}

.mensaje.mostrar {
  transform: translateX(0);
}

.icono-mensaje {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.texto-mensaje {
  flex: 1;
  font-size: 14px;
}

.mensaje.info {
  background: rgba(68, 138, 255, 0.9);
  border-left: 3px solid var(--color-info);
}

.mensaje.info .icono-mensaje {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}

.mensaje.acierto {
  background: rgba(76, 175, 80, 0.9);
  border-left: 3px solid #4CAF50;
}

.mensaje.acierto .icono-mensaje {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

.mensaje.peligro {
  background: rgba(244, 67, 54, 0.9);
  border-left: 3px solid var(--color-peligro);
}

.mensaje.peligro .icono-mensaje {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z'/%3E%3C/svg%3E");
}

.mensaje.tutorial {
  background: rgba(121, 134, 203, 0.9);
  border-left: 3px solid #7986cb;
}

.mensaje.tutorial .icono-mensaje {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1-8h-2V7h2v2z'/%3E%3C/svg%3E");
}

/* 
=======================
PANTALLA FINAL
======================= 
*/
#pantalla-final {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 30px;
  text-align: center;
  backdrop-filter: blur(8px);
}

.final-bg-effects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.3;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, white, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, white, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 60px 110px, white, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 600px 600px;
  animation: animarEstrellas 100s linear infinite;
}

#pantalla-final.exito .final-bg-effects {
  background: radial-gradient(ellipse at center, rgba(0, 230, 118, 0.4) 0%, transparent 70%);
}

#pantalla-final.derrota .final-bg-effects {
  background: radial-gradient(ellipse at center, rgba(183, 28, 28, 0.4) 0%, transparent 70%);
}

#titulo-final {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  text-shadow: 0 0 10px rgba(0, 230, 118, 0.5);
  animation: aparecer 1s ease-out;
}

.titulo-exito {
  color: var(--color-acento);
}

.titulo-derrota {
  color: var(--color-peligro);
}

#mensaje-final {
  max-width: 600px;
  margin-bottom: 2rem;
  line-height: 1.6;
  font-size: 1.2rem;
  animation: aparecer 1s ease-out 0.3s backwards;
}

.estadisticas-juego {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 2rem;
  max-width: 700px;
  animation: aparecer 1s ease-out 0.6s backwards;
}

.stat-item {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 15px;
  border-radius: var(--borde-redondeado);
  gap: 15px;
  flex: 1;
  min-width: 170px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-icono {
  width: 36px;
  height: 36px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.tiempo-icono {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2364FFDA' d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
}

.meteoritos-icono {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2364FFDA' d='M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z'/%3E%3C/svg%3E");
}

.quiz-icono {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2364FFDA' d='M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z'/%3E%3C/svg%3E");
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-titulo {
  font-size: 12px;
  color: #b0bec5;
}

.stat-valor {
  font-size: 20px;
  font-weight: bold;
}

#final-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  animation: aparecer 1s ease-out 0.9s backwards;
}

.btn-final {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 20px;
  border-radius: var(--borde-redondeado);
  font-weight: bold;
  cursor: pointer;
  transition: var(--transicion-media);
  font-family: inherit;
  min-width: 180px;
}

.btn-final:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.1);
}

.icono-btn-final {
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icono-video {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-6l-7 4V7z'/%3E%3C/svg%3E");
}

.icono-reiniciar {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
}

.icono-compartir {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E");
}

/* 
=======================
MODAL CORTOMETRAJE
======================= */
#modal-cortometraje {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#modal-cortometraje.visible {
  opacity: 1;
}

.modal-contenido {
  background: #000;
  border-radius: var(--borde-redondeado);
  overflow: hidden;
  max-width: 90%;
  max-height: 80%;
  display: flex;
  flex-direction: column;
  width: 800px;
  box-shadow: var(--sombra-fuerte);
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

#modal-cortometraje.visible .modal-contenido {
  transform: scale(1);
}

.modal-cabecera {
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-cabecera h3 {
  margin: 0;
  color: var(--color-acento);
}

.btn-cerrar-modal {
  background: transparent;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--transicion-rapida);
}

.btn-cerrar-modal:hover {
  background: rgba(255, 255, 255, 0.1);
}

.modal-cuerpo {
  padding: 0;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.modal-cuerpo iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* 
=======================
ANIMACIONES ADICIONALES
======================= */
@keyframes parpadeo {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

@keyframes animarEstrellas {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 600px 600px;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 
=======================
RESPONSIVE DESIGN
======================= */
@media (max-width: 1024px) {
  #nave-principal {
    grid-template-areas:
      "panel panel"
      "ventana ventana"
      "terminal terminal"
      "registro registro";
    grid-template-columns: 1fr;
    grid-template-rows: auto 300px auto auto;
  }

  #panel-control {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  #recursos {
    flex-direction: row;
    flex: 1;
    flex-wrap: wrap;
  }

  .recurso {
    flex: 1;
    min-width: 140px;
  }

  #acto-actual {
    margin: 0 15px;
    min-width: 150px;
  }

  #registro-eventos {
    max-height: 150px;
  }
  
  .contenedor-barra {
    width: 120px;
  }
}

@media (max-width: 768px) {
  #cosmos-experiencia {
    height: 700px;
  }
  
  #pantalla-inicio h1.titulo-principal {
    font-size: 2.5rem;
  }
  
  #panel-control {
    flex-direction: column;
    padding: 10px;
    gap: 10px;
  }

  #recursos {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .recurso {
    width: 100%;
  }
  
  .contenedor-barra {
    width: 100%;
  }

  .modal-contenido iframe {
    height: 100%;
  }
  
  .controles-info {
    flex-direction: column;
    gap: 10px;
  }
  
  .stat-item {
    min-width: 100%;
  }
  
  #final-buttons {
    flex-direction: column;
  }
  
  .btn-final {
    width: 100%;
  }
  
  #contenedor-mensajes {
    width: 250px;
  }
  
  .evento {
    font-size: 12px;
    padding: 8px 10px;
  }
  
  .tutorial-paso {
    padding: 20px;
  }
  
  .tutorial-imagen {
    width: 150px;
    height: 150px;
  }
  
  #ventana-observacion {
    height: 250px;
  }

  #propulsores-controles {
    transform: scale(0.9);
  }
}

@media (max-width: 480px) {
  #cosmos-experiencia {
    height: 650px;
  }
  
  #pantalla-inicio h1.titulo-principal {
    font-size: 2rem;
  }
  
  .subtitulo-inicio {
    font-size: 1.1rem;
  }
  
  .card-descripcion {
    padding: 15px;
  }
  
  #ventana-observacion {
    height: 200px;
  }
  
  #terminal-narrativa {
    padding: 10px;
  }
  
  #texto-narrativo {
    font-size: 14px;
    padding: 10px;
    height: 80px;
  }
  
  .stat-item {
    padding: 10px;
  }
  
  .stat-valor {
    font-size: 16px;
  }
  
  #mensaje-final {
    font-size: 1rem;
  }
  
  .controles-tutorial {
    width: 90%;
  }
  
  #propulsores-controles {
    transform: scale(0.8);
  }
}

/* Evitar conflictos con otros elementos de Elementor/WordPress */
.elementor-widget-container #cosmos-experiencia .modal,
.elementor-widget-container #cosmos-experiencia #act-select,
.elementor-widget-container #cosmos-experiencia #question-modal,
.elementor-widget-container #cosmos-experiencia #game-over,
.elementor-widget-container #cosmos-experiencia #act-transition {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: -999 !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-44bdba3 *//* CSS para el widget CSS de Elementor */
.dj-mixer {
  --primary-color: #ff3864;
  --secondary-color: #2de2e6;
  --deck1-color: #ff3864;
  --deck2-color: #2de2e6;
  --dark-bg: #0d1b2a;
  --darker-bg: #070c13;
  --light-text: #f0f0f0;
  
  font-family: 'Montserrat', Arial, sans-serif;
  max-width: 900px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--dark-bg), var(--darker-bg));
  color: var(--light-text);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  padding: 20px;
  user-select: none;
  transition: all 0.5s ease;
}

/* Contenedor de platos */
.turntables-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

/* Platos individuales */
.turntable {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Disco de vinilo */
.vinyl-disc {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #111;
  position: relative;
  margin-bottom: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.vinyl-disc:hover {
  transform: scale(1.05);
}

.vinyl-disc:active {
  transform: scale(0.98);
}

/* Surcos del vinilo */
.vinyl-grooves {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 25%,
    rgba(30, 30, 30, 0.4) 26%,
    rgba(30, 30, 30, 0.4) 27%,
    transparent 28%,
    transparent 30%,
    rgba(30, 30, 30, 0.4) 31%,
    rgba(30, 30, 30, 0.4) 32%,
    transparent 33%,
    transparent 35%,
    rgba(30, 30, 30, 0.4) 36%,
    rgba(30, 30, 30, 0.4) 37%,
    transparent 38%,
    transparent 40%,
    rgba(30, 30, 30, 0.4) 41%,
    rgba(30, 30, 30, 0.4) 42%,
    transparent 43%,
    transparent 45%,
    rgba(30, 30, 30, 0.4) 46%,
    rgba(30, 30, 30, 0.4) 47%,
    transparent 48%,
    transparent 50%,
    rgba(30, 30, 30, 0.4) 51%,
    rgba(30, 30, 30, 0.4) 52%,
    transparent 53%,
    transparent 55%,
    rgba(30, 30, 30, 0.4) 56%,
    rgba(30, 30, 30, 0.4) 57%,
    transparent 58%,
    transparent 60%,
    rgba(30, 30, 30, 0.4) 61%,
    rgba(30, 30, 30, 0.4) 62%,
    transparent 63%,
    transparent 65%,
    rgba(30, 30, 30, 0.4) 66%,
    rgba(30, 30, 30, 0.4) 67%,
    transparent 68%,
    transparent 70%,
    rgba(30, 30, 30, 0.4) 71%,
    rgba(30, 30, 30, 0.4) 72%,
    transparent 73%,
    transparent 75%,
    rgba(30, 30, 30, 0.4) 76%,
    rgba(30, 30, 30, 0.4) 77%,
    transparent 78%,
    transparent 80%,
    rgba(30, 30, 30, 0.4) 81%,
    rgba(30, 30, 30, 0.4) 82%,
    transparent 83%,
    transparent 85%,
    rgba(30, 30, 30, 0.4) 86%,
    rgba(30, 30, 30, 0.4) 87%,
    transparent 88%,
    transparent 90%,
    rgba(30, 30, 30, 0.4) 91%,
    rgba(30, 30, 30, 0.4) 92%,
    transparent 93%,
    transparent 95%,
    rgba(30, 30, 30, 0.4) 96%,
    rgba(30, 30, 30, 0.4) 97%,
    transparent 98%
  );
}

/* Centro del vinilo */
.vinyl-center {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #333;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Etiqueta del vinilo */
.vinyl-label {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 1px;
  text-align: center;
  z-index: 2;
}

/* Colores específicos para cada plato */
.left-deck .vinyl-label {
  background: linear-gradient(135deg, var(--deck1-color) 20%, #111 150%);
  color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.right-deck .vinyl-label {
  background: linear-gradient(135deg, var(--deck2-color) 20%, #111 150%);
  color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Animación de rotación */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.vinyl-disc.rotating {
  animation: rotate 1.8s linear infinite;
}

/* Animación de scratch */
@keyframes scratch {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  50% { transform: rotate(10deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.vinyl-disc.scratching {
  animation: scratch 0.5s ease-in-out;
}

/* Animación de reverse */
.vinyl-disc.rotating.reverse {
  animation-direction: reverse;
}

/* Nombres de pistas */
.track-names {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.track-option {
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.track-option:hover {
  background: rgba(255, 255, 255, 0.2);
}

.track-option.active {
  background: transparent;
  border-color: currentColor;
  font-weight: bold;
}

/* Colores específicos para cada deck */
.left-deck .track-option.active {
  color: var(--deck1-color);
  border-color: var(--deck1-color);
}

.right-deck .track-option.active {
  color: var(--deck2-color);
  border-color: var(--deck2-color);
}

/* Controles del mezclador */
.mixer-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  margin-bottom: 20px;
}

/* Crossfader */
.crossfader-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#crossfader {
  width: 80%;
  height: 30px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, var(--deck1-color), var(--deck2-color));
  border-radius: 15px;
  outline: none;
  opacity: 0.8;
  transition: opacity 0.2s;
  margin-bottom: 10px;
}

#crossfader:hover {
  opacity: 1;
}

#crossfader::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

#crossfader::-moz-range-thumb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.crossfader-labels {
  display: flex;
  justify-content: space-between;
  width: 80%;
  font-size: 14px;
  font-weight: bold;
}

.crossfader-labels span:first-child {
  color: var(--deck1-color);
}

.crossfader-labels span:last-child {
  color: var(--deck2-color);
}

/* Botón de reproducción */
.play-button-container {
  display: flex;
  justify-content: center;
}

.main-play-button {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  font-size: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.main-play-button:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.main-play-button:active {
  transform: scale(0.98);
}

.main-play-button.playing {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 56, 100, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(255, 56, 100, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 56, 100, 0); }
}

/* Botones de efectos */
.fx-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.fx-button {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  padding: 10px 20px;
  border-radius: 30px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  letter-spacing: 1px;
}

.fx-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.fx-button:active, .fx-button.active {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  transform: translateY(1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Visualizador */
.visualizer-container {
  width: 100%;
  height: 100px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

#waveform-viz {
  width: 100%;
  height: 100%;
  background: transparent;
}

/* Información de la pista */
.track-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  padding: 15px 20px;
  border-radius: 10px;
  margin-top: 15px;
}

#track-display {
  font-size: 16px;
  font-weight: bold;
  color: var(--light-text);
}

#time-display {
  font-family: 'Courier New', monospace;
  font-size: 18px;
  color: var(--secondary-color);
  text-shadow: 0 0 5px rgba(45, 226, 230, 0.5);
  min-width: 70px;
  text-align: center;
}

/* Añadir instrucciones iniciales */
.dj-mixer::after {
  content: "👆 Haz clic en Play para empezar";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  padding: 15px 25px;
  border-radius: 50px;
  color: white;
  font-weight: bold;
  pointer-events: none;
  opacity: 0.9;
  animation: pulse 2s infinite;
  z-index: 10;
  transition: opacity 0.5s ease;
}

.dj-mixer.playing::after {
  opacity: 0;
}

/* Efectos visuales */
.fx-warp {
  animation: warp 1.5s ease-in-out;
}

@keyframes warp {
  0% { filter: blur(0); }
  25% { filter: blur(3px); }
  75% { filter: blur(1px); }
  100% { filter: blur(0); }
}

.fx-filter {
  animation: filterEffect 2s ease-in-out;
}

@keyframes filterEffect {
  0% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.3) saturate(1.5) hue-rotate(30deg); }
  100% { filter: brightness(1) saturate(1); }
}

/* Responsive */
@media (max-width: 768px) {
  .turntables-container {
    flex-direction: column;
    align-items: center;
  }
  
  .turntable {
    width: 100%;
    margin-bottom: 30px;
  }
  
  .crossfader-container, .crossfader-labels {
    width: 100%;
  }
  
  .fx-buttons {
    flex-wrap: wrap;
  }
  
  .fx-button {
    flex: 1;
    min-width: 80px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0b944bc *//* Estilos CSS para el Widget CSS de Elementor */
/* Reset y variables */
:root {
  --primary: #ff00cc;
  --secondary: #3333ff;
  --accent: #00ff9d;
  --dark: #070707;
  --text: #ffffff;
  --glow: 0 0 15px rgba(255, 0, 204, 0.7);
}

/* Tipografía mejorada con fuentes web seguras */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');

body .interactive-container * {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', Arial, sans-serif;
}

/* Cursor personalizado */
.custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--primary);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, background 0.3s;
  z-index: 9999;
  mix-blend-mode: difference;
}

.custom-cursor.expanded {
  width: 50px;
  height: 50px;
  background: rgba(255, 0, 204, 0.2);
}

/* Partículas de fondo */
.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Contenedor principal con glassmorphism */
.interactive-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  position: relative;
  perspective: 1500px;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(7, 7, 7, 0.7);
  backdrop-filter: blur(10px);
  color: var(--text);
  overflow-x: hidden;
}

/* Efecto de neón animado para títulos */
.neon-title {
  font-size: 3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5px;
  margin-bottom: 30px;
  position: relative;
  text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 40px var(--primary);
  animation: neonPulse 2s infinite alternate;
  font-family: 'Montserrat', Arial, sans-serif;
}

@keyframes neonPulse {
  0% { opacity: 0.8; text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary); }
  100% { opacity: 1; text-shadow: 0 0 15px var(--primary), 0 0 25px var(--primary), 0 0 40px var(--primary); }
}

/* Contenedor del dado 3D mejorado */
.dice-container {
  width: 300px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  cursor: pointer;
  margin: 50px 0;
  animation: floatDice 6s infinite ease-in-out;
}

@keyframes floatDice {
  0%, 100% { transform: translateY(0) rotateX(10deg) rotateY(10deg); }
  50% { transform: translateY(-20px) rotateX(-10deg) rotateY(-10deg); }
}

/* Mejora de caras con efectos de cristal y borde neón */
.dice-face {
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(17, 17, 17, 0.4);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 15px rgba(255, 0, 204, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  overflow: hidden;
  transition: all 0.5s ease;
  border-radius: 10px;
}

.dice-face::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, 
    rgba(255, 0, 204, 0) 0%, 
    rgba(255, 0, 204, 0.1) 50%, 
    rgba(255, 0, 204, 0) 100%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.dice-face:hover::before {
  opacity: 1;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Posicionamiento de caras mejorado para un efecto 3D más dramático */
.face-front  { transform: translateZ(150px); }
.face-back   { transform: rotateY(180deg) translateZ(150px); }
.face-right  { transform: rotateY(90deg) translateZ(150px); }
.face-left   { transform: rotateY(-90deg) translateZ(150px); }
.face-top    { transform: rotateX(90deg) translateZ(150px); }
.face-bottom { transform: rotateX(-90deg) translateZ(150px); }

/* Estilo para videos y GIFs con efectos modernos */
.dice-face video,
.dice-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.7;
  transition: opacity 0.5s ease, transform 0.5s ease;
  filter: saturate(1.2) contrast(1.1);
}

.dice-face:hover video,
.dice-face:hover img {
  opacity: 1;
  transform: scale(1.05);
  filter: saturate(1.5) contrast(1.2);
}

/* Contenedor de corazón reinventado */
.heart-container {
  position: absolute;
  top: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.2em;
  z-index: 10;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border-radius: 50px;
  border: 1px solid rgba(255, 0, 204, 0.3);
  box-shadow: var(--glow);
}

.heart {
  font-size: 2em;
  transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  color: var(--primary);
  text-shadow: 0 0 10px var(--primary);
}

.heart.beat {
  transform: scale(1.5);
  animation: heartBeat 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes heartBeat {
  0% { transform: scale(1); }
  50% { transform: scale(1.8); }
  100% { transform: scale(1.5); }
}

/* Barra de poder mágico estilo futurista */
.power-container {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 200px;
  height: 15px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  border-radius: 50px;
  overflow: hidden;
  border: 1px solid rgba(255, 0, 204, 0.3);
  box-shadow: var(--glow);
  z-index: 10;
}

.power-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  position: relative;
  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.power-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.4) 50%, 
    transparent 100%);
  animation: powerFlow 2s linear infinite;
}

@keyframes powerFlow {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Texto de instrucciones con diseño moderno */
.instructions {
  text-align: center;
  max-width: 700px;
  margin: 30px 0;
  font-size: 1.2em;
  line-height: 1.6;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  padding: 20px 30px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: perspective(800px) rotateX(2deg);
  animation: instructionsPulse 4s infinite alternate;
}

@keyframes instructionsPulse {
  0% { box-shadow: 0 0 10px rgba(51, 51, 255, 0.2); }
  100% { box-shadow: 0 0 20px rgba(255, 0, 204, 0.3); }
}

/* Enlaces de navegación estilo neomorfismo */
.nav-links {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
  perspective: 800px;
}

.nav-links a {
  color: var(--text);
  text-decoration: none;
  background: rgba(34, 34, 34, 0.8);
  backdrop-filter: blur(5px);
  padding: 12px 24px;
  border-radius: 50px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  transform-style: preserve-3d;
  transform: perspective(800px) rotateX(0deg);
}

.nav-links a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
  z-index: -1;
}

.nav-links a:hover {
  background: rgba(68, 68, 68, 0.8);
  transform: perspective(800px) rotateX(10deg);
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.3), 0 10px 10px -10px var(--primary);
  border: 1px solid var(--primary);
}

.nav-links a:hover::before {
  left: 100%;
}

/* Malla de energía en el dado */
.energy-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(rgba(51, 51, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 51, 255, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.dice-face:hover .energy-grid {
  opacity: 1;
}

/* Efecto de cubo explosión */
@keyframes explodeCube {
  0% { transform: scale(1) rotate3d(0, 0, 0, 0deg); opacity: 1; }
  50% { transform: scale(1.5) rotate3d(1, 1, 1, 180deg); opacity: 0.5; }
  100% { transform: scale(1) rotate3d(0, 0, 0, 360deg); opacity: 1; }
}

/* Indicador de potencia mágica */
.power-indicator {
  position: absolute;
  top: 55px;
  right: 30px;
  font-size: 0.8em;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Montserrat', Arial, sans-serif;
}

/* Efecto de ondas sonoras */
.sound-waves {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  z-index: 1;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}

@keyframes soundWave {
  0% { transform: scale(0); opacity: 0.7; border-color: var(--primary); }
  100% { transform: scale(3); opacity: 0; border-color: var(--secondary); }
}

/* Logo flotante */
.floating-logo {
  position: absolute;
  bottom: 30px;
  left: 30px;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--text);
  text-shadow: 0 0 10px var(--primary);
  animation: floatLogo 3s infinite ease-in-out;
  font-family: 'Montserrat', Arial, sans-serif;
}

@keyframes floatLogo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Mensaje de descubrimiento */
.discovery-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  padding: 20px 30px;
  border-radius: 10px;
  border: 1px solid var(--primary);
  box-shadow: 0 0 20px var(--primary);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  max-width: 300px;
  text-align: center;
}

/* Efecto de distorsión digital */
.glitch-effect {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(45deg, 
    rgba(255, 0, 204, 0.1) 0%, 
    rgba(51, 51, 255, 0.1) 25%, 
    rgba(0, 255, 157, 0.1) 50%, 
    rgba(51, 51, 255, 0.1) 75%, 
    rgba(255, 0, 204, 0.1) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: overlay;
  animation: glitchAnimation 0.5s ease-out forwards;
}

@keyframes glitchAnimation {
  0% { opacity: 0; transform: translate(0); }
  10% { opacity: 0.8; transform: translate(-5px, 3px); }
  20% { opacity: 0.2; transform: translate(7px, -5px); }
  30% { opacity: 0.7; transform: translate(-7px, 5px); }
  40% { opacity: 0.1; transform: translate(5px, -3px); }
  50% { opacity: 0.9; transform: translate(-3px, 2px); }
  60% { opacity: 0.3; transform: translate(3px, -2px); }
  70% { opacity: 0.8; transform: translate(-2px, 3px); }
  80% { opacity: 0.2; transform: translate(2px, -5px); }
  90% { opacity: 0.7; transform: translate(-4px, 0); }
  100% { opacity: 0; transform: translate(0); }
}

/* Media queries para responsividad */
@media (max-width: 768px) {
  .dice-container {
    width: 250px;
    height: 250px;
  }
  
  .dice-face {
    width: 250px;
    height: 250px;
  }
  
  .face-front  { transform: translateZ(125px); }
  .face-back   { transform: rotateY(180deg) translateZ(125px); }
  .face-right  { transform: rotateY(90deg) translateZ(125px); }
  .face-left   { transform: rotateY(-90deg) translateZ(125px); }
  .face-top    { transform: rotateX(90deg) translateZ(125px); }
  .face-bottom { transform: rotateX(-90deg) translateZ(125px); }
  
  .heart-container, .power-container {
    position: fixed;
  }
  
  .neon-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .dice-container {
    width: 200px;
    height: 200px;
  }
  
  .dice-face {
    width: 200px;
    height: 200px;
  }
  
  .face-front  { transform: translateZ(100px); }
  .face-back   { transform: rotateY(180deg) translateZ(100px); }
  .face-right  { transform: rotateY(90deg) translateZ(100px); }
  .face-left   { transform: rotateY(-90deg) translateZ(100px); }
  .face-top    { transform: rotateX(90deg) translateZ(100px); }
  .face-bottom { transform: rotateX(-90deg) translateZ(100px); }
  
  .nav-links {
    gap: 10px;
  }
  
  .nav-links a {
    padding: 10px 15px;
    font-size: 0.8em;
  }
}/* End custom CSS */