@font-face { font-family: "Urbanist"; src: url(fuentes/urbanist-latin-wght-normal.woff2?v=96bc39c4) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url(fuentes/urbanist-latin-ext-wght-normal.woff2?v=d2c4d880) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; src: url(fuentes/sourceserif4-normal-400_700.woff2?v=4c4d14ec) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(fuentes/sourceserif4-italic-400_700.woff2?v=7be705ca) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
/* Ruta de aprendizaje: el recorrido del curso semana a semana, con lo que hay que hacer en cada una.
   - Escritorio (1366 × 768, sin desplazamiento): cabecera, el recorrido de semanas como pestañas sobre una línea, y el
     panel de la semana elegida con su objetivo a la izquierda y su lista de recursos a la derecha.
   - Teléfono (hasta 760 px): una columna; las estaciones muestran solo el número y el panel se lee hacia abajo.
   - Movimiento: una curva y tres duraciones (160, 280 y 520 ms); con «reducir movimiento», solo fundidos breves.
   arma.py antepone las @font-face y reescribe los colores desde base/marca/marca.json. */

:root {
  --papel: #f4eee4; --papel-claro: #fbf8f2; --papel-2: #ebe3d6; --tinta: #1e1011; --tinta-2: #4d4244; --gris: #6f6466;
  --regla: #ddd2c4; --acento: #da291c; --acento-tinta: #b51f14;
  --display: Urbanist, "Segoe UI", system-ui, sans-serif;
  --texto: "Source Serif 4", Georgia, serif;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --d1: 160ms; --d2: 280ms; --d3: 520ms;
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .27  0 0 0 0 .2  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme: light;
}
html.texto-grande { font-size: 115%; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel) var(--grano); color: var(--tinta); font-family: var(--texto); font-size: 1rem; line-height: 1.45; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; }
a { color: var(--tinta); text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- armazón ---------- */
.app { min-height: 100vh; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); }
.barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 6px 32px;
  border-bottom: 1px solid var(--regla); background: rgba(251, 248, 242, .72); font-family: var(--display); }
.avance { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: .9375rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.bolitas { display: flex; gap: 6px; }
.bolitas i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--tinta-2); transition: background-color var(--d2) var(--curva); }
.bolitas i.llena { background: var(--tinta); border-color: var(--tinta); }
.herramientas { display: flex; align-items: center; gap: 10px; }
.herramienta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--regla);
  background: transparent; font: 600 .9375rem var(--display); color: var(--tinta); text-decoration: none; cursor: pointer; }
.herramienta:hover { border-color: var(--tinta-2); }
.herramienta[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel-claro); }
.herramienta .aa { font-family: var(--texto); font-weight: 600; }

.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 14px 48px 6px; }
.antetitulo { font: 600 .9375rem var(--display); color: var(--gris); }
.cabecera h1 { margin-top: 4px; font: 800 2.25rem/1.05 var(--display); letter-spacing: -.01em; }
.entradilla { margin-top: 8px; max-width: 46rem; color: var(--tinta-2); }
.cabecera-lado { display: flex; align-items: flex-end; gap: 28px; flex: none; }
.cifras { display: flex; gap: 26px; margin: 0; flex: none; font-family: var(--display); }
.cifras div { display: flex; flex-direction: column-reverse; }
.cifras dt { font-weight: 600; font-size: .8125rem; color: var(--gris); }
.cifras dd { margin: 0; font-weight: 800; font-size: 1.75rem; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- el recorrido: una estación por semana, unidas por una línea ---------- */
.recorrido { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; margin: 6px 48px 0; padding: 0; }
.recorrido::before { content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 31px; border-top: 3px dashed var(--gris); opacity: .7; }
.estacion { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 44px; padding: 4px 6px 8px; border: 0; background: none;
  cursor: pointer; font-family: var(--display); text-align: center; border-radius: 10px; }
.estacion .num { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--tinta); background: var(--papel-claro);
  font-weight: 800; font-size: 1.5rem; line-height: 1; transition: background-color var(--d2) var(--curva), border-color var(--d2) var(--curva), color var(--d2) var(--curva); }
.estacion .rotulo { font-weight: 600; font-size: .875rem; color: var(--gris); }
.estacion .nombre { font-weight: 700; font-size: 1rem; line-height: 1.15; color: var(--tinta); max-width: 15rem; }
.estacion .hechos { font-weight: 600; font-size: .8125rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.estacion[aria-selected="true"] .num { background: var(--acento); border-color: var(--acento); color: #fff; }
.estacion[aria-selected="true"] .nombre { text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.estacion.vista:not([aria-selected="true"]) .num { background: var(--tinta); color: var(--papel-claro); }
.estacion:hover .num { border-color: var(--acento-tinta); }

/* ---------- la semana ---------- */
.semanas { min-height: 0; padding: 4px 48px 14px; }
.semana { min-height: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding: 18px 32px 14px; border-radius: 12px;
  background: rgba(251, 248, 242, .78); box-shadow: 0 1px 0 var(--regla), 0 10px 26px -18px rgba(40, 24, 20, .45); animation: funde var(--d3) var(--curva); }
.semana h2 { font: 800 1.625rem/1.1 var(--display); }
.semana .datos { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 600 .9375rem var(--display); color: var(--gris); }
.semana .objetivo { margin-top: 16px; padding-left: 14px; border-left: 3px solid var(--acento); font-size: 1.0625rem; color: var(--tinta); }
.semana .objetivo strong { display: block; font: 700 .875rem var(--display); color: var(--tinta-2); margin-bottom: 2px; }
.lista-titulo { font: 700 1rem var(--display); color: var(--tinta-2); }
.recursos { list-style: none; margin: 4px 0 0; padding: 0; }
.recursos li { border-top: 1px solid var(--regla); }
.recursos li:first-child { border-top: 0; }
.recursos label { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 44px; padding: 5px 4px; cursor: pointer; }
.recursos input { width: 22px; height: 22px; margin: 0; accent-color: var(--tinta); cursor: pointer; }
.recursos .titulo { color: var(--tinta); }
.recursos .meta { font: 600 .875rem var(--display); color: var(--gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.recursos .evaluada .meta { color: var(--acento-tinta); }
.recursos input:checked ~ .titulo { color: var(--tinta-2); text-decoration: line-through; text-decoration-color: var(--gris); }
.nota-avance { margin-top: 16px; font: 600 .875rem var(--display); color: var(--gris); }

@keyframes funde { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- teléfono ---------- */
@media (max-width: 760px) {
  .barra { padding: 6px 16px; }
  .avance .cuenta { font-size: .875rem; }
  .herramienta .largo { display: none; }
  .cabecera { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 16px 4px; }
  .cabecera h1 { font-size: 1.75rem; }
  .cifras { gap: 20px; }
  .cabecera-lado { align-self: stretch; }
  .cifras dd { font-size: 1.375rem; }
  .recorrido { margin: 8px 8px 0; }
  .estacion { padding: 4px 0 8px; }
  .estacion .num { width: 44px; height: 44px; font-size: 1.25rem; }
  .recorrido::before { top: 26px; }
  .estacion .rotulo, .estacion .nombre { display: none; }
  .semanas { padding: 4px 16px 24px; }
  .semana { grid-template-columns: 1fr; gap: 18px; padding: 18px 16px; min-height: 0; }
}
@media (min-width: 761px) { .app { height: 100vh; } }

/* ---------- reducir movimiento: solo fundidos breves ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: var(--d1) !important; transition-property: opacity, background-color, border-color, color !important; scroll-behavior: auto !important; }
  .semana { animation: solo-funde var(--d1) linear; }
}
@keyframes solo-funde { from { opacity: 0; } to { opacity: 1; } }

@font-face { font-family: "Fraunces"; src: url(fuentes/fraunces-latin-full-normal.woff2?v=e75e106b) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(fuentes/fraunces-latin-ext-full-normal.woff2?v=89349bb9) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Mono"; src: url(fuentes/space-mono-latin-400-normal.woff2?v=e2ee2d37) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url(fuentes/space-mono-latin-700-normal.woff2?v=d0c504bd) format("woff2"); font-weight: 700; font-display: swap; }
/* Eclipse en el navegador (30 de octubre de 2026): lo común a la presentación, la infografía y la ruta. Cada plantilla
   carga esta hoja después de la suya y antes de su propio eclipse.css, que declara las letras con sus rutas y ajusta sus
   piezas. Los colores de los discos (--disco-a, --disco-b, --cruce) los escribe el constructor según la paleta de la
   carrera y la marca del cliente, en un :root que va después; aquí van los de Salud. */

:root { --disco-a: #f7cc00; --disco-b: #ef81ca; --cruce: #ef6b00; }
:root[data-estilo="eclipse"] {
  --papel: #f7f5e4; --papel-claro: #fcfbf3; --papel-2: #ece9d3; --tinta: #171715; --tinta-2: #4a483f; --gris: #6b685e; --regla: #cfcab3;
  --titular: Fraunces, Georgia, serif; --rotulo: "Space Mono", ui-monospace, monospace;
  /* base/movimiento.md: ease-out fuerte para entrar */
  --ecl-entra: cubic-bezier(0.23, 1, 0.32, 1); --ecl-mueve: cubic-bezier(0.77, 0, 0.175, 1);
}

/* la imagen: discos, foto en trama, sombra rayada y contorno */
.eclipse-visual { position: relative; }
.eclipse-visual .ecl-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.ecl-disco-a { fill: var(--disco-a); }
.ecl-disco-b { fill: var(--disco-b); }
.ecl-cruce { fill: var(--cruce); }
.ecl-sombra line { stroke: var(--tinta); stroke-width: 4.5; }
.ecl-contorno { fill: none; stroke: var(--tinta); stroke-width: 2.5; }
.ecl-raya { fill: var(--tinta); }

/* la entrada: el disco grande crece desde 0,6, la foto aparece, el disco chico llega y el contorno se dibuja (unos 700 ms) */
.ecl-a, .ecl-b, .ecl-raya { transform-box: fill-box; }
.ecl-a { transform-origin: center; }
.ecl-raya { transform-origin: 0 50%; }
.eclipse-visual:not(.ecl-quieto) .ecl-a { animation: ecl-crece 560ms var(--ecl-entra) both; }
.eclipse-visual:not(.ecl-quieto) .ecl-foto { animation: ecl-aparece 420ms ease-out 140ms both; }
.eclipse-visual:not(.ecl-quieto) .ecl-raya { animation: ecl-raya 360ms var(--ecl-entra) both; animation-delay: calc(var(--k, 0) * 14ms + 180ms); }
.eclipse-visual:not(.ecl-quieto) .ecl-b { animation: ecl-llega 620ms var(--ecl-entra) 120ms both; }
.eclipse-visual:not(.ecl-quieto) .ecl-contorno { stroke-dasharray: 1; animation: ecl-traza 700ms var(--ecl-entra) 260ms both; }
@keyframes ecl-crece { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ecl-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes ecl-raya { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ecl-llega { from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); } to { opacity: 1; transform: none; } }
@keyframes ecl-traza { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .eclipse-visual .ecl-a, .eclipse-visual .ecl-foto, .eclipse-visual .ecl-raya, .eclipse-visual .ecl-b, .eclipse-visual .ecl-contorno { animation: none !important; }
}
@media (forced-colors: active) { .eclipse-visual { display: none; } }

/* Estilo Eclipse para la ruta (30 de octubre de 2026). arma.py la añade después de ruta.css y de base/eclipse/eclipse.css
   cuando ruta.json lleva «"estilo": "eclipse"». Papel crema con fibras de risografía, titulares en Fraunces, rótulos en
   Space Mono, el recorrido como un filete de tinta, las estaciones como discos (la elegida, en el color del primer disco
   con su sombra rayada) y la foto del curso («foto») en sus discos, junto a las cifras (base/eclipse/eclipse.js). */

:root[data-estilo="eclipse"] { --texto: Urbanist, "Segoe UI", system-ui, sans-serif; --grano: none; --curva: var(--ecl-entra); --d1: 160ms; --d2: 240ms; --d3: 320ms; }
body { background: url("eclipse/papel.jpg?v=740e3ca7") 0 0 / 512px 512px, var(--papel); }

/* titulares en Fraunces; rótulos en Space Mono */
.cabecera h1, .semana h2, .hoja h1, .fila .num, .cifras dd { font-family: Fraunces, Georgia, serif; font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0; font-weight: 600; }
.cabecera h1 { letter-spacing: -.012em; }
:is(.antetitulo, .estacion .rotulo, .estacion .hechos, .cifras dt, .semana .datos, .recursos .meta, .nota-avance, .avance .cuenta, .semana .objetivo strong, .fila .rotulo, .fila .datos) {
  font-family: "Space Mono", ui-monospace, monospace; font-weight: 400; letter-spacing: .02em; }
.antetitulo { text-transform: uppercase; color: var(--tinta-2); }
.barra { background: color-mix(in srgb, var(--papel) 90%, transparent); border-bottom: 1.5px solid var(--tinta); }
.herramienta { border-color: var(--tinta); }

/* la foto del curso, en sus discos */
.figura-eclipse { margin: 0 0 -6px; width: 330px; height: 150px; flex: none; }
.figura-eclipse .eclipse-visual { width: 100%; height: 100%; }

/* el recorrido: un filete de tinta; las estaciones, discos */
.recorrido::before { border-top: 1.5px solid var(--tinta); opacity: 1; top: 32px; }
.estacion .num { border-width: 2px; font-family: Fraunces, Georgia, serif; font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0; font-weight: 600; overflow: hidden;
  transition: background-color var(--d2) var(--curva), color var(--d2) var(--curva), transform var(--d1) var(--curva); }
.estacion[aria-selected="true"] .num { position: relative; background: var(--disco-a); border-color: var(--tinta); color: var(--tinta); }
.estacion[aria-selected="true"] .num::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-linear-gradient(-35deg, var(--tinta) 0 1.6px, transparent 1.6px 5px);
  -webkit-mask: radial-gradient(circle at 72% 26%, transparent 0 60%, #000 61%); mask: radial-gradient(circle at 72% 26%, transparent 0 60%, #000 61%); }
.estacion[aria-selected="true"] .nombre { text-decoration-color: var(--tinta); text-decoration-thickness: 2px; }
.estacion:hover .num { border-color: var(--tinta); }
.estacion:active .num { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .estacion:not([aria-selected="true"]):hover .num { background: color-mix(in srgb, var(--disco-a) 35%, var(--papel-claro)); } }

/* la semana: plana, con filete de tinta; el objetivo con un disco rayado */
.semana { background: var(--papel-claro); border: 1.5px solid var(--tinta); border-radius: 6px; box-shadow: none; }
.semana .objetivo { position: relative; border-left: 0; padding-left: 34px; }
.semana .objetivo::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: repeating-linear-gradient(-35deg, var(--tinta) 0 2px, transparent 2px 6px), var(--disco-b); }
.recursos .evaluada .meta { color: var(--tinta); }

/* la estática */
.hoja { background: var(--papel); }
.hoja header { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(20px * var(--e)); }
.hoja .figura-eclipse { width: calc(230px * var(--e)); height: calc(105px * var(--e)); }
.fila .num { color: var(--tinta); }
.fila { border-top: 1.5px solid var(--tinta); }

@media (max-width: 760px) { .figura-eclipse { display: none; } }
@media (prefers-reduced-motion: reduce) { .estacion:active .num { transform: none; } }

:root{--papel:#f5f2ec;--papel-claro:#fcfbf7;--papel-2:#ece6db;--tinta:#161414;--tinta-2:#43403d;--gris:#6b6763;--regla:#dcd5ca;--acento:#fdba30;--acento-tinta:#8f5600;}:root{--disco-a: #fdba30; --disco-b: #ef81ca; --cruce: #ef6b00;}