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

/* 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_soluciones_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(146.54px, calc(460 / 1920 * 100vw), 460px);
  height: clamp(33px, calc(104 / 1920 * 100vw), 104px);
}

.hero-banner-top-left {
  display: flex;
  align-items: center;
  left: 0;
  width: clamp(146.54px, calc(460 / 1920 * 100vw), 460px);
  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_soluciones_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(79.96px, calc(252 / 1920 * 100vw), 252px);
  height: clamp(13.33px, calc(42 / 1920 * 100vw), 42px);
  background-image: url('../assets/images/Kennaline Web_soluciones_hero_banner_top_left_text.png');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 4;
}

/* Hero Section 2 */
.hero2 {
  width: 100%;
  padding: 0 clamp(60px, calc(100 / 1920 * 100vw), 100px) clamp(60px, calc(100 / 1920 * 100vw), 100px) clamp(60px, calc(100 / 1920 * 100vw), 100px);
  position: relative;
}

.hero2-banner-center-bottom-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: clamp(500px, calc(1000 / 1920 * 100vw), 1000px);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 5;
}

.hero2-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_soluciones_hero_banner_center_bottom.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 4;
}

.hero2-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_soluciones_hero_banner_center_bottom_text.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 4;
}

.hero2-content {
  display: flex;
  background-color: black;
  padding: 60px 40px 40px 40px;
  width: 100%;
  position: relative;
  z-index: 4;
  margin-top: calc(clamp(60px, calc(100 / 1920 * 100vw), 100px) * -1);
}

.hero2-text {
  flex: 1;
  height: 100%;
  max-height: 548px;
  display: flex;  
  justify-content: center;
  gap: clamp(40px, calc(60 / 1200 * 100vw), 60px);
}

.hero2-text-page1, .hero2-text-page2 {
  width: 50%;
  max-width: 635px;
  min-width: 0;
}

.hero2-text-mobile {
  width: 100%;
  max-width: 635px;
  min-width: 0;
}

.hero2-text-mobile {
  display: none;
}

.hero2-text-page1 p,
.hero2-text-page1 ul, 
.hero2-text-page2 p, 
.hero2-text-page2 ul,
.hero2-text-mobile p,
.hero2-text-mobile ul {
  text-align: justify;
  font-family: 'Saira Condensed', sans-serif;
  font-size: clamp(20px, calc(30 / 1440 * 100vw), 30px);
  line-height: 1.4;
  color: white;
}


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

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

  .hero-background {
    background-image: url('../assets/images/Kennaline Movil_soluciones_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(146.54px, calc(460 / 1440 * 100vw), 460px);
    height: clamp(33px, calc(104 / 1440 * 100vw), 104px);
  }

  .hero-banner-top-left {
    width: clamp(146.54px, calc(460 / 1440 * 100vw), 460px);
    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(79.96px, calc(252 / 1440 * 100vw), 252px);
    height: clamp(13.33px, calc(42 / 1440 * 100vw), 42px);
  }

  /* Hero Section 2 */  
  .hero2 {
    height: auto;
    min-height: 0px;
    padding: 0 clamp(60px, calc(100 / 1440 * 100vw), 100px) clamp(60px, calc(100 / 1440 * 100vw), 100px) clamp(60px, calc(100 / 1440 * 100vw), 100px);
  }

  .hero2-banner-center-bottom-wrapper {
    width: clamp(200px, calc(1000 / 1440 * 100vw), 1000px);
    box-sizing: border-box;
  }

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

  .hero2-banner-center-bottom-text {
    width: clamp(259.2px, calc(864 / 1440 * 100vw), 864px);
    height: clamp(13.5px, calc(45 / 1440 * 100vw), 45px);
  }
  
  .hero2-content {
    margin-top: calc(clamp(60px, calc(100 / 1440 * 100vw), 100px) * -1);
  }
  
  .hero2-text {
    align-items: center;
    max-height: none;
    flex-direction: column;
    gap: 20px;
  }

  .hero2-text-page1, .hero2-text-page2 {
    display: none;
  }

  .hero2-text-mobile {
    display: block;
  }
  
  .hero2-text-mobile p,
  .hero2-text-mobile ul {
    font-size: clamp(16px, calc(24 / 1080 * 100vw), 24px);
  }
}

@media (max-width: 768px) {  
  .hero2 {
    height: 100%;
    padding: 0 clamp(20px, calc(60 / 768 * 100vw), 60px) clamp(20px, calc(60 / 768 * 100vw), 60px) clamp(20px, calc(60 / 768 * 100vw), 60px);
    min-height: 0px;
 }
  
  .hero2-content {
    padding: clamp(20px, calc(40 / 768 * 100vw), 40px);
    height: 100%;
    min-height: 0px;
    margin-top: calc(clamp(40px, calc(60 / 768 * 100vw), 60px) * -1);
  }

  .hero2-text {
    height: 100%;
    min-height: 0px;
    gap: 15px;
  }

  .hero2-text-mobile p,
  .hero2-text-mobile ul {
    font-size: clamp(16px, calc(20 / 768 * 100vw), 20px);
  }

  /* Reducir tamaño del logo */
  .logo-container,
  .logo-container img {
    height: 42px;
  }

}