/* Fuentes guardadas en vendor/ para que el juego funcione sin internet. */
@font-face{font-family:"Alegreya";font-weight:500;font-display:swap;src:url(../vendor/fuentes/alegreya-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Alegreya";font-weight:700;font-display:swap;src:url(../vendor/fuentes/alegreya-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Alegreya";font-weight:800;font-display:swap;src:url(../vendor/fuentes/alegreya-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-weight:400;font-display:swap;src:url(../vendor/fuentes/alegreya-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-weight:500;font-display:swap;src:url(../vendor/fuentes/alegreya-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IM Fell English";font-weight:400;font-display:swap;src:url(../vendor/fuentes/im-fell-english-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IM Fell English";font-style:italic;font-weight:400;font-display:swap;src:url(../vendor/fuentes/im-fell-english-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"IM Fell English SC";font-weight:400;font-display:swap;src:url(../vendor/fuentes/im-fell-english-sc-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-weight:700;font-display:swap;src:url(../vendor/fuentes/alegreya-sans-latin-700-normal.woff2) format("woff2")}

:root{
  --papel:#ECEAE2; --tinta:#2B2A22;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--papel);color:var(--tinta);
  font-family:"Alegreya Sans",system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:none}
#juego{position:fixed;inset:0;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}
#juego canvas{display:block;outline:none}
#juego canvas:focus-visible{outline:3px solid #2D5D72;outline-offset:-3px}

/* ---------- Interfaz (adaptada de la versión 9) ---------- */
:root{--bg:#E4EBE6;--panel:#F6F8F4;--ink:#22291F;--muted:#5C6656;--line:#C6D0C2;--gold:#A8781F;--good:#2F7542;--bad:#B0402C;--accent:#2D5D72;--sel:#F2C94C}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#131A18;--panel:#1C2523;--ink:#E6ECE3;--muted:#9AA698;--line:#33403B;--gold:#E2B24F;--good:#72BE80;--bad:#E57E66;--accent:#86BCD2}}
:root[data-theme="dark"]{--bg:#131A18;--panel:#1C2523;--ink:#E6ECE3;--muted:#9AA698;--line:#33403B;--gold:#E2B24F;--good:#72BE80;--bad:#E57E66;--accent:#86BCD2}
#ui{position:fixed;inset:0;pointer-events:none;font-family:"Alegreya Sans",system-ui,sans-serif;color:var(--ink);font-size:16px;line-height:1.4}
#ui button{font:inherit;color:inherit;cursor:pointer}
#ui button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#ui .vivo{pointer-events:auto}
.neg{color:var(--bad)}
.redondo{pointer-events:auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 92%,transparent);font-size:20px;line-height:1;box-shadow:0 2px 6px rgba(40,40,30,.12)}
.pildora{pointer-events:auto;min-height:44px;padding:8px 18px;border-radius:22px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 94%,transparent);font-size:16px;box-shadow:0 2px 6px rgba(40,40,30,.12)}
.pildora.grande{font-family:Alegreya,Georgia,serif;font-weight:700;font-size:20px;padding:10px 28px;background:#2D5D72;color:#F6F4EC !important;border-color:#2D5D72}
.portada-ui{position:absolute;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:0 12px}
.aviso{position:absolute;left:50%;top:40%;transform:translateX(-50%);padding:8px 16px;border-radius:14px;background:color-mix(in srgb,var(--panel) 94%,transparent);font-size:15px;box-shadow:0 2px 10px rgba(40,40,30,.12)}
.aviso[hidden],.ficha[hidden],.hoja[hidden]{display:none}
/* Barra superior */
.arriba{position:absolute;left:0;right:0;top:0;padding:calc(8px + env(safe-area-inset-top,0px)) 62px 6px 10px;display:grid;gap:6px;background:linear-gradient(to bottom,color-mix(in srgb,#ECEAE2 88%,transparent),transparent)}
.era{font-family:Alegreya,Georgia,serif;font-size:.98rem;color:#3E4638;display:flex;align-items:center;gap:6px;min-width:0}
.era b{color:var(--accent)}
.era span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud{display:flex;flex-wrap:wrap;gap:4px}
.pill{display:flex;align-items:center;gap:4px;background:color-mix(in srgb,var(--panel) 86%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:999px;padding:2px 9px 2px 4px;font-family:Alegreya,Georgia,serif;font-size:.98rem;box-shadow:0 2px 6px rgba(40,40,20,.08)}
.pill small{font-family:"Alegreya Sans",sans-serif;font-size:.78rem;color:var(--muted)}
.pill small.precio{margin-left:4px;font-weight:700}.pill small.precio.neg{color:var(--bad)}.pill small.precio.pos{color:var(--good)}
.ic{width:20px;height:20px;display:block}
.controles{position:absolute;right:calc(10px + env(safe-area-inset-right,0px));top:calc(10px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:8px}
.controles button.on{background:var(--accent);color:#fff}
/* Barra inferior (dock) */
.dock{pointer-events:auto;position:absolute;left:0;right:0;bottom:0;display:flex;align-items:stretch;gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.dk{flex:1 0 54px;background:none;border:0;border-radius:10px;font-size:.78rem;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 2px;min-height:48px}
.dk .di{font-size:1.3rem;line-height:1.2;height:24px;display:grid;place-items:center}
.dk.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--ink)}
.dk:disabled{opacity:.4;cursor:default}
/* Hojas que suben desde abajo (en computador, panel lateral) */
.hoja{pointer-events:auto;position:absolute;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom,0px));max-height:min(60dvh,520px);overflow:auto;background:var(--panel);border-top:3px solid var(--accent);border-radius:18px 18px 0 0;padding:4px 14px 14px;box-shadow:0 -10px 30px rgba(20,25,15,.18)}
.hoja.mini .tray,.hoja.mini .sh-head{display:none}
.sh-head{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--panel);padding:8px 0 6px;z-index:1}
.sh-head h2{font-family:Alegreya,Georgia,serif;font-size:1.2rem;margin:0}
.x{background:none;border:0;font-size:1.1rem;width:40px;height:40px;border-radius:50%}
.tray{display:flex;gap:6px;overflow-x:auto;padding:6px 2px 6px;scrollbar-width:thin}
.tool{flex:0 0 auto;width:92px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:6px 4px;text-align:center;font-size:.86rem;line-height:1.15}
.tool img{width:64px;height:53px;display:block;margin:0 auto 2px}
.tool small{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}
.tool.on{border-color:var(--sel);box-shadow:0 0 0 2px var(--sel)}
.tool:disabled{opacity:.45;cursor:not-allowed}
.tool .candado{display:grid;place-items:center;width:64px;height:53px;margin:0 auto 2px;font-size:1.4rem}
.hint{font-size:.9rem;color:var(--muted);min-height:1.3em;margin-top:4px}
.hint b{color:var(--ink)}
.prev{display:block;margin-top:3px;color:var(--ink)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.btn{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-height:44px}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* Ficha de una casilla */
.ficha{pointer-events:auto;position:absolute;left:10px;right:10px;bottom:calc(72px + env(safe-area-inset-bottom,0px));max-width:420px;margin:0 auto;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 97%,transparent);box-shadow:0 4px 14px rgba(40,40,30,.15);display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:.95rem;line-height:1.35}
.ficha .suelo{color:var(--bad);font-weight:600}
.ficha img{grid-row:span 2;width:84px;height:70px}
.ficha>*{grid-column:1/-1}
.ficha>img{grid-column:1}
.ficha>img+b,.ficha>img+b+span{grid-column:2}
.ficha>*{min-width:0;overflow-wrap:anywhere}
.ficha b{font-family:Alegreya,Georgia,serif;font-size:1.15rem}
.ficha .dos{grid-column:1/-1}
.toast{position:absolute;left:50%;bottom:calc(80px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--panel);padding:8px 14px;border-radius:10px;font-size:.95rem;opacity:0;transition:opacity .25s;max-width:90vw;text-align:center}
.toast.show{opacity:1}
@media (prefers-reduced-motion: reduce){.toast{transition:none}}
@media (min-width:760px){
  .hoja{left:12px;right:auto;top:calc(126px + env(safe-area-inset-top,0px));bottom:84px;width:360px;max-height:none;border-radius:16px;border:1px solid var(--line);border-top:3px solid var(--accent)}
  .hoja .tray{flex-wrap:wrap;overflow:visible}
  .hoja .tool{width:104px}
  .dock{left:50%;right:auto;transform:translateX(-50%);bottom:12px;border-radius:18px;border:1px solid var(--line);min-width:320px}
  .ficha{left:auto;right:66px;top:calc(12px + env(safe-area-inset-top,0px));bottom:auto;width:360px;margin:0}
  .toast{bottom:92px}
}
@font-face{font-family:"Caveat";font-weight:700;font-display:swap;src:url(../vendor/fuentes/caveat-latin-700-normal.woff2) format("woff2")}

/* ---------- Paso 6: interfaz completa de la v9 ---------- */
:root{--regc:#2D5D72}
.emb{width:22px;height:22px;flex:none;display:block}
.regb{pointer-events:auto;display:inline-flex;align-items:center;gap:5px;background:color-mix(in srgb,var(--panel) 80%,transparent);border:1px solid var(--regc);color:var(--ink);border-radius:999px;padding:2px 10px 2px 4px;font:inherit;font-family:Alegreya,Georgia,serif}
.regb b{color:var(--regc)}
.arriba .fila1{display:flex;align-items:center;gap:6px;min-width:0}
.medidores{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-width:560px}
.medidor{pointer-events:auto;min-width:0;background:color-mix(in srgb,var(--panel) 86%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:9px;padding:3px 6px;font-size:.72rem;text-align:left}
.medidor .lab{display:flex;justify-content:space-between;gap:2px;white-space:nowrap}
.medidor .lab span{overflow:hidden;text-overflow:ellipsis}
.medidor .lab b{font-family:Alegreya,Georgia,serif;font-size:.85rem}
.track{height:5px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:2px}
.fill{height:100%;border-radius:4px;transition:width .4s}
.meta{pointer-events:auto;position:absolute;left:10px;right:10px;bottom:calc(72px + env(safe-area-inset-bottom,0px));font-size:.86rem;line-height:1.35;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:12px;padding:6px 10px;box-shadow:0 4px 14px rgba(20,25,15,.12);text-align:left}
.meta .gl1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta .gl2{font-size:.8rem;color:var(--muted)}
.meta .gmore{display:none;margin-top:4px}
.meta.abierta .gl1{white-space:normal}
.meta.abierta .gmore{display:block}
.meta[hidden]{display:none}
.lnk{background:none;border:0;color:var(--accent);text-decoration:underline;padding:0;font-size:.85rem}
.dock .fin{flex:0 0 auto;background:var(--regc);color:#fff;border:0;border-radius:14px;padding:0 14px;font-family:Alegreya,Georgia,serif;font-weight:700;font-size:1rem;min-width:96px;line-height:1.1}
.dock .fin small{font-weight:500;font-size:.78rem;opacity:.9}
.dock .fin:disabled{opacity:.5;cursor:default}
.hoja h3{font-family:Alegreya,Georgia,serif;font-size:1.05rem;margin:12px 0 6px}
.small{font-size:.85rem;color:var(--muted);margin:6px 0 0}
.txrow{display:grid;grid-template-columns:92px 1fr 40px;gap:8px;align-items:center;font-size:.92rem;margin:4px 0}
.txrow input{width:100%;accent-color:var(--regc)}
.macro{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;text-align:center;margin:10px 0 4px}
.macro strong{display:block;font-family:Alegreya,Georgia,serif;font-size:1.15rem}
.macro span{font-size:.75rem;color:var(--muted)}
.rA{color:var(--good)}.rB{color:var(--gold)}.rC{color:var(--bad)}
.ledger{position:relative;padding:4px 6px 4px 22px;border-radius:8px;background:repeating-linear-gradient(to bottom,transparent 0 25px,color-mix(in srgb,var(--regc) 20%,transparent) 25px 26px),color-mix(in srgb,var(--panel) 90%,#F4E9C8);margin:6px 0 10px}
.ledger::before{content:"";position:absolute;left:14px;top:0;bottom:0;width:1px;background:#C8553D;opacity:.6}
.budget{width:100%;border-collapse:collapse;font-size:.92rem}
.budget td{height:26px;padding:0}
.budget td:last-child{text-align:right;font-family:Caveat,cursive;font-size:1.3rem;font-weight:700}
.budget tr.tot td{font-weight:700}
.cuatro{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cls{display:grid;grid-template-columns:48px 1fr;gap:8px;align-items:center;margin:8px 0;font-size:.92rem}
.cls img{width:44px;height:44px;border-radius:50%}
.cls .lab{display:flex;justify-content:space-between}
.cls small{color:var(--muted);font-size:.8rem}
.quote{font-style:italic;font-size:.84rem;color:var(--muted);margin-top:2px}
.law{border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin:8px 0;display:grid;gap:4px}
.law.on{border-color:var(--regc);background:color-mix(in srgb,var(--regc) 8%,transparent)}
.law b{font-family:Alegreya,Georgia,serif;font-size:1.02rem}
.law small{color:var(--muted)}
.law .btn{justify-self:start;min-height:38px;padding:5px 12px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.tab{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:.85rem;min-height:32px}
.tab.on{background:var(--regc);color:#fff;border-color:var(--regc)}
.chart{width:100%;height:auto;display:block}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .zero{stroke:var(--muted);stroke-dasharray:3 3}
.chart .ax{fill:var(--muted);font-size:10px;font-family:"Alegreya Sans",sans-serif}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.82rem;color:var(--muted);margin-top:4px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.log{font-size:.92rem}
.log p{margin:0 0 8px}
.log b{font-family:Alegreya,Georgia,serif}
/* Tarjetas (dilemas, etapas, régimen, fin) */
.velo{pointer-events:auto;position:absolute;inset:0;background:rgba(10,15,12,.55);display:flex;align-items:flex-end;justify-content:center;padding:12px;z-index:5}
.velo[hidden]{display:none}
@media(min-width:600px){.velo{align-items:center}}
.card{background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 92%,#E9DDB8));color:var(--ink);border-radius:18px;max-width:520px;width:100%;max-height:88dvh;overflow:auto;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));border:1px solid var(--line);box-shadow:0 18px 40px rgba(20,25,15,.3)}
.card h3{font-family:Alegreya,Georgia,serif;font-size:1.5rem;margin:6px 0;line-height:1.15}
.card h2{font-family:Alegreya,Georgia,serif;font-size:1.15rem;margin:12px 0 6px}
.card p{margin:0 0 12px}
.card .big{font-size:2.4rem;line-height:1}
.vig{width:100%;height:auto;display:block;border-radius:12px;margin-bottom:6px}
.opt{display:block;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.opt small{display:block;color:var(--muted)}
.opt small.mov{margin-top:4px}.opt small.fuerza{margin-top:4px;font-weight:600}.opt small.fuerza.alta{color:var(--good)}.opt small.fuerza.baja{color:var(--bad)}
.principios{display:grid;gap:6px;margin:8px 0}.opt.principio{text-align:left}.opt.principio.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--panel));box-shadow:inset 0 0 0 2px var(--accent)}.opt.principio .contra{font-size:.8rem}
.opt small.acta-aviso,.law small.acta-aviso{margin-top:4px;color:var(--bad);font-weight:600}
.opt.reg{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;border-left:4px solid var(--rc)}
.opt.reg .emb{width:28px;height:28px}
.main{width:100%;background:var(--regc);color:#fff;border:0;border-radius:12px;padding:12px;font-family:Alegreya,Georgia,serif;font-size:1.15rem;font-weight:700;margin-top:8px;min-height:48px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.chip{font-size:.85rem;border-radius:999px;padding:2px 10px;border:1px solid var(--line)}
.chip.g{color:var(--good);border-color:var(--good)}
.chip.b{color:var(--bad);border-color:var(--bad)}
.phil{border-left:4px solid var(--regc);padding:6px 10px;margin:0 0 14px;background:var(--bg);border-radius:0 10px 10px 0}
.phil b{font-family:Alegreya,Georgia,serif}
.stances{float:right;display:flex;gap:3px;margin-left:6px}
.st{display:flex;align-items:center;font-size:.8rem;font-weight:700}
.st img{width:24px;height:24px;border-radius:50%}
.st.pro{color:var(--good)}.st.con{color:var(--bad)}
.says{display:grid;gap:8px;margin:0 0 14px}
.say{display:grid;grid-template-columns:40px 1fr;gap:8px;align-items:center;font-size:.92rem}
.say img{width:40px;height:40px;border-radius:50%}
.say b{display:block;font-family:Alegreya,Georgia,serif}
.say.con span{color:var(--bad)}.say.pro span{color:var(--good)}
.pbar{display:grid;grid-template-columns:120px 1fr 24px;gap:8px;align-items:center;font-size:.88rem;margin:4px 0}
.regh{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--rc) 18%,transparent);border:2px solid var(--rc)}
.regh .emb{width:38px;height:38px}
.rumbo{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--good),var(--gold),var(--bad));position:relative;margin:6px 0 2px}
.rumbo div{position:absolute;top:-3px;bottom:-3px;border-right:3px solid var(--ink)}
.rlab{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted)}
.chk{display:flex;gap:8px;align-items:center;font-size:.92rem;margin-top:8px}
.inp{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);width:110px}
.anio-pasa{position:absolute;inset:0;display:grid;place-items:center;background:rgba(18,26,48,.62);color:#F4EFE2;text-align:center;font-family:Alegreya,Georgia,serif;opacity:0;transition:opacity .45s;pointer-events:none}
.anio-pasa.ver{opacity:1}
.anio-pasa b{display:block;font-size:2.2rem;font-weight:800}
.anio-pasa span{font-size:1rem;border-top:1px solid rgba(244,239,226,.6);padding-top:6px;display:inline-block;margin-top:4px}
@media (prefers-reduced-motion: reduce){.fill,.anio-pasa{transition:none}}
@media (min-width:760px){
  .meta{left:50%;right:auto;transform:translateX(-50%);width:min(640px,90vw);bottom:86px}
  .medidores{max-width:640px}
  .medidor{font-size:.8rem;padding:4px 8px}
}
#ui .main,#ui .dock .fin,#ui .tab.on{color:#fff}
.medidor .ico{display:none}
@media (max-width:520px){
  .medidor .ico{display:inline}
  .lluv-nom{display:none}
  .medidor .nom{display:none}
  .redondo{width:40px;height:40px;font-size:18px}
  .controles{gap:6px}
}
.slot{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;margin:6px 0;font-size:.92rem}
.slot .btn{min-height:40px;padding:6px 10px}
.achs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ach{border:1px solid var(--line);border-radius:10px;padding:6px 8px;opacity:.55;font-size:.88rem}
.ach.on{opacity:1;border-color:var(--gold)}
.ach small{display:block;color:var(--muted)}
.causas{display:grid;gap:4px;margin:6px 0 10px}
.causa{display:grid;grid-template-columns:1fr 70px 44px;gap:8px;align-items:center;font-size:.9rem}
.causa .barra{height:7px;border-radius:4px;background:var(--line);overflow:hidden;display:block}
.causa .barra i{display:block;height:100%;border-radius:4px}
.causa .barra i.pos{background:var(--good)}.causa .barra i.neg{background:var(--bad)}
.causa b{text-align:right}
.pos{color:var(--good)}
.cls .porque{margin-top:6px;padding:6px 10px;font-size:.85rem}
.cls small.neg{display:block;color:var(--bad)}
.efes{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.efe{font-size:.8rem;line-height:1.2;padding:3px 7px;border-radius:999px;border:1px solid var(--line);background:var(--bg)}
.efe.pos{border-color:color-mix(in srgb,var(--good) 55%,var(--line))}.efe.neg{border-color:color-mix(in srgb,var(--bad) 55%,var(--line));color:var(--bad)}
.ficha .aporte{grid-column:1/-1;font-size:.88rem}
.dirs{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.dir{font-size:.75rem;padding:1px 6px;border-radius:999px;border:1px solid var(--line)}
.dir.pos{color:var(--good)}.dir.neg{color:var(--bad)}
.porque-afecta{margin:8px 0;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--accent) 12%,transparent);font-size:.92rem}
.salio-mal{margin:8px 0;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--bad) 14%,transparent);font-size:.92rem}
.subs{display:grid;gap:4px;margin-top:8px}
.sub{display:grid;grid-template-columns:minmax(0,1.4fr) 1fr 28px;gap:8px;align-items:center;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:5px 8px;font-size:.85rem}
.sub .sn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sub small{color:var(--muted)}
.sub .track{height:6px;border-radius:4px;background:var(--line);overflow:hidden;display:block}.sub .fill{display:block;height:100%}
.sub b{text-align:right}
.cls.otros{grid-template-columns:1fr}
.opt.reg small.ventaja{color:var(--good);font-weight:600;margin-top:4px}
.opt.reg small.riesgo{color:var(--bad, #9C2F25);font-weight:600;margin-top:2px}
.sub.fig .sn img{width:22px;height:22px;border-radius:50%;vertical-align:middle;margin-right:4px}
.fig-r img{width:44px;height:44px;border-radius:50%}
.fig-cab{display:flex;gap:12px;align-items:center}.fig-cab img{width:64px;height:64px;border-radius:50%}.fig-cab h3{margin:0}
.opt.on{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.camino{margin:8px 0;padding:8px 10px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}.camino p{margin:4px 0}
.conds{margin:4px 0 0;padding-left:0;list-style:none;font-size:.85rem}.conds li.pos{color:var(--good)}.conds li.neg{color:var(--bad)}
.ficha .especial{grid-column:1/-1;font-size:.9rem;color:var(--accent);font-weight:600}

/* ---------- Fase 8: interfaz al fresco (variante A, muro de cal) ---------- */
/* Un solo estilo: paneles de cal con textura de muro, bordes verde cafetero (antes rojo pompeyano), guarda de rombos
   escalonados de la cerámica pijao (antes greca griega) y títulos en versalitas. */
:root,:root[data-theme="dark"]{--bg:#EFE5CF;--panel:#F7F1E3;--ink:#2E2723;--muted:#6A5440;--line:#D8C7A6;--gold:#B98A2E;--good:#5E7F45;--bad:#B0402C;--accent:#41603D;--sel:#D4A24C;--rojo:#41603D;--terracota:#A8573A;--ocre:#D4A24C;--siena:#5B3423;--papel:#EFE5CF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#EFE5CF;--panel:#F7F1E3;--ink:#2E2723;--muted:#6A5440;--line:#D8C7A6;--gold:#B98A2E;--good:#5E7F45;--bad:#B0402C;--accent:#41603D}}
html,body{background:#E6DABF}
#ui button:focus-visible{outline:3px solid #3E7E9C}
/* Barra superior compacta */
.arriba{background:linear-gradient(to bottom,rgba(239,229,207,.92),rgba(239,229,207,0));padding-right:58px;gap:5px}
.regb{border-radius:4px;border:0;background:var(--rojo);color:#F7F1E3;box-shadow:inset 0 0 0 1.5px var(--ocre);font-weight:800;font-variant:small-caps;letter-spacing:.02em;padding:2px 10px 2px 4px}
.regb b{color:#F7F1E3}
.era{background:rgba(247,241,227,.86);border-radius:4px;padding:1px 8px;color:var(--siena);font-weight:700}
.era b{color:var(--rojo)}
.hud{gap:4px}
.pill{border-radius:5px;border:1.5px solid rgba(91,52,35,.3);background:rgba(247,241,227,.92);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 1px 3px rgba(60,40,20,.12);padding:1px 7px 1px 3px;gap:3px;font-weight:700}
.pill .ic,.ic{width:21px;height:21px}
.medidor{border-radius:5px;border:1.5px solid rgba(91,52,35,.3);background:rgba(247,241,227,.92);backdrop-filter:none;-webkit-backdrop-filter:none}
.medidor .ico{display:inline-flex;align-items:center;margin-right:3px;vertical-align:-3px}
.medidor .mi{width:16px;height:16px;display:block}
.track{background:rgba(91,52,35,.16)}
/* Botones de la derecha: un solo menú */
.controles{gap:6px;align-items:flex-end}
.redondo{background:var(--panel);border:2px solid var(--rojo);color:var(--rojo);font-family:Alegreya,Georgia,serif;font-weight:800;box-shadow:0 2px 6px rgba(60,40,20,.18)}
.redondo.on,.controles button.on{background:var(--rojo);color:#F7F1E3}
.grupo{display:none;flex-direction:column;gap:6px}
.grupo.abierto{display:flex}
@media (min-width:760px){.grupo{display:flex}.controles>.redondo:first-child{display:none}}
/* Barra inferior con greca */
.dock{background:var(--panel) var(--muro-cal);border-top:3px solid var(--rojo);backdrop-filter:none;-webkit-backdrop-filter:none}
/* La guarda va dentro de la barra, nunca encima del panel, y con rombos enteros (round ajusta el ancho del dibujo). */
.dock{padding-top:16px}
.dock::before{content:"";position:absolute;left:6px;right:6px;top:4px;height:8px;background:var(--greca) round no-repeat;background-size:auto 8px;pointer-events:none}
.hoja{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
.sh-head{padding-top:20px}
.sh-head::before{content:"";position:absolute;left:0;right:0;top:6px;height:8px;background:var(--greca) round no-repeat;background-size:auto 8px;pointer-events:none}
.dk{color:var(--siena);font-weight:600}
.dk .di img{width:26px;height:26px;display:block}
.dk.on{background:rgba(65,96,61,.12);color:var(--rojo)}
.dock .fin{background:var(--rojo);border-radius:6px;box-shadow:inset 0 0 0 2px var(--ocre)}
@media (min-width:760px){.dock{border:2px solid var(--rojo);border-radius:8px}.dock::before{left:10px;right:10px}.hoja{bottom:96px;top:calc(170px + env(safe-area-inset-top,0px))}}
/* Paneles, fichas y tarjetas: cal con textura de muro */
.hoja,.ficha,.card,.meta{background-color:var(--panel);background-image:var(--muro-cal);border-radius:6px;border:2px solid var(--rojo)}
.hoja{border-top:3px solid var(--rojo);border-radius:8px 8px 0 0}
@media (min-width:760px){.hoja{border:2px solid var(--rojo);border-radius:8px}}
.sh-head{background-color:var(--panel);background-image:var(--muro-cal)}
.sh-head h2,.card h3,.hoja h3,.card h2{font-family:Alegreya,Georgia,serif;font-weight:800;font-variant:small-caps;letter-spacing:.02em;color:var(--siena)}
.card{position:relative;padding-top:26px;box-shadow:0 0 0 2px var(--rojo),0 18px 40px rgba(40,20,10,.35);border:0}
.card::before{content:"";position:absolute;left:12px;right:12px;top:8px;height:10px;background:var(--greca) round no-repeat;background-size:auto 10px;pointer-events:none}
.velo{background:rgba(46,32,22,.5)}
.opt,.btn,.tool,.tab,.sub,.camino,.law{border-radius:5px}
.opt{background:var(--bg);border:0;border-left:5px solid var(--rojo);box-shadow:0 1px 0 rgba(91,52,35,.15)}
.opt.on{box-shadow:inset 0 0 0 2px var(--rojo)}
.btn{background:var(--bg);border:1.5px solid rgba(91,52,35,.3);font-weight:600}
.main{background:var(--rojo);border-radius:6px;box-shadow:inset 0 0 0 2px var(--ocre)}
.phil{border-left-color:var(--rojo);background:rgba(91,52,35,.06);border-radius:0 5px 5px 0}
.tab.on{background:var(--rojo);border-color:var(--rojo)}
.tool.on{border-color:var(--ocre);box-shadow:0 0 0 2px var(--ocre)}
.law.on{border-color:var(--rojo);background:rgba(65,96,61,.06)}
.meta{border-width:1.5px}
.toast{background:var(--siena);color:#F7F1E3;border-radius:6px;box-shadow:0 0 0 2px var(--ocre)}
.ledger{background:repeating-linear-gradient(to bottom,transparent 0 25px,rgba(65,96,61,.18) 25px 26px),#F3E8CC}
.anio-pasa{background:rgba(70,30,20,.55);color:#F7F1E3}
.anio-pasa b{font-variant:small-caps;letter-spacing:.04em}
.porque-afecta{background:rgba(62,126,156,.12);border-radius:5px}
.salio-mal{background:rgba(176,64,44,.12);border-radius:5px}
@media (max-width:520px){
  .redondo{width:40px;height:40px;font-size:17px}
  .pill{font-size:.9rem;padding:1px 5px 1px 2px}
  .pill .ic{width:19px;height:19px}
  .pill small{font-size:.7rem}
}
.txrow input,input[type=range]{accent-color:var(--rojo)}
.card .big{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--rojo),0 0 0 3px var(--panel),0 0 0 4.5px rgba(212,162,76,.8);font-size:1.7rem;margin:2px 0 4px}
@media (max-width:520px){
  .hud{gap:3px}
  .pill{font-size:.84rem;padding:1px 4px 1px 2px;gap:2px}
  .pill .ic{width:17px;height:17px}
  .pill small{font-size:.66rem}
  .arriba{padding-right:54px;padding-left:8px}
}
@media (min-width:760px){.meta{bottom:98px}}

/* Fase 9: eventos de cine (franjas negras con el texto de la escena) */
.cine{position:absolute;inset:0;z-index:6}
.cine-franja{position:absolute;left:0;right:0;height:15vh;min-height:72px;background:#1E1612;transition:transform .35s ease}
.cine-franja.arriba{top:0;transform:translateY(-100%)}
.cine-franja.abajo{bottom:0;height:auto;min-height:15vh;padding-bottom:14px !important;transform:translateY(100%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 16px;text-align:center}
.cine.on .cine-franja{transform:none}
.cine-franja p{margin:0;color:#F7F1E3;font:italic 600 clamp(15px,2.2vw,22px)/1.3 Alegreya,Georgia,serif;max-width:46em}
.cine-franja.arriba{display:flex;align-items:flex-end;justify-content:center;padding:0 16px 8px}
.cine-franja h2{margin:0;color:#E8C77A;font:700 clamp(20px,3.4vw,34px)/1.1 Alegreya,Georgia,serif;letter-spacing:.06em;text-transform:uppercase;text-align:center}
.cine.on .cine-franja h2{animation:cineTitulo 1.2s ease both .3s}
@keyframes cineTitulo{from{opacity:0;letter-spacing:.3em}to{opacity:1;letter-spacing:.06em}}
#ui .cine-boton{margin-top:6px;background:none;border:1px solid #6E5A44;color:#C9B48E;font:600 13px/1 'Alegreya Sans',system-ui,sans-serif;padding:6px 14px;border-radius:999px;cursor:pointer}
#ui .cine-boton.seguir{background:#E8C77A;border-color:#E8C77A;color:#1E1612;font-size:15px;padding:9px 22px;animation:cineLatir 1.6s ease-in-out infinite}
#ui .cine-boton:focus-visible{outline:2px solid #F7F1E3;outline-offset:2px}
@keyframes cineLatir{50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.cine-franja{transition:none}.cine-franja h2,.cine-boton.seguir{animation:none}}
#ui.en-cine > *:not(.cine){visibility:hidden}
.emo{filter:sepia(.6) saturate(.85) hue-rotate(-10deg) contrast(.95) brightness(.97);font-style:normal}
/* Fase 9 (revisión): en celular los recursos caben en una sola fila; el precio de la comida queda en su ficha */
@media (max-width:520px){
  .hud{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:calc(100vw - 70px)}
  .hud::-webkit-scrollbar{display:none}
  .pill{flex-shrink:0}
  .pill small.precio{display:none}
}

/* Fase 11: El Pregonero, el periódico de los avances. Papel de prensa, cabecera grande y columnas; se despliega desde arriba. */
.velo.con-periodico{align-items:flex-start;padding-top:max(10px,env(safe-area-inset-top,0px))}
.card.periodico{max-width:640px;max-height:94dvh;border-radius:2px;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));background:#F1E4C4;background-image:radial-gradient(ellipse at center,rgba(241,228,196,0) 55%,rgba(150,110,55,.28) 100%),var(--papel-viejo);color:#2A1E14;box-shadow:inset 0 0 22px rgba(120,80,30,.25),0 0 0 1px #8C7A62,0 22px 50px rgba(30,20,10,.45);transform-origin:50% 0;animation:pe-desplegar .85s cubic-bezier(.2,.85,.3,1.15) both}
.card.periodico::before{display:none}
@keyframes pe-desplegar{0%{transform:perspective(1100px) translateY(-40px) rotateX(-85deg);opacity:0}55%{opacity:1}75%{transform:perspective(1100px) rotateX(6deg)}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.card.periodico{animation:pe-aparecer .2s both}}
@keyframes pe-aparecer{from{opacity:0}to{opacity:1}}
.pe-cab{text-align:center;border-bottom:3px double #2A221C;padding-bottom:6px;margin-bottom:6px}
.pe-linea{display:flex;justify-content:space-between;gap:4px 8px;flex-wrap:wrap;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid #2A221C;padding-bottom:3px;color:#4A3B2E}
.card .pe-nombre{font-family:"IM Fell English SC",Alegreya,Georgia,serif;font-size:clamp(2.1rem,9.5vw,3.2rem);font-weight:400;font-variant:normal;letter-spacing:.01em;line-height:1;margin:6px 0 2px;color:#1E1712}
.pe-sub{font-size:.78rem;color:#4A3B2E}
.pe-extra{text-align:center;font-family:Alegreya,Georgia,serif;font-weight:900;font-size:.95rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terracota);margin:2px 0 6px}
.pe-princ{border-bottom:1px solid #2A221C;padding-bottom:8px;margin-bottom:8px}
.pe-grabado{float:right;width:64px;height:64px;margin:4px 0 4px 10px;display:grid;place-items:center;font-size:2.2rem;border:1.5px solid #2A221C;background:rgba(91,52,35,.07);filter:grayscale(.35)}
.card .pe-titular{font-family:"IM Fell English",Alegreya,Georgia,serif;font-size:clamp(1.55rem,6.2vw,2.2rem);font-weight:400;font-variant:normal;letter-spacing:0;line-height:1.05;margin:2px 0 6px;color:#1E1712}
.card .pe-bajada{font-family:"IM Fell English",Alegreya,Georgia,serif;font-size:1.02rem;font-style:italic;margin-bottom:8px}
.pe-obras{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;clear:both;font-size:.9rem}
.pe-obras span{display:inline-flex;align-items:center;gap:4px;border:1px solid #8C7A62;padding:2px 6px 2px 2px;background:rgba(255,255,255,.35)}
.pe-obras img{width:26px;height:26px;object-fit:contain}
.card .pe-tambien{font-size:.9rem;margin:8px 0 0}
.pe-cols{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:8px}
@media(min-width:560px){.pe-cols{grid-template-columns:1fr 1fr}.pe-cols>article+article{border-left:1px solid #2A221C;padding-left:10px}}
.pe-cols h4{font-family:"IM Fell English",Alegreya,Georgia,serif;font-weight:400;font-size:1.05rem;line-height:1.15;margin:0 0 4px}
.pe-cols p,.pe-cols li{font-size:.88rem;margin:0 0 6px}
.pe-breves ul{margin:0;padding-left:16px}
.pe-edit{border:1.5px solid #2A221C;padding:6px 10px;margin-bottom:12px;background:rgba(91,52,35,.06)}
.pe-edit b{font-family:Alegreya,Georgia,serif;font-variant:small-caps}
.card .pe-edit p{margin:4px 0 0;font-size:.9rem}
/* Camino de avances y hemeroteca (Crónica). */
ol.avances{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px}
ol.avances li{display:grid;grid-template-columns:34px 1fr;column-gap:8px;align-items:center;padding:4px 6px;border-radius:4px}
ol.avances li small{grid-column:2;color:var(--muted)}
.av-ico{grid-row:span 2;font-size:1.4rem;text-align:center}
.av-ok{background:rgba(94,127,69,.12);border-left:3px solid var(--good)}
.av-prox{opacity:.75;border-left:3px dashed var(--muted)}
.av-prox .av-ico{filter:grayscale(1)}
.av-oculto{opacity:.6}
.av-oculto small{grid-row:1}
.av-hem{display:grid;gap:6px;margin-bottom:12px}
.av-hem .btn{text-align:left}
/* Fase 12: árbol de civismo. */
.civ-puntos{border:1.5px solid var(--rojo);border-radius:6px;padding:6px 10px;background:rgba(212,162,76,.12)}
.law.cerrada{opacity:.82;border-style:dashed}
.law small.pos,.law small.neg{display:block}
/* Fase 12: estandarte del pueblo (rasgos de cada época). */
.estandarte{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0 12px;padding:8px 6px 14px;background:var(--rojo);color:#F7F1E3;clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);box-shadow:inset 0 0 0 2px var(--ocre)}
.estandarte>span{display:grid;justify-items:center;width:76px;text-align:center}
.estandarte i{font-style:normal;font-size:1.5rem;line-height:1.2;background:#F7F1E3;border-radius:50%;width:38px;height:38px;display:grid;place-items:center}
.estandarte small{font-size:.7rem;line-height:1.1;margin-top:3px}
/* Fase 13: la carta de una familia: papel con renglones, letra cursiva y firma. */
.card.carta{background:#F4ECD8;background-image:repeating-linear-gradient(180deg,transparent 0 27px,rgba(62,126,156,.16) 27px 28px),var(--muro-cal);animation:carta-llega .5s ease-out both}
@keyframes carta-llega{from{transform:translateY(16px) rotate(-1.2deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.card.carta{animation:none}}
.carta-cab{display:flex;justify-content:space-between;gap:8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:4px}
.carta-texto p{font-family:Alegreya,Georgia,serif;font-style:italic;font-size:1.08rem;line-height:28px;margin:0 0 6px;color:#2A221C}
.carta-texto .firma{text-align:right;font-weight:700}
.carta-objeto{display:flex;gap:10px;align-items:flex-start;border:1.5px dashed var(--siena);border-radius:6px;padding:8px;margin-bottom:12px;background:rgba(255,255,255,.35)}
.carta-objeto .big-emo{font-size:2rem;line-height:1}
.carta-objeto small{display:block;margin-top:3px}
/* Fase 13: álbum de las familias. */
details.familia{border:1px solid var(--line);border-radius:6px;padding:6px 10px;margin-bottom:6px;background:rgba(255,255,255,.3)}
details.familia summary{cursor:pointer;list-style-position:inside}
.objetos{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px;margin-bottom:12px}
.objeto{display:grid;justify-items:center;gap:2px;padding:6px 4px;border:1.5px solid var(--siena);border-radius:6px;background:#F4ECD8;color:var(--ink);font:inherit;cursor:pointer}
.objeto span{font-size:1.6rem;line-height:1.1}
.objeto small{font-size:.7rem;line-height:1.15;text-align:center}
.objeto.falta{opacity:.45;border-style:dashed;cursor:default}
/* Fase 15: la pantalla «El mundo» */
canvas.plano{display:block;width:100%;border-radius:10px;border:1px solid #CDBB93;margin:6px 0 8px;cursor:pointer;touch-action:manipulation;image-rendering:auto}
.leyenda-plano{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.78rem;margin:2px 0 6px}.leyenda-plano i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
canvas.mundo{display:block;width:100%;border-radius:10px;border:1px solid #CDBB93;margin:6px 0 8px;cursor:pointer;touch-action:manipulation}
.ficha-lugar{background:rgba(232,220,196,.45);border-radius:10px;padding:8px 10px;margin-bottom:8px}
.ficha-lugar h3{margin-top:0}
.subs .sub.on{outline:2px solid #B08E3A}
/* Pendientes: botón con contador y lista con «Ir» */
.controles button[data-n]:not([data-n=""]){position:relative}
.controles button[data-n]:not([data-n=""])::after{content:attr(data-n);position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#B08E3A;color:#fff;font:700 11px/18px 'Alegreya Sans',system-ui,sans-serif;text-align:center}
.controles button.urgente::after{background:var(--bad)!important}
/* Pendientes: siempre debajo de los indicadores; gris sin pendientes, alerta roja con ellos. */
.fila-pend{display:flex}
.pendb{position:relative;width:38px;height:38px;font-size:18px}
.pendb.vacio{border-color:#9A9288;filter:grayscale(1);opacity:.75}
.pendb[data-n]:not([data-n=""])::after{content:attr(data-n);position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;font:700 11px/18px 'Alegreya Sans',system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px var(--panel)}
.pend{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid rgba(160,140,110,.25)}
.pend .pi{font-size:20px}.pend .pt{font-size:14px;line-height:1.3}
/* Pantallas desplegables */
details.pleg{border:1px solid rgba(160,140,110,.35);border-radius:10px;margin:8px 0;background:rgba(247,241,227,.5)}
details.pleg>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:8px;padding:10px 12px;font:700 15px/1.25 Alegreya,Georgia,serif;color:#5A2A20}
details.pleg>summary::-webkit-details-marker{display:none}
details.pleg>summary::before{content:'▸';color:#B08E3A;transition:transform .2s;display:inline-block}
details.pleg[open]>summary::before{transform:rotate(90deg)}
details.pleg>summary .pl-t{flex:1}
details.pleg>summary .pl-r{font:600 12px/1.2 'Alegreya Sans',system-ui,sans-serif;color:#7A6A58;text-align:right}
details.pleg>summary:focus-visible{outline:2px solid #B08E3A;outline-offset:2px;border-radius:10px}
details.pleg>.pl-c{padding:0 12px 10px}
@media (prefers-reduced-motion:reduce){details.pleg>summary::before{transition:none}}
section.pleg.fija{border:1px solid rgba(160,140,110,.35);border-radius:10px;margin:8px 0;background:rgba(247,241,227,.5)}
section.fija>.fj-h{display:flex;align-items:baseline;gap:8px;padding:10px 12px;font:700 15px/1.25 Alegreya,Georgia,serif;color:#5A2A20}
section.fija>.fj-h .pl-t{flex:1}
section.fija>.fj-h .pl-r{font:600 12px/1.2 'Alegreya Sans',system-ui,sans-serif;color:#7A6A58;text-align:right}
section.fija>.pl-c{padding:0 12px 10px}
.subs.capas{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}.subs.capas .sub{display:block;width:auto;flex:0 0 auto;padding:4px 9px;font-size:.8rem}
.pl-n{flex:none;background:#B6452C;color:#fff;font:700 10px/1 'Alegreya Sans',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border-radius:9px}
.pleg.nuevo{border-color:#B6452C;box-shadow:0 0 0 1px rgba(182,69,44,.25)}
.dk{position:relative}.dk.nuevo::after{content:'';position:absolute;top:4px;right:calc(50% - 20px);width:9px;height:9px;border-radius:50%;background:#B6452C;box-shadow:0 0 0 2px var(--bg,#F7F1E3)}
.pe-cifras{border-top:1.5px solid #2A221C;border-bottom:1.5px solid #2A221C;padding:6px 2px;margin:0 0 12px}.pe-cifras b{font-family:Alegreya,Georgia,serif;font-variant:small-caps}.pe-cifras ul{margin:4px 0 0;padding-left:0;list-style:none;font-size:.9rem}
.hud{flex-direction:column;gap:3px}.hudf{display:flex;flex-wrap:wrap;gap:4px;width:100%}.hud>.pill{width:fit-content}
.ic-mat{font-size:15px;line-height:1;width:21px;text-align:center}
.mat-fila{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0}.mat-fila small{color:var(--muted)}
@media (max-width:520px){.hudf{flex-wrap:nowrap}.hud{flex-direction:column}}
.hito-tag{display:inline-block;background:#5B3423;color:#F7F1E3;font:700 11px/1 'Alegreya Sans',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:9px;margin:2px 0 4px}
.historia-real{border-left:3px solid #B08E3A;background:rgba(176,142,58,.1);padding:6px 10px;margin:8px 0;font-size:.9rem;border-radius:0 8px 8px 0}.historia-real b{font-variant:small-caps;color:#5A2A20}
.rapida-ic{font-size:2.6rem;text-align:center}.rapida-quien{text-align:center;font:700 .95rem 'Alegreya Sans',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#7A5A38;margin-bottom:4px}
.rapida-texto{text-align:center;font-size:1.15rem;line-height:1.35;margin:8px 4px 14px}.rapida-ops{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rapida-op{text-align:center;padding:14px 8px;min-height:64px}
.placa{display:block;border:1.5px solid #8C7A62;background:rgba(241,228,196,.55);border-radius:6px;padding:6px 10px;font-size:.88rem;line-height:1.35}.placa b{font-variant:small-caps;color:#5A2A20;margin-right:4px}
.vig-grabado{border-radius:4px;filter:sepia(.15);box-shadow:0 1px 3px rgba(60,40,20,.35)}
.alm{margin:4px 0 8px;padding-left:18px;font-size:.92em}.alm li{margin:3px 0}
.verso{margin:6px 0 10px;padding:6px 12px;border-left:3px solid #8a6a3b;font-family:'IM Fell English','Alegreya',serif;font-style:italic;opacity:.9}
.verso-placa{display:block;margin-top:4px;font-size:.92em;opacity:.85}
/* Letra más grande en el celular (pedido de Juan): textos de las tarjetas, opciones y notas. */
@media (max-width:520px){
  .card{font-size:1.1rem;line-height:1.4}
  .card .small,.small{font-size:.98rem}
  .opt{font-size:1.08rem}.opt small{font-size:.95rem}
  .ficha{font-size:1.02rem}.ficha .aporte,.ficha .especial{font-size:.98rem}
  .carta-texto,.rapida-texto,.verso{font-size:1.1rem}
  .phil,.historia-real,.porque-afecta{font-size:1.02rem}
  .chip{font-size:.95rem}
}
.vig-foto{display:block;width:100%;aspect-ratio:900/330;object-fit:cover;border-radius:12px;margin:0 0 8px;box-shadow:0 2px 8px rgba(40,25,10,.25);background:#e6d8b8}
.vig-foto.vig-carta{aspect-ratio:2/1}