/* ==========================================================================
   LAB LUMINAX - SOLUTIONS HUB CSS
   ========================================================================== */

.hub-page {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
    padding: 140px 0 100px;
    position: relative;
    z-index: 2;
}

/* Header Section */
.hub-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 64px;
}

.hub-header .eyebrow {
    border-color: rgba(59, 130, 246, 0.28) !important;
    color: #55b7ff !important;
    background: rgba(59, 130, 246, 0.08) !important;
    box-shadow: 0 12px 34px rgba(59, 130, 246, 0.08) !important;
    transition: all 220ms ease;
}
.hub-header .eyebrow:hover {
    border-color: rgba(59, 130, 246, 0.54) !important;
    background: rgba(59, 130, 246, 0.16) !important;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2), 0 12px 34px rgba(59, 130, 246, 0.08) !important;
    transform: translateY(-1px);
    color: #85d2ff !important;
}

.hub-header h1 {
    font-size: clamp(2rem, 3.8vw, 3.8rem);
    line-height: 1.05;
    margin: 10px 0 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #f5f1ea 30%, #aaa6a0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hub-lead {
    color: var(--muted);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.62;
    text-wrap: balance;
}

/* Grid & Cards */
.hub-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.hub-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(24px, 5vw, 56px);
    background: rgba(18, 19, 20, 0.42);
    border: 1px solid rgba(245, 241, 234, 0.05);
    border-radius: 20px;
    padding: 42px clamp(24px, 4vw, 48px);
    text-decoration: none;
    color: inherit;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 300ms cubic-bezier(0.25, 0.8, 0.25, 1), 
                border-color 300ms ease, 
                box-shadow 300ms ease, 
                background 300ms ease;
    will-change: transform, box-shadow;
}

.hub-card:hover {
    transform: translateY(-4px);
    background: rgba(24, 25, 26, 0.52);
    border-color: rgba(245, 241, 234, 0.12);
}

/* Specific Line Hovers and Shadows */
.hub-card-sd:hover {
    box-shadow: 0 20px 40px rgba(245, 158, 11, 0.06);
}

.hub-card-gi:hover {
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.06);
}

.hub-card-sec:hover {
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.06);
}

/* Circle Wrapper */
.hub-circle-wrapper {
    flex-shrink: 0;
}

.hub-circle {
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: radial-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(245, 241, 234, 0.08);
    display: grid;
    place-items: center;
    position: relative;
    transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 350ms ease,
                box-shadow 350ms ease;
}

.hub-circle::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid transparent;
    opacity: 0;
    transition: opacity 300ms ease, transform 300ms ease;
    transform: scale(0.92);
}

/* Dynamic Circle Shadows & Boarders */
.hub-card-sd:hover .hub-circle {
    transform: scale(1.06);
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 0 35px rgba(245, 158, 11, 0.22);
}
.hub-card-sd:hover .hub-circle::before {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(245, 158, 11, 0.15);
}

.hub-card-gi:hover .hub-circle {
    transform: scale(1.06);
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 0 35px rgba(16, 185, 129, 0.22);
}
.hub-card-gi:hover .hub-circle::before {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(16, 185, 129, 0.15);
}

.hub-card-sec:hover .hub-circle {
    transform: scale(1.06);
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 35px rgba(59, 130, 246, 0.22);
}
.hub-card-sec:hover .hub-circle::before {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(59, 130, 246, 0.15);
}

/* Info & Text Details */
.hub-info {
    flex-grow: 1;
}

.hub-info h2 {
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    margin: 0 0 12px;
    font-weight: 600;
    line-height: 1.2;
    transition: color 250ms ease;
}

.hub-card-sd:hover .hub-info h2 { color: #fbbf24; }
.hub-card-gi:hover .hub-info h2 { color: #34d399; }
.hub-card-sec:hover .hub-info h2 { color: #55b7ff; }

.hub-desc {
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 0 0 20px;
    max-width: 760px;
}

/* Badges / Tags */
.hub-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.hub-tags span {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 6px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(245, 241, 234, 0.72);
}

.hub-card-sd .hub-tags span { border-color: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.hub-card-gi .hub-tags span { border-color: rgba(16, 185, 129, 0.15); color: #34d399; }
.hub-card-sec .hub-tags span { border-color: rgba(59, 130, 246, 0.15); color: #55b7ff; }

/* Clickable Hub Link/Button */
.hub-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 800;
    transition: gap 250ms ease, color 250ms ease;
}

.hub-link .arrow {
    transition: transform 250ms ease;
}

.hub-card:hover .hub-link .arrow {
    transform: translateX(4px);
}

.hub-card-sd:hover .hub-link { color: #fbbf24; }
.hub-card-gi:hover .hub-link { color: #34d399; }
.hub-card-sec:hover .hub-link { color: #55b7ff; }

/* Micro Animations */
@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotate-reverse-slow {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes pulse-gently {
    0%, 100% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 1; }
}

@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.rotate-anim {
    animation: rotate-slow 24s linear infinite;
    transform-origin: 50px 50px;
}

.rotate-reverse-anim {
    animation: rotate-reverse-slow 28s linear infinite;
    transform-origin: 50px 50px;
}

.pulse-anim {
    animation: pulse-gently 2.5s ease-in-out infinite;
    transform-origin: center;
}

.bounce-anim {
    animation: bounce-slow 2.2s ease-in-out infinite;
    transform-origin: center;
}

/* ==========================================================================
   Responsive Adaptation
   ========================================================================== */

@media (max-width: 768px) {
    .hub-page {
        padding-top: 100px;
    }

    .hub-header {
        margin-bottom: 40px;
    }

    .hub-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 24px;
        padding: 32px 24px;
    }

    .hub-tags {
        justify-content: center;
    }

    .hub-line-status {
        position: static !important;
        margin-top: 14px;
        margin-bottom: -6px;
    }
}

/* Card SVG Theme Overrides */
.hub-card-sd svg circle:not(.pulse-anim),
.hub-card-sd svg path {
    stroke: #fbbf24 !important;
}
.hub-card-sd svg circle.pulse-anim {
    fill: #55b7ff !important;
}

.hub-card-gi svg circle,
.hub-card-gi svg path {
    stroke: #34d399 !important;
}
.hub-card-gi svg circle[fill] {
    fill: #34d399 !important;
}

.hub-card-sec svg circle,
.hub-card-sec svg path,
.hub-card-sec svg rect {
    stroke: #55b7ff !important;
}
.hub-card-sec svg circle.pulse-anim {
    fill: #55b7ff !important;
}

/* Developmental Status Badges */
.hub-line-status {
    position: absolute;
    bottom: 24px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 0;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.18;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hub-line-status::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
}

/* Card 1 (Soluciones Digitales) Operational status badge */
.hub-card-sd .hub-line-status {
    border: 1px solid rgba(251, 191, 36, 0.24);
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.075);
    box-shadow: 0 12px 34px rgba(251, 191, 36, 0.08);
}
.hub-card-sd .hub-line-status::before {
    background: #fbbf24;
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.62);
}

/* Card 2 (Growth Intelligence) Green status badge */
.hub-card-gi .hub-line-status {
    border: 1px solid rgba(52, 211, 153, 0.24);
    color: #34d399;
    background: rgba(52, 211, 153, 0.075);
    box-shadow: 0 12px 34px rgba(52, 211, 153, 0.08);
}
.hub-card-gi .hub-line-status::before {
    background: #34d399;
    box-shadow: 0 0 14px rgba(52, 211, 153, 0.62);
}

/* Card 3 (Seguridad Digital) Blue status badge */
.hub-card-sec .hub-line-status {
    border: 1px solid rgba(85, 183, 255, 0.24);
    color: #55b7ff;
    background: rgba(85, 183, 255, 0.075);
    box-shadow: 0 12px 34px rgba(85, 183, 255, 0.08);
}
.hub-card-sec .hub-line-status::before {
    background: #55b7ff;
    box-shadow: 0 0 14px rgba(85, 183, 255, 0.62);
}