:root {
  --carbon:#0E0F11; --lienzo:#131417; --grafito:#1C1E22; --acero:#3A3D43; --gris:#8A8F98; --niebla:#D9DBDF; --papel:#F5F5F2;
  --extraccion:#22C3E6; --programado:#FFB000; --entregado:#3DDC84; --alerta:#FF4D3D;
  --margen:clamp(16px, 2.7vw, 36px);
  --separacion:clamp(96px, 12.5vw, 180px);
  --facil:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
  scrollbar-color:var(--acero) var(--carbon);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--carbon); color:var(--papel); font-family:'IBM Plex Sans', system-ui, sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; caret-color:var(--programado); }
::selection { background:var(--programado); color:var(--carbon); }
a { color:inherit; text-underline-offset:3px; text-decoration-thickness:1px; }
:focus-visible { outline:3px solid var(--programado); outline-offset:3px; }
h1, h2 { font-weight:600; letter-spacing:-.035em; margin:0; text-wrap:balance; }
h2 { font-size:clamp(30px, 3.6vw, 50px); line-height:1.05; }
p { margin:0; }

/* Navegación */
.barra-sitio { position:relative; z-index:2; display:flex; align-items:center; gap:28px; padding:16px var(--margen); }
.marca { display:inline-flex; align-items:center; gap:11px; color:var(--papel); text-decoration:none; font-weight:600; font-size:16px; letter-spacing:-.01em; }
.marca svg { width:24px; height:24px; flex:none; fill:var(--papel); stroke:var(--papel); stroke-width:1.9; stroke-linecap:round; }
.marca svg path { fill:none; }
.marca svg rect { stroke:none; }
.marca svg circle { fill:none; }
.barra-sitio ul { display:flex; gap:26px; list-style:none; margin:0 0 0 auto; padding:0; }
.barra-sitio ul a { text-decoration:none; color:var(--niebla); transition:color .2s; }
.barra-sitio ul a:hover { color:var(--papel); }

/* Botones: esquinas rectas, como la etiqueta */
.boton { display:inline-flex; align-items:center; gap:9px; background:var(--papel); color:var(--carbon); border:0; font:inherit; font-weight:600; font-size:16px; text-decoration:none; padding:12px 18px; cursor:pointer; transition:transform .2s var(--facil), background .2s; }
.boton:hover { transform:translateY(-2px); }
.boton:active { transform:translateY(0) scale(.98); }
.boton-grande { font-size:clamp(16px, 1.45vw, 20px); padding:16px 24px; }

/* Portada: el súper flujo corre difuminado detrás del título */
.portada { position:relative; min-height:100svh; display:grid; grid-template-rows:auto 1fr; overflow:hidden; isolation:isolate; }
.fondo { position:absolute; inset:0; z-index:0; filter:blur(2px); }
.velo { position:absolute; inset:0; z-index:1; background:rgba(14, 15, 17, .66); }
.portada-texto { position:relative; z-index:2; align-self:center; display:grid; grid-template-columns:7fr 5fr; gap:36px; align-items:end; padding:0 var(--margen); }
h1 { font-size:clamp(48px, 7.5vw, 108px); line-height:.94; letter-spacing:-.04em; }
.portada-lado { display:grid; gap:22px; justify-items:start; padding-bottom:8px; }
.bajada { font-size:clamp(17px, 1.35vw, 20px); line-height:1.45; max-width:34ch; }

/* Lienzos con aspecto de editor de workflows */
.lienzo { position:relative; background-color:var(--lienzo); background-image:radial-gradient(circle, #2B2E34 1.1px, transparent 1.3px); /* taste-skill-ignore: grilla de puntos del lienzo (data-ui) */ background-size:20px 20px; padding:58px 26px 46px; min-height:180px; overflow:hidden; }
.aristas { position:absolute; inset:0; pointer-events:none; overflow:visible; }
.arista { fill:none; stroke:var(--acero); stroke-width:2; transition:stroke .4s; }
.arista.activa { stroke:var(--c); }
.puerto { fill:var(--acero); }
.etiqueta-arista { fill:var(--niebla); font:500 12px 'IBM Plex Sans', sans-serif; }
.paquete { fill:var(--c); }

.nodos { position:relative; display:grid; row-gap:40px; column-gap:11px; align-items:start; }
.nodo { display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; min-width:0; transition:opacity .3s; }
.caja { position:relative; width:64px; height:64px; flex:none; display:grid; place-items:center; background:var(--grafito); border:2px solid var(--acero); border-radius:9px; color:var(--c); transition:border-color .3s, transform .3s var(--facil); }
.caja.trig { border-radius:32px 9px 9px 32px; }
.caja svg { width:27px; height:27px; }
.rotulo { display:grid; gap:2px; max-width:120px; font-size:14px; line-height:1.3; }
.rotulo b { font-weight:600; overflow-wrap:break-word; hyphens:auto; }
.rotulo span { color:var(--niebla); }
.salida { font-style:normal; color:var(--entregado); font-variant-numeric:tabular-nums; min-height:18px; }
.ok { position:absolute; top:-8px; right:-8px; width:18px; height:18px; border-radius:50%; background:var(--entregado); opacity:0; transform:scale(.6); transition:transform .25s var(--facil), opacity .2s; }
.ok::after { content:""; position:absolute; left:5.5px; top:2.5px; width:4.5px; height:8px; border:solid var(--carbon); border-width:0 2.3px 2.3px 0; transform:rotate(45deg); }

.nodo[data-estado="corriendo"] .caja { border-color:var(--c); transform:scale(1.06); }
.nodo[data-estado="ok"] .caja { border-color:var(--entregado); }
.nodo[data-estado="ok"] .ok, .nodo[data-estado="aviso"] .ok { opacity:1; transform:none; }
.nodo[data-estado="aviso"] .caja { border-color:var(--alerta); }
.nodo[data-estado="aviso"] .ok { background:var(--alerta); }
.nodo[data-estado="omitido"] { opacity:.35; }

/* El lienzo de fondo: sin textos secundarios, filas repartidas en toda la altura */
.lienzo-fondo { position:absolute; inset:0; padding:96px 40px 64px; min-height:0; }
.lienzo-fondo .nodos { position:absolute; top:96px; bottom:64px; left:50%; transform:translateX(-50%); width:max(calc(100% - 80px), 1080px); row-gap:0; align-items:center; }
.lienzo-fondo .nodo { flex-direction:row; gap:10px; justify-content:center; }
.lienzo-fondo .caja { width:48px; height:48px; }
.lienzo-fondo .caja.trig { border-radius:24px 8px 8px 24px; }
.lienzo-fondo .caja svg { width:22px; height:22px; }
.lienzo-fondo .rotulo { text-align:left; max-width:110px; font-size:13px; }
.lienzo-fondo .rotulo span, .lienzo-fondo .salida { display:none; }

/* Lienzo vertical en pantallas angostas: el flujo baja en vez de avanzar */
.lienzo.vertical { padding:20px 12px 28px 40px; }
.vertical .nodos { row-gap:20px; column-gap:10px; }
.vertical .nodo { flex-direction:row; align-items:center; text-align:left; gap:11px; }
.vertical .caja { width:46px; height:46px; border-radius:8px; }
.vertical .caja svg { width:20px; height:20px; }
.vertical .caja.trig { border-radius:23px 23px 8px 8px; }
.vertical .rotulo { max-width:none; line-height:1.25; }

/* Secciones */
.seccion { padding:var(--separacion) var(--margen) 0; }

.sobre-mi { display:grid; grid-template-columns:7fr 5fr; gap:36px; align-items:start; }
.sobre-texto { display:grid; gap:18px; }
.sobre-texto p { font-size:clamp(17px, 1.35vw, 20px); line-height:1.5; max-width:46ch; }

/* Pie con contacto */
.pie { padding:var(--separacion) var(--margen) 28px; }
.contacto { display:grid; grid-template-columns:7fr 5fr; gap:36px; align-items:end; margin-bottom:var(--separacion); }
.contacto h2 { font-size:clamp(40px, 5.4vw, 86px); line-height:.98; letter-spacing:-.04em; }
.contacto div { display:grid; gap:22px; justify-items:start; }

.pie-grilla { display:flex; justify-content:space-between; align-items:flex-start; gap:36px; padding-top:40px; border-top:1px solid var(--acero); }
.pie-columna h3 { margin:0 0 14px; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--gris); }
.pie-columna ul { list-style:none; margin:0; padding:0; display:flex; gap:24px; }
.pie-columna a { display:inline-flex; align-items:center; gap:8px; color:var(--niebla); text-decoration:none; font-size:15px; transition:color .2s; }
.pie-columna svg { width:18px; height:18px; fill:currentColor; }
.pie-columna a:hover { color:var(--papel); text-decoration:underline; }

.pie-legal { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; margin-top:48px; padding-top:20px; border-top:1px solid var(--grafito); color:var(--gris); font-size:13px; }

@media (max-width:860px) {
  .barra-sitio ul { display:none; }
  .portada-texto, .sobre-mi, .contacto { grid-template-columns:1fr; gap:22px; }
  .pie-grilla { flex-direction:column; gap:28px; }
  .lienzo-fondo .nodos { width:1080px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .boton, .caja, .ok, .arista { transition:none; }
}