:root{
--igss-blue: #266B92;
--igss-dark: #111;
--igss-muted: #6c757d;
--igss-border: rgba(0,0,0,.06);
--igss-radius: 16px;
} .igss-indicadores{ width: 100%; }
.igss-indicadores__container{
width: min(1200px, 100%);
margin: 1.25rem auto;
padding: 0 12px;
text-align: center;
} .igss-indicadores__headline{
margin: 0;
line-height: 1.1;
font-weight: 800;
display: inline-flex;
align-items: baseline;
gap: .35rem;
flex-wrap: wrap;
justify-content: center;
}
.igss-indicadores__title{
color: var(--igss-blue);
font-size: 1.15rem;
font-weight: 800;
}
.igss-indicadores__edad{
font-size: 3rem;
font-weight: 900;
background: linear-gradient(45deg, #000, #FFC107, #000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
} .igss-indicadores__kpis{
margin-top: 1.15rem;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.25rem;
}
@media (max-width: 991.98px){
.igss-indicadores__kpis{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575.98px){
.igss-indicadores__kpis{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .9rem;
}
.igss-indicadores__edad{ font-size: 2.35rem; }
.igss-indicadores__title{ font-size: 1.05rem; }
} .igss-indicadores__card{
background: #fff;
border: 1px solid var(--igss-border);
border-radius: var(--igss-radius);
padding: 1rem;
height: 100%;
transition: transform .2s ease, box-shadow .2s ease;
}
.igss-indicadores__card:hover{
transform: translateY(-3px);
box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08);
} .igss-indicadores__icon{
display: flex;
align-items: center;
justify-content: center;
margin-top: .5rem;
}
.igss-indicadores__icon i{
font-size: 2.35rem;
opacity: .9;
color: #6c757d;
} .igss-indicadores__number{
font-size: 2rem;
line-height: 1.2;
margin-top: .55rem;
font-weight: 800;
color: var(--igss-blue);
}
.igss-indicadores__label{
font-size: .95rem;
font-weight: 800;
margin: .55rem 0 0 0;
color: var(--igss-dark);
min-height: 2.2em;
}
@media (max-width: 575.98px){
.igss-indicadores__number{ font-size: 1.6rem; }
.igss-indicadores__icon i{ font-size: 2.15rem; }
} .igss-indicadores__footnote{
margin: .9rem 0 0 0;
}
.igss-indicadores__footnote small{
color: var(--igss-muted);
} .igss-indicadores__banner{
margin: 2.1rem auto 0;
border-radius: var(--igss-radius);
overflow: hidden;
position: relative;
box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.12);
}
.igss-indicadores__banner-link{
display: block;
position: relative;
text-decoration: none;
color: inherit;
outline: none;
}
.igss-indicadores__banner-img{
display: block;
width: 100%;
height: auto;
transform: scale(1);
transition: transform .5s ease;
}
.igss-indicadores__banner-link:hover .igss-indicadores__banner-img{
transform: scale(1.05);
}
.igss-indicadores__banner-overlay{
position: absolute;
inset: 0;
background: rgba(0,0,0,.70);
opacity: 0;
transition: opacity .25s ease;
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.igss-indicadores__banner-link:hover .igss-indicadores__banner-overlay,
.igss-indicadores__banner-link:focus-visible .igss-indicadores__banner-overlay{
opacity: 1;
}
.igss-indicadores__banner-title{
margin: 0 0 .35rem 0;
font-weight: 900;
color: #fff;
font-size: 1.5rem;
}
.igss-indicadores__banner-text{
margin: 0;
color: rgba(255,255,255,.92);
font-size: 1rem;
}