/* esparr.xyz — estilos comunes */
:root {
  --black: #000000; --graphite: #1d1d1f; --panel: #0d0d0f; --rule: rgba(255,255,255,.1);
  --mist: #86868b; --soft: #d2d2d7; --paper: #f5f5f7; --ice: #7fd3ff;
  --ok: #5fd39a; --warn: #f5c451; --err: #ff6b6b;
  --display: 'Inter Tight', -apple-system, system-ui, sans-serif;
  --text: 'Inter', -apple-system, system-ui, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--black); color: var(--paper); font-family: var(--text); -webkit-font-smoothing: antialiased; }
a { color: var(--ice); text-underline-offset: 3px; }
::selection { background: rgba(127,211,255,.3); }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--paper); color: #000; padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* Cabecera */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; padding-top: env(safe-area-inset-top, 0px);
  background: rgba(0,0,0,.72); backdrop-filter: saturate(1.4) blur(20px); -webkit-backdrop-filter: saturate(1.4) blur(20px); border-bottom: 1px solid rgba(255,255,255,.06); }
.site-header .in { max-width: 1200px; margin: 0 auto; height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; }
.brand { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; color: var(--paper); text-decoration: none; font-size: 15px; }
.site-nav { display: flex; gap: 22px; font-size: 14px; }
.site-nav a { color: var(--mist); text-decoration: none; transition: color .2s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--paper); }
@media (max-width: 520px) { .site-nav { gap: 14px; font-size: 13px; } .site-header .in { padding: 0 16px; } .nav-about { display: none; } }

/* Páginas de texto */
.page { max-width: 740px; margin: 0 auto; padding: calc(52px + env(safe-area-inset-top, 0px) + 72px) 24px 96px; }
.crumbs { font-size: 13px; color: var(--mist); margin-bottom: 20px; }
.crumbs a { color: var(--mist); text-decoration: none; } .crumbs a:hover { color: var(--paper); }
.page h1 { font-family: var(--display); font-weight: 600; font-size: clamp(2.2rem, 5.4vw, 3.6rem); line-height: 1.02; letter-spacing: -0.035em; margin: 0; }
.lede { font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.55; color: var(--mist); margin: 20px 0 0; max-width: 60ch; }
.meta { margin-top: 20px; font-size: 13px; color: var(--mist); }
.prose { margin-top: 48px; font-size: 1.075rem; line-height: 1.75; color: var(--soft); }
.prose h2 { font-family: var(--display); font-weight: 600; color: var(--paper); font-size: clamp(1.5rem, 2.8vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.15; margin: 56px 0 14px; }
.prose h3 { font-family: var(--display); font-weight: 600; color: var(--paper); font-size: 1.2rem; margin: 32px 0 8px; }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 1.2em; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--paper); font-weight: 500; }
.table-wrap { overflow-x: auto; margin: 8px 0 24px; border: 1px solid var(--rule); border-radius: 12px; }
.prose table { border-collapse: collapse; width: 100%; font-size: .95rem; min-width: 520px; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { color: var(--paper); font-weight: 500; background: var(--panel); }
.prose tr:last-child td { border-bottom: 0; }
.callout { border-left: 2px solid var(--ice); padding: 4px 0 4px 18px; margin: 24px 0; color: var(--paper); }
.cta-inline { display: inline-block; margin-top: 8px; padding: 12px 22px; border-radius: 999px; background: var(--paper); color: #000; text-decoration: none; font-weight: 600; font-size: 14px; }
.cta-inline:hover { background: #fff; }
.guide-list { list-style: none; padding: 0; margin: 40px 0 0; border-top: 1px solid var(--rule); }
.guide-list li { border-bottom: 1px solid var(--rule); }
.guide-list a { display: block; padding: 24px 0; text-decoration: none; color: var(--paper); }
.guide-list .t { font-family: var(--display); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.015em; }
.guide-list .d { display: block; margin-top: 6px; color: var(--mist); line-height: 1.5; }
.guide-list a:hover .t { color: var(--ice); }
.related { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--rule); }
.related h2 { margin-top: 0; }

/* Pie */
.site-footer { border-top: 1px solid var(--rule); padding: 48px 24px calc(48px + env(safe-area-inset-bottom, 0px)); font-size: 14px; color: var(--mist); }
.site-footer .in { max-width: 1200px; margin: 0 auto; display: grid; gap: 28px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.foot-links a { color: var(--mist); text-decoration: none; } .foot-links a:hover { color: var(--paper); }
.foot-note { max-width: 70ch; line-height: 1.6; margin: 0; }

/* Configurador */
.builder-wrap { max-width: 1200px; margin: 0 auto; padding: calc(52px + env(safe-area-inset-top, 0px) + 56px) 24px 48px; }
.builder-head h1 { font-family: var(--display); font-weight: 600; font-size: clamp(2.2rem, 5.4vw, 3.6rem); letter-spacing: -0.035em; line-height: 1.02; margin: 0; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.presets-label { width: 100%; font-size: 13px; color: var(--mist); margin-bottom: 2px; }
.chip { border: 1px solid var(--rule); background: transparent; color: var(--paper); border-radius: 999px; padding: 9px 16px; font: 500 14px/1 var(--text); cursor: pointer; transition: border-color .2s, background .2s; }
.chip:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.04); }
#builder { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; margin-top: 36px; align-items: start; }
@media (max-width: 960px) { #builder { grid-template-columns: 1fr; } }
.slots { border-top: 1px solid var(--rule); }
.slot { border-bottom: 1px solid var(--rule); }
.slot-head { width: 100%; display: grid; grid-template-columns: 10px minmax(120px, 200px) 1fr 20px; align-items: center; gap: 16px; padding: 20px 4px; background: none; border: 0; color: var(--paper); font: inherit; text-align: left; cursor: pointer; }
.slot-label { font-size: 14px; color: var(--mist); }
.slot-value { font-weight: 500; }
.slot.open .slot-label { color: var(--paper); }
.chev { color: var(--mist); font-size: 20px; text-align: right; }
@media (max-width: 600px) { .slot-head { grid-template-columns: 10px 1fr 20px; row-gap: 4px; } .slot-label { grid-column: 2; } .slot-value { grid-column: 2; } .chev { grid-row: 1; grid-column: 3; } }
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.dot-ok { background: var(--ok); } .dot-warn { background: var(--warn); } .dot-error { background: var(--err); } .dot-optional { background: transparent; border: 1px solid rgba(255,255,255,.25); }
.panel { padding: 0 0 20px; display: grid; gap: 8px; }
.opt { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); }
.opt.chosen { border-color: rgba(127,211,255,.55); }
.opt.blocked .opt-name, .opt.blocked .opt-spec { color: var(--mist); }
.opt-name { font-weight: 500; }
.opt-spec { margin-top: 4px; font-size: 13px; color: var(--mist); line-height: 1.45; }
.opt-why { margin-top: 6px; font-size: 13px; color: var(--err); line-height: 1.45; }
.opt-act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.btn-pick { border: 0; border-radius: 999px; background: var(--paper); color: #000; padding: 8px 16px; font: 600 13px/1 var(--text); cursor: pointer; }
.btn-pick[aria-pressed="true"] { background: var(--ice); }
.opt.blocked .btn-pick { background: rgba(255,255,255,.12); color: var(--paper); }
.amz { font-size: 12px; color: var(--mist); }
.amz:hover { color: var(--paper); }
@media (max-width: 600px) { .opt { flex-direction: column; align-items: stretch; } .opt-act { flex-direction: row; align-items: center; justify-content: space-between; } }
.summary { position: sticky; top: calc(52px + env(safe-area-inset-top, 0px) + 20px); border: 1px solid var(--rule); border-radius: 18px; padding: 24px; background: var(--panel); }
@media (max-width: 960px) { .summary { position: static; } }
.status { font-family: var(--display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.st-ok { color: var(--ok); } .st-warn { color: var(--warn); } .st-error { color: var(--err); } .st-empty { color: var(--paper); }
.power { margin-top: 20px; }
.power-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--mist); }
.power-row strong { color: var(--paper); font-weight: 500; font-variant-numeric: tabular-nums; }
.meter { margin-top: 10px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--ice); transition: width .5s cubic-bezier(.22,1,.36,1); }
.meter span.hot { background: var(--warn); }
.power-note { margin-top: 8px; font-size: 13px; color: var(--mist); }
.sum-h { font-family: var(--display); font-size: 1rem; font-weight: 600; margin: 28px 0 10px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--soft); }
.ck { padding-left: 18px; position: relative; }
.ck::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; }
.ck-ok::before { background: var(--ok); } .ck-warn::before { background: var(--warn); } .ck-error::before { background: var(--err); } .ck-info::before { background: var(--ice); }
.ck-error { color: var(--paper); }
.buy { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.buy li { display: grid; gap: 2px; font-size: 14px; }
.buy-cat { font-size: 12px; color: var(--mist); }
.buy a { font-size: 13px; }
.fine { font-size: 12px; color: var(--mist); line-height: 1.5; margin: 14px 0 0; }
.sum-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.btn-sec { border: 1px solid var(--rule); background: transparent; color: var(--paper); border-radius: 999px; padding: 9px 14px; font: 500 13px/1 var(--text); cursor: pointer; }
.btn-sec:hover { border-color: rgba(255,255,255,.35); }
.btn-ghost { border: 0; background: none; color: var(--mist); padding: 9px 6px; font: 500 13px/1 var(--text); cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.builder-info { max-width: 740px; margin: 0 auto; padding: 24px 24px 96px; }
.builder-info .prose { margin-top: 0; }
.panel-tools { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 4px; }
.panel-search { flex: 1 1 240px; min-width: 0; background: var(--panel); border: 1px solid var(--rule); border-radius: 999px; color: var(--paper); padding: 10px 16px; font: 400 14px/1.2 var(--text); }
.panel-search::placeholder { color: var(--mist); }
.panel-search:focus { outline: none; border-color: rgba(127,211,255,.6); }
.panel-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mist); cursor: pointer; }
.panel-toggle input { accent-color: #7fd3ff; }
.panel-empty { font-size: 14px; color: var(--mist); margin: 8px 4px; }
[hidden] { display: none !important; }
.opt-group { margin: 14px 4px 2px; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--mist); }
.opt-group:first-of-type { margin-top: 6px; }
.autobuild { margin-top: 18px; padding: 16px; border-radius: 14px; background: rgba(127,211,255,.06); border: 1px solid rgba(127,211,255,.22); }
.btn-build { width: 100%; border: 0; border-radius: 999px; background: var(--ice); color: #000; padding: 13px 18px; font: 600 15px/1 var(--text); cursor: pointer; transition: transform .25s cubic-bezier(.22,1,.36,1), background .2s; }
.btn-build:hover { transform: scale(1.015); background: #a3e0ff; }
.autobuild-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--soft); }
.autobuild-top { display: none; margin: 0 0 16px; }
@media (max-width: 960px) { .autobuild-top { display: block; } .summary .autobuild { display: none; } }
.glossary { margin: 0; }
.glossary dt { font-family: var(--display); font-weight: 600; color: var(--paper); font-size: 1.1rem; margin-top: 26px; }
.glossary dd { margin: 6px 0 0; }
.prose code { font-size: .92em; color: var(--paper); background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 6px; }
.cart-box { margin-top: 16px; }
.btn-cart { display: block; text-align: center; border-radius: 999px; background: #ff9f1c; color: #111; padding: 13px 18px; font: 600 14px/1.2 var(--text); text-decoration: none; transition: transform .25s cubic-bezier(.22,1,.36,1), background .2s; }
.btn-cart:hover { transform: scale(1.015); background: #ffb347; }
.xlink a { color: var(--soft); }
.skip-cta { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 25; border-radius: 999px; background: rgba(245,245,247,.92); color: #000; padding: 12px 20px; font: 600 14px/1 var(--text); text-decoration: none; box-shadow: 0 8px 30px rgba(0,0,0,.5); transition: opacity .4s, transform .25s cubic-bezier(.22,1,.36,1); }
.skip-cta:hover { transform: scale(1.03); }
.skip-cta.hide { opacity: 0; pointer-events: none; }
.sources { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: .95rem; color: var(--mist); }
.sources h2 { font-size: 1.15rem !important; margin-top: 0 !important; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.status-row .status { flex: 1 1 auto; min-width: 0; }
.btn-build-head { width: 100%; flex: 1 1 100%; padding: 12px 16px; font-size: 15px; }
.summary .autobuild-note { margin-top: 12px; }
@media (max-width: 960px) { .status-row.has-build .btn-build-head { width: 100%; } }