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

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

#ag-grating-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-grating-product-bg)
    center center / cover no-repeat !important;
}

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

#ag-grating-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,.30) 0%,
      rgba(0,0,0,.24) 42%,
      rgba(0,0,0,.16) 72%,
      rgba(0,0,0,.18) 100%
    ) !important;
}

#ag-grating-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,.05) 0%,
      rgba(0,0,0,.01) 55%,
      rgba(0,0,0,.25) 100%
    ) !important;
}

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

#ag-grating-product-hero .ag-grating-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-grating-product-hero .ag-grating-product__content{
  position:absolute !important;

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

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

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

  text-align:left !important;
}

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

#ag-grating-product-hero .ag-grating-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,.28) !important;
}

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

  width:100% !important;

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

  white-space:nowrap !important;
}

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

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

#ag-grating-product-hero .ag-grating-product__description{
  width:100% !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,.30) !important;
}

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

  width:100% !important;

  white-space:nowrap !important;
}

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

#ag-grating-product-hero .ag-grating-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-grating-product-hero .ag-grating-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-grating-product-hero
.ag-grating-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;
}

/* HOVER:
   FONDO BLANCO
   TEXTO AMARILLO
*/

#ag-grating-product-hero
.ag-grating-product__button--primary:hover,
#ag-grating-product-hero
.ag-grating-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-grating-product-hero
.ag-grating-product__button--secondary{
  width:215px !important;
  min-width:215px !important;

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

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

  color:#FFFFFF !important;
}

/* HOVER:
   FONDO BLANCO
   TEXTO NEGRO
*/

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

  border-color:#FFFFFF !important;

  color:#111111 !important;

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

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

#ag-grating-product-hero .ag-grating-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-grating-product-hero{
    height:780px !important;
    min-height:780px !important;
  }

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

    height:780px !important;
    min-height:780px !important;
  }

  #ag-grating-product-hero .ag-grating-product__content{
    top:185px !important;

    max-width:650px !important;
  }

  #ag-grating-product-hero .ag-grating-product__title{
    font-size:58px;
    line-height:64px;
  }

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

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

@media (max-width:900px){

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

    background-position:center center !important;
  }

  #ag-grating-product-hero::before{
    background:
      linear-gradient(
        90deg,
        rgba(0,0,0,.38) 0%,
        rgba(0,0,0,.30) 60%,
        rgba(0,0,0,.22) 100%
      ) !important;
  }

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

    height:720px !important;
    min-height:720px !important;
  }

  #ag-grating-product-hero .ag-grating-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-grating-product-hero .ag-grating-product__title{
    margin-bottom:22px !important;

    font-size:46px;
    line-height:53px;

    text-align:center !important;
  }

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

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

    font-size:17px;
    line-height:25px;

    text-align:center !important;
  }

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

    white-space:normal !important;
  }

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

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

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

@media (max-width:560px){

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

    background-position:58% center !important;
  }

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

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

    height:680px !important;
    min-height:680px !important;
  }

  #ag-grating-product-hero .ag-grating-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-grating-product-hero .ag-grating-product__title{
    margin-bottom:20px !important;

    font-size:32px;
    line-height:39px;

    text-align:center !important;
  }

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

    white-space:normal !important;
  }

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

  #ag-grating-product-hero .ag-grating-product__description{
    margin-bottom:28px !important;

    font-size:16px;
    line-height:24px;

    text-align:center !important;
  }

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

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

    gap:12px !important;
  }

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

    min-width:0 !important;

    max-width:260px !important;
  }
}