/* K-Anatomía: estilo común (dirección artística: fuentes/direccion-artistica.md).
   HUD oscuro bleu nuit, esquinas rectas, color solo con significado. Sin texto en este archivo. */
:root {
  color-scheme: dark;
  --bg-void: #070F16; --bg-night: #0E1A26; --bg-haze: #4A515A;
  --panel: #101726; --panel-2: #1D2936; --line: #2D3846; --line-2: #3C4858;
  --ink: #EFEEF1; --ink-2: #D1D1D7; --ink-3: #8A93A3; --ink-4: #5E6878;
  --convex: #3FE0F0; --concave: #A77BE8;
  --lax: #9AA3AE; --taut: #F2C14E; --stretch: #FF5A7A;
  --fx-cyan: #3FE0F0; --fx-pink: #E0607A;
  --light-bg-1: #F9E4EB; --light-bg-2: #DECDD7; --light-ink: #2D3846; --light-shape: #A8A4B3;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --top: 56px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg-void); color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button {
  font: 500 .9rem/1.2 "Inter", system-ui, sans-serif; color: var(--ink-2);
  background: transparent; border: 1px solid var(--line); border-radius: 0;
  padding: 10px 12px; min-height: 40px; cursor: pointer; position: relative;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
button:hover { border-color: var(--ink-2); color: var(--ink); background: rgba(239, 238, 241, .05); }
button:active { transform: translateY(1px); }
button[aria-pressed="true"] { background: var(--ink); color: var(--bg-night); border-color: var(--ink); }
button[aria-pressed="true"]::before {
  content: ""; position: absolute; left: 5px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; background: var(--bg-night);
}
button:disabled { cursor: not-allowed; color: var(--ink-4); border-color: var(--line); background: transparent; }
button[aria-pressed="true"]:disabled { background: var(--ink-3); color: var(--bg-night); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }
h1:focus { outline: none; }

/* ---------- barra superior (todas las páginas) ---------- */
.top {
  position: sticky; top: 0; z-index: 20; height: var(--top);
  display: flex; align-items: center; gap: 28px; padding: 0 24px;
  background: rgba(7, 15, 22, .94); border-bottom: 1px solid var(--line);
}
.brand { font-family: "Chakra Petch", sans-serif; font-weight: 600; font-size: 1.05rem; letter-spacing: .01em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink-3); min-width: 0; overflow: hidden; white-space: nowrap; }
.crumbs a { text-decoration: none; color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink-2); }
.crumbs .sep { color: var(--ink-4); }
.crumb-back { display: none; font-size: .88rem; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.crumb-back:hover { color: var(--ink); }
.lang { margin-left: auto; display: flex; }
.lang button { padding: 6px 10px; min-height: 32px; font: 600 .75rem "JetBrains Mono", monospace; }
.lang button[aria-pressed="true"]::before { display: none; }
.lang button + button { border-left: 0; }

/* ---------- páginas de navegación ---------- */
.view { animation: entrada .45s var(--ease) both; }
@keyframes entrada { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.backdrop { background: radial-gradient(ellipse 70% 60% at 70% 30%, #1D2936 0%, #0E1A26 45%, #070F16 100%); min-height: calc(100dvh - var(--top)); display: flex; flex-direction: column; }
.page { width: 100%; max-width: 1240px; margin: 0 auto; padding: 56px 32px 40px; flex: 1; }
.pie-pagina { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px 28px; display: flex; gap: 20px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-4); }
.pie-pagina a { color: var(--ink-3); text-decoration: none; }
.pie-pagina a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* inicio */
.hero { max-width: 880px; margin-bottom: 40px; }
.hero h1 { font-family: "Chakra Petch", sans-serif; font-weight: 600; font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.05; letter-spacing: -.015em; margin: 0 0 16px; text-wrap: balance; }
.hero p { margin: 0; color: var(--ink-2); font-size: 1.08rem; max-width: 52ch; }
.regions { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; min-height: 440px; }
.region {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px;
  background: rgba(16, 23, 38, .72); border: 1px solid var(--line); text-decoration: none; color: var(--ink); overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.region h2 { font-family: "Chakra Petch", sans-serif; font-weight: 600; font-size: 1.6rem; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 8px; }
.region p { margin: 0; color: var(--ink-3); font-size: .95rem; max-width: 34ch; }
.region .state { margin-top: 18px; font: 500 .8rem "JetBrains Mono", monospace; color: var(--ink-3); }
.region.open { grid-row: 1 / span 2; transition: border-color .2s var(--ease), transform .25s var(--ease); }
.region.open:hover { border-color: var(--ink-2); transform: translateY(-2px); }
.region.open .copy { position: relative; z-index: 1; max-width: 52%; }
.region.open h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.region.open p, .region.open .state { color: var(--ink-2); }
.cta { display: inline-block; margin-top: 24px; padding: 12px 18px; background: var(--ink); color: var(--bg-night); font-weight: 600; font-size: .92rem; white-space: nowrap; transition: transform .15s var(--ease); }
.region.open:hover .cta, .feature:hover .cta { transform: translateX(3px); }
.region .art { position: absolute; right: 4%; top: 50%; height: 104%; width: auto; transform: translateY(-50%); pointer-events: none; transition: transform .5s var(--ease); }
.region.open:hover .art { transform: translateY(-51%) scale(1.02); }
.region.open::after { content: ""; position: absolute; right: -10%; top: 10%; width: 70%; height: 80%; background: radial-gradient(circle, rgba(239, 238, 241, .08), transparent 65%); pointer-events: none; }
.region.soon { clip-path: none; cursor: not-allowed; background: rgba(16, 23, 38, .4); border-style: dashed; }
.region.soon h2 { color: var(--ink-3); }
.region.soon p, .region.soon .state { color: var(--ink-4); }

/* extremidad inferior */
.limb { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.limb h1 { font-family: "Chakra Petch", sans-serif; font-weight: 600; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.05; letter-spacing: -.015em; margin: 0 0 12px; }
.limb .lead { color: var(--ink-2); margin: 0 0 28px; max-width: 48ch; }
.feature {
  display: grid; grid-template-columns: 1fr 200px; align-items: center; gap: 8px; padding: 28px 28px 28px 32px;
  background: rgba(16, 23, 38, .78); border: 1px solid var(--line-2); text-decoration: none; color: var(--ink);
  transition: border-color .2s var(--ease), transform .25s var(--ease);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.feature:hover { border-color: var(--ink-2); transform: translateY(-2px); }
.feature .where { font-size: .85rem; color: var(--ink-3); margin: 0 0 6px; }
.feature h2 { font-family: "Chakra Petch", sans-serif; font-weight: 600; font-size: 1.9rem; line-height: 1.1; margin: 0 0 10px; }
.feature p { margin: 0; color: var(--ink-2); font-size: .95rem; max-width: 36ch; }
.feature img { width: 100%; height: auto; max-height: 300px; object-fit: contain; }
.groups { display: flex; flex-direction: column; gap: 26px; padding-top: 8px; }
.group h3 { font-family: "Chakra Petch", sans-serif; font-weight: 600; font-size: 1rem; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.group li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; color: var(--ink-4); font-size: .95rem; }
.group li small { font: 500 .72rem "JetBrains Mono", monospace; color: var(--ink-4); white-space: nowrap; }
.group li a { color: var(--ink); text-decoration: none; font-weight: 500; }
.group li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.group li.on small { color: var(--ink-2); }

/* créditos: variante « mundo claro » (ficha de laboratorio) */
body.claro { background: linear-gradient(160deg, var(--light-bg-1), var(--light-bg-2)); color: var(--light-ink); color-scheme: light; }
body.claro .top { background: rgba(249, 228, 235, .94); border-bottom-color: var(--light-shape); }
body.claro .brand, body.claro .crumbs [aria-current] { color: var(--light-ink); }
body.claro .crumbs a, body.claro .crumb-back { color: #5B5868; }
body.claro .lang button { color: var(--light-ink); border-color: var(--light-shape); }
body.claro .lang button[aria-pressed="true"] { background: var(--light-ink); color: var(--light-bg-1); }
body.claro .lang button:disabled { color: #8B8798; }
body.claro :focus-visible { outline-color: var(--light-ink); }
.ficha { max-width: 760px; margin: 0 auto; padding: 48px 24px 56px; }
.ficha h1 { font-family: "Chakra Petch", sans-serif; font-weight: 600; font-size: 2.2rem; line-height: 1.1; margin: 0 0 20px; }
.ficha h2 { font-family: "Chakra Petch", sans-serif; font-weight: 600; font-size: 1.1rem; margin: 32px 0 8px; padding-top: 14px; border-top: 1px solid var(--light-shape); }
.ficha ul { padding-left: 1.2em; }
.ficha a { color: var(--light-ink); text-underline-offset: 3px; }

/* ---------- página de articulación ---------- */
body.con-visor { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.app { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.stage { position: relative; min-height: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #4A515A 0%, #1D2936 38%, #0E1A26 65%, #070F16 100%); }
.fondo { position: absolute; inset: 0; pointer-events: none; }
#polvo { position: absolute; inset: 0; width: 100%; height: 100%; }
.horizon { position: absolute; left: 0; right: 0; bottom: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(209, 209, 215, .22) 20%, rgba(209, 209, 215, .22) 80%, transparent); }
.horizon::before { content: ""; position: absolute; left: 15%; right: 15%; bottom: 1px; height: 18px; background: radial-gradient(ellipse at 50% 100%, rgba(209, 209, 215, .08), transparent 70%); }
#halo { position: absolute; left: 50%; top: 45%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, rgba(239, 238, 241, .10) 0%, rgba(239, 238, 241, .04) 35%, transparent 68%); }
.ring { position: absolute; left: 50%; top: 45%; width: 420px; height: 420px; margin: -210px 0 0 -210px; opacity: .9; }
.ring .spin { transform-origin: 50% 50%; animation: giro 90s linear infinite; }
.ring text { font-family: "Chakra Petch", sans-serif; font-size: 8.5px; letter-spacing: 3px; fill: rgba(209, 209, 215, .30); }
@keyframes giro { to { transform: rotate(360deg); } }
.visor { position: absolute; inset: 0; }
.visor canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(239, 238, 241, .7), transparent); opacity: 0; pointer-events: none; }
.scan.run { animation: escaner .8s var(--ease) forwards; }
@keyframes escaner { 0% { top: 0; opacity: .9; } 100% { top: 100%; opacity: 0; } }
.stage.glitch .visor { filter: drop-shadow(2px 0 rgba(63, 224, 240, .55)) drop-shadow(-2px 0 rgba(224, 96, 122, .55)); }
.estado { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font: 500 .95rem "Chakra Petch", sans-serif; color: var(--ink-2); }

/* herramientas de la vista: «Leyenda» y «Capas» (se abren al pasar el ratón o al tocar) */
.tools { position: absolute; left: 14px; top: 14px; display: flex; gap: 6px; z-index: 4; }
.tool { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 36px; background: rgba(16, 23, 38, .86); border: 1px solid var(--line); color: var(--ink-2); font: 500 .85rem "Inter", sans-serif; }
.tool:hover { border-color: var(--ink-2); color: var(--ink); background: rgba(16, 23, 38, .86); }
.tool .ico { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid currentColor; font: 600 .72rem "JetBrains Mono", monospace; line-height: 1; }
.pop { position: relative; }
.pop-box { display: none; position: absolute; left: 0; top: calc(100% + 6px); width: 310px; padding: 14px 16px; background: rgba(16, 23, 38, .97); border: 1px solid var(--line-2); font-size: .86rem; color: var(--ink-2); }
.pop-box::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } /* puente para no perder el survol */
@media (hover: hover) { .pop:hover .pop-box { display: block; } }
.pop.open .pop-box { display: block; }
.pop.suprimido .pop-box { display: none !important; } /* cerrada con Escape aunque el ratón siga encima */
.pop.open .tool, .pop:hover .tool { border-color: var(--ink-2); color: var(--ink); }
.pop-rule { margin: 0 0 12px; line-height: 1.5; }
.pop-rule strong { color: var(--concave); font-weight: 600; }
.key { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.key li { display: flex; align-items: center; gap: 9px; }
.key li.sub { padding-left: 19px; font-size: .8rem; color: var(--ink-3); }
.key .sw { width: 10px; height: 10px; flex: none; }
.key .sw.ghost { background: rgba(217, 211, 199, .35); outline: 1px dashed rgba(217, 211, 199, .5); }
.key .fibra { width: 16px; height: 3px; flex: none; }
.leyenda.sin-fibras .leyenda-fibras { display: none; }
.pop-foot { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink-3); line-height: 1.5; }
.pop-box label.check { margin-top: 0; }
.pop-box label.check + label.check { margin-top: 12px; }
.open-panel { position: absolute; right: 14px; top: 14px; z-index: 4; }

/* explicación: columna a la izquierda de la vista, bajo «Leyenda» y «Capas» (la ventana Leyenda pasa por encima) */
.caption { position: absolute; left: 14px; top: 62px; width: 300px; max-height: calc(100% - 200px); overflow: auto; padding: 12px 16px; background: rgba(16, 23, 38, .9); border-left: 2px solid var(--ink); z-index: 3; transition: opacity .8s ease; }
.caption.desvanece { opacity: 0; }
.caption p { margin: 0; font-size: .93rem; line-height: 1.5; }
.caption .tip p { margin-top: 4px; color: var(--ink-3); font-size: .84rem; }
.views { position: absolute; right: 14px; bottom: 14px; display: flex; }
.views button { background: rgba(16, 23, 38, .8); font-family: "Chakra Petch", sans-serif; font-size: .86rem; font-weight: 600; }
.views button[aria-pressed="true"] { background: var(--ink); color: var(--bg-night); }
.views button + button { border-left: 0; }
.gizmo { position: absolute; left: 8px; bottom: 8px; width: 120px; height: 120px; opacity: .9; }
.gizmo text { font-family: "Chakra Petch", sans-serif; font-weight: 600; font-size: 8px; fill: var(--ink-2); cursor: help; }
.gizmo line { stroke: var(--ink-2); stroke-width: 1; }
.gizmo rect { fill: var(--ink-2); }

/* casillas: cuadrado 14 px con marca blanca */
input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; flex: none; border: 1px solid var(--ink-3); background: transparent; display: inline-grid; place-content: center; cursor: pointer; }
input[type="checkbox"]::after { content: ""; width: 8px; height: 8px; background: var(--ink); transform: scale(0); transition: transform .15s var(--ease); }
input[type="checkbox"]:checked { border-color: var(--ink); }
input[type="checkbox"]:checked::after { transform: scale(1); }
input[type="checkbox"]:disabled { opacity: .5; cursor: default; }

/* panel */
.panel { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-left: 1px solid var(--line); }
.app.plegado { grid-template-columns: minmax(0, 1fr) 0; }
.app.plegado .panel { display: none; }
.p-head { padding: 16px 20px 0; }
.p-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.p-head h1 { font-family: "Chakra Petch", sans-serif; font-weight: 600; font-size: 1.3rem; line-height: 1.1; letter-spacing: -.01em; margin: 0; }
.hide-panel { padding: 6px 10px; min-height: 32px; font-size: .8rem; color: var(--ink-3); }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.tabs button { border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 12px 4px; white-space: nowrap; font-family: "Chakra Petch", sans-serif; font-size: .95rem; font-weight: 600; color: var(--ink-3); background: none; }
.tabs button:hover { color: var(--ink); background: none; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.p-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 20px; }
.p-body h2 { font-family: "Chakra Petch", sans-serif; font-weight: 600; font-size: .95rem; margin: 18px 0 6px; color: var(--ink); }
.p-body h2.titulo-pestana { font-size: 1.05rem; margin: 14px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.p-body h2.titulo-pestana + h2 { margin-top: 12px; }
/* rotatorio: gran cursor de flexión */
.big-slider { margin-top: 12px; }
.bs-top { display: flex; align-items: baseline; justify-content: space-between; }
.bs-top label { font-size: .9rem; color: var(--ink-2); }
.bs-top output { font: 600 1.7rem "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; color: var(--ink); }
.big-slider input { width: 100%; min-height: 34px; margin: 2px 0 0; }
.chips { display: flex; gap: 6px; margin-top: 8px; }
.chips button { padding: 7px 11px; min-height: 34px; font-size: .84rem; }
/* translatorio */
.grades { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 10px; }
.grades button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; }
.grades button + button { border-left: 0; }
.grades button[aria-pressed="true"]::before { display: none; }
.grades b { font: 600 .9rem "JetBrains Mono", monospace; }
.grades span { font-size: .7rem; color: inherit; opacity: .85; }
.under-graph { margin-top: 2px; }
.row2 { margin-top: 12px; }
.row2 button { width: 100%; }
details.more { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
details.more summary { font: 500 .88rem "Inter", sans-serif; color: var(--ink-3); list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: " +"; color: var(--ink-4); }
details.more[open] summary::after { content: " -"; }
details.more summary .elegido { color: var(--ink); }
details.more .seg { margin-top: 10px; }
.contacto { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); padding: 4px 8px; background: rgba(16, 23, 38, .8); border-left: 2px solid var(--ink-2); font-size: .74rem; color: var(--ink-2); white-space: nowrap; pointer-events: none; }
.p-body h3 { font: 500 .88rem "Inter", sans-serif; color: var(--ink-3); margin: 18px 0 6px; }
.p-body p { margin: 8px 0; }
.nota { color: var(--ink-3); font-size: .86rem; }
.aviso { margin-top: 16px !important; font-size: .84rem; color: var(--ink-2); padding: 8px 10px; border: 1px dashed var(--line-2); }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
.moves { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.moves button { text-align: left; padding: 12px 14px 12px 16px; }
.seg { display: inline-flex; flex-wrap: wrap; }
.seg button + button { border-left: 0; }
.seg.mono button { font-family: "JetBrains Mono", monospace; font-size: .82rem; padding: 8px 13px; }
.inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inline .lbl { font-size: .88rem; color: var(--ink-3); min-width: 4.8em; }
.slider { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: .88rem; color: var(--ink-3); }
.slider input { flex: 1; min-width: 0; min-height: 44px; }
.slider output { min-width: 5ch; text-align: right; font: 600 1.05rem "JetBrains Mono", monospace; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--line-2); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 20px; margin-top: -9px; background: var(--ink); border: 0; }
input[type="range"]::-moz-range-track { height: 2px; background: var(--line-2); }
input[type="range"]::-moz-range-thumb { width: 10px; height: 20px; background: var(--ink); border: 0; border-radius: 0; }
input[type="range"]:disabled { opacity: .5; cursor: default; }
.mono-nota { font: 400 .78rem "JetBrains Mono", monospace; color: var(--ink-3); margin: 4px 0 0 !important; min-height: 1.2em; }
label.check { display: flex; align-items: center; gap: 10px; margin-top: 14px; cursor: pointer; font-size: .9rem; color: var(--ink-2); }
.plan h3 { margin-top: 20px; }
.plan button { display: block; width: 100%; text-align: left; margin-bottom: 6px; line-height: 1.35; padding-left: 16px; }
details { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 12px; }
summary { cursor: pointer; font: 600 1rem "Chakra Petch", sans-serif; color: var(--ink); }
.lista-ligamentos { padding-left: 1.1em; margin: 8px 0; }
.lista-ligamentos li { margin: 4px 0; }
.refs { margin-top: 28px !important; font-size: .75rem; color: var(--ink-4); }

/* gráficos (dibujados por visor-rodilla.js) */
.grafico { margin: 8px 0 0; }
.grafico figcaption { font: 600 .9rem "Chakra Petch", sans-serif; color: var(--ink-2); margin-bottom: 4px; }
.grafico svg { width: 100%; height: auto; display: block; background: rgba(7, 15, 22, .4); }
.grafico .zona { opacity: .12; }
.grafico .etiqueta { font: 10px "JetBrains Mono", monospace; fill: var(--ink-3); paint-order: stroke; stroke: #0B131D; stroke-width: 3px; }
.grafico .etiqueta.pequena { font-size: 8.5px; font-style: italic; }
.grafico .eje { stroke: var(--line-2); stroke-width: 1; }
.grafico .curva { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.grafico .curva.referencia { stroke: var(--ink-3); stroke-width: 1.2; }
.grafico .tope { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico .tope-final { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico .punto { fill: var(--ink); stroke: var(--bg-night); stroke-width: 2; }
.tissue-key { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--ink-3); margin-top: 10px; }
.tissue-key i { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 7px; }


@media (max-width: 900px) {
  .top { gap: 12px; padding: 0 16px; }
  .crumbs { display: none; }
  .crumb-back { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .lang { flex: none; }
  .lang button { padding: 6px 8px; min-height: 40px; }
  .page { padding: 32px 16px 40px; }
  .pie-pagina { padding: 0 16px 24px; }
  .regions { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  .region.open { grid-row: auto; min-height: 380px; }
  .region.open .copy { max-width: 62%; }
  .region.open .art { right: -18%; opacity: .6; }
  .limb { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .group li { flex-wrap: wrap; column-gap: 12px; row-gap: 2px; }
  .feature { grid-template-columns: minmax(0, 1fr) minmax(70px, 110px); padding: 22px; }
  .feature h2 { overflow-wrap: anywhere; }
  body.con-visor { height: auto; overflow: visible; display: block; }
  .app, .app.plegado { grid-template-columns: 1fr; grid-template-rows: 56vh auto; height: auto; }
  .app.plegado .panel { display: flex; }
  .stage { height: 56vh; }
  .panel { border-left: 0; border-top: 1px solid var(--line); }
  .p-head { padding: 16px 16px 0; }
  .hide-panel, .open-panel { display: none; }
  .p-body { overflow: visible; padding: 4px 16px 150px; }
  /* subtítulo pegado abajo de la pantalla, fondo opaco */
  .caption { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; margin: 0; max-height: 32vh; overflow: auto; border-left: 0; border-top: 2px solid var(--ink); background: var(--panel-2); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 10; }
  .caption p { font-size: .95rem; }
  .ring { transform: scale(.7); }
  .tools { left: 10px; top: 10px; }
  .tool { padding: 6px 10px; font-size: .8rem; min-height: 40px; }
  .pop-box { width: min(310px, calc(100vw - 32px)); }
  .pop { position: static; } /* las dos ventanas se abren alineadas a la izquierda de la barra */
  .gizmo { left: auto; bottom: auto; right: 2px; top: 2px; width: 84px; height: 84px; }
  .views { right: 10px; bottom: 10px; }
  .views button { font-size: .8rem; padding: 8px 10px; }
  .tabs button { font-size: .86rem; min-height: 44px; }
  button { min-height: 44px; }
  .seg.mono button { min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .view { animation: none; }
  .caption { transition: none; }
  .ring .spin { animation: none; }
  .scan.run { animation: none; }
  .stage.glitch .visor { filter: none; }
  .region, .feature, .region .art, .cta { transition: none !important; }
}