/* Configuración General */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lato', Tahoma, Geneva, Verdana, sans-serif;
    
    
}
html {
    overflow-x: hidden; /* Oculta todo lo que intente salirse por los lados */

}

body {
    background-color: #000; /* Fondo negro como la imagen */
    overflow-x: hidden; /* Oculta todo lo que intente salirse por los lados */
}


/* BIEN (Permite que crezca si hay más contenido) */
main {
    min-height: 100vh; /* "Al menos" el alto de la pantalla, pero puede crecer */
    height: auto;
    overflow-y: auto; /* Permite scroll vertical si es necesario */
    overflow-x: hidden; /* Oculta todo lo que intente salirse por los lados */
}

/* Header Principal */

.main-header {
    background-color: #050505;
    padding: 15px 0 5px 0;
    border-bottom: 1px solid #1a1a1a;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  
   
}

/* Logo */
.logo img {
    height: 70px; /* Ajusta según tu logo */
}

/* Barra de Búsqueda */
.search-container {
    flex-grow: 1;
    flex-basis: 50%;
    margin: 0 20px;
    position: relative;
    display: flex;
    min-width: 700px;
}

.search-container input {
    width: 100%;
    background-color: #1a1a1a;
    border: 1px solid #333;
    padding: 10px 15px;
    border-radius: 4px;
    color: white;
    outline: none;
    font-size: 1.2rem;
}

.search-container button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 1.2rem;
}

/* Iconos */
.header-icons {
    display: flex;
    gap: 35px;
    align-items: center;
}

.header-icons a {
    color: #ccc;
    text-decoration: none;
    font-size: 25px;
    transition: color 0.3s;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -ms-transition: color 0.3s;
    -o-transition: color 0.3s;
}

.header-icons a:hover {
    color: #ff0000; /* Efecto hover rojo como el logo */
}

.header-icons a:active {
    color: #ff0000; /* Efecto hover rojo como el logo */
}


/* Barra de Ubicación */
.location-bar {
    max-width: 1600px;
    margin: 10px auto;
    padding: 0 20px;
    color: #ccc;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.location-bar i {
    font-size: 1.4rem;
}



/* Contenedor principal del Carrusel */
/* El marco que recorta lo que sobra (La Ventana) */
.hero-carousel {
    width: 100%;
    height: calc(100vh - 100px); /* Ajusta según tu header */
    overflow: hidden; /* ¡Importante! Esto oculta las imágenes que están al lado */
    position: relative;
    background: #000;
}

/* El riel que se desliza (El Tren) */
.carousel-container {
    display: flex;
    width: 100%; /* El JS se encargará del resto */
    height: 100%;
    transition: transform 0.6s ease-in-out;
}

/* Cada vagón (El Slide) */
.slide {
    /* Estas tres líneas obligan a cada slide a medir lo mismo que la pantalla */
    min-width: 100%; 
    width: 100%;
    flex-shrink: 0; 
    
    height: 100%;
    position: relative;
    display: flex; /* Para centrar contenido interno */
    align-items: center;
    justify-content: center;
}

.slide-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* O 'contain' si prefieres no cortar la imagen */
    z-index: 1;
}

.slide-content {
    position: relative;
    z-index: 2;
    /* Tu estilo de texto aquí */
}


.prev-btn:hover, .next-btn:hover {
    background: #cc0000;
}
/* Ocultar slides por defecto */
.slide {
   min-width: 100%; /* Cada slide ocupa exactamente el 100% del ancho del main */
    height: 100%;
    position: relative;
    display: flex; /* Mantenemos flex para centrar el contenido interno */
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Mostrar solo el slide activo */
.slide.active {
    display: flex;
    opacity: 1;
}
.cart-page-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    padding: 100px;
    max-width: 100%;
    min-height: 700px;
    margin: 0 auto;
    background-color: #f0f0f0; /* Fondo gris claro como la imagen */
    color: #333;
}

.cart-card, .summary-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.cart-item {
    display: grid;
    grid-template-columns: 50px 100px 1fr 120px 120px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.item-image img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.item-name { font-weight: bold; display: block; }
.item-brand { color: #888; font-size: 0.9rem; }
.item-price { color: #e60000; font-weight: bold; font-size: 1.1rem; }

/* Botones de cantidad */
.item-quantity {
    display: flex;
    align-items: center;
    background: #eee;
    border-radius: 5px;
    justify-content: space-between;
    padding: 5px;
}
.qty-btn { border: none; background: none; font-weight: bold; cursor: pointer; padding: 0 10px; }

/* Resumen de Compra */
.summary-row {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
}
.summary-total {
    border-top: 2px solid #eee;
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}
.btn-continue {
    text-decoration: none;
    text-align: center;
    width: 100%;
    background: #343a40;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 25px;
    margin-top: 20px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1.2rem;
}
.btn-continue:hover {
background: #e60000;

   
}
.roser {
    color: #fff;
    text-decoration: none;
}

/* Esto empuja el contenido hacia abajo para que no lo tape el header */
.main-wrapper {
    padding-top: 1px;
    min-height: 1px;
    background-color: transparent;
    color: white;
}

/* Variante específica para la página del carrito (Blanco) */

.vendor-logo {
    width: 35px;
    height: 40px;
}

.vendor-header {
    display: flex;
    justify-content: baseline;
}

.cart-title {
    margin-bottom: 20px;
}

.cart-summary-section {
    margin-top: 50px;
}

.summary-logo-container img {
    height: 235px ;
    width: 235px;
    
}

/* =========================================
   SECCIÓN IDENTIDAD (DARK MODE)
   ========================================= */

/* --- 1. Contenedor Principal --- */
.seccion-identidad {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
    min-height: 600px;
}

/* --- 2. Navegación (Tabs) --- */
.nav-tabs-custom {
    display: flex !important;       /* Fuerza la horizontalidad */
    justify-content: center !important; 
    list-style: none !important;    /* Quita los puntos de lista */
    padding: 0;
    margin-bottom: 40px;
    gap: 40px;                      /* Espacio entre botones */
    border: none;
}

.nav-link-custom {
    background: transparent;
    border: none;
    color: #888;                    /* Color inactivo (gris) */
    font-size: 1.2rem;
    cursor: pointer;
    position: relative;
    padding-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.nav-link-custom:hover {
    color: #ffffff;
}

.nav-link-custom.active {
    color: #ffffff !important;
    font-weight: bold;
}

/* La barra roja decorativa debajo del botón activo */
.nav-link-custom.active::after {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-color: #D32F2F;      /* Rojo BYO */
    position: absolute;
    bottom: 0;
    left: 0;
    box-shadow: 0 0 8px #D32F2F;    /* Brillo rojo */
}

/* --- 3. Tarjeta y Estructura (Layout) --- */
.card-dark {
    background: linear-gradient(145deg, #2b2b2b, #1a1a1a);
    box-shadow: 0 20px 50px rgba(0,0,0,0.9);
    overflow: hidden;
    margin-top: 20px;
    position: relative;
    min-height: 430px; /* Ajusta este número si sientes que le falta o le sobra espacio */
  
}

/* Contenedor Flex (Pone imagen y texto lado a lado) */
.contenido-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;

}

/* Columna Izquierda (Imagen) */
.columna-imagen {
    flex: 0 0 45%;      /* Ocupa el 45% del ancho */
    max-width: 45%;
    position: relative;
    min-height: 500px;
}

.img-full {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Ajusta la foto sin deformarla */
    display: block;
    filter: grayscale(100%); /* Efecto Blanco y Negro */
    transition: filter 0.3s ease;
}


/* Columna Derecha (Texto) */
.columna-texto {
    flex: 0 0 55%;      /* Ocupa el 55% del ancho */
    max-width: 55%;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #e0e0e0;
}

/* --- 4. Tipografía --- */
.titulo-grande {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 25px;
    color: #ffffff;
}

.texto-delgado {
    font-weight: 300;
}

.parrafo-cuerpo {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 20px;
    text-align: justify;
    color: #cccccc;
}

.firma-contenedor {
    text-align: right; 
    margin-top: 30px;
}

.firma-contenedor h5 {
    color: white; 
    margin: 0;
    font-weight: 700;
}

.firma-contenedor small {
    color: #aaa;
}

/* --- 5. Decoración (Puntos Rojos) --- */
.puntos-rojos {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 2;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: #555;
    border-radius: 50%;
}

.dot.active {
    background-color: #D32F2F; /* Rojo activo */
}

.tab-pane-custom {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Cuando JS agrega esta clase, se vuelve visible */
.tab-pane-custom.fade-in {
    opacity: 1;
}

/* Excepción: Si tiene display block manual (como al inicio), que se vea */
.tab-pane-custom[style*="display: block"] {
    opacity: 1;
}
.section-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    flex-wrap: wrap;
    flex-direction: column;
}

.footer-byo {
    width: 100%;
    font-family: 'Arial', sans-serif; /* O la fuente que uses en el sitio */
}

/* 1. Zona Getnet (Fondo gris muy oscuro) */
.footer-getnet {
    background-color: #1a1a1a; /* Un gris casi negro para diferenciar */
    padding: 50px 0;
    text-align: center;
}

.img-getnet {
    max-width: 180px; /* Ajusta el tamaño según tu imagen */
    height: auto;
    opacity: 0.8;
}

/* 2. Barra Roja */
.footer-red-bar {
    width: 100%;
    height: 15px; /* Grosor de la barra */
    background-color: #ce0000; /* Rojo intenso B&O */
}

/* 3. Contenido Principal (Negro) */
.footer-content {
    background-color: #000000;
    color: #ffffff;
    padding: 50px 0 20px 0;
}

.footer-title {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

/* Items de contacto y redes */
.contact-item, .social-item {
    display: flex;
    align-items: flex-start; /* Alinea ícono con la primera línea de texto */
    margin-bottom: 20px;
    gap: 15px; /* Espacio entre ícono y texto */
}

.contact-text p, .contact-item p, .social-item p {
    margin: 0;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
}

/* Íconos (Requiere FontAwesome) */
.icon-red {
    color: #ce0000; /* Mismo rojo que la barra */
    font-size: 1.2rem;
    margin-top: 3px; /* Pequeño ajuste visual */
    width: 20px;
    text-align: center;
}

/* 4. Parte inferior (Logo B&O y Copyright) */
.footer-bottom {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #333; /* Línea sutil separadora opcional */
}

.footer-logo-byo {
    max-width: 120px;
    margin-bottom: 15px;
}

.copyright-text {
    font-size: 0.75rem; /* Letra pequeña */
    color: #888; /* Gris claro para texto secundario */
    line-height: 1.6;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
   
}

.seccion-beneficios {
    background-color: #000000;
    
}

/* La tarjeta gris redondeada */
.beneficio-card {
    background-color: #7F0000; /* Gris claro similar a la imagen */
    border-radius: 25px; /* Bordes muy redondeados */
    padding: 35px 40px; /* Espacio interno */
    display: flex; /* Activa Flexbox para alinear ícono y texto */
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: flex-start; /* Alinea a la izquierda */
    height: 100%; /* Asegura que todas las tarjetas tengan la misma altura */
    transition: transform 0.3s ease; /* Pequeña animación al pasar el mouse */
    height: 200px;
}

/* Efecto opcional al pasar el mouse */
.beneficio-card:hover {
    transform: translateY(-5px);
    background-color: #333;
   
  
}

/* Estilo del ícono */
.beneficio-icon {
    width: 50px; /* Tamaño fijo para el ícono */
    height: auto;
    margin-right: 20px; /* Espacio entre ícono y texto */
    flex-shrink: 0; /* Evita que el ícono se aplaste si hay mucho texto */
   
}

/* Estilo del texto */
.beneficio-text {
    margin: 0; /* Quita el margen por defecto del párrafo */
    color: #fff; /* Texto negro */
    font-weight: 800; /* Texto muy grueso (bold) */
    font-size: 0.9rem; /* Tamaño un poco más pequeño que el estándar */
    text-transform: uppercase; /* Todo en mayúsculas */
    line-height: 1.3; /* Altura de línea para textos de dos renglones */
}


.section2-container {
    display: flex;
    justify-content: center;
    margin-top: 100px;
    margin-bottom: 100px;
}

.row.justify-content-center {
    display: flex;
    gap: 20px;
}

/* =========================================
   ESTILOS SLIDER DE MARCAS
   ========================================= */

/* Sección principal con fondo negro */
.seccion-marcas {
    background-color: #000000;
    padding: 60px 0;
    overflow: hidden; /* Oculta lo que se sale de la pantalla */
}

/* Estilo del título */
.titulo-marcas {
    text-align: center;
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Contenedor que define el área visible del slider */
.slider-container {
    position: relative;
    width: 100%;
    height: 200px; /* Altura fija para los logos */
    overflow: hidden;
    /* Opcional: Crea un efecto de desvanecimiento en los bordes */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* La pista que contiene todos los logos y se mueve */
.slider-track {
    display: flex;
    /* El ancho debe ser suficiente para todos los logos (originales + duplicados) */
    /* Suponiendo 10 items de 250px de ancho cada uno */
    width: 2500px;
    /* La animación: nombre, duración, velocidad constante, repetición infinita */
   animation: scrollMarcas 20s linear infinite;
}

/* Pausar la animación al pasar el mouse (opcional, muy útil) */
.slider-track:hover {
    animation-play-state: paused;
}

/* Cada ítem individual de marca */
.marca-item {
    position: relative;
    width: 250px; /* Ancho fijo para cada espacio de logo */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    flex-shrink: 0; /* Evita que se aplasten */
    overflow: hidden; /* Para cortar la cinta en la esquina */
}

/* Estilo de la imagen del logo */
.marca-item img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    /* TRUCO: Si tus logos son negros, esto los vuelve BLANCOS */
   
    opacity: 0.8; /* Un poco transparente para que no encandile */
    transition: opacity 0.3s ease;
}

/* Al pasar el mouse, el logo se ilumina al 100% */
.marca-item:hover img {
    opacity: 1;
}

/* --- ESTILO DE LA CINTA "PRÓXIMAMENTE" --- */
.ribbon {
    position: absolute;
    top: 20px;
    left: -30px;
    width: 120px;
    padding: 5px 0;
    background-color: #ce0000; /* Rojo B&O */
    color: #ffffff;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    /* Rota la cinta 45 grados */
    transform: rotate(-45deg);
    z-index: 10; /* Asegura que quede encima del logo */
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* --- DEFINICIÓN DE LA ANIMACIÓN --- */
@keyframes scrollMarcas {
    0% {
        /* Empieza en la posición original */
        transform: translateX(0);
    }
    100% {
        /* Se mueve a la izquierda exactamente la mitad de su ancho total */
        /* Esto es: -(ancho de un ítem * cantidad de ítems únicos) */
      transform: translateX(-1250px);
    }
}

.row {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
}

.destacados-container {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
}
.btn-agregar {
    gap: 9px;
}

.input-linea {
        border: none;
        border-bottom: 2px solid #ccc; /* Línea gris */
        border-radius: 0;
        padding-left: 0;
        background-color: transparent;
    }
    .input-linea:focus {
        box-shadow: none;
        border-bottom: 2px solid #000; /* Línea negra al escribir */
    }
    
    /* Botón cerrar (La X roja) */
    .btn-close-red {
        background: none; /* Quitamos el fondo default */
        border: none;
        color: #dc3545; /* Color rojo */
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1;
        opacity: 1; 
    }
    .btn-close-red:hover { color: #a71d2a; }

    /* Botón Continuar */
    .btn-guardar-dark {
        background-color: #343a40; /* Gris oscuro / Negro suave */
        color: white;
        border-radius: 50px; /* Bordes muy redondos */
        padding: 12px;
        font-weight: 600;
        transition: all 0.3s;
    }
    .btn-guardar-dark:hover {
        background-color: #000;
        transform: scale(1.02);
    }

    /* Contenedor principal para alinear el botón de filtro y las tarjetas */
.categories-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 5%; /* Un poco de margen a los lados */
    background-color: #000; /* Fondo negro como tu sitio */
    overflow: hidden;
}

/* Estilo del botón de filtro (izquierda) */
.filter-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    flex-shrink: 0; /* Evita que el botón se aplaste */
}

/* Contenedor con scroll horizontal para las tarjetas */
.categories-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto; /* Permite deslizar si no caben en pantalla */
    padding-bottom: 10px; /* Espacio para la barra de scroll si aparece */
    width: 100%;
    scrollbar-width: none; /* Ocultar barra de scroll en Firefox */
    justify-content: flex-start;
    align-items: center;
    height: 200px;
}

.categories-scroll::-webkit-scrollbar {
    display: none; /* Ocultar barra de scroll en Chrome/Safari */
}

/* Diseño base de la tarjeta */
.cat-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 225.71px;
    height: 128.20px;
    padding: 20px;
    border-radius: 8px;
    text-decoration: none;
    color: white;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

/* Efecto Hover */
.cat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3);
}

/* Color ROJO (Accesorios, Motor, etc.) */
.red-card {
    background-color: #cc0000; /* Rojo intenso */
    /* Si quieres gradiente como en algunos diseños modernos: */
    background: linear-gradient(135deg, #d80000 0%, #a00000 100%);
}

/* Color GRIS (Destacados) */
.dark-card {
    background-color: #343a40;
    background: linear-gradient(135deg, #495057 0%, #212529 100%);
}

/* Estilos de los textos e iconos */
.icon-lg {
    font-size: 24px; /* Tamaño del icono grande */
    margin-bottom: 10px;
}

.cat-info h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    text-transform: capitalize;
}

.cat-info span {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8; /* Texto secundario un poco más transparente */
    margin-top: 4px;
    font-weight: 300;
}

/* El fondo oscuro transparente */
.modal-overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fondo negro semitransparente */
    justify-content: center;
    align-items: center;
}

/* La caja blanca del login */
.modal-content {
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px; /* Ancho máximo similar a la imagen */
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    font-family: sans-serif;
}

/* Botón de cerrar (X) */
.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #cc0000; /* Rojo */
    cursor: pointer;
}

.modal-content h2 {
    margin-top: 0;
    font-size: 24px;
    font-weight: bold;
    color: #000;
}

.subtitle {
    font-size: 14px;
    color: #333;
    margin-bottom: 25px;
}

/* Estilos de los inputs */
.modal-content label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #333;
}

.modal-content input {
    width: 100%;
    padding: 10px 0; /* Estilo solo borde inferior como parece en la imagen */
    margin-bottom: 20px;
    border: none;
    border-bottom: 1px solid #333;
    outline: none;
    font-size: 16px;
}

/* Botón Continuar */
.btn-continuar {
    width: 100%;
    padding: 12px;
    background-color: #343a40; /* Gris oscuro / Negro */
    color: white;
    border: none;
    border-radius: 25px; /* Bordes redondeados */
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}

.btn-continuar:hover {
    background-color: #23272b;
}

/* Footer del modal */
.modal-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    color: #666;
}
.modal-footerr {
    text-align: center;
    font-size: 14px;
    display: flex;
    justify-content: center;
}
.link-registro {
    color: #cc0000; /* Rojo */
    text-decoration: none;
    font-weight: bold;
}

.link-olvido {
    display: block;
    margin-top: 10px;
    color: #666;
    text-decoration: none;
}

/* --- Estilos para el Scroll (Barra para bajar) --- */
.scrollable-modal {
    max-height: 85vh; /* Ocupa máximo el 85% de la altura de la pantalla */
    overflow-y: auto; /* Esto hace aparecer la barra si el contenido es largo */
}

/* Personalizar la barra de scroll (opcional, para que se vea moderna) */
.scrollable-modal::-webkit-scrollbar {
    width: 8px;
}
.scrollable-modal::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 4px;
}
.scrollable-modal::-webkit-scrollbar-thumb {
    background: #555; 
    border-radius: 4px;
}
.scrollable-modal::-webkit-scrollbar-thumb:hover {
    background: #333; 
}

/* --- Estilos del formulario de registro --- */
.row-inputs {
    display: flex;
    gap: 15px;
}

.select-doc {
    width: 30%;
    border: none;
    border-bottom: 1px solid #333;
    background: transparent;
    padding: 10px 0;
    outline: none;
    max-height: 45.07px;
}

/* Requisitos de contraseña (bolitas rojas/texto pequeño) */
.password-requirements {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas */
    font-size: 12px;
    color: #666;
    margin-bottom: 20px;
    gap: 5px;
}

.dott {
    height: 8px;
    width: 8px;
    background-color: #cc0000;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    transition: background-color 0.3s ease; /* Hace que el cambio de color sea suave */
}

.dott.valid {
    background-color: #28a745 !important; /* Un color verde bonito y estándar */
}

/* --- Estilos Dashboard Usuario (Slice 44) --- */
.dashboard-wrapper {
    background-color: #000; /* Fondo negro */
    color: #fff;
    padding: 40px 5%;
    min-height: 80vh;
}

.dashboard-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
}

/* Grilla de Tarjetas del Menú */
.dashboard-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
    margin-bottom: 50px;
}

.menu-card {
    background-color: #cc0000; /* Rojo principal */
    padding: 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
    text-decoration: none;
    color: white;
    display: flex;
    min-width: 225.71px;
    height: 128.20px;
    flex-direction: column;
    justify-content: center;

}

.menu-card:hover {
    transform: translateY(-5px); /* Efecto elevación */
}

.logout-card {
    background-color: #343a40; /* Gris oscuro para cerrar sesión */
}

.card-icon {
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
}

.menu-card h3 {
    font-size: 16px;
    font-weight: bold;
    margin: 5px 0;
}

.menu-card p {
    font-size: 12px;
    opacity: 0.8;
    margin: 0;
}

/* Sección de Datos Personales */
.section-title {
    font-size: 24px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

.data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #222; /* Líneas separadoras sutiles */
}

.data-info label {
    display: block;
    color: #888; /* Texto gris para títulos */
    font-size: 14px;
    margin-bottom: 5px;
}

.data-info p {
    font-size: 18px;
    margin: 0;
    color: #ddd;
}

.edit-link {
    color: #fff;
    text-decoration: underline;
    font-weight: bold;
    font-size: 14px;
}

/* Fondo oscuro detrás del modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Oscuro transparente */
    z-index: 1000;
    display: flex; /* Para centrar */
    justify-content: center;
    align-items: center;
}

/* La caja blanca del formulario */
.contact-box {
    background: white;
    padding: 40px;
    width: 100%;
    max-width: 500px;
    border-radius: 8px;
    position: relative;
    text-align: left;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Títulos */
.contact-box h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #000;
}

.contact-box .subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
}

/* Inputs (Estilo línea abajo para email, caja para mensaje) */
.input-group-contact {
    margin-bottom: 20px;
}

.input-group-contact label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
}

.input-group-contact input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc; /* Línea abajo */
    padding: 10px 0;
    outline: none;
    font-size: 16px;
}

.input-group-contact textarea {
    width: 100%;
    border: 1px solid #000; /* Borde negro completo */
    padding: 10px;
    outline: none;
    resize: none; /* Que no se pueda estirar */
}

/* Botón Continuar (Oscuro) */
.btn-continuar-dark {
    width: 100%;
    background-color: #343a40; /* Gris oscuro */
    color: white;
    padding: 12px;
    border: none;
    border-radius: 25px; /* Bordes redondos */
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
}

.btn-continuar-dark:hover {
    background-color: #23272b;
}

/* La X roja de cerrar */

/* --- ESTILOS DE PÁGINA DE PRODUCTO --- */

.product-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    color: white; /* Texto blanco general */
}

.breadcrumbs {
    color: #888;
    margin-bottom: 20px;
    font-size: 14px;
}

/* Grilla principal: Izquierda y Derecha */
.product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Mitad y mitad */
    gap: 40px;
}

/* --- Columna Izquierda (Imágenes) --- */
.product-images {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.thumbnail-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.thumb {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
}

.main-image {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}

.main-image img {
    width: 100%;
    max-width: 400px;
    height: auto;
}

.action-icons {
    font-size: 30px;
    display: flex;
    gap: 80px;
    color: #fff;
    margin-left: 80px;
}

/* --- Columna Derecha (Info) --- */
.product-title {
    font-size: 28px;
    margin-bottom: 10px;
}

.vendor-badge {
    font-size: 12px;
    color: #ccc;
    margin-bottom: 10px;
}

/* Tabla de Especificaciones */
.specs-table {
    background: #111; /* Fondo oscuro tabla */
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #333;
    font-size: 14px;
}

.spec-label { color: #aaa; }
.spec-value { color: #fff; font-weight: bold; }

/* Precio y Botón */
.price {
    font-size: 36px;
    color: #d00; /* Rojo intenso */
    font-weight: bold;
    margin: 20px 0;
}

.add-to-cart-box {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.quantity-selector {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

.quantity-selector button {
    background: #333;
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 5px;
}

.btn-agregar-white {
    background: white;
    color: black;
    padding: 12px 40px;
    border: none;
    border-radius: 25px; /* Forma de píldora */
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

.btn-agregar-white:hover {
    background: #eee;
}

.description-box h3 {
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.description-box p {
    color: #ccc;
    line-height: 1.6;
    font-size: 14px;
}

/* --- Sección Inferior --- */
.bottom-section {
    margin-top: 60px;
    display: flex;
    gap: 120px;
    flex-direction: row;
    justify-content: center;
    margin-left: 80px;
}

.related-grid {
    display: flex;
    gap: 20px;
 
}

.related-card {
    background: #000;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.related-card img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    background: white;
    border-radius: 10px;
    /*Imagenredonda*/margin-bottom: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;

}

.price-red {
    display: block;
    color: #d00;
    font-weight: bold;
    margin: 5px 0;
}

.btn-sm-white {
    background: white;
    border: none;
    border-radius: 15px;
    padding: 5px 15px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    color: #000;
    text-decoration: none;
}

/* Comentarios (Globo de chat) */


/* Sección de Comentarios */
.reviews-section {
    color: white;
}

/* Estilo de los Inputs del formulario */
.input-comentario {
    width: 100%;
    background: #000;
    /*Fondooscuro*/border: 1px solid #333;
    color: white;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-family: inherit;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.input-comentario:focus {
    outline: none;
    border-color: #d00; /* Rojo al escribir */
}

.btn-comentar {
    background: #fff;
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    margin-bottom: 20px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

/* Tarjeta de comentario individual */
.review-card {
    display: flex;
    gap: 15px;
    background: #1a1a1a;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    color: #fff;
    width: 100%;
     margin-top: 15px;
  
}

.user-avatar {
    width: 40px;
    height: 40px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    text-transform: uppercase;
}

.review-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    width: 100%;
    gap: 40px;
}

.review-date {
    font-size: 12px;
    color: #777;
}
.qty-num-bl {
    color: #fff;

}
/* --- TRANSICIÓN SUAVE UBER EATS (VERSIÓN ABSOLUTA) --- */

/* --- TRANSICIÓN SUAVE UBER EATS (VERSIÓN ABSOLUTA) --- */

.btn-transition-container {
    position: relative; /* Crea el marco de referencia */
    width: 100%;
    height: 50px; /* Altura fija necesaria para que no colapse */
    overflow: hidden; /* Asegura que nada se salga de los bordes */
    border-radius: 25px; /* Opcional: para que coincida con la forma de tus botones */
}

/* ESTILOS COMUNES PARA AMBOS HIJOS (Botón y Selector) */
/* Esto los obliga a estar uno ENCIMA del otro, no apilados */
.btn-transition-container > * {
    position: absolute !important; 
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important; /* Elimina cualquier margen que los separe */
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-sizing: border-box;
}

/* --- ESTADO 1: NORMAL (Se ve el botón blanco "Agregar") --- */
/* Apuntamos al botón (asumiendo que es el primer elemento o un botón) */
.btn-transition-container > button {
    opacity: 1;
    transform: scale(1);
    z-index: 10;          /* Arriba */
    pointer-events: auto;
}

/* El selector (el div oscuro) debe estar oculto inicialmente */
.btn-transition-container > div.quantity-selector {
    opacity: 0;
    transform: translateY(20px); /* Que venga desde abajo */
    z-index: 1;           /* Abajo */
    pointer-events: none;
}

/* --- ESTADO 2: ACTIVO (Se ve el selector negro) --- */
/* Cuando el contenedor tiene la clase .activo... */

/* El botón blanco se va */
.btn-transition-container.activo > button {
    opacity: 0;
    transform: scale(0.8); /* Se hace chiquito */
    pointer-events: none;
    z-index: 1;
}

/* El selector negro aparece */
.btn-transition-container.activo > div.quantity-selector {
    opacity: 1 !important;
    transform: translateY(0) !important; /* Sube a su posición original */
    z-index: 20; /* Se pone encima de todo */
    pointer-events: auto;

}
.middle-section {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 140px;
    margin-left: 80px;
}
.comentarios {
    display: flex;
    margin-left: 80px;
    
}
.reviews-list {
    display: flex;
    width: 1080px;
}
.related-products {
    width: 100%;
}

/* Contenedor negro */
.valoracion-container {
    background-color: #000; /* Fondo Negro */
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 5px;
    gap: 5px; /* Espacio entre estrellitas */
}

/* Tamaño base de los iconos */
.valoracion-container i {
    font-size: 24px;
}

/* Estrella Llena = ROJA */
.estrella-roja {
    color: #cc0000; /* Tu rojo intenso */
}

/* Estrella Vacía = BLANCA (Borde) */
.estrella-blanca {
    color: #ffffff;
}

/* El número (ej: 4.0) */
.puntuacion-valor {
    color: #ffffff;
    font-weight: bold;
    font-size: 24px;
    margin-left: 8px;
    font-family: sans-serif;
}

.input-estrellas {
    display: flex;
    flex-direction: row-reverse; /* Importante: invierte el orden visual */
}

/* Ocultar los radio buttons reales */
.input-estrellas input {
    display: none;
}

/* El estilo de la estrella base (usando tus colores) */
.input-estrellas label {
    font-size: 32px; /* Un poco más grandes para poder hacer clic fácil */
    color: #ffffff;  /* BLANCO por defecto (como tu .estrella-blanca) */
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
    padding: 0 2px;
}

/* --- LA MAGIA: Cuando pasas el mouse o seleccionas --- */

/* Al pasar el mouse sobre una, ella y las siguientes (que visualmente son las anteriores) se ponen ROJAS */
.input-estrellas label:hover,
.input-estrellas label:hover ~ label,
.input-estrellas input:checked ~ label {
    color: #cc0000; /* TU ROJO INTENSO (.estrella-roja) */
}

.alert-no-results {
    width: 100%;            /* Ocupa todo el ancho disponible */
    display: flex;          /* Usamos flex para centrar el contenido */
    flex-direction: column; /* Elementos uno debajo del otro */
    align-items: center;    /* Centrado horizontal */
    justify-content: center;
    padding: 40px 20px;     /* Espacio interno */
    margin-top: 20px;       /* Separación de las categorías */
    clear: both;            /* Rompe cualquier flotado anterior */
    box-sizing: border-box; /* Para que el padding no rompa el ancho */
}

/* Opcional: Para asegurar que el texto se lea bien */
.alert-no-results h2, 
.alert-no-results p {
    text-align: center;
}

/* --- Estilos para la pestaña "Mis Compras" --- */

.compras-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    min-width: 1200px;
}

/* Buscador oscuro */
.search-box-compras {
    background-color: #1c1c1c; /* Gris oscuro para el fondo */
    border-radius: 8px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    width: 300px;
}

.search-box-compras input {
    background: transparent;
    border: none;
    color: white;
    width: 100%;
    outline: none;
    font-size: 14px;
}

.search-box-compras i {
    color: #888;
    font-size: 18px;
    margin-left: 10px;
}

/* Sección central (Candado) */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
}

.empty-icon {
    font-size: 120px;
    color: white;
    margin-bottom: 20px;
}

.empty-state h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 30px;
}

/* Botón Blanco redondo */
.btn-blanco {
    background-color: white;
    color: black;
    padding: 12px 40px;
    border-radius: 30px; /* Bordes bien redondeados */
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: background-color 0.3s;
}

.btn-blanco:hover {
    background-color: #e0e0e0;
}

.shop-icon {
  font-size: 78px;
}

.svgicons {
    font-size: 24px;
    margin-bottom: 15px;
     margin-top: 5px;
}
#uuid-20a0e6cf-d867-4bb8-b550-26e038578f3c {
    fill: white;
    margin-bottom: 15px;
    width: 24px;
    height: 24px;
    stroke-width: 1.5px;
    stroke: #fff;
    margin-top: 5px;
}

#uuid-1e12e0b2-2262-4af1-b6a6-84408c94d31a {
    fill: white;
    margin-bottom: 15px;
    width: 21px;
    height: 21px;
    stroke-width: 15px;
    stroke: #fff;
    margin-top: 5px;
}

#uuid-2ffb5ac5-3b4c-48d7-930c-1d09c18442e5
{
    fill: white;
    margin-bottom: 15px;
    width: 21px;
    height: 21px;
    stroke-width: 15px;
    stroke: #fff;
    margin-top: 5px;
}

#uuid-014e4cbf-e143-4299-a548-3051717189cb {
    fill: white;
    margin-bottom: 15px;
    width: 21px;
    height: 21px;
    stroke-width: 15px;
    stroke: #fff;
    margin-top: 5px;
}

.modal-bodys {
  padding: 20px;
  overflow-y: auto; /* Permite hacer scroll si son muchos filtros */
  max-height: 600px;
  max-width: 500px;
}

.filter-group {
  margin-bottom: 25px;
}

.filter-group h3 {
  font-size: 16px;
  color: #000;
  margin-bottom: 10px;
  padding-bottom: 5px;
}


/* Organiza los checkboxes en 3 columnas */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  color: #000;
}

.checkbox-grid-single {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #000;
}

.checkbox-grid label, .checkbox-grid-single label {
  font-size: 14px;
  display: flex;
  align-items: baseline;

  gap: 8px;
  cursor: pointer;
}

/* Fila para poner País y Tipo uno al lado del otro */
.filter-row {
  display: flex;
  gap: 20px;
}

.half-width {
  flex: 1;
}


.modal-footer2 {
     text-align: center;
    margin-top: 20px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    gap: 10PX;
}
.btn-outline {
    flex: 1;
    text-align: center;
    padding: 12px;
    border: 1px solid #2d3136;
    background: white;
    color: #2d3136;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
}

.btn-dark {
    flex: 1.5;
    padding: 12px;
    background: #2d3136;
    color: white;
    border: none;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
}

.form-group select {
    width: 100%;
    border: none;
    border-bottom: 1px solid #000;
    padding: 10px 0;
    font-size: 16px;
    background: transparent;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* AÑADE LA FLECHA PERSONALIZADA (SVG) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 14px;
}
.form-group input {
    width: 100%;
    border: none;
    border-bottom: 2px solid #000;
    padding: 10px 0;
    font-size: 16px;
    outline: none;
    background: transparent;
}

/* Estilo para los placeholders */
.form-group input::placeholder {
    color: #ccc;
    font-weight: 300;
}


.button-container {
    text-align: left;
    margin-top: 30px;
}

select option {
    background-color: #ffffff;
    color: #333;
    padding: 10px;
}

/* Elimina el borde azul al hacer foco en Chrome/Edge */
select:focus {
    outline: none;
    border-bottom: 2px solid#e60000;
}

.form-group select:focus, 
.form-group input:focus {
    outline: none;
    border-bottom: 2px solid #e60000 !important; /* Rojo de tu logo */
}

/* 2. Estilo de las opciones dentro del desplegable */
/* Nota: La mayoría de los navegadores no permiten cambiar el azul del hover, 
   pero podemos mejorar el aspecto general */
.form-group select option {
    background-color: #ffffff;
    color: #333;
    padding: 10px;
}

/* 3. Para navegadores modernos, podemos intentar forzar el color de énfasis */
.form-group select {
    accent-color: #e60000; /* Esto cambia radios, checkboxes y algunos elementos de UI a rojo */
}

/* 4. Quitar el resaltado azul claro que ponen algunos navegadores móviles */
select, input {
    -webkit-tap-highlight-color: rgba(179, 0, 0, 0.2);
}

/* Color de fondo de la opción seleccionada o resaltada (Hover) */
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #e60000 !important; /* Tu Rojo */
    color: white !important;
}

/* Estilo de la "caja" para que parezca tu línea minimalista */
.choices__inner {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid #000 !important;
    border-radius: 0 !important;
    padding: 5px 0 !important;
    min-height: auto !important;
}

/* Color cuando el select está abierto */
.is-focused .choices__inner {
    border-bottom: 2px solid#e60000 !important;
}

/* Quitar el borde azul por defecto de la librería */
.choices__list--dropdown {
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
}

.confirmar-card {
    max-width: 600px;
    padding: 40px 60px;
}

.title-with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}


.btn-outlinee {
    flex: 1;
    text-align: center;
    padding: 12px;
    border: 1px solid #ffffff;
    background: #000000;
    color: #ffffff;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
}

.billing-sidebar {
    position: fixed;
    top: 0;
    right: -500px; /* Oculto fuera de la pantalla */
    width: 450px;
    height: 100%;
    background-color: #2d3136; /* Color oscuro de tu diseño */
    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    transition: right 0.4s ease-in-out;
    z-index: 1000;
    padding: 40px;
    box-sizing: border-box;
    color: white;
    overflow-y: auto;
}

.billing-sidebar.active {
    right: 0; /* Entra a la pantalla */
}

.billing-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
}

.billing-header h2 {
    font-size: 22px;
    margin: 0;
    color: white;
}

.billing-header i {
    font-size: 24px;
}

/* Inputs estilo "línea" sobre fondo oscuro */
.form-group-dark {
    margin-bottom: 25px;
}

.form-group-dark label {
    display: block;
    font-size: 14px;
    color: #fff;
    margin-bottom: 8px;
}

.form-group-dark input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #888;
    color: white;
    padding: 10px 0;
    font-size: 16px;
    outline: none;
}

.form-group-dark input:focus {
    border-bottom-color: white;
}

.form-group-dark input::placeholder {
    color: #777;
}

/* Botones inferiores */
.billing-actions {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.btn-dark-save {
    background-color: black;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
}

.btn-light-cancel {
    background-color: white;
    color: black;
    border: none;
    padding: 15px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
}
.input-error {
    border-bottom: 2px solid #b30000 !important; /* Borde rojo */
}

.error-message {
    color: #b30000;
    font-size: 14px;
    margin-top: 5px;
    font-weight: 500;
    display: block; /* Para que baje a la siguiente línea */
}

.form-group-dark select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #888;
    color: white;
    padding: 10px 0;
    font-size: 16px;
    outline: none;
}

.btn-dark:hover { background: #1a1c1e; }
.btn-outline:hover { background: #f8f8f8; }

.reembolso-dark-container {
    background-color: #000000;
    color: #ffffff;
    max-width: 600px; /* Para que no se estire demasiado en PC */
    font-family: Arial, sans-serif; /* Cambia a la fuente de tu tienda */
}

/* Cabecera (Título y botón Editar) */
.reembolso-dark-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.reembolso-dark-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.btn-editar-texto {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.btn-editar-texto:hover {
    text-decoration: underline;
    color: #cccccc;
}

/* La tarjeta que agrupa los datos */
.datos-reembolso-card {
    border: 1px solid #333333; /* Borde gris oscuro */
    border-radius: 8px;
    background-color: #000000;
    margin-bottom: 30px;
}

.dato-fila {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-bottom: 1px solid #333333; /* Línea divisoria entre datos */
}

.dato-fila.sin-borde {
    border-bottom: none; /* Quitamos la línea al último elemento */
}

.dato-label {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.dato-valor {
    font-size: 1rem;
    color: #e0e0e0;
}

/* Botón inferior gigante y blanco */
.btn-solicitar-blanco {
    width: 100%;
    background-color: #ffffff;
    color: #000000;
    border: none;
    border-radius: 50px; /* Borde estilo pastilla/pill */
    padding: 16px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-solicitar-blanco:hover {
    background-color: #e5e5e5;
}

.reembolso-detalles-container {
    background-color: #000;
    color: #fff;
    padding: 40px;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    height: auto;
}

.titulo-principal {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 40px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.form-group-custom {
    margin-bottom: 30px;
}

.form-group-custom label {
    display: block;
    color: #ccc;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

/* Estilo de los inputs tipo línea */
.input-line {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #fff;
    color: #fff;
    padding: 10px 0;
    font-size: 16px;
    outline: none;
    appearance: none;
}

/* --- DROPDOWNS PERSONALIZADOS --- */
.custom-dropdown {
    position: relative;
    width: 100%;
}

.dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #fff;
    padding: 10px 0;
    cursor: pointer;
    font-size: 16px;
    color: #888;
}

.dropdown-list {
    position: relative; /* ¡Esto es lo que hace que empuje hacia abajo! */
    width: 100%;
    background-color: #000;
    border: 1px solid #fff;
    border-radius: 8px;
    padding: 15px;
    margin-top: 5px;
    z-index: 10;
    
    /* Borramos top y left porque ya no es absolute */
    /* Borramos max-height y overflow para que no haya NINGUNA barra de scroll */
}

.checkbox-label, .radio-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 15px;
}

.checkbox-label:last-child, .radio-label:last-child {
    margin-bottom: 0;
}

/* Cambiar color de checkbox y radio inputs */
input[type="checkbox"], input[type="radio"] {
    accent-color: #e60000; /* Color rojo al seleccionar */
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Textarea para "Otro" */
.textarea-custom {
    width: 100%;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 8px;
    color: #fff;
    padding: 15px;
    min-height: 120px;
    margin-bottom: 20px;
    outline: none;
    resize: none;
}

/* Texto de advertencia rojo */
.texto-informativo {
    font-size: 14px;
    line-height: 1.5;
    color: #ccc;
    margin-bottom: 30px;
}

.texto-informativo span.rojo {
    color: #e60000;
}

.mt-auto {
    margin-top: auto;
}

.ri-arrow-down-s-line {
   font-size: 30px;
}

.compras-tabs {
  display: flex;
  justify-content: center;
  gap: 40px;
  border-bottom: 1px solid #333;
  margin-top: 20px;
  padding-bottom: 10px;
}

.tab-btn {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 1rem;
}

.tab-btn.active {
  color: #fff;
  border-bottom: 2px solid #d32f2f;
  padding-bottom: 5px;
}

/* Contenedor principal de los pedidos */
.lista-compras {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Tarjeta individual de pedido */
.pedido-card {
  border-bottom: 1px solid #333;
  padding-bottom: 20px;
}

.pedido-fila {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

/* Textos dentro de la tarjeta */
.pedido-label-bold {
  font-weight: bold;
  color: white;
  font-size: 1.1rem;
}

.pedido-fecha-small {
  font-size: 0.8rem;
  color: #aaa;
  font-weight: normal;
  margin-left: 10px;
}

.pedido-valor {
  color: white;
  font-size: 1.1rem;
}

.pedido-estado-verde {
  color: #4CAF50;
  font-size: 1.1rem;
}

/* Botón/Fila para desplegar detalles */
.pedido-toggle-row {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  align-items: center;
}

.pedido-iconos {
  display: flex;
  gap: 15px;
  color: white;
  font-size: 1.2rem;
  align-items: center;
}

.icono-rotativo {
  transition: transform 0.3s ease;
}

/* Contenedor de la tabla de detalles (productos) */
.pedido-detalle-container {
  margin-top: 25px;
  padding-top: 20px;
}

.detalle-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  color: #aaa;
  font-size: 1rem;
}

.detalle-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  color: white;
  font-size: 1rem;
}

/* Columnas de la tabla de detalles */
.col-producto {
  flex: 2;
}

.col-cantidad {
  flex: 1;
  text-align: right;
  padding-right: 20px;
}

.col-precio {
  flex: 1;
  text-align: right;
}

.detalle-vacio {
  color: #aaa;
  font-size: 0.9rem;
  text-align: center;
}
/* --- ALINEACIÓN DE LOS CONTACTOS DEL FOOTER --- */
.enlace-contacto {
    display: flex;
    align-items: center;
    gap: 15px; /* Este es el espacio exacto entre el ícono rojo y tu texto */
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

.enlace-contacto:hover {
    opacity: 0.7;
    text-decoration: none;
    color: inherit;
}

/* Este truco hace que los textos queden perfectamente alineados hacia abajo */
.enlace-contacto i {
    font-size: 20px; /* Tamaño del ícono */
    width: 25px;    /* Un ancho fijo para el ícono */
    text-align: center;
}

.enlace-contacto span {
    white-space: nowrap; /* Obliga al texto a mantenerse en una sola línea */
}

.btn-whatsapp {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366; /* Verde oficial de WhatsApp */
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 35px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000; /* Asegura que esté por encima de TODO */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease; /* Animación suave */
}

/* Efecto al pasar el mouse por encima */
.btn-whatsapp:hover {
    background-color: #128c7e; /* Un verde un poco más oscuro */
    color: #FFF;
    transform: scale(1.1); /* Se agranda un poquito */
}

/* --- RESPONSIVE: Ajustes para Celulares --- */
@media (max-width: 768px) {
    .btn-whatsapp {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 30px;
    }
}
.password-wrapper {

display: flex;
}
/* Contenedor principal de la pestaña */
.config-container {
    max-width: 500px;
    color: #ffffff; /* Texto blanco por el fondo oscuro */
}

.config-container h2 {
    font-size: 24px;
    margin-bottom: 40px;
}

/* Estilo de los inputs minimalistas (solo línea abajo) */
.config-container .input-group {
    margin-bottom: 30px;
}

.config-container label {
    display: block;
    font-size: 14px;
    color: #cccccc;
    margin-bottom: 10px;
}

.config-container input[type="password"] {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #ffffff;
    color: #ffffff;
    padding: 10px 0;
    font-size: 16px;
    outline: none;
}

.config-container input[type="password"]:focus {
    border-bottom: 2px solid #ffffff; /* Se engrosa un poco al hacer clic */
}

.config-container input::placeholder {
    color: #666666;
}

/* Grilla 2x2 para los requisitos */
.config-password-requirements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    font-size: 12px;
    color: #aaaaaa;
    margin-bottom: 40px;
}

/* Botón blanco redondeado */
.btn-guardar-blanco {
    width: 100%;
    background-color: #ffffff;
    color: #000000;
    border: none;
    border-radius: 30px;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-bottom: 30px;
}

.btn-guardar-blanco:hover {
    background-color: #e6e6e6;
}

/* Link de eliminar cuenta en rojo */
.eliminar-cuenta-container {
    text-align: center;
}

.link-eliminar {
    color: #cc0000;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
}

.link-eliminar:hover {
    text-decoration: underline;
}

.input-group {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
}

.link-eliminar-btn {
    background: none;
    border: none;
    color: #cc0000;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    font-family: inherit;
}
.link-eliminar-btn:hover { text-decoration: underline; }

/* Diseño de la pantalla 2 */
.alerta-rosada {
    background-color: #e8baba; /* Color rosado de tu diseño */
    color: #9e4343; /* Texto rojo oscuro */
    padding: 15px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 30px;
}

.texto-advertencia {
    font-size: 15px;
    color: #ffffff;
    margin-bottom: 20px;
}

.lista-consecuencias {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-consecuencias li {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 20px;
}

.lista-consecuencias li svg {
    margin-right: 15px; /* Espacio entre el icono y el texto */
}

.btn-eliminar-rojo-texto {
    background: none;
    border: none;
    color: #cc0000;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    margin-right: 20px;
}

.btn-eliminar-rojo-texto:hover {
    text-decoration: underline;
}

.link-volver {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 14px;
}
.link-volver:hover {
    color: #fff;
}

/* Estilos específicos para igualar tu diseño */
    .direcciones-container {
        color: white;
        min-width: 1200px;
    }

    .titulo-direcciones {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 30px;
    }

    /* --- ESTADO VACÍO (Imagen 1) --- */
    .empty-state-direcciones {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        text-align: center;
    }

    .icono-casa-grande {
        font-size: 100px; /* Tamaño grande como en tu diseño */
        color: white;
        margin-bottom: 20px;
        line-height: 1;
    }

    .empty-state-direcciones h3 {
        font-size: 18px;
        font-weight: normal;
        margin-bottom: 30px;
    }

    /* --- ESTADO CON DIRECCIONES (Imagen 2) --- */
    .direccion-card-dark {
        border: 1px solid #333; /* Borde sutil gris oscuro */
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        position: relative;
    }

    .badge-rojo {
        background-color: #d32f2f;
        color: white;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
        display: inline-block;
        margin-bottom: 12px;
    }

    .btn-eliminar-texto {
        position: absolute;
        top: 20px;
        right: 20px;
        background: transparent;
        border: none;
        color: white;
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
    }

    .btn-eliminar-texto:hover {
        text-decoration: underline;
    }

    .direccion-calle {
        font-size: 18px;
        font-weight: bold;
        margin: 0 0 8px 0;
    }

    .direccion-detalle, .direccion-region {
        color: #888; /* Texto gris para los detalles */
        margin: 0 0 6px 0;
        font-size: 16px;
    }

    /* --- BOTÓN BLANCO --- */
    .btn-blanco-pill {
        background-color: white;
        color: black;
        border: none;
        border-radius: 30px;
        padding: 14px 0;
        width: 100%;
        max-width: 400px; /* Limita el ancho para que no se vea desproporcionado */
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        display: block;
        margin-top: 20px;
    }
    
    .btn-blanco-pill.center {
        margin-left: auto;
        margin-right: auto;
    }

    #vista-principal-direcciones {
        display: flex;
    min-width: 1680px;
    justify-content: center;
    height: 500px;
    }

    .input-lix {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #ffffff; /* La línea blanca abajo */
    color: #ffffff;
    padding: 10px 0;
    font-size: 16px;
    outline: none;
    transition: border-bottom-color 0.3s ease; /* Transición suave */
}

/* Opcional: Que la línea se ponga de tu color rojo cuando el usuario pincha para escribir */
.input-lix:focus {
    border-bottom: 1px solid #d32f2f; 
}
.menu-movil {
    display: none !important;
}
.img-movil {
    display: none;
}
.img-pc {
    display: block;
}
.desktop-only-icons {
   display: inline-flex; /* Cambiamos a flex para que reconozca el gap */
    align-items: center;
    gap: 35px;
}

@media (max-width: 768px) {

    .menu-movil {
        display: inline-block !important; /* o 'flex' dependiendo de cómo estén tus otros íconos */
    }

@media (min-width: 1024px) {
    body { zoom: 0.8; }
}



}

@media (max-width: 768px) {

    /* 1. Neutralizamos el flex rígido del container */

    .container {
        flex-wrap: wrap; /* ¡Clave! Permite que los elementos bajen a otra línea */
        padding: 10px 15px;
    }



    /* 2. Logo a la izquierda */

    .logo {
        flex: 1; /* Empuja el carrito hacia la derecha */
    }

    .logo img {
        height: 50px; /* Un poco más chico en móvil para que no estorbe */
    }



    /* 3. Acomodamos la fila inferior: Menú + Línea + Buscador */

    .mobile-search-row {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 15px; /* Separación con el logo de arriba */
        order: 3; /* Forzamos a que esta fila se vaya hasta abajo */
    }



    /* Reseteamos tu buscador de PC para que no ocupe el 50% */

    .search-container {
        flex-basis: auto; 
        max-width: 100%;
        margin: 0; /* Quitamos el margen lateral de PC */
        padding: 5px 10px;
        background-color: #1a1a1a; 
        border-radius: 6px;
        min-width: 300px;
    }

    

    .search-container input {
        font-size: 1rem; /* Letra un poco más chica en celular */
        padding: 5px;
        border: none;
    }



    /* Icono Hamburguesa y Línea */

    .menu-movil {
        display: block;
        font-size: 26px; 
        color: #fff; 
        text-decoration: none;
    }

    .header-divider {
        width: 1px;
        height: 22px;
        background-color: #555; 
    }





@media (max-width: 768px) {
    .img-pc {
        display: none !important;
    }

    .img-movil {
        display: block !important;
    }

    

    /* Ajuste extra por si el header en móvil es más pequeño/grande */

    .hero-carousel {
        height: calc(100vh - 80px); /* Ajusta este 80px a la medida exacta de tu header móvil si es necesario */

    }

}



@media (max-width: 768px) {

    

    /* --- 1. SECCIÓN IDENTIDAD (Pestañas, Imagen y Texto) --- */

    

    /* Hacemos que los botones de las pestañas se apilen o se acomoden bien */

    .nav-tabs-custom {

        display: flex;

        flex-direction: column; /* Apila los botones uno debajo del otro */

        gap: 10px;

        padding: 0 15px;

    }

    .nav-link-custom {

        width: 100%; /* Botones de lado a lado para ser fáciles de tocar */

        text-align: center;

        padding: 12px;

    }



    /* Rompemos el diseño de lado a lado para apilar la imagen arriba y el texto abajo */

    .contenido-flex {

        display: flex;

        flex-direction: column;

        gap: 20px; /* Espacio entre la foto y el texto */

    }

    

    .columna-imagen, .columna-texto {

        width: 100%;

        padding: 0 15px; /* Damos un pequeño margen para que no toque los bordes */

    }



    /* Ajustamos los textos para celular */

    .titulo-grande {

        font-size: 2rem; /* Achicamos el título */

        text-align: center;

    }

    .parrafo-cuerpo {

        font-size: 1rem;

        text-align: justify; /* O 'center' según prefieras el diseño */

    }

    .firma-contenedor {

        text-align: center;

        margin-top: 20px;

    }





    /* --- 2. SECCIÓN DESTACADOS (Productos) --- */

    

    .titulo-marcas {

        font-size: 1.8rem;

        text-align: center;

        margin-bottom: 20px;

    }

    

    .producto-card {

        max-width: 320px; /* Evita que la tarjeta sea gigante en el teléfono */

        margin: 0 auto 20px auto; /* Centra la tarjeta y da espacio abajo */

    }





    /* --- 3. SECCIÓN MARCAS (El slider) --- */

    

    .slider-container {

        padding: 10px 0;

    }

    .marca-item img {

        max-width: 80px; /* Achicamos los logos para que no se vean gigantescos y quepan más */

    }





    /* --- 4. SECCIÓN BENEFICIOS (Iconos del final) --- */

    

    .beneficio-card {

        display: flex;

        flex-direction: column;

        align-items: center; /* Centra el icono y el texto */

        text-align: center;

        padding: 15px;

        margin-bottom: 10px;
        justify-content: center;

    }

    

    .beneficio-icon {

        width: 50px; /* Iconos un poco más pequeños */

        margin-bottom: 15px;

    }

    

    .beneficio-text {

        font-size: 0.9rem;

    }

}



@media (max-width: 768px) {

    

    /* 1. MATAMOS LA ALTURA GIGANTE DE LA TARJETA */

    .card-dark {

        background-color: #333333 !important; 

        background-image: none !important;

        padding: 0 !important; 

        min-height: 0 !important; /* Esto elimina el espacio gris sobrante */

        height: auto !important;

        border-radius: 0 !important;

        display: block !important;

        position: relative;

    }



    /* 2. FORZAMOS EL ORDEN: TEXTO ARRIBA, FOTO ABAJO */

    .contenido-flex {

        display: flex !important;

        flex-direction: column-reverse !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        align-items: center;

    }



    /* 3. TEXTO (SECCIÓN SUPERIOR) */

    .columna-texto {
        padding: 40px 20px 30px 20px !important;
        display: block !important;
        min-width: 400px !important;
    }



    .titulo-grande {
        text-align: center !important;
        font-size: 2.2rem !important;
        color: #ffffff !important;

    }



    .parrafo-cuerpo {
        text-align: center !important;
        color: #e0e0e0 !important;

    }



    .firma-contenedor {
        text-align: right !important;
    }



    /* 4. IMAGEN DE BORDE A BORDE (SECCIÓN INFERIOR) */

    .columna-imagen {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        line-height: 0 !important;

        /* Ya no necesitamos el relative aquí si lo tiene la tarjeta */



    }



    .columna-imagen img.img-full {

        width: 100% !important;
        max-width: 100% !important; /* Obliga a la foto chiquita a estirarse */
        height: auto !important;
        display: block !important;
        border-radius: 0 !important;

    }



    /* 5. PUNTOS CENTRADOS FLOTANDO SOBRE LA IMAGEN */

    .puntos-rojos {

        position: absolute !important;
        bottom: 20px !important; /* Despega los puntos 20px desde el borde inferior de la tarjeta/foto */
        right: 0 !important;
        display: flex !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        z-index: 99 !important; /* ¡NÚMERO ALTO! Para que nada los tape */

    }

    }



    .puntos-rojos .dot {

        width: 12px !important;
        height: 12px !important;
        margin: 0 !important;
        background-color: rgba(255, 255, 255, 0.5) !important;

    }



    .puntos-rojos .dot.active {
        background-color: #d32f2f !important;

    }
    
.menu-lateral-overlay {
    display: none; 
    /* ... aquí van tus estilos de posición fija, z-index, etc ... */
}

/* 2. Cuando el JS agregue la clase "activo", se muestra */

/* =========================================
   1. ESCRITORIO (768px o más)
   Lo desaparecemos por completo.
   ========================================= */
@media (min-width: 768px) {
    #menuLateralFondo, 
    .menu-lateral-overlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        z-index: -9999 !important;
    }
}
/* =========================================
   2. MÓVIL (Menos de 768px)
   ========================================= */
@media (max-width: 767px) {
    
    /* === Fondo oscuro detrás del menú (Inactivo por defecto) === */
    .menu-lateral-overlay {
        display: block !important; /* Clave: Siempre existe en el DOM móvil */
        pointer-events: none;      /* Clave: No estorba los clics cuando está oculto */
        visibility: hidden;
        opacity: 0;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 9999;
        /* Suavizamos cómo aparece el fondo negro */
        transition: opacity 0.6s ease, visibility 0s linear 0.4s;
    }

    /* === Panel lateral del menú (Fuera de la pantalla por defecto) === */
   .menu-lateral-content {
        position: absolute;
        top: 0;
        left: -100%; /* Inicia escondido a la izquierda */
        width: 100%;
        max-width: 100%;
        height: 125vh;
        background-color: #000000;
        padding: 20px;
        overflow-y: auto;
        /* La magia: esto hace que el panel se deslice suavemente */
        transition: left 0.6s ease-in-out !important; 
    }

    /* === Clases para cuando el JS activa el menú === */
    .menu-lateral-overlay.activo {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important; /* Clave: Ya se puede clickear */
        transition: opacity 0.4s ease, visibility 0s linear 0s;
    }
   .menu-lateral-overlay.activo .menu-lateral-content {
        left: 0 !important; /* Entra a la pantalla */
    }
    /* === Cabecera del Menú === */
    .menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        color: white;
    }
    .menu-header h3 {
        font-size: 20px;
        font-weight: bold;
    }
    .btn-cerrar-menu {
        background: transparent;
        border: none;
        color: #ff0000;
        font-size: 30px;
        cursor: pointer;
    }

    /* === Lista y Tarjetas (Cards) === */
    .menu-categorias-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .cat-card-menu, .cat-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-color: #d11a1a;
        border-radius: 8px;
        padding: 16px 20px;
        color: white;
        text-decoration: none;
    }

    .cat-card-menu i, .cat-card i, .cat-card svg {
        font-size: 28px;
        margin-bottom: 8px;
        fill: white; /* Para que los SVG se vean blancos */
    }

    .cat-text h4, .cat-info h3 {
        margin: 0 0 4px 0;
        font-size: 16px;
        font-weight: 700;
    }
    
    .cat-text span, .cat-info span {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
    }

    .cat-card-menu.dark-card {
        background-color: #3b3f46;
    }

    .cat-card-menu:hover, .cat-card-menu:active, .cat-card:hover, .cat-card:active {
        filter: brightness(1.1);
        color: white;
    }
}
/* =========================================
   ESTILOS DEL FOOTER EXCLUSIVOS PARA MÓVIL
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. Fondo del Webpay (Gris muy oscuro) */
    .footer-getnet {
        background-color: #1e1e1e !important;
        padding: 20px 15px;
        text-align: center;
    }

    /* 2. Primera barra roja */
    .footer-red-bar {
        background-color: #cc0000 !important;
        height: 14px;
        width: 100%;
    }

    /* 3. Contenedor principal de Contactos (Fondo Negro) */
    .footer-content {
        background-color: #000000 !important;
        padding: 0 !important; /* Quitamos padding para controlar las franjas hijas */
    }
    
    .row {
        display: flex;
        flex-direction: column;
    }


    /* Padding de la fila de contactos */
    .footer-content .row {
        margin: 0;
        padding: 40px 20px 20px 20px;
        
    }
     .footer-container {
        display: flex;
        flex-direction: column;
        
    }



    /* Título de la sección */
    .footer-title {
        color: #ffffff !important;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 25px;
    }

    /* Convertir los iconos rojos a blancos */
    .contact-item i.icon-red {
        font-size: 18px;
        margin-right: 15px;
    }

    /* Alinear iconos y texto correctamente */
    .contact-item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }
    
    .contact-item p {
        color: #e0e0e0 !important;
        margin: 0;
        font-size: 15px;
    }

    /* 4. Transformar el bloque del "footer-bottom" */
    .footer-bottom {
        display: flex;
        flex-direction: column;
        padding: 0 !important; /* Quitar padding para que las franjas lleguen a los bordes */
        align-items: center;
    }

    /* 5. El logo B&O en franja blanca + Segunda línea roja */
    .footer-logo-byo {
        width: 100%; 
        padding: 40px 0; /* Mucho espacio arriba y abajo como en la foto */
            border-top: 1px solid rgb(51, 51, 51);
        box-sizing: border-box;
        object-fit: contain;
        height: auto;
    }

    /* 6. Franja del Copyright (Gris oscuro final) */
    .copyright-text {
        color: #777777 !important;
        padding: 30px 20px;
        margin: 0;
        font-size: 13px;
        text-align: left !important; /* Alinear a la izquierda como en la imagen */
        line-height: 1.6;
    }
}

@media (max-width: 767px) {
    /* 1. Modal a pantalla completa (Full Screen) */
    #modalUbicacion .modal-dialog {
        margin: 0;
        display: block; /* Quitamos el flex-end para que no se quede anclado abajo */
        width: 100%;
        height: 100vh; /* ¡Esto es lo que lo hace pantalla completa! */
        max-width: none;
    }

    /* 2. El fondo blanco ocupa todo y le quitamos los bordes curvos */
    #modalUbicacion .modal-content {
        height: 130vh; 
        border-radius: 0 !important; 
        border: none;
        padding: 40px 20px !important; /* Más espacio arriba para que respire */
        width:100%;
    }

    /* 3. Animación: Sube desde el fondo hasta cubrir toda la pantalla */
    #modalUbicacion.fade .modal-dialog {
        transform: translateY(100%); 
        transition: transform 0.3s ease-out; 
    }
    
    #modalUbicacion.show .modal-dialog {
        transform: translateY(0); 
    }

    /* 4. Posición de la X roja gigante como en tu diseño */
    #modalUbicacion .btn-close-red {
        position: absolute;
        top: 25px;
        right: 20px;
        font-size: 32px; /* Más grande, como en tu foto */
        z-index: 10;
    }
    
    /* Ajuste para que el título no choque con la X */
    #modalUbicacion .justify-content-between {
        padding-right: 30px; 
    }
}

@media (max-width: 767px) {
    /* 1. Creamos la animación de apertura (baja desde arriba) */
    @keyframes deslizarDesdeArriba {
        from { transform: translateY(-100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    
    @keyframes bajarLogin {
        from { transform: translateY(0); }
        to { transform: translateY(100%); }
    }

    /* 2. El OVERLAY se convierte en la pantalla blanca Full Screen */
    #loginModal.modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 130vh; /* Cubre todo el alto */
        background-color: #ffffff !important; /* Fondo blanco */
        z-index: 9999;
        
        /* Disparamos la animación cuando el JS lo muestre */
        animation: deslizarDesdeArriba 0.3s ease-out forwards;
        
        /* Preparamos para el cierre suave con JS */
        transition: transform 0.3s ease-in, opacity 0.3s ease-in;
    }
    #loginModal.modal-overlay.cerrando {
        animation: bajarLogin 0.3s ease-in forwards !important;
    }
    #loginModal.modal-overlay:not([style*="display: none"]) {
        display: flex !important;
        justify-content: center;
        align-items: flex-start;
    }

    /* 3. Ajustamos el CONTENIDO para que no tenga bordes ni sombras */
    #loginModal .modal-content {
        width: 100%;
        height: 130vh;
        max-width: none;
        border-radius: 0 !important; /* Sin bordes curvos */
        border: none;
        box-shadow: none;
        /* Padding superior generoso para alinear con el header del otro modal */
        padding: 50px 25px 20px 25px !important; 
        background-color: #ffffff;
        position: relative;
    }

    /* 4. La "X" gigante roja arriba a la derecha */
    #loginModal .close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 38px;
        color: #cc0000; /* El rojo de tu marca */
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
        z-index: 10;
    }
}

@media (max-width: 767px) {
    /* Animación de Entrada (Sube) */
    @keyframes subirModal {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* Animación de Salida (Baja) */
    @keyframes bajarModal {
        from { transform: translateY(0); }
        to { transform: translateY(100%); }
    }

    /* Aplicamos el diseño y la animación a AMBOS overlays */
    #loginModal.modal-overlay, 
    #registerModal.modal-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 130vh;
        background-color: #ffffff !important;
        z-index: 9999;
        animation: subirModal 0.3s ease-out forwards;
    }

    /* Clase especial que activaremos con JS para cerrar cualquiera de los dos */
    #loginModal.modal-overlay.cerrando, 
    #registerModal.modal-overlay.cerrando {
        animation: bajarModal 0.3s ease-in forwards !important;
    }

    /* El truco de Flexbox para ambos */
    #loginModal.modal-overlay:not([style*="display: none"]),
    #registerModal.modal-overlay:not([style*="display: none"]) {
        display: flex !important;
        justify-content: center;
        align-items: flex-start;
    }

    /* El contenedor blanco adaptado para scroll */
    #loginModal .modal-content,
    #registerModal .modal-content {
        width: 100%; 
        height: 130vh;
        border-radius: 0 !important;
        padding: 50px 25px 30px 25px !important;
        background-color: transparent;
        overflow-y: auto; /* Permite deslizar hacia abajo si el formulario es muy largo */
        position: relative;
    }

    /* La "X" gigante para ambos */
    #loginModal .close-btn,
    #registerModal .close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 38px;
        color: #cc0000;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
        z-index: 10;
    }
    .scrollable-modal {
    max-height: 100%;
    overflow-y: auto;
}
}

@media (max-width: 767px) {
    /* Animación de Entrada (Sube) */
    @keyframes subirModal {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* Animación de Salida (Baja) */
    @keyframes bajarModal {
        from { transform: translateY(0); }
        to { transform: translateY(100%); }
    }

    /* 1. OVERLAYS: Login, Registro y Contacto */
    #loginModal.modal-overlay, 
    #registerModal.modal-overlay,
    #contactModal.modal-overlay,
    #filterModal.modal-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 130vh;
        background-color: #ffffff !important;
        z-index: 9999;
        animation: subirModal 0.3s ease-out forwards;
    }

    /* Clase para la animación de cierre */
    #loginModal.modal-overlay.cerrando, 
    #registerModal.modal-overlay.cerrando,
    #contactModal.modal-overlay.cerrando,
    #filterModal.modal-overlay.cerrando {
        animation: bajarModal 0.3s ease-in forwards !important;
    }

    /* Truco de Flexbox para los 3 */
    #loginModal.modal-overlay:not([style*="display: none"]),
    #registerModal.modal-overlay:not([style*="display: none"]),
    #contactModal.modal-overlay:not([style*="display: none"]),
    #filterModal.modal-overlay:not([style*="display: none"]){
        display: flex !important;
        justify-content: center;
        align-items: flex-start;
    }

    /* 2. CAJA INTERIOR: Adaptamos .modal-content y .contact-box */
    #loginModal .modal-content,
    #registerModal .modal-content,
    #contactModal .contact-box,
    #filterModal .contact-box {
        width: 100%; 
        height: 130vh;
        border-radius: 0 !important;
        padding: 50px 25px 30px 25px !important;
        background-color: transparent;
        overflow-y: auto; /* Por si el contenido es largo */
        position: relative;
        box-shadow: none; /* Quitamos sombras si es que tenían */
    }

    /* 3. LA "X" GIGANTE: Para los 3 */
    #loginModal .close-btn,
    #registerModal .close-btn,
    #contactModal .close-btn,
    #filterModal .close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 38px;
        color: #cc0000;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
        z-index: 10;
    }
    #filterModal .modal-bodys {
      max-height: 100% !important ; 
}
}

/* =========================================
   DISEÑO EXCLUSIVO PARA MÓVILES (hasta 768px)
   No afecta a la versión de escritorio
   ========================================= */

@media screen and (max-width: 768px) {
    
    /* Fondo general de la página */
    .cart-page-white {
        background-color: #f2f2f2;
        padding: 20px 15px;
        min-height: 100vh;
    }

    /* Contenedor principal en columna */
    .cart-page-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        padding: 20px;
    }

    /* Título superior centrado */
    .cart-title {
        text-align: center;
        font-size: 24px;
        margin: 0 0 15px 0;
    }

    .item-count {
        font-size: 1rem;
        font-weight: normal;
    }

    /* Tarjetas blancas con bordes redondeados */
    .cart-card, .summary-card {
        background-color: #ffffff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        min-width: 370px; 
    }

    /* Cabecera de vendedor */
    .vendor-header {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: bold;
        font-size: 0.95rem;
        margin-bottom: 10px;
    }

    .vendor-logo {
        height: 20px;
        object-fit: contain;
    }

    /* Checkbox de seleccionar todos */
    .select-all {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.75rem;
        padding-bottom: 15px;
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 15px;
    }

    /* Estructura del producto usando Grid (Imagen Slice 63) */
    .cart-item {
        display: grid;
        grid-template-columns: auto auto 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas: 
            "check img details price"
            "check img details qty";
        align-items: center;
        column-gap: 12px;
        padding: 15px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .cart-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* Asignación de áreas en la grilla */
    .item-check { grid-area: check; }
    
    .item-image { grid-area: img; }
    .item-image img {
        width: 50px;
        height: 50px;
        object-fit: contain;
    }

    .item-details { 
        grid-area: details;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .item-name {
        font-size: 0.8rem;
        font-weight: bold;
    }

    .item-brand {
        font-size: 0.65rem;
        color: #888;
    }

    .item-price {
        grid-area: price;
        text-align: right;
        font-size: 0.85rem;
        font-weight: bold;
        color: #cc0000;
        margin-bottom: 5px;
    }

    .quantity-selector {
        grid-area: qty;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    /* Ajustes específicos de los botones del carrito */
    .qty-btn {
        background-color: #333840;
        color: white;
        border: none;
        border-radius: 4px;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .qty-num {
        font-size: 0.85rem;
        font-weight: bold;
    }

    /* Tarjeta de resumen */
    .summary-card h3 {
        display: none;
    }

    .summary-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.95rem;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .summary-total {
        display: flex;
        justify-content: space-between;
        font-size: 1rem;
        font-weight: bold;
        margin-top: 25px;
        margin-bottom: 20px;
    }

    .btn-continue .roser {
        display: block;
        background-color: #333840;
        color: #ffffff;
        text-align: center;
        border-radius: 30px;
        text-decoration: none;
        font-weight: bold;
        font-size: 20px;
    }
      
  .product-detail-container {
        padding: 15px;
    }

    /* Ocultar las migas de pan (breadcrumbs) como en la imagen */
    .breadcrumbs {
        display: none;
    }

    /* 2. MAGIA DE GRID: Reordenando el HTML sin tocarlo */
    .product-grid {
        display: grid;
        grid-template-columns: 1fr auto;
        row-gap: 12px;
    }

    /* Rompemos los contenedores padre para poder reubicar a sus hijos directamente en la grilla */
    .product-images, .product-info, .price-section {
        display: contents;
    }

    /* -- Orden 1: Título -- */
    .product-title {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: 1.8rem;
        font-weight: 300;
        margin: 0;
        color: #ffffff;
    }

    /* -- Orden 2: Vendedor y Estrellas -- */
    .vendor-badge {
        grid-column: 1 / 2;
        grid-row: 2;
        font-size: 0.9rem;
        align-self: center;
    }
    .vendor-badge strong {
        color: #cc0000;
    }

    .product-info > .valoracion-container {
        grid-column: 2 / 3;
        grid-row: 2;
        justify-self: end;
        align-self: center;
        color: #cc0000;
        display: flex;
        gap: 3px;
        font-size: 0.9rem;
    }

    /* -- Orden 3: Imagen Principal -- */
    .main-image {
        grid-column: 1 / -1;
        grid-row: 3;
        background-color: #ffffff;
        border-radius: 12px;
        padding: 30px 20px;
        text-align: center;
        position: relative;
    }
    .main-image img {
        width: 100%;
        max-height: 250px;
        object-fit: contain;
    }

    /* -- Orden 4: Precio (Izquierda) y Miniaturas (Derecha) -- */
    .price {
        grid-column: 1 / 2;
        grid-row: 4;
        color: #cc0000;
        font-size: 1.8rem;
        font-weight: bold;
        margin: 0;
        align-self: center;
    }

    .thumbnail-list {
        grid-column: 2 / 3;
        grid-row: 4;
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        align-items: center;
        flex-direction: row;
    }
    .thumbnail-list img {
        width: 45px;
        height: 45px;
        background-color: #ccc; /* Fondo gris como en la imagen */
        border-radius: 4px;
        object-fit: contain;
        padding: 2px;
    }
    .thumbnail-list img.active {
        border: 2px solid #cc0000;
        background-color: #ffffff;
    }

    /* -- Orden 5: Cantidad y Botón Agregar -- */
    .add-to-cart-box {
        grid-column: 1 / -1;
        grid-row: 5;
    }
    
    .btn-transition-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .quantity-selector {
        display: inline-flex;
        align-items: center;
        gap: 15px;
        align-self: center;
        justify-content: center;
    }
    .qty-btn {
        background-color: #333333;
        color: #ffffff;
        border: none;
        width: 30px;
        height: 30px;
        border-radius: 6px;
        font-size: 1.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .qty-num {
        font-size: 1.2rem;
        font-weight: bold;
    }

    /* Botón blanco grande */
    .btn-agregar {
        background-color: #ffffff;
        color: #000000;
        border: none;
        width: 100%;
        padding: 15px;
        border-radius: 30px;
        font-size: 1.2rem;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .btn-agregar i {
        display: none; /* Ocultamos el icono para que se vea como una cápsula limpia */
    }

    /* -- Orden 6: Iconos de Acción (Corazón, Compartir, Guardar) -- */
    .action-icons {
        grid-column: 1 / -1;
        grid-row: 6;
        display: flex;
        justify-content: center;
        gap: 40px;
        padding-bottom: 25px;
        border-bottom: 1px solid #333333;
        margin-left: 0;
    }
    .action-icons i {
        font-size: 1.5rem;
        color: #ffffff;
    }

    /* 3. SECCIÓN DEL MEDIO (Acordeones simulados) */
    .middle-section {
        margin-top: 15px;
        grid-column: 1 / -1; /* ¡ESTO ES LO QUE FALTA! Obliga a usar todo el ancho de la pantalla */
        display:flex;
        margin-left: 0;
        flex-direction: column;
        gap: 40px;
    }

    /* Estructura base para que parezcan desplegables cerrados */
    .description-box p, 
    .spec-row, 
    .reviews-section .add-review-box 
     {
        display: none !important; /* Ocultamos el contenido como en tu imagen */
    }

   /* Flechas hacia abajo puras en CSS (ESTO LO DEJAS EXACTAMENTE IGUAL) */
    .description-box h3::after, 
    .reviews-section .titulo-y-promedio h3::after,
    .specs-table::after {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        border-right: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        transform: rotate(45deg);
    }
.comentarios
 {
     margin-left: 0;
}

/* 1. Mantenemos TU flecha intacta (como la tenías al principio) */
    .specs-table::after {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        border-right: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        transform: rotate(45deg);
        transition: transform 0.3s ease; /* Solo le agregamos esto para que gire suave */
    }

    /* 2. Tu contenedor vuelve a ser FLEX, pero agregamos flex-wrap */
    .specs-table {
    position: relative;
    display: flex !important;
    flex-wrap: wrap; 
    justify-content: space-between;
    align-items: center; 
    /* Cambié #0000 (transparente) por un gris oscuro para que se note la línea divisoria */
    border-bottom: 1px solid #333333; 
    padding: 15px 0;
    cursor: pointer;
    z-index: 10;
    width: 100%; 
    grid-column: 1 / -1; /* Añade esta línea para liberarla de la columna */
    
    /* --- LÍNEAS NUEVAS --- */
    width: 100%; /* Obliga al contenedor a usar todo el espacio */
    color: #ffffff; /* Asegura que la palabra "Detalles" sea blanca */
    background-color: #000000; /* Fondo negro base (opcional, ajusta según tu sitio) */
}

    /* 3. Tu título */
    .specs-table::before {
        content: 'Detalles';
        display: block;
        font-size: 1.1rem;
        font-weight: bold;
    }

    /* --- LÓGICA DE LAS FILAS --- */

    /* Ocultas por defecto */
    .specs-table .spec-row {
        display: none !important; 
    }

    /* Cuando se abre la tabla */
    .specs-table.open .spec-row {
        display: flex !important;
        width: 100% !important; /* Fuerza a que salte a la línea de abajo */
        justify-content: space-between;
        padding: 12px 15px;
        margin-top: 5px;
        order: 3; /* MAGIA: Fuerza a que las filas vayan DESPUÉS de la flecha */
    }

    /* Gira la flecha cuando se abre */
    .specs-table.open::after {
        transform: rotate(225deg) !important;
    }

    /* Colores estilo cebra */
    .specs-table.open .spec-row:nth-of-type(odd) {
        background-color: #1a1a1a !important;
    }

    .specs-table.open .spec-row:nth-of-type(even) {
        background-color: #0d0d0d !important;
    }

    /* Textos internos */
    .spec-label { font-weight: bold; color: #fff; }
    .spec-value { font-weight: normal; color: #bbb; text-align: left; }

  /* =========================================
   ESTRUCTURA DE DESCRIPCIÓN Y COMENTARIOS
========================================= */

/* 1. Obligamos a los contenedores a usar el 100% de la pantalla (Igual que Detalles) */
.description-box,
.reviews-section {
    width: 100%;
    grid-column: 1 / -1; /* Rompe la columna y ocupa todo el ancho */
    cursor: pointer; /* Manito para indicar que es clickeable */
}

/* 2. El título y su línea separadora (manteniendo tu diseño original) */
.description-box h3, 
.reviews-section .titulo-y-promedio h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0;
    padding: 15px 0;
    border-bottom: 1px solid #333333;
    color: #ffffff;
    width: 100%;
}

/* 3. La Flecha (Igual a Detalles, le agregamos transition) */
.description-box h3::after, 
.reviews-section .titulo-y-promedio h3::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
    transition: transform 0.3s ease; /* Giro suave */
}

/* =========================================
   LÓGICA DE APERTURA (Cuando Javascript agrega la clase .open)
========================================= */

/* 4. Gira la flecha cuando se abre */
.description-box.open h3::after, 
.reviews-section.open .titulo-y-promedio h3::after {
    transform: rotate(225deg) !important;
}

/* 5. Muestra el contenido oculto (Forzamos la aparición con !important para vencer tu display: none original) */
.description-box.open p, 
.reviews-section.open .add-review-box, 
.reviews-section.open .comentarios {
    display: block !important;
    width: 100%;
    padding: 15px 0; /* Respiro entre el título y el texto */
    color: #bbb; /* Color gris claro para el texto descriptivo */
    line-height: 1.5;
}

/* (Opcional) Las estrellas de comentarios siguen ocultas hasta que las necesites */
.titulo-y-promedio {    
    flex-direction: column;
    
}

    /* 4. PRODUCTOS RELACIONADOS */
    /* 4. PRODUCTOS RELACIONADOS */
.bottom-section {
    margin-top: 30px;
    grid-column: 1 / -1; /* Para que el carrusel de productos tenga espacio de lado a lado */
    width: 100%;
    margin-left: 0;
}
    .related-products h3 {
        font-size: 1.1rem;
        font-weight: bold;
        margin-bottom: 15px;
    }
    .related-grid {
        display: flex;
        overflow-x: auto; /* Scroll horizontal suave */
        gap: 15px;
        padding-bottom: 20px;
        scrollbar-width: none; /* Oculta la barra en Firefox */
    }
    .related-grid::-webkit-scrollbar {
        display: none; /* Oculta la barra en Chrome/Safari */
    }

    .related-card {
        flex: 0 0 140px; /* Ancho fijo para cada tarjeta */
        text-align: center;
        display: flex;
        flex-direction: column;
    }
    .related-card img {
        width: 100%;
        height: 140px;
        background-color: #ffffff;
        border-radius: 8px;
        object-fit: contain;
        margin-bottom: 12px;
    }
    .related-card p {
        font-size: 0.9rem;
        font-weight: bold;
        margin: 0 0 5px 0;
        color: #ffffff;
    }
    .related-card .price-red {
        color: #cc0000;
        font-size: 1.1rem;
        font-weight: bold;
        margin-bottom: 12px;
    }
    .related-card .btn-sm-white {
        text-decoration: none;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: bold;
        margin-top: auto;
    }  
    .billing-sidebar {
    width:100%;
}
.form-grid {
    display: flex;
    flex-direction: column;
    gap:0;
}
    
.direccion-card-dark {
    width: fit-content;
}

#vista-principal-direcciones {
    min-width: 100%;
}

.dashboard-menu {
    display:none;
}

.data-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
}
}