/* ==========================================
   PALETA OCHENTERA Y CONFIGURACIÓN BÁSICA
   ========================================== */
:root {
    --bg-color: #1a1a24;
    --text-color: #ffffff;
    --neon-pink: #ff007f;
    --neon-cyan: #00f0ff;
    --neon-yellow: #ffee00;
    --panel-bg: #252538;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Courier New', Courier, Georgia, serif;
    font-size: 1.15rem;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    text-align: center; /* Centra por defecto todo el texto de la página */
}

/* ==========================================
   JERARQUÍAS TIPOGRÁFICAS 
   ========================================== */
h1, h2, h3 {
    font-family: Georgia, 'Times New Roman', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0;
    text-align: center;
}
/* Título Principal estilo Pantalla de Inicio Arcade */
h1 {
    font-size: 2.8rem; /* Tamaño óptimo para mantener impacto */
    font-family: 'Courier New', monospace; /* Forzamos tipografía pixelada/monospace rígida */
    font-weight: 900;
    color: var(--neon-cyan); 
    text-shadow: 3px 3px 0px var(--neon-pink);
    letter-spacing: 4px;
    margin-bottom: 2px;
    text-align: center;
}

/* Subtítulo "1 PLAYER" en modo Arcade Retro Pixelado */
.arcade-player {
    font-family: 'Courier New', monospace;
    font-size: 1.3rem;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 3px;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    
    /* Animación de parpadeo clásico (Blink) de las máquinas arcade */
    animation: parpadeoArcade 1.2s infinite steps(2);
}

/* Definición del parpadeo estricto estilo fichero antiguo */
@keyframes parpadeoArcade {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/* EL NOMBRE DEL ESTUDIANTE (Jerarquía Máxima Absoluta) */
header p strong {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 3.8rem; /* Tamaño gigante y dominante */
    color: var(--neon-yellow); /* Amarillo neón ultra brillante */
    text-shadow: 4px 4px 0px var(--neon-pink); /* Sombra fucsia rígida */
    display: inline-block;
    text-align: center;
    margin: 10px auto 25px auto;
    line-height: 1.1;
    border-bottom: 6px double var(--neon-cyan); /* Subrayado doble cian */
    padding-bottom: 15px;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* Subtítulos de las Secciones (Jerarquía Media) */
h2 {
    font-size: 2.2rem;
    color: var(--neon-pink);
    text-shadow: 2px 2px 0px var(--neon-cyan);
    border-bottom: 2px solid var(--neon-cyan);
    padding-bottom: 5px;
    margin-bottom: 25px;
    display: inline-block;
}

/* Títulos de Menús e Internos (Jerarquía Baja) */
h3 {
    font-size: 1.4rem;
    color: var(--neon-yellow);
    text-shadow: none;
    margin-bottom: 15px;
}

/* Datos clave destacados dentro de párrafos */
p strong {
    font-size: 1.25rem;
    color: var(--neon-cyan);
    font-family: Georgia, serif;
    letter-spacing: 0.5px;
}

/* ==========================================
   DISEÑO DE CONTENEDORES Y BLOQUES CENTRADOS
   ========================================== */
header, section, footer {
    background-color: var(--panel-bg);
    border: 3px solid var(--neon-pink);
    padding: 30px;
    margin: 0 auto 35px auto; /* Centra los bloques en la pantalla */
    max-width: 800px; /* Ancho máximo para evitar que se estiren de más */
    box-shadow: 8px 8px 0px var(--neon-cyan);
    box-sizing: border-box;
}

/* Imagen de perfil centrada con marco */
figure {
    margin: 30px auto;
    text-align: center;
}

figure img {
    border: 5px solid var(--neon-yellow);
    box-shadow: 10px 10px 0px var(--neon-pink);
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Menús de Navegación */
nav {
    margin: 25px auto 0 auto;
    padding: 15px;
    border: 2px dashed var(--neon-cyan);
    max-width: 500px; 
}

/* Listas centradas sin viñetas arruinando la simetría */
ul {
    list-style-type: none; 
    padding: 0;
    margin: 0 auto;
}

li {
    margin-bottom: 10px;
    font-size: 1.1rem;
    text-align: center;
}

/* Elemento interactivo <details> y <summary> */
details {
    display: block;
    margin: 20px auto 0 auto;
}

summary {
    cursor: pointer;
    color: var(--neon-yellow);
    font-weight: bold;
    font-size: 1.2rem;
    padding: 8px 15px;
    border: 2px solid var(--neon-yellow);
    display: inline-block;
    margin: 0 auto 15px auto;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
}

summary:hover {
    background-color: var(--neon-pink);
    color: #fff;
    border-color: var(--neon-pink);
}

/* Pie de página legal */
footer {
    border-color: #555;
    box-shadow: 5px 5px 0px #333;
    background-color: #111118;
}

footer p small {
    font-size: 0.9rem;
    color: #8a8a9e;
    line-height: 1.5;
    display: block;
}

/* ==========================================
   ANIMACIONES DE ENLACES (EFECTOS HOVER)
   ========================================== */

/* 1. Enlaces Generales del Proyecto (Efecto Botón Arcade) */
/* --- INCLINACIÓN ASIMÉTRICA PARA LOS ÍTEMS DE PROYECTO --- */

/* 1. Definimos la base: los enlaces del menú Proyecto se comportan como bloques individuales */
nav[aria-label="Navegación del Proyecto"] ul li a {
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Transición con un leve efecto rebote ochentero */
}

/* 2. Al pasar el cursor, forzamos que se aplique el fondo y la sombra rígida */
nav[aria-label="Navegación del Proyecto"] ul li a:hover {
    background-color: var(--neon-yellow);
    color: #000;
    box-shadow: 4px 4px 0px var(--neon-pink);
}

/* 3. Asignamos un ángulo de rotación único e inclinado a cada ítem por separado */

/* Primer ítem: Plan (Inclinación leve a la izquierda) */
nav[aria-label="Navegación del Proyecto"] ul li:nth-child(1) a:hover {
    transform: scale(1.1) rotate(-3deg) translateY(-2px);
}

/* Segundo ítem: Mapa (Inclinación más pronunciada a la derecha) */
nav[aria-label="Navegación del Proyecto"] ul li:nth-child(2) a:hover {
    transform: scale(1.1) rotate(4deg) translateY(-2px);
}

/* Tercer ítem: App (Inclinación a la izquierda) */
nav[aria-label="Navegación del Proyecto"] ul li:nth-child(3) a:hover {
    transform: scale(1.1) rotate(-2deg) translateY(-2px);
}

/* Cuarto ítem: Grupo (Inclinación fuerte a la derecha) */
nav[aria-label="Navegación del Proyecto"] ul li:nth-child(4) a:hover {
    transform: scale(1.1) rotate(5deg) translateY(-2px);
}

/* Quinto ítem: Cátedra (Inclinación leve a la derecha) */
nav[aria-label="Navegación del Proyecto"] ul li:nth-child(5) a:hover {
    transform: scale(1.1) rotate(2deg) translateY(-2px);
}
a {
    color: var(--neon-cyan);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    display: inline-block;
    padding: 2px 8px;
    transition: all 0.2s ease-in-out;
}

a:hover {
    background-color: var(--neon-yellow);
    color: #000;
    text-shadow: none;
    transform: translateY(-3px);
    box-shadow: 0px 4px 0px var(--neon-pink);
}

/* 2. Enlaces de Integrantes (Efecto Resplandor de Luz de Neón) */
nav[aria-label="Navegación del Equipo"] ul li a {
    color: var(--neon-cyan);
    font-family: Georgia, serif;
    transition: all 0.3s ease-in-out;
}

nav[aria-label="Navegación del Equipo"] ul li a:hover {
    background-color: transparent; /* Sin fondo amarillo para apreciar el brillo */
    color: var(--neon-pink); /* Cambia a fucsia */
    transform: scale(1.15) translateY(-2px); /* Se agranda y sube un poco */
    box-shadow: none; 
    
    /* Estela de luz neón (Glow) */
    text-shadow: 0 0 5px var(--neon-pink), 
                 0 0 10px var(--neon-pink), 
                 0 0 20px var(--neon-pink);
}
/* --- ESTILO RETRO EXCLUSIVO PARA LAS MATERIAS (APROBADAS Y EN CURSO) --- */

/* Selecciona los elementos de lista únicamente dentro de la Foja Académica */
#foja-academica details ul li {
    font-size: 1.1rem;
    margin-bottom: 12px;
    text-align: center;
    position: relative;
    display: block; 
}

/* Añade el marcador cuadrado retro antes de cada materia */
#foja-academica details ul li::before {
    content: "■"; /* Símbolo de bloque de pixel clásico */
    color: var(--neon-cyan); /* Color cian brillante por defecto */
    font-size: 0.9rem;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    
    /* Animación sutil de parpadeo estilo cursor antiguo */
    animation: parpadeoPixel 1.5s infinite steps(2);
}

/* Cambia el color del cuadradito a fucsia exclusivamente para el segundo desplegable (Materias en Curso) */
#foja-academica details:last-of-type ul li::before {
    color: var(--neon-pink); 
}

/* Definición de la animación de parpadeo */
@keyframes parpadeoPixel {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}
/* ==========================================
   INCLINACIÓN ASIMÉTRICA EN DATOS DEL TP
   ========================================== */

/* Definimos la base para los nombres en el párrafo */
.integrante-tp {
    display: inline-block; /* Permite que se aplique la rotación y el movimiento */
    color: var(--neon-cyan);
    padding: 1px 6px;
    cursor: default;
    font-family: 'Courier New', Courier, serif;
    font-weight: bold;
    font-size: 1.15rem;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote ochentero */
}

/* Efecto común al pasar el cursor: aparece la caja amarilla y la sombra fucsia */
.integrante-tp:hover {
    background-color: var(--neon-yellow);
    color: #000;
    box-shadow: 4px 4px 0px var(--neon-pink);
}

/* Ángulos de inclinación personalizados para cada uno de los 4 integrantes */

/* Sofia Quintana (Inclinación a la izquierda) */
.integrante-tp:nth-of-type(1):hover {
    transform: scale(1.1) rotate(-4deg) translateY(-2px);
}

/* Joan Rojas (Inclinación pronunciada a la derecha) */
.integrante-tp:nth-of-type(2):hover {
    transform: scale(1.1) rotate(5deg) translateY(-2px);
}

/* Maximo Rolon (Inclinación leve a la izquierda) */
.integrante-tp:nth-of-type(3):hover {
    transform: scale(1.1) rotate(-2deg) translateY(-2px);
}

/* Merlin Tinetti (Inclinación fuerte a la derecha) */
.integrante-tp:nth-of-type(4):hover {
    transform: scale(1.1) rotate(6deg) translateY(-2px);
}
/* ==========================================
   ESTILO EXCLUSIVO Y PROLIJO PARA LA CÁTEDRA
   ========================================== */

.bloque-catedra {
    text-align: center; /* Asegura el centrado estricto de toda la línea */
    margin: 25px auto;
    padding: 15px;
    background-color: #1a1a24; /* Un fondo ligeramente más oscuro para aislar la info */
    border-top: 2px dashed var(--neon-cyan);  /* Líneas divisorias sutiles estilo comando */
    border-bottom: 2px dashed var(--neon-cyan);
    max-width: 90%; /* Evita que el texto toque los bordes del panel principal */
}

.bloque-catedra p {
    font-size: 1.1rem;
    line-height: 1.8; /* Mayor espacio entre líneas para que los nombres respiren y se lean bien */
    margin: 0;
    color: #e0e0e0; /* Un color ligeramente más suave para equilibrar el bloque */
}

/* Resalta las etiquetas internas (Cátedra, Titular, Adjunto, JTP) dentro de este bloque */
.bloque-catedra p strong {
    color: var(--neon-yellow); /* Color amarillo neón para identificar rápido los roles */
    font-size: 1.15rem;
}
/* ==========================================================================
   MÓDULO ADICIONAL: PROTOTIPO DE APLICACIÓN RESPONSIVA MÓVIL (APP VN05)
   ========================================================================== */

/* Fondo específico para la página del simulador */
.vn05-body-app {
    background-color: #1a1a2e !important;
}

/* Encabezado del sitio web adaptado al flujo */
.vn05-site-header {
    text-align: center;
    padding: 20px;
    border-bottom: 2px dashed #3498db;
    margin-bottom: 20px;
}

/* Contenedor que centra el dispositivo en pantallas grandes */
.vn05-app-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Estructura física que emula un Smartphone moderno (Dimensiones estándar) */
.vn05-phone-wrapper {
    width: 100%;
    max-width: 375px;
    height: 760px;
    background: #ffffff;
    border-radius: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 12px solid #2c3e50;
    position: relative;
}

/* Header superior interno de la App móvil */
.vn05-app-header {
    background-color: #2c3e50;
    color: #ffffff;
    padding: 16px 14px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.vn05-logo {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.vn05-logo span {
    font-weight: 400;
    font-size: 11px;
    display: block;
    color: #3498db;
    margin-top: 2px;
}

.vn05-btn-emergency {
    background-color: #e74c3c;
    color: #ffffff;
    border: none;
    padding: 10px 15px;
    border-radius: 25px;
    font-weight: bold;
    width: 100%;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(231, 76, 60, 0.4);
    transition: transform 0.2s, background-color 0.2s;
}

.vn05-btn-emergency:hover {
    background-color: #c0392b;
    transform: scale(1.02);
}

/* Scroll interno independiente para simular interacción táctil */
.vn05-app-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background-color: #f8fafc;
    color: #2c3e50;
    scroll-behavior: smooth;
}

/* Estilo de los bloques de secciones móviles */
.vn05-section {
    margin-bottom: 24px;
}

.vn05-section h3 {
    font-size: 13px;
    color: #7f8c8d;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    border-bottom: 2px solid #edf2f7;
    padding-bottom: 6px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Tarjetas de Agenda y Vencimientos */
.vn05-card-reminder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 8px;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.vn05-card-reminder p { margin: 0; font-weight: 500; }
.vn05-card-reminder.alert { background-color: #fde8e8; color: #9b1c1c; border-left: 5px solid #e74c3c; }
.vn05-card-reminder.warning { background-color: #fef3c7; color: #92400e; border-left: 5px solid #f39c12; }
.vn05-card-reminder.success { background-color: #def7ec; color: #03543f; border-left: 5px solid #2ecc71; }
.vn05-card-reminder.info { background-color: #e1effe; color: #1e429f; border-left: 5px solid #3498db; }

.vn05-badge {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.06);
    padding: 3px 8px;
    border-radius: 6px;
}

/* Módulo específico de Carpooling */
.vn05-carpool-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    font-size: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.vn05-carpool-card p { margin: 0 0 8px 0; }

.vn05-route-badge {
    display: inline-block;
    background: #e0f2fe;
    color: #0369a1;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 11px;
}

.vn05-btn-action {
    width: 100%;
    background-color: #3498db;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 11px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.vn05-btn-action:hover {
    background-color: #2980b9;
}

/* Grilla interactiva de Problemas Comunes */
.vn05-grid-problems {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.vn05-card-problem {
    background: #ffffff;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    font-size: 11px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: transform 0.2s, border-color 0.2s;
}

.vn05-card-problem:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
}

.vn05-card-problem h4 {
    margin: 0 0 6px 0;
    color: #1e293b;
    font-size: 12px;
    font-weight: 700;
}

.vn05-card-problem p { margin: 0; color: #64748b; line-height: 1.4; }

/* Simulación interactiva del Mapa */
.vn05-mock-map {
    background-color: #f1f5f9;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 22px 14px;
    text-align: center;
    font-size: 12px;
    color: #64748b;
}

.vn05-map-pin {
    font-size: 24px;
    margin-bottom: 6px;
    animation: vn05-bounce 2s infinite ease-in-out;
}

.vn05-map-indicator {
    font-size: 10px;
    display: block;
    margin-top: 6px;
    color: #0284c7;
    font-weight: 600;
}

/* Caja de Tips Express y Botones de Soporte */
.vn05-tips-box {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 12px;
    font-size: 12px;
    color: #166534;
    margin-bottom: 10px;
    line-height: 1.5;
}

.vn05-tips-box p { margin: 0; }

.vn05-support-actions {
    display: flex;
    gap: 10px;
}

.vn05-btn-secondary {
    flex: 1;
    background: #475569;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.vn05-btn-secondary:hover {
    background-color: #334155;
}

/* Footer con exclusiones (Fuera de Alcance del Brief) */
.vn05-app-footer {
    background: #f1f5f9;
    padding: 12px;
    text-align: center;
    font-size: 9px;
    color: #94a3b8;
    border-top: 1px solid #e2e8f0;
    line-height: 1.4;
}

/* Animaciones funcionales */
@keyframes vn05-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
/* ==========================================================================
   SOLUCIÓN: START GAME CELESTE CON SOMBRA 3D UNIFICADA EN ROSA
   ========================================================================== */

header h1 {
    font-family: 'Press Start 2P', monospace !important;
    text-transform: uppercase;
    font-size: 2.5rem;              
    color: #00E5FF;               /* CAMBIADO A CELESTE ARCADE */
    letter-spacing: -4px;         /* Letras más juntas */
    line-height: 1.1;             
    margin: 40px 0 10px 0;        
    text-align: center;
    display: block;
    
    /* CALIBRADO: Espacio justo y cerrado entre START y GAME */
    word-spacing: 15px !important; 

    /* Engrosa el pixel celeste frontal */
    -webkit-text-stroke: 1px #00E5FF;

    /* 1. PERSPECTIVA KINEMÁTICA HACIA ADELANTE */
    transform: perspective(250px) rotateX(-32deg);          
    transform-origin: top center; 

    /* 2. EXTRUSIÓN CONTINUA EN DIAGONAL HACIA ABAJO A LA IZQUIERDA */
    text-shadow: 
        -1px 1.5px 0px #E91E63,    /* Capa Rosa */
        -2px 3px 0px #E91E63,   
        -3px 4.5px 0px #E91E63,   
        -4px 6px 0px #E91E63,   
        -5px 7.5px 0px #E91E63,   
        -6px 9px 0px #E91E63,   
        -7px 11px 0px #E91E63,    
        -9px 14px 10px rgba(0, 0, 0, 0.9); 
}

/* Forzar la eliminación de capas fantasma anteriores */
header h1::before, 
header h1::after {
    content: none !important;
    display: none !important;
}

/* 3. CONFIGURACIÓN DE 1 PLAYER EN BLANCO Y COMPACTO */
.arcade-player {
    font-family: 'Press Start 2P', monospace !important;
    text-transform: uppercase;
    font-size: 1.6rem;            
    color: #ffffff;               
    letter-spacing: 2px;          
    text-align: center;
    
    /* CONTROL DE DISTANCIA: Se mantiene pegado arriba */
    margin: -15px 0 40px 0;       
    display: block;

    /* Sombra de apoyo limpia para resaltar los pixeles blancos */
    text-shadow: 2px 2px 0px #000000;
}

.equipo-tp {
    font-family: 'Press Start 2P', monospace !important;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: #FFEB3B;
}
/* ==========================================================================
   MAXIMO ROLON: TAMAÑO RECALIBRADO PARA LA PERSPECTIVA INVERSA
   ========================================================================== */
header p strong {
    font-family: 'Press Start 2P', monospace !important;
    text-transform: uppercase;
    color: #FFEB3B !important;    /* Mantiene tu color amarillo original */
    
    /* ENGRANDECENTE ABSOLUTO: Forzamos el tamaño masivo de la captura anterior */
    font-size: 5.2rem !important;  
    letter-spacing: -4px !important; /* Une las letras de forma compacta en tamaño grande */
    
    line-height: 1.2;
    margin: 45px 0 !important;
    text-align: center;
    display: block;

    /* 1. PERSPECTIVA INVERSA: Se abre hacia arriba de forma estable */
    transform: 
        perspective(350px)         
        rotateX(22deg) !important; /* Ángulo positivo para inclinar al revés */
    
    transform-origin: bottom center; 

    /* 2. SOMBREADO ROSA UNIFICADO EN LA DIRECCIÓN DE LA FUGA (HACIA ARRIBA) */
    text-shadow: 
        0px -1.5px 0px #E91E63,    /* Capas compactas proyectadas hacia arriba */
        0.5px -3px 0px #E91E63,   
        1px -4.5px 0px #E91E63,   
        1.5px -6px 0px #E91E63,   
        2px -7.5px 0px #E91E63,   
        2.5px -9px 0px #E91E63,   
        3px -11px 0px #E91E63,    
        4px -14px 10px rgba(0, 0, 0, 0.9) !important; 
}
header h1 {
    font-family: 'Press Start 2P', monospace !important;
    text-transform: uppercase;
    font-size: 5rem;              
    color: #00E5FF;               
    letter-spacing: -4px;         
    line-height: 1.1;             
    margin: 40px 0 10px 0;        
    text-align: center;
    display: block;
    
    /* CAMBIADO A 15PX: Espacio más cerrado entre START y GAME */
    word-spacing: 15px !important; 

    -webkit-text-stroke: 1px #00E5FF;

    /* PERSPECTIVA HACIA ADELANTE */
    transform: perspective(250px) rotateX(-32deg);          
    transform-origin: top center; 

    /* SOMBRA COMPACTA UNIFICADA EN ROSA */
    text-shadow: 
        0px 1.5px 0px #E91E63,    
        -0.5px 3px 0px #E91E63,   
        -1px 4.5px 0px #E91E63,   
        -1.5px 6px 0px #E91E63,   
        -2px 7.5px 0px #E91E63,   
        -2.5px 9px 0px #E91E63,   
        -3px 11px 0px #E91E63,    
        -4px 14px 10px rgba(0, 0, 0, 0.9); 
}
/* ==========================================================================
   GAME OVER: CLONACIÓN EXACTA DE ESTILO, TAMAÑO, COLORES Y PERSPECTIVA
   ========================================================================== */
.arcade-gameover {
    font-family: 'Press Start 2P', monospace !important;
    text-transform: uppercase;
    font-size: 5rem !important;   /* Mismo tamaño gigante */           
    color: #00E5FF !important;    /* Mismo Celeste arcade */           
    letter-spacing: -4px !important;         
    line-height: 1.1 !important;             
    margin: 60px 0 !important;    /* Margen amplio para separarlo del footer */
    text-align: center !important;
    display: block !important;
    
    /* Mismo espaciado de 15px cerrado entre palabras */
    word-spacing: 15px !important; 

    /* Mismo grosor de trazo frontal */
    -webkit-text-stroke: 1px #00E5FF !important;

    /* PERSPECTIVA IDÉNTICA HACIA ADELANTE */
    transform: perspective(250px) rotateX(-32deg) !important;          
    transform-origin: top center !important; 

    /* EXTRUSIÓN 3D IDÉNTICA UNIFICADA EN COLOR ROSA */
    text-shadow: 
        0px 1.5px 0px #E91E63,    
        -0.5px 3px 0px #E91E63,   
        -1px 4.5px 0px #E91E63,   
        -1.5px 6px 0px #E91E63,   
        -2px 7.5px 0px #E91E63,   
        -2.5px 9px 0px #E91E63,   
        -3px 11px 0px #E91E63,    
        -4px 14px 10px rgba(0, 0, 0, 0.9) !important; 
}
.arcade-insertcoin {
    font-family: 'Press Start 2P', monospace !important;
    text-transform: uppercase;
    font-size: 1.6rem !important;            
    color: #ffffff !important;               
    letter-spacing: 2px !important;          
    text-align: center !important;
    margin: -10px 0 50px 0 !important;       
    display: block !important;
    text-shadow: 2px 2px 0px #000000 !important;

    /* ANIMACIÓN PARA QUE TITILE */
    animation: parpadeoArcade 0.8s steps(1, start) infinite !important;
}

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