/* Código actualizado Webmaster: Manuel C. Ramírez 2026 */

/* Corrección de Áreas Táctiles para FlexSlider */
.flex-control-paging li a {
    width: 48px !important; /* Mínimo recomendado por accesibilidad */
    height: 48px !important;
    display: block !important;
    cursor: pointer;
    /* El siguiente truco mantiene el punto visualmente pequeño (si usas background) 
       pero el área de clic grande usando bordes transparentes */
    background-clip: padding-box !important; 
    box-sizing: border-box !important;
    border: 12px solid transparent !important; 
   
}

/* Separación entre los puntos */
.flex-control-nav li {
    margin: 0 5px !important;
    
}

/* Flechas de navegación (Anterior/Siguiente) */
.flex-direction-nav a {
    min-width: 48px;
    min-height: 48px;
    line-height: 48px; /* Centrar verticalmente */
}


        .async-hide {
            opacity: 0 !important
        }

        .rendondo {
            border-radius: 15px;
        }

        .responsivomanu {
            margin-top: 50px;

            @media (min-width: 500px) and (max-width: 1024px) {
                margin-top: 70px;

            }

        }

        body {
            background: #000;
        }

        #main {
            width: 100%;
            max-width: 800px;
            margin: 30px auto 20px;
        }

        #main p {
            padding: 20px;
            margin: 20px 0;
            background: lightyellow;
        }

        .youtube-player {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            max-width: 100%;
            background: #000;
            margin: 5px;
        }

        .youtube-player iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            background: transparent;
        }

        .youtube-player img {
            object-fit: cover;
            display: block;
            left: 0;
            bottom: 0;
            margin: auto;
            max-width: 100%;
            width: 100%;
            position: absolute;
            right: 0;
            top: 0;
            border: none;
            height: auto;
            cursor: pointer;
            -webkit-transition: 0.4s all;
            -moz-transition: 0.4s all;
            transition: 0.4s all;
        }

        .youtube-player img:hover {
            -webkit-filter: brightness(75%);
            -moz-filter: brightness(75%);
            filter: brightness(75%);
        }

        .youtube-player .play {
            height: 48px;
            width: 68px;
            left: 50%;
            top: 50%;
            margin-left: -34px;
            margin-top: -24px;
            position: absolute;
            background: url("https://i.ibb.co/j3jcJKv/yt.png") no-repeat;
            cursor: pointer;
        }