/* ==========================================================================
   PiSportDesk — home: escena "Mis cosas" (carpeta con post-its + pizarra
   táctica → portátil, tablet y móvil con la app). Compartido ES/EN.
   Lo mueve js/home-interactive.js (inclinación 3D con el ratón, rotación
   de deportes, vuelo de los post-its a la app y marcador en vivo).
   ========================================================================== */

.desk-scene { position: relative; padding-bottom: 8px; perspective: 1400px; }
.desk-3d {
  position: relative; transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  will-change: transform;
}
.portfolio-stage { position: relative; min-height: 470px; transform-style: preserve-3d; }

/* ---------- Carpeta abierta (apoyada sobre la mesa) ---------- */
.portfolio-open {
  position: relative; display: flex; align-items: stretch; justify-content: center;
  transform-style: preserve-3d; transform: rotateX(8deg);
  transition: opacity .45s ease .15s, transform .6s cubic-bezier(.3,.8,.3,1) .1s;
}
.portfolio-panel {
  position: relative; width: 46%; max-width: 232px; padding: 15px 12px 14px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.05), transparent 40%),
    var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: 0 30px 50px -18px rgba(0,0,0,.65), 0 2px 0 rgba(255,255,255,.03) inset;
  transition: transform .6s cubic-bezier(.3,.8,.3,1);
}
:root[data-theme="light"] .portfolio-panel { box-shadow: 0 30px 44px -20px rgba(60,50,30,.35); }
.panel-left { border-radius: 12px 3px 3px 12px; transform: rotate(-2deg) translateZ(2px); transform-origin: 100% 50%; }
.panel-right { border-radius: 3px 12px 12px 3px; transform: rotate(2deg); display: flex; flex-direction: column; }
.portfolio-spine {
  width: 9px; flex-shrink: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.35), var(--surface-3) 35%, var(--surface-3) 65%, rgba(0,0,0,.35));
  box-shadow: 0 0 12px rgba(0,0,0,.5) inset;
}
/* Al ordenar, la tapa izquierda se cierra sobre la derecha y la carpeta se hunde */
.portfolio-stage.is-ordered .portfolio-open { opacity: 0; transform: rotateX(28deg) translateY(30px) scale(.9); pointer-events: none; position: absolute; inset: 0; }
.portfolio-stage.is-ordered .panel-left { transform: rotateY(-160deg); }

.postit-label { font-family: var(--font-display); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }

/* ---------- Post-its de papel ---------- */
.panel-left { display: flex; flex-direction: column; }
.postit-board { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); align-content: space-evenly; gap: 9px 7px; padding: 2px 1px 6px; }
.postit {
  --bg: #fff38a; --bg2: #f5df55; --ink-note: #3b3312;
  position: relative; aspect-ratio: 1 / .94; padding: 9px 2px 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive; font-weight: 700; font-size: 13px; line-height: .9; hyphens: auto; -webkit-hyphens: auto;
  color: var(--ink-note); text-align: center; letter-spacing: -.01em;
  background:
    linear-gradient(180deg, rgba(0,0,0,.07) 0, rgba(0,0,0,.02) 17%, transparent 18%),
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.45), transparent 60%),
    linear-gradient(172deg, var(--bg) 0%, var(--bg2) 100%);
  border-radius: 1px 1px 3px 1px;
  box-shadow:
    0 1px 1px rgba(0,0,0,.22),
    0 8px 10px -6px rgba(0,0,0,.5),
    6px 10px 12px -8px rgba(0,0,0,.45);
  rotate: var(--r, 0deg);
  translate: var(--dx, 0) var(--dy, 0);
  transform-origin: 50% 6%;
  animation: postitBreeze 7s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -.63s);
  transition: scale .3s cubic-bezier(.3,1.6,.5,1), translate .3s cubic-bezier(.3,1.6,.5,1), rotate .3s ease, box-shadow .3s ease, opacity .25s ease;
  cursor: default; user-select: none;
}
/* Esquina inferior despegada */
.postit::after {
  content: ''; position: absolute; right: 0; bottom: 0; width: 13px; height: 13px;
  background: linear-gradient(315deg, transparent 47%, rgba(0,0,0,.16) 50%, rgba(255,255,255,.5) 56%, var(--bg2) 72%);
  border-radius: 0 0 3px 0;
}
.postit svg { width: 15px; height: 15px; flex-shrink: 0; stroke: var(--ink-note); opacity: .85; }
.postit span { display: block; max-width: 100%; }
.postit--yellow { --bg: #fff38a; --bg2: #f6df52; --ink-note: #3d3410; }
.postit--pink   { --bg: #ffc1dd; --bg2: #ff98c6; --ink-note: #4a1631; }
.postit--green  { --bg: #d4f7a6; --bg2: #b1e67a; --ink-note: #223d10; }
.postit--blue   { --bg: #c2e8ff; --bg2: #93d0fa; --ink-note: #0f2f4a; }
.postit--orange { --bg: #ffd49b; --bg2: #ffb35f; --ink-note: #4a2a08; }
.postit--violet { --bg: #e2d0ff; --bg2: #c6a5fb; --ink-note: #2f1a52; }
.postit:hover {
  scale: 1.1; translate: var(--dx, 0) calc(var(--dy, 0px) - 4px); rotate: 0deg; z-index: 3; animation-play-state: paused;
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 18px 20px -10px rgba(0,0,0,.55), 10px 18px 18px -10px rgba(0,0,0,.4);
}
/* Brisa: el papel se mueve colgado de su tira adhesiva */
@keyframes postitBreeze {
  0%, 100% { transform: perspective(300px) rotateX(0deg) rotateY(0deg); }
  30% { transform: perspective(300px) rotateX(7deg) rotateY(-3deg); }
  60% { transform: perspective(300px) rotateX(-2deg) rotateY(2deg); }
}
/* Al volver de la app, los post-its se vuelven a pegar uno a uno */
.portfolio-stage.is-restoring .postit { animation: postitStick .55s cubic-bezier(.3,1.5,.5,1) both, postitBreeze 7s ease-in-out infinite; animation-delay: calc(var(--i) * 45ms + .25s), calc(var(--i) * -.63s); }
@keyframes postitStick { 0% { opacity: 0; scale: 1.5; translate: var(--dx, 0) -18px; } 100% { opacity: 1; scale: 1; } }
.portfolio-stage.is-flying .postit:not(.postit-flyer) { opacity: 0; }

/* Copias que vuelan de la carpeta a la pantalla del portátil */
.postit-flyer { position: absolute; z-index: 30; margin: 0; pointer-events: none; animation: none !important;
  transition: transform .75s cubic-bezier(.55,0,.25,1), rotate .75s ease, opacity .25s ease; will-change: transform, opacity; }
.portfolio-stage.is-measuring, .portfolio-stage.is-measuring * { transition: none !important; animation: none !important; }

/* ---------- Pizarra táctica (marco de aluminio + superficie por deporte) ---------- */
.board-frame {
  position: relative; flex: 1; display: flex; padding: 5px; border-radius: 7px; perspective: 600px;
  background: linear-gradient(145deg, #e4e7ec, #9aa1ab 38%, #d3d7de 62%, #858b95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.25), 0 8px 14px -6px rgba(0,0,0,.55);
}
.tactic-board-svg { width: 100%; height: auto; flex: 1; display: block; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
  transition: transform .45s cubic-bezier(.5,0,.3,1), filter .45s ease; transform-origin: 50% 50%; }
.tactic-board-svg.is-swapping { transform: rotateY(90deg); filter: brightness(.6); }
.tactic-board-svg [stroke="var(--ink-faint)"] { stroke: rgba(255,255,255,.82); }
.tactic-board-svg [fill="var(--ink-faint)"] { fill: rgba(255,255,255,.85); }
.tactic-board-svg [stroke="var(--sky)"]:not(circle) { stroke: #f1f4f8; }
.tactic-board-svg path[stroke="var(--live)"] { stroke: #ffd84a; animation: tbDash .9s linear infinite; }
.tactic-board-svg circle[fill="var(--paint)"] { fill: url(#tokOrange); stroke: #7a3408; filter: url(#tokShadow); }
.tactic-board-svg circle[fill="var(--surface)"] { fill: url(#tokWhite); stroke: #1d6fd6; stroke-width: 2.2; filter: url(#tokShadow); }
.tactic-board-svg circle[fill="var(--sky)"] { fill: #6fd0ff; }
.tactic-board-svg .tb-ball { filter: url(#tokShadow); }
@keyframes tbDash { to { stroke-dashoffset: -12; } }
.tactic-caption { display: block; margin-top: 10px; font-family: var(--font-display); font-size: 11.5px; font-weight: 700; color: var(--ink-dim); text-align: center; }
.tactic-caption b { color: var(--paint-text); }
.tactic-dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.tactic-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--line); transition: background .2s ease, transform .2s ease; }
.tactic-dots span.is-active { background: var(--paint); transform: scale(1.3); }
.tactic-marker { position: absolute; width: 98px; height: auto; bottom: -14px; right: -20px; transform: rotate(-18deg) translateZ(20px); filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)); pointer-events: none; z-index: 2; }

/* ---------- Dispositivos ---------- */
.devices-row { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; visibility: hidden; transition: visibility 0s linear .9s; }
.portfolio-stage.is-ordered .devices-row { visibility: visible; transition-delay: 0s; }
.devices-fit {
  position: relative; width: 560px; height: 350px; flex-shrink: 0; margin-bottom: 6px;
  transform: scale(var(--ds, 1)); transform-origin: 50% 100%; transform-style: preserve-3d; perspective: 1100px;
}
.device { position: absolute; transform-style: preserve-3d; opacity: 0;
  transition: opacity .5s ease, transform .9s cubic-bezier(.2,1.1,.3,1); }
.portfolio-stage.is-ordered .device { opacity: 1; }

/* Portátil */
.device-laptop { left: 88px; bottom: 16px; width: 384px; transform: translateY(40px) scale(.9); transition-delay: .15s; z-index: 1; }
.portfolio-stage.is-ordered .device-laptop { transform: none; }
.laptop-lid {
  position: relative; width: 344px; margin: 0 auto; padding: 10px 10px 16px; border-radius: 15px 15px 5px 5px;
  background: linear-gradient(180deg, #2c2f36, #16171b);
  box-shadow: inset 0 0 0 1.5px #474b55, inset 0 0 0 3px #111, 0 -1px 0 #5a5f6a;
  transform-origin: 50% 100%; transform: rotateX(-86deg);
  transition: transform 1.05s cubic-bezier(.25,1.2,.35,1) .35s;
}
.portfolio-stage.is-ordered .laptop-lid { transform: rotateX(-4deg); }
.laptop-lid::before { content: ''; position: absolute; top: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #0d0f14; box-shadow: inset 0 0 0 1px #2a2e38, 0 0 0 .5px #3b3f48; }
.laptop-lid::after { content: 'PiSportDesk'; position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font: 700 6px/1 var(--font-display, sans-serif); letter-spacing: .12em; color: #5d626d; }
.laptop-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 3px; overflow: hidden; background: #0F121B; }
.laptop-deck {
  position: relative; width: 384px; height: 22px; margin-top: -1px;
  background: linear-gradient(180deg, #4a4e57 0%, #6c717b 30%, #8d929b 100%);
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
}
.laptop-deck::before { /* teclado */
  content: ''; position: absolute; left: 13%; right: 13%; top: 3px; height: 11px;
  background:
    repeating-linear-gradient(90deg, #1c1e23 0 7px, transparent 7px 8.4px),
    repeating-linear-gradient(180deg, transparent 0 2.2px, #50545d 2.2px 2.9px);
  clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%); opacity: .9;
}
.laptop-deck::after { /* trackpad */
  content: ''; position: absolute; left: 50%; width: 60px; margin-left: -30px; bottom: 1px; height: 5px; border-radius: 2px; background: rgba(0,0,0,.18);
}
.laptop-base {
  position: relative; width: 392px; margin-left: -4px; height: 9px; border-radius: 1px 1px 10px 10px;
  background: linear-gradient(180deg, #a3a8b1, #6b7079 60%, #464a52);
  box-shadow: 0 18px 26px -8px rgba(0,0,0,.7), 0 4px 6px -2px rgba(0,0,0,.4);
}
.laptop-base::before { content: ''; position: absolute; top: 0; left: 50%; width: 64px; margin-left: -32px; height: 4px; border-radius: 0 0 6px 6px; background: linear-gradient(#5b6069, #7a7f88); }

/* Tablet (delante, a la izquierda) */
.device-tablet { left: 6px; bottom: 10px; width: 150px; z-index: 3; transform: translateX(-70px) rotateY(55deg) rotateZ(-8deg); transition-delay: .5s; }
.portfolio-stage.is-ordered .device-tablet { transform: translateZ(40px) rotateY(20deg) rotateZ(-3deg); }
.tablet-body {
  position: relative; padding: 8px; border-radius: 17px; background: #111317;
  box-shadow: inset 0 0 0 1.5px #3c4049, 0 0 0 2px #7d828c, 0 0 0 3px #3a3d44, -14px 22px 30px -10px rgba(0,0,0,.7);
}
.tablet-body::before { content: ''; position: absolute; top: 3px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: #2a2e38; }
.tablet-screen { position: relative; aspect-ratio: 3 / 4; border-radius: 9px; overflow: hidden; background: #0F121B; }

/* Móvil (delante, a la derecha) */
.device-phone { right: 6px; bottom: 8px; width: 98px; z-index: 3; transform: translateX(70px) rotateY(-55deg) rotateZ(8deg); transition-delay: .65s; }
.portfolio-stage.is-ordered .device-phone { transform: translateZ(50px) rotateY(-22deg) rotateZ(4deg); }
.phone-body {
  position: relative; padding: 5px; border-radius: 17px; background: #0d0e11;
  box-shadow: inset 0 0 0 1.5px #3c4049, 0 0 0 1.8px #8a8f99, 0 0 0 2.8px #34373e, 14px 22px 26px -10px rgba(0,0,0,.7);
}
.phone-screen { position: relative; aspect-ratio: 9 / 19.5; border-radius: 13px; overflow: hidden; background: #0F121B; }
.phone-island { position: absolute; top: 5px; left: 50%; width: 24px; height: 7px; margin-left: -12px; border-radius: 6px; background: #000; z-index: 2; }

/* Reflejo de cristal en todas las pantallas */
.laptop-screen::after, .tablet-screen::after, .phone-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(118deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 34%, transparent 34.5%, transparent 100%);
}

/* Flotación suave una vez colocados (propiedad `translate`, independiente de las transiciones de `transform`) */
.portfolio-stage.is-ordered .device-tablet { animation: devFloat 6s ease-in-out 1.5s infinite; }
.portfolio-stage.is-ordered .device-phone { animation: devFloat 5.2s ease-in-out 1.8s infinite reverse; }
.portfolio-stage.is-ordered .device-laptop { animation: devFloat 7s ease-in-out 1.4s infinite; animation-name: devFloatSoft; }
@keyframes devFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes devFloatSoft { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }

/* ---------- La app dentro de las pantallas ---------- */
.app { position: absolute; inset: 0; color: #F4F1EA; font-family: var(--font-body); background: #0F121B; overflow: hidden; }
.app b, .app strong { font-family: var(--font-display); }

/* Escritorio: barra lateral + saludo + módulos */
.app--desktop { display: grid; grid-template-columns: 30px 1fr; }
.app-rail { background: #171B27; border-right: 1px solid #2A3040; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 7px 0; }
.app-rail img { width: 17px; height: 17px; margin-bottom: 4px; }
.app-rail i { width: 13px; height: 13px; border-radius: 4px; background: #262D40; }
.app-rail i.on { background: #FF8B3E; box-shadow: 0 0 8px rgba(255,139,62,.6); }
.app-main { padding: 8px 9px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.app-top { display: flex; align-items: center; gap: 6px; }
.app-top b { font-size: 11px; font-weight: 800; white-space: nowrap; }
.app-chip { font-size: 6.5px; font-weight: 700; padding: 2px 5px; border-radius: 20px; background: rgba(255,139,62,.14); color: #FF8B3E; white-space: nowrap; }
.app-search { flex: 1; height: 11px; border-radius: 6px; background: #1E2433; min-width: 10px; }
.app-avatar { width: 13px; height: 13px; border-radius: 50%; background: linear-gradient(135deg, #FF8B3E, #B98CE8); flex-shrink: 0; }
.app-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.app-tile {
  --c: #FF8B3E; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 5px 5px 9px; border-radius: 6px;
  background: #171B27; border: 1px solid #2A3040; min-width: 0;
  opacity: 0; transform: scale(.6) translateY(6px);
}
.app-tile svg { width: 12px; height: 12px; padding: 2.5px; border-radius: 4px; stroke: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); box-sizing: content-box; }
.app-tile span { font-size: 6.2px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-tile::after { content: ''; position: absolute; left: 5px; right: 5px; bottom: 4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--c) var(--p, 60%), #262D40 0); opacity: .8; }
.app-tile--yellow { --c: #E8B94B; } .app-tile--pink { --c: #FF7FB6; } .app-tile--green { --c: #8BE04D; }
.app-tile--blue { --c: #56C7F5; } .app-tile--orange { --c: #FF8B3E; } .app-tile--violet { --c: #B98CE8; }
.app-tile--cloud { --c: #8BE04D; background: linear-gradient(135deg, rgba(139,224,77,.12), #171B27 70%); }
.portfolio-stage.is-ordered .app-tile { animation: tilePop .45s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay: calc(1.05s + var(--i, 0) * 70ms); }
@keyframes tilePop { to { opacity: 1; transform: none; } }

/* Tablet: pizarra */
.app--board { display: flex; flex-direction: column; padding: 8px 7px 7px; gap: 6px; }
.app-bar { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.app-bar b { font-size: 9px; font-weight: 800; }
.app-court { flex: 1; border-radius: 5px; overflow: hidden; background: #2b67b0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.app-court svg { width: 100%; height: 100%; display: block; }
.app-tools { display: flex; gap: 4px; justify-content: center; }
.app-tools i { width: 14px; height: 14px; border-radius: 4px; background: #1E2433; }
.app-tools i:nth-child(1) { background: #FF8B3E; } .app-tools i:nth-child(2) { background: #56C7F5; }
.court-tok { transform-box: fill-box; transform-origin: center; }
.portfolio-stage.is-ordered .court-tok--a { animation: tokA 3.4s ease-in-out infinite 1.2s; }
.portfolio-stage.is-ordered .court-tok--b { animation: tokB 3.4s ease-in-out infinite 1.2s; }
.portfolio-stage.is-ordered .court-ball { animation: tokBall 3.4s ease-in-out infinite 1.2s; }
.portfolio-stage.is-ordered .court-pass { animation: tbDash .9s linear infinite; }
@keyframes tokA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, 22px); } }
@keyframes tokB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(12px, -16px); } }
@keyframes tokBall { 0%, 15% { transform: translate(0, 0); } 45%, 60% { transform: translate(-44px, 52px); } 90%, 100% { transform: translate(0, 0); } }

/* Móvil: análisis en vivo (dorsal → evento → zona del mapa, con mapa de calor) */
.app--live { display: flex; flex-direction: column; padding: 15px 5px 6px; gap: 4px; }
.live-head { display: flex; align-items: center; justify-content: space-between; }
.live-head b { font-size: 5.6px; font-weight: 800; letter-spacing: .1em; color: #A6ADC0; }
.live-rec { font-size: 4.6px; font-weight: 800; color: #FF5D6C; letter-spacing: .06em; }
.live-rec::before { content: ''; display: inline-block; width: 3.5px; height: 3.5px; margin-right: 2px; border-radius: 50%; background: #FF5D6C; vertical-align: middle; animation: livePulse 1.2s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: .2; } }
.live-score { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 3px 0; border-radius: 6px; background: #171B27; }
.live-score b { font-size: 12px; font-weight: 800; line-height: 1; }
.live-score b.l { color: #FF8B3E; } .live-score b.r { color: #56C7F5; }
.live-score b.is-bump { animation: scoreBump .6s cubic-bezier(.3,1.8,.5,1); }
@keyframes scoreBump { 0% { transform: scale(1); } 40% { transform: scale(1.5); text-shadow: 0 0 10px currentColor; } 100% { transform: scale(1); } }
.live-score i { font: 800 7px/1 'Outfit', ui-monospace, monospace; font-style: normal; font-variant-numeric: tabular-nums; color: #F4F1EA; }
.live-players { display: flex; gap: 2px; justify-content: space-between; }
.live-players span { flex: 1; text-align: center; padding: 2px 0; border-radius: 4px; background: #1E2433; font: 800 5.6px/1.1 var(--font-display); color: #A6ADC0; transition: background .2s, color .2s; }
.live-players span.on { background: #FF8B3E; color: #17130C; box-shadow: 0 0 6px rgba(255,139,62,.6); }
.live-map { position: relative; flex: 1; min-height: 0; border-radius: 5px; overflow: hidden; background: #2b67b0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.live-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.live-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(6, 1fr); }
.live-grid span {
  position: relative; display: grid; place-items: center; font: 800 5.4px/1 var(--font-display); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.5);
  border: .5px dashed rgba(255,255,255,.16); background: rgba(255,139,62, calc(var(--h, 0) * .78)); transition: background .5s ease;
}
.live-grid span.is-hit::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  border: 1.5px solid #fff; animation: zoneTap .7s ease-out forwards;
}
@keyframes zoneTap { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.live-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5px; }
.live-btns span {
  --c: #FF8B3E; padding: 4px 1px; border-radius: 4px; text-align: center; font-size: 4.8px; font-weight: 800; white-space: nowrap; overflow: hidden;
  color: #F4F1EA; background: color-mix(in srgb, var(--c) 22%, #171B27); border: .5px solid color-mix(in srgb, var(--c) 55%, transparent);
}
.live-btns span.is-press { animation: btnPress .5s ease; }
@keyframes btnPress { 0% { transform: scale(1); } 30% { transform: scale(.88); background: var(--c); color: #17130C; box-shadow: 0 0 8px var(--c); } 100% { transform: scale(1); } }
.live-btns .ev-goal { --c: #FF8B3E; } .live-btns .ev-shotOn { --c: #8BE04D; } .live-btns .ev-shotOff { --c: #A6ADC0; }
.live-btns .ev-steal { --c: #56C7F5; } .live-btns .ev-turnover { --c: #FF5D6C; } .live-btns .ev-foul { --c: #E8B94B; }
.live-log { font-size: 4.8px; font-weight: 700; color: #A6ADC0; padding: 2.5px 4px; border-radius: 4px; background: #171B27; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-log.is-new { animation: logIn .45s ease; }
@keyframes logIn { 0% { opacity: 0; transform: translateY(3px); color: #FF8B3E; } 100% { opacity: 1; transform: none; } }

/* ---------- Botón ---------- */
.folder-open-btn-wrap { text-align: center; margin-top: 18px; position: relative; z-index: 2; }
.desk-btn { gap: 9px; box-shadow: 0 10px 22px -12px rgba(255,139,62,.6); }
.desk-btn-ico { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--paint); color: #17130C; transition: transform .5s cubic-bezier(.3,1.5,.5,1); }
.desk-btn-ico svg { width: 12px; height: 12px; }
.desk-btn:hover .desk-btn-ico { transform: rotate(-12deg) scale(1.1); }
.portfolio-stage.is-ordered ~ .folder-open-btn-wrap .desk-btn-ico,
.desk-scene.is-ordered .desk-btn-ico { transform: rotate(180deg); }

@media (max-width: 640px) {
  .portfolio-stage { min-height: 300px; }
  .portfolio-panel { max-width: 162px; padding: 11px 8px 10px; }
  .postit-board { gap: 7px 5px; }
  .postit { font-size: 10px; padding: 7px 1px 3px; gap: 2px; }
  .postit svg { width: 10px; height: 10px; }
  .postit::after { width: 9px; height: 9px; }
  .tactic-marker { width: 66px; bottom: -8px; right: -12px; }
}

@media (prefers-reduced-motion: reduce) {
  .postit, .portfolio-stage.is-ordered .device, .tactic-board-svg path[stroke="var(--live)"], .court-tok, .court-ball, .live-rec::before { animation: none !important; }
  .desk-3d { transform: none !important; }
}