/* Banner animado de Pala360 (espacio de la página del profesor). Todo bajo .p360b. */
.p360b{
  --noche:#0E1A17;--pista:#0F7A6B;--bola:#D8FF3E;--revancha:#FF6B4A;--arena:#F4F1EA;
  --accent:var(--bola);--ink:var(--arena);--dur:5200ms;
  --mark:clamp(128px,17vw,208px);
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(20px,4vw,56px);
  min-height:clamp(240px,26vw,300px);
  padding:clamp(22px,3.4vw,44px) clamp(22px,4.4vw,60px);
  border-radius:20px;background-color:var(--noche);color:var(--ink);
  font-family:"Instrument Sans",system-ui,sans-serif;
  transition:background-color .9s cubic-bezier(.65,0,.35,1);
  box-sizing:border-box;
}
.p360b *,.p360b *::before,.p360b *::after{box-sizing:border-box}
.p360b[data-bg="pista"]{background-color:var(--pista)}

/* Cancha de fondo */
.p360b__court{position:absolute;inset:-10% -5% -10% 38%;z-index:-1;opacity:.09;pointer-events:none;
  animation:p360b-drift 18s ease-in-out infinite alternate}
.p360b__court svg{width:100%;height:100%}
@keyframes p360b-drift{from{transform:translateX(0) rotate(-4deg)}to{transform:translateX(-4%) rotate(2deg)}}

/* Marca superior */
.p360b__brand{display:flex;align-items:center;gap:8px;margin-bottom:clamp(14px,2vw,22px);
  font-family:"Archivo",sans-serif;font-weight:800;font-stretch:112%;font-size:15px;letter-spacing:-.01em}
.p360b__brand b{font-weight:800;color:var(--accent);transition:color .6s}
.p360b__mini{display:grid;grid-template-columns:repeat(2,7px);gap:3px}
.p360b__mini i{width:7px;height:7px;border-radius:50%;background:var(--ink)}
.p360b__mini i:last-child{background:var(--accent);transition:background .6s}

/* Mensajes */
.p360b__stage{display:grid}
.p360b__slide{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}
.p360b__slide.is-active{pointer-events:auto}
.p360b__slide>*{opacity:0;transform:translateY(22px);
  transition:opacity .35s ease,transform .35s ease}
.p360b__slide.is-active>*{opacity:1;transform:none;
  transition:opacity .6s ease calc(var(--d,0) * 90ms + 180ms),transform .7s cubic-bezier(.2,.9,.25,1.15) calc(var(--d,0) * 90ms + 180ms)}
.p360b__slide.is-leaving>*{opacity:0;transform:translateY(-16px)}
.p360b__eyebrow{--d:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.p360b__title{--d:1;margin:0;max-width:16ch;font-family:"Archivo",sans-serif;font-weight:800;font-stretch:110%;
  font-size:clamp(27px,3.7vw,46px);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.p360b__title em{font-style:normal;color:var(--accent)}
.p360b__sub{--d:2;margin:12px 0 0;max-width:42ch;font-size:clamp(15px,1.35vw,17px);line-height:1.5;color:color-mix(in srgb,var(--ink) 82%,transparent)}
.p360b__cta{--d:3;margin-top:18px;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;
  background:var(--accent);color:var(--noche);font-weight:600;font-size:15px;text-decoration:none;
  transition:opacity .6s ease calc(var(--d) * 90ms + 180ms),transform .7s cubic-bezier(.2,.9,.25,1.15) calc(var(--d) * 90ms + 180ms),filter .2s}
.p360b__cta:hover{filter:brightness(1.08)}
.p360b__cta:focus-visible,.p360b__bar:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Barras de progreso */
.p360b__bars{display:flex;gap:6px;margin-top:clamp(18px,2.4vw,28px)}
.p360b__bar{all:unset;cursor:pointer;width:28px;height:4px;border-radius:4px;background:color-mix(in srgb,var(--ink) 22%,transparent);overflow:hidden;position:relative}
.p360b__bar span{position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:var(--ink)}
.p360b__bar.is-done span{transform:scaleX(1)}
.p360b__bar.is-active span{animation:p360b-fill var(--dur) linear forwards}
.p360b.is-paused .p360b__bar.is-active span{animation-play-state:paused}
@keyframes p360b-fill{to{transform:scaleX(1)}}

/* Símbolo: la grilla gira 90° por mensaje → 360° */
.p360b__mark{width:var(--mark);height:var(--mark);display:grid;place-items:center}
.p360b__grid{--x:calc(var(--mark) / 2.5);display:grid;grid-template-columns:repeat(2,var(--x));gap:calc(var(--x) / 2);
  transition:transform 1.1s cubic-bezier(.68,-0.35,.27,1.35)}
.p360b__grid i{width:var(--x);height:var(--x);border-radius:50%;background:var(--ink);transition:background-color .6s}
.p360b__grid i:last-child{background:var(--accent)}
.p360b__grid.is-hop i{animation:p360b-hop .7s cubic-bezier(.3,1.6,.5,1) both}
.p360b__grid.is-hop i:nth-child(2){animation-delay:.06s}
.p360b__grid.is-hop i:nth-child(3){animation-delay:.12s}
.p360b__grid.is-hop i:nth-child(4){animation-delay:.18s}
@keyframes p360b-hop{0%{scale:1}35%{scale:.72}100%{scale:1}}

/* Móvil */
@media (max-width:640px){
  .p360b{grid-template-columns:1fr;--mark:64px;padding:22px 20px 24px;min-height:0}
  .p360b__mark{position:absolute;top:18px;right:18px}
  .p360b__court{inset:-10% -40% -10% 20%}
}
@media (prefers-reduced-motion:reduce){
  .p360b__court{animation:none}
  .p360b__grid{transition:none}
  .p360b__grid.is-hop i{animation:none}
  .p360b__slide>*,.p360b__slide.is-active>*{transform:none!important}
}