/* ===========================================================================
   Galería de carpetas (27-sep-2026). The folders of «Qué hacemos» sit in the
   content column, like the rest of the page, and turn in a loop: left from 01
   brings «A medida», then 08, 07… (Alberto, 27-sep: the rail bleeding to the
   window's edge looked odd on wide screens). Flat, no depth: the folder's own
   hover tilt and its flight to the dialog are the personality (Codex).
   Without JS the rail is a native horizontal scroller in the column.
   With JS (.is-loop) the nine cards share one grid cell and vibilog-galeria.js
   places each one with a transform; the rail clips horizontally at the column.
   CONTRACT with ensamble-folders.js: only a whole card ever opens. At rest every
   visible card is whole (the phone's peeking card is the one exception, and a
   tap on it brings it in instead of opening it: the gallery cancels that click
   in the capture phase).
   =========================================================================== */
.help-section{--rail-gap:22px;--rail-k:4;--card-w:calc((100% - (var(--rail-k) - 1) * var(--rail-gap)) / var(--rail-k))}
.help-heading{flex-direction:row!important;align-items:end!important}
.rail-count{flex:none;white-space:nowrap;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums}
/* The arrows sit at the rail's two ends, level with the folders (Alberto,
   27-sep: beside the title they did not say «you can pass»). In the margin on
   wide screens, half over the edge on tablets, over the card's edge on phones. */
.rail-frame{position:relative}
.rail-btn{position:absolute;z-index:6;top:calc(var(--scene-h,360px) / 2);translate:0 -50%;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 8px 20px -12px #17202b59;cursor:pointer;transition:background .16s,border-color .16s,color .16s,scale .16s}
.rail-btn[hidden]{display:none}
.rail-btn.prev{left:-66px}.rail-btn.next{right:-66px}
.rail-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rail-btn.next svg{transform:scaleX(-1)}
.rail-btn:hover{border-color:#a7b8e9;color:var(--blue);scale:1.05}
.rail-btn:active{scale:.96}
.rail-btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
/* Over the edge, the arrow sits on the folder's paper, above the pocket and its label (Codex, 27-sep). */
@media(max-width:1459px){.rail-btn{top:calc(var(--scene-h,360px) * .3)}.rail-btn.prev{left:-23px}.rail-btn.next{right:-23px}}
@media(max-width:570px){.rail-btn{width:38px;height:38px}.rail-btn.prev{left:-12px}.rail-btn.next{right:-12px}}

/* Without JS: a native scroller, in the column. Vertical padding keeps the
   folder's hover lift, its shadow and the focus ring from being cut. */
.folder-rail{
  position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:var(--card-w);gap:var(--rail-gap);
  padding-block:26px 34px;margin-block:-26px -34px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none
}
.folder-rail::-webkit-scrollbar{display:none}
.folder-rail>.folder-card{scroll-snap-align:start}

/* The loop. overflow-x:clip is not a scroll container: focus() cannot scroll
   it and the vertical overflow stays visible. The 11 px inline padding is room
   for the focus ring (3 + 8 px) of the cards at the edges; it must stay below
   --rail-gap, or the card parked just off the left edge would peek in. */
.folder-rail.is-loop{
  grid-auto-flow:row;grid-template-columns:var(--card-w);grid-auto-columns:auto;
  padding:0 11px;margin:0 -11px;overflow:visible;overflow-x:clip;scroll-snap-type:none;
  touch-action:pan-y pinch-zoom
}
.folder-rail.is-loop>.folder-card{grid-area:1/1;will-change:transform}
@media(hover:hover) and (pointer:fine){
  .folder-rail{cursor:grab;user-select:none;-webkit-user-select:none}
  .folder-rail.is-dragging,.folder-rail.is-dragging .folder-trigger{cursor:grabbing}
}
.rail-note{margin-top:34px;margin-bottom:0;font-size:13px;color:var(--muted)}

/* The last card is not a folder: a white card of the same volume with the
   piece at rest, the question and the way to ask (Codex, 27-sep: an empty
   folder reads as a folder whose sheet is out). */
.custom-card{position:relative;display:flex;flex-direction:column;aspect-ratio:.9;padding:26px 24px 24px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 18px 36px -28px #17202b40}
.custom-piece{position:relative;flex:none;width:60px;margin-bottom:auto;container-type:inline-size}
.custom-vb{position:relative;width:100cqw;border-radius:16px}
.custom-q{margin:16px 0 8px;font-size:15px;color:var(--muted)}
.custom-card h3{margin:0;font-size:27px;font-weight:600;letter-spacing:-.045em;line-height:1.05;color:var(--ink)}
.custom-p{margin:12px 0 20px;font-size:15px;line-height:1.45;color:var(--muted);max-width:260px}
.custom-cta{align-self:flex-start;gap:8px;padding:11px 16px;font-size:13px}
.folder-tag{margin-left:8px;padding:2px 7px;border-radius:99px;background:#ffffff8c;letter-spacing:.08em}
.case-tag{display:inline-block;margin-left:10px;padding:2px 8px;border-radius:99px;background:#fdf1dc;color:#8a5a14;letter-spacing:.08em}

/* How many whole folders the column shows. */
@media(max-width:1100px){.help-section{--rail-k:3}.custom-card{aspect-ratio:1.02;padding:22px}.custom-p{display:none}.custom-card h3{font-size:25px;margin-bottom:16px}}
@media(max-width:800px){.help-section{--rail-k:2}}
/* On a phone: one folder at 80 % with the next peeking in; the last card fills
   the whole row (folder + its title) so its text never runs into the piece. */
@media(max-width:570px){
  .help-section{--rail-gap:14px;--card-w:80%}
  .folder-card.custom{display:flex}
  .custom-card{flex:1;aspect-ratio:auto;padding:20px}
  .custom-piece{width:48px}
  .custom-card h3{font-size:26px}
  .custom-p{display:block;margin:10px 0 18px}
}
@media(max-width:370px){.custom-p{display:none!important}.custom-q{margin-bottom:6px}.custom-card h3{font-size:24px;margin-bottom:16px}}