/* Restablecimiento básico para asegurar consistencia en todos los navegadores */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Asegura que html y body ocupen el 100% del viewport */
html, body {
    height: 100%;
    width: 100%;
    overflow: hidden; /* Evita barras de desplazamiento si el contenido excede el viewport */
}

/* Estilos para la imagen de fondo del jardín */
.background {
    background-image: url('crisanto-background.jpg'); /* Usa el nombre de archivo especificado */
    background-size: cover; /* Escala la imagen para cubrir completamente el contenedor */
    background-position: center; /* Centra la imagen en el contenedor */
    background-repeat: no-repeat; /* Evita que la imagen de fondo se repita */
    background-attachment: fixed; /* Mantiene la imagen de fondo fija mientras se desplaza el contenido */
    position: absolute; /* Permite que ocupe todo el espacio del body */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Envía el fondo detrás de cualquier otro elemento */
}

/* Contenedor para el logotipo, centrado y flotante */
.logo-container {
    position: fixed; /* Mantiene el logo fijo en la pantalla, independientemente del scroll */
    top: 60%; /* Mueve el punto de referencia al 60% de la altura de la pantalla */
    left: 50%; /* Mueve el punto de referencia a la mitad del ancho de la pantalla */
    transform: translate(-50%, -50%); /* Ajusta el elemento hacia atrás en un 50% de su propio tamaño para centrarlo perfectamente */
    z-index: 10; /* Asegura que el logo esté por encima del fondo */
    max-width: 40%; /* Limita el ancho máximo del contenedor del logo */
	max-height: 50%; /* Limita el ancho máximo del contenedor del logo */
    text-align: center; /* Centra la imagen dentro de su contenedor (para asegurar) */
}

/* Estilos para la imagen del logotipo */
.logo {
    max-width: 350px; /* Tamaño máximo del logo en pantallas grandes */
    height: auto; /* Mantiene la proporción de la imagen */
    width: 80vw; /* El logo ocupará el 80% del ancho del viewport */
    min-width: 180px; /* Ancho mínimo para que el logo no se haga demasiado pequeño */
}

/* Media Queries para ajustar el tamaño del logo en diferentes dispositivos */
/* Para tablets y dispositivos intermedios */
@media (max-width: 768px) {
    .logo {
        max-width: 300px;
        width: 70vw; /* Un poco más pequeño y más ajustado al viewport */
    }
}

/* Para dispositivos móviles pequeños */
@media (max-width: 480px) {
    .logo {
        max-width: 250px;
        width: 90vw; /* Ocupa un mayor porcentaje del ancho del viewport en móviles */
        min-width: 150px;
    }
}