/* ==========================================================================
   areas.css — zona de servicio.

   Esta seccion NO lleva jerarquia visible, y es una decision, no un olvido:
   ninguna zona pesa mas que otra, asi que una escala impuesta aqui seria
   decoracion. Segun el principio de decisiones.md, cuando no hay jerarquia que
   codificar la estructura tiene que codificar otra cosa verdadera. Aqui lo
   verdadero es el EMPAREJAMIENTO sitio -> parque de cubiertas, y por eso el
   marcado es <dl> y el dibujo son dos columnas fijas: termino y definicion.

   Recursos ya gastados y descartados aqui: filete de grosor variable (triaje) y
   reparto de area (servicios). El filete horizontal uniforme que se usa abajo
   no es lo mismo que el del triaje: alli el grosor variaba para codificar
   urgencia, aqui es identico en las cinco entradas justamente para decir que
   estan al mismo nivel.

   Alternancia de planos de la home:
   hero fog / triaje chalk / servicios fog / proceso chalk / zonas fog /
   trabajos chalk. El triaje y el proceso son las dos hojas elevadas.
   ========================================================================== */

.areas {
  background: var(--fog);
  padding-block: var(--section-y);
}

.areas .wrap {
  display: grid;
  gap: var(--space-7);
}

/* --- Entradilla ----------------------------------------------------------- */
/* A todo lo ancho, no en un rail lateral: el triaje ya usa rail + columna, y
   repetir esa composicion dos secciones despues aplana la pagina. */

.areas__intro {
  display: grid;
  gap: var(--space-4);
}

.areas__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  max-width: 24ch;
}

.areas__lede {
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* --- Pares --------------------------------------------------------------- */

.areas__list {
  display: grid;
}

.areas__pair {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: var(--hairline) solid var(--rule-strong);
}

/* Cierra la lista por abajo. Un indice impreso se cierra; una lista abierta por
   el pie parece cortada. */
.areas__pair:last-child {
  border-bottom: var(--hairline) solid var(--rule-strong);
}

.areas__place {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

.areas__place a {
  text-decoration: underline;
  text-decoration-color: var(--ink-soft);
  text-decoration-thickness: var(--hairline);
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--transition-control);
}

.areas__place a:hover {
  text-decoration-color: var(--ink);
}

.areas__stock {
  margin: 0;                 /* <dd> trae sangria del navegador */
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* --- Escritorio ----------------------------------------------------------- */

@media (min-width: 900px) {
  .areas__pair {
    /* El termino tiene ancho propio y la definicion va topada a la medida de
       lectura. Sin fr en la segunda columna: a 70fr de 1240 el texto se iba a
       83 caracteres por linea. */
    /* 24rem y no 20: a 20 cuatro de los cinco nombres partian en dos lineas y
       uno no, y esa irregularidad se lee como descuido en una lista que existe
       precisamente para que las cinco entradas parezcan iguales. */
    grid-template-columns: minmax(0, 26rem) minmax(0, var(--measure));
    column-gap: var(--space-7);
    align-items: baseline;
  }
}