* { box-sizing: border-box; }
html, body { 
    height: 100%; 
    margin: 0; 
    background: #070010; 
    color: #fff; 
    overflow-x: hidden; 
    font-family: Futura, sans-serif; 
}

/* --- ESTADOS DE CARGA (PROYECTO ANTIGUO) --- */
#canvas, .sib-form {
    opacity: 0;
    transition: opacity 1s ease-out;
}

body.loaded #canvas,
body.loaded .sib-form {
    opacity: 1;
}

#sib-container {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Borde casi invisible */
    background-color: rgba(255, 255, 255, 0.03) !important; /* Fondo sutil */
    backdrop-filter: blur(12px); /* Cristal esmerilado */
    border-radius: 12px !important;
    padding: 40px !important;
    transition: border-color 0.3s ease;
}

#sib-container:hover {
    border-color: rgba(210, 0, 233, 0.3) !important;
}

/* --- BOTÓN REFINADO --- */
.sib-form-block__button {
    background-color: #d200e9 !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 14px 30px !important;
    border-radius: 6px !important;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.3s ease !important;
}

.sib-form-block__button:hover {
    background-color: #e600ff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(210, 0, 233, 0.3);
}


/* --- ANIMACIÓN LOADER (PROYECTO ANTIGUO) --- */
.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 20px;
    background: linear-gradient(#d200e9 50%, #0000 0),
                linear-gradient(#0000 50%, #d200e9 0),
                linear-gradient(#d200e9 50%, #0000 0),
                linear-gradient(#0000 50%, #d200e9 0),
                linear-gradient(#d200e9 50%, #0000 0),
                linear-gradient(#0000 50%, #d200e9 0) #070010;
    background-size: calc(100%/6 + 1px) 200%;
    background-repeat: no-repeat;
    animation: l12 2s infinite;
    z-index: 1000;
}

@keyframes l12 {
    0% { background-position: calc(0*100%/5) 100%, calc(1*100%/5) 0%, calc(2*100%/5) 100%, calc(3*100%/5) 0%, calc(4*100%/5) 100%, calc(5*100%/5) 0%; }
    16.67% { background-position: calc(0*100%/5) 0%, calc(1*100%/5) 0%, calc(2*100%/5) 100%, calc(3*100%/5) 0%, calc(4*100%/5) 100%, calc(5*100%/5) 0%; }
    33.33% { background-position: calc(0*100%/5) 0%, calc(1*100%/5) 100%, calc(2*100%/5) 100%, calc(3*100%/5) 0%, calc(4*100%/5) 100%, calc(5*100%/5) 0%; }
    50% { background-position: calc(0*100%/5) 0%, calc(1*100%/5) 100%, calc(2*100%/5) 0%, calc(3*100%/5) 0%, calc(4*100%/5) 100%, calc(5*100%/5) 0%; }
    66.67% { background-position: calc(0*100%/5) 0%, calc(1*100%/5) 100%, calc(2*100%/5) 0%, calc(3*100%/5) 100%, calc(4*100%/5) 100%, calc(5*100%/5) 0%; }
    83.33% { background-position: calc(0*100%/5) 0%, calc(1*100%/5) 100%, calc(2*100%/5) 0%, calc(3*100%/5) 100%, calc(4*100%/5) 0%, calc(5*100%/5) 0%; }
    100% { background-position: calc(0*100%/5) 0%, calc(1*100%/5) 100%, calc(2*100%/5) 0%, calc(3*100%/5) 100%, calc(4*100%/5) 0%, calc(5*100%/5) 100%; }
}

body.loaded .loader {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    pointer-events: none;
}

/* --- OTROS ESTILOS --- */
#canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
input { color: black !important; }

/* FIX ALERTAS */
.sib-form-container { position: relative; padding-top: 80px; }
#error-message, #success-message {
    position: absolute !important;
    top: 0; left: 50%; transform: translateX(-50%);
    z-index: 100; width: 100%; max-width: 540px;
}