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

.ag-drain-benefits-widget,
.ag-drain-benefits-widget *{
  box-sizing:border-box !important;
}

.ag-drain-benefits-widget{
  --ag-yellow:#EAAA04;
  --ag-black:#000000;
  --ag-white:#FFFFFF;
  --ag-text:#D7D7D7;
  --ag-card:#1F1F1F;

  width:100% !important;

  margin:0 !important;

  padding:
    90px
    0
    100px !important;

  background:#000000 !important;

  overflow:hidden !important;
}

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

.ag-drain-benefits-widget .ag-drain-benefits__inner{
  width:min(1280px,calc(100% - 60px)) !important;

  margin:0 auto !important;

  padding:0 !important;
}

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

.ag-drain-benefits-widget .ag-drain-benefits__title{
  width:100% !important;

  margin:
    0
    0
    54px !important;

  padding:0 !important;

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

  font-weight:700;

  font-style:normal;

  font-size:50px;

  line-height:65px;

  letter-spacing:0;

  text-align:center;

  text-transform:none !important;

  color:var(--ag-white);
}

.ag-drain-benefits-widget .ag-yellow{
  color:var(--ag-yellow);
}

/* =========================================================
   GRID
========================================================= */

.ag-drain-benefits-widget .ag-drain-benefits__grid{
  width:100% !important;

  display:grid !important;

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

  gap:20px !important;

  align-items:stretch !important;
}

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

.ag-drain-benefits-widget .ag-drain-benefits__card{
  width:100% !important;

  min-height:420px !important;

  margin:0 !important;

  padding:
    31px
    28px
    30px !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:flex-start !important;

  justify-content:flex-start !important;

  background:#1F1F1F !important;

  border-radius:4px !important;

  overflow:hidden !important;
}

/* =========================================================
   ICONOS
========================================================= */

.ag-drain-benefits-widget .ag-drain-benefits__icon{
  display:block !important;

  width:54px !important;

  height:54px !important;

  min-width:54px !important;

  margin:
    0
    0
    27px !important;

  padding:0 !important;

  object-fit:contain !important;

  object-position:left center !important;

  flex:0 0 54px !important;
}

/* =========================================================
   TÍTULOS TARJETAS
========================================================= */

.ag-drain-benefits-widget .ag-drain-benefits__card-title{
  width:100% !important;

  margin:
    0
    0
    17px !important;

  padding:0 !important;

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

  font-weight:700;

  font-style:normal;

  font-size:20px;

  line-height:25px;

  letter-spacing:0;

  text-align:left;

  text-transform:none !important;

  color:var(--ag-yellow);
}

.ag-drain-benefits-widget .ag-drain-benefits__title-line{
  display:block !important;

  width:100% !important;

  white-space:normal !important;
}

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

.ag-drain-benefits-widget .ag-drain-benefits__text{
  width:100% !important;

  margin:0 !important;

  padding:0 !important;

  font-family:"Roboto",sans-serif;

  font-weight:400;

  font-style:normal;

  font-size:18px;

  line-height:27px;

  letter-spacing:0;

  text-align:left;

  color:var(--ag-text);

  overflow-wrap:break-word !important;

  word-break:normal !important;
}

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

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

  .ag-drain-benefits-widget .ag-drain-benefits__inner{
    width:calc(100% - 60px) !important;
  }

  .ag-drain-benefits-widget .ag-drain-benefits__grid{
    gap:16px !important;
  }

  .ag-drain-benefits-widget .ag-drain-benefits__card{
    min-height:410px !important;

    padding:
      28px
      22px
      28px !important;
  }

  .ag-drain-benefits-widget .ag-drain-benefits__card-title{
    font-size:18px;

    line-height:24px;
  }

  .ag-drain-benefits-widget .ag-drain-benefits__text{
    font-size:16px;

    line-height:25px;
  }

}

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

@media (max-width:900px){

  .ag-drain-benefits-widget{
    padding:
      70px
      0
      80px !important;
  }

  .ag-drain-benefits-widget .ag-drain-benefits__inner{
    width:calc(100% - 40px) !important;
  }

  .ag-drain-benefits-widget .ag-drain-benefits__title{
    margin-bottom:40px !important;

    font-size:42px;

    line-height:52px;
  }

  .ag-drain-benefits-widget .ag-drain-benefits__grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:18px !important;
  }

  .ag-drain-benefits-widget .ag-drain-benefits__card{
    min-height:360px !important;

    padding:
      28px
      25px
      28px !important;
  }

  .ag-drain-benefits-widget .ag-drain-benefits__card-title{
    font-size:19px;

    line-height:25px;
  }

  .ag-drain-benefits-widget .ag-drain-benefits__text{
    font-size:17px;

    line-height:27px;
  }

}

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

@media (max-width:560px){

  .ag-drain-benefits-widget{
    padding:
      55px
      0
      65px !important;
  }

  .ag-drain-benefits-widget .ag-drain-benefits__inner{
    width:calc(100% - 28px) !important;
  }

  .ag-drain-benefits-widget .ag-drain-benefits__title{
    margin-bottom:30px !important;

    font-size:32px;

    line-height:40px;
  }

  .ag-drain-benefits-widget .ag-drain-benefits__grid{
    grid-template-columns:1fr !important;

    gap:16px !important;
  }

  .ag-drain-benefits-widget .ag-drain-benefits__card{
    min-height:auto !important;

    padding:
      25px
      22px
      28px !important;
  }

  .ag-drain-benefits-widget .ag-drain-benefits__icon{
    width:48px !important;

    height:48px !important;

    min-width:48px !important;

    flex-basis:48px !important;

    margin-bottom:20px !important;
  }

  .ag-drain-benefits-widget .ag-drain-benefits__card-title{
    margin-bottom:14px !important;

    font-size:18px;

    line-height:24px;
  }

  .ag-drain-benefits-widget .ag-drain-benefits__text{
    font-size:16px;

    line-height:25px;
  }

}