@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; }
/* Infografía interactiva: una lámina con hasta ocho puntos que abren su panel.
   - Escritorio: el texto a la izquierda y la figura a la derecha, en una pantalla. El panel se abre sobre la columna
     del texto, así nunca tapa la figura ni un control.
   - Teléfono (hasta 760 px): una columna; los puntos pasan a una lista y el panel sube desde abajo.
   - Las letras de la figura se miden en unidades del lienzo (--u = ancho / 1000), así crecen y se achican con ella.
   - Movimiento: una curva y tres duraciones; 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;
  --letra: 1;
  --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;
}
/* «Letra más grande» agranda la raíz; la figura usa --letra */
html.texto-grande { font-size: 115%; --letra: 1.15; }

* { 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: 1.0625rem; line-height: 1.5; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
img { display: block; max-width: 100%; }
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; }
.solo-alto { display: none; }

/* ---------- armazón ---------- */
.app { min-height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 8px 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; margin: 0; 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), border-color var(--d2) var(--curva); }
.bolitas i.llena { background: var(--tinta); border-color: var(--tinta); }
.completa .avance .cuenta { 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: var(--papel-claro); font: 700 .9375rem var(--display); color: var(--tinta); cursor: pointer; text-decoration: none;
  transition: border-color var(--d1) var(--curva), background-color var(--d1) var(--curva); }
.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; font-size: 1.0625rem; }

/* columnas: texto | figura; la actividad, al pie de la columna del texto; el panel ocupa toda esa columna */
.cuerpo { position: relative; min-height: 0; display: grid; grid-template-columns: minmax(290px, 380px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 48px; row-gap: 16px; padding: 22px 32px 26px; }
.lado { grid-column: 1; grid-row: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.antetitulo { font: 600 .9375rem/1.3 var(--display); color: var(--gris); }
.antetitulo .curso { color: var(--acento-tinta); font-weight: 700; margin-right: .45em; }
h1 { font: 600 2.125rem/1.12 var(--texto); letter-spacing: -.01em; color: var(--tinta); margin-top: 8px; }
.entradilla { margin-top: 12px; font-size: 1.0625rem; line-height: 1.5; color: var(--tinta-2); }
.instruccion { padding-top: 14px; border-top: 1px solid var(--regla); font: 600 .9375rem/1.4 var(--display); color: var(--tinta-2); }
.completa .instruccion { color: var(--tinta); }
.actividad { grid-column: 1; grid-row: 2; align-self: end; padding: 14px 18px 16px; background: var(--papel-2); border-left: 4px solid var(--acento); border-radius: 0 10px 10px 0; }
.actividad h2 { font: 700 1.0625rem/1.25 var(--display); color: var(--acento-tinta); }
.actividad p { margin-top: 6px; font-size: .9375rem; line-height: 1.45; }

.zona-figura { grid-column: 2; grid-row: 1 / -1; container-type: size; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
/* la ilustración se queda con el alto que no necesita la figura (100cqw / --ar-lienzo) */
.ilustracion { margin: 0; flex: 0 1 auto; width: 100%; aspect-ratio: var(--ar-ilus); max-height: max(120px, calc(100cqh - 100cqw / var(--ar-lienzo) - 40px));
  overflow: hidden; border-radius: 10px; background: var(--papel-2); }
.ilustracion + .marco { flex: 0 0 auto; height: calc(100cqw / var(--ar-lienzo)); max-height: calc(100cqh - 136px); }
.ilustracion img { width: 100%; height: 100%; object-fit: cover; object-position: var(--encuadre, 50% 50%); }
.marco { flex: 1 1 0; min-height: 0; container-type: size; display: grid; place-items: center; }

/* ---------- figura ---------- */
.lienzo { position: relative; --anc: min(100cqw, calc(100cqh * var(--ar))); width: var(--anc); aspect-ratio: var(--ar); --u: calc(var(--anc) / 1000); }
.trazo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trazo .linea { fill: none; stroke: var(--tinta-2); stroke-width: 2.6; stroke-linecap: round; }
.trazo .flecha { fill: var(--tinta-2); }
.trazo .pista { fill: none; stroke: var(--regla); stroke-width: 9; }
.trazo .disco { fill: var(--papel-2); }
.trazo .halo { fill: none; stroke: var(--papel-claro); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.trazo .guia { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linejoin: round; transition: stroke var(--d1) var(--curva); }
.trazo .guia.resalta, .trazo .guia.activo { stroke: var(--acento); stroke-width: 2.8; }

.puntos { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.punto { --rr: calc(var(--u) * var(--r)); position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: calc(var(--u) * 12);
  margin: 0; padding: 0; border: 0; background: none; border-radius: calc(var(--u) * 10); text-align: center; cursor: pointer; }
div.punto { cursor: default; }
.punto[data-lado="abajo"] { flex-direction: column; transform: translate(-50%, calc(-1 * var(--rr))); }
.punto[data-lado="arriba"] { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + var(--rr))); }
.punto[data-lado="derecha"] { flex-direction: row; transform: translate(calc(-1 * var(--rr)), -50%); text-align: left; }
.punto[data-lado="izquierda"] { flex-direction: row-reverse; transform: translate(calc(-100% + var(--rr)), -50%); text-align: right; }
.punto:focus-visible { outline-offset: 5px; border-radius: calc(var(--u) * 12); }
.marca { position: relative; flex: none; display: grid; place-items: center; width: calc(2 * var(--rr)); height: calc(2 * var(--rr)); border-radius: 50%;
  border: max(2px, calc(var(--u) * 3)) solid var(--tinta); background: var(--papel-claro); color: var(--tinta);
  font: 600 calc(var(--rr) * 1.05)/1 var(--texto); font-variant-numeric: lining-nums;
  transition: background-color var(--d2) var(--curva), border-color var(--d2) var(--curva), color var(--d2) var(--curva), box-shadow var(--d2) var(--curva), transform var(--d1) var(--curva); }
.marca .tilde { position: absolute; top: -14%; right: -14%; width: 46%; height: 46%; padding: 6%; border-radius: 50%; background: var(--papel-claro);
  border: max(1.5px, calc(var(--u) * 2)) solid var(--tinta); fill: none; stroke: var(--tinta); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(.5); transition: opacity var(--d2) var(--curva), transform var(--d2) var(--curva); }
.rotulo { width: calc(var(--u) * var(--w)); }
.rotulo .tit { display: block; font: 700 calc(var(--u) * 19 * var(--letra))/1.18 var(--display); color: var(--tinta); }
.rotulo .sub { display: block; margin-top: calc(var(--u) * 4); font: 400 calc(var(--u) * 15.5 * var(--letra))/1.32 var(--texto); color: var(--tinta-2); }

button.punto:hover .marca { transform: scale(1.06); box-shadow: 0 0 0 calc(var(--u) * 7) var(--papel-2); }
button.punto:hover .tit { text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.punto.visto .marca { background: var(--tinta); color: var(--papel-claro); }
.punto.visto .tilde { opacity: 1; transform: none; }
.punto.activo .marca { background: var(--acento); border-color: var(--acento); color: var(--papel-claro); box-shadow: 0 0 0 calc(var(--u) * 8) color-mix(in srgb, var(--acento) 16%, transparent); }
.punto.activo .tilde { border-color: var(--acento); stroke: var(--acento); }

.senal { position: absolute; left: var(--sx); top: var(--sy); transform: translate(-50%, -50%); display: grid; place-items: center;
  width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: 50%; border: calc(var(--u) * 3) solid var(--papel-claro);
  background: var(--tinta); color: var(--papel-claro); font: 700 calc(var(--u) * 17)/1 var(--display); cursor: pointer;
  box-shadow: 0 1px 3px rgba(30, 16, 17, .25); transition: background-color var(--d1) var(--curva), transform var(--d1) var(--curva); }
.senal.resalta { transform: translate(-50%, -50%) scale(1.14); }
.senal.activo { background: var(--acento); }
/* anillo (partes sin orden): un punto neutro en lugar del número, del color del texto de la marca o la señal */
.nodo { width: 30%; height: 30%; border-radius: 50%; background: currentColor; }
.centro { position: absolute; left: var(--x); top: var(--y); width: calc(var(--u) * var(--w)); transform: translate(-50%, -50%); margin: 0; text-align: center;
  font: italic 600 calc(var(--u) * 30 * var(--letra))/1.15 var(--texto); color: var(--tinta); text-wrap: balance; }
.imagen { position: absolute; left: var(--ix); top: var(--iy); width: var(--iw); height: var(--ih); }
.imagen img { width: 100%; height: 100%; object-fit: contain; border-radius: calc(var(--u) * 8); }

/* ---------- panel ---------- */
dialog.panel { margin: 0; padding: 0; border: 0; background: transparent; color: inherit; max-width: none; max-height: none; }
/* en un elemento con posición absoluta, una línea «auto» es el borde del contenedor: hacen falta las dos líneas */
@media (min-width: 761px) {
  .cuerpo > dialog.panel[open] { position: absolute; grid-column: 1 / 2; grid-row: 1 / -1; inset: 0 auto auto 0; width: 100%; max-height: 100%; display: flex; z-index: 5; }
  .cuerpo.con-panel > .lado, .cuerpo.con-panel > .actividad { visibility: hidden; }
}
.panel-caja { position: relative; width: 100%; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 22px 26px 18px;
  background: var(--papel-claro); border: 1px solid var(--regla); border-radius: 16px; box-shadow: 0 1px 0 var(--regla), 0 16px 36px rgba(30, 16, 17, .10); }
.cerrar { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--regla); background: var(--papel-claro); cursor: pointer; transition: border-color var(--d1) var(--curva); }
.cerrar:hover { border-color: var(--tinta-2); }
.cerrar svg, .boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.contenido { display: flex; flex-direction: column; gap: 12px; }
.panel-cabeza { display: flex; align-items: flex-start; gap: 14px; padding-right: 52px; }
.panel-num { flex: none; font: 600 3rem/.86 var(--texto); color: var(--acento-tinta); font-variant-numeric: lining-nums; }
.contenido h2 { margin-top: 2px; font: 700 1.375rem/1.18 var(--display); color: var(--tinta); }
.panel-sub { margin-top: -4px; font-style: italic; color: var(--tinta-2); }
.contenido p { line-height: 1.5; }
.items { list-style: none; margin: 0; padding: 0; }
.items li { padding: 8px 0; border-top: 1px solid var(--regla); font-size: 1rem; line-height: 1.45; }
.items li:last-child { border-bottom: 1px solid var(--regla); }
.items strong { font-weight: 700; color: var(--tinta); }
.cierre { padding: 10px 14px; background: var(--papel-2); border-left: 4px solid var(--acento); border-radius: 0 8px 8px 0; font-style: italic; font-size: 1rem; line-height: 1.42; }
.panel-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--regla); }
.boton { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--regla);
  background: var(--papel-claro); font: 700 .9375rem var(--display); color: var(--tinta); cursor: pointer; transition: border-color var(--d1) var(--curva), opacity var(--d1) var(--curva); }
.boton:hover:not(:disabled) { border-color: var(--tinta-2); }
.boton.siguiente { background: var(--tinta); border-color: var(--tinta); color: var(--papel-claro); }
.boton:disabled { opacity: .4; cursor: default; }
.posicion { font: 600 .875rem var(--display); color: var(--gris); font-variant-numeric: tabular-nums; }

/* ---------- movimiento ---------- */
@keyframes dibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes aparece { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes funde { from { opacity: 0; } to { opacity: 1; } }
@keyframes entra-panel { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes sube-panel { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes cambia { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lienzo.entra .trazo .linea, .lienzo.entra .trazo .guia { stroke-dasharray: 1; animation: dibuja var(--d3) var(--curva) backwards; animation-delay: 80ms; }
.lienzo.entra .trazo .flecha { animation: funde var(--d2) var(--curva) backwards; animation-delay: 420ms; }
.lienzo.entra .marca, .lienzo.entra .senal { animation: aparece var(--d2) var(--curva) backwards; animation-delay: calc(var(--i, 0) * 60ms + 60ms); }
.lienzo.entra .rotulo, .lienzo.entra .centro { animation: funde var(--d2) var(--curva) backwards; animation-delay: calc(var(--i, 0) * 60ms + 160ms); }
/* anillo: el trazo se funde en lugar de dibujarse en un sentido, y las partes entran a la vez, sin escalonar */
.lienzo[data-tipo="anillo"].entra .trazo .linea { stroke-dasharray: none; animation: funde var(--d3) var(--curva) backwards; animation-delay: 80ms; }
.lienzo[data-tipo="anillo"].entra .marca { animation-delay: 60ms; }
.lienzo[data-tipo="anillo"].entra .rotulo { animation-delay: 160ms; }
dialog.panel.entra .panel-caja { animation: entra-panel var(--d2) var(--curva) backwards; }
dialog.panel.sale .panel-caja { opacity: 0; transform: translateX(-10px); transition: opacity var(--d1) var(--curva), transform var(--d1) var(--curva); }
.contenido.cambia { animation: cambia var(--d2) var(--curva) backwards; }

/* ---------- escritorio: todo en una pantalla ---------- */
@media (min-width: 761px) and (min-height: 600px) {
  .app { height: 100vh; height: 100dvh; }
}
@media (min-width: 761px) and (max-height: 599px) {
  .cuerpo { grid-template-rows: auto auto; }
  .zona-figura { height: 560px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .cuerpo { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); column-gap: 32px; padding: 20px 24px 22px; }
  h1 { font-size: 1.875rem; }
}

/* ---------- teléfono ---------- */
@media (max-width: 760px) {
  .barra { min-height: 56px; padding: 6px 16px; }
  .herramienta { padding: 0 14px; }
  .herramienta .largo { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .cuerpo { display: block; padding: 18px 16px 36px; }
  .lado { display: block; }
  .lado > * + * { margin-top: 14px; }
  h1 { font-size: 1.75rem; }
  .entradilla { font-size: 1rem; }
  .actividad { margin-top: 26px; }
  .zona-figura { display: block; container-type: normal; margin-top: 22px; }
  .ilustracion { max-height: none; margin-bottom: 14px; }
  .marco, .ilustracion + .marco { container-type: inline-size; display: block; height: auto; max-height: none; }
  .lienzo { --anc: 100cqw; --u: calc(100cqw / 400); width: 100%; aspect-ratio: auto; }
  .solo-ancho { display: none !important; }
  .solo-alto { display: block; }
  .anillo { position: relative; width: 100%; aspect-ratio: var(--ar-a); }
  .anillo .senal { left: var(--xa); top: var(--ya); width: calc(var(--u) * 46); height: calc(var(--u) * 46); font-size: calc(var(--u) * 20); border-width: calc(var(--u) * 3); }
  .anillo .centro { left: var(--xa); top: var(--ya); width: calc(var(--u) * var(--wa)); font-size: calc(var(--u) * 22 * var(--letra)); }
  .imagen { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: var(--ar-img); }
  .imagen .senal { width: 2.25rem; height: 2.25rem; border-width: 2.5px; font-size: 1rem; }
  .puntos { position: static; display: grid; gap: 6px; margin-top: 14px; }
  .punto { position: static; width: 100%; transform: none !important; flex-direction: row !important; align-items: center; gap: 14px; min-height: 56px;
    padding: 8px 10px; border-radius: 12px; text-align: left !important; }
  .punto:focus-visible { outline-offset: 2px; border-radius: 12px; }
  .punto .marca { width: 2.75rem; height: 2.75rem; border-width: 2.5px; font-size: 1.25rem; }
  .punto .marca .tilde { border-width: 1.5px; }
  .rotulo { width: auto; flex: 1; min-width: 0; }
  .rotulo .tit { font-size: 1.0625rem; }
  .rotulo .sub { margin-top: 2px; font-size: .9375rem; }
  button.punto:hover .marca { box-shadow: none; transform: none; }
  .punto.activo .marca { box-shadow: 0 0 0 5px color-mix(in srgb, var(--acento) 16%, transparent); }
  /* el proceso: una línea con flecha de un paso al siguiente */
  .lienzo[data-tipo="proceso"] .puntos { gap: 14px; margin-top: 0; }
  .lienzo[data-tipo="proceso"] .punto { align-items: flex-start; }
  .lienzo[data-tipo="proceso"] .puntos li { position: relative; }
  .lienzo[data-tipo="proceso"] .puntos li:not(:last-child)::before { content: ""; position: absolute; left: calc(10px + 1.375rem - 1px); top: calc(8px + 2.75rem + 4px);
    bottom: calc(-14px - 8px + 6px); border-left: 2px solid var(--tinta-2); }
  .lienzo[data-tipo="proceso"] .puntos li:not(:last-child)::after { content: ""; position: absolute; left: calc(10px + 1.375rem - 5px); bottom: calc(-14px - 8px + 4px);
    border: 5px solid transparent; border-top: 7px solid var(--tinta-2); border-bottom: 0; }
  .cuerpo > dialog.panel[open] { position: fixed; inset: auto 0 0 0; width: 100%; max-height: 88vh; max-height: 88dvh; display: flex; }
  dialog.panel::backdrop { background: rgba(30, 16, 17, .38); }
  .panel-caja { max-height: 88vh; max-height: 88dvh; border-radius: 18px 18px 0 0; padding: 20px 18px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 30px rgba(30, 16, 17, .16); }
  .panel-num { font-size: 2.5rem; }
  dialog.panel.entra .panel-caja { animation-name: sube-panel; }
  dialog.panel.sale .panel-caja { transform: translateY(24px); }
}

/* ---------- reducir movimiento: solo fundidos breves ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: var(--d1) !important; transition-property: opacity, color, background-color, border-color !important; }
  .lienzo.entra *, dialog.panel.entra .panel-caja, .contenido.cambia { animation: funde var(--d1) linear backwards !important; animation-delay: 0ms !important; }
  .lienzo.entra .trazo .linea, .lienzo.entra .trazo .guia { stroke-dasharray: none; }
  dialog.panel.sale .panel-caja { transform: none !important; }
  button.punto:hover .marca { transform: none; }
  .senal.resalta { transform: translate(-50%, -50%); }
}

@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 infografía (30 de octubre de 2026). arma.py la añade después de infografia.css y de
   base/eclipse/eclipse.css cuando contenido.json lleva «"estilo": "eclipse"». Papel crema con fibras de risografía,
   titulares en Fraunces, rótulos en Space Mono, filetes de tinta, marcas como discos (la abierta, en el color del primer
   disco con su sombra rayada) y la ilustración en discos de color con la foto en trama («ilustracion»: {"foto": …}),
   que arma 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 */
h1, .contenido h2, .panel-num, .texto-punto .num { font-family: Fraunces, Georgia, serif; font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0; }
h1 { font-weight: 600; letter-spacing: -.012em; }
.contenido h2 { font-weight: 620; }
.panel-num, .texto-punto .num { font-weight: 600; color: var(--tinta); }
.antetitulo, .instruccion, .avance { font-family: "Space Mono", ui-monospace, monospace; font-weight: 400; letter-spacing: .02em; }
.antetitulo { text-transform: uppercase; font-size: .8125rem; color: var(--tinta-2); }
.antetitulo .curso { color: var(--tinta); }
.rotulo .tit { font-weight: 700; }

/* filetes de tinta */
.barra { background: color-mix(in srgb, var(--papel) 90%, transparent); border-bottom: 1.5px solid var(--tinta); }
.instruccion { border-top: 1.5px solid var(--tinta); }
.herramienta, .boton, .cerrar { border-color: var(--tinta); }
.panel-caja { border: 1.5px solid var(--tinta); border-radius: 6px; box-shadow: none; }
.items li, .items li:last-child, .panel-pie { border-color: var(--regla); }
.cierre, .actividad { border-left: 0; border-radius: 6px; background: var(--papel-claro); border: 1.5px solid var(--tinta); position: relative; padding-left: 52px; }
.cierre::before, .actividad::before { content: ""; position: absolute; left: 16px; top: 14px; width: 22px; height: 22px; border-radius: 50%;
  background: repeating-linear-gradient(-35deg, var(--tinta) 0 2px, transparent 2px 6px), var(--disco-b); }
.actividad h2 { color: var(--tinta); font-family: "Space Mono", ui-monospace, monospace; text-transform: uppercase; font-size: .875rem; letter-spacing: .02em; }

/* el avance en discos; los vistos en tinta */
.bolitas i { border-color: var(--tinta-2); }
.bolitas i.llena { background: var(--tinta); }

/* la línea del organizador, en tinta; las marcas, discos con filete; la abierta, en el color del disco con su sombra rayada */
.trazo .linea, .trazo .guia { stroke: var(--tinta); }
.trazo .flecha { fill: var(--tinta); }
.trazo .pista { stroke: color-mix(in srgb, var(--disco-a) 45%, var(--papel)); }
.trazo .disco { fill: color-mix(in srgb, var(--disco-a) 30%, var(--papel)); }
.trazo .guia.resalta, .trazo .guia.activo { stroke: var(--tinta); }
.marca { font-family: Fraunces, Georgia, serif; font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0; }
.punto.activo .marca { background: var(--disco-a); border-color: var(--tinta); color: var(--tinta);
  box-shadow: 0 0 0 calc(var(--u) * 7) var(--papel), 0 0 0 calc(var(--u) * 9) var(--tinta); }
.punto.activo .marca::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
  background: repeating-linear-gradient(-35deg, var(--tinta) 0 calc(var(--u) * 2.4), transparent calc(var(--u) * 2.4) calc(var(--u) * 7));
  -webkit-mask: radial-gradient(circle at 70% 28%, transparent 0 58%, #000 59%); mask: radial-gradient(circle at 70% 28%, transparent 0 58%, #000 59%); }
.punto.activo .tilde { border-color: var(--tinta); stroke: var(--tinta); }
button.punto:hover .marca { box-shadow: 0 0 0 calc(var(--u) * 7) color-mix(in srgb, var(--disco-a) 40%, var(--papel)); }
button.punto:hover .tit { text-decoration-color: var(--tinta); }

/* la ilustración: discos con la foto en trama, sobre el mismo papel */
.ilustracion.con-eclipse, .hoja .banda.con-eclipse { background: transparent; overflow: visible; }
.ilustracion.con-eclipse .eclipse-visual, .banda.con-eclipse .eclipse-visual { width: 100%; height: 100%; }

/* la estática: el disco rayado de los recuadros, más chico */
.hoja { background: var(--papel); }
.texto-punto .cierre { padding-left: calc(32px * var(--e)); border-left-width: 1.5px; }
.hoja .actividad { padding-left: calc(42px * var(--e)); }
.texto-punto .cierre::before { left: calc(9px * var(--e)); top: calc(7px * var(--e)); width: calc(14px * var(--e)); height: calc(14px * var(--e)); }
.hoja .actividad::before { left: calc(14px * var(--e)); top: calc(11px * var(--e)); width: calc(18px * var(--e)); height: calc(18px * var(--e)); }
.texto-punto h2 { border-bottom: 1.5px solid var(--tinta); }
@media (prefers-reduced-motion: reduce) { .punto.activo .marca::after { transition: 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;}