:root {
  --bg: #F7F6F2;
  --ink: #21231F;
  --ink-soft: #5B5D57;
  --accent: #546D78;
  --azul: #96B7C6;
  --nota-bg: #D3DBDE;
  --surface: #FFFFFF;
  --line: rgba(33, 35, 31, 0.14);
  --oscuro: #1B1D1A;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --u: min(1vw, 1.6vh);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: 'Space Grotesk', system-ui, sans-serif; font-size: calc(var(--u) * 2.3); line-height: 1.4; overflow: hidden; -webkit-font-smoothing: antialiased; }

.diapo { position: fixed; inset: 0 0 calc(var(--u) * 6) 0; display: none; flex-direction: column; justify-content: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 5) max(calc(var(--u) * 8), calc((100vw - 1200px) / 2)); }
.diapo.activa { display: flex; }
html.anim .diapo.activa > * { animation: entra 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
html.anim .diapo.activa > :nth-child(2) { animation-delay: 0.08s; }
html.anim .diapo.activa > :nth-child(3) { animation-delay: 0.16s; }
html.anim .diapo.activa > :nth-child(4) { animation-delay: 0.24s; }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }

h1, h2, h3, p, ul { margin: 0; }
h1 { font-size: calc(var(--u) * 10); line-height: 1; letter-spacing: -0.03em; font-weight: 600; }
h2 { font-size: calc(var(--u) * 5); line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; }
h3 { font-size: calc(var(--u) * 3); font-weight: 600; }
strong { font-weight: 600; }
.almo { color: var(--accent); }
.kicker, .mono, .pie { font-family: var(--mono); }
.kicker { font-size: calc(var(--u) * 1.8); color: var(--accent); }
.sub { font-size: calc(var(--u) * 3); color: var(--ink-soft); }
.grande { font-size: calc(var(--u) * 4); line-height: 1.25; max-width: 30ch; }
.acento { color: var(--accent); font-weight: 600; }
.nota { background: var(--nota-bg); border-radius: 6px; padding: calc(var(--u) * 1.4) calc(var(--u) * 2); font-size: calc(var(--u) * 2.1); align-self: flex-start; }
.pie { font-size: calc(var(--u) * 1.6); color: var(--ink-soft); margin-top: calc(var(--u) * 1.2); }

.portada { justify-content: center; }
.cierre { font-size: calc(var(--u) * 8); }
.boton { display: inline-block; margin-top: calc(var(--u) * 2); padding: calc(var(--u) * 1.3) calc(var(--u) * 2.4); border: 1.5px dashed var(--ink); border-radius: 6px; color: var(--ink); text-decoration: none; font-size: calc(var(--u) * 2.2); }
.boton:hover { background: var(--surface); }

.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * 3); }
.dos.centro { align-items: center; }
.tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: calc(var(--u) * 3); display: grid; gap: calc(var(--u) * 1.5); align-content: start; }
.tarjeta.oscura, .venn-caja.oscura { background: var(--oscuro); color: #F2F1EC; border-color: var(--oscuro); }
.tarjeta ul, .grande-lista { padding-left: 1.1em; display: grid; gap: calc(var(--u) * 1); }
.grande-lista { font-size: calc(var(--u) * 2.5); gap: calc(var(--u) * 1.4); }
.grande-lista li::marker, .tarjeta li::marker { color: var(--accent); }
.oscura li::marker { color: var(--azul); }

.muestra { display: flex; gap: calc(var(--u) * 1); }
.muestra span { width: calc(var(--u) * 5); aspect-ratio: 1; border-radius: 50%; }
.rgb span:nth-child(1) { background: #FF0000; } .rgb span:nth-child(2) { background: #00FF00; } .rgb span:nth-child(3) { background: #0000FF; }
.cmy span:nth-child(1) { background: #00AEEF; } .cmy span:nth-child(2) { background: #EC008C; } .cmy span:nth-child(3) { background: #FFF200; }

.espectro { display: grid; gap: calc(var(--u) * 0.6); }
.esp-barra { height: calc(var(--u) * 6); border-radius: 6px; background: linear-gradient(to left, #7a00c4 0%, #3d00ff 12%, #0050ff 25%, #00c8ff 38%, #00e050 50%, #b4f000 60%, #ffe800 68%, #ff9a00 78%, #ff2800 90%, #b40000 100%); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.esp-escala { position: relative; height: 1.5em; }
.esp-escala span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.esp-escala span:first-child { transform: none; } .esp-escala span:last-child { transform: translateX(-100%); }
.esp-escala, .esp-extremos, .k-escala { font-family: var(--mono); font-size: calc(var(--u) * 1.5); color: var(--ink-soft); }
.esp-extremos { display: flex; justify-content: space-between; }
.esquema-em { display: grid; gap: calc(var(--u) * 0.6); }
.em { --em-vis: linear-gradient(to left, #7a00c4, #0050ff, #00c8ff, #00e050, #ffe800, #ff9a00, #ff2800); }
.em-ejes { display: flex; justify-content: space-between; gap: 12px; font-size: calc(var(--u) * 1.5); color: var(--ink-soft); }
.em-onda { display: block; width: 100%; height: calc(var(--u) * 4); margin: calc(var(--u) * 0.4) 0 calc(var(--u) * 0.8); }
.em-onda path { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.em-fila { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; text-align: center; }
.em-nombres { font-size: calc(var(--u) * 1.7); font-weight: 600; align-items: end; line-height: 1.2; margin-bottom: calc(var(--u) * 0.6); }
.em-barra span { height: calc(var(--u) * 3.4); background: rgba(33, 35, 31, 0.12); }
.em-barra span:first-child { border-radius: 6px 0 0 6px; } .em-barra span:last-child { border-radius: 0 6px 6px 0; }
.em-barra .em-vis { background: var(--em-vis); }
.em-barra span, .em-zoom { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.em-medida { margin-top: calc(var(--u) * 0.6); font-family: var(--mono); font-size: calc(var(--u) * 1.35); color: var(--ink-soft); line-height: 1.3; }
.em-uso { margin-top: calc(var(--u) * 0.3); font-size: calc(var(--u) * 1.45); color: var(--ink-soft); line-height: 1.3; }
.em-nombres .em-vis, .em-medida .em-vis, .em-uso .em-vis { color: var(--accent); font-weight: 600; }
.em-zoom { height: calc(var(--u) * 3.5); margin-top: calc(var(--u) * 0.8); background: rgba(84, 109, 120, 0.16); clip-path: polygon(42.86% 0, 57.14% 0, 100% 100%, 0 100%); }
.em-ampliado { display: none; }
html.anim .diapo.activa .esp-barra, html.anim .diapo.activa .k-barra { animation: barrido 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s both; }
@keyframes barrido { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.demo { display: flex; justify-content: center; min-height: 0; }
.demo svg { width: auto; max-width: 100%; max-height: 52vh; height: auto; display: block; border-radius: 10px; }
.prisma, .escena { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.escena { font-family: inherit; }
@keyframes pr-traza { to { stroke-dashoffset: 0; } }
.tm-textos text { opacity: 0.75; }
html.anim .escena .tm-absorbe { stroke-dasharray: 60; stroke-dashoffset: 60; }
html.anim .escena .tm-textos text { opacity: 0; }
html.anim .escena.encendido .tm-absorbe { animation: tm-absorbe 0.9s ease-out calc(1s + var(--i) * 0.06s) forwards; }
html.anim .escena.encendido .tm-iris { animation: tm-iris 0.8s ease-out 2.55s forwards; }
html.anim .escena.encendido .tm-t1 { animation: tm-texto 0.5s ease 0.5s forwards; }
html.anim .escena.encendido .tm-t2 { animation: tm-texto 0.5s ease 1.4s forwards; }
html.anim .escena.encendido .tm-t3 { animation: tm-texto 0.5s ease 2.3s forwards; }
@keyframes tm-absorbe { 50% { stroke-dashoffset: 0; opacity: 1; } to { stroke-dashoffset: 0; opacity: 0; } }
@keyframes tm-iris { 40% { fill: #F05A4F; } to { fill: #546D78; } }
@keyframes tm-texto { to { opacity: 0.75; } }

.conos { display: flex; justify-content: center; gap: calc(var(--u) * 2.5); }
.conos span { width: calc(var(--u) * 9); height: calc(var(--u) * 20); clip-path: polygon(50% 0, 100% 100%, 0 100%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: calc(var(--u) * 2); color: #FFFFFF; font-weight: 600; font-size: calc(var(--u) * 2.4); }
.c-r { background: #E2231A; } .c-v { background: #39B54A; } .c-a { background: #2E3192; }

.residual { display: flex; gap: calc(var(--u) * 3); }
.residual span { position: relative; width: calc(var(--u) * 18); aspect-ratio: 1; border: 1px solid var(--line); border-radius: 4px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.residual-rojo { background: #E2231A; } .residual-blanco { background: #FFFFFF; }
.residual span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #21231F; }

.props { display: grid; gap: calc(var(--u) * 2.4); }
.props p { margin-bottom: calc(var(--u) * 0.8); }
.tira { display: block; height: calc(var(--u) * 5); border-radius: 6px; }
.tira-tono { background: linear-gradient(90deg, hsl(0, 70%, 55%), hsl(60, 70%, 55%), hsl(120, 70%, 55%), hsl(180, 70%, 55%), hsl(240, 70%, 55%), hsl(300, 70%, 55%), hsl(360, 70%, 55%)); }
.tira-sat { background: linear-gradient(90deg, hsl(198, 0%, 55%), hsl(198, 100%, 45%)); }
.tira-lum { background: linear-gradient(90deg, hsl(198, 65%, 0%), hsl(198, 65%, 50%), hsl(198, 65%, 100%)); border: 1px solid var(--line); }

.venn-caja { border-radius: 10px; padding: calc(var(--u) * 3); display: grid; gap: calc(var(--u) * 2); justify-items: center; text-align: center; background: var(--surface); border: 1px solid var(--line); }
.venn { position: relative; width: calc(var(--u) * 21); aspect-ratio: 1; isolation: isolate; }
.venn span { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; }
.venn span:nth-child(1) { left: 20%; top: 0; } .venn span:nth-child(2) { left: 0; top: 36%; } .venn span:nth-child(3) { left: 40%; top: 36%; }
.aditiva span { mix-blend-mode: screen; }
.aditiva span:nth-child(1) { background: #FF0000; } .aditiva span:nth-child(2) { background: #00FF00; } .aditiva span:nth-child(3) { background: #0000FF; }
.sustractiva span { mix-blend-mode: multiply; }
.sustractiva span:nth-child(1) { background: #00FFFF; } .sustractiva span:nth-child(2) { background: #FF00FF; } .sustractiva span:nth-child(3) { background: #FFFF00; }

.paletas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 3) calc(var(--u) * 4); }
.pal { display: grid; grid-template-columns: calc(var(--u) * 12) minmax(0, 1fr); gap: calc(var(--u) * 1.6); align-items: center; }
.pal p { font-size: calc(var(--u) * 1.7); font-weight: 600; margin-bottom: calc(var(--u) * 0.8); line-height: 1.2; }
.pal-colores { display: flex; height: calc(var(--u) * 5); border-radius: 6px; overflow: hidden; }
.pal-colores span { flex: 1; }
.rueda { display: block; width: 100%; height: auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rueda-forma line, .rueda-forma polygon { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.rueda-marcas circle { stroke: var(--surface); stroke-width: 2; }
.ruedas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 4); }
.rueda-caja { margin: 0; display: grid; gap: calc(var(--u) * 1.4); justify-items: center; text-align: center; }
.rueda-caja .rueda { width: min(100%, calc(var(--u) * 24)); }
.rueda-caja figcaption { display: grid; gap: calc(var(--u) * 0.3); font-size: calc(var(--u) * 2); }
.rueda-caja figcaption span { color: var(--ink-soft); }
.rueda-caja figcaption span:last-child { color: var(--ink); }

.maqueta { position: relative; display: grid; gap: calc(var(--u) * 1.4); align-content: start; aspect-ratio: 4 / 3; padding: calc(var(--u) * 2.4); background: #F7F6F2; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(33, 35, 31, 0.08); }
.maqueta span, .maqueta i { display: block; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.mq-barra { height: calc(var(--u) * 3); margin: calc(var(--u) * -2.4) calc(var(--u) * -2.4) calc(var(--u) * 0.6); border-radius: 10px 10px 0 0; background: #546D78; }
.mq-titulo { width: 60%; height: calc(var(--u) * 2.4); border-radius: 3px; background: #546D78; }
.mq-linea { width: 90%; height: calc(var(--u) * 1); border-radius: 3px; background: rgba(84, 109, 120, 0.35); }
.mq-linea.corta { width: 70%; }
.mq-tarjetas { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.2); }
.mq-tarjetas i { height: calc(var(--u) * 8); border-radius: 6px; background: #546D78; opacity: 0.85; }
.mq-boton { justify-self: start; width: calc(var(--u) * 12); height: calc(var(--u) * 3.6); border-radius: 6px; background: #DA8A2F; }
.reparto { list-style: none; padding: 0; display: grid; gap: calc(var(--u) * 2.2); font-size: calc(var(--u) * 2.6); }
.reparto li { display: grid; grid-template-columns: auto 2.5em minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 1.6); }
.reparto strong { white-space: nowrap; }
.reparto span { flex: none; width: calc(var(--u) * 4.4); aspect-ratio: 1; border-radius: 6px; border: 1px solid var(--line); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.contrastes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); }
.ct { display: grid; justify-items: center; gap: calc(var(--u) * 0.4); padding: calc(var(--u) * 1.6) calc(var(--u) * 1); border-radius: 8px; border: 1px solid var(--line); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ct b { font-size: calc(var(--u) * 4.4); line-height: 1; font-weight: 600; }
.ct span { font-family: var(--mono); font-size: calc(var(--u) * 1.5); }

.tabla { border-collapse: collapse; width: 100%; font-size: calc(var(--u) * 2.2); background: var(--surface); border-radius: 10px; overflow: hidden; }
.tabla th, .tabla td { text-align: left; padding: calc(var(--u) * 1.3) calc(var(--u) * 2); border-bottom: 1px solid var(--line); }
.tabla thead th { background: var(--nota-bg); font-weight: 600; }
.tabla tbody th { font-weight: 600; }
.tabla tbody tr:last-child > * { border-bottom: 0; }

.gran-muestra { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; background: #546D78; }
.codigos { list-style: none; padding: 0; display: grid; gap: calc(var(--u) * 1.6); }
.codigos li { display: grid; gap: calc(var(--u) * 0.3); }
.codigos span { font-size: calc(var(--u) * 1.7); color: var(--ink-soft); }
.codigos code { font-family: var(--mono); font-size: calc(var(--u) * 3); }

.kelvin { display: grid; gap: calc(var(--u) * 1); }
.k-escala { position: relative; display: block; height: 2.9em; }
.k-escala span { white-space: nowrap; position: absolute; left: calc(var(--k) * 100%); transform: translateX(calc(var(--k) * -100%)); }
.k-escala small { display: block; font-size: 0.85em; opacity: 0.8; }
.k-barra { display: block; height: calc(var(--u) * 9); border-radius: 6px; background: linear-gradient(90deg, #FF8A12, #FFB46B 14%, #FFE4CE 40%, #FFF9FB 55%, #E1E8FF 75%, #C9D6FF); border: 1px solid var(--line); }


code { font-family: var(--mono); font-size: 0.86em; background: rgba(84, 109, 120, 0.12); padding: 0.05em 0.35em; border-radius: 4px; }
.grande-p { font-size: calc(var(--u) * 2.6); line-height: 1.35; }
.pila { display: grid; gap: calc(var(--u) * 1.2); align-content: start; min-width: 0; }
.codigo { margin: 0; background: var(--oscuro); color: #F2F1EC; border-radius: 8px; padding: calc(var(--u) * 2) calc(var(--u) * 2.4); font-family: var(--mono); font-size: calc(var(--u) * 1.9); line-height: 1.6; white-space: pre; overflow-x: auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.codigo-grande { font-size: calc(var(--u) * 2.8); }
.codigo code, .a-codigo { background: none; padding: 0; font-size: inherit; border-radius: 0; }
.t, .sel { color: #96B7C6; }
.at, .prop { color: #F0B35E; }
.v, .val { color: #B9DB8F; }
.tx { color: #F2F1EC; }
.p { color: #A9ACA5; }
.cm { color: #8E918A; font-style: italic; }

.anatomia { display: grid; grid-template-columns: repeat(5, auto); justify-content: start; align-items: end; row-gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 2.6) calc(var(--u) * 3); background: var(--oscuro); border-radius: 10px; color: #F2F1EC; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ana-css { grid-template-columns: repeat(4, auto); }
.a-codigo { grid-row: 2; font-family: var(--mono); font-size: calc(var(--u) * 2.6); white-space: pre; }
.a-arriba { grid-row: 1; }
.a-abajo { grid-row: 3; }
.a-todo { grid-row: 4; }
.a-arriba i, .a-abajo i { display: block; font-style: normal; font-family: var(--mono); font-size: calc(var(--u) * 1.5); text-align: center; color: #F2F1EC; --c: #F2F1EC; }
.a-abajo i, .a-arriba i { color: var(--c); }
.a-abajo i::before, .a-arriba i::after { content: ""; display: block; height: calc(var(--u) * 1.1); margin: 0 4px; border: 2px solid var(--c); }
.a-abajo i::before { margin-bottom: calc(var(--u) * 0.5); border-top: 0; border-radius: 0 0 5px 5px; }
.a-arriba i::after { margin-top: calc(var(--u) * 0.5); border-bottom: 0; border-radius: 5px 5px 0 0; }
.a-todo i { --c: #A9ACA5; }
.c-t { --c: #96B7C6 !important; } .c-at { --c: #F0B35E !important; } .c-tx { --c: #F2F1EC !important; } .c-prop { --c: #F0B35E !important; } .c-val { --c: #B9DB8F !important; }

.navegador { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: 0 10px 30px rgba(33, 35, 31, 0.08); }
.nav-barra { display: flex; align-items: center; gap: 6px; padding: calc(var(--u) * 1) calc(var(--u) * 1.4); background: #ECEBE6; border-bottom: 1px solid var(--line); }
.nav-barra > span { width: 10px; height: 10px; border-radius: 50%; background: #CFCEC8; }
.nav-barra em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: calc(var(--u) * 1.4); color: var(--ink-soft); }
.nav-pestana { margin-left: calc(var(--u) * 1.2); padding: calc(var(--u) * 0.5) calc(var(--u) * 1.4); border-radius: 6px 6px 0 0; background: rgba(240, 179, 94, 0.35); font-weight: 500; font-size: calc(var(--u) * 1.5); }
.nav-pagina { padding: calc(var(--u) * 2.4); min-height: calc(var(--u) * 20); }
.sin-css { font-family: 'Times New Roman', Times, serif; color: #000000; font-size: calc(var(--u) * 2); line-height: 1.2; }
.sin-css h1 { font-size: 2em; font-weight: 700; margin: 0 0 0.5em; letter-spacing: 0; line-height: 1.1; }
.sin-css p { margin: 0 0 1em; }
.sin-css ul { margin: 0 0 1em; padding-left: 40px; }
.sin-css a { color: #0000EE; text-decoration: underline; }
.con-css { background: #F7F6F2; font-size: calc(var(--u) * 2); }
.con-css h1 { font-size: calc(var(--u) * 4.4); color: var(--ink); margin-bottom: calc(var(--u) * 0.6); }
.con-css p { color: var(--ink-soft); margin-bottom: calc(var(--u) * 1.4); }
.con-css ul { list-style: none; padding: 0; display: flex; gap: 8px; margin-bottom: calc(var(--u) * 2); }
.con-css li { font-family: var(--mono); font-size: calc(var(--u) * 1.4); padding: 4px 10px; border-radius: 99px; background: var(--nota-bg); color: var(--accent); }
.con-css a { display: inline-block; padding: calc(var(--u) * 1) calc(var(--u) * 2); border-radius: 6px; background: var(--accent); color: #FFFFFF; text-decoration: none; font-weight: 600; }
.nav-body { background: rgba(150, 183, 198, 0.22); }

.separador h2.cierre { font-size: calc(var(--u) * 12); }
.etiqueta-mal, .etiqueta-bien { font-family: var(--mono); font-size: calc(var(--u) * 1.6); font-weight: 500; }
.etiqueta-mal { color: #B5432F; } .etiqueta-bien { color: #3F7D4C; }
.marca-mal { text-decoration: underline wavy #E25B45; text-underline-offset: 4px; }

.cajas { padding: calc(var(--u) * 2); border: 2px solid var(--accent); border-radius: 10px; background: var(--surface); display: grid; gap: calc(var(--u) * 1); }
.caja-n { font-family: var(--mono); font-size: calc(var(--u) * 1.5); color: var(--accent); }
.caja-dentro { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 1.4); font-size: calc(var(--u) * 2.2); }
.caja-in { display: grid; gap: 4px; padding: calc(var(--u) * 1.4) calc(var(--u) * 2); border: 2px solid #DA8A2F; border-radius: 8px; font-weight: 700; }
.caja-in .caja-n { color: #B86E1C; font-weight: 400; }

.estructura { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.estructura .codigo { font-size: calc(var(--u) * 1.55); }
.anidar { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); }
.anidar .codigo { font-size: calc(var(--u) * 1.6); }
.anidar .codigo-medio { font-size: calc(var(--u) * 1.8); }
.expl { font-size: calc(var(--u) * 1.8); color: var(--ink-soft); }
.oscura .pie { color: #A9ACA5; }
.navegador { display: flex; flex-direction: column; }
.navegador .nav-pagina { flex: 1; }
.zona-head { background: rgba(240, 179, 94, 0.16); display: inline-block; width: 100%; }
.zona-body { background: rgba(150, 183, 198, 0.2); display: inline-block; width: 100%; }
.leyenda { list-style: none; padding: 0; display: grid; gap: calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.9); }
.leyenda li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--u) * 1.2); align-items: start; }
.leyenda li > span:first-child { width: calc(var(--u) * 2.4); aspect-ratio: 1; border-radius: 4px; margin-top: 0.15em; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.leyenda-grande { font-size: calc(var(--u) * 2.3); }
.sw-head { background: rgba(240, 179, 94, 0.55); } .sw-body { background: rgba(150, 183, 198, 0.7); }
.sw-sel { background: #96B7C6; } .sw-prop { background: #F0B35E; } .sw-val { background: #B9DB8F; } .sw-p { background: #A9ACA5; }

.etiquetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.4) calc(var(--u) * 3); }
.etiquetas > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: baseline; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.3) 0; border-bottom: 1px solid var(--line); font-size: calc(var(--u) * 2.1); }
.etiquetas code { font-size: calc(var(--u) * 2); color: var(--accent); background: none; padding: 0; }
.etiquetas span { color: var(--ink-soft); font-size: calc(var(--u) * 1.9); }

.flujo { display: grid; gap: calc(var(--u) * 1); padding: calc(var(--u) * 2); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: calc(var(--u) * 2); }
.bq { padding: calc(var(--u) * 1) calc(var(--u) * 1.4); border: 2px solid var(--accent); border-radius: 6px; background: rgba(150, 183, 198, 0.15); line-height: 1.9; }
.ln { padding: 2px 6px; border: 2px solid #DA8A2F; border-radius: 5px; background: rgba(218, 138, 47, 0.12); }
.flujo b { font-family: var(--mono); font-weight: 400; font-size: 0.68em; margin-right: 6px; color: var(--accent); }
.ln b { color: #B86E1C; }

.selectores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 2.4); }
.sel-caja { display: grid; gap: calc(var(--u) * 1); align-content: start; }
.sel-caja h3 { font-size: calc(var(--u) * 2.4); }
.sel-caja .codigo { font-size: calc(var(--u) * 2.2); }
.mini { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-family: var(--mono); font-size: calc(var(--u) * 1.5); }
.mini li { padding: calc(var(--u) * 0.6) calc(var(--u) * 1.2); border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink-soft); }
.mini li.si { background: #96B7C6; border-color: #96B7C6; color: var(--ink); font-weight: 500; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.formas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 2.4); align-items: stretch; }
.forma { display: grid; grid-template-rows: auto 1fr auto; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.6); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); min-width: 0; }
.forma h3 { font-size: calc(var(--u) * 2.4); display: flex; align-items: center; gap: calc(var(--u) * 1); }
.forma .codigo { font-size: calc(var(--u) * 1.3); padding: calc(var(--u) * 1.4); }
.num { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--nota-bg); color: var(--accent); font-family: var(--mono); font-size: 0.7em; }
.alcance { font-size: calc(var(--u) * 1.9); color: var(--ink-soft); }
.forma-buena { border: 2px solid var(--accent); }
.forma-buena .num { background: var(--accent); color: #FFFFFF; }

.enlazado { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: calc(var(--u) * 1); max-width: calc(var(--u) * 80); }
.archivos { display: grid; gap: calc(var(--u) * 2); }
.archivo { display: inline-block; font-family: var(--mono); font-size: calc(var(--u) * 2); padding: calc(var(--u) * 1.4) calc(var(--u) * 2); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.archivo-css { border: 2px solid var(--accent); background: var(--nota-bg); font-weight: 500; }
.flechas { width: 100%; height: calc(var(--u) * 22); }
.flechas path { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.botones-cierre { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.6); }


.c-p { --c: #A9ACA5 !important; }
.linea { list-style: none; padding: calc(var(--u) * 3) 0 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 3); border-top: 2px solid var(--accent); }
.linea li { position: relative; display: grid; gap: calc(var(--u) * 0.8); align-content: start; }
.linea li::before { content: ""; position: absolute; top: calc(var(--u) * -3 - 8px); left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); }
.linea b { font-weight: 500; font-size: calc(var(--u) * 3.6); color: var(--accent); line-height: 1; }
.linea strong { font-size: calc(var(--u) * 2.6); }
.linea span { font-size: calc(var(--u) * 2); color: var(--ink-soft); line-height: 1.4; }
html.anim .diapo.activa .linea li { animation: entra 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
html.anim .diapo.activa .linea li:nth-child(2) { animation-delay: 0.15s; }
html.anim .diapo.activa .linea li:nth-child(3) { animation-delay: 0.3s; }
html.anim .diapo.activa .linea li:nth-child(4) { animation-delay: 0.45s; }

.nav-url { margin-left: calc(var(--u) * 1.2); flex: 1; padding: calc(var(--u) * 0.4) calc(var(--u) * 1.2); border-radius: 99px; background: var(--surface); font-weight: 400; font-size: calc(var(--u) * 1.5); color: var(--ink-soft); }
.cern { font-size: calc(var(--u) * 1.8); }
.cern h1 { font-size: 1.8em; }
.cern dl { margin: 0; } .cern dt { margin: 0 0 0.3em; }

.servicios { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(var(--u) * 1.2); }
.svc { display: grid; gap: calc(var(--u) * 0.4); justify-items: center; text-align: center; padding: calc(var(--u) * 1.8) calc(var(--u) * 0.8); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.svc i { font-style: normal; font-family: var(--mono); font-size: calc(var(--u) * 3); color: var(--accent); line-height: 1.2; }
.svc strong { font-size: calc(var(--u) * 1.8); }
.svc span { font-size: calc(var(--u) * 1.5); color: var(--ink-soft); }
.svc-web { border: 2px solid var(--accent); background: var(--nota-bg); }
.red { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--u) * 2); align-items: center; padding: calc(var(--u) * 2) calc(var(--u) * 2.6); border-radius: 10px; background: var(--oscuro); color: #F2F1EC; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.red strong { font-size: calc(var(--u) * 2.4); white-space: nowrap; }
.red span { font-size: calc(var(--u) * 1.9); color: #C9CBC5; }

.terminal { margin: 0; border-radius: 10px; overflow: hidden; background: var(--oscuro); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.terminal .nav-barra { background: #2B2D29; border-color: #2B2D29; }
.terminal .nav-barra > span { background: #55574F; }
.terminal .nav-barra em { color: #A9ACA5; }
.terminal pre { margin: 0; padding: calc(var(--u) * 2) calc(var(--u) * 2.4); font-family: var(--mono); font-size: calc(var(--u) * 1.75); line-height: 1.7; color: #F2F1EC; white-space: pre; overflow-x: auto; }
.pr { color: #96B7C6; } .sal { color: #B9DB8F; }

.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 4); counter-reset: none; }
.pasos li { position: relative; display: grid; gap: calc(var(--u) * 0.8); align-content: start; padding: calc(var(--u) * 2.4); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.pasos li + li::before { content: "→"; position: absolute; left: calc(var(--u) * -3.4); top: 50%; transform: translateY(-50%); font-size: calc(var(--u) * 3); color: var(--accent); }
.pasos b, .viaje b { font-weight: 500; color: var(--accent); font-size: calc(var(--u) * 1.7); }
.pasos strong { font-size: calc(var(--u) * 3.2); }
.pasos span { font-size: calc(var(--u) * 2); color: var(--ink-soft); }
.marcas { font-family: var(--mono); font-size: calc(var(--u) * 1.8); opacity: 0.75; }

.motores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 2.4); }
.motores div { display: grid; gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 2.4); border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.motores strong { font-family: var(--mono); font-weight: 500; font-size: calc(var(--u) * 3.4); color: var(--accent); }
.motores span { font-size: calc(var(--u) * 2.2); }

.conversacion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: calc(var(--u) * 2); align-items: center; }
.extremo { display: grid; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 2.6); border: 2px solid var(--accent); border-radius: 10px; background: var(--surface); }
.extremo strong { font-size: calc(var(--u) * 3); }
.extremo span { font-size: calc(var(--u) * 1.9); color: var(--ink-soft); }
.extremo-srv { background: var(--oscuro); border-color: var(--oscuro); color: #F2F1EC; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.extremo-srv span { color: #C9CBC5; }
.mensajes { display: grid; gap: calc(var(--u) * 2.4); font-family: var(--mono); font-size: calc(var(--u) * 1.7); color: var(--accent); }
.mensajes span { position: relative; padding-bottom: 8px; border-bottom: 2px solid currentColor; text-align: center; }
.mensajes span::after { content: ""; position: absolute; bottom: -7px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.mensajes .ida::after { right: -2px; border-left: 10px solid currentColor; }
.mensajes .vuelta { color: #B86E1C; }
.mensajes .vuelta::after { left: -2px; border-right: 10px solid currentColor; }

.viaje { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--u) * 1.4); }
.viaje li { display: grid; gap: calc(var(--u) * 0.6); align-content: start; padding: calc(var(--u) * 1.8) calc(var(--u) * 1.6); border-top: 4px solid var(--accent); border-radius: 4px; background: var(--surface); }
.viaje strong { font-size: calc(var(--u) * 2.1); }
.viaje span { font-size: calc(var(--u) * 1.8); color: var(--ink-soft); }
html.anim .diapo.activa .viaje li { animation: entra 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(0.3s + var(--n) * 0.45s); }

.codigos-estado { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 2); }
.codigos-estado div { display: grid; align-content: start; gap: calc(var(--u) * 1); padding: calc(var(--u) * 2.4); border-radius: 10px; background: var(--surface); border-top: 6px solid var(--c); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.codigos-estado b { font-weight: 500; font-size: calc(var(--u) * 6); line-height: 1; color: var(--c); }
.codigos-estado span { font-size: calc(var(--u) * 2); }
.ce-ok { --c: #3F7D4C; } .ce-mov { --c: #546D78; } .ce-no { --c: #C27A26; } .ce-err { --c: #B5432F; }

.agenda { display: grid; gap: 2px; padding: calc(var(--u) * 2); border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(33, 35, 31, 0.08); }
.agenda-tit { font-size: calc(var(--u) * 1.6); color: var(--accent); margin-bottom: calc(var(--u) * 1); }
.contacto { display: grid; gap: 2px; padding: calc(var(--u) * 1.2) 0; border-top: 1px solid var(--line); }
.contacto strong { font-size: calc(var(--u) * 2.2); }
.contacto span { font-size: calc(var(--u) * 1.8); color: var(--ink-soft); }

.ana-url { grid-template-columns: repeat(5, auto); }
.ana-url .a-codigo { font-size: calc(var(--u) * 2.1); }
.ana-url .a-abajo { contain: inline-size; align-self: start; }
.ana-url .a-abajo i { display: flex; flex-direction: column; align-items: center; white-space: nowrap; }
.ana-url .a-abajo i::before { align-self: stretch; }
.ana-url .baja i::before { height: calc(var(--u) * 4.6); }
.partes-url { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1) calc(var(--u) * 3); font-size: calc(var(--u) * 2); }

.h2-code { font-size: 0.9em; background: none; padding: 0; color: var(--accent); }
.carpeta { display: grid; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 2.4); border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.carpeta p { font-size: calc(var(--u) * 2.2); color: var(--accent); }
.arch { font-family: var(--mono); font-size: calc(var(--u) * 2); padding: calc(var(--u) * 0.8) calc(var(--u) * 1.4); margin-left: calc(var(--u) * 2.4); border-left: 2px solid var(--line); }
.arch-index { border-left-color: var(--accent); background: var(--nota-bg); font-weight: 500; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.barras-url { display: grid; gap: calc(var(--u) * 1.6); max-width: calc(var(--u) * 70); }
.barra-url { display: flex; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.3) calc(var(--u) * 2.2); border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-family: var(--mono); font-size: calc(var(--u) * 2.2); }
.barra-url svg { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); flex: none; }
.barra-url svg rect { fill: #3F7D4C; } .barra-url svg path { stroke: #3F7D4C; stroke-width: 1.6; }
.insegura b { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: calc(var(--u) * 1.8); color: #B5432F; white-space: nowrap; }
.insegura span { color: var(--ink-soft); }

.hiper figure { margin: 0; display: grid; gap: calc(var(--u) * 1); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.4); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.hiper figcaption { font-size: calc(var(--u) * 1.9); line-height: 1.35; }
.hiper-svg { width: 100%; height: auto; max-height: 24vh; }
.h-enlaces line { stroke: #C9CBC5; stroke-width: 2; }
.h-camino line { stroke: #DA8A2F; stroke-width: 3; }
.h-nodos rect { fill: var(--nota-bg); stroke: var(--accent); stroke-width: 2; }
html.anim .diapo.activa .h-camino line { stroke-dasharray: 300; stroke-dashoffset: 300; animation: pr-traza 1.6s ease 0.6s forwards; }


.codigo-medio { font-size: calc(var(--u) * 2); }
.demo-caja { display: grid; }
.fx-demo { padding: calc(var(--u) * 1.4); border: 2px dashed var(--accent); border-radius: 8px; background: var(--surface); min-width: 0; }
.fx-demo.apilado { display: grid; gap: 8px; }
.el { display: grid; place-items: center; min-width: calc(var(--u) * 6); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8); border-radius: 6px; background: var(--accent); color: #FFFFFF; font-family: var(--mono); font-weight: 500; font-size: calc(var(--u) * 2); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.el:nth-child(3n + 2) { background: #6F8B97; }
.el:nth-child(3n) { background: #3F5560; }
.el-alto { padding-top: calc(var(--u) * 3.2); padding-bottom: calc(var(--u) * 3.2); }
.el-ancho { padding-left: calc(var(--u) * 3); padding-right: calc(var(--u) * 3); font-family: 'Space Grotesk', sans-serif; }
.el-naranja { background: #DA8A2F !important; }
.repaso-texto { text-align: center; }
.repaso-texto p { margin: 0 0 calc(var(--u) * 1); font-size: calc(var(--u) * 2); }
.repaso-texto .el { display: inline-grid; }
.repaso-caja { max-width: 60%; margin: 0 auto; }
.fx-demo.alto { height: calc(var(--u) * 15); }
.fx-demo.centrado { height: calc(var(--u) * 26); }
.fx-demo.estrecho { max-width: calc(var(--u) * 48); }
.pie-m { font-family: var(--mono); font-size: calc(var(--u) * 1.5); color: var(--ink-soft); }
.muestrario { display: grid; gap: calc(var(--u) * 1.4); }
.muestrario > div { display: grid; grid-template-columns: calc(var(--u) * 20) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: calc(var(--u) * 2); align-items: center; }
.muestrario > div > code { grid-row: 1; font-size: calc(var(--u) * 1.9); background: none; padding: 0; color: var(--accent); }
.muestrario > div > .pie-m { grid-row: 2; grid-column: 1; align-self: start; font-size: calc(var(--u) * 1.3); }
.muestrario > div > .fx-demo { grid-column: 2; grid-row: 1 / 3; padding: calc(var(--u) * 0.9); }
.muestrario .el { padding: calc(var(--u) * 0.9) calc(var(--u) * 1.4); font-size: calc(var(--u) * 1.7); }
.muestrario-alto { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 2); }
.muestrario-alto > div { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: calc(var(--u) * 0.6); align-items: start; }
.muestrario-alto > div > code, .muestrario-alto > div > .pie-m { grid-column: 1; }
.muestrario-alto > div > .pie-m { grid-row: 2; min-height: 2.6em; }
.muestrario-alto > div > .fx-demo { grid-column: 1; grid-row: 3; }
.muestrario-alto .el-alto { padding-top: calc(var(--u) * 3); padding-bottom: calc(var(--u) * 3); }

.partes-flex { display: grid; gap: calc(var(--u) * 1); }
.pf-etq { font-family: var(--mono); font-size: calc(var(--u) * 1.6); }
.pf-padre { color: var(--accent); }
.pf-hijos { color: #B86E1C; justify-self: end; }
.partes-flex .el { outline: 3px solid rgba(218, 138, 47, 0.7); outline-offset: 2px; }

.ejes { position: relative; padding: 0 calc(var(--u) * 6) calc(var(--u) * 6) 0; }
.ejes-caja { display: flex; gap: 10px; min-height: calc(var(--u) * 26); }
.ejes[data-dir="column"] .ejes-caja { flex-direction: column; }
.eje { position: absolute; display: flex; align-items: center; justify-content: center; white-space: nowrap; font-family: var(--mono); font-size: calc(var(--u) * 1.35); color: var(--c); --c: var(--accent); }
.eje i { font-style: normal; background: var(--bg); padding: 0 6px; position: relative; }
.eje::before { content: ""; position: absolute; background: var(--c); }
.eje::after { content: ""; position: absolute; width: 0; height: 0; border: 7px solid transparent; }
.eje-cruzado { --c: #B86E1C; }
.ejes[data-dir="row"] .eje-principal, .ejes[data-dir="column"] .eje-cruzado { left: 0; right: calc(var(--u) * 6); bottom: calc(var(--u) * 1.2); height: calc(var(--u) * 3); }
.ejes[data-dir="row"] .eje-principal::before, .ejes[data-dir="column"] .eje-cruzado::before { left: 0; right: 6px; top: 50%; height: 2px; }
.ejes[data-dir="row"] .eje-principal::after, .ejes[data-dir="column"] .eje-cruzado::after { right: -6px; top: calc(50% - 7px); border-left: 12px solid var(--c); }
.ejes[data-dir="row"] .eje-cruzado, .ejes[data-dir="column"] .eje-principal { top: 0; bottom: calc(var(--u) * 6); right: calc(var(--u) * 1.2); width: calc(var(--u) * 3); writing-mode: vertical-rl; }
.ejes[data-dir="row"] .eje-cruzado::before, .ejes[data-dir="column"] .eje-principal::before { top: 0; bottom: 6px; left: 50%; width: 2px; }
.ejes[data-dir="row"] .eje-cruzado::after, .ejes[data-dir="column"] .eje-principal::after { bottom: -6px; left: calc(50% - 7px); border-top: 12px solid var(--c); }

.selector { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-family: var(--mono); font-size: calc(var(--u) * 1.5); padding: calc(var(--u) * 0.6) calc(var(--u) * 1.2); border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }

.menu-antes { margin: 0; padding-left: 1.4em; font-family: 'Times New Roman', Times, serif; font-size: calc(var(--u) * 2.2); }
.menu-antes a { color: #0000EE; text-decoration: underline; }
.menu-despues { display: flex; gap: calc(var(--u) * 3); list-style: none; padding: 0; margin: 0; font-size: calc(var(--u) * 2.2); }
.menu-despues a { color: var(--ink); font-weight: 500; }
.cabecera-demo { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 2) calc(var(--u) * 2.6); border: 2px dashed var(--accent); border-radius: 8px; background: var(--surface); }
.cd-logo { font-weight: 700; font-size: calc(var(--u) * 3); letter-spacing: -0.02em; }

.lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: calc(var(--u) * 3); align-items: start; }
.lab-controles { display: grid; gap: calc(var(--u) * 1.4); }
.lab-grupo { display: grid; gap: calc(var(--u) * 0.6); }
.lab-grupo > code { background: none; padding: 0; color: var(--accent); font-size: calc(var(--u) * 1.8); }
.lab-caja { min-height: calc(var(--u) * 19); }
.el.fijo { width: calc(var(--u) * 8); min-width: 0; padding-left: 0; padding-right: 0; }
.muestrario-alto .el { min-width: 0; padding-left: calc(var(--u) * 1.2); padding-right: calc(var(--u) * 1.2); }
.lab-codigo { font-size: calc(var(--u) * 1.5); padding: calc(var(--u) * 1.4) calc(var(--u) * 2); line-height: 1.5; }


.reticula { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 8px; row-gap: 8px; --pad: calc(var(--u) * 1.4 + 2px); }
.r-top, .r-bot { display: grid; grid-template-columns: 1fr 18px 1fr 18px 1fr; padding: 0 var(--pad); }
.r-izq { display: grid; grid-template-rows: 1fr 18px 1fr; padding: var(--pad) 0; }
.ret-caja .el { padding-top: calc(var(--u) * 2.4); padding-bottom: calc(var(--u) * 2.4); }
.r-marca { font-style: normal; font-family: var(--mono); font-size: calc(var(--u) * 1.5); color: #B86E1C; display: flex; align-items: center; white-space: nowrap; }
.r-arriba { flex-direction: column; }
.r-arriba::after { content: ""; align-self: stretch; height: 8px; margin-top: 4px; border: 2px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; }
.r-lado { writing-mode: vertical-rl; transform: rotate(180deg); flex-direction: column-reverse; }
.r-lado::before { content: ""; align-self: stretch; width: 8px; margin-top: 4px; border: 2px solid currentColor; border-left: 0; border-radius: 0 4px 4px 0; }
.r-abajo { flex-direction: column; justify-self: center; width: 18px; overflow: visible; }
.r-abajo::before { content: ""; align-self: stretch; height: 8px; margin-bottom: 4px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 4px 4px; }

.adapta { display: grid; gap: calc(var(--u) * 1.4); }
.adapta-control { display: flex; align-items: center; gap: calc(var(--u) * 1.6); }
.adapta-rango { flex: 1; max-width: calc(var(--u) * 40); accent-color: var(--accent); }
.adapta-cols { font-weight: 500; font-size: calc(var(--u) * 1.7); color: var(--accent); min-width: 9ch; }
.adapta-caja { width: 100%; transition: width 0.15s ease; }

.areas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * 3); align-items: start; }
.areas-codigo { font-size: calc(var(--u) * 1.55); }
.areas-caja { padding: calc(var(--u) * 1.2); border: 2px dashed var(--accent); border-radius: 8px; background: var(--surface); min-height: calc(var(--u) * 30); grid-template-rows: auto 1fr auto; }
.areas-caja .el { font-size: calc(var(--u) * 1.7); }
.area-main { min-height: calc(var(--u) * 12); }




.arch-dir { color: var(--accent); font-weight: 500; }
.arch-sub { margin-left: calc(var(--u) * 5); }
kbd { display: inline-block; min-width: 1.6em; padding: 0.1em 0.45em; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 6px; background: var(--surface); font-family: var(--mono); font-size: 0.82em; text-align: center; line-height: 1.4; }

.menu-mock { justify-self: center; width: min(100%, calc(var(--u) * 40)); border-radius: 10px; overflow: hidden; background: #252526; color: #CCCCCC; font-size: calc(var(--u) * 1.9); box-shadow: 0 10px 30px rgba(33, 35, 31, 0.15); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.mm-barra { margin: 0; padding: calc(var(--u) * 1) calc(var(--u) * 1.6); background: #3C3C3C; display: flex; gap: calc(var(--u) * 2); }
.mm-barra b { color: #FFFFFF; font-weight: 500; }
.menu-mock ul { list-style: none; margin: 0; padding: calc(var(--u) * 0.8) 0; }
.menu-mock li { padding: calc(var(--u) * 0.8) calc(var(--u) * 2.4); }
.mm-si { background: #04395E; color: #FFFFFF; outline: 1px solid #2B79C2; }

.vsc-dos { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); }
.vsc { position: relative; display: grid; grid-template-columns: calc(var(--u) * 4.4) calc(var(--u) * 16) minmax(0, 1fr); grid-template-rows: 1fr auto; border-radius: 10px; background: #1E1E1E; color: #CCCCCC; font-family: var(--mono); font-size: calc(var(--u) * 1.45); box-shadow: 0 12px 34px rgba(33, 35, 31, 0.18); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.vsc-actividad { position: relative; grid-row: 1; border-top-left-radius: 10px; background: #333333; display: grid; align-content: start; justify-items: center; gap: calc(var(--u) * 1.4); padding-top: calc(var(--u) * 1.4); }
.vsc-ico { width: calc(var(--u) * 2.2); aspect-ratio: 1; border: 2px solid #858585; border-radius: 3px; }
.vsc-ico-on { border-color: #FFFFFF; }
.vsc-ico-ext { border-radius: 2px; border-style: dashed; }
.vsc-explorador { position: relative; grid-row: 1; background: #252526; padding: calc(var(--u) * 1); display: grid; align-content: start; gap: 2px; }
.vsc-explorador p { margin: 0 0 calc(var(--u) * 0.6); font-size: 0.85em; font-weight: 500; color: #BBBBBB; display: flex; justify-content: space-between; gap: 6px; }
.vsc-f { padding: 2px calc(var(--u) * 0.8); padding-left: calc(var(--u) * 1.6); white-space: nowrap; }
.vsc-f-on { background: #37373D; color: #FFFFFF; }
.vsc-d { padding-left: calc(var(--u) * 0.8); }
.vsc-d::before { content: "› "; color: #858585; }
.vsc-f2 { padding-left: calc(var(--u) * 3); }
.vsc-centro { grid-row: 1; border-top-right-radius: 10px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.vsc-pestanas { display: flex; background: #252526; }
.vsc-centro .vsc-num { position: absolute; }
.vsc-centro { position: relative; overflow: visible; }
.vsc-tab { display: inline-flex; align-items: center; gap: 8px; padding: calc(var(--u) * 0.8) calc(var(--u) * 1.6); background: #2D2D2D; color: #969696; border-right: 1px solid #1E1E1E; font-family: var(--mono); font-size: calc(var(--u) * 1.45); }
.vsc-tab-on { background: #1E1E1E; color: #FFFFFF; }
.vsc-tab b { font-weight: 400; color: #FFFFFF; }
.vsc-tab .cerrar { color: #969696; }
.vsc-codigo { position: relative; margin: 0; padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6); white-space: pre; line-height: 1.6; overflow: hidden; }
.vsc-estado { position: relative; grid-column: 1 / -1; border-radius: 0 0 10px 10px; display: flex; justify-content: space-between; padding: calc(var(--u) * 0.5) calc(var(--u) * 1.4); background: #007ACC; color: #FFFFFF; font-size: 0.9em; }
.vsc-num { position: absolute; z-index: 2; display: grid; place-items: center; width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); border-radius: 50%; background: #DA8A2F; color: #FFFFFF; font-style: normal; font-family: var(--mono); font-size: calc(var(--u) * 1.4); font-weight: 500; }
.vsc-leyenda { margin: 0; padding-left: 1.6em; display: grid; gap: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2); }
.vsc-leyenda li::marker { color: #B86E1C; font-family: var(--mono); font-weight: 500; }
.vsc-solo-explorador { grid-template-columns: 1fr; grid-template-rows: auto; justify-self: center; width: min(100%, calc(var(--u) * 40)); font-size: calc(var(--u) * 1.8); }
.vsc-solo-explorador .vsc-explorador { padding: calc(var(--u) * 1.6); }
.vsc-botones { display: inline-flex; gap: 6px; }
.vsc-botones b { font-weight: 400; padding: 1px 6px; border-radius: 3px; background: #3C3C3C; color: #FFFFFF; font-size: 0.85em; }
.vsc-nuevo { outline: 1px solid #007ACC; background: #3C3C3C; color: #FFFFFF; }
.vsc-nuevo i { font-style: normal; color: #AEAFAD; animation: parpadeo-cursor 1s steps(1) infinite; }
@keyframes parpadeo-cursor { 50% { opacity: 0; } }

.nombres-dos { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.nombres { display: grid; grid-template-columns: auto auto; justify-content: start; gap: calc(var(--u) * 1) calc(var(--u) * 2.4); font-family: var(--mono); font-size: calc(var(--u) * 1.75); align-items: center; white-space: nowrap; }
.nm-mal { color: #B5432F; text-decoration: line-through; text-decoration-thickness: 2px; }
.nm-bien { color: #3F7D4C; }
.nm-bien::before { content: "→ "; color: var(--ink-soft); }

.tecleo { display: flex; align-items: center; gap: calc(var(--u) * 1.6); font-size: calc(var(--u) * 4.4); }
.tecla-txt { font-family: var(--mono); font-weight: 500; }
.mas { color: var(--ink-soft); font-size: 0.7em; }
.tecleo kbd { font-size: calc(var(--u) * 3); }
.pestanas-mock { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.2); border-radius: 8px; background: #252526; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pestanas-mock .pie-m { color: #BBBBBB; }

.atajos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.codigo-plantilla { font-size: calc(var(--u) * 1.6); }
.atajos > div { display: grid; grid-template-columns: calc(var(--u) * 16) calc(var(--u) * 18) minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 0.9) 0; border-bottom: 1px solid var(--line); font-size: calc(var(--u) * 2); }
.atajos kbd { font-size: calc(var(--u) * 1.7); }
.atajos b { font-weight: 500; }
.atajos-pie { margin-top: calc(var(--u) * -0.4); }
.fallos-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.6) calc(var(--u) * 3); }
.fallos-lista > div { display: grid; gap: calc(var(--u) * 0.4); padding: calc(var(--u) * 1.6) calc(var(--u) * 2); border-left: 4px solid #DA8A2F; background: var(--surface); border-radius: 0 8px 8px 0; }
.fallos-lista strong { font-size: calc(var(--u) * 2.2); }
.fallos-lista span { font-size: calc(var(--u) * 1.9); color: var(--ink-soft); }


.emmet-filas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 2) calc(var(--u) * 3); }
.emmet-filas > div { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 1.2); }
.em-ab { background: none; padding: 0; font-size: calc(var(--u) * 2.3); color: var(--accent); font-weight: 500; }
.em-flecha { font-family: var(--mono); font-size: calc(var(--u) * 1.4); color: var(--ink-soft); white-space: nowrap; }
.em-res { font-size: calc(var(--u) * 1.5); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6); }

.progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2; }
.progreso span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.35s ease; }
.barra { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 6); min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(16px, calc(var(--u) * 3)); font-size: 15px; z-index: 2; }
.volver { color: var(--ink-soft); text-decoration: none; }
.volver:hover { color: var(--ink); }
.contador { color: var(--ink-soft); font-size: 13px; }
.botones { display: flex; gap: 6px; }
.botones button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.botones button:hover { border-color: var(--accent); color: var(--accent); }
.botones button:disabled { opacity: 0.35; cursor: default; border-color: var(--line); color: var(--ink); }
:fullscreen .barra { opacity: 0; transition: opacity 0.3s; }
:fullscreen .barra:hover { opacity: 1; }

@media screen and (max-width: 760px), screen and (orientation: portrait) {
  :root { --u: min(1.8vw, 1.2vh); }
  body { overflow-y: auto; }
  .diapo { padding: 32px 16px 80px; justify-content: flex-start; inset: 0; overflow-y: auto; }
  .portada { justify-content: center; }
  .dos { grid-template-columns: minmax(0, 1fr); }
  .paletas, .ruedas, .selectores, .formas, .etiquetas, .estructura, .anidar, .lab, .muestrario-alto, .areas, .vsc-dos, .nombres-dos, .fallos-lista, .emmet-filas, .linea, .pasos, .motores, .conversacion, .viaje, .partes-url { grid-template-columns: minmax(0, 1fr); }
  .servicios, .codigos-estado { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos li + li::before { display: none; }
  .linea { border-top: 0; border-left: 2px solid var(--accent); padding: 0 0 0 20px; }
  .linea li::before { top: 4px; left: -29px; }
  .red { grid-template-columns: minmax(0, 1fr); }
  .codigo, .forma .codigo, .estructura .codigo, .anidar .codigo, .sel-caja .codigo, .codigo-grande { font-size: 12.5px; }
  .a-arriba i, .a-abajo i { font-size: 11px; }
  .a-codigo { font-size: 13px; }
  .anatomia { overflow-x: auto; padding: 16px; }
  .contrastes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rueda-caja { grid-template-columns: calc(var(--u) * 18) minmax(0, 1fr); align-items: center; text-align: left; }
  .rueda-caja figcaption { align-content: center; }
  .em-medida, .em-uso { display: none; }
  .em-nombres span { writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; text-align: left; }
  .k-escala span:nth-child(2) { display: none; }
  .tabla { font-size: 13px; }
  .tabla th, .tabla td { padding: 8px; }
  .barra { background: var(--bg); border-top: 1px solid var(--line); }
  .pantalla { display: none; }
}

@page { size: A4 landscape; margin: 0; }
@media print {
  body { overflow: visible; height: auto; --u: 2.3mm; }
  .diapo, .diapo.activa { position: relative; inset: auto; display: flex; width: 297mm; height: 210mm; padding: 16mm 22mm; break-after: page; page-break-after: always; overflow: hidden; }
  .diapo > * { animation: none !important; }
  .barra, .progreso { display: none; }
  .esp-barra, .k-barra, .tira, .pal-colores span, .muestra span, .conos span, .venn span, .gran-muestra, .tarjeta.oscura, .venn-caja.oscura, .nota, .tabla thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .demo svg { max-height: 115mm; }
  html.anim .escena .tm-textos text { opacity: 0.75; }
}