{"id":320,"date":"2020-04-03T07:30:12","date_gmt":"2020-04-03T07:30:12","guid":{"rendered":"http:\/\/demo.gretathemes.com\/estar\/?page_id=2"},"modified":"2026-05-20T21:38:04","modified_gmt":"2026-05-20T19:38:04","slug":"front-page","status":"publish","type":"page","link":"http:\/\/absys.dacya.ucm.es\/","title":{"rendered":"Inicio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"320\" class=\"elementor elementor-320\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d760017 e-con-full e-flex e-con e-parent\" data-id=\"d760017\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-3802985 e-flex e-con-boxed e-con e-child\" data-id=\"3802985\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e609596 elementor-widget elementor-widget-html\" data-id=\"e609596\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\" \/>\n\n<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\n\n    \/* FULL WIDTH *\/\n    .elementor-section,\n    .elementor-container,\n    #primary,\n    #content,\n    .site-content {\n        max-width: none !important;\n        width: 100% !important;\n        margin: 0 !important;\n        padding: 0 !important;\n    }\n\n    \/* ===================== HERO ===================== *\/\n    .hero-modern {\n        position: relative;\n        width: 100vw;\n        left: 50%;\n        margin-left: -50vw;\n        overflow: hidden;\n        background:\n            radial-gradient(circle at top left, rgba(0, 140, 255, 0.18), transparent 30%),\n            radial-gradient(circle at bottom right, rgba(0, 255, 200, 0.08), transparent 35%),\n            linear-gradient(135deg, #050816 0%, #0b1020 100%);\n        padding: 120px 0;\n    }\n\n    .hero-modern::before {\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        background-image:\n            linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);\n        background-size: 40px 40px;\n        mask-image: radial-gradient(circle at center, black 30%, transparent 90%);\n    }\n\n    .hero-wrapper {\n        position: relative;\n        z-index: 2;\n        max-width: 1300px;\n        margin: auto;\n        padding: 0 60px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 80px;\n    }\n\n    .hero-left {\n        flex: 1;\n    }\n\n    .hero-badge {\n        display: inline-flex;\n        align-items: center;\n        gap: 10px;\n        padding: 8px 16px;\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        border-radius: 999px;\n        background: rgba(255, 255, 255, 0.03);\n        backdrop-filter: blur(10px);\n        color: #93c5fd;\n        font-family: 'Plus Jakarta Sans', sans-serif;\n        font-size: 1.25rem;\n        font-weight: 700;\n        letter-spacing: 0.12em;\n        text-transform: uppercase;\n        margin-bottom: 20px;\n    }\n\n    .hero-title {\n        font-size: 4.5rem;\n        font-family: 'Plus Jakarta Sans', sans-serif;\n        line-height: 1.02;\n        font-weight: 1000;\n        color: white;\n        margin-bottom: 28px;\n        letter-spacing: -2px;\n    }\n\n    .hero-title span.blue-highlight {\n        color: #93c5fd;\n    }\n\n    .hero-description {\n        font-size: 1.15rem;\n        line-height: 1.8;\n        font-family: 'Plus Jakarta Sans', sans-serif;\n        color: #94a3b8;\n        max-width: 650px;\n        margin-bottom: 40px;\n    }\n\n    .hero-buttons {\n        display: flex;\n        gap: 18px;\n        flex-wrap: wrap;\n    }\n\n    .hero-btn {\n        padding: 15px 28px;\n        border-radius: 14px;\n        text-decoration: none;\n        font-weight: 600;\n        transition: 0.25s ease;\n    }\n\n    .hero-btn-primary {\n        background: #2563eb;\n        color: white;\n    }\n\n    .hero-btn-primary:hover {\n        transform: translateY(-2px);\n        background: #3b82f6;\n    }\n\n    .hero-btn-secondary {\n        border: 1px solid rgba(255, 255, 255, 0.12);\n        color: #e2e8f0;\n        background: rgba(255, 255, 255, 0.03);\n    }\n\n    .hero-btn-secondary:hover {\n        background: rgba(255, 255, 255, 0.07);\n    }\n\n    .hero-right {\n        flex: 1;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        min-width: 0;\n    }\n\n\n    .hero-visual {\n        position: relative;\n        width: 100%;\n        max-width: 720px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        \/* IMPORTANTE *\/\n        background: transparent;\n        border: none;\n        box-shadow: none;\n        backdrop-filter: none;\n\n        padding: 0;\n        height: auto;\n    }\n\n    .hero-logo {\n        width: 75%;\n        opacity: 0.95;\n    }\n\n    .hero-ucm {\n        margin-top: 40px;\n        display: flex;\n        align-items: center;\n        gap: 14px;\n        color: #94a3b8;\n    }\n\n    .hero-ucm img {\n        height: 34px;\n        width: auto;\n    }\n\n    @media(max-width:980px) {\n        .hero-wrapper {\n            flex-direction: column;\n            text-align: center;\n        }\n\n        .hero-title {\n            font-size: 3rem;\n        }\n\n        .hero-description {\n            margin-left: auto;\n            margin-right: auto;\n        }\n\n        .hero-buttons {\n            justify-content: center;\n        }\n\n        .hero-visual svg {\n            width: 100%;\n            height: auto;\n            overflow: visible;\n            display: block;\n        }\n\n\n        .hero-visual {\n            position: relative;\n            width: 100%;\n            max-width: 980px;\n        }\n    }\n\n    \/* ===================== FUNDERS CAROUSEL ===================== *\/\n    .funders-section {\n        position: relative;\n        width: 100vw;\n        left: 50%;\n        margin-left: -50vw;\n        overflow: hidden;\n        background: #0a1020;\n        padding: 80px 0;\n        border-top: 1px solid rgba(255, 255, 255, 0.05);\n        border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n    }\n\n    .funders-section::before {\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        background-image:\n            linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);\n        background-size: 40px 40px;\n        mask-image: radial-gradient(circle at center, black 30%, transparent 90%);\n        pointer-events: none;\n    }\n\n    .funders-header {\n        text-align: center;\n        margin-bottom: 50px;\n        position: relative;\n        z-index: 2;\n    }\n\n    .funders-eyebrow {\n        display: inline-flex;\n        align-items: center;\n        gap: 10px;\n        padding: 8px 16px;\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        border-radius: 999px;\n        background: rgba(255, 255, 255, 0.03);\n        backdrop-filter: blur(10px);\n        color: #93c5fd;\n        font-family: 'Plus Jakarta Sans', sans-serif;\n        font-size: 1.25rem;\n        font-weight: 700;\n        letter-spacing: 0.12em;\n        text-transform: uppercase;\n        margin-bottom: 20px;\n    }\n\n    .funders-title {\n        font-family: 'Plus Jakarta Sans', sans-serif;\n        font-size: clamp(2rem, 2vw, 2rem);\n        font-weight: 500;\n        color: white;\n        letter-spacing: -1px;\n    }\n\n    .funders-carousel-wrapper {\n        position: relative;\n        z-index: 2;\n        overflow: hidden;\n        max-width: 1200px;\n        margin: auto;\n        padding: 0 40px;\n    }\n\n    .funders-carousel-wrapper::before,\n    .funders-carousel-wrapper::after {\n        content: \"\";\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 80px;\n        z-index: 3;\n        pointer-events: none;\n    }\n\n    .funders-carousel-wrapper::before {\n        left: 0;\n        background: linear-gradient(to right, #0a1020 0%, transparent 100%);\n    }\n\n    .funders-carousel-wrapper::after {\n        right: 0;\n        background: linear-gradient(to left, #0a1020 0%, transparent 100%);\n    }\n\n    .funders-track {\n        display: flex;\n        gap: 40px;\n        width: max-content;\n    }\n\n    \/* (old animation removed \u2013 now handled by GSAP) *\/\n\n    .funder-item:hover {\n        background: rgba(255, 255, 255, 0.07);\n        border-color: rgba(96, 165, 250, 0.2);\n        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);\n        transform: translateY(-4px);\n    }\n\n    .funder-item img {\n        height: 80px;\n        width: auto;\n        opacity: 0.7;\n        transition: opacity 0.3s ease;\n        filter: grayscale(0.3);\n    }\n\n    .funder-item:hover img {\n        opacity: 1;\n        filter: grayscale(0);\n    }\n\n    \/* ===================== WORK AREAS (REESTRUCTURADO) ===================== *\/\n    .areas-section {\n        position: relative;\n        width: 100vw;\n        left: 50%;\n        margin-left: -50vw;\n        overflow: hidden;\n        padding: 120px 0 140px;\n        background: linear-gradient(180deg, #0b1020 0%, #0d1326 100%);\n        perspective: 1200px;\n    }\n\n    .areas-section::before {\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        background-image:\n            linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);\n        background-size: 42px 42px;\n        mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 80%);\n        pointer-events: none;\n    }\n\n    \/* Ambient orbs de fondo *\/\n    .areas-section::after {\n        content: \"\";\n        position: absolute;\n        width: 600px;\n        height: 600px;\n        left: -200px;\n        bottom: -200px;\n        border-radius: 50%;\n        background: radial-gradient(circle, rgba(37, 99, 235, 0.07), transparent 65%);\n        pointer-events: none;\n    }\n\n    .areas-inner {\n        position: relative;\n        z-index: 2;\n        max-width: 1300px;\n        margin: auto;\n        padding: 0 50px;\n    }\n\n    \/* Eyebrow *\/\n    .areas-eyebrow {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 18px;\n        margin-bottom: 64px;\n        color: #93c5fd;\n        font-size: 0.78rem;\n        font-weight: 700;\n        letter-spacing: .22em;\n        text-transform: uppercase;\n        font-family: 'Plus Jakarta Sans', sans-serif;\n    }\n\n    .areas-eyebrow::before,\n    .areas-eyebrow::after {\n        content: \"\";\n        flex: 1;\n        max-width: 80px;\n        height: 1px;\n        background: linear-gradient(90deg, transparent, rgba(147, 197, 253, .5), transparent);\n    }\n\n    \/* Grid asim\u00e9trico 55\/45 *\/\n    .areas-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 24px;\n        align-items: start;\n    }\n\n    \/* \u2500\u2500 Card base \u2500\u2500 *\/\n    .area-card {\n        position: relative;\n        border-radius: 28px;\n        overflow: hidden;\n        backdrop-filter: blur(24px);\n        border: 1px solid rgba(255, 255, 255, 0.07);\n        background: linear-gradient(148deg,\n                rgba(255, 255, 255, 0.055) 0%,\n                rgba(255, 255, 255, 0.018) 100%);\n        box-shadow:\n            0 0 0 0.5px rgba(255, 255, 255, 0.05) inset,\n            0 24px 60px rgba(0, 0, 0, 0.28);\n\n        \/* Estado inicial para GSAP \u2014 oculto *\/\n        opacity: 0;\n        transform-style: preserve-3d;\n        will-change: transform, opacity;\n\n        \/* Hover *\/\n        transition: border-color .4s ease, box-shadow .4s ease;\n    }\n\n    .area-card:hover {\n        border-color: rgba(96, 165, 250, .22);\n        box-shadow:\n            0 0 0 0.5px rgba(147, 197, 253, 0.1) inset,\n            0 32px 80px rgba(0, 0, 0, .35),\n            0 0 60px rgba(37, 99, 235, 0.1);\n    }\n\n    \/* Spotlight hover via CSS vars *\/\n    .area-card {\n        --mx: 50%;\n        --my: 50%;\n    }\n\n    .area-card::before {\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        background: radial-gradient(300px circle at var(--mx) var(--my),\n                rgba(96, 165, 250, 0.11) 0%,\n                transparent 70%);\n        opacity: 0;\n        transition: opacity .4s ease;\n        pointer-events: none;\n        z-index: 0;\n    }\n\n    .area-card:hover::before {\n        opacity: 1;\n    }\n\n    \/* Blob decorativo superior-derecha *\/\n    .area-card__deco {\n        position: absolute;\n        width: 150px;\n        height: 100px;\n        right: -50px;\n        top: 120px;\n        border-radius: 50%;\n        background: radial-gradient(circle, rgba(59, 130, 246, .14), transparent 68%);\n        pointer-events: none;\n        z-index: 0;\n    }\n\n    .area-card--primary,\n    .area-card--secondary {\n        padding: 30px 40px 50px 50px;\n    }\n\n    \/* Todos los hijos directos sobre el blob *\/\n    .area-card>* {\n        position: relative;\n        z-index: 1;\n    }\n\n    \/* \u2500\u2500 Bloques internos \u2500\u2500 *\/\n    .area-card__header {\n        margin-bottom: 24px;\n        opacity: 0;\n        transform: translateY(16px);\n    }\n\n    .area-card__title {\n        font-family: 'Plus Jakarta Sans', sans-serif;\n        font-size: 2.15rem;\n        font-weight: 800;\n        line-height: 1.1;\n        letter-spacing: -1.2px;\n        color: white;\n        margin: 0;\n    }\n\n    \/* Una sola palabra coloreada por card \u2014 equilibrio sin sobrecargar *\/\n    .area-card__title-accent {\n        color: #93c5fd;\n    }\n\n    \/* L\u00ednea divisoria con degradado *\/\n    .area-card__divider {\n        width: 100%;\n        height: 1px;\n        background: linear-gradient(90deg,\n                rgba(96, 165, 250, .45) 0%,\n                rgba(96, 165, 250, .12) 60%,\n                transparent 100%);\n        margin-bottom: 28px;\n        opacity: 0;\n        transform: scaleX(0);\n        transform-origin: left center;\n    }\n\n    .area-card__tag-row {\n        margin-bottom: 14px;\n    }\n\n    .area-card__tag {\n        font-family: 'Plus Jakarta Sans', sans-serif;\n        font-size: .68rem;\n        font-weight: 700;\n        letter-spacing: .18em;\n        text-transform: uppercase;\n        color: #93c5fd;\n        padding: 5px 12px;\n        border-radius: 999px;\n        border: 1px solid rgba(147, 197, 253, .2);\n        background: rgba(147, 197, 253, .05);\n    }\n\n    .area-card__stripe {\n        flex: 1;\n        height: 1px;\n        background: linear-gradient(90deg, rgba(96, 165, 250, .5), transparent);\n    }\n\n    .area-card__stat {\n        margin-bottom: 28px;\n        opacity: 0;\n        transform: translateY(16px);\n    }\n\n    .area-card__num {\n        display: block;\n        font-family: 'Plus Jakarta Sans', sans-serif;\n        font-size: 5rem;\n        font-weight: 800;\n        line-height: 1;\n        letter-spacing: -4px;\n        color: white;\n        \/* el contador anima el contenido v\u00eda JS *\/\n    }\n\n    .area-card__num-label {\n        display: block;\n        margin-top: 4px;\n        font-size: .72rem;\n        font-weight: 700;\n        letter-spacing: .14em;\n        text-transform: uppercase;\n        color: #60a5fa;\n    }\n\n    .area-card__body {\n        opacity: 0;\n        transform: translateY(16px);\n    }\n\n    .area-card__title {\n        font-family: 'Plus Jakarta Sans', sans-serif;\n        font-size: 2.1rem;\n        font-weight: 700;\n        line-height: 1.12;\n        letter-spacing: -1px;\n        color: white;\n        margin-bottom: 16px;\n    }\n\n    .area-card__text {\n        font-family: 'Plus Jakarta Sans', sans-serif;\n        font-size: .98rem;\n        line-height: 1.9;\n        color: #94a3b8;\n        margin-bottom: 36px;\n    }\n\n    \/* Bot\u00f3n \u2014 reutiliza .split-btn con alias *\/\n    .area-card__btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 10px;\n        padding: 13px 22px;\n        border-radius: 14px;\n        text-decoration: none;\n        font-family: 'Plus Jakarta Sans', sans-serif;\n        font-weight: 600;\n        font-size: .9rem;\n        color: white;\n        background: rgba(255, 255, 255, 0.04);\n        border: 1px solid rgba(255, 255, 255, 0.09);\n        transition: background .28s ease, border-color .28s ease, gap .28s ease;\n    }\n\n    .area-card__btn:hover {\n        background: rgba(37, 99, 235, .2);\n        border-color: rgba(96, 165, 250, .35);\n        gap: 15px;\n    }\n\n    .area-card__btn svg {\n        width: 15px;\n        height: 15px;\n        stroke: currentColor;\n        fill: none;\n        stroke-width: 2.2;\n        transition: transform .25s ease;\n        flex-shrink: 0;\n    }\n\n    .area-card__btn:hover svg {\n        transform: translateX(3px);\n    }\n\n    \/* \u2500\u2500 Responsive \u2500\u2500 *\/\n    @media(max-width:960px) {\n        .areas-section {\n            padding: 80px 0 100px;\n        }\n\n        .areas-inner {\n            padding: 0 24px;\n        }\n\n        .areas-grid {\n            grid-template-columns: 1fr;\n        }\n\n        .area-card--primary,\n        .area-card--secondary {\n            padding: 36px;\n        }\n\n        .area-card__num {\n            font-size: 3.8rem;\n        }\n\n        .area-card__title {\n            font-size: 1.7rem;\n        }\n    }\n\n    \/* ===================== CTA CONTACT ===================== *\/\n    .cta-contact {\n        position: relative;\n        width: 100vw;\n        left: 50%;\n        margin-left: -50vw;\n        overflow: hidden;\n        padding: 120px 0;\n        background: linear-gradient(180deg, #0d1326 0%, #0a0f1d 100%);\n    }\n\n    .cta-contact::before {\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        background-image:\n            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\n        background-size: 42px 42px;\n        mask-image: radial-gradient(circle at center, black 30%, transparent 85%);\n    }\n\n    .cta-contact::after {\n        content: \"\";\n        position: absolute;\n        top: -180px;\n        right: -180px;\n        width: 500px;\n        height: 500px;\n        border-radius: 50%;\n        background: radial-gradient(circle, rgba(59, 130, 246, .16), transparent 70%);\n    }\n\n    .cta-contact__inner {\n        position: relative;\n        z-index: 2;\n        max-width: 1250px;\n        margin: auto;\n        padding: 0 40px;\n    }\n\n    .cta-contact__box {\n        position: relative;\n        overflow: hidden;\n        border-radius: 32px;\n        padding: 64px;\n        display: grid;\n        grid-template-columns: 1fr auto;\n        gap: 4rem;\n        align-items: center;\n        background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        backdrop-filter: blur(20px);\n        box-shadow: 0 0 60px rgba(37, 99, 235, 0.08);\n    }\n\n    .cta-contact__box::after {\n        content: \"\";\n        position: absolute;\n        right: -120px;\n        top: -120px;\n        width: 260px;\n        height: 260px;\n        border-radius: 50%;\n        background: radial-gradient(circle, rgba(96, 165, 250, .18), transparent 70%);\n    }\n\n    .cta-contact__content {\n        position: relative;\n        z-index: 2;\n    }\n\n    .cta-contact__eyebrow {\n        display: inline-flex;\n        align-items: center;\n        gap: 12px;\n        margin-bottom: 26px;\n        font-family: 'Plus Jakarta Sans', sans-serif;\n        font-size: .82rem;\n        font-weight: 700;\n        letter-spacing: .16em;\n        text-transform: uppercase;\n        color: #93c5fd;\n    }\n\n    .cta-contact__eyebrow-dot {\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        background: #60a5fa;\n        box-shadow: 0 0 18px rgba(96, 165, 250, .8);\n        animation: pulse 2.4s ease infinite;\n    }\n\n    @keyframes pulse {\n\n        0%,\n        100% {\n            transform: scale(1);\n            opacity: 1;\n        }\n\n        50% {\n            transform: scale(1.5);\n            opacity: .5;\n        }\n    }\n\n    .cta-contact__title {\n        font-family: 'Plus Jakarta Sans', sans-serif;\n        font-size: clamp(2.2rem, 4vw, 4rem);\n        font-weight: 800;\n        line-height: 1.05;\n        letter-spacing: -2px;\n        color: white;\n        margin-bottom: 22px;\n        max-width: 12ch;\n    }\n\n    .cta-contact__title span {\n        color: #93c5fd;\n    }\n\n    .cta-contact__body {\n        font-family: 'Plus Jakarta Sans', sans-serif;\n        font-size: 1.05rem;\n        line-height: 1.9;\n        color: #94a3b8;\n        max-width: 58ch;\n    }\n\n    .cta-contact__actions {\n        position: relative;\n        z-index: 2;\n        display: flex;\n        flex-direction: column;\n        align-items: flex-end;\n        gap: 18px;\n    }\n\n    .cta-btn-primary {\n        display: inline-flex;\n        align-items: center;\n        gap: 12px;\n        padding: 16px 30px;\n        border-radius: 16px;\n        text-decoration: none;\n        font-family: 'Plus Jakarta Sans', sans-serif;\n        font-size: .96rem;\n        font-weight: 700;\n        color: white;\n        background: linear-gradient(135deg, #2563eb, #3b82f6);\n        border: 1px solid rgba(255, 255, 255, 0.12);\n        box-shadow: 0 10px 40px rgba(37, 99, 235, .25);\n        transition: transform .28s ease, box-shadow .28s ease, gap .28s ease;\n    }\n\n    .cta-btn-primary:hover {\n        transform: translateY(-3px);\n        gap: 16px;\n        box-shadow: 0 16px 50px rgba(59, 130, 246, .35);\n    }\n\n    .cta-btn-primary svg {\n        width: 16px;\n        height: 16px;\n        stroke: currentColor;\n        fill: none;\n        stroke-width: 2.3;\n        transition: transform .25s ease;\n    }\n\n    .cta-btn-primary:hover svg {\n        transform: translateX(3px);\n    }\n\n    .cta-contact__note {\n        font-family: 'Plus Jakarta Sans', sans-serif;\n        font-size: .82rem;\n        line-height: 1.7;\n        text-align: right;\n        color: #64748b;\n    }\n\n    @media(max-width:900px) {\n        .cta-contact {\n            padding: 80px 0;\n        }\n\n        .cta-contact__box {\n            grid-template-columns: 1fr;\n            padding: 40px;\n        }\n\n        .cta-contact__actions {\n            align-items: flex-start;\n        }\n\n        .cta-contact__note {\n            text-align: left;\n        }\n\n        .cta-contact__title {\n            max-width: none;\n        }\n    }\n\n    @media(max-width:980px) {\n\n        .hero-right {\n            width: 100%;\n        }\n\n        .hero-visual {\n            max-width: 520px;\n            margin-top: 10px;\n        }\n    }\n\n    @media(max-width:640px) {\n\n        .hero-wrapper {\n            padding: 0 24px;\n        }\n\n        .hero-title {\n            font-size: 2.4rem;\n            line-height: 1.05;\n        }\n\n        .hero-visual {\n            max-width: 100%;\n        }\n    }\n\n    \/* ===================== MAGNETIC BUTTON ===================== *\/\n    .magnetic-btn {\n        transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),\n            background 0.25s ease,\n            border-color 0.25s ease,\n            box-shadow 0.25s ease,\n            gap 0.28s ease;\n        will-change: transform;\n    }\n<\/style>\n\n<!-- ========== HERO ========== -->\n<div class=\"hero-modern\">\n    <canvas id=\"neuralCanvas\"\n        style=\"position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0.55;\"><\/canvas>\n    <div class=\"hero-wrapper\">\n        <div class=\"hero-left\">\n            <div class=\"hero-badge\">\n                Grupo de investigaci\u00f3n \u00b7 UCM\n            <\/div>\n            <h1 class=\"hero-title\">\n                ADAPTATIVE & <br> BIOINSPIRATED <br>\n                <span class=\"blue-highlight\">SYSTEMS<\/span>\n            <\/h1>\n            <div class=\"hero-description\">\n                Inteligencia artificial, sistemas complejos,\n                optimizaci\u00f3n e investigaci\u00f3n computacional.\n            <\/div>\n            <div class=\"hero-buttons\">\n                <a href=\"#research\" class=\"hero-btn hero-btn-primary magnetic-btn\">Proyectos<\/a>\n                <a href=\"#publications\" class=\"hero-btn hero-btn-secondary magnetic-btn\">Publicaciones<\/a>\n            <\/div>\n            <div class=\"hero-ucm\">\n                <img decoding=\"async\" src=\"http:\/\/absys.dacya.ucm.es\/wp-content\/uploads\/2024\/01\/ucm-logo-3.png\" alt=\"UCM logo\">\n                <span>Universidad Complutense de Madrid<\/span>\n            <\/div>\n        <\/div>\n        <div class=\"hero-right\">\n            <!-- \n            <div class=\"hero-visual\" id=\"heroVisual\">\n                <svg viewBox=\"0 0 600 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100%\" style=\"overflow:visible;\">\n                    <defs>\n                        <filter id=\"neon\" x=\"-30%\" y=\"-30%\" width=\"160%\" height=\"160%\">\n                            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"3\" result=\"blur1\" \/>\n                            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"8\" result=\"blur2\" \/>\n                            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"20\" result=\"blur3\" \/>\n                            <feMerge>\n                                <feMergeNode in=\"blur3\" \/>\n                                <feMergeNode in=\"blur2\" \/>\n                                <feMergeNode in=\"blur1\" \/>\n                                <feMergeNode in=\"SourceGraphic\" \/>\n                            <\/feMerge>\n                        <\/filter>\n                    <\/defs>\n            -->\n            <!-- Capa de resplandor difuso (siempre visible, baja opacidad) -->\n            <!--\n                    <text x=\"50%\" y=\"72%\" text-anchor=\"middle\" font-family=\"'Plus Jakarta Sans', sans-serif\"\n                        font-size=\"170\" font-weight=\"800\" letter-spacing=\"12\" fill=\"#93c5fd\" opacity=\"0\"\n                        filter=\"url(#neon)\" id=\"absysGlow\">ABSYS<\/text>\n                    -->\n            <!-- Capa principal con trazo animado -->\n            <!--\n                    <text id=\"absysText\" x=\"50%\" y=\"72%\" text-anchor=\"middle\"\n                        font-family=\"'Plus Jakarta Sans', sans-serif\" font-size=\"118\" font-weight=\"800\"\n                        letter-spacing=\"12\" fill=\"transparent\" stroke=\"#93c5fd\" stroke-width=\"1.5\"\n                        paint-order=\"stroke\">ABSYS<\/text>\n                    -->\n            <div class=\"hero-visual\" id=\"heroVisual\">\n                <svg viewBox=\"0 0 1200 320\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\n                    <defs>\n                        <filter id=\"neonBlur\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n                            <feGaussianBlur stdDeviation=\"14\" result=\"blur\" \/>\n                        <\/filter>\n                    <\/defs>\n\n                    <!-- Glow -->\n                    <text id=\"absysGlow\" x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\"\n                        font-family=\"'Plus Jakarta Sans', sans-serif\" font-size=\"220\" font-weight=\"800\"\n                        letter-spacing=\"14\" fill=\"#93c5fd\" opacity=\"0\" filter=\"url(#neonBlur)\">\n                        ABSYS\n                    <\/text>\n\n                    <!-- Texto principal -->\n                    <text id=\"absysText\" x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\"\n                        font-family=\"'Plus Jakarta Sans', sans-serif\" font-size=\"220\" font-weight=\"800\"\n                        letter-spacing=\"14\" fill=\"transparent\" stroke=\"#93c5fd\" stroke-width=\"2\" paint-order=\"stroke\">\n                        ABSYS\n                    <\/text>\n\n                <\/svg>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n<\/div>\n\n<!-- ========== FUNDERS CAROUSEL ========== -->\n<div class=\"funders-section\">\n    <div class=\"funders-header\">\n        <div class=\"funders-eyebrow\">\n            <span\n                style=\"width:7px;height:7px;border-radius:50%;background:#60a5fa;display:inline-block;box-shadow:0 0 10px rgba(96,165,250,0.8);\"><\/span>\n            Financiadores\n        <\/div>\n        <h2 class=\"funders-title\">\n            Instituciones que apoyan nuestra investigaci\u00f3n\n        <\/h2>\n    <\/div>\n    <div class=\"funders-carousel-wrapper\">\n        <div class=\"funders-track\" id=\"fundersTrack\">\n            <!-- Filled by JavaScript -->\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- ========== WORK AREAS (REESTRUCTURADO) ========== -->\n<section class=\"areas-section\" id=\"areasSection\">\n    <div class=\"areas-inner\">\n        <div class=\"areas-eyebrow\">L\u00edneas de trabajo<\/div>\n        <div class=\"areas-grid\">\n\n            <!-- Card principal -->\n            <article class=\"area-card area-card--primary\" id=\"cardObjectives\">\n                <div class=\"area-card__deco\" aria-hidden=\"true\"><\/div>\n                <div class=\"area-card__header\">\n                    <h2 class=\"area-card__title\">Sistemas <span class=\"area-card__title-accent\">Adaptativos<\/span><br>y\n                        Bioinspirados<\/h2>\n                <\/div>\n                <div class=\"area-card__divider\"><\/div>\n                <div class=\"area-card__stat\">\n                    <span class=\"area-card__num\" data-target=\"4\" data-prefix=\"\" data-suffix=\"\">04<\/span>\n                    <span class=\"area-card__num-label\">\u00c1reas de investigaci\u00f3n<\/span>\n                <\/div>\n                <div class=\"area-card__body\">\n                    <div class=\"area-card__tag-row\">\n                        <span class=\"area-card__tag\">Objetivos<\/span>\n                    <\/div>\n                    <p class=\"area-card__text\">\n                        Dise\u00f1o e implementaci\u00f3n de sistemas adaptativos y bioinspirados\n                        para problemas de optimizaci\u00f3n y modelizaci\u00f3n,\n                        incluidos la computaci\u00f3n paralela, algoritmos inteligentes,\n                        aplicaciones m\u00e9dicas basadas en inteligencia artificial y\n                        arquitecturas avanzadas de hardware y software.\n                    <\/p>\n                    <a href=\"#research-areas\" class=\"area-card__btn magnetic-btn\">\n                        Conozca las \u00e1reas\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n            <\/article>\n\n            <!-- Card secundaria -->\n            <article class=\"area-card area-card--secondary\" id=\"cardTeam\">\n                <div class=\"area-card__deco\" aria-hidden=\"true\"><\/div>\n                <div class=\"area-card__header\">\n                    <h2 class=\"area-card__title\">Investigaci\u00f3n<br><span\n                            class=\"area-card__title-accent\">Multidisciplinar<\/span><\/h2>\n                <\/div>\n                <div class=\"area-card__divider\"><\/div>\n                <div class=\"area-card__stat\">\n                    <span class=\"area-card__num\" data-target=\"10\" data-prefix=\"+\" data-suffix=\"\">+10<\/span>\n                    <span class=\"area-card__num-label\">Investigaciones activas<\/span>\n                <\/div>\n                <div class=\"area-card__body\">\n                    <div class=\"area-card__tag-row\">\n                        <span class=\"area-card__tag\">Equipo<\/span>\n                    <\/div>\n                    <p class=\"area-card__text\">\n                        Investigadores, profesores y especialistas m\u00e9dicos de\n                        la Universidad Complutense de Madrid que colaboran en\n                        soluciones de inteligencia artificial aplicadas a la vida real para\n                        entornos computacionales, cl\u00ednicos y cient\u00edficos.\n                    <\/p>\n                    <a href=\"http:\/\/absys.dacya.ucm.es\/?page_id=773\" class=\"area-card__btn magnetic-btn\">\n                        Conozca al equipo\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n            <\/article>\n\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- ========== CTA CONTACT ========== -->\n<section class=\"cta-contact\" aria-label=\"Research contact section\">\n    <div class=\"cta-contact__inner\">\n        <div class=\"cta-contact__box\">\n            <div class=\"cta-contact__content\">\n                <div class=\"cta-contact__eyebrow\">\n                    <span class=\"cta-contact__eyebrow-dot\"><\/span>\n                    COLABORACI\u00d3N \u00b7 CONTACTO\n                <\/div>\n                <h2 class=\"cta-contact__title\">\n                    \u00bfEst\u00e1s interesado en colaborar con <span>ABSYS?<\/span>\n                <\/h2>\n                <p class=\"cta-contact__body\">\n                    Colaboraciones en investigaci\u00f3n, iniciativas interdisciplinarias,\n                    proyectos de IA e investigaci\u00f3n computacional avanzada en\n                    la Universidad Complutense de Madrid.\n                <\/p>\n            <\/div>\n            <div class=\"cta-contact__actions\">\n                <a href=\"http:\/\/absys.dacya.ucm.es\/?page_id=253\" class=\"cta-btn-primary magnetic-btn\">\n                    Cont\u00e1ctanos\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M5 12h14M12 5l7 7-7 7\" \/>\n                    <\/svg>\n                <\/a>\n                <div class=\"cta-contact__note\">\n                    Departamento de Arquitectura de Sistemas<br>\n                    Universidad Complutense de Madrid\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\n    (function () {\n\n        function loadGSAP(callback) {\n            if (window.gsap) { callback(); return; }\n            var s = document.createElement('script');\n            s.src = 'https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/gsap.min.js';\n            s.onload = callback;\n            s.onerror = function () { console.error('GSAP no carg\u00f3'); };\n            document.head.appendChild(s);\n        }\n\n        function initCarousel() {\n            var funders = [\n                { name: \"Ministerio de Ciencia\", image: \"http:\/\/absys.dacya.ucm.es\/wp-content\/uploads\/2026\/05\/Finan_MINECO_AEI-scaled.jpg\" },\n                { name: \"Uni\u00f3n Europea\", image: \"http:\/\/absys.dacya.ucm.es\/wp-content\/uploads\/2026\/05\/Finan_FSE.jpg\" },\n                { name: \"Comunidad de Madrid\", image: \"http:\/\/absys.dacya.ucm.es\/wp-content\/uploads\/2026\/04\/Captura-de-pantalla-2026-04-21-132027.png\" },\n                { name: \"FERP\", image: \"http:\/\/absys.dacya.ucm.es\/wp-content\/uploads\/2026\/05\/FERP_rgb.png\" },\n                { name: \"AEI\", image: \"http:\/\/absys.dacya.ucm.es\/wp-content\/uploads\/2026\/05\/Finan_Plan_RTR.jpg\" }\n            ];\n\n            var track = document.getElementById('fundersTrack');\n            if (!track) return;\n\n            var allFunders = [...funders, ...funders, ...funders];\n            allFunders.forEach(function (funder) {\n                var item = document.createElement('div');\n                item.className = 'funder-item';\n                item.innerHTML = '<img decoding=\"async\" src=\"' + funder.image + '\" alt=\"' + funder.name + '\" loading=\"lazy\">';\n                track.appendChild(item);\n            });\n\n            function startAnimation() {\n                var firstItem = track.querySelector('.funder-item');\n                if (!firstItem) return;\n\n                var gap = 40;\n                var itemWidth = firstItem.getBoundingClientRect().width + gap;\n                var totalWidth = funders.length * itemWidth;\n\n                gsap.to(track, {\n                    x: -totalWidth,\n                    duration: totalWidth \/ 60,\n                    ease: \"none\",\n                    repeat: -1,\n                    modifiers: {\n                        x: gsap.utils.unitize(function (x) {\n                            return parseFloat(x) % totalWidth;\n                        })\n                    }\n                });\n            }\n\n            var images = track.querySelectorAll('img');\n            var loaded = 0;\n\n            function onImageSettled() {\n                loaded++;\n                if (loaded >= images.length) {\n                    requestAnimationFrame(function () {\n                        setTimeout(startAnimation, 100);\n                    });\n                }\n            }\n\n            if (images.length === 0) {\n                startAnimation();\n            } else {\n                images.forEach(function (img) {\n                    if (img.complete) { onImageSettled(); }\n                    else {\n                        img.addEventListener('load', onImageSettled);\n                        img.addEventListener('error', onImageSettled);\n                    }\n                });\n            }\n        }\n\n        function initScrollAnimations() {\n            \/* Carga ScrollTrigger como plugin de GSAP *\/\n            var st = document.createElement('script');\n            st.src = 'https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/ScrollTrigger.min.js';\n            st.onload = function () {\n                gsap.registerPlugin(ScrollTrigger);\n                runCardAnimations();\n            };\n            document.head.appendChild(st);\n        }\n\n        function runCardAnimations() {\n            var cards = document.querySelectorAll('.area-card');\n            if (!cards.length) return;\n\n            \/* \u2500\u2500 Configuraci\u00f3n base por card \u2500\u2500\n               Card 0 (primaria):  entra desde abajo-izquierda con leve rotateY positivo\n               Card 1 (secundaria): entra desde abajo-derecha con leve rotateY negativo\n               Ambas con escala reducida, creando efecto de \"ca\u00edda 3D desde el fondo\"\n            *\/\n            var origins = [\n                { y: 90, x: -40, rotateY: 14, rotateX: 6, scale: 0.88 },\n                { y: 110, x: 40, rotateY: -14, rotateX: 8, scale: 0.85 }\n            ];\n\n            cards.forEach(function (card, i) {\n                var origin = origins[i] || origins[0];\n                var header = card.querySelector('.area-card__header');\n                var divider = card.querySelector('.area-card__divider');\n                var stat = card.querySelector('.area-card__stat');\n                var body = card.querySelector('.area-card__body');\n                var numEl = card.querySelector('.area-card__num');\n\n                \/* Estado inicial 3D *\/\n                gsap.set(card, {\n                    opacity: 0,\n                    y: origin.y,\n                    x: origin.x,\n                    rotateY: origin.rotateY,\n                    rotateX: origin.rotateX,\n                    scale: origin.scale,\n                    transformOrigin: i === 0 ? 'left center' : 'right center',\n                    transformPerspective: 1000\n                });\n                gsap.set([header, stat, body], { opacity: 0, y: 24 });\n                gsap.set(divider, { opacity: 0, scaleX: 0 });\n\n                \/* Timeline atada a ScrollTrigger *\/\n                var tl = gsap.timeline({\n                    scrollTrigger: {\n                        trigger: card,\n                        start: 'top 82%',\n                        once: true\n                    }\n                });\n\n                \/* 1. La card \"cae\" a su posici\u00f3n final *\/\n                tl.to(card, {\n                    opacity: 1,\n                    y: 0,\n                    x: 0,\n                    rotateY: 0,\n                    rotateX: 0,\n                    scale: 1,\n                    duration: 1.05,\n                    ease: 'expo.out',\n                    delay: i * 0.14\n                })\n\n                    \/* 2. T\u00edtulo entra desde abajo *\/\n                    .to(header, {\n                        opacity: 1,\n                        y: 0,\n                        duration: 0.55,\n                        ease: 'power3.out'\n                    }, '-=0.65')\n\n                    \/* 3. L\u00ednea divisoria se expande de izquierda a derecha *\/\n                    .to(divider, {\n                        opacity: 1,\n                        scaleX: 1,\n                        duration: 0.6,\n                        ease: 'power2.out'\n                    }, '-=0.3')\n\n                    \/* 4. Stat + contador animado *\/\n                    .to(stat, {\n                        opacity: 1,\n                        y: 0,\n                        duration: 0.5,\n                        ease: 'power3.out',\n                        onStart: function () {\n                            if (!numEl) return;\n                            var target = parseInt(numEl.dataset.target, 10) || 0;\n                            var prefix = numEl.dataset.prefix || '';\n                            var suffix = numEl.dataset.suffix || '';\n                            var obj = { val: 0 };\n                            gsap.to(obj, {\n                                val: target,\n                                duration: 1.4,\n                                ease: 'power2.out',\n                                onUpdate: function () {\n                                    numEl.textContent = prefix + Math.round(obj.val).toString().padStart(2, '0') + suffix;\n                                },\n                                onComplete: function () {\n                                    numEl.textContent = prefix + (target < 10 ? '0' + target : target) + suffix;\n                                }\n                            });\n                        }\n                    }, '-=0.2')\n\n                    \/* 5. Body (tag, texto, bot\u00f3n) *\/\n                    .to(body, {\n                        opacity: 1,\n                        y: 0,\n                        duration: 0.55,\n                        ease: 'power3.out'\n                    }, '-=0.25');\n            });\n\n            \/* Spotlight hover \u2014 actualiza tambi\u00e9n las area-cards *\/\n            document.querySelectorAll('.area-card').forEach(function (card) {\n                card.addEventListener('mousemove', function (e) {\n                    var r = card.getBoundingClientRect();\n                    card.style.setProperty('--mx', ((e.clientX - r.left) \/ r.width * 100).toFixed(1) + '%');\n                    card.style.setProperty('--my', ((e.clientY - r.top) \/ r.height * 100).toFixed(1) + '%');\n                });\n            });\n\n            \/* Hover tilt suave con GSAP *\/\n            document.querySelectorAll('.area-card').forEach(function (card) {\n                card.addEventListener('mousemove', function (e) {\n                    var r = card.getBoundingClientRect();\n                    var cx = r.left + r.width \/ 2;\n                    var cy = r.top + r.height \/ 2;\n                    var rx = (e.clientY - cy) \/ (r.height \/ 2) * -4;\n                    var ry = (e.clientX - cx) \/ (r.width \/ 2) * 5;\n                    gsap.to(card, {\n                        rotateX: rx,\n                        rotateY: ry,\n                        translateY: -6,\n                        duration: 0.55,\n                        ease: 'power2.out',\n                        transformPerspective: 900,\n                        overwrite: 'auto'\n                    });\n                });\n                card.addEventListener('mouseleave', function () {\n                    gsap.to(card, {\n                        rotateX: 0,\n                        rotateY: 0,\n                        translateY: 0,\n                        duration: 0.7,\n                        ease: 'elastic.out(1, 0.6)',\n                        overwrite: 'auto'\n                    });\n                });\n            });\n        }\n\n        function initHeroText() {\n\n            var textEl = document.getElementById('absysText');\n            var glowEl = document.getElementById('absysGlow');\n\n            if (!textEl || !window.gsap) return;\n\n            var length = textEl.getComputedTextLength();\n\n            gsap.set(textEl, {\n                strokeDasharray: length,\n                strokeDashoffset: length,\n                fill: \"transparent\"\n            });\n\n            gsap.set(glowEl, {\n                opacity: 0\n            });\n\n            var tl = gsap.timeline({ delay: 0.3 });\n\n            tl.to(textEl, {\n                strokeDashoffset: 0,\n                duration: 2.2,\n                ease: \"power2.inOut\"\n            })\n\n                .to(glowEl, {\n                    opacity: 0.35,\n                    duration: 1.2,\n                    ease: \"sine.out\"\n                }, \"-=1.6\")\n\n                .to(textEl, {\n                    fill: \"#93c5fd\",\n                    stroke: \"transparent\",\n                    duration: 0.7,\n                    ease: \"power1.out\"\n                }, \"-=0.5\")\n\n                .to(glowEl, {\n                    opacity: 0.65,\n                    duration: 0.5\n                }, \"<\")\n\n                .to(glowEl, {\n                    opacity: 0.3,\n                    repeat: -1,\n                    yoyo: true,\n                    duration: 2,\n                    ease: \"sine.inOut\"\n                });\n        }\n\n        \/\/ \u2500\u2500 Punto de entrada \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n        function ready(fn) {\n            if (document.readyState !== 'loading') { fn(); }\n            else { document.addEventListener('DOMContentLoaded', fn); }\n        }\n\n        ready(function () {\n            loadGSAP(function () {\n                initCarousel();\n                initScrollAnimations();\n                initHeroText();\n            });\n            initNeuralBackground();\n            initSpotlightHover();\n            initMagneticButtons();\n        });\n\n    })();\n\n    \/* ================================================================\n       NEURAL BACKGROUND \u2014 Canvas particle network\n    ================================================================ *\/\n    (function () {\n        var canvas = document.getElementById('neuralCanvas');\n        if (!canvas) return;\n        var ctx = canvas.getContext('2d');\n        var hero = canvas.parentElement;\n        var W, H, nodes = [], RAF;\n        var NCOUNT = 58, CONNECT_DIST = 160, NODE_SPEED = 0.38;\n\n        function resize() {\n            W = canvas.width = hero.offsetWidth;\n            H = canvas.height = hero.offsetHeight;\n        }\n\n        function Node() {\n            this.x = Math.random() * W;\n            this.y = Math.random() * H;\n            this.vx = (Math.random() - 0.5) * NODE_SPEED;\n            this.vy = (Math.random() - 0.5) * NODE_SPEED;\n            this.r = Math.random() * 1.6 + 0.6;\n            this.pulse = Math.random() * Math.PI * 2;\n        }\n\n        function init() {\n            nodes = [];\n            for (var i = 0; i < NCOUNT; i++) nodes.push(new Node());\n        }\n\n        function draw() {\n            ctx.clearRect(0, 0, W, H);\n\n            \/* connections *\/\n            for (var i = 0; i < nodes.length; i++) {\n                for (var j = i + 1; j < nodes.length; j++) {\n                    var dx = nodes[i].x - nodes[j].x;\n                    var dy = nodes[i].y - nodes[j].y;\n                    var dist = Math.sqrt(dx * dx + dy * dy);\n                    if (dist < CONNECT_DIST) {\n                        var alpha = (1 - dist \/ CONNECT_DIST) * 0.28;\n                        ctx.beginPath();\n                        ctx.strokeStyle = 'rgba(96,165,250,' + alpha + ')';\n                        ctx.lineWidth = 0.7;\n                        ctx.moveTo(nodes[i].x, nodes[i].y);\n                        ctx.lineTo(nodes[j].x, nodes[j].y);\n                        ctx.stroke();\n                    }\n                }\n            }\n\n            \/* nodes *\/\n            for (var k = 0; k < nodes.length; k++) {\n                var n = nodes[k];\n                n.pulse += 0.025;\n                var glow = 0.55 + Math.sin(n.pulse) * 0.25;\n                ctx.beginPath();\n                ctx.arc(n.x, n.y, n.r + Math.sin(n.pulse) * 0.4, 0, Math.PI * 2);\n                ctx.fillStyle = 'rgba(147,197,253,' + glow + ')';\n                ctx.fill();\n\n                \/* move *\/\n                n.x += n.vx;\n                n.y += n.vy;\n                if (n.x < 0 || n.x > W) n.vx *= -1;\n                if (n.y < 0 || n.y > H) n.vy *= -1;\n            }\n\n            RAF = requestAnimationFrame(draw);\n        }\n\n        resize();\n        init();\n        draw();\n\n        var resizeTimer;\n        window.addEventListener('resize', function () {\n            clearTimeout(resizeTimer);\n            resizeTimer = setTimeout(function () {\n                resize();\n                init();\n            }, 200);\n        });\n    })();\n\n    \/* ================================================================\n       SPOTLIGHT HOVER \u2014 per-card cursor tracking (split-card legacy + area-card)\n    ================================================================ *\/\n    function initSpotlightHover() {\n        document.querySelectorAll('.area-card, .split-card').forEach(function (card) {\n            card.addEventListener('mousemove', function (e) {\n                var rect = card.getBoundingClientRect();\n                var x = ((e.clientX - rect.left) \/ rect.width * 100).toFixed(1) + '%';\n                var y = ((e.clientY - rect.top) \/ rect.height * 100).toFixed(1) + '%';\n                card.style.setProperty('--mx', x);\n                card.style.setProperty('--my', y);\n            });\n        });\n    }\n\n    \/* ================================================================\n       MAGNETIC BUTTONS \u2014 subtle cursor attraction\n    ================================================================ *\/\n    function initMagneticButtons() {\n        var btns = document.querySelectorAll('.magnetic-btn');\n        btns.forEach(function (btn) {\n            btn.addEventListener('mousemove', function (e) {\n                var rect = btn.getBoundingClientRect();\n                var cx = rect.left + rect.width \/ 2;\n                var cy = rect.top + rect.height \/ 2;\n                var dx = (e.clientX - cx) * 0.28;\n                var dy = (e.clientY - cy) * 0.28;\n                btn.style.transform = 'translate(' + dx + 'px,' + dy + 'px)';\n            });\n            btn.addEventListener('mouseleave', function () {\n                btn.style.transform = 'translate(0,0)';\n            });\n        });\n    }\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Grupo de investigaci\u00f3n \u00b7 UCM ADAPTATIVE &#038; BIOINSPIRATED SYSTEMS Inteligencia artificial, sistemas complejos, optimizaci\u00f3n e investigaci\u00f3n computacional. Proyectos Publicaciones Universidad Complutense de Madrid ABSYS ABSYS Financiadores Instituciones que apoyan nuestra investigaci\u00f3n L\u00edneas de trabajo Sistemas Adaptativosy Bioinspirados 04 \u00c1reas de investigaci\u00f3n Objetivos Dise\u00f1o e implementaci\u00f3n de sistemas adaptativos y bioinspirados para problemas de optimizaci\u00f3n y&hellip;<\/p>\n<p class=\"more\"><a class=\"more-link\" href=\"http:\/\/absys.dacya.ucm.es\/\">Seguir leyendo <span class=\"screen-reader-text\">Inicio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"page-templates\/full.php","meta":{"footnotes":""},"class_list":["post-320","page","type-page","status-publish","hentry","entry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/absys.dacya.ucm.es\/index.php?rest_route=\/wp\/v2\/pages\/320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/absys.dacya.ucm.es\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/absys.dacya.ucm.es\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/absys.dacya.ucm.es\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/absys.dacya.ucm.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=320"}],"version-history":[{"count":129,"href":"http:\/\/absys.dacya.ucm.es\/index.php?rest_route=\/wp\/v2\/pages\/320\/revisions"}],"predecessor-version":[{"id":1821,"href":"http:\/\/absys.dacya.ucm.es\/index.php?rest_route=\/wp\/v2\/pages\/320\/revisions\/1821"}],"wp:attachment":[{"href":"http:\/\/absys.dacya.ucm.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}