@font-face{font-family:'IBM Plex Sans';src:url('public/fonts/IBMPlexSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('public/fonts/IBMPlexSans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('public/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('public/fonts/IBMPlexSans-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('public/fonts/JetBrainsMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('public/fonts/JetBrainsMono-Medium.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --papel:#ffffff; --papel-2:#f6f8fa; --papel-3:#eef1f4;
  --tinta:#0a0a0a; --tinta-2:#52525b; --tinta-3:#a1a1aa;
  --borde:#e4e4e7; --acento:#3b82f6;
  --sans:'IBM Plex Sans',sans-serif; --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--papel);color:var(--tinta);font-family:var(--sans);
  font-size:15px;line-height:1.5;
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.top{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:.9rem 1.2rem;border-bottom:1px solid var(--borde);
}
.marca-nombre{font-weight:700;font-size:1rem}
.marca-sub{color:var(--tinta-3);font-size:.78rem;margin-left:.5rem}

.controles{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.8rem 1.2rem;border-bottom:1px solid var(--borde);background:var(--papel-2);
}
.controles label{font-size:.72rem;color:var(--tinta-2);font-weight:500;display:flex;flex-direction:column;gap:.25rem}
.controles input[type=text],.controles select{
  font-family:var(--mono);font-size:.82rem;color:var(--tinta);background:var(--papel);
  border:1px solid var(--borde);border-radius:6px;padding:.4rem .55rem;min-width:130px;
}
.btn{
  font-family:inherit;font-size:.78rem;font-weight:500;color:var(--tinta);
  background:var(--papel);border:1px solid var(--borde);border-radius:6px;
  padding:.42rem .75rem;cursor:pointer;align-self:flex-end;
}
.btn:hover{background:var(--papel-3)}
.btn--principal{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.btn--principal:hover{opacity:.88;background:var(--tinta)}

.galeria{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1px;
  background:var(--borde);padding:1px;
}
.celda{background:var(--papel);display:flex;flex-direction:column}
.celda__lienzo{aspect-ratio:1;padding:.6rem}
.celda__lienzo svg{width:100%;height:100%;display:block}
.celda__lienzo--3d{cursor:grab;touch-action:none}
.celda__lienzo--3d:active{cursor:grabbing}
.celda__pie{
  display:flex;align-items:center;justify-content:space-between;gap:.4rem;
  padding:.4rem .6rem .6rem;border-top:1px solid var(--borde);
}
.celda__semilla{font-size:.66rem;color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80px}
.celda__acciones{display:flex;gap:.3rem}
.celda__acciones button{
  font-family:var(--mono);font-size:.66rem;color:var(--tinta-2);background:var(--papel);
  border:1px solid var(--borde);border-radius:5px;padding:.2rem .4rem;cursor:pointer;
}
.celda__acciones button:hover{color:var(--tinta);border-color:var(--tinta)}

.pie-pagina{
  padding:1.2rem;color:var(--tinta-3);font-size:.75rem;max-width:70ch;
}
.pie-pagina a{color:inherit}

.volver{color:var(--tinta-2);text-decoration:none;font-size:.82rem;margin-right:.6rem}
.volver:hover{color:var(--tinta)}
.volver.activo{color:var(--tinta);font-weight:600}
.nav-principal{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem}

/* ── estudio de arte ───────────────────────────────────────────── */
.estudio{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);min-height:calc(100vh - 56px)}
.estudio__obra{background:var(--papel-3);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(1rem,4vw,4rem);border-right:1px solid var(--borde)}
.obra-lienzo{width:min(100%,760px);aspect-ratio:1;background:var(--papel);border:1px solid var(--borde)}
.obra-lienzo svg{display:block;width:100%;height:100%}
.obra-meta{width:min(100%,760px);display:flex;justify-content:space-between;gap:1rem;color:var(--tinta-2);font-size:.72rem;padding:.55rem 0}
.estudio__panel{padding:clamp(1rem,2.5vw,2rem);display:flex;flex-direction:column;gap:1.25rem;background:var(--papel);overflow:auto}
.estudio__panel h1,.comparador h1{font-size:clamp(1.45rem,3vw,2.2rem);line-height:1.08;letter-spacing:-.025em;margin:.1rem 0 .5rem;max-width:18ch}
.ceja{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--acento);margin:0 0 .4rem}
.nota{color:var(--tinta-2);font-size:.82rem;max-width:58ch;margin:.25rem 0}
.grupo-control{display:flex;flex-direction:column;gap:.4rem}
.grupo-control label,.controles-arte label{font-size:.7rem;font-weight:600;color:var(--tinta-2)}
.grupo-control textarea,.controles-arte select,.controles-arte input[type=text],.receta-editor textarea{
  width:100%;font:inherit;color:var(--tinta);background:var(--papel);border:1px solid var(--borde);border-radius:6px;padding:.55rem .65rem;
}
.grupo-control textarea{resize:vertical;min-height:84px}
.grupo-control--prompt{padding:1rem;background:var(--papel-2);border:1px solid var(--borde)}
.estado{min-height:1.2em;margin:0;color:var(--tinta-3);font-size:.7rem}
.controles-arte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.controles-arte label{display:flex;flex-direction:column;gap:.3rem}
.controles-arte select,.controles-arte input[type=text]{font-family:var(--mono);font-size:.78rem}
.controles-arte input[type=range]{width:100%;accent-color:var(--tinta)}
.controles-arte output{font-family:var(--mono);color:var(--tinta)}
.control-ancho{grid-column:1/-1}
.fila-acciones{display:flex;flex-wrap:wrap;gap:.45rem}
.receta-editor{border-top:1px solid var(--borde);padding-top:.8rem}
.receta-editor summary{cursor:pointer;font-size:.75rem;color:var(--tinta-2);margin-bottom:.65rem}
.receta-editor textarea{font-size:.7rem;line-height:1.5;resize:vertical;margin-bottom:.55rem}

/* ── comparación por pares ─────────────────────────────────────── */
.comparador{padding:clamp(1rem,3vw,2.4rem);max-width:1380px;margin:0 auto}
.comparador__intro{display:flex;flex-direction:column;align-items:center;text-align:center;margin:1rem auto 1.5rem}
.comparador__intro h1{max-width:none}
.comparador__par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--borde);border:1px solid var(--borde)}
.opcion-obra{background:var(--papel);padding:clamp(.75rem,2vw,1.5rem)}
.opcion-obra__lienzo{aspect-ratio:1;border:1px solid var(--borde);background:var(--papel-2)}
.opcion-obra__lienzo svg{display:block;width:100%;height:100%}
.opcion-obra__info{display:flex;align-items:end;justify-content:space-between;gap:1rem;padding-top:.8rem}
.opcion-obra__info h2{font-size:1rem;margin:.12rem 0}
.opcion-obra__info p{font-size:.72rem;color:var(--tinta-3);margin:0}
.opcion-obra__editar{display:inline-block;margin-top:.6rem}
.comparador__pie{display:flex;justify-content:center;align-items:center;gap:1rem;padding:1rem;color:var(--tinta-3);font-size:.7rem}

@media (max-width:820px){
  .marca-sub{display:block;margin-left:0}
  .estudio{grid-template-columns:1fr}
  .estudio__obra{border-right:0;border-bottom:1px solid var(--borde);padding:1rem}
  .estudio__panel{overflow:visible}
  .comparador__par{grid-template-columns:1fr}
  .comparador__pie{flex-direction:column}
}
@media (max-width:480px){
  .top{align-items:flex-start}
  .nav-principal{width:100%}
  .controles-arte{grid-template-columns:1fr}
  .control-ancho{grid-column:auto}
  .obra-meta,.opcion-obra__info{align-items:flex-start;flex-direction:column}
}

/* ── muñeco combinable ─────────────────────────────────────────── */
.muneco{display:flex;flex-wrap:wrap;gap:1px;background:var(--borde)}
.muneco__lienzo-envoltura{
  flex:1 1 380px;background:var(--papel);display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:2rem;min-width:320px;
}
.muneco__lienzo{width:min(70vw,420px);aspect-ratio:1}
.muneco__lienzo svg{width:100%;height:100%;display:block}
.muneco__ayuda{color:var(--tinta-3);font-size:.75rem;margin-top:.6rem}

.muneco__panel{
  flex:1 1 320px;background:var(--papel);padding:1.4rem;display:flex;
  flex-direction:column;gap:1.1rem;min-width:280px;
}
.grupo-slot label{
  display:block;font-size:.7rem;font-weight:600;color:var(--tinta-2);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem;
}
.fila-slot{display:flex;gap:.5rem}
.fila-slot input{
  flex:1;font-family:var(--mono);font-size:.82rem;color:var(--tinta);background:var(--papel);
  border:1px solid var(--borde);border-radius:6px;padding:.4rem .55rem;
}
.opciones{display:flex;flex-wrap:wrap;gap:.4rem}
.opciones button{
  font-family:var(--mono);font-size:.75rem;color:var(--tinta-2);background:var(--papel);
  border:1px solid var(--borde);border-radius:6px;padding:.35rem .6rem;cursor:pointer;
}
.opciones button:hover{border-color:var(--tinta)}
.opciones button.on{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.muneco__acciones{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:.4rem;border-top:1px solid var(--borde)}

/* ── vitrina ────────────────────────────────────────────────────── */
.vitrina{padding:1.2rem}
.vitrina__seccion{margin-bottom:2.2rem}
.vitrina__seccion h2{font-size:1rem;font-weight:700;margin:0 0 .2rem}
.vitrina__nota{color:var(--tinta-3);font-size:.78rem;margin:0 0 .8rem;max-width:70ch}
.vitrina__fila{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));border:1px solid var(--borde)}