/* ══════════════════════════════════════════════════════════════════════════
   Portadas de los tres formatos — en 3D de verdad (perspective + preserve-3d).
   Mismo lenguaje que las tarjetas de prompts (fondo propio, halo dorado y
   barrido de luz), pero con volumen: las piezas tienen caras y profundidad,
   no son dibujos planos.
   ══════════════════════════════════════════════════════════════════════════ */
.fm-esc{position:relative;border-radius:14px;overflow:hidden;margin-bottom:15px;
  aspect-ratio:16/10;perspective:720px;perspective-origin:50% 44%;
  background:linear-gradient(140deg,#081020,#0f1c36 56%,#152448);
  border:1px solid rgba(201,160,64,.22)}
/* el halo y el barrido, como en los prompts */
.fm-esc::before{content:"";position:absolute;inset:-40%;pointer-events:none;
  background:radial-gradient(380px 200px at 76% 10%,rgba(201,160,64,.2),rgba(201,160,64,0) 62%)}
.fm-esc::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.07) 46%,transparent 60%);
  transform:translateX(-100%);animation:fmBarrido 4.2s ease-in-out infinite}
@keyframes fmBarrido{0%,62%{transform:translateX(-100%)}88%,100%{transform:translateX(100%)}}
/* el suelo, para que las piezas parezcan apoyadas */
.fm-piso{position:absolute;left:50%;bottom:11%;width:70%;height:13px;z-index:0;
  transform:translateX(-50%);border-radius:50%;filter:blur(7px);
  background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,0))}
.fm-mundo{position:absolute;inset:0;transform-style:preserve-3d;z-index:2;
  display:grid;place-items:center}
.fm.on .fm-esc{border-color:rgba(201,160,64,.5)}

/* ───────── GUÍA EN PDF · un libro abierto y las hojas pasando ─────────
   El libro se ve desde arriba. Las páginas giran sobre el lomo, como de
   verdad: la hoja sale de la mitad derecha, cruza por el aire y aterriza
   sobre la izquierda. Al aterrizar encaja con la página de debajo, que es
   igual, así que se puede apagar sin que se note el corte. */
.e-guia .libro{position:relative;width:140px;height:92px;transform-style:preserve-3d;
  transform:translateY(16px) rotateX(50deg) rotateZ(-8deg);
  animation:guiaRespira 9s ease-in-out infinite}
@keyframes guiaRespira{0%,100%{transform:translateY(16px) rotateX(50deg) rotateZ(-8deg)}
  50%{transform:translateY(11px) rotateX(44deg) rotateZ(-4deg)}}

/* la tapa dorada asoma por debajo, como el canto de un libro */
.e-guia .tapa{position:absolute;left:-5px;right:-5px;top:-4px;bottom:-4px;border-radius:4px;
  transform:translateZ(-7px);box-shadow:0 16px 30px rgba(0,0,0,.55);
  background:linear-gradient(135deg,#FFE7A8,#C9A040 55%,#8a6620)}
/* el lomo, en el centro */
.e-guia .lomo{position:absolute;left:50%;top:-4px;bottom:-4px;width:8px;margin-left:-4px;
  transform:translateZ(-5px);border-radius:2px;
  background:linear-gradient(90deg,#6b4e18,#b08a30 50%,#6b4e18)}

/* las dos páginas de abajo, levantadas en V sobre el lomo */
.e-guia .pag{position:absolute;top:0;bottom:0;width:50%;
  background:linear-gradient(170deg,#fffdf6,#e8e2d4);
  box-shadow:inset 0 0 22px rgba(120,105,70,.18)}
.e-guia .pag.izq{left:0;transform-origin:right center;transform:rotateY(9deg);
  border-radius:5px 1px 1px 5px}
.e-guia .pag.der{right:0;transform-origin:left center;transform:rotateY(-9deg);
  border-radius:1px 5px 5px 1px}
/* los renglones, para que se lea como una guía y no como un cuaderno en blanco */
.e-guia .pag i{position:absolute;left:12%;right:12%;height:2px;border-radius:2px;
  background:rgba(60,50,25,.2)}
.e-guia .pag i:nth-child(1){top:22%}
.e-guia .pag i:nth-child(2){top:36%;right:30%}
.e-guia .pag i:nth-child(3){top:50%}
.e-guia .pag i:nth-child(4){top:64%;right:38%}

/* la hoja que pasa */
.e-guia .hoja{position:absolute;top:1px;bottom:1px;right:0;width:50%;
  transform-origin:left center;border-radius:1px 5px 5px 1px;
  background:linear-gradient(170deg,#fffdf6,#efeade);
  animation:guiaHoja 7.4s cubic-bezier(.5,.03,.5,.97) infinite;animation-delay:var(--d)}
/* la sombra que proyecta sobre la página mientras cruza */
.e-guia .hoja::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,rgba(40,33,14,.3),rgba(40,33,14,0) 55%);
  animation:guiaSombra 7.4s cubic-bezier(.5,.03,.5,.97) infinite;animation-delay:var(--d)}
@keyframes guiaHoja{
  0%   {transform:rotateY(-9deg);  opacity:1}
  38%  {transform:rotateY(-171deg);opacity:1}
  39%  {transform:rotateY(-171deg);opacity:0}   /* ya aterrizó: encaja y se apaga */
  99%  {transform:rotateY(-171deg);opacity:0}
  99.5%{transform:rotateY(-9deg);  opacity:0}   /* vuelve al principio sin verse */
  100% {transform:rotateY(-9deg);  opacity:1}
}
@keyframes guiaSombra{
  0%,100%{opacity:0}
  14%{opacity:.85}
  26%{opacity:.5}
  38%,99%{opacity:0}
}

/* ───────── KIT · piezas que flotan y encajan ───────── */
.e-kit .caja{position:relative;width:132px;height:104px;transform-style:preserve-3d;
  transform:translateY(-5px) rotateX(52deg) rotateZ(-34deg);
  animation:kitGira 11s linear infinite}
@keyframes kitGira{from{transform:translateY(-5px) rotateX(52deg) rotateZ(-34deg)}
  to{transform:translateY(-5px) rotateX(52deg) rotateZ(326deg)}}
.e-kit .pz{position:absolute;border-radius:5px;transform-style:preserve-3d;
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 10px 22px rgba(0,0,0,.45);
  animation:kitFlota 4.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes kitFlota{0%,100%{transform:translateZ(var(--z))}
  50%{transform:translateZ(calc(var(--z) + 11px))}}
.e-kit .pz.a{width:38%;height:48%;left:5%;top:6%;--z:4px;
  background:linear-gradient(140deg,#FFE7A8,#C9A040)}
.e-kit .pz.b{width:38%;height:48%;left:47%;top:6%;--z:16px;
  background:linear-gradient(140deg,#4d8bff,#1e5ce8)}
.e-kit .pz.c{width:38%;height:48%;left:5%;top:54%;--z:10px;
  background:linear-gradient(140deg,#5fd3b0,#10b981)}
.e-kit .pz.d{width:38%;height:48%;left:47%;top:54%;--z:22px;
  background:linear-gradient(140deg,#cfe0ff,#8fb2ee)}
/* la rejilla de debajo, para que se vea el plano */
.e-kit .malla{position:absolute;left:-11%;top:-14%;width:122%;height:128%;
  transform:translateZ(-10px);opacity:.3;border-radius:8px;
  background-image:linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px);
  background-size:26px 26px}

/* ───────── MINI CURSO · tarjetas de video en profundidad ───────── */
.e-curso .pila{position:relative;width:180px;height:112px;transform-style:preserve-3d;
  transform:rotateX(9deg) rotateY(-21deg);animation:cursoGira 10s ease-in-out infinite}
@keyframes cursoGira{0%,100%{transform:rotateX(9deg) rotateY(-21deg)}
  50%{transform:rotateX(7deg) rotateY(-11deg)}}
.e-curso .vd{position:absolute;inset:0;border-radius:9px;overflow:hidden;
  border:1px solid rgba(255,255,255,.26);box-shadow:0 12px 26px rgba(0,0,0,.46);
  background:linear-gradient(145deg,#12203f,#0a1428);
  transform:translateZ(var(--z)) translateX(var(--x)) translateY(var(--y));
  animation:cursoPasa 7s ease-in-out infinite;animation-delay:var(--d)}
@keyframes cursoPasa{0%,100%{opacity:var(--o)}
  50%{opacity:calc(var(--o) * .72)}}
.e-curso .vd::before{content:"";position:absolute;inset:0;
  background:radial-gradient(90px 60px at 30% 24%,rgba(36,104,255,.5),rgba(36,104,255,0) 64%)}
.e-curso .vd.f1{--z:30px;--x:0;--y:0;--o:1}
.e-curso .vd.f2{--z:14px;--x:9px;--y:6px;--o:.72}
.e-curso .vd.f3{--z:-2px;--x:18px;--y:12px;--o:.46}
.e-curso .vd.f4{--z:-18px;--x:27px;--y:18px;--o:.26}
/* el play, solo en la de delante */
.e-curso .play{position:absolute;left:50%;top:50%;width:38px;height:38px;border-radius:50%;
  transform:translate(-50%,-50%) translateZ(32px);display:grid;place-items:center;
  background:linear-gradient(135deg,#FFE7A8,#C9A040);
  box-shadow:0 6px 18px rgba(201,160,64,.5);
  animation:cursoLate 2.6s ease-in-out infinite}
@keyframes cursoLate{0%,100%{box-shadow:0 6px 18px rgba(201,160,64,.5)}
  50%{box-shadow:0 6px 26px rgba(201,160,64,.85)}}
.e-curso .play::after{content:"";width:0;height:0;margin-left:4px;
  border-left:13px solid #1a1200;border-top:9px solid transparent;border-bottom:9px solid transparent}
/* la barra de progreso de la tarjeta de delante */
.e-curso .barra{position:absolute;left:10px;right:10px;bottom:9px;height:3px;border-radius:2px;
  transform:translateZ(31px);background:rgba(255,255,255,.18);overflow:hidden}
.e-curso .barra i{display:block;height:100%;border-radius:2px;width:30%;
  background:linear-gradient(90deg,#1e5ce8,#FFD97D);animation:cursoAvanza 7s ease-in-out infinite}
@keyframes cursoAvanza{0%{width:12%}50%{width:72%}100%{width:12%}}

/* quien prefiera no ver animaciones, no las ve */
@media(prefers-reduced-motion:reduce){
  .fm-esc::after,.e-guia .libro,.e-guia .hoja,.e-kit .caja,.e-kit .pz,
  .e-curso .pila,.e-curso .vd,.e-curso .play,.e-curso .barra i{animation:none}
}
@media(max-width:760px){
  .fm-esc{aspect-ratio:16/8.4}
}

/* ───────── encaje dentro de la tarjeta ─────────
   La portada sangra hasta los bordes de la tarjeta, como las de los prompts. */
.fm .fm-esc{margin:-20px -19px 15px;border-radius:17px 17px 14px 14px;border-width:0 0 1px}
.fm .marca{z-index:8;background:rgba(5,9,26,.72);backdrop-filter:blur(4px)}
.fm.on .marca{background:var(--gold)}
/* sin movimiento mientras no se pasa el ratón: solo la tarjeta elegida se mueve */
.fm .fm-esc::after{animation-play-state:paused}
.fm:hover .fm-esc::after,.fm.on .fm-esc::after{animation-play-state:running}

/* ───────── PRODUCTO DIGITAL · un archivo que se descarga una vez ─────────
   Una tarjeta de producto en el aire, con su sombra, y la flecha bajando:
   lo compras, lo bajas, se acabó. */
.e-digital .prod{position:relative;width:94px;height:113px;transform-style:preserve-3d;
  transform:translateY(7px) rotateX(12deg) rotateY(-20deg);
  animation:digFlota 7s ease-in-out infinite}
@keyframes digFlota{0%,100%{transform:translateY(7px) rotateX(12deg) rotateY(-20deg)}
  50%{transform:translateY(0) rotateX(9deg) rotateY(-12deg)}}
.e-digital .cara{position:absolute;inset:0;border-radius:9px;transform:translateZ(6px);
  border:1px solid rgba(255,255,255,.26);box-shadow:0 16px 32px rgba(0,0,0,.5);
  background:linear-gradient(150deg,#FFE7A8,#C9A040 58%,#8a6620);overflow:hidden}
.e-digital .cara i{position:absolute;left:11px;right:12px;height:3px;border-radius:2px;
  background:rgba(26,18,0,.3)}
.e-digital .cara i:nth-child(1){top:19px;right:30px;height:6px}
.e-digital .cara i:nth-child(2){top:35px}
.e-digital .cara i:nth-child(3){top:45px;right:26px}
.e-digital .cara i:nth-child(4){top:55px;right:36px}
/* el canto: lo que le da cuerpo de archivo */
.e-digital .canto{position:absolute;inset:0;border-radius:9px;transform:translateZ(-5px);
  background:linear-gradient(150deg,#6b4e18,#3d2c0c)}
/* la flecha de descarga, bajando */
.e-digital .baja{position:absolute;left:50%;top:-16px;width:13px;height:16px;
  transform:translateX(-50%) translateZ(22px);
  background:linear-gradient(180deg,rgba(36,104,255,.3),#4d8bff);
  -webkit-mask:var(--flecha-abajo) center/contain no-repeat;
          mask:var(--flecha-abajo) center/contain no-repeat;
  animation:digBaja 2.4s ease-in-out infinite}
.e-digital{--flecha-abajo:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'><path d='M8 1v15M2.5 11 8 16.5 13.5 11' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
@keyframes digBaja{0%,100%{transform:translateX(-50%) translateZ(22px) translateY(0);opacity:.35}
  50%{transform:translateX(-50%) translateZ(22px) translateY(7px);opacity:1}}

/* ───────── COMUNIDAD · gente que entra y se queda ─────────
   Fichas de miembro orbitando alrededor del centro: no es un archivo,
   es un sitio con gente dentro. */
.e-comunidad .orbe{position:relative;width:178px;height:132px;transform-style:preserve-3d;
  transform:translateY(-6px) rotateX(56deg);animation:comGira 16s linear infinite}
@keyframes comGira{from{transform:translateY(-6px) rotateX(56deg) rotateZ(0)}
  to{transform:translateY(-6px) rotateX(56deg) rotateZ(360deg)}}
/* el anillo del suelo */
.e-comunidad .anillo{position:absolute;inset:0;border-radius:50%;
  border:1px dashed rgba(201,160,64,.34)}
.e-comunidad .anillo.dos{inset:21px;border-style:solid;border-color:rgba(36,104,255,.26)}
/* Cada miembro, apoyado en el anillo y flotando un poco por encima.
   Van tumbados en el plano a propósito: contra-rotarlos para que "miren" al
   frente los aplasta en cuanto el anillo gira, porque la contra-rotación es
   fija y el giro no. Como fichas en una mesa redonda se leen perfectas. */
.e-comunidad .quien{position:absolute;left:50%;top:50%;width:27px;height:27px;margin:-13.5px;
  border-radius:9px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.3);box-shadow:0 9px 16px rgba(0,0,0,.5);
  transform:rotate(var(--a)) translateX(76px) translateZ(12px);
  animation:comSube 4.4s ease-in-out infinite;animation-delay:var(--t)}
@keyframes comSube{0%,100%{transform:rotate(var(--a)) translateX(76px) translateZ(12px)}
  50%{transform:rotate(var(--a)) translateX(76px) translateZ(22px)}}
.e-comunidad .quien::after{content:"";width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.85)}
.e-comunidad .quien.a{--a:0deg;--t:0s;background:linear-gradient(140deg,#FFE7A8,#C9A040)}
.e-comunidad .quien.b{--a:72deg;--t:.5s;background:linear-gradient(140deg,#4d8bff,#1e5ce8)}
.e-comunidad .quien.c{--a:144deg;--t:1s;background:linear-gradient(140deg,#5fd3b0,#10b981)}
.e-comunidad .quien.d{--a:216deg;--t:1.5s;background:linear-gradient(140deg,#cfe0ff,#8fb2ee)}
.e-comunidad .quien.e{--a:288deg;--t:2s;background:linear-gradient(140deg,#FFD97D,#b8862f)}
/* el centro: la marca de la comunidad, latiendo */
.e-comunidad .centro{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;
  border-radius:13px;transform:translateZ(26px);
  background:linear-gradient(135deg,#FFE7A8,#C9A040);
  box-shadow:0 8px 22px rgba(201,160,64,.5);animation:comLate 3.2s ease-in-out infinite}
@keyframes comLate{0%,100%{box-shadow:0 8px 22px rgba(201,160,64,.45)}
  50%{box-shadow:0 8px 34px rgba(201,160,64,.85)}}

@media(prefers-reduced-motion:reduce){
  .e-digital .prod,.e-digital .baja,.e-comunidad .orbe,.e-comunidad .centro,.e-comunidad .quien{animation:none}
}
/* Entre 520 y 760 caben dos tarjetas y salen estrechas: ahí, y solo ahí, las
   piezas se encogen. Por debajo hay una sola tarjeta, ancha, y caben enteras. */
@media(min-width:521px) and (max-width:760px){
  .e-guia .libro{width:120px;height:79px}
  .e-digital .prod{width:84px;height:101px}
  .e-kit .caja{width:96px;height:76px}
  .e-curso .pila{width:146px;height:91px}
  .e-comunidad .orbe{width:146px;height:108px}
  .e-comunidad .quien{animation:none;transform:rotate(var(--a)) translateX(62px) translateZ(12px)}
}