/* =========================================
           1. VARIABLES (paleta real de Blionsoft)
           ========================================= */
        :root {
            --color-primary: #0658f6;        /* botones */
            --color-primary-dark: #14276d;
            --color-primary-gradient: linear-gradient(90deg, #0693e3 0%, #14276d 98%);
            --color-accent: #f5dd25;          /* resaltado amarillo */
            --color-link: #2b6cb0;            /* enlaces/texto sobre fondos claros (AA) */
            --color-link-dark: #1a63bd;
            --color-link-light: #60a5fa;  /* enlaces sobre fondos oscuros (AA) */

            --color-bg: #ffffff;
            --color-surface: #f7fafc;
            --color-surface-alt: #edf2f7;
            --color-surface-dark: #1a202c;    /* navy oscuro: hero, casos, footer */
            --color-surface-dark-2: #2d3748;  /* navy medio: "Cómo trabajamos" */

            --color-text-primary: #1a202c;
            --color-text-secondary: #4a5568;
            --color-text-muted: #5b6572;
            --color-text-inverse: #ffffff;
            --color-text-on-dark: #cbd5e1;

            --color-border: #e6e6ee;

            --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

            --radius-sm: 6px;
            --radius-md: 10px;
            --container-max: 1230px;
            --header-height: 80px;

            --transition-fast: 0.2s ease;
        }

        /* =========================================
           2. RESET Y BASE
           ========================================= */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }

        body {
            font-family: var(--font-main);
            color: var(--color-text-primary);
            background-color: var(--color-bg);
            line-height: 1.7;
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
        }

        img { max-width: 100%; height: auto; display: block; }
        a { text-decoration: none; color: inherit; transition: color var(--transition-fast); }
        ul { list-style: none; }

        ::selection { background: var(--color-primary); color: white; }

        /* =========================================
           3. UTILIDADES Y COMPONENTES
           ========================================= */
        .container {
            width: 100%;
            max-width: var(--container-max);
            margin: 0 auto;
            padding: 0 24px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 14px 30px;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.02em;
            border-radius: var(--radius-sm);
            transition: all var(--transition-fast);
            cursor: pointer;
            border: none;
            font-family: inherit;
        }

        .btn-primary { background-color: var(--color-primary); color: var(--color-text-inverse); }
        .btn-primary:hover { background: var(--color-primary-gradient); transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(6, 88, 246, 0.4); }

        .btn-outline { background-color: transparent; color: var(--color-link); border: 1px solid var(--color-link); }
        .btn-outline:hover { background-color: var(--color-link); color: var(--color-text-inverse); }

        .btn-white { background-color: white; color: var(--color-primary-dark); }
        .btn-white:hover { background-color: var(--color-surface-alt); }

        .btn-on-dark { background-color: var(--color-primary); color: var(--color-text-inverse); }
        .btn-on-dark:hover { background: var(--color-primary-gradient); transform: translateY(-1px); }

        .section-padding { padding: 96px 0; }
        .text-center { text-align: center; }

        .eyebrow {
            display: inline-block;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--color-link);
            margin-bottom: 16px;
        }
        .on-dark .eyebrow { color: rgba(255, 255, 255, 0.78); }

        .section-title {
            font-size: clamp(30px, 4.5vw, 44px);
            font-weight: 700;
            line-height: 1.15;
            margin-bottom: 16px;
            color: var(--color-text-primary);
            letter-spacing: -0.02em;
        }
        .on-dark .section-title { color: var(--color-text-inverse); }

        .section-subtitle {
            font-size: 18px;
            color: var(--color-text-secondary);
            max-width: 720px;
            margin: 0 auto 48px auto;
        }
        .on-dark .section-subtitle { color: var(--color-text-on-dark); }

        mark { background: var(--color-accent); color: #383838; padding: 0 4px; }

        /* =========================================
           4. HEADER Y NAVEGACIÓN
           ========================================= */
        .header {
            position: fixed;
            top: 0; left: 0; width: 100%;
            height: var(--header-height);
            background-color: var(--color-surface-dark);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            z-index: 1000;
            display: flex;
            align-items: center;
        }

        .header .container { display: flex; justify-content: space-between; align-items: center; }

        .logo { display: inline-flex; align-items: center; }
        .logo img { display: block; height: 40px; width: auto; }

        .nav-desktop { display: none; }
        .nav-desktop ul { display: flex; align-items: center; gap: 28px; }
        .nav-desktop a { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.85); position: relative; }
        .nav-desktop a:hover { color: #ffffff; }
        .nav-desktop .lang-link { color: var(--color-link-light); border: 1px solid rgba(255, 255, 255, 0.25); padding: 4px 10px; border-radius: 999px; font-size: 13px; }

        /* Dropdown con CSS puro */
        .has-dropdown { position: relative; }
        .dropdown {
            position: absolute;
            top: 100%; left: 0;
            transform: translateY(10px);
            background: var(--color-surface-dark);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-md);
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
            padding: 12px;
            min-width: 280px;
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition-fast);
        }
        .has-dropdown:hover .dropdown {
            opacity: 1; visibility: visible;
            transform: translateY(0);
        }
        .dropdown a {
            display: block;
            padding: 12px 16px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            color: var(--color-text-on-dark);
        }
        .dropdown a:hover { background-color: var(--color-surface-dark-2); color: #ffffff; }

        .header-actions { display: none; align-items: center; gap: 16px; }

        .mobile-menu-btn {
            display: block;
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            color: var(--color-text-inverse);
        }

        .mobile-menu {
            position: fixed;
            top: var(--header-height); left: 0;
            width: 100%; height: calc(100vh - var(--header-height));
            background-color: var(--color-surface-dark);
            padding: 32px 24px;
            transform: translateX(100%);
            transition: transform 0.3s ease-in-out;
            z-index: 999;
            overflow-y: auto;
        }
        .mobile-menu.active { transform: translateX(0); }
        .mobile-menu ul { display: flex; flex-direction: column; gap: 20px; }
        .mobile-menu a {
            font-size: 19px;
            font-weight: 600;
            color: var(--color-text-on-dark);
            display: block;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .mobile-menu .lang-link { color: var(--color-link-light); }

        /* =========================================
           5. HERO (composición editorial sobre navy)
           ========================================= */
        .hero {
            padding-top: calc(var(--header-height) + 72px);
            padding-bottom: 80px;
            background-color: var(--color-surface-dark);
            color: var(--color-text-inverse);
            position: relative;
            overflow: hidden;
        }
        .hero::before {
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(circle at 12% 20%, rgba(6, 88, 246, 0.28), transparent 55%),
                radial-gradient(circle at 85% 80%, rgba(6, 88, 246, 0.18), transparent 55%);
            pointer-events: none;
        }
        .hero .container { position: relative; z-index: 1; }
        .hero-grid { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }

        .hero-content h1 {
            font-size: clamp(36px, 5.6vw, 60px);
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 24px;
            letter-spacing: -0.03em;
        }
        .hero-content p {
            font-size: 18px;
            color: var(--color-text-on-dark);
            margin-bottom: 32px;
            max-width: 580px;
        }
        .hero-buttons { display: flex; flex-direction: column; gap: 16px; }
        .hero-note { display: flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 14px; color: rgba(255, 255, 255, 0.72); }

        /* Tarjetas de métricas compuestas solo con CSS (sin imágenes) */
        .hero-visual { margin-top: 8px; }
        .dash-card {
            position: relative;
            background: white;
            border-radius: var(--radius-md);
            box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
            padding: 24px;
            margin-bottom: 20px;
        }
        .dash-card--main { width: 100%; }
        .dash-card--float { width: 100%; border-top: 3px solid var(--color-link); }
        .dash-card--float2 { width: 100%; border-top: 3px solid var(--color-accent); }
        .dash-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); }
        .dash-value { display: block; font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text-primary); margin-top: 8px; }
        .dash-bars { display: flex; align-items: flex-end; gap: 8px; height: 72px; margin-top: 20px; }
        .dash-bars span { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--color-link), var(--color-primary-dark)); }
        .dash-bars span:nth-child(even) { opacity: 0.5; }

        /* =========================================
           6. SECCIÓN "SISTEMAS DESCONECTADOS"
           ========================================= */
        .problem { background-color: var(--color-surface); }
        .problem .section-title { max-width: 800px; margin-left: auto; margin-right: auto; }
        .problem .section-subtitle { max-width: 820px; }

        /* =========================================
           7. SERVICIOS PRINCIPALES
           ========================================= */
        .services-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
        .service-card {
            background-color: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            padding: 32px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            transition: all var(--transition-fast);
        }
        .service-card:hover { border-color: #414c69; box-shadow: 0 16px 40px -16px rgba(26, 32, 44, 0.18); transform: translateY(-4px); }
        .service-icon {
            width: 48px; height: 48px;
            background-color: var(--color-surface-alt);
            border-radius: var(--radius-sm);
            display: flex; align-items: center; justify-content: center;
            color: var(--color-link);
            flex-shrink: 0;
        }
        .service-card h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
        .service-card p { font-size: 15px; color: var(--color-text-secondary); line-height: 1.65; }
        .service-link { margin-top: auto; font-weight: 700; font-size: 14px; color: var(--color-link); }
        .service-link:hover { color: var(--color-link-dark); }

        /* =========================================
           8. CASOS DESTACADOS (navy)
           ========================================= */
        .casos { background-color: var(--color-surface-dark); }
        .casos-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
        .case-card {
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-md);
            padding: 36px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .case-card h3 { font-size: 24px; font-weight: 700; color: var(--color-text-inverse); letter-spacing: -0.01em; }
        .case-block { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; }
        .case-icon {
            width: 44px; height: 44px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.14);
            display: flex; align-items: center; justify-content: center;
            color: var(--color-link-light);
            flex-shrink: 0;
        }
        .case-icon--amber { color: var(--color-accent); border-color: rgba(245, 221, 37, 0.4); }
        .case-icon--white { color: #ffffff; border-color: rgba(255, 255, 255, 0.22); }
        .case-block h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.75); margin-bottom: 6px; }
        .case-block p { font-size: 15px; color: var(--color-text-on-dark); line-height: 1.65; }
        .case-link { margin-top: 8px; font-weight: 700; font-size: 14px; color: var(--color-link-light); }
        .case-link:hover { color: #ffffff; }

        /* =========================================
           9. POR QUÉ CEOS Y GERENTES
           ========================================= */
        .why { background-color: var(--color-surface); }
        .why-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
        .why-list { display: flex; flex-direction: column; gap: 16px; margin: 24px 0 32px; }
        .why-list li {
            display: flex; gap: 12px; align-items: flex-start;
            font-size: 16px; color: var(--color-text-secondary); line-height: 1.6;
        }
        .why-list li::before {
            content: '';
            flex-shrink: 0;
            width: 22px; height: 22px;
            margin-top: 3px;
            border-radius: 50%;
            background: rgba(6, 88, 246, 0.12);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230658f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
        }
        .why-cards { display: flex; flex-direction: column; gap: 20px; }
        .why-card {
            background-color: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            padding: 24px 28px;
            display: flex; align-items: center; gap: 16px;
        }
        .why-card svg { color: var(--color-link); flex-shrink: 0; }
        .why-card h3 { font-size: 17px; font-weight: 700; }
        .why-card p { font-size: 14px; color: var(--color-text-muted); }

        /* =========================================
           10. CÓMO TRABAJAMOS (navy medio)
           ========================================= */
        .process { background-color: var(--color-surface-dark-2); }
        .process .section-title { color: var(--color-text-inverse); }
        .process .section-subtitle { color: var(--color-text-on-dark); }
        .process .eyebrow { color: rgba(255, 255, 255, 0.55); }
        .steps-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
        .step-row { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
        .step-num {
            font-size: clamp(64px, 8vw, 104px);
            font-weight: 700;
            line-height: 0.9;
            color: var(--color-link-light);
            opacity: 0.9;
        }
        .step-row h3 { font-size: 22px; font-weight: 700; color: var(--color-text-inverse); margin-bottom: 8px; }
        .step-row p { font-size: 16px; color: var(--color-text-on-dark); max-width: 480px; }

        /* =========================================
           11. TESTIMONIOS
           ========================================= */
        .testimonials-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
        .testimonial-card {
            background-color: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            padding: 36px;
            display: flex;
            flex-direction: column;
            gap: 24px;
            transition: border-color var(--transition-fast);
        }
        .testimonial-card:hover { border-color: #414c69; }
        .quote-mark {
            font-size: 64px;
            line-height: 0.6;
            font-weight: 700;
            color: var(--color-link);
            font-family: Georgia, serif;
        }
        .testimonial-card blockquote { font-size: 17px; font-weight: 600; line-height: 1.65; color: var(--color-text-primary); }
        .testimonial-author { margin-top: auto; border-top: 1px solid var(--color-border); padding-top: 20px; display: flex; align-items: center; gap: 14px; }
        .avatar {
            width: 44px; height: 44px;
            border-radius: 50%;
            background-color: var(--color-surface-dark);
            color: var(--color-text-inverse);
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 15px;
            flex-shrink: 0;
            overflow: hidden;
        }
        .avatar img { width: 100%; height: 100%; object-fit: cover; }
        .testimonial-name { font-weight: 700; font-size: 15px; }
        .testimonial-role { font-size: 13px; color: var(--color-text-muted); }

        /* =========================================
           12. FAQ
           ========================================= */
        .faq { background-color: var(--color-surface); }
        .faq-item { border-bottom: 1px solid var(--color-border); }
        .faq-item:first-of-type { border-top: 1px solid var(--color-border); }
        .faq-item summary {
            padding: 24px 0;
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 24px;
            color: var(--color-text-primary);
        }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after {
            content: '+';
            font-size: 26px;
            font-weight: 400;
            color: var(--color-link);
            transition: transform var(--transition-fast);
            flex-shrink: 0;
        }
        .faq-item[open] summary::after { transform: rotate(45deg); }
        .faq-item p { padding-bottom: 24px; color: var(--color-text-secondary); line-height: 1.75; }

        /* =========================================
           13. CTA FINAL (degradado azul)
           ========================================= */
        .cta-section {
            background: linear-gradient(120deg, #0693e3 0%, #0658f6 55%, #14276d 100%);
            color: var(--color-text-inverse);
            text-align: center;
        }
        .cta-section .section-title { color: var(--color-text-inverse); }
        .cta-section .section-subtitle { color: rgba(255, 255, 255, 0.9); }
        .cta-section .eyebrow { color: rgba(255, 255, 255, 0.8); }

        /* =========================================
           14. FOOTER
           ========================================= */
        .footer {
            background-color: var(--color-surface-dark);
            color: var(--color-text-on-dark);
            padding: 80px 0 40px 0;
            font-size: 14px;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 40px;
            margin-bottom: 60px;
        }
        .footer-brand .logo { color: var(--color-text-inverse); margin-bottom: 24px; display: inline-block; }
        .footer-address { font-size: 14px; line-height: 1.7; margin-bottom: 20px; }
        .footer-address strong { color: var(--color-text-inverse); }
        .footer h3 {
            color: var(--color-text-inverse);
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .footer ul li { margin-bottom: 12px; }
        .footer a:hover { color: var(--color-text-inverse); }
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 32px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            align-items: center;
            text-align: center;
        }
        .footer-social { display: flex; gap: 16px; }
        .footer-social a { color: var(--color-text-on-dark); }
        .footer-social a:hover { color: var(--color-text-inverse); }

        /* =========================================
           15. RESPONSIVE
           ========================================= */
        @media (min-width: 640px) {
            .services-grid { grid-template-columns: repeat(2, 1fr); }
            .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (min-width: 768px) {
            .hero-grid { grid-template-columns: 1fr 1fr; }
            .hero-buttons { flex-direction: row; }
            .hero-visual { position: relative; min-height: 420px; margin-top: 0; }
            .dash-card { position: absolute; margin-bottom: 0; }
            .dash-card--main { top: 6%; left: 0; width: 58%; }
            .dash-card--float2 { top: 3%; right: 2%; width: 38%; }
            .dash-card--float { bottom: 4%; right: 8%; width: 44%; }

            .why-grid { grid-template-columns: 1.1fr 0.9fr; }
            .steps-grid { grid-template-columns: repeat(3, 1fr); }
            .step-row { grid-template-columns: 1fr; gap: 16px; }
            .step-num { font-size: clamp(72px, 7vw, 96px); }
            .casos-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
            .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
        }

        @media (min-width: 1024px) {
            .nav-desktop { display: block; }
            .header-actions { display: flex; }
            .mobile-menu-btn { display: none; }
            .services-grid { grid-template-columns: repeat(4, 1fr); }
        }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after { transition: none !important; }
        }
/* =========================================
   16. COMPONENTES DE PÁGINAS INTERNAS
   ========================================= */
.page-hero {
    padding-top: calc(var(--header-height) + 72px);
    padding-bottom: 72px;
    background-color: var(--color-surface-dark);
    color: var(--color-text-inverse);
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 10% 15%, rgba(6, 88, 246, 0.25), transparent 55%);
    pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(34px, 4.5vw, 56px); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 20px; }
.page-hero p { font-size: 18px; color: var(--color-text-on-dark); max-width: 660px; margin-bottom: 28px; }

mark.red { background: #f02828; color: #fefefe; padding: 0 4px; }

.features { display: grid; grid-template-columns: 1fr; gap: 24px; }
.features.small { grid-template-columns: 1fr; }
.feature-card { background-color: var(--color-surface-alt); border-radius: var(--radius-md); padding: 32px; }
.feature-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.feature-card p { font-size: 15px; color: var(--color-text-secondary); line-height: 1.65; }

.cta-dark { background-color: var(--color-surface-dark); color: var(--color-text-inverse); text-align: center; }
.cta-dark .section-title { color: var(--color-text-inverse); }
.cta-dark .section-subtitle { color: var(--color-text-on-dark); }
.cta-dark .eyebrow { color: rgba(255, 255, 255, 0.7); }

@media (min-width: 768px) {
    .features { grid-template-columns: repeat(2, 1fr); }
    .features.small { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .features { grid-template-columns: repeat(4, 1fr); }
}

.why-grid--equal { grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .why-grid--equal { grid-template-columns: 1fr 1fr; }
}