/* Portada e índices de módulo. Se carga después de style.css y usa sus tokens. */

.eyebrow{margin:0;font:500 .78rem/1.5 var(--fm);text-transform:uppercase;letter-spacing:.12em;color:var(--gold)}

/* ---------- Cabecera de la portada ---------- */
.lead{position:relative;isolation:isolate;padding:clamp(2.5rem,7vw,5rem) 0 clamp(2rem,5vw,3.5rem)}
.lead h1{margin:.35rem 0 .3rem;font-family:var(--fh);font-stretch:125%;font-weight:800;font-size:clamp(5rem,17vw,10.5rem);line-height:.92;letter-spacing:-.04em}
.lead-by{margin:0;color:var(--mu);font-size:clamp(1.05rem,2vw,1.25rem);text-wrap:balance}
.traces{position:absolute;z-index:-1;top:50%;right:-1.25rem;transform:translateY(-50%);width:min(62%,44rem);height:auto;fill:none;stroke:var(--bd2);stroke-width:1.5;stroke-linejoin:round;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.traces circle{fill:var(--bg);stroke:var(--gold);stroke-width:2}
.traces .sig{stroke:var(--ac);stroke-width:2;stroke-dasharray:46 900;animation:sig 7s linear infinite}
.traces .sig2{animation-delay:-3.2s;animation-duration:9s}
@keyframes sig{from{stroke-dashoffset:946}to{stroke-dashoffset:0}}

/* ---------- Módulos dibujados como circuitos integrados ---------- */
.ics{--g:1.75rem;--stub:2.25rem;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);padding:var(--stub) .5rem 0}
.ics::before{content:"";position:absolute;top:0;height:1.5px;background:var(--bd2);
  left:calc(.5rem + (100% - 1rem - 2*var(--g))/6);right:calc(.5rem + (100% - 1rem - 2*var(--g))/6)}
.ic{position:relative;display:flex;flex-direction:column;min-height:15rem;padding:1.15rem 1.35rem 1.1rem;background:var(--cd);border:1px solid var(--bd2);border-radius:.45rem;color:var(--tx);text-decoration:none;transition:border-color .18s,background .18s,transform .18s}
.ic::before{content:"";position:absolute;inset:1.3rem -8px;pointer-events:none;
  background:
    repeating-linear-gradient(180deg,var(--pin,var(--bd2)) 0 7px,transparent 7px 22px) left top/7px 100% no-repeat,
    repeating-linear-gradient(180deg,var(--pin,var(--bd2)) 0 7px,transparent 7px 22px) right top/7px 100% no-repeat}
.ic::after{content:"";position:absolute;left:50%;bottom:100%;width:11px;margin-left:-5.5px;height:calc(var(--stub) + 5px);
  background:
    radial-gradient(circle at 50% 5.5px,var(--gold) 0 3.5px,transparent 4px),
    linear-gradient(var(--pin,var(--bd2)),var(--pin,var(--bd2))) center/1.5px 100% no-repeat}
.ic:hover,.ic:focus-visible{--pin:var(--ac);border-color:var(--ac);background:var(--cd2);transform:translateY(-3px)}
.ic-ref{display:flex;align-items:center;gap:.5rem;font:500 .74rem/1 var(--fm);color:var(--mu)}
.ic-ref::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--gold)}
.ic h2{margin:1.5rem 0 .25rem;font-family:var(--fh);font-stretch:118%;font-weight:750;font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1;letter-spacing:-.025em}
.ic p{margin:0;color:var(--mu);line-height:1.4;flex:1}
.ic-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem .75rem;margin-top:1.1rem;padding-top:.7rem;border-top:1px dashed var(--bd);font:500 .76rem/1.5 var(--fm);color:var(--mu)}
.ic-go{color:var(--ac);white-space:nowrap}
.ic-go i{display:inline-block;font-style:normal;transition:transform .18s}
.ic:hover .ic-go i{transform:translateX(3px)}

/* ---------- Índice de módulo ---------- */
.lead-mod{padding:clamp(2rem,5vw,3.25rem) 0 1.75rem}
.lead-mod h1{font-size:clamp(3.25rem,10vw,6rem);letter-spacing:-.035em}
.rows{border-top:1px solid var(--bd2)}
.row{position:relative;display:flex;align-items:center;gap:1.15rem;padding:1rem .75rem 1rem .35rem;border-bottom:1px solid var(--bd);color:var(--tx);text-decoration:none;transition:background .15s}
.row::before{content:"";position:absolute;left:calc(.35rem + 1.15rem - .75px);top:0;bottom:0;width:1.5px;background:var(--bd2)}
.row:first-child::before{top:50%}
.row:last-child::before{bottom:50%}
.row:only-child::before{display:none}
.pad{position:relative;flex:none;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--bg);border:2px solid var(--gold);color:var(--gold);font:600 .8rem/calc(2.3rem - 4px) var(--fm);text-align:center;transition:background .15s,color .15s,border-color .15s}
.row-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.row-t b{font:650 clamp(1.02rem,2vw,1.18rem)/1.3 var(--fh);font-stretch:104%;letter-spacing:-.005em;transition:color .15s}
.row-t code{font-size:.76rem;color:var(--mu);overflow-wrap:anywhere}
.arr{flex:none;color:var(--mu);font-size:1.15rem;transition:color .15s,transform .15s}
.row:hover,.row:focus-visible{background:color-mix(in srgb,var(--cd2) 80%,transparent)}
.row:hover .pad,.row:focus-visible .pad{background:var(--ac);border-color:var(--ac);color:var(--on)}
.row:hover .row-t b,.row:focus-visible .row-t b{color:var(--ac)}
.row:hover .arr,.row:focus-visible .arr{color:var(--ac);transform:translateX(4px)}

@media(max-width:820px){
  .ics{grid-template-columns:minmax(0,1fr);padding-top:0;gap:1rem}
  .ics::before,.ic::after{display:none}
  .ic{min-height:0}
  .ic h2{margin-top:1rem}
  .traces{width:70%}
}
@media(max-width:620px){.traces{display:none}}