#sostBloque {
max-width: 1180px;
margin: 100px auto 0;
padding: 0 20px;
color: #fff;
position: relative;
z-index: 5;
}
#sostBloque .head {
text-align: center;
max-width: 880px;
margin: 0 auto 60px;
}
#sostBloque .head h3 {
margin-top: 0;
}
#sostBloque .head p {
font-size: 18px;
line-height: 1.5;
font-weight: 400;
margin-top: 20px;
}
#sostBloque .head p + p {
margin-top: 16px;
}
.pilares {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 30px;
margin: 50px 0 40px;
}
.pilares .pilar {
flex: 1 1 280px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(0, 174, 239, 0.25);
border-radius: 0 40px 0 40px;
padding: 40px 30px;
color: #fff;
transition: 0.5s cubic-bezier(0.39, 0.51, 0.13, 1.01);
will-change: transform;
position: relative;
overflow: hidden;
}
.pilares .pilar:hover {
transform: translateY(-6px) translateZ(0);
border-color: rgba(0, 174, 239, 0.6);
box-shadow: 0 10px 30px rgba(0, 71, 186, 0.25);
}
.pilares .pilar .num {
font-family: "Comfortaa", sans-serif;
font-size: 60px;
letter-spacing: -0.06em;
font-weight: 300;
color: #00aeef;
line-height: 1;
margin-bottom: 18px;
display: block;
}
.pilares .pilar h5 {
font-size: 20px;
font-weight: 700;
color: #fff;
margin-bottom: 14px;
line-height: 1.25;
}
.pilares .pilar p {
font-size: 15px;
line-height: 1.55;
color: #b4bcd7;
}
.ctaWrap {
text-align: center;
margin: 70px 0 40px;
}
.ctaWrap a.btn {
margin: 0 auto;
width: auto;
max-width: 100%;
display: inline-flex;
align-items: center;
padding: 0 70px 0 40px;
white-space: nowrap;
}
@media screen and (max-width: 600px) {
.ctaWrap a.btn {
white-space: normal;
line-height: 1.3;
height: auto;
min-height: 60px;
padding: 14px 60px 14px 28px;
max-width: 92%;
text-align: left;
}
}
#logrosBloque {
background: #fff;
margin: 100px 80px 0;
margin-right: 0;
border-radius: 100px 0;
padding: 100px 0 120px;
position: relative;
z-index: 5;
}
#logrosBloque .head {
max-width: 1100px;
margin: 0 auto 60px;
padding: 0 50px;
color: #1d1d1d;
}
#logrosBloque .head h3 {
color: #001149;
margin: 0;
}
#logrosBloque .grid {
max-width: 1100px;
margin: 0 auto;
padding: 0 50px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px 50px;
}
#logrosBloque .grid .item {
background-color: #fff;
padding: 30px 0 0;
color: #1d1d1d;
position: relative;
}
#logrosBloque .grid .item h4 {
color: #00aeef;
text-transform: none;
font-size: 16px;
letter-spacing: 0;
}
#logrosBloque .grid .item h5 {
font-size: 26px;
font-weight: 300;
color: #001149;
margin: 12px 0 18px;
line-height: 1.25;
}
#logrosBloque .grid .item h5 strong {
font-weight: 700;
}
#logrosBloque .grid .item p {
font-size: 16px;
line-height: 1.55;
color: #1d1d1d;
}
#logrosBloque .grid .item .num {
color: #0047ba;
font-size: 100px;
display: block;
text-align: center;
text-transform: none;
font-family: "Comfortaa";
font-weight: 300;
margin-top: 60px;
}
#logrosBloque .grid .item .num small {
display: block;
font-size: 22px;
font-family: "Open Sans", sans-serif;
font-weight: 800;
}
#sostDocs {
max-width: 1100px;
margin: 80px auto 60px;
padding: 0 30px;
color: #fff;
text-align: center;
position: relative;
z-index: 5;
}
#sostDocs h4 {
margin-bottom: 10px;
}
#sostDocs h3 {
margin-bottom: 10px;
}
#sostDocs p {
font-size: 16px;
line-height: 1.5;
color: #b4bcd7;
max-width: 700px;
margin: 0 auto;
}
@media (min-width: 1600px) {
#logrosBloque {
margin: 140px;
margin-right: 0;
border-radius: 140px 0;
}
}
@media screen and (max-width: 1024px) {
#logrosBloque {
padding: 80px 0 100px;
}
#logrosBloque .head,
#logrosBloque .grid {
padding: 0 50px;
}
}
@media screen and (max-width: 750px) {
#logrosBloque .head h3 {
font-size: 30px;
line-height: 1.2;
text-wrap: balance;
}
#sostBloque {
margin-top: 60px;
}
.pilares {
gap: 20px;
margin: 30px 0;
}
.pilares .pilar {
flex: 1 1 100%;
padding: 30px 25px;
border-radius: 0 30px 0 30px;
}
.pilares .pilar .num {
font-size: 48px;
}
.ctaWrap {
margin: 40px 0 30px;
}
#logrosBloque {
margin: 0;
padding: 60px 0 80px;
}
#logrosBloque .head,
#logrosBloque .grid {
padding: 0 30px;
}
#logrosBloque .grid {
grid-template-columns: 1fr;
gap: 35px;
}
#logrosBloque .grid .item h5 {
font-size: 22px;
}
#logrosBloque .grid .item .num {
font-size: 50px;
margin-top: 30px;
}
#logrosBloque .grid .item .num small {
font-size: 15px;
}
#sostDocs {
margin: 50px auto 30px;
padding: 0 20px;
}
}
.memoriasDrop {
max-width: 520px;
margin: 50px auto 0;
text-align: left;
}
.memoriasDrop summary {
list-style: none;
cursor: pointer;
background: #0047ba;
height: 60px;
line-height: 60px;
border-radius: 30px;
padding: 0 30px;
font-size: 16px;
font-weight: 700;
color: #fff;
position: relative;
display: block;
text-align: center;
transition: box-shadow 0.3s ease;
}
.memoriasDrop summary::-webkit-details-marker {
display: none;
}
.memoriasDrop summary:hover {
box-shadow: 0 0 30px rgba(0, 174, 239, 0.6);
}
.memoriasDrop summary:after {
content: "";
position: absolute;
right: 30px;
top: 44%;
width: 8px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
transition: transform 0.3s ease;
}
.memoriasDrop[open] summary:after {
transform: rotate(-135deg);
}
.memoriasDrop .reportes {
margin-top: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 10px;
overflow: hidden;
}
.memoriasDrop .reportes a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 22px;
color: #fff;
font-size: 15px;
font-weight: 600;
border-radius: 14px;
transition: background 0.25s ease;
}
.memoriasDrop .reportes a + a {
margin-top: 4px;
}
.memoriasDrop .reportes a:hover {
background: rgba(0, 174, 239, 0.18);
}
.memoriasDrop .reportes a span.ico {
flex: 0 0 auto;
width: 18px;
height: 18px;
border: solid #00aeef;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-right: 4px;
opacity: 0.85;
}