/*
 Theme Name:   Ecoparque de Trasmiera
 Description:  Tema personalizado del Ecoparque de Trasmiera
 Template:     kadence
 Version:      1.0.0.17
*/

.reserva-icon {
    color: white!important;
    background: #FF9800;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid #FF9800;
    
    /* ANIMACIÓN MÁSTER: Suaviza todos los cambios de estado (fondo, borde, color) */
    transition: all 0.3s ease-in-out!important; 
}

.reserva-icon a {
    color: black!important;
    /* Transición interna para las letras y el icono SVG */
    transition: color 0.3s ease-in-out!important; 
}

.reserva-icon .dashicons, 
.reserva-icon i {
    margin-right: 6px;
    vertical-align: middle;
}

/* Inyección de Icono SVG Vectorial: Entrada de Evento Clásica */
.reserva-icon a::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    
    /* Filtro para suavizar el cambio de color del SVG en sincronía */
    transition: filter 0.3s ease-in-out!important; 
}

/* --- ESTADO HOVER ANIMADO --- */
.reserva-icon:hover {
    background: transparent;
    border: 2px solid black; /* Mantenemos el marco naranja para que tenga un look outline limpio */
}

/* Al pasar el ratón, cambiamos las letras a naranja para mantener el contraste corporativo */
.reserva-icon:hover a {
    color: black!important; 
}

/* El truco del almendruco: Invertimos el icono SVG a naranja de forma matemática con CSS */
.reserva-icon:hover a::before {
    filter: invert(59%) sepia(93%) saturate(1412%) x(14deg) brightness(102%) contrast(101%);
}
/* ==========================================================================
   1. COLORES CORPORATIVOS PARA EL REPRODUCTOR PLYR
   ========================================================================== */
:root {
    --eco-bosque: #0a2010;
    --eco-verde: #2d6a20;
    --eco-verde-vivo: #4a9e38;
    
    /* Sobrescribimos las variables nativas de Plyr */
    --plyr-color-main: var(--eco-verde-vivo); /* Color del botón central, barra de progreso y volumen */
}

/* Cambio de color cuando pasas el ratón por encima (Hover) en los controles */
.plyr--video .plyr__control:hover {
    background: var(--eco-verde) !important;
    color: #ffffff !important;
}

/* Asegurar que el botón gigante central reaccione con tu verde corporativo */
.plyr__control--overlaid {
    background: var(--eco-verde-vivo) !important;
}

.plyr__control--overlaid:hover {
    background: var(--eco-verde) !important;
}

/* ==========================================================================
   2. DISEÑO DE TARJETAS (Aplicado a la columna que contiene tus clases)
   ========================================================================== */

/* Convertimos la propia columna de Gutenberg en la tarjeta blanca */
.wp-block-column:has(.webcam-fija-contenedor) {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 0 16px 0 !important; /* Margen de cortesía inferior de la tarjeta */
    box-sizing: border-box !important;
}

/* El contenedor del vídeo se queda limpio arriba ocupando todo el ancho */
.webcam-fija-contenedor {
    width: 100% !important;
    position: relative !important;
    aspect-ratio: 16 / 9 !important;
    background-color: #0c0c0c !important;
    margin: 0 0 16px 0 !important; /* Espacio exacto entre el vídeo y el primer div (.webcam-lugar) */
}

.webcam-fija-contenedor video,
.webcam-fija-contenedor .plyr {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* =========================================================================
   FORZADO DE CAPAS: WEBCAMS POR ENCIMA DE TODO EN PANTALLA COMPLETA
   ========================================================================= */

/* 1. Cuando el contenedor de Plyr entra en pantalla completa, revienta cualquier z-index del tema */
.plyr--fullscreen,
.plyr:fullscreen,
.plyr:-webkit-full-screen {
    z-index: 9999999999 !important; /* Capa máxima absoluta */
    position: fixed !important;
    inset: 0 !important;
    background: #000000 !important;
}

/* 2. Forzamos a que el elemento nativo de vídeo ignore los márgenes del tema hijo */
.plyr--fullscreen video,
.plyr:fullscreen video {
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
    object-fit: contain !important; /* Muestra el vídeo completo sin recortar las esquinas */
}

/* 3. Aseguramos que los controles del reproductor (play, volumen) queden también arriba */
.plyr--fullscreen .plyr__controls,
.plyr:fullscreen .plyr__controls {
    z-index: 2147483647 !important;
}

/* 4. Parche específico para navegadores iOS (Safari en iPhone) */
:-webkit-full-screen-ancestor {
    z-index: auto !important; /* Evita que los contenedores padres de Kadence bloqueen el vídeo */
    will-change: transform !important;
}

/* =========================================================================
   PARCHE MAESTRO PARA WEBCAMS EN IPHONE (IOS / SAFARI)
   ========================================================================= */

/* Obliga al contenedor padre de la tarjeta a no indexar transformaciones que rompan el fullscreen de iOS */
.eco-tarjeta-recinto,
.eco-video-container-lista {
    -webkit-transform: none !important;
    transform: none !important;
    perspective: none !important;
    -webkit-perspective: none !important;
}

/* Fallback elástico: Si se queda enganchado en modo alternativo, salta al frente de la pantalla */
.plyr--fullscreen-fallback {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important; /* Capa por encima del menú de Kadence */
    background: #000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.plyr--fullscreen-fallback video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* ==========================================================================
   3. ESTILOS UNIFICADOS PARA TUS TEXTOS (.webcam-lugar y .webcam-localizacion)
   ========================================================================= */
.webcam-localizacion {
    font-size: 10px !important;
    gap: 0.25em !important;
    display: flex;
}

/* ==========================================================================
   4. CONFIGURACIÓN DEL BADGE "EN DIRECTO"
   ========================================================================= */
.badge-en-vivo {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    background-color: #e53e3e !important; /* Rojo de alerta para destacar el directo */
    color: #ffffff !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: bold !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    pointer-events: none !important;
}

.badge-en-vivo.oculto {
    display: none !important;
}

.punto-parpadeo {
    width: 6px !important;
    height: 6px !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    display: inline-block !important;
    animation: parpadeoEcoparque 1.5s infinite !important;
}

@keyframes parpadeoEcoparque {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}

/* ==========================================================================
   6. SEPARADORES EN EL MENÚ LEGAL (.menu-privacidad)
   ========================================================================= */

/* Alineamos los elementos del menú en horizontal y al centro */
.menu-privacidad .wp-block-navigation-item {
    display: inline-flex !important;
    align-items: center !important;
}

/* Inyectamos el punto medio automáticamente entre las opciones */
.menu-privacidad .wp-block-navigation-item:not(:last-child)::after {
    content: "·" !important;      /* El punto medio */
    margin: 0 12px !important;    /* Espaciado horizontal a los lados del punto */
    color: #718096 !important;    /* El mismo color gris suave que tus textos legales */
    font-weight: 700 !important;  /* Le damos cuerpo al punto */
    font-size: 14px !important;   /* Tamaño del punto */
    user-select: none !important; /* Evita que el usuario seleccione el punto al arrastrar el ratón */
}

/* Estilo para los enlaces dentro de tu menú personalizado */
.menu-privacidad .wp-block-navigation-item a {
    color: white !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

/* Efecto hover con tu verde corporativo */
.menu-privacidad .wp-block-navigation-item a:hover {
    color: #4a9e38 !important; /* Tu verde vivo */
}

/* ==========================================================================
   7. Footer
   ========================================================================= */

.site-footer-row-container-inner .site-container .site-top-footer-inner-wrap {
    padding: 0;
}

.site-footer-row-container-inner .site-container {
    padding: 0;
}

/* 1. Limpieza de puntos y alineación a la izquierda en los menús de listas */
.site-footer .menu-inferior-paginas {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
}

.site-footer .menu-inferior-paginas li {
    list-style-type: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.site-footer .menu-mail a {
    color: white !important;
}

.site-footer .menu-mail a:hover {
    color: #4a9e38 !important; /* Tu verde vivo al pasar el ratón */
}

/* 2. Padding lateral global para que las columnas no peguen a los bordes */
.site-footer .wp-block-columns {
    padding-left: 15% !important;
    padding-right: 15% !important;
    box-sizing: border-box !important;
}

/* 3. Ajuste fino del copyright a la izquierda */
.site-footer .wp-block-column div[style*="color: white;"] {
    text-align: left !important;
}

/* 4. Margen a la derecha para el menú de privacidad y sus enlaces */
.menu-privacidad {
    margin-right: 2em !important;
}

/* 5. Estilo de los puntos separadores en el menú (.menu-privacidad) */
.menu-privacidad .wp-block-navigation-item {
    display: inline-flex !important;
    align-items: center !important;
}

.menu-privacidad .wp-block-navigation-item:not(:last-child)::after {
    content: "·" !important;
    margin: 0 10px !important;
    color: #718096 !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

/* 6. Corrección de color suave para los enlaces del menú legal (Gris de la foto) */
.menu-privacidad .wp-block-navigation-item a {
    color: white !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.menu-privacidad .wp-block-navigation-item a:hover {
    color: #4a9e38 !important; /* Tu verde vivo al pasar el ratón */
}

/* ============================================================
FONDOS INFINITOS EN PAGINAS ENCAJONADAS
   ============================================================ */
.fondo-extendido-pantalla {
    position: relative;
    z-index: 1;
}

.fondo-extendido-pantalla::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    /* Este cálculo estira el fondo al 100% del monitor */
    left: calc(-50vw + 50%);
    right: calc(-50vw + 50%);
    width: 100vw;
    /* Hereda automáticamente el color de fondo que le pongas al bloque */
    background-color: inherit; 
    z-index: -1;
}

/* =========================================================================
   ESTILOS PREMIUM PARA EL MAPA INTERACTIVO
   ========================================================================= */
.eco-popup-premium .leaflet-popup-content-wrapper {
    border-radius: var(--eco-radio-sm) !important; /* Redondeado de 10px */
    border: 1px solid var(--eco-borde);
    box-shadow: var(--eco-sombra);
    padding: 6px;
}
.eco-popup-premium .leaflet-popup-tip {
    background: #ffffff;
    border: 1px solid var(--eco-borde);
}

/* =========================================================================
   CONTROL DE VISIBILIDAD DEL MAPA INTERACTIVO (Fiel a la estructura Kadence)
   ========================================================================= */

/* Comportamiento estándar en pantallas de escritorio */
#alternar-mapa {
    display: block;
}

@media (max-width: 767px) {
    /* En móvil forzamos que permanezca oculto de inicio */
    #alternar-mapa {
        display: none !important;
        height: 400px !important;
        margin: 20px 0 !important;
        border-radius: 12px !important;
        width: 100% !important;
    }
    
    /* Se despliega en el momento exacto en que JavaScript añade la clase activa */
    #alternar-mapa.mapa-visible-activo {
        display: block !important;
    }
}

/* Limpieza de fondos del contenedor vectorial */
.eco-marcador-limpio {
    background: transparent !important;
    border: none !important;
}

/* =========================================================================
    (.menu-footer)
   ========================================================================= */

/* 1. Evitamos que el contenedor obligue a los enlaces a estirarse a lo ancho */
.menu-footer .kb-navigation .kb-link-wrap {
    display: block !important;
    position: relative !important;
    text-align: left !important;
    width: auto !important;
}

/* 2. Forzamos al enlace a medir ÚNICAMENTE lo que mide su texto */
.menu-footer .kb-navigation a.kb-nav-link-content,
.menu-privacidad a.wp-block-navigation-item__content {
    position: relative !important;
    text-decoration: none !important;
    padding-bottom: 4px !important;
    display: inline-block !important; /* Ajuste estricto al ancho de las letras */
    width: auto !important;
    transition: color 0.3s ease !important;
}

/* 3. Creamos la línea invisible oculta en el centro exacto del texto */
.menu-footer .kb-navigation a.kb-nav-link-content::after,
.menu-privacidad a.wp-block-navigation-item__content::after {
    content: '' !important;
    position: absolute !important;
    width: 100% !important;              /* Mide el 100% del enlace (que ahora es solo el texto) */
    height: 1.5px !important;            /* Grosor sutil */
    bottom: 0 !important;
    left: 0 !important;
    background-color: #ffffff !important; /* Línea blanca */
    transform: scaleX(0) !important;      /* Encogida en el centro */
    transform-origin: bottom center !important;
    transition: transform 0.3s ease-out !important; /* Curva de suavizado */
}

/* 4. Al pasar el ratón (Hover), la línea se expande cubriendo solo la palabra */
.menu-footer .kb-navigation a.kb-nav-link-content:hover::after,
.menu-privacidad a.wp-block-navigation-item__content:hover::after {
    transform: scaleX(1) !important;
}

/* 5. Destello sutil en el texto al pasar el ratón */
.menu-footer .kb-navigation a.kb-nav-link-content:hover,
.menu-privacidad a.wp-block-navigation-item__content:hover {
    opacity: 0.9 !important;
}

/* Este código SOLO se ejecutará en pantallas de escritorio (a partir de 1025px de ancho) */
@media screen and (min-width: 1025px) {
    
    /* 1. Pasamos el menú a horizontal solo en escritorio */
    .wp-block-kadence-navigation.menu-cookies .kb-navigation.menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    /* 2. Comportamiento en línea para los ítems */
    .wp-block-kadence-navigation.menu-cookies .menu-item {
        display: inline-block !important;
        position: relative !important;
        padding: 0 10px !important;
        margin: 0 !important;
    }

    /* 3. Ajuste del margen del primer elemento */
    .wp-block-kadence-navigation.menu-cookies .menu-item:first-child {
        padding-left: 0 !important;
    }

    /* 4. Pintamos el puntito separador solo en escritorio */
    .wp-block-kadence-navigation.menu-cookies .menu-item:not(:last-child)::after {
        content: "·" !important;
        position: absolute !important;
        right: -3px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #888 !important;
        font-weight: bold !important;
        font-size: 14px !important;
        display: block !important;
    }
}

/* =========================================================================
   SOLUCIÓN AL ORDEN DE CAPAS: HEADER SIEMPRE ARRIBA Y POPUPS VISIBLES
   ========================================================================= */

/* 1. Forzamos a la cabecera fija de Kadence a volar por encima de cualquier mapa */
.site-header-row-container-inner.site-sticky-header-inner-wrap,
.sticky-header-container,
#masthead,
.site-header {
    z-index: 99999 !important; /* Valor máximo para blindar el menú superior */
    position: relative !important;
}

/* 2. Reseteamos el mapa a su comportamiento nativo para que Leaflet autogestione sus capas */
#eco-seccion-webcams-unificada.eco-wrapper-hibrido .leaflet-container,
#eco-mapa-webcams-canvas {
    z-index: 10 !important; /* Valor estándar seguro */
}

/* 3. Aseguramos que las capas de los popups internos no queden bloqueadas */
#eco-mapa-webcams-canvas .leaflet-pane {
    z-index: 400 !important;
}
#eco-mapa-webcams-canvas .leaflet-popup-pane {
    z-index: 700 !important;
}

/* =========================================================================
   FORZAR DISEÑO DE BOTONES DE WEBCAMS (IGUAL A LA PORTADA)
   ========================================================================= */
#eco-seccion-webcams-unificada.eco-wrapper-hibrido .eco-tabs-conmutador {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-bottom: 30px !important;
    margin-top: 20px !important;
}

#eco-seccion-webcams-unificada.eco-wrapper-hibrido .eco-tabs-conmutador .eco-tab-btn {
    background: #f4f6f3 !important;
    color: #6b7a66 !important;
    border: 1px solid #dcdfdc !important;
    border-radius: 30px !important;
    padding: 12px 26px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

#eco-seccion-webcams-unificada.eco-wrapper-hibrido .eco-tabs-conmutador .eco-tab-btn:hover {
    background: #e8ebe6 !important;
    color: #1a2e16 !important;
}

#eco-seccion-webcams-unificada.eco-wrapper-hibrido .eco-tabs-conmutador .eco-tab-btn.eco-activa {
    background: #1a2e16 !important;
    color: #ffffff !important;
    border-color: #1a2e16 !important;
    box-shadow: 0 4px 12px rgba(26,46,22,0.15) !important;
}

/* =========================================================================
   FORZAR DISEÑO DE TARJETAS EN LA LISTA: 2 COLUMNAS AMPLIAS EQUILIBRADAS
   ========================================================================= */
#eco-seccion-webcams-unificada.eco-wrapper-hibrido #eco-webcams-render-lista.eco-grid-recintos {
    display: grid !important;
    /* Al elevar el mínimo a 480px, las dos tarjetas se ensanchan ocupando simétricamente el 100% en escritorios */
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)) !important;
    gap: 28px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
}

#eco-seccion-webcams-unificada.eco-wrapper-hibrido .eco-grid-recintos .eco-tarjeta-recinto {
    background: #ffffff !important;
    border: 1px solid #e2e6e1 !important; 
    border-radius: 14px !important;      
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(10,32,16,0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important; 
    margin: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#eco-seccion-webcams-unificada.eco-wrapper-hibrido .eco-grid-recintos .eco-tarjeta-recinto:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 26px rgba(10,32,16,0.06) !important;
}

#eco-seccion-webcams-unificada.eco-wrapper-hibrido .eco-grid-recintos .eco-video-container-lista {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    background: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#eco-seccion-webcams-unificada.eco-wrapper-hibrido .eco-grid-recintos .eco-tarjeta-cuerpo {
    padding: 22px !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex-grow: 1 !important;
    border-top: none !important;
}

/* =========================================================================
   REDISEÑO DE CABECERA: AISLAMIENTO DE REGLAS ANTI-ROTURAS EN EL MAPA
   ========================================================================= */

/* Forzamos a la cabecera a alinear el título y los datos al extremo derecho */
#eco-seccion-webcams-unificada.eco-wrapper-hibrido .eco-grid-recintos .eco-tarjeta-cabecera-flex {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 12px !important;
    min-height: 40px !important;
    margin-bottom: 0 !important;
}

/* El título de las TARJETAS DE LA LISTA se queda estricto en una sola línea */
#eco-seccion-webcams-unificada.eco-wrapper-hibrido .eco-grid-recintos .eco-tarjeta-titulo {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a2e16 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap !important; /* Mantiene la simetría en la lista */
}

/* SOLUCIÓN MAPA: El título DENTRO del globo popup del mapa hereda comportamiento fluido */
.eco-popup-webcam-box .eco-popup-webcam-header .eco-popup-webcam-titulo,
.leaflet-popup-content h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a2e16 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    white-space: normal !important; /* CORRECCIÓN: Evita que el título se rompa letra a letra en móvil */
    display: block !important;
    width: auto !important;
}

/* Contenedor del clima alineado a la derecha */
.eco-popup-clima-info {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    flex-wrap: wrap !important;
}

/* Enlaces limpios para las pastillas */
.eco-clima-link-pildora {
    text-decoration: none !important;
    display: inline-flex !important;
}

/* Forzado de simetría exacta con Skeletons nativos de carga integrados */
.eco-popup-clima-info .eco-clima-flex-render {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: #f4f6f3 !important;
    padding: 0 12px !important; 
    border-radius: 20px !important;
    border: 1px solid #e8ebe6 !important;
    height: 32px !important;
    box-sizing: border-box !important;
}

/* Píldora del mar */
.eco-popup-clima-info .eco-mar-pildora {
    background: #e0f2fe !important;
    border: 1px solid #bae6fd !important;
}

.eco-popup-clima-info .eco-mar-pildora span {
    color: #0369a1 !important;
}

/* Iconos climáticos e inyección visible */
.eco-popup-clima-info .eco-clima-flex-render .eco-svg-clima,
.eco-popup-clima-info .eco-clima-flex-render .eco-svg-mar-wave {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.eco-svg-mar-wave {
    stroke: #0284c7 !important;
}

/* =========================================================================
   ELIMINACIÓN DE HUECOS BLANCOS (CORRECCIÓN INTEGRAL DE INTERIOR)
   ========================================================================= */

/* Caja contenedora marina elástica */
.eco-bloque-marino {
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important; /* Pulveriza los altos mínimos rígidos antiguos heredados del PHP */
    box-sizing: border-box !important;
}

/* Borrado definitivo del divisor y hueco si es de interior */
.eco-bloque-marino.oculto-limpio {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Estilo para las playas que sí renderizan la marea unificada con divisor dinámico */
.eco-marino-link-wrap {
    text-decoration: none !important;
    width: 100% !important;
    display: block !important;
    margin-top: 14px !important; /* Distancia perfecta entre el título y la marea */
    padding-top: 14px !important;
    border-top: 1px dashed #e2e6e1 !important; 
}

.eco-marino-pildora-unica {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: #f0f7f9 !important;
    padding: 10px 18px !important;
    border-radius: 30px !important;
    border: 1px solid #e0edf1 !important;
    width: 100% !important;
    height: 45px !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

.eco-marino-seccion {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.eco-marino-separador {
    width: 1px !important;
    height: 18px !important;
    background: #ccdce0 !important;
    display: block !important;
}

.eco-marino-meta {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.1 !important;
}

.eco-marino-label {
    font-size: 9px !important;
    text-transform: uppercase !important;
    color: #6b7a66 !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

.eco-marino-valor {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1a2e16 !important;
}

/* =========================================================================
   PULIDO FINAL: CORRECCIÓN DE BORDES INTERNOS EN REPRODUCTORES PLYR
   ========================================================================= */

/* Forzamos el redondeado total del reproductor Plyr en tarjetas y popups */
.eco-popup-video-container,
.eco-popup-video-container .plyr,
.eco-popup-video-container .plyr__video-wrapper,
.eco-popup-video-container video,
.eco-video-container-lista,
.eco-video-container-lista .plyr,
.eco-video-container-lista .plyr__video-wrapper,
.eco-video-container-lista video {
    border-radius: 12px !important;
    overflow: hidden !important; /* Corta radicalmente el streaming */
    mask-image: -webkit-radial-gradient(white, black) !important; /* Fix estricto para Safari e iOS */
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
}

/* Evitamos que el contenedor de controles pinte esquinas cuadradas en negro de fondo */
.plyr--video {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Eliminamos la línea gris intermedia debajo del título en el popup */
.eco-popup-webcam-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 14px !important;
}

/* REMOCIÓN ABSOLUTA: Fulminamos la barra inferior del botón de pantalla completa en toda la web */
#eco-seccion-webcams-unificada .eco-bloque-pie-tarjeta {
    display: none !important;
    height: 0px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* =========================================================================
   ADAPTACIÓN RESPONSIVE PREMIUM: MÁS AIRE EN MÓVILES (image_951b5e.png)
   ========================================================================= */
@media (max-width: 1024px) {
    #eco-seccion-webcams-unificada.eco-wrapper-hibrido #eco-webcams-render-lista.eco-grid-recintos {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    /* Forzamos una columna limpia aprovechando el espacio lateral */
    #eco-seccion-webcams-unificada.eco-wrapper-hibrido #eco-webcams-render-lista.eco-grid-recintos {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Reducimos el acolchado de la tarjeta para que los textos respiren y tengan más espacio de ancho */
    #eco-seccion-webcams-unificada .eco-tarjeta-cuerpo {
        padding: 16px !important;
    }

    /* SOLUCIÓN AL AGOBIO CABECERA: Permitimos que el título y el clima se organicen de forma fluida */
    #eco-seccion-webcams-unificada.eco-wrapper-hibrido .eco-grid-recintos .eco-tarjeta-cabecera-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    /* El título de la playa ya no se comprime, ahora ocupa su espacio natural libre */
    #eco-seccion-webcams-unificada.eco-wrapper-hibrido .eco-grid-recintos .eco-tarjeta-titulo {
        font-size: 20px !important;
        white-space: normal !important; /* Deja que el título use dos líneas si la pantalla es muy estrecha */
        width: 100% !important;
    }

    /* Las píldoras de temperatura se alinean limpias a la izquierda debajo del título */
    .eco-popup-clima-info {
        justify-content: flex-start !important;
        width: 100% !important;
        gap: 8px !important;
    }

    /* SOLUCIÓN CAJA MARINA: Rompemos la estructura rígida horizontal para que no se estrujen las letras */
    .eco-marino-pildora-unica {
        flex-direction: column !important;
        gap: 12px !important;
        border-radius: 12px !important;
        align-items: flex-start !important;
        padding: 14px !important;
        height: auto !important; /* Libera el alto fijo para que quepa todo el texto holgadamente */
    }

    /* Ocultamos las líneas verticales divisorias porque ahora el diseño va en filas */
    .eco-marino-separador {
        display: none !important;
    }

    /* Espaciado de cortesía para el mapa en pantallas pequeñas */
    #eco-mapa-webcams-canvas {
        height: 440px !important;
    }
}

/* =========================================================================
   ANIMACIONES MODERNAS PARA LOS ICONOS DEL TIEMPO Y MAREAS
   ========================================================================= */

/* 1. Animación del Sol (Giro infinito centrado y suave) */
.anim-sol {
    transform-origin: center center !important;
    transform-box: fill-box !important;
    animation: ecoGirarSolPerfecto 20s linear infinite !important;
}
@keyframes ecoGirarSolPerfecto {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 2. Animación de las Nubes (Efecto flotante arriba/abajo centrado) */
.anim-nube, .anim-nube-oscura {
    transform-origin: center center !important;
    animation: ecoFlotarNubePerfecta 4s ease-in-out infinite !important;
}
@keyframes ecoFlotarNubePerfecta {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* 3. Animación de la Lluvia (Gotas en cascada desacompasada) */
.anim-gota {
    animation: ecoCaerGotaPerfecta 1.2s linear infinite !important;
}
.anim-gota.g1 { animation-delay: 0s; }
.anim-gota.g2 { animation-delay: 0.4s; }
.anim-gota.g3 { animation-delay: 0.8s; }

@keyframes ecoCaerGotaPerfecta {
    0% { opacity: 0; transform: translateY(-2px); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateY(4px); }
}

/* 4. Animación del Rayo de Tormenta */
.anim-rayo {
    animation: ecoParpadeoRayo 2.5s ease-in-out infinite !important;
}
@keyframes ecoParpadeoRayo {
    0%, 90%, 94%, 98%, 100% { opacity: 0; }
    92%, 96% { opacity: 1; }
}

/* 5. Animación de la Luna Nocturna (Balanceo suave) */
.anim-luna {
    transform-origin: center center !important;
    animation: ecoBalanceoluna 6s ease-in-out infinite !important;
}
@keyframes ecoBalanceoluna {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(6deg); }
}

/* 6. Animación de las líneas de Niebla (Efecto de viento de costa) */
.anim-niebla {
    animation: ecoVientoNiebla 3s ease-in-out infinite !important;
}
.anim-niebla.l1 { animation-delay: 0s; }
.anim-niebla.l2 { animation-delay: 0.5s; }
.anim-niebla.l3 { animation-delay: 1s; }

@keyframes ecoVientoNiebla {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}

/* 7. Flecha de marea subiendo (Pleamar) */
.eco-svg-marea-anim-up {
    width: 20px !important;
    height: 20px !important;
    animation: ecoMareaSubiendo 1.6s ease-in-out infinite !important;
}
@keyframes ecoMareaSubiendo {
    0%, 100% { transform: translateY(1px); }
    50% { transform: translateY(-3px); }
}

/* 8. Flecha de marea bajando (Bajamar) */
.eco-svg-marea-anim-down {
    width: 20px !important;
    height: 20px !important;
    animation: ecoMareaBajando 1.6s ease-in-out infinite !important;
}
@keyframes ecoMareaBajando {
    0%, 100% { transform: translateY(-1px); }
    50% { transform: translateY(3px); }
}

/* 9. Mar Calma (Ondulación sutil horizontal) */
.anim-ola-calma {
    animation: ecoOlaCalma 2.5s ease-in-out infinite !important;
}
@keyframes ecoOlaCalma {
    0%, 100% { transform: translateX(0) scaleY(1); }
    50% { transform: translateX(2px) scaleY(0.95); }
}

/* 10. Mar Rizada/Fuerte (Efecto oleaje de marejada picada) */
.anim-ola-fuerte {
    animation: ecoOlaFuerte 1.4s ease-in-out infinite !important;
}
@keyframes ecoOlaFuerte {
    0%, 100% { transform: translateY(1px) scale(1); }
    50% { transform: translateY(-2px) scale(1.04); }
}

/* =========================================================================
   CORRECCIÓN DEFINITIVA DE DISEÑO PARA LA HORA DE LA MAREA (image_97eb32)
   ========================================================================= */

/* Forzamos que la hora iguale exactamente el tamaño, grosor y color de los otros valores */
.eco-marino-meta .eco-marino-hora-valor {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1a2e16 !important;
    line-height: 1.1 !important;
}

/* El texto aclaratorio inferior entre paréntesis en un gris sutil y limpio */
.eco-marino-meta .eco-marino-label-sub {
    font-size: 9px !important;
    color: #6b7a66 !important;
    font-weight: 600 !important;
    margin-top: 2px !important;
    display: block !important;
    text-transform: none !important;
}

/* =========================================================================
   OCULTAR EL MAPA Y LOS BOTONES CONMUTADORES SOLO EN LA PORTADA
   ========================================================================= */

/* Ocultamos los botones de "Ver Mapa / Ver Lista" en la página principal */
.home #eco-seccion-webcams-unificada .eco-tabs-conmutador,
.front-page #eco-seccion-webcams-unificada .eco-tabs-conmutador {
    display: none !important;
}

/* Forzamos a que en la portada la vista de mapa nunca se muestre */
.home #eco-webcam-vista-mapa,
.front-page #eco-webcam-vista-mapa {
    display: none !important;
}

/* Forzamos a que en la portada la vista de lista esté siempre activa y visible */
.home #eco-webcam-vista-lista,
.front-page #eco-webcam-vista-lista {
    display: block !important;
}

/* =========================================================================
   OPTIMIZACIÓN DE MÁRGENES EN MÓVIL PARA PÁGINAS INTERNAS (RUTAS, PLAYAS...)
   ========================================================================= */
@media (max-width: 767px) {
    /* Eliminamos cualquier restricción global que cause el borde blanco lateral */
    .single-page .site-container,
    .page .site-container,
    #inner-wrap,
    .site-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Forzamos a que solo el contenido de texto de las páginas respire con margen de cortesía */
    .page .entry-content > .wp-block-group,
    .page .entry-content > p,
    .page .entry-content > h2,
    .page .entry-content > h3,
    .inner-page-wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* Si las filas de Kadence o secciones completas se quedaban estrechas, las liberamos */
    .kb-row-layout-wrap, 
    .kt-row-column-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* =========================================================================
   FORZADO DE MÁRGENES EN MÓVIL (LOGOTIPO + CALENDARIO DE PORTADA)
   ========================================================================= */
@media (max-width: 767px) {
    
    /* 1. SEPARACIÓN DEL LOGO: Forzamos el margen directo sobre la imagen */
    .site-branding a img,
    .navbar-branding a img {
        margin-left: 16px !important;
    }
    
    /* Equilibramos el botón del menú hamburguesa en el extremo derecho */
    .mobile-toggle-open-container,
    .mobile-navigation-toggle {
        margin-right: 16px !important;
    }

    /* 2. SEPARACIÓN DEL CALENDARIO: Neutralizamos el estiramiento 'Edge-to-Edge' en el shortcode */
    .home #eco-ancla-seccion-mapa,
    .home .eco-wrapper-hibrido,
    .home #eco-cal {
        box-sizing: border-box !important;
    }

    /* 3. SEPARACIÓN DE LA LISTA DE EVENTOS: Forzamos las tarjetas que van debajo del calendario */
    .home #eco-grid-tarjetas-contenedor,
    .home .eco-grid-recintos,
    .home #eco-webcams-render-lista {
        width: calc(100% - 32px) !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
        box-sizing: border-box !important;
    }
    
    /* Pequeño ajuste para que las tarjetas interiores no se desborden por el cálculo anterior */
    .home .eco-tarjeta-recinto {
        width: 100% !important;
    }
    
    /* Atacamos las listas de eventos que van debajo del calendario */
    .home [id*="tribe-events"],
    .home .tribe-events-loop,
    .home .eco-lista-eventos,
    .home .ecs-event-list {
        width: calc(100% - 32px) !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* Atacamos las pastillas blancas individuales de eventos y recintos que se ven en la captura */
    .home .tribe-events-calendar-list__event-row,
    .home .eco-tarjeta-evento-mini,
    .home .eco-fila-recinto-pase,
    .home .entry-content > .wp-block-group:has(.eco-tarjeta-titulo),
    .home div:has(> .eco-tarjeta-titulo) {
        width: calc(100% - 32px) !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* Forzamos el botón verde de "Ver todos los eventos" para que mantenga las proporciones */
    .home .entry-content a[href*="eventos"],
    .home .eco-btn-ver-mas-eventos {
        margin-left: auto !important;
        margin-right: auto !important;
        display: table !important;
    }
}

/* =========================================================================
   FORZADO TOTAL DE COLOR PARA LOS PUNTOS DEL CALENDARIO (REFINADO MASTER)
   ========================================================================= */

/* Atacamos de forma ultra-específica a los mini-círculos de categoría y etiquetas cortando los contenedores invisibles */
.home td .tribe-events-calendar-month__calendar-event-dot,
.home td [class*="dot"],
.home td [class*="etiqueta"],
.home td span[class*="ecs-cat-"],
[id*="eco-"] td .tribe-events-calendar-month__calendar-event-dot,
[id*="eco-"] td span[class*="ecs-cat-"],
.tribe-events-calendar-grid td span[class*="cat-"] {
    background-color: #ff9800 !important;
    background: #ff9800 !important;
    border-color: #ff9800 !important;
    border-top-color: #ff9800 !important;
    color: #ff9800 !important;
}

/* Forzamos a que las celdas del calendario que tienen categorías asignadas inyecten el pseudo-elemento en naranja */
.home td[class*="category"]::after,
.home td[class*="category"]::before,
[id*="eco-"] td[class*="category"]::after {
    background: #ff9800 !important;
    background-color: #ff9800 !important;
    border-color: #ff9800 !important;
}

/* Aseguramos que los elementos "span" que actúan exclusivamente como bolitas adopten el color sin pintar la celda entera */
.home .tribe-events-calendar-grid td span.ecs-categoria-etiqueta,
#eco-cal td span.ecs-categoria-etiqueta {
    background-color: #ff9800 !important;
    display: inline-block !important;
}

/* =========================================================================
   UNIFICACIÓN DE DISEÑO: CALENDARIO INTERIOR IDÉNTICO AL DE PORTADA EN MÓVIL
   ========================================================================= */
@media (max-width: 767px) {
    /* Forzamos a la página interna de eventos a lucir la misma caja compacta verde */
    .post-type-archive-tribe_events .tribe-events-calendar-wrapper,
    .post-type-archive-tribe_events #eco-cal,
    .page-template-default #eco-cal,
    .post-type-archive-tribe_events .tribe-events-view {
        width: calc(100% - 32px) !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
        box-sizing: border-box !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.04) !important;
        background: #ffffff !important;
    }

    /* Forzamos la cabecera verde oscuro idéntica en el calendario interno */
    .post-type-archive-tribe_events .tribe-events-c-top-bar,
    .post-type-archive-tribe_events .tribe-events-calendar-month__header,
    .page-template-default .tribe-events-c-top-bar {
        background: #1a2e16 !important; /* Tu verde oscuro de portada */
        color: #ffffff !important;
        padding: 15px 10px !important;
    }

    /* Forzamos a que las letras de los días de la semana y flechas se vuelvan blancas en el interior */
    .post-type-archive-tribe_events .tribe-events-c-top-bar *, 
    .post-type-archive-tribe_events .tribe-events-calendar-month__header * {
        color: #ffffff !important;
    }

    /* Aseguramos que los puntos del calendario de la página interna también se claven en naranja */
    .post-type-archive-tribe_events td .tribe-events-calendar-month__calendar-event-dot,
    .post-type-archive-tribe_events td span[class*="cat-"] {
        background-color: #ff9800 !important;
        border-color: #ff9800 !important;
    }
	
    /* Centramos el contenedor de la lista de webcams */
    #eco-seccion-webcams-unificada.eco-wrapper-hibrido #eco-webcams-render-lista.eco-grid-recintos {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Nos aseguramos de que el wrapper padre no tenga padding asimétrico */
    #eco-seccion-webcams-unificada.eco-wrapper-hibrido {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =========================================================================
   UNIFICACIÓN DE TARJETAS DE NOTICIAS (ESTILO GRID PREMIUM)
   ========================================================================= */

/* Forzar la cuadrícula a usar las mismas proporciones de los recintos */
.blog .archive-container {
    max-width: 1200px !important;
    margin: 0 auto 40px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* Transformación radical de cada artículo de noticia */
.blog article.entry {
    background: #ffffff !important;
    border: 1px solid #e2e6e1 !important; 
    border-radius: 14px !important;      
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(10,32,16,0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

.blog article.entry:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 26px rgba(10,32,16,0.06) !important;
}

/* Caja de imagen idéntica a la sección interactiva */
.blog .post-thumbnail {
    margin: 0 !important;
    height: 195px !important;
    width: 100% !important;
    overflow: hidden !important;
}

.blog .post-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Contenido interno */
.blog .entry-content-wrap {
    padding: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    background: #ffffff !important;
}

/* Título de la noticia unificado */
.blog .entry-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a2e16 !important;
    line-height: 1.3 !important;
    margin: 0 0 12px 0 !important;
}

.blog .entry-title a {
    color: #1a2e16 !important;
    text-decoration: none !important;
}

/* Meta datos y extractos */
.blog .entry-meta {
    font-size: 11px !important;
    text-transform: uppercase !important;
    color: #6b7a66 !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.3px;
}

.blog .entry-summary {
    font-size: 13.5px !important;
    color: #5a6655 !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
}

/* Transformar el botón "LEER MÁS" en el botón verde corporativo */
.blog .more-link-wrap {
    margin-top: auto !important;
}

.blog a.more-link {
    width: 100% !important;
    text-align: center !important;
    padding: 11px 14px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    background: #7DBA00 !important; /* Tu verde info */
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: none !important;
    border: none !important;
    letter-spacing: normal !important;
    transition: background 0.2s ease !important;
}

.blog a.more-link:hover {
    background: #6aa000 !important;
}

/* Ocultar las flechas feas de texto duplicadas si las hubiera */
.blog a.more-link::after {
    display: none !important;
}

/* =========================================================================
   PAGINACIÓN PREMIUM UNIFICADA (ESTILO ECOPARQUE)
   ========================================================================= */

/* Contenedor de la paginación */
.navigation.pagination {
    display: flex !important;
    justify-content: center !important;
    margin: 40px 0 20px 0 !important;
    width: 100% !important;
}

.navigation.pagination .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Estilo base para todos los números y flechas */
.navigation.pagination .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid #d0cfc7 !important; /* Tu color de borde corporativo */
    background: #ffffff !important;
    color: #1a2e16 !important; /* Tu verde oscuro base */
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

/* Efecto Hover (Al pasar el ratón) */
.navigation.pagination a.page-numbers:hover {
    background: #f7f5f0 !important; /* Fondo crema suave */
    border-color: #2d6a20 !important; /* Verde vivo interactivo */
    color: #2d6a20 !important;
    transform: translateY(-1px) !important;
}

/* Página Activa (El número donde se encuentra el usuario) */
.navigation.pagination .page-numbers.current {
    background: #1a2e16 !important; /* Tu verde bosque profundo */
    border-color: #1a2e16 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(26, 46, 22, 0.15) !important;
}

/* Ajustes finos de lectura para el interior de noticias */
.eco-single-noticia .eco-ev-descripcion-content p {
    margin: 0 0 22px 0 !important;
}

.eco-single-noticia .eco-ev-descripcion-content h2,
.eco-single-noticia .eco-ev-descripcion-content h3 {
    color: #0a2010 !important;
    font-weight: 700 !important;
    margin: 36px 0 14px 0 !important;
    line-height: 1.3 !important;
}

.eco-single-noticia .eco-ev-descripcion-content img {
    border-radius: 12px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 28px 0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}

@media (max-width: 767px) {
    .eco-single-noticia {
        padding: 20px 16px 60px !important;
    }
    .eco-single-noticia .eco-ev-hero-content {
        padding: 24px 20px !important;
    }
}

/* Los puntos suspensivos (...) */
.navigation.pagination span.page-numbers.dots {
    background: transparent !important;
    border-color: transparent !important;
    color: #6b7a66 !important;
    cursor: default !important;
}

/* =========================================================================
   REDISEÑO DEL CARRUSEL DE NOTICIAS EN PORTADA (ESSENTIAL BLOCKS)
   ========================================================================= */

/* 1. Maquetación premium de las tarjetas del carrusel */
.kadence-column1560_adddd9-a6 .ebpg-carousel-post-holder {
    background: #ffffff !important;
    border: 1px solid #e2e6e1 !important; 
    border-radius: 14px !important;      
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(10,32,16,0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.kadence-column1560_adddd9-a6 .ebpg-carousel-post-holder:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 26px rgba(10,32,16,0.06) !important;
}

/* 2. Tratamiento de las imágenes */
.kadence-column1560_adddd9-a6 .ebpg-entry-media,
.kadence-column1560_adddd9-a6 .ebpg-entry-thumbnail {
    margin: 0 !important;
    height: 180px !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}

.kadence-column1560_adddd9-a6 .ebpg-entry-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 3. Contenedor de contenido */
.kadence-column1560_adddd9-a6 .ebpg-entry-wrapper {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    background: #ffffff !important;
}

/* Títulos en el verde bosque de la marca */
.kadence-column1560_adddd9-a6 .ebpg-entry-title,
.kadence-column1560_adddd9-a6 .ebpg-entry-title a {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a2e16 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    margin: 0 0 10px 0 !important;
}

.kadence-column1560_adddd9-a6 .ebpg-carousel-post-link:hover {
    color: #2d6a20 !important;
}

/* Extractos del post */
.kadence-column1560_adddd9-a6 .ebpg-carousel-post-excerpt p {
    font-size: 13px !important;
    color: #5a6655 !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
}

/* 4. Transformación total del botón azul al Verde Info Premium */
.kadence-column1560_adddd9-a6 .ebpg-readmore-btn {
    margin-top: auto !important;
    text-align: center !important;
}

.kadence-column1560_adddd9-a6 .ebpg-readmore-btn a {
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #7DBA00 !important; /* Tu verde info */
    color: #ffffff !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    text-transform: none !important;
    border: none !important;
    letter-spacing: normal !important;
    transition: background 0.2s ease !important;
    box-shadow: none !important;
}

.kadence-column1560_adddd9-a6 .ebpg-readmore-btn a:hover {
    background: #6aa000 !important;
    color: #ffffff !important;
}

/* 5. Rediseño de los puntos de navegación inferiores (Dots) */
.kadence-column1560_adddd9-a6 .slick-dots li button {
    background: #ccd0c9 !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}

.kadence-column1560_adddd9-a6 .slick-dots li.slick-active button {
    background: #1a2e16 !important; /* Verde bosque activo */
    transform: scale(1.1) !important;
}

/* 6. Flechas laterales del carrusel unificadas */
.kadence-column1560_adddd9-a6 .slick-arrow i {
    color: #6b7a66 !important;
    transition: color 0.2s !important;
}

.kadence-column1560_adddd9-a6 .slick-arrow:hover i {
    color: #2d6a20 !important;
}

/* =========================================================================
   FIX FINAL PORTADA: PUNTOS CARRUSEL Y FONDO INFINITO EXTENDIDO
   ========================================================================= */

/* 1. Forzar el color de fondo a todo el ancho de la pantalla */
.kadence-column1560_adddd9-a6 {
    position: relative !important;
    z-index: 1 !important;
    background-color: #f7f5f0 !important; /* Forzamos tu color crema base */
}

.kadence-column1560_adddd9-a6::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: calc(-50vw + 50%) !important; /* Estira el fondo al 100% del monitor */
    right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    background-color: #f7f5f0 !important; /* Hereda el color exacto de fondo de la sección */
    z-index: -1 !important;
    pointer-events: none !important;
}

/* 2. Limpieza y formateo radical de los puntos del Slider (Elimina el efecto raro) */
.kadence-column1560_adddd9-a6 .slick-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 24px 0 0 0 !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
}

.kadence-column1560_adddd9-a6 .slick-dots li {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

/* Pulverizamos cualquier texto, pseudo-elemento o número interno que rompa la bolita */
.kadence-column1560_adddd9-a6 .slick-dots li button {
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: #ccd0c9 !important; /* Color gris suave inactivo */
    border-radius: 50% !important;
    text-indent: -9999px !important; /* Esconde el número interno de Essential Blocks */
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    cursor: pointer !important;
    transition: background 0.25s ease, transform 0.25s ease !important;
}

.kadence-column1560_adddd9-a6 .slick-dots li button::before,
.kadence-column1560_adddd9-a6 .slick-dots li button::after {
    display: none !important; /* Fulmina cualquier icono o número inyectado por fuentes de iconos */
}

/* Estado del punto activo (Diseño Premium Verde Bosque) */
.kadence-column1560_adddd9-a6 .slick-dots li.slick-active button {
    background: #1a2e16 !important; /* Tu verde bosque profundo corporativo */
    transform: scale(1.15) !important;
}

/* =========================================================================
   ESTILOS PREMIUM: BANNER VERDE DEGRADADO UNIFICADO
   ========================================================================= */

.eco-banner-global-contenedor {
    max-width: 1200px !important; 
    margin: 40px auto 35px auto !important; /* Añadidos 35px de margen debajo */
    padding: 0 16px !important; 
    box-sizing: border-box !important;
}

/* Caja de fondo idéntica a tu captura de pantalla */
.eco-hero-cabecera-paginas { 
    background: linear-gradient(135deg, #1a2e16 0%, #2d6a20 100%) !important; 
    border-radius: 20px !important; 
    padding: 45px 40px !important; 
    text-align: center !important; 
    box-shadow: 0 10px 35px rgba(26, 46, 22, 0.12) !important; /* Sombra suave inferior */
    position: relative !important;
    overflow: hidden !important;
}

/* Efecto de sutil granulado/puntos premium de fondo */
.eco-hero-cabecera-paginas::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 0) !important;
    background-size: 24px 24px !important;
    opacity: 0.4 !important;
    pointer-events: none !important;
}

/* Tipografía blanca impecable */
.eco-hero-cabecera-paginas h1 { 
    color: #ffffff !important; 
    font-size: clamp(26px, 4vw, 36px) !important; 
    font-weight: 800 !important; 
    margin: 0 0 10px 0 !important; 
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.eco-hero-cabecera-paginas p {
    color: #d1dfcc !important;
    font-size: 14px !important;
    margin: 0 !important;
    font-weight: 500 !important;
    letter-spacing: 0.1px !important;
    line-height: 1.4 !important;
}

/* Adaptación responsive simétrica */
@media (max-width: 767px) {
    .eco-banner-global-contenedor {
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-top: 25px !important;
    }
    .eco-hero-cabecera-paginas { 
        padding: 35px 20px !important; 
        border-radius: 16px !important; 
    }
}

/* =========================================================================
   ESTILO DEFINITIVO PÁGINA DE CONTACTO (SISTEMA DE RECINTOS UNIFICADO)
   ========================================================================= */

/* 1. Caja Izquierda (Datos Premium) y Caja Derecha (Formulario) */
.eco-caja-contacto-premium,
.wp-block-column.eco-caja-contacto {
    background: #ffffff !important;
    border: 1px solid #d0cfc7 !important; /* El borde exacto de tus recintos */
    border-radius: 14px !important;
    padding: 30px !important;
    box-shadow: 0 4px 20px rgba(10,32,16,0.02) !important;
    box-sizing: border-box !important;
}

/* 2. Píldoras de Teléfono y Email (Look Datos de Interés de Recintos) */
.eco-pildora-telefono,
.eco-pildora-email {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 18px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    margin-bottom: 12px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
}

.eco-pildora-telefono { background: #eaf3de !important; border: 1px solid #d6eecc !important; color: #1a2e16 !important; }
.eco-pildora-email { background: #ddeeff !important; border: 1px solid #cce4ff !important; color: #0a3a70 !important; }
.eco-pildora-telefono a, .eco-pildora-email a { color: inherit !important; text-decoration: none !important; }

/* 3. Contenedor de Horarios con separación interna (Para que no se pegue a los lados) */
.eco-caja-horarios-wrap {
    background: #fdfdfb !important;
    border: 1px solid #d0cfc7 !important;
    border-radius: 10px !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* Cabecera Crema Superior */
.eco-horarios-header-visual {
    background: #f7f5f0 !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid #e8e4da !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #6b7a66 !important;
    letter-spacing: 0.6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

/* Margen interior para que las dos columnas de horarios no toquen los bordes */
.eco-caja-horarios-wrap > .kt-inside-inner-col > .wp-block-kadence-rowlayout,
.eco-caja-horarios-wrap .kb-row-layout-wrap {
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Sub-bloques de Horarios individuales */
.eco-box-horario-item {
    background: #ffffff !important;
    border: 1px solid #e8e6dc !important;
    padding: 16px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.eco-box-horario-item h4, 
.eco-box-horario-item h5 {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #2d6a20 !important;
    text-transform: uppercase !important;
    margin: 0 0 6px 0 !important;
}

.eco-box-horario-item p {
    margin: 0 0 4px 0 !important;
    font-size: 13px !important;
    color: #1a2e16 !important;
    font-weight: 600 !important;
}

.eco-box-horario-item em {
    font-size: 11px !important;
    color: #6b7a66 !important;
    font-style: italic !important;
}

/* 4. Redes Sociales Circulares con Borde Negro */
.eco-redes-contacto ul.wp-block-social-links {
    display: flex !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 20px 0 0 0 !important;
    list-style: none !important;
}

.eco-redes-contacto .wp-block-social-link a {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid #000000 !important;
    background: #ffffff !important;
    color: #000000 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.eco-redes-contacto .wp-block-social-link a:hover {
    background: #1a2e16 !important;
    border-color: #1a2e16 !important;
    color: #ffffff !important;
}

/* 5. El Botón "Send" del Formulario ajustado como el de reservas */
.eb-form-submit-button {
    background: #7DBA00 !important; /* Tu verde corporativo */
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    border: none !important;
    padding: 14px 24px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.eb-form-submit-button:hover {
    background: #6aa000 !important;
}

/* 1. Cambiar el texto "Send" por "Enviar" mediante CSS de forma limpia */
.eb-form-submit-button {
    font-size: 0 !important; /* Escondemos el texto original 'Send' */
}
.eb-form-submit-button::before {
    content: "Enviar" !important; /* Inyectamos el texto en español */
    font-size: 14px !important; /* Devolvemos el tamaño de fuente correcto */
    font-weight: 700 !important;
}

/* 2. Forzar que el icono del sobre en la píldora de email sea azul cultura oscuro */
.eco-pildora-email .kb-svg-icon-wrap,
.eco-pildora-email svg {
    color: #0a3a70 !important;
}

/* Contenedor gris tipo alerta sutil de las fichas */
.eco-contacto-aviso-legal {
    background: #f4f6f3 !important; /* Gris-verde ultra sutil de fondo */
    border: 1px solid #e2e6e1 !important;
    border-radius: 8px !important;
    padding: 18px !important;
    margin-top: 25px !important;
    box-sizing: border-box !important;
}

/* El enlace superior de "Privacidad de los datos" */
.eco-contacto-aviso-legal a {
    color: #2d6a20 !important; /* Tu verde bosque corporativo */
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-bottom: 10px !important;
    border-bottom: 1px dashed #2d6a20 !important;
}
.eco-contacto-aviso-legal a:hover {
    color: #7DBA00 !important;
    border-color: #7DBA00 !important;
}

/* Formatear el texto de las condiciones (Responsable, Finalidad...) */
.eco-contacto-aviso-legal,
.eco-contacto-aviso-legal p,
.eco-contacto-aviso-legal font {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: #5a6655 !important; /* Gris intermedio noble */
    margin: 0 !important;
}

/* Destacar las etiquetas en mayúsculas pequeñas alineadas de forma natural */
.eco-contacto-aviso-legal strong {
    color: #1a2e16 !important; /* Verde oscuro corporativo */
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    display: inline-block !important;
    min-width: auto !important; /* Quitamos el empuje que separaba los dos puntos */
    margin-right: 4px !important; /* Espacio sutil de separación con el texto */
}

/* =========================================================================
   REDISEÑO PREMIUM DEL MENÚ MÓVIL (BLINDADO - SÓLO PARA POPUP DRAWER)
   ========================================================================= */

/* 1. Fondo del panel completo (Verde Bosque Noble) */
#mobile-drawer .drawer-inner {
    background-color: #162a13 !important; /* Tu verde oscuro corporativo */
    padding: 24px 16px !important;
    box-sizing: border-box !important;
}

/* El botón de cerrar (X) arriba a la derecha */
#mobile-drawer .drawer-header .menu-toggle-close {
    color: #ffffff !important;
    opacity: 0.8;
    transition: opacity 0.2s;
}
#mobile-drawer .drawer-header .menu-toggle-close:hover { 
    opacity: 1; 
}

/* 2. Limpieza de la lista del menú móvil */
#mobile-drawer .mobile-navigation ul#mobile-menu {
    padding: 0 !important;
    margin: 40px 0 0 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important; /* Separación limpia entre enlaces */
}

/* Eliminar las líneas grises divisorias feas de Kadence en móvil */
#mobile-drawer .mobile-navigation ul#mobile-menu li {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* 3. Enlaces estándar del Menú Móvil (Sobre nosotros, Explora...) */
#mobile-drawer .mobile-navigation ul#mobile-menu li a {
    color: #e2e8e0 !important; /* Blanco hueso suave */
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    padding: 12px 14px !important;
    display: block !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

/* Efecto interactivo exclusivo en el panel móvil */
#mobile-drawer .mobile-navigation ul#mobile-menu li a:hover,
#mobile-drawer .mobile-navigation ul#mobile-menu li a:active {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    padding-left: 18px !important; /* Desplazamiento elegante */
}

/* 4. Estilo de la Página Activa en el Menú Móvil */
#mobile-drawer .mobile-navigation ul#mobile-menu li.current-menu-item a {
    background: rgba(125, 186, 0, 0.15) !important; /* Fondo con tu verde vivo translúcido */
    color: #7DBA00 !important; /* Texto verde vivo */
    font-weight: 700 !important;
}

/* 5. EL BOTÓN "RESERVA" PRESTIGIADO EN MÓVIL */
#mobile-drawer .mobile-navigation ul#mobile-menu li.reserva-icon {
    margin-top: 20px !important; /* Separamos el botón de acción del resto */
    padding: 0 !important;
}

#mobile-drawer .mobile-navigation ul#mobile-menu li.reserva-icon a {
    background: #7DBA00 !important; /* Tu verde llamativo exacto corporativo */
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    text-align: center !important;
    padding: 14px 20px !important;
    border-radius: 30px !important; /* Pastilla perfecta */
    box-shadow: 0 4px 14px rgba(125, 186, 0, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

#mobile-drawer .mobile-navigation ul#mobile-menu li.reserva-icon a:hover,
#mobile-drawer .mobile-navigation ul#mobile-menu li.reserva-icon a:active {
    background: #6aa000 !important;
    box-shadow: 0 6px 20px rgba(125, 186, 0, 0.3) !important;
    transform: translateY(-1px) !important;
    padding-left: 20px !important; /* Mantiene la simetría del botón */
}

/* Ajuste del icono de la reserva dentro del cajón móvil */
#mobile-drawer .mobile-navigation ul#mobile-menu li.reserva-icon svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
}

/* =========================================================================
   PULIDO WEBCAM INDIVIDUAL: ELIMINACIÓN DE MÁRGENES EN FICHA DE ESPACIOS
   ========================================================================= */

/* 1. Eliminamos el marco, bordes y sombras de la tarjeta para que se integre al texto */
.eco-modo-camara-individual #eco-webcams-render-lista .eco-tarjeta-recinto {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* 2. Forzamos a que el cuerpo interno de datos ocupe el ancho natural sin sangrados */
.eco-modo-camara-individual #eco-webcams-render-lista .eco-tarjeta-cuerpo {
    padding: 16px 0 0 0 !important; /* Sólo espacio superior hacia abajo, cero a los lados */
    background: transparent !important;
}

/* 3. Quitamos el duplicado del título (Playa del Sable) porque la página de espacio ya tiene su H1 arriba */
.eco-modo-camara-individual #eco-webcams-render-lista .eco-tarjeta-titulo {
    display: none !important;
}

/* 4. Forzamos la cabecera flex a empujar los climas al extremo derecho si no hay título */
.eco-modo-camara-individual #eco-webcams-render-lista .eco-tarjeta-cabecera-flex {
    justify-content: flex-end !important;
    margin-bottom: 12px !important;
}

/* 5. Ajuste fino responsive: en móvil eliminamos los rellenos forzados */
@media (max-width: 767px) {
    .eco-modo-camara-individual #eco-webcams-render-lista.eco-grid-recintos {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* =========================================================================
   PARCHE DE AISLAMIENTO: EVITA QUE LAS REGLAS DEL FOOTER ROMPAN LOS BOTONES
   ========================================================================= */
.eco-ev-descripcion-content .wp-block-kadence-advancedbtn,
.eco-ev-descripcion-content .kb-advanced-button,
.eco-ev-descripcion-content .kb-link-wrap,
.eco-ev-descripcion-content .kb-btn-wrap {
    display: inline-flex !important; /* Devuelve el comportamiento nativo de botón */
    width: auto !important;
    text-align: center !important; /* Fuerza a que el texto se quede centrado en el fondo azul */
}

.eco-ev-descripcion-content a.kb-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important; /* Si el texto se vuelve azul/gris, forzamos que sea blanco */
    text-decoration: none !important;
}