/* Estilos para el botón flotante de WhatsApp */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    right: 25px;
    background-color: #25D366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 28px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    line-height: 60px; /* Centra el ícono verticalmente */
    transition: transform 0.3s ease;
}

/* Estilos para el mensaje flotante (tooltip) */
.whatsapp-float .tooltip-text {
    visibility: hidden; /* Oculto por defecto */
    opacity: 0;         /* Transición de opacidad */
    width: auto;        /* Ancho automático según el texto */
    white-space: nowrap; /* Evita que el texto se parta en dos líneas */
    background-color: #25D366;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 15px;
    position: absolute; /* Posicionamiento absoluto respecto al botón */
    z-index: 1;
    top: 50%;
    right: 75px; /* Lo posiciona a la izquierda del botón (60px de ancho + 15px de margen) */
    transform: translateY(-50%);
    transition: opacity 0.3s ease;
    font-size: 15px;    /* Tamaño de fuente para el mensaje */
    line-height: normal; /* Resetea el line-height para el texto del tooltip */
}

/* Efecto al pasar el cursor sobre el botón */
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 4px 4px 15px rgba(0,0,0,0.3);
    color: #FFF;
}

/* Muestra el mensaje al pasar el cursor sobre el botón */
.whatsapp-float:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    color: #FFF;
}

/* Estilos para el contenedor del video */
.video-container-professional {
    border-radius: 12px; /* Suaviza las esquinas del contenedor */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra sutil y profesional */
    overflow: hidden; /* Muy importante: asegura que el video respete los bordes redondeados */
    background-color: #000; /* Fondo negro por si el video tarda en cargar */
}

/* Estilos para el botón de Play superpuesto */
.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.play-button-overlay:hover {
    background-color: #dea62b; /* Verde de WhatsApp al pasar el mouse */
    transform: translate(-50%, -50%) scale(1.1);
    border-color: #FFF;
}

.play-button-overlay i {
    margin-left: 5px; /* Pequeño ajuste para centrar visualmente el ícono de play */
}

/* Clase para ocultar el botón */
.play-button-overlay.hidden {
    display: none;
}