.page-container {
    position: relative;
    margin: 0 auto; /* Centra el contenedor horizontalmente */
    width: 1162px;
    height: 100vh;
    overflow: hidden;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    z-index: -1; /* Coloca la imagen de fondo detrás del contenido */
}

body {
    background-color: #485969;
    margin: 0;
    font-family: Arial, sans-serif;

    background-image: url('fondo2.png');
    background-size: auto;
    background-position: top;
    background-repeat: no-repeat;
}

header {
    background-color: #010101;
    color: white;
    padding: 0px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1162px;
    margin: 0 auto; /* Centra el encabezado horizontalmente */
}

.logo {
    max-width: 100px; /* Ajusta el tamaño de la imagen según sea necesario */
}

.nav {
    display: flex;
    align-items: center;
}

.nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav li {
    margin: 0 15px;
}

.menu {
    display: none;
    position: absolute;
    top: 60px;
    right: 0;
    width: 100%;
    background-color: #333;
    padding: 15px;
}

.menu-toggle {
    cursor: pointer;
    display: none;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 6px 0;
}

nav li a{
    display: block;
    color: white;
    text-align: center;
    padding: 14px 6px;
    text-decoration: none;
}

/* Aplicar un color de fondo específico al ítem deseado */
li.active {
    background-color: #8f8d8d; /* Color de fondo del ítem destacado */
}

.nav.active a{
    background-color: rgb(126, 126, 126);
}

.container {
    max-width: 1162px; /* Establece el ancho fijo del contenedor */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
    overflow: hidden; /* Para contener elementos flotantes dentro del contenedor */
}

.banner {
    text-align: center;
}

.banner img {
    width: 100%; /* Establece el ancho de la imagen al 100% del contenedor */
    max-width: 1162px; /* Establece el tamaño máximo de la imagen */
    height: auto; /* Permite que la altura se ajuste automáticamente manteniendo la proporción */
    margin-bottom: 0px; /* Agrega un margen inferior a la imagen */
}

main {
    display: flex;
    flex-wrap: nowrap; /* Evita que las secciones se envuelvan a la siguiente línea */
    justify-content: space-around;
    padding: 20px 0 23px 0;
    max-width: 1162px;
    margin: 0 auto; /* Centra el área central horizontalmente */
    /*border: 1px solid #ddd;*/
}

.imagen {
    transition: opacity 1s linear;
}

section {
    flex: 1;
    min-width: 0; /* Para permitir que las secciones se reduzcan a menos de 300px si es necesario */
    margin: 0px 10px;
    padding: 0px;
    /*border: 1px solid #ddd;*/
    box-sizing: border-box;
    font-size: 13px;
    line-height: 145%;
    color: #ffffff;
    display: flex;
    flex-direction: column;
}

/* Anchos diferentes para las áreas centrales 1 y 3, comparadas con 2 y 4 */
section:nth-child(odd) {
    flex: 1; /* Áreas centrales 1 y 3 tendrán un ancho relativo del doble de 1 */
}

section:nth-child(even) {
    flex: 1.3; /* Áreas centrales 2 y 4 tendrán un ancho relativo de 1 */
}

section img {
    height: auto; /* Permite que la altura se ajuste automáticamente manteniendo la proporción */
    max-width: 100%; /* Establece el tamaño máximo de la imagen al 100% del contenedor */   
    align-self: center; /* Centra la imagen dentro de su contenedor flex */
    padding-bottom: 20px; /* Esta línea separa las imágenes del texto cuando en resoluciones chicas el texto se ubica debajo */
}
        
section p {
    margin-top: 0px; /* Ubica el texto a la misma altura que las imágenes */
}

h2 {
    margin: 20px 0 0 10px; /* Agrega un margen superior e inferior al título */
    color: #ffffff;
    font-size: 22px;
}

h4 {
    margin: 10px 0 10px 0; /* Agrega un margen superior e inferior al título */
}


footer {
    background-color: #D63316;
    color: white;
    text-align: center;
    padding: 10px;
    margin-bottom: 52px; /* Hace que el footer no esté pegado al fondo (que no sea lo último en la página) */
    bottom: 0;
    width: 100%;
    height: 145px;
}

.centered-area {
    max-width: 1162px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.left-area,
.right-area {
    height: 100%;
    margin-top: 10px;
}

.left-area {
    width: 246px;
}

.right-area {
    max-width: 177px;
    margin-right: 20px;
}

/* ---------------------------------------------- Contacto ---------------------------------------------- */

#controlesmail {
	margin:0px 0px 0px 0px;
	/*background-color:#f1e20a;*/
}

#vuelveacontactar {
	color: #ffffff;
    font-size: medium;
    text-decoration: none;
}

#dinam {    /* Este es el idv que contiene el link al form de contacto y los textos de respuesta del evío de correo desde la página. */
	padding: 30px;
	/*background-color:#f1e20a;*/
}





form {
    width: 92%;
    max-width: 1162px; /* Ajusta según sea necesario */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 0px;
    margin: 0 auto 20px; /* Centrar horizontalmente */
    display: flex;
    flex-direction: column; /* Apilar elementos en columna */
    align-items: center; /* Centrar elementos horizontalmente */
    /*background-image: 'fondo1.png';*/     /* No funciona */
	/*background-color: rgb(238, 199, 174);*/
}

input[type="text"],
textarea {
    width: 100%;
    margin-bottom: 10px;
    padding: 6px;
    box-sizing: border-box;
	background-color: #E9EEEA;
}

input[type="submit"] {
    background-color: #D63316;
    color: white;
    padding: 10px 40px;
    margin: 0 20px 0 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

input[type="submit"]:hover {
    background-color: #bb2f16;
}










/* ------------------------------ Media Query para dispositivos más pequeños ---------------------------*/
@media screen and (max-width: 600px) {
    main {
        flex-direction: column;
    }

    section {
        min-width: 100%;
    }

    section img {
        width: 70%; /* Establece el ancho de la imagen al 70% del contenedor */
        margin: 0 auto; /* Centra la imagen horizontalmente */
    }

    .logo img {
        content: url('logo280x115c.png'); /* Ruta de la nueva imagen para dispositivos pequeños */
    }

    .right-area {
        margin-right: 0px;
    }
    
    /* -------------- Menú --------------- */
    .nav {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .menu {
        display: none;
        flex-direction: column;
        position: fixed; /* Cambiado a fixed */
        top: 60px;
        right: 0;
        width: 200px; /* Con esta línea se le da el ancho al menú que se desplega del logo del menú hamburquesa. */
        background-color: #0C0E0F;
        padding: 5px;
        z-index: 1000; /* Ajusta según sea necesario para que esté por encima del contenido */
    }

    .menu.active {
        display: flex; /* Ajusta según sea necesario */
    }

    .menu ul {
        list-style-type: none; /* Quita la viñeta */
        padding: 20;
    }

    .menu li {
        margin-bottom: 25px; /* Agrega espacio entre los elementos del menú */
    }

    .menu li a{
        color: #ffffff;
        text-decoration: none; /* Le saca el subrayado*/
    }

    .container {
        position: relative;
        z-index: 1; /* Ajusta según sea necesario */
    }
    
    form {
        width: 78%;     /* Si este porcentaje es mayor a 78 el form no entra en la pantalla cuando la orienteción del tel. es vertical. */
        padding: 30px;  /* Da un espacio dentro del form para que los elementos de entrada no queden pegados al borde. */
    }
    /* ------------------------------------- */
            .imagen {
            }
}