/* PayPeek · capa de movimiento de la portada (v2)
   Lo primero que se ve es si unas prácticas merecieron la pena: si te ofrecen quedarte,
   si haces trabajo de verdad, si aprendes. El sueldo va al final y su gráfico vive en
   la pestaña «Sueldos publicados». Se carga DESPUÉS de estilo.css y solo añade cosas. */

html{scroll-padding-top:84px}
body{overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ---------- cabecera fija con cristal (en ordenador) ---------- */
@media (min-width:700px){header.top{position:sticky;top:0;z-index:40}}
header.top::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;
  background:rgba(255,255,255,.84);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);opacity:0;transition:opacity .3s}
header.top.pm-scrolled::before{opacity:1}
@media (max-width:699px){header.top::before{display:none}}
.pm-progress{position:fixed;left:0;top:0;width:100%;height:3px;background:var(--mark);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}

/* ---------- titular ---------- */
.pm-hero{padding-top:clamp(30px,7vh,72px)}
.hero .pm-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.pm-eyebrow i{flex:none;width:9px;height:9px;background:var(--mark);box-shadow:0 0 0 1.5px var(--ink)}
.pm-hero h1{font-size:clamp(40px,7.4vw,80px);line-height:1.02;letter-spacing:-.045em;margin:0 0 20px;text-wrap:balance}
.pm-w{display:inline-block}
.pm-hl{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.1em;line-height:.9;padding:0 .08em;
  background:linear-gradient(transparent 28%,var(--mark) 28%,var(--mark) 90%,transparent 90%) no-repeat 0 0/100% 100%}
.pm-hero > p:not(.pm-eyebrow):not(.cta){font-size:clamp(17px,1.5vw,19.5px);max-width:56ch}
.pm-hero .cta{margin-top:26px!important}
.btn{transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,box-shadow .25s}
.pm-hero .btn:not(.ghost)::after{content:"→";display:inline-block;margin-left:8px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.pm-hero .btn:hover{transform:translateY(-2px)}
.pm-hero .btn:not(.ghost):hover{box-shadow:0 12px 24px -14px rgba(20,21,23,.7)}
.pm-hero .btn:not(.ghost):hover::after{transform:translateX(3px)}

/* ---------- la ficha: ¿merecieron la pena? ---------- */
.pm-stage{position:relative;isolation:isolate;margin:26px 0 30px;padding:34px 0 10px}
.pm-stage::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
  background-image:radial-gradient(circle,#D3D5DA 1.15px,transparent 1.6px);background-size:16px 16px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}
.pm-stage__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:20px}
.pm-kicker{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.pm-kicker i{flex:none;width:8px;height:8px;background:var(--mark);box-shadow:0 0 0 1.5px var(--ink)}
.pm-stage.is-real .pm-kicker i{background:var(--ok,#1F7A4D);box-shadow:none;border-radius:50%}
.pm-stage__t{margin:0;font-size:clamp(24px,3.2vw,34px);line-height:1.12;letter-spacing:-.03em;font-weight:800;max-width:22ch;text-wrap:balance}
.pm-switch{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.pm-switch::-webkit-scrollbar{display:none}
.pm-switch[hidden]{display:none}
.pm-switch button{position:relative;overflow:hidden;flex:none;appearance:none;border:1.5px solid var(--ink);background:#fff;color:var(--ink);font:inherit;font-weight:800;font-size:14px;line-height:1;padding:11px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s}
.pm-switch button:hover{background:var(--panel)}
.pm-switch button[aria-pressed="true"]{background:var(--ink);color:#fff}
.pm-switch button:focus-visible{outline:3px solid var(--mark);outline-offset:2px}
.pm-switch button span{position:relative;z-index:1}
.pm-switch button i{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--mark);transform:scaleX(0);transform-origin:0 50%}
.pm-switch button[aria-pressed="true"] i{animation:pmProg 8.5s linear forwards}
.pm-stage:not(.is-live) .pm-switch i,.pm-stage:hover .pm-switch i,.pm-stage:has(:focus-visible) .pm-switch i{animation-play-state:paused}

.pm-ficha{position:relative;background:#fff;border:1.5px solid var(--ink);border-radius:18px;box-shadow:8px 8px 0 var(--mark);
  transition:opacity .26s,transform .26s,filter .26s}
.pm-ficha.is-out,.pm-nota.is-out{opacity:0;transform:translateY(8px);filter:blur(6px)}
.pm-ficha__top{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding:18px 22px 15px;border-bottom:1px solid var(--line)}
.pm-ficha__top h3{margin:0;font-size:21px;line-height:1.2;font-weight:800;letter-spacing:-.02em}
.pm-ficha__top p{margin:0;font-size:14px;color:var(--ink-3)}
.pm-tag{margin-left:auto;align-self:center;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;background:var(--panel);color:var(--ink-2);padding:5px 9px;border-radius:999px}
.pm-ficha__grid{display:grid;grid-template-columns:1fr 1.3fr 1fr}
.pm-cell{padding:18px 22px 22px;min-width:0}
.pm-cell + .pm-cell{border-left:1px solid var(--line)}
.pm-lbl{margin:0 0 12px;font-size:13px;font-weight:800;color:var(--ink-2)}
.pm-big{margin:0;line-height:1;display:flex;align-items:baseline;gap:8px}
.pm-big b{font-size:clamp(50px,6vw,68px);font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.pm-big span{font-size:20px;font-weight:800;color:var(--ink-2)}
.pm-pocos{font-size:17px!important;font-weight:700!important;letter-spacing:0!important;color:var(--ink-3)}
.pm-dots{display:flex;flex-wrap:wrap;gap:4px;margin-top:16px;max-width:260px}
.pm-dots s{width:14px;height:14px;background:var(--line);transition:background .3s var(--d,0ms),transform .35s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.is-fill .pm-dots s.y{background:var(--ink);transform:translateY(-2px)}
.pm-leg{margin:10px 0 0;font-size:12.5px;color:var(--ink-3)}
.pm-vals{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pm-vals li{display:grid;grid-template-columns:minmax(0,1fr) auto 30px;align-items:center;gap:12px;font-size:14.5px}
.pm-vals li > span{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-vals b{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.pm-vals b.pm-pocos{font-size:14.5px!important}
.pm-sq5{display:inline-flex;gap:4px}
.pm-sq5 s{position:relative;width:17px;height:17px;background:var(--line);overflow:hidden}
.pm-sq5 u{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);transition:width .5s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.is-fill .pm-sq5 u{width:calc(var(--f) * 100%)}
.pm-vals + .pm-leg{margin-top:14px}
.pm-ver{margin:0;line-height:.9}
.pm-ver em{display:inline-block;font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;font-size:clamp(62px,7.4vw,84px);letter-spacing:-.01em;padding:0 .12em 0 .04em;
  background:linear-gradient(transparent 30%,var(--mark) 30%,var(--mark) 88%,transparent 88%) no-repeat 0 0/0% 100%;
  transition:background-size .8s cubic-bezier(.65,0,.35,1) 1s}
.pm-ver.no em{background-image:linear-gradient(transparent 30%,var(--line) 30%,var(--line) 88%,transparent 88%)}
.pm-ver.nd em{font-family:inherit;font-style:normal;font-weight:700;font-size:17px;color:var(--ink-3);padding:0}
.is-fill .pm-ver em{background-size:100% 100%}
.pm-ver__sub{margin:6px 0 0;font-size:14.5px;font-weight:700;color:var(--ink-2)}
.pm-mini{margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.pm-mini div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.pm-mini dt{color:var(--ink-3)}
.pm-mini dd{margin:0;font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.pm-mini div.pm-sueldo dd{font-weight:700;color:var(--ink-2)}
.pm-nota{margin:24px 0 0;max-width:72ch;font-size:15.5px;color:var(--ink-2);transition:opacity .26s,transform .26s,filter .26s}
.pm-nota b{color:var(--ink)}
.pm-nota small{display:block;margin-top:6px;font-size:12.5px;color:var(--ink-3)}

/* ---------- el gráfico de sueldos, dentro de «Sueldos publicados» ---------- */
.pm-signal{position:relative;margin:6px 0 20px}
.pm-signal[hidden]{display:none}
.pm-field{position:relative;height:clamp(220px,22vw,270px);touch-action:pan-y;cursor:crosshair;-webkit-tap-highlight-color:transparent}
.pm-field canvas{position:absolute;inset:0;display:block}
.pm-ticks{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s .15s}
.pm-ticks span{position:absolute;font-size:12px;font-weight:700;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.pm-med{position:absolute;transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity .6s}
.pm-med span{display:block;background:var(--ink);color:#fff;font-size:12.5px;font-weight:800;line-height:1;padding:7px 11px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pm-med::after{content:"";display:block;width:1.5px;height:12px;margin:0 auto;background:var(--ink)}
.pm-signal.is-ready .pm-med,.pm-signal.is-ready .pm-ticks{opacity:1}
.pm-tip{position:absolute;left:0;top:0;z-index:3;transform:translate(-50%,-100%);background:#fff;border:1.5px solid var(--ink);border-radius:10px;padding:7px 11px;font-size:13px;line-height:1.3;white-space:nowrap;
  pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:0 12px 26px -16px rgba(20,21,23,.55)}
.pm-tip.on{opacity:1}
.pm-tip b{display:block;font-weight:800;color:var(--ink)}
.pm-tip span{color:var(--ink-2);font-variant-numeric:tabular-nums}
.pm-cap{margin:4px 0 0;max-width:90ch;font-size:13.5px;color:var(--ink-3)}
.pm-cap b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- cinta de empresas ---------- */
.pm-ticker{margin:6px calc(50% - 50vw) 4px;padding:12px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.pm-ticker__track{display:flex;align-items:center;width:max-content;animation:pmMarq 70s linear infinite}
.pm-ticker:hover .pm-ticker__track{animation-play-state:paused}
.pm-ticker span{margin-right:26px;font-weight:800;font-size:clamp(26px,4.2vw,46px);letter-spacing:-.035em;line-height:1.15;color:var(--ink);white-space:nowrap}
.pm-ticker span.o{color:transparent;-webkit-text-stroke:1.3px var(--ink)}
.pm-ticker b{flex:none;margin-right:26px;width:10px;height:10px;background:var(--mark);box-shadow:0 0 0 1.5px var(--ink)}

/* ---------- tarjetas, pestañas y ranking ---------- */
.ecard{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .2s}
.ecard:hover{transform:translateY(-3px);box-shadow:0 18px 34px -22px rgba(20,21,23,.5)}
.tabs a{transition:background .25s,color .25s}
.rank li{transition:background .2s}
.rank li:not(.vacio):hover{background:linear-gradient(90deg,var(--panel),transparent)}

/* ---------- firma del pie ---------- */
.pm-word{margin:56px 0 -48px;font-weight:800;font-size:min(29vw,296px);line-height:.92;letter-spacing:-.065em;color:var(--ink);white-space:nowrap;overflow:hidden;padding-bottom:.04em;user-select:none}
.pm-word span{display:inline-block}
.pm-word .pk{padding:0 .04em;background:linear-gradient(transparent 52%,var(--mark) 52%,var(--mark) 90%,transparent 90%) no-repeat 0 0/100% 100%}

/* ---------- animaciones (solo si se permite el movimiento) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.pm-js .pm-eyebrow{animation:pmFade .8s .05s backwards}
  html.pm-js .pm-eyebrow i{animation:pmBlink 1.4s steps(1) infinite}
  html.pm-js .pm-w{animation:pmWord .9s cubic-bezier(.2,.8,.2,1) backwards}
  html.pm-js .pm-hl{animation:pmWord .9s cubic-bezier(.2,.8,.2,1) backwards,pmSweep .9s cubic-bezier(.65,0,.35,1) backwards}
  html.pm-js .pm-hero > p:not(.pm-eyebrow){animation:pmFade .9s .75s backwards}
  html.pm-js .pm-hero > p.cta{animation-delay:.9s}
  html.pm-js .pm-stage{animation:pmFade 1s .35s backwards}
  html.pm-js .stats{animation:pmFade .8s .7s backwards}
  html.pm-js .pm-ticker{animation:pmFade 1s .9s backwards}
  .pm-stage.is-real .pm-kicker i{animation:pmPulse 1.8s ease-in-out infinite}

  html.pm-js .pm-r{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
  html.pm-js .pm-r.pm-in{opacity:1;transform:none}
  .pm-in .ecard{animation:pmCard .6s cubic-bezier(.2,.8,.2,1) backwards}
  .pm-in .ecard:nth-child(2){animation-delay:.05s}.pm-in .ecard:nth-child(3){animation-delay:.1s}
  .pm-in .ecard:nth-child(4){animation-delay:.15s}.pm-in .ecard:nth-child(5){animation-delay:.2s}
  .pm-in .ecard:nth-child(6){animation-delay:.25s}.pm-in .ecard:nth-child(n+7){animation-delay:.3s}
  .pm-in mark{background-repeat:no-repeat;background-size:100% 100%;animation:pmMark 1s cubic-bezier(.65,0,.35,1) .15s backwards}
  .pm-in li:nth-child(2) mark{animation-delay:.21s}.pm-in li:nth-child(3) mark{animation-delay:.27s}
  .pm-in li:nth-child(4) mark{animation-delay:.33s}.pm-in li:nth-child(5) mark{animation-delay:.39s}
  .pm-in li:nth-child(n+6) mark{animation-delay:.45s}
  html.pm-js .pm-word span{transform:translateY(105%);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
  html.pm-js .pm-word .pk{background-size:0% 100%;transition:transform 1.2s cubic-bezier(.2,.8,.2,1) .1s,background-size 1s cubic-bezier(.65,0,.35,1) 1s}
  html.pm-js .pm-in .pm-word span{transform:none}
  html.pm-js .pm-in .pm-word .pk{background-size:100% 100%}
}
@media (prefers-reduced-motion:reduce){
  .pm-ticker__track{animation:none}
  .pm-switch button[aria-pressed="true"] i{animation:none}
  .pm-ficha,.pm-nota,.pm-dots s,.pm-sq5 u,.pm-ver em{transition:none}
}
@keyframes pmMarq{to{transform:translateX(-50%)}}
@keyframes pmProg{to{transform:none}}
@keyframes pmWord{from{opacity:0;transform:translateY(.35em);filter:blur(10px)}}
@keyframes pmSweep{from{background-size:0% 100%}}
@keyframes pmFade{from{opacity:0;transform:translateY(12px)}}
@keyframes pmCard{from{opacity:0;transform:translateY(16px)}}
@keyframes pmMark{from{background-size:0% 100%}}
@keyframes pmBlink{50%{background:var(--ink)}}
@keyframes pmPulse{50%{opacity:.35}}

@media (max-width:820px){
  .pm-ficha__grid{grid-template-columns:1fr 1fr}
  .pm-cell.pm-c-vals{grid-column:1 / -1;grid-row:2;border-left:0;border-top:1px solid var(--line)}
  .pm-cell.pm-c-ver{border-left:1px solid var(--line)}
}
@media (max-width:600px){
  .hero .pm-eyebrow{font-size:11px;letter-spacing:.05em;gap:8px}
  .pm-hero h1{font-size:clamp(36px,11.2vw,52px)}
  .pm-stage{padding-top:26px}
  .pm-switch{width:100%}
  .pm-ficha{box-shadow:5px 5px 0 var(--mark)}
  .pm-ficha__top{padding:15px 16px 12px}
  .pm-ficha__grid{grid-template-columns:1fr}
  .pm-cell{padding:16px}
  .pm-cell + .pm-cell,.pm-cell.pm-c-ver{border-left:0;border-top:1px solid var(--line)}
  .pm-cell.pm-c-vals{grid-row:auto}
  .pm-big b{font-size:54px}
  .pm-ver em{font-size:66px}
  .pm-field{height:230px}
  .pm-ticker span{font-size:28px;margin-right:18px}
  .pm-ticker b{margin-right:18px}
  .pm-word{margin-top:44px;font-size:28vw}
}