/* CSS Document */
/* FONTS *****************/
/* https://transfonter.org */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-BoldItalic.woff2') format('woff2'),
        url('../fonts/Montserrat-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2'),
        url('../fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.woff2') format('woff2'),
        url('../fonts/Montserrat-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Italic.woff2') format('woff2'),
        url('../fonts/Montserrat-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-MediumItalic.woff2') format('woff2'),
        url('../fonts/Montserrat-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2'),
        url('../fonts/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* GENERAL *****************/
* {
	margin: 0px;
	padding: 0px;
    box-sizing: border-box;
}
html {
    display: block; width: 100%; height: auto;
    font-family: 'Montserrat', sans-serif; font-weight: 500;
    /* calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */
    font-size: calc(14px + (32 - 14) * ((100vw - 300px) / (1800 - 300)));
    background-color: #042D5B; color: #fff;
}
body {
    display: block; width: 100%; height: auto;
}
html.anchored, html.anchored body {overflow: hidden; height: 100%;}

a {color: #fff; text-decoration: underline;}
button, input, select, textarea {background: none; color: inherit; border: none; font: inherit; cursor: pointer; outline: none !important; -moz-appearance: none; -webkit-appearance: none; appearance: none;}
img {max-width: 100%; height: auto;}

.btn {display: inline-block; padding: .5rem 1rem; background-color: #333 !important; color: #FFCF1E !important; text-transform: uppercase; font-size: 1rem; transition: transform .3s;}
.btn:hover {transform: scale(1.1); background-color: #000 !important;}
.btn:active {transform: scale(.9); transition: none;}
.btn.alt {background-color: #fff !important; color: #333 !important;}
a.btn {text-decoration: none !important; box-shadow: none !important;}

.html_editor {}
.html_editor h1 {font-size: 1.8rem; color: #000; font-weight: normal; padding: .5rem 0 1.4rem 0;}
.html_editor h2 {font-size: 1.6rem; color: #000; font-weight: normal; padding: .5rem 0 1.4rem 0;}
.html_editor h3 {font-size: 1.4rem; color: #222; font-weight: normal; padding: .5rem 0 1.2rem 0;}
.html_editor h4 {font-size: 1.2rem; color: #222; font-weight: normal; padding: .5rem 0 1.2rem 0;}
.html_editor h5 {font-size: 1.1rem; color: #444; font-weight: normal; padding: .5rem 0 1rem 0;}
.html_editor h6 {font-size: 1rem; color: #444; padding: .5rem 0 1rem 0;}
.html_editor p {font-size: 1rem; color: #444; padding-bottom: 1rem;}
.html_editor ul, .html_editor ol {padding: 0 0 .5rem 2rem;}
.html_editor dl {padding-bottom: .5rem;}
.html_editor ul li, .html_editor ol li, .html_editor dl dt, .html_editor dl dd {font-size: 1rem; color: #444; padding-bottom: .5rem;}
.html_editor dt {font-weight: bold;}
.html_editor a:not(.raw) {color: #042D5B; text-decoration: underline;}
.html_editor a:not(.raw):hover {text-decoration: none; color: #fff; background-color: #042D5B; box-shadow: 0.2em 0 0 #042D5B, -0.2em 0 0 #042D5B;}
.html_editor table {font-size: 1rem; background-color: #fff; width: 100%; text-align: left; border-collapse: collapse; margin-bottom: 1rem;}
.html_editor table thead {background-color: #444; color: #fff; font-weight: bold;}
.html_editor table th {background-color: #444; color: #fff; font-size: .9rem; font-weight: bold; white-space: nowrap; padding: .5rem; text-transform: uppercase; border-bottom: 1px solid #fff;}
.html_editor table td {padding: .5rem; border-bottom: 1px solid #444; vertical-align: top;}
.html_editor img {display: block; max-width: 100%; max-height: 50vw; margin: 1rem auto 2rem;}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* ESPECÍFICO *****************/

/* CABECERA PÁGINA */
body > header {display: block;}
div#header {display: flex; flex-flow: row nowrap; justify-content: space-between; width: 100%; height: auto; position: fixed; top: 0; left: 0; z-index: 90; background-color: rgba(255, 255, 255, .9); transition: background-color 3s; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);}
div#header h1 span,
div#header button#open_menu span {display: none;}
div#header h1 {display: block; width: 15rem; height: 1.4rem; margin: 1rem 0 1rem 1rem;}
div#header h1 a {display: block; width: 100%; height: 100%; background: transparent url('../images/reach-logo-final2.png') no-repeat left center; background-size: contain; cursor: pointer;}
div#header h1 a:active {transform: scale(.95);}
div#header button#open_menu {display: block; width: .9rem; height: .9rem; margin: 1.3rem 1.5rem 0 0; background: transparent url('../images/ico_menu_b.svg') no-repeat left center; background-size: contain; cursor: pointer;}
div#header button#open_menu:active {transform: scale(.8);}


nav#menu {
	display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 95;
	visibility: hidden; opacity: 0; transition: opacity .5s, visibility .5s;
	background-color: rgba(0,113,185,.9); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); overflow: auto; overflow-x: none;
	color: #fff;
}
nav#menu.show {display: block; visibility: visible; opacity: 1;}
nav#menu h2 span,
nav#menu button#close_menu span {display: none;}
nav#menu h2 {display: block; width: 15rem; height: 1.4rem; position: fixed; top: 1rem; left: 1rem; background: transparent url('../images/logo_reach_letters.svg') no-repeat left center; background-size: contain;}
nav#menu a {color: #fff;}
nav#menu ul {display: inline-block; position: absolute; top: 20vh; left: 50%; transform: translateX(-50%); text-align: center; list-style: none;}
nav#menu ul li {display: block; padding: .2rem 0;}
nav#menu ul li a {display: inline-block; color: #fff; text-decoration: none; padding: .2rem 1rem; border-radius: 1rem; transition: background-color .5s, color .5s;}
nav#menu ul li a:hover {background-color: #fff; color: #042D5B;}
nav#menu ul li a:active {transform: scale(.9);}
nav#menu button#close_menu {display: block; width: .9rem; height: .9rem; position: fixed; top: 1.3rem; right: 1.5rem; background: transparent url('../images/ico_close_w.svg') no-repeat left center; background-size: contain; cursor: pointer;}
nav#menu button#close_menu:active {transform: scale(.8);}

/* MAIN */
body > main {display: block; z-index: 1;}
body > main > section {display: flex; justify-content: flex-start; align-items: center; padding-top: 3.4rem; min-height: 100vh; position: relative; z-index: 2; opacity: 0; visibility: hidden; transition: opacity 3s, visibility 3s;}
body > main > section.show {opacity: 1; visibility: visible;}
body > main > section header {display: block; padding: 1rem 0;}
body > main > section header h1 {font-weight: bold; font-size: .8rem; text-transform: uppercase; opacity: .6;}
body > main > section header h2 {font-weight: 500; font-size: 1.2rem;}
body > main > section div.content {display: block; padding: 1rem; width: 100%; min-height: 100%;}

/* MAIN: HOME */
section#home {display: block; position: relative; background-color: #042D5B; color: #fff;}
section#home h1 {display: none;}
section#home::before {display: block; content: ""; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #042D5B url('../images/fondo2p.jpg') no-repeat center center; background-size: cover; z-index: 1;}
section#home div.content {display: flex; width: 100%; height: 100vh; z-index: 2; position: relative;}
section#home div.content div.group {display: block; width: 50%;}
section#home div.balloon2 {
	display: flex; justify-content: center; align-items: center; width: 18em; height: 18em; padding: 2em; border-radius: 50%; text-align: center; background-color: rgba(4,45,91,.7); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); color: #fff;
	position: absolute; top: 50%; left: 0; transform: translateY(-60%); opacity: 0; visibility: hidden; transition: opacity 3s, visibility 3s, left 3s;
}
section#home div.balloon3 {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 18em; 
    height: 18em; 
    padding: 2em; 
    /* CAMBIO CLAVE: Eliminar el 50% para que sea un cuadrado */
    border-radius: 10px; /* Puedes usar 0 para bordes rectos o un valor pequeño (como 10px) para esquinas ligeramente redondeadas */ 
    text-align: center; 
    background-color: rgba(4,45,91,.7); 
    -webkit-backdrop-filter: blur(5px); 
    backdrop-filter: blur(5px); 
    color: #fff;
    
    position: absolute; 
    top: 50%; 
    left: 0; 
    transform: translateY(-60%); 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 3s, visibility 3s, left 3s;
}

section#home div.balloon {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 18em; 
    height: 18em; 
    padding: 2em; 
    
    /* CAMBIOS CLAVE PARA EL HEXÁGONO */
    border-radius: 0; /* Aseguramos que no haya bordes redondeados */
    /* Define la forma del hexágono usando las coordenadas de sus 6 esquinas */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    /* Prefijo para compatibilidad en navegadores antiguos (aunque menos necesario hoy) */
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    
    text-align: center; 
    background-color: rgba(4,45,91,.7); 
    -webkit-backdrop-filter: blur(5px); 
    backdrop-filter: blur(5px); 
    color: #fff;
    
    position: absolute; 
    top: 50%; 
    left: 0; 
    transform: translateY(-60%); 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 3s, visibility 3s, left 3s;
}
section#home.show div.balloon {left: 15%; opacity: 1; visibility: visible;}
@media (orientation: portrait) {
	section#home div.balloon {transform: none; top: auto; bottom: 0; transition: opacity 3s, visibility 3s, bottom 3s;}
	section#home.show div.balloon {transform: none; bottom: 20%;}
}


/* MAIN: CLINICAL NEEDS */
body.clinical_needx div#header {background-color: rgba(0,113,185,.9);}
body.clinical_need div#header {background-color: rgba(255,255,255,.9);}
section#clinical_need { color: #fff; background: #0071B9 url(../images/map_wt.svg) no-repeat right 2rem center; background-size: 55% auto;}
section#clinical_need div.content {display: block; width: 60%; padding-left: 5%; opacity: 0; visibility: hidden; transform: translateX(20%); transition: opacity 3s, visibility 3s, transform 3s;}
section#clinical_need.show div.content { opacity: 1; visibility: visible; transform: translateX(0);}
section#clinical_need header {width: 20rem;}
section#clinical_need p {font-size: .6rem; padding-bottom: 1rem;}
section#clinical_need dl {display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr; grid-column-gap: 3rem; grid-row-gap: 0px;}
section#clinical_need dl div {display: block; border-left: 2px solid rgba(255,255,255,.3); padding-left: .6rem;}
section#clinical_need dl dt {display: block; font-weight: bold; font-size: 1.2rem; padding-bottom: .6rem;}
section#clinical_need dl dd {display: block; font-weight: 500; font-size: .6rem;}
@media (orientation: portrait) {
	section#clinical_need {background-position: right 2rem top 20%; background-size: 80% auto;}
	section#clinical_need div.content {width: 85%; transform: none; transform: translateY(-30%);}
	section#clinical_need.show div.content {transform: translateY(0);}
	section#clinical_need dl {display: block;}
	section#clinical_need dl div:first-child {margin-bottom: 2rem;}
}

/* MAIN: MEDICS TECHNOLOGY */
section#reach_technology {background: transparent url('../images/fondo3p.jpg') no-repeat center center; background-size: cover;}
section#reach_technology header h1 {color: #0071B9; opacity: 1;}
section#reach_technology header h2 {line-height: 1.4rem; color: #042D5B;}
section#reach_technology div.content {display: flex; flex-flow: row wrap; justify-content: space-evenly; overflow: hidden;}
section#reach_technology div.balloon {
	display: flex; justify-content: center; align-items: center; margin: 1rem 0; padding: 2em; border-radius: 50%; text-align: center; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	opacity: 0; visibility: hidden; transition: opacity 3s, visibility 3s, transform 3s;
}
section#reach_technology div.balloon.b1 {
	width: 20em; height: 20em; align-self: flex-start; background-color: rgba(255,255,255,.9); color: #042D5B;
	transform: translateX(-15vw);
}
section#reach_technology div.balloon.h1 {
    width: 20em;
    height: 20em;
    align-self: flex-start;
    background-color: rgba(255,255,255,.9);
    color: #042D5B;
    transform: translateX(-15vw);
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2em;
}

section#reach_technology div.balloon.c1 {
    width: 20em;
    height: 20em;
    align-self: flex-start;
    background-color: rgba(255,255,255,.9);
    color: #042D5B;
    transform: translateX(-15vw);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2em;
    border-radius: 1.5em; /* esquinas redondeadas */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* sombra sutil opcional */
}



section#reach_technology div.balloon.b2 {
	width: 15em; height: 15em; align-self: flex-end; background-color: rgba(4,45,91,.9); color: #fff;
	transform: translateX(15vw);
}
section#reach_technology.show div.balloon {opacity: 1; visibility: visible; transform: translateX(0);}
section#reach_technology div.balloon p {font-size: .6rem; padding-bottom: 0;}


/* MAIN: TEAM */
body.team div#header {background-color: rgba(4,45,91,.9);}


section#team {color: #fff; background: #042D5B url(../images/team_wt.svg) no-repeat right 2rem bottom 2rem; background-size: 70% auto;}
section#team div.content {opacity: 0; visibility: hidden; transform: translateY(30%); transition: opacity 3s, visibility 3s, transform 3s;}
section#team.show div.content {transform: translateY(0); opacity: 1; visibility: visible;}
section#team header h1 {color: #80B8DC; opacity: 1;}
section#team div.groups {display: flex; flex-flow: row wrap; gap: 1rem;}
section#team div.groups div.g {display: block; border-left: 2px solid rgba(255,255,255,.3); padding: .1rem .5rem 0 .5rem;}
section#team div.groups h3 {display: block; font-weight: 500; font-size: .7rem; color: #80B8DC; margin-bottom: .5rem;}
section#team div.groups figure.logo {display: inline-block; width: auto; height: 1.5rem; margin-bottom: .5rem;}
section#team div.groups figure.logo img {display: block; width: auto; height: 100%;}
section#team div.groups figure.logo:not(.xl) img {height: 80%;}
section#team div.groups ul {display: flex; flex-flow: row wrap; list-style: none;}
section#team div.groups ul li {display: grid; grid-template-columns: 4.5rem 8rem; grid-template-rows: 1fr; grid-column-gap: .5rem; grid-row-gap: 0px; justify-items: start; align-items: center; padding-bottom: .5rem;}
section#team div.groups ul li figure {grid-area: 1 / 1 / 2 / 2; display: block; width: 4.5rem; height: 4.5rem; background-color: #042D5B; border-radius: 50%; overflow: hidden;}
section#team div.groups ul li figure img {display: block; object-fit: cover;}
section#team div.groups ul li div.details {grid-area: 1 / 2 / 2 / 3; display: block;}
section#team div.groups ul li div.details h4 {display: block; font-weight: 500; font-size: .6rem; padding-bottom: .2rem;}
section#team div.groups ul li div.details p {display: block; font-weight: 500; font-style: italic; font-size: .5rem; color: #80B8DC; margin-bottom: .3rem;}
section#team div.groups ul li div.details p.pos {display: inline-block; vertical-align: middle; font-style: normal; font-size: .4rem; text-transform: uppercase; padding: .1rem .3rem; border-radius: .5rem; background-color: #fff; color: #042D5B;}
section#team div.groups ul li div.details a {display: inline-block; width: 1rem; height: 1rem; background: transparent url('../images/ico_linkedin_b2.svg') no-repeat center center; background-size: contain;}
section#team div.groups ul li div.details a span {display: none;}
section#team div.groups ul li figure.logo-cuadrado {
  border-radius: 0;            /* ya no circular */
  background-color: #fff;      /* fondo blanco para el logo */
  border: 1px solid rgba(255,255,255,.2);
  display: flex;
  justify-content: center;
  align-items: center;
}


section#team div.groups ul li figure.logo-cuadrado img {
  width: 100%;
  height: auto;
  object-fit: contain; /* mantiene proporciones del logo */
}


/* PRUEBA PARA HOVER */
/* EFECTO HOVER PARA LOGO-CUADRADO (TEAM SECTION) */
/* AÑADE O MODIFICA ESTE BLOQUE EN styles.css */

/* Estilos base para la figura del equipo (asegura que la foto transicione) */
section#team div.groups ul li figure.logo-cuadrado {
    /* La transición de opacidad SÍ funciona en la imagen de la persona */
    transition: background-color 0.5s ease-in-out; 
    
    /* Es mejor definir las propiedades de tamaño de fondo en el estado base */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80% auto; /* El logo de fondo ocupará el 80% */
}

/* ESTADO HOVER */
section#team div.groups ul li figure.logo-cuadrado:hover {
    /* 1. Aplicamos el color de fondo AZUL OSCURO, asumiendo que el logo de IRYCIS es blanco o claro */
    background-color: #ffffff; 
    
    /* 2. APLICAMOS LA IMAGEN DE FONDO USANDO LA VARIABLE */
    background-image: var(--hover-img);
   
}

/* 3. Ocultamos la foto al hacer hover */
section#team div.groups ul li figure.logo-cuadrado:hover img {
    opacity: 0; 
    /* Esta transición ya estaba definida para 'opacity' y funciona */
}

/* Asegura que la transición de la foto sea suave */
section#team div.groups ul li figure.logo-cuadrado img {
    transition: opacity 0.5s ease-in-out;
}
/* MAIN: NEWS */
section#news {color: #fff; background-color: #0071B9; overflow: hidden;}
section#news header {padding-left: 1rem;}
section#news div.content {padding: 0; opacity: 0; visibility: hidden; transform: translateY(-30%); transition: opacity 3s, visibility 3s, transform 3s;}
section#news.show div.content {transform: translateY(0); opacity: 1; visibility: visible;}
section#news div.news {
	display: block; width: 100%; height: auto; overflow: hidden; overflow-x: auto; position: relative;
	scrollbar-color: #0071B9 #fff; scrollbar-width: thin;
}
section#news div.news::-webkit-scrollbar {width: 8px; height: 8px; background-color: #0071B9;}/* WebKit and Chromiums */
section#news div.news::-webkit-scrollbar-thumb {background: #fff; border-radius: 5px;}/* WebKit and Chromiums */
section#news div.news ul {display: grid; grid-auto-columns: min(75%, 15rem); grid-auto-flow: column; grid-column-gap: 1rem; list-style: none; margin: 0 1rem .5rem;}
section#news div.news ul > li {display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); grid-column-gap: 0px; grid-row-gap: 0px; justify-items: start; align-items: start; background-color: transparent; border-left: 2px solid #80B8DC; padding: .2rem .5rem;}
section#news div.news ul > li > figure {grid-area: 1 / 1 / 2 / 2; display: block; width: 100%; aspect-ratio: 4/3; background-color: #042D5B; overflow: hidden;}
section#news div.news ul > li > figure img {display: block; object-fit: cover;}
section#news div.news ul > li > div.text {grid-area: 2 / 1 / 3 / 2; align-self: start;}
section#news div.news ul > li > div.text h1 {display: block; font-size: .9rem; font-weight: bold; padding: .5rem 0;}
section#news div.news ul > li > div.text time {display: block; font-size: .5rem; text-transform: uppercase; opacity: .6; padding-bottom: .5rem;}
section#news div.news ul > li > div.text div.summary {display: block; font-size: .6rem;}
section#news div.news ul > li > div.link {display: none; grid-area: 3 / 1 / 4 / 2; align-self: end;}
section#news div.news ul > li > div.link a {}



/* MAIN: CONTACT */
section#contact {}

/* FOOTER */
footer {display: grid; grid-template-columns: 2fr 3fr; grid-template-rows: 1fr; grid-column-gap: 2rem; grid-row-gap: 0px; z-index: 2; padding: 2rem 1rem; background-color: rgba(4,45,91,.9); color: #fff;}
footer h1 {display: none;}
footer div.logo {display: inline-block; height: 2.5rem; width: auto; max-width: 100%; vertical-align: middle;}
footer div.logo a {display: inline-block; width: auto; height: 100%;}
footer div.logo img {display: inline-block; height: 100%; width: auto;}
footer div.text {font-size: .5rem;}
footer div.text p.grant {padding-top: .5rem; font-size: .6rem;}
@media (orientation: portrait) {
	footer {grid-template-columns: 1fr; grid-template-rows: repeat(2, auto); grid-column-gap: 0px; grid-row-gap: 1rem;}
}



/* Evita que las clases del body cambien el color del header */
body.clinical_need div#header,
body.news div#header,
body.team div#header,
body.contact div#header {
  background-color: rgba(255, 255, 255, .9) !important;
}

.team-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 2rem 0;
}

.team-divider::before,
.team-divider::after {
    content: "";
    flex: 1;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.team-divider span {
    padding: 0 1rem; /* espacio entre líneas y texto */
    font-size: 0.8rem;
    font-weight: 500;
    color: #80B8DC;
    text-transform: uppercase;
    white-space: nowrap; /* evita que se corte el texto */
}

p .location {
    color: #ffffff; /* blanco */
    font-weight: 500; /* opcional: resaltar un poco */
     font-style: normal; 
}

/* Contenedor de logos */
section#partners .logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    align-items: center;
    padding: 2rem 0;
}

/* Cada logo */
section#partners .logo-item {
    flex: 0 0 12%; /* Ajusta para que entren 7 logos en una fila aproximada */
    max-width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

section#partners .logo-item img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
/* FOOTER */
footer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto; /* logos + text */
    gap: 1rem;
    z-index: 2;
    padding: 2rem 1rem;
    background-color: #ffffff; /* fondo blanco */
    color: #042D5B; /* texto oscuro para contraste */
}

/* Logos dentro del footer */
footer .logos-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

footer .logos-footer .logo-item {
    flex: 0 0 12%; /* ajusta según el número de logos */
    max-width: 120px;
}

footer .logos-footer .logo-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

footer h1 {display: none;}

footer .text {
    font-size: .5rem;
    text-align: center;
}

footer .text p.grant {
    padding-top: .5rem;
    font-size: .6rem;
}

/* Responsive: en móvil una columna */
@media (max-width: 600px) {
    footer .logos-footer .logo-item {
        flex: 0 0 45%; /* 2 logos por fila */
        max-width: 45%;
    }
}