body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        .navbar-brand span.logo {
            font-weight: 700;
            letter-spacing: 0.03em;
        }

        .btn-cta-primary {
            border-radius: 999px;
            padding: 0.6rem 1.6rem;
            font-weight: 600;
        }

        .hero-section {
            padding: 6rem 0 4rem 0;
            background: radial-gradient(circle at top left, #f0f4ff 0, #ffffff 50%, #f4f7fb 100%);
        }

        .hero-eyebrow {
            font-size: 0.9rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #4b5cff;
            margin-bottom: 0.75rem;
        }

        .hero-title {
            font-size: clamp(2.4rem, 3vw, 3.2rem);
            font-weight: 700;
            line-height: 1.1;
        }

        .hero-subtitle {
            font-size: 1.05rem;
            color: #4f5870;
            max-width: 35rem;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.25rem 0.7rem;
            border-radius: 999px;
            background: #eef0ff;
            font-size: 0.85rem;
            color: #424a7a;
            margin-bottom: 1.25rem;
        }

        .hero-logos {
            opacity: 0.75;
        }

        .section-label {
            text-transform: uppercase;
            letter-spacing: 0.14em;
            font-size: 0.9rem;
            font-weight: 600;
            color: #4b5cff;
            margin-bottom: 0.35rem;
        }

        .section-title {
            font-size: 1.9rem;
            font-weight: 700;
        }

        .dest-card {
            border-radius: 1.2rem;
            border: 1px solid #e2e6f0;
            padding: 1.5rem;
            background: #ffffff;
            height: 100%;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }

        .dest-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 35px rgba(15, 23, 42, 0.08);
        }

        .pill {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            font-size: 0.8rem;
            border-radius: 999px;
            padding: 0.15rem 0.65rem;
            background: #f3f4ff;
            color: #4f5870;
        }

        .feature-row {
            padding: 2rem 0;
            border-bottom: 1px solid #e2e6f0;
        }
        .feature-row:last-child {
            border-bottom: none;
        }

        .feature-icon {
            width: 52px;
            height: 52px;
            border-radius: 999px;
            background: #eef0ff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
        }

        .testimonial-card {
            border-radius: 1.2rem;
            border: 1px solid #e2e6f0;
            padding: 1.5rem;
            height: 100%;
            background: #ffffff;
        }

        .steps-badge {
            width: 30px;
            height: 30px;
            border-radius: 999px;
            border: 1px solid #d0d5ff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.9rem;
            margin-right: 0.5rem;
            color: #4b5cff;
        }

        .cta-section {
            padding: 3.5rem 0;
            background: linear-gradient(120deg, #151b3a, #28336b);
            color: #ffffff;
            border-radius: 2rem;
        }

        .footer-links a {
            display: block;
            font-size: 0.9rem;
            color: #6b7280;
            text-decoration: none;
            margin-bottom: 0.35rem;
        }

        .footer-links a:hover {
            text-decoration: underline;
        }

        .logo-strip img {
            max-height: 34px;
            object-fit: contain;
            filter: grayscale(1);
            opacity: 0.75;
        }

        @media (max-width: 991.98px) {
            .hero-section {
                text-align: center;
            }
            .hero-subtitle {
                margin-inline: auto;
            }
        }

        .navbar-brand img{
            height:30px; 
            width:auto;
        }

        /* ===================== */
        /*  CUADRO ANIMADO ECO   */
        /* ===================== */

        .ecosystem-wrapper {
            display: flex;
            justify-content: center;
        }

        .eco-container {
            width: 100%;
            max-width: 900px;
            aspect-ratio: 9 / 7;
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
            border-radius: 40px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 50px;
            box-sizing: border-box;
            overflow: hidden;
        }

        /* --- Tarjetas --- */
        .eco-column {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 85%;
            z-index: 2;
        }

        .eco-card {
            background: white;
            padding: 9px 16px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            gap: 12px;
            width: 175px;
            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
            transition: transform 0.3s ease;
            position: relative;
            z-index: 3; /* por encima de líneas/flechas */
            animation: eco-float 5s ease-in-out infinite;
        }

        .eco-icon-box {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1rem;
            color: white;
            flex-shrink: 0;
        }

        .eco-text-box h3 { margin: 0; font-size: 0.85rem;  color: #1e3a8a; }
        .eco-text-box p  { margin: 0; font-size: 0.68rem;  color: #64748b; }

        /* Colores */
        .c-hr    { background: #ec4899; }
        .c-tech  { background: #3b82f6; }
        .c-mkt   { background: #f59e0b; }
        .c-ops   { background: #10b981; }
        .c-sales { background: #ef4444; }
        .c-fin   { background: #6366f1; }
        .c-legal { background: #8b5cf6; }
        .c-prod  { background: #06b6d4; }
        .c-mgmt  { background: #14b8a6; }
        .c-staff { background: #64748b; }

        /* --- Centro --- */
        .eco-center-hub {
            width: 160px;
            height: 160px;
            background: #0f172a;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 4;
            box-shadow: 0 0 0 10px rgba(15, 23, 42, 0.1);
            animation: eco-pulse 3s infinite;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .eco-center-logo img{
            width: 180px;
            height:auto;
            display:block;
        }

        /* --- Conectores horizontales --- */
        .eco-connector {
            position: absolute;
            height: 2px;
            background: rgba(30, 58, 138, 0.18);
            z-index: 1; /* detrás de tarjetas, delante del fondo */
        }

        .eco-connector::after {
            content: '';
            position: absolute;
            top: -3px; 
            width: 12px;
            height: 8px;
            background: linear-gradient(90deg, #3b82f6, #60a5fa);
            border-radius: 4px;
            box-shadow: 0 0 10px #2563eb;
        }

        /* Lado izquierdo */
        .eco-line-left {
            right: calc(50% + 80px); 
            width: 105px; 
        }
        .eco-line-left::after {
            left: 0; 
            animation: eco-travel-to-center-left 1s linear infinite;
        }

        /* Lado derecho */
        .eco-line-right {
            left: calc(50% + 80px);
            width: 105px;
        }
        .eco-line-right::after {
            left: 100%; 
            animation: eco-travel-to-center-right 1s linear infinite;
        }

        /* --- Troncos verticales --- */
        .eco-trunk {
            position: absolute;
            top: 13%;
            bottom: 13%;
            width: 2px;
            z-index: 0; /* fondo de todo el esquema */
        }

        .eco-trunk-left  { right: calc(50% + 80px); }
        .eco-trunk-right { left:  calc(50% + 80px); }

        .eco-trunk svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .eco-glow-top, .eco-glow-bottom {
            position: absolute;
            left: -5px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: linear-gradient(180deg, #3b82f6, #60a5fa);
            box-shadow: 0 0 12px #2563eb;
            z-index: 2; /* por encima de la línea vertical pero debajo de las tarjetas */
        }

        .eco-glow-top {
            animation: eco-top-to-center 3s linear infinite;
            animation-delay: 1s;
        }
        .eco-glow-bottom {
            animation: eco-bottom-to-center 3s linear infinite;
            animation-delay: 1s;
        }

        /* --- Animaciones --- */
        @keyframes eco-travel-to-center-left {
            0%   { left: 0;   opacity: 0; transform: scale(0.5); }
            10%  { opacity: 1; transform: scale(1); }
            90%  { opacity: 1; transform: scale(1); }
            100% { left: 100%; opacity: 0; transform: scale(0.5); }
        }

        @keyframes eco-travel-to-center-right {
            0%   { left: 100%; opacity: 0; transform: scale(0.5); }
            10%  { opacity: 1; transform: scale(1); }
            90%  { opacity: 1; transform: scale(1); }
            100% { left: 0%;  opacity: 0; transform: scale(0.5); }
        }

        @keyframes eco-top-to-center {
            0%   { top: 0%;   opacity: 0;   transform: scale(0.5); }
            5%   { opacity: 1; transform: scale(1); }
            33%  { top: 25%;  opacity: 1; }
            66%  { top: 50%;  opacity: 1; }
            100% { top: 50%;  opacity: 0; transform: scale(0.5); }
        }

        @keyframes eco-bottom-to-center {
            0%   { top: 100%; opacity: 0;   transform: scale(0.5); }
            5%   { opacity: 1; transform: scale(1); }
            33%  { top: 75%;  opacity: 1; }
            66%  { top: 50%;  opacity: 1; }
            100% { top: 50%;  opacity: 0; transform: scale(0.5); }
        }

        @keyframes eco-float {
            0%   { transform: translateY(0px); }
            50%  { transform: translateY(-6px); }
            100% { transform: translateY(0px); }
        }

        @keyframes eco-pulse {
            0%   { box-shadow: 0 0 0 0 rgba(15, 23, 42, 0.2); }
            70%  { box-shadow: 0 0 0 18px rgba(15, 23, 42, 0); }
            100% { box-shadow: 0 0 0 0 rgba(15, 23, 42, 0); }
        }

        /* posiciones verticales para las líneas */
        .eco-l1 { top: 13%; }
        .eco-l2 { top: 31%; }
        .eco-l3 { top: 50%; }
        .eco-l4 { top: 69%; }
        .eco-l5 { top: 87%; }

        @media (max-width: 991.98px) {
            .eco-container {
                margin-top: 2rem;
                padding-inline: 20px;
            }
        }

        /* ======= MOBILE (celulares) ======= */
        @media (max-width: 767.98px) {

            .hero-section {
                padding-top: 6.5rem;
            }

            .eco-container {
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                padding: 24px 16px;
                aspect-ratio: auto;
                border-radius: 28px;
            }

            /* Ocultamos líneas y flechas en mobile */
            .eco-trunk,
            .eco-connector,
            .eco-glow-top,
            .eco-glow-bottom {
                display: none !important;
            }

            /* Logo pasa a flujo normal */
            .eco-center-hub {
                position: relative;
                left: auto;
                top: auto;
                transform: none;
                margin: 8px auto 16px;
                width: 110px;
                height: 110px;
            }

            .eco-center-logo img{
                width: 70px;
            }

            .eco-column {
                height: auto;
                width: 100%;
                align-items: center;
                gap: 10px;
                margin-bottom: 8px;
            }

            .eco-card {
                width: 100%;
                max-width: 320px;
                animation: eco-float 5s ease-in-out infinite;
            }
        }

.pill2{
  display:flex;
  align-items:center;
  justify-content:center;
}

.pill2 .excel-logo{
  width: 54px;      /* probá 12px si todavía queda grande */
  height: 54px;
  display: block;
  object-fit: contain;
}

.pill2{
  width: 28px;      /* ajustá a tu pill */
  height: 28px;
}


.pill3{
  display:flex;
  align-items:center;
  justify-content:center;
}

.pill3 .excel-logo{
  width: 30px;      /* probá 12px si todavía queda grande */
  height: 30px;
  display: block;
  object-fit: contain;
}

.pill3{
  width: 28px;      /* ajustá a tu pill */
  height: 28px;
}


.pill4{
  display:flex;
  align-items:center;
  justify-content:center;
}

.pill4 .excel-logo{
  width: 50px;      /* probá 12px si todavía queda grande */
  height: 50px;
  display: block;
  object-fit: contain;
}

.pill4{
  width: 28px;      /* ajustá a tu pill */
  height: 28px;
}

/* Submenu lateral Bootstrap */
.dropdown-submenu { position: relative; }

.dropdown-submenu > .dropdown-menu{
  top: 0;
  left: 100%;
  margin-left: .1rem;
  display: none;
}

.dropdown-submenu:hover > .dropdown-menu{ display: block; }

/* ✅ Item con flecha alineada (sin float) */
.dropdown-submenu > a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  white-space: nowrap;
}

.dropdown-submenu > a::after{
  content: "›";
  flex: 0 0 auto;
  margin: 0;
}