/* Estilos generales */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Muy importante para evitar el scroll */
    font-family: sans-serif;
}

/* El contenedor principal */
.landing-container {
    width: 100%;
    height: 100vh; /* Ocupa el 100% de la altura de la ventana */

    /* Fondo degradado y repetido */
    background: 
        linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(50,50,50,0.5)), 
        url('background-image.jpeg');
    background-repeat: repeat; 
    background-size: 300px; 

    /* Flexbox para centrar y distribuir el logo y la nueva imagen */
    display: flex;
    flex-direction: column; /* Coloca los elementos uno debajo del otro */
    justify-content: center; /* Centra verticalmente el bloque completo */
    align-items: center; /* Centra horizontalmente los elementos */
    padding: 10px; /* Un poco de padding general para no pegar los elementos a los bordes */
    box-sizing: border-box; /* Asegura que el padding no cause scroll */
}

/* Estilos para el logo */
.logo {
    max-width: 200px; /* Un poco más pequeño para dejar espacio a la nueva imagen */
    width: 60%; /* Más pequeño en móvil */
    height: auto; 
    margin-bottom: 20px; /* Margen entre el logo y la nueva imagen */
    
    /* Efecto de sombra para el logo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); 
}

/* Estilos para la nueva imagen */
.content-image {
    max-width: 500px; /* Tamaño máximo para PC */
    width: 90%; /* Ocupa más ancho en móvil */
    height: auto;
    border-radius: 15px; /* Bordes redondeados */
    
    /* Efecto de sombra para la imagen */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); 
}

/* Media Queries para ajustar tamaños en pantallas más grandes */
@media (min-width: 768px) {
    .logo {
        max-width: 400px; /* Más grande en tablet/PC */
        width: 25%;
        margin-bottom: 30px; /* Más margen */
    }
    .content-image {
        max-width: 400px; /* Más grande en tablet/PC */
        width: 20%;
    }
}

/* Media Queries para pantallas muy grandes, si lo deseas */
@media (min-width: 1200px) {
    .logo {
        max-width: 450px;
        width: 25%;
    }
    .content-image {
        max-width: 700px;
        width: 20%;
    }
}