:root {
        --gc-bg: #07070d;
        --gc-bg-2: #0d0d18;
        --gc-surface: #12121f;
        --gc-surface-2: #181828;
        --gc-border: rgba(255, 255, 255, 0.08);
        --gc-text: #e8e8f0;
        --gc-muted: #9a9ab0;
        --gc-primary: #7c5cff;
        --gc-primary-2: #a78bfa;
        --gc-accent: #22d3ee;
        --gc-grad: linear-gradient(120deg, #7c5cff 0%, #a78bfa 45%, #22d3ee 100%);
        --gc-grad-soft: linear-gradient(135deg, rgba(124, 92, 255, 0.18), rgba(34, 211, 238, 0.12));
      }
      html { scroll-behavior: smooth; }
      body.gc-body {
        background-color: var(--gc-bg);
        color: var(--gc-text);
        font-family: "Inter", system-ui, -apple-system, sans-serif;
        overflow-x: hidden;
      }
      h3.h5.fw-semibold {
    color: #fff;
}
section {
    background: #070b12;
}
      .gc-body h1, .gc-body h2, .gc-body h3, .gc-body h4, .gc-body .gc-display {
        font-family: "Space Grotesk", "Inter", sans-serif;
        letter-spacing: -0.02em;
      }
      .gc-text-grad {
        background: var(--gc-grad);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      span.valores.text-white.mt-3 {
    margin-top: 15px !important;
    display: block;
}
.alert.alert-dismissible.fade.show {
    position: absolute;
    top: 83px;
}
h2.display-5.fw-bold.mt-3 {
    color: #fff;
}

h2.display-6.fw-bold.mt-3 {
    color: #fff;
}
      .gc-muted { color: var(--gc-muted) !important; }
      .gc-section { position: relative; padding: 6rem 0; }
      .gc-eyebrow {
        display: inline-flex; align-items: center; gap: 0.5rem;
        font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em;
        text-transform: uppercase; color: var(--gc-primary-2);
        border: 1px solid var(--gc-border); background: var(--gc-grad-soft);
        padding: 0.45rem 0.9rem; border-radius: 999px;
      }
      /* Navbar */
      .gc-navbar { transition: background-color 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease; border-bottom: 1px solid transparent; }
      .gc-navbar.gc-scrolled { background-color: rgba(7, 7, 13, 0.85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--gc-border); }
      .gc-brand { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.35rem; color: var(--gc-text); }
      .gc-brand .gc-bracket { color: var(--gc-primary); }
      .gc-navbar .nav-link { color: var(--gc-muted); font-weight: 500; padding: 0.5rem 1rem !important; transition: color 0.2s ease; }
      .gc-navbar .nav-link:hover, .gc-navbar .nav-link.active { color: var(--gc-text); }
      .navbar-toggler { border-color: var(--gc-border); }
      /* Buttons */
      .gc-btn-primary { background: var(--gc-grad); border: none; color: #0a0a12; font-weight: 600; padding: 0.8rem 1.6rem; border-radius: 12px; box-shadow: 0 12px 30px -10px rgba(124, 92, 255, 0.6); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; }
      .gc-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 18px 40px -10px rgba(124, 92, 255, 0.7); color: #0a0a12; }
      .gc-btn-ghost { background: transparent; border: 1px solid var(--gc-border); color: var(--gc-text); font-weight: 600; padding: 0.8rem 1.6rem; border-radius: 12px; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; }
      .gc-btn-ghost:hover { border-color: var(--gc-primary); background: rgba(124, 92, 255, 0.1); color: var(--gc-text); transform: translateY(-2px); }
      /* Hero */
      .gc-hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: radial-gradient(60% 60% at 15% 10%, rgba(124, 92, 255, 0.22), transparent 60%), radial-gradient(50% 50% at 90% 30%, rgba(34, 211, 238, 0.16), transparent 60%), var(--gc-bg); }
      .gc-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 80%); pointer-events: none; }
      .gc-hero-title { font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 700; line-height: 1.05; color: #fff; }
      .gc-hero-lead { font-size: 1.15rem; max-width: 38rem; }
      .gc-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; animation: gc-float 9s ease-in-out infinite; }
      .gc-orb-1 { width: 320px; height: 320px; background: rgba(124, 92, 255, 0.5); top: 8%; right: 6%; }
      .gc-orb-2 { width: 260px; height: 260px; background: rgba(34, 211, 238, 0.4); bottom: 10%; left: 4%; animation-delay: -3s; }
      @keyframes gc-float { 0%, 100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-26px) translateX(14px); } }
      /* Code window */
      .gc-code-window { background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: 16px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8); overflow: hidden; }
      .gc-code-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--gc-border); background: var(--gc-surface-2); }
      .gc-dot { width: 12px; height: 12px; border-radius: 50%; }
      .gc-code-body { padding: 1.4rem 1.5rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.9rem; line-height: 1.85; }
      .gc-code-body .tk-key { color: #c792ea; }
      .gc-code-body .tk-fn { color: #82aaff; }
      .gc-code-body .tk-str { color: #c3e88d; }
      .gc-code-body .tk-com { color: #5b6172; }
      .gc-code-body .tk-num { color: #f78c6c; }
      /* Marquee */
      .gc-marquee { border-top: 1px solid var(--gc-border); border-bottom: 1px solid var(--gc-border); background: var(--gc-bg-2); padding: 2.2rem 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
      .gc-marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: gc-scroll 28s linear infinite; }
      .gc-marquee-track i { font-size: 2.8rem; color: var(--gc-muted); transition: color 0.25s ease, transform 0.25s ease; }
      .gc-marquee-track i:hover { color: var(--gc-text); transform: translateY(-4px); }
      @keyframes gc-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
      /* Cards */
      .gc-card { background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: 18px; height: 100%; padding: 2rem; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
      .gc-card:hover { transform: translateY(-6px); border-color: rgba(124, 92, 255, 0.5); box-shadow: 0 30px 60px -30px rgba(124, 92, 255, 0.35); }
      .gc-icon-badge { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; background: var(--gc-grad-soft); border: 1px solid var(--gc-border); color: var(--gc-primary-2); font-size: 1.5rem; margin-bottom: 1.2rem; }
      /* Project cards */
      .gc-project { background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: 18px; overflow: hidden; height: 100%; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
      .gc-project:hover { transform: translateY(-6px); border-color: rgba(34, 211, 238, 0.5); box-shadow: 0 30px 60px -30px rgba(34, 211, 238, 0.3); }
      .gc-project-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gc-surface-2); }
      .gc-project-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
      .gc-project:hover .gc-project-thumb img { transform: scale(1.06); }
      .gc-tag { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--gc-primary-2); background: rgba(124, 92, 255, 0.12); border: 1px solid var(--gc-border); padding: 0.25rem 0.65rem; border-radius: 999px; }
      .gc-project-link { color: var(--gc-accent); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; transition: gap 0.2s ease; }
      .gc-project-link:hover { gap: 0.7rem; color: var(--gc-accent); }
      /* Stats */
      .gc-stat-num { font-family: "Space Grotesk", sans-serif; font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 700; line-height: 1; }
      /* Contact */
      .gc-contact-panel { background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: 22px; padding: 2.5rem; }
      .gc-form-control { background: var(--gc-surface-2); border: 1px solid var(--gc-border); color: var(--gc-text); border-radius: 12px; padding: 0.85rem 1rem; }
      .gc-form-control::placeholder { color: #6c6c82; }
      .gc-form-control:focus { background: var(--gc-surface-2); border-color: var(--gc-primary); box-shadow: 0 0 0 0.2rem rgba(124, 92, 255, 0.18); color: var(--gc-text); }
      .gc-contact-row { display: flex; align-items: center; gap: 1rem; }
      .gc-contact-row i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--gc-grad-soft); border: 1px solid var(--gc-border); color: var(--gc-primary-2); font-size: 1.2rem; }
      /* Footer */
      .gc-footer { border-top: 1px solid var(--gc-border); background: var(--gc-bg-2); padding: 3rem 0 2rem; }
      .gc-social { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--gc-border); color: var(--gc-muted); transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; text-decoration: none; }
      .gc-social:hover { color: var(--gc-text); border-color: var(--gc-primary); transform: translateY(-3px); }
      /* Floating WhatsApp */
      .gc-whatsapp { position: fixed; right: 22px; bottom: 22px; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #052e16; display: grid; place-items: center; font-size: 1.8rem; z-index: 1080; box-shadow: 0 14px 30px -8px rgba(37, 211, 102, 0.6); transition: transform 0.2s ease; text-decoration: none; }
      .gc-whatsapp:hover { transform: scale(1.08); color: #052e16; }
      /* Reveal on scroll */
      .gc-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
      .gc-reveal.gc-in { opacity: 1; transform: none; }
@media only screen and (max-width: 600px) {
   span.gc-eyebrow.mb-4 {
    margin-top: 91px;
}
}