:root{
    --ink:#10131b;
    --ink-soft:#181c28;
    --ink-line:#2a2f3d;
    --paper:#eef1ee;
    --paper-soft:#e3e7e1;
    --paper-line:#c9cec6;
    --text-on-ink:#e8eae6;
    --text-on-ink-dim:#9aa0ad;
    --text-on-paper:#171a17;
    --text-on-paper-dim:#565c55;
    --teal:#21c7b0;
    --teal-dim:#17998a;
    --amber:#f0a93e;
    --radius:14px;
    --maxw:1180px;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--font-body);
    background:var(--paper);
    color:var(--text-on-paper);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  section{padding:6.5rem 1.5rem;}
  .wrap{max-width:var(--maxw); margin:0 auto;}
  h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-0.01em;}
  .eyebrow{
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:.04em;
    color:var(--teal-dim);
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:1rem;
  }
  .eyebrow::before{content:"//"; color:var(--amber); font-weight:500;}
  :focus-visible{outline:2px solid var(--teal); outline-offset:3px;}

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(238,241,238,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--paper-line);
  }
  .nav{
    max-width:var(--maxw); margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 1.5rem;
  }
  .logo{
    font-family:var(--font-mono); font-weight:500; font-size:1.05rem;
    display:flex; align-items:center; gap:.55rem;
  }
  .logo .dot{width:9px; height:9px; border-radius:2px; background:var(--teal); display:inline-block;}
  .nav-links{display:flex; gap:2rem; font-size:.92rem; font-weight:500;}
  .nav-links a{position:relative; padding:.25rem 0;}
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px;
    background:var(--teal); transition:width .25s ease;
  }
  .nav-links a:hover::after{width:100%;}
  .nav-cta{
    font-family:var(--font-mono); font-size:.82rem; font-weight:500;
    background:var(--ink); color:var(--text-on-ink);
    padding:.6rem 1.1rem; border-radius:8px;
    border:1px solid var(--ink);
    transition:background .2s ease, transform .2s ease;
  }
  .nav-cta:hover{background:var(--teal-dim); border-color:var(--teal-dim); transform:translateY(-1px);}
  .menu-btn{display:none; background:none; border:none; cursor:pointer; padding:.4rem;}
  .menu-btn span{display:block; width:22px; height:2px; background:var(--text-on-paper); margin:5px 0; transition:.25s;}

  /* ---------- Hero ---------- */
  .hero{
    background:radial-gradient(circle at 15% -10%, #1c2333 0%, var(--ink) 55%);
    color:var(--text-on-ink);
    padding-top:5.5rem;
    position:relative;
    overflow:hidden;
  }
  .hero .wrap{
    display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center;
  }
  .hero h1{font-size:clamp(2.2rem, 4.2vw, 3.35rem); margin-bottom:1.1rem;}
  .hero h1 em{font-style:normal; color:var(--teal);}
  .hero p.lead{
    color:var(--text-on-ink-dim); font-size:1.08rem; max-width:46ch; margin-bottom:2rem;
  }
  .hero-ctas{display:flex; gap:1rem; flex-wrap:wrap;}
  .btn{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.85rem 1.5rem; border-radius:9px;
    font-weight:600; font-size:.95rem; cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
    border:1px solid transparent;
  }
  .btn-primary{background:var(--amber); color:#221403;}
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(240,169,62,.55);}
  .btn-ghost{border-color:var(--ink-line); color:var(--text-on-ink);}
  .btn-ghost:hover{border-color:var(--teal); color:var(--teal); transform:translateY(-2px);}
  .btn-dark{background:var(--ink); color:var(--text-on-ink); border-color:var(--ink-line);}
  .btn-dark:hover{border-color:var(--teal); color:var(--teal);}

  /* terminal */
  .terminal{
    background:#0c0e14; border:1px solid var(--ink-line); border-radius:var(--radius);
    box-shadow:0 30px 60px -25px rgba(0,0,0,.6);
    overflow:hidden;
  }
  .terminal-bar{
    display:flex; align-items:center; gap:.4rem;
    padding:.75rem 1rem; border-bottom:1px solid var(--ink-line);
  }
  .terminal-bar span{width:10px; height:10px; border-radius:50%; background:#3a3f4d;}
  .terminal-bar .title{
    margin-left:.6rem; font-family:var(--font-mono); font-size:.75rem; color:var(--text-on-ink-dim);
  }
  .terminal-body{
    font-family:var(--font-mono); font-size:.86rem; padding:1.4rem 1.3rem 1.6rem;
    min-height:230px; color:#c8ccd6;
  }
  .terminal-body .line{opacity:0; animation:reveal .4s forwards;}
  .terminal-body .prompt{color:var(--teal);}
  .terminal-body .ok{color:#7fe0a7;}
  .terminal-body .muted{color:var(--text-on-ink-dim);}
  .cursor{display:inline-block; width:7px; height:1em; background:var(--teal); vertical-align:text-bottom; animation:blink 1s step-end infinite;}
  @keyframes reveal{to{opacity:1;}}
  @keyframes blink{50%{opacity:0;}}

  /* ---------- Sections general ---------- */
  .section-head{max-width:640px; margin-bottom:3rem;}
  .section-head h2{font-size:clamp(1.7rem, 2.8vw, 2.3rem);}
  .section-head p{color:var(--text-on-paper-dim); margin-top:.9rem; font-size:1.02rem;}
  .light-on-ink .section-head p{color:var(--text-on-ink-dim);}

  /* ---------- Quienes somos ---------- */
  #about{background:var(--paper);}
  .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start;}
  .about-grid p{color:var(--text-on-paper-dim); margin-bottom:1.1rem; font-size:1.01rem;}
  .values{display:grid; gap:1.1rem;}
  .value-item{
    display:flex; gap:1rem; padding:1.1rem 0; border-top:1px solid var(--paper-line);
  }
  .value-item:last-child{border-bottom:1px solid var(--paper-line);}
  .value-mark{
    font-family:var(--font-mono); color:var(--teal-dim); font-weight:500; font-size:.85rem;
    padding-top:.15rem; flex-shrink:0; width:2.2rem;
  }
  .value-item h4{font-size:1.02rem; margin-bottom:.3rem;}
  .value-item p{color:var(--text-on-paper-dim); font-size:.94rem; margin:0;}

  /* ---------- Servicios ---------- */
  #services{background:var(--ink); color:var(--text-on-ink);}
  .service-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:1.25rem;}
  .service-card{
    background:var(--ink-soft); border:1px solid var(--ink-line); border-radius:var(--radius);
    padding:2rem; transition:border-color .25s ease, transform .25s ease;
  }
  .service-card:hover{border-color:var(--teal-dim); transform:translateY(-3px);}
  .service-num{font-family:var(--font-mono); color:var(--amber); font-size:.82rem; margin-bottom:1rem; display:block;}
  .service-card h3{font-size:1.2rem; margin-bottom:.6rem;}
  .service-card p{color:var(--text-on-ink-dim); font-size:.95rem;}

  /* ---------- Proceso ---------- */
  #process{background:var(--paper);}
  .process-list{display:grid; gap:0;}
  .process-item{
    display:grid; grid-template-columns:5rem 1fr; gap:1.5rem;
    padding:2rem 0; border-top:1px solid var(--paper-line);
  }
  .process-item:last-child{border-bottom:1px solid var(--paper-line);}
  .process-index{font-family:var(--font-mono); color:var(--teal-dim); font-size:1.4rem; font-weight:500;}
  .process-item h3{font-size:1.15rem; margin-bottom:.4rem;}
  .process-item p{color:var(--text-on-paper-dim); max-width:60ch;}

  /* ---------- Proyectos ---------- */
  #projects{background:var(--paper-soft);}
  .project-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:1.5rem;}
  .project-card{
    background:var(--paper); border:1px solid var(--paper-line); border-radius:var(--radius);
    overflow:hidden; position:relative; display:block;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .project-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(20,22,20,.25);}
  .project-img{aspect-ratio:16/10; overflow:hidden; background:var(--ink);}
  .project-img img{width:100%; height:100%; object-fit:cover; object-position:top;}
  .project-info{padding:1.25rem 1.4rem 1.5rem; display:flex; justify-content:space-between; align-items:center; gap:1rem;}
  .project-info h4{font-size:1.05rem;}
  .project-info span{font-family:var(--font-mono); font-size:.78rem; color:var(--teal-dim);}

  /* ---------- Contacto ---------- */
  #contact{background:var(--ink); color:var(--text-on-ink);}
  .contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:3.5rem; align-items:center;}
  .contact-grid h2{font-size:clamp(1.8rem,3vw,2.5rem); margin-bottom:1rem;}
  .contact-grid > div:first-child p{color:var(--text-on-ink-dim); max-width:44ch; margin-bottom:2rem; font-size:1.02rem;}
  .contact-card{
    background:var(--ink-soft); border:1px solid var(--ink-line); border-radius:var(--radius);
    padding:2rem;
  }
  .contact-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:1.1rem 0; border-top:1px solid var(--ink-line);
  }
  .contact-row:first-child{border-top:none; padding-top:0;}
  .contact-row .label{font-family:var(--font-mono); font-size:.78rem; color:var(--text-on-ink-dim);}
  .contact-row .value{font-weight:600;}
  .contact-row a.value:hover{color:var(--teal);}

  footer{
    background:var(--ink); color:var(--text-on-ink-dim);
    border-top:1px solid var(--ink-line);
    padding:1.75rem 1.5rem;
    font-size:.85rem;
  }
  footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem;}
  footer .logo{font-size:.9rem;}

  @media (max-width:900px){
    .hero .wrap{grid-template-columns:1fr;}
    .about-grid, .contact-grid{grid-template-columns:1fr; gap:2.5rem;}
    .service-grid, .project-grid{grid-template-columns:1fr;}
    .nav-links{
      position:fixed; inset:4.1rem 0 auto 0; background:var(--paper);
      flex-direction:column; padding:1.5rem; gap:1.25rem;
      border-bottom:1px solid var(--paper-line);
      transform:translateY(-130%); transition:transform .3s ease;
    }
    .nav-links.open{transform:translateY(0);}
    .menu-btn{display:block;}
    .nav-cta{display:none;}
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .terminal-body .line{animation:none; opacity:1;}
    .cursor{animation:none;}
    *{transition:none !important;}
  }