/* ID Marketing 360 — galeria de demos por giro (/desarrollo-web/#demos) y visor (/demos/). */
.demo-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 34px;max-width:900px}
.demo-chip{font:600 .9rem var(--cuerpo,Manrope);color:var(--suave,#b5acd0);background:rgba(143,77,255,.08);border:1px solid var(--linea,rgba(190,160,255,.14));border-radius:999px;padding:0 18px;min-height:44px;cursor:pointer;transition:color .2s,background .2s,border-color .2s,transform .2s}
.demo-chip:hover{color:#fff;border-color:var(--linea2,rgba(190,160,255,.28));transform:translateY(-1px)}
.demo-chip.on{color:#fff;background:linear-gradient(100deg,#6601f1,#8f4dff);border-color:transparent;box-shadow:0 8px 24px rgba(102,1,241,.35)}
.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:1000px){.demo-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.demo-grid{grid-template-columns:1fr}}
.demo-card{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--panel,#130b2a),var(--bg2,#0e0820));border:1px solid var(--linea,rgba(190,160,255,.14));border-radius:var(--radio,22px);overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s}
.demo-card:hover{border-color:var(--linea2,rgba(190,160,255,.28));box-shadow:0 24px 60px rgba(102,1,241,.22);transform:translateY(-4px)}
.demo-card.oculta{display:none}
.demo-card.entra{animation:demoEntra .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes demoEntra{from{opacity:0;transform:translateY(16px) scale(.98)}}
.demo-pantalla{position:relative;margin:14px 14px 0;border-radius:14px;overflow:hidden;background:#0b0718;border:1px solid rgba(255,255,255,.08);cursor:ns-resize;outline:none}
.demo-pantalla:focus-visible{box-shadow:0 0 0 2px var(--lila,#c4a8ff)}
.demo-barra{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#1a1333;border-bottom:1px solid rgba(255,255,255,.06)}
.demo-barra i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.demo-barra i:nth-child(2){background:#febc2e}.demo-barra i:nth-child(3){background:#28c840}
.demo-barra span{margin-left:8px;flex:1;font:500 .72rem var(--cuerpo,Manrope);color:#8a80a8;background:rgba(255,255,255,.05);border-radius:6px;padding:3px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-vista{height:300px;overflow:hidden}
.demo-vista img{width:100%;height:auto;display:block;transform:translateY(0);transition:transform 1.1s cubic-bezier(.3,.7,.2,1)}
.demo-pantalla:hover .demo-vista img,.demo-pantalla:focus-visible .demo-vista img,.demo-pantalla.activo .demo-vista img{transform:translateY(calc(-100% + 300px));transition:transform var(--dur,7s) linear}
.demo-pista{position:absolute;right:12px;bottom:12px;font:600 .75rem var(--cuerpo,Manrope);color:#fff;background:rgba(7,4,15,.72);backdrop-filter:blur(8px);padding:6px 12px;border-radius:999px;transition:opacity .3s;pointer-events:none}
.demo-pantalla:hover .demo-pista,.demo-pantalla.activo .demo-pista{opacity:0}
.demo-pie{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.demo-etqs{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.demo-etqs .etq{font:700 .7rem var(--tit,Sora);letter-spacing:.08em;text-transform:uppercase;color:#48e0ff;background:rgba(72,224,255,.1);border:1px solid rgba(72,224,255,.25);padding:4px 10px;border-radius:999px}
.demo-giro{font:600 .78rem var(--cuerpo,Manrope);color:var(--lila,#c4a8ff)}
.demo-pie h3{font-size:1.25rem;margin:0 0 6px}
.demo-pie p{color:var(--suave,#b5acd0);font-size:.95rem;margin:0 0 16px}
.demo-botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.demo-botones .boton{min-height:44px}
@media (max-width:640px){.demo-vista{height:260px}.demo-pantalla:hover .demo-vista img,.demo-pantalla.activo .demo-vista img{transform:translateY(calc(-100% + 260px))}}
@media (hover:none){.demo-pantalla:hover .demo-vista img{transform:none;transition:transform 1.1s}.demo-pantalla.activo .demo-vista img{transform:translateY(calc(-100% + 260px));transition:transform var(--dur,7s) linear}.demo-pantalla{cursor:pointer}}

/* ---------- visor ---------- */
body.visor{margin:0;height:100dvh;display:flex;flex-direction:column;background:#07040f radial-gradient(ellipse at 50% 0%,rgba(102,1,241,.25),transparent 60%);color:#ece8f7;font:15px/1.4 Manrope,system-ui,sans-serif;overflow:hidden}
.visor *{box-sizing:border-box}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.visor-barra{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(190,160,255,.14);background:rgba(7,4,15,.8);backdrop-filter:blur(14px);flex-wrap:wrap}
.visor-volver{display:flex;align-items:center;gap:6px;color:#ece8f7;text-decoration:none;min-height:44px;padding:0 6px;border-radius:10px}
.visor-volver svg{width:20px;height:20px}.visor-volver:hover{background:rgba(143,77,255,.14)}
.visor-sel select{font:600 15px Manrope;color:#fff;background:#130b2a;border:1px solid rgba(190,160,255,.28);border-radius:10px;min-height:44px;padding:0 12px;max-width:62vw}
.visor-disp{display:flex;gap:4px;background:#130b2a;border:1px solid rgba(190,160,255,.14);border-radius:12px;padding:4px;margin:0 auto}
.visor-disp button{display:flex;align-items:center;gap:6px;font:600 .85rem Manrope;color:#b5acd0;background:none;border:0;border-radius:9px;padding:0 14px;min-height:40px;min-width:44px;cursor:pointer;transition:background .2s,color .2s}
.visor-disp button svg{width:18px;height:18px}
.visor-disp button[aria-pressed="true"]{background:linear-gradient(100deg,#6601f1,#8f4dff);color:#fff}
.visor-acc{display:flex;gap:8px}
.visor-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(190,160,255,.28);color:#ece8f7;text-decoration:none;font-weight:600;font-size:.88rem;white-space:nowrap}
.visor-btn:hover{border-color:#c4a8ff}.visor-btn--lleno{background:linear-gradient(100deg,#6601f1,#8f4dff);border-color:transparent}
.visor-escena{flex:1;position:relative;overflow:hidden;display:grid;place-items:center;padding:18px}
.disp{position:absolute;left:50%;top:50%;transform-origin:center center;transition:width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1)}
.disp-marco{position:relative;width:100%;height:100%;background:#111;border-radius:18px;padding:14px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08) inset}
.disp iframe{width:100%;height:100%;border:0;border-radius:6px;background:#fff;display:block}
.disp-cam{position:absolute;top:5px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#333}
.disp-base{display:none}
.disp[data-v="escritorio"] .disp-marco{border-radius:16px 16px 4px 4px}
.disp[data-v="escritorio"] .disp-base{display:block;position:absolute;left:-7%;right:-7%;bottom:-22px;height:22px;background:linear-gradient(#cfcfd6,#8c8c96);border-radius:2px 2px 14px 14px}
.disp[data-v="escritorio"] .disp-base::before{content:"";position:absolute;left:42%;right:42%;top:0;height:8px;background:#a8a8b0;border-radius:0 0 8px 8px}
.disp[data-v="tablet"] .disp-marco{border-radius:34px;padding:26px 18px}
.disp[data-v="tablet"] .disp-cam{top:11px}
.disp[data-v="movil"] .disp-marco{border-radius:48px;padding:40px 14px 18px;background:#0d0d0f;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 3px #2a2a30 inset}
.disp[data-v="movil"] iframe{border-radius:36px}
.disp[data-v="movil"] .disp-cam{top:12px;width:80px;height:20px;margin-left:-40px;border-radius:20px;background:#000;z-index:2}
@media (max-width:760px){
  .visor-barra{gap:8px;padding:8px 10px}
  .visor-sel{flex:1}.visor-sel select{width:100%;max-width:none}
  .visor-disp{order:3;margin:0}.visor-disp span{display:none}
  .visor-acc{order:4;margin-left:auto}.visor-btn{padding:0 12px;font-size:.8rem}
  #visor-nueva{font-size:0;width:44px;justify-content:center;padding:0}#visor-nueva::after{content:"↗";font-size:1.1rem}
  .visor-escena{padding:10px}
}
@media (prefers-reduced-motion:reduce){.demo-card,.demo-vista img,.disp{transition:none!important;animation:none!important}.demo-pantalla:hover .demo-vista img,.demo-pantalla.activo .demo-vista img{transform:none}}