@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; }
html { scroll-behavior: smooth; }

/* Efectos visuales */
.custom-nav-link:hover { color: #50F4FF !important; transition: 0.3s; }
.custom-social-link:hover { color: #50F4FF !important; transition: 0.3s; }
.custom-btn-hover:hover { background-color: #50F4FF; border-color: #50F4FF; color: #000; transition: 0.3s; }
.custom-card-hover:hover { transform: translateY(-5px); transition: 0.3s; box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; }
.custom-portfolio-card img { filter: grayscale(1); transition: 0.5s; }
.custom-portfolio-card:hover img { filter: grayscale(0); transform: scale(1.05); }
.custom-portfolio-overlay { background-color: rgba(0, 0, 0, 0.8); opacity: 0; transition: 0.5s; top: auto; bottom: -100%; height: 100%; }
.custom-portfolio-card:hover .custom-portfolio-overlay { opacity: 1; bottom: 0; }
.custom-btn-enviar { background-color: #0d6efd; transition: 0.3s; }
.custom-btn-enviar:hover { background-color: #50F4FF; color: #000; border-color: #50F4FF; }

/* Video de Fondo y Grilla de Puntos */
.video-container {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    overflow: hidden;
    z-index: 0; /* Pegado bien al fondo */
}

.video-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%); /* Esto asegura que el video quede perfectamente centrado */
    object-fit: cover;
}

.overlay-puntos {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    /* Grilla de puntos blancos */
    background-image: radial-gradient(rgba(255, 255, 255, 0.3) 2px, transparent 2px);
    background-size: 8px 8px; /* Separación de los puntos */
    background-color: rgba(0, 0, 0, 0.6); /* Tono oscuro para que tu nombre blanco resalte perfecto */
    z-index: 1; /* Por encima del video, por debajo del texto */
}