* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden; /* Previene scroll no deseado */
}

.video-container {
    position: relative;
    width: 100%;
    height: 100vh;
    /* Mantiene el aspect ratio original 4:5 (1080x1350) sin deformar el video */
    max-width: 80vh; /* 4 / 5 * 100 */
    aspect-ratio: 4/5;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Contenedor de hotspots */
#hotspots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none; /* Desactiva clics mientras es invisible */
}

#hotspots.visible {
    opacity: 1;
    pointer-events: auto; /* Activa clics al mostrarse */
}

/* Hotspots (áreas interactuables invisibles) */
.hotspot {
    position: absolute;
    display: block;
    /* MODO DE DEPURACIÓN: Descomentar la siguiente línea para visualizar el área de los botones */
    /* border: 2px solid rgba(255, 0, 0, 0.5); background: rgba(255, 0, 0, 0.2); */
}

/* 1. Botón "Ver más" (Gris claro) */
.btn-ver-mas {
    top: 63%;
    height: 9%;
    left: 20%;
    width: 60%;
    border-radius: 50px;
    cursor: pointer;
}

/* 2. Botón "Whatsapp" (Verde) */
.btn-whatsapp {
    top: 76%;
    height: 9%;
    left: 20%;
    width: 60%;
    border-radius: 50px;
    cursor: pointer;
}