@charset "utf-8";
/* CSS Document */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilos generales del cuerpo */
body {
    font-family: 'Raleway', sans-serif; /* Se aplica la fuente Raleway */
	font-weight: 200 /* Se usa la versión ligera de la fuente */
    line-height: 1.6;/* Espaciado de líneas para mayor legibilidad */
    background-color: #fff;
    color: #000000;/* Color de texto principal */
}


/* Estilo para títulos (h1)(h2) */

h1 {
    color: #1A5276;/* Color ligeramente oscuro para mayor contraste */
    font-weight: 400;/* Peso ligero */
	font-size: 2.3rem;/* Tamaño grande para destacar */
	text-align: center;/* Títulos centrados */
    margin-bottom: 20px;/* Espaciado inferior */
}

h2 {
    color: #1A5276;/* Color ligeramente oscuro para mayor contraste */
	font-weight: 200; /* Estilo ultraligero para los títulos */
    font-size: 2.0em;/* Tamaño grande para destacar */
    text-align: center;/* Títulos centrados */
    margin-bottom: 20px;/* Espaciado inferior */
    }
h3 {
    color: #1A5276;/* Color ligeramente oscuro para mayor contraste */
	font-weight: 200; /* Estilo ultraligero para los títulos */
    font-size: 1.8.em;/* Tamaño grande para destacar */
    text-align: center;/* Títulos centrados */
    
    }

/* Estilo para los párrafos (p) */
p {
    font-weight: 400; /* Peso ligero para el cuerpo del texto */
    font-size: 1.1em; /* Tamaño moderado para una lectura cómoda */
    color: #000000;
    text-align: justify; /* Justificación de texto para mayor elegancia */
    margin-bottom: 20px;
    letter-spacing: 1px;
}

/* Estilo para los enlaces (a) */
a {
    font-weight: 200; /* Peso ligero para enlaces */
    text-decoration: none; /* Sin subrayado */
    color: #1A5276;
    text-align: center;
}

a:hover {
    text-decoration: underline;/* Subrayado al pasar el cursor */
}

/* Estilos para la barra de menú */       
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: white;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
        }

/* Estilos para el nombre de la empresa */
        .navbar .logo {
            font-size: 1.5rem;
            font-weight: 400;
            color: #1A5276;
        }

/* Contenedor para menú e iconos */
        .navbar .menu-lang {
            display: flex;
            align-items: center;
            gap: 20px;
        }        

/* Estilos para el menú */
        .navbar ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: 20px;
        }

        .navbar ul li {
            display: inline;
        }

        .navbar ul li a {
            text-decoration: none;
            color: #1A5276;
            font-size: 1rem;
            padding: 5px 10px;
        }

        .navbar ul li a:hover {
            border-bottom: 2px solid #1A5276;
        }

        /* Estilos para los íconos de idioma */
        .navbar .lang-icons {
            display: flex;
            gap: 10px;
        }

        .navbar .lang-icons img {
            width: 15px;
            height: 15px;
            cursor: pointer;
        }

        /* Añadir un margen superior al contenido para evitar que se superponga con la barra de menú */
        .content {
            margin-top: 60px;
            padding: 20px;
        }



/* Estilo para la sección del héroe */
.hero {
    display: flex;
	margin-top: 80px; /* Espaciado superior */
    justify-content: center;
    align-items: center;
    height: auto; /* La altura se ajusta según la pantalla */
    background-color: #fff;
}

/* Estilo para la sección del héroe (imagen principal) */
.hero img {
    display: flex;
    justify-content: center;
	align-items: center;
	max-width: 50%;
    height: auto;
    object-fit: cover; /* Asegura que la imagen se mantenga bien proporcionada */
}
/* Estilo para la sección about */
.about {
    padding: 4rem 0;
    text-align: center;
}
.about h2 {
    font-size: 2rem;
    margin-top: 40px; /* Espaciado superior */
	margin-bottom: 1rem;
    font-weight: 200; 
	
}

.about p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
    color: #272727;
	
}


/* Estilo para la sección de contacto */
.contact {
    padding: 0rem 0;
    border-bottom: 0 solid #1A5276;

}

.contact h2 {
    font-size: 2rem;
    margin-top: 40px; /* Espaciado superior */
	margin-bottom: 1rem;
    font-weight: 200; /* Mismo peso ligero para los títulos */
	
	
}

.contact a {
    font-weight: bold;
    font-size: 1.1rem;
	
}

/* Estilo para la sección de contacto 2 */
        .contact-section {
    		max-width: 450px;
    		margin: 0 auto;
    		padding-top: 20px;
    		padding-right: 0px;
    		padding-left: 80px;
    		padding-bottom: 20px;
    		color: #1A5276;           
        }

        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .contact-item i {
            font-size: 16px;
            color: #ABB2B9;
            margin-right: 15px;
        }

        .contact-item span {
            font-size: 18px;
            color: #1A5276;
        }


/* Estilo para el pie de página */
footer {
    background-color: #f7f7f7; /* Fondo claro para el pie de página */
    padding: 20px 0; /* Espaciado vertical */
    text-align: center; /* Centrado de texto */
    border-top: 1px solid #eaeaea;
}

footer p {
    font-weight: 200; /* Texto ligero en el pie de página */
    font-size: 0.9em; /* Tamaño reducido */
    color: #999; /* Color gris claro */
	text-align: center; /* Centrado de texto */
	border-top: 20px
}

/* Contenedores */
.container {
    width: 90%; /* Ajuste de ancho para pantallas pequeñas */
    max-width: 1200px;
    margin: 0 auto;
}


/* Ajustes de diseño para diferentes dispositivos */
@media (max-width: 768px) {
    h1 {
        font-size: 2em; /* Reducir tamaño de títulos en pantallas pequeñas */
    }

    h2 {
        font-size: 1.8em; /* Reducir tamaño de títulos en pantallas pequeñas */
    }

    p {
        font-size: 1em; /* Reducir tamaño de texto en pantallas pequeñas */
    }

    .hero img {
        height: auto;
    }
}