/* ══════════════════════════════════════════════════════════════════════════
   PORTADAS DE LAS HERRAMIENTAS — la franja de arriba de cada tarjeta
   ──────────────────────────────────────────────────────────────────────────
   Cada herramienta enseña en 3D lo que hace. Van rehechas: la primera versión
   tenía una puerta de caja fuerte que al abrirse parecía un panel suelto
   flotando, y unas rayas sueltas que no se leían como nada.

   Ahora cada escena enseña el OBJETO de la herramienta, con volumen y sin
   piezas que se despeguen: la Bóveda es su catálogo de formatos, el Arsenal
   es un prompt escribiéndose y Tareas es su tablero.

   Van también en el celular: las tarjetas son las mismas que en la web, así
   que la portada tiene que estar en los dos sitios o parecen dos productos.
   ══════════════════════════════════════════════════════════════════════════ */
.tool .cab{perspective:680px;perspective-origin:50% 42%}
.tool .cab .esc{position:absolute;inset:0;transform-style:preserve-3d;
  display:grid;place-items:center;pointer-events:none}
.tool .cab .gi{z-index:4}
/* el barrido de luz, el mismo del Arsenal */
.tool .cab::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.08) 48%,transparent 60%);
  transform:translateX(-100%);animation:tpSweep 5.4s ease-in-out infinite}
@keyframes tpSweep{0%,66%{transform:translateX(-100%)}92%,100%{transform:translateX(100%)}}
/* una sombra de apoyo, para que nada parezca pegado al fondo */
.tool .cab .esc::after{content:"";position:absolute;left:50%;bottom:13px;width:54%;height:10px;
  transform:translateX(-50%);border-radius:50%;filter:blur(7px);
  background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0))}

/* ───────── BÓVEDA · el catálogo de formatos, en abanico ─────────
   Tres láminas de miniaturas, una detrás de otra, que se van adelantando.
   Es lo que la herramienta ES: cientos de formatos ordenados. */
.esc-bov .pila{position:relative;width:126px;height:74px;transform-style:preserve-3d;
  transform:translateY(4px) rotateX(16deg) rotateY(-20deg)}
.esc-bov .lam{position:absolute;inset:0;border-radius:8px;overflow:hidden;
  border:1px solid rgba(201,160,64,.34);box-shadow:0 10px 22px rgba(0,0,0,.5);
  background:linear-gradient(150deg,#16254a,#0a1326);
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;
  animation:bovPasa 7.5s ease-in-out infinite;animation-delay:var(--d)}
.esc-bov .lam i{display:block;border-radius:3px;
  background:linear-gradient(140deg,#2d4f94,#16294f)}
.esc-bov .lam i:nth-child(2){background:linear-gradient(140deg,#E8C46A,#9a7530)}
.esc-bov .lam i:nth-child(6){background:linear-gradient(140deg,#4d8bff,#1e5ce8)}
/* cada lámina avanza, se queda un momento delante y vuelve atrás */
@keyframes bovPasa{
  0%,100%{transform:translateZ(0) translate(0,0);opacity:.5}
  12%,30%{transform:translateZ(26px) translate(-7px,-5px);opacity:1}
  45%,92%{transform:translateZ(-14px) translate(9px,6px);opacity:.42}
}

/* ───────── ARSENAL · un prompt escribiéndose ─────────
   La tarjeta de prompt con sus líneas apareciendo y la chispa encima. */
.esc-ars .hoja{position:relative;width:122px;height:72px;transform-style:preserve-3d;
  transform:translateY(3px) rotateX(15deg) rotateY(-18deg);
  border-radius:9px;padding:14px 13px 0;
  background:linear-gradient(150deg,#16254a,#0a1225);
  border:1px solid rgba(160,190,240,.3);box-shadow:0 12px 26px rgba(0,0,0,.52);
  animation:arsFlota 7s ease-in-out infinite}
@keyframes arsFlota{0%,100%{transform:translateY(3px) rotateX(15deg) rotateY(-18deg)}
  50%{transform:translateY(-3px) rotateX(12deg) rotateY(-11deg)}}
/* una segunda tarjeta detrás: da fondo y dice que hay muchos prompts */
.esc-ars .hoja::before{content:"";position:absolute;inset:0;border-radius:9px;
  transform:translateZ(-16px) translate(13px,10px);
  background:linear-gradient(150deg,#101c3a,#070e1e);
  border:1px solid rgba(160,190,240,.16)}
.esc-ars .ln{display:block;height:5px;border-radius:3px;margin-bottom:8px;
  background:linear-gradient(90deg,rgba(232,196,106,.95),rgba(232,196,106,.3));
  animation:arsEscribe 5s ease-in-out infinite;animation-delay:var(--d)}
@keyframes arsEscribe{0%,6%{width:0;opacity:0}
  18%,74%{width:var(--w);opacity:1}
  92%,100%{width:var(--w);opacity:0}}
.esc-ars .cur{display:block;position:absolute;left:13px;bottom:18px;width:2.5px;height:10px;
  background:#FFEFC2;animation:arsCursor 1.05s steps(2) infinite}
@keyframes arsCursor{0%,49%{opacity:1}50%,100%{opacity:0}}
.esc-ars .chispa{display:block;position:absolute;right:-12px;top:-12px;width:30px;height:30px;
  transform:translateZ(26px);
  background:linear-gradient(135deg,#FFEFC2,#E8C46A);
  -webkit-mask:var(--sp) center/contain no-repeat;mask:var(--sp) center/contain no-repeat;
  animation:arsBrilla 2.9s ease-in-out infinite}
.esc-ars{--sp:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 4c2.4 12.8 5.8 16.2 18.6 18.6C37.8 25 34.4 28.4 32 41.2 29.6 28.4 26.2 25 13.4 22.6 26.2 20.2 29.6 16.8 32 4z' fill='%23fff'/></svg>")}
@keyframes arsBrilla{0%,100%{transform:translateZ(26px) scale(.85) rotate(-9deg);opacity:.72}
  50%{transform:translateZ(26px) scale(1.12) rotate(8deg);opacity:1}}

/* ───────── TAREAS · el tablero, con una ficha que cruza ───────── */
.esc-tar .tablero{position:relative;width:134px;height:76px;transform-style:preserve-3d;
  transform:translateY(3px) rotateX(19deg) rotateY(-17deg);
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  animation:tarFlota 7.5s ease-in-out infinite}
@keyframes tarFlota{0%,100%{transform:translateY(3px) rotateX(19deg) rotateY(-17deg)}
  50%{transform:translateY(-2px) rotateX(16deg) rotateY(-11deg)}}
.esc-tar .col{display:block;border-radius:7px;padding:6px 5px;
  background:rgba(255,255,255,.05);border:1px solid rgba(160,190,240,.2);
  box-shadow:0 8px 18px rgba(0,0,0,.4)}
.esc-tar .ficha{display:block;height:12px;border-radius:4px;margin-bottom:6px;
  background:linear-gradient(130deg,#2d4f94,#16294f)}
.esc-tar .ficha.ok{background:linear-gradient(130deg,#FFEFC2,#C9A040)}
.esc-tar .viaja{display:block;position:absolute;left:6px;top:7px;width:32px;height:12px;
  border-radius:4px;transform:translateZ(20px);box-shadow:0 8px 16px rgba(0,0,0,.55);
  background:linear-gradient(130deg,#6ea0ff,#1e5ce8);
  animation:tarCruza 6s cubic-bezier(.6,0,.4,1) infinite}
@keyframes tarCruza{
  0%,10%{transform:translateZ(20px) translate(0,0)}
  40%,52%{transform:translateZ(20px) translate(49px,19px)}
  82%,100%{transform:translateZ(20px) translate(98px,0)}
}

@media(prefers-reduced-motion:reduce){
  .tool .cab::before,.esc-bov .lam,.esc-ars .hoja,.esc-ars .ln,.esc-ars .cur,
  .esc-ars .chispa,.esc-tar .tablero,.esc-tar .viaja{animation:none}
  .esc-ars .ln{width:var(--w);opacity:1}
}