/* ============================================
  PAGE SECTIONS - STANDARD PATTERN
  UI/UX Improvements 2025-11:
    - Unificación .page-section y .section (retrocompatibilidad)
    - Spacing vertical consistente 64 / 56 / 48px (desktop / tablet / móvil)
    - Variantes compact y spacious recalculadas (48px / 96px desktop)
    - Tipografía fluida con clamp() en títulos e intro
  ============================================

   Patrón estándar para secciones de contenido.
   Provee estructura consistente para todas las páginas.

   Uso:
   <section class="page-section">
     <div class="container">
       <div class="page-section__header">
         <h2 class="page-section__title">Title</h2>
         <p class="page-section__intro">Intro text</p>
       </div>
       <div class="page-section__content">
         ... content ...
       </div>
     </div>
   </section>
*/

.page-section,
.section {
  padding: var(--space-8) 0; /* 64px vertical spacing */
  background: var(--color-bg);
}

.page-section--dark,
.section-dark {
  background: var(--color-surface);
}

.page-section--primary {
  background: var(--color-primary);
  color: #fff;
}

.page-section--compact {
  padding: var(--space-6) 0; /* 48px compact */
}

.page-section--spacious {
  padding: calc(var(--space-8) * 1.5) 0; /* 96px spacious */
}

.page-section__header {
  text-align: center;
  margin-bottom: var(--space-6);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

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

.page-section--dark .page-section__title {
  color: var(--color-text);
}

.page-section--primary .page-section__title {
  color: #fff;
}

.page-section__intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-6);
  color: var(--color-text-secondary);
  font-size: 1.05rem;
  line-height: 1.6;
}

.page-section--primary .page-section__intro {
  color: rgba(255, 255, 255, 0.9);
}

/* Section Title standalone (legacy compatibility) */
.section-title {
  font-size: clamp(22px, 2.4vw, 32px);
  margin: 0 0 var(--space-4);
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.section-description {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-6);
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .page-section,
  .section {
    padding: var(--space-7) 0; /* 56px móvil */
  }

  .page-section--compact {
    padding: var(--space-5) 0; /* 40px compact móvil */
  }

  .page-section--spacious {
    padding: calc(var(--space-7) * 1.25) 0; /* 70px spacious móvil */
  }

  .page-section__title,
  .section-title {
    font-size: clamp(22px, 5.5vw, 30px); /* Mejorado de 20-28px */
  }

  .page-section__intro,
  .section-description {
    font-size: clamp(0.95rem, 2vw, 1.05rem); /* Tipografía fluida */
  }
}

@media (max-width: 480px) {
  .page-section,
  .section {
    padding: var(--space-6) 0; /* 48px móvil pequeño */
  }
}