.elementor-82287 .elementor-element.elementor-element-16385d6{--display:flex;}/* Start custom CSS for html, class: .elementor-element-70d03a5 *//* ----- INICIO CSS PERSONALIZADO PARA AJUSTES DE PÁGINA ----- */

/* 1. IMPORTACIÓN DE FUENTES */
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* 2. ESTILOS GLOBALES Y DE FONDO */
body {
    background-color: var(--noir, #0d0d0d); /* Fallback por si las variables no cargan */
    color: var(--light-gray, #EAEAEA);
    font-family: 'Space Mono', monospace;
    overscroll-behavior: none;
    overflow-x: hidden;
    cursor: none; /* Oculta el cursor por defecto para usar el personalizado */
}

/* EFECTO DE RUIDO/GRANO sutil pero potente sobre toda la página */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAACXVBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwbBQ8hTCQ2SQAAANZJREFUeNrtkTcOxBAUQ8G1S2/ATiB3z7n/AStImzO0jvf9pEXuT/yYjNF5R/a4Y3xd+aP50l7/av2vDczL1nyf5TGNd4zPdybH/LzNfdoWn7z5cZgtpmeoZ5tGtsS6A+lOeI2r0R2O8p/lqGremG8/Iar3h7pC/StA3RERMM8pL+EWiPCG2gUlbWJKl9BQjxpZcMh9vJkXCPHnqSOtYu0qf461P25MHhHh12mfvBFu9v3EaoW5dIeZ/Q2VvOBtnkAn/i1sNfJ+xpgAAAABJRU5ErkJggg==);
    animation: noise 0.2s infinite;
    z-index: 9999;
    opacity: 0.08; /* Ajusta la intensidad del ruido */
}

@keyframes noise {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-1%, -1%); }
    20% { transform: translate(1%, 1%); }
    30% { transform: translate(-2%, 2%); }
    40% { transform: translate(2%, -2%); }
    50% { transform: translate(-1%, 2%); }
    60% { transform: translate(2%, -1%); }
    70% { transform: translate(-2%, 1%); }
    80% { transform: translate(1%, -2%); }
    90% { transform: translate(-1%, 1%); }
}


/* 3. CURSOR PERSONALIZADO Y BARRA DE PROGRESO */
.cursor-dot {
    width: 8px; height: 8px; background-color: var(--neon-pink);
    border-radius: 50%; position: fixed; pointer-events: none;
    z-index: 10001; transform: translate(-50%, -50%); transition: transform 0.1s ease-out;
}
.cursor-outline {
    width: 40px; height: 40px; border: 1px solid var(--neon-pink);
    border-radius: 50%; position: fixed; pointer-events: none;
    z-index: 10000; transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, border-color 0.3s, transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.progress-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 3px;
    background: rgba(50, 50, 50, 0.5); z-index: 1000;
}
.progress-bar {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink));
    box-shadow: 0 0 10px var(--neon-pink);
    transition: width 0.1s linear;
}

/* 4. FOOTER */
.site-footer {
    position: fixed; bottom: 1rem; left: 0; width: 100%;
    text-align: center; z-index: 50; font-family: 'Space Mono', monospace;
    font-size: 0.8rem; color: #555; opacity: 0.7;
}

/* 5. AJUSTES RESPONSIVE */
@media (max-width: 768px) {
    .concept-text { font-size: clamp(1.2rem, 6vw, 3rem); padding: 0 1rem; }
    .glitch-text { font-size: clamp(1.5rem, 8vw, 5rem); }
    .nav-menu { top: 1rem; right: 1rem; }
    .nav-menu a { width: 25px; height: 25px; font-size: 0.8rem; }
    .audio-player { flex-direction: column; padding: 1rem; border-radius: 25px; }
}

/* ----- FIN CSS PERSONALIZADO ----- *//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ab7dada *//* ----- INICIO CSS PERSONALIZADO PARA AJUSTES DE PÁGINA ----- */

/* 1. IMPORTACIÓN DE FUENTES */
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* 2. ESTILOS GLOBALES Y DE FONDO */
body {
    background-color: var(--noir, #0d0d0d); /* Fallback por si las variables no cargan */
    color: var(--light-gray, #EAEAEA);
    font-family: 'Space Mono', monospace;
    overscroll-behavior: none;
    overflow-x: hidden;
    cursor: none; /* Oculta el cursor por defecto para usar el personalizado */
}

/* EFECTO DE RUIDO/GRANO sutil pero potente sobre toda la página */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAACXVBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwbBQ8hTCQ2SQAAANZJREFUeNrtkTcOxBAUQ8G1S2/ATiB3z7n/AStImzO0jvf9pEXuT/yYjNF5R/a4Y3xd+aP50l7/av2vDczL1nyf5TGNd4zPdybH/LzNfdoWn7z5cZgtpmeoZ5tGtsS6A+lOeI2r0R2O8p/lqGremG8/Iar3h7pC/StA3RERMM8pL+EWiPCG2gUlbWJKl9BQjxpZcMh9vJkXCPHnqSOtYu0qf461P25MHhHh12mfvBFu9v3EaoW5dIeZ/Q2VvOBtnkAn/i1sNfJ+xpgAAAABJRU5ErkJggg==);
    animation: noise 0.2s infinite;
    z-index: 9999;
    opacity: 0.08; /* Ajusta la intensidad del ruido */
}

@keyframes noise {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-1%, -1%); }
    20% { transform: translate(1%, 1%); }
    30% { transform: translate(-2%, 2%); }
    40% { transform: translate(2%, -2%); }
    50% { transform: translate(-1%, 2%); }
    60% { transform: translate(2%, -1%); }
    70% { transform: translate(-2%, 1%); }
    80% { transform: translate(1%, -2%); }
    90% { transform: translate(-1%, 1%); }
}


/* 3. CURSOR PERSONALIZADO Y BARRA DE PROGRESO */
.cursor-dot {
    width: 8px; height: 8px; background-color: var(--neon-pink);
    border-radius: 50%; position: fixed; pointer-events: none;
    z-index: 10001; transform: translate(-50%, -50%); transition: transform 0.1s ease-out;
}
.cursor-outline {
    width: 40px; height: 40px; border: 1px solid var(--neon-pink);
    border-radius: 50%; position: fixed; pointer-events: none;
    z-index: 10000; transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, border-color 0.3s, transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.progress-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 3px;
    background: rgba(50, 50, 50, 0.5); z-index: 1000;
}
.progress-bar {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink));
    box-shadow: 0 0 10px var(--neon-pink);
    transition: width 0.1s linear;
}

/* 4. FOOTER */
.site-footer {
    position: fixed; bottom: 1rem; left: 0; width: 100%;
    text-align: center; z-index: 50; font-family: 'Space Mono', monospace;
    font-size: 0.8rem; color: #555; opacity: 0.7;
}

/* 5. AJUSTES RESPONSIVE */
@media (max-width: 768px) {
    .concept-text { font-size: clamp(1.2rem, 6vw, 3rem); padding: 0 1rem; }
    .glitch-text { font-size: clamp(1.5rem, 8vw, 5rem); }
    .nav-menu { top: 1rem; right: 1rem; }
    .nav-menu a { width: 25px; height: 25px; font-size: 0.8rem; }
    .audio-player { flex-direction: column; padding: 1rem; border-radius: 25px; }
}

/* ----- FIN CSS PERSONALIZADO ----- *//* End custom CSS */
/* Start custom CSS *//* ----- INICIO CSS PERSONALIZADO PARA AJUSTES DE PÁGINA ----- */

/* 1. IMPORTACIÓN DE FUENTES */
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* 2. ESTILOS GLOBALES Y DE FONDO */
body {
    background-color: var(--noir, #0d0d0d); /* Fallback por si las variables no cargan */
    color: var(--light-gray, #EAEAEA);
    font-family: 'Space Mono', monospace;
    overscroll-behavior: none;
    overflow-x: hidden;
    cursor: none; /* Oculta el cursor por defecto para usar el personalizado */
}

/* EFECTO DE RUIDO/GRANO sutil pero potente sobre toda la página */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAACXVBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwbBQ8hTCQ2SQAAANZJREFUeNrtkTcOxBAUQ8G1S2/ATiB3z7n/AStImzO0jvf9pEXuT/yYjNF5R/a4Y3xd+aP50l7/av2vDczL1nyf5TGNd4zPdybH/LzNfdoWn7z5cZgtpmeoZ5tGtsS6A+lOeI2r0R2O8p/lqGremG8/Iar3h7pC/StA3RERMM8pL+EWiPCG2gUlbWJKl9BQjxpZcMh9vJkXCPHnqSOtYu0qf461P25MHhHh12mfvBFu9v3EaoW5dIeZ/Q2VvOBtnkAn/i1sNfJ+xpgAAAABJRU5ErkJggg==);
    animation: noise 0.2s infinite;
    z-index: 9999;
    opacity: 0.08; /* Ajusta la intensidad del ruido */
}

@keyframes noise {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-1%, -1%); }
    20% { transform: translate(1%, 1%); }
    30% { transform: translate(-2%, 2%); }
    40% { transform: translate(2%, -2%); }
    50% { transform: translate(-1%, 2%); }
    60% { transform: translate(2%, -1%); }
    70% { transform: translate(-2%, 1%); }
    80% { transform: translate(1%, -2%); }
    90% { transform: translate(-1%, 1%); }
}


/* 3. CURSOR PERSONALIZADO Y BARRA DE PROGRESO */
.cursor-dot {
    width: 8px; height: 8px; background-color: var(--neon-pink);
    border-radius: 50%; position: fixed; pointer-events: none;
    z-index: 10001; transform: translate(-50%, -50%); transition: transform 0.1s ease-out;
}
.cursor-outline {
    width: 40px; height: 40px; border: 1px solid var(--neon-pink);
    border-radius: 50%; position: fixed; pointer-events: none;
    z-index: 10000; transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, border-color 0.3s, transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.progress-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 3px;
    background: rgba(50, 50, 50, 0.5); z-index: 1000;
}
.progress-bar {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink));
    box-shadow: 0 0 10px var(--neon-pink);
    transition: width 0.1s linear;
}

/* 4. FOOTER */
.site-footer {
    position: fixed; bottom: 1rem; left: 0; width: 100%;
    text-align: center; z-index: 50; font-family: 'Space Mono', monospace;
    font-size: 0.8rem; color: #555; opacity: 0.7;
}

/* 5. AJUSTES RESPONSIVE */
@media (max-width: 768px) {
    .concept-text { font-size: clamp(1.2rem, 6vw, 3rem); padding: 0 1rem; }
    .glitch-text { font-size: clamp(1.5rem, 8vw, 5rem); }
    .nav-menu { top: 1rem; right: 1rem; }
    .nav-menu a { width: 25px; height: 25px; font-size: 0.8rem; }
    .audio-player { flex-direction: column; padding: 1rem; border-radius: 25px; }
}

/* ----- FIN CSS PERSONALIZADO ----- *//* End custom CSS */