/**
 * Landing Pages — estilos compartidos
 * Reutiliza clases de home.css: .home-hero, .home-inner, .home-section-label,
 * .home-section-h2, .home-steps-section, .home-steps, .home-step,
 * .home-cta-section, .home-cta-card
 */

/* ===== BENEFITS ===== */
.landing-benefits-section {
  background: var(--color-bg-secondary);
  padding: var(--spacing-12) var(--spacing-6);
}

.landing-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-5);
}

.landing-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.15);
  color: var(--color-primary-light);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  margin-bottom: var(--spacing-4);
}

.landing-benefit h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-3) 0;
}

.landing-benefit p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* ===== STEPS ===== */
.landing-steps-section {
  background: var(--color-bg-primary);
  padding: var(--spacing-12) var(--spacing-6);
}

/* ===== BLOG LINKS ===== */
.landing-blog-section {
  background: var(--color-bg-secondary);
  padding: var(--spacing-10) var(--spacing-6);
}

.landing-blog-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-4);
  margin-top: var(--spacing-5);
}

.landing-blog-link {
  display: block;
  padding: var(--spacing-5);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-text-primary);
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.45;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.landing-blog-link:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-sm);
  color: var(--color-primary-light);
  text-decoration: none;
}

.landing-blog-link__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-2);
}

/* ===== FAQ ===== */
.landing-faq-section {
  background: var(--color-bg-primary);
  padding: var(--spacing-12) var(--spacing-6);
}

.landing-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-5);
  margin-top: var(--spacing-6);
}

.landing-faq-item {
  padding: var(--spacing-5);
}

.landing-faq-item h3 {
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-3) 0;
}

.landing-faq-item p {
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* ===== BREADCRUMB ===== */
.landing-breadcrumb {
  padding: var(--spacing-4) var(--spacing-6);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  max-width: var(--container-2xl);
  margin: 0 auto;
}

.landing-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.landing-breadcrumb a:hover {
  color: var(--color-primary-light);
}

.landing-breadcrumb span[aria-hidden] {
  margin: 0 var(--spacing-2);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .landing-benefits-section,
  .landing-steps-section,
  .landing-blog-section,
  .landing-faq-section {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }

  .landing-breadcrumb {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
}

@media (max-width: 480px) {
  .landing-benefits-grid,
  .landing-blog-links,
  .landing-faq-grid {
    grid-template-columns: 1fr;
  }
}