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

        body { background: #fff; }

        /* --- TOP BAR --- */
        .top-bar {
            width: 100%;
            background: #df2727;
            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%); }
        }
		
		
		
		
		
/* ===============================================================
   🔥 TOP BAR (Diseño 2)
================================================================*/
.top-bar-v2{
    width:100%;
    background:#111;
    color:#fff;
    font-size:14px;
    padding:10px 60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.top-bar-v2 span{margin-right:18px;}
.top-bar-v2 i{color:#df2727;margin-right:6px;}
.top-bar-v2 a{color:#fff;text-decoration:none;margin-left:18px;}
.top-bar-v2 a:hover{color:#df2727;}


/* ===============================================================
   🔥 HEADER (Diseño 2)
================================================================*/
.header-v2{
    width:100%;
    padding:25px 60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid #eee;
    background:#fff;
}

.logo-v2 img{
    width:160px;
    transition:.3s;
}
.logo-v2 img:hover{transform:scale(1.05);}


/* ===============================================================
   🔥 MENÚ PRINCIPAL — DESKTOP
================================================================*/
.menu-v2{
    display:flex;
    gap:30px;
    align-items:center;
}
.menu-v2 > a,
.menu-v2 .drop{
    font-size:17px;
    color:#111;
    text-decoration:none;
    font-weight:600;
    cursor:pointer;
    position:relative;
}

/* Hover transición */
.menu-v2 > a:hover,
.menu-v2 .drop:hover{
    color:#df2727;
}

/* SUBMENÚ */
.drop-content{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    border:1px solid #ddd;
    min-width:180px;
    padding:10px 0;
    z-index:20;
    box-shadow:0 4px 15px rgba(0,0,0,0.12);
}
.drop-content a{
    display:block;
    padding:10px 16px;
    font-size:15px;
    color:#222;
}
.drop-content a:hover{
    background:#df2727;
    color:#fff;
}
.drop:hover .drop-content{display:block;}


/* ===============================================================
   ICONOS
================================================================*/
.icons-v2{
    display:flex;
    align-items:center;
    gap:22px;
    font-size:22px;
    cursor:pointer;
}
.icons-v2 i:hover{color:#df2727;}

.cart-btn{
    position:relative;
}
.cart-btn span{
    position:absolute;
    top:-8px;
    right:-10px;
    background:#df2727;
    color:#fff;
    font-size:13px;
    padding:3px 6px;
    border-radius:50%;
}



/* ===============================================================
 🔥 RESPONSIVE — MODO MÓVIL
================================================================*/

/* ======= Ajustes TOP BAR diseño 2 MOVIL ======= */
@media(max-width:950px){
    .top-bar-v2{
        flex-direction:column;
        text-align:center;
        padding:12px 0;
        gap:6px;
    }

    .top-bar-v2 span,
    .top-bar-v2 a{
        margin:0;
        display:block;
    }
}

/* ====== Quitar subrayado menú mobile & desktop ====== */
.menu-v2 a,
.menu-v2 .drop,
.drop-content a{
    text-decoration:none !important;
    border:none !important;
}

/* ===== Mostrar menú hamburguesa correctamente ===== */
.hamburger-btn{
    display:none;
}

@media(max-width:950px){
    .hamburger-btn{
        display:block !important;
        position:relative;
        z-index:9999;
    }
}




/* ocultar checkbox original */
#toggle-menu { display:none !important; }

/* 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:#111;
    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;}

/* animación X */
#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;
}


/* ===============================================================
   🔥 MENÚ RESPONSIVE
================================================================*/
@media(max-width:950px){

    .hamburger-btn{display:block !important; z-index:9999;}
    .header-v2{padding:18px 25px !important;}

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

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

    /* items full */
    .menu-v2 > a,
    .menu-v2 .drop{
        width:100%;
        padding:15px 25px;
        border-bottom:1px solid #f1f1f1;
    }

    /* submenús abiertos siempre en mobile */
    .drop-content{
        position:relative;
        background:#fafafa;
        box-shadow:none;
        border:none;
        padding-left:25px;
        display:block !important;
    }

    .icons-v2{gap:14px;font-size:20px;}
}


		
		
		
		
		
		
		
.special-offer-v2{
    width:100%;
    padding:120px 0;
    background-size:cover;
    background-position:center;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    position:relative;
}

/* GRADIENT OVERLAY */
.special-offer-v2::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(2px);
}
.offer-content-v2{
    position:relative;
    color:#fff;
    max-width:700px;
    width:90%;
    z-index:3;
}

/* TEXTOS */
.offer-subtitle-v2{
    font-size:18px;
    letter-spacing:2px;
    opacity:.85;
    margin-bottom:10px;
}
.offer-title-v2{
    font-size:45px;
    font-weight:700;
    margin-bottom:35px;
}

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

.time-box-v2{
    backdrop-filter:blur(5px);
    border:2px solid #df2727;
    width:90px;
    padding:12px 0;
    border-radius:10px;
    box-shadow:0 0 15px rgba(233,179,0,.4);
}
.time-box-v2 span{
    font-size:30px;
    font-weight:700;
    display:block;
}
.time-box-v2 small{
    font-size:13px;
    opacity:.85;
}

/* BOTÓN */
.offer-btn-v2{
    display:inline-block;
    background:#df2727;
    padding:14px 38px;
    font-size:17px;
    font-weight:bold;
    border-radius:40px;
    color:#fff;
    transition:.35s;
	text-decoration:none;
}
.offer-btn-v2:hover{
    background:#fff;
    transform:scale(1.07);
}

/* 📱 RESPONSIVE */
@media(max-width:760px){
    .offer-title-v2{ font-size:32px; }
    .countdown-v2{ gap:14px; }
    .time-box-v2{ width:70px; padding:10px 0; }
    .time-box-v2 span{ font-size:26px; }
}








.latest-box{
    width:100%;
    padding:90px 0;
    text-align:center;
}

.latest-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    max-width:1260px;
    margin:auto;
}

.latest-card{
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 0 20px rgba(0,0,0,.08);
    transition:.4s;
}
.latest-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.latest-card img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:.4s;
}
.latest-card:hover img{
    transform:scale(1.08);
}

.latest-card h3{
    margin:18px 0 10px;
    font-size:19px;
    font-weight:600;
}

.latest-btn{
    display:inline-block;
    margin-bottom:22px;
    padding:10px 26px;
    font-size:15px;
    font-weight:600;
    border-radius:50px;
    background:#df2727;
    color:#fff;
    transition:.3s;
	text-decoration:none;
}
.latest-btn:hover{
    background:#111;
    color:#fff;
}

/* 📱 RESPONSIVE */
@media(max-width:780px){
    .latest-grid{
        grid-template-columns:1fr;
        max-width:90%;
    }
    .latest-card img{
        height:220px;
    }
}




		
		
		
		
		
		
		
		

        /* ===========================
   HERO FULL WIDTH SLIDER
=========================== */
.hero-slider{
    position:relative;
    width:100%;
    height:75vh;
    overflow:hidden;
}

/* Cada banner */
.hero-slide{
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    opacity:0;
    transition: opacity 1.3s ease-in-out;
}

/* Imagen de fondo */
.hero-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:brightness(95%);
}

/* Mostrar slide activo */
.hero-slide.active{ opacity:1; }

/* ===========================
   CUADRO CENTRADO
=========================== */
.hero-center-box{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%, -50%) scale(0.9);
    background:white;
    padding:35px 45px;
    width:420px;
    text-align:center;
    border-radius:12px;
    animation: fadeBox 1.2s ease forwards;
    opacity:0;
}

.hero-slide.active .hero-center-box{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
}

/* Textos */
.hero-center-box h2{
    font-size:32px;
    font-weight:700;
    margin-bottom:10px;
}
.hero-center-box p{
    font-size:15px;
    color:#444;
    line-height:22px;
    margin-bottom:18px;
}

/* BOTÓN */
.hero-cta{
    background:#000;
    color:#fff;
    padding:12px 28px;
    border-radius:6px;
    font-size:15px;
    text-decoration:none;
    transition:.3s;
}
.hero-cta:hover{ background:#df2727; }

/* ===========================
   PAGINACIÓN (3 RAYITAS)
=========================== */
.hero-pagination{
    position:absolute;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
}

.hero-pagination span{
    width:32px;
    height:4px;
    background:#ddd;
    border-radius:20px;
    cursor:pointer;
    transition:.3s;
}
.hero-pagination span.active{
    background:#df2727; /* fucsia */
}

/* ===========================
   RESPONSIVE
=========================== */
@media(max-width:800px){
    .hero-slider{ height:60vh; }

    .hero-center-box{
        width:85%;
        padding:22px;
    }

    .hero-center-box h2{ font-size:24px; }
}

		
		
		
		/* --- NEW ARRIVALS --- */
		.new-arrivals {
			width: 100%;
			padding: 60px 80px;
			text-align: center;
			font-family: 'Quicksand', 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: #df2727;
			display: inline-block;
			padding: 6px 14px;
			border-radius: 5px;
			margin-top: 5px;
			font-weight: 600;
		}
		
		
		
		
		
		
		/* ===========================
   📌 SECCIÓN DESTACADOS NEW DESIGN
=========================== */
.destacados-v2{
    width:100%;
    padding:70px 8%;
    text-align:center;
    background:#fff;
}

.destacados-v2 .section-title{
    font-size:40px;
    font-weight:800;
    margin-bottom:25px;
}

/* 🔥 TABS */
/* 🔥 Contenedor de tabs */
.tabs-categorias{
    display:flex;
    gap:10px;
    justify-content:center;
    margin-bottom:25px;
    flex-wrap:wrap;
}

/* Botones */
.cat-tab{
    padding:8px 18px;
    border:1px solid #df2727;
    border-radius:30px;
    background:#fff;
    color:#df2727;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

/* Activo */
.cat-tab.active{
    background:#df2727;
    color:#fff;
}

/* 📱 Responsive para móvil */
@media(max-width:650px){
    .tabs-categorias{
        overflow-x:auto;
        white-space:nowrap;
        display:block;
        padding-bottom:10px;
        text-align:center;
    }
    .cat-tab{
        display:inline-block;
        margin:5px 4px;
        font-size:14px;
        padding:7px 16px;
    }
}



/* ===========================
   📦 GRID DE 8 PRODUCTOS
=========================== */
.productos-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.producto-card{
    border-radius:12px;
    border:1px solid #eee;
    padding:12px;
    transition:.3s;
}
.producto-card:hover{
    transform:translateY(-6px);
    box-shadow:0 5px 20px rgba(0,0,0,.07);
}

/* IMG Y HOVER */
.prod-img-box{
    position:relative;
    overflow:hidden;
    border-radius:10px;
}
.prod-img-box img{
    width:100%;
    transition:.3s;
}
.producto-card:hover img{ transform:scale(1.07); }

.prod-hover{
    position:absolute;
    bottom:-60px; left:0;
    width:100%;
    display:flex;
    justify-content:center;
    gap:8px;
    transition:.25s;
}
.producto-card:hover .prod-hover{ bottom:10px; }

.hover-btn,
.hover-icon{
    background:#000;
    color:#fff;
    padding:8px 14px;
    border-radius:6px;
    cursor:pointer;
    border:none;
}
.hover-icon i{ font-size:16px; }


.prod-name{ font-size:15px; font-weight:600; margin-top:10px; }
.prod-price{
    margin-top:5px;
    padding:6px 14px;
    background:#df2727;
    display:inline-block;
    border-radius:4px;
    color:#fff;
    font-weight:bold;
}

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

		
		
		
		
		
		
		
		
/* ============================= */
/*** 🔥 TOP CATEGORIES – Diseño 2 ***/
/* ============================= */

.top-categories{
    width:100%;
    background:#111;
    padding:90px 60px;
    text-align:center;
    color:white;
}

.section-title-white{
    font-size:42px;
    font-weight:800;
    margin-bottom:55px;
}

/* GRID – ahora centrado y solo 5 */
.categorias-grid{
    display:flex;
    justify-content:center;
    gap:45px;
    flex-wrap:wrap;
}

/*** IMAGEN REDONDA CON BORDE ***/
.categoria-img-wrap{
    width:230px;
    height:230px;
    border-radius:50%;
    overflow:hidden;
    border:8px solid #fff;
    transition:.4s ease;
    box-shadow:0 0 0px rgba(255,255,255,0.5);
}

.categoria-img-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.45s ease;
}

/* 🔥 Hover con zoom + brillo + rebote */
.categoria-box:hover .categoria-img-wrap{
    transform:scale(1.08) rotateZ(2deg);
    box-shadow:0 0 22px rgba(255,0,230,.7); /* Brillo fucsia */
	text-decoration:none;
}

/* 🔥 Texto debajo en blanco */
.categoria-info-2 h3{
    font-size:20px;
    font-weight:700;
    margin-top:14px;
    color:#fff;
	text-decoration:none;
}

.categoria-info-2 span{
    font-size:14px;
    color:#ddd;
    opacity:.9;
	text-decoration:none;
}


/* 📱 RESPONSIVE */
@media(max-width:600px){
    .categoria-img-wrap{
        width:150px;
        height:150px;
    }
    .categorias-grid{ gap:30px; }
}
		
		
		
		
		
		
		/* --- TRENCH SECTION --- */
		.trench-section {
			width: 100%;
			padding: 70px 80px;
			font-family: 'Quicksand', 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: #df2727;
			padding: 22px 0;
			overflow: hidden;
			width: 100%;
			position: relative;
			font-family: 'Quicksand', 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: 'Quicksand', 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;
		}

		.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: #df2727;
			display: inline-block;
			padding: 8px 16px;
			border-radius: 6px;
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 15px;
			color:#ffffff;
		}

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

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

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

		.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: 'Quicksand', 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: #df2727;
			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: 'Quicksand', sans-serif;
		}

		.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: #df2727;
		}

		/* 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: #df2727;
		}

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

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

		/* 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: #df2727;
			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: #df2727;
			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: #df2727;
			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;
		}
		
		
		







.ofertas-slider{
    width:100%;
    padding:60px 70px;
    text-align:center;
    position:relative;
}

/* CONTENEDOR */
.ofe-wrapper{
    overflow:hidden;
    width:100%;
    margin-top:35px;
}

.ofe-track{
    display:flex;
    gap:22px;
    transition:.45s ease;
}

.product-card{
    width:24%;
    min-width:270px;
    transition:.3s;
    cursor:pointer;
}
.product-card:hover{ transform: translateY(-6px); }

.prod-img-box{ position:relative; overflow:hidden; border-radius:10px; }
.prod-img-box img{ width:100%; transition:.4s; }
.product-card:hover img{ transform:scale(1.07); }

/* HOVER */
.prod-hover{
    position:absolute;
    bottom:-50px; left:0; right:0;
    display:flex; justify-content:center; gap:10px;
    transition:.3s;
}
.product-card:hover .prod-hover{ bottom:10px; }

.hover-btn,.hover-icon{
    background:#000; color:#fff;
    padding:7px 13px;
    border-radius:6px;
    border:none;cursor:pointer;
}
.hover-btn:hover,.hover-icon:hover{ background:#df2727; }

/* TEXTOS */
.prod-category{ font-size:14px; color:#777; margin-top:10px; display:block; }
.prod-name{ font-size:17px; font-weight:600; margin-top:4px; }
.prod-price{
    margin-top:6px;
    display:inline-block;
    background:#df2727;
    padding:6px 15px;
    border-radius:6px;
    font-weight:bold;
}

/* BOTONES SLIDER */
.ofe-btn{
    position:absolute;
    top:50%; transform:translateY(-50%);
    background:#fff;
    border:none;
    font-size:26px;
    width:40px;height:40px;
    border-radius:50%; cursor:pointer;
    box-shadow:0 3px 6px rgba(0,0,0,.2);
    z-index:20;
}
.prev{ left:10px; }
.next{ right:10px; }

.ofe-btn:hover{ background:#df2727;color:#fff }

/* 📱 RESPONSIVE */
@media(max-width:900px){
    .product-card{ min-width:100% !important; }
    .prev,.next{ display:block !important; }
}














		
		
		
		
		
		
		
		
		
/*--------------------------------------------------*/
/* ============================================
   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;
    }
}