/* HERO */
.hero{
  position:relative;
  height:430px;
  overflow:visible;
}

.hero-img{
  position:absolute;
  inset:0;
}

.hero-img img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.18));
}

.hero-info{
  position:relative;
  z-index:2;
  width:90%;
  max-width:1180px;
  height:100%;
  margin:0 auto;

  display:flex;
  flex-direction:column;
  justify-content:center;

  color:#fff;
}

.hero-info span{
  margin-bottom:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#d8a65b;
}

.hero-info h1{
  max-width:400px;
  margin:0 0 14px;
  font-size:44px;
  line-height:.95;
}

.hero-info p{
  max-width:330px;
  margin:0 0 22px;
  font-size:15px;
  line-height:1.45;
}

.hero-info i{
  font-size:15px;
}

/* HERO SIDE */
.hero-side{
  position:absolute;
  z-index:2;
  top:50%;
  right:7%;
  transform:translateY(-50%);

  display:flex;
  flex-direction:column;
  gap:34px;

  color:#fff;
}

.hero-side article{
  max-width:190px;
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.hero-side i{
  font-size:27px;
  color:#d8a65b;
  line-height:1;
}

.hero-side h3{
  margin:0 0 5px;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}

.hero-side p{
  margin:0;
  font-size:10px;
  line-height:1.45;
  color:rgba(255,255,255,.82);
}

/* HERO TRUST */
.hero-trust{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:9px;
}

.hero-trust-images{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.hero-trust-images img{
  width:32px;
  height:32px;
  margin-left:-8px;

  border:2px solid #fff;
  border-radius:50%;

  object-fit:cover;
}

.hero-trust-images img:first-child{
  margin-left:0;
}

.hero-trust-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:8px;
}

.hero-trust-text strong{
  display:block;
  margin:0;

  font-size:10px;
  font-weight:800;
  line-height:1.1;

  color:#fff;
}

.hero-trust-text span{
  position:relative;
  top:3px;

  font-size:10px;
  font-weight:400;
  line-height:1.1;

  color:rgba(255,255,255,.78);
  text-transform:none;
}

/* HERO FEATURES */
.hero-features{
  position:absolute;
  left:50%;
  bottom:-72px;
  transform:translateX(-50%);
  z-index:3;

  width:86%;
  max-width:1060px;

  display:grid;
  grid-template-columns:repeat(4,1fr);

  background:#050505;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  overflow:hidden;
}

.hero-features article{
  position:relative;
  padding:12px 16px;
  text-align:center;
}

.hero-features article:not(:last-child)::after{
  content:"";
  position:absolute;
  top:20%;
  right:0;

  width:1px;
  height:60%;

  background:rgba(255,255,255,.08);
}

.hero-features i{
  display:block;
  margin-bottom:9px;

  font-size:23px;
  color:#d8a65b;
}

.hero-features h3{
  margin:0 0 5px;

  font-size:9px;
  font-weight:700;
  text-transform:uppercase;

  color:#fff;
}

.hero-features p{
  margin:0;

  font-size:10px;
  line-height:1.35;

  color:rgba(255,255,255,.72);
}

/* ========================================
   PRODUCTOS DESTACADOS
======================================== */

.featured-products{
  position:relative;
  width:90%;
  max-width:980px;
  margin:95px auto 42px;
}

/* ========================================
   ENCABEZADO DE SECCIÓN
======================================== */

.section-heading{
  margin-bottom:18px;
  text-align:center;
}

.section-heading h2{
  position:relative;
  display:inline-block;

  margin:0 0 6px;

  font-size:13px;
  font-weight:700;
  text-transform:uppercase;

  color:#fff;
}

.section-heading h2::before,
.section-heading h2::after{
  content:"";
  position:absolute;
  top:50%;

  width:22px;
  height:1px;

  background:#d8a65b;
}

.section-heading h2::before{
  right:100%;
  margin-right:12px;
}

.section-heading h2::after{
  left:100%;
  margin-left:12px;
}

.section-heading p{
  margin:2px 0 0;

  font-size:11px;
  color:rgba(255,255,255,.72);
}

/* ========================================
   CONTENEDOR DEL CARRUSEL
======================================== */

.products-slider{
  position:relative;
  width:100%;
}

/* ========================================
   VENTANA FIJA DEL CARRUSEL
======================================== */

.products-window{
  width:820px;
  margin:0 auto;
  overflow:hidden;
}

.products-track{
  display:flex;
  gap:12px;

  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
}

.products-track::-webkit-scrollbar{
  display:none;
}

/* ========================================
   TARJETAS DE PRODUCTO
======================================== */

.product-card{
  position:relative;

  flex:0 0 155px;

  border-radius:9px;
  overflow:hidden;

  background:#0a0a0a;
  border:1px solid rgba(255,255,255,.08);
}

.product-card img{
  width:100%;
  height:145px;

  display:block;
  object-fit:cover;
}

/* ========================================
   BOTÓN FAVORITO
======================================== */

.product-favorite{
  position:absolute;
  top:9px;
  right:9px;

  width:25px;
  height:25px;

  border:none;
  border-radius:50%;

  background:rgba(0,0,0,.4);
  color:#fff;

  cursor:pointer;
}

/* ========================================
   INFORMACIÓN DEL PRODUCTO
======================================== */

.product-info{
  padding:9px 10px 11px;
  text-align:center;
}

.product-info h3{
  margin:0 0 4px;

  font-size:10px;
  font-weight:500;

  color:#fff;
}

.product-info span{
  display:block;
  margin-bottom:7px;

  font-size:13px;
  font-weight:700;

  color:#fff;
}

.product-info a{
  display:block;
  width:78%;

  margin:0 auto;
  padding:5px;

  border:1px solid #b89b63;
  border-radius:5px;

  color:#b89b63;

  text-decoration:none;
  text-transform:uppercase;

  font-size:9px;
  font-weight:700;

  transition:all .25s ease;
}

.product-info a:hover{
  background:#b89b63;
  color:#0d0d0d;
}

/* ========================================
   FLECHAS DEL CARRUSEL
======================================== */

.products-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);

  width:30px;
  height:30px;

  border:none;
  border-radius:50%;

  background:#111;
  color:#fff;

  cursor:pointer;
  z-index:5;
}

.products-prev{
  left:0;
}

.products-next{
  right:0;
}

.products-arrow i{
  font-size:24px;
}

/* ========================================
   RESPONSIVE INDEX
======================================== */

@media (max-width:768px){

  /* HERO */
  .hero{
    height:auto;
    min-height:330px;
    overflow:hidden;

    background:
      radial-gradient(circle at top right, rgba(216,166,91,.09), transparent 30%),
      linear-gradient(180deg, #050505 0%, #0b0b0b 100%);
  }

  .hero-img,
  .hero-side,
  .hero-features,
  .hero::after{
    display:none;
  }

  .hero-info{
    width:82%;
    min-height:330px;
    padding:26px 0 32px;
    justify-content:center;
  }

  .hero-info span{
    font-size:8.5px;
    margin-bottom:6px;
  }

  .hero-info h1{
    max-width:240px;
    font-size:25px;
    line-height:1;
    margin-bottom:11px;
  }

  .hero-info p{
    max-width:250px;
    font-size:11px;
    line-height:1.45;
    margin-bottom:16px;
  }

  .hero-info i{
    font-size:12px;
  }

  /* HERO TRUST */
  .hero-trust{
    margin-top:14px;
    gap:7px;
  }

  .hero-trust-images img{
    width:25px;
    height:25px;
    margin-left:-7px;
  }

  .hero-trust-text{
    padding-top:5px;
  }

  .hero-trust-text strong,
  .hero-trust-text span{
    font-size:8.5px;
  }

  /* ========================================
     PRODUCTOS DESTACADOS
  ======================================== */

  .featured-products{
    width:90%;
    max-width:330px;
    margin:46px auto 36px;
  }

  .section-heading{
    margin-bottom:16px;
  }

  .section-heading h2{
    font-size:11px;
  }

  .section-heading h2::before,
  .section-heading h2::after{
    width:18px;
  }

  .section-heading p{
    font-size:10px;
  }

  /* ========================================
     CARRUSEL
  ======================================== */

  .products-slider{
    position:relative;
    width:100%;
  }

  .products-window{
    width:205px;
    margin:0 auto;
    overflow:hidden;
  }

  .products-track{
    gap:0;
    padding:0;

    overflow-x:auto;
    scroll-behavior:smooth;
    scrollbar-width:none;
  }

  .products-track::-webkit-scrollbar{
    display:none;
  }

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

  .product-card{
    flex:0 0 205px;
    border-radius:9px;
  }

  /* FOTO MÁS VERTICAL */
  .product-card img{
    height:215px;
  }

  .product-favorite{
    top:8px;
    right:8px;

    width:24px;
    height:24px;
  }

  .product-info{
    padding:9px 10px 11px;
  }

  .product-info h3{
    font-size:10px;
  }

  .product-info span{
    font-size:13px;
    margin-bottom:7px;
  }

  /* BOTÓN VER MÁS */
  .product-info a{
    width:68%;
    padding:5px;

    font-size:8.5px;
  }

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

  .products-arrow{
    display:flex;
    align-items:center;
    justify-content:center;

    width:28px;
    height:28px;

    background:#111;
  }

  .products-prev{
    left:0;
  }

  .products-next{
    right:0;
  }

  .products-arrow i{
    font-size:22px;
  }


}