/* =====================================================================
   Chatgorim Pulso — estilos propios de pulso.html
   Se carga DESPUÉS de styles.css y solo añade: nunca redefine nada suyo.
   Prefijos: .pl- (hero y sección estrella, escritos a mano)
             .pa- .pb- .pc- .pd- .pe- .pg- (secciones)
   ===================================================================== */

/* ---------------------------------------------------------- hero */
.pl-hero-stage{position:relative;height:520px}
.pl-hero-logo{
  position:absolute;right:-6%;top:-4%;width:min(560px,108%);height:auto;
  mix-blend-mode:screen;pointer-events:none;will-change:transform;transform-origin:center;
  -webkit-mask-image:radial-gradient(ellipse 70% 66% at 50% 50%,#000 60%,transparent 100%);
  mask-image:radial-gradient(ellipse 70% 66% at 50% 50%,#000 60%,transparent 100%);
  animation:breathe 5.5s ease-in-out infinite;
}
/* El envoltorio lleva la posición y el tilt del ratón; el móvil, el giro del scroll.
   Separarlos evita que las dos animaciones se pisen la misma propiedad transform. */
.pl-phone-wrap{position:absolute;left:4%;top:26px;width:236px;height:470px;transform-style:preserve-3d}
.pl-phone{
  position:relative;width:100%;height:100%;border-radius:40px;
  background:#000;border:6px solid #1A1226;overflow:hidden;box-sizing:border-box;
  transform:perspective(1400px) rotateY(-16deg) rotateX(6deg);
  transform-style:preserve-3d;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06),0 0 60px -10px rgba(192,38,211,.35);
}
.pl-screen{position:absolute;inset:0;border-radius:34px;overflow:hidden;background:#0B0614;transform:translateZ(10px)}
.pl-sbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 16px 10px;font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);
}
.pl-sbar b{color:var(--ink);font-weight:600}

/* pantalla 1: fichar */
.pl-s{position:absolute;left:0;right:0;top:40px;bottom:0;padding:0 16px}
.pl-s-fichaje .pl-clock{
  font-family:var(--f-display);font-size:42px;font-weight:700;text-align:center;
  margin:34px 0 4px;letter-spacing:-.02em;
}
.pl-s-fichaje .pl-date{text-align:center;font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);margin-bottom:26px}
.pl-punch{
  display:block;width:100%;padding:16px;border-radius:16px;border:0;cursor:default;
  background:var(--grad-btn);color:#fff;font:600 15px/1 var(--f-body);
  box-shadow:0 14px 34px -14px rgba(192,38,211,.9);
}
.pl-geo{
  display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;
  font-family:var(--f-mono);font-size:10.5px;color:#7EE7BB;
}
.pl-geo i{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 9px var(--good);flex:none}

/* pantalla 2: KPIs */
.pl-s-kpi{opacity:0}
.pl-s-kpi .pl-krow{margin:26px 0 0}
.pl-s-kpi .pl-klab{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--f-mono);font-size:10px;color:var(--ink-2);margin-bottom:7px;
}
.pl-s-kpi .pl-ktrack{height:9px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.pl-s-kpi .pl-ktrack i{display:block;height:100%;width:var(--w,60%);border-radius:5px;background:var(--grad)}
.pl-s-kpi .pl-knote{margin-top:22px;font-family:var(--f-mono);font-size:9.5px;color:var(--ink-3);line-height:1.5}

.pl-hero-card{
  position:absolute;left:318px;top:214px;width:250px;padding:14px 15px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.85);
}
.pl-hc-t{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;font-weight:600;margin-bottom:10px;
}
.pl-hc-t span{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);font-weight:400}
.pl-who{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:12px}
.pl-av{
  width:23px;height:23px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--grad-btn);font-family:var(--f-display);font-size:9.5px;font-weight:600;color:#fff;
}
.pl-who .badge{margin-left:auto;font-size:9.5px;padding:3px 8px}

/* ------------------------------------------------- sección estrella */
.pl-star{padding-block:0}
/* column: el pin tiene DOS hijos (escenario y controles). En fila se repartirían
   el ancho y el escenario quedaría a un tercio. */
.pl-pin{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-block:80px}
.pl-star-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);gap:44px;align-items:center;width:100%}
.pl-star-grid>*{min-width:0}

.pl-steps{list-style:none;margin:24px 0 0;padding:0}
.pl-steps li{display:flex;gap:14px;padding:11px 0;opacity:.34;transition:opacity .35s}
.pl-steps li.is-active{opacity:1}
.pl-steps .n{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;font-family:var(--f-mono);font-size:11.5px;flex:none;
  transition:.35s;margin-top:2px;
}
.pl-steps li.is-active .n{background:var(--grad-btn);border-color:transparent;color:#fff;box-shadow:0 0 18px -4px rgba(192,38,211,.8)}
.pl-steps b{display:block;font-size:15.5px}
.pl-steps p{margin:3px 0 0;color:var(--ink-2);font-size:13.5px}
.pl-progress{height:3px;background:var(--line);border-radius:2px;margin-top:14px;overflow:hidden}
.pl-progress i{display:block;height:100%;width:0;background:var(--grad)}

.pl-stage-wrap{display:flex;justify-content:center;align-items:flex-start;height:520px}
.pl-stage{position:relative;width:560px;height:520px;transform-origin:top center;flex:none}
.pl-svg{display:block;width:560px;height:520px;overflow:visible}

.pl-kpi{
  position:absolute;width:236px;height:178px;padding:16px 18px;
  display:flex;flex-direction:column;opacity:0;
}
#plProd{left:320px;top:40px}
#plEfi{left:320px;top:250px}
.pl-kpi .who{margin-bottom:12px}
.pl-slot{
  width:150px;height:26px;border:1px dashed var(--line-2);border-radius:8px;
  margin:0 auto;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:10px;color:var(--ink-3);
}
.pl-rule{width:150px;height:1px;background:var(--line-2);margin:9px auto;transform-origin:left center}
.pl-den{text-align:center;font-family:var(--f-mono);font-size:12px;color:var(--ink-2)}
.pl-read{
  display:block;margin-top:auto;text-align:center;
  font-family:var(--f-display);font-size:34px;font-weight:700;line-height:1.1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.pl-read.is-empty{background:none;-webkit-text-fill-color:var(--ink-3);color:var(--ink-3)}
.pl-hint{
  position:absolute;left:320px;top:224px;width:236px;
  font-family:var(--f-mono);font-size:9.5px;color:var(--ink-3);line-height:1.4;opacity:0;
}

.pl-fly{
  position:absolute;left:187px;top:177px;width:150px;height:26px;border-radius:8px;
  background:var(--grad-btn);color:#fff;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:10px;opacity:0;
  box-shadow:0 10px 26px -10px rgba(192,38,211,.9);
}

.pl-controls{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.pl-controls .ctl{flex:1 1 300px}
.pl-chip-ej{
  font-family:var(--f-mono);font-size:9.5px;padding:2px 7px;border-radius:5px;
  background:rgba(255,255,255,.07);color:var(--ink-3);margin-left:7px;
}
.seg-2{display:inline-flex;position:relative;padding:3px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--line);margin-top:8px}
.seg-2 button{
  position:relative;z-index:1;padding:7px 15px;border:0;background:transparent;cursor:pointer;
  font:500 12.5px/1 var(--f-body);color:var(--ink-2);border-radius:8px;transition:color .25s;
}
.seg-2 button[aria-pressed="true"]{color:#fff}
.seg-2 i{position:absolute;top:3px;left:3px;bottom:3px;width:calc(50% - 3px);border-radius:8px;background:var(--grad-btn);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.seg-2.is-2 i{transform:translateX(100%)}

/* ---------------------------------------------------- responsive */
@media (max-width:900px){
  .pl-hero-stage{height:500px;max-width:520px;margin:0 auto;width:100%}
  .pl-hero-logo{right:-8%;top:0;width:min(480px,118%)}
  .pl-phone-wrap{left:0;top:20px}
  .pl-phone{transform:perspective(1200px) rotateY(-12deg) rotateX(4deg) scale(.9);transform-origin:top left}
  .pl-hero-card{left:auto;right:0;top:250px;width:min(252px,62%)}

  .pl-pin{min-height:0;padding-block:66px}
  .pl-star-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .pl-stage-wrap{height:auto;display:block}
  .pl-stage{width:100%;height:auto}
  .pl-svg{width:100%;height:auto}
  .pl-kpi{position:static;width:auto;height:auto;opacity:1;margin-top:14px}
  .pl-hint{position:static;width:auto;margin-top:8px;opacity:1}
  .pl-fly{display:none}
  .pl-kpi-wrap{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
}
@media (max-width:600px){
  .pl-hero-stage{height:460px}
  .pl-phone{transform:perspective(1200px) rotateY(-10deg) rotateX(3deg) scale(.8)}
  .pl-hero-card{width:min(240px,70%);top:232px;padding:12px}
  .pl-read{font-size:30px}
}

@media (prefers-reduced-motion:reduce){
  .pl-hero-logo{animation:none}
  .pl-s-kpi{opacity:1}
  .pl-s-fichaje{opacity:0}
  .pl-kpi,.pl-hint{opacity:1}
}


/* =====================================================================
   SECCIONES
   ===================================================================== */
/* ---------- el antes de Pulso (#problema) ---------- */
/* ALTURA DISPONIBLE DENTRO DEL .mock, y de aquí salen todas las cifras de abajo:
   .mock mide 118px con box-sizing:border-box y border:1px -> 116px de caja de contenido.
   Las escenas .pa-xls y .pa-cal añaden 12px de padding arriba y abajo -> 92px útiles.
   Cualquier retoque de tamaños tiene que caber en esos 92px o overflow:hidden recorta. */
.pa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.pa-grid>*{min-width:0}

/* -- escena 1: la hoja de calculo -- (9 + 6 + 15x4 + 4x3 = 87 de 92) */
.pa-xls{flex-direction:column;align-items:stretch;justify-content:center;gap:6px;padding:12px 14px}
.pa-xls-head{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:100%;max-width:250px;margin:0 auto}
.pa-xls-head span{font-size:9px;line-height:1;text-align:center;color:var(--ink-3);letter-spacing:.08em}
.pa-xls-body{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:15px;gap:4px;width:100%;max-width:250px;margin:0 auto}
.pa-xls-body i{position:relative;border-radius:3px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line)}
.pa-xls-body i::after{content:'';position:absolute;left:4px;top:50%;margin-top:-1px;height:2px;width:var(--w,0);max-width:calc(100% - 8px);border-radius:1px;background:rgba(255,255,255,.22)}
.pa-xls-body i.pa-cell-on{background:rgba(192,132,252,.13);box-shadow:inset 0 0 0 1.5px var(--purple)}
.pa-val{position:absolute;left:4px;top:50%;margin-top:-1px;height:2px;width:0;max-width:calc(100% - 9px);border-radius:1px;background:var(--purple);animation:pa-type 3.8s ease-in-out infinite}
.pa-val::after{content:'';position:absolute;right:-3px;top:-4px;bottom:-4px;width:1.5px;border-radius:1px;background:var(--ink);animation:pa-blink .9s steps(1,end) infinite}
@keyframes pa-type{0%,6%{width:0}46%,74%{width:58%}86%,100%{width:0}}
@keyframes pa-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* -- escena 2: el cronometro sin aguja -- */
.pa-crono{flex-direction:column;gap:9px}
.pa-crono-svg{width:60px;height:60px;fill:none;stroke:var(--ink-3);stroke-width:2.4;stroke-linecap:round}
.pa-crono-svg .pa-dial{stroke:var(--ink-2);opacity:.55}
.pa-crono-svg .pa-tick{opacity:.75}
.pa-hand{stroke:var(--purple);stroke-width:2.6;opacity:0;transform-box:view-box;transform-origin:32px 36px;animation:pa-sweep 5s cubic-bezier(.45,0,.2,1) infinite}
.pa-crono-read{font-size:13px;color:var(--ink-3);letter-spacing:.08em;line-height:1;animation:pa-dim 5s ease-in-out infinite}
@keyframes pa-sweep{0%{opacity:0;transform:rotate(-10deg)}12%{opacity:.6}40%{opacity:0;transform:rotate(195deg)}100%{opacity:0;transform:rotate(345deg)}}
/* el suelo de opacidad no baja de .6: por debajo, el --:-- deja de leerse */
@keyframes pa-dim{0%,100%{opacity:.6}50%{opacity:.95}}

/* -- escena 3: el PDF que no se abre -- */
.pa-pdf{flex-direction:column;gap:10px}
.pa-doc{position:relative;display:block;width:50px;height:64px}
.pa-sheet{position:absolute;inset:0;border-radius:5px;background:linear-gradient(180deg,#E8E2F4,#CFC6E4);opacity:.68;transform-origin:50% 94%;animation:pa-fan 5.4s ease-in-out infinite}
.pa-sheet:nth-child(2){opacity:.52;animation-delay:.14s}
.pa-sheet:nth-child(3){opacity:.38;animation-delay:.28s}
.pa-doc-front{position:absolute;inset:0;width:100%;height:100%}
.pa-doc-front .pa-page{fill:rgba(14,6,27,.94);stroke:var(--purple);stroke-width:2}
.pa-doc-front .pa-fold{fill:none;stroke:var(--purple);stroke-width:2}
.pa-doc-front .pa-lines{fill:none;stroke:var(--ink-3);stroke-width:2.2;stroke-linecap:round}
.pa-doc-tag{font-size:10.5px;line-height:1;color:var(--ink-3);letter-spacing:.04em}
@keyframes pa-fan{0%,26%{transform:rotate(0deg) translate(0,0)}46%,58%{transform:rotate(var(--r,8deg)) translate(var(--x,6px),-3px)}78%,100%{transform:rotate(0deg) translate(0,0)}}

/* -- escena 4: el ultimo dia del mes -- (8,5 + 7 + 11x5 + 4x4 = 86,5 de 92) */
.pa-cal{flex-direction:column;align-items:stretch;justify-content:center;gap:7px;padding:12px 14px}
.pa-cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;width:100%;max-width:268px;margin:0 auto}
.pa-cal-head span{font-size:8.5px;line-height:1;text-align:center;color:var(--ink-3);letter-spacing:.06em}
.pa-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:11px;gap:4px;width:100%;max-width:268px;margin:0 auto}
.pa-cal-grid i{border-radius:3px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--line)}
.pa-cal-grid i:nth-child(7n-1),.pa-cal-grid i:nth-child(7n){background:rgba(255,255,255,.03)}
.pa-cal-grid i.pa-cal-off{background:none;box-shadow:none}
.pa-cal-grid i.pa-cal-last{position:relative;background:rgba(251,113,133,.16);box-shadow:inset 0 0 0 1px rgba(251,113,133,.45)}
.pa-cal-last::before,.pa-cal-last::after{content:'';position:absolute;left:50%;top:50%;width:20px;height:1.6px;border-radius:1px;background:var(--blocked)}
.pa-cal-last::before{transform:translate(-50%,-50%) rotate(30deg) scaleX(0);animation:pa-cross-a 5.2s ease-in-out infinite}
.pa-cal-last::after{transform:translate(-50%,-50%) rotate(-30deg) scaleX(0);animation:pa-cross-b 5.2s ease-in-out infinite}
.pa-cal::after{content:'';position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(192,132,252,.13),transparent);animation:pa-scan 5.2s ease-in-out infinite}
@keyframes pa-cross-a{0%,48%{transform:translate(-50%,-50%) rotate(30deg) scaleX(0)}62%,90%{transform:translate(-50%,-50%) rotate(30deg) scaleX(1)}100%{transform:translate(-50%,-50%) rotate(30deg) scaleX(0)}}
@keyframes pa-cross-b{0%,56%{transform:translate(-50%,-50%) rotate(-30deg) scaleX(0)}70%,90%{transform:translate(-50%,-50%) rotate(-30deg) scaleX(1)}100%{transform:translate(-50%,-50%) rotate(-30deg) scaleX(0)}}
@keyframes pa-scan{0%{transform:translateX(-110%)}55%,100%{transform:translateX(240%)}}

/* -- las cuatro escenas se pausan cuando la seccion no se ve (lo pone el JS) -- */
.pa-sec.pa-idle *,.pa-sec.pa-idle *::before,.pa-sec.pa-idle *::after{animation-play-state:paused}

/* -- responsive: los mismos cortes que la pagina hermana -- */
@media (max-width:1024px){
  .pa-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .pa-grid{grid-template-columns:1fr;gap:14px}
  /* Las filas del Excel y del calendario NO crecen aqui: el .mock sigue midiendo
     118px en movil, asi que subirlas desbordaba y overflow:hidden se comia la
     cabecera de columnas y la fila de la X roja. Los max-width (250 y 268px)
     ya mantienen la escena del mismo tamano en una tarjeta mas ancha. */
}

/* -- estado final legible sin movimiento -- */
@media (prefers-reduced-motion:reduce){
  .pa-val{width:58%}
  .pa-val::after{opacity:1}
  .pa-hand{opacity:0}
  .pa-crono-read{opacity:.75}
  .pa-cal::after{display:none}
  .pa-cal-last::before{transform:translate(-50%,-50%) rotate(30deg) scaleX(1)}
  .pa-cal-last::after{transform:translate(-50%,-50%) rotate(-30deg) scaleX(1)}
}

/* =====================================================================
   #fichaje — presencia y cronómetro (prefijo .pb-)
   ===================================================================== */
.pb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start;margin-top:34px}
.pb-grid>*{min-width:0}
.pb-col{display:flex;flex-direction:column}
.pb-lbl{margin:0 0 10px}
.pb-persp{perspective:1200px}

/* ---------- escenario 3D del móvil ---------- */
.pb-stage-wrap{display:flex;justify-content:center;align-items:flex-start;height:470px;perspective:1400px}
.pb-stage{position:relative;width:520px;height:470px;flex:none;transform-origin:top center;transform-style:preserve-3d}

.pb-phone{
  position:absolute;left:2px;top:6px;width:242px;height:452px;
  border:6px solid #1A1226;border-radius:40px;background:#000;
  transform:rotateY(-10deg) rotateX(3deg);transform-style:preserve-3d;will-change:transform;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06),0 0 54px -14px rgba(192,38,211,.35);
}
.pb-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:84px;height:22px;border-radius:12px;background:#000;z-index:3}
.pb-screen{
  position:absolute;inset:0;border-radius:34px;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#160B2A,#07040F);transform:translateZ(10px);
}
.pb-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:38px 13px 9px;border-bottom:1px solid var(--line);font-size:10.5px;color:var(--ink-3)}
.pb-body{flex:1;padding:12px 12px 14px;display:flex;flex-direction:column;gap:9px}
.pb-estado{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:600}
.pb-punch{padding:11px 12px;border-radius:12px;background:var(--grad-btn);color:#fff;font-size:12.5px;font-weight:600;text-align:center;box-shadow:0 12px 26px -14px rgba(192,38,211,.9)}
.pb-marks{display:flex;flex-direction:column;gap:5px}
.pb-mark{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.05);font-size:11px;color:var(--ink-2)}
.pb-mark b{font-family:var(--f-mono);font-size:10.5px;color:var(--ink);font-weight:600}
.pb-mark.is-open,.pb-mark.is-open b{color:var(--ink-3)}
.pb-paron{padding:8px 9px;border-radius:9px;background:rgba(192,127,20,.16);border:1px solid rgba(227,166,60,.4);font-size:10.5px;color:var(--ink-2)}
.pb-paron-bar{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.1);margin-top:6px;overflow:hidden}
.pb-paron-bar i{display:block;height:100%;width:93%;background:var(--amber-hi);border-radius:3px}
.pb-zone{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.pb-zchip{transition:background .3s,color .3s,border-color .3s}
.pb-zchip.is-no{background:rgba(251,113,133,.14);border-color:rgba(251,113,133,.4);color:var(--blocked)}
.pb-zhint{font-size:10px;color:var(--ink-3)}

/* ---------- tarjeta flotante de modos ---------- */
.pb-modos{position:absolute;left:262px;top:138px;width:256px;padding:15px 16px;transform:translateZ(28px);box-shadow:0 30px 60px -28px rgba(0,0,0,.85)}
.pb-seg{gap:0;width:100%}
.pb-seg span{flex:1 1 0;text-align:center;padding:7px 4px;font-size:11.5px;white-space:nowrap;transition:color .3s}
.pb-seg span.is-on{color:var(--ink)}
.pb-modo-hint{margin:11px 0 0;font-size:11.5px;line-height:1.4;color:var(--ink-3);min-height:33px}

/* ---------- lista de presencia ---------- */
.pb-lista{list-style:none;margin:20px 0 0;padding:0}
.pb-lista li{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.45;color:var(--ink-2)}
.pb-lista li:first-child{border-top:0;padding-top:0}
.pb-lista b{color:var(--ink);font-weight:600}
.pb-ico{width:19px;height:19px;flex:none;color:var(--purple);margin-top:2px}
.pb-nota{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;padding:13px 15px;border-radius:14px;background:rgba(192,132,252,.07);border:1px solid rgba(192,132,252,.22);font-size:13px;line-height:1.45;color:var(--ink-2)}
.pb-nota .pb-ico{color:var(--good);margin-top:1px}

/* ---------- cronómetro ---------- */
.pb-crono-body{padding:18px}
.pb-time-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pb-time{font-size:clamp(38px,6.2vw,52px);font-weight:600;line-height:1;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pb-time-lab{font-size:12px;color:var(--ink-3)}
.pb-states{display:flex;flex-wrap:wrap;gap:6px;margin:15px 0 16px}
.pb-state{font-family:var(--f-mono);font-size:11px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink-3)}
.pb-state.is-on{background:rgba(192,132,252,.15);border-color:rgba(192,132,252,.4);color:var(--purple)}
.pb-track{display:flex;height:14px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.pb-track i{display:block;height:100%}
.pb-net{width:81.7%;background:linear-gradient(90deg,#6D28D9,#A78BFA)}
.pb-pause{width:18.3%;background:linear-gradient(90deg,#C07F14,#E3A63C)}
.pb-scale{display:flex;justify-content:space-between;margin-top:7px;font-family:var(--f-mono);font-size:11px;color:var(--ink-3)}

/* ---------- hoja de motivos ---------- */
.pb-hoja{margin-top:18px;transform:translateZ(22px);will-change:transform}
.pb-motivos{list-style:none;margin:0;padding:4px 0 6px}
.pb-motivo{display:grid;grid-template-columns:14px 1fr auto;gap:11px;align-items:center;padding:9px 18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-3)}
.pb-motivo:first-child{border-top:0}
.pb-motivo i{width:9px;height:9px;border-radius:3px;background:rgba(255,255,255,.14)}
.pb-motivo .mono{font-size:12px}
.pb-motivo.is-used{color:var(--ink)}
.pb-motivo.is-used i{background:var(--amber-hi);box-shadow:0 0 10px rgba(227,166,60,.65)}
.pb-motivo.is-used .mono{color:var(--amber-hi)}
.pb-tareas{padding:15px 18px 17px;border-top:1px solid var(--line)}
.pb-tags{display:flex;flex-wrap:wrap;gap:7px;margin:0}
.pb-tareas-p{margin:10px 0 0;font-size:13px;color:var(--ink-2)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .pb-grid{grid-template-columns:minmax(0,1fr);gap:34px}
}
@media (max-width:619px){
  .pb-stage-wrap{display:block;height:auto;perspective:900px}
  .pb-stage{position:static;width:auto;height:auto;transform:none}
  .pb-phone{position:relative;left:auto;top:auto;width:min(248px,100%);margin:0 auto;transform:rotateY(-6deg)}
  .pb-modos{position:relative;left:auto;top:auto;width:100%;margin:20px 0 0;transform:none}
  .pb-time{font-size:40px}
  .pb-crono-body{padding:15px}
  .pb-motivo{padding:9px 14px}
  .pb-tareas{padding:14px 14px 16px}
  .pb-seg span{font-size:11px;padding:7px 2px}
}

@media (prefers-reduced-motion:reduce){
  .pb-phone{transform:rotateY(-8deg)}
  .pb-hoja{transform:translateZ(0)}
  .pb-net,.pb-pause{transform:none}
}

/* ===================== NÓMINAS · módulo 10 (prefijo .pc-) =====================
   El papel es la mancha más clara de la página. Va deliberadamente por debajo
   del techo: el techo permitido es --pc-paper:#E8E2F4 / --pc-paper-2:#CFC6E4,
   y aquí se usa un punto más bajo para que el abanico no domine la sección.
   Si se quiere más brillo, se sube ahí. Es el único sitio donde tocarlo.

   ESTADO POR DEFECTO = ESTADO FINAL LEGIBLE. Todo nace en su sitio: el abanico
   abierto, el halo encendido, los cuatro pasos activos y la barra al 100 %.
   Es el JS el que, si puede animar, retrocede al estado inicial y avanza. */
.pc-sec{--pc-paper:#DCD4EC;--pc-paper-2:#C6BCDC;--pc-mark:43,28,64}

.pc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:48px;align-items:center}
.pc-grid>*{min-width:0}

/* ---------- columna de texto ---------- */
.pc-copy{max-width:58ch}
.pc-steps{list-style:none;margin:26px 0 0;padding:0}
.pc-steps li{display:flex;gap:14px;padding:12px 0;transition:opacity .35s}
.pc-steps li.pc-dim{opacity:.34}
.pc-n{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;
  font-size:12px;flex:none;margin-top:2px;transition:background .35s,border-color .35s,box-shadow .35s,color .35s}
.pc-steps li:not(.pc-dim) .pc-n{background:var(--grad-btn);border-color:transparent;color:#fff;box-shadow:0 0 18px -4px rgba(192,38,211,.8)}
.pc-steps b{display:block;font-size:15.5px}
.pc-steps p{margin:3px 0 0;color:var(--ink-2);font-size:14px}
.pc-bar{height:3px;background:var(--line);border-radius:2px;margin-top:6px;overflow:hidden}
.pc-bar i{display:block;height:100%;width:100%;background:var(--grad)}
.pc-callout{border-left-color:var(--amber-hi);background:linear-gradient(90deg,rgba(192,127,20,.10),rgba(255,255,255,.02) 42%)}
.pc-foot{margin:16px 0 0;color:var(--ink-2);font-size:14.5px;max-width:52ch}
.pc-actions{margin-top:20px;min-height:36px}
/* El [hidden] del navegador es (0,0,1) y .btn trae display:inline-flex (0,1,0):
   sin esta regla el botón se pinta igual y queda un control muerto y enfocable. */
.pc-replay[hidden]{display:none}

/* ---------- escenario (lo escala fitNom por JS; nadie más toca su transform) ---------- */
.pc-stage-wrap{display:flex;justify-content:center;align-items:flex-start;height:420px}
.pc-stage{position:relative;width:520px;height:420px;flex:none;transform-origin:top center;perspective:1200px}

.pc-threads{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.pc-thread{fill:none;stroke:var(--amber-hi);stroke-width:1.6;stroke-dasharray:5 6;stroke-linecap:round}
.pc-dot{fill:var(--amber-hi)}

/* ---------- el taco de hojas (3D CSS real: la Z resuelve la oclusión, sin z-index) ---------- */
.pc-doc{position:absolute;left:44px;top:66px;width:140px;height:194px;transform-style:preserve-3d;z-index:3;
  --pc-fx:16px;--pc-fy:-7px;--pc-fz:7px;--pc-fr:4deg}
.pc-sheet{--i:0;position:absolute;inset:0;border-radius:6px;transform-origin:50% 50%;
  background:linear-gradient(168deg,var(--pc-paper) 0%,var(--pc-paper-2) 100%);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.85),inset 0 0 0 300px rgba(7,4,15,calc((5 - var(--i)) * .05));
  transform:translate3d(calc(var(--i) * var(--pc-fx)),calc(var(--i) * var(--pc-fy)),calc(var(--i) * var(--pc-fz))) rotate(calc(var(--i) * var(--pc-fr)))}
.pc-sheet::before{content:'';position:absolute;left:11%;top:10%;width:46%;height:5px;border-radius:2px;background:rgba(var(--pc-mark),.42)}
.pc-sheet::after{content:'';position:absolute;left:11%;right:11%;top:23%;bottom:11%;border-radius:2px;
  background:repeating-linear-gradient(180deg,rgba(var(--pc-mark),.17) 0 3px,transparent 3px 11px)}
.pc-glow{position:absolute;inset:-2px;border-radius:8px;pointer-events:none;
  box-shadow:0 0 0 1px rgba(227,166,60,.55),0 26px 60px -18px rgba(192,127,20,.6)}

/* ---------- fichas de trabajador ---------- */
.pc-wk{position:absolute;left:296px;width:208px;height:46px;display:flex;align-items:center;gap:9px;padding:0 10px;border-radius:12px;z-index:2}
.pc-w1{top:12px} .pc-w2{top:66px} .pc-w3{top:120px} .pc-w4{top:174px}
.pc-w5{top:228px} .pc-w6{top:282px} .pc-w7{top:336px}
.pc-av{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--grad-btn);color:#fff;font-family:var(--f-display);font-size:11px;font-weight:600;line-height:1}
.pc-wk-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.pc-wk-name{font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-wk-line{display:flex;align-items:center;gap:5px}
.pc-mini{font-size:10.5px;padding:2px 7px;border-radius:6px;display:inline-flex;align-items:center;line-height:1.25;white-space:nowrap}
/* El .chip y el .badge del sistema son los dos verdes: el nombre del archivo se
   neutraliza para que el verde signifique una sola cosa, "ya ha salido". */
.pc-chip{background:rgba(255,255,255,.05);color:var(--ink-2);border-color:var(--line-2);font-weight:400}
.pc-badge{border-radius:999px}
.pc-maybe{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--amber-hi);
  border:1px solid rgba(227,166,60,.35);background:rgba(227,166,60,.12);padding:2px 8px;border-radius:999px;
  display:inline-flex;align-items:center;line-height:1.25}

/* ---------- rótulos del escenario ---------- */
.pc-cap{position:absolute;left:24px;top:270px;width:240px;margin:0;font-size:10.5px;color:var(--ink-3);z-index:2}
.pc-hand{position:absolute;left:42px;top:318px;width:176px;margin:0;text-align:center;z-index:2;line-height:1.35}
.pc-hand b{display:block;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-hi)}
.pc-hand span{display:block;font-size:10px;color:var(--ink-3);margin-top:2px}

/* ---------- responsive: juego de geometría G_MOB, fichas arriba y taco abajo ----------
   El ancho sigue siendo fijo a propósito: quien lo encoge hasta caber es fitNom(). */
@media(max-width:900px){
  .pc-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .pc-stage-wrap{height:auto;justify-content:flex-start}
  /* La columna pasa a alinear a la izquierda, así que el escenario escala desde
     su esquina: con "top center" lo que se encoge se reparte a los dos lados y
     a 320 px el borde derecho se salía 8 px bajo el overflow-x:clip global. */
  .pc-stage{width:336px;height:540px;transform-origin:top left}
  .pc-doc{left:24px;top:380px;width:92px;height:120px;--pc-fx:10px;--pc-fy:-3px;--pc-fz:5px;--pc-fr:2deg}
  .pc-wk{left:134px;width:196px;height:42px;padding:0 8px;gap:7px}
  .pc-w1{top:0} .pc-w2{top:46px} .pc-w3{top:92px} .pc-w4{top:138px}
  .pc-w5{top:184px} .pc-w6{top:230px} .pc-w7{top:276px}
  .pc-cap{left:24px;top:320px;width:200px}
  .pc-hand{left:186px;top:418px;width:146px}
}
@media(max-width:600px){
  .pc-steps b{font-size:15px}
  .pc-steps li{padding:10px 0}
}

@media (prefers-reduced-motion:reduce){
  .pc-steps li{transition:none}
  .pc-n{transition:none}
}

/* =====================================================================
   PERFILES (#perfiles) + FUNCIONES (#funciones) — escenas .pd-
   Once mini-escenas CSS en bucle infinito dentro de los .fm existentes.
   REGLA DEL BLOQUE: el estado BASE de cada elemento es ya el estado
   final legible; la @keyframes solo añade el recorrido. Ningún elemento
   nace con opacity:0 ni depende de JS para verse.
   ===================================================================== */

/* max-width:100% evita que una escena ensanche su tarjeta. NO es la regla
   anti-desborde de los grids (esa vive en css/styles.css:236 y su item es
   .feat, no .fm): aquí cada escena se autolimita, ver notas. */
.pd-scene{max-width:100%}
.pd-cap{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pd-callout{max-width:74ch}

/* Pausa las escenas fuera de pantalla (la clase la pone el JS de la sección).
   !important es obligatorio: TODAS las reglas de abajo usan el atajo
   `animation:`, que reinicia animation-play-state a running y además gana
   por especificidad o por orden. Sin !important esta regla no pausa nada. */
.pd-idle,.pd-idle *,.pd-idle *::before,.pd-idle *::after{animation-play-state:paused!important}

/* ---------- 1 y 2 · rejilla de módulos: todo encendido / media apagada ---------- */
.pd-mods{flex-direction:column;align-items:center;gap:9px}
.pd-grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;max-width:192px}
.pd-tile{height:29px;border-radius:7px;padding:0 7px;display:flex;flex-direction:column;justify-content:center;gap:4px;
  border:1px solid rgba(192,132,252,.4);background:linear-gradient(180deg,rgba(192,132,252,.22),rgba(139,92,246,.06))}
.pd-tile i{display:block;height:3px;width:78%;border-radius:2px;background:rgba(244,240,251,.72)}
.pd-tile i+i{width:48%;background:rgba(244,240,251,.28)}
.pd-tile.pd-off{border-style:dashed;border-color:var(--line-2);background:rgba(255,255,255,.02);opacity:.62}
.pd-tile.pd-off i{width:34%;background:rgba(255,255,255,.14)}
.pd-tile.pd-off i+i{display:none}
.pd-grid6 .pd-tile:not(.pd-off){animation:pd-lit 4.4s ease-in-out infinite}
.pd-grid6 .pd-tile:nth-child(2){animation-delay:.13s}
.pd-grid6 .pd-tile:nth-child(3){animation-delay:.26s}
.pd-grid6 .pd-tile:nth-child(4){animation-delay:.39s}
.pd-grid6 .pd-tile:nth-child(5){animation-delay:.52s}
.pd-grid6 .pd-tile:nth-child(6){animation-delay:.65s}
@keyframes pd-lit{0%,58%,100%{box-shadow:none}16%{box-shadow:0 0 0 1px rgba(192,132,252,.6),0 0 14px rgba(192,38,211,.45)}}

/* ---------- 3 · mecánico: móvil con cronómetro ---------- */
.pd-mec{gap:16px}
.pd-phone{position:relative;flex:none;width:62px;height:94px;padding:11px 7px 8px;border:2px solid var(--line-2);
  border-radius:13px;background:rgba(0,0,0,.34);display:flex;flex-direction:column;align-items:center;gap:7px}
.pd-phone::before{content:'';position:absolute;top:4px;left:50%;transform:translateX(-50%);width:16px;height:2px;border-radius:2px;background:var(--line-2)}
.pd-time{display:flex;align-items:center;font-size:15px;font-weight:600;color:var(--ink);line-height:16px}
.pd-roll{display:inline-block;height:16px;overflow:hidden}
.pd-rollin{display:block;animation:pd-roll 10s steps(10,end) infinite}
.pd-rollin i{display:block;height:16px;line-height:16px;font-style:normal}
@keyframes pd-roll{from{transform:translateY(0)}to{transform:translateY(-160px)}}
.pd-prog{width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.pd-prog i{display:block;height:100%;border-radius:2px;background:var(--grad-btn);transform-origin:left;animation:pd-prog 5s ease-in-out infinite}
@keyframes pd-prog{0%{transform:scaleX(.16)}72%,100%{transform:scaleX(1)}}
.pd-run{display:flex;align-items:center;gap:4px;font-size:8.5px}
.pd-dot{width:5px;height:5px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good);animation:pd-blink 1.7s ease-in-out infinite}
@keyframes pd-blink{0%,100%{opacity:1}50%{opacity:.25}}
.pd-side{display:flex;flex-direction:column;align-items:center;gap:8px}
.pd-own{display:flex;align-items:flex-end;gap:6px;height:44px}
.pd-own i{width:9px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#A78BFA,#6D28D9);transform-origin:bottom;animation:pd-up 4.8s ease-in-out infinite}
.pd-own i:nth-child(1){height:44%}
.pd-own i:nth-child(2){height:70%;animation-delay:.14s}
.pd-own i:nth-child(3){height:92%;animation-delay:.28s}
@keyframes pd-up{0%{transform:scaleY(.1)}22%,84%{transform:scaleY(1)}100%{transform:scaleY(.1)}}

/* ---------- 4 · comerciales: calendario con sábados alternos ---------- */
.pd-com{flex-direction:column;gap:9px}
.pd-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;width:100%;max-width:180px}
.pd-cal .pd-h{font-size:9px;text-align:center;color:var(--ink-3);line-height:1}
.pd-cal .pd-h.pd-sat{color:var(--purple)}
.pd-cal i{display:block;height:15px;border-radius:4px;background:rgba(255,255,255,.05)}
.pd-cal i.pd-we{opacity:.35}
.pd-cal i.pd-on{background:rgba(139,92,246,.5);box-shadow:0 0 0 1px rgba(192,132,252,.45)}
.pd-cal i.pd-on1{animation:pd-sat 6s ease-in-out infinite}
.pd-cal i.pd-on2{animation:pd-sat 6s ease-in-out infinite;animation-delay:3s}
@keyframes pd-sat{0%,40%,100%{box-shadow:0 0 0 1px rgba(192,132,252,.45)}8%,30%{box-shadow:0 0 0 1px rgba(192,132,252,.95),0 0 14px rgba(192,38,211,.65)}}

/* ---------- 5 · autónomos: ficha con dos filas tachadas ---------- */
.pd-auto{flex-direction:column;align-items:center}
.pd-ficha{display:flex;flex-direction:column;gap:6px;width:100%;max-width:190px}
.pd-ftop{display:flex;align-items:center;gap:8px;font-size:12px}
.pd-av{flex:none;width:21px;height:21px;border-radius:50%;background:var(--grad-btn);display:grid;place-items:center;
  font-family:var(--f-mono);font-size:9px;font-weight:600;font-style:normal;color:#fff}
.pd-line{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:5px 9px;border-radius:8px;background:rgba(255,255,255,.04);font-size:11px;color:var(--ink-3)}
.pd-line b{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--blocked);font-weight:600}
.pd-line i{position:absolute;left:9px;right:9px;top:50%;height:1px;background:var(--blocked);transform:scaleX(1);transform-origin:left;
  animation:pd-strike 5.2s ease-in-out infinite}
.pd-line+.pd-line i{animation-delay:.45s}
@keyframes pd-strike{0%,8%{transform:scaleX(0)}38%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* ---------- 6 · reparte nóminas: hoja que sale hacia su destinatario ---------- */
.pd-nomi{flex-direction:column;gap:10px}
.pd-flow{display:flex;align-items:center;gap:11px}
.pd-stack{position:relative;flex:none;width:38px;height:50px}
.pd-pg{position:absolute;inset:0;border-radius:5px;background:linear-gradient(180deg,#E8E2F4,#CFC6E4);
  box-shadow:0 8px 18px -8px rgba(0,0,0,.85)}
.pd-pg:nth-child(1){transform:translate(-9px,-6px) rotate(-9deg);opacity:.4}
.pd-pg:nth-child(2){transform:translate(-4px,-3px) rotate(-4.5deg);opacity:.68}
.pd-pg:nth-child(3){padding:7px 6px;display:flex;flex-direction:column;gap:3px;animation:pd-send 5.4s ease-in-out infinite}
.pd-pg:nth-child(3) b{display:block;height:2px;border-radius:1px;background:rgba(22,11,42,.55)}
.pd-pg:nth-child(3) b:nth-child(1){width:70%}
.pd-pg:nth-child(3) b:nth-child(2){width:90%}
.pd-pg:nth-child(3) b:nth-child(3){width:52%}
@keyframes pd-send{0%,16%{transform:translate(0,0) scale(1);opacity:1}58%,100%{transform:translate(88px,7px) scale(.5);opacity:0}}
.pd-arrow{flex:none;width:44px;height:16px;color:var(--ink-2)}
.pd-arrow path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pd-arrow .pd-shaft{stroke-dasharray:6 5;animation:pd-flow 1.6s linear infinite}
@keyframes pd-flow{to{stroke-dashoffset:-11}}
.pd-inbox{position:relative;flex:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.05);display:grid;place-items:center;color:var(--ink-2)}
.pd-inbox svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pd-ok{position:absolute;right:-4px;top:-4px;width:12px;height:12px;border-radius:50%;background:var(--good);
  box-shadow:0 0 10px rgba(52,211,153,.7);animation:pd-ok 5.4s ease-in-out infinite}
@keyframes pd-ok{0%,50%{opacity:0;transform:scale(.3)}62%,100%{opacity:1;transform:scale(1)}}

/* ---------- 7 · turnos A/B que se intercambian ----------
   La letra B NO nace con opacity:0: nace colocada un alto más abajo,
   dentro de la ventana con overflow:hidden. Así el estado base sin
   animación es "A visible, B fuera de la ventana", que es legible. */
.pd-turnos{flex-direction:column;align-items:stretch;gap:6px}
.pd-trow{display:flex;align-items:center;gap:8px;padding:5px 9px;border-radius:9px;background:rgba(255,255,255,.04);font-size:12px}
.pd-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-turnos .pd-cap{text-align:center}
.pd-ab{position:relative;flex:none;width:26px;height:22px;border-radius:7px;overflow:hidden}
.pd-ab b{position:absolute;inset:0;display:grid;place-items:center;border-radius:7px;
  font-family:var(--f-mono);font-size:11px;font-weight:600;color:var(--ink)}
.pd-t1{background:rgba(139,92,246,.5);animation:pd-out 8s ease-in-out infinite}
.pd-t2{background:rgba(232,121,249,.34);transform:translateY(100%);animation:pd-in 8s ease-in-out infinite}
@keyframes pd-out{0%,42%{transform:translateY(0)}50%,92%{transform:translateY(-100%)}100%{transform:translateY(0)}}
@keyframes pd-in{0%,42%{transform:translateY(100%)}50%,92%{transform:translateY(0)}100%{transform:translateY(100%)}}

/* ---------- 8 · vacaciones: cuatro días que entran, dos que se saltan ---------- */
.pd-vaca{flex-direction:column;gap:10px}
.pd-days{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.pd-day{width:26px;height:31px;border-radius:6px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  display:grid;place-items:center;font-family:var(--f-mono);font-size:9.5px;color:var(--ink-3)}
.pd-day.pd-skip{border-style:dashed;border-color:var(--line-2);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 3px,transparent 3px 7px)}
.pd-day.pd-take{background:rgba(52,211,153,.18);border-color:rgba(52,211,153,.4);color:#7EE7BB;animation:pd-take 5.2s ease-in-out infinite}
.pd-day.pd-take:nth-child(2){animation-delay:.22s}
.pd-day.pd-take:nth-child(5){animation-delay:.44s}
.pd-day.pd-take:nth-child(6){animation-delay:.66s}
@keyframes pd-take{0%,4%{opacity:0;transform:scale(.55)}18%,86%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.55)}}

/* ---------- 9 · horas extra: la barra pasa del límite ---------- */
.pd-extra{flex-direction:column;align-items:stretch;gap:12px;width:100%}
.pd-track{position:relative;height:16px;border-radius:8px;background:rgba(255,255,255,.07)}
.pd-trackin{position:absolute;inset:0;border-radius:8px;overflow:hidden}
.pd-trackin i{display:block;height:100%;transform-origin:left;
  background:linear-gradient(90deg,#6D28D9 0%,#8B5CF6 60%,#C07F14 72%,#E3A63C 100%);animation:pd-over 4.8s ease-in-out infinite}
@keyframes pd-over{0%,8%{transform:scaleX(.48)}52%,92%{transform:scaleX(1)}100%{transform:scaleX(.48)}}
.pd-lim{position:absolute;top:-6px;bottom:-6px;left:72%;width:0;border-left:2px dashed rgba(244,240,251,.6)}
.pd-xrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pd-chipx{font-family:var(--f-mono);font-size:10.5px;padding:4px 9px;border-radius:999px;white-space:nowrap;
  background:rgba(227,166,60,.16);color:var(--amber-hi);border:1px solid rgba(227,166,60,.42);animation:pd-pop 4.8s ease-in-out infinite}
@keyframes pd-pop{0%,40%{opacity:0;transform:translateY(6px)}56%,92%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(6px)}}

/* ---------- 10 · avisos: entra la notificación y los ticks se ponen verdes ---------- */
.pd-aviso{flex-direction:column;align-items:center}
.pd-note{width:100%;max-width:192px;padding:9px 10px;border-radius:10px;background:#160B2A;
  border:1px solid rgba(192,132,252,.4);box-shadow:0 14px 32px -14px rgba(0,0,0,.9);
  display:flex;flex-direction:column;gap:6px;animation:pd-slide 5.6s ease-in-out infinite}
@keyframes pd-slide{0%{opacity:0;transform:translateY(-18px)}12%,92%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-18px)}}
.pd-ntop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pd-imp{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-style:normal;
  padding:3px 7px;border-radius:999px;background:rgba(192,132,252,.15);color:var(--purple)}
.pd-ntx{font-size:11.5px;color:var(--ink);line-height:1.3}
.pd-reads{display:flex;align-items:center;gap:6px;padding-top:6px;border-top:1px solid var(--line)}
.pd-ticks{flex:none;width:18px;height:11px;color:#7EE7BB;animation:pd-read 5.6s ease-in-out infinite}
.pd-ticks path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes pd-read{0%,44%{color:var(--ink-2)}56%,100%{color:#7EE7BB}}

/* ---------- 11 · informes: cuatro gráficos que crecen por turnos ---------- */
.pd-informe{flex-direction:column;align-items:center}
.pd-charts{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;width:100%;max-width:192px}
.pd-ch{height:40px;padding:6px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  display:flex;align-items:flex-end;justify-content:center;gap:4px}
.pd-ch1 i{width:7px;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#A78BFA,#6D28D9);
  transform-origin:bottom;animation:pd-bar 6s ease-in-out infinite}
.pd-ch1 i:nth-child(1){height:45%}
.pd-ch1 i:nth-child(2){height:72%;animation-delay:.06s}
.pd-ch1 i:nth-child(3){height:56%;animation-delay:.12s}
.pd-ch1 i:nth-child(4){height:92%;animation-delay:.18s}
.pd-ch1 i:nth-child(5){height:64%;animation-delay:.24s}
@keyframes pd-bar{0%{transform:scaleY(.08)}14%,80%{transform:scaleY(1)}100%{transform:scaleY(.08)}}
.pd-ch2,.pd-ch3{align-items:center}
.pd-ch2 svg,.pd-ch3 svg{width:100%;height:100%}
.pd-ln{fill:none;stroke:var(--fuchsia);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:120;stroke-dashoffset:0;animation:pd-draw 6s ease-in-out infinite;animation-delay:1.4s}
@keyframes pd-draw{0%{stroke-dashoffset:120}20%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:120}}
.pd-trk{fill:none;stroke:rgba(255,255,255,.1);stroke-width:5}
.pd-arc{fill:none;stroke:var(--violet);stroke-width:5;stroke-linecap:round;stroke-dasharray:61 82;stroke-dashoffset:0;
  transform:rotate(-90deg);transform-origin:50% 50%;animation:pd-arc 6s ease-in-out infinite;animation-delay:2.8s}
@keyframes pd-arc{0%{stroke-dashoffset:61}22%,84%{stroke-dashoffset:0}100%{stroke-dashoffset:61}}
.pd-ch4{flex-direction:column;align-items:stretch;justify-content:center;gap:6px}
.pd-ch4 i{height:9px;border-radius:5px;transform-origin:left;animation:pd-bar2 6s ease-in-out infinite;animation-delay:4.2s}
.pd-ch4 i:nth-child(1){width:84%;background:var(--grad-btn)}
.pd-ch4 i:nth-child(2){width:56%;background:rgba(255,255,255,.26)}
@keyframes pd-bar2{0%{transform:scaleX(.04)}18%,84%{transform:scaleX(1)}100%{transform:scaleX(.04)}}

/* ---------- 375 px ---------- */
@media (max-width:600px){
  .pd-mec{gap:13px}
}

/* ---------- menos movimiento ----------
   Quien apaga de verdad las animaciones es la regla global de la casa
   (css/styles.css: *,*::before,*::after{animation:none!important}).
   Estas reglas son el cinturón: dejan cada escena en su estado final
   legible aunque esa regla global cambiara algún día. */
@media (prefers-reduced-motion:reduce){
  .pd-rollin{transform:none}
  .pd-note,.pd-day.pd-take,.pd-chipx,.pd-ok{opacity:1;transform:none}
  .pd-line i{transform:scaleX(1)}
}

/* =====================================================================
   Pulso — transparencia (#transparencia) y ficha técnica (#tecnica)
   Prefijo exclusivo: .pe-
   ===================================================================== */

/* ---------- transparencia: la hoja de auditoría ---------- */
.pe-escena{margin-top:30px}
.pe-hoja{overflow:hidden}
.pe-hd{background:rgba(0,0,0,.18)}

.pe-lock{display:inline-flex;align-items:center;gap:7px;flex:none;
  font-size:11px;letter-spacing:.06em;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:999px;padding:5px 12px;white-space:nowrap}
.pe-lock svg{width:12px;height:12px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* El <dl> solo puede contener dt/dd y grupos <div>: la traza vive fuera,
   en este envoltorio, que ocupa exactamente la misma caja que el <dl>. */
.pe-cuerpo{position:relative}

.pe-lista{margin:0;padding:20px 18px 22px}
.pe-fila{display:grid;grid-template-columns:132px minmax(0,1fr);gap:0 14px;align-items:start;padding:12px 0}
.pe-fila+.pe-fila{border-top:1px solid var(--line)}

.pe-k{display:flex;align-items:center;gap:11px;margin:0;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.pe-v{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink);align-self:center}

/* Fondo opaco: la traza pasa por detrás y no debe transparentarse a través del círculo. */
.pe-nodo{position:relative;z-index:1;flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line-2);
  background:linear-gradient(rgba(192,132,252,.10),rgba(192,132,252,.10)),var(--bg-2)}
.pe-nodo svg{width:13px;height:13px;fill:none;stroke:var(--purple);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* top = 20px (padding del dl) + 12px (padding de la fila) + 13px (medio nodo) = centro del primer nodo. */
.pe-traza{position:absolute;left:30px;top:45px;bottom:24px;width:2px;border-radius:2px;
  background:rgba(255,255,255,.08);z-index:0}
.pe-traza i{display:block;width:100%;height:100%;border-radius:inherit;transform-origin:top center;
  background:linear-gradient(180deg,var(--indigo),var(--purple) 55%,var(--fuchsia))}

.pe-cambio{font-size:17px;font-weight:600;display:flex;align-items:center;flex-wrap:wrap;gap:0 4px}
.pe-old{color:var(--ink-3);text-decoration:line-through;text-decoration-color:rgba(251,113,133,.75);text-decoration-thickness:1.5px}
.pe-flecha{color:var(--ink-3);padding:0 4px}
.pe-new{color:var(--good);display:inline-block;text-decoration:none}
.pe-motivo{color:var(--ink-2);font-size:14px}

/* Etiqueta solo para lectores de pantalla: «antes 08:14 ahora 08:02». */
.pe-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.pe-pie{margin:16px 0 0;font-size:13px;color:var(--ink-3);max-width:64ch}

/* ---------- ficha técnica ---------- */
.pe-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:30px}
.pe-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.pe-stats>*,.pe-cards>*{min-width:0}

.pe-meta{margin:14px 0 0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

.pe-card{position:relative;--mx:50%;--my:50%;transform-style:preserve-3d;will-change:transform}
/* `.card p` (0,0,1,1) gana a `.who` (0,0,1,0) y aplasta la micro-etiqueta.
   Esta regla (0,0,2,0) devuelve a .who su tamaño, color y separación dentro de .pe-card. */
.pe-card .who{font-size:10.5px;color:var(--ink-3);margin-bottom:8px}
.pe-card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(280px circle at var(--mx) var(--my),rgba(192,132,252,.18),transparent 62%);
  transition:opacity .3s}
.pe-card:hover::before{opacity:1}
.pe-card>*{position:relative;z-index:1}

.pe-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  border:1px solid var(--line);background:rgba(192,132,252,.10);margin-bottom:14px;transform:translateZ(12px)}
.pe-ico svg{width:19px;height:19px;fill:none;stroke:var(--purple);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.pe-stack{margin-top:18px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .pe-cards{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .pe-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pe-stats>*:nth-child(3){grid-column:1/-1}
  .pe-lista{padding:16px 14px 18px}
  /* 16 + 12 + 13 = centro del primer nodo; 14 + 13 = 27 = centro horizontal. */
  .pe-traza{left:26px;top:41px}
  .pe-fila{grid-template-columns:minmax(0,1fr);gap:8px 0}
  .pe-v{padding-left:37px}
  .pe-cambio{font-size:16px}
}

/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  .pe-card::before{opacity:0}
}

/* =========================================================
   Pulso · familia + FAQ + contacto + sticky   (prefijo .pg-)
   ========================================================= */

/* ---------- familia (#familia) ---------- */
/* La rejilla es .feat-grid, que ya existe y era byte por byte la misma: no se
   duplica. El anti-desborde va en las celdas, que sí llevan prefijo propio. */
.pg-fam,.pg-fam-now,.pg-next{min-width:0}

.pg-fam{display:block;text-decoration:none;color:inherit}
.pg-fam:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
/* La tarjeta "estás aquí" se distingue por el borde, no bajando la opacidad:
   el atenuado hundía el contraste de la leyenda por debajo de AA. */
.pg-fam-now{border-color:rgba(192,132,252,.3)}
.pg-fam-tag{margin:14px 0 0}

.pg-more{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:14px;font-weight:600;color:var(--purple)}
.pg-more svg{transition:transform .25s}
.pg-fam:hover .pg-more svg{transform:translateX(3px)}

/* .fm son 124px fijos con overflow:hidden. Entre 900 y 1024px la rejilla cae a
   tres columnas, las burbujas se pasan de alto y la tercera quedaba recortada.
   Clase nueva que convierte esa altura en un mínimo; .fm no se toca. */
.pg-fm{height:auto;min-height:124px}

/* miniatura de Chatgorim: tres burbujas */
.pg-chat{width:100%;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.pg-bub{font-size:11px;line-height:1.3;padding:6px 9px;border-radius:10px;max-width:88%}
.pg-bub.pg-in{background:var(--wa-in);align-self:flex-start;border-top-left-radius:3px}
.pg-bub.pg-out{background:var(--wa-out);align-self:flex-end;border-top-right-radius:3px}

/* miniatura de Pulso: columna de jornada isométrica, estática */
.pg-iso{width:100%;display:flex;align-items:center;gap:10px}
.pg-iso-svg{flex:none;width:96px;height:auto}
.pg-iso-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
/* el reparto 75/12/13 es ILUSTRATIVO (01-contenido.md, línea 21): se marca */
.pg-ej{align-self:flex-start;font-family:var(--f-mono);font-size:9.5px;padding:2px 7px;border-radius:5px;background:rgba(255,255,255,.07);color:var(--ink-2)}
.pg-keys{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.pg-keys li{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;line-height:1.3;color:var(--ink-2)}
.pg-keys b{color:var(--ink);margin-right:3px}
.pg-keys i{width:9px;height:9px;border-radius:2px;flex:none;margin-top:3px}
.pg-k1{background:var(--accent-deep)}
.pg-k2{background:var(--amber)}
.pg-k3{border:1px dashed var(--line-2)}

/* celda reservada para la app siguiente: fuera de todo grupo de reveal, solo
   late el borde con su propia @keyframes */
.pg-next{border-style:dashed;display:grid;place-items:center;gap:8px;min-height:180px;padding:18px;text-align:center;color:var(--ink-3);animation:pg-breathe 4.5s ease-in-out infinite}
.pg-next p{margin:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:var(--ink-2)}
@keyframes pg-breathe{0%,100%{border-color:var(--line)}50%{border-color:var(--line-2)}}

/* ---------- sticky de móvil (#contacto) ---------- */
.pg-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(7,4,15,.9);border-top:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.pg-cta-on .pg-sticky{display:block}
.pg-sticky-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.pg-sticky-t{margin:0;font-size:12px;line-height:1.35;color:var(--ink-2)}
.pg-sticky-t b{color:var(--ink);font-size:13px}
.pg-sticky .btn{flex:none}
@media (min-width:900px){.pg-sticky{display:none!important}}

/* ---------- responsive ---------- */
@media (max-width:600px){
  .pg-next{min-height:140px}
  .pg-iso-svg{width:86px}
}

@media (prefers-reduced-motion:reduce){
  .pg-next{animation:none}
  .pg-more svg,.pg-fam:hover .pg-more svg{transform:none;transition:none}
}