/* =============================================
   GST IA Consulting - Shared Base Styles
   ============================================= */

/* ---------- Color palette ---------- */
:root {
    --ia-primary:   #4f46e5;
    --ia-secondary: #7c3aed;
    --ia-accent:    #06b6d4;
    --ia-dark:      #0f172a;
    --ia-gradient:  linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%);
}

/* ---------- Page header ---------- */
.ia-page-header {
    background: url(../img/banners/gstia.webp) center center no-repeat;
    background-size: cover;
}

/* ---------- Logo ---------- */
.ia-logo {
    max-width: 600px;
    filter: drop-shadow(0 4px 24px rgba(79,70,229,0.18));
}

/* ---------- Icon colours (feature cards) ---------- */
.icon-ia-indigo  { color: #4f46e5; }
.icon-ia-violet  { color: #7c3aed; }
.icon-ia-cyan    { color: #06b6d4; }
.icon-ia-emerald { color: #10b981; }
.icon-ia-amber   { color: #f59e0b; }
.icon-ia-rose    { color: #f43f5e; }

/* ---------- Dark services section ---------- */
.ia-services-section {
    background: var(--ia-dark);
    position: relative;
    overflow: hidden;
}
.ia-services-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(79,70,229,0.25) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(124,58,237,0.2) 0%, transparent 50%),
                radial-gradient(ellipse at 60% 80%, rgba(6,182,212,0.15) 0%, transparent 50%);
    pointer-events: none;
}
.ia-services-section .container {
    position: relative;
    z-index: 1;
}

/* ---------- Feature card ---------- */
.ia-services-section .card-feature {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    color: #fff;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ia-services-section .card-feature:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(79,70,229,0.30);
    border-color: rgba(79,70,229,0.5);
}
.ia-services-section .card-feature h4 {
    color: #fff;
}
.ia-services-section .card-feature p {
    color: rgba(255,255,255,0.70);
    font-size: .92rem;
}
.ia-services-section .card-icon i {
    font-size: 2.4rem;
}

/* ---------- Detail sections ---------- */
.ia-detail-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
    margin-bottom: 1.25rem;
}
.ia-detail-icon-wrap.indigo  { background: rgba(79,70,229,0.12);  color: #4f46e5; }
.ia-detail-icon-wrap.violet  { background: rgba(124,58,237,0.12); color: #7c3aed; }
.ia-detail-icon-wrap.cyan    { background: rgba(6,182,212,0.12);  color: #06b6d4; }
.ia-detail-icon-wrap.emerald { background: rgba(16,185,129,0.12); color: #10b981; }
.ia-detail-icon-wrap.amber   { background: rgba(245,158,11,0.12); color: #f59e0b; }
.ia-detail-icon-wrap.rose    { background: rgba(244,63,94,0.12);  color: #f43f5e; }

/* ---------- Infographic card ---------- */
.ia-infografia-wrap {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(79,70,229,0.15);
}
.ia-infografia-wrap img {
    width: 100%;
    display: block;
}

/* ---------- Gradient badge ---------- */
.ia-badge {
    display: inline-block;
    background: var(--ia-gradient);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .35rem 1rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

/* ---------- CTA strip ---------- */
.ia-cta-strip {
    background: var(--ia-gradient);
    border-radius: 24px;
    padding: 3rem 2.5rem;
    color: #fff;
    text-align: center;
}
.ia-cta-strip h3 { font-size: 1.75rem; font-weight: 800; }
.ia-cta-strip p  { opacity: .88; font-size: 1.05rem; }
.ia-cta-strip .btn-light {
    font-weight: 700;
    color: #4f46e5;
    border: none;
    padding: .65rem 2rem;
    border-radius: 10px;
}
.ia-cta-strip .btn-light:hover {
    background: #e0e7ff;
}

/* ---------- Section divider alt background ---------- */
.ia-bg-soft {
    background: #f8faff;
}

/* =============================================
   TIMELINE – Proceso de Adopción de IA
   ============================================= */
#ia-timeline {
    background: #ffffff;
    padding: 4rem 1.5rem;
    position: relative;
    overflow: hidden;
}

#ia-timeline .tt-inner  { max-width: 900px; margin: 0 auto; position: relative; }
#ia-timeline .tt-header { text-align: center; margin-bottom: 3.5rem; }

#ia-timeline .tt-wrap   { position: relative; padding-left: 0; }

#ia-timeline .tt-axis {
    display: none;
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,.1) 10%, rgba(0,0,0,.1) 90%, transparent);
    transform: translateX(-50%);
}

#ia-timeline .tt-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

#ia-timeline .tt-dot-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 44px;
}

#ia-timeline .tt-dot {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    border: 1px solid;
    flex-shrink: 0; position: relative; z-index: 2;
    color: #fff;
}

#ia-timeline .tt-connector {
    width: 1px; flex: 1; min-height: 20px;
    background: rgba(0,0,0,.1);
    margin: 4px 0;
}

#ia-timeline .tt-card {
    flex: 1;
    background: #f8f9fa;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: .5rem;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
#ia-timeline .tt-card:hover {
    border-color: rgba(0,0,0,.15);
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

#ia-timeline .tt-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: .4rem; }
#ia-timeline .tt-state-name { font-size: .95rem; font-weight: 700; }
#ia-timeline .tt-desc { font-size: 1rem; color: #6c757d; line-height: 1.55; margin: 0; }

#ia-timeline .tt-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: .6rem; }
#ia-timeline .tt-meta-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #6c757d; }
#ia-timeline .tt-meta-icon { width: 12px; height: 12px; opacity: .6; }

/* dot colours */
#ia-timeline .dot-1 { background: #4f46e5; border-color: #4f46e566; }
#ia-timeline .dot-2 { background: #7c3aed; border-color: #7c3aed66; }
#ia-timeline .dot-3 { background: #06b6d4; border-color: #06b6d466; }
#ia-timeline .dot-4 { background: #10b981; border-color: #10b98166; }
#ia-timeline .dot-5 { background: #f59e0b; border-color: #f59e0b66; }
#ia-timeline .dot-6 { background: #f43f5e; border-color: #f43f5e66; }

/* state name colours */
#ia-timeline .name-1 { color: #4f46e5; }
#ia-timeline .name-2 { color: #7c3aed; }
#ia-timeline .name-3 { color: #06b6d4; }
#ia-timeline .name-4 { color: #10b981; }
#ia-timeline .name-5 { color: #f59e0b; }
#ia-timeline .name-6 { color: #f43f5e; }

@media (min-width: 700px) {
    #ia-timeline .tt-axis  { display: block; }
    #ia-timeline .tt-wrap  { padding: 0 2rem; }

    #ia-timeline .tt-step  { width: 50%; gap: 0; margin-bottom: 0; }
    #ia-timeline .tt-step:nth-child(odd)  { flex-direction: row-reverse; margin-left: auto;  padding-left: 2.5rem; }
    #ia-timeline .tt-step:nth-child(even) { flex-direction: row;         margin-right: auto; padding-right: 2.5rem; }

    #ia-timeline .tt-step:nth-child(odd)  .tt-dot-col { position: absolute; left: -22px; }
    #ia-timeline .tt-step:nth-child(even) .tt-dot-col { position: absolute; right: -22px; }

    #ia-timeline .tt-step:nth-child(odd)  .tt-card:hover { transform: translateX(-3px); }
    #ia-timeline .tt-step:nth-child(even) .tt-card:hover { transform: translateX(3px); }

    #ia-timeline .tt-connector { display: none; }
    #ia-timeline .tt-dot-col   { width: 44px; align-items: center; }
}

/* ============================================================
   BASE & HERO
============================================================ */
.ia-hero { position:relative; min-height:100vh; background:#0a0a1a; display:flex; align-items:center; overflow:hidden; }
.ia-orb  { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; animation:orbFloat 10s ease-in-out infinite; }
.ia-orb-1{ width:600px;height:600px;background:radial-gradient(circle,rgba(79,70,229,.35) 0%,transparent 70%);top:-150px;left:-100px; }
.ia-orb-2{ width:500px;height:500px;background:radial-gradient(circle,rgba(124,58,237,.28) 0%,transparent 70%);bottom:-100px;right:5%;animation-delay:-4s; }
.ia-orb-3{ width:400px;height:400px;background:radial-gradient(circle,rgba(6,182,212,.20) 0%,transparent 70%);top:30%;left:40%;animation-delay:-7s; }
@keyframes orbFloat{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-40px) scale(1.05)} 66%{transform:translate(-20px,30px) scale(.97)} }

#particles-hero{ position:absolute;inset:0;z-index:1; }
.ia-grid-bg{ position:absolute;inset:0;background-image:linear-gradient(rgba(79,70,229,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(79,70,229,.06) 1px,transparent 1px);background-size:60px 60px;z-index:0; }
.ia-hero-content{ position:relative;z-index:3; }

.ia-gradient-text{ background:linear-gradient(135deg,#a5b4fc 0%,#818cf8 30%,#06b6d4 70%,#67e8f9 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.typed-cursor{ color:#06b6d4; }

.ia-hero-badge{ display:inline-flex;align-items:center;gap:.5rem;background:rgba(79,70,229,.18);border:1px solid rgba(79,70,229,.35);color:#a5b4fc;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.4rem 1.1rem;border-radius:999px;margin-bottom:1.5rem;backdrop-filter:blur(8px); }

.btn-ia-outline{ background:transparent;border:1px solid rgba(6,182,212,.5);color:#67e8f9;border-radius:999px;padding:.65rem 2rem;font-weight:600;transition:all .25s; }
.btn-ia-outline:hover{ background:rgba(6,182,212,.12);border-color:#06b6d4;color:#fff; }

.ia-hero-stat{ display:inline-flex;flex-direction:column;align-items:center;padding:.75rem 1.5rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:12px;backdrop-filter:blur(6px);color:#fff; }
.ia-hero-stat .stat-val{ font-size:1.6rem;font-weight:800;line-height:1;background:linear-gradient(135deg,#818cf8,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.ia-hero-stat .stat-lbl{ font-size:.72rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.05em;margin-top:.2rem; }

.ia-scroll-indicator{ position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:.4rem;color:rgba(255,255,255,.3);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;animation:scrollBounce 2s ease-in-out infinite; }
.ia-scroll-indicator::after{ content:'';width:1px;height:40px;background:linear-gradient(to bottom,rgba(79,70,229,.6),transparent); }
@keyframes scrollBounce{ 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }

/* ============================================================
   SPARKLE STARS ✦
============================================================ */
.sparkle-star{ position:absolute;clip-path:polygon(50% 0%,56% 44%,100% 50%,56% 56%,50% 100%,44% 56%,0% 50%,44% 44%);pointer-events:none;z-index:2; }
.sparkle-star.s-indigo{ background:rgba(129,140,248,.75); }
.sparkle-star.s-cyan  { background:rgba(6,182,212,.7); }
.sparkle-star.s-white { background:rgba(255,255,255,.6); }
.sparkle-star.s-violet{ background:rgba(167,139,250,.7); }
@keyframes sparklePulse{ 0%,100%{opacity:.8;transform:scale(1) rotate(0deg)} 50%{opacity:.3;transform:scale(.6) rotate(45deg)} }
@keyframes sparkleFloat{ 0%,100%{transform:translateY(0) rotate(0deg);opacity:.7} 50%{transform:translateY(-14px) rotate(20deg);opacity:1} }
.sparkle-inline{ display:inline-block;clip-path:polygon(50% 0%,56% 44%,100% 50%,56% 56%,50% 100%,44% 56%,0% 50%,44% 44%); }
.section-sparkle-wrap{ display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:.75rem; }

/* ============================================================
   PAIN POINTS
============================================================ */
.pain-card{ background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:1.5rem;transition:all .3s;border-top:3px solid transparent; }
.pain-card:hover{ box-shadow:0 8px 32px rgba(79,70,229,.12);border-top-color:#4f46e5;transform:translateY(-4px); }
.pain-icon{ width:48px;height:48px;background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(6,182,212,.08));border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1rem; }

/* ============================================================
   STATS BAR
============================================================ */
.stats-bar{ background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 100%);position:relative;overflow:hidden; }
.stats-bar::before{ content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(79,70,229,.08) 1px,transparent 1px);background-size:24px 24px;pointer-events:none; }
.stat-counter{ text-align:center;padding:1.5rem; }
.stat-counter .num{ font-size:2.8rem;font-weight:900;background:linear-gradient(135deg,#818cf8,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1; }
.stat-counter .label{ color:rgba(255,255,255,.6);font-size:.85rem;margin-top:.4rem;text-transform:uppercase;letter-spacing:.06em; }

/* ============================================================
   SECTION LABEL CHIP
============================================================ */
.ia-chip{ display:inline-block;background:rgba(79,70,229,.1);border:1px solid rgba(79,70,229,.25);color:#4f46e5;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .9rem;border-radius:999px;margin-bottom:.75rem; }

/* ============================================================
   SERVICE FEATURE BLOCKS — layout base
============================================================ */
.ia-feature-block{ padding:5rem 0;position:relative;overflow:hidden; }
.ia-feature-block.bg-dark-block{ background:linear-gradient(135deg,#0f172a 0%,#1a0a3d 100%); }
.ia-feature-block.bg-light-block{ background:#f8f9ff; }
.ia-feature-block.bg-white-block{ background:#ffffff; }

/* Parallax floating elements */
.parallax-blob{ position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;will-change:transform; }

/* Bullet list reutilizado */
.ia-bullet-list{ list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.85rem; }
.ia-bullet-list li{ display:flex;gap:.85rem;align-items:flex-start; }
.ia-bullet-list li i{ margin-top:.25rem;flex-shrink:0; }

/* ============================================================
   VISUALIZACIÓN 1 — ROADMAP ESTRATÉGICO
============================================================ */
.roadmap-wrap{ background:linear-gradient(135deg,#0f172a,#1e1b4b);border-radius:20px;padding:2rem;position:relative;overflow:hidden; }
.roadmap-step{ display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.25rem;opacity:0;transform:translateX(-20px);transition:all .5s; }
.roadmap-step.active{ opacity:1;transform:translateX(0); }
.roadmap-step:last-child{ margin-bottom:0; }
.rm-dot{ width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0;color:#fff; }
.rm-dot.d1{ background:#4f46e5; } .rm-dot.d2{ background:#7c3aed; } .rm-dot.d3{ background:#06b6d4; } .rm-dot.d4{ background:#10b981; }
.rm-line{ width:2px;height:28px;margin:2px 0 2px 17px;background:rgba(255,255,255,.12);flex-shrink:0; }
.rm-text{ color:rgba(255,255,255,.85);font-size:.9rem; }
.rm-text strong{ color:#fff;display:block;margin-bottom:.2rem; }
.rm-roi{ display:inline-block;background:rgba(16,185,129,.18);color:#34d399;font-size:.75rem;font-weight:600;padding:.2rem .7rem;border-radius:999px;margin-top:.4rem; }

/* ============================================================
   VISUALIZACIÓN 2 — CHAT / AGENTE IA
============================================================ */
.ia-chat-demo{ background:#0f172a;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4); }
.chat-header{ background:rgba(79,70,229,.25);backdrop-filter:blur(8px);padding:.75rem 1rem;display:flex;align-items:center;gap:.6rem;border-bottom:1px solid rgba(255,255,255,.08); }
.chat-status-dot{ width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 6px #10b981;animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{box-shadow:0 0 4px #10b981} 50%{box-shadow:0 0 12px #10b981} }
.chat-title{ color:#fff;font-size:.85rem;font-weight:600; }
.chat-body{ padding:1.25rem;min-height:260px;display:flex;flex-direction:column;gap:.85rem; }
.chat-msg{ max-width:80%;padding:.65rem 1rem;border-radius:16px;font-size:.88rem;line-height:1.5; }
.chat-msg.user{ align-self:flex-end;background:rgba(79,70,229,.35);color:#e0e7ff;border-bottom-right-radius:4px; }
.chat-msg.bot{ align-self:flex-start;background:rgba(255,255,255,.08);color:rgba(255,255,255,.9);border-bottom-left-radius:4px; }
.chat-msg.typing span{ display:inline-block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);animation:dotBounce 1.2s infinite; }
.chat-msg.typing span:nth-child(2){ animation-delay:.2s; }
.chat-msg.typing span:nth-child(3){ animation-delay:.4s; }
@keyframes dotBounce{ 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }
.chat-meta{ font-size:.72rem;color:rgba(255,255,255,.35);margin-top:.2rem;display:block; }
.chat-input-bar{ background:rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.08);padding:.75rem 1rem;display:flex;gap:.5rem;align-items:center; }
.chat-input-bar input{ flex:1;background:rgba(255,255,255,.08);border:none;border-radius:999px;padding:.5rem 1rem;color:#fff;font-size:.85rem;outline:none; }
.chat-send-btn{ width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#4f46e5,#06b6d4);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0; }

/* ============================================================
   VISUALIZACIÓN 3 — CHART ANALÍTICA (Chart.js)
============================================================ */
.chart-card{ background:linear-gradient(135deg,#0f172a,#1e1b4b);border-radius:20px;padding:1.5rem;box-shadow:0 20px 60px rgba(0,0,0,.4); }
.chart-header{ display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem; }
.chart-title-sm{ color:#fff;font-weight:700;font-size:.95rem; }
.chart-badge{ background:rgba(6,182,212,.2);color:#67e8f9;font-size:.72rem;font-weight:600;padding:.25rem .7rem;border-radius:999px; }
.chart-legends{ display:flex;gap:1rem;margin-top:.75rem; }
.chart-leg{ display:flex;align-items:center;gap:.4rem;font-size:.76rem;color:rgba(255,255,255,.6); }
.chart-leg-dot{ width:10px;height:10px;border-radius:50%; }

/* ============================================================
   VISUALIZACIÓN 4 — PROCESS FLOW (Optimización)
============================================================ */
.flow-wrap{ background:linear-gradient(135deg,#0f172a,#1e1b4b);border-radius:20px;padding:1.75rem;position:relative; }
.flow-row{ display:flex;align-items:center;gap:.5rem;margin-bottom:1rem; }
.flow-node{ flex:1;padding:.7rem .9rem;border-radius:10px;font-size:.82rem;font-weight:600;text-align:center;transition:all .5s; }
.flow-node.bottleneck{ background:rgba(239,68,68,.2);color:#fca5a5;border:1px solid rgba(239,68,68,.35); }
.flow-node.bottleneck.resolved{ background:rgba(16,185,129,.2);color:#6ee7b7;border:1px solid rgba(16,185,129,.35); }
.flow-node.normal{ background:rgba(79,70,229,.2);color:#a5b4fc;border:1px solid rgba(79,70,229,.3); }
.flow-node.fast{ background:rgba(6,182,212,.15);color:#67e8f9;border:1px solid rgba(6,182,212,.3); }
.flow-arrow{ color:rgba(255,255,255,.3);font-size:.9rem;flex-shrink:0; }
.flow-label{ font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem; }
.flow-label.before{ color:#ef4444; } .flow-label.after{ color:#10b981; }
.flow-divider{ border:none;border-top:1px dashed rgba(255,255,255,.12);margin:1rem 0;position:relative; }
.flow-divider::after{ content:'IA APLICADA';position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:rgba(79,70,229,.3);color:#818cf8;font-size:.66rem;font-weight:700;padding:.15rem .6rem;border-radius:999px;white-space:nowrap; }
.flow-savings{ display:flex;gap:.75rem;margin-top:1rem; }
.flow-saving-card{ flex:1;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);border-radius:10px;padding:.65rem;text-align:center; }
.flow-saving-val{ font-size:1.4rem;font-weight:900;color:#34d399;line-height:1; }
.flow-saving-lbl{ font-size:.68rem;color:rgba(255,255,255,.5);margin-top:.2rem;text-transform:uppercase;letter-spacing:.05em; }

/* ============================================================
   VISUALIZACIÓN 5 — BI DASHBOARD
============================================================ */
.bi-dashboard{ background:#0f172a;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4); }
.bi-topbar{ background:rgba(30,27,75,.8);padding:.6rem 1rem;display:flex;align-items:center;gap:.5rem;border-bottom:1px solid rgba(255,255,255,.06); }
.bi-dot{ width:8px;height:8px;border-radius:50%; }
.bi-topbar-title{ color:rgba(255,255,255,.5);font-size:.78rem;margin-left:.4rem; }
.bi-kpi-row{ display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;padding:.8rem; }
.bi-kpi{ background:rgba(255,255,255,.05);border-radius:10px;padding:.65rem .8rem;border:1px solid rgba(255,255,255,.07); }
.bi-kpi-val{ font-size:1.3rem;font-weight:800;line-height:1; }
.bi-kpi-lbl{ font-size:.68rem;color:rgba(255,255,255,.45);margin-top:.2rem;text-transform:uppercase; }
.bi-kpi-trend{ font-size:.72rem;font-weight:600; }
.bi-charts-row{ display:grid;grid-template-columns:3fr 2fr;gap:.6rem;padding:0 .8rem .8rem; }
.bi-chart-box{ background:rgba(255,255,255,.04);border-radius:10px;padding:.75rem;border:1px solid rgba(255,255,255,.07); }
.bi-chart-lbl{ font-size:.72rem;color:rgba(255,255,255,.45);margin-bottom:.6rem;text-transform:uppercase;letter-spacing:.05em; }
/* CSS Bar chart */
.bi-bar-chart{ display:flex;align-items:flex-end;gap:5px;height:95px; }
.bi-bar{ flex:1;background:rgba(79,70,229,.75);border-radius:3px 3px 0 0;height:0;transition:height 1s cubic-bezier(.25,.46,.45,.94);position:relative;min-width:0; }
.bi-bar.hi{ background:rgba(6,182,212,.85); }
.bi-bar .bar-lbl{ position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-size:9px;color:rgba(255,255,255,.35); }
/* CSS Doughnut */
.bi-donut-wrap{ display:flex;flex-direction:row;align-items:center;gap:10px;padding:4px 0;height:95px; }
.bi-donut{ width:58px;height:58px;border-radius:50%;background:conic-gradient(#4f46e5 0deg 162deg,#06b6d4 162deg 270deg,#7c3aed 270deg 360deg);position:relative;flex-shrink:0; }
.bi-donut::after{ content:'';position:absolute;inset:13px;background:#0f172a;border-radius:50%; }
.bi-donut-lgd{ display:flex;flex-direction:column;gap:5px; }
.bi-donut-lgd-item{ display:flex;align-items:center;gap:5px;font-size:.67rem;color:rgba(255,255,255,.45); }
.bi-donut-lgd-dot{ width:7px;height:7px;border-radius:2px;flex-shrink:0; }

/* ============================================================
   VISUALIZACIÓN 6 — DOCUMENT SCAN (IA Aplicada)
============================================================ */
.doc-scan-wrap{ background:linear-gradient(135deg,#0f172a,#1e1b4b);border-radius:20px;padding:1.75rem;position:relative;overflow:hidden; }
.doc-card{ background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1.1rem;position:relative;overflow:hidden; }
.doc-scan-line{ position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(6,182,212,.8),transparent);animation:scanLine 2.5s ease-in-out infinite; }
@keyframes scanLine{ 0%{top:0;opacity:0} 10%{opacity:1} 80%{opacity:1} 100%{top:100%;opacity:0} }
.doc-line{ height:8px;border-radius:4px;margin-bottom:.5rem;background:rgba(255,255,255,.12); }
.doc-line.highlight{ background:rgba(79,70,229,.5);animation:highlightPulse 2.5s infinite; }
.doc-line.w-full{ width:100%; } .doc-line.w-80{ width:80%; } .doc-line.w-60{ width:60%; } .doc-line.w-90{ width:90%; }
@keyframes highlightPulse{ 0%,100%{background:rgba(79,70,229,.3)} 50%{background:rgba(79,70,229,.7)} }
.doc-tag{ display:inline-block;background:rgba(79,70,229,.3);color:#a5b4fc;font-size:.72rem;font-weight:600;padding:.25rem .65rem;border-radius:6px;margin:1rem .2rem 0;border:1px solid rgba(79,70,229,.4); }
.doc-tag.green{ background:rgba(16,185,129,.25);color:#6ee7b7;border-color:rgba(16,185,129,.4); }
.doc-tag.cyan{ background:rgba(6,182,212,.2);color:#67e8f9;border-color:rgba(6,182,212,.4); }
.doc-accuracy{ margin-top:1rem;display:flex;align-items:center;gap:.75rem; }
.doc-accuracy-bar{ flex:1;height:6px;background:rgba(255,255,255,.1);border-radius:999px;overflow:hidden; }
.doc-accuracy-fill{ height:100%;background:linear-gradient(90deg,#4f46e5,#06b6d4);border-radius:999px;width:0;transition:width 1.5s ease; }

/* ============================================================
   WHY CARDS
============================================================ */
.why-card{ background:linear-gradient(135deg,#f8f9ff,#f0f9ff);border:1px solid rgba(79,70,229,.12);border-radius:16px;padding:2rem;text-align:center;transition:all .3s; }
.why-card:hover{ box-shadow:0 12px 40px rgba(79,70,229,.15);transform:translateY(-5px); }
.why-icon-wrap{ width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 1.2rem; }

/* ============================================================
   FAQ
============================================================ */
.ia-faq .accordion-item{ border:1px solid rgba(79,70,229,.15);border-radius:12px!important;margin-bottom:.75rem;overflow:hidden; }
.ia-faq .accordion-button{ font-weight:600;font-size:1rem;background:#f8f9ff;color:#1e1b4b; }
.ia-faq .accordion-button:not(.collapsed){ background:linear-gradient(135deg,#ede9fe,#e0f2fe);color:#4f46e5;box-shadow:none; }
.ia-faq .accordion-body{ font-size:.95rem;color:#475569;line-height:1.7; }

/* ============================================================
   TECH STACK TICKER
============================================================ */
.tech-ticker-wrap{ background:#0f172a;overflow:hidden;padding:1.2rem 0;border-top:1px solid rgba(79,70,229,.15);border-bottom:1px solid rgba(79,70,229,.15); }
.tech-ticker-track{ display:flex;gap:2.5rem;width:max-content;animation:tickerScroll 22s linear infinite; }
@keyframes tickerScroll{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.tech-pill{ display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:.4rem 1rem;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.7);white-space:nowrap; }
.tech-pill i{ font-size:1rem; }

/* ============================================================
   PARALLAX SECTION DIVIDER
============================================================ */
.ia-parallax-band{ position:relative;overflow:hidden;min-height:220px;display:flex;align-items:center; }
.ia-parallax-band .band-bg{ position:absolute;inset:-60px;background-size:cover;background-position:center;will-change:transform; }
.ia-parallax-band .band-overlay{ position:absolute;inset:0;background:rgba(10,10,26,.75); }
.ia-parallax-band .band-content{ position:relative;z-index:2;width:100%; }

/* ============================================================
   ANIMACIONES INTERACTIVAS EN BUCLE
============================================================ */
@keyframes rmCursor{ 50%{opacity:0} }
.rm-title{ display:block;color:#fff;font-weight:700;margin-bottom:.2rem;min-height:1.1em; }
.rm-title.typing::after{ content:'|';color:#06b6d4;animation:rmCursor .6s step-start infinite; }
.rm-desc{ display:block;color:rgba(255,255,255,.72);font-size:.88rem;margin:.1rem 0 .3rem; }
@keyframes bottleneckPulse{ 0%,100%{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.35)} 50%{background:rgba(239,68,68,.4);box-shadow:0 0 18px rgba(239,68,68,.55);border-color:rgba(239,68,68,.7)} }
.flow-node.bottleneck.pulsing{ animation:bottleneckPulse 1.2s ease-in-out infinite; }