/* Tecnoklip — Configurador PC IA
   Concepto visual: "hoja de especificaciones" / esquema técnico de hardware.
   Papel frío + tinta azul profunda + un único acento naranja de calibración. */
.tkpc2{
    --tk-paper:#EEF2F1;
    --tk-paper-raised:#FFFFFF;
    --tk-ink:#12232B;
    --tk-ink-soft:#4C6169;
    --tk-line:#C7D6D6;
    --tk-line-strong:#8FA6A8;
    --tk-accent:#FF6A3D;
    --tk-accent-ink:#3B1200;
    --tk-blueprint:#0F3D5C;
    --tk-blueprint-deep:#08202F;
    --tk-success:#2F8F5B;
    --tk-radius-sm:6px;
    --tk-radius-md:12px;
    --tk-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --tk-mono:ui-monospace,"SFMono-Regular","IBM Plex Mono","JetBrains Mono",Menlo,Consolas,monospace;
    font-family:var(--tk-sans);
    color:var(--tk-ink);
    background:var(--tk-paper);
    max-width:1440px;margin:0 auto;overflow:hidden;
    line-height:1.5;
}
.tkpc2 *{box-sizing:border-box}
.tkpc2 h1,.tkpc2 h2,.tkpc2 h3{font-weight:700;letter-spacing:-.01em;margin:0 0 .4em}
.tkpc2 :focus-visible{outline:2px solid var(--tk-accent);outline-offset:2px}
.tkpc2-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Hero ---------- */
.tkpc2-hero{
    position:relative;overflow:hidden;
    display:grid;grid-template-columns:1fr 420px;align-items:center;gap:24px;
    padding:64px 6% 56px;
    background:var(--tk-blueprint-deep);
    color:#EAF3F1;
}
.tkpc2-hero-grid{
    position:absolute;inset:0;pointer-events:none;
    background-image:
        linear-gradient(var(--tk-blueprint) 1px,transparent 1px),
        linear-gradient(90deg,var(--tk-blueprint) 1px,transparent 1px);
    background-size:34px 34px;
    opacity:.35;
    mask-image:radial-gradient(circle at 30% 40%,#000 0%,transparent 75%);
}
.tkpc2-hero-copy{position:relative;z-index:1;max-width:600px}
.tkpc2-eyebrow{font-family:var(--tk-mono);font-size:13px;color:var(--tk-accent);margin:0 0 10px}
.tkpc2 h1{font-size:clamp(32px,4vw,48px);line-height:1.12;color:#fff}
.tkpc2-hero-copy p{color:#B9CBC8;font-size:16px;max-width:480px;margin:0 0 26px}
.tkpc2 .tkpc2-start,.tkpc2 .tkpc2-primary{
    border:0;background:var(--tk-accent);color:var(--tk-accent-ink) !important;
    border-radius:var(--tk-radius-sm);padding:14px 22px;font-weight:700;font-size:15px;
    cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;
}
.tkpc2-start:hover,.tkpc2-primary:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(255,106,61,.35)}
.tkpc2-hero-art{position:relative;z-index:1;width:100%;height:auto;color:#7FA7B9;max-width:380px;justify-self:end}
.tkpc2-hero-label{font-family:var(--tk-mono);font-size:11px;fill:#8FB9C9;letter-spacing:.02em}

/* ---------- Stepper ---------- */
.tkpc2-stepper{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 6%;background:var(--tk-paper-raised);border-bottom:1px solid var(--tk-line)}
.tkpc2 .tkpc2-dot{
    width:30px;height:30px;border-radius:50%;border:1.5px solid var(--tk-line-strong);
    background:transparent;color:var(--tk-ink-soft) !important;font-family:var(--tk-mono);font-size:13px;
    display:flex;align-items:center;justify-content:center;
}
.tkpc2 .tkpc2-dot[aria-current="step"]{border-color:var(--tk-accent);color:var(--tk-accent-ink) !important;background:var(--tk-accent)}
.tkpc2 .tkpc2-dot.tkpc2-done{border-color:var(--tk-blueprint);color:var(--tk-blueprint) !important;cursor:pointer}

/* ---------- Layout ---------- */
.tkpc2-layout{display:grid;grid-template-columns:1fr 300px;gap:32px;padding:52px 6% 64px;align-items:start}
main{min-width:0}
.tkpc2-stepnum{font-family:var(--tk-mono);font-size:12px;color:var(--tk-blueprint);margin:0 0 6px}
.tkpc2-step h2,.tkpc2-results h2{font-size:28px}
.tkpc2-hint,.summary{color:var(--tk-ink-soft);max-width:60ch}

.tkpc2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.tkpc2-grid.tkpc2-three{grid-template-columns:repeat(3,1fr)}
.tkpc2 .tkpc2-choice,
.tkpc2 .tkpc2-choice strong{
    color:var(--tk-ink) !important;
}
.tkpc2-choice{
    position:relative;min-height:76px;border:1.5px solid var(--tk-line);
    background:var(--tk-paper-raised);border-radius:var(--tk-radius-sm);
    padding:16px 18px;text-align:left;cursor:pointer;
    display:flex;align-items:center;
    transition:border-color .15s ease, background .15s ease;
}
.tkpc2-choice strong{font-size:15px;font-weight:600}
.tkpc2-choice:hover{border-color:var(--tk-line-strong)}
.tkpc2-choice[aria-pressed="true"]{border-color:var(--tk-blueprint);background:#E5EEF2}
.tkpc2 .tkpc2-choice[aria-pressed="true"],
.tkpc2 .tkpc2-choice[aria-pressed="true"] strong{color:var(--tk-blueprint) !important}
.tkpc2-choice[aria-pressed="true"]::before,
.tkpc2-choice[aria-pressed="true"]::after{
    content:"";position:absolute;width:8px;height:8px;border-color:var(--tk-blueprint);top:6px;left:6px;
    border-top:2px solid var(--tk-blueprint);border-left:2px solid var(--tk-blueprint);
}
.tkpc2-choice[aria-pressed="true"]::after{left:auto;right:6px;border-left:0;border-right:2px solid var(--tk-blueprint)}
.tkpc2-choice.tkpc2-limit-disabled{opacity:.45;cursor:not-allowed}

.tkpc2 textarea{width:100%;min-height:150px;border:1.5px solid var(--tk-line);border-radius:var(--tk-radius-sm);padding:14px;font:15px/1.5 var(--tk-sans);margin-top:18px;background:var(--tk-paper-raised);color:var(--tk-ink)}

.tkpc2 .tkpc2-back{margin-top:22px;margin-right:10px;background:none;border:1.5px solid var(--tk-line);color:var(--tk-ink-soft) !important;border-radius:var(--tk-radius-sm);padding:11px 16px;font-weight:600;cursor:pointer}
.tkpc2-primary{margin-top:22px}
.tkpc2 .tkpc2-secondary{padding:11px 18px;background:var(--tk-paper-raised);border:1.5px solid var(--tk-line);border-radius:var(--tk-radius-sm);font-weight:600;cursor:pointer;color:var(--tk-ink) !important}

/* ---------- Aside: ficha de configuración ---------- */
aside{background:var(--tk-blueprint-deep);color:#fff;border-radius:var(--tk-radius-md);padding:22px;position:sticky;top:20px}
aside h3{font-size:14px;font-family:var(--tk-mono);color:#8FB9C9;text-transform:none;margin-bottom:14px}
.tkpc2-summary-row{
    width:100%;display:flex;justify-content:space-between;gap:10px;
    background:none;border:0;border-bottom:1px dashed rgba(255,255,255,.18);
    padding:11px 0;color:inherit;cursor:pointer;text-align:left;font:inherit;
}
.tkpc2-summary-row span{color:#8FA6AC;font-size:13px}
.tkpc2-summary-row b{font-weight:600;text-align:right;font-family:var(--tk-mono);font-size:13px}
.tkpc2-aside-note{margin-top:18px;border:1px solid rgba(255,106,61,.4);padding:14px;border-radius:var(--tk-radius-sm)}
.tkpc2-aside-note strong{color:var(--tk-accent);display:block;margin-bottom:4px;font-size:13px}
.tkpc2-aside-note small{color:#B9CBC8;line-height:1.5}

/* ---------- Loading (single deliberate motion) ---------- */
.tkpc2-loading{text-align:center;padding:70px 0}
.tkpc2-scan{width:100%;max-width:280px;height:6px;background:var(--tk-line);border-radius:99px;margin:0 auto 26px;overflow:hidden;position:relative}
.tkpc2-scan span{position:absolute;top:0;left:-40%;width:40%;height:100%;background:var(--tk-blueprint);animation:tkpc2scan 1.1s ease-in-out infinite}
@keyframes tkpc2scan{0%{left:-40%}50%{left:60%}100%{left:-40%}}

/* ---------- Error ---------- */
.tkpc2-error-panel{text-align:center;padding:60px 20px;border:1.5px dashed #C94D2C;border-radius:var(--tk-radius-md);background:#FFF4F0}
.tkpc2-error-panel h2{color:#A6371C}
.tkpc2-error-msg{color:var(--tk-ink-soft)}

/* ---------- Resultados ---------- */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}
.pcard{border:1.5px solid var(--tk-line);border-radius:var(--tk-radius-md);overflow:hidden;background:var(--tk-paper-raised);position:relative;display:flex;flex-direction:column}
.pcard.tkpc2-best::before{content:"Mejor coincidencia";position:absolute;top:10px;left:10px;background:var(--tk-accent);color:var(--tk-accent-ink);font-size:11px;font-weight:700;padding:5px 9px;border-radius:99px;z-index:1}
.pcard img{width:100%;height:170px;object-fit:contain;background:#F4F7F6}
.pcard-noimg{width:100%;height:170px;display:flex;align-items:center;justify-content:center;background:#F4F7F6;color:var(--tk-line-strong)}
.pcard-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard h3{font-size:16px;line-height:1.3}
.tkpc2-meter{height:6px;background:var(--tk-line);border-radius:99px;overflow:hidden}
.tkpc2-meter i{display:block;height:100%;background:var(--tk-blueprint)}
.tkpc2-meter-label{font-family:var(--tk-mono);font-size:11px;color:var(--tk-ink-soft)}
.pcard .reason{font-size:13px;color:var(--tk-ink-soft);line-height:1.5}
.spec{font-family:var(--tk-mono);font-size:12px;color:var(--tk-ink-soft);line-height:1.7}
.spec div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dotted var(--tk-line)}
.price{font-size:22px;font-weight:700;margin-top:4px}
.pcard a{display:block;background:var(--tk-blueprint);color:#fff;text-align:center;text-decoration:none;padding:11px;border-radius:var(--tk-radius-sm);margin-top:auto;font-weight:600}
.pcard a:hover{background:var(--tk-blueprint-deep)}

.tkpc2-error{padding:20px;background:#fff0f0;color:#a22;border:1px solid #ecc}

@media (prefers-reduced-motion:reduce){
    .tkpc2-scan span{animation:none;left:0;width:100%}
    .tkpc2-choice,.tkpc2-start,.tkpc2-primary{transition:none}
}

@media (max-width:900px){
    .tkpc2-hero{grid-template-columns:1fr;text-align:left}
    .tkpc2-hero-art{display:none}
    .tkpc2-layout{grid-template-columns:1fr}
    aside{position:static}
    .products{grid-template-columns:1fr 1fr}
    .tkpc2-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
    .tkpc2-hero{padding:44px 6%}
    .products,.tkpc2-grid{grid-template-columns:1fr}
    .tkpc2-stepper{gap:6px}
}

/* ---------- Chat flotante ---------- */
.tkpc2-chat-toggle{
    position:fixed;right:22px;bottom:22px;z-index:9998;
    display:flex;align-items:center;gap:10px;
    background:var(--tk-blueprint-deep);color:#fff !important;border:0;
    padding:14px 20px;border-radius:99px;font-weight:700;font-size:14px;cursor:pointer;
    box-shadow:0 10px 24px rgba(8,32,47,.35);
}
.tkpc2-chat-toggle:hover{background:var(--tk-blueprint)}
.tkpc2-chat-toggle-icon{
    width:22px;height:22px;border-radius:50%;background:var(--tk-accent);color:var(--tk-accent-ink) !important;
    display:flex;align-items:center;justify-content:center;font-family:var(--tk-mono);font-weight:700;font-size:13px;
}
.tkpc2-chat-panel{
    position:fixed;right:22px;bottom:22px;z-index:9999;
    width:min(370px,92vw);height:min(560px,80vh);
    background:var(--tk-paper-raised);border-radius:var(--tk-radius-md);
    box-shadow:0 20px 50px rgba(8,32,47,.35);
    display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--tk-line);
}
.tkpc2-chat-header{
    background:var(--tk-blueprint-deep);color:#fff;padding:16px 18px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.tkpc2-chat-header strong{display:block;font-size:15px}
.tkpc2-chat-header small{color:#B9CBC8;font-size:12px}
.tkpc2 .tkpc2-chat-close{background:none;border:0;color:#fff !important;font-size:16px;cursor:pointer;padding:4px 8px}
.tkpc2-chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--tk-paper)}
.tkpc2-chat-msg p{margin:0;font-size:14px;line-height:1.5}
.tkpc2-chat-msg{max-width:88%;padding:10px 13px;border-radius:var(--tk-radius-sm)}
.tkpc2-chat-msg.tkpc2-chat-bot{align-self:flex-start;background:var(--tk-paper-raised);border:1px solid var(--tk-line);color:var(--tk-ink)}
.tkpc2-chat-msg.tkpc2-chat-user{align-self:flex-end;background:var(--tk-blueprint);color:#fff}
.tkpc2-chat-msg.tkpc2-chat-typing p{font-family:var(--tk-mono);font-size:12px;color:var(--tk-ink-soft)}
.tkpc2-chat-products{display:flex;flex-direction:column;gap:8px;margin-top:8px;width:100%}
.tkpc2-chat-card{border:1px solid var(--tk-line);border-radius:var(--tk-radius-sm);padding:10px;background:var(--tk-paper-raised);display:flex;gap:10px;align-items:center}
.tkpc2-chat-card img{width:48px;height:48px;object-fit:contain;background:#F4F7F6;border-radius:4px;flex-shrink:0}
.tkpc2-chat-card-body{flex:1;min-width:0}
.tkpc2-chat-card-body b{display:block;font-size:13px;line-height:1.3}
.tkpc2-chat-card-body span{display:block;font-size:12px;color:var(--tk-ink-soft)}
.tkpc2-chat-card-body a{font-size:12px;font-weight:700;color:var(--tk-blueprint)}
.tkpc2-chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--tk-line);background:var(--tk-paper-raised)}
.tkpc2-chat-form textarea{flex:1;resize:none;max-height:90px;border:1.5px solid var(--tk-line);border-radius:var(--tk-radius-sm);padding:10px 12px;font:14px/1.4 var(--tk-sans);color:var(--tk-ink)}
.tkpc2 .tkpc2-chat-send{background:var(--tk-accent);color:var(--tk-accent-ink) !important;border:0;border-radius:var(--tk-radius-sm);width:42px;font-size:16px;cursor:pointer}

@media (max-width:600px){
    .tkpc2-chat-panel{right:0;bottom:0;width:100vw;height:85vh;border-radius:var(--tk-radius-md) var(--tk-radius-md) 0 0}
    .tkpc2-chat-toggle{right:14px;bottom:14px}
}