/**
 * ¿Cómo funciona RED-ES? — /como-funciona/
 *
 * 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.
 *
 * Desde tema#60 esta hoja sirve SOLO a las 5 secciones por perfil. Las reglas
 * de la portada, el índice y el bloque de preguntas se movieron con su marcado
 * a `templates/conoce-red-es/styles.css`; aquí no queda ni una regla huérfana.
 */

.pf-redes-como-funciona {
    background: var(--pf-redes-bg, #f7f7ff);
}

.pf-redes-como-funciona__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-como-funciona__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);
}

.pf-redes-como-funciona__title {
    margin: 0;
    font-size: var(--pf-redes-font-size-xxl, 2rem);
    line-height: 1.15;
    color: var(--pf-redes-text);
}

/* ── Sección ────────────────────────────────────────────────────────────── */
.pf-redes-como-funciona__section {
    margin-bottom: var(--pf-redes-spacing-xl, 32px);
}

/* ── Bloque por perfil ──────────────────────────────────────────────────── */
.pf-redes-como-funciona__profile {
    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-lg, 24px);
}

.pf-redes-como-funciona__profile-title {
    margin: 0 0 var(--pf-redes-spacing-md, 16px);
    font-size: var(--pf-redes-font-size-lg, 1.3rem);
    color: var(--pf-redes-primary);
}

/* Sin `max-width` en ch (tema#98): el párrafo corta en el mismo borde que las
   listas de la tarjeta, con el mismo criterio que /conoce-red-es/. */
.pf-redes-como-funciona__profile-intro {
    margin: 0 0 var(--pf-redes-spacing-md, 16px);
    color: var(--pf-redes-text-light, #555);
}

.pf-redes-como-funciona__profile h4 {
    margin: var(--pf-redes-spacing-lg, 24px) 0 var(--pf-redes-spacing-xs, 4px);
    font-size: var(--pf-redes-font-size-md, 1.05rem);
}

.pf-redes-como-funciona__profile h4:first-of-type {
    margin-top: 0;
}

.pf-redes-como-funciona__profile ul {
    margin: 0;
    padding-left: var(--pf-redes-spacing-lg, 24px);
    line-height: 1.75;
}

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

/* Notas de redacción pendientes que venían en el documento («* FALTA…»). Se
   muestran tal cual porque el encargo era reproducir el contenido literal; van
   marcadas para que se distingan del contenido publicable. */
.pf-redes-como-funciona__pending {
    padding: var(--pf-redes-spacing-sm, 8px) var(--pf-redes-spacing-md, 16px);
    border-left: 4px solid var(--pf-redes-warning-text, #8a6d3b);
    background: var(--pf-redes-warning-bg, #fff8e1);
    color: var(--pf-redes-warning-text, #8a6d3b);
    border-radius: 0 var(--pf-redes-radius-sm, 4px) var(--pf-redes-radius-sm, 4px) 0;
    font-size: var(--pf-redes-font-size-sm, 0.9rem);
}

/* Marca «— próximamente» de las listas por perfil. */
.pf-redes-como-funciona__soon {
    color: var(--pf-redes-text-light, #909090);
    font-style: italic;
}


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

    .pf-redes-como-funciona__profile {
        padding: var(--pf-redes-spacing-md, 16px);
    }
}