.sop-cols-container {
    container-type: inline-size;
    container-name: sop-layout;
    display: grid !important;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    margin: 0 auto !important;
    /* Center the container */
    padding: 0 !important;
    width: 100% !important;
    max-width: 1600px !important;
    /* Cap width at 1600px */
    box-sizing: border-box;
    clear: both;
}

.entry-content .sop-cols-container,
.wp-site-blocks .sop-cols-container {
    margin: 0 auto !important;
    /* Center the container */
    padding: 0 !important;
    width: 100% !important;
    max-width: 1600px !important;
    /* Cap width at 1600px */
}

/* Fix horizontal scrolling and theme paddings */
body {
    overflow-x: hidden;
}

/* AGGRESSIVE FLUSH LEFT: Zero out all theme wrappers that might contain the layout */
body:has(.sop-cols-container) main,
body:has(.sop-cols-container) .site-content,
body:has(.sop-cols-container) .site-main,
body:has(.sop-cols-container) .entry-content,
body:has(.sop-cols-container) .wp-site-blocks,
body:has(.sop-cols-container) .wp-block-group,
body:has(.sop-cols-container) .wp-block-post-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden;
}

/* ====================================================================
OVERRIDE THEME DEFAULTS (Twenty Twenty-Four / Block Themes) 
Solo se aplica a páginas que contienen nuestro layout (.sop-cols-container)
==================================================================== */

/* 1. Ocultar títulos de página y headers inyectados por el tema */
body:has(.sop-cols-container) .wp-block-post-title,
body:has(.sop-cols-container) top-level-heading,
body:has(.sop-cols-container) h1.wp-block-heading,
body:has(.sop-cols-container) .entry-header {
    display: none !important;
}

/* 2. Quitar márgenes, paddings y anchos restringidos del contenedor principal */
body:has(.sop-cols-container) main,
body:has(.sop-cols-container) .wp-site-blocks,
body:has(.sop-cols-container) .wp-block-group,
body:has(.sop-cols-container) .site-content,
body:has(.sop-cols-container) .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* 3. Forzar el fondo oscuro general en el body para quitar los bordes blancos */



body:has(.sop-cols-container),
html:has(.sop-cols-container) {
    background-color: #020308 !important;

    /* Centramos la luz al 50% (medio) y bajamos un poco el centro al 15% */
    /* Usamos 100% de ancho en la elipse para que se expanda bien hacia los lados */
    background-image: radial-gradient(ellipse 100% 96% at 50% 50%,
            #1c2d54 25%,
            /* Azul luminoso en el centro */
            #0b1325 60%,
            /* Transición a azul oscuro un poco más abajo */
            #020308 100%
            /* Negro profundo para el resto de la página */
        ) !important;

    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* ====================================================================
SOP COLUMNS CONTAINER 
==================================================================== */
.sop-col-left,
.sop-col-right {
    box-sizing: border-box;
}

.sop-col-left {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    color: var(--sop-color-white) !important;
    min-height: 80vh;
    padding-top: 40px !important;
}

.sop-col-right {
    background: transparent !important;
    /* Le dejas el fondo global */
    padding: 30px 40px 60px 20px !important;
    border: none !important;
    color: var(--sop-color-white) !important;
}

@container sop-layout (max-width: 992px) {

    .sop-col-left,
    .sop-col-right {
        grid-column: 1 / -1;
        min-height: auto;
    }
}