/**
 * 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.
 */

.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 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-como-funciona__lead {
    max-width: 65ch;
    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-como-funciona__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-como-funciona__toc-title {
    margin: 0 0 var(--pf-redes-spacing-md, 16px);
    font-size: var(--pf-redes-font-size-lg, 1.3rem);
}

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

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

.pf-redes-como-funciona__toc-list {
    margin: 0;
    padding-left: var(--pf-redes-spacing-lg, 24px);
    line-height: 1.7;
}

.pf-redes-como-funciona__toc-list ul {
    margin: var(--pf-redes-spacing-xs, 4px) 0;
    color: var(--pf-redes-text-light, #666);
    font-size: var(--pf-redes-font-size-sm, 0.9rem);
}

/* 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-como-funciona__toc-list {
    list-style: none;
    padding-left: 0;
}

.pf-redes-como-funciona__toc-list > li {
    padding: 2px 0;
}

.pf-redes-como-funciona__toc-list ul {
    list-style: disc;
    padding-left: var(--pf-redes-spacing-lg, 24px);
}

/* ── Secciones ──────────────────────────────────────────────────────────── */
.pf-redes-como-funciona__section {
    margin-bottom: var(--pf-redes-spacing-xxl, 48px);
}

.pf-redes-como-funciona__section-title {
    margin: 0 0 var(--pf-redes-spacing-lg, 24px);
    padding-bottom: var(--pf-redes-spacing-sm, 8px);
    border-bottom: 2px solid var(--pf-redes-border, #ddd);
    font-size: var(--pf-redes-font-size-xl, 1.6rem);
}

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

/* ── 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);
}

.pf-redes-como-funciona__profile-intro {
    max-width: 65ch;
    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;
}

/* ── Preguntas del bloque «Empieza aquí» ────────────────────────────────── */
.pf-redes-como-funciona__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: deja aire bajo la cabecera fija al saltar. */
    scroll-margin-top: 90px;
}

.pf-redes-como-funciona__q h4 {
    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-como-funciona__q h5 {
    margin: var(--pf-redes-spacing-md, 16px) 0 var(--pf-redes-spacing-xs, 4px);
    font-size: var(--pf-redes-font-size-sm, 0.9rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pf-redes-primary);
}

.pf-redes-como-funciona__q p {
    max-width: 68ch;
    margin: 0 0 var(--pf-redes-spacing-sm, 8px);
    line-height: 1.65;
}

.pf-redes-como-funciona__q ul {
    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 ────────────────────────────────────── */

/* «Idea fuerza» y equivalentes. */
.pf-redes-como-funciona__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;
}

/* Esquemas y diagramas en texto (modelo relacional, huecos a rellenar). */
.pf-redes-como-funciona__scheme {
    padding: var(--pf-redes-spacing-md, 16px);
    background: var(--pf-redes-bg, #f7f7ff);
    border: 1px dashed var(--pf-redes-border, #ccc);
    border-radius: var(--pf-redes-radius-sm, 4px);
    line-height: 1.8;
}

/* Procedimiento en flecha: He encontrado un error → Comunicar → … */
.pf-redes-como-funciona__flow {
    padding: var(--pf-redes-spacing-sm, 8px) var(--pf-redes-spacing-md, 16px);
    background: var(--pf-redes-bg, #f7f7ff);
    border-radius: var(--pf-redes-radius-sm, 4px);
    line-height: 1.8;
}

/* Notas de redacción pendientes que venían en el documento («* FALTA…»,
   «IMPORTANTE: el texto definitivo…»). 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;
}

/* ── Listas de definición (término + descripción) ───────────────────────── */
.pf-redes-como-funciona__deflist {
    margin: 0 0 var(--pf-redes-spacing-md, 16px);
}

.pf-redes-como-funciona__deflist dt {
    margin-top: var(--pf-redes-spacing-sm, 8px);
    font-weight: 700;
    color: var(--pf-redes-text);
}

.pf-redes-como-funciona__deflist dt:first-child {
    margin-top: 0;
}

.pf-redes-como-funciona__deflist dd {
    max-width: 68ch;
    margin: 0 0 var(--pf-redes-spacing-xs, 4px);
    padding-left: var(--pf-redes-spacing-md, 16px);
    border-left: 2px solid var(--pf-redes-border, #e0e0e0);
    line-height: 1.6;
}

/* ── 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__toc,
    .pf-redes-como-funciona__profile,
    .pf-redes-como-funciona__q {
        padding: var(--pf-redes-spacing-md, 16px);
    }
}