/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://juegosdelagua.es/
 Description:  Tema hijo para personalizaciones de Juegos del Agua.
 Author:       Tu Nombre
 Author URI:   https://juegosdelagua.es/
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  hello-elementor-child
*/

/*
 * AQUÍ EMPIEZA TU CSS PERSONALIZADO
 * ===================================
 */

/* 1. ESTILOS DE LA CABECERA (HERO SECTION)
--------------------------------------------- */

/* Estilos para la sección de héroe (SOLO EN LA HOME) */
body.home #Main-Header-Part {
    position: relative !important;
    height: 100vh;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    /* --- 6. CORRECCIÓN DE IMÁGENES DE EVENTOS EN MÓVIL (SOLUCIÓN ULTRA-ULTRA-ESPECÍFICA) --- */

    /*
 * Anula la regla 'max-height: 60px !important;' incrustada en la página de eventos
 * que deforma las imágenes en dispositivos móviles.
 *
 * Este selector es el más específico posible para asegurar que nuestra regla
 * tenga la máxima prioridad y las imágenes se muestren correctamente SOLO en
 * la lista de eventos, sin afectar otras imágenes.
*/
    @media (max-width: 767px) {
        html body ul.tribe-events-calendar-list li.tribe-events-calendar-list__event-row .tribe-events-calendar-list__event-featured-image img.wp-post-image {
            max-height: none !important;
            /* Elimina la restricción de altura máxima */
            height: auto !important;
            /* Asegura que la altura se ajuste automáticamente */
            width: 100% !important;
            /* Asegura que la imagen ocupe todo el ancho disponible */
            object-fit: cover !important;
            /* Asegura que la imagen cubra el área sin deformarse, recortando si es necesario */
        }
    }

    /* --- 7. MAPA DE FECHAS RESPONSIVE --- */

    /* Contenedor relativo para que los enlaces se muevan con la imagen */
    .mapa-fechas-contenedor {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .imagen-base {
        width: 100%;
        display: block;
        height: auto;
    }

    /* Estilo común para todas las zonas clicables */
    .zona-link {
        position: absolute;
        /* Cambia background a rgba(255,0,0,0.3) para VER las cajas mientras las ajustas */
        background: rgba(255, 255, 255, 0);
        border-radius: 5px;
        transition: background 0.3s;
    }

    .zona-link:hover {
        background: rgba(255, 255, 255, 0.2);
        /* Efecto visual al pasar el ratón */
        border: 1px solid white;
    }

    /* Posicionamiento exacto por porcentajes (ajustado a tu imagen de escritorio) */
    /* FILA 1 */
    .natacion {
        top: 20%;
        left: 3%;
        width: 10%;
        height: 10%;
    }

    .pentatlon {
        top: 20%;
        left: 35%;
        width: 10%;
        height: 10%;
    }

    .pesca {
        top: 20%;
        left: 70%;
        width: 10%;
        height: 10%;
    }

    /* FILA 2 */
    .surf {
        top: 35%;
        left: 3%;
        width: 10%;
        height: 10%;
    }

    .subacuaticas {
        top: 35%;
        left: 35%;
        width: 10%;
        height: 10%;
    }

    .triatlon {
        top: 35%;
        left: 70%;
        width: 10%;
        height: 10%;
    }

    /* FILA 3 */
    .salvamento {
        top: 50%;
        left: 3%;
        width: 10%;
        height: 10%;
    }

    .piraguismo {
        top: 50%;
        left: 35%;
        width: 10%;
        height: 10%;
    }

    .esqui {
        top: 50%;
        left: 70%;
        width: 10%;
        height: 10%;
    }

    /* FILA 4 */
    .motonautica {
        top: 65%;
        left: 3%;
        width: 10%;
        height: 10%;
    }

    .vela {
        top: 65%;
        left: 35%;
        width: 10%;
        height: 10%;
    }

    /* --- ESTILOS RESPONSIVE PARA MAPA DE FECHAS (MÓVIL) --- */
    @media (max-width: 767px) {

        /* Para pantallas de hasta 767px de ancho (típicamente móviles) */
        .mapa-fechas-contenedor .imagen-base {
            /* Cambia la imagen base a la versión vertical para móvil */
            content: url('https://juegosdelagua.es/wp-content/uploads/2026/04/Gemini_Generated_Image_4n1myz4n1myz4n1m.png');
        }

        /* Nuevas posiciones para los enlaces en móvil (ESTO NECESITARÁ AJUSTES MANUALES) */
        /* He intentado una distribución vertical en una columna. Ajusta 'top', 'left', 'width', 'height'
       para que cada enlace coincida con el área correcta en tu nueva imagen vertical.
       Puedes cambiar temporalmente 'background: rgba(255, 255, 255, 0);' a 'background: rgba(255,0,0,0.3);'
       en la clase .zona-link para ver las cajas mientras las ajustas. */

        .natacion {
            top: 1%;
            left: 10%;
            width: 80%;
            height: 7%;
        }

        .pentatlon {
            top: 10%;
            left: 10%;
            width: 80%;
            height: 7%;
        }

        .pesca {
            top: 19%;
            left: 10%;
            width: 80%;
            height: 7%;
        }

        .surf {
            top: 28%;
            left: 10%;
            width: 80%;
            height: 7%;
        }

        .subacuaticas {
            top: 37%;
            left: 10%;
            width: 80%;
            height: 7%;
        }

        .triatlon {
            top: 46%;
            left: 10%;
            width: 80%;
            height: 7%;
        }

        .salvamento {
            top: 55%;
            left: 10%;
            width: 80%;
            height: 7%;
        }

        .piraguismo {
            top: 64%;
            left: 10%;
            width: 80%;
            height: 7%;
        }

        .esqui {
            top: 73%;
            left: 10%;
            width: 80%;
            height: 7%;
        }

        .motonautica {
            top: 82%;
            left: 10%;
            width: 80%;
            height: 7%;
        }

        .vela {
            top: 91%;
            left: 10%;
            width: 80%;
            height: 7%;
        }
    }

    /* Asegura que el contenido de la sección esté por encima del vídeo (SOLO EN LA HOME) */
    body.home #Main-Header-Part .elementor-container {
        z-index: 1;
        position: relative;
    }

    /* Oculta el vídeo de fondo original de Elementor si lo hubiera (SOLO EN LA HOME) */
    body.home #Main-Header-Part .elementor-background-video-container {
        display: none !important;
    }


    /* 2. PALETA DE COLORES Y TIPOGRAFÍA GLOBAL
--------------------------------------------- */

    /* Importamos las fuentes desde Google Fonts */
    @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@600;700&display=swap');

    :root {
        /* Paleta "Mar Profundo y Energía Acuática" */
        --color-primario: #0A2239;
        /* Azul Profundo */
        --color-secundario: #149DF2;
        /* Cian Energético */
        --color-texto: #333333;
        /* Gris Oscuro */
        --color-acento: #FF6B6B;
        /* Naranja Coral */
        --color-fondo: #F7F9FA;
        /* Blanco Roto */

        /* Tipografías */
        --fuente-titulos: 'Montserrat', sans-serif;
        --fuente-texto: 'Lato', sans-serif;
    }

    body {
        background-color: var(--color-fondo);
        color: var(--color-texto);
        font-family: var(--fuente-texto);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--fuente-titulos);
        color: var(--color-primario);
        font-weight: 700;
    }


    /* 3. ESTILOS PARA BOTONES DE ELEMENTOR
--------------------------------------------- */

    .elementor-button {
        background-color: var(--color-secundario) !important;
        color: #fff !important;
        border-radius: 8px !important;
        font-family: var(--fuente-titulos) !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 15px rgba(20, 157, 242, 0.3);
    }

    .elementor-button:hover {
        background-color: var(--color-primario) !important;
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(10, 34, 57, 0.4);
    }


    /* 4. EFECTO GLASSMORPHISM PARA TARJETAS (ElementsKit)
--------------------------------------------- */

    /* Aplicamos el efecto solo si la sección tiene un fondo oscuro o de imagen */
    .elementor-section.elementor-section-stretched[data-settings*="background_background"] .ekit-wid-con .profile-card,
    .elementor-section.elementor-section-stretched[data-settings*="background_background"] .ekit-wid-con .profile-image-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 15px;
        transition: all 0.3s ease;
        padding: 20px;
        /* Añadimos un poco de espacio interno */
    }

    .elementor-section.elementor-section-stretched[data-settings*="background_background"] .ekit-wid-con .profile-card:hover,
    .elementor-section.elementor-section-stretched[data-settings*="background_background"] .ekit-wid-con .profile-image-card:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-5px);
        box-shadow: 0 8px 32px 0 rgba(0, 26, 51, 0.37);
    }

    /* Ajustes de texto dentro de las tarjetas para mejorar la legibilidad */
    .elementor-section.elementor-section-stretched[data-settings*="background_background"] .ekit-wid-con .profile-card .team-member-name,
    .elementor-section.elementor-section-stretched[data-settings*="background_background"] .ekit-wid-con .profile-card .team-member-position {
        color: #fff;
        /* Hacemos el texto blanco para que contraste con fondos oscuros */
    }

    /* --- 5. GESTIÓN DINÁMICA DEL CALENDARIO DE EVENTOS --- */

    /*
 * FORZAR ALTURA AUTOMÁTICA:
 * Anulamos la altura fija que el JavaScript del plugin inyecta.
 * 'height: auto' permite que el contenedor crezca y se encoja
 * según la cantidad de eventos que contenga.
 * Usamos !important para ganar la batalla contra el estilo en línea.
*/
    .eael-event-calendar-wrapper {
        height: auto !important;
        min-height: 300px !important;
        /* Opcional: una altura mínima para que no se vea demasiado pequeño si solo hay un evento */
    }

    /*
 * OCULTAR SI ESTÁ VACÍO:
 * Esta parte ya la teníamos. Oculta la sección completa si el
 * calendario está vacío o si muestra un mensaje de "no hay eventos".
*/
    section:has(.eael-event-calendar-wrapper:empty) {
        display: none !important;
    }

    section:has(.eael-no-events-found) {
        display: none !important;
    }

    /* --- 6. CORRECCIÓN DE IMÁGENES DE EVENTOS EN MÓVIL (SOLUCIÓN DEFINITIVA) --- */

    /*
 * Anula la regla 'max-height: 60px !important;' incrustada en la página de eventos
 * que deforma las imágenes en dispositivos móviles.
 *
 * Usamos un selector extremadamente específico y !important para asegurar que
 * nuestra regla tenga la máxima prioridad y las imágenes se muestren correctamente.
*/
    @media (max-width: 767px) {
        .tribe-events-calendar-list__event-featured-image-wrapper img {
            max-height: none !important;
            /* Elimina la restricción de altura máxima */
            height: auto !important;
            /* Asegura que la altura se ajuste automáticamente */
            width: 100% !important;
            /* Asegura que la imagen ocupe todo el ancho disponible */
            object-fit: cover !important;
            /* Asegura que la imagen cubra el área sin deformarse, recortando si es necesario */
        }
    }