/* Trending page styles (shared EN/ES) — extracted from the old inline <style>. */
.page-hero {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-16) var(--container-padding) var(--space-10);
  border-bottom: 1px solid var(--border);
}

.page-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  letter-spacing: 3px;
  margin-bottom: var(--space-4);
}

.page-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-5xl);
  letter-spacing: -4px;
  line-height: 0.95;
  margin-bottom: var(--space-4);
}

.page-hero p {
  font-size: var(--text-base);
  color: var(--text-muted);
  max-width: 480px;
}

.trending-section {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-12) var(--container-padding) var(--space-20);
}

.trending-grid {
  display: flex;
  flex-direction: column;
}

.trending-card {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.trending-card:hover { background: var(--bg-elevated); padding-left: var(--space-4); padding-right: var(--space-4); margin: 0 calc(var(--space-4) * -1); }

.trending-rank {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-2xl);
  letter-spacing: -1px;
  color: var(--border-bold);
  text-align: center;
}

.trending-info { display: flex; flex-direction: column; gap: var(--space-1); }

.trending-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.trending-name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  letter-spacing: -0.5px;
  color: var(--text);
}

.trending-rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.trending-stars {
  font-size: var(--text-base);
  color: var(--accent);
  letter-spacing: 2px;
}

.trending-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

.empty-state {
  padding: var(--space-20) 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-faint);
  letter-spacing: 0.5px;
}

@media (max-width: 600px) {
  .page-hero h1 { font-size: var(--text-3xl); letter-spacing: -2px; }
  .trending-card { grid-template-columns: 36px 1fr auto; gap: var(--space-4); }
  .trending-rank { font-size: var(--text-xl); }
  .trending-name { font-size: var(--text-base); }
}