/* --- ESTILOS GENERALES --- */
    .about-wrapper { font-family: 'Montserrat', sans-serif; color: #333; overflow-x: hidden; }

    /* 1. HERO SECTION (AUTORIDAD) - OSCURO */
    .ab-hero {
        background: linear-gradient(135deg, #0F172A 0%, #1e1b4b 100%); /* Azul Marino Profundo */
        /* background-image: url(../../assets/images/back-002.jpg);
        background-size: cover;
        background-repeat: no-repeat; */
        padding: 160px 5% 100px 5%; /* Mucho aire arriba */
        text-align: center;
        color: white;
        position: relative;
    }
    
    /* Decoración sutil de fondo (Círculo giratorio) */
    .ab-hero::after {
        content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
        background: radial-gradient(circle, rgba(98,0,234,0.08) 0%, transparent 60%);
        animation: spinHero 60s linear infinite; pointer-events: none;
    }
    @keyframes spinHero { 100% { transform: rotate(360deg); } }

    .ab-hero-content { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
    
    .ab-title { font-size: 3.5rem; font-weight: 900; text-transform: uppercase; line-height: 1.1; margin-bottom: 20px; }
    .ab-title span { 
        background: linear-gradient(90deg, #fff, #94a3b8); 
        -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .ab-title .highlight { color: #00E5FF; -webkit-text-fill-color: #00E5FF; }

    .ab-subtitle { font-size: 1.25rem; color: #cbd5e1; line-height: 1.6; font-weight: 400; max-width: 750px; margin: 0 auto; }


    /* 2. HISTORIA (PROPÓSITO) - BLANCO */
    .ab-story-section { background: white; padding: 100px 5%; }
    
    .ab-grid { 
        display: grid; grid-template-columns: 1fr 1fr; gap: 80px; 
        align-items: center; max-width: 1200px; margin: 0 auto; 
    }
    
    .ab-img-box { position: relative; }
    
    /* Imagen con estilo "Foto Revelada" */
    .ab-story-img { 
        width: 100%; border-radius: 20px; 
        box-shadow: 20px 20px 0px rgba(98,0,234,0.1); /* Sombra sólida de diseño */
        transition: 0.5s; filter: grayscale(100%); /* B/N Inicial para elegancia */
    }
    .ab-grid:hover .ab-story-img { filter: grayscale(0%); transform: translate(-5px, -5px); box-shadow: 25px 25px 0px #00E5FF; }

    .ab-label { font-size: 0.85rem; font-weight: 800; color: #6200EA; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; display: block; }
    .ab-heading { font-size: 2.5rem; font-weight: 800; color: #0F172A; margin-bottom: 30px; line-height: 1.1; }
    .ab-text p { margin-bottom: 20px; font-size: 1.05rem; line-height: 1.8; color: #475569; }


    /* 3. METODOLOGÍA (PROCESO) - GRIS CLARO */
    .ab-method-section { background: #F8FAFC; padding: 100px 5%; text-align: center; }
    
    .ab-cards-grid { 
        display: grid; grid-template-columns: repeat(3, 1fr); 
        gap: 30px; max-width: 1200px; margin: 60px auto 0 auto; 
    }
    
    .ab-card { 
        background: white; padding: 40px 30px; border-radius: 24px; 
        border: 1px solid #e2e8f0; position: relative; transition: 0.3s; text-align: left;
        overflow: hidden; 
    }
    .ab-card:hover { transform: translateY(-10px); border-color: #6200EA; box-shadow: 0 20px 40px rgba(98,0,234,0.15); }

    /* Número gigante de fondo */
    .ab-card-bg-num {
        position: absolute; top: -10px; right: -10px; font-size: 8rem; font-weight: 900;
        color: #f1f5f9; z-index: 0; pointer-events: none; opacity: 0.5; transition: 0.3s;
    }
    .ab-card:hover .ab-card-bg-num { color: #F3E5F5; opacity: 1; }

    .ab-card-content { position: relative; z-index: 1; }
    .ab-icon { 
        width: 60px; height: 60px; background: #0F172A; color: white; border-radius: 14px; 
        display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 20px;
        transition: 0.3s;
    }
    .ab-card:hover .ab-icon { background: #6200EA; transform: scale(1.1) rotate(-5deg); }
    
    .ab-card-title { font-size: 1.4rem; font-weight: 800; color: #1e293b; margin-bottom: 15px; }


    /* 4. TEAM (DARK MODE & PRIVACIDAD) */
    .ab-team-section { background: #0F172A; padding: 100px 5%; text-align: center; color: white; }
    
    .team-grid { 
        display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
        gap: 40px; max-width: 1200px; margin: 60px auto 0 auto; 
    }
    
    .team-card { 
        background: #1e293b; border-radius: 20px; overflow: hidden; 
        transition: 0.4s ease; border: 1px solid #334155; position: relative;
    }
    
    /* Efecto Hover Premium */
    .team-card:hover { transform: translateY(-10px); border-color: #00E5FF; box-shadow: 0 0 30px rgba(0, 229, 255, 0.1); }
    
    .team-img-box { width: 100%; height: 350px; overflow: hidden; background: #000; }
    
    /* FILTRO DE SEGURIDAD: B/N + Oscuro */
    .team-img { 
        width: 100%; height: 100%; object-fit: cover; transition: 0.5s; 
        filter: grayscale(100%) brightness(0.8); 
    }
    .team-card:hover .team-img { filter: grayscale(0%) brightness(1); transform: scale(1.05); }

    .team-info { padding: 25px; text-align: left; }
    .team-role { color: #00E5FF; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; margin-bottom: 5px; display: block; }
    .team-name { font-size: 1.5rem; font-weight: 800; margin-bottom: 15px; color: white; }
    
    .team-social a { 
        color: #94a3b8; font-size: 1.2rem; transition: 0.3s; margin-right: 15px;
    }
    .team-social a:hover { color: #fff; }


    /* RESPONSIVE */
    @media (max-width: 900px) {
        .ab-hero { padding-top: 140px; }
        .ab-title { font-size: 2.5rem; }
        .ab-grid { grid-template-columns: 1fr; gap: 40px; }
        .ab-img-box { order: -1; margin-bottom: 20px; } /* Imagen arriba en móvil */
        .ab-cards-grid { grid-template-columns: 1fr; }
    }