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

.ag-steps-protection-wrap,
.ag-steps-protection-wrap *{
  box-sizing:border-box !important;
}

/* =========================================================
   WRAPPER
========================================================= */

.ag-steps-protection-wrap{
  width:100% !important;

  margin:0 !important;

  padding:28px 0 !important;

  background:#000000 !important;
}

/* =========================================================
   BLOQUE
========================================================= */

.ag-steps-protection-widget{
  --ag-yellow:#EAAA04;
  --ag-white:#FFFFFF;
  --ag-text:#E3E3E3;

  position:relative !important;

  width:min(1380px,calc(100% - 70px)) !important;

  min-height:650px !important;

  margin:0 auto !important;

  padding:0 !important;

  overflow:hidden !important;

  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}

/* =========================================================
   CAPA OSCURA
========================================================= */

.ag-steps-protection-widget::before{
  content:"" !important;

  position:absolute !important;

  inset:0 !important;

  z-index:1 !important;

  pointer-events:none !important;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.70) 0%,
      rgba(0,0,0,.60) 42%,
      rgba(0,0,0,.44) 75%,
      rgba(0,0,0,.34) 100%
    ) !important;
}

/* =========================================================
   SOMBRA VERTICAL
========================================================= */

.ag-steps-protection-widget::after{
  content:"" !important;

  position:absolute !important;

  inset:0 !important;

  z-index:1 !important;

  pointer-events:none !important;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.14) 0%,
      rgba(0,0,0,.06) 52%,
      rgba(0,0,0,.32) 100%
    ) !important;
}

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

.ag-steps-protection-widget .ag-steps-protection__inner{
  position:relative !important;

  z-index:2 !important;

  width:100% !important;

  min-height:650px !important;

  margin:0 !important;

  padding:
    110px
    65px
    100px !important;

  display:flex !important;

  align-items:center !important;

  justify-content:flex-start !important;
}

/* =========================================================
   CONTENIDO
========================================================= */

.ag-steps-protection-widget .ag-steps-protection__content{
  width:100% !important;

  max-width:850px !important;

  margin:0 !important;

  padding:0 !important;
}

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

.ag-steps-protection-widget .ag-steps-protection__title{
  width:100% !important;

  max-width:720px !important;

  margin:
    0
    0
    24px !important;

  padding:0 !important;

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

  font-weight:700 !important;

  font-style:normal !important;

  font-size:45px !important;

  line-height:55px !important;

  letter-spacing:0 !important;

  text-align:left !important;

  text-transform:none !important;

  font-variant:normal !important;

  color:var(--ag-white) !important;

  text-shadow:
    0
    2px
    12px
    rgba(0,0,0,.35) !important;
}

.ag-steps-protection-widget .ag-steps-protection__title-line{
  display:block !important;

  width:100% !important;

  margin:0 !important;

  padding:0 !important;

  white-space:nowrap !important;

  text-transform:none !important;
}

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

/* =========================================================
   DESCRIPCIÓN
========================================================= */

.ag-steps-protection-widget .ag-steps-protection__description{
  width:100% !important;

  max-width:760px !important;

  margin:0 !important;

  padding:0 !important;

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

  font-weight:400 !important;

  font-style:normal !important;

  font-size:20px !important;

  line-height:30px !important;

  letter-spacing:0 !important;

  text-align:left !important;

  text-transform:none !important;

  color:var(--ag-text) !important;

  text-shadow:
    0
    1px
    8px
    rgba(0,0,0,.35) !important;
}

/* =========================================================
   PC MEDIANO
========================================================= */

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

  .ag-steps-protection-widget{
    width:calc(100% - 50px) !important;

    min-height:600px !important;
  }

  .ag-steps-protection-widget .ag-steps-protection__inner{
    min-height:600px !important;

    padding:
      95px
      50px
      85px !important;
  }

  .ag-steps-protection-widget .ag-steps-protection__content{
    max-width:750px !important;
  }

  .ag-steps-protection-widget .ag-steps-protection__title{
    max-width:680px !important;

    font-size:40px !important;

    line-height:48px !important;
  }

  .ag-steps-protection-widget .ag-steps-protection__description{
    max-width:680px !important;

    font-size:18px !important;

    line-height:28px !important;
  }

}

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

@media (max-width:900px){

  .ag-steps-protection-wrap{
    padding:20px 0 !important;
  }

  .ag-steps-protection-widget{
    width:calc(100% - 30px) !important;

    min-height:580px !important;

    background-position:center center !important;
  }

  .ag-steps-protection-widget::before{
    background:
      linear-gradient(
        90deg,
        rgba(0,0,0,.76) 0%,
        rgba(0,0,0,.65) 60%,
        rgba(0,0,0,.50) 100%
      ) !important;
  }

  .ag-steps-protection-widget::after{
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.16) 0%,
        rgba(0,0,0,.08) 55%,
        rgba(0,0,0,.36) 100%
      ) !important;
  }

  .ag-steps-protection-widget .ag-steps-protection__inner{
    min-height:580px !important;

    padding:
      75px
      35px
      70px !important;
  }

  .ag-steps-protection-widget .ag-steps-protection__content{
    max-width:700px !important;
  }

  .ag-steps-protection-widget .ag-steps-protection__title{
    max-width:650px !important;

    font-size:38px !important;

    line-height:46px !important;
  }

  .ag-steps-protection-widget .ag-steps-protection__title-line{
    white-space:normal !important;
  }

  .ag-steps-protection-widget .ag-steps-protection__description{
    max-width:650px !important;

    font-size:18px !important;

    line-height:28px !important;
  }

}

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

@media (max-width:560px){

  .ag-steps-protection-wrap{
    padding:15px 0 !important;
  }

  .ag-steps-protection-widget{
    width:calc(100% - 20px) !important;

    min-height:540px !important;

    background-position:center center !important;
  }

  .ag-steps-protection-widget::before{
    background:
      linear-gradient(
        90deg,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.72) 68%,
        rgba(0,0,0,.56) 100%
      ) !important;
  }

  .ag-steps-protection-widget::after{
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.18) 0%,
        rgba(0,0,0,.10) 55%,
        rgba(0,0,0,.40) 100%
      ) !important;
  }

  .ag-steps-protection-widget .ag-steps-protection__inner{
    min-height:540px !important;

    padding:
      60px
      20px
      55px !important;
  }

  .ag-steps-protection-widget .ag-steps-protection__content{
    width:100% !important;

    max-width:100% !important;
  }

  .ag-steps-protection-widget .ag-steps-protection__title{
    width:100% !important;

    max-width:100% !important;

    margin-bottom:20px !important;

    font-size:32px !important;

    line-height:39px !important;

    overflow-wrap:break-word !important;
  }

  .ag-steps-protection-widget .ag-steps-protection__title-line{
    display:inline !important;

    white-space:normal !important;
  }

  .ag-steps-protection-widget .ag-steps-protection__title-line::after{
    content:" " !important;
  }

  .ag-steps-protection-widget .ag-steps-protection__description{
    width:100% !important;

    max-width:100% !important;

    font-size:16px !important;

    line-height:24px !important;

    overflow-wrap:break-word !important;
  }

}