/* ============================================================
   Profesores — carrusel 3D de tarjetas flotantes
   Una tarjeta por profesor, todas con el mismo diseño. Cambia solo cada 4 s o con la mano.
   Escritorio: un profesor cada vez, enorme. Móvil: la tarjeta ocupa la pantalla.
   Sin JS: las tarjetas se apilan y todo el texto sigue ahí (y para buscadores / IA).
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.team-hero h1{max-width:18ch}
.sec-head .team-note{font-family:var(--util);font-size:12px;letter-spacing:.06em;color:var(--steel);margin-top:16px;text-transform:uppercase}
.team-stage{padding-top:8px;background:
  radial-gradient(1100px 560px at 50% -4%, rgba(38,58,111,.12), transparent 70%),
  var(--paper);
  overflow:hidden}

/* ---------- tarjeta (base: sin JS, apilada) ---------- */
.tcar{max-width:1180px;margin-inline:auto}
.tcar-track{list-style:none;display:flex;flex-direction:column;gap:34px}
.tcar-ui{display:none}
.pc{position:relative;max-width:1180px;margin-inline:auto}
.pc-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:12px;color:#fff;border-radius:18px;
  box-shadow:0 30px 60px -26px rgba(15,23,48,.6)}
.pc-bg{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;
  background:linear-gradient(150deg,#34498A 0%,#1A2450 46%,#0F1730 100%);
  box-shadow:0 0 0 1px rgba(157,184,218,.35) inset}
.pc-bg::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;
  background:linear-gradient(140deg,#C8D8EE,#6F8CC0 30%,#DDE7F5 52%,#5C78B0 76%,#B9CBE6);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.9}
.pc-foil{position:absolute;inset:0;mix-blend-mode:color-dodge;opacity:.22;
  background:
   radial-gradient(circle at var(--mx,50%) var(--my,22%),rgba(255,255,255,.55),transparent 38%),
   linear-gradient(115deg,transparent 18%,rgba(126,227,238,.4) 34%,rgba(255,126,160,.32) 50%,rgba(255,226,140,.34) 66%,transparent 82%);
  background-size:100% 100%,220% 220%;background-position:0 0,var(--bx,0%) 50%;transition:opacity .3s}

.pc-photos{position:relative;display:flex;flex-direction:column;gap:12px}
.pc-ph{position:relative;margin:0;overflow:hidden;border-radius:10px;background:#0F1730;
  border:2px solid #B9CBE6;box-shadow:0 0 0 1px rgba(15,23,48,.7),0 18px 34px -18px rgba(0,0,0,.7);aspect-ratio:4/3}
.pc-ph-a{aspect-ratio:4/4.6}
.pc-ph img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.pc-ph-b .pc-img{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.pc-ph-b .pc-img.is-on{opacity:1}
.pc-badge{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;text-align:center;
  font-family:var(--display);font-size:clamp(13px,1.1vw,17px);letter-spacing:.04em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(15,23,48,.92) 62%)}
.pc-badge::before{content:"★ ";color:#FFD36B}.pc-badge::after{content:" ★";color:#FFD36B}
.pc-cycle{position:absolute;inset:0;width:100%;background:transparent;border:0;cursor:pointer;z-index:2}
.pc-cycle:focus-visible{outline:3px solid #FFD36B;outline-offset:-5px}
.pc-dots{position:absolute;left:0;right:0;bottom:9px;display:flex;justify-content:center;gap:6px;z-index:3;pointer-events:none}
.pc-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .3s,transform .3s}
.pc-dots i.is-on{background:#fff;transform:scale(1.25)}

.pc-gdots{display:none}
.pc-body{position:relative;display:grid;gap:14px;padding:4px 6px 8px}
.pc-id{display:flex;align-items:center;gap:14px}
.pc-ico{flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;box-shadow:0 0 0 2px #F4F8FC,0 0 0 3px rgba(15,23,48,.3)}
.pc-ico svg{width:25px;height:25px}
.pc-name{font-size:clamp(32px,7vw,64px);line-height:.95;letter-spacing:-.02em;margin:0;color:#fff;text-transform:uppercase}
.pc-sub{font-family:var(--util);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ice);margin:7px 0 0}
.pc-box{background:rgba(255,255,255,.07);border:1px solid rgba(157,184,218,.28);border-radius:8px;padding:14px 16px;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.pc-box p{font-size:15px;line-height:1.5;color:#E6ECF6;max-width:none}
.pc-type{display:flex;flex-wrap:wrap;gap:4px 9px;align-items:center;margin:12px 2px 0;
  font-family:var(--util);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#C3D0E4}
.pc-dot{font-size:7px;color:var(--accent-lt)}
.pc-req{display:inline-flex;margin:14px 0 0;max-width:max-content}

.team-assign{max-width:620px;margin:72px auto 0;text-align:center}
.team-assign h2{margin-bottom:12px}
.team-assign p{color:#3A4460}

/* ============================================================
   Carrusel activo (el JS pone .js-car en <html> y .is-ready en .tcar)
   ============================================================ */
.js-car .tcar{position:relative}
.js-car .tcar-stage{perspective:1900px;perspective-origin:50% 38%;touch-action:pan-y;cursor:grab;outline:none;
  padding:26px 0 40px;user-select:none;-webkit-user-select:none}
.js-car .tcar-stage:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:18px}
.js-car .tcar-stage.is-drag{cursor:grabbing}
.js-car .tcar-track{display:grid;gap:0;transform-style:preserve-3d}
.js-car .tcar-slide{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;pointer-events:none;transform-style:preserve-3d;
  transform:translate3d(0,0,-320px) scale(.9);
  transition:transform .8s cubic-bezier(.22,.8,.24,1),opacity .55s ease,visibility 0s linear .8s}
.js-car .tcar-slide[data-state=active]{opacity:1;visibility:visible;pointer-events:auto;transform:none;z-index:2;
  transition:transform .8s cubic-bezier(.22,.8,.24,1),opacity .55s ease,visibility 0s}
.js-car .tcar-slide[data-state=left]{transform:translate3d(-44%,0,-240px) rotateY(38deg) scale(.88)}
.js-car .tcar-slide[data-state=right]{transform:translate3d(44%,0,-240px) rotateY(-38deg) scale(.88)}
.js-car .tcar-slide.no-tr{transition:none!important}
.js-car .tcar-slide.is-dragging{transition:none!important}

/* la tarjeta flota y se inclina (objeto 3D) */
.js-car .pc{transform-style:preserve-3d}
.js-car .tcar-slide[data-state=active] .pc{animation:pcFloat 7s ease-in-out infinite}
@keyframes pcFloat{0%,100%{transform:translateY(0) rotateZ(-.25deg)}50%{transform:translateY(-10px) rotateZ(.3deg)}}
.js-car .pc-card{transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s ease-out}
.js-car .pc-card::after{content:"";position:absolute;left:10%;right:10%;bottom:-34px;height:22px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(15,23,48,.38),transparent);filter:blur(4px);transform:translateZ(-60px);pointer-events:none}
.js-car .pc-ph{transform:translateZ(34px)}
.js-car .pc-body{transform:translateZ(22px)}
.js-car .pc-name{transform:translateZ(14px)}
.js-car .pc-card:hover .pc-foil{opacity:.5}

/* ---------- controles ---------- */
.js-car .tcar-ui{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:-6px}
.tcar-btn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(15,23,48,.25);background:#fff;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px -8px rgba(15,23,48,.4);
  transition:background .2s,color .2s,transform .2s}
.tcar-btn:hover{background:var(--ink);color:#fff}
.tcar-btn:active{transform:scale(.94)}
.tcar-btn:focus-visible,.tcar-pill:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.tcar-btn[hidden]{display:none}
.tcar-pills{list-style:none;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:0;padding:0}
.tcar-pill{position:relative;font-family:var(--util);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 15px;border-radius:99px;border:1px solid rgba(15,23,48,.22);background:#fff;color:var(--ink);cursor:pointer;
  overflow:hidden;transition:background .2s,color .2s,border-color .2s}
.tcar-pill:hover{border-color:var(--ink)}
.tcar-pill[aria-current=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tcar-pill::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:#FFD36B}
.tcar.is-playing .tcar-pill[aria-current=true]::after{animation:tprog var(--iv,4s) linear forwards}
@keyframes tprog{from{width:0}to{width:100%}}
.tcar-count{font-family:var(--util);font-size:12px;letter-spacing:.12em;color:var(--steel);min-width:42px;text-align:center}

/* ---------- escritorio: una tarjeta enorme ---------- */
@media (min-width:821px){
  .pc-card{display:grid;gap:18px;padding:18px}
  .pc-photos{flex-direction:row;justify-content:center;gap:16px;height:clamp(320px,47vh,470px)}
  .pc-ph{flex:var(--ar,1) 1 0;min-width:0;aspect-ratio:auto;height:100%}
  .pc-ph-a{aspect-ratio:auto}
  .pc-body{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:34px;align-items:center;padding:6px 14px 10px}
  .pc-name{font-size:clamp(46px,5.4vw,76px)}
  .pc-box{padding:16px 20px}
  .pc-box p{font-size:17px}
  .pc-type{font-size:12px}
  .pc-solo .pc-card{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:34px;align-items:center}
  .pc-solo .pc-photos{height:clamp(440px,64vh,640px)}
  .pc-solo .pc-body{grid-template-columns:1fr;gap:20px}
  .pc-solo .pc-ph{flex:1 1 0}
}
@media (min-width:821px) and (max-height:760px){
  .pc-photos{height:clamp(260px,42vh,400px)}
  .pc-name{font-size:clamp(40px,4.6vw,60px)}
}

/* ---------- móvil: la tarjeta es del tamaño de la pantalla ---------- */
@media (max-width:820px){
  .team-hero .sec-head > p:not(.team-note){display:none}
  .team-hero{padding-bottom:6px}
  .team-stage .wrap{padding-inline:12px}
  .pc-card{padding:10px;gap:0}
  .js-car .tcar-stage{padding:14px 0 28px}
  .js-car .pc-card{height:calc(100svh - 212px);min-height:520px;max-height:780px}
  /* galería a pantalla completa: todas las fotos del profesor se funden una en otra */
  .js-car .pc-photos{flex:1 1 56%;min-height:0;display:block;position:relative;overflow:hidden;border-radius:10px;
    border:2px solid #B9CBE6;background:#0F1730;box-shadow:0 0 0 1px rgba(15,23,48,.7),0 16px 30px -16px rgba(0,0,0,.7);
    transform:translateZ(34px)}
  .js-car .pc-ph{position:absolute;inset:0;width:auto;max-height:none;aspect-ratio:auto;border:0;border-radius:0;
    background:transparent;box-shadow:none;transform:none}
  .js-car .pc-ph-a{z-index:5}
  .js-car .pc-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
    transition:opacity .9s ease,transform 6s ease-out;transform:scale(1.06)}
  .js-car .pc-photos img.g-on{opacity:1!important;transform:scale(1)}
  .js-car .pc-cycle,.js-car .pc-dots{display:none}
  .js-car .pc-gdots{display:flex;position:absolute;left:0;right:0;bottom:10px;justify-content:center;gap:6px;z-index:6;pointer-events:none}
  .js-car .pc-gdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .3s,transform .3s}
  .js-car .pc-gdots i.is-on{background:#fff;transform:scale(1.3)}
  .js-car .pc-badge{top:10px;bottom:auto;left:10px;right:auto;max-width:56%;padding:7px 11px;border-radius:99px;text-align:left;
    font-size:11px;background:rgba(15,23,48,.82);backdrop-filter:blur(2px)}
  .js-car .pc-body{flex:0 0 auto;gap:10px;padding:14px 6px 4px}
  .js-car .pc-ico{flex-basis:40px;width:40px;height:40px}
  .js-car .pc-name{font-size:clamp(32px,10vw,44px)}
  .js-car .pc-box{padding:11px 13px}
  .js-car .pc-box p{font-size:14px;line-height:1.42}
  .js-car .pc-type{margin-top:2px;font-size:10.5px}
  .js-car .pc-req{margin-top:8px}
  .js-car .pc-card{display:flex;flex-direction:column}
  .js-car .tcar-slide[data-state=left]{transform:translate3d(-60%,0,-200px) rotateY(30deg) scale(.88)}
  .js-car .tcar-slide[data-state=right]{transform:translate3d(60%,0,-200px) rotateY(-30deg) scale(.88)}
  .tcar-ui{gap:8px}
  .tcar-btn{width:44px;height:44px}
  .tcar-pills{gap:9px;order:2;width:100%;margin-top:2px}
  .tcar-pill{width:12px;height:12px;padding:0;font-size:0;border-radius:50%;border:0;background:rgba(15,23,48,.22)}
  .tcar-pill span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tcar-pill[aria-current=true]{background:var(--accent);transform:scale(1.35)}
  .tcar-pill::after{display:none}
  .tcar-count{order:0}
  .tcar-prev{order:-1}.tcar-next{order:1}
  .tcar-pp{order:3}
  .team-assign{margin-top:44px}
}
/* móviles muy bajitos */
@media (max-width:820px) and (max-height:700px){
  .js-car .pc-card{min-height:500px}
  .js-car .pc-box p{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .js-car .tcar-slide,.js-car .tcar-slide[data-state=active]{transition:opacity .3s ease,visibility 0s}
  .js-car .tcar-slide[data-state=left],.js-car .tcar-slide[data-state=right],.js-car .tcar-slide{transform:none}
  .js-car .tcar-slide[data-state=active] .pc{animation:none}
  .js-car .pc-card{transform:none!important}
  .tcar-pill::after{display:none}
}