/* ===================================================== */
/* PAGE HERO */
/* ===================================================== */

.page-hero{
  position:relative;

  min-height:520px;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;

  overflow:hidden;

  padding-top:140px;

  background:
  linear-gradient(
    135deg,
    rgba(7,26,47,.92),
    rgba(7,26,47,.72)
  ),

  url("../img/banner-nosotros.webp");

  background-size:cover;
  background-position:center;
}

.page-hero::after{
  content:"";

  position:absolute;

  width:700px;
  height:700px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(30,144,255,.18),
    transparent 70%
  );

  top:-250px;
  right:-150px;
}

.page-hero .container{
  position:relative;
  z-index:2;
}

.page-hero h1{
  font-size:clamp(3rem,7vw,5.5rem);

  line-height:1.05;

  color:white;

  margin-bottom:25px;

  font-weight:800;
}

.page-hero p{
  max-width:780px;

  margin:auto;

  color:rgba(255,255,255,.88);

  font-size:1.2rem;

  line-height:1.8;
}

/* ===================================================== */
/* PRODUCTS PAGE */
/* ===================================================== */

.products-page{
  background:#f5f7fb;
}

.products-page .container{
  position:relative;
}

/* ===================================================== */
/* SEARCH */
/* ===================================================== */

.products-search{

  position:relative;

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

  margin:0 auto 35px;

}

.products-search i{

  position:absolute;

  left:28px;
  top:50%;

  transform:translateY(-50%);

  color:#94a3b8;

  font-size:18px;

  z-index:2;

}

.products-search input{

  width:100%;

  height:68px;

  border:none;

  border-radius:20px;

  padding:0 30px 0 70px;

  background:white;

  font-size:16px;

  outline:none;

  box-shadow:
  0 15px 35px rgba(0,0,0,.06);

}

/* ===================================================== */
/* FILTERS */
/* ===================================================== */

.products-filters{
  display:flex;

  flex-wrap:wrap;

  gap:16px;

  justify-content:center;

  margin-bottom:60px;
}

.filter-btn{
  border:none;

  padding:15px 28px;

  border-radius:100px;

  background:#e9f0f8;

  color:#00112b;

  font-weight:700;

  cursor:pointer;

  transition:.3s;
}

.filter-btn:hover,
.filter-btn.active{

  background:
  linear-gradient(
    135deg,
    #1E90FF,
    #38BDF8
  );

  color:white;

  box-shadow:
  0 12px 25px rgba(30,144,255,.25);
}

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

.products-grid{
  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(320px,1fr));

  gap:35px;
}

/* ===================================================== */
/* PRODUCT CARD */
/* ===================================================== */

.product-card{
  background:white;

  border-radius:30px;

  overflow:hidden;

  transition:.45s;

  box-shadow:
  0 20px 45px rgba(0,0,0,.06);
}

.product-card:hover{
  transform:translateY(-10px);
}

.product-image{
  position:relative;

  height:260px;

  overflow:hidden;
}

.product-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:.6s ease;
}

.product-card:hover img{
  transform:scale(1.08);
}

.product-category{
  position:absolute;

  top:20px;
  left:20px;

  padding:10px 18px;

  border-radius:100px;

  background:
  linear-gradient(
    135deg,
    #1E90FF,
    #38BDF8
  );

  color:white;

  font-size:12px;

  font-weight:700;

  z-index:2;
}

.product-content{
  padding:35px;
}

.product-content h3{
  font-size:30px;

  color:#00112b;

  margin-bottom:18px;
}

.product-content p{
  color:#64748B;

  line-height:1.9;

  margin-bottom:30px;
}

/* ===================================================== */
/* BUTTONS */
/* ===================================================== */

.product-buttons{
  display:flex;

  gap:15px;

  flex-wrap:wrap;
}

.product-btn{
  flex:1;

  min-height:54px;

  display:flex;

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

  border-radius:14px;

  font-weight:700;

  transition:.3s;
}

.product-btn.primary{

  background:
  linear-gradient(
    135deg,
    #1E90FF,
    #38BDF8
  );

  color:white;
}

.product-btn.secondary{

  border:2px solid #dbe5f0;

  color:#00112b;
}

.product-btn:hover{
  transform:translateY(-3px);
}

/* ===================================================== */
/* LIGHTBOX */
/* ===================================================== */

.lightbox{
  position:fixed;

  inset:0;

  background:
  rgba(0,0,0,.92);

  display:flex;

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

  opacity:0;
  visibility:hidden;

  transition:.35s ease;

  z-index:99999;

  padding:40px;
}

.lightbox.active{
  opacity:1;
  visibility:visible;
}

.lightbox img{
  max-width:90%;
  max-height:90vh;

  border-radius:20px;

  object-fit:contain;
}

.lightbox-close{
  position:absolute;

  top:30px;
  right:30px;

  width:55px;
  height:55px;

  border-radius:50%;

  background:white;

  color:#00112b;

  display:flex;

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

  font-size:1.3rem;

  cursor:pointer;
}

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

@media(max-width:768px){

  .page-hero{
    min-height:620px;
  }

  .page-hero h1{
    font-size:2.8rem;
  }

  .page-hero p{
    font-size:1rem;
  }

  .products-search input{
    height:62px;
  }

  .products-filters{
    justify-content:flex-start;

    overflow:auto;

    flex-wrap:nowrap;

    padding-bottom:10px;
  }

  .filter-btn{
    white-space:nowrap;
  }

  .product-buttons{
    flex-direction:column;
  }

}

/* ===================================================== */
/* PRODUCT BUTTON FIX */
/* ===================================================== */

.product-link,
.product-btn{

  display:inline-flex;

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

  min-height:54px;

  padding:0 28px;

  border-radius:14px;

  font-weight:700;

  transition:.3s ease;

  cursor:pointer;

}

/* PRIMARY */

.product-link.primary,
.product-btn.primary{

  background:
  linear-gradient(
    135deg,
    #1E90FF,
    #38BDF8
  );

  color:white;

  box-shadow:
  0 12px 25px rgba(30,144,255,.25);

}

/* SECONDARY */

.product-link.secondary,
.product-btn.secondary{

  border:2px solid #dbe5f0;

  color:#00112b;

  background:white;

}

/* DEFAULT */

.product-link:not(.primary):not(.secondary),
.product-btn:not(.primary):not(.secondary){

  background:
  linear-gradient(
    135deg,
    #1E90FF,
    #38BDF8
  );

  color:white;

  box-shadow:
  0 12px 25px rgba(30,144,255,.25);

}

/* HOVER */

.product-link:hover,
.product-btn:hover{

  transform:translateY(-4px);

}