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

.ag-fence-models-widget,
.ag-fence-models-widget *{
  box-sizing:border-box !important;
}

.ag-fence-models-widget{
  --ag-yellow:#EAAA04;
  --ag-white:#FFFFFF;
  --ag-text:#D3D3D3;
  --ag-muted:#AFAFAF;
  --ag-card:#111111;
  --ag-line:#333333;

  width:100% !important;

  margin:0 !important;

  padding:
    75px
    0
    85px !important;

  background:#000000 !important;

  overflow:hidden !important;
}

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

.ag-fence-models-widget .ag-fence-models__inner{
  width:min(1305px,calc(100% - 80px)) !important;

  margin:0 auto !important;

  padding:0 !important;
}

/* =========================================================
   ENCABEZADO
========================================================= */

.ag-fence-models-widget .ag-fence-models__eyebrow{
  margin:
    0
    0
    10px !important;

  padding:0 !important;

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

  font-weight:700;

  font-size:14px;

  line-height:22px;

  letter-spacing:2px;

  text-align:center !important;

  text-transform:uppercase !important;

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

.ag-fence-models-widget .ag-fence-models__title{
  width:100% !important;

  margin:
    0
    0
    48px !important;

  padding:0 !important;

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

  font-weight:700;

  font-size:50px;

  line-height:65px;

  letter-spacing:0;

  text-align:center !important;

  text-transform:none !important;

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

.ag-fence-models-widget .ag-yellow{
  color:var(--ag-yellow);
}

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

.ag-fence-models-widget .ag-fence-models__grid{
  width:100% !important;

  display:grid !important;

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

  gap:20px !important;

  align-items:stretch !important;
}

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

.ag-fence-models-widget .ag-fence-model{
  width:100% !important;

  margin:0 !important;

  padding:0 !important;

  background:
    linear-gradient(
      180deg,
      #151515 0%,
      #0D0D0D 100%
    ) !important;

  border:
    1px
    solid
    #343434 !important;

  overflow:hidden !important;

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

.ag-fence-models-widget .ag-fence-model:hover{
  transform:translateY(-5px) !important;

  border-color:#5A5A5A;
}

/* =========================================================
   IMAGEN
========================================================= */

.ag-fence-models-widget .ag-fence-model__media{
  position:relative !important;

  width:100% !important;

  height:390px !important;

  margin:0 !important;

  padding:0 !important;

  overflow:hidden !important;

  background:#181818 !important;
}

.ag-fence-models-widget .ag-fence-model__image{
  display:block !important;

  width:100% !important;

  height:100% !important;

  margin:0 !important;

  padding:0 !important;

  object-fit:cover !important;

  object-position:center center !important;

  transition:
    transform .45s ease !important;
}

.ag-fence-models-widget .ag-fence-model:hover .ag-fence-model__image{
  transform:scale(1.035) !important;
}

/* =========================================================
   ETIQUETA SOBRE IMAGEN
========================================================= */

.ag-fence-models-widget .ag-fence-model__badge{
  position:absolute !important;

  left:24px !important;

  bottom:22px !important;

  margin:0 !important;

  padding:
    9px
    14px !important;

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

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

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

  font-weight:700;

  font-size:13px;

  line-height:20px;

  letter-spacing:1px;

  text-transform:uppercase !important;

  color:#FFFFFF;
}

/* =========================================================
   CUERPO
========================================================= */

.ag-fence-models-widget .ag-fence-model__body{
  width:100% !important;

  min-height:315px !important;

  margin:0 !important;

  padding:
    30px
    30px
    34px !important;
}

/* =========================================================
   NOMBRE MODELO
========================================================= */

.ag-fence-models-widget .ag-fence-model__label{
  margin:
    0
    0
    5px !important;

  padding:0 !important;

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

  font-weight:500;

  font-size:13px;

  line-height:20px;

  letter-spacing:1.5px;

  text-transform:uppercase !important;

  color:#8D8D8D;
}

.ag-fence-models-widget .ag-fence-model__title{
  width:100% !important;

  margin:
    0
    0
    23px !important;

  padding:
    0
    0
    16px !important;

  position:relative !important;

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

  font-weight:700;

  font-size:30px;

  line-height:38px;

  letter-spacing:0;

  text-align:left !important;

  text-transform:none !important;

  color:#FFFFFF;
}

.ag-fence-models-widget .ag-fence-model__title::after{
  content:"" !important;

  position:absolute !important;

  left:0 !important;

  bottom:0 !important;

  width:54px !important;

  height:4px !important;

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

/* =========================================================
   ESPECIFICACIONES
========================================================= */

.ag-fence-models-widget .ag-fence-model__specs{
  width:100% !important;

  margin:0 !important;

  padding:0 !important;

  display:flex !important;

  flex-direction:column !important;

  gap:17px !important;
}

.ag-fence-models-widget .ag-fence-model__spec{
  width:100% !important;

  margin:0 !important;

  padding:0 !important;

  display:grid !important;

  grid-template-columns:
    44px
    minmax(0,1fr) !important;

  align-items:center !important;

  gap:14px !important;
}

/* =========================================================
   ICONO
========================================================= */

.ag-fence-models-widget .ag-fence-model__icon{
  width:44px !important;

  height:44px !important;

  min-width:44px !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

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

  color:var(--ag-yellow);

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

  font-weight:700;

  font-size:18px;

  line-height:1;
}

/* =========================================================
   TEXTO DE ESPECIFICACIÓN
========================================================= */

.ag-fence-models-widget .ag-fence-model__spec-text{
  width:100% !important;

  min-width:0 !important;

  margin:0 !important;

  padding:0 !important;

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

  font-weight:400;

  font-size:17px;

  line-height:25px;

  letter-spacing:0;

  text-align:left !important;

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

.ag-fence-models-widget .ag-fence-model__spec-text strong{
  font-weight:700;

  color:#FFFFFF;
}

.ag-fence-models-widget .ag-fence-model__spec-text .ag-spec-yellow{
  color:var(--ag-yellow);
}

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

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

  .ag-fence-models-widget .ag-fence-models__inner{
    width:calc(100% - 60px) !important;
  }

  .ag-fence-models-widget .ag-fence-models__title{
    font-size:44px;

    line-height:56px;
  }

  .ag-fence-models-widget .ag-fence-model__media{
    height:340px !important;
  }

  .ag-fence-models-widget .ag-fence-model__body{
    padding:
      26px
      24px
      30px !important;
  }

  .ag-fence-models-widget .ag-fence-model__title{
    font-size:25px;

    line-height:33px;
  }

  .ag-fence-models-widget .ag-fence-model__spec-text{
    font-size:15px;

    line-height:23px;
  }

}

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

@media (max-width:900px){

  .ag-fence-models-widget{
    padding:
      60px
      0
      70px !important;
  }

  .ag-fence-models-widget .ag-fence-models__inner{
    width:calc(100% - 40px) !important;
  }

  .ag-fence-models-widget .ag-fence-models__title{
    margin-bottom:38px !important;

    font-size:42px;

    line-height:50px;
  }

  .ag-fence-models-widget .ag-fence-models__grid{
    grid-template-columns:1fr !important;

    gap:24px !important;
  }

  .ag-fence-models-widget .ag-fence-model__media{
    height:420px !important;
  }

  .ag-fence-models-widget .ag-fence-model__body{
    min-height:auto !important;

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

  .ag-fence-models-widget .ag-fence-model__title{
    font-size:28px;

    line-height:36px;
  }

}

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

@media (max-width:560px){

  .ag-fence-models-widget{
    padding:
      45px
      0
      55px !important;
  }

  .ag-fence-models-widget .ag-fence-models__inner{
    width:calc(100% - 28px) !important;
  }

  .ag-fence-models-widget .ag-fence-models__eyebrow{
    font-size:12px;

    line-height:18px;
  }

  .ag-fence-models-widget .ag-fence-models__title{
    margin-bottom:30px !important;

    font-size:32px;

    line-height:39px;
  }

  .ag-fence-models-widget .ag-fence-model__media{
    height:300px !important;
  }

  .ag-fence-models-widget .ag-fence-model__badge{
    left:16px !important;

    bottom:16px !important;

    padding:
      7px
      10px !important;

    font-size:11px;
  }

  .ag-fence-models-widget .ag-fence-model__body{
    padding:
      24px
      18px
      28px !important;
  }

  .ag-fence-models-widget .ag-fence-model__title{
    margin-bottom:20px !important;

    font-size:24px;

    line-height:31px;
  }

  .ag-fence-models-widget .ag-fence-model__spec{
    grid-template-columns:
      40px
      minmax(0,1fr) !important;

    gap:12px !important;
  }

  .ag-fence-models-widget .ag-fence-model__icon{
    width:40px !important;

    height:40px !important;

    min-width:40px !important;

    font-size:16px;
  }

  .ag-fence-models-widget .ag-fence-model__spec-text{
    font-size:15px;

    line-height:22px;

    overflow-wrap:break-word !important;
  }

}