:root{
      --bg: #0b0f14;          /* fondo principal */
      --panel: #0f1620;       /* paneles y tarjetas */
      --muted: #94a3b8;       /* texto secundario */
      --text: #e5e7eb;        /* texto principal */
      --primary: #11c5b4;     /* acento teal */
      --primary-900:#083a37;  /* sombras/acento oscuro */
      --accent: #63a5ff;      /* acento azul */
      --danger: #ef4444;      /* errores */
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:"Outfit", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
      color:var(--text);
      background: radial-gradient(1200px 600px at 20% 0%, #0c1320 0%, #081119 30%, var(--bg) 70%);
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    .container{max-width:1200px;margin:0 auto;padding:0 24px}

    /* ======= NAV ======= */
    .nav{
      position:sticky;top:0;z-index:20;
      backdrop-filter:saturate(130%) blur(10px);
      background: linear-gradient(180deg, rgba(8,12,18,.8), rgba(8,12,18,.3));
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
    .brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.4px}
    .brand .mark{width:34px;height:34px;position:relative;perspective:600px}
    .brand .mark::before{
      content:"";position:absolute;inset:0;border-radius:10px;
      background:conic-gradient(from 0deg, var(--primary), #00ffd5, var(--accent), #7c3aed, var(--primary));
      filter:blur(8px);opacity:.55;animation:spin 6s linear infinite;
    }
    .brand .mark::after{
      content:"G";display:grid;place-items:center;height:100%;
      background:linear-gradient(145deg, #101825, #0b111b);
      border:1px solid rgba(255,255,255,.1);border-radius:10px;
      text-shadow:0 1px 0 #000, 0 0 14px rgba(17,197,180,.35);
      font-weight:800;color:var(--text);
    }
    @keyframes spin {to{transform:rotate(1turn)}}
    .nav a.btn{padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.1)}
    .btn.primary{background:linear-gradient(180deg, #16e0cf, #11c5b4);color:#071316; border-radius: 5px;
    padding: 1px 7px;}
    .btn.ghost{background:rgba(255,255,255,.03)}

    /* ======= HERO ======= */
    .hero{position:relative;min-height:78vh;display:grid;place-items:center;}
    #bg-canvas{position:absolute;inset:0;z-index:-2}
    .hero-wrap{display:grid;gap:26px;grid-template-columns:1.25fr .75fr;align-items:center}
    @media (max-width: 940px){.hero-wrap{grid-template-columns:1fr;gap:34px}}

    .hero-card{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      border-radius:22px;
      padding:36px;position:relative;overflow:hidden;
      transform-style:preserve-3d;will-change:transform;
    }
    .hero-card::before{
      content:"";position:absolute;inset:-2px;border-radius:24px;
      padding:1px;background:linear-gradient(90deg, rgba(17,197,180,.6), rgba(99,165,255,.6));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      pointer-events:none;
    }
    .kicker{font-size:.95rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
    h1{font-size:clamp(32px, 5vw, 56px);line-height:1.05;margin:6px 0}
    .gradient-text{background:linear-gradient(90deg, #eafcf9, #b9f4ed, #8bdad2);-webkit-background-clip:text;background-clip:text;color:transparent}
    .lead{color:#b9c4d3;font-size:1.15rem;max-width:58ch}
    .cta{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}

    .glass{
      background:linear-gradient(180deg, rgba(17,197,180,.12), rgba(99,165,255,.06));
      border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:18px 20px;
      display:flex;gap:12px;align-items:flex-start
    }

    /* ======= SECTIONS ======= */
    section{padding:72px 0}
    .section-title{font-size:1.9rem;margin:0 0 24px 0}
    .grid{display:grid;gap:18px}
    .grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    @media (max-width: 940px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}

    .card{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px;
      transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    }
    .card:hover{transform:translateY(-4px);border-color:rgba(17,197,180,.35);box-shadow:0 20px 50px -25px rgba(0,0,0,.6)}

    .icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
      background:linear-gradient(180deg, var(--primary), #0fb9a9);color:#062320;font-weight:700}

    .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
    .chip{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#c9d7e5;font-size:.92rem}

    /* ======= PROJECTS ======= */
    .project{display:flex;flex-direction:column;gap:12px}
    .project .thumb{aspect-ratio:16/9;border-radius:14px;overflow:hidden;position:relative;background:linear-gradient(135deg, #0f1a28, #0a1420)}
    .project .thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(350px 140px at 20% 10%, rgba(17,197,180,.35), transparent 60%)}
    .project h3{margin:0}

    /* ======= CONTACT ======= */
    form{display:grid;gap:12px}
    input, textarea{
      width:100%;padding:14px 14px;border-radius:12px;
      background:#0b1220;border:1px solid rgba(255,255,255,.08);color:var(--text);
      outline:none;transition:border-color .2s ease, box-shadow .2s ease
    }
    input:focus, textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(17,197,180,.1)}
    textarea{min-height:120px;resize:vertical}

    /* ======= FOOTER ======= */
    footer{padding:36px 0;color:#9fb0c4;border-top:1px solid rgba(255,255,255,.06)}
    .footer-grid{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}

    /* ======= SCROLL REVEAL ======= */
    .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s ease}
    .reveal.visible{opacity:1;transform:none}

    /* Respecta reduce motion */
    @media (prefers-reduced-motion: reduce){
      .hero-card, .card{transition:none}
      #bg-canvas{display:none}
    }
    .send{
      font-size:16px;
      padding: 3px 12px !important;
    }