/* Kennerverse Comparador — CSS v3.0.0 */

#kv-root {
    font-family: var(--e-global-typography-text-font-family, 'Roboto'), sans-serif;
    font-size: 14px;
    color: var(--e-global-color-text, #ffffff);
    width: 100%;
}
#kv-root *, #kv-root *::before, #kv-root *::after { box-sizing: border-box; }

/* ── BARRA INFERIOR ── */
.kv-bottom-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    margin-top: 6px;
    border-top: 1px solid rgba(255,222,1,0.12);
    flex-wrap: wrap;
}
.kv-comp-counter {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    margin-right: auto;
    animation: kvFadeIn 0.2s ease;
}
.kv-comp-counter strong { color: var(--e-global-color-primary, #FFDE01); }

/* Toast de máximo alcanzado */
.kv-toast {
    display: block;
    width: 100%;
    text-align: center;
    background: rgba(27,37,47,0.96);
    border: 1px solid var(--e-global-color-accent, #FA8B04);
    color: var(--e-global-color-accent, #FA8B04);
    font-size: 12px;
    font-family: var(--e-global-typography-text-font-family, 'Roboto'), sans-serif;
    padding: 9px 16px;
    border-radius: 3px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.25s, max-height 0.25s, padding 0.25s, margin 0.25s;
    margin: 0;
}
.kv-toast.visible {
    opacity: 1;
    max-height: 60px;
    margin-bottom: 12px;
}

/* Botones */
.kv-btn-comparar, .kv-btn-volver, .kv-btn-reset {
    font-family: var(--e-global-typography-text-font-family, 'Roboto'), sans-serif;
    font-size: 12px; font-weight: 400; text-transform: uppercase;
    border-radius: 3px; cursor: pointer; transition: opacity 0.2s;
    margin: 0; padding: 9px 22px; line-height: 1; border: none;
}
.kv-btn-comparar { background-color: var(--e-global-color-accent, #FA8B04); color: #fff; }
.kv-btn-comparar:hover:not(:disabled) { opacity: 0.85; }
.kv-btn-comparar:disabled { opacity: 0.28; cursor: not-allowed; }
.kv-btn-volver {
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.15) !important;
}
.kv-btn-volver:hover { background: rgba(255,255,255,0.13); color: #fff; }
.kv-btn-desel {
    background: transparent;
    color: rgba(250,139,4,0.7);
    border: 1px solid rgba(250,139,4,0.4) !important;
    border-radius: 3px;
    padding: 8px 18px;
}
.kv-btn-desel:hover:not(:disabled) {
    background: rgba(250,139,4,0.1);
    border-color: var(--e-global-color-accent, #FA8B04) !important;
    color: var(--e-global-color-accent, #FA8B04);
}
.kv-btn-desel:disabled {
    opacity: 0.2;
    cursor: not-allowed;
    border-color: rgba(255,255,255,0.15) !important;
    color: rgba(255,255,255,0.2);
}

/* ── GRUPOS ── */
.kv-grupo-sep {
    height: 1px; background: rgba(255,222,1,0.1); margin: 20px 0;
}
.kv-grupo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

/* ── TARJETAS ── */
.kv-tarjeta {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px; background: rgba(255,255,255,0.03);
    overflow: hidden; display: flex; flex-direction: column;
    transition: border-color 0.2s;
}
.kv-tarjeta.principal  { border-color: rgba(255,222,1,0.18); }
.kv-tarjeta.subvariante { border-left: 2px solid rgba(255,222,1,0.22); }
.kv-tarjeta.selected   { border-color: var(--e-global-color-primary, #FFDE01) !important; background: rgba(255,222,1,0.04); }

/* Header tarjeta */
.kv-tarjeta-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px; padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.15);
}
.kv-tarjeta-titulo {
    display: flex; align-items: flex-start; gap: 5px; min-width: 0; flex: 1;
}
.kv-col-icon { display: flex; align-items: center; flex-shrink: 0; margin-top: 1px; }
.kv-col-icon.tiene    { color: #ffffff; }
.kv-col-icon.no-tiene { color: rgba(255,255,255,0.2); }
.kv-tarjeta-nombre {
    font-size: 11px; font-weight: 500; color: var(--e-global-color-primary, #FFDE01);
    word-break: break-word; line-height: 1.35;
}

/* Header derecho: ID + badge + checkbox */
.kv-header-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0;
}
.kv-header-id-row {
    display: flex; align-items: center; gap: 4px;
}
.kv-tarjeta-id {
    font-size: 9px; color: rgba(255,255,255,0.25);
    letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
}
.kv-sub-badge {
    font-size: 8px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    background: rgba(255,222,1,0.1); color: rgba(255,222,1,0.5);
    border: 1px solid rgba(255,222,1,0.2); border-radius: 2px; padding: 1px 5px;
    white-space: nowrap;
}

/* Checkbox */
.kv-check-label {
    display: flex; align-items: center; gap: 5px; cursor: pointer;
    font-size: 9px; font-weight: 500;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase; letter-spacing: 0.8px;
    user-select: none; white-space: nowrap; transition: all 0.15s;
    padding: 3px 7px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
}
.kv-check-label:hover {
    border-color: rgba(255,222,1,0.35);
    background: rgba(255,222,1,0.06);
    color: rgba(255,255,255,0.6);
}
.kv-check-label.checked {
    border-color: var(--e-global-color-primary, #FFDE01);
    background: rgba(255,222,1,0.12);
    color: var(--e-global-color-primary, #FFDE01);
}
.kv-check-input { display: none; }
.kv-check-box {
    width: 13px; height: 13px;
    border: 1.5px solid rgba(255,222,1,0.35);
    border-radius: 2px; display: flex; align-items: center; justify-content: center;
    font-size: 8px; color: transparent; background: transparent;
    transition: all 0.15s; flex-shrink: 0;
}
.kv-check-label.checked .kv-check-box {
    background: var(--e-global-color-primary, #FFDE01);
    border-color: var(--e-global-color-primary, #FFDE01); color: #1b252f;
}

/* ── GALERÍA EN TARJETA ── */
.kv-tarjeta-gal { display: flex; flex-direction: column; }
.kv-tarjeta-img-wrap {
    position: relative; aspect-ratio: 1;
    background: rgba(0,0,0,0.2); overflow: hidden;
}
.kv-tarjeta-img-wrap img {
    width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.15s;
}
.kv-nav-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18) !important;
    background: rgba(27,37,47,0.82); color: rgba(255,255,255,0.8);
    font-size: 16px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2; transition: all 0.15s;
    backdrop-filter: blur(4px); padding: 0; margin: 0; line-height: 1;
}
.kv-nav-arrow:hover { background: var(--e-global-color-accent, #FA8B04); border-color: var(--e-global-color-accent, #FA8B04) !important; color: #fff; }
.kv-nav-arrow:disabled, .kv-nav-arrow:disabled:hover {
    opacity: 0.15; cursor: default;
    background: rgba(27,37,47,0.82); border-color: rgba(255,255,255,0.18) !important; color: rgba(255,255,255,0.8);
}
.kv-nav-arrow.prev { left: 6px; }
.kv-nav-arrow.next { right: 6px; }
.kv-gal-counter {
    position: absolute; bottom: 7px; right: 7px;
    font-size: 10px; color: rgba(255,255,255,0.6);
    background: rgba(0,0,0,0.55); padding: 2px 6px; border-radius: 10px;
    backdrop-filter: blur(4px);
}
.kv-nav-dots {
    display: flex; gap: 4px; justify-content: center;
    padding: 6px; background: rgba(0,0,0,0.12);
}
.kv-nav-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255,255,255,0.2); cursor: pointer;
    transition: background 0.15s; flex-shrink: 0;
}
.kv-nav-dot.active { background: var(--e-global-color-primary, #FFDE01); }
.kv-gal-thumbs {
    display: flex; gap: 3px; padding: 5px;
    background: rgba(0,0,0,0.1); overflow-x: auto; scrollbar-width: none;
}
.kv-gal-thumbs::-webkit-scrollbar { display: none; }
.kv-thumb {
    width: 40px; height: 40px; border-radius: 2px; overflow: hidden;
    cursor: pointer; flex-shrink: 0;
    border: 1.5px solid transparent; transition: border-color 0.15s, opacity 0.15s; opacity: 0.5;
}
.kv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kv-thumb:hover { opacity: 0.8; }
.kv-thumb.active { border-color: var(--e-global-color-primary, #FFDE01); opacity: 1; }
.kv-sin-imagen {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.18); font-size: 11px; background: rgba(0,0,0,0.1);
}

/* ── META DE TARJETA ── */
.kv-tarjeta-meta { padding: 9px 10px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.kv-comp-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.kv-tag {
    font-size: 9px; font-weight: 500; letter-spacing: .5px;
    padding: 2px 6px; border-radius: 2px; text-transform: uppercase;
}
.kv-tag-maker        { background:rgba(255,222,1,.1);   color:#FFDE01; border:1px solid rgba(255,222,1,.2); }
.kv-tag-tipo-oficial    { background:rgba(97,206,112,.1); color:#7ddc8e; border:1px solid rgba(97,206,112,.2); }
.kv-tag-tipo-no-oficial { background:rgba(250,139,4,.1);  color:#FA8B04; border:1px solid rgba(250,139,4,.2); }

.kv-coo-valor {
    font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.82);
    border-left: 2px solid var(--e-global-color-primary, #FFDE01);
    padding-left: 7px; margin: 0;
}

/* ── TABS ES/EN ── */
.kv-desc-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.kv-desc-tab {
    font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    padding: 4px 8px; cursor: pointer; color: rgba(255,255,255,0.25);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: all 0.15s; user-select: none;
}
.kv-desc-tab.active { color: var(--e-global-color-accent, #FA8B04); border-bottom-color: var(--e-global-color-accent, #FA8B04); }
.kv-desc-content { font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.6; padding-top: 5px; }
.kv-desc-panel { display: none; }
.kv-desc-panel.active { display: block; }

/* ── VISTA COMPARADOR ── */
.kv-result-grid {
    display: grid; gap: 1px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px; overflow: hidden; overflow-x: auto; width: 100%;
}
.kv-result-col-header { padding: 10px 12px; background: rgba(255,222,1,0.06); border-bottom: 1px solid rgba(255,222,1,0.12); }
.kv-result-col-name { font-size: 12px; font-weight: 500; color: var(--e-global-color-primary, #FFDE01); margin-bottom: 2px; }
.kv-result-col-id { font-size: 10px; color: rgba(255,255,255,0.3); letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: 4px; }
.kv-nav-gal { background: rgba(0,0,0,0.2); }
.kv-nav-gal-img { aspect-ratio: 1; overflow: hidden; position: relative; }
.kv-nav-gal-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.15s; }
.kv-attr-label {
    padding: 9px 12px; font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
    color: rgba(255,255,255,0.3); background: rgba(0,0,0,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.05); border-right: 1px solid rgba(255,255,255,0.05);
    white-space: nowrap; display: flex; align-items: center; gap: 5px;
}
.kv-corner { background: rgba(255,222,1,0.04); border-bottom: 1px solid rgba(255,222,1,0.1); }
.kv-attr-val {
    padding: 9px 12px; font-size: 12px; color: rgba(255,255,255,0.7);
    border-bottom: 1px solid rgba(255,255,255,0.05); border-right: 1px solid rgba(255,255,255,0.05);
    line-height: 1.5; vertical-align: top; background: var(--wp--preset--color--background-color, #1b252f);
}
.kv-attr-val:last-child { border-right: none; }
.kv-attr-val.difiere { color: var(--e-global-color-accent, #FA8B04); font-weight: 500; }
.kv-attr-val.igual   { color: rgba(255,255,255,0.28); }
.kv-attr-val span    { display: block; line-height: 1.5; }
.kv-desc-es          { margin-bottom: 8px; }
.kv-desc-en          { margin-top: 8px; }
.kv-desc-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.15);
    margin: 0;
}
.kv-diff-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--e-global-color-accent, #FA8B04); flex-shrink: 0; }
.kv-leyenda { margin-top: 10px; font-size: 11px; color: rgba(255,255,255,0.25); display: flex; align-items: center; gap: 6px; }
.kv-leyenda-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--e-global-color-accent, #FA8B04); display: inline-block; flex-shrink: 0; }

/* ── RESPONSIVE ── */
@media (max-width: 480px) {
    .kv-grupo-grid { grid-template-columns: 1fr; }
}
@media (min-width: 481px) and (max-width: 767px) {
    .kv-grupo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Cursor zoom en imágenes del comparador */
.kv-img-link { display: block; cursor: zoom-in; }
.kv-img-link img { pointer-events: none; }

/* ── DISTRIBUCIÓN ── */
.kv-dist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}

/* Badges de tipo */
.kv-dist-badge {
    font-size: 8px; font-weight: 600;
    letter-spacing: 0.8px; text-transform: uppercase;
    padding: 3px 7px; border-radius: 2px;
    white-space: nowrap; flex-shrink: 0;
}
.kv-dist-badge--fabricante_original { background:rgba(255,222,1,.12); color:#FFDE01; border:1px solid rgba(255,222,1,.25); }
.kv-dist-badge--fabricante_regional { background:rgba(74,158,255,.1); color:#7bbfff; border:1px solid rgba(74,158,255,.25); }
.kv-dist-badge--distribuidor        { background:rgba(255,255,255,.06); color:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.12); }
.kv-dist-badge--bootleg             { background:rgba(232,80,80,.1); color:#ff9a9a; border:1px solid rgba(232,80,80,.25); }
.kv-dist-badge--especial            { background:rgba(62,201,138,.08); color:#3ec98a; border:1px solid rgba(62,201,138,.2); }

/* Nombre local en itálica */
.kv-dist-nombre-local {
    font-size: 11px; font-style: italic;
    color: rgba(255,222,1,0.5); line-height: 1.4;
}

@media (max-width: 480px) {
    .kv-dist-grid { grid-template-columns: 1fr; }
}

/* ── LEER MÁS / TEXTO LOCAL ── */
.kv-leer-mas {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 5px;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: rgba(250,139,4,0.5);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--e-global-typography-text-font-family, 'Roboto'), sans-serif;
    transition: color 0.15s;
}
.kv-leer-mas::after {
    content: '›';
    font-size: 12px;
    line-height: 1;
    color: rgba(250,139,4,0.4);
    transition: color 0.15s, transform 0.15s;
    display: inline-block;
}
.kv-leer-mas:hover {
    color: rgba(250,139,4,0.8);
}
.kv-leer-mas:hover::after {
    color: rgba(250,139,4,0.8);
    transform: translateX(2px);
}

.kv-desc-local-wrap {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.kv-desc-local-label {
    display: block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,222,1,0.4);
    margin-bottom: 3px;
}
.kv-desc-local { font-size: 11px; color: rgba(255,255,255,0.6); }

/* ── ENLACE ARTÍCULO DISTRIBUIDOR ── */
.kv-dist-url {
    display: inline-block;
    margin-top: 8px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--e-global-color-primary, #FFDE01);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,222,1,0.3);
    padding-bottom: 1px;
    transition: border-color 0.15s, color 0.15s;
    font-family: var(--e-global-typography-text-font-family, 'Roboto'), sans-serif;
}
.kv-dist-url:hover {
    color: var(--e-global-color-primary, #FFDE01);
    border-bottom-color: var(--e-global-color-primary, #FFDE01);
}

/* ── GRUPOS DE EMPAQUE (distribución) ── */
.kv-dist-grupo-sep {
    height: 1px;
    background: rgba(255,222,1,0.1);
    margin: 20px 0;
}
.kv-dist-grupo-header {
    margin-bottom: 12px;
}
.kv-dist-grupo-label {
    font-family: var(--e-global-typography-text-font-family, 'Roboto'), sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,222,1,0.5);
    display: flex;
    align-items: center;
    gap: 10px;
}
.kv-dist-grupo-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,222,1,0.12);
}

/* ── HEADER DISTRIBUIDOR ── */
.kv-dist-header-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.15);
    width: 100%;
}
.kv-dist-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.kv-dist-pais {
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    line-height: 1.3;
}

/* ── EMPAQUES (cardbacks / bolsas / cajas) dentro de tarjeta distribuidor ── */
.kv-cb-section {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 8px;
    margin-top: 4px;
}
.kv-cb-label {
    font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,222,1,0.4); margin-bottom: 7px;
    display: flex; align-items: center; gap: 8px;
}
.kv-cb-label::after {
    content: ''; flex: 1; height: 1px; background: rgba(255,222,1,0.1);
}
.kv-cb-list { display: flex; flex-direction: column; gap: 5px; }
.kv-cb-item {
    display: flex; align-items: center; gap: 7px;
}
.kv-cb-hidden { display: none; }
.kv-cb-icon { flex-shrink: 0; width: 15px; height: 15px; display: flex; align-items: center; }
.kv-cb-icon.tiene    { color: #ffffff; }
.kv-cb-icon.no-tiene { color: rgba(255,255,255,0.2); }
.kv-cb-nombre {
    font-size: 11px; color: rgba(255,255,255,0.65); flex: 1; line-height: 1.3;
}
.kv-cb-thumbs { display: flex; gap: 3px; flex-shrink: 0; }
.kv-cb-thumb-link {
    display: block; width: 26px; height: 26px; border-radius: 2px;
    overflow: hidden; cursor: zoom-in; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.1);
}
.kv-cb-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kv-cb-no-img {
    width: 26px; height: 26px; border-radius: 2px; flex-shrink: 0;
    background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.1);
}
.kv-cb-more-btn {
    margin-top: 7px; background: none; border: none; cursor: pointer;
    font-size: 9px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase;
    color: rgba(250,139,4,0.5); padding: 0;
    display: flex; align-items: center; gap: 3px;
    transition: color 0.15s;
    font-family: var(--e-global-typography-text-font-family, 'Roboto'), sans-serif;
}
.kv-cb-more-btn:hover { color: rgba(250,139,4,0.85); }
.kv-cb-arrow {
    font-size: 13px; display: inline-block; transition: transform 0.2s;
}

/* ══════════════════════════════════════════
   EMPAQUES — Cardbacks / Bolsas / Cajas
   (páginas de colección)
══════════════════════════════════════════ */

/* Separador entre manufacturas */
.kv-emp-mfr-sep {
    height: 1px; background: rgba(255,222,1,0.1); margin: 28px 0;
}

/* Header manufactura */
.kv-emp-mfr-header {
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255,222,1,0.2);
    margin-bottom: 6px;
}
.kv-emp-mfr-top {
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 10px;
}
.kv-emp-mfr-nombre { font-size: 15px; font-weight: 500; color: var(--e-global-color-primary, #FFDE01); }
.kv-emp-mfr-pais   { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 2px; }
.kv-emp-mfr-desc   { margin: 8px 0 4px; }
.kv-emp-mfr-desc .kv-desc-content { font-size: 11px; color: rgba(255,255,255,0.4); line-height: 1.6; }

/* Familia sub-header */
.kv-emp-familia-header {
    font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,222,1,0.4); margin: 20px 0 10px;
    display: flex; align-items: center; gap: 10px;
}
.kv-emp-familia-header::after {
    content: ''; flex: 1; height: 1px; background: rgba(255,222,1,0.1);
}

/* Variante — fila expandida */
.kv-emp-variante {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.kv-emp-variante:last-child { border-bottom: none; }

/* Columna imagen */
.kv-emp-img-col {
    flex-shrink: 0; width: 320px;
    display: flex; flex-direction: column; gap: 6px;
}
.kv-emp-img-empty {
    width: 100%; height: 260px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.1); border-radius: 3px;
    font-size: 11px; color: rgba(255,255,255,0.15);
}
.kv-emp-thumbs {
    display: flex; gap: 4px; flex-wrap: wrap;
}
.kv-emp-thumb {
    width: 32px; height: 32px; border-radius: 2px; overflow: hidden;
    cursor: pointer; border: 1.5px solid transparent;
    opacity: 0.5; transition: all 0.15s; flex-shrink: 0;
}
.kv-emp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kv-emp-thumb:hover { opacity: 0.8; }
.kv-emp-thumb.active { border-color: var(--e-global-color-primary, #FFDE01); opacity: 1; }

/* Columna contenido */
.kv-emp-content { flex: 1; min-width: 0; }
.kv-emp-var-header {
    display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
}
.kv-emp-var-id {
    font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.85);
}

/* Mobile */
@media (max-width: 540px) {
    .kv-emp-variante  { flex-direction: column; }
    .kv-emp-img-col   { width: 100%; }
    .kv-emp-img-empty { width: 100%; height: 160px; }
}

/* ── EMPAQUES adicionales ── */

/* Índice de manufacturas */
.kv-emp-index {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 12px 0 20px;
    border-bottom: 1px solid rgba(255,222,1,0.1);
    margin-bottom: 24px;
}
.kv-emp-index-link {
    font-size: 11px; font-weight: 500;
    color: var(--e-global-color-accent, #FA8B04);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid rgba(250,139,4,0.25);
    border-radius: 2px;
    background: rgba(250,139,4,0.05);
    transition: all 0.15s;
    white-space: nowrap;
}
.kv-emp-index-link:hover {
    background: rgba(250,139,4,0.12);
    border-color: rgba(250,139,4,0.5);
    color: var(--e-global-color-accent, #FA8B04);
}

/* Título manufactura más grande */
.kv-emp-mfr-nombre { font-size: 18px; font-weight: 500; color: var(--e-global-color-primary, #FFDE01); }

/* Tabs manufactura — separados de los de variante */
.kv-emp-desc-tabs { display:flex; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:4px; }
.kv-emp-desc-tab {
    font-size:9px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
    padding:4px 8px; cursor:pointer; color:rgba(255,255,255,.25);
    border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .15s;
    user-select: none;
}
.kv-emp-desc-tab.active { color:#FA8B04; border-bottom-color:#FA8B04; }
.kv-emp-desc-content .kv-emp-desc-panel { display: none; font-size: 11px; color: rgba(255,255,255,0.4); line-height: 1.6; padding-top: 4px; }
.kv-emp-desc-content .kv-emp-desc-panel.active { display: block; }

/* Par de imágenes principales */
.kv-emp-img-pair {
    display: flex;
    gap: 5px;
    height: 260px;
}
.kv-emp-img-slot {
    flex: 1; min-width: 0; height: 260px;
    border-radius: 3px;
    cursor: zoom-in;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    transition: opacity 0.15s;
}

/* Mobile */
@media (max-width: 640px) {
    .kv-emp-variante  { flex-direction: column; }
    .kv-emp-img-col   { width: 100%; }
    .kv-emp-img-pair  { height: 360px; gap: 4px; }
    .kv-emp-img-slot  { flex: 1; height: 360px; min-width: 0; }
}

/* Flechas navegación galería empaques */
.kv-emp-arrows {
    display: flex; justify-content: center; gap: 8px; margin-top: 6px;
}
.kv-emp-nav {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18) !important;
    background: rgba(27,37,47,0.82); color: rgba(255,255,255,0.7);
    font-size: 18px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; margin: 0; line-height: 1;
    transition: all 0.15s;
}
.kv-emp-nav:hover { background: var(--e-global-color-accent, #FA8B04); border-color: var(--e-global-color-accent, #FA8B04) !important; color: #fff; }



/* ══════════════════════════════════════════
   HEADER DE FIGURA
══════════════════════════════════════════ */
.kv-hdr-wrap {
    display: flex; gap: 24px; align-items: flex-start;
    margin-bottom: 28px;
}
.kv-hdr-gal {
    flex-shrink: 0; width: 320px;
    display: flex; flex-direction: column; gap: 6px;
}
.kv-hdr-img-wrap {
    position: relative; aspect-ratio: 1;
    background: rgba(0,0,0,0.2); border-radius: 4px; overflow: hidden;
}
.kv-hdr-img-link { display: block; width: 100%; height: 100%; }
.kv-hdr-img-link img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: opacity 0.15s;
}
.kv-hdr-info { flex: 1; min-width: 0; }
.kv-hdr-title {
    font-family: var(--e-global-typography-primary-font-family, 'Shadows Into Light'), cursive;
    font-size: 28px; font-weight: 400;
    color: var(--e-global-color-primary, #FFDE01);
    line-height: 1.2; margin: 0 0 8px;
}
.kv-hdr-alt-names {
    font-size: 15px; color: rgba(255,255,255,0.75);
    margin-bottom: 18px; line-height: 1.6;
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
    font-style: italic;
}
.kv-hdr-sep { color: rgba(255,255,255,0.3); margin: 0 4px; font-style: normal; }
.kv-hdr-meta { display: flex; flex-direction: column; gap: 6px; }
.kv-hdr-meta-row {
    font-size: 13px; color: rgba(255,255,255,0.5);
    border-left: 2px solid rgba(255,222,1,0.3); padding-left: 10px;
}
.kv-hdr-meta-row strong { color: rgba(255,255,255,0.8); font-weight: 500; }
.kv-hdr-sku { font-size: 11px; letter-spacing: 0.5px; }

/* Mobile header */
@media (max-width: 600px) {
    .kv-hdr-wrap  { flex-direction: column; }
    .kv-hdr-gal   { width: 100%; }
    .kv-hdr-title { font-size: 22px; }
}

/* ══════════════════════════════════════════
   TABS DE FIGURA
══════════════════════════════════════════ */
.kv-tabs-nav {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255,222,1,0.15);
    padding-bottom: 0;
}
.kv-tab-btn {
    font-family: var(--e-global-typography-text-font-family, 'Roboto'), sans-serif;
    font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
    padding: 10px 18px; cursor: pointer;
    background: transparent; border: none;
    color: rgba(255,255,255,0.3);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}
.kv-tab-btn:hover { color: rgba(255,255,255,0.6); }
.kv-tab-btn.active {
    color: var(--e-global-color-primary, #FFDE01);
    border-bottom-color: var(--e-global-color-primary, #FFDE01);
}
.kv-tab-panel { display: none; }
.kv-tab-panel.active { display: block; width: 100%; }

/* ══════════════════════════════════════════
   FONDO OSCURO Y ANCHO COMPLETO
   páginas con plugin activo
══════════════════════════════════════════ */
body.kv-active,
body.kv-active #wrapper,
body.kv-active #page,
body.kv-active .site,
body.kv-active #content,
body.kv-active .page-wrapper {
    background-color: #1b252f !important;
}
body.kv-active .site-content,
body.kv-active #content,
body.kv-active .hestia-page,
body.kv-active article,
body.kv-active .hentry,
body.kv-active .col-md-8.single-post-container,
body.kv-active .single-post-container {
    background-color: #1b252f !important;
    color: #ffffff;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Contenedor del contenido — ancho completo */
body.kv-active .blog-post-wrapper,
body.kv-active div.main {
    background-color: #1b252f !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.kv-active .blog-post-wrapper > .container,
body.kv-active div.main .container {
    background-color: #1b252f !important;
    max-width: 1600px !important;
    width: 100% !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Navbar — siempre blanco */
body.kv-active .navbar,
body.kv-active .navbar.navbar-default,
body.kv-active nav.navbar {
    background-color: #ffffff !important;
    color: #333333 !important;
}
body.kv-active .entry-content,
body.kv-active .single-post-wrap.entry-content {
    background-color: #1b252f !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 24px !important;
    box-sizing: border-box;
}
body.kv-active .entry-header {
    background-color: #1b252f !important;
    padding-left: 24px;
    padding-right: 24px;
}
body.kv-active .entry-title,
body.kv-active .page-title {
    color: var(--e-global-color-primary, #FFDE01);
}
/* Eliminar bordes y sombras del tema */
body.kv-active .card,
body.kv-active .hentry,
body.kv-active article {
    box-shadow: none !important;
    border: none !important;
}
/* Menú y header del sitio — colores originales hardcodeados */
body.kv-active .navbar,
body.kv-active nav,
body.kv-active header.navbar,
body.kv-active #site-header,
body.kv-active .site-header,
body.kv-active .navbar-default {
    background-color: #ffffff !important;
    border-color: #e7e7e7 !important;
}
body.kv-active .navbar a,
body.kv-active .navbar-default .navbar-nav > li > a,
body.kv-active .navbar-default .navbar-brand {
    color: #333333 !important;
}
body.kv-active .navbar-default .navbar-nav > li > a:hover,
body.kv-active .navbar-default .navbar-nav > .active > a {
    color: #FA8B04 !important;
}
body.kv-active .dropdown-menu {
    background-color: #ffffff !important;
}
body.kv-active .dropdown-menu > li > a {
    color: #333333 !important;
}
body.kv-active .dropdown-menu > li > a:hover {
    color: #FA8B04 !important;
    background-color: #f5f5f5 !important;
}
/* Eliminar meta de entrada (autor, fecha) */
body.kv-active .entry-meta,
body.kv-active .article-header-meta,
body.kv-active .author-box,
body.kv-active span.posted-on,
body.kv-active span.byline,
body.kv-active .entry-footer {
    display: none !important;
}

/* ── HERO IMAGE por colección ── */
.kv-hero-img {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 24px;
}
@media (max-width: 600px) {
    .kv-hero-img { height: 180px; }
}
