/* =====================================================================
CAMPUS · sistema visual
Cinco reglas que explican casi todo lo que sigue:
1. El color es un verbo: azul entender, ámbar recordar, violeta aplicar,
rojo evitar, verde lograr, neutro contexto. Nunca decorativo.
2. La serif aparece solo en matemática. Si algo está en serif, es una fórmula.
3. Toda secuencia se dibuja como recorrido: estaciones unidas por una línea
(índice, etapas, pasos de un ejemplo, procedimientos).
4. El cuadriculado marca lo que va a la carpeta: solo en fórmulas.
5. El movimiento responde al estudiante; nada se mueve por su cuenta.
===================================================================== */
/* ---------------------------------------------------------------- fuentes
Incluidas en assets/fonts para que el sitio se vea igual en cualquier equipo
y funcione sin conexión. Nombres propios para no chocar con versiones
instaladas en el sistema. */
@font-face{font-family:"Campus Sans";src:url(fonts/campus-sans.woff2) format("woff2");
font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Campus Sans";src:url(fonts/campus-sans-italica.woff2) format("woff2");
font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"Campus Mate";src:url(fonts/campus-mate.woff2) format("woff2");
font-weight:400 700;font-style:normal;font-display:swap}
/* Operadores, flechas y letras dobles (≈ ≤ √ ∞ ⇒ ℝ): la fuente de texto no los trae. */
@font-face{font-family:"Campus Simbolos";src:url(fonts/campus-simbolos.woff2) format("woff2");
font-weight:400;font-style:normal;font-display:swap;
unicode-range:U+2100-214F,U+2190-21FF,U+2200-22FF,U+1D538-1D56B}
/* ---------------------------------------------------------------- tokens */
:root{
--pagina:#ECEFF3; --hoja:#FCFCFD; --bg-sub:#F1F3F7; --bg-elev:#FFFFFF;
--bd:#DEE2E8; --bd-suave:#E9ECF0; --bd-fuerte:#C2C9D3;
--tx:#1D2531; --tx-2:#485263; --tx-3:#5F6979;
/* azul UTN: entender y "dónde estás" */
--ac:#2149A8; --ac-2:#183A8C; --ac-suave:#E8EEFA; --ac-bd:#9DB2E3; --sobre-ac:#FFFFFF;
--marca:rgba(33,73,168,.115);
/* familias semánticas · texto / fondo / borde */
--c1:#8F5600; --c1-bg:#FDF5E4; --c1-bd:#E2A33E; /* ámbar · recordar */
--c2:#AE2E29; --c2-bg:#FCEFED; --c2-bd:#DD675C; /* rojo · evitar */
--c3:#5A3EAE; --c3-bg:#F4F1FC; --c3-bd:#9481D8; /* violeta · aplicar */
--c4:#1B6E46; --c4-bg:#EAF5EE; --c4-bd:#3B9C69; /* verde · lograr */
--c5:#13677F; --c5-bg:#E7F3F7; --c5-bd:#3E93AF; /* cian · solo figuras */
--nt:#485263; --nt-bg:#F3F5F8; --nt-bd:#CDD3DC; /* neutro · contexto */
--cuad:rgba(201,136,30,.13);
--m0:#A5ADB9; --m1:#D4892B; --m2:#C9A227; --m3:#3B9C69;
--r-s:6px; --r:10px; --r-l:16px;
--side:268px; --rail:248px;
--sombra:0 1px 2px rgba(22,32,52,.05),0 8px 28px -18px rgba(22,32,52,.22);
--sans:"Campus Sans","Campus Simbolos","Source Sans 3",-apple-system,BlinkMacSystemFont,
"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
--mate:"Campus Mate","Campus Simbolos","STIX Two Text",Cambria,"Times New Roman",serif;
/* texto de estudio: un punto más grande que la interfaz */
--fs-txt:1.25rem; --lh-txt:1.62;
color-scheme:light;
}
html[data-tema="oscuro"]{
--pagina:#12151A; --hoja:#191D23; --bg-sub:#1F242B; --bg-elev:#1E232A;
--bd:#2C323B; --bd-suave:#242931; --bd-fuerte:#434B57;
--tx:#E3E6EB; --tx-2:#ADB4BF; --tx-3:#8E96A3;
--ac:#86A8F2; --ac-2:#A6C0F7; --ac-suave:#1C2640; --ac-bd:#3E5799; --sobre-ac:#0F1626;
--marca:rgba(134,168,242,.17);
--c1:#ECB45F; --c1-bg:#2A2115; --c1-bd:#8A6322;
--c2:#F09389; --c2-bg:#2D1B1A; --c2-bd:#97463D;
--c3:#B6A6F3; --c3-bg:#231F37; --c3-bd:#6352A6;
--c4:#7BCDA0; --c4-bg:#16261E; --c4-bd:#357955;
--c5:#6FBCD6; --c5-bg:#14252D; --c5-bd:#2E6E85;
--nt:#ADB4BF; --nt-bg:#1F242B; --nt-bd:#3A414C;
--cuad:rgba(236,180,95,.075);
--m0:#6C7480; --m1:#DB9A45; --m2:#D3B546; --m3:#57B381;
--sombra:0 1px 2px rgba(0,0,0,.3),0 10px 30px -18px rgba(0,0,0,.6);
color-scheme:dark;
}
/* ---------------------------------------------------------------- base */
*{box-sizing:border-box;margin:0;padding:0}
html{font-family:var(--sans);font-size:16px;background:var(--pagina);color:var(--tx);
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
scroll-behavior:smooth;font-kerning:normal}
body{line-height:1.55;display:flex;min-height:100vh;background:var(--pagina)}
::selection{background:var(--c1-bg);color:var(--tx)}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:4px}
button{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:1.05em;height:1.05em;flex:0 0 auto;vertical-align:-.15em;
fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* ===================================================================== LATERAL */
.side{width:var(--side);flex:0 0 var(--side);background:var(--pagina);height:100vh;position:sticky;top:0;
display:flex;flex-direction:column;padding:20px 14px 12px;z-index:40}
.marca{display:flex;align-items:center;gap:12px;padding:2px 8px 18px;text-decoration:none;color:var(--tx)}
.logo{width:38px;height:38px;border-radius:10px;flex:0 0 38px;object-fit:contain;display:block}
.marca b{display:block;font-size:16.5px;font-weight:700;line-height:1.2;letter-spacing:-.005em}
.marca em{display:block;font-size:13.5px;font-style:normal;color:var(--tx-3)}
.buscar{width:100%;display:flex;align-items:center;gap:9px;background:var(--hoja);
border:1px solid var(--bd);border-radius:var(--r);padding:9px 12px;font-size:14.5px;
color:var(--tx-3);cursor:pointer;margin-bottom:12px;transition:border-color .15s}
.buscar:hover{border-color:var(--bd-fuerte);color:var(--tx-2)}
.buscar kbd,.modal-top kbd{margin-left:auto;font:inherit;font-size:12px;border:1px solid var(--bd);
border-bottom-width:2px;border-radius:5px;padding:0 6px;color:var(--tx-3)}
#nav{flex:1;overflow-y:auto;padding:0 2px 8px;scrollbar-width:thin}
#nav h4{font-size:13px;font-weight:650;color:var(--tx-3);padding:18px 10px 6px;letter-spacing:.01em}
#nav a{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:8px;
text-decoration:none;color:var(--tx-2);font-size:14.5px;line-height:1.35;transition:background .15s,color .15s}
#nav a:hover{background:var(--bg-sub);color:var(--tx)}
#nav a.on{background:var(--hoja);color:var(--tx);font-weight:650;box-shadow:inset 0 0 0 1px var(--bd)}
#nav a .num{flex:0 0 20px;text-align:center;font-size:13px;color:var(--tx-3);font-weight:650;
font-variant-numeric:tabular-nums}
#nav a.on .num{color:var(--ac)}
#nav a .pt{width:8px;height:8px;border-radius:50%;flex:0 0 8px;margin-left:auto}
.side-pie{border-top:1px solid var(--bd);padding-top:8px;display:flex;flex-direction:column;gap:1px}
.pie-btn{display:flex;align-items:center;gap:10px;padding:7px 10px;border:0;background:none;
border-radius:8px;color:var(--tx-2);font-size:14px;cursor:pointer;text-align:left;width:100%}
.pie-btn:hover{background:var(--bg-sub);color:var(--tx)}
#nav .num .ic,.pie-btn .ic{width:16px;height:16px}
.menu-btn,.velo{display:none}
/* ===================================================================== HOJA
La navegación vive sobre el fondo gris; el contenido, sobre la hoja. */
.main{flex:1;min-width:0;padding:28px 32px 96px}
.wrap{max-width:820px;margin:0 auto;background:var(--hoja);border:1px solid var(--bd);
border-radius:var(--r-l);box-shadow:var(--sombra);padding:52px clamp(28px,5.2vw,68px) 64px;position:relative}
/* ===================================================================== PORTADA DEL MÓDULO */
.crumbs{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--tx-3);margin-bottom:22px;flex-wrap:wrap}
.crumbs a{color:var(--tx-2);text-decoration:none}
.crumbs a:hover{color:var(--ac)}
.crumbs span{color:var(--bd-fuerte)}
.crumbs b{color:var(--tx);font-weight:650}
.mod-head{padding-bottom:36px;margin-bottom:8px;border-bottom:1px solid var(--bd)}
.mod-head h1{font-size:2.75rem;font-weight:720;line-height:1.08;letter-spacing:-.024em;margin-bottom:14px;
text-wrap:balance}
.mod-temas{font-size:1.1875rem;color:var(--tx-2);line-height:1.5;max-width:60ch}
.mod-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:20px;font-size:14.5px;color:var(--tx-3)}
.mod-meta>span{display:inline-flex;align-items:center}
.mod-meta .ic{margin-right:6px;width:16px;height:16px}
.tag{font-size:13px;font-weight:650;padding:3px 10px;border-radius:999px;letter-spacing:.01em}
.tA{background:var(--ac);color:var(--sobre-ac)}
.tB{background:var(--ac-suave);color:var(--ac);box-shadow:inset 0 0 0 1px var(--ac-bd)}
.tC{background:var(--bg-sub);color:var(--tx-2);box-shadow:inset 0 0 0 1px var(--bd)}
/* plan: progreso, datos y llamada a seguir */
.plan{margin-top:28px;border:1px solid var(--bd);border-radius:var(--r-l);background:var(--bg-elev);padding:20px 22px}
.plan-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:15px;color:var(--tx-2)}
.plan-pct b{font-size:2rem;font-weight:720;color:var(--tx);letter-spacing:-.02em;margin-right:4px;
font-variant-numeric:tabular-nums}
.plan-n{color:var(--tx-3);font-variant-numeric:tabular-nums}
.plan .seg{margin:12px 0 18px}
.plan-pie{display:flex;align-items:center;justify-content:space-between;gap:14px 18px;flex-wrap:wrap}
.plan-datos{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;color:var(--tx-2)}
.plan-datos a{color:inherit;text-decoration:none;border-bottom:1px solid var(--bd-fuerte)}
.plan-datos a:hover{color:var(--ac);border-color:var(--ac)}
.plan-vid{display:inline-flex;align-items:center;gap:5px}
.plan-vid .ic-play{color:var(--ac)}
.plan-cta{display:inline-flex;align-items:center;gap:10px;background:var(--ac);color:var(--sobre-ac);border-radius:999px;
padding:11px 20px;font-size:15.5px;font-weight:650;text-decoration:none;white-space:nowrap;max-width:100%;
overflow:hidden;text-overflow:ellipsis;transition:background .15s}
.plan-cta:hover{background:var(--ac-2)}
/* nivel de dominio: control segmentado */
.mastery-lbl{font-size:14.5px;font-weight:650;color:var(--tx-2);margin-top:24px}
.mastery{display:inline-flex;flex-wrap:wrap;gap:4px;margin-top:10px;padding:4px;border-radius:999px;
background:var(--bg-sub);box-shadow:inset 0 0 0 1px var(--bd-suave)}
.mastery button{border:0;background:transparent;border-radius:999px;padding:6px 14px 6px 11px;font-size:14px;
cursor:pointer;color:var(--tx-2);display:flex;align-items:center;gap:8px;transition:background .15s,color .15s}
.mastery button:hover{background:var(--hoja)}
.mastery button.on{background:var(--bg-elev);font-weight:650;box-shadow:0 1px 2px rgba(22,32,52,.12),inset 0 0 0 1px var(--bd)}
.mastery button .pt{width:9px;height:9px;border-radius:50%}
/* ===================================================================== TEXTO DE ESTUDIO */
.mod-body{font-size:var(--fs-txt);line-height:var(--lh-txt)}
.mod-body p{margin-bottom:.85em}
.mod-body p.lead{font-size:1.1em;color:var(--tx-2);line-height:1.55;margin-bottom:1em}
.mod-body h2{font-size:1.75rem;font-weight:700;line-height:1.2;letter-spacing:-.018em;margin:2.2em 0 .6em;
display:flex;align-items:baseline;gap:12px;scroll-margin-top:24px;text-wrap:balance}
.mod-body h2 .s{color:var(--ac);font-size:.62em;font-weight:700;flex:0 0 auto;font-variant-numeric:tabular-nums}
.mod-body h3{font-size:1.3rem;font-weight:680;line-height:1.3;letter-spacing:-.008em;margin:2em 0 .5em;color:var(--tx)}
.mod-body h4{font-size:1.05rem;font-weight:680;color:var(--tx-2);margin:1.4em 0 .4em}
.mod-body ul,.mod-body ol{margin:0 0 1em 1.3em}
.mod-body li{margin-bottom:.4em;padding-left:.25em}
.mod-body li::marker{color:var(--tx-3)}
.mod-body ul.tight li,.mod-body ol.tight li{margin-bottom:.25em}
.mod-body strong,.mod-body b{font-weight:680;color:var(--tx)}
.mod-body em{font-style:italic}
hr.sep{border:0;height:1px;background:var(--bd);margin:64px 0}
/* Conceptos clave: el término en negrita dentro de la explicación lleva un
resaltador azul bajo, para encontrarlo al hojear. Solo en la prosa directa:
dentro de cajas, pasos o tablas la negrita ya tiene otro contexto. */
.etapa>p strong,.etapa>ul>li strong,.etapa>ol>li strong,
.mod-body>p strong,.mod-body>ul>li strong{
background:linear-gradient(transparent 63%,var(--marca) 63%);
-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em}
a.xref{color:var(--ac);text-decoration:underline;text-decoration-color:var(--ac-bd);
text-underline-offset:3px;text-decoration-thickness:1.5px}
a.xref:hover{text-decoration-color:var(--ac)}
/* ===================================================================== BLOQUES
Misma gramática para todos (etiqueta con ícono + contenido), distinta forma
según lo que piden: la nota se aparta, la fórmula se copia, el error frena. */
.box{border-radius:var(--r);padding:20px 24px;margin:32px 0;font-size:.95em;border:1px solid transparent;position:relative}
.box>*:last-child{margin-bottom:0}
.box .lbl{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:680;line-height:1.35;
margin-bottom:10px;letter-spacing:.002em}
.box .lbl::before{content:"";width:18px;height:18px;flex:0 0 18px;background:currentColor;
-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
/* recordar · cuadriculado de carpeta */
.k-formula{--ico:var(--i-fx);border-color:var(--c1-bd);background-color:var(--c1-bg);
background-image:linear-gradient(var(--cuad) 1px,transparent 1px),linear-gradient(90deg,var(--cuad) 1px,transparent 1px);
background-size:18px 18px;background-position:-1px -1px}
.k-formula .lbl{color:var(--c1)}
.k-formula .eq{background:var(--bg-elev);border:1px solid color-mix(in srgb,var(--c1-bd) 55%,transparent);
border-radius:8px;padding:8px 16px;margin:14px 0}
/* evitar · regla roja que frena la lectura */
.k-alert{--ico:var(--i-alert);background:var(--c2-bg);border-color:color-mix(in srgb,var(--c2-bd) 40%,transparent);
border-left:4px solid var(--c2-bd);border-radius:4px var(--r) var(--r) 4px}
.k-alert .lbl{color:var(--c2)}
/* aplicar · los pasos se dibujan como recorrido */
.k-method{--ico:var(--i-steps);background:var(--c3-bg);border-color:color-mix(in srgb,var(--c3-bd) 45%,transparent)}
.k-method .lbl{color:var(--c3)}
.box.k-method ol{list-style:none;margin:6px 0 0;counter-reset:paso}
.box.k-method ol>li{counter-increment:paso;position:relative;padding:0 0 .9em 2.4em;margin:0}
.box.k-method ol>li:last-child{padding-bottom:0}
.box.k-method ol>li::before{content:counter(paso);position:absolute;left:0;top:.12em;width:1.55em;height:1.55em;
border-radius:50%;display:grid;place-items:center;font-size:.8em;font-weight:700;color:var(--c3);
background:var(--bg-elev);box-shadow:inset 0 0 0 1.5px var(--c3-bd);font-variant-numeric:tabular-nums}
.box.k-method ol>li:not(:last-child)::after{content:"";position:absolute;left:calc(.62em - 1px);top:1.55em;bottom:.05em;
width:2px;background:color-mix(in srgb,var(--c3-bd) 45%,transparent);border-radius:2px}
.box.k-method ul{margin-left:1.2em}
/* lograr */
.k-check{--ico:var(--i-check);background:var(--c4-bg);border-color:color-mix(in srgb,var(--c4-bd) 45%,transparent)}
.k-check .lbl{color:var(--c4)}
/* contexto · se aparta del texto principal */
.k-note{--ico:var(--i-info);background:transparent;border:1px dashed var(--nt-bd);
color:var(--tx-2);font-size:.9em;padding:16px 20px}
.k-note .lbl{color:var(--nt);font-size:15px}
.k-note strong{color:var(--tx)}
:root{
--i-fx:url("data:image/svg+xml;utf8,");
--i-alert:url("data:image/svg+xml;utf8,");
--i-steps:url("data:image/svg+xml;utf8,");
--i-check:url("data:image/svg+xml;utf8,");
--i-info:url("data:image/svg+xml;utf8,");
--i-idea:url("data:image/svg+xml;utf8,");
}
/* entender · "Ideas que tenés que entender" (la marca la pone campus.js) */
.mod-body ul.ideas{list-style:none;margin:16px 0 28px;padding:6px 0;border-radius:var(--r);
background:var(--ac-suave);border:1px solid color-mix(in srgb,var(--ac-bd) 55%,transparent)}
.mod-body ul.ideas>li{position:relative;margin:0;padding:12px 22px 12px 54px}
.mod-body ul.ideas>li+li{border-top:1px solid color-mix(in srgb,var(--ac-bd) 35%,transparent)}
.mod-body ul.ideas>li::before{content:"";position:absolute;left:22px;top:16px;width:18px;height:18px;background:var(--ac);
-webkit-mask:var(--i-idea) center/contain no-repeat;mask:var(--i-idea) center/contain no-repeat}
.mod-body ul.ideas strong{background:none;padding:0;color:var(--ac)}
/* ===================================================================== EJEMPLO RESUELTO
El enunciado se lee como texto normal: antes iba en mayúsculas a 11 px y en
Física eso era un problema entero ilegible. */
.solved{border:1px solid color-mix(in srgb,var(--c3-bd) 50%,var(--bd));border-radius:var(--r-l);
margin:36px 0;overflow:hidden;background:var(--bg-elev)}
.solved>.hd{background:var(--c3-bg);padding:16px 24px;font-size:.95em;font-weight:540;line-height:1.5;color:var(--tx);
border-bottom:1px solid color-mix(in srgb,var(--c3-bd) 35%,transparent)}
.solved>.hd::before{content:"Ejemplo resuelto";display:block;font-size:14.5px;font-weight:680;
color:var(--c3);margin-bottom:4px}
.solved>.bd{padding:22px 24px 24px}
.solved>.bd>*:last-child{margin-bottom:0}
.step{position:relative;padding-left:46px;margin-bottom:20px}
.step>*:last-child{margin-bottom:0}
.step .sn{position:absolute;left:0;top:.05em;width:30px;height:30px;border-radius:50%;z-index:1;
background:var(--bg-elev);color:var(--c3);box-shadow:inset 0 0 0 2px var(--c3-bd);
font-size:14.5px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
/* línea del recorrido entre pasos visibles */
.step:has(+ .step:not(.paso-oculto))::before{content:"";position:absolute;left:14px;top:34px;bottom:-18px;width:2px;
background:color-mix(in srgb,var(--c3-bd) 40%,transparent);border-radius:2px}
.paso-oculto{display:none!important}
.paso-nuevo{animation:aparecer .32s ease both}
@keyframes aparecer{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pasos-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-left:46px;margin-top:4px}
.pasos-ctl[hidden]{display:none}
.pasos-sig{border:0;background:var(--c3);color:var(--bg-elev);border-radius:999px;padding:9px 18px;font-size:15px;
font-weight:650;cursor:pointer;transition:filter .15s}
.pasos-sig span{font-weight:400;opacity:.85}
.pasos-sig:hover{filter:brightness(1.08)}
.pasos-todo{border:0;background:none;padding:0;font-size:14.5px;color:var(--tx-3);text-decoration:underline;
text-underline-offset:3px;cursor:pointer}
.pasos-todo:hover{color:var(--tx)}
/* ejercicios citados en el cuerpo */
.lvl{font-size:15px;font-weight:680;color:var(--c1);margin:28px 0 10px}
.ex{position:relative;padding-left:52px;margin:14px 0}
.ex .id{position:absolute;left:0;top:.15em;font-size:13.5px;font-weight:700;color:var(--ac);background:var(--ac-suave);
border-radius:6px;padding:1px 8px}
.ex .src,.fuente-ej{display:block;font-size:14px;color:var(--tx-3);font-style:italic;margin-top:6px}
.fuente-ej{margin-top:10px!important}
/* ===================================================================== TABLAS */
.tabla-scroll{overflow-x:auto;margin:28px 0;-webkit-overflow-scrolling:touch}
.tabla-scroll>table{margin:0}
table{width:100%;border-collapse:collapse;margin:28px 0;font-size:.875em;line-height:1.5}
th{text-align:left;padding:10px 14px;font-weight:680;color:var(--tx-2);font-size:.92em;
border-bottom:2px solid var(--bd-fuerte);background:var(--bg-sub)}
th:first-child{border-top-left-radius:8px} th:last-child{border-top-right-radius:8px}
td{padding:11px 14px;border-bottom:1px solid var(--bd);vertical-align:top}
td.c,th.c{text-align:center}
tbody tr:hover td{background:color-mix(in srgb,var(--bg-sub) 70%,transparent)}
/* Errores frecuentes: la primera columna nombra el error, en rojo. */
.etapa[data-clase="errores"] table.long th{background:var(--c2-bg);color:var(--c2);border-bottom-color:var(--c2-bd)}
.etapa[data-clase="errores"] table.long td:first-child strong{color:var(--c2)}
/* ===================================================================== MATEMÁTICA */
.m,.eq,.eqn{font-family:var(--mate);font-variant-numeric:lining-nums}
.m{font-size:1.07em;white-space:nowrap}
.eq{display:block;text-align:center;margin:24px 0;font-size:1.22em;line-height:2.1;overflow-x:auto;overflow-y:hidden}
.eqn{display:block;margin:12px 0 12px 2px;font-size:1.12em;line-height:2.1;overflow-x:auto;overflow-y:hidden}
.frac{display:inline-block;vertical-align:middle;text-align:center;font-size:.9em;line-height:1.15;margin:0 .15em}
.frac .num{display:block;padding:0 .32em .08em;border-bottom:1.2px solid currentColor}
.frac .den{display:block;padding:.08em .32em 0}
.sqrt{display:inline-block;white-space:nowrap}
.sqrt .sym{font-size:1.12em}
.sqrt .ridx{font-size:.6em;vertical-align:.65em;margin-right:-.3em}
.sqrt .rad{border-top:1.2px solid currentColor;padding:.08em .22em 0 .12em}
.ovl{border-top:1.2px solid currentColor}
.vec{position:relative}
.vec::after{content:'\2192';position:absolute;left:0;right:0;top:-.66em;text-align:center;font-size:.78em;line-height:1}
.op,.txt{font-family:var(--sans);font-style:normal;font-size:.88em}
.cases{display:inline-flex;align-items:center;vertical-align:middle}
.cases .brace{font-size:2.2em;line-height:1;margin-right:.14em;font-weight:300}
.cases .rows{display:inline-block;text-align:left}
.cases .row{display:block;line-height:1.7}
/* ===================================================================== FIGURAS */
figure{margin:36px 0;text-align:center}
figure svg{max-width:100%;height:auto;font-family:var(--sans);width:100%;display:block}
/* los rótulos traen la fuente del sistema como atributo; la regla CSS la reemplaza */
figure svg text{font-family:var(--sans)}
figure figcaption{font-size:15px;color:var(--tx-3);margin-top:12px;line-height:1.5;max-width:60ch;margin-inline:auto}
.fig-caja{background:var(--bg-elev);border:1px solid var(--bd);border-radius:var(--r);padding:24px 20px}
/* ===================================================================== PRÁCTICA */
.practica{margin-top:88px}
.practica h2{margin-top:0}
.pr-cab{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.pr-marcador{display:flex;gap:20px;font-size:15px;color:var(--tx-3)}
.pr-marcador b{font-weight:700;font-size:17px;color:var(--tx);font-variant-numeric:tabular-nums}
.pr-marcador .ok b{color:var(--c4)} .pr-marcador .mal b{color:var(--c2)}
.pr-barra{height:8px;background:var(--bg-sub);border-radius:99px;overflow:hidden;margin-bottom:26px;display:flex;
box-shadow:inset 0 0 0 1px var(--bd-suave)}
.pr-barra i{display:block;height:100%;transition:width .3s}
.pr-barra .f-ok{background:var(--c4-bd)} .pr-barra .f-mal{background:var(--c2-bd)}
.pr-card{border:1px solid var(--bd);border-radius:var(--r-l);background:var(--bg-elev);padding:20px 22px;margin-bottom:16px;
position:relative;transition:border-color .2s,box-shadow .2s}
.pr-card.hecho-ok{border-color:color-mix(in srgb,var(--c4-bd) 60%,var(--bd));box-shadow:inset 4px 0 0 var(--c4-bd)}
.pr-card.hecho-mal{border-color:color-mix(in srgb,var(--c2-bd) 60%,var(--bd));box-shadow:inset 4px 0 0 var(--c2-bd)}
.pr-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.pr-top .idx{font-size:14px;font-weight:700;color:var(--ac);background:var(--ac-suave);border-radius:6px;padding:1px 9px;
font-variant-numeric:tabular-nums}
/* Dificultad: barras de 1 a 3 en tinta, sin usar colores que ya significan otra cosa. */
.pr-top .niv{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--tx-2);padding:0;
background:none}
.pr-top .niv::before{content:"";flex:0 0 auto;width:22px;height:13px;
background:
linear-gradient(var(--tx-2),var(--tx-2)) 0 100%/6px 5px no-repeat,
linear-gradient(var(--n2),var(--n2)) 8px 100%/6px 9px no-repeat,
linear-gradient(var(--n3),var(--n3)) 16px 100%/6px 13px no-repeat}
.niv-basico{--n2:var(--bd-fuerte);--n3:var(--bd-fuerte)}
.niv-intermedio{--n2:var(--tx-2);--n3:var(--bd-fuerte)}
.niv-examen{--n2:var(--tx-2);--n3:var(--tx-2)}
.pr-top .est{margin-left:auto;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--bd-fuerte)}
.pr-top .est.ok{background:var(--c4-bd);box-shadow:none} .pr-top .est.mal{background:var(--c2-bd);box-shadow:none}
.pr-enun{font-size:1.2rem;line-height:1.6;margin-bottom:16px}
.pr-enun .m{font-size:1.08em}
.pr-sol,.pr-pista{display:none;border-radius:var(--r);margin-top:14px;padding:14px 18px;font-size:1.06rem;line-height:1.6;color:var(--tx)}
.pr-sol{background:var(--c3-bg)} .pr-pista{background:var(--c1-bg)}
.pr-sol.on,.pr-pista.on{display:block;animation:aparecer .25s ease both}
.pr-sol .et,.pr-pista .et{display:block;font-size:14.5px;font-weight:680;margin-bottom:6px}
.pr-sol .et{color:var(--c3)} .pr-pista .et{color:var(--c1)}
.pr-sol .eqn{margin-left:0}
.pr-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.pr-btns button{border:1.5px solid var(--bd);background:transparent;border-radius:999px;padding:7px 16px;font-size:14.5px;
color:var(--tx-2);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.pr-btns button:hover{border-color:var(--bd-fuerte);color:var(--tx)}
.pr-btns .b-pista{border-color:color-mix(in srgb,var(--c1-bd) 70%,transparent);color:var(--c1)}
.pr-btns .b-ver{border-color:color-mix(in srgb,var(--c3-bd) 70%,transparent);color:var(--c3)}
.pr-btns .b-ok{border-color:color-mix(in srgb,var(--c4-bd) 70%,transparent);color:var(--c4);margin-left:auto}
.pr-btns .b-mal{border-color:color-mix(in srgb,var(--c2-bd) 70%,transparent);color:var(--c2)}
.pr-btns .b-ok.act{background:var(--c4-bg);border-color:var(--c4-bd);font-weight:650}
.pr-btns .b-mal.act{background:var(--c2-bg);border-color:var(--c2-bd);font-weight:650}
.pr-reset{background:none!important;border:0!important;color:var(--tx-3)!important;font-size:14px;cursor:pointer;
text-decoration:underline;text-underline-offset:3px;padding:0!important}
/* ===================================================================== VIDEOS */
.videorepaso{margin-top:88px}
.videorepaso>h2{margin-top:0}
.videorepaso>h2 .s{display:none}
.videorepaso>.lead{margin-bottom:24px}
.vr-fila{display:flex;align-items:center;gap:16px;border:1px solid var(--bd);border-radius:var(--r);background:var(--bg-elev);
padding:14px 18px;margin-bottom:10px;text-decoration:none;color:var(--tx);transition:border-color .18s,background .18s}
.vr-fila:hover{border-color:var(--ac-bd);background:var(--ac-suave)}
.vr-ic{width:42px;height:42px;flex:0 0 42px;fill:var(--ac);background:var(--ac-suave);border-radius:12px;padding:10px;
align-self:center;transition:background .18s,fill .18s}
.vr-ic path{stroke:var(--ac);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;transition:stroke .18s}
.vr-fila:hover .vr-ic{background:var(--ac);fill:var(--sobre-ac)}
.vr-fila:hover .vr-ic path{stroke:var(--sobre-ac)}
.vr-tt{flex:1;min-width:0}
.vr-tt b{display:block;font-size:16.5px;font-weight:650;line-height:1.4}
.vr-tt span{display:block;font-size:14px;color:var(--tx-3);margin-top:2px}
.vr-nota{font-size:14px;color:var(--tx-3);font-style:italic;margin-top:6px!important;line-height:1.5;max-width:56ch}
.vr-alt{flex:0 0 auto;font-size:12.5px;font-weight:650;color:var(--c1);background:var(--c1-bg);
border:1px solid color-mix(in srgb,var(--c1-bd) 60%,transparent);border-radius:999px;padding:2px 10px;align-self:center;white-space:nowrap}
.vr-ext{width:16px;height:16px;flex:0 0 16px;color:var(--tx-3);align-self:center;transition:color .18s,transform .18s}
.vr-fila:hover .vr-ext{color:var(--ac);transform:translate(1px,-1px)}
figure svg.vr-ic{width:42px;height:42px}
figure svg.vr-ext{width:16px;height:16px}
.ic-play{width:15px;height:15px;flex:0 0 15px;fill:currentColor}
.ic-play path{stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
/* ===================================================================== RECORRIDO DEL MÓDULO
Lo arma campus.js a partir de los h2; acá solo se ve. */
/* progreso segmentado: un segmento por etapa, agrupados por tema */
.seg{display:flex;gap:8px;height:8px}
.seg-g{display:flex;gap:3px;min-width:0}
.seg i{flex:1 1 0;min-width:3px;height:100%;border-radius:3px;background:var(--bd);transition:background .3s,box-shadow .3s}
.seg i.ok{background:var(--c4-bd)}
.seg i.act{box-shadow:0 0 0 1.5px var(--ac);background:var(--ac-bd)}
.seg i.ok.act{background:var(--c4-bd)}
/* temas dentro del módulo */
.subtema{margin-top:104px;padding-top:30px;border-top:1px solid var(--bd)}
.mod-body>.subtema:first-child{margin-top:12px;border-top:0;padding-top:16px}
.subtema-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px}
.subtema-k{font-weight:680;color:var(--ac)}
.subtema-prog{color:var(--tx-3);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:10px}
.subtema-prog .seg{width:96px;height:6px}
.subtema .subtema-t{font-size:2.25rem;font-weight:720;line-height:1.12;letter-spacing:-.022em;margin:8px 0 0;
text-wrap:balance}
/* etapas */
.etapa{margin-top:88px}
.mod-body>.etapa:first-child{margin-top:0}
.subtema+.etapa{margin-top:44px}
.etapa:focus,.practica:focus,.cierre:focus,.subtema:focus,.step:focus{outline:none}
.con-recorrido .mod-body h2 .s{display:none}
.con-recorrido .mod-body h2{margin-top:1.6em}
.mod-body .et-cab+h2,.practica>.et-cab+h2,.et-cab+.box{margin-top:0}
/* cabecera de etapa: la misma estación del índice, con el color de lo que se hace */
.et-cab{--tc:var(--tx-2);display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:15px}
.et-cab[data-clase="teoria"]{--tc:var(--ac)}
.et-cab[data-clase="metodo"],.et-cab[data-clase="ejemplos"]{--tc:var(--c3)}
.et-cab[data-clase="errores"]{--tc:var(--c2)}
.et-cab[data-clase="repaso"]{--tc:var(--c1)}
.et-cab[data-clase="practica"]{--tc:var(--c4)}
.et-est{position:relative;width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;
font-size:15px;font-weight:700;color:var(--tc);box-shadow:inset 0 0 0 2px var(--tc);background:var(--hoja);
font-variant-numeric:tabular-nums;transition:background .25s,box-shadow .25s,color .25s}
.et-tipo{font-weight:680;color:var(--tc)}
.et-pos{margin-left:auto;display:flex;align-items:center;gap:16px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.et-pos span{display:inline-flex;align-items:center;gap:6px}
.et-pos .ic{width:15px;height:15px}
.etapa.hecha>.et-cab .et-est,.practica.hecha>.et-cab .et-est{background:var(--c4-bd);box-shadow:none;color:transparent}
.etapa.hecha>.et-cab .et-est::after,.practica.hecha>.et-cab .et-est::after{content:"";position:absolute;inset:9px;
background:var(--hoja);-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
/* pie de cada etapa: completar y continuar */
.et-pie{display:flex;align-items:center;justify-content:space-between;gap:14px 18px;flex-wrap:wrap;margin-top:44px;
padding:16px 18px;border-radius:var(--r-l);background:var(--bg-sub)}
.et-pie-nota{flex:1 0 100%;font-size:14.5px;color:var(--tx-3)}
.et-hecho{display:inline-flex;align-items:center;gap:11px;border:0;background:none;font-size:15.5px;color:var(--tx-2);
cursor:pointer;padding:6px 8px 6px 2px;border-radius:8px}
.et-hecho:hover{color:var(--tx)}
.et-hecho:hover .et-tilde{box-shadow:inset 0 0 0 2px var(--c4-bd)}
.et-tilde{width:24px;height:24px;flex:0 0 24px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--bd-fuerte);
display:grid;place-items:center;background:var(--bg-elev);transition:background .2s,box-shadow .2s}
.et-pie.hecha .et-hecho{color:var(--c4);font-weight:650}
.et-pie.hecha .et-tilde{background:var(--c4-bd);box-shadow:none}
.et-pie.hecha .et-tilde::after,.cierre-ic::after,.aviso-ic::after{content:"";background:var(--bg-elev);
-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.et-pie.hecha .et-tilde::after{width:13px;height:13px}
.et-pie.recien .et-tilde{animation:marca .34s cubic-bezier(.3,1.5,.5,1)}
@keyframes marca{from{transform:scale(.55)}to{transform:scale(1)}}
.et-sig{display:inline-flex;align-items:center;gap:16px;margin-left:auto;text-decoration:none;background:var(--ac);
color:var(--sobre-ac);border-radius:999px;padding:9px 18px 9px 22px;line-height:1.3;transition:background .18s;max-width:100%}
.et-sig>span:first-child{min-width:0}
.et-sig small{display:block;font-size:13px;font-weight:500;opacity:.85}
.et-sig b{display:block;color:inherit;font-size:15.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.et-flecha{font-size:19px;transition:transform .18s}
.et-sig:hover{background:var(--ac-2)}
.et-sig:hover .et-flecha{transform:translateX(3px)}
/* video dentro del tema */
.video-rec{margin-top:36px;padding:16px 18px 6px;border-radius:var(--r-l);border:1px solid var(--bd)}
.etapa .video-rec-k{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:680;color:var(--ac);margin:0 0 12px}
.video-rec .vr-fila{margin-bottom:10px}
.video-rec .vr-nota{display:none}
.etapa .video-rec-pie{font-size:14.5px;color:var(--tx-3);margin:0 0 10px}
.video-rec-pie a{color:var(--ac);text-decoration:underline;text-decoration-color:var(--ac-bd);text-underline-offset:3px}
/* autochequeo: criterios tildables */
.autochequeo ul{list-style:none;margin:0 0 14px}
.autochequeo li{position:relative;padding:7px 10px 7px 42px;margin:0 -10px 2px;border-radius:8px;cursor:pointer;
transition:background .15s}
.autochequeo li:hover{background:color-mix(in srgb,var(--c4-bd) 12%,transparent)}
.autochequeo li::before{content:"";position:absolute;left:10px;top:.55em;width:20px;height:20px;border-radius:6px;
box-shadow:inset 0 0 0 2px var(--c4-bd);background:var(--bg-elev);transition:background .15s}
.autochequeo li.ok::before{background:var(--c4-bd)}
.autochequeo li.ok::after{content:"";position:absolute;left:13px;top:calc(.55em + 3px);width:14px;height:14px;
background:var(--bg-elev);-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.autochequeo li.ok{color:var(--tx-2)}
.autochequeo li:focus-visible{outline:2px solid var(--c4-bd);outline-offset:-2px}
.chk-cuenta{margin-left:auto;font-size:14px;font-weight:650;font-variant-numeric:tabular-nums}
.chk-fin{display:none}
.mod-body .autochequeo.completo .chk-fin{display:block;font-size:15.5px;font-weight:650;color:var(--c4);margin:-4px 0 12px}
/* cierre del módulo */
.cierre{margin-top:72px;border:1px solid var(--bd);border-radius:var(--r-l);background:var(--bg-sub);
padding:32px 28px 30px;text-align:center}
.cierre.completo{border-color:color-mix(in srgb,var(--c4-bd) 60%,transparent);background:var(--c4-bg)}
.cierre-ic{width:52px;height:52px;border-radius:50%;margin:0 auto 14px;background:var(--c4-bd);display:grid;place-items:center;
animation:marca .4s cubic-bezier(.3,1.5,.5,1)}
.cierre-ic::after{width:26px;height:26px}
.cierre-k{font-size:15px;font-weight:650;color:var(--tx-3)}
.cierre.completo .cierre-k{color:var(--c4)}
.cierre-t{font-size:1.75rem;font-weight:720;line-height:1.2;letter-spacing:-.018em;margin:6px 0 14px}
.cierre>p{color:var(--tx-2);font-size:16.5px;max-width:54ch;margin:0 auto 14px}
.cierre .mastery{justify-content:center}
.cierre-faltan{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:2px 0 4px}
.cierre-faltan a{display:inline-block;border:1px solid var(--bd);background:var(--bg-elev);border-radius:999px;padding:5px 14px;
font-size:14.5px;color:var(--tx-2);text-decoration:none}
.cierre-faltan a:hover{border-color:var(--bd-fuerte);color:var(--tx)}
.cierre-faltan .mas{font-size:14.5px;color:var(--tx-3);padding:5px}
.cierre-acc{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:10px 20px;font-size:15px;font-weight:650;
text-decoration:none;color:var(--tx);border:1.5px solid var(--bd);background:var(--bg-elev);transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--bd-fuerte)}
.btn-pri{background:var(--ac);border-color:var(--ac);color:var(--sobre-ac)}
.btn-pri:hover{background:var(--ac-2);border-color:var(--ac-2)}
/* aviso breve al completar */
.aviso{position:fixed;left:50%;bottom:24px;z-index:90;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);
padding:10px 20px 10px 12px;border-radius:999px;background:var(--tx);color:var(--hoja);font-size:15px;
box-shadow:0 12px 32px -8px rgba(0,0,0,.35);opacity:0;transform:translate(-50%,10px);pointer-events:none;
transition:opacity .22s,transform .22s}
.aviso.on{opacity:1;transform:translate(-50%,0)}
.aviso-ic{width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:var(--c4-bd);display:grid;place-items:center}
.aviso-ic::after{width:12px;height:12px;background:var(--tx)}
.aviso-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ===================================================================== ÍNDICE DEL MÓDULO
Un recorrido: estaciones numeradas unidas por una línea que se pinta de verde
a medida que se completan. La estación actual lleva el azul y un fondo que se
desplaza con la lectura. La misma lista sirve al lateral y al desplegable. */
.toc-cab{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;font-weight:650;color:var(--tx-2);
padding:0 8px}
.toc-cab b{font-size:15px;color:var(--tx);font-variant-numeric:tabular-nums}
.toc-in>.seg{margin:10px 8px 18px;height:6px}
.toc-in>.seg i:not(.ok):not(.act){background:var(--bd-fuerte);opacity:.7}
.toc-lista{list-style:none;margin:0;padding:0;position:relative}
.toc-lista>.toc-yo{position:absolute;left:0;right:0;top:0;height:0;border-radius:10px;background:var(--ac-suave);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac-bd) 50%,transparent);opacity:0;pointer-events:none;
transition:transform .32s cubic-bezier(.3,.7,.2,1),height .32s cubic-bezier(.3,.7,.2,1),opacity .2s}
.toc-lista>.toc-yo.on{opacity:1}
.toc-lista li{position:relative}
.toc-lista a{position:relative;z-index:1;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:start;
padding:7px 8px;border-radius:10px;text-decoration:none;color:var(--tx-2);font-size:14.5px;line-height:1.38;
transition:color .15s,background .15s}
.toc-lista a:hover{color:var(--tx);background:color-mix(in srgb,var(--bd) 45%,transparent)}
.toc-lista a.actual{color:var(--tx);font-weight:650;background:transparent}
.toc-est{position:relative;width:22px;height:22px;margin-top:-1px;border-radius:50%;display:grid;place-items:center;
font-size:11.5px;font-weight:700;color:var(--tx-3);background:var(--bg-loc,var(--pagina));
box-shadow:inset 0 0 0 1.5px var(--bd-fuerte);font-variant-numeric:tabular-nums;
transition:background .25s,box-shadow .25s,color .25s,transform .25s}
.toc-lista a.actual .toc-est{background:var(--ac);color:var(--sobre-ac);box-shadow:0 0 0 3px var(--ac-suave);transform:scale(1.06)}
.toc-lista a.hecha .toc-est{background:var(--c4-bd);color:transparent;box-shadow:none}
.toc-lista a.hecha .toc-est::after{content:"";position:absolute;inset:5px;background:var(--bg-elev);
-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.toc-lista a.hecha.actual .toc-est{box-shadow:0 0 0 3px var(--ac-bd)}
/* línea entre estaciones del mismo tema */
.toc-lista li.linea::after{content:"";position:absolute;left:18px;top:28px;bottom:-6px;width:2px;border-radius:2px;
background:var(--bd-fuerte);z-index:0;transition:background .3s}
.ruta-panel .toc-lista li.linea::after{background:var(--bd)}
.toc-lista li.linea.hecha::after{background:var(--c4-bd)}
.toc-t{min-width:0}
.toc-min{font-size:13px;font-weight:400;color:var(--tx-3);margin-top:1px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tm-p{display:none}
.toc-lista a.proxima:not(.actual) .tm-n{display:none}
.toc-lista a.proxima:not(.actual) .tm-p{display:inline;color:var(--ac);font-weight:650}
.toc-sub+li{margin-top:2px}
.toc-sub a{display:block;margin-top:16px;padding:4px 8px 6px;font-weight:680;color:var(--tx);font-size:14.5px;line-height:1.35}
.toc-sub:first-child a{margin-top:0}
.toc-sub small{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--ac);margin-bottom:1px}
.toc-sub small span{color:var(--tx-3);font-weight:500;font-variant-numeric:tabular-nums}
.toc-corte{height:1px;background:var(--bd);margin:12px 8px}
.toc-videos .ic-play{color:var(--ac);margin:3px 0 0 4px}
/* lateral fijo (escritorio) */
.toc,.ruta{display:none}
.toc-in{position:sticky;top:28px;max-height:calc(100vh - 56px);display:flex;flex-direction:column}
.toc-scroll{position:relative;overflow-y:auto;min-height:0;margin:0 -6px;padding:0 6px 10px;scrollbar-width:thin}
.toc-volver{display:flex;align-items:center;gap:8px;margin:8px 8px 0;padding-top:12px;border-top:1px solid var(--bd);
font-size:14px;color:var(--tx-3);text-decoration:none}
.toc-volver:hover{color:var(--ac)}
/* barra superior con índice desplegable (pantallas sin lateral) */
.ruta{align-items:center;gap:12px;position:sticky;top:0;z-index:30;height:58px;padding:0 20px;background:var(--hoja);
border-bottom:1px solid var(--bd)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
.ruta{background:color-mix(in srgb,var(--hoja) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
.ruta-btn{flex:1;min-width:0;height:100%;display:flex;align-items:center;gap:12px;border:0;background:none;cursor:pointer;
text-align:left;padding:0}
.ruta-txt{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.ruta-k{font-size:13px;font-weight:650;color:var(--ac);white-space:nowrap}
.ruta-t{font-size:15.5px;font-weight:650;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ruta-chev{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:var(--tx-3);stroke-width:2;stroke-linecap:round;
stroke-linejoin:round;transition:transform .2s}
.ruta.abierta .ruta-chev{transform:rotate(180deg)}
.ruta-pct{font-size:14.5px;font-weight:700;color:var(--tx-2);font-variant-numeric:tabular-nums}
.ruta>.seg{position:absolute;left:0;right:0;bottom:-1px;height:3px;gap:4px}
.ruta>.seg .seg-g{gap:2px}
.ruta>.seg i{border-radius:0}
.ruta>.seg i.act{box-shadow:none;background:var(--ac)}
.ruta-panel{--bg-loc:var(--bg-elev);position:absolute;top:calc(100% + 8px);left:16px;right:16px;max-width:540px;
max-height:min(74vh,640px);overflow-y:auto;background:var(--bg-elev);border:1px solid var(--bd);border-radius:var(--r-l);
box-shadow:0 22px 50px -14px rgba(10,20,40,.35);padding:12px 10px;animation:panel .18s ease both}
@keyframes panel{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ruta-panel[hidden]{display:none}
.con-recorrido .etapa,.con-recorrido .subtema,.con-recorrido .practica,.con-recorrido .videorepaso,
.con-recorrido .cierre,.con-recorrido .mod-body h2{scroll-margin-top:28px}
/* ===================================================================== INICIO */
.vista-inicio .wrap{max-width:900px}
.hero{margin-bottom:30px}
.hero h1{font-size:2.75rem;font-weight:720;letter-spacing:-.024em;line-height:1.08;margin-bottom:8px}
.hero p{color:var(--tx-2);font-size:1.125rem}
.seguir{display:flex;align-items:center;gap:18px;margin:0 0 30px;padding:18px 20px 18px 22px;border:1px solid var(--ac-bd);
border-radius:var(--r-l);background:var(--ac-suave);text-decoration:none;color:var(--tx);transition:border-color .15s}
.seguir:hover{border-color:var(--ac)}
.seguir-tt{flex:1;min-width:0}
.seguir-k{display:block;font-size:14.5px;font-weight:650;color:var(--ac)}
.seguir b{display:block;font-size:1.1875rem;font-weight:680;line-height:1.3;margin-top:3px}
.seguir-s{display:block;font-size:15px;color:var(--tx-2);margin-top:4px}
.seguir-cta{flex:0 0 auto;background:var(--ac);color:var(--sobre-ac);border-radius:999px;padding:10px 20px;font-size:15px;font-weight:650}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:44px}
.kpi{background:var(--bg-sub);border-radius:var(--r);padding:16px 18px}
.kpi .k{font-size:14.5px;color:var(--tx-3);margin-bottom:4px}
.kpi .v{font-size:2rem;font-weight:720;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:15px;font-weight:500;color:var(--tx-2);letter-spacing:0;margin-left:2px}
.mat-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:48px 0 6px;scroll-margin-top:14px}
.mat-h h2{font-size:1.75rem;font-weight:720;letter-spacing:-.018em}
.mat-h .ex-fecha{font-size:14.5px;color:var(--tx-3);text-align:right;line-height:1.45}
.mat-h .ex-fecha b{color:var(--tx-2);font-weight:650}
.barra{height:8px;background:var(--bg-sub);border-radius:99px;overflow:hidden;margin:12px 0 18px;box-shadow:inset 0 0 0 1px var(--bd-suave)}
.barra i{display:block;height:100%;background:var(--c4-bd);border-radius:99px;transition:width .35s}
.lista{border:1px solid var(--bd);border-radius:var(--r-l);overflow:hidden;background:var(--bg-elev)}
.fila{display:flex;align-items:center;gap:16px;padding:15px 20px;text-decoration:none;color:var(--tx);border-bottom:1px solid var(--bd-suave);
transition:background .15s}
.fila:last-child{border-bottom:0}
.fila:hover{background:var(--bg-sub)}
.fila .pt{width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.fila .nn{font-size:14.5px;font-weight:700;color:var(--tx-3);flex:0 0 22px;font-variant-numeric:tabular-nums}
.fila .tt{flex:1;min-width:0}
.fila .tt b{display:block;font-size:1.0625rem;font-weight:650;line-height:1.35}
.fila .tt>span{display:block;font-size:14.5px;color:var(--tx-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.fila .rr{font-size:14px;color:var(--tx-3);text-align:right;flex-shrink:0;line-height:1.45;font-variant-numeric:tabular-nums}
.fila .tt .fila-prog{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:13.5px;color:var(--tx-3);overflow:visible}
.fila-prog .mini{display:block;flex:0 0 72px;height:5px;border-radius:99px;background:var(--bd);overflow:hidden}
.fila-prog .mini i{display:block;height:100%;background:var(--c4-bd);border-radius:99px}
.leyenda{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--tx-3);margin-top:14px}
.leyenda span{display:flex;align-items:center;gap:7px}
.leyenda i{width:9px;height:9px;border-radius:50%}
/* guía de lectura: el sistema de color, mostrado con sus propias piezas */
.guia{margin-top:56px;padding-top:36px;border-top:1px solid var(--bd)}
.guia h2{font-size:1.5rem;font-weight:720;letter-spacing:-.015em;margin-bottom:6px}
.guia>p{color:var(--tx-2);font-size:1.0625rem;margin-bottom:20px;max-width:60ch}
.guia-lista{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.guia-lista li{border-radius:var(--r);padding:14px 16px;font-size:15px;line-height:1.45;border:1px solid transparent}
.guia-lista b{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;margin-bottom:3px}
.guia-lista b::before{content:"";width:17px;height:17px;flex:0 0 17px;background:currentColor;
-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.guia-lista span{color:var(--tx-2)}
.guia-lista .g-concepto{--ico:var(--i-idea);background:var(--ac-suave);border-color:color-mix(in srgb,var(--ac-bd) 55%,transparent)}
.g-concepto b{color:var(--ac)}
.guia-lista .g-formula{--ico:var(--i-fx);border-color:var(--c1-bd);background-color:var(--c1-bg);
background-image:linear-gradient(var(--cuad) 1px,transparent 1px),linear-gradient(90deg,var(--cuad) 1px,transparent 1px);
background-size:18px 18px}
.g-formula b{color:var(--c1)}
.guia-lista .g-metodo{--ico:var(--i-steps);background:var(--c3-bg);border-color:color-mix(in srgb,var(--c3-bd) 45%,transparent)}
.g-metodo b{color:var(--c3)}
.guia-lista .g-error{--ico:var(--i-alert);background:var(--c2-bg);border-color:color-mix(in srgb,var(--c2-bd) 40%,transparent);
border-left:4px solid var(--c2-bd);border-radius:4px var(--r) var(--r) 4px}
.g-error b{color:var(--c2)}
.guia-lista .g-dominio{--ico:var(--i-check);background:var(--c4-bg);border-color:color-mix(in srgb,var(--c4-bd) 45%,transparent)}
.g-dominio b{color:var(--c4)}
.guia-lista .g-nota{--ico:var(--i-info);border:1px dashed var(--nt-bd)}
.g-nota b{color:var(--nt)}
.vista-inicio .k-note{margin-top:28px}
/* ===================================================================== NAVEGACIÓN ENTRE MÓDULOS */
.mod-nav{display:flex;gap:12px;margin-top:56px;padding-top:28px;border-top:1px solid var(--bd)}
.mod-nav a{flex:1;border:1px solid var(--bd);border-radius:var(--r);padding:14px 18px;text-decoration:none;color:var(--tx);
background:var(--bg-elev);transition:border-color .15s}
.mod-nav a:hover{border-color:var(--ac-bd)}
.mod-nav a small{display:block;font-size:13.5px;color:var(--tx-3);margin-bottom:3px}
.mod-nav a b{font-size:15.5px;font-weight:650}
.mod-nav a.der{text-align:right}
/* ===================================================================== BUSCADOR */
.modal{display:none;position:fixed;inset:0;background:rgba(14,20,32,.42);z-index:100;padding-top:11vh;justify-content:center}
.modal.on{display:flex}
.modal-caja{width:min(620px,92vw);background:var(--bg-elev);border:1px solid var(--bd);border-radius:var(--r-l);overflow:hidden;
height:fit-content;max-height:72vh;display:flex;flex-direction:column;box-shadow:0 24px 60px -16px rgba(0,0,0,.35);
animation:panel .16s ease both}
.modal-top{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--bd)}
.modal-top input{flex:1;border:0;background:none;font-size:17px;color:var(--tx);outline:none;font-family:inherit}
.modal-res{overflow-y:auto;padding:8px}
.modal-res a{display:block;padding:10px 14px;border-radius:var(--r);text-decoration:none;color:var(--tx)}
.modal-res a:hover,.modal-res a.sel{background:var(--ac-suave)}
.modal-res b{display:block;font-size:15.5px;font-weight:650}
.modal-res span{display:block;font-size:14px;color:var(--tx-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-res .vacio{padding:24px;text-align:center;color:var(--tx-3);font-size:15px}
/* ===================================================================== RESPONSIVE
En los 17 módulos el índice del módulo tiene prioridad sobre la lista de
módulos: entre 1000 y 1339 px la lista se pliega al botón de menú para que el
índice quepa a la derecha sin achicar el texto. */
@media(min-width:1000px){
.con-recorrido .toc{display:block;position:absolute;top:0;bottom:0;left:calc(100% + 36px);width:var(--rail)}
.con-recorrido .main{padding-right:calc(32px + var(--rail) + 36px)}
}
@media(max-width:1339px){
body[data-modulo^="matematica-"] .side,body[data-modulo^="fisica-"] .side{position:fixed;left:0;top:0;
transform:translateX(-100%);transition:transform .22s}
body[data-modulo^="matematica-"] .side.on,body[data-modulo^="fisica-"] .side.on{transform:none;
box-shadow:0 0 40px rgba(0,0,0,.25)}
body[data-modulo^="matematica-"] .velo,body[data-modulo^="fisica-"] .velo{display:block;position:fixed;inset:0;
background:rgba(10,14,22,.45);z-index:35;opacity:0;pointer-events:none;transition:opacity .22s}
body[data-modulo^="matematica-"] .velo.on,body[data-modulo^="fisica-"] .velo.on{opacity:1;pointer-events:auto}
body[data-modulo^="matematica-"] .menu-btn,body[data-modulo^="fisica-"] .menu-btn{display:grid;place-items:center;
position:fixed;top:20px;left:20px;z-index:45;width:42px;height:42px;border-radius:12px;border:1px solid var(--bd);
background:var(--hoja);color:var(--tx);cursor:pointer;font-size:20px;box-shadow:var(--sombra)}
}
@media(min-width:1000px) and (max-width:1339px){
:root{--rail:232px}
body[data-modulo^="matematica-"] .main,body[data-modulo^="fisica-"] .main{padding-left:84px}
.con-recorrido .main{padding-right:calc(28px + var(--rail) + 28px)}
.con-recorrido .toc{left:calc(100% + 28px)}
.con-recorrido .wrap{padding-left:clamp(28px,4vw,56px);padding-right:clamp(28px,4vw,56px)}
}
@media(max-width:999px){
.con-recorrido .ruta{display:flex;padding-left:70px}
.con-recorrido .main{padding:0 0 80px}
.con-recorrido .wrap{margin:24px 24px 0}
body[data-modulo^="matematica-"] .menu-btn,body[data-modulo^="fisica-"] .menu-btn{top:8px;left:14px;box-shadow:none}
.con-recorrido .etapa,.con-recorrido .subtema,.con-recorrido .practica,.con-recorrido .videorepaso,
.con-recorrido .cierre,.con-recorrido .mod-body h2{scroll-margin-top:84px}
}
/* teléfono y tableta vertical: todas las páginas */
@media(max-width:899px){
:root{--fs-txt:1.15625rem;--lh-txt:1.6}
html,body{background:var(--hoja)}
.side{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .22s}
.side.on{transform:none;box-shadow:0 0 40px rgba(0,0,0,.25)}
.velo{display:block;position:fixed;inset:0;background:rgba(10,14,22,.45);z-index:35;opacity:0;pointer-events:none;
transition:opacity .22s}
.velo.on{opacity:1;pointer-events:auto}
.menu-btn{display:grid;place-items:center;position:fixed;top:8px;left:14px;z-index:45;width:42px;height:42px;
border-radius:12px;border:1px solid var(--bd);background:var(--hoja);color:var(--tx);cursor:pointer;font-size:20px}
.main,.con-recorrido .main{padding:0 0 72px}
.wrap,.con-recorrido .wrap{margin:0;border:0;border-radius:0;box-shadow:none;padding:72px 20px 40px}
.con-recorrido .wrap{padding-top:28px}
.mod-head h1,.hero h1{font-size:2.125rem}
.subtema .subtema-t{font-size:1.875rem}
.mod-body h2{font-size:1.5rem}
.box{padding:16px 18px;margin:26px 0}
.solved>.hd,.solved>.bd{padding-left:18px;padding-right:18px}
.step{padding-left:42px}
.pasos-ctl{padding-left:0}
.k-note{padding:14px 16px}
.mod-body ul.ideas>li{padding:12px 16px 12px 46px}
.mod-body ul.ideas>li::before{left:16px}
table{font-size:.8em} th,td{padding:8px 9px}
.eq{font-size:1.12em}
.mod-nav{flex-direction:column}
.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.guia-lista{grid-template-columns:1fr 1fr}
.ruta-panel{left:10px;right:10px}
.pr-card{padding:18px}
.et-pie{padding:14px}
}
@media(max-width:560px){
/* una fórmula larga en línea puede cortarse en sus espacios antes que ensanchar la página */
.m{white-space:normal}
.mastery{display:grid;grid-template-columns:1fr 1fr;border-radius:14px;width:100%}
.mastery button{border-radius:10px;justify-content:flex-start}
.et-sig{width:100%;justify-content:space-between}
.plan-cta{width:100%;justify-content:center}
.et-pos .et-n{display:none}
.seguir{flex-direction:column;align-items:flex-start}
.guia-lista{grid-template-columns:1fr}
.mat-h{flex-direction:column;align-items:flex-start}
.mat-h .ex-fecha{text-align:left}
.fila{padding:14px 16px;gap:12px}
.fila .rr{display:none}
.pr-btns .b-ok{margin-left:0}
.vr-fila{display:grid;grid-template-columns:42px minmax(0,1fr) auto;column-gap:14px;row-gap:10px;align-items:start}
.vr-ic{grid-column:1;grid-row:1;align-self:start}
.vr-tt{grid-column:2;grid-row:1}
.vr-ext{grid-column:3;grid-row:1;align-self:start;margin-top:3px}
.vr-alt{grid-column:2;grid-row:2;justify-self:start;align-self:start;margin:0}
}
/* ===================================================================== MOVIMIENTO E IMPRESIÓN */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{
html,body{background:#fff}
.side,.menu-btn,.mastery,.mastery-lbl,.mod-nav,.modal,.pr-btns,.ruta,.toc,.et-pie,.pasos-ctl,.plan,.video-rec,.cierre,
.aviso,.seguir{display:none!important}
.wrap,.con-recorrido .wrap{max-width:none;border:0;box-shadow:none;padding:0;margin:0}
.main,.con-recorrido .main{padding:0}
.paso-oculto,.pr-sol,.pr-pista{display:block!important}
}