@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Rajdhani:wght@500;700&display=swap');

:root {
    --bg-dark: #0a0b0e;
    --bg-panel: #14161c;
    --text-main: #ffffff;
    --text-silver: #b3b8c2;
    --glow-silver: rgba(179, 184, 194, 0.6);
}

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

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Rajdhani', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    overflow-x: hidden;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 500px;
    z-index: 1;
}

.logo-container { width: 100%; max-width: 200px; margin-bottom: 1.5rem; cursor: pointer; transition: transform 0.3s ease; }
.logo-container:hover { transform: scale(1.05); }
.logo-container img { width: 100%; filter: drop-shadow(0 0 8px var(--glow-silver)); }

h1.brand-title { font-family: 'Orbitron', sans-serif; font-size: clamp(1.5rem, 8vw, 2.2rem); letter-spacing: 5px; text-transform: uppercase; margin-bottom: 2rem; text-shadow: 0 0 12px var(--glow-silver); text-align: center; }

.maintenance-box { background-color: var(--bg-panel); border: 1px dashed var(--text-silver); padding: 2rem; text-align: center; width: 100%; position: relative; }
.maintenance-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--text-main), transparent); }

.maintenance-title { font-family: 'Orbitron', sans-serif; font-size: 1.1rem; color: var(--text-main); letter-spacing: 2px; margin-bottom: 1rem; text-transform: uppercase; }
.maintenance-desc { font-size: 1.1rem; color: var(--text-silver); line-height: 1.6; letter-spacing: 1px; }

/* --- VENTANA DE VÍDEO --- */
.video-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100vw; height: 100vh; background-color: #000; justify-content: center; align-items: center; }
.modal-content { width: 80%; height: 80%; display: flex; justify-content: center; align-items: center; position: relative; }
.modal-content video { width: 100%; height: 100%; object-fit: contain; }

/* Animación de parpadeo y desvanecimiento */
#mensajeRecuperacion {
    position: absolute;
    font-family: 'Orbitron', sans-serif;
    color: white;
    font-size: 1.5rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-shadow: 0 0 10px var(--glow-silver);
    display: none;
    animation: fadeInOut 2s infinite;
}

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

/* --- ESTILOS DEL CONTADOR --- */
.counter-box {
    margin-top: 2rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    color: var(--text-silver);
    letter-spacing: 2px;
}

#contador {
    color: var(--text-main);
    text-shadow: 0 0 8px var(--glow-silver);
    font-weight: bold;
}