/* Usaremos principalmente Tailwind, pero aquí van estilos personalizados y animaciones */
<style>
<style>
/* Justificar todo el texto de la página */
body, p, div, span, li, td, th, .text-xl, .text-2xl, .text-lg, .text-sm, .leading-relaxed {
    text-align: justify !important;
}

/* Excepciones para elementos que deben mantener su alineación */
h1, h2, h3, h4, h5, h6, .text-center, button, a {
    text-align: center !important;
}

/* Mantener alineación específica donde sea necesario */
.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}
</style>
    html, body {
        width: 100%;
        overflow-x: auto;
    }
    
    body {
        min-width: 1440px;
    }
/* --- CURSOR PERSONALIZADO --- */
.custom-cursor {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 2px solid #FBBF24; /* amber-400 */
    background-color: rgba(251, 191, 36, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.15s ease-out, width 0.2s ease-out, height 0.2s ease-out, background-color 0.2s ease-out;
    opacity: 0;
}
.custom-cursor.visible { opacity: 1; }
.custom-cursor.hover-interactive {
    width: 60px;
    height: 60px;
    background-color: rgba(251, 191, 36, 0.4);
}
@media (pointer: coarse) {
    .custom-cursor { display: none; }
}
/* --- ANIMACIONES DE SCROLL --- */
[data-animation] {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
[data-animation="fade-up"] { transform: translateY(50px); }
[data-animation="fade-down"] { transform: translateY(-50px); }
[data-animation="fade-left"] { transform: translateX(50px); }
[data-animation="fade-right"] { transform: translateX(-50px); }
[data-animation].is-visible {
    opacity: 1;
    transform: translateY(0) translateX(0);
}
/* --- OTROS ESTILOS GLOBALES --- */
.shadow-text {
    text-shadow: 0 4px 10px rgba(251, 191, 36, 0.3);
}
@keyframes spin-slow {
    from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
.animate-spin-slow { animation: spin-slow 20s linear infinite; }
@keyframes marquee {
    from { transform: translateX(0); } to { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 40s linear infinite; }
        /* Estilos en el Header Estilos para el Loader y Efecto Matrix */
        #loading-screen {
            position: fixed;
            inset: 0;
            z-index: 10000;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 1s ease;
            overflow: hidden;
        }
        #loading-screen.hide {
            opacity: 0;
            pointer-events: none;
        }
        #matrix-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            min-height: 100%;
            z-index: 1; /* Detrás de todo el contenido pero encima del fondo base */
            pointer-events: none; /* Permitir interacción con elementos superiores */
        }
        #loader-logo {
            position: absolute;
            width: 200px;
            height: auto;
            opacity: 0;
            z-index: 10001;
            animation: logoAppearProgressive 3s ease 0.5s forwards;
            filter: drop-shadow(0 0 20px #FBBF24);
        }
        @keyframes logoAppearProgressive {
            0% {
                opacity: 0;
                filter: blur(10px) drop-shadow(0 0 20px #FBBF24);
                transform: scale(0);
            }
            70% {
                opacity: 0.95;
                filter: blur(5px) drop-shadow(0 0 20px #FBBF24);
                transform: scale(0.7);
            }
            100% {
                opacity: 1;
                filter: blur(0px) drop-shadow(0 0 20px #FBBF24);
                transform: scale(1);
            }
        }
        #matrix-background {
            position: fixed;
            inset: 0;
            z-index: -1;
            opacity: 0;
            transition: opacity 1s ease;
        }
        #matrix-background.active {
            opacity: 0./35;
        }
        /* CORRECCIÓN: Ocultar contenido SOLO en páginas con loader */
        body.has-loader:not(.loaded) > header,
        body.has-loader:not(.loaded) > main,
        body.has-loader:not(.loaded) > footer {
            opacity: 0;
            transform: translateY(10px);
        }
        header, main, footer {
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
body {
    background: rgba(0, 0, 0, 0.85); /* 0.85 = 85% opaco */
}
/* FIX MÓVIL - Forzar ancho mínimo */
@media (max-width: 768px) {
    body {
        min-width: 1200px !important;
    }
    
    .container {
        min-width: 1200px !important;
    }
}
<style>
/* Justificar todo el texto */
p, .text-xl, .text-2xl, .text-lg, .text-sm, .leading-relaxed {
    text-align: justify !important;
}
</style>