/* Probador de Gonser: página aparte; usa los tokens de ../css/estilo.css y no cambia nada de la tienda */
.probador__intro { margin: -8px 0 20px; color: var(--suave); }
.probador__estado { color: var(--suave); }
.probador__cuerpo { display: grid; gap: 16px; grid-template-areas: "escena" "tallas" "prendas" "info"; }
.probador__escena { grid-area: escena; position: relative; width: min(100%, calc(68svh * 2 / 3)); aspect-ratio: 2 / 3; margin: 0 auto; overflow: hidden; border-radius: var(--r); background: var(--foto); }
.probador__escena img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s, filter .3s; }
.probador__escena img.cambiando { opacity: .25; filter: blur(8px); }
@media (prefers-reduced-motion: reduce) { .probador__escena img { transition: none; } }
/* Esquina de arriba a la derecha: es pared en todas las fotos; nunca tapa la cara */
.probador__talla-foto { position: absolute; top: 12px; right: 12px; padding: 6px 10px; border-radius: var(--r); background: rgba(255, 255, 255, .94); color: var(--tinta); font: 500 14px/1.2 var(--f-mono); }
.probador__prendas { grid-area: prendas; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.prenda-btn { display: block; width: 100%; height: 100%; padding: 0 0 8px; border: 0; border-radius: var(--r); background: var(--blanco); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--gris-toque); transition: box-shadow .2s; }
.prenda-btn:hover { box-shadow: inset 0 0 0 2px var(--suave); }
.prenda-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--marca); }
.prenda-btn img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r) var(--r) 0 0; background: var(--gris); }
.prenda-btn b { display: block; padding: 8px 8px 0; font-size: 13px; font-weight: 600; line-height: 1.2; }
.prenda-btn span { display: block; padding: 2px 8px 0; font: 500 13px/1.2 var(--f-mono); color: var(--suave); }
.probador__info { grid-area: info; display: grid; gap: 12px; }
.probador__tallas { grid-area: tallas; display: grid; gap: 12px; }
.probador__tallas .tallas { display: flex; flex-wrap: wrap; gap: 8px; }
/* Giro 360°: se arrastra de lado; de arriba abajo la página sigue bajando */
.probador__escena.gira { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.probador__escena.gira:active { cursor: grabbing; }
.probador__giro { display: flex; align-items: center; gap: 12px; }
.probador__giro .chip, .probador__giro .chip[aria-pressed="true"] { flex: none; background: var(--gris-tenue); color: var(--marca); }  /* gris: el único botón negro es «Agregar a la bolsa» */
.probador__giro p { font-size: 13px; color: var(--suave); }
.probador__etiqueta { font-size: 14px; font-weight: 600; }
.probador__info .btn { width: 100%; }
.probador__aviso:empty { display: none; }
.probador__aviso a { font-weight: 600; }
.probador__nota { font-size: 13px; color: var(--suave); }
@media (min-width: 900px) {
  .probador__cuerpo { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "escena prendas" "escena info" "tallas info"; grid-template-rows: auto 1fr auto; align-items: start; column-gap: 32px; row-gap: 24px; }
  .probador__escena, .probador__tallas { width: calc(min(78svh, 720px) * 2 / 3); }
  .probador__info .btn { width: auto; justify-self: start; }
}
/* Medidas de la talla elegida (tabla de Gonser) y la guía para elegir */
.probador__medidas { padding: 12px 14px; border-radius: var(--r); background: var(--gris-tenue); }
.probador__medidas p { font-size: 14px; font-weight: 600; }
.probador__medidas dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 8px 0 0; }
.probador__medidas dt { font-size: 13px; color: var(--suave); }
.probador__medidas dd { margin: 0; font: 500 14px/1.3 var(--f-mono); }
.probador__guia { font-size: 14px; }
.probador__giro .chip:hover { background: var(--gris-toque); }