/* ==========================================================================
   ESTILOS GENERALES - TIENDA E-COMMERCE ESTILO WOOVINA DEMO 32
   ========================================================================== */

:root {
    --color-primario: #f59e0b;       /* Amarillo dorado característico de WooVina */
    --color-primario-hover: #d97706;
    --color-oscuro: #0f172a;         /* Azul marino muy oscuro / elegante */
    --color-oscuro-suave: #1e293b;
    --color-acento: #2563eb;         /* Azul de acento */
    --color-texto: #334155;          /* Gris oscuro para textos */
    --color-texto-suave: #64748b;
    --color-borde: #e2e8f0;
    --color-fondo: #f8fafc;
    --color-blanco: #ffffff;
    --color-verde: #10b981;
    --color-rojo: #ef4444;
    --radio-borde: 8px;
    --sombra-suave: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --sombra-tarjeta: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07);
    --transicion: all 0.25s ease-in-out;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transicion);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.contenedor {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   TOPBAR SUPERIOR
   ========================================================================== */
.topbar {
    background-color: var(--color-oscuro);
    color: #94a3b8;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar-contenido {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
}

.topbar-izq {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.topbar-izq span i {
    color: var(--color-primario);
    margin-right: 4px;
}

.topbar-promo-pill {
    background: rgba(225, 29, 72, 0.22);
    border: 1px solid rgba(251, 113, 133, 0.45);
    color: #fff1f2 !important;
    padding: 2px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: var(--transicion);
}

.topbar-promo-pill i {
    color: #fda4af;
}

.topbar-promo-pill:hover {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: #ffffff !important;
}

.topbar-promo-pill:hover i {
    color: #ffffff;
}

.topbar-der {
    display: flex;
    gap: 16px;
    align-items: center;
}

.topbar-der a {
    color: #cbd5e1;
}

.topbar-der a:hover {
    color: var(--color-primario);
}

.enlace-admin {
    background: #dc2626;
    color: #fff !important;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

/* ==========================================================================
   HEADER PRINCIPAL
   ========================================================================== */
.header-principal {
    background-color: var(--color-oscuro-suave);
    padding: 20px 0;
    color: var(--color-blanco);
}

.header-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.logo-box .logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-icono {
    background-color: var(--color-primario);
    color: var(--color-oscuro);
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.logo-texto {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #ffffff;
}

.logo-texto span {
    color: var(--color-primario);
}

/* Buscador Central */
.buscador-box {
    flex: 1;
    max-width: 620px;
}

.buscador-form {
    display: flex;
    background-color: var(--color-blanco);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.buscador-cat {
    border-right: 1px solid var(--color-borde);
    background-color: #f1f5f9;
}

.buscador-cat select {
    border: none;
    background: transparent;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--color-texto);
    cursor: pointer;
    outline: none;
}

.buscador-form input {
    flex: 1;
    border: none;
    padding: 12px 18px;
    font-size: 14px;
    outline: none;
    color: var(--color-oscuro);
}

.buscador-form button {
    background-color: var(--color-primario);
    border: none;
    color: var(--color-oscuro);
    padding: 0 24px;
    font-size: 16px;
    cursor: pointer;
    transition: var(--transicion);
}

.buscador-form button:hover {
    background-color: var(--color-primario-hover);
}

/* Acciones del Header */
.acciones-box {
    display: flex;
    align-items: center;
    gap: 24px;
}

.accion-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.soporte-tel {
    color: #94a3b8;
}

.soporte-tel small {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
}

.soporte-tel strong {
    color: #fff;
    font-size: 14px;
}

.icono-grande {
    font-size: 26px;
    color: var(--color-primario);
}

.carrito-btn {
    background-color: rgba(255, 255, 255, 0.08);
    padding: 8px 16px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.carrito-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.icono-carrito-wrap {
    position: relative;
}

.badge-contador {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--color-rojo);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carrito-textos small {
    display: block;
    font-size: 11px;
    color: #94a3b8;
}

.carrito-textos strong {
    color: var(--color-primario);
    font-size: 14px;
}

/* ==========================================================================
   BARRA DE NAVEGACIÓN
   ========================================================================== */
.barra-navegacion {
    background-color: var(--color-oscuro);
    border-bottom: 2px solid var(--color-primario);
}

.nav-flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    position: relative;
}

.menu-categorias-dropdown {
    position: relative;
    width: 260px;
}

.btn-categorias {
    background-color: var(--color-primario);
    color: var(--color-oscuro);
    border: none;
    width: 100%;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.lista-categorias-drop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--color-blanco);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    z-index: 100;
    border: 1px solid var(--color-borde);
    border-top: none;
}

.menu-categorias-dropdown:hover .lista-categorias-drop {
    display: block;
}

.lista-categorias-drop ul li a {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    color: var(--color-texto);
    font-size: 14px;
    border-bottom: 1px solid #f1f5f9;
}

.lista-categorias-drop ul li a:hover {
    background-color: #f8fafc;
    color: var(--color-primario-hover);
    padding-left: 22px;
}

.lista-categorias-drop ul li a i {
    width: 24px;
    color: var(--color-texto-suave);
}

.conteo-cat {
    margin-left: auto;
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
}

.menu-principal {
    display: flex;
    gap: 4px;
}

.menu-principal li a {
    display: inline-block;
    padding: 14px 18px;
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 500;
}

.menu-principal li a:hover,
.menu-principal li a.activo {
    color: var(--color-primario);
}

.nav-oferta-texto {
    color: #cbd5e1;
    font-size: 13px;
}

.nav-oferta-texto strong {
    color: var(--color-primario);
}

.logo-img-principal {
    transition: transform 0.25s ease, filter 0.25s ease;
}

.logo-box .logo:hover .logo-img-principal {
    transform: scale(1.03);
}

/* ==========================================================================
   TEMAS DE APARIENCIA PARA RESALTAR EL LOGOTIPO (4 OPCIONES)
   ========================================================================== */

/* OPCIÓN 1: IDENTIDAD PERIQUITA LUMINOSO (Blanco + Rojo y Azul del Logo) */
body.tema-periquita_claro {
    --color-primario: #e11d48;
    --color-primario-hover: #be123c;
    --color-oscuro: #0f1f40;
    --color-oscuro-suave: #153568;
}

body.tema-periquita_claro .topbar {
    background-color: #0f1f40;
    color: #cbd5e1;
}

body.tema-periquita_claro .header-principal {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #0f1f40;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 4px 18px rgba(15, 31, 64, 0.06);
    padding: 16px 0;
}

body.tema-periquita_claro .logo-texto {
    color: #153568;
}

body.tema-periquita_claro .buscador-form {
    border: 2px solid #cbd5e1;
    box-shadow: 0 3px 12px rgba(21, 53, 104, 0.07);
}

body.tema-periquita_claro .buscador-form:focus-within {
    border-color: #e11d48;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.15);
}

body.tema-periquita_claro .buscador-form button {
    background-color: #e11d48;
    color: #ffffff;
}

body.tema-periquita_claro .buscador-form button:hover {
    background-color: #be123c;
}

body.tema-periquita_claro .soporte-tel {
    color: #64748b;
}

body.tema-periquita_claro .soporte-tel strong {
    color: #0f1f40;
}

body.tema-periquita_claro .carrito-btn {
    background-color: #f8fafc;
    border: 1.5px solid #cbd5e1;
    color: #0f1f40;
}

body.tema-periquita_claro .carrito-btn:hover {
    background-color: #fff1f2;
    border-color: #fda4af;
}

body.tema-periquita_claro .carrito-textos small {
    color: #64748b;
}

body.tema-periquita_claro .carrito-textos strong {
    color: #e11d48;
}

body.tema-periquita_claro .barra-navegacion {
    background-color: #153568;
    border-bottom: 3px solid #e11d48;
}

body.tema-periquita_claro .btn-categorias {
    background-color: #e11d48;
    color: #ffffff;
}

/* OPCIÓN 2: CÁPSULA / INSIGNIA FLOTANTE SOBRE HEADER OSCURO */
body.tema-capsula_insignia .header-principal .logo-box .logo {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 8px 22px;
    border-radius: 50px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 0 2px rgba(245, 158, 11, 0.85);
}

/* OPCIÓN 3: HEADER OSCURO + LETRAS BLANCAS Y HALO LUMINOSO */
body.tema-oscuro_halo .header-principal .logo-img-principal {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

/* OPCIÓN 4: HEADER BLANCO LUMINOSO + DORADO CLÁSICO WOOVINA */
body.tema-claro_dorado .header-principal {
    background: #ffffff;
    color: #0f172a;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
    padding: 16px 0;
}

body.tema-claro_dorado .logo-texto {
    color: #0f172a;
}

body.tema-claro_dorado .buscador-form {
    border: 2px solid #cbd5e1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

body.tema-claro_dorado .buscador-form:focus-within {
    border-color: var(--color-primario);
}

body.tema-claro_dorado .soporte-tel {
    color: #64748b;
}

body.tema-claro_dorado .soporte-tel strong {
    color: #0f172a;
}

body.tema-claro_dorado .carrito-btn {
    background-color: #f8fafc;
    border: 1.5px solid #cbd5e1;
    color: #0f172a;
}

body.tema-claro_dorado .carrito-textos small {
    color: #64748b;
}

body.tema-claro_dorado .carrito-textos strong {
    color: #d97706;
}

/* ==========================================================================
   HERO SLIDER Y BANNERS LATERALES (WOOVINA DEMO 32)
   ========================================================================== */
.seccion-hero {
    padding: 24px 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.slider-contenedor {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    min-height: 400px;
    box-shadow: var(--sombra-tarjeta);
}

.slider-slides {
    position: relative;
    height: 100%;
}

.slide {
    display: none;
    height: 100%;
    padding: 40px;
    color: #fff;
    align-items: center;
    justify-content: space-between;
}

.slide.activo {
    display: flex;
}

.slide-contenido {
    max-width: 55%;
    z-index: 2;
}

.slide-etiqueta {
    display: inline-block;
    background-color: var(--color-primario);
    color: var(--color-oscuro);
    font-weight: 700;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.slide-contenido h2 {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 12px;
    font-weight: 800;
}

.slide-contenido p {
    color: #94a3b8;
    font-size: 15px;
    margin-bottom: 16px;
}

.slide-precios {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 20px;
}

.precio-desde {
    color: #cbd5e1;
    font-size: 14px;
}

.precio-destacado {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-primario);
}

.slide-imagen {
    max-width: 40%;
    z-index: 2;
}

.slide-imagen img {
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transicion);
    z-index: 5;
}

.slider-btn:hover {
    background: var(--color-primario);
    color: var(--color-oscuro);
}

.slider-btn.prev { left: 16px; }
.slider-btn.next { right: 16px; }

/* Banners Laterales */
.hero-banners-laterales {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.banner-card {
    background-color: var(--color-blanco);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--sombra-suave);
    border: 1px solid var(--color-borde);
    position: relative;
    overflow: hidden;
    height: calc(50% - 10px);
}

.banner-card img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
}

.banner-tag {
    font-size: 11px;
    font-weight: 700;
    color: #dc2626;
    text-transform: uppercase;
}

.banner-card h3 {
    font-size: 18px;
    margin: 6px 0;
    color: var(--color-oscuro);
}

.banner-card p {
    font-size: 12px;
    color: var(--color-texto-suave);
    margin-bottom: 10px;
}

.enlace-banner {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-acento);
}

.enlace-banner:hover {
    color: var(--color-primario-hover);
}

/* ==========================================================================
   SECCIÓN OFERTA DEL DÍA (DEAL OF THE DAY)
   ========================================================================== */
.seccion-oferta-dia {
    padding: 20px 0 35px 0;
}

.oferta-dia-box {
    background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
    border: 2px solid #fde68a;
    border-radius: 16px;
    padding: 36px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
    box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.15);
}

.badge-relampago {
    display: inline-block;
    background: #ef4444;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}

.oferta-dia-izq h2 {
    font-size: 28px;
    color: var(--color-oscuro);
    margin-bottom: 8px;
}

.oferta-estrellas {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--color-texto-suave);
}

.estrellas {
    color: #f59e0b;
    font-size: 16px;
}

.oferta-desc {
    color: #475569;
    font-size: 15px;
    margin-bottom: 20px;
}

.oferta-precios {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.precio-actual {
    font-size: 32px;
    font-weight: 800;
    color: #dc2626;
}

.precio-anterior {
    font-size: 18px;
    color: #94a3b8;
    text-decoration: line-through;
}

.badge-descuento {
    background: #fee2e2;
    color: #dc2626;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
}

/* Cuenta Regresiva */
.cuenta-regresiva {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.reloj-caja {
    background-color: var(--color-oscuro);
    color: #fff;
    border-radius: 8px;
    padding: 8px 14px;
    text-align: center;
    min-width: 65px;
}

.reloj-num {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: var(--color-primario);
}

.reloj-caja small {
    font-size: 10px;
    text-transform: uppercase;
    color: #94a3b8;
}

.reloj-separador {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-oscuro);
}

.stock-barra-contenedor {
    margin-bottom: 24px;
}

.stock-textos {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
}

.stock-alerta {
    color: #dc2626;
    font-weight: 600;
}

.stock-progreso-fondo {
    background-color: #e2e8f0;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.stock-progreso-barra {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    height: 100%;
}

.oferta-acciones {
    display: flex;
    gap: 16px;
}

.oferta-dia-der img {
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    background: #fff;
    padding: 20px;
}

/* ==========================================================================
   PESTAÑAS DE PRODUCTOS (TABS)
   ========================================================================== */
.seccion-tabs-productos {
    padding: 30px 0;
}

.tabs-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--color-borde);
    margin-bottom: 24px;
}

.tabs-botones {
    display: flex;
    gap: 8px;
}

.tab-btn {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-texto-suave);
    cursor: pointer;
    transition: var(--transicion);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-btn.activo {
    color: var(--color-oscuro);
    border-bottom-color: var(--color-primario);
}

.ver-todos-enlace {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-acento);
}

.ver-todos-enlace:hover {
    color: var(--color-primario-hover);
}

.tab-contenido {
    display: none;
}

.tab-contenido.activo {
    display: block;
}

/* ==========================================================================
   TARJETA DE PRODUCTO (GRID)
   ========================================================================== */
.grid-productos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.tarjeta-producto {
    background-color: var(--color-blanco);
    border-radius: 10px;
    border: 1px solid var(--color-borde);
    padding: 18px;
    position: relative;
    transition: var(--transicion);
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.tarjeta-producto:hover {
    box-shadow: var(--sombra-tarjeta);
    border-color: #cbd5e1;
    transform: translateY(-4px);
}

.tarjeta-badges {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
}

.badge-descuento-mini {
    background-color: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
}

.badge-nuevo {
    background-color: #2563eb;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
}

.tarjeta-img-wrap {
    width: 100%;
    min-width: 0;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    overflow: hidden;
}

.tarjeta-img-wrap img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.tarjeta-producto:hover .tarjeta-img-wrap img {
    transform: scale(1.06);
}

.tarjeta-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.tarjeta-categoria {
    font-size: 12px;
    color: var(--color-texto-suave);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tarjeta-titulo {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.tarjeta-titulo a:hover {
    color: var(--color-primario-hover);
}

.tarjeta-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.ventas-txt {
    color: #94a3b8;
    font-size: 11px;
}

.tarjeta-precios {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    margin-top: auto;
}

.tarjeta-precios .precio-actual {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-oscuro);
}

.tarjeta-precios .precio-anterior {
    font-size: 13px;
    color: #94a3b8;
    text-decoration: line-through;
}

.tarjeta-accion {
    width: 100%;
    min-width: 0;
}

.btn-tarjeta-carrito {
    width: 100%;
    background-color: #f1f5f9;
    color: var(--color-oscuro);
    border: 1px solid var(--color-borde);
    padding: 9px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transicion);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
}

.btn-tarjeta-carrito:hover {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
    color: var(--color-oscuro);
}

.btn-tarjeta-agotado {
    width: 100%;
    background: #e2e8f0;
    color: #94a3b8;
    border: none;
    padding: 9px;
    border-radius: 6px;
    font-size: 13px;
    cursor: not-allowed;
    box-sizing: border-box;
}

/* ==========================================================================
   BANNER ANCHO Y CATEGORÍAS
   ========================================================================== */
.seccion-banner-ancho {
    padding: 20px 0 40px 0;
}

.banner-ancho-box {
    border-radius: 16px;
    padding: 40px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.banner-ancho-info {
    max-width: 60%;
}

.badge-tag {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

.banner-ancho-info h2 {
    font-size: 28px;
    margin: 12px 0;
    font-weight: 800;
}

.banner-ancho-info p {
    color: #cbd5e1;
    margin-bottom: 20px;
}

.banner-ancho-img img {
    border-radius: 12px;
    width: 320px;
}

.seccion-categorias-destacadas {
    padding: 20px 0 50px 0;
}

.seccion-titulo-centro {
    text-align: center;
    margin-bottom: 30px;
}

.seccion-titulo-centro h2 {
    font-size: 26px;
    color: var(--color-oscuro);
}

.seccion-titulo-centro p {
    color: var(--color-texto-suave);
    font-size: 14px;
}

.categorias-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
}

.categoria-card {
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 20px 12px;
    text-align: center;
    transition: var(--transicion);
}

.categoria-card:hover {
    border-color: var(--color-primario);
    box-shadow: var(--sombra-suave);
    transform: translateY(-4px);
}

.categoria-icono-wrap {
    width: 50px;
    height: 50px;
    background: #f1f5f9;
    color: var(--color-oscuro);
    border-radius: 50%;
    margin: 0 auto 12px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: var(--transicion);
}

.categoria-card:hover .categoria-icono-wrap {
    background: var(--color-primario);
}

.categoria-card h4 {
    font-size: 13px;
    color: var(--color-oscuro);
    margin-bottom: 4px;
}

.cat-contador {
    font-size: 11px;
    color: var(--color-texto-suave);
}

/* ==========================================================================
   BENEFICIOS Y FOOTER
   ========================================================================== */
.seccion-beneficios {
    background-color: var(--color-blanco);
    border-top: 1px solid var(--color-borde);
    border-bottom: 1px solid var(--color-borde);
    padding: 30px 0;
}

.beneficios-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.beneficio-card {
    display: flex;
    align-items: center;
    gap: 16px;
}

.beneficio-icono {
    font-size: 32px;
    color: var(--color-primario);
}

.beneficio-info h4 {
    font-size: 15px;
    color: var(--color-oscuro);
    margin-bottom: 2px;
}

.beneficio-info p {
    font-size: 12px;
    color: var(--color-texto-suave);
}

.footer-principal {
    background-color: var(--color-oscuro);
    color: #94a3b8;
    padding-top: 50px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr 1.6fr;
    gap: 40px;
    padding-bottom: 40px;
}

.footer-col h3 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 700;
}

.col-acerca p {
    font-size: 13px;
    margin: 16px 0;
    line-height: 1.6;
}

.contacto-lista li {
    font-size: 13px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contacto-lista li i {
    color: var(--color-primario);
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    font-size: 13px;
    color: #94a3b8;
}

.footer-col ul li a:hover {
    color: var(--color-primario);
    padding-left: 6px;
}

.col-newsletter p {
    font-size: 13px;
    margin-bottom: 14px;
}

.newsletter-form {
    display: flex;
    background: #1e293b;
    border-radius: 30px;
    padding: 4px;
    border: 1px solid #334155;
    margin-bottom: 16px;
}

.newsletter-form input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 8px 16px;
    color: #fff;
    outline: none;
    font-size: 13px;
}

.newsletter-form button {
    background: var(--color-primario);
    color: var(--color-oscuro);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
}

.redes-sociales {
    display: flex;
    gap: 10px;
}

.redes-sociales a {
    width: 36px;
    height: 36px;
    background: #1e293b;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.redes-sociales a:hover {
    background: var(--color-primario);
    color: var(--color-oscuro);
}

.footer-inferior {
    border-top: 1px solid #1e293b;
    padding: 20px 0;
    font-size: 13px;
}

.inferior-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Copyright y Créditos del Desarrollador */
.copyright-texto {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
    line-height: 1.6;
}

.separador-credito {
    color: #475569;
    font-weight: 300;
    user-select: none;
    margin: 0 2px;
}

.credito-desarrollador {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
}

/* Enlace Interactivo Clickeable del Desarrollador */
.enlace-desarrollador {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.22);
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12.5px;
    text-decoration: none;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.enlace-desarrollador i {
    font-size: 11px;
    color: #38bdf8;
    transition: transform 0.25s ease, color 0.25s ease;
}

/* Efecto al pasar el mouse por encima (Hover) */
.enlace-desarrollador:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border-color: #38bdf8;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.45);
    text-decoration: none;
}

.enlace-desarrollador:hover i {
    color: #ffffff;
    transform: rotate(-10deg) scale(1.15);
}

/* Efecto al presionar / hacer clic (Active) */
.enlace-desarrollador:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

.medios-pago {
    display: flex;
    gap: 16px;
    font-size: 20px;
    color: #cbd5e1;
}

/* ==========================================================================
   BOTONES Y ELEMENTOS DE FORMULARIO
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: var(--transicion);
    text-decoration: none;
}

.btn-primario {
    background-color: var(--color-primario);
    color: var(--color-oscuro);
}

.btn-primario:hover {
    background-color: var(--color-primario-hover);
}

.btn-primario-grande {
    background-color: var(--color-primario);
    color: var(--color-oscuro);
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.btn-primario-grande:hover {
    background-color: var(--color-primario-hover);
}

.btn-secundario {
    background-color: #f1f5f9;
    color: var(--color-oscuro);
}

.btn-secundario:hover {
    background-color: #e2e8f0;
}

.btn-amarillo {
    background-color: #fbbf24;
    color: #1e1b4b;
    font-weight: 700;
}

.btn-amarillo-sm {
    background-color: var(--color-primario);
    color: var(--color-oscuro);
    font-size: 12px;
    padding: 6px 12px;
    font-weight: 700;
    border-radius: 4px;
}

.btn-linea {
    background: transparent;
    border: 1px solid var(--color-borde);
    color: var(--color-texto);
}

.btn-linea:hover {
    background: #f8fafc;
}

.btn-linea-rojo {
    background: transparent;
    border: 1px solid #fee2e2;
    color: #ef4444;
}

.btn-linea-rojo:hover {
    background: #fef2f2;
}

.w-100 {
    width: 100%;
}

/* ==========================================================================
   BREADCRUMB & ALERTAS
   ========================================================================== */
.breadcrumb-area {
    background: #f1f5f9;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-borde);
}

.breadcrumb-lista {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-texto-suave);
}

.breadcrumb-lista a:hover {
    color: var(--color-primario-hover);
}

.separador {
    font-size: 10px;
    color: #94a3b8;
}

.breadcrumb-lista .activo {
    color: var(--color-oscuro);
    font-weight: 600;
}

.notificaciones-box {
    margin-top: 16px;
}

.alerta {
    padding: 12px 18px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    margin-bottom: 12px;
}

.alerta-exito {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alerta-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alerta-info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.cerrar-alerta {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: inherit;
}

/* ==========================================================================
   CATÁLOGO DE TIENDA Y SIDEBAR
   ========================================================================== */
.pagina-tienda-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 28px;
    padding: 30px 20px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

.tienda-sidebar {
    width: 100%;
    min-width: 0;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.tienda-contenido {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.tienda-sidebar::-webkit-scrollbar {
    width: 4px;
}
.tienda-sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.sidebar-widget {
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
}

.widget-titulo {
    font-size: 16px;
    color: var(--color-oscuro);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f1f5f9;
}

.widget-categorias-lista li {
    margin-bottom: 6px;
}

.widget-categorias-lista li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 6px;
}

.widget-categorias-lista li a:hover,
.widget-categorias-lista li.activo a {
    background: #f8fafc;
    color: var(--color-primario-hover);
    font-weight: 600;
}

.conteo-badge {
    background: #f1f5f9;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    color: #64748b;
}

.precio-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.precio-inputs input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    font-size: 13px;
}

.btn-filtrar {
    width: 100%;
    background: var(--color-oscuro);
    color: #fff;
    padding: 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.sidebar-promo {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #fff;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
}

.sidebar-promo h4 {
    font-size: 18px;
    margin: 8px 0;
}

.sidebar-promo p {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 16px;
}

.promo-tag {
    background: #f59e0b;
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.tienda-toolbar {
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    width: 100%;
    box-sizing: border-box;
}

.toolbar-info h2 {
    font-size: 18px;
    color: var(--color-oscuro);
}

.toolbar-info p {
    font-size: 12px;
    color: var(--color-texto-suave);
}

.toolbar-ordenar select {
    padding: 6px 12px;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    margin-left: 8px;
}

.grid-tienda {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.paginacion-contenedor {
    margin-top: 36px;
    display: flex;
    justify-content: center;
}

.paginacion-lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.paginacion-lista li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--color-borde);
    background: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

.paginacion-lista li.activo a {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: var(--color-oscuro);
}

.no-productos-caja {
    background: #fff;
    border-radius: 10px;
    padding: 60px 20px;
    text-align: center;
}

.no-productos-caja i {
    font-size: 50px;
    color: #cbd5e1;
    margin-bottom: 16px;
}

/* ==========================================================================
   FICHA DE DETALLE DE PRODUCTO
   ========================================================================== */
.seccion-detalle-producto {
    padding: 30px 0 60px 0;
}

.detalle-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    padding: 36px;
    box-shadow: var(--sombra-suave);
    margin-bottom: 40px;
}

.imagen-principal-caja {
    background: #f8fafc;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 380px;
}

.imagen-principal-caja img {
    max-height: 100%;
    object-fit: contain;
}

.badge-descuento-grande {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #dc2626;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
}

.sellos-confianza {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.sello-item {
    background: #f1f5f9;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    font-size: 11px;
    color: #475569;
}

.sello-item i {
    display: block;
    font-size: 18px;
    color: var(--color-acento);
    margin-bottom: 6px;
}

.detalle-meta-top {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 10px;
}

.detalle-cat-enlace a {
    color: var(--color-acento);
    font-weight: 600;
}

.detalle-titulo {
    font-size: 26px;
    color: var(--color-oscuro);
    line-height: 1.3;
    margin-bottom: 14px;
}

.detalle-rating-caja {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.calificacion-num {
    font-weight: 700;
    font-size: 14px;
}

.opiniones-conteo {
    color: #64748b;
    font-size: 13px;
}

.detalle-precios-box {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
}

.precio-actual-grande {
    font-size: 34px;
    font-weight: 800;
    color: #dc2626;
}

.precio-anterior-tachado {
    font-size: 18px;
    color: #94a3b8;
    text-decoration: line-through;
}

.ahorro-tag {
    background: #fef2f2;
    color: #dc2626;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
}

.detalle-desc-corta {
    color: #475569;
    font-size: 15px;
    margin-bottom: 24px;
    line-height: 1.7;
}

.disponibilidad-box {
    margin-bottom: 24px;
}

.stock-disponible {
    color: #059669;
    font-weight: 600;
    font-size: 14px;
}

.compra-controles {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 24px;
}

.selector-cantidad {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: #f8fafc;
    overflow: hidden;
}

.btn-cant {
    background: transparent;
    border: none;
    width: 38px;
    height: 48px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

.selector-cantidad input {
    width: 50px;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    outline: none;
}

.pago-seguro-bloque {
    background: #f8fafc;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 14px;
}

.pago-seguro-bloque small {
    display: block;
    color: #475569;
    font-weight: 600;
    margin-bottom: 8px;
}

.iconos-tarjetas {
    display: flex;
    gap: 14px;
    font-size: 13px;
    color: #64748b;
}

.contenedor-tabs-detalle {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 40px;
}

.detalle-tabs-nav {
    display: flex;
    border-bottom: 2px solid var(--color-borde);
    gap: 12px;
    margin-bottom: 20px;
}

.dtab-btn {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-texto-suave);
    cursor: pointer;
}

.dtab-btn.activo {
    color: var(--color-oscuro);
    border-bottom-color: var(--color-primario);
}

.dtab-contenido {
    display: none;
}

.dtab-contenido.activo {
    display: block;
}

.contenido-formateado p, .contenido-formateado li {
    font-size: 15px;
    color: #475569;
    line-height: 1.8;
}

.seccion-titulo-relacionados {
    margin-bottom: 24px;
}

.seccion-titulo-relacionados h2 {
    font-size: 22px;
    color: var(--color-oscuro);
}

/* ==========================================================================
   CARRITO DE COMPRAS Y TABLAS
   ========================================================================== */
.seccion-carrito {
    padding: 30px 0 60px 0;
}

.titulo-pagina {
    font-size: 26px;
    color: var(--color-oscuro);
    margin-bottom: 24px;
}

.carrito-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

.tabla-responsive {
    overflow-x: auto;
}

.tabla-carrito {
    width: 100%;
    background: #fff;
    border-collapse: collapse;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    overflow: hidden;
}

.tabla-carrito th {
    background: #f1f5f9;
    padding: 14px;
    font-size: 13px;
    text-transform: uppercase;
    color: #475569;
    text-align: left;
}

.tabla-carrito td {
    padding: 16px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.td-img img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    background: #f8fafc;
    border-radius: 6px;
}

.item-titulo-enlace {
    font-weight: 600;
    color: var(--color-oscuro);
    font-size: 14px;
}

.item-titulo-enlace:hover {
    color: var(--color-primario-hover);
}

.stock-info {
    display: block;
    color: #94a3b8;
    font-size: 12px;
}

.input-cant-tabla {
    width: 60px;
    padding: 6px;
    text-align: center;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
}

.btn-eliminar-item {
    color: #ef4444;
    font-size: 16px;
}

.btn-eliminar-item:hover {
    color: #b91c1c;
}

.carrito-acciones-barra {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
}

.acciones-derecha {
    display: flex;
    gap: 10px;
}

.resumen-card {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--sombra-suave);
}

.resumen-card h3 {
    font-size: 18px;
    color: var(--color-oscuro);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

.alerta-envio-gratis {
    background: #fffbeb;
    border: 1px solid #fde68a;
    padding: 10px;
    border-radius: 6px;
    font-size: 13px;
    color: #92400e;
    margin-bottom: 16px;
}

.envio-logrado {
    color: #065f46;
    background: #ecfdf5;
}

.resumen-lista li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px solid #f8fafc;
}

.resumen-total {
    font-size: 18px !important;
    font-weight: 800;
    color: var(--color-oscuro);
    border-top: 2px solid #e2e8f0;
    margin-top: 10px;
    padding-top: 14px !important;
}

.resumen-total strong {
    color: #dc2626;
}

.resumen-checkout-btn {
    margin-top: 20px;
}

.garantias-pago-resumen {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
    font-size: 12px;
    color: #64748b;
}

.garantias-pago-resumen p {
    margin-bottom: 6px;
}

.carrito-vacio-caja {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    padding: 60px 24px;
    text-align: center;
    max-width: 640px;
    margin: 40px auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.carrito-icono-vacio {
    font-size: 70px;
    color: #cbd5e1;
    margin-bottom: 20px;
}

.carrito-vacio-caja h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-texto);
    margin-bottom: 12px;
}

.carrito-vacio-caja p {
    font-size: 15px;
    color: var(--color-texto-mutado);
    max-width: 480px;
    margin: 0 auto 32px auto;
    line-height: 1.6;
}

.carrito-vacio-caja .btn-primario-grande {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    padding: 14px 34px;
    font-weight: 700;
    border-radius: 10px;
}

/* ==========================================================================
   FINALIZAR COMPRA (CHECKOUT)
   ========================================================================== */
.seccion-checkout {
    padding: 30px 0 60px 0;
}

.checkout-layout {
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    gap: 30px;
}

.checkout-card {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.checkout-card h3 {
    font-size: 18px;
    color: var(--color-oscuro);
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

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

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

.campo-full {
    grid-column: span 2;
}

.form-campo label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-oscuro);
    margin-bottom: 6px;
}

.form-campo input, .form-campo select, .form-campo textarea {
    padding: 10px 14px;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: var(--transicion);
}

.form-campo input:focus, .form-campo select:focus, .form-campo textarea:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.metodos-pago-opciones {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.metodo-opcion {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #f8fafc;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: var(--transicion);
}

.metodo-opcion input {
    margin-top: 4px;
}

.metodo-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--color-oscuro);
    margin-bottom: 4px;
}

.metodo-info p {
    font-size: 12px;
    color: #64748b;
}

.checkout-articulos-lista {
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.item-checkout {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}

.item-checkout-nombre {
    display: block;
    font-weight: 600;
    color: var(--color-oscuro);
}

.item-checkout-cant {
    color: #64748b;
}

.checkout-btn-wrap {
    margin-top: 20px;
}

/* ==========================================================================
   PEDIDO COMPLETADO
   ========================================================================== */
.seccion-completado {
    padding: 50px 0 80px 0;
}

.completado-caja {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    padding: 40px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    box-shadow: var(--sombra-tarjeta);
}

.icono-exito-animado {
    font-size: 70px;
    color: #10b981;
    margin-bottom: 16px;
}

.badge-exito {
    background: #d1fae5;
    color: #065f46;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
}

.completado-caja h1 {
    font-size: 26px;
    color: var(--color-oscuro);
    margin: 12px 0;
}

.completado-subtexto {
    color: #64748b;
    font-size: 15px;
    max-width: 650px;
    margin: 0 auto 30px auto;
}

.pedido-info-destacada {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 30px;
    text-align: left;
}

.info-bloque span {
    display: block;
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
}

.info-bloque strong {
    font-size: 15px;
    color: var(--color-oscuro);
}

.total-destacado {
    color: #dc2626 !important;
}

.completado-detalles-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 24px;
    text-align: left;
    margin-bottom: 30px;
}

.detalle-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px;
}

.detalle-card h3 {
    font-size: 16px;
    color: var(--color-oscuro);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.detalle-card p {
    font-size: 13px;
    color: #475569;
    margin-bottom: 8px;
}

.tabla-resumen-ticket {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}

.tabla-resumen-ticket th, .tabla-resumen-ticket td {
    padding: 8px 6px;
    border-bottom: 1px solid #e2e8f0;
}

.tabla-resumen-ticket tfoot td {
    font-weight: 600;
}

.fila-total td {
    font-size: 15px;
    color: #dc2626;
}

.text-right {
    text-align: right;
}

.completado-acciones {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* ==========================================================================
   AUTENTICACIÓN (LOGIN & REGISTRO)
   ========================================================================== */
.seccion-auth {
    padding: 50px 0 80px 0;
}

.auth-card {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 14px;
    padding: 36px;
    max-width: 480px;
    margin: 0 auto;
    box-shadow: var(--sombra-tarjeta);
}

.auth-card-ancho {
    max-width: 650px;
}

.auth-header {
    text-align: center;
    margin-bottom: 24px;
}

.auth-icono {
    font-size: 38px;
    color: var(--color-primario);
    margin-bottom: 8px;
    display: block;
}

.auth-header h2 {
    font-size: 24px;
    color: var(--color-oscuro);
    margin-bottom: 6px;
}

.auth-header p {
    font-size: 13px;
    color: var(--color-texto-suave);
}

.credenciales-demo-box {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    font-size: 12px;
}

.input-icono-wrap {
    position: relative;
}

.input-icono-wrap i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #94a3b8;
}

.input-icono-wrap input {
    width: 100%;
    padding-left: 40px !important;
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 13px;
    color: #64748b;
}

.auth-footer a {
    color: var(--color-acento);
    font-weight: 600;
}

/* ==========================================================================
   PERFIL DE USUARIO
   ========================================================================== */
.seccion-perfil {
    padding: 40px 0 70px 0;
}

.perfil-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
}

.perfil-sidebar {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 24px;
}

.perfil-avatar-box {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 20px;
}

.avatar-circulo {
    width: 70px;
    height: 70px;
    background: var(--color-oscuro);
    color: var(--color-primario);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 12px auto;
}

.badge-rol {
    background: #e0f2fe;
    color: #0369a1;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.perfil-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--color-texto);
    margin-bottom: 4px;
}

.perfil-menu li a.activo, .perfil-menu li a:hover {
    background: #f8fafc;
    color: var(--color-primario-hover);
    font-weight: 600;
}

.enlace-logout {
    color: #ef4444 !important;
}

.perfil-contenido {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 30px;
}

.tabla-perfil-pedidos {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tabla-perfil-pedidos th {
    background: #f8fafc;
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
}

.tabla-perfil-pedidos td {
    padding: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.badge-estado {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.estado-pendiente { background: #fef3c7; color: #92400e; }
.estado-en_proceso { background: #e0e7ff; color: #3730a3; }
.estado-enviado { background: #e0f2fe; color: #0369a1; }
.estado-entregado { background: #d1fae5; color: #065f46; }
.estado-cancelado { background: #fee2e2; color: #991b1b; }

.btn-ver-ticket {
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* ==========================================================================
   TOAST NOTIFICACIÓN FLOTANTE
   ========================================================================== */
.toast-notificacion {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--color-oscuro);
    color: #fff;
    padding: 14px 22px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 9999;
    border-left: 5px solid var(--color-primario);
}

.toast-notificacion.mostrar {
    transform: translateY(0);
    opacity: 1;
}

.toast-notificacion i {
    color: var(--color-primario);
    font-size: 20px;
}

/* ==========================================================================
   RESPONSIVE DESIGN (MÓVILES Y TABLETS)
   ========================================================================== */
@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); }
    .hero-banners-laterales { flex-direction: row; }
    .banner-card { height: auto; }
    .grid-productos, .grid-tienda { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .categorias-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .beneficios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .carrito-layout, .checkout-layout, .detalle-grid, .pagina-tienda-layout, .perfil-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .topbar { display: none; }
    .header-grid { flex-direction: column; align-items: stretch; }
    .nav-flex { flex-direction: column; align-items: stretch; }
    .menu-categorias-dropdown { width: 100%; }
    .menu-principal { flex-wrap: wrap; justify-content: center; }
    .hero-banners-laterales { flex-direction: column; }
    .oferta-dia-box { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .oferta-precios, .cuenta-regresiva, .oferta-acciones { justify-content: center; }
    .grid-productos, .grid-tienda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .categorias-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .beneficios-grid { grid-template-columns: minmax(0, 1fr); }
    .footer-grid { grid-template-columns: minmax(0, 1fr); }
    .completado-detalles-grid { grid-template-columns: minmax(0, 1fr); }
    .pedido-info-destacada { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

@media (max-width: 480px) {
    .slide-contenido { max-width: 100%; }
    .slide-imagen { display: none; }
    .pedido-info-destacada { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   SISTEMA VARIATION SWATCHES (MUESTRAS DE COLOR, IMAGEN, TEXTO Y SELECT)
   ========================================================================== */

/* 1. Botón de Vista Rápida [product_page] en Tarjetas de Producto */
.tarjeta-producto {
    position: relative;
}

.btn-vista-rapida {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.92);
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 15;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.btn-vista-rapida:hover {
    background: var(--color-primario);
    color: #ffffff;
    border-color: var(--color-primario);
    transform: scale(1.08);
}

/* 2. Muestras en Tarjetas de Archivo / Tienda / Categoría + Slider Horizontal */
.tarjeta-swatches-contenedor {
    margin: 6px 0 8px 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    position: relative;
    box-sizing: border-box;
}

.swatch-lista-plana {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.swatch-slider-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.swatch-slider-track {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 3px 2px;
    flex: 1 1 0%;
    width: 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.swatch-slider-track::-webkit-scrollbar {
    display: none;
}

.swatch-slider-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.swatch-slider-btn:hover {
    background: var(--color-primario);
    color: #fff;
    border-color: var(--color-primario);
}

.swatch-item-cat {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 2px solid #cbd5e1;
    background: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.swatch-item-cat.forma-redonda,
.swatch-item-cat.forma-redonda .swatch-muestra-color,
.swatch-item-cat.forma-redonda .swatch-muestra-img {
    border-radius: 50%;
}

.swatch-item-cat.forma-cuadrada,
.swatch-item-cat.forma-cuadrada .swatch-muestra-color,
.swatch-item-cat.forma-cuadrada .swatch-muestra-img {
    border-radius: 6px;
}

.swatch-item-cat.tam-cat-sm { width: 22px; height: 22px; }
.swatch-item-cat.tam-cat-md { width: 26px; height: 26px; }
.swatch-item-cat.tam-cat-lg { width: 32px; height: 32px; }

.swatch-item-cat.activo,
.swatch-item-cat:hover {
    border-color: var(--color-primario);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

.swatch-muestra-color,
.swatch-muestra-img {
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

.swatch-mas-enlace {
    font-size: 11px;
    font-weight: 700;
    color: #0284c7;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    padding: 2px 7px;
    border-radius: 99px;
    white-space: nowrap;
}

.swatch-mas-enlace:hover {
    background: #0284c7;
    color: #fff;
}

.tarjeta-swatch-seleccionado-txt {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    margin-top: 3px;
    min-height: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tooltips flotantes sobre las muestras */
.swatch-tooltip {
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    display: none;
    z-index: 50;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.swatch-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: #0f172a transparent transparent transparent;
}

/* En tarjetas de catálogo evitamos que un tooltip interno al track desborde el scroll */
.tarjeta-producto .swatch-item-cat .swatch-tooltip {
    display: none !important;
}

.swatch-boton-detalle:hover .swatch-tooltip {
    display: block;
}

/* 3. Panel de Variation Swatches en Ficha de Producto y [product_page] */
.producto-swatches-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.swatch-grupo-atributo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swatch-cabecera-atributo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
}

.swatch-etiqueta-titulo {
    color: #475569;
    font-weight: 600;
}

.swatch-opcion-seleccionada-nombre {
    color: #0f172a;
    font-weight: 800;
    background: #ffffff;
    padding: 2px 10px;
    border-radius: 99px;
    border: 1px solid #cbd5e1;
    font-size: 12.5px;
}

.swatch-opciones-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

.swatch-boton-detalle {
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    transition: all 0.2s ease;
}

.swatch-circulo-color,
.swatch-miniatura-img {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #cbd5e1;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 2px #ffffff, 0 2px 5px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
}

/* Formas: Redonda y Cuadrada */
.swatch-boton-detalle.forma-redonda .swatch-circulo-color,
.swatch-boton-detalle.forma-redonda .swatch-miniatura-img {
    border-radius: 50%;
}

.swatch-boton-detalle.forma-cuadrada .swatch-circulo-color,
.swatch-boton-detalle.forma-cuadrada .swatch-miniatura-img {
    border-radius: 8px;
}

/* Tamaños desde Pequeño (sm) hasta Extra Grande (xl) */
.swatch-boton-detalle.tam-sm .swatch-circulo-color,
.swatch-boton-detalle.tam-sm .swatch-miniatura-img { width: 28px; height: 28px; }

.swatch-boton-detalle.tam-md .swatch-circulo-color,
.swatch-boton-detalle.tam-md .swatch-miniatura-img { width: 38px; height: 38px; }

.swatch-boton-detalle.tam-lg .swatch-circulo-color,
.swatch-boton-detalle.tam-lg .swatch-miniatura-img { width: 48px; height: 48px; }

.swatch-boton-detalle.tam-xl .swatch-circulo-color,
.swatch-boton-detalle.tam-xl .swatch-miniatura-img { width: 58px; height: 58px; }

.swatch-check-icono {
    color: #ffffff;
    font-size: 13px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.65);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.18s ease;
}

.swatch-boton-detalle.activo .swatch-circulo-color,
.swatch-boton-detalle.activo .swatch-miniatura-img {
    border-color: var(--color-primario);
    box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 2px var(--color-primario);
    transform: scale(1.06);
}

.swatch-boton-detalle.activo .swatch-check-icono {
    opacity: 1;
    transform: scale(1);
}

/* Nombre debajo de la muestra */
.swatch-nombre-debajo {
    font-size: 11px;
    color: #475569;
    font-weight: 600;
    max-width: 72px;
    text-align: center;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.swatch-boton-detalle.activo .swatch-nombre-debajo {
    color: var(--color-primario);
    font-weight: 800;
}

/* Muestra de Texto / Etiqueta */
.swatch-etiqueta-texto {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    transition: all 0.2s ease;
}

.swatch-boton-detalle.forma-redonda .swatch-etiqueta-texto {
    border-radius: 99px;
}

.swatch-boton-detalle.activo .swatch-etiqueta-texto,
.swatch-boton-detalle:hover .swatch-etiqueta-texto {
    border-color: var(--color-primario);
    background: #fff1f2;
    color: var(--color-primario);
}

.swatch-extra-tag {
    font-size: 10.5px;
    background: #0f172a;
    color: #ffffff;
    padding: 1px 6px;
    border-radius: 99px;
}

/* Selección Desplegable */
.swatch-select-desplegable {
    width: 100%;
    max-width: 360px;
    padding: 10px 14px;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    outline: none;
}

.swatch-select-desplegable:focus {
    border-color: var(--color-primario);
}

/* Barra de enlace directo a variaciones */
.swatch-barra-enlace-directo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px dashed #cbd5e1;
    font-size: 12.5px;
    color: #475569;
}

.btn-copiar-enlace-var {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    padding: 5px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-copiar-enlace-var:hover {
    background: var(--color-primario);
    color: #ffffff;
    border-color: var(--color-primario);
}

/* 4. Filtro de Color / Imagen / Atributo en Sidebar de Tienda */
.sidebar-swatches-grid {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sidebar-swatches-grid.tipo-texto {
    flex-direction: row;
    flex-wrap: wrap;
}

.swatch-filtro-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    font-size: 13px;
    color: #334155;
}

.swatch-filtro-item:hover,
.swatch-filtro-item.activo {
    background: #f8fafc;
    border-color: var(--color-primario);
    font-weight: 700;
    color: #0f172a;
}

.swatch-filtro-muestra-color,
.swatch-filtro-muestra-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    flex-shrink: 0;
}

.swatch-filtro-item.forma-cuadrada .swatch-filtro-muestra-color,
.swatch-filtro-item.forma-cuadrada .swatch-filtro-muestra-img {
    border-radius: 5px;
}

.swatch-filtro-conteo {
    margin-left: auto;
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 99px;
}

.swatch-filtro-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
}

.swatch-filtro-item.activo .swatch-filtro-chip {
    background: var(--color-primario);
    color: #fff;
    border-color: var(--color-primario);
}

.filtros-activos-barra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
}

.chip-filtro-activo {
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid #fecdd3;
    padding: 3px 10px;
    border-radius: 99px;
    font-weight: 700;
}

.enlace-limpiar-todo {
    color: #64748b;
    text-decoration: underline;
    font-weight: 600;
}

/* 5. Modal de Vista Rápida / Código Corto [product_page] */
.modal-product-page-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9500;
    padding: 16px;
}

.modal-product-page-overlay.activo {
    display: flex;
}

.modal-product-page-card {
    background: #ffffff;
    border-radius: 16px;
    max-width: 880px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
    padding: 26px;
}

.modal-product-page-cerrar {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
}

.qp-contenedor-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 24px;
    align-items: start;
}

.qp-col-img {
    position: relative;
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.qp-img-principal {
    max-height: 320px;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 8px;
}

.qp-badge-shortcode {
    display: inline-block;
    background: #0f172a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    margin-bottom: 10px;
}

.qp-titulo {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}

@media (max-width: 768px) {
    .qp-contenedor-grid {
        grid-template-columns: 1fr;
    }
    .swatch-barra-enlace-directo {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   6. FUNCIONES VARIATION SWATCHES PRO (8 MEJORAS AVANZADAS)
   ========================================================================== */

/* #2. Muestras Agotadas (Tachado Diagonal "X" o Atenuado) */
.swatch-agotado {
    position: relative;
}

.swatch-agotado.estilo-opaco {
    opacity: 0.42;
    filter: grayscale(40%);
}

.swatch-agotado.estilo-tachado {
    opacity: 0.65;
}

.swatch-agotado.estilo-tachado .swatch-circulo-color::after,
.swatch-agotado.estilo-tachado .swatch-miniatura-img::after,
.swatch-agotado.estilo-tachado .swatch-muestra-color::after,
.swatch-agotado.estilo-tachado .swatch-muestra-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top left,
        transparent calc(50% - 1.5px),
        #ef4444 calc(50% - 1.5px),
        #ef4444 calc(50% + 1.5px),
        transparent calc(50% + 1.5px)
    );
    border-radius: inherit;
    pointer-events: none;
}

.swatch-btn-card-agotado {
    background: #94a3b8 !important;
    cursor: not-allowed !important;
    opacity: 0.8;
}

/* #3. Tooltip Enriquecido con Foto en Miniatura y Precio */
.swatch-tooltip.swatch-tooltip-rico {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #0f172a;
    color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.35);
    white-space: nowrap;
    min-width: 145px;
    bottom: calc(100% + 10px);
}

.swatch-boton-detalle:hover .swatch-tooltip.swatch-tooltip-rico {
    display: flex;
}

.swatch-tooltip-thumb {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    object-fit: cover;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.swatch-tooltip-info {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.25;
}

.swatch-tooltip-info strong {
    font-size: 11.5px;
    color: #f8fafc;
}

.swatch-tooltip-info em {
    font-style: normal;
    font-size: 10.5px;
    color: #38bdf8;
    font-weight: 700;
}

/* #5. Galería de Miniaturas Dinámica por Variación */
.detalle-galeria-miniaturas {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.miniatura-var-btn {
    width: 68px;
    height: 68px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    padding: 3px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease;
}

.miniatura-var-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.miniatura-var-btn:hover,
.miniatura-var-btn.activo {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
    transform: translateY(-2px);
}

/* #6. Insignias / Etiquetas sobre las Muestras ("🔥 Popular", "✨ Top", "Bicolor") */
.swatch-insignia-badge {
    position: absolute;
    top: -9px;
    right: -6px;
    font-size: 9px;
    font-weight: 800;
    color: #ffffff;
    padding: 1.5px 6px;
    border-radius: 99px;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
    z-index: 4;
    white-space: nowrap;
    pointer-events: none;
}

.swatch-insignia-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    z-index: 3;
}

/* #7. Tabla de Compra Mayorista / Matriz de Variaciones */
.swatch-tabla-mayorista-wrap {
    margin-top: 14px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.mayorista-cabecera {
    margin-bottom: 10px;
}

.mayorista-cabecera h4 {
    font-size: 14px;
    color: #0f172a;
    margin: 0 0 2px 0;
}

.mayorista-cabecera small {
    font-size: 12px;
    color: #64748b;
}

.mayorista-tabla-scroll {
    overflow-x: auto;
}

.mayorista-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.mayorista-tabla th {
    text-align: left;
    background: #f1f5f9;
    padding: 8px 10px;
    font-size: 11.5px;
    text-transform: uppercase;
    color: #475569;
}

.mayorista-tabla td {
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.badge-stock-mini {
    background: #dcfce7;
    color: #166534;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
}

.input-cant-mayorista {
    width: 68px;
    padding: 5px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    text-align: center;
    font-weight: 700;
}

.mayorista-footer {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

#mayorista-resumen-total {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

/* #8. Caja «Avísame cuando vuelva» en Muestras Agotadas */
.swatch-alerta-stock-box {
    margin-top: 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 14px 16px;
}

.alerta-stock-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.alerta-stock-header i {
    color: #d97706;
    font-size: 18px;
    margin-top: 2px;
}

.alerta-stock-header strong {
    display: block;
    font-size: 13.5px;
    color: #92400e;
}

.alerta-stock-header p {
    margin: 2px 0 0 0;
    font-size: 12px;
    color: #b45309;
}

.alerta-stock-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.alerta-stock-form input[type="text"] {
    flex: 1;
    min-width: 210px;
    padding: 8px 12px;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    font-size: 13px;
    background: #ffffff;
}

.alerta-stock-msg {
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 700;
}

/* ==========================================================================
   7. VENTANA MODAL DE CONFIRMACIÓN (VACIAR CARRITO / QUITAR PRODUCTO)
   ========================================================================== */
.modal-confirmar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9800;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.modal-confirmar-overlay.activo {
    opacity: 1;
    visibility: visible;
}

.modal-confirmar-caja {
    background: #ffffff;
    border-radius: 18px;
    max-width: 430px;
    width: 100%;
    padding: 30px 26px 26px;
    text-align: center;
    position: relative;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.35);
    border: 1px solid #e2e8f0;
    transform: translateY(14px) scale(0.96);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-confirmar-overlay.activo .modal-confirmar-caja {
    transform: translateY(0) scale(1);
}

.modal-confirmar-cerrar {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-confirmar-cerrar:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

.modal-confirmar-icono {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #fef2f2;
    border: 2px solid #fecaca;
    color: #ef4444;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.15);
}

.modal-confirmar-caja h3 {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px;
}

.modal-confirmar-caja p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 24px;
}

.modal-confirmar-botones {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-confirmar-botones .btn {
    flex: 1;
    justify-content: center;
    padding: 11px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
}

.btn-peligro-modal {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff !important;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.28);
    transition: all 0.2s ease;
}

.btn-peligro-modal:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.38);
}

/* ==========================================================================
   8. SISTEMA RESPONSIVE INTEGRAL (TODOS LOS EQUIPOS, TABLETS Y MÓVILES)
   ========================================================================== */

/* Botón de filtros móvil oculto en escritorio */
.tienda-filtro-movil-bar {
    display: none;
}

/* Prevenir desbordamiento horizontal global en cualquier dispositivo */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Dispositivos táctiles: evitar que el tooltip flotante tape la pantalla al tocar */
@media (hover: none) and (pointer: coarse) {
    .swatch-item-cat .swatch-tooltip,
    .swatch-boton-detalle .swatch-tooltip {
        display: none !important;
    }
    .btn-vista-rapida {
        opacity: 1;
        width: 32px;
        height: 32px;
    }
}

/* --- A) PANTALLAS MEDIANAS / LAPTOPS COMPACTAS Y TABLETS HORIZONTALES (<= 1200px) --- */
@media (max-width: 1200px) {
    .contenedor {
        padding: 0 16px;
    }
    .header-grid {
        gap: 16px;
    }
    .soporte-tel {
        display: none;
    }
    .nav-oferta-texto {
        display: none;
    }
    .pagina-tienda-layout {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 20px;
        padding: 24px 16px;
    }
    .grid-tienda {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
    .tarjeta-producto {
        padding: 15px;
    }
}

/* --- B) TABLETS Y PANTALLAS <= 1024px --- */
@media (max-width: 1024px) {
    .pagina-tienda-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 16px;
        padding: 20px 16px;
    }

    .tienda-contenido {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .tienda-filtro-movil-bar {
        display: block;
        width: 100%;
    }

    .btn-toggle-filtros-movil {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 13px 18px;
        background: #ffffff;
        border: 1.5px solid #cbd5e1;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
        color: #0f172a;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
        transition: all 0.2s ease;
    }

    .btn-toggle-filtros-movil.activo {
        border-color: var(--color-primario);
        background: #f0f9ff;
        color: #0369a1;
    }

    .btn-toggle-filtros-movil .icono-flecha-filtro {
        margin-left: auto;
        transition: transform 0.25s ease;
    }

    .btn-toggle-filtros-movil.activo .icono-flecha-filtro {
        transform: rotate(180deg);
    }

    .badge-filtros-movil {
        background: var(--color-primario);
        color: #ffffff;
        font-size: 11px;
        padding: 2px 8px;
        border-radius: 99px;
    }

    .tienda-sidebar {
        display: none;
        width: 100%;
        position: static;
        max-height: none;
        overflow: visible;
    }

    .tienda-sidebar.abierto-movil {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 14px;
        animation: fadeInDown 0.22s ease;
    }

    .tienda-sidebar .sidebar-widget {
        margin-bottom: 0;
    }

    .grid-productos,
    .grid-tienda {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .detalle-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 24px;
    }
}

/* --- B.2) TABLETS VERTICALES (iPad / Galaxy Tab en Retrato <= 860px) --- */
@media (max-width: 860px) {
    .grid-productos,
    .grid-tienda {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

/* --- C) DISPOSITIVOS MÓVILES Y TABLETS PEQUEÑAS (<= 768px) --- */
@media (max-width: 768px) {
    /* Mostrar Topbar compacto con accesos a Cuenta / Login / Admin */
    .topbar {
        display: block !important;
        padding: 6px 0;
    }
    .topbar-izq {
        display: none !important;
    }
    .topbar-contenido {
        justify-content: center;
    }
    .topbar-der {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px;
        font-size: 12px;
    }

    /* Header distribuido en 2 filas limpias: Fila 1 (Logo + Carrito), Fila 2 (Buscador 100%) */
    .header-principal {
        padding: 12px 0;
    }
    .header-grid {
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo acciones"
            "buscador buscador";
        align-items: center;
        gap: 12px;
    }
    .logo-box {
        grid-area: logo;
    }
    .logo-img-principal {
        max-height: 50px !important;
    }
    .acciones-box {
        grid-area: acciones;
        justify-self: end;
    }
    .buscador-box {
        grid-area: buscador;
        width: 100%;
        max-width: 100%;
    }
    .buscador-cat select {
        max-width: 130px;
        font-size: 12px;
        padding: 0 8px;
    }
    .buscador-form input {
        font-size: 13.5px;
        padding: 0 12px;
    }

    /* Navegación principal deslizable horizontalmente tipo App */
    .nav-flex {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .menu-categorias-dropdown {
        width: 100%;
    }
    .btn-categorias {
        width: 100%;
        justify-content: space-between;
        height: 44px;
        font-size: 13px;
    }
    .lista-categorias-drop {
        position: static;
        width: 100%;
        box-shadow: none;
        border-left: none;
        border-right: none;
    }
    .menu-principal {
        display: flex;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 8px 4px;
        gap: 6px;
        width: 100%;
    }
    .menu-principal::-webkit-scrollbar {
        display: none;
    }
    .menu-principal li {
        flex-shrink: 0;
    }
    .menu-principal li a {
        padding: 7px 12px;
        font-size: 13px;
        white-space: nowrap;
        border-radius: 99px;
    }

    /* Hero Slider y Banners en Móvil */
    .seccion-hero {
        padding: 14px 0;
    }
    .hero-slider {
        min-height: 290px;
    }
    .slide-item {
        padding: 24px 20px;
        min-height: 290px;
    }
    .slide-titulo {
        font-size: 22px;
        line-height: 1.25;
    }
    .slide-subtitulo {
        font-size: 13.5px;
        margin-bottom: 16px;
    }

    /* Encabezados de sección y pestañas en Inicio */
    .seccion-cabecera {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .tabs-botones {
        display: flex;
        overflow-x: auto;
        width: 100%;
        gap: 6px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .tabs-botones::-webkit-scrollbar {
        display: none;
    }
    .tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 7px 14px;
        font-size: 13px;
    }

    /* Cabecera de Tienda / Ordenamiento */
    .tienda-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px;
    }
    .toolbar-ordenar {
        width: 100%;
    }
    .toolbar-ordenar form {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 8px;
    }
    .toolbar-ordenar select {
        flex: 1;
        margin-left: 0;
        max-width: 220px;
    }

    /* Grilla de Productos en Móvil (2 columnas estilo app e-commerce) */
    .grid-productos,
    .grid-tienda {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    .tarjeta-producto {
        padding: 12px;
        border-radius: 12px;
    }
    .tarjeta-img-wrap {
        height: 145px;
        margin-bottom: 8px;
    }
    .tarjeta-titulo {
        font-size: 13px;
        line-height: 1.35;
        height: 36px;
    }
    .tarjeta-precios .precio-actual {
        font-size: 16px;
    }
    .tarjeta-precios .precio-anterior {
        font-size: 12px;
    }
    .btn-tarjeta-carrito {
        padding: 9px 10px;
        font-size: 12.5px;
    }

    /* Ficha de Detalle de Producto en Móvil */
    .seccion-detalle-producto {
        padding: 16px 0 40px;
    }
    .detalle-grid {
        padding: 16px;
        border-radius: 12px;
        gap: 20px;
    }
    .imagen-principal-caja {
        height: 260px;
        padding: 16px;
    }
    .detalle-galeria-miniaturas {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .detalle-galeria-miniaturas::-webkit-scrollbar {
        display: none;
    }
    .miniatura-var-btn {
        width: 58px;
        height: 58px;
        flex-shrink: 0;
    }
    .sellos-confianza {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .sello-item {
        display: flex;
        align-items: center;
        gap: 10px;
        text-align: left;
        padding: 10px 14px;
    }
    .sello-item i {
        margin-bottom: 0;
    }
    .detalle-titulo {
        font-size: 20px;
    }
    .detalle-precios-box {
        flex-wrap: wrap;
        gap: 10px;
    }
    .precio-actual-grande {
        font-size: 26px;
    }
    .compra-controles {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .selector-cantidad {
        justify-content: space-between;
        width: 100%;
    }
    .selector-cantidad input {
        flex: 1;
    }
    .compra-controles .btn-primario-grande {
        width: 100%;
        justify-content: center;
    }
    .iconos-tarjetas {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Pestañas de descripción en detalle */
    .contenedor-tabs-detalle {
        padding: 18px 14px;
    }
    .detalle-tabs-nav {
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        gap: 6px;
    }
    .detalle-tabs-nav::-webkit-scrollbar {
        display: none;
    }
    .dtab-btn {
        padding: 10px 14px;
        font-size: 13.5px;
        flex-shrink: 0;
    }

    /* Formularios en Checkout y Perfil: 1 sola columna limpia */
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }
    .campo-full {
        grid-column: span 1 !important;
    }

    /* Acciones del Carrito */
    .carrito-acciones-barra {
        flex-direction: column;
        gap: 12px;
    }
    .carrito-acciones-barra > a,
    .acciones-derecha,
    .acciones-derecha > a,
    .acciones-derecha > button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .acciones-derecha {
        flex-direction: column;
    }

    /* Toast adaptado a pantalla móvil */
    .toast-notificacion {
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 12px 16px;
        font-size: 13px;
    }
}

/* --- D) TABLA DE CARRITO CONVERTIDA EN TARJETAS MÓVILES (<= 640px) --- */
@media (max-width: 640px) {
    .tabla-carrito thead {
        display: none;
    }
    .tabla-carrito,
    .tabla-carrito tbody,
    .tabla-carrito tr,
    .tabla-carrito td {
        display: block;
        width: 100%;
    }
    .tabla-carrito tr {
        position: relative;
        padding: 14px;
        border-bottom: 2px solid #e2e8f0;
        background: #ffffff;
    }
    .tabla-carrito td {
        border-bottom: none;
        padding: 6px 0;
    }
    .tabla-carrito td.td-img {
        text-align: center;
        margin-bottom: 6px;
    }
    .tabla-carrito td.td-img img {
        width: 84px;
        height: 84px;
        margin: 0 auto;
    }
    .tabla-carrito td.td-nombre {
        text-align: center;
        padding-bottom: 10px;
        border-bottom: 1px dashed #e2e8f0;
        margin-bottom: 6px;
    }
    .tabla-carrito td[data-label] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13.5px;
    }
    .tabla-carrito td[data-label]::before {
        content: attr(data-label);
        font-weight: 700;
        color: #64748b;
        font-size: 12.5px;
    }

    /* Modal de confirmación en móvil */
    .modal-confirmar-caja {
        padding: 24px 18px 20px;
    }
    .modal-confirmar-botones {
        flex-direction: column-reverse;
    }
    .modal-confirmar-botones .btn {
        width: 100%;
    }
}

/* --- E) CELULARES COMPACTOS (<= 480px) --- */
@media (max-width: 480px) {
    .pagina-tienda-layout {
        padding: 14px 10px;
    }
    .grid-productos,
    .grid-tienda {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .tarjeta-producto {
        padding: 10px;
        border-radius: 10px;
    }
    .tarjeta-img-wrap {
        height: 125px;
        margin-bottom: 6px;
    }
    .tarjeta-categoria {
        font-size: 11px;
    }
    .tarjeta-titulo {
        font-size: 12px;
        line-height: 1.3;
        height: 32px;
        margin-bottom: 6px;
    }
    .swatch-item-cat.tam-cat-md {
        width: 22px;
        height: 22px;
    }
    .swatch-item-cat.tam-cat-lg {
        width: 26px;
        height: 26px;
    }
    .swatch-slider-btn {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }
    .tarjeta-rating {
        margin-bottom: 6px;
        gap: 4px;
    }
    .tarjeta-rating .estrellas {
        font-size: 12px;
    }
    .ventas-txt {
        font-size: 10px;
    }
    .tarjeta-precios {
        margin-bottom: 10px;
        gap: 4px;
    }
    .tarjeta-precios .precio-actual {
        font-size: 14.5px;
    }
    .tarjeta-precios .precio-anterior {
        font-size: 11px;
    }
    .btn-tarjeta-carrito,
    .btn-tarjeta-agotado {
        padding: 8px 6px;
        font-size: 11.5px;
        gap: 4px;
    }
    .buscador-cat {
        display: none;
    }
    .carrito-textos {
        display: none;
    }
    .carrito-btn {
        padding: 8px 12px;
    }
    .producto-swatches-panel {
        padding: 12px;
    }
    .swatch-barra-enlace-directo > div {
        width: 100%;
    }
    .btn-copiar-enlace-var {
        flex: 1;
        justify-content: center;
    }
    .alerta-stock-form {
        flex-direction: column;
    }
    .alerta-stock-form input[type="text"],
    .alerta-stock-form .btn {
        width: 100%;
    }
    .mayorista-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .mayorista-footer .btn {
        width: 100%;
        justify-content: center;
    }
}

/* --- F) PANTALLAS ULTRA PEQUEÑAS (<= 360px) --- */
@media (max-width: 360px) {
    .grid-productos,
    .grid-tienda,
    .categorias-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   BLOQUE COMPLETO DE 10 MEJORAS E-COMMERCE (DRAWER, LIVE SEARCH, WISHLIST,
   COMPARADOR, WHATSAPP, RESEÑAS, CUPONES Y BARRA INFERIOR MÓVIL)
   ========================================================================== */

/* 1. Botones de Acción Rápida en el Header (Favoritos y Comparador) */
.accion-icono-rapido {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    flex-shrink: 0;
}

.accion-icono-rapido:hover {
    border-color: var(--color-primario);
    color: var(--color-primario);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.accion-icono-rapido .badge-contador {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    padding: 0 5px;
}

.badge-rosa { background: #e11d48 !important; }
.badge-sec  { background: #2563eb !important; }

/* 2. Buscador Inteligente en Vivo (Live Search Dropdown) */
.buscador-sugerencias-caja {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    border: 1px solid #e2e8f0;
    z-index: 9200;
    overflow: hidden;
}

.sugerencias-lista {
    max-height: 360px;
    overflow-y: auto;
}

.sugerencia-item-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    color: #0f172a;
    transition: background 0.18s ease;
}

.sugerencia-item-link:hover {
    background: #f8fafc;
}

.sugerencia-thumb {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
}

.sugerencia-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sugerencia-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sugerencia-cat {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.sugerencia-nombre {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sugerencia-precio {
    text-align: right;
    flex-shrink: 0;
}

.sugerencia-precio strong {
    display: block;
    font-size: 14px;
    color: var(--color-primario);
    font-weight: 800;
}

.sugerencia-precio small {
    font-size: 11px;
    color: #94a3b8;
    text-decoration: line-through;
}

.sugerencias-ver-todos {
    display: block;
    text-align: center;
    padding: 10px 14px;
    background: #f8fafc;
    color: var(--color-primario);
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    border-top: 1px solid #e2e8f0;
}

.sugerencias-ver-todos:hover {
    background: #eff6ff;
}

.sugerencia-vacia {
    padding: 18px;
    text-align: center;
    font-size: 13px;
    color: #64748b;
}

/* 3. Acciones Flotantes en Tarjeta de Producto (Vista Rápida, Favorito y Comparar) */
.tarjeta-acciones-flotantes {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 6;
}

.tarjeta-acciones-flotantes .btn-vista-rapida {
    position: static;
}

.btn-accion-flotante {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.94);
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.1);
    transition: all 0.2s ease;
}

.btn-accion-flotante:hover {
    transform: scale(1.08);
    color: #0f172a;
}

.btn-accion-flotante.btn-toggle-favorito.activo {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #e11d48;
}

.btn-accion-flotante.btn-toggle-comparar.activo {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

/* 4. Mini-Carrito Lateral Deslizable (Off-Canvas Cart Drawer) */
.drawer-carrito-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(3px);
    z-index: 9800;
    opacity: 0;
    visibility: hidden;
    transition: all 0.28s ease;
    display: flex;
    justify-content: flex-end;
}

.drawer-carrito-overlay.activo {
    opacity: 1;
    visibility: visible;
}

.drawer-carrito-panel {
    width: 100%;
    max-width: 420px;
    height: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    box-shadow: -12px 0 35px rgba(15, 23, 42, 0.25);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-carrito-overlay.activo .drawer-carrito-panel {
    transform: translateX(0);
}

.drawer-carrito-cabecera {
    padding: 18px 20px;
    background: #0f172a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.drawer-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 800;
}

.drawer-badge-cant {
    background: var(--color-primario);
    color: #ffffff;
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 99px;
}

.drawer-btn-cerrar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    cursor: pointer;
    font-size: 15px;
}

.drawer-barra-envio {
    padding: 12px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.drawer-envio-texto {
    font-size: 12.5px;
    color: #334155;
    margin-bottom: 7px;
}

.drawer-progreso-pista {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 99px;
    overflow: hidden;
}

.drawer-progreso-relleno {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #10b981);
    border-radius: 99px;
    transition: width 0.4s ease;
}

.drawer-carrito-cuerpo {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.drawer-item-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

.drawer-item-img {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #f1f5f9;
}

.drawer-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drawer-item-info {
    flex: 1;
    min-width: 0;
}

.drawer-item-titulo {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawer-item-var {
    display: block;
    font-size: 11px;
    color: #0284c7;
    font-weight: 600;
    margin-top: 2px;
}

.drawer-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
}

.drawer-item-sub {
    color: #0f172a;
    font-weight: 800;
}

.drawer-item-quitar {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 6px;
    font-size: 14px;
}

.drawer-item-quitar:hover {
    color: #ef4444;
}

.drawer-vacio-estado {
    text-align: center;
    padding: 48px 16px;
    color: #64748b;
}

.drawer-vacio-estado i {
    font-size: 42px;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.drawer-carrito-pie {
    padding: 16px 20px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.drawer-fila-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    margin-bottom: 10px;
    color: #0f172a;
}

.drawer-acciones-botones {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 5. Modal Comparador de Productos */
.modal-comparador-card {
    max-width: 1020px;
}

.comparador-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

.comparador-cabecera h3 {
    margin: 0;
    font-size: 18px;
}

.comparador-cabecera p {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: #64748b;
}

.comparador-cuerpo-scroll {
    overflow-x: auto;
}

.tabla-comparador-modal {
    width: 100%;
    border-collapse: collapse;
    min-width: 580px;
}

.tabla-comparador-modal th,
.tabla-comparador-modal td {
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    text-align: center;
    vertical-align: middle;
    font-size: 13px;
}

.tabla-comparador-modal th {
    background: #f8fafc;
    color: #334155;
    font-weight: 800;
    width: 140px;
    text-align: left;
}

.comp-celda-prod img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin: 0 auto 8px;
    display: block;
}

.comp-cat {
    display: block;
    font-size: 11px;
    color: #64748b;
}

.comp-nombre {
    font-weight: 800;
    color: #0f172a;
    text-decoration: none;
    font-size: 13.5px;
}

/* 6. Botón Flotante de WhatsApp y "Pedir por WhatsApp" en Detalle */
.whatsapp-flotante-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
    z-index: 8900;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.whatsapp-flotante-btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 14px 30px rgba(37, 211, 102, 0.55);
    color: #ffffff;
}

.whatsapp-flotante-tooltip {
    position: absolute;
    right: calc(100% + 12px);
    background: #0f172a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 99px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.whatsapp-flotante-btn:hover .whatsapp-flotante-tooltip {
    opacity: 1;
}

.detalle-acciones-extra {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 18px;
}

.btn-pedir-whatsapp {
    flex: 1;
    min-width: 220px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 10px;
    background: #ecfdf5;
    border: 1.5px solid #10b981;
    color: #047857;
    font-weight: 800;
    font-size: 13.5px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-pedir-whatsapp:hover {
    background: #10b981;
    color: #ffffff;
}

.btn-extra-sec {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-extra-sec.activo {
    border-color: #e11d48;
    color: #e11d48;
    background: #fff1f2;
}

/* 7. Pestaña de Reseñas y Calificaciones con Estrellas */
.resenas-layout-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 28px;
    align-items: start;
}

.resenas-resumen-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.resenas-puntaje-grande {
    text-align: center;
    padding-right: 20px;
    border-right: 1px solid #e2e8f0;
}

.resenas-puntaje-grande strong {
    font-size: 32px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1;
}

.estrellas-doradas {
    color: #f59e0b;
    font-size: 16px;
    margin: 4px 0;
}

.resenas-sello-verificado {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.resenas-sello-verificado i {
    font-size: 28px;
    color: #10b981;
}

.resenas-items-contenedor {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.resena-tarjeta-item {
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

.resena-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.resena-autor-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #ffffff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resena-autor-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.badge-compra-verificada {
    font-size: 11px;
    color: #059669;
    background: #ecfdf5;
    padding: 2px 8px;
    border-radius: 99px;
    margin-left: 6px;
}

.resena-estrellas-item {
    color: #f59e0b;
    font-size: 15px;
    letter-spacing: 1px;
}

.resena-titulo-item {
    font-size: 14.5px;
    margin: 4px 0;
    color: #0f172a;
}

.resena-comentario-item {
    font-size: 13.5px;
    color: #475569;
    margin: 0;
}

.resena-form-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px;
}

.selector-estrellas-input {
    display: flex;
    align-items: center;
    gap: 4px;
}

.estrella-btn-sel {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #cbd5e1;
    cursor: pointer;
    padding: 0 2px;
    transition: transform 0.15s ease, color 0.15s ease;
}

.estrella-btn-sel.activo,
.estrella-btn-sel:hover {
    color: #f59e0b;
    transform: scale(1.12);
}

/* 8. Cupones en Carrito */
.cupon-carrito-box {
    margin: 14px 0;
    padding: 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
}

.form-cupon-carrito {
    display: flex;
    gap: 8px;
}

.form-cupon-carrito input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}

.cupon-activo-badge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
}

.btn-quitar-cupon {
    color: #dc2626;
    font-size: 15px;
}

/* 9. Barra Adhesiva de Compra en Ficha de Producto (Sticky Add-to-Cart) */
.barra-sticky-producto {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -8px 25px rgba(15, 23, 42, 0.1);
    padding: 10px 0;
    z-index: 8800;
    transform: translateY(110%);
    transition: transform 0.28s ease;
}

.barra-sticky-producto.visible {
    transform: translateY(0);
}

.barra-sticky-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sticky-prod-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sticky-prod-info img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e2e8f0;
}

.sticky-prod-titulo {
    display: block;
    font-size: 14px;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-prod-var {
    display: block;
    font-size: 12px;
    color: #0284c7;
    font-weight: 600;
}

.sticky-prod-acciones {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.sticky-prod-precio {
    font-size: 18px;
    font-weight: 900;
    color: var(--color-primario);
}

/* 10. Barra Inferior Fija en Móvil (Sticky Mobile Bottom App Bar) */
.barra-movil-inferior {
    display: none;
}

@media (max-width: 768px) {
    .resenas-layout-grid {
        grid-template-columns: 1fr;
    }

    .barra-movil-inferior {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 62px;
        background: #ffffff;
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        z-index: 9000;
    }

    .movil-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: #64748b;
        text-decoration: none;
        font-size: 10.5px;
        font-weight: 700;
        background: transparent;
        border: none;
        cursor: pointer;
    }

    .movil-nav-item i {
        font-size: 18px;
    }

    .movil-nav-item.activo,
    .movil-nav-item:hover {
        color: var(--color-primario);
    }

    .movil-icono-badge {
        position: relative;
        display: inline-flex;
    }

    .movil-mini-badge {
        position: absolute;
        top: -5px;
        right: -9px;
        background: #e11d48;
        color: #ffffff;
        font-size: 9.5px;
        font-weight: 800;
        min-width: 16px;
        height: 16px;
        border-radius: 99px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
    }

    body {
        padding-bottom: 66px;
    }

    .whatsapp-flotante-btn {
        bottom: 76px;
        right: 16px;
        width: 48px;
        height: 48px;
        font-size: 25px;
    }

    .barra-sticky-producto {
        bottom: 62px;
    }

/* ==========================================================================
   PESTAÑA ESPECIFICACIONES TÉCNICAS DEL PRODUCTO
   ========================================================================== */
.especificaciones-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 32px;
    margin-top: 14px;
    align-items: start;
}

.especificaciones-tabla-wrap {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.especificaciones-tabla {
    width: 100%;
    border-collapse: collapse;
}

.especificaciones-tabla tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease;
}

.especificaciones-tabla tr:last-child {
    border-bottom: none;
}

.especificaciones-tabla tr:nth-child(even) {
    background-color: #f8fafc;
}

.especificaciones-tabla tr:hover {
    background-color: #f0fdf4;
}

.especificaciones-tabla th {
    width: 38%;
    padding: 12px 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: #334155;
    text-align: left;
    vertical-align: middle;
    background: transparent;
}

.especificaciones-tabla th i {
    width: 20px;
    margin-right: 8px;
    color: #ec4899;
    font-size: 13px;
    text-align: center;
}

.especificaciones-tabla td {
    padding: 12px 18px;
    font-size: 14px;
    color: #0f172a;
    vertical-align: middle;
}

.especificaciones-badges-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.especificaciones-badge-color {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 99px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

.especificaciones-punto-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.especificaciones-badge-talla {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
}

.especificaciones-cuidados-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.card-cuidado-textil {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.card-cuidado-icono {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.card-cuidado-icono.azul { background: #e0f2fe; color: #0284c7; }
.card-cuidado-icono.verde { background: #dcfce7; color: #16a34a; }
.card-cuidado-icono.naranja { background: #fef3c7; color: #d97706; }
.card-cuidado-icono.morado { background: #f3e8ff; color: #9333ea; }

.card-cuidado-info h4 {
    margin: 0 0 4px;
    font-size: 13.5px;
    color: #0f172a;
    font-weight: 700;
}

.card-cuidado-info p {
    margin: 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .especificaciones-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}