/* --- Logo Grid Styles (Mantener como estaba o ajustar según necesidad) --- */
.dlgp-logo-grid-wrapper {
    /* Contenedor general */
    width: 100%;
}

.dlgp-logo-grid {
    display: grid; /* Asegura que sea grid */
    /* grid-template-columns, column-gap, row-gap se aplican inline desde PHP */
    align-items: center; /* Centrar items verticalmente en la celda */
    /* background, border, box-shadow del grid se aplican via Advanced Fields */
}

.dlgp-logo-item {
    /* text-align se aplica inline desde PHP y vía set_style responsive */
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    padding: 10px; /* Espacio interno para efectos hover */
    box-sizing: border-box;
    /* border, box-shadow, etc. del item se aplican via Advanced Fields del item */
}

.dlgp-logo-item:hover {
    transform: translateY(-3px);
    /* La sombra en hover se puede añadir aquí o en Advanced Fields del item */
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); */
}

.dlgp-logo-item img.dlgp-logo-item-image {
    max-width: 100%; /* Default max-width */
    height: auto;   /* Mantener proporción */
    display: block; /* Evita espacio extra y facilita centrado con margin: auto */
    vertical-align: middle;
    /* max-width específico y márgenes para alineación se aplican inline desde PHP */
    /* border, box-shadow, filter de la imagen se aplican via Advanced Fields del item */
}


/* ====================================================== */
/* --- Popup Modal Styles (REVISADO COMPLETAMENTE) --- */
/* ====================================================== */

/* 1. Body class para prevenir scroll del fondo */
body.dlgp-popup-open {
    overflow: hidden !important; /* Prevenir scroll del fondo */
}

/* 2. El Overlay (Fondo oscuro semi-transparente) */
.dlgp-popup-overlay {
    display: none; /* Oculto por defecto, JS lo cambia a 'flex' */
    position: fixed; /* Fijo en la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Fondo oscuro semi-transparente (el color exacto se puede sobrescribir desde Divi) */
    z-index: 99998; /* Muy alto, pero debajo de algunos elementos de Divi si es necesario */
    padding: 40px 20px; /* Espacio arriba/abajo y a los lados para que el contenido no toque los bordes */
    box-sizing: border-box;
    overflow-y: auto; /* Permitir scroll DENTRO del overlay si el contenido es más alto que la pantalla */

    /* Usar Flexbox para centrar el contenido vertical y horizontalmente */
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
}

/* 3. Contenedor del contenido (Ayuda a centrar y posicionar el botón de cierre) */
.dlgp-popup-content {
    position: relative; /* Necesario para posicionar el botón de cierre absoluto */
    width: 100%; /* Ocupa el ancho disponible dentro del padding del overlay */
    display: flex; /* Ayuda a centrar el .dlgp-popup-content-inner si tiene max-width */
    justify-content: center;
    max-width: 100%; /* Asegura que no se desborde */
}

/* 4. El 'Inner Content' (La caja blanca visible) */
.dlgp-popup-content-inner {
    background-color: #ffffff; /* Fondo blanco (sobrescribible desde Divi) */
    /* max-width se aplica inline desde PHP (Default 800px) */
    width: 100%; /* Ocupa el espacio disponible hasta el max-width */
    padding: 35px; /* Padding interno (sobrescribible desde Divi) */
    border-radius: 8px; /* Bordes redondeados como en la imagen */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); /* Sombra suave */
    box-sizing: border-box;

    /* Layout interno: Logo a la izquierda, texto a la derecha */
    display: flex;
    flex-direction: row; /* Dirección por defecto */
    /* gap se aplica inline desde PHP (Default 30px) */

    /* Bordes y sombras de esta caja se controlan en Advanced Fields del módulo padre */
}

/* 5. Área del Logo dentro del Popup */
.dlgp-popup-logo {
    flex: 0 0 35%; /* Ancho fijo (ajustable) */
    max-width: 35%; /* Asegura que no exceda */
    padding-right: 20px; /* Espacio a la derecha del logo (si gap no es suficiente) */
    box-sizing: border-box;
    display: flex;
    align-items: center; /* Centrar logo verticalmente */
    justify-content: center; /* Centrar logo horizontalmente */
}

.dlgp-popup-logo img {
    max-width: 100%; /* La imagen no excede el contenedor del logo */
    height: auto;
    display: block;
    /* Bordes, sombras, etc. de esta imagen se controlan en Advanced Fields del módulo padre */
}

/* 6. Área de la Descripción dentro del Popup */
.dlgp-popup-description {
    flex: 1 1 65%; /* Toma el espacio restante */
    max-width: 65%; /* Asegura que no exceda */
    padding-left: 20px; /* Espacio a la izquierda del texto (si gap no es suficiente) */
    box-sizing: border-box;
    overflow-y: auto; /* Permitir scroll si el texto es muy largo */
    max-height: 70vh; /* Limitar altura máxima para evitar popups gigantescos */
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Estilos de fuente (color, tamaño, etc.) se controlan en Advanced Fields del módulo padre */
}
/* Ajustes para el texto dentro de la descripción */
.dlgp-popup-description p:first-child {
    margin-top: 0;
}
.dlgp-popup-description p:last-child {
    margin-bottom: 0;
}
.dlgp-popup-description h1,
.dlgp-popup-description h2,
.dlgp-popup-description h3,
.dlgp-popup-description h4,
.dlgp-popup-description h5,
.dlgp-popup-description h6 {
    margin-top: 0;
    margin-bottom: 0.5em; /* Espacio debajo de títulos */
}

/* 7. Botón de Cierre (X) */
.dlgp-popup-close {
    position: absolute;
    top: 10px; /* Distancia desde arriba del .dlgp-popup-content */
    right: 10px; /* Distancia desde la derecha del .dlgp-popup-content */
    width: 30px;
    height: 30px;
    background: none; /* Sin fondo */
    border: none; /* Sin borde */
    font-size: 28px; /* Tamaño del icono '×' */
    line-height: 1;
    color: #888888; /* Color gris (sobrescribible desde Divi) */
    cursor: pointer;
    padding: 0;
    font-weight: bold;
    text-align: center;
    transition: color 0.2s ease;
    z-index: 99999; /* Asegurar que esté sobre el contenido interno */
}

.dlgp-popup-close:hover {
    color: #333333; /* Color más oscuro al pasar el ratón (sobrescribible desde Divi) */
}


/* --- Responsive para el Popup (Móviles) --- */
@media (max-width: 767px) {
    .dlgp-popup-overlay {
        padding: 20px 15px; /* Menos padding en móvil */
    }

    .dlgp-popup-content-inner {
        flex-direction: column; /* Apilar logo y texto verticalmente */
        padding: 25px; /* Ajustar padding si es necesario */
        /* El 'gap' aplicado inline seguirá funcionando entre logo y texto */
    }

    .dlgp-popup-logo {
        flex-basis: auto; /* Resetear base */
        width: 100%;    /* Ocupar todo el ancho disponible */
        max-width: 180px; /* Limitar tamaño del logo en móvil */
        padding-right: 0; /* Quitar padding lateral */
        padding-bottom: 15px; /* Añadir espacio debajo (si gap no es suficiente) */
        margin-left: auto; /* Centrar el bloque */
        margin-right: auto; /* Centrar el bloque */
    }
    .dlgp-popup-logo img {
        margin: 0 auto; /* Centrar la imagen si es más pequeña que max-width */
    }

    .dlgp-popup-description {
        flex-basis: auto; /* Resetear base */
        width: 100%;    /* Ocupar todo el ancho */
        max-width: 100%;
        padding-left: 0; /* Quitar padding lateral */
        max-height: 60vh; /* Ajustar altura máxima si es necesario */
        text-align: center; /* Centrar texto en móvil (opcional, quitar si no se desea) */
    }

    .dlgp-popup-close {
        top: 5px;
        right: 5px;
        font-size: 24px; /* Ligeramente más pequeño */
    }
}