/* Folder (JS puro, sin React): carpeta 3D de la que salen los proyectos como hojas.
   Se configura con data-* en el div .fd (ver js/folder.js) o con Folder.init(el, {...}).
   Tamaño base: --bw / --bh / --pw / --ph (se multiplican por --s = "size"). */
.fd-sec{display:flex;flex-direction:column;align-items:center;width:100%;padding:clamp(8px,2vw,24px) 0 clamp(8px,2vw,20px)}
.fd{--s:1.3;--bw:300px;--bh:214px;--pw:138px;--ph:178px;--r:calc(14px*var(--s));
 --color:#3d8bff;--back:color-mix(in srgb,var(--color) 72%,#000);--front:var(--color);--paper:#fff;--ink:#06214d;--label:#fff;--sub:#4a5a75;
 --frost:.25;--blur:10px;--dur:520ms;--stag:45ms;--ease:cubic-bezier(.34,1.72,.64,1);--drift:.5;
 position:relative;box-sizing:border-box;width:calc(var(--bw)*var(--s));height:calc(var(--bh)*var(--s));margin:0 auto;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.fd-back{position:absolute;inset:0;border-radius:var(--r);background:var(--back);box-shadow:0 calc(22px*var(--s)) calc(44px*var(--s)) rgba(0,0,0,.45)}
.fd-back::before{content:"";position:absolute;top:calc(-13px*var(--s));width:42%;height:calc(26px*var(--s));background:var(--back);right:0;border-radius:var(--r) var(--r) 0 0}
.fd[data-tab-position="left"] .fd-back::before{right:auto;left:0}
.fd-papers{position:absolute;inset:0;z-index:1;pointer-events:none}
.fd.open .fd-papers{pointer-events:auto}
/* carpeta cerrada (o guardándose): las hojas no se ven por debajo del borde de abajo de la carpeta (el rebote al cerrar y la caída con scroll las sacaban de ahí) */
.fd:not(.open) .fd-papers{clip-path:inset(-100vh -100vw 3px -100vw)}
.fd-paper{--cx:0px;--cy:0px;--cr:0deg;--x:0px;--y:0px;--rot:0deg;
 position:absolute;left:calc(50% - var(--pw)*var(--s)/2);bottom:calc(10px*var(--s));width:calc(var(--pw)*var(--s));height:calc(var(--ph)*var(--s));box-sizing:border-box;display:block;padding:calc(8px*var(--s));border-radius:calc(10px*var(--s));background:var(--paper);color:var(--ink);text-decoration:none;box-shadow:0 8px 22px rgba(0,0,0,.35);transform-origin:50% 100%;z-index:var(--i);touch-action:pan-y;user-select:none;-webkit-user-drag:none;
 transform:translate(calc(var(--cx) + var(--dx,0px)),calc(var(--cy) + var(--dy,0px))) rotate(var(--cr)) scale(.94);
 transition:transform calc(var(--dur)*.6) var(--ease),box-shadow .3s}
.fd.open .fd-paper{transform:translate(calc(var(--x) + var(--dx,0px)),calc(var(--y) + var(--dy,0px))) rotate(var(--rot)) scale(1);transition:transform var(--dur) var(--ease) calc(var(--i)*var(--stag)),box-shadow .3s;cursor:pointer}
.fd[data-draggable="true"].open .fd-paper{cursor:grab}
.fd.open .fd-paper:hover,.fd.open .fd-paper:focus-visible{transform:translate(calc(var(--x) + var(--dx,0px)),calc(var(--y) + var(--dy,0px) - 22px*var(--s))) rotate(0deg) scale(1.07);z-index:40;transition:transform .3s var(--ease),box-shadow .3s;box-shadow:0 16px 32px rgba(0,0,0,.45);outline:none}
.fd-paper:focus-visible{outline:3px solid #fff;outline-offset:3px}
.fd-paper.fd-drag{transition:none!important;z-index:60!important;cursor:grabbing!important;box-shadow:0 22px 44px rgba(0,0,0,.5)}
.fd-paper.fd-measure{transition:none!important;transform:translate(var(--x),var(--y)) rotate(var(--rot)) scale(1)!important}
.fd-paper.fd-zoom{z-index:9999!important;box-shadow:0 30px 80px rgba(0,0,0,.6)!important;
 transform:translate(calc(var(--x) + var(--zx)),calc(var(--y) + var(--zy))) rotate(0deg) scale(var(--zs))!important;transition:transform .3s cubic-bezier(.2,.9,.25,1.05),box-shadow .3s!important}
.fd-paper.fd-zoom.fd-dive{transform:translate(calc(var(--x) + var(--zx)),calc(var(--y) + var(--zy))) rotate(0deg) scale(calc(var(--zs)*2.6))!important;opacity:0;transition:transform .3s cubic-bezier(.5,0,.9,.45),opacity .22s ease-in .08s!important}
/* caída con scroll: el JS pone el movimiento cuadro a cuadro, sin transiciones */
.fd-scrub .fd-paper,.fd-scrub .fd-front{transition:none!important}
.fd-scrub .fd-card{animation:none}
.fd-card{display:block;height:100%;pointer-events:none}
.fd.open .fd-card{animation:fd-drift var(--dd,5s) ease-in-out var(--dl,0s) infinite alternate}
.fd-paper.fd-drag .fd-card,.fd-paper.fd-zoom .fd-card{animation:none}
@keyframes fd-drift{to{translate:calc(var(--drift)*5px*var(--sx,1)) calc(var(--drift)*-7px);rotate:calc(var(--drift)*1.6deg*var(--sx,1))}}
.fd-paper img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:calc(6px*var(--s));background:#dfe6f3;-webkit-user-drag:none}
.fd-paper b{display:block;margin-top:calc(8px*var(--s));font:900 italic calc(16px*var(--s))/1.1 var(--fh);letter-spacing:-.01em}
.fd-paper small{display:block;margin-top:3px;font:500 calc(12px*var(--s))/1.25 var(--f);color:var(--sub)}
/* tapa de adelante (la solapa que se abre) */
.fd-front{position:absolute;left:0;right:0;bottom:0;height:78%;z-index:2;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:2px;padding:0 calc(20px*var(--s)) calc(18px*var(--s));border:0;border-radius:var(--r);background:var(--front);color:var(--label);text-align:left;cursor:pointer;overflow:hidden;
 transform-origin:50% 100%;transform:perspective(calc(1700px*var(--s))) rotateX(-16deg);transition:transform var(--dur) var(--ease);box-shadow:0 -4px 14px rgba(0,0,0,.18)}
.fd.open .fd-front{transform:perspective(calc(1700px*var(--s))) rotateX(-34deg)}
.fd-front:focus-visible{outline:3px solid #fff;outline-offset:4px}
/* brillo: en "solid" lo da --frost como un reflejo suave arriba */
.fd-front::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,calc(var(--frost)*.9)),rgba(255,255,255,0) 55%);pointer-events:none}
.fd[data-variant="glass"] .fd-front{background:color-mix(in srgb,var(--color) 38%,transparent);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.5);backdrop-filter:blur(var(--blur)) saturate(1.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 -4px 14px rgba(0,0,0,.18)}
.fd-label,.fd-sub{position:relative}
.fd-label{font:900 italic calc(clamp(22px,2.2vw,28px)*var(--s)/1.3)/1 var(--fh)}
.fd-sub{font:500 calc(14px*var(--s)/1.3)/1.2 var(--f);opacity:.82}
.fd-hint{margin:22px 0 0;font:500 14px/1.3 var(--f);color:rgba(255,255,255,.7);text-align:center}
.fd[data-theme="light"]~.fd-hint{color:rgba(0,0,0,.6)}
/* fondo oscuro al hacer zoom en una hoja */
.fd-dim{position:fixed;inset:0;z-index:0;background:rgba(4,8,22,.74);opacity:0;pointer-events:none;transition:opacity .3s}
.fd.fd-zoomed{z-index:200}
.fd.fd-zoomed .fd-papers{z-index:auto}
.fd.fd-zoomed .fd-dim{opacity:1;pointer-events:auto;z-index:100}
/* sin JS: las hojas se ven como botones */
.fd:not(.fd-ok){width:auto;height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.fd:not(.fd-ok) a{padding:10px 18px;border-radius:99px;background:#fff;color:#06214d;font:900 italic 16px var(--fh);text-decoration:none}
.fd:not(.fd-ok) img,.fd:not(.fd-ok) small{display:none}
@media(max-width:600px){.fd-paper small{display:none}}
@media(prefers-reduced-motion:reduce){.fd-front,.fd-paper{transition-duration:.01ms!important;transition-delay:0s!important}.fd.open .fd-card{animation:none}}
/* más cerca del título (también en la página de Portfolio) */
.f-portfolio .ph{margin-bottom:clamp(6px,1.2vw,14px)}