/* Estilos que comparten la portada de la tienda, las categorias y las fichas. */
.disposicion{display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start;padding:30px 0 60px}
.lateral{position:sticky;top:calc(var(--barra-alto) + 22px);display:flex;flex-direction:column;gap:8px}
.cat{
  display:flex;align-items:center;gap:12px;width:100%;
  background:rgba(28,25,50,.66);border:1px solid rgba(83,87,130,.3);color:var(--texto-2);
  padding:13px 15px;border-radius:12px;font-weight:600;font-size:15px;transition:.16s;
}
.cat:hover{border-color:var(--azul-claro);color:var(--texto)}
.cat.on{background:linear-gradient(135deg,var(--azul),var(--azul-hondo));
  border-color:transparent;color:#fff;box-shadow:0 10px 26px rgba(70,82,239,.32)}
.cat img{width:26px;height:26px;object-fit:contain;flex:0 0 auto}
.cat .n{margin-left:auto;font-size:12px;font-weight:800;opacity:.7}

.cabecera{margin-bottom:22px}
.cabecera h1{font-size:clamp(30px,4.2vw,42px)}
.cabecera p{color:var(--texto-2);margin-top:9px;max-width:660px}
.migas{font-size:14px;color:var(--texto-2);margin-bottom:12px}
.migas a:hover{color:var(--texto)}

/* El aviso de cada categoria: lo primero que se lee antes de ver precios */
.aviso-cat{
  background:linear-gradient(150deg,rgba(37,35,99,.5),rgba(28,25,50,.9));
  border:1px solid rgba(113,136,244,.34);border-radius:16px;padding:22px 24px;margin-bottom:26px;
}
.aviso-cat h2{font-size:19px;margin-bottom:10px}
.aviso-cat p{color:var(--texto-2);font-size:15px;margin-bottom:12px;max-width:74ch}
.aviso-cat ul{list-style:none;display:flex;flex-direction:column;gap:8px;
  color:var(--texto-2);font-size:14.5px;max-width:74ch}
/* El punto va con position:absolute y NO con flex. Con `display:flex` en el <li>,
   cada <b>, <code> o <a> de dentro se convertia en un elemento suelto separado por el
   hueco del flex, y las frases salian partidas: "nombre de Minecraft   exacto   al
   pagar". Asi el texto se queda corrido como debe. */
.aviso-cat li{position:relative;padding-left:15px}
.aviso-cat li::before{content:"";position:absolute;left:0;top:9px;
  width:5px;height:5px;border-radius:1px;background:var(--azul-claro)}

.seccion-titulo{display:flex;align-items:center;gap:14px;margin:34px 0 16px}
.seccion-titulo:first-of-type{margin-top:0}
.seccion-titulo h2{font-size:22px;white-space:nowrap}
.seccion-titulo::after{content:"";flex:1;height:1px;background:rgba(83,87,130,.34)}

.parrilla{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(285px,1fr))}
.producto{
  background:linear-gradient(158deg,rgba(28,25,50,.94),rgba(17,14,36,.94) 76%);
  border:1px solid rgba(83,87,130,.34);border-radius:16px;padding:24px;
  display:flex;flex-direction:column;gap:14px;position:relative;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.producto:hover{transform:translateY(-4px);border-color:rgba(113,136,244,.55);box-shadow:var(--sombra)}
.producto.destacado{border-color:rgba(226,198,88,.5)}
.producto.destacado::before{
  content:"Más elegido";position:absolute;top:-11px;left:24px;
  background:linear-gradient(135deg,var(--oro),#c9a832);color:#2a2205;
  font-size:10px;font-weight:900;letter-spacing:.1em;padding:5px 12px;
  border-radius:99px;text-transform:uppercase;z-index:3;
}
.producto-cabeza{display:flex;align-items:center;gap:15px}
.producto-cabeza img{width:58px;height:58px;object-fit:contain;flex:0 0 auto}
.producto h3{font-size:20px;font-weight:800}
.producto .duracion{font-size:12px;color:var(--hielo);font-weight:600;margin-top:3px}
.producto .desc{font-size:14.5px;color:var(--texto-2)}
.beneficios{list-style:none;display:flex;flex-direction:column;gap:7px;
  font-size:14px;color:var(--texto-2);flex:1}
.beneficios li{position:relative;padding-left:14px}
.beneficios li::before{content:"";position:absolute;left:0;top:8px;
  width:5px;height:5px;border-radius:1px;background:var(--azul-claro)}
.precio{font-size:26px;font-weight:900;letter-spacing:-.03em;display:flex;
  align-items:baseline;gap:7px;flex-wrap:wrap}
.precio .cop{font-size:12px;font-weight:700;color:var(--texto-2);letter-spacing:.06em}
/* En oferta: el de antes tachado y pequeño, para que se vea lo que se ahorra sin
   que le quite protagonismo al que se paga. */
.precio s{font-size:15px;font-weight:700;color:var(--texto-2);opacity:.7;
  text-decoration-thickness:2px}
.precio.en-oferta .ahora{color:var(--oro)}
.precio .dto{
  font-size:11px;font-weight:900;letter-spacing:.04em;
  background:linear-gradient(135deg,var(--oro),#c9a832);color:#2a2205;
  padding:3px 8px;border-radius:99px;
}
.producto-pie{display:flex;align-items:center;gap:10px;
  padding-top:16px;border-top:1px solid rgba(83,87,130,.24)}
.producto-pie .boton{flex:1;justify-content:center}
/* Toda la tarjeta lleva a la ficha, pero el boton de anadir tiene que ganarle. */
.tapa{position:absolute;inset:0;z-index:1;border-radius:16px}
.producto>*:not(.tapa){position:relative;z-index:2}

@media(max-width:900px){
  .disposicion{grid-template-columns:1fr;gap:20px}
  .lateral{position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
  .cat{width:auto;white-space:nowrap;flex:0 0 auto}
  .cat .n{margin-left:8px}
}

/* Igual que en la wiki: un hijo de cuadricula no se encoge por debajo de su contenido
   si no se le dice, y el texto acaba cortado por la derecha en pantallas estrechas. */
@media(max-width:900px){
  .disposicion > *{min-width:0}
  .aviso-cat li,.beneficios li,.desc{overflow-wrap:anywhere}
}