/* FicVault · inicio, segunda parte (fv-home-demos.css): todo lo que está debajo de la primera pantalla.
   Se carga sin frenar el primer dibujo de la portada (ver home.html). Lo de arriba de la página va en fv-home.css.
   Primero las secciones (Así funciona, Lo que ya puedes hacer, Para quien escribe, Qué hay en la beta, cierre);
   después las demos animadas (solo CSS; fv-home-demos.js las enciende al verse y las repite al tocar). */
.hm-head{max-width:640px}
.hm-a{color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
.hm-a .fv-ic{width:16px;height:16px;vertical-align:-3px}
/* --- 2. Así funciona: la escena (18 s, una sola duración maestra --d) ---
   Un lienzo de 800 × 600 (celular: 400 × 600) que se achica entero con --k (lo calcula fv-home-demos.js; «lz» = lienzo).
   Tramos: 1) 0–28 % AO3 → estante · 2) 28–67 % Traducir → barra y bolsa · 3) 67–100 % Leer → lector. */
.hm-como{padding-top:16px;padding-bottom:128px}
.hm-esc{--d:18s;--k:1;max-width:800px;margin:48px auto 0}
.hm-esc .hm-esc-st{aspect-ratio:4/3;max-width:none;margin:0;border-radius:22px}
[data-theme="dark"] .hm-esc .hm-esc-st{background:var(--card)}
.hm-esc .lz{position:absolute;left:0;top:0;display:block;width:800px;height:600px;transform:scale(var(--k));transform-origin:0 0;text-align:left;--lx:-170px;--ly:0px;--fx:363px;--fy:-71px}
:where(.hm-esc .lz span){display:block}
.hm-esc .ao3{position:absolute;left:24px;top:64px;width:300px;padding:18px 20px 20px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.hm-esc .ao3 .k{font:700 10px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hm-esc .ao3 .ti{margin-top:12px;font:600 26px/1.1 'Cormorant Garamond',Georgia,serif}
.hm-esc .ao3 .au{margin-top:2px;font:italic 400 14px/1.4 Lora,Georgia,serif;color:var(--muted)}
.hm-esc .ao3 .mt{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font:500 12px/1.3 Inter,system-ui,sans-serif;color:var(--muted)}
.hm-esc .ao3 .dl{position:relative;display:inline-flex;align-items:center;height:34px;margin-top:14px;padding:0 14px;border:1px solid var(--line);border-radius:8px;font:600 13px/1 Inter,system-ui,sans-serif}
.hm-esc .ao3 .dd{position:absolute;left:20px;top:178px;z-index:2;width:132px;padding:5px;border:1px solid var(--line);border-radius:10px;background:var(--card);box-shadow:var(--shadow-card);opacity:0}
.hm-esc .ao3 .dd>span{position:relative;height:28px;padding:0 10px;border-radius:6px;font:500 13px/28px Inter,system-ui,sans-serif}
.hm-esc .file{position:absolute;left:180px;top:280px;z-index:3;display:flex;align-items:center;gap:7px;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);box-shadow:var(--shadow-card);font:600 12px/1 Inter,system-ui,sans-serif;white-space:nowrap;opacity:0}
.hm-esc .file .fv-ic{width:15px;height:15px;color:var(--ink)}
.hm-esc .lib{position:absolute;left:348px;top:40px;width:428px;height:520px;border:1px solid var(--line);border-radius:18px;background:var(--bg)}
.hm-esc .lib .h{position:absolute;left:20px;top:16px;font:500 24px/1.1 'Cormorant Garamond',Georgia,serif}
.hm-esc .fv-bagcard{position:absolute;left:20px;top:64px;width:180px}
.hm-esc .fv-bagcard .v{display:grid}
.hm-esc .fv-bagcard .v>span{grid-area:1/1}
.hm-esc .fv-bagcard .fv-bar i{width:100%}
.hm-esc .fv-bagcard .p{font-size:12px;line-height:1.45;color:var(--muted)}
.hm-esc .bk{position:absolute;left:224px;top:64px;width:180px;opacity:0}
.hm-esc .fv-cover{position:relative}
.hm-esc .fv-cover .fv-badge{position:absolute;top:10px;left:14px;z-index:2;display:inline-flex}
.hm-esc .fv-meta>.m{flex:1;min-width:0}
.hm-esc .fv-cover .b2{opacity:0}
.hm-esc .fv-plate{display:flex;opacity:0}
.hm-esc .fv-plate>span{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1;min-height:40px;padding:0 10px;border-radius:99px;font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.hm-esc .fv-plate>.ic-only{flex:none;width:40px;padding:0}
.hm-esc .fv-plate .fv-ic{width:18px;height:18px}
.hm-esc .fv-trans{display:flex;margin-top:10px;opacity:0}
.hm-esc .fv-trans .lbl{display:block}
.hm-esc .pc{display:inline-grid}
.hm-esc .pc>span{grid-area:1/1}
.hm-esc .fv-trans .fv-bar i{width:0}
.hm-esc .p1,.hm-esc .p2,.hm-esc .v1,.hm-esc .v2{opacity:0}
.hm-esc .veil{position:absolute;inset:0;z-index:4;background:var(--veil);opacity:0}
.hm-esc .fv-win{position:absolute;left:50%;top:50%;z-index:5;--ws:.84;transform:translate(-50%,-50%) scale(var(--ws));opacity:0;animation:none}
.hm-esc .w-tr{--w:540px;--ws:.68}
.hm-esc .w-tr .fv-seg{display:flex}
.hm-esc .w-tr .fv-seg>span{display:flex;flex:1;align-items:center;justify-content:center;min-height:40px;border-radius:99px;color:var(--muted);font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.hm-esc .w-tr .fv-seg>.on{background:var(--pri);color:var(--on-pri)}
.hm-esc .pg8{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px;padding:12px 16px;border:1px solid var(--line);border-radius:16px}
.hm-esc .pg8 b{display:grid;place-items:center;width:56px;height:34px;border:1px solid var(--line);border-radius:10px;font:600 15px/1 Inter,system-ui,sans-serif}
.hm-esc .pg8 .rg{grid-column:1/-1;height:4px;border-radius:2px;background:var(--line)}
.hm-esc .pg8 .rg i{display:block;width:37%;height:100%;border-radius:2px;background:var(--pri)}
.hm-esc .w-tr .fv-tr-resumen{display:block}
.hm-esc .w-tr .fv-fld .fv-help{display:block;margin:6px 0 0}
.hm-esc .w-tr .fv-tr-mas{display:block}
.hm-esc .w-tr .fv-tr-mas .sm{display:flex;align-items:center;gap:8px;min-height:40px;font:500 14px/1.2 Inter,system-ui,sans-serif;color:var(--muted)}
.hm-esc .w-tr .fv-tr-mas .sm .fv-ic{width:18px;height:18px}
.hm-esc .w-le{--w:480px;--ws:.9}
.hm-esc .fv-win .fv-wb{overflow:visible}
.hm-esc .fv-sel{display:flex;padding-right:14px}
.hm-esc .fv-langs .fv-ic{width:18px;height:18px}
.hm-esc .fv-btn,.hm-esc .fv-opt{position:relative}
.hm-esc .lec{position:absolute;inset:0;z-index:6;background:#E2D8C5;color:#1F1D1B;opacity:0}
.hm-esc .lec .bar{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 28px;font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#5C554B}
.hm-esc .lec .ttl{display:flex;align-items:center;gap:10px;color:#1F1D1B}
.hm-esc .lec .ver{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(31,29,27,.35);font:500 12px/1 Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none}
.hm-esc .lec .pgs{position:absolute;left:44px;right:44px;top:56px;bottom:36px;display:grid;grid-template-columns:1fr 1fr;border-radius:6px 8px 8px 6px;box-shadow:0 30px 50px -36px rgba(0,0,0,.6)}
.hm-esc .lec .pg{padding:48px 44px;background:#F1EADD;border-radius:6px 0 0 6px;box-shadow:inset -22px 0 26px -24px rgba(0,0,0,.28)}
.hm-esc .lec .pg.r{padding-top:64px;border-radius:0 8px 8px 0;box-shadow:inset 22px 0 26px -24px rgba(0,0,0,.28)}
.hm-esc .lec .ch{margin-bottom:18px;font:600 30px/1.05 'Cormorant Garamond',Georgia,serif}
.hm-esc .lec .tx{font:400 17px/1.8 Lora,Georgia,serif;-webkit-hyphens:auto;hyphens:auto}
.hm-esc .lec .tx+.tx{text-indent:1.5em}
.hm-esc .tap{position:absolute;left:50%;top:50%;z-index:2;width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid var(--gold);border-radius:50%;background:rgba(197,164,109,.25);opacity:0;pointer-events:none}
/* movimiento: todo comparte --d y --t0 (de dónde arranca: tocar un paso lo cambia) */
.hm-esc.is-live .lz,.hm-esc.is-live .lz *{animation-duration:var(--d);animation-delay:var(--t0,0s);animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.4,0,.2,1)}
.hm-esc.is-live .lz{animation-name:esc-f;animation-timing-function:linear}
.hm-esc.is-live .ao3{animation-name:esc-ao3}
.hm-esc.is-live .dd{animation-name:esc-dd}
.hm-esc.is-live .ep{animation-name:esc-ep}
.hm-esc.is-live .file{animation-name:esc-file}
.hm-esc.is-live .lib{animation-name:esc-lib}
.hm-esc.is-live .bk{animation-name:esc-bk}
.hm-esc.is-live .fv-plate{animation-name:esc-plate}
.hm-esc.is-live .veil{animation-name:esc-veil}
.hm-esc.is-live .w-tr{animation-name:esc-wtr}
.hm-esc.is-live .w-le{animation-name:esc-wle}
.hm-esc.is-live .fv-trans{animation-name:esc-trans}
.hm-esc.is-live .fv-trans .fv-bar i{animation-name:esc-bar}
.hm-esc.is-live .fv-bagcard .fv-bar i{animation-name:esc-bag}
.hm-esc.is-live .p0,.hm-esc.is-live .v0{animation-name:esc-n0}
.hm-esc.is-live .p1,.hm-esc.is-live .v1{animation-name:esc-n1}
.hm-esc.is-live .p2,.hm-esc.is-live .v2{animation-name:esc-n2}
.hm-esc.is-live .b1{animation-name:esc-b1}
.hm-esc.is-live .b2{animation-name:esc-b2}
.hm-esc.is-live .fv-opt.pri{animation-name:esc-opt}
.hm-esc.is-live .lec{animation-name:esc-lec}
.hm-esc.is-live .t1{animation-name:esc-t1}
.hm-esc.is-live .t2{animation-name:esc-t2}
.hm-esc.is-live .t3{animation-name:esc-t3}
.hm-esc.is-live .t4{animation-name:esc-t4}
.hm-esc.is-live .t5{animation-name:esc-t5}
.hm-esc.is-live .t6{animation-name:esc-t6}
@keyframes esc-f{0%{opacity:0}2%,97%{opacity:1}100%{opacity:0}}
@keyframes esc-ao3{0%,28%{opacity:1;transform:none}31%,100%{opacity:0;transform:translateX(-24px)}}
@keyframes esc-dd{0%,6%{opacity:0;transform:translateY(-6px)}7.5%,15%{opacity:1;transform:none}17%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes esc-ep{0%,11.5%{background-color:transparent;box-shadow:none}12.5%,16%{background-color:var(--sunken);box-shadow:inset 0 0 0 1px var(--gold)}17%,100%{background-color:transparent;box-shadow:none}}
@keyframes esc-file{0%,13.5%{opacity:0;transform:none}15%{opacity:1;transform:none}21%{opacity:1;transform:translate(var(--fx),var(--fy)) scale(.7)}23%,100%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.5)}}
@keyframes esc-lib{0%,29%{transform:none}33%,100%{transform:translate(var(--lx),var(--ly))}}
@keyframes esc-bk{0%,20.5%{opacity:0;transform:translateY(12px) scale(.96)}23.5%,100%{opacity:1;transform:none}}
@keyframes esc-plate{0%,25%{opacity:0}26.5%,31%{opacity:1}32.5%,100%{opacity:0}}
@keyframes esc-veil{0%,31%{opacity:0}33%,45%{opacity:1}47%,68.5%{opacity:0}70%,80.5%{opacity:1}82.5%,100%{opacity:0}}
@keyframes esc-wtr{0%,31.5%{opacity:0;transform:translate(-50%,-50%) translateY(8px) scale(calc(var(--ws)*.97))}33.5%,45%{opacity:1;transform:translate(-50%,-50%) scale(var(--ws))}46.5%,100%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--ws)*.97))}}
@keyframes esc-wle{0%,69.5%{opacity:0;transform:translate(-50%,-50%) translateY(8px) scale(calc(var(--ws)*.97))}71.5%,80.5%{opacity:1;transform:translate(-50%,-50%) scale(var(--ws))}82%,100%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--ws)*.97))}}
@keyframes esc-trans{0%,46.5%{opacity:0;transform:translateY(-4px)}48.5%,62%{opacity:1;transform:none}64%,100%{opacity:0;transform:none}}
@keyframes esc-bar{0%,48.5%{width:0}62%,100%{width:5%}}
@keyframes esc-bag{0%,51%{width:100%}53%,56%{width:80%}58%,100%{width:60%}}
@keyframes esc-n0{0%,52%{opacity:1}52.5%,100%{opacity:0}}
@keyframes esc-n1{0%,52%{opacity:0}52.5%,56.5%{opacity:1}57%,100%{opacity:0}}
@keyframes esc-n2{0%,56.5%{opacity:0}57%,100%{opacity:1}}
@keyframes esc-b1{0%,62.5%{opacity:1}63.5%,100%{opacity:0}}
@keyframes esc-b2{0%,62.5%{opacity:0}63.5%,100%{opacity:1}}
@keyframes esc-opt{0%,77.5%{transform:none}78.5%{transform:scale(.98)}80%,100%{transform:none}}
@keyframes esc-lec{0%,81.5%{opacity:0;transform:scale(.97)}84%,100%{opacity:1;transform:none}}
@keyframes esc-t1{0%,4%{opacity:0;transform:scale(.5)}5.5%{opacity:1;transform:scale(1)}7.5%,100%{opacity:0;transform:scale(1.4)}}
@keyframes esc-t2{0%,10%{opacity:0;transform:scale(.5)}11.5%{opacity:1;transform:scale(1)}13.5%,100%{opacity:0;transform:scale(1.4)}}
@keyframes esc-t3{0%,27%{opacity:0;transform:scale(.5)}28.5%{opacity:1;transform:scale(1)}30.5%,100%{opacity:0;transform:scale(1.4)}}
@keyframes esc-t4{0%,42%{opacity:0;transform:scale(.5)}43.5%{opacity:1;transform:scale(1)}45.5%,100%{opacity:0;transform:scale(1.4)}}
@keyframes esc-t5{0%,66.5%{opacity:0;transform:scale(.5)}68%{opacity:1;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.4)}}
@keyframes esc-t6{0%,76%{opacity:0;transform:scale(.5)}77.5%{opacity:1;transform:scale(1)}79.5%,100%{opacity:0;transform:scale(1.4)}}
/* los tres pasos de abajo: el del tramo en curso lleva la barrita dorada que se llena */
.hm-esc-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.hm-esc-tab{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 10px;align-items:start;width:100%;margin:0;padding:16px 14px 18px 12px;border:1px solid transparent;border-radius:16px;background:none;color:var(--text);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.hm-esc-tab .n{font:italic 500 26px/1 'Cormorant Garamond',Georgia,serif;color:var(--gold-ink)}
.hm-esc-tab b{display:block;font:600 21px/1.15 'Cormorant Garamond',Georgia,serif;text-wrap:balance}
.hm-esc-tab small{display:block;margin-top:6px;font:400 15px/1.55 Lora,Georgia,serif;color:var(--muted);text-wrap:pretty}
.hm-esc-tab .bar{position:absolute;left:12px;right:14px;top:0;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}
.hm-esc-tab[aria-selected="true"]{background:var(--card);border-color:var(--line)}
.hm-esc-tab[aria-selected="true"] .bar{transform:scaleX(1)}
.hm-esc.is-live .hm-esc-tab[aria-selected="true"] .bar{animation:hm-esc-bar var(--td,6s) linear both}
@keyframes hm-esc-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hm-esc-tab:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hm-esc-tab:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){
  .hm-esc-tab:hover:not([aria-selected="true"]){background:var(--sunken)}
}
@media (prefers-reduced-motion:reduce){
  /* tres cuadros fijos: la escena queda quieta en el momento del paso elegido (--fz) */
  .hm-esc.is-live .lz,.hm-esc.is-live .lz *{animation-duration:var(--d)!important;animation-delay:var(--fz,-4.32s)!important;animation-iteration-count:1!important;animation-play-state:paused!important}
  .hm-esc.is-live .hm-esc-tab .bar{animation:none!important}
  .hm-esc-tab:active{transform:none}
}
/* --- 3. Lo que ya puedes hacer: 8 tarjetas --- */
.hm-hoy{padding-top:0;padding-bottom:128px}
.hm-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:48px 0 0;padding:0;list-style:none}
.hm-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:24px;align-items:start;padding:28px 28px 30px;border:1px solid var(--line);border-radius:22px;background:var(--card)}
.hm-card .dib{display:flex;align-items:center;justify-content:center;width:96px;min-height:80px}
.hm-card .dib svg{width:var(--dw,72px)!important}
.hm-card h3{font:600 27px/1.1 'Cormorant Garamond',Georgia,serif;letter-spacing:-.004em;text-wrap:balance}
.hm-card p{margin-top:8px;font:400 16px/1.6 Lora,Georgia,serif;color:var(--muted);text-wrap:pretty}
html.fv-has-io .hm-card:nth-child(even){transition-delay:.08s}
/* --- 4. El lector: botones del grupo «Ver: Original · Traducido» (la lógica que muestra una versión u otra está en fv-home.css) --- */
.hm-ver{margin-top:24px}
.hm-vv{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:99px;cursor:pointer;font:600 13px/1 Inter,system-ui,sans-serif;color:var(--muted);transition:color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
#ver-original:checked~.hm-lec-copy label[for="ver-original"],#ver-traducido:checked~.hm-lec-copy label[for="ver-traducido"]{background:var(--pri);border-color:var(--pri);color:var(--on-pri)}
#ver-original:focus-visible~.hm-lec-copy label[for="ver-original"],#ver-traducido:focus-visible~.hm-lec-copy label[for="ver-traducido"]{outline:2px solid var(--focus);outline-offset:2px}
.hm-lec-nota{margin-top:24px;max-width:30em;font:400 16px/1.6 Lora,Georgia,serif;color:var(--muted)}
/* --- 6. Para quien escribe --- */
.hm-autores{padding:96px 0;background:var(--sunken)}
.hm-autores-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.hm-autores-l{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.hm-autores-l li{padding:16px 0;border-top:1px solid var(--line);font:400 17px/1.6 Lora,Georgia,serif;color:var(--text);text-wrap:pretty}
.hm-autores p{margin-top:22px;font-size:16px}
.hm-autores .hm-a{display:inline-flex;align-items:center;gap:6px;min-height:44px}
/* --- 7. Qué hay en la beta y qué viene (solo texto) --- */
.hm-beta{padding-top:128px;padding-bottom:0;scroll-margin-top:72px}
.hm-beta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;margin-top:48px}
.hm-beta-col h3{padding-bottom:14px;border-bottom:1px solid var(--line);font:600 29px/1.1 'Cormorant Garamond',Georgia,serif}
.hm-beta-si,.hm-beta-luego{margin:0;padding:0;list-style:none}
.hm-beta-si li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font:400 16.5px/1.55 Lora,Georgia,serif;text-wrap:pretty}
.hm-beta-si .fv-ic{width:18px;height:18px;margin-top:4px;color:var(--good)}
.hm-beta-luego{counter-reset:luego}
.hm-beta-luego li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--line);font:400 16.5px/1.55 Lora,Georgia,serif;color:var(--muted);counter-increment:luego;text-wrap:pretty}
.hm-beta-luego li::before{content:counter(luego);position:absolute;left:0;top:13px;font:italic 500 22px/1 'Cormorant Garamond',Georgia,serif;color:var(--gold-ink)}
.hm-beta-luego b{display:block;font:600 21px/1.2 'Cormorant Garamond',Georgia,serif;color:var(--text)}
.hm-beta-nota{margin-top:18px;font:italic 400 16.5px/1.55 Lora,Georgia,serif;color:var(--muted)}
html.fv-has-io .hm-beta-col+.hm-beta-col{transition-delay:.08s}
@media (min-width:860px) and (max-width:1100px){
  .hm-card{grid-template-columns:72px minmax(0,1fr);gap:18px;padding:24px}
  .hm-card .dib{width:72px}
  .hm-beta-grid,.hm-autores-in{gap:40px}
}
@media (max-width:859px){
  .hm-como{padding-top:0;padding-bottom:88px}
  /* celular: el escenario es más alto (lienzo de 400 × 600) y los pasos van uno debajo del otro */
  .hm-esc{margin-top:32px}
  .hm-esc .hm-esc-st{aspect-ratio:2/3;max-width:420px;margin:0 auto}
  .hm-esc .lz{width:400px;--lx:0px;--ly:-104px;--fx:22px;--fy:76px}
  .hm-esc .ao3{left:16px;top:16px;width:368px;padding:14px 16px 16px}
  .hm-esc .ao3 .ti{margin-top:8px;font-size:23px}
  .hm-esc .ao3 .dd{left:16px;top:160px}
  .hm-esc .file{left:150px;top:280px}
  .hm-esc .lib{left:16px;top:208px;width:368px;height:480px}
  .hm-esc .lib .h{left:16px;top:12px;font-size:21px}
  .hm-esc .fv-bagcard{left:16px;top:52px;width:158px;padding:12px}
  .hm-esc .bk{left:202px;top:52px;width:134px}
  .hm-esc .w-tr{--ws:.66}
  .hm-esc .w-le{--ws:.76}
  .hm-esc .lec .bar{padding:0 16px}
  .hm-esc .lec .pgs{left:16px;right:16px;top:56px;bottom:20px;grid-template-columns:minmax(0,1fr)}
  .hm-esc .lec .pg{border-radius:6px 8px 8px 6px;box-shadow:none;padding:32px 26px}
  .hm-esc .lec .pg.r{display:none}
  .hm-esc-tabs{grid-template-columns:minmax(0,1fr);gap:6px;margin-top:16px}
  .hm-esc-tab small{font-size:14.5px}
  .hm-hoy{padding-bottom:88px}
  .hm-cards{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:32px}
  .hm-card{grid-template-columns:56px minmax(0,1fr);gap:16px;padding:22px 20px 24px}
  .hm-card .dib{width:56px;min-height:56px}
  .hm-card .dib svg{width:calc(var(--dw,72px)*.72)!important}
  .hm-card h3{font-size:25px}
  .hm-autores{padding:72px 0}
  .hm-autores-in{grid-template-columns:minmax(0,1fr);gap:24px}
  .hm-beta{padding-top:88px}
  .hm-beta-grid{grid-template-columns:minmax(0,1fr);gap:48px;margin-top:32px}
}
/* ===== Demos chicas de «Lo que ya puedes hacer» (las 4 tarjetas con data-loop) =====
   Cada una dura 6–8 s (--d) y corre solo mientras su tarjeta se ve (fv-home-demos.js, una por tarjeta).
   Están pensadas para un escenario de unos 500 × 310 px; si la tarjeta es más angosta se achican enteras (zoom). */
.hm-card[data-loop]{grid-template-columns:minmax(0,1fr);gap:18px}
.hm-card .hm-demo{min-width:0}
.hm-stage{display:block;position:relative;width:100%;aspect-ratio:16/10;margin:0;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--sunken);color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--t-base,.2s) var(--ease-out,ease),border-color var(--t-base,.2s) var(--ease-out,ease)}
[data-theme="dark"] .hm-stage{background:var(--bg)}
.hm-stage:active{transform:scale(.985)}
.hm-stage::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 80% at 50% 110%,rgba(197,164,109,.18),transparent 60%);pointer-events:none}
.dm{position:absolute;inset:0;display:block;opacity:.55;--d:7s;transition:opacity .3s cubic-bezier(.16,1,.3,1)}
.hm-demo.is-live .dm{opacity:1}
.hm-demo.is-live .dm{animation:dm-fade var(--d) linear infinite}
.hm-demo.is-live .dm *{animation-duration:var(--d);animation-timing-function:cubic-bezier(.4,0,.2,1);animation-iteration-count:infinite;animation-fill-mode:both}
@keyframes dm-fade{0%{opacity:0}4%{opacity:1}97%{opacity:1}100%{opacity:0}}
.dm .bk{position:absolute;display:block;border-radius:2px 4px 4px 2px;box-shadow:var(--shadow-cover)}
.dm .bk .sp{position:absolute;left:0;top:0;bottom:0;width:7px;background:rgba(0,0,0,.22);border-radius:2px 0 0 2px}
.hm-stage:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .hm-stage:hover{border-color:var(--gold)}
}

/* --- 3. Sin conexión --- */
.dm-off{--d:8s}
.dm-off .ph{position:absolute;left:50%;top:28px;bottom:28px;width:150px;padding:10px 14px 0;border:1px solid var(--line);border-radius:22px;background:var(--bg);transform:translateX(-50%);overflow:hidden;box-shadow:var(--shadow-card)}
.dm-off .bar{display:flex;align-items:center;justify-content:space-between;height:14px;font:600 9px/1 Inter,system-ui,sans-serif;color:var(--muted)}
.dm-off .wifi{position:relative;display:block;width:14px;height:14px;color:var(--text)}
.dm-off .wifi svg{display:block;width:100%;height:100%;overflow:visible}
.dm-off .wifi .x{transform:scale(0);transform-origin:50% 50%}
.dm-off .wifi .w1,.dm-off .wifi .w2,.dm-off .wifi .w3{opacity:1}
.hm-demo.is-live .dm-off .wifi .x{animation-name:dm-x}
.hm-demo.is-live .dm-off .wifi .w1,.hm-demo.is-live .dm-off .wifi .w2,.hm-demo.is-live .dm-off .wifi .w3{animation-name:dm-w}
@keyframes dm-x{0%,38%{transform:scale(0)}42%,74%{transform:scale(1)}78%,100%{transform:scale(0)}}
@keyframes dm-w{0%,38%{opacity:1}42%,74%{opacity:.3}78%,100%{opacity:1}}
.dm-off .pg{display:block;margin-top:22px;height:calc(100% - 70px);overflow:hidden;text-align:left}
.dm-off .pg .txt{display:block}
.dm-off .pg b{display:block;margin-bottom:10px;font:600 15px/1.1 'Cormorant Garamond',Georgia,serif;color:var(--text)}
.dm-off .pg i{display:block;height:4px;margin:0 0 7px;border-radius:2px;background:var(--text);opacity:.26}
.dm-off .pg i:nth-child(4n+1){width:92%}.dm-off .pg i:nth-child(4n+2){width:100%}.dm-off .pg i:nth-child(4n+3){width:84%}.dm-off .pg i:nth-child(4n){width:70%;margin-bottom:12px}
.hm-demo.is-live .dm-off .pg .txt{animation-name:dm-pg;animation-timing-function:linear}
@keyframes dm-pg{0%,30%{transform:none}80%,100%{transform:translateY(-54px)}}
.dm-off .pr{position:absolute;left:14px;right:14px;bottom:10px;height:4px;border-radius:2px;background:var(--line)}
.dm-off .pr i{display:block;height:100%;width:34%;border-radius:inherit;background:var(--gold)}
.hm-demo.is-live .dm-off .pr i{animation-name:dm-pr;animation-timing-function:linear}
@keyframes dm-pr{0%,30%{width:34%}80%,100%{width:43%}}
.dm-off .t2{color:var(--muted)}
.hm-demo.is-live .dm-off .t1{animation-name:dm-t-a}
.hm-demo.is-live .dm-off .t2{animation-name:dm-t-b}
.hm-demo.is-live .dm-off .t3{animation-name:dm-t-c}
@keyframes dm-t-a{0%,10%{opacity:0;transform:translate(-50%,8px)}15%,30%{opacity:1;transform:translate(-50%,0)}35%,100%{opacity:0;transform:translate(-50%,-8px)}}
@keyframes dm-t-b{0%,42%{opacity:0;transform:translate(-50%,8px)}47%,66%{opacity:1;transform:translate(-50%,0)}71%,100%{opacity:0;transform:translate(-50%,-8px)}}
@keyframes dm-t-c{0%,80%{opacity:0;transform:translate(-50%,8px)}85%,100%{opacity:1;transform:translate(-50%,0)}}


@media (prefers-reduced-motion:reduce){
  /* sin movimiento: se ve el último cuadro de cada demo (tokens.css deja las animaciones en su último cuadro) */
  .dm,.hm-demo.is-live .dm{animation:none;opacity:1;transition:none}
  .hm-stage:active{transform:none}
}
@media (min-width:860px) and (max-width:979px){
  .hm-card .dm{zoom:.66}
}
@media (min-width:980px) and (max-width:1100px){
  .hm-card .dm{zoom:.78}
}
@media (max-width:859px){
  .hm-card .hm-stage{aspect-ratio:4/3}
  .hm-card .dm{zoom:.75}
}

/* ===== Avisos flotantes dentro de las demos ===== */
.dm .toast{position:absolute;left:50%;top:50%;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--glass-line,var(--line));border-radius:99px;background:var(--glass,var(--card));-webkit-backdrop-filter:blur(var(--blur,10px));backdrop-filter:blur(var(--blur,10px));box-shadow:var(--shadow-pop,var(--shadow-card));font:600 12px/1.2 Inter,system-ui,sans-serif;color:var(--text);white-space:nowrap;opacity:0;transform:translate(-50%,8px)}
.dm .toast .fv-ic{width:14px;height:14px;color:var(--good)}

/* --- 7. Seguimiento de AO3 --- */
.dm-ao3{--d:8s}
.dm-ao3 .card{position:absolute;left:24px;right:24px;top:calc(50% - 104px);display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.dm-ao3 .card .bk{position:relative;flex:none;width:44px;height:64px;padding:9px 5px 5px 9px;background:linear-gradient(170deg,#1E2B3A,#34483D);color:#F2E6C8;text-align:left}
.dm-ao3 .card .bk b{display:block;font:600 8px/1.15 'Cormorant Garamond',Georgia,serif}
.dm-ao3 .card .meta{min-width:0;text-align:left}
.dm-ao3 .card .meta b{display:block;font:600 16px/1.1 'Cormorant Garamond',Georgia,serif;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-ao3 .card .meta small{display:block;margin-top:3px;font:500 11px/1.2 Inter,system-ui,sans-serif;color:var(--muted)}
.dm-ao3 .badge{position:absolute;left:12px;top:-8px;z-index:2;padding:4px 8px;border:1px solid var(--gold);border-radius:99px;background:var(--gold);color:#1F1D1B;font:700 10px/1 Inter,system-ui,sans-serif;letter-spacing:.04em;opacity:0;transform:scale(.6)}
.hm-demo.is-live .dm-ao3 .badge{animation-name:dm-ao3-badge;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
@keyframes dm-ao3-badge{0%,66%{opacity:0;transform:scale(.6)}72%,100%{opacity:1;transform:none}}
.dm-ao3 .row{position:absolute;left:24px;right:24px;display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);font:500 12.5px/1.2 Inter,system-ui,sans-serif;color:var(--text);text-align:left}
.dm-ao3 .row .fv-ic{flex:none;width:16px;height:16px;color:var(--ink)}
.dm-ao3 .row>span:nth-child(2){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-ao3 .r1{top:calc(50% - 10px)}
.dm-ao3 .r2{top:calc(50% + 38px);opacity:0;transform:translateY(6px)}
.dm-ao3 .r3{top:calc(50% + 38px);opacity:0;transform:translateY(6px);border-color:var(--gold);color:var(--gold-ink)}
.dm-ao3 .r3 .fv-ic{color:var(--gold-ink)}
.dm-ao3 .sw{position:relative;flex:none;width:34px;height:20px;border-radius:99px;background:var(--line);transition:none}
.dm-ao3 .sw i{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.hm-demo.is-live .dm-ao3 .sw{animation-name:dm-ao3-sw}
.hm-demo.is-live .dm-ao3 .sw i{animation-name:dm-ao3-swi}
@keyframes dm-ao3-sw{0%,16%{background:var(--line)}22%,100%{background:var(--good)}}
@keyframes dm-ao3-swi{0%,16%{transform:none}22%,100%{transform:translateX(14px)}}
.dm-ao3 .spin{flex:none;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%}
.hm-demo.is-live .dm-ao3 .spin{animation-name:dm-ao3-spin;animation-timing-function:linear}
@keyframes dm-ao3-spin{from{transform:rotate(0)}to{transform:rotate(1800deg)}}
.hm-demo.is-live .dm-ao3 .r2{animation-name:dm-ao3-r2}
.hm-demo.is-live .dm-ao3 .r3{animation-name:dm-ao3-r3}
@keyframes dm-ao3-r2{0%,26%{opacity:0;transform:translateY(6px)}32%,60%{opacity:1;transform:none}66%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes dm-ao3-r3{0%,68%{opacity:0;transform:translateY(6px)}74%,100%{opacity:1;transform:none}}


/* ===== Rótulo que va cambiando arriba del escenario (lo usan «Portada, partes y PDF» y «Tu biblioteca, a tu gusto») ===== */
.dm .cap{position:absolute;left:50%;top:16px;padding:6px 12px;border:1px solid var(--line);border-radius:99px;background:var(--card);font:600 11.5px/1 Inter,system-ui,sans-serif;color:var(--text);white-space:nowrap;opacity:0;transform:translate(-50%,6px)}

/* --- Portada, partes y PDF: portada nueva → separar en dos partes (7 s) --- */
.dm-lib{--d:7s;--bw:118px;--bh:172px}
.hm-demo.is-live .dm-lib .c1{animation-name:dm-lib-c1}
.hm-demo.is-live .dm-lib .c2{animation-name:dm-lib-c2}
@keyframes dm-lib-c1{0%,4%{opacity:0;transform:translate(-50%,6px)}8%,40%{opacity:1;transform:translate(-50%,0)}44%,100%{opacity:0;transform:translate(-50%,-6px)}}
@keyframes dm-lib-c2{0%,44%{opacity:0;transform:translate(-50%,6px)}48%,100%{opacity:1;transform:translate(-50%,0)}}
.dm-lib .h{left:calc(50% - var(--bw)/2);top:calc(50% - var(--bh)/2 + 4px);width:var(--bw);height:var(--bh);padding:22px 14px 14px 20px;color:#F2E6C8;text-align:left;overflow:hidden}
.dm-lib .h .cv{position:absolute;inset:0;border-radius:inherit}
.dm-lib .h .cv.a{background:radial-gradient(circle at 68% 28%,#F2E6C8 0 10%,rgba(242,230,200,0) 11%),linear-gradient(170deg,#1E2B3A,#34483D)}
.dm-lib .h .cv.b{background:radial-gradient(circle at 50% 100%,#F2A65A 0 26%,rgba(242,166,90,0) 27%),linear-gradient(180deg,#7A2E3A,#3B1F2B);clip-path:inset(0 0 100% 0)}
.dm-lib .h b{position:relative;display:block;font:600 17px/1.1 'Cormorant Garamond',Georgia,serif}
.dm-lib .h .sp{z-index:1}
.dm-lib .h.l{clip-path:inset(0 50% 0 0)}
.dm-lib .h.r{clip-path:inset(0 0 0 50%)}
.hm-demo.is-live .dm-lib .cv.b{animation-name:dm-lib-cover;animation-timing-function:cubic-bezier(.4,0,.2,1)}
@keyframes dm-lib-cover{0%,10%{clip-path:inset(0 0 100% 0)}26%,100%{clip-path:inset(0 0 0 0)}}
.hm-demo.is-live .dm-lib .h.l{animation-name:dm-lib-l}
.hm-demo.is-live .dm-lib .h.r{animation-name:dm-lib-r}
/* 52–62 %: se separa en dos libros y así queda */
@keyframes dm-lib-l{0%,52%{clip-path:inset(0 50% 0 0);transform:none}62%,100%{clip-path:inset(0 0 0 0);transform:translateX(-74px) scale(.8) rotate(-3deg)}}
@keyframes dm-lib-r{0%,52%{clip-path:inset(0 0 0 50%);transform:none}62%,100%{clip-path:inset(0 0 0 0);transform:translateX(74px) scale(.8) rotate(3deg)}}
.dm-lib .cut{position:absolute;left:50%;top:calc(50% - var(--bh)/2 - 4px);width:0;height:calc(var(--bh) + 16px);border-left:2px dashed var(--gold);transform:scaleY(0);transform-origin:50% 0;opacity:0}
.hm-demo.is-live .dm-lib .cut{animation-name:dm-lib-cut}
@keyframes dm-lib-cut{0%,44%{transform:scaleY(0);opacity:1}52%{transform:scaleY(1);opacity:1}58%,100%{transform:scaleY(1);opacity:0}}
.dm-lib .lb{position:absolute;top:calc(50% + var(--bh)/2 + 14px);width:118px;text-align:center;font:600 12px/1.3 Inter,system-ui,sans-serif;color:var(--muted);opacity:0;transform:translateY(6px)}
.dm-lib .l1{left:calc(50% - 74px - 59px)}
.dm-lib .l2{left:calc(50% + 74px - 59px)}
.hm-demo.is-live .dm-lib .lb{animation-name:dm-lib-lb}
@keyframes dm-lib-lb{0%,62%{opacity:0;transform:translateY(6px)}68%,100%{opacity:1;transform:none}}

/* --- Tu biblioteca, a tu gusto: color → dibujos entre los libros → forma de los libros → fondo rayado (8 s) ---
   Todo está en «Personalizar» de la app (ventana_personalizar.html); no hay estantes de otra madera. */
.dm-pz2{--d:8s}
.hm-demo.is-live .dm-pz2 .c1{animation-name:dm-pz2-c1}
.hm-demo.is-live .dm-pz2 .c2{animation-name:dm-pz2-c2}
.hm-demo.is-live .dm-pz2 .c3{animation-name:dm-pz2-c3}
.hm-demo.is-live .dm-pz2 .c4{animation-name:dm-pz2-c4}
@keyframes dm-pz2-c1{0%,4%{opacity:0;transform:translate(-50%,6px)}8%,22%{opacity:1;transform:translate(-50%,0)}26%,100%{opacity:0;transform:translate(-50%,-6px)}}
@keyframes dm-pz2-c2{0%,28%{opacity:0;transform:translate(-50%,6px)}32%,48%{opacity:1;transform:translate(-50%,0)}52%,100%{opacity:0;transform:translate(-50%,-6px)}}
@keyframes dm-pz2-c3{0%,54%{opacity:0;transform:translate(-50%,6px)}58%,72%{opacity:1;transform:translate(-50%,0)}76%,100%{opacity:0;transform:translate(-50%,-6px)}}
@keyframes dm-pz2-c4{0%,78%{opacity:0;transform:translate(-50%,6px)}82%,100%{opacity:1;transform:translate(-50%,0)}}
.dm-pz2 .wall{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 23px,var(--line) 23px 24px);opacity:0}
.hm-demo.is-live .dm-pz2 .wall{animation-name:dm-pz2-wall}
.hm-demo.is-live @keyframes dm-pz2-wall{0%,80%{opacity:0}86%,100%{opacity:.35}}
.dm-pz2 .plank{position:absolute;left:12%;right:12%;top:calc(50% + 46px);height:7px;border-radius:2px;background:var(--text);opacity:.75;box-shadow:0 10px 16px -8px rgba(0,0,0,.45)}
.dm-pz2 .row{position:absolute;left:12%;right:12%;top:0;height:calc(50% + 46px);display:flex;align-items:flex-end;justify-content:center;gap:9px}
.dm-pz2 .row .bk{position:static;flex:none;width:44px;height:96px;background:#34483D}
.dm-pz2 .row .b2{width:38px;height:78px;background:#8FB39B}
.dm-pz2 .row .b3{width:46px;height:106px}
.dm-pz2 .row .b4{width:40px;height:86px;background:#8FB39B}
.hm-demo.is-live .dm-pz2 .b1{animation-name:dm-pz2-b1}
.hm-demo.is-live .dm-pz2 .b2{animation-name:dm-pz2-b2}
.hm-demo.is-live .dm-pz2 .b3{animation-name:dm-pz2-b3}
.hm-demo.is-live .dm-pz2 .b4{animation-name:dm-pz2-b4}
/* color: bosque → azul (10 %) → ciruela (54 %) → cobre (80 %); forma: a su medida → todos iguales (54 %) */
@keyframes dm-pz2-b1{0%,8%{background:#34483D;height:96px}14%,52%{background:#2E4057;height:96px}58%,78%{background:#54384A;height:92px}84%,100%{background:#7A4A32;height:92px}}
@keyframes dm-pz2-b2{0%,8%{background:#8FB39B;height:78px}14%,52%{background:#9DB8D6;height:78px}58%,78%{background:#D1A9C2;height:92px}84%,100%{background:#E3AE8E;height:92px}}
@keyframes dm-pz2-b3{0%,8%{background:#34483D;height:106px}14%,52%{background:#2E4057;height:106px}58%,78%{background:#54384A;height:92px}84%,100%{background:#7A4A32;height:92px}}
@keyframes dm-pz2-b4{0%,8%{background:#8FB39B;height:86px}14%,52%{background:#9DB8D6;height:86px}58%,78%{background:#D1A9C2;height:92px}84%,100%{background:#E3AE8E;height:92px}}
/* los adornos se apoyan en la tabla: su borde de abajo coincide con el borde de arriba de la tabla, sea cual sea el alto del dibujo */
.dm-pz2 .deco{position:absolute;bottom:calc(50% - 46px);line-height:0;color:var(--ink);opacity:0;transform:translateY(8px) scale(.85);transform-origin:50% 100%}
.dm-pz2 .deco svg{display:block;width:100%;height:auto}
.dm-pz2 .d1{left:calc(50% - 97px - 60px);width:44px}
.dm-pz2 .d2{left:calc(50% + 97px + 14px);width:24px}
.dm-pz2 .d3{left:calc(50% + 97px + 46px);width:34px}
.hm-demo.is-live .dm-pz2 .deco{animation-name:dm-pz2-deco;animation-timing-function:cubic-bezier(.34,1.3,.64,1)}
.dm-pz2 .d2{animation-delay:.35s}
.dm-pz2 .d3{animation-delay:.7s}
@keyframes dm-pz2-deco{0%,30%{opacity:0;transform:translateY(8px) scale(.85)}36%,100%{opacity:1;transform:none}}
.dm-pz2 .chips{position:absolute;left:50%;bottom:18px;display:flex;gap:10px;padding:8px;border:1px solid var(--line);border-radius:99px;background:var(--card);transform:translateX(-50%)}
.dm-pz2 .sw{display:block;width:22px;height:22px;border-radius:50%}
.dm-pz2 .s1{background:linear-gradient(135deg,#34483D 50%,#8FB39B 50%)}
.dm-pz2 .s2{background:linear-gradient(135deg,#2E4057 50%,#9DB8D6 50%)}
.dm-pz2 .s3{background:linear-gradient(135deg,#54384A 50%,#D1A9C2 50%)}
.dm-pz2 .s4{background:linear-gradient(135deg,#7A4A32 50%,#E3AE8E 50%)}
.dm-pz2 .ring{position:absolute;left:5px;top:5px;width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 2px var(--gold)}
.hm-demo.is-live .dm-pz2 .ring{animation-name:dm-pz2-ring}
@keyframes dm-pz2-ring{0%,8%{transform:translateX(0)}14%,52%{transform:translateX(32px)}58%,78%{transform:translateX(64px)}84%,100%{transform:translateX(96px)}}