/* ============================================
   LAYOUT.CSS — Sistema de grid y contenedores
   Diseño mobile-first
   ============================================ */

/* Contenedor principal */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Espaciado vertical de secciones */
section {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

/* Títulos de sección */
.section-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin-bottom: var(--space-3);
  color: var(--color-text-body);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.section-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-7);
}

/* ==========================================
   BREAKPOINTS — Tablet (768px+)
   ========================================== */
@media (min-width: 768px) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  section {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  .section-title {
    font-size: var(--font-size-3xl);
  }

  .section-subtitle {
    font-size: var(--font-size-lg);
  }
}

/* ==========================================
   BREAKPOINTS — Desktop (1025px+)
   ========================================== */
@media (min-width: 1025px) {
  section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
}

/* ==========================================
   BREAKPOINTS — Wide (1441px+)
   ========================================== */
@media (min-width: 1441px) {
  .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}