/* Estilos del portafolio — José Ramírez González
   Incluye modo claro/oscuro (variables CSS), estilo neumórfico y los visores (galería, carrusel, flipbook). */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#dadae4;--ink:#1c1c1e;--mute:#6c6c70;--glass:rgba(255,255,255,.62);--glass2:rgba(255,255,255,.4);
  --line:rgba(255,255,255,.85);--shadow:0 8px 30px rgba(60,60,67,.12);--teal:#007aff;--mint:#34c759;--sun:#ffcc00;
  --b1:#c1dafe;--b2:#dfccf8;--b3:#f4dfc8;--foot:#7d7d83;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121719;--ink:#e8eef0;--mute:#9aa8af;--glass:rgba(255,255,255,.07);--glass2:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.14);--shadow:0 8px 32px rgba(0,0,0,.35);--b1:#14423d;--b2:#232a52;--b3:#3d3a1c;--foot:#232c30;}}
:root[data-theme="dark"]{--bg:#121719;--ink:#e8eef0;--mute:#9aa8af;--glass:rgba(255,255,255,.07);--glass2:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.14);--shadow:0 8px 32px rgba(0,0,0,.35);--b1:#14423d;--b2:#232a52;--b3:#3d3a1c;--foot:#232c30;}
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{font-family:Poppins,system-ui,sans-serif;background:var(--bg);color:var(--ink);font-weight:300;line-height:1.6;min-height:100vh;position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;
  background:radial-gradient(40vw 40vw at 10% 10%,var(--b1),transparent 70%),radial-gradient(45vw 45vw at 90% 30%,var(--b2),transparent 70%),radial-gradient(40vw 40vw at 40% 100%,var(--b3),transparent 70%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;opacity:.18;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.glass{background:var(--glass);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:22px}
.wrap{display:grid;grid-template-columns:500px 1fr;gap:28px;max-width:1380px;margin:0 auto;padding:28px 24px 48px;align-items:start}
aside{position:sticky;top:20px;padding:0 0 18px;background:var(--glass2);border-radius:28px;border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:14px;padding:18px}
.photo{width:100%;min-width:260px;height:260px;border-radius:26px;margin:0 auto;overflow:hidden;display:grid;place-items:center;font-size:56px;font-weight:500;color:var(--teal);letter-spacing:2px;background:linear-gradient(135deg,var(--glass),var(--glass2))}
.photo img{width:100%;height:100%;object-fit:cover;object-position:51% 20%;display:block}
.card{padding:20px 22px}
h1{font-size:1.45rem;font-weight:600;line-height:1.2}
.role{color:var(--teal);font-weight:500;font-size:.8rem;margin:4px 0 10px;letter-spacing:.04em}
.card p{font-size:.84rem;color:var(--mute)}
h2{font-size:.95rem;font-weight:600;margin-bottom:12px;padding-bottom:6px;border-bottom:2px solid var(--mint);display:inline-block}
.skills{display:flex;flex-direction:column;gap:36px}
.grp{display:flex;gap:10px;align-items:stretch}
.gl{writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;flex:none;font-weight:600;font-size:.95rem;letter-spacing:.2em;color:rgba(0,122,255,.1);user-select:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gl{color:rgba(255,255,255,.1)}}
.gi{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 18px}
.sl{display:flex;align-items:center;gap:10px}
.sc{width:66px;flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.sc .sk{width:24px}
.sc b{font-weight:400;font-size:.6rem;line-height:1.2;color:var(--mute)}
.lv span{display:block;font-size:.72rem;color:var(--ink);margin-bottom:5px}
.dots{display:flex;gap:5px}
.dots i{opacity:.8}
.dots i{display:block;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--c);background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.3) 0,rgba(255,255,255,0) 60%)}
.dots i.on{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.38) 0,rgba(255,255,255,0) 55%),radial-gradient(circle at 70% 78%,rgba(0,0,0,.25),rgba(0,0,0,0) 60%),var(--c)}
.sep{grid-column:1/-1;border-top:1px solid transparent;margin:6px 0}
.sep.gap{border-top-color:transparent}
@media (max-width:520px){.gi{grid-template-columns:1fr}}
.contact{order:3;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.sk{aspect-ratio:1;border-radius:7px;display:grid;place-items:center;font-size:.56rem;font-weight:600;background:var(--glass2);border:1px solid var(--line);color:var(--teal);cursor:default}
.sk:hover{background:var(--glass)}
.mini{font-size:.78rem;color:var(--mute);margin-bottom:8px}
.mini b{color:var(--ink);font-weight:500;display:block}
.row{display:contents}
.card:has(.row){display:flex;flex-direction:column}
.row>div:first-child{order:1}
.minis{order:2}
.minis{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.contact a{display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none;font-size:.76rem;padding:6px 0;word-break:break-all}
.contact a:hover{color:var(--teal)}
.contact i{font-style:normal;font-weight:600;font-size:.65rem;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--glass2);border:1px solid var(--line);flex:none;color:var(--teal)}
main{padding:22px 24px 28px;min-height:70vh}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.tab{font:inherit;font-size:.8rem;border:1px solid transparent;background:none;color:var(--mute);padding:6px 14px;border-radius:99px;cursor:pointer;text-align:center;line-height:1.3}
.tab small{display:block;font-size:.68rem;opacity:.8}
.tab:hover{color:var(--ink)}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;font-weight:400}
.tab small{font-weight:300}
.tab[aria-selected="true"]{background:var(--glass);border-color:var(--line);color:var(--ink);font-weight:500;box-shadow:var(--shadow)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stage{position:relative;border-radius:26px;padding:22px 68px;background:var(--glass2);border:1px solid var(--line);display:flex;justify-content:center;margin-bottom:14px}
.item.view{aspect-ratio:9/16;height:min(64vh,600px);max-width:100%;border-radius:20px;display:grid;place-items:center}
.view video,.view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.play{position:relative;z-index:1;width:68px;height:68px;border-radius:50%;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--teal);font-size:1.5rem;cursor:pointer;padding-left:5px;box-shadow:var(--shadow)}
.play:hover{transform:scale(1.06)}
.note{display:none;position:absolute;top:14px;left:14px;right:14px;z-index:1;font-size:.74rem;padding:6px 12px;border-radius:12px;background:var(--glass);border:1px solid var(--line);color:var(--mute)}
.view.on .note{display:block}
.arr{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:var(--teal);font-size:1.1rem;cursor:pointer;box-shadow:var(--shadow)}
.arr:hover{background:var(--glass2)}
.arr.l{left:14px}.arr.r{right:14px}
.arr.x{top:14px;right:14px;transform:none;width:36px;height:36px;font-size:.9rem}
.stage[hidden]{display:none}
button.item{padding:0;font:inherit;cursor:pointer;text-align:left;width:100%;transition:transform .2s}
button.item:hover{transform:translateY(-2px)}
button.item.on{outline:2px solid var(--teal);outline-offset:2px}
@media (max-width:620px){.stage{padding:14px 44px}.arr{width:34px;height:34px}.arr.l{left:5px}.arr.r{right:5px}}
.item{aspect-ratio:4/3;border-radius:16px;position:relative;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(135deg,hsl(var(--h) 32% 85%),hsl(calc(var(--h) + 40) 28% 92%));}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .item{background:linear-gradient(135deg,hsl(var(--h) 30% 24%),hsl(calc(var(--h) + 40) 28% 18%))}}
.item::before{content:"";position:absolute;inset:0;opacity:.35;background:repeating-linear-gradient(45deg,rgba(255,255,255,.5) 0 1px,transparent 1px 12px)}
.item .cap{position:absolute;left:8px;right:8px;bottom:8px;padding:8px 12px;border-radius:12px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);font-size:.76rem;line-height:1.35;color:var(--ink)}
.cap span{display:block;font-size:.66rem;color:var(--mute)}
.item[hidden]{display:none}
footer{background:var(--foot);color:#fff;text-align:center;font-size:.78rem;padding:16px}
@media (max-width:980px){.wrap{grid-template-columns:1fr}aside{position:static}}
@media (max-width:620px){.grid{grid-template-columns:repeat(2,1fr)}.wrap{padding:16px 12px 32px}}
.th{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.item .cap{z-index:2;background:rgba(18,24,28,.5);color:#fff;border-color:rgba(255,255,255,.14)}
.item .cap span{color:rgba(255,255,255,.75)}
.item.view.land{aspect-ratio:16/9;height:auto;width:100%}
.view video{object-fit:contain;background:#000}
.view.land .cap{bottom:auto;top:8px}
.item.view.gal{display:flex;flex-direction:column;gap:32px;padding:22px;overflow-y:auto;aspect-ratio:auto;width:min(100%,580px);height:min(78vh,780px);background:var(--glass2)}
.view.gal img{position:static;height:auto;display:block;width:100%;flex:none;border-radius:12px;box-shadow:var(--shadow)}
.view.gal::before,.view.land::before{display:none}
.bar{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;margin-bottom:22px}
.bar .tabs{margin-bottom:0;flex:1}
.theme{flex:none;position:relative;width:68px;height:34px;padding:0;border-radius:99px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow);cursor:pointer}
.theme svg{position:absolute;top:7px;width:18px;height:18px;z-index:2;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:color .25s}
.theme .mo{left:7px;color:#5856d6}.theme .su{left:41px;color:var(--mute)}
.theme i{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .25s}
.theme[aria-checked="true"] i{transform:translateX(34px)}
.theme[aria-checked="true"] .su{color:#ff9500}
.theme[aria-checked="true"] .mo{color:var(--mute)}
:root[data-theme="dark"] .item:not(.gal){background:linear-gradient(135deg,hsl(var(--h) 30% 24%),hsl(calc(var(--h) + 40) 28% 18%))}
:root[data-theme="dark"] .gl{color:rgba(255,255,255,.1)}
@media (prefers-reduced-motion:reduce){.theme i{transition:none}}
.top{grid-column:1/-1;display:flex;justify-content:flex-end}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--teal:#0a84ff}}
:root[data-theme="dark"]{--teal:#0a84ff}
:root[data-theme="light"] body::after{opacity:.32}
.sc .sk{width:30px;background:none;border:0;border-radius:0}
.sk img{width:100%;height:100%;object-fit:contain;display:block}
:root[data-theme="dark"] .sk img.lt{background:#f1f3f5;border-radius:7px;padding:2px}
.lvl{position:relative;width:96px;height:14px;padding:2.5px;border-radius:99px;background:#eceef2;box-shadow:inset 0 1px 2px rgba(0,0,0,.14),0 1px 0 rgba(255,255,255,.8)}
.lvl::before{content:"";display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ff3b30 0%,#ff9500 28%,#ffd60a 62%,#a8d83a 80%,#34c759 100%)}
.lvl em{position:absolute;top:50%;left:calc(var(--p)*(100% - 17px));width:17px;height:17px;transform:translateY(-50%);border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.28)}
.lvl em::after{content:"";position:absolute;inset:3px;border-radius:50%;border:2.5px solid var(--c);background:#fff}
:root[data-theme="dark"] .lvl{background:#2b3337;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.lv4{display:flex;align-items:center;gap:5px}
.lv4 svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--mute);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-right:3px}
.lv4 i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2);border:1px solid rgba(60,60,67,.16)}
.lv4 i.on{background:rgba(255,255,255,.8);border-color:rgba(60,60,67,.3)}
:root[data-theme="dark"] .lv4 i{border-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] .lv4 i.on{border-color:rgba(255,255,255,.3)}
.view.gal video{position:static;display:block;flex:none;align-self:center;border-radius:12px;box-shadow:var(--shadow);background:#000;object-fit:contain}
.view.gal video.pt{height:min(70vh,560px);width:auto;max-width:100%}
.view.gal video.ls{width:100%;height:auto}
.crumb{display:flex;align-items:center;gap:7px;margin-bottom:14px;font-size:.59rem;color:var(--mute)}
.crumb[hidden]{display:none}
.crumb{border-top:1px solid rgba(60,60,67,.25);padding-top:14px}
.crumb span,.crumb em{font-style:italic}
.crumb em{opacity:.6}
.crumb span{padding:4px 10px;border-radius:99px}
.crumb span.cur{background:var(--glass);color:var(--ink);font-weight:500}
:root[data-theme="dark"] .crumb{border-top-color:rgba(255,255,255,.2)}
.crumb button{font:inherit;border:0;background:none;color:var(--mute);padding:4px 10px;border-radius:99px;cursor:pointer}
.crumb button:hover{color:var(--teal)}
.item.fol{box-shadow:5px 5px 0 -1px var(--glass),10px 10px 0 -2px var(--glass2)}
.stage{flex-direction:column;align-items:center;gap:12px}
.stage:has(.gth:not(:empty)) .arr:not(.x){top:calc(50% - 32px)}
.item.view.gal{display:flex;align-items:center;justify-content:center;overflow:hidden;padding:14px;gap:0;height:min(60vh,500px);width:min(100%,580px)}
.view.gal img,.view.gal video{position:static;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:none;flex:none;align-self:auto}
.view.gal video{background:#000}
.gth{display:flex;gap:8px;max-width:100%;overflow-x:auto;padding:5px 3px}
.gth:empty{display:none}
.gt{position:relative;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:8px;overflow:hidden;cursor:pointer;opacity:.6;background:var(--glass2);transition:opacity .2s}
.gt img{width:100%;height:100%;object-fit:cover;display:block}
.gt b{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.6rem;background:rgba(0,0,0,.28)}
.gt:hover{opacity:.9}
.gt.on{opacity:1;outline:2px solid var(--teal);outline-offset:1px}
.gcap{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:3;max-width:calc(100% - 24px);padding:6px 16px;border-radius:99px;background:rgba(18,24,28,.5);color:#fff;font-size:.72rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gcap.top{bottom:auto;top:10px}
.gname{position:relative;width:100%;height:16px;margin-top:-8px}
.gname:empty{display:none}
.gname span{position:absolute;top:0;transform:translateX(-50%);width:max-content;max-width:110px;text-align:center;white-space:normal;font-size:.53rem;line-height:1.3;color:var(--ink);padding:0}
button.item{container-type:inline-size}
.item .cap{font-size:clamp(.56rem,5.4cqw,.76rem);overflow-wrap:anywhere;hyphens:auto}
.item .cap span{font-size:.86em}
.view.car::before{display:none}
.item.view.car{display:block;aspect-ratio:1/1;height:auto;width:min(100%,500px);padding:0;overflow:hidden;border-radius:18px;background:var(--glass2)}
.ctrack{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.ctrack::-webkit-scrollbar{display:none}
.view .ctrack img{position:static;flex:none;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;user-select:none}
.cnt{position:absolute;top:10px;right:10px;z-index:3;padding:3px 10px;border-radius:99px;background:rgba(18,24,28,.5);color:#fff;font-size:.66rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.gth.dots{justify-content:center;gap:7px;padding:8px}
.dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--mute);opacity:.35;cursor:pointer;transition:opacity .2s,transform .2s}
.dot.on{opacity:1;background:var(--teal);transform:scale(1.3)}
/* ===== ESTILO NEUMÓRFICO ===== */
:root[data-theme]{--line:transparent;--shadow:7px 7px 16px var(--nd),-7px -7px 16px var(--nl);--shadow-s:4px 4px 9px var(--nd),-4px -4px 9px var(--nl);--neo-in:inset 6px 6px 12px var(--nd),inset -6px -6px 12px var(--nl);--neo-in-s:inset 3px 3px 6px var(--nd),inset -3px -3px 6px var(--nl)}
:root[data-theme="light"]{--bg:#e0e0e0;--nl:rgba(255,255,255,.8);--nd:rgba(120,120,125,.34);--glass:#e0e0e0;--glass2:#e0e0e0;--ink:#4a4a4f;--mute:#7b7b82;--teal:#588dc8;--mint:#588dc8;--foot:#a9acb3}
:root[data-theme="dark"]{--bg:#2a2d33;--nl:rgba(255,255,255,.055);--nd:rgba(0,0,0,.5);--glass:#2a2d33;--glass2:#2a2d33;--ink:#eceff3;--mute:#9aa1ab;--teal:#22d0e3;--mint:#22d0e3;--foot:#1f2126}
body::before{background:none}
:root[data-theme="light"] body::after{opacity:.14}
:root[data-theme="dark"] body::after{opacity:.08}
.glass,aside,.theme,.crumb span{backdrop-filter:none;-webkit-backdrop-filter:none}
.glass{background:var(--bg);border:0;box-shadow:var(--shadow)}
aside{background:none;border:0;box-shadow:none}
.photo{padding:8px}.photo img{border-radius:20px}
.stage{background:var(--bg);border:0;box-shadow:var(--neo-in)}
.item{border:0;box-shadow:var(--shadow-s)}
.item.fol{box-shadow:5px 5px 0 -1px var(--bg),8px 8px 10px -1px var(--nd),-4px -4px 9px var(--nl)}
.tab[aria-selected="true"]{background:var(--bg);box-shadow:var(--neo-in-s)}
.crumb span.cur{background:var(--bg);box-shadow:var(--neo-in-s)}
.theme{background:var(--bg);border:0;box-shadow:var(--neo-in-s)}
.theme i{background:var(--bg);box-shadow:var(--shadow-s)}
.arr{background:var(--bg);border:0;box-shadow:var(--shadow-s)}
.arr:hover{background:var(--bg)}
.contact i{border:0;background:var(--bg);box-shadow:var(--neo-in-s)}
.gt{box-shadow:var(--shadow-s)}
.lv4 i{border:0;background:var(--bg);box-shadow:var(--neo-in-s)}
.lv4 i.on{background:var(--teal);box-shadow:none}
.sc .sk{background:none;box-shadow:none}
/* ===== Ajuste según referencias (claro: azul acero · oscuro: cian) ===== */
.bar .tabs{flex:0 1 auto;padding:6px;border-radius:30px;background:var(--bg);box-shadow:var(--shadow-s)}
:root[data-theme="light"] .tab[aria-selected="true"]{background:var(--teal);color:#fff;box-shadow:3px 3px 8px var(--nd),-2px -2px 6px var(--nl)}
:root[data-theme="light"] .tab[aria-selected="true"] small{color:#fff;opacity:.85}
:root[data-theme="dark"] .tab[aria-selected="true"]{color:var(--teal);box-shadow:var(--neo-in-s)}
:root[data-theme="dark"] .tab[aria-selected="true"] small{color:var(--teal);opacity:.8}
.crumb span.cur{color:var(--teal);box-shadow:var(--neo-in-s)}
.arr{color:var(--ink)}
.theme i{background:#e8e8eb}
.theme[aria-checked="true"] .su,.theme[aria-checked="false"] .mo{color:var(--teal)}
.photo.glass{box-shadow:var(--neo-in)}
:root[data-theme="dark"] .lv4 i.on{box-shadow:0 0 6px rgba(34,208,227,.55)}
/* ===== Zoom, contenedor plano y alineación ===== */
:root[data-theme="light"]{--flat:#d7d8dc}
:root[data-theme="dark"]{--flat:#202328}
.item.view.gal{background:var(--flat);box-shadow:none}
.zoom{display:flex;width:100%;height:100%;overflow:auto;border-radius:12px;scrollbar-width:none}
.zoom::-webkit-scrollbar{display:none}
.view.gal .zoom img{max-width:none;max-height:none;margin:auto;flex:none;border-radius:8px;user-select:none;-webkit-user-drag:none}
.zoom img:not([style*="width"]){visibility:hidden}
.zctl{position:absolute;right:12px;bottom:12px;z-index:4;display:flex;gap:6px;align-items:center}
.zctl button{height:28px;min-width:28px;padding:0 9px;border:0;border-radius:99px;background:var(--bg);color:var(--ink);font:inherit;font-size:.72rem;cursor:pointer;box-shadow:var(--shadow-s)}
.zctl button:active{box-shadow:var(--neo-in-s)}
aside{padding-top:0}
/* ===== Flipbook ===== */
.item.view.fb{display:block;aspect-ratio:auto;width:100%;height:min(66vh,540px);padding:0;overflow:hidden;border-radius:18px;background:var(--flat);box-shadow:none}
.view.fb::before{display:none}
.fbstage{position:absolute;inset:30px 30px 82px 30px;perspective:2600px;display:grid;place-items:center;overflow:hidden;cursor:pointer;touch-action:pan-y;user-select:none}
.book{position:relative;width:calc(var(--pw)*2);height:var(--ph);transform-style:preserve-3d;transform:translateX(var(--sx,0px));transition:transform .75s cubic-bezier(.4,.1,.2,1)}
.leaf{position:absolute;left:50%;top:0;width:var(--pw);height:var(--ph);transform-origin:left center;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.5,.05,.25,1)}
.leaf.fl{transform:rotateY(-180deg)}
.face{position:absolute;inset:0;overflow:hidden;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.back{transform:rotateY(180deg)}
.face img{position:static;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.face::after{content:"";position:absolute;inset:0;pointer-events:none}
.face.front::after{background:linear-gradient(to right,rgba(0,0,0,.22),rgba(0,0,0,0) 7%,rgba(0,0,0,0) 94%,rgba(0,0,0,.06))}
.face.back::after{background:linear-gradient(to left,rgba(0,0,0,.22),rgba(0,0,0,0) 7%,rgba(0,0,0,0) 94%,rgba(0,0,0,.06))}
.fbbar{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:6px;white-space:nowrap}
.fbb{height:30px;min-width:30px;padding:0 9px;border:0;border-radius:99px;background:var(--bg);color:var(--ink);font:inherit;font-size:.9rem;line-height:1;cursor:pointer;box-shadow:var(--shadow-s)}
.fbb:active{box-shadow:var(--neo-in-s)}
.fbl{min-width:100px;text-align:center;font-size:.7rem;color:var(--mute)}
.view.fbfull{position:fixed!important;inset:0;z-index:300;width:100vw!important;height:100vh!important;max-width:none!important;border-radius:0!important}
.msg{padding:22px;font-size:.9rem;line-height:1.6;color:var(--mute)}

/* Tiras largas de miniaturas (p. ej. flipbook de 44 páginas): scroll interno, sin ensanchar la página */
.wrap>main,.stage{min-width:0}
.gth{min-width:0;max-width:100%}