/* ==========================================================================
   FuzzyFrog.AI · Proyectos
   Hoja de estilos única para las páginas de proyecto.

   Principio: "La decisión al frente, el camino siempre visible."
   - Azul ocean  = capa de ENTENDER (decisiones, enlaces).
   - Verde aqua  = capa de HACER y AVANZAR (recorrido, checkpoints, botones).
   - Vino        = cuidado (solo "Error común").
   - Marino      = marco y texto.

   Convive con styles_atlas.css (lo carga la plantilla base para todo el
   AI Lab). Todas las clases propias llevan el prefijo ff- para no chocar.
   Solo se sobrescriben de Atlas las reglas globales que afectan al
   proyecto (fondo y fuente del body) y el interior del menú lateral.

   Índice
   1. Tokens (color, tipografía, espacio, forma)
   2. Base
   3. Marco: layout, menú lateral, aside, modal
   4. Artículo: encabezado, partes, secciones, texto
   5. Recorrido: apertura de etapa, cierre, error, "sigue"
   6. Decisión y explorador
   7. Contenido: pestañas, figuras, gráfica, código
   8. Adaptar: diagnóstico, tarjetas, prompt de IA
   9. Convertir: botones, oferta, feedback, proyectos relacionados, mapa
   10. Responsive y accesibilidad
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
    /* Marca (6 colores) */
    --ff-night: #001f3d;
    --ff-ocean: #006a87;
    --ff-aqua:  #00b76c;
    --ff-cyan:  #32ecfd;
    --ff-mint:  #a9ffcf;
    --ff-lime:  #b2d56a;

    /* Derivados: mezclas de la marca con blanco o con marino */
    --ff-aqua-deep:    #00825c;  /* 65% aqua + 35% marino · texto verde sobre claro y botón primario */
    --ff-aqua-hover:   #00a065;  /* 85% aqua + 15% marino · hover del botón del menú */
    --ff-aqua-deep-hover: #006453; /* 70% aqua-deep + 30% marino · hover del botón primario */
    --ff-ocean-deep:   #00506d;  /* 65% ocean + 35% marino · hover azul */
    --ff-ocean-tint:   #f0f6f8;  /* 6% ocean · fondo de la decisión */
    --ff-mint-tint:    #e5fff1;  /* 30% menta · fondo del cierre de etapa */
    --ff-surface:      #f7f8f9;  /* 3% marino · superficies neutras */
    --ff-border:       #e0e4e8;  /* 12% marino · bordes */
    --ff-text-2:       #5c7083;  /* 64% marino · texto secundario */
    --ff-frame-hover:  #003250;  /* 75% marino + 25% ocean · hover en el marco */
    --ff-text-dark-2:  #bfc7ce;  /* 25% marino · texto secundario sobre marino */
    --ff-code-text:    #f0f2f3;  /* 6% marino · texto del código */
    --ff-line-dark:    rgba(255, 255, 255, 0.14); /* filetes sobre marino */

    /* Semántico (única excepción a la marca) */
    --ff-error:      #8c2f39;
    --ff-error-tint: #f7f0f1;

    /* Tipografía */
    --ff-font-titulos: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ff-font-texto:   'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ff-font-codigo:  ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    /* Escala tipográfica (razón 1.225 escritorio / 1.175 móvil) */
    --ff-t-h1:      40px;
    --ff-t-parte:   33px;
    --ff-t-seccion: 27px;
    --ff-t-sub:     22px;
    --ff-t-cuerpo:  18px;
    --ff-t-soporte: 15px;
    --ff-t-fino:    12px;  /* paso -2 de la escala: solo letra fina (credenciales) */

    --ff-lh-texto:  1.6;
    --ff-lh-titulo: 1.2;

    /* Espaciado (escala de 8) */
    --ff-s1: 4px;
    --ff-s2: 8px;
    --ff-s3: 16px;
    --ff-s4: 24px;
    --ff-s5: 32px;
    --ff-s6: 48px;
    --ff-s7: 64px;
    --ff-s8: 96px;

    /* Forma */
    --ff-radio:         8px;   /* bloques, código, botones */
    --ff-radio-tarjeta: 12px;  /* tarjetas e imágenes */
    --ff-medida:        660px; /* ~66 caracteres a 18px */

    /* Desplazamiento de anclas bajo la barra superior fija */
    --ff-ancla: 96px;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */
body {
    background: #ffffff;
    color: var(--ff-night);
    font-family: var(--ff-font-texto);
    line-height: var(--ff-lh-texto);
    -webkit-font-smoothing: antialiased;
}

.ff-articulo a,
.ff-aside a {
    color: var(--ff-ocean);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.ff-articulo a:hover,
.ff-aside a:hover { color: var(--ff-ocean-deep); }

.ff-articulo strong { font-weight: 600; }

/* Foco visible en todo lo interactivo */
.ff-layout :focus-visible,
.ff-sidebar :focus-visible,
.sidebar-toggle-btn:focus-visible {
    outline: 2px solid var(--ff-ocean);
    outline-offset: 2px;
    border-radius: 4px;
}
.ff-sidebar :focus-visible,
.ff-codigo :focus-visible { outline-color: var(--ff-aqua); }

/* Texto solo para lectores de pantalla */
.ff-oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* ==========================================================================
   3. MARCO
   ========================================================================== */

/* ---- Layout: columna central + aside derecho (no fijo) ---- */
.main-content { background: #ffffff; }

.ff-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: var(--ff-s6);
    align-items: start;
    max-width: 1200px;
}

.ff-articulo {
    min-width: 0;
    color: var(--ff-night);
    font-size: var(--ff-t-cuerpo);
    line-height: var(--ff-lh-texto);
}

/* Columna de lectura: el texto se queda en ~66 caracteres;
   figuras, código y tarjetas usan todo el ancho central. */
.ff-articulo :where(p, ul, ol, h1, h2, h3, h4,
    .ff-decision, .ff-error, .ff-cierre, .ff-diagnostico,
    .ff-tarjeta-adaptar, .ff-explorador--suelto, .ff-etapa, .ff-oferta) {
    max-width: var(--ff-medida);
}
.ff-articulo :where(.ff-decision, .ff-error, .ff-cierre, .ff-diagnostico,
    .ff-tarjeta-adaptar, .ff-explorador, .ff-codigo, .ff-grafica,
    .ff-pregunta-rapida, .ff-resultado) :where(p, ul, ol) {
    max-width: none;
}

/* ---- Menú lateral (contenedor de Atlas, interior propio) ---- */
#sidebar.ff-sidebar .logo img { width: 127px; }
#sidebar.ff-sidebar .sidebar-deco-top { width: 191px; height: 191px; }

#sidebar.ff-sidebar .sidebar-section {
    margin: 0 0 var(--ff-s3);
    padding: 0;
}

#sidebar.ff-sidebar .sidebar-section h2 {
    margin: 0 0 var(--ff-s1);
    font-family: var(--ff-font-texto);
    font-size: var(--ff-t-soporte);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: #ffffff;
}

#sidebar.ff-sidebar .sidebar-section h2 a,
#sidebar.ff-sidebar .ff-menu__secciones a {
    position: relative;
    display: block;
    border-radius: var(--ff-radio);
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

#sidebar.ff-sidebar .sidebar-section h2 a {
    padding: var(--ff-s2) var(--ff-s3);
    color: #ffffff;
    background: transparent;
}

#sidebar.ff-sidebar .ff-menu__secciones {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 0 var(--ff-s3);
    padding: 0 0 0 var(--ff-s2);
    border-left: 1px solid var(--ff-line-dark);
}

#sidebar.ff-sidebar .ff-menu__secciones a {
    padding: var(--ff-s1) var(--ff-s3);
    font-size: var(--ff-t-soporte);
    font-weight: 400;
    line-height: 1.4;
    color: var(--ff-text-dark-2);
    background: transparent;
}

#sidebar.ff-sidebar .sidebar-section h2 a:hover,
#sidebar.ff-sidebar .ff-menu__secciones a:hover {
    color: #ffffff;
    background: var(--ff-frame-hover);
}

/* Estado activo: dónde estás */
#sidebar.ff-sidebar .sidebar-section h2 a.is-activo,
#sidebar.ff-sidebar .ff-menu__secciones a.is-activo {
    color: var(--ff-aqua);
    font-weight: 600;
}
#sidebar.ff-sidebar .ff-menu__secciones a.is-activo::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--ff-s2) - 2px);
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 2px;
    background: var(--ff-aqua);
}

/* Botón para ocultar el menú lateral */
.sidebar-toggle-btn {
    position: fixed;
    bottom: 34px;
    left: calc(var(--sidebar-width, 280px) - 48px);
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--ff-aqua);
    color: var(--ff-night);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1101;
    -webkit-appearance: none;
    appearance: none;
    transition: left 0.2s ease, width 0.2s ease, border-radius 0.2s ease, transform 0.2s ease;
}
.sidebar-toggle-btn:hover,
.sidebar-toggle-btn:focus,
.sidebar-toggle-btn:active { background: var(--ff-aqua-hover); color: var(--ff-night); box-shadow: none; }
.sidebar-toggle-btn svg { width: 24px; height: 24px; stroke-width: 3; transition: transform 0.2s ease; }
.sidebar-toggle-btn.is-collapsed {
    left: 0;
    transform: translateX(0);
    width: 24px;
    border-radius: 0 16px 16px 0;
}
.sidebar-toggle-btn.is-collapsed svg { margin-left: 4px; transform: rotate(180deg); }

#sidebar.ff-sidebar { transition: transform 0.2s ease; }
#sidebar.ff-sidebar.is-collapsed { transform: translateX(-100%); }
.main-content { transition: margin-left 0.2s ease; }
body.sidebar-collapsed .main-content { margin-left: 0 !important; }
.topnav { transition: left 0.2s ease; }
body.sidebar-collapsed .topnav { left: 0; }

/* ---- Aside derecho: sobrio y sin fijar ---- */
.ff-aside {
    display: flex;
    flex-direction: column;
    gap: var(--ff-s3);
    font-size: var(--ff-t-soporte);
    line-height: var(--ff-lh-texto);
}

/* Fijo mientras se lee (desde 1200px de ancho, cuando el aside vive a
   la derecha). Sin altura máxima ni scroll propio: el aside sube con la
   página hasta tocar el tope y ahí se queda. */
@media (min-width: 1200px) {
    .ff-aside {
        position: sticky;
        top: calc(var(--topnav-height, 64px) + var(--ff-s4));
    }
}

.ff-tarjeta {
    background: #ffffff;
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radio-tarjeta);
    padding: var(--ff-s3) var(--ff-s4);
}

.ff-tarjeta__titulo {
    margin: 0 0 var(--ff-s2);
    font-family: var(--ff-font-titulos);
    font-size: var(--ff-t-cuerpo);
    font-weight: 600;
    line-height: var(--ff-lh-titulo);
    color: var(--ff-night);
}

.ff-tarjeta__texto {
    margin: 0 0 var(--ff-s3);
    font-size: var(--ff-t-soporte);
    color: var(--ff-text-2);
}

.ff-tarjeta__fina {
    margin: var(--ff-s2) 0 0;
    font-size: var(--ff-t-fino);
    line-height: 1.4;
    color: var(--ff-text-2);
    text-align: center;
}

.ff-autor {
    display: flex;
    align-items: center;
    gap: var(--ff-s3);
    margin: 0 0 var(--ff-s3);
}
.ff-autor__foto {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.ff-autor .ff-tarjeta__texto { margin: 0; }
.ff-autor__nombre {
    margin: 0;
    font-size: var(--ff-t-soporte);
    font-weight: 600;
    color: var(--ff-night);
}

.ff-campo {
    display: block;
    width: 100%;
    margin: 0 0 var(--ff-s2);
    padding: var(--ff-s2) var(--ff-s3);
    font-family: var(--ff-font-texto);
    font-size: var(--ff-t-cuerpo); /* 18px: evita el zoom automático en iOS */
    color: var(--ff-night);
    background: #ffffff;
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radio);
}
.ff-campo::placeholder { color: var(--ff-text-2); }
.ff-campo:focus { outline: 2px solid var(--ff-ocean); outline-offset: 1px; border-color: var(--ff-ocean); }

/* ---- Modal de la newsletter ---- */
.ff-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--ff-s3);
    background: rgba(0, 31, 61, 0.5);
    z-index: 3000;
}
.ff-modal.is-active { display: flex; }
.ff-modal__contenido {
    width: 100%;
    max-width: 360px;
    padding: var(--ff-s5);
    background: #ffffff;
    border-radius: var(--ff-radio-tarjeta);
    box-shadow: 0 16px 48px rgba(0, 31, 61, 0.24);
    text-align: center;
}
.ff-modal__img { width: 64px; height: 64px; margin: 0 auto var(--ff-s3); display: block; }
.ff-modal__titulo {
    margin: 0 0 var(--ff-s2);
    font-family: var(--ff-font-titulos);
    font-size: var(--ff-t-sub);
    font-weight: 600;
    line-height: var(--ff-lh-titulo);
    color: var(--ff-night);
}
.ff-modal__texto { margin: 0 0 var(--ff-s4); font-size: var(--ff-t-cuerpo); color: var(--ff-night); }


/* ==========================================================================
   4. ARTÍCULO
   ========================================================================== */

/* Anclas: que el título no quede debajo de la barra superior */
.ff-articulo [id] { scroll-margin-top: var(--ff-ancla); }

/* ---- Encabezado ---- */
.ff-cabecera { margin: 0 0 var(--ff-s5); }

.ff-migas ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ff-s2);
    margin: 0 0 var(--ff-s3);
    padding: 0;
    font-size: var(--ff-t-soporte);
    line-height: 1.4;
    color: var(--ff-night);
}
.ff-migas li { display: inline-flex; align-items: center; gap: var(--ff-s2); }
.ff-migas li + li::before { content: '/'; color: var(--ff-text-2); }
.ff-migas a { color: var(--ff-text-2); text-decoration: none; display: inline-flex; align-items: center; }
.ff-migas a:hover { color: var(--ff-ocean); text-decoration: underline; }
.ff-migas svg { width: 16px; height: 16px; }

.ff-titulo {
    margin: 0 0 var(--ff-s3);
    font-family: var(--ff-font-titulos);
    font-size: var(--ff-t-h1);
    font-weight: 700;
    line-height: var(--ff-lh-titulo);
    letter-spacing: -0.01em;
    color: var(--ff-night);
}

.ff-entrada {
    margin: 0 0 var(--ff-s3);
    font-size: var(--ff-t-sub);
    font-weight: 400;
    line-height: 1.5;
    color: var(--ff-text-2);
}

.ff-meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ff-s2) var(--ff-s4);
    margin: 0;
    padding: 0;
    font-size: var(--ff-t-soporte);
    line-height: 1.4;
    color: var(--ff-text-2);
}
.ff-meta a { color: inherit; text-decoration: none; }
.ff-meta a:hover { color: var(--ff-ocean); text-decoration: underline; }

.ff-portada {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 var(--ff-s5);
    border-radius: var(--ff-radio-tarjeta);
}

/* ---- Partes (H2): Contexto · Desarrollo · Adaptarlo ---- */
.ff-parte {
    margin: var(--ff-s8) 0 var(--ff-s4);
    padding-top: var(--ff-s4);
    border-top: 1px solid var(--ff-border);
}
.ff-parte--primera { margin-top: var(--ff-s6); }

.ff-parte__etiqueta {
    margin: 0 0 var(--ff-s2);
    font-size: var(--ff-t-soporte);
    font-weight: 600;
    line-height: 1.4;
    color: var(--ff-aqua-deep);
}

.ff-parte__titulo {
    margin: 0;
    font-family: var(--ff-font-titulos);
    font-size: var(--ff-t-parte);
    font-weight: 600;
    line-height: var(--ff-lh-titulo);
    color: var(--ff-night);
}

/* ---- Secciones (H3) y subsecciones (H4) ---- */
.ff-seccion { margin-top: var(--ff-s7); }
.ff-parte + .ff-seccion,
.ff-parte + .ff-intro-parte { margin-top: var(--ff-s5); }

.ff-seccion__titulo {
    margin: 0 0 var(--ff-s3);
    font-family: var(--ff-font-titulos);
    font-size: var(--ff-t-seccion);
    font-weight: 600;
    line-height: var(--ff-lh-titulo);
    color: var(--ff-night);
}

.ff-sub {
    margin: var(--ff-s6) 0 var(--ff-s3);
    font-family: var(--ff-font-titulos);
    font-size: var(--ff-t-sub);
    font-weight: 600;
    line-height: var(--ff-lh-titulo);
    color: var(--ff-night);
}

/* ---- Texto ----
   :where() deja la especificidad en cero para que cualquier clase
   (.ff-entrada, .ff-parte__etiqueta, …) pueda cambiar tamaño y margen. */
:where(.ff-articulo) p {
    margin: 0 0 var(--ff-s4);
    font-size: var(--ff-t-cuerpo);
    line-height: var(--ff-lh-texto);
    overflow-wrap: break-word;
}

.ff-lista {
    margin: 0 0 var(--ff-s4);
    padding-left: var(--ff-s4);
    list-style: disc;
}
.ff-lista--pasos { list-style: decimal; }
.ff-lista li {
    margin: 0 0 var(--ff-s2);
    padding-left: var(--ff-s1);
    font-size: var(--ff-t-cuerpo);
    line-height: var(--ff-lh-texto);
}
.ff-lista li::marker { color: var(--ff-text-2); }
.ff-lista--pasos li::marker { font-weight: 600; color: var(--ff-night); }

.ff-nota {
    font-size: var(--ff-t-soporte) !important;
    color: var(--ff-text-2);
}

/* Código en línea */
.ff-articulo :not(pre) > code {
    font-family: var(--ff-font-codigo);
    font-size: 0.85em;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background: var(--ff-surface);
    border: 1px solid var(--ff-border);
    color: var(--ff-night);
    overflow-wrap: anywhere;
}


/* ==========================================================================
   5. RECORRIDO (nivel 2): dónde estás, qué lograste, qué sigue
   ========================================================================== */

/* Etiqueta común de los bloques ("Decisión clave", "Checkpoint", …) */
.ff-etiqueta {
    margin: 0 0 var(--ff-s2) !important;
    font-size: var(--ff-t-soporte) !important;
    font-weight: 600;
    line-height: 1.4 !important;
}

/* ---- Apertura de etapa ---- */
.ff-etapa { margin: 0 0 var(--ff-s3); }
.ff-etapa__etiqueta {
    margin: 0 0 var(--ff-s2) !important;
    font-size: var(--ff-t-soporte) !important;
    font-weight: 600;
    line-height: 1.4 !important;
    color: var(--ff-aqua-deep);
}
.ff-etapa__progreso {
    list-style: none;
    display: flex;
    gap: var(--ff-s1);
    max-width: 240px !important;
    margin: 0;
    padding: 0;
}
.ff-etapa__progreso li {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--ff-border);
}
.ff-etapa__progreso li.is-hecha,
.ff-etapa__progreso li.is-actual { background: var(--ff-aqua); }

/* ---- Cierre de etapa: Checkpoint + "Sigue" ---- */
.ff-cierre {
    margin: var(--ff-s5) 0;
    padding: var(--ff-s3) var(--ff-s4);
    background: var(--ff-mint-tint);
    border-left: 4px solid var(--ff-aqua);
    border-radius: 0 var(--ff-radio) var(--ff-radio) 0;
}
.ff-cierre .ff-etiqueta { color: var(--ff-aqua-deep); }
.ff-cierre__lista {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ff-cierre__lista li {
    position: relative;
    margin: 0 0 var(--ff-s2);
    padding-left: var(--ff-s4);
    font-size: var(--ff-t-cuerpo);
    line-height: var(--ff-lh-texto);
}
.ff-cierre__lista li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--ff-aqua-deep);
}

.ff-sigue {
    margin: var(--ff-s3) 0 0 !important;
    padding-top: var(--ff-s3);
    border-top: 1px solid rgba(0, 130, 92, 0.2);
    font-weight: 600;
    color: var(--ff-aqua-deep);
}
.ff-articulo .ff-sigue a { color: var(--ff-aqua-deep); }
.ff-articulo .ff-sigue a:hover { color: var(--ff-night); }

/* "Sigue" fuera de un cierre (fin de parte) */
.ff-sigue--suelto {
    padding-top: 0;
    border-top: none;
}

/* ---- Error común ---- */
.ff-error {
    margin: var(--ff-s5) 0;
    padding: var(--ff-s3) var(--ff-s4);
    background: var(--ff-error-tint);
    border-left: 4px solid var(--ff-error);
    border-radius: 0 var(--ff-radio) var(--ff-radio) 0;
}
.ff-error .ff-etiqueta { color: var(--ff-error); }
.ff-error p:last-child { margin-bottom: 0; }


/* ==========================================================================
   6. DECISIÓN (nivel 1, protagonista) Y EXPLORADOR
   ========================================================================== */
.ff-decision {
    margin: var(--ff-s5) 0;
    padding: var(--ff-s3) var(--ff-s4);
    background: var(--ff-ocean-tint);
    border-left: 4px solid var(--ff-ocean);
    border-radius: 0 var(--ff-radio) var(--ff-radio) 0;
}
.ff-decision .ff-etiqueta { color: var(--ff-ocean); }
.ff-decision__pregunta {
    font-weight: 600;
    margin-bottom: var(--ff-s3) !important;
}
.ff-decision p { margin-bottom: var(--ff-s3); }
.ff-decision > p:last-child { margin-bottom: 0; }

/* ---- Explorador de decisiones ---- */
.ff-explorador {
    margin: var(--ff-s3) 0 0;
    padding-top: var(--ff-s3);
    border-top: 1px solid rgba(0, 106, 135, 0.2);
}

/* Explorador fuera de un bloque de decisión (muestra de la Parte 1) */
.ff-explorador--suelto {
    margin: var(--ff-s4) 0;
    padding: var(--ff-s3) var(--ff-s4);
    background: var(--ff-ocean-tint);
    border-top: none;
    border-left: 4px solid var(--ff-ocean);
    border-radius: 0 var(--ff-radio) var(--ff-radio) 0;
}

.ff-explorador__resumen {
    display: flex;
    align-items: center;
    gap: var(--ff-s2);
    cursor: pointer;
    list-style: none;
    font-size: var(--ff-t-soporte);
    font-weight: 600;
    line-height: 1.4;
    color: var(--ff-ocean);
}
.ff-explorador__resumen::-webkit-details-marker { display: none; }
.ff-explorador__resumen::marker { content: ''; }
.ff-explorador__resumen::after {
    content: '›';
    margin-left: auto;
    font-size: var(--ff-t-cuerpo);
    line-height: 1;
    transition: transform 0.15s ease;
}
.ff-explorador[open] > .ff-explorador__resumen::after { transform: rotate(90deg); }
.ff-explorador__resumen:hover { color: var(--ff-ocean-deep); }

.ff-chip {
    display: inline-block;
    padding: 0 var(--ff-s2);
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: var(--ff-t-soporte);
    font-weight: 600;
    line-height: 1.5;
}

.ff-explorador__cuerpo { padding-top: var(--ff-s3); }

.ff-explorador__pregunta {
    font-weight: 600;
    margin: 0 0 var(--ff-s3) !important;
}

.ff-explorador__opciones {
    display: flex;
    flex-direction: column;
    gap: var(--ff-s2);
    margin: 0 0 var(--ff-s3);
}

.ff-explorador__opcion {
    display: flex;
    align-items: flex-start;
    gap: var(--ff-s2);
    padding: var(--ff-s2) var(--ff-s3);
    background: #ffffff;
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radio);
    font-size: var(--ff-t-cuerpo);
    line-height: var(--ff-lh-texto);
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.ff-explorador__opcion:hover,
.ff-explorador__opcion:has(input:checked) { border-color: var(--ff-ocean); }
.ff-explorador__opcion input {
    margin-top: 6px;
    flex-shrink: 0;
    accent-color: var(--ff-ocean);
}
.ff-explorador__opcion em { font-style: normal; color: var(--ff-text-2); }

.ff-pregunta-rapida {
    margin: 0 0 var(--ff-s3);
    padding: var(--ff-s3) var(--ff-s4);
    background: #ffffff;
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radio);
}
.ff-pregunta-rapida .ff-etiqueta,
.ff-resultado .ff-etiqueta { color: var(--ff-ocean); }
.ff-pregunta-rapida p { margin-bottom: var(--ff-s3); }

.ff-resultado {
    padding: var(--ff-s3) var(--ff-s4);
    background: #ffffff;
    border-left: 4px solid var(--ff-ocean);
    border-radius: 0 var(--ff-radio) var(--ff-radio) 0;
}
.ff-resultado p { margin-bottom: var(--ff-s3); }
.ff-articulo .ff-resultado__enlace {
    font-size: var(--ff-t-soporte);
    font-weight: 600;
}


/* ==========================================================================
   7. CONTENIDO (nivel 3)
   ========================================================================== */

/* ---- Pestañas (Fundamentos) ---- */
.ff-pestanas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ff-s4);
    margin: var(--ff-s5) 0 var(--ff-s4);
    border-bottom: 1px solid var(--ff-border);
}
.ff-pestanas__btn {
    margin: 0 0 -1px;
    padding: var(--ff-s2) 0;
    font-family: var(--ff-font-texto);
    font-size: var(--ff-t-cuerpo);
    font-weight: 600;
    line-height: 1.4;
    color: var(--ff-text-2);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.ff-pestanas__btn:hover { color: var(--ff-night); }
.ff-pestanas__btn[aria-selected="true"] {
    color: var(--ff-night);
    border-bottom-color: var(--ff-ocean);
}
.ff-pestanas__panel > .ff-sub:first-child { margin-top: var(--ff-s4); }

/* ---- Figuras y diagramas ---- */
.ff-figura { margin: var(--ff-s5) 0; }
.ff-figura svg {
    display: block;
    width: 100%;
    max-width: 680px;
    height: auto;
    margin: 0 auto;
}
.ff-figura figcaption {
    max-width: var(--ff-medida);
    margin-top: var(--ff-s2);
    font-size: var(--ff-t-soporte);
    line-height: 1.5;
    color: var(--ff-text-2);
}
/* "Figura N." y "Tabla N." en marino, el resto en gris: primero se ubica, luego se interpreta */
.ff-figura figcaption strong {
    font-weight: 600;
    color: var(--ff-night);
}

/* Figuras con imagen de resultados (WebP exportados del notebook) */
.ff-figura--imagen img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radio);
    background: #f4fffe; /* mismo fondo que las gráficas del notebook, para que no parpadee al cargar */
}
.ff-figura--estrecha img { max-width: 560px; }
.ff-figura__ampliar { display: block; cursor: zoom-in; }
.ff-figura__ampliar:focus-visible { outline-offset: 4px; }

/* Referencias a figuras y tablas dentro del texto */
.ff-articulo a[href^="#figura-"],
.ff-articulo a[href^="#tabla-"] { white-space: nowrap; }

/* ---- Tablas de resultados ---- */
.ff-tabla figcaption {
    margin: 0 0 var(--ff-s2);
}
.ff-tabla__envoltura {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radio);
}
.ff-tabla table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ff-t-soporte);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.ff-tabla th,
.ff-tabla td {
    padding: var(--ff-s2) 12px;
    text-align: left;
    border-bottom: 1px solid var(--ff-border);
    white-space: nowrap;
}
.ff-tabla thead th {
    font-weight: 600;
    color: var(--ff-night);
    background: var(--ff-surface);
    vertical-align: bottom;
    white-space: normal;
}
.ff-tabla tbody th { font-weight: 600; color: var(--ff-night); white-space: normal; min-width: 160px; }
.ff-tabla__sub { display: block; font-weight: 400; color: var(--ff-text-2); }
.ff-tabla .num { text-align: right; }
.ff-tabla tbody tr:last-child th,
.ff-tabla tbody tr:last-child td { border-bottom: none; }
.ff-tabla tr.is-resaltada th,
.ff-tabla tr.is-resaltada td { background: var(--ff-ocean-tint); }
.ff-tabla tr.is-resaltada th { box-shadow: inset 4px 0 0 var(--ff-ocean); }
.ff-tabla__nota {
    margin: var(--ff-s2) 0 0 !important;
    font-size: var(--ff-t-soporte) !important;
    color: var(--ff-text-2);
}

/* Clases de texto y trazo dentro de los SVG */
.ff-svg-texto  { font-family: var(--ff-font-texto); font-size: 15px; fill: var(--ff-text-2); }
.ff-svg-titulo { font-family: var(--ff-font-titulos); font-size: 18px; font-weight: 600; fill: var(--ff-night); }
.ff-svg-dato   { font-family: var(--ff-font-texto); font-size: 15px; font-weight: 600; fill: var(--ff-ocean); }
.ff-svg-fuerte { font-family: var(--ff-font-texto); font-size: 15px; font-weight: 600; fill: var(--ff-night); }
.ff-svg-claro  { fill: #ffffff; }
.ff-svg-claro-2 { fill: var(--ff-text-dark-2); }
.ff-svg-trazo  { stroke: var(--ff-ocean); fill: none; }
.ff-svg-caja   { fill: #ffffff; stroke: var(--ff-ocean); stroke-width: 1.5; }
.ff-svg-caja--resultado { fill: var(--ff-night); stroke: var(--ff-night); }
.ff-svg-grupo  { fill: none; stroke: var(--ff-border); stroke-width: 1.5; stroke-dasharray: 6 6; }

/* ---- Gráfica interactiva ---- */
.ff-grafica {
    margin: var(--ff-s5) 0;
    padding: var(--ff-s3);
    background: var(--ff-surface);
    border-radius: var(--ff-radio-tarjeta);
}
.ff-grafica__titulo {
    margin: 0 0 var(--ff-s2) !important;
    font-size: var(--ff-t-soporte) !important;
    font-weight: 600;
    line-height: 1.4 !important;
    text-align: center;
    color: var(--ff-night);
}
.ff-grafica canvas {
    display: block;
    width: 100%;
    height: 300px;
    cursor: crosshair;
}

/* ---- Bloques de código ---- */
.ff-codigo {
    margin: var(--ff-s5) 0;
    padding: 0;
    background: var(--ff-night);
    border-radius: var(--ff-radio);
    color: var(--ff-code-text);
    overflow: hidden;
}

.ff-codigo__etiqueta {
    display: block;
    margin: 0 0 var(--ff-s2);
    font-family: var(--ff-font-texto);
    font-size: var(--ff-t-soporte);
    line-height: 1.4;
    color: var(--ff-text-dark-2);
}

.ff-codigo pre {
    margin: 0;
    padding: var(--ff-s3) var(--ff-s4);
    background: transparent;
    white-space: pre;
    tab-size: 4;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.ff-codigo pre::-webkit-scrollbar { height: 6px; }
.ff-codigo pre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 3px; }

/* Botón "Copiar" discreto sobre fondo marino */
.ff-boton--codigo {
    min-height: 32px;
    padding: var(--ff-s1) var(--ff-s3);
    background: transparent;
    color: var(--ff-code-text);
    border-color: var(--ff-line-dark);
}
.ff-boton--codigo:hover { background: var(--ff-frame-hover); color: #ffffff; }
.ff-boton--codigo.is-copiado { color: var(--ff-aqua); border-color: var(--ff-aqua); }
.ff-codigo code,
.ff-codigo .hljs {
    display: block;
    padding: 0 !important;
    font-family: var(--ff-font-codigo);
    font-size: var(--ff-t-soporte);
    line-height: var(--ff-lh-texto);
    color: var(--ff-code-text);
    background: transparent !important;
    white-space: pre;
}

/* Numeración de líneas (highlightjs-line-numbers) */
.ff-codigo table.hljs-ln,
.ff-codigo table.hljs-ln tr,
.ff-codigo table.hljs-ln td {
    margin: 0;
    padding: 0;
    border: none;
    border-spacing: 0;
    background: transparent;
    line-height: var(--ff-lh-texto);
    vertical-align: top;
}
.ff-codigo table.hljs-ln { border-collapse: collapse; }
.ff-codigo .hljs-ln-numbers {
    padding-right: var(--ff-s3) !important;
    text-align: right;
    color: var(--ff-text-dark-2);
    opacity: 0.7;
    user-select: none;
    white-space: nowrap;
}
.ff-codigo .hljs-ln-code { padding-left: var(--ff-s1) !important; white-space: pre; }

/* Sintaxis con la paleta de marca (todas ≥ 6:1 sobre marino) */
.ff-codigo .hljs-comment,
.ff-codigo .hljs-quote            { color: var(--ff-text-dark-2); font-style: italic; }
.ff-codigo .hljs-keyword,
.ff-codigo .hljs-selector-tag,
.ff-codigo .hljs-built_in,
.ff-codigo .hljs-type             { color: var(--ff-cyan); }
.ff-codigo .hljs-string,
.ff-codigo .hljs-regexp,
.ff-codigo .hljs-addition,
.ff-codigo .hljs-attribute        { color: var(--ff-mint); }
.ff-codigo .hljs-number,
.ff-codigo .hljs-literal,
.ff-codigo .hljs-symbol,
.ff-codigo .hljs-variable,
.ff-codigo .hljs-template-variable,
.ff-codigo .hljs-attr             { color: var(--ff-lime); }
.ff-codigo .hljs-title,
.ff-codigo .hljs-title.function_,
.ff-codigo .hljs-section,
.ff-codigo .hljs-name             { color: var(--ff-aqua); }
.ff-codigo .hljs-params,
.ff-codigo .hljs-subst            { color: var(--ff-code-text); }
.ff-codigo .hljs-meta             { color: var(--ff-text-dark-2); }
.ff-codigo .hljs-emphasis         { font-style: italic; }
.ff-codigo .hljs-strong           { font-weight: 600; }

/* Salida de la celda, debajo del código (como en el notebook) */
.ff-codigo__salida {
    border-top: 1px solid var(--ff-line-dark);
    background: rgba(255, 255, 255, 0.04);
}
.ff-codigo__salida .ff-codigo__etiqueta {
    margin: 0;
    padding: var(--ff-s2) var(--ff-s4) 0;
}
.ff-codigo__salida pre {
    padding-top: var(--ff-s2);
    font-family: var(--ff-font-codigo);
    font-size: var(--ff-t-soporte);
    line-height: var(--ff-lh-texto);
    color: var(--ff-text-dark-2);
}

/* ---- Barra superior de código y prompt ---- */
.ff-codigo__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ff-s3);
    padding: var(--ff-s2) var(--ff-s4);
    border-bottom: 1px solid var(--ff-line-dark);
}
.ff-codigo__barra .ff-codigo__etiqueta { margin: 0; }
.ff-codigo--prompt pre {
    font-family: var(--ff-font-codigo);
    font-size: var(--ff-t-soporte);
    line-height: var(--ff-lh-texto);
    color: var(--ff-code-text);
    white-space: pre-wrap;
}


/* ==========================================================================
   8. ADAPTAR (nivel 4)
   ========================================================================== */
.ff-diagnostico {
    margin: var(--ff-s4) 0;
    padding: var(--ff-s3) var(--ff-s4);
    background: #ffffff;
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radio);
}
.ff-diagnostico__pregunta { font-weight: 600; margin-bottom: var(--ff-s3) !important; }
.ff-diagnostico__fila {
    margin: 0 0 var(--ff-s2) !important;
    padding-left: var(--ff-s3);
    border-left: 2px solid var(--ff-border);
}
.ff-diagnostico__fila:last-child { margin-bottom: 0 !important; }

.ff-tarjeta-adaptar {
    margin: 0 0 var(--ff-s3);
    padding: var(--ff-s3) var(--ff-s4);
    background: var(--ff-surface);
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radio);
}
.ff-tarjeta-adaptar__pregunta { font-weight: 600; margin-bottom: var(--ff-s2) !important; }
.ff-tarjeta-adaptar__texto { margin-bottom: var(--ff-s3) !important; }
.ff-tarjeta-adaptar__enlaces {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ff-s2) var(--ff-s4);
    font-size: var(--ff-t-soporte);
    font-weight: 600;
}


/* ==========================================================================
   9. CONVERTIR Y MARCO DEL PIE
   ========================================================================== */

/* ---- Botones ---- */
.ff-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ff-s2);
    min-height: 40px;
    padding: var(--ff-s2) var(--ff-s3);
    font-family: var(--ff-font-texto);
    font-size: var(--ff-t-soporte);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
    border: 1px solid transparent;
    border-radius: var(--ff-radio);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ff-boton svg { width: 18px; height: 18px; flex-shrink: 0; }
.ff-boton--ancho { display: flex; width: 100%; }

.ff-boton--primario,
.ff-articulo a.ff-boton--primario,
.ff-aside a.ff-boton--primario {
    background: var(--ff-aqua-deep);
    color: #ffffff;
}
.ff-boton--primario:hover,
.ff-articulo a.ff-boton--primario:hover,
.ff-aside a.ff-boton--primario:hover {
    background: var(--ff-aqua-deep-hover);
    color: #ffffff;
}

.ff-boton--secundario,
.ff-articulo a.ff-boton--secundario {
    background: #ffffff;
    color: var(--ff-night);
    border-color: var(--ff-night);
}
.ff-boton--secundario:hover,
.ff-articulo a.ff-boton--secundario:hover {
    background: var(--ff-surface);
    color: var(--ff-night);
}

.ff-boton--contorno {
    background: #ffffff;
    color: var(--ff-aqua-deep);
    border-color: var(--ff-aqua-deep);
}
.ff-boton--contorno:hover { background: var(--ff-mint-tint); }

.ff-botones { display: flex; flex-wrap: wrap; gap: var(--ff-s3); margin: 0 0 var(--ff-s4); }

/* ---- Oferta de ayuda en contexto ---- */
.ff-oferta {
    margin: var(--ff-s7) 0 0;
    padding: var(--ff-s4);
    background: var(--ff-surface);
    border-radius: var(--ff-radio-tarjeta);
}
.ff-oferta__titulo {
    margin: 0 0 var(--ff-s2);
    font-family: var(--ff-font-titulos);
    font-size: var(--ff-t-sub);
    font-weight: 600;
    line-height: var(--ff-lh-titulo);
}
.ff-oferta p { margin-bottom: var(--ff-s3); }

/* ---- Pie del artículo ---- */
.ff-pie {
    margin-top: var(--ff-s8);
    padding-top: var(--ff-s4);
    border-top: 1px solid var(--ff-border);
}
.ff-pie .ff-seccion:first-child { margin-top: 0; }

/* ¿Te sirvió? */
.ff-feedback__opciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ff-s2);
    margin: var(--ff-s2) 0 0;
}
.ff-feedback__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ff-s2);
    min-height: 40px;
    padding: var(--ff-s2) var(--ff-s3);
    font-family: var(--ff-font-texto);
    font-size: var(--ff-t-soporte);
    font-weight: 600;
    color: var(--ff-night);
    background: #ffffff;
    border: 1px solid var(--ff-border);
    border-radius: 999px;
    cursor: pointer;
}
.ff-feedback__btn:hover { border-color: var(--ff-aqua); }
.ff-feedback__btn[aria-pressed="true"] { background: var(--ff-mint-tint); border-color: var(--ff-aqua); }
.ff-feedback__gracias { margin-top: var(--ff-s2) !important; }

/* Proyectos relacionados */
.ff-relacionados {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ff-s4);
    margin: var(--ff-s3) 0 0;
}
.ff-articulo a.ff-proyecto {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 96px;
    padding: var(--ff-s3) var(--ff-s4);
    background: #ffffff;
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radio-tarjeta);
    color: var(--ff-night);
    text-decoration: none;
    transition: border-color 0.15s ease;
}
.ff-articulo a.ff-proyecto:hover { border-color: var(--ff-ocean); color: var(--ff-night); }
.ff-proyecto__titulo {
    margin: 0;
    font-family: var(--ff-font-titulos);
    font-size: var(--ff-t-cuerpo);
    font-weight: 600;
    line-height: 1.35;
    color: var(--ff-night);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tooltip que aparece arriba de la tarjeta al pasar el cursor */
.ff-proyecto__tooltip {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    padding-bottom: var(--ff-s2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    z-index: 30;
}
.ff-proyecto__tooltip-interior {
    display: block;
    position: relative;
    padding: var(--ff-s2) var(--ff-s3);
    background: var(--ff-night);
    border-radius: var(--ff-radio);
    color: #ffffff;
    font-size: var(--ff-t-soporte);
    line-height: 1.4;
}
.ff-proyecto__tooltip-interior::after {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--ff-s4);
    border: 6px solid transparent;
    border-top-color: var(--ff-night);
}
.ff-proyecto__sector { display: block; margin-bottom: var(--ff-s1); font-weight: 600; color: var(--ff-aqua); }
.ff-proyecto__bullet { display: block; margin: 0 !important; font-size: var(--ff-t-soporte) !important; line-height: 1.4 !important; color: #ffffff; }
.ff-proyecto__cta { display: block; margin-top: var(--ff-s1); font-weight: 600; color: var(--ff-aqua); }
.ff-proyecto__img { display: block; width: 100%; height: auto; margin-bottom: var(--ff-s2); border-radius: var(--ff-radio); }
.ff-articulo a.ff-proyecto:hover .ff-proyecto__tooltip,
.ff-articulo a.ff-proyecto:focus-visible .ff-proyecto__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
@media (hover: none) {
    .ff-proyecto__tooltip { display: none; }
}

/* ---- Mapa del proyecto (solo cuando el menú lateral no está visible) ---- */
.ff-mapa {
    display: none;
    margin: 0 0 var(--ff-s5);
    padding: var(--ff-s3) var(--ff-s4);
    background: var(--ff-surface);
    border-radius: var(--ff-radio-tarjeta);
}
.ff-mapa__titulo {
    margin: 0 0 var(--ff-s2);
    font-family: var(--ff-font-titulos);
    font-size: var(--ff-t-sub);
    font-weight: 600;
    line-height: var(--ff-lh-titulo);
}
.ff-mapa > ol {
    margin: 0;
    padding-left: var(--ff-s4);
    list-style: decimal;
}
.ff-mapa > ol > li {
    margin: var(--ff-s2) 0 0;
    font-size: var(--ff-t-cuerpo);
    font-weight: 600;
}
.ff-mapa > ol > li::marker { color: var(--ff-aqua-deep); }
.ff-mapa ul {
    list-style: none;
    margin: var(--ff-s1) 0 0;
    padding: 0;
}
.ff-mapa ul li {
    margin: 0;
    font-size: var(--ff-t-soporte);
    font-weight: 400;
    line-height: 1.4;
}
.ff-articulo .ff-mapa a {
    display: block;
    padding: var(--ff-s1) 0;
    color: var(--ff-night);
    text-decoration: none;
}
.ff-articulo .ff-mapa ul a { color: var(--ff-ocean); }


/* ==========================================================================
   10. RESPONSIVE Y ACCESIBILIDAD
   ========================================================================== */

/* Tablet ancha: el aside pasa al pie del artículo */
@media (max-width: 1199px) {
    .ff-layout { grid-template-columns: minmax(0, 1fr); }
    .ff-aside {
        margin-top: var(--ff-s7);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

/* Tablet: Atlas oculta el menú lateral → aparece el mapa en el cuerpo */
@media (max-width: 1024px) {
    .ff-mapa { display: block; }
    .sidebar-toggle-btn { display: none; }
}

/* Móvil */
@media (max-width: 768px) {
    :root {
        --ff-t-h1:      32px;
        --ff-t-parte:   28px;
        --ff-t-seccion: 24px;
        --ff-t-sub:     20px;
        --ff-t-cuerpo:  17px;
        --ff-ancla:     168px;
    }

    .ff-aside { grid-template-columns: minmax(0, 1fr); }
    .ff-relacionados { grid-template-columns: minmax(0, 1fr); }

    .ff-decision,
    .ff-error,
    .ff-cierre,
    .ff-explorador--suelto,
    .ff-diagnostico,
    .ff-tarjeta-adaptar { padding: var(--ff-s3); }

    .ff-codigo pre,
    .ff-codigo__barra,
    .ff-codigo__salida .ff-codigo__etiqueta { padding-left: var(--ff-s3); padding-right: var(--ff-s3); }
    .ff-tabla th,
    .ff-tabla td { padding: var(--ff-s2); }

    /* Menú lateral convertido en barra horizontal (Atlas):
       solo se muestran las 3 partes */
    #sidebar.ff-sidebar .sidebar-section { margin: 0; }
    #sidebar.ff-sidebar .sidebar-section h2 { display: block !important; margin: 0; }
    #sidebar.ff-sidebar .sidebar-section h2 a {
        padding: var(--ff-s2) var(--ff-s3);
        font-size: var(--ff-t-soporte);
        white-space: nowrap;
    }
    #sidebar.ff-sidebar .ff-menu__secciones { display: none; }
    #sidebar.ff-sidebar .sidebar-menu { gap: var(--ff-s2); }
}

/* Respeta a quien pidió reducir el movimiento */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}