/* ═══════════════════════════════════════════════════════════
 * 100 Ladrillos · Centro de Ayuda · Zendesk Guide Theme
 * Brand System: Later v2.1
 * ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Nunito+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Azeret+Mono:wght@400;600&display=swap');

/* ─── Brand tokens (Later v2.1) ─── */
:root {
  --brand-color:    #041B3D;
  --accent-color:   #F82F56;

  --color-brand-primary: var(--brand-color);
  --color-brand-accent:  var(--accent-color);
  --color-darkblue-700: #133970;
  --color-darkblue-100: #b2d1ff;

  --color-bg-app:        #f4f7fb;
  --color-bg-light-blue: #e1e9f4;
  --color-accent-aqua:   #97d6df;
  --color-accent-coral:  #ff7b71;

  --color-gray-200: #e9e9e9;
  --color-gray-300: #dadada;
  --color-gray-700: #a6a6a6;

  --color-chromatic-100: #ffffff;
  --color-chromatic-500: #808080;
  --color-chromatic-700: #404040;
  --color-chromatic-900: #000000;

  --color-green-600: #2a8a53; --color-green-700: #267c4b; --color-green-800: #227043;
  --color-red-500: #d40707; --color-red-700: #ac0505;
  --color-blue-500: #1c64eb;

  --text-primary: var(--color-chromatic-900);
  --text-secondary: var(--color-brand-primary);
  --text-tertiary: var(--color-chromatic-700);
  --text-placeholder: var(--color-chromatic-500);

  --bg-app: var(--color-bg-app);
  --bg-surface: var(--color-chromatic-100);
  --bg-subtle: var(--color-bg-light-blue);
  --bg-info-subtle: var(--color-bg-light-blue);
  --bg-positive-subtle: #e4f5ec;
  --bg-negative-subtle: #fdeaea;
  --bg-accent-hover: var(--color-red-700);

  --border-primary: var(--color-gray-300);
  --border-subtle:  var(--color-gray-200);

  --font-display: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    'Nunito Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'Azeret Mono', ui-monospace, Menlo, monospace;

  --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700;

  --radius-xs: 4px; --radius-s: 8px; --radius-m: 12px; --radius-l: 16px; --radius-pill: 999px;

  --shadow-xs:  0 1px 2px 0 rgba(14,31,53,.06);
  --shadow-s:   0 2px 4px 0 rgba(14,31,53,.12);
  --shadow-m:   0 4px 12px -2px rgba(14,31,53,.10), 0 2px 4px 0 rgba(14,31,53,.06);
  --shadow-l:   0 12px 24px -8px rgba(14,31,53,.16), 0 4px 8px -2px rgba(14,31,53,.08);

  --z-sticky: 100;

  --ease-emphasis: cubic-bezier(0.2, 0, 0, 1);
}

/* ─── Hero size presets (driven by .hc-hero--<size> class) ─── */
.hc-hero--compact {
  --hero-pad-y: 56px; --hero-pad-y-bottom: 64px;
  --hero-h1: 40px; --hero-sub: 16px; --hero-search-gap: 24px;
  --search-max: 520px; --search-pad: 6px; --search-input-pad: 11px;
  --search-font: 14px; --search-btn-pad: 10px 18px;
}
.hc-hero--regular, .hc-hero {
  --hero-pad-y: 88px; --hero-pad-y-bottom: 96px;
  --hero-h1: 56px; --hero-sub: 18px; --hero-search-gap: 36px;
  --search-max: 600px; --search-pad: 8px; --search-input-pad: 14px;
  --search-font: 16px; --search-btn-pad: 12px 24px;
}
.hc-hero--grande {
  --hero-pad-y: 120px; --hero-pad-y-bottom: 140px;
  --hero-h1: 72px; --hero-sub: 20px; --hero-search-gap: 48px;
  --search-max: 720px; --search-pad: 10px; --search-input-pad: 18px;
  --search-font: 17px; --search-btn-pad: 14px 28px;
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--color-brand-primary); text-decoration: none; }
a:hover { color: var(--color-brand-accent); }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  letter-spacing: -0.015em;
  color: var(--color-brand-primary);
}
img { max-width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════
 * TOPBAR / HEADER
 * ═══════════════════════════════════════════════════════════ */
.hc-topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--color-brand-primary);
  color: #fff;
}
.hc-topbar-inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; gap: 32px;
  padding: 18px 32px;
}
.hc-topbar .brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.hc-topbar .brand:hover { color: #fff; }
.hc-topbar .brand img { height: 26px; filter: brightness(0) invert(1); }
.hc-topbar .brand .label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-semi);
  padding-left: 14px;
  margin-left: 4px;
  border-left: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.78);
}
.hc-nav { display: flex; gap: 4px; margin-left: auto; }
.hc-nav a {
  font-family: var(--font-body); font-size: 14px; font-weight: var(--fw-semi);
  color: rgba(255,255,255,0.74);
  padding: 8px 14px; border-radius: 8px;
  transition: color 120ms, background 120ms;
}
.hc-nav a:hover { color: #fff; background: rgba(255,255,255,0.06); }
.hc-nav a.active { color: #fff; background: rgba(255,255,255,0.1); }
.hc-topbar-cta {
  font-family: var(--font-body); font-size: 14px; font-weight: var(--fw-semi);
  background: var(--color-brand-accent); color: #fff;
  padding: 10px 18px; border-radius: var(--radius-pill);
  border: 0; transition: background 120ms;
}
.hc-topbar-cta:hover { background: var(--bg-accent-hover); color: #fff; }

/* ═══════════════════════════════════════════════════════════
 * HERO
 * ═══════════════════════════════════════════════════════════ */
.hc-hero {
  background: var(--color-brand-primary); color: #fff;
  position: relative; overflow: hidden;
  padding: var(--hero-pad-y) 32px var(--hero-pad-y-bottom);
  text-align: center;
}
.hc-hero::after {
  content: "";
  position: absolute;
  right: -2%;
  top: 0;
  bottom: var(--hero-pad-y-bottom);
  width: 52%;
  max-width: 720px;
  background-image: var(--hero-image, none);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  pointer-events: none;
  opacity: 0.95;
  z-index: 0;
}
.hc-hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto 0 8%; text-align: left; }
.hc-hero-eyebrow {
  font-family: var(--font-display); font-size: 12px; font-weight: var(--fw-semi);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-brand-accent);
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 10px;
}
.hc-hero-eyebrow::after {
  content: ""; width: 24px; height: 2px; background: var(--color-brand-accent);
}
.hc-hero h1 {
  font-family: var(--font-display); font-weight: var(--fw-semi);
  font-size: var(--hero-h1); line-height: 1;
  letter-spacing: -0.025em; color: #fff;
  margin: 0 0 18px; text-wrap: balance;
}
.hc-hero h1 em { font-style: italic; color: var(--color-brand-accent); }
.hc-hero .hc-hero-sub {
  font-family: var(--font-body);
  font-size: var(--hero-sub); line-height: 1.5;
  color: rgba(255,255,255,0.72);
  max-width: 520px; margin: 0 0 var(--hero-search-gap);
  text-wrap: pretty;
}

/* Search */
.hc-search {
  position: relative; max-width: var(--search-max);
  margin: 0; background: #fff;
  border-radius: var(--radius-pill); box-shadow: var(--shadow-l);
  display: flex; align-items: center; padding: var(--search-pad);
}
.hc-search svg.icon { width: 22px; height: 22px; color: var(--color-brand-primary); margin-left: 14px; flex-shrink: 0; }
.hc-search input, .hc-search input[type="search"] {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--font-body); font-size: var(--search-font);
  color: var(--color-brand-primary);
  padding: var(--search-input-pad) 14px;
  min-width: 0;
  -webkit-appearance: none; appearance: none;
}
.hc-search input::placeholder { color: var(--text-placeholder); }
.hc-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.hc-search button {
  background: var(--color-brand-primary); color: #fff;
  border: 0; border-radius: var(--radius-pill);
  padding: var(--search-btn-pad);
  font-family: var(--font-body); font-size: var(--search-font); font-weight: var(--fw-semi);
  flex-shrink: 0; transition: background 120ms;
}
.hc-search button:hover { background: var(--color-darkblue-700); color: #fff; }

.hc-popular-searches {
  margin-top: 20px;
  display: flex; align-items: center;
  flex-wrap: wrap; gap: 10px;
  font-family: var(--font-body); font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.hc-popular-searches .label { font-weight: var(--fw-semi); letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; }
.hc-popular-searches a {
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.86); font-size: 13px;
  transition: background 120ms;
}
.hc-popular-searches a:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* ═══════════════════════════════════════════════════════════
 * SHELL
 * ═══════════════════════════════════════════════════════════ */
.hc-main { max-width: 1240px; margin: 0 auto; padding: 64px 32px 96px; }
.hc-section-head {
  display: flex; align-items: end; justify-content: space-between;
  margin-bottom: 28px; gap: 32px;
}
.hc-section-head .eyebrow {
  font-family: var(--font-display); font-size: 12px; font-weight: var(--fw-semi);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-brand-accent); margin-bottom: 8px;
}
.hc-section-head h2 {
  font-family: var(--font-display); font-weight: var(--fw-semi);
  font-size: 36px; letter-spacing: -0.025em; line-height: 1.05;
  color: var(--color-brand-primary); margin: 0;
}
.hc-section-head .head-right {
  font-family: var(--font-body); font-size: 14px;
  color: var(--text-tertiary); max-width: 360px; text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════
 * CATEGORIES GRID
 * ═══════════════════════════════════════════════════════════ */
.hc-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hc-cat {
  background: #fff; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-l); padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 200ms var(--ease-emphasis), box-shadow 200ms, border-color 200ms;
  box-shadow: var(--shadow-xs); position: relative; overflow: hidden;
}
.hc-cat:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); border-color: var(--color-brand-accent); }
.hc-cat .ic {
  width: 48px; height: 48px; border-radius: var(--radius-m);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-light-blue); color: var(--color-brand-primary);
  margin-bottom: 8px; flex-shrink: 0;
}
.hc-cat .ic svg { width: 26px; height: 26px; }
.hc-cat h3 {
  font-family: var(--font-display); font-weight: var(--fw-semi);
  font-size: 19px; letter-spacing: -0.01em;
  color: var(--color-brand-primary); margin: 0; line-height: 1.2;
}
.hc-cat h3 a { color: inherit; }
.hc-cat p {
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  color: var(--text-tertiary); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hc-cat .meta {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-body); font-size: 12px; color: var(--text-tertiary);
}
.hc-cat .meta .count { font-family: var(--font-mono); font-weight: var(--fw-semi); color: var(--color-brand-primary); }
.hc-cat .meta .arrow {
  color: var(--color-brand-accent); font-weight: var(--fw-semi);
  transition: transform 200ms var(--ease-emphasis);
}
.hc-cat:hover .meta .arrow { transform: translateX(4px); }

/* ═══════════════════════════════════════════════════════════
 * POPULAR ARTICLES
 * ═══════════════════════════════════════════════════════════ */
.hc-popular { margin-top: 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hc-pop-card {
  background: #fff; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-l); padding: 24px 28px;
  box-shadow: var(--shadow-xs);
}
.hc-pop-card .pop-head {
  font-family: var(--font-display); font-size: 12px; font-weight: var(--fw-semi);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-brand-accent); margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.hc-pop-card .pop-head::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-accent); }
.hc-pop-list { list-style: none; margin: 0; padding: 0; }
.hc-pop-list li {
  display: grid; grid-template-columns: 32px 1fr auto;
  gap: 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--border-subtle);
  transition: padding 120ms;
}
.hc-pop-list li:last-child { border-bottom: 0; }
.hc-pop-list li:hover { padding-left: 6px; }
.hc-pop-list li:hover .pop-title a { color: var(--color-brand-accent); }
.hc-pop-list .pop-num {
  font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-semi);
  color: var(--text-placeholder); letter-spacing: 0.04em;
}
.hc-pop-list .pop-title a {
  font-family: var(--font-body); font-size: 14.5px; font-weight: var(--fw-semi);
  color: var(--color-brand-primary); line-height: 1.4;
  transition: color 120ms;
}
.hc-pop-list .pop-cat { font-family: var(--font-body); font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.hc-pop-list .pop-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-placeholder); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════
 * CONTACT CTA
 * ═══════════════════════════════════════════════════════════ */
.hc-contact-cta {
  margin-top: 80px; background: var(--color-brand-primary); color: #fff;
  border-radius: var(--radius-l); padding: 48px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px;
  align-items: center; position: relative; overflow: hidden;
}
.hc-contact-cta::before {
  content: ""; position: absolute; width: 280px; height: 280px;
  border-radius: 50%; background: var(--color-brand-accent);
  opacity: 0.12; right: -80px; top: -80px; pointer-events: none;
}
.hc-contact-cta .cta-eyebrow {
  font-family: var(--font-display); font-size: 12px; font-weight: var(--fw-semi);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-brand-accent); margin-bottom: 12px;
}
.hc-contact-cta h2 {
  font-family: var(--font-display); font-weight: var(--fw-semi);
  font-size: 36px; letter-spacing: -0.02em; line-height: 1.05;
  margin: 0 0 14px; color: #fff; text-wrap: balance;
}
.hc-contact-cta p {
  font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  color: rgba(255,255,255,0.78); margin: 0; max-width: 480px; text-wrap: pretty;
}
.hc-contact-actions { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
.hc-contact-action {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-m); padding: 16px 20px;
  display: flex; align-items: center; gap: 14px;
  transition: background 120ms, border-color 120ms;
  color: #fff;
}
.hc-contact-action:hover { background: rgba(255,255,255,0.12); border-color: var(--color-brand-accent); color: #fff; }
.hc-contact-action .ic-wrap {
  width: 40px; height: 40px; border-radius: var(--radius-s);
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hc-contact-action .ic-wrap svg { width: 20px; height: 20px; color: #fff; }
.hc-contact-action .info { display: flex; flex-direction: column; }
.hc-contact-action .info b { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: 14px; color: #fff; }
.hc-contact-action .info span { font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 2px; }
.hc-contact-action .arrow { margin-left: auto; color: rgba(255,255,255,0.4); transition: transform 120ms, color 120ms; }
.hc-contact-action:hover .arrow { color: var(--color-brand-accent); transform: translateX(4px); }

/* ═══════════════════════════════════════════════════════════
 * BREADCRUMB
 * ═══════════════════════════════════════════════════════════ */
.hc-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--text-tertiary); margin-bottom: 24px; flex-wrap: wrap;
  list-style: none; padding: 0;
}
.hc-breadcrumb a { color: var(--text-tertiary); transition: color 120ms; }
.hc-breadcrumb a:hover { color: var(--color-brand-accent); }
.hc-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.hc-breadcrumb li + li::before { content: "›"; color: var(--text-placeholder); }
.hc-breadcrumb li:last-child { color: var(--color-brand-primary); font-weight: var(--fw-semi); }
.hc-breadcrumb li:last-child a { color: var(--color-brand-primary); font-weight: var(--fw-semi); pointer-events: none; }

/* ═══════════════════════════════════════════════════════════
 * PAGE HEADER (category/section)
 * ═══════════════════════════════════════════════════════════ */
.hc-page-header {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 28px; align-items: start;
  padding-bottom: 36px; margin-bottom: 40px;
  border-bottom: 1px solid var(--border-subtle);
}
.hc-page-header .ic-large {
  width: 80px; height: 80px; border-radius: var(--radius-l);
  background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-darkblue-700) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-brand-accent); flex-shrink: 0; position: relative;
}
.hc-page-header .ic-large svg { width: 40px; height: 40px; position: relative; z-index: 1; }
.hc-page-header .eyebrow {
  font-family: var(--font-display); font-size: 12px; font-weight: var(--fw-semi);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-brand-accent); margin-bottom: 8px;
}
.hc-page-header h1 {
  font-family: var(--font-display); font-weight: var(--fw-semi);
  font-size: 44px; letter-spacing: -0.025em; line-height: 1.05;
  color: var(--color-brand-primary); margin: 0 0 12px; text-wrap: balance;
}
.hc-page-header .desc {
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  color: var(--text-tertiary); max-width: 640px; margin: 0; text-wrap: pretty;
}
.hc-page-header .meta {
  display: flex; gap: 24px; margin-top: 18px;
  font-family: var(--font-body); font-size: 13px; color: var(--text-tertiary);
}
.hc-page-header .meta b { font-family: var(--font-mono); font-weight: var(--fw-semi); color: var(--color-brand-primary); }

/* ═══════════════════════════════════════════════════════════
 * SECTIONS GRID (in category)
 * ═══════════════════════════════════════════════════════════ */
.hc-sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hc-sec-card {
  background: #fff; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-l); padding: 28px;
  box-shadow: var(--shadow-xs);
  transition: transform 200ms, box-shadow 200ms, border-color 200ms;
  display: block;
}
.hc-sec-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); border-color: var(--color-brand-accent); color: var(--text-primary); }
.hc-sec-card .sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hc-sec-card h3 {
  font-family: var(--font-display); font-weight: var(--fw-semi);
  font-size: 19px; letter-spacing: -0.01em;
  color: var(--color-brand-primary); margin: 0;
}
.hc-sec-card h3 a { color: inherit; }
.hc-sec-card .badge {
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-semi);
  color: var(--color-brand-primary); background: var(--color-bg-light-blue);
  padding: 4px 10px; border-radius: var(--radius-pill); letter-spacing: 0.02em;
}
.hc-sec-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hc-sec-card ul li a {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 14px; color: var(--text-secondary);
  transition: color 120ms, transform 120ms;
}
.hc-sec-card ul li a:hover { color: var(--color-brand-accent); transform: translateX(2px); }
.hc-sec-card ul li a::before {
  content: ""; width: 14px; height: 14px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") no-repeat center / contain;
  color: var(--text-placeholder);
}
.hc-sec-card .more {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-body); font-size: 13px; font-weight: var(--fw-semi);
  color: var(--color-brand-accent);
}

/* ═══════════════════════════════════════════════════════════
 * SECTION (Article list) layout
 * ═══════════════════════════════════════════════════════════ */
.hc-art-layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
.hc-side-nav { position: sticky; top: 100px; }
.hc-side-nav .side-title {
  font-family: var(--font-display); font-size: 11px; font-weight: var(--fw-semi);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 14px;
}
.hc-side-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hc-side-nav ul li a {
  display: block; padding: 10px 14px; border-radius: var(--radius-s);
  font-family: var(--font-body); font-size: 14px; color: var(--text-secondary);
  transition: background 120ms, color 120ms;
}
.hc-side-nav ul li a:hover { background: var(--bg-subtle); color: var(--color-brand-primary); }
.hc-side-nav ul li a.active { background: var(--color-brand-primary); color: #fff; font-weight: var(--fw-semi); }

.hc-deep-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 20px; }
.hc-deep-head h2 {
  font-family: var(--font-display); font-weight: var(--fw-semi);
  font-size: 24px; letter-spacing: -0.015em;
  color: var(--color-brand-primary); margin: 0;
}

.hc-art-list { list-style: none; margin: 0; padding: 0; }
.hc-art-list-item {
  display: grid; grid-template-columns: 48px 1fr auto;
  gap: 20px; align-items: center;
  padding: 22px 24px;
  background: #fff; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-m); margin-bottom: 10px;
  transition: transform 120ms, box-shadow 120ms, border-color 120ms;
  color: var(--text-primary);
}
.hc-art-list-item:hover { transform: translateX(4px); box-shadow: var(--shadow-s); border-color: var(--color-brand-accent); color: var(--text-primary); }
.hc-art-list-item:hover h4 { color: var(--color-brand-accent); }
.hc-art-list-item .ic {
  width: 48px; height: 48px; background: var(--bg-subtle);
  border-radius: var(--radius-s);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-brand-primary); flex-shrink: 0;
}
.hc-art-list-item .ic svg { width: 22px; height: 22px; }
.hc-art-list-item h4 {
  font-family: var(--font-display); font-weight: var(--fw-semi);
  font-size: 16px; letter-spacing: -0.005em;
  color: var(--color-brand-primary); margin: 0 0 4px; transition: color 120ms;
}
.hc-art-list-item .desc {
  font-family: var(--font-body); font-size: 13px;
  color: var(--text-tertiary); line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hc-art-list-item .meta {
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: var(--font-body); font-size: 11.5px;
  color: var(--text-tertiary); gap: 4px; white-space: nowrap; flex-shrink: 0;
}
.hc-art-list-item .meta .read-time {
  font-family: var(--font-mono); font-weight: var(--fw-semi);
  color: var(--color-brand-primary); font-size: 11px; letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════
 * ARTICLE PAGE
 * ═══════════════════════════════════════════════════════════ */
.hc-article-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr) 180px; gap: 36px; align-items: start; }
.hc-article {
  max-width: 980px; background: #fff;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-l);
  padding: 48px 56px 40px; box-shadow: var(--shadow-xs);
}
.hc-article .art-cat {
  font-family: var(--font-display); font-size: 11px; font-weight: var(--fw-semi);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-brand-accent); margin-bottom: 14px;
}
.hc-article h1 {
  font-family: var(--font-display); font-weight: var(--fw-semi);
  font-size: 36px; letter-spacing: -0.025em; line-height: 1.1;
  color: var(--color-brand-primary); margin: 0 0 20px; text-wrap: balance;
}
.hc-article .art-meta {
  display: flex; gap: 20px; align-items: center;
  padding-bottom: 28px; margin-bottom: 28px;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-body); font-size: 13px; color: var(--text-tertiary);
  flex-wrap: wrap;
}
.hc-article .art-meta .author { display: flex; align-items: center; gap: 10px; }
.hc-article .art-meta .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-brand-accent), var(--color-accent-coral));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 13px;
}
.hc-article .art-meta b { color: var(--color-brand-primary); font-family: var(--font-display); font-weight: var(--fw-semi); }
.hc-article .art-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-placeholder); }

.hc-article .body, .hc-article .article-body {
  font-family: var(--font-body); font-size: 16px; line-height: 1.65;
  color: var(--text-secondary);
}
.hc-article .body p, .hc-article .article-body p { margin: 0 0 18px; text-wrap: pretty; }
.hc-article .body h2, .hc-article .article-body h2 {
  font-family: var(--font-display); font-weight: var(--fw-semi);
  font-size: 24px; letter-spacing: -0.015em;
  color: var(--color-brand-primary); margin: 36px 0 14px;
}
.hc-article .body h3, .hc-article .article-body h3 {
  font-family: var(--font-display); font-weight: var(--fw-semi);
  font-size: 19px; color: var(--color-brand-primary); margin: 28px 0 10px;
}
.hc-article .body ul, .hc-article .body ol,
.hc-article .article-body ul, .hc-article .article-body ol {
  padding-left: 22px; margin: 0 0 18px;
}
.hc-article .body li, .hc-article .article-body li { margin-bottom: 8px; }
.hc-article .body strong, .hc-article .article-body strong { color: var(--color-brand-primary); font-weight: var(--fw-semi); }
.hc-article .body code, .hc-article .article-body code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--bg-app); padding: 2px 6px;
  border-radius: var(--radius-xs); color: var(--color-brand-primary);
}
.hc-article .body blockquote, .hc-article .article-body blockquote {
  margin: 24px 0; padding: 18px 24px;
  background: var(--bg-subtle); border-left: 4px solid var(--color-brand-accent);
  border-radius: var(--radius-s); font-style: italic; color: var(--color-brand-primary);
}
.hc-article .body img, .hc-article .article-body img { border-radius: var(--radius-m); margin: 18px 0; }

/* Feedback (vote) */
.hc-feedback {
  margin-top: 40px; padding: 24px;
  background: var(--bg-app); border-radius: var(--radius-m);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.hc-feedback .q {
  font-family: var(--font-display); font-weight: var(--fw-semi);
  font-size: 15px; color: var(--color-brand-primary);
}
.hc-feedback .actions { display: flex; gap: 8px; }
.hc-feedback button,
.hc-feedback .article-vote-up,
.hc-feedback .article-vote-down {
  background: #fff; border: 1px solid var(--border-primary);
  border-radius: var(--radius-pill); padding: 8px 18px;
  font-family: var(--font-body); font-size: 13px; font-weight: var(--fw-semi);
  color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 120ms;
}
.hc-feedback button:hover,
.hc-feedback .article-vote-up:hover,
.hc-feedback .article-vote-down:hover {
  border-color: var(--color-brand-accent); color: var(--color-brand-accent);
}

/* TOC */
.hc-toc { position: sticky; top: 100px; }
.hc-toc .toc-title {
  font-family: var(--font-display); font-size: 11px; font-weight: var(--fw-semi);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 14px;
}
.hc-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-subtle); }
.hc-toc ul li a {
  display: block; padding: 8px 16px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--text-tertiary); line-height: 1.4;
  border-left: 2px solid transparent; margin-left: -1px;
  transition: color 120ms, border-color 120ms;
}
.hc-toc ul li a:hover { color: var(--color-brand-primary); }

/* Related */
.hc-related { margin-top: 56px; }
.hc-related h3 {
  font-family: var(--font-display); font-weight: var(--fw-semi);
  font-size: 22px; letter-spacing: -0.015em;
  color: var(--color-brand-primary); margin: 0 0 20px;
}
.hc-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hc-related-grid a {
  display: flex; gap: 14px; align-items: center;
  padding: 16px 20px;
  background: #fff; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-m);
  font-family: var(--font-body); font-size: 14px;
  color: var(--color-brand-primary); font-weight: var(--fw-semi);
  transition: border-color 120ms, transform 120ms;
}
.hc-related-grid a:hover { border-color: var(--color-brand-accent); transform: translateX(2px); color: var(--color-brand-primary); }
.hc-related-grid a::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0;
  background: var(--color-brand-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ═══════════════════════════════════════════════════════════
 * FOOTER
 * ═══════════════════════════════════════════════════════════ */
.brand-bar { height: 4px; background: linear-gradient(90deg, var(--color-brand-accent) 0%, var(--color-brand-accent) 30%, var(--color-accent-coral) 30%, var(--color-accent-coral) 60%, var(--color-accent-aqua) 60%, var(--color-accent-aqua) 100%); }
.hc-footer { background: var(--color-brand-primary); color: rgba(255,255,255,0.6); padding: 56px 32px 32px; margin-top: 80px; }
.hc-footer-inner { max-width: 1240px; margin: 0 auto; }
.hc-footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px; padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.hc-footer .col h5 {
  font-family: var(--font-display); font-size: 11px; font-weight: var(--fw-semi);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin: 0 0 18px;
}
.hc-footer .col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hc-footer .col ul li a { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.74); transition: color 120ms; }
.hc-footer .col ul li a:hover { color: var(--color-brand-accent); }
.hc-footer .brand-col img.foot-logo { height: 28px; margin-bottom: 18px; filter: brightness(0) invert(1); }
.hc-footer .brand-col p { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.6); max-width: 320px; margin: 0 0 20px; text-wrap: pretty; }
.hc-footer .regulators { display: flex; align-items: center; gap: 14px; }
.hc-footer .regulators img { height: 32px; filter: brightness(0) invert(1); opacity: 0.66; }
.hc-footer-bottom { padding-top: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.hc-footer-bottom .legal { font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,0.4); }
.hc-footer-bottom .legal-links { display: flex; gap: 18px; font-family: var(--font-body); font-size: 12px; }
.hc-footer-bottom .legal-links a { color: rgba(255,255,255,0.6); transition: color 120ms; }
.hc-footer-bottom .legal-links a:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════
 * Zendesk request / forms (basic styling)
 * ═══════════════════════════════════════════════════════════ */
.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="search"],
.form select,
.form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-s);
  font-family: var(--font-body); font-size: 14px;
  background: #fff; color: var(--color-brand-primary);
  transition: border-color 120ms, box-shadow 120ms;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 0; border-color: var(--color-brand-accent);
  box-shadow: 0 0 0 3px rgba(248,47,86,0.18);
}
.form label {
  display: block; margin-bottom: 6px;
  font-family: var(--font-display); font-size: 13px; font-weight: var(--fw-semi);
  color: var(--color-brand-primary);
}
.form .form-field { margin-bottom: 16px; }
.button, .btn, button[type="submit"] {
  background: var(--color-brand-accent); color: #fff;
  border: 0; border-radius: var(--radius-pill);
  padding: 12px 24px;
  font-family: var(--font-body); font-size: 14px; font-weight: var(--fw-semi);
  transition: background 120ms;
}
.button:hover, .btn:hover, button[type="submit"]:hover {
  background: var(--bg-accent-hover); color: #fff;
}
.button-secondary { background: #fff; color: var(--color-brand-primary); border: 1px solid var(--border-primary); }
.button-secondary:hover { background: var(--bg-app); color: var(--color-brand-primary); }

/* Search results */
.search-results { list-style: none; margin: 0; padding: 0; }
.search-result {
  background: #fff; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-m); padding: 22px 24px; margin-bottom: 12px;
}
.search-result-title { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: 18px; margin: 0 0 6px; }
.search-result-title a { color: var(--color-brand-primary); }
.search-result-title a:hover { color: var(--color-brand-accent); }
.search-result-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.04em; margin-bottom: 8px; }
.search-result-description { font-family: var(--font-body); font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
.search-result-description em { background: rgba(248,47,86,0.12); color: var(--color-brand-accent); font-style: normal; padding: 1px 3px; border-radius: 3px; }

/* Pagination */
.pagination {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 32px; padding: 0; list-style: none;
}
.pagination li a, .pagination li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 12px;
  border-radius: var(--radius-s); border: 1px solid var(--border-subtle);
  background: #fff;
  font-family: var(--font-body); font-size: 13px; font-weight: var(--fw-semi);
  color: var(--text-secondary);
  transition: all 120ms;
}
.pagination li a:hover { border-color: var(--color-brand-accent); color: var(--color-brand-accent); }
.pagination li.active span { background: var(--color-brand-primary); color: #fff; border-color: var(--color-brand-primary); }

/* Responsive */
@media (max-width: 1100px) {
  .hc-hero { text-align: center; }
  .hc-hero::after { display: none; }
  .hc-hero-inner { margin: 0 auto; text-align: center; }
  .hc-hero-inner .hc-hero-sub { margin-left: auto; margin-right: auto; }
  .hc-search { margin-left: auto; margin-right: auto; }
}
@media (max-width: 960px) {
  .hc-cat-grid, .hc-sec-grid, .hc-popular, .hc-related-grid { grid-template-columns: 1fr; }
  .hc-art-layout, .hc-article-layout { grid-template-columns: 1fr; }
  .hc-side-nav, .hc-toc { position: static; }
  .hc-toc { display: none; }
  .hc-contact-cta { grid-template-columns: 1fr; padding: 32px; }
  .hc-page-header { grid-template-columns: 1fr; }
  .hc-page-header .ic-large { width: 64px; height: 64px; }
  .hc-page-header h1 { font-size: 32px; }
  .hc-footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hc-nav { display: none; }
  .hc-topbar-inner { padding: 14px 20px; gap: 12px; }
  .hc-main { padding: 32px 20px 56px; }
  .hc-article { padding: 28px 24px; }
}
@media (max-width: 560px) {
  .hc-footer-top { grid-template-columns: 1fr; }
  .hc-hero { padding-left: 20px; padding-right: 20px; }
  .hc-hero h1 { font-size: 34px !important; }
  .hc-hero .hc-hero-sub { font-size: 15px !important; }
  .hc-hero-inner { padding-bottom: 0; }
  .hc-search { flex-wrap: nowrap; padding: 5px; }
  .hc-search input { font-size: 15px !important; padding: 11px 12px !important; }
  .hc-search button { padding: 10px 16px !important; font-size: 14px; }
  .hc-topbar .brand .label { display: none; }
  .hc-art-list-item { grid-template-columns: 40px 1fr; }
  .hc-art-list-item .meta { display: none; }
  .hc-article h1 { font-size: 28px; }
  .hc-contact-cta h2, .hc-section-head h2 { font-size: 28px; }
  .hc-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hc-section-head .head-right { max-width: none; }
}


/* ═══════════════════════════════════════════════════════════
 * Overrides for Zendesk default helper output
 * ═══════════════════════════════════════════════════════════ */

/* {{breadcrumbs}} emits <ol class="breadcrumbs"><li><a>…</a></li>…</ol> */
.breadcrumbs {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.breadcrumbs li + li::before {
  content: "›";
  color: var(--text-placeholder);
}
.breadcrumbs li a {
  color: var(--text-tertiary);
  transition: color 120ms;
}
.breadcrumbs li a:hover { color: var(--color-brand-accent); }
.breadcrumbs li:last-child,
.breadcrumbs li:last-child a {
  color: var(--color-brand-primary);
  font-weight: var(--fw-semi);
  pointer-events: none;
}

/* {{vote 'up' / 'down' / 'label'}} emits anchors */
.article-vote-up,
.article-vote-down {
  background: #fff;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-semi);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: all 120ms;
}
.article-vote-up::before { content: "👍"; }
.article-vote-down::before { content: "👎"; }
.article-vote-up:hover,
.article-vote-down:hover {
  border-color: var(--color-brand-accent);
  color: var(--color-brand-accent);
}
.article-vote-up.button-vote-up-positive {
  background: var(--bg-positive-subtle);
  border-color: var(--color-green-600);
  color: var(--color-green-800);
}
.article-vote-down.button-vote-down-negative {
  background: var(--bg-negative-subtle);
  border-color: var(--color-red-500);
  color: var(--color-red-700);
}
.article-vote-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
  margin-left: 8px;
}

/* {{user_avatar}} emits <img> */
.user-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-l);
}

/* Pagination Zendesk emits with .pagination + a.prev/next/page */
.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 32px;
  padding: 0;
  list-style: none;
}
.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-s);
  border: 1px solid var(--border-subtle);
  background: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-semi);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 120ms;
}
.pagination a:hover {
  border-color: var(--color-brand-accent);
  color: var(--color-brand-accent);
}
.pagination .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-s);
  background: var(--color-brand-primary);
  color: #fff;
  border: 1px solid var(--color-brand-primary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-semi);
}

/* Form helper output: {{#form}}{{input}}{{wysiwyg}}{{/form}} */
.form input[type="text"],
.form input[type="email"],
.form select,
.form textarea,
form input[type="text"],
form input[type="email"],
form select,
form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-s);
  font-family: var(--font-body);
  font-size: 14px;
  background: #fff;
  color: var(--color-brand-primary);
  transition: border-color 120ms, box-shadow 120ms;
  margin-bottom: 14px;
}
.form input[type="text"]:focus,
form input[type="text"]:focus,
.form textarea:focus,
form textarea:focus {
  outline: 0;
  border-color: var(--color-brand-accent);
  box-shadow: 0 0 0 3px rgba(248,47,86,0.18);
}
.form label,
form label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-semi);
  color: var(--color-brand-primary);
}
.form input[type="submit"],
form input[type="submit"] {
  background: var(--color-brand-accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: background 120ms;
}
.form input[type="submit"]:hover,
form input[type="submit"]:hover {
  background: var(--bg-accent-hover);
}

/* WYSIWYG editor area */
.wysiwyg-editor,
[contenteditable="true"] {
  min-height: 140px;
  padding: 12px 14px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-s);
  font-family: var(--font-body);
  font-size: 14px;
  background: #fff;
  margin-bottom: 14px;
}


/* Single-column variant for the promoted articles section */
.hc-popular--single { grid-template-columns: 1fr !important; }
.hc-popular--single .hc-pop-card { max-width: 900px; margin: 0 auto; }


/* ═══════════════════════════════════════════════════════════
 * Request detail page (request_page.hbs)
 * ═══════════════════════════════════════════════════════════ */
.hc-request-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}
.hc-request-thread { min-width: 0; }

.hc-comment {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border-subtle);
}
.hc-comment:last-of-type { border-bottom: 0; }
.hc-comment-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-subtle);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hc-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hc-comment-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.hc-comment-head strong {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: 15px;
  color: var(--color-brand-accent);
}
.hc-comment-head span {
  font-size: 12px;
  color: var(--text-placeholder);
}
.hc-comment-text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.hc-comment-text p { margin: 0 0 12px; }
.hc-comment-text p:last-child { margin-bottom: 0; }
.hc-comment-attachments {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hc-comment-attachments a {
  font-size: 12px;
  color: var(--color-brand-accent);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}

.hc-reply {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  margin-top: 8px;
}
.hc-reply-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-subtle);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hc-reply-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hc-reply-form { min-width: 0; }
.hc-reply-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-m);
  font-family: var(--font-body);
  font-size: 14px;
  background: #fff;
  resize: vertical;
  transition: border-color 120ms, box-shadow 120ms;
}
.hc-reply-form textarea:focus {
  outline: 0;
  border-color: var(--color-brand-accent);
  box-shadow: 0 0 0 3px rgba(248,47,86,0.18);
}
.hc-reply-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.hc-request-meta {
  background: var(--bg-app);
  border-radius: var(--radius-l);
  padding: 24px 28px;
  position: sticky;
  top: 100px;
}
.hc-request-meta dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.hc-request-meta dt {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}
.hc-request-meta dd {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: 14px;
  color: var(--color-brand-primary);
}
.hc-meta-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0 18px;
}
.hc-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-semi);
  text-transform: capitalize;
  color: #fff;
  background: var(--color-brand-accent);
}
.hc-status--open, .hc-status--new { background: var(--color-brand-accent); }
.hc-status--pending, .hc-status--hold { background: var(--color-orange-500); }
.hc-status--solved, .hc-status--closed { background: var(--color-green-600); }

@media (max-width: 960px) {
  .hc-request-layout { grid-template-columns: 1fr; }
  .hc-request-meta { position: static; order: -1; }
}


/* ═══════════════════════════════════════════════════════════
 * Lightbox para imágenes del artículo
 * ═══════════════════════════════════════════════════════════ */
.hc-article .article-body img.hc-zoomable,
.hc-article .article-body img {
  cursor: zoom-in;
  transition: filter 120ms;
}
.hc-article .article-body img.hc-zoomable:hover { filter: brightness(0.94); }

.hc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: rgba(4, 27, 61, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.hc-lightbox.open {
  display: flex;
  animation: hc-lightbox-in 200ms ease;
}
@keyframes hc-lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hc-lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: var(--radius-m);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  cursor: default;
  object-fit: contain;
}
.hc-lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms;
}
.hc-lightbox-close:hover { background: var(--color-brand-accent); }


/* Cards-as-links: heredar color y mostrar cursor pointer */
a.hc-cat, a.hc-sec-card { color: inherit; text-decoration: none; cursor: pointer; }
a.hc-cat:hover, a.hc-sec-card:hover { color: inherit; }
a.hc-cat h3, a.hc-sec-card h3 { color: var(--color-brand-primary); }


/* ═══════════════════════════════════════════════════════════
 * Banda de reguladores (footer)
 * ═══════════════════════════════════════════════════════════ */
.hc-regulators-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 28px 0;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hc-regulators-band .reg-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  flex-shrink: 0;
}
.hc-regulators-band .reg-logos {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
}
.hc-regulators-band .reg-logos img {
  height: 52px;
  width: auto;
  opacity: 0.9;
  object-fit: contain;
}
@media (max-width: 720px) {
  .hc-regulators-band { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hc-regulators-band .reg-logos { justify-content: flex-start; gap: 28px; }
  .hc-regulators-band .reg-logos img { height: 40px; }
}