/* =====================================================================
   /postularme/fotos/ — actualización de fotos del staff
   Mismo sistema que el resto del sitio: lienzo de 1440 px (390 en
   celular) escalado con --z. Todo en flujo normal, sin posiciones fijas.
   ===================================================================== */
.pg-fo main{background:var(--c)}

/* --- Encabezado --------------------------------------------------- */
.s-fh{background:var(--n);color:#fff}
.s-fh .cv{height:auto;padding:150px 64px 64px}
.s-fh .cv>*{position:relative}
.fh-k{color:#8c8c8c}
.fh-k b{color:var(--o);font-weight:500}
.fh-t{font:600 112px/.86 Barlow,sans-serif;letter-spacing:-.035em;text-transform:uppercase;margin:22px 0 0}
.fh-t i{display:block;font:italic 300 96px/1.02 Barlow,sans-serif;letter-spacing:-.02em;text-transform:none}
.fh-t i b{color:var(--o);font-weight:300}
.fh-d{font:300 20px/1.5 Barlow,sans-serif;color:#cfcfcf;max-width:620px;margin-top:26px}

/* --- Cuerpo ------------------------------------------------------- */
.s-fo{background:var(--c);color:var(--n)}
.s-fo .cv{height:auto;padding:64px 64px 110px}
.s-fo .m{color:#5c5852}
.s-fo h2,.fo-gh h3,.fo-cnt{color:var(--n)}
.s-fo .cv>*{position:relative}
.fo-p{max-width:620px}
.fo-p[hidden],.fo-x[hidden],.fo-ok[hidden]{display:none!important}
.fo-p h2{font:600 44px/1 Barlow,sans-serif;letter-spacing:-.02em;text-transform:uppercase;margin:16px 0 0}
.fo-p h2 i{font:italic 300 44px/1 Barlow,sans-serif;text-transform:none;color:var(--o)}
.fo-p .fo-h{font:400 17px/1.55 Barlow,sans-serif;color:#3a3a3a;margin:16px 0 0}
.fo-f{display:grid;gap:30px;margin-top:34px}
.fo-f .ff input{font-size:22px}
.fo-cod input{letter-spacing:.42em;font-size:34px!important;height:60px!important;font-weight:600!important}
.fo-b{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:36px}
.fo-b .pill{position:static;background:var(--o);color:var(--n);border:0;cursor:pointer}
.fo-b .pill:disabled{opacity:.45;pointer-events:none}
.fo-l{font:500 15px/1.3 Barlow,sans-serif;color:var(--n);border-bottom:1.5px solid currentColor;padding:4px 0;background:none;cursor:pointer}
.fo-l:disabled{color:#a8a297;cursor:default}
.fo-st{flex:1 1 100%;font:400 15.5px/1.45 Barlow,sans-serif;color:#3a3a3a;min-height:1.45em}
.fo-st.er{color:#c0392b}
.fo-st.bien{color:#1d7a46}
.fo-demo{margin-top:22px;padding:12px 16px;background:#fff3d6;border-left:3px solid #e0a100;font:400 14px/1.45 Barlow,sans-serif;color:#5c4400}

/* --- Paso 3: barra superior ----------------------------------------- */
.fo-x{max-width:none}
.fo-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 30px}
.fo-top h2{margin:0}
.fo-ses{color:#5c5852}
.fo-ses button{margin-left:16px}
.fo-act{font:400 15px/1.4 Barlow,sans-serif;color:#5c5852;margin:10px 0 30px}

/* --- Grilla de fotos -------------------------------------------------- */
.fo-gh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin:46px 0 18px}
.fo-gh h3{font:600 30px/1 Barlow,sans-serif;text-transform:uppercase;letter-spacing:-.01em}
.fo-cnt{font:600 16px/1.2 Barlow,sans-serif}
.fo-cnt span{color:#5c5852;font-weight:400}
.fo-cnt.mal{color:#c0392b}
.fo-g{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;list-style:none;margin:0;padding:0}
.fo-c{position:relative;background:#fff;border:1.5px solid rgba(11,11,11,.14);display:flex;flex-direction:column;min-width:0}
.fo-c.p1{border-color:var(--n)}
.fo-c .ph{position:relative;display:block;width:100%;aspect-ratio:3/4;background:#e7e2d8;overflow:hidden;cursor:zoom-in;border:0;padding:0}
.fo-c .ph img{width:100%;height:100%;object-fit:cover;display:block}
.fo-c .tg{position:absolute;left:8px;top:8px;font:500 10px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;background:rgba(11,11,11,.82);color:#fff;padding:6px 8px}
.fo-c.p1 .tg{background:var(--o);color:var(--n)}
.fo-c .nv{position:absolute;right:8px;top:8px;font:600 10px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.08em;background:#fff;color:var(--n);padding:6px 7px}
.fo-c .ld{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:rgba(243,240,234,.86);font:500 13px/1.3 Barlow,sans-serif;color:var(--n);text-align:center;padding:10px}
.fo-c .ld i{width:28px;height:28px;border-radius:50%;border:3px solid rgba(11,11,11,.18);border-top-color:var(--o);animation:fo-g 0.9s linear infinite}
.fo-c.err .ld{background:rgba(255,236,232,.95);color:#c0392b}
@keyframes fo-g{to{transform:rotate(360deg)}}
.fo-c .ac{display:grid;grid-template-columns:44px 44px 1fr;border-top:1.5px solid rgba(11,11,11,.12)}
.fo-c .ac button{height:46px;background:none;border:0;border-right:1px solid rgba(11,11,11,.1);font:500 14px/1 Barlow,sans-serif;color:var(--n);cursor:pointer}
.fo-c .ac button:last-child{border-right:0}
.fo-c .ac button:disabled{color:#c9c3b8;cursor:default}
.fo-c .ac .ar{font-size:18px}
.fo-c .a2{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(11,11,11,.1)}
.fo-c .a2 button{height:44px;background:none;border:0;font:500 13.5px/1 Barlow,sans-serif;color:var(--n);cursor:pointer}
.fo-c .a2 button+button{border-left:1px solid rgba(11,11,11,.1);color:#b03a2e}
.fo-c button:focus-visible,.fo-add:focus-visible,.fo-l:focus-visible{outline:2px solid var(--o);outline-offset:-2px}
.fo-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:3/4;border:1.5px dashed var(--n);background:transparent;font:600 15px/1.2 Barlow,sans-serif;color:var(--n);cursor:pointer;text-align:center;padding:12px}
.fo-add b{font:300 52px/1 Barlow,sans-serif;color:var(--o)}
.fo-add span{font:400 12.5px/1.3 Barlow,sans-serif;color:#5c5852}
.fo-add:hover{border-color:var(--o);background:rgba(255,92,0,.05)}
.fo-nota{font:400 14.5px/1.5 Barlow,sans-serif;color:#5c5852;margin-top:16px;max-width:760px}

/* --- Guardar (barra fija abajo en celular) ---------------------------- */
.fo-sv{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:40px}
.fo-sv .pill{position:static;background:var(--o);color:var(--n);border:0;cursor:pointer;font-size:14px;padding:18px 30px}
.fo-sv .pill:disabled{opacity:.4;pointer-events:none}
.fo-sv .fo-st{flex:1 1 300px}

.fo-ok{margin-top:24px;padding:22px 26px;background:#e3f2e8;border-left:4px solid #1d7a46}
.fo-ok b{display:block;font:700 22px/1.2 Barlow,sans-serif;color:#14532d}
.fo-ok span{display:block;font:400 15.5px/1.45 Barlow,sans-serif;color:#1f3d2b;margin-top:6px}

/* --- Vista grande ------------------------------------------------------ */
.fo-lb{position:fixed;inset:0;z-index:200;background:rgba(11,11,11,.94);display:flex;align-items:center;justify-content:center;padding:56px 16px 24px}
.fo-lb[hidden]{display:none}
.fo-lb img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.fo-lb button{position:absolute;top:10px;right:12px;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--n);border:0;font:400 28px/48px Barlow,sans-serif;cursor:pointer}

@media (max-width:899px){
  .s-fh .cv{padding:104px 18px 40px}
  .fh-t{font-size:62px;margin-top:16px}
  .fh-t i{font-size:54px}
  .fh-d{font-size:16.5px;margin-top:18px}
  .s-fo .cv{padding:36px 18px 130px}
  .fo-p h2,.fo-p h2 i{font-size:32px}
  .fo-p .fo-h{font-size:16px}
  .fo-f{gap:26px;margin-top:26px}
  .fo-b{margin-top:30px}
  .fo-b .pill{width:100%;justify-content:space-between;padding:17px 22px}
  .fo-gh{margin:34px 0 14px}
  .fo-gh h3{font-size:24px}
  .fo-g{grid-template-columns:1fr 1fr;gap:12px}
  .fo-c .ac{grid-template-columns:46px 46px 1fr}
  .fo-c .ac button,.fo-c .a2 button{height:46px;font-size:14px}
  .fo-sv.on{position:sticky;bottom:0;box-shadow:0 -8px 24px rgba(11,11,11,.08);}
  .fo-sv{z-index:20;margin:28px -18px 0;padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));background:rgba(243,240,234,.97);border-top:1.5px solid rgba(11,11,11,.14)}
  .fo-sv .pill{width:100%;justify-content:center;padding:18px 22px}
  .fo-sv .fo-st{flex:1 1 100%;font-size:14.5px;min-height:0}
  .fo-ses button{display:inline-block;margin:0 0 0 14px}
  .pg-fo.fo-sticky .wa-f{bottom:96px!important}
}
@media (prefers-reduced-motion:reduce){.fo-c .ld i{animation:none}}