/* Original folder illustrations; native dialogs reveal the case content. */
.help-section{position:relative;padding-block:110px 90px}
.help-section .section-anchor{position:absolute;top:0;scroll-margin-top:110px}
.help-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:48px}
.help-heading .eyebrow{margin-bottom:18px}
.help-heading h2{max-width:700px}



/* One colour set per folder, shared by the card and its open case. */
.folder-card{min-width:0}
:is(.folder-card,.case-panel){--folder-paper:#cad7ed;--folder-back:#bacce8;--folder-ink:#29466c;--folder-rule:#839fc960}
:is(.folder-card,.case-panel).invoices{--folder-paper:#e0e5e9;--folder-back:#cdd5dc;--folder-ink:#465662;--folder-rule:#a0adb76b}
:is(.folder-card,.case-panel).website{--folder-paper:#244ce8;--folder-back:#183ac4;--folder-ink:#f5f7ff;--folder-rule:#ffffff3d}
:is(.folder-card,.case-panel).diagnosis{--folder-paper:#e8dfcc;--folder-back:#d9ccb3;--folder-ink:#655740;--folder-rule:#a89c8269}
:is(.folder-card,.case-panel).alerts{--folder-paper:#1b2740;--folder-back:#111c30;--folder-ink:#f3f5fa;--folder-rule:#526078}
:is(.folder-card,.case-panel).calls{--folder-paper:#d3e3da;--folder-back:#bdd2c5;--folder-ink:#304f43;--folder-rule:#91ac9c}
:is(.folder-card,.case-panel).assistant{--folder-paper:#dcd9f1;--folder-back:#c6c1e2;--folder-ink:#494263;--folder-rule:#a59dbf}
:is(.folder-card,.case-panel).portal{--folder-paper:#eed5c8;--folder-back:#ddbba9;--folder-ink:#684838;--folder-rule:#ba9582}
/* Folder card: a back with a real tab, two sheets inside and a front pocket that
   tips towards you. The top sheet carries the poster of its case film, a clone of
   the film stage made by ensamble-folders.js (without JS it stays a plain sheet). */
.help-section{--fold-ease:cubic-bezier(.2,0,0,1)}
.folder-trigger{display:block;cursor:pointer;border-radius:14px;-webkit-tap-highlight-color:transparent}
.folder-trigger:focus-visible{outline:3px solid #244ce8;outline-offset:8px}
.folder-scene{position:relative;display:block;aspect-ratio:.9;perspective:1100px;perspective-origin:50% 40%;isolation:isolate}
.folder-scene>span{position:absolute}
.folder-back,.folder-sheet,.folder-paper{display:block}
.folder-scene::after{content:"";position:absolute;z-index:-1;left:7%;right:7%;bottom:-4%;height:9%;border-radius:50%;background:radial-gradient(closest-side,#17202b2e,#17202b00);opacity:.7;transition:transform .55s var(--fold-ease),opacity .55s var(--fold-ease)}
.folder-back{left:0;right:0;top:7%;bottom:0;border-radius:0 16px 16px 16px;background:var(--folder-back);box-shadow:inset 0 1px 0 #ffffff2e}
.folder-back::before{content:"";position:absolute;left:0;top:-20px;width:40%;height:21px;border-radius:11px 11px 0 0;background:var(--folder-back);box-shadow:inset 0 1px 0 #ffffff2e}
.folder-back::after{content:"";position:absolute;left:40%;top:-12px;width:12px;height:12px;background:radial-gradient(circle at 100% 0,#0000 11.5px,var(--folder-back) 12px)}
.folder-sheet{left:9%;right:8%;top:12.5%;bottom:14%;border-radius:8px;background:#eef1f5;box-shadow:0 1px 2px #17202b14;transform:rotate(-2.4deg);transition:transform .55s var(--fold-ease)}
.folder-paper{left:6.5%;right:6.5%;top:14%;bottom:9%;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 1px 2px #17202b1f,0 14px 28px -18px #17202b73;transition:transform .55s var(--fold-ease)}
/* --poster-y lets a page frame the part of the poster that tells the result. */
.folder-thumb{position:absolute;left:5%;right:5%;top:4.2%;transform:translateY(var(--poster-y,0%))}
.folder-thumb .film-stage{border-radius:5px}
.folder-thumb:empty{aspect-ratio:4/3;border-radius:5px;background:repeating-linear-gradient(180deg,#e7ebf1 0 6px,#0000 6px 16px) 12% 22%/58% 40% no-repeat,#f4f6f9}
.folder-front{z-index:2;left:0;right:0;bottom:0;height:54%;display:flex;flex-direction:column;justify-content:space-between;padding:18px 20px 16px;border-radius:12px 12px 16px 16px;background:linear-gradient(180deg,color-mix(in srgb,var(--folder-paper) 84%,#fff) 0,var(--folder-paper) 38%);color:var(--folder-ink);box-shadow:inset 0 1px 0 #ffffff8c,0 -14px 24px -16px #17202b59;transform-origin:50% 100%;transition:transform .55s var(--fold-ease)}
.folder-label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.folder-open{font-size:17px;line-height:1;letter-spacing:0;opacity:.85;transition:transform .3s var(--fold-ease)}
.folder-number{display:block;font-size:clamp(50px,4.6vw,70px);line-height:.8;letter-spacing:-.075em;font-weight:500}
/* Lifted (hover or focus): the pocket tips towards you and the sheets rise. */
.folder-card:focus-within .folder-front{transform:rotateX(-16deg)}
.folder-card:focus-within .folder-paper{transform:translateY(-9%)}
.folder-card:focus-within .folder-sheet{transform:rotate(-4deg) translateY(-5%)}
.folder-card:focus-within .folder-scene::after{opacity:1;transform:scaleX(1.04)}
.folder-card:focus-within .folder-open{transform:translate(2px,-2px)}
@media(hover:hover){.folder-card:hover .folder-front{transform:rotateX(-16deg)}.folder-card:hover .folder-paper{transform:translateY(-9%)}.folder-card:hover .folder-sheet{transform:rotate(-4deg) translateY(-5%)}.folder-card:hover .folder-scene::after{opacity:1;transform:scaleX(1.04)}.folder-card:hover .folder-open{transform:translate(2px,-2px)}}
/* While its case is open the paper is out and the pocket stays open. */
.folder-scene.is-out .folder-paper{visibility:hidden}
.folder-scene.is-out .folder-front{transform:rotateX(-26deg)}
.folder-scene.is-out .folder-sheet{transform:rotate(-4deg) translateY(-5%)}

.folder-copy{margin-top:22px}
.folder-copy h3{font-size:23px;font-weight:550;letter-spacing:-.045em;line-height:1.14;max-width:240px;margin:0}












@media(max-width:1100px){.folder-scene{aspect-ratio:1.02}.folder-front{padding:16px 18px 14px}}
@media(max-width:570px){.folder-scene{aspect-ratio:1.18}.folder-number{font-size:60px}}
@media(max-width:370px){.folder-scene{aspect-ratio:1.08}.folder-number{font-size:52px}}
@media(prefers-reduced-motion:reduce){.folder-scene *,.folder-scene::after{transition:none}}
/* A concise diagnosis invitation. The scene on the right lives in vibilog-coste.css. */
.cost-section{padding-block:0 90px}
.cost-note{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:64px;border-top:1px solid #dce1e8;border-bottom:1px solid #dce1e8;padding-block:48px;align-items:center}
.cost-heading .eyebrow{font-size:10px;margin-bottom:19px}
.cost-heading h2{font-size:clamp(27px,3.1vw,42px);font-weight:550;line-height:1.12;letter-spacing:-.045em;max-width:480px;margin:0}
.cost-heading>p{font-size:13px;line-height:1.7;color:#606976;max-width:365px;margin:18px 0 0}
.cost-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:44px;font-size:12px;font-weight:550;color:#244ce8;border-bottom:1px solid #a7b8e9;margin-top:26px}
.cost-cta span{font-size:19px}
/* Opinion placeholders: explicit status, no invented portraits or ratings. */
.voices-section{padding-block:12px 105px}
.voices-heading{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:30px}
.voices-heading .eyebrow{font-size:10px;margin-bottom:15px}
.voices-heading h2{font-size:clamp(29px,3.3vw,44px);font-weight:550;letter-spacing:-.045em;line-height:1.12;margin:0}
.voices-heading>p{font-size:11px;line-height:1.65;color:#758091;max-width:230px;margin:0 0 3px}
.voices-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.voice{margin:0;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #e0e5ed;border-radius:7px;padding:25px 25px 23px}
.voice-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:19px}
.voice-glyph{font-family:Georgia,serif;font-size:30px;line-height:1;color:#244ce8;height:23px}
.voice-fiction{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:#7c889a}
.voice blockquote{font-size:19px;letter-spacing:-.025em;line-height:1.4;margin:0 0 27px;color:#273349;font-weight:450;max-width:310px}
.voice figcaption{display:flex;align-items:center;gap:11px;margin-top:auto;color:#57677b;font-size:10px;line-height:1.5}
.voice-initials{width:30px;height:30px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:#edf1f8;color:#536885;font-size:8px;letter-spacing:.03em}
.voice-role{font-weight:500;color:#36485f}.voice-role small{display:block;font-weight:400;font-size:8px;color:#7a8799;margin-top:2px}

@media(max-width:1100px){.folder-copy h3{font-size:21px;min-height:49px}.cost-note{gap:40px}.voice{padding:21px}.voice blockquote{font-size:17px}}
@media(max-width:1100px){.help-section{padding-block:80px 65px}.help-heading{align-items:start;flex-direction:column;gap:23px}.folder-copy h3{font-size:25px;max-width:260px;min-height:0}.cost-section{padding-bottom:65px}.cost-note{grid-template-columns:1fr;gap:35px;padding-block:38px}.cost-heading h2{max-width:520px;font-size:36px}.cost-heading>p{max-width:440px}.cost-cta{margin-top:25px}.voices-section{padding-block:0 75px}.voices-heading{align-items:start;flex-direction:column;gap:19px}.voices-heading>p{max-width:420px}.voices-grid{gap:14px}.voice{padding:20px 16px}.voice blockquote{font-size:16px;line-height:1.45}.voice figcaption{gap:8px;font-size:9px}.voice-initials{width:27px;height:27px;font-size:7px}.voice-role small{font-size:7px}}
@media(max-width:570px){.help-section{padding-top:68px}.help-heading h2{font-size:43px;line-height:1.05;max-width:300px}.folder-copy h3{font-size:28px;margin-bottom:11px;max-width:none}.cost-note{gap:30px;padding-block:35px}.cost-heading h2{font-size:32px}.cost-heading>p{font-size:13px}.cost-cta{font-size:12px;gap:25px}.voices-heading h2{font-size:33px}.voices-heading>p{font-size:10px}.voices-grid{grid-template-columns:1fr;gap:15px}.voice{padding:24px;min-height:0}.voice-top{margin-bottom:14px}.voice blockquote{font-size:20px;max-width:100%;margin-bottom:22px}.voice figcaption{font-size:11px;gap:11px}.voice-initials{width:31px;height:31px;font-size:8px}.voice-role small{font-size:8px}.voice-fiction{font-size:9px}}
@media(max-width:370px){.help-heading h2{font-size:39px}.folder-copy h3{font-size:26px}.cost-heading h2{font-size:29px}.voices-heading h2{font-size:31px}}


/* ---------------------------------------------------------------------------
   Open case. Each case is an anchored section without JS; ensamble-folders.js
   upgrades it to a native <dialog> with no skin of its own: the case is a white
   sheet (video + text) that comes out of the card's folder. Two helpers live as
   direct children of the dialog and only exist during the transition: the
   morph (the sheet's white shape, growing from the card's paper) and the hero
   (a copy of the card's poster flying to the video frame). The dialog never
   takes a transform, filter or contain, so both stay fixed to the viewport.
   --------------------------------------------------------------------------- */
html.folder-dialog-open{overflow:hidden}
html.folder-dialog-open body{padding-right:var(--scrollbar,0px)}
.case-library:not(.enhanced){display:grid;gap:56px;margin-top:78px}
.case-library.enhanced{display:contents}
.folder-dialog{width:min(1040px,calc(100% - 48px));max-width:none;max-height:none;margin:auto;padding:0;border:0;background:none;color:#17202b;overflow:visible}
.folder-dialog::backdrop{background:#111b3b80;backdrop-filter:blur(5px)}
.folder-dialog[open]::backdrop{animation:folder-backdrop .36s cubic-bezier(.2,0,0,1) both}
/* a dialog reached from a neighbour's arrow: the backdrop was already there. Before .is-closing, which
   still wins when it closes; the class stays until then (removing it would restart the fade-in). */
.folder-dialog.is-swap::backdrop{animation:none}
.folder-dialog.is-closing::backdrop{animation:folder-backdrop-out .4s cubic-bezier(.4,0,.2,1) both}
@keyframes folder-backdrop{from{opacity:0}to{opacity:1}}
@keyframes folder-backdrop-out{from{opacity:1}to{opacity:0}}
.case-panel{position:relative;z-index:1;color:#17202b;scroll-margin-top:60px}
/* scroll only up and down: the content slides 24 px sideways when passing to the next case, and with
   overflow:auto on both axes a horizontal scrollbar flashed at the foot of the sheet (Alberto, 29-09-2026) */
.case-sheet{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);background:#fff;border-radius:16px;max-height:calc(100dvh - 64px);overflow:hidden auto;overscroll-behavior:contain}
/* The big ambient shadow lives on its own layer and only ever changes opacity
   (compositor); the flying morph carries a short, cheap shadow instead. */
:root{--sheet-shadow:0 2px 6px #111b3b1f,0 34px 70px -24px #111b3b73;--morph-shadow:0 2px 6px #111b3b1f,0 16px 30px -16px #111b3b5c}
.case-shade{position:absolute;inset:0;border-radius:16px;box-shadow:var(--sheet-shadow);pointer-events:none}
/* All the open sheets the same size, so that passing from case to case with the arrows moves neither
   the arrows nor the close button (verificador, 29-09-2026: two cases were 16 px taller; on a phone the
   bar jumped up to 39 px). 530 px holds the tallest case today; deploy/probar-carpetas.py measures all
   eight and fails if a longer text outgrows it. On a phone the sheet is the screen, its foot at the bottom. */
.folder-dialog .case-sheet{min-height:min(530px,calc(100dvh - 64px))}
.case-library:not(.enhanced) .case-sheet{box-shadow:var(--sheet-shadow)}
.case-copy{padding:52px 46px 0 20px;min-width:0}
/* «Quiero algo así» hangs from the sheet itself (the scroller), so it can stay at its foot while
   the rest scrolls (Alberto, 28-09-2026: «siempre visible… muy importante que esté para pinchar de
   primeras»). On a wide sheet it sits under the text column, as before. */
:is(.case-sheet,.case-scroll)>.case-film{grid-row:span 2}
/* the film and the text, wrapped by folders.js so that on a phone they scroll without the button
   (below); on a wide sheet the wrapper has no box and the grid is the same as without JS */
.case-scroll{display:contents}
.case-cta{grid-column:2;position:sticky;z-index:2;bottom:0;padding:6px 46px 40px 20px;background:#fff}
.case-cta::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:20px;background:linear-gradient(#fff0,#fff);pointer-events:none}
.help-section .case-copy h2{font-size:clamp(31px,3.1vw,42px);line-height:1.05;letter-spacing:-.045em;margin:0 44px 16px 0;max-width:430px}
.case-lead{font-size:15px;line-height:1.6;color:#657182;margin:0 0 26px;max-width:400px}
.case-explanation{border-top:1px solid #e3e7ed;padding-top:24px}
.case-explanation p{font-size:14px;line-height:1.65;color:#566273;margin:0 0 18px;max-width:420px}
.case-explanation strong{display:block;font-size:10px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:#27364a;margin-bottom:6px}
.case-contact{min-height:48px;font-size:14px}

.case-close{position:absolute;z-index:3;top:16px;right:16px;width:42px;height:42px;border:1px solid #dce1e8;border-radius:50%;background:#fff;color:#25334a;display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s}
.case-close[hidden]{display:none}
.case-close:hover{background:#eef1f6;transform:rotate(6deg)}
.case-close:focus-visible{outline:3px solid #244ce8;outline-offset:3px}
.case-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
/* Arrows to the neighbouring case (Alberto, 29-09-2026: «pon también las flechas para pasar de casos»),
   made by ensamble-folders.js: links to #caso-…, so the gallery turns the rail first. Outside the sheet
   on a wide screen, on its edge when there is no room for them outside, and at the foot on a phone,
   either side of «Quiero algo así». The look of the rail's arrows (.rail-btn), not its class. */
.case-step{position:absolute;z-index:3;top:50%;translate:0 -50%;display:grid;place-items:center;width:46px;height:46px;border:1px solid #dce1e8;border-radius:50%;background:#fff;color:#17202b;box-shadow:0 8px 20px -12px #17202b59;transition:border-color .16s,color .16s,scale .16s}
.case-step.prev{left:-66px}.case-step.next{right:-66px}
.case-step svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.case-step.next svg{transform:scaleX(-1)}
.case-step:hover{border-color:#a7b8e9;color:#244ce8;scale:1.05}
.case-step:active{scale:.96}
.case-step:focus-visible{outline:3px solid #244ce8;outline-offset:3px}
@media(max-width:1183px){.case-step.prev{left:-23px}.case-step.next{right:-23px}}
/* a folder's thumbnail is the film's poster at a quarter of its size: its tile keeps the V alone,
   the name there would be a smudge (vibilog-pieza.css). A size rule cannot tell it apart: on a phone
   the loop films' cameras enlarge tiles that are laid out just as small. */
.folder-thumb .vb-piece b{display:none}
.folder-morph{position:fixed;z-index:0;margin:0;background:#fff;pointer-events:none}
.folder-hero{position:fixed;z-index:2;margin:0;pointer-events:none;transform-origin:0 0}
.folder-morph[hidden],.folder-hero[hidden]{display:none}
.folder-hero .film-stage{width:100%;height:100%}

@media(max-width:760px){
  .folder-dialog{width:calc(100% - 24px)}
  .case-sheet,.case-shade{border-radius:14px}
  .case-sheet{grid-template-columns:minmax(0,1fr);max-height:calc(100dvh - 24px)}
  /* the sheet is the screen: the film and the text scroll in .case-scroll, and «Quiero algo así» is the
     last piece of the sheet, OUTSIDE the scroller: in Safari the bounce at the end of a scroll dragged it
     up while the arrows (outside) stayed put (Alberto, 29-09-2026: «no puede subir, debería quedarse quieto») */
  .folder-dialog .case-sheet{display:flex;flex-direction:column;height:calc(100dvh - 24px);min-height:0;overflow:hidden}
  .folder-dialog .case-scroll{display:block;flex:1;min-height:0;overflow:hidden auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
  .folder-dialog .case-cta{flex:none;position:static}
  .case-copy{padding:20px 22px 8px}
  :is(.case-sheet,.case-scroll)>.case-film{grid-row:auto}
  .case-cta{grid-column:auto;padding:12px 22px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid #e3e7ed}
  .case-cta::before{display:none}
  .case-contact{width:100%}
  .help-section .case-copy h2{font-size:32px}
  .case-lead{font-size:14px;margin-bottom:20px}
  .case-explanation{padding-top:20px}
  .case-explanation p{font-size:13px}

  .case-close{top:10px;right:10px;width:36px;height:36px}
  .case-step{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));translate:none;width:44px;height:44px;box-shadow:none}
  .case-step.prev{left:22px}.case-step.next{right:22px}
  .case-cta{padding-inline:76px}
}
/* A phone passes from case to case by swiping the sheet (Alberto, 29-09-2026: «en móvil quita las flechas y
   que solo se haga por desliz, y que el botón ocupe entero esa parte»). Only with a finger: a narrow window
   with a mouse has no gesture and keeps the arrows above. Hidden to the eye, not display:none: they are the
   one road the swap takes, the focus lands on them after it, and VoiceOver (whose own swipe means «next
   item») still reads and presses them (arquitecto). */
@media(max-width:760px) and (pointer:coarse){
  .case-step{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .case-cta{padding-inline:22px}
}
@media(max-width:370px){.case-copy{padding-inline:18px}.help-section .case-copy h2{font-size:29px}.case-cta{padding-inline:70px}.case-contact{padding-inline:16px}.case-step.prev{left:18px}.case-step.next{right:18px}}
@media(max-width:370px) and (pointer:coarse){.case-cta{padding-inline:18px}}
@media(prefers-reduced-motion:reduce){.folder-dialog[open]::backdrop,.folder-dialog.is-closing::backdrop{animation:none}.folder-open,.case-close,.case-step{transition:none}.case-step:hover{scale:none}.case-close:hover,.folder-trigger:hover .folder-open{transform:none}}
/* On the way back the hidden paper already takes its lifted pose, so the sheet
   lands exactly where the card will show it; only the pocket closes after. */
.folder-scene.is-return .folder-paper{transform:translateY(-9%)}
.folder-scene.is-landing .folder-paper{transition:none!important}