/* Micro-nodos (prototipo 23-10-2026): sólo lo que no existe en style.css. Mismas variables, misma
   gramática: ámbar = energía, verde = cómputo, tinta = la máquina. Sin tarjetas. */

/* portada de la sección */
.hero-nodos .lanes{grid-template-columns:1.05fr .95fr}
.tiles-nodos .tile{position:relative; padding-top:1.15rem; gap:.25rem; min-height:6.2rem}
.tiles-nodos .tile small{font:400 .86rem/1.3 var(--sans); opacity:.85}
.tile-id{font:700 .78rem var(--sans); letter-spacing:.14em; opacity:.85}
/* en el móvil la tesela de la portada es una rejilla «icono | texto»; estas no llevan icono: una sola columna,
   y el SG, el nombre y el dónde en tres filas (24-10-2026) */
@media (max-width:52rem){ .tiles-nodos .tile{grid-template-columns:minmax(0,1fr); row-gap:.1rem; padding:.9rem 1.1rem 1rem} .tiles-nodos .tile small{grid-column:1} }
.nodos-hero-art{margin:0} .nodos-hero-art svg{width:100%; max-width:36rem; display:block; margin-inline:auto; overflow:visible}
.nodos-hero-art figcaption{margin-top:.9rem; font-size:.92rem; color:var(--mute); font-style:italic; max-width:40em}
.serie-next{stroke:var(--line-2)} .serie-next-c{stroke:var(--green-lt)} .t-lbl.next{fill:var(--line-2)}

/* lo que sólo existe en una anchura: la tabla comparativa y las pistas de ratón en pantallas anchas; las fichas
   apiladas y el aviso de desplazar el esquema, en el móvil */
.only-narrow{display:none}
@media (max-width:40rem){ .only-wide{display:none!important} .only-narrow{display:block} }

/* comparativa */
.cmp-wrap{overflow-x:auto; margin:clamp(1.6rem,3vw,2.4rem) 0 1rem}
.cmp-cards{list-style:none; margin:clamp(1.6rem,3vw,2.4rem) 0 1rem; padding:0; display:grid; gap:1rem}
.cmp-card{padding:1rem 1.1rem 1.15rem; background:var(--paper); border:1px solid var(--line); border-radius:8px}
.cmp-card .cmp-h{padding-bottom:.7rem; margin-bottom:.3rem; border-bottom:1px solid var(--line); display:flex}
.cmp-card dl{margin:0}
.cmp-card dl div{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.5rem 0 0; flex-wrap:wrap}
.cmp-card dt{font:600 .74rem/1.35 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); flex:0 0 auto}
.cmp-card dd{margin:0; text-align:right; font-size:.95rem; color:var(--body); flex:1 1 auto; min-width:0}
.cmp-card dd b{font:700 1.2rem/1.1 var(--serif); color:var(--ink)}
table.cmp{width:100%; min-width:36rem; border-collapse:collapse; font-size:.98rem}   /* en móvil se desplaza, no se aplasta */
table.cmp th,table.cmp td{padding:.7rem .8rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
table.cmp thead th{border-bottom:2px solid var(--line-2); padding-bottom:.9rem}
table.cmp tbody th{font:600 .8rem/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); width:11rem; white-space:nowrap}
table.cmp td.num{font-variant-numeric:tabular-nums}
table.cmp td b{font:700 1.25rem/1.1 var(--serif); color:var(--ink); letter-spacing:-.01em}
table.cmp td i{color:var(--mute)}
.cmp-id{display:inline-block; font:700 .78rem/1 var(--sans); letter-spacing:.12em; color:#fff; padding:.35rem .55rem; border-radius:4px; margin-right:.5rem; vertical-align:middle}
.cmp-id.solar{background:var(--solar)} .cmp-id.green{background:var(--green)} .cmp-id.ink{background:var(--ink)}
.cmp-nm{font:700 1.15rem var(--serif); color:var(--ink); vertical-align:middle}
@media (max-width:52rem){
  table.cmp{font-size:.9rem} table.cmp tbody th{width:7rem; white-space:normal; font-size:.72rem}
  table.cmp th,table.cmp td{padding:.55rem .5rem} table.cmp td b{font-size:1.1rem}
}

/* cada nodo */
.nodo .kicker .cmp-id{margin-right:.2rem}
.specs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem 1.6rem; margin:1.4rem 0 0; padding-top:1.2rem; border-top:1px solid var(--line-2)}
.specs div{min-width:0}
.specs dt{font:600 .74rem/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--mute)}
.specs dd{margin:.15rem 0 0; color:var(--body); font-size:.98rem; line-height:1.4}
.specs dd b{font:700 1.3rem/1.1 var(--serif); color:var(--ink); letter-spacing:-.01em}
.specs dd small{display:block; font-size:.84rem; color:var(--mute); margin-top:.1rem}
.esquema{margin:0} .esquema svg{width:100%; display:block}
.esq-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
.esq-hint{margin:.5rem 0 0; font-size:.82rem; color:var(--mute); text-align:right}
/* En el móvil el esquema a 350 px era ilegible: se desplaza a 34 rem, con el texto al doble (24-10-2026). */
@media (max-width:40rem){ .esq-wrap svg.esq{min-width:34rem} .esq-wrap{margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad)} }
.esquema figcaption{margin-top:1rem; font-size:.92rem; color:var(--mute); font-style:italic; max-width:40em}

/* el esquemático: la misma gramática de trazos que la portada */
.esq .box{fill:var(--paper); stroke:var(--ink); stroke-width:2.4}
.alt .esq .box{fill:var(--paper-2)}
.esq .pcb{fill:none; stroke:var(--line-2); stroke-width:1.8; stroke-dasharray:3 3}
.esq .cpu{fill:var(--ink)} .esq .ram{fill:var(--green)} .esq .nvme{fill:none; stroke:var(--ink); stroke-width:1.6}
.esq .gpu{fill:var(--ink)} .esq .turb{fill:none; stroke:var(--green); stroke-width:2}
.esq .psu{fill:none; stroke:var(--ink); stroke-width:2}
.esq .fan{fill:none; stroke:var(--mute); stroke-width:1.6}
.esq .air{stroke:var(--line-2)}
.esq .t-on{font:600 13px var(--sans); fill:var(--paper)} .esq .t-xs.on{fill:#B7AB98}
.esq .t-xs.g2{fill:var(--solar); font-weight:600}
.esq .call circle{fill:var(--paper); stroke:var(--ink); stroke-width:1.8}
.esq .call text{font:700 12px var(--sans); fill:var(--ink)}
.esq .t-num.sm{font-size:24px}

/* interacción (nodos.js): pieza ↔ lista, montaje paso a paso y flujos animados */
.esq .part{cursor:pointer; transition:opacity .35s ease, filter .2s ease; outline:none}
.esq .part.is-on,.esq .part:hover,.esq .part:focus-visible{filter:drop-shadow(0 0 2.5px var(--solar)) drop-shadow(0 0 7px rgba(217,116,26,.55))}
.esq .part.is-on .call circle,.esq .part:hover .call circle{fill:var(--solar); stroke:var(--solar)}
.esq .part.is-on .call text,.esq .part:hover .call text{fill:#fff}
.esquema[data-mode="montaje"] .part.is-later{opacity:.12; filter:none; pointer-events:none}
.esquema[data-mode="montaje"] .part.is-now{filter:drop-shadow(0 0 2.5px var(--green)) drop-shadow(0 0 7px rgba(27,107,79,.5))}
.esquema[data-mode="montaje"] .part.is-now .call circle{fill:var(--green); stroke:var(--green)} .esquema[data-mode="montaje"] .part.is-now .call text{fill:#fff}
.esquema[data-mode="flujos"] .flow-e{stroke-dasharray:7 7; animation:flow-e 1.1s linear infinite}
.esquema[data-mode="flujos"] .flow-c{stroke-dasharray:7 7; animation:flow-c 1.1s linear infinite}
.esquema[data-mode="flujos"] .part{filter:none} .esquema[data-mode="flujos"] .part:not([data-part="6"]):not([data-part="7"]):not([data-part="4"]){opacity:.55}
@keyframes flow-e{to{stroke-dashoffset:-28}} @keyframes flow-c{to{stroke-dashoffset:-28}}
@media (prefers-reduced-motion:reduce){.esquema[data-mode="flujos"] .flow-e,.esquema[data-mode="flujos"] .flow-c{animation:none}}
.explore{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.9rem 0 0; padding-top:.9rem; border-top:1px solid var(--line)}
.explore .lbl{margin-right:.3rem}
.explore button{font:600 .86rem var(--sans); letter-spacing:.04em; color:var(--mute); background:none; border:1.5px solid var(--line-2); border-radius:100px; padding:.45rem .9rem; min-height:2.2rem; cursor:pointer; transition:color .15s,border-color .15s,background .15s}
.explore button:hover{color:var(--ink); border-color:var(--ink)}
.explore button[aria-pressed="true"]{color:#fff; background:var(--ink); border-color:var(--ink)}
.stepper{display:none; align-items:center; gap:.6rem; margin:.8rem 0 0; font-size:.95rem; color:var(--body)}
.esquema[data-mode="montaje"]+.stepper,.stepper.is-open{display:flex}
.stepper button{width:2.2rem; height:2.2rem; border-radius:50%; border:1.5px solid var(--line-2); background:var(--paper); color:var(--ink); font:700 1rem var(--sans); cursor:pointer}
.stepper button:hover{border-color:var(--ink)} .stepper button[disabled]{opacity:.35; cursor:default}
.stepper .st-k{font:700 .8rem var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--green); white-space:nowrap}
.stepper .st-t{min-width:0}
.flows-key{display:none; gap:1.2rem; margin:.8rem 0 0; font-size:.9rem; color:var(--mute)}
.flows-key.is-open{display:flex}
.flows-key i{display:inline-block; width:1.4rem; height:3px; vertical-align:middle; margin-right:.4rem; border-radius:2px}
.flows-key .ke{background:var(--solar)} .flows-key .kc{background:var(--green)}

/* piezas (compactas, dentro del bloque visual), pasos y lecciones */
.legend{margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--line)}
.legend-h{margin:0 0 .55rem}
.bom{list-style:none; margin:0; padding:0; display:grid; gap:.25rem .9rem}
.bom-mini{grid-template-columns:repeat(2,minmax(0,1fr))}
.bom li{display:grid; grid-template-columns:1.35rem 1fr; gap:.5rem; align-items:start; padding:.3rem .45rem; margin:0 -.45rem; border-radius:5px; cursor:pointer; transition:background .15s,opacity .3s}
.bom li:hover,.bom li:focus-visible,.bom li.is-on,.specs div[data-part]:hover,.specs div.is-on{background:var(--solar-lt)}
#sg2 .bom li:hover,#sg2 .bom li:focus-visible,#sg2 .bom li.is-on,#sg2 .specs div[data-part]:hover,#sg2 .specs div.is-on{background:var(--green-lt)}
#sg3 .bom li:hover,#sg3 .bom li:focus-visible,#sg3 .bom li.is-on,#sg3 .specs div[data-part]:hover,#sg3 .specs div.is-on{background:var(--line)}
.bom li.is-later{opacity:.35}
.bom b{display:block; font:600 .86rem/1.3 var(--sans); color:var(--ink)}
.bom div span{display:block; font-size:.8rem; color:var(--body); line-height:1.4}
.bom i.call-n{width:1.35rem; height:1.35rem; border-radius:50%; display:grid; place-items:center; font:700 .72rem/1 var(--sans); font-style:normal; color:#fff; margin-top:.1rem}
.call-n.solar{background:var(--solar)} .call-n.green{background:var(--green)} .call-n.ink{background:var(--ink)}
.specs div[data-part]{cursor:pointer; border-radius:5px; padding:.25rem .45rem; margin:-.25rem -.45rem; transition:background .15s}
.build{margin-top:clamp(2.4rem,5vw,3.6rem); padding-top:1.4rem; border-top:2px solid var(--line-2)}
.build h3{margin:0 0 .5rem}
.build-p{font-size:.92rem; color:var(--mute); margin:0 0 1rem}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem clamp(1.5rem,4vw,3rem); color:var(--body); font-size:.98rem}
.steps li{display:grid; grid-template-columns:1.7rem 1fr; gap:.7rem; align-items:start; padding:.45rem .6rem; margin:0 -.6rem; border-radius:6px; cursor:pointer; transition:background .15s,color .15s}
.steps li:hover,.steps li:focus-visible{background:var(--paper-2)} .alt .steps li:hover,.alt .steps li:focus-visible{background:var(--paper)}
.steps li.is-now{background:var(--green-lt)} .steps li.is-later{color:var(--mute)}
.steps .st-n{width:1.7rem; height:1.7rem; border-radius:50%; border:2px solid var(--line-2); display:grid; place-items:center; font:700 .85rem var(--serif); color:var(--ink); background:var(--paper)}
.steps li.is-now .st-n{border-color:var(--green); background:var(--green); color:#fff}
.steps li.is-done .st-n{border-color:var(--green); color:var(--green)}
/* la comparativa: una columna se sigue con el ratón y la cabecera lleva al nodo */
table.cmp td.col-on,table.cmp th.col-on{background:var(--paper)} .alt table.cmp td.col-on,.alt table.cmp th.col-on{background:#FFFDF8}
.cmp-h{text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; color:var(--ink)} .cmp-h:hover .cmp-nm{color:var(--solar)}
@media (max-width:60rem){
  .hero-nodos .lanes{grid-template-columns:minmax(0,1fr)}
  .nodo .lanes .vis{order:1}            /* en móvil, primero el texto del nodo; el esquema debajo */
  .steps{grid-template-columns:minmax(0,1fr)}
  .specs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:40rem){ .bom-mini{grid-template-columns:minmax(0,1fr)} }
@media (max-width:34rem){ .specs{grid-template-columns:minmax(0,1fr)} }