@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500;700&family=Exo+2:wght@200;400;700;900&display=swap');

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     overflow: hidden;
     background: #000;
     font-family: 'Exo 2', sans-serif;
 }

 #scene-container {
     width: 100vw;
     height: 100vh;
     position: relative;
     transition: none;
 }

 /* Efecto TV ULTRA REALISTA */
 #scene-container.off {
     animation: tvShutdown 0.8s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
 }

 @keyframes tvShutdown {
     0% {
         transform: scale(1, 1);
         filter: brightness(1) contrast(1) saturate(1);
         opacity: 1;
     }

     10% {
         filter: brightness(1.8) contrast(1.3) saturate(1.2);
     }

     25% {
         transform: scale(1, 1);
         filter: brightness(2.5) contrast(2) saturate(0.5);
     }

     35% {
         transform: scale(1, 0.03);
         filter: brightness(3) contrast(3) saturate(0);
     }

     50% {
         transform: scale(0.8, 0.015);
         filter: brightness(2) contrast(2) saturate(0);
         opacity: 0.8;
     }

     60% {
         transform: scale(0.3, 0.004);
         filter: brightness(1) contrast(1) saturate(0);
         opacity: 0.4;
     }

     75% {
         transform: scale(0.1, 0.001);
         filter: brightness(0.5) contrast(0.5) saturate(0);
         opacity: 0.15;
     }

     85% {
         transform: scale(0.05, 0.0005);
         filter: brightness(0.2) contrast(0) saturate(0);
         opacity: 0.05;
     }

     100% {
         transform: scale(0, 0);
         filter: brightness(0) contrast(0) saturate(0);
         opacity: 0;
     }
 }

 /* Flash blanco al apagar */
 .tv-flash {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: white;
     pointer-events: none;
     z-index: 9999;
     opacity: 0;
 }

 .tv-flash.active {
     animation: flashEffect 0.8s ease-out forwards;
 }

 @keyframes flashEffect {
     0% {
         opacity: 0;
     }

     8% {
         opacity: 0.7;
     }

     15% {
         opacity: 0;
     }

     100% {
         opacity: 0;
     }
 }

 /* Líneas de escaneo TV */
 .scanlines {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: repeating-linear-gradient(0deg,
             rgba(0, 0, 0, 0.05) 0px,
             rgba(0, 0, 0, 0.05) 1px,
             transparent 1px,
             transparent 2px);
     pointer-events: none;
     z-index: 80;
     opacity: 0.3;
 }

 .content {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 100;
     text-align: center;
     pointer-events: auto;
 }


 .logo-wrapper {
     position: relative;
     margin-bottom: 50px;
     perspective: 1000px;
 }

 .logo-container {
     position: relative;
     animation: logoFloat 6s ease-in-out infinite;
     transform-style: preserve-3d;
 }

 .logo-container img {
     width: 200px;
     height: 200px;
     animation: logoSpin 20s linear infinite, logoPulse 3s ease-in-out infinite;
     filter: drop-shadow(0 0 30px rgba(0, 200, 255, 0.8)) drop-shadow(0 0 60px rgba(0, 200, 255, 0.5));
 }

 @keyframes logoFloat {

     0%,
     100% {
         transform: translateY(0px) rotateX(0deg);
     }

     25% {
         transform: translateY(-20px) rotateX(-10deg);
     }

     50% {
         transform: translateY(0px) rotateX(0deg);
     }

     75% {
         transform: translateY(-15px) rotateX(10deg);
     }
 }

 @keyframes logoSpin {
     from {
         transform: rotateZ(0deg);
     }

     to {
         transform: rotateZ(360deg);
     }
 }

 @keyframes logoPulse {

     0%,
     100% {
         transform: scale(1);
         filter: drop-shadow(0 0 30px rgba(0, 200, 255, 0.8));
     }

     50% {
         transform: scale(1.1);
         filter: drop-shadow(0 0 50px rgba(0, 255, 200, 1));
     }
 }

 .orbit-ring {
     position: absolute;
     top: 50%;
     left: 50%;
     border: 2px solid rgba(0, 200, 255, 0.3);
     border-radius: 50%;
     transform: translate(-50%, -50%);
 }

 .orbit-ring:nth-child(1) {
     width: 240px;
     height: 240px;
     animation: orbitRotate 8s linear infinite;
 }

 .orbit-ring:nth-child(2) {
     width: 280px;
     height: 280px;
     animation: orbitRotate 12s linear infinite reverse;
     border-color: rgba(0, 255, 200, 0.3);
 }

 .orbit-ring:nth-child(3) {
     width: 320px;
     height: 320px;
     animation: orbitRotate 16s linear infinite;
     border-color: rgba(100, 200, 255, 0.3);
 }

 @keyframes orbitRotate {
     from {
         transform: translate(-50%, -50%) rotate(0deg);
     }

     to {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }

 .title {
     font-family: 'Exo 2', sans-serif;
     font-size: 100px;
     font-weight: 900;
     color: #00d4ff;
     text-transform: uppercase;
     letter-spacing: 20px;
     margin-bottom: 20px;
     position: relative;
     animation: titleGlitch 5s ease-in-out infinite;
 }

 .title::before,
 .title::after {
     content: 'JEFAZZ0 LAB';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0.8;
 }

 .title::before {
     color: #00ffaa;
     animation: glitchTop 3s infinite;
     clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
     text-shadow: 2px 0 #00ffaa;
 }

 .title::after {
     color: #ff00aa;
     animation: glitchBottom 4s infinite;
     clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
     text-shadow: -2px 0 #ff00aa;
 }

 @keyframes glitchTop {

     0%,
     90%,
     100% {
         transform: translate(0);
     }

     92% {
         transform: translate(-3px, -2px);
     }

     94% {
         transform: translate(2px, 1px);
     }
 }

 @keyframes glitchBottom {

     0%,
     85%,
     100% {
         transform: translate(0);
     }

     87% {
         transform: translate(3px, 2px);
     }

     89% {
         transform: translate(-2px, -1px);
     }
 }

 @keyframes titleGlitch {

     0%,
     95%,
     100% {
         text-shadow:
             0 0 20px rgba(0, 212, 255, 0.8),
             0 0 40px rgba(0, 212, 255, 0.6);
     }

     96% {
         text-shadow:
             0 0 30px rgba(0, 255, 170, 1),
             3px 0 20px rgba(255, 0, 170, 0.8);
     }
 }

 .subtitle {
     font-family: 'Rajdhani', sans-serif;
     font-size: 32px;
     font-weight: 300;
     color: rgba(0, 212, 255, 0.9);
     letter-spacing: 12px;
     text-transform: uppercase;
     margin-top: 10px;
     animation: subtitleFade 4s ease-in-out infinite;
 }

 @keyframes subtitleFade {

     0%,
     100% {
         opacity: 0.7;
     }

     50% {
         opacity: 1;
     }
 }

 .cta-button {
     margin-top: 60px;
     padding: 18px 50px;
     font-size: 22px;
     font-weight: 700;
     font-family: 'Exo 2', sans-serif;
     color: #000;
     background: linear-gradient(135deg, #00d4ff, #00ffaa);
     border: none;
     border-radius: 50px;
     cursor: pointer;
     text-transform: uppercase;
     letter-spacing: 4px;
     box-shadow:
         0 10px 40px rgba(0, 212, 255, 0.4),
         0 0 20px rgba(0, 255, 170, 0.3);
     transition: all 0.3s ease;
     pointer-events: all;
     position: relative;
     overflow: hidden;
 }

 .cta-button:hover {
     transform: translateY(-5px);
     box-shadow:
         0 15px 50px rgba(0, 212, 255, 0.6),
         0 0 30px rgba(0, 255, 170, 0.5);
 }

 #loading {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: #00d4ff;
     font-size: 28px;
     font-weight: 700;
     z-index: 1000;
     text-shadow: 0 0 30px #00d4ff;
     letter-spacing: 5px;
 }

 /* Robot personalizado */
 #custom-robot {
     width: 300px;
     height: 350px;
     position: relative;
     animation: robotFloat 3s ease-in-out infinite;
 }

 @keyframes robotFloat {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-15px);
     }
 }

 /* Cabeza del robot */
 .robot-head {
     width: 120px;
     height: 100px;
     background: linear-gradient(135deg, #2c2e5e 0%, #1a1c3e 100%);
     border-radius: 20px;
     position: absolute;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
     box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4);
     border: 3px solid #00d4ff;
 }

 /* Antena */
 .robot-antenna {
     width: 4px;
     height: 30px;
     background: #00d4ff;
     position: absolute;
     top: -30px;
     left: 50%;
     transform: translateX(-50%);
     animation: antennaBlink 2s ease-in-out infinite;
 }

 .robot-antenna::after {
     content: '';
     width: 12px;
     height: 12px;
     background: #00ffaa;
     border-radius: 50%;
     position: absolute;
     top: -6px;
     left: 50%;
     transform: translateX(-50%);
     box-shadow: 0 0 20px #00ffaa;
     animation: antennaPulse 1.5s ease-in-out infinite;
 }

 @keyframes antennaBlink {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.5;
     }
 }

 @keyframes antennaPulse {

     0%,
     100% {
         transform: translateX(-50%) scale(1);
     }

     50% {
         transform: translateX(-50%) scale(1.3);
     }
 }

 /* Ojos */
 .robot-eye {
     width: 30px;
     height: 30px;
     background: #00d4ff;
     border-radius: 50%;
     position: absolute;
     top: 30px;
     box-shadow: 0 0 20px #00d4ff, inset 0 0 10px rgba(0, 0, 0, 0.5);
     animation: eyeGlow 2s ease-in-out infinite;
 }

 .robot-eye.left {
     left: 20px;
 }

 .robot-eye.right {
     right: 20px;
 }

 .robot-eye::after {
     content: '';
     width: 10px;
     height: 10px;
     background: #fff;
     border-radius: 50%;
     position: absolute;
     top: 8px;
     left: 8px;
     animation: eyeMove 4s ease-in-out infinite;
 }

 @keyframes eyeGlow {

     0%,
     100% {
         box-shadow: 0 0 20px #00d4ff, inset 0 0 10px rgba(0, 0, 0, 0.5);
     }

     50% {
         box-shadow: 0 0 30px #00ffaa, inset 0 0 10px rgba(0, 0, 0, 0.5);
     }
 }

 @keyframes eyeMove {

     0%,
     100% {
         left: 8px;
     }

     25% {
         left: 12px;
     }

     75% {
         left: 4px;
     }
 }

 /* Boca */
 .robot-mouth {
     width: 50px;
     height: 8px;
     background: #00ffaa;
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     border-radius: 4px;
     box-shadow: 0 0 15px #00ffaa;
     animation: mouthTalk 0.5s ease-in-out infinite;
 }

 @keyframes mouthTalk {

     0%,
     100% {
         height: 8px;
     }

     50% {
         height: 4px;
     }
 }

 /* Cuerpo */
 .robot-body {
     width: 140px;
     height: 120px;
     background: linear-gradient(135deg, #2c2e5e 0%, #1a1c3e 100%);
     border-radius: 15px;
     position: absolute;
     top: 130px;
     left: 50%;
     transform: translateX(-50%);
     box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
     border: 3px solid #00d4ff;
 }

 /* Panel de control */
 .robot-panel {
     width: 80px;
     height: 60px;
     background: rgba(0, 212, 255, 0.1);
     border-radius: 10px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     border: 2px solid #00d4ff;
     display: flex;
     flex-wrap: wrap;
     padding: 5px;
     gap: 5px;
 }

 .robot-button {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     animation: buttonBlink 1s ease-in-out infinite;
 }

 .robot-button:nth-child(1) {
     background: #00d4ff;
     box-shadow: 0 0 10px #00d4ff;
 }

 .robot-button:nth-child(2) {
     background: #00ffaa;
     box-shadow: 0 0 10px #00ffaa;
     animation-delay: 0.3s;
 }

 .robot-button:nth-child(3) {
     background: #ff00aa;
     box-shadow: 0 0 10px #ff00aa;
     animation-delay: 0.6s;
 }

 @keyframes buttonBlink {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.3;
     }
 }

 /* Brazos */
 .robot-arm {
     width: 15px;
     height: 80px;
     background: linear-gradient(180deg, #2c2e5e 0%, #1a1c3e 100%);
     border-radius: 8px;
     position: absolute;
     top: 140px;
     border: 2px solid #00d4ff;
     transform-origin: top center;
 }

 .robot-arm.left {
     left: 22%;
     animation: armWaveLeft 3s ease-in-out infinite;
 }

 .robot-arm.right {
     right: 22%;
     animation: armWaveRight 3s ease-in-out infinite;
 }

 @keyframes armWaveLeft {

     0%,
     100% {
         transform: rotate(-20deg);
     }

     50% {
         transform: rotate(-40deg);
     }
 }

 @keyframes armWaveRight {

     0%,
     100% {
         transform: rotate(20deg);
     }

     50% {
         transform: rotate(40deg);
     }
 }

 /* Manos */
 .robot-hand {
     width: 20px;
     height: 20px;
     background: #00d4ff;
     border-radius: 50%;
     position: absolute;
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
     box-shadow: 0 0 15px #00d4ff;
 }

 /* Piernas */
 .robot-leg {
     width: 20px;
     height: 60px;
     background: linear-gradient(180deg, #2c2e5e 0%, #1a1c3e 100%);
     border-radius: 10px;
     position: absolute;
     top: 250px;
     border: 2px solid #00d4ff;
 }

 .robot-leg.left {
     left: 100px;
 }

 .robot-leg.right {
     right: 100px;
 }

 /* Pies */
 .robot-foot {
     width: 30px;
     height: 15px;
     background: #00ffaa;
     border-radius: 8px;
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     box-shadow: 0 0 15px #00ffaa;
 }

 /* Recuadro de diálogo */
 .dialog-box {
     position: absolute;
     bottom: -100px;
     left: 50%;
     transform: translateX(-50%);
     width: 400px;
     min-height: 80px;
     background: linear-gradient(135deg, rgba(44, 46, 94, 0.95) 0%, rgba(26, 28, 62, 0.95) 100%);
     border: 3px solid #00d4ff;
     border-radius: 20px;
     padding: 20px 25px;
     box-shadow: 0 10px 40px rgba(0, 212, 255, 0.5);
     animation: dialogAppear 0.5s ease-out;
 }

 @keyframes dialogAppear {
     from {
         opacity: 0;
         transform: translateX(-50%) translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateX(-50%) translateY(0);
     }
 }

 .dialog-box::before {
     content: '';
     position: absolute;
     top: -20px;
     left: 50%;
     transform: translateX(-50%);
     width: 0;
     height: 0;
     border-left: 15px solid transparent;
     border-right: 15px solid transparent;
     border-bottom: 20px solid #00d4ff;
 }

 .dialog-text {
     color: #00d4ff;
     font-size: 1.3rem;
     font-family: 'Exo 2', sans-serif;
     font-weight: 400;
     text-align: center;
     line-height: 1.6;
     animation: textGlow 2s ease-in-out infinite;
 }

 @keyframes textGlow {

     0%,
     100% {
         text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
     }

     50% {
         text-shadow: 0 0 20px rgba(0, 255, 170, 0.8);
     }
 }

 /* Indicador de escritura */
 .typing-indicator {
     display: inline-block;
     animation: blink 1s ease-in-out infinite;
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0;
     }
 }