/* Categoría Avatars — encima de base.css. Mismo azul y dorado del Club. */
/* abajo solo 24 px: el pie pone su propio margen y se queda pegado al final */
main{position:relative;z-index:1;flex:1;width:100%;min-width:0;max-width:1180px;margin:0 auto;
  padding:clamp(14px,3vw,26px) clamp(12px,3vw,24px) 24px}
svg{display:block}
.miga{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--gray);
  text-decoration:none;padding:4px 8px 4px 2px;border-radius:8px}
.miga:hover{color:var(--white)}
.miga svg,.saltos svg,.btn svg,.pista svg,.m-close svg{fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.miga svg{width:16px;height:16px}
.chip{display:inline-flex;align-self:flex-start;font-family:'Orbitron',sans-serif;font-size:9.5px;
  letter-spacing:.18em;color:var(--gold);border:1px solid rgba(201,160,64,.3);
  background:rgba(201,160,64,.05);border-radius:999px;padding:5px 13px;margin-bottom:14px}

/* ── hero ── */
.av-hero{position:relative;display:flex;align-items:stretch;gap:10px;overflow:hidden;
  background:linear-gradient(160deg,#0d1830,var(--blue-card));border:1px solid var(--line);
  border-radius:22px;margin:12px 0 14px;min-height:300px}
.av-hero::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:55%;
  height:1px;background:linear-gradient(90deg,transparent,rgba(201,160,64,.5),rgba(201,160,64,0))}
.av-hero-txt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(20px,4vw,38px);position:relative;z-index:2}
.av-hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,5vw,38px);line-height:1.08;
  letter-spacing:-.02em;margin-bottom:10px;background:linear-gradient(180deg,#FFF3D4,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.av-hero p{font-size:14px;color:var(--gray);line-height:1.65;max-width:440px;text-wrap:pretty}
.formula{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:18px}
.formula span{font-size:12px;font-weight:700;border:1px solid rgba(201,160,64,.35);color:var(--gold-light);
  background:rgba(201,160,64,.07);border-radius:9px;padding:6px 11px}
.formula b{color:var(--gray-2);font-weight:800}
.av-hero-art{flex:1;min-width:0;position:relative;min-height:260px}
.av-hero-art::before{content:"";position:absolute;inset:10% 10%;border-radius:50%;
  background:radial-gradient(circle,rgba(30,92,232,.3),rgba(30,92,232,0) 68%)}
.hero-p{position:absolute;top:50%;left:50%;width:150px;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  border:1px solid rgba(201,160,64,.35);box-shadow:0 18px 44px rgba(0,0,0,.5);
  animation:flota 6s ease-in-out infinite}
.hero-p svg{width:100%;height:100%}
.hp0{transform:translate(-118%,-46%) rotate(-8deg);animation-delay:-2s}
.hp1{transform:translate(-50%,-54%);z-index:2;width:170px}
.hp2{transform:translate(18%,-46%) rotate(8deg);animation-delay:-4s}
@keyframes flota{50%{margin-top:-8px}}
@media(max-width:840px){.av-hero{flex-direction:column;min-height:0}.av-hero-art{min-height:230px}
  .hero-p{width:120px}.hp1{width:138px}}

/* saltos */
.saltos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.saltos a{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  text-decoration:none;color:var(--gray);border:1px solid var(--line);background:var(--blue-card);
  border-radius:10px;padding:8px 12px;transition:all .16s}
.saltos a:hover{color:var(--white);border-color:rgba(201,160,64,.5)}
.saltos svg{width:16px;height:16px;color:var(--gold)}

/* encabezado de sección */
section{scroll-margin-top:70px}
.sec-h{display:flex;gap:13px;align-items:flex-start;margin:30px 0 16px}
.num{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;color:#1a1200;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-dark))}
.sec-h h2,.pin h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(19px,3.6vw,23px);
  letter-spacing:-.01em;line-height:1.2;margin-bottom:4px}
.sec-h p{font-size:13.5px;color:var(--gray);line-height:1.6;max-width:620px;text-wrap:pretty}

/* ── ① tarjetas de avatar ── */
.av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:16px}
/* en el teléfono, dos por fila: una sola ocupaba toda la pantalla */
@media(max-width:620px){.av-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.av-card{text-align:left;background:var(--blue-card);border:1px solid var(--line);border-radius:17px;
  padding:10px;display:flex;flex-direction:column;transition:border-color .16s,transform .16s,box-shadow .16s}
.av-card:hover{border-color:rgba(201,160,64,.55);transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.45)}
.av-art{position:relative;aspect-ratio:4/4.6;border-radius:12px;overflow:hidden;
  border:1px solid rgba(201,160,64,.22)}
.av-art svg,.m-art svg,.opc-esc svg{width:100%;height:100%}
.av-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.09) 46%,transparent 60%);
  transform:translateX(-100%);animation:barre 4.4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes barre{55%,100%{transform:translateX(100%)}}
.av-card:hover .av-fig{transform:scale(1.025)}
.fmt{position:absolute;top:8px;left:8px;font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:.12em;
  font-weight:700;color:var(--gold-xlight);background:rgba(5,9,26,.72);border:1px solid rgba(201,160,64,.4);
  border-radius:7px;padding:4px 7px;backdrop-filter:blur(4px)}
.av-info{padding:12px 6px 6px;display:flex;flex-direction:column;flex:1}
.tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.tags span{font-size:10.5px;font-weight:700;color:var(--gray);background:rgba(120,150,200,.1);
  border-radius:6px;padding:3px 7px}
.av-t{font-size:15px;font-weight:800;line-height:1.3;margin-bottom:5px;letter-spacing:-.01em}
.av-d{font-size:12.5px;color:var(--gray);line-height:1.55;text-wrap:pretty}
.av-open{margin-top:auto;padding-top:11px;font-size:11.5px;font-weight:700;color:var(--gold-light)}

/* animaciones de la ilustración */
.av-fig{transform-origin:120px 300px;transition:transform .4s;animation:respira 5.5s ease-in-out infinite}
@keyframes respira{50%{transform:translateY(-1.6px) scale(1.006)}}
.av-bk{animation:brilla 3.6s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
@keyframes brilla{to{opacity:.18}}
.av-rec{animation:rec 1.4s steps(1) infinite}
@keyframes rec{50%{opacity:.15}}
.av-sol{animation:sol 5s ease-in-out infinite alternate}
@keyframes sol{to{transform:translateY(3px);opacity:.85}}

/* ── ② constructor ── */
.cons{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
@media(max-width:960px){.cons{grid-template-columns:minmax(0,1fr)}}
.pasos{display:flex;flex-direction:column;gap:14px;min-width:0}
.paso{background:var(--blue-card);border:1px solid var(--line);border-radius:17px;padding:16px}
.paso-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-weight:800;font-size:14.5px;margin-bottom:12px}
.paso-h b{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:12px;
  color:var(--gold-light);border:1px solid rgba(201,160,64,.45)}
.paso-h span{font-size:11.5px;font-weight:600;color:var(--gray-2)}
textarea{width:100%;min-height:150px;resize:vertical;background:#080f1f;border:1px solid var(--line);
  border-radius:12px;padding:13px;font:12.3px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:#cfe0f5}
textarea:focus{outline:none;border-color:rgba(201,160,64,.55)}
.paso-pie{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;
  font-size:11.5px;color:var(--gray-2)}
.lnk{color:var(--gold-light);font-weight:700;font-size:11.5px}
.lnk:hover{text-decoration:underline}
.opc-grid{display:grid;gap:9px}
.opc-grid.ang{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.opc-grid.pos{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.opc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;
  border:1px solid var(--line);background:rgba(8,15,31,.7);border-radius:13px;padding:9px 6px 10px;
  transition:border-color .15s,background .15s,transform .15s}
.opc:hover{border-color:rgba(201,160,64,.45);transform:translateY(-1px)}
.opc.on{border-color:var(--gold);background:rgba(201,160,64,.1);box-shadow:0 0 0 1px var(--gold) inset}
.opc-ic{width:100%;max-width:84px;aspect-ratio:1;border-radius:12px;overflow:hidden;margin-bottom:4px}
.opc-ic svg{width:100%;height:100%}
.opc-n{font-size:12px;font-weight:800;line-height:1.25}
.opc-k{font-size:10.5px;color:var(--gray-2);line-height:1.2}
.opc.on .opc-k{color:var(--gold-light)}
.pos .opc{padding:6px 6px 9px}
.opc-esc{width:100%;aspect-ratio:4/3;border-radius:9px;overflow:hidden;margin-bottom:5px}

.salida{position:sticky;top:72px;background:linear-gradient(165deg,var(--blue-mid),var(--blue-dark));
  border:1px solid rgba(201,160,64,.35);border-radius:17px;padding:16px;display:flex;flex-direction:column;
  gap:11px;max-height:calc(100dvh - 90px)}
@media(max-width:960px){.salida{position:relative;top:0;max-height:none}.salida pre{max-height:360px}}
.salida-h{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-weight:800;font-size:14px}
.salida-h .sel{font-size:11px;font-weight:700;color:var(--gold-light)}
.salida pre,.modal pre{flex:1;min-height:120px;overflow:auto;overscroll-behavior:contain;background:#080f1f;
  border:1px solid var(--line);border-radius:12px;padding:14px;font:12.3px/1.62 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap;word-break:break-word;color:#cfe0f5}
.nota{font-size:12px;color:var(--gray);line-height:1.55}
.nota b{color:var(--white)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));color:#1a1200;
  font-weight:800;font-size:14px;border-radius:12px;padding:12px 20px;transition:filter .16s}
.btn svg{width:17px;height:17px}
.btn:hover{filter:brightness(1.07)}
.btn.ok{background:linear-gradient(135deg,#34d399,#059669);color:#04231a}

/* ── ③ pinterest ── */
.pin{display:flex;gap:22px;align-items:center;margin-top:30px;background:var(--blue-card);
  border:1px solid var(--line);border-radius:20px;padding:clamp(16px,3vw,26px)}
.pin-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pin-cuerpo p{font-size:13.5px;color:var(--gray);line-height:1.6;max-width:560px;text-wrap:pretty}
.pin-cuerpo p b{color:var(--gold-light);font-weight:700}
.pin-cuerpo .btn{margin-top:6px}
.pin-art{flex:none;display:flex;align-items:center;gap:10px}
.pin-foto{width:92px;height:118px;border-radius:12px;border:2px solid #e60023;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#5a7fc0,#f2a35e 60%,#e2bd87)}
.pin-foto::after{content:"";position:absolute;left:38px;top:34px;width:16px;height:56px;border-radius:8px;
  background:#0a0f1e;box-shadow:0 -14px 0 -3px #0a0f1e}
.pin-flecha{width:46px;fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  animation:empuja 1.6s ease-in-out infinite}
@keyframes empuja{50%{transform:translateX(5px)}}
.pin-txt{width:100px;padding:12px 10px;border-radius:12px;background:#080f1f;border:1px solid var(--line);
  display:flex;flex-direction:column;gap:7px}
.pin-txt i{display:block;height:6px;border-radius:3px;background:rgba(168,184,208,.35);
  animation:escribe 2.4s ease-in-out infinite}
.pin-txt i:nth-child(1){width:70%;background:var(--gold)}
.pin-txt i:nth-child(2){width:100%;animation-delay:.2s}
.pin-txt i:nth-child(3){width:85%;animation-delay:.4s}
.pin-txt i:nth-child(4){width:60%;animation-delay:.6s}
@keyframes escribe{0%{transform:scaleX(.2);transform-origin:left}40%,100%{transform:scaleX(1);transform-origin:left}}
@media(max-width:640px){.pin{flex-direction:column;align-items:flex-start}}

/* pista y volver */
.pista{margin-top:26px;padding:16px 18px;background:rgba(30,92,232,.08);border:1px solid rgba(30,92,232,.25);
  border-radius:15px;font-size:13px;color:var(--gray);line-height:1.65;display:flex;gap:12px;align-items:flex-start}
.pista svg{width:22px;height:22px;flex:none;color:var(--gold-light)}
/* Volver no es la acción principal: textito discreto, como en todo el dominio. */
.volver{display:inline-flex;align-items:center;gap:6px;width:auto;max-width:none;
  margin:0;padding:0;text-align:left;text-decoration:none;
  font-size:13px;font-weight:600;color:var(--gray-2);
  background:none;border-radius:0;box-shadow:none;transition:color .18s}
.volver:hover{color:var(--gold-xlight);filter:none}

/* ── modal ── */
.modal-bg{position:fixed;inset:0;background:rgba(3,6,16,.8);backdrop-filter:blur(6px);z-index:90;
  display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vw,18px);
  opacity:0;pointer-events:none;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.modal-bg.on{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .2s}
.modal{position:relative;width:min(960px,100%);height:min(86vh,86dvh);display:flex;gap:20px;
  background:linear-gradient(165deg,var(--blue-mid),var(--blue-dark));border:1px solid var(--line);
  border-radius:22px;padding:20px;box-shadow:0 30px 80px rgba(0,0,0,.6);transform:translateY(14px);transition:transform .22s}
.modal-bg.on .modal{transform:none}
.m-art{flex:0 0 36%;border-radius:15px;overflow:hidden;border:1px solid rgba(201,160,64,.3)}
.m-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.m-cuerpo .tags{margin:0 44px 0 0}
.modal h3{font-family:'Space Grotesk',sans-serif;font-size:20px;line-height:1.25;letter-spacing:-.01em;margin-right:44px}
.m-desc{font-size:13px;color:var(--gray);line-height:1.6;margin-bottom:6px;text-wrap:pretty}
.m-cuerpo .btn{align-self:flex-end;margin-top:8px}
.m-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:10px;z-index:2;
  border:1px solid var(--line);color:var(--gray);display:grid;place-items:center;background:var(--blue-dark)}
.m-close svg{width:16px;height:16px}
.m-close:hover{border-color:var(--gold);color:var(--white)}
@media(max-width:720px){
  /* En columna el contenido mide el triple que la ventana: sin `overflow`
     se salía por abajo y en el celular no se podía llegar al prompt ni al
     botón de copiar. Rueda la ventana entera, con su inercia. */
  .modal{flex-direction:column;gap:12px;padding:16px;height:min(90vh,90dvh);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .m-art{flex:0 0 150px}
  .m-cuerpo{min-height:0}
  .m-cuerpo pre{max-height:none}
  .m-cuerpo .btn{width:100%;align-self:stretch}
}

/* ── ⓪ la ruta: prompts en orden ── */
.ruta{display:flex;flex-direction:column;gap:14px;counter-reset:paso}
.paso-r{display:flex;gap:20px;align-items:stretch;text-align:left;width:100%;background:
  linear-gradient(135deg,rgba(201,160,64,.09),rgba(201,160,64,0) 50%),var(--blue-card);
  border:1px solid rgba(201,160,64,.4);border-radius:19px;padding:14px;
  transition:border-color .16s,transform .16s,box-shadow .16s}
.paso-r:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 16px 38px rgba(0,0,0,.45)}
.paso-art{flex:0 0 min(300px,38%);border-radius:14px;overflow:hidden;border:1px solid rgba(201,160,64,.3)}
.paso-c{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:6px 4px}
.paso-n{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.2em;font-weight:700;color:#1a1200;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));border-radius:7px;padding:5px 9px}
.paso-t{font-family:'Space Grotesk',sans-serif;font-size:clamp(20px,3.4vw,24px);font-weight:700;letter-spacing:-.02em}
.paso-d{font-size:13.5px;color:var(--gray);line-height:1.6;max-width:560px;text-wrap:pretty}
.paso-uso{list-style:none;counter-reset:u;display:flex;flex-direction:column;gap:7px;margin:6px 0 8px}
.paso-uso li{counter-increment:u;display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5}
.paso-uso li::before{content:counter(u);flex:none;width:20px;height:20px;border-radius:6px;display:grid;
  place-items:center;font-size:11px;font-weight:800;color:var(--gold-light);border:1px solid rgba(201,160,64,.45)}
.paso-c .btn{margin-top:auto}
@media(max-width:700px){.paso-r{flex-direction:column}.paso-art{flex-basis:auto;aspect-ratio:4/3}}

/* el avatar escaneado: línea que barre, puntos de medida y la ficha que se escribe */
.scan{position:relative;width:100%;height:100%;min-height:230px}
.scan>svg{position:absolute;inset:0;width:100%;height:100%}
.scan-l{position:absolute;left:0;right:0;height:2px;top:10%;background:var(--gold-xlight);
  box-shadow:0 0 14px 3px rgba(255,217,125,.55);animation:barrido 3.2s ease-in-out infinite alternate}
@keyframes barrido{to{top:72%}}
.pt{position:absolute;left:var(--x);top:var(--y);width:9px;height:9px;margin:-4.5px;border-radius:50%;
  border:1.5px solid var(--gold-xlight);animation:mide 2.4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes mide{0%,100%{transform:scale(.6);opacity:.3}50%{transform:scale(1.2);opacity:1}}
.ficha{position:absolute;right:8px;bottom:8px;width:46%;padding:9px;border-radius:10px;
  background:rgba(5,9,26,.82);border:1px solid rgba(201,160,64,.45);backdrop-filter:blur(4px);
  display:flex;flex-direction:column;gap:5px}
.ficha span,.ficha em{font-family:'Orbitron',sans-serif;font-size:7.5px;letter-spacing:.12em;font-style:normal;
  color:var(--gold-light);font-weight:700}
.ficha em{color:var(--gold-xlight);margin-top:2px}
.ficha i{display:block;height:4px;border-radius:2px;background:rgba(168,184,208,.4);
  transform-origin:left;animation:escribe 2.8s ease-in-out infinite}
.ficha i:nth-child(3){width:80%;animation-delay:.25s}
.ficha i:nth-child(4){width:92%;animation-delay:.5s}
.ficha i:nth-child(5){width:64%;animation-delay:.75s}
.m-art .scan{min-height:0}

/* paso 2: el reel que suena y se vuelve bloques */
.g-art{position:relative;width:100%;height:100%;min-height:230px;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px;background:radial-gradient(circle at 30% 40%,rgba(30,92,232,.3),rgba(30,92,232,0) 60%),linear-gradient(160deg,#101d38,#080e22)}
.g-tel{position:relative;width:78px;height:138px;border-radius:14px;border:2px solid #2a3a5c;flex:none;overflow:hidden;
  background:linear-gradient(180deg,#5a7fc0,#f2a35e 65%,#e2bd87)}
.g-play{position:absolute;left:50%;top:38%;width:0;height:0;margin-left:-6px;border-left:14px solid rgba(255,255,255,.9);
  border-top:9px solid transparent;border-bottom:9px solid transparent}
.g-ondas{position:absolute;left:8px;right:8px;bottom:12px;height:26px;display:flex;align-items:center;gap:3px}
.g-ondas b{flex:1;height:30%;border-radius:2px;background:#fff;animation:onda 1s ease-in-out infinite}
.g-ondas b:nth-child(2n){animation-delay:.2s}.g-ondas b:nth-child(3n){animation-delay:.4s}.g-ondas b:nth-child(5n){animation-delay:.1s}
@keyframes onda{50%{height:100%}}
.g-fl{width:34px;flex:none;fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;animation:empuja 1.6s ease-in-out infinite}
.g-blq{display:flex;flex-direction:column;gap:7px;width:132px;flex:none}
.g-b{background:#080f1f;border:1px solid rgba(201,160,64,.4);border-radius:9px;padding:7px 8px;display:flex;flex-direction:column;gap:4px;
  animation:aparece 3s ease-in-out infinite;animation-delay:var(--d)}
.g-b em{font-style:normal;font-size:8.5px;font-weight:800;color:var(--gold-light)}
.g-b i{display:block;height:3.5px;border-radius:2px;background:rgba(168,184,208,.45)}
.g-b i:last-child{width:75%}
@keyframes aparece{0%{opacity:.25;transform:translateX(-4px)}30%,100%{opacity:1;transform:none}}

/* interruptores de A, B y C */
.sw{margin-left:auto;display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.sw input{position:absolute;opacity:0;pointer-events:none}
.sw i{position:relative;width:42px;height:24px;border-radius:999px;background:#26324d;border:1px solid var(--line);transition:background .2s}
.sw i::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#8a98b3;
  transition:transform .2s,background .2s;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.sw input:checked+i{background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));border-color:transparent}
.sw input:checked+i::after{transform:translateX(18px);background:#fff}
.sw input:focus-visible+i{outline:2px solid var(--gold-light);outline-offset:2px}
.paso{transition:opacity .2s}
.paso.apagado>:not(.paso-h){opacity:.35;filter:grayscale(.6)}
.paso.apagado .paso-h b{opacity:.5}
.paso.apagado .opc.on{border-color:var(--line);box-shadow:none;background:rgba(8,15,31,.7)}
/* ⚠️ en la versión pública la rejilla lleva al final el candado «+N poses»:
   si se apaga la rejilla entera, su «Desbloquear ahora» también salía a
   medio gas. Se apaga cada foto y el candado queda encendido. */
.paso.apagado>.opc-grid{opacity:1;filter:none}
.paso.apagado>.opc-grid>:not(.lt-cerrado){opacity:.35;filter:grayscale(.6)}

/* foto de ejemplo real en las poses y en el panel del prompt */
.opc-esc{position:relative}
.opc-esc img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.opc-esc .ej{position:absolute;left:6px;bottom:6px;font-style:normal;font-size:9.5px;font-weight:800;color:#1a1200;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));border-radius:5px;padding:2px 6px}
.ejemplo{display:flex;gap:10px;align-items:flex-end}
.ejemplo img{width:92px;aspect-ratio:3/4;object-fit:cover;object-position:50% 15%;border-radius:10px;border:1px solid rgba(201,160,64,.45)}
.ejemplo span{font-size:11.5px;font-weight:700;color:var(--gold-light)}
.opc-ic img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}

/* foto de ejemplo del panel: grande */
.ejemplo{flex-direction:column;align-items:stretch;gap:7px}
.ejemplo img{width:100%;height:230px;aspect-ratio:auto;object-fit:cover;object-position:50% 22%;border-radius:12px;cursor:zoom-in;
  transition:filter .15s}
.ejemplo img:hover{filter:brightness(1.06)}
.ejemplo span{text-align:center}
/* vista previa al pasar el mouse */
.lupa{position:fixed;left:0;top:0;width:340px;height:400px;z-index:80;pointer-events:none;border-radius:16px;overflow:hidden;
  background:#0b1428;border:1px solid rgba(201,160,64,.6);box-shadow:0 24px 60px rgba(0,0,0,.6);opacity:0;transition:opacity .15s}
.lupa.on{opacity:1}
.lupa img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
/* visor a pantalla completa */
.visor{position:fixed;inset:0;z-index:95;background:rgba(3,6,16,.88);backdrop-filter:blur(6px);display:flex;align-items:center;
  justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s;cursor:zoom-out}
.visor.on{opacity:1;pointer-events:auto}
.visor img{max-width:min(560px,100%);max-height:88vh;border-radius:16px;border:1px solid rgba(201,160,64,.5);box-shadow:0 30px 80px rgba(0,0,0,.6)}
@media(max-width:960px){.ejemplo img{height:300px}}

/* selección confirmada arriba del prompt */
.ejemplo{display:grid;grid-template-columns:1fr;gap:10px}
.ejemplo.dos{grid-template-columns:1fr 1fr}
.ejemplo figure{margin:0;display:flex;flex-direction:column;gap:6px;animation:entra .25s ease}
@keyframes entra{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.ejemplo img{width:100%;height:290px;object-fit:contain;object-position:center;background:#eef0f2;border-radius:12px;
  border:1px solid rgba(201,160,64,.5);cursor:zoom-in}
.ejemplo.dos img{height:220px}
.ejemplo figcaption{font-size:12.5px;font-weight:800;text-align:center;color:var(--white)}
.ejemplo figcaption em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--gold-light);text-transform:uppercase;
  letter-spacing:.08em;margin-right:4px}
@media(max-width:960px){.ejemplo img{height:340px}.ejemplo.dos img{height:260px}}

/* la foto seleccionada con su forma real: sin franjas, con marco */
.ejemplo{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:12px}
.ejemplo figure{flex:0 1 auto;min-width:0;align-items:center}
.ejemplo img,.ejemplo.dos img{width:auto;height:auto;max-width:100%;max-height:360px;object-fit:initial;background:none;
  border-radius:14px;border:1.5px solid rgba(201,160,64,.75);box-shadow:0 0 0 4px rgba(201,160,64,.1),0 16px 34px rgba(0,0,0,.5)}
.ejemplo.dos img{max-height:260px}
.ejemplo.dos figure{flex:1 1 0}
@media(max-width:960px){.ejemplo img{max-height:440px}.ejemplo.dos img{max-height:300px}}
/* lupa: también con su forma real */
.lupa{width:auto;height:auto;background:none}
.lupa img{width:auto;height:auto;max-width:360px;max-height:440px;object-fit:initial;border-radius:16px}
.ejemplo{flex-direction:row}
.ejemplo img{max-height:320px}
.ejemplo.dos img{max-height:230px}
.salida pre{min-height:170px}

/* foto real del avatar en tarjetas, portada y modal */
.av-foto{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.hero-p .av-foto,.m-art .av-foto,.scan .av-foto{position:absolute;inset:0}
.m-art{position:relative}
.av-card:hover .av-foto{transform:scale(1.03)}
.av-foto{transition:transform .4s}

/* flotado fluido: se anima `translate` (GPU), no el margen */
.hero-p{animation:flota2 6s cubic-bezier(.45,0,.55,1) infinite;will-change:translate;backface-visibility:hidden}
.hp0{animation-delay:-2s}.hp2{animation-delay:-4s}
@keyframes flota2{0%,100%{translate:0 0}50%{translate:0 -10px}}
.hero-p img,.hero-p svg{transform:translateZ(0)}

/* botón "Entrena tu IA" en la esquina inferior de ángulos y poses */
.entrena{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.entrena>span{font-size:12px;color:var(--gray-2)}
.entrena .btn{padding:9px 14px;font-size:13px;color:var(--gold-light);background:rgba(201,160,64,.08);border:1px solid rgba(201,160,64,.5)}
.entrena .btn:hover{background:rgba(201,160,64,.16)}
.entrena .btn.ok{color:#04231a}
.paso.apagado>.entrena{opacity:1;filter:none}
/* botón Entrena: estado copiado visible */
.entrena .btn.ok{background:linear-gradient(135deg,#34d399,#059669);border-color:transparent;color:#04231a}
.entrena .btn.ok svg{stroke:#04231a}
.entrena-nota{flex-basis:100%;margin:0;text-align:right;font-size:12.5px;line-height:1.5;color:#6ee7b7;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .25s,opacity .25s}
.entrena-nota.on{max-height:60px;opacity:1}
.pose-pend{display:grid;place-items:center;width:100%;height:100%;font-size:11px;font-weight:700;color:var(--gray-2);
  background:repeating-linear-gradient(45deg,rgba(201,160,64,.06) 0 8px,transparent 8px 16px);border:1px dashed rgba(201,160,64,.35);border-radius:9px}
.paso.apagado>.nota-paso{opacity:1;filter:none}
.lupa.ancha img{max-width:520px;max-height:320px}

/* ══ responsivo: celular, tablet y iPad ══ */
.sw{padding:6px 0 6px 10px;margin-top:-6px;margin-bottom:-6px}
@media(max-width:640px){
  .paso-h{flex-wrap:wrap;row-gap:4px}
  .paso-h>span:not(.sw){order:3;flex-basis:100%;margin-left:33px;line-height:1.4}
  .paso-h .sw{order:2}
  .paso{padding:14px 13px}
  .sec-h{margin:24px 0 14px}
  .miga{padding:8px 8px 8px 2px}
  body>footer a{display:inline-block;padding:6px 2px}
}
/* ⚠️ LA BARRA FLOTANTE DE COPIAR SE RETIRÓ, CON SU HUECO.
   Iba pegada abajo todo el rato, tapaba la última fila de fotos y repetía un
   botón que ya está junto al prompt: se copia desde ahí. Se fue también el
   `padding-bottom:96px` que le guardaba sitio en el celular: sin barra, eran
   96 px vacíos encima del pie. Esta línea solo queda por si alguna copia
   vieja de la página la trae todavía. */
.barra-copiar{display:none!important}
.btn.sec{background:transparent;color:var(--gold-light);border:1px solid rgba(201,160,64,.55)}
.btn.sec:hover{background:rgba(201,160,64,.1)}
.btn.sec.ok{background:linear-gradient(135deg,#34d399,#059669);color:#04231a;border-color:transparent}
.combo-n:empty{display:none}
.genero-av{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;font-size:13.5px;font-weight:700;color:var(--gray)}
.genero-av .seg button{padding:9px 18px;font-size:13.5px}
.opc-ic .pose-pend{aspect-ratio:1}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{font-size:12.5px;font-weight:700;padding:7px 13px;color:var(--gray)}
.seg button.on{background:rgba(201,160,64,.16);color:var(--gold-light)}
/* botón de regresar fijo en el encabezado de cada herramienta */
.hd-volver{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--gold-light);
  text-decoration:none;padding:8px 13px;border-radius:10px;border:1px solid rgba(201,160,64,.45);background:rgba(201,160,64,.06);transition:background .15s}
.hd-volver:hover{background:rgba(201,160,64,.14)}
.hd-volver svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:420px){.hd-volver span{display:none}.hd-volver{padding:8px 10px}}
.av-foto-enc{position:absolute;max-width:none;height:auto;transition:transform .4s}
.av-card:hover .av-foto-enc{transform:scale(1.03)}

/* modal de avatar: la foto se ve completa (9:16), sin recorte */
.m-art.completa{flex:0 0 auto;height:100%;aspect-ratio:424/760;background:#0a1226}
.m-art.completa .av-foto{object-fit:contain}
@media(max-width:720px){.m-art.completa{flex:0 0 240px;height:240px;align-self:center}}

/* El botón de volver, arriba a la izquierda y pegado al margen. Vivía suelto
   al final del HTML, fuera de </html>, donde el navegador lo pintaba como
   texto en vez de aplicarlo. */
.volver-barra{width:100%;max-width:none;margin:0;padding:14px 20px 0;
  text-align:left;align-self:stretch;flex:none}

/* ══ ÁNGULOS Y POSES: LA MISMA TARJETA ══
   Las poses salían más grandes que los ángulos (foto 4:3 a todo lo ancho en
   columnas de 140 px, contra la foto cuadrada de 84 px de los ángulos) y los
   ángulos se veían vacíos alrededor de su foto. Ahora las dos rejillas son
   idénticas: mismas columnas (5 en la compu, 3 en el celular), la foto
   cuadrada llenando la tarjeta y el texto en una caja de alto fijo. Una pose
   y un ángulo miden lo mismo al píxel, en mujer y en hombre. */
.opc-grid.ang,.opc-grid.pos{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.ang .opc,.pos .opc{padding:6px 6px 8px;gap:0;justify-content:flex-start;min-width:0}
.ang .opc-ic,.pos .opc-ic{width:100%;max-width:none;aspect-ratio:1;border-radius:10px;margin:0 0 6px}
/* tres renglones de nombre caben siempre; el ángulo usa dos y su subtítulo */
.opc-t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:100%;height:45px;overflow:hidden}
.opc-t .opc-n{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  max-width:100%;overflow-wrap:anywhere}
.ang .opc-t .opc-n{-webkit-line-clamp:2}
.opc-t .opc-k{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* la última fila, al centro y alineada con las columnas de arriba: con 13
   ángulos sobran tres en la compu y una en el celular. Cuenta cualquier
   hijo, no solo .opc: en la versión pública la tarjeta del candado también
   ocupa su sitio en la fila. */
@media(min-width:641px){
  .ang>:nth-child(5n+1):nth-last-child(3),.pos>:nth-child(5n+1):nth-last-child(3){grid-column:2}
  .ang>:nth-child(5n+1):last-child,.pos>:nth-child(5n+1):last-child{grid-column:3}
}
/* ⚠️ En el celular son 3 columnas, pero dibujadas como 6 de a 2: así una
   fila final de DOS también queda al centro (con 3 columnas solo se puede
   centrar una). Cada tarjeta mide lo mismo que con 3: dos sextos + un hueco. */
@media(max-width:640px){
  .opc-grid.ang,.opc-grid.pos{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .ang>*,.pos>*{grid-column:span 2}
  .ang>:nth-child(3n+1):last-child,.pos>:nth-child(3n+1):last-child{grid-column:3/span 2}
  .ang>:nth-child(3n+1):nth-last-child(2),.pos>:nth-child(3n+1):nth-last-child(2){grid-column:2/span 2}
}

/* ⚠️ LOS AVATARS, MÁS BAJOS EN EL CELULAR.
   Con la descripción entera cada tarjeta medía 535 px y llegar al final
   costaba ocho pantallas. Tres renglones bastan para elegir: el texto
   completo está al abrirlo. Y si el último queda solo, va al centro. */
@media(max-width:620px){
  /* ⚠️ recortado a 3 renglones, `text-wrap:pretty` no sirve: Safari reparte
     el texto como si fuera entero y parte el renglón a media tarjeta */
  .av-card .av-d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-wrap:wrap}
  .av-grid>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 5px)}
}