/* =====================================================================
   DeLEGOs · Tema visual "Hoja de instrucciones"
   Hoja de estilos añadida al final de la cascada (ver linkrels.php) para
   redecorar el sitio entero sin tocar el HTML/PHP heredado (salvo el
   bloque de bienvenida de index.php).

   Dirección: el sitio se lee como una lámina de instrucciones / ficha de
   inventario de LEGO — papel claro, contorno negro grueso, sombras duras
   sin difuminar, tipografía de catálogo técnico, notación "× cantidad".
   Nada de degradados, nada de esquinas muy redondeadas, nada de blur.
   ===================================================================== */

:root {
    --paper: #F1EFE7;
    --card: #ffffff;
    --ink: #111111;
    --muted: rgba(17, 17, 17, .56);
    --grid: rgba(17, 17, 17, .11);

    --red: #E31E24;
    --red-deep: #a11117;
    --yellow: #FFD400;
    --blue: #0056A8;
    --green: #0A7B45;

    --radius: 4px;
    --border: 2px solid var(--ink);
    --font-display: "Anton", "Arial Black", sans-serif;
    --font-ui: "Oswald", "Arial Narrow", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", "Consolas", "SFMono-Regular", "Courier New", monospace;
}

/* Evita que el padding/borde de los elementos que rediseñamos se sumen
   por fuera del ancho declarado (causa de desbordes como el marco de
   las fotos de producto saliéndose de la tarjeta). */
#cajaprincipal, #cajaprincipal *,
#footer, #footer *,
#licencia, #licencia * {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   Fondo general — papel de plano técnico
   --------------------------------------------------------------------- */

body {
    background-color: var(--paper);
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 34px 34px;
}

::selection { background: var(--yellow); color: var(--ink); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper); border-left: 1px solid var(--ink); }
::-webkit-scrollbar-thumb { background-color: var(--ink); border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background-color: var(--red); }

/* ---------------------------------------------------------------------
   Caja principal — la "lámina" de instrucciones
   --------------------------------------------------------------------- */

#cajaprincipal {
    position: relative;
    background-color: var(--card) !important;
    border: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: 10px 10px 0 var(--red) !important;
    width: 92% !important;
    max-width: 1180px !important;
    margin: 28px auto 40px auto !important;
    padding-top: 6px !important;
    counter-reset: dl-section;
}

#cajaprincipal::before {
    content: "N.\00b0 1";
    position: absolute;
    top: -3px;
    left: 24px;
    background: var(--ink);
    color: #fff;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 10px;
    z-index: 2;
}

@media screen and (max-width: 480px) {
    #cajaprincipal { box-shadow: 6px 6px 0 var(--red) !important; }
}

/* ---------------------------------------------------------------------
   Tipografía
   --------------------------------------------------------------------- */

.sublogo {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--muted) !important;
    font-family: var(--font-mono) !important;
    font-weight: 700 !important;
    font-size: .85rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase;
}

h2 {
    counter-increment: dl-section;
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 10px;
    background: transparent !important;
    color: var(--ink) !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: var(--font-ui) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    text-transform: uppercase;
    letter-spacing: -.2px;
    padding: 0 0 12px 0 !important;
    margin: 10px 0 22px 0 !important;
    border-bottom: 3px solid var(--ink) !important;
}

h2::before {
    counter-increment: none;
    content: "[ 0" counter(dl-section) " ]";
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: .8rem;
    color: var(--red);
    letter-spacing: 0;
}

h3 { color: var(--ink) !important; font-weight: 700; }

#tituloindex {
    display: flex;
    align-items: center;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-left: 6px solid var(--red);
    border-bottom: 2px dashed var(--ink);
    color: var(--ink) !important;
    text-align: left !important;
    font-family: var(--font-ui) !important;
    font-weight: 700 !important;
    font-size: 1.7rem !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 8px 0 12px 16px !important;
}

/* ---------------------------------------------------------------------
   Cabecera / buscador
   --------------------------------------------------------------------- */

#cabeceralogo .social { color: var(--red) !important; }

#buscador input,
#buscadormenu input,
#buscadorindex .busqueda {
    border-radius: 0 !important;
    border: var(--border) !important;
    background-color: #fff !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    font-family: var(--font-mono) !important;
}

#buscador input:focus,
#buscadormenu input:focus,
#buscadorindex .busqueda:focus {
    outline: none;
    background-color: #fff !important;
}

#buscador button.boton,
#buscadormenu button.boton {
    border-radius: 0 !important;
    border: var(--border) !important;
    border-left: 0 !important;
    background: var(--red) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------------
   Navegación principal — secuencia de pasos numerados
   --------------------------------------------------------------------- */

#bloquesindex,
#subbloquesindex {
    position: relative;
    background-color: var(--paper) !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 14px 10px !important;
    counter-reset: dl-nav;
}

#bloquesindex::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 6%;
    right: 6%;
    height: 2px;
    background-image: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 13px);
    z-index: 0;
}

#bloquesindex .bloque,
#subbloquesindex .bloque {
    counter-increment: dl-nav;
    position: relative;
    z-index: 1;
    display: inline-block;
    background-color: #fff !important;
    color: var(--ink) !important;
    border: var(--border) !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    box-shadow: 4px 4px 0 var(--ink);
    font-family: var(--font-ui) !important;
    font-weight: 600 !important;
    font-size: .82rem !important;
    letter-spacing: .5px;
    text-transform: uppercase;
    transition: transform .12s ease, box-shadow .12s ease;
}

#bloquesindex .bloque::before {
    content: "0" counter(dl-nav) " \2014 ";
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--red);
    margin-right: 2px;
}

#bloquesindex .bloque:hover,
#subbloquesindex .bloque:hover {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--ink);
    text-decoration: none !important;
    background-color: #fff !important;
}

#subbloquesindex .bloque {
    box-shadow: 3px 3px 0 var(--ink);
    font-size: .66rem !important;
}

#menumovil a.icon {
    background-color: var(--red);
    color: #fff !important;
    border-radius: 0;
    margin: 8px auto;
    display: inline-block !important;
    padding: 10px 24px !important;
    border: var(--border);
    box-shadow: 4px 4px 0 var(--ink) !important;
}

#menumovil a.icon:hover { background-color: var(--red-deep) !important; }

/* ---------------------------------------------------------------------
   Bienvenida (hero) — portada de la lámina de instrucciones
   --------------------------------------------------------------------- */

.dl-hero { padding: 34px 8px 10px 8px; }

.dl-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    border-bottom: 3px solid var(--ink);
    padding-bottom: 26px;
    margin-bottom: 22px;
}

.dl-hero-copy { flex: 1 1 420px; max-width: 640px; }

.dl-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--yellow);
    padding: 4px 10px;
    border: 2px solid var(--ink);
    margin-bottom: 16px;
}

.dl-hero h1 {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--ink);
    margin: 0 0 16px 0;
    text-wrap: balance;
    background: none;
    padding: 0;
    border-radius: 0;
}

.dl-hero h1 em { color: var(--red); font-style: normal; }

.dl-hero p {
    font-family: "Chilanka", sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--muted);
    max-width: 52ch;
    margin: 0 0 20px 0;
}

.dl-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }

.dl-hero-cta a {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 12px 20px;
    border: var(--border);
    text-decoration: none;
    box-shadow: 4px 4px 0 var(--ink);
    transition: transform .12s ease, box-shadow .12s ease;
}

.dl-hero-cta a:hover { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); text-decoration: none; }
.dl-hero-cta .principal { background: var(--red); color: #fff; }
.dl-hero-cta .secundaria { background: #fff; color: var(--ink); }

.dl-hero-art { flex: 0 0 200px; display: flex; justify-content: center; align-items: flex-start; }

.dl-badge {
    width: 148px;
    height: 148px;
    border: 3px solid var(--ink);
    border-radius: 50%;
    background: var(--yellow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: rotate(-8deg);
    box-shadow: 6px 6px 0 var(--ink);
    font-family: var(--font-ui);
    color: var(--ink);
    text-transform: uppercase;
}

.dl-badge strong { font-family: var(--font-ui); font-weight: 700; font-size: 1.9rem; line-height: 1; }
.dl-badge span { font-family: var(--font-mono); font-size: .62rem; letter-spacing: 1px; margin-top: 4px; font-weight: 700; }

/* "Contenido de la caja" — tira de inventario */

.dl-hero-inventario {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}

.dl-inv-titulo {
    flex: 0 0 100%;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: -2px;
}

.dl-inv-item {
    flex: 1 1 140px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 2px dashed var(--ink);
    padding: 10px 14px;
    background: var(--paper);
}

.dl-inv-item .cantidad {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--red);
    min-width: 46px;
}

.dl-inv-item .etiqueta {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--ink);
}

@media screen and (max-width: 640px) {
    .dl-hero-art { display: none; }
}

/* ---------------------------------------------------------------------
   Mosaico de secciones (portada) — fichas de pieza
   --------------------------------------------------------------------- */

.mosaicosecciones .bloqueg,
.mosaicosecciones .bloquem,
.mosaicosecciones .bloquep,
.mosaicosecciones .bloquen {
    position: relative;
    background-color: var(--card) !important;
    border: var(--border) !important;
    border-radius: 0 !important;
    box-shadow: 5px 5px 0 var(--ink);
    padding: 22px 12px 16px 12px !important;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

.mosaicosecciones .bloqueg::after,
.mosaicosecciones .bloquem::after,
.mosaicosecciones .bloquep::after,
.mosaicosecciones .bloquen::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent var(--tab, var(--red)) transparent transparent;
}

.mosaicosecciones .bloqueg:nth-child(5n+1),
.mosaicosecciones .bloquem:nth-child(5n+1),
.mosaicosecciones .bloquep:nth-child(5n+1),
.mosaicosecciones .bloquen:nth-child(4n+1) { --tab: var(--red); }
.mosaicosecciones .bloqueg:nth-child(5n+2),
.mosaicosecciones .bloquem:nth-child(5n+2),
.mosaicosecciones .bloquep:nth-child(5n+2),
.mosaicosecciones .bloquen:nth-child(4n+2) { --tab: var(--blue); }
.mosaicosecciones .bloqueg:nth-child(5n+3),
.mosaicosecciones .bloquem:nth-child(5n+3),
.mosaicosecciones .bloquep:nth-child(5n+3),
.mosaicosecciones .bloquen:nth-child(4n+3) { --tab: var(--yellow); }
.mosaicosecciones .bloqueg:nth-child(5n+4),
.mosaicosecciones .bloquem:nth-child(5n+4),
.mosaicosecciones .bloquep:nth-child(5n+4),
.mosaicosecciones .bloquen:nth-child(4n+4) { --tab: var(--green); }
.mosaicosecciones .bloqueg:nth-child(5n+5),
.mosaicosecciones .bloquem:nth-child(5n+5),
.mosaicosecciones .bloquep:nth-child(5n+5) { --tab: #7a4fb0; }

.mosaicosecciones .bloqueg:hover,
.mosaicosecciones .bloquem:hover,
.mosaicosecciones .bloquep:hover,
.mosaicosecciones .bloquen:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--ink);
}

.mosaicosecciones .iconog,
.mosaicosecciones .iconom,
.mosaicosecciones .iconop,
.mosaicosecciones .iconon {
    color: var(--ink) !important;
}

.mosaicosecciones .secciong,
.mosaicosecciones .seccionm,
.mosaicosecciones .seccionp,
.mosaicosecciones .seccionn {
    font-family: var(--font-ui) !important;
    font-weight: 600 !important;
    letter-spacing: -.2px;
    text-transform: uppercase;
    color: var(--ink) !important;
}

/* Bloques de estadísticas */
.mosaicosecciones .bloquestat,
.mosaicosecciones .bloquestatg,
.mosaicosecciones .cuadrostat {
    border: 2px dashed var(--ink) !important;
    border-radius: 0 !important;
    background-color: var(--card) !important;
    box-shadow: none;
    transition: background-color .15s ease;
}

.mosaicosecciones .bloquestat:hover,
.mosaicosecciones .bloquestatg:hover,
.mosaicosecciones .cuadrostat:hover {
    background-color: var(--yellow) !important;
}

.mosaicosecciones .numstat {
    font-family: var(--font-mono);
    color: var(--red) !important;
}

.mosaicosecciones .iconostat { color: var(--ink) !important; }

/* ---------------------------------------------------------------------
   Mosaico de sets / piezas — fichas de inventario con contador "×"
   --------------------------------------------------------------------- */

.mosaicojuego {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.6rem !important;
}

@media screen and (max-width: 900px) {
    .mosaicojuego { grid-template-columns: repeat(2, 1fr) !important; }
}

@media screen and (max-width: 520px) {
    .mosaicojuego { grid-template-columns: 1fr !important; }
}

.mosaicojuego .td,
.mosaicojuego .td2,
.mosaicojuego .td4 {
    position: relative;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    background-color: var(--card) !important;
    border: var(--border) !important;
    border-radius: 0 !important;
    box-shadow: 5px 5px 0 var(--ink);
    padding: 16px !important;
    transition: transform .15s ease, box-shadow .15s ease;
}

.mosaicojuego .td::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 18px 18px 0;
    border-color: transparent var(--tab, var(--red)) transparent transparent;
}

.mosaicojuego .td:nth-child(4n+1) { --tab: var(--red); }
.mosaicojuego .td:nth-child(4n+2) { --tab: var(--blue); }
.mosaicojuego .td:nth-child(4n+3) { --tab: var(--yellow); }
.mosaicojuego .td:nth-child(4n+4) { --tab: var(--green); }

.mosaicojuego .td:hover,
.mosaicojuego .td2:hover,
.mosaicojuego .td4:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--ink);
}

.mosaicojuego .divportada {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 170px;
    overflow: hidden;
    border: 2px solid var(--ink);
    padding: 8px;
    margin-bottom: 14px;
    background: var(--card);
}

.mosaicojuego .divportada a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.mosaicojuego .portada {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    display: block;
    transition: transform .3s ease;
}

.mosaicojuego .td:hover .portada { transform: scale(1.05); }

.mosaicojuego .juego {
    display: inline-block;
    font-family: var(--font-ui) !important;
    background-color: transparent !important;
    color: var(--ink) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.1rem !important;
    line-height: 1.3;
    letter-spacing: .1px;
    margin-top: 4px;
}

.mosaicojuego .estudio {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 4px 11px;
    background: rgba(0, 86, 168, .07);
    border: 1.5px solid var(--blue);
    color: var(--blue) !important;
    font-family: var(--font-ui) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: .72rem !important;
    transition: background-color .15s ease, color .15s ease;
}

.mosaicojuego .estudio:hover {
    background: var(--blue);
    color: #fff !important;
    text-decoration: none;
}

.mosaicojuego .ano {
    display: inline-block !important;
    background: var(--card);
    border: 2px solid var(--ink);
    color: var(--ink) !important;
    border-radius: 0;
    padding: 3px 12px;
    font-family: var(--font-mono) !important;
    font-size: .85rem !important;
    margin-top: 8px;
}

.infoblancamini {
    display: inline-block;
    background: var(--ink) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-family: var(--font-mono) !important;
    font-size: .82rem !important;
    padding: 4px 12px !important;
    margin-top: 8px;
}

.infoblancamini::before { content: "\00d7 "; color: var(--yellow); font-weight: 700; }

/* ---------------------------------------------------------------------
   Cuadros informativos
   --------------------------------------------------------------------- */

.infoazul, .cuadrodatosazul {
    background-color: var(--ink) !important;
    border-radius: 0 !important;
}

.cuadrodatos, .cuadrodatosgrande, .cuadrodatosmini {
    border-radius: 0 !important;
    border: 2px dashed var(--ink) !important;
    background-color: var(--paper) !important;
}

.pretitulo, .pretituloindex {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-ui) !important;
    font-weight: 700 !important;
    font-size: .78rem !important;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 6px 13px !important;
    border-radius: 0 !important;
    border-width: 2px !important;
    border-style: solid !important;
    opacity: 1 !important;
}

.pretitulo {
    color: var(--red) !important;
    border-color: var(--red) !important;
    background: rgba(227, 30, 36, .06);
}

.pretituloindex {
    color: var(--ink) !important;
    border-color: var(--ink) !important;
    background: rgba(17, 17, 17, .04);
}

.cuadroficha {
    border-radius: 0 !important;
    border-width: 2px !important;
}

.boton, .botongrande, .enlaceaviso {
    font-family: var(--font-ui) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    border: var(--border) !important;
    border-radius: 0 !important;
    background-color: var(--red) !important;
    box-shadow: 4px 4px 0 var(--ink) !important;
    transition: transform .12s ease, box-shadow .12s ease;
}

.boton:hover, .botongrande:hover, .enlaceaviso:hover {
    background-color: var(--red) !important;
    color: #fff !important;
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--ink) !important;
}

/* ---------------------------------------------------------------------
   Pie de página — reverso de la lámina
   --------------------------------------------------------------------- */

#footer {
    position: relative;
    box-sizing: border-box;
    width: 92%;
    max-width: 1180px;
    background-color: var(--paper);
    color: var(--ink);
    border: 2px solid var(--ink);
    border-top: 3px dashed var(--ink);
    border-radius: 0;
    padding: 2rem 1.5rem 1.4rem 1.5rem;
    margin: 1.4rem auto 0 auto;
    font-family: var(--font-mono);
    font-size: .82rem;
}

#footer a {
    color: var(--ink) !important;
    border-bottom: 2px solid var(--red);
    text-decoration: none;
    font-weight: 700;
}

#footer .by,
#footer span,
#footer .proyecto {
    color: var(--ink) !important;
}

#footer a:hover { color: var(--red) !important; }

/* Licencia / política de privacidad — el texto venía en blanco,
   pensado para el antiguo fondo rojo oscuro; sobre el papel claro
   actual quedaba prácticamente invisible. */

#licencia {
    box-sizing: border-box;
    width: 92%;
    max-width: 1180px;
    margin: 0 auto !important;
    padding: 1.2rem 1.5rem !important;
    background-color: var(--paper);
    border: 2px solid var(--ink);
    border-top: 0;
    font-family: var(--font-mono);
    font-size: .78rem;
}

#licencia a,
#licencia .licencia,
#licencia a.licencia {
    color: var(--ink) !important;
}

#licencia a:hover { color: var(--red) !important; }

/* ---------------------------------------------------------------------
   Cajita de cookies
   --------------------------------------------------------------------- */

#cajacookies {
    border-top: 3px solid var(--ink) !important;
    box-shadow: none !important;
    background-color: var(--paper) !important;
    font-family: "Chilanka", sans-serif !important;
}

#cajacookies button {
    font-family: var(--font-ui) !important;
    text-transform: uppercase;
    border-radius: 0 !important;
    border: 2px solid var(--ink) !important;
    box-shadow: 3px 3px 0 var(--ink);
}

#iconocookies {
    box-shadow: none !important;
    background-color: var(--card) !important;
    border: 2px solid var(--ink) !important;
    border-radius: 0 !important;
}

/* ---------------------------------------------------------------------
   Ficha de set / pieza individual
   --------------------------------------------------------------------- */

#titulojuego {
    font-family: var(--font-ui) !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    text-transform: uppercase;
    line-height: 1.25;
    background-color: var(--ink) !important;
    border-radius: 0 !important;
}

#cabecerajuego .estudio,
#cabecerajuego .estudio2 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(0, 86, 168, .07) !important;
    border: 1.5px solid var(--blue) !important;
    border-radius: 0 !important;
    font-family: var(--font-ui) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--blue) !important;
    transition: background-color .15s ease, color .15s ease;
}

#cabecerajuego .estudio:hover,
#cabecerajuego .estudio2:hover {
    background: var(--blue) !important;
    color: #fff !important;
    text-decoration: none;
}

#cabecerajuego .ano {
    background: var(--yellow) !important;
    border-radius: 0 !important;
    font-family: var(--font-mono) !important;
    color: var(--ink) !important;
}

#navjuego .bloque,
#navjuego .bloquemarcado {
    background-color: var(--card) !important;
    border: 2px solid var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform .12s ease, box-shadow .12s ease;
}

#navjuego .bloquemarcado { background-color: var(--red) !important; }

#navjuego .bloque:hover,
#navjuego .bloquemarcado:hover {
    background-color: var(--red) !important;
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
}

#navjuego .seccion,
#navjuego .icono {
    color: var(--ink) !important;
    font-family: var(--font-ui) !important;
    font-weight: 600;
}

#navjuego .bloquemarcado .seccion,
#navjuego .bloquemarcado .icono,
#navjuego .bloque:hover .seccion,
#navjuego .bloque:hover .icono {
    color: #fff !important;
}

#infojuego {
    font-family: "Chilanka", sans-serif !important;
}

#datosjuego {
    border: 2px dashed var(--ink) !important;
    border-radius: 0 !important;
    color: var(--muted) !important;
    font-family: var(--font-mono) !important;
}

.etiquetas .divetiqueta {
    border: 2px solid var(--ink) !important;
    border-radius: 0 !important;
}

.etiquetas .divetiqueta:hover { background: var(--red) !important; }

.etiquetas .icono, .etiquetas .iconosub { color: var(--ink) !important; }

.etiquetas .etiqueta, .etiquetas .subetiqueta {
    font-family: var(--font-mono) !important;
    color: var(--ink) !important;
}

.etiquetas .marcada {
    background: var(--red) !important;
}

#opiniondevuego {
    background: var(--paper) !important;
    border: 2px dashed var(--ink) !important;
    border-radius: 0 !important;
}

/* Subtítulos de bloques dentro de una ficha (Información, Etiquetas,
   Enlaces útiles, Compartir...) */

h3 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-ui) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-bottom: 2px dashed var(--ink) !important;
    padding: 0 0 8px 0 !important;
}

h3::before {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    background: var(--red);
}

h4 {
    font-family: var(--font-ui) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    background: var(--paper) !important;
    color: var(--ink) !important;
    border-radius: 0 !important;
    border-left: 4px solid var(--red);
}

/* Portada grande de la ficha de set/pieza */

#portada {
    display: inline-block;
    background: var(--card);
    border: 3px solid var(--ink);
    box-shadow: 8px 8px 0 var(--red);
    padding: 16px;
}

#portada img { display: block; }

/* Redes / compartir */

#redes, #bio {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#redes a, #bio a.enlace {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0 !important;
    background: var(--card);
    border: 2px solid var(--ink);
    opacity: 1 !important;
    transition: background-color .15s ease, transform .15s ease;
}

#redes a:hover, #bio a.enlace:hover {
    background: var(--red);
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--ink);
}

#redes .social, #bio .social {
    font-size: 1.3rem !important;
    color: var(--ink) !important;
    opacity: 1 !important;
    padding: 0 !important;
}

#redes a:hover .social, #bio a.enlace:hover .social {
    color: #fff !important;
}

/* Migas de pan */

#breadcrumb {
    border-top: 3px dashed var(--ink) !important;
}

#breadcrumb a {
    font-family: var(--font-mono) !important;
    font-size: .78rem !important;
    background-color: var(--card) !important;
    color: var(--ink) !important;
    border: 2px solid var(--ink);
    border-radius: 0 !important;
    padding: 4px 10px !important;
}

#breadcrumb a:hover {
    background-color: var(--red) !important;
    color: #fff !important;
}

#breadcrumb .separador {
    color: var(--ink) !important;
}

/* Índice alfabético */

#letras .bloqueletra,
#letras .bloqueletrado {
    background-color: var(--card) !important;
    border: 2px solid var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform .12s ease, box-shadow .12s ease;
}

#letras .bloqueletrado { background-color: var(--red) !important; }

#letras .bloqueletra:hover {
    background-color: var(--red) !important;
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
}

#letras .aletra, #letras .subletra, #letras .letra {
    font-family: var(--font-display) !important;
    color: var(--ink) !important;
}

#letras .bloqueletrado .aletra,
#letras .bloqueletrado .subletra,
#letras .bloqueletra:hover .aletra,
#letras .bloqueletra:hover .subletra {
    color: #fff !important;
}

/* Paginación */

.flecha, .flechamed, .volver {
    font-family: var(--font-mono) !important;
    color: var(--ink) !important;
}

.flecha:hover, .flechamed:hover, .volver:hover { color: var(--red) !important; }

/* ---------------------------------------------------------------------
   Explorador de sets (formulario de filtros en portada)
   --------------------------------------------------------------------- */

.dl-explorador {
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: var(--card);
    border: 3px solid var(--ink);
    box-shadow: 8px 8px 0 var(--red);
    padding: 20px;
}

.dl-explorador-grupo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 2px dashed var(--ink);
}

.dl-explorador-grupo:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

.prefiltro {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ink);
    min-width: 110px;
}

.prefiltro em { color: var(--red); }

/* Barra de filtro simple (p.ej. /piezas/) */
#filtrotema {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: var(--card);
    border: 2px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    padding: 12px 16px;
    margin: 14px 0;
}

#filtrotema form { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.dl-explorador .dl-label {
    font-family: var(--font-mono);
    font-size: .74rem;
    color: var(--muted);
}

.dl-explorador .dl-radio {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--ink);
}

.filtro, .filtrog {
    font-family: var(--font-mono) !important;
    font-size: .85rem !important;
    color: var(--ink) !important;
    background: var(--paper) !important;
    border: 2px solid var(--ink) !important;
    border-radius: 0 !important;
    padding: 6px 10px !important;
}

.filtro:focus, .filtrog:focus {
    outline: none;
    border-color: var(--red) !important;
}

.filtro { width: 100px; }
.filtrog { min-width: 170px; }

@media screen and (max-width: 640px) {
    .dl-explorador-grupo { flex-direction: column; align-items: stretch; }
    .filtrog, .filtro { width: 100%; }
}