/* ═══════════════════════════════════════════════════════════════════════════
   MEJ · Manual inmersivo v1.0 — Base compartida (impresión e inmersivo)
   Identidad «Toga y Balanza» (kit de marca v1.0): tokens canónicos del color/
   tokens-color.json + componentes en unidades em. Cada salida fija el
   font-size de su contenedor (.page / .lamina) y todo escala.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --azul-toga: #2E4885;
  --azul-toga-profundo: #1F3366;
  --azul-nocturno: #101D3A;
  --azul-nocturno-hondo: #0A142B;
  --azul-tutelas: #1F4E78;
  --naranja-desacatos: #C55A11;
  --morado-habeas: #6B3FA0;
  --verde-detalle: #2E7D5B;
  --dorado-balanza: #C9A227;
  --dorado-luz: #E5C55B;
  --crema-papel: #F4F2EC;
  --blanco: #FFFFFF;
  --tinta-mej: #2B3F5C;
  --gris-mej: #E2E5E9;
  --gris-papel: #F2F2F2;
  --pizarra: #55606E;
  --alerta: #B42318;
  --alerta-pale: #FDECEA;
  --f-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --radio: .6em;
  --radio-lamina: 22px;
  --sombra-lamina: 0 2.4rem 5rem rgba(10, 20, 43, .5);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; font-family: var(--f-sans); color: var(--tinta-mej); -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }

/* ── Tipografía ─────────────────────────────────────────────────────────── */
.ff-serif { font-family: var(--f-serif); }
.ff-sans { font-family: var(--f-sans); }
.ff-mono, .mono { font-family: var(--f-mono); }
.mono { font-size: .92em; letter-spacing: -.01em; }

.eyebrow {
  font-family: var(--f-mono); font-size: .68em; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--verde-detalle); margin: 0 0 .5em;
}
h2, h3 { font-family: var(--f-serif); font-weight: 600; letter-spacing: -.01em; color: var(--azul-toga-profundo); margin: 0 0 .45em; line-height: 1.12; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.26em; }
p { margin: 0 0 .7em; line-height: 1.55; }
p.lead { font-size: 1.12em; line-height: 1.5; color: var(--tinta-mej); }
p.small, .small { font-size: .84em; }
.muted { color: var(--pizarra); }
strong { font-weight: 700; }
em { font-style: italic; }
code, kbd { font-family: var(--f-mono); }
kbd { font-size: .8em; padding: .05em .4em; border: 1px solid currentColor; border-radius: .3em; opacity: .8; }
hr.sep { border: 0; border-top: 1px solid var(--gris-mej); margin: 1em 0; }

/* ── Retículas ──────────────────────────────────────────────────────────── */
.cols { display: grid; grid-template-columns: var(--cols, 1fr 1fr); gap: 1.6em; align-items: start; }
.col > :last-child { margin-bottom: 0; }
.grid { display: grid; gap: .9em; margin: .4em 0 .9em; }
.grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.celda { min-width: 0; }

/* ── Tarjetas y tarjetas de módulo (color semántico) ────────────────────── */
.tarjeta {
  border-radius: var(--radio); padding: 1em 1.1em; margin-bottom: .8em; min-width: 0;
  background: var(--blanco); border: 1px solid var(--gris-mej); box-shadow: 0 .2em .9em rgba(16, 29, 58, .06);
}
.grid > .tarjeta { margin-bottom: 0; }
.tarjeta p { margin: 0; font-size: .93em; }
.tar-tit { display: block; font-family: var(--f-serif); font-size: 1.2em; font-weight: 600; margin-bottom: .15em; color: var(--azul-toga-profundo); }
.tar-sub { display: block; font-family: var(--f-mono); font-size: .7em; letter-spacing: .08em; text-transform: uppercase; color: var(--pizarra); margin-bottom: .6em; }
.tarjeta.tono-noche { background: var(--azul-nocturno); border-color: var(--azul-nocturno); color: #E6EDF7; }
.tarjeta.tono-noche .tar-tit { color: #fff; }
.tarjeta.tono-noche .tar-sub { color: var(--dorado-luz); }

/* Tarjeta de módulo: costado semántico + encabezado con el color del universo */
.modulo {
  border-radius: var(--radio); padding: 1em 1.1em .9em; margin-bottom: .8em; min-width: 0;
  background: var(--blanco); border: 1px solid var(--gris-mej); border-left: .4em solid var(--azul-toga);
  box-shadow: 0 .2em .9em rgba(16, 29, 58, .06); position: relative;
}
.grid > .modulo { margin-bottom: 0; }
.modulo .tar-tit { font-size: 1.12em; }
.modulo .tar-sub { color: var(--azul-toga); margin-bottom: .45em; }
.modulo p { margin: 0; font-size: .9em; }
.modulo .mod-mando { display: block; font-family: var(--f-mono); font-size: .78em; margin-top: .55em; color: var(--pizarra); }
.modulo .mod-mando code { color: var(--azul-toga-profundo); font-weight: 700; }
.modulo.tono-azul { border-left-color: var(--azul-toga); }
.modulo.tono-tutela { border-left-color: var(--azul-tutelas); }
.modulo.tono-tutela .tar-sub, .modulo.tono-tutela .mod-mando code { color: var(--azul-tutelas); }
.modulo.tono-desacato { border-left-color: var(--naranja-desacatos); }
.modulo.tono-desacato .tar-sub, .modulo.tono-desacato .mod-mando code { color: var(--naranja-desacatos); }
.modulo.tono-habeas { border-left-color: var(--morado-habeas); }
.modulo.tono-habeas .tar-sub, .modulo.tono-habeas .mod-mando code { color: var(--morado-habeas); }
.modulo.tono-verde { border-left-color: var(--verde-detalle); }
.modulo.tono-verde .tar-sub, .modulo.tono-verde .mod-mando code { color: var(--verde-detalle); }
.modulo.tono-oro { border-left-color: var(--dorado-balanza); }
.modulo.tono-oro .tar-sub, .modulo.tono-oro .mod-mando code { color: #8A6E15; }

/* ── Notas: borde izquierdo por tono ────────────────────────────────────── */
.nota { border-radius: 0 var(--radio) var(--radio) 0; padding: .8em 1em; margin: 0 0 .8em; border-left: .32em solid; background: var(--gris-papel); }
.nota p { margin: 0; font-size: .9em; }
.nota-tit { display: block; font-family: var(--f-mono); font-size: .68em; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .35em; }
.nota-azul { border-color: var(--azul-toga); background: #E7EDF8; }
.nota-azul .nota-tit { color: var(--azul-toga); }
.nota-tutela { border-color: var(--azul-tutelas); background: #E3EDF6; }
.nota-tutela .nota-tit { color: var(--azul-tutelas); }
.nota-desacato { border-color: var(--naranja-desacatos); background: #FBEDE2; }
.nota-desacato .nota-tit { color: var(--naranja-desacatos); }
.nota-habeas { border-color: var(--morado-habeas); background: #EEE7F7; }
.nota-habeas .nota-tit { color: var(--morado-habeas); }
.nota-verde { border-color: var(--verde-detalle); background: #E4F1EB; }
.nota-verde .nota-tit { color: var(--verde-detalle); }
.nota-oro { border-color: var(--dorado-balanza); background: #F9F1DA; }
.nota-oro .nota-tit { color: #8A6E15; }
.nota-alerta { border-color: var(--alerta); background: var(--alerta-pale); }
.nota-alerta .nota-tit { color: var(--alerta); }

/* ── Bloque «regla» (regla de conteo, borde dorado) ─────────────────────── */
.regla {
  border: 1px solid var(--dorado-balanza); border-left: .45em solid var(--dorado-balanza);
  border-radius: 0 var(--radio) var(--radio) 0; background: #FBF6E6;
  padding: .85em 1em .7em; margin: .2em 0 .9em;
}
.regla-tit { display: block; font-family: var(--f-mono); font-size: .68em; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #8A6E15; margin-bottom: .35em; }
.regla p { margin: 0 0 .4em; font-size: .93em; }
.regla p:last-child { margin-bottom: 0; }

/* ── Bloque «pasos» numerados ───────────────────────────────────────────── */
.pasos { list-style: none; margin: .3em 0 .9em; padding: 0; display: grid; gap: .55em; counter-reset: paso; }
.pasos li {
  counter-increment: paso; display: grid; grid-template-columns: 2.1em 1fr; gap: .7em; align-items: start;
  background: var(--blanco); border: 1px solid var(--gris-mej); border-radius: var(--radio); padding: .6em .8em;
}
.pasos li::before {
  content: counter(paso, decimal-leading-zero); font-family: var(--f-mono); font-weight: 700; font-size: .82em;
  width: 2.1em; height: 2.1em; display: grid; place-items: center; border-radius: 50%;
  background: var(--azul-toga); color: #fff;
}
.pasos strong { display: block; font-size: .98em; color: var(--azul-toga-profundo); }
.pasos p { margin: .1em 0 0; font-size: .87em; color: var(--pizarra); }

/* ── Bloque código (mono sobre azul-nocturno-hondo) ─────────────────────── */
.codigo { margin: .3em 0 .9em; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--azul-nocturno-hondo); }
.codigo-cab { display: flex; justify-content: space-between; align-items: center; gap: 1em; background: #16254A; color: var(--dorado-luz); font-family: var(--f-mono); font-size: .7em; letter-spacing: .12em; text-transform: uppercase; padding: .5em .9em; }
.codigo pre { margin: 0; background: var(--azul-nocturno-hondo); color: #D9E3F2; font-family: var(--f-mono); font-size: .8em; line-height: 1.55; padding: .8em .95em; overflow-x: auto; white-space: pre; }
.codigo pre .cmd { color: var(--dorado-luz); font-weight: 700; }
.codigo pre .com { color: #6F86A3; }

/* ── KPIs (número grande mono) ──────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); gap: .8em; margin: .6em 0 1em; }
.kpi { background: var(--azul-nocturno); color: #fff; border-radius: var(--radio); padding: .9em 1em; border-bottom: .25em solid var(--dorado-balanza); }
.kpi-v { display: block; font-family: var(--f-mono); font-size: 1.9em; font-weight: 700; color: var(--dorado-luz); line-height: 1.05; letter-spacing: -.02em; }
.kpi-l { display: block; font-size: .76em; margin-top: .45em; color: #D8E2F0; line-height: 1.3; }

/* ── Listas y tablas ────────────────────────────────────────────────────── */
.lista { margin: 0 0 .8em; padding-left: 1.2em; }
.lista li { margin-bottom: .38em; line-height: 1.5; font-size: .95em; }
.lista.check { list-style: none; padding-left: 0; }
.lista.check li { position: relative; padding-left: 1.6em; }
.lista.check li::before { content: ""; position: absolute; left: 0; top: .25em; width: .95em; height: .95em; border: .14em solid var(--verde-detalle); border-radius: .2em; }
.lista.check li::after { content: ""; position: absolute; left: .3em; top: .32em; width: .3em; height: .55em; border: solid var(--verde-detalle); border-width: 0 .14em .14em 0; transform: rotate(45deg); }
.lista.num li::marker { font-family: var(--f-mono); font-weight: 700; color: #8A6E15; }

.tabla { width: 100%; border-collapse: collapse; margin: .3em 0 .9em; font-size: .88em; }
.tabla th { font-family: var(--f-mono); font-size: .78em; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; text-align: left; color: #fff; background: var(--azul-toga-profundo); padding: .55em .7em; }
.tabla td { padding: .5em .7em; border-bottom: 1px solid var(--gris-mej); vertical-align: top; line-height: 1.4; }
.tabla tbody tr:nth-child(even) td { background: rgba(226, 229, 233, .35); }
.tabla.compacta { font-size: .8em; }
.tabla.compacta td { padding: .4em .6em; }
.tabla .mono { font-size: .92em; }
.tabla td .chip-hoja { display: inline-block; font-family: var(--f-mono); font-size: .78em; font-weight: 700; padding: .12em .5em; border-radius: .8em; color: #fff; }

.cita-bloque { margin: .2em 0 .9em; padding: .2em 0 .2em 1em; border-left: .15em solid var(--dorado-balanza); }
.cita-bloque p { font-family: var(--f-serif); font-style: italic; font-size: 1.12em; line-height: 1.4; color: var(--azul-toga-profundo); margin: 0 0 .3em; }
.cita-bloque footer { font-size: .78em; color: var(--pizarra); }

/* ── Paleta (chips de color) ────────────────────────────────────────────── */
.paleta { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr)); gap: .7em; margin: .3em 0 .9em; }
.swatch { all: unset; box-sizing: border-box; display: flex; flex-direction: column; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--gris-mej); background: #fff; cursor: pointer; }
.swatch:focus-visible { outline: .18em solid var(--dorado-balanza); outline-offset: .15em; }
.sw-color { background: var(--sw); color: var(--sw-t); height: 4.2em; display: flex; align-items: flex-end; padding: .5em .7em; }
.sw-hex { font-family: var(--f-mono); font-weight: 700; font-size: .82em; }
.sw-info { display: flex; flex-direction: column; gap: .15em; padding: .55em .7em .65em; font-size: .76em; line-height: 1.3; }
.sw-info strong { font-size: 1.05em; color: var(--azul-toga-profundo); }
.sw-info .mono { color: var(--pizarra); }
.sw-rol { color: var(--pizarra); }
.paleta-mini { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 100%; min-height: 10em; border-radius: var(--radio); overflow: hidden; }
.paleta-mini span { display: flex; align-items: flex-end; justify-content: center; padding-bottom: .55em; }
.paleta-mini em { font-family: var(--f-mono); font-style: normal; font-size: .58em; writing-mode: vertical-rl; transform: rotate(180deg); color: rgba(255, 255, 255, .85); mix-blend-mode: difference; }

/* ── Logos ──────────────────────────────────────────────────────────────── */
.logo { position: relative; width: 100%; height: 100%; }
.logo > svg { width: 100%; height: 100%; display: block; }
.fig-logo { margin: 0; display: flex; align-items: center; justify-content: center; }
.fig-logo .logo-fig { width: 100%; aspect-ratio: 512 / 512; height: auto; }
.fondo-oscuro { background: var(--azul-nocturno); }
.fondo-noche { background: radial-gradient(120% 100% at 50% 0%, var(--azul-nocturno) 0%, var(--azul-nocturno-hondo) 100%); }

.variantes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; }
.var-card { border-radius: var(--radio); border: 1px solid var(--gris-mej); background: #fff; overflow: hidden; }
.var-card.fondo-oscuro, .var-card.fondo-noche { border-color: var(--azul-nocturno); background: var(--azul-nocturno); }
/* Altura fija (no un cuadrado al ancho de la tarjeta): seis variantes caben en una lámina
   y el imagotipo horizontal no se dispara. El SVG conserva su proporción dentro. */
.var-logo { padding: .9em 1.2em .3em; }
.var-logo > .logo { height: 6.5em; }
.var-txt { padding: .3em .9em .8em; font-size: .8em; }
.var-txt strong { display: block; color: var(--azul-toga-profundo); }
.var-txt span { color: var(--pizarra); }
.fondo-oscuro .var-txt strong, .fondo-noche .var-txt strong { color: #fff; }
.fondo-oscuro .var-txt span, .fondo-noche .var-txt span { color: #C9D6E8; }
.lockups { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: auto auto; gap: .9em; margin-bottom: .9em; }
.lock { background: #fff; border: 1px solid var(--gris-mej); border-radius: var(--radio); padding: 1em 1.2em; display: flex; flex-direction: column; gap: .6em; }
.lock span { font-family: var(--f-mono); font-size: .68em; color: var(--pizarra); }
.lock-h .lock-fig { aspect-ratio: 1440 / 360; }
.lock-v { grid-row: span 2; }
.lock-v .lock-fig { aspect-ratio: 720 / 720; max-height: 20em; margin: 0 auto; }

/* ── Especímenes tipográficos ───────────────────────────────────────────── */
.especimen { background: #fff; border: 1px solid var(--gris-mej); border-radius: var(--radio); padding: .9em 1.1em; height: 100%; }
.esp-cab { display: flex; justify-content: space-between; gap: 1em; align-items: baseline; border-bottom: 1px solid var(--gris-mej); padding-bottom: .4em; margin-bottom: .6em; }
.esp-cab strong { font-size: 1.05em; color: var(--azul-toga-profundo); }
.esp-cab span { font-size: .72em; color: var(--pizarra); text-align: right; }
.esp-muestra { font-size: 1.6em; line-height: 1.2; color: var(--azul-toga-profundo); margin-bottom: .35em; }
/* El radicado de 23 dígitos no se parte: en mono se ajusta al ancho de la tarjeta. */
.esp-muestra.ff-mono { font-size: clamp(.9em, 2.1vw, 1.35em); white-space: nowrap; letter-spacing: -.01em; }
.esp-abc { font-size: 1em; color: var(--tinta-mej); margin-bottom: .4em; }
.esp-pesos { font-size: .7em; color: var(--verde-detalle); }

/* ── Índice ─────────────────────────────────────────────────────────────── */
.indice { list-style: none; margin: .6em 0 0; padding: 0; columns: 1; column-gap: 1.6em; }
.indice li { break-inside: avoid; }
.indice a { display: grid; grid-template-columns: 2.2em 1fr auto; gap: .4em; padding: .38em 0; border-bottom: 1px solid var(--gris-mej); text-decoration: none; font-size: .9em; }
.ind-num { font-family: var(--f-mono); font-weight: 700; color: #8A6E15; }
.ind-pag { font-family: var(--f-mono); color: var(--pizarra); }

/* ── Figuras de portadilla ──────────────────────────────────────────────── */
.fig-pie { font-family: var(--f-mono); font-size: .68em; color: var(--pizarra); margin-top: .7em; line-height: 1.45; }
.sup-noche .fig-pie { color: #9FB3CC; }
.fig-xl { margin: 0; }
.xl-ventana { background: var(--blanco); border: 1px solid var(--gris-mej); border-top: .4em solid var(--azul-toga); border-radius: var(--radio); padding: 1em 1.1em; box-shadow: 0 1.4em 3em rgba(10, 20, 43, .4); }
.xl-titulo { font-size: .68em; letter-spacing: .1em; text-transform: uppercase; color: var(--pizarra); border-bottom: 1px solid var(--gris-mej); padding-bottom: .6em; margin-bottom: .7em; }
.xl-fila { display: grid; grid-template-columns: 1.7em 1fr auto; gap: .7em; align-items: center; padding: .42em .5em; border-bottom: 1px solid var(--gris-papel); font-size: .74em; }
.xl-fila:last-child { border-bottom: 0; }
.xl-col { font-weight: 700; color: #fff; background: var(--azul-toga); width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: .25em; }
.xl-cab { font-weight: 700; letter-spacing: .06em; color: var(--azul-toga-profundo); }
.xl-val { color: var(--tinta-mej); }
.xl-rad { color: var(--azul-toga); font-weight: 700; }
.est-fila { margin-bottom: .45em; }
.est-doc { display: block; font-size: .72em; padding: .45em .6em; border-left: .3em solid var(--azul-toga); background: var(--gris-papel); border-radius: 0 .35em .35em 0; color: var(--tinta-mej); word-break: break-all; }
.est-proc { display: block; margin-top: .8em; font-size: .72em; padding: .5em .6em; border-radius: .35em; background: var(--azul-nocturno-hondo); color: var(--dorado-luz); }
.fig-universos { margin: 0; }
.uni-tile { background: var(--blanco); border: 1px solid var(--gris-mej); border-bottom: .4em solid var(--azul-tutelas); border-radius: var(--radio); padding: .9em 1em; margin-bottom: .6em; box-shadow: 0 1.2em 2.6em rgba(10, 20, 43, .35); }
.uni-tile strong { font-family: var(--f-serif); font-size: 1.3em; color: var(--azul-toga-profundo); display: block; letter-spacing: .02em; }
.uni-tile span { font-size: .72em; color: var(--pizarra); }
.uni-historial { display: block; font-size: .7em; padding: .55em .7em; border-radius: .4em; background: rgba(46, 125, 91, .16); color: var(--verde-detalle); border-left: .3em solid var(--verde-detalle); }
.inst-pasos { display: grid; gap: .45em; margin-bottom: .8em; }
.inst-pasos span { font-size: .72em; padding: .45em .6em; background: var(--gris-papel); border-radius: .35em; color: var(--tinta-mej); }
.inst-tree { font-size: .74em; line-height: 1.65; padding: .65em .8em; background: var(--azul-nocturno-hondo); color: #D9E3F2; border-radius: var(--radio); }
.fig-sello { margin: 0; display: flex; flex-direction: column; align-items: center; }
.fig-sello svg { max-height: 24em; }
.sello-t { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 3px; fill: var(--dorado-luz); }
.sello-n { font-family: 'Newsreader', serif; font-size: 30px; font-weight: 600; fill: #E6EDF7; }

/* ── Portadillas ────────────────────────────────────────────────────────── */
.porta { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2em; align-items: center; height: 100%; }
.porta-num { font-family: var(--f-serif); font-weight: 600; font-size: 7em; line-height: .85; margin: 0 0 .1em; color: transparent; -webkit-text-stroke: .018em var(--dorado-luz); }
.porta-tit { font-size: 2.8em; line-height: 1.04; color: #fff; margin-bottom: .35em; }
.porta-lead { font-size: 1.12em; line-height: 1.5; color: #E3EAF5; max-width: 34em; }
.porta .eyebrow { color: var(--dorado-luz); }
.porta-fig { height: 100%; display: flex; align-items: center; justify-content: center; min-width: 0; }
.porta-fig > * { width: 100%; }
.porta-fig .fig-logo { max-width: 22em; margin: 0 auto; }

/* Tonos de superficie de lámina/página */
.sup-noche { background: radial-gradient(120% 90% at 80% 10%, #16294E 0%, var(--azul-nocturno) 55%, var(--azul-nocturno-hondo) 100%); color: #E6EDF7; }
.sup-claro { background: var(--crema-papel); }
.sup-noche h2, .sup-noche h3 { color: #fff; }
.sup-noche p.lead { color: #E6EDF7; }
.sup-noche .tabla td { border-bottom-color: rgba(226, 229, 233, .2); color: #E6EDF7; }
.sup-noche .tabla tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .05); }
.sup-noche .muted { color: #9FB3CC; }

/* ── Portada y contraportada ────────────────────────────────────────────── */
.portada { position: relative; height: 100%; overflow: visible; }
.portada-fondo { position: absolute; inset: 0; }
.portada-fondo > svg, .portada-fondo .noche-capas { width: 100%; height: 100%; }
.portada-texto { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: calc(58px + 3vh); padding-bottom: 13vh; color: #fff; }
.portada-texto::before {
  content: ""; position: absolute; inset: -6% -14% -2%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 46%, rgba(10, 20, 43, .72) 0%, rgba(10, 20, 43, .38) 55%, rgba(10, 20, 43, 0) 100%);
}
.portada-logo { width: 9.5em; height: auto; aspect-ratio: 512 / 512; margin-bottom: .9em; }
.portada-eyebrow { font-family: var(--f-mono); font-size: .78em; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; color: var(--dorado-luz); margin: 0 0 1.1em; }
.portada-tit { font-family: var(--f-serif); font-weight: 600; font-size: 3.1em; line-height: 1.08; letter-spacing: .02em; text-shadow: 0 .06em .5em rgba(10, 20, 43, .65); margin: 0; max-width: 15em; }
.portada-lema { font-family: var(--f-mono); font-size: .95em; letter-spacing: .42em; text-transform: uppercase; color: var(--dorado-luz); margin: 1em 0 .4em; }
.portada-sub { font-family: var(--f-serif); font-style: italic; font-size: 1.25em; color: #E6EDF7; margin: 0; }
.portada-datos { font-family: var(--f-mono); font-size: .72em; letter-spacing: .18em; text-transform: uppercase; color: #9FB3CC; margin: 1.7em 0 0; padding-top: 1.5em; border-top: 1px solid rgba(201, 162, 39, .35); }
.portada-pie { font-family: var(--f-mono); font-size: .7em; letter-spacing: .14em; text-transform: uppercase; color: #9FB3CC; margin: 1em 0 0; }
.contra .portada-texto { justify-content: center; padding-top: 0; }
.contra-logo { width: 13em; aspect-ratio: 512 / 512; height: auto; background: rgba(244, 242, 236, .96); border-radius: 1em; padding: 1.2em; }
.contra-frase { font-family: var(--f-serif); font-style: italic; font-size: 1.28em; max-width: 30em; color: #F3E6DD; margin: 1.2em 0 0; }
.contra .portada-pie { position: absolute; bottom: 0; left: 0; right: 0; }

/* Solo pantalla: Chrome headless imprime con una ventana de ~800 px y estas reglas
   apilaban todas las columnas del PDF (la lámina A4 apaisada tiene 1123 px). */
@media screen and (max-width: 820px) {
  .cols, .porta, .lockups { grid-template-columns: 1fr !important; }
  .grid.g3, .grid.g4, .variantes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lock-v { grid-row: auto; }
  .porta-num { font-size: 4.6em; }
  .porta-tit { font-size: 2.1em; }
  .tabla { display: block; overflow-x: auto; }
}
@media screen and (max-width: 520px) {
  .grid.g2, .grid.g3, .grid.g4, .variantes { grid-template-columns: 1fr; }
  .portada-tit { font-size: 2.7em; }
  .portada-lema { letter-spacing: .25em; font-size: .8em; }
}

/* ── Movimiento reducido: sin paralaje, sin animaciones ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .capa[data-z] { transform: none !important; }
  html.anim [data-revelar] { opacity: 1 !important; transform: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ── Bloque de video tutorial (docs/videos/<slug>/entrega) ── */
.video-mej { margin: 1.6em 0; border: 1px solid rgba(201,162,39,.35); border-radius: 14px; overflow: hidden; background: #0A142B; }
.video-mej figcaption { display: flex; flex-wrap: wrap; gap: .4em 1em; align-items: baseline; padding: .7em 1em; background: linear-gradient(135deg,#0A142B 0%,#101D3A 60%,#1F3366 100%); border-left: 5px solid #C9A227; }
.video-tit { color: #F4F2EC; font-weight: 700; font-size: 1.02em; }
.video-meta { color: #E5C55B; font-size: .78em; letter-spacing: .04em; text-transform: uppercase; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.video-mej video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }  /* alto reservado: sin saltos al cargar metadatos */
.video-caps { display: flex; flex-wrap: wrap; gap: .45em; padding: .75em 1em; background: rgba(16,29,58,.92); }
.video-cap { border: 1px solid rgba(201,162,39,.4); background: transparent; color: #F4F2EC; border-radius: 999px; padding: .28em .8em .28em .5em; font: inherit; font-size: .8em; cursor: pointer; display: inline-flex; gap: .5em; align-items: center; }
.video-cap:hover { background: rgba(201,162,39,.16); }
.video-cap-t { color: #E5C55B; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .92em; }
.video-nota { color: #9FB0D0; font-size: .78em; padding: .6em 1em .8em; margin: 0; }
.video-trans { padding: .6em 1em 1em; }
.video-trans summary { cursor: pointer; color: #E5C55B; font-size: .85em; letter-spacing: .05em; text-transform: uppercase; }
.video-trans p { font-size: .88em; line-height: 1.55; color: #A8B7D6; }
.video-caps-imp { font-size: .8em; color: #55606E; }
.page .video-mej { break-inside: avoid; }