/*
 * layout.css — Ampara PWA
 *
 * Líneas a eliminar de styles.css:
 *   469–512   (.section-container, .section-card base)
 *   514–568   (tipografía: h1 h2 h3, .main-heading, .section-heading,
 *              .subsection-heading, .tab-container, .tab-content)
 *   634–655   (media queries de layout)
 *   1943–1989 (#section-content, .section-card expandido,
 *              .grid-cols-4, .step-container, responsive grids)
 *
 * Fusiones aplicadas:
 *   - .section-card tenía 4 declaraciones distintas → unificada en una sola
 *     con sus media queries agrupadas al final de la sección
 */

/* === CONTENEDOR DE SECCIÓN === */

.section-container {
  width: 100%;
  margin: 0;
  padding: 1rem;
}

@media (min-width: 640px) {
  .section-container {
    padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .section-container {
    padding: 2rem;
  }
}

/* === SECTION CARD (fusión de 4 bloques) === */

.section-card {
  padding: 1rem;
  border-radius: 16px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  margin-bottom: 2.5rem;
  background-color: #fff;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

body.dark-mode .section-card {
  background-color: #2d3748;
}

@media (min-width: 640px) {
  .section-card {
    padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .section-card {
    padding: 2.5rem 3rem;
  }
}

@media (max-width: 768px) {
  .section-card {
    padding: 1.5rem 1rem;
  }
}

/* === CONTENIDO DE SECCIÓN === */

#section-content {
  max-width: 100%;
  width: 100%;
  padding: 0;
}

/* === TIPOGRAFÍA === */

h1, h2, h3 {
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.main-heading {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: #2d3748;
}

body.dark-mode .main-heading {
  color: #f7fafc;
}

.section-heading {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #3182ce;
  line-height: 1.3;
}

body.dark-mode .section-heading {
  color: #63b3ed;
}

.subsection-heading {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  color: #2d3748;
}

body.dark-mode .subsection-heading {
  color: #e2e8f0;
}

/* === TABS === */

.tab-container {
  display: flex;
  margin-bottom: 2rem;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 1rem;
  flex-wrap: wrap;
}

body.dark-mode .tab-container {
  border-color: #4a5568;
}

.tab-content {
  padding: 1.5rem 0;
}

/* === GRID === */

.grid-cols-4 {
  gap: 1.5rem;
}

@media (max-width: 1280px) {
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem;
  }
}

@media (max-width: 768px) {
  .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
}

/* === STEP CONTAINER === */

.step-container {
  padding: 1.5rem;
}

/* === MEDIA QUERIES DE LAYOUT GENERAL === */

@media (max-width: 768px) {
  .main-heading {
    font-size: 2rem;
  }

  .section-heading {
    font-size: 1.75rem;
  }

  .tab-container {
    flex-direction: column;
  }

  .tab {
    margin-bottom: 0.5rem;
    border-radius: 6px;
  }
}