/* General Styles */
@font-face {
    font-family: 'FMBolyarSansPro';
    src: url('Fuentes/FMBolyarSansPro-800.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('Fuentes/Montserrat-Bold.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat light';
    src: url('Fuentes/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-style: normal;
}

body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif, 'FMBolyarSansPro','Montserrat';
    margin: 0;
    padding: 0;
    color: #333;
}

/* Navbar */

.navegacion-container {
    display: flex;
    justify-content: space-around;
    /*flex-wrap: wrap;*/
    background-color: #192D6F;
}

.navegacion-item1 {
    width: 85%;
    margin: 0;
    text-align: center;
}
.navegacion-item2 {
    width: 15%;
    margin: 0;
    text-align: center;
}


.navbar {
    background-color: #192D6F;
    overflow: hidden;
    text-align: right;
    padding-right: 0px;
    margin: 0;
}
.navbar2 {
    background-color: #192D6F;
    overflow: hidden;
    text-align: right;
    padding-right: 0px;
    margin: 0;
}

.navbar a {
    float: right;
    display: block;
    color: rgb(248, 248, 248);
    text-align: right;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 17px;
    font-family: 'Montserrat';
    font-weight:300;
    letter-spacing: 1px;
}
.navbar2 a {
    float: right;
    display: block;
    color: rgb(248, 248, 248);
    text-align: right;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 10px;
    text-decoration: none;
    font-size: 17px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.navbar2 a, .navbar2 img {
    border: none;
}
.navbar2 img {
    border: none;
    margin-top: 1px;
}

.navbar2 a:hover {
    background-color: #ddd;
    color: black;
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

#language-selector a {
    color: #000; /* Cambia el color según tu diseño */
    text-decoration: none;
    margin: 0 0px; /* Reduce el espacio entre EN y ES */
    padding: 0 0px;
}

#language-selector a:hover {
    text-decoration: underline;
}

#language-icon {
    width: 25px; /* Ajusta el tamaño del icono según necesites */
    height: 25px;
    margin-right: 5px;
    text-align: center;
    padding-top:7px;
}

/* Header Section */
.header-bg {
    position: relative;
    background: url('Images/facultad_de_ingenieria_blue_tone.jpg') no-repeat center center;
    background-size: cover;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: left;
    color: rgb(248, 248, 248);
    text-align: center;
    padding-left: 200px;
}

.logo {
    width: 300px;
    position: left;
}

.slogan {
    margin-top: 115px;
    padding-left: 50px;
    font-size: 25px;
    font-family: 'FMBolyarSansPro';
}

/* Image Strip */
.image-strip {
    display: flex;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    padding: 0;
    height: 170px;
}

.image-strip img {
    width: 16.66%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .navegacion-container {
        background-color: #192D6F;
        height: max-content;
    }
    
    .navegacion-item1 {
        width: 70%;
        padding-right: 30%;
    }
    .navegacion-item2 {
        width: 30%;
        display: flex;
        justify-content: flex-end;
        align-items: top;
    }
    .navbar a {
        float: none;
        display: block;
        text-align: right;
    }
    .navbar2 a {
        font-size: 13px;
    }
    #language-icon {
        width: 18px; /* Ajusta el tamaño del icono según necesites */
        height: 18px;
        padding-top:9px;
    }

    .header-bg {
        padding-left: 20px;
        height: auto;
        justify-content: center;
        text-align: center;
    }

    .header-bg .logo {
        width: 50%;
        max-width: 300px;
        margin: 0 auto;
    }

    .slogan {
        margin-top: 20px;
        padding-left: 0;
        padding-right: 10%;
        font-size: 20px;
    }

    .image-strip img {
        width: 50%;
        height: auto;
    }
}




/* Sections */
section {
    padding: 60px 20px;
}

.background-light {
    background-color: #E6EAF9;
    padding-top: 20px;
    padding-bottom: 25px;
}

.background-soft-blue {
    background-color: #97A9E8;
    padding-top: 20px;
    padding-bottom: 25px;
}
.background-blue {
    background-color: #192D6F;
    padding-top: 20px;
    padding-bottom: 25px;
}
h2 {
    text-align: center;
    margin-bottom: 40px;
    font-family: 'Montserrat';
    font-size: 1.7em;
    font-weight: 300;
}


/* Contenedor principal */
.seccion-destacada {
    background-color: #97A9E8; /* Fondo oscuro */
    color: #333; /* Texto blanco */
    padding: 30px 20px;
    border-radius: 10px;
    margin: 20px auto;
    max-width: 1200px;
    text-align: center; /* Título centrado */
}

/* Contenedor del contenido ( texto) */
.contenido-destacado {
    display: flex; /* Flexbox para texto */
    align-items: center ; /* Centrado vertical */
    justify-content: center;
    padding-bottom: 3%;
    gap: 0;
}


/* Título centrado */
.titulo-destacado {
    font-size: 1.3em;
    margin-bottom: 5px; /* Espacio debajo del título */
    margin-top: 5px;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: 'FMBolyarSansPro';
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: right;
}

/* Estilo del ícono */
.icono-destacado {
    flex: 0 0 12px; /* Tamaño fijo del ícono */
    display: flex;
    /**justify-content: center;**/
    align-items: left;
}

.icono-destacado img {
    width: 3em; /* Tamaño del ícono */
    height: auto;
    align-items: flex-start;
}


/* Dos columnas - Imagen y texto */
.contenido-destacado-II {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Imagen a la izquierda */
.imagen-destacada {
  flex: 0 0 25%;
  max-width: 25%;
}

.imagen-destacada img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Texto a la derecha */
.texto-destacado {
  flex: 1;
  max-width: 55%;
  color: #333;
  font-size: 1.3em;
  line-height: 1.4;
  text-align: left;
}

.texto-destacado p {
  margin: 0px;
}

.texto-destacado ul {
  padding-left: 50px;
  list-style-type: disc;
}

.texto-destacado li {
  margin-bottom: 10px;
}


/* Media Query para pantallas más pequeñas */
@media screen and (max-width: 768px) {
    .titulo-destacado {
        margin-bottom: 5px; /* Espacio debajo del título */
        text-align: center; /* Centra el texto */
    }
    
    .contenido-destacado {
        flex-direction: column; /* Cambia a vertical */
        text-align: center; /* Centra el texto */
    }

    .icono-destacado {
        margin: 2px 0; /* Espacio entre el logo y el texto */
        width: 60px; /* Reduce el tamaño del ícono en móviles */
        height: auto;
        padding-left: 0%;
        padding-right: 0%;
    }
    
    .icono-destacado img {
        width: 60px; /* Tamaño del ícono */
        height: auto;
        padding-bottom: 0%;
    }

    .contenido-destacado-II {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .imagen-destacada,
    .texto-destacado {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .imagen-destacada img {
        width: 50%;
    }

    .texto-destacado {
        text-align: justify;
        padding: 0 10px;
    }

    .texto-destacado ul {
        text-align: left;
        padding-left: 30px;
    }
}




/* Services Section */
.services-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    color: #333;
}

.service-item {
    text-align: center;
    width: 26%;
    margin: 10px 0;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 15px;
    text-align: center;
    padding: 20px;
    font-size: 17px; 
    color: #333;
}

.service-item img {
    width: 50px;
    height: 50px;
}

.service-item h3 {
    margin-top: 20px;
    font-size: 1.2em;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

@media screen and (max-width: 768px) {
    .services-container {
        flex-direction: column;
        align-items: center;
    }

    .service-item {
        width: 90%;
        margin: 10px 0;
    }
}

/** Nuevo Ver mas**/

/* Ocultar servicios extra */
.service-item:nth-child(n+4) {
  display: none;
}

.service-item.visible {
  display: block;
}

/* Botón */
.ver-mas-servicios {
  text-align: center;
  margin-top: 20px;
}

.ver-mas-servicios button {
  background: none;
  border: none;
  color: #192D6F;
  font-size: 0.8em;
  cursor: pointer;
  font-weight: bold;
  font-family: 'FMBolyarSansPro';
}

.ver-mas-servicios .flecha {
  display: block;
  font-size: 1.5em;
  transition: transform 0.3s ease;
}

.ver-mas-servicios button.abierto .flecha {
  transform: rotate(180deg);
}

.flecha-icono {
  width: 50px;
  height: auto;
  margin-top: 5px;
  transition: transform 0.4s ease;
}

.ver-mas-servicios button.abierto .flecha-icono {
  transform: rotate(180deg);
}







/* About Us Section */

/* General */
.sobre-nosotros-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Título centrado */
.titulo-sobre-nosotros {
  text-align: center;
  font-size: 2em;
  margin-bottom: 40px;
  color: rgb(248, 248, 248);
}

/* Dos columnas */
.contenido-sobre-nosotros {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

/* Columna izquierda */
.texto-sobre-nosotros {
  flex-basis: 54%;
  max-width: 60%;
  text-align: right;
  color: rgb(248, 248, 248);
  padding-left: 5%;
  letter-spacing: 1px;
  font-weight: 200;
  padding-top: 2%;
  padding-right: 4%;
}

.texto-sobre-nosotros p {
  margin-bottom: 20px;
  font-size: 1.2em;
  line-height: 1.3;
}

/* Columna derecha */
.perfil-sobre-nosotros {
  flex-basis: 25%;
  max-width: 30%;
  text-align: center;
  color: rgb(248, 248, 248);
  padding-left: 4%;
}

.perfil-sobre-nosotros img {
  width: 90%;
  max-width: 200px;
  border-radius: 10px;
  margin-bottom: 15px;
}

.perfil-sobre-nosotros h2 {
  margin: 5px 0;
  font-size: 1.2em;
}

.perfil-sobre-nosotros h3 {
  margin: 5px 0;
  font-size: 1em;
}

.perfil-sobre-nosotros p {
  font-size: 1em;
  line-height: 1.4;
}

/* RESPONSIVE */
@media screen and (max-width: 768px) {
  .contenido-sobre-nosotros {
    flex-direction: column;
    align-items: center;
  }

  .texto-sobre-nosotros,
  .perfil-sobre-nosotros {
    flex-basis: 90%;
    max-width: 100%;
    margin: 0;
    padding: 0 20px;
    text-align: center;
  }

  .texto-sobre-nosotros {
    text-align: justify;
  }

  .perfil-sobre-nosotros img {
    width: 100%;
    max-width: 200px;
    margin: 0 auto 15px auto;
  }
}





/* News Section */
.news-container {
    display: flex;
    justify-content: space-around;
    /*flex-wrap: wrap;*/
    color: #333;
}

.news-item {
    width: 30%;
    margin: 10px;
    text-align: center;
}

.news-item img {
    border-radius: 5px;
    width: 350px;
    height: 200px;
    object-fit: cover;
    color: #333;
}

.news-item p {
    margin-top: 10px;
    font-family: 'Montserrat';
    font-weight: 500;
    letter-spacing: 0.01em;
    font-size: 0.9em;
    padding-left: 8%;
    padding-right: 8%;
    line-height: 1.3;
}

@media screen and (max-width: 768px) {
    .news-container {
        flex-direction: column;
        align-items: center;
    }

    .news-item {
        width: 90%;
        margin-bottom: 20px;
    }
}




/* Contact Section */
.contact-container {
    display: flex;
    justify-content: space-around;
    /*flex-wrap: wrap;*/
    color: #333;
}

.contact-item1 {
    width: 30%;
    padding-left: 16%;
    padding-top: 40px;
    text-align: left;
    color: #333;   
    font-size: large;
    font-weight: 700; 
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

.contact-item1 p {
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 5px;
    letter-spacing: 1px;
}
.contact-item1 a {
    text-decoration: none;
    padding-left: 10px;
    color: inherit
}

.contact-item2 {
    width: 70%;
    margin: 40px;
    text-align: center;
    font-size: large;
    font-weight: 700; 
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 1em;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form label {
    margin-bottom: 0.5em;
    color: #333;
    font-weight: bold;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

form input {
    padding: 0.5em;
    margin-bottom: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: large;
}
form textarea {
    padding: 0.5em;
    margin-bottom: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 150px; /* Ajusta la altura según tu preferencia */
    resize: vertical; /* Permite que el usuario cambie la altura verticalmente, si lo deseas */
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: large;
}
form button {
    padding: 0.7em;
    color: #333;
    background-color: #97A9E8;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
}

form button:hover {
    background-color: #0056b3;
    color: white;
}

.form-response p {
    font-size: 16px;
    margin-top: 10px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.form-response .success {
    color: #333;
}
.form-response .error {
    color: rgb(224, 129, 4);
}

/* Footer */
footer {
    background-color: #192D6F;
    color: white;
    text-align: center;
    padding: 10px 0;
}

/* Back to Top Button */
#backToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #192D6F;
    color: white;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
}
#backToTopBtn img {
    width: 45px;
    height: 45px;
    align-items: center;
}


#backToTopBtn:hover {
    background-color: #555;
}
/*confirmación de correo*/
.barconfirm {
    background-color: #192D6F;
    overflow: hidden;
    text-align: right;
    padding-right: 0px;
    margin: 0;
}

.barconfirm a {
    float: right;
    display: block;
    color: white;
    text-align: right;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 10px;
    text-decoration: none;
    font-size: 18px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.barconfirm a:hover {
    background-color: #ddd;
    color: black;
}

.barconfirm img {
    border: none;
    margin-top: 2px;
}

.confirm {
    text-align: center;
    background-color: #f1f7fd;
    padding-top: 5%;
    padding-bottom: 5%;
}
.confirm h1{
    font-family: 'FMBolyarSansPro';
    font-size: xx-large;
    margin: 5%;
}
.confirm p{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: large;
}

.contact-icons {
    display: flex;
    justify-content: center; /* Centra los íconos horizontalmente */
    align-items: center; /* Centra los íconos verticalmente */
    gap: 40px; /* Ajusta la separación entre los íconos */
    padding-top: 30px;
}

.contact-icons a {
    text-decoration: none;
    color: inherit; /* Mantiene el color original del ícono */
}

.barconfirm2 {
    background-color: #76ADCD;
    overflow: hidden;
    align-items: center;
}

.barconfirm2 a {
    float: right;
    display: block;
    color: #333;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    text-decoration: none;
    font-size: 18px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding-right: 10%;
    padding-left: 10%;
}
.barconfirm2 a:hover {
    background-color: #ddd;
    color: black;
}
.divider-confirm {
    border-left: 2px solid #333; /* Define el color y grosor de la línea */
    height: 40px; /* Define la altura de la línea */
    margin: 0 10px; /* Define la separación entre la línea y las secciones */
}

@media screen and (max-width: 768px) {
    
    #contact p {
        padding-left: 10px;
        padding-right: 10px;
    }
    .contact-container {
        display: flex;
        flex-direction: column;
    }
    .contact-item1 {
        width: 90%;
        padding-left: 15%;
    }

    .contact-item2 {
        margin-top: 20px;
    }
}