@import './tokens-corporate.css';
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--ink);color:var(--bone);font-family:"Source Sans 3",system-ui,sans-serif;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3{font-family:"Newsreader",Georgia,serif;font-weight:400;line-height:1.08;letter-spacing:-0.01em}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
  .mono{font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}

  /* topbar */
  .topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gut);background:rgba(18,22,29,0);transition:background .4s,border-color .4s,padding .4s;border-bottom:1px solid transparent}
  .topbar.scrolled{background:rgba(18,22,29,.92);backdrop-filter:blur(10px);border-bottom-color:var(--ink-line);padding-top:14px;padding-bottom:14px}
  .brand{display:inline-flex;align-items:baseline;gap:.5ch;font-family:"Newsreader",serif;font-size:1.45rem}
  .brand .btag{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);transform:translateY(-.35em)}
  .nav{display:flex;align-items:center;gap:30px}
  .nav a.lnk{font-size:.82rem;letter-spacing:.04em;color:var(--bone-dim);transition:color .25s}
  .nav a.lnk:hover{color:var(--bone)}
  .navcta{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)!important;background:var(--brass);padding:11px 20px;border-radius:2px;transition:background .25s,transform .25s}
  .navcta:hover{background:var(--brass-soft);transform:translateY(-1px)}
  @media(max-width:820px){.nav .lnk{display:none}}

  /* hero */
  .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
  .hero-photo{position:absolute;inset:0;background-image:url('img/skyline-hero.jpg');background-size:cover;background-position:center;opacity:.5;mix-blend-mode:luminosity}
  .hero-scene{position:absolute;inset:0;width:100%;height:100%}
  .hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,22,29,.55) 0%,rgba(18,22,29,.2) 42%,rgba(18,22,29,.72) 82%,var(--ink) 100%)}
  .hero-inner{position:relative;z-index:3;width:100%;padding-bottom:clamp(56px,9vh,120px);padding-top:140px}
  .hero .eyebrow{color:var(--brass);margin-bottom:26px;opacity:0;animation:rise .9s .15s forwards}
  .hero h1{font-size:clamp(2.4rem,5.2vw,4.7rem);max-width:17ch;font-weight:400;opacity:0;animation:rise 1s .35s forwards}
  .hero h1 em{font-style:normal;color:var(--brass-soft)}
  .hero .sub{margin-top:28px;max-width:52ch;font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--bone-dim);font-weight:300;opacity:0;animation:rise 1s .6s forwards}
  .hero .actions{margin-top:38px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;opacity:0;animation:rise 1s .8s forwards}
  .hero .htag{margin-top:26px;color:var(--bone-dim);opacity:0;animation:rise 1s .95s forwards;display:inline-flex;align-items:center;gap:10px}
  .hero .htag .dot{width:6px;height:6px;border-radius:50%;background:var(--brass)}
  .btn{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;padding:15px 30px;border-radius:2px;transition:transform .25s,background .25s,color .25s,border-color .25s;display:inline-block}
  .btn-brass{background:var(--brass);color:var(--ink)}
  .btn-brass:hover{background:var(--brass-soft);transform:translateY(-2px)}
  .btn-ghost{border:1px solid var(--ink-line);color:var(--bone)}
  .btn-ghost:hover{border-color:var(--brass);color:var(--brass-soft)}
  @keyframes rise{to{opacity:1;transform:translateY(0)}}
  .hero .eyebrow,.hero h1,.hero .sub,.hero .actions,.hero .htag{transform:translateY(18px)}

  section{position:relative}
  .pad{padding:clamp(80px,12vh,150px) 0}
  .seyebrow{color:var(--brass);margin-bottom:22px;display:inline-flex;align-items:center;gap:14px}
  .seyebrow::before{content:"";width:30px;height:1px;background:var(--brass)}
  .bajada{font-family:"Newsreader",serif;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.22;max-width:24ch;font-weight:300;margin-bottom:54px}
  .bajada .hl{color:var(--brass-soft)}

  /* capabilities (qué hacemos) */
  .caps{border-top:1px solid var(--ink-line)}
  .cap{display:grid;grid-template-columns:88px 1fr;gap:30px;padding:36px 0;border-top:1px solid var(--ink-line);align-items:start}
  .cap .num{font-family:"IBM Plex Mono",monospace;font-size:.95rem;color:var(--brass);padding-top:7px}
  .cap h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:12px}
  .cap p{max-width:56ch;color:var(--bone-dim);font-weight:300}
  @media(max-width:620px){.cap{grid-template-columns:1fr;gap:10px}.cap .num{padding-top:0}}

  /* soluciones por industria */
  .sol{border-top:1px solid var(--ink-line)}
  .sol-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .sol-c{background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:5px;padding:26px 22px 28px;transition:transform .25s,border-color .25s}
  .sol-c:hover{transform:translateY(-4px);border-color:var(--brass)}
  .sol-c .n{font-family:"IBM Plex Mono",monospace;color:var(--brass);font-size:.85rem;letter-spacing:.1em}
  .sol-c h3{font-size:1.25rem;margin:16px 0 10px;line-height:1.12}
  .sol-c p{font-size:.92rem;color:var(--bone-dim);font-weight:300;line-height:1.5}
  @media(max-width:900px){.sol-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.sol-grid{grid-template-columns:1fr}}

  /* asunción band */
  .band{position:relative;min-height:58vh;display:flex;align-items:center;overflow:hidden}
  .band-photo{position:absolute;inset:0;background-image:url('img/asuncion-mid.jpg');background-size:cover;background-position:center;opacity:.55;mix-blend-mode:luminosity}
  .band-scene{position:absolute;inset:0;width:100%;height:100%}
  .band-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,22,29,.85) 0%,rgba(18,22,29,.4) 60%,rgba(18,22,29,.7) 100%)}
  .band .wrap{position:relative;z-index:2}
  .band p{font-family:"Newsreader",serif;font-size:clamp(1.5rem,3.2vw,2.5rem);font-weight:300;max-width:20ch;line-height:1.22}

  /* nosotros */
  .lead{border-top:1px solid var(--ink-line)}
  .lead h2{font-size:clamp(2rem,4vw,3.2rem);max-width:18ch;margin-bottom:46px}
  .lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,90px)}
  .lead .body p{color:var(--bone-dim);font-weight:300;font-size:1.08rem;margin-bottom:20px;max-width:52ch}
  .lead .why{margin-bottom:32px}
  .lead .why:last-child{margin-bottom:0}
  .lead .why h4{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:12px;font-weight:500}
  .lead .why p{color:var(--bone-dim);font-weight:300;font-size:1rem;max-width:50ch}
  .ch-flag{display:inline-block;width:.9em;height:.9em;vertical-align:-.08em;margin-left:.32em;border-radius:2px;box-shadow:0 0 0 1px rgba(243,239,230,.15)}
  @media(max-width:820px){.lead-grid{grid-template-columns:1fr;gap:40px}}

  /* mipymes */
  .mip{border-top:1px solid var(--ink-line)}
  .mip-card{border:1px solid var(--ink-line);border-radius:6px;padding:clamp(34px,5vw,56px);background:var(--ink-soft)}
  .mip-card h2{font-size:clamp(1.9rem,3.4vw,2.8rem);max-width:18ch;margin-bottom:20px}
  .mip-card .txt{color:var(--bone-dim);font-weight:300;max-width:60ch;font-size:1.05rem;margin-bottom:28px}
  .mip-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:32px}
  .mip-list li{padding-left:20px;position:relative;font-size:.98rem;line-height:1.4}
  .mip-list li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--brass)}
  .mip-list li b{display:block;font-weight:600;color:var(--bone)}
  .mip-list li span{color:var(--bone-dim);font-weight:300;font-size:.9rem}
  .mip-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid var(--ink-line);padding-top:28px}
  .mip-tag{font-family:"Newsreader",serif;font-style:normal;font-size:1.15rem;color:var(--brass-soft);font-weight:300;max-width:36ch}
  @media(max-width:720px){.mip-list{grid-template-columns:1fr}}

  /* contacto */
  .contact{border-top:1px solid var(--ink-line);position:relative;overflow:hidden}
  .contact-scene{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
  .contact-veil{position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,rgba(18,22,29,.78) 55%,var(--ink) 100%)}
  .contact .wrap{position:relative;z-index:2}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:start}
  .contact h2{font-size:clamp(2rem,4vw,3.2rem);max-width:14ch;margin-bottom:24px}
  .contact .txt{color:var(--bone-dim);font-weight:300;font-size:1.05rem;max-width:46ch;margin-bottom:30px}
  .contact .alt{color:var(--bone-dim);font-weight:300}
  .contact .alt a{color:var(--brass-soft);border-bottom:1px solid var(--ink-line);transition:border-color .25s}
  .contact .alt a:hover{border-color:var(--brass)}
  form{background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:6px;padding:clamp(26px,3vw,38px)}
  .field{margin-bottom:18px}
  .field label{display:block;font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:8px}
  .field input,.field select,.field textarea{width:100%;background:var(--ink);border:1px solid var(--ink-line);border-radius:3px;color:var(--bone);font-family:inherit;font-size:.98rem;padding:12px 14px;transition:border-color .2s}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass)}
  .field textarea{resize:vertical;min-height:96px}
  .field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%);background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  .field select option{background:var(--ink)}
  form .btn-brass{width:100%;border:none;cursor:pointer;font-family:"IBM Plex Mono",monospace;text-align:center}
  .hp{position:absolute;left:-9999px}
  @media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:36px}}

  /* footer */
  footer{border-top:1px solid var(--ink-line);padding:46px 0 56px}
  .foot{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
  .foot .brand{font-size:1.2rem}
  .foot .meta{color:var(--bone-dim);font-weight:300;font-size:.9rem;margin-top:10px}
  .foot .links a{color:var(--bone-dim);font-size:.85rem;transition:color .25s}
  .foot .links a:hover{color:var(--brass)}
  .foot .copy{color:var(--ink-line);font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;margin-top:30px;width:100%}

  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  @media(max-width:600px){
    .pad{padding:52px 0}
    .band{min-height:40vh}
    .bajada{margin-bottom:32px}
    .lead h2{margin-bottom:28px}
    .hero-inner{padding-top:116px;padding-bottom:56px}
    .nav{gap:14px}
    .navcta{font-size:.66rem;padding:10px 15px}
  }
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.hero .eyebrow,.hero h1,.hero .sub,.hero .actions,.hero .htag{opacity:1;transform:none}.draw{stroke-dashoffset:0!important}.reveal{opacity:1;transform:none}}