/* ============================================
   CTA SECTIONS - STANDARD PATTERN
   ============================================

   Componente reutilizable para llamadas a la acción.
   Sección destacada con fondo primario y botón.

   Uso:
   <section class="cta-section">
     <div class="container">
       <h2 class="cta-section__title">Title</h2>
       <p class="cta-section__text">Description</p>
       <a href="#" class="cta-section__button">Button Text</a>
     </div>
   </section>
*/

.cta-section {
  padding: var(--space-7) 0;
  background: var(--color-primary);
  text-align: center;
}

.cta-section__title {
  font-size: clamp(22px, 2.4vw, 32px);
  margin: 0 0 var(--space-4);
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
}

.cta-section__text {
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--space-5);
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.cta-section__button {
  display: inline-block;
  padding: var(--space-4) var(--space-6);
  background: #fff;
  color: var(--color-primary);
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s, background 0.2s;
  cursor: pointer;
}

.cta-section__button:hover {
  transform: translateY(-2px);
  background: var(--color-surface);
}

/* Modifier: CTA compacto */
.cta-section--compact {
  padding: var(--space-6) 0;
}

.cta-section--compact .cta-section__title {
  font-size: clamp(20px, 2vw, 28px);
  margin-bottom: var(--space-3);
}

.cta-section--compact .cta-section__text {
  font-size: 1rem;
  margin-bottom: var(--space-4);
}

/* Modifier: CTA secundario (fondo oscuro) */
.cta-section--secondary {
  background: var(--color-surface);
}

.cta-section--secondary .cta-section__title {
  color: var(--color-text);
}

.cta-section--secondary .cta-section__text {
  color: var(--color-text-secondary);
}

.cta-section--secondary .cta-section__button {
  background: var(--color-primary);
  color: #fff;
}

.cta-section--secondary .cta-section__button:hover {
  background: var(--color-primary-dark);
}

/* Responsive */
@media (max-width: 768px) {
  .cta-section {
    padding: var(--space-6) 0;
  }

  .cta-section__title {
    font-size: clamp(20px, 5vw, 28px);
  }

  .cta-section__text {
    font-size: 1rem;
  }

  .cta-section__button {
    width: 100%;
    max-width: 320px;
  }
}