/* ==============================================
   HEADER - Responsive Background (Mobile First)
   ============================================== */

header {
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center bottom;
  
  /* Mobile: 0-767px → carga 800w */
  background-image: url(/assets/img/bg-25-educabellos-800w.jpg);  
  height: 75vh;
  
}

/* Tablet: 768px+ → carga 1200w */
@media screen and (min-width: 768px) {
  header {
    background-image: url(/assets/img/bg-25-educabellos-1200w.jpg);
    background-size: clamp(768px, 150vw, 2500px);
    height: calc(100vh - 140px);
    max-height: calc(1120px - 140px);
    min-height: calc(900px - 140px);
  }
}

/* Desktop: 1280px+ → carga 1600w */
@media screen and (min-width: 1280px) {
  header {
    background-image: url(/assets/img/bg-25-educabellos-1600w.jpg);
    background-size: clamp(768px, 150vw, 2500px);
    height: calc(100vh - 140px);
    max-height: calc(1120px - 140px);
  min-height: calc(900px - 140px);
  }
}

/* Large Desktop: 1920px+ → carga 2400w */
@media screen and (min-width: 1920px) {
  header {
    background-image: url(/assets/img/bg-25-educabellos-2400w.jpg);
    background-size: clamp(768px, 150vw, 2500px);
    height: calc(100vh - 140px);
    max-height: calc(1120px - 140px);
    min-height: calc(900px - 140px);
  }
}

/* Extra Large: 2560px+ → carga original (si existe) */
@media screen and (min-width: 2560px) {
  header {
    background-image: url(/assets/img/bg-25-educabellos.jpg);
    background-size: clamp(768px, 150vw, 2500px);
    height: calc(100vh - 140px);
    max-height: calc(1120px - 140px);
  min-height: calc(900px - 140px);
  }
}

/* Retina displays en tablet/desktop */
@media screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-width: 768px) and (min-resolution: 192dpi) {
  header {
    background-image: url(/assets/img/bg-25-educabellos-1600w.jpg);
    background-size: clamp(768px, 150vw, 2500px);
    height: calc(100vh - 140px);
    max-height: calc(1120px - 140px);
  min-height: calc(900px - 140px);
  }
}

/* ============================================== */


.ampersand img {
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
  height: 0.9em; 
  width: auto;
  transform: translateY(0.05em);
}

header:before {
    content: "";
    width: 100%;
    height: 140px;
    z-index: 0;
    position: absolute;
    right: 0;
    top: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100%);
}

/* Gradientes laterales en pantallas muy grandes */
@media screen and (min-width: 2200px) {
  header:before {
    content: "";
    width: 15%;
    height: clamp(900px, 100vh, 1024px);
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 1) 40%,
      rgba(255, 255, 255, 0) 100%
    );
  }
  
  header:after {
    content: "";
    width: 15%;
    height: clamp(900px, 100vh, 1024px);
    z-index: 1;
    position: absolute;
    right: 0;
    top: 0;
    background: linear-gradient(
      -90deg,
      rgba(255, 255, 255, 1) 40%,
      rgba(255, 255, 255, 0) 100%
    );
  }
}