/* Media & Prensa (template-media.php): Liquid Glass y carruseles. */
/* Liquid Glass Navigation Bar */
.liquid-glass-nav {
    background: rgba(23, 43, 54, 0.55);
    backdrop-filter: blur(40px) saturate(190%);
    -webkit-backdrop-filter: blur(40px) saturate(190%);
    box-shadow: 
        0 30px 60px -15px rgba(0, 0, 0, 0.75),
        0 10px 25px -10px rgba(0, 0, 0, 0.5),
        inset 0 2px 3px -1px rgba(240, 238, 213, 0.4),
        inset 0 -2px 4px -1px rgba(237, 172, 68, 0.2),
        inset 0 0 0 1px rgba(240, 238, 213, 0.12);
    border: 1px solid rgba(240, 238, 213, 0.1);
    transition: all 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
    overflow: hidden;
}

.liquid-glare {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(circle 80px at var(--x, 50%) var(--y, 50%), rgba(237, 172, 68, 0.22) 0%, transparent 100%);
    mix-blend-mode: screen;
}

.liquid-divider {
    background: linear-gradient(90deg, transparent, rgba(240, 238, 213, 0.45), transparent);
}

@media (max-width: 1023px) {
    .liquid-divider {
        width: 1.5px !important;
        height: 22px !important;
        background: linear-gradient(180deg, transparent, rgba(240, 238, 213, 0.6) 20%, rgba(240, 238, 213, 0.6) 80%, transparent) !important;
    }
}

/* Píldora Deslizante de Fondo (Sliding Pill) */
.active-pill {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background: rgba(237, 172, 68, 0.25);
    border: 1px solid rgba(237, 172, 68, 0.6);
    border-radius: 9999px;
    box-shadow: 
        0 0 16px rgba(237, 172, 68, 0.35),
        inset 0 1px 2px rgba(240, 238, 213, 0.4);
    transition: transform 0.45s cubic-bezier(0.34, 1.2, 0.64, 1),
                width 0.45s cubic-bezier(0.34, 1.2, 0.64, 1),
                height 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
    pointer-events: none;
    z-index: 1;
}

.liquid-btn {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
    opacity: 0.75;
    transition: opacity 0.3s ease, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), filter 0.3s ease;
}

.btn-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.liquid-btn:hover {
    opacity: 1;
    transform: scale(1.08);
}

.liquid-btn:active {
    transform: scale(0.9);
}

.liquid-btn.active {
    opacity: 1;
    transform: scale(1.05);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
#media-content-area { animation: fadeInUp 0.4s ease-out forwards; }
.carousel-wrapper::-webkit-scrollbar { display: none; }

/* Pantallas chicas (≤420px): la píldora móvil medía ~363px y se recortaba en teléfonos de 375px.
   Se oculta la etiqueta «REDES» (los botones tienen aria-label) y los botones bajan a 36px;
   la píldora deslizante toma el tamaño del botón activo (updateSlidingPill en media.js). */
@media (max-width: 420px) {
    #network-pill-mobile {
        padding-left: 10px;
        padding-right: 10px;
    }

    #network-pill-mobile > span {
        display: none;
    }

    #network-pill-mobile .liquid-btn {
        width: 36px;
        height: 36px;
    }

    #network-pill-mobile .liquid-divider {
        margin-left: 6px;
        margin-right: 6px;
    }
}