/* CSS PARA LAS IMAGENES CON VIDEO */

     .video-wrapper {
        position: relative;
        width: 560px;
        margin-bottom: 25px;
        cursor: pointer;
        display: inline-block;
    }

    .video-wrapper img {
        width: 100%;
        display: block;
    }

    /* Icono play */
    .play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        background: rgba(0,0,0,0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.2s ease;
    }

    .play-icon::before {
        content: "";
        border-style: solid;
        border-width: 15px 0 15px 25px;
        border-color: transparent transparent transparent white;
        margin-left: 5px;
    }

    .video-wrapper:hover .play-icon {
        background: rgba(0,0,0,0.8);
        transform: translate(-50%, -50%) scale(1.1);
    }

    .video-container {
        display: none;
        position: relative;
        width: 100%;
        height: 315px;
    }

    .video-container iframe {
        width: 100%;
        height: 100%;
    }

    .close-btn {
        position: absolute;
        top: 5px;
        right: 5px;
        background: red;
        color: white;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
        font-size: 14px;
        border-radius: 4px;
        z-index: 2;
    }


/******************* QUITAR LA LINEA VERTICAL DE LOS BOTONES DE LA CABECERA ************************/
.custom-social-icons-divider > li + li::before {
  border-left: 0px solid #dadcdd !important;
}
/***************************************************************************************************/


/****************** PANEL SUPERIOR E INFERIOR DE LA VIDEOLLAMADA PARA LOS SERVICIOS **************************/

/******************************************************************/


/* PANEL GENERAL */
.sticky-panel {
    position: fixed;
    width: 300px;
    right: 0;
    max-height: 80vh;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 12px 12px 0 0;
    padding: 15px;
    display: none;
    overflow-y: auto;
    z-index: 99999;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* POSICIÓN ARRIBA */
.position-top {
    top: 0;
    border-radius: 0 0 12px 12px;
}

/* POSICIÓN ABAJO */
.position-bottom {
    bottom: 0;
    border-radius: 12px 12px 0 0;
}

/* BOTONES */
.sticky-toggle {
    position: fixed;
    right: 0;
    background: #0069d9;
    color: white;
    padding: 10px 20px;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    z-index: 100000;
    border: none;
}

.sticky-toggle[data-target="top-panel"] {
    top: 0;
    border-radius: 0 0 12px 12px;
}

.sticky-toggle[data-target="bottom-panel"] {
    bottom: 0;
}


/* MODO MÓVIL — Stickys activos */
.sticky-toggle {
    display: block; /* Botones visibles */
}

.sticky-panel {
    display: none; /* Paneles ocultos inicialmente */
}

/* MODO ESCRITORIO — Sin stickys, paneles siempre visibles */
@media (min-width: 992px) {
    .sticky-toggle {
        display: none !important; /* Ocultar botón */
    }

    .sticky-panel {
        display: block !important; /* Mostrar panel siempre */
        position: static !important; /* Quitar modo sticky */
        width: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }

}


/*-------------QUITAR EL EMAIL DE LA CABECERA-----*/



/*---------POSOCION VIDEOS --------*/
/* --------TOP PANEL --------------*/

/* 1. Por defecto, visible en todas las pantallas */
#top-panel {
    display: block; /* Asegura que se muestre en desktop */
}

/* 2. Media Query: Aplica estas reglas solo a pantallas pequeñas */
/* Típicamente, 768px es el punto de corte (breakpoint) de Bootstrap para pasar de MD a SM/XS. */
@media (max-width: 767.98px) {
    
    #top-panel {
        display: none !important; /* Oculta el elemento en resoluciones pequeñas */
    }

		  #header .header-nav-top .nav > li:not(.d-none) {
	display: none !important;
	}
}
/*--------------------------------*/



.video-figure {
  width: fit-content;        /* ajusta la figura al ancho del vídeo */
  margin: 0 auto;            /* centra todo el bloque */
}

.video-caption {
  margin-top: 0.5rem;
  text-align: center;
  font-style: italic;
  font-size: 0.9rem;
  color: #555;
}