/* Estilos propios del Centro de ayuda; no alteran las demás páginas. */
.help-page {
  --vote-container: 1228px;
}

.help-page main { --vote-pink: #f5007e; }
.help-page .container { width: min(calc(100% - 72px), var(--vote-container)); }

.help-page .help-hero { background: linear-gradient(110deg, #fff8fc 0%, #fff0f8 57%, #fff5fa 100%); }
.help-page .help-hero::after { display: none; }
.help-page .help-hero .page-hero__inner {
  position: relative;
  display: block;
  min-height: 320px;
  padding-block: 24px 22px;
}
.help-page .help-hero .hero-copy { width: min(72%, 700px); margin-left: 16px; }
.help-page .help-hero .breadcrumbs { margin-bottom: 42px; font-size: 1rem; }
.help-page .help-hero h1 {
  font-size: clamp(3.6rem, 6.4vw, 5.2rem);
  font-weight: 800;
  line-height: 1.02;
}
.help-page .help-hero .page-hero__lead {
  margin-top: 4px;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.3;
}
.help-page .help-hero .search-box {
  display: block;
  width: 100%;
  max-width: 686px;
  margin-top: 26px;
}
.help-page .help-hero .search-box input {
  min-height: 72px;
  padding-left: 88px;
  border-color: #cbd9f1;
  box-shadow: none;
}
.help-page .help-hero .search-box img { width: 36px; height: 36px; }
.help-page .help-hero .search-copy { left: 88px; line-height: 1.3; }
.help-page .help-hero .search-copy span { font-weight: 500; }
.help-page .help-hero .search-copy small { font-size: 0.88rem; }
.help-page .help-hero .page-hero__illustration {
  position: absolute;
  top: 38px;
  right: 0;
  display: block;
  width: min(40%, 390px);
  min-height: 0;
  pointer-events: none;
}
.help-page .help-hero .page-hero__illustration img { width: 100%; height: auto; }

.help-page #help-resources {
  padding-block: 20px 16px;
  background: linear-gradient(180deg, #fff 0%, #fff8fc 100%);
}
.help-page #help-resources > .section { padding-block: 0; }
.help-page #help-resources > .section + .section { margin-top: 18px; }
.help-page .help-category-grid { gap: 12px; }
.help-page .help-category-grid .icon-card {
  min-height: 108px;
  gap: 14px;
  padding: 12px 14px;
  border-color: #d6e3f8;
  border-radius: 6px;
  box-shadow: none;
}
.help-page .help-category-grid .icon-circle,
.help-page .action-list .icon-circle,
.help-page .security-links .icon-circle { flex-shrink: 0; background: transparent; }
.help-page .help-category-grid .icon-circle img,
.help-page .action-list .icon-circle img,
.help-page .security-links .icon-circle img,
.help-page .support-banner-icon { object-fit: contain; }
.help-page .help-category-grid .icon-circle,
.help-page .help-category-grid .icon-circle img { width: 80px; height: 80px; }
.help-page .help-category-grid .icon-card > span:nth-child(2) { min-width: 0; }
.help-page .help-category-grid strong { color: #101b59; font-size: 0.94rem; line-height: 1.18; }
.help-page .help-category-grid small { color: #435ba4; font-size: 0.88rem; line-height: 1.3; }
.help-page .help-category-grid .chevron { width: 22px; flex-shrink: 0; }
.help-page .help-category-grid .chevron,
.help-page .link-list a img,
.help-page .action-list .chevron {
  filter: brightness(0) saturate(100%) invert(27%) sepia(62%) saturate(1034%) hue-rotate(195deg) brightness(95%) contrast(92%);
}

.help-page .help-columns {
  align-items: stretch;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  gap: 12px;
}
.help-page .content-card,
.help-page .security-links,
.help-page .support-callout { border-color: #d6e3f8; border-radius: 6px; box-shadow: none; }
.help-page .content-card { padding: 18px 22px; }
.help-page .content-card > h2 {
  margin-bottom: 10px;
  color: #101b59;
  font-size: 1.3rem;
  line-height: 1.25;
}
.help-page .link-list a { min-height: 40px; color: #405aa5; font-size: 0.95rem; }
.help-page .link-list a img { width: 20px; }
.help-page .content-card > .button-block {
  min-height: 45px;
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.94rem;
}
.help-page .action-list { gap: 10px; }
.help-page .action-list a {
  min-height: 61px;
  gap: 10px;
  padding: 5px 12px;
  border-radius: 9px;
  background: #fff0f7;
}
.help-page .action-list .icon-circle,
.help-page .action-list .icon-circle img { width: 52px; height: 52px; }
.help-page .action-list strong { color: #101b59; font-size: 0.94rem; }
.help-page .action-list .chevron { width: 20px; }

.help-page .security-links { gap: 0; }
.help-page .security-links .mini-feature { min-width: 0; gap: 10px; padding: 0 12px; }
.help-page .security-links .mini-feature:first-child { padding-left: 0; }
.help-page .security-links .mini-feature:last-child { padding-right: 0; }
.help-page .security-links .icon-circle,
.help-page .security-links .icon-circle img { width: 70px; height: 70px; }
.help-page .security-links .icon-circle img { padding: 0; border-radius: 0; background: transparent; }
.help-page .security-links .mini-feature > span:nth-child(2) { min-width: 0; }
.help-page .security-links strong { color: #101b59; font-size: 0.87rem; line-height: 1.22; }
.help-page .security-links small { color: #435ba4; font-size: 0.84rem; line-height: 1.28; }
.help-page .security-links .mini-feature::after {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  margin-left: auto;
  border-top: 2px solid #3755b2;
  border-right: 2px solid #3755b2;
  content: "";
  transform: rotate(45deg);
}
.help-page .support-callout {
  min-height: 98px;
  gap: 16px;
  padding: 12px 24px;
  background: #fff;
}
.help-page .support-banner-icon { width: 80px; height: 80px; flex-basis: 80px; }
.help-page .support-callout h2 { color: #101b59; font-size: 1.3rem; line-height: 1.2; }
.help-page .support-callout p { color: #435ba4; font-size: 0.95rem; }
.help-page .support-callout .button {
  min-width: 290px;
  min-height: 54px;
  border-radius: 6px;
  background: var(--vote-pink);
  font-size: 0.98rem;
  font-weight: 600;
}

.help-page .search-status { position: absolute !important; }

@media (max-width: 1023px) {
  .help-page .help-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .help-page .help-category-grid .icon-circle,
  .help-page .help-category-grid .icon-circle img { width: 64px; height: 64px; }
  .help-page .security-links .icon-circle,
  .help-page .security-links .icon-circle img { width: 56px; height: 56px; }
}

@media (max-width: 820px) {
  .help-page .container { width: min(calc(100% - 32px), var(--vote-container)); }
  .help-page .help-hero .hero-copy { width: 68%; }
  .help-page .help-hero .page-hero__illustration { width: 36%; top: 60px; }
  .help-page .help-hero h1 { font-size: clamp(3rem, 7vw, 4.2rem); }
  .help-page .help-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-page .help-columns { grid-template-columns: minmax(0, 1fr); }
  .help-page .security-links .mini-feature { padding-inline: 10px; }
}

@media (max-width: 767px) {
  .help-page .help-hero .page-hero__inner { min-height: 0; padding-block: 25px 30px; }
  .help-page .help-hero .hero-copy { width: 100%; margin-left: 0; }
  .help-page .help-hero .breadcrumbs { margin-bottom: 24px; }
  .help-page .help-hero h1 { font-size: clamp(2.6rem, 9vw, 4rem); }
  .help-page .help-hero .page-hero__lead { font-size: clamp(1.06rem, 4vw, 1.35rem); }
  .help-page .help-hero .page-hero__illustration { display: none; }
  .help-page .help-hero .search-box { margin-top: 22px; }
  .help-page .help-hero .search-box input { min-height: 66px; }
  .help-page .security-links { grid-template-columns: minmax(0, 1fr); }
  .help-page .security-links .mini-feature,
  .help-page .security-links .mini-feature:first-child,
  .help-page .security-links .mini-feature:last-child {
    padding: 9px 0;
    border-right: 0;
    border-bottom: 1px solid var(--vote-line);
  }
  .help-page .security-links .mini-feature:last-child { border-bottom: 0; }
  .help-page .support-callout { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .help-page .support-banner-icon { width: 64px; height: 64px; margin: 0; }
  .help-page .support-callout > div { grid-column: 2; }
  .help-page .support-callout .button { width: 100%; min-width: 0; grid-column: 1 / -1; margin-left: 0; }
}

@media (max-width: 560px) {
  .help-page .container { width: min(calc(100% - 28px), var(--vote-container)); }
  .help-page .help-category-grid { grid-template-columns: minmax(0, 1fr); }
  .help-page .help-category-grid .icon-circle,
  .help-page .help-category-grid .icon-circle img { width: 72px; height: 72px; }
  .help-page .help-hero .search-copy { left: 64px; }
  .help-page .help-hero .search-box input { padding-left: 64px; }
  .help-page .help-hero .search-box img { left: 18px; width: 30px; height: 30px; }
  .help-page .content-card { padding: 18px; }
}