/**
 * Conoce RED-ES — /conoce-red-es/
 *
 * Página de lectura larga: prioridad a la jerarquía tipográfica y a la anchura
 * de línea cómoda. Usa los tokens del tema (--pf-redes-*) con respaldo literal,
 * igual que el resto de templates.
 *
 * Origen: estas reglas venían de `templates/como-funciona/styles.css`, que
 * servía a la página entera antes de partirla (tema#60). Aquí quedan SOLO las
 * que usa esta página; las de los bloques por perfil (`__profile*`, `__soon`)
 * se quedaron en `como-funciona`. Los selectores llevan el prefijo del
 * template nuevo.
 *
 * tema#81 (2026-09-05): al entrar el documento final del cliente desaparecieron
 * las piezas que solo servían al guion de redacción anterior — `__scheme`
 * (esquemas y diagramas en texto), `__flow` (procedimiento en flecha),
 * `__deflist` (términos + descripción), `__section-title` (el titular «0.
 * EMPIEZA AQUÍ», que el documento final no tiene) y `__q h5`. Se retiran para
 * no dejar reglas huérfanas.
 *
 * tema#98 (2026-09-12, feedback 7): se va `__claim` (la frase de RED-ES que
 * abría el documento pasa a la banda de la home y esta página empieza por el
 * H1). Desaparecen los `max-width` en `ch` de `__lead` y de `__q p`: cortaban
 * los párrafos a ~558px dentro de tarjetas de ~820px mientras las listas
 * llegaban al borde, y el cliente pidió no forzar los saltos. Ahora párrafos
 * y listas cortan en el mismo borde de la tarjeta (900px de `__wrap` menos
 * padding) y la anchura de línea la da la tarjeta, no el texto. Las anclas
 * del índice pasan a negro con subrayado al hover/focus (ver «Índice»).
 */

.pf-redes-conoce-red-es {
    background: var(--pf-redes-bg, #f7f7ff);
}

.pf-redes-conoce-red-es__wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--pf-redes-spacing-xl, 32px) var(--pf-redes-spacing-lg, 24px)
             var(--pf-redes-spacing-xxl, 48px);
}

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.pf-redes-conoce-red-es__hero {
    padding-bottom: var(--pf-redes-spacing-lg, 24px);
    border-bottom: 3px solid var(--pf-redes-primary);
    margin-bottom: var(--pf-redes-spacing-xl, 32px);
}

/* La página empieza por el H1 (tema#98): sin margen superior, que antes
   separaba el título de la frase de RED-ES que ya no está aquí. */
.pf-redes-conoce-red-es__title {
    margin: 0 0 var(--pf-redes-spacing-md, 16px);
    font-size: var(--pf-redes-font-size-xxl, 2rem);
    line-height: 1.15;
    color: var(--pf-redes-text);
}

.pf-redes-conoce-red-es__lead {
    margin: 0 0 var(--pf-redes-spacing-sm, 8px);
    color: var(--pf-redes-text-light, #555);
    font-size: var(--pf-redes-font-size-md, 1.05rem);
    line-height: 1.6;
}

/* ── Índice ─────────────────────────────────────────────────────────────── */
.pf-redes-conoce-red-es__toc {
    padding: var(--pf-redes-spacing-lg, 24px);
    background: var(--pf-redes-bg-card, #fff);
    border: 1px solid var(--pf-redes-border, #ddd);
    border-radius: var(--pf-redes-radius-md, 8px);
    margin-bottom: var(--pf-redes-spacing-xxl, 48px);
}

.pf-redes-conoce-red-es__toc-title {
    margin: 0 0 var(--pf-redes-spacing-md, 16px);
    font-size: var(--pf-redes-font-size-lg, 1.3rem);
}

.pf-redes-conoce-red-es__toc-block + .pf-redes-conoce-red-es__toc-block {
    margin-top: var(--pf-redes-spacing-lg, 24px);
}

.pf-redes-conoce-red-es__toc-block h3 {
    margin: 0 0 var(--pf-redes-spacing-sm, 8px);
    font-size: var(--pf-redes-font-size-sm, 0.9rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pf-redes-primary);
}

/* Los números de la lista ya vienen escritos en el texto del documento
   original («1. ¿Qué es RED-ES…»): sin marcador para no duplicarlos. */
.pf-redes-conoce-red-es__toc-list {
    margin: 0;
    list-style: none;
    padding-left: 0;
    line-height: 1.7;
}

.pf-redes-conoce-red-es__toc-list > li {
    padding: 2px 0;
}

/* Las 27 anclas del índice van en el color del texto y se subrayan al pasar o
   enfocar (feedback 7, punto 6). Solo ellas: los `<h3>` de cada bloque y los
   dos enlaces del cuerpo (mailto y Política de Privacidad) siguen la
   convención global de enlaces en rojo.
   OJO a la especificidad: `themes/moderno/theme.css` se carga DESPUÉS de esta
   hoja y declara `body.pf-redes-theme-moderno a:hover, …a:focus` (0,2,2), que
   con un selector de una sola clase (0,1,1) volvería a pintar el hover en rojo
   oscuro. La doble clase `__toc .__toc-list a` (0,3,1) gana por especificidad
   sin depender del orden de carga; con el tema «claro» (solo `style.css` raíz,
   `a:hover` a 0,1,1) también. No se tocan `style.css` ni `theme.css`. */
.pf-redes-conoce-red-es__toc .pf-redes-conoce-red-es__toc-list a {
    color: var(--pf-redes-text);
    text-decoration: none;
}

.pf-redes-conoce-red-es__toc .pf-redes-conoce-red-es__toc-list a:hover,
.pf-redes-conoce-red-es__toc .pf-redes-conoce-red-es__toc-list a:focus {
    color: var(--pf-redes-text);
    text-decoration: underline;
}

/* ── Secciones (un bloque del documento = una sección) ──────────────────── */
.pf-redes-conoce-red-es__section {
    margin-bottom: var(--pf-redes-spacing-xxl, 48px);
}

.pf-redes-conoce-red-es__block-title {
    margin: var(--pf-redes-spacing-xl, 32px) 0 var(--pf-redes-spacing-md, 16px);
    font-size: var(--pf-redes-font-size-md, 1.05rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pf-redes-primary);
}

/* ── Preguntas ──────────────────────────────────────────────────────────── */
.pf-redes-conoce-red-es__q {
    padding: var(--pf-redes-spacing-lg, 24px);
    background: var(--pf-redes-bg-card, #fff);
    border: 1px solid var(--pf-redes-border, #ddd);
    border-radius: var(--pf-redes-radius-md, 8px);
    margin-bottom: var(--pf-redes-spacing-md, 16px);
    /* El índice enlaza por ancla. El header del sitio NO es fijo (common/header
       no declara `position`), así que esto no compensa una cabecera pegajosa:
       cubre la barra de administración de WordPress —esa sí fija, 32px, y solo
       visible para administrator— y deja un poco de aire al saltar. */
    scroll-margin-top: 40px;
}

.pf-redes-conoce-red-es__q h3 {
    margin: 0 0 var(--pf-redes-spacing-md, 16px);
    font-size: var(--pf-redes-font-size-lg, 1.2rem);
    line-height: 1.3;
}

.pf-redes-conoce-red-es__q p {
    margin: 0 0 var(--pf-redes-spacing-sm, 8px);
    line-height: 1.65;
}

/* Viñetas (14, 18) y la lista «a., b., c., d.» de la 12 (`<ol type="a">`),
   con el mismo sangrado. */
.pf-redes-conoce-red-es__q ul,
.pf-redes-conoce-red-es__q ol {
    margin: 0 0 var(--pf-redes-spacing-md, 16px);
    padding-left: var(--pf-redes-spacing-lg, 24px);
    line-height: 1.75;
}

/* ── Piezas destacadas del documento ────────────────────────────────────── */

/* Frase que el documento destaca por sí sola, en negrita y sin más contexto
   (hoy solo la de sostenibilidad de la pregunta 21). */
.pf-redes-conoce-red-es__idea {
    padding: var(--pf-redes-spacing-md, 16px);
    border-left: 4px solid var(--pf-redes-primary);
    background: var(--pf-redes-bg, #f7f7ff);
    border-radius: 0 var(--pf-redes-radius-sm, 4px) var(--pf-redes-radius-sm, 4px) 0;
}

/* ── Móvil ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pf-redes-conoce-red-es__wrap {
        padding: var(--pf-redes-spacing-lg, 24px) var(--pf-redes-spacing-md, 16px)
                 var(--pf-redes-spacing-xl, 32px);
    }

    .pf-redes-conoce-red-es__toc,
    .pf-redes-conoce-red-es__q {
        padding: var(--pf-redes-spacing-md, 16px);
    }
}