/* ══════════ PIXEL · carrusel de facetas ══════════
   Autocontenido: no depende de app.css. Colores por faceta llegan como --c / --c-soft / --c-glow (inline). */
.pixel-sec { position:relative; overflow:hidden; isolation:isolate; color:#fff;
  background-color:#030a24; /* respaldo: el texto blanco siempre tiene contraste */
  background-image: radial-gradient(1000px 500px at 80% 0%, rgba(99,102,241,.35), transparent 60%), radial-gradient(800px 500px at 0% 100%, rgba(6,6,231,.45), transparent 60%); }
.pixel-sec .px-grid { position:absolute; left:-50%; right:-50%; bottom:-10%; height:60%; z-index:-1; opacity:.3; pointer-events:none;
  background-image: linear-gradient(rgba(129,140,248,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(129,140,248,.35) 1px, transparent 1px);
  background-size: 56px 56px; transform: perspective(500px) rotateX(62deg); transform-origin: center top;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
  animation: pxGrid 6s linear infinite; }
@keyframes pxGrid { to { background-position: 0 56px, 0 56px; } }
.pixel-sec .px-aurora { position:absolute; inset:-20%; z-index:-1; filter: blur(70px); opacity:.4; pointer-events:none;
  background: conic-gradient(from 0deg at 50% 50%, transparent, rgba(34,211,238,.35), transparent 30%, rgba(168,85,247,.35), transparent 60%, rgba(6,6,231,.4), transparent);
  animation: pxSpin 26s linear infinite; }
@keyframes pxSpin { to { transform: rotate(360deg); } }
.px-shimmer { background: linear-gradient(90deg,#22d3ee,#a78bfa,#f0abfc,#22d3ee); background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation: pxShift 5s linear infinite; }
@keyframes pxShift { to { background-position: 300% center; } }
.px-lead { color: rgba(255,255,255,.78); }
.px-chip { display:inline-block; padding: 4px 10px; border-radius:99px; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; color:#e2e8f0; }
.px-chip.live { background: rgba(52,211,153,.15); border-color: rgba(110,231,183,.35); color:#a7f3d0; }

/* ── Carrusel ── */
.px-stage { position:relative; }
.px-stage::before, .px-stage::after { content:''; position:absolute; top:0; bottom:0; width: 12vw; max-width:160px; z-index:2; pointer-events:none; }
.px-stage::before { left:0;  background: linear-gradient(90deg, #030a24, rgba(3,10,36,0)); }
.px-stage::after  { right:0; background: linear-gradient(270deg, #030a24, rgba(3,10,36,0)); }
.px-track { --w: 220px; display:flex; gap:16px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding: 28px calc(50% - var(--w) / 2) 34px; scrollbar-width:none; -ms-overflow-style:none; outline:none; cursor:grab; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.px-track::-webkit-scrollbar { display:none; }
.px-track.dragging { scroll-snap-type:none; scroll-behavior:auto; cursor:grabbing; }
@media (min-width: 640px)  { .px-track { --w: 250px; gap:22px; } }
@media (min-width: 1280px) { .px-track { --w: 270px; } }

.px-card { --s:.86; --ry:0deg; --o:.55; position:relative; display:block; flex:0 0 var(--w); width:var(--w); height: calc(var(--w) * 1.48);
  scroll-snap-align:center; border-radius:26px; overflow:hidden; color:#fff; text-decoration:none; text-align:left;
  border:1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) #0b1235;
  transform: perspective(900px) rotateY(var(--ry)) scale(var(--s)); opacity: var(--o);
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .45s, border-color .45s, box-shadow .45s; -webkit-tap-highlight-color: transparent; user-select:none; }
.px-card:focus-visible { outline: 3px solid var(--c); outline-offset: 4px; }
.px-card.is-active { border-color: var(--c); box-shadow: 0 30px 70px -25px var(--c-glow), 0 0 0 1px var(--c-soft) inset; }
.px-card:hover { opacity: 1; }
.px-card-glow { position:absolute; left:-20%; right:-20%; bottom:-30%; height:75%; border-radius:50%; background: radial-gradient(closest-side, var(--c-glow), transparent); opacity:.6; filter: blur(8px); transition: opacity .45s; pointer-events:none; }
.px-card.is-active .px-card-glow { opacity:1; }
.px-card-media { position:absolute; left:0; right:0; top:6%; height:68%; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; }
.px-card-ring { position:absolute; top:4%; left:0; right:0; margin:auto; width:76%; aspect-ratio:1/1; border-radius:50%; border:2px solid var(--c-soft); opacity:0; transition: opacity .45s; }
.px-card.is-active .px-card-ring { opacity:1; animation: pxPulse 2.6s ease-in-out infinite; }
@keyframes pxPulse { 0%,100% { transform: scale(.94); opacity:.55; } 50% { transform: scale(1.04); opacity:1; } }
.px-card-img { position:relative; height:100%; width:auto; max-width:92%; object-fit:contain; filter: drop-shadow(0 18px 22px rgba(0,0,0,.5)); }
.px-card.is-active .px-card-img { animation: pxBob 3.2s ease-in-out infinite; }
@keyframes pxBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.px-card-info { position:absolute; left:0; right:0; bottom:0; padding: 26px 16px 16px; background: linear-gradient(180deg, rgba(5,10,35,0), rgba(5,10,35,.92) 45%); }
.px-card-name { display:block; font-weight:800; font-size:1.05rem; letter-spacing:-.01em; color:#fff; }
.px-card-role { display:block; font-size:.75rem; color: rgba(255,255,255,.72); margin-top:2px; }
.px-card-cta { display:inline-flex; align-items:center; gap:4px; margin-top:8px; padding: 5px 10px; border-radius:99px; font-size:.72rem; font-weight:700; color:#fff; background: var(--c-soft); border:1px solid var(--c);
  opacity:0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.px-card.is-active .px-card-cta, .px-card:hover .px-card-cta, .px-card:focus-visible .px-card-cta { opacity:1; transform:none; }
.px-badge { position:absolute; top:12px; left:12px; z-index:2; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; font-weight:700; letter-spacing:.08em;
  padding: 3px 8px; border-radius:99px; background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff; }

/* Controles */
.px-arrow { position:absolute; top:50%; z-index:3; width:52px; height:52px; margin-top:-26px; border-radius:50%; display:none; align-items:center; justify-content:center; color:#fff; cursor:pointer;
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .25s, transform .25s; }
.px-arrow:hover { background: rgba(255,255,255,.24); transform: scale(1.06); }
.px-arrow.prev { left: 3vw; }
.px-arrow.next { right: 3vw; }
@media (min-width: 768px) { .px-arrow { display:flex; } }
.px-controls { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:4px; }
.px-nav { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer;
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); }
@media (min-width: 768px) { .px-nav { display:none; } }
.px-dots { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; }
.px-dot { width:7px; height:7px; padding:0; border:0; border-radius:99px; background: rgba(255,255,255,.3); cursor:pointer; transition: width .35s, background .35s; }
.px-dot.on { width:24px; background: linear-gradient(90deg,#22d3ee,#a78bfa); }
.px-counter { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px; color: rgba(255,255,255,.7); min-width:56px; text-align:center; }

/* ── Modal ── */
.px-overlay { position:fixed; inset:0; z-index:120; display:flex; align-items:flex-end; justify-content:center; padding:0; background: rgba(2,6,23,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity:0; visibility:hidden; transition: opacity .3s, visibility .3s; }
.px-overlay.open { opacity:1; visibility:visible; }
@media (min-width: 640px) { .px-overlay { align-items:center; padding:16px; } }
.px-modal { --c:#6366f1; --c-soft: rgba(99,102,241,.35); --c-glow: rgba(99,102,241,.7);
  position:relative; width:100%; max-width:880px; max-height:92vh; overflow-y:auto; color:#fff; border-radius:24px 24px 0 0; border:1px solid rgba(255,255,255,.12);
  background-color:#050b26; background-image: radial-gradient(600px 400px at 15% 30%, var(--c-soft), transparent 70%);
  transform: translateY(30px); transition: transform .4s cubic-bezier(.22,1,.36,1); }
.px-overlay.open .px-modal { transform:none; }
/* altura visible real en móviles (92vh incluye la barra del navegador y corta el final) */
@supports (height: 100dvh) { .px-modal { max-height: 92dvh; } }
.px-modal { overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 640px) { .px-modal { border-radius:24px; } }
.px-modal-grid { display:grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .px-modal-grid { grid-template-columns: 2fr 3fr; } }
.px-modal-stage { position:relative; display:flex; align-items:flex-end; justify-content:center; min-height:200px; padding: 28px 24px 0; }
.px-modal-glow { position:absolute; bottom:-30px; left:0; right:0; margin:auto; width:260px; height:260px; border-radius:50%; background: radial-gradient(closest-side, var(--c-glow), transparent); filter: blur(12px); }
.px-modal-img { position:relative; width:150px; height:auto; animation: pxBob 3.4s ease-in-out infinite; filter: drop-shadow(0 20px 30px rgba(0,0,0,.5)); }
@media (min-width: 640px) { .px-modal-img { width:100%; max-width:240px; } }
.px-modal-body { padding: 24px; display:flex; flex-direction:column; }
@media (min-width: 640px) { .px-modal-body { padding: 32px; } }
.px-close { position:absolute; top:12px; right:12px; z-index:2; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; background: rgba(255,255,255,.12); border:0; cursor:pointer; }
.px-close:hover { background: rgba(255,255,255,.22); }
.px-role { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: rgba(255,255,255,.65); }
.px-desc { color: rgba(255,255,255,.82); }
.px-skill-ok { width:20px; height:20px; border-radius:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; background: var(--c-soft); color:#fff; }
.px-chat { background: rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:14px; font-size:13px; }
.px-bubble-user { background: rgba(255,255,255,.16); color:#fff; border-radius:16px 16px 4px 16px; padding: 8px 12px; max-width:85%; }
.px-bubble-bot { background:#fff; color:#011750; border-radius:16px 16px 16px 4px; padding: 8px 12px; max-width:85%; }
.px-typing span { display:inline-block; width:6px; height:6px; margin:0 1px; border-radius:50%; background:#0606e7; animation: pxDot 1.2s infinite; }
.px-typing span:nth-child(2) { animation-delay:.2s; } .px-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes pxDot { 0%,60%,100% { opacity:.3; transform:none; } 30% { opacity:1; transform: translateY(-3px); } }
.px-actions { display:flex; flex-direction:column; gap:8px; margin-top:22px; }
@media (min-width: 640px) { .px-actions { flex-direction:row; } }
.px-btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding: 14px 18px; border-radius:14px; font-weight:700; font-size:14px; color:#fff; text-decoration:none; transition: filter .2s, background .2s; }
.px-try { background: var(--c); box-shadow: 0 14px 30px -10px var(--c-glow); }
.px-try:hover { filter: brightness(1.12); }
.px-ghost { background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); }
.px-ghost:hover { background: rgba(255,255,255,.2); }
@media (max-width: 639px) { .px-chat { order: 3; } .px-actions, .px-note { order: 2; } }

@media (prefers-reduced-motion: reduce) {
  .pixel-sec *, .px-overlay * { animation: none !important; }
  .px-track { scroll-behavior:auto; }
}