/* ─────────────────────────────────────────────
   La sección Merch: lo físico que fabrica PrintoVerse.

   Vive dentro de la tienda y usa su mismo sistema (colores, radios, letra), pero tiene
   que leerse distinto de lo digital de un vistazo. Lo que lo distingue no es un color
   nuevo sino el objeto: las fotos de producto, claras y grandes, contra la tienda oscura.
   Los rangos se ven como iconos del juego; esto se ve como una cosa que te llega a casa.
   ───────────────────────────────────────────── */

/* El fondo de las fotos. Es el gris de estudio sobre el que PrintoVerse las toma, para
   que una foto que tarda en cargar, o una de otra proporción, no deje un hueco oscuro
   con un borde que corta la imagen. */
:root{--fondo-foto:#e6e6e9}

/* ── La cabecera de la sección ── */
.merch-cabeza{padding:34px 0 8px;max-width:880px}
.merch-cabeza h1{font-size:var(--t-h1);letter-spacing:-.02em}
.merch-cabeza .lead{color:var(--texto-2);font-size:var(--t-lead);margin-top:8px;max-width:52ch}

/* ── Las categorías del merch ──
   Pastillas y no la columna lateral de la tienda digital: son pocas, cambian solas
   según lo que haya en PrintoVerse, y en el celular se recorren con el dedo. */
.merch-cats{display:flex;gap:8px;margin:26px 0 4px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin}
/* Aire debajo: sin esto la última fila de tarjetas quedaba pegada al pie. */
.merch-main{padding-bottom:72px}
.merch-cats a{flex:0 0 auto;padding:9px 18px;border-radius:99px;font-size:var(--t-sm);
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;color:var(--texto-2);background:rgba(28,25,50,.66);
  border:1px solid rgba(83,87,130,.34);transition:color .15s,border-color .15s,background .15s}
.merch-cats a span{font-size:var(--t-2xs);font-weight:800;opacity:.7}
.merch-cats a:hover{color:var(--texto);border-color:var(--azul-claro)}
.merch-cats a[aria-current="page"]{color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--azul),var(--azul-hondo))}

.merch-seccion{margin-top:30px}
.merch-seccion:first-of-type{margin-top:22px}

/* ── La tarjeta de un producto ──
   La foto manda: ocupa la tarjeta de lado a lado y el texto va debajo, corto. */
.merch-parrilla{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.pieza{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;height:100%;
  background:linear-gradient(158deg,rgba(28,25,50,.94),rgba(17,14,36,.94) 76%);
  border:1px solid rgba(83,87,130,.34);
  transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .2s,box-shadow .25s}
.pieza:hover{transform:translateY(-4px);border-color:rgba(113,136,244,.55);box-shadow:var(--sombra)}
.pieza:focus-within{border-color:rgba(113,136,244,.55)}
.pieza .foto{display:block;aspect-ratio:1;background:var(--fondo-foto);overflow:hidden;
  position:relative}
.pieza .foto img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.pieza:hover .foto img{transform:scale(1.045)}
.pieza .info{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.pieza h3{font-size:var(--t-lg);font-weight:800;letter-spacing:-.01em}
.pieza h3 a{color:inherit}
.pieza h3 a:hover{color:var(--hielo)}
.pieza h3 a:focus-visible{outline:2px solid var(--azul-claro);outline-offset:3px;border-radius:4px}
/* El hueco elástico de la tarjeta: empuja el precio y el botón abajo del todo. */
.pieza .titular{font-size:var(--t-xs);color:var(--texto-2);margin-bottom:10px}

/* Las opciones, como pastillas: una marcada, las demás a un toque. Se ajustan a varias
   filas si un producto tiene muchas, sin desplegable. */
.pastillas-op{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.pastillas-op button{font:inherit;font-size:var(--t-2xs);font-weight:700;cursor:pointer;
  padding:6px 11px;border-radius:99px;color:var(--texto-2);
  background:rgba(12,12,62,.55);border:1px solid var(--borde);
  transition:background-color .22s var(--curva),border-color .22s var(--curva),
             color .22s var(--curva),transform .22s var(--curva)}
.pastillas-op button:hover{border-color:var(--azul-claro);color:var(--texto)}
.pastillas-op button:active{transform:scale(.96)}
.pastillas-op button[aria-checked="true"]{background:rgba(70,82,239,.24);
  border-color:var(--azul-claro);color:var(--texto)}
.pastillas-op button:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.pastillas-op button:focus-visible{outline:2px solid var(--hielo);outline-offset:2px}

/* Agregar: ocupa el ancho de la tarjeta y avisa un momento cuando entró. */
.pieza .anadir-pieza{width:100%;margin-top:10px}
.pieza .anadir-pieza.hecho{background:linear-gradient(135deg,var(--verde),#2b9c63)}
.pieza .pie-pieza{display:flex;flex-direction:column;gap:2px;
  margin-top:auto;padding-top:12px;border-top:1px solid rgba(83,87,130,.24)}
.pieza .precio-m{font-size:var(--t-lg);font-weight:900;letter-spacing:-.02em;white-space:nowrap}
.pieza .precio-m small{font-size:var(--t-2xs);font-weight:600;color:var(--texto-2);
  letter-spacing:0;margin-right:5px}
.pieza .opciones-m{font-size:var(--t-2xs);color:var(--texto-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pieza.agotada .foto img{filter:grayscale(.85);opacity:.7}
.marca-agotado{position:absolute;left:12px;bottom:12px;background:rgba(7,5,28,.86);
  color:var(--texto);font-size:var(--t-2xs);font-weight:700;padding:5px 11px;border-radius:99px}

/* Carga: la forma de lo que viene, sin ruedita. */
.esqueleto .foto{background:rgba(83,87,130,.18)}
.esqueleto .barra-e{height:14px;border-radius:6px;background:rgba(83,87,130,.2)}
.esqueleto .barra-e.corta{width:55%}
@media (prefers-reduced-motion:no-preference){
  .esqueleto .foto,.esqueleto .barra-e{animation:latido 1.4s ease-in-out infinite}
}
@keyframes latido{50%{opacity:.45}}

.merch-aviso{max-width:560px;margin:60px auto;text-align:center;color:var(--texto-2)}
.merch-aviso h2{color:var(--texto);font-size:var(--t-xl);margin-bottom:8px}
.merch-aviso .boton{margin-top:18px}

/* ── La ficha ── */
.ficha-merch{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:44px;align-items:start;padding:18px 0 40px}
/* Un hijo de cuadrícula no encoge por debajo de su contenido si no se le dice. Sin esto
   la fila de miniaturas estiraba la columna hasta su ancho entero y en el celular la
   página entera quedaba más ancha que la pantalla. */
.ficha-merch > *{min-width:0}
.galeria .principal{aspect-ratio:4/3;border-radius:18px;background:var(--fondo-foto);
  overflow:hidden}
.galeria .principal img{width:100%;height:100%;object-fit:cover;
  transition:opacity .28s cubic-bezier(.16,1,.3,1)}
.galeria .principal img.cambiando{opacity:0}
/* Las miniaturas en una cuadrícula que se acomoda en filas, sin barra deslizante: la
   barra del navegador no es de esta página y con muchas fotos se veía como un añadido.
   Con doce fotos son dos filas ordenadas, y se ven todas sin tener que buscarlas. */
.miniaturas{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));
  gap:8px;margin-top:12px;padding:3px}
.miniaturas button{width:100%;aspect-ratio:1;border-radius:10px;
  overflow:hidden;cursor:pointer;padding:0;background:var(--fondo-foto);
  border:2px solid transparent;opacity:.72;transition:opacity .15s,border-color .15s}
.miniaturas button:hover{opacity:1}
.miniaturas button[aria-pressed="true"]{border-color:var(--azul-claro);opacity:1}
.miniaturas button:focus-visible{outline:2px solid var(--azul-claro);outline-offset:2px}
.miniaturas img{width:100%;height:100%;object-fit:cover}

.panel-merch{position:sticky;top:calc(var(--barra-alto) + 22px);
  background:linear-gradient(158deg,rgba(37,35,99,.55),rgba(17,14,36,.94) 72%);
  border:1px solid rgba(113,136,244,.34);border-radius:18px;padding:28px}
.panel-merch h1{font-size:var(--t-h2);letter-spacing:-.02em;line-height:1.15}
.panel-merch .titular{color:var(--texto-2);margin-top:8px}
.panel-merch .precio-grande{font-size:var(--t-4xl);font-weight:900;letter-spacing:-.03em;
  margin:20px 0 4px;display:flex;align-items:baseline;gap:9px}
.panel-merch .precio-grande .cop{font-size:var(--t-xs);font-weight:700;
  color:var(--texto-2);letter-spacing:.06em}

/* Las opciones son radios de verdad, con su precio al lado: se elige con el teclado
   igual que con el dedo, y el precio grande de arriba sigue a la que esté marcada. */
.opciones{border:0;margin:18px 0 0;display:grid;gap:9px}
.opciones legend{font-size:var(--t-xs);color:var(--texto-2);font-weight:600;margin-bottom:9px}
.opcion{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border-radius:12px;cursor:pointer;
  background:rgba(7,5,28,.42);border:1px solid rgba(83,87,130,.5);
  transition:border-color .15s,background .15s}
.opcion:hover{border-color:var(--azul-claro)}
.opcion input{position:absolute;opacity:0;pointer-events:none}
.opcion .nombre-op{font-weight:600;font-size:var(--t-sm)}
.opcion .precio-op{font-weight:800;font-size:var(--t-sm);white-space:nowrap}
.opcion:has(input:checked){border-color:var(--azul-claro);background:rgba(70,82,239,.16);
  box-shadow:inset 0 0 0 1px var(--azul-claro)}
.opcion:has(input:focus-visible){outline:2px solid var(--azul-claro);outline-offset:2px}
.opcion.sin-stock{cursor:not-allowed;opacity:.55}
.opcion.sin-stock .precio-op{font-weight:600;color:var(--texto-2)}

/* Cantidad y botón de añadir, en una fila. */
.anadir-merch{display:flex;gap:10px;margin-top:20px}
.anadir-merch .boton{flex:1}
.cantidad-merch{display:flex;align-items:center;border-radius:12px;
  border:1px solid rgba(83,87,130,.5);background:rgba(7,5,28,.42)}
.cantidad-merch button{width:40px;height:100%;min-height:46px;border:0;background:none;
  color:var(--texto);font:inherit;font-size:var(--t-lg);cursor:pointer}
.cantidad-merch button:disabled{opacity:.35;cursor:not-allowed}
.cantidad-merch button:focus-visible{outline:2px solid var(--azul-claro);outline-offset:-2px;
  border-radius:10px}
.cantidad-merch span{min-width:26px;text-align:center;font-weight:800;
  font-variant-numeric:tabular-nums}
.nota-merch{color:var(--texto-2);font-size:var(--t-xs);margin-top:10px}

.datos-merch{margin-top:20px}
.datos-merch div{display:flex;justify-content:space-between;gap:16px;font-size:var(--t-xs);
  padding:11px 0;border-top:1px solid rgba(83,87,130,.24);color:var(--texto-2)}
.datos-merch b{color:var(--texto);font-weight:700;text-align:right}
.datos-merch .enlace-pv{color:var(--azul-claro);text-decoration:underline;
  text-underline-offset:.18em;text-decoration-thickness:.07em}
.datos-merch .enlace-pv:hover{color:var(--hielo)}

.descripcion-merch{margin-top:30px;max-width:62ch}
.descripcion-merch h2{font-size:var(--t-xl);margin-bottom:10px}
.descripcion-merch p{color:var(--texto-2)}

/* El aviso de que no es un producto oficial. Va en inglés porque así lo pide la marca,
   pequeño pero legible: es un texto legal, no letra escondida. */
.aviso-legal{margin:34px 0 10px;padding-top:16px;border-top:1px solid rgba(83,87,130,.24);
  font-size:var(--t-2xs);color:var(--texto-2);letter-spacing:.03em;max-width:80ch}

@media(max-width:900px){
  .ficha-merch{grid-template-columns:minmax(0,1fr);gap:22px}
  .panel-merch{position:static}
}
@media(max-width:600px){
  .miniaturas{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px}
  .merch-parrilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pieza .info{padding:12px 13px 14px}
  .pieza h3{font-size:var(--t-md)}
  .pieza .titular{display:none}
  .pieza .pie-pieza{margin-top:auto;padding-top:9px}
  .pieza .precio-m{font-size:var(--t-lg)}
  .panel-merch{padding:22px}
}