.apsti-hero,
.apsti-hero * {
box-sizing: border-box;
}

.apsti-hero {
position: relative;
left: 50%;
width: 100vw;
min-height: 365px;
margin: 0 -50vw;
overflow: hidden;
color: #ffffff;
background:
radial-gradient(
circle at 75% 46%,
rgba(0, 114, 220, 0.85) 0%,
rgba(0, 89, 181, 0.45) 31%,
transparent 55%
),
linear-gradient(
115deg,
#07377e 0%,
#064795 42%,
#0063bd 100%
);
font-family: “Poppins”, Arial, Helvetica, sans-serif;
}

.apsti-hero::before {
position: absolute;
z-index: 0;
top: 62px;
right: 13px;
color: rgba(0, 69, 160, 0.38);
font-size: 230px;
line-height: 1;
content: “⚙”;
transform: rotate(12deg);
}

.apsti-hero::after {
position: absolute;
z-index: 0;
right: -205px;
bottom: -268px;
width: 490px;
height: 490px;
border-radius: 50%;
background: linear-gradient(
145deg,
#ffd400 0%,
#ffb900 100%
);
content: “”;
}

.apsti-hero__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 43% 57%;
align-items: center;
width: 100%;
max-width: 1170px;
min-height: 365px;
margin: 0 auto;
padding: 30px 18px 36px;
}

.apsti-hero__content {
position: relative;
z-index: 8;
padding-left: 22px;
}

.apsti-hero__title {
max-width: 500px;
margin: 0 0 17px;
padding: 0;
color: #ffffff;
font-family: “Poppins”, Arial, Helvetica, sans-serif;
font-size: clamp(39px, 4vw, 52px);
font-weight: 700;
line-height: 1.06;
letter-spacing: -1.4px;
}

.apsti-hero__title span,
.apsti-hero__title strong {
display: block;
}

.apsti-hero__title strong {
margin-top: 4px;
color: #ff6900;
font-weight: 700;
}

.apsti-hero__description {
max-width: 390px;
margin: 0 0 25px;
color: #ffffff;
font-size: 18px;
font-weight: 400;
line-height: 1.55;
}

.apsti-hero__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 20px;
min-width: 214px;
min-height: 46px;
padding: 12px 21px;
border: 2px solid transparent;
border-radius: 28px;
color: #ffffff !important;
background: linear-gradient(
90deg,
#ff7900 0%,
#ff5900 100%
);
box-shadow: 0 9px 22px rgba(0, 31, 92, 0.25);
font-size: 15px;
font-weight: 700;
line-height: 1;
text-decoration: none !important;
transition:
transform 180ms ease,
box-shadow 180ms ease;
}

.apsti-hero__button:hover {
color: #ffffff !important;
background: linear-gradient(
90deg,
#ff8a00 0%,
#ff6600 100%
);
box-shadow: 0 13px 27px rgba(0, 25, 79, 0.35);
transform: translateY(-2px);
}

.apsti-hero__button:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 4px;
}

.apsti-hero__arrow {
font-size: 25px;
font-weight: 400;
line-height: 0;
transition: transform 180ms ease;
}

.apsti-hero__button:hover .apsti-hero__arrow {
transform: translateX(4px);
}

.apsti-hero__visual {
position: relative;
z-index: 2;
height: 330px;
}

.apsti-hero__rings {
position: absolute;
z-index: 1;
top: 3px;
right: 61px;
width: 380px;
height: 260px;
background:
radial-gradient(
circle at 50% 100%,
#ff9b00 0 103px,
#0750a7 104px 133px,
#ffffff 134px 149px,
#ff5d00 150px 164px,
transparent 165px
);
}

.apsti-hero__rings::before {
position: absolute;
z-index: -1;
right: 54px;
bottom: 0;
left: 54px;
height: 173px;
border-radius: 150px 150px 0 0;
background: radial-gradient(
circle at 50% 72%,
rgba(255, 190, 0, 0.7) 0%,
rgba(255, 108, 0, 0.3) 56%,
transparent 78%
);
content: “”;
filter: blur(11px);
}

.apsti-hero__gear {
position: absolute;
z-index: 3;
right: 0;
bottom: 39px;
left: 0;
display: block;
width: 112px;
height: 112px;
margin: auto;
color: #0750a7;
font-size: 105px;
line-height: 112px;
text-align: center;
}

.apsti-hero__base {
position: absolute;
z-index: 3;
right: 8px;
bottom: 3px;
width: 570px;
height: 89px;
border-radius: 50%;
background: linear-gradient(
180deg,
#ffffff 0%,
#f6f6f6 53%,
#d8d8d8 100%
);
box-shadow: 0 15px 22px rgba(0, 26, 74, 0.34);
}

.apsti-hero__products {
position: absolute;
z-index: 5;
right: -24px;
bottom: -2px;
display: block;
width: 665px;
max-width: none;
height: 405px;
margin: 0;
object-fit: contain;
object-position: center bottom;
filter: drop-shadow(
0 12px 10px rgba(0, 24, 67, 0.18)
);
animation: apsti-product-float 5s ease-in-out infinite;
}

@keyframes apsti-product-float {
0%,
100% {
transform: translateY(0);
}

50% {
transform: translateY(-7px);
}
}

@media (max-width: 960px) {
.apsti-hero__inner {
grid-template-columns: 47% 53%;
padding-right: 12px;
padding-left: 12px;
}

.apsti-hero__content {
padding-left: 8px;
}

.apsti-hero__title {
font-size: 40px;
}

.apsti-hero__products {
right: -90px;
width: 610px;
}

.apsti-hero__base {
right: -35px;
width: 505px;
}

.apsti-hero__rings {
top: 12px;
right: -4px;
width: 330px;
height: 230px;
background:
radial-gradient(
circle at 50% 100%,
#ff9b00 0 88px,
#0750a7 89px 114px,
#ffffff 115px 128px,
#ff5d00 129px 141px,
transparent 142px
);
}

.apsti-hero__gear {
bottom: 32px;
width: 94px;
height: 94px;
font-size: 88px;
line-height: 94px;
}
}

@media (max-width: 767px) {
.apsti-hero {
min-height: auto;
}

.apsti-hero__inner {
display: block;
min-height: auto;
padding: 43px 20px 13px;
}

.apsti-hero__content {
padding: 0;
text-align: center;
}

.apsti-hero__title {
max-width: 600px;
margin-right: auto;
margin-left: auto;
font-size: clamp(34px, 9vw, 44px);
}

.apsti-hero__description {
max-width: 490px;
margin-right: auto;
margin-left: auto;
font-size: 17px;
}

.apsti-hero__visual {
height: 315px;
margin-top: 10px;
}

.apsti-hero__products {
right: 50%;
bottom: -2px;
width: 570px;
height: 350px;
transform: translateX(50%);
animation: none;
}

.apsti-hero__base {
right: 50%;
bottom: 4px;
width: 470px;
height: 73px;
transform: translateX(50%);
}

.apsti-hero__rings {
top: 0;
right: 50%;
width: 270px;
height: 190px;
background:
radial-gradient(
circle at 50% 100%,
#ff9b00 0 72px,
#0750a7 73px 94px,
#ffffff 95px 106px,
#ff5d00 107px 117px,
transparent 118px
);
transform: translateX(50%);
}

.apsti-hero__gear {
bottom: 26px;
width: 76px;
height: 76px;
font-size: 71px;
line-height: 76px;
}

.apsti-hero::before {
top: auto;
right: -50px;
bottom: 38px;
font-size: 170px;
}

.apsti-hero::after {
right: -245px;
bottom: -315px;
width: 510px;
height: 510px;
}
}

@media (max-width: 480px) {
.apsti-hero__inner {
padding-right: 14px;
padding-left: 14px;
}

.apsti-hero__title {
font-size: 34px;
}

.apsti-hero__description {
font-size: 16px;
}

.apsti-hero__visual {
height: 265px;
}

.apsti-hero__products {
width: 445px;
height: 282px;
}

.apsti-hero__base {
width: 365px;
height: 58px;
}

.apsti-hero__rings {
top: 8px;
width: 220px;
height: 158px;
background:
radial-gradient(
circle at 50% 100%,
#ff9b00 0 58px,
#0750a7 59px 76px,
#ffffff 77px 86px,
#ff5d00 87px 95px,
transparent 96px
);
}

.apsti-hero__gear {
bottom: 21px;
width: 64px;
height: 64px;
font-size: 59px;
line-height: 64px;
}
}

@media (prefers-reduced-motion: reduce) {
.apsti-hero__products {
animation: none;
}

.apsti-hero__button,
.apsti-hero__arrow {
transition: none;
}
}

Calidad y tecnología
para tu futuro

Equipos, materiales y herramientas seleccionados para la
formación técnica de excelencia.

VER PRODUCTOS
→

⚙