.demos-hub-header { max-width: 720px; margin: 0 auto 10px; text-align: center; padding: 0 20px; }
.demos-hub-header .project-type { display: inline-block; margin-bottom: 10px; }
.demos-hub-header p { color: var(--text-muted, #a6b0c3); line-height: 1.6; }
.project-card.proximamente { opacity: .55; pointer-events: none; }
.project-card.proximamente .project-content a { cursor: default; }
.project-image-generic-icon {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #111927, #0b0f19);
    aspect-ratio: 16/9;
}
.project-image-generic-icon svg { width: 46px; height: 46px; color: #00d9d9; }


.hero-badge{
    margin:auto;
}
.hero-content{
    max-width: max-content;
    height: 100%;
    min-height: 100%;
    margin:auto;
 
}
.hero-image{
    max-width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 100%;
    margin:auto;
}
.first-section-aurell-connect{
  display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
    min-height: 75vh;
   
    padding: 120px 6%;
    max-width: 100%;
    margin: 0 auto;
    background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.03), transparent 60%);
}


.first-section-aurell-connect h2 {
    font-family: var(--font-title);
    font-size: 3.8rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--text-main);
    margin-bottom: 24px;
    line-height: 1.1;
    text-align: center;
}

.first-section-aurell-connect p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 40px;
    text-align: center;
}

.first-section-aurell-connect p strong {
    color: var(--text-main);
    font-weight: 600;
}

/* ETAPA 5 (doc39, 2026-08-01), Tarea 2.5: mismo lockup horizontal que .logo del header real
   de aurellconnect.com (general-page.css) -- imagen chica + texto en línea, "Connect" en cian. */
.aurellconnect-logo-lockup {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.aurellconnect-image {
    
    width: 150px;
    max-width: 200px;
    min-width: 40px;
    height: auto;
}
/* ETAPA 5 (doc39, 2026-08-01), Tarea 4.2: adaptación mobile del hero -- no tenía NINGÚN media
   query, el layout de 2 columnas (70%/30%, sin wrap) se mantenía forzado incluso en pantallas
   angostas, dejando muy poco ancho real para el texto. Se apila en una sola columna. */
@media (max-width: 760px) {

    .first-section-aurell-connect div {
        min-width: 100%;
        max-width: 100%;
        height: auto;
    }
    .hero-content {
        max-width: 100%;
        text-align: center;
    }
    .hero-image {
        max-width: 100%;
        padding-top: 0;
    }
    .aurellconnect-logo-lockup {
        justify-content: center;
    }
}

.aurellconnect-logo-text {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text, #f5f7fb);
}
.aurellconnect-logo-text span {
    color: var(--accent, #00d9d9);
}