/* MPL Juegos Digitales: la vidriera del local de noche. Cada juego lleva su cartel de precio en cartulina lila.
   Tema oscuro siempre (también con el celular en modo claro). Solo la paleta de la marca y tonos derivados:
   #E5AFFB lila, #975AB7 violeta, #4F1964 violeta oscuro, #3B1449 y #2A0E36 (derivados), blanco y #C9A6D9 para texto.
   Contraste AA verificado: blanco ≥12,7:1 y #C9A6D9 ≥6:1 sobre los tres fondos; etiquetas 7,2:1; botón 4,7:1.
   El violeta #975AB7 nunca va como texto sobre fondo oscuro (no llega a 4,5:1): solo fondos de botón y bordes. */

@font-face {
  font-family: "Barlow Condensed";
  src: url("../fuentes/barlow-condensed-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fuentes/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --lila: #E5AFFB;
  --violeta: #975AB7;
  --violeta-oscuro: #4F1964;
  --superficie: #3B1449;   /* tarjetas, buscador, menú */
  --fondo: #2A0E36;        /* página */
  --franja: #4F1964;       /* logo y barra fija */
  --texto: #FFFFFF;
  --texto-suave: #C9A6D9;
  --blanco: #FFFFFF;

  --cartel: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texto-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --margen: 16px;
  --hueco: 12px;
  --radio: 12px;
  --toque: 44px;
  /* Única excepción a la paleta: el acento de las ofertas (etiqueta, botón de la sección) */
  --oferta: #FFD23F;
  --oferta-texto: #2A0E36;
  --salida: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; background: var(--fondo); }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.45 var(--texto-ui);
  -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--lila); color: var(--violeta-oscuro); }
:focus-visible { outline: 3px solid var(--lila); outline-offset: 2px; }
input { caret-color: var(--lila); }
.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* La franja del logo, con el logo tal cual (su contorno negro lo separa del violeta) */
.encabezado {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--franja);
  padding: 8px var(--margen);
  padding-top: max(8px, env(safe-area-inset-top));
}
.marca { display: block; border-radius: 6px; }
.marca img { height: 56px; width: auto; }
.boton-consultar {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--toque); padding: 0 14px;
  border: 0; border-radius: 999px;
  background: var(--lila); color: var(--violeta-oscuro);
  font-weight: 700; font-size: 15px;
  transition: transform .15s var(--salida);
}
.boton-consultar svg { width: 18px; height: 18px; fill: currentColor; }
.acciones { display: flex; align-items: center; gap: 8px; }
.boton-instagram {
  display: grid; place-items: center; flex: 0 0 auto;
  width: var(--toque); height: var(--toque);
  border-radius: 999px;
  background: var(--lila); color: var(--violeta-oscuro);
  transition: transform .15s var(--salida);
}
.boton-instagram svg { width: 20px; height: 20px; fill: currentColor; }
.boton-consultar:active, .boton-instagram:active { transform: scale(.96); }

/* Buscador y filtros: fijos arriba al hacer scroll */
.barra {
  position: sticky; top: 0; z-index: 10;
  background: var(--franja);
  padding: 4px var(--margen) 10px;
}
.barra.pegada { box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7); }
.buscador { position: relative; margin: 0; }
.buscador input {
  width: 100%; height: 48px;
  padding: 0 48px 0 44px;
  border: 2px solid var(--violeta); border-radius: var(--radio);
  background: var(--superficie); color: var(--texto);
  font-size: 16px; /* 16px: iOS no hace zoom al tocar */
  -webkit-appearance: none; appearance: none;
}
.buscador input::placeholder { color: var(--texto-suave); opacity: 1; }
.buscador input::-webkit-search-cancel-button { display: none; }
.buscador input:focus { outline: none; border-color: var(--lila); }
.lupa {
  position: absolute; left: 12px; top: 12px; width: 24px; height: 24px;
  fill: var(--lila); pointer-events: none;
}
.limpiar {
  position: absolute; right: 2px; top: 2px;
  width: var(--toque); height: var(--toque);
  display: grid; place-items: center;
  border: 0; background: none; border-radius: 10px;
}
.limpiar svg { width: 20px; height: 20px; fill: var(--lila); }

.consolas {
  margin-top: 8px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  background: var(--superficie); border-radius: var(--radio); padding: 2px;
}
.consolas button {
  min-height: 44px; border: 0; border-radius: 10px;
  background: transparent; color: var(--texto);
  font-weight: 700; font-size: 15px;
  transition: background-color .18s var(--salida), color .18s var(--salida);
}
.consolas button[aria-pressed="true"] { background: var(--lila); color: var(--violeta-oscuro); }
/* Conteo, género y orden, justo arriba de la grilla. En el celular el conteo va arriba y Género y Orden
   comparten la fila de abajo, mitad y mitad; desde 600 px, todo en una fila. */
.resultados {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin: 12px 0 10px;
}
.resultados .conteo { flex: 1 1 100%; }
.resultados-controles { flex: 1 1 100%; display: flex; gap: 8px; }
.resultados-controles > * { flex: 1 1 0; min-width: 0; }
.boton-genero {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: var(--radio); background: var(--superficie); cursor: pointer;
  color: var(--texto); font-weight: 600; font-size: 15px; text-align: left;
}
.boton-genero span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boton-genero svg { flex: 0 0 auto; width: 18px; height: 18px; fill: var(--lila); }
.boton-genero[aria-pressed="true"] { background: var(--lila); color: var(--violeta-oscuro); }
.boton-genero[aria-pressed="true"] svg { fill: var(--violeta-oscuro); }
.boton-genero:focus-visible { outline: 2px solid var(--lila); outline-offset: 2px; }
@media (min-width: 600px) {
  .resultados { flex-wrap: nowrap; }
  .resultados .conteo { flex: 1 1 auto; }
  .resultados-controles { flex: 0 0 auto; }
  .resultados-controles > * { flex: 0 0 auto; }
}
/* Hoja de géneros: dos columnas de botones con el nombre y cuántos juegos hay */
.generos-nota { margin: 4px 0 0; font-size: 14px; color: var(--texto-suave); }
.generos-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.generos-lista button {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 8px 12px;
  text-align: left; cursor: pointer; border: 0; border-radius: var(--radio); background: var(--violeta); color: var(--blanco);
}
.generos-lista button:first-child { grid-column: 1 / -1; }
.generos-lista strong { font-size: 16px; font-weight: 700; line-height: 1.15; }
.generos-lista span { font-size: 13px; color: var(--lila); font-variant-numeric: tabular-nums; }
.generos-lista button[aria-pressed="true"] { background: var(--lila); color: var(--violeta-oscuro); }
.generos-lista button[aria-pressed="true"] span { color: var(--violeta-oscuro); }
.generos-lista button:active { background: var(--violeta-oscuro); }
#orden {
  min-height: 44px;
  padding: 0 34px 0 12px;
  border: 0; border-radius: var(--radio);
  background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E5AFFB' d='M7 9.5 12 15l5-5.5z'/%3E%3C/svg%3E") no-repeat right 8px center / 22px;
  color: var(--texto); font-weight: 600; font-size: 15px;
  -webkit-appearance: none; appearance: none;
}
#orden option { background: var(--superficie); color: var(--texto); }

/* Contenido */
main { padding: 16px var(--margen) 32px; max-width: 1240px; margin: 0 auto; }
.titulo {
  margin: 0;
  font: 800 24px/1 var(--cartel);
  letter-spacing: -.01em; text-transform: uppercase;
  color: var(--texto);
}
.aclaracion { margin: 6px 0 0; font-size: 15px; color: var(--texto-suave); max-width: 60ch; }
.conteo { margin: 0; font-size: 14px; font-weight: 600; color: var(--lila); }

.grilla {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px var(--hueco);
}

/* Cada juego: la tapa entera y sin nada encima; debajo etiquetas, nombre, cartel de precio y botón */
.juego {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--superficie); border-radius: var(--radio); overflow: hidden;
}
.tapa {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  aspect-ratio: 480 / 605;   /* la tapa más alta del catálogo: ninguna se recorta */
  background: var(--superficie);
}
.tapa img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity .3s var(--salida);
}
.tapa img.lista { opacity: 1; }
.tapa .sin-tapa {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 12px;
  background: var(--violeta-oscuro);
  font: 800 22px/1 var(--cartel); text-align: center; text-transform: uppercase; color: var(--lila);
  visibility: hidden;
}
.tapa.falta .sin-tapa { visibility: visible; }

.datos { flex: 1; display: flex; flex-direction: column; padding: 10px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.etiqueta {
  padding: 2px 7px; border-radius: 5px;
  background: var(--violeta-oscuro); color: var(--lila);
  font-size: 12px; font-weight: 700; line-height: 1.35;
}
.etiqueta.consola { font: 800 14px/1.2 var(--cartel); letter-spacing: .03em; }
.abrir-ficha {
  display: block; width: 100%; margin: 0 0 10px; padding: 0 0 2px; border: 0;
  background: none; text-align: left; color: inherit;
}
.nombre {
  margin: 0; font-size: 15px; line-height: 1.25; font-weight: 600; color: var(--texto);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.5em;
}
/* Indicio de que se puede tocar para ver más */
.ver-detalles {
  display: inline-flex; align-items: center; gap: 2px; margin-top: 4px;
  font-size: 13px; font-weight: 600; color: var(--lila);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.ver-detalles svg { width: 14px; height: 14px; fill: currentColor; }

/* El cartel de precio: cartulina lila con letra violeta oscuro */
.precio {
  margin: auto 0 0; padding: 8px 10px 10px;
  border-radius: 8px;
  background: var(--lila); color: var(--violeta-oscuro);
}
.precio .rotulo { display: block; font-size: 12px; font-weight: 600; }
.precio .contado {
  display: block;
  font: 800 32px/0.95 var(--cartel); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.precio .cuotas { display: block; margin-top: 4px; font: 600 17px/1.1 var(--cartel); }
.precio .cuotas b { font-weight: 800; }

.boton-pedir {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: var(--toque); margin-top: 10px;
  border: 0; border-radius: 10px;
  background: var(--violeta); color: var(--blanco);
  font-weight: 700; font-size: 15px;
  transition: transform .15s var(--salida), background-color .15s var(--salida);
}
.boton-pedir svg { width: 18px; height: 18px; fill: currentColor; }
.boton-pedir:hover { background: var(--violeta-oscuro); }
.boton-pedir:active { transform: scale(.97); background: var(--violeta-oscuro); }

.cargar-mas, .boton-secundario {
  display: block; width: 100%; max-width: 420px; min-height: 52px; margin: 24px auto 0;
  border: 2px solid var(--lila); border-radius: var(--radio);
  background: transparent; color: var(--texto);
  font-weight: 700; font-size: 16px;
}
.cargar-mas:active, .boton-secundario:active { background: var(--violeta-oscuro); }

.sin-resultados, .error {
  margin-top: 8px; padding: 28px 20px; border-radius: var(--radio);
  background: var(--superficie); text-align: center;
}
.sin-resultados h2, .error h2 { margin: 0; font: 800 28px/1 var(--cartel); text-transform: uppercase; color: var(--lila); }
.sin-resultados p, .error p { margin: 8px auto 0; max-width: 32ch; color: var(--texto-suave); }
.sin-resultados .boton-pedir { max-width: 320px; margin: 18px auto 0; }

/* Esqueleto mientras carga */
.juego.cargando .tapa { background: var(--violeta-oscuro); }
.juego.cargando .datos { min-height: 190px; }

.pie {
  background: var(--franja); padding: 28px var(--margen) calc(28px + env(safe-area-inset-bottom));
  text-align: center; color: var(--texto);
}
.pie img { height: 64px; width: auto; margin: 0 auto 10px; }
.pie p { margin: 4px 0; }
.pie a { color: var(--lila); font-weight: 700; text-underline-offset: 3px; }
.actualizado { font-size: 13px; color: var(--texto-suave); }

/* Menú de WhatsApp: hoja que sube desde abajo */
.hoja {
  width: 100%; max-width: 480px; margin: auto auto 0; padding: 0;
  border: 0; border-radius: 20px 20px 0 0;
  background: var(--superficie); color: var(--texto);
}
.hoja::backdrop { background: rgba(20, 6, 26, .72); }
.hoja[open] { animation: subir .28s var(--salida); }
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }
.hoja-cuerpo { padding: 22px var(--margen) calc(18px + env(safe-area-inset-bottom)); }
.hoja h2 { margin: 0; font: 800 28px/1 var(--cartel); text-transform: uppercase; color: var(--lila); }
.hoja-sub { margin: 6px 0 0; font-size: 16px; font-weight: 700; color: var(--texto); }
.hoja-juego { margin: 8px 0 0; font-size: 15px; color: var(--texto-suave); }
.contactos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.contacto {
  display: grid; place-items: center; min-height: 56px; padding: 10px 12px;
  border-radius: var(--radio); background: var(--violeta); color: var(--blanco); text-decoration: none;
  font: 800 22px/1 var(--cartel); text-transform: uppercase; letter-spacing: .02em;
}
.contacto:active { background: var(--violeta-oscuro); }
.hoja .boton-secundario { margin-top: 12px; max-width: none; min-height: 48px; }

/* Mateo y Luca parados detrás del menú: el fondo va en el formulario (por delante) y las figuras asoman
   por arriba; el corte de abajo de cada imagen queda tapado por el menú. Cada uno sobre su botón. */
.hoja-contacto { overflow: visible; background: transparent; }
.hoja-contacto .hoja-cuerpo {
  position: relative; z-index: 1;
  background: var(--superficie); border-radius: 20px 20px 0 0;
}
.figuras {
  position: absolute; z-index: 0; left: var(--margen); right: var(--margen); bottom: calc(100% - 26px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; pointer-events: none;
}
.figura {
  justify-self: center; width: auto; height: clamp(112px, 34vw, 148px);
  position: relative; z-index: 0;
  filter: brightness(.7) saturate(.8);                /* apagadas */
  transform-origin: 50% 100%;                          /* crece hacia arriba desde la base */
  transition: filter .25s var(--salida), transform .25s var(--salida);
}
.figura:not([src]) { visibility: hidden; }
/* Al abrir, cada una se ilumina y se agranda un 10 % unos 2 s (entrada y salida suaves de 0,5 s) y después le toca
   a la otra. La que está iluminada pasa por delante. El zoom es con transform para que vaya fluido en el celular. */
.hoja-contacto[open] .figuras:not(.eligiendo) .figura { animation: invitar 3s ease-in-out .35s both; }
.hoja-contacto[open] .figuras:not(.eligiendo) .figura + .figura { animation-delay: 2.85s; }
@keyframes invitar {
  0%, 100% { filter: brightness(.7) saturate(.8); transform: none; z-index: 0; }
  16.67%, 83.33% { filter: brightness(1) saturate(1); transform: scale(1.1); z-index: 1; }
}
/* Elegido: brillo normal, agrandada y con resplandor lila alrededor de la silueta; el otro queda apagado. */
.figuras.eligiendo .figura { animation: none; filter: brightness(.7) saturate(.8); }
.figuras.eligiendo .figura.elegido {
  z-index: 2; transform: scale(1.1);
  filter: brightness(1) saturate(1) drop-shadow(0 0 3px #E5AFFB) drop-shadow(0 0 12px rgba(229, 175, 251, .75));
}
@media (prefers-reduced-motion: reduce) {
  .hoja-contacto .figuras .figura { animation: none !important; transition: none; filter: none; transform: none; }
}

/* Tablet y compu */
@media (min-width: 600px) {
  :root { --margen: 24px; --hueco: 16px; }
  .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .barra { padding-bottom: 12px; }
  .titulo { font-size: 30px; }
}
@media (min-width: 900px) {
  .encabezado, .barra { padding-left: max(var(--margen), calc((100vw - 1240px) / 2 + var(--margen)));
                        padding-right: max(var(--margen), calc((100vw - 1240px) / 2 + var(--margen))); }
  .barra { display: flex; gap: 12px; align-items: center; padding-top: 0; }
  .buscador, .barra-fila { flex: 1; }
  .consolas { margin-top: 0; width: 400px; }
  .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
  .marca img { height: 64px; }
  .hoja { margin: auto; border-radius: 20px; }
  .hoja-contacto .hoja-cuerpo { border-radius: 20px; }
}
@media (min-width: 1200px) {
  .grilla { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Si el catálogo todavía no trae populares, quedan tres botones parejos */
.consolas.sin-populares { grid-template-columns: repeat(3, 1fr); }

/* ---------- Ofertas ---------- */
/* Con el botón de ofertas, la fila no crece: se desliza de costado si no entra (360 px) */
.consolas.con-ofertas {
  display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.consolas.con-ofertas::-webkit-scrollbar { display: none; }
.consolas.con-ofertas button { flex: 1 0 auto; padding: 0 14px; scroll-snap-align: start; }
/* Siempre amarillo con texto oscuro; elegido, con un borde oscuro por dentro */
.consolas .boton-ofertas,
.consolas .boton-ofertas[aria-pressed="true"] { background: var(--oferta); color: var(--oferta-texto); font-weight: 800; }
.consolas .boton-ofertas[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--oferta-texto); }
@media (min-width: 900px) { .consolas.con-ofertas { width: auto; } }

.etiqueta.oferta { background: var(--oferta); color: var(--oferta-texto); font-weight: 800; }
.precio .anterior {
  display: block; font-size: 14px; font-weight: 600; opacity: .75;
  text-decoration-thickness: 2px; font-variant-numeric: tabular-nums;
}
.precio .vence { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; }
.aviso-ofertas {
  margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radio);
  border-left: 4px solid var(--oferta); background: var(--superficie);
  font-size: 14px; color: var(--texto);
}
.aviso-ofertas b { color: var(--oferta); }


/* ---------- Destacado (portada): la tapa grande y una tarjeta por edición ---------- */
.destacado {
  background: var(--superficie);
  padding: 20px var(--margen) 22px;
}
.destacado.cargando { min-height: 400px; }
.destacado-cabeza { display: grid; grid-template-columns: 50% 1fr; gap: 14px; align-items: end; }
.destacado-tapa {
  width: 100%; height: auto; aspect-ratio: 480 / 605; object-fit: contain;
  border-radius: 10px; background: var(--violeta-oscuro);
}
.destacado-texto { min-width: 0; padding-bottom: 2px; }
.estado {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  background: var(--lila); color: var(--violeta-oscuro);
  font: 800 15px/1.2 var(--cartel); letter-spacing: .04em; text-transform: uppercase;
}
.destacado h2 {
  margin: 8px 0 0; color: var(--texto);
  font: 800 52px/.9 var(--cartel); letter-spacing: -.01em; text-transform: uppercase;
}
.destacado .fecha { margin: 8px 0 0; font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--lila); }
.destacado .bajada { margin: 6px 0 0; font-size: 14px; line-height: 1.35; color: var(--texto-suave); }
@media (max-width: 374px) { .destacado .bajada { display: none; } }
.destacado .consola-destacado { margin-top: 8px; }
.ediciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.ediciones.una { grid-template-columns: 1fr; }
.edicion { display: flex; flex-direction: column; min-width: 0; }
.edicion .precio { margin: 0; flex: 1; }
.edicion h3 { margin: 0 0 2px; font-size: 13px; font-weight: 700; line-height: 1.2; }
.edicion .precio .contado { font-size: 30px; }
.edicion .precio .cuotas { font-size: 16px; }
.edicion .precio .contado + .rotulo { margin-top: 4px; }
.edicion .boton-pedir { margin-top: 8px; min-height: 48px; font-size: 16px; }

/* ---------- Ficha del juego: hoja que sube desde abajo ---------- */
.ficha { max-height: 92svh; overflow: hidden; display: none; flex-direction: column; touch-action: pan-y; }
.ficha[open] { display: flex; }
.ficha.arrastrando { transition: none; }
.ficha-agarre { flex: 0 0 auto; width: 40px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: var(--texto-suave); opacity: .6; }
.ficha-cerrar {
  position: absolute; top: 6px; right: 8px; z-index: 1;
  width: var(--toque); height: var(--toque); display: grid; place-items: center;
  border: 0; border-radius: 999px; background: var(--violeta-oscuro);
}
.ficha-cerrar svg { width: 20px; height: 20px; fill: var(--lila); }
.ficha-cuerpo {
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 10px var(--margen) calc(18px + env(safe-area-inset-bottom));
}
.ficha-cabeza { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; padding-right: 44px; }
.ficha-tapa { width: 96px; height: auto; aspect-ratio: 480 / 605; object-fit: contain; border-radius: 8px; background: var(--violeta-oscuro); }
.ficha-cabeza .etiquetas { margin: 2px 0 6px; }
.ficha h2 { margin: 0; font: 700 19px/1.25 var(--texto-ui); text-transform: none; color: var(--texto); }
.ficha-consolas { margin: 6px 0 0; color: var(--lila); font-size: 14px; line-height: 1.35; }
/* Fotos del juego: tira que se pasa con el dedo; asoma un poco la siguiente para que se note que hay más */
/* Tira de fotos: la carátula primero y después las fotos, todas del mismo alto. Puntos abajo. */
.ficha-cabeza.con-fotos { grid-template-columns: 1fr; }
.ficha-cabeza.con-fotos .ficha-tapa { display: none; }
.ficha-fotos { position: relative; margin: 16px calc(-1 * var(--margen)) 0; --alto-foto: clamp(150px, 48vw, 250px); }
.fotos-tira {
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 0 var(--margen); scroll-padding: 0 var(--margen); scrollbar-width: none; touch-action: pan-x pan-y;
}
.fotos-tira::-webkit-scrollbar { display: none; }
.fotos-tira:focus-visible { outline: 2px solid var(--lila); outline-offset: 2px; }
.fotos-tira img {
  flex: 0 0 auto; height: var(--alto-foto); width: auto; aspect-ratio: 16 / 9; object-fit: cover;
  scroll-snap-align: start; border-radius: 10px; background: var(--violeta-oscuro); cursor: zoom-in;
}
.fotos-tira img.foto-tapa { aspect-ratio: 480 / 605; object-fit: contain; }
.fotos-puntos { display: flex; justify-content: center; gap: 6px; margin-top: 10px; min-height: 7px; }
.fotos-puntos span {
  width: 7px; height: 7px; border-radius: 999px; background: var(--violeta);
  transition: width .2s var(--salida), background-color .2s;
}
.fotos-puntos span.activo { width: 18px; background: var(--lila); }
.fotos-flecha {
  display: none; position: absolute; top: calc(var(--alto-foto) / 2); transform: translateY(-50%);
  width: var(--toque); height: var(--toque); place-items: center; border: 0; border-radius: 999px;
  background: rgba(42, 14, 54, .85); cursor: pointer;
}
.fotos-flecha svg { width: 22px; height: 22px; fill: var(--lila); }
.fotos-flecha.anterior { left: calc(var(--margen) + 6px); }
.fotos-flecha.anterior svg { transform: rotate(180deg); }
.fotos-flecha.siguiente { right: calc(var(--margen) + 6px); }
.fotos-flecha:disabled { opacity: 0; pointer-events: none; }
/* Con mouse no se puede deslizar: flechas */
@media (hover: hover) and (pointer: fine) { .fotos-flecha { display: grid; } }

/* Visor de fotos a pantalla completa */
.visor {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: var(--fondo); color: var(--texto); overflow: hidden;
}
.visor::backdrop { background: rgba(0, 0, 0, .6); }
.visor-tira {
  display: flex; height: 100%; overflow-x: auto; overscroll-behavior: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.visor-tira::-webkit-scrollbar { display: none; }
.visor-foto { flex: 0 0 100%; height: 100%; display: grid; place-items: center; padding: 64px 12px 56px; scroll-snap-align: center; }
.visor-foto img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.visor .fotos-puntos { position: absolute; left: 0; right: 0; bottom: max(20px, env(safe-area-inset-bottom)); margin: 0; }
.visor-cerrar {
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 48px; height: 48px;
  display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--superficie); cursor: pointer;
}
.visor-cerrar svg { width: 24px; height: 24px; fill: var(--lila); }
.visor-cerrar:focus-visible { outline: 2px solid var(--lila); outline-offset: 2px; }
.ficha-sinopsis { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--texto); }
.ficha-incluye { margin-top: 14px; }
.ficha h3 { margin: 0 0 6px; font: 700 14px/1.3 var(--texto-ui); text-transform: none; color: var(--lila); }
.ficha-incluye ul { margin: 0; padding-left: 18px; color: var(--texto); font-size: 14px; line-height: 1.45; }
.ficha-incluye li + li { margin-top: 3px; }
.ficha-datos {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 16px 0 0;
  padding: 12px; border-radius: 10px; background: var(--violeta-oscuro); font-size: 14px;
}
.ficha-datos dt { color: var(--texto-suave); }
.ficha-datos dd { margin: 0; color: var(--texto); font-weight: 600; }
.ficha .precio { margin-top: 16px; }
.ficha .boton-pedir { min-height: 48px; font-size: 16px; }

@media (min-width: 600px) {
  .destacado-cabeza { grid-template-columns: 220px 1fr; }
  .destacado .ediciones { max-width: 560px; }
}
@media (min-width: 900px) {
  .destacado { padding-left: max(var(--margen), calc((100vw - 1240px) / 2 + var(--margen)));
               padding-right: max(var(--margen), calc((100vw - 1240px) / 2 + var(--margen))); }
  .destacado { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: end; }
  .destacado-cabeza { grid-template-columns: 240px 1fr; }
  .destacado .ediciones { margin-top: 0; width: 520px; justify-self: end; }
}
.titulo-juego { margin: 0; font: inherit; }
.precio .edicion-nombre { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 800; line-height: 1.2; }

.ficha-nota {
  margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--lila); border-radius: 0 8px 8px 0;
  background: var(--violeta-oscuro); color: var(--texto); font-size: 14px; line-height: 1.4;
}

/* ---------- PS Plus ---------- */
/* Con el botón PS Plus (o el de PS3) la fila de filtros tampoco crece: se desliza de costado si no entra */
.consolas.con-psplus, .consolas.con-ps3 {
  display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.consolas.con-psplus::-webkit-scrollbar, .consolas.con-ps3::-webkit-scrollbar { display: none; }
.consolas.con-psplus button, .consolas.con-ps3 button { flex: 1 0 auto; padding: 0 12px; scroll-snap-align: start; }
@media (min-width: 900px) { .consolas.con-psplus, .consolas.con-ps3 { width: auto; } }

/* La sección reemplaza a la lista mientras está elegida (buscando, vuelve la lista) */
main:not(.en-psplus) > .psplus,
main.en-psplus > :not(.psplus) { display: none !important; }

.psplus .aclaracion { margin-bottom: 14px; }
/* Selectores de consola y duración, uno al lado del otro: el mismo control que la fila de filtros */
.psplus-selectores { display: flex; gap: 8px; }
.psplus-consola, .psplus-duracion {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--superficie); border-radius: var(--radio); padding: 2px;
}
.psplus-consola { flex: 0 0 auto; }
.psplus-duracion { flex: 1 1 auto; }
.psplus-consola button, .psplus-duracion button {
  min-height: 48px; padding: 0 8px; border: 0; border-radius: 10px; white-space: nowrap;
  background: transparent; color: var(--texto); font-weight: 700; font-size: 15px;
  transition: background-color .18s var(--salida), color .18s var(--salida);
}
.psplus-consola button { padding: 0 10px; font: 800 17px/1 var(--cartel); letter-spacing: .03em; }
.psplus-consola button[aria-pressed="true"],
.psplus-duracion button[aria-pressed="true"] { background: var(--lila); color: var(--violeta-oscuro); }

/* Un plan por tarjeta, cada uno con un color de la paleta: Essential lila, Extra violeta, Deluxe violeta oscuro */
.psplus-planes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.plan {
  --plan-fondo: var(--lila); --plan-texto: var(--violeta-oscuro);
  --plan-boton: var(--violeta-oscuro); --plan-boton-texto: var(--blanco);
  display: flex; flex-direction: column; padding: 16px; border-radius: 16px;
  background: var(--plan-fondo); color: var(--plan-texto);
}
.plan-extra { --plan-fondo: var(--violeta); --plan-texto: var(--blanco); }
.plan-deluxe {
  --plan-fondo: var(--violeta-oscuro); --plan-texto: var(--blanco);
  --plan-boton: var(--lila); --plan-boton-texto: var(--violeta-oscuro);
  box-shadow: inset 0 0 0 2px var(--violeta);
}
.plan-nombre { margin: 0; font: 800 34px/.95 var(--cartel); text-transform: uppercase; letter-spacing: .01em; }
.plan-para { margin: 6px 0 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.plan-incluye { margin: 12px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.35; }
.plan-incluye li { position: relative; padding-left: 22px; }
.plan-incluye li + li { margin-top: 6px; }
.plan-incluye li::before {
  content: ""; position: absolute; left: 2px; top: .3em; width: 12px; height: 7px;
  border: solid currentColor; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg);
}
.plan-precio { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 35%, transparent); }
.plan-precio .rotulo { display: block; font-size: 13px; font-weight: 600; }
.plan-precio .contado { display: block; margin-top: 2px; font: 800 40px/.95 var(--cartel); font-variant-numeric: tabular-nums; }
.plan-precio .cuotas { display: block; margin-top: 4px; font: 600 17px/1.1 var(--cartel); }
.plan-precio .ahorro { display: block; margin-top: 6px; font-size: 14px; font-weight: 800; }
.plan .boton-pedir {
  min-height: 48px; margin-top: 12px; font-size: 16px;
  background: var(--plan-boton); color: var(--plan-boton-texto);
}
.plan .boton-pedir:hover, .plan .boton-pedir:active { background: var(--plan-boton); filter: brightness(1.12); }

@media (min-width: 760px) {
  .psplus-selectores { max-width: 560px; }
  .psplus-planes { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .plan-precio { margin-top: auto; }
  .plan-incluye { margin-bottom: 16px; }
}

/* ---------- Preguntas frecuentes (final de la portada) ---------- */
.preguntas { max-width: 1240px; margin: 0 auto; padding: 8px var(--margen) 32px; }
.preguntas-lista { margin-top: 14px; display: grid; gap: 8px; max-width: 760px; }
.pregunta { border-radius: var(--radio); background: var(--superficie); }
.pregunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 12px 14px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--texto);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-right: 4px;
  border: solid var(--lila); border-width: 0 2.5px 2.5px 0; transform: translateY(-3px) rotate(45deg);
  transition: transform .2s var(--salida);
}
.pregunta[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.pregunta summary:focus-visible { outline-offset: -3px; border-radius: var(--radio); }
.respuesta { padding: 0 14px 14px; color: var(--texto-suave); font-size: 15px; line-height: 1.5; }
.respuesta p { margin: 0; }
.respuesta > * + * { margin-top: 8px; }
.respuesta ul, .respuesta ol { margin-bottom: 0; padding-left: 22px; display: grid; gap: 6px; }
.respuesta li::marker { color: var(--lila); font-weight: 700; }
.respuesta ol li { padding-left: 2px; color: var(--texto); }

/* ---------- Menú ☰: al lado del buscador (la barra fija no crece), abre una lista desde abajo ---------- */
.barra-fila { display: flex; gap: 8px; align-items: stretch; }
.barra-fila .buscador { flex: 1 1 auto; min-width: 0; }
.boton-menu {
  flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center;
  border: 2px solid var(--violeta); border-radius: var(--radio);
  background: var(--superficie); cursor: pointer;
}
.boton-menu svg { width: 24px; height: 24px; fill: var(--lila); }
.boton-menu:active { background: var(--violeta-oscuro); }
.boton-menu:focus-visible { outline: 2px solid var(--lila); outline-offset: 2px; }
.menu-lista { display: grid; gap: 8px; margin-top: 16px; }
.menu-lista button {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px;
  min-height: 60px; padding: 10px 14px; text-align: left; cursor: pointer;
  border: 0; border-radius: var(--radio); background: var(--violeta); color: var(--blanco);
}
.menu-lista button:active { background: var(--violeta-oscuro); }
.menu-lista strong { font: 800 20px/1.05 var(--cartel); text-transform: uppercase; letter-spacing: .02em; }
.menu-lista span { grid-column: 1; font-size: 14px; color: var(--blanco); }
.menu-lista svg { grid-row: 1 / span 2; grid-column: 2; width: 22px; height: 22px; fill: var(--lila); }
/* Lo que se abre desde el menú no queda tapado por la barra fija */
#preguntas, .pie { scroll-margin-top: 128px; }

/* ---------- Pie: horarios, entrega, Consultar e Instagram ---------- */
.pie-datos { display: grid; gap: 10px; max-width: 360px; margin: 0 auto 16px; }
.pie-datos dt { font-size: 13px; font-weight: 700; color: var(--lila); }
.pie-datos dd { margin: 2px 0 0; font-size: 15px; color: var(--texto); }
.pie-consultar { margin: 0 auto 14px; }
@media (min-width: 600px) {
  .pie-datos { grid-template-columns: repeat(3, 1fr); max-width: 760px; gap: 16px; }
}

/* ---------- Banners de la portada (js/banner.js): imágenes tal cual, sin recortar ---------- */
/* Celular (menos de 900 px): 1080×900; compu: 1920×409. Nunca más del 45 % del alto de la pantalla (en un
   iPhone de 390×844 el buscador queda en la primera pantalla): si no entra, se achica entera (contain). */
.banner { background: var(--franja); }
.banner-pista {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.banner-pista::-webkit-scrollbar { display: none; }
.banner:not(.carrusel) .banner-pista { overflow: hidden; }
.banner-diapo, .banner-pista:empty::before {
  flex: 0 0 100%; width: 100%; aspect-ratio: 1080 / 900; max-height: 45vh;
}
.banner-pista:empty::before { content: ""; }   /* reserva el alto mientras carga banner.json */
.banner-diapo { scroll-snap-align: start; scroll-snap-stop: always; }
.banner-link { display: block; height: 100%; }
.banner-link picture, .banner-link img { display: block; width: 100%; height: 100%; }
.banner-link img { object-fit: contain; }
.banner-link:focus-visible { outline-offset: -3px; }
@media (min-width: 900px) {
  .banner-diapo, .banner-pista:empty::before { aspect-ratio: 1920 / 409; }
}
/* Puntitos: debajo de la imagen (nunca encima de un texto), 44 px de alto para tocarlos */
.banner-puntos { display: flex; justify-content: center; gap: 2px; }
.punto {
  display: grid; place-items: center; width: 44px; height: var(--toque);
  border: 0; padding: 0; background: none;
}
.punto span {
  display: block; width: 8px; height: 8px; border-radius: 999px; background: var(--texto-suave);
  transition: width .25s var(--salida), background-color .25s var(--salida);
}
.punto[aria-current="true"] span { width: 24px; background: var(--lila); }
.punto:focus-visible { outline-offset: -6px; border-radius: 999px; }

/* ---------- Pedido de varios juegos (js/pedido.js y js/tienda.js) ---------- */
/* "Agregar al pedido": debajo de "Pedir", con borde (el relleno queda para el botón principal). Agregado, lo dice
   con un tilde y deja quitarlo. */
.boton-agregar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 8px;
  width: 100%; min-height: var(--toque); margin-top: 8px; padding: 4px 6px;
  border: 2px solid var(--violeta); border-radius: 10px;
  background: transparent; color: var(--texto);
  font-weight: 700; font-size: 14px; line-height: 1.15; text-align: center;
  transition: background-color .15s var(--salida), border-color .15s var(--salida);
}
.boton-agregar .hecho { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.boton-agregar svg { flex: 0 0 auto; width: 16px; height: 16px; fill: currentColor; }
.boton-agregar .quitar { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.boton-agregar[aria-pressed="true"] { border-color: var(--lila); background: var(--violeta-oscuro); color: var(--lila); }
.boton-agregar:active { background: var(--violeta-oscuro); }
.ficha .boton-agregar, .edicion .boton-agregar { min-height: 48px; font-size: 15px; }
/* En los planes de PS Plus toma el color del texto de cada tarjeta */
.plan .boton-agregar { min-height: 48px; font-size: 15px; border-color: currentColor; color: var(--plan-texto); }
.plan .boton-agregar[aria-pressed="true"] { background: var(--plan-boton); border-color: var(--plan-boton); color: var(--plan-boton-texto); }
.plan .boton-agregar:active { background: transparent; filter: brightness(1.12); }

/* Hoja "¿Para qué consola?" (tarjeta PS4/PS5 de las ofertas): una opción por consola, con su precio */
.consola-opciones { display: grid; gap: 10px; margin-top: 16px; }
.consola-opciones .boton-agregar {
  justify-content: space-between; flex-wrap: nowrap; min-height: 56px; margin-top: 0; padding: 8px 14px;
  border: 0; background: var(--violeta); color: var(--blanco); font-size: 15px;
}
.consola-opciones .boton-agregar .opcion { display: grid; gap: 3px; margin-right: auto; text-align: left; }
.consola-opciones .boton-agregar .opcion strong { font: 800 22px/1 var(--cartel); letter-spacing: .02em; white-space: nowrap; }
.consola-opciones .boton-agregar .opcion small { font-size: 13px; font-weight: 600; }
.consola-opciones .boton-agregar[aria-pressed="true"] { background: var(--violeta-oscuro); color: var(--lila); box-shadow: inset 0 0 0 2px var(--lila); }

/* La barra: fija abajo, de lado a lado. La página deja libre su alto para que no tape el final (pie incluido).
   El menú ☰, la ficha y las demás hojas se abren por encima. */
.pedido-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
  padding: 8px var(--margen) calc(8px + env(safe-area-inset-bottom));
  background: var(--fondo); border-top: 1px solid var(--violeta-oscuro);
  box-shadow: 0 -10px 18px -12px rgba(0, 0, 0, .8);
}
.pedido-barra button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; max-width: 480px; min-height: 52px; margin: 0 auto; padding: 0 12px 0 16px;
  border: 0; border-radius: var(--radio);
  background: var(--lila); color: var(--violeta-oscuro);
  font-size: 16px; font-weight: 700;
  transition: transform .15s var(--salida);
}
.pedido-barra button:active { transform: scale(.98); }
.pedido-barra-texto { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; min-width: 0; }
.pedido-barra-texto strong { font-weight: 800; }
.pedido-barra-texto strong::after { content: " ·"; }
.pedido-barra-texto span { font: 800 24px/1 var(--cartel); font-variant-numeric: tabular-nums; }
.pedido-barra-ver { display: inline-flex; align-items: center; flex: 0 0 auto; font-weight: 700; }
.pedido-barra-ver svg { width: 20px; height: 20px; fill: currentColor; }
body.con-pedido { padding-bottom: calc(69px + env(safe-area-inset-bottom)); }

/* La lista: hoja desde abajo. Con muchos juegos se desliza por dentro. */
.pedido { max-height: 92svh; overflow: hidden; display: none; flex-direction: column; }
.pedido[open] { display: flex; }
.pedido .hoja-cuerpo { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 0; }
.pedido .hoja-cuerpo::after { content: ""; display: block; height: calc(14px + env(safe-area-inset-bottom)); }
.pedido h2:focus { outline: none; }
.pedido-aviso {
  margin: 12px 0 0; padding: 10px 12px; border-left: 4px solid var(--lila); border-radius: 0 8px 8px 0;
  background: var(--violeta-oscuro); color: var(--texto); font-size: 14px; line-height: 1.4;
}
.pedido-vacio { margin: 12px 0 0; font-size: 15px; color: var(--texto-suave); }
.pedido-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.pedido-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto var(--toque); align-items: center; gap: 0 8px;
  padding: 8px 2px 8px 12px; border-radius: var(--radio); background: var(--violeta-oscuro);
}
.pedido-item-texto strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--texto); }
.pedido-item-detalle {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 5px;
  font-size: 13px; color: var(--texto-suave);
}
.pedido-item .etiqueta.consola { background: var(--superficie); }
.pedido-item-precio { font: 800 22px/1 var(--cartel); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--texto); }
.pedido-quitar {
  width: var(--toque); height: var(--toque); display: grid; place-items: center;
  border: 0; border-radius: 999px; background: none;
}
.pedido-quitar svg { width: 18px; height: 18px; fill: var(--lila); }
.pedido-quitar:active { background: var(--superficie); }
/* El total y "Enviar pedido" se quedan pegados abajo mientras la lista se desliza */
.pedido-pie {
  position: sticky; bottom: 0; z-index: 1;
  margin: 10px calc(-1 * var(--margen)) 0; padding: 10px var(--margen) calc(8px + env(safe-area-inset-bottom));
  background: var(--superficie); box-shadow: 0 -10px 14px -12px rgba(0, 0, 0, .7);
}
.pedido-suma {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0; padding: 10px 12px; border-radius: 8px;
  background: var(--lila); color: var(--violeta-oscuro);
}
.pedido-suma span { font-size: 15px; font-weight: 700; }
.pedido-suma small { font-size: 13px; font-weight: 600; }
.pedido-suma strong { font: 800 32px/.95 var(--cartel); font-variant-numeric: tabular-nums; }
.pedido-nota { margin: 10px 0 0; font-size: 14px; color: var(--texto-suave); }
.pedido .boton-pedir { min-height: 52px; margin-top: 8px; font-size: 17px; }
.pedido .boton-secundario { margin-top: 6px; }
.pedido .boton-pedir:disabled { opacity: .75; }
.pedido-vaciar {
  display: block; min-height: var(--toque); margin: 6px auto 0; padding: 0 14px;
  border: 0; border-radius: 10px; background: none; color: var(--lila);
  font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}