/* ==========================================================================
   PORTADA · el expediente que se arma al deslizar
   Una mesa oscura vista desde arriba. Cada capítulo trae su hoja al centro (oficio, descargo, plazo, permuta,
   hoja de respuestas), la deja en la carpeta y al final cae el sello. Todo es función del scroll (js/expediente.js).
   ========================================================================== */
.ex{position:relative;height:calc(100svh * 8);background:#0b0c0e;color:#ecebe6}
#hub>.ex{width:100%;max-width:none;margin:0}
.ex-pin{contain:layout paint}

/* ---------- la mesa ---------- */
.ex-mesa{position:absolute;inset:-4%;background:
  radial-gradient(52% 58% at var(--lx,62%) 44%,rgba(255,236,205,.13),rgba(255,236,205,0) 70%),
  radial-gradient(120% 100% at 50% 50%,rgba(0,0,0,0) 40%,rgba(0,0,0,.72) 100%),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .45  0 0 0 0 .36  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
  linear-gradient(160deg,#17130f,#0d0b09 60%,#100d0a);will-change:transform}

/* ---------- carpeta ---------- */
.ex-carpeta{position:absolute;left:50%;top:50%;width:calc(var(--sw)*1.32);height:calc(var(--sw)*1.74);margin:calc(var(--sw)*-.87) 0 0 calc(var(--sw)*-.66);border-radius:3px 6px 4px 4px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25  0 0 0 0 .18  0 0 0 0 .08  0 0 0 .38 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(160deg,#c3a56d,#a98a55 55%,#b79a63);
  box-shadow:inset 0 0 0 1px rgba(255,235,190,.28),inset 0 -2px 6px rgba(60,40,10,.45),0 2px 2px rgba(0,0,0,.45),0 22px 40px -14px rgba(0,0,0,.85),0 60px 90px -40px rgba(0,0,0,.8);will-change:transform}
.ex-carpeta::before{content:"";position:absolute;left:3%;top:calc(var(--sw)*-.1);width:36%;height:calc(var(--sw)*.12);border-radius:4px 10px 0 0;background:linear-gradient(160deg,#c9ac74,#ad8e58);box-shadow:inset 0 1px 0 rgba(255,235,190,.35),-1px -2px 3px rgba(0,0,0,.25)}
.ex-carpeta i{position:absolute;left:7%;top:5%;width:46%;padding:.5em .7em .55em;background:#efe9d8;color:#2a251d;font:600 calc(var(--sw)/40)/1.35 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.4);transform:rotate(-1.2deg);font-style:normal}
.ex-carpeta i b{display:block;font-size:1.15em;letter-spacing:.1em}

/* ---------- hojas ---------- */
.ex-hojas{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 38%}
.hoja{position:absolute;left:50%;top:50%;width:var(--sw);height:calc(var(--sw)*1.414);margin:calc(var(--sw)*-.707) 0 0 calc(var(--sw)*-.5);padding:2.4em 2.2em 1.8em;overflow:hidden;
  font:400 calc(var(--sw)/27)/1.5 var(--font-mono);color:#27241f;--lift:0;--dim:0;--g:0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .22  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(115deg,rgba(255,255,255,.38),rgba(255,255,255,0) 38%,rgba(70,55,30,.1)),
    #ece7da;
  border-radius:1px;transform-origin:50% 50%;will-change:transform;backface-visibility:hidden;
  filter:brightness(calc(1 - var(--dim)*.52));
  box-shadow:0 1px 1px rgba(0,0,0,.35),0 calc(3px + var(--lift)*26px) calc(8px + var(--lift)*46px) calc(var(--lift)*-6px) rgba(0,0,0,calc(.45 + var(--lift)*.2)),0 0 0 .5px rgba(70,55,30,.25)}
.hoja::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.07),transparent 6%,transparent 94%,rgba(0,0,0,.09))}
.hoja h4,.hoja p,.hoja dl,.hoja table{margin:0}
.xdh{text-align:center;line-height:1.3;margin-bottom:1.1em}
.xdh b{display:block;font:700 1.08em/1.25 var(--font-ui);letter-spacing:.06em}
.xdh span{display:block;font-size:.8em;letter-spacing:.08em;text-transform:uppercase;color:#5a554b}
.xdh::after{content:"";display:block;height:2px;margin-top:.7em;background:linear-gradient(90deg,#27241f 0 70%,transparent 70%);opacity:.85}
.dn{font-weight:600;text-align:center;margin:.2em 0 .9em;font-size:.95em}
.hoja dl{display:grid;grid-template-columns:5.2em 1fr;gap:.25em .6em;margin-bottom:.9em;font-size:.92em}
.hoja dt{font-weight:600}
.hoja dd{margin:0}
.hoja p.t{margin:0 0 .65em;text-align:justify;hyphens:auto;font-size:.9em}
.fr{margin-top:2.2em;text-align:center;font-size:.85em;line-height:1.35}
.fr span{display:block;width:62%;margin:0 auto .3em;border-top:1px solid #27241f;padding-top:.3em}

/* resaltador: se pinta con el avance (--g) de la hoja */
.hoja mark{--d:.1;color:inherit;padding:0 .12em;margin:0 -.12em;background:linear-gradient(transparent 14%,rgba(255,208,0,.62) 14%,rgba(255,208,0,.62) 90%,transparent 90%) no-repeat 0 0 / calc(clamp(0, (var(--g) - var(--d)) * 4.5, 1) * 100%) 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hoja u.cita{--d:.2;text-decoration:none;font-weight:600;background:linear-gradient(#b3261e,#b3261e) no-repeat 0 100% / calc(clamp(0, (var(--g) - var(--d)) * 4.5, 1) * 100%) 2px;padding-bottom:1px}
.etq{--d:.45;position:absolute;right:1.4em;font:700 .74em/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:#b3261e;border:1.5px solid #b3261e;padding:.4em .55em;border-radius:2px;transform:rotate(3deg);opacity:clamp(0,(var(--g) - var(--d)) * 8,1)}

/* plazo: calendario */
.xcal-t{display:flex;justify-content:space-between;align-items:baseline;font:700 .95em var(--font-ui);letter-spacing:.1em;margin-bottom:.5em}
.xcal-t span{font:400 .8em var(--font-mono);letter-spacing:0;color:#5a554b}
.xcal{width:100%;border-collapse:collapse;table-layout:fixed;text-align:center;font-size:.9em}
.xcal th{font:600 .75em var(--font-ui);letter-spacing:.1em;padding:.35em 0;border-bottom:1.5px solid #27241f}
.xcal td{height:2.65em;border:1px solid rgba(39,36,31,.22);vertical-align:top;padding:.15em .1em;position:relative;font-size:.95em}
.xcal td.f{background:rgba(39,36,31,.09);color:#6b665b}
.xcal td.o{color:rgba(39,36,31,.35)}
.xcal td small{display:block;font-size:.62em;line-height:1.1;color:#8a2a22;font-weight:600}
.xcal td.n{background:rgba(39,36,31,.78);color:#ece7da}
.xcal td.n small{color:#ece7da}
.xcal td.v b{display:inline-block;position:relative;z-index:1}
.xcal td.v::after{content:"";position:absolute;left:50%;top:48%;width:2.3em;height:2.3em;margin:-1.2em 0 0 -1.15em;border:2.5px solid #b3261e;border-radius:50%;transform:scale(clamp(.01,(var(--g) - .3) * 6,1));opacity:clamp(0,(var(--g) - .3) * 10,1)}
.xcal td.c{--d:.12}
.xcal td.c small{opacity:clamp(0,(var(--g) - var(--d)) * 8,1)}
.pz{margin-top:1.1em;font-size:.9em;display:grid;grid-template-columns:auto 1fr;gap:.2em .8em}
.pz b{font-weight:600}

/* permuta */
.pm{width:100%;border-collapse:collapse;font-size:.9em;margin:.4em 0 .9em}
.pm td{border:1px solid rgba(39,36,31,.45);padding:.55em .7em;vertical-align:top}
.pm td:first-child{width:34%;font:600 .82em var(--font-ui);letter-spacing:.06em;text-transform:uppercase;background:rgba(39,36,31,.06)}
.pm mark{--d:.2}
.pm tr:nth-child(2) mark{--d:.35}.pm tr:nth-child(3) mark{--d:.5}
.xnota{margin-top:1em;padding:.7em .8em;border-left:3px solid #b3261e;background:rgba(179,38,30,.07);font-size:.82em;line-height:1.4}

/* hoja de respuestas */
.hr-t{font:700 .95em/1.25 var(--font-ui);letter-spacing:.06em;text-align:center;margin-bottom:.3em}
.hr-s{text-align:center;font-size:.78em;color:#5a554b;margin-bottom:.9em}
.hr-g{display:grid;grid-template-columns:repeat(2,1fr);gap:0 1.4em}
.hr-f{display:grid;grid-template-columns:1.9em repeat(4,1fr);align-items:center;gap:0 .15em;font-size:.9em;height:2em}
.hr-f em{font-style:normal;text-align:right;padding-right:.45em;color:#5a554b}
.hr-f i{width:1.45em;height:1.45em;border:1.2px solid rgba(39,36,31,.7);border-radius:50%;margin:0 auto;font:600 .62em/2.25em var(--font-ui);text-align:center;color:rgba(39,36,31,.6);position:relative}
.hr-f i.x{color:transparent}
.hr-f i.x::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:#1d1b18;opacity:clamp(0,(var(--g) - var(--d)) * 14,1)}
.hr-pie{margin-top:.9em;font-size:.78em;display:flex;justify-content:space-between;color:#5a554b;border-top:1px solid rgba(39,36,31,.3);padding-top:.5em}

/* ---------- sello ---------- */
.ex-sello{position:absolute;left:50%;top:50%;z-index:60;padding:.5em .9em .45em;border:.22em solid rgba(176,32,32,.9);border-radius:.3em;color:rgba(176,32,32,.92);text-align:center;font:700 calc(var(--sw)/10)/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;mix-blend-mode:multiply;opacity:0;pointer-events:none;filter:url(#ex-tinta);will-change:transform,opacity;transform-origin:50% 50%}
.ex-sello small{display:block;margin-top:.35em;font:600 .3em/1 var(--font-mono);letter-spacing:.3em}

/* ---------- textos de la portada (reusa .hero-title y .hc de hero.css) ---------- */
.ex .hero-title{max-width:min(100%,620px);z-index:3}
@media (min-width:900px){.ex .hero-title{max-width:min(44vw,560px)}.ex .hero-title h1{font-size:clamp(40px,5.4vw,84px)}}
@media (min-width:900px){.ex .hero-title{bottom:auto;top:50%;margin-top:-170px;padding-bottom:0}}
@media (min-width:900px){.ex .hc{bottom:auto;top:50%;margin-top:-150px;max-width:380px}}
.ex .hc.fin{max-width:420px}
.ex .hero-rail{z-index:5}

/* ---------- sin movimiento ---------- */
.ex.estatico{height:auto}
.ex.estatico .ex-pin{position:relative;height:auto;min-height:100svh;overflow:visible;contain:none;display:flex;flex-direction:column}
.ex.estatico .ex-hojas,.ex.estatico .ex-carpeta,.ex.estatico .ex-sello{display:none}
.ex.estatico .hero-title{position:relative;margin:0;top:auto;padding-top:max(14vh,90px);opacity:1!important;transform:none!important}
.ex.estatico .hero-cards{position:relative;display:grid;gap:12px;padding:0 clamp(16px,4vw,64px) 40px}
.ex.estatico .hc{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:0;opacity:1;visibility:visible;transform:none;pointer-events:auto;max-width:none}
.ex.estatico .hero-rail,.ex.estatico .hero-scroll{display:none}

/* ---------- fotos reales sobre la mesa ---------- */
.foto{position:absolute;left:50%;top:50%;width:calc(var(--sw)*.62);margin:calc(var(--sw)*-.26) 0 0 calc(var(--sw)*-.31);padding:calc(var(--sw)*.025) calc(var(--sw)*.025) 0;background:#f0ece3;--dim:0;
  filter:brightness(calc(1 - var(--dim)));box-shadow:0 1px 1px rgba(0,0,0,.4),0 14px 26px -8px rgba(0,0,0,.75),0 0 0 .5px rgba(70,55,30,.3);will-change:transform}
.foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:saturate(.82) contrast(1.06) sepia(.14)}
.foto figcaption{padding:calc(var(--sw)*.026) 0 calc(var(--sw)*.034);font:500 calc(var(--sw)/34)/1.2 var(--font-mono);color:#3a352c;letter-spacing:.04em}
.foto .cinta{position:absolute;left:50%;top:calc(var(--sw)*-.03);width:calc(var(--sw)*.16);height:calc(var(--sw)*.055);margin-left:calc(var(--sw)*-.08);background:rgba(232,216,168,.62);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.ex.estatico .foto{display:none}
@media (max-aspect-ratio:1/1),(max-width:899px){.foto{display:none}}

/* ---------- oficio real, con los datos íntimos tapados con rayado negro ---------- */
.ex-carpeta{display:none}
.hoja.of{font:400 calc(var(--sw)/29.5)/1.42 Arial,"Liberation Sans",Helvetica,var(--font-ui),sans-serif;padding:2.3em 2.1em 1.4em;color:#1d1c1a}
.of p,.of table{margin:0}
.of-c{text-align:right;margin-bottom:.9em}
.of-n{font-weight:700;margin-bottom:.8em;font-size:.95em}
.of-d{width:100%;border-collapse:collapse;margin-bottom:.9em}
.of-d td{vertical-align:top;padding:.12em .2em .12em 0}
.of-d td:first-child{width:3.9em;font-weight:700}
.of-d td:nth-child(2){width:.8em}
.of-t{text-align:justify;margin-bottom:.8em}
.of-s{font-weight:700;margin:.2em 0 .45em}
.of-g{width:100%;border-collapse:collapse;margin-bottom:.8em}
.of-g td{border:.6px solid #6a665d;padding:.28em .5em}
.of-g td:first-child{width:36%;font-weight:700}
.rj{display:inline-block;width:var(--w);height:1.02em;vertical-align:-.2em;background:#0a0a09;border-radius:1px;transform:rotate(-.25deg);box-shadow:0 0 0 .4px #0a0a09;margin:0 .1em}
.of-d .rj,.of-g .rj{margin-bottom:.1em}

.of-h{text-align:center;line-height:1.25;margin-bottom:.9em;font-size:.92em}
.of-h b{display:block;font-weight:700}
.of-h span{display:block}
.of-ti{text-align:center;font-weight:700;margin:.2em 0 .8em}
.of-ti span{font-weight:700}
.of-g mark,.of-t mark{--d:.25}
.hoja.of .rj{--w:3em}

/* ---------- tono sobrio: títulos llanos, sin cursiva dorada ni vidrio ---------- */
.ex .hero-title h1 em,.ex .hc h2 em,.sistemas>h2 em{font-style:normal;font-weight:inherit;color:inherit}
.ex .hero-title h1{font-size:clamp(32px,4.4vw,64px);letter-spacing:-.02em;line-height:1.08}
.ex .hero-k,.ex .hc .k{color:#b9a66a}
.ex .hc{border-radius:6px;border-color:rgba(255,255,255,.14);background:rgba(12,13,15,.92);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 18px 40px -22px #000}
.ex .hc h2{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.01em}
.ex .hc .btn.primary{border-radius:4px}
.sistemas>h2{font-size:clamp(28px,4vw,48px);letter-spacing:-.015em}
.sys{border-color:rgba(255,255,255,.1);border-radius:6px;background:#0e1013;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.sys small{color:#9a9588}
.sys .pieza{color:#c8c2b2}
@media (hover:hover) and (pointer:fine){.sys:hover{border-color:rgba(255,255,255,.28)}}

/* resultado real del simulador, en un celular sobre la mesa */
.hoja.tel{width:calc(var(--sw)*.72);height:calc(var(--sw)*1.4);margin:calc(var(--sw)*-.7) 0 0 calc(var(--sw)*-.36);padding:calc(var(--sw)*.022);overflow:hidden;border-radius:calc(var(--sw)*.07);background:#08090b;
  box-shadow:inset 0 0 0 1.5px #2a2d33,inset 0 0 0 calc(var(--sw)*.022) #0a0b0d,0 1px 1px rgba(0,0,0,.5),0 calc(3px + var(--lift)*26px) calc(8px + var(--lift)*46px) calc(var(--lift)*-6px) rgba(0,0,0,calc(.5 + var(--lift)*.2))}
.hoja.tel img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:calc(var(--sw)*.05)}
.hoja.tel::after{background:linear-gradient(125deg,rgba(255,255,255,.1),rgba(255,255,255,0) 35%);border-radius:inherit}

/* ---------- documentos reales (hoja escaneada) ---------- */
.hoja.doc{padding:0;overflow:hidden;background:#e9e4d6}
.hoja.doc img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;mix-blend-mode:multiply;filter:contrast(1.04) saturate(.9)}
.hoja.doc.letter{height:calc(var(--sw)*1.294);margin-top:calc(var(--sw)*-.647)}
.hoja.doc::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:multiply;opacity:.55;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .35  0 0 0 0 .28  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.mk{position:absolute;z-index:1;pointer-events:none;transform-origin:0 50%;transform:scaleX(clamp(0, (var(--g) - var(--d)) * 4.5, 1))}
.mk.hl{background:rgba(255,206,0,.6);mix-blend-mode:multiply;margin:-.15% -.4%;padding:.15% .4%}
.mk.u{border-bottom:2.5px solid #c0281f;height:0!important;margin-top:1.3%}

/* la rejilla de herramientas: el último (Comunidad) ocupa todo el ancho */
a.sys{text-decoration:none;color:#ecebe6}

a.hero-play{text-decoration:none}