/* Kit de las guías con índice lateral (Networking y Videojuegos): portada de la guía, índice, partes,
   secciones, widgets, glosario y adaptación al celular. Se carga después de /css/base.css. */
/* Portada */
.hero { max-width: 1240px; margin: 0 auto; padding-block: clamp(8px, 2vw, 24px) clamp(32px, 5vw, 64px); display: grid; gap: clamp(24px, 4vw, 40px); }
.hero-text { display: grid; gap: 22px; min-width: 0; justify-items: center; text-align: center; }
:root[data-theme="dark"] .hero h1 { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero h1 { color: var(--ink); }
}
.hero h1 { color: #000; grid-column: 1 / -1; text-align: center; font-size: var(--step-4); font-variation-settings: "wdth" 125; font-weight: 800; line-height: .94; letter-spacing: -.012em; }
.hero .lead { font-size: var(--step-1); line-height: 1.5; max-width: var(--common-intro-width); margin: 0; }
/* Diseño principal */
/* Diseño principal. El índice (la tira del celular o la columna del escritorio) es /css/toc.css.
   Desde 1100 px es igual al de Criptografía: el índice a 32 px del borde (o del centro de una caja de 1440 px), 15 rem de ancho y el texto de 52 rem. */
.layout { --toc-inset: env(safe-area-inset-top, 0px); padding-block-end: var(--common-page-end); }
@media (min-width: 1100px) {
  .layout { --edge: max(calc(32px - var(--pad)), calc((100% - 1376px) / 2)); margin-inline: var(--edge); display: grid; grid-template-columns: 15rem minmax(0, 52rem); gap: clamp(40px, 4vw, 64px); }
}
@media (max-width: 1099px) {
  :root:has(.sidebar) { scroll-padding-top: calc(var(--bar-height) + var(--strip-height)); }
}
main { min-width: 0; max-width: 52rem; }
.part { --strand: var(--f-slate); }
.part + .part { margin-top: clamp(56px, 8vw, 96px); }
.part-head { border-top: 3px solid var(--strand); padding-top: 18px; margin-bottom: 8px; display: grid; gap: 6px; }
.part-head h2 { font-size: var(--step-3); font-variation-settings: "wdth" 118; font-weight: 760; line-height: 1.05; }
.part-head p { margin: 4px 0 0; color: var(--muted); max-width: 38rem; }
.sec { padding-top: clamp(36px, 5vw, 56px); display: grid; gap: 18px; scroll-margin-top: 16px; }
.sec > * { margin: 0; min-width: 0; }
.sec h3 { font-size: var(--step-2); font-variation-settings: "wdth" 108; font-weight: 720; line-height: 1.15; }
.sec h4 { font-size: 1.12rem; font-variation-settings: "wdth" 100; font-weight: 700; margin-top: 10px; }
/* El recuadro de la introducción cuelga directo de un h2, así que su título es un h3 con el aspecto de los h4 */
.idea { font-size: var(--step-1); line-height: 1.5; }
.src { display: flex; align-items: center; gap: .55rem; font-size: .92rem; color: var(--muted); flex-wrap: wrap; }
.src svg { width: 18px; height: 18px; color: var(--strand); flex: none; }
.src a { color: var(--ink); font-weight: 700; }
ul.list, ol.list { margin: 0; padding-left: 1.3rem; display: grid; gap: .5rem; }
ul.list ul { margin: .45rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
ul.list li::marker { color: var(--strand); }
ol.list li::marker { color: var(--strand); font-weight: 700; font-family: var(--font-display); }
.note { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; background: var(--tint); border-radius: 10px; padding: 14px 16px; font-size: .98rem; }
.note svg { width: 22px; height: 22px; color: var(--strand); margin-top: 2px; }
.note p { margin: 0; }
.note ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .94rem; line-height: 1.45; }
th, td { padding: .62rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
tr:last-child td { border-bottom: 0; }
th { font-family: var(--font-display); font-variation-settings: "wdth" 100; font-weight: 650; font-size: .86rem; color: var(--muted); background: var(--tint); }
/* Widget: espectro */
.widget { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: clamp(14px, 2.5vw, 22px); display: grid; gap: 16px; }
.widget > * { min-width: 0; }
.widget-title { font-family: var(--font-display); font-variation-settings: "wdth" 108; font-weight: 700; font-size: 1.05rem; margin: 0; }
.widget-help { margin: -10px 0 0; color: var(--muted); font-size: .9rem; }
.range { width: 100%; accent-color: var(--f-orange); }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: .84rem; border: 1px solid var(--rule); background: var(--sea); color: var(--ink); padding: .3rem .7rem; border-radius: 999px; cursor: pointer; }
.chip:hover { border-color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--strand); border-color: var(--strand); color: var(--on-strand); }
.sp-name { font-family: var(--font-display); font-variation-settings: "wdth" 115; font-weight: 750; font-size: 1.5rem; line-height: 1.1; margin: 0 0 6px; }
/* Widget: capas */
.enc-status { color: var(--muted); font-size: .92rem; margin: 0; }
/* Widget: viaje */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: st; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; transition: background-color .3s, border-color .3s; }
.steps li::before { content: counter(st); font-family: var(--font-display); font-weight: 750; font-size: 1.05rem; color: var(--strand); }
.steps li.on { background: var(--tint); border-color: var(--strand); }
.steps li p { margin: 0; }
.journey-ctl { display: flex; gap: 8px; flex-wrap: wrap; }
/* Para consultar: cuestionario, glosario, aclaraciones y fuentes, cada uno en un desplegable */
.reference { padding-top: clamp(36px, 5vw, 56px); scroll-margin-top: 16px; }
.reference > * { margin: 0; min-width: 0; }
.reference > h2 { font-variation-settings: "wdth" 118; font-weight: 760; line-height: 1.05; margin-bottom: 8px; }
.drawer > summary { font-family: var(--font-display); }
.drawer > summary::after { font-family: var(--font-body); }
.clarifications, .sources { display: grid; gap: 10px; padding-left: 1.2rem; }