/* =====================================================================

   FUNDINGKINGDOM · SISTEMA DE DISENO

   Un solo sitio donde vive el aspecto de la web entera.

   ---------------------------------------------------------------
   POR QUE ESTE ARCHIVO Y NO ESTILOS EN CADA PAGINA
   ---------------------------------------------------------------
   La web tenia tres lenguajes visuales a la vez: las tarjetas de
   Bootstrap, el azul del pie de pagina y el estilo propio de las
   paginas nuevas. Nada estaba roto, pero el conjunto se leia como
   tres sitios pegados — y eso es exactamente lo que hace que una web
   parezca amateur aunque cada pagina por separado este bien.

   Aqui se define UNA paleta, UNA tipografia y UNA forma de tarjeta,
   y ademas se redefinen las variables de Bootstrap. Asi mejoran de
   golpe TODAS las paginas, incluidas las que no se han tocado.

   ---------------------------------------------------------------
   LA PALETA NO SE INVENTO
   ---------------------------------------------------------------
   Sale de lo que ya tenias: el azul #4f8cff y el violeta #a06bff del
   degradado de tu pie de pagina. Se le anade el oro, que en una marca
   que se llama Kingdom no es decoracion: es de donde viene el nombre,
   y es lo que distingue la cuenta principal de las demas.

   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    /* --- fondos --- */
    --fk-bg:        #05070f;
    --fk-surface:   #0c1220;
    --fk-surface-2: #121a2b;
    --fk-raised:    #161f33;

    /* --- lineas --- */
    --fk-line:      rgba(148, 163, 199, .13);
    --fk-line-2:    rgba(148, 163, 199, .22);

    /* --- texto --- */
    --fk-text:      #e9eef8;
    --fk-muted:     #8b97ad;
    --fk-faint:     #6b7689;

    /* --- marca --- */
    --fk-accent:    #4f8cff;
    --fk-accent-2:  #a06bff;
    --fk-gold:      #e0b050;

    /* --- estado. Separado de la marca a proposito: si el color de
           "va bien" fuera el mismo que el de la marca, no se podria
           distinguir una cuenta sana de un boton. --- */
    --fk-ok:        #35d39a;
    --fk-warn:      #e8b44a;
    --fk-bad:       #ff6b6b;

    /* --- medidas --- */
    --fk-r:         14px;
    --fk-r-sm:      9px;
    --fk-ancho:     1240px;

    /* --- Bootstrap bebe de aqui, y con eso se arreglan de una vez
           todas las paginas que usan sus clases --- */
    --bs-body-bg:      var(--fk-bg);
    --bs-body-color:   var(--fk-text);
    --bs-dark-rgb:     12, 18, 32;
    --bs-primary:      var(--fk-accent);
    --bs-primary-rgb:  79, 140, 255;
    --bs-border-color: var(--fk-line);
    --bs-secondary-color: var(--fk-muted);
    --bs-body-font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* =====================================================================
   BASE
   ===================================================================== */

html { -webkit-text-size-adjust: 100%; }

/* OJO: background-COLOR, no el atajo 'background'.
   El atajo borra tambien el background-image, y la portada pone ahi el
   toro. Con el atajo y un !important, el rey de la pagina principal
   desaparecia. */
body,
body.bg-black {
    background-color: var(--fk-bg) !important;
    color: var(--fk-text);
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .fk-display {
    font-family: 'Manrope', system-ui, sans-serif;
    letter-spacing: -.022em;
    text-wrap: balance;
    color: #fff;
}

h1 { font-weight: 800; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.15; }
h2 { font-weight: 700; font-size: clamp(22px, 2.4vw, 27px); }
h3 { font-weight: 700; font-size: 20px; }
h4 { font-weight: 700; font-size: 17px; }

p  { color: var(--fk-muted); }

a  { color: var(--fk-accent); text-decoration: none; }
a:hover { color: #7aa8ff; }

/* Las cifras SIEMPRE en mono y con digitos de ancho fijo: en una
   tabla de cuentas, que los numeros no bailen de fila en fila es la
   diferencia entre poder compararlos de un vistazo y no poder. */
.fk-num, .fk-mono, td.fk-num, .table td.fk-num {
    font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.fk-eti {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fk-faint);
}

:focus-visible {
    outline: 2px solid var(--fk-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* =====================================================================
   CABECERA
   El sitio donde mas se notaba: una fila de botones de colores
   distintos. Un menu no son botones — son enlaces, y el color se
   guarda para lo que de verdad hay que pulsar.
   ===================================================================== */

.fk-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 0 26px;
    height: 62px;
    background: rgba(5, 7, 15, .86);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid var(--fk-line);
}

.fk-marca {
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.03em;
    background: linear-gradient(90deg, var(--fk-accent), var(--fk-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}

.fk-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-wrap: wrap;
}

.fk-nav-links a {
    position: relative;
    padding: 7px 13px;
    border-radius: var(--fk-r-sm);
    color: var(--fk-muted);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: color .14s ease, background .14s ease;
}

.fk-nav-links a:hover {
    color: var(--fk-text);
    background: rgba(255, 255, 255, .05);
}

.fk-nav-links a.activo {
    color: #fff;
    background: rgba(79, 140, 255, .13);
}

/* Una sola accion destacada. Si todo destaca, no destaca nada. */
.fk-nav-links a.fk-cta {
    color: #fff;
    background: linear-gradient(90deg, var(--fk-accent), var(--fk-accent-2));
    font-weight: 700;
}

.fk-nav-links a.fk-cta:hover { filter: brightness(1.09); }

.fk-nav-sep {
    width: 1px;
    height: 20px;
    background: var(--fk-line-2);
    margin: 0 6px;
}

.fk-nav-links a.fk-tenue { color: var(--fk-faint); font-size: 13px; }
.fk-nav-links a.fk-tenue:hover { color: var(--fk-bad); background: rgba(255,107,107,.09); }

@media (max-width: 860px) {
    .fk-nav { height: auto; padding: 12px 16px; flex-wrap: wrap; gap: 12px; }
    .fk-nav-links { margin-left: 0; width: 100%; }
}

/* =====================================================================
   SUPERFICIES
   ===================================================================== */

.card,
.bg-dark,
.fk-panel {
    background: var(--fk-surface) !important;
    border: 1px solid var(--fk-line) !important;
    border-radius: var(--fk-r) !important;
    color: var(--fk-text);
}

.card { box-shadow: none !important; }

/* La elevacion solo al pasar por encima: una pagina donde todo flota
   es una pagina donde nada parece pulsable. */
.card:hover { border-color: var(--fk-line-2) !important; }

.fk-panel { padding: 22px; }

.fk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 18px;
}

/* =====================================================================
   BOTONES
   ===================================================================== */

.btn {
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--fk-r-sm);
    padding: 9px 17px;
    transition: filter .14s ease, background .14s ease, border-color .14s ease;
}

.btn-primary, .fk-boton {
    background: linear-gradient(90deg, var(--fk-accent), var(--fk-accent-2)) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700;
}

.btn-primary:hover, .fk-boton:hover { filter: brightness(1.09); color: #fff !important; }

.btn-outline-light, .btn-outline-warning, .btn-outline-info, .fk-boton-sec {
    background: var(--fk-surface-2) !important;
    border: 1px solid var(--fk-line-2) !important;
    color: var(--fk-text) !important;
    font-weight: 600;
}

.btn-outline-light:hover, .btn-outline-warning:hover,
.btn-outline-info:hover, .fk-boton-sec:hover {
    background: var(--fk-raised) !important;
    color: #fff !important;
}

.btn-outline-danger {
    background: transparent !important;
    border: 1px solid rgba(255,107,107,.35) !important;
    color: var(--fk-bad) !important;
}

/* =====================================================================
   FORMULARIOS
   ===================================================================== */

.form-control, .form-select, .fk-in {
    background: #080d18 !important;
    border: 1px solid var(--fk-line-2) !important;
    color: var(--fk-text) !important;
    border-radius: var(--fk-r-sm) !important;
    font-family: inherit;
    font-size: 14px;
    padding: 8px 12px;
}

.form-control:focus, .form-select:focus, .fk-in:focus {
    border-color: var(--fk-accent) !important;
    box-shadow: 0 0 0 3px rgba(79, 140, 255, .16) !important;
    outline: none;
}

.form-control::placeholder, .fk-in::placeholder { color: var(--fk-faint); }

input[type="checkbox"] {
    accent-color: var(--fk-accent);
    cursor: pointer;
}

/* =====================================================================
   TABLAS
   ===================================================================== */

.table, .table-dark, table.fk-tabla {
    --bs-table-bg: transparent;
    --bs-table-color: var(--fk-text);
    color: var(--fk-text);
    border-color: var(--fk-line);
}

.table > :not(caption) > * > *,
table.fk-tabla td, table.fk-tabla th {
    background: transparent;
    border-bottom: 1px solid var(--fk-line);
    padding: 11px 13px;
    vertical-align: middle;
}

.table thead th, table.fk-tabla thead th {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fk-faint);
    border-bottom: 1px solid var(--fk-line-2);
    white-space: nowrap;
}

.table-hover > tbody > tr:hover > *,
table.fk-tabla tbody tr:hover td {
    background: rgba(255, 255, 255, .028);
    color: var(--fk-text);
}

/* =====================================================================
   ETIQUETAS DE ESTADO
   El color aqui NO es el de la marca: significa algo. Verde va bien,
   ambar esta justo, rojo esta mal, oro es la principal.
   ===================================================================== */

.badge, .fk-badge {
    font-family: inherit;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .05em;
    border-radius: 999px;
    padding: 4px 11px;
}

.fk-b-on   { background: rgba(53,211,154,.13); color: var(--fk-ok);   border: 1px solid rgba(53,211,154,.30); }
.fk-b-off  { background: rgba(255,107,107,.12); color: var(--fk-bad);  border: 1px solid rgba(255,107,107,.30); }
.fk-b-oro  { background: rgba(224,176,80,.14);  color: var(--fk-gold); border: 1px solid rgba(224,176,80,.32); }
.fk-b-azul { background: rgba(79,140,255,.14);  color: #8fb6ff;        border: 1px solid rgba(79,140,255,.32); }
.fk-b-gris { background: rgba(255,255,255,.05); color: var(--fk-muted);border: 1px solid var(--fk-line-2); }

.badge.bg-success { background: rgba(53,211,154,.13) !important; color: var(--fk-ok) !important;   border: 1px solid rgba(53,211,154,.30); }
.badge.bg-warning { background: rgba(224,176,80,.14) !important; color: var(--fk-gold) !important; border: 1px solid rgba(224,176,80,.32); }
.badge.bg-danger  { background: rgba(255,107,107,.12) !important; color: var(--fk-bad) !important; border: 1px solid rgba(255,107,107,.30); }
.badge.bg-secondary { background: rgba(255,255,255,.05) !important; color: var(--fk-muted) !important; border: 1px solid var(--fk-line-2); }

.text-secondary { color: var(--fk-muted) !important; }
.text-success   { color: var(--fk-ok) !important; }
.text-danger    { color: var(--fk-bad) !important; }
.text-warning   { color: var(--fk-gold) !important; }

/* =====================================================================
   AVISOS
   ===================================================================== */

.alert, .fk-ok, .fk-err, .fk-info {
    border-radius: var(--fk-r);
    padding: 14px 17px;
    font-size: 14.5px;
    line-height: 1.55;
    border: 1px solid var(--fk-line);
    background: var(--fk-surface);
    color: var(--fk-muted);
}

.fk-ok  { background: rgba(53,211,154,.08);  border-color: rgba(53,211,154,.26);  color: #a9f0d3; }
.fk-err, .alert-danger { background: rgba(255,107,107,.08) !important; border-color: rgba(255,107,107,.26) !important; color: #ffc4c4 !important; }
.fk-info { background: rgba(79,140,255,.07); border-color: rgba(79,140,255,.22); color: #c3d4f2; }

/* =====================================================================
   BARRA DE SALUD
   ===================================================================== */

.fk-salud {
    height: 7px;
    border-radius: 4px;
    background: #0a1120;
    overflow: hidden;
    min-width: 88px;
    border: 1px solid var(--fk-line);
}

.fk-salud > span { display: block; height: 100%; border-radius: 4px; }

.fk-viva  { background: var(--fk-ok); }
.fk-justa { background: var(--fk-warn); }
.fk-mal   { background: var(--fk-bad); }

/* Punto de vida de un Enlace. */
.fk-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .45rem; vertical-align: middle; }
.fk-on  { background: var(--fk-ok);  box-shadow: 0 0 0 3px rgba(53,211,154,.16); }
.fk-off { background: var(--fk-bad); box-shadow: 0 0 0 3px rgba(255,107,107,.16); }

/* =====================================================================
   ARMAZON DE PAGINA
   Lo que repetian todas las paginas nuevas copiado y pegado.
   ===================================================================== */

.fk-page {
    max-width: var(--fk-ancho);
    margin: 0 auto;
    padding: 34px 26px 20px;
}

.fk-header { margin-bottom: 30px; }

.fk-header h1 { margin: 0 0 9px; }

.fk-header p {
    margin: 0;
    max-width: 68ch;      /* la linea de lectura comoda; mas ancho cansa */
    color: var(--fk-muted);
    font-size: 15.5px;
}

.fk-page .fk-eti { margin: 32px 0 13px; }
.fk-page .fk-eti:first-of-type { margin-top: 0; }

/* Lo ancho se desplaza dentro de su caja, nunca empujando la pagina. */
.fk-scroll { overflow-x: auto; }

/* Trozo de dato: un escalon, una lectura de salud. */
.fk-chip {
    display: inline-block;
    background: #080d18;
    border: 1px solid var(--fk-line);
    border-radius: 6px;
    padding: .16rem .58rem;
    margin: 0 .3rem .3rem 0;
    font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    font-size: 12.5px;
    color: #a9b4c7;
    white-space: nowrap;
}

.fk-mini {
    padding: 16px 18px;
    border-radius: var(--fk-r);
    background: var(--fk-surface);
    border: 1px solid var(--fk-line);
}

@media (max-width: 640px) {
    .fk-page { padding: 24px 16px 16px; }
}

/* =====================================================================
   EL NUCLEO VIVO

   Un nucleo que late. No es adorno: la pieza se llama asi, y un nucleo
   que respira dice de un vistazo lo que tres lineas de texto —esto
   esta encendido y esta trabajando— sin que nadie tenga que leerlas.

   Todo con CSS: ni imagenes que cargar, ni libreria que traer. Se
   escala a cualquier tamano cambiando --fk-orbe.
   ===================================================================== */

.fk-orbe {
    --fk-orbe: 190px;

    position: relative;
    display: block;
    width: var(--fk-orbe);
    height: var(--fk-orbe);
    margin: 0 auto;
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    isolation: isolate;
}

/* El halo. Late despacio, como una respiracion. */
.fk-orbe::before {
    content: '';
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(79, 140, 255, .30) 0%,
        rgba(160, 107, 255, .13) 45%,
        transparent 70%);
    animation: fk-latido 3.6s ease-in-out infinite;
    z-index: -2;
}

/* El anillo exterior: un degradado conico que gira. El truco del
   'mask' deja solo el borde, asi que gira un aro y no un disco. */
.fk-orbe::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        var(--fk-accent) 70deg,
        var(--fk-accent-2) 150deg,
        transparent 220deg,
        transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: fk-giro 7s linear infinite;
    z-index: -1;
}

/* El cuerpo. */
.fk-orbe-cuerpo {
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%, rgba(120, 165, 255, .28), transparent 55%),
        radial-gradient(circle at 68% 72%, rgba(160, 107, 255, .22), transparent 55%),
        linear-gradient(160deg, #0e1830, #070c18);
    border: 1px solid rgba(120, 160, 255, .26);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
    transition: border-color .3s ease, transform .3s ease;
}

/* Anillo interior girando al reves: dos velocidades opuestas dan
   sensacion de mecanismo, no de gif. */
.fk-orbe-cuerpo::before {
    content: '';
    position: absolute;
    inset: 13%;
    border-radius: 50%;
    border: 1px dashed rgba(140, 175, 255, .28);
    border-right-color: transparent;
    border-bottom-color: transparent;
    animation: fk-giro-inv 11s linear infinite;
}

.fk-orbe-corona {
    font-size: calc(var(--fk-orbe) * .21);
    line-height: 1;
    filter: drop-shadow(0 0 12px rgba(224, 176, 80, .55));
    animation: fk-flota 4.4s ease-in-out infinite;
}

.fk-orbe-txt {
    font-size: calc(var(--fk-orbe) * .085);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
}

.fk-orbe-sub {
    font-size: calc(var(--fk-orbe) * .058);
    color: var(--fk-muted);
    letter-spacing: .05em;
}

/* Al pasar por encima se acelera y se enciende: responde, o sea que
   se puede tocar. */
.fk-orbe:hover .fk-orbe-cuerpo {
    border-color: rgba(140, 180, 255, .55);
    transform: scale(1.035);
}

.fk-orbe:hover::after  { animation-duration: 2.6s; }
.fk-orbe:hover::before { animation-duration: 1.7s; }

@keyframes fk-giro     { to { transform: rotate(360deg); } }
@keyframes fk-giro-inv { to { transform: rotate(-360deg); } }

@keyframes fk-latido {
    0%, 100% { opacity: .55; transform: scale(.94); }
    50%      { opacity: 1;   transform: scale(1.06); }
}

@keyframes fk-flota {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* Un punto verde que parpadea cuando algo esta en linea de verdad. */
.fk-orbe-vivo {
    position: absolute;
    bottom: 11%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: calc(var(--fk-orbe) * .052);
    color: var(--fk-ok);
    font-weight: 600;
}

.fk-orbe-vivo i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--fk-ok);
    animation: fk-parpadeo 1.9s ease-in-out infinite;
    font-style: normal;
}

@keyframes fk-parpadeo {
    0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(53,211,154,.5); }
    50%      { opacity: .5; box-shadow: 0 0 0 6px rgba(53,211,154,0); }
}

/* =====================================================================
   ACCESOS VIVOS
   Cada destino es una tarjeta que reacciona: se levanta, se le
   enciende el borde y le cruza un brillo. Un enlace que no se mueve
   no parece que lleve a ningun sitio.
   ===================================================================== */

.fk-accesos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 16px;
}

.fk-acceso {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 22px;
    border-radius: var(--fk-r);
    background: linear-gradient(160deg, var(--fk-surface), #080d18);
    border: 1px solid var(--fk-line);
    color: var(--fk-text);
    text-decoration: none;
    overflow: hidden;
    transition: transform .22s cubic-bezier(.2,.7,.3,1),
                border-color .22s ease,
                box-shadow .22s ease;
}

/* El brillo que cruza. Vive fuera de la tarjeta y solo entra al pasar
   por encima. */
.fk-acceso::before {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.055), transparent);
    transition: left .55s ease;
}

.fk-acceso:hover {
    transform: translateY(-4px);
    border-color: rgba(79, 140, 255, .42);
    box-shadow: 0 12px 34px -14px rgba(79, 140, 255, .45);
    color: #fff;
}

.fk-acceso:hover::before { left: 120%; }

.fk-acceso-icono {
    font-size: 26px;
    line-height: 1;
    margin-bottom: 3px;
    transition: transform .22s ease;
}

.fk-acceso:hover .fk-acceso-icono { transform: scale(1.14) rotate(-5deg); }

.fk-acceso-nom { font-weight: 700; font-size: 16.5px; }
.fk-acceso-sub { color: var(--fk-muted); font-size: 13.5px; line-height: 1.5; }

/* La flecha aparece al acercarse: dice "esto lleva a algun sitio". */
.fk-acceso-ir {
    margin-top: auto;
    padding-top: 10px;
    color: var(--fk-accent);
    font-size: 13.5px;
    font-weight: 600;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .22s ease, transform .22s ease;
}

.fk-acceso:hover .fk-acceso-ir { opacity: 1; transform: translateX(0); }

/* Que se apague todo si el usuario pidio menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .fk-orbe::before, .fk-orbe::after,
    .fk-orbe-cuerpo::before, .fk-orbe-corona, .fk-orbe-vivo i { animation: none; }
}

/* =====================================================================
   QUE LA WEB ESTE VIVA

   Tres reglas, y ninguna es adorno:

     1. Al entrar, el contenido llega — no aparece de golpe. Da la
        sensacion de que la pagina se monta para ti.
     2. Lo que se puede tocar responde ANTES de tocarlo (al acercarse)
        y AL tocarlo (se hunde). Un boton que no se hunde no parece un
        boton.
     3. Lo que esta vivo de verdad —una conexion, una cuenta operando—
        late. Lo que no, se queda quieto. Asi el movimiento significa
        algo en vez de ser ruido.
   ===================================================================== */

/* --- 1. Entrada --- */
@keyframes fk-entra {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.fk-page > * {
    animation: fk-entra .5s cubic-bezier(.2, .7, .3, 1) backwards;
}

/* En cascada: cada bloque entra un pelin despues del anterior. */
.fk-page > *:nth-child(1) { animation-delay: .02s; }
.fk-page > *:nth-child(2) { animation-delay: .07s; }
.fk-page > *:nth-child(3) { animation-delay: .12s; }
.fk-page > *:nth-child(4) { animation-delay: .17s; }
.fk-page > *:nth-child(5) { animation-delay: .22s; }
.fk-page > *:nth-child(6) { animation-delay: .27s; }
.fk-page > *:nth-child(n+7) { animation-delay: .32s; }

/* --- 2. Lo que se toca --- */

.btn, .fk-boton, .fk-acceso, .fk-orbe, button[type="submit"] {
    transition: transform .16s cubic-bezier(.2,.7,.3,1),
                box-shadow .2s ease,
                filter .16s ease,
                border-color .2s ease;
}

.btn:hover, .fk-boton:hover, button[type="submit"]:hover {
    transform: translateY(-2px);
}

/* Se hunde al pulsar. Es la mitad de la sensacion de "boton". */
.btn:active, .fk-boton:active, button[type="submit"]:active,
.fk-acceso:active, .fk-orbe:active {
    transform: translateY(1px) scale(.985);
}

.btn-primary, .fk-boton, button[type="submit"] {
    box-shadow: 0 6px 20px -10px rgba(79, 140, 255, .75);
}

.btn-primary:hover, .fk-boton:hover, button[type="submit"]:hover {
    box-shadow: 0 12px 28px -10px rgba(79, 140, 255, .85);
}

/* Subrayado que crece desde el centro. */
.fk-nav-links a::after {
    content: '';
    position: absolute;
    left: 50%; right: 50%;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--fk-accent), var(--fk-accent-2));
    transition: left .2s ease, right .2s ease;
}

.fk-nav-links a:hover::after { left: 22%; right: 22%; }
.fk-nav-links a.activo::after { left: 22%; right: 22%; }
.fk-nav-links a.fk-cta::after { display: none; }

/* Filas de tabla: se iluminan y se desplazan un pelo. */
table.fk-tabla tbody tr {
    transition: background .15s ease, transform .15s ease;
}

table.fk-tabla tbody tr:hover { transform: translateX(2px); }

/* Los campos crecen un pelo al escribir en ellos: dice cual esta activo
   sin tener que buscar el cursor. */
.fk-in, .form-control, .form-select {
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.fk-in:focus, .form-control:focus, .form-select:focus { transform: scale(1.012); }

/* --- 3. Lo que esta vivo, late --- */

/* Un punto verde quieto dice "conectado". Uno que late dice "esta
   pasando algo ahora mismo", que es distinto. */
.fk-punto.fk-on { animation: fk-parpadeo 2.2s ease-in-out infinite; }

/* Barra de salud: se llena al cargar en vez de aparecer llena. Se ve
   de un vistazo cuales estan cortas. */
@keyframes fk-llena { from { width: 0 !important; } }

.fk-salud > span {
    animation: fk-llena .9s cubic-bezier(.2,.7,.3,1) backwards;
    animation-delay: .25s;
    transition: background .3s ease;
}

/* La etiqueta de REAL avisa: si el Nucleo esta armando de verdad, esa
   etiqueta no puede pasar desapercibida. */
.fk-badge.fk-b-on { animation: fk-aviso 2.8s ease-in-out infinite; }

@keyframes fk-aviso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(53, 211, 154, .30); }
    50%      { box-shadow: 0 0 0 5px rgba(53, 211, 154, 0); }
}

/* --- Nada de esto si el usuario pidio menos movimiento --- */
@media (prefers-reduced-motion: reduce) {
    .fk-page > *, .fk-salud > span,
    .fk-punto.fk-on, .fk-badge.fk-b-on { animation: none; }

    .btn:hover, .fk-boton:hover, button[type="submit"]:hover,
    table.fk-tabla tbody tr:hover, .fk-in:focus { transform: none; }
}

/* =====================================================================
   LA BARRA DE ABAJO

   Los destinos van abajo, no arriba, y como botones que responden.

   ---------------------------------------------------------------
   POR QUE ABAJO
   ---------------------------------------------------------------
   Porque es donde esta la mano. En el movil el pulgar no llega
   comodo a la parte de arriba de la pantalla, y esto se mira desde el
   movil tanto como desde el ordenador. Arriba queda solo la marca:
   lo que identifica, no lo que se pulsa.

   Va fija, asi que se puede saltar del Nucleo al Bot sin subir a
   buscar nada.
   ===================================================================== */

/* Sitio para que la barra no tape el final de la pagina. */
body { padding-bottom: 104px; }

.fk-dock {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;

    display: flex;
    align-items: stretch;
    gap: 5px;
    padding: 7px;

    border-radius: 20px;
    background: rgba(10, 15, 28, .82);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border: 1px solid var(--fk-line-2);
    box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .9),
                0 0 0 1px rgba(255, 255, 255, .02) inset;

    max-width: calc(100vw - 24px);
    overflow-x: auto;
    scrollbar-width: none;
}

.fk-dock::-webkit-scrollbar { display: none; }

.fk-dock a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    min-width: 76px;
    padding: 9px 12px 8px;
    border-radius: 14px;

    color: var(--fk-muted);
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;

    transition: color .18s ease,
                background .18s ease,
                transform .18s cubic-bezier(.2,.7,.3,1);
}

.fk-dock a i {
    font-style: normal;
    font-size: 21px;
    line-height: 1;
    transition: transform .22s cubic-bezier(.2,.7,.3,1);
}

/* Se levanta y el icono crece: la misma respuesta que las tarjetas,
   para que toda la web reaccione igual. */
.fk-dock a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
    transform: translateY(-4px);
}

.fk-dock a:hover i { transform: scale(1.18) translateY(-1px); }

.fk-dock a:active { transform: translateY(-1px) scale(.97); }

/* Donde estas. El punto de abajo lo dice sin tener que leer. */
.fk-dock a.activo {
    color: #fff;
    background: linear-gradient(160deg, rgba(79,140,255,.20), rgba(160,107,255,.10));
}

.fk-dock a.activo::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--fk-accent), var(--fk-accent-2));
}

/* El Nucleo se distingue del resto: es a donde se va a trabajar. */
.fk-dock a.fk-dock-nucleo i {
    filter: drop-shadow(0 0 9px rgba(79, 140, 255, .65));
    animation: fk-flota 4.4s ease-in-out infinite;
}

.fk-dock a.fk-salir:hover { color: var(--fk-bad); background: rgba(255,107,107,.10); }

.fk-dock-sep {
    width: 1px;
    margin: 10px 3px;
    background: var(--fk-line-2);
    flex: 0 0 auto;
}

/* La barra de arriba se queda solo con la marca. */
.fk-nav.fk-nav-simple { justify-content: space-between; }

@media (max-width: 560px) {
    .fk-dock a { min-width: 62px; padding: 8px 8px 7px; font-size: 10.5px; }
    .fk-dock a i { font-size: 19px; }
    body { padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
    .fk-dock a:hover { transform: none; }
    .fk-dock a:hover i { transform: none; }
    .fk-dock a.fk-dock-nucleo i { animation: none; }
}

/* =====================================================================
   CERRAR TODO

   El boton que se pulsa cuando algo va mal.

   ---------------------------------------------------------------
   POR QUE ES DISTINTO A TODO LO DEMAS
   ---------------------------------------------------------------
   Es el unico rojo de la web. Si hubiera mas cosas rojas, en el
   momento de buscarlo habria que leer para encontrarlo — y ese es
   justo el momento en el que no se lee.

   Va en la barra de abajo, o sea que esta en TODAS las paginas.
   Nadie deberia tener que navegar a ningun sitio para cerrar.
   ===================================================================== */

.fk-panico {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    min-width: 84px;
    padding: 9px 14px 8px;
    border: 1px solid rgba(255, 107, 107, .42);
    border-radius: 14px;
    background: rgba(255, 107, 107, .13);

    color: #ff8f8f;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: pointer;

    transition: background .16s ease, transform .16s cubic-bezier(.2,.7,.3,1),
                border-color .16s ease, color .16s ease;
}

.fk-panico i { font-style: normal; font-size: 20px; line-height: 1; }

.fk-panico:hover {
    background: rgba(255, 107, 107, .24);
    border-color: rgba(255, 107, 107, .75);
    color: #fff;
    transform: translateY(-4px);
}

.fk-panico:active { transform: translateY(-1px) scale(.97); }

/* =====================================================================
   PIE
   ===================================================================== */

.fk-footer {
    margin-top: 72px;
    padding: 54px 26px 26px;
    background: linear-gradient(180deg, #080e1c 0%, var(--fk-bg) 100%);
    border-top: 1px solid var(--fk-line-2);
    color: var(--fk-muted);
    font-size: 14px;
}

.fk-footer-grid {
    max-width: var(--fk-ancho);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 38px;
}

.fk-footer h4 {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fk-faint);
    border: none;
    padding: 0;
}

.fk-footer a {
    display: block;
    padding: 5px 0;
    color: var(--fk-muted);
    font-size: 14px;
}

.fk-footer a:hover { color: var(--fk-text); }

.fk-footer .fk-brand {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.03em;
    background: linear-gradient(90deg, var(--fk-accent), var(--fk-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.fk-footer-risk {
    max-width: var(--fk-ancho);
    margin: 40px auto 0;
    padding: 18px 20px;
    border-radius: var(--fk-r);
    background: rgba(255, 255, 255, .022);
    border: 1px solid var(--fk-line);
    color: var(--fk-faint);
    font-size: 12.5px;
    line-height: 1.62;
}

.fk-footer-bottom {
    max-width: var(--fk-ancho);
    margin: 22px auto 0;
    padding-top: 18px;
    border-top: 1px solid var(--fk-line);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--fk-faint);
    font-size: 13px;
}

@media (max-width: 900px) {
    .fk-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .fk-footer-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   ACCESIBILIDAD
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}