/*CSS Página GORT*/

/*Fuente*/

@import url('https://fonts.googleapis.com/css2?family=Coda&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


/* Generales*/


h1 {
    text-align: center;
    font-family: "Coda", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 50px;
}


h2 {
    text-align: center;
    font-family: "Coda", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
}


h3 {
    text-align: center;
    font-family: "Coda", sans-serif;
    font-style: normal;
}

p {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: initial;
    font-weight: 500;
    font-size: 20px;
}


.coda-regular {
    font-family: "Coda", system-ui;
    font-weight: 400;
    font-style: normal;
}


/*HEADER*/

/*Nav bar*/
.navbar {
    /* El fondo degradado lo hice primero utilizando una imagen de fondo pero no me gustó como se veía ya que quería color un azul más intenso y cargado a la izquierda. Pregunté a Claude cómo podía generar imagenes degradadas y me dijo que se podía usar CSS. Me dio la sugerencia de usar https://cssgradient.io/ Use los colores institucionales, rojo y azul en los extremos e hice ajsutes y la platafomra me dio los estilos. Después vi en W3Schools que hay un generador para degradados y sombras y eso es lo que coloqué aquí abajo*/

    background: #000091;
    background: linear-gradient(143deg, rgba(0, 0, 145, 1) 26%, rgba(229, 47, 60, 1) 100%);

    box-shadow: 5px 5px 35px 0px rgba(0, 0, 0, 0.43);


}

.navbar img {
    height: 80px;
    padding-left: 32px;
}

.navbar a {
    color: white;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: initial;
    font-weight: 500;
    font-size: 20px;
}

.active {
    font-weight: bold !important;
    color: white !important;
}

.nav-link {
    padding-right: 65px !important;

}

.navbar-toggler {
    color: white;
}



/*CAROUSEL*/

#carouselExample {
    padding-top: 63px;
}


/*CONTENEDOR STATEMENT*/
.contenedor-statement {
    text-align: center;
    padding: 90px;
}


.contenedor-statement h1 {
    text-align: center;
    padding: 80px;
    color: #000091;
}

.contenedor-statement h2 {
    text-align: center;
    padding: 100px 46px;
    background-color: #E52F3C;
    color: white;
    border-radius: 100px 0px 100px 0px;
    background: linear-gradient(346deg, rgba(229, 47, 60, 1) 49%, rgba(227, 227, 227, 0.72) 100%);
}

/*SECCIÓN PROYECTOS*/
.contenedor-pro-pres {
    padding: 100px 0;
 }

.contenedor-pro-pres h2 {
    padding: 68px 0 80px;
}

.contenedor-pro-pres h3 {
   background-color: #E52F3C;
    color: white;
    font-weight: 400;
    font-size: 20px;
    padding:25px;   
}



/*SECCIÓN NOTICIAS*/
.contenedor-noticias {
    padding: 15px 0 60px;
}

.contenedor-noticias h2 {
    padding: 80px 0 30px;
}

.contenedor-noticias h3 {
    padding: 40px 50px;
}

.contenedor-noticias h4 {
    padding: 32px 24px
}

.contenedor-noticias p {
    padding: 11px 49px 60px;
}

.news {
    padding-bottom: 30px;
}

/*BOTON noticias*/
a.more-news {
    background-color: #000091;
    color: white;
    font-size: 20px;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
    border-radius: 25px;
    transition: ease .5s;
}

.more-news:hover,

.more-news:active {
    background-color: #e52f3bb8;
    color: white;
    transform: scale(1.3);
}



/*SECCIÓN CONSORCIO*/

.contenedor-consorcio {
    background: #B5B5E8;
    background: linear-gradient(360deg, rgba(181, 181, 232, 1) 31%, rgba(255, 255, 255, 0.72) 100%);
    padding: 0 102px;
}

.contenedor-consorcio h2 {
    padding: 80px 0 30px;
}

.contenedor-consorcio h3 {
    padding-top: 40px;
    padding-bottom: 30px;

}

.fila-logos {
    padding: 40px 0 !important;
}

.empresa-wrap {
    display: inline-block;
    text-align: center;
}

.empresa-wrap img {
    display: inline-block;
    max-width: 300px;
    height: auto;
}

.empresa-wrap p {
    width: 100%;
    text-align: center;
    padding-bottom: 50px;

}

/*Aquí averigué con Claude como podía acercar los primeros 4 logos entre sí porque había un espacio muy grande entre ellos*/

.fila-logos {
    padding: 0 90px;
}

.fila-logos img {
    max-width: 300px;
}

.p-ultimo {
    padding-bottom: 100px;
}


.francia-2030 p {
    padding-bottom: 45px;
    padding-top: 181px;
    color: #000091
}

.francia-logo img {
    padding-bottom: 100px;
}


a.flecha {
    position: fixed;
    bottom: 50px;
    right: 50px;
    display: none;
}

.flecha img {
    transition: all ease 1s
}

.flecha img:hover {
    transform: scale(1.5);
}


/*PAGINA PROYECTOS*/

.imagen-encabezado img {
    margin: 0 !important;
    padding: 68px 0 !important;
}

.no-visible {
    display: none;
    font-size: 10px;
}

.texto-encabezado p {
    padding: 50px 180px;
}

.contenedor-proyectos {
    padding: 50px 0;
}

.contenedor-proyectos h2 {
    padding-bottom: 27px;
}

.contenedor-proyectos p {
    padding: 15px 25px
}

.img-responsive {
    width: 80%;
}

.proyecto-dos {
    padding: 125px 0;
}

.proyecto-tres {
    padding-bottom: 100px;
}

/*PAGINA NOTICIAS*/

.noticia-principal H1 {
    padding: 70px 30px;
}

.noticia-principal H2 {
    padding: 40px 0 20px;
    margin-bottom: 0;
}

.noticia-principal p {
    padding: 11px 18px 60px;
}

.noticia-principal a {
    text-decoration: none;
    color: #38297d;
    transition: .5s ease;
}

.noticia-principal a:hover {
    color: #d03434;
    transform: scale(1.3) !important;
}

.contenedor-noticias p {
    padding: 11px 18px 60px;
}


/*PAGINA PUBLICATIONS*/

.container-publications h1 {
    padding: 70px 30px;
}

.top-publications h2 {
    padding: 18px 30px;
    font-size: 24px;
}


.publication-card {
    background-color: #F7B6B6;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0 0 0 / 60%);
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 545px;
}


.publication-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.publication-card img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 16px;
}


.publications-list h2 {
    padding: 100px 30px 70px;
}

.publications-list ol {
    padding-left: 150px;
    padding-bottom: 120px;
    font-size: 20px;
}

/*PAGINA ABOUT US*/

.contenedor-perfiles h2 {
    padding: 70px 85px;
    font-size: 25px;
}

.tarjeta-perfil img {
    width: 60%;
}

.tarjeta-perfil h3 {
    padding: 20px 30px 5px;
    font-size: 20px;
    font-weight: bolder;
    color: #000091;

}

.tarjeta-perfil h4 {
    padding: 5px 30px 5px;
    font-size: 14px;
    font-weight: bold;
    color: #000091;

}

.tarjeta-perfil p {
    font-size: 10px;
    padding: 2px 10px;
    text-align: left;
}

.tarjeta-perfil a {
    font-size: 10px;
    padding: 2px 10px;
    text-decoration: none;
    display: block;
    text-align: left;
    color: black;
    font-weight: bold
}

.tarjeta-perfil a:hover {
    color: #000091;
}


.tarjeta-perfil {
    background-color: #B5B5E8;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: auto;
}


.tarjeta-perfil:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}


.row.fila-perfiles {
    margin-bottom: 25px;
}


/*CONTACT US*/

/*Aqui Claude me ayudo y fui dando estilos*/

.form-card {
    background: #FBFBFE;
    border: 0.5px solid #b3b3b3;
    border-radius: 15px;
    padding: 2rem;
    max-width: 560px;
    margin: 1.5rem auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

.form-title {
    font-size: 45px;
    font-weight: 500;
    color: #000091;
    margin: 0 0 0.25rem;
    padding: 15px 0;
}

.form-sub {
    font-size: 18px;
    color: #000091;
    margin: 0 0 1.5rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    font-family: inherit;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
}

.radio-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: border-color 0.15s, background 0.15s;
}

.radio-option:hover {
    border-color: #AFA9EC;
    background: #EEEDFE;
}

.radio-option input[type="radio"] {
    width: auto;
    margin: 0;
    accent-color: #000091;
}

.radio-option.selected {
    border-color: #AFA9EC;
    background: #EEEDFE;
    color: #3C3489;
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.submit-btn {
    width: 100%;
    padding: 10px;
    font-size: 15px;
    font-weight: 500;
    background: #000091;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: background 0.15s;
}

.submit-btn:hover {
    background: #E52F3C;
}

.success-msg {
    display: none;
    text-align: center;
    padding: 1rem;
    background: #d1e7dd;
    border-radius: 8px;
    color: #0f5132;
    font-size: 14px;
    margin-top: 1rem;
}


h2.mapa {
    font-size: 45px;
    font-weight: 500;
    color: #000091;
    margin: 0 0 0.25rem;
    padding: 67px 0 45px;
}

.mapa-wrap {
    border-radius: 25px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    width: fit-content;
    margin: 0 auto;
}

/*PÁGINA EJEMPLO DE ARTÍCULO- SECCIÓN NOTICIAS*/

.encabezado-articulo img {
    padding: 150px 0 70px;
}

.encabezado-articulo h1  {
    color: #000091;
}

.encabezado-articulo h2  {
    font-size: 26px;
    padding: 60px 0 60px;
}

.contenedor-articulo h3 {
    text-align: left;
}


.imagenes-galeria {
    padding: 40px 0;
}

.back-news {
    padding: 90px 0;
}


.columna-boton {
    text-align: center;
}


/*FOOTER*/
.contenedor-footer {
    background: #000091;
    background: linear-gradient(143deg, rgba(0, 0, 145, 1) 26%, rgba(229, 47, 60, 1) 100%);
    padding: 40px 150px;
    padding: 60px 47px;
}

.contenedor-footer li {
    list-style: none;
    color: white;
    font-size: 20px;
}

.contenedor-footer a {
    color: white;
    text-decoration: none;
    font-size: 20px;
}

.redes-sociales img {
    width: 20px;
    vertical-align: middle;
}

.contenedor-footer p {
    color: white;
    font-size: 15px;
    text-align: right;
    padding-top: 150px;
}

a.aviso-privacidad {
    font-size: 16px;
}


.contenedor-footer ul {
    padding-bottom: 45px;
}

.fila-contactos {
    padding-left: 34px;
}


/* MEDIA QUERIES */

/* Large devices (less than 1200px) */
@media (max-width: 1200px) {
   
    .publications-list ol {
        padding-left: 50px;
        padding-bottom: 120px;
    }

    .texto-encabezado p {
        padding: 50px 100px;
    }
}



/* Medium devices (less than 992px) */
@media (max-width: 992px) {
    .navbar a {
        text-align: center;
    }

  
    a.flecha {
        display: inline-block;
    }

    .tarjeta-perfil p {
        padding: 0 40px
    }

    .tarjeta-perfil a {
        padding: 0 40px
    }

    .mapa-wrap {
        margin-bottom: 50px;

    }

    
}


/* Small devices (less than 768px) */
@media (max-width: 768px) {
    .contenedor-statement {
        text-align: center;
        padding: 94px 88px;
    }

    .contenedor-proyectos h2 {
        padding: 50px 20px
    }

    .contenedor-proyectos p {
        padding: 15px 20px
    }

    .publication-card {
        height: 460px;
    }

    .contenedor-statement h1 {
        padding: 80px 5px;
    }

    .contenedor-statement h2 {
        padding: 100px 0;
    }


    .contenedor-pro-pres {
        padding-bottom: 0;
    }

    .contenedor-pro-pres H3 {
        margin-bottom: 60px;
    }

    .contenedor-consorcio {
        padding: 0 30px;
    }

    .noticia {
        padding: 0 20px 86px;
    }

    .fila-logos {
        padding: 15px 0 !important;
    }

    .texto-encabezado h1 {
        font-size: 35px;
        padding-left: 50px;
        padding-right: 50px;
    }

    .container-publications h1 {
        padding: 50px 30px;
        font-size: 40px;
    }

    .publication-card {
        margin: 60px 40px;
        height: 453px;
    }
}


/* Extra small devices (less than 576px) */
@media (max-width: 576px) {
    .contenedor-proyectos h2 {
        font-size: 30px;
    }

    .two-col {
        grid-template-columns: 1fr;
    }

    .radio-group {
        grid-template-columns: 1fr;
    }

    .mapa-wrap {
        width: 100%;
        padding: 0 15px;
        margin-bottom: 50px;
    }
}