/* Componentes compartidos de las páginas interiores · "Afectos en circulación" */

/* Portada interior */

.hero--pagina {
  min-height: clamp(16rem, 34vh, 22rem);
  padding-block: var(--s-7);
}

.hero--pagina h1 {
  font-size: var(--fs-700);
  max-width: 20ch;
}

/* Secciones y columna de lectura */

.seccion h2 {
  margin-bottom: var(--s-5);
}

.lectura {
  max-width: var(--ancho-texto);
}

.lectura p + p {
  margin-top: var(--s-4);
}

.lectura h3 {
  margin-top: var(--s-6);
}

/* Rejilla de bloques */

.rejilla {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  list-style: none;
  padding: 0;
}

.bloque {
  background-color: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  padding: var(--s-5);
  color: var(--color-texto);
}

.bloque h3 {
  font-size: var(--fs-500);
}

.bloque p {
  margin-top: var(--s-2);
  color: var(--color-suave);
}

/* Lista numerada de pasos */

.pasos {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-5);
  counter-reset: paso;
}

.paso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  counter-increment: paso;
}

.paso::before {
  content: counter(paso);
  grid-row: 1 / span 2;
  font-family: var(--fuente-titulos);
  font-size: var(--fs-700);
  line-height: 1;
  color: var(--acento-texto);
  min-width: 1.2em;
}

.paso > h3,
.paso > p {
  grid-column: 2;
}

.paso > h3 {
  font-size: var(--fs-500);
}

.paso > p {
  color: var(--color-suave);
  max-width: var(--ancho-texto);
}

/* Desplegables (glosario) */

.desplegable {
  border-bottom: 1px solid var(--borde);
}

.desplegable summary {
  cursor: pointer;
  padding: var(--s-4) 0;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
}

.desplegable summary::-webkit-details-marker {
  display: none;
}

.desplegable summary::after {
  content: "+";
  font-size: var(--fs-500);
  color: var(--acento-texto);
}

.desplegable[open] summary::after,
details[open] summary::after {
  content: "−";
}

.desplegable p {
  padding-bottom: var(--s-4);
  max-width: var(--ancho-texto);
  color: var(--color-suave);
}

/* Espacio entre un párrafo de lectura y la rejilla o caja que le sigue (antes quedaban pegados) */
.lectura + .rejilla,
.lectura + .bloque {
  margin-top: var(--s-6);
}