/* GENERADO AUTOMATICAMENTE - NO EDITAR ESTE FICHERO.
   Fuente con la documentacion completa: resources/assets-src/css/gc-home-system.src.css
   Regenerar: python3 tools/strip-asset-comments.py   (paso MANUAL) */

.gc-sys {
  --sec: 44px;
  --gap: 16px;
  --gap-lg: 24px;

  --gc-max: 1404px;

  --gc-pad: 0px;

  --gc-panel:   #2d2d2d;
  --gc-panel-2: #363636;
  --gc-line:    #2a2a2a;
  --gc-line-hi: #3d3d3d;

  --gc-text:  #e4e4e4;
  --gc-muted: #9a9a9a;
  --gc-faint: #6a6a6a;

  --gc-lime:   #a0e312;
  --gc-lime-d: #8fcc0f;

  --gc-violet: #9b7cf6;
  --gc-amber:  #f5b942;
  --gc-orange: #f0803c;

  --gc-radius:    12px;
  --gc-radius-sm: 11px;

  --gc-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gc-ease: .16s cubic-bezier(.4, 0, .2, 1);
}

@media (max-width: 760px) {
  .gc-sys {
    --sec: 34px;
    --gap: 12px;
    --gap-lg: 16px;

    --gc-pad: 0px;
  }
}

.gc-sys, .gc-sys * { box-sizing: border-box; }
.gc-sys { color: var(--gc-text); min-width: 0; }

.gc-sys img { max-width: 100%; height: auto; }

.gc-sys p,
.gc-sys h1, .gc-sys h2, .gc-sys h3, .gc-sys h4,
.gc-sys li, .gc-sys span, .gc-sys a,
.gc-sys .card, .gc-sys .card * {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.gc-sys .px,
.gc-sys .px-off,
.gc-sys .chip {
  overflow-wrap: normal;
  word-break: normal;
}

.gc-sys.sec,
.gc-sys .sec {
  max-width: var(--gc-max);
  margin: 0 auto var(--sec);
  padding: 0 var(--gc-pad);
}

.gc-sys.sec:last-child { margin-bottom: 0; }

.gc-sys .sec-h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  flex-wrap: wrap;
}

.gc-sys .sec-h__bar {
  flex: none;
  width: 3px;
  align-self: stretch;
  min-height: 26px;
  border-radius: 2px;
  background: var(--gc-lime);
}

.gc-sys .sec-h__txt { min-width: 0; flex: 1 1 auto; }

.gc-sys .sec-h__t {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--gc-text);
}

.gc-sys .sec-h__s {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--gc-muted);
}

.gc-sys .sec-h__all {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--gc-lime);
  text-decoration: none;
  transition: opacity var(--gc-ease);
}
.gc-sys .sec-h__all:hover,
.gc-sys .sec-h__all:focus-visible {
  opacity: .75;
  color: var(--gc-lime);
  text-decoration: none;
}
.gc-sys .sec-h__all svg { width: 15px; height: 15px; }

@media (max-width: 480px) {
  .gc-sys .sec-h { gap: 10px; }
  .gc-sys .sec-h__all { margin-left: 15px; }
}

.gc-sys .card {
  position: relative;
  display: block;
  min-width: 0;
  background-color: var(--gc-panel);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  padding: 16px;
  color: inherit;
  text-decoration: none;
  transition: transform var(--gc-ease), border-color var(--gc-ease), background var(--gc-ease);
}

.gc-sys a.card:hover,
.gc-sys a.card:focus-visible,
.gc-sys button.card:hover,
.gc-sys .card--link:hover {
  transform: translateY(-2px);
  border-color: var(--gc-line-hi);
  background-color: var(--gc-panel-2);
  text-decoration: none;
  color: inherit;
}

.gc-sys .card:focus-visible {
  outline: 2px solid var(--gc-lime);
  outline-offset: 2px;
}

.gc-sys .card__t {
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gc-text);
}
.gc-sys .card__d {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--gc-muted);
}
.gc-sys .card__meta {
  margin-top: 10px;
  font-family: var(--gc-mono);
  font-size: 11px;
  color: var(--gc-faint);
}

.gc-sys .card-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.gc-sys .card-grid > * { min-width: 0; }

.gc-sys .px {
  font-family: var(--gc-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--gc-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.gc-sys .px.best { color: var(--gc-lime); }

.gc-sys .px--was {
  font-size: 12px;
  font-weight: 500;
  color: var(--gc-faint);
  text-decoration: line-through;
}

.gc-sys .px-off {
  display: inline-block;
  font-family: var(--gc-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  white-space: nowrap;
  color: #12200a;
  background: var(--gc-lime);
}

.gc-sys .px-row {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.gc-sys .chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--gc-line);
  background-color: var(--gc-panel);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--gc-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--gc-ease), background var(--gc-ease), color var(--gc-ease);
}
.gc-sys .chip:hover,
.gc-sys .chip:focus-visible {
  border-color: var(--gc-line-hi);
  background-color: var(--gc-panel-2);
  color: var(--gc-text);
  text-decoration: none;
}

.gc-sys .chip.is-active,
.gc-sys .chip[aria-pressed="true"],
.gc-sys .chip[aria-current="true"] {
  background: var(--gc-lime);
  border-color: var(--gc-lime);
  color: #12200a;
}

.gc-sys .chip__n {
  font-family: var(--gc-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gc-faint);
}
.gc-sys .chip.is-active .chip__n { color: rgba(18, 32, 10, .65); }

.gc-sys .chip:focus-visible { outline: 2px solid var(--gc-lime); outline-offset: 2px; }

.gc-sys .chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gc-sys .chip-row--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;
}
.gc-sys .chip-row--scroll::-webkit-scrollbar { display: none; }
.gc-sys .chip-row--scroll > .chip { scroll-snap-align: start; flex: none; }

.gc-sys .ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--gc-radius-sm);
  border: 1px solid transparent;
}
.gc-sys .ico svg { width: 19px; height: 19px; display: block; }

.gc-sys .ico--lime   { background: rgba(160, 227, 18, .12);  border-color: rgba(160, 227, 18, .22);  color: var(--gc-lime); }
.gc-sys .ico--violet { background: rgba(155, 124, 246, .13); border-color: rgba(155, 124, 246, .24); color: var(--gc-violet); }
.gc-sys .ico--amber  { background: rgba(245, 185, 66, .13);  border-color: rgba(245, 185, 66, .24);  color: var(--gc-amber); }
.gc-sys .ico--orange { background: rgba(240, 128, 60, .13);  border-color: rgba(240, 128, 60, .24);  color: var(--gc-orange); }

.gc-sys .ico svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.gc-sys .ico svg [fill]:not([fill="none"])     { fill: currentColor; }

.gc-sys .ico { border-radius: var(--gc-radius-sm) !important; }

@media (prefers-reduced-motion: reduce) {
  .gc-sys *,
  .gc-sys *::before,
  .gc-sys *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .gc-sys a.card:hover,
  .gc-sys button.card:hover,
  .gc-sys .card--link:hover { transform: none; }
}

.gc-sys .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.gc-sys.hnews,
.gc-sys.hprebuy,
.gc-sys.cat-landings,
.gc-sys.hql,
.gc-sys.gexplore {
  max-width: var(--gc-max);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--sec);
  padding-left: var(--gc-pad);
  padding-right: var(--gc-pad);
}
.gc-sys.hnews        { margin-top: 0; }
.gc-sys.hprebuy      { margin-top: 0; }
.gc-sys.cat-landings { margin-top: 0; padding-top: 0; }

.gc-sys.hql          { margin-top: var(--sec); padding-top: 0; padding-bottom: 0; }
.gc-sys.gexplore     { padding-top: 0; padding-bottom: 0; }

.gc-sys.hnews .hnews__head,
.gc-sys.hprebuy .hprebuy__head,
.gc-sys.cat-landings .cat-landings__head,
.gc-sys.gexplore .genres-head {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 3px;
  align-items: center;
  text-align: left;
  max-width: none;
  margin: 0 0 18px;
}

.gc-sys.hnews .hnews__title,
.gc-sys.hprebuy .hprebuy__title,
.gc-sys.cat-landings .cat-landings__head h2,
.gc-sys.gexplore .genres-head h2 { grid-column: 2; grid-row: 1; }

.gc-sys.cat-landings .cat-landings__head p,
.gc-sys.gexplore .genres-head p { grid-column: 2; grid-row: 2; }

.gc-sys.hnews .hnews__all,
.gc-sys.hprebuy .hprebuy__all { grid-column: 3; grid-row: 1; justify-self: end; }

.gc-sys.hnews .hnews__fresh { grid-column: 2; grid-row: 2; }

.gc-sys.hnews .hnews__head::before,
.gc-sys.hprebuy .hprebuy__head::before,
.gc-sys.cat-landings .cat-landings__head::before,
.gc-sys.gexplore .genres-head::before {
  content: "";
  flex: none;
  width: 3px;
  align-self: stretch;
  min-height: 26px;
  border-radius: 2px;
  background: var(--gc-lime);
}

.gc-sys.hnews .hnews__title,
.gc-sys.hprebuy .hprebuy__title,
.gc-sys.cat-landings .cat-landings__head h2,
.gc-sys.gexplore .genres-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--gc-text);
  text-align: left;
}

.gc-sys.cat-landings .cat-landings__head p,
.gc-sys.gexplore .genres-head p {
  margin: 0;
  max-width: 70ch;
  font-size: 13px;
  line-height: 1.45;
  color: var(--gc-muted);
  text-align: left;
}

.gc-sys.hnews .hnews__all,
.gc-sys.hprebuy .hprebuy__all {
  margin-left: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--gc-lime);
}

.gc-sys.hnews .hnews__panel,
.gc-sys.hnews .hn-lead,
.gc-sys.hnews .hn-item,
.gc-sys.hprebuy .hpb-card,
.gc-sys.cat-landings .cl-card,
.gc-sys.hql .hql-card {
  border-radius: var(--gc-radius);
  background-color: var(--gc-panel);
  border: 1px solid var(--gc-line);
}

.gc-sys.gexplore .genre-card {
  border-radius: var(--gc-radius);
  border: 1px solid var(--gc-line);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.gc-sys.hnews .hn-lead:hover,
.gc-sys.hnews .hn-item:hover,
.gc-sys.hprebuy .hpb-card:hover,
.gc-sys.cat-landings .cl-card:hover,
.gc-sys.hql .hql-card:hover {
  transform: translateY(-2px);
  border-color: var(--gc-line-hi);
  background-color: var(--gc-panel-2);
  box-shadow: none;
}

.gc-sys.gexplore .genre-card:hover {
  transform: translateY(-2px);
  border-color: var(--gc-line-hi);
  box-shadow: none;
}

.gc-sys.hnews .hnews__grid,
.gc-sys.hprebuy .hprebuy__row,
.gc-sys.cat-landings .cat-landings__row,
.gc-sys.gexplore .genre-strip { gap: var(--gap); }

.gc-sys.hql .hql-grid { gap: var(--gap-lg); }

.gc-sys.cat-landings .cl-icon,
.gc-sys.gexplore .genre-ico,
.gc-sys.hprebuy .hpb-card__ico,
.gc-sys.hql .hql-ico {
  width: 40px;
  height: 40px;
  border-radius: var(--gc-radius-sm);
  margin-bottom: 12px;
  display: grid;
  place-items: center;
  flex: none;
}

.gc-sys.gexplore .genre-ico { margin-left: 16px; margin-right: 16px; }

.gc-sys.cat-landings .cl-icon,
.gc-sys.hprebuy .hpb-card__ico { margin-left: 0; margin-right: 0; }
.gc-sys.cat-landings .cl-icon svg,
.gc-sys.gexplore .genre-ico svg,
.gc-sys.hprebuy .hpb-card__ico svg,
.gc-sys.hql .hql-ico svg { width: 19px; height: 19px; }

.gc-sys.cat-landings .cl-card { align-items: flex-start; text-align: left; }
.gc-sys.cat-landings .cl-title { text-align: left; }

.gc-sys.stats {
  --st-lime: var(--gc-lime);
  --st-panel: var(--gc-panel);
  --st-line: var(--gc-line);
  border-radius: var(--gc-radius);
}