/* CONTENEDOR PRINCIPAL */
.guide-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 20px 80px;
}

/* SECCIONES (cards) */
.guide-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: clamp(28px, 5vw, 48px);
  margin-bottom: 32px;
  backdrop-filter: blur(12px);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.guide-section:hover {
  border-color: rgba(34,197,94,0.3);
}

/* Acento especial para la sección de desafíos */
.guide-section.highlight-section {
  border-color: rgba(34,197,94,0.25);
  background: rgba(34,197,94,0.03);
}

.guide-section h2 {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.6px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.guide-section h2 .icon {
  width: 48px; height: 48px; border-radius: 16px;
  background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
  color: var(--green);
}
.guide-section h2 .badge-new {
  font-size: 0.7rem; font-weight: 700;
  background: var(--green); color: #000;
  padding: 3px 10px; border-radius: 50px;
  letter-spacing: 0.5px;
  align-self: center;
}

.guide-section h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 28px;
  margin-bottom: 12px;
}

.guide-section p {
  color: var(--muted);
  margin-bottom: 16px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.guide-section ul {
  margin: 16px 0 8px 24px;
  color: var(--muted);
}
.guide-section li {
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.steps-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 32px 0 16px;
}
.steps-list li {
  position: relative;
  padding-left: 64px;
}
.steps-list .badge {
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), #4ade80); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(34,197,94,0.3);
}
.steps-list strong {
  color: var(--text);
  display: block;
  margin-bottom: 8px;
  font-size: 1.1rem;
}
.steps-list p {
  margin-bottom: 0;
  font-size: 0.95rem;
}

.inner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 32px 0 16px;
}
.inner-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  padding: 28px;
  border-radius: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.inner-card:hover { 
  background: rgba(255,255,255,0.04); 
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-4px);
}
.inner-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
}
.inner-card p {
  font-size: 0.95rem;
  margin-bottom: 0;
  line-height: 1.5;
}

/* Tags de nivel de juego */
.level-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0;
}
.level-tag {
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 800;
  border: 1px solid;
  letter-spacing: 0.5px;
}
.level-tag.beginner  { background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.3); color: #4ade80; }
.level-tag.inter     { background: rgba(250,204,21,0.1);  border-color: rgba(250,204,21,0.3);  color: #facc15; }
.level-tag.advanced  { background: rgba(251,146,60,0.1);  border-color: rgba(251,146,60,0.3);  color: #fb923c; }
.level-tag.pro       { background: rgba(239,68,68,0.1);   border-color: rgba(239,68,68,0.3);   color: #ef4444; }

.callout {
  background: rgba(34, 197, 94, 0.08);
  border-left: 4px solid var(--green);
  padding: 24px 28px;
  border-radius: 0 20px 20px 0;
  margin: 32px 0;
}
.callout p {
  margin-bottom: 0;
  font-size: 1rem;
  color: #bef264;
  font-weight: 500;
}

.callout.info {
  background: rgba(59,130,246,0.08);
  border-left-color: #3b82f6;
}
.callout.info p { color: #93c5fd; }

@media (max-width: 820px) {
  .guide-section { padding: 32px 24px; border-radius: 24px; }
  .guide-section h2 .icon { width: 44px; height: 44px; font-size: 1.4rem; }
  .inner-grid { gap: 20px; }
  .steps-list li { padding-left: 56px; }
  .steps-list .badge { width: 36px; height: 36px; font-size: 0.9rem; }
  .callout { padding: 20px 24px; }
}

@media (max-width: 480px) {
  .guide-container { padding: 16px 16px 80px; }
  .guide-section { padding: 24px 20px; margin-bottom: 24px; }
  .guide-section h2 .icon { width: 36px; height: 36px; font-size: 1.2rem; }
  .inner-card { padding: 20px; }
  .inner-card h4 { font-size: 1rem; }
  .steps-list { gap: 24px; }
  .steps-list li { padding-left: 48px; }
  .steps-list .badge { width: 32px; height: 32px; font-size: 0.8rem; }
  .level-tags { gap: 8px; }
  .level-tag { font-size: 0.75rem; padding: 6px 16px; }
}