/* Estilos de MECANISMOS V3: portada, fichas e animacións. */
*,*::before,*::after{box-sizing:border-box}
:root{
  color-scheme:light;
  --r:6px;
  --visor:clamp(340px,54vh,470px);
  --paper:#F4F2F0; --panel:#EBE8E4; --stage:#FCFBFA;
  --visor-bg:#FCFBFA;   /* fondo do visor das animacions: claro nos dous temas */
  --ink:#1B1917; --ink-2:#55504B; --ink-3:#8B847D;
  --rule:#D6D1CB; --accent:#C1272D; --accent-soft:#F4DEDB;
  --steel:#2E6F8E; --steel-soft:#DEE9F0;
  --ff-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --ff-body:"Source Serif 4",Georgia,serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --paper:#1A1918; --panel:#232120; --stage:#201E1D; --visor-bg:#EFEDEA;
  --ink:#EDE9E5; --ink-2:#AFA9A2; --ink-3:#847D76;
  --rule:#36332F; --accent:#E4635C; --accent-soft:#3A2422;
  --steel:#6BAFD0; --steel-soft:#1D2C36;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#1A1918; --panel:#232120; --stage:#201E1D; --visor-bg:#EFEDEA;
  --ink:#EDE9E5; --ink-2:#AFA9A2; --ink-3:#847D76;
  --rule:#36332F; --accent:#E4635C; --accent-soft:#3A2422;
  --steel:#6BAFD0; --steel-soft:#1D2C36;
}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-body);font-size:16px;line-height:1.6}
.wrap{max-width:1000px;margin-inline:auto;padding:clamp(1.5rem,4vw,2.5rem) clamp(1rem,4vw,2rem) 3rem}
.eyebrow{font-family:var(--ff-mono);font-size:.68rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink-3);margin:0}
h1{font-family:var(--ff-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(2rem,5vw,3rem);margin:.3rem 0 .5rem;line-height:1.1}
h1 span{color:var(--accent)}
.deck{color:var(--ink-2);max-width:56ch;margin:0 0 1.8rem;font-size:1.02rem}

.demo{border:1px solid var(--rule);background:var(--panel);border-radius:var(--r);overflow:hidden}
.demo__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:.3rem 1rem;padding:.6rem .9rem;border-bottom:1px solid var(--rule)}
.ref{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.demo__body{display:grid;grid-template-columns:minmax(0,1fr) 296px;align-items:stretch}   /* sen alto fixo: o alto sae do panel, e o visor acompaña */
@media (max-width:820px){.demo__body{grid-template-columns:1fr;grid-template-rows:auto auto}
  .panel{border-left:0!important;border-top:1px solid var(--rule);height:auto;overflow:visible}}
.stagewrap{background:var(--visor-bg);position:relative;min-width:0;display:grid;align-content:center}
  /* o alto sae do viewBox do debuxo; se o panel deixa visor de sobra, o debuxo queda centrado nel */
@media (prefers-reduced-motion:reduce){.stagewrap{transition:none}}
.stagewrap svg{display:block;width:100%;height:auto;touch-action:none}
.foto{position:absolute;inset:0;display:none;place-items:center;background:var(--visor-bg);padding:4%}
.foto.on{display:grid}
.foto figure{margin:0;text-align:center;max-height:100%}
.foto img{max-width:100%;max-height:calc(var(--visor) - 4rem);border:1px solid var(--rule)}
.foto figcaption{font-family:var(--ff-mono);font-size:.68rem;color:#55504b;margin-top:.5rem}

.panel{border-left:1px solid var(--rule);padding:.85rem;display:flex;flex-direction:column;
  gap:.68rem}   /* sen alto fixo nin scroll interno */
@media (prefers-reduced-motion:reduce){.panel{transition:none}}
.panel > *{flex:none}
.nav{display:flex;gap:.4rem;align-items:center}
.nav button{flex:1;appearance:none;cursor:pointer;border:1px solid var(--rule);background:var(--stage);
  color:var(--ink);font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.07em;
  text-transform:uppercase;padding:.45rem .3rem}
.nav button:disabled{opacity:.35;cursor:default}
.nav .cnt{font-family:var(--ff-mono);font-size:.68rem;color:var(--ink-3);min-width:3.2em;text-align:center}
.step{border-left:3px solid var(--accent);padding-left:.7rem;min-height:6.6em}
.step h2{font-family:var(--ff-display);font-size:1rem;margin:0 0 .25rem;letter-spacing:-.01em}
.step p{margin:0;font-size:.89rem;color:var(--ink-2);line-height:1.5}

.ctrl{display:grid;gap:.2rem}
.ctrl.off{opacity:.4}
.ctrl__top{display:flex;justify-content:space-between;align-items:baseline}
.ctrl__label{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.ctrl__val{font-family:var(--ff-mono);font-size:.77rem;font-weight:600;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;margin:0;cursor:pointer}
input[type=range]:disabled{cursor:default}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--rule)}
input[type=range]::-moz-range-track{height:3px;background:var(--rule)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;
  margin-top:-5px;background:var(--accent);border:0;border-radius:50%}
input[type=range]::-moz-range-thumb{width:13px;height:13px;background:var(--accent);border:0;border-radius:50%}
.transport{display:flex;gap:.4rem}
.btn{appearance:none;cursor:pointer;border:1px solid var(--rule);background:var(--stage);color:var(--ink);
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:.45rem .7rem}
.btn--play{flex:1;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.readout{margin:0;display:grid;grid-template-columns:1fr auto;gap:.28rem .7rem;align-items:baseline;
  border-top:1px solid var(--rule);padding-top:.7rem}
.readout dt{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
/* dentro dun dt, o que sexa fórmula vai tal cal: en maiúsculas "R · r" lería "R · R" */
.readout dt .fx{text-transform:none;letter-spacing:0}
.readout dd{margin:0;font-family:var(--ff-mono);font-size:.79rem;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--steel)}
.readout dd.hi{color:var(--accent)}
.hint{font-family:var(--ff-mono);font-size:.63rem;line-height:1.5;color:var(--ink-3);margin:0}

svg text{font-family:var(--ff-mono);font-size:11px;fill:#55504b}
svg .lbl{font-size:12.5px;fill:#1b1917}
svg .cota{stroke:#c1272d;fill:none;stroke-width:1.2}
svg .cotaL{stroke:#2e6f8e;fill:none;stroke-width:1.2}
svg .guia{stroke:#2e6f8e;fill:none;stroke-width:.8;stroke-dasharray:3 3;opacity:.75}
svg .circR{stroke:#c1272d;fill:none;stroke-width:.8;stroke-dasharray:3 3;opacity:.5}
svg .leader{stroke:#8b847d;fill:none;stroke-width:.9}
svg .tR{fill:#c1272d;font-weight:600;font-size:12.5px}
svg .tL{fill:#2e6f8e;font-weight:600;font-size:12.5px}
/* textos fixos do escenario da panca. Teñen que ir por clase: a regra "svg text" de arriba
   gaña sobre os atributos font-size/fill que poña o JavaScript. */
svg .lei{font-size:17.5px;fill:#1b1917}          /* a lei F · d = R · r, no recadro */
svg .lenda{font-size:13.5px;font-weight:600}     /* d = brazo de forza / r = brazo resistente */
svg .titulo{font-size:16px;fill:#1b1917;font-weight:600}   /* o grao da panca, ao pé: fai de título */
svg .hit{fill:transparent;cursor:grab}
svg .fade{transition:opacity .35s ease}
@media (prefers-reduced-motion:reduce){svg .fade{transition:none}}
.concl{fill:#dee9f0;stroke:#2e6f8e;stroke-width:1}
#mec{opacity:1}
#mec.esvae{opacity:0;transition:opacity 3.4s ease-in}
@media (prefers-reduced-motion:reduce){#mec.esvae{transition:none}}

.notas{margin-top:2rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.nota{border-top:2px solid var(--rule);padding-top:.7rem}
.nota h3{font-family:var(--ff-display);font-size:.9rem;margin:0 0 .3rem}
.nota p{margin:0;font-size:.88rem;color:var(--ink-2)}
.nota b{color:var(--ink)}

/* ---- gráfica de desprazamento (cores fixas: o lenzo é claro nos dous temas) ---- */
svg .t-sm{font-size:10px;fill:#8b847d}
svg .t-xs{font-size:8.5px;fill:#8b847d}
svg .gbox{fill:#ffffff;stroke:#d6d1cb;stroke-width:1}
svg .gaxis{stroke:#8b847d;fill:none;stroke-width:1}
svg .ggrid{stroke:#e4e0db;fill:none;stroke-width:.7}
svg .gcurva{fill:none;stroke:#2e6f8e;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
svg .gfantasma{fill:none;stroke:#2e6f8e;stroke-width:1.4;stroke-dasharray:1.6 3;opacity:.38}
svg .gforte{stroke:#cfc9c2}
svg .gmark{stroke:#c1272d;fill:none;stroke-width:1.1}
svg .gtie{stroke:#c1272d;fill:none;stroke-width:.9;stroke-dasharray:3 3;opacity:.8}
svg .gdot{fill:#c1272d;stroke:#ffffff;stroke-width:1.4}
svg .arbore{fill:#c3b2dd;stroke:#7e6fa0;stroke-width:1.2}

/* ---------- V3: armazón do sitio ---------- */
:root{--lin:#2A9A3E;--lin-soft:#E4F4E6;--cir:#0A6FBF;--cir-soft:#DCECFA;--tra:#C1272D;--tra-soft:#F4DEDB;
  --ff-body:"Poppins","Segoe UI",Arial,sans-serif;
  --r:6px;
  --lift:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background-color .2s ease}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --lin:#6DCF6A;--lin-soft:#1C2E1C;--cir:#5CB6E8;--cir-soft:#163044;--tra:#E4635C;--tra-soft:#3A2422}}
:root[data-theme="dark"]{--lin:#6DCF6A;--lin-soft:#1C2E1C;--cir:#5CB6E8;--cir-soft:#163044;--tra:#E4635C;--tra-soft:#3A2422}
.f-lineal{--f:var(--lin);--f-soft:var(--lin-soft)}
.f-circular{--f:var(--cir);--f-soft:var(--cir-soft)}
.f-transformacion{--f:var(--tra);--f-soft:var(--tra-soft)}
body{font-size:15px;line-height:1.6}
.wrap{padding:0}

/* lixeiro dinamismo: elevación + sombra, sen cambiar a cor */
.mural a,.tabs button,.btn,.nav button,.btn2,.seg button,.ex,.langs button,.langs>summary,.inicio,.lista a{transition:var(--lift)}
.mural a:hover,.btn:hover,.nav button:not(:disabled):hover,.btn2:hover,.ex:hover{
  transform:translateY(-2px);box-shadow:0 6px 16px rgba(27,25,23,.08)}
.inicio:hover,.lista a:hover,.langs>summary:hover,.langs button:hover{
  transform:translateY(-2px);box-shadow:0 1px 3px rgba(27,25,23,.2);background:#FBF6F0}
.tabs button:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.mural a,.tabs button,.btn,.nav button,.btn2,.ex,.inicio,.lista a,.langs>summary,.langs button,.seg button{transition:none;transform:none}}

/* reserva sempre o oco da barra de desprazamento: sen isto a cabeceira móvese ao pasar
   dunha páxina longa (portada) a unha curta (ficha) */
html{scrollbar-gutter:stable}
.cab{border-bottom:1px solid var(--accent);background:var(--paper);position:sticky;top:0;z-index:20;
  box-shadow:0 6px 16px rgba(27,25,23,.08)}
.cab__row{max-width:1120px;margin-inline:auto;padding:.55rem clamp(1rem,4vw,2rem);
  display:flex;align-items:center;gap:.3rem 1.2rem;flex-wrap:wrap}
.marca{font-family:var(--ff-display);font-weight:700;letter-spacing:.06em;
  font-size:clamp(1.35rem,3vw,1.85rem);color:var(--ink);text-decoration:none;line-height:1}
.marca-txt{all:unset;text-transform:uppercase}
/* pé: o crédito de 2004 leva á portada orixinal */
.titleblock dd a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.titleblock dd a:hover{text-decoration-color:currentColor}
.marca-ver{font-size:.42em;letter-spacing:.04em;margin-left:.28em;color:var(--ink);vertical-align:super;font-weight:700}
.cab-nav{margin-left:auto;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.inicio{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;padding:.4rem .5rem;border-radius:var(--r)}
.inicio.on{color:var(--ink)}
/* en pantallas estreitas os botóns de familia van en curto (Lineal, Circular) para que o menú colla nunha liña */
@media (max-width:800px){.cab-nav .cab-longo{display:none}}
/* raia que separa a navegación (familias) das utilidades (idioma, modo aula) */
.cab-sep{width:1px;height:1.15rem;background:var(--ink-3);opacity:.45;margin:0 .45rem;flex:none}
@media (max-width:800px){.cab-sep{display:none}}
.fam{display:flex;gap:.2rem;flex:1;flex-wrap:wrap}
.fam a{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;padding:.42rem .7rem;border-bottom:2px solid transparent;display:inline-block}
.fam a:hover,.fam a:focus-visible,.fam a.on{color:var(--f);border-bottom-color:var(--f)}
.langs{position:relative;flex:none}
.langs>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;
  padding:.3rem .5rem;font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2)}
.langs>summary::-webkit-details-marker{display:none}
.langs>summary::after{
  content:"";
  width:0;height:0;margin-left:.15rem;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--ink);
  opacity:.75}
.langs[open]>summary::after{border-top:0;border-bottom:6px solid var(--ink)}
.langs__menu{position:absolute;top:calc(100% + .3rem);right:0;z-index:30;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--rule);box-shadow:0 10px 24px rgba(27,25,23,.14);
  min-width:8rem;padding:.25rem}
.langs button{appearance:none;cursor:pointer;width:100%;display:flex;align-items:center;gap:.4rem;
  padding:.35rem .5rem;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);text-align:left}
.bandeira{display:inline-block;width:16px;height:11px;border:1px solid rgba(128,120,112,.35);flex:none;border-radius:1px}
.bandeira[data-lang="es"]{background:linear-gradient(to bottom,#AA151B 0 25%,#F1BF00 25% 75%,#AA151B 75% 100%)}
.bandeira[data-lang="gl"]{background:#fff linear-gradient(45deg,transparent 40%,#0099cc 40% 60%,transparent 60%)}
.bandeira[data-lang="en"]{background:#012169;
  background-image:
    linear-gradient(#C8102E 0 0),linear-gradient(#C8102E 0 0),
    linear-gradient(#fff 0 0),linear-gradient(#fff 0 0),
    linear-gradient(to top left,transparent 46%,#C8102E 46% 54%,transparent 54%),
    linear-gradient(to top right,transparent 46%,#C8102E 46% 54%,transparent 54%),
    linear-gradient(to top left,transparent 42%,#fff 42% 58%,transparent 58%),
    linear-gradient(to top right,transparent 42%,#fff 42% 58%,transparent 58%);
  background-size:20% 100%,100% 33%,33% 100%,100% 55%,100% 100%,100% 100%,100% 100%,100% 100%;
  background-position:center,center,center,center,center,center,center,center;
  background-repeat:no-repeat}
.langs button.on{color:var(--ink);font-weight:600}
.langs button.on .bandeira{border-color:var(--ink)}
.aviso-lingua{max-width:1120px;margin:0 auto;padding:.6rem clamp(1rem,4vw,2rem);font-size:.82rem;
  color:var(--ink-2);background:var(--panel);border-bottom:1px solid var(--rule)}
.aula{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:.4rem;cursor:pointer}
.aula input{accent-color:var(--accent)}
.def{max-width:1120px;margin-inline:auto;padding:0 clamp(1rem,4vw,2rem) .7rem;
  font-size:.86rem;color:var(--ink-2);min-height:2.4em;line-height:1.45}
.def b{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--f);font-weight:600;margin-right:.5rem}

main{max-width:1120px;margin-inline:auto;padding:clamp(1.4rem,4vw,2.4rem) clamp(1rem,4vw,2rem) 3rem}

.mural a,.caixon,.tarxeta,.langs__menu,.btn,.btn2,.preg,.ex,.pend,.aviso-lingua,
.titleblock,.titleblock div,.langs>summary,.aula,.nav button,.seg button,.foto img,.ex .sen{
  border-radius:var(--r)}

/* portada */
.portada{display:grid;gap:2.2rem}
.lema{max-width:62ch}
.lema .lema__tit{font-family:var(--ff-display);font-weight:700;line-height:1.1;color:var(--ink);
  font-size:clamp(1.55rem,4vw,2.35rem);letter-spacing:-.03em;margin:.2rem 0 .5rem}
.lema p{margin:0;color:var(--ink-2);font-size:1rem}
.mural{display:flex;gap:.5rem;overflow:hidden}
.mural a{display:block;flex:1 1 0;min-width:0;background:var(--visor-bg);border:1px solid var(--rule);text-decoration:none;color:#1b1917;padding:.4rem .45rem .45rem;border-radius:var(--r)}
.mural svg{width:100%;height:auto;display:block}
.mural span{display:block;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:#55504b;margin-top:.35rem}
.mural .g{stroke:#1b1917;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mural .gf{fill:#e8e4df;stroke:#1b1917;stroke-width:1.6}
.mural .ga{stroke:#c1272d;fill:none;stroke-width:2.2;stroke-linecap:round}
.mural .gs{stroke:#2e6f8e;fill:none;stroke-width:1.8;stroke-linecap:round}
.mural .gthin{stroke:#8b847d;fill:none;stroke-width:1.1;stroke-linejoin:round}
.mural .gdash{stroke:#8b847d;fill:none;stroke-width:.9;stroke-dasharray:2.8 2.2}
.mural .gf-st{fill:#dee9f0;stroke:#2e6f8e;stroke-width:1.4;stroke-linejoin:round}
.mural .gpin{fill:#fcfbfa;stroke:#1b1917;stroke-width:1.3}
.mural .gf-in{fill:#f4dedb;stroke:#c1272d;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.mural .giro{stroke-width:1}
.mural .gear{stroke-width:1.25;stroke-linejoin:miter;stroke-linecap:butt}
.caixons{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.caixon{border:1px solid var(--rule);border-top:4px solid var(--f);background:var(--stage)}
.caixon h2{font-size:1.02rem;padding:.8rem .95rem .1rem}
.caixon h2 a{color:inherit;text-decoration:none;border-radius:var(--r);display:inline-block}
.caixon h2 a:hover{color:var(--f)}
.caixon p{font-size:.86rem;color:var(--ink-2);margin:0;padding:.3rem .95rem .75rem;line-height:1.5}
.lista{list-style:none;margin:0;padding:.25rem .35rem .4rem;border-top:1px solid var(--rule)}
.lista li{display:flex;align-items:center;gap:.45rem;padding:.12rem 0;border-bottom:0}
.lista a{color:var(--ink-2);text-decoration:none;font-family:var(--ff-display);font-weight:600;font-size:.92rem;flex:1;
  display:block;padding:.42rem .7rem;border-radius:var(--r)}
.est{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;padding:.12rem .4rem;border-radius:2px;white-space:nowrap}
.est-feito{background:var(--ok-soft);color:var(--ok)}
.est-pendente{background:var(--panel);color:var(--ink-3)}
.est-proposta{background:var(--f-soft);color:var(--f)}
.estado{display:flex;gap:1.6rem;flex-wrap:wrap;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:1rem}
.estado b{color:var(--ink);font-weight:600}

/* ficha */
.ficha{display:grid;grid-template-columns:230px minmax(0,1fr);gap:1.6rem;align-items:stretch}   /* menú e ficha á mesma altura e co mesmo alto */
@media (max-width:860px){.ficha{grid-template-columns:1fr}}
.caixon--lat .caixon__tit{font-size:.72rem;font-family:var(--ff-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--f);font-weight:600;
  line-height:1.6;margin:.83em 0;padding:.8rem .95rem .1rem}
.lista--lat a{font-size:.86rem}
.lista--lat li.on{background:transparent}
.lista--lat li.on a{color:var(--f)}
.tarxeta{border:1px solid var(--rule);border-top:4px solid var(--f);background:var(--stage)}
.tarx__cab{padding:1.1rem 1.3rem .9rem;border-bottom:1px solid var(--rule);display:grid;gap:.35rem}
.tarx__cab h1{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;margin:0}
.mov{font-family:var(--ff-mono);font-size:.74rem;color:var(--ink-2);display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.mov i{font-style:normal;color:var(--f)}
.mov small{color:var(--ink-3);letter-spacing:.04em}
.tabs{display:flex;border-bottom:1px solid var(--rule);overflow-x:auto}
.tabs button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);padding:.7rem .95rem;white-space:nowrap}
.tabs button.on{color:var(--f);border-bottom-color:var(--f)}
.tabs button small{margin-left:.35rem;color:var(--ink-3);letter-spacing:.04em}
.sec{padding:1.2rem 1.3rem 1.4rem}
.sec--obs{padding:0}
.sec .prose{max-width:68ch;font-size:.92rem}          /* pantallas estreitas: unha soa columna */
@media (min-width:900px){                             /* con ancho dabondo: dúas columnas equilibradas */
  .sec .prose{max-width:none;columns:2;column-gap:2.6rem;column-fill:balance}
}
.sec .prose p{margin:0 0 .85em;line-height:1.6}
/* fórmula nun recadro propio, coma na ficha de 2004 */
.sec .prose .formula{margin:1.1em 0;padding:.3rem .7rem;width:max-content;max-width:100%;
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  font-family:var(--ff-mono);font-size:1.05rem;font-weight:500;letter-spacing:.03em;color:var(--ink);
  break-inside:avoid;        /* que non se parta entre columnas */
  break-before:avoid}        /* e que non se separe da frase que a presenta */
.sec .prose p:has(+ .formula){break-after:avoid}
.nota2004{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:1rem 0 0}
.obs__pe{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;padding:.7rem 1rem;border-top:1px solid var(--rule);background:var(--panel)}
.obs__pe span{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);flex:1}
.btn2{display:inline-block;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);padding:.45rem .8rem;text-decoration:none;border:1px solid var(--ink);cursor:pointer}
.btn2--sec{background:transparent;color:var(--ink);border-color:var(--rule)}
.demo{border:0}
.demo:fullscreen{--visor:calc(100vh - 2px);background:var(--paper);padding:0}
.demo:fullscreen .demo__body{grid-template-columns:minmax(0,1fr) 320px}
.demo:fullscreen .stagewrap{height:calc(100vh - 2px);align-content:stretch}   /* en pantalla completa o debuxo enche o visor, sen centrado */
.demo:fullscreen .stagewrap svg{height:100%}
.demo:fullscreen .panel{height:calc(100vh - 2px);overflow-y:auto}
.pend{border:1px dashed var(--rule);padding:2.2rem 1rem;text-align:center;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.exs{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.ex{border:1px solid var(--rule);background:var(--paper)}
.ex img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.ex .sen{aspect-ratio:4/3;display:grid;place-items:center;color:var(--ink-3);font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;background:var(--panel)}
.ex figcaption{font-size:.82rem;padding:.5rem .65rem .6rem;line-height:1.35}
.preg{border:1px solid var(--rule);padding:.9rem 1rem;margin-bottom:.8rem;background:var(--paper)}
.preg p{margin:0 0 .5rem;font-weight:600;font-size:.92rem}
.preg label{display:block;font-size:.88rem;padding:.2rem 0;cursor:pointer}
.preg label.ok{color:var(--ok)}
.preg label.mal{color:var(--accent);text-decoration:line-through}
.preg input{accent-color:var(--accent);margin-right:.4rem}
.corr{margin-top:.4rem;display:flex;gap:.6rem;align-items:center;font-family:var(--ff-mono);font-size:.7rem;color:var(--ink-2)}
.roda{max-width:1120px;margin:0 auto 2.5rem;padding-inline:clamp(1rem,4vw,2rem)}
.titleblock{border:1px solid var(--ink-3);margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.titleblock div{padding:.55rem .8rem;border-right:1px solid var(--rule)}
.titleblock div:last-child{border-right:0}
.titleblock dt{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.titleblock dd{margin:.2rem 0 0;font-family:var(--ff-display);font-size:.84rem;font-weight:600}
@media (prefers-reduced-motion:reduce){.mural *{animation:none!important}}

/* debuxo dunha pregunta do cuestionario */
.preg__img{display:block;max-width:220px;width:100%;height:auto;margin:.15rem 0 .7rem;
  border:1px solid var(--rule);border-radius:var(--r);background:#fff}

/* selector de tipo (por exemplo, o grao da panca) dentro do panel dun demo */
.seg{display:flex}
.seg button{flex:1;appearance:none;cursor:pointer;border:1px solid var(--rule);margin-left:-1px;
  background:var(--stage);color:var(--ink);font-family:var(--ff-mono);font-size:.66rem;
  letter-spacing:.05em;text-transform:uppercase;padding:.4rem .2rem}
.seg button:first-child{margin-left:0}
.seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}