/* Profesorado: clic en la foto → color → la tarjeta se da la vuelta y enseña la trayectoria.
   Web: giro en el sitio. Móvil: la tarjeta gira de canto y se abre una ficha a todo el ancho. */

.people{position:relative}
.pp{perspective:1600px}
.pp-in{position:relative;height:100%;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.62,.04,.24,1)}
.pp-f,.pp-b{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.pp.flip .pp-in{transform:rotateY(180deg)}

/* Foto como botón */
.pp-ph{position:relative;cursor:pointer;outline:none}
.pp-ph:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--red)}
.pp-plus{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:10px;pointer-events:none}
.pp-plus i{position:relative;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--red);flex:none;transition:transform .5s cubic-bezier(.2,.7,.2,1),background .3s}
.pp-plus i:before,.pp-plus i:after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1px;background:var(--red);transform:translate(-50%,-50%);transition:background .3s}
.pp-plus i:after{transform:translate(-50%,-50%) rotate(90deg)}
.pp-plus em{font-style:normal;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.92);padding:7px 10px;opacity:0;transform:translateX(8px);transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.pp:hover .pp-plus em{opacity:1;transform:none}
.pp:hover .pp-plus i,.pp.on .pp-plus i{transform:rotate(90deg);background:var(--red)}
.pp:hover .pp-plus i:before,.pp:hover .pp-plus i:after,.pp.on .pp-plus i:before,.pp.on .pp-plus i:after{background:#fff}

/* Reverso (web) */
.pp.flip{position:relative;z-index:2}
.pp-b{position:absolute;left:0;right:0;top:0;min-height:100%;transform:rotateY(180deg);background:#faf9f8;border-left:2px solid var(--red);
  padding:26px 24px 18px;display:flex;flex-direction:column;overflow:hidden;cursor:pointer}
.pp-k{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--red)}
.pp-b h4,.pp-sheet h4{font-family:"Playfair Display",Georgia,serif;font-weight:600;color:var(--ink);font-size:1.4rem;line-height:1.2;margin:6px 0 18px}
.pp-cv{list-style:none;display:flex;flex-direction:column;gap:12px}
.pp-cv li{display:grid;grid-template-columns:14px 1fr;column-gap:10px}
.pp-cv li:before{content:"";height:1px;background:var(--red);margin-top:.72em}
.pp-cv b,.pp-cv span{grid-column:2}
.pp-cv b{display:block;font-weight:500;color:var(--ink);font-size:.84rem;line-height:1.35}
.pp-cv span{display:block;font-size:.72rem;color:var(--muted);line-height:1.4;margin-top:2px}
.pp-x,.pp-nx{background:none;border:0;font:inherit;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);cursor:pointer;padding:12px 0 0;display:inline-flex;gap:10px;align-items:center}
.pp-x{margin-top:auto;align-self:flex-start}
.pp-x i,.pp-nx i{font-style:normal;color:var(--red);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.pp-x:hover i{transform:translateX(-4px)}
.pp-nx:hover i{transform:translateX(4px)}

/* El contenido del reverso entra en cascada cuando termina el giro */
.pp-b>*,.pp-sheet .pp-body>*{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.pp-b .pp-cv li,.pp-sheet .pp-cv li{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.pp.flip .pp-b>*,.pp-sheet.in .pp-body>*,.pp.flip .pp-b .pp-cv li,.pp-sheet.in .pp-cv li{opacity:1;transform:none}
.pp.flip .pp-b>:nth-child(1){transition-delay:.5s}
.pp.flip .pp-b>:nth-child(2){transition-delay:.56s}
.pp.flip .pp-b>:nth-child(3){transition-delay:.6s}
.pp.flip .pp-b>:nth-child(4){transition-delay:.95s}
.pp.flip .pp-cv li:nth-child(1),.pp-sheet.in .pp-cv li:nth-child(1){transition-delay:.62s}
.pp.flip .pp-cv li:nth-child(2),.pp-sheet.in .pp-cv li:nth-child(2){transition-delay:.68s}
.pp.flip .pp-cv li:nth-child(3),.pp-sheet.in .pp-cv li:nth-child(3){transition-delay:.74s}
.pp.flip .pp-cv li:nth-child(4),.pp-sheet.in .pp-cv li:nth-child(4){transition-delay:.8s}
.pp.flip .pp-cv li:nth-child(5),.pp-sheet.in .pp-cv li:nth-child(5){transition-delay:.86s}
.pp.flip .pp-cv li:nth-child(6),.pp-sheet.in .pp-cv li:nth-child(6){transition-delay:.92s}
.pp-b>*,.pp-b .pp-cv li{transition-delay:0s}

/* Ficha del móvil */
.pp-sheet{display:none}
@media (max-width:760px){
  .pp-b{display:none}
  .pp-in{transition:transform .32s cubic-bezier(.5,0,.75,0)}
  .pp.edge .pp-in{transform:rotateY(90deg)}
  .pp.back .pp-in{transition:transform .42s cubic-bezier(.2,.7,.2,1)}
  .pp-plus{right:6px;bottom:6px}
  .pp-plus i{width:22px;height:22px}
  .pp-plus i:before,.pp-plus i:after{width:9px}
  .pp-plus em{display:none}
  .people{transition:height .55s cubic-bezier(.2,.7,.2,1)}
  .pp-sheet{display:block;position:absolute;left:0;right:0;top:22px;z-index:3;visibility:hidden;
    background:#faf9f8;border-left:2px solid var(--red);padding:20px 18px 16px;transform-origin:50% 50%;
    -webkit-backface-visibility:hidden;backface-visibility:hidden}
  .pp-sheet.show{visibility:visible}
  .pp-head{display:grid;grid-template-columns:64px 1fr;column-gap:16px;align-items:end;margin-bottom:20px}
  .pp-head img{width:64px;height:80px;object-fit:cover;display:block}
  .pp-sheet h4{font-size:1.2rem;margin:6px 0 0}
  .pp-sheet .pp-cv{gap:13px}
  .pp-sheet .pp-cv b{font-size:.84rem}
  .pp-sheet .pp-cv span{font-size:.72rem}
  .pp-foot{display:flex;justify-content:space-between;margin-top:18px;border-top:1px solid var(--line);padding-top:4px}
  .pp-sheet .pp-body>:nth-child(1){transition-delay:.28s}
  .pp-sheet .pp-body>:nth-child(3){transition-delay:.7s}
}
@media (prefers-reduced-motion:reduce){
  .pp-in,.pp-b>*,.pp-cv li,.pp-sheet .pp-body>*,.people{transition:none!important}
}