/* ===========================
   LAYOUT.CSS
   Estructuras base de layout
=========================== */

/* HEADER GENERAL */
.site-header{
  /* background-color: var(--bg-100); */
  width:100%;
  z-index:100;
  position:relative;
}

/* TOP BAR */
.header-top{
  background: var(--bg-100);
  border-bottom:1px solid #e5e5e5;
  padding:6px 0;
}

.header-top-inner{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:16px;
}

/* Header main */
.header-main{
  position: sticky;
  top:0;
  background: var(--bg-100);
  border-bottom:1px solid #e5e5e5;
  z-index:99;
  padding:12px 0;
}

.header-main-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
}

/* HERO base */
.home-hero{
  position:relative;
  overflow:hidden;
  width:100%;
  min-height:800px;
}

.home-hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  z-index:0;
}

.home-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.35) 35%,
    rgba(0,0,0,0.00) 70%
  );
  pointer-events:none;
}

.home-hero-inner{
  position:relative;
  z-index:2;
  min-height:inherit;
  display:flex;
  align-items:center;
}

.footer-white {
  background-color: #fff !important;
}