/* Base común «Capa a capa» para las maquetas de las tres tiendas.
   Cada tienda redefine las variables de color en su propia página (:root). */

:root {
  --fondo: #F7F4EE;
  --tinta: #15171C;
  --tinta-suave: #5B5D63;
  --acento: #F2A93B;
  --acento-tinta: #3A2500;
  --gris-foto: #ECE6DA;
  --linea: rgba(21, 23, 28, .12);
  --noche: #0B0C10;
  --blanco: #FFFFFF;
  --fuente: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --radio: 14px;
  --pildora: 999px;
  --ancho: 1320px;
  --curva: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

/* ---------- Tipografía: letra gruesa + cursiva serif (Jumpers) ---------- */
.titular-xl, .titular-l, .titular-m {
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .98;
  margin: 0;
}
.titular-xl { font-size: clamp(44px, 7.4vw, 112px); }
.titular-l  { font-size: clamp(34px, 4.6vw, 68px); }
.titular-m  { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.05; }
.titular-xl em, .titular-l em, .titular-m em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
}
.antetitulo {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ---------- Barra de aviso y cabecera fija ---------- */
.barra-aviso {
  background: var(--tinta);
  color: var(--fondo);
  font-size: 13px;
  text-align: center;
  padding: 8px 16px;
}
.barra-aviso b { color: var(--acento); font-weight: 600; }
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, padding .3s;
}
.cabecera.compacta { border-bottom-color: var(--linea); }
.cabecera .envoltura {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 78px;
  transition: height .3s var(--curva);
}
.cabecera.compacta .envoltura { height: 62px; }
.logo img { height: 52px; width: auto; mix-blend-mode: multiply; transition: height .3s var(--curva); }
.cabecera.compacta .logo img { height: 40px; }
.menu { display: flex; gap: 22px; font-weight: 600; font-size: 15px; }
.menu a { position: relative; padding: 4px 0; }
.menu a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--acento); transition: right .35s var(--curva);
}
.menu a:hover::after, .menu a[aria-current="page"]::after { right: 0; }
.buscador {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--pildora);
  padding: 0 16px;
  height: 42px;
  min-width: 240px;
  color: var(--tinta-suave);
  font-size: 14px;
}
.buscador input { border: 0; outline: 0; background: none; font: inherit; color: var(--tinta); width: 100%; }
.buscador svg { width: 18px; height: 18px; flex: none; }
.iconos { display: flex; gap: 6px; }
.icono {
  position: relative;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 0; background: none;
  transition: background .2s;
}
.icono:hover { background: var(--gris-foto); }
.icono svg { width: 22px; height: 22px; }
.contador {
  position: absolute; top: 2px; right: 0;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--pildora);
  background: var(--acento); color: var(--acento-tinta);
  font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
}
.contador.salta { animation: salto .5s var(--curva); }
@keyframes salto { 30% { transform: scale(1.5); } 60% { transform: scale(.9); } }

/* ---------- Botones píldora ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 30px;
  border-radius: var(--pildora);
  border: 0;
  background: var(--tinta); color: var(--acento);
  font-weight: 700; font-size: 17px;
  transition: transform .25s var(--curva), background .25s;
}
.boton:hover { transform: translateY(-2px) rotate(-1deg); }
.boton:active { transform: scale(.97); }
.boton-claro { background: var(--blanco); color: var(--tinta); border: 1px solid var(--linea); }
.boton-acento { background: var(--acento); color: var(--acento-tinta); }
.boton svg { width: 18px; height: 18px; }

/* ---------- Cinta en movimiento ---------- */
.cinta {
  overflow: hidden;
  background: var(--acento);
  color: var(--acento-tinta);
  border-block: 2px solid var(--tinta);
  padding: 14px 0;
  font-weight: 800;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: -.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cinta-pista { display: inline-flex; animation: cinta 32s linear infinite; }
.cinta:hover .cinta-pista { animation-play-state: paused; }
.cinta-pista span { padding: 0 22px; }
.cinta-pista span::after { content: "✦"; margin-left: 44px; font-size: .7em; vertical-align: middle; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- Pegatina de borde ondulado (la forma la dibuja base.js) ---------- */
.pegatina {
  position: relative;
  display: inline-grid; place-items: center;
  width: var(--tam, 92px); height: var(--tam, 92px);
  color: var(--acento-tinta);
  font-weight: 800; font-size: calc(var(--tam, 92px) * .15);
  line-height: 1; text-align: center; text-transform: uppercase;
  transform: rotate(var(--giro, -12deg));
}
.pegatina > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.pegatina > svg path { fill: var(--acento); stroke: var(--tinta); stroke-width: 1.5; }

/* ---------- Precio en pegatina (Decathlon) ---------- */
.precio {
  display: inline-block;
  background: var(--acento);
  color: var(--acento-tinta);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.02em;
  padding: 2px 8px;
  border-radius: 4px;
  transform: rotate(-1.5deg);
}
.precio-grande { font-size: 30px; padding: 4px 12px; border-radius: 6px; }

/* ---------- Etiquetas y chips ---------- */
.etiqueta {
  display: inline-block;
  background: var(--tinta); color: var(--fondo);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 10px; border-radius: var(--pildora);
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border-radius: var(--pildora);
  border: 1px solid var(--tinta);
  background: transparent;
  font-weight: 600; font-size: 14px;
  transition: background .2s, color .2s;
}
.chip[aria-pressed="true"], .chip:hover { background: var(--tinta); color: var(--fondo); }
.chip .num { opacity: .6; font-weight: 500; }

/* ---------- Efecto «capa a capa»: la foto aparece por franjas de abajo arriba ---------- */
.capa { position: relative; }
.capa > .capa-contenido { clip-path: inset(100% 0 0 0); }
.capa::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--acento);
  box-shadow: 0 0 12px var(--acento);
  opacity: 0; pointer-events: none;
}
.capa.visible > .capa-contenido { animation: imprimir 1.1s steps(14, end) forwards; animation-delay: var(--retraso, 0s); }
.capa.visible::after { animation: boquilla 1.1s steps(14, end) forwards; animation-delay: var(--retraso, 0s); }
@keyframes imprimir { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes boquilla {
  0% { opacity: 1; bottom: 0; }
  92% { opacity: 1; bottom: calc(100% - 3px); }
  100% { opacity: 0; bottom: calc(100% - 3px); }
}

/* ---------- Alternativa «luz tintineante» (<body data-revelado="parpadeo">):
   la foto se enciende como una bombilla, con parpadeos irregulares y un halo cálido ---------- */
[data-revelado="parpadeo"] .capa > .capa-contenido { clip-path: none; opacity: 0; filter: brightness(.2); }
[data-revelado="parpadeo"] .capa::after { display: none; }
[data-revelado="parpadeo"] .capa.visible { animation: halo var(--dur, .95s) linear var(--retraso, 0s) both; }
[data-revelado="parpadeo"] .capa.visible > .capa-contenido { animation: parpadeo var(--dur, .95s) linear var(--retraso, 0s) forwards; }
@keyframes parpadeo {
  0%       { opacity: 0;   filter: brightness(.2); }
  7%       { opacity: .85; filter: brightness(1.3); }
  13%      { opacity: .12; filter: brightness(.3); }
  24%      { opacity: .9;  filter: brightness(1.2); }
  31%      { opacity: .35; filter: brightness(.5); }
  45%      { opacity: 1;   filter: brightness(1.25); }
  53%      { opacity: .7;  filter: brightness(.8); }
  70%, 100% { opacity: 1;  filter: brightness(1); }
}
@keyframes halo {
  0%, 13%, 31%, 53% { box-shadow: 0 0 0 0 transparent; }
  7%, 24%  { box-shadow: 0 0 28px 2px var(--resplandor, rgba(255, 236, 200, .55)); }
  45%      { box-shadow: 0 0 40px 4px var(--resplandor, rgba(255, 236, 200, .55)); }
  100%     { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- Alternativa «bote y tambaleo» (<body data-revelado="bote">):
   la foto cae, bota y se tambalea como una pokéball antes de quedarse quieta ---------- */
[data-revelado="bote"] .capa > .capa-contenido { clip-path: none; opacity: 0; }
[data-revelado="bote"] .capa::after { display: none; }
[data-revelado="bote"] .capa.visible > .capa-contenido {
  transform-origin: 50% 80%;
  animation: bote var(--dur, .95s) var(--retraso, 0s) both;
}
@keyframes bote {
  0%   { opacity: 0; transform: translateY(-70px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  36%  { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  50%  { transform: translateY(-16px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  62%  { transform: translateY(0) rotate(-9deg); }
  74%  { transform: rotate(7deg); }
  86%  { transform: rotate(-4deg); }
  100% { opacity: 1; transform: none; }
}

/* ---------- Tarjeta de producto (disposición Decathlon) ---------- */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 36px 20px;
}
.tarjeta { position: relative; display: flex; flex-direction: column; gap: 6px; }
.tarjeta-foto {
  position: relative;
  aspect-ratio: 1;
  background: var(--gris-foto);
  border-radius: var(--radio);
  overflow: hidden;
}
/* --zoom: cada tienda puede acercar fotos con mucho blanco alrededor (p. ej. las pokéballs). */
.tarjeta-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: scale(var(--zoom, 1)); transition: transform .6s var(--curva); }
.tarjeta-foto.sombra img { object-fit: cover; transform: scale(1.62); mix-blend-mode: normal; }
.tarjeta:hover .tarjeta-foto img { transform: scale(calc(var(--zoom, 1) * 1.05)); }
.tarjeta:hover .tarjeta-foto.sombra img { transform: scale(1.7); }
.etiquetas-foto { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.etiqueta.descuento { background: var(--rojo, #ff4c4c); color: #fff; }
.etiqueta.agotado { background: var(--tinta-suave); color: #fff; }
.precios { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.tarjeta .precios { margin-top: 4px; }
.precio-anterior { color: var(--tinta-suave); text-decoration: line-through; font-size: 14px; }
.estrellas { font-size: 13px; color: var(--tinta); letter-spacing: .04em; }
.estrellas b { font-weight: 700; letter-spacing: 0; }
.favorito {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: var(--blanco);
  display: grid; place-items: center;
}
.favorito svg { width: 18px; height: 18px; }
.favorito[aria-pressed="true"] svg { fill: var(--tinta); }
.tarjeta-tipo { margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.tarjeta-nombre {
  margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta-nombre a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.tarjeta .precio { align-self: flex-start; margin-top: 4px; }
.promesa { font-size: 13px; color: var(--tinta-suave); display: flex; align-items: center; gap: 6px; }
.promesa svg { width: 15px; height: 15px; flex: none; }

/* ---------- Desplegables ---------- */
.desplegable { border-top: 1px solid var(--linea); }
.desplegable:last-of-type { border-bottom: 1px solid var(--linea); }
.desplegable summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 0; font-weight: 700; font-size: 16px;
}
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary::after { content: "+"; font-size: 24px; font-weight: 400; transition: transform .3s var(--curva); }
.desplegable[open] summary::after { transform: rotate(45deg); }
.desplegable .desplegable-cuerpo { padding: 0 0 20px; color: var(--tinta-suave); font-size: 15px; }

/* ---------- Pie ---------- */
.pie { background: var(--tinta); color: var(--fondo); padding: 72px 0 32px; margin-top: 120px; }
.pie a { opacity: .75; } .pie a:hover { opacity: 1; color: var(--acento); }
.pie-rejilla { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.pie h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); margin: 0 0 14px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie-legal { margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15); font-size: 13px; opacity: .6; }

/* ---------- Móvil ---------- */
@media (max-width: 900px) {
  /* Filas deslizables (chips, galería, relacionados) sin barra de desplazamiento visible. */
  .grupo-chips, .galeria, .fila { scrollbar-width: none; }
  .grupo-chips::-webkit-scrollbar, .galeria::-webkit-scrollbar, .fila::-webkit-scrollbar { display: none; }
  .menu, .buscador { display: none; }
  .cabecera .envoltura { height: 64px; gap: 12px; }
  .logo img { height: 40px; }
  .iconos { margin-left: auto; }
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .pie-rejilla { grid-template-columns: 1fr; }
  .envoltura { padding: 0 16px; }
}

/* ---------- Movimiento reducido: todo quieto y visible ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .capa > .capa-contenido { clip-path: none; }
  .capa::after { display: none; }
  [data-revelado="parpadeo"] .capa > .capa-contenido { opacity: 1; filter: none; }
  [data-revelado="bote"] .capa > .capa-contenido { opacity: 1; transform: none; }
  .cinta-pista { animation: none; }
}

/* Identidad de Pokebolas para las maquetas (se carga después de comun/base.css).
   Colores: los reales de pokebolas.es (tema «classic») con el rojo de la pokéball de su logo como color de marca.
   Sobre el rojo el texto va en blanco (en negro no llega al contraste mínimo).
   Letra: Source Sans 3, la alternativa libre más cercana a Amazon Ember (la de Amazon, que no se puede usar).
   Fotos: «bote y tambaleo». Detalles extra de la tienda en detalles.css / detalles.js. */

:root {
  --fondo: #f6f6f6;
  --blanco: #ffffff;
  --tinta: #232323;
  --tinta-suave: #7a7a7a;
  --acento: #D93A32;
  --acento-tinta: #ffffff;
  --gris-foto: #ffffff;
  --linea: rgba(35, 35, 35, .12);
  --noche: #232323;
  --rojo: #D93A32;
  --fuente: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Source Sans 3', system-ui, sans-serif;
}

/* Source Sans 3 no tiene versión ancha: los titulares ganan peso (900) en lugar de anchura. */
.titular-xl, .titular-l, .titular-m { font-weight: 900; letter-spacing: -.025em; }
.titular-xl em, .titular-l em, .titular-m em {
  font-family: var(--fuente);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.015em;
}
.precio, .boton { font-weight: 800; }

.cabecera { background: color-mix(in srgb, var(--blanco) 92%, transparent); }

/* Botones en rojo con texto blanco (el rojo sobre negro no se lee bien en texto pequeño). */
.boton { background: var(--acento); color: #fff; }
.boton-claro { background: var(--blanco); color: var(--tinta); }
.barra-aviso b { color: #fff; text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 3px; }

/* Las pokéballs ocupan poco en sus fotos: se acercan en las fichas del listado. */
.tarjeta-foto { --zoom: 1.5; }
/* Los combos traen varias bolas en la foto: esas no se acercan. */
.tarjeta[data-categoria="13"] .tarjeta-foto { --zoom: 1.05; }

/* ===== Estilos de la maqueta de Pokebolas: index.html ===== */
  /* ---- 1. Portada: la estantería de bolas ---- */
  .portada { min-height: calc(100svh - 112px); display: flex; align-items: center; padding: 40px 0 56px; }
  .portada-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; width: 100%; }
  .portada-texto { display: grid; gap: 22px; }
  .portada-texto .antetitulo { color: var(--acento); }
  .portada-texto h1 { font-size: clamp(38px, 4.8vw, 76px); }
  .portada-texto p { margin: 0; font-size: 18px; color: var(--tinta-suave); max-width: 480px; }
  .portada-acciones { display: flex; gap: 12px; flex-wrap: wrap; }
  .estanteria { position: relative; padding: 120px 0 0; }
  .estanteria .pegatina { position: absolute; top: 0; right: 2%; --tam: 132px; --giro: 12deg; z-index: 2; font-size: 15px; }
  .bolas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; }
  .bola { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
  .bola-foto {
    width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--blanco);
    border: 2px solid var(--tinta); transform-origin: 50% 90%;
    transition: transform .3s var(--curva);
  }
  .bola-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.7); }
  .bola:hover .bola-foto { transform: rotate(-6deg) scale(1.03); }
  .bola-foto.tiembla { animation: tiembla .9s ease-in-out; }
  @keyframes tiembla { 15% { transform: rotate(-12deg); } 30% { transform: rotate(9deg); } 45% { transform: rotate(-6deg); } 60%, 100% { transform: none; } }
  .bola strong { font-size: 15px; line-height: 1.2; }
  .bola a::before { content: ""; position: absolute; inset: 0; }
  .balda { height: 10px; border-radius: 99px; background: var(--tinta); margin-top: 14px; }

  /* ---- 2. Destacados con «Añadir» (el lanzamiento) ---- */
  .seccion { padding: 110px 0 0; }
  .seccion-cabeza { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
  .seccion-cabeza p { max-width: 460px; margin: 0; color: var(--tinta-suave); font-size: 17px; }
  .con-boton { display: flex; flex-direction: column; gap: 12px; }
  .con-boton .tarjeta { flex: 1; }
  .con-boton .boton { height: 46px; font-size: 15px; }

  /* ---- 3. Categorías ---- */
  .categorias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .categoria { position: relative; display: grid; gap: 12px; }
  .categoria-foto { aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: var(--blanco); }
  .categoria-foto img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.25); transition: transform .6s var(--curva); }
  .categoria:hover .categoria-foto img { transform: scale(1.33); }
  .categoria h3 { margin: 0; font-size: 22px; font-stretch: 112%; letter-spacing: -.02em; }
  .categoria span { color: var(--tinta-suave); font-size: 14px; }
  .categoria a::before { content: ""; position: absolute; inset: 0; }

  /* ---- 4. Cuidados (texto real de la portada) ---- */
  .cuidados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .cuidado { border: 1.5px solid var(--tinta); border-radius: 22px; padding: 30px; background: var(--blanco); }
  .cuidado h3 { margin: 0 0 8px; font-size: 22px; font-stretch: 112%; }
  .cuidado p { margin: 0; color: var(--tinta-suave); }
  .cuidados-pie { margin-top: 22px; color: var(--tinta-suave); max-width: 760px; }

  @media (max-width: 900px) {
    .portada { min-height: auto; padding: 28px 0 40px; }
    .portada-rejilla { grid-template-columns: 1fr; gap: 20px; }
    .portada-texto h1 { font-size: clamp(32px, 9vw, 44px); }
    .estanteria { padding-top: 96px; }
    .estanteria .pegatina { --tam: 100px; font-size: 13px; }
    .bolas { gap: 10px; }
    .bola strong { font-size: 12px; }
    .categorias { grid-template-columns: 1fr 1fr; gap: 14px; }
    .categorias .categoria:last-child { grid-column: 1 / -1; }
    .cuidados { grid-template-columns: 1fr; }
  }
/* ===== Estilos de la maqueta de Pokebolas: listado.html ===== */

  /* ---- Listado: disposición Decathlon ---- */
  [hidden] { display: none !important; }
  .listado { padding-bottom: 110px; }
  .migas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 34px; font-size: 14px; color: var(--tinta-suave); }
  .migas a { text-decoration: underline; text-underline-offset: 3px; }
  .migas a:hover { color: var(--tinta); }
  .migas [aria-current="page"] { color: var(--tinta); font-weight: 600; }
  .listado-cabeza { margin-top: 18px; }
  .listado-cabeza p { max-width: 760px; margin: 16px 0 0; font-size: 17px; color: var(--tinta-suave); }

  .barra-herramientas {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px;
    margin: 30px 0 40px; padding: 16px 0;
    border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  }
  .grupo-chips { display: flex; gap: 10px; }
  .grupo-orden { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; margin-left: auto; min-width: 0; }
  #conteo { font-size: 14px; font-weight: 600; color: var(--tinta-suave); white-space: nowrap; }
  .selector {
    max-width: 100%; height: 40px; padding: 0 16px;
    border: 1px solid var(--tinta); border-radius: var(--pildora);
    background: var(--blanco); color: var(--tinta);
    font: inherit; font-size: 14px; font-weight: 600;
  }

  .cuerpo { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
  .cuerpo.sin-filtros { grid-template-columns: minmax(0, 1fr); }
  .filtros { position: sticky; top: 90px; align-self: start; }
  .casilla { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 15px; color: var(--tinta); cursor: pointer; }
  .casilla input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--tinta); cursor: pointer; }
  .casilla .num { color: var(--tinta-suave); }

  .switch {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; padding: 6px 0; border: 0; background: none;
    font: inherit; font-size: 15px; font-weight: 600; color: var(--tinta); text-align: left;
  }
  .switch-pildora {
    position: relative; flex: none;
    width: 48px; height: 28px; border-radius: var(--pildora);
    background: color-mix(in srgb, var(--tinta) 18%, var(--fondo));
    transition: background .25s;
  }
  .switch-pildora::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--blanco); box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .25s var(--curva);
  }
  .switch[aria-checked="true"] .switch-pildora { background: var(--tinta); }
  .switch[aria-checked="true"] .switch-pildora::after { transform: translateX(20px); }

  .filtros .boton-pequeno { margin-top: 24px; height: 42px; padding: 0 20px; font-size: 15px; }
  .resultados { min-width: 0; }
  .paginacion { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 56px; }
  .paginacion p { margin: 0; font-size: 14px; font-weight: 600; color: var(--tinta-suave); }
  .vacio { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 72px 0; }
  .vacio p { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

  @media (max-width: 900px) {
    .cuerpo, .cuerpo.sin-filtros { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .filtros { position: static; }
    .filtros:not([hidden]) { padding: 4px 18px 18px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
    .barra-herramientas { margin: 22px 0 28px; }
    .grupo-orden { order: 2; }
    .grupo-chips { order: 3; flex: 1 1 100%; min-width: 0; gap: 8px; overflow-x: auto; padding: 4px 0; }
    .grupo-chips .chip { flex: none; }
  }
/* ===== Estilos de la maqueta de Pokebolas: ficha.html ===== */

  [hidden] { display: none !important; }

  /* ---- Migas ---- */
  .migas { padding: 28px 0 24px; }
  .migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--tinta-suave); }
  .migas li { overflow-wrap: anywhere; }
  .migas li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
  .migas a:hover { color: var(--tinta); text-decoration: underline; }
  .migas [aria-current="page"] { color: var(--tinta); font-weight: 600; }

  /* ---- Ficha: galería y columna de compra ---- */
  .ficha { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
  .galeria-foto { position: relative; margin: 0; aspect-ratio: 1; background: var(--gris-foto); border-radius: 18px; overflow: hidden; }
  .galeria-foto.ancha { grid-column: 1 / -1; }
  .galeria-foto > .capa-contenido { height: 100%; background: var(--gris-foto); }
  /* Las pokéballs ocupan poco en su foto: se amplían dentro del recuadro. */
  .galeria-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.35); }

  .compra { position: sticky; top: 90px; align-self: start; display: grid; gap: 16px; min-width: 0; }
  .compra .tarjeta-tipo { margin-top: 0; }
  .compra h1 { margin: 0; font-size: 36px; font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
  #estrellas:empty { display: none; }
  #etiquetas { display: flex; flex-wrap: wrap; gap: 8px; }
  #etiquetas:empty { display: none; }
  .destacado { margin: 0; font-size: 19px; line-height: 1.45; font-weight: 500; }
  .destacado:empty { display: none; }
  #precio { justify-self: start; }
  .cantidad {
    justify-self: start; display: inline-flex; align-items: center;
    height: 48px; border: 1px solid var(--tinta); border-radius: var(--pildora); overflow: hidden;
  }
  .cantidad button { width: 48px; height: 100%; border: 0; background: none; font-size: 22px; font-weight: 600; color: var(--tinta); }
  .cantidad button:hover { background: var(--gris-foto); }
  .cantidad input {
    width: 56px; height: 100%; border: 0; background: none; text-align: center;
    font: inherit; font-size: 17px; font-weight: 700; color: var(--tinta);
    -moz-appearance: textfield; appearance: textfield;
  }
  .cantidad input::-webkit-outer-spin-button, .cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .compra .boton { width: 100%; }
  .boton:disabled, .boton:disabled:hover { background: var(--gris-foto); color: var(--tinta-suave); cursor: not-allowed; transform: none; }
  .compra .promesa { margin: 0; }
  .compra .desplegables { margin-top: 8px; }

  /* ---- También te puede gustar ---- */
  .relacionados { margin-top: 110px; }
  .relacionados .titular-m { margin-bottom: 32px; }
  .fila { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .relacionado { flex: 0 0 260px; width: 260px; scroll-snap-align: start; }

  /* ---- Barra de compra en móvil y aviso de la cesta ---- */
  .barra-movil { display: none; }
  .aviso-flotante {
    position: fixed; right: 24px; bottom: 24px; z-index: 70; max-width: 420px;
    background: var(--tinta); color: var(--fondo);
    border-radius: var(--radio); padding: 14px 18px;
    font-size: 15px; font-weight: 600;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .3s var(--curva), transform .3s var(--curva);
  }
  .aviso-flotante.visible { opacity: 1; transform: none; }

  /* ---- Móvil (≤ 900 px): todo en una columna ---- */
  @media (max-width: 900px) {
    .migas { padding: 16px 0 18px; }
    .ficha { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .compra { position: static; }
    .galeria { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; }
    .galeria-foto { flex: 0 0 88%; scroll-snap-align: start; }
    .relacionados { margin-top: 72px; }
    .barra-movil {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 12px 16px;
      background: var(--fondo); border-top: 1px solid var(--linea);
    }
    .barra-movil .precio { font-size: 22px; }
    .barra-movil .boton { height: 48px; padding: 0 26px; }
    .aviso-flotante { left: 16px; right: 16px; bottom: 88px; max-width: none; }
    .pie { padding-bottom: 110px; }
  }
/* ===== Estilos de la maqueta de Pokebolas: detalles.css ===== */
/* Detalles de Pokebolas (maquetas): piezas extra que se cargan después de tienda.css.
   El HTML que hace falta lo monta detalles.js; aquí están los estilos. */

/* ---------- B. Separadores con la línea de la pokéball ---------- */
.separador-bola {
  position: relative;
  height: 30px;
  max-width: var(--ancho);
  margin: 90px auto 0;
  padding: 0 24px;
}
.separador-bola::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  background: var(--tinta);
  transform: scaleX(0);
  transform-origin: 50% 50%;
}
.separador-bola span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: var(--blanco);
  border: 5px solid var(--tinta);
  transform: scale(0);
}
.separador-bola span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--tinta);
}
.separador-bola.visible::before {
  transform: scaleX(1);
  transition: transform .8s var(--curva);
}
.separador-bola.visible span {
  transform: scale(1);
  transition: transform .5s var(--curva) .5s;
}
@media (max-width: 900px) {
  .separador-bola { padding: 0 16px; }
  .separador-bola::before { left: 16px; right: 16px; }
}

/* ---------- C. Botón que se parte como una pokéball ---------- */
.boton[data-anadir]:not([disabled]) { position: relative; }
.boton[data-anadir]:not([disabled]):hover,
.boton[data-anadir]:not([disabled]):focus-visible {
  background: linear-gradient(to bottom, var(--acento) 0 calc(50% - 2px), var(--tinta) calc(50% - 2px) calc(50% + 2px), #fff calc(50% + 2px));
  border: 2px solid var(--tinta);
  color: var(--tinta);
  text-shadow: 0 0 4px #fff, 0 0 8px #fff;
  /* Hueco para la bola: sin esto tapa la primera letra del texto. */
  padding-left: 46px;
}
.boton[data-anadir]:not([disabled]):hover::after,
.boton[data-anadir]:not([disabled]):focus-visible::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--tinta);
  box-sizing: border-box;
}

/* ---------- D. Sello circular girando (solo portada) ---------- */
.sello {
  position: absolute;
  top: -8px;
  left: -36px;
  width: 124px;
  height: 124px;
  z-index: 2;
  pointer-events: none;
}
.sello-texto {
  display: block;
  width: 100%;
  height: 100%;
  animation: girar 18s linear infinite;
}
.sello-texto text {
  font-family: var(--fuente);
  font-size: 10.5px;
  font-weight: 800;
  fill: var(--tinta);
}
@keyframes girar { to { transform: rotate(360deg); } }
.sello-bola {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 2px solid var(--tinta);
  background: linear-gradient(to bottom, var(--acento) 0 50%, #fff 50% 100%);
  overflow: hidden;
}
.sello-bola::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  background: var(--tinta);
}
.sello-bola::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--tinta);
  box-sizing: border-box;
}

/* ---------- E. Patrón de fondo (solo portada) ----------
   El patrón va en un ::before detrás del contenido (z-index -1 dentro de isolation)
   y se desvanece hacia abajo con la máscara. */
.portada { position: relative; isolation: isolate; }
.portada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Ccircle cx='23' cy='23' r='7' fill='none' stroke='rgba(35,35,35,.07)' stroke-width='1.2'/%3E%3Cline x1='16' y1='23' x2='30' y2='23' stroke='rgba(35,35,35,.07)' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(#000 40%, transparent);
  mask-image: linear-gradient(#000 40%, transparent);
}

/* ---------- H. El listado como estantería (solo CSS) ----------
   La balda va detrás de la foto (z-index -1) y la foto no lleva z-index propio:
   así el enlace de la tarjeta y el corazón de favoritos siguen recibiendo los clics. */
.tarjeta { container-type: inline-size; }
.tarjeta::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: calc(100cqw - 4px);
  height: 10px;
  background: var(--tinta);
  border-radius: 99px;
  z-index: -1;
  pointer-events: none;
}

/* ---------- K. Hierba alta (solo portada) ---------- */
.hierba-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}
.hierba-texto p { margin: 18px 0 0; max-width: 420px; font-size: 18px; color: var(--tinta-suave); }
.zona-hierba {
  position: relative;
  height: 340px;
  overflow: hidden;
  background: var(--blanco);
  border: 2px solid var(--tinta);
  border-radius: 24px;
}
.hierba-briznas {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 130px;
  pointer-events: none;
}
.brizna {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: mecer 4s ease-in-out infinite;
}
.zona-hierba.agitada .brizna { animation: mecer-fuerte .3s ease-in-out infinite; }
@keyframes mecer {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
@keyframes mecer-fuerte {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
}
.encuentro {
  position: absolute;
  top: 22px;
  left: 50%;
  width: 280px;
  margin-left: -140px;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.encuentro-foto {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--tinta);
  background: var(--blanco);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.encuentro-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.6); }
.encuentro-nombre {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.encuentro-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.encuentro-botones .boton { height: 50px; padding: 0 22px; font-size: 16px; }
@media (max-width: 900px) {
  .hierba-rejilla { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ---------- M. La mochila ---------- */
.mochila-velo {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(35, 35, 35, .5);
  cursor: pointer; /* el iPhone solo trata como pulsable lo que lo parece (2026-11-05) */
}
.mochila-velo[hidden] { display: none; }
.mochila {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 96;
  width: 400px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px 24px 28px;
  overflow-y: auto;
  background: var(--fondo);
  color: var(--tinta);
  box-shadow: -18px 0 40px rgba(0, 0, 0, .18);
}
.mochila[hidden] { display: none; }
.mochila-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mochila-cabeza h2 { margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -.02em; }
.mochila-cabeza svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.mochila-cuerpo { display: flex; flex-direction: column; gap: 18px; }
.mochila-vacia { margin: 0; font-size: 18px; color: var(--tinta-suave); }
.mochila-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.mochila-acciones .boton { height: 50px; padding: 0 22px; font-size: 16px; }
.mochila-estantes { display: grid; gap: 14px; }
.mochila-fila {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}
.mochila-balda { height: 8px; border-radius: 99px; background: var(--tinta); }
.mochila-item {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  text-align: center;
}
.mochila-bola {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--tinta);
  background: var(--blanco);
}
.mochila-bola img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.6); }
.mochila-nombre {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mochila-cantidad, .mochila-precio { margin: 0; font-size: 13px; }
.mochila-precio { font-weight: 800; }
.mochila-total {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
  font-size: 18px;
}
.mochila-total b { font-size: 22px; font-weight: 900; }
.mochila-3x2 { margin: 0; font-size: 15px; font-weight: 600; }

/* ---------- Movimiento reducido: sin balanceo, giro ni separadores animados ---------- */
.quieto .separador-bola::before,
.quieto .separador-bola span { transition: none; }
.quieto .sello-texto,
.quieto .brizna { animation: none; }

/* Margen bajo la hierba para que la zona no toque la cinta. */
.seccion.hierba { padding-bottom: 100px; }
@media (max-width: 900px) { .seccion.hierba { padding-bottom: 72px; } }

/* Piezas de PrestaShop: reglas del tema base, revisadas para Pokebolas */
/* Cabecera: buscador de PrestaShop dentro de la pastilla de la maqueta */
.buscador #search_widget,
.buscador form { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; }
.buscador .search { display: grid; place-items: center; flex: none; }
.buscador .clear { display: none; }
.buscador input[type="text"] { border: 0; outline: 0; background: none; font: inherit; color: var(--tinta); width: 100%; min-width: 0; }

/* Cesta: el mismo círculo que la cuenta */
#_desktop_cart { display: block; }
.blockcart { position: relative; }

/* Menú de categorías: el enlace de la página actual va marcado */
.menu a[aria-current="page"] { font-weight: 700; }

/* Migas de PrestaShop con el aspecto de las migas de la maqueta */
.breadcrumb { padding: 28px 0 24px; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--tinta-suave); }
.breadcrumb li { overflow-wrap: anywhere; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--tinta); }
.breadcrumb li:last-child { color: var(--tinta); font-weight: 600; }

/* Chips de categoría del listado: el de la página actual va en negro */
.grupo-chips { margin: 22px 0 0; }
.grupo-chips .chip[aria-current="page"] { background: var(--tinta); color: var(--fondo); }

/* Barra superior del listado (total, orden y botón de filtros) */
#products { margin-top: 30px; }
#js-product-list-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 20px; margin: 0 0 28px; padding: 16px 0;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
#js-product-list-top > [class*="col-"] { flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
#js-product-list-top > .showing { flex: 0 0 100%; font-size: 14px; color: var(--tinta-suave); }
#js-product-list-top .total-products p { margin: 0; font-size: 14px; font-weight: 600; color: var(--tinta-suave); }
#js-product-list-top .sort-by-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; margin: 0; }
#js-product-list-top .sort-by { font-size: 14px; font-weight: 600; color: var(--tinta-suave); white-space: nowrap; }
#js-product-list-top .select-title {
  height: 40px; padding: 0 16px;
  border: 1px solid var(--tinta); border-radius: var(--pildora);
  background: var(--blanco); color: var(--tinta);
  font-size: 14px; font-weight: 600;
}
#search_filter_toggler {
  height: 40px; padding: 0 18px;
  border: 1px solid var(--tinta); border-radius: var(--pildora);
  background: var(--blanco); color: var(--tinta);
  font-size: 14px; font-weight: 600;
}

/* Filtros de ps_facetedsearch: títulos, casillas, deslizador de precio y filtros activos */
#search_filters_wrapper { font-size: 15px; color: var(--tinta); }
#search_filters_wrapper .facet { border-top: 1px solid var(--linea); margin: 0; padding: 0; }
#search_filters_wrapper .facet-title { margin: 0; padding: 18px 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--tinta); }
#search_filters_wrapper input[type="checkbox"] { accent-color: var(--tinta); }
#search_filters_wrapper .noUi-target {
  height: 6px; margin: 12px 10px 18px; border: 0; border-radius: var(--pildora);
  background: color-mix(in srgb, var(--tinta) 18%, var(--fondo)); box-shadow: none;
}
#search_filters_wrapper .noUi-connect { background: var(--tinta); }
#search_filters_wrapper .noUi-handle {
  width: 20px; height: 20px; top: -7px; right: -10px;
  border: 2px solid var(--tinta); border-radius: 50%;
  background: var(--blanco); box-shadow: none; cursor: pointer;
}
#search_filters_wrapper .noUi-handle::before, #search_filters_wrapper .noUi-handle::after { display: none; }
#search_filters_wrapper .js-search-filters-clear-all {
  height: 36px; padding: 0 14px;
  border: 1px solid var(--tinta); border-radius: var(--pildora);
  background: transparent; color: var(--tinta);
  font-size: 13px; font-weight: 600;
}
#js-active-search-filters.hide { display: none; }
#js-active-search-filters ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
#js-active-search-filters li > a, #js-active-search-filters li > button {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--tinta); border-radius: var(--pildora);
  background: transparent; color: var(--tinta);
  font-size: 13px; font-weight: 600;
}
#js-active-search-filters li > a:hover, #js-active-search-filters li > button:hover { background: var(--tinta); color: var(--fondo); }

/* Rejilla de productos del listado: el contenedor .products se ve como .rejilla */
#js-product-list .products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 36px 20px; margin: 0;
}
#js-product-list .products > .js-product { width: auto; max-width: none; flex: none; padding: 0; }

/* Paginación de classic con el estilo de la maqueta */
#js-product-list .pagination { margin: 56px 0 0; }
#js-product-list .pagination .row { margin: 0; }
#js-product-list .pagination [class*="col-"] { padding: 0; }
#js-product-list .page-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
#js-product-list .page-item { display: block; }
#js-product-list .page-link {
  display: inline-grid; place-items: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--linea); border-radius: var(--pildora);
  background: var(--blanco); color: var(--tinta);
  font-size: 15px; font-weight: 600;
}
#js-product-list .page-link:hover { border-color: var(--tinta); }
#js-product-list .page-item.current .page-link { background: var(--tinta); border-color: var(--tinta); color: var(--acento); }
#js-product-list .page-item.disabled .page-link { opacity: .35; pointer-events: none; }
#js-product-list .up .btn-secondary { border-radius: var(--pildora); }

/* Miniaturas: etiquetas de PrestaShop con los colores de la maqueta */
.etiqueta.discount, .etiqueta.on-sale { background: var(--rojo, #ff4c4c); color: #fff; }
.etiqueta.out_of_stock { background: var(--tinta-suave); color: #fff; }

/* Relacionados de la ficha («También te puede gustar»): fila deslizable, como la maqueta */
.product-accessories .products {
  display: flex; gap: 20px; margin: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px;
}
.product-accessories .products > .js-product { flex: 0 0 260px; width: 260px; scroll-snap-align: start; padding: 0; max-width: none; }
.product-accessories .titular-m { margin-bottom: 32px; }

/* Ficha: columna de galería sin tarjeta de PrestaShop alrededor */
.galeria-columna { min-width: 0; }
.galeria-columna .page-content { padding: 0; margin: 0; background: none; border: 0; box-shadow: none; }

/* Ficha: precios y descuentos de classic */
.compra .product-prices { display: grid; gap: 6px; }
.compra .product-price { margin: 0; }
.compra .current-price-value {
  display: inline-block; background: var(--acento); color: var(--acento-tinta);
  font-weight: 800; font-size: 30px; letter-spacing: -.02em; line-height: 1.2;
  padding: 4px 12px; border-radius: 6px; transform: rotate(-1.5deg);
}
.compra .product-discount { margin: 0 0 4px; }
.compra .regular-price { color: var(--tinta-suave); text-decoration: line-through; font-size: 16px; }
.compra .discount { display: inline-block; margin-left: 8px; font-size: 14px; font-weight: 700; }
.compra .tax-shipping-delivery-label, .compra .product-unit-price { font-size: 13px; color: var(--tinta-suave); }

/* Ficha: cantidad (TouchSpin de classic) y botón «Añadir a la cesta» */
.compra .product-actions { margin: 0; }
.compra .product-add-to-cart { display: grid; gap: 10px; }
.compra .product-add-to-cart > .control-label { font-size: 13px; font-weight: 700; color: var(--tinta-suave); letter-spacing: .04em; text-transform: uppercase; }
.compra .product-quantity { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.compra .qty { flex: none; }
.compra .bootstrap-touchspin {
  display: inline-flex; align-items: center; height: 54px;
  border: 1px solid var(--tinta); border-radius: var(--pildora); overflow: hidden;
}
.compra .bootstrap-touchspin input, .compra #quantity_wanted {
  width: 64px; height: 100%; border: 0; background: none; text-align: center;
  font: inherit; font-size: 17px; font-weight: 700; color: var(--tinta);
  -moz-appearance: textfield; appearance: textfield;
}
.compra #quantity_wanted::-webkit-outer-spin-button, .compra #quantity_wanted::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.compra .bootstrap-touchspin .input-group-btn-vertical { display: flex; flex-direction: row; }
.compra .bootstrap-touchspin .btn {
  width: 44px; height: 100%; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--tinta); font-size: 22px; font-weight: 600;
}
.compra .bootstrap-touchspin .btn:hover { background: var(--gris-foto); }
.compra .product-quantity .add { flex: 1 1 200px; display: flex; }
.compra .add-to-cart {
  width: 100%; height: 54px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: var(--pildora);
  background: var(--acento); color: #fff;
  font-weight: 800; font-size: 17px;
  transition: transform .25s var(--curva), background .25s;
}
.compra .add-to-cart:hover { transform: translateY(-2px) rotate(-1deg); }
.compra .add-to-cart:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.compra .add-to-cart .material-icons { font-size: 20px; }
.compra #product-availability .alert { border-radius: var(--radio); font-size: 14px; }
.compra .product-minimal-quantity { margin: 0; font-size: 13px; color: var(--tinta-suave); }

/* Ficha: desplegables. El panel de detalles de classic se muestra dentro del desplegable. */
.compra .desplegables { margin-top: 8px; }
.desplegable #product-details.tab-pane,
.desplegable .tab-pane { display: block; opacity: 1; }
.desplegable .product-description p { margin: 0 0 12px; }
.desplegable .desplegable-cuerpo a { text-decoration: underline; text-underline-offset: 3px; }
.desplegable .desplegable-cuerpo p { margin: 0 0 12px; }

/* Ventana de «añadido a la cesta» (#blockcart-modal) y avisos (#notifications) */
#blockcart-modal .modal-content { background: var(--blanco); color: var(--tinta); border: 1px solid var(--linea); border-radius: var(--radio); }
#blockcart-modal .modal-header { border-bottom: 1px solid var(--linea); }
#blockcart-modal .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 26px; border: 0; border-radius: var(--pildora);
  background: var(--tinta); color: var(--acento);
  font-weight: 700; font-size: 15px;
}
#blockcart-modal .btn-secondary { background: var(--blanco); color: var(--tinta); border: 1px solid var(--linea); }
#notifications .alert { border-radius: var(--radio); }

/* Móvil (≤ 900 px): el menú baja bajo el logo y se desplaza en horizontal, sin barra */
@media (max-width: 900px) {
  .cabecera .envoltura { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 0; row-gap: 0; }
  .cabecera.compacta .envoltura { height: auto; }
  .cabecera .logo { order: 1; }
  .cabecera .iconos { order: 2; margin-left: auto; }
  .cabecera .menu {
    display: flex; order: 3; width: 100%; margin: 0;
    gap: 22px; padding: 10px 0 12px;
    overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  }
  .cabecera .menu::-webkit-scrollbar { display: none; }
  .cabecera .menu a { flex: none; }

  /* Listado: los filtros van plegados detrás del botón; visibles, en tarjeta */
  .filtros:not([hidden]) { padding: 0; background: none; border: 0; }
  .filtros #search_filters_wrapper { padding: 4px 18px 18px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 24px; }
  #js-product-list .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }

  /* Ficha: una columna */
  .product-accessories .products { margin: 0; }
  .galeria-columna .galeria { display: flex; }
}


/* ---------- Ajustes tras probar en la copia: reglas de classic que pisaban la maqueta ---------- */
/* Cabecera: menú en fila con separación, logo a su tamaño y buscador sin el fondo gris de classic. */
#header .cabecera nav.menu { display: flex !important; gap: 22px; align-items: center; }
#header .cabecera .logo { flex: none; }
#header .cabecera .logo img { height: 52px; width: auto; max-width: none; }
#header #search_widget form input[type="text"] { background: transparent; border: 0; padding: 0 0 0 40px; height: auto; box-shadow: none; }
@media (max-width: 900px) {
  #header .cabecera .logo img { height: 40px; }
}
/* Páginas con el diseño moderno: sin el relleno superior ni el fondo de #wrapper de classic. */
[data-revelado] #wrapper { padding-top: 0; background: transparent; box-shadow: none; }
/* Migas: classic añade su propia barra; queda solo la de la maqueta. */
[data-revelado] .breadcrumb li::after { content: none !important; }
/* Ficha: títulos y botones sin las mayúsculas de classic. */
[data-revelado] #main h1, [data-revelado] .product-actions .btn, [data-revelado] .product-add-to-cart .btn { text-transform: none; }

/* Pie: módulos de displayFooter (enlaces legales, RGPD y WhatsApp) en filas discretas, sin títulos de columna de classic */
.pie-telefono { opacity: .7; margin-top: 14px; }
.pie-modulos { margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); }
.pie-modulos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie-modulos li { margin: 0; }
.pie-modulos a { font-size: 13px; opacity: .75; color: inherit; text-decoration: none; }
.pie-modulos a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.pie-modulos h3, .pie-modulos h4, .pie-modulos .h3, .pie-modulos .h4, .pie-modulos .title { display: none; }

/* ---------- Ajustes tras probar en la copia de Pokebolas ---------- */
/* La tarjeta conserva clases de classic 1.7.8 (thumbnail-container, product-description, product-title)
   para los módulos; aquí se anulan las alturas fijas, el fondo blanco, el centrado y las mayúsculas de classic. */
#wrapper .tarjeta .thumbnail-container,
#wrapper .tarjeta .tarjeta-foto { width: auto; height: auto; margin: 0; box-shadow: none; }
#wrapper .tarjeta > .thumbnail-container { position: relative; background: none; }
#wrapper .tarjeta .product-thumbnail { display: block; height: 100%; }
#wrapper .tarjeta .product-thumbnail img { position: static; top: auto; transform: scale(var(--zoom, 1)); max-width: 100%; width: 100%; height: 100%; }
#wrapper .tarjeta:hover .product-thumbnail img { transform: scale(calc(var(--zoom, 1) * 1.05)); }
#wrapper .tarjeta .product-description {
  position: static; width: auto; height: auto; background: none; box-shadow: none;
  padding: 0; margin: 0; text-align: left; display: flex; flex-direction: column; gap: 6px;
}
#wrapper .tarjeta .product-title { text-transform: none; text-align: left; margin: 0; }
#wrapper .tarjeta .product-title a { text-transform: none; text-align: left; }
#wrapper .tarjeta .highlighted-informations { display: none; }
/* Pie: los bloques de los módulos (columnas de classic) en filas, sin pisar la línea legal. */
.pie-modulos { display: flow-root; }
.pie-modulos .row { display: flex; flex-wrap: wrap; gap: 18px 40px; margin: 0; }
.pie-modulos [class*="col-"] { float: none; flex: 1 1 200px; max-width: none; width: auto; padding: 0; }
.pie-modulos .block-contact, .pie-modulos .block-contact a { color: inherit; font-size: 13px; opacity: .75; }
.pie-modulos .collapse { display: block; }
.pie-modulos .title.hidden-md-up { display: none; }
/* Nombre en tinta oscura (classic lo pone gris) y corazón de la lista de deseos siempre arriba a la derecha
   (en la portada el módulo no carga su CSS). */
#wrapper .tarjeta .product-title a { color: var(--tinta); font-size: 16px; font-weight: 600; }
#wrapper .tarjeta .wishlist-button-add { position: absolute; top: 10px; right: 10px; left: auto; bottom: auto; z-index: 3; margin: 0; }

/* ---------- Lo nuevo de Pokebolas: «El lanzamiento» (lanzamiento.js) ---------- */
/* La bola que vuela desde la foto del producto hasta la mochila. */
.bola-voladora { position: fixed; z-index: 90; border-radius: 50%; overflow: hidden; background: #fff;
  border: 2px solid var(--tinta); box-shadow: 0 10px 24px rgba(0,0,0,.25); pointer-events: none; will-change: transform; }
.bola-voladora img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.7); }
/* El destello del «clic» al llegar a la mochila. */
.destello { position: fixed; z-index: 91; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%;
  border: 3px solid var(--acento); pointer-events: none; }
/* Aviso de «¡Atrapada!» o de error: aria-live, se va a los 4 s. */
.aviso-lanzamiento { position: fixed; right: 24px; bottom: 24px; z-index: 92; max-width: 380px; background: var(--tinta); color: #fff;
  border-radius: 14px; padding: 14px 18px; font-weight: 600; box-shadow: 0 12px 30px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s; }
.aviso-lanzamiento.visible { opacity: 1; transform: none; }
.aviso-lanzamiento b { color: #fff; text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 3px; }
.aviso-ver { display: inline-block; margin-left: 8px; padding: 4px 12px; border: 1px solid #fff; border-radius: 99px;
  background: transparent; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.aviso-ver:hover { background: #fff; color: var(--tinta); }
@media (max-width: 900px) { .aviso-lanzamiento { left: 16px; right: 16px; bottom: 88px; max-width: none; } }

/* ---------- Formulario de compra real (lanzamiento.js) ---------- */
/* Ocupa todo el ancho; su botón es el «.con-boton .boton» de la maqueta. */
.atrapar { margin: 0; width: 100%; }
.atrapar .boton { width: 100%; }
/* Dentro de la hierba, el formulario no es una caja: sus botones van en la fila de «Otra». */
.encuentro-botones form.atrapar { display: contents; }
.encuentro-botones .atrapar .boton { width: auto; }

/* ---------- Mochila: productos, descuentos y envío antes del total (detalles.js) ---------- */
.mochila-sumas { display: grid; gap: 6px; margin: 0 0 8px; }
.mochila-linea { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 15px; color: var(--tinta-suave); }
.mochila-linea b { color: var(--tinta); font-weight: 700; }
.mochila-acciones a.boton { text-decoration: none; }

/* ---------- Descripciones hechas con el editor (módulo Creative Elements) ---------- */
/* Letra y colores del tema en la ficha. */
.ficha .elementor-heading-title,
.ficha .elementor-widget-text-editor,
.ficha .elementor-image-box-title,
.ficha .elementor-image-box-description { font-family: var(--fuente) !important; color: var(--tinta) !important; }

/* ---------- Cabecera fija de verdad ---------- */
/* .cabecera va dentro de #header, que mide lo mismo que ella, así que no tenía sitio para pegarse.
   Se pega #header y lo que va encima de la cabecera (la barra de aviso) se va hacia arriba:
   moderno.js mide esa altura en --sobre-cabecera (en el móvil la barra ocupa dos líneas). */
#header { position: sticky; top: calc(-1 * var(--sobre-cabecera, 36px)); z-index: 60; }
#header .cabecera { position: relative; top: auto; }
/* Al saltar a #destacados, el título no queda tapado por la cabecera. */
main section[id] { scroll-margin-top: 100px; }

/* ===================================================================
   COMPRA «Atrevida» (Pokebolas): cesta, pedido, confirmación, entrar,
   registro, contraseña y cuenta. Cada regla va limitada a esas páginas
   con el prefijo de la especificación, salvo la cabecera del pedido
   (.cabecera-pedido), que solo existe en el pedido.
   Colores: siempre variables del tema.
   =================================================================== */

/* 1. Aspecto común («mismo traje») */
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .step-title, .card-title, .page-header h1, .btn, label, .cart-summary-line) {
  font-family: var(--fuente);
  text-transform: none;
  letter-spacing: normal;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .step-title, .card-title, .page-header h1) {
  font-weight: 900;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .card {
  background: var(--blanco);
  box-shadow: none;
  border: 1px solid var(--linea);
  border-radius: 22px;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .btn-primary {
  background: var(--acento);
  color: var(--acento-tinta);
  border: 0;
  border-radius: var(--pildora);
  min-height: 48px;
  font-weight: 800;
  box-shadow: none;
  transition: transform .25s var(--curva);
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .btn-primary:not(:disabled):not(.disabled):hover {
  transform: translateY(-2px);
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .btn-primary:is(:disabled, .disabled) {
  opacity: .4;
  cursor: not-allowed;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) :is(.btn-secondary, .btn-tertiary) {
  background: var(--blanco);
  color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: var(--pildora);
  min-height: 48px;
  font-weight: 800;
  box-shadow: none;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) :is(.form-control, select) {
  height: 48px;
  border-radius: 12px;
  border: 1.5px solid var(--linea);
  background: var(--blanco);
  box-shadow: none;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) :is(.form-control, select):focus {
  outline: 0;
  border-color: var(--tinta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 35%, transparent);
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .input-group-btn .btn {
  min-height: 0;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
}
/* Etiquetas encima del campo: dentro de .form-group.row, las columnas se apilan a todo el ancho. */
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .form-group.row > [class*="col-md-"] {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .form-group.row > .form-control-label {
  text-align: left;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .form-group.row > .form-control-comment {
  flex: 0 0 100%;
  width: 100%;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .form-group.row :is(.custom-radio, .custom-checkbox) {
  flex: none;
  width: auto;
}

/* 2. Cabecera del pedido (checkout/_partials/header.tpl): logo, progreso en el centro y «Pago seguro» a la derecha */
.cabecera.cabecera-pedido {
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}
#header .cabecera.cabecera-pedido .envoltura {
  height: auto;
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 14px;
  padding-bottom: 14px;
}
#header .cabecera.cabecera-pedido .logo img {
  height: 44px;
  width: auto;
  max-width: none;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .progreso-compra {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .pedido-seguro {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin: 0;
  font-size: 14px;
  color: var(--tinta-suave);
  white-space: nowrap;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .pedido-seguro svg {
  width: 16px;
  height: 16px;
  flex: none;
}
@media (max-width: 767px) {
  #header .cabecera.cabecera-pedido .envoltura {
    flex-wrap: wrap;
    gap: 10px 16px;
  }
  #header .cabecera.cabecera-pedido .logo {
    order: 1;
  }
  :is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .pedido-seguro {
    order: 2;
    margin-left: auto;
    font-size: 13px;
  }
  :is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .progreso-compra {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-start;
  }
}

/* 3. Progreso del pedido: figura de la tienda (pokéball con 3 puntos) y pasos de PrestaShop */
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .progreso {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .progreso-figura {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .pokebola {
  display: block;
  width: 56px;
  height: 56px;
  overflow: visible;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .progreso-figura .pokebola {
  transform-origin: 50% 100%;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .progreso-figura.tambalea .pokebola {
  animation: compra-tambaleo .7s ease-in-out;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .pokebola .mitad-alta {
  fill: var(--acento);
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .pokebola .mitad-baja {
  fill: var(--blanco);
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .pokebola .contorno {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 3;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .pokebola .banda {
  stroke: var(--tinta);
  stroke-width: 4;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .pokebola .boton-bola {
  fill: var(--tinta);
  stroke: var(--tinta);
  stroke-width: 2;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) :is(.progreso-figura, .final-figura) .puntos {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) :is(.progreso-figura, .final-figura) .punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--tinta);
  background: var(--blanco);
  box-sizing: border-box;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) :is(.progreso-figura, .final-figura) .punto.lleno {
  background: var(--acento);
  border-color: var(--acento);
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .progreso-texto {
  display: grid;
  gap: 4px;
  min-width: 0;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .progreso-texto strong {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .progreso-nombre {
  display: none;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .progreso-pasos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--tinta-suave);
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .progreso-pasos li.hecho {
  color: var(--tinta);
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .progreso-pasos li.actual {
  color: var(--tinta);
  font-weight: 800;
}
@media (max-width: 767px) {
  :is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .progreso-pasos {
    display: none;
  }
  :is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .progreso-nombre {
    display: inline;
  }
}
@keyframes compra-tambaleo {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-18deg); }
  55% { transform: rotate(14deg); }
  78% { transform: rotate(-8deg); }
}

/* 4. Final en la confirmación del pedido: tres tambaleos, clic y destello */
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .final-compra {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 24px;
  padding: 4px 0 24px;
  border-bottom: 1px solid var(--linea);
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .final-figura {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .final-compra .pokebola {
  transform-origin: 50% 100%;
  animation: compra-tambaleo-final 2.1s linear forwards;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .final-compra .boton-bola {
  animation: compra-clic .01s linear 2.1s forwards;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .final-compra .destello {
  position: absolute;
  left: 28px;
  top: 28px;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  box-sizing: border-box;
  border: 3px solid var(--acento);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: compra-destello .6s ease-out 2.1s forwards;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .final-titular {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .final-pedido {
  margin: 4px 0 0;
  font-weight: 700;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .final-frase {
  margin: 4px 0 0;
  color: var(--tinta-suave);
}
@keyframes compra-tambaleo-final {
  0%, 29%, 38%, 67%, 76%, 100% { transform: rotate(0); animation-timing-function: ease-in-out; }
  7%, 45%, 83% { transform: rotate(-14deg); animation-timing-function: ease-in-out; }
  14%, 52%, 88% { transform: rotate(9deg); animation-timing-function: ease-in-out; }
  21%, 60%, 93% { transform: rotate(-5deg); animation-timing-function: ease-in-out; }
}
@keyframes compra-clic {
  from { fill: var(--tinta); }
  to { fill: var(--blanco); }
}
@keyframes compra-destello {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(5); }
}
@media (prefers-reduced-motion: reduce) {
  :is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) :is(.progreso-figura.tambalea .pokebola, .final-compra .pokebola, .final-compra .boton-bola, .final-compra .destello) {
    animation: none;
  }
  :is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .final-compra .boton-bola {
    fill: var(--blanco);
  }
  :is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .final-compra .destello {
    display: none;
  }
}

/* 5. Cesta: línea «qué pasa después», cesta vacía, precio, foto redondeada y resumen fijo */
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) :is(.cart-item .product-image, .cart-item img) {
  border-radius: 12px;
  background: var(--blanco);
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .product-line-info > a.label {
  color: var(--tinta);
  font-weight: 700;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .cart-item .price {
  font-weight: 800;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .linea-promesa {
  display: flex;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .linea-promesa li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-size: 15px;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .linea-promesa li + li::before {
  content: "";
  position: absolute;
  top: 23px;
  left: calc(-50% + 24px);
  right: calc(50% + 24px);
  height: 2px;
  background: var(--tinta);
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .linea-promesa .punto {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--tinta);
  background: var(--blanco);
  color: var(--tinta);
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .linea-promesa .punto.lleno {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-tinta);
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .linea-promesa .punto svg {
  width: 24px;
  height: 24px;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .linea-promesa b {
  font-weight: 700;
}
@media (max-width: 767px) {
  :is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .linea-promesa {
    margin-top: 20px;
  }
  :is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .linea-promesa li {
    gap: 8px;
    font-size: 13px;
  }
  :is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .linea-promesa .punto {
    width: 36px;
    height: 36px;
  }
  :is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .linea-promesa .punto svg {
    width: 18px;
    height: 18px;
  }
  :is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .linea-promesa li + li::before {
    top: 17px;
    left: calc(-50% + 18px);
    right: calc(50% + 18px);
  }
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .cart-overview .no-items {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--tinta);
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .cesta-vacia-accion {
  margin-top: 18px;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .cesta-vacia-accion .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 992px) {
  :is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account):is(body#cart) .cart-grid-right,
  :is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account):is(body#checkout) #js-checkout-summary {
    position: sticky;
    top: 100px;
  }
}

/* 6. Dirección como etiqueta de paquete (solo CSS) */
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) :is(.address-item, article.address) {
  position: relative;
  padding: 40px 18px 14px;
  background: var(--blanco);
  border: 1.5px solid var(--tinta);
  border-radius: 14px;
  overflow: hidden;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) :is(.address-item, article.address)::before {
  content: "Enviar a";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  line-height: 28px;
  padding: 0 18px;
  background: var(--tinta);
  color: var(--blanco);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: none;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) :is(.address-item, article.address)::after {
  content: "";
  display: block;
  height: 26px;
  margin-top: 12px;
  background: repeating-linear-gradient(90deg, var(--tinta) 0 2px, transparent 2px 4px, var(--tinta) 4px 7px, transparent 7px 9px);
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .address-item.selected {
  border-color: var(--acento);
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .address-item.selected::before {
  background: var(--acento);
  color: var(--acento-tinta);
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .address-footer {
  font-size: 13px;
}

/* 7. Entrar con una foto real (solo de escritorio) */
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .no-account .btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 4px;
  text-decoration: none;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .entrar-foto {
  display: none;
  margin: 0;
  padding: 18px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 22px;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .entrar-foto a {
  display: block;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .entrar-foto img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .entrar-foto p {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 700;
}
@media (min-width: 992px) {
  :is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account):is(body#authentication) #content.entrar-doble {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  :is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account):is(body#authentication) .entrar-foto {
    display: block;
  }
}


/* ---------- Compra y cuenta: ajustes tras probar en las copias (2026-10-28) ---------- */
/* Migas: «classic» pone «/» detrás de cada miga y el tema otra delante, y salían dos. Se queda la del tema, en todas las páginas. */
#wrapper .breadcrumb li::after { content: none !important; }
/* Pasos del pedido: sin las mayúsculas de «classic» y con el número del paso actual en el color de la tienda. */
body#checkout section.checkout-step .step-title { text-transform: none; font-family: var(--fuente); font-weight: 900; letter-spacing: -.01em; }
body#checkout section.checkout-step.-reachable.-current .step-number { background-color: var(--acento); color: var(--acento-tinta); }
/* Dirección elegida: «classic» le pone un borde azul de 3 px; manda el color de la tienda. */
body#checkout section.checkout-step .address-item.selected { border: 2px solid var(--acento); }
/* Botón de opción marcado, del color de la tienda. */
:is(body#cart, body#checkout, body#order-confirmation, body#authentication, body#registration, body#password, body.page-customer-account) .custom-radio input[type=radio]:checked + span { background-color: var(--acento); }
/* Entrar con foto: «classic» limita la caja a 640 px (.page-authentication #content); con dos columnas se ensancha. */
body#authentication #content.entrar-doble { max-width: 1000px; }

/* ---------- Móvil (≤ 900 px), 2026-10-28: fotos sin recortes, menos huecos, filtros plegados y compra a mano ---------- */
@media (max-width: 900px) {
  /* Menú: aviso de que se desliza */
  .cabecera .menu {
    padding-right: 40px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }

  /* Fotos: se acercan menos, para no cortar orejas ni alas */
  .tarjeta-foto { --zoom: 1.2; }
  .bola-foto img { transform: scale(1.3); }
  .categoria-foto img, .categoria:hover .categoria-foto img { transform: none; }
  .encuentro-foto img, .mochila-bola img { transform: scale(1.3); }

  /* Portada: el sello no se sale por la izquierda */
  .sello { left: 0; }

  /* Huecos entre secciones */
  .seccion { padding-top: 56px; }
  .relacionados { margin-top: 48px; }
  .pie { margin-top: 56px; }

  /* Ficha: una sola foto ocupa todo el ancho; precio y botón bajo el título */
  .galeria-foto:only-child { flex-basis: 100%; }
  .compra > .destacado { order: 1; }
  .compra > .desplegables { order: 2; }

  /* Ficha: productos relacionados, dos por fila y a su tamaño */
  section.featured-products { margin-top: 48px; }
  section.featured-products > h2 { font-size: 22px; line-height: 1.2; margin: 0 0 20px; }
  section.featured-products .products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; margin: 0; }
  section.featured-products .products > .js-product { width: auto; max-width: none; flex: none; padding: 0; }

  /* Cesta vacía: el botón con margen dentro de su tarjeta */
  .cart-grid-body .vacia-accion { padding: 0 16px 16px; }
}
@media (max-width: 767px) {
  /* Listado: filtros plegados tras «Filtrar» (moderno.js pone .abierto) y sin la flecha doble */
  #search_filters_wrapper.filtros:not(.abierto) { display: none; }
  #search_filters .collapse-icons { display: none; }
}

/* ---------- Pie, 2026-10-29: sin la lista de classic (ps_linklist, ps_customeraccountlinks y ps_contactinfo) ---------- */
/* En .pie-modulos solo quedan las ventanas de favoritos, que no se ven. Lo demás ya está en «Tienda», «Ayuda» y el icono de la cuenta. */
.pie .pie-modulos > .links { display: none; }
.pie .pie-modulos { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- 3x2 lo primero, 2026-10-29: barra con el código, portada «Elige a tus iniciales» y cuadro de combate ---------- */
/* Barra de arriba (header.tpl): roja, «3x2 en pokéballs · llévate 3, paga 2». El código no se enseña (lo pone detalles.js en la cesta). */
.barra-aviso.barra-3x2 {
  display: block;
  text-align: center;
  padding: 6px 16px;
  background: var(--acento);
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
.barra-3x2 b { color: #fff; font-weight: 800; text-decoration: none; }
/* Portada: el nombre de la tienda en pequeño (sigue siendo el h1) y el 3x2 en grande. */
.portada-texto h1.portada-tienda {
  margin: 0;
  color: var(--tinta-suave);
  font-family: var(--fuente);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}
.portada-texto .portada-3x2-titular {
  max-width: none;
  margin: 0;
  color: var(--tinta);
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: .98;
  text-wrap: balance;
}
.portada-texto .portada-3x2-precio { max-width: none; margin: 0; color: var(--tinta); font-size: 22px; font-weight: 800; }
.portada-3x2-precio b { color: var(--acento); font-weight: 900; }
.portada-3x2-precio s { margin-left: 6px; color: var(--tinta-suave); font-weight: 400; }
.portada-3x2 .bolas { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Cuadro de combate (Game Boy): marco grueso, sombra dura y flecha en la opción activa. */
.combate {
  max-width: 520px;
  padding: 14px 16px 12px;
  background: var(--blanco);
  border: 3px solid var(--tinta);
  border-radius: 12px;
  box-shadow: 6px 6px 0 var(--tinta);
}
.portada-texto .combate-texto {
  min-height: 1.4em;
  max-width: none;
  margin: 0 0 10px;
  color: var(--tinta);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 17px;
}
.combate-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.combate-opcion {
  position: relative;
  display: block;
  padding: 7px 4px 7px 22px;
  border: 0;
  background: none;
  color: var(--tinta);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.combate-opcion::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  margin-top: -6px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid currentColor;
  opacity: 0;
}
.combate-opcion:hover::before,
.combate-opcion:focus-visible::before,
.combate-opcion[data-llevar-tres]::before { opacity: 1; }
.combate-opcion[data-llevar-tres] { color: var(--acento); }
.combate-opcion[aria-busy="true"] { opacity: .55; pointer-events: none; }

@media (max-width: 900px) {
  .barra-aviso.barra-3x2 { gap: 8px; padding: 6px 12px; font-size: 13px; }
  .portada-texto h1.portada-tienda { font-size: 13px; }
  .portada-texto .portada-3x2-titular { font-size: clamp(32px, 9vw, 42px); }
  .portada-texto .portada-3x2-precio { font-size: 19px; }
  .combate { padding: 12px 12px 10px; box-shadow: 4px 4px 0 var(--tinta); }
  .portada-texto .combate-texto { font-size: 15px; }
  .combate-opcion { padding-left: 20px; font-size: 15px; }
}

/* ---------- Página del 3x2 y menú, 2026-10-29 (maqueta 3x2-atrevida.html) ---------- */
/* Menú: «3x2» primero, píldora roja que se tambalea cada 5 s (header.tpl; el texto lo cambia detalles.js). */
.menu a.menu-3x2 {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: var(--pildora);
  background: var(--acento);
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
  animation: menu-3x2 5s ease-in-out infinite;
}
.menu a.menu-3x2::after { display: none; }
.menu a.menu-3x2:hover,
.menu a.menu-3x2[aria-current="page"] { background: var(--tinta); color: #fff; }
/* Classic pone el color de los enlaces de #header con más fuerza: el texto de la píldora, siempre blanco. */
#header .menu a.menu-3x2,
#header .menu a.menu-3x2:hover,
#header .menu a.menu-3x2[aria-current="page"] { color: #fff; }
@keyframes menu-3x2 {
  0%, 90%, 100% { transform: none; }
  93% { transform: rotate(-7deg); }
  96% { transform: rotate(6deg); }
  98% { transform: rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .menu a.menu-3x2 { animation: none; }
}
/* En el ordenador, con la píldora el menú no cabía y se partía en dos líneas: sin partir, algo menos de hueco
   y el buscador más estrecho. Por debajo de 1200 px queda como antes. */
@media (min-width: 1200px) {
  #header .cabecera nav.menu { gap: 18px; }
  .cabecera .menu a { white-space: nowrap; }
  .cabecera .buscador { min-width: 160px; }
}

/* Página (templates/cms/page.tpl). */
.p3x2 { padding-bottom: 140px; }
.atr-cabeza { padding: 28px 0 8px; }
.atr-cabeza .titular-l { margin: 8px 0 0; }
.p3x2-reglas { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; }
.p3x2-reglas li {
  padding: 6px 14px;
  border: 1.5px solid var(--tinta);
  border-radius: var(--pildora);
  background: var(--blanco);
  font-size: 14px;
  font-weight: 700;
}
.p3x2-reglas li:first-child { background: var(--acento); border-color: var(--acento); color: #fff; }

/* Tríos ya hechos: la foto va en un marco redondo que la recorta y se acerca (las fotos traen mucho margen blanco). */
.trios { padding-top: 48px; }
.trios-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.trio { display: grid; gap: 12px; padding: 16px; background: var(--blanco); border: 2px solid var(--tinta); border-radius: 18px; }
.trio h3 { margin: 0; font-size: 18px; }
.trio-bolas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; font-size: 12px; font-weight: 700; }
.trio-bola { color: inherit; text-decoration: none; }
.trio-foto { display: block; aspect-ratio: 1; margin-bottom: 4px; overflow: hidden; border: 2px solid var(--tinta); border-radius: 50%; background: #fff; }
.trio-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.6); }
.trio-precio { margin: 0; font-weight: 800; }
.trio-precio b { color: var(--acento); }
.trio-precio s { margin-left: 4px; color: var(--tinta-suave); font-weight: 400; }
.trio .boton[aria-busy="true"] { opacity: .55; pointer-events: none; }

/* Parrilla «O elige tú, una a una». */
.p3x2-parrilla { padding-top: 64px; }
.p3x2 .barra-herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin: 24px 0 32px;
  padding: 16px 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.p3x2 .grupo-chips { display: flex; gap: 10px; }
.conteo-3x2 { margin-left: auto; color: var(--tinta-suave); font-size: 14px; font-weight: 600; white-space: nowrap; }
.paginacion-3x2 { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 48px; }
.paginacion-3x2 p { margin: 0; color: var(--tinta-suave); font-size: 14px; font-weight: 600; }
#ver-mas-3x2[hidden] { display: none; }

/* Barra «Tu equipo», fija abajo (detalles.js). */
.equipo {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 65;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 24px));
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "cabeza cabeza" "huecos texto";
  align-items: center;
  gap: 6px 14px;
  padding: 10px 14px;
  background: var(--blanco);
  border: 2px solid var(--tinta);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}
.equipo-cabeza { grid-area: cabeza; display: flex; justify-content: space-between; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.equipo-huecos { grid-area: huecos; display: flex; gap: 6px; }
.equipo-hueco { position: relative; width: 44px; height: 44px; overflow: hidden; border: 2px dashed var(--tinta); border-radius: 50%; background: var(--fondo); }
.equipo-hueco img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); }
.equipo-gratis small { position: absolute; inset: auto 0 2px; color: var(--acento); font-size: 9px; font-weight: 900; text-align: center; }
.equipo-texto { grid-area: texto; margin: 0; font-size: 14px; font-weight: 800; }
.equipo.completo { border-color: var(--acento); }
.equipo.completo .equipo-hueco { border-style: solid; border-color: var(--acento); }
.equipo.completo .equipo-texto { color: var(--acento); }

@media (max-width: 900px) {
  .p3x2-reglas li { font-size: 13px; }
  .trios-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p3x2 .grupo-chips { order: 3; flex: 1 1 100%; min-width: 0; gap: 8px; padding: 4px 0; overflow-x: auto; }
  .p3x2 .grupo-chips .chip { flex: none; }
  /* El aviso «¡Atrapada!» va por encima de la barra «Tu equipo». */
  body:has(#equipo) .aviso-lanzamiento { bottom: 140px; }
}
@media (max-width: 560px) {
  .trios-rejilla { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Tarjetas de la portada y del 3x2, 2026-10-29 (fallos vistos en el iPhone de Alejandro) ---------- */
/* Classic centra en vertical sus .product-miniature: junto a un nombre de dos líneas, la foto de al lado bajaba. */
.tarjeta { justify-content: flex-start; }
/* Las tarjetas que pinta el JS (portada y página del 3x2) son su propio .thumbnail-container, y el ajuste de arriba
   «#wrapper .tarjeta > .thumbnail-container { background: none }» les quitaba el fondo: las fotos con fondo blanco
   salían como cajas encima de la balda. Vuelven a tener el fondo de las del listado. */
#wrapper .tarjeta > .tarjeta-foto.thumbnail-container { background: var(--gris-foto); }

/* ---------- Cabecera nueva y banner de fotos, 2026-10-30 (maqueta cabecera-fotos.html) ---------- */
/* La cabecera de arriba (#header) deja de ser pegajosa: la franja y la píldora van fijas y el banner empieza debajo.
   Estas reglas van con más fuerza (#header .cabecera.cab, body:not(#checkout) #header) que las viejas de arriba. */
body:not(#checkout) #header {
  position: static;
  top: auto;
  height: 0;
  background: none;
  box-shadow: none;
  border: 0;
  overflow: visible;
}

/* Franja negra con mensajes en bucle (cabecera.css de la maqueta) */
.franja {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  z-index: 70;
  background: #111;
  color: #fff;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  transition: transform .35s var(--curva);
}
.franja-pista { display: inline-flex; white-space: nowrap; animation: franja 40s linear infinite; }
.franja-pista span { padding: 0 18px; }
.franja-pista span::after { content: "•"; margin-left: 36px; opacity: .6; }
@keyframes franja { to { transform: translateX(-50%); } }
body.cab-bajada .franja { transform: translateY(-100%); }

/* Píldora de cristal: menú a la izquierda, logo en el centro y buscador e iconos a la derecha */
#header .cabecera.cab {
  position: fixed;
  top: 46px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1320px, calc(100% - 32px));
  height: 60px;
  z-index: 69;
  border-radius: 999px;
  background: rgba(250, 248, 245, .72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .10);
  transition: top .35s var(--curva), background .35s, box-shadow .35s;
}
#header .cabecera.cab .cab-fila {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 10px 0 22px;
}
#header .cabecera.cab nav.menu { gap: 20px; font-size: 14px; font-weight: 700; }
#header .cabecera.cab .menu a::after { display: none; }
/* El logo va en un círculo blanco de 44 px, como el botón de una pokéball. */
#header .cabecera.cab .cab-logo {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}
#header .cabecera.cab .cab-logo img { height: 30px; width: auto; max-width: none; mix-blend-mode: normal; }
#header .cabecera.cab .iconos { justify-self: end; }
/* Buscador compacto (escritorio): la lupa a la izquierda del campo */
#header .cabecera.cab .buscador {
  display: flex;
  margin: 0;
  width: 170px;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  background: rgba(255, 255, 255, .6);
  border-radius: 999px;
}
#header .cabecera.cab .buscador input[type="text"] { padding: 0; }
/* Al bajar, la píldora se queda arriba y la franja se esconde. Fuera de la portada, siempre con fondo blanco. */
#header .cabecera.cab.bajada { top: 12px; background: rgba(255, 255, 255, .92); }
body:not(#index) #header .cabecera.cab { background: rgba(255, 255, 255, .92); }

/* Hueco para la franja y la píldora: en la portada el banner empieza arriba del todo; en el resto, sin banner, se deja sitio. */
body:not(#index):not(#checkout) #wrapper { padding-top: 130px; }
#index #wrapper { padding-top: 0; }

/* Banner de fotos: a pantalla completa (sustituye a la .portada de estantería). */
.portada.portada-fotos {
  position: relative;
  height: max(560px, 100svh);
  min-height: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.portada-fotos .clip {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s;
  overflow: hidden;
}
.portada-fotos .clip.activo { opacity: 1; }
.portada-fotos .clip-foto picture,
.portada-fotos .clip-foto .foto { position: absolute; inset: 0; width: 100%; height: 100%; }
.portada-fotos .clip-foto .foto { object-fit: cover; object-position: 70% center; }
/* Acercamiento lento mientras el clip está activo, como los vídeos de Esenzia. */
.portada-fotos .clip-foto.activo .foto { animation: acerca 7s ease-out both; }
@keyframes acerca { from { transform: scale(1); } to { transform: scale(1.07); } }
/* Velo oscuro a la izquierda para que el texto blanco se lea sobre la foto. */
.portada-fotos .clip-foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .2) 45%, rgba(0, 0, 0, 0) 65%);
}
.portada-fotos .clip-foto .banner-texto { z-index: 3; }

/* Clip del estudio: fondo claro, texto oscuro y sin velo. */
.portada-fotos .clip-estudio { background: linear-gradient(180deg, #CDAC87, #E5D3BD); }
.portada-fotos .clip-estudio::before { display: none; }
.portada-fotos .clip-estudio .banner-texto,
.portada-fotos .clip-estudio .banner-texto .antetitulo,
.portada-fotos .clip-estudio .banner-texto .titular-xl,
.portada-fotos .clip-estudio .banner-texto .titular-xl em { color: #111; text-shadow: none; }
.portada-fotos .clip-estudio .boton-cristal { background: #111; border-color: #111; color: #fff; }

.portada-fotos .banner-texto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 72px;
  z-index: 3;
}
.portada-fotos .banner-texto .antetitulo { color: #fff; opacity: .9; }
.portada-fotos .banner-texto .titular-xl {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
  margin: 10px 0 22px;
}
.portada-fotos .banner-texto .titular-xl em { color: #fff; }
/* En el ordenador, el título ocupa la mitad izquierda: la foto o la escena va a la derecha. */
@media (min-width: 901px) { .portada-fotos .banner-texto .titular-xl { max-width: 56%; } }
.portada-fotos .precio-trio { margin: 14px 0 22px; font-size: 20px; font-weight: 700; }
.portada-fotos .precio-trio b { font-weight: 900; }
.portada-fotos .precio-trio s { opacity: .7; margin-left: 4px; }
.portada-fotos .boton-cristal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .6);
  color: #fff;
  font-weight: 800;
  font-size: 17px;
  transition: transform .25s var(--curva), background .25s;
}
.portada-fotos .boton-cristal:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .3); }

/* Tarjetita de la pokéball perdida: foto, nombre, precio y «¡Atrápala!». El precio usa la pastilla .precio del tema. */
.portada-fotos .perdida {
  display: inline-grid;
  grid-template-columns: 56px auto;
  align-items: center;
  gap: 4px 12px;
  margin-top: 18px;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  color: #111;
  text-shadow: none;
}
.portada-fotos .perdida img { grid-row: span 2; width: 56px; height: 56px; object-fit: contain; }
.portada-fotos .perdida-nombre { font-weight: 800; font-size: 15px; }
.portada-fotos .perdida-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.portada-fotos .perdida-fila s { color: var(--tinta-suave); font-size: 14px; }
.portada-fotos .perdida .boton { height: 40px; padding: 0 18px; font-size: 15px; }
.portada-fotos .perdida .boton[aria-busy="true"] { opacity: .55; pointer-events: none; }

/* Controles del banner: cuatro puntos y la pausa. */
.portada-fotos .banner-controles {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.portada-fotos .banner-controles .punto {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
}
.portada-fotos .banner-controles .punto[aria-pressed="true"] { background: #fff; }
.portada-fotos .banner-controles .pausa {
  width: 30px;
  height: 30px;
  margin-left: 8px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
}
.portada-fotos .banner-controles .pausa svg { width: 14px; height: 14px; fill: currentColor; }
/* Sin pausar: dos rayas. Pausado (aria-pressed="true"): triángulo para seguir. */
.portada-fotos .banner-controles .pausa[aria-pressed="true"] .rayas { display: none; }
.portada-fotos .banner-controles .pausa[aria-pressed="false"] .triangulo { display: none; }
/* Con la pausa, se para el cambio de clip y las animaciones del banner. */
#banner.pausado * { animation-play-state: paused !important; }

/* Movimiento reducido: franja quieta, sin acercamiento y el banner se queda en el primer clip (lo decide portada.js). */
html.quieto .franja-pista,
html.quieto .portada-fotos .clip-foto.activo .foto { animation: none !important; }
html.quieto .portada-fotos .clip { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .franja-pista,
  .portada-fotos .clip-foto.activo .foto { animation: none !important; }
  .portada-fotos .clip { transition: none; }
}

/* Móvil (≤ 900 px): la píldora sube un poco, el menú va en su fila y el buscador es solo la lupa. */
@media (max-width: 900px) {
  body:not(#index):not(#checkout) #wrapper { padding-top: 160px; }
  #header .cabecera.cab {
    top: 42px;
    width: calc(100% - 20px);
    height: auto;
    border-radius: 22px;
  }
  #header .cabecera.cab .cab-fila {
    height: auto;
    padding: 8px 12px 6px;
    column-gap: 6px;
    row-gap: 4px;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "logo . lupa cesta" "menu menu menu menu";
  }
  /* Los iconos pasan a ser celdas de la rejilla, para que el buscador pueda ocupar la tercera fila. */
  #header .cabecera.cab .iconos { display: contents; }
  #header .cabecera.cab .cab-logo { grid-area: logo; width: 38px; height: 38px; }
  #header .cabecera.cab .cab-logo img { height: 26px; }
  #header .cabecera.cab #_desktop_cart { grid-area: cesta; }
  #header .cabecera.cab .cab-cuenta { display: none; }
  #header .cabecera.cab nav.menu {
    grid-area: menu;
    min-width: 0;
    gap: 20px;
    font-size: 13px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    padding: 2px 0;
  }
  #header .cabecera.cab nav.menu::-webkit-scrollbar { display: none; }
  #header .cabecera.cab nav.menu a { flex: none; }
  /* Solo la lupa (40 × 40). Al tocarla, la píldora lleva .buscando y el campo ocupa la tercera fila. */
  #header .cabecera.cab .buscador {
    display: flex;
    grid-area: lupa;
    width: 40px;
    height: 40px;
    min-width: 0;
    padding: 0;
    justify-content: center;
    background: none;
    border: 0;
  }
  #header .cabecera.cab .buscador #search_widget,
  #header .cabecera.cab .buscador form { justify-content: center; }
  #header .cabecera.cab .buscador input[type="text"] { display: none; }
  #header .cabecera.cab .buscador svg.search { width: 40px; height: 40px; padding: 11px; }
  #header .cabecera.cab.buscando .cab-fila {
    grid-template-areas: "logo . lupa cesta" "menu menu menu menu" "buscador buscador buscador buscador";
  }
  #header .cabecera.cab.buscando .buscador {
    grid-area: buscador;
    width: 100%;
    height: 40px;
    padding: 0 14px;
    background: rgba(255, 255, 255, .6);
    border: 1px solid var(--linea);
    border-radius: 999px;
  }
  #header .cabecera.cab.buscando .buscador input[type="text"] { display: block; }
  #header .cabecera.cab.buscando .buscador svg.search { width: 18px; height: 18px; padding: 0; }

  /* Banner en el móvil: la foto arriba y el texto debajo, fundidos con un fondo liso. */
  .portada.portada-fotos { height: max(560px, 88svh); }
  .portada-fotos .clip-foto { background: #141414; }
  .portada-fotos .clip-foto picture { bottom: 38%; height: auto; }
  .portada-fotos .clip-foto .foto { object-position: center 80%; }
  .portada-fotos .clip-foto::before { background: linear-gradient(0deg, #141414 38%, rgba(20, 20, 20, 0) 52%); }
  .portada-fotos .clip-estudio { background: #E5D3BD; }
  .portada-fotos .clip-estudio::before { display: block; background: linear-gradient(0deg, #E5D3BD 38%, rgba(229, 211, 189, 0) 50%); }
  .portada-fotos .clip-estudio .foto { object-position: center 70%; }
  .portada-fotos .banner-texto { bottom: 64px; }
  .portada-fotos .banner-texto .titular-xl { font-size: clamp(38px, 11vw, 54px); }
  .portada-fotos .perdida { grid-template-columns: 48px auto; }
  .portada-fotos .perdida img { width: 48px; height: 48px; }
}

/* ===== Editable desde el panel, 2026-11-03 ===== */
/* Textos y módulos que ahora salen del panel (banner, menú, destacadas, categorías, cuidados, pie y página del 3x2).
   Mantienen el aspecto de antes: lo nuevo solo cubre el marcado que generan los módulos y los textos traducidos. */

/* Banner: el titular del módulo es un div con un p dentro; el p no lleva margen propio. */
.portada-fotos .banner-texto .titular-xl > p { margin: 0; font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; }

/* Fondo de cada clip: lo mide portada.js de la foto (--fondo-clip). Por defecto, oscuro como antes. */
.portada-fotos .clip { --fondo-clip: #141414; }
.portada-fotos .clip.clip-claro { background: var(--fondo-clip); }
/* Foto clara (antes .clip-estudio): texto negro sin sombra, botón negro y sin velo oscuro. */
.portada-fotos .clip-claro::before { display: none; }
.portada-fotos .clip-claro .banner-texto,
.portada-fotos .clip-claro .banner-texto .antetitulo,
.portada-fotos .clip-claro .banner-texto .titular-xl,
.portada-fotos .clip-claro .banner-texto .titular-xl em { color: #111; text-shadow: none; }
.portada-fotos .clip-claro .boton-cristal { background: #111; border-color: #111; color: #fff; }

/* Fabricación y cuidados (ps_customtext): el texto va en .cuidados-texto. Antes de que actúe portada.js, se ve parecido. */
.cuidados-texto { color: var(--tinta-suave); }
.cuidados-texto h3 { color: var(--tinta); margin: 0 0 8px; font-size: 22px; font-stretch: 112%; }
.cuidados-texto p { margin: 0; }
.cuidados-texto .cuidados-pie { margin-top: 22px; max-width: 760px; }

/* Pie: los enlaces (ps_linklist) son columnas de la misma rejilla que la marca, como «Tienda» y «Ayuda» de antes. */
.pie-rejilla > .pie-enlaces { display: contents; }
.pie-rejilla { grid-template-columns: 2fr repeat(auto-fit, minmax(160px, 1fr)); }

/* Página del 3x2: el titular y las reglas vienen del contenido de la página (Diseño > Páginas). Mismo aspecto que .titular-l y .p3x2-reglas. */
.p3x2-intro h1 {
  margin: 8px 0 0;
  font-size: clamp(34px, 4.6vw, 68px);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: .98;
}
.p3x2-intro h1 em {
  font-family: var(--fuente);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.015em;
}
.p3x2-intro ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; }
.p3x2-intro li {
  padding: 6px 14px;
  border: 1.5px solid var(--tinta);
  border-radius: var(--pildora);
  background: var(--blanco);
  font-size: 14px;
  font-weight: 700;
}
.p3x2-intro li:first-child { background: var(--acento); border-color: var(--acento); color: #fff; }

@media (max-width: 900px) {
  .pie-rejilla { grid-template-columns: 1fr; }
  .p3x2-intro li { font-size: 13px; }
  /* Banner en el móvil: la misma foto arriba (62 % del clip, recortada al 72 %) y el fundido de abajo con el color de la foto. */
  .portada-fotos .clip-foto { background: var(--fondo-clip); }
  .portada-fotos .clip-foto .foto { top: 0; bottom: auto; height: 62%; object-position: 72% center; }
  .portada-fotos .clip-foto::before { background: linear-gradient(0deg, var(--fondo-clip) 38%, transparent 52%); }
  .portada-fotos .clip-claro::before { display: block; background: linear-gradient(0deg, var(--fondo-clip) 38%, transparent 50%); }
}

/* ---------- Tarjeta «¡Atrapada!» (2026-11-03) ---------- */
/* La tarjeta que sale al atrapar una bola (detalles.js): dice que ya está en la mochila, cómo va el 3x2 y propone dos más. */
.atrapada {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 92;
  width: 360px;
  padding: 16px;
  background: var(--tinta);
  color: #fff;
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .25s, transform .25s var(--curva);
}
.atrapada.visible { opacity: 1; transform: none; }
.atrapada[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .atrapada { transition: none; }
}

/* Cabeza: la foto, el título y la X. */
.atrapada-cabeza {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}
.atrapada-foto {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid var(--blanco);
  background: var(--blanco);
  overflow: hidden;
}
.atrapada-foto[hidden] { display: none; }
.atrapada-foto img { width: 100%; height: 100%; object-fit: contain; }
/* classic pone los párrafos en gris: en la tarjeta, blancos (y en las bolas, el color de la tinta). */
.atrapada p { color: inherit; }
.atrapada-titulo { margin: 0; font-size: 14px; line-height: 1.3; color: rgba(255, 255, 255, .85); }
.atrapada-titulo b { display: block; font-size: 17px; color: #fff; }
.atrapada-cerrar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}
.atrapada-cerrar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Sugerencias: dos bolas de la misma familia, cada una con su precio y su botón. */
.atrapada-subtitulo { margin: 14px 0 8px; font-size: 13px; font-weight: 800; }
.atrapada-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.atrapada-bola {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  background: var(--blanco);
  color: var(--tinta);
  border-radius: 14px;
  text-align: center;
}
.atrapada-bola-foto img { display: block; width: 64px; height: 64px; object-fit: contain; }
.atrapada-bola-nombre {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.atrapada-bola .precios { justify-content: center; }
.atrapada-bola .precio { font-size: 15px; }
.atrapada-bola .precio-anterior { font-size: 12px; }
.atrapada-bola .atrapar { width: 100%; }
.atrapada-bola .boton { width: 100%; height: auto; min-height: 34px; padding: 6px 10px; font-size: 13px; }

/* Acciones: «Seguir atrapando» (blanco, el principal) y «Ver la mochila» (con borde). */
.atrapada .atrapada-acciones { display: flex; gap: 8px; margin-top: 14px; }
.atrapada .atrapada-acciones .boton { flex: 1; height: auto; min-height: 44px; padding: 8px 12px; font-size: 14px; white-space: nowrap; }
.atrapada .atrapada-acciones .boton:first-child { background: var(--blanco); color: var(--tinta); }
.atrapada .atrapada-acciones .boton-claro { background: transparent; color: #fff; border: 1px solid #fff; }

/* Línea del 3x2: tres puntos (llenos según lo que lleve la cesta) y la frase. */
.atrapada-3x2 { margin: 12px 0 0; display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, .75); }
.atrapada-puntos { display: flex; gap: 4px; }
.atrapada-puntos i { display: block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .6); }
.atrapada-puntos i.lleno { background: var(--acento); border-color: var(--acento); }

/* Móvil: la tarjeta ocupa el ancho y sube por encima de la barra de compra; en la página del 3x2, por encima de «Tu equipo». */
@media (max-width: 900px) {
  .atrapada { left: 12px; right: 12px; bottom: 88px; width: auto; }
  .barra-movil ~ .atrapada { bottom: 80px; }
  body:has(#equipo) .atrapada { bottom: 140px; }
}

/* ---------- Captura en el botón de la hierba alta (2026-11-03) ---------- */
/* lanzamiento.js (capturarEnBoton): el botón se vacía y en su centro aparece una pokéball que recibe la foto, se tambalea y hace «clic». */
/* 2026-11-06: mientras la tienda contesta, el botón se atenúa y no admite otro toque (como el trío y la combate). */
.encuentro .boton[aria-busy="true"] { opacity: .55; pointer-events: none; }
.encuentro .boton.capturando,
.encuentro .boton.capturando:hover {
  position: relative;
  overflow: visible;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: transparent;
  text-shadow: none;
  cursor: default;
  transform: none;
  transition: background .2s, border-color .2s, color .2s;
}
.captura-bola {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 3px solid var(--tinta);
  background: linear-gradient(to bottom, var(--acento) 0 calc(50% - 2px), var(--tinta) calc(50% - 2px) calc(50% + 2px), #fff calc(50% + 2px));
  box-sizing: border-box;
  transform-origin: 50% 80%;
}
/* El botoncito del centro de la bola. */
.captura-bola::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--tinta);
  box-sizing: border-box;
}
.captura-foto { position: fixed; z-index: 95; pointer-events: none; }
.captura-foto img { width: 100%; height: 100%; object-fit: contain; }
.captura-chispa {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  background: #f2c230;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  pointer-events: none;
}
.encuentro .boton.capturada,
.encuentro .boton.capturada:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); cursor: default; transform: none; }

/* ===== Foto del estudio en el móvil, 2026-11-04 ===== */
/* slider.tpl mete la foto del estudio en un picture con su versión de móvil (banner-estudio-movil.jpg).
   En el móvil, el picture ocupa el 62 % de arriba del clip y la foto lo llena entera, con el encuadre de antes del 2026-11-03. */
@media (max-width: 900px) {
  .portada-fotos .clip-foto picture .foto { top: 0; bottom: 0; height: 100%; object-position: center 70%; }
}

/* ---------- Completa tu equipo (Atrevida), 2026-11-04 ---------- */
/* La Pokédex de la tarjeta «¡Atrapada!» (detalles.js, pintarEquipoTarjeta). Todo selector empieza por .atrapada. */
.atrapada-equipo[hidden], .atrapada-clasica[hidden] { display: none; }

/* La tarjeta entera es la Pokédex: carcasa roja, sin el borde redondo de la tarjeta clásica. */
.atrapada.es-pokedex {
  background: linear-gradient(180deg, #E0453C, #B8261F);
  border-radius: 22px 22px 22px 40px;
  padding-top: 40px;
  perspective: 600px;
  max-height: calc(100svh - 32px);
  overflow-y: auto;
}
@media (min-width: 901px) { .atrapada.es-pokedex { width: 380px; } }
@media (max-width: 900px) { .atrapada.es-pokedex { max-height: calc(100svh - 110px); } }

/* La tapa y su bisagra: se abre la primera vez de la visita. */
.atrapada .tapa { position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 26px; border-radius: 22px 22px 0 0; background: #9E1B14; transform-origin: bottom; }
.atrapada .tapa .bisagra { position: absolute; left: 14px; right: 14px; bottom: -4px; height: 4px; border-radius: 2px; background: #111; }
.atrapada .tapa .bisagra::before, .atrapada .tapa .bisagra::after { content: ""; position: absolute; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: #111; }
.atrapada .tapa .bisagra::before { left: -4px; }
.atrapada .tapa .bisagra::after { right: -4px; }

/* Siluetas: negras sobre blanco, tanto si la foto trae el fondo transparente como si trae el blanco. */
.atrapada .hueco.silueta { background: #fff; }
.atrapada .hueco.silueta img { filter: grayscale(1) brightness(.52) contrast(100); }
.atrapada .interrogante { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 18px; font-weight: 900; pointer-events: none; text-shadow: 0 0 3px #000, 0 0 6px #000; }

/* El precio del equipo sobre la carcasa roja: en amarillo, para que se lea. */
.atrapada.es-pokedex .equipo-precio b { color: #FFD23F; }

/* La Pokédex sin fondo ni sombra propios (la carcasa es la tarjeta). */
.atrapada .pokedex { position: relative; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.atrapada .pokedex-luces { display: flex; align-items: center; gap: 8px; }
.atrapada .lente { display: block; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 3px solid #fff; position: relative;
  background: radial-gradient(circle at 35% 35%, #9FE3FF, #1C8BD6 60%, #0B4F8A); }
.atrapada .lente::after { content: ""; position: absolute; left: 22%; top: 16%; width: 28%; height: 18%; border-radius: 50%; background: rgba(255, 255, 255, .7); transform: rotate(-30deg); }
.atrapada .pilotos { display: flex; gap: 6px; margin-left: auto; }
.atrapada .piloto { display: block; width: 9px; height: 9px; border-radius: 50%; }
.atrapada .piloto.rojo { background: #FF5A4E; }
.atrapada .piloto.amarillo { background: #FFD23F; }
.atrapada .piloto.verde { background: #4CD964; }
.atrapada .pokedex-cuerpo { display: flex; align-items: stretch; gap: 10px; }
.atrapada .pokedex-pantalla { position: relative; flex: 1; min-width: 0; margin-top: 12px; padding: 10px; border-radius: 10px; background: #1F2A24; border: 3px solid #0F1512; box-shadow: inset 0 0 18px rgba(0, 0, 0, .6); }
.atrapada .pokedex-marco { display: flex; align-items: center; gap: 5px; height: 8px; margin: -2px -2px 8px; padding: 0 6px; border-radius: 4px; background: #D9DEDB; }
.atrapada .pokedex-marco i { display: block; width: 4px; height: 4px; border-radius: 50%; background: #E0453C; }
.atrapada .pokedex.encendida .lente { animation: atrapada-latido 1.4s ease-out infinite; }
@keyframes atrapada-latido { from { box-shadow: 0 0 0 0 rgba(28, 139, 214, .7); } to { box-shadow: 0 0 0 10px rgba(28, 139, 214, 0); } }
.atrapada .pokedex.encendida .piloto { animation: atrapada-parpadeo 2.1s steps(1, end) infinite; }
.atrapada .pokedex.encendida .piloto.amarillo { animation-delay: .7s; }
.atrapada .pokedex.encendida .piloto.verde { animation-delay: 1.4s; }
@keyframes atrapada-parpadeo { 0%, 50% { opacity: 1; } 51%, 100% { opacity: .25; } }

/* Seis huecos del equipo. */
.atrapada .huecos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 14px 0 0; }
.atrapada .celda { display: grid; gap: 3px; justify-items: center; min-width: 0; }
.atrapada .hueco { width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--blanco); border: 2px solid var(--blanco); overflow: hidden; position: relative; }
.atrapada .hueco img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); }
.atrapada .hueco.vacio { background: transparent; border: 2px dashed rgba(255, 255, 255, .45); }
.atrapada .hueco.gratis { border-color: var(--acento); }
.atrapada .hueco-gratis { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--acento); }
.atrapada .equipo-precio { margin: 12px 0 0; font-size: 15px; font-weight: 700; }
.atrapada .equipo-precio b { color: var(--acento); font-weight: 900; }
.atrapada .equipo-precio s { opacity: .65; margin-left: 4px; font-weight: 400; }

/* Botones: «Seguir atrapando» en blanco; «Ver la mochila» con borde blanco. */
.atrapada .atrapada-acciones .boton:not(.boton-claro) { background: var(--blanco); color: var(--tinta); }
.atrapada .atrapada-acciones .boton-claro { background: transparent; color: #fff; border: 1px solid #fff; }
.atrapada .atrapada-acciones .boton[disabled] { opacity: .5; cursor: default; }

/* Movimiento reducido: sin animaciones en el bloque. */
@media (prefers-reduced-motion: reduce) {
  .atrapada *, .atrapada *::before, .atrapada *::after { animation: none !important; transition: none !important; }
}
html.quieto .atrapada *, html.quieto .atrapada *::before, html.quieto .atrapada *::after { animation: none !important; transition: none !important; }
/* La tapa es hija de .atrapada-equipo: la perspectiva va ahí para que se abra en 3D. */
.atrapada.es-pokedex .atrapada-equipo { perspective: 600px; }

/* Mochila: la versión de la bola, si no es la normal («Shiny»). */
.mochila-version {
  display: inline-block;
  margin: 2px 0 0;
  padding: 1px 8px;
  border-radius: var(--pildora);
  background: linear-gradient(120deg, #FFD23F, #FF5A4E, #9FE3FF);
  color: var(--tinta);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

/* ===== Móvil: cabecera en una fila y tarjeta «¡Atrapada!» apoyada abajo, 2026-11-04 ===== */

@media (max-width: 900px) {
  /* Cabecera de una sola fila (56 px): logo, menú que se desliza con el dedo, lupa y cesta.
     El menú se difumina en el borde derecho para avisar de que sigue; el ::after deja sitio para que lo último salga del difuminado. */
  body:not(#index):not(#checkout) #wrapper { padding-top: 122px; }
  #header .cabecera.cab { border-radius: 999px; }
  #header .cabecera.cab .cab-fila {
    padding: 6px 6px 6px 9px;
    column-gap: 6px;
    row-gap: 0;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "logo menu lupa cesta";
  }
  #header .cabecera.cab nav.menu {
    gap: 16px;
    padding: 2px 0 2px 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  }
  #header .cabecera.cab nav.menu::after { content: ""; flex: none; width: 10px; }
  /* Al tocar la lupa, el campo ocupa el sitio del menú, en la misma fila. */
  #header .cabecera.cab.buscando .cab-fila { grid-template-areas: "logo buscador lupa cesta"; }
  #header .cabecera.cab.buscando nav.menu { display: none !important; }

  /* Tarjeta: apoyada abajo (12 px) y nunca por encima de la cabecera (que acaba a 98 px); si no cabe, se desplaza por dentro
     sin arrastrar la página. En la página del 3x2 sigue encima de «Tu equipo». */
  .atrapada { --atrapada-abajo: 12px; bottom: var(--atrapada-abajo); overflow-y: auto; overscroll-behavior: contain; }
  body:has(#equipo) .atrapada { --atrapada-abajo: 140px; }
  .atrapada,
  .atrapada.es-pokedex { max-height: calc(100svh - 110px - var(--atrapada-abajo)); }
}

/* ===== Móvil: menú de tres rayas como Wituka (maqueta menu-segura.html), 2026-11-04 ===== */
/* Fuera de la media query: en el ordenador no se ve nada de esto. */
.cab-rayas { display: none; }
.mm[hidden], .mm-velo[hidden] { display: none; }
@media (min-width: 901px) { .mm, .mm-velo { display: none !important; } }
html.mm-abierto, html.mm-abierto body { overflow: hidden; }

@media (max-width: 900px) {
  /* Cabecera: rayas a la izquierda, logo centrado y iconos a la derecha. */
  #header .cabecera.cab .cab-fila { grid-template-columns: 1fr auto 1fr; grid-template-areas: "rayas logo iconos"; }
  #header .cabecera.cab.buscando .cab-fila { grid-template-columns: 1fr auto 1fr; grid-template-areas: "rayas logo iconos"; }
  #header .cabecera.cab nav.menu { display: none !important; }
  #header .cabecera.cab .cab-rayas {
    display: grid; place-items: center; grid-area: rayas; justify-self: start;
    width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--tinta); cursor: pointer;
  }
  .rayas { display: grid; gap: 5px; }
  .rayas i { display: block; width: 20px; height: 2px; border-radius: 1px; background: currentColor; }
  #header .cabecera.cab .cab-logo { grid-area: logo; justify-self: center; }
  #header .cabecera.cab .iconos { display: flex; grid-area: iconos; justify-self: end; align-items: center; gap: 0; }
  /* Buscador abierto: el campo tapa el logo, en la misma fila. */
  #header .cabecera.cab.buscando .buscador { position: absolute; left: 54px; right: 52px; top: 7px; z-index: 2; width: auto; }
  #header .cabecera.cab.buscando .cab-logo { visibility: hidden; }

  /* Velo detrás de la tarjeta. */
  .mm-velo { position: fixed; inset: 0; z-index: 97; background: rgba(17,17,17,.45); opacity: 0; transition: opacity .28s; }
  .mm-velo.abierto { opacity: 1; }

  /* Tarjeta blanca del menú. */
  .mm {
    position: fixed; inset: 10px; z-index: 98; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 22px 22px; background: #fff; color: var(--tinta); border-radius: 22px; box-shadow: 0 18px 50px rgba(0,0,0,.25);
    opacity: 0; transform: translateY(-10px) scale(.98); transition: opacity .28s var(--curva), transform .28s var(--curva);
  }
  .mm.abierto { opacity: 1; transform: none; }
  /* Fila de la X y el logo: fija arriba al desplazar dentro del menú (2026-11-05). La tarjeta no lleva margen
     interior arriba (los navegadores pegan lo «sticky» dentro de ese margen y dejarían asomar el contenido por
     encima): los 12 px los pone la propia fila, que llega de borde a borde para que su fondo blanco lo tape todo. */
  .mm-arriba {
    position: sticky; top: 0; z-index: 2; flex: none; background: #fff;
    margin: 0 -22px; padding: 12px 22px 0; box-sizing: border-box;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 64px;
  }
  .mm-cerrar { justify-self: start; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--tinta); cursor: pointer; }
  .mm-cerrar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .mm-logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
  .mm-logo img { height: 24px; width: auto; max-width: none; }
  .mm-bloque { margin-top: 24px; }
  .mm p { color: inherit; margin: 0; }

  /* Bloque del 3x2: título grande, frase y puntos. */
  .mm-grande { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 28px; font-weight: 800; line-height: 1.15; color: var(--tinta); }
  .mm-punto { display: block; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--acento); }
  .mm-frase { margin-top: 6px; font-size: 15px; color: var(--tinta-suave); }
  .mm-puntos { display: flex; gap: 6px; margin-top: 10px; }
  .mm-puntos i { display: block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--tinta); }
  .mm-puntos i.lleno { background: var(--acento); border-color: var(--acento); }

  /* Categorías, con su total a la derecha del nombre. */
  .mm-categorias { display: grid; }
  .mm-categorias a { display: flex; align-items: center; min-height: 42px; font-size: 19px; font-weight: 600; color: var(--tinta); }
  .mm-total { margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--tinta-suave); vertical-align: super; align-self: flex-start; margin-top: 8px; }

  /* Las últimas en llegar: fila que se desliza con el dedo. */
  .mm-ultimas[hidden] { display: none; }
  .mm-titulo { font-size: 13px; font-weight: 600; color: var(--tinta-suave); margin-bottom: 10px; }
  .mm-fila { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 22px; scrollbar-width: none; margin: 0 -22px; padding: 0 22px; }
  .mm-fila::-webkit-scrollbar { display: none; }
  .mm-bola { flex: none; width: 132px; scroll-snap-align: start; color: var(--tinta); }
  .mm-bola-foto { display: block; width: 132px; height: 150px; border: 1px solid var(--linea); border-radius: 12px; background: #fff; overflow: hidden; }
  .mm-bola-foto img { width: 100%; height: 100%; object-fit: contain; }
  .mm-bola-nombre { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mm-bola-precio { display: block; font-size: 13px; font-weight: 800; }
  /* Huecos grises mientras llega la lista (moderno.js, pintarNovedades): mismo tamaño que las de verdad. */
  .mm-bola.cargando .mm-bola-foto { border-color: transparent; background: #f0efec; animation: mm-latido 1.1s ease-in-out infinite alternate; }
  .mm-bola.cargando .mm-bola-nombre,
  .mm-bola.cargando .mm-bola-precio { height: 12px; margin-top: 8px; border-radius: 6px; background: #f0efec; }
  .mm-bola.cargando .mm-bola-nombre { width: 80%; }
  .mm-bola.cargando .mm-bola-precio { width: 40%; }
  @keyframes mm-latido { from { opacity: .55; } to { opacity: 1; } }
  html.quieto .mm-bola.cargando .mm-bola-foto { animation: none; }

  /* Pie: mi cuenta y teléfono, pegados abajo cuando sobra sitio. */
  .mm-pie { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--linea); display: grid; }
  .mm-categorias, .mm-ultimas { margin-bottom: 26px; }
  .mm-pie-enlace { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta); }
  .mm-pie-enlace svg { width: 20px; height: 20px; flex: none; }

  /* Foco con teclado: se marca solo al usar Tab. */
  .mm :focus:not(:focus-visible), .cab-rayas:focus:not(:focus-visible) { outline: none; }
  .mm-cerrar:focus-visible, .cab-rayas:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 50%; }
  .mm a:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }

  /* Entrada escalonada: cada hijo llega con un pequeño retraso (--i lo pone moderno.js). */
  .mm > * { opacity: 0; transform: translateY(8px); }
  .mm.abierto > * {
    opacity: 1; transform: none;
    transition: opacity .3s var(--curva), transform .3s var(--curva);
    transition-delay: calc(var(--i, 0) * 40ms);
  }

  /* Movimiento reducido: sin transiciones. */
  html.quieto .mm, html.quieto .mm > *, html.quieto .mm-velo { transition: none !important; }
  @media (prefers-reduced-motion: reduce) {
    html.quieto .mm, html.quieto .mm > *, html.quieto .mm-velo { transition: none !important; }
  }
}

/* ===== Buscador del móvil: texto de 16 px y sugerencias bajo la píldora, 2026-11-05 ===== */
@media (max-width: 900px) {
  /* Con la lupa abierta, el campo tiene 16 px (Safari no amplía la página al enfocarlo) y el texto empieza pegado a la izquierda. */
  #header .cabecera.cab.buscando #search_widget form input[type="text"] {
    font-size: 16px;
    padding: 0 6px 0 8px;
    text-align: left;
    min-width: 0;
    text-overflow: ellipsis;
  }
  #header .cabecera.cab.buscando #search_widget form input[type="text"]::placeholder { font-size: 16px; }

  /* Desplegable de sugerencias (jQuery UI, de ps_searchbar): una fila por producto, de borde a borde con 10 px de margen
     (jQuery UI pone left y width en línea; moderno.js lo coloca bajo la píldora y aquí se fuerza el ancho). */
  .searchbar-autocomplete.ui-autocomplete {
    z-index: 120;
    left: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: none;
    min-height: 0 !important; /* ps_searchbar.css le pone min-height: 100% por debajo de 768 px */
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    list-style: none;
  }
  .searchbar-autocomplete.ui-autocomplete li { list-style: none; }
  .searchbar-autocomplete.ui-autocomplete li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    color: var(--tinta);
    text-decoration: none;
  }
  .searchbar-autocomplete.ui-autocomplete .autocomplete-thumbnail {
    flex: none;
    width: 44px;
    height: 44px;
    object-fit: contain;
  }
  .searchbar-autocomplete.ui-autocomplete .product {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.25;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* ===== Hazlo shiny: enlace en la mochila y en la cesta, y recuadro de la página de contacto, 2026-11-05 ===== */
.hazlo-shiny {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border: 2px solid transparent;
  border-radius: var(--pildora);
  background: linear-gradient(var(--blanco), var(--blanco)) padding-box, linear-gradient(120deg, #FFD23F, #FF5A4E, #9FE3FF, #4CD964) border-box;
  color: var(--tinta);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.hazlo-shiny:hover,
.hazlo-shiny:focus-visible {
  background: linear-gradient(var(--tinta), var(--tinta)) padding-box, linear-gradient(120deg, #FFD23F, #FF5A4E, #9FE3FF, #4CD964) border-box;
  color: #fff;
}
.hazlo-shiny:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.mochila-item .hazlo-shiny { margin-top: 6px; }
.cart-item .hazlo-shiny { margin: 6px 0 4px; }

/* Recuadro de la página de contacto (aparece solo con ?shiny=, y [hidden] sigue ocultándolo). */
.hazlo-shiny-caja {
  margin: 0 0 24px;
  padding: 22px;
  border: 2px solid transparent;
  border-radius: 22px;
  background: linear-gradient(var(--blanco), var(--blanco)) padding-box, linear-gradient(120deg, #FFD23F, #FF5A4E, #9FE3FF, #4CD964) border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  color: var(--tinta);
}
.hazlo-shiny-etiqueta { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hazlo-shiny-titulo { margin: 4px 0 10px; font-size: 26px; font-weight: 800; line-height: 1.15; }
.hazlo-shiny-texto { margin: 0; font-size: 16px; }
.hazlo-shiny-pasos { counter-reset: paso; margin: 14px 0 0; padding: 0; list-style: none; font-size: 15px; }
.hazlo-shiny-pasos li { counter-increment: paso; position: relative; min-height: 26px; margin: 0 0 8px; padding: 2px 0 0 36px; }
.hazlo-shiny-pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tinta);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 26px;
  text-align: center;
}
.hazlo-shiny-telefono { margin: 14px 0 0; font-size: 15px; }
.hazlo-shiny-telefono a { font-weight: 800; }

/* ---------- Volver atrás (2026-11-05) ----------
   Al volver con «atrás», las fotos que quedan a la vista salen ya impresas, sin la animación «capa a capa» (moderno.js,
   sinAnimarALaVista). Va con !important porque las variantes «parpadeo» y «bote» tienen la misma especificidad. */
.capa.sin-animar,
.capa.sin-animar > .capa-contenido { animation: none !important; }
.capa.sin-animar > .capa-contenido { clip-path: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
.capa.sin-animar::after { display: none !important; }

/* Huecos grises del 3x2 mientras llega la lista (portada.js): el alto de un trío y de una tarjeta de verdad. */
.trio.hueco-cargando,
.con-boton.hueco-cargando { border-radius: 18px; background: #f0efec; animation: hueco-latido 1.1s ease-in-out infinite alternate; }
.trio.hueco-cargando { min-height: 263px; }
.con-boton.hueco-cargando { min-height: 473px; }
@media (max-width: 900px) {
  .trio.hueco-cargando { min-height: 294px; }
  .con-boton.hueco-cargando { min-height: 404px; }
}
@keyframes hueco-latido { from { opacity: .55; } to { opacity: 1; } }
html.quieto .hueco-cargando { animation: none; }

/* Contacto en el móvil (2026-11-05): el campo de adjuntar de verdad (bootstrap-filestyle lo esconde con clip) medía 362 px dentro
   de una columna de 288 y se salía: la página entera se hacía 39 px más ancha que el móvil (la cesta y la mochila quedaban cortadas).
   Se encoge; sigue funcionando, porque lo abre el botón «Seleccionar archivo». */
.contact-form #file-upload { left: 0 !important; width: 1px !important; height: 1px; }

/* ===== Buscador del ordenador: el texto dentro de la píldora, 2026-11-06 ===== */
@media (min-width: 901px) {
  /* ps_searchbar.css da 264 px mínimos a la caja del buscador y la píldora mide 170: la caja se ajusta a la píldora. */
  #header .cabecera.cab .buscador #search_widget { min-width: 0; }
  /* Fuera el hueco de 40 px que classic deja para su lupa: la nuestra ya va fuera del campo. */
  #header .cabecera.cab #search_widget form input[type="text"] { padding: 0; text-overflow: ellipsis; }
}

/* ===== La sexta, gratis: cinta bajo la píldora (maqueta sexta-segura.html), 2026-11-06 ===== */
/* Sale al llegar a 5 pokéballs (detalles.js, «La sexta, gratis»). El script pone top, left/right y --pico-x. */
.sexta-cinta { position: fixed; z-index: 93; width: 420px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 14px 16px;
  border-radius: 18px; background: var(--tinta); color: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
  animation: sexta-entra .45s ease-out backwards; }
.sexta-cinta[hidden] { display: none; }
.sexta-cinta::before { content: ""; position: absolute; top: -10px; left: var(--pico-x, 50%); margin-left: -10px;
  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid var(--tinta); }
.sexta-cinta.saliendo { animation: sexta-sale .25s ease-in forwards; }
@keyframes sexta-entra { from { clip-path: inset(0 0 100% 0 round 18px); } to { clip-path: inset(0 0 0 0 round 18px); } }
@keyframes sexta-sale { from { clip-path: inset(0 0 0 0 round 18px); } to { clip-path: inset(0 0 100% 0 round 18px); } }
.sexta-cinta .sexta-fila { display: flex; gap: 6px; align-items: flex-start; }
.sexta-cinta .sexta-celda { display: flex; flex-direction: column; align-items: center; gap: 3px; animation: sexta-hueco .3s ease-out backwards; }
@keyframes sexta-hueco { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sexta-cinta .sexta-hueco { position: relative; display: block; width: 34px; height: 34px; border-radius: 50%; background: #fff;
  border: 2px solid #fff; overflow: hidden; flex: none; box-sizing: border-box; }
.sexta-cinta .sexta-hueco img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); }
.sexta-cinta .sexta-hueco.libre { display: grid; place-items: center; overflow: visible; background: transparent; border: 2px dashed var(--acento);
  color: var(--acento); font-weight: 900; font-size: 15px; line-height: 1; }
.sexta-cinta .sexta-hueco.libre::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--acento);
  animation: sexta-late 1.4s ease-out infinite; }
@keyframes sexta-late { from { transform: scale(1); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.sexta-cinta .sexta-gratis { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--acento); }
.sexta-cinta p { color: #fff; }
.sexta-cinta .sexta-titulo { margin: 14px 0 0; font-size: 17px; font-weight: 900; line-height: 1.25; }
.sexta-cinta .sexta-texto { margin: 4px 0 0; font-size: 14px; line-height: 1.35; }
.sexta-cinta .sexta-nota { margin: 6px 0 0; font-size: 12px; color: rgba(255, 255, 255, .7); }
.sexta-cinta .boton, .sexta-cinta .boton:hover, .sexta-cinta .boton:focus { display: flex; align-items: center; justify-content: center;
  width: 100%; margin-top: 14px; background: #fff; color: var(--tinta); border: 0; text-decoration: none; }
.sexta-cinta .sexta-cerrar { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px;
  padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.sexta-cinta .sexta-cerrar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 900px) { .sexta-cinta { width: auto; } }
/* Movimiento reducido: sin animaciones. */
html.quieto .sexta-cinta, html.quieto .sexta-cinta *, html.quieto .sexta-cinta .sexta-hueco.libre::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sexta-cinta, .sexta-cinta *, .sexta-cinta .sexta-hueco.libre::after { animation: none !important; }
}

/* ===== Cursor encima y al pulsar: el rojo de la tienda (antes, el azul de classic, o negro), 2026-11-06 ===== */
/* Solo cambian esos estados: en reposo todo queda como estaba. «¡Atrápala!» conserva su pokéball partida. */
/* Enlaces de texto: menús de categorías del móvil y de la cabecera, iconos, pie, migas, cesta, pedido, contacto y cuenta.
   :where() no suma fuerza; los enlaces que son botones o píldoras tienen sus reglas más abajo. */
a:where(:not(.boton, .btn, .menu-3x2, .chip, .hazlo-shiny, .select-list, .dropdown-item)):is(:hover, :focus, :active),
#header a:where(:not(.boton, .btn, .menu-3x2, .chip)):is(:hover, :focus, :active),
#header .header-nav .blockcart a:is(:hover, :focus),
body#checkout a:where(:not(.boton, .btn)):is(:hover, :focus, :active),
.cart-grid-body a.label:is(:hover, :focus), .account-list a:is(:hover, :focus), .footer-container li a:is(:hover, :focus),
.page-my-account #content .links a:hover i, .btn-link:is(:hover, :focus), .page-link:is(:hover, :focus),
.dropdown-item:is(:hover, :focus), .dropdown:hover .expand-more, .btn-unstyle:focus .expand-more,
.top-menu a:is(:hover, :focus), .top-menu .sub-menu a:hover, #subcategories ul li .subcategory-name:hover,
.block-categories .collapse-icons :is(.add, .remove):hover, .block-categories .arrows :is(.arrow-right, .arrow-down):hover,
.product-miniature .highlighted-informations .quick-view:hover, .carousel .carousel-control :is(.icon-next, .icon-prev):hover i,
.search-widget form button[type="submit"] .search:hover, .search-widget form input[type="text"]:focus + button .search,
.migas a:is(:hover, :focus), .breadcrumb a:is(:hover, :focus) { color: var(--acento); }
a.text-primary:is(:hover, :focus) { color: var(--acento) !important; }
/* Píldora «3x2» del menú: roja también con el cursor o al pulsar (antes, negra). */
.menu a.menu-3x2:is(:hover, :focus, :active) { background: var(--acento); }
/* Píldoras de categorías (listado y página del 3x2) y filtros activos con «×»: rojas con letra blanca (antes, negras). */
.chip:is(:hover, :focus, :active), .grupo-chips .chip:is(:hover, :focus, :active),
#js-active-search-filters li > :is(a, button):is(:hover, :focus, :active) { background: var(--acento); border-color: var(--acento); color: #fff; }
/* «Ordenar por»: la opción con el cursor, roja (antes, azul). */
:is(.products-sort-order, .brands-sort, .suppliers-sort, .facet-dropdown) .select-list:is(:hover, :focus, :active) { background: var(--acento); color: #fff; }
/* «+» y «−» de la cesta y de la ficha (antes, gris). */
.bootstrap-touchspin .btn-touchspin:is(:hover, :focus, :active),
.compra .bootstrap-touchspin .btn:is(:hover, :focus, :active) { background: var(--acento); border-color: var(--acento); color: #fff; }
/* «Hazlo shiny»: relleno rojo con su borde de colores (antes, negro). */
.hazlo-shiny:is(:hover, :focus-visible, :active) {
  background: linear-gradient(var(--acento), var(--acento)) padding-box, linear-gradient(120deg, #FFD23F, #FF5A4E, #9FE3FF, #4CD964) border-box;
  color: #fff;
}
/* Botones de classic (p. ej. «Enviar» y «Seleccionar archivo» del contacto): rojos con el cursor o al pulsar (antes, azules). */
.btn-primary:is(:hover, :focus, :active, .active, .focus), .btn-primary:is(.disabled, :disabled):is(:hover, :focus),
.btn-outline-primary:is(:hover, :focus, :active), .group-span-filestyle .btn-default:is(:hover, :focus, :active),
.tag-primary[href]:is(:hover, :focus) { background-color: var(--acento); border-color: var(--acento); color: #fff; }
a.bg-primary:is(:hover, :focus) { background-color: var(--acento) !important; }
/* Pulsado y con el cursor encima a la vez: classic lo pone aún más oscuro (azul). */
:is(.btn-primary, .btn-outline-primary):is(:active, .active):is(:hover, :focus, .focus),
.open > :is(.btn-primary, .btn-outline-primary).dropdown-toggle:is(:hover, :focus, .focus) { background-color: var(--acento); border-color: var(--acento); color: #fff; }
.block-social ul li:hover { background-color: var(--acento); }
/* Recuadros para escribir: al pulsar dentro, borde y contorno rojos (antes, azules). */
.form-control:focus, .input-group.focus, .product-customization .product-message:focus,
.block_newsletter form input:is([type="text"], [type="email"]):focus { border-color: var(--acento); outline-color: var(--acento); }
.search-widget form input[type="text"]:focus { outline-color: var(--acento); }
/* Bordes azules de classic con el cursor encima. */
.tabs .nav-tabs .nav-link:hover { border-bottom-color: var(--acento); }
.product-images > li.thumb-container > .thumb:hover, #product-modal .modal-content .modal-body .product-images img:hover,
#subcategories ul li:hover .subcategory-image a { border-color: var(--acento); }

/* ===== Página del 3x2: cabecera sin promociones, 2026-11-06 ===== */
/* Alejandro: «en la cabecera que no ponga nada de las promociones, quien se meta en ese apartado ya sabe lo que hay».
   Las píldoras no se enseñan y el titular se oculta a la vista, pero se queda para buscadores y lectores de pantalla
   (la página necesita su h1). El texto sigue en el panel (Diseño > Páginas), por si se quiere recuperar. */
.p3x2-intro ul { display: none; }
.p3x2-intro h1 {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ===== «Crea tu equipo» (página, menú y barra de seis), 2026-11-06 ===== */
/* Titular de la página: el mismo aspecto que tenía el del 3x2, y visible. */
.pequipo-intro h1 { margin: 8px 0 0; font-size: clamp(34px, 4.6vw, 68px); font-weight: 900; letter-spacing: -.025em; line-height: .98; }
.pequipo-intro h1 em { font-family: var(--fuente); font-style: italic; font-weight: 400; letter-spacing: -.015em; }
#ver-mas-equipo[hidden] { display: none; }
/* Menú del ordenador: la píldora «Crea tu equipo» (misma que la del 3x2) se tambalea a destiempo. */
.menu a.menu-equipo { animation-delay: 2.5s; }
.menu a.menu-equipo .menu-equipo-texto { white-space: nowrap; }
/* Menú del móvil: el bloque va pegado al del 3x2, sin raya de separación arriba. */
.mm-bloque.mm-equipo { padding-top: 0; border-top: 0; }
/* Barra de seis: los huecos, más pequeños para que quepan seis; en el móvil, el texto debajo. */
.equipo-seis .equipo-hueco { width: 38px; height: 38px; }
.equipo-seis .equipo-huecos { gap: 5px; }
@media (max-width: 900px) {
  .equipo-seis { grid-template-columns: 1fr; grid-template-areas: "cabeza" "huecos" "texto"; }
  .equipo-seis .equipo-hueco { width: 40px; height: 40px; }
}
/* La cinta de la quinta ya no lleva la fila de huecos: el titular va arriba, sin pisar la X. */
.sexta-cinta .sexta-titulo { margin-top: 0; padding-right: 30px; }
/* En «Crea tu equipo» no aplica el 3x2: la tarjeta «¡Atrapada!» no enseña su línea. */
body:has(#pagina-equipo) .atrapada .atrapada-3x2 { display: none; }

/* ===== Mochila editable y catálogo ligero, 2026-11-06 ===== */
.aviso-equipo-seis { margin: 0 0 16px; padding: 16px; border: 2px solid var(--acento); border-radius: 14px;
  background: #fff5f3; color: var(--tinta); font-size: 15px; line-height: 1.5; }
.mochila { width: 440px; gap: 12px; overscroll-behavior: contain; }
.mochila-cabeza { position: sticky; top: -26px; z-index: 1; padding: 8px 0; background: var(--fondo); }
.mochila-estado { margin: 0; min-height: 22px; font-size: 14px; color: var(--tinta-suave); }
.mochila-estantes { gap: 0; }
.mochila .mochila-item { grid-template-columns: 64px minmax(0, 1fr); align-items: start; justify-items: stretch;
  gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--linea); text-align: left; }
.mochila .mochila-bola { width: 64px; height: 64px; }
.mochila-datos { min-width: 0; }
.mochila .mochila-nombre { margin: 0 0 6px; font-size: 15px; line-height: 1.3; }
.mochila .mochila-nombre, .mochila .mochila-precio { color: var(--tinta); }
.mochila .mochila-precio { margin: 6px 0; }
.mochila-controles { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mochila-controles button { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px;
  border: 1px solid var(--linea); border-radius: 99px; color: var(--tinta); background: var(--blanco); font: inherit; cursor: pointer; }
.mochila-controles button:is(:hover, :focus-visible, :active) { background: var(--acento); color: #fff; border-color: var(--acento); }
.mochila-controles .mochila-cantidad { min-width: 26px; text-align: center; font-size: 16px; font-weight: 700; }
.mochila-controles .mochila-borrar { margin-left: auto; font-size: 13px; }
.mochila .mochila-acciones { position: sticky; bottom: -28px; padding: 16px 0; background: var(--fondo); }
.mochila .mochila-acciones .boton { flex: 1 1 100%; }
/* La navegación por tipos ya está en las píldoras; evita también el bloque antiguo en HTML servido desde caché. */
.listado #subcategories { display: none; }
@media (max-width: 480px) {
  .mochila { padding: 20px 16px; }
  .mochila-cabeza { top: -20px; }
  .mochila .mochila-acciones { bottom: -20px; }
}