/* Estilos para el contenedor principal */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Evita el desplazamiento */
}

/* Estilos para centrar y ajustar el tamaño del botón */
.search-advanced-button {
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.search-advanced-button button {
    font-family: 'Helvetica', sans-serif !important; /* Aumenta la especificidad con !important */
    padding: 15px 30px; /* Aumenta el tamaño del botón */
    font-size: 17px; /* Aumenta el tamaño del texto del botón */
    border: none;
    background-color: #102D69; /* Color de fondo del botón */
    color: white; /* Color del texto */
    cursor: pointer;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra del botón */
    transition: transform 0.3s;
}

.search-advanced-button button:hover {
    transform: scale(1.5); /* Efecto al pasar el ratón */
}

/* Estilos para ajustar el tamaño de la imagen */
.inicioimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Hace que la imagen cubra el contenedor sin distorsión */
    z-index: -1; /* Coloca la imagen detrás del contenido */
}


header {
    background-color: #102D69;
    color: #fff;
    text-align: center;
    padding: 1em 0;
}

h1 {
    font-size: 15px; /* Ajusta el tamaño del título h1 según sea necesario */
}

h2 {
    font-size: 12px; /* Ajusta el tamaño del título h2 según sea necesario */
}

body {
    font-family: Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

.logo-inferior {
    width: 100%; /* Ajusta el tamaño según sea necesario */
    max-width: 300px; /* Tamaño máximo de la imagen */
    height: auto; /* Mantiene la proporción de la imagen */
    margin-top: -100px; /* Ajusta el margen superior según sea necesario */
    margin-left: 0; /* Alínea la imagen a la izquierda */
    display: block; /* Para hacer que el logo se comporte como un bloque */
}

/* Estilos para pantallas más pequeñas */
@media (max-width: 600px) {
    .logo-inferior {
        max-width: 100px; /* Tamaño máximo de la imagen en pantallas muy pequeñas */
        margin-top: 0px; /* Ajusta el margen superior para pantallas pequeñas */
        margin-left: auto; /* Centra la imagen */
        margin-right: auto;
        position: relative; /* Para que podamos posicionarlo relativo a su contenedor */
    }

    .inicioimg {
        max-width: 100%; /* Ajusta el ancho máximo de la imagen para pantallas pequeñas */
    }
}

/* Ajustes adicionales para pantallas muy pequeñas */
@media (max-width: 400px) {
    .logo-inferior {
        max-width: 300px; /* Tamaño máximo de la imagen en pantallas muy pequeñas */
        margin-top: 40px; /* Ajusta el margen superior para pantallas muy pequeñas */
    }
}

/* Ajustes para centrar sobre h1 y h2 */
@media (max-width: 600px) {
    main {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    h1, h2 {
        margin-top: 20px; /* Ajusta el margen superior de h1 y h2 para pantallas pequeñas */
    }
}