:root{
  --fondo:#000; --panel:#080808; --panel2:#0e0e0e; --hair:#1c1c1c; --hair2:#262626;
  --texto:#f2f2f2; --medio:#a6a6a6; --tenue:#6e6e6e;
  --acento:#00d26a; --acento2:#5cf5a0; --alerta:#ff4d4d;
  --r:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);
  font:400 16px/1.55 'Instrument Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5{margin:0;font-weight:600;letter-spacing:-.022em;line-height:1.12}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg,canvas{max-width:100%}
.m{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.eyebrow{font:500 11px/1.3 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue)}
.verde{color:var(--acento)}

/* cabecera */
header{position:sticky;top:0;z-index:40;background:rgba(0,0,0,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.nav{display:flex;align-items:center;height:58px;gap:12px}
.marca{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.marca svg{display:block;flex:none}
.pal em{font-style:normal;color:var(--acento)}
.acciones{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border-radius:9px;
  font-size:14px;font-weight:600;border:1px solid transparent;transition:.16s;white-space:nowrap;min-height:40px}
.btn.pri{background:var(--acento);color:#000}
.btn.pri:hover{background:var(--acento2)}
.btn.sec{border-color:var(--hair2);color:var(--texto);background:#0b0b0b}
.btn.sec:hover{border-color:#3a3a3a}
.btn.ing{border-color:#0b3d22;color:var(--acento);background:#021409}
.btn.ing:hover{border-color:var(--acento)}
.btn svg{flex:none}

/* secciones */
section{padding:56px 0;border-bottom:1px solid var(--hair);scroll-margin-top:58px}
.titulo{margin-bottom:28px}
.titulo h2{font-size:clamp(26px,5.6vw,40px);letter-spacing:-.03em;margin-top:10px;max-width:22ch}
.titulo p{margin-top:12px;font-size:16.5px;color:var(--medio);max-width:58ch}
.caja{border:1px solid var(--hair);border-radius:var(--r);background:linear-gradient(180deg,var(--panel2),var(--panel));padding:20px}

/* chips y fórmulas (ingeniería) */
.chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.chip{font:400 11.5px/1.2 'IBM Plex Mono',monospace;color:var(--medio);background:#101010;
  border:1px solid var(--hair2);padding:6px 8px;border-radius:5px}
.chip.a{color:var(--acento);border-color:#0b3d22;background:#021409}
.formula{margin-top:14px;font:400 12.5px/1.8 'IBM Plex Mono',monospace;color:#cfcfcf;
  background:#000;border:1px solid var(--hair);border-radius:8px;padding:14px;
  overflow-x:auto;white-space:pre;-webkit-overflow-scrolling:touch}

/* pie */
footer{padding:36px 0 28px}
.legal{display:flex;flex-direction:column;gap:10px;font:400 12px/1.7 'IBM Plex Mono',monospace;color:var(--tenue)}
.legal .marca{color:var(--texto);font-family:'Instrument Sans',sans-serif}

.rev{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.rev.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

@media(min-width:760px){
  .wrap{padding:0 32px}
  section{padding:88px 0}
  .caja{padding:28px}
  .nav{height:64px;gap:24px}
  .legal{flex-direction:row;justify-content:space-between;flex-wrap:wrap}
}
@media(max-width:560px){
  .solo-ancho{display:none!important}
}
@media(max-width:420px){
  .btn{padding:8px 11px;font-size:13.5px}
}
@media(max-width:370px){
  .marca .pal{display:none}
}