/* ══════════════════════════════════════════════════════════════════
   Portadas animadas de las tarjetas de prompts.
   Mismo lenguaje que el Arsenal de IA del Panel de Maestría, en azul
   del Club: fondo propio por tarjeta, halo dorado, barrido de luz y
   una micro-escena que cuenta de qué va el prompt.
   ══════════════════════════════════════════════════════════════════ */
.pr-ban{position:relative;border-radius:13px;overflow:hidden;margin-bottom:14px;
  aspect-ratio:16/6.5;background:linear-gradient(135deg,#081020,#101d38 55%,#16264a);
  border:1px solid rgba(201,160,64,.26)}
.prb{position:absolute;inset:0;display:flex;align-items:center;gap:13px;padding:14px}
.prb-bg{position:absolute;inset:0}
.prb-glow{position:absolute;inset:-40%;pointer-events:none;
  background:radial-gradient(400px 210px at 78% 12%,rgba(201,160,64,.22),rgba(201,160,64,0) 62%)}
/* el barrido de luz, igual que en el Máster */
.pr-ban::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.08) 46%,transparent 60%);
  transform:translateX(-100%);animation:prbSweep 3.8s ease-in-out infinite}
@keyframes prbSweep{55%,100%{transform:translateX(100%)}}
.prb-cursor{display:inline-block;width:7px;height:11px;background:var(--gold);border-radius:1px;
  animation:prbBlink 1s steps(1) infinite;vertical-align:middle}
@keyframes prbBlink{50%{opacity:0}}
.prb-chip{position:relative;z-index:2;background:rgba(201,160,64,.14);
  border:1px solid rgba(201,160,64,.42);color:var(--gold-light);border-radius:12px;
  padding:4px 10px;font-size:10px;font-weight:700;white-space:nowrap}
.prb-side{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px;
  align-items:flex-start;flex:0 1 auto;max-width:46%}

/* ① títulos — buscador que teclea + las dos piezas */
.prb-a{flex-direction:column;align-items:flex-start;justify-content:center;gap:9px;padding:14px 17px}
.prb-a .prb-bg{background:linear-gradient(135deg,#0a1226,#132449 52%,#17306b)}
.prb-a .prb-glow{background:radial-gradient(330px 185px at 16% 105%,rgba(30,92,232,.38),rgba(30,92,232,0) 62%)}
.prb-search{position:relative;z-index:2;display:flex;align-items:center;gap:7px;max-width:100%;
  background:rgba(7,11,20,.82);border:1px solid rgba(201,160,64,.42);border-radius:999px;padding:6px 13px}
.prb-search .mag{font-size:10px;opacity:.75;flex:none}
.prb-search .q{font-size:11px;color:#E9E2D2;white-space:nowrap;overflow:hidden;display:inline-block;
  width:0;animation:prbTeclea 7s steps(25,end) infinite}
@keyframes prbTeclea{0%{width:0}40%,62%{width:12.4em}72%,100%{width:0}}
.prb-split{position:relative;z-index:2;display:flex;align-items:center;gap:7px}
.prb-split .pc{border-radius:7px;padding:4px 10px;font-size:8.5px;font-weight:800;letter-spacing:.12em}
.prb-split .pc-cta{background:rgba(201,160,64,.22);border:1px solid rgba(201,160,64,.75);color:var(--gold-light)}
.prb-split .pc-com{background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.5);color:#8FE3C0}
.prb-split .pc-plus{color:var(--gold);font-weight:900;font-size:12px}

/* ② los 5 segundos — cuenta atrás + retención */
.prb-b{justify-content:space-between;padding:14px 18px}
.prb-b .prb-bg{background:linear-gradient(135deg,#140d1e,#26123a 52%,#3a1750)}
.prb-b .prb-glow{background:radial-gradient(320px 180px at 22% 0%,rgba(201,160,64,.3),rgba(201,160,64,0) 60%)}
.prb-reloj{position:relative;z-index:2;display:flex;align-items:baseline;gap:5px}
.prb-reloj b{font-family:'Orbitron',sans-serif;font-size:34px;color:var(--gold-xlight);
  line-height:1;animation:prbCuenta 5s steps(1) infinite}
@keyframes prbCuenta{0%{content:"5"}100%{opacity:1}}
.prb-reloj i{font-style:normal;font-size:9px;letter-spacing:.16em;color:var(--gray-2)}
.prb-ret{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.prb-ret .rl{width:88px;height:5px;border-radius:3px;background:rgba(255,255,255,.1);
  overflow:hidden;position:relative}
.prb-ret .rl i{position:absolute;inset:0;transform-origin:left;border-radius:3px;
  background:linear-gradient(90deg,#34d399,var(--gold));animation:prbSube 4.5s ease-in-out infinite}
@keyframes prbSube{0%,8%{transform:scaleX(.14)}48%,72%{transform:scaleX(.92)}96%,100%{transform:scaleX(.14)}}
.prb-ret .rt{font-size:8px;letter-spacing:.14em;color:var(--gray-2);font-weight:700}

/* ③ 30 ideas — rejilla que se enciende */
.prb-c{justify-content:space-between;padding:14px 16px}
.prb-c .prb-bg{background:linear-gradient(135deg,#0a1a1c,#0e2f33 52%,#124049)}
.prb-c .prb-glow{background:radial-gradient(320px 180px at 80% 100%,rgba(52,211,153,.24),rgba(52,211,153,0) 62%)}
.prb-rej{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);gap:5px;
  flex:1;max-width:190px}
.prb-rej i{height:11px;border-radius:3px;background:rgba(255,255,255,.08);
  animation:prbEnciende 3.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes prbEnciende{0%,100%{background:rgba(255,255,255,.08)}
  40%,60%{background:rgba(201,160,64,.75)}}

/* ④ guion largo — documento escribiéndose */
.prb-d .prb-bg{background:linear-gradient(135deg,#0B1220,#16233E 55%,#1B2A4A)}
.prb-doc{position:relative;z-index:2;background:rgba(7,11,20,.72);
  border:1px solid rgba(201,160,64,.4);border-radius:10px;padding:10px 12px;
  flex:0 1 54%;min-width:0;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.prb-doc-t{font-size:8px;font-weight:800;letter-spacing:.14em;color:var(--gold-light);
  margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prb-doc i{display:block;height:5px;border-radius:3px;margin-bottom:6px;
  background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.05))}
.prb-doc i.l1{width:92%;background:linear-gradient(90deg,rgba(201,160,64,.75),rgba(201,160,64,.2))}
.prb-doc i.l2{width:78%}
.prb-doc i.l3{width:86%}
.prb-doc i.l4{width:52%;margin-bottom:0}

/* ⑤ clip vertical */
.prb-e{justify-content:center;gap:16px}
.prb-e .prb-bg{background:linear-gradient(135deg,#1a0c18,#2e1030 52%,#3d1440)}
.prb-e .prb-glow{background:radial-gradient(300px 170px at 30% 0%,rgba(232,192,96,.26),rgba(232,192,96,0) 60%)}
.prb-vert{position:relative;z-index:2;width:38px;height:64px;border-radius:7px;
  border:1px solid rgba(201,160,64,.55);background:rgba(7,11,20,.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.pv-play{width:0;height:0;border-left:11px solid var(--gold-xlight);
  border-top:7px solid transparent;border-bottom:7px solid transparent}
.pv-bar{width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.14);
  overflow:hidden;position:relative}
.pv-bar i{position:absolute;inset:0;transform-origin:left;background:var(--gold);
  animation:prbAvanza 3.4s linear infinite}
@keyframes prbAvanza{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}

/* ⑥ portada */
.prb-f{justify-content:space-between;padding:13px 16px}
.prb-f .prb-bg{background:linear-gradient(135deg,#101020,#1c1a3c 52%,#262254)}
.prb-thumb{position:relative;z-index:2;width:104px;height:58px;border-radius:7px;overflow:hidden;
  border:1px solid rgba(201,160,64,.5);background:linear-gradient(140deg,#243056,#141c34);
  display:flex;align-items:flex-end;padding:5px}
.pt-cara{position:absolute;right:9px;top:8px;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(140deg,#e8c060,#9b7520)}
.pt-tx{position:relative;font-size:8.5px;font-weight:900;line-height:1.15;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9);max-width:66px;
  animation:prbCambia 5s steps(1) infinite}
@keyframes prbCambia{0%,49%{opacity:1}50%,54%{opacity:.25}55%,100%{opacity:1}}

/* ⑦ un video en 5 clips */
.prb-g{flex-direction:column;align-items:flex-start;justify-content:center;gap:11px;padding:14px 17px}
.prb-g .prb-bg{background:linear-gradient(135deg,#0d1424,#152a4e 52%,#1b3766)}
.prb-corte{position:relative;z-index:2;display:flex;gap:4px;width:100%;max-width:210px}
.prb-corte i{flex:1;height:14px;border-radius:3px;
  background:linear-gradient(180deg,rgba(201,160,64,.75),rgba(201,160,64,.3));
  animation:prbParte 3.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes prbParte{0%,100%{transform:translateY(0);opacity:.55}
  45%,60%{transform:translateY(-5px);opacity:1}}

/* ⑧ que suene a ti — onda de voz */
.prb-h{justify-content:center}
.prb-h .prb-bg{background:linear-gradient(135deg,#0a1520,#0f2d3c 52%,#134152)}
.prb-onda{position:relative;z-index:2;display:flex;align-items:center;gap:3px;height:40px}
.prb-onda i{width:3px;border-radius:2px;background:linear-gradient(180deg,var(--gold-xlight),var(--gold-dark));
  height:10px;animation:prbHabla 1.5s ease-in-out infinite;animation-delay:var(--d)}
@keyframes prbHabla{0%,100%{height:7px;opacity:.5}50%{height:34px;opacity:1}}

/* ⑨ calendario */
.prb-i{justify-content:space-between;padding:14px 16px}
.prb-i .prb-bg{background:linear-gradient(135deg,#0d1020,#1a1d40 52%,#232659)}
.prb-cal{position:relative;z-index:2;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
  flex:1;max-width:160px}
.prb-cal i{aspect-ratio:1;border-radius:2px;background:rgba(255,255,255,.08);
  animation:prbLlena 4.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes prbLlena{0%,100%{background:rgba(255,255,255,.08)}
  45%,65%{background:rgba(52,211,153,.7)}}

/* ⑩ por qué funcionó — la gráfica */
.prb-j{justify-content:space-between;padding:14px 16px}
.prb-j .prb-bg{background:linear-gradient(135deg,#0a1a12,#0f3323 52%,#124a30)}
.prb-j .prb-glow{background:radial-gradient(300px 170px at 85% 0%,rgba(52,211,153,.3),rgba(52,211,153,0) 60%)}
.prb-graf{position:relative;z-index:2;display:flex;align-items:flex-end;gap:6px;height:46px}
.prb-graf i{width:13px;border-radius:3px 3px 0 0;height:var(--h);transform-origin:bottom;
  background:linear-gradient(180deg,var(--gold-xlight),rgba(201,160,64,.35));
  animation:prbCrece 3.4s ease-out infinite;animation-delay:var(--d)}
@keyframes prbCrece{0%{transform:scaleY(.1)}35%,85%{transform:scaleY(1)}100%{transform:scaleY(.1)}}

/* ⑪ auditoría — el medidor */
.prb-k{justify-content:space-between;padding:14px 18px}
.prb-k .prb-bg{background:linear-gradient(135deg,#1c1008,#3a1f0c 52%,#4d2a10)}
.prb-med{position:relative;z-index:2;width:72px;height:38px;overflow:hidden}
.pm-arco{position:absolute;inset:0;border-radius:72px 72px 0 0;
  border:5px solid transparent;
  background:conic-gradient(from 270deg at 50% 100%,#e5484d 0deg,#e8c060 45deg,#34d399 90deg,transparent 90deg) border-box;
  -webkit-mask:radial-gradient(circle at 50% 100%,transparent 58%,#000 59%);
  mask:radial-gradient(circle at 50% 100%,transparent 58%,#000 59%)}
.pm-aguja{position:absolute;left:50%;bottom:0;width:2px;height:31px;border-radius:2px;
  background:var(--white);transform-origin:bottom center;
  animation:prbAguja 4s ease-in-out infinite}
@keyframes prbAguja{0%,100%{transform:translateX(-50%) rotate(-62deg)}
  50%{transform:translateX(-50%) rotate(38deg)}}

/* ⑫ descripción y etiquetas */
.prb-l .prb-bg{background:linear-gradient(135deg,#0b1320,#14243f 55%,#1a2f52)}
.prb-tags{position:relative;z-index:2;display:flex;flex-direction:column;gap:5px;
  align-items:flex-start;max-width:44%}
.prb-tags span{font-size:9px;font-weight:700;color:#8FB6F0;background:rgba(30,92,232,.16);
  border:1px solid rgba(30,92,232,.42);border-radius:8px;padding:3px 8px;white-space:nowrap;
  animation:prbTag 3.6s ease-in-out infinite}
.prb-tags span:nth-child(2){animation-delay:.3s}
.prb-tags span:nth-child(3){animation-delay:.6s}
@keyframes prbTag{0%,100%{opacity:.5;transform:translateX(-3px)}45%,65%{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .pr-ban::after,.prb-rej i,.prb-cal i,.prb-onda i,.prb-graf i,.prb-corte i,
  .pm-aguja,.prb-search .q,.pv-bar i,.prb-ret .rl i,.prb-tags span{animation:none}
  .prb-search .q{width:auto}
}

/* ⑬ retrato con IA — la malla facial que se lee sobre el rostro */
.prb-m{justify-content:space-between;padding:13px 16px}
.prb-m .prb-bg{background:linear-gradient(135deg,#14101f,#241a38 52%,#2f2049)}
.prb-m .prb-glow{background:radial-gradient(320px 180px at 22% 0%,rgba(201,160,64,.28),rgba(201,160,64,0) 60%)}
.prb-retrato{position:relative;z-index:2;width:56px;height:62px;border-radius:9px;
  border:1px solid rgba(201,160,64,.5);background:rgba(7,11,20,.55);overflow:hidden}
.pr-silueta{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:30px;height:38px;border-radius:50% 50% 45% 45%;
  background:linear-gradient(160deg,rgba(232,192,96,.3),rgba(201,160,64,.12))}
.pt-pt{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;
  background:var(--gold-xlight);box-shadow:0 0 5px rgba(255,217,125,.9);
  animation:prbPunto 3.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes prbPunto{0%,100%{opacity:.25;transform:scale(.7)}45%,62%{opacity:1;transform:scale(1)}}
.pt-scan{position:absolute;left:0;right:0;height:1px;top:0;
  background:linear-gradient(90deg,transparent,var(--gold-xlight),transparent);
  animation:prbScan 3.4s ease-in-out infinite}
@keyframes prbScan{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}