.inicio-presentacion {
--colina: calc(100vw / 6);
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
align-items: center;
column-gap: clamp(24px, 4vw, 96px);
margin-bottom: -1px;
padding: clamp(40px, 5vw, 96px) max(8.47vw, (100vw - 1600px) / 2) calc(var(--colina) * 0.5);  background:
url(//serv.es/wp-content/descargasWP/Hill-.svg) bottom center / 100% auto no-repeat,
linear-gradient(var(--noche), var(--noche)) top / 100% calc(100% - 6px) no-repeat,
var(--fondo);
}
.inicio-presentacion__texto {
padding: 0 0 calc(var(--colina) * 0.35);
}
.inicio-presentacion h1 {
margin: 0 0 clamp(16px, 1.6vw, 28px);
color: var(--fondo);
font: 700 clamp(44px, 4.8vw, 88px) / 1.06 Roboto, sans-serif;
letter-spacing: -0.02em;
}
.inicio-presentacion p {
max-width: 34em;
margin: 0 0 clamp(24px, 2.4vw, 40px);
padding: 0;
color: #c3c7d3;
font: 400 clamp(17px, 1.25vw, 22px) / 1.5 Roboto, sans-serif;
}
.inicio-presentacion__ojo {
min-width: 0; margin-bottom: calc(var(--colina) * -0.42);
} .inicio-presentacion model-viewer::part(default-progress-bar) {
display: none;
}
.inicio-presentacion__ojo {
position: relative;
} .inicio-presentacion__ojo-imagen,
.inicio-presentacion model-viewer {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
}
.inicio-presentacion model-viewer {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.4s ease;
}
.inicio-presentacion model-viewer.is-listo {
opacity: 1;
}
.inicio-presentacion__ojo-imagen.is-oculta {
visibility: hidden;
} .inicio-colaboradores {
padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 5vw, 72px);
background: var(--fondo);
}
.inicio-colaboradores .contenedor {
padding: 0 20px;
}
.inicio-colaboradores h2 {
display: flex;
align-items: center;
gap: 20px;
margin: 0 0 28px;
color: #6b7280;
font: 500 13px/1.2 Roboto, sans-serif;
letter-spacing: 0.16em;
text-transform: uppercase;
white-space: nowrap;
}
.inicio-colaboradores h2::before,
.inicio-colaboradores h2::after {
content: "";
flex: 1;
height: 1px;
background: #e3e5ea;
}
.inicio-colaboradores .colaboradores {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
height: auto;
margin: 0;
padding: 0;
list-style: none;
}
.inicio-colaboradores .colaboradores li {
padding: 0;
}
.inicio-colaboradores .colaboradores a {
display: grid;
place-items: center;
height: 128px;
border: 1px solid #eceef2;
border-radius: var(--radio-l);
padding: 20px;
background: var(--blanco);
box-shadow: 0 1px 2px rgba(15, 20, 40, 0.04);
transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.inicio-colaboradores .colaboradores a:hover {
border-color: #dfe3ea;
box-shadow: 0 14px 30px -14px rgba(37, 43, 66, 0.25);
transform: translateY(-3px);
}
.inicio-colaboradores .colaboradores img {
max-width: 100%;
height: auto;
max-height: none;
}
@media (max-width: 767px) {
.inicio-colaboradores .colaboradores {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.inicio-colaboradores .colaboradores a {
height: 104px;
padding: 16px;
} .inicio-colaboradores .colaboradores img {
width: calc(var(--ancho) * 0.75);
}
} .inicio-destacados {
padding: clamp(40px, 5vw, 80px) 20px;
background: #fcfcfc;
}
.inicio-destacados > * {
max-width: 1024px;
margin-inline: auto;
}
.inicio-destacados .titulo-seccion {
margin-bottom: 24px;
padding: 0;
}
.inicio-destacados :is(sr7-module, rs-module-wrap) {
overflow: hidden;
border-radius: var(--radio-l);
box-shadow: 0 24px 50px -28px rgba(37, 43, 66, 0.45);
} .inicio-destacados__carrusel {
position: relative;
}
.inicio-destacados sr7-arrow {
display: none !important;
}
.inicio-destacados__flecha {
position: absolute;
top: 50%;
display: grid;
place-items: center;
width: 52px;
height: 52px;
border: 1px solid #e3e6eb;
border-radius: 50%;
padding: 0;
background: var(--blanco);
box-shadow: 0 6px 18px -8px rgba(37, 43, 66, 0.3);
color: var(--noche);
cursor: pointer;
translate: 0 -50%;
transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}
.inicio-destacados__flecha .icono {
width: 22px;
height: 22px;
}
.inicio-destacados__flecha:hover {
border-color: var(--azul);
background: var(--azul);
color: var(--blanco);
}
.inicio-destacados__flecha:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(19, 175, 249, 0.35);
}
.inicio-destacados__flecha--anterior {
right: calc(100% + 24px);
}
.inicio-destacados__flecha--siguiente {
left: calc(100% + 24px);
}
@media (max-width: 1220px) {
.inicio-destacados__carrusel {
padding-bottom: 72px;
}
.inicio-destacados__flecha {
top: auto;
bottom: 0;
width: 48px;
height: 48px;
translate: none;
}
.inicio-destacados__flecha--anterior {
right: calc(50% + 6px);
}
.inicio-destacados__flecha--siguiente {
left: calc(50% + 6px);
}
}  .inicio-objetivos {
padding: 10px calc(8.47% + 10px) 98px;
background: var(--noche);
}
.inicio-objetivos > * {
max-width: 1280px;
margin-inline: auto;
}
.inicio-objetivos h2 {
padding: 64px 0 84px;
color: var(--fondo-claro);
font: 700 30px/35px Roboto, sans-serif;
text-align: center;
}
.inicio-objetivos__lista {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.inicio-objetivos__lista li {
margin: 0;
border-radius: 8px;
padding: 50px;
background: var(--fondo-claro);
color: var(--texto);
}
.inicio-objetivos__lista .icono {
display: block;
width: auto;
height: 32px;
margin: 0 0 23px;
color: #252c41;
}
.inicio-objetivos__lista h3 {
margin-bottom: 5px;
color: var(--noche);
font: 600 21px/25px Roboto, sans-serif;
} .inicio-hazte-socio {
display: flex;
justify-content: center;
align-items: center;
padding: 5%;
background: var(--blanco);
}
.inicio-hazte-socio > img {
flex: 0 0 auto;
width: 170px;
height: 170px;
margin: 20px 40px 20px 0;
}
.inicio-hazte-socio > div {
padding: 20px;
}
.inicio-hazte-socio h2 {
height: 63px;
margin-bottom: 20px;
color: var(--acento);
font: 600 40px/82px Roboto, sans-serif;
}
.inicio-hazte-socio p {
margin-bottom: 20px;
color: var(--texto);
font: 400 18px/23px Roboto, sans-serif;
}  .inicio-listado {
--fondo-listado: #f1f2f4;
padding: calc(3% + 10px) calc(8.47% + 10px);
background: var(--fondo-listado);
}
.inicio-listado .titulo-seccion {
padding: 10px;
margin-bottom: 35px;
} .inicio-listado > * {
max-width: 1280px;
margin-inline: auto;
} .inicio-listado .tarjeta-articulo__titulo {
padding: 28px 28px 10px;
}
.inicio-listado .tarjeta-articulo__resumen {
padding: 0 28px 30px;
}
.inicio-listado__ver-mas {
padding: 10px 28px 10px 10px;
text-align: right;
}
.inicio-listado__ver-mas .boton {
background: var(--fondo-listado);
}
.inicio-listado__ver-mas .boton:hover {
background: var(--acento);
} .inicio-guias {
padding: clamp(56px, 6vw, 96px) calc(8.47% + 10px);
background: var(--noche);
color: var(--fondo);
}
.inicio-guias .contenedor {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
max-width: 1280px;
margin-inline: auto;
padding: 0;
}
.inicio-guias__columna {
display: flex;
flex-direction: column;
align-items: flex-start;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: var(--radio-l);
padding: clamp(28px, 3.4vw, 48px);
background: rgba(255, 255, 255, 0.04);
}
.inicio-guias__icono {
display: block;
width: 64px;
height: 64px;
margin: 0 0 24px;
object-fit: contain;
} .inicio-guias__columna:first-child .inicio-guias__icono {
width: auto;
height: 84px;
}
.inicio-guias__columna:last-child .inicio-guias__icono {
margin-top: 20px;
}
.inicio-guias h2 {
margin: 0 0 14px;
color: var(--blanco);
font: 700 clamp(22px, 2vw, 28px) / 1.2 Roboto, sans-serif;
}
.inicio-guias p {
margin: 0 0 28px;
color: rgba(255, 255, 255, 0.72);
font: 400 17px/1.65 Roboto, sans-serif;
}
.inicio-guias__boton {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: auto;
border-radius: var(--radio-boton);
padding: 14px 24px;
background: var(--azul);
color: var(--blanco);
font: 600 15px/1 Roboto, sans-serif;
transition: background-color var(--transicion);
}
.inicio-guias__boton .icono {
width: 18px;
height: 18px;
transition: transform var(--transicion);
}
.inicio-guias__boton:hover {
background: var(--azul-hondo);
color: var(--blanco);
}
.inicio-guias__boton:hover .icono,
.inicio-guias__enlaces a:hover .icono {
transform: translateX(3px);
}
.inicio-guias__enlaces {
width: 100%;
margin: 6px 0 0;
padding: 0;
list-style: none;
}
.inicio-guias__enlaces li {
margin: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.inicio-guias__enlaces li:first-child {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.inicio-guias__enlaces a {
display: flex;
align-items: center;
gap: 10px;
padding: 18px 4px;
color: var(--blanco);
font: 500 18px/1.3 Roboto, sans-serif;
transition: color var(--transicion);
}
.inicio-guias__enlaces .icono {
flex: none;
width: 20px;
height: 20px;
margin-left: auto;
color: var(--azul);
transition: transform var(--transicion);
}
.inicio-guias__enlaces a:hover {
color: var(--azul);
}
.inicio-guias__pdf {
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 6px;
padding: 2px 6px;
color: rgba(255, 255, 255, 0.7);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
}
@media (max-width: 860px) {
.inicio-guias .contenedor {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
} @media (max-width: 767px) {
.inicio-guias {
padding-right: 22px;
padding-left: 22px;
}
}
@media (max-width: 1024px) { .inicio-presentacion {
grid-template-columns: minmax(0, 1fr);
padding-bottom: calc(var(--colina) * 0.3);
}
.inicio-presentacion__texto {
padding-bottom: 0;
}
.inicio-presentacion__ojo {
width: min(100%, 600px);
margin: 0 auto calc(var(--colina) * -0.3);
}
.inicio-presentacion h1 {
font-size: clamp(40px, 7vw, 72px);
}
.inicio-objetivos__lista {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) { .inicio-presentacion h1 br {
display: none;
}
.inicio-presentacion {
padding: 40px 8.47% 0;
background-position: bottom left, top;
background-size: cover, 100% calc(100% - 6px);
}
.inicio-destacados,
.inicio-listado {
padding-right: 20px;
padding-left: 20px;
}
.inicio-objetivos {
padding-right: 20px;
padding-left: 20px;
}
.inicio-objetivos__lista {
grid-template-columns: 1fr;
}
.inicio-objetivos__lista {
gap: 16px;
}
.inicio-hazte-socio {
flex-direction: column;
align-items: center;
padding: 40px 20px;
text-align: center;
}
.inicio-hazte-socio > img {
margin: 0 0 10px;
}
.inicio-hazte-socio h2 {
height: auto;
font-size: 30px;
line-height: 38px;
}
.inicio-listado__ver-mas {
padding-right: 10px;
text-align: center;
}
.inicio-presentacion {
padding: 0 8.47%;
}
.inicio-presentacion__texto {
padding: 40px 0 0;
}
.inicio-presentacion p {
padding: 0;
}
.inicio-presentacion__ojo {
margin: 19px 0 4px;
padding: 0;
}
.inicio-destacados {
padding-right: 16px;
padding-left: 16px;
}
.inicio-objetivos {
padding-right: 22px;
padding-left: 22px;
}
.inicio-objetivos h2 {
padding: 64px 0 20px;
text-align: left;
}
.inicio-objetivos__lista li {
padding: 40px;
}
.inicio-hazte-socio {
padding: 47px 20px 40px;
}
.inicio-hazte-socio > img {
margin: 20px 0;
}
.inicio-hazte-socio > div {
padding: 20px 0;
}
.inicio-hazte-socio h2 {
margin-bottom: 1px;
font-size: 32px;
line-height: 53px;
}
.inicio-listado {
padding-right: 22px;
padding-left: 22px;
}
}