/* GG Electrics — Arma tu Kit (plugin gg-armakit). Usa los tokens de gg.css del theme; no define colores nuevos. */
.ak{padding-top:clamp(20px,3vw,40px)}
.ak__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.ak__visual{position:sticky;top:92px;display:flex;flex-direction:column;gap:16px}

/* ---------- vista del kit (fotos reales sobre fondo claro, como las fichas) ---------- */
.ak__stage{padding:0;overflow:hidden}
.ak-studio{display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:end;gap:clamp(8px,2vw,20px);padding:clamp(22px,3vw,34px) clamp(14px,2.4vw,28px) 18px;
  background:radial-gradient(120% 90% at 50% 20%,#ffffff 0%,#eef6f6 55%,#d9e8e8 100%);min-height:clamp(230px,26vw,330px)}
.ak-slot{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.ak-slot__img{position:relative;width:100%;aspect-ratio:1/1;display:grid;place-items:center}
.ak-slot--main .ak-slot__img{aspect-ratio:1/1.05}
.ak-slot__img::after{content:"";position:absolute;left:14%;right:14%;bottom:2%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(4,18,26,.22),transparent);z-index:0}
.ak-slot__img img{position:absolute;inset:4%;width:92%;height:92%;object-fit:contain;z-index:1;
  transform:translate(calc(var(--k,0)*9%),calc(var(--k,0)*-6%)) scale(calc(1 - var(--k,0)*.06));mix-blend-mode:multiply;transition:transform .4s var(--gg-ease)}
.ak-slot__img img:not(:last-child){opacity:.85}
.ak-slot__img svg{width:34%;height:34%;color:#86a1a6}
.ak-slot.is-empty .ak-slot__img{border:1.5px dashed rgba(16,74,90,.28);border-radius:18px}
.ak-slot__cap{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:44px;text-align:center}
.ak-slot__qty{font:700 .78rem/1 var(--gg-font-display);color:var(--gg-ink);background:rgba(16,74,90,.12);border-radius:999px;padding:4px 9px}
.ak-slot__qty:empty{display:none}
.ak-slot__lbl{font:600 .82rem/1.25 var(--gg-font);color:var(--gg-teal)}
.ak-slot.is-empty .ak-slot__lbl{color:#4c6b70;font-weight:500}
.ak__caption{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:14px;margin:0;padding:16px 20px 18px;border-top:1px solid var(--gg-line-2)}
.ak__caption dt{font-size:.75rem;color:var(--gg-muted);margin-bottom:4px}
.ak__caption dd{margin:0;font:600 .98rem/1.25 var(--gg-font-display);color:var(--gg-text)}

/* ---------- gráfico ---------- */
.ak-chart{position:relative;margin:18px 0 0;padding:16px 16px 12px;border-radius:16px;border:1px solid var(--gg-line-2);background:rgba(4,9,13,.35)}
.ak-chart figcaption{font-size:.85rem;color:var(--gg-text-2);margin-bottom:8px}
.ak-chart figcaption b{display:block;color:var(--gg-text);font-weight:600;font-size:.92rem;margin-bottom:2px}
.ak-chart svg{display:block;width:100%;height:auto}
.ak-chart__grid{stroke:rgba(234,244,243,.08)}
.ak-chart__ax{fill:var(--gg-muted);font:500 11px var(--gg-font)}
.ak-chart__bar{fill:#1f9e86;transition:opacity .2s}
.ak-chart__col.is-dim .ak-chart__bar{opacity:.4}
.ak-chart__ref{stroke:#1075c5;stroke-width:2;stroke-dasharray:6 5}
.ak-chart__key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.78rem;color:var(--gg-text-2);margin-top:6px}
.ak-chart__swatch{width:12px;height:12px;border-radius:3px;background:#1f9e86}
.ak-chart__dash{width:18px;border-top:2px dashed #1075c5;margin-left:8px}
.ak-chart__tip{position:absolute;top:44px;width:150px;padding:8px 10px;border-radius:10px;background:var(--gg-bg-2);border:1px solid var(--gg-line);font-size:.78rem;color:var(--gg-text-2);pointer-events:none;box-shadow:var(--gg-shadow)}
.ak-chart__tip b{color:var(--gg-text)}

/* ---------- foto real de referencia ---------- */
.ak-ref{margin:6px 0 4px;border-radius:16px;overflow:hidden;border:1px solid var(--gg-line-2)}
.ak-ref:empty{display:none}
.ak-ref img{display:block;width:100%;height:auto;aspect-ratio:1024/658;object-fit:cover}
.ak-ref figcaption{padding:12px 14px;font-size:.85rem;color:var(--gg-text-2)}
.ak-ref figcaption b{display:block;color:var(--gg-text);font-weight:600;margin-bottom:2px}

/* ---------- resumen ---------- */
.ak__sum{padding:20px 22px}
.ak__sum h2{font-size:1.15rem;margin-bottom:10px}
.ak__det{margin-bottom:12px}
.ak__det summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:.88rem;color:var(--gg-mint);list-style:none}
.ak__det summary::-webkit-details-marker{display:none}
.ak__det summary::after{content:"";width:8px;height:8px;margin-left:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.ak__det[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.ak__det .ak__lines{margin-top:6px}
.ak__lines{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.88rem}
.ak__lines li{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;color:var(--gg-text-2)}
.ak__lines li>span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.ak__lines li b{font-weight:500;color:var(--gg-text)}
.ak__lines li small{font-size:.78rem;color:var(--gg-muted)}
.ak__grp{font-size:.75rem;color:var(--gg-muted);margin:14px 0 8px}
.ak__grp:first-child{margin-top:4px}
.ak__lines li span:last-child{color:var(--gg-text);white-space:nowrap;font-variant-numeric:tabular-nums}
.ak__lines li.is-muted span:last-child{color:var(--gg-muted)}
.ak__total{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--gg-line-2)}
.ak__total>span{display:flex;flex-direction:column;gap:3px;font-weight:600;color:var(--gg-text)}
.ak__total>span small{font-weight:400;font-size:.78rem;color:var(--gg-muted)}
.ak__total .gg-price{font-size:1.7rem}
.ak__save{font-size:.92rem;color:var(--gg-text-2);margin:12px 0 18px}
.ak__save small{display:block;margin-top:3px;font-size:.75rem;color:var(--gg-muted)}
.ak__lead{font-size:.92rem;color:var(--gg-text-2);margin:0 0 16px}
.ak__save b{color:var(--gg-mint);font-weight:600}

/* ---------- pasos ---------- */
.ak__steps{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.ak__steps button{width:100%;min-height:52px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:6px 10px;border-radius:12px;
  border:1px solid var(--gg-line-2);background:transparent;color:var(--gg-text-2);font:500 .78rem/1.15 var(--gg-font);text-align:left;cursor:pointer;transition:.2s}
.ak__steps button b{font:700 .8rem/1 var(--gg-font-display);color:var(--gg-muted)}
.ak__steps button[aria-current="step"]{border-color:var(--gg-mint);color:var(--gg-text);background:rgba(101,239,212,.07)}
.ak__steps button[aria-current="step"] b,.ak__steps button.is-done b{color:var(--gg-mint)}
.ak__steps button:disabled{opacity:.55;cursor:not-allowed}
.ak__panel{padding:clamp(18px,2.4vw,28px)}
.ak__panel[hidden]{display:none}
.ak__panel>h2{font-size:clamp(1.25rem,2vw,1.5rem);margin-bottom:6px}
.ak__panel>p{color:var(--gg-text-2);font-size:.95rem;margin-bottom:18px}
fieldset.ak__set{border:0;margin:0 0 20px;padding:0;min-width:0}
fieldset.ak__set>legend{font-weight:600;font-size:.92rem;margin-bottom:10px;padding:0}
.ak__seg{display:flex;flex-wrap:wrap;gap:8px}
.ak__seg label{position:relative}
.ak__seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.ak__seg span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--gg-line-2);color:var(--gg-text-2);font-size:.9rem;transition:.2s}
.ak__seg input:checked+span{background:var(--gg-mint);color:var(--gg-ink);border-color:var(--gg-mint);font-weight:600}
.ak__seg input:focus-visible+span{outline:2px solid var(--gg-mint);outline-offset:3px}
.ak__seg svg{width:18px;height:18px}

.ak__range{width:100%;accent-color:var(--gg-mint);height:44px}
.ak__rec{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;border:1px solid var(--gg-line);background:rgba(101,239,212,.06);font-size:.9rem;color:var(--gg-text-2)}
.ak__rec svg{flex:none;width:20px;height:20px;color:var(--gg-mint);margin-top:1px}
.ak__rec b{color:var(--gg-text);font-weight:600}
.ak__warn{border-color:rgba(244,184,82,.35);background:rgba(244,184,82,.07)}
.ak__warn svg{color:var(--gg-amber)}

/* opciones (radio cards) */
.ak__opts{display:flex;flex-direction:column;gap:10px}
.ak-opt{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 14px 10px 10px;border-radius:16px;
  border:1px solid var(--gg-line-2);background:rgba(4,9,13,.35);cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.ak-opt:hover{border-color:rgba(101,239,212,.35)}
.ak-opt input{position:absolute;opacity:0;width:1px;height:1px}
.ak-opt:has(input:checked){border-color:var(--gg-mint);background:rgba(101,239,212,.08);box-shadow:var(--gg-glow)}
.ak-opt:has(input:focus-visible){outline:2px solid var(--gg-mint);outline-offset:3px}
.ak-opt:has(input:disabled){cursor:not-allowed;opacity:.62}
.ak-opt__media{width:76px;height:76px;border-radius:12px;background:radial-gradient(circle at 50% 35%,#ffffff,#e1eeee);display:grid;place-items:center;padding:8px;color:var(--gg-teal)}
.ak-opt__media img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.ak-opt__media svg{width:34px;height:34px}
.ak-opt__body{min-width:0;display:flex;flex-direction:column;gap:6px}
.ak-opt__brand{font:600 .78rem/1 var(--gg-font);color:var(--gg-mint)}
.ak-opt__name{font:600 .95rem/1.3 var(--gg-font-display);color:var(--gg-text)}
.ak-opt__meta{display:flex;flex-wrap:wrap;gap:6px}
.ak-opt__meta .gg-chip{height:24px;font-size:.72rem;padding:0 9px}
.ak-opt__why{font-size:.78rem;color:var(--gg-amber)}
.ak-opt__note{font-size:.78rem;color:var(--gg-text-2)}
.ak-opt__model{font-size:.75rem;color:var(--gg-muted);letter-spacing:.01em}
.ak-opt__desc{font-size:.84rem;color:var(--gg-text-2);line-height:1.45}
.ak__recbtn{margin-left:auto;flex:none}
.ak__rec{align-items:center}
.ak-opt__price{text-align:right;font:700 1rem/1 var(--gg-font-display);white-space:nowrap}
.ak-opt__price small{display:block;margin-top:5px;font:500 .7rem/1 var(--gg-font);color:var(--gg-muted)}
.ak-opt__tag{position:absolute;top:-9px;right:14px;height:22px;padding:0 10px;border-radius:999px;background:var(--gg-mint);color:var(--gg-ink);font:600 .7rem/22px var(--gg-font)}

/* cantidad */
.ak__qty{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ak__qty .gg-icon-btn{width:48px;height:48px;border:1px solid var(--gg-line);border-radius:14px}
.ak__qty output{min-width:72px;text-align:center;font:700 2rem/1 var(--gg-font-display);font-variant-numeric:tabular-nums}
.ak__qty small{color:var(--gg-muted);font-size:.82rem}
.ak__meters{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ak__meters .gg-field{margin:0}

.ak__nav [hidden]{display:none!important}
.ak__fin{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.ak-check{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;font-size:.84rem;color:var(--gg-text-2);cursor:pointer}
.ak-check input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--gg-mint)}
.ak-check a{color:var(--gg-mint)}
.ak__alt{display:block;width:100%;margin-top:10px}
.ak__nav{display:flex;justify-content:space-between;gap:12px;margin-top:8px}
.ak__nav .gg-btn--ghost svg,.ak__nav .gg-btn svg{width:18px;height:18px}

/* barra móvil + hoja */
.ak__bar,.ak__barmeta{display:none}
.ak-sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:560px;max-height:85vh;background:transparent;color:var(--gg-text)}
.ak-sheet::backdrop{background:rgba(4,9,13,.7)}
.ak-sheet .ak__sum{border-radius:var(--gg-r-lg) var(--gg-r-lg) 0 0;background:var(--gg-bg-2);max-height:85vh;overflow:auto}
.ak-sheet__x{float:right}
.ak-flowsteps{margin:14px 0 0;padding-left:20px;color:var(--gg-text-2);font-size:.88rem;display:flex;flex-direction:column;gap:6px}
.ak-flowsteps b{color:var(--gg-text);font-weight:600}
.ak-proto{display:inline-flex;gap:8px;align-items:center;margin-top:18px;padding:6px 12px;border-radius:999px;border:1px solid var(--gg-line);font-size:.8rem;color:var(--gg-text-2)}
.ak-proto svg{flex:none;color:var(--gg-amber)}

@media (max-width:1023px){
  .ak__grid{grid-template-columns:minmax(0,1fr)}
  .ak__visual{position:static}
  .ak__visual .ak__sum{display:none}
  .ak__barmeta{display:block}
  .ak__bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gg-pad) calc(10px + env(safe-area-inset-bottom));
    background:rgba(6,18,28,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--gg-line)}
  .ak__bar .gg-price{font-size:1.25rem}
  .ak__bar .gg-price small{margin-top:4px}
  .ak__barmeta{margin-top:6px;font-size:.75rem;color:var(--gg-mint)}
  .ak-page .gg-wa{bottom:92px}
  .ak-page .ggc{bottom:92px}
  .ak-page .gg-footer{padding-bottom:110px}
}
@media (max-width:640px){
  .ak__steps{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ak__steps button{padding:6px;align-items:center;text-align:center}
  .ak__steps button span{display:none}
  .ak-opt{grid-template-columns:60px minmax(0,1fr);row-gap:8px}
  .ak-opt__media{width:60px;height:60px}
  .ak-opt__price{grid-column:2;text-align:left}
  .ak__meters{grid-template-columns:1fr}
  .ak-studio{min-height:0;padding:18px 10px 12px}
  .ak-slot__lbl{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .ak-slot__img img,.ak-chart__bar{transition:none}
}
@media (min-width:1024px){.ak-sheet{margin:auto}.ak-sheet .ak__sum{border-radius:var(--gg-r-lg)}}

.ak-page .gg-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
@media (max-width:420px){.ak__nav{flex-wrap:wrap}.ak__nav>.gg-btn,.ak__fin{flex:1 1 auto}.ak__nav .gg-btn{padding:0 14px}.ak__fin .gg-btn{flex:1 1 100%}}

.ak__intro{max-width:70ch;color:var(--gg-text-2);margin:0 0 18px}
.ak__nota{margin-top:12px;text-align:center}
.ak-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ak-err{margin:4px 0 12px;padding:10px 12px;border-radius:12px;border:1px solid rgba(244,184,82,.35);background:rgba(244,184,82,.08);color:var(--gg-text);font-size:.88rem}
.ak-err[hidden]{display:none}
.ak-sheet [aria-busy="true"]{cursor:progress}
/* Espacio reservado para lo que dibuja el JS (evita saltos de diseño, CLS) */
.ak__caption{min-height:80px}
#akRec1{min-height:100px}
@media (max-width:640px){.ak-studio{min-height:236px}.ak__caption{min-height:156px}#akRec1{min-height:124px}}
