@charset "utf-8";
/* CSS Document */
/* =====================================================
HERO / PORTADA PRINCIPAL
===================================================== */

.hero{
background:linear-gradient(135deg, #2c0b5a, #4b148c);
color:#ffffff;
text-align:center;
padding:30px 20px;
}

.hero-contenido{
max-width:900px;
margin:auto;
}

.hero h1{
font-size:28px;
font-weight:700;
margin-bottom:10px;
}

.hero h2{
font-size:18px;
font-weight:300;
margin-bottom:20px;
}

.hero-fecha{
display:inline-block;
background:#ffffff;
color:#003366;
padding:10px 20px;
border-radius:25px;
font-weight:600;
margin-bottom:10px;
box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

.hero p{
font-size:14px;
margin-top:10px;
}

/* =====================================================
BANNER SUPERIOR
===================================================== */

.hero-banner{
width:100%;
overflow:hidden;
background:#fff; 
}

.hero-banner img{
width:60%;
height:auto;
display:block;
margin:auto;
}

/* =====================================================
SEDES / GALERÍA
===================================================== */

.fondo-galeria{
background:#f1f1f1;
}

.galeria{
display:flex;
justify-content:center;
align-items:center;
gap:40px;
flex-wrap:wrap;
padding:40px 20px;
}

.galeria img{
max-width:180px;
height:auto;
filter:grayscale(100%);
transition:0.3s;
}

.galeria img:hover{
filter:grayscale(0%);
transform:scale(1.05);
}

/* =====================================================
BLOQUE INSTITUCIONES
===================================================== */

.instituciones{
background:#f5f5f5;
padding:50px 20px;
}

.institucion-contenedor{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
max-width:1200px;
margin:auto;
flex-wrap:wrap;
}

.institucion-izquierda img{
max-width:200px;
height:auto;
}

.institucion-derecha{
max-width:660px;
font-size:1em;
}

.institucion-derecha h2{
margin-bottom:15px;
color:#003366;
}

.institucion-derecha ul{
padding-left:20px;
}

.institucion-derecha li{
margin-bottom:8px;
}
.galeria{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:10px;
justify-items:center;
align-items:center;
padding:40px 20px;
}

/* tamaño de logos */
.galeria img{
max-width:160px;
height:auto;
}

/* el cuarto logo abajo centrado */
.galeria img:nth-child(4){
grid-column:2;
}

/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:768px){

.hero{
padding:50px 15px;
}

.hero h1{
font-size:22px;
}

.hero h2{
font-size:16px;
}

.hero-fecha{
font-size:13px;
padding:8px 15px;
}

.galeria{
gap:20px;
}

.galeria img{
max-width:100px;
}
.galeria{
grid-template-columns:repeat(2, 1fr);
}
.galeria img:nth-child(4){
grid-column:1 / -1; /* ocupa toda la fila */
}

.institucion-contenedor{
flex-direction:column;
text-align:center;
}

.institucion-izquierda img{
max-width:200px;
}
.hero-banner img{
width:90%;
height:auto;
display:block; margin:auto;
}

}