@charset "UTF-8";

/* Page-owned styles for guia-para-principiantes */

.guide-hero {
  background-color: var(--color-stone-deep);
  padding-block: var(--space-3xl);
  border-block-end: 1px solid var(--color-line);
}

.guide-hero__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-lg);
}

.guide-hero__content {
  grid-column: 1 / 8;
  min-width: 0;
}

.guide-hero__aside {
  grid-column: 8 / 13;
  min-width: 0;
}

.guide-hero__eyebrow {
  margin-block-end: var(--space-sm);
}

.guide-hero__lead {
  margin-block-end: var(--space-md);
  max-width: 720px;
}

.guide-hero__support {
  margin-block-end: var(--space-lg);
  max-width: 720px;
  color: var(--color-navy-soft);
}

.guide-hero__cta {
  width: auto;
}

.guide-section {
  padding-block: var(--space-3xl);
}

.guide-section--start,
.guide-section--energy,
.guide-section--combat,
.guide-section--cards-choice,
.guide-section--mistakes {
  background-color: var(--color-stone);
}

.guide-section--cards,
.guide-section--enemies,
.guide-section--routes {
  background-color: var(--color-stone-deep);
}

.guide-section--final-cta {
  background-color: var(--color-stone-deep);
  border-block-start: 1px solid var(--color-line);
}

.guide-start,
.guide-energy,
.guide-combat,
.guide-cards-choice {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-xl);
  align-items: start;
}

.guide-start__main,
.guide-energy__main,
.guide-combat__main,
.guide-cards-choice__main {
  grid-column: 1 / 9;
  min-width: 0;
}

.guide-start__tip,
.guide-energy__tip,
.guide-combat__rule,
.guide-cards-choice__tip {
  grid-column: 9 / 13;
  min-width: 0;
}

.guide-cards__content {
  max-width: 720px;
}

.guide-cards__table {
  margin-block-start: var(--space-lg);
}

.guide-enemies__content {
  max-width: 720px;
}

.guide-enemies__intentions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
}

.guide-intention {
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-default);
  padding: var(--space-md);
  min-width: 0;
}

.guide-intention__icon {
  font-size: 1.5rem;
  line-height: 1;
  margin-block-end: var(--space-xs);
}

.guide-routes__content {
  max-width: 720px;
}

.guide-routes__diagram {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
}

.guide-route-node {
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-default);
  padding: var(--space-md);
  text-align: center;
  min-width: 0;
}

.guide-route-node__marker {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-inline: auto;
  margin-block-end: var(--space-xs);
}

.guide-route-node--combat .guide-route-node__marker {
  background-color: var(--color-navy);
}

.guide-route-node--elite .guide-route-node__marker {
  background-color: var(--color-amber);
}

.guide-route-node--event .guide-route-node__marker {
  background-color: var(--color-burgundy);
}

.guide-route-node--rest .guide-route-node__marker {
  background-color: var(--color-emerald);
}

.guide-mistakes__intro {
  max-width: 720px;
}

.guide-mistakes__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: var(--space-lg);
  display: grid;
  gap: var(--space-md);
}

.guide-mistake {
  min-width: 0;
}

.guide-mistake__callout {
  height: 100%;
}

.guide-final {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.guide-final h2,
.guide-final h3,
.guide-final p {
  max-width: 720px;
  margin-inline: auto;
}

.guide-final__cta {
  margin-block-start: var(--space-lg);
}

@media (max-width: 1023px) {
  .guide-hero__content {
    grid-column: 1 / 9;
  }

  .guide-hero__aside {
    grid-column: 9 / 13;
  }

  .guide-start__main,
  .guide-energy__main,
  .guide-combat__main,
  .guide-cards-choice__main {
    grid-column: 1 / 8;
  }

  .guide-start__tip,
  .guide-energy__tip,
  .guide-combat__rule,
  .guide-cards-choice__tip {
    grid-column: 8 / 13;
  }

  .guide-routes__diagram {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .guide-hero {
    padding-block: var(--space-2xl);
  }

  .guide-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .guide-hero__content,
  .guide-hero__aside {
    grid-column: 1 / -1;
  }

  .guide-hero__aside {
    display: none;
  }

  .guide-hero__lead,
  .guide-hero__support {
    max-width: 100%;
  }

  .guide-section {
    padding-block: var(--space-2xl);
  }

  .guide-start,
  .guide-energy,
  .guide-combat,
  .guide-cards-choice {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .guide-start__main,
  .guide-energy__main,
  .guide-combat__main,
  .guide-cards-choice__main,
  .guide-start__tip,
  .guide-energy__tip,
  .guide-combat__rule,
  .guide-cards-choice__tip {
    grid-column: 1 / -1;
  }

  .guide-enemies__intentions {
    grid-template-columns: 1fr;
  }

  .guide-routes__diagram {
    grid-template-columns: 1fr;
  }

  .guide-final {
    padding-inline: var(--container-padding-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .link,
  .guide-route-node,
  .guide-intention {
    transition: none;
  }
}