.elementor-83177 .elementor-element.elementor-element-f30b66f{--display:flex;--z-index:2;}.elementor-83177 .elementor-element.elementor-element-40bfdca{width:100%;max-width:100%;z-index:5;}.elementor-83177 .elementor-element.elementor-element-225f9d8{--spacer-size:357px;width:100%;max-width:100%;}.elementor-83177 .elementor-element.elementor-element-01da04a{--display:flex;}.elementor-83177 .elementor-element.elementor-element-2fecb5c{--display:flex;}.elementor-83177 .elementor-element.elementor-element-6ad02a0{width:100%;max-width:100%;}/* Start custom CSS *//* ======================================================= */
/*  CSS PARA FORZAR ANCHO COMPLETO Y MEJORAR LA PÁGINA     */
/* ======================================================= */

/* --- 1. Forzar el contenedor principal a ancho completo --- */
/* Asume que tu sección principal de Elementor tiene la clase .elementor-section */
body.elementor-page-83177 .elementor-section-wrap > .elementor-section {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 !important; /* Eliminar paddings de Elementor */
}

/* --- 2. Establecer un fondo oscuro y dinámico en la página --- */
body {
    background-color: #050505; /* Fondo base muy oscuro */
    overflow-x: hidden; /* Prevenir scroll horizontal accidental */
}

/* :: Mejora la rejilla con una animación de cambio de color */
body::before {
    --size: 50px;
    --line-color-start: hsl(280, 100%, 15%); /* Morado oscuro */
    --line-color-end: hsl(180, 100%, 15%); /* Cian oscuro */
    content: "";
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    background: 
        linear-gradient(90deg, var(--line-color) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size),
        linear-gradient(var(--line-color) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size);
    mask: linear-gradient(-35deg, transparent 40%, white);
    z-index: -2;
    animation: grid-color-change 20s linear infinite alternate;
}

@keyframes grid-color-change {
    from {
        --line-color: var(--line-color-start);
    }
    to {
        --line-color: var(--line-color-end);
    }
}

/* --- 3. Mejorar el botón "LEER MANIFIESTO SUBVERSIVO" --- */
/* Asumiendo que has puesto el bloque de código dentro de un widget HTML */
body.elementor-page-83177 .manifesto-summary { /* Usamos 'body.elementor-page-83177' para apuntar al widget que contiene el HTML */
    display: block;
    padding: 1rem 1.5rem;
    background-color: rgba(26, 26, 26, 0.8);
    backdrop-filter: blur(5px);
    border: 1px solid #4b5563;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    font-size: 1.1rem;
    color: #8FBDDF;
    letter-spacing: 0.05em;
    transition: all 0.4s ease;
    animation: float-glow 6s ease-in-out infinite;
}

body.elementor-page-83177 .manifesto-summary:hover {
    background-color: #2a2a2a;
    border-color: #8FBDDF;
    color: #fff;
    transform: translateY(-5px) scale(1.02); /* Levitar un poco */
}

@keyframes float-glow {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 0 10px rgba(143, 189, 223, 0.2);
    }
    50% {
        transform: translateY(-3px);
        box-shadow: 0 0 20px rgba(143, 189, 223, 0.5);
    }
}

/* --- 4. Asegurar que nuestro contenedor principal no tenga fondo --- */
/* Si has seguido mis códigos anteriores, esto asegura la transparencia */
body.elementor-page-83177 #ailof-creative-hub {
    background: transparent !important;
}/* End custom CSS */