/*
 * Tema jarrobav7. Estilos a partir del prototipo (doc/tema-nuevo.md).
 * Lectura tipo Medium: raíl izquierdo (índice + anuncio), columna central de ancho ajustable por
 * el lector y raíl derecho (serie) en pantallas anchas. Los ajustes del lector (modo, código,
 * anuncios) van como data-* en <html> para aplicarlos antes de pintar.
 */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(../fonts/source-sans-3.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(../fonts/source-sans-3-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap; src: url(../fonts/source-sans-3-italic.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(../fonts/jetbrains-mono.woff2) format("woff2"); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
html { background: #fff; -webkit-text-size-adjust: 100%; }
html[data-modo="oscuro"] { background: #161618; }
img, video, iframe { max-width: 100%; }
img { height: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.saltar { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 8px 14px; background: var(--tinta); color: var(--fondo); border-radius: 8px; }
.saltar:focus { top: 8px; }


/* Concepto: lectura tipo Medium. Raíl izquierdo (índice + anuncio), columna central de ancho ajustable por el lector, raíl derecho (serie) en pantallas anchas. */
.site {
  --fondo: #ffffff;
  --fondo-suave: #f5f5f3;
  --tinta: #242426;           /* casi negro, algo suavizado: menos deslumbrante que #000 sobre blanco */
  --tinta-2: #66676c;
  --linea: #e6e6e3;
  --acento: #b3261e;          /* rojo jarroba, con moderación */
  --codigo-fondo: #f6f6f4;
  --sombra: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .08);
  --nota-f: #eaf2fb;  --nota-t: #1f5c99;
  --tip-f:  #e8f5ec;  --tip-t:  #1d6b3a;
  --aviso-f:#fdf3e1;  --aviso-t:#8a5300;
  --peligro-f:#fbeaea;--peligro-t:#a12622;
  --herr-f: #f1ecfa;  --herr-t: #5b3a9e;
  --hl-kw: #a626a4; --hl-str: #50a14f; --hl-com: #8a8f98; --hl-num: #986801; --hl-fn: #4078f2; --hl-var: #c45500;

  --f-titulo: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --f-cuerpo: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --t-cuerpo: 1.22rem;
  --interlineado: 1.68;
  color-scheme: light;
}
html[data-modo="oscuro"] .site {
  --fondo: #161618;
  --fondo-suave: #202023;
  --tinta: #e6e6e3;
  --tinta-2: #a0a09b;
  --linea: #323235;
  --acento: #ff8a80;
  --codigo-fondo: #1e1e21;
  --sombra: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .4);
  --nota-f: #1a2633;  --nota-t: #8cc2f5;
  --tip-f:  #172a1e;  --tip-t:  #86d6a0;
  --aviso-f:#2e2414;  --aviso-t:#f0c069;
  --peligro-f:#331b1b;--peligro-t:#ff9b94;
  --herr-f: #251e33;  --herr-t: #c3a8f5;
  --hl-kw: #c792ea; --hl-str: #addb67; --hl-com: #7f848e; --hl-num: #f78c6c; --hl-fn: #82aaff; --hl-var: #ffcb6b;
  color-scheme: dark;
}

/* ---------- sitio ---------- */
.site { container-type: inline-size; position: relative; min-height: 100vh; background: var(--fondo); color: var(--tinta); font-family: var(--f-titulo); font-size: 16px; line-height: 1.5; }
.site a { color: inherit; }
.site :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 3px; }
.envoltura { max-width: 1320px; margin: 0 auto; padding-inline: 32px; }
@container (max-width: 600px) { .envoltura { padding-inline: 16px; } }

.cabecera { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); }
.cabecera .envoltura { display: flex; align-items: center; gap: 20px; height: 100px; position: relative; transition: height .2s; }
.site.compacta .cabecera .envoltura { height: 52px; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 74px; width: auto; transition: height .2s; }
.site.compacta .logo img { height: 32px; }
@container (max-width: 600px) { .cabecera .envoltura { height: 76px; } .logo img { height: 54px; } .site.compacta .cabecera .envoltura { height: 52px; } .site.compacta .logo img { height: 32px; } }
html[data-modo="oscuro"] .site .logo img { filter: drop-shadow(0 0 .6px #fff) drop-shadow(0 0 .6px #fff) drop-shadow(0 0 5px rgb(255 255 255 / .35)); } /* halo claro para que el negro del logo se lea sobre oscuro */
.menu { display: flex; gap: 18px; margin-left: 12px; }
.menu a { text-decoration: none; color: var(--tinta-2); font-weight: 600; font-size: .95rem; }
.menu a:hover, .menu a.activo { color: var(--tinta); }
.menu a.herr { color: var(--acento); }
.cab-acciones { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icono-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--tinta); cursor: pointer; }
.icono-btn:hover { background: var(--fondo-suave); }
.icono-btn svg { width: 20px; height: 20px; }
.icono-btn.aa { font: 700 1rem var(--f-titulo); }
.icono-btn[aria-expanded="true"] { background: var(--fondo-suave); }
.idioma { display: flex; border: 1px solid var(--linea); border-radius: 99px; overflow: hidden; font-size: .8rem; font-weight: 700; }
.idioma a { padding: 4px 9px; text-decoration: none; color: var(--tinta-2); }
.idioma a[aria-current] { background: var(--tinta); color: var(--fondo); }
.solo-movil { display: none; }
@container (max-width: 860px) { .menu { display: none; } .solo-movil { display: inline-grid; } }
.menu-movil { display: grid; border-top: 1px solid var(--linea); padding: 8px 16px 16px; background: var(--fondo); max-height: calc(100vh - 70px); overflow: auto; }
.menu-movil > a { padding: 14px 4px; font-size: 1.15rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--linea); }
.menu-movil > a small { font-weight: 400; color: var(--tinta-2); font-size: .85rem; margin-left: 6px; }
.menu-movil > a.herr { color: var(--acento); }
.menu-movil-pie { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 16px; }
.menu-movil-pie .idioma a { padding: 8px 14px; font-size: .9rem; }
@container (min-width: 861px) { .menu-movil { display: none !important; } }
@container (max-width: 860px) { .cab-acciones > .idioma, #cambiar-modo { display: none; } }
.progreso { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--acento); width: 0; }

/* marca de categoría: círculo con el icono; si hay varias categorías, el círculo se reparte en sus colores */
.marca { display: inline-grid; place-items: center; width: var(--t, 36px); height: var(--t, 36px); border-radius: 50%; background: var(--g); flex: 0 0 auto; }
.marca img { width: 68%; height: 68%; }
:is(.marca, .cat .circ, .tres .circ) img { width: 100%; height: 100%; }

/* ---------- inicio ---------- */
.cats-barra { display: flex; align-items: center; gap: 12px; padding: 22px 0 4px; }
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 2px; flex: 1; min-width: 0; }
@container (min-width: 760px) { .cats { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

@container (max-width: 600px) { .cat { font-size: .72rem; } .cat .circ { width: 52px; height: 52px; } .cat .circ img { width: 36px; height: 36px; } }
.site a.cat { text-decoration: none; }
.cat { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; border-radius: 14px; border: 0; background: none; color: var(--tinta-2); font: 600 .78rem/1.2 var(--f-titulo); cursor: pointer; text-align: center; }
.cat .circ { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--c); transition: transform .15s, box-shadow .15s; }
.cat .circ img { width: 40px; height: 40px; }
.cat:hover .circ { transform: translateY(-2px); }
/* los círculos crecen con la pantalla: 7 % del ancho de la web, entre 52 y 128 px */
.cat .circ { width: clamp(52px, 7cqi, 128px); height: clamp(52px, 7cqi, 128px); }
.cat .circ img { width: 69%; height: 69%; }
.cat { font-size: clamp(.72rem, .55rem + .45cqi, .95rem); gap: clamp(6px, .8cqi, 12px); }
.cat[aria-pressed="true"] { color: var(--tinta); }
.cat[aria-pressed="true"] .circ { box-shadow: 0 0 0 3px var(--fondo), 0 0 0 5px var(--tinta); }
.hay-filtro .cat[aria-pressed="false"] .circ { filter: grayscale(.85); opacity: .55; }
.limpiar { border: 0; background: none; color: var(--tinta-2); font: 600 .85rem var(--f-titulo); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

.seccion-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 30px 0 18px; flex-wrap: wrap; }
.seccion-titulo h2 { margin: 0; font-size: 1.5rem; letter-spacing: -.01em; }
.seccion-titulo a { color: var(--tinta-2); font-weight: 600; font-size: .9rem; text-decoration: none; }

.portada-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; padding-bottom: 32px; border-bottom: 1px solid var(--linea); }
.portada-top .imagen-dest { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--fondo-suave); display: block; }
.portada-top .imagen-dest > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lateral-top { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.destacado { display: block; text-decoration: none; }
.destacado h3 { font-size: clamp(1.5rem, 1rem + 1.2cqi, 2.1rem) !important; }
.destacado p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recientes { border-top: 1px solid var(--linea); padding-top: 14px; }
.recientes h4 { margin: 0 0 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.recientes ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.recientes a { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; padding: 6px 0; text-decoration: none; }
.recientes .mini { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: var(--fondo-suave); }
.recientes .mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recientes strong { display: block; font-size: .98rem; line-height: 1.3; text-wrap: balance; }
.recientes .meta { font-size: .8rem; }
.recientes a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
/* en escritorio la imagen se estira hasta la altura de la columna derecha, para que ambas acaben a la vez */
@container (min-width: 761px) { .portada-top .imagen-dest { aspect-ratio: auto; min-height: 300px; height: 100%; } }
@container (max-width: 760px) { .portada-top { grid-template-columns: 1fr; gap: 16px; } }
.destacado .imagen { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--fondo-suave); }
.destacado .imagen > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.destacado h3 { font-size: 2.2rem; line-height: 1.1; margin: 0 0 12px; letter-spacing: -.02em; text-wrap: balance; }
.destacado p { color: var(--tinta-2); font-size: 1.12rem; margin: 0 0 14px; }
.destacado:hover h3, .tarjeta:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.sobre-imagen { position: absolute; left: 12px; bottom: 12px; box-shadow: 0 0 0 3px var(--fondo); }
.meta { color: var(--tinta-2); font-size: .88rem; }

.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; padding: 32px 0 8px; }
@container (min-width: 1240px) { .rejilla { grid-template-columns: repeat(4, 1fr); } }
@container (max-width: 1000px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@container (max-width: 560px) { .rejilla { grid-template-columns: 1fr; gap: 28px; } }
.tarjeta { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.tarjeta .enlace { text-decoration: none; }
.tarjeta .enlace::after { content: ""; position: absolute; inset: 0; z-index: 1; }
button.marca { border: 0; padding: 0; cursor: pointer; z-index: 2; transition: transform .15s; }
button.marca:hover { transform: scale(1.12); }
.portada-top .cubre { position: absolute; inset: 0; z-index: 1; }
.tarjeta .imagen { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--fondo-suave); margin-bottom: 6px; }
.tarjeta .imagen > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.tarjeta:hover .imagen > img { transform: scale(1.03); }
.tarjeta .sobre-imagen { --t: 32px; left: 10px; bottom: 10px; }
.tarjeta h3 { margin: 0; font-size: 1.14rem; line-height: 1.28; letter-spacing: -.005em; text-wrap: balance; }
.tarjeta p { margin: 0; font-size: .96rem; color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sin-resultados { padding: 24px 0; color: var(--tinta-2); }
.paginar { display: flex; justify-content: center; margin-top: 32px; }

.site a.boton, .boton { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 99px; font-weight: 700; text-decoration: none; background: var(--fondo); color: var(--tinta); border: 0; cursor: pointer; font-family: var(--f-titulo); font-size: .95rem; }
.site a.boton-sec, .boton-sec { background: var(--fondo-suave); color: var(--tinta); }
.site a.boton-oscuro, .boton-oscuro { background: var(--tinta); color: var(--fondo); }
.boton:hover { filter: brightness(1.08); }
.herramientas { margin: 56px 0 0; background: var(--fondo-suave); border-radius: 18px; padding: 36px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 36px; align-items: start; }
.herramientas h2 { margin: 0 0 8px; font-size: 1.8rem; letter-spacing: -.02em; display: flex; align-items: center; gap: 12px; }
.herramientas h2 img { width: 40px; height: 40px; }
.herr-intro > p { margin: 0 0 18px; color: var(--tinta-2); font-size: 1.05rem; }
.herr-buscar { display: flex; align-items: center; gap: 10px; background: var(--fondo); border: 1px solid var(--linea); border-radius: 12px; padding: 0 14px; }
.herr-buscar:focus-within { border-color: var(--tinta-2); }
.herr-buscar svg { width: 18px; height: 18px; color: var(--tinta-2); flex: none; }
.herr-buscar input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--tinta); font: 1rem var(--f-titulo); padding: 12px 0; }
.herr-resultados { list-style: none; margin: 6px 0 0; padding: 6px; background: var(--fondo); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--sombra); }
.herr-resultados a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.herr-resultados a:hover { background: var(--fondo-suave); }
.herr-resultados li.vacio { padding: 8px 10px; color: var(--tinta-2); }
.herr-pie { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.idiomas { font: 600 .8rem var(--f-mono); color: var(--tinta-2); letter-spacing: .04em; }
.herr-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-height: 310px; }   /* sitio reservado mientras llega el catálogo (4 filas): sin saltos */
.herr-lista.cargada { min-height: 0; }
.herr-lista a { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--fondo); border: 1px solid var(--linea); text-decoration: none; transition: transform .15s, border-color .15s; }
.herr-lista a:hover { transform: translateY(-2px); border-color: var(--tinta-2); }
.herr-lista strong { display: block; font-size: .95rem; line-height: 1.25; }
.herr-lista small { color: var(--tinta-2); font-size: .8rem; line-height: 1.3; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.glifo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--g, #eee); color: var(--gt, #333); flex: none; }
.glifo .material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-size: 24px; line-height: 1; font-weight: normal; font-style: normal; letter-spacing: normal; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; }
.herr-resultados .glifo .material-symbols-rounded { font-size: 18px; }
.herr-resultados .glifo { width: 30px; height: 30px; font-size: .68rem; border-radius: 7px; }
@container (max-width: 860px) { .herramientas { grid-template-columns: 1fr; padding: 24px; gap: 24px; } }
@container (max-width: 460px) { .herr-lista { grid-template-columns: 1fr; } .herr-lista a:nth-child(n+5) { display: none; } }

.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.tres a { padding: 18px 20px; border: 1px solid var(--linea); border-radius: 14px; text-decoration: none; display: flex; gap: 14px; align-items: center; }
.tres a .circ { width: 44px; height: 44px; border-radius: 50%; background: var(--c); display: grid; place-items: center; flex: 0 0 auto; }
.tres a .circ img { width: 30px; height: 30px; }
.tres strong { display: block; }
.tres span { color: var(--tinta-2); font-size: .88rem; }
@container (max-width: 760px) { .tres { grid-template-columns: 1fr; } }

.equipo { margin: 64px 0 0; padding-top: 40px; border-top: 1px solid var(--linea); }
.equipo h2 { margin: 0 0 20px; font-size: 1.5rem; }
.persona { display: grid; grid-template-columns: 88px 1fr; gap: 6px 20px; align-items: start; }
.persona img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; grid-row: span 4; }
.persona strong { font-size: 1.15rem; }
.persona h1.persona-nombre { margin: 0; font-size: 1.6rem; line-height: 1.2; letter-spacing: -.01em; }
.persona .rol { color: var(--tinta-2); font-size: .9rem; margin-top: -4px; }
.persona p { margin: 4px 0 0; color: var(--tinta-2); font-size: .98rem; line-height: 1.55; }
.enlaces-persona { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.enlaces-persona a { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--linea); border-radius: 50%; color: var(--tinta-2); }
.enlaces-persona svg { width: 16px; height: 16px; }
.enlaces-persona a:hover { color: var(--tinta); border-color: var(--tinta-2); }
/* Quiénes somos (portada): una tarjeta con la presentación, unas cifras y el equipo en rejilla. */
.equipo { background: var(--fondo-suave); border: 0; border-radius: 18px; padding: 32px; display: grid; gap: 28px; }
.equipo-cab h2 { margin: 0 0 8px; }
/* En pantalla ancha, las cifras a la derecha del texto (el texto mantiene una línea cómoda de leer). */
@container (min-width: 900px) {
  .equipo-cab { display: grid; grid-template-columns: minmax(0, 62ch) minmax(0, 1fr); column-gap: 48px; align-items: center; }
  .equipo-cab h2 { grid-column: 1 / -1; }
  .equipo .datos { margin: 0; justify-content: flex-end; align-content: center; }
}
.equipo .lema { margin: 0; max-width: 62ch; color: var(--tinta-2); font-size: 1.05rem; line-height: 1.6; }
.equipo .datos { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.equipo .datos li { padding: 7px 14px; border-radius: 99px; background: var(--fondo); border: 1px solid var(--linea); font-size: .9rem; color: var(--tinta-2); }
.equipo .datos strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.fundadores { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 24px; border-top: 1px solid var(--linea); }
.fundador { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; padding: 22px; border-radius: 16px; background: var(--fondo); border: 1px solid var(--linea); }
.fundador img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.fundador .nombre { display: block; font-weight: 700; font-size: 1.25rem; color: var(--tinta); text-decoration: none; }
.fundador a.nombre:hover { text-decoration: underline; text-underline-offset: 3px; }
.fundador .rol { display: block; margin-top: 2px; color: var(--tinta-2); font-size: .9rem; line-height: 1.4; }
.fundador p { margin: 10px 0 0; color: var(--tinta-2); font-size: .97rem; line-height: 1.55; }
.fundador .enlaces-persona { margin-top: 12px; }
@container (max-width: 860px) { .fundadores { grid-template-columns: 1fr; } }
@container (max-width: 460px) { .fundador { grid-template-columns: 64px 1fr; padding: 18px; } .fundador img { width: 64px; height: 64px; } }
.colaboran h3 { margin: 0 0 10px; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-2); }
.miembros { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.miembro { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--fondo); border: 1px solid var(--linea); }
.miembro img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.miembro .nombre { display: block; font-weight: 700; font-size: 1.05rem; color: var(--tinta); text-decoration: none; }
.miembro a.nombre:hover { text-decoration: underline; text-underline-offset: 3px; }
.miembro .rol { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; color: var(--tinta-2); font-size: .86rem; line-height: 1.4; }
.miembro .enlaces-persona { margin-top: 6px; }
@container (max-width: 560px) { .equipo { padding: 22px; } }
@container (max-width: 460px) { .persona { grid-template-columns: 64px 1fr; } .persona img { width: 64px; height: 64px; } }

/* ---------- artículo ---------- */
/* Columnas desde el primer pintado iguales a las que pone maquetar() (tema.js) con los ajustes por defecto
   (serie a la derecha si hay serie y cabe; anuncio a la izquierda): si no, el artículo salta al cargar (CLS). */
.articulo-rejilla { display: grid; grid-template-columns: 220px minmax(0, 680px); gap: 56px; justify-content: center; padding-top: 44px; }
.articulo-rejilla > .rail-der { display: none; }
@container (min-width: 1251px) {
  .articulo-rejilla:has(#serie-rail) { grid-template-columns: 220px minmax(0, 680px) 240px; }
  .articulo-rejilla:has(#serie-rail) > .rail-der { display: block; }
}
/* Columna izquierda por tramos (tema.js): cada tramo con su bloque fijo (índice + anuncio). */
.tramos { display: flex; flex-direction: column; gap: 48px; height: 100%; }
.tramo { flex: 1 1 0; min-height: 700px; }
.tramo:only-child { min-height: 0; }
.anuncio-real.anuncio-izq { height: auto; }
/* Índice y serie plegables */
.rail :is(.toc, .serie) > h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; user-select: none; }
.rail :is(.toc, .serie) > h4::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; transition: transform .15s; flex: none; margin-right: 4px; }
.rail .plegado > h4::after { transform: rotate(-45deg); }
.rail .plegado > :not(h4) { display: none !important; }
.rail :is(.toc, .serie) > h4:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
.articulo-rejilla.sin-limite { max-width: none; }
.rail-fijo { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 24px; max-height: calc(100vh - 88px); }
.rail-fijo > nav { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--linea) transparent; flex: 0 1 auto; overscroll-behavior: contain; }
.rail-izq > .serie { margin-bottom: 32px; }
.rail-fijo > .anuncio, .rail-fijo > .anuncio-real { flex: none; }   /* el anuncio, entero; lo que encoge (con su scroll) es el índice */
.rail h4 { margin: 0 0 10px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.serie ol { list-style: none; margin: 0; padding: 0; position: relative; }
/* Línea entre partes: un tramo por parte, de su círculo al siguiente (la última no tiene: no cuelga nada debajo). */
.serie li:not(:last-child) > a::after { content: ""; position: absolute; left: 11px; top: 30px; bottom: -6px; width: 2px; background: var(--linea); }
.serie li a { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 6px 0; text-decoration: none; font-size: .88rem; line-height: 1.3; color: var(--tinta-2); }
.serie li a b { width: 24px; height: 24px; border-radius: 50%; background: var(--fondo); border: 2px solid var(--linea); display: grid; place-items: center; font-size: .72rem; color: var(--tinta-2); }
.serie li.leido a b { background: var(--linea); color: var(--tinta); }
.serie li.actual a { color: var(--tinta); font-weight: 700; }
.serie li.actual a b { border-color: var(--tinta); background: var(--tinta); color: var(--fondo); }
.serie .serie-nombre { display: block; font-weight: 700; color: var(--tinta); margin-bottom: 10px; text-decoration: none; line-height: 1.3; }
.toc a { display: block; padding: 4px 0 4px 12px; border-left: 2px solid var(--linea); text-decoration: none; color: var(--tinta-2); font-size: .88rem; line-height: 1.35; }
.toc a.activo { border-color: var(--acento); color: var(--tinta); font-weight: 600; }

.anuncio { display: grid; place-items: center; text-align: center; border: 1px dashed color-mix(in srgb, var(--tinta-2) 50%, transparent); border-radius: 8px; color: var(--tinta-2); font-size: .8rem; background: var(--fondo-suave); }
.anuncio small { display: block; opacity: .7; }
.anuncio-izq { width: 220px; height: 400px; }
.anuncio-der { width: 240px; height: 400px; }
.serie-movil { display: none; }

/* pantalla ancha: índice a la izquierda, serie a la derecha. Media: todo a la izquierda. Estrecha: serie desplegable. */
@container (max-width: 900px) {
  .articulo-rejilla { padding-top: 24px; grid-template-columns: minmax(0, 680px); }
  .rail-izq, .rail-der { display: none !important; }
  .serie-movil { display: block; }
  .ajuste-ancho { display: none; }
}

.art-cab .marca { --t: 30px; }
.art-cab .cats-art { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.art-cab .cats-art a { font-size: .8rem; font-weight: 700; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .05em; text-decoration: none; }
.art-cab .cats-art a:hover { color: var(--tinta); }
.art-cab .cats-art span.sep { color: var(--linea); }
.art-cab h1 { font-size: calc(2.6rem * var(--escala, 1)); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 14px; text-wrap: balance; }
.art-cab .entradilla { font-size: calc(1.3rem * var(--escala, 1)); line-height: 1.5; color: var(--tinta-2); margin: 0 0 24px; }
@container (max-width: 600px) { .art-cab h1 { font-size: 1.9rem; } .art-cab .entradilla { font-size: 1.12rem; } }
.firma { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-block: 1px solid var(--linea); flex-wrap: wrap; position: relative; }
.firma img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.firma .quien { font-weight: 700; display: block; text-decoration: none; }
.acciones-art { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.acciones-art button, .acciones-art a { display: inline-grid; place-items: center; min-width: 36px; height: 36px; border-radius: 99px; border: 0; background: transparent; color: var(--tinta-2); cursor: pointer; text-decoration: none; font: 700 .95rem var(--f-titulo); }
.acciones-art :is(button, a):hover, .acciones-art [aria-expanded="true"] { background: var(--fondo-suave); color: var(--tinta); }
.acciones-art svg { width: 19px; height: 19px; }
.acciones-art .sep { width: 1px; height: 22px; background: var(--linea); margin: 0 6px; }

.lectura { position: absolute; right: 16px; top: calc(100% - 4px); z-index: 25; width: 330px; max-height: calc(100vh - 100px); overflow: auto; background: var(--fondo); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra); padding: 16px; display: grid; gap: 14px; }
.lectura-cab { display: flex; align-items: center; justify-content: space-between; margin: -6px -6px -4px 0; }
.lectura-cab strong { font-size: .95rem; }
.lectura-cab .icono-btn { width: 32px; height: 32px; }
.lectura-cab .icono-btn svg { width: 18px; height: 18px; }
.lectura h5 { margin: 0 0 8px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.segmentado { display: flex; background: var(--fondo-suave); border-radius: 10px; padding: 3px; gap: 2px; }
.segmentado button { flex: 1; border: 0; background: transparent; color: var(--tinta-2); padding: 7px 4px; border-radius: 8px; cursor: pointer; font: 600 .82rem var(--f-titulo); }
.segmentado button[aria-pressed="true"] { background: var(--fondo); color: var(--tinta); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.lectura .nota-lectura { font-size: .78rem; color: var(--tinta-2); margin: 0; }
.lectura .solo-articulo { display: grid; gap: 14px; }
body:not(.single) .solo-articulo, body.single .solo-inicio { display: none; }

.imagen-destacada { margin: 28px 0 8px; }
.imagen-destacada img { width: 100%; border-radius: 10px; display: block; }

.serie-movil details { border: 1px solid var(--linea); border-radius: 12px; margin: 0 0 24px; }
.serie-movil summary { padding: 12px 16px; cursor: pointer; font-weight: 700; font-size: .92rem; display: flex; justify-content: space-between; gap: 10px; }
.serie-movil summary span { color: var(--tinta-2); font-weight: 600; }
.serie-movil .serie { padding: 0 16px 12px; }

.prosa { font-family: var(--f-cuerpo); font-size: calc(var(--t-cuerpo) * var(--escala, 1)); line-height: var(--interlineado); margin-top: 28px; }
.prosa p, .prosa ul, .prosa ol { margin: 0 0 1.3em; }
.prosa li { margin-bottom: .4em; }
.prosa h2 { font-family: var(--f-titulo); font-size: 1.45em; line-height: 1.2; letter-spacing: -.015em; margin: 2em 0 .6em; scroll-margin-top: 80px; }
.prosa h3 { font-family: var(--f-titulo); font-size: 1.12em; margin: 1.6em 0 .5em; }
.prosa a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prosa a { overflow-wrap: anywhere; }   /* URL larga como texto: que no desborde en móvil */
.prosa :not(pre) > code { font-family: var(--f-mono); font-size: .8em; background: var(--codigo-fondo); border: 1px solid var(--linea); padding: .1em .35em; border-radius: 5px; }
.prosa strong { font-weight: 700; }
.prosa figure { margin: 1.8em 0; }
.prosa figure img { width: 100%; display: block; border-radius: 10px; }
.prosa figcaption { font: .82rem var(--f-titulo); color: var(--tinta-2); text-align: center; margin-top: 8px; }

.aviso { margin: 1.8em 0; padding: 16px 20px; border-radius: 12px; background: var(--f); font-size: .94em; line-height: 1.6; }
.aviso > :last-child { margin-bottom: 0; }
.aviso .aviso-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 .78rem/1 var(--f-titulo); text-transform: uppercase; letter-spacing: .07em; color: var(--t); }
.aviso .aviso-titulo svg { width: 17px; height: 17px; }
.aviso-nota { --f: var(--nota-f); --t: var(--nota-t); }
.aviso-consejo { --f: var(--tip-f); --t: var(--tip-t); }
.aviso-cuidado { --f: var(--aviso-f); --t: var(--aviso-t); }
.aviso-peligro { --f: var(--peligro-f); --t: var(--peligro-t); }
.aviso-herramienta { --f: var(--herr-f); --t: var(--herr-t); }
/* Sección resaltada del contenido (ejemplo largo, paso a paso…): fondo neutro, sin etiqueta. */
.aviso-recuadro { --f: var(--fondo-suave); --t: var(--tinta); border: 1px solid var(--linea); }
/* Título propio del aviso, debajo de la etiqueta (o arriba del todo en el recuadro). */
.aviso :is(h3, h4, h5):first-child, .aviso .aviso-titulo + :is(h3, h4, h5) { margin: 0 0 6px; font: 700 1.02rem/1.35 var(--f-titulo); letter-spacing: -.005em; text-transform: none; color: var(--tinta); }
.aviso .wp-block-group__inner-container > :last-child { margin-bottom: 0; }

.codigo { margin: 1.8em 0; border: 1px solid var(--linea); border-radius: 12px; background: var(--codigo-fondo); overflow: hidden; }
.codigo-cab { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--linea); font: 600 .75rem/1 var(--f-titulo); color: var(--tinta-2); text-transform: uppercase; letter-spacing: .06em; }
.codigo-cab button { font: 600 .78rem var(--f-titulo); text-transform: none; letter-spacing: 0; display: inline-flex; gap: 6px; align-items: center; border: 0; background: transparent; color: var(--tinta-2); padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.codigo-cab button:hover { background: var(--fondo); color: var(--tinta); }
.codigo pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: .82rem/1.65 var(--f-mono); tab-size: 4; }
.codigo pre code { font: inherit; background: none; }
.codigo .ln { display: block; min-height: 1.65em; }
html[data-lineas="si"] .site .codigo code { counter-reset: l; }
html[data-lineas="si"] .site .codigo .ln { position: relative; padding-left: 3em; }
html[data-lineas="si"] .site .codigo .ln::before { counter-increment: l; content: counter(l); position: absolute; left: 0; width: 2em; text-align: right; color: var(--tinta-2); opacity: .55; user-select: none; }
html[data-ajustecod="ajustar"] .site .codigo pre { white-space: pre-wrap; overflow-wrap: anywhere; }
html[data-tema="oscuro"] .site .codigo { --codigo-fondo: #1e1e21; --linea: #323235; --fondo: #2a2a2e; --tinta: #e6e6e3; --tinta-2: #a0a09b; --hl-kw: #c792ea; --hl-str: #addb67; --hl-com: #7f848e; --hl-num: #f78c6c; --hl-fn: #82aaff; --hl-var: #ffcb6b; color: var(--tinta); }
.hljs-keyword, .hljs-built_in, .hljs-selector-tag { color: var(--hl-kw); }
.hljs-string, .hljs-attr { color: var(--hl-str); }
.hljs-comment, .hljs-meta { color: var(--hl-com); font-style: italic; }
.hljs-number, .hljs-literal { color: var(--hl-num); }
.hljs-title, .hljs-function { color: var(--hl-fn); }
.hljs-variable, .hljs-template-variable, .hljs-params { color: var(--hl-var); }

/* terminal: siempre oscuro, sin colorear; el «$» no se copia y «Copiar comando» copia solo los comandos */
.terminal { margin: 1.8em 0; border-radius: 12px; overflow: hidden; background: #141518; color: #d4d4ce; border: 1px solid #2a2b30; }
.terminal .codigo-cab { color: #8f8f89; border-bottom-color: #2a2b30; }
.terminal .codigo-cab button { color: #8f8f89; }
.terminal .codigo-cab button:hover { background: #24252a; color: #fff; }
.terminal pre { margin: 0; padding: 14px 18px; overflow-x: auto; font: .8rem/1.6 var(--f-mono); }
html[data-ajustecod="ajustar"] .site .terminal pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.terminal .prompt { color: #6fd38a; user-select: none; }
.terminal .cmd { color: #fff; font-weight: 600; }
.tabla { margin: 1.8em 0; overflow-x: auto; border: 1px solid var(--linea); border-radius: 12px; }
.tabla table { border-collapse: collapse; width: 100%; font: .9rem/1.45 var(--f-titulo); min-width: 560px; }
.tabla th, .tabla td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla th { background: var(--fondo-suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-2); }
.tabla tr:last-child td { border-bottom: 0; }

.prosa details { margin: 1.6em 0; border: 1px solid var(--linea); border-radius: 12px; font-size: .95em; }
.prosa details summary { cursor: pointer; padding: 12px 18px; font: 600 1rem var(--f-titulo); }
.prosa details > div { padding: 0 18px 4px; }

.anuncio-en-texto { height: 280px; margin: 2em 0; display: none; }
.anuncio-real.anuncio-en-texto { height: auto; min-height: 280px; }   /* hueco reservado (sin saltos) pero sin recortar anuncios más altos */
@container (max-width: 900px) { .anuncio-en-texto { display: grid; } }

.licencia { display: flex; gap: 12px; align-items: flex-start; margin: 40px 0 0; padding-top: 16px; border-top: 1px solid var(--linea); font-size: .8rem; line-height: 1.5; color: var(--tinta-2); }
.licencia svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; }
.licencia a { color: inherit; }

.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 28px; }
.etiquetas a { padding: 5px 12px; border-radius: 99px; background: var(--fondo-suave); text-decoration: none; font-size: .85rem; color: var(--tinta-2); }

.ant-sig { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px 0; }
.ant-sig a { display: block; padding: 18px 20px; border: 1px solid var(--linea); border-radius: 14px; text-decoration: none; }
.ant-sig a:hover { border-color: var(--tinta-2); }
.ant-sig small { display: block; color: var(--tinta-2); font-weight: 600; font-size: .8rem; margin-bottom: 6px; }
.ant-sig strong { line-height: 1.3; display: block; }
.ant-sig .sig { text-align: right; }
.ant-sig .vacio { border-style: dashed; color: var(--tinta-2); }
@container (max-width: 600px) { .ant-sig { grid-template-columns: 1fr; } .ant-sig .sig { text-align: left; } }

.caja-autor { display: flex; gap: 18px; padding: 24px; background: var(--fondo-suave); border-radius: 14px; }
.caja-autor img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.caja-autor p { margin: 4px 0 8px; color: var(--tinta-2); font-size: 1rem; }
.caja-autor .enlaces-persona a { background: var(--fondo); }

.comentarios { margin-top: 56px; }
.comentarios > h2 { font-size: 1.4rem; margin: 0 0 6px; }
.comentarios .aclaracion { margin: 0 0 20px; font-size: .82rem; color: var(--tinta-2); }
.hilo, .respuestas { list-style: none; margin: 0; padding: 0; }
.hilo > li { padding: 20px 0; border-bottom: 1px solid var(--linea); }
.respuestas { margin: 14px 0 0 17px; padding-left: 20px; border-left: 2px solid var(--linea); display: grid; gap: 14px; }
.respuestas .respuestas { margin-left: 15px; }
.comentario-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: #fff; background: var(--a, #888); flex: 0 0 auto; }
img.avatar { object-fit: cover; }
.respuestas .avatar { width: 30px; height: 30px; }
.comentario-cab strong { font-size: .95rem; }
.insignia { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 99px; background: var(--acento); color: var(--fondo); }
.comentario-cab time { color: var(--tinta-2); font-size: .82rem; }
.comentario p { margin: 0 0 6px; font-size: 1rem; line-height: 1.6; }
.responder { border: 0; background: none; color: var(--tinta-2); font: 600 .85rem var(--f-titulo); cursor: pointer; padding: 0; }
.responder:hover { color: var(--tinta); }
.en-respuesta { font-size: .8rem; color: var(--tinta-2); }
.mas-comentarios { margin: 20px 0 0; }
.form-comentario { margin-top: 32px; display: grid; gap: 12px; }
.form-comentario h3 { margin: 0; font-size: 1.15rem; }
.form-comentario textarea, .form-comentario input { width: 100%; font: 1rem var(--f-titulo); padding: 12px 14px; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); color: var(--tinta); }
.editor { border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; background: var(--fondo); }
.editor:focus-within { border-color: var(--tinta-2); }
.editor-barra { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-bottom: 1px solid var(--linea); background: var(--fondo-suave); align-items: center; }
.editor-barra button { border: 0; background: transparent; color: var(--tinta-2); min-width: 32px; height: 32px; padding: 0 8px; border-radius: 6px; cursor: pointer; font: 600 .85rem var(--f-titulo); display: inline-grid; place-items: center; }
.editor-barra button:hover { background: var(--fondo); color: var(--tinta); }
.editor-barra svg { width: 16px; height: 16px; }
.editor-barra code { font: 600 .8rem var(--f-mono); }
.editor-barra .sep { width: 1px; height: 20px; background: var(--linea); margin: 0 4px; }
.editor-area { min-height: 130px; padding: 12px 14px; outline: none; font-size: 1rem; line-height: 1.6; }
.editor-area:empty::before { content: attr(data-placeholder); color: var(--tinta-2); }
.editor-area code { font-family: var(--f-mono); font-size: .85em; background: var(--codigo-fondo); border: 1px solid var(--linea); padding: .05em .3em; border-radius: 4px; }
.editor-area pre { font: .85rem/1.6 var(--f-mono); background: var(--codigo-fondo); border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; margin: 8px 0; white-space: pre-wrap; }
.editor-area pre code { border: 0; background: none; padding: 0; }
.editor-area blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--linea); color: var(--tinta-2); }
.form-comentario .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-comentario .pie-form { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .8rem; color: var(--tinta-2); }
.site .form-comentario .boton { background: var(--tinta); color: var(--fondo); }
@container (max-width: 560px) { .form-comentario .fila { grid-template-columns: 1fr; } .respuestas { margin-left: 8px; padding-left: 12px; } .respuestas .respuestas { margin-left: 4px; } }

.relacionados { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--linea); }
.relacionados .rejilla { grid-template-columns: 1fr 1fr; padding-top: 0; }
@container (max-width: 560px) { .relacionados .rejilla { grid-template-columns: 1fr; } }

/* ---------- pie ---------- */
.pie { margin-top: 72px; border-top: 1px solid var(--linea); padding: 32px 0 40px; color: var(--tinta-2); font-size: .88rem; }
.pie .envoltura { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--tinta); }

/* ---------- buscador ---------- */
.buscador { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--fondo) 70%, transparent); backdrop-filter: blur(4px); padding: 80px 16px; }
.buscador-caja { max-width: 640px; margin: 0 auto; background: var(--fondo); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra); overflow: hidden; }
.buscador input { width: 100%; border: 0; border-bottom: 1px solid var(--linea); padding: 18px 20px; font: 1.15rem var(--f-titulo); background: transparent; color: var(--tinta); outline: none; }
.buscador ul { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow: auto; }
.buscador li a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.buscador li a:hover { background: var(--fondo-suave); }
.buscador .marca { --t: 30px; }
.buscador .pista { padding: 10px 20px 14px; font-size: .8rem; color: var(--tinta-2); border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.buscador .ejemplo-busqueda button { padding: 0; border: 0; background: none; font: inherit; font-style: italic; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 3px; cursor: pointer; }
.buscador .ejemplo-busqueda button:hover { text-decoration-color: currentColor; }

.tip { position: absolute; z-index: 2000; pointer-events: none; background: var(--tinta); color: var(--fondo); font: 600 .78rem/1.3 var(--f-titulo); padding: 6px 9px; border-radius: 6px; box-shadow: var(--sombra); width: max-content; max-width: min(280px, calc(100vw - 16px)); opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s; white-space: normal; overflow-wrap: break-word; text-align: center; }
.tip.ver { opacity: 1; transform: none; }
.site [data-tip] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* =====================================================================
   Tema real: piezas que no estaban en el prototipo
   ===================================================================== */
.site a.marca { text-decoration: none; cursor: pointer; transition: transform .15s; }
.site a.marca:hover { transform: scale(1.12); }
.sin-imagen { display: grid; place-items: center; width: 100%; height: 100%; }
.sin-imagen img { width: 34%; height: auto; }
.tarjeta .imagen > img, .recientes .mini > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.titulo-listado { margin: 0; font-size: 1.5rem; letter-spacing: -.01em; }
[aria-busy="true"] { opacity: .55; transition: opacity .2s; }

/* Listados sencillos, búsqueda, autor, páginas */
.cab-archivo { padding: 36px 0 8px; }
.cab-archivo h1 { margin: 0 0 8px; font-size: clamp(1.7rem, 1.2rem + 1.5cqi, 2.4rem); letter-spacing: -.02em; display: flex; align-items: center; gap: 14px; }
.cab-autor .persona { max-width: 760px; }
.titulo-seccion { font-size: 1.3rem; margin: 32px 0 0; }
.buscar-pagina { display: flex; gap: 10px; margin: 12px 0; max-width: 620px; }
.buscar-pagina input { flex: 1; min-width: 0; font: 1rem var(--f-titulo); padding: 10px 14px; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); color: var(--tinta); }
.pagination, .comments-pagination { margin: 40px 0 0; }
.nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.nav-links a, .nav-links span { padding: 8px 14px; border-radius: 99px; text-decoration: none; background: var(--fondo-suave); color: var(--tinta-2); font-weight: 600; }
.nav-links .current { background: var(--tinta); color: var(--fondo); }
.pagina { max-width: 760px; padding-top: 40px; }
.pagina h1 { font-size: clamp(1.8rem, 1.3rem + 1.6cqi, 2.6rem); letter-spacing: -.02em; line-height: 1.12; margin: 0 0 24px; }
.error-404 p { font-size: 1.1rem; color: var(--tinta-2); }
.anio h2 { display: flex; gap: 10px; align-items: baseline; font-size: 1.3rem; margin: 32px 0 8px; }
.lista-entradas { list-style: none; margin: 0; padding: 0; }
.lista-entradas li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--linea); }
.lista-entradas .marca { --t: 24px; }
.lista-entradas a { flex: 1; text-decoration: none; }
.lista-entradas a:hover { text-decoration: underline; }
.recursos { display: grid; gap: 16px; margin-top: 16px; }
.recurso { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 18px; border: 1px solid var(--linea); border-radius: 14px; text-decoration: none; }
.recurso img { width: 140px; height: 140px; object-fit: contain; }
.recurso strong { display: block; font-size: 1.15rem; }
.recurso .desc { display: block; color: var(--tinta-2); margin-top: 6px; }
@container (max-width: 560px) { .recurso { grid-template-columns: 1fr; } }
.imagen.video .play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgb(0 0 0 / .6); }
.imagen.video .play::after { content: ""; position: absolute; left: 22px; top: 17px; border-left: 16px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.herramientas.solo-boton { grid-template-columns: 1fr; }
.anuncio-real { min-height: 250px; }
.anuncio-izq.anuncio-real { width: 220px; } .anuncio-der.anuncio-real { width: 240px; }

/* Números de línea del código: columna aparte, no se copian */
.codigo pre { position: relative; }
.codigo .numeros { display: none; position: absolute; left: 0; top: 0; padding: 16px 0; width: 2.6em; text-align: right; color: var(--tinta-2); opacity: .5; user-select: none; white-space: pre; }
html[data-lineas="si"] .codigo .numeros { display: block; }
html[data-lineas="si"] .codigo pre { padding-left: 3.6em; }
html[data-lineas="si"][data-ajustecod="ajustar"] .codigo .numeros { display: none; }
html[data-lineas="si"][data-ajustecod="ajustar"] .codigo pre { padding-left: 18px; }
.hljs-section, .hljs-name, .hljs-tag { color: var(--hl-fn); }
.hljs-type, .hljs-class .hljs-title { color: var(--hl-var); }
.hljs-symbol, .hljs-bullet, .hljs-link { color: var(--hl-num); }
.hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 700; }
.hljs-deletion { color: var(--peligro-t); } .hljs-addition { color: var(--tip-t); }

/* Comentarios: el HTML que genera WordPress */
.hilo .children { list-style: none; margin: 14px 0 0 17px; padding-left: 20px; border-left: 2px solid var(--linea); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }   /* minmax: una URL larga no ensancha la columna */
.hilo li.comment { min-width: 0; }
.comentario-texto { overflow-wrap: anywhere; }
@container (max-width: 560px) { .hilo .children { margin-left: 6px; padding-left: 12px; } }
.hilo .children .children .children { margin-left: 0; padding-left: 0; border-left: 0; }
.comentario-texto p { margin: 0 0 8px; }
.comentario-texto pre { font: .85rem/1.6 var(--f-mono); }
.comentario-texto blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--linea); color: var(--tinta-2); }
.comentario-texto :not(pre) > code { font-family: var(--f-mono); font-size: .85em; background: var(--codigo-fondo); border: 1px solid var(--linea); padding: .05em .3em; border-radius: 4px; }
.comentario .codigo, .comentario .terminal { margin: 10px 0; }
.fecha-com { color: var(--tinta-2); font-size: .82rem; text-decoration: none; }
.responder a { color: var(--tinta-2); font: 600 .85rem var(--f-titulo); text-decoration: none; }
.responder a:hover { color: var(--tinta); }
.pendiente { color: var(--aviso-t); font-size: .9rem; }
.comment-respond { margin-top: 32px; }
.comment-reply-title { margin: 0 0 12px; font-size: 1.15rem; display: flex; justify-content: space-between; gap: 12px; }
.comment-reply-title small a { font-size: .85rem; color: var(--tinta-2); }
.form-comentario { margin-top: 0; }
.form-comentario textarea, .form-comentario input[type="text"], .form-comentario input[type="email"] { width: 100%; font: 1rem var(--f-titulo); padding: 12px 14px; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); color: var(--tinta); }
.form-comentario .form-submit { margin: 0; display: flex; justify-content: flex-end; }
.form-comentario .comment-form-cookies-consent { display: flex; gap: 8px; align-items: center; font-size: .85rem; color: var(--tinta-2); }
.comentarios .hilo > li.comment { padding: 20px 0; border-bottom: 1px solid var(--linea); }
.logged-in-as { font-size: .85rem; color: var(--tinta-2); }

/* =====================================================================
   Compatibilidad con artículos viejos (sin tocar el contenido guardado)
   ===================================================================== */
.prosa img { border-radius: 8px; }
.prosa .aligncenter, .prosa .wp-block-image.aligncenter, .prosa figure.aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.prosa .alignleft { float: left; margin: .3em 1.2em .8em 0; }
.prosa .alignright { float: right; margin: .3em 0 .8em 1.2em; }
.prosa .wp-block-image { margin: 1.8em 0; }
.prosa .wp-caption, .prosa figure { max-width: 100%; }
.prosa .wp-caption-text, .prosa figcaption, .prosa .wp-element-caption { font: .85rem var(--f-titulo); color: var(--tinta-2); text-align: center; margin-top: 8px; }
.prosa iframe { border: 0; border-radius: 10px; }
.prosa .wp-block-embed__wrapper { position: relative; }
.prosa .centrar-videos-youtube, .prosa .centrar { text-align: center; }
.prosa .wp-block-spacer { height: 16px !important; }
.prosa hr, .prosa .wp-block-separator { border: 0; border-top: 1px solid var(--linea); margin: 2.5em 0; }
.prosa blockquote:not(.aviso) { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--linea); color: var(--tinta-2); font-style: italic; }
.prosa .MsoNormal, .prosa .NormalAndroid { margin: 0 0 1.3em; }
.prosa pre:not(.codigo pre):not(.terminal pre) { overflow-x: auto; font: .84rem/1.65 var(--f-mono); background: var(--codigo-fondo); border: 1px solid var(--linea); border-radius: 12px; padding: 16px 18px; }
img.latex { vertical-align: middle; border-radius: 0; }
html[data-modo="oscuro"] .prosa img.latex { filter: invert(.9); }
/* Cajas de Bootstrap (bs-callout) como avisos */
.prosa .bs-callout { margin: 1.8em 0; padding: 16px 20px; border-radius: 12px; background: var(--nota-f); font-size: .94em; line-height: 1.6; border: 0; }
.prosa .bs-callout > :last-child { margin-bottom: 0; }
.prosa .bs-callout h4, .prosa .bs-callout > strong:first-child { display: block; margin: 0 0 6px; font: 700 .8rem/1.2 var(--f-titulo); text-transform: uppercase; letter-spacing: .06em; color: var(--nota-t); }
.prosa .bs-callout-warning { background: var(--aviso-f); } .prosa .bs-callout-warning h4 { color: var(--aviso-t); }
.prosa .bs-callout-danger { background: var(--peligro-f); } .prosa .bs-callout-danger h4 { color: var(--peligro-t); }
.prosa .bs-callout-success { background: var(--tip-f); } .prosa .bs-callout-success h4 { color: var(--tip-t); }
.prosa .bs-callout-info, .prosa .bs-callout-primary { background: var(--nota-f); }
/* Grupos con fondo (avisos de mdpress hasta que emita clases propias) */
.prosa .wp-block-group.has-background { border-radius: 12px; padding: 16px 20px !important; margin: 1.8em 0; }
.prosa .wp-block-group.has-background > :last-child, .prosa .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
html[data-modo="oscuro"] .prosa .wp-block-group.has-background { background-color: var(--fondo-suave) !important; color: var(--tinta) !important; }
html[data-modo="oscuro"] .prosa .has-text-color:not(.wp-block-button__link) { color: inherit !important; }
/* Bloques de columnas y botones del editor */
.prosa .wp-block-columns { display: flex; gap: 24px; flex-wrap: wrap; margin: 1.6em 0; }
.prosa .wp-block-column { flex: 1 1 240px; min-width: 0; }
.prosa .wp-block-button__link { display: inline-block; padding: 10px 18px; border-radius: 99px; background: var(--tinta); color: var(--fondo); text-decoration: none; font: 700 .95rem var(--f-titulo); }

/* Tutor LMS: que herede letra y colores del tema */
.tutor-wrap, .tutor-course-listing-item, .tutor-dashboard { font-family: var(--f-titulo); }
html[data-modo="oscuro"] .tutor-wrap, html[data-modo="oscuro"] .tutor-dashboard { color: var(--tinta); }
.serie-movil .serie-nombre { display: none; }
/* Página de vídeos: miniatura pulsable que se cambia por el reproductor */
.tarjeta-video .imagen { border: 0; padding: 0; cursor: pointer; width: 100%; display: block; }
.tarjeta-video .imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarjeta-video .imagen:hover .play { background: var(--acento); }
.tarjeta-video .duracion { position: absolute; right: 8px; bottom: 8px; background: rgb(0 0 0 / .75); color: #fff; font: 600 .75rem var(--f-titulo); padding: 2px 6px; border-radius: 4px; }
.video-iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; margin-bottom: 6px; }
.tarjeta-video h3 { font-size: 1.02rem; }
.tarjeta-video .leer { font-size: .88rem; font-weight: 600; color: var(--acento); text-decoration: none; }
.sin-imagen.es-icono img { width: auto; height: 78%; max-width: 70%; object-fit: contain; border-radius: 0; }
.recientes .sin-imagen.es-icono img { height: 86%; }
/* Repositorio de GitHub del artículo: píldora arriba y cuadro al final (estilo GitHub, siempre oscuro) */
.pildora-repo { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 6px 12px 6px 10px; border-radius: 99px; background: var(--fondo-suave); border: 1px solid var(--linea); font: 600 .85rem var(--f-titulo); text-decoration: none; color: var(--tinta); }
.pildora-repo svg { width: 16px; height: 16px; }
.pildora-repo:hover { border-color: var(--tinta-2); }
.repo { margin: 40px 0 0; padding: 22px 24px; border-radius: 14px; background: #0d1117; color: #e6edf3; border: 1px solid #30363d; display: grid; gap: 12px; }
.repo-cab { display: flex; align-items: center; gap: 10px; color: #8b949e; font: 600 .78rem var(--f-titulo); text-transform: uppercase; letter-spacing: .07em; }
.repo-cab svg { width: 22px; height: 22px; color: #e6edf3; }
.site a.repo-nombre { color: #58a6ff; text-decoration: none; font: 1.25rem var(--f-mono); word-break: break-word; }
.repo-nombre strong { font-weight: 700; }
.repo-nombre:hover strong { text-decoration: underline; }
.repo p { margin: 0; color: #c9d1d9; }
.repo-datos { display: flex; flex-wrap: wrap; gap: 6px 18px; color: #8b949e; font-size: .88rem; }
.repo-datos span { display: inline-flex; align-items: center; gap: 6px; }
.repo-datos .punto { width: 10px; height: 10px; border-radius: 50%; background: #f1e05a; }
.repo-datos code { font-family: var(--f-mono); font-size: .85em; color: #e6edf3; }
.repo-clone { display: flex; align-items: center; gap: 6px; background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 4px 4px 4px 12px; min-width: 0; }
.repo-clone code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: .82rem var(--f-mono); color: #e6edf3; }
.repo-clone button { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; color: #8b949e; cursor: pointer; }
.repo-clone button:hover { background: #30363d; color: #fff; }
.repo-clone svg { width: 16px; height: 16px; }
.site a.repo-boton { justify-self: start; background: #238636; color: #fff; border-radius: 8px; }
/* Enlaces a GitHub dentro del texto, con su icono */
.prosa a[href^="https://github.com/"]::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .25em; vertical-align: -.08em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.53-1.33-1.28-1.69-1.28-1.69-1.05-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.17 1.18a11 11 0 0 1 5.78 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.83 1.19 3.09 0 4.41-2.69 5.38-5.25 5.67.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .5Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.53-1.33-1.28-1.69-1.28-1.69-1.05-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.17 1.18a11 11 0 0 1 5.78 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.83 1.19 3.09 0 4.41-2.69 5.38-5.25 5.67.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .5Z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Iconos de categoría: los SVG ya vienen encuadrados para el círculo (82 % del radio) */
.cat .circ img, .tres .circ img { width: 100%; height: 100%; }
/* Botón de publicar comentario: tamaño normal, a la derecha, junto al captcha */
.form-comentario .form-submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.form-comentario .form-submit .boton, .form-comentario #submit { flex: none; height: auto; align-self: center; padding: 10px 20px; border-radius: 99px; }
.form-comentario .cf-turnstile, .form-comentario .sct-turnstile { margin-right: auto; }
.form-comentario .form-submit br.cf-turnstile-br { display: none; }
/* Icono propio del artículo dentro de la marca: ocupa todo el círculo */
.marca img.icono-art { width: 100% !important; height: 100% !important; border-radius: 50%; object-fit: cover; }
/* Píldora de GitHub en la firma, centrada entre autor y compartir */
.firma .pildora-repo { margin: 0 auto; }
.firma .acciones-art { margin-left: 0; }
.firma:not(:has(.pildora-repo)) .acciones-art { margin-left: auto; }
@container (max-width: 600px) { .firma .pildora-repo { order: 3; margin: 4px 0 0; } .firma .pildora-repo span { display: none; } .firma .pildora-repo { padding: 7px; } }
/* Botón de GitHub dentro del texto ([github] o un enlace cuyo texto es la URL) */
.site .prosa a.boton-github { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 10px 16px; border-radius: 10px; background: #0d1117; color: #e6edf3; text-decoration: none; font: 600 .95rem var(--f-titulo); border: 1px solid #30363d; vertical-align: middle; }
.site .prosa a.boton-github::before { display: none; }
.boton-github svg { width: 20px; height: 20px; flex: none; }
.boton-github .ruta { font: .85rem var(--f-mono); color: #8b949e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boton-github .ruta b { color: #58a6ff; font-weight: 600; }
.site .prosa a.boton-github:hover { border-color: #8b949e; }
/* Reproductor grande de la página de vídeos */
.reproductor { margin: 8px 0 40px; display: grid; gap: 12px; }
.reproductor-marco { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; max-width: 1100px; width: 100%; }
.reproductor-marco .video-iframe { width: 100%; height: 100%; border-radius: 0; margin: 0; }
.reproductor-portada { all: unset; cursor: pointer; display: block; position: absolute; inset: 0; }
.reproductor-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reproductor-portada .play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; background: rgb(0 0 0 / .65); }
.reproductor-portada .play::after { content: ""; position: absolute; left: 33px; top: 25px; border-left: 26px solid #fff; border-top: 17px solid transparent; border-bottom: 17px solid transparent; }
.reproductor-portada:hover .play { background: var(--acento); }
.reproductor-portada:focus-visible { outline: 3px solid var(--acento); outline-offset: -3px; }
.reproductor-info h2 { margin: 0 0 4px; font-size: 1.35rem; }
.tarjeta-video.sonando .imagen { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 10px; }
.site .form-comentario input[type="submit"] { width: auto; flex: none; border: 0; cursor: pointer; font: 700 .95rem var(--f-titulo); background: var(--tinta); color: var(--fondo); padding: 11px 22px; border-radius: 99px; }
/* Glifo del icono del artículo (sin su círculo) sobre el círculo de color de la categoría */
.marca img.glifo { width: 78% !important; height: 78% !important; object-fit: contain; border-radius: 0; }
.sin-imagen.es-icono img.glifo { height: 70%; max-width: 60%; }
/* La marca de las tarjetas crece al pasar el ratón, para ver bien el icono */
.sobre-imagen.marca { transform-origin: left bottom; transition: transform .2s ease, box-shadow .2s ease; z-index: 3; }
.site a.sobre-imagen.marca:hover, .site a.sobre-imagen.marca:focus-visible { transform: scale(2.4); box-shadow: 0 0 0 2px var(--fondo), 0 6px 18px rgb(0 0 0 / .25); }
.cats-art .marca { transform-origin: left center; transition: transform .2s ease; }
.site .cats-art a.marca:hover { transform: scale(2); }
/* Menú de la cabecera: más grande arriba del todo, encoge con el logo (que sigue siendo lo más grande) */
.menu { gap: 22px; }
.menu a { font-size: 1.12rem; transition: font-size .2s; }
.compacta .menu { gap: 18px; }
.compacta .menu a { font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .sobre-imagen.marca, .menu a { transition: none; } }
/* Glifo recortado: ocupa el círculo como los iconos de categoría. La marca se recorta en círculo
   (también al crecer), y el borde blanco va por dentro para que no lo corte el recorte. */
.marca img.glifo { width: 66% !important; height: 66% !important; }
.sin-imagen.es-icono img.glifo { height: 62%; max-width: 62%; }
.marca { clip-path: circle(50%); }
.sobre-imagen.marca { box-shadow: inset 0 0 0 2px var(--fondo); }
.site a.sobre-imagen.marca:hover, .site a.sobre-imagen.marca:focus-visible { box-shadow: inset 0 0 0 1.5px var(--fondo); }
/* En la cabecera del artículo la marca crece progresivamente y solo empuja a los lados (el texto
   de la categoría), no hacia abajo: la fila mantiene su alto y el título no se mueve. */
.cats-art .marca { width: 30px; height: 30px; transform-origin: left center; transition: transform .2s ease, margin-right .2s ease; }
.site .cats-art a.marca:hover, .site .cats-art a.marca:focus-visible { transform: scale(2.1); margin-right: 34px; position: relative; z-index: 3; }
/* Glifo del icono del artículo: un poco más grande, como los iconos de categoría */
.marca img.glifo { width: 70% !important; height: 70% !important; }
/* Marca: el borde blanco es un borde redondo (antes una sombra interior que dejaba un cuadrado con
   muescas al crecer) y el glifo es el fondo del círculo, sin <img> dentro. */
.marca, .sobre-imagen.marca, .site a.sobre-imagen.marca:hover, .site a.sobre-imagen.marca:focus-visible { box-shadow: none; border-radius: 50% !important; }
.sobre-imagen.marca { border: 2px solid var(--fondo); }
.marca.con-glifo { background: var(--glifo) center / 70% no-repeat, var(--g); }
/* Página de redirección (p. ej. /ramon → CV) */
.redireccion { min-height: 100vh; display: grid; place-items: center; background: var(--fondo-suave); }
.salto { padding: 24px 16px; width: 100%; display: grid; place-items: center; }
.salto-tarjeta { width: min(420px, 100%); background: var(--fondo); border: 1px solid var(--linea); border-radius: 20px; padding: 36px 28px 24px; text-align: center; box-shadow: var(--sombra); display: grid; justify-items: center; gap: 6px; }
.salto-foto { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--fondo), 0 0 0 6px var(--linea); margin-bottom: 8px; }
.salto h1 { margin: 0; font-size: 1.6rem; letter-spacing: -.01em; }
.salto-rol { margin: 0; color: var(--tinta-2); font-size: .95rem; max-width: 32ch; }
.salto-texto { margin: 18px 0 4px; font-weight: 600; }
.salto-barra { width: 100%; height: 4px; border-radius: 99px; background: var(--linea); overflow: hidden; margin-bottom: 16px; }
.salto-barra span { display: block; height: 100%; width: 0; background: var(--acento); animation: salto-avance linear forwards; }
@keyframes salto-avance { to { width: 100%; } }
.salto-web { margin-top: 18px; opacity: .8; }
.salto-web img { height: 34px; width: auto; }
html[data-modo="oscuro"] .salto-web img { filter: drop-shadow(0 0 .6px #fff) drop-shadow(0 0 .6px #fff); }
@media (prefers-reduced-motion: reduce) { .salto-barra span { animation: none; width: 100%; } }
/* Fotos del equipo: crecen al pasar el ratón */
.persona img, .caja-autor img, .firma img, .colaboradores img, .comentario-cab img.avatar { transition: transform .2s ease; position: relative; z-index: 1; }
.persona img:hover, .caja-autor img:hover { transform: scale(1.6); z-index: 4; box-shadow: 0 6px 18px rgb(0 0 0 / .25); }
.firma img:hover, .colaboradores img:hover, .comentario-cab img.avatar:hover { transform: scale(2); z-index: 4; box-shadow: 0 4px 12px rgb(0 0 0 / .25); }
@media (prefers-reduced-motion: reduce) { .persona img, .caja-autor img, .firma img, .colaboradores img { transition: none; } }
.marca.con-glifo { background-size: 82%, auto; }
/* Glifo en una capa propia para poder darle una sombra leve que siga su silueta
   (lo separa del círculo sea cual sea el color del dibujo). */
.marca.con-glifo { background: var(--g); }
.marca:not(.sobre-imagen) { position: relative; }
.marca.con-glifo::after { content: ""; position: absolute; inset: 9%; background: var(--glifo) center / contain no-repeat; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .16)); pointer-events: none; }
/* Cuadro de comentario: el lector puede estirarlo a su gusto (asa en la esquina) */
.editor-area { resize: vertical; overflow: auto; max-height: none; min-height: 130px; height: 160px; }
.form-comentario textarea { resize: vertical; }
/* Presentación de la serie (artículo índice): arriba del minimapa, con icono de libro en vez de número */
.serie li.indice-serie a b { border-style: dashed; }
.serie li.indice-serie a b svg { width: 13px; height: 13px; }
.serie li.indice-serie a span { font-style: italic; }
.serie li.indice-serie.actual a b { border-style: solid; }
/* Transición suave entre páginas (View Transitions entre documentos): un fundido corto en vez del
   parpadeo. Los navegadores que no lo soportan cambian de página como siempre. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease; }
.cabecera { view-transition-name: cabecera; }   /* la cabecera se queda quieta, solo cambia el contenido */
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Barra de desplazamiento siempre visible, también en las páginas cortas: todas tienen el mismo ancho
   y la cabecera no salta al cambiar de página. Pista y pulgar con los colores del tema. */
html { overflow-y: scroll; scrollbar-color: #c4c4c0 #f0f0ee; }
html[data-modo="oscuro"] { scrollbar-color: #45454a #1e1e21; color-scheme: dark; }
.buscador-titulo { padding: 6px 12px 2px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
/* Separación propia de la caja de autor (sin serie no hay botones anterior/siguiente que la separen) */
.etiquetas + .caja-autor, .licencia + .caja-autor { margin-top: 32px; }

/* =====================================================================
   Temas de color del código (elegibles en «Aa»). «Jarroba» sigue al modo de la página.
   Variables: fondo, texto, palabras clave, cadenas, comentarios, números, funciones, variables,
   tipos, atributos, etiquetas, puntuación.
   ===================================================================== */
.hljs-type, .hljs-class .hljs-title, .hljs-title.class_ { color: var(--hl-tipo, var(--hl-var)); }
.hljs-attr, .hljs-attribute, .hljs-property { color: var(--hl-attr, var(--hl-str)); }
.hljs-built_in, .hljs-builtin-name { color: var(--hl-builtin, var(--hl-kw)); }
.hljs-name, .hljs-tag, .hljs-selector-class, .hljs-selector-id { color: var(--hl-tag, var(--hl-fn)); }
.hljs-regexp, .hljs-char.escape_ { color: var(--hl-regex, var(--hl-str)); }
.hljs-punctuation, .hljs-operator { color: var(--hl-punt, inherit); }
.hljs-meta, .hljs-meta .hljs-keyword { color: var(--hl-meta, var(--hl-com)); font-style: normal; }
html[data-tema] .site .codigo pre { color: var(--hl-txt, var(--tinta)); }
html[data-tema="github"] .site .codigo { --codigo-fondo: #f6f8fa; --linea: #d0d7de; --hl-txt: #1f2328; --hl-kw: #cf222e; --hl-str: #0a3069; --hl-com: #6e7781; --hl-num: #0550ae; --hl-fn: #8250df; --hl-var: #953800; --hl-tipo: #953800; --hl-attr: #0550ae; --hl-builtin: #0550ae; --hl-tag: #116329; --hl-meta: #6e7781; --tinta-2: #57606a; --fondo: #fff; }
html[data-tema="github-oscuro"] .site .codigo { --codigo-fondo: #0d1117; --linea: #30363d; --hl-txt: #e6edf3; --hl-kw: #ff7b72; --hl-str: #a5d6ff; --hl-com: #8b949e; --hl-num: #79c0ff; --hl-fn: #d2a8ff; --hl-var: #ffa657; --hl-tipo: #ffa657; --hl-attr: #79c0ff; --hl-builtin: #79c0ff; --hl-tag: #7ee787; --hl-meta: #8b949e; --tinta-2: #8b949e; --tinta: #e6edf3; --fondo: #161b22; }
html[data-tema="one-dark"] .site .codigo { --codigo-fondo: #282c34; --linea: #3b4048; --hl-txt: #abb2bf; --hl-kw: #c678dd; --hl-str: #98c379; --hl-com: #5c6370; --hl-num: #d19a66; --hl-fn: #61afef; --hl-var: #e06c75; --hl-tipo: #e5c07b; --hl-attr: #d19a66; --hl-builtin: #56b6c2; --hl-tag: #e06c75; --hl-meta: #61afef; --tinta-2: #7f848e; --tinta: #abb2bf; --fondo: #21252b; }
html[data-tema="dracula"] .site .codigo { --codigo-fondo: #282a36; --linea: #44475a; --hl-txt: #f8f8f2; --hl-kw: #ff79c6; --hl-str: #f1fa8c; --hl-com: #6272a4; --hl-num: #bd93f9; --hl-fn: #50fa7b; --hl-var: #ffb86c; --hl-tipo: #8be9fd; --hl-attr: #50fa7b; --hl-builtin: #8be9fd; --hl-tag: #ff79c6; --hl-meta: #6272a4; --tinta-2: #8a8fb3; --tinta: #f8f8f2; --fondo: #21222c; }
html[data-tema="monokai"] .site .codigo { --codigo-fondo: #272822; --linea: #3e3d32; --hl-txt: #f8f8f2; --hl-kw: #f92672; --hl-str: #e6db74; --hl-com: #75715e; --hl-num: #ae81ff; --hl-fn: #a6e22e; --hl-var: #fd971f; --hl-tipo: #66d9ef; --hl-attr: #a6e22e; --hl-builtin: #66d9ef; --hl-tag: #f92672; --hl-meta: #75715e; --tinta-2: #90908a; --tinta: #f8f8f2; --fondo: #1e1f1c; }
html[data-tema="solarized"] .site .codigo { --codigo-fondo: #fdf6e3; --linea: #eee8d5; --hl-txt: #657b83; --hl-kw: #859900; --hl-str: #2aa198; --hl-com: #93a1a1; --hl-num: #d33682; --hl-fn: #268bd2; --hl-var: #b58900; --hl-tipo: #b58900; --hl-attr: #268bd2; --hl-builtin: #cb4b16; --hl-tag: #268bd2; --hl-meta: #93a1a1; --tinta-2: #93a1a1; --tinta: #586e75; --fondo: #eee8d5; }
html[data-tema]:not([data-tema="pagina"]) .site .codigo .codigo-cab { color: var(--tinta-2); border-bottom-color: var(--linea); }
html[data-tema]:not([data-tema="pagina"]) .site .codigo .codigo-cab button { color: var(--tinta-2); }
/* Selector de temas en «Aa»: rejilla con una muestra de colores de cada tema */
.temas-codigo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.temas-codigo button { display: flex; align-items: center; gap: 8px; justify-content: flex-start; text-align: left; padding: 7px 8px; }
.temas-codigo .muestra { display: inline-flex; gap: 2px; padding: 3px; border-radius: 5px; background: var(--m0, #f6f6f4); flex: none; }
.temas-codigo .muestra i { width: 7px; height: 12px; border-radius: 2px; }
.temas-codigo .muestra i:nth-child(1) { background: var(--m1); } .temas-codigo .muestra i:nth-child(2) { background: var(--m2); } .temas-codigo .muestra i:nth-child(3) { background: var(--m3); }
[data-tema-muestra="pagina"] { --m0: #f6f6f4; --m1: #a626a4; --m2: #50a14f; --m3: #4078f2; }
[data-tema-muestra="oscuro"] { --m0: #1e1e21; --m1: #c792ea; --m2: #addb67; --m3: #82aaff; }
[data-tema-muestra="github"] { --m0: #f6f8fa; --m1: #cf222e; --m2: #0a3069; --m3: #8250df; }
[data-tema-muestra="github-oscuro"] { --m0: #0d1117; --m1: #ff7b72; --m2: #a5d6ff; --m3: #d2a8ff; }
[data-tema-muestra="one-dark"] { --m0: #282c34; --m1: #c678dd; --m2: #98c379; --m3: #61afef; }
[data-tema-muestra="dracula"] { --m0: #282a36; --m1: #ff79c6; --m2: #f1fa8c; --m3: #50fa7b; }
[data-tema-muestra="monokai"] { --m0: #272822; --m1: #f92672; --m2: #e6db74; --m3: #a6e22e; }
[data-tema-muestra="solarized"] { --m0: #fdf6e3; --m1: #859900; --m2: #2aa198; --m3: #268bd2; }

/* Panel «Aa» compacto: cada ajuste en una fila (etiqueta | opciones), temas de código como muestras */
.lectura { width: 380px; gap: 8px; padding: 14px 16px; }
.lectura > div:not(.lectura-cab):not(.solo-articulo), .lectura .solo-articulo > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 10px; }
.lectura .solo-articulo { display: grid; gap: 8px; }
.lectura .solo-articulo > div:has(.temas-codigo) { grid-template-columns: 1fr; gap: 6px; }
.lectura h5 { margin: 0; font-size: .7rem; letter-spacing: .05em; }
.lectura .segmentado button { padding: 5px 4px; font-size: .78rem; }
.lectura-grupo { margin: 4px 0 -2px; font: 700 .7rem var(--f-titulo); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); border-top: 1px solid var(--linea); padding-top: 10px; }
.temas-codigo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }
.temas-codigo button { display: flex; align-items: center; gap: 8px; justify-content: flex-start; padding: 5px 8px; border-radius: 8px; border: 2px solid transparent; font-size: .78rem; }
.temas-codigo button[aria-pressed="true"] { border-color: var(--tinta); box-shadow: none; }
.temas-codigo .muestra { padding: 4px; }
.temas-codigo .muestra i { width: 6px; height: 14px; }
.lectura .nota-lectura { font-size: .72rem; }
@container (max-width: 460px) { .lectura { width: calc(100vw - 16px); } }

/* El código se ve tal cual: sin ligaduras en ninguna fuente de respaldo (|- no se dibuja como ⊢). */
/* (selectores tan concretos como los que usan el atajo `font:`, que pondría las ligaduras otra vez a «normal») */
:is(.prosa, .codigo, .terminal, .editor-area, .comentario-texto, .editor-barra) :is(pre, code, kbd, samp), pre, code { font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0; }

/* Bibliografía y fuentes (inc/contenido.php): filas tranquilas, letra algo menor, URL desnudas legibles. */
.bibliografia { font-size: .9em; line-height: 1.5; }
.bibliografia :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
.bibliografia li { position: relative; margin: 0; padding: 10px 0 10px 28px; border-top: 1px solid var(--linea); text-align: left !important; }
.bibliografia li:last-child { border-bottom: 1px solid var(--linea); }
.bibliografia li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 14px; height: 14px; background: var(--tinta-2); opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E") center / contain no-repeat; }
.bibliografia li > strong:first-child { color: var(--tinta); }
.bibliografia a:has(.ref-dominio) { display: flex; min-width: 0; max-width: 100%; text-decoration: none; overflow-wrap: normal; }
.bibliografia .ref-dominio { flex: none; font-weight: 600; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 3px; }
.bibliografia a:hover .ref-dominio { text-decoration-color: currentColor; }
.bibliografia .ref-ruta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-2); font-family: var(--f-mono); font-size: .85em; padding-top: .15em; }
.bibliografia a:has(.ref-dominio)::before { content: none !important; }   /* sin el logo de GitHub: ya está el icono de la fila */
.sin-iconos .glifo .material-symbols-rounded { visibility: hidden; }   /* sin copia local de los iconos: no se enseña el nombre en texto */

/* Herramientas relacionadas al final del artículo (jarroba-core, vectores): las mismas tarjetas que la portada. */
.herr-articulo { margin: 2.2em 0 0; padding: 18px 20px; border-radius: 14px; background: var(--fondo-suave); }
.herr-articulo-titulo { margin: 0 0 12px; font: 700 .78rem/1 var(--f-titulo); text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-2); }
.herr-articulo .herr-lista { min-height: 0; }
@container (max-width: 560px) { .herr-articulo .herr-lista { grid-template-columns: 1fr; } }
.jarroba-cursos-titulo { margin: 8px 0 24px; font: 700 2rem/1.15 var(--f-titulo); letter-spacing: -.02em; }

/* Visor de imágenes del artículo (tema.js) */
.prosa img { cursor: zoom-in; }
.prosa a:not([href$=".jpg"]):not([href$=".jpeg"]):not([href$=".png"]):not([href$=".gif"]):not([href$=".webp"]):not([href$=".svg"]) img { cursor: pointer; }
html.visor-abierto { overflow: hidden; }
.visor { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; box-sizing: border-box; overflow: hidden; }
.visor:not([open]) { display: none; }
.visor::backdrop { background: rgb(0 0 0 / .7); }
.visor[open] { display: grid; grid-template-columns: 64px 1fr 64px; grid-template-rows: auto 1fr auto; align-items: center; background: rgb(12 12 14 / .94); color: #f2f2ef;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.visor-barra { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.visor-contador { margin-right: auto; padding-left: 8px; font: 600 .85rem var(--f-titulo); opacity: .8; font-variant-numeric: tabular-nums; }
.visor-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .1); color: inherit; cursor: pointer; }
.visor-btn:hover, .visor-btn:focus-visible { background: rgb(255 255 255 / .22); outline: none; }
.visor-btn svg { width: 22px; height: 22px; }
.visor-ant, .visor-sig { justify-self: center; }
.visor.una .visor-ant, .visor.una .visor-sig { visibility: hidden; }
.visor-lienzo { grid-column: 2; height: 100%; min-height: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: default; }
.visor-lienzo img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; cursor: zoom-in; background: #fff; border-radius: 4px; transform-origin: center; will-change: transform; user-select: none; -webkit-user-drag: none; }
.visor.con-zoom .visor-lienzo img { cursor: grab; }
.visor.con-zoom .visor-lienzo img:active { cursor: grabbing; }
.visor-pie { grid-column: 1 / -1; margin: 0; padding: 10px 20px 16px; text-align: center; font-size: .92rem; opacity: .85; min-height: 1.4em; }
@media (max-width: 560px) { .visor[open] { grid-template-columns: 0 1fr 0; } .visor-ant, .visor-sig { display: none; } }
.autor-total { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 99px; background: var(--fondo-suave); color: var(--tinta-2); font-size: .82rem; font-weight: 600; }