.menu-hamburguesa {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    cursor: pointer;
    z-index: 1100;
}

.menu-hamburguesa span {
    display: block;
    width: 100%;
    height: 1.5px;
    background-color: #d4af37;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animación cuando está activo (X) */
.menu-hamburguesa.activo span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-hamburguesa.activo span:nth-child(2) {
    opacity: 0;
}

.menu-hamburguesa.activo span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Overlay oscuro detrás del menú */
.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(2px);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.menu-overlay.activo {
    display: block;
    opacity: 1;
}

/* ========================================
   NAVEGACIÓN MÓVIL
   ======================================== */

@media (max-width: 900px) {
    /* Mostrar botón hamburguesa */
    .menu-hamburguesa {
        display: flex;
    }

    /* Ocultar navegación por defecto en móvil */
    .navegacion {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: #0a0a0a;
        border-left: 1px solid #1a1a1a;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 80px 20px 20px;
        gap: 0;
        z-index: 1000;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
    }

    /* Navegación visible cuando está activa */
    .navegacion.activo {
        right: 0;
    }

    /* Links de navegación en móvil */
    .navegacion .nav-link {
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid #1a1a1a;
        font-size: 0.85em;
        text-align: left;
        color: #888;
        letter-spacing: 0.08em;
    }

    .navegacion .nav-link:hover {
        background-color: rgba(212, 175, 55, 0.05);
        color: #d4af37;
        padding-left: 25px;
    }

    /* Dropdown en móvil */
    .nav-dropdown {
        width: 100%;
    }

    .nav-dropdown > .nav-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .dropdown-content {
        position: static;
        display: none;
        background: rgba(0, 0, 0, 0.3);
        box-shadow: none;
        margin: 0;
        border-radius: 0;
        min-width: 100%;
    }

    .nav-dropdown.dropdown-activo .dropdown-content {
        display: block;
    }

    .dropdown-content a {
        padding: 10px 25px;
        font-size: 0.85em;
        border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    }

    .dropdown-content a:last-child {
        border-bottom: none;
    }

    /* Carrito link en móvil */
    .carrito-link {
        margin-top: 8px;
        padding-top: 15px;
        border-top: 1px solid rgba(212, 175, 55, 0.3);
    }

    /* Botón registro en móvil - MÁS PEQUEÑO */
    .btn-registro {
        margin: 10px 0 !important;
        padding: 10px 15px !important;
        text-align: center !important;
        font-size: 0.9em !important;
        display: block !important;
        border-radius: 20px !important;
    }

    /* Header ajustes */
    .header-principal .contenedor {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
    }

    /* Logo más pequeño en móvil */
    .logo-imagen {
        width: 55px !important;
        height: 55px !important;
    }

    .logo-texto {
        font-size: 1.1em !important;
    }

    .slogan-rotativo {
        font-size: 0.65em;
        display: none; /* Ocultar slogan en móvil para ahorrar espacio */
    }

    /* ========================================
       SLIDER - BOTONES MÁS PEQUEÑOS EN MÓVIL
       ======================================== */
    .slider-seccion {
        height: 250px !important;
    }

    .slider-anterior,
    .slider-siguiente {
        font-size: 1.2em !important;
        padding: 8px 12px !important;
        border-radius: 4px !important;
    }

    .slider-anterior {
        left: 10px !important;
    }

    .slider-siguiente {
        right: 10px !important;
    }

    .slider-dots {
        bottom: 10px !important;
    }

    .slider-dot {
        width: 8px !important;
        height: 8px !important;
    }

    .slider-dot.activo {
        width: 20px !important;
    }

    .slide-contenido {
        bottom: 30px !important;
        left: 20px !important;
    }

    .slide-contenido h2 {
        font-size: 1.3em !important;
    }

    .slide-contenido p {
        font-size: 0.85em !important;
    }
}

/* Ajustes para tablets */
@media (max-width: 1024px) and (min-width: 901px) {
    .navegacion {
        gap: 15px;
    }

    .nav-link {
        padding: 8px 12px;
        font-size: 0.9em;
    }

    .logo-imagen {
        width: 70px !important;
        height: 70px !important;
    }
}

/* Ajustes para móviles pequeños */
@media (max-width: 480px) {
    .navegacion {
        width: 85%;
        max-width: 280px;
        right: -100%;
        padding: 50px 12px 15px;
    }

    .navegacion.activo {
        right: 0;
    }

    .navegacion .nav-link {
        padding: 10px 12px;
        font-size: 0.85em;
    }

    .dropdown-content a {
        padding: 8px 20px;
        font-size: 0.8em;
    }

    .btn-registro {
        padding: 8px 12px !important;
        font-size: 0.85em !important;
    }

    .logo-imagen {
        width: 45px !important;
        height: 45px !important;
    }

    .logo-texto {
        font-size: 0.95em !important;
    }

    /* Ocultar texto del logo en móviles muy pequeños */
    .logo > a > div {
        display: none;
    }

    /* Slider aún más pequeño */
    .slider-seccion {
        height: 180px !important;
    }

    .slider-anterior,
    .slider-siguiente {
        font-size: 1em !important;
        padding: 6px 10px !important;
    }

    .slide-contenido h2 {
        font-size: 1.1em !important;
    }

    .slide-contenido p {
        font-size: 0.75em !important;
        display: none;
    }
}

/* ========================================
   BOTÓN CERRAR MENÚ (X) DENTRO DEL MENÚ
   ======================================== */
.menu-cerrar {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #d4af37;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.menu-cerrar:hover {
    background: #d4af37;
}

.menu-cerrar:hover svg {
    stroke: #000;
}

.menu-cerrar svg {
    width: 16px;
    height: 16px;
    stroke: #d4af37;
    stroke-width: 2;
}

@media (max-width: 900px) {
    .menu-cerrar {
        display: flex;
    }
}

@media (max-width: 480px) {
    .menu-cerrar {
        width: 26px;
        height: 26px;
        top: 10px;
        right: 10px;
    }

    .menu-cerrar svg {
        width: 14px;
        height: 14px;
    }
}

/* ========================================
   CORRECCIONES PARA EVITAR SUPERPOSICIONES
   ======================================== */
@media (max-width: 900px) {
    /* Badge del carrito en menú móvil */
    .carrito-link {
        position: relative;
        display: flex !important;
        align-items: center;
        gap: 8px;
    }

    .carrito-link .badge {
        position: static !important;
        display: inline-flex;
        margin-left: 5px;
    }

    /* Asegurar que los elementos no se superpongan */
    .navegacion > * {
        position: relative;
        z-index: 1;
    }

    /* Separación entre elementos del menú */
    .navegacion > a,
    .navegacion > div {
        margin-bottom: 0;
    }

    /* Iniciar Sesión link */
    .navegacion > a.nav-link:not(.carrito-link):not(.btn-registro) {
        border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    }
}

/* ========================================
   DETALLE DE PRODUCTO - REORGANIZACIÓN MÓVIL
   Orden: Imagen → Precio/Tallas/Botón → Desc corta → Desc larga
   ======================================== */
@media (max-width: 768px) {
    /* Contenedor principal en columna */
    .detalle-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 15px !important;
        margin: 20px auto !important;
    }

    /* TRUCO: display: contents hace que los hijos participen directamente en el flex del padre */
    .columna-izquierda {
        display: contents !important;
    }

    .info-producto {
        display: contents !important;
    }

    /* ========================================
       NUEVO ORDEN DE ELEMENTOS EN MÓVIL
       ======================================== */

    /* 1. Nombre del producto */
    .nombre-producto-arriba {
        order: 1 !important;
        font-size: 1.3em !important;
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
    }

    /* 2. Imagen principal */
    .imagen-principal {
        order: 2 !important;
        padding: 15px !important;
        margin-bottom: 15px !important;
        border-radius: 10px !important;
    }

    /* 3. Marca */
    .marca-producto {
        order: 3 !important;
        font-size: 0.85em !important;
        margin-bottom: 5px !important;
    }

    /* 4. Categoría - PRIMERO (DESPUÉS de marca y descripción) */
    .info-producto .desc-categoria,
    .desc-categoria {
        order: 4 !important;
        font-size: 0.85em !important;
        margin-bottom: 5px !important;
        display: block !important;
    }

    /* 5. Stock - SEGUNDO (DESPUÉS de categoría) */
    .info-producto .desc-stock,
    .desc-stock {
        order: 5 !important;
        font-size: 0.85em !important;
        margin-bottom: 10px !important;
        display: block !important;
    }

    /* 6. PRECIO Y DESCUENTO - DESPUÉS de categoría y stock (CORREGIDO) */
    .info-producto .precio-descuento-container,
    .precio-descuento-container {
        order: 6 !important;
        margin-top: 15px !important;
        margin-bottom: 10px !important;
        display: flex !important;
    }
    
    .info-producto .precio-detalle,
    .precio-detalle {
        order: 6 !important;
        font-size: 1.6em !important;
        padding: 10px 20px !important;
        margin: 10px 0 15px 0 !important;
        align-self: flex-start !important;
        display: inline-block !important;
    }
    
    .info-producto .ahorro-info,
    .ahorro-info {
        order: 6 !important;
        margin-top: 5px !important;
        display: block !important;
    }

    /* 7. Formulario (tallas, colores, cantidad, botón) */
    #formCarrito {
        order: 7 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* 8. DESCRIPCIÓN CORTA - Después del botón */
    .producto-modelo-descripcion {
        order: 8 !important;
        margin-top: 25px !important;
        margin-bottom: 15px !important;
        padding: 12px !important;
        border-radius: 6px !important;
    }

    /* 9. Descripción desplegable (si existe) */
    .descripcion-desplegable {
        order: 9 !important;
        margin-top: 15px !important;
    }

    /* 10. DESCRIPCIÓN LARGA - AL FINAL */
    .descripcion-larga-box {
        order: 10 !important;
        margin-top: 25px !important;
        min-height: auto !important;
        padding: 15px !important;
    }

    /* Tallas (dentro del form) */
    #formCarrito > .producto-tallas-seccion {
        order: 1 !important;
        margin: 10px 0 !important;
    }

    .tallas-titulo {
        font-size: 1em !important;
        margin-bottom: 10px !important;
    }

    .tallas-grid {
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)) !important;
        gap: 6px !important;
    }

    .talla-btn {
        padding: 8px 4px !important;
        font-size: 0.8em !important;
        border-radius: 5px !important;
    }

    /* 7. Colores (dentro del form) */
    #formCarrito > .producto-colores-seccion {
        order: 2 !important;
        margin: 10px 0 !important;
    }

    .colores-titulo {
        font-size: 1em !important;
        margin-bottom: 10px !important;
    }

    .colores-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
        gap: 6px !important;
    }

    .color-btn {
        padding: 8px !important;
        font-size: 0.75em !important;
        border-radius: 6px !important;
    }

    .color-preview {
        width: 25px !important;
        height: 25px !important;
    }

    /* 8. Cantidad (dentro del form) */
    #formCarrito > .selector-grupo {
        order: 3 !important;
        margin: 10px 0 !important;
    }

    .selector-grupo label {
        font-size: 0.95em !important;
        margin-bottom: 5px !important;
    }

    .cantidad-input {
        width: 60px !important;
        padding: 6px !important;
        font-size: 0.9em !important;
    }

    /* 9. Botón agregar al carrito (dentro del form) */
    #formCarrito > .btn-agregar-carrito {
        order: 4 !important;
        font-size: 1em !important;
        padding: 14px !important;
        margin-top: 15px !important;
        border-radius: 8px !important;
    }

    /* Estilos de texto para descripción corta */
    .producto-modelo {
        font-size: 0.9em !important;
        margin-bottom: 8px !important;
    }

    .producto-descripcion-corta {
        font-size: 0.85em !important;
        line-height: 1.5 !important;
    }

    /* Productos relacionados */
    .relacionados-container {
        margin: 30px auto 20px !important;
        padding: 20px 10px !important;
    }

    .relacionados-titulo {
        font-size: 1.2em !important;
        margin-bottom: 15px !important;
    }

    .relacionados-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .producto-relacionado-card {
        border-radius: 6px !important;
    }

    .rel-info {
        padding: 10px !important;
    }

    .rel-nombre {
        font-size: 0.8em !important;
        margin-bottom: 5px !important;
    }

    .rel-precio {
        font-size: 0.9em !important;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {
    .detalle-container {
        padding: 0 10px !important;
        margin: 15px auto !important;
        gap: 10px !important;
    }

    .nombre-producto-arriba {
        font-size: 1.15em !important;
        padding-bottom: 8px !important;
    }

    .imagen-principal {
        padding: 10px !important;
    }

    .precio-detalle {
        font-size: 1.4em !important;
        padding: 8px 15px !important;
    }

    .tallas-grid {
        grid-template-columns: repeat(auto-fill, minmax(45px, 1fr)) !important;
        gap: 5px !important;
    }

    .talla-btn {
        padding: 6px 3px !important;
        font-size: 0.75em !important;
    }

    .colores-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important;
        gap: 5px !important;
    }

    .color-btn {
        padding: 6px !important;
        font-size: 0.7em !important;
    }

    .color-preview {
        width: 22px !important;
        height: 22px !important;
    }

    .btn-agregar-carrito {
        font-size: 0.95em !important;
        padding: 12px !important;
    }

    .producto-modelo-descripcion {
        padding: 10px !important;
    }

    .descripcion-larga-box {
        padding: 12px !important;
    }

    .descripcion-larga-box h3 {
        font-size: 1em !important;
        margin-bottom: 10px !important;
    }

    .descripcion-larga-box p {
        font-size: 0.85em !important;
        line-height: 1.5 !important;
    }

    .relacionados-grid {
        gap: 8px !important;
    }

    .rel-nombre {
        font-size: 0.75em !important;
    }

    .rel-precio {
        font-size: 0.85em !important;
    }
}

/* ========================================
   CARRITO - CARDS MÓVIL
   ======================================== */
@media (max-width: 768px) {
    /* OCULTAR TABLA CARRITO EN MÓVIL */
    .tabla-carrito,
    table.tabla-carrito {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* MOSTRAR CARDS CARRITO EN MÓVIL */
    .carrito-cards-mobile {
        display: block !important;
        visibility: visible !important;
    }
    
    /* ESTILOS DE CARDS CARRITO */
    .carrito-card {
        background: white;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }
    
    .carrito-card-header {
        display: flex;
        gap: 15px;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
        position: relative;
    }
    
    .carrito-card-img {
        width: 80px;
        height: 80px;
        min-width: 80px;
        max-width: 80px;
        min-height: 80px;
        max-height: 80px;
        object-fit: contain;
        border-radius: 5px;
        background: #f5f5f5;
        padding: 5px;
    }
    
    .carrito-card-header img {
        max-width: 100%;
        max-height: 100%;
    }
    
    .carrito-card-info {
        flex: 1;
    }
    
    .carrito-card-info h4 {
        margin: 0 0 5px 0;
        font-size: 1em;
        color: #333;
    }
    
    .carrito-card-info p {
        margin: 3px 0;
        font-size: 0.85em;
        color: #666;
    }
    
    .carrito-card-details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 15px 0;
    }
    
    .carrito-card-detail-item {
        display: flex;
        flex-direction: column;
    }
    
    .carrito-card-detail-label {
        font-size: 0.8em;
        color: #999;
        margin-bottom: 3px;
    }
    
    .carrito-card-detail-value {
        font-size: 0.95em;
        color: #333;
        font-weight: 500;
    }
    
    .carrito-card-precio {
        text-align: center;
        padding: 15px;
        background: #f9f9f9;
        border-radius: 5px;
        margin: 15px 0;
    }
    
    .carrito-card-precio .precio-actual {
        font-size: 1.3em;
        font-weight: bold;
        color: #d4af37;
    }
    
    .carrito-card-precio .precio-anterior {
        font-size: 0.9em;
        color: #999;
        text-decoration: line-through;
        margin-right: 10px;
    }
    
    .carrito-card-acciones {
        display: flex;
        gap: 10px;
        margin-top: 15px;
    }
    
    .carrito-card-acciones input {
        flex: 1;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 5px;
        text-align: center;
    }
    
    .carrito-card-acciones .btn {
        padding: 8px 15px;
        font-size: 0.9em;
    }
}

/* ========================================
   MIS PEDIDOS - CARDS MÓVIL
   ======================================== */
@media (max-width: 768px) {
    /* OCULTAR TABLA PEDIDOS EN MÓVIL */
    .pedidos-tabla-desktop,
    table.pedidos-tabla-desktop {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* MOSTRAR CARDS PEDIDOS EN MÓVIL */
    .pedidos-cards-mobile {
        display: block !important;
        visibility: visible !important;
    }
}

/* ========================================
   CATÁLOGO - REORDENAR PRECIO EN MÓVIL
   ======================================== */
@media (max-width: 768px) {
    .producto-card {
        display: flex;
        flex-direction: column;
    }
    
    /* Imagen primero */
    .producto-imagen {
        order: 1;
        margin-bottom: 10px;
    }
    
    /* Info del producto después de la imagen */
    .producto-info {
        order: 2;
        display: flex;
        flex-direction: column;
    }
    
    /* Marca y nombre primero dentro de producto-info */
    .producto-info .producto-marca {
        order: 1;
        margin-bottom: 5px;
    }
    
    .producto-info h3 {
        order: 2;
        margin-bottom: 10px;
    }
    
    /* PRECIO después del nombre */
    .producto-info .precio-contenedor {
        order: 3;
        margin-top: 0;
        margin-bottom: 10px;
    }
    
    .producto-info > .producto-precio {
        order: 3;
        margin-top: 0;
        margin-bottom: 10px;
    }
    
    /* Descripción y otros elementos después del precio */
    .producto-info .producto-descripcion-corta {
        order: 4;
        margin-top: 0;
    }
    
    .producto-info .btn {
        order: 5;
        margin-top: 10px;
    }
}