/* archivo.css — Archivo Sistema B */
:root {
  --bg: hsl(220 20% 98.5%);
  --fg: hsl(240 10% 12%);
  --card-bg: #fff;
  --border: hsl(240 6% 88%);
  --muted: hsl(240 4% 46%);
  --primary: hsl(250 85% 60%);
  --shell-bg: hsla(243, 26%, 87%, 0.96);
  --shell-border: hsl(250 18% 78% / 0.95);
  --radius-card: 18px;

  --background: 220 20% 98.6%;
  --foreground: 240 10% 12%;
  --card: 0 0% 100%;
  --secondary: 220 18% 95.8%;
  --muted-foreground: 240 4% 46%;

  --green: hsl(152 62% 42%);
  --green-bg: hsl(148 52% 93%);
}

[data-theme="dark"] {
  --bg: hsl(240 10% 7%);
  --fg: hsl(240 5% 96%);
  --card-bg: hsl(240 8% 10%);
  --border: hsl(240 4% 18%);
  --muted: hsl(240 5% 64%);
  --primary: hsl(250 90% 72%);
  --shell-bg: hsla(240, 8%, 10%, 0.96);
  --shell-border: hsl(240 8% 20% / 0.95);

  --background: 240 10% 8%;
  --foreground: 220 15% 92%;
  --card: 240 8% 12%;
  --secondary: 240 8% 16%;
  --muted-foreground: 240 5% 58%;

  --green: hsl(152 62% 58%);
  --green-bg: hsl(148 40% 14%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; background: hsl(var(--background)); color: hsl(var(--foreground)); }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "cv02","cv03","cv04","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  padding-bottom: 56px;
}
button { cursor: pointer; font: inherit; border: 0; background: transparent; color: inherit; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

/* ═══════════════════════════════════════════
   PAGE LAYOUT
   ═══════════════════════════════════════════ */
.arch-page {
  width: min(52rem, calc(100% - 2.5rem));
  margin-inline: auto;
  padding: 5.8rem 0 4rem;
}

/* ═══════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════ */
.page-hd { margin-bottom: 1.4rem; }
.page-hd-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.page-hd h1 {
  font-family: "Crimson Pro", serif;
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1;
  color: hsl(var(--foreground));
}

/* Surprise button */
.surprise-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  height: 2.1rem; padding: 0 0.95rem;
  border-radius: 999px;
  background: linear-gradient(135deg, hsl(250 85% 60%), hsl(272 72% 66%));
  color: #fff;
  font-size: 0.8rem; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 3px 12px hsl(250 80% 56% / 0.26);
  transition: transform 0.16s cubic-bezier(0.22,1,0.36,1), box-shadow 0.16s ease;
  white-space: nowrap; flex-shrink: 0;
}
.surprise-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 20px hsl(250 80% 56% / 0.36); }
.surprise-btn:active { transform: scale(0.97); }

/* ═══════════════════════════════════════════
   SEARCH
   ═══════════════════════════════════════════ */
.search-wrap {
  position: relative; width: 100%; margin-bottom: 0.85rem;
}
.search-ico {
  position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%);
  color: hsl(var(--primary) / 0.55); pointer-events: none;
}
.search-input {
  width: 100%; height: 2.9rem;
  padding: 0 2.8rem;
  border-radius: 14px;
  border: 1.5px solid hsl(var(--border));
  background: hsl(var(--card-bg));
  color: hsl(var(--foreground));
  font-size: 0.9rem; font-weight: 480;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
  outline: none;
  box-shadow: 0 1px 4px hsl(240 20% 10% / 0.04);
}
.search-input:focus {
  border-color: hsl(250 85% 60% / 0.55);
  box-shadow: 0 0 0 3px hsl(250 85% 60% / 0.1), 0 1px 4px hsl(240 20% 10% / 0.04);
}
.search-input::placeholder { color: hsl(var(--muted-foreground) / 0.5); font-weight: 460; }
[data-theme="dark"] .search-input { background: hsl(240 8% 12%); }
.search-clear {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  width: 1.5rem; height: 1.5rem; border-radius: 999px;
  display: grid; place-items: center;
  background: hsl(var(--muted-foreground) / 0.12);
  color: hsl(var(--muted-foreground));
  transition: background 0.12s ease;
}
.search-clear:hover { background: hsl(var(--muted-foreground) / 0.22); }

/* ═══════════════════════════════════════════
   FILTER ROW — two selects
   ═══════════════════════════════════════════ */
.filter-row {
  display: flex; gap: 0.5rem; margin-bottom: 1.4rem;
}
.filter-select-wrap {
  position: relative; flex: 1; min-width: 0;
}
.filter-select-wrap select {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 2.4rem;
  padding: 0 2.2rem 0 0.85rem;
  border-radius: 10px;
  border: 1.5px solid hsl(var(--border));
  background: hsl(var(--card-bg));
  color: hsl(var(--foreground));
  font: inherit; font-size: 0.82rem; font-weight: 580;
  cursor: pointer;
  outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.filter-select-wrap select:focus {
  border-color: hsl(250 85% 60% / 0.5);
  box-shadow: 0 0 0 3px hsl(250 85% 60% / 0.1);
}
.filter-select-wrap select:hover { border-color: hsl(var(--primary) / 0.35); }
[data-theme="dark"] .filter-select-wrap select { background: hsl(240 8% 12%); }
.select-chevron {
  position: absolute; right: 0.65rem; top: 50%; transform: translateY(-50%);
  color: hsl(var(--muted-foreground)); pointer-events: none;
}

/* ═══════════════════════════════════════════
   GRID LABEL
   ═══════════════════════════════════════════ */
.grid-label {
  font-size: 0.8rem; font-weight: 560;
  color: hsl(var(--muted-foreground));
  min-height: 1.2rem; margin-bottom: 0.75rem;
}

/* ═══════════════════════════════════════════
   SECTION COLOR TOKENS
   ═══════════════════════════════════════════ */
.sec-logica-pura         { --sec-h: 250; --sec-s: 72%; --sec-l: 58%; }
.sec-territorio-numerico { --sec-h: 212; --sec-s: 82%; --sec-l: 50%; }
.sec-trampa-visual       { --sec-h: 168; --sec-s: 60%; --sec-l: 38%; }
.sec-jugadas-maestras    { --sec-h: 26;  --sec-s: 92%; --sec-l: 52%; }
.sec-factor-azar         { --sec-h: 338; --sec-s: 72%; --sec-l: 54%; }
.sec-ingenio-eterno      { --sec-h: 44;  --sec-s: 92%; --sec-l: 46%; }
.sec-default             { --sec-h: 240; --sec-s: 6%;  --sec-l: 58%; }

/* ═══════════════════════════════════════════
   PUZZLE GRID
   ═══════════════════════════════════════════ */
.arch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.88rem;
}

/* ─── PUZZLE CARD ─── */
.puzzle-card {
  position: relative;
  border: 1px solid hsl(var(--border) / 0.76);
  border-top: 2.5px solid hsl(var(--sec-h, 240) var(--sec-s, 6%) var(--sec-l, 58%) / 0.7);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  padding: 1.2rem 1.2rem 1rem;
  display: flex; flex-direction: column; gap: 0.55rem;
  box-shadow: 0 2px 8px hsl(240 20% 10% / 0.05), 0 1px 0 hsl(0 0% 100% / 0.9) inset;
  transition: all 0.2s cubic-bezier(0.22,1,0.36,1);
  text-decoration: none; color: inherit;
  min-height: 170px;
}
.puzzle-card:hover {
  transform: translateY(-3px);
  border-color: hsl(var(--primary) / 0.32);
  border-top-color: hsl(var(--sec-h,250) var(--sec-s,72%) var(--sec-l,58%));
  box-shadow: 0 12px 34px hsl(240 20% 10% / 0.1), 0 1px 0 hsl(0 0% 100% / 0.92) inset;
}
[data-theme="dark"] .puzzle-card { background: hsl(240 8% 11%); box-shadow: 0 2px 8px hsl(240 40% 4% / 0.35); }
[data-theme="dark"] .puzzle-card:hover { background: hsl(240 8% 14%); border-color: hsl(250 38% 50% / 0.22); box-shadow: 0 8px 28px hsl(240 40% 4% / 0.55); }
.puzzle-card.is-solved { border-top-color: hsl(var(--green)); }

/* Card header */
.card-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }

/* Section dot */
.card-sec-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: hsl(var(--sec-h,240) var(--sec-s,6%) var(--sec-l,58%));
  flex-shrink: 0; margin-top: 0.3rem;
}
.sec-dot-logica-pura         { background: hsl(250 72% 58%); }
.sec-dot-territorio-numerico { background: hsl(212 82% 50%); }
.sec-dot-trampa-visual       { background: hsl(168 60% 38%); }
.sec-dot-jugadas-maestras    { background: hsl(26 92% 52%); }
.sec-dot-factor-azar         { background: hsl(338 72% 54%); }
.sec-dot-ingenio-eterno      { background: hsl(44 92% 46%); }

/* Solved check */
.card-solved-check {
  width: 18px; height: 18px; border-radius: 999px;
  background: hsl(var(--green-bg)); color: hsl(var(--green));
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Difficulty badge — inherits section color */
.diff-badge {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.2rem; height: 1.55rem; padding: 0 0.5rem;
  border-radius: 999px;
  font-size: 0.6rem; font-weight: 860; letter-spacing: 0.01em;
  background: hsl(var(--sec-h,240) var(--sec-s,6%) var(--sec-l,58%) / 0.12);
  color: hsl(var(--sec-h,240) var(--sec-s,6%) calc(var(--sec-l,58%) - 10%));
}
[data-theme="dark"] .diff-badge {
  background: hsl(var(--sec-h,240) var(--sec-s,6%) var(--sec-l,58%) / 0.18);
  color: hsl(var(--sec-h,240) var(--sec-s,6%) calc(var(--sec-l,58%) + 18%));
}

/* Card title */
.card-title {
  font-family: "Crimson Pro", serif;
  font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.22; color: hsl(240 12% 14%);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
[data-theme="dark"] .card-title { color: hsl(var(--foreground) / 0.92); }
.puzzle-card:hover .card-title { color: hsl(var(--sec-h,250) var(--sec-s,72%) calc(var(--sec-l,58%) - 10%)); }
[data-theme="dark"] .puzzle-card:hover .card-title { color: hsl(var(--sec-h,250) var(--sec-s,72%) calc(var(--sec-l,58%) + 20%)); }

/* Card intro */
.card-intro {
  font-size: 0.78rem; line-height: 1.54;
  color: hsl(240 6% 48%); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
[data-theme="dark"] .card-intro { color: hsl(var(--foreground) / 0.45); }

/* Card footer */
.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 0.55rem;
  border-top: 1px solid hsl(var(--border) / 0.5);
}
.sec-tag {
  font-size: 0.65rem; font-weight: 660; letter-spacing: 0.01em;
  color: hsl(var(--sec-h,240) var(--sec-s,6%) calc(var(--sec-l,58%) - 10%)); opacity: 0.82;
}
[data-theme="dark"] .sec-tag { color: hsl(var(--sec-h,240) var(--sec-s,6%) calc(var(--sec-l,58%) + 18%)); }
.card-arrow {
  width: 1.75rem; height: 1.75rem; border-radius: 999px;
  display: grid; place-items: center;
  background: hsl(var(--secondary) / 0.6);
  color: hsl(var(--muted-foreground));
  transition: all 0.14s ease; flex-shrink: 0;
}
.puzzle-card:hover .card-arrow { background: hsl(var(--primary)); color: #fff; transform: translateX(2px); }

/* ═══════════════════════════════════════════
   GRID ACTIONS (Ver otra selección)
   ═══════════════════════════════════════════ */
.grid-actions {
  display: flex; justify-content: center;
  margin-top: 1.6rem;
}
.refresh-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  height: 2.1rem; padding: 0 1.1rem;
  border-radius: 999px;
  border: 1.5px solid hsl(var(--border));
  background: hsl(var(--card-bg));
  color: hsl(var(--muted-foreground));
  font-size: 0.8rem; font-weight: 640;
  transition: all 0.15s ease;
}
.refresh-btn:hover {
  border-color: hsl(var(--primary) / 0.4);
  color: hsl(var(--foreground));
  background: hsl(var(--secondary));
}
[data-theme="dark"] .refresh-btn { background: hsl(var(--card)); }

/* ═══════════════════════════════════════════
   LOS IMPRESCINDIBLES
   ═══════════════════════════════════════════ */
.impres-section {
  margin-top: 2.6rem;
  border: 1.5px solid hsl(250 60% 60% / 0.18);
  border-radius: 16px;
  background: linear-gradient(135deg, hsl(250 72% 60% / 0.04), transparent 60%);
  overflow: hidden;
}
[data-theme="dark"] .impres-section {
  border-color: hsl(250 60% 60% / 0.14);
  background: linear-gradient(135deg, hsl(250 60% 40% / 0.07), transparent 60%);
}
.impres-toggle {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; padding: 1rem 1.1rem;
  color: hsl(var(--foreground));
  transition: background 0.12s ease;
}
.impres-toggle:hover { background: hsl(250 60% 60% / 0.05); }
.impres-toggle-label {
  display: inline-flex; align-items: center; gap: 0.38rem;
  font-size: 0.9rem; font-weight: 720; letter-spacing: -0.015em;
  color: hsl(var(--foreground)); flex: 1;
}
.impres-toggle-label svg { color: hsl(44 90% 50%); flex-shrink: 0; }
.impres-toggle-hint {
  font-size: 0.7rem; font-weight: 540;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}
.impres-chevron { transition: transform 0.2s ease; flex-shrink: 0; color: hsl(var(--muted-foreground)); }
.impres-toggle[aria-expanded="true"] .impres-chevron { transform: rotate(180deg); }
.impres-body { padding: 0 1.1rem 1.1rem; }
.impres-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 0.9rem;
}

/* ─── Featured card ─── */
.featured-card {
  position: relative;
  border-radius: 20px;
  padding: 1.4rem 1.4rem 1.2rem;
  background:
    radial-gradient(circle at 90% 10%, hsl(var(--sec-h,250) var(--sec-s,72%) var(--sec-l,58%) / 0.07) 0%, transparent 50%),
    hsl(var(--card-bg));
  border: 1px solid hsl(var(--sec-h,250) var(--sec-s,72%) var(--sec-l,58%) / 0.2);
  border-top: 3px solid hsl(var(--sec-h,250) var(--sec-s,72%) var(--sec-l,58%));
  box-shadow: 0 6px 24px hsl(var(--sec-h,250) var(--sec-s,72%) var(--sec-l,58%) / 0.08), 0 1px 0 hsl(0 0% 100% / 0.8) inset;
  transition: all 0.22s cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column; gap: 0.5rem;
  text-decoration: none; color: inherit;
  min-height: 190px;
}
.featured-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px hsl(var(--sec-h,250) var(--sec-s,72%) var(--sec-l,58%) / 0.14), 0 1px 0 hsl(0 0% 100% / 0.9) inset;
  border-color: hsl(var(--sec-h,250) var(--sec-s,72%) var(--sec-l,58%) / 0.36);
}
[data-theme="dark"] .featured-card { background: hsl(240 8% 12%); border-color: hsl(var(--sec-h,250) var(--sec-s,72%) var(--sec-l,58%) / 0.25); box-shadow: 0 8px 28px hsl(240 20% 4% / 0.4); }
.featured-card.is-solved { border-top-color: hsl(var(--green)); }
.fc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.2rem; }
.fc-eyebrow {
  display: inline-flex; align-items: center; gap: 0.28rem;
  font-size: 0.56rem; font-weight: 920; letter-spacing: 0.16em; text-transform: uppercase;
  color: hsl(var(--sec-h,250) var(--sec-s,72%) calc(var(--sec-l,58%) - 6%));
}
[data-theme="dark"] .fc-eyebrow { color: hsl(var(--sec-h,250) var(--sec-s,72%) calc(var(--sec-l,58%) + 20%)); }
.fc-eyebrow-solved, [data-theme="dark"] .fc-eyebrow-solved { color: hsl(var(--green)); }
.fc-diff {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.01em;
  padding: 0.15em 0.55em; border-radius: 999px;
}
.diff-1 { background:#e0f2fe; color:#0369a1; }
.diff-2 { background:#dbeafe; color:#1e40af; }
.diff-3 { background:#ede9fe; color:#6d28d9; }
.diff-4 { background:#fce7f3; color:#be185d; }
.diff-5 { background:#fef3c7; color:#92400e; }
[data-theme="dark"] .diff-1 { background:hsl(200 80% 15%); color:hsl(200 80% 72%); }
[data-theme="dark"] .diff-2 { background:hsl(220 70% 16%); color:hsl(220 70% 74%); }
[data-theme="dark"] .diff-3 { background:hsl(260 60% 16%); color:hsl(260 60% 76%); }
[data-theme="dark"] .diff-4 { background:hsl(330 60% 14%); color:hsl(330 60% 74%); }
[data-theme="dark"] .diff-5 { background:hsl(40 60% 14%); color:hsl(40 60% 74%); }
.fc-title {
  font-family: "Crimson Pro", serif;
  font-size: 1.2rem; font-weight: 600; letter-spacing: -0.025em;
  line-height: 1.22; flex: 1;
}
.fc-intro {
  font-size: 0.8rem; line-height: 1.56; color: hsl(240 8% 44%);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
[data-theme="dark"] .fc-intro { color: hsl(var(--foreground) / 0.48); }
.fc-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 0.6rem;
  border-top: 1px solid hsl(var(--border) / 0.5);
}
.fc-section { font-size: 0.66rem; font-weight: 660; color: hsl(var(--sec-h,250) var(--sec-s,72%) calc(var(--sec-l,58%) - 10%)); }
[data-theme="dark"] .fc-section { color: hsl(var(--sec-h,250) var(--sec-s,72%) calc(var(--sec-l,58%) + 18%)); }
.fc-cta { font-size: 0.72rem; font-weight: 720; color: hsl(var(--sec-h,250) var(--sec-s,72%) calc(var(--sec-l,58%) - 8%)); opacity: 0; transition: opacity 0.14s ease; }
.featured-card:hover .fc-cta { opacity: 1; }
[data-theme="dark"] .fc-cta { color: hsl(var(--sec-h,250) var(--sec-s,72%) calc(var(--sec-l,58%) + 20%)); }

/* ═══════════════════════════════════════════
   EMPTY / LOADING / ERROR
   ═══════════════════════════════════════════ */
.empty-state {
  grid-column: 1 / -1; text-align: center; padding: 4rem 1rem;
  background: linear-gradient(180deg, transparent, hsl(var(--secondary) / 0.3), transparent);
  border-radius: 18px;
}
.empty-icon {
  width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 18px;
  background: linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--secondary) / 0.6));
  display: grid; place-items: center; color: hsl(var(--muted-foreground));
  box-shadow: 0 4px 12px hsl(240 20% 10% / 0.05);
}
.empty-title { font-size: 1.1rem; font-weight: 800; color: hsl(var(--foreground)); margin-bottom: 0.35rem; }
.empty-text  { font-size: 0.88rem; color: hsl(var(--muted-foreground)); line-height: 1.5; }
.arch-loading { grid-column: 1 / -1; padding: 3rem 1rem; text-align: center; font-size: 0.9rem; color: hsl(var(--muted-foreground)); }
.arch-error   { grid-column: 1 / -1; padding: 2rem 1rem; text-align: center; font-size: 0.88rem; color: hsl(0 60% 50%); }

/* ═══════════════════════════════════════════
   SUPPORT CTA
   ═══════════════════════════════════════════ */
.support-cta {
  display: grid; grid-template-columns: 44px 1fr 16px;
  align-items: center; gap: 0.9rem;
  margin: 2.4rem 0 0; padding: 1.3rem 1.2rem;
  border: 1px solid #4b3c72; border-radius: 20px;
  background: radial-gradient(circle at 16% 0,rgba(255,255,255,0.18),transparent 38%),linear-gradient(135deg,#241f2c,#4b3c72);
  box-shadow: 0 12px 32px rgba(45,39,54,0.18);
  color: #fff; text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.support-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(45,39,54,0.26); }
.support-cta-icon { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,0.13); display: grid; place-items: center; flex-shrink: 0; }
.support-cta-body strong { display: block; font-size: 1rem; font-weight: 860; letter-spacing: -0.02em; }
.support-cta-body p { margin: 0.18rem 0 0; font-size: 0.76rem; font-weight: 500; color: rgba(255,255,255,0.7); line-height: 1.4; }
.support-cta-arrow { opacity: 0.7; flex-shrink: 0; }

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.site-footer-std { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.footer-top-std { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; }
.footer-links-std { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0.6rem; }
.footer-links-std a { font-size: 0.75rem; font-weight: 500; color: var(--muted); transition: color 0.12s ease; }
.footer-links-std a:hover { color: var(--fg); }
.footer-legal-std a { font-size: 0.72rem; color: var(--muted); opacity: 0.72; }
.footer-sep-std { font-size: 0.68rem; color: var(--muted); opacity: 0.5; user-select: none; }
.footer-copy-std { text-align: center; font-size: 0.72rem; color: var(--muted); opacity: 0.7; line-height: 1.4; }
.heart-std { color: #fb7185; }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .brand-row { padding: 0 0.64rem; }
  .brand-link { gap: 0.14rem; padding-left: 0.28rem; }
  .brand-title { font-size: 1.6rem; }
}

@media (max-width: 680px) {
  .arch-page { width: calc(100% - 2rem); }
  .arch-grid { grid-template-columns: 1fr; }
  .impres-grid { grid-template-columns: 1fr; }
}

.brand-row { max-width: 52rem; }

@media (max-width: 440px) {
  .page-hd h1 { font-size: 1.7rem; }
  .surprise-btn { font-size: 0.74rem; padding: 0 0.75rem; }
  .filter-select-wrap select { font-size: 0.76rem; padding-left: 0.65rem; }
}