/* HyperForge by Riverstar · UI local. Los colores, fuentes, radios y movimiento salen de tokens.css (diseño v2, 12-nov-2026).
   Aquí solo se traducen los nombres viejos (RDS 1.0 y los de W1) a los tokens nuevos, para que ninguna pantalla se rompa:
   las pantallas nuevas usan --hf-* directamente. Fuentes locales: OFL (fuentes/OFL-*.txt) e ITF FFL (fuentes/itf-ffl-*.txt). */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/anton-latin-400-normal.woff2) format("woff2")}

:root{
  /* Roles RDS 1.0 → tokens v2 (los usan firma.css, las vistas viejas y la capa visual) */
  --rds-bg:var(--hf-fondo); --rds-sidebar:var(--hf-panel); --rds-surface:var(--hf-panel); --rds-surface2:var(--hf-panel-2);
  --rds-input:var(--hf-panel); --rds-line:var(--hf-linea); --rds-line-strong:var(--hf-linea-fuerte); --rds-text:var(--hf-texto);
  --rds-muted:var(--hf-tenue); --rds-bright:var(--hf-brasa-texto); --rds-action:var(--hf-brasa); --rds-action-hover:var(--hf-brasa);
  --rds-on-action:var(--hf-sobre-brasa); --rds-focus:var(--hf-foco); --rds-good:var(--hf-verdin-texto); --rds-warn:var(--hf-brasa-texto);
  --rds-danger:var(--hf-alerta-texto); --rds-on-warn:var(--hf-sobre-brasa); --rds-on-danger:var(--hf-sobre-alerta);
  --rds-paper:var(--hf-panel); --rds-paper-text:var(--hf-texto); --rds-paper-muted:var(--hf-tenue); --rds-paper-line:var(--hf-linea);
  --rds-scrim:var(--hf-velo); --rds-radius-card:var(--hf-r-grande); --rds-radius-control:var(--hf-r-control);
  /* Nombres que ya usan armazon.css, firma.css y las vistas → rol (no se renombran; solo cambia lo que significan).
     «oro» era la falla esperando reparación: ahora es la brasa de atención; el rojo queda solo para alertas (--danger). */
  --obsidiana:var(--rds-bg); --tinta:var(--rds-surface); --ceniza:var(--rds-line); --marmol:var(--rds-text);
  --veta:var(--rds-muted); --luz:var(--rds-text); --steel:var(--rds-muted); --tinta-hover:var(--rds-surface2);
  --navy:var(--rds-action); --navy-alto:var(--rds-action); --navy-texto:var(--rds-bright); --oro:var(--rds-warn);
  --danger:var(--rds-danger); --bueno:var(--rds-good);
  --borde-control:var(--rds-line-strong);
  --gris-hoja:var(--rds-paper-muted); --steel-hoja:var(--rds-paper-muted); --hairline-hoja:var(--rds-paper-line);
  --f-texto:var(--hf-f-texto); --f-mono:var(--hf-f-mono); --f-cifra:var(--hf-f-display);
  --s1:var(--hf-e1); --s2:var(--hf-e2); --s3:var(--hf-e3); --s4:var(--hf-e4); --s5:var(--hf-e5); --s6:var(--hf-e6); --s7:var(--hf-e7); --s8:var(--hf-e8);
  --r-sup:12px; --r-hoja:var(--hf-r-tarjeta); --r-pill:var(--hf-r-pildora); --dur:var(--hf-dur);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--obsidiana);color:var(--marmol);font-family:var(--f-texto);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}
:focus-visible{outline:2px solid var(--rds-focus);outline-offset:3px;border-radius:var(--r-sup)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.carga{opacity:1!important}}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.saltar{position:absolute;left:var(--s4);top:-60px;background:var(--marmol);color:var(--obsidiana);padding:var(--s2) var(--s4);
  border-radius:var(--r-pill);z-index:100;text-decoration:none;font-weight:500}
.saltar:focus{top:var(--s3)}

/* ───────── barra superior ───────── */
.barra{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);padding:var(--s3) var(--s5);
  border-bottom:1px solid var(--ceniza);background:var(--obsidiana)}
.marca{display:flex;align-items:center;gap:10px;font-weight:500;font-size:16px;text-decoration:none}
.marca img{width:30px;height:13px}
.navegacion ul{display:flex;flex-wrap:wrap;gap:var(--s1);list-style:none}
.navegacion a{display:inline-block;text-decoration:none;color:var(--veta);padding:6px 12px;border-radius:var(--r-pill)}
.navegacion a:hover{color:var(--marmol);background:var(--tinta)}
.navegacion a[aria-current="page"]{color:var(--marmol);background:var(--tinta);box-shadow:inset 0 0 0 1px var(--ceniza)}
.barra .der{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.etiqueta{border:1px solid var(--borde-control);color:var(--veta);border-radius:var(--r-pill);padding:3px 10px}
.etiqueta.discontinua{border-style:dashed}

/* ───────── página ───────── */
main{max-width:1240px;margin:0 auto;padding:var(--s7) var(--s5) var(--s8)}
.kicker{color:var(--veta);display:block;margin-bottom:var(--s2)}
h1{font-weight:500;letter-spacing:-.02em;line-height:1.15;font-size:clamp(26px,1.2rem + 1.2vw,34px);overflow-wrap:anywhere}
h2{font-size:13px;font-family:var(--f-mono);letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--veta)}
.bajada{color:var(--veta);margin-top:var(--s2);max-width:70ch}
.dos,#contenido > .bajada:first-child{margin-top:var(--s5)}
.estado-carga{color:var(--veta);margin-top:var(--s5)}
.aviso-error{margin-top:var(--s6);border:1px solid var(--oro);border-radius:var(--r-hoja);padding:var(--s5);max-width:70ch}
.aviso-error h2{color:var(--oro);margin-bottom:var(--s2)}
.aviso{max-width:60ch;margin:var(--s8) auto;padding:0 var(--s5)}
.aviso p{color:var(--veta);margin-top:var(--s3)}
.vacio{color:var(--veta);padding:var(--s5) 0;border-top:1px solid var(--ceniza)}

/* insignias (Higgsfield 06 · Remote 01): estado en una frase, nunca solo color */
.insignia{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--marmol);border-radius:var(--r-pill);
  padding:5px 14px 5px 10px;font-weight:500;font-size:14px;margin-bottom:var(--s4)}
.insignia .anillo{width:12px;height:12px;border-radius:50%;border:2px solid var(--marmol);flex:none}
.insignia.hecho{border-color:var(--bueno);color:var(--bueno)}
.insignia.hecho .anillo{background:var(--bueno);border-color:var(--bueno)}
.insignia.alerta{border-color:var(--oro);color:var(--oro)}
.insignia.alerta .anillo{border-color:var(--oro);border-radius:2px;transform:rotate(45deg);width:10px;height:10px}

/* ───────── bandeja (Linear 11 · Vapi 12) ───────── */
.grupo{margin-top:var(--s7)}
.grupo > h2{display:flex;gap:var(--s3);align-items:baseline;padding-bottom:var(--s3)}
.grupo > h2 .cuenta{color:var(--marmol)}
.filas{list-style:none;border-top:1px solid var(--ceniza)}
.fila{border-bottom:1px solid var(--ceniza)}
.fila a{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:2px var(--s4);align-items:start;
  padding:var(--s3) var(--s3) var(--s3) var(--s2);text-decoration:none;border-radius:var(--r-sup)}
.fila a:hover{background:var(--tinta-hover)}
.fila .glifo{margin-top:4px}
.fila .titulo{font-weight:500;overflow-wrap:anywhere}
.fila .motivo{grid-column:2;color:var(--veta);overflow-wrap:anywhere}
.fila .meta{grid-column:2;color:var(--veta);font-size:13px}
.fila .evaluacion{grid-row:1;grid-column:3;white-space:nowrap;display:flex;align-items:center;gap:6px}
.evaluacion.abierto{color:var(--marmol)}
.evaluacion.verificado{color:var(--bueno)}
.glifo-anillo{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--marmol)}
.glifo-paso{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--bueno);
  color:var(--bueno);font-size:11px;line-height:1}

/* ───────── bitácora (Railway 07 · Discord 08 · Better Stack 09 · Revolut 10) ───────── */
.linea{list-style:none;margin-top:var(--s6);border-left:2px solid var(--ceniza);margin-left:6px}
.evento{position:relative;padding-left:var(--s5)}
.evento::before{content:"";position:absolute;left:-7px;top:18px;width:12px;height:12px;border-radius:50%;
  background:var(--obsidiana);border:2px solid var(--navy-alto)}
.evento.persona::before{background:var(--marmol);border-color:var(--marmol)}
.evento details{border-bottom:1px solid var(--ceniza)}
.evento summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s4);padding:var(--s3) var(--s2);
  cursor:pointer;list-style:none;border-radius:var(--r-sup)}
.evento summary::-webkit-details-marker{display:none}
.evento summary:hover{background:var(--tinta-hover)}
.evento .frase{font-weight:500;overflow-wrap:anywhere}
.evento .quien{color:var(--veta);grid-column:1;font-size:14px}
.evento .cuando{color:var(--veta);grid-row:1;grid-column:2;font-size:13px;white-space:nowrap}
.evento .abre{grid-column:2;color:var(--navy-texto);font-size:13px;text-align:right}
.evento details[open] .abre::after{content:" (ocultar)"}
.detalle{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:var(--s1) var(--s4);
  padding:var(--s2) var(--s2) var(--s4);font-size:14px}
.detalle dt{color:var(--veta)}
.detalle dd{overflow-wrap:anywhere;white-space:pre-wrap}
.paginas{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s6)}
.paginas a{text-decoration:none;border:1px solid var(--borde-control);border-radius:var(--r-pill);padding:6px 16px}
.paginas a:hover{background:var(--tinta-hover)}
.paginas span{color:var(--veta)}

/* ───────── ticket y recibo: decisión a la izquierda, hoja a la derecha ───────── */
.dos{display:grid;grid-template-columns:minmax(0,43fr) minmax(0,57fr);gap:var(--s7);align-items:start}
@media (max-width:960px){.dos{grid-template-columns:minmax(0,1fr)}}
.panel > * + *{margin-top:var(--s5)}
.bloque{border-top:1px solid var(--ceniza);padding-top:var(--s4)}
.bloque h2{margin-bottom:var(--s3)}
.texto-largo{white-space:pre-wrap;overflow-wrap:anywhere}
.hoja{background:var(--rds-paper);color:var(--rds-paper-text);border:1px solid var(--rds-paper-line);border-radius:var(--r-hoja);padding:var(--s6) var(--s6) var(--s5)}
.hoja h2{color:var(--gris-hoja)}
.hoja .seccion + .seccion{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--hairline-hoja)}
.hoja .nota{color:var(--gris-hoja);font-size:13px;margin-top:var(--s2)}
.hoja pre,.hoja .texto-largo{font-family:var(--f-mono);font-size:13px;line-height:1.55;margin-top:var(--s2)}
@media (max-width:560px){.hoja{padding:var(--s4)}}

.opciones{display:flex;flex-wrap:wrap;gap:var(--s3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 22px;
  border-radius:var(--r-pill);font-weight:500;font-size:15px}
.btn-primario{background:var(--rds-action);color:var(--rds-on-action)}
.btn-secundario{border:1px solid var(--borde-control);color:var(--marmol)}
.btn-google{border:1px solid var(--borde-control);color:var(--marmol);gap:.55rem}
.g-marca{display:inline-grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--rds-action);color:var(--rds-on-action);font-weight:700;font-size:.8rem}
/* 26-oct · checkout simulado */
.checkout fieldset[hidden],.checkout [hidden]{display:none}
.checkout .precio{display:block;color:var(--gris-hoja);font-size:13px}
.checkout .fila-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--s2)}
.checkout .aviso-ventas:empty{display:none}
.tabla.resumen td.num,.tabla.resumen tr.total td{text-align:right;font-variant-numeric:tabular-nums}
.tabla.resumen tr.total th,.tabla.resumen tr.total td{font-weight:700;border-top:1px solid var(--borde-control)}
.btn[disabled]{cursor:not-allowed;opacity:1;background:transparent;color:var(--veta);border:1px dashed var(--borde-control)}
.nota-firma{color:var(--veta);font-size:14px}

.verif{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 10px;padding:var(--s3) 0;border-top:1px solid var(--ceniza)}
.verif:first-child{border-top:0}
.verif .crit{font-weight:500;overflow-wrap:anywhere}
.verif .estado{color:var(--bueno);margin-left:8px;white-space:nowrap}
.verif .porque{grid-column:2;color:var(--veta);overflow-wrap:anywhere}
.verif .cita{grid-column:2;font-family:var(--f-mono);font-size:13px;color:var(--veta);overflow-wrap:anywhere;white-space:pre-wrap}
.flujo{list-style:none;display:grid;gap:var(--s2)}
.flujo li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.voz-ia{width:10px;height:10px;border-radius:50%;background:var(--rds-bright);flex:none}
.voz-regla{width:10px;height:10px;background:var(--veta);transform:rotate(45deg);flex:none}
.voz-persona{width:10px;height:10px;border-radius:50%;border:2px solid var(--marmol);flex:none}
.analista{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--borde-control);
  color:var(--veta);border-radius:var(--r-pill);padding:1px 8px}
.cifras{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s7)}
.cifra b{display:block;font-family:var(--f-cifra);font-weight:400;font-size:34px;line-height:1.1;letter-spacing:.01em}
.cifra span{color:var(--veta);font-size:13px}
.falla{color:var(--oro)}
.integridad{color:var(--veta)}
.integridad strong{color:var(--marmol);font-weight:500}
details.markdown summary{cursor:pointer;color:var(--navy-texto)}
details.markdown pre{margin-top:var(--s3);white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--f-mono);font-size:13px;
  color:var(--veta);background:var(--tinta);padding:var(--s4);border-radius:var(--r-hoja)}

/* ───────── Identidad v2 (prototipo app-v5, 12-nov): Clash en mayúsculas para titulares, Geist Mono para etiquetas,
   brasa = acción y atención, verdín = verificado. Botón principal: píldora de brasa; secundario: píldora punteada. ───────── */
:root{
  --brasa:var(--hf-brasa); --brasa-texto:var(--hf-brasa-texto); --rojo-riverstar:var(--hf-alerta);
  --facil:var(--hf-facil);
}

/* titulares y etiquetas */
h1{font-family:var(--hf-f-display);font-weight:700;text-transform:uppercase;letter-spacing:-.012em;line-height:.95;word-spacing:var(--hf-ws-display);
  font-size:var(--hf-t-titulo);text-wrap:balance}
h2,h3{text-wrap:balance}
.kicker,.mono.kicker{color:var(--hf-tenue);letter-spacing:.16em;font-weight:400;font-size:var(--hf-t-xs)}
.entrada-app h1{font-size:clamp(34px,1.6rem + 2vw,54px)}
.lienzo main,.cabecera{position:relative}

/* botones: píldoras. Principal en brasa; secundario con borde punteado que se vuelve sólido al pasar */
.btn:not([disabled]){border-radius:var(--hf-r-pildora);font-family:var(--hf-f-display);font-weight:600;font-size:15px;word-spacing:var(--hf-ws-display);
  letter-spacing:0;text-transform:none;cursor:pointer;
  transition:transform var(--hf-dur-rapida) var(--hf-facil),border-color var(--hf-dur) var(--hf-facil),background-color var(--hf-dur)}
.btn-primario:not([disabled]){background:var(--hf-brasa);color:var(--hf-sobre-brasa);border:0}
.btn-secundario:not([disabled]),.btn-google:not([disabled]){background:transparent;color:var(--hf-texto);border:2px dotted var(--hf-linea-2)}
.btn:not([disabled]):hover{transform:translateY(-2px)}
.btn-secundario:not([disabled]):hover,.btn-google:not([disabled]):hover{border-color:var(--hf-texto)}
.btn:not([disabled]):active{transform:scale(.97)}
.btn[disabled]{border-radius:var(--hf-r-pildora);font-family:var(--hf-f-display);font-size:15px}
.paginas a,.segmentos a,.etiqueta,.rol-pill,.analista{font-family:var(--f-mono);letter-spacing:.06em}
.btn:not([disabled]):focus-visible{outline:2px solid var(--rds-focus);outline-offset:3px}

/* HyperForge se calienta en brasa: contador de atención */
.insignia{border-radius:var(--hf-r-pildora)}
@media (prefers-reduced-motion:reduce){.btn:not([disabled]){transition:none}.btn:not([disabled]):hover{transform:none}}
/* ───────── Logos y motion ─────────
   Logos oficiales de riverstar-marca (marca-completa.svg, wordmark.svg) como mascara: toman el color del texto y siguen al tema.
   Motion: solo transform y opacity; con prefers-reduced-motion la regla global de arriba lo apaga y el motor dibuja el logo quieto. */
.riverstar-completo,.riverstar-palabra{display:block;background:currentColor;-webkit-mask:var(--logo) center / contain no-repeat;
  mask:var(--logo) center / contain no-repeat}
.riverstar-completo{--logo:url(riverstar-completo.svg);width:132px;height:70px;color:var(--marmol)}
.riverstar-palabra{--logo:url(riverstar-wordmark.svg);width:104px;height:14px;color:var(--veta);margin:0 var(--s2) var(--s4);
  transition:transform .4s var(--facil)}
.riverstar-palabra:hover{color:var(--marmol);transform:translateX(3px)}
.sello-bloque{margin-bottom:var(--s6)}
.logo-forja{display:block;width:180px;height:180px;margin:0 0 var(--s2) -18px;border-radius:var(--r-hoja);background:var(--carga-fondo,transparent)}
.por-riverstar{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--veta);margin:0 0 var(--s2)}

/* carga: el logo de HyperForge trabajando mientras llegan los datos; aparece tras 250 ms para no parpadear si es instantaneo */
.carga{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s5);opacity:0;animation:aparece .4s .25s var(--facil) forwards}
.carga:has(#estado.sr){display:none}
.carga-logo{width:96px;height:96px;flex:none;border-radius:var(--r-hoja);background:var(--carga-fondo,transparent)}
.carga .estado-carga{margin:0}
:root{--carga-fondo:var(--hf-carbon)}   /* el logo animado de la forja se dibuja sobre carbón en ambos temas */

@keyframes aparece{from{opacity:0}to{opacity:1}}
@keyframes entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes entra-lado{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.5)}70%{transform:scale(1.15)}100%{opacity:1;transform:none}}
@keyframes anillo-pulso{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}

/* entrada de cada vista: titulares y bloques suben en cascada */
.kicker,h1{animation:entra .55s var(--facil) both}
h1{animation-delay:.05s}
#contenido > *{animation:entra .6s var(--facil) both;animation-delay:.12s}
#contenido > *:nth-child(2){animation-delay:.19s}
#contenido > *:nth-child(3){animation-delay:.26s}
#contenido > *:nth-child(4){animation-delay:.33s}
#contenido > *:nth-child(n+5){animation-delay:.4s}

/* microinteracciones: riel, filas, chips y marca */
.decisiones a,.fila a{position:relative}
.decisiones a::before,.fila a::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--brasa-texto);
  transform:scaleY(0);transition:transform .35s var(--facil)}
.decisiones a:hover::before,.fila a:hover::before,.decisiones a:focus-visible::before,.fila a:focus-visible::before{transform:scaleY(1)}
.decisiones .titulo,.fila .titulo{transition:transform .35s var(--facil)}
.decisiones a:hover .titulo,.fila a:hover .titulo{transform:translateX(4px)}
.etiqueta,.rol-pill,.analista,.paginas a,.segmentos a{transition:transform .3s var(--facil)}
.paginas a:hover,.segmentos a:hover,button.etiqueta:hover{transform:translateY(-1px)}
.personas a:hover .avatar,.personas .persona-boton:hover .avatar{transform:scale(1.08)}
.avatar{transition:transform .35s var(--facil)}

/* estados pendientes: el anillo late (un aro que se expande) */
.insignia{position:relative}
.insignia:not(.hecho):not(.neutra):not(.alerta) .anillo{position:relative}
.insignia:not(.hecho):not(.neutra):not(.alerta) .anillo::after{content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--marmol);animation:anillo-pulso 2.2s var(--facil) infinite}

/* ───────── Mas puntos: lineas, titulares, carga y primera entrada (revision de diseno 22-oct) ───────── */
/* hairlines de punto en lugar de raya (cada regla toca solo el lado que ya tiene borde) */
.decisiones,.filas,.bloque,.proceso,.conexion,.pasos-onb > li,.pasos-entrada,.personas,.verif,.opcion,.hoja .seccion + .seccion,
.riel .pie,.vacio{border-top-style:dotted}
.decisiones > li,.fila,.personas li,.pasos-entrada li,.evento details,.tabla th,.tabla td{border-bottom-style:dotted}
.franja{border-top-style:dotted;border-bottom-style:dotted}
.linea,.historial{border-left-style:dotted}

/* acceso y persona: marca a la izquierda, formulario visible sin bajar */
html body[data-vista="acceso"] .lienzo main,html body[data-vista="persona"] .lienzo main{max-width:1000px}
@media (min-width:900px){
  .entrada-app{max-width:none;display:grid;grid-template-columns:230px minmax(0,640px);gap:0 var(--s7);align-items:start}
  .entrada-app > *{grid-column:2}
  .entrada-app > .sello-bloque{grid-column:1;grid-row:1 / span 8;margin-bottom:0;position:sticky;top:var(--s6)}
  .logo-forja{width:210px;height:210px;margin-left:-22px}
}
.sello-bloque .riverstar-completo{width:150px;height:79px;margin-left:var(--s2)}

/* una firma lograda no se pinta como advertencia */
.firmar-sello[data-estado="firmada"]{border-color:var(--bueno)}
.firmar-sello[data-estado="firmada"] h2{color:var(--bueno)}
.firmar-sello[data-estado="rechazada_por_la_persona"]{border-color:var(--borde-control)}

/* carga: tres puntos que se encienden en turno junto al logo (el mismo gesto de los medios tonos) */
.carga-puntos{display:inline-flex;gap:7px;margin-left:var(--s2)}
.carga-puntos i{width:7px;height:7px;border-radius:50%;background:var(--brasa-texto);opacity:.25;animation:punto-turno 1.2s var(--facil) infinite}
.carga-puntos i:nth-child(2){animation-delay:.18s}.carga-puntos i:nth-child(3){animation-delay:.36s}
@keyframes punto-turno{0%,60%,100%{opacity:.25;transform:scale(.8)}30%{opacity:1;transform:scale(1.25)}}

#contenido{margin-top:var(--s4)}
.entrada-app > .bajada{margin-bottom:var(--s5)}

/* enlaces sobre la hoja: la brasa de texto del tema (AA en ambos) */
.hoja a,.hoja summary,.hoja .enlace,.hoja details.markdown summary{color:var(--hf-brasa-texto)}