/* =========================================================
   VARIABLES GLOBALES (Premium UI)
   ========================================================= */
:root {
    --primary-color: #0056b3;
    --secondary-color: #ff6b00;
    --whatsapp-color: #25D366;
    --bg-color: #f8fafc;
    --text-color: #334155;
    --text-muted: #64748b;
    --card-bg: #ffffff;
    --border-color: #e2e8f0;
    
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.02);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Acá se apagó el parpadeo táctil con: -webkit-tap-highlight-color: transparent; */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
body { background-color: var(--bg-color); color: var(--text-color); line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.has-sticky-bar { padding-bottom: 80px; }
body.admin-body { background-color: #f1f5f9; display: flex; }

.special-event-bar {
    background-color: #dc2626; color: white; text-align: center; padding: 10px;
    font-weight: 700; font-size: 14px; display: none; letter-spacing: 0.5px;
}

/* =========================================================
   HEADER Y NAVEGACIÓN
   ========================================================= */
/* HEADER estilo Frávega: blanco, sobrio, íconos de línea finos.
   NOTA: el bloque "PARCHE" más abajo refuerza estas reglas con !important. */
.main-header {
    background-color: #ffffff; padding: 12px 15px; display: flex;
    flex-direction: column; gap: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    position: sticky; top: 0; z-index: 100;
}
.header-top { display: flex; justify-content: space-between; align-items: center; }
.logo { display: inline-flex; align-items: center; line-height: 0; font-size: 22px; font-weight: 800; color: var(--text-color); text-decoration: none; letter-spacing: -0.5px; }
/* FASE A — logo de marca en el header (default estático; si hay logo subido por
   el admin, el JS reemplaza el contenido de .logo y ese gana). */
.logo-img { height: 38px; width: auto; display: block; }
.admin-brand-logo { height: 34px; width: auto; display: block; }
.header-actions { display: flex; align-items: center; gap: 14px; }

/* Íconos de línea unificados (lupa, corazón, carrito, hamburguesa) */
.hdr-ico { width: 24px; height: 24px; display: block; color: var(--text-color); }

/* Carrito y corazón: botones de ícono planos, sin scale (evita el parpadeo) */
.cart-container,
.wishlist-container {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; /* SESIÓN 3 (móvil): hit area ≥44px */
    cursor: pointer; text-decoration: none; color: var(--text-color);
    line-height: 1; transition: color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.cart-container:hover .hdr-ico { color: var(--primary-color); }
.wishlist-container:hover .hdr-ico { color: #ef4444; }
.cart-container:focus-visible, .wishlist-container:focus-visible,
.menu-toggle:focus-visible, #global-search-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; border-radius: 6px; }

.cart-count, .wishlist-count {
    position: absolute; top: 3px; right: 1px;                 /* SESIÓN 15 */
    box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background-color: var(--secondary-color); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
    border-radius: 999px;
    box-shadow: 0 0 0 2px var(--card-bg), 0 1px 2px rgba(0,0,0,0.15); /* aro blanco que lo despega del ícono */
}
.wishlist-count { background-color: #ef4444; display: none; }

/* Hamburguesa: ícono plano, sin recuadro azul, gris sobrio */
.menu-toggle, #menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; padding: 4px; margin: 0;
    min-width: 44px; min-height: 44px; /* SESIÓN 3 (móvil): hit area ≥44px */
    color: var(--text-color); cursor: pointer; line-height: 1;
    transition: color 0.18s ease; -webkit-tap-highlight-color: transparent;
}
.menu-toggle:hover .hdr-ico, #menu-btn:hover .hdr-ico { color: var(--primary-color); }

/* Buscador: una sola píldora gris sobria con lupa adentro (sin naranja) */
.search-bar {
    display: flex; align-items: center; width: 100%;
    background-color: #f1f3f5; border: 1px solid #e2e6ea;
    border-radius: var(--radius-md); overflow: hidden;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}
.search-bar:focus-within { background-color: #fff; border-color: #cbd2d9; }
.search-bar input { flex: 1; padding: 11px 14px; border: none; background: transparent; font-size: 15px; color: var(--text-color); outline: none; }
.search-bar input::placeholder { color: #9aa5b1; }
.search-bar button {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 12px; height: 100%; min-height: 42px;
    background: transparent; color: #6b7280; border: none; cursor: pointer;
    transition: color 0.18s ease;
}
.search-bar button:hover { background: transparent; color: var(--primary-color); }
.search-bar button .hdr-ico { width: 20px; height: 20px; color: currentColor; }

.sidebar { position: fixed; top: 0; left: -300px; width: 300px; height: 100%; background-color: #ffffff; box-shadow: 5px 0 15px rgba(0,0,0,0.1); transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; display: flex; flex-direction: column; }
.sidebar.open { left: 0; }
.sidebar-header { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 14px; background-color: #ffffff; color: #0f172a; border-bottom: 1px solid #f1f5f9; } /* SESIÓN 3 (móvil): header fijo arriba, no scrollea */
.sidebar-header h3 { font-size: 17px; font-weight: 600; color: #0f172a; letter-spacing: -0.2px; margin: 0; }
#close-menu-btn { background: none; border: none; color: #94a3b8; font-size: 20px; cursor: pointer; transition: transform 0.2s, color 0.2s; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: -10px -10px -10px 0; } /* SESIÓN 3 (móvil): hit area 44px sin agrandar el header */
#close-menu-btn:hover { transform: scale(1.15); color: #475569; }
.sidebar-links { flex: 0 0 auto; list-style: none; padding: 8px 0; margin: 0; border-bottom: 1px solid #f1f5f9; } /* SESIÓN 3 (móvil): accesos fijos, no scrollean */
.sidebar-links li { margin: 0; }
.sidebar-links a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #334155; font-size: 15px; font-weight: 500; padding: 13px 20px; transition: background-color 0.15s, color 0.15s; }
.sidebar-links a:hover { background-color: #f8fafc; color: #0f172a; }
.sidebar-links a.is-active { color: var(--primary-color); }
.sidebar-links .sb-ico { width: 19px; height: 19px; flex: 0 0 auto; color: #64748b; }

.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(15, 23, 42, 0.6); backdrop-filter: blur(2px); display: none; z-index: 999; animation: fadeIn 0.3s; }
.overlay.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* =========================================================
   INICIO (Módulos Lego)
   ========================================================= */
.hero-banner-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; height: 240px; background: #e2e8f0; margin-bottom: 30px; }
.hero-banner-slider::-webkit-scrollbar { display: none; }
.hero-slide { flex: 0 0 100%; scroll-snap-align: start; background-size: cover; background-position: center; }

.categories-highlights { padding: 10px 0 20px; }

/* SESIÓN 5 (velocidad percibida) — ESQUELETO DE CARGA DEL HOME.
   Mientras el JS baja el catálogo (~700KB) y arma el home, el <main> quedaba casi vacío
   y el footer "subía" con un flash en blanco. Acá reservamos altura y mostramos un shimmer
   SOLO mientras #home-builder-canvas está vacío. Los ::before/::after NO cuentan como hijos,
   así que no disparan el observer que ubica las categorías. Apenas el JS inyecta el primer
   bloque real (o marca .hb-ready), :empty deja de matchear y el esqueleto desaparece solo. */
#home-builder-canvas:empty:not(.hb-ready) { display: block; min-height: 62vh; padding: 15px; box-sizing: border-box; }
#home-builder-canvas:empty:not(.hb-ready)::before,
#home-builder-canvas:empty:not(.hb-ready)::after {
    content: ""; display: block; border-radius: var(--radius-md);
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%; animation: shimmer 1.4s infinite;
}
#home-builder-canvas:empty:not(.hb-ready)::before { height: 240px; margin-bottom: 24px; }
#home-builder-canvas:empty:not(.hb-ready)::after { height: 260px; }
@media (min-width: 768px) {
    #home-builder-canvas:empty:not(.hb-ready)::before { height: 300px; }
}
.categories-container { display: flex; overflow-x: auto; gap: 20px; padding: 6px 15px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.categories-container::-webkit-scrollbar { display: none; }
.category-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; gap: 8px; scroll-snap-align: start; min-width: 75px; }
.category-icon { 
    width: 65px; height: 65px; background-color: var(--card-bg); 
    border-radius: 50%; display: flex; justify-content: center; align-items: center; 
    font-size: 28px; box-shadow: var(--shadow-md); transition: var(--transition); 
    border: 2px solid transparent; 
}
.category-item:hover .category-icon { transform: translateY(-5px) scale(1.05); box-shadow: var(--shadow-hover); border-color: var(--primary-color); }
.category-name { font-size: 13px; font-weight: 600; color: var(--text-color); text-align: center; transition: color 0.2s; }
.category-item:hover .category-name { color: var(--primary-color); }

.double-banners-section .double-banner-container { display: flex; gap: 15px; align-items: flex-start; }
/* S29 — cada mitad es un <a> con <img> adentro. "Llena" (cover) usa caja 3/2 fija y
   recorta; "Completa" (contain) abraza la imagen (sin bandas arriba/abajo). */
.double-banner-container .banner-half { flex: 1; display: block; border-radius: var(--radius-md); background: #f1f5f9; transition: var(--transition); box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.double-banner-container .banner-half-img { display: block; width: 100%; }
.double-banner-container .banner-half--cover { aspect-ratio: 3 / 2; }
.double-banner-container .banner-half--cover .banner-half-img { height: 100%; object-fit: cover; }
.double-banner-container .banner-half--contain .banner-half-img { height: auto; }
.double-banner-container .banner-half::after { content: ''; position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.05); transition: var(--transition); }
.double-banner-container .banner-half:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.double-banner-container .banner-half:hover::after { background: transparent; }

/* =========================================================
   TARJETAS DE PRODUCTO
   ========================================================= */
.product-card {
    background-color: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); overflow: hidden; display: flex;
    flex-direction: column; box-shadow: var(--shadow-md); transition: var(--transition);
    position: relative; cursor: pointer; height: 100%;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: transparent; }
.discount-badge { position: absolute; top: 10px; right: 10px; background-color: #ef4444; color: white; font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: var(--radius-sm); box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4); z-index: 2; letter-spacing: 0.5px; }

.image-placeholder { height: 180px; background-color: #f1f5f9; background-size: contain; background-repeat: no-repeat; background-position: center; border-bottom: 1px solid var(--border-color); }
.product-info { padding: 15px; display: flex; flex-direction: column; flex-grow: 1; }
.product-title { font-size: 14px; font-weight: 500; color: var(--text-color); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 42px; line-height: 1.4; }
.product-price { font-size: 18px; font-weight: 800; color: #0f172a; margin-bottom: 15px; }

.buy-btn { background-color: #f1f5f9; color: var(--primary-color); border: none; border-radius: var(--radius-sm); padding: 10px; font-weight: 700; cursor: pointer; transition: var(--transition); text-align: center; }
.buy-btn:hover { background-color: var(--primary-color); color: white; }
.add-to-cart-quick { background-color: var(--secondary-color); color: white; border-radius: 8px; box-shadow: 0 2px 6px rgba(255, 107, 0, 0.18); transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease; }
.add-to-cart-quick:hover { background-color: #e66000; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(255, 107, 0, 0.30); }
.add-to-cart-quick:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(255, 107, 0, 0.18); }

/* EXCLUSIVO PARA LOS CARRUSELES DEL INICIO (Acá sí conservan el ancho fijo) */
.carousel-section { padding: 0 15px; margin-bottom: 40px; }
/* SESIÓN 4 (PC) — flechas ‹ › para desplazar los carruseles de productos con el mouse.
   En celular no aparecen (el swipe táctil ya alcanza). Se ocultan al llegar a los extremos. */
.hc-wrap { position: relative; }
.hc-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #e2e8f0; background: #fff; color: #0f172a; font-size: 24px; line-height: 1; display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 12px rgba(15,23,42,.14); transition: background .15s ease, box-shadow .15s ease, opacity .18s ease; }
.hc-arrow:hover { background: #f8fafc; box-shadow: 0 6px 18px rgba(15,23,42,.20); }
.hc-prev { left: 2px; }
.hc-next { right: 2px; }
.hc-arrow.is-hidden { pointer-events: none; }
@media (min-width: 768px) {
  .hc-arrow { display: inline-flex; opacity: 0; }
  .hc-wrap:hover .hc-arrow:not(.is-hidden) { opacity: 1; }
}
.section-title { font-size: 20px; font-weight: 800; margin-bottom: 15px; color: #0f172a; display: flex; align-items: center; gap: 10px; }
.section-title::before { content: ''; display: block; width: 4px; height: 20px; background-color: var(--secondary-color); border-radius: 2px; }

.product-carousel .product-card {
    min-width: 180px;
    max-width: 250px;
    flex: 0 0 auto;
}

/* =========================================================
   PÁGINA DE CATEGORÍAS Y GRILLA EXACTA (2 Móvil / 5 PC)
   ========================================================= */
.category-page-main { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.category-layout { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }

/* REGLA MAESTRA PARA ANULAR EL ANCHO FIJO DE LAS TARJETAS EN LA GRILLA */
.products-grid-container .product-card {
    min-width: 0 !important;
    max-width: none !important;
    width: 100%;
}

.products-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 PRODUCTOS POR RENGLÓN EN CELULAR */
    gap: 12px; /* SESIÓN 3 (móvil): un poco más de aire entre tarjetas */
    width: 100%;
}
.products-grid-container .image-placeholder { height: 132px; }
.products-grid-container .product-info { padding: 10px; }
.products-grid-container .product-title { font-size: 12px; height: 34px; margin-bottom: 5px; }
.products-grid-container .product-price { font-size: 15px; margin-bottom: 8px; }
.products-grid-container .buy-btn { font-size: 11px; padding: 8px; }

/* Filtros Sidebar */
.filters-sidebar { background: white; border-radius: var(--radius-md); padding: 20px; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); }
.filter-group { margin-bottom: 20px; }
.filter-group h4 { font-size: 15px; margin-bottom: 10px; color: #0f172a; border-bottom: 1px solid #e2e8f0; padding-bottom: 5px; }
.filter-group label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #475569; margin-bottom: 6px; cursor: pointer; }

#mobile-filter-btn { display: block; width: 100%; background: var(--primary-color); color: white; border: none; padding: 12px; border-radius: var(--radius-sm); font-weight: 600; margin-bottom: 20px; cursor: pointer; }
.apply-filters-mobile { display: block; width: 100%; background: var(--secondary-color); color: white; border: none; padding: 12px; border-radius: var(--radius-sm); font-weight: 600; margin-top: 20px; cursor: pointer; }

/* =========================================================
   PÁGINA DE PRODUCTO INDIVIDUAL
   ========================================================= */
.breadcrumb { padding: 15px; font-size: 14px; color: #64748b; }
.back-link { text-decoration: none; color: var(--primary-color); font-weight: 500; transition: var(--transition); }
.back-link:hover { text-decoration: underline; }

.product-detail-container { padding: 20px; display: flex; flex-direction: column; gap: 20px; background: white; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin: 0 15px 30px; border: 1px solid var(--border-color); }
.modern-gallery { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.gallery-stage {
    position: relative;
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: #ffffff;
    overflow: hidden;
}
.gallery-main {
    width: 100%;
    height: 380px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: zoom-in;
    transition: background-size 0.3s ease;
}
.gallery-main:hover { background-size: 105%; }
.gallery-main.gallery-main--empty {
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8; font-size: 14px; cursor: default; background: #f1f5f9;
}
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.92);
    color: #334155;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    z-index: 2;
}
.gallery-arrow:hover { background: #fff; color: var(--primary-color); transform: translateY(-50%) scale(1.08); }
.gallery-arrow-prev { left: 10px; }
.gallery-arrow-next { right: 10px; }
.gallery-counter {
    position: absolute;
    bottom: 10px; right: 10px;
    background: rgba(15,23,42,0.72);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    z-index: 2;
}
.gallery-zoom-hint {
    position: absolute;
    bottom: 10px; left: 10px;
    background: rgba(255,255,255,0.92);
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.gallery-stage:hover .gallery-zoom-hint { opacity: 1; }
.gallery-stage.no-zoom .gallery-zoom-hint { display: none; }
.gallery-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.gallery-thumbs::-webkit-scrollbar { height: 6px; }
.gallery-thumbs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.gallery-thumb {
    flex: 0 0 64px;
    width: 64px; height: 64px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-color);
    background-color: #fff;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
}
.gallery-thumb:hover { border-color: #94a3b8; }
.gallery-thumb.active { border-color: var(--primary-color); }

/* Lightbox a pantalla completa */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.92);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lightboxIn 0.18s ease;
}
.lightbox-overlay.closing { animation: lightboxOut 0.15s ease forwards; }
@keyframes lightboxIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightboxOut { from { opacity: 1; } to { opacity: 0; } }
.lightbox-img {
    width: 86vw;
    height: 82vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.lightbox-close {
    position: absolute;
    top: 18px; right: 22px;
    width: 44px; height: 44px;
    border: none;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 22px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}
.lightbox-close:hover { background: rgba(255,255,255,0.25); }
.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px; height: 52px;
    border: none;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 34px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.lightbox-arrow:hover { background: rgba(255,255,255,0.28); }
.lightbox-prev { left: 22px; }
.lightbox-next { right: 22px; }
.lightbox-counter {
    position: absolute;
    bottom: 22px; left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    background: rgba(255,255,255,0.12);
    padding: 5px 14px;
    border-radius: 999px;
}

.product-info-full { display: flex; flex-direction: column; gap: 14px; }
.product-title-large { font-size: 23px; color: #0f172a; font-weight: 700; line-height: 1.25; }
/* SESIÓN 8 — bloque de precios en columna: lista rotulada arriba, contado grande,
   línea de medios de pago y "Ahorrás". Cada precio dice a qué medio aplica →
   se termina la confusión con el total de las cuotas. */
.price-box { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.price-list-old { color: #94a3b8; font-size: 13px; line-height: 1.3; }
.price-list-old del { text-decoration: line-through; }
.current-price { font-size: 32px; font-weight: 800; color: #0f172a; letter-spacing: -0.5px; line-height: 1.1; }
.price-methods { font-size: 12.5px; color: #475569; line-height: 1.5; margin: 0; }
.price-save { margin-top: 4px; align-self: flex-start; background: #f0fdf4; color: #166534; font-weight: 600; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.price-save[hidden] { display: none; }
@media (max-width: 400px) {
    .current-price { font-size: 28px; }        /* SESIÓN 8 — no desborda en pantallas angostas */
    .installment-amount { font-size: 20px; }
    .price-save { white-space: normal; }        /* si el ahorro es largo, que envuelva prolijo */
}

/* Lista sobria de beneficios (reemplaza cajas de color) */
.product-perks {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.product-perks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: #475569;
    line-height: 1.4;
}
.product-perks .perk-ico { font-size: 16px; flex-shrink: 0; line-height: 1.3; }
.product-perks strong { color: #0f172a; font-weight: 700; }
.product-perks .perk-ast { color: #16a34a; font-weight: 800; }
.product-perks .perk-note { margin-left: 6px; font-size: 11px; color: #94a3b8; }
.payment-methods { background: #f0fdf4; border: 1px solid #bbf7d0; padding: 15px; border-radius: var(--radius-md); }

/* --- CUOTA PROMINENTE EN PRODUCTO --- */
.installment-highlight {
    display: flex;
    flex-direction: column;      /* SESIÓN 8 — línea de cuota arriba, total debajo */
    align-items: flex-start;
    gap: 2px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-md);
    padding: 11px 15px;
}
.installment-line {              /* SESIÓN 8 — etiqueta + monto pegados, alineados a la izquierda */
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}
.installment-qty {
    font-size: 14px;
    font-weight: 600;
    color: #166534;
}
.installment-amount {
    font-size: 22px;
    font-weight: 800;
    color: #16a34a;
    white-space: nowrap;
}
.installment-total {             /* SESIÓN 8 — total del plan = precio de lista, dicho explícito */
    font-size: 12px;
    color: #166534;
    opacity: 0.85;
    margin: 0;
    line-height: 1.4;
}
.highlight-green { color: #16a34a; font-weight: 700; margin-bottom: 5px; }
.shipping-info { background: #f8fafc; border: 1px solid #e2e8f0; padding: 15px; border-radius: var(--radius-md); font-size: 14px; color: #475569; }
.product-description { margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.product-description h3 { font-size: 18px; margin-bottom: 10px; color: #0f172a; font-weight: 700; }
.product-description p { color: #475569; font-size: 15px; line-height: 1.6; }

.sticky-bottom-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: white; z-index: 900; }
/* =========================================================
   PRODUCTO — Barra de acción (rediseño UX/UI)
   Jerarquía: "Comprar por WhatsApp" es el CTA primario (sólido);
   "Agregar al carrito" es secundario (outline, color de marca).
   Iconos de línea consistentes con el header. Sin emojis.
   ========================================================= */
.sticky-bottom-bar { display: flex; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border-color); box-shadow: 0 -6px 20px rgba(15,23,42,0.07); }

.pdp-action {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 52px;
    padding: 0 18px;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.pdp-action svg { width: 21px; height: 21px; flex: 0 0 auto; }
.pdp-action:active { transform: translateY(1px); }
.pdp-action:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* Secundario — Agregar al carrito (outline naranja de marca sobre blanco) */
.pdp-action--cart {
    background: #ffffff;
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.pdp-action--cart:hover { background: #fff6ef; box-shadow: 0 4px 12px rgba(255,107,0,0.14); }

/* Primario — Comprar por WhatsApp (sólido, dominante). S19: verde de marca #25D366
   unificado con el checkout del carrito y medios-pago. */
.pdp-action--buy {
    flex: 1.35;
    background: #25D366;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37,211,102,0.28);
}
.pdp-action--buy:hover { background: #20BA56; box-shadow: 0 7px 20px rgba(37,211,102,0.34); transform: translateY(-2px); }

/* Sufijo del label que solo se muestra en pantallas grandes (mobile = corto) */
.pdp-action__more { display: none; }
@media (min-width: 768px) { .pdp-action__more { display: inline; } }

/* =========================================================
   PÁGINA DE CARRITO Y CHECKOUT  (rediseño visual + mobile)
   ========================================================= */
.cart-page-main { max-width: 1100px; margin: 0 auto; padding: 0 15px 40px; }
.cart-layout-container { margin-top: 4px; }
.cart-title { font-size: 26px; font-weight: 800; color: #0f172a; letter-spacing: -0.5px; margin-bottom: 18px; }
.cart-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }

/* Lista de productos como tarjeta única */
.cart-items-list {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.cart-item-row { display: flex; align-items: center; gap: 15px; padding: 16px; border-bottom: 1px solid var(--border-color); background: white; }
.cart-item-row:last-child { border-bottom: none; }
.cart-item-img-placeholder { width: 72px; height: 72px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background-color: #f1f5f9; flex-shrink: 0; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-size: 15px; font-weight: 600; color: #0f172a; margin-bottom: 6px; line-height: 1.35; }
.remove-btn { background: none; border: none; color: #ef4444; font-size: 13px; font-weight: 500; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 4px; }
.remove-btn::before { content: "🗑"; font-size: 12px; }
.remove-btn:hover { text-decoration: underline; }
.cart-item-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.qty-selector { display: flex; align-items: center; border: 1px solid #cbd5e1; border-radius: var(--radius-sm); overflow: hidden; background: #f8fafc; }
.qty-btn { background: transparent; border: none; padding: 6px 13px; cursor: pointer; font-weight: bold; font-size: 15px; line-height: 1; transition: var(--transition); color: var(--text-color); }
.qty-btn:hover { background: #e2e8f0; }
.qty-input { width: 38px; text-align: center; border: none; border-left: 1px solid #cbd5e1; border-right: 1px solid #cbd5e1; font-weight: 600; outline: none; background: transparent; -moz-appearance: textfield; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-item-price { font-weight: 800; font-size: 16px; color: #0f172a; white-space: nowrap; }

/* Caja de resumen */
.cart-summary-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 22px 20px;
}
.cart-summary-box h3 { font-size: 18px; font-weight: 800; color: #0f172a; margin-bottom: 16px; }
.summary-line { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #475569; margin-bottom: 12px; }
.summary-line .highlight-green { margin-bottom: 0; }
.summary-divider { border: none; border-top: 1px solid var(--border-color); margin: 8px 0 14px; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
.summary-total span:last-child { color: var(--primary-color); font-size: 24px; }

.btn-checkout-whatsapp {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: none;
    margin: 16px 0 10px;
    background-color: var(--whatsapp-color);
    color: white !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    padding: 15px 20px;
    border-radius: 10px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
    border: none;
}
/* S19 — se quitó el emoji de WhatsApp del checkout; el ícono ahora es un SVG de
   línea en el HTML, consistente con el botón de la ficha. El verde ya era
   #25D366 (var --whatsapp-color). */
.btn-checkout-whatsapp svg { width: 20px; height: 20px; flex: 0 0 auto; }
.btn-checkout-whatsapp:hover { background-color: #20BA56; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35); }
.secure-checkout-note { text-align: center; font-size: 12.5px; color: #64748b; margin-top: 4px; }

/* Desktop: 2 columnas con el resumen sticky */
@media (min-width: 769px) {
    .cart-grid { grid-template-columns: 1fr 350px; gap: 28px; }
    .cart-summary-box { position: sticky; top: 20px; }
    .cart-title { font-size: 30px; }
}

/* Mobile: cada producto en una grilla prolija (img | nombre arriba, cantidad+precio abajo) */
@media (max-width: 600px) {
    .cart-page-main { padding: 0 12px 30px; }
    .cart-title { font-size: 22px; margin-bottom: 14px; }
    .cart-item-row {
        display: grid;
        grid-template-columns: 64px 1fr;
        grid-template-areas: "img info" "img controls";
        column-gap: 12px;
        row-gap: 10px;
        align-items: start;
        padding: 14px;
    }
    .cart-item-img-placeholder { grid-area: img; width: 64px; height: 64px; align-self: center; }
    .cart-item-info { grid-area: info; }
    .cart-item-name { font-size: 14px; margin-bottom: 4px; }
    .cart-item-controls { grid-area: controls; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
    .cart-summary-box { padding: 18px 16px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.main-footer { background-color: #1e293b; color: #f8fafc; padding: 50px 20px 20px; margin-top: 50px; }
.footer-columns { display: grid; grid-template-columns: 1fr; gap: 40px; }
.footer-col h4 { font-size: 16px; margin-bottom: 20px; color: white; border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; display: inline-block; }
.footer-col a { display: block; color: #cbd5e1; text-decoration: none; margin-bottom: 12px; transition: color 0.2s; font-size: 14px; }
.footer-col a:hover { color: white; }
.footer-col p { color: #cbd5e1; font-size: 14px; margin-bottom: 10px; }
.btn-arrepentimiento { background: rgba(255,255,255,0.1); padding: 10px; text-align: center; border-radius: var(--radius-sm); font-weight: 600; margin-top: 10px; display:block; text-decoration:none; color:white; }
.btn-arrepentimiento:hover { background: rgba(255,255,255,0.2); }
.afip-placeholder { width: 80px; height: 110px; background: white; color: black; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; text-align: center; border-radius: var(--radius-sm); }
/* FASE C — sello Data Fiscal (Formulario 960/D de ARCA) en el footer */
.data-fiscal { display: inline-block; line-height: 0; }
.data-fiscal img { width: 82px; height: auto; display: block; border: 0; border-radius: var(--radius-sm); }

/* FASE C — Sucursales en contacto.html (Miramar + Mechongüé) */
.sucursales-grid { display: flex; flex-direction: column; gap: 20px; }
.sucursal-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 18px 18px 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.sucursal-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.sucursal-card__head h3 { font-size: 17px; color: var(--text-color); font-weight: 700; margin: 0; }
.suc-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.02em; }
.suc-badge--main { background: rgba(0,86,179,0.12); color: var(--primary-color); }
.suc-badge--soon { background: #fff4e5; color: #b45309; }
.sucursal-info { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 9px; }
.sucursal-info li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: #475569; line-height: 1.4; }
.sucursal-info a { color: inherit; text-decoration: none; }
.sucursal-info a:hover { color: var(--primary-color); }
.suc-ico { width: 16px; height: 16px; flex: 0 0 auto; color: #64748b; margin-top: 2px; } /* SESIÓN 16 — íconos SVG */
.sucursal-map { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); height: 220px; background: #eaeaea; }
.sucursal-map iframe { width: 100%; height: 100%; display: block; border: 0; }
.sucursal-maps-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--primary-color); text-decoration: none; }
.sucursal-maps-link:hover { text-decoration: underline; }
.sucursal-card--soon { border-style: dashed; background: #fafafa; }
.sucursal-soon-text { font-size: 14px; color: #64748b; line-height: 1.5; margin: 0; }
.footer-bottom { border-top: 1px solid #334155; margin-top: 40px; padding-top: 20px; text-align: center; font-size: 13px; color: #94a3b8; }

/* FASE C — Footer en móvil (rediseño UX/UI): links en 2 columnas para bajar el
   alto, y Contacto + Data Fiscal a todo el ancho. Lo legal (Botón de
   Arrepentimiento y Data Fiscal) queda SIEMPRE a la vista, sin esconderse. */
@media (max-width: 767px) {
    .main-footer { padding: 30px 18px 18px; margin-top: 36px; }
    .footer-columns { grid-template-columns: 1fr 1fr; gap: 24px 18px; align-items: start; }
    .footer-col h4 { font-size: 14px; margin-bottom: 12px; padding-bottom: 7px; }
    .footer-col a { font-size: 13px; margin-bottom: 10px; line-height: 1.3; }
    .footer-col p { font-size: 13px; margin-bottom: 9px; line-height: 1.4; }
    /* Contacto y Compra Segura ocupan toda la fila */
    .footer-col:nth-child(3) { grid-column: 1 / -1; }
    .footer-col.afip-col { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .footer-col.afip-col h4 { margin-bottom: 0; }
    .btn-arrepentimiento { padding: 8px 10px; margin-top: 8px; font-size: 11px; letter-spacing: 0; line-height: 1.2; }
    .afip-placeholder { width: 68px; height: 90px; font-size: 11px; flex: 0 0 auto; }
    .data-fiscal { flex: 0 0 auto; }
    .data-fiscal img { width: 68px; }
    .footer-bottom { margin-top: 24px; padding-top: 16px; font-size: 12px; }
}

/* =========================================================
   PANEL DE ADMINISTRACIÓN
   ========================================================= */
.admin-sidebar { width: 260px; background-color: #ffffff; border-right: 1px solid var(--border-color); height: 100vh; position: fixed; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); z-index: 100;}
/* SESIÓN 9 — MENÚ ADMIN EMPAREJADO
   Íconos de línea (mismo lenguaje que la tienda), estados sin saltos, agrupado. */
.admin-brand { display: flex; align-items: center; gap: 11px; padding: 18px 20px; border-bottom: 1px solid var(--border-color); }
.admin-brand-logo { height: 34px; width: auto; display: block; flex-shrink: 0; }
.admin-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.admin-brand-text strong { color: #0f172a; font-size: 15px; font-weight: 700; }
.admin-brand-text span { font-size: 12px; color: var(--text-muted); font-weight: 500; }

.admin-nav { display: flex; flex-direction: column; padding: 12px 10px; gap: 2px; flex: 1; overflow-y: auto; }
.admin-nav-group { margin: 12px 0 2px; padding: 0 12px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; }
.admin-nav-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; text-decoration: none; color: #475569; border-radius: var(--radius-sm); font-weight: 500; font-size: 14px; transition: background-color 0.14s ease, color 0.14s ease; }
.admin-nav-ico { width: 20px; height: 20px; flex-shrink: 0; color: #94a3b8; transition: color 0.14s ease; }
.admin-nav-link:hover { background-color: #f1f5f9; color: var(--primary-color); }
.admin-nav-link:hover .admin-nav-ico { color: var(--primary-color); }
.admin-nav-link.active { background-color: #e0f2fe; color: var(--primary-color); font-weight: 600; }
.admin-nav-link.active .admin-nav-ico { color: var(--primary-color); }
.admin-nav-link.view-store { margin-top: 12px; justify-content: center; background-color: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.admin-nav-link.view-store .admin-nav-ico { color: #16a34a; }
.admin-nav-link.view-store:hover { background-color: #dcfce7; color: #15803d; }

.admin-main { margin-left: 260px; padding: 30px; width: calc(100% - 260px); background-color: #f8fafc; min-height: 100vh; }
.admin-section { display: none; animation: fadeIn 0.3s ease; }
.admin-section.active { display: block; }

.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.admin-header h1 { font-size: 24px; color: #0f172a; font-weight: 800; }

.admin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.admin-card { background: white; padding: 25px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); }
.admin-card h3 { margin-bottom: 20px; font-size: 16px; color: #0f172a; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; font-weight: 700;}

.admin-input { width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: var(--radius-sm); font-size: 14px; outline: none; transition: var(--transition); background: #f8fafc;}
.admin-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0,86,179,0.1); background: white; }

.btn-admin-primary { background-color: var(--primary-color); color: white; border: none; padding: 12px 20px; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; font-size: 14px; transition: var(--transition); }
.btn-admin-primary:hover { background-color: #004494; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-admin-secondary { background-color: white; color: #334155; border: 1px solid #cbd5e1; padding: 12px 20px; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; font-size: 14px; transition: var(--transition); }
.btn-admin-secondary:hover { background-color: #f8fafc; border-color: #94a3b8; }
.btn-delete-spec { background-color: #fee2e2; color: #ef4444; border: 1px solid #f87171; padding: 12px 20px; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; font-size: 14px; transition: var(--transition); }
.btn-delete-spec:hover { background-color: #fef2f2; }

.admin-specs-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.admin-specs-table th { background-color: #f1f5f9; padding: 12px; text-align: left; color: #475569; font-weight: 700; border-bottom: 2px solid #cbd5e1; }
.admin-specs-table td { padding: 12px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.admin-specs-table tr:hover td { background-color: #f8fafc; }

/* ACT 5 — chip de categoría editable en el listado del admin.
   Click en el chip => se transforma en un <select> para reasignar. */
.cat-edit-chip {
    display: inline-block;
    max-width: 170px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    font-size: 12px;
    line-height: 1.6;
    cursor: pointer;
    border: 1px dashed transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    transition: background .15s, border-color .15s;
}
.cat-edit-chip::after {
    content: " ✎";
    font-size: 10px;
    opacity: .4;
}
.cat-edit-chip:hover {
    background: #e0e7ff;
    border-color: #c7d2fe;
}
.cat-inline-select { max-width: 170px; vertical-align: middle; }

/* Editor WYSIWYG */
.wysiwyg-container { border: 1px solid #cbd5e1; border-radius: var(--radius-sm); overflow: hidden; }
.wysiwyg-toolbar { background: #f1f5f9; padding: 8px; border-bottom: 1px solid #cbd5e1; display: flex; gap: 5px; flex-wrap: wrap;}
.wysiwyg-toolbar button, .wysiwyg-toolbar select { padding: 5px 10px; border: 1px solid #cbd5e1; border-radius: 4px; background: white; cursor: pointer; font-size: 13px; font-weight: 600; color: #334155;}
.wysiwyg-editor { min-height: 150px; padding: 15px; outline: none; background: white; font-size: 14px;}
.image-upload-zone { border: 2px dashed #cbd5e1; padding: 30px; text-align: center; border-radius: var(--radius-md); cursor: pointer; background: #f8fafc; transition: var(--transition); margin-bottom: 15px; }
.image-upload-zone:hover { border-color: var(--primary-color); background: #e0f2fe; }
.image-preview-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.img-preview-box { width: 80px; height: 80px; border-radius: var(--radius-sm); border: 1px solid #cbd5e1; background-position: center; background-size: cover; position: relative; box-shadow: var(--shadow-sm); }

#toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 9999; pointer-events: none; }
.toast-msg { background-color: #1e293b; color: white; padding: 15px 25px; border-radius: var(--radius-md); box-shadow: var(--shadow-hover); font-size: 14px; font-weight: 600; animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; display: flex; align-items: center; gap: 10px;}
.toast-msg.fade-out { animation: fadeOutRight 0.3s ease forwards; }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; color: #334155; }
.form-row { display: flex; gap: 20px; }
.form-row .form-group { flex: 1; }
.form-hint { font-size: 12px; color: #64748b; margin-top: 6px; display: block; font-weight: 500; }

.live-preview-btn { position: fixed; bottom: 30px; right: 30px; background: #0f172a; color: white; border: none; padding: 15px 25px; border-radius: 50px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-hover); z-index: 900; transition: var(--transition);}
.live-preview-btn:hover { transform: translateY(-5px); background: #1e293b; }
.preview-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(5px); z-index: 1000; display: none; align-items: center; justify-content: center; }
.preview-container { background: white; border-radius: var(--radius-md); width: 95%; height: 95%; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
.preview-header { padding: 15px 20px; background: #f8fafc; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #0f172a; }
.preview-header button { padding: 8px 15px; border-radius: var(--radius-sm); border: 1px solid #cbd5e1; background: white; cursor: pointer; font-weight: 600; transition: var(--transition); }
.preview-header button:hover { background: #f1f5f9; }
.preview-iframe { width: 100%; height: 100%; border: none; transition: width 0.3s ease; margin: 0 auto; background: var(--bg-color); }
.preview-iframe.mobile-view { width: 400px; border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); box-shadow: 0 0 20px rgba(0,0,0,0.1); }

/* =========================================================
   MEDIA QUERIES (Responsividad Total)
   ========================================================= */

@media (max-width: 767px) {
    .admin-body { flex-direction: column; }
    .admin-sidebar { width: 100%; height: auto; position: relative; border-right: none; border-bottom: 1px solid var(--border-color); z-index: 10; }
    .admin-main { margin-left: 0; width: 100%; padding: 15px; min-height: auto; }
    .admin-grid { grid-template-columns: 1fr; }
    .admin-specs-table { display: block; overflow-x: auto; white-space: nowrap; }
    .form-row { flex-direction: column; gap: 0; }
    .hero-banner-slider { height: 160px; }

    /* FILTROS LATERALES CATEGORÍA (Menú Desplegable) */
    .filters-sidebar {
        position: fixed; top: 0; left: -100%; width: 280px; height: 100vh;
        z-index: 1000; overflow-y: auto; border-radius: 0; transition: left 0.3s ease;
    }
    .filters-sidebar.open { left: 0; }
    .filters-header-mobile { display: flex !important; }
    .filters-title-desktop { display: none; }
}

@media (min-width: 768px) {
    /* SESIÓN 4 (PC) — el header alinea sus bordes a la MISMA columna de 1200px que el
       contenido (logo a la par del catálogo, no pegado al borde). El fondo sigue full-width. */
    .main-header { flex-direction: row; align-items: center; gap: 20px; padding: 15px max(40px, calc((100% - 1200px) / 2)); }
    .header-top { flex: 1; }
    .header-actions { gap: 20px; }
    .hdr-ico { width: 24px; height: 24px; } /* S21 (PC): un toque más chicos */
    .search-bar { max-width: 400px; }
    .categories-container { justify-content: center; gap: 40px; }
    
    #home-builder-canvas, .categories-highlights { max-width: 1200px; margin: 0 auto; }
    .hero-banner-slider { border-radius: var(--radius-md); overflow: hidden; margin-top: 12px; }

    .product-detail-container { flex-direction: row; align-items: flex-start; margin: 40px auto; max-width: 1200px; padding: 40px;}
    .modern-gallery { flex: 1; position: sticky; top: 100px; }
    .product-info-full { flex: 1; padding-left: 30px; }
    
    .sticky-bottom-bar { justify-content: center; gap: 14px; padding: 14px 40px; box-shadow: 0 -4px 14px rgba(15,23,42,0.05);}
    .sticky-bottom-bar .pdp-action { flex: 0 0 auto; min-width: 200px; }
    .sticky-bottom-bar .pdp-action--buy { min-width: 240px; }
    
    .footer-columns { grid-template-columns: repeat(4, 1fr); max-width: 1200px; margin: 0 auto; }

    /* PC: Grilla de Categoría (5 Columnas) y Filtros Visibles */
    .category-layout { flex-direction: row; align-items: flex-start; max-width: 1200px; margin: 0 auto; padding: 0 15px;}
    .filters-sidebar { flex: 0 0 250px; position: sticky; top: 100px; }
    .products-area { flex: 1; }
    #mobile-filter-btn { display: none !important; }
    .apply-filters-mobile { display: none !important; }
    
    /* PC SOBREESCRIBE A 5 PRODUCTOS POR RENGLÓN */
    .products-grid-container {
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
    }
    .products-grid-container .image-placeholder { height: 180px; }
    .products-grid-container .product-info { padding: 15px; }
    .products-grid-container .product-title { font-size: 14px; margin-bottom: 8px; height: 42px; line-height: 1.4; }
    .products-grid-container .product-price { font-size: 18px; margin-bottom: 15px; }
    .products-grid-container .buy-btn { font-size: 14px; padding: 10px; }
}

/* =========================================================
   PARCHE DE CORRECCIÓN ABSOLUTA (Diseño, Visibilidad y Márgenes)
   ========================================================= */

/* 1. Cabecera blanca sólida (sin backdrop-filter: evita el parpadeo al hover/click) */
.main-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--border-color);
}

/* 2. Logo, carrito y corazón oscuros sobre fondo blanco */
.logo { color: var(--text-color) !important; }
.cart-container { color: var(--text-color) !important; }
#menu-btn, .menu-toggle {
    background: transparent !important;
    color: var(--text-color) !important;
    border: none !important;
    box-shadow: none !important;
}
#menu-btn:hover, .menu-toggle:hover { background: transparent !important; }

/* 3. REORDENAMIENTO ESTRUCTURAL PARA PC: Logo -> Buscador -> Carrito/Menú */
@media (min-width: 768px) {
    .main-header {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        gap: 30px !important;
        align-items: center !important;
        padding: 15px 40px !important;
    }
    .header-top { display: contents !important; } /* Permite reorganizar los hijos libremente */
    .logo { order: 1 !important; }
    .search-bar { 
        order: 2 !important; 
        max-width: 600px !important; 
        margin: 0 auto !important; 
        width: 100% !important; 
    }
    .header-actions { order: 3 !important; }
}

/* 4. Achicar espacios desperdiciados entre Banners y Categorías */
.hero-banner-slider { margin-bottom: 8px !important; }
.categories-highlights { padding: 2px 0 6px !important; }

/* 5. Banners panorámicos: llenan su recuadro (cover). Las fotos de PRODUCTO,
   en cambio, se muestran completas sin recortar (contain) — Paso 3.
   S29 — .banner-half salió de acá: ahora es <img> con object-fit por modo. */
.hero-slide {
    background-size: cover !important;
    background-position: center !important;
}
.image-placeholder {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* 6. Proporción cuadrada 1:1 en fotos de productos */
.image-placeholder {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
}

/* 7. Hover suave y levitación en tarjetas */
.product-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.product-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}
/* =========================================================
   SESIÓN 2 - CONVERSIÓN: Nuevos componentes
   ========================================================= */

/* --- SLIDER CON AUTOPLAY --- */
.hero-slider-wrap .hero-banner-slider {
    border-radius: 0;
    margin: 0 !important;
}
/* FASE B — flechas discretas que NO tapan el banner. En desktop aparecen solo
   al pasar el mouse por encima del slider; en touch quedan apenas visibles y
   pegadas al borde. Sin el círculo blanco grande que antes cubría la imagen. */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 23, 42, 0.30);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: none;
    color: #ffffff;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    opacity: 0.5;
    box-shadow: none;
    transition: opacity 0.2s ease, background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.slider-prev { left: 8px; }
.slider-next { right: 8px; }
/* Solo en dispositivos con hover real (desktop/notebook): ocultas hasta que el
   mouse entra al banner. En mobile/tablet no aplica y quedan al 0.5 de arriba. */
@media (hover: hover) {
    .hero-slider-wrap .slider-arrow { opacity: 0; }
    .hero-slider-wrap:hover .slider-arrow { opacity: 0.6; }
    .hero-slider-wrap .slider-arrow:hover { opacity: 1; background: rgba(15, 23, 42, 0.5); }
}
.slider-dots-bar {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}
.slider-dot.active {
    background: white;
    width: 22px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ACT 3 — banner simple multi-imagen: reusa el motor del slider pero con el MISMO
   aspecto que el banner simple de 1 foto (1200/420), no la altura fija del hero. */
.hero-slider-wrap.banner-simple-slider .hero-banner-slider {
    height: auto;
    aspect-ratio: 1200 / 420;
}

/* --- SOCIAL PROOF: VIENDO AHORA --- */
.viewing-now-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 20px;
    margin: 4px 0 8px;
    animation: pulseIn 0.5s ease;
}
.viewing-dot {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    display: inline-block;
    animation: blink 1.5s ease-in-out infinite;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
@keyframes pulseIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* --- BADGE ÚLTIMAS UNIDADES (tarjeta) --- */
.stock-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #c2410c;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 4px;
    z-index: 3;
    letter-spacing: 0.3px;
}

/* --- ALERT ÚLTIMAS UNIDADES (detalle) --- */
.stock-alert-detail {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #c2410c;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin: 4px 0;
    animation: pulseIn 0.4s ease;
}

/* --- PRECIO ANCLA (precio lista tachado) en tarjetas --- */
.product-price-list {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 2px;
    font-weight: 400;
}
.product-price-list del {
    text-decoration: line-through;
}

/* --- PRECIO CUOTA EN TARJETA --- */
.product-cuota {
    font-size: 12px;
    color: #16a34a;
    font-weight: 600;
    margin-bottom: 10px;
}

/* --- TOAST MEJORADO CON TIPOS + BARRA DE PROGRESO --- */
#toast-container { pointer-events: auto; }
.toast-msg {
    background-color: #1e293b;
    border-left: 4px solid #64748b;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
    min-width: 260px;
    max-width: 340px;
    padding-bottom: 18px;
}
.toast-msg.toast-visible {
    opacity: 1;
    transform: translateX(0);
}
.toast-msg.fade-out {
    opacity: 0 !important;
    transform: translateX(30px) !important;
}
.toast-text { flex: 1; line-height: 1.4; }
.toast-success { border-left-color: #22c55e !important; }
.toast-warning { border-left-color: #f59e0b !important; }
.toast-error   { border-left-color: #ef4444 !important; }
.toast-info    { border-left-color: #3b82f6 !important; }
.toast-icon { font-size: 16px; flex-shrink: 0; }
.toast-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    width: 100%;
    background: rgba(255,255,255,0.25);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.toast-success .toast-progress { background: #22c55e; }
.toast-warning .toast-progress { background: #f59e0b; }
.toast-error   .toast-progress { background: #ef4444; }
.toast-info    .toast-progress { background: #3b82f6; }

/* Ajuste: cuando hay discount-badge Y stock-badge, el discount baja un poco */
.product-card .discount-badge { top: 36px; }
.product-card .stock-badge ~ .discount-badge { top: 36px; }

/* =========================================================
   SESIÓN 3 - UX VISUAL
   ========================================================= */

/* --- SKELETON LOADING --- */
.skeleton-card { pointer-events: none; }
.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 4px;
}
.skeleton-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.skeleton-line { border-radius: 4px; }
.skeleton-btn { height: 36px; border-radius: var(--radius-sm); margin-top: 8px; }
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- REVEAL ON SCROLL (fadeInUp) --- */
.product-card:not(.skeleton-card) {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.45s ease,
        transform 0.45s ease,
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease !important;
}
.product-card.revealed {
    opacity: 1;
    transform: translateY(0);
}
/* Hover sigue funcionando sobre revealed */
.product-card.revealed:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 20px -5px rgba(0,0,0,0.15), 0 10px 10px -5px rgba(0,0,0,0.04) !important;
}

/* --- VUELO AL CARRITO --- */
.fly-dot {
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
/* Rebote del ícono carrito */
@keyframes cartBounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.cart-bounce { animation: cartBounce 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* --- LAZY LOADING: placeholder shimmer hasta que carga la imagen --- */
.lazy-img:not([style*="background-image"]) {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}

/* ============================================
   S5 — DASHBOARD DE MÉTRICAS
   ============================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.stat-icon { font-size: 28px; line-height: 1; }
.stat-body { display: flex; flex-direction: column; }
.stat-value { font-size: 26px; font-weight: 800; color: var(--text-color); line-height: 1.1; }
.stat-label { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-top: 2px; }

/* Gráfico de barras */
.bar-chart-container { display: flex; flex-direction: column; gap: 10px; margin-top: 5px; }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-label {
    width: 130px; font-size: 12px; color: var(--text-color); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0;
}
.bar-track { flex: 1; height: 22px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; min-width: 2px; }
.bar-value { width: 36px; text-align: right; font-size: 13px; font-weight: 700; color: var(--text-color); flex-shrink: 0; }

/* Alertas de stock */
.stock-alert-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 0; border-bottom: 1px solid #f1f5f9; gap: 10px;
}
.stock-alert-name {
    font-size: 13px; color: var(--text-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stock-alert-badge {
    color: white; font-size: 11px; font-weight: 700; padding: 3px 9px;
    border-radius: 20px; white-space: nowrap; flex-shrink: 0;
}

/* ============================================
   S5 — PANEL DE ACCIONES MASIVAS
   ============================================ */
.bulk-section { padding: 14px 0; border-top: 1px solid var(--border-color); }
.bulk-section:first-of-type { border-top: none; padding-top: 0; }
.bulk-section h5 { font-size: 13px; font-weight: 700; color: var(--text-color); margin-bottom: 4px; }
.bulk-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.bulk-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn-bulk-chip {
    border: none; border-radius: 20px; padding: 8px 16px; font-size: 13px;
    font-weight: 600; cursor: pointer; transition: var(--transition);
}
.btn-bulk-chip:hover { transform: translateY(-1px); filter: brightness(0.96); }

/* ============================================
   S5 — CONTADOR REGRESIVO DE OFERTA
   ============================================ */
.offer-countdown {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 1px solid #fdba74; border-radius: var(--radius-md);
    padding: 14px; margin: 15px 0;
}
.cd-header { font-size: 14px; font-weight: 700; color: #c2410c; margin-bottom: 10px; text-align: center; }
.cd-timer { display: flex; gap: 8px; justify-content: center; }
.cd-box {
    background: #c2410c; color: white; border-radius: 8px;
    padding: 8px 10px; min-width: 52px; display: flex; flex-direction: column;
    align-items: center; box-shadow: 0 2px 6px rgba(194,65,12,0.3);
}
.cd-num { font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cd-label { font-size: 10px; text-transform: uppercase; margin-top: 4px; opacity: 0.9; letter-spacing: 0.5px; }

/* ============================================
   S5 — ESTRELLAS Y RESEÑAS (FRONTEND)
   ============================================ */
.stars-display { display: inline-flex; gap: 1px; vertical-align: middle; }
.stars-display .star { color: #e2e8f0; font-size: 14px; line-height: 1; }
.stars-display .star.filled { color: #f59e0b; }
.stars-display .star.half {
    background: linear-gradient(90deg, #f59e0b 50%, #e2e8f0 50%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stars-display.big .star { font-size: 22px; }

.card-stars { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
.card-stars-count { font-size: 11px; color: var(--text-muted); }

.reviews-section, .cross-selling-section {
    max-width: 1200px; margin: 0 auto 30px; padding: 0 15px;
}
.reviews-summary {
    display: flex; align-items: center; gap: 16px;
    background: #f8fafc; border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 18px 22px; margin-bottom: 18px;
}
.rating-big { font-size: 44px; font-weight: 800; color: var(--text-color); line-height: 1; }
.rating-meta { display: flex; flex-direction: column; gap: 5px; }
.rating-count { font-size: 13px; color: var(--text-muted); }

.reviews-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; }
.review-card {
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-sm);
}
.review-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 10px; }
.review-author { font-weight: 700; font-size: 14px; color: var(--text-color); }
.review-comment { font-size: 14px; color: #475569; line-height: 1.5; margin-bottom: 8px; }
.review-date { font-size: 12px; color: #94a3b8; }

/* Reseñas en el admin */
.admin-review-card {
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    padding: 12px; margin-bottom: 10px; background: #fff;
}
.admin-review-top { display: flex; justify-content: space-between; align-items: flex-start; }
.admin-review-stars { color: #f59e0b; font-size: 14px; margin-right: 6px; letter-spacing: 1px; }
.btn-delete-review {
    background: none; border: none; cursor: pointer; font-size: 15px;
    opacity: 0.6; transition: var(--transition); padding: 2px 4px;
}
.btn-delete-review:hover { opacity: 1; transform: scale(1.1); }

@media (max-width: 768px) {
    .bulk-controls { flex-direction: column; align-items: stretch; }
    .bulk-controls > * { width: 100% !important; }
    .stat-value { font-size: 22px; }
    .bar-label { width: 90px; }
}

/* =========================================================
   SESIÓN 6 — FAVORITOS, BUSCADOR INTELIGENTE Y COMPARADOR
   ========================================================= */

/* ---- Reubicar discount-badge a la izquierda (el corazón va a la derecha) ---- */
.product-card .discount-badge { left: 10px; right: auto; }
.product-card .stock-badge ~ .discount-badge { top: 40px; }

/* ---- CORAZÓN DE FAVORITO EN TARJETA ---- */
.fav-btn {
    position: absolute; top: 10px; right: 10px; z-index: 4;
    width: 34px; height: 34px; border-radius: 50%;
    border: none; cursor: pointer;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(2px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.18s ease, background 0.2s ease;
    padding: 0;
}
.fav-btn:hover { transform: scale(1.12); }
.fav-btn .fav-heart { font-size: 18px; line-height: 1; color: #cbd5e1; transition: color 0.2s ease, transform 0.2s ease; }
.fav-btn.active { background: #fee2e2; }
.fav-btn.active .fav-heart { color: #ef4444; animation: favPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes favPop { 0% { transform: scale(0.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ---- TOGGLE COMPARAR EN TARJETA ---- */
.compare-toggle {
    margin-top: 10px; width: 100%;
    background: #f8fafc; color: var(--text-muted);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    padding: 8px; font-size: 12px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: var(--transition);
}
.compare-toggle:hover { border-color: var(--primary-color); color: var(--primary-color); }
.compare-toggle .cmp-ico { font-size: 14px; }
.compare-toggle.active { background: #e0f2fe; border-color: var(--primary-color); color: var(--primary-color); }
.products-grid-container .compare-toggle,
.product-carousel .compare-toggle { font-size: 11px; padding: 6px; margin-top: 8px; }

/* ---- ÍCONO DE FAVORITOS EN EL HEADER (estilos base arriba, en el bloque HEADER) ---- */
/* (se conserva este comentario por compatibilidad; las reglas viven en el header unificado) */

/* ---- CHECKBOX "SOLO FAVORITOS" EN FILTROS ---- */
.filter-fav-toggle {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    background: #fff1f2; border: 1px solid #fecdd3; border-radius: var(--radius-sm);
    padding: 12px; font-weight: 600; color: #be123c; font-size: 14px;
    transition: var(--transition);
}
.filter-fav-toggle:hover { background: #ffe4e6; }
.filter-fav-toggle input { width: 18px; height: 18px; accent-color: #ef4444; cursor: pointer; }

/* ---- BOTÓN DE FAVORITO EN LA FICHA ---- */
.fav-detail-btn {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    background: white; color: var(--text-muted);
    border: 1px solid var(--border-color); border-radius: 50px;
    padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: var(--transition);
}
.fav-detail-btn:hover { border-color: #ef4444; color: #ef4444; }
.fav-detail-btn .fav-detail-heart { font-size: 16px; color: #cbd5e1; transition: color 0.2s ease; }
.fav-detail-btn.active { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
.fav-detail-btn.active .fav-detail-heart { color: #ef4444; animation: favPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ---- AUTOCOMPLETADO DEL BUSCADOR ---- */
.search-bar { overflow: visible; position: relative; }
/* (radios manejados por el bloque HEADER unificado; la barra es una sola píldora) */

.search-suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 500;
    background: white; border-radius: var(--radius-md);
    box-shadow: 0 12px 30px rgba(15,23,42,0.18); border: 1px solid var(--border-color);
    overflow: hidden; display: none; max-height: 70vh; overflow-y: auto;
}
.search-suggest.open { display: block; animation: fadeIn 0.15s ease; }
.suggest-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    text-decoration: none; color: var(--text-color); border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease;
}
.suggest-row:hover, .suggest-row.active { background: #f1f5f9; }
.suggest-thumb {
    width: 44px; height: 44px; border-radius: var(--radius-sm); flex-shrink: 0;
    background-color: #f1f5f9; background-size: cover; background-position: center;
    border: 1px solid var(--border-color);
}
.suggest-info { display: flex; flex-direction: column; min-width: 0; }
.suggest-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.suggest-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 14px; }
.suggest-all {
    width: 100%; text-align: center; background: #f8fafc; border: none;
    padding: 12px; font-size: 13px; font-weight: 700; color: var(--primary-color);
    cursor: pointer; transition: background 0.15s ease;
}
.suggest-all:hover { background: #e0f2fe; }

/* ---- BARRA FLOTANTE DEL COMPARADOR ---- */
.torti-compare-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 940;
    background: white; border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 20px rgba(15,23,42,0.12);
    transform: translateY(130%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.torti-compare-bar.visible { transform: translateY(0); }
body.has-sticky-bar .torti-compare-bar.visible { bottom: 64px; }
.cmp-bar-inner {
    max-width: 1200px; margin: 0 auto; padding: 12px 15px;
    display: flex; align-items: center; justify-content: space-between; gap: 15px;
}
.cmp-bar-thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.cmp-bar-thumbs::-webkit-scrollbar { display: none; }
.cmp-thumb { position: relative; flex-shrink: 0; }
.cmp-thumb-img {
    width: 50px; height: 50px; border-radius: var(--radius-sm);
    background-color: #f1f5f9; background-size: cover; background-position: center;
    border: 1px solid var(--border-color);
}
.cmp-thumb-remove {
    position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
    border-radius: 50%; background: #0f172a; color: white; border: 2px solid white;
    font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    padding: 0; line-height: 1;
}
.cmp-bar-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cmp-bar-clear {
    background: white; border: 1px solid var(--border-color); color: var(--text-muted);
    border-radius: var(--radius-sm); padding: 10px 16px; font-weight: 700; font-size: 13px; cursor: pointer;
    transition: var(--transition);
}
.cmp-bar-clear:hover { border-color: #ef4444; color: #ef4444; }
.cmp-bar-open {
    background: var(--primary-color); color: white; border: none;
    border-radius: var(--radius-sm); padding: 10px 20px; font-weight: 700; font-size: 14px; cursor: pointer;
    transition: var(--transition); white-space: nowrap;
}
.cmp-bar-open:hover:not(:disabled) { background: #004494; transform: translateY(-1px); }
.cmp-bar-open:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- MODAL DEL COMPARADOR ---- */
.torti-compare-modal {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(3px);
    display: none; align-items: center; justify-content: center; padding: 15px;
}
.torti-compare-modal.visible { display: flex; animation: fadeIn 0.2s ease; }
.cmp-modal-card {
    background: white; border-radius: var(--radius-lg); width: 100%; max-width: 1000px;
    max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: var(--shadow-hover); animation: pulseIn 0.25s ease;
}
.cmp-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
}
.cmp-modal-head h3 { font-size: 18px; color: #0f172a; font-weight: 800; }
.cmp-modal-close {
    background: #f1f5f9; border: none; width: 34px; height: 34px; border-radius: 50%;
    font-size: 14px; cursor: pointer; color: var(--text-muted); transition: var(--transition);
}
.cmp-modal-close:hover { background: #fee2e2; color: #ef4444; }
.cmp-modal-body { overflow: auto; padding: 0; }
.cmp-table-scroll { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.cmp-table th, .cmp-table td {
    padding: 14px 12px; text-align: center; border-bottom: 1px solid #f1f5f9;
    font-size: 14px; vertical-align: middle;
}
.cmp-table thead th { background: #f8fafc; position: sticky; top: 0; z-index: 1; }
.cmp-corner { text-align: left !important; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.cmp-row-label { text-align: left !important; font-weight: 700; color: var(--text-muted); background: #fbfcfe; font-size: 13px; white-space: nowrap; }
.cmp-col-img {
    width: 70px; height: 70px; margin: 0 auto 8px; border-radius: var(--radius-sm);
    background-color: #f1f5f9; background-size: cover; background-position: center; border: 1px solid var(--border-color);
}
.cmp-col-name { font-size: 13px; font-weight: 700; color: #0f172a; line-height: 1.3; max-width: 160px; margin: 0 auto; }
.cmp-col-remove {
    margin-top: 8px; background: none; border: none; color: var(--text-muted);
    font-size: 11px; cursor: pointer; transition: color 0.2s;
}
.cmp-col-remove:hover { color: #ef4444; }
.cmp-price { font-size: 17px; font-weight: 800; color: #0f172a; }
.cmp-price.cmp-best { color: #16a34a; position: relative; }
.cmp-best-tag {
    display: block; font-size: 10px; font-weight: 700; color: white; background: #16a34a;
    border-radius: 20px; padding: 2px 8px; margin: 6px auto 0; width: fit-content;
}
.cmp-lowstock { color: #c2410c; font-weight: 700; }
.cmp-nostock { color: #ef4444; font-weight: 700; }
.cmp-act-view, .cmp-act-cart {
    display: block; width: 100%; margin: 4px auto; border: none; border-radius: var(--radius-sm);
    padding: 8px 10px; font-size: 12px; font-weight: 700; cursor: pointer; transition: var(--transition);
}
.cmp-act-view { background: #f1f5f9; color: var(--primary-color); }
.cmp-act-view:hover { background: var(--primary-color); color: white; }
.cmp-act-cart { background: var(--secondary-color); color: white; }
.cmp-act-cart:hover { background: #e66000; }

@media (max-width: 600px) {
    .cmp-bar-inner { padding: 10px 12px; gap: 10px; }
    .cmp-bar-open { padding: 10px 14px; font-size: 13px; }
    .cmp-bar-clear { padding: 10px 12px; }
    .cmp-thumb-img { width: 42px; height: 42px; }
    .cmp-modal-head { padding: 14px 16px; }
}

/* =========================================================
   ETAPA 1 — REDISEÑO VISUAL ESTILO "MARKETPLACE" (Frávega-like)
   Tarjetas más compactas, color de fondo por producto,
   portada más alta y categorías en 2 filas.
   ========================================================= */

/* ---- PORTADA / FLYERS MÁS ALTOS ---- */
/* S29 — banner simple de 1 imagen como <a>+<img>. "Llena" (cover): caja panorámica
   fija (1200/420 mobile, 1200/300 PC) que recorta. "Completa" (contain): la caja
   abraza la imagen, sin bandas arriba/abajo. */
.home-flyer {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #f1f5f9;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.home-flyer-img { display: block; width: 100%; }
.home-flyer--cover { aspect-ratio: 1200 / 420; }
.home-flyer--cover .home-flyer-img { height: 100%; object-fit: cover; }
.home-flyer--contain .home-flyer-img { height: auto; }
.home-flyer:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
@media (max-width: 767px) {
    /* El alto del banner doble lo maneja aspect-ratio (3/2); no fijamos alto para no recortar. */
    .double-banner-container { gap: 10px !important; }
}

/* ---- CATEGORÍAS EN 2 FILAS (sin scroll horizontal) ---- */
.categories-container {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    row-gap: 18px;
    column-gap: 10px;
    justify-content: center;
}
.category-item { flex: 0 0 22%; min-width: 0 !important; }
@media (min-width: 768px) {
    .category-item { flex: 0 0 auto; }
    .categories-container { column-gap: 40px; }
}

/* ---- TARJETA DE PRODUCTO: más compacta y suave ---- */
.product-card {
    border-color: transparent;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    background-color: var(--card-bg);
}
.product-card:hover {
    box-shadow: 0 12px 24px -8px rgba(15,23,42,0.18) !important;
}

/* La foto "flota" sobre el fondo de la tarjeta (deja ver el color) */
.product-card .image-placeholder {
    background-color: transparent;
    border-bottom: none;
    margin: 10px 10px 0;
    border-radius: var(--radius-md);
}
/* La foto se apoya en un panel BLANCO (las tarjetas son siempre blancas), así el
   producto con fondo blanco se integra en vez de "competir" con un gris. SESIÓN 4 */
.product-card .image-placeholder {
    background-color: #ffffff;
}

/* Info más prolija y contenida */
.product-info { padding: 12px 14px 14px; gap: 2px; }
.product-title {
    font-weight: 400;
    color: #1e293b;
}
.product-price { color: #0f172a; }
.product-price-list del { color: var(--text-muted); }
.product-cuota { color: var(--text-muted); }

/* Botones de la tarjeta un poco más sobrios */
.product-card .buy-btn { background-color: #eef2f7; }
.product-card .compare-toggle { background: transparent; border-color: transparent; color: var(--text-muted); margin-top: 6px; }
.product-card .compare-toggle:hover { background: rgba(0,0,0,0.04); }

/* ---- CARRUSELES MÁS ANGOSTOS (entran más en pantalla) ---- */
.product-carousel { gap: 12px !important; align-items: stretch; }
/* Ancho FIJO para que todas las tarjetas sean idénticas (no auto según contenido) */
.product-carousel .product-card {
    flex: 0 0 158px;
    width: 158px;
    min-width: 158px;
    max-width: 158px;
}
@media (min-width: 768px) {
    .product-carousel .product-card {
        flex: 0 0 200px;
        width: 200px;
        min-width: 200px;
        max-width: 200px;
    }
}

/* ---- GRILLA DE CATEGORÍA: tarjetas un poco más angostas en celular ---- */
@media (max-width: 767px) {
    .products-grid-container { gap: 12px; }
    .products-grid-container .product-info { padding: 10px 10px 12px; }
}

/* ---- HEADER MÓVIL EN DOS FILAS (estilo Frávega) ----
   SESIÓN FINAL 1.0 (responsive): antes el header forzaba UNA sola fila y el
   buscador quedaba tan apretado que el botón de la lupa se salía de la pantalla
   (scroll lateral en todo el sitio). Ahora: fila 1 = logo + íconos; fila 2 =
   buscador a todo el ancho. Más usable y sin desbordes. */
@media (max-width: 767px) {
    /* Dos filas apiladas: arriba header-top, abajo la barra de búsqueda */
    .main-header {
        flex-direction: column;
        gap: 10px;
        padding: 10px 14px;
    }
    /* Fila 1: logo a la izquierda, íconos a la derecha */
    .header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
    }
    .logo { font-size: 18px; white-space: nowrap; letter-spacing: -0.3px; }
    .logo-img { height: 30px; }

    /* Íconos juntos a la derecha: corazón, carrito, hamburguesa */
    .header-actions { display: flex; align-items: center; gap: 16px; }

    /* Fila 2: buscador a todo el ancho. min-width:0 deja que el input se encoja
       en vez de empujar la lupa afuera (la causa original del desborde). */
    .search-bar { width: 100%; }
    .search-bar input { min-width: 0; padding: 10px 14px; font-size: 14px; }

    /* Íconos a tamaño cómodo para el dedo */
    .hdr-ico { width: 24px; height: 24px; }
}

/* ---- ALTURA UNIFORME DE TARJETAS (evita "dientes chuecos") ---- */
/* Cada fila interna reserva su espacio aunque esté vacía, así todas las
   tarjetas miden exactamente lo mismo, tengan o no descuento/reseñas. */
.product-card .card-stars,
.product-card .card-stars-empty { min-height: 18px; margin-bottom: 4px; }
.product-card .product-price-list { min-height: 16px; margin-bottom: 2px; }
.product-card .product-price { margin-bottom: 6px; }
.product-card .product-cuota { min-height: 34px; margin-bottom: 4px; line-height: 1.35; }
/* Los botones quedan siempre pegados al fondo de la tarjeta */
.product-card .product-info > div[style*="margin-top: auto"],
.product-card .product-info > div[style*="margin-top:auto"] { margin-top: auto !important; }

/* ---- FIX: corazón de favoritos visible sobre el header claro ---- */
.wishlist-container { color: var(--text-color) !important; }
.wishlist-container:hover { color: #ef4444 !important; }

/* ============================================================
   ETAPA 2 — FIX COLOR: panel de color POR TIRA de productos
   (estilo Frávega). El color va en la SECCIÓN, no en la tarjeta.
   Las tarjetas quedan siempre blancas.
   ============================================================ */
.carousel-section--tinted {
    padding: 18px 18px 8px;
    margin: 0 12px 30px;
    border-radius: var(--radius-lg);
}
/* El título y el carrusel ya quedan dentro del padding del panel */
.carousel-section--tinted .section-title { margin-bottom: 14px; }
/* En tarjetas dentro de un panel de color, suavizamos la sombra
   para que el "flote" se vea limpio sobre el color */
.carousel-section--tinted .product-card {
    box-shadow: 0 1px 2px rgba(15,23,42,0.10);
}
@media (min-width: 768px) {
    .carousel-section--tinted {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---- Paleta de colores del bloque (panel del admin) ---- */
.bg-palette { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bg-swatch {
    width: 32px; height: 32px; border-radius: 8px;
    border: 2px solid #e2e8f0; background: #fff; cursor: pointer;
    padding: 0; display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: #94a3b8; line-height: 1;
    transition: transform .12s ease, border-color .12s ease;
}
.bg-swatch:hover { transform: translateY(-2px); }
.bg-swatch.selected { border-color: #0f172a; box-shadow: 0 0 0 2px #0f172a inset; }
.bg-swatch-none { background: #fff; }
.bg-swatch-custom {
    position: relative; overflow: hidden;
    width: 32px; height: 32px; border-radius: 8px;
    border: 2px dashed #cbd5e1; background: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.bg-swatch-custom.selected { border-style: solid; border-color: #0f172a; }
.bg-swatch-custom input[type="color"] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; border: none; padding: 0;
}

/* ============================================================
   ETAPA 2 — RETOQUE DE TARJETA (estilo Frávega)
   - Chip "N sin interés" para llenar el espacio bajo la imagen
   - Línea de envío en verde con asterisco (gratis solo en Miramar)
   - Carrito como CTA principal a todo el ancho (se quitó el botón "Ver")
   - Badge de stock acotado para no pisar el corazón
   ============================================================ */

/* Chip de cuotas sin interés (llena el "blanco" entre imagen y precio) */
.installments-chip {
    align-self: flex-start;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
    margin: 2px 0 6px;
    letter-spacing: 0.2px;
}

/* Línea de envío en verde con asterisco (gratis solo en Miramar) */
.card-shipping {
    display: block;
    font-size: 11px;
    color: #16a34a;
    font-weight: 700;
    margin: 4px 0 10px;
    line-height: 1.3;
}
.card-shipping .ship-ast { color: #16a34a; font-weight: 800; }
.card-shipping .ship-note { margin-left: 6px; font-size: 10px; color: #94a3b8; font-weight: 500; }

/* Carrito como CTA principal: ocupa todo el ancho y queda al pie */
.btn-add-card {
    width: 100%;
    margin-top: auto;
    padding: 11px 10px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
/* En grilla y carrusel (tarjetas angostas), achicamos para que no desborde */
.products-grid-container .btn-add-card,
.product-carousel .btn-add-card { font-size: 11px; padding: 10px 6px; gap: 5px; }

/* Badge "Últimas N" acotado para no chocar con el corazón (arriba a la derecha) */
.product-card .stock-badge {
    max-width: calc(100% - 58px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   ETAPA 2 (§3.1) — CUOTAS CONFIGURABLES POR TASA
   - Ficha: caja de cuotas (destacado + lista desplegable de planes)
   - Tarjeta: etiqueta chica "c/interés" cuando el plan destacado tiene interés
   - Admin: tabla de tasas + vista previa en vivo
   ============================================================ */

/* --- FICHA: caja de cuotas --- */
.installments-box { margin: 4px 0 2px; }

/* Variante del highlight cuando el plan destacado TIENE interés (tono neutro, no verde) */
.installment-highlight.con-interes {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    border-color: #cbd5e1;
}
.installment-highlight.con-interes .installment-qty { color: #475569; }
.installment-highlight.con-interes .installment-amount { color: var(--primary-color); }
.installment-highlight.con-interes .installment-total { color: #475569; } /* SESIÓN 8 */

/* Desplegable "Ver todos los planes" */
.cuotas-details { margin-top: 10px; }
.cuotas-details summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    padding: 6px 2px;
    list-style: none;
    user-select: none;
}
.cuotas-details summary::-webkit-details-marker { display: none; }
.cuotas-details summary::before { content: '▸ '; display: inline-block; transition: transform 0.2s ease; }
.cuotas-details[open] summary::before { content: '▾ '; }

.cuotas-list {
    margin-top: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.cuota-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    font-size: 14px;
    border-bottom: 1px solid #f1f5f9;
}
.cuota-row:last-child { border-bottom: none; }
.cuota-row.is-featured { background: #f8fafc; }
.cuota-row-n { font-weight: 600; color: #0f172a; }
.cuota-row-val { font-weight: 800; color: #0f172a; font-size: 15px; }
.cuota-row-tag {
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
    min-width: 92px;
}
.cuota-row-tag.sin-interes {
    color: #16a34a;
    font-weight: 700;
}
.cuota-row-tag.es-contado {   /* SESIÓN 14c — 1 cuota = precio de contado (no es "sin interés") */
    color: #0369a1;
    font-weight: 700;
}

/* --- TARJETA: etiqueta chica "con interés" en la línea de cuota --- */
.cuota-con-int {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
}

/* --- ADMIN: sección de planes de cuotas --- */
.cuotas-help {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 18px;
}
.cuotas-help code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: #0f766e;
}
.cuotas-admin-wrap { overflow-x: auto; }
.cuotas-admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 460px;
}
.cuotas-admin-table thead th {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 10px 12px;
    border-bottom: 2px solid var(--border-color);
}
.cuotas-admin-table tbody td {
    padding: 12px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    color: #334155;
}
.cuotas-admin-table tbody tr:last-child td { border-bottom: none; }
.inst-rate-wrap { display: flex; align-items: center; gap: 8px; }
.inst-rate-pct { font-size: 14px; font-weight: 600; color: #64748b; }
.cuotas-admin-table input[type="checkbox"],
.cuotas-admin-table input[type="radio"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary-color); }

.cuotas-preview { margin-top: 6px; }
.cuotas-preview .cuotas-list { max-width: 420px; }

/* ============================================================
   ETAPA 2 (§3.4) — CARRUSEL DE PRODUCTOS SIMILARES
   - Base de scroll del carrusel (antes venía en estilos inline)
   - Flechas ‹ › de navegación (solo desktop, las maneja el JS)
   ============================================================ */
.carousel-wrap { position: relative; }

.product-carousel {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding: 4px 2px 14px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.product-carousel::-webkit-scrollbar { height: 6px; }
.product-carousel::-webkit-scrollbar-track { background: transparent; }
.product-carousel::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.product-carousel::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.product-carousel .product-card { scroll-snap-align: start; }

/* Flechas del carrusel (el JS las muestra solo en desktop y con overflow) */
.carousel-nav {
    display: none;
    position: absolute;
    top: calc(50% - 12px);
    transform: translateY(-50%);
    width: 42px; height: 42px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.96);
    color: #334155;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    z-index: 3;
}
.carousel-nav:hover { color: var(--primary-color); transform: translateY(-50%) scale(1.08); }
.carousel-nav.is-disabled { opacity: 0.35; pointer-events: none; }
.carousel-nav-prev { left: -8px; }
.carousel-nav-next { right: -8px; }

/* ============================================================
   SESIÓN FINAL 1.0 (responsive) — TARJETAS COMPACTAS estilo Frávega
   Menos espacios en blanco: imagen un poco más baja, nombre y cuotas
   más juntos, badge del fueguito más discreto, sin líneas vacías.
   Va al final para ganar en la cascada sin tocar las reglas previas.
   ============================================================ */

/* Imagen un toque más baja (antes cuadrada) para dar aire al contenido */
.product-card .image-placeholder {
    aspect-ratio: 5 / 4 !important;
    margin: 8px 8px 0 !important;
}

/* Cuerpo más compacto y sin tanto aire entre líneas */
.product-card .product-info { padding: 10px 12px 12px; gap: 0; }

/* Nombre pegado arriba */
.product-card .product-title { margin-bottom: 3px; }

/* Chip de cuotas cerca del nombre */
.product-card .installments-chip { margin: 0 0 4px; }

/* Estrellas: si no hay reseñas, no reservar una línea vacía */
.product-card .card-stars-empty { display: none; }
.product-card .card-stars { min-height: 0; margin-bottom: 2px; }

/* Precios más juntos */
.product-card .product-price-list { min-height: 14px; margin-bottom: 0; }
.product-card .product-price { margin-bottom: 2px; }

/* Cuota: una sola línea, sin reservar dos */
.product-card .product-cuota { min-height: 0; margin-bottom: 4px; }

/* Envío más cerca del precio */
.product-card .card-shipping { margin: 2px 0 8px; }

/* Botón de carrito un poco más bajo */
.product-card .btn-add-card { padding: 9px 8px; }

/* Badge del fueguito: más chico y discreto, menos invasivo sobre la foto */
.product-card .discount-badge {
    font-size: 10px;
    padding: 2px 6px;
    letter-spacing: 0;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.30);
}

/* ============================================================
   SESIÓN FINAL 1.0 (responsive · ajuste 2)
   Nombre más legible (tipografía más chica = entra más modelo y la
   tarjeta baja), cuerpo más ajustado e iconos de categoría más chicos.
   ============================================================ */

/* NOMBRE del producto: más chico para que se lea más texto del modelo
   y para que la tarjeta sea más baja (como Frávega). Sigue en 2 líneas. */
.product-card .product-title {
    font-size: 13px;
    line-height: 1.3;
    height: 34px;
    margin-bottom: 2px;
}

/* Cuerpo todavía más ajustado, menos alto */
.product-card .product-info { padding: 8px 11px 11px; }
.product-card .installments-chip { margin: 0 0 3px; }
.product-card .product-price-list { min-height: 13px; }
.product-card .product-cuota { margin-bottom: 3px; }
.product-card .card-shipping { margin: 2px 0 7px; }
.product-card .compare-toggle { margin-top: 5px; }

/* ICONOS DE CATEGORÍAS — chicos en MÓVIL (quedaron perfectos) y más
   grandes en PC (en la pantalla ancha los chicos se veían perdidos).
   Luego se cambian por imágenes propias desde el admin. */
@media (max-width: 767px) {
    .category-icon { width: 52px; height: 52px; font-size: 23px; }
    .category-name { font-size: 12px; }
    .categories-container { row-gap: 14px; column-gap: 8px; }
    .category-item { gap: 6px; }
}
@media (min-width: 768px) {
    .category-icon { width: 68px; height: 68px; font-size: 30px; }
    .category-name { font-size: 14px; }
}

/* =========================================================
   PÁGINA: MEDIOS DE PAGO Y PROMOCIONES
   ========================================================= */
.info-page-main { max-width: 1000px; margin: 0 auto; padding: 0 15px 50px; }
.info-page-container { margin-top: 4px; }
.info-page-title { font-size: 28px; font-weight: 800; color: #0f172a; letter-spacing: -0.5px; margin-bottom: 10px; }
.info-page-intro { color: #475569; font-size: 15px; line-height: 1.6; max-width: 720px; margin-bottom: 26px; }
.info-page-note { color: #94a3b8; font-size: 13px; line-height: 1.5; margin-top: 22px; max-width: 720px; }

.pay-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.pay-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 24px 22px; }
.pay-card h3 { font-size: 18px; font-weight: 800; color: #0f172a; margin: 6px 0 10px; }
.pay-card p { color: #475569; font-size: 14.5px; line-height: 1.55; }
.pay-ico { font-size: 30px; line-height: 1; }
.pay-highlight { color: #16a34a; font-weight: 800; }
.pay-card--promo { background: #f0f9ff; border-color: #bae6fd; }

.cuotas-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cuota-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 80px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: #f8fafc; }
.cuota-chip .cuota-n { font-size: 20px; font-weight: 800; color: #0f172a; line-height: 1; }
.cuota-chip .cuota-lbl { font-size: 12px; color: #64748b; margin-top: 2px; }
.cuota-chip--free { background: #ecfdf5; border-color: #a7f3d0; }
.cuota-chip--free .cuota-tag { display: block; font-size: 10px; font-weight: 700; color: #16a34a; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.3px; }

@media (min-width: 700px) {
    .pay-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
    .info-page-title { font-size: 32px; }
}

/* ACT 6a — estrella de Oferta Especial en el listado del admin */
.oferta-toggle { background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px 0 0; color: #cbd5e1; vertical-align: middle; transition: transform .12s ease, color .15s ease; }
.oferta-toggle.is-oferta { color: #f59e0b; }
.oferta-toggle:hover { transform: scale(1.18); color: #f59e0b; }

/* ============================================================
   FASE D (Parte 3b) — Gestor de categorías (rediseño limpio)
   Departamento -> Categoría -> Subcategoría · filas limpias + menú ⋯
   ============================================================ */
#category-list-ui { list-style: none; padding: 0; margin: 0; }
.cm-help { color: #64748b; font-size: 13px; margin: 0; line-height: 1.5; }
.cm-empty { color: #94a3b8; font-size: 14px; padding: 24px 8px; text-align: center; border: 1px dashed #e2e8f0; border-radius: 12px; }

.cm-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cm-toolbar-head { flex: 1; min-width: 240px; }
.cm-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-admin-secondary { background: #fff; border: 1px solid var(--border-color, #e2e8f0); color: #334155; border-radius: 9px; padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; }
.btn-admin-secondary:hover { background: #f8fafc; border-color: #cbd5e1; }

.cm-caret { background: none; border: none; cursor: pointer; font-size: 13px; color: #94a3b8; width: 22px; height: 22px; line-height: 1; padding: 0; flex: 0 0 auto; }
.cm-sp { flex: 1; }
.cm-badge { background: #eef2f7; color: #475569; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.cm-badge.sm { background: #f1f5f9; color: #64748b; font-weight: 600; min-width: 18px; text-align: center; padding: 1px 7px; }
.cm-note { color: #94a3b8; font-size: 12px; }
.cm-ic { background: none; border: 1px solid transparent; border-radius: 7px; cursor: pointer; font-size: 14px; line-height: 1; padding: 5px 8px; color: #64748b; flex: 0 0 auto; transition: background .12s, border-color .12s, color .12s; }
.cm-ic:hover { background: #f1f5f9; color: #0f172a; }
.cm-more { font-weight: 800; letter-spacing: 1px; }

.cm-dept { border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; margin-bottom: 10px; background: #fff; }
.cm-dh { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #f8fafc; border-radius: 12px 12px 0 0; }
.cm-dept:not(.is-open) .cm-dh { border-radius: 12px; }
.cm-dn { font-weight: 700; color: #0f172a; font-size: 15px; }
.cm-dept--otras { border-style: dashed; background: #fbfdff; }
.cm-dept--otras .cm-dh { background: transparent; }

.cm-switch { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; padding: 2px 4px; }
.cm-switch-label { font-size: 12px; color: #94a3b8; }
.cm-switch.is-on .cm-switch-label { color: #0f766e; }
.cm-switch-track { width: 34px; height: 19px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .15s; display: inline-block; }
.cm-switch.is-on .cm-switch-track { background: #14b8a6; }
.cm-switch-knob { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: left .15s; }
.cm-switch.is-on .cm-switch-knob { left: 17px; }

.cm-cats { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.cm-dept.is-open .cm-cats { max-height: 20000px; padding: 10px; overflow: visible; }

.cm-cat { border: 1px solid #eef2f7; border-radius: 9px; margin-bottom: 8px; background: #fff; }
.cm-cat:last-child { margin-bottom: 0; }
.cm-ch { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.cm-cn { font-weight: 600; color: #0f172a; font-size: 14px; }
.cm-move { background: #fff; border: 1px solid #e2e8f0; color: #475569; border-radius: 7px; font-size: 12px; padding: 4px 10px; cursor: pointer; }
.cm-move:hover { background: #f8fafc; border-color: #cbd5e1; }

.cm-subs { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .2s ease; }
.cm-cat.is-open .cm-subs { max-height: 4000px; padding: 2px 0 6px 0; overflow: visible; }
.cm-sub { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 34px; }
.cm-sn { color: #475569; font-size: 13px; }
.cm-cats-empty { color: #94a3b8; font-size: 13px; padding: 4px 6px 10px; }

.cm-addrow { padding: 4px 0 0; list-style: none; }
.cm-add { background: none; border: 1px dashed #cbd5e1; color: #64748b; border-radius: 8px; font-size: 13px; padding: 7px 12px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.cm-add.sm { font-size: 12px; padding: 5px 10px; margin-left: 22px; }
.cm-add:hover { background: #f8fafc; border-color: #94a3b8; color: #0f172a; }

.cm-menu { position: absolute; z-index: 9999; min-width: 210px; background: #fff; border: 1px solid #e2e8f0; border-radius: 11px; box-shadow: 0 10px 30px rgba(2,6,23,.14); padding: 5px; }
.cm-menu-item { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-size: 13.5px; color: #1f2937; padding: 9px 10px; border-radius: 7px; }
.cm-menu-item:hover { background: #f1f5f9; }
.cm-menu-item.is-danger { color: #dc2626; }

/* FASE D (Parte 3b) — drag & drop del organizador de categorías */
.cm-grip { cursor: grab; color: #cbd5e1; font-size: 15px; line-height: 1; flex: 0 0 auto; user-select: none; padding: 0 2px; }
.cm-grip:active { cursor: grabbing; }
.cm-ch:hover .cm-grip, .cm-dh:hover .cm-grip { color: #94a3b8; }
.cm-dragging { opacity: .45; }
body.cm-dnd-active .cm-grip { color: #64748b; }
.cm-cat.cm-drop-before > .cm-ch { box-shadow: inset 0 3px 0 -1px #2563eb; }
.cm-cat.cm-drop-after > .cm-ch { box-shadow: inset 0 -3px 0 -1px #2563eb; }
.cm-cat.cm-drop-nest > .cm-ch { background: #eff6ff; outline: 2px solid #2563eb; outline-offset: -2px; border-radius: 9px; }
.cm-dept.cm-drop-into { outline: 2px dashed #14b8a6; outline-offset: 2px; }
.cm-dept.cm-dd-before > .cm-dh { box-shadow: inset 0 3px 0 -1px #2563eb; }
.cm-dept.cm-dd-after > .cm-dh { box-shadow: inset 0 -3px 0 -1px #2563eb; }
.cm-menu-item.is-danger:hover { background: #fef2f2; }
.cm-menu-sep { height: 1px; background: #eef2f7; margin: 4px 6px; }

@media (max-width: 600px) {
  .cm-dn { font-size: 14px; }
  .cm-note { display: none; }
  .cm-switch-label { display: none; }
  .cm-dh, .cm-ch { gap: 6px; }
  .cm-move { font-size: 11px; padding: 3px 8px; }
  .cm-dept.is-open .cm-cats { padding: 8px; }
  /* SESIÓN 3 (móvil) — fallback Subir/Bajar cómodo: ítems del menú ⋯ y su disparador con toque ≥44px */
  .cm-menu { min-width: 240px; }
  .cm-menu-item { display: flex; align-items: center; min-height: 44px; padding: 12px 12px; font-size: 14px; }
  .cm-ic { padding: 9px 11px; font-size: 15px; }
}

/* FASE D (Parte 3 B2) — ruta de categoría en el listado del admin (solo lectura) */
.cat-path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; font-size: 12.5px; line-height: 1.35; }
.cat-path-dep { color: #94a3b8; }
.cat-path-cat { color: #334155; font-weight: 600; }
.cat-path-sub { color: #64748b; }
.cat-path-sep { color: #cbd5e1; }

/* FASE D (Parte 3b) — menú público: acordeón Departamento → Categoría → Subcategoría */
#sidebar-menu { overflow-y: auto; }
#sidebar-menu .sidebar-header { position: sticky; top: 0; z-index: 2; }
/* SESIÓN 3 (móvil) — FIX navegación: el árbol es el único que scrollea dentro del panel.
   min-height:0 es lo que habilita el overflow en un flex-column; sin esto las categorías
   de abajo quedaban inaccesibles con ~40 rubros. */
.menu-tree { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 2px 0 16px; }
.tm-title { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #94a3b8; padding: 16px 20px 6px; }
.tm-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; text-align: left; background: none; border: none; cursor: pointer; font-family: inherit; color: #1f2937; text-decoration: none; padding: 11px 20px; font-size: 15px; line-height: 1.3; box-sizing: border-box; }
.tm-row:hover { background: #f8fafc; }
.tm-label { flex: 1; min-width: 0; }
.tm-dept { font-weight: 600; }
.tm-cats .tm-row { padding-left: 32px; font-size: 14px; font-weight: 500; }
.tm-subs { background: #fcfdfe; }
.tm-subs .tm-row { padding-left: 38px; font-size: 14px; font-weight: 400; color: #475569; min-height: 42px; }
.tm-cat[aria-expanded="true"] { background: #f8fafc; }
.tm-all { color: var(--primary-color, #0056b3) !important; font-weight: 500 !important; }
.tm-caret { width: 9px; height: 9px; border-right: 2px solid #cbd5e1; border-bottom: 2px solid #cbd5e1; transform: rotate(-45deg); transition: transform .18s; flex: 0 0 auto; margin-right: 2px; }
.tm-row[aria-expanded="true"] > .tm-caret { transform: rotate(45deg); border-color: #94a3b8; }
.tm-kids { display: none; }
.tm-kids.is-open { display: block; }
.tm-empty { color: #94a3b8; font-size: 14px; padding: 8px 20px; }

/* FASE D (Parte 3b — Opción B) — encabezado de rubro + chips de subcategorías */
.rubro-head { margin-bottom: 16px; }
.rubro-crumb { font-size: 13px; color: #94a3b8; margin-bottom: 4px; }
.rubro-title { font-size: 22px; font-weight: 700; color: var(--text-color, #0f172a); margin: 0 0 12px; }
/* SESIÓN 3 (móvil) — chips en UNA fila que se desliza de costado (estilo Frávega),
   en vez de envolver en varias filas y empujar los productos hacia abajo. */
.rubro-chips { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; scroll-padding-left: 4px; }
.rubro-chips::-webkit-scrollbar { display: none; }
.rubro-chip { display: inline-flex; align-items: center; flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; min-height: 40px; padding: 9px 16px; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.rubro-chip:hover { border-color: #cbd5e1; background: #f8fafc; }
.rubro-chip.is-active { background: var(--primary-color, #0056b3); border-color: var(--primary-color, #0056b3); color: #fff; }

/* ===== SESIÓN 2 — Destacados del inicio ===== */
/* Imagen propia dentro del círculo del home (autoajuste: llena y recorta parejo). */
.category-icon .dest-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Manager en el admin (Constructor de Inicio) */
.dest-card { margin-bottom: 20px; }
.dest-help { font-size: 13px; color: #64748b; margin: 4px 0 14px; }
.dest-composer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-items: end; }
.dest-composer .form-group { margin: 0; }
.dest-composer #dest-add { grid-column: 1 / -1; }
.dest-list { list-style: none; padding: 0; margin: 16px 0 0; }
.dest-empty { color: #94a3b8; font-size: 14px; padding: 10px 2px; }
.dest-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px; margin-bottom: 8px; background: #fff; }
.dest-thumb { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: #eef2f7; display: flex; align-items: center; justify-content: center; }
.dest-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dest-thumb span { font-size: 18px; font-weight: 700; color: #64748b; }
.dest-meta { flex: 1; min-width: 0; }
.dest-label { font-size: 14px; color: #1f2937; }
.dest-url { font-size: 12px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dest-btn { background: none; border: 1px solid #e2e8f0; border-radius: 6px; width: 30px; height: 30px; cursor: pointer; color: #475569; font-size: 13px; flex: 0 0 auto; }
.dest-btn:hover { background: #f8fafc; }
.dest-del { color: #dc2626; border-color: #fecaca; }
.dest-del:hover { background: #fef2f2; }
@media (max-width: 600px) { .dest-composer { grid-template-columns: 1fr; } }

/* ============================================================
   SESIÓN 14 — CUOTAS POR TARJETA + LOGOS DE MEDIOS DE PAGO
   ============================================================ */
/* Tira de logos "Pagá con" (ficha + medios-pago) */
.pay-logos-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; }
.pay-logos-label { font-size: 12px; font-weight: 600; color: #64748b; }
.pay-logos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pay-logo { height: 36px; width: 68px; object-fit: contain; display: block; background: #fff; border: 1px solid var(--border-color); border-radius: 6px; box-sizing: border-box; padding: 3px; }

/* Selector de tarjeta (por logo) en la tienda */
.cuota-cardtabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.cuota-cardtab {
    display: flex; align-items: center; gap: 4px;
    background: #fff; border: 1px solid var(--border-color); border-radius: 8px;
    padding: 6px 10px; cursor: pointer; transition: var(--transition); min-height: 38px;
}
.cuota-cardtab:hover { border-color: #cbd5e1; }
.cuota-cardtab.is-active { border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color) inset; }
.cuota-cardtab .pay-logo { height: 28px; width: 52px; border: 0; background: transparent; padding: 0; }

/* Paneles por tarjeta (uno visible por vez) */
.cuota-card-panel { display: none; }
.cuota-card-panel.is-active { display: block; }
.cuota-card-name { font-size: 13px; font-weight: 700; color: #334155; margin: 0 0 6px; }

/* Nota al pie del bloque de cuotas */
.cuotas-nota { font-size: 12px; color: #94a3b8; margin-top: 10px; text-align: center; line-height: 1.4; }

/* --- Admin: solapas de tarjeta en el editor de cuotas --- */
.inst-card-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.inst-card-tab {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--border-color); border-radius: 8px;
    padding: 8px 12px; cursor: pointer; transition: var(--transition);
}
.inst-card-tab:hover { border-color: #cbd5e1; }
.inst-card-tab.is-active { border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color) inset; }
.inst-card-tab .pay-logo { height: 28px; width: 52px; border: 0; background: transparent; padding: 0; }
.inst-card-tab-lbl { font-size: 13px; font-weight: 600; color: #334155; }
.inst-na { color: #cbd5e1; }
.inst-del {
    background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; border-radius: 6px;
    width: 26px; height: 26px; line-height: 1; cursor: pointer; font-size: 13px;
}
.inst-del:hover { background: #fee2e2; }
.inst-add-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.inst-add-row label { font-size: 13px; color: #64748b; }
.inst-add-row .admin-input { max-width: 110px; }

@media (max-width: 600px) {
    .cuota-cardtab { padding: 5px 8px; }
    .inst-card-tab-lbl { display: none; }
}

/* SESIÓN 15 — bloque de contacto del footer con íconos SVG (sin emojis) */
/* SESIÓN 16 — alineación: el <a> heredaba display:block + margin de .footer-col a,
   lo que descuadraba teléfono/email respecto de la dirección. Se resetea y el ícono
   se alinea a la primera línea (align-items:flex-start), prolijo en mobile y PC. */
.footer-contact { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.footer-contact .fc-ico { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.9; margin-top: 2px; }
.footer-contact a { display: inline; margin: 0; color: inherit; text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }

/* ============================================================
   S17 — Rediseño de la ficha de producto + barra de navegación
   del header + iconografía SVG + señales sobrias (viewers/stock).
   Bloque apendeado: gana por orden sobre la cascada previa
   (usa !important sólo donde hay que vencer parches viejos).
   ============================================================ */

/* --- Ícono inline reutilizable (envío / carrito en tarjetas) --- */
.ic-inline { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-right: 6px; flex-shrink: 0; }
.btn-add-card .ic-inline { vertical-align: -4px; }

/* ---------- Barra de navegación del header (inyectada por JS) ---------- */
.header-nav {
    display: flex; align-items: center; gap: 8px 22px; flex-wrap: nowrap;
    width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    border-top: 1px solid var(--border-color); margin-top: 2px; padding-top: 8px;
}
.header-nav::-webkit-scrollbar { display: none; }
.hnav-cats {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    background: transparent; border: none; cursor: pointer; padding: 4px 2px;
    font-family: inherit; font-size: 14px; font-weight: 700; color: var(--text-color);
    white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.hnav-cats svg { width: 18px; height: 18px; }
.hnav-cats:hover { color: var(--primary-color); }
.hnav-link {
    flex: 0 0 auto; font-size: 14px; font-weight: 500; color: #475569;
    text-decoration: none; white-space: nowrap; padding: 4px 2px; transition: color 0.15s ease;
}
.hnav-link:hover { color: var(--primary-color); }
.hnav-ofertas { color: var(--secondary-color); font-weight: 700; }

/* En PC el header pasa a grid limpio: logo | buscador | acciones, con la
   barra de nav ocupando toda la fila de abajo. Este bloque UNIFICA los dos
   @media(min-width:768px) que competían y rompían la cabecera al hacer zoom. */
@media (min-width: 768px) {
    .main-header {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-areas: "logo search actions" "nav nav nav" !important;
        column-gap: 24px !important; row-gap: 8px !important;
        align-items: center !important;
        padding: 12px max(24px, calc((100% - 1200px) / 2)) !important;
    }
    .header-top { display: contents !important; }
    .logo { grid-area: logo !important; order: 0 !important; }
    .search-bar {
        grid-area: search !important; order: 0 !important;
        max-width: 520px !important; width: 100% !important; margin: 0 !important;
        justify-self: stretch !important;
    }
    .header-actions { grid-area: actions !important; order: 0 !important; gap: 20px !important; }
    .header-nav { grid-area: nav !important; overflow: visible; }
}
@media (max-width: 767px) {
    /* En mobile la hamburguesa ya cubre categorías: ocultamos el botón
       "Categorías" del nav y dejamos accesos rápidos scrolleables. */
    .hnav-cats { display: none; }
    .header-nav { gap: 18px; padding-top: 8px; }
}

/* ---------- Breadcrumb con caminito (solo en la ficha) ---------- */
.product-page .breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: 14px 15px; font-size: 13px; color: #94a3b8;
}
.product-page .breadcrumb .crumb { color: #64748b; text-decoration: none; transition: color 0.15s ease; }
.product-page .breadcrumb a.crumb:hover { color: var(--primary-color); }
.product-page .breadcrumb .crumb:not(:first-child)::before { content: "\203A"; margin-right: 6px; color: #cbd5e1; }
.product-page .breadcrumb .crumb-current { color: #334155; font-weight: 500; }

/* ---------- Buy-box: recuadro de líneas finas (estilo Frávega) ---------- */
/* El contenedor exterior deja de ser tarjeta (sólo layout); la columna de
   info es ahora el recuadro. Así la galería y el buy-box quedan como dos
   piezas limpias, no un bloque gris pesado. */
.product-detail-container {
    background: transparent !important; border: none !important;
    box-shadow: none !important; padding: 0 !important;
}
.product-info-full {
    background: #fff; border: 1px solid var(--border-color);
    border-radius: 14px; padding: 20px 22px; gap: 12px;
}
.pdp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.pdp-head .product-title-large { margin: 0; font-size: 21px; line-height: 1.3; }
.pdp-head-actions { display: flex; gap: 8px; flex: 0 0 auto; }

/* Favoritos discreto + compartir: íconos redondos sobrios */
.pdp-icon-btn {
    width: 38px; height: 38px; padding: 0; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--border-color); border-radius: 50%;
    color: #64748b; cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.pdp-icon-btn svg { width: 19px; height: 19px; }
.pdp-icon-btn:hover { border-color: #cbd5e1; color: #334155; background: #f8fafc; }
#detail-fav-btn:hover { color: #ef4444; border-color: #fecaca; background: #fff5f5; }
#detail-fav-btn.active { background: #fee2e2; border-color: #fecaca; color: #ef4444; }
#detail-fav-btn.active svg path { fill: #ef4444; }

/* ---------- Viewers "X personas viendo": sobrio, sin pill amarilla ---------- */
.viewing-now-badge {
    display: inline-flex !important; align-items: center; gap: 6px;
    background: none !important; border: none !important; box-shadow: none !important;
    color: #94a3b8 !important; font-size: 12.5px !important; font-weight: 400 !important;
    padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
}
.viewing-now-badge .viewing-eye { width: 15px; height: 15px; flex: 0 0 auto; color: #94a3b8; }
.viewing-now-badge strong { font-weight: 400; }

/* ---------- Alerta "últimas unidades" del detalle: ámbar sobrio en texto ---------- */
.stock-alert-detail {
    display: inline-flex !important; align-items: center; gap: 6px;
    background: none !important; border: none !important; box-shadow: none !important;
    color: #b45309 !important; font-size: 12.5px !important; font-weight: 500 !important;
    padding: 0 !important; margin: 2px 0 0 !important; border-radius: 0 !important;
}
.stock-alert-detail .stock-alert-ico { width: 16px; height: 16px; flex: 0 0 auto; }
.stock-alert-detail strong { font-weight: 500; }

/* ============================================================
   S31 — PAUSADO = SIN STOCK (visible en tienda, sin compra)
   ============================================================ */
/* Badge SIN STOCK en tarjeta (reemplaza "Últimas") — gris sobrio, no rojo agresivo. */
.stock-badge--out {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}
/* Tarjeta agotada: se atenúa la imagen (no el precio) para leerse "no disponible". */
.product-card--out .image-placeholder { opacity: 0.55; filter: grayscale(0.35); }
.product-card--out .product-title { color: #64748b; }
/* Botón de compra deshabilitado en tarjeta. */
.btn-add-card--out {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
.btn-add-card--out:hover { background: #f1f5f9; box-shadow: none; }

/* Ficha — bloque SIN STOCK + consulta por WhatsApp. */
.stock-out-detail {
    display: flex; align-items: center; gap: 9px;
    background: #f8fafc; border: 1px solid var(--border-color);
    color: #334155; padding: 10px 14px;
    border-radius: var(--radius-sm); margin: 6px 0;
}
.stock-out-detail .stock-out-ico { width: 20px; height: 20px; flex: 0 0 auto; color: #64748b; }
.stock-out-txt { display: flex; flex-direction: column; line-height: 1.25; }
.stock-out-txt strong { font-size: 14px; font-weight: 800; letter-spacing: 0.4px; color: #0f172a; }
.stock-out-wa { font-size: 12.5px; font-weight: 600; color: #128C4B; text-decoration: none; }
.stock-out-wa:hover { text-decoration: underline; }

/* Ficha — barra fija en estado agotado (Sin stock + Consultá por WhatsApp). */
.sticky-bottom-bar--out { justify-content: space-between; align-items: center; }
.pdp-out-label {
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 800; color: #475569; font-size: 15px; letter-spacing: 0.3px;
}
.pdp-out-label svg { width: 20px; height: 20px; flex: 0 0 auto; color: #94a3b8; }
.pdp-action--consult {
    flex: 0 0 auto; min-width: 200px;
    background: var(--whatsapp-color); color: #ffffff;
    text-decoration: none; box-shadow: 0 4px 14px rgba(37,211,102,0.28);
}
.pdp-action--consult:hover { background: #20BA56; box-shadow: 0 7px 20px rgba(37,211,102,0.34); transform: translateY(-2px); }

/* ============================================================
   S32 — BANNER RESPONSIVE (imagen distinta en móvil vs PC)
   ============================================================ */
/* Slides con fondo (slider + banner simple multi): el inline setea --bg-d (PC)
   y --bg-m (móvil); acá elegimos según el ancho. Sin móvil, --bg-m cae a --bg-d. */
.hero-slide { background-image: var(--bg-m, var(--bg-d)); }
@media (min-width: 768px) {
    .hero-slide { background-image: var(--bg-d, var(--bg-m)); }
}
/* Banners con <img> (banner simple de 1 imagen y banner doble): ahora el <img> va
   dentro de un <picture>. Este ocupa el mismo espacio que ocupaba el <img> suelto. */
.home-flyer picture,
.double-banner-container .banner-half picture { display: block; width: 100%; }
.home-flyer--cover picture,
.double-banner-container .banner-half--cover picture { height: 100%; }

/* ---------- Iconografía SVG en perks / hint galería / títulos de sección ---------- */
.product-perks .perk-ico { font-size: 0; }
.product-perks .perk-ico svg { width: 19px; height: 19px; display: block; color: #475569; }
.gallery-zoom-hint svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.section-title svg { width: 20px; height: 20px; vertical-align: -4px; margin-right: 7px; color: var(--primary-color); }

/* Badge OFERTA (variante sin %): mismo estilo que el % OFF, ya sólo en ofertas del admin */
.discount-badge.discount-badge--flag { letter-spacing: 0.5px; }

/* ============================================================
   S18 — Header mobile más compacto (fila de nav de S17)
   Con la barra .header-nav sumada en S17, en celulares chicos el header apilaba
   3 filas (logo+íconos / buscador / nav) y se comía demasiada altura. Acá SOLO
   apretamos gaps y la fila de accesos: no se saca ninguna función, el nav sigue
   en una línea scrolleable. Bloque apendeado (gana por orden sobre los @media 767
   previos, misma especificidad).
   ============================================================ */
@media (max-width: 767px) {
    .main-header { gap: 7px; padding: 9px 14px; }
    .logo-img { height: 27px; }
    .search-bar input { padding: 9px 14px; }
    /* Fila de accesos rápidos: sin margen extra arriba y con menos aire, tipografía
       apenas más chica. Sigue scrolleable en una sola línea. */
    .header-nav { margin-top: 0; padding-top: 7px; gap: 16px; }
    .hnav-link { font-size: 13px; padding: 2px 0; }
    .hnav-ofertas { font-size: 13px; }
}


/* =========================================================================
   S19 — RONDA VISUAL
   (#4 jerarquía de tarjeta · #6 franja de confianza · #5 skeleton de ficha)
   Bloque aditivo al final: gana por orden de fuente ante los overrides viejos.
   ========================================================================= */

/* ---- #4 · Jerarquía de la tarjeta: precio dominante, resto atenuado ---- */
/* El chip verde de cuotas se retira: saturaba junto al envío verde y al precio.
   El sello "sin interés" pasa a la línea de cuota (ver .cuota-sin-int). */
.product-card .installments-chip { display: none !important; }

.product-card .product-title {
    font-size: 12.5px; font-weight: 400; color: #475569;
    line-height: 1.3; height: 32px; margin: 0 0 4px;
}
.product-card .product-price-list {
    font-size: 11px; color: #94a3b8; font-weight: 400;
    min-height: 13px; margin: 0;
}
.product-card .product-price {
    font-size: 19px; font-weight: 800; color: #0f172a;
    letter-spacing: -0.3px; line-height: 1.05; margin: 0 0 3px;
}
.products-grid-container .product-card .product-price { font-size: 17px; }
.product-card .product-cuota {
    font-size: 11.5px; color: #64748b; margin: 0 0 2px; line-height: 1.35;
}
.product-card .cuota-sin-int { color: #047857; font-weight: 600; }
/* Envío: pasa de verde fuerte a gris discreto (información secundaria). */
.product-card .card-shipping {
    font-size: 10.5px; color: #94a3b8; font-weight: 500; margin: 2px 0 9px;
}
.product-card .card-shipping .ship-ast { color: #94a3b8; font-weight: 500; }
.product-card .card-shipping .ship-note { color: #94a3b8; font-weight: 500; }
@media (min-width: 768px) {
    .product-card .product-title { font-size: 13px; height: 34px; }
    .product-card .product-price { font-size: 21px; }
    .products-grid-container .product-card .product-price { font-size: 20px; }
}

/* ---- #6 · Franja de confianza (S21: aún más chica y sobria; es puramente visual) ---- */
.trust-strip { max-width: 1100px; margin: 8px auto 4px; padding: 0 12px; }
.trust-strip-inner {
    background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px;
    padding: 8px 6px; display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 4px; text-align: center;
}
.trust-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 2px; }
.trust-item .trust-ico { color: var(--primary-color); line-height: 0; opacity: 0.9; }
.trust-item .trust-ico svg { width: 17px; height: 17px; }
.trust-item h5 { font-size: 10px; font-weight: 700; color: #475569; margin: 0; line-height: 1.1; }
.trust-item p { display: none; }
@media (min-width: 768px) {
    .trust-strip { margin: 12px auto 6px; }
    .trust-strip-inner { padding: 10px 12px; gap: 10px; }
    .trust-item .trust-ico svg { width: 19px; height: 19px; }
    .trust-item h5 { font-size: 11.5px; color: #334155; }
    .trust-item p { display: block; font-size: 10.5px; color: #94a3b8; margin: 0; line-height: 1.25; }
}

/* ---- #5 · Skeleton de la ficha de producto (la grilla ya lo tenía) ---- */
.skeleton-detail-img {
    width: 100%; height: 340px; border-radius: var(--radius-md);
}
.skeleton-thumb {
    width: 56px; height: 56px; border-radius: var(--radius-sm);
    display: inline-block; margin-right: 8px;
}
.skeleton-line.skel-name {
    display: inline-block; width: 70%; height: 22px;
    vertical-align: middle; border-radius: 4px;
}
.skeleton-line.skel-price {
    display: inline-block; width: 150px; height: 30px; border-radius: 4px;
}
@media (max-width: 767px) {
    .skeleton-detail-img { height: 240px; }
}


/* =========================================================================
   S20 — LIMPIEZA DE LA FICHA (título liviano \u00b7 logos chicos \u00b7 cuotas en línea)
   Se veía "bruto" vs la referencia (Frávega). Bloque aditivo al final.
   ========================================================================= */

/* Título del producto: menos peso y más chico */
.pdp-head .product-title-large { font-size: 18px; font-weight: 600; }
@media (min-width: 768px) { .pdp-head .product-title-large { font-size: 22px; } }

/* Medios de pago del contado: más gris y discreto */
.price-methods { font-size: 11.5px; color: #94a3b8; line-height: 1.45; }

/* "Pagá con": logos chicos en una sola fila, sin recuadro pesado */
.pay-logos-row { margin: 12px 0 4px; }
.pay-logos { gap: 5px; flex-wrap: nowrap; }
.pay-logos .pay-logo {
    height: 26px; width: 44px; padding: 2px;
    border-color: #eef2f7; border-radius: 5px;
}

/* Cuotas como línea limpia (sin la caja verde maciza ni el degradé con interés) */
.installment-highlight,
.installment-highlight.con-interes {
    background: transparent; border: none; border-top: 1px solid #eef2f7;
    border-radius: 0; padding: 12px 0 0; margin-top: 6px;
}
.installment-qty { font-size: 13.5px; font-weight: 700; color: #0f172a; }
.installment-amount { font-size: 15px; font-weight: 700; color: #16a34a; }
.installment-total { font-size: 11px; color: #94a3b8; opacity: 1; }
.installment-highlight.con-interes .installment-qty { color: #475569; }
.installment-highlight.con-interes .installment-amount { color: var(--primary-color); }


/* =====================================================================
   S22 — ESCALA GENERAL estilo Frávega: header, banner y tipografía más
   chicos; laterales de mobile más ajustados. Bloque aditivo (gana al final).
   ===================================================================== */

/* BANNER — en PC mucho más chato. La PROPORCIÓN define el alto real del banner
   (no el height que se tocaba antes). Mobile queda 1200/420 (se ve bien).
   OJO: si la imagen está diseñada 1200x420, en PC se recorta arriba/abajo →
   para el look Frávega conviene subir banners anchos (~1200x300). */
@media (min-width: 768px) {
    .home-flyer--cover,
    .hero-slider-wrap.banner-simple-slider .hero-banner-slider { aspect-ratio: 1200 / 300; }
    .hero-banner-slider { height: 260px; }
}

/* HEADER — más compacto y chico (PC y mobile) */
.logo-img { height: 30px; }
.main-header { padding: 9px 14px; gap: 9px; }
.search-bar input { padding: 9px 14px; font-size: 14px; }
.hnav-link, .hnav-cats { font-size: 13px; }
.hnav-cats svg { width: 16px; height: 16px; }
.header-nav { gap: 6px 18px; padding-top: 7px; }
@media (min-width: 768px) {
    .main-header { padding: 10px max(24px, calc((100% - 1200px) / 2)) !important; }
    .hdr-ico { width: 22px; height: 22px; }
    .category-name { font-size: 13px; }
    .category-icon { width: 60px; height: 60px; font-size: 26px; }
}

/* LATERALES de mobile más ajustados (menos aire a los costados, tipo Frávega) */
@media (max-width: 767px) {
    .category-page-main { padding: 0 10px; }
    .categories-container { padding: 6px 10px; }
    .logo-img { height: 28px; }
    .hnav-link, .hnav-cats { font-size: 13px; }
}

/* =========================================================================
   TURNIO DESIGN SYSTEM · kit del admin — SESIÓN 24 (r42)
   -------------------------------------------------------------------------
   Módulo AUTÓNOMO y ADITIVO. Todo va prefijado (variables --tt-*, clases .tt-*)
   para no pisar NADA del CSS existente (público ni admin actual).
   Colisiones detectadas en el cruce S24 y resueltas por prefijo: .sidebar, .overlay.
   --text-muted se REUTILIZA del :root existente (mismo valor #64748b), no se redeclara.
   El admin actual sigue funcionando igual; migra al kit pantalla por pantalla en S25+.
   ========================================================================= */
:root{
  /* Neutrales (slates) — base del admin */
  --tt-slate-50:#f8fafc; --tt-slate-100:#f1f5f9; --tt-slate-200:#e2e8f0;
  --tt-slate-300:#cbd5e1; --tt-slate-400:#94a3b8; --tt-slate-500:#64748b;
  --tt-slate-600:#475569; --tt-slate-700:#334155; --tt-slate-800:#1e293b;
  --tt-slate-900:#0f172a;

  /* Semánticos de superficie/texto */
  --tt-surface:#ffffff;
  --tt-surface-2:#f8fafc;
  --tt-border:#e2e8f0;
  --tt-text:#0f172a;
  /* text-muted: se usa el global --text-muted (#64748b) ya definido arriba */

  /* Marca (acento) — deriva del azul de marca; swapeable por el panel de tema (S25) */
  --tt-primary:var(--primary-color,#0056b3);
  --tt-primary-600:#004a99;
  --tt-primary-050:#eaf2fb;

  /* Estado */
  --tt-success:#16a34a; --tt-success-050:#f0fdf4;
  --tt-warning:#d97706; --tt-warning-050:#fffbeb;
  --tt-danger:#dc2626;  --tt-danger-050:#fef2f2;

  /* Tipografía (Inter, ya cargada) */
  --tt-fs-12:12px; --tt-fs-13:13px; --tt-fs-14:14px; --tt-fs-16:16px;
  --tt-fs-18:18px; --tt-fs-20:20px; --tt-fs-24:24px; --tt-fs-30:30px;

  /* Espaciado (SOLO estos) */
  --tt-sp-4:4px; --tt-sp-8:8px; --tt-sp-12:12px; --tt-sp-16:16px; --tt-sp-24:24px; --tt-sp-32:32px;

  /* Radios */
  --tt-r-8:8px; --tt-r-12:12px; --tt-r-full:999px;

  /* Elevación */
  --tt-sh-1:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --tt-sh-2:0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.06);
  --tt-sh-3:0 12px 24px -6px rgba(15,23,42,.12), 0 4px 8px -4px rgba(15,23,42,.08);

  --tt-header-h:56px; --tt-sidebar-w:236px;
}

/* Íconos del set (SVG de línea inline) */
.tt-ico{width:20px;height:20px;stroke:currentColor;stroke-width:1.75;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none;}
.tt-ico-sm{width:16px;height:16px;}
.tt-ico-lg{width:24px;height:24px;}
.tt-ico-fill{fill:currentColor;stroke:none;}

/* ---- Shell (para el rediseño del admin en S25+) ---- */
.tt-app{display:grid;grid-template-columns:var(--tt-sidebar-w) 1fr;min-height:100vh;}
.tt-sidebar{background:var(--tt-slate-900);color:var(--tt-slate-300);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.tt-brand{display:flex;align-items:center;gap:var(--tt-sp-8);
  padding:0 var(--tt-sp-16);height:var(--tt-header-h);
  border-bottom:1px solid rgba(255,255,255,.07);color:#fff;}
.tt-brand-mark{width:28px;height:28px;border-radius:var(--tt-r-8);flex:none;
  background:var(--tt-primary);display:grid;place-items:center;color:#fff;}
.tt-brand-name{font-weight:700;font-size:var(--tt-fs-14);letter-spacing:.2px;}
.tt-brand-name small{display:block;font-weight:500;font-size:11px;color:var(--tt-slate-400);letter-spacing:.4px;}
.tt-nav{padding:var(--tt-sp-12) var(--tt-sp-8);overflow:auto;flex:1;}
.tt-nav-group{margin-top:var(--tt-sp-16);}
.tt-nav-group:first-child{margin-top:0;}
.tt-nav-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;
  color:var(--tt-slate-500);padding:var(--tt-sp-8) var(--tt-sp-12) var(--tt-sp-4);}
.tt-nav-item{display:flex;align-items:center;gap:var(--tt-sp-12);
  padding:var(--tt-sp-8) var(--tt-sp-12);border-radius:var(--tt-r-8);
  color:var(--tt-slate-300);text-decoration:none;font-size:var(--tt-fs-14);font-weight:500;
  cursor:pointer;margin-bottom:2px;}
.tt-nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.tt-nav-item.tt-active{background:var(--tt-primary);color:#fff;}
.tt-nav-item.tt-active:hover{background:var(--tt-primary-600);}
.tt-sidebar-foot{padding:var(--tt-sp-12) var(--tt-sp-16);border-top:1px solid rgba(255,255,255,.07);}
.tt-main{display:flex;flex-direction:column;min-width:0;}
.tt-topbar{height:var(--tt-header-h);background:var(--tt-surface);
  border-bottom:1px solid var(--tt-border);display:flex;align-items:center;gap:var(--tt-sp-16);
  padding:0 var(--tt-sp-24);position:sticky;top:0;z-index:20;}
.tt-topbar h1{font-size:var(--tt-fs-16);font-weight:600;margin:0;}
.tt-topbar .tt-spacer{flex:1;}
.tt-content{padding:var(--tt-sp-24);max-width:1120px;width:100%;margin:0 auto;}

/* ---- Utilidades tipográficas/layout ---- */
.tt-eyebrow{font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  color:var(--text-muted);margin:0 0 var(--tt-sp-8);}
.tt-section{margin-bottom:var(--tt-sp-32);}
.tt-section > h2{font-size:var(--tt-fs-18);font-weight:600;margin:0 0 var(--tt-sp-4);}
.tt-section > p.tt-sub{color:var(--text-muted);margin:0 0 var(--tt-sp-16);font-size:var(--tt-fs-13);}
.tt-row{display:flex;flex-wrap:wrap;gap:var(--tt-sp-12);align-items:center;}
.tt-stack{display:flex;flex-direction:column;gap:var(--tt-sp-12);}

/* ---- Cards ---- */
.tt-card{background:var(--tt-surface);border:1px solid var(--tt-border);
  border-radius:var(--tt-r-12);box-shadow:var(--tt-sh-1);}
.tt-card-pad{padding:var(--tt-sp-16) var(--tt-sp-24);}
.tt-card-head{padding:var(--tt-sp-16) var(--tt-sp-24);border-bottom:1px solid var(--tt-border);
  display:flex;align-items:center;gap:var(--tt-sp-12);}
.tt-card-head h3{margin:0;font-size:var(--tt-fs-14);font-weight:600;}
.tt-card-head .tt-spacer{flex:1;}

/* KPI */
.tt-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--tt-sp-16);}
.tt-kpi{padding:var(--tt-sp-16) var(--tt-sp-24);}
.tt-kpi .tt-k-label{display:flex;align-items:center;gap:var(--tt-sp-8);color:var(--text-muted);
  font-size:var(--tt-fs-13);font-weight:500;}
.tt-kpi .tt-k-value{font-size:var(--tt-fs-30);font-weight:700;line-height:1.1;margin-top:var(--tt-sp-8);}
.tt-kpi .tt-k-value.tt-warn{color:var(--tt-warning);}
.tt-kpi .tt-k-value.tt-bad{color:var(--tt-danger);}

/* ---- Botones ---- */
.tt-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--tt-sp-8);
  font-family:inherit;font-size:var(--tt-fs-14);font-weight:500;line-height:1;
  padding:0 var(--tt-sp-16);height:38px;border-radius:var(--tt-r-8);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;}
.tt-btn:focus-visible{outline:2px solid var(--tt-primary);outline-offset:2px;}
.tt-btn:disabled{opacity:.5;cursor:not-allowed;}
.tt-btn-sm{height:32px;padding:0 var(--tt-sp-12);font-size:var(--tt-fs-13);}
.tt-btn .tt-ico{width:18px;height:18px;}
.tt-btn-primary{background:var(--tt-primary);color:#fff;}
.tt-btn-primary:hover:not(:disabled){background:var(--tt-primary-600);}
.tt-btn-secondary{background:var(--tt-surface);color:var(--tt-slate-700);border-color:var(--tt-border);}
.tt-btn-secondary:hover:not(:disabled){background:var(--tt-slate-50);border-color:var(--tt-slate-300);}
.tt-btn-ghost{background:transparent;color:var(--tt-slate-600);}
.tt-btn-ghost:hover:not(:disabled){background:var(--tt-slate-100);color:var(--tt-slate-900);}
.tt-btn-danger{background:var(--tt-danger);color:#fff;}
.tt-btn-danger:hover:not(:disabled){background:#b91c1c;}
.tt-icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;
  border-radius:var(--tt-r-8);border:1px solid transparent;background:transparent;
  color:var(--tt-slate-500);cursor:pointer;}
.tt-icon-btn:hover{background:var(--tt-slate-100);color:var(--tt-slate-800);}
.tt-icon-btn:focus-visible{outline:2px solid var(--tt-primary);outline-offset:2px;}

/* ---- Form controls ---- */
.tt-field{display:flex;flex-direction:column;gap:6px;max-width:320px;}
.tt-field label{font-size:var(--tt-fs-13);font-weight:500;color:var(--tt-slate-700);}
.tt-field .tt-hint{font-size:var(--tt-fs-12);color:var(--text-muted);}
.tt-input,.tt-select,.tt-textarea{font-family:inherit;font-size:var(--tt-fs-14);color:var(--tt-text);
  background:var(--tt-surface);border:1px solid var(--tt-slate-300);
  border-radius:var(--tt-r-8);padding:0 var(--tt-sp-12);height:38px;width:100%;
  transition:border-color .12s,box-shadow .12s;}
.tt-textarea{height:auto;padding:var(--tt-sp-8) var(--tt-sp-12);min-height:84px;resize:vertical;line-height:1.5;}
.tt-input:focus,.tt-select:focus,.tt-textarea:focus{outline:none;border-color:var(--tt-primary);
  box-shadow:0 0 0 3px var(--tt-primary-050);}
.tt-select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}
.tt-input-icon{position:relative;max-width:320px;}
.tt-input-icon .tt-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--tt-slate-400);width:18px;height:18px;}
.tt-input-icon .tt-input{padding-left:38px;}
.tt-check{display:inline-flex;align-items:center;gap:var(--tt-sp-8);font-size:var(--tt-fs-14);cursor:pointer;user-select:none;}
.tt-check input{width:18px;height:18px;accent-color:var(--tt-primary);margin:0;cursor:pointer;}

/* toggle switch REAL (reemplaza estrellas/ojos) */
.tt-switch{position:relative;display:inline-flex;align-items:center;gap:var(--tt-sp-12);cursor:pointer;user-select:none;}
.tt-switch .tt-track{width:38px;height:22px;border-radius:var(--tt-r-full);background:var(--tt-slate-300);
  position:relative;transition:background .15s;flex:none;}
.tt-switch .tt-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:var(--tt-sh-1);transition:transform .15s;}
.tt-switch[aria-checked="true"] .tt-track{background:var(--tt-primary);}
.tt-switch[aria-checked="true"] .tt-thumb{transform:translateX(16px);}
.tt-switch:focus-visible{outline:2px solid var(--tt-primary);outline-offset:3px;border-radius:var(--tt-r-8);}
.tt-switch .tt-lbl{font-size:var(--tt-fs-14);color:var(--tt-slate-700);}

/* ---- Badges / chips ---- */
.tt-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 var(--tt-sp-8);
  border-radius:var(--tt-r-full);font-size:var(--tt-fs-12);font-weight:600;line-height:1;}
.tt-badge .tt-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.tt-badge-neutral{background:var(--tt-slate-100);color:var(--tt-slate-600);}
.tt-badge-success{background:var(--tt-success-050);color:var(--tt-success);}
.tt-badge-warning{background:var(--tt-warning-050);color:var(--tt-warning);}
.tt-badge-danger{background:var(--tt-danger-050);color:var(--tt-danger);}
.tt-badge-primary{background:var(--tt-primary-050);color:var(--tt-primary-600);}
.tt-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 var(--tt-sp-12);
  border:1px solid var(--tt-border);border-radius:var(--tt-r-full);background:var(--tt-surface);
  font-size:var(--tt-fs-13);color:var(--tt-slate-700);cursor:pointer;}
.tt-chip:hover{border-color:var(--tt-slate-300);background:var(--tt-slate-50);}
.tt-chip.tt-on{background:var(--tt-primary);border-color:var(--tt-primary);color:#fff;}
.tt-chip .tt-x{display:grid;place-items:center;width:16px;height:16px;opacity:.7;}
.tt-chip .tt-x:hover{opacity:1;}

/* ---- Tabla ---- */
.tt-table-wrap{overflow:auto;}
table.tt-tbl{width:100%;border-collapse:collapse;font-size:var(--tt-fs-14);}
.tt-tbl thead th{text-align:left;font-size:var(--tt-fs-12);font-weight:600;text-transform:uppercase;
  letter-spacing:.4px;color:var(--text-muted);padding:var(--tt-sp-12) var(--tt-sp-16);
  border-bottom:1px solid var(--tt-border);white-space:nowrap;background:var(--tt-surface);}
.tt-tbl th.tt-sortable{cursor:pointer;user-select:none;}
.tt-tbl th.tt-sortable:hover{color:var(--tt-slate-800);}
.tt-tbl th .tt-th-in{display:inline-flex;align-items:center;gap:6px;}
.tt-tbl th .tt-ico{width:14px;height:14px;opacity:.6;}
.tt-tbl tbody td{padding:var(--tt-sp-12) var(--tt-sp-16);border-bottom:1px solid var(--tt-border);vertical-align:middle;}
.tt-tbl tbody tr:hover{background:var(--tt-slate-50);}
.tt-tbl tbody tr.tt-sel{background:var(--tt-primary-050);}
.tt-tbl .tt-col-check{width:44px;}
.tt-tbl .tt-col-act{width:52px;text-align:right;}
.tt-prod-cell{display:flex;align-items:center;gap:var(--tt-sp-12);}
.tt-prod-thumb{width:38px;height:38px;border-radius:var(--tt-r-8);background:var(--tt-slate-100);
  display:grid;place-items:center;color:var(--tt-slate-400);flex:none;overflow:hidden;}
.tt-prod-name{font-weight:500;}
.tt-prod-sku{font-size:var(--tt-fs-12);color:var(--text-muted);}
.tt-price{font-variant-numeric:tabular-nums;}

/* bulk toolbar */
.tt-bulkbar{display:none;align-items:center;gap:var(--tt-sp-16);
  padding:var(--tt-sp-8) var(--tt-sp-16);background:var(--tt-slate-900);color:#fff;
  border-radius:var(--tt-r-8);margin-bottom:var(--tt-sp-12);}
.tt-bulkbar.tt-show{display:flex;}
.tt-bulkbar .tt-count{font-size:var(--tt-fs-13);font-weight:600;}
.tt-bulkbar .tt-spacer{flex:1;}
.tt-bulkbar .tt-btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.25);}
.tt-bulkbar .tt-btn-secondary:hover{background:rgba(255,255,255,.1);}

/* kebab menu */
.tt-kebab{position:relative;display:inline-block;}
.tt-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:180px;
  background:var(--tt-surface);border:1px solid var(--tt-border);border-radius:var(--tt-r-12);
  box-shadow:var(--tt-sh-3);padding:var(--tt-sp-4);display:none;}
.tt-menu.tt-show{display:block;}
.tt-menu button{display:flex;align-items:center;gap:var(--tt-sp-12);width:100%;text-align:left;
  font-family:inherit;font-size:var(--tt-fs-14);color:var(--tt-slate-700);
  background:transparent;border:0;border-radius:var(--tt-r-8);padding:var(--tt-sp-8) var(--tt-sp-12);cursor:pointer;}
.tt-menu button:hover{background:var(--tt-slate-100);}
.tt-menu button .tt-ico{width:18px;height:18px;color:var(--tt-slate-500);}
.tt-menu button.tt-danger{color:var(--tt-danger);}
.tt-menu button.tt-danger .tt-ico{color:var(--tt-danger);}
.tt-menu .tt-sep{height:1px;background:var(--tt-border);margin:var(--tt-sp-4) 0;}

/* ---- Tabs ---- */
.tt-tabs{display:flex;gap:var(--tt-sp-4);border-bottom:1px solid var(--tt-border);}
.tt-tab{font-family:inherit;font-size:var(--tt-fs-14);font-weight:500;color:var(--text-muted);
  background:transparent;border:0;padding:var(--tt-sp-12) var(--tt-sp-16);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;}
.tt-tab:hover{color:var(--tt-slate-800);}
.tt-tab.tt-active{color:var(--tt-primary-600);border-bottom-color:var(--tt-primary);}
.tt-tabpanel{padding-top:var(--tt-sp-16);}

/* ---- Empty state ---- */
.tt-empty{text-align:center;padding:var(--tt-sp-32) var(--tt-sp-24);}
.tt-empty .tt-ei{width:48px;height:48px;border-radius:var(--tt-r-12);background:var(--tt-slate-100);
  color:var(--tt-slate-400);display:grid;place-items:center;margin:0 auto var(--tt-sp-16);}
.tt-empty h4{margin:0 0 var(--tt-sp-4);font-size:var(--tt-fs-16);font-weight:600;}
.tt-empty p{margin:0 0 var(--tt-sp-16);color:var(--text-muted);font-size:var(--tt-fs-13);}

/* ---- Docs: swatches / tipo / spacing ---- */
.tt-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--tt-sp-12);}
.tt-sw{border:1px solid var(--tt-border);border-radius:var(--tt-r-8);overflow:hidden;background:var(--tt-surface);}
.tt-sw .tt-chip-color{height:56px;}
.tt-sw .tt-sw-meta{padding:var(--tt-sp-8);font-size:var(--tt-fs-12);}
.tt-sw .tt-sw-meta b{display:block;color:var(--tt-slate-800);}
.tt-sw .tt-sw-meta span{color:var(--text-muted);}
.tt-type-row{display:flex;align-items:baseline;gap:var(--tt-sp-16);padding:var(--tt-sp-8) 0;border-bottom:1px dashed var(--tt-border);}
.tt-type-row .tt-tag{font-size:var(--tt-fs-12);color:var(--text-muted);width:64px;flex:none;font-variant-numeric:tabular-nums;}
.tt-spaces{display:flex;align-items:flex-end;gap:var(--tt-sp-16);}
.tt-space-box{background:var(--tt-primary-050);border:1px solid var(--tt-primary);border-radius:4px;}
.tt-space-cap{font-size:var(--tt-fs-12);color:var(--text-muted);text-align:center;margin-top:6px;}

/* ---- Modal / overlay del kit (prefijado: NO es el .overlay del menú público) ---- */
.tt-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;
  align-items:center;justify-content:center;z-index:100;padding:var(--tt-sp-16);}
.tt-overlay.tt-show{display:flex;}
.tt-modal{background:var(--tt-surface);border-radius:var(--tt-r-12);box-shadow:var(--tt-sh-3);
  width:100%;max-width:420px;overflow:hidden;}
.tt-modal-head{padding:var(--tt-sp-24) var(--tt-sp-24) 0;}
.tt-modal-head h3{margin:0 0 var(--tt-sp-8);font-size:var(--tt-fs-18);font-weight:600;}
.tt-modal-head p{margin:0;color:var(--text-muted);font-size:var(--tt-fs-14);}
.tt-modal-body{padding:var(--tt-sp-16) var(--tt-sp-24);}
.tt-modal-foot{padding:var(--tt-sp-16) var(--tt-sp-24) var(--tt-sp-24);display:flex;justify-content:flex-end;gap:var(--tt-sp-8);}

/* ---- Toast del kit ---- */
.tt-toasts{position:fixed;right:var(--tt-sp-24);bottom:var(--tt-sp-24);z-index:200;
  display:flex;flex-direction:column;gap:var(--tt-sp-8);}
.tt-toast{display:flex;align-items:center;gap:var(--tt-sp-12);min-width:260px;max-width:360px;
  background:var(--tt-slate-900);color:#fff;padding:var(--tt-sp-12) var(--tt-sp-16);
  border-radius:var(--tt-r-8);box-shadow:var(--tt-sh-3);font-size:var(--tt-fs-14);
  animation:tt-slidein .18s ease;}
.tt-toast .tt-ico{width:20px;height:20px;flex:none;}
.tt-toast.tt-ok .tt-ico{color:#4ade80;}
.tt-toast.tt-err .tt-ico{color:#f87171;}
@keyframes tt-slidein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ---- Powered by / presets del panel de tema ---- */
.tt-powered{display:inline-flex;align-items:center;gap:6px;font-size:var(--tt-fs-12);
  color:var(--tt-slate-400);text-decoration:none;}
.tt-powered b{color:var(--tt-slate-500);font-weight:600;}
.tt-powered:hover b{color:var(--tt-primary-600);}
.tt-presets{display:flex;gap:var(--tt-sp-8);}
.tt-preset{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  box-shadow:inset 0 0 0 2px #fff;}
.tt-preset[aria-pressed="true"]{border-color:var(--tt-slate-400);}

@media(max-width:820px){
  .tt-app{grid-template-columns:1fr;}
  .tt-sidebar{display:none;}
}
/* ===== FIN TURNIO DESIGN SYSTEM (S24 · r42) ===== */

/* ============================================================================
   S28-DISEÑO — Carrito + Medios de pago (r43)
   Refina lo visual sin reescribir bloques previos (apendeado = gana por orden).
   ========================================================================== */

/* --- Carrito: WhatsApp como CTA principal --- */
.btn-checkout-whatsapp{ border-radius:12px; padding:14px 18px; box-shadow:0 6px 16px rgba(37,211,102,.28); }
.btn-checkout-whatsapp:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(37,211,102,.34); }
.btn-checkout-whatsapp svg{ width:24px; height:24px; }
.btn-checkout-whatsapp--stack .wa-txt{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.14; }
.btn-checkout-whatsapp--stack .wa-main{ font-weight:800; font-size:15.5px; }
.btn-checkout-whatsapp--stack .wa-sub{ font-weight:500; font-size:11.5px; color:rgba(255,255,255,.9); }

/* --- Carrito: ítems --- */
.cart-item-img-placeholder{ border-radius:10px; border-color:#eef2f6; background-color:#eef2f6; }
.cart-item-name{ font-weight:700; }
.cart-item-meta{ font-size:12px; color:#94a3b8; margin-top:2px; }
.qty-selector{ border-radius:999px; }
.remove-btn{ color:#94a3b8; font-size:12.5px; margin-top:7px; gap:5px; }
.remove-btn::before{ content:none; }
.remove-btn svg{ width:14px; height:14px; }
.remove-btn:hover{ color:#ef4444; text-decoration:none; }

/* --- Carrito: resumen --- */
.cart-summary-box h3{ font-size:16px; }
.summary-total span:last-child{ font-size:26px; letter-spacing:-.5px; }
.summary-line .highlight-green{ background:#eafaf0; color:#15803d; font-weight:700; font-size:12px; padding:3px 9px; border-radius:999px; }
.secure-checkout-note{ display:flex; align-items:center; justify-content:center; gap:6px; }
.secure-checkout-note svg{ width:14px; height:14px; flex:0 0 auto; }

/* --- Carrito: barra de checkout FIJA en móvil (reusa el resumen) --- */
@media (max-width:600px){
  .cart-summary-box{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    border:none; border-top:1px solid var(--border-color); border-radius:14px 14px 0 0;
    box-shadow:0 -6px 18px rgba(15,23,42,.08);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); margin:0;
  }
  .cart-summary-box h3,
  .cart-summary-box .summary-line,
  .cart-summary-box .summary-divider,
  .cart-summary-box .secure-checkout-note{ display:none; }
  .cart-summary-box .summary-total{ margin:0 0 8px; }
  .cart-summary-box .summary-total span:last-child{ font-size:22px; }
  .cart-summary-box .btn-checkout-whatsapp{ margin:0; padding:12px 16px; }
  .cart-page-main{ padding-bottom:150px; }
}

/* --- Medios de pago: bloques de encabezado (contado / tarjeta) --- */
.mp-callouts{ display:grid; grid-template-columns:1fr; gap:12px; margin:0 0 24px; }
.mp-callout{ border:1px solid var(--border-color); border-radius:12px; padding:16px; }
.mp-callout__head{ display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.mp-callout__head svg{ width:22px; height:22px; flex:0 0 auto; }
.mp-callout__title{ font-size:15px; font-weight:800; color:#0f172a; }
.mp-callout__text{ font-size:13.5px; color:#64748b; line-height:1.5; margin:0; }
.mp-callout--cash{ background:#f0fdf4; border-color:#bbf7d0; }
.mp-callout--cash .mp-callout__head svg{ color:#15803d; }
.mp-callout--cash .mp-callout__title{ color:#166534; }
.mp-callout--cash .mp-callout__text{ color:#3f6212; }
.mp-callout--cash .mp-callout__text strong{ color:#15803d; }
.mp-callout--card .mp-callout__head svg{ color:var(--primary-color); }

/* --- Medios de pago: filas de cuotas (aire + destaque "sin interés") --- */
.cuota-row{ padding:12px 14px; }
.cuota-row.is-featured{ background:#f0fdf4; }
.cuota-row:has(.cuota-row-tag.sin-interes){ background:#f0fdf4; }
.cuota-row-tag.sin-interes{ background:#15803d; color:#fff; font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; min-width:0; }
.cuota-row-tag.es-contado{ background:#eaf2fb; color:#0056b3; font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; min-width:0; }
.cuota-cardtab.is-active{ background:var(--tt-primary-050,#eaf2fb); }

@media (min-width:769px){ .mp-callouts{ grid-template-columns:1.1fr 1fr; } }
/* ===== FIN S28-DISEÑO (r43) ===== */