/*
 * club.css — Estilos compartidos del Club de Informática / Algoritmia UPIICSA.
 * Cumple estrictamente con art/RETRO-RULES.md:
 * - Sin degradados (linear-gradient, radial-gradient, etc.).
 * - Sin desenfoques ni blur (sin blur(), sin backdrop-filter, sin drop-shadow).
 * - Sin border-radius (esquinas rectas o escalonadas con clip-path).
 * - Tipografías retro: VT323 (>=16px) y Press Start 2P (múltiplos de 8px).
 * - Sombras duras de 1 solo paso con tercer parámetro en 0.
 * - Animaciones con steps() por cuadros; sin transiciones suaves ni ease.
 */

:root {
  /* Altura de navegación (medida real: 82px escritorio, 66px móvil) */
  --nav-h: 82px;

  /* Tokens de ventana (retro OS) */
  --gx-win-title: #12472f;
  --gx-win-body: #07140e;
  --gx-win-border: #1a6b47;

  /* Variante dorada de ventana (paleta AMBER) */
  --gx-win-gold-title: #473412;
  --gx-win-gold-body: #141007;
  --gx-win-gold-border: #ffab00;

  /* Resaltado de sintaxis de código */
  --gx-code-kw: #22e5c8;
  --gx-code-str: var(--gx-gold);
  --gx-code-num: #ff2a6d;
  --gx-code-cmt: var(--gx-dim);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ==========================================================================
   1. BOTONES (Btn.astro)
   ========================================================================== */

.btn {
  font-family: var(--gx-font-arcade);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
  min-height: 44px;
  transition: none;
  vertical-align: middle;
  box-sizing: border-box;
  max-width: 100%;
}

/* Tamaños */
.btn-md {
  font-size: 16px;
  padding: 12px 20px;
}

.btn-sm {
  font-size: 8px;
  padding: 12px 16px;
  letter-spacing: 0.5px;
}

/* Variante primaria (oro, estilo arcade .btn-play) */
.btn-primary {
  background-color: var(--gx-gold);
  color: var(--gx-bg);
  border: 2px solid var(--gx-gold-deep);
  box-shadow: 0 4px 0 var(--gx-gold-deep);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--gx-gold-deep);
  color: var(--gx-bg);
  outline: 2px solid var(--gx-jade-bright);
  outline-offset: 2px;
}

.btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--gx-gold-deep);
}

/* Variante secundaria (jade) */
.btn-secondary {
  background-color: var(--gx-win-title);
  color: var(--gx-text);
  border: 2px solid var(--gx-win-border);
  box-shadow: 0 4px 0 var(--gx-win-body);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--gx-win-border);
  color: var(--gx-text);
  outline: 2px solid var(--gx-gold);
  outline-offset: 2px;
}

.btn-secondary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--gx-win-body);
}

/* ==========================================================================
   2. VENTANA RETRO (PixelWindow.astro)
   ========================================================================== */

.win-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-shadow: 4px 4px 0 var(--win-shadow, #040807);
  box-sizing: border-box;
}

.win-frame::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 100%;
  height: 100%;
  background-color: var(--win-shadow, #040807);
  clip-path: polygon(
    0 8px,
    4px 8px,
    4px 4px,
    8px 4px,
    8px 0,
    calc(100% - 8px) 0,
    calc(100% - 8px) 4px,
    calc(100% - 4px) 4px,
    calc(100% - 4px) 8px,
    100% 8px,
    100% calc(100% - 8px),
    calc(100% - 4px) calc(100% - 8px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 4px),
    calc(100% - 8px) 100%,
    8px 100%,
    8px calc(100% - 4px),
    4px calc(100% - 4px),
    4px calc(100% - 8px),
    0 calc(100% - 8px)
  );
  pointer-events: none;
  z-index: 0;
}

.win-surface {
  position: relative;
  z-index: 1;
  border: 4px solid var(--win-border);
  background-color: var(--win-body);
  clip-path: polygon(
    0 8px,
    4px 8px,
    4px 4px,
    8px 4px,
    8px 0,
    calc(100% - 8px) 0,
    calc(100% - 8px) 4px,
    calc(100% - 4px) 4px,
    calc(100% - 4px) 8px,
    100% 8px,
    100% calc(100% - 8px),
    calc(100% - 4px) calc(100% - 8px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 4px),
    calc(100% - 8px) 100%,
    8px 100%,
    8px calc(100% - 4px),
    4px calc(100% - 4px),
    4px calc(100% - 8px),
    0 calc(100% - 8px)
  );
  box-sizing: border-box;
}

.win-header {
  background-color: var(--win-title);
  color: var(--gx-text);
  font-family: var(--gx-font-arcade);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 4px solid var(--win-border);
  gap: 8px;
  user-select: none;
  box-sizing: border-box;
}

.win-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.win-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.win-btn {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--gx-text);
  box-sizing: border-box;
}

.win-btn-min {
  background-color: var(--gx-muted);
}

.win-btn-max {
  background-color: var(--gx-gold);
}

.win-btn-close {
  background-color: var(--gx-danger);
}

.win-body {
  background-color: var(--win-body);
  color: var(--gx-text);
  font-family: var(--gx-font-body);
  font-size: 20px;
  padding: 16px;
  line-height: 1.5;
  box-sizing: border-box;
  min-width: 0;
}

.win-jade {
  --win-title: var(--gx-win-title);
  --win-body: var(--gx-win-body);
  --win-border: var(--gx-win-border);
  --win-shadow: #040807;
}

.win-gold {
  --win-title: var(--gx-win-gold-title);
  --win-body: var(--gx-win-gold-body);
  --win-border: var(--gx-win-gold-border);
  --win-shadow: #040807;
}

@media (max-width: 600px) {
  .win-header {
    font-size: 8px;
    padding: 6px 8px;
  }

  .win-body {
    padding: 12px;
  }
}

/* ==========================================================================
   3. VENTANA DE CÓDIGO (CodeWindow.astro)
   ========================================================================== */

.code-container {
  width: 100%;
  overflow-x: auto;
  min-width: 0;
  box-sizing: border-box;
}

.code-block {
  font-family: var(--gx-font-body);
  font-size: 22px;
  line-height: 1.4;
  color: var(--gx-text);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.code-line {
  min-height: 1.4em;
}

.code-cursor {
  display: inline-block;
  color: var(--gx-jade-bright);
  font-family: var(--gx-font-body);
  font-size: 22px;
  animation: cursor-blink 1s steps(2) infinite;
  line-height: 1;
  margin-left: 2px;
  vertical-align: baseline;
}

@keyframes cursor-blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

.kw {
  color: var(--gx-code-kw);
}

.str {
  color: var(--gx-code-str);
}

.num {
  color: var(--gx-code-num);
}

.cmt {
  color: var(--gx-code-cmt);
}

/* ==========================================================================
   4. ÍCONO PIXEL (PixelIcon.astro)
   ========================================================================== */

.pixel-icon {
  display: inline-block;
  vertical-align: middle;
  image-rendering: pixelated;
  flex-shrink: 0;
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   5. NAVEGACIÓN (Nav.astro)
   ========================================================================== */

.club-nav-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--gx-bg);
  border-bottom: 2px solid var(--gx-win-border);
  width: 100%;
  box-sizing: border-box;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.nav-brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--gx-text);
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
}

.brand-logo {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  display: block;
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--gx-font-arcade);
  font-size: 16px;
  color: var(--gx-jade-bright);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-links a {
  font-family: var(--gx-font-arcade);
  font-size: 8px;
  color: var(--gx-text);
  text-decoration: none;
  padding: 10px 8px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--gx-gold);
  outline: 2px solid var(--gx-jade-bright);
  outline-offset: 2px;
}

.nav-mobile {
  display: none;
}

.nav-summary {
  font-family: var(--gx-font-arcade);
  font-size: 8px;
  padding: 10px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background-color: var(--gx-win-title);
  color: var(--gx-text);
  border: 2px solid var(--gx-win-border);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.nav-summary::-webkit-details-marker {
  display: none;
}

.nav-summary:hover,
.nav-summary:focus-visible {
  background-color: var(--gx-win-border);
  color: var(--gx-gold);
  outline: 2px solid var(--gx-gold);
}

.nav-mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--gx-bg-card);
  border-bottom: 2px solid var(--gx-win-border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 0 #040807;
  box-sizing: border-box;
}

.nav-mobile-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nav-mobile-links a {
  font-family: var(--gx-font-arcade);
  font-size: 8px;
  color: var(--gx-text);
  text-decoration: none;
  padding: 10px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.nav-mobile-links a:hover,
.nav-mobile-links a:focus-visible {
  color: var(--gx-gold);
  outline: 2px solid var(--gx-jade-bright);
}

.nav-mobile-cta {
  padding-top: 8px;
  border-top: 2px solid var(--gx-win-border);
}

@media (max-width: 719px) {
  :root {
    --nav-h: 66px;
  }

  .nav-desktop {
    display: none;
  }

  .nav-mobile {
    display: block;
  }

  .brand-name {
    font-size: 8px;
  }

  .brand-logo {
    width: 48px;
    height: 48px;
  }

  .nav-container {
    max-width: 360px;
    margin-left: 0;
    margin-right: auto;
  }
}

/* ==========================================================================
   6. PIE DE PÁGINA (Footer.astro)
   ========================================================================== */

.club-footer {
  width: 100%;
  background-color: var(--gx-bg-card);
  border-top: 2px solid var(--gx-win-border);
  margin-top: auto;
  padding: 24px 16px;
  box-sizing: border-box;
}

.footer-container,
.footer-retro-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.footer-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--gx-font-body);
  font-size: 20px;
  color: var(--gx-muted);
  box-sizing: border-box;
  max-width: 100%;
}

.footer-org {
  color: var(--gx-text);
  font-weight: bold;
}

.footer-unit {
  color: var(--gx-muted);
}

.footer-city {
  color: var(--gx-dim);
}

.footer-retro .footer-org,
.footer-retro .footer-unit,
.footer-retro .footer-city {
  overflow-wrap: anywhere;
}

.footer-nav {
  width: 100%;
  min-width: 0;
}

.footer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.footer-nav-item {
  display: flex;
}

.footer-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  font-family: var(--gx-font-arcade);
  font-size: 16px;
  line-height: 1.2;
  color: var(--gx-gold);
  background-color: var(--gx-bg-card);
  border: 2px solid var(--gx-win-border);
  text-decoration: none;
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.footer-nav-link:hover,
.footer-nav-link:focus-visible {
  background-color: var(--gx-win-title);
  color: var(--gx-text);
  outline: 2px solid var(--gx-gold);
  outline-offset: 2px;
}

.footer-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.footer-social-item {
  display: flex;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px;
  font-family: var(--gx-font-body);
  font-size: 20px;
  line-height: 1.2;
  color: var(--gx-text);
  background-color: var(--gx-bg-card);
  border: 2px solid var(--gx-win-border);
  text-decoration: none;
  box-sizing: border-box;
  max-width: 100%;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  background-color: var(--gx-win-title);
  color: var(--gx-gold);
  outline: 2px solid var(--gx-gold);
  outline-offset: 2px;
}

.footer-social-icon.pixel-icon {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
}

.footer-game {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  font-family: var(--gx-font-arcade);
  font-size: 16px;
  line-height: 1.2;
  color: var(--gx-gold);
  border: 2px solid var(--gx-gold-deep);
  text-decoration: none;
  box-sizing: border-box;
  max-width: 100%;
  white-space: nowrap;
  flex-shrink: 0;
}

.footer-game:hover,
.footer-game:focus-visible {
  background-color: var(--gx-gold-deep);
  color: var(--gx-bg);
  outline: 2px solid var(--gx-jade-bright);
  outline-offset: 2px;
}

@media (min-width: 720px) {
  .footer-container,
  .footer-retro-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "info game"
      "nav nav"
      "social social";
    align-items: start;
    text-align: left;
    gap: 16px;
  }

  .footer-retro .footer-info,
  .footer-info {
    grid-area: info;
    align-items: flex-start;
  }

  .footer-nav {
    grid-area: nav;
    width: 100%;
  }

  .footer-nav-list {
    justify-content: flex-start;
  }

  .footer-social {
    grid-area: social;
    justify-content: flex-start;
  }

  .footer-game {
    grid-area: game;
    align-self: start;
  }
}

/* ==========================================================================
   7. ESTILOS DE LA PÁGINA STYLETILE
   ========================================================================== */

.tile-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.tile-header {
  text-align: center;
  border-bottom: 2px solid var(--gx-win-border);
  padding-bottom: 16px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.tile-title {
  font-family: var(--gx-font-arcade);
  font-size: 16px;
  line-height: 1.4;
  color: var(--gx-jade-bright);
  text-shadow: 2px 2px 0 var(--gx-bg-card);
  word-break: break-word;
}

@media (min-width: 720px) {
  .tile-title {
    font-size: 24px;
  }
}

.tile-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.section-title {
  font-family: var(--gx-font-arcade);
  font-size: 16px;
  color: var(--gx-gold);
  border-left: 4px solid var(--gx-gold);
  padding-left: 12px;
}

.subsection-title {
  font-family: var(--gx-font-arcade);
  font-size: 8px;
  color: var(--gx-muted);
  margin-top: 8px;
}

.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

@media (min-width: 600px) {
  .tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .tile-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.component-card {
  background-color: var(--gx-bg-card);
  border: 2px solid var(--gx-win-border);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.component-label {
  font-family: var(--gx-font-body);
  font-size: 18px;
  color: var(--gx-muted);
}

.windows-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.icons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.icons-grid-scale2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.icon-card {
  background-color: var(--gx-bg-card);
  border: 2px solid var(--gx-win-border);
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.icon-name {
  font-family: var(--gx-font-arcade);
  font-size: 8px;
  color: var(--gx-text);
  text-align: center;
  word-break: break-word;
}

@media (max-width: 600px) {
  .tile-container {
    max-width: 360px;
    margin-left: 0;
    margin-right: auto;
    padding: 16px 12px;
    gap: 32px;
  }

  .footer-container {
    max-width: 360px;
    margin-left: 0;
    margin-right: auto;
  }

  .icons-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .icons-grid-scale2 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   8. HERO Y NOSOTROS (Landing)
   ========================================================================== */

/* Fondo de mosaico de circuitos retro */
body {
  background-color: var(--gx-bg);
  background-image: url('../pixel/bg_circuit_board_jade.png');
  background-repeat: repeat;
  background-size: 64px 64px;
  image-rendering: pixelated;
}

/* --- Hero Section --- */
.hero-section {
  width: 100%;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
  box-sizing: border-box;
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.hero-logo {
  display: block;
  width: 272px;
  height: 272px;
  max-width: 100%;
  image-rendering: pixelated;
}

@media (min-width: 720px) {
  .hero-logo {
    width: 544px;
    height: 544px;
  }
}

@media (max-height: 880px) {
  .hero-logo {
    width: 272px;
    height: 272px;
  }
}

.hero-title {
  font-family: var(--gx-font-arcade);
  font-size: 16px;
  line-height: 1.5;
  color: var(--gx-jade-bright);
  text-shadow: 2px 2px 0 var(--gx-bg-card);
  margin: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

@media (min-width: 720px) {
  .hero-title {
    font-size: 24px;
    line-height: 1.4;
  }
}

.hero-institution {
  font-family: var(--gx-font-body);
  font-size: 22px;
  color: var(--gx-gold);
  margin: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  align-items: center;
  box-sizing: border-box;
  margin-top: 4px;
}

.hero-actions .btn {
  white-space: nowrap;
}

@media (max-height: 700px) {
  .hero-section {
    padding: 12px 8px;
  }

  .hero-container {
    gap: 8px;
  }

  .hero-actions {
    gap: 8px;
  }
}

/* --- Nosotros Section --- */
.nosotros-section {
  width: 100%;
  padding: 40px 16px;
  box-sizing: border-box;
}

.nosotros-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.nosotros-windows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

@media (min-width: 860px) {
  .nosotros-windows {
    grid-template-columns: 1fr 1fr;
  }
}

.nosotros-text {
  font-family: var(--gx-font-body);
  font-size: 20px;
  line-height: 1.4;
  color: var(--gx-text);
  margin: 0;
  overflow-wrap: anywhere;
}

.nosotros-goals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

@media (min-width: 720px) {
  .nosotros-goals {
    grid-template-columns: 1fr 1fr;
  }
}

.goal-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background-color: var(--gx-bg-card);
  border: 2px solid var(--gx-win-border);
  box-shadow: 0 4px 0 var(--gx-bg);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.goal-icon.pixel-icon {
  width: 48px;
  height: 48px;
  display: block;
  flex-shrink: 0;
}

.goal-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.goal-title {
  font-family: var(--gx-font-arcade);
  font-size: 16px;
  line-height: 1.4;
  color: var(--gx-gold);
  margin: 0;
  overflow-wrap: anywhere;
}

.goal-text {
  font-family: var(--gx-font-body);
  font-size: 20px;
  line-height: 1.4;
  color: var(--gx-text);
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .hero-section {
    padding: 16px 12px;
  }

  .nosotros-section {
    padding: 32px 12px;
  }
}

/* ==========================================================================
   10. SECCIÓN: CURSOS (CursosSection, CourseMap, ModuleNode, ClassList)
   ========================================================================== */

.cursos-section {
  width: 100%;
  padding: 40px 16px;
  box-sizing: border-box;
}

.cursos-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.cursos-maps {
  display: flex;
  flex-direction: column;
  gap: 36px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.course-map-window {
  width: 100%;
  box-sizing: border-box;
}

.course-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.course-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border-bottom: 2px solid var(--gx-win-border);
  padding-bottom: 20px;
}

.course-title {
  font-family: var(--gx-font-arcade);
  font-size: 16px;
  line-height: 1.4;
  color: var(--gx-jade-bright);
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.course-name {
  font-family: var(--gx-font-body);
  font-size: 22px;
  line-height: 1.3;
  color: var(--gx-text);
  margin: 0;
  overflow-wrap: anywhere;
}

/* Camino de nodos (Nivel map) */
.course-map-path {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.course-node-item {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

/* Conectores en móvil (1 columna) */
.course-node-item:not(:last-child)::after {
  content: "";
  display: block;
  width: 4px;
  height: 24px;
  background-color: var(--gx-win-border);
  margin: 8px auto;
  box-shadow: 2px 0 0 var(--gx-bg);
}

/* Nodo de módulo (<details>) */
.module-node {
  background-color: var(--gx-bg-card);
  border: 2px solid var(--gx-win-border);
  box-shadow: 0 4px 0 var(--gx-bg);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.module-node[open] {
  border-color: var(--gx-jade-bright);
}

.module-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.module-summary::-webkit-details-marker,
.module-summary::marker {
  display: none;
}

.module-summary:hover {
  background-color: var(--gx-bg-card-hover);
}

.module-summary:focus-visible {
  outline: 2px solid var(--gx-gold);
  outline-offset: -2px;
  background-color: var(--gx-bg-card-hover);
}

.module-summary-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.module-icon-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.module-icon.pixel-icon {
  width: 32px !important;
  height: 32px !important;
  display: block;
  flex-shrink: 0;
}

.module-header-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.module-badge {
  font-family: var(--gx-font-arcade);
  font-size: 16px;
  color: var(--gx-jade-bright);
}

.module-title {
  font-family: var(--gx-font-body);
  font-size: 20px;
  line-height: 1.25;
  color: var(--gx-text);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.module-toggle-symbol {
  flex-shrink: 0;
  padding-left: 8px;
}

.module-toggle-symbol::before {
  content: "[+]";
  font-family: var(--gx-font-arcade);
  font-size: 16px;
  color: var(--gx-gold);
}

.module-node[open] > .module-summary .module-toggle-symbol::before {
  content: "[-]";
  color: var(--gx-jade-bright);
}

.module-classes-panel {
  border-top: 2px solid var(--gx-win-border);
  background-color: var(--gx-win-body);
  padding: 12px 14px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

/* Lista de clases (ClassList) */
.class-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.class-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  background-color: var(--gx-bg-card);
  border: 1px solid var(--gx-win-border);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.class-number {
  font-family: var(--gx-font-arcade);
  font-size: 16px;
  color: var(--gx-jade-bright);
  flex-shrink: 0;
  min-width: 24px;
}

.class-title {
  font-family: var(--gx-font-body);
  font-size: 18px;
  line-height: 1.3;
  color: var(--gx-text);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Nodo final del curso (finale) */
.boss-list {
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.boss-node {
  background-color: var(--gx-win-gold-body);
  border: 3px solid var(--gx-gold);
  box-shadow: 0 4px 0 var(--gx-gold-deep);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.boss-icon-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.boss-icon.pixel-icon {
  width: 32px !important;
  height: 32px !important;
  display: block;
  flex-shrink: 0;
}

.boss-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.boss-title {
  font-family: var(--gx-font-arcade);
  font-size: 16px;
  line-height: 1.4;
  color: var(--gx-gold);
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ==========================================================================
   CONECTORES Y RESPONSIVE EN ESCRITORIO (≥ 720px)
   ========================================================================== */

@media (min-width: 720px) {
  .course-map-path {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 28px;
  }

  .course-node-item {
    grid-column: var(--node-col);
    grid-row: var(--node-row);
  }

  .course-node-item:not(:last-child)::after {
    margin: 0;
    box-shadow: none;
    position: absolute;
    z-index: 2;
  }

  .course-node-item.node-dir-right::after {
    content: "";
    top: 36px;
    right: -28px;
    width: 28px;
    height: 4px;
    background-color: var(--gx-win-border);
  }

  .course-node-item.node-dir-left::after {
    content: "";
    top: 36px;
    left: -28px;
    width: 28px;
    height: 4px;
    background-color: var(--gx-win-border);
  }

  .course-node-item.node-dir-down::after {
    content: "";
    bottom: -32px;
    left: calc(50% - 2px);
    width: 4px;
    height: 32px;
    background-color: var(--gx-win-border);
  }
}

/* ==========================================================================
   11. SECCIÓN: ÚNETE (UneteSection)
   ========================================================================== */

.unete-section {
  width: 100%;
  padding: 40px 16px;
  box-sizing: border-box;
}

.unete-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.unete-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.unete-join.btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  padding: 20px 16px;
  font-size: 16px;
  line-height: 1.4;
}

.unete-join-icon.pixel-icon {
  width: 64px;
  height: 64px;
  display: block;
  flex-shrink: 0;
}

.unete-join-label {
  text-align: center;
  overflow-wrap: anywhere;
}

@media (min-width: 720px) {
  .unete-join.btn {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    padding: 20px 24px;
  }

  .unete-join-label {
    text-align: left;
  }
}

.unete-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.unete-social-item {
  display: flex;
}

.unete-social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  font-family: var(--gx-font-body);
  font-size: 22px;
  line-height: 1.2;
  color: var(--gx-text);
  background-color: var(--gx-bg-card);
  border: 2px solid var(--gx-win-border);
  text-decoration: none;
  box-sizing: border-box;
  max-width: 100%;
}

.unete-social-link:hover,
.unete-social-link:focus-visible {
  background-color: var(--gx-win-title);
  color: var(--gx-gold);
  outline: 2px solid var(--gx-gold);
  outline-offset: 2px;
}

.unete-social-icon.pixel-icon {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .cursos-section,
  .unete-section {
    padding: 32px 12px;
  }

  .boss-node {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}