@import url('https://fonts.googleapis.com/css2?family=Exo:wght@700&display=swap');

.ag-steps-uses-widget,
.ag-steps-uses-widget *{
  box-sizing:border-box !important;
}

.ag-steps-uses-widget{
  --ag-yellow:#EAAA04;
  --ag-white:#FFFFFF;
  --ag-border:#4A4A4A;

  width:100% !important;

  margin:0 !important;

  padding:
    70px
    0
    80px !important;

  background:#000000 !important;

  overflow:hidden !important;
}

/* =========================================================
   CONTENEDOR
========================================================= */

.ag-steps-uses-widget .ag-steps-uses__inner{
  width:min(1305px,calc(100% - 80px)) !important;

  margin:0 auto !important;

  padding:0 !important;
}

/* =========================================================
   TÍTULO
========================================================= */

.ag-steps-uses-widget .ag-steps-uses__title{
  width:100% !important;

  margin:
    0
    0
    50px !important;

  padding:0 !important;

  font-family:"Exo",sans-serif !important;

  font-weight:700 !important;

  font-style:normal !important;

  font-size:50px !important;

  line-height:65px !important;

  letter-spacing:0 !important;

  text-align:center !important;

  text-transform:none !important;

  color:#FFFFFF !important;
}

.ag-steps-uses-widget .ag-yellow{
  color:var(--ag-yellow) !important;
}

/* =========================================================
   GRID
   4 TARJETAS LARGAS
========================================================= */

.ag-steps-uses-widget .ag-steps-uses__grid{
  width:100% !important;

  display:grid !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;

  gap:12px !important;

  align-items:stretch !important;
}

/* =========================================================
   TARJETA
========================================================= */

.ag-steps-uses-widget .ag-steps-uses__card{
  width:100% !important;

  min-width:0 !important;

  min-height:500px !important;

  margin:0 !important;

  padding:0 !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:stretch !important;

  justify-content:flex-start !important;

  background:#000000 !important;

  border:
    1px
    solid
    var(--ag-border) !important;

  overflow:hidden !important;
}

/* =========================================================
   IMAGEN
========================================================= */

.ag-steps-uses-widget .ag-steps-uses__media{
  width:100% !important;

  height:370px !important;

  margin:0 !important;

  padding:0 !important;

  overflow:hidden !important;

  background:#161616 !important;
}

.ag-steps-uses-widget .ag-steps-uses__image{
  display:block !important;

  width:100% !important;

  height:100% !important;

  margin:0 !important;

  padding:0 !important;

  object-fit:cover !important;

  object-position:center center !important;

  transition:
    transform .4s ease !important;
}

.ag-steps-uses-widget .ag-steps-uses__card:hover
.ag-steps-uses__image{
  transform:scale(1.035) !important;
}

/* =========================================================
   CUERPO
========================================================= */

.ag-steps-uses-widget .ag-steps-uses__body{
  width:100% !important;

  min-height:130px !important;

  margin:0 !important;

  padding:
    17px
    18px
    18px !important;

  display:flex !important;

  align-items:flex-start !important;

  justify-content:flex-start !important;

  background:#000000 !important;
}

/* =========================================================
   TEXTO
========================================================= */

.ag-steps-uses-widget .ag-steps-uses__card-title{
  width:100% !important;

  margin:0 !important;

  padding:0 !important;

  font-family:"Exo",sans-serif !important;

  font-weight:700 !important;

  font-style:normal !important;

  font-size:20px !important;

  line-height:25px !important;

  letter-spacing:0 !important;

  text-align:left !important;

  text-transform:none !important;

  color:#FFFFFF !important;
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width:1200px) and (min-width:901px){

  .ag-steps-uses-widget .ag-steps-uses__inner{
    width:calc(100% - 60px) !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__grid{
    gap:10px !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__card{
    min-height:460px !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__media{
    height:335px !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__body{
    min-height:125px !important;

    padding:
      15px
      15px
      16px !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__card-title{
    font-size:17px !important;

    line-height:23px !important;
  }

}

/* =========================================================
   TABLET
========================================================= */

@media (max-width:900px){

  .ag-steps-uses-widget{
    padding:
      65px
      0
      75px !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__inner{
    width:calc(100% - 40px) !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__title{
    margin-bottom:38px !important;

    font-size:42px !important;

    line-height:52px !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:16px !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__card{
    min-height:470px !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__media{
    height:350px !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__body{
    min-height:120px !important;

    padding:
      17px
      18px
      18px !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__card-title{
    font-size:19px !important;

    line-height:25px !important;
  }

}

/* =========================================================
   MÓVIL
========================================================= */

@media (max-width:560px){

  .ag-steps-uses-widget{
    padding:
      55px
      0
      65px !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__inner{
    width:calc(100% - 28px) !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__title{
    margin-bottom:30px !important;

    font-size:32px !important;

    line-height:40px !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__grid{
    grid-template-columns:1fr !important;

    gap:16px !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__card{
    min-height:auto !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__media{
    height:350px !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__body{
    min-height:auto !important;

    padding:
      18px
      18px
      20px !important;
  }

  .ag-steps-uses-widget .ag-steps-uses__card-title{
    font-size:18px !important;

    line-height:24px !important;
  }

}