/* ==========================================================================
   Campamento · interiores.css — la hoja de estilos de las PÁGINAS INTERIORES
   ==========================================================================
   La portada tiene su propia hoja (portada/portada.css) con su capa de
   animación; las demás páginas del sitio cargan SOLO esta (más style.css,
   que trae la paleta). Una página no carga lo que no usa.

   La identidad (paleta y tipografía) vive en identidad/identidad.css, que se carga
   antes que esta hoja; aquí solo se consume. Cero Google Fonts, cero CDN.

   Regla dura heredada de la portada: la página se lee desde el primer
   pintado — en interiores la animación es mínima o ninguna.
   ========================================================================== */

:root {
  --ancho-max: 1200px;
  --barra-alto: 64px;
  --pie-tinta: var(--tinta);  /* el carbón del pie = la tinta de la identidad */
}

/* --- Reset mínimo + base (esta hoja solo carga fuera de la portada) --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; overflow-x: clip; }  /* hidden = red iOS<16; clip lo pisa */
body {
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--barra-alto);  /* la barra del sitio es fija */
}
img { max-width: 100%; height: auto; display: block; }
/* ENLACE (2026-09-10) — el gris (--violeta) no resaltaba. Base LIMA para
   todo enlace; la negrita+cursiva la lleva el enlace de TEXTO (bloque «Prosa»),
   no la navegación ni los títulos, que ya tienen su tipografía propia. */
a { color: var(--lima); text-decoration: none; }
a:hover { color: var(--texto); }
::selection { background: var(--acento); color: var(--tinta); }

/* --- Fondo de red: rejilla HUD + constelación (2026-09-05) ------------------
   El mismo lenguaje visual de la portada, ahora de fondo en TODAS las páginas.
   Capa FIJA a página completa, detrás del contenido (z-index:-1); el carbón del
   body se ve por los huecos de la rejilla. El canvas .cns-fondo lo inyecta
   portada/constelacion.js (host .fondo-red): nodos + aristas cian, solo >=1200px,
   pausa con la pestaña oculta. La rejilla (CSS) se ve en todo ancho. --- */
.fondo-red {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--reticula-rgb), 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--reticula-rgb), 0.14) 1px, transparent 1px);
  background-size: 46px 46px;
}
.fondo-red .cns-fondo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0.9;
}
@media (max-width: 1199.98px) { .fondo-red .cns-fondo { display: none; } }
@media (prefers-reduced-motion: reduce) { .fondo-red .cns-fondo { display: none; } }

h1, h2, h3 { color: var(--texto); line-height: 1.15; font-weight: 700; font-family: var(--fuente-display); }
h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.45rem, 3.5vw, 2.2rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.35rem); }

.eyebrow {
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 1rem; color: var(--violeta);
}

.contenedor { max-width: var(--ancho-max); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.contenedor-angosto { max-width: 860px; }
.contenedor-lectura { max-width: 720px; }  /* prosa larga: legales, artículos, manifiesto */

/* --- La jaula de iconos (regla del motor, 2026-08-19/20): todo icono —
   SVG o emoji— vive en un contenedor con tamaño explícito. --- */
.icono-jaula {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;  /* el emoji, si lo hay, queda enjaulado */
}
.icono-jaula svg { width: 100%; height: 100%; display: block; }

/* ==========================================================================
   La barra del sitio — [MARCA] [CTA] [☰], la misma fórmula que la portada
   en móvil. Fija arriba, en tinta, en todos los tamaños: los interiores no
   tienen panel modular y la barra ES la navegación.
   ========================================================================== */
.barra-sitio {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--barra-alto);
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
  background: var(--tinta);
}
.barra-marca {
  display: inline-flex; align-items: center;
  font-family: var(--fuente-display);
  font-weight: 800; font-size: 1.15rem; letter-spacing: 0.02em;
  color: var(--lima); text-transform: uppercase;
}
/* margin en el icono en vez de `gap`: el gap del flex caía entre las dos partes de una marca
   bicolor (son dos items flex) y abría un espacio dentro de la marca (fallo real en producción, 2026-09-05). */
.barra-iso { width: auto; height: 26px; flex: 0 0 auto; display: block; margin-right: 0.45rem; }
.barra-marca .pix { color: #fff; }
.barra-marca:hover { color: var(--lima); }
.barra-marca:hover .pix { color: #fff; }
.barra-acciones { display: flex; align-items: center; gap: 0.75rem; }
.barra-cta {
  font-size: 0.8rem; padding: 0.55em 1.1em;
  white-space: nowrap;  /* el CTA jamás se parte: la barra mide 64px */
}
@media (max-width: 359px) { .barra-cta { display: none; } }  /* teléfonos angostos: marca + menú bastan */

/* El botón del menú: tres líneas, jaula de 44px táctil. */
.barra-menu-boton {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; background: none; border: 0; cursor: pointer; padding: 0;
}
.barra-menu-linea {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--gris-claro);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.barra-menu-boton[aria-expanded="true"] .barra-menu-linea:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.barra-menu-boton[aria-expanded="true"] .barra-menu-linea:nth-child(2) { opacity: 0; }
.barra-menu-boton[aria-expanded="true"] .barra-menu-linea:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- El menú del sitio: overlay bajo la barra, las páginas en grande. --- */
.menu-sitio {
  position: fixed; inset: var(--barra-alto) 0 0 0; z-index: 99;
  background: var(--tinta);
  padding: clamp(1.5rem, 5vh, 3rem) clamp(1.25rem, 4vw, 2.5rem) 2rem;
  overflow-y: auto;
}
.menu-sitio[hidden] { display: none; }
html.menu-abierto, html.menu-abierto body { overflow: hidden; }
.menu-paginas { list-style: none; }
.menu-paginas a {
  display: block; padding: 0.55em 0;
  font-family: var(--fuente-display); font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2.2rem); letter-spacing: -0.01em;
  color: var(--lima);
}
/* Invertido el 2026-09-10, como el resto de los enlaces: lima de base y blanco
   al pasar. La página en la que estás se marca con el subrayado, no con el
   color — el color ya lo llevan todas. */
.menu-paginas a:hover { color: var(--texto); }
.menu-paginas .menu-actual a { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.menu-cta { margin-top: 2rem; }

/* ==========================================================================
   Cabecera de página + secciones
   ========================================================================== */
.pagina-cabecera { padding: clamp(2.5rem, 8vh, 5rem) 0 clamp(1.5rem, 4vh, 2.5rem); }
.pagina-cabecera .pagina-intro {
  font-size: 1.1rem; max-width: 42em; margin-top: 1.25rem;
}
.seccion-interior { padding: clamp(1.5rem, 4vh, 3rem) 0; }
.seccion-final { padding-bottom: clamp(3rem, 8vh, 5rem); }

/* Cabecera oscura (embudo, manifiesto): la página abre en tinta. */
.pagina-cabecera-tinta {
  /* transparente (2026-09-05): que se vea la rejilla+constelación del .fondo-red
     detrás del título, en vez de un bloque plano. El texto ya es claro. */
  background: transparent;
  margin-top: calc(-1 * var(--barra-alto)); padding-top: calc(var(--barra-alto) + clamp(2.5rem, 8vh, 5rem));
  padding-bottom: clamp(2rem, 6vh, 3.5rem);
}
.pagina-cabecera-tinta h1 { color: var(--acento); }
.pagina-cabecera-tinta .pagina-intro, .pagina-cabecera-tinta p { color: var(--gris-claro); }
.pagina-cabecera-tinta .eyebrow { color: var(--gris-claro); }

/* --- Prosa: el cuerpo de texto de legales, manifiesto y artículos. --- */
.prosa p, .prosa li { font-size: 1.05rem; line-height: 1.75; }
.prosa p { margin: 0 0 1.15rem; }
.prosa h2 { margin: 2.2rem 0 0.9rem; }
.prosa h3 { margin: 1.8rem 0 0.7rem; }
.prosa ul, .prosa ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.prosa ul { list-style: disc; }
.prosa li { margin-bottom: 0.4rem; }
.prosa blockquote {
  margin: 1.5rem 0; padding: 0.85rem 1.25rem;
  border-left: 3px solid var(--acento);
  background: rgba(var(--cian-rgb), 0.10);          /* cian con glow (2026-09-05) */
  box-shadow: 0 0 18px rgba(var(--cian-rgb), 0.18);
  border-radius: 0 10px 10px 0;
  font-size: 1.1rem; font-weight: 500;
}
.prosa strong { color: var(--texto); }
.prosa hr { border: 0; border-top: 1px solid var(--gris-claro); margin: 2rem 0; }

/* --- El ENLACE DE TEXTO (2026-09-10): lima, negrita y cursiva -------------
   En gris se perdía dentro del párrafo. Ahora el enlace se reconoce por tres
   señales a la vez (color + peso + cursiva), no solo por el color — que es
   además lo que pide la accesibilidad. Aplica SOLO donde el enlace va dentro
   del texto corrido; los títulos, el menú, los botones y las insignias quedan
   fuera a propósito: ya tienen su tipografía (Chakra Petch) y su color. --- */
:is(.prosa p, .prosa li, .prosa blockquote, .prosa figcaption, .prosa td, .prosa dd,
    .pagina-intro, .articulo-aviso p, .aviso-vacio p) a,
.enlace-texto {
  color: var(--lima); font-weight: 700; font-style: italic;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
:is(.prosa p, .prosa li, .prosa blockquote, .prosa figcaption, .prosa td, .prosa dd,
    .pagina-intro, .articulo-aviso p, .aviso-vacio p) a:hover,
.enlace-texto:hover {
  color: var(--texto);
}
/* Guarda: un enlace dentro de un título vive con la tipografía y el color del
   título — nunca en cursiva. Las tarjetas que ya fijan su color siguen mandando
   (su selector es más específico que este). */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit; font-weight: inherit; font-style: normal;
}

/* ==========================================================================
   Botones — el patrón de la portada, sin el rodillo (animación mínima).
   ========================================================================== */
.cta-botones { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.boton {
  display: inline-block; font-weight: 600; font-size: 1rem;
  padding: 0.85em 1.8em; border-radius: 999px;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.boton:hover { transform: translateY(-2px); }
.boton-acento { background: var(--acento); color: var(--tinta); }
.boton-acento:hover { background: var(--naranja); color: var(--tinta); }
/* Sobre fondo claro el borde va en tinta (lección de la portada, 2026-08-19);
   sobre tinta (.sobre-tinta) va claro. */
.boton-borde { border: 2px solid var(--gris-claro); color: var(--gris-claro); }
.boton-borde:hover { border-color: var(--acento); color: var(--acento); }
.sobre-tinta .boton-borde, .pagina-cabecera-tinta .boton-borde { border-color: var(--gris-claro); color: var(--gris-claro); }
.sobre-tinta .boton-borde:hover, .pagina-cabecera-tinta .boton-borde:hover { border-color: var(--acento); color: var(--acento); }

/* ==========================================================================
   Formulario de correo (el embudo): input + botón, en línea desde 560px.
   ========================================================================== */
.formulario-correo { margin: 1.75rem 0 0.75rem; }
.formulario-correo .campos { display: flex; flex-direction: column; gap: 0.75rem; }
.formulario-correo input[type="email"] {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 0.85em 1.2em; border-radius: 999px;
  border: 2px solid var(--gris-claro); background: rgba(255,255,255,0.06); color: var(--texto);
}
.formulario-correo input[type="email"]::placeholder { color: var(--gris-claro); opacity: 0.7; }
.formulario-correo input[type="email"]:focus { outline: none; border-color: var(--cian); }
.formulario-correo .boton { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.formulario-correo .nota {
  font-size: 0.85rem; margin-top: 0.85rem; opacity: 0.8;
}
@media (min-width: 560px) {
  .formulario-correo .campos { flex-direction: row; }
  .formulario-correo input[type="email"] { flex: 1 1 auto; }
  .formulario-correo .boton { flex: 0 0 auto; }
}

/* --- Lista de beneficios (newsletter y afines): check en jaula chica. --- */
.lista-beneficios { list-style: none; margin: 1.25rem 0; }
.lista-beneficios li {
  display: flex; align-items: flex-start; gap: 0.7rem;
  font-size: 1.05rem; line-height: 1.6; margin-bottom: 0.85rem;
}
.lista-beneficios .icono-jaula {
  width: 22px; height: 22px; flex: 0 0 22px; font-size: 15px;
  margin-top: 0.2em; color: var(--violeta);
}

/* --- Badges de estado (mismos nombres que la portada). --- */
.badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.3em 0.85em; border-radius: 999px; text-transform: uppercase;
}
.badge-viva         { background: var(--acento); color: var(--tinta); }
.badge-construccion { border: 1.5px solid var(--violeta); color: var(--violeta); }
.badge-cola         { border: 1.5px solid var(--texto); color: var(--texto); opacity: 0.8; }
.badge-vision       { border: 1.5px solid var(--naranja); color: var(--naranja); }
.badge-proximamente { border: 1.5px solid var(--violeta); color: var(--violeta); }
.badge-hecho        { background: var(--tinta); color: var(--acento); }
.badge-curso        { border: 1.5px solid var(--violeta); color: var(--violeta); }
.badge-camino       { border: 1.5px solid var(--naranja); color: var(--naranja); }
/* «En prueba»: en la portada va acento sobre tinta; sobre fondo claro el
   amarillo no lee como texto — aquí es relleno suave con texto en tinta. */
.badge-prueba       { border: 1.5px solid var(--texto); color: var(--texto); background: rgba(var(--lima-rgb), 0.28); }

/* ==========================================================================
   La tarjeta compartida de los índices — «una pieza, tres sitios»: la misma
   anatomía que la pista de la portada (número · tags · badge de estado ·
   título-enlace · descripción · flecha), en grid sobre fondo claro.
   El número ES información: la posición real en la cola o en el zigzag.
   ========================================================================== */
.tarjetas-indice {
  list-style: none;
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}
@media (min-width: 620px) { .tarjetas-indice { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .tarjetas-indice { grid-template-columns: repeat(3, 1fr); } }
.tarjeta-indice {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem;
  /* cian con glow (2026-09-05): sobre el azul, no gris */
  background: rgba(var(--cian-rgb), 0.10);
  border: 1px solid rgba(var(--cian-rgb), 0.35);
  box-shadow: 0 0 18px rgba(var(--cian-rgb), 0.18);
  border-radius: 14px;
  padding: 1.4rem 1.5rem 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tarjeta-indice:hover { transform: translateY(-4px); border-color: rgba(var(--cian-rgb), 0.60); box-shadow: 0 0 28px rgba(var(--cian-rgb), 0.42); }
.tarjeta-num {
  font-family: var(--fuente-display); font-weight: 800; font-size: 0.95rem;
  color: var(--violeta); letter-spacing: 0.06em;
}
.tarjeta-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tarjeta-tags span {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--texto); opacity: 0.75;
  border: 1px solid var(--gris-claro); border-radius: 999px; padding: 0.2em 0.7em;
}
.tarjeta-media { width: 100%; border-radius: 10px; overflow: hidden; }
.tarjeta-media img { width: 100%; height: 160px; object-fit: cover; }
.tarjeta-indice h3 { font-size: clamp(1.1rem, 2.4vw, 1.3rem); line-height: 1.25; }
/* El enlace de la tarjeta cubre toda la pieza: el título es el ancla real. */
/* El título de la tarjeta ES el enlace: va en lima y subrayado (2026-09-10),
   y al pasar por encima se invierte a blanco. */
.tarjeta-indice h3 a { color: var(--lima); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tarjeta-indice h3 a::after { content: ""; position: absolute; inset: 0; }
.tarjeta-indice:hover h3 a { color: var(--texto); }
.tarjeta-indice p { font-size: 0.98rem; line-height: 1.6; }
.tarjeta-flecha {
  position: absolute; top: 1.25rem; right: 1.4rem;
  font-size: 1.1rem; color: var(--violeta);
  transition: transform 0.2s ease;
}
.tarjeta-indice:hover .tarjeta-flecha { transform: translate(3px, -3px); }

/* Los grupos del blog: una ruta = un grupo, con su rótulo. */
.grupo-ruta { margin-top: 2.5rem; }
.grupo-ruta > h2 { font-size: clamp(1.25rem, 3vw, 1.7rem); margin-bottom: 0.25rem; }
.grupo-ruta > .grupo-nota { font-size: 0.95rem; opacity: 0.8; }

/* --- Los servicios: tarjeta sin enlace — icono en jaula + título + texto. --- */
.tarjetas-servicios {
  list-style: none;
  display: grid; gap: 1.25rem; grid-template-columns: 1fr;
  margin-top: 2rem;
}
@media (min-width: 620px) { .tarjetas-servicios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .tarjetas-servicios { grid-template-columns: repeat(3, 1fr); } }
.tarjeta-servicio {
  /* cian con glow (2026-09-05) */
  background: rgba(var(--cian-rgb), 0.10);
  border: 1px solid rgba(var(--cian-rgb), 0.35);
  box-shadow: 0 0 18px rgba(var(--cian-rgb), 0.18);
  border-radius: 14px;
  padding: 1.4rem 1.5rem 1.5rem;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.tarjeta-servicio:hover { transform: translateY(-4px); border-color: rgba(var(--cian-rgb), 0.60); box-shadow: 0 0 28px rgba(var(--cian-rgb), 0.42); }
.tarjeta-servicio .icono-jaula { color: var(--violeta); margin-bottom: 0.8rem; }
.tarjeta-servicio h3 { font-size: 1.15rem; margin-bottom: 0.45rem; }
.tarjeta-servicio p { font-size: 0.98rem; line-height: 1.6; }

/* ==========================================================================
   Manifiesto — la cita fundacional y los principios numerados.
   ========================================================================== */
.manifiesto-cita {
  font-family: var(--fuente-display);
  font-size: clamp(1.25rem, 3.2vw, 1.8rem); font-weight: 600; line-height: 1.45;
  color: var(--gris-claro);
  border-left: 3px solid var(--acento);
  padding-left: clamp(1rem, 3vw, 1.5rem);
  margin-top: 1.75rem; max-width: 34em;
}
.principios { list-style: none; }
.principios li {
  display: flex; gap: clamp(0.9rem, 3vw, 1.5rem);
  padding: 1.6rem 0; border-bottom: 1px solid var(--gris-claro);
}
.principios li:last-child { border-bottom: 0; }
.principio-num {
  font-family: var(--fuente-display); font-weight: 800;
  font-size: clamp(1.4rem, 3.5vw, 1.8rem); line-height: 1.15;
  color: var(--violeta); flex: 0 0 2.6em;
}
.principios h2 { font-size: clamp(1.15rem, 2.6vw, 1.45rem); margin-bottom: 0.5rem; }
.principios p { font-size: 1.05rem; line-height: 1.7; }
.manifiesto-firma { margin-top: 2.5rem; font-style: italic; font-weight: 500; }

/* ==========================================================================
   Quién soy — retrato, línea de hitos y formaciones.
   ========================================================================== */
.quien-grid { display: grid; gap: 1.5rem; }
.quien-retrato { max-height: 320px; width: auto; margin-top: 0.5rem; }
@media (min-width: 900px) {
  .quien-grid { grid-template-columns: 1fr auto; gap: 2.5rem; align-items: end; }
  .quien-retrato { max-height: 400px; margin: 0; }
}
.hitos-lista {
  list-style: none; margin-top: 1.5rem;
  border-left: 2px solid var(--gris-claro); padding-left: 1.5rem;
}
.hitos-lista li { position: relative; padding-bottom: 1.75rem; }
.hitos-lista li::before {
  content: ""; position: absolute; left: calc(-1.5rem - 7px); top: 0.4em;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--violeta); border: 2px solid var(--fondo);
}
.hitos-lista li:last-child { padding-bottom: 0.25rem; }
.hitos-lista h3 { margin-bottom: 0.4rem; }
.hitos-lista p { font-size: 1.02rem; line-height: 1.65; }
.hitos-lista .badge { margin-top: 0.7rem; }
.formaciones { list-style: none; margin-top: 1rem; }
.formaciones li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
  padding: 0.85rem 0; border-bottom: 1px solid var(--gris-claro);
  font-size: 1.02rem;
}
.formaciones li:last-child { border-bottom: 0; }
.formacion-estado { color: var(--violeta); font-weight: 600; font-size: 0.9rem; white-space: nowrap; }

/* /quien-soy · la historia (el giro que unió los mundos) — 2026-09-12 */
.quien-historia p { font-size: clamp(1.05rem, 2.4vw, 1.2rem); line-height: 1.7; margin-bottom: 1rem; }
.quien-historia p:last-child { margin-bottom: 0; }
.quien-historia a { font-weight: 600; color: var(--lima); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.quien-historia a:hover { color: var(--texto); }

/* /quien-soy · por qué construí el sistema — razones numeradas — 2026-09-12 */
.porque-intro { font-size: 1.08rem; line-height: 1.7; margin-bottom: 1.75rem; max-width: 62ch; }
.razones { list-style: none; counter-reset: razon; display: grid; gap: 1.1rem; margin-top: 0.5rem; }
.razones li {
  counter-increment: razon;
  position: relative;
  padding: 1.15rem 1.35rem 1.15rem 3.5rem;
  background: rgba(var(--cian-rgb), 0.06);       /* mismo cian tenue que el hilo */
  border: 1px solid rgba(var(--cian-rgb), 0.28);
  border-radius: 12px;
}
.razones li::before {
  content: counter(razon);
  position: absolute; left: 1.25rem; top: 1.05rem;
  font-size: 1.25rem; font-weight: 800; color: var(--lima); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.razones h3 { margin: 0 0 0.35rem; font-size: clamp(1.05rem, 2.4vw, 1.2rem); }
.razones p { font-size: 1.02rem; line-height: 1.65; margin: 0; }

/* /quien-soy · el foso (la mezcla difícil de copiar) y «sigue el hilo» (2026-09-09) */
.seccion-foso .foso-texto {
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.5;
  font-weight: 500;
  margin: 0;
  padding-left: 1.3rem;
  border-left: 3px solid var(--lima);
}
.seccion-hilo h2 { margin-bottom: 1rem; }
.seccion-hilo .hilo-enlaces {
  background: rgba(var(--cian-rgb), 0.10);          /* mismo glow cian que los bloques del blog */
  border: 1px solid rgba(var(--cian-rgb), 0.35);
  box-shadow: 0 0 18px rgba(var(--cian-rgb), 0.18);
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
}
.seccion-hilo .hilo-enlaces li { margin-bottom: 0.55rem; padding-left: 1.35rem; position: relative; }
.seccion-hilo .hilo-enlaces li:last-child { margin-bottom: 0; }
.seccion-hilo .hilo-enlaces li::before {
  content: "\2192"; position: absolute; left: 0; top: 0; color: var(--cian); font-weight: 700;
}
/* Invertido el 2026-09-10: antes blanco con hover lima; ahora lima de base
   —el enlace se ve sin tener que pasar por encima— y blanco al pasar. */
.seccion-hilo .hilo-enlaces a { font-weight: 600; color: var(--lima); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.seccion-hilo .hilo-enlaces a:hover { color: var(--texto); }

/* ==========================================================================
   El artículo — la línea de ruta, el aviso de próximamente y el hilo.
   El aviso es un ESTADO, no una página: misma URL, misma plantilla; el día
   del cierre el contenido sustituye al aviso.
   ========================================================================== */
.articulo-linea-ruta {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--violeta); margin-bottom: 1rem;
}
.articulo-fecha { font-size: 0.9rem; opacity: 0.75; margin-top: 0.75rem; }
.articulo-aviso, .aviso-vacio {
  /* cian con glow (2026-09-05); dashed en cian = sigue leyéndose «pendiente/vacío» */
  background: rgba(var(--cian-rgb), 0.10);
  border: 2px dashed rgba(var(--cian-rgb), 0.50);
  box-shadow: 0 0 18px rgba(var(--cian-rgb), 0.18);
  border-radius: 14px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: 1rem;
}
.articulo-aviso h2, .aviso-vacio h2 { font-size: clamp(1.2rem, 2.8vw, 1.5rem); margin: 0.9rem 0 0.6rem; }
.articulo-aviso p, .aviso-vacio p { font-size: 1.02rem; line-height: 1.7; }
.articulo-aviso .boton, .aviso-vacio .boton { margin-top: 1.25rem; }

/* El hilo: el carril propio primero, el cruce después, el camino al final.
   Nunca enlaces planos — cada lector encuentra el suyo por la etiqueta. */
.hilo { margin-top: clamp(2rem, 5vh, 3rem); display: grid; gap: 1.25rem; }
.hilo-bloque {
  background: rgba(var(--cian-rgb), 0.10);          /* cian con glow (2026-09-05) */
  border: 1px solid rgba(var(--cian-rgb), 0.35);
  box-shadow: 0 0 18px rgba(var(--cian-rgb), 0.18);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
}
.hilo-rotulo {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--violeta); margin-bottom: 0.75rem;
}
.hilo-enlaces { list-style: none; }
.hilo-enlaces li { margin-bottom: 0.5rem; }
.hilo-enlaces li:last-child { margin-bottom: 0; }
.hilo-enlaces a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hilo-nota { display: block; font-size: 0.82rem; opacity: 0.75; }
@media (min-width: 820px) { .hilo { grid-template-columns: repeat(3, 1fr); } }

/* Blog nativo (v2.15): la navegación por categorías del índice y la paginación
   de índices/archivos. Misma paleta que las tarjetas. */
.blog-categorias {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.4rem;
}
.blog-categorias a {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--gris-claro);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--texto);
  transition: border-color 0.2s, color 0.2s;
}
.blog-categorias a:hover { border-color: rgba(var(--cian-rgb), 0.60); color: var(--lima); }

.paginacion { margin-top: clamp(2rem, 5vh, 3rem); }
.paginacion .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}
.paginacion .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--gris-claro);
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--texto);
  transition: border-color 0.2s, color 0.2s;
}
.paginacion a.page-numbers:hover { border-color: rgba(var(--cian-rgb), 0.60); color: var(--lima); }
.paginacion .page-numbers.current { border-color: var(--lima); color: var(--lima); font-weight: 600; }
.paginacion .page-numbers.dots { border-color: transparent; }

/* ==========================================================================
   El pie del sitio — el ÍNDICE del sitio. Mismo asiento visual que el de la
   portada: violeta oscuro plano. Cada página que se enciende se
   añade a datos/sitio.php y aparece aquí sola.
   ========================================================================== */
.pie-sitio {
  position: relative; overflow: hidden;
  background-color: var(--pie-tinta);
  padding: clamp(3rem, 8vh, 5rem) 0 2rem;
  margin-top: clamp(3rem, 8vh, 5rem);
}
/* (2026-09-05) Grano de ruido retirado de toda la web: el .pie-sitio::after
   —que solo pintaba grano— se eliminó. */
.pie-sitio > * { position: relative; z-index: 1; }
.pie-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.pie-firma {
  font-family: var(--fuente-display);
  color: var(--acento); font-size: 1.15rem; font-weight: 700;
  letter-spacing: -0.01em; margin: 0;
}
.pie-redes {
  list-style: none; padding: 0; margin: 0;
  display: flex; align-items: center; gap: 1.15rem;
}
.pie-redes a {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lima);   /* iconos de redes en lima intenso (2026-09-05) */
  transition: color .3s ease, transform .3s ease, filter .3s ease;
}
.pie-redes a svg { width: 20px; height: 20px; display: block; }
.pie-redes a:hover { color: var(--lima); transform: translateY(-2px); filter: drop-shadow(0 0 7px rgba(var(--lima-rgb), 0.65)); }
.pie-paginas { display: flex; flex-wrap: wrap; gap: 0.55rem; }
/* Pills cian intenso (2026-09-05): el índice del pie resalta sobre el carbón. */
.pie-paginas a {
  display: inline-block; padding: 0.4em 0.95em; border-radius: 999px;
  color: #fff; font-size: 0.95rem; text-decoration: none;
  background: rgba(var(--cian-rgb), 0.18);
  border: 1px solid rgba(var(--cian-rgb), 0.60);
  box-shadow: 0 0 18px rgba(var(--cian-rgb), 0.45), 0 0 6px rgba(var(--cian-rgb), 0.35);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.pie-paginas a:hover {
  background: rgba(var(--cian-rgb), 0.30);
  border-color: rgba(var(--cian-rgb), 0.85);
  box-shadow: 0 0 26px rgba(var(--cian-rgb), 0.60), 0 0 8px rgba(var(--cian-rgb), 0.45);
}
.pie-legal { color: rgba(255, 255, 255, 0.72); font-size: 0.85rem; }
.pie-legal a { color: var(--acento); }
.pie-legal a:hover { color: var(--naranja); }
@media (min-width: 768px) {
  .pie-grid { grid-template-columns: 1fr auto; align-items: start; }
  .pie-paginas { grid-column: 1 / -1; }
  .pie-legal { grid-column: 1 / -1; border-top: 1px solid rgba(223, 223, 223, 0.18);
    padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
}

/* --- El contenido Gutenberg heredado (páginas sin plantilla propia) sigue
   legible dentro del marco genérico de style.css. --- */
.campamento-generico { padding-top: clamp(2rem, 6vw, 4rem); }

/* --- Accesibilidad --- */
:focus-visible { outline: 2px solid var(--violeta); outline-offset: 2px; }
.barra-sitio :focus-visible, .menu-sitio :focus-visible, .pie-sitio :focus-visible { outline-color: var(--acento); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   El viaje — el MAPA VISUAL del recorrido (template-recorrido.php).
   Dos horizontes: el tramo TRAZADO (leyenda de estados + línea de hitos +
   árbol de mundos → ramas → estudios) y el HORIZONTE de años (bandas de
   visión). El primer plano usa la textura cian-glow del sistema; el fondo,
   bandas de borde discontinuo (= aún sin trazar). Los badges de estado son
   los del sistema; cero color literal salvo los rgba de cian (convención
   repetida de esta hoja).
   ========================================================================== */

/* --- Leyenda de estados --- */
.recorrido-leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 1.5rem 0 0.5rem; }
.recorrido-leyenda li { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; }
.recorrido-leyenda-txt { color: var(--gris-claro); }

/* --- La línea de hitos del tramo: tarjetas cian-glow, en fila desde 980px. --- */
.recorrido-timeline { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.75rem; }
@media (min-width: 640px) { .recorrido-timeline { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .recorrido-timeline { grid-template-columns: repeat(4, 1fr); } }
.recorrido-hito {
  background: rgba(var(--cian-rgb), 0.10);
  border: 1px solid rgba(var(--cian-rgb), 0.35);
  box-shadow: 0 0 18px rgba(var(--cian-rgb), 0.18);
  border-radius: 14px; padding: 1.25rem 1.35rem;
}
.recorrido-hito-cuando {
  display: inline-block; margin-bottom: 0.75rem;
  font-family: var(--fuente-display); font-weight: 800;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tinta); background: var(--acento);
  padding: 0.28em 0.85em; border-radius: 999px;
}
.recorrido-hito h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.recorrido-hito p { font-size: 0.92rem; line-height: 1.55; color: var(--gris-claro); }

/* --- El árbol de mundos --- */
.recorrido-arbol { margin-top: 2rem; display: grid; gap: 1.25rem; }
.recorrido-mundo {
  position: relative;
  background: rgba(var(--cian-rgb), 0.10);
  border: 1px solid rgba(var(--cian-rgb), 0.35);
  box-shadow: 0 0 18px rgba(var(--cian-rgb), 0.18);
  border-radius: 16px; padding: 1.5rem 1.6rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.recorrido-mundo:hover { border-color: rgba(var(--cian-rgb), 0.55); box-shadow: 0 0 26px rgba(var(--cian-rgb), 0.34); }
.recorrido-mundo-cab { display: flex; align-items: center; gap: 0.7rem 0.85rem; flex-wrap: wrap; }
.recorrido-mundo-num { font-family: var(--fuente-display); font-weight: 800; font-size: 1rem; color: var(--violeta); letter-spacing: 0.06em; }
.recorrido-mundo-cab h3 { font-size: clamp(1.15rem, 2.6vw, 1.5rem); margin: 0; }
.recorrido-mundo-cuando {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gris-claro); border: 1px solid var(--gris-claro); border-radius: 999px;
  padding: 0.2em 0.7em; opacity: 0.8;
}
.recorrido-mundo-obj { margin-top: 0.7rem; font-size: 1rem; line-height: 1.6; color: var(--gris-claro); }
.recorrido-mundo .tarjeta-tags { margin-top: 0.85rem; }

/* El rótulo de las sub-secciones dentro de un mundo. */
.recorrido-sub-rotulo {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--violeta); margin: 1.2rem 0 0;
}

/* Las ramas (sub-rutas): lista con línea + nodo cian, como la de hitos. */
.recorrido-ramas { list-style: none; margin-top: 0.7rem; padding-left: 1.3rem; border-left: 2px solid rgba(var(--cian-rgb), 0.30); display: grid; gap: 0.9rem; }
.recorrido-rama { position: relative; }
.recorrido-rama::before { content: ""; position: absolute; left: calc(-1.3rem - 6px); top: 0.45em; width: 10px; height: 10px; border-radius: 50%; background: var(--cian); box-shadow: 0 0 8px rgba(var(--cian-rgb), 0.7); }
.recorrido-rama-cab { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.recorrido-rama h4 { font-family: var(--fuente-display); font-weight: 700; font-size: 1.02rem; line-height: 1.2; color: var(--texto); }
.recorrido-rama p { font-size: 0.9rem; line-height: 1.55; color: var(--gris-claro); margin-top: 0.25rem; }

/* Los estudios que jala el mundo: chips en lima. */
.recorrido-estudios { margin-top: 0.4rem; }
.recorrido-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.55rem; }
.recorrido-chip {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--acento); border: 1px solid rgba(var(--lima-rgb), 0.45); border-radius: 999px;
  padding: 0.28em 0.8em;
}

/* --- El horizonte de años: un RECORDATORIO al fondo, no el foco. Gris y
   atenuado (opacidad reducida) — «esto existe, pero hoy no es lo que trabajas».
   Al pasar el cursor o enfocar con teclado recupera nitidez. Los 6 meses son
   el protagonista; estas bandas solo recuerdan que el viaje sigue. --- */
.recorrido-seccion-horizonte {
  border-top: 1px solid rgba(var(--gris-claro-rgb), 0.14);
  margin-top: 1rem;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.recorrido-seccion-horizonte:hover,
.recorrido-seccion-horizonte:focus-within { opacity: 1; }
.recorrido-seccion-horizonte h2 { color: var(--gris-claro); }
.recorrido-horizonte { display: grid; gap: 0.85rem; margin-top: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .recorrido-horizonte { grid-template-columns: repeat(2, 1fr); } }
.recorrido-banda {
  border-radius: 14px; padding: 1.1rem 1.35rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(var(--gris-claro-rgb), 0.25);   /* gris apagado, ya no lima/naranja */
}
.recorrido-banda-cuando {
  display: block; margin-bottom: 0.45rem;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gris-claro); opacity: 0.75;
}
.recorrido-banda h3 { font-size: 1.05rem; margin-bottom: 0.35rem; color: var(--gris-claro); }
.recorrido-banda p { font-size: 0.9rem; line-height: 1.55; color: var(--gris-claro); opacity: 0.8; }
.recorrido-banda .badge { margin-top: 0.8rem; }
/* La insignia «Visión» también en gris dentro del horizonte atenuado. */
.recorrido-seccion-horizonte .badge-vision { border-color: var(--gris-claro); color: var(--gris-claro); }

/* ==========================================================================
   El árbol del viaje — mapa de talentos (SVG) de template-recorrido.php.
   Nodos = rutas; líneas RECTAS = dependencias reales. Estados: earned (lima,
   aquí vas) · avail (cian, lo siguiente) · locked (gris, más adelante) ·
   vision (punteado, los años, aún sin trazar). Reusa los tokens del sistema.
   ========================================================================== */
.recorrido-arbol-mapa { overflow-x: auto; margin: 1.5rem 0 0.5rem; padding-bottom: 0.5rem; }
.arbol-svg { display: block; width: 100%; min-width: 820px; height: auto; }
/* Fondo OPACO detrás de cada nodo: recorta la arista al borde del nodo (las
   aristas se pintan antes que los nodos), así la línea no entra ni pisa el icono. */
.arbol-svg .frame-bg { fill: var(--fondo); stroke: none; }
.arbol-edge { fill: none; stroke-width: 3; stroke-linecap: round; }
.arbol-edge.earned { stroke: var(--acento); }
.arbol-edge.avail  { stroke: var(--cian); opacity: 0.85; }
.arbol-edge.locked { stroke: var(--gris-claro); opacity: 0.18; }
.arbol-edge.vision { stroke: var(--naranja); opacity: 0.30; stroke-dasharray: 5 6; }
.arbol-nodo .frame { stroke-width: 2.5; }
.arbol-nodo.earned .frame { fill: rgba(var(--lima-rgb), 0.14); stroke: var(--acento); filter: drop-shadow(0 0 8px rgba(var(--lima-rgb), 0.6)); }
.arbol-nodo.avail .frame  { fill: rgba(var(--cian-rgb), 0.12); stroke: var(--cian); filter: drop-shadow(0 0 8px rgba(var(--cian-rgb), 0.5)); }
.arbol-nodo.locked .frame { fill: rgba(255, 255, 255, 0.03); stroke: rgba(var(--gris-claro-rgb), 0.35); }
.arbol-nodo.vision .frame { fill: rgba(255, 255, 255, 0.015); stroke: rgba(var(--naranja-rgb), 0.42); stroke-dasharray: 5 5; }
.arbol-nodo .glifo { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.arbol-nodo.earned .glifo { stroke: var(--acento); }
.arbol-nodo.avail .glifo  { stroke: var(--cian); }
.arbol-nodo.locked .glifo { stroke: var(--gris-claro); opacity: 0.6; }
.arbol-nodo.vision .glifo { stroke: var(--naranja); opacity: 0.5; }
.arbol-label { font-family: var(--fuente-display); font-size: 13px; font-weight: 700; }
.arbol-nodo.earned .arbol-label { fill: var(--acento); }
.arbol-nodo.avail .arbol-label  { fill: var(--texto); }
.arbol-nodo.locked .arbol-label { fill: var(--gris-claro); opacity: 0.75; }
.arbol-nodo.vision .arbol-label { fill: var(--naranja); opacity: 0.65; }
.arbol-nodo:hover .frame { filter: drop-shadow(0 0 13px rgba(var(--cian-rgb), 0.75)); }
.arbol-tier { font-family: var(--fuente-display); font-size: 12px; letter-spacing: 0.12em; fill: var(--violeta); text-transform: uppercase; }
.arbol-divisor { stroke: rgba(var(--gris-claro-rgb), 0.22); stroke-dasharray: 3 7; stroke-width: 1.5; }
.arbol-divisor-txt { font-family: var(--fuente-display); font-size: 11px; letter-spacing: 0.14em; fill: var(--naranja); opacity: 0.62; text-transform: uppercase; }
.arbol-leyenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; margin-top: 0.75rem; font-size: 0.85rem; color: var(--gris-claro); }
.arbol-leyenda .pt { display: inline-flex; align-items: center; gap: 0.45rem; }
.arbol-leyenda .dot { width: 13px; height: 13px; border-radius: 3px; border: 2px solid; box-sizing: border-box; }
.arbol-leyenda .dot.earned { border-color: var(--acento); background: rgba(var(--lima-rgb), 0.2); }
.arbol-leyenda .dot.avail  { border-color: var(--cian); background: rgba(var(--cian-rgb), 0.15); }
.arbol-leyenda .dot.locked { border-color: rgba(var(--gris-claro-rgb), 0.45); }
.arbol-leyenda .dot.vision { border-color: rgba(var(--naranja-rgb), 0.5); border-style: dashed; background: none; }

/* --------------------------------------------------------------------------
   El árbol MÓVIL — layout PROPIO, angosto y vertical (no el de escritorio
   encogido). SVG que escala HACIA ARRIBA en tablet (nunca hacia abajo, así
   nunca se apachurra). Líneas octilíneas con puertos; fondo opaco por nodo
   (ninguna línea se transparenta); tap → hoja inferior (.recorrido-detalle).
   Conmuta con el de escritorio en < 1000px (misma lógica que /sistema). */
.recorrido-arbol-mapa-movil { display: none; margin: 1.5rem 0 0.5rem; }
.arbol-svg-movil { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; }
.arbol-svg-movil .frame-bg { fill: var(--fondo); stroke: none; }
.arbol-svg-movil .arbol-edge { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.arbol-svg-movil .arbol-edge.earned { stroke: var(--acento); stroke-width: 3; opacity: 1; filter: drop-shadow(0 0 3px rgba(var(--lima-rgb), 0.5)); }
.arbol-svg-movil .arbol-edge.avail  { stroke: var(--cian); stroke-width: 3; opacity: 0.92; }
.arbol-svg-movil .arbol-edge.locked { stroke: var(--gris-claro); stroke-width: 2.4; opacity: 0.55; }
.arbol-svg-movil .arbol-edge.vision { stroke: var(--naranja); stroke-width: 2; opacity: 0.6; stroke-dasharray: 5 6; }
.arbol-svg-movil .arbol-nodo { cursor: pointer; }
.arbol-svg-movil .arbol-nodo.earned .frame { fill: rgba(var(--lima-rgb), 0.16); }
.arbol-svg-movil .arbol-nodo.avail  .frame { fill: rgba(var(--cian-rgb), 0.14); }
.arbol-svg-movil .arbol-nodo.locked .frame { fill: rgba(var(--panel-claro-rgb), 0.92); stroke: rgba(var(--gris-claro-rgb), 0.42); }
.arbol-svg-movil .arbol-nodo.vision .frame { fill: rgba(var(--panel-hondo-rgb), 0.92); stroke: rgba(var(--naranja-rgb), 0.45); stroke-dasharray: 5 5; }
.arbol-svg-movil .arbol-nodo.locked .glifo { opacity: 0.7; }
.arbol-svg-movil .arbol-nodo.sel .frame { filter: drop-shadow(0 0 12px rgba(var(--cian-rgb), 0.9)); }
.arbol-svg-movil .arbol-label { font-size: 12px; }
.arbol-svg-movil .forma-mini .arbol-label { font-size: 11px; }
.arbol-tier-m { font-family: var(--fuente-display); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--violeta); opacity: 0.85; }
.arbol-tier-m.aqui { fill: var(--acento); opacity: 1; }
.arbol-divisor-m { stroke: rgba(var(--naranja-rgb), 0.35); stroke-dasharray: 3 6; stroke-width: 1.2; }
.arbol-divisor-txt-m { font-family: var(--fuente-display); font-size: 9px; font-weight: 600; letter-spacing: 0.1em; fill: var(--naranja); opacity: 0.62; text-transform: uppercase; }

/* Conmutación escritorio / móvil del árbol (< 1000px muestra el móvil). */
@media (max-width: 999.98px) {
  .recorrido-arbol-mapa { display: none; }
  .recorrido-arbol-mapa-movil { display: block; }
}

/* Hoja de detalle (táctil): al tocar un nodo del árbol móvil, su ficha abajo. */
.recorrido-detalle {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 120; max-width: 460px; margin: 0 auto;
  background: var(--panel); border: 1px solid rgba(var(--cian-rgb), 0.85);
  box-shadow: 0 8px 34px rgba(0, 0, 0, 0.55), 0 0 22px rgba(var(--cian-rgb), 0.35);
  border-radius: 14px; padding: 1rem 1.1rem 1.15rem;
}
.recorrido-detalle[hidden] { display: none; }
.rd-cerrar { position: absolute; top: 0.35rem; right: 0.6rem; background: none; border: 0; color: var(--gris-claro); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.4rem; }
.rd-nombre { font-family: var(--fuente-display); font-weight: 700; font-size: 1.05rem; color: var(--texto); padding-right: 1.6rem; }
.rd-estado { font-family: var(--fuente-display); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0.15rem 0 0.5rem; }
.rd-estado.est-earned { color: var(--acento); }
.rd-estado.est-avail  { color: var(--cian); }
.rd-estado.est-locked { color: var(--gris-claro); }
.rd-estado.est-vision { color: var(--naranja); }
.rd-tip { font-size: 0.9rem; line-height: 1.5; color: var(--gris-claro); }

/* ==========================================================================
   El sistema — el MAPA DE LAS 44 HABILIDADES (template-sistema.php).
   Flujo vertical: seis racimos por familia con la descripción AL LADO de cada
   skill; conectores CIAN familia→familia (la ADUANA en lima); una CADENA
   resaltada en lima (los skills .es-eslabon); y el racimo META a un costado
   (.sistema-meta), punteado y pegajoso — fuera de la línea de producción.
   Reusa los tokens y la textura cian-glow del resto de esta hoja.
   ========================================================================== */

/* --- Leyenda del mapa: tres señales (flecha cian · cadena lima · meta punteado). --- */
.sistema-leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 1.5rem 0 0.4rem; }
.sistema-leyenda li { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: var(--gris-claro); }
.ley-marca { width: 26px; flex: 0 0 26px; border-top: 3px solid transparent; }
.ley-marca-fam   { border-top-color: var(--cian); }
.ley-marca-chain { border-top-color: var(--acento); }
.ley-marca-gris  { border-top-color: var(--gris-claro); opacity: 0.6; }
.ley-marca-meta  { border-top-style: dashed; border-top-color: rgba(var(--gris-claro-rgb), 0.6); }
.sistema-cadena-nota { font-size: 0.82rem; color: var(--gris-claro); opacity: 0.8; margin-top: 0.2rem; max-width: 60em; }

/* --- El mapa: línea de producción + carril meta (2 columnas desde 1000px). --- */
.sistema-mapa { margin-top: 1.75rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .sistema-mapa { grid-template-columns: minmax(0, 1fr) 322px; align-items: start; } }
.sistema-linea { display: flex; flex-direction: column; }

/* --- El racimo: tarjeta cian-glow, como los mundos del recorrido. --- */
.sistema-racimo {
  background: rgba(var(--cian-rgb), 0.10);
  border: 1px solid rgba(var(--cian-rgb), 0.35);
  box-shadow: 0 0 18px rgba(var(--cian-rgb), 0.18);
  border-radius: 16px; padding: 1.4rem 1.5rem 1.5rem;
}
.racimo-cab { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.racimo-num {
  font-family: var(--fuente-display); font-weight: 800; font-size: 0.9rem;
  color: var(--tinta); background: var(--cian); letter-spacing: 0.04em;
  border-radius: 8px; padding: 0.15em 0.55em;
}
.racimo-cab h3 { font-size: clamp(1.1rem, 2.4vw, 1.4rem); margin: 0; }
.racimo-cuenta {
  margin-left: auto; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gris-claro); opacity: 0.8;
}
.racimo-obj { margin-top: 0.55rem; font-size: 0.96rem; line-height: 1.55; color: var(--gris-claro); }
.racimo-nota {
  margin-top: 0.7rem; font-size: 0.85rem; line-height: 1.5; color: var(--gris-claro);
  border-left: 2px dashed rgba(var(--gris-claro-rgb), 0.4); padding-left: 0.75rem;
}
.racimo-nota strong { color: var(--acento); }

/* --- Las skills: nombre + comando a la izquierda, descripción AL LADO. --- */
.sistema-skills { list-style: none; margin-top: 1.05rem; }
.sistema-skill {
  display: grid; grid-template-columns: 1fr; gap: 0.15rem;
  padding: 0.7rem 0; border-top: 1px dashed rgba(var(--violeta-rgb), 0.22);
}
.sistema-skill:first-child { border-top: 0; }
@media (min-width: 560px) {
  .sistema-skill { grid-template-columns: minmax(170px, 230px) 1fr; gap: 0.1rem 1.15rem; align-items: baseline; }
}
.sk-cab { display: flex; flex-direction: column; gap: 0.12rem; }
.sk-nombre { font-family: var(--fuente-display); font-weight: 700; font-size: 0.98rem; line-height: 1.2; color: var(--texto); }
a.sk-nombre { color: var(--lima); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a.sk-nombre:hover { color: var(--texto); }
.sk-slug { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.72rem; color: var(--cian); opacity: 0.92; word-break: break-word; }
.sk-desc { font-size: 0.9rem; line-height: 1.5; color: var(--gris-claro); }
.sk-eslabon { display: none; color: var(--acento); font-size: 0.7rem; }

/* La cadena de derivación resaltada: hilo lima a la izquierda + comando en lima. */
.sistema-skill.es-eslabon {
  box-shadow: inset 3px 0 0 var(--acento);
  background: rgba(var(--lima-rgb), 0.05);
  border-radius: 0 8px 8px 0;
  padding-left: 0.75rem; padding-right: 0.6rem;
}
.sistema-skill.es-eslabon .sk-slug { color: var(--acento); opacity: 1; }
.sistema-skill.es-eslabon .sk-eslabon { display: inline; margin-left: 0.35rem; }

/* --- El conector familia→familia: línea + flecha cian, con su rótulo. --- */
.sistema-flecha { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 0.85rem 0; }
.sistema-flecha .flecha-glifo { width: 2px; height: 30px; background: var(--cian); opacity: 0.85; position: relative; }
.sistema-flecha .flecha-glifo::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  transform: translate(-50%, 40%) rotate(45deg); width: 9px; height: 9px;
  border-right: 2px solid var(--cian); border-bottom: 2px solid var(--cian);
}
.sistema-flecha .flecha-txt { max-width: 48em; font-size: 0.86rem; line-height: 1.5; color: var(--gris-claro); }
.sistema-flecha .flecha-txt strong { color: var(--texto); }
/* La ADUANA: el tramo de narra-experiencia, en lima (el gate de la cadena). */
.sistema-flecha.es-aduana .flecha-glifo { background: var(--acento); opacity: 1; }
.sistema-flecha.es-aduana .flecha-glifo::after { border-right-color: var(--acento); border-bottom-color: var(--acento); }
.sistema-flecha.es-aduana .flecha-txt {
  color: var(--texto); font-weight: 500;
  border: 1px solid rgba(var(--lima-rgb), 0.45); background: rgba(var(--lima-rgb), 0.07);
  border-radius: 10px; padding: 0.55rem 0.9rem;
}
.sistema-flecha.es-aduana .flecha-txt strong { color: var(--acento); }

/* --- El carril META a un costado: punteado, pegajoso, fuera de la línea. --- */
.sistema-meta { display: flex; flex-direction: column; gap: 1rem; }
.sistema-racimo.es-meta {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(var(--gris-claro-rgb), 0.3);
  box-shadow: none;
}
.sistema-racimo.es-meta .racimo-num { background: var(--violeta); color: #fff; }
.sistema-racimo.es-meta .racimo-cab h3 { color: var(--gris-claro); }
/* En el carril meta (columna angosta) la skill NUNCA va a 2 columnas: el nombre
   sobre la descripción. Sin esto, el grid de 560px comprime la descripción a una
   palabra por línea (el media query mira el viewport, no el ancho del carril). */
.sistema-meta .sistema-skill { grid-template-columns: 1fr; gap: 0.15rem; }
@media (min-width: 1000px) {
  .sistema-meta { position: sticky; top: calc(var(--barra-alto) + 1rem); border-left: 1px dashed rgba(var(--gris-claro-rgb), 0.25); padding-left: 1.5rem; }
}

/* --- El GRAFO interactivo (árbol de talentos con NODOS-TARJETA) -------------
   Los nodos son <details> HTML posicionados sobre una capa SVG de líneas.
   Estilo FAQ (portada): reposo cian con glow · hover lima · clic DESPLIEGA la
   descripción (la tarjeta crece). El hover muestra la METÁFORA flotante. La
   cadena de derivación se ve en las líneas lima; el carril meta, punteado. --- */
.sistema-grafo-mapa { margin: 1.5rem 0 0.5rem; padding-bottom: 0.5rem; overflow: hidden; }
/* El grafo (lienzo fijo de 1180px) se ESCALA para caber al ancho disponible
   (interiores.js · ajustarEscala): así NUNCA hay scroll horizontal, ni en móvil ni
   en tablet. overflow:hidden recorta cualquier resto en los bordes. */
.sistema-grafo { position: relative; margin: 0 auto; }
.sistema-grafo-lineas { position: absolute; top: 0; left: 0; width: 100%; height: auto; pointer-events: none; z-index: 0; }
/* DOS capas de líneas, octilíneas (horizontal + 45°, como carta estelar):
   · RECORRIDO — cian SÓLIDO: el orden del viaje (1→N), siempre visible.
   · RELACIONES — gris, OCULTAS en reposo (cielo limpio); al pasar el cursor por una
     habilidad, SUS relaciones (incluida la cadena de derivación) se encienden en lima. */
.sistema-grafo-lineas path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.sistema-grafo-lineas .edge-recorrido { stroke: var(--cian); stroke-width: 2.4; opacity: 0.58; }
.sistema-grafo-lineas .edge-rel { stroke: var(--gris-claro); stroke-width: 1.5; opacity: 0; transition: opacity 0.2s ease, stroke 0.2s ease; }
.sistema-grafo-lineas .edge-rel.activa { stroke: var(--acento); opacity: 0.5; stroke-width: 1.8; }
.grafo-nodo.rel-activa .gn-frame { fill: rgba(var(--lima-rgb), 0.16); stroke: var(--acento); filter: drop-shadow(0 0 9px rgba(var(--lima-rgb), 0.5)); }
.grafo-nodo.rel-activa .gn-label { color: var(--acento); }
.sistema-grafo-nota { font-size: 0.85rem; color: var(--gris-claro); opacity: 0.85; margin: 0.4rem 0 0.2rem; }

/* El NODO = FORMA + ICONO (como recorrido). Anclado por el CENTRO de la forma
   (x,y): la etiqueta, la metáfora y el cuerpo van ABSOLUTOS (no alteran la caja
   del summary), así el ancla no se mueve al abrir. Tamaño por relevancia (peso). */
.grafo-nodo { position: absolute; z-index: 1; transform: translate(-50%, -50%); }
.grafo-nodo > summary { list-style: none; cursor: pointer; position: relative; display: block; }
.grafo-nodo > summary::-webkit-details-marker { display: none; }

/* La forma y su tamaño por relevancia (54 / 64 / 74 px). */
.gn-forma { display: block; width: 54px; height: 54px; }
.grafo-nodo.peso-2 .gn-forma { width: 64px; height: 64px; }
.grafo-nodo.peso-3 .gn-forma { width: 74px; height: 74px; }
.gn-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gn-frame { fill: rgba(var(--cian-rgb), 0.12); stroke: var(--cian); stroke-width: 3.5;
  filter: drop-shadow(0 0 7px rgba(var(--cian-rgb), 0.55)); transition: fill 0.2s ease, stroke 0.2s ease, filter 0.2s ease; }
.grafo-nodo.meta .gn-frame { stroke-dasharray: 4 4; fill: rgba(var(--cian-rgb), 0.06); }
.gn-glifo { fill: none; stroke: var(--cian); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s ease; }

/* La etiqueta corta, debajo de la forma (absoluta: no cuenta en la caja). */
.gn-label { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%);
  white-space: nowrap; font-family: var(--fuente-display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.01em; color: var(--gris-claro); pointer-events: none; transition: color 0.2s ease; }
.grafo-nodo[open] .gn-label { display: none; }

/* Hover = la forma se pone LIMA (glifo oscuro, etiqueta lima) + metáfora. */
.grafo-nodo:hover { z-index: 5; }
.grafo-nodo:hover .gn-frame { fill: var(--acento); stroke: var(--acento); filter: drop-shadow(0 0 10px rgba(var(--lima-rgb), 0.6)); }
.grafo-nodo:hover .gn-glifo { stroke: var(--tinta); }
.grafo-nodo:hover .gn-label { color: var(--acento); }

/* ADUANA (narra-experiencia): el skill más importante — en NARANJA (caso especial).
   Es el ÚNICO que transforma el input del viajero en contenido; sin él, el motor no
   produce nada. Se duplica en Producción (donde de verdad se usa) para que la cadena
   lima no tenga que bajar al carril meta. Conserva su naranja también en hover. */
.grafo-nodo.aduana .gn-frame { fill: rgba(var(--aviso-rgb), 0.18); stroke: var(--aviso); filter: drop-shadow(0 0 11px rgba(var(--aviso-rgb), 0.7)); }
.grafo-nodo.aduana .gn-glifo { stroke: var(--aviso); }
.grafo-nodo.aduana .gn-label { color: var(--aviso); }
.grafo-nodo.aduana:hover .gn-frame { fill: rgba(var(--aviso-rgb), 0.34); stroke: var(--aviso-claro); filter: drop-shadow(0 0 14px rgba(var(--aviso-rgb), 0.82)); }
.grafo-nodo.aduana:hover .gn-glifo { stroke: var(--tinta); }
.grafo-nodo.aduana:hover .gn-label { color: var(--aviso-claro); }

/* La METÁFORA flotante en hover, debajo de la etiqueta. */
.gn-hover {
  position: absolute; left: 50%; top: calc(100% + 22px); transform: translateX(-50%);
  width: 210px; padding: 0.5rem 0.7rem; border-radius: 8px;
  background: var(--tinta); color: var(--gris-claro);
  border: 1px solid rgba(var(--cian-rgb), 0.6); box-shadow: 0 0 14px rgba(var(--cian-rgb), 0.4);
  font-family: var(--fuente); font-weight: 400; font-size: 0.78rem; line-height: 1.4; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity 0.2s ease; pointer-events: none; z-index: 9;
}
.grafo-nodo > summary:hover .gn-hover { opacity: 1; visibility: visible; }
.grafo-nodo[open] .gn-hover { display: none; }
/* En táctil no hay hover fiable: se oculta la metáfora flotante (el tap abre la
   descripción, que ya la contiene). Evita tooltips pegados que estorban. */
@media (hover: none) { .gn-hover { display: none !important; } }

/* HOJA DE DETALLE (táctil): fija abajo, legible, FUERA del lienzo escalado, para
   que al tocar un nodo su descripción se lea bien (los paneles inline quedan
   diminutos al escalar el grafo en móvil). En escritorio se usan los inline. */
.sistema-detalle {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 120;
  background: var(--panel); border: 1px solid rgba(var(--cian-rgb), 0.85);
  box-shadow: 0 8px 34px rgba(0, 0, 0, 0.55), 0 0 22px rgba(var(--cian-rgb), 0.35);
  border-radius: 14px; padding: 1rem 1.1rem 1.15rem;
}
.sistema-detalle[hidden] { display: none; }
.sd-cerrar { position: absolute; top: 0.35rem; right: 0.6rem; background: none; border: 0; color: var(--gris-claro); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.4rem; }
.sd-nombre { font-family: var(--fuente-display); font-weight: 700; font-size: 1.05rem; color: var(--texto); padding-right: 1.6rem; }
.sd-slug { font-family: 'SFMono-Regular', Consolas, Menlo, monospace; font-size: 0.72rem; color: var(--cian); }
.sd-meta { font-size: 0.88rem; line-height: 1.45; color: var(--acento); margin-top: 0.5rem; }
.sd-desc { font-size: 0.9rem; line-height: 1.5; color: var(--gris-claro); margin-top: 0.4rem; }
.sd-slug:empty, .sd-meta:empty, .sd-desc:empty { display: none; }
/* La hoja inferior se controla por [hidden] desde el JS: aparece cuando se USA
   (táctil o grafo MÓVIL) y no en escritorio con el grafo ancho (ahí, panel inline). */
@media (hover: none) { .grafo-nodo .gn-cuerpo { display: none !important; } }
.es-movil .gn-cuerpo { display: none !important; }   /* el grafo móvil SIEMPRE usa la hoja inferior */

/* Clic = aparece el CUERPO (nombre + comando + descripción) bajo la forma, opaco. */
.grafo-nodo[open] { z-index: 6; }
.gn-cuerpo {
  position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
  width: 288px; padding: 0.9rem 1rem 1rem; text-align: left; border-radius: 12px;
  background: var(--panel); border: 1px solid rgba(var(--cian-rgb), 0.85); box-shadow: 0 0 30px rgba(var(--cian-rgb), 0.5);
}
.gn-nombre { font-family: var(--fuente-display); font-weight: 700; font-size: 0.98rem; color: var(--texto); margin-bottom: 0.15rem; }
.gn-slug { font-family: 'SFMono-Regular', Consolas, Menlo, monospace; font-size: 0.72rem; color: var(--cian); word-break: break-word; }
.gn-desc { font-size: 0.88rem; line-height: 1.5; color: var(--gris-claro); margin-top: 0.45rem; }

/* Las SECCIONES (etapas) del grafo: divisor punteado + rótulo + metáfora, como el
   divisor de /recorrido. El rótulo va arriba-izquierda de cada banda; los nodos, debajo. */
.sistema-grafo-divisor { stroke: rgba(var(--gris-claro-rgb), 0.22); stroke-dasharray: 3 7; stroke-width: 1.5; }
.sistema-grafo-divisor.meta { stroke: rgba(var(--naranja-rgb), 0.30); }
.sistema-grafo-seccion { position: absolute; left: 40px; z-index: 2; max-width: 62%; transform: translateY(8px); pointer-events: none; }
.gs-num { font-family: var(--fuente-display); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--cian); }
.gs-nombre { font-family: var(--fuente-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto); margin-left: 0.45rem; }
.gs-meta { font-size: 0.8rem; line-height: 1.4; color: var(--gris-claro); opacity: 0.85; margin-top: 0.2rem; max-width: 44ch; }
.sistema-grafo-seccion.meta .gs-num { color: var(--violeta); }

/* ===== CONMUTACIÓN ESCRITORIO / MÓVIL DEL GRAFO ==========================
   Se renderizan DOS grafos (misma data): el ANCHO para escritorio y uno ANGOSTO
   nativo para móvil — no el de escritorio encogido. <1000px se muestra el móvil.
   Así en el teléfono los iconos van a tamaño legible y no una miniatura ilegible. */
.sistema-grafo-mapa.es-movil { display: none; }
@media (max-width: 999.98px) {
  .sistema-grafo-mapa:not(.es-movil) { display: none; }
  .sistema-grafo-mapa.es-movil { display: block; }
  .sistema-leyenda, .sistema-grafo-nota { display: none; }   /* describen líneas/cursor: no aplican en táctil */
}
/* Grafo MÓVIL: sin etiquetas fijas ni metáfora flotante (colisionan en angosto). El
   nombre + comando + descripción salen en la HOJA INFERIOR al tocar la estrella. */
.es-movil .gn-hover { display: none; }   /* la metáfora flotante sale al tocar (hoja inferior) */
/* El TÍTULO va al COSTADO DERECHO del icono, con espacio (no debajo). El icono
   zigzaguea en la banda izquierda; el título usa el ancho libre a la derecha. */
.es-movil .gn-label {
  display: block; position: absolute; top: 50%; transform: translateY(-50%);
  width: 140px; white-space: normal; font-size: 0.82rem; line-height: 1.15; letter-spacing: 0;
  text-shadow: 0 0 6px var(--tinta), 0 0 6px var(--tinta);
}
/* El título va al lado que TENGA espacio: icono a la izquierda → título a la derecha; a la derecha → a la izquierda. */
.es-movil .grafo-nodo.labside-der .gn-label { left: calc(100% + 10px); right: auto; text-align: left; }
.es-movil .grafo-nodo.labside-izq .gn-label { right: calc(100% + 10px); left: auto; text-align: right; }
.es-movil .grafo-nodo[open] .gn-label { display: block; }   /* el título se queda al abrir la ficha */
.es-movil .gn-forma { width: 52px; height: 52px; }
.es-movil .grafo-nodo.peso-2 .gn-forma { width: 58px; height: 58px; }
.es-movil .grafo-nodo.peso-3 .gn-forma { width: 64px; height: 64px; }
/* Marco (borde de la tarjeta) y líneas entre nodos MÁS GRUESOS en móvil, para
   igualar el peso visual del árbol de /recorrido (allí el lienzo va casi 1:1, así
   que su borde 2.5 y sus aristas 3 se ven fuertes; aquí, en el viewBox 0-100 de
   cada forma, hacen falta más unidades para el mismo grosor en pantalla). */
.es-movil .gn-frame { stroke-width: 5; }
.es-movil .sistema-grafo-lineas .edge-recorrido { stroke-width: 3.2; opacity: 0.9; }
.es-movil .sistema-grafo-seccion { left: 12px; max-width: 92%; }
.es-movil .gs-nombre { font-size: 0.85rem; margin-left: 0.35rem; }
.es-movil .gs-num, .es-movil .gs-nombre { text-shadow: 0 0 6px var(--tinta), 0 0 6px var(--tinta); }  /* resalta sobre las líneas */
.es-movil .gs-meta { display: none; }   /* el párrafo de metáfora colisiona en angosto: se omite en móvil (la metáfora por nodo sigue al tocar) */