#functionFactoryPLF22 {
    --ff-tinta: #18152f;
    --ff-suave: #68647b;
    --ff-papel: #f7f5ff;
    --ff-panel: #ffffff;
    --ff-linea: #ddd8ed;
    --ff-morado: #7653ff;
    --ff-naranja: #ff754b;
    --ff-lima: #b8ed42;
    --ff-cian: #32cfe3;
    --ff-rojo: #e94967;
    min-height: 100vh;
    padding: clamp(18px, 3vw, 42px);
    color: var(--ff-tinta);
    border-radius: 24px;
    background:
        radial-gradient(circle at 8% 5%, rgba(118, 83, 255, .14), transparent 27rem),
        radial-gradient(circle at 92% 12%, rgba(255, 117, 75, .14), transparent 26rem),
        linear-gradient(rgba(24, 21, 47, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(24, 21, 47, .035) 1px, transparent 1px),
        var(--ff-papel);
    background-size: auto, auto, 28px 28px, 28px 28px, auto;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#functionFactoryPLF22 *, #functionFactoryPLF22 *::before, #functionFactoryPLF22 *::after { box-sizing: border-box; }
#functionFactoryPLF22 h1, #functionFactoryPLF22 h2, #functionFactoryPLF22 h3, #functionFactoryPLF22 p { margin-top: 0; }
#functionFactoryPLF22 button, #functionFactoryPLF22 input, #functionFactoryPLF22 select { font: inherit; }
#functionFactoryPLF22 button { cursor: pointer; }
#functionFactoryPLF22 button:disabled { cursor: not-allowed; opacity: .4; }
#functionFactoryPLF22 code, #functionFactoryPLF22 pre { font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; }

#functionFactoryPLF22 .enlace-volver {
    margin-bottom: 17px;
    padding: 6px 0;
    color: var(--ff-morado);
    border: 0;
    background: transparent;
    font-weight: 900;
}

.ff22-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 28px;
    align-items: center;
    overflow: hidden;
    padding: clamp(28px, 5vw, 58px);
    color: #fff;
    border: 2px solid var(--ff-tinta);
    border-radius: 28px;
    background: var(--ff-tinta);
    box-shadow: 10px 12px 0 rgba(118, 83, 255, .22);
}
.ff22-hero::after { content:"ƒ(x)"; position:absolute; right:22%; bottom:-52px; color:rgba(255,255,255,.045); font-size:14rem; font-weight:950; line-height:1; transform:rotate(-8deg); }
.ff22-hero > * { position:relative; z-index:1; }
.ff22-kicker { display:inline-block; margin-bottom:10px; color:var(--ff-lima); font-size:.7rem; font-weight:950; letter-spacing:.16em; text-transform:uppercase; }
.ff22-hero h1 { margin-bottom:15px; font-size:clamp(3rem,7vw,6.4rem); line-height:.79; letter-spacing:-.075em; }
.ff22-hero h1 em { color:var(--ff-naranja); font-style:normal; }
.ff22-hero p { max-width:760px; margin-bottom:18px; color:#d6d1e8; line-height:1.65; }
.ff22-hero code { color:var(--ff-lima); }
.ff22-etiquetas { display:flex; flex-wrap:wrap; gap:8px; }
.ff22-etiquetas span { padding:7px 10px; color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.06); font-size:.72rem; font-weight:800; }

.ff22-marcador { padding:21px; color:var(--ff-tinta); border:2px solid #fff; border-radius:18px; background:var(--ff-lima); box-shadow:6px 6px 0 var(--ff-naranja); }
.ff22-marcador small, .ff22-marcador strong, .ff22-marcador span, .ff22-marcador b { display:block; }
.ff22-marcador small { font-size:.65rem; font-weight:950; letter-spacing:.13em; }
.ff22-marcador strong { margin:4px 0; font-size:3.3rem; line-height:1; }
.ff22-marcador span, .ff22-marcador b { font-size:.76rem; }
.ff22-marcador b { margin-top:11px; }
.ff22-barra { height:8px; margin-top:13px; overflow:hidden; border:1px solid var(--ff-tinta); border-radius:999px; background:rgba(255,255,255,.42); }
.ff22-barra i { display:block; width:0; height:100%; background:var(--ff-morado); transition:width .3s ease; }

.ff22-identificacion { display:grid; grid-template-columns:1.4fr .8fr .8fr; gap:12px; margin:25px 0 0; padding:18px; border:2px solid var(--ff-tinta); border-radius:18px; background:#fff; box-shadow:5px 5px 0 rgba(24,21,47,.12); }
.ff22-identificacion label { color:var(--ff-suave); font-size:.75rem; font-weight:900; }
.ff22-identificacion input, .ff22-identificacion select, .ff22-selector-demo input, .ff22-selector-demo select { display:block; width:100%; min-height:44px; margin-top:6px; padding:9px 11px; color:var(--ff-tinta); border:2px solid var(--ff-linea); border-radius:10px; outline:0; background:#fff; }
.ff22-identificacion input:focus, .ff22-identificacion select:focus, .ff22-selector-demo input:focus, .ff22-selector-demo select:focus { border-color:var(--ff-morado); box-shadow:0 0 0 3px rgba(118,83,255,.12); }

.ff22-demo, .ff22-practica { margin-top:26px; padding:clamp(21px,3vw,35px); border:2px solid var(--ff-tinta); border-radius:24px; background:rgba(255,255,255,.94); box-shadow:7px 8px 0 rgba(24,21,47,.12); }
.ff22-cabecera { display:flex; justify-content:space-between; gap:25px; align-items:start; margin-bottom:22px; }
.ff22-cabecera > div:first-child { position:relative; padding-left:58px; }
.ff22-numero { position:absolute; left:0; top:0; display:grid; place-items:center; min-width:43px; height:43px; padding:0 7px; color:#fff; border:2px solid var(--ff-tinta); border-radius:12px; background:var(--ff-morado); font-size:.72rem; font-weight:950; }
.ff22-cabecera h2, .ff22-estacion h2, .ff22-cierre h2 { margin-bottom:6px; font-size:clamp(1.5rem,3vw,2.25rem); letter-spacing:-.045em; }
.ff22-cabecera p, .ff22-estacion header p, .ff22-cierre p { margin-bottom:0; color:var(--ff-suave); line-height:1.55; }
.ff22-selector-demo { display:grid; grid-template-columns:1.4fr 88px auto; gap:8px; min-width:min(100%,510px); }
.ff22-selector-demo input, .ff22-selector-demo select { margin-top:0; }
.ff22-selector-demo button, .ff22-principal, .ff22-cierre button { min-height:44px; padding:9px 14px; color:#fff; border:2px solid var(--ff-tinta); border-radius:10px; background:var(--ff-morado); box-shadow:3px 3px 0 var(--ff-tinta); font-weight:900; }
.ff22-selector-demo button:active, .ff22-principal:active, .ff22-cierre button:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ff-tinta); }

.ff22-codigo-demo { overflow:hidden; margin-bottom:15px; border:2px solid var(--ff-tinta); border-radius:13px; background:#201d39; }
.ff22-codigo-demo span { display:block; padding:7px 12px; color:var(--ff-tinta); background:var(--ff-lima); font-size:.65rem; font-weight:950; letter-spacing:.12em; }
.ff22-codigo-demo pre { min-height:100px; margin:0; padding:16px; overflow:auto; color:#f3efff; line-height:1.55; white-space:pre-wrap; }

.ff22-banda { position:relative; display:grid; grid-template-columns:repeat(7,auto); gap:9px; align-items:center; overflow:hidden; padding:20px; border:2px solid var(--ff-tinta); border-radius:17px; background:repeating-linear-gradient(90deg,#e8e3f6 0 32px,#f4f1fc 32px 64px); }
.ff22-banda::after { content:""; position:absolute; left:0; right:0; bottom:6px; height:5px; background:repeating-linear-gradient(90deg,var(--ff-tinta) 0 20px,transparent 20px 29px); opacity:.45; }
.ff22-banda article { min-width:120px; padding:13px; text-align:center; border:2px solid var(--ff-tinta); border-radius:12px; background:#fff; box-shadow:3px 3px 0 rgba(24,21,47,.16); }
.ff22-banda article small, .ff22-banda article strong, .ff22-banda article span { display:block; }
.ff22-banda article small { color:var(--ff-morado); font-size:.6rem; font-weight:950; letter-spacing:.1em; }
.ff22-banda article strong { margin:5px 0; overflow-wrap:anywhere; }
.ff22-banda article span { color:var(--ff-suave); font-size:.68rem; }
.ff22-banda > i { color:var(--ff-naranja); font-size:1.5rem; font-style:normal; font-weight:950; }
.ff22-banda .ff22-producto { background:var(--ff-lima); }
.ff22-banda.fabricando article { animation:ff22producto .55s ease both; }
.ff22-banda.fabricando article:nth-of-type(2) { animation-delay:.12s; }
.ff22-banda.fabricando article:nth-of-type(3) { animation-delay:.24s; }
.ff22-banda.fabricando article:nth-of-type(4) { animation-delay:.36s; }
@keyframes ff22producto { 0%{opacity:.25;transform:translateX(-16px) scale(.96)} 100%{opacity:1;transform:none} }

.ff22-cabecera-practica { margin-bottom:18px; }
.ff22-navegacion { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.ff22-navegacion button { display:grid; grid-template-columns:34px minmax(0,1fr); gap:8px; align-items:center; min-height:64px; padding:9px; color:var(--ff-suave); text-align:left; border:2px solid var(--ff-linea); border-radius:12px; background:#fff; font-size:.7rem; font-weight:850; }
.ff22-navegacion button b { display:grid; place-items:center; width:31px; height:31px; color:#fff; border-radius:8px; background:var(--ff-tinta); }
.ff22-navegacion button.activa { color:var(--ff-tinta); border-color:var(--ff-morado); background:#f0edff; }
.ff22-navegacion button.revisada b { color:var(--ff-tinta); background:var(--ff-naranja); }
.ff22-navegacion button.perfecta { border-color:#86b41d; background:#f4ffd9; }
.ff22-navegacion button.perfecta b { background:var(--ff-lima); }

.ff22-estacion { overflow:hidden; border:2px solid var(--ff-tinta); border-radius:18px; background:#fbfaff; }
.ff22-estacion > header { display:flex; justify-content:space-between; gap:18px; padding:21px; color:#fff; background:var(--ff-tinta); }
.ff22-estacion > header span { color:var(--ff-lima); font-size:.65rem; font-weight:950; letter-spacing:.13em; }
.ff22-estacion > header p { color:#cbc6df; }
.ff22-intentos { flex:0 0 auto; min-width:82px; padding:10px; color:var(--ff-tinta); text-align:center; border:2px solid #fff; border-radius:11px; background:var(--ff-naranja); }
.ff22-intentos small, .ff22-intentos strong { display:block; }
.ff22-intentos small { font-size:.58rem; font-weight:950; letter-spacing:.08em; }
.ff22-intentos strong { font-size:1.75rem; }
.ff22-actividad { padding:21px; }
.ff22-mini-titulo { display:block; margin-bottom:7px; color:var(--ff-morado); font-size:.65rem; font-weight:950; letter-spacing:.13em; }

.ff22-doble-panel { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.ff22-doble-panel > section { padding:16px; border:2px solid var(--ff-linea); border-radius:13px; background:#fff; }
.ff22-doble-panel p, .ff22-instruccion { color:var(--ff-suave); font-size:.82rem; }
.ff22-piezas { display:grid; gap:8px; }
.ff22-piezas button, .ff22-pipeline-piezas button { padding:11px; color:var(--ff-tinta); text-align:left; border:2px solid var(--ff-linea); border-radius:9px; background:#f7f5ff; }
.ff22-piezas button:not(:disabled):hover, .ff22-pipeline-piezas button:not(:disabled):hover { border-color:var(--ff-morado); transform:translateY(-2px); }
.ff22-ensamble { display:grid; gap:7px; min-height:190px; margin:0 0 12px; padding-left:28px; }
.ff22-ensamble li { padding:10px; border:2px solid var(--ff-linea); border-radius:9px; background:#f7f5ff; }
.ff22-ensamble li.vacia { color:var(--ff-suave); font-style:italic; }
.ff22-ensamble.correcta { outline:3px solid rgba(134,180,29,.3); }
.ff22-ensamble.incorrecta { outline:3px solid rgba(233,73,103,.24); }
.ff22-limpiar, .ff22-secundario { min-height:40px; padding:8px 13px; color:var(--ff-tinta); border:2px solid var(--ff-tinta); border-radius:9px; background:#fff; font-weight:850; }

.ff22-lista-casos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.ff22-caso { padding:15px; border:2px solid var(--ff-linea); border-radius:13px; background:#fff; transition:border-color .2s ease, transform .2s ease; }
.ff22-caso > span { color:var(--ff-naranja); font-size:.62rem; font-weight:950; letter-spacing:.1em; }
.ff22-caso pre { min-height:102px; margin:8px 0 12px; padding:12px; overflow:auto; color:#f2efff; border-radius:9px; background:#201d39; font-size:.76rem; line-height:1.5; white-space:pre-wrap; }
.ff22-caso h3 { margin-bottom:11px; font-size:.9rem; }
.ff22-caso > div { display:flex; flex-wrap:wrap; gap:7px; }
.ff22-caso button { padding:7px 10px; color:var(--ff-suave); border:2px solid var(--ff-linea); border-radius:8px; background:#fff; font-size:.77rem; font-weight:800; }
.ff22-caso button:hover, .ff22-caso button.elegida { color:var(--ff-tinta); border-color:var(--ff-morado); background:#efebff; }
.ff22-caso.correcta { border-color:#8cb929; background:#f8ffe8; }
.ff22-caso.incorrecta { border-color:var(--ff-rojo); background:#fff4f6; }

.ff22-objetivo { display:flex; justify-content:center; gap:13px; align-items:center; margin-bottom:12px; padding:14px; color:#fff; border-radius:12px; background:var(--ff-tinta); }
.ff22-objetivo span { color:#cbc6df; font-size:.65rem; font-weight:950; letter-spacing:.1em; }
.ff22-objetivo strong { color:var(--ff-lima); font-size:1.7rem; }
.ff22-objetivo i { color:var(--ff-naranja); font-style:normal; font-size:1.4rem; }
.ff22-pipeline-piezas { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.ff22-pipeline-piezas b, .ff22-pipeline-piezas code { display:block; }
.ff22-pipeline-piezas b { margin-bottom:5px; color:var(--ff-morado); }
.ff22-reactor { display:flex; align-items:center; gap:7px; min-height:120px; margin:13px 0; padding:15px; overflow:auto; border:2px dashed var(--ff-linea); border-radius:13px; background:#f7f5ff; }
.ff22-reactor > i { color:var(--ff-naranja); font-style:normal; font-weight:950; }
.ff22-nodo { flex:0 0 auto; min-width:112px; padding:11px; text-align:center; border:2px solid var(--ff-tinta); border-radius:10px; background:#fff; }
.ff22-nodo small, .ff22-nodo strong { display:block; }
.ff22-nodo small { color:var(--ff-morado); font-size:.58rem; font-weight:950; }
.ff22-nodo.inicio { background:var(--ff-cian); }
.ff22-nodo.final { background:var(--ff-lima); }
.ff22-reactor.correcta { border-color:#86b41d; background:#f7ffe4; }
.ff22-reactor.incorrecta { border-color:var(--ff-rojo); background:#fff2f5; }

.ff22-retro { margin:0 21px 21px; padding:13px 15px; color:var(--ff-suave); border-left:5px solid var(--ff-morado); border-radius:9px; background:#f0edff; }
.ff22-retro.exito { color:#425d09; border-color:#86b41d; background:#f0ffd1; }
.ff22-retro.error { color:#8b2035; border-color:var(--ff-rojo); background:#fff0f3; }
.ff22-controles { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; margin-top:14px; }
.ff22-controles #ff22Siguiente { justify-self:end; }

.ff22-cierre { display:flex; justify-content:space-between; gap:24px; align-items:center; margin-top:27px; padding:24px; color:#fff; border:2px solid var(--ff-tinta); border-radius:19px; background:linear-gradient(125deg,var(--ff-morado),#4830ad); box-shadow:6px 7px 0 var(--ff-lima); }
.ff22-cierre p { max-width:760px; color:#e5e0ff; }
.ff22-cierre button { flex:0 0 auto; color:var(--ff-tinta); background:var(--ff-lima); }
.ff22-acceso { margin-top:12px; }

@media (max-width:1000px) {
    .ff22-selector-demo { grid-template-columns:1fr 90px; }
    .ff22-selector-demo button { grid-column:1/-1; }
    .ff22-navegacion { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .ff22-banda { grid-template-columns:repeat(4,1fr); }
    .ff22-banda > i { display:none; }
}
@media (max-width:760px) {
    #functionFactoryPLF22 { padding:14px; border-radius:0; }
    .ff22-hero, .ff22-identificacion, .ff22-doble-panel { grid-template-columns:1fr; }
    .ff22-cabecera, .ff22-cierre { display:block; }
    .ff22-selector-demo { grid-template-columns:1fr; width:100%; margin-top:15px; }
    .ff22-selector-demo button { grid-column:auto; }
    .ff22-lista-casos { grid-template-columns:1fr; }
    .ff22-cierre button { margin-top:14px; }
}
@media (max-width:540px) {
    .ff22-navegacion, .ff22-pipeline-piezas, .ff22-banda { grid-template-columns:1fr; }
    .ff22-estacion > header { display:block; }
    .ff22-intentos { margin-top:12px; }
    .ff22-controles { grid-template-columns:1fr; }
    .ff22-controles #ff22Siguiente { justify-self:stretch; }
    .ff22-hero::after { display:none; }
}
@media (prefers-reduced-motion:reduce) {
    #functionFactoryPLF22 * { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}