/* ==========================================================================
   FIDAL Consultoría y Litigio — areas.css
   Estilos EXCLUSIVOS de las páginas de Áreas de práctica
   (areas/index.html y las cinco subpáginas de área).
   La página Empresas (empresas/) también lo carga para reutilizar .lista-claves.
   Requiere tokens.css y componentes.css cargados antes.
   Solo tokens: sin colores ni tipografías fuera de tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cabecera de página de área: antetítulo + h1 + párrafos de entrada
   -------------------------------------------------------------------------- */
.cabecera-area {
  padding-block: var(--seccion-vertical) var(--espacio-8);
}

/* --------------------------------------------------------------------------
   2. Cuerpo de área: ritmo de prosa en listas y encabezados
   Las listas sin clase heredan el ancho de prosa; las listas-componente
   (.lista-claves) traen su propio layout.
   -------------------------------------------------------------------------- */
.seccion--area ul:not([class]),
.seccion--area ol:not([class]) {
  max-width: var(--ancho-prosa);
  margin: 0 0 var(--espacio-5);
  padding-left: var(--espacio-5);
}

.seccion--area li + li {
  margin-top: var(--espacio-3);
}

.seccion--area h3 {
  margin-top: var(--espacio-6);
}

/* --------------------------------------------------------------------------
   3. Lista de claves: sin viñetas, con hairline superior
   (p. ej. "Nuestra forma de trabajar", "Cómo se traduce en su beneficio")
   -------------------------------------------------------------------------- */
.lista-claves {
  list-style: none;
  margin: var(--espacio-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--espacio-5) var(--espacio-7);
}

.lista-claves li {
  border-top: var(--hairline);
  padding-top: var(--espacio-4);
  max-width: var(--ancho-prosa);
}

@media (min-width: 40em) {
  .lista-claves {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   4. Preguntas frecuentes (h3 pregunta + p respuesta, todo visible)
   Hairline sobre cada pregunta: mismo recurso gráfico que .lista-claves.
   -------------------------------------------------------------------------- */
.faq h3 {
  max-width: var(--ancho-prosa);
  border-top: var(--hairline);
  padding-top: var(--espacio-5);
}

/* --------------------------------------------------------------------------
   5. Navegación entre áreas (al final de cada subpágina de área)
   -------------------------------------------------------------------------- */
.nav-areas {
  border-top: var(--hairline);
  padding-block: var(--espacio-8);
}

.nav-areas__lista {
  list-style: none;
  margin: var(--espacio-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--espacio-3);
}

.nav-areas__lista li {
  border-top: var(--hairline);
}

.nav-areas__lista a {
  display: block;
  padding-block: var(--espacio-3);
  font-weight: var(--peso-negrita);
}

@media (min-width: 40em) {
  .nav-areas__lista {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espacio-3) var(--espacio-7);
  }
}