:root{
    --ink:#0d1b2a;
    --ink-2:#132a3e;
    --paper:#eff2ee;
    --paper-2:#e4e8e2;
    --brass:#c69a3e;
    --brass-dim:#9c7a2f;
    --teal:#1f6f6b;
    --teal-bright:#2f9490;
    --slate:#57626c;
    --line:#d7dbd5;
    --line-dark:#22384c;
    --text-dark:#0b1520;
    --text-on-ink:#eef2f0;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;
    --maxw:1180px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--text-dark);
    font-family:var(--font-body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit;cursor:pointer;}

  ::selection{background:var(--brass);color:var(--ink);}

  :focus-visible{
    outline:2px solid var(--teal-bright);
    outline-offset:3px;
    border-radius:2px;
  }

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

  .eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--teal);
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{content:"";display:inline-block;width:16px;height:1.5px;background:var(--brass);}
  .section-on-ink .eyebrow{color:var(--teal-bright);}
  .section-on-ink .eyebrow::before{background:var(--teal-bright);}

  h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:600;
    letter-spacing:-0.01em;
    color:var(--ink);
  }
  .section-on-ink h1,.section-on-ink h2,.section-on-ink h3{color:var(--text-on-ink);}

  p{color:var(--slate);}
  .section-on-ink p{color:#b7c4cc;}

  /* ---------- HEADER ---------- */
  header{
    position:fixed;top:0;left:0;right:0;
    z-index:100;
    background:rgba(239,242,238,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    transition:background .3s ease;
  }
  .nav{
    max-width:var(--maxw);margin:0 auto;padding:0 32px;
    height:76px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .logo{
    display:flex;align-items:center;gap:10px;
    font-family:var(--font-mono);
    font-weight:600;
    font-size:17px;
    color:var(--ink);
    letter-spacing:.01em;
  }
  .logo-mark{
    width:30px;height:30px;
    flex-shrink:0;
  }
  .logo-word b{color:var(--teal);font-weight:600;}
  .logo-sub{
    display:block;
    font-family:var(--font-body);
    font-size:10px;
    color:var(--slate);
    letter-spacing:.08em;
    margin-top:-2px;
  }

  .nav-links{
    display:flex;align-items:center;gap:34px;
  }
  .nav-links a{
    font-size:14.5px;
    color:var(--text-dark);
    position:relative;
    padding:4px 0;
  }
  .nav-links a::after{
    content:"";position:absolute;left:0;bottom:0;
    width:0;height:1.5px;background:var(--brass);
    transition:width .25s ease;
  }
  .nav-links a:hover::after{width:100%;}

  .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font-mono);
    font-size:13.5px;
    font-weight:500;
    padding:12px 22px;
    border-radius:3px;
    border:1px solid transparent;
    transition:all .2s ease;
  }
  .btn-primary{
    background:var(--ink);
    color:var(--paper);
  }
  .btn-primary:hover{background:var(--teal);}
  .btn-ghost{
    border-color:var(--line-dark);
    color:var(--text-on-ink);
  }
  .btn-ghost:hover{border-color:var(--brass);color:var(--brass);}
  .btn-outline-ink{
    border-color:var(--ink);
    color:var(--ink);
  }
  .btn-outline-ink:hover{background:var(--ink);color:var(--paper);}

  .nav-cta{display:none;}
  @media(min-width:900px){.nav-cta{display:inline-flex;}}

  .menu-toggle{
    display:flex;flex-direction:column;gap:5px;
    background:none;border:none;padding:8px;
  }
  .menu-toggle span{width:22px;height:2px;background:var(--ink);}
  @media(min-width:900px){.menu-toggle{display:none;}}
  @media(max-width:899px){.nav-links{display:none;}}

  /* ---------- HERO ---------- */
  .hero{
    background:radial-gradient(1200px 600px at 78% -10%, #16324a 0%, var(--ink) 55%);
    color:var(--text-on-ink);
    padding:168px 0 100px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid var(--line-dark);
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:56px;
    align-items:center;
  }
  @media(min-width:960px){
    .hero-grid{grid-template-columns:1.05fr .95fr;}
  }
  .hero-eyebrow{margin-bottom:22px;}
  .hero h1{
    font-size:clamp(2.3rem, 5.2vw, 3.55rem);
    line-height:1.06;
    margin-bottom:22px;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--brass);
  }
  .hero p.lead{
    font-size:17.5px;
    max-width:480px;
    margin-bottom:36px;
  }
  .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:52px;}

  .hero-meta{
    display:flex;gap:28px;flex-wrap:wrap;
    font-family:var(--font-mono);
    font-size:12.5px;
    color:#7f93a0;
  }
  .hero-meta span b{color:var(--text-on-ink);font-weight:500;}

  /* pipeline diagram */
  .diagram-wrap{
    position:relative;
  }
  .diagram-frame{
    border:1px solid var(--line-dark);
    border-radius:6px;
    background:rgba(255,255,255,.02);
    padding:18px;
  }
  .diagram-frame .cap{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#7f93a0;
    display:flex;justify-content:space-between;
    margin-bottom:10px;
  }
  .pipeline-path{
    fill:none;
    stroke:var(--teal-bright);
    stroke-width:1.6;
    stroke-dasharray:900;
    stroke-dashoffset:900;
    animation:draw 2.6s ease forwards .3s;
  }
  .pipeline-node circle{
    fill:var(--ink);
    stroke:var(--brass);
    stroke-width:1.6;
    opacity:0;
    animation:pop .5s ease forwards;
  }
  .pipeline-node text{
    fill:#cfd9dd;
    font-family:var(--font-mono);
    font-size:10.5px;
    opacity:0;
    animation:pop .5s ease forwards;
  }
  @keyframes draw{to{stroke-dashoffset:0;}}
  @keyframes pop{to{opacity:1;}}
  @media(prefers-reduced-motion:reduce){
    .pipeline-path{animation:none;stroke-dashoffset:0;}
    .pipeline-node circle,.pipeline-node text{animation:none;opacity:1;}
  }

  /* ---------- STATS BAR ---------- */
  .stats{
    background:var(--ink-2);
    border-bottom:1px solid var(--line-dark);
  }
  .stats-grid{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:0;
  }
  @media(min-width:760px){.stats-grid{grid-template-columns:repeat(4,1fr);}}
  .stat{
    padding:28px 32px;
    border-right:1px solid var(--line-dark);
    border-bottom:1px solid var(--line-dark);
  }
  @media(min-width:760px){.stat{border-bottom:none;}}
  .stat:nth-child(2n){border-right:none;}
  @media(min-width:760px){
    .stat:nth-child(2n){border-right:1px solid var(--line-dark);}
    .stat:last-child{border-right:none;}
  }
  .stat b{
    font-family:var(--font-mono);
    font-size:1.9rem;
    color:var(--brass);
    display:block;
  }
  .stat span{
    font-size:12.5px;
    color:#8194a0;
    font-family:var(--font-mono);
  }

  /* ---------- GENERIC SECTION ---------- */
  section{padding:104px 0;}
  .section-head{
    max-width:620px;
    margin-bottom:56px;
  }
  .section-head h2{
    font-size:clamp(1.7rem,3.4vw,2.4rem);
    margin-top:14px;
  }

  /* ---------- PROCESO / PIPELINE STAGES ---------- */
  .stage-list{
    display:grid;
    grid-template-columns:1fr;
    border-top:1px solid var(--line);
  }
  .stage{
    display:grid;
    grid-template-columns:70px 1fr;
    gap:24px;
    padding:30px 0;
    border-bottom:1px solid var(--line);
    align-items:start;
  }
  @media(min-width:760px){
    .stage{grid-template-columns:90px 1fr 1fr;}
  }
  .stage-num{
    font-family:var(--font-mono);
    color:var(--brass-dim);
    font-size:14px;
    font-weight:600;
    padding-top:4px;
  }
  .stage h3{font-size:1.15rem;margin-bottom:8px;}
  .stage p{font-size:14.5px;max-width:480px;}
  .stage-tag{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--teal);
    background:#eaf1f0;
    border:1px solid #d3e3e1;
    display:inline-block;
    padding:3px 9px;
    border-radius:3px;
    margin-bottom:10px;
  }

  /* ---------- PROYECTOS ---------- */
  .proj-grid{
    display:grid;grid-template-columns:1fr;gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  @media(min-width:760px){.proj-grid{grid-template-columns:repeat(2,1fr);}}
  .proj-card{
    background:var(--paper);
    padding:34px;
    display:flex;flex-direction:column;
    gap:14px;
    transition:background .25s ease;
  }
  .proj-card:hover{background:#fff;}
  .proj-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
  .proj-status{
    font-family:var(--font-mono);
    font-size:10.5px;
    padding:3px 8px;
    border-radius:3px;
    white-space:nowrap;
  }
  .status-prod{background:#e7f3ed;color:#1f6f4b;border:1px solid #c9e3d5;}
  .status-dev{background:#fdf3e2;color:var(--brass-dim);border:1px solid #f0dfb6;}
  .proj-card h3{font-size:1.2rem;}
  .proj-card p{font-size:14px;}
  .proj-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
  .proj-tags span{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--slate);
    border:1px solid var(--line);
    padding:3px 8px;
    border-radius:3px;
  }

  /* ---------- STACK ---------- */
  .stack-groups{
    display:grid;grid-template-columns:1fr;gap:36px;
  }
  @media(min-width:760px){.stack-groups{grid-template-columns:repeat(4,1fr);}}
  .stack-group h4{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--teal);
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:16px;
  }
  .stack-group ul{display:flex;flex-direction:column;gap:9px;}
  .stack-group li{
    font-family:var(--font-mono);
    font-size:13.5px;
    color:var(--ink);
    display:flex;align-items:center;gap:8px;
  }
  .stack-group li::before{content:"›";color:var(--brass);font-weight:700;}

  /* ---------- FEATURES ---------- */
  .feat-grid{
    display:grid;grid-template-columns:1fr;gap:1px;
    background:var(--line);border:1px solid var(--line);
  }
  @media(min-width:640px){.feat-grid{grid-template-columns:repeat(2,1fr);}}
  @media(min-width:960px){.feat-grid{grid-template-columns:repeat(4,1fr);}}
  .feat{
    background:var(--paper);
    padding:30px 26px;
  }
  .feat-icon{
    width:34px;height:34px;margin-bottom:18px;
    color:var(--teal);
  }
  .feat h3{font-size:1rem;margin-bottom:8px;}
  .feat p{font-size:13.5px;}

  /* ---------- CTA / CONTACTO ---------- */
  .cta-section{
    background:var(--ink);
    color:var(--text-on-ink);
    border-top:1px solid var(--line-dark);
  }
  .cta-grid{
    display:grid;grid-template-columns:1fr;gap:56px;
  }
  @media(min-width:960px){.cta-grid{grid-template-columns:1fr 1fr;}}
  .cta-left h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin:14px 0 20px;}
  .cta-left p{max-width:440px;margin-bottom:28px;}
  .cta-contact-list{display:flex;flex-direction:column;gap:12px;margin-top:32px;}
  .cta-contact-list a{
    font-family:var(--font-mono);
    font-size:13.5px;
    color:#cfe3e1;
    border-bottom:1px solid transparent;
  }
  .cta-contact-list a:hover{color:var(--brass);border-color:var(--brass);}

  form{display:flex;flex-direction:column;gap:16px;}
  .form-row{display:grid;grid-template-columns:1fr;gap:16px;}
  @media(min-width:540px){.form-row{grid-template-columns:1fr 1fr;}}
  label{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:#8fa3ac;
    display:block;margin-bottom:7px;
  }
  input,textarea,select{
    width:100%;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line-dark);
    color:var(--text-on-ink);
    padding:12px 14px;
    border-radius:3px;
    font-family:var(--font-body);
    font-size:14.5px;
  }
  input:focus,textarea:focus,select:focus{border-color:var(--teal-bright);}
  select{
    background-color:#152838;
    color:var(--text-on-ink);
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238fa3ac' stroke-width='1.6'/></svg>");
    background-repeat:no-repeat;
    background-position:right 14px center;
    padding-right:36px;
  }
  select option{
    background-color:#ffffff;
    color:#0b1520;
  }
  textarea{resize:vertical;min-height:110px;}
  .form-submit{
    margin-top:8px;
    background:var(--brass);
    color:var(--ink);
    border:none;
    padding:14px 22px;
    font-family:var(--font-mono);
    font-weight:600;
    font-size:14px;
    border-radius:3px;
    transition:background .2s ease;
    align-self:flex-start;
  }
  .form-submit:hover{background:#d9ac54;}
  .form-note{font-size:12px;color:#6d8390;}

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--ink);
    color:#7f93a0;
    padding:56px 0 28px;
    border-top:1px solid var(--line-dark);
  }
  .footer-top{
    display:grid;grid-template-columns:1fr;gap:40px;
    padding-bottom:40px;border-bottom:1px solid var(--line-dark);
    margin-bottom:24px;
  }
  @media(min-width:760px){.footer-top{grid-template-columns:1.3fr 1fr 1fr;}}
  .footer-brand .logo{color:var(--text-on-ink);}
  .footer-brand p{max-width:320px;margin-top:14px;font-size:13.5px;}
  .footer-col h4{
    font-family:var(--font-mono);
    color:#cfd9dd;font-size:12px;
    text-transform:uppercase;letter-spacing:.06em;
    margin-bottom:14px;
  }
  .footer-col ul{display:flex;flex-direction:column;gap:9px;}
  .footer-col a{font-size:13.5px;}
  .footer-col a:hover{color:var(--brass);}
  .footer-bottom{
    display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
    font-size:12.5px;font-family:var(--font-mono);
  }

  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1;transform:none;}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}