/* ── IMPORTACIÓN DE FUENTES ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── VARIABLES CSS ───────────────────────────────────────── */
:root {
  --verde-nvidia: #76B900;
  --verde-oscuro: #5a8f00;
  --verde-claro: #a0d900;
  --negro: #0a0a0a;
  --negro-card: #111111;
  --negro-panel: #161616;
  --gris-oscuro: #1e1e1e;
  --gris-medio: #2a2a2a;
  --gris-borde: #333333;
  --gris-texto: #aaaaaa;
  --blanco: #f0f0f0;
  --blanco-puro: #ffffff;
  --rojo-reset: #e53935;
  --rojo-reset-hover: #c62828;
  --sombra-verde: 0 0 20px rgba(118, 185, 0, 0.25);
  --sombra-card: 0 4px 24px rgba(0, 0, 0, 0.5);
  --radio: 8px;
  --radio-grande: 14px;
  --fuente-titulo: 'Barlow Condensed', sans-serif;
  --fuente-texto: 'DM Sans', sans-serif;
  --transicion: 0.25s ease;
}

/* ── RESET Y BASE ────────────────────────────────────────── */
/* Reset general de márgenes, padding y box model */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Scroll suave para los enlaces ancla (#inicio, #catalogo...) */
html {
  scroll-behavior: smooth;
}

/* Compensa la altura del header sticky para que los anclas
   no queden tapados por la cabecera al hacer scroll */
[id] {
  scroll-margin-top: 110px;
}

body {
  background-color: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente-texto);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;

  /* Textura sutil de puntos en el fondo */
  background-image: radial-gradient(circle, #1a1a1a 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Animación de entrada general para toda la página */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glowPulse {

  0%,
  100% {
    box-shadow: var(--sombra-verde);
  }

  50% {
    box-shadow: 0 0 35px rgba(118, 185, 0, 0.45);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── TIPOGRAFÍA BASE ─────────────────────────────────────── */
h1,
h2,
h3,
h4 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.1;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
}

h3 {
  font-size: clamp(1rem, 2vw, 1.4rem);
}

p {
  color: var(--gris-texto);
}

a {
  color: var(--verde-nvidia);
  text-decoration: none;
  transition: color var(--transicion);
}

a:hover {
  color: var(--verde-claro);
}

code {
  background: var(--gris-medio);
  color: var(--verde-nvidia);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.85em;
}

/* ── HEADER ──────────────────────────────────────────────── */
/* Cabecera principal con gradiente y línea verde inferior */
header {
  background: linear-gradient(160deg, #111111 0%, #0d0d0d 60%, #0a1200 100%);
  border-bottom: 3px solid var(--verde-nvidia);
  padding: 2rem 2rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
  animation: fadeInUp 0.5s ease;
}

/* Flexbox para poner logo+texto a la izquierda y nav a la derecha */
header>* {
  max-width: 1400px;
  margin: 0 auto;
}

header h1 {
  color: var(--blanco-puro);
  text-transform: uppercase;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
}

/* Acento verde en la primera palabra del h1 */
header h1 span,
header h1::first-line {
  color: var(--verde-nvidia);
}

header p {
  color: var(--gris-texto);
  font-size: 0.95rem;
  margin-top: 0.3rem;
}

/* ── NAV ─────────────────────────────────────────────────── */
/* Navegación horizontal con Flexbox */
nav {
  margin-top: 1rem;
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

nav ul li a {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  color: var(--gris-texto);
  font-family: var(--fuente-titulo);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radio);
  transition: all var(--transicion);
}

nav ul li a:hover {
  color: var(--verde-nvidia);
  border-color: var(--verde-nvidia);
  background: rgba(118, 185, 0, 0.08);
}

/* Enlace "Salir" con estilo diferente */
nav ul li:last-child a {
  background: var(--verde-nvidia);
  color: var(--negro);
  font-weight: 700;
  border-color: var(--verde-nvidia);
}

nav ul li:last-child a:hover {
  background: var(--verde-claro);
  border-color: var(--verde-claro);
  color: var(--negro);
}

/* ── BARRA DE HERRAMIENTAS (búsqueda + orden) ────────────── */
.barra-busqueda,
.barra-orden {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.barra-busqueda label,
.barra-orden label {
  color: var(--gris-texto);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Input de búsqueda */
#input-busqueda {
  flex: 1;
  background: var(--gris-oscuro);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  color: var(--blanco);
  padding: 0.55rem 1rem;
  font-family: var(--fuente-texto);
  font-size: 0.9rem;
  transition: border-color var(--transicion), box-shadow var(--transicion);
  outline: none;
}

#input-busqueda:focus {
  border-color: var(--verde-nvidia);
  box-shadow: 0 0 0 3px rgba(118, 185, 0, 0.15);
}

#input-busqueda::placeholder {
  color: #555;
}

/* Select de ordenación */
#select-orden {
  background: var(--gris-oscuro);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  color: var(--blanco);
  padding: 0.55rem 1rem;
  font-family: var(--fuente-texto);
  font-size: 0.9rem;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transicion);
}

#select-orden:focus {
  border-color: var(--verde-nvidia);
}

/* ── LAYOUT PRINCIPAL: Flexbox (aside + main) ────────────── */
.contenedor-principal {
  display: flex;
  gap: 1.5rem;
  max-width: 1400px;
  margin: 2rem auto;
  padding: 0 1.5rem;
  animation: fadeInUp 0.6s ease 0.1s both;
}

/* ── ASIDE: Panel de filtros ─────────────────────────────── */
.panel-filtros {
  flex: 0 0 220px;
  background: var(--negro-panel);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-grande);
  padding: 1.5rem;
  height: fit-content;

  /* Se queda fijo al hacer scroll */
  position: sticky;
  top: 120px;

  animation: slideInLeft 0.5s ease 0.2s both;
}

.panel-filtros h2 {
  color: var(--verde-nvidia);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--gris-borde);
}

/* Grupos de filtros (serie, uso...) */
#botones-filtro-serie,
#botones-filtro-uso {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

/* ── BOTONES DE FILTRO ───────────────────────────────────── */
/* Estilos para los botones generados por JavaScript */
.btn-filtro {
  padding: 0.45rem 0.8rem;
  background: var(--gris-medio);
  color: var(--gris-texto);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  cursor: pointer;
  font-family: var(--fuente-texto);
  font-size: 0.82rem;
  font-weight: 500;
  text-align: left;
  transition: all var(--transicion);
}

.btn-filtro:hover {
  background: var(--gris-oscuro);
  color: var(--blanco);
  border-color: var(--verde-nvidia);
}

/* Botón de filtro activo (seleccionado) */
.btn-filtro.activo {
  background: rgba(118, 185, 0, 0.15);
  color: var(--verde-nvidia);
  border-color: var(--verde-nvidia);
  font-weight: 600;
}

/* ── BOTÓN RESET ─────────────────────────────────────────── */
.btn-reset {
  width: 100%;
  padding: 0.5rem;
  background: var(--rojo-reset);
  color: white;
  border: none;
  border-radius: var(--radio);
  cursor: pointer;
  font-family: var(--fuente-texto);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background var(--transicion), transform var(--transicion);
  margin-top: 0.5rem;
}

.btn-reset:hover {
  background: var(--rojo-reset-hover);
  transform: scale(1.02);
}

/* ── MAIN: Área de tarjetas ──────────────────────────────── */
main {
  flex: 1;
  min-width: 0;
  /* evita overflow en flex */
}

/* ── GRID DE TARJETAS ────────────────────────────────────── */
/* Grid CSS para las tarjetas de GPU - se adapta automáticamente */
.grid-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2rem;
}

/* ── TARJETA GPU ─────────────────────────────────────────── */
/* Cada tarjeta es un article generado por JavaScript */
.tarjeta-gpu {
  background: var(--negro-card);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-grande);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
  animation: fadeInUp 0.4s ease both;
}

.tarjeta-gpu:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-verde);
  border-color: var(--verde-nvidia);
}

/* Imagen de la tarjeta */
.tarjeta-imagen {
  position: relative;
  overflow: hidden;
  background: var(--gris-oscuro);
  height: 180px;
}

.tarjeta-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.tarjeta-gpu:hover .tarjeta-imagen img {
  transform: scale(1.05);
}

/* Badge de serie encima de la imagen */
.tarjeta-badge-serie {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: var(--verde-nvidia);
  color: var(--negro);
  font-family: var(--fuente-titulo);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Cuerpo de la tarjeta */
.tarjeta-info {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tarjeta-info h3 {
  color: var(--blanco-puro);
  font-size: 1rem;
  line-height: 1.2;
}

/* Subtítulo: serie · arquitectura · año */
.tarjeta-serie {
  color: var(--verde-nvidia);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Lista de especificaciones técnicas */
.tarjeta-specs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tarjeta-specs li {
  font-size: 0.8rem;
  color: var(--gris-texto);
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--gris-medio);
  display: flex;
  justify-content: space-between;
}

.tarjeta-specs li:last-child {
  border-bottom: none;
}

/* Descripción corta */
.tarjeta-descripcion {
  font-size: 0.8rem;
  color: #777;
  line-height: 1.4;
  flex: 1;
}

/* Precio de la GPU */
.tarjeta-precio {
  font-family: var(--fuente-titulo);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--verde-nvidia);
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--gris-borde);
}

/* ── SIN RESULTADOS ──────────────────────────────────────── */
#sin-resultados {
  text-align: center;
  padding: 3rem;
  color: var(--gris-texto);
  grid-column: 1 / -1;
}

#sin-resultados p {
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

/* ── SECCIONES DE PORTADA (index.html) ───────────────────── */
.seccion-intro,
.seccion-categorias,
.seccion-acceso {
  max-width: 1200px;
  margin: 3rem auto;
  padding: 0 1.5rem;
  animation: fadeInUp 0.5s ease both;
}

.seccion-intro h2,
.seccion-categorias h2,
.seccion-acceso h2 {
  color: var(--blanco-puro);
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: 0.5rem;
}

/* Línea verde decorativa debajo de los h2 */
.seccion-intro h2::after,
.seccion-categorias h2::after,
.seccion-acceso h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: var(--verde-nvidia);
  border-radius: 2px;
}

/* Grid de categorías en la portada */
.contenedor-categorias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.categoria-item {
  background: var(--negro-panel);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-grande);
  padding: 1.5rem;
  transition: all var(--transicion);
}

.categoria-item:hover {
  border-color: var(--verde-nvidia);
  box-shadow: var(--sombra-verde);
  transform: translateY(-4px);
}

.categoria-item h3 {
  color: var(--blanco-puro);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.categoria-item p {
  font-size: 0.85rem;
}

/* Botón de acceso al catálogo */
.seccion-acceso a {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.8rem 2rem;
  background: var(--verde-nvidia);
  color: var(--negro);
  font-family: var(--fuente-titulo);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radio);
  transition: all var(--transicion);
  border: 2px solid var(--verde-nvidia);
}

.seccion-acceso a:hover {
  background: transparent;
  color: var(--verde-nvidia);
  box-shadow: var(--sombra-verde);
}

/* ── SECCIONES DESPEDIDA (despedida.html) ────────────────── */
.seccion-autor,
.seccion-centro,
.seccion-fases,
.seccion-volver {
  max-width: 1000px;
  margin: 2.5rem auto;
  padding: 0 1.5rem;
  animation: fadeInUp 0.5s ease both;
}

.seccion-autor h2,
.seccion-centro h2,
.seccion-fases h2 {
  color: var(--blanco-puro);
  margin-bottom: 1.2rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--verde-nvidia);
}

/* Cards de autor y centro */
.autor-card,
.centro-card {
  background: var(--negro-panel);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-grande);
  padding: 1.5rem;
}

.autor-card h3,
.centro-card h3 {
  color: var(--verde-nvidia);
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

/* Tablas de datos del autor y centro */
table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  color: var(--gris-texto);
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.5rem 1rem 0.5rem 0;
  width: 35%;
  vertical-align: top;
}

td {
  color: var(--blanco);
  font-size: 0.9rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--gris-medio);
}

tr:last-child td {
  border-bottom: none;
}

/* Grid de fases del proyecto */
.contenedor-fases {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.fase-card {
  background: var(--negro-panel);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-grande);
  padding: 1.2rem;
  transition: all var(--transicion);
}

.fase-card:hover {
  border-color: var(--verde-nvidia);
  transform: translateY(-3px);
}

.fase-card h3 {
  color: var(--blanco-puro);
  font-size: 1rem;
  margin-bottom: 0.6rem;
}

.fase-card p {
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Botones de volver en despedida */
.seccion-volver {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.seccion-volver a {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  background: var(--gris-medio);
  color: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--transicion);
}

.seccion-volver a:hover {
  background: var(--verde-nvidia);
  color: var(--negro);
  border-color: var(--verde-nvidia);
}

/* ── FOOTER ──────────────────────────────────────────────── */
footer {
  background: var(--negro-panel);
  border-top: 2px solid var(--verde-nvidia);
  padding: 1.5rem 2rem;
  margin-top: 4rem;
  text-align: center;
}

footer p {
  font-size: 0.82rem;
  color: var(--gris-texto);
  margin-bottom: 0.3rem;
}

footer nav {
  margin-top: 0.8rem;
}

footer nav a {
  color: var(--gris-texto);
  font-size: 0.85rem;
  margin: 0 0.8rem;
  transition: color var(--transicion);
}

footer nav a:hover {
  color: var(--verde-nvidia);
}

/* ── UTILIDAD: Sólo lectores de pantalla ─────────────────── */
/* Oculta visualmente pero mantiene accesibilidad */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── NAV: Enlace activo (aria-current="page") ────────────── */
nav ul li a[aria-current="page"] {
  color: var(--verde-nvidia);
  border-color: var(--verde-nvidia);
  background: rgba(118, 185, 0, 0.1);
  font-weight: 700;
}

/* ── SECCIÓN STATS (index.html) ──────────────────────────── */
.seccion-stats {
  max-width: 1200px;
  margin: 3rem auto;
  padding: 0 1.5rem;
  animation: fadeInUp 0.5s ease both;
}

.seccion-stats h2 {
  color: var(--blanco-puro);
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.seccion-stats h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: var(--verde-nvidia);
  border-radius: 2px;
}

/* Grid de cifras con contador grande */
.lista-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.lista-stats li {
  background: var(--negro-panel);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-grande);
  padding: 1.5rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: all var(--transicion);
}

.lista-stats li:hover {
  border-color: var(--verde-nvidia);
  box-shadow: var(--sombra-verde);
  transform: translateY(-4px);
}

.lista-stats li strong {
  font-family: var(--fuente-titulo);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--verde-nvidia);
  line-height: 1;
  animation: glowPulse 3s ease-in-out infinite;
}

.lista-stats li span {
  font-size: 0.82rem;
  color: var(--gris-texto);
}

/* ── SECCIÓN TECNOLOGÍAS (despedida.html) ────────────────── */
.seccion-tecnologias {
  max-width: 1000px;
  margin: 2.5rem auto;
  padding: 0 1.5rem;
  animation: fadeInUp 0.5s ease both;
}

.seccion-tecnologias h2 {
  color: var(--blanco-puro);
  margin-bottom: 1.2rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--verde-nvidia);
}

/* Tags de tecnología como chips/badges */
.lista-tecnologias {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.lista-tecnologias li {
  background: rgba(118, 185, 0, 0.08);
  color: var(--verde-nvidia);
  border: 1px solid var(--verde-nvidia);
  border-radius: var(--radio);
  padding: 0.45rem 1.1rem;
  font-family: var(--fuente-titulo);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all var(--transicion);
}

.lista-tecnologias li:hover {
  background: var(--verde-nvidia);
  color: var(--negro);
}

/* ── FASES: Completada vs Pendiente ──────────────────────── */
.fase-completada {
  border-color: var(--verde-nvidia);
  background: linear-gradient(135deg, #111 0%, #0d1a00 100%);
}

.fase-completada h3 {
  color: var(--verde-nvidia) !important;
}

.fase-pendiente {
  opacity: 0.55;
  border-style: dashed;
}

.fase-pendiente:hover {
  opacity: 0.8;
}

/* ── FIELDSET / LEGEND (panel-filtros en main.html) ──────── */
fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.2rem 0;
}

legend {
  color: var(--verde-nvidia);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--gris-borde);
  width: 100%;
  display: block;
}

/* ── CONTADOR DE RESULTADOS (main.html) ──────────────────── */
.contador-resultados {
  font-size: 0.82rem;
  color: var(--gris-texto);
  margin-bottom: 1rem;
}

.contador-resultados strong {
  color: var(--verde-nvidia);
  font-weight: 700;
}

/* ── BADGE SERIE: colores por serie ──────────────────────── */
[data-serie="RTX 50"] .tarjeta-badge-serie {
  background: #4fc3f7;
  color: #000;
}

[data-serie="RTX 40"] .tarjeta-badge-serie {
  background: var(--verde-nvidia);
  color: #000;
}

[data-serie="RTX 30"] .tarjeta-badge-serie {
  background: #66bb6a;
  color: #000;
}

[data-serie="RTX Profesional"] .tarjeta-badge-serie {
  background: #ab47bc;
  color: #fff;
}

[data-serie="Data Center"] .tarjeta-badge-serie {
  background: #ef5350;
  color: #fff;
}

[data-serie="RTX 40 Laptop"] .tarjeta-badge-serie {
  background: #ffa726;
  color: #000;
}

[data-serie^="GTX"] .tarjeta-badge-serie {
  background: #78909c;
  color: #fff;
}

[data-serie="TITAN"] .tarjeta-badge-serie {
  background: #ffd54f;
  color: #000;
}

/* ── RESPONSIVE: Tablet (≤ 900px) ───────────────────────── */
@media (max-width: 900px) {

  /* El layout pasa a columna: filtros arriba, tarjetas abajo */
  .contenedor-principal {
    flex-direction: column;
  }

  /* El aside ya no es sticky en móvil */
  .panel-filtros {
    position: static;
    flex: none;
    width: 100%;
  }

  /* Los filtros se muestran en fila horizontal */
  #botones-filtro-serie,
  #botones-filtro-uso {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .btn-filtro {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* ── RESPONSIVE: Móvil (≤ 600px) ────────────────────────── */
@media (max-width: 600px) {
  header {
    padding: 1.2rem 1rem 1rem;
    position: relative;
    /* en móvil no sticky para ganar espacio */
  }

  header h1 {
    font-size: 1.5rem;
  }

  nav ul {
    gap: 0.2rem;
  }

  nav ul li a {
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
  }

  .contenedor-principal {
    padding: 0 1rem;
    margin: 1rem auto;
  }

  /* Una sola columna en móvil */
  .grid-tarjetas {
    grid-template-columns: 1fr;
  }

  .contenedor-categorias,
  .contenedor-fases {
    grid-template-columns: 1fr;
  }

  .barra-busqueda,
  .barra-orden {
    flex-direction: column;
    align-items: flex-start;
  }

  #input-busqueda {
    width: 100%;
  }

  footer {
    padding: 1rem;
  }

  footer nav a {
    display: block;
    margin: 0.3rem 0;
  }
}

/* ── RESPONSIVE: Pantallas grandes (≥ 1400px) ────────────── */
@media (min-width: 1400px) {
  .grid-tarjetas {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

/* ── Hint de reset ── */
.filtro-hint {
  margin-top: 10px;
  font-size: 12px;
  color: #888;
}

.filtro-label--mini {
  font-size: 12px !important;
  padding: 2px 8px !important;
}

/* ── Ocultar los inputs de radio visualmente ── */
.filtro-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ── Labels como botones de filtro ── */
.filtro-label {
  display: inline-block;
  margin: 3px 2px;
  padding: 5px 11px;
  font-size: 13px;
  border: 1px solid #888;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}

.filtro-label:hover {
  border-color: #76b900;
  color: #76b900;
}

/* ── Label activo cuando su input está marcado ── */
#f-s-todas:checked~.contenedor-principal label[for="f-s-todas"],
#f-s-rtx50:checked~.contenedor-principal label[for="f-s-rtx50"],
#f-s-rtx40:checked~.contenedor-principal label[for="f-s-rtx40"],
#f-s-rtx30:checked~.contenedor-principal label[for="f-s-rtx30"],
#f-s-pro:checked~.contenedor-principal label[for="f-s-pro"],
#f-s-dc:checked~.contenedor-principal label[for="f-s-dc"],
#f-s-laptop:checked~.contenedor-principal label[for="f-s-laptop"],
#f-s-gtx:checked~.contenedor-principal label[for="f-s-gtx"],
#f-s-titan:checked~.contenedor-principal label[for="f-s-titan"],
#f-u-todos:checked~.contenedor-principal label[for="f-u-todos"],
#f-u-gaming:checked~.contenedor-principal label[for="f-u-gaming"],
#f-u-pro:checked~.contenedor-principal label[for="f-u-pro"],
#f-u-ia:checked~.contenedor-principal label[for="f-u-ia"],
#f-u-laptop:checked~.contenedor-principal label[for="f-u-laptop"],
#f-u-legado:checked~.contenedor-principal label[for="f-u-legado"] {
  background: #76b900;
  border-color: #76b900;
  color: #000;
  font-weight: bold;
}

/* ── Ocultar tarjetas por SERIE ── */
#f-s-rtx50:checked~.contenedor-principal .tarjeta-gpu:not([data-serie="RTX 50"]) {
  display: none;
}

#f-s-rtx40:checked~.contenedor-principal .tarjeta-gpu:not([data-serie="RTX 40"]) {
  display: none;
}

#f-s-rtx30:checked~.contenedor-principal .tarjeta-gpu:not([data-serie="RTX 30"]) {
  display: none;
}

#f-s-pro:checked~.contenedor-principal .tarjeta-gpu:not([data-serie="RTX Profesional"]) {
  display: none;
}

#f-s-dc:checked~.contenedor-principal .tarjeta-gpu:not([data-serie="Data Center"]) {
  display: none;
}

#f-s-laptop:checked~.contenedor-principal .tarjeta-gpu:not([data-serie="RTX 40 Laptop"]) {
  display: none;
}

#f-s-gtx:checked~.contenedor-principal .tarjeta-gpu:not([data-serie^="GTX"]) {
  display: none;
}

#f-s-titan:checked~.contenedor-principal .tarjeta-gpu:not([data-serie="TITAN"]) {
  display: none;
}

/* ── Ocultar tarjetas por USO ── */
#f-u-gaming:checked~.contenedor-principal .tarjeta-gpu:not([data-uso*="Gaming"]) {
  display: none;
}

#f-u-pro:checked~.contenedor-principal .tarjeta-gpu:not([data-uso*="Profesional"]):not([data-uso*="Workstation"]) {
  display: none;
}

#f-u-ia:checked~.contenedor-principal .tarjeta-gpu:not([data-uso*="IA"]):not([data-uso*="HPC"]) {
  display: none;
}

#f-u-laptop:checked~.contenedor-principal .tarjeta-gpu:not([data-uso*="Portátil"]) {
  display: none;
}

#f-u-legado:checked~.contenedor-principal .tarjeta-gpu:not([data-uso*="Legado"]) {
  display: none;
}