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

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

#ag-fence-product-hero{
  --ag-yellow:#EAAA04;
  --ag-white:#FFFFFF;
  --ag-text:#F1F1F1;

  position:relative !important;

  width:100% !important;

  height:850px !important;
  min-height:850px !important;

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

  overflow:hidden !important;

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

/* =========================================================
   OVERLAY
========================================================= */

#ag-fence-product-hero::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,.60) 0%,
      rgba(0,0,0,.48) 42%,
      rgba(0,0,0,.28) 72%,
      rgba(0,0,0,.20) 100%
    ) !important;
}

#ag-fence-product-hero::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,.10) 0%,
      rgba(0,0,0,.03) 55%,
      rgba(0,0,0,.28) 100%
    ) !important;
}

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

#ag-fence-product-hero .ag-fence-product__inner{
  position:relative !important;

  z-index:2 !important;

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

  height:850px !important;
  min-height:850px !important;

  margin:0 auto !important;

  padding:0 !important;
}

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

#ag-fence-product-hero .ag-fence-product__content{
  position:absolute !important;

  top:185px !important;
  left:0 !important;

  width:100% !important;

  max-width:720px !important;

  margin:0 !important;

  padding:0 !important;

  text-align:left !important;
}

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

#ag-fence-product-hero .ag-fence-product__title{
  width:100% !important;

  margin:
    0
    0
    24px !important;

  padding:0 !important;

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

  font-weight:700 ;

  font-style:normal ;

  font-size:70px ;

  line-height:75px ;

  letter-spacing:0 ;

  text-align:left !important;

  text-transform:none ;

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

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

#ag-fence-product-hero .ag-fence-product__title-line{
  display:block !important;

  width:100% !important;

  margin:0 !important;

  padding:0 !important;

  white-space:nowrap !important;
}

#ag-fence-product-hero .ag-fence-product__yellow{
  color:var(--ag-yellow) !important;
}

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

#ag-fence-product-hero .ag-fence-product__description{
  width:100% !important;

  max-width:700px !important;

  margin:
    0
    0
    34px !important;

  padding:0 !important;

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

  font-weight:400 ;

  font-style:normal ;

  font-size:17px ;

  line-height:25px ;

  letter-spacing:0 ;

  text-align:left !important;

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

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

#ag-fence-product-hero .ag-fence-product__description-line{
  display:block !important;

  width:100% !important;

  white-space:nowrap !important;
}

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

#ag-fence-product-hero .ag-fence-product__actions{
  width:100% !important;

  margin:0 !important;

  padding:0 !important;

  display:flex !important;

  align-items:center !important;

  justify-content:flex-start !important;

  gap:30px !important;
}

#ag-fence-product-hero .ag-fence-product__button{
  height:50px !important;

  margin:0 !important;

  padding:
    13px
    30px !important;

  display:inline-flex !important;

  align-items:center !important;

  justify-content:center !important;

  gap:10px !important;

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

  font-weight:700 ;

  font-style:normal ;

  font-size:14px ;

  line-height:24px ;

  letter-spacing:0 ;

  text-align:center !important;

  text-decoration:none;

  white-space:nowrap !important;

  border-radius:0 !important;

  cursor:pointer !important;

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

/* =========================================================
   BOTÓN 1 — SOLICITAR COTIZACIÓN
========================================================= */

#ag-fence-product-hero
.ag-fence-product__button--primary{
  width:204px !important;

  min-width:204px !important;

  background:var(--ag-yellow) !important;

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

  color:#111111 !important;
}

#ag-fence-product-hero
.ag-fence-product__button--primary:hover,
#ag-fence-product-hero
.ag-fence-product__button--primary:focus{
  background:#FFFFFF !important;

  border-color:#FFFFFF !important;

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

  transform:translateY(-2px) !important;
}

/* =========================================================
   BOTÓN 2 — HABLAR CON UN ASESOR
========================================================= */

#ag-fence-product-hero
.ag-fence-product__button--secondary{
  width:215px !important;

  min-width:215px !important;

  background:rgba(0,0,0,.16) !important;

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

  color:#FFFFFF !important;
}

#ag-fence-product-hero
.ag-fence-product__button--secondary:hover,
#ag-fence-product-hero
.ag-fence-product__button--secondary:focus{
  background:#FFFFFF !important;

  border-color:#FFFFFF !important;

  color:#111111 !important;

  transform:translateY(-2px) !important;
}

/* =========================================================
   FLECHAS
========================================================= */

#ag-fence-product-hero .ag-fence-product__button-arrow{
  display:inline-flex !important;

  align-items:center !important;

  justify-content:center !important;

  font-size:20px ;

  line-height:1 ;

  color:inherit !important;
}

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

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

  #ag-fence-product-hero{
    height:780px !important;

    min-height:780px !important;
  }

  #ag-fence-product-hero .ag-fence-product__inner{
    width:calc(100% - 100px) !important;

    height:780px !important;

    min-height:780px !important;
  }

  #ag-fence-product-hero .ag-fence-product__content{
    top:165px !important;

    max-width:650px !important;
  }

  #ag-fence-product-hero .ag-fence-product__title{
    font-size:58px ;

    line-height:64px ;
  }

  #ag-fence-product-hero .ag-fence-product__title-line,
  #ag-fence-product-hero .ag-fence-product__description-line{
    white-space:normal !important;
  }

}

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

@media (max-width:900px){

  #ag-fence-product-hero{
    height:720px !important;

    min-height:720px !important;

    background-position:center center !important;
  }

  #ag-fence-product-hero::before{
    background:
      linear-gradient(
        90deg,
        rgba(0,0,0,.68) 0%,
        rgba(0,0,0,.52) 60%,
        rgba(0,0,0,.34) 100%
      ) !important;
  }

  #ag-fence-product-hero .ag-fence-product__inner{
    width:calc(100% - 50px) !important;

    height:720px !important;

    min-height:720px !important;
  }

  #ag-fence-product-hero .ag-fence-product__content{
    top:50% !important;

    left:50% !important;

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

    transform:translate(-50%,-50%) !important;

    text-align:center !important;
  }

  #ag-fence-product-hero .ag-fence-product__title{
    margin-bottom:22px !important;

    font-size:46px ;

    line-height:53px ;

    text-align:center !important;
  }

  #ag-fence-product-hero .ag-fence-product__title-line{
    white-space:normal !important;
  }

  #ag-fence-product-hero .ag-fence-product__description{
    margin-bottom:30px !important;

    font-size:17px ;

    line-height:25px ;

    text-align:center !important;
  }

  #ag-fence-product-hero .ag-fence-product__description-line{
    display:inline !important;

    white-space:normal !important;
  }

  #ag-fence-product-hero
  .ag-fence-product__description-line::after{
    content:" " !important;
  }

  #ag-fence-product-hero .ag-fence-product__actions{
    justify-content:center !important;
    gap:16px !important;
  }

}

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

@media (max-width:560px){

  #ag-fence-product-hero{
    height:680px !important;

    min-height:680px !important;

    background-position:center center !important;
  }

  #ag-fence-product-hero::before{
    background:
      linear-gradient(
        90deg,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.62) 68%,
        rgba(0,0,0,.42) 100%
      ) !important;
  }

  #ag-fence-product-hero .ag-fence-product__inner{
    width:calc(100% - 32px) !important;

    height:680px !important;

    min-height:680px !important;
  }

  #ag-fence-product-hero .ag-fence-product__content{
    top:50% !important;
    left:50% !important;

    width:100% !important;

    max-width:100% !important;

    transform:translate(-50%,-50%) !important;

    text-align:center !important;
  }

  #ag-fence-product-hero .ag-fence-product__title{
    margin-bottom:20px !important;

    font-size:32px ;

    line-height:39px ;

    text-align:center !important;
  }

  #ag-fence-product-hero .ag-fence-product__title-line{
    display:inline !important;

    white-space:normal !important;
  }

  #ag-fence-product-hero .ag-fence-product__title-line::after{
    content:" " !important;
  }

  #ag-fence-product-hero .ag-fence-product__description{
    max-width:100% !important;

    margin-bottom:28px !important;

    font-size:16px ;

    line-height:24px ;

    text-align:center !important;
  }

  #ag-fence-product-hero .ag-fence-product__description-line{
    display:inline !important;

    white-space:normal !important;
  }

  #ag-fence-product-hero
  .ag-fence-product__description-line::after{
    content:" " !important;
  }

  #ag-fence-product-hero .ag-fence-product__actions{
    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    gap:12px !important;
  }

  #ag-fence-product-hero .ag-fence-product__button,
  #ag-fence-product-hero
  .ag-fence-product__button--primary,
  #ag-fence-product-hero
  .ag-fence-product__button--secondary{
    width:100% !important;

    min-width:0 !important;

    max-width:260px !important;
  }

}