/* ==========================================================================
   accesibilidad.css — Estilos exclusivos de paginas/accesibilidad.html.

   1. CARACTERÍSTICAS — .accessibility-features dentro de
      #accessibility_content

   El héroe (#accessibility_hero) y el cuerpo del documento
   (#accessibility_content: entradilla, índice lateral, bloques y listas) usan
   los componentes compartidos definidos en global.css, porque son idénticos
   en las cinco páginas legales.
   ========================================================================== */

/* ==========================================================================
   1. CARACTERÍSTICAS — .accessibility-features
   ========================================================================== */

/* 1.1 Lista

   Se distingue de la lista con guion del sistema porque aquí cada entrada es
   una afirmación verificable sobre el sitio: la marca de comprobación lo
   señala de un vistazo. */

#accessibility_content .accessibility-features {
    display: flex;
    flex-direction: column;
    gap: var(--site-space-3);
}

/* 1.2 Elemento */

#accessibility_content .accessibility-features__item {
    display: flex;
    align-items: flex-start;
    gap: var(--site-space-4);
    padding: var(--site-space-4);
    border: 1px solid var(--site-line);
    border-radius: var(--site-radius-medium);
    background-color: var(--site-paper);
}

/* 1.3 Marca de comprobación */

#accessibility_content .accessibility-features__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    /* Alinea el trazo con la primera línea del texto, que tiene más cuerpo. */
    margin-top: 3px;
    color: var(--site-success);
}

/* 1.4 Texto */

#accessibility_content .accessibility-features__text {
    color: var(--site-ink-700);
    font-size: 0.9375rem;
}