/* =========================================================
           VARIABLES
        ========================================================= */

        :root {
            --bg-dark: #0f172a;
            --bg-card: #1e293b;

            --text-main: #f8fafc;
            --text-muted: #94a3b8;

            --accent-green: #10b981;
            --accent-orange: #f59e0b;
            --primary-blue: #3b82f6;

            --border: rgba(255, 255, 255, 0.08);
        }


        /* =========================================================
           GENERAL
        ========================================================= */

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
            background: var(--bg-dark);
            color: var(--text-main);
            line-height: 1.6;
        }

        a {
            text-decoration: none;
            color: inherit;
        }


        /* =========================================================
           HEADER
        ========================================================= */

        header {
            width: 100%;
            height: 70px;

            position: fixed;
            top: 0;
            left: 0;

            z-index: 1000;

            display: flex;
            align-items: center;
            justify-content: space-between;

            padding: 0 6%;

            background: rgba(15, 23, 42, 0.94);
            backdrop-filter: blur(10px);

            border-bottom: 1px solid var(--border);
        }

        .logo-text {
            font-size: 18px;
            font-weight: 800;
            letter-spacing: 1px;
        }

        .logo-text span {
            color: var(--primary-blue);
        }

        .header-nav {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .btn-nav {
            padding: 10px 18px;

            border: 1px solid rgba(59, 130, 246, 0.5);
            border-radius: 8px;

            color: #fff;
            background: rgba(59, 130, 246, 0.1);

            font-size: 14px;
            font-weight: 600;

            transition: 0.3s;
        }

        .btn-nav:hover {
            background: var(--primary-blue);
            border-color: var(--primary-blue);
            transform: translateY(-2px);
        }

        .btn-nav.activo {
            background: var(--primary-blue);
            border-color: var(--primary-blue);
        }


        /* =========================================================
           REDES SOCIALES FLOTANTES
        ========================================================= */

        .redes-flotantes {
            position: fixed;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 999;

            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .redes-flotantes a {
            width: 48px;
            height: 48px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;

            background: var(--bg-card);
            border: 1px solid var(--border);

            color: var(--text-main);

            font-size: 20px;
            font-weight: 700;

            transition: 0.3s;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .redes-flotantes a:hover {
            transform: scale(1.15) translateX(5px);
            color: #fff;
        }

        .redes-flotantes a.facebook:hover {
            background: #1877f2;
            border-color: #1877f2;
        }

        .redes-flotantes a.instagram:hover {
            background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
            border-color: #dc2743;
        }

        .redes-flotantes a.whatsapp:hover {
            background: #25d366;
            border-color: #25d366;
        }

        .redes-flotantes a.linkedin:hover {
            background: #0077b5;
            border-color: #0077b5;
        }

        .redes-flotantes a.email:hover {
            background: var(--accent-orange);
            border-color: var(--accent-orange);
        }


        /* =========================================================
           HERO QUIENES SOMOS
        ========================================================= */

        .hero-quienes {
            min-height: 480px;

            padding: 160px 6% 80px;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            text-align: center;

            background:
                radial-gradient(
                    circle at top right,
                    rgba(16, 185, 129, 0.15),
                    transparent 40%
                ),
                radial-gradient(
                    circle at bottom left,
                    rgba(59, 130, 246, 0.1),
                    transparent 35%
                );
        }

        .hero-quienes .titulo-seccion {
            color: var(--accent-green);
        }

        .hero-quienes h1 {
            max-width: 900px;

            margin-bottom: 25px;

            font-size: clamp(38px, 5vw, 62px);
            line-height: 1.05;

            font-weight: 800;
        }

        .hero-quienes p {
            max-width: 800px;

            color: var(--text-muted);

            font-size: 18px;
        }


        /* =========================================================
           CONTENEDOR GENERAL
        ========================================================= */

        .seccion-contenedor {
            width: 100%;
            max-width: 1200px;

            margin: auto;

            padding: 90px 6%;
        }

        .titulo-seccion {
            margin-bottom: 15px;

            color: var(--primary-blue);

            font-size: 14px;
            font-weight: 700;

            letter-spacing: 2px;
            text-transform: uppercase;
        }


        /* =========================================================
           HISTORIA
        ========================================================= */

        .historia {
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);

            background:
                radial-gradient(
                    circle at 90% 30%,
                    rgba(59, 130, 246, 0.08),
                    transparent 35%
                ),
                rgba(255, 255, 255, 0.015);
        }

        .historia-grid {
            display: grid;

            grid-template-columns: 1.3fr 0.7fr;

            gap: 70px;

            align-items: start;
        }

        .historia-texto .titulo-seccion {
            color: var(--accent-green);
        }

        .historia-texto h2 {
            margin-bottom: 30px;

            font-size: clamp(34px, 4vw, 52px);
            line-height: 1.1;
        }

        .historia-texto p {
            margin-bottom: 18px;

            color: var(--text-muted);

            font-size: 16px;
        }

        .historia-texto p strong {
            color: var(--text-main);
        }


        /* =========================================================
           DATOS DESTACADOS
        ========================================================= */

        .historia-datos {
            display: grid;

            grid-template-columns: 1fr;
            gap: 18px;

            position: sticky;
            top: 100px;
        }

        .dato-card {
            padding: 25px;

            border: 1px solid var(--border);
            border-radius: 14px;

            background: var(--bg-card);

            transition: 0.3s;
        }

        .dato-card:hover {
            transform: translateY(-5px);

            border-color: rgba(59, 130, 246, 0.4);

            box-shadow:
                0 15px 35px rgba(0, 0, 0, 0.2);
        }

        .dato-icono {
            width: 45px;
            height: 45px;

            display: flex;
            align-items: center;
            justify-content: center;

            margin-bottom: 15px;

            border-radius: 10px;

            background: rgba(59, 130, 246, 0.12);

            color: var(--primary-blue);

            font-size: 22px;
            font-weight: bold;
        }

        .dato-card:nth-child(2) .dato-icono {
            color: var(--accent-green);
            background: rgba(16, 185, 129, 0.12);
        }

        .dato-card:nth-child(3) .dato-icono {
            color: var(--accent-orange);
            background: rgba(245, 158, 11, 0.12);
        }

        .dato-card h3 {
            margin-bottom: 7px;

            font-size: 20px;
        }

        .dato-card p {
            color: var(--text-muted);
            font-size: 14px;
        }


        /* =========================================================
           VALORES
        ========================================================= */

        .valores-container {
            max-width: 1200px;

            margin: auto;

            padding: 70px 6%;

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 25px;
        }

        .valor {
            padding: 30px;

            text-align: center;

            border: 1px solid var(--border);
            border-radius: 14px;

            background: rgba(255, 255, 255, 0.02);

            transition: 0.3s;
        }

        .valor:hover {
            transform: translateY(-5px);
            border-color: rgba(16, 185, 129, 0.4);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }

        .valor .valor-icono {
            width: 55px;
            height: 55px;

            margin: 0 auto 18px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 12px;

            background: rgba(16, 185, 129, 0.12);
            color: var(--accent-green);

            font-size: 26px;
            font-weight: 700;
        }

        .valor h3 {
            margin-bottom: 12px;

            font-size: 20px;
        }

        .valor p {
            color: var(--text-muted);
            font-size: 14px;
        }


        /* =========================================================
           CTA FINAL
        ========================================================= */

        .cta-final {
            max-width: 1200px;

            margin: 0 auto 60px;
            padding: 50px 6%;

            text-align: center;

            border: 1px solid rgba(16, 185, 129, 0.3);
            border-radius: 16px;

            background:
                radial-gradient(
                    circle at center,
                    rgba(16, 185, 129, 0.08),
                    transparent 70%
                ),
                var(--bg-card);
        }

        .cta-final h2 {
            margin-bottom: 15px;

            font-size: clamp(26px, 3.5vw, 38px);
        }

        .cta-final p {
            max-width: 700px;

            margin: 0 auto 30px;

            color: var(--text-muted);
        }

        .btn-cta {
            display: inline-block;

            padding: 14px 34px;

            border-radius: 10px;

            background: var(--accent-green);
            color: #04241a;

            font-size: 16px;
            font-weight: 800;

            transition: 0.3s;
        }

        .btn-cta:hover {
            background: #34d399;
            transform: translateY(-3px);

            box-shadow: 0 12px 30px rgba(16, 185, 129, 0.3);
        }


        /* =========================================================
           FOOTER
        ========================================================= */

        footer {
            overflow: hidden;

            padding: 25px 0;

            border-top: 1px solid var(--border);

            background: #020617;

            color: #64748b;

            font-size: 12px;
            letter-spacing: 1px;

            white-space: nowrap;
        }

        .marquee {
            display: inline-block;

            animation: mover 30s linear infinite;
        }

        @keyframes mover {

            from {
                transform: translateX(100%);
            }

            to {
                transform: translateX(-100%);
            }

        }


        /* =========================================================
           RESPONSIVE
        ========================================================= */

        @media (max-width: 900px) {

            .historia-grid {
                grid-template-columns: 1fr;
                gap: 45px;
            }

            .historia-datos {
                position: static;
            }

            .valores-container {
                grid-template-columns: 1fr;
            }

        }


        @media (max-width: 600px) {

            header {
                height: 62px;

                padding: 0 20px;
            }

            .logo-text {
                font-size: 11px;
            }

            .header-nav {
                gap: 6px;
            }

            .btn-nav {
                padding: 8px 10px;
                font-size: 11px;
            }

            .hero-quienes {
                min-height: 420px;

                padding: 130px 20px 60px;
            }

            .hero-quienes p {
                font-size: 16px;
            }

            .seccion-contenedor {
                padding: 65px 20px;
            }

            .valores-container {
                padding: 50px 20px;
            }

            .cta-final {
                margin-bottom: 40px;
                padding: 40px 20px;
            }

            .redes-flotantes {
                left: 10px;
                gap: 8px;
            }

            .redes-flotantes a {
                width: 40px;
                height: 40px;
                font-size: 16px;
            }

        }