html,
body{
margin:0;
padding:0;
width:100%;
overflow-x:hidden;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
/*==================================================
BANNER CAPACITACIONES
==================================================*/
.training-banner{
width:100%;
height:380px;
margin:0;
padding:0;
background:
linear-gradient(
rgba(16,28,58,.45),
rgba(16,28,58,.45)
),
url("../assets/img/bans.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.training-overlay{
width:100%;
height:100%;
display:flex;
align-items:center;
}
.training-container{
width:100%;
max-width:1280px;
margin:0 auto;
padding:0 80px;
display:flex;
align-items:center;
height:100%;
}
.training-banner h1{
color:#fff;
font-family:'Poppins',sans-serif;
font-size:84px;
font-weight:800;
line-height:.95;
letter-spacing:-3px;
max-width:560px;
margin:0;
}
@media(max-width:992px){
.training-banner{
height:320px;
}
.training-container{
padding:0 45px;
}
.training-banner h1{
font-size:64px;
max-width:430px;
}
}
@media(max-width:768px){
.training-banner{
height:270px;
}
.training-container{
padding:0 25px;
}
.training-banner h1{
font-size:46px;
line-height:1;
letter-spacing:-1px;
max-width:300px;
}
}
@media(max-width:480px){
.training-banner{
height:230px;
}
.training-container{
padding:0 18px;
}
.training-banner h1{
font-size:36px;
max-width:220px;
}
}
/*==================================================
CAPACITACIONES REALIZADAS
==================================================*/
.training-history{
width:100%;
background:#fff;
padding:90px 0 70px;
}
.training-history-container{
width:100%;
max-width:1450px;
margin:0 auto;
padding:0 60px;
}
/*==================================================
TÍTULOS
==================================================*/
.training-history-subtitle{
display:block;
color:#F5A000;
font-family:'Poppins',sans-serif;
font-size:20px;
font-weight:700;
text-transform:uppercase;
margin-bottom:10px;
}
.training-history-title{
color:#123D83;
font-family:'Poppins',sans-serif;
font-size:60px;
font-weight:800;
margin-bottom:35px;
}
.training-history-description{
max-width:1400px;
color:#222;
font-family:'Poppins',sans-serif;
font-size:25px;
font-weight:400;
line-height:1.65;
margin-bottom:55px;
}
/*==================================================
CARD
==================================================*/
.history-card{
background:#fff;
border-radius:24px;
box-shadow:
0 12px 35px rgba(21,47,89,.12);
display:grid;
grid-template-columns:90px 360px 1fr;
column-gap:34px;
align-items:start;
padding:28px;
margin-bottom:34px;
}
/*==================================================
CHECK
==================================================*/
.history-check{
display:flex;
justify-content:center;
align-items:flex-start;
padding-top:8px;
}
.history-check img{
width:48px;
height:48px;
}
/*==================================================
IMAGEN
==================================================*/
.history-image{
display:flex;
flex-direction:column;
}
.history-image img{
width:100%;
height:235px;
border-radius:18px;
object-fit:cover;
border:1px solid #D9E4F6;
}
/*==================================================
META
==================================================*/
.history-meta{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:14px;
}
.history-meta span{
display:flex;
align-items:center;
gap:7px;
color:#8B8FA5;
font-family:'Poppins',sans-serif;
font-size:15px;
font-weight:500;
}
.history-meta img{
width:27px !important;
height:27px !important;
}
/*==================================================
CONTENIDO
==================================================*/
.history-content{
display:flex;
flex-direction:column;
height:100%;
padding-top:6px;
}
.history-content h3{
color:#252744;
font-family:'Poppins',sans-serif;
font-size:25px;
font-weight:700;
line-height:1.35;
margin-bottom:20px;
}
.history-content p{
color:#6D708C;
font-family:'Poppins',sans-serif;
font-size:17px;
font-weight:400;
line-height:1.8;
max-width:760px;
margin-bottom:28px;
}
/*==================================================
BOTÓN
==================================================*/
.history-button{
margin-top:auto;
margin-left:auto;
display:inline-flex;
justify-content:center;
align-items:center;
width:160px;
height:54px;
background:#123D83;
color:#fff;
font-family:'Poppins',sans-serif;
font-size:22px;
font-weight:600;
text-decoration:none;
border-radius:10px;
transition:.30s;
}
.history-button:hover{
background:#0F326C;
transform:translateY(-3px);
}
/*==================================================
PAGINACIÓN
==================================================*/
.history-pagination{
width:100%;
display:flex;
justify-content:flex-end;
margin-top:30px;
}
.history-pagination button{
width:80px;
height:80px;
background:#123D83;
border:none;
border-radius:12px;
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
transition:.30s;
}
.history-pagination button:hover{
background:#0F326C;
transform:translateY(-3px);
}
.history-pagination button img{
width:110px;
height:110px;
object-fit:contain;
display:block;
}
/*==================================================
RESPONSIVE TABLET
==================================================*/
@media(max-width:1200px){
.history-card{
grid-template-columns:70px 280px 1fr;
column-gap:25px;
padding:22px;
}
.history-image img{
height:190px;
}
.training-history-title{
font-size:46px;
}
.training-history-description{
font-size:20px;
}
.history-content h3{
font-size:22px;
}
.history-content p{
font-size:16px;
}
.history-button{
width:145px;
height:48px;
font-size:18px;
}
}
/*==================================================
RESPONSIVE CELULAR
==================================================*/
@media(max-width:768px){
.training-history{
padding:60px 0;
}
.training-history-container{
padding:0 22px;
}
.training-history-title{
font-size:36px;
}
.training-history-description{
font-size:17px;
line-height:1.8;
margin-bottom:35px;
}
.history-card{
grid-template-columns:1fr;
padding:24px;
}
.history-check{
justify-content:flex-start;
padding:0;
margin-bottom:18px;
}
.history-image{
margin-bottom:24px;
}
.history-image img{
height:220px;
}
.history-meta{
margin-top:12px;
}
.history-content h3{
font-size:24px;
margin-bottom:14px;
}
.history-content p{
font-size:16px;
margin-bottom:22px;
}
.history-button{
margin-left:0;
width:100%;
height:50px;
font-size:18px;
}
.history-pagination{
justify-content:center;
}
}
/*==================================================
PRÓXIMAS CAPACITACIONES
==================================================*/
.upcoming-training{
width:100%;
background:#fff;
padding:90px 0 100px;
}
.upcoming-training-container{
width:100%;
max-width:1400px;
margin:0 auto;
padding:0 60px;
}
/*==================================================
TÍTULOS
==================================================*/
.upcoming-subtitle{
display:block;
color:#F5A000;
font-family:'Poppins',sans-serif;
font-size:20px;
font-weight:700;
text-transform:uppercase;
margin-bottom:10px;
}
.upcoming-title{
color:#123D83;
font-family:'Poppins',sans-serif;
font-size:58px;
font-weight:800;
margin-bottom:45px;
}
/*==================================================
CARD
==================================================*/
.upcoming-card{
background:#fff;
border-radius:22px;
box-shadow:
0 12px 35px rgba(17,42,86,.12);
display:grid;
grid-template-columns:110px 1fr 180px;
align-items:center;
gap:36px;
padding:24px 28px;
margin-bottom:30px;
}
/*==================================================
FECHA
==================================================*/
.upcoming-date{
width:82px;
height:82px;
background:#123D83;
border-radius:16px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.upcoming-date .day{
color:#fff;
font-family:'Poppins',sans-serif;
font-size:38px;
font-weight:800;
line-height:1;
}
.upcoming-date .month{
margin-top:6px;
color:#fff;
font-family:'Poppins',sans-serif;
font-size:24px;
font-weight:700;
line-height:1;
}
/*==================================================
CONTENIDO
==================================================*/
.upcoming-content h3{
color:#2B2F4D;
font-family:'Poppins',sans-serif;
font-size:28px;
font-weight:700;
margin-bottom:16px;
}
.upcoming-content p{
color:#777B96;
font-family:'Poppins',sans-serif;
font-size:20px;
line-height:1.7;
margin-bottom:18px;
}
.upcoming-category{
display:flex;
align-items:center;
gap:8px;
}
.upcoming-category img{
width:25px;
height:25px;
}
.upcoming-category span{
color:#8C90A8;
font-family:'Poppins',sans-serif;
font-size:15px;
font-weight:500;
}
/*==================================================
BOTÓN
==================================================*/
.upcoming-action{
display:flex;
justify-content:flex-end;
}
.upcoming-button{
display:flex;
justify-content:center;
align-items:center;
width:160px;
height:56px;
border-radius:10px;
background:#F5A000;
color:#fff;
font-family:'Poppins',sans-serif;
font-size:22px;
font-weight:700;
text-decoration:none;
transition:.30s;
}
.upcoming-button:hover{
background:#D88E00;
transform:translateY(-3px);
}
/*==================================================
TABLET
==================================================*/
@media(max-width:992px){
.upcoming-training{
padding:70px 0;
}
.upcoming-training-container{
padding:0 40px;
}
.upcoming-title{
font-size:42px;
}
.upcoming-card{
grid-template-columns:90px 1fr;
}
.upcoming-action{
grid-column:1/-1;
justify-content:flex-start;
margin-top:18px;
}
}
/*==================================================
CELULAR
==================================================*/
@media(max-width:768px){
.upcoming-training{
padding:60px 0;
}
.upcoming-training-container{
padding:0 22px;
}
.upcoming-title{
font-size:34px;
}
.upcoming-card{
grid-template-columns:1fr;
gap:20px;
padding:24px;
}
.upcoming-date{
margin:0 auto;
}
.upcoming-content{
text-align:center;
}
.upcoming-content h3{
font-size:24px;
}
.upcoming-content p{
font-size:17px;
}
.upcoming-category{
justify-content:center;
}
.upcoming-action{
justify-content:center;
}
.upcoming-button{
width:100%;
max-width:240px;
}
}
/*==================================================
PROPÓN UNA CAPACITACIÓN
==================================================*/
.training-cta{
width:100%;
padding:90px 0;
background:linear-gradient(
180deg,
#2a63cd 0%,
#1e4281 35%,
#112751 70%,
#060f1e 100%
);
}
.training-cta-container{
width:100%;
max-width:1200px;
margin:0 auto;
padding:0 40px;
text-align:center;
}
/*==================================================
SUBTÍTULO
==================================================*/
.training-cta-subtitle{
display:block;
color:#F5A000;
font-family:'Poppins',sans-serif;
font-size:20px;
font-weight:700;
margin-bottom:18px;
}
/*==================================================
TÍTULO
==================================================*/
.training-cta-title{
color:#ffffff;
font-family:'Poppins',sans-serif;
font-size:68px;
font-weight:800;
line-height:1.15;
margin-bottom:24px;
}
/*==================================================
DESCRIPCIÓN
==================================================*/
.training-cta-description{
color:#ffffff;
font-family:'Poppins',sans-serif;
font-size:24px;
font-weight:600;
line-height:1.7;
max-width:900px;
margin:0 auto 45px;
}
/*==================================================
BOTÓN
==================================================*/
.training-cta-button{
display:inline-flex;
justify-content:center;
align-items:center;
width:220px;
height:72px;
border-radius:10px;
background:#F5A000;
color:#ffffff;
font-family:'Poppins',sans-serif;
font-size:30px;
font-weight:700;
text-decoration:none;
transition:.30s;
}
.training-cta-button:hover{
background:#DB9100;
transform:translateY(-4px);
box-shadow:0 15px 30px rgba(0,0,0,.18);
}
/*==================================================
TABLET
==================================================*/
@media(max-width:992px){
.training-cta{
padding:70px 0;
}
.training-cta-container{
padding:0 30px;
}
.training-cta-title{
font-size:50px;
}
.training-cta-description{
font-size:20px;
}
.training-cta-button{
width:190px;
height:64px;
font-size:24px;
}
}
/*==================================================
CELULAR
==================================================*/
@media(max-width:768px){
.training-cta{
padding:60px 0;
}
.training-cta-container{
padding:0 22px;
}
.training-cta-subtitle{
font-size:17px;
}
.training-cta-title{
font-size:36px;
line-height:1.2;
}
.training-cta-description{
font-size:17px;
line-height:1.8;
margin-bottom:35px;
}
.training-cta-button{
width:180px;
height:56px;
font-size:22px;
}
}
/*==================================================
SLIDER HISTORIAL
==================================================*/
.history-slider{
position:relative;
}
.history-page{
display:none;
animation:fadeHistory .45s ease;
}
.history-page.active{
display:grid;
gap:32px;
}
@keyframes fadeHistory{
from{
opacity:0;
transform:translateX(25px);
}
to{
opacity:1;
transform:translateX(0);
}
}