/* ============================================================
   Enamódate — estampa tu expresión
   ============================================================ */

.est[hidden]{display:none}
.est{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.est-velo{
  position:absolute;inset:0;
  background:rgba(18,18,18,.55);
  opacity:0;transition:opacity .3s;
}
.est.abierto .est-velo{opacity:1}
body.est-abierto{overflow:hidden}

.est-caja{
  position:relative;
  width:min(980px,100%);max-height:100%;
  background:#fff;
  display:flex;flex-direction:column;
  box-shadow:0 30px 70px rgba(18,18,18,.28);
  transform:translateY(18px);opacity:0;
  transition:transform .32s cubic-bezier(.32,.72,0,1),opacity .28s;
}
.est.abierto .est-caja{transform:none;opacity:1}

.est-cab{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:22px 26px 18px;border-bottom:1px solid var(--neutral-200);
}
.est-kicker{
  font:600 11px/1 var(--font-ui);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--enamo-crimson);
}
.est-tit{
  font:400 24px/1.15 var(--font-display);letter-spacing:.06em;text-transform:uppercase;
  margin-top:8px;
}
.est-cerrar{
  flex:0 0 auto;width:36px;height:36px;padding:0;border:0;background:none;
  color:var(--neutral-700);transition:color .22s;
}
.est-cerrar:hover{color:var(--enamo-crimson)}
.est-cerrar svg{width:20px;height:20px}

.est-cuerpo{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  display:grid;grid-template-columns:minmax(0,1fr) 310px;
  /* La foto toma el alto que quede y los mandos van justo debajo. Con filas
     automáticas, el `aspect-ratio` del lienzo desbordaba su celda y se metía
     por encima de los mandos. */
  grid-template-rows:minmax(0,1fr) auto;
}
/* Cada bloque en su celda: sin esto, los mandos se metían en el hueco del
   panel de la derecha y empujaban el panel a la fila de abajo. */
.est-lienzo{grid-column:1;grid-row:1;aspect-ratio:auto;height:100%;min-height:0}
.est-mandos{grid-column:1;grid-row:2}
.est-panel{grid-column:2;grid-row:1 / span 2}

/* ---- El lienzo ---- */
.est-lienzo{
  position:relative;
  background:var(--neutral-200);
  aspect-ratio:1/1.05;
  display:flex;align-items:center;justify-content:center;
  padding:30px;
  touch-action:none;                    /* el arrastre es nuestro, no del navegador */
  overflow:hidden;
}
.est-lienzo img#est-foto{max-height:100%;width:auto;object-fit:contain;pointer-events:none}
/* La capa se recorta a la caja real de la foto desde el JS: los puntos van en
   porcentaje de la prenda, no del recuadro gris. */
.est-capa{position:absolute;left:0;top:0;width:100%;height:100%}

/* ---- Frente y espalda ---- */
.est-vistas[hidden]{display:none}
.est-vistas{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:flex;background:#fff;box-shadow:0 2px 12px rgba(18,18,18,.16);
}
.est-vistas button{
  border:0;background:none;padding:9px 16px;
  font:600 10.5px/1 var(--font-ui);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--neutral-600);transition:color .22s,background .22s;
}
.est-vistas button.sel{background:var(--neutral-900);color:#fff}
.est-vistas button:not(.sel):hover{color:var(--enamo-crimson)}

.est-lista-cab{
  margin-top:10px;padding-bottom:4px;
  font:600 10px/1 var(--font-ui);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--neutral-400);
}
.est-lista-cab:first-child{margin-top:0}

/* ---- Las zonas ----
   Cada una es el rectángulo punteado del catálogo. La expresión se recorta
   dentro: ese es el espacio incluido en el precio. */
.est-zona{
  position:absolute;
  outline:1px dashed rgba(18,18,18,.5);
  outline-offset:0;
}
.est-zona[role="button"]{cursor:pointer}
.est-zona.con-arte{cursor:grab}
.est-zona.llevando{cursor:grabbing}
.est-zona.elegida{outline-color:var(--enamo-crimson);outline-width:1.5px}
.est-zona-recorte{position:absolute;inset:0;overflow:hidden}

.est-zona-arte{
  position:absolute;transform:translate(-50%,-50%);
  width:auto;height:auto;
  pointer-events:none;
  opacity:.97;
}
/* La misma foto de la prenda, encima del arte. Una copia multiplica y trae las
   sombras de los pliegues; la otra aclara y trae los brillos. Con solo la
   primera, un estampado negro se quedaba plano. */
.est-zona-tela{
  position:absolute;
  background-size:100% 100%;
  background-repeat:no-repeat;
  pointer-events:none;
}
.est-zona-tela-sombras{mix-blend-mode:multiply;opacity:.45}
/* Poca opacidad a propósito: sobre una tela clara, esta capa desteñía los
   estampados oscuros hasta dejarlos grises. */
.est-zona-tela-luces{mix-blend-mode:screen;opacity:.14}

/* El punto nunca es más grande que su zona: en el teléfono, un punto fijo de
   22 px se desbordaba de la capota o del puño, que ahí miden poco. */
.est-punto{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  height:min(22px,62%);width:auto;aspect-ratio:1;border-radius:50%;
  background:var(--enamo-crimson);
  box-shadow:0 2px 10px rgba(18,18,18,.3);
  pointer-events:none;
}
.est-punto-halo{
  position:absolute;inset:0;border-radius:50%;
  background:var(--enamo-crimson);
  animation:est-latido 1.6s ease-out infinite;
}
@keyframes est-latido{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(2.4);opacity:0}
  100%{transform:scale(2.4);opacity:0}
}
.est-zona-eti{
  position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);
  white-space:nowrap;
  background:var(--neutral-900);color:#fff;
  font:600 9px/1 var(--font-ui);letter-spacing:var(--ls-label);text-transform:uppercase;
  padding:4px 7px;
  opacity:0;transition:opacity .22s;pointer-events:none;
}
.est-zona:hover .est-zona-eti,.est-zona:focus-visible .est-zona-eti,.est-zona.elegida .est-zona-eti{opacity:1}

.est-zona-x{
  position:absolute;top:-10px;right:-10px;
  width:20px;height:20px;padding:0;border:0;border-radius:50%;
  background:var(--neutral-900);color:#fff;
  font:400 14px/1 var(--font-ui);
  display:flex;align-items:center;justify-content:center;
}
.est-zona-x:hover{background:var(--enamo-crimson)}

/* ---- El panel ---- */
.est-panel{
  border-left:1px solid var(--neutral-200);
  padding:22px;
  display:flex;flex-direction:column;gap:16px;
}
.est-guia{font:400 13px/1.6 var(--font-ui);color:var(--neutral-700)}
.est-regla{font:400 11.5px/1.6 var(--font-ui);color:var(--neutral-600)}

.est-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.est-fila{
  display:flex;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--neutral-200);
}
.est-fila-zona{
  display:block;
  font:600 12px/1.2 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;
}
.est-fila-tam{display:block;font:400 10.5px/1.4 var(--font-ui);color:var(--neutral-600)}
.est-fila.puesta .est-fila-zona{color:var(--enamo-crimson)}
.est-fila-b{
  margin-left:auto;padding:0;border:0;background:none;
  font:600 10.5px/1 var(--font-ui);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--neutral-900);text-decoration:underline;text-underline-offset:2px;
  transition:color .22s;
}
.est-fila-b:hover{color:var(--enamo-crimson)}
.est-fila-q{
  padding:0;border:0;background:none;
  font:600 10.5px/1 var(--font-ui);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--neutral-600);transition:color .22s;
}
.est-fila-q:hover{color:var(--enamo-crimson)}

/* ---- Mandos de la expresión, bajo la prenda ----
   Estaban en el panel de la derecha, que en el teléfono queda debajo del
   lienzo: había que bajar a mover el deslizador y subir a ver el resultado. */
.est-mandos[hidden]{display:none}
.est-mandos{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px 26px 14px;
  border-top:1px solid var(--neutral-200);
  background:#fff;
}
.est-mando{display:flex;align-items:center;gap:10px}
.est-mando-zoom{flex:1 1 220px;min-width:0}
.est-mando-zoom label,.est-mando-eti{
  flex:0 0 auto;white-space:nowrap;
  font:600 10.5px/1 var(--font-ui);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--neutral-600);
}
.est-mando-zoom input{flex:1 1 auto;min-width:0;accent-color:var(--enamo-crimson)}

.est-girar{
  width:34px;height:34px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--neutral-300);background:#fff;
  color:var(--neutral-900);transition:border-color .22s,color .22s;
}
.est-girar svg{width:17px;height:17px}
.est-girar:hover{border-color:var(--enamo-crimson);color:var(--enamo-crimson)}
.est-girar-cero{
  width:auto;padding:0 11px;
  font:600 10px/1 var(--font-ui);letter-spacing:var(--ls-label);text-transform:uppercase;
}
.est-medida-nota{flex:1 0 100%;margin:0;font:400 10.5px/1.4 var(--font-ui);color:var(--neutral-400)}

.est-acciones{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.est-acciones .btn{width:100%}
.est-acciones .btn:disabled{opacity:.35;pointer-events:none}

.est-aviso{font:400 11.5px/1.5 var(--font-ui);color:var(--neutral-600);min-height:1em}
.est-aviso.malo{color:var(--enamo-crimson)}

@media (prefers-reduced-motion:reduce){
  .est-velo,.est-caja{transition:none}
  .est-punto-halo{animation:none;opacity:.4}
}

@media (max-width:820px){
  .est{padding:0}
  .est-caja{width:100%;max-height:100%;height:100%}
  /* Apilado en flujo normal: dentro de la rejilla, la fila de la foto se
     comprimía y el lienzo se desbordaba por encima del panel. */
  .est-cuerpo{display:block;overflow-y:auto}
  .est-mandos{padding:10px 18px 12px;gap:12px}
  .est-mando-zoom{flex:1 1 100%}
  .est-mando-giro{flex:1 1 100%;justify-content:flex-start}
  .est-lienzo{aspect-ratio:1/1;padding:20px}
  .est-panel{border-left:0;border-top:1px solid var(--neutral-200)}
  .est-acciones{margin-top:8px}
}