/*
Theme Name:   Doral Group | Astra
Theme URI:    http://doralgroup.com
Description:  Doral Group | Astra
Author:       aidi Sites
Author URI:   http://hello.aidi.team
Template:     astra
Version:      0.01
*/

/* ==========================================================================
   ÍNDICE
   1.  Animaciones AOS
   2.  General
   3.  Modo Oscuro — Variables Globales
   4.  Modo Oscuro — Fondos de Layout
   5.  Modo Oscuro — Comentarios y Formularios
   6.  Modo Oscuro — Botones y Enlaces
   7.  Modo Oscuro — Footer y Sección Aprende
   8.  Modo Oscuro — Estilos Varios
   9.  Header
   10. Home — Banner
   11. Home — Salas (cards con badge de ubicación)
   12. Home — Eventos (carousel)
   13. Home — Mapa
   14. Salas Individuales
   15. Salas y Eventos — Grid compartido
   16. Blog / Single Post
   17. Footer
   18. Submenú — Desktop y Móvil
   19. Submenú — Modo Oscuro
   ========================================================================== */


/* ==========================================================================
   1. ANIMACIONES AOS
   ========================================================================== */

/* Suaviza y evita "saltos" */
[data-aos] { will-change: transform, opacity; }

/* Evita imágenes "blandas" en zoom */
[data-aos="zoom-in"] { transform-origin: center; }


/* ==========================================================================
   2. GENERAL
   ========================================================================== */

.ast-site-identity {
    padding: 0.75em 0;
}

select {
    outline: none;
}

/* Cards UE: altura uniforme en columnas */
.uc_post_grid_style_one_item {
    display: flex !important;
    flex-direction: column;
    height: 100%;
}

.uc_content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 20px;
}

.ue-content-wrapper {
    flex-grow: 1;
}


/* ==========================================================================
   3. MODO OSCURO — VARIABLES GLOBALES
   (Astra + Elementor + WP Dark Mode)
   ========================================================================== */

html.wp-dark-mode-active,
body.wp-dark-mode-active {

    /* --- Paleta de colores --- */
    --e-global-color-astglobalcolor0: #FFB300;  /* Brand / Acento */
    --e-global-color-astglobalcolor1: #A01928;  /* Alternativa */
    --e-global-color-astglobalcolor2: #F2F2F2;  /* Encabezados */
    --e-global-color-astglobalcolor3: #A6A6A6;  /* Texto */
    --e-global-color-astglobalcolor4: #191B1D;  /* Fondo Primario */
    --e-global-color-astglobalcolor5: #1F2124;  /* Fondo Secundario */
    --e-global-color-astglobalcolor6: #e58c17;  /* Fondo Alt */
    --e-global-color-astglobalcolor7: #070614;  /* Fondo Sutil */
    --e-global-color-astglobalcolor8: #AAAAAA;  /* Apoyos */

    /* --- Compatibilidad Astra 4.x --- */
    --ast-global-color-0: var(--e-global-color-astglobalcolor0);
    --ast-global-color-1: var(--e-global-color-astglobalcolor1);
    --ast-global-color-2: var(--e-global-color-astglobalcolor2);
    --ast-global-color-3: var(--e-global-color-astglobalcolor3);
    --ast-global-color-4: var(--e-global-color-astglobalcolor4);
    --ast-global-color-5: var(--e-global-color-astglobalcolor5);

    /* --- WP Dark Mode: fondo y texto base --- */
    --wp-dark-mode-bg:   var(--e-global-color-astglobalcolor4);
    --wp-dark-mode-text: var(--e-global-color-astglobalcolor3);

    /* --- WP Dark Mode: enlaces --- */
    --wpdm-link-color:       var(--e-global-color-astglobalcolor0);
    --wpdm-link-hover-color: var(--e-global-color-astglobalcolor3);

    /* --- WP Dark Mode: botones --- */
    --wpdm-button-background-color:       var(--e-global-color-astglobalcolor0);
    --wpdm-button-border-color:           var(--e-global-color-astglobalcolor0);
    --wpdm-button-text-color:             var(--e-global-color-astglobalcolor2);
    --wpdm-button-hover-background-color: var(--e-global-color-astglobalcolor4);
    --wpdm-button-hover-border-color:     var(--e-global-color-astglobalcolor0);
    --wpdm-button-hover-text-color:       var(--e-global-color-astglobalcolor0);

    /* --- Mapeo adicional para compatibilidad --- */
    --wp-dark-mode-bg--e-global-color-astglobalcolor0: var(--e-global-color-astglobalcolor0);
    --wp-dark-mode-bg--ast-global-color-0:             var(--e-global-color-astglobalcolor0);
}


/* ==========================================================================
   4. MODO OSCURO — FONDOS DE LAYOUT
   ========================================================================== */

html.wp-dark-mode-active body {
    background-color: var(--e-global-color-astglobalcolor4);
}

/* Contenedor principal y artículos */
html.wp-dark-mode-active .ast-separate-container #primary,
html.wp-dark-mode-active .ast-separate-container .ast-article-post,
html.wp-dark-mode-active .ast-separate-container .ast-article-single,
html.wp-dark-mode-active .elementor-section {
    background-color: var(--e-global-color-astglobalcolor4) !important;
}

/* Blog y contenido del sitio */
html.wp-dark-mode-active .ast-separate-container .blog-layout-1,
html.wp-dark-mode-active .ast-separate-container .site-content {
    background-color: var(--e-global-color-astglobalcolor7) !important;
}

/* Widgets Unlimited Elements */
html.wp-dark-mode-active .team_member_carousel_content {
    background-color: var(--e-global-color-astglobalcolor5) !important;
}


/* ==========================================================================
   5. MODO OSCURO — COMENTARIOS Y FORMULARIOS
   ========================================================================== */

html.wp-dark-mode-active .comments-area,
html.wp-dark-mode-active #respond,
html.wp-dark-mode-active .comment-respond,
html.wp-dark-mode-active .ast-separate-container .comments-area .comment-respond {
    background-color: var(--e-global-color-astglobalcolor4) !important;
    border: 1px solid var(--e-global-color-astglobalcolor5);
    padding: 30px;
    border-radius: 8px;
}

/* Títulos y notas del formulario */
html.wp-dark-mode-active #reply-title,
html.wp-dark-mode-active .comment-notes,
html.wp-dark-mode-active .logged-in-as {
    color: var(--e-global-color-astglobalcolor2) !important;
}

/* Campos de texto del formulario */
html.wp-dark-mode-active #commentform input[type="text"],
html.wp-dark-mode-active #commentform input[type="email"],
html.wp-dark-mode-active #commentform input[type="url"],
html.wp-dark-mode-active #commentform textarea {
    background-color: var(--e-global-color-astglobalcolor5) !important;
    color:            var(--e-global-color-astglobalcolor3) !important;
    border: 1px solid var(--e-global-color-astglobalcolor6) !important;
}


/* ==========================================================================
   6. MODO OSCURO — BOTONES Y ENLACES
   ========================================================================== */

html.wp-dark-mode-active .eventos-grid a.uc_more_btn,
html.wp-dark-mode-active #salas-grid-main a,
html.wp-dark-mode-active .salas-grid-home a,
html.wp-dark-mode-active #home-eventos a.uc_more_btn {
    --wpdm-link-hover-color: var(--e-global-color-astglobalcolor5) !important;

}

html.wp-dark-mode-active .eventos-grid a.uc_more_btn:hover,
html.wp-dark-mode-active #salas-grid-main a:hover,
html.wp-dark-mode-active .salas-grid-home a:hover,
html.wp-dark-mode-active #home-eventos a.uc_more_btn:hover,
html.wp-dark-mode-active a:hover{
    /*background-color: var(--e-global-color-astglobalcolor0) !important;*/
    /*background-color: #f4ac02 !important;*/
    /*background: inherit !important;*/
    /*background-color: inherit !important;*/
    /*color: inherit !important;/*/
    /*border-color: inherit !important;*/

    /* Efectos visuales */
    filter: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

html.wp-dark-mode-active .btn-bg-no-fill a {
    --wpdm-button-background-color: none !important;
    --wpdm-button-text-color: var(--e-global-color-astglobalcolor0) !important;
}

html.wp-dark-mode-active .btn-bg-fill a {
    --wpdm-button-hover-background-color: var(--e-global-color-astglobalcolor0) !important;
    --wpdm-button-hover-text-color: var(--e-global-color-astglobalcolor2) !important;
}

html.wp-dark-mode-active select {
    --wpdm-input-border-color: #A6A6A644;
}


/* ==========================================================================
   7. MODO OSCURO — FOOTER Y SECCIÓN APRENDE
   ========================================================================== */

html.wp-dark-mode-active #home-aprende .ue_options .ue_option.active .ue_button,
html.wp-dark-mode-active #footer-doral a,
html.wp-dark-mode-active #footer-doral p,
html.wp-dark-mode-active #footer-doral .elementor-icon-box-wrapper span {
    color: var(--e-global-color-astglobalcolor2) !important;
}

html.wp-dark-mode-active #footer-doral .elementor-icon-box-wrapper svg {
    fill: var(--e-global-color-astglobalcolor2) !important;
}

html.wp-dark-mode-active footer .site-primary-footer-wrap,
html.wp-dark-mode-active footer .site-below-footer-wrap {
    background: var(--e-global-color-astglobalcolor1);
}


/* ==========================================================================
   8. MODO OSCURO — ESTILOS VARIOS
   ========================================================================== */

/* Excepción: el header mantiene su paleta propia en modo oscuro */
html.wp-dark-mode-active .site-header-section {
    --e-global-color-astglobalcolor0: #f7f7f7;
    --wpdm-link-color: var(--e-global-color-astglobalcolor0);
}

html.wp-dark-mode-active .single-post .ast-primary-header-bar {
    background-color: var(--e-global-color-astglobalcolor4);
    border-bottom-color: #eaeaea11;
}

html.wp-dark-mode-active .single-post .post-navigation {
    background-color: var(--e-global-color-astglobalcolor7);
}

/* Paginación del grid */
html.wp-dark-mode-active .grid-pagination .page-numbers.current {
    color: var(--e-global-color-astglobalcolor4) !important;
    background-color: var(--e-global-color-astglobalcolor0) !important;
}

html.wp-dark-mode-active .grid-pagination .page-numbers:hover {
    background-color: var(--e-global-color-astglobalcolor5) !important;
}

/* Banner central */
html.wp-dark-mode-active .banner-middle h2,
html.wp-dark-mode-active .banner-middle p {
    color: var(--e-global-color-astglobalcolor2) !important;
}

html.wp-dark-mode-active .banner-middle .elementor-divider-separator {
    --divider-color: var(--e-global-color-astglobalcolor2);
}

/* Sección Instagram en single de sala */
html.wp-dark-mode-active .btn-sala-single-instagram h3,
html.wp-dark-mode-active .sala-single-instagram h2,
html.wp-dark-mode-active .sala-single-instagram p {
    color: var(--e-global-color-astglobalcolor2) !important;
}

html.wp-dark-mode-active .btn-sala-single-instagram svg {
    fill: var(--e-global-color-astglobalcolor2);
}

html.wp-dark-mode-active .sala-single-instagram .elementor-divider-separator {
    --divider-color: var(--e-global-color-astglobalcolor2);
}

/* Premios: color de svg en modo oscuro
   Sobreescribe el filter del plugin para que coincida con --astglobalcolor8 (#AAAAAA) */
html.wp-dark-mode-active:not([data-wp-dark-mode-preset="0"]) body .sala-single-awards img.uc-svg-image,
html[data-wp-dark-mode-active]:not([data-wp-dark-mode-preset="0"]) body .sala-single-awards img.uc-svg-image,
html[data-wp-dark-mode-loading]:not([data-wp-dark-mode-preset="0"]) body .sala-single-awards img.uc-svg-image {
    filter: brightness(0) saturate(100%) invert(66.7%) !important; /* #AAAAAA */
}


/* ==========================================================================
   9. HEADER
   ========================================================================== */

/* Oculta flecha y texto del selector de idioma (solo muestra la bandera) */
.trp-current-language-item__wrapper svg.trp-shortcode-arrow,
.trp-current-language-item__wrapper span.trp-language-item-name {
    display: none;
}

.trp-language-item {
    border-radius: 6px;
    padding: 3px 0 3px 8px !important;
    min-height: 22px !important;
    margin-top: 4px;
}

.ast-switcher-button {
    border: 0;
}


/* ==========================================================================
   10. HOME — BANNER
   ========================================================================== */

#home-banner {
    position: relative;
}

#home-banner-title,
#home-banner-subtitle {
    text-align: center;
}

/* Contenedor del bloque de texto: centrado vertical y horizontal */
#home-banner :has(> #home-banner-title) {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: 70px;
}

/* "Descubre más": anclado al borde inferior */
#home-banner-scroll-down {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: 20px;
    margin: 0 !important;
}

#home-banner-scroll-down .elementor-icon-list-items {
    display: flex;
    justify-content: center;
}


/* ==========================================================================
   11. HOME — SALAS (cards con badge de ubicación)
   ========================================================================== */

/* Contenedor de imagen: referencia de posicionamiento para el badge */
#home-salas-1 .ue-image-holder,
#home-salas-2 .ue-image-holder,
#home-salas-3 .ue-image-holder {
    position: relative;
}

/* Badge compartido: estilo base */
#home-salas-1 .ue-item-descr,
#home-salas-2 .ue-item-descr,
#home-salas-3 .ue-item-descr {
    position: absolute;
    z-index: 10;
    background-color: var(--e-global-color-astglobalcolor0);
    color: white;
    opacity: 0.9;
    line-height: 1.8;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Badge #1: esquina superior izquierda */
#home-salas-1 .ue-item-descr {
    top: 15px;
    left: 15px;
    padding: 0 8px;
}

/* Badge #2: esquina superior derecha */
#home-salas-2 .ue-item-descr {
    top: 15px;
    right: 15px;
    padding: 0 8px;
}

/* Badge #3: pegado al borde superior derecho (estilo "etiqueta de esquina") */
#home-salas-3 .ue-item-descr {
    top: 0;
    right: 0;
    padding: 2px 8px;
    border-radius: 0 6px 0 8px;
}

/* Texto de ubicación: icono de pin + texto alineados */
#home-salas-1 .ue-item-text p,
#home-salas-2 .ue-item-text p,
#home-salas-3 .ue-item-text p {
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.5;
}

/* Icono de pin SVG via máscara CSS */
#home-salas-1 .ue-item-text p::before,
#home-salas-2 .ue-item-text p::before,
#home-salas-3 .ue-item-text p::before {
    content: "";
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    margin-top: 2px;
    background-color: var(--ast-global-color-8);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* Padding ajustado del contenido en #home-salas-1 */
#home-salas-1 .uc_content {
    padding-top: 2px;
}


/* ==========================================================================
   12. HOME — EVENTOS (carousel)
   ========================================================================== */

/* Badge de fecha: esquina superior derecha de cada card */
#home-eventos .ue_carousel_item {
    position: relative;
}

#home-eventos .ue_carousel_item .ue-text-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 20;
    background-color: var(--e-global-color-astglobalcolor0);
    color: white;
    padding: 2px 12px;
    line-height: 1.8;
    border-radius: 0 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
}

.ue-text-header p {
    margin: 0 !important;
    padding: 0 !important;
}

/* Sin espacio extra debajo de la imagen */
.team_member_carousel_image_container {
    line-height: 0;
}

/* Carousel: alinear cards a la misma altura */
.owl-item {
    display: flex !important;
}

.ue_carousel_item {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.team_member_carousel_content {
    display: flex;
    flex-direction: column;
    flex: 1 !important;
}

/* Empuja el botón al final de la card */
.team_member_carousel_button {
    order: 3;
    margin-top: auto !important;
}

/* Fix de sombras recortadas en el carousel de home-eventos */
#uc_team_member_carousel_elementor_4f51f0e .owl-stage-outer {
    padding: 40px !important;
    margin: -40px !important;
    overflow: visible !important;
}

#uc_team_member_carousel_elementor_4f51f0e {
    overflow: hidden !important;
    padding: 10px;
}

/* Badge de ciudad/casino sobre la card del carousel */
.team_member_carousel_text {
    order: -1;
    display: inline-block;
    align-self: flex-start;
    background: var(--e-global-color-astglobalcolor0);
    color: #fff;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 0 !important;
    margin-left: -4px !important;
    margin-bottom: 8px;
    opacity: 0.95;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Orden de los elementos dentro del carousel content */
.team_member_carousel_title    { order: 1; }
.team_member_carousel_subtitle { order: 2; }


/* ==========================================================================
   13. HOME — MAPA
   ========================================================================== */

/* Redondear el mapa de Google */
.home-maps .ue-google-map__wrapper {
    border-radius: 10px !important;
    overflow: hidden !important;
    transform: translateZ(0); /* Fix de recorte en algunos navegadores */
}

.home-maps {
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* Oculta el botón de cerrar del info window (mejora visual) */
.gm-style-iw-chr {
    display: none;
}

.gm-style-iw-d {
    padding-top: 15px;
    padding-bottom: 8px;
}

@media (max-width: 768px) {
    .gm-style .gm-style-iw {
        max-width: none !important;
    }
}

/* Siempre visible: lista de casinos en el mapa */
.ue-google-map_category-items {
    max-height: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Oculta la flecha de expansión de la lista (ya siempre visible) */
.ue-google-map_category-content::after {
    display: none !important;
}

/* Click area ampliado sobre la card de sala en el mapa */
.ue-map-learn-btn {
    position: relative;
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 20px;
}

.ue-map-learn-btn a.uc_more_btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Nombre del casino dentro del info window */
.team_member_carousel_location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #ce9e00;
    margin-bottom: 8px;
    font-weight: 600;
}


/* ==========================================================================
   14. SALAS INDIVIDUALES
   ========================================================================== */

/* Banner principal */
.sala-single-banner img {
    height: 110px !important;
    width: auto;
    display: block;
}

/* Enlace del instagram de la sala */
.sala-single-instagram a {
    color: var(--e-global-color-astglobalcolor0);
}

/* Social cards (Instagram / Facebook / YouTube): hover sutil */
.btn-sala-single-social {
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    will-change: transform;
}

.btn-sala-single-social:hover {
    transform: scale(1.04);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
    border-radius: 12px;
}

/* --- Premios (counter boxes) --- */

/* Icono SVG: color neutro en modo claro */
.sala-single-awards .uc-svg-image {
    filter: brightness(0) saturate(100%) invert(41.6%);
}

/* Layout de cada award box */
.sala-single-awards .uc_counter_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* Oculta espaciador de icono (no necesario aquí) */
.sala-single-awards .ue_icon_spacer {
    display: none !important;
}

/* Div interno también en columna */
.sala-single-awards .uc_counter_box > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Orden de los elementos: Nombre → Premio → Fecha */
.sala-single-awards .counter_label  { order: 1; }
.sala-single-awards .counter_number { order: 2; }
.sala-single-awards .counter_date   { order: 3; }

/* Fecha: estilo sutil */
.sala-single-awards .counter_date {
    color: var(--e-global-color-astglobalcolor3);
    font-weight: 300;
    font-size: 15px;
    margin-top: -1px;
}


/* ==========================================================================
   15. SALAS Y EVENTOS — GRID COMPARTIDO
   ========================================================================== */

/* Botón "Ver más" */
#salas-grid-main .uc_more_btn,
.eventos-grid .uc_more_btn {
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
}

/* Padding del botón */
#salas-grid-main .team_member_grid_button,
.eventos-grid .team_member_grid_button {
    padding: 0 25px;
}

/* Badge de ciudad/tipo */
#salas-grid-main .team_member_grid_subtitle,
.eventos-grid .team_member_grid_subtitle {
    background-color: var(--e-global-color-astglobalcolor0);
    opacity: 0.9;
    border-radius: 6px;
    width: fit-content;
    margin: 4px auto;
    line-height: 1em;
    padding: 4px 7px;
}

/* Espaciado interno del contenido de la card */
#salas-grid-main .team_member_grid_content,
.eventos-grid .team_member_grid_content {
    display: flex;
    flex-direction: column;
    padding-left: 25px !important;
    padding-right: 25px !important;
}

@media (max-width: 768px) {
    #salas-grid-main .team_member_grid_content,
    .eventos-grid .team_member_grid_content {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Proporción de imágenes */
#salas-grid-main img,
.eventos-grid img {
    aspect-ratio: 5 / 3;
}

.salas-grid-home .salas-grid-home-bg img {
    aspect-ratio: 8 / 5;
}

/* Texto descriptivo */
#salas-grid-main .team_member_grid_text p {
    margin-bottom: 4px;
}

.eventos-grid .team_member_grid_text {
    margin-bottom: 4px;
}

/* Orden de los elementos dentro del grid de salas */
#salas-grid-main .team_member_grid_subtitle { order: 1; }
#salas-grid-main .team_member_grid_title    { order: 2; }
#salas-grid-main .team_member_grid_text     { order: 3; }
#salas-grid-main .team_member_grid_icons    { order: 4; }
#salas-grid-main .team_member_grid_button   { order: 5; }

/* Orden de los elementos dentro del grid de eventos */
.eventos-grid .team_member_grid_subtitle { order: 1; }
.eventos-grid .team_member_grid_title    { order: 2; }
.eventos-grid .team_member_grid_text,
.eventos-grid .team_member_grid_icons,
.eventos-grid .team_member_grid_button   { order: 3; }

/* Select de filtros */
.eventos-grid .eventos-filter-sala-single select,
.eventos-grid .eventos-filter select {
    padding: 6px 30px 6px 15px !important;
    border-radius: 12px !important;
}

/* Barra de filtros: centrada y con gap controlado */
.eventos-filter {
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
}

.eventos-filter > .e-con {
    flex-grow: 0 !important;
    width: auto !important;
    min-width: auto !important;
}

/* Área de clic ampliada para toda la card del grid */
.ue_grid_item {
    position: relative;
}

.ue_grid_item .uc_more_btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ue_grid_item .team_member_grid_button {
    position: relative;
    z-index: 2;
}


/* ==========================================================================
   16. BLOG / SINGLE POST
   ========================================================================== */

body.single-post article {
    padding: 1em;
}

@media (min-width: 993px) {
    body.single-post.ast-separate-container #primary {
        margin-top: 2.5em !important;
    }
}

/* Imagen destacada: proporción cinematográfica */
body.single-post header .post-thumb img {
    aspect-ratio: 4 / 2.5;
    object-fit: cover;
    width: 100%;
    height: auto;
    object-position: center;
}

/* Título centrado */
body.single-post article h1.entry-title {
    text-align: center;
    font-size: 40px;
}

/* Navegación anterior/siguiente: alineada a la izquierda */
.single .gw-back-nav .nav-links {
    justify-content: flex-start;
}

/* Badge de estado del evento (en curso / finalizado) */
.aidi-status-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    font-family: sans-serif;
}

.aidi-status-btn.en-curso {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #2e7d32;
}

.aidi-status-btn.finalizado {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #c62828;
}


/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.ast-footer-copyright {
    line-height: 1.7;
}

/* Créditos "aidi" */
.footer-aidi {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-aidi a {
    display: flex;
    align-items: center;
    color: white;
}

.footer-aidi a:hover {
    text-decoration: none;
    font-weight: 600;
}

.footer-aidi a div {
    margin-top: 4px;
}

/* Logos legales del footer */
#footer-logos-legal img {
    max-height: 80px;
    width: auto;
}

/* --- Footer Doral: Icon List (Contacto) ---
   Reset y estilos de fallback para garantizar consistencia
   cuando el CSS de Elementor no carga correctamente.       */

#footer-doral ul.elementor-icon-list-items {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Spacing vertical entre items */
#footer-doral .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child) {
    padding-block-end: calc(0.6em / 2) !important;
}

#footer-doral .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child) {
    margin-block-start: calc(0.6em / 2) !important;
}

/* Layout del item: icono + texto alineados */
#footer-doral .elementor-icon-list-item > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

/* Texto */
#footer-doral .elementor-icon-list-item > .elementor-icon-list-text {
    font-size: 16px !important;
    line-height: 1.5em !important;
    color: #ffffff !important;
}

/* Icono: contenedor */
#footer-doral .elementor-icon-list-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}

/* Icono: tamaño */
#footer-doral .elementor-icon-list-icon svg,
#footer-doral .elementor-icon-list-icon i {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

/* Resets adicionales de Elementor */
#footer-doral .elementor-icon-list-icon svg.e-font-icon-svg {
    margin-right: 5px;
}

#footer-doral .elementor-icon-list-text {
    padding-inline-start: 0;
}


/* ==========================================================================
   18. SUBMENÚ — DESKTOP Y MÓVIL
   ========================================================================== */

/* --- Contenedor del submenú --- */
.main-header-menu .sub-menu,
.ast-primary-header .main-header-menu .sub-menu {
    min-width: 260px;
    padding: 10px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    z-index: 99999;
}

/* --- Desktop (≥ 992px): 1 columna limpia --- */
@media (min-width: 992px) {
    .main-header-menu .menu-item-has-children > .sub-menu {
        column-count: unset !important;
        column-gap: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        overflow-y: auto;
    }

    .main-header-menu .menu-item-has-children > .sub-menu > .menu-item {
        width: 100% !important;
    }

    .main-header-menu .sub-menu .menu-item {
        break-inside: auto !important;
    }
}

/* --- Items --- */
.main-header-menu .sub-menu .menu-item {
    break-inside: avoid;
}

/* --- Links --- */
.main-header-menu .sub-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px !important;
    margin: 2px 4px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.15;
    transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
    white-space: normal;
}

.main-header-menu .sub-menu a:hover,
.main-header-menu .sub-menu a:focus {
    transform: translateX(2px);
}

/* Separador sutil entre items */
.main-header-menu .sub-menu .menu-item + .menu-item a {
    position: relative;
}

.main-header-menu .sub-menu .menu-item + .menu-item a::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 12px;
    right: 12px;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}

/* Indicador visual (punto) al final de cada link */
.main-header-menu .sub-menu a::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    margin-left: auto;
    flex: 0 0 auto;
    opacity: 0.7;
}

/* --- Botón toggle (flecha) --- */
button.ast-menu-toggle {
    border-radius: 10px;
    padding: 6px 8px;
    transition: background 0.12s ease, transform 0.12s ease;
}

button.ast-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

button.ast-menu-toggle .ast-arrow-svg path {
    fill: rgba(255, 255, 255, 0.85);
}

/* --- Móvil (≤ 991px) --- */
@media (max-width: 991px) {
    .main-header-menu .sub-menu {
        min-width: 100%;
        border-radius: 10px;
        max-height: none;
        overflow: visible;
        column-count: 1;
        background: rgba(18, 18, 18, 0.96);
    }
}


/* ==========================================================================
   19. SUBMENÚ — MODO OSCURO
   ========================================================================== */

html.wp-dark-mode-active .main-header-menu .sub-menu,
html.wp-dark-mode-active .ast-primary-header .main-header-menu .sub-menu,
html[data-wp-dark-mode-active] .main-header-menu .sub-menu,
html[data-wp-dark-mode-active] .ast-primary-header .main-header-menu .sub-menu,
html[data-wp-dark-mode-loading] .main-header-menu .sub-menu,
html[data-wp-dark-mode-loading] .ast-primary-header .main-header-menu .sub-menu {
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(18, 18, 18, 0.92);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

html.wp-dark-mode-active .main-header-menu .sub-menu a,
html[data-wp-dark-mode-active] .main-header-menu .sub-menu a,
html[data-wp-dark-mode-loading] .main-header-menu .sub-menu a {
    color: rgba(255, 255, 255, 0.92);
}

html.wp-dark-mode-active .main-header-menu .sub-menu a:hover,
html.wp-dark-mode-active .main-header-menu .sub-menu a:focus,
html[data-wp-dark-mode-active] .main-header-menu .sub-menu a:hover,
html[data-wp-dark-mode-active] .main-header-menu .sub-menu a:focus,
html[data-wp-dark-mode-loading] .main-header-menu .sub-menu a:hover,
html[data-wp-dark-mode-loading] .main-header-menu .sub-menu a:focus {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
}

html.wp-dark-mode-active .main-header-menu .sub-menu .menu-item + .menu-item a::before,
html[data-wp-dark-mode-active] .main-header-menu .sub-menu .menu-item + .menu-item a::before,
html[data-wp-dark-mode-loading] .main-header-menu .sub-menu .menu-item + .menu-item a::before {
    background: rgba(255, 255, 255, 0.06);
}

html.wp-dark-mode-active .main-header-menu .sub-menu a::after,
html[data-wp-dark-mode-active] .main-header-menu .sub-menu a::after,
html[data-wp-dark-mode-loading] .main-header-menu .sub-menu a::after {
    background: rgba(255, 255, 255, 0.35);
}

html.wp-dark-mode-active button.ast-menu-toggle:hover,
html[data-wp-dark-mode-active] button.ast-menu-toggle:hover,
html[data-wp-dark-mode-loading] button.ast-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

html.wp-dark-mode-active button.ast-menu-toggle .ast-arrow-svg path,
html[data-wp-dark-mode-active] button.ast-menu-toggle .ast-arrow-svg path,
html[data-wp-dark-mode-loading] button.ast-menu-toggle .ast-arrow-svg path {
    fill: rgba(255, 255, 255, 0.85);
}