/* style.css */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    /* Asegura que el contenido esté sobre el fondo */
    position: relative; 
    overflow: hidden; 
}

/* --- Fondo Desenfoque (Aplicado SOLO aquí) --- */

.background-blur {
    /* Ocupa toda la pantalla */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Bajo z-index para que esté detrás del contenido */
    
    /* Reemplaza 'tu_fondo.jpg' con la ruta a tu imagen de fondo */
    background-image: url('image.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 💥 EFECTO DE DESENFOQUE SOLO EN ESTE DIV */
    filter: blur(8px); /* Ajusta el valor del desenfoque (ej. 8px) */
    transform: scale(1.02); /* Evita bordes blancos que puede causar el blur */
}

/* --- Contenido Principal (Imagen Centrada) --- */
.content-wrapper {
    position: relative; /* Necesario para que esté por encima del fondo */
    z-index: 10; 
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}

/* Imagen Principal: Sin ningún filtro, NÍTIDA */
.centered-image {
    max-width: 90%; 
    max-height: 90vh; 
    height: auto; 
    width: auto; 
    display: block; 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 
    border-radius: 8px; 
}

/* --- Íconos Fijos (WhatsApp & Facebook) --- */
.fixed-bottom-left {
    position: fixed;
    bottom: 1rem; 
    left: 1rem; 
    z-index: 1000; /* Alto z-index para asegurar que estén sobre la imagen centrada */
}

.whatsapp-icon i {
    color: #25D366; 
    border-radius: 50%;
    padding: 8px; 
    font-size: 2.5em; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.telegram-icon i {
    color: #229ed9; 
    border-radius: 50%;
    padding: 8px; 
    font-size: 2.5em; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.facebook-icon i {
    color: #1877F2; 
    border-radius: 50%;
    padding: 8px;
    font-size: 2.5em; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.instagram-icon i {
    color: #c13584; 
    border-radius: 50%;
    padding: 8px;
    font-size: 2.5em; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.tiktok-icon i {
    color: #25f4ee; 
    border-radius: 50%;
    padding: 8px;
    font-size: 2.5em; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.youtube-icon i {
    color: #ff0033; 
    border-radius: 50%;
    padding: 8px;
    font-size: 2.5em; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.mail-icon i {
    color: #d3af37; 
    border-radius: 50%;
    padding: 8px;
    font-size: 2.5em; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}


/* Media Queries para ajustar tamaños en móviles */
@media (max-width: 768px) {
    .centered-image {
        max-width: 95%; 
        max-height: 70vh; 
    }

    .whatsapp-icon i, .facebook-icon i {
        font-size: 2em; 
        padding: 6px;
    }
}

/* Protege la imagen y los íconos de ser arrastrados o seleccionados */
.centered-image,
.fixed-bottom-left,
.content-wrapper {
    /* Deshabilita la selección de texto o elementos */
    -webkit-user-select: none; /* Chrome, Safari, Opera */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* Estándar */
    
    /* Deshabilita la posibilidad de arrastrar el elemento (útil para imágenes) */
    -webkit-user-drag: none; /* Chrome, Safari, Opera */
    user-drag: none;
}