/* ───────────── BLOQUES MT opt-in (ADR 0001 · design.json home.sections) ─────────────
   Se enlaza DESPUÉS de styles.css y SOLO cuando el tenant trae home.sections. Todo sobre las
   vars del tema (--brasa acento · --queso · --panel · --crema · --muted · --line · --carbon2).
   Prefijo bk- para no colisionar con styles.css. Sin em-dash. */
.bk{max-width:var(--max);margin:0 auto;padding:clamp(4.5rem,9vw,8rem) clamp(1rem,4vw,2rem)}
.bk-head{max-width:720px;margin-bottom:2.4rem}
.bk-head .section-title{font-size:clamp(2.2rem,4.6vw,4.2rem);text-wrap:balance}
.bk-head .section-sub{max-width:56ch;text-wrap:pretty}
.bk-num{font-family:var(--ff-d);font-variant-numeric:tabular-nums}
[hidden]{display:none !important}

/* facts: franja de confianza */
.bk-facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--carbon2)}
.bk-facts-grid{max-width:var(--max);margin:0 auto;padding:0 clamp(1rem,4vw,2rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.bk-fact{padding:1.6rem 1.4rem 1.6rem 0;border-right:1px solid var(--line);display:flex;gap:.9rem;align-items:flex-start}
.bk-fact:last-child{border-right:0}.bk-fact+.bk-fact{padding-left:1.4rem}
.bk-fact svg{width:22px;height:22px;flex:none;color:var(--brasa);margin-top:.15rem}
.bk-fact b{display:block;font-weight:600;font-size:.98rem;line-height:1.3}
.bk-fact span{display:block;color:var(--muted);font-size:.86rem;margin-top:.15rem}

/* how_it_works: escena (SVG del tenant) + controles + panel de pasos */
.bk-how{background:var(--carbon2);border-bottom:1px solid var(--line)}
.bk-how-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.4rem;align-items:start}
.bk-scene{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;color:#10231A;font-family:var(--ff-b)}
.bk-scene>svg{display:block;width:100%;height:auto}
.bk-ctrl{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid #D7E0D8;flex-wrap:wrap;background:#fff}
.bk-btn{font:inherit;font-size:.9rem;border:1px solid #D7E0D8;background:#fff;color:#10231A;border-radius:10px;padding:7px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:40px}
.bk-btn:hover{border-color:#14452F}
.bk-btn.primario{background:#14452F;color:#fff;border-color:#14452F}
.bk-btn svg{width:16px;height:16px}
.bk-time{margin-left:auto;color:#40584A;font-size:.88rem;font-variant-numeric:tabular-nums}
.bk-steps{display:flex;gap:4px;padding:0 12px 12px;background:#fff}
.bk-steps button{flex:1;height:22px;border:0;padding:0;background:transparent;cursor:pointer;position:relative}
.bk-steps button::before{content:"";position:absolute;left:0;right:0;top:8px;height:6px;border-radius:3px;background:#E3E9E3}
.bk-steps button i{position:absolute;left:0;top:8px;height:6px;border-radius:3px;background:#1E6B47;width:0}
.bk-panel{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:1.4rem 1.4rem 1.1rem;position:sticky;top:96px}
.bk-panel-num{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brasa)}
.bk-panel h3{font-family:var(--ff-d);font-size:1.5rem;line-height:1.05;margin:.4rem 0 .7rem;text-transform:uppercase}
.bk-panel-text{font-size:.98rem}
.bk-panel-extra{font-size:.98rem;font-weight:600;color:var(--brasa);margin-top:.5rem}
.bk-panel-extra:empty{display:none}
.bk-notes{list-style:none;margin:.8rem 0 1rem}
.bk-notes li{font-size:.84rem;color:var(--muted);padding:6px 10px;border-left:3px solid var(--brasa);background:color-mix(in oklab,var(--brasa) 10%,transparent);border-radius:0 8px 8px 0;margin-bottom:6px}
.bk-legend{border-top:1px solid var(--line);padding-top:.8rem}
.bk-legend h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:.5rem;font-weight:600}
.bk-legend ul{list-style:none;display:grid;gap:5px}
.bk-legend li{display:flex;gap:9px;align-items:center;font-size:.86rem;padding:4px 6px;border-radius:8px;transition:background .3s}
.bk-legend li.activa{background:color-mix(in oklab,var(--brasa) 16%,transparent);font-weight:600}
.bk-legend b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#fff;font-size:.78rem;flex:none}
.bk-colors{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:.7rem;font-size:.78rem;color:var(--muted)}
.bk-colors span{display:inline-flex;align-items:center;gap:6px}
.bk-colors i{width:18px;height:5px;border-radius:3px;display:inline-block}

/* reach variant slider: dimensionador */
.bk-dim{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.bk-slider{position:sticky;top:110px;background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:clamp(1.4rem,3vw,2.4rem);overflow:hidden}
.bk-slider::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:70%;background:radial-gradient(50% 60% at 50% 100%,color-mix(in oklab,var(--brasa) 18%,transparent),transparent 70%);pointer-events:none}
.bk-readout{display:flex;align-items:baseline;gap:.6rem}
.bk-readout .big{font-size:clamp(4rem,8vw,7rem);line-height:.9;color:var(--brasa)}
.bk-readout .unit{font-size:1.4rem;color:var(--muted);font-weight:600}
.bk-lbl{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-top:1.4rem}
.bk-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin-top:.2rem;cursor:pointer}
.bk-slider input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:var(--line)}
.bk-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--brasa);border:4px solid var(--panel);margin-top:-12px;box-shadow:0 0 0 2px var(--brasa)}
.bk-slider input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:var(--line)}
.bk-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--brasa);border:4px solid var(--panel)}
.bk-reco{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:1rem 1.2rem;align-items:center}
.bk-reco .chip{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--carbon);background:var(--brasa);padding:.4rem .7rem;border-radius:6px;font-weight:700}
.bk-reco h4{font-family:var(--ff-d);font-size:1.35rem;text-transform:uppercase;line-height:1.05}
.bk-reco p{grid-column:1/-1;color:var(--muted);font-size:.92rem}
.bk-tiers{display:grid;gap:.7rem}
.bk-tier{display:grid;grid-template-columns:96px 1fr auto;gap:1rem;align-items:center;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02);transition:border-color .35s var(--ease),background .35s,transform .35s var(--ease),opacity .35s}
.bk-tier .km{font-size:1.9rem;line-height:1}
.bk-tier .spec{color:var(--muted);font-size:.85rem}.bk-tier .perfil{font-size:.95rem;margin-top:.1rem}
.bk-tier .ok{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:transparent;transition:all .3s}
.bk-tier.on{border-color:var(--brasa);background:color-mix(in oklab,var(--brasa) 10%,transparent);transform:translateX(6px)}
.bk-tier.on .km{color:var(--brasa)}.bk-tier.on .ok{background:var(--brasa);border-color:var(--brasa);color:var(--carbon)}
.bk-tier.dim{opacity:.5}
.bk-note{color:var(--muted);font-size:.85rem;margin-top:1.2rem}

/* tabs por modelo */
.bk-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2.4rem}
.bk-tab{padding:.7rem 1.1rem;border-radius:100px;border:1px solid var(--line);background:transparent;color:var(--muted);font:600 .9rem var(--ff-b);cursor:pointer;transition:all .25s var(--ease);min-height:44px}
.bk-tab:hover{color:var(--crema);border-color:var(--crema)}
.bk-tab.on{background:var(--brasa);border-color:var(--brasa);color:var(--carbon)}
.bk-prod{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,4vw,3.5rem);margin-top:2rem;align-items:center;animation:bk-rise .5s var(--ease) both}
@keyframes bk-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.bk-prod-media{position:relative;aspect-ratio:1;border-radius:26px;background:#fff;overflow:hidden;border:1px solid var(--line);display:grid;place-items:center;padding:7%}
.bk-prod-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.bk-prod-media .badge{position:absolute;top:1rem;left:1rem;padding:.45rem .75rem;border-radius:8px;background:var(--carbon);color:var(--crema);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.bk-prod h3{font-family:var(--ff-d);font-size:clamp(2rem,3.6vw,3.4rem);line-height:.95;text-transform:uppercase}
.bk-price{display:flex;align-items:baseline;gap:.6rem;margin-top:1rem}
.bk-price b{font-family:var(--ff-d);font-size:clamp(1.6rem,2.4vw,2.2rem);color:var(--brasa)}
.bk-price span{color:var(--muted);font-size:.9rem}
.bk-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-top:1.4rem}
.bk-spec{padding:.9rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.bk-spec small{display:block;color:var(--muted);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.bk-spec b{display:block;font-weight:600;font-size:1rem;margin-top:.3rem}
.bk-prod p{color:var(--muted);margin-top:1.2rem;max-width:52ch}
.bk-prod .btn{margin-top:1.4rem}

/* catálogo con filtros + miniaturas */
.bk-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2.2rem}
.bk-chip{padding:.6rem 1rem;min-height:44px;border-radius:100px;border:1px solid var(--line);background:transparent;color:var(--muted);font:600 .86rem var(--ff-b);cursor:pointer;transition:all .25s var(--ease)}
.bk-chip:hover{color:var(--crema);border-color:var(--crema)}.bk-chip.on{background:var(--crema);color:var(--carbon);border-color:var(--crema)}
.bk-list{margin-top:1.4rem;border-top:1px solid var(--line)}
.bk-list.fa .bk-row{animation:bk-fa .45s var(--ease) both}.bk-list.fb .bk-row{animation:bk-fb .45s var(--ease) both}
@keyframes bk-fa{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes bk-fb{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.bk-row{display:grid;grid-template-columns:64px 1fr auto;gap:1.2rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line);transition:background .25s}
.bk-row:hover{background:linear-gradient(90deg,rgba(255,255,255,.03),transparent)}
.bk-th{width:64px;height:64px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;transition:transform .35s var(--ease)}
.bk-th img{max-width:88%;max-height:88%;width:auto;height:auto;object-fit:contain}
.bk-row:hover .bk-th{transform:scale(1.1) rotate(-2deg)}
.bk-row h4{font-weight:600;font-size:1.02rem}.bk-row p{color:var(--muted);font-size:.88rem;margin-top:.15rem;max-width:64ch}
.bk-row .pr{font-size:1.2rem;color:var(--brasa);white-space:nowrap}
.bk-grp{display:inline-block;margin-top:.4rem;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:.2rem .5rem;border-radius:6px}
.bk-more{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.4rem;color:var(--muted);font-size:.9rem;flex-wrap:wrap}

/* responsive */
@media(max-width:1020px){
  .bk-facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bk-fact:nth-child(2){border-right:0}.bk-fact:nth-child(3){padding-left:0}.bk-fact{border-bottom:1px solid var(--line)}.bk-fact:nth-child(n+3){border-bottom:0}
  .bk-how-grid,.bk-dim,.bk-prod{grid-template-columns:1fr}.bk-panel,.bk-slider{position:relative;top:auto}}  /* relative, NUNCA static: el ::before absoluto del slider escaparía y ensancharía la página (soul §2) */
@media(max-width:860px){
  .bk-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.bk-tab{white-space:normal;text-align:center;padding:.7rem .8rem}
  .bk-tier{grid-template-columns:72px 1fr auto}.bk-tier .km{font-size:1.5rem}
  .bk-specs{grid-template-columns:1fr 1fr}
  .bk-row{grid-template-columns:56px 1fr;gap:.9rem}.bk-th{width:56px;height:56px}.bk-row .pr{grid-column:2;font-size:1.05rem}
  .bk-btn span{display:none}.bk-time{width:100%;margin-left:0;text-align:right}
  .bk-more .btn{white-space:normal}}