/* Fuentes personalizadas Kia */
        @font-face {
			font-family: 'Kia Signature';
			src: url(' /fonts/KiaSignatureFixOTFRegular.otf') format('opentype');
			font-weight: normal;
			font-style: normal;
		}

		@font-face {
			font-family: 'Kia Signature';
			src: url(' /fonts/KiaSignatureFixOTFBold.otf') format('opentype');
			font-weight: bold;
			font-style: normal;
		}

		@font-face {
			font-family: 'Kia Signature Light';
			src: url(' /fonts/KiaSignatureFixOTFLight.otf') format('opentype');
			font-weight: 300;
			font-style: normal;
		}
        
        /* Variables CSS */
        :root {
            --primary-midnight-black: #05141f;
            --medium-gray: #6b7280;
            --dark-gray: #374151;
        }
        
        /* Reset y estilos base */
        * {
            margin: 0 ;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Kia Signature', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            overflow-x: hidden;
        }
        
        /* Navegación transparente en hero */
        .navbar {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 50;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2.5rem 3rem;
            background: transparent;
            transition: all 0.3s;
        }
        
        .navbar-brand img {
            height: 1.5rem;
            width: auto;
        }
        
        .lang-switcher {
            display: flex;
            border: 1px solid rgba(255, 255, 255, 0.4);
            overflow: hidden;
        }
        
        .lang-btn {
            height: 29px;
            width: 44px;
            font-size: 0.875rem;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .lang-btn.active {
            background: white;
            color: var(--primary-midnight-black);
        }
        
        .lang-btn:not(.active) {
            background: rgba(255, 255, 255, 0.4);
            color: white;
        }
        
        /* Header fijo - inicialmente oculto */
        .fixed-header {
            position: fixed;
            top: -100px;
            left: 0;
            width: 100%;
            z-index: 100;
            background: white;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
            transition: top 0.3s ease-in-out;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 3rem;
        }
        
        .fixed-header.visible {
            top: 0;
        }
        
        .fixed-header .navbar-brand img {
            height: 1.25rem;
            filter: none;
        }
        
        .fixed-header .lang-switcher {
            border: 1px solid rgba(0, 0, 0, 0.2);
        }
        
        .fixed-header .lang-btn.active {
            background: var(--primary-midnight-black);
            color: white;
        }
        
        .fixed-header .lang-btn:not(.active) {
            background: rgba(0, 0, 0, 0.1);
            color: var(--primary-midnight-black);
        }
        
        /* Hero Section */
        .hero {
            position: relative;
            min-height: 100vh;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .hero-video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(5, 20, 31, 0) 0%, rgba(5, 20, 31, 1) 100%);
        }
        
        .hero-content {
            position: absolute;
            bottom: 4rem;
            left: 4rem;
            right: 4rem;
            z-index: 10;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 2rem;
        }
        
        .hero-left {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }
        
        .hero-title {
            font-size: 3.5rem;
            font-weight: 400;
            line-height: 0.2;
        }
        
        .hero-subtitle {
            font-size: 2.25rem;
            font-weight: 500;
            margin-bottom: 4rem;
        }
        
        .hero-p {
            font-size: 1.25rem;
            font-weight: 500;
            
        }
        
        /* Botón Cotiza Ahora */
        .btn-build {
            position: relative;
            height: 59px;
            overflow: hidden;
            cursor: pointer;
            border: none;
            background: transparent;
            width: 208px;
        }
        
        .btn-build-content {
            position: absolute;
            width: 100%;
            height: 118px;
            top: 0;
            left: 0;
            transition: transform 0.5s ease-in-out;
        }
        
        .btn-build:hover .btn-build-content {
            transform: translateY(-59px);
        }
        
        .btn-build-face {
            height: 59px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid;
            font-size: 0.875rem;
            font-weight: 600;
            text-transform: capitalize;
        }
        
        .btn-build-face.primary {
            background: #05141F;
            color: #fff;
            border-color: #05141F;
        }
        
        .btn-build-face.secondary {
            background: transparent;
            color: #05141F;
            border-color: #05141F;
        }
		
		 .btn-build-face.hero-main {
            background: #fff;
            color: #05141F;
            border-color: #fff;
        }
        
        .btn-build-face.hero-second {
            background: transparent;
            color: #fff;
            border-color: #fff;
        }
        
		.btn-build-face.btn-header-1 {
            background: #fff;
            color: #05141F;
            border-color: #05141F;
        }
        
        .btn-build-face.btn-header-2 {
            background: #05141F;
            color: #fff;
            border-color: #fff;
        }
		
        /* Navegación principal en hero - MODIFICADO PARA ESTAR A LA DERECHA Y ABAJO */
        .main-nav {
            display: flex;
            flex-direction: row;
            gap: 1.5rem;
            align-self: flex-end;
            font-family: 'Kia Signature', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            gap: 11px;
            cursor: pointer;
            color: white;
            font-size: 1.25rem;
            font-weight: 300;
            text-decoration: none;
            transition: all 0.3s ease;
            text-align: right;
        }
        
        .nav-item:hover .nav-underline {
            background: white;
        }
        
        .nav-underline {
            height: 2px;
            background: transparent;
            transition: background 0.3s;
        }
        
        .nav-item.active .nav-underline {
            background: white;
        }
        
        /* Navegación fija - copia del main-nav */
        .fixed-nav {
            display: flex;
            gap: 2.5rem;
        }
        
        .fixed-nav .nav-item {
            color: var(--primary-midnight-black);
            font-size: 1rem;
            font-weight: 400;
            padding: 0.5rem 0;
            text-align: left;
        }
        
        .fixed-nav .nav-item:hover .nav-underline,
        .fixed-nav .nav-item.active .nav-underline {
            background: var(--primary-midnight-black);
        }
        
        /* Secciones */
        .section {
            padding: 7rem 3rem;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2.5rem;
        }
        
        /* TÍTULOS DE SECCIÓN - RESPONSIVE MEJORADOS */
        .section-title {
            font-size: 3rem;
            font-weight: 300;
            color: var(--primary-midnight-black);
            line-height: 1.2;
            margin-bottom: 1rem;
        }
        
        .section-title.white {
            color: white;
        }
        
        /* Responsive para títulos */
        @media (max-width: 1024px) {
            .section-title {
                font-size: 2.2rem;
                line-height: 1.3;
            }
        }

        @media (max-width: 768px) {
            .section-title {
                font-size: 1.8rem;
                line-height: 1.4;
                margin-bottom: 0.8rem;
            }
        }

        @media (max-width: 480px) {
            .section-title {
                font-size: 1.5rem;
                line-height: 1.4;
                margin-bottom: 0.6rem;
            }
        }
        .section-subtitle {
            font-size: 1.125rem;
            font-weight: 300;
            color: var(--medium-gray);
            max-width: 33.333%;
        }
        
        /* Lifestyle Section */
        .lifestyle {
            background: linear-gradient(to bottom, var(--primary-midnight-black) 50%, white 50%);
            color: white;
            min-height: 100vh;
            overflow: hidden;
            position: relative;
            padding: 1rem 3rem 5rem;
        }
        
        .lifestyle-header {
            text-align: left;
            margin-bottom: 3rem;
        }
        
        .lifestyle-title {
            font-size: 3rem;
            font-weight: 300;
            text-align: left;
            max-width: 100%;
            margin: 0 auto;
        }
        
        .lifestyle-carousel {
            position: relative;
            height: 70vh;
            min-height: 500px;
            margin-bottom: 2rem;
        }
        
       .carousel-container {
			position: relative;
			height: 100%;
			width: 100%;
			overflow: hidden;
			padding: 0 5%; /* Padding para mostrar slides adyacentes */
		}

		.carousel-slides {
			display: flex;
			height: 100%;
			width: 100%;
			transition: transform 0.5s ease-in-out;
			gap: 2rem;
			/* Remover justify-content: center */
		}

		.lifestyle-slide {
			min-width: 70%;
			max-width: 90%;
			height: 100%;
			width:100%;
			position: relative;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			border-radius: 8px;
			flex-shrink: 0;
		}
        
        .lifestyle-slide.slide-1 {
            background-image: url('https://tasman.kiahonduras.com/img/bumpy.webp');
        }
        
        .lifestyle-slide.slide-2 {
            background-image: url('https://tasman.kiahonduras.com/img/stand_out.webp');
        }
        
        .lifestyle-slide.slide-3 {
            background-image: url('https://tasman.kiahonduras.com/img/tech.webp');
        }
        
        .lifestyle-slide::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.7) 100%);
            border-radius: 8px;
        }
        
        .lifestyle-slide-content {
            position: relative;
            z-index: 2;
            padding: 3rem;
            max-width: 50%;
        }
        
        .lifestyle-slide h3 {
            font-size: 2.5rem;
            font-weight: 300;
            line-height: 1.2;
            margin-bottom: 1.5rem;
            color: white;
        }
        
        .lifestyle-slide p {
            font-size: 1.125rem;
            opacity: 0.9;
            margin-bottom: 2rem;
            line-height: 1.6;
        }
        
        .slide-build-btn {
            position: absolute;
            bottom: 3rem;
            right: 3rem;
            z-index: 3;
        }
        
        
        /* RESPONSIVE - MÓVILES */
        @media (max-width: 1024px) {
            .lifestyle {
                padding: 1rem 1.5rem 3rem;
            }
            
            .lifestyle-title {
                font-size: 2.2rem;
            }
            
            .lifestyle-carousel {
                height: 60vh;
                min-height: 400px;
            }
        }

        @media (max-width: 768px) {
            /* LIFESTYLE - SLIDES COMPLETOS EN MÓVILES */
            .carousel-container {
                padding: 0; /* Sin padding en móviles */
            }

            .carousel-slides {
                gap: 0; /* Sin gap en móviles */
            }

            .lifestyle-slide {
                min-width: 100%; /* Slide completo en móviles */
                max-width: 100%;
                margin-right: 0;
            }
            
            .lifestyle-slide-content {
                max-width: 80%; /* Más ancho en móviles */
                padding: 2rem;
            }
            
            .lifestyle-slide h3 {
                font-size: 1.8rem;
                margin-bottom: 1rem;
            }
            
            .lifestyle-slide p {
                font-size: 1rem;
                margin-bottom: 1.5rem;
            }
            
            .slide-build-btn {
                bottom: 2rem;
                right: 2rem;
            }
            
            .lifestyle-title {
                font-size: 1.8rem;
                margin-bottom: 2rem;
            }
            
            .lifestyle-carousel {
                height: 50vh;
                min-height: 350px;
            }
            
            .carousel-controls {
                gap: 1rem;
                margin-top: 1rem;
            }
        }

        @media (max-width: 480px) {
            .lifestyle {
                padding: 1rem 1rem 2rem;
            }
            
            .lifestyle-title {
                font-size: 1.5rem;
                margin-bottom: 1.5rem;
            }
            
            .lifestyle-slide-content {
                padding: 1.5rem;
                max-width: 90%;
            }
            
            .lifestyle-slide h3 {
                font-size: 1.4rem;
                line-height: 1.3;
            }
            
            .lifestyle-slide p {
                font-size: 0.9rem;
            }
            
            .lifestyle-carousel {
                height: 45vh;
                min-height: 300px;
            }
            
            .slide-build-btn {
                bottom: 1.5rem;
                right: 1.5rem;
            }
            
            .btn-build {
                padding: 10px 20px;
                font-size: 0.9rem;
            }
        }

        
        
        /* Controles del carrusel */
        .carousel-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2rem;
            margin-top: -1rem;
			
        }
        
        .carousel-nav {
            display: flex;
            gap: 0.75rem;
			
        }
        
        .nav-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(5, 20, 31, 0.3);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .nav-dot.active {

             background: var(--primary-midnight-black);
            transform: scale(1.2);
        }
        
        .carousel-arrow {
            width: 20px;
			height: 20px;
			background: rgba(255, 255, 255, 0.9);
			border: none;
			border-radius: 4px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			transition: all 0.3s;
			color: #333;
        }
        
        .carousel-arrow:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
        }
        
        .carousel-arrow svg {
            width: 16px;
            height: 16px;
        }
        
        /* Colors Section - CON ICONOS */
.colors {
    background: white;
    padding: 8rem 3rem;
}

.colors-content {
    display: flex;
    flex-direction: row;
    gap: 2.5rem;
    margin-top: 2.5rem;
}

.colors-display {
    flex: 7;
    height: 500px;
    background: linear-gradient(to bottom, #f2f2f2 20%, #ECECEC 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.color-image-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
    z-index: 2;
}

.color-image-bg.active {
    opacity: 1;
}

.color-name-display {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 10;
    transition: all 0.3s ease;
}

.colors-selector {
    flex: 5;
    padding: 4rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}

/* GRID DE COLORES CON ICONOS */
.color-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    width: 100%;
}

.color-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.color-option:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.color-option.active {
    background: rgba(5, 20, 31, 0.1);
}

/* CONTENEDOR DEL ICONO */
.color-icon-container {
    width: 48px;
    height: 48px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.color-option.active .color-icon-container {
    border-color: var(--primary-midnight-black);
    box-shadow: 0 4px 12px rgba(5, 20, 31, 0.2);
    transform: scale(1.1);
}

/* ICONO DE COLOR */
.color-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    transition: all 0.3s ease;
}

/* NOMBRE DEL COLOR */
.color-name {
    font-size: 0.75rem;
    color: var(--primary-midnight-black);
    font-weight: 400;
    line-height: 1.2;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    max-width: 100px;
}

.color-option.active .color-name {
    opacity: 1;
    font-weight: 500;
}

.disclaimer {
    font-size: 0.75rem;
    color: var(--medium-gray);
    text-align: center;
    font-weight: 300;
    line-height: 1.4;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .colors-content {
        flex-direction: column;
        gap: 2rem;
    }
    
    .colors-display {
        flex: none;
        height: 400px;
    }
    
    .colors-selector {
        flex: none;
        padding: 2rem 1rem;
        gap: 2rem;
    }
    
    .color-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    .color-option {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    
    .color-icon-container {
        width: 40px;
        height: 40px;
    }
    
    .color-icon {
        width: 32px;
        height: 32px;
    }
    
    .color-name {
        font-size: 0.7rem;
        max-width: 80px;
    }
}

@media (max-width: 768px) {
    .colors {
        padding: 4rem 1.5rem;
    }
    
    .colors-display {
        height: 350px;
    }
    
    .color-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        max-width: 400px;
    }
    
    .color-option {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    
    .color-icon-container {
        width: 36px;
        height: 36px;
    }
    
    .color-icon {
        width: 28px;
        height: 28px;
    }
    
    .color-name {
        font-size: 0.65rem;
        max-width: 70px;
    }
    
    .color-name-display {
        bottom: 15px;
        left: 15px;
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}

@media (max-width: 480px) {
    .colors {
        padding: 2rem 1rem;
    }
    
    .colors-display {
        height: 280px;
    }
    
    .color-grid {
        gap: 0.5rem;
        max-width: 300px;
    }
    
    .color-option {
        padding: 0.4rem;
        gap: 0.4rem;
    }
    
    .color-icon-container {
        width: 32px;
        height: 32px;
    }
    
    .color-icon {
        width: 24px;
        height: 24px;
    }
    
    .color-name {
        font-size: 0.6rem;
        max-width: 60px;
    }
    
    .disclaimer {
        font-size: 0.7rem;
        padding: 0 1rem;
    }
}

                
      /* Specs Section - REDISEÑADA */
        .specs {
            background: white;
            position: relative;
            min-height: 100vh;
            overflow: hidden;
        }

        .specs-header {
            background: transparent;
            color: white;
            padding: 7rem 3rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .section-title {
            font-size: 3rem;
            font-weight: 300;
            line-height: 1.2;
        }

        .section-title.white {
            color: white;
        }

        .specs-tabs {
            display: flex;
            gap: 1.5rem;
            text-transform: capitalize;
        }

        .specs-tab {
            padding: 0.75rem 0;
            border-bottom: 2px solid transparent;
            cursor: pointer;
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.5);
            transition: all 0.3s;
            text-decoration: none;
        }

        .specs-tab.active,
        .specs-tab:hover {
            color: white;
            border-bottom-color: white;
        }

        .specs-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: 1;
            transition: background-image 0.5s ease-in-out;
        }

        /* Diferentes fondos para cada tab */
        	.specs-content.exterior {
			background-image: url('https://tasman.kiahonduras.com/img/exterior.webp');
		}

		.specs-content.interior {
			background-image: url('https://tasman.kiahonduras.com/img/interior.webp');
		}

		.specs-content.tecnologia {
			background-image: url('https://tasman.kiahonduras.com/img/technology.webp');
		}

		.specs-content.rendimiento {
			background-image: url('https://tasman.kiahonduras.com/img/performance.webp');
		}

        .specs-overlay {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(55, 65, 81, 0.9) 0%, rgba(55, 65, 81, 0) 40%);

        }
        

           /* HOTSPOTS - Botones "+" */
        .hotspot {
            position: absolute;
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.9);
            border: 12px solid rgba(0, 0, 0, 0.15);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 3;
            transition: all 0.3s ease;
            backdrop-filter: blur(12px);
        }

        .hotspot:hover {
            background: white;
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        .hotspot::before {
            content: '+';
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }

        /* Posiciones de hotspots para exterior */
        .hotspot.roof-rack {
            top: 40%;
            left: 50%;
            transform: translateX(-50%);
        }

        .hotspot.front-detail {
            top: 55%;
            left: 25%;
        }

        .hotspot.wheel {
            bottom: 22%;
            right: 30%;
        }

        /* MODAL */
        .specs-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .specs-modal.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background: white;
            border-radius: 12px;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow: hidden;
            position: relative;
            animation: modalSlideIn 0.3s ease;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(50px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .modal-image {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }

        .modal-body {
            padding: 2rem;
        }

        .modal-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-midnight-black);
            margin-bottom: 1rem;
        }

        .modal-description {
            font-size: 1rem;
            color: var(--dark-gray);
            line-height: 1.6;
        }

        .modal-close {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 30px;
            height: 30px;
            background: rgba(0, 0, 0, 0.6);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s ease;
        }

        .modal-close:hover {
            background: rgba(0, 0, 0, 0.8);
            transform: scale(1.1);
        }

        .modal-close::before {
            content: '×';
        }

        /* RESPONSIVE */
        @media (max-width: 1024px) {
            .specs-header {
                flex-direction: column;
                gap: 2rem;
                align-items: flex-start;
                padding: 4rem 2rem 1.5rem;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .specs-tabs {
                width: 100%;
                justify-content: flex-start;
                overflow-x: auto;
                padding-bottom: 0.5rem;
            }
            
            .specs-tab {
                white-space: nowrap;
                flex-shrink: 0;
            }
        }

        @media (max-width: 768px) {
            /* MÓVILES: Layout vertical */
            .specs {
                min-height: auto;
                position: relative; /* CAMBIO: mantener position relative */
                display: flex;
                flex-direction: column;
            }
            
            .specs-header {
                background: var(--primary-midnight-black);
                color: white;
                padding: 3rem 1.5rem 2rem;
                position: relative; /* CAMBIO: relative en lugar de static */
                min-height: auto;
                order: 1; /* Primero el header */
            }
            
            .section-title {
                font-size: 1.8rem;
                line-height: 1.3;
            }
            
            .specs-content {
                position: relative; /* CAMBIO: relative en lugar de static */
                height: 60vh;
                min-height: 400px;
                width: 100%;
                background-size: cover;
                background-position: center;
                display: flex;
                align-items: center;
                justify-content: center;
                order: 2; /* Segundo el contenido */
                /* CRÍTICO: Asegurar que los hotspots estén contenidos */
                overflow: visible;
            }
            
            .specs-overlay {
                background: linear-gradient(to bottom, rgba(55, 65, 81, 0.3) 0%, rgba(55, 65, 81, 0.7) 100%);
            }
            
            .specs-tabs {
                gap: 1rem;
                flex-wrap: wrap;
            }
            
            .specs-tab {
                font-size: 0.9rem;
                padding: 0.5rem 0;
            }
            
            /* HOTSPOTS EN MÓVILES - CRÍTICO */
            .hotspots {
                position: relative; /* CAMBIO: relative para que se mantenga en su contenedor */
                width: 100%;
                height: 100%;
            }
            
            .hotspot {
                width: 50px;
                height: 50px;
                /* Posiciones específicas para móviles */
                position: absolute !important;
            }
            
            /* Ajustar posiciones de hotspots en móviles */
            .hotspot.roof-rack {
                top: 20% !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
            }
            
            .hotspot.front-detail {
                top: 50% !important;
                left: 20% !important;
                transform: none !important;
            }
            
            .hotspot.wheel {
                bottom: 20% !important;
                right: 15% !important;
                top: auto !important;
                left: auto !important;
                transform: none !important;
            }
            
            .hotspot::before {
                font-size: 24px;
            }
            
            /* Modal más grande en móviles */
            .modal-content {
                width: 95%;
                max-height: 85vh;
            }
            
            .modal-body {
                padding: 1.5rem;
            }
            
            .modal-title {
                font-size: 1.3rem;
            }
            
            .modal-description {
                font-size: 0.9rem;
            }
        }

        @media (max-width: 480px) {
            .specs-header {
                padding: 2rem 1rem 1.5rem;
            }
            
            .section-title {
                font-size: 1.5rem;
            }
            
            .specs-content {
                height: 50vh;
                min-height: 300px;
            }
            
            .specs-tabs {
                gap: 0.5rem;
            }
            
            .specs-tab {
                font-size: 0.8rem;
            }
        }
        
        /* Essentials Section */
		.essentials {
			background: white;
			padding: 3rem 3rem;
		}

		.essentials-carousel {
			position: relative;
			width: 100%;
			height: 70vh;
			min-height: 500px;
			overflow: hidden;
			margin-top: 2.5rem;
			border-radius: 8px;
		}

		.essentials-slides {
			display: flex;
			height: 100%;
			width: 100%;
			transition: transform 0.5s ease-in-out;
		}

		.essential-slide {
			min-width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
			display: flex;
			align-items: flex-end;
			justify-content: flex-start;
		}

		.essential-slide-video {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: 1;
		}

		.essential-slide::before {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
			z-index: 2;
		}

		.essential-slide-content {
			position: relative;
			z-index: 3;
			padding: 3rem;
			color: white;
			max-width: 50%;
		}

		.essential-slide h3 {
			font-size: 2.5rem;
			font-weight: 300;
			margin-bottom: 1rem;
			line-height: 1.2;
		}

		.essential-slide p {
			font-size: 1.125rem;
			line-height: 1.6;
			opacity: 0.9;
		}
		
		/* TABLET - 1024px hacia abajo */
@media (max-width: 1024px) {
    .essential-slide-content {
        max-width: 60%;
        padding: 2.5rem;
    }
    
    .essential-slide h3 {
        font-size: 2rem;
        margin-bottom: 0.8rem;
    }
    
    .essential-slide p {
        font-size: 1rem;
    }
}

/* MÓVILES - 768px hacia abajo */
@media (max-width: 768px) {
    .essential-slide-content {
        max-width: 85%; /* Más ancho en móviles */
        padding: 2rem 1.5rem;
        text-align: left;
        
        /* CRÍTICO: Asegurar que se vea todo el contenido */
        position: absolute;
        bottom: 2rem; /* Posicionar desde abajo */
        left: 1.5rem;
        right: 1.5rem;
        top: auto; /* Quitar restricción superior */
    }
    
    .essential-slide h3 {
        font-size: 1.6rem;
        font-weight: 400;
        margin-bottom: 0.8rem;
        line-height: 1.3;
    }
    
    .essential-slide p {
        font-size: 0.95rem;
        line-height: 1.5;
        opacity: 0.95;
    }
    
    /* Mejorar overlay para mejor legibilidad en móviles */
    .essential-slide::before {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
    }
}

/* MÓVILES PEQUEÑOS - 480px hacia abajo */
@media (max-width: 480px) {
    .essential-slide-content {
        max-width: 90%;
        padding: 1.5rem 1rem;
        bottom: 1.5rem;
        left: 1rem;
        right: 1rem;
    }
    
    .essential-slide h3 {
        font-size: 1.3rem;
        margin-bottom: 0.6rem;
        line-height: 1.25;
    }
    
    .essential-slide p {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    /* Carousel específico para móviles */
    .essentials-carousel {
        height: 50vh !important;
        min-height: 350px !important;
    }
}

		/* Controles del carrusel de essentials */
		.essentials-controls {
			position: absolute;
			bottom: 3rem;
			right: 3rem;
			display: flex;
			gap: 1rem;
			z-index: 4;
		}

		.essentials-arrow {
			width: 20px;
			height: 20px;
			background: rgba(255, 255, 255, 0.9);
			border: none;
			border-radius: 4px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			transition: all 0.3s;
			color: #333;
		}

		.essentials-arrow:hover {
			background: white;
			transform: scale(1.05);
		}

		.essentials-arrow svg {
			width: 20px;
			height: 20px;
		}

		.essentials-arrow:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
        
        /* Customization Section */
        .customization {
            background: white;
            padding: 3rem 3rem;
        }
        
        .customization-content {
            background: linear-gradient(135deg, #526e80, #6b8494);
            height: 100vh;
            margin-top: 1.25rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .customization-content::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 600"><rect width="1024" height="600" fill="%23526e80"/><text x="512" y="300" font-family="Arial" font-size="48" fill="white" text-anchor="middle" dy=".3em"></text></svg>');
            background-size: cover;
            background-position: center;
        }
        
        .customization-content-inner {
            position: relative;
            z-index: 2;
            max-width: 600px;
        }
        
        .customization-content h3 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        
        .customization-content p {
            font-size: 1.125rem;
        }
        
       /* Trims Section - CARRUSEL FUNCIONAL */
        .trims {
            background: #f8f9fa;
            padding: 1rem 3rem;
            min-height: 100vh;
        }
        
        .trims-carousel {
            position: relative;
            width: 100%;
            margin-top: 3rem;
            overflow: hidden; /* IMPORTANTE: Ocultar el overflow */
        }
        
        .trims-slides {
            display: flex; /* CAMBIO: De grid a flex */
            gap: 3rem;
            max-width: none; /* CAMBIO: Remover max-width */
            margin: 0;
            transition: transform 0.5s ease-in-out; /* NUEVO: Transición para el movimiento */
            width: calc(90% + 3rem); /* NUEVO: Ancho total para 6 cards (2 páginas) */
        }
        
        .trim-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            flex-shrink: 0; /* NUEVO: Evitar que se reduzcan */
            width: calc(33.333% - 2rem); /* NUEVO: Ancho fijo para 3 cards por vista */
        }
        
        .trim-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
        }
        
        .trim-card-image {
            height: 280px;
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        /* Imágenes específicas para cada trim */
        .trim-card.lx .trim-card-image {
            background: url('https://tasman.kiahonduras.com/img/tasman-lx.png') center/contain no-repeat;
        }
        
        .trim-card.ex .trim-card-image {
            background: url('https://tasman.kiahonduras.com/img/tasman-ex.png') center/contain no-repeat;
        }
        
        .trim-card.gt .trim-card-image {
            background: url('https://tasman.kiahonduras.com/img/tasman-ex-top.png') center/contain no-repeat;
        }
        
        .trim-card.x-line .trim-card-image {
            background: url('https://tasman.kiahonduras.com/img/x-line.png') center/contain no-repeat;
        }
        
        .trim-card.x-pro .trim-card-image {
            background: url('https://tasman.kiahonduras.com/img/x-pro.png') center/contain no-repeat;
        }
        
        .trim-card.x-pro-plus .trim-card-image {
            background: url('https://tasman.kiahonduras.com/img/x-pro-plus.png') center/contain no-repeat;
        }
        
        .trim-card-content {
            padding: 2.5rem;
        }
        
        .trim-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 2rem;
        }
        
        .trim-card h3 {
            font-size: 2rem;
            font-weight: 300;
            color: var(--primary-midnight-black);
            margin: 0;
        }
        
        .trim-price {
            text-align: right;
        }
        
        .price-label {
            font-size: 0.875rem;
            color: var(--medium-gray);
            margin-bottom: 0.25rem;
        }
        
        .price-amount {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--primary-midnight-black);
        }
        
        .trim-features {
            list-style: none;
            margin-bottom: 2.5rem;
            display: grid;
            gap: 0.75rem;
        }
        
        .trim-features li {
            font-size: 0.9rem;
            color: var(--dark-gray);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .trim-features li::before {
            content: '';
            width: 6px;
            height: 6px;
            background: var(--primary-midnight-black);
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        .trim-card .btn-build {
            width: 100%;
            margin-top: auto;
        }
        
        .trim-card .btn-build-face {
            font-size: 0.9rem;
            font-weight: 600;
        }
        
        /* NUEVO: Controles del carrusel */
        .trims-carousel-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2rem;
            margin-top: 3rem;
        }
        
        .carousel-arrow {
            width: 20px;
			height: 20px;
			background: rgba(255, 255, 255, 0.9);
			border: none;
			border-radius: 4px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			transition: all 0.3s;
			color: #333;
        }
        
        .carousel-arrow:hover {
            background: var(--primary-midnight-black);
            color: white;
            transform: scale(1.05);
        }
        
        .carousel-arrow:disabled {
            opacity: 0.3;
            cursor: not-allowed;
            pointer-events: none;
        }
        
        .carousel-arrow svg {
            width: 20px;
            height: 20px;
        }
        
        .carousel-indicators {
            display: flex;
            gap: 0.75rem;
        }
        
        .indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(5, 20, 31, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .indicator.active {
            background: var(--primary-midnight-black);
            transform: scale(1.2);
        }
        
      /* SOLUCIÓN CORRECTA PARA MÓVIL */
        @media (max-width: 768px) {
            .trims-carousel {
                padding: 0 1rem; 
            }

            .trims-slides {
                width: 100%; 
                gap:0;
            }

            .trim-card {
                width: 16.666%; 
                flex-shrink: 0;
                margin: 0; 
                padding: 0 1rem; 
                box-sizing: border-box;
            }

            /* La card interna mantiene su diseño */
            .trim-card > * {
                width: 100%;
            }

            .trim-card-content {
                padding: 2rem;
            }

            .trim-header {
                flex-direction: column;
                gap: 1rem;
            }

            .trim-price {
                text-align: left;
            }
        }
        /* R&D Section - REDISEÑADO COMO GRID DE VIDEOS */
		.rd {
			background: white;
			padding: 7rem 3rem;
		}

		.rd-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
			gap: 2rem;
			margin-top: 3rem;
			max-width: 1400px;
			margin-left: auto;
			margin-right: auto;
		}

		.rd-video-card {
			position: relative;
			aspect-ratio: 16/16;
			border-radius: 12px;
			overflow: hidden;
			cursor: pointer;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
		}

		.rd-video-card:hover {
			transform: translateY(-4px);
			box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
		}

		.rd-video-thumbnail {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.3s ease;
		}

		.rd-video-card:hover .rd-video-thumbnail {
			transform: scale(1.05);
		}

		.rd-video-overlay {
			position: absolute;
			inset: 0;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 1.5rem;
		}

		.rd-video-title {
			color: white;
			font-size: 1.5rem;
			font-weight: 500;
			text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
			z-index: 2;
		}

		.rd-play-button {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 80px;
			height: 80px;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all 0.3s ease;
			z-index: 3;
		}

		.rd-video-card:hover .rd-play-button {
			background: white;
			transform: translate(-50%, -50%) scale(1.1);
		}

		.rd-play-button::after {
			content: '';
			width: 0;
			height: 0;
			border-left: 20px solid #333;
			border-top: 12px solid transparent;
			border-bottom: 12px solid transparent;
			margin-left: 4px;
		}

		.rd-see-more {
			text-align: center;
			margin-top: 3rem;
		}

		.see-more-btn {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			padding: 1rem 2rem;
			background: transparent;
			border: 2px solid var(--primary-midnight-black);
			color: var(--primary-midnight-black);
			font-size: 1rem;
			font-weight: 600;
			border-radius: 6px;
			cursor: pointer;
			transition: all 0.3s ease;
			text-decoration: none;
		}

		.see-more-btn:hover {
			background: var(--primary-midnight-black);
			color: white;
			transform: translateY(-2px);
			box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
		}

		.see-more-arrow {
			transition: transform 0.3s ease;
		}

		.see-more-btn:hover .see-more-arrow {
			transform: translateY(2px);
		}

		/* Videos adicionales - inicialmente ocultos */
		.rd-video-card.hidden {
			display: none;
		}

		/* Modal para videos */
		.video-modal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.9);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 1000;
			opacity: 0;
			visibility: hidden;
			transition: all 0.3s ease;
		}

		.video-modal.active {
			opacity: 1;
			visibility: visible;
		}

		.video-modal-content {
			position: relative;
			width: 90%;
			max-width: 800px;
			aspect-ratio: 16/9;
			background: black;
			border-radius: 8px;
			overflow: hidden;
		}

		.video-modal iframe {
			width: 100%;
			height: 100%;
			border: none;
		}

		.video-modal-close {
			position: absolute;
			top: -50px;
			right: 0;
			background: white;
			border: none;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			font-size: 1.5rem;
			transition: all 0.3s ease;
		}

		.video-modal-close:hover {
			background: #f0f0f0;
			transform: scale(1.1);
		}

		/* Responsive */
		@media (max-width: 768px) {
			.rd-grid {
				grid-template-columns: 1fr;
				gap: 1.5rem;
			}
			
			.rd-video-title {
				font-size: 1.25rem;
			}
			
			.rd-play-button {
				width: 60px;
				height: 60px;
			}
			
			.rd-play-button::after {
				border-left: 15px solid #333;
				border-top: 9px solid transparent;
				border-bottom: 9px solid transparent;
			}
			
			.video-modal-content {
				width: 95%;
			}
		}
        
        /* Social Media Section */
        .social-media {
            background: white;
            padding: 5rem 3rem;
        }
        
        .social-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2.5rem;
            margin-top: 5rem;
        }
        
        .social-card {
            aspect-ratio: 4/3;
            position: relative;
            overflow: hidden;
            border-radius: 0.5rem;
        }
        
        .social-card-image {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #1f2937, #4b5563);
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 1.5rem;
        }
        
        .social-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to left, rgba(55, 65, 81, 0) 0%, rgba(55, 65, 81, 0.6) 100%);
        }
        
        .social-content {
            position: absolute;
            bottom: 2.5rem;
            left: 2.5rem;
            color: white;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .social-icon {
            width: 24px;
            height: 24px;
        }
        
        /* Subscription Section - MEJORADO */
		.subscription {
			min-height: 100vh;
			background: linear-gradient(to right, rgba(55, 65, 81, 0.9), rgba(55, 65, 81, 0.5)), 
						url('https://tasman.kiahonduras.com/img/subscription-bg.webp');
			background-size: cover;
			background-position: center;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 3rem 5rem; /* Más padding para centrar mejor */
			gap: 6rem; /* Más espacio entre contenido y formulario */
		}

		.subscription-content {
			color: white;
			max-width: 500px;
			flex: 1;
		}

		.subscription-title {
			font-size: 3rem;
			font-weight: 300;
			line-height: 1.2;
			text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		}

		/* Formulario de suscripción - MÁS ANCHO Y ESPACIOSO */
		.subscription-form {
            border:1px solid #f3f3f3;		
			border-radius: 12px;
			padding: 3rem; /* Más padding interno */
			max-width: 550px; /* Más ancho */
			width: 100%;
			margin-right: 2rem; /* Separar del borde derecho */
		}

		.form-row {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 1.5rem; /* Más espacio entre campos */
			margin-bottom: 2rem; /* Más espacio entre filas */
		}

		.form-group {
			display: flex;
			flex-direction: column;
		}

		.form-group.full-width {
			grid-column: 1 / -1;
			margin-bottom: 1.5rem; /* Espacio adicional para campos completos */
		}

		.form-label {
			color: white;
			font-size: 0.875rem;
			font-weight: 500;
			margin-bottom: 0.75rem; /* Más espacio entre label e input */
		}

		.form-input, .form-select {
			height: 55px; /* Campos más altos */
			padding: 0 1.25rem; /* Más padding interno */
			border: 1px solid rgba(255, 255, 255, 0.3);
			border-radius: 6px;
			background: rgba(255, 255, 255, 0.9);
			color: #333;
			font-size: 0.9rem; /* Texto ligeramente más grande */
			transition: all 0.3s;
		}

		.form-input:focus, .form-select:focus {
			outline: none;
			border-color: white;
			background: white;
			transform: translateY(-1px); /* Sutil efecto de elevación */
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		}

		.form-input::placeholder {
			color: #999;
			font-size: 0.875rem;
		}

		.form-select {
			cursor: pointer;
			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
			background-position: right 1rem center;
			background-repeat: no-repeat;
			background-size: 1rem;
			padding-right: 3rem;
		}

		.checkbox-group {
			display: flex;
			align-items: flex-start;
			gap: 1rem; /* Más espacio entre checkbox y texto */
			margin: 2rem 0; /* Más margen vertical */
			padding: 1rem 0; /* Padding adicional */
		}

		.checkbox-input {
			width: 20px; /* Checkbox más grande */
			height: 20px;
			margin-top: 2px;
			cursor: pointer;
		}

		.checkbox-label {
			color: white;
			font-size: 0.8rem; /* Ligeramente más grande */
			line-height: 1.5; /* Mejor espaciado de línea */
			cursor: pointer;
		}

		.checkbox-label a {
			color: white;
			text-decoration: underline;
		}

		.submit-btn {
			width: 100%;
			height: 55px; /* Mismo alto que los inputs */
			background: transparent;
			border: 2px solid white; /* Border más grueso */
			color: white;
			font-size: 1rem;
			font-weight: 600;
			border-radius: 6px;
			cursor: pointer;
			transition: all 0.3s;
			margin-top: 1rem; /* Espacio adicional arriba */
		}

		.submit-btn:hover {
			background: white;
			color: #333;
			transform: translateY(-2px); /* Efecto de elevación */
			box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
		}

		/* Responsive - MEJORADO */
		@media (max-width: 1024px) {
			.subscription {
				flex-direction: column;
				text-align: center;
				padding: 4rem 2rem;
				gap: 3rem;
			}
			
			.subscription-form {
				max-width: 100%;
				margin-right: 0;
				padding: 2.5rem;
			}
		}

		@media (max-width: 768px) {
			.subscription {
				padding: 3rem 1.5rem;
			}
			
			.form-row {
				grid-template-columns: 1fr;
				gap: 1.5rem;
			}
			
			.subscription-title {
				font-size: 2rem;
			}
			
			.subscription-form {
				padding: 2rem;
			}
		}

				
        
        /* Footer */
        .footer {
            background: white;
            padding: 5rem 3rem 7rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 4rem;
        }
        
        .footer-brand {
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
        }
        
        .footer-brand img {
            width: 8rem;
            height: 2rem;
        }
		
		.footer-images {
			display: flex;
			align-items: center;
			gap: 15px;
		}

		.footer-images img {
			height: 32px;
			width: auto;
		}

        .footer-copyright {
            color: var(--primary-midnight-black);
            font-size: 1.2rem;
        }
        
        .footer-social {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            margin-top:-2px;
        }
        
        .footer-social h3 {
            color: var(--primary-midnight-black);
            font-size: 1.5rem;
            font-weight: 300;
        }
        
        .social-links {
            display: flex;
            gap: 0.5rem;
            margin-top:-1.4rem;
        }
        
        .social-link {
            width: 2rem;
            height: 2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: transform 0.3s;
        }
        
        .social-link:hover {
            transform: scale(1.1);
        }
        
        .social-link img {
            width: 1.25rem;
            height: 1.25rem;
        }
        
        /* Responsive */
        @media (max-width: 1024px) {
            .navbar {
                padding: 2.5rem 1.5rem;
            }
            
            .fixed-header {
                padding: 0.5rem 1.5rem;
            }
            
            .hero-content {
                left: 1.5rem;
                right: 1.5rem;
                bottom: 8rem;
                flex-direction: column;
                align-items: flex-start;
            }
            
            .main-nav {
                flex-direction: row;
                gap: 2rem;
                flex-wrap: wrap;
                align-self: auto;
            }
            
            .nav-item {
                text-align: left;
            }
            
            .hero-title {
                font-size: 2.5rem;
            }
            
            .section {
                padding: 5rem 1.5rem;
            }
            
            
            .section-subtitle {
                max-width: 100%;
                margin-top: 1rem;
            }
            
            .section-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .fixed-nav {
                gap: 1.5rem;
            }
            
      
            .footer {
                flex-direction: column;
                text-align: center;
            }
        }
        
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }
            
            .hero-subtitle {
                font-size: 1rem;
            }
            
            
            .main-nav {
                gap: 1rem;
            }
            
            .fixed-nav {
                gap: 1rem;
                flex-wrap: wrap;
            }
            
            .fixed-nav .nav-item {
                font-size: 0.875rem;
            }
            
            .lifestyle-slide {
                min-width: 300px;
                height: 400px;
            }
            
            .trim-card,
            .rd-card {
                min-width: 100%;
            }
            
            .subscription-title {
                font-size: 2rem;
            }
        }
        
         /* Botón hamburguesa - oculto por defecto */
        .mobile-menu-toggle {
            display: none;
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 24px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            z-index: 101;
        }
        
        .hamburger-line {
            width: 100%;
            height: 3px;
            background: white;
            transition: all 0.3s ease;
            transform-origin: center;
        }
        
        .mobile-menu-toggle.active .hamburger-line:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
        }
        
        .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
            opacity: 0;
        }
        
        .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
            transform: rotate(-45deg) translate(8px, -8px);
        }
        
        /* Header fijo - en móviles el hamburger es negro */
        .fixed-header .mobile-menu-toggle .hamburger-line {
            background: var(--primary-midnight-black);
        }
        
        /* Canvas/Slide menu para móviles */
        .mobile-menu-canvas {
            position: fixed;
            top: 0;
            right: -100%;
            width: 80%;
            max-width: 350px;
            height: 100vh;
            background: rgba(5, 20, 31, 0.98);
            backdrop-filter: blur(10px);
            z-index: 100;
            transition: right 0.3s ease-in-out;
            overflow-y: auto;
        }
        
        .mobile-menu-canvas.active {
            right: 0;
        }
        
        .mobile-menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 99;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .mobile-menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        .mobile-menu-content {
            padding: 80px 30px 30px;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .mobile-nav-list {
            list-style: none;
            margin: 0;
            padding: 0;
            flex: 1;
        }
        
        .mobile-nav-item {
            margin-bottom: 20px;
        }
        
        .mobile-nav-link {
            display: block;
            color: white;
            text-decoration: none;
            font-size: 1.2rem;
            font-weight: 300;
            padding: 15px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }
        
        .mobile-nav-link:hover,
        .mobile-nav-link.active {
            color: #fff;
            padding-left: 20px;
            border-bottom-color: white;
        }
        
        .mobile-menu-cta {
            margin-top: auto;
            padding-top: 30px;
        }
        
        .mobile-menu-btn {
            width: 100%;
            height: 50px;
            background: transparent;
            border: 2px solid white;
            color: white;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }
        
        .mobile-menu-btn:hover {
            background: white;
            color: var(--primary-midnight-black);
        }
        
        .mobile-lang-switcher {
            display: flex;
            border: 1px solid rgba(255, 255, 255, 0.4);
            overflow: hidden;
            margin-top: 20px;
        }
        
        .mobile-lang-btn {
            flex: 1;
            height: 40px;
            font-size: 0.875rem;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .mobile-lang-btn.active {
            background: white;
            color: var(--primary-midnight-black);
        }
        
        .mobile-lang-btn:not(.active) {
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }
        
        /* Responsive - mostrar menú hamburguesa en móviles */
        @media (max-width: 1024px) {
            /* Ocultar navegación normal en header fijo */
            .fixed-header .fixed-nav {
                display: none;
            }
            
            /* Mostrar botón hamburguesa */
            .mobile-menu-toggle {
                display: flex;
            }
            
            /* Ocultar language switcher en header fijo para móviles */
            .fixed-header .lang-switcher {
                display: none;
            }
        }
        
        @media (max-width: 768px) {
            /* También ocultar navegación del hero en móviles muy pequeños si es necesario */
            .main-nav {
                display: none;
            }
            
            /* Ajustar canvas en pantallas muy pequeñas */
            .mobile-menu-canvas {
                width: 90%;
            }
        }
        
        /* Prevenir scroll del body cuando el menú está abierto */
        body.menu-open {
            overflow: hidden;
        }
        
        
        /* ===========================
   FOOTER CONTACT STYLES
   ========================== */

.footer-contact {
    margin: 1rem 0 1.5rem 0;
}

.footer-contact h3 {
            color: var(--primary-midnight-black);
            font-size: 1.5rem;
            font-weight: 300;
}

.footer-contact-links {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
  
}

.footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-midnight-black);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
    width: fit-content;
    padding: 0.25rem 0;
    font-family: 'Kia Signature', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Línea que aparece de izquierda a derecha */
.footer-contact-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--dark-gray);
    transition: width 0.4s ease;
}

.footer-contact-link:hover {
    color: var(--dark-gray);
}

.footer-contact-link:hover::after {
    width: 100%;
}

.contact-icon-footer {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.footer-contact-link:hover .contact-icon-footer {
    transform: scale(1.1);
}

/* ===========================
   RESPONSIVE FOOTER CONTACT
   ========================== */

@media (max-width: 768px) {
    .footer {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }
    
    .footer-contact {
        margin: 1.5rem 0 1rem 0;
    }
    
    .footer-contact-links {
        align-items: center;
    }
    
    .footer-contact h3 {
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 480px) {
    .footer-contact-link {
        font-size: 0.9rem;
        gap: 0.4rem;
    }
    
    .contact-icon-footer {
        width: 16px;
        height: 16px;
    }
}

/* Divider vertical entre números de contacto */
.contact-divider-vertical {
    width: 1px;
    height: 20px;
    background: var(--medium-gray);
    opacity: 0.4;
    margin: 0.3rem 0.25rem;
}

/* Responsive - ocultar divider en móviles pequeños si es necesario */
@media (max-width: 480px) {
    .contact-divider-vertical {
        height: 16px;
        margin: 0 0.15rem;
    }
}
/* ===========================
   BACK TO TOP BUTTON
   ========================== */

.back-to-top {
    position: fixed;
    bottom: 7rem;
    right: 1.8rem;
    width: 48px;
    height: 48px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 5%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: all 0.3s ease;
    font-family: 'Kia Signature', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Inicialmente oculto */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    
    /* Sin outline al hacer focus */
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* Estado visible */
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    background:var(--primary-midnight-black);
}

/* Hover effect */
.back-to-top:hover {
    background: white;
    color: var(--primary-midnight-black);
    border-color: rgba(0, 0, 0, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Focus para accesibilidad */
.back-to-top:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Responsive */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 44px;
        height: 44px;
    }
    
    .back-to-top svg {
        width: 18px;
        height: 18px;
    }
}

/* Animación de entrada suave */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.back-to-top.visible {
    animation: fadeInUp 0.4s ease;
}

/* Evitar conflicto con otros elementos flotantes */
.back-to-top {
    /* Asegurar que esté por encima del fixed header */
    z-index: 9999;
}