* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Syne", sans-serif;
        }

        body { background: #fff; }

        /* --- TOP BAR --- */
        .top-bar {
            width: 100%;
            background: #ffd600;
            color: #000;
            text-align: center;
            padding: 8px 0;
            font-size: 14px;
            letter-spacing: 0.5px;
        }

        /* --- HEADER --- */
        header {
            width: 100%;
            padding: 20px 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
        }

        .logo {
            font-size: 28px;
            font-weight: 700;
        }

		/* --- MENU PRINCIPAL --- */
		nav.menu {
			display: flex;
			gap: 25px;
			align-items: center;
		}

		nav.menu > .item,
		nav.menu > .item.link {
			position: relative;
			font-size: 18px;
			cursor: pointer;
		}

		/* Estilo para los <a> directos */
		nav.menu .link {
			text-decoration: none;
			color: #000;
		}

		/* SUBMENÚ */
		.submenu {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			background: #fff;
			border: 1px solid #ddd;
			min-width: 160px;
			padding: 10px 0;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			z-index: 20;
		}

		.submenu a {
			display: block;
			padding: 10px 15px;
			color: #333;
			text-decoration: none;
			font-size: 14px;
		}

		.submenu a:hover {
			background: #f2f2f2;
		}

		/* Hover para mostrar submenús */
		nav.menu .item:hover .submenu {
			display: block;
		}

        /* ICONOS */
        .icons {
            display: flex;
            align-items: center;
            gap: 18px;
            font-size: 20px;
            cursor: pointer;
        }

        /* BUSCADOR FLOTANTE */
        .search-box {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0,0,0,0.6);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 200;
        }
        .search-inner {
            background: #fff;
            padding: 40px;
            width: 400px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
            text-align: center;
        }
        .search-inner input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 6px;
            margin-top: 10px;
            font-size: 15px;
        }

        /* --- TICKER / TEXTO DESLIZANTE --- */
        .ticker-bar {
            width: 100%;
            overflow: hidden;
            background: #fff;
            padding: 12px 0;
            border-bottom: 1px solid #eee;
        }

        .ticker {
            display: flex;
            gap: 40px;
            white-space: nowrap;
            animation: slide 50s linear infinite;
        }

        .ticker a {
            color: #222;
            text-decoration: none;
            font-size: 16px;
            cursor: pointer;
        }

        @keyframes slide {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }

        /* --- HERO IMAGES (Hombre / Mujer) --- */
        .hero {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            padding: 60px;
        }

        .hero-box {
            position: relative;
        }

        .hero-box img {
            width: 100%;
            height: auto;
            border-radius: 10px;
        }

        .hero-content {
            position: absolute;
            bottom: 20px;
            left: 20px;
            color: #000;
            background: rgba(255,255,255,0.9);
            padding: 20px 25px;
            border-radius: 8px;
        }
        .hero-content h2 {
            font-size: 28px;
            margin-bottom: 8px;
        }
        .hero-content p {
            font-size: 15px;
            margin-bottom: 12px;
        }

        .hero-btn {
            background: #ffd600;
            color: #000;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            font-weight: 600;
            transition: 0.3s;
            display: inline-block;
        }
        .hero-btn:hover {
            background: #000;
            color: #fff;
        }
		/* Mover bloque WOMEN hacia la derecha */
		.hero-box:first-child .hero-content {
			right: 20px;
			left: auto;
		}
		
		.hero-box {
			position: relative;
			overflow: hidden;
			border-radius: 12px;
		}

		.hero-box img {
			width: 100%;
			height: auto;
			border-radius: 12px;
			transition: transform 0.6s ease;
		}

		.hero-box:hover img {
			transform: scale(1.08);
		}
		
		
		.hero-box::before {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(
				to top,
				rgba(0,0,0,0.5),
				rgba(0,0,0,0.1),
				transparent
			);
			z-index: 1;
			border-radius: 12px;
		}

		.hero-content {
			position: absolute;
			bottom: 30px;
			left: 30px;
			z-index: 2;
			color: #fff;
			background: rgba(255,255,255,0.08);
			backdrop-filter: blur(8px);
			padding: 25px 30px;
			border-radius: 12px;
			transition: all 0.4s ease;
		}
		
		
		.hero-box {
			opacity: 0;
			transform: translateY(40px);
			animation: fadeUp 1s ease forwards;
		}

		.hero-box:nth-child(2) {
			animation-delay: 0.3s;
		}

		@keyframes fadeUp {
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}
		
		
		
		/* --- NEW ARRIVALS --- */
		.new-arrivals {
			width: 100%;
			padding: 60px 80px;
			text-align: center;
			font-family: "Syne", sans-serif;
		}

		.section-title {
			font-size: 38px;
			font-weight: 700;
			margin-bottom: 40px;
		}

		/* CARRUSEL */
		.carousel-container {
			width: 100%;
			overflow: hidden;
			position: relative;
		}

		.carousel-track {
			display: flex;
			gap: 30px;
			transition: 0.6s ease;
		}

		/* PRODUCTOS */
		.product-card {
			width: 350px;      /* ANCHO FIJO para que el carrusel FUNCIONE */
			flex-shrink: 0;    /* Evita que se comprima */
			text-align: left;
		}

		.prod-img-box {
			position: relative;
			overflow: hidden;
			border-radius: 10px;
		}

		.prod-img-box img {
			width: 100%;
			border-radius: 10px;
			transition: transform .3s;
		}

		.prod-img-box:hover img {
			transform: scale(1.08);
		}

		/* HOVER ACTIONS */
		.prod-hover {
			position: absolute;
			bottom: -60px;
			left: 0;
			width: 100%;
			display: flex;
			gap: 8px;
			justify-content: center;
			transition: 0.3s;
		}

		.prod-img-box:hover .prod-hover {
			bottom: 15px;
		}

		.hover-btn {
			background: #000;
			color: #fff;
			padding: 8px 15px;
			border: none;
			border-radius: 6px;
			cursor: pointer;
			font-size: 13px;
			display: flex;
			align-items: center;
			gap: 6px;
		}

		.hover-icon {
			background: #000;
			color: #fff;
			padding: 8px 12px;
			border-radius: 6px;
			cursor: pointer;
			border: none;
			font-size: 15px;
		}

		.icon-cart::before {
			content: "🛒";
		}

		.icon-search::before {
			content: "🔍";
		}

		/* TEXTOS */
		.prod-category {
			display: block;
			margin-top: 12px;
			font-size: 14px;
			color: #888;
		}

		.prod-name {
			font-size: 16px;
			font-weight: 600;
			margin: 5px 0;
		}

		/* PRECIO */
		.prod-price {
			background: #ffd600;
			display: inline-block;
			padding: 6px 14px;
			border-radius: 5px;
			margin-top: 5px;
			font-weight: 600;
		}
		
		
		
		/* --- TRENCH SECTION --- */
		.trench-section {
			width: 100%;
			padding: 70px 80px;
			font-family: "Syne", sans-serif;
		}

		.trench-grid {
			display: grid;
			grid-template-columns: 55% 45%;
			gap: 40px;
			align-items: center;
		}

		.trench-left img {
			width: 100%;
			border-radius: 12px;
		}

		.trench-title {
			font-size: 65px;
			font-weight: 700;
			margin-bottom: 20px;
		}

		.trench-text {
			font-size: 16px;
			color: #555;
			margin-bottom: 25px;
			line-height: 1.6;
		}

		/* IMAGEN VIDEO */
		.trench-video-box {
			position: relative;
			width: 100%;
		}

		.trench-video-box img {
			width: 100%;
			border-radius: 12px;
		}

		/* BOTÓN PLAY */
		.play-btn {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 55px;
			background: rgba(0,0,0,0.6);
			color: white;
			padding: 20px 26px;
			border-radius: 50%;
			cursor: pointer;
			transition: 0.3s;
		}

		.play-btn:hover {
			background: rgba(0,0,0,0.85);
		}

		/* MODAL VIDEO */
		.video-modal {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.85);
			justify-content: center;
			align-items: center;
			z-index: 9999;
		}

		.video-content {
			width: 70%;
			max-width: 900px;
			position: relative;
		}

		.video-content iframe {
			width: 100%;
			height: 500px;
			border-radius: 10px;
		}

		/* BOTÓN CERRAR */
		.close-video {
			position: absolute;
			top: -35px;
			right: 0;
			font-size: 27px;
			cursor: pointer;
			color: #fff;
		}
		
		
		/* --- MARQUEE AMARILLO --- */
		.yellow-marquee {
			background: #ffd600;
			padding: 22px 0;
			overflow: hidden;
			width: 100%;
			position: relative;
			font-family: "Syne", sans-serif;
		}

		.marquee-track {
			display: flex;
			align-items: center;
			gap: 35px;
			white-space: nowrap;
			animation: marqueeSlide 28s linear infinite;
		}

		.marquee-item {
			font-size: 18px;
			font-weight: 700;
			text-transform: uppercase;
		}

		.sun-icon {
			font-size: 20px;
			opacity: 0.9;
		}

		/* ANIMACIÓN DEL DESLIZAMIENTO */
		@keyframes marqueeSlide {
			0%   { transform: translateX(0); }
			100% { transform: translateX(-50%); }
		}




		/* --- OUR OTHER LINES --- */
		.other-lines {
			width: 100%;
			padding: 60px 80px;
			text-align: center;
			font-family: "Syne", sans-serif;
		}

		.other-grid {
			margin-top: 40px;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 30px;
		}
		
		
		/* MODAL GENERAL */
		.product-modal {
			display: none;
			position: fixed;
			z-index: 999999;
			top: 0; left: 0;
			width: 100%; height: 100%;
			background: rgba(0,0,0,0.6);
			backdrop-filter: blur(2px);
			justify-content: center;
			align-items: center;
			
			overflow-y: auto;
		}

		.product-modal-content {
			background: #fff;
			width: 80%;
			max-width: 900px;
			border-radius: 12px;
			padding: 25px;
			position: relative;
			animation: fadeIn .3s ease;
		}

		@keyframes fadeIn {
			from { opacity: 0; transform: scale(.95); }
			to { opacity: 1; transform: scale(1); }
		}

		.modal-close {
			position: absolute;
			top: 15px;
			right: 18px;
			cursor: pointer;
			font-size: 28px;
		}

		/* GRID INTERNO */
		.product-modal-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 25px;
		}

		/* IZQUIERDA */
		.modal-left {
			position: relative;
			text-align: center;
		}
		.modal-main-img {
			width: 100%;
			max-height: 420px;
			object-fit: cover;
			border-radius: 10px;
		}

		/* FLECHAS */
		.modal-prev, .modal-next {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			background: #000;
			color: #fff;
			border: none;
			padding: 10px 14px;
			cursor: pointer;
			border-radius: 50%;
			opacity: .8;
		}
		.modal-prev { left: 10px; }
		.modal-next { right: 10px; }

		/* DERECHA */
		.modal-right h2 {
			font-size: 24px;
			margin-bottom: 10px;
		}

		.modal-price {
			background: #ffe600;
			display: inline-block;
			padding: 8px 16px;
			border-radius: 6px;
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 15px;
		}

		.modal-desc {
			margin-bottom: 20px;
			color: #444;
		}

		.modal-actions {
			display: flex;
			gap: 10px;
		}

		.modal-actions input {
			width: 60px;
			padding: 10px;
		}

		.modal-add-cart {
			background: #000;
			color: #fff;
			padding: 10px 18px;
			border: none;
			cursor: pointer;
			border-radius: 6px;
		}
		
		
		/* --- SPECIAL OFFER --- */
		.special-offer {
			width: 100%;
			padding: 120px 20px;
			background: url("fondo1.jpeg") center/cover no-repeat;
			text-align: center;
			position: relative;
			color: #fff;
			font-family: "Syne", sans-serif;
		}

		.offer-content {
			max-width: 900px;
			margin: auto;
		}

		/* TITULOS */
		.offer-title {
			font-size: 45px;
			font-weight: 900;
			text-transform: uppercase;
			margin-bottom: 10px;
			padding: 10px 20px;
			background: #000;          /* ⬅️ Fondo negro */
			color: #fff;               /* ⬅️ Texto blanco */
			display: inline-block;
			border-radius: 5px;
		}

		.offer-subtitle {
			font-size: 22px;
			margin-bottom: 25px;
			padding: 8px 20px;
			background: #000;          /* ⬅️ Fondo negro */
			color: #fff;               /* ⬅️ Texto blanco */
			display: inline-block;
			border-radius: 5px;
		}

		/* CONTADOR */
		.countdown {
			display: flex;
			justify-content: center;
			gap: 25px;
			margin-bottom: 40px;
		}

		.time-box {
			width: 95px;
			height: 95px;
			background: #ffdd00;
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #000;
			font-weight: 700;
		}

		.time-box span {
			font-size: 28px;
			font-weight: 700;
		}

		.time-box small {
			font-size: 12px;
			margin-top: 4px;
		}
		
		
		/* BOTÓN */
		.offer-btn {
			background: #000;
			color: #fff;
			padding: 14px 28px;
			border: none;
			font-size: 16px;
			border-radius: 6px;
			cursor: pointer;
			transition: 0.3s;
		}

		.offer-btn:hover {
			background: #ffdd00;
			color: #000;
		}

		
		
		
		
		/* CONTENEDOR GENERAL */
		.info-split {
			width: 100%;
			display: flex;
			justify-content: center;
			margin: 40px 0;
		}

		.info-container {
			display: flex;
			width: 95%;
			max-width: 1400px;
			gap: 40px;
			min-height: 350px; /* Ajustable */
		}

		/* COLUMNA IZQUIERDA */
		.info-left {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: stretch;
		}

		.info-link {
			padding: 20px 0;
			font-size: 28px;
			font-weight: 600;
			color: #000;
			text-decoration: none;
			position: relative;
			cursor: pointer;
			transition: color .3s ease;
			display: flex;
			align-items: center;
		}

		/* Flecha al lado derecho */
		.info-link::after {
			content: "➜";
			font-size: 24px;
			margin-left: auto;
			opacity: 0.5;
			transition: opacity .3s ease;
		}

		.info-link:hover {
			color: #ffcc00;
		}

		.info-link:hover::after {
			opacity: 1;
		}

		/* Línea separadora */
		.info-link:not(:last-child) {
			border-bottom: 1px solid #ccc;
		}

		/* COLUMNA DERECHA */
		.info-right {
			flex: 1.3;
			position: relative;
		}

		/* La imagen ocupa todo el ALTO generado por los 4 títulos */
		.info-right img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 12px;
		}





		.logo-strip {
			width: 100%;
			background: #ffd600;
			padding: 20px 0;
			display: flex;
			justify-content: center;
			overflow: hidden;
		}

		.logo-track {
			display: flex;
			gap: 40px;
			align-items: center;
			transition: transform 0.6s ease;
		}

		.logo-track img {
			width: 110px;
			height: auto;
			object-fit: contain;
		}
		
		
		
		
		
		
		.footer {
			background: #000;
			color: #fff;
			padding: 60px 20px 20px;
			font-family: Arial;
		}

		.footer-container {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 40px;
			max-width: 1300px;
			margin: auto;
		}

		/* TITULOS */
		.footer-col h3 {
			margin-bottom: 20px;
			font-size: 22px;
			font-weight: bold;
		}

		/* TEXTOS */
		.footer-col p {
			color: #ddd;
			line-height: 1.6;
		}

		/* ICONOS REDES */
		.social-icons a {
			color: #fff;
			font-size: 20px;
			margin-right: 15px;
			text-decoration: none;
		}
		.social-icons a:hover {
			color: #ffd600;
		}

		/* MENÚ DE NAVEGACIÓN */
		.footer-menu {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 10px;
		}

		.footer-menu a {
			color: #ddd;
			text-decoration: none;
			font-size: 16px;
		}
		.footer-menu a:hover {
			color: #ffd600;
		}

		/* CONTACTO */
		.contact-info p {
			margin: 10px 0;
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.contact-info i {
			font-size: 18px;
			color: #ffd600;
		}

		/* NEWSLETTER */
		.newsletter-box {
			display: flex;
			margin-top: 15px;
		}

		.newsletter-box input {
			flex: 1;
			padding: 10px;
			border: none;
			outline: none;
			border-radius: 4px 0 0 4px;
		}

		.newsletter-box button {
			padding: 10px 20px;
			background: #ffd600;
			border: none;
			cursor: pointer;
			font-weight: bold;
			border-radius: 0 4px 4px 0;
		}
		.newsletter-box button:hover {
			background: #fff;
		}

		/* FOOTER BOTTOM */
		.footer-bottom {
			margin-top: 40px;
			padding-top: 20px;
			border-top: 1px solid #333;
			display: flex;
			justify-content: space-between;
			align-items: center;
			max-width: 1300px;
			margin-left: auto;
			margin-right: auto;
		}

		.footer-payments i {
			font-size: 30px;
			margin-left: 15px;
			color: #fff;
		}

		/* RESPONSIVE */
		@media (max-width: 900px) {
			.footer-container {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (max-width: 600px) {
			.footer-container {
				grid-template-columns: 1fr;
			}

			.footer-bottom {
				flex-direction: column;
				text-align: center;
				gap: 15px;
			}
		}
		
		/* BOTÓN FLOTANTE DE WHATSAPP */
		.whatsapp-float {
			position: fixed;
			bottom: 25px;
			right: 25px;
			width: 60px;
			height: 60px;
			background: #25D366;
			color: #fff;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32px;
			text-decoration: none;
			box-shadow: 0 4px 12px rgba(0,0,0,0.3);
			z-index: 9999;
			transition: transform .2s ease, background .2s ease;
		}

		.whatsapp-float:hover {
			transform: scale(1.1);
			background: #1ebe5b;
		}
		
		
		
		
		
		
		
		/* --- VENTANAS FLOTANTES BASE --- */
		.login-box, .cart-box {
			position: fixed;
			inset: 0;
			background: rgba(0,0,0,0.6);
			display: none;
			justify-content: center;
			align-items: center;
			z-index: 99999;
		}

		/* --- CUERPO INTERNO --- */
		.login-inner, .cart-inner {
			width: 350px;
			background: #fff;
			padding: 30px;
			border-radius: 12px;
			animation: fadeIn .3s ease;
			box-shadow: 0px 10px 30px rgba(0,0,0,0.3);
		}

		@keyframes fadeIn {
			from { opacity: 0; transform: translateY(-20px); }
			to { opacity: 1; transform: translateY(0); }
		}

		/* --- LOGIN --- */
		.login-inner h3 {
			margin-bottom: 20px;
		}

		.login-inner input {
			width: 100%;
			padding: 10px;
			margin-bottom: 12px;
			border: 1px solid #ccc;
			border-radius: 8px;
		}

		.login-btn {
			width: 100%;
			padding: 12px;
			background: #000;
			color: #fff;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			margin-top: 5px;
			transition: 0.2s;
		}

		.login-btn:hover {
			background: #ffd800;
			color: #000;
		}

		.login-extra {
			text-align: center;
			margin-top: 15px;
			font-size: 14px;
		}

		.login-extra a {
			color: #000;
		}

		/* --- CARRITO --- */
		.cart-inner h3 {
			margin-bottom: 15px;
		}

		.cart-items {
			max-height: 250px;
			overflow-y: auto;
			margin-bottom: 20px;
		}

		.empty-cart {
			text-align: center;
			font-size: 14px;
			color: #666;
		}

		.cart-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.checkout-btn {
			background: #000;
			color: #fff;
			padding: 10px 14px;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			transition: 0.2s;
		}

		.checkout-btn:hover {
			background: #ffd800;
			color: #000;
		}

		.cart-total {
			font-weight: bold;
		}
		
		
		
		
		
		.carrito-icon {
			position: relative;
			display: inline-block;
		}

		.carrito-contador {
			position: absolute;
			top: -6px;
			right: -6px;
			background: #000;
			color: #fff;
			font-size: 12px;
			width: 18px;
			height: 18px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			font-weight: bold;
			pointer-events: none;
		}
		
		
		
		
		
		
		
		
		
		
		
		
/*--------------------------------------------------*/
/* ============================================
   ARREGLAR CHECKBOX (OCULTAR)
============================================ */
#toggle-menu {
    appearance: none;
    -webkit-appearance: none;
    display: none !important;
}

/* ============================================
   ESTILO BOTÓN HAMBURGUESA
============================================ */
.hamburger-btn {
    display: none;
    width: 32px;
    height: 22px;
    position: relative;
    cursor: pointer;
}

.hamburger-btn span {
    position: absolute;
    width: 100%;
    height: 3px;
    background: #000;
    left: 0;
    transition: .3s;
}

.hamburger-btn span:nth-child(1) { top: 0; }
.hamburger-btn span:nth-child(2) { top: 9px; }
.hamburger-btn span:nth-child(3) { top: 18px; }

/* X cuando se abre */
#toggle-menu:checked + .hamburger-btn span:nth-child(1) {
    transform: rotate(45deg);
    top: 9px;
}
#toggle-menu:checked + .hamburger-btn span:nth-child(2) {
    opacity: 0;
}
#toggle-menu:checked + .hamburger-btn span:nth-child(3) {
    transform: rotate(-45deg);
    top: 9px;
}

/* ============================================
   RESPONSIVE HEADER + MENÚ
============================================ */
@media (max-width: 900px) {

    /* mostrar hamburguesa */
    .hamburger-btn {
        display: block !important;
        z-index: 9999;
        margin-left: 10px;
    }

    /* ajustar header para móvil */
    header {
        padding: 20px 25px !important;
        position: relative;
    }

    /* ocultar menú horizontal desktop */
    nav.menu {
        display: none !important;
        flex-direction: column;
        background: #fff;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        padding: 20px 0;
        border-top: 1px solid #ddd;
        z-index: 99;
    }

    /* mostrar menú al activar checkbox */
    #toggle-menu:checked ~ nav.menu {
        display: flex !important;
    }

    /* cada ítem ocupa toda la fila */
    nav.menu > .item {
        padding: 15px 25px;
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    /* submenús SIN hover, se muestran al abrir */
    nav.menu .submenu {
        position: relative;
        border: none;
        box-shadow: none;
        padding-left: 20px;
        display: block !important;
        background: transparent;
    }

    .submenu a {
        padding: 8px 15px;
    }

    /* iconos más compactos */
    .icons {
        gap: 12px;
        font-size: 18px;
    }

}

/* ============================================
   HERO RESPONSIVE
============================================ */
@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        padding: 25px !important;
        gap: 20px;
    }

    .hero-content {
        padding: 15px 20px !important;
        bottom: 12px;
        left: 15px;
        right: 15px;
    }

    .hero-content h2 {
        font-size: 20px !important;
    }

    .hero-content p {
        font-size: 14px !important;
    }
}



/* =====================================================
   NEW ARRIVALS — RESPONSIVE FIX
===================================================== */

@media (max-width: 1024px) {
    .new-arrivals {
        padding: 50px 40px !important;
    }

    .section-title {
        font-size: 28px !important;
        margin-bottom: 30px !important;
    }

    .carousel-track {
        gap: 20px !important;
    }

    .product-card {
        width: 300px !important;
    }
}

@media (max-width: 768px) {

    .new-arrivals {
        padding: 40px 25px !important;
    }

    .section-title {
        font-size: 26px !important;
    }

    /* Cambio importante:
       El carrusel ahora es SCROLL horizontal suave */
    .carousel-container {
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
    }

    .carousel-container::-webkit-scrollbar {
        height: 6px;
    }
    .carousel-container::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
    }

    .carousel-track {
        display: flex;
        padding-bottom: 15px;
        gap: 18px;
        width: max-content !important;
    }

    .product-card {
        width: 250px !important;
        scroll-snap-align: start;
    }

    .prod-name {
        font-size: 15px;
    }

    .prod-price {
        font-size: 14px;
    }
}

@media (max-width: 480px) {

    .section-title {
        font-size: 22px !important;
    }

    .carousel-track {
        gap: 15px !important;
    }

    .product-card {
        width: 210px !important;
    }

    .prod-img-box img {
        border-radius: 8px;
    }

    .hover-btn {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    .hover-icon {
        padding: 6px 10px !important;
    }

    .prod-category {
        font-size: 12px !important;
    }
}





/* =====================================================
   TRENCH SECTION — RESPONSIVE FIX
===================================================== */

/* --- TABLET --- */
@media (max-width: 1024px) {

    .trench-section {
        padding: 60px 50px;
    }

    .trench-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .trench-title {
        font-size: 48px;
    }

    .trench-text {
        font-size: 15px;
    }

    .video-content {
        width: 85%;
    }

    .video-content iframe {
        height: 380px;
    }
}


/* --- MÓVILES --- */
@media (max-width: 768px) {

    .trench-section {
        padding: 50px 30px;
    }

    /* ❗ el grid se vuelve una columna */
    .trench-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    /* Imagen superior siempre primero */
    .trench-left {
        order: 1;
    }

    .trench-right {
        order: 2;
    }

    .trench-title {
        font-size: 36px;
        line-height: 1.2;
    }

    .trench-text {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .play-btn {
        font-size: 40px;
        padding: 16px 20px;
    }

    .video-content iframe {
        height: 300px;
    }
}


/* --- MÓVILES PEQUEÑOS --- */
@media (max-width: 480px) {

    .trench-section {
        padding: 40px 20px;
    }

    .trench-title {
        font-size: 30px;
    }

    .trench-text {
        font-size: 13px;
    }

    .play-btn {
        font-size: 32px;
        padding: 12px 16px;
    }

    .video-content {
        width: 92%;
    }

    .video-content iframe {
        height: 240px;
    }

    .close-video {
        top: -28px;
    }
}





/* =====================================================
   OUR OTHER LINES — RESPONSIVE FIX
===================================================== */

/* --- LAPTOP MEDIO (reduce padding) --- */
@media (max-width: 1200px) {
    .other-lines {
        padding: 50px 60px;
    }

    .other-grid {
        gap: 25px;
    }
}

/* --- TABLETS: 3 columnas --- */
@media (max-width: 992px) {

    .other-lines {
        padding: 45px 40px;
    }

    .other-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }

    .prod-name {
        font-size: 15px;
    }

    .prod-price {
        font-size: 14px;
    }
}

/* --- PHABLETS: 2 columnas --- */
@media (max-width: 768px) {

    .other-lines {
        padding: 40px 30px;
    }

    .other-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .prod-category {
        font-size: 12px;
    }

    .prod-name {
        font-size: 14px;
    }

    .prod-price {
        font-size: 13px;
    }

    .hover-btn {
        font-size: 12px;
        padding: 8px 12px;
    }

    .hover-icon {
        padding: 6px 10px;
    }
}

/* --- MÓVILES: 1 columna --- */
@media (max-width: 480px) {

    .other-lines {
        padding: 35px 20px;
    }

    .section-title {
        font-size: 22px !important;
    }

    .other-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .product-card {
        width: 100%;
    }

    .prod-name {
        font-size: 13px;
    }

    .prod-price {
        font-size: 13px;
    }

    .hover-btn {
        font-size: 11px;
        padding: 7px 10px;
    }
}

/* =====================================================
   MODAL RESPONSIVE
===================================================== */

/* --- Tablets y móviles --- */
@media (max-width: 768px) {

    .product-modal-content {
        width: 92%;
        padding: 20px;
    }

    .product-modal-grid {
        grid-template-columns: 1fr;
    }

    .modal-main-img {
        max-height: 260px;
    }

    .modal-right h2 {
        font-size: 20px;
    }

    .modal-price {
        font-size: 16px;
        padding: 6px 14px;
    }

    .modal-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .modal-actions input {
        width: 100%;
    }

    .modal-add-cart {
        width: 100%;
        padding: 12px;
        text-align: center;
    }

    /* Flechas del carrusel: más pequeñas */
    .modal-prev, .modal-next {
        padding: 6px 10px;
        font-size: 14px;
    }
}

/* --- Móviles pequeños --- */
@media (max-width: 480px) {

    .product-modal-content {
        padding: 15px;
    }

    .modal-main-img {
        max-height: 220px;
    }

    .modal-right h2 {
        font-size: 18px;
    }

    .modal-desc {
        font-size: 14px;
    }

    .modal-actions input {
        padding: 6px;
    }

    .modal-add-cart {
        padding: 10px;
        font-size: 14px;
    }

    .modal-close {
        top: 10px;
        right: 15px;
        font-size: 24px;
    }
}


/* --- Móvil: 1 producto por fila --- */
@media (max-width: 480px) {

    .other-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 0 10px;
    }

    .product-card {
        width: 100%;
        margin: 0 auto;
    }
}




/* =====================================================
   SPECIAL OFFER — RESPONSIVE FIX
===================================================== */

/* --- Laptop más pequeño --- */
@media (max-width: 1200px) {
    .offer-title {
        font-size: 38px;
    }
    .offer-subtitle {
        font-size: 20px;
    }
    .time-box {
        width: 85px;
        height: 85px;
    }
    .time-box span {
        font-size: 24px;
    }
}

/* --- Tablets (992px) --- */
@media (max-width: 992px) {

    .special-offer {
        padding: 100px 20px;
    }

    .offer-title {
        font-size: 34px;
        padding: 10px 15px;
    }

    .offer-subtitle {
        font-size: 18px;
        padding: 6px 15px;
    }

    .countdown {
        gap: 20px;
        margin-bottom: 30px;
    }

    .time-box {
        width: 78px;
        height: 78px;
    }

    .time-box span {
        font-size: 22px;
    }
}

/* --- Móviles medios (768px) --- */
@media (max-width: 768px) {

    .special-offer {
        padding: 90px 15px;
    }

    .offer-title {
        font-size: 28px;
        padding: 8px 12px;
    }

    .offer-subtitle {
        font-size: 16px;
        padding: 6px 12px;
    }

    .countdown {
        gap: 15px;
    }

    .time-box {
        width: 70px;
        height: 70px;
    }

    .time-box span {
        font-size: 20px;
    }

    .time-box small {
        font-size: 11px;
    }

    .offer-btn {
        font-size: 15px;
        padding: 12px 22px;
    }
}

/* --- Móviles pequeños (480px) --- */
@media (max-width: 480px) {

    .special-offer {
        padding: 70px 10px;
        background-position: center;
    }

    .offer-title {
        font-size: 22px;
        line-height: 1.2;
    }

    .offer-subtitle {
        font-size: 15px;
    }

    /* === 4 círculos en una sola fila === */
    .countdown {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        justify-items: center;
    }

    .time-box {
        width: 60px;     /* más pequeños */
        height: 60px;
        margin: 0 auto;
    }

    .time-box span {
        font-size: 16px;
    }

    .time-box small {
        font-size: 10px;
        margin-top: 2px;
    }

    .offer-btn {
        width: 100%;
        font-size: 15px;
        padding: 12px;
        margin-top: 10px;
    }
}





/* === RESPONSIVE: Celulares  (max-width: 768px) === */
@media (max-width: 768px) {

    .info-container {
        flex-direction: column;
        gap: 20px;
    }

    .info-left {
        order: 1;
    }

    .info-right {
        order: 2;
        width: 100%;
        height: auto;
    }

    .info-right img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 10px;
    }

    .info-link {
        font-size: 20px;
        padding: 14px 0;
    }

    .info-link::after {
        font-size: 18px;
    }
}