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

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

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

/* Menú lateral derecho */
.hero-menu-right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, calc(20 / 1920 * 100vw), 20px);
  z-index: 10;
}

.hero-menu-right-item {
  display: block;
  transition: opacity 0.3s ease;
}

.hero-menu-right-item:hover {
  opacity: 0.8;
}

.hero-menu-right-perforado-bg,
.hero-menu-right-fresado-bg,
.hero-menu-right-torneado-bg,
.hero-menu-right-roscado-bg,
.hero-menu-right-repuestos-bg {
  display: block;
  width: clamp(122px, calc(244 / 1920 * 100vw), 244px);
  height: clamp(20.5px, calc(41 / 1920 * 100vw), 41px);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-menu-right-perforado-bg {
  background-image: url('../assets/images/Kennaline Web_productos_hero_menu_right_perforado.png');
}

.hero-menu-right-fresado-bg {
  background-image: url('../assets/images/Kennaline Web_productos_hero_menu_right_fresado.png');
}

.hero-menu-right-torneado-bg {
  background-image: url('../assets/images/Kennaline Web_productos_hero_menu_right_torneado.png');
}

.hero-menu-right-roscado-bg {
  background-image: url('../assets/images/Kennaline Web_productos_hero_menu_right_roscado.png');
}

.hero-menu-right-repuestos-bg {
  background-image: url('../assets/images/Kennaline Web_productos_hero_menu_right_repuestos.png');
}

.hero-menu-right-separador {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.hero-menu-right-separador-bg {
  display: block;
  width: clamp(229.5px, calc(459 / 1920 * 100vw), 459px);
  height: clamp(2px, calc(4 / 1920 * 100vw), 4px);
  background-image: url('../assets/images/Kennaline Web_productos_hero_menu_right_separador.png');
}

/* Hero Section 2 - Perforado */
.hero2,
.hero3,
.hero4,
.hero5 {
  width: 100%;
  padding: 60px 0px 60px 80px;
  position: relative;
}

.hero2-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1780/757;
  width: 100%;
  box-sizing: border-box;
}

.hero2-content-center {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: 100%;
  max-height: 600px;
  background-image: url('../assets/images/productos/perforado/Kennaline Web_hero2_content_center.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.hero2-nav-link {
  position: absolute;
  width: 52%;
  left: 48%;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.hero2-nav-link:hover {
  background-color: rgba(200, 200, 200, 0.3);
}

.hero2-nav-link-1-right {
  top: 0%;
  height: 43.5%;
}

.hero2-nav-link-2-right {
  top: 43.5%;
  height: 27%;
}

.hero2-nav-link-3-right {
  top: 70.5%;
  height: 29.5%;
}

/* Hero Section 3 - Fresado */
.hero3-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/productos/fresado/Kennaline Web_hero3_background.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}

.hero3-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/productos/fresado/Kennaline Web_hero3_background_overlay.png');
  background-size: cover;
  background-position: center;
  z-index: 2;
}

.hero3-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1780/757;
  width: 100%;
  z-index: 3;
  box-sizing: border-box;
}

.hero3-content-center {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: 100%;
  max-height: 600px;
  background-image: url('../assets/images/productos/fresado/Kennaline Web_hero3_content_center.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.hero3-nav-link {
  position: absolute;
  width: 51%;
  left: 49%;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.hero3-nav-link:hover {
  background-color: rgba(200, 200, 200, 0.3);
}

.hero3-nav-link-1-right {
  top: 0%;
  height: 29.5%;
}

.hero3-nav-link-2-right {
  top: 29.5%;
  height: 26%;
}

.hero3-nav-link-3-right {
  top: 55.5%;
  height: 24.5%;
}

.hero3-nav-link-4-right {
  top: 80%;
  height: 20%;
}

/* Hero Section 4 - Torneado */
.hero4-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1780/757;
  width: 100%;
  box-sizing: border-box;
}

.hero4-content-center {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: 100%;
  max-height: 600px;
  background-image: url('../assets/images/productos/torneado/Kennaline Web_hero4_content_center.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.hero4-nav-link {
  position: absolute;
  width: 51%;
  left: 49%;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.hero4-nav-link:hover {
  background-color: rgba(200, 200, 200, 0.3);
}

.hero4-nav-link-1-right {
  top: 0%;
  height: 23.2%;
}

.hero4-nav-link-2-right {
  top: 23.2%;
  height: 27.3%;
}

.hero4-nav-link-3-right {
  top: 50.5%;
  height: 25.5%;
}

.hero4-nav-link-4-right {
  top: 76%;
  height: 24%;
}

/* Hero Section 5 - Roscado */
.hero5-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/productos/roscado/Kennaline Web_hero5_background.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}

.hero5-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/productos/roscado/Kennaline Web_hero5_background_overlay.png');
  background-size: cover;
  background-position: center;
  z-index: 2;
}

.hero5-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1780/757;
  width: 100%;
  z-index: 3;
  box-sizing: border-box;
}

.hero5-content-center {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: 100%;
  max-height: 600px;
  background-image: url('../assets/images/productos/roscado/Kennaline Web_hero5_content_center.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.hero5-nav-link {
  position: absolute;
  width: 51%;
  left: 49%;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.hero5-nav-link:hover {
  background-color: rgba(200, 200, 200, 0.3);
}

.hero5-nav-link-1-right {
  top: 0%;
  height: 35%;
}

.hero5-nav-link-2-right {
  top: 35%;
  height: 28%;
}

.hero5-nav-link-3-right {
  top: 63%;
  height: 37%;
}

/* Hero Section 6 - Repuestos */
.hero6 {
  width: 100%;
  height: clamp(400px, calc(900 / 1920 * 100vw), 900px);
  position: relative;
  overflow: visible;
}

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

.hero6-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/productos/repuestos/Kennaline Web_hero6_background_overlay.png');
  background-size: cover;
  background-position: center;
  z-index: 2;
}

.hero6-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: clamp(400px, calc(900 / 1920 * 100vw), 900px);
  width: 100%;
  z-index: 3;
}

.hero6-content-right {
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/productos/repuestos/Kennaline Web_hero6_content_right.png');
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
}


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

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

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

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

  .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);
  }

  .hero-menu-right {
    gap: clamp(10px, calc(20 / 1440 * 100vw), 20px);
  }

  .hero-menu-right-perforado-bg,
  .hero-menu-right-fresado-bg,
  .hero-menu-right-torneado-bg,
  .hero-menu-right-roscado-bg,
  .hero-menu-right-repuestos-bg {
    width: clamp(73.2px, calc(244 / 1440 * 100vw), 244px);
    height: clamp(12.3px, calc(41 / 1440 * 100vw), 41px);
  }

  .hero-menu-right-separador-bg {
    width: clamp(137.7px, calc(459 / 1440 * 100vw), 459px);
    height: clamp(1.2px, calc(4 / 1440 * 100vw), 4px);
  }

  .hero2, .hero3, .hero4, .hero5 {
    padding: clamp(50px, calc(100 / 1080 * 100vw), 100px) clamp(30px, calc(150 / 1080 * 100vw), 150px);
    height: auto;
  }

  .hero2-content,
  .hero3-content,
  .hero4-content,
  .hero5-content{
    min-height: 0px;    
  }

  .hero2-content-center,
  .hero3-content-center,
  .hero4-content-center,
  .hero5-content-center{
    position: relative;
    height: auto;    
    max-height: none;    
  }

  /* Hero Section 2 - Perforado */
  .hero2-content {
    aspect-ratio: 843/1111;
    height: auto;
  }

  .hero2-content-center {
    position: relative;
    background-image: url('../assets/images/productos/perforado/movil/Kennaline Web_hero2_content_center.png');
    height: 100%;
    max-height: none;
  }

  .hero2-nav-link {
    position: absolute;
    width: 100%;
    left: 0;
    transition: background-color 0.3s ease;
    cursor: pointer;
  }

  .hero2-nav-link:hover {
    background-color: rgba(200, 200, 200, 0.3);
  }

  .hero2-nav-link-1-right {
    top: 57.9%;
    height: 19%;
  }

  .hero2-nav-link-2-right {
    top: 76.6%;
    height: 14.8%;
  }

  .hero2-nav-link-3-right {
    top: 91%;
    height: 12%;
  }

  /* Hero Section 3 - Fresado */
  .hero3-background {
    background-image: url('../assets/images/productos/fresado/movil/Kennaline Web_hero3_background.png');
  }

  .hero3-overlay {
    background-image: url('../assets/images/productos/fresado/movil/Kennaline Web_hero3_background_overlay.png');
  }

  .hero3-content {
    aspect-ratio: 843/1276;
    height: auto;
  }

  .hero3-content-center {
    position: relative;
    background-image: url('../assets/images/productos/fresado/movil/Kennaline Web_hero3_content_center.png');
    height: 100%;
    max-height: none;
  }

  .hero3-nav-link {
    position: absolute;
    width: 100%;
    left: 0;
    transition: background-color 0.3s ease;
    cursor: pointer;
  }

  .hero3-nav-link:hover {
    background-color: rgba(200, 200, 200, 0.3);
  }

  .hero3-nav-link-1-right {
    top: 47%;
    height: 15%;
  }

  .hero3-nav-link-2-right {
    top: 62%;
    height: 14%;
  }

  .hero3-nav-link-3-right {
    top: 76%;
    height: 13%;
  }

  .hero3-nav-link-4-right {
    top: 89%;
    height: 12%;
  }

  /* Hero Section 4 - Torneado */
  .hero4-content {
    aspect-ratio: 843/1438;
    height: auto;
  }

  .hero4-content-center {
    position: relative;
    background-image: url('../assets/images/productos/torneado/movil/Kennaline Web_hero4_content_center.png');
    height: 100%;
    max-height: none;
  }

  .hero4-nav-link {
    position: absolute;
    width: 100%;
    left: 0;
    transition: background-color 0.3s ease;
    cursor: pointer;
  }

  .hero4-nav-link:hover {
    background-color: rgba(200, 200, 200, 0.3);
  }

  .hero4-nav-link-1-right {
    top: 52%;
    height: 13.5%;
  }

  .hero4-nav-link-2-right {
    top: 65.5%;
    height: 13.1%;
  }

  .hero4-nav-link-3-right {
    top: 78.6%;
    height: 12.1%;
  }

  .hero4-nav-link-4-right {
    top: 90.7%;
    height: 11%;
  }

  /* Hero Section 5 - Roscado */
  .hero5-background {
    background-image: url('../assets/images/productos/roscado/movil/Kennaline Web_hero5_background.png');
  }

  .hero5-overlay {
    background-image: url('../assets/images/productos/roscado/movil/Kennaline Web_hero5_background_overlay.png');
  }

  .hero5-content {
    aspect-ratio: 843/1287;
    height: auto;
  }

  .hero5-content-center {
    position: relative;
    background-image: url('../assets/images/productos/roscado/movil/Kennaline Web_hero5_content_center.png');
    height: 100%;
    max-height: none;
  }

  .hero5-nav-link {
    position: absolute;
    width: 100%;
    left: 0;
    transition: background-color 0.3s ease;
    cursor: pointer;
  }

  .hero5-nav-link:hover {
    background-color: rgba(200, 200, 200, 0.3);
  }

  .hero5-nav-link-1-right {
    top: 53%;
    height: 16.5%;
  }

  .hero5-nav-link-2-right {
    top: 69.5%;
    height: 16.5%;
  }

  .hero5-nav-link-3-right {
    top: 86%;
    height: 17%;
  }

  /* Hero Section 6 - Repuestos */
  .hero6-background {
    background-image: url('../assets/images/productos/repuestos/movil/Kennaline Web_hero6_background.png');
  }

  .hero6-overlay {
    background-image: url('../assets/images/productos/repuestos/movil/Kennaline Web_hero6_background_overlay.png');
  }

  .hero6-content {
    justify-content: center;
  }

  .hero6-content-right {
    background-image: url('../assets/images/productos/repuestos/movil/Kennaline Web_hero6_content_right.png');
    background-position: center center;
  }

  .hero6 {
    height: clamp(400px, calc(1200 / 1440 * 100vw), 1200px);
    padding: clamp(0px, calc(60 / 1440 * 100vw), 60px) 0;
    box-sizing: border-box;
  }

  .hero6-content {
    height: 100%;
  }
}

@media (max-width: 768px) {
  .hero2, .hero3, .hero4, .hero5 {
    padding: clamp(40px, calc(60 / 768 * 100vw), 60px) clamp(30px, calc(60 / 768 * 100vw), 60px);
  }

  .hero6 {
    height: clamp(420px, calc(768 / 768 * 100vw), 768px);
    padding: clamp(0px, calc(40 / 768 * 100vw), 40px) 0;
    box-sizing: border-box;
  }

  .hero6-content {
    height: 100%;
  }

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

  /* Ajustar botón cerrar menú */
}