/* ══════════════════════════════════════════════════════════════ ALTA RUTA 4x4 STORE — KITS DE SUSPENSIÓN POR CAMIONETA (15-sep-2026) Estilos de la capa de kits (kits.js). Usa las variables del sistema (styles.css / tema-claro.css), así que funciona en claro y en oscuro. ══════════════════════════════════════════════════════════════ */ :root{--k-sel:rgba(243,156,18,.10)} html.claro{--k-sel:rgba(194,116,10,.08)} /* ── Pestañas: kits / piezas sueltas ── */ .ktabs{display:flex;gap:4px;margin:0 0 24px;border-bottom:1px solid var(--linea);overflow-x:auto} .ktab{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;font-family:var(--tit); font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--gris); border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s;white-space:nowrap} .ktab:hover{color:var(--hueso)} .ktab.on{color:var(--ambar);border-bottom-color:var(--ambar)} .kintro{max-width:820px;color:var(--gris);font-size:14.5px;margin:-4px 0 8px} .kintro b{color:var(--hueso)} /* ── Grupo por camioneta ── */ .kveh{margin:30px 0 0} .kveh-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px} .kveh-hd h3{font-size:24px} .kveh-hd p{color:var(--gris);font-size:13px;margin-top:4px} .kveh-mia{padding:22px;border:1px solid var(--ambar);border-radius:var(--r);background:var(--k-sel)} /* ── Tarjeta de kit ── */ .kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px} .kcard{background:var(--carbon-2);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden; display:flex;flex-direction:column;position:relative;transition:.2s} .kcard:hover{border-color:var(--carbon-4);transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.45)} html.claro .kcard:hover{box-shadow:0 12px 28px rgba(20,16,10,.10)} .kimg{display:block;aspect-ratio:16/10;background:var(--carbon-3) center/cover no-repeat;position:relative;border-bottom:1px solid var(--linea)} .kimg-velo{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,10,.74),rgba(8,8,10,0) 55%)} .klinea{position:absolute;top:11px;left:11px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; padding:4px 9px;border-radius:2px;background:rgba(14,14,16,.88);color:#F5F3EF;border-left:3px solid var(--k-color,var(--ambar))} .kborrador{position:absolute;top:11px;right:11px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:4px 9px;border-radius:2px;background:var(--rojo);color:#fff} .kimg .marca-logo{position:absolute;bottom:10px;left:10px;line-height:0} .kimg .marca-logo .mlogo{background:rgba(245,243,239,.94);box-shadow:0 2px 10px rgba(0,0,0,.35)} .kalza{position:absolute;bottom:12px;right:12px;font-family:var(--tit);font-size:22px;font-weight:700;color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.65);letter-spacing:.02em} .kbody{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1} .kbody h3{font-size:16px;line-height:1.25;text-transform:none;font-family:var(--cuerpo);font-weight:700;letter-spacing:0} .kinc{font-size:12.5px;color:var(--gris);line-height:1.5} .kstock{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--gris)} .kprecio{margin-top:auto;padding-top:12px;border-top:1px solid var(--linea)} .kprecio .desde{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-2)} .kprecio .val{font-family:var(--tit);font-size:26px;line-height:1.05;display:block;color:var(--hueso)} .kprecio .tc{display:block;font-size:11px;color:var(--gris-2);margin-top:3px;letter-spacing:.03em} .kfalta{font-size:11.5px;color:var(--rojo);line-height:1.4} .kacc{display:flex;gap:8px;margin-top:6px} .kacc .btn{flex:1;padding:12px 10px;font-size:11.5px} .kcard-borrador{opacity:.85} /* Tarjeta "otra camioneta" */ .kotra{border-style:dashed;background:transparent;align-items:center;justify-content:center;text-align:center;padding:34px 22px;gap:12px} .kotra .emo{font-size:40px;opacity:.5} .kotra h3{font-size:17px} .kotra p{font-size:13px;color:var(--gris);max-width:280px} /* Cómo funciona (3 pasos) */ .kcomo{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:44px 0 10px} .kcomo-p{background:var(--carbon-2);border:1px solid var(--linea);border-radius:var(--r);padding:20px;display:flex;gap:14px} .kcomo-n{font-family:var(--tit);font-size:30px;font-weight:700;color:var(--ambar);line-height:1;flex-shrink:0} .kcomo-p h4{font-size:14px;margin-bottom:5px} .kcomo-p p{font-size:12.5px;color:var(--gris);line-height:1.5} /* ── Ficha del kit ── */ .kficha .gal-main{aspect-ratio:16/10} table.specs th{padding:9px 13px;text-align:left;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--gris-2);border-bottom:1px solid var(--linea);font-weight:700} table.specs.ktabla td:first-child{width:auto;color:var(--hueso)} table.specs.ktabla td small{color:var(--gris);font-size:11.5px} .ksku{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;color:var(--gris-2);letter-spacing:.02em} .kguia{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px} .kguia-c{background:var(--carbon-2);border:1px solid var(--linea);border-radius:var(--r);padding:16px} .kguia-c h5{font-family:var(--tit);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;color:var(--ambar)} .kguia-c p{font-size:12.5px;color:var(--gris);margin:0;line-height:1.5} /* Bloque de configuración dentro del panel de compra */ .kpanel-cfg{margin:4px 0 14px;padding:14px;border:1px dashed var(--linea);border-radius:var(--r);background:var(--carbon-3)} .kpanel-cfg.ok{border-style:solid;border-color:rgba(78,124,58,.65)} .kpanel-cfg p{font-size:12.5px;color:var(--gris);margin-bottom:12px;line-height:1.5} .kpanel-cfg p b{color:var(--hueso)} .kpanel-cfg-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px} .kcambiar{font-size:12px;color:var(--ambar);text-decoration:underline;padding:0} .kres{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0} .kres li{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;line-height:1.35} .kres li span{color:var(--gris)} .kres li b{text-align:right;color:var(--hueso);font-weight:600} .kadd-hint{font-size:11.5px;color:var(--gris-2);text-align:center;margin:0 0 10px} /* ── Modal del configurador ── */ .kcfg{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;padding:18px} .kcfg.on{display:flex} .kcfg-in{width:min(840px,100%);max-height:min(92vh,920px);background:var(--carbon-2);border:1px solid var(--linea); border-top:3px solid var(--ambar);border-radius:var(--r);display:flex;flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,.6)} html.claro .kcfg-in{box-shadow:0 30px 80px rgba(20,16,10,.28)} .kcfg-hd{padding:18px 22px;border-bottom:1px solid var(--linea);display:flex;align-items:flex-start; justify-content:space-between;gap:14px;background:var(--carbon-3)} .kcfg-hd h3{font-size:19px;text-transform:none;font-family:var(--cuerpo);font-weight:700;letter-spacing:0;margin-top:3px;line-height:1.2} .kcfg-hd p{font-size:12.5px;color:var(--gris);margin-top:4px} .kcfg-x{font-size:28px;line-height:1;color:var(--gris);padding:0 6px;flex-shrink:0} .kcfg-x:hover{color:var(--ambar)} .kcfg-body{flex:1;overflow-y:auto;padding:4px 22px 18px} .kbase{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0;border-bottom:1px solid var(--linea);align-items:center;font-size:12.5px;color:var(--gris)} .kbase b{color:var(--hueso)} .kstep{padding:18px 0;border-bottom:1px solid var(--linea)} .kstep:last-child{border-bottom:none} .kstep-hd{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px} .kstep-n{width:28px;height:28px;border-radius:50%;background:var(--ambar);color:#000;font-family:var(--tit); font-weight:700;display:grid;place-items:center;flex-shrink:0;font-size:14px} .kstep-hd h4{font-size:15px;letter-spacing:.04em} .kstep-hd p{font-size:12.5px;color:var(--gris);margin-top:3px;max-width:660px;line-height:1.45} .kopts{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px} .kopt{display:flex;gap:10px;align-items:flex-start;padding:12px 13px;border:1px solid var(--linea);border-radius:var(--r); background:var(--carbon-3);cursor:pointer;transition:.15s;position:relative} .kopt:hover{border-color:var(--ambar)} .kopt.on{border-color:var(--ambar);background:var(--k-sel);box-shadow:inset 0 0 0 1px var(--ambar)} .kopt input{margin-top:3px;accent-color:var(--ambar);flex-shrink:0;width:15px;height:15px} .kopt-t{flex:1;display:flex;flex-direction:column;gap:3px;font-size:13px;min-width:0} .kopt-t b{font-weight:600;line-height:1.25;color:var(--hueso)} .kopt-t small{font-size:11.5px;color:var(--gris);line-height:1.4} .kopt-t em{font-style:normal;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ambar);font-weight:700} .kopt-p{text-align:right;font-size:12.5px;font-weight:600;color:var(--hueso);white-space:nowrap;display:flex; flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0} .kopt-p small{font-size:10.5px;font-weight:400;color:var(--gris-2)} .kopt.cotizar .kopt-p{color:var(--ambar)} .kcfg-ft{padding:14px 22px;border-top:1px solid var(--linea);background:var(--carbon-3);display:flex; align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .kcfg-total span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-2);display:block} .kcfg-total b{font-family:var(--tit);font-size:28px;line-height:1.05;color:var(--hueso)} .kcfg-total small{display:block;font-size:11.5px;color:var(--gris);margin-top:3px;max-width:520px} /* ── Carrito: piezas del kit ── */ .dw-comp{margin-top:6px;font-size:11.5px;color:var(--gris)} .dw-comp summary{cursor:pointer;color:var(--ambar);font-size:11.5px;list-style:none} .dw-comp summary::-webkit-details-marker{display:none} .dw-comp summary::before{content:"▸ ";font-size:10px} .dw-comp[open] summary::before{content:"▾ "} .dw-comp ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:3px} .dw-comp li{display:flex;justify-content:space-between;gap:8px} .dw-comp li i{font-style:normal;font-family:ui-monospace,monospace;color:var(--gris-2);font-size:10.5px;flex-shrink:0} /* ── Mi camioneta: bloque de kits ── */ .kveh-bloque{margin-bottom:26px} /* ── Mega menú ── */ .mega-col a.mega-kits{color:var(--ambar);font-weight:600} /* ── Responsive ── */ @media(max-width:760px){ .kcfg{padding:0} .kcfg-in{width:100%;height:100%;max-height:none;border-radius:0} .kopts{grid-template-columns:1fr} .kcfg-ft{position:sticky;bottom:0} .kcfg-ft .btn{width:100%} .kveh-mia{padding:16px} .kgrid{grid-template-columns:1fr} } /* ── Ajustes tras la verificación del 16-sep ── .kopt es un