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

#ag-innovation-hero,
#ag-innovation-hero *{
  box-sizing:border-box !important;
}

#ag-innovation-hero{
  --ag-yellow:#EAAA04;
  --ag-white:#FFFFFF;

  position:relative !important;
  width:100% !important;

  height:1000px !important;
  min-height:1000px !important;
  max-height:1000px !important;

  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;

  background:
    var(--ag-innovation-hero-bg)
    center center / cover no-repeat !important;
}

#ag-innovation-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.24) 0%,
      rgba(0,0,0,.18) 38%,
      rgba(0,0,0,.10) 68%,
      rgba(0,0,0,.04) 100%
    ) !important;
}

#ag-innovation-hero::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:45% !important;
  z-index:1 !important;
  pointer-events:none !important;

  background:
    radial-gradient(
      ellipse at center top,
      rgba(0,0,0,.06) 0%,
      rgba(0,0,0,.02) 45%,
      transparent 78%
    ) !important;
}

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

#ag-innovation-hero .ag-innovation-hero__inner{
  position:relative !important;
  z-index:2 !important;

  width:min(1280px,calc(100% - 80px)) !important;

  height:1000px !important;
  min-height:1000px !important;
  max-height:1000px !important;

  margin:0 auto !important;
  padding:0 !important;
}

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

#ag-innovation-hero .ag-innovation-hero__content{
  position:absolute !important;
  top:185px !important;
  left:50% !important;
  transform:translateX(-50%) !important;

  width:100% !important;
  max-width:1180px !important;

  margin:0 auto !important;
  padding:0 20px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;

  text-align:center !important;
}

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

#ag-innovation-hero .ag-innovation-hero__title{
  width:100% !important;
  max-width:1120px !important;

  margin:0 auto 22px !important;
  padding:0 !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  font-family:"Exo",sans-serif ;
  font-weight:700 ;
  font-style:normal ;

  font-size:70px ;
  line-height:75px ;
  letter-spacing:0 ;

  text-align:center !important;
  text-transform:none ;

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

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

#ag-innovation-hero .ag-innovation-hero__title-line{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;

  text-align:center !important;
  white-space:nowrap !important;
}

#ag-innovation-hero .ag-innovation-hero__title .ag-yellow{
  color:var(--ag-yellow) !important;
}

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

#ag-innovation-hero .ag-innovation-hero__text{
  width:100% !important;
  max-width:980px !important;

  margin:0 auto 32px !important;
  padding:0 !important;

  font-family:"Roboto",sans-serif ;
  font-weight:400 ;
  font-size:20px ;
  line-height:30px ;

  text-align:center !important;
  text-transform:none ;

  color:rgba(255,255,255,.97) !important;
  text-shadow:0 1px 8px rgba(0,0,0,.30) !important;
}

#ag-innovation-hero .ag-innovation-hero__text--desktop{
  display:block !important;
}

#ag-innovation-hero .ag-innovation-hero__text--tablet{
  display:none !important;
}

#ag-innovation-hero .ag-innovation-hero__text--mobile{
  display:none !important;
}

/* =========================================================
   BOTONES
========================================================= */

#ag-innovation-hero .ag-innovation-hero__actions{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:26px !important;
}

#ag-innovation-hero .ag-innovation-hero__button{
  all:unset !important;
  box-sizing:border-box !important;

  min-height:51px !important;
  padding:0 30px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;

  cursor:pointer !important;

  font-family:"Roboto",sans-serif ;
  font-weight:700 ;
  font-size:14px ;
  line-height:24px ;

  text-decoration:none !important;
  border-radius:0 !important;

  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease !important;
}

#ag-innovation-hero .ag-innovation-hero__button--primary{
  min-width:264px !important;
  background:var(--ag-yellow) !important;
  color:#111111 !important;
  border:1px solid var(--ag-yellow) !important;
}

#ag-innovation-hero .ag-innovation-hero__button--primary:hover,
#ag-innovation-hero .ag-innovation-hero__button--primary:focus{
  background:#FFFFFF !important;
  border-color:#FFFFFF !important;
  color:var(--ag-yellow) !important;
  transform:translateY(-2px) !important;
}

#ag-innovation-hero .ag-innovation-hero__button--secondary{
  min-width:226px !important;
  background:rgba(0,0,0,.18) !important;
  color:#FFFFFF !important;
  border:1px solid var(--ag-yellow) !important;
  backdrop-filter:blur(2px) !important;
  -webkit-backdrop-filter:blur(2px) !important;
}

#ag-innovation-hero .ag-innovation-hero__button--secondary:hover,
#ag-innovation-hero .ag-innovation-hero__button--secondary:focus{
  background:#FFFFFF !important;
  color:#111111 !important;
  border-color:#FFFFFF !important;
  transform:translateY(-2px) !important;
}

#ag-innovation-hero .ag-innovation-hero__button svg{
  width:17px !important;
  height:17px !important;
  min-width:17px !important;
  display:block !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

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

@media (min-width:901px){

  #ag-innovation-hero{
    height:1000px !important;
    min-height:1000px !important;
    max-height:1000px !important;
  }

  #ag-innovation-hero .ag-innovation-hero__inner{
    height:1000px !important;
    min-height:1000px !important;
    max-height:1000px !important;
  }

  #ag-innovation-hero .ag-innovation-hero__content{
    top:185px !important;
  }

  #ag-innovation-hero .ag-innovation-hero__title{
    font-size:70px ;
    line-height:75px ;
  }

  #ag-innovation-hero .ag-innovation-hero__title-line{
    display:block !important;
    white-space:nowrap !important;
  }

  #ag-innovation-hero .ag-innovation-hero__text--desktop{
    display:block !important;
  }

  #ag-innovation-hero .ag-innovation-hero__text--tablet,
  #ag-innovation-hero .ag-innovation-hero__text--mobile{
    display:none !important;
  }
}

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

@media (max-width:900px) and (min-width:561px){

  #ag-innovation-hero{
    height:820px !important;
    min-height:820px !important;
    max-height:820px !important;
    background-position:center center !important;
  }

  #ag-innovation-hero .ag-innovation-hero__inner{
    width:100% !important;
    height:820px !important;
    min-height:820px !important;
    max-height:820px !important;

    margin:0 !important;
    padding:85px 25px 55px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #ag-innovation-hero .ag-innovation-hero__content{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;

    width:100% !important;
    max-width:820px !important;

    margin:0 auto !important;
    padding:0 20px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;
  }

  #ag-innovation-hero .ag-innovation-hero__title{
    width:100% !important;
    max-width:780px !important;
    margin:0 auto 20px !important;

    font-size:46px ;
    line-height:52px ;
    text-align:center !important;
  }

  #ag-innovation-hero .ag-innovation-hero__title-line{
    display:inline !important;
    white-space:normal !important;
  }

  #ag-innovation-hero .ag-innovation-hero__title-line:first-child::after{
    content:" " !important;
  }

  #ag-innovation-hero .ag-innovation-hero__text--desktop{
    display:none !important;
  }

  #ag-innovation-hero .ag-innovation-hero__text--mobile{
    display:none !important;
  }

  #ag-innovation-hero .ag-innovation-hero__text--tablet{
    display:block !important;
    width:100% !important;
    max-width:690px !important;

    margin:0 auto 30px !important;
    padding:0 !important;

    font-family:"Roboto",sans-serif ;
    font-weight:400 ;
    font-size:17px ;
    line-height:27px ;

    text-align:center !important;
    color:#FFFFFF !important;
    text-shadow:0 2px 9px rgba(0,0,0,.45) !important;
  }

  #ag-innovation-hero .ag-innovation-hero__tablet-line{
    display:block !important;
    width:100% !important;
    white-space:nowrap !important;
  }

  #ag-innovation-hero .ag-innovation-hero__actions{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:16px !important;
  }

  #ag-innovation-hero .ag-innovation-hero__button--primary,
  #ag-innovation-hero .ag-innovation-hero__button--secondary{
    min-width:210px !important;
  }
}

/* =========================================================
   TABLET MÁS ANGOSTA
========================================================= */

@media (max-width:700px) and (min-width:561px){

  #ag-innovation-hero .ag-innovation-hero__inner{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  #ag-innovation-hero .ag-innovation-hero__content{
    padding:0 12px !important;
  }

  #ag-innovation-hero .ag-innovation-hero__title{
    font-size:40px ;
    line-height:47px ;
  }

  #ag-innovation-hero .ag-innovation-hero__text--tablet{
    max-width:540px !important;
    font-size:16px ;
    line-height:26px ;
  }

  #ag-innovation-hero .ag-innovation-hero__tablet-line{
    white-space:normal !important;
  }
}

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

@media (max-width:560px){

  #ag-innovation-hero{
    height:100svh !important;
    min-height:760px !important;
    max-height:none !important;
    background-position:54% center !important;
  }

  #ag-innovation-hero::before{
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.58) 0%,
        rgba(0,0,0,.50) 28%,
        rgba(0,0,0,.42) 58%,
        rgba(0,0,0,.34) 100%
      ) !important;
  }

  #ag-innovation-hero::after{
    height:100% !important;
    background:
      radial-gradient(
        ellipse at center center,
        rgba(0,0,0,.02) 0%,
        rgba(0,0,0,.06) 50%,
        rgba(0,0,0,.16) 100%
      ) !important;
  }

  #ag-innovation-hero .ag-innovation-hero__inner{
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    max-height:none !important;

    margin:0 !important;
    padding:105px 15px 60px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #ag-innovation-hero .ag-innovation-hero__content{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;

    width:100% !important;
    max-width:380px !important;

    margin:0 auto !important;
    padding:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;
  }

  #ag-innovation-hero .ag-innovation-hero__title{
    width:100% !important;
    max-width:350px !important;
    margin:0 auto 18px !important;

    font-size:38px ;
    line-height:43px ;
    text-align:center !important;
  }

  #ag-innovation-hero .ag-innovation-hero__title-line{
    display:inline !important;
    white-space:normal !important;
  }

  #ag-innovation-hero .ag-innovation-hero__title-line:first-child::after{
    content:" " !important;
  }

  #ag-innovation-hero .ag-innovation-hero__text--desktop,
  #ag-innovation-hero .ag-innovation-hero__text--tablet{
    display:none !important;
  }

  #ag-innovation-hero .ag-innovation-hero__text--mobile{
    display:block !important;

    width:100% !important;
    max-width:370px !important;

    margin:0 auto 28px !important;
    padding:0 !important;

    font-family:"Roboto",sans-serif ;
    font-weight:400 ;
    font-size:16px ;
    line-height:24px ;

    color:#FFFFFF !important;
    text-align:center !important;

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

  #ag-innovation-hero .ag-innovation-hero__mobile-line{
    display:block !important;
    width:100% !important;
    white-space:nowrap !important;
  }

  #ag-innovation-hero .ag-innovation-hero__actions{
    width:100% !important;
    margin:0 auto !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:12px !important;
  }

  #ag-innovation-hero .ag-innovation-hero__button{
    width:270px !important;
    min-width:270px !important;
    max-width:270px !important;
    min-height:46px !important;

    padding:0 18px !important;
    font-size:13px ;
    line-height:20px ;
    white-space:nowrap !important;
  }

  #ag-innovation-hero .ag-innovation-hero__button span{
    white-space:nowrap !important;
  }

  #ag-innovation-hero .ag-innovation-hero__button svg{
    width:15px !important;
    height:15px !important;
    min-width:15px !important;
  }
}

/* =========================================================
   MÓVIL PEQUEÑO
========================================================= */

@media (max-width:390px){

  #ag-innovation-hero .ag-innovation-hero__inner{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  #ag-innovation-hero .ag-innovation-hero__text--mobile{
    font-size:16px ;
    line-height:23px ;
  }
}
