/* «Aprende»: índice y páginas de cada término. Se carga después de kit.css y
   de portada.css (tarjetas del índice y columna de texto .doc); aquí va solo lo
   propio: el cambio de nivel, los gráficos chicos y las listas del final.
   FUENTE: aprende-base/aprende.css. Se copia a public/aprende/ con
   scripts/build_aprende_paginas.mjs. */

:root{
  --c-valor:#6e861b;          /* línea principal (igual que en las herramientas) */
  --c-2:#a3612a;              /* segunda línea: el otro activo o el otro caso */
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --c-valor:#b5d23c;
  --c-2:#e0a86a;
}}
:root[data-theme="dark"]{
  --c-valor:#b5d23c;
  --c-2:#e0a86a;
}

/* ---------- Índice: los términos de dos en dos, como en la portada ---------- */
.glosario .rejilla{grid-template-columns:repeat(2,1fr)}
@media (max-width:680px){.glosario .rejilla{grid-template-columns:1fr}}

/* ---------- Página de un término ---------- */
.termino .kicker{margin-top:26px}
.termino h1{margin-top:12px}
.nivel{display:flex;gap:8px;margin:28px 0 4px}
.nivel button{font:600 13px var(--font-sans);color:var(--text);background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;transition:border-color .16s,background .16s,color .16s}
.nivel button:hover{border-color:var(--text)}
.nivel button[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-text);border-color:var(--btn-bg)}
.explicacion p{margin:16px 0 0}
.explicacion i{color:var(--text)}

/* El gráfico con datos reales. */
.figura{margin:36px 0 0;padding:22px clamp(16px,3vw,28px) 18px;background:var(--paper);border:1px solid var(--line);border-radius:18px}
.figura-titulo{font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:var(--olive-text);margin:0 0 14px}
.figura-nota{margin:12px 0 0!important;font-size:12.5px!important;line-height:1.45!important;color:var(--faint)!important}
.mini-titulo{margin:0 0 6px!important;font-size:13px!important;font-weight:700;color:var(--text)!important}
.mini+.mini-titulo{margin-top:18px!important}
.mini-par{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:640px){.mini-par{grid-template-columns:1fr;gap:18px}}

/* El dibujo se estira al ancho; las etiquetas, en HTML, mantienen su tamaño. */
.mini{position:relative;padding-top:12px}
.mini-area{position:relative;height:240px}
.mini.bajo .mini-area{height:150px}
.mini svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mini svg path,.mini svg rect{vector-effect:non-scaling-stroke}
.mini .grid{stroke:var(--line);stroke-width:1;fill:none}
.mini .cero{stroke:var(--text-2);stroke-width:1;opacity:.5}
.mini .vertical{stroke:var(--text-2);stroke-width:1;stroke-dasharray:4 4;opacity:.7}
.mini .l-1,.mini .l-2,.mini .l-ap,.mini .l-gris,.mini .l-neg{fill:none;stroke-width:2;stroke-linejoin:round}
.mini .l-1{stroke:var(--c-valor)}
.mini .l-2{stroke:var(--c-2)}
.mini .l-ap{stroke:var(--c-ap);stroke-dasharray:5 4}
.mini .l-gris{stroke:var(--c-ap);stroke-width:1.5;opacity:.75}
.mini .l-neg{stroke:var(--neg);stroke-width:1.5}
.mini .a-l-neg{fill:var(--neg);opacity:.14}
.mini .banda{fill:var(--c-valor);opacity:.16}
.mini .b-pos{fill:var(--c-valor)}
.mini .b-neg{fill:var(--neg)}
.mini .ey{position:absolute;left:0;transform:translateY(-100%);padding-bottom:1px;font:11px/1.2 var(--font-sans);color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.mini .ev{position:absolute;top:0;transform:translateX(4px);font:11px/1.2 var(--font-sans);color:var(--text-2);pointer-events:none}
.mini .et{position:absolute;transform:translate(-100%,-115%);padding:0 4px;border-radius:4px;background:var(--paper);font:700 12px/1.3 var(--font-sans);color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none}
.mini .et.abajo{transform:translate(-50%,25%);background:transparent;color:var(--neg)}
.mini-x{position:relative;height:20px;margin-top:4px}
.mini-x .ex{position:absolute;top:0;transform:translateX(-50%);font:11px/1.4 var(--font-sans);color:var(--faint);white-space:nowrap}
.mini-leyenda{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:12px 0 0!important;padding:0!important;font-size:12.5px;color:var(--text-2)}
.mini-leyenda li{display:flex;align-items:center;gap:7px;margin:0!important;font-size:12.5px!important;line-height:1.4!important}
.mini-leyenda i{display:inline-block;width:16px;height:0;border-top:2px solid var(--c-valor)}
.mini-leyenda .l-2{border-color:var(--c-2)}
.mini-leyenda .l-ap{border-top-style:dashed;border-color:var(--c-ap)}
.mini-leyenda .l-gris{border-color:var(--c-ap)}
.mini-leyenda .banda{height:10px;border:0;border-radius:2px;background:var(--c-valor);opacity:.3}

/* Dónde se ve en Compass y términos relacionados. */
.donde{list-style:none;padding:0!important;margin:0;display:grid;gap:10px}
.donde li{display:grid;gap:2px;margin:0!important;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.donde a{font-weight:700;color:var(--text)!important;text-decoration:none}
.donde a::after{content:" →";color:var(--olive-text)}
.donde a:hover{color:var(--olive-text)!important}
.donde span{font-size:14.5px;color:var(--text-2)}
.relacionados{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0!important;margin:0}
.relacionados li{margin:0!important}
.relacionados a{display:inline-block;font:600 14px var(--font-sans);color:var(--text)!important;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:8px 14px;transition:border-color .16s}
.relacionados a:hover{border-color:var(--text)}
.volver{margin:18px 0 0}
.volver a{color:var(--olive-text);font-weight:650;text-decoration:none}
.termino .kit-faq h2{margin-top:0}
.termino .aviso{text-align:left;margin-top:24px}

@media (prefers-reduced-motion:reduce){.nivel button,.relacionados a{transition:none}}

/* ---------- Explicadores interactivos («Pruébalo tú») ----------
   Los arma aprende-base/explicadores.js; los hace funcionar interactivo.js. */
.explicador{margin:40px 0 0;padding:24px clamp(16px,3vw,28px) 20px;background:var(--paper);border:1px solid var(--line);border-radius:18px}
.doc .explicador h2{margin:0 0 6px}
.doc .explicador h3{font:400 22px/1.2 var(--font-display);letter-spacing:-.015em;color:var(--text);margin:32px 0 6px}
.explicador p{margin:10px 0 0}
.exp-intro{margin-top:4px!important}
.exp-controles{display:grid;gap:18px;margin:20px 0 4px}
.exp-rango{display:grid;gap:6px}
.exp-rango span{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:650;color:var(--text)}
.exp-rango output{font-variant-numeric:tabular-nums;font-weight:800;color:var(--olive-text)}
.exp-rango input{width:100%;margin:0;accent-color:var(--c-valor);cursor:pointer}
.exp-grupo-chips{display:grid;gap:8px}
.exp-k{display:block;margin:0!important;font-size:11px!important;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)!important}
.exp-chips{display:flex;flex-wrap:wrap;gap:8px}
.exp-chips button,.exp-boton{font:600 13px var(--font-sans);color:var(--text);background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;transition:border-color .16s,background .16s,color .16s}
.exp-chips button:hover,.exp-boton:hover{border-color:var(--text)}
.exp-chips button[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-text);border-color:var(--btn-bg)}
.exp-botones{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.exp-boton{background:var(--btn-bg);color:var(--btn-text);border-color:var(--btn-bg);font-size:14px;font-weight:700;padding:10px 18px;border-radius:9px}
.exp-boton.secundario{background:transparent;color:var(--text);border-color:var(--line)}
.exp-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 18px}
.exp-trio div{padding:12px 14px;background:var(--surface-2);border-radius:12px}
.exp-trio dt{font-size:11.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.exp-trio dd{margin:4px 0 0;font:700 clamp(18px,3.4vw,24px)/1.15 var(--font-sans);letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:560px){.exp-trio{grid-template-columns:1fr}.exp-trio div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.exp-trio dd{margin:0}}
.exp-tabla{overflow-x:auto;margin-top:12px;border:1px solid var(--line);border-radius:12px;background:var(--cream)}
.exp-tabla table{width:100%;border-collapse:collapse;font:14px/1.4 var(--font-sans);font-variant-numeric:tabular-nums}
.exp-tabla th,.exp-tabla td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap;color:var(--text-2)}
.exp-tabla th:first-child,.exp-tabla td:first-child{text-align:left}
.exp-tabla thead th{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface-2)}
.exp-tabla tbody tr:last-child td{border-bottom:0}
.exp-tabla td b{color:var(--text)}
.exp-tabla .neg{color:var(--neg)}
.exp-tabla .exp-grupo th{text-align:left;font-size:12.5px;font-weight:750;color:var(--text);background:var(--paper)}
/* Peor caída: lo que queda de cada 100. */
.exp-caida{height:20px;margin:18px 0 0;border-radius:6px;background:repeating-linear-gradient(-45deg,var(--surface-2) 0 6px,transparent 6px 12px);border:1px solid var(--line);overflow:hidden}
.exp-caida-resto{display:block;height:100%;background:var(--c-valor);transition:width .15s}
.exp-caida-queda{font-size:13.5px!important;color:var(--muted)!important;margin-top:6px!important}
.exp-caida-sube{font:400 clamp(20px,3vw,24px)/1.3 var(--font-display)!important;color:var(--text)!important;margin-top:12px!important}
.exp-nota-grande{font-size:15px!important;color:var(--text)!important;margin-top:12px!important}
/* Remuestreo de bloques: la historia, un cuadrito por año. */
.bq-tira{display:grid;grid-template-columns:repeat(auto-fill,minmax(11px,1fr));gap:3px;margin:8px 0 0}
.bq{height:18px;border-radius:3px;opacity:var(--fuerza);transition:transform .15s,box-shadow .15s}
.bq.pos{background:var(--c-valor)}
.bq.neg{background:var(--neg)}
.bq.elegido{opacity:1;transform:scale(1.35);box-shadow:0 0 0 2px var(--text);position:relative;z-index:1}
.exp-estado{min-height:3em;font-size:15px!important;color:var(--text)!important;margin-top:14px!important}
@media (prefers-reduced-motion:reduce){.exp-chips button,.exp-boton,.bq,.exp-caida-resto{transition:none}}
/* Qué es un sat: 10 × 10 cuadritos; el marcado es el que se acerca. */
/* Qué es un sat: un bitcoin partido de a 100, con cada nivel a la vista y una «lupa» al siguiente */
.sat-escalera{list-style:none;margin:18px 0 0;padding:0}
.sat-nivel{margin:0!important}
.sat-fila{display:flex;align-items:flex-end;gap:18px}
.sat-cuadro{flex:none;width:112px;height:112px}
.sat-cuadro rect{fill:var(--c-valor);opacity:.28}
.sat-cuadro rect.marcada{fill:var(--c-valor);opacity:1}
.sat-texto{padding-bottom:2px}
.sat-texto p{margin:0!important}
.sat-que{font-family:var(--font-display)!important;font-size:24px!important;line-height:1.15!important;color:var(--text)!important}
.sat-usd{font-weight:700;color:var(--text)!important;margin-top:2px!important}
.sat-usd span{white-space:nowrap}
.sat-usd span+span::before{content:"· "}
.sat-parte{font-size:14px!important;color:var(--text-2)!important;margin-top:6px!important}
.sat-lupa{display:block;width:112px;height:34px;margin:2px 0}
.sat-lupa path{fill:var(--c-valor);opacity:.22}
.sat-lupa[hidden]{display:none}
.sat-nivel.aparece{animation:sat-entra .5s ease both}
@keyframes sat-entra{from{opacity:0;transform:translateY(-10px) scale(.96);transform-origin:0 0}}
@media (max-width:420px){.sat-cuadro,.sat-lupa{width:100px}.sat-cuadro{height:100px}.sat-fila{gap:14px}.sat-que{font-size:21px!important}}
@media (prefers-reduced-motion:reduce){.sat-nivel.aparece{animation:none}}
.exp-boton:disabled{opacity:.4;cursor:default}
.exp-botones [aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-text);border-color:var(--btn-bg)}

/* ---------- Preguntas, datos y mitos ---------- */
.mini .et.arriba{transform:translate(-50%,-125%);background:transparent}
.pregunta+.pregunta{border-top:1px solid var(--line);margin-top:40px}
.mas-sobre{font-size:14px!important}
.mas-sobre a{color:var(--olive-text);font-weight:650}
.datos-filtro{margin:28px 0 0}
.doc .datos-rejilla,.doc .mitos{max-width:none}
.datos-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:18px}
.dato{display:flex;flex-direction:column;gap:4px;padding:18px;background:var(--paper);border:1px solid var(--line);border-radius:16px}
.doc .dato h2{font:650 15px/1.35 var(--font-sans);letter-spacing:0;color:var(--text);margin:2px 0 0}
.dato p{margin:0!important}
.dato-activo{font-size:11px!important;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:var(--olive-text)!important}
.dato-cifra{font:400 34px/1.1 var(--font-display)!important;letter-spacing:-.03em;color:var(--text)!important;margin:8px 0 2px!important;font-variant-numeric:tabular-nums}
.dato-r{font-size:14px!important;line-height:1.5!important}
.dato a,.mito-dato a{margin-top:auto;padding-top:8px;font-size:13.5px;font-weight:700;color:var(--olive-text);text-decoration:none}
.mitos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:28px}
.mito{display:flex;flex-direction:column;gap:6px;padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:16px}
.mito p{margin:0!important}
.mito-k{font-size:11px!important;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)!important}
.doc .mito h2{font:400 22px/1.2 var(--font-display);letter-spacing:-.015em;color:var(--text);margin:0}
.mito-boton{align-self:flex-start;margin-top:10px;font:600 13px var(--font-sans);color:var(--text);background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer}
.mito-boton:hover{border-color:var(--text)}
.mito-dato{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.mito-dato .mito-k{color:var(--olive-text)!important}
.mito.cerrado .mito-dato{display:none}
.mito:not(.cerrado) .mito-boton{display:none}
.mito:not(.cerrado) h2{text-decoration:line-through;text-decoration-color:var(--neg);text-decoration-thickness:2px}
.mito:not(.cerrado) .mito-dato{animation:mito-entra .35s ease-out}
@keyframes mito-entra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mito:not(.cerrado) .mito-dato{animation:none}}

/* ---------- Ruta «Empieza aquí» ---------- */
.glosario .destacada{margin-bottom:8px}
.ruta-estado:empty{display:none}
.ruta-estado{color:var(--lime)!important;font-weight:700}
/* Índice de la ruta: muestra dónde va la persona al bajar (aprende.js) */
.ruta-indice{position:sticky;top:0;z-index:5;margin:28px 0 0;padding:10px 0 8px;background:var(--cream);border-bottom:1px solid var(--line)}
.ri-donde{margin:0 0 8px!important;font-size:13.5px!important;color:var(--text-2)!important;min-height:1.4em}
.ri-donde b{color:var(--text);margin-right:4px}
.ruta-indice ol{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.ruta-indice li{flex:1;margin:0!important}
.ruta-indice a{display:block;padding:8px 0 2px;color:var(--muted)!important;font-size:12.5px;line-height:1.25;text-decoration:none}
.ruta-indice a::before{content:"";display:block;height:5px;margin-bottom:6px;border-radius:99px;background:var(--line);transition:background .2s}
.ruta-indice a.pasado::before{background:var(--olive)}
.ruta-indice a.actual::before{background:var(--lime)}
.ruta-indice a.actual{color:var(--text)!important;font-weight:700}
.ri-num{display:none}
@media (max-width:640px){.ruta-indice a .ri-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.ruta-indice a{padding:6px 0}.ruta-indice a::before{margin-bottom:0}}
@media (prefers-reduced-motion:reduce){.ruta-indice a::before{transition:none}}
.paso{scroll-margin-top:110px;margin-top:56px}
.paso>.kicker{margin:0}
.doc .paso>h2{margin-top:6px}
.paso .exp-extra{display:none}
.quiz{margin:28px 0 0;padding:20px;border:1px solid var(--olive);border-radius:16px;background:var(--paper)}
.quiz legend{float:left;width:100%;padding:0;font:650 16px/1.4 var(--font-sans);color:var(--text)}
.quiz legend+*{clear:both}
.quiz-k{display:block;font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:var(--olive-text)}
.quiz-opciones{display:grid;gap:8px;padding-top:12px}
.quiz-opciones button{text-align:left;font:500 15px/1.4 var(--font-sans);color:var(--text);background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:11px 14px;cursor:pointer}
.quiz-opciones button:hover{border-color:var(--text)}
.quiz-opciones button.correcta{border-color:var(--olive);background:var(--surface-2);font-weight:700}
.quiz-opciones button.correcta::after{content:"  ✓";color:var(--olive-text)}
.quiz-opciones button.incorrecta{border-color:var(--neg);color:var(--neg)}
.quiz-r{margin:14px 0 0!important}
.quiz-veredicto{color:var(--text)}
.quiz-sigue{margin:12px 0 0!important;font-weight:650}
.ruta-fin{margin-top:56px;padding:24px;border-radius:18px;background:var(--surface-2)}
.doc .ruta-fin h2{margin-top:0}
.ruta-profundo{font-size:14px!important;color:var(--text-2)!important}

/* Las grandes caídas de bitcoin, una al lado de la otra (paso 3 de la ruta) */
.ruta-caidas{margin-top:28px}
.doc .ruta-caidas h3{margin:0 0 6px}
.rc-lista{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:640px){.rc-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rc{margin:0!important;padding:12px 12px 10px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.rc p{margin:0!important}
.rc-anios{font-size:12.5px!important;font-weight:750;color:var(--muted)!important}
.rc-caida{font-family:var(--font-display)!important;font-size:28px!important;line-height:1.1!important;color:var(--neg)!important;margin-top:2px!important}
.rc-dibujo{display:block;width:100%;height:64px;margin:8px 0 6px;overflow:visible}
.rc-tope{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.rc-area{fill:var(--neg);fill-opacity:.2}
.rc-linea{fill:none;stroke:var(--neg);stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rc-vuelta{font-size:13px!important;color:var(--text)!important;font-weight:600}
.rc.abierta{border-style:dashed}
.rc.abierta .rc-vuelta{color:var(--text-2)!important}

/* Los dos caminos: lo que se ve recién al elegir */
.mini-extremos{font-size:12.5px!important;color:var(--text-2)!important;margin-top:6px!important}
.riesgo-revela>*:first-child{margin-top:16px!important}

/* Comprar de a poco, año por año */
.exp-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 0}
.exp-duo div{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.exp-duo dt{font-size:12.5px;font-weight:700;color:var(--text-2)}
.exp-duo dd{margin:4px 0 0;font:700 clamp(20px,3.4vw,24px)/1.15 var(--font-sans);color:var(--text);font-variant-numeric:tabular-nums}
.exp-duo[data-gana="una"] [data-lado="una"],.exp-duo[data-gana="poco"] [data-lado="poco"]{border-color:var(--olive);box-shadow:inset 0 0 0 1px var(--olive)}
.explicador .exp-grupo-chips+.mini-titulo,.explicador [data-salida="lectura"]+.mini-titulo{margin-top:20px!important}
.explicador .exp-intro+.exp-grupo-chips{margin-top:14px}

/* Lo que aprendiste */
.ruta-resumen{margin:12px 0 0;padding-left:1.3em}
.ruta-resumen li{margin:8px 0!important}
.doc .ruta-fin h3{margin:26px 0 6px}

/* Los ciclos de bitcoin, uno a la vez (explicador del halving y paso 5 de la ruta) */
.ciclos{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.ciclo{margin:0!important;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.ciclo p{margin:0!important}
.ciclo-n{font-size:12.5px!important;font-weight:750;letter-spacing:.02em;color:var(--muted)!important}
.ciclo-valor{font-family:var(--font-display)!important;font-size:30px!important;line-height:1.15!important;letter-spacing:-.02em;color:var(--text)!important;margin-top:4px!important}
.ciclo-barra{display:block;height:8px;margin:8px 0;border-radius:99px;background:var(--olive);width:var(--ancho)}
.ciclo-x{font-weight:650;color:var(--text)!important;font-size:15px!important}
.ciclo-despues{color:var(--neg)!important;font-size:14px!important;font-weight:600}
.ciclo.aparece{animation:ciclo-entra .45s ease both}
.ciclo.aparece .ciclo-barra{animation:ciclo-barra .8s ease .1s both}
@keyframes ciclo-entra{from{opacity:0;transform:translateY(8px)}}
@keyframes ciclo-barra{from{width:0}}
@media (prefers-reduced-motion:reduce){.ciclo.aparece,.ciclo.aparece .ciclo-barra{animation:none}}

/* ---------- Logros: los términos ya desbloqueados ---------- */
.logros-resumen{max-width:560px;margin:18px auto 0;padding:10px 14px;border-radius:12px;background:var(--surface-2);color:var(--text-2);font-size:14px}
.tarjeta.logrado .icono{position:relative}
.tarjeta.logrado .icono::after{content:"✓";position:absolute;right:-6px;bottom:-6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--olive);color:var(--paper);font:800 12px/1 var(--font-sans)}