/* Estilos específicos para la página de Clientes */

/* Ajuste de ruta para el menú móvil desde subcarpetas */
.mobile-menu-background {
  background-image: url('../assets/images/Kennaline Movil_movil_menu_background.png');
}

.page-content {
  width: 100%;
  position: relative;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 78px;
  width: 100%;
}

.logo-container,
.logo-container img {
  height: clamp(46.5px, calc(50 / 1920 * 100vw), 50px);
}

.main-nav {
  top: 0;
}

.mobile-menu-close {
  height: 78px;
}

@media (max-width: 1760px) {
  .header-container {
    height: 73.32px;
  }

  .main-nav {
    width: 1006.035px;
    height: 73.32px;
    bottom: -36.66px;
  }
  
  .nav-menu-wrapper {
    gap: 42.3px;
    height: 19.74px;
  }
  
  .nav-link-area {
    height: 19.74px;
  }
  
  .nav-link-area img {
    height: 19.74px;
  }

  .mobile-menu-close {
    height: 73.32px;
  }
}

@media (max-width: 1600px) {
  .header-container {
    height: 67.08px;
  }

  .main-nav {
    width: 920.415px;
    height: 67.08px;
    bottom: -33.54px;
  }
  
  .nav-menu-wrapper {
    gap: 38.7px;
    height: 18.06px;
  }
  
  .nav-link-area {
    height: 18.06px;
  }
  
  .nav-link-area img {
    height: 18.06px;
  }

  .mobile-menu-close {
    height: 67.08px;
  }
}

/* Hero Section 1 */
.hero {
  width: 100%;
  aspect-ratio: 1920/1080;
  height: auto;
  position: relative;
  overflow: visible;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/Kennaline Web_clientes_hero_background.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.55));
  background-size: cover;
  background-position: top center;
  z-index: 2;
}

.hero-banner-top-left-wrapper {
  position: absolute;
  display: flex;
  top: clamp(60px, calc(120 / 1920 * 100vw), 120px);
  width: clamp(126.92px, calc(400 / 1920 * 100vw), 400px);
  height: clamp(33px, calc(104 / 1920 * 100vw), 104px);
}

.hero-banner-top-left {
  display: flex;
  align-items: center;
  left: 0;
  width: clamp(126.92px, calc(400 / 1920 * 100vw), 400px);
  height: clamp(33px, calc(104 / 1920 * 100vw), 104px);
  padding-left: clamp(40px, calc(116.5 / 1920 * 100vw), 116.5px);
  background-image: url('../assets/images/Kennaline Web_clientes_hero_banner_top_left.png');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 3;
}

.hero-banner-top-left-text {
  width: clamp(59.02px, calc(186 / 1920 * 100vw), 186px);
  height: clamp(13.33px, calc(42 / 1920 * 100vw), 42px);
  background-image: url('../assets/images/Kennaline Web_clientes_hero_banner_top_left_text.png');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 4;
}

.hero-banner-center-bottom-wrapper {
  position: absolute;
  bottom: calc(clamp(34.5px, calc(69 / 1920 * 100vw), 69px) * -1);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(500px, calc(1000 / 1920 * 100vw), 1000px);
  height: clamp(69px, calc(138 / 1920 * 100vw), 138px);
  z-index: 3;
}

.hero-banner-center-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(500px, calc(1000 / 1920 * 100vw), 1000px);
  height: clamp(69px, calc(138 / 1920 * 100vw), 138px);
  background-image: url('../assets/images/Kennaline Web_clientes_hero_banner_center_bottom.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 4;
}

.hero-banner-center-bottom-text {
  width: clamp(432px, calc(864 / 1920 * 100vw), 864px);
  height: clamp(22.5px, calc(45 / 1920 * 100vw), 45px);
  background-image: url('../assets/images/Kennaline Web_clientes_hero_banner_center_bottom_text.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 4;
}

/* Hero Section 2 */
.hero2 {
  width: 100%;
  position: relative;
}

.hero2-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 0;
  width: 100%;
}

.hero2-content-center {
  width: 100%;
  height: clamp(424px, calc(1080 / 1440 * 100vw), 1080px);
  min-height: 0px;
  background-image: url('../assets/images/Kennaline Web_clientes_hero2_content_center.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}


/* Responsive - Imágenes móviles */
@media (max-width: 1080px) {

  .hero {
    aspect-ratio: 1080/863;
    height: auto;
    min-height: 0px;
  }

  .hero-background {
    background-image: url('../assets/images/Kennaline Movil_clientes_hero_background.png');
    background-position: top center;
  }

  .hero-overlay {
    background-position: top center;
  }

  /* Cambiar clamp de 1920 a 1440 */
  .hero-banner-top-left-wrapper {
    top: clamp(60px, calc(120 / 1440 * 100vw), 120px);
    width: clamp(126.92px, calc(400 / 1440 * 100vw), 400px);
    height: clamp(33px, calc(104 / 1440 * 100vw), 104px);
  }

  .hero-banner-top-left {
    width: clamp(126.92px, calc(400 / 1440 * 100vw), 400px);
    height: clamp(33px, calc(104 / 1440 * 100vw), 104px);
    padding-left: clamp(30px, calc(82.5 / 1440 * 100vw), 82.5px);
  }

  .hero-banner-top-left-text {
    width: clamp(59.02px, calc(186 / 1440 * 100vw), 186px);
    height: clamp(13.33px, calc(41.25 / 1440 * 100vw), 41.25px);
  }

  .hero-banner-center-bottom-wrapper {
    bottom: calc(clamp(20.7px, calc(69 / 1440 * 100vw), 69px) * -1);
    width: clamp(300px, calc(1000 / 1440 * 100vw), 1000px);
    height: clamp(41.4px, calc(138 / 1440 * 100vw), 138px);
  }

  .hero-banner-center-bottom {
    width: clamp(300px, calc(1000 / 1440 * 100vw), 1000px);
    height: clamp(41.4px, calc(138 / 1440 * 100vw), 138px);
  }

  .hero-banner-center-bottom-text {
    width: clamp(259.2px, calc(864 / 1440 * 100vw), 864px);
    height: clamp(13.5px, calc(45 / 1440 * 100vw), 45px);
  }

  /* Ajustes del hero2 en móvil */
  .hero2-content {
    padding: clamp(40px, calc(80 / 1080 * 100vw), 80px) clamp(20px, calc(60 / 1080 * 100vw), 60px) clamp(20px, calc(60 / 1080 * 100vw), 60px) clamp(20px, calc(60 / 1080 * 100vw), 60px);
  }

  .hero2-content-center {
    height: clamp(600px, calc(2800 / 1440 * 100vw), 2400px);
  }

  .hero2-text-top,
  .hero2-text-bottom {
    display: none;
  }

  .hero2-content-center {
    background-image: url('../assets/images/Kennaline Movil_clientes_hero2_content_center.png');
    max-height: none;
  }
}

@media (max-width: 768px) {
  /* Reducir tamaño del logo */
  .logo-container,
  .logo-container img {
    height: 42px;
  }

}