/* ============ EL ESTUDIO DE CAMISAS — la mesa de trabajo ============
   Una sola escena: la prenda al frente, la baraja tocable, el diseño
   puesto y movible dentro del área de impresión real del producto.
   Hereda la piedra, la tinta y el acento de la casa (casas.css);
   aquí vive solo lo del estudio. 360px primero. */

/* ---------- el botón que baja de la galería al estudio ---------- */
.vit__btn{appearance:none;margin-top:12px;background:transparent;border:1px solid var(--ac);color:var(--ac-soft);font:600 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:11px 14px;cursor:pointer;transition:background var(--dur-micro) var(--curva-out)}
.vit__btn:hover,.vit__btn:focus-visible{background:rgba(255,255,255,.07)}

/* ---------- la caja del estudio ---------- */
.estudio{position:relative;z-index:3;padding:2svh max(23px,calc(50% - 590px)) 4svh}
.estudio__box{width:min(680px,100%);margin:0 auto;border:1px solid var(--linea);background:var(--s1);background:var(--flotante-fondo);backdrop-filter:var(--flotante-difuminado);-webkit-backdrop-filter:var(--flotante-difuminado);padding:clamp(20px,4vw,32px)}
.estudio__intro{margin:0 0 18px;font:400 14.5px/1.6 var(--sans);color:var(--texto-cuerpo)}
.estudio__intro b{color:var(--texto)}
.estudio h3{margin:22px 0 10px;font:600 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ac-soft)}
.estudio h3:first-of-type{margin-top:4px}

/* ---------- la mesa: la prenda y el área de impresión ---------- */
.est-escena{position:relative;width:min(520px,100%);margin:0 auto;aspect-ratio:7/10;background:#0b0d0e;border:1px solid var(--linea);overflow:hidden}
.est-prenda{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.est-area{position:absolute;border:1.5px dashed rgba(255,255,255,.55);background:rgba(255,255,255,.05);box-shadow:0 0 0 999px rgba(0,0,0,0)}
.est-area__tag{position:absolute;left:6px;top:5px;font:600 8.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.9);text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.9);white-space:nowrap}
.est-capa{position:absolute;transform:translate(-50%,-50%);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.est-capa:active{cursor:grabbing}
.est-capa img{display:block;width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.est-capa--frase{display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--serif);font-weight:700;line-height:1.18;padding:.2em .3em;pointer-events:auto}
.est-capa--frase span{pointer-events:none}
.est-nota{margin:10px auto 0;width:min(520px,100%);font:400 12.5px/1.55 var(--sans);color:var(--texto-2)}
.est-nota b{color:var(--ac-soft)}

/* ---------- controles de la capa ---------- */
.est-capa-ctrl{display:flex;align-items:center;gap:12px;margin:14px auto 0;width:min(520px,100%)}
.est-capa-ctrl label{font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--texto-2);white-space:nowrap}
.est-capa-ctrl input[type=range]{flex:1;accent-color:var(--ac);min-width:0}
.est-quitar{appearance:none;background:transparent;border:1px solid var(--linea);color:var(--texto);font:600 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:10px 13px;cursor:pointer}
.est-quitar:hover{background:rgba(255,255,255,.07)}

/* ---------- chips: prendas, colores, tallas, filtros ---------- */
.est-chips{display:flex;flex-wrap:wrap;gap:8px}
.est-chip{appearance:none;background:transparent;border:1px solid var(--linea);color:var(--texto);font:500 12.5px/1 var(--sans);letter-spacing:.03em;padding:11px 14px;border-radius:99px;cursor:pointer;transition:background var(--dur-micro) var(--curva-out),border-color var(--dur-micro) var(--curva-out)}
.est-chip:hover{background:rgba(255,255,255,.07)}
.est-chip[aria-checked="true"]{border-color:var(--ac);background:rgba(255,255,255,.1);color:var(--ac-soft)}
.est-chip--color{display:inline-flex;align-items:center;gap:8px}
.est-chip__punto{width:15px;height:15px;border-radius:50%;border:1px solid rgba(255,255,255,.45);flex:none}

/* ---------- la baraja ---------- */
.est-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
@media(min-width:560px){.est-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.est-pieza{appearance:none;min-width:0;border:1px solid var(--linea);background:#101314;padding:8px 8px 9px;cursor:pointer;text-align:center;transition:border-color var(--dur-micro) var(--curva-out),background var(--dur-micro) var(--curva-out)}
.est-pieza:hover{background:#161a1c}
.est-pieza[aria-checked="true"]{border-color:var(--ac);background:#1a2126}
.est-pieza__img{display:flex;align-items:center;justify-content:center;height:74px;overflow:hidden}
.est-pieza__img img{max-width:100%;max-height:74px;width:auto;height:auto;display:block}
.est-pieza__nombre{display:block;margin-top:7px;font:500 10.5px/1.35 var(--sans);color:var(--texto);letter-spacing:.02em}
.est-pieza--frase .est-pieza__img{font-family:var(--serif);font-style:italic;font-weight:600;font-size:12px;line-height:1.28;color:var(--ac-soft);padding:2px 3px;width:100%;box-sizing:border-box;overflow-wrap:break-word;text-align:center}
.est-pieza--subir{border-style:dashed;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:118px;gap:6px;color:var(--ac-soft);font:600 12px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.est-pieza--subir .est-pieza__nombre{text-transform:none;letter-spacing:.02em;color:var(--texto-2);font-weight:400}
/* el campo de archivo: renderizado pero invisible (jamás display:none,
   que es lo que los navegadores móviles no abren desde otra pieza) */
.est-file-sr{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}

/* ---------- personalizar la frase / la tinta ---------- */
.est-personal{margin-top:14px;border:1px solid var(--linea);padding:14px 15px;background:rgba(255,255,255,.03)}
.est-personal[hidden]{display:none}
.est-personal label{display:block;font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--texto-2);margin:10px 0 6px}
.est-personal label:first-child{margin-top:0}
.est-personal input[type=text]{width:100%;box-sizing:border-box;background:rgba(255,255,255,.05);border:1px solid var(--linea);color:var(--texto);font:400 15px/1.4 var(--sans);padding:11px 12px}
.est-personal input[type=text]:focus{outline:none;border-color:var(--ac)}

/* ---------- cantidad y cierre ---------- */
.est-cantidad{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.est-cantidad input[type=number]{width:96px;background:rgba(255,255,255,.05);border:1px solid var(--linea);color:var(--texto);font:400 16px/1.4 var(--sans);padding:11px 12px}
.est-cantidad input[type=number]:focus{outline:none;border-color:var(--ac)}
.est-resumen{margin:20px 0 0;border-left:2px solid var(--ac);padding:4px 0 4px 14px;font:italic 400 15.5px/1.55 var(--serif);color:rgba(255,250,238,.92)}
.est-pedir{appearance:none;margin-top:16px;width:100%;background:var(--ac);border:1px solid var(--ac);color:#17100a;font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:16px 18px;cursor:pointer}
.est-pedir:hover{filter:brightness(1.07)}
.est-estado{margin:12px 0 0;font:400 13px/1.55 var(--sans);color:var(--ac-soft)}
.est-estado[hidden]{display:none}
.est-fina{margin:14px 0 0;font:400 11.5px/1.55 var(--sans);color:var(--texto-2)}

@media(max-width:640px){.estudio{padding-left:23px;padding-right:23px}}