:root {
    --paper: #ffffff;
    --paper-2: #f5f5f3;
    --ink: #18181a;
    --ink-2: #3a3a3c;
    --muted: #6b6b70;
    --line: #ededeb;
    --accent: #a1a1a6;
    --accent-text: #55555a;
    --night: #000000;
    --night-2: #1c1c1e;
    --night-line: #2a2a2d;
    --night-text: #f5f5f7;
    --night-muted: #a1a1a6;
    --serif: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --max: 1240px;
    --ease: cubic-bezier(.2, .7, .1, 1);
  }

  html[data-lang="en"] .l-es, html[data-lang="es"] .l-en { display: none !important; }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 76px; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  ::selection { background: var(--accent); color: #fff; }
  a { color: inherit; }
  img { max-width: 100%; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  .wrap { max-width: var(--max); margin: 0 auto; padding-inline: 24px; }
  .hero-cols > *, .about > *, .agents > *, .contact-grid > *, .job > *, .stack-group > * { min-width: 0; }
  section { padding-block: 76px 110px; position: relative; }
  .mono { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; }

  /* Grano de papel muy sutil */
  body::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 200;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ===== PROGRESO DE LECTURA ===== */
  .progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); z-index: 120; }

  /* ===== HEADER ===== */
  .site-header {
    position: fixed; inset: 0 0 auto 0; z-index: 110;
    transition: background .3s ease, border-color .3s ease;
    border-bottom: 1px solid transparent;
  }
  .site-header.inverse { color-scheme: dark; }
  .site-header.inverse.scrolled { background: rgba(0, 0, 0, .92); border-bottom-color: var(--night-line); }
  .site-header.inverse .brand, .site-header.inverse .nav-links a { color: var(--night-text); }
  .site-header.inverse .lang { border-color: var(--night-text); }
  .site-header.inverse .lang button { color: var(--night-text); }
  .site-header.inverse .lang button[aria-pressed="true"] { background: var(--night-text); color: var(--night); }
  .site-header.inverse .burger span { background: var(--night-text); }
  .site-header { transition: background .3s ease, border-color .3s ease, color .3s ease; }
  .site-header.scrolled { background: rgba(246, 247, 249, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: var(--line); }
  .nav { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 20px; }
  .brand { text-decoration: none; display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
  .brand-word { font-family: var(--serif); font-size: 1.35rem; letter-spacing: -0.01em; line-height: 1; }
  @media (max-width: 520px) { .brand-word { display: none; } }

  /* ===== ISOTIPO =====
     Una W de un solo trazo (dos V: William Valera) que termina, separada, en un nodo naranja:
     el punto de entrega a producción. Se dibuja al cargar; al pasar el ratón un paquete recorre el trazo. */
  .iso { width: 36px; height: 31px; overflow: visible; flex: none; }
  .iso-line { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: isoDraw 1.4s var(--ease) .25s forwards; }
  .iso-node { fill: var(--accent); transform-box: fill-box; transform-origin: center; transform: scale(0); animation: isoPop .5s var(--ease) 1.45s forwards; }
  .iso-node.ping { animation: isoPing .6s var(--ease); transform: scale(1); }
  .iso-packet { fill: var(--accent); opacity: 0; }
  .iso-dot, .hs-dot { fill: var(--mk-bg, var(--paper)); stroke: currentColor; stroke-width: 4; transform-box: fill-box; transform-origin: center; transform: scale(0); animation: isoPop .3s var(--ease) forwards; animation-delay: calc(.35s + var(--k) * .13s); }
  .iso-static .iso-dot { transform: none; animation: none; }
  .foot-brand { --mk-bg: var(--night); }
  .hs-dot { stroke: var(--ink); animation-delay: calc(.15s + var(--k) * .1s); }
  .iso-static .iso-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .iso-static .iso-node { transform: none; animation: none; }
  @keyframes isoDraw { to { stroke-dashoffset: 0; } }
  @keyframes isoPop { 60% { transform: scale(1.35); } to { transform: scale(1); } }
  @keyframes isoPing { 40% { transform: scale(1.6); } to { transform: scale(1); } }

  /* ===== COSTURAS ENTRE SECCIONES =====
     Una tubería de datos recorre la página de arriba abajo. En cada cambio de sección se escribe,
     al ritmo del scroll, la instrucción que da paso a la siguiente. */
  .seam { position: relative; padding-block: 34px; background: var(--paper); }
  .seam.dark-seam { background: var(--night); }
  .seam-inner { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 18px; }
  .seam-pipe { position: relative; }
  .seam-pipe::before {
    content: ''; position: absolute; left: 50%; top: -34px; bottom: -34px; width: 1px; transform: translateX(-50%);
    background-image: linear-gradient(to bottom, var(--accent) 55%, transparent 55%);
    background-size: 1px 9px; opacity: .7; animation: flow 1.1s linear infinite;
  }
  .seam-pipe i { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px; background: var(--accent); opacity: 0; }
  .seam.run .seam-pipe i { animation: drop 1.8s cubic-bezier(.6, 0, .4, 1) infinite; }
  @keyframes drop { 0% { top: -20px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% + 20px); opacity: 0; } }
  .seam-code { font-family: var(--mono); font-size: .8rem; line-height: 1.95; color: var(--ink-2); }
  .dark-seam .seam-code { color: var(--night-text); }
  .sl { display: block; width: calc(var(--c, 0) * 1ch); max-width: 100%; overflow: hidden; white-space: pre; }
  .sl.cur { border-right: .6ch solid var(--accent); }
  .seam .p { color: var(--accent-text); } .dark-seam .p { color: var(--accent); }
  .seam .k { font-weight: 500; color: var(--ink); } .dark-seam .k { color: #fff; }
  .seam .s { color: #8a5a00; } .dark-seam .s { color: #f5c46b; }
  .seam .c, .seam .o { color: var(--muted); } .dark-seam .c, .dark-seam .o { color: var(--night-muted); }
  .seam .ok { color: #1f8a4c; } .dark-seam .ok { color: #4ade80; }

  /* ===== ESPECIALIDADES EN 3D =====
     Las cuatro áreas como una pila: ERP en la base, capa de datos, IA arriba y la dirección como marco.
     Las partículas suben desde el ERP y se vuelven naranjas al validarse en la capa de datos. */
  .stack3d { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .viz { position: relative; overflow: hidden; aspect-ratio: 1 / 1; border: 1px solid var(--line); background: radial-gradient(circle at 50% 52%, #fafaf9 0%, var(--paper) 72%); cursor: grab; touch-action: pan-y; user-select: none; }
  .viz:active { cursor: grabbing; }
  .viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .viz::before, .viz::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid var(--ink); pointer-events: none; }
  .viz::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
  .viz::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
  .viz-labels span { position: absolute; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; pointer-events: none; transform: translate(calc(-100% - 10px), -50%); transition: color .3s ease; }
  .viz-labels span.on { color: var(--accent-text); }
  .viz-labels span.flip { transform: translate(10px, -50%); }
  .viz-hint { position: absolute; left: 14px; bottom: 10px; margin: 0; color: var(--muted); font-size: .66rem; }
  .viz-legend { position: absolute; right: 14px; bottom: 10px; margin: 0; color: var(--muted); font-size: .66rem; display: flex; gap: 14px; }
  .viz-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
  .lyrs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
  .lyr { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 20px 0 20px 20px; cursor: pointer; font: inherit; color: inherit; position: relative; display: grid; gap: 4px; }
  .lyr::before { content: ''; position: absolute; left: 0; top: 20px; bottom: 20px; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
  .lyr[aria-pressed="true"]::before { transform: scaleY(1); }
  .lyr .n { color: var(--muted); }
  .lyr[aria-pressed="true"] .n { color: var(--accent-text); }
  .lyr b { font-size: 1.15rem; letter-spacing: -0.01em; }
  .lyr .d { color: var(--muted); font-size: .95rem; }
  .no-webgl .viz { display: none; }
  .no-webgl .stack3d { grid-template-columns: 1fr; }
  @media (max-width: 900px) { .stack3d { grid-template-columns: 1fr; gap: 36px; } }
  .nav-links { display: flex; gap: 28px; align-items: center; }
  .nav-links a { text-decoration: none; font-size: 0.92rem; font-weight: 500; color: var(--ink-2); position: relative; }
  .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
  .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); transform-origin: left; }
  .nav-right { display: flex; align-items: center; gap: 14px; }
  .lang { display: inline-flex; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; font-family: var(--mono); font-size: 0.72rem; }
  .lang button { background: none; border: 0; padding: 6px 11px; cursor: pointer; color: var(--ink); font: inherit; letter-spacing: .06em; }
  .lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
  .burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
  .burger span { display: block; width: 22px; height: 1.5px; background: var(--ink); margin: 6px 0; transition: transform .3s var(--ease); }
  .burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  @media (max-width: 960px) {
    .burger { display: block; }
    .nav-links {
      position: absolute; top: 68px; left: 0; right: 0;
      flex-direction: column; align-items: flex-start; gap: 20px;
      padding: 28px 24px 32px; background: var(--paper); border-bottom: 1px solid var(--line);
      display: none;
    }
    .nav-links.open { display: flex; }
    .nav-links a { font-size: 1.3rem; font-family: var(--serif); }
  }

  /* ===== HERO ===== */
  .hero { padding-top: 120px; padding-bottom: 70px; overflow: hidden; }
  .hero-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(to right, rgba(0,0,0,.07) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0,0,0,.07) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(420px circle at var(--mx, 70%) var(--my, 30%), #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(420px circle at var(--mx, 70%) var(--my, 30%), #000 0%, transparent 70%);
  }
  .hero .wrap { position: relative; }
  .hero-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; color: var(--muted); padding-bottom: 18px; border-bottom: 1px solid var(--ink); margin-bottom: 30px; }
  .hero-meta .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #1f9d55; margin-right: 8px; vertical-align: 1px; box-shadow: 0 0 0 0 rgba(31,157,85,.5); animation: ping 2.4s infinite; }
  @keyframes ping { 70% { box-shadow: 0 0 0 7px rgba(31,157,85,0); } 100% { box-shadow: 0 0 0 0 rgba(31,157,85,0); } }
  .name {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(3.6rem, 12.5vw, 11rem);
    line-height: .86;
    letter-spacing: -0.035em;
    margin: 0 0 30px;
  }
  .name .ln { display: block; overflow: hidden; padding-bottom: .06em; }
  .name .ch { display: inline-block; transform: translateY(105%); animation: rise .9s var(--ease) forwards; }
  .name .ln:nth-child(2) { padding-left: clamp(0px, 9vw, 150px); }
  .name em { color: var(--accent); font-style: italic; }
  @keyframes rise { to { transform: none; } }
  .role-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-bottom: 54px; }
  .role { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 600; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 12px; }
  .role::before { content: ''; width: 14px; height: 14px; background: var(--accent); display: inline-block; }
  .rotator { font-family: var(--mono); font-size: 0.9rem; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; }
  .rotator b { color: var(--ink); font-weight: 500; display: inline-block; min-width: 22ch; transition: opacity .35s ease, transform .35s var(--ease); }
  .rotator b.out { opacity: 0; transform: translateY(-8px); }

  .hero-cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: start; }
  .hero-sub { font-size: clamp(1.08rem, 1.6vw, 1.26rem); color: var(--ink-2); margin: 0 0 32px; max-width: 620px; line-height: 1.55; }
  .btns { display: flex; flex-wrap: wrap; gap: 12px; }
  .btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px; border-radius: 999px;
    font-weight: 600; font-size: 0.95rem; text-decoration: none; cursor: pointer;
    border: 1px solid var(--ink); font-family: var(--sans);
    transition: color .35s var(--ease);
    isolation: isolate;
  }
  .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform .45s var(--ease); }
  .btn:hover::before { transform: none; }
  .btn-solid { background: var(--ink); color: var(--paper); }
  .btn-solid::before { background: var(--accent); }
  .btn-solid:hover { color: #fff; }
  .btn-line { background: transparent; color: var(--ink); }
  .btn-line::before { background: var(--ink); }
  .btn-line:hover { color: var(--paper); }
  .btn .arr { transition: transform .35s var(--ease); }
  .btn:hover .arr { transform: translateX(4px); }

  .spec { border-top: 1px solid var(--ink); margin: 0; }
  .spec div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
  .spec dt { color: var(--muted); margin: 0; }
  .spec dd { margin: 0; font-weight: 500; }
  @media (max-width: 900px) { .hero-cols { grid-template-columns: 1fr; gap: 44px; } }

  .stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 80px; border-top: 1px solid var(--ink); }
  .stat { padding: 22px 22px 0 22px; border-right: 1px solid var(--line); }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { border-right: 0; }
  .stat b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.03em; }
  .stat b sup { font-size: .45em; color: var(--accent); vertical-align: top; position: relative; top: .25em; margin-left: 2px; }
  .stat > span { color: var(--muted); font-size: 0.9rem; display: block; margin-top: 8px; max-width: 200px; }
  @media (max-width: 760px) {
    .stat { padding: 18px 10px 0 10px; }
    .stat > span { font-size: .8rem; }
  }

  /* Cinta de logos */
  .ticker { margin-top: 70px; border-block: 1px solid var(--ink); padding-block: 18px; overflow: hidden; }
  .ticker-track { display: flex; gap: 52px; width: max-content; animation: marquee 55s linear infinite; }
  .ticker:hover .ticker-track { animation-play-state: paused; }
  .ticker-track span { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; white-space: nowrap; color: var(--ink-2); }
  .ticker-track img { height: 24px; width: 24px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .85; transition: filter .3s ease, opacity .3s ease; }
  .ticker-track span:hover img { filter: none; opacity: 1; }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* ===== CABECERA DE SECCIÓN ===== */
  .sec-head { display: flex; align-items: center; gap: 16px; margin-bottom: 34px; color: var(--muted); }
  .sec-head .num { color: var(--accent-text); }
  .sec-head .rule { flex: 1; height: 1px; background: currentColor; opacity: .5; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
  .sec-head.in .rule { transform: scaleX(1); }
  h2 {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(2.3rem, 5vw, 4.2rem);
    line-height: 1.02; letter-spacing: -0.025em;
    margin: 0 0 26px; max-width: 980px;
  }
  h2 em { font-style: italic; color: var(--accent-text); }
  .lead { font-size: 1.12rem; color: var(--ink-2); max-width: 700px; margin: 0 0 64px; }

  /* ===== PERFIL ===== */
  .about { display: grid; grid-template-columns: 1.15fr 1fr; gap: 80px; }
  .about-text p { margin: 0 0 20px; color: var(--ink-2); font-size: 1.08rem; }
  .about-text p.first::first-letter { font-family: var(--serif); float: left; font-size: 4.6rem; line-height: .82; padding: 6px 12px 0 0; color: var(--accent); }
  .principles { list-style: none; margin: 0; padding: 0; counter-reset: p; border-top: 1px solid var(--ink); }
  .principles li { padding: 20px 0 20px 54px; border-bottom: 1px solid var(--line); position: relative; counter-increment: p; }
  .principles li::before { content: counter(p, decimal-leading-zero); position: absolute; left: 0; top: 21px; font-family: var(--mono); font-size: .78rem; color: var(--accent-text); }
  .principles b { display: block; font-size: 1.05rem; margin-bottom: 4px; }
  .principles li > span { color: var(--muted); font-size: 0.95rem; }
  @media (max-width: 900px) { .about { grid-template-columns: 1fr; gap: 48px; } }

  /* ===== ESPECIALIZACIÓN ===== */
  .expertise { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
  .exp { padding: 26px 26px 30px; border-right: 1px solid var(--line); position: relative; }
  .exp:first-child { padding-left: 0; }
  .exp:last-child { border-right: 0; }
  .exp .n { font-family: var(--serif); font-size: 3.2rem; line-height: 1; color: var(--line); transition: color .4s ease; display: block; margin-bottom: 18px; }
  .exp:hover .n { color: var(--accent); }
  .exp h3 { font-size: 1.15rem; margin: 0 0 10px; letter-spacing: -0.01em; }
  .exp p { margin: 0; color: var(--muted); font-size: 0.95rem; }
  @media (max-width: 960px) {
    .expertise { grid-template-columns: repeat(2, 1fr); }
    .exp { padding: 24px 20px 26px 0 !important; border-right: 0; border-bottom: 1px solid var(--line); }
    .exp:nth-child(even) { padding-left: 20px !important; border-left: 1px solid var(--line); }
  }
  @media (max-width: 560px) { .expertise { grid-template-columns: 1fr; } .exp:nth-child(even) { padding-left: 0 !important; border-left: 0; } }

  /* ===== BANDAS OSCURAS ===== */
  .dark { background: var(--night); color: var(--night-text); }
  .dark .sec-head { color: var(--night-muted); }
  .dark .sec-head .num { color: var(--accent); }
  .dark h2 em { color: var(--accent); }
  .dark .lead { color: var(--night-muted); }
  .blueprint::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(to right, rgba(245,245,247,.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(245,245,247,.05) 1px, transparent 1px);
    background-size: 32px 32px;
  }
  .blueprint > .wrap { position: relative; }

  /* ===== AGENTES ===== */
  .agents { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
  .points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--night-line); }
  .points li { padding: 18px 0; border-bottom: 1px solid var(--night-line); color: var(--night-muted); font-size: .98rem; }
  .points strong { color: var(--night-text); display: block; font-weight: 600; margin-bottom: 2px; }
  .console { border: 1px solid var(--night-line); background: var(--night-2); border-radius: 4px; }
  .console-head { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--night-line); color: var(--night-muted); }
  .console-head .live { color: #4ade80; }
  .console-head .live::before { content: '● '; animation: blink 1.4s step-end infinite; }
  @keyframes blink { 50% { opacity: .2; } }
  .agent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--night-line); border-bottom: 1px solid var(--night-line); }
  .agent { background: var(--night-2); padding: 14px; min-height: 84px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
  .agent b { font-size: .84rem; font-weight: 600; line-height: 1.25; }
  .agent small { font-family: var(--mono); font-size: .68rem; color: var(--night-muted); display: flex; align-items: center; gap: 6px; }
  .agent small::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex: none; }
  .agent.amber small::before { background: #facc15; }
  .log { font-family: var(--mono); font-size: .76rem; padding: 14px 16px; height: 168px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; color: var(--night-muted); }
  .log div { animation: logIn .4s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .log .t { color: #6e6e73; margin-right: 8px; }
  .log .ok { color: #4ade80; } .log .warn { color: #facc15; } .log .acc { color: var(--accent); }
  @keyframes logIn { from { opacity: 0; transform: translateY(6px); } }
  .approval { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-top: 1px dashed var(--night-line); font-size: .88rem; }
  .approval button { font-family: var(--mono); font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--accent); background: transparent; color: var(--accent); padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background .25s ease, color .25s ease; }
  .approval button:hover { background: var(--accent); color: #fff; }
  .approval.done { color: #4ade80; }
  .console-note { color: #6e6e73; font-size: .7rem; margin: 12px 0 0; }
  @media (max-width: 960px) { .agents { grid-template-columns: 1fr; } }
  @media (max-width: 520px) { .agent-grid { grid-template-columns: repeat(2, 1fr); } }

  /* ===== ARQUITECTURA ===== */
  .arch { display: grid; max-width: 900px; }
  .layer { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; }
  .layer-label { color: var(--night-muted); text-align: right; }
  .layer-label b { display: block; color: var(--accent); font-weight: 500; }
  .boxes { display: flex; gap: 12px; flex-wrap: wrap; }
  .box { flex: 1 1 220px; border: 1px solid var(--night-line); padding: 16px 18px; background: rgba(17,41,75,.88); transition: border-color .3s ease, transform .3s var(--ease); }
  .box:hover { border-color: var(--accent); transform: translateY(-2px); }
  .box b { display: block; font-size: 1rem; margin-bottom: 2px; }
  .box > span { color: var(--night-muted); font-size: .9rem; }
  .box.core { border-color: rgba(24,24,26,.55); }
  .pipe { display: grid; grid-template-columns: 150px 1fr; gap: 24px; height: 64px; }
  .pipe-line { position: relative; margin-left: 40px; display: flex; align-items: center; gap: 14px; }
  .pipe-line::before {
    content: ''; width: 2px; height: 100%;
    background-image: linear-gradient(to bottom, var(--accent) 50%, transparent 50%);
    background-size: 2px 12px;
    animation: flow 1s linear infinite;
    flex: none;
  }
  .pipe-line span { color: var(--night-muted); }
  @keyframes flow { to { background-position: 0 12px; } }
  .outcomes { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 72px; border-top: 1px solid var(--night-line); }
  .outcome { padding: 22px 22px 0 0; }
  .outcome + .outcome { padding-left: 22px; border-left: 1px solid var(--night-line); }
  .outcome b { display: block; margin-bottom: 6px; }
  .outcome > span { color: var(--night-muted); font-size: .92rem; }
  @media (max-width: 760px) {
    .layer, .pipe { grid-template-columns: 1fr; gap: 8px; }
    .layer-label { text-align: left; }
    .pipe { height: 54px; }
    .pipe > :first-child { display: none; }
    .pipe-line { margin-left: 18px; }
    .outcomes { grid-template-columns: 1fr 1fr; }
    .outcome, .outcome + .outcome { padding: 18px 12px 18px 0; border-left: 0; border-bottom: 1px solid var(--night-line); }
  }

  /* ===== PROYECTOS ===== */
  .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
  .filter { font-family: var(--mono); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; background: transparent; border: 1px solid var(--line); color: var(--ink-2); padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; }
  .filter:hover { border-color: var(--ink); }
  .filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .filter .count { opacity: .55; margin-left: 6px; }
  .index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
  .row { border-bottom: 1px solid var(--line); }
  .row[hidden] { display: none; }
  .row-head {
    width: 100%; background: none; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit;
    display: grid; grid-template-columns: 60px 1fr 200px 120px 40px; gap: 18px; align-items: center;
    padding: 24px 0; position: relative; isolation: isolate;
  }
  .row-head::before { content: ''; position: absolute; inset: 0 -24px; background: var(--paper-2); z-index: -1; transform: scaleY(0); transform-origin: bottom; transition: transform .4s var(--ease); }
  .row-head:hover::before, .row.open .row-head::before { transform: scaleY(1); }
  .row-no { font-family: var(--mono); font-size: .78rem; color: var(--muted); }
  .row-title { font-family: var(--serif); font-size: clamp(1.45rem, 2.6vw, 2.1rem); line-height: 1.1; letter-spacing: -0.015em; transition: transform .4s var(--ease), color .3s ease; }
  .row-head:hover .row-title { transform: translateX(8px); }
  .row.open .row-title { color: var(--accent-text); }
  .row-area { color: var(--muted); font-size: .9rem; }
  .row-icons { display: flex; gap: 8px; justify-content: flex-end; }
  .row-icons img { width: 20px; height: 20px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .3s ease, opacity .3s ease; }
  .row-head:hover .row-icons img, .row.open .row-icons img { filter: none; opacity: 1; }
  .row-plus { width: 30px; height: 30px; border: 1px solid var(--ink); border-radius: 50%; position: relative; justify-self: end; transition: background .3s ease, transform .4s var(--ease); }
  .row-plus::before, .row-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: background .3s ease; }
  .row-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
  .row.open .row-plus { background: var(--ink); transform: rotate(45deg); }
  .row.open .row-plus::before, .row.open .row-plus::after { background: var(--paper); }
  .row-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
  .row.open .row-body { grid-template-rows: 1fr; }
  .row-body > div { overflow: hidden; }
  .row-inner { display: grid; grid-template-columns: 60px 1fr 1fr; gap: 18px; padding: 4px 0 34px; }
  .row-inner > :first-child { grid-column: 2; }
  .row-inner p { margin: 0 0 14px; color: var(--ink-2); }
  .row-inner ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: .95rem; }
  .row-inner ul.cols { columns: 2; column-gap: 32px; }
  .row-inner li { margin-bottom: 6px; break-inside: avoid; }
  .result { border-left: 2px solid var(--accent); padding-left: 14px; font-size: .95rem; }
  .result small { display: block; color: var(--accent-text); margin-bottom: 2px; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .72rem; border: 1px solid var(--line); padding: 4px 9px; border-radius: 999px; color: var(--ink-2); background: var(--paper); }
  .chip img { width: 14px; height: 14px; object-fit: contain; }
  @media (max-width: 900px) {
    .row-head { grid-template-columns: 40px 1fr 34px; }
    .row-area, .row-icons { display: none; }
    .row-inner { grid-template-columns: 1fr; }
    .row-inner > :first-child { grid-column: auto; }
    .row-inner ul.cols { columns: 1; }
  }

  /* ===== EXPERIENCIA ===== */
  .jobs { border-top: 1px solid var(--ink); }
  .job { display: grid; grid-template-columns: 260px 1fr; gap: 48px; padding: 44px 0; border-bottom: 1px solid var(--line); }
  .job-when { position: sticky; top: 100px; align-self: start; }
  .job-when .years { font-family: var(--serif); font-size: 2.6rem; line-height: 1; letter-spacing: -0.02em; display: block; }
  .job-when .years em { color: var(--accent-text); }
  .job-when small { color: var(--muted); display: block; margin-top: 10px; }
  .job h3 { font-size: 1.45rem; margin: 0 0 10px; letter-spacing: -0.015em; }
  .job .summary { color: var(--ink-2); margin: 0 0 26px; max-width: 680px; }
  .job-areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 40px; }
  .job-areas h4 { margin: 0 0 10px; color: var(--accent-text); font-weight: 500; }
  .job ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: .97rem; }
  .job li { margin-bottom: 6px; }
  @media (max-width: 900px) {
    .job { grid-template-columns: 1fr; gap: 18px; }
    .job-when { position: static; }
    .job-areas { grid-template-columns: 1fr; }
  }

  /* ===== STACK ===== */
  .stack { display: grid; gap: 52px; }
  .stack-group { display: grid; grid-template-columns: 220px 1fr; gap: 28px; }
  .stack-group h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.1; }
  .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); padding: 1px 0 0 1px; }
  .tile { background: var(--paper); border: 1px solid var(--line); margin: -1px 0 0 -1px; padding: 20px 10px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: .82rem; color: var(--ink-2); transition: background .3s ease; }
  .tile:hover { background: #fff; }
  .tile img { width: 34px; height: 34px; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .8; transition: filter .35s ease, opacity .35s ease, transform .35s var(--ease); }
  .tile:hover img { filter: none; opacity: 1; transform: scale(1.12); }
  .tile .mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--ink); font-family: var(--mono); font-size: .66rem; font-weight: 500; transition: background .3s ease, color .3s ease, border-color .3s ease; }
  .tile:hover .mark { background: var(--accent); border-color: var(--accent); color: #fff; }
  @media (max-width: 760px) { .stack-group { grid-template-columns: 1fr; gap: 16px; } }

  .facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); margin-top: 90px; }
  .facts > div { padding: 22px 24px 0 0; }
  .facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
  .facts h3 { margin: 0 0 10px; color: var(--muted); font-weight: 500; }
  .facts p { margin: 0 0 4px; }
  @media (max-width: 760px) { .facts { grid-template-columns: 1fr; } .facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 18px; } }

  /* ===== CONTACTO ===== */
  .contact { padding-bottom: 60px; }
  .big-mail {
    display: inline-block; font-family: var(--serif); text-decoration: none;
    font-size: clamp(2.2rem, 7.4vw, 6.4rem); line-height: 1; letter-spacing: -0.03em;
    color: var(--night-text); position: relative; padding-bottom: 8px; margin: 10px 0 60px;
    overflow-wrap: anywhere;
  }
  .big-mail::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(.12); transform-origin: left; transition: transform .7s var(--ease); }
  .big-mail:hover::after { transform: scaleX(1); }
  .big-mail .arr { color: var(--accent); display: inline-block; transition: transform .5s var(--ease); }
  .big-mail:hover .arr { transform: translate(8px, -8px); }
  .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; border-top: 1px solid var(--night-line); padding-top: 40px; }
  .channels { list-style: none; padding: 0; margin: 0; }
  .channels li { border-bottom: 1px solid var(--night-line); }
  .channels a { display: flex; justify-content: space-between; gap: 12px; padding: 18px 0; text-decoration: none; color: var(--night-text); transition: color .25s ease, padding .35s var(--ease); }
  .channels a:hover { color: var(--accent); padding-left: 8px; }
  .channels a span:last-child { color: var(--night-muted); }
  form { display: grid; gap: 22px; }
  label { display: grid; gap: 6px; color: var(--night-muted); }
  input, textarea {
    width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--night-line);
    padding: 10px 0; color: var(--night-text); font: inherit; font-family: var(--sans); font-size: 1.05rem; text-transform: none; letter-spacing: 0; border-radius: 0;
    transition: border-color .25s ease;
  }
  textarea { resize: vertical; }
  input:focus, textarea:focus { outline: none; border-bottom-color: var(--accent); }
  form .btn-solid { background: var(--night-text); color: var(--night); border-color: var(--night-text); justify-self: start; }
  form .btn-solid:hover { color: #fff; }
  #form-status { min-height: 1.4em; margin: 0; color: var(--accent); }
  @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 44px; } }

  footer { background: var(--night); color: var(--night-muted); padding: 30px 0 40px; border-top: 1px solid var(--night-line); }
  footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  footer a { color: var(--night-muted); text-decoration: none; }
  footer a:hover { color: var(--accent); }
  .foot { align-items: center; padding-bottom: 26px; border-bottom: 1px solid var(--night-line); margin-bottom: 22px; }
  .foot-brand { display: flex; align-items: center; gap: 18px; color: var(--night-text); }
  .foot-brand .iso { width: 62px; height: 54px; }
  .foot-name { display: block; font-family: var(--serif); font-size: 1.9rem; line-height: 1; letter-spacing: -0.02em; }
  .foot-brand .mono { color: var(--night-muted); }
  footer nav { display: flex; gap: 22px; flex-wrap: wrap; }

  /* ===== ESCENAS FIJADAS (scrollytelling) =====
     La escena se queda fija mientras el scroll la hace avanzar; la barra inferior marca el progreso. */
  .scrolly { position: relative; height: calc(var(--h, 400) * 1vh); }
  .sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: 68px; display: flex; align-items: center; overflow: hidden; }
  .sticky > .wrap { width: 100%; }
  .meter { height: 2px; background: var(--line); margin-top: 26px; overflow: hidden; }
  .dark .meter { background: var(--night-line); }
  .meter i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }

  /* § 02 dentro de la escena */
  .sticky .stack3d .viz { width: min(100%, calc(100svh - 160px)); justify-self: center; }
  @media (max-width: 900px) {
    .sticky .stack3d { gap: 14px; }
    .sticky .stack3d .viz { width: min(100%, 42svh); }
    .lyr { padding: 10px 0 10px 16px; }
    .lyr::before { top: 10px; bottom: 10px; }
    .lyr .d { display: none; }
    .lyr[aria-pressed="true"] .d { display: block; }
    .lyr b { font-size: 1rem; }
  }

  /* § 03 · recorrido de un cambio */
  .flowpipe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
  .fp-count { color: var(--accent); margin: 0 0 18px; }
  .fp-steps { position: relative; min-height: 230px; }
  .fp-step { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s var(--ease); pointer-events: none; }
  .fp-step.on { opacity: 1; transform: none; }
  .fp-step h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.05; margin: 0 0 14px; letter-spacing: -.02em; }
  .fp-step p { margin: 0; color: var(--night-muted); font-size: 1.02rem; max-width: 460px; }
  .fp-rules { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .fp-rules li { border: 1px solid var(--night-line); border-radius: 999px; padding: 5px 11px; color: var(--night-muted); font-size: .66rem; }
  .st-wrap { position: relative; padding: 6px 16px; }
  .stations { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
  .station { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--night-line); transition: opacity .3s ease; }
  .station:last-child { border-bottom: 0; }
  .st-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--night-muted); transition: background .3s ease, border-color .3s ease; }
  .st-name b { font-weight: 600; font-size: .95rem; margin-right: 8px; }
  .st-name small { color: var(--night-muted); font-family: var(--mono); font-size: .7rem; }
  .st-state { font-size: .66rem; color: var(--night-muted); }
  .station.pending { opacity: .5; }
  .st-pic { position: relative; width: 40px; height: 40px; flex: none; }
  .st-pic img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; background: #1c1c1e; box-shadow: 0 0 0 2px var(--ac); transition: filter .4s ease; }
  .station.pending .st-pic img, .station.blocked .st-pic img { filter: grayscale(1) brightness(.8); }
  .st-pic .st-dot { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border: 2px solid var(--night-2); background: var(--night-muted); }
  .team { margin-top: 22px; }
  .team-avs { display: flex; }
  .team-avs img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #1c1c1e; box-shadow: 0 0 0 2px var(--night), 0 0 0 3.5px var(--ac); margin-right: -6px; transition: transform .25s var(--ease); }
  .team-avs img:hover { transform: translateY(-4px); position: relative; z-index: 1; }
  .team-cap { margin: 12px 0 0; color: var(--night-muted); font-size: .66rem; line-height: 1.6; text-transform: none; letter-spacing: .02em; max-width: 440px; }
  .station.run .st-dot { background: #facc15; border-color: #facc15; }
  .station.run .st-state { color: #facc15; }
  .station.ok .st-dot, .station.approved .st-dot, .station.done .st-dot { background: #4ade80; border-color: #4ade80; }
  .station.ok .st-state, .station.approved .st-state, .station.done .st-state { color: #4ade80; }
  .station.wait .st-dot { background: var(--accent); border-color: var(--accent); animation: gatePing 1.4s infinite; }
  .station.wait .st-state { color: var(--accent); }
  .station.blocked { opacity: .45; }
  .station.blocked .st-state { color: #f87171; }
  @keyframes gatePing { 0% { box-shadow: 0 0 0 0 rgba(24,24,26,.6); } 70% { box-shadow: 0 0 0 9px rgba(24,24,26,0); } 100% { box-shadow: 0 0 0 0 rgba(24,24,26,0); } }
  .token { position: absolute; left: 16px; right: 16px; top: 6px; height: 46px; border: 1px solid var(--accent); background: rgba(24,24,26,.07); transition: top .5s var(--ease), height .5s var(--ease); pointer-events: none; }
  .gate { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px dashed var(--night-line); font-size: .88rem; visibility: hidden; color: #fde68a; }
  .gate.show { visibility: visible; }
  .gate.done { color: #4ade80; }
  .gate button { font-family: var(--mono); font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--accent); background: var(--accent); color: #fff; padding: 8px 16px; border-radius: 999px; cursor: pointer; animation: gatePing 1.4s infinite; }
  .gate button:hover { background: #fff; color: var(--night); border-color: #fff; }
  .flowpipe .log { height: 150px; border-top: 1px solid var(--night-line); }
  @media (max-width: 900px) {
    .flowpipe { grid-template-columns: 1fr; gap: 16px; }
    .fp-count { margin-bottom: 8px; }
    .fp-steps { min-height: 150px; }
    .fp-step h3 { font-size: 1.6rem; margin-bottom: 8px; }
    .fp-step p { font-size: .9rem; }
    .fp-rules, .team, .flowpipe .log, #agents-scrolly .console-note { display: none; }
    .st-pic, .st-pic img { width: 32px; height: 32px; }
    .station { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 5px 6px; }
    .station { padding: 7px 6px; }
    .st-name small { display: none; }
  }

  /* § 04 · validación */
  .arch .layer, .arch .pipe { opacity: .15; transform: translateY(10px); transition: opacity .7s ease, transform .7s var(--ease); }
  .arch .lit { opacity: 1; transform: none; }
  .arch .pipe:not(.lit) .pipe-line::before { animation-play-state: paused; }
  .cells { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
  .cell { width: 15px; height: 15px; border: 1px solid var(--night-line); display: grid; place-items: center; font-size: 9px; line-height: 1; color: #f87171; transition: background .3s ease, border-color .3s ease; }
  .cell.ok { background: var(--accent); border-color: var(--accent); }
  .cell.ko { border-color: #f87171; }
  .cells-legend { margin: 10px 0 0; color: var(--night-muted); font-size: .66rem; }
  .cells-legend .ok-t { color: var(--accent); }
  .cells-legend .ko-t { color: #f87171; }

  /* § 05 · sistema que se despieza */
  .sys { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 48px; align-items: center; }
  .sys-viz { position: relative; overflow: hidden; width: min(100%, calc(100svh - 120px)); aspect-ratio: 1 / 1; justify-self: center; border: 1px solid var(--line); background: radial-gradient(circle at 50% 50%, #fafaf9 0%, var(--paper) 72%); }
  .sys-viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .sys-viz.no-3d { display: none; }
  .sys-count { color: var(--accent-text); margin: 0 0 18px; }
  .sys-steps { position: relative; min-height: 390px; }
  .sys-step { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s var(--ease); pointer-events: none; }
  .sys-step.on { opacity: 1; transform: none; pointer-events: auto; }
  .sys-step .kicker { color: var(--muted); margin: 0 0 10px; }
  .sys-step h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 14px; }
  .sys-step p { color: var(--ink-2); margin: 0 0 18px; max-width: 470px; }
  @media (max-width: 900px) {
    .sys { grid-template-columns: 1fr; gap: 14px; }
    .sys-viz { width: min(100%, 44svh); }
    .sys-count { margin-bottom: 8px; }
    .sys-steps { min-height: 210px; }
    .sys-step h3 { font-size: 1.6rem; margin-bottom: 8px; }
    .sys-step p { font-size: .92rem; margin-bottom: 10px; }
  }

  /* § 06 · gráfico git */
  .gitgraph { margin: 0 0 34px; overflow-x: auto; }
  .gitgraph svg { display: block; width: 100%; min-width: 680px; height: auto; overflow: visible; }
  .gg-axis { stroke: var(--line); stroke-width: 1; }
  .gg-y { font-family: var(--mono); font-size: 11px; fill: var(--muted); }
  .gg-path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .gg-main { stroke: var(--ink); }
  .gg-branch { stroke: var(--accent); }
  .gg-c { opacity: 0; transition: opacity .4s ease; }
  .gg-c.on { opacity: 1; }
  .gg-c circle { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
  .gg-c.acc circle { stroke: var(--accent); }
  .gg-c.end circle { fill: var(--accent); stroke: var(--accent); }
  .gg-t { font-family: var(--mono); font-size: 11.5px; fill: var(--ink-2); }
  .gg-c.acc .gg-t, .gg-c.end .gg-t { fill: var(--accent-text); }

  /* § 07 · el stack se ordena */
  #stack, #inicio { overflow-x: clip; }
  .tile { transform: translate(calc(var(--dx, 0px) * var(--q, 0)), calc(var(--dy, 0px) * var(--q, 0))) rotate(calc(var(--r, 0deg) * var(--q, 0))); opacity: calc(1 - var(--q, 0) * .9); }

  /* § 08 · entrega */
  .mail-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin: 10px 0 60px; }
  .mail-row .big-mail { margin: 0; }
  .deliver { margin: 0; display: grid; justify-items: center; gap: 10px; }
  .deliver svg { width: clamp(96px, 13vw, 170px); height: auto; overflow: visible; }
  .dl-base { fill: none; stroke: var(--night-line); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
  .dl-line { fill: none; stroke: var(--night-text); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .dl-node { fill: var(--night-line); transform-box: fill-box; transform-origin: center; transition: fill .3s ease; }
  .deliver.done .dl-node { fill: var(--accent); animation: isoPing .6s var(--ease); }
  .dl-packet { fill: var(--accent); opacity: 0; }
  .dl-dot { fill: var(--night); stroke: var(--night-line); stroke-width: 4; transition: stroke .3s ease; }
  .deliver.done .dl-dot { stroke: var(--night-text); }
  .deliver.moving .dl-packet { opacity: 1; }
  .deliver figcaption { color: var(--night-muted); }
  .deliver .dl-ok { display: none; color: var(--accent); }
  .deliver.done .dl-ok { display: inline; }
  .deliver.done .dl-wait { display: none; }

  /* § 05 · seguridad por capas */
  .sec-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .sec-viz { position: relative; }
  #sec-svg { display: block; width: 100%; max-width: 560px; margin: 0 auto; overflow: visible; }
  .ring .r { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: var(--o, 1); transition: stroke .35s ease, stroke-width .35s ease; }
  .ring.passed .r { stroke: var(--ink); }
  .ring.on .r { stroke: var(--accent); stroke-width: 3; }
  .ring .r-hit { fill: none; stroke: transparent; stroke-width: 26; cursor: pointer; pointer-events: stroke; }
  .ring:last-of-type .r-hit { fill: transparent; pointer-events: all; }
  .r-t { font-family: var(--mono); font-size: 8.4px; letter-spacing: .06em; text-transform: uppercase; fill: var(--muted); pointer-events: none; }
  .r-t, .flag { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
  .ring.on .r-t { fill: var(--accent-text); }
  .tick { opacity: 0; transition: opacity .3s ease; pointer-events: none; }
  .ring.passed .tick { opacity: 1; }
  .tick circle { fill: var(--paper); stroke: #1f8a4c; stroke-width: 1.4; }
  .tick path { fill: none; stroke: #1f8a4c; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .core { fill: var(--ink); }
  .sec-grid.arrived .core { fill: var(--accent); }
  #sec-packet { transition: opacity .3s ease; }
  #sec-packet .dot { fill: var(--accent); }
  #sec-packet .halo { fill: rgba(24, 24, 26, .16); }
  .flag { font-family: var(--mono); font-size: 9px; fill: #1f8a4c; transition: opacity .3s ease; }
  .sec-arrive { margin: 16px 0 0; text-align: center; color: #1f8a4c; opacity: 0; transition: opacity .5s ease; }
  .sec-grid.arrived .sec-arrive { opacity: 1; }
  .sec-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
  .sec-tab { font: inherit; font-size: .82rem; display: inline-flex; gap: 8px; align-items: center; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; }
  .sec-tab .mono { font-size: .66rem; color: var(--muted); }
  .sec-tab:hover { border-color: var(--ink); }
  .sec-tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .sec-tab[aria-pressed="true"] .mono { color: var(--accent); }
  .sec-card { border-top: 1px solid var(--ink); padding-top: 22px; min-height: 380px; }
  .sec-card.swap { animation: cardIn .45s var(--ease); }
  @keyframes cardIn { from { opacity: 0; transform: translateY(10px); } }
  .sec-n { color: var(--accent-text); margin: 0 0 10px; }
  .sec-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 8px; }
  .sec-what { color: var(--muted); margin: 0 0 16px; }
  .sec-card ul { margin: 0 0 18px; padding-left: 18px; color: var(--ink-2); font-size: .97rem; }
  .sec-card li { margin-bottom: 7px; }
  .sec-ver { border-left: 2px solid #1f8a4c; padding-left: 14px; margin: 0; font-size: .95rem; color: var(--ink-2); }
  .sec-ver .mono { display: block; color: #1f8a4c; margin-bottom: 3px; }
  .sec-web { margin-top: 64px; border-top: 1px solid var(--ink); padding-top: 20px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; }
  .sec-web-t { color: var(--accent-text); margin: 0; }
  .sec-web ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 28px; }
  .sec-web li { position: relative; padding-left: 22px; font-size: .95rem; color: var(--ink-2); }
  .sec-web li::before { content: '✓'; position: absolute; left: 0; color: #1f8a4c; font-family: var(--mono); }
  @media (max-width: 900px) {
    .sec-grid { grid-template-columns: 1fr; gap: 28px; }
    #sec-svg { max-width: 380px; }
    .sec-card { min-height: 0; }
    .sec-web { grid-template-columns: 1fr; gap: 14px; }
  }

  /* § 06 · diagrama isométrico del sistema (planos HTML en 3D CSS, texto y logos nítidos) */
  .sys-viz { background: radial-gradient(circle at 50% 45%, #ffffff 0%, var(--paper) 75%); }
  .iso-stage { position: absolute; left: 50%; top: 50%; width: 700px; height: 700px; margin: -350px 0 0 -350px; transform: scale(var(--s, 1)); perspective: 3200px; }
  .isom { position: absolute; left: 120px; top: 318px; width: 460px; height: 300px; transform-style: preserve-3d; transform: scale(1.04) rotateX(52deg) rotateZ(var(--rz, -32deg)); }
  .isom > * { position: absolute; }
  #sys-labels { display: none; }
  .ly { inset: 0; transform: translateZ(var(--z, 0px)); transform-style: preserve-3d; background: #ffffff; border: 1px solid #bdbdc0; border-radius: 6px; padding: 10px 12px; font-family: var(--sans); color: var(--ink); transition: opacity .45s ease, box-shadow .45s ease, border-color .45s ease; }
  .ly::before { content: ''; position: absolute; inset: -1px; border-radius: 6px; background: #d9dfe8; transform: translateZ(-7px); }
  .ly > * { position: relative; }
  .ly img { width: 14px; height: 14px; object-fit: contain; vertical-align: middle; }
  .ly-h { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  .ly-h span { margin-left: 3px; }
  .tr { transition: box-shadow .3s ease, background .3s ease, color .3s ease; }

  /* frontend */
  .f-desk { position: absolute; left: 12px; top: 30px; width: 272px; height: 256px; border: 1px solid #d2d2d0; border-radius: 6px; background: #fff; overflow: hidden; }
  .f-bar { display: flex; align-items: center; gap: 3px; height: 16px; padding: 0 6px; background: #ededeb; font-family: var(--mono); font-size: 7px; color: var(--muted); }
  .f-bar i { width: 5px; height: 5px; border-radius: 50%; background: #d2d2d0; }
  .f-bar span { margin-left: 8px; background: #fff; padding: 1px 8px; border-radius: 3px; }
  .f-search { margin: 7px 8px 5px; border: 1px solid #e2e2e0; border-radius: 4px; padding: 3px 6px; font-size: 7.5px; color: #a29d93; }
  .f-chips { display: flex; gap: 4px; align-items: center; margin: 0 8px 6px; font-size: 6.5px; }
  .f-chips b { font-weight: 500; border: 1px solid #e2e2e0; border-radius: 99px; padding: 1px 6px; }
  .f-chips b.on { background: var(--ink); color: #fff; border-color: var(--ink); }
  .f-chips span { margin-left: auto; color: var(--accent-text); font-family: var(--mono); font-size: 6px; text-transform: uppercase; }
  .f-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 0 8px; }
  .f-card { border: 1px solid #e1e6ed; border-radius: 4px; padding: 3px; display: grid; gap: 1px; font-size: 6.5px; }
  .f-card .ph { height: 34px; border-radius: 2px; background: linear-gradient(135deg, #e6ebf1, #d8d0bf); }
  .f-card .ph1 { background: linear-gradient(135deg, #f1d9c9, #e3b79c); }
  .f-card .ph3 { background: linear-gradient(135deg, #d6e1e0, #b6c9c7); }
  .f-card em { font-style: normal; font-family: var(--mono); color: var(--muted); font-size: 5.5px; }
  .f-card strong { font-size: 7.5px; }
  .f-card b { justify-self: end; font-size: 6px; background: #ededeb; border-radius: 3px; padding: 1px 5px; }
  .f-card b.tr { background: var(--ink); color: #fff; }
  .f-phone { position: absolute; left: 298px; top: 30px; width: 74px; height: 146px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; padding: 8px 6px 6px; font-size: 6.5px; }
  .f-notch { position: absolute; left: 50%; top: 3px; width: 20px; height: 3px; margin-left: -10px; border-radius: 3px; background: var(--ink); }
  .f-phone p { margin: 2px 0 5px; font-weight: 600; }
  .f-phone i { display: flex; justify-content: space-between; border-bottom: 1px solid #ececea; padding: 4px 0; }
  .f-phone i span { height: 3px; width: 26px; background: #d5dce6; border-radius: 2px; }
  .f-phone i span + span { width: 12px; }
  .f-phone em { display: block; margin-top: 7px; font-style: normal; font-family: var(--mono); font-size: 5.5px; color: #8a5a00; background: #fbf0d9; border-radius: 3px; padding: 2px 3px; text-align: center; }
  .f-2fa { position: absolute; left: 298px; top: 186px; width: 148px; height: 100px; border: 1px solid #d2d2d0; border-radius: 6px; background: #fff; padding: 8px; font-size: 7px; }
  .f-2fa p { margin: 0 0 8px; font-weight: 600; }
  .f-2fa div { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
  .f-2fa b { height: 18px; border: 1px solid #d2d2d0; border-radius: 3px; display: grid; place-items: center; font-family: var(--mono); font-size: 8px; }

  /* api */
  .a-mw { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin-bottom: 10px; font-family: var(--mono); font-size: 7.5px; }
  .a-mw i { font-style: normal; color: var(--muted); }
  .mw { font-weight: 500; border: 1px solid #d2d2d0; border-radius: 4px; padding: 3px 6px; background: #fff; transition: background .3s ease, color .3s ease, border-color .3s ease; }
  .a-eps { border: 1px solid #e2e2e0; border-radius: 6px; overflow: hidden; background: #fff; }
  .ep { display: grid; grid-template-columns: 38px 1fr 26px; gap: 8px; align-items: center; padding: 5px 8px; border-bottom: 1px solid #eef1f5; font-family: var(--mono); font-size: 8px; }
  .ep:last-child { border-bottom: 0; }
  .ep b { font-size: 6.5px; text-align: center; border-radius: 3px; padding: 2px 0; color: #fff; }
  .m-get { background: #2f7d5b; } .m-post { background: #2c5f9e; }
  .ep em { font-style: normal; color: #2f7d5b; text-align: right; }
  .a-ft { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--mono); font-size: 7px; color: var(--muted); }

  /* datos */
  .d-row { display: flex; align-items: stretch; gap: 4px; }
  .d-db { flex: 1 1 0; border: 1px solid #d2d2d0; border-radius: 6px; background: #fff; padding: 8px 7px; display: grid; justify-items: center; gap: 2px; text-align: center; font-size: 8.5px; }
  .d-db.app { border-color: var(--ink); }
  .d-cyl { width: 38px; height: 30px; border: 1.5px solid #8e8e93; border-radius: 50% / 22%; display: grid; place-items: center; background: #f3f5f8; }
  .d-cyl img { width: 18px; height: 18px; }
  .d-db small { font-family: var(--mono); font-size: 6px; color: var(--muted); }
  .d-t { display: grid; gap: 2px; width: 100%; margin-top: 4px; }
  .d-t i { font-style: normal; font-family: var(--mono); font-size: 6.5px; border: 1px solid #ececea; border-radius: 3px; padding: 2px 0; background: #f9fafc; }
  .d-ok, .d-ins { margin: 4px 0 0; font-family: var(--mono); font-size: 6px; color: #1f8a4c; }
  .d-ins { color: #fff; background: var(--ink); border-radius: 3px; padding: 2px 5px; }
  .d-arr { width: 30px; display: grid; place-items: center; position: relative; }
  .d-arr::before { content: ''; position: absolute; left: 2px; right: 2px; top: 50%; border-top: 1.5px dashed #8e8e93; }
  .d-arr::after { content: ''; position: absolute; right: 0; top: calc(50% - 3.5px); border: 4px solid transparent; border-left-color: #8e8e93; }
  .d-arr span { position: relative; top: -10px; font-family: var(--mono); font-size: 5.5px; color: var(--muted); background: #ffffff; padding: 0 1px; }
  .d-back { margin-top: 8px; border: 1px dashed #bdbdc0; border-radius: 5px; padding: 4px; text-align: center; font-family: var(--mono); font-size: 6.5px; color: var(--muted); }

  /* infraestructura */
  .i-row { display: flex; gap: 6px; align-items: stretch; }
  .i-edge, .i-side > div, .ct { border: 1px solid #d2d2d0; border-radius: 6px; background: #fff; display: grid; justify-items: center; align-content: center; gap: 2px; text-align: center; font-size: 8px; padding: 6px 4px; }
  .i-edge { width: 74px; }
  .i-edge img, .ct img, .i-side img { width: 18px; height: 18px; }
  .i-row small { font-family: var(--mono); font-size: 5.5px; color: var(--muted); }
  .i-arr { width: 14px; position: relative; }
  .i-arr::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid #8e8e93; }
  .i-vm { flex: 1; border: 1.5px solid var(--ink); border-radius: 7px; padding: 6px; background: #f6f8fa; }
  .i-vmh { display: flex; align-items: center; gap: 5px; font-size: 8px; margin-bottom: 6px; }
  .i-vmh img { width: 22px; height: 14px; }
  .i-vmh small { margin-left: auto; }
  .i-ctr { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .ct { padding: 8px 4px; }
  .i-side { width: 86px; display: grid; gap: 5px; }
  .i-side > div { padding: 4px; }
  .i-dot { width: 10px; height: 10px; border-radius: 50%; background: #1f8a4c; box-shadow: 0 0 0 3px rgba(31,138,76,.2); }

  /* envolvente de seguridad, postes, conectores y paquetes */
  .sec-plane { inset: -20px; border: 1.5px dashed #bdbdc0; border-radius: 10px; transition: border-color .45s ease; pointer-events: none; }
  .sec-plane.bottom { transform: translateZ(-30px); }
  .sec-chips { position: absolute; left: 10px; right: 10px; top: -8px; display: flex; gap: 5px; flex-wrap: wrap; opacity: 0; transition: opacity .45s ease; }
  .sec-chips b { font-family: var(--mono); font-size: 7px; font-weight: 500; background: var(--accent); color: #fff; border-radius: 99px; padding: 2px 7px; }
  .post, .link { width: 0; border-left: 1.5px dashed #bdbdc0; transform-origin: 0 0; transition: border-color .45s ease; }
  .link { border-left: 1.5px solid rgba(0,0,0,.35); }
  .pk { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(24,24,26,.18); }
  .pk.up { background: #1f8a4c; box-shadow: 0 0 0 3px rgba(31,138,76,.18); }

  /* resaltado por paso */
  .iso-stage[data-on="front"] .ly-front, .iso-stage[data-on="api"] .ly-api,
  .iso-stage[data-on="data"] .ly-data, .iso-stage[data-on="infra"] .ly-infra { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
  .iso-stage[data-on="sec"] .sec-plane, .iso-stage[data-on="sec"] .post { border-color: var(--accent); }
  .iso-stage[data-on="sec"] .sec-chips { opacity: 1; }
  .iso-stage[data-on="front"] #tr-front { background: var(--accent); animation: trPulse 1.4s infinite; }
  .iso-stage[data-on="api"] #tr-api { background: #f2f2f0; box-shadow: inset 3px 0 0 var(--accent); }
  .iso-stage[data-on="api"] .mw { animation: mwOn 3.2s var(--ease) infinite; animation-delay: calc(var(--k) * .35s); }
  .iso-stage[data-on="data"] #tr-data { background: var(--accent); animation: trPulse 1.4s infinite; }
  .iso-stage[data-on="data"] .d-arr::before { animation: dash .8s linear infinite; border-top-color: var(--accent); }
  .iso-stage[data-on="infra"] #tr-infra, .iso-stage[data-on="infra"] #ct-caddy { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
  @keyframes trPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(24,24,26,.5); } 50% { box-shadow: 0 0 0 4px rgba(24,24,26,0); } }
  @keyframes mwOn { 0%, 8% { background: #fff; color: var(--ink); border-color: #d2d2d0; } 14%, 70% { background: var(--ink); color: #fff; border-color: var(--ink); } 100% { background: #fff; color: var(--ink); border-color: #d2d2d0; } }
  @keyframes dash { from { border-top-style: dashed; transform: translateX(0); } to { transform: translateX(4px); } }
  .sys-flow { margin: -6px 0 16px; color: var(--accent-text); font-size: .72rem; text-transform: none; letter-spacing: .02em; }

  /* § 06 · v2: una capa protagonista cada vez. La capa del paso aparece de frente y grande; las ya
     explicadas encajan en una pila pequeña; al final la pila completa vuelve al centro con su envolvente. */
  .isom { left: 0; top: 0; width: 700px; height: 700px; transform: none; transform-style: flat; }
  .isom > .ly { inset: auto; left: 120px; top: 200px; width: 460px; height: 300px; transform: var(--tf); opacity: var(--op, 1); z-index: var(--zi, 1);
    transition: transform .95s cubic-bezier(.2, .8, .15, 1), opacity .6s ease, box-shadow .45s ease, border-color .45s ease; will-change: transform; }
  .isom > .ly.is-big { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35), 0 0 0 1.5px var(--accent); border-color: var(--accent); }
  .isom > .ly.is-mini { pointer-events: none; }
  .iso-stage[data-on] .ly { opacity: var(--op, 1); }
  .envl { left: 0; top: 0; width: 0; height: 0; border: 1.5px dashed var(--accent); border-radius: 18px; opacity: 0; transition: opacity .6s ease; pointer-events: none; z-index: 6; }
  .envl.show { opacity: 1; }
  .envl .sec-chips { position: absolute; left: 14px; right: 14px; top: -11px; opacity: 1; display: flex; flex-wrap: wrap; gap: 5px; }
  .envl .sec-chips b { font-size: 10px; padding: 3px 9px; }
  .mini-cap { left: 482px; top: 668px; width: 210px; margin: 0; text-align: center; color: var(--muted); font-size: 11px; opacity: 0; transition: opacity .5s ease; }
  .mini-cap.show { opacity: 1; }
  .mini-cap b { color: var(--accent-text); font-weight: 500; }
  .isom .pk { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; z-index: 7; opacity: 0; transition: opacity .4s ease; }
  .isom .pk.show { opacity: 1; }
  /* En el paso final todo el recorrido del pedido queda marcado */
  .iso-stage[data-on="all"] #tr-front, .iso-stage[data-on="all"] #tr-data { background: var(--accent); }
  .iso-stage[data-on="all"] #tr-api { background: #f2f2f0; box-shadow: inset 3px 0 0 var(--accent); }
  .iso-stage[data-on="all"] #tr-infra { border-color: var(--accent); }
  .iso-stage[data-on="front"] #tr-front { animation: none; }

  @media (max-width: 900px) {
    .sys-viz .viz-hint { display: none; }
    .sys-step .sys-flow { font-size: .62rem; margin-bottom: 10px; }
    .sys-steps { min-height: 290px; }
    .mini-cap { left: 440px; width: 250px; font-size: 15px; }
  }

  /* § 04 · decisiones de arquitectura (ADR) */
  .adr-tag { color: var(--accent); margin: -28px 0 26px; }
  .adrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1px; margin-top: 72px; background: var(--night-line); border: 1px solid var(--night-line); }
  .adr { background: var(--night); padding: 26px 26px 28px; transition: background .3s ease; }
  .adr:hover { background: var(--night-2); }
  .adr-n { color: var(--accent); margin: 0 0 10px; }
  .adr h3 { font-family: var(--serif); font-weight: 400; font-size: 1.55rem; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 16px; }
  .adr dl { margin: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 14px; }
  .adr dt { color: var(--night-muted); font-size: .66rem; padding-top: 3px; }
  .adr dd { margin: 0; color: var(--night-text); font-size: .93rem; line-height: 1.5; }
  .adr dt:nth-of-type(3), .adr dt:nth-of-type(3) + dd { color: #fde68a; }
  @media (max-width: 560px) { .adr dl { grid-template-columns: 1fr; gap: 2px; } .adr dd { margin-bottom: 8px; } }

  /* § 06 · tipos de sistemas */
  #filters { display: none; }
  .kinds-head { margin: 90px 0 26px; border-top: 1px solid var(--ink); padding-top: 22px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 6px 28px; }
  .kinds-k { color: var(--accent-text); margin: 0; grid-row: span 2; }
  .kinds-head h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0; letter-spacing: -.02em; }
  .kinds-head p:last-child { margin: 0; color: var(--muted); max-width: 620px; }
  @media (max-width: 760px) { .kinds-head { grid-template-columns: 1fr; } .kinds-k { grid-row: auto; } }
  .i-ico { width: 16px; height: 16px; border-radius: 50%; border: 1.5px dashed #8e8e93; display: inline-block; }

  /* ===== INTRO (4 s, una vez por sesión) ===== */
  .intro { display: none; position: fixed; inset: 0; z-index: 300; --veil: 1; background: rgba(244, 241, 234, var(--veil)); transition: opacity .26s ease; }
  html.intro-on .intro { display: block; }
  html.intro-on body { overflow: hidden; }
  .intro.leaving { opacity: 0; }
  .intro::before {
    content: ''; position: absolute; inset: 0; opacity: calc(var(--veil) * .9);
    background-image: linear-gradient(to right, rgba(0,0,0,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,.06) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 65%); -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 65%);
  }
  .intro-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  #intro-lines line { stroke: #bdbdc0; stroke-width: 1; }
  .intro-w { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .intro-node { fill: var(--accent); }
  .intro-chips .ic { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-family: var(--mono); font-size: .74rem; white-space: nowrap; color: var(--ink-2); opacity: 0; will-change: transform, opacity; }
  .intro-chips .ic b { font-weight: 500; }
  .intro-chips .ic.area { border-color: var(--accent); color: var(--accent-text); background: #f5f5f3; }
  .intro-chips .ic img { width: 15px; height: 15px; object-fit: contain; }
  .intro-name { position: absolute; left: 0; right: 0; top: calc(50% + min(14vw, 19vh) + 6px); margin: 0; text-align: center; opacity: 0; }
  .intro-name b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.02em; line-height: 1; }
  .intro-name span { display: block; margin-top: 8px; font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .intro-skip { position: absolute; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; color: var(--muted); cursor: pointer; opacity: 0; }
  .intro-skip:hover { border-color: var(--ink); color: var(--ink); }
  /* Mientras dura la intro, la portada espera: su animación empieza cuando el velo se aparta */
  html.intro-on .name .ch, html.intro-on .iso-line, html.intro-on .iso-node { animation-play-state: paused; }
  html.intro-on #brand .iso { visibility: hidden; }

  /* Portada · fases del ciclo */
  .phases { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -34px 0 48px; text-transform: none; letter-spacing: .02em; font-size: .78rem; }
  .ph-k { color: var(--accent-text); margin-right: 6px; text-transform: uppercase; letter-spacing: .06em; }
  .phases i { font-style: normal; color: var(--line); }
  .phases b { font-weight: 500; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); background: transparent; animation: phOn .5s var(--ease) forwards; animation-delay: calc(1.2s + var(--k) * .22s); }
  @keyframes phOn { to { background: var(--ink); color: var(--paper); border-color: var(--ink); } }
  html.intro-on .phases b { animation-play-state: paused; }
  @media (max-width: 760px) {
    .stats { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
    .stat:nth-child(odd) { padding-left: 0; }
    .stat:nth-child(2) { border-right: 0; }
    .phases { margin: -30px 0 40px; font-size: .7rem; }
  }

  /* § 02 · seis roles, una persona */
  .roles-scene { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
  .roles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
  .role-card { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding: 12px 0 12px 14px; border-bottom: 1px solid var(--line); position: relative; opacity: .42; transition: opacity .35s ease, background .35s ease; }
  .role-card::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
  .role-card.on { opacity: 1; background: var(--paper-2); }
  .role-card.on::before { transform: scaleY(1); }
  .role-card.done { opacity: .78; }
  .rc-n { width: 32px; height: 32px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-size: .7rem; margin-top: 2px; transition: background .3s ease, color .3s ease, border-color .3s ease; }
  .role-card.on .rc-n { background: var(--accent); border-color: var(--accent); color: #fff; }
  .role-card.done .rc-n { background: var(--ink); color: var(--paper); }
  .rc-k { margin: 0; color: var(--accent-text); font-size: .68rem; }
  .role-card h3 { margin: 2px 0 0; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.1; letter-spacing: -.01em; }
  .rc-d, .rc-o { margin: 0; display: none; }
  .role-card.on .rc-d { display: block; margin-top: 6px; color: var(--ink-2); font-size: .95rem; }
  .role-card.on .rc-o { display: block; margin-top: 6px; color: #1f8a4c; font-size: .7rem; text-transform: none; letter-spacing: .02em; }
  .hub-wrap { display: grid; justify-items: center; gap: 14px; }
  .hub { width: min(100%, 400px, 52svh); height: auto; overflow: visible; }
  .arc-bg { fill: none; stroke: var(--line); stroke-width: 10; stroke-linecap: round; }
  .arc { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease) .45s; }
  .arc.done { stroke-dashoffset: 0; }
  .arc-t { font-family: var(--mono); font-size: 9px; fill: var(--muted); }
  .hub-w { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
  .hub-node { fill: var(--line); transform-box: fill-box; transform-origin: center; transition: fill .4s ease; }
  .hub.full .hub-node { fill: var(--accent); animation: isoPing .7s var(--ease); }
  .hub-cap { margin: 0; color: var(--muted); }
  .hub-cap b { color: var(--accent-text); font-weight: 500; }
  .hub.full + .hub-cap span { color: var(--ink); }
  .fly-dot { position: fixed; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); z-index: 150; pointer-events: none; box-shadow: 0 0 0 4px rgba(24,24,26,.18); }
  .bens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); margin-top: 70px; }
  .ben { padding: 20px 22px 0 0; }
  .ben + .ben { padding-left: 22px; border-left: 1px solid var(--line); }
  .ben b { display: block; font-size: 1.05rem; margin-bottom: 6px; }
  .ben span { color: var(--muted); font-size: .95rem; }
  .bus { margin-top: 34px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; border: 1px dashed var(--line); padding: 18px 22px; border-radius: 4px; }
  .bus p { margin: 0; }
  .bus-k { color: var(--accent-text); }
  .mx-wrap { margin-top: 70px; }
  .mx-top { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--ink); padding-top: 16px; margin-bottom: 18px; }
  .mx-k { color: var(--accent-text); margin: 0; }
  .mx-n { margin: 0; color: var(--muted); }
  .mx-n b { color: var(--ink); font-weight: 500; }
  .mx { display: grid; grid-template-columns: 150px repeat(4, minmax(0, 1fr)); gap: 6px; }
  .mx-h { color: var(--muted); font-size: .7rem; padding: 0 4px 4px; }
  .mx-r { display: flex; align-items: center; font-weight: 600; font-size: .95rem; }
  .mx-c { border: 1px solid var(--line); border-radius: 4px; padding: 12px; min-height: 64px; display: grid; align-content: center; gap: 4px; font-size: .86rem; color: var(--muted); background: transparent; transition: background .4s ease, border-color .4s ease, color .4s ease; }
  .mx-c i { font-style: normal; font-family: var(--mono); font-size: .7rem; color: transparent; transition: color .4s ease; }
  .mx-c.on { background: #eef3fe; border-color: rgba(24, 24, 26, .5); color: var(--ink-2); }
  .mx-c.on i { color: var(--accent-text); }
  @media (max-width: 900px) {
    .roles-scene { grid-template-columns: 1fr; gap: 14px; }
    .hub-wrap { order: -1; }
    .hub { width: min(60vw, 30svh); }
    .role-card { padding: 7px 0 7px 12px; }
    .role-card h3 { font-size: 1.1rem; }
    .role-card.on .rc-d { font-size: .85rem; }
    .bens { grid-template-columns: 1fr; }
    .ben + .ben { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 16px; }
    .bus { grid-template-columns: 1fr; gap: 8px; }
    .mx { grid-template-columns: 1fr 1fr; }
    .mx-h { display: none; }
    .mx-r { grid-column: 1 / -1; margin-top: 10px; }
    .mx-c { min-height: 0; padding: 10px; }
  }
  .intro-chips .ic.ph { border-color: var(--ink); color: var(--ink); background: #fff; }

  /* § 02 compacta: título y escena en la misma pantalla */
  #ciclo { padding-top: 0; }
  #ciclo .sticky { align-items: center; }
  .roles-left .sec-head { margin-bottom: 14px; }
  #ciclo h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 10px; }
  #ciclo .lead { font-size: 1rem; margin: 0 0 20px; max-width: 620px; }
  #ciclo .role-card { padding-top: 9px; padding-bottom: 9px; }
  #ciclo .role-card h3 { font-size: 1.3rem; }
  @media (max-height: 820px) { #ciclo .lead { display: none; } }
  @media (max-width: 900px) {
    #ciclo .lead { display: none; }
    #ciclo h2 { font-size: 1.75rem; }
    .roles-left .sec-head { margin-bottom: 8px; }
    .hub { width: min(48vw, 24svh); }
  }

  /* § 02 · espacio de trabajo «de la idea a producción» */
  .roles-scene { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 44px; }
  .ws-wrap { display: grid; gap: 10px; }
  .ws { border: 1px solid var(--ink); border-radius: 8px; background: #ffffff; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(0,0,0,.35); }
  .ws-bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
  .ws-bar > i { width: 8px; height: 8px; border-radius: 50%; background: #d2d2d0; }
  .ws-t { margin-left: 8px; color: var(--muted); font-size: .66rem; }
  .ws-step { margin-left: auto; color: var(--muted); font-size: .66rem; }
  .ws-step b { color: var(--accent-text); font-weight: 500; }
  .ws-tabs { display: flex; border-bottom: 1px solid var(--line); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; }
  .wt { flex: 1; text-align: center; padding: 7px 2px; color: var(--muted); border-right: 1px solid var(--line); transition: background .3s ease, color .3s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wt:last-child { border-right: 0; }
  .wt.done { color: var(--ink-2); }
  .wt.done::before { content: '✓ '; color: #1f8a4c; }
  .wt.on { background: var(--ink); color: var(--paper); }
  .ws-body { position: relative; height: 380px; overflow: hidden; }
  .v { position: absolute; inset: 0; padding: 16px 18px; opacity: 0; pointer-events: none; transform-origin: 0 0; transition: opacity .45s ease, transform .8s cubic-bezier(.2, .8, .15, 1); background: #ffffff; }
  .v.on { opacity: 1; }
  .v .b { opacity: 0; }
  .v.on .b { animation: bIn .5s var(--ease) both; animation-delay: var(--d); }
  @keyframes bIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .ws.mosaic .v { opacity: 1; transform: translate(calc(var(--c) * 33.333% + .8%), calc(var(--r) * 34% + 14%)) scale(.315); border: 3px solid var(--line); border-radius: 14px; }
  .ws.mosaic .v .b { opacity: 1; animation: none; }
  .ws-cap { margin: 0; text-align: center; color: var(--muted); font-size: .7rem; opacity: 0; transition: opacity .5s ease; }
  .ws.mosaic + .ws-cap { opacity: 1; color: var(--accent-text); }
  .v-h { margin: 0 0 14px; color: var(--accent-text); font-size: .66rem; }
  .v .mono { font-family: var(--mono); }
  /* 01 análisis */
  .fxs { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; }
  .fx { flex: 1; text-align: center; border: 1.5px solid var(--ink); border-radius: 6px; padding: 12px 4px; font-weight: 600; font-size: .86rem; background: #fff; }
  .fx-a { font-style: normal; color: var(--muted); }
  .pains { display: grid; gap: 7px; margin-bottom: 16px; }
  .pain { justify-self: start; background: #fff3cf; border-left: 3px solid #d4a72c; padding: 6px 10px; font-size: .84rem; transform: rotate(-.4deg); }
  .req { border-top: 1px dashed var(--line); padding-top: 12px; font-size: .9rem; color: var(--ink-2); }
  .req .mono { color: #1f8a4c; font-size: .66rem; text-transform: uppercase; margin-right: 6px; }
  /* 02 arquitectura */
  .arch2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: center; }
  .ar-stack { display: grid; justify-items: stretch; }
  .ar { border: 1.5px solid var(--ink); border-radius: 6px; padding: 8px 12px; background: #fff; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .ar b { font-size: .9rem; }
  .ar small { color: var(--muted); font-family: var(--mono); font-size: .62rem; }
  .ar-c { justify-self: center; width: 2px; height: 16px; background: var(--accent); }
  .ar-adr { display: grid; gap: 8px; }
  .adr-n2 { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 4px; padding: 8px 10px; font-size: .82rem; background: #fff; }
  .adr-n2 .mono { color: var(--accent-text); font-size: .62rem; display: block; }
  /* 03 plan */
  .kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
  .kc { background: var(--paper-2); border-radius: 6px; padding: 8px; min-height: 170px; display: grid; align-content: start; gap: 6px; }
  .kc > p { margin: 0 0 2px; font-family: var(--mono); font-size: .6rem; text-transform: uppercase; color: var(--muted); }
  .tk { background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 8px; font-size: .8rem; }
  .tk .mono { color: var(--accent-text); font-size: .62rem; margin-right: 4px; }
  .kc:last-child .tk { border-left: 3px solid #1f8a4c; }
  /* 04 revisión de código */
  .pr-h { display: flex; justify-content: space-between; font-size: .66rem; color: var(--ink-2); border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; padding: 6px 10px; background: var(--paper-2); }
  .pr-files { color: var(--muted); }
  .diff { border: 1px solid var(--line); border-radius: 0 0 6px 6px; background: #fff; padding: 6px 0; display: grid; gap: 3px; }
  .diff .ln { display: block; font-family: var(--mono); font-size: .62rem; padding: 3px 10px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
  .diff .ln.del { background: #fde8e6; color: #9f1f17; text-decoration: line-through; text-decoration-color: rgba(159,31,23,.4); }
  .diff .ln.add { background: #e6f4ea; color: #145c33; }
  .rv { margin: 2px 10px; border: 1px solid var(--accent); border-radius: 6px; padding: 6px 9px; font-size: .78rem; background: #f5f5f3; }
  .rv b { color: var(--accent-text); font-size: .7rem; margin-right: 6px; }
  .checks { display: flex; gap: 12px; margin-top: 10px; font-size: .68rem; color: #1f8a4c; }
  .stamp { position: absolute; right: 18px; bottom: 16px; border: 2px solid #1f8a4c; color: #1f8a4c; border-radius: 6px; padding: 6px 12px; font-weight: 700; font-size: .8rem; transform: rotate(-3deg); background: #f3fbf6; }
  .rv-list { position: absolute; left: 18px; bottom: 18px; font-size: .6rem; color: var(--muted); max-width: 55%; }
  /* 05 infraestructura */
  .ctrs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
  .ctr { border: 1.5px solid var(--ink); border-radius: 6px; padding: 10px 8px; background: #fff; display: grid; gap: 2px; justify-items: start; }
  .ctr b { font-family: var(--mono); font-size: .82rem; }
  .ctr small { color: var(--muted); font-size: .66rem; }
  .dot { width: 9px; height: 9px; border-radius: 50%; background: #d2d2d0; display: inline-block; }
  .v.on .ctr .dot { animation: dotOn .3s ease forwards; animation-delay: var(--d2); }
  .ws.mosaic .ctr .dot, .dot.on { background: #1f8a4c; }
  @keyframes dotOn { to { background: #1f8a4c; box-shadow: 0 0 0 3px rgba(31,138,76,.2); } }
  .log2 { background: var(--night); color: var(--night-text); border-radius: 6px; padding: 10px 12px; display: grid; gap: 4px; margin-bottom: 12px; }
  .lg { font-family: var(--mono); font-size: .68rem; }
  .lg .ok { color: #4ade80; }
  .chips2 { display: flex; gap: 6px; }
  .chips2 span { border: 1px solid var(--line); border-radius: 99px; padding: 3px 9px; font-size: .64rem; color: var(--ink-2); }
  /* 06 operación */
  .ops { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .svcs { display: grid; gap: 6px; }
  .svc { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding: 7px 2px; font-size: .86rem; }
  .svc span { display: inline-flex; align-items: center; gap: 8px; }
  .svc b { font-size: .68rem; color: #1f8a4c; font-weight: 500; }
  .spark { border: 1px solid var(--line); border-radius: 6px; padding: 10px; background: #fff; align-self: start; }
  .spark svg { width: 100%; height: 90px; display: block; }
  .spark path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
  .v.on .spark path { animation: sparkDraw 1.4s var(--ease) .6s forwards; }
  .ws.mosaic .spark path { stroke-dashoffset: 0; }
  @keyframes sparkDraw { to { stroke-dashoffset: 0; } }
  .spark p { margin: 6px 0 0; font-size: .6rem; color: var(--muted); }
  @media (max-width: 900px) {
    .ws-body { height: 330px; }
    .v { padding: 12px; }
    .fx { font-size: .72rem; padding: 9px 2px; }
    .kc { min-height: 140px; }
    .ctrs { grid-template-columns: repeat(2, 1fr); }
    .diff .ln { font-size: .55rem; }
    .rv-list { display: none; }
    .ws-t { display: none; }
  }

  @media (max-width: 900px) {
    .roles-scene { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ws-wrap { order: -1; }
    .ws-body { height: 300px; }
    #ciclo h2 { font-size: 1.5rem; margin-bottom: 6px; }
    .role-card:not(.on) { display: none; }
    .role-card.on { opacity: 1; }
    .roles { border-top: 0; }
    .fxs { gap: 3px; }
    .fx-a { font-size: .7rem; }
    .arch2 { grid-template-columns: 1fr; gap: 8px; }
    .ar-adr { display: none; }
    .ws-cap { display: none; }
  }

  /* Títulos dentro de las escenas fijas: la sección empieza con su escena, sin huecos */
  #especializacion, #agentes, #proyectos { padding-top: 0; }
  .pin-head .sec-head { margin-bottom: 12px; }
  .pin-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); margin-bottom: 10px; }
  .pin-head .lead { font-size: 1rem; margin: 0 0 18px; max-width: 600px; }
  .fp-text .pin-head { margin-bottom: 8px; }
  .sys-text .pin-head { margin-bottom: 10px; }
  .sys-steps { min-height: 400px; }
  @media (min-width: 901px) and (min-height: 601px) and (max-height: 900px) { .pin-head .lead, #ciclo .lead { display: none; } .fp-rules { display: none; } }
  @media (max-height: 820px) { .team { display: none; } }
  @media (max-width: 900px) {
    .pin-head .lead { display: none; }
    .pin-head h2 { font-size: 1.6rem; }
    .pin-head .sec-head { margin-bottom: 6px; }
    .sticky .stack3d .viz { width: min(100%, 34svh); }
    .sys-viz { width: min(100%, 36svh); }
    .sys-steps { min-height: 250px; }
  }

  /* Experiencia · trayectoria anterior desplegable */
  .past { margin-top: 26px; border-top: 1px solid var(--line); }
  .past summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 260px minmax(0, 1fr) 30px; gap: 48px; align-items: center; padding: 22px 0; }
  .past summary::-webkit-details-marker { display: none; }
  .past-k { color: var(--accent-text); }
  .past-t { color: var(--ink-2); font-size: 1.02rem; }
  .past-i { width: 30px; height: 30px; border: 1px solid var(--ink); border-radius: 50%; position: relative; transition: transform .4s var(--ease), background .3s ease; }
  .past-i::before, .past-i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); }
  .past-i::after { transform: translate(-50%, -50%) rotate(90deg); }
  .past[open] .past-i { transform: rotate(45deg); background: var(--ink); }
  .past[open] .past-i::before, .past[open] .past-i::after { background: var(--paper); }
  .past summary:hover .past-t { color: var(--ink); }
  .pjs { list-style: none; margin: 0; padding: 0 0 10px; }
  .pj { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; padding: 22px 0; border-top: 1px solid var(--line); }
  .pj-when { color: var(--ink-2); font-size: .82rem; }
  .pj-when small { display: block; color: var(--muted); margin-top: 6px; text-transform: none; }
  .pj h4 { margin: 0; font-size: 1.12rem; letter-spacing: -.01em; }
  .pj-org { margin: 2px 0 10px; color: var(--muted); }
  .pj ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: .95rem; }
  .pj li { margin-bottom: 4px; }
  .ed-y { margin: 0 0 8px !important; color: var(--muted); font-size: .72rem; }
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 900px) {
    .past summary { grid-template-columns: minmax(0, 1fr) 30px; gap: 6px 14px; }
    .past-k { grid-column: 1; }
    .past-t { grid-column: 1; font-size: .92rem; }
    .past-i { grid-column: 2; grid-row: 1 / span 2; }
    .pj { grid-template-columns: 1fr; gap: 8px; }
    .facts { grid-template-columns: 1fr; }
  }

  /* § 04 · prácticas del sector */
  #agentes { padding-bottom: 100px; }
  .practices { border-top: 1px solid var(--night-line); padding-top: 24px; }
  .pr-head { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; margin-bottom: 28px; }
  .pr-k { color: var(--accent); margin: 0; }
  .pr-lead { margin: 0; color: var(--night-text); font-size: 1.05rem; max-width: 760px; }
  .pr-lead em { font-style: normal; font-family: var(--mono); font-size: .9em; color: var(--accent); }
  .pr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--night-line); border: 1px solid var(--night-line); }
  .pr { background: var(--night); padding: 20px 22px; display: grid; gap: 6px; }
  .pr b { font-size: 1rem; color: var(--night-text); }
  .pr b::before { content: '✓ '; color: #4ade80; font-family: var(--mono); }
  .pr span { color: var(--night-muted); font-size: .92rem; }
  @media (max-width: 900px) { .pr-head { grid-template-columns: 1fr; gap: 10px; } .pr-grid { grid-template-columns: 1fr; } }

  /* § 04 · hoja de ruta de mejora */
  .roadmap { margin-top: 64px; border-top: 1px solid var(--night-line); padding-top: 24px; }
  .rm { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--night-line); border: 1px solid var(--night-line); }
  .rm-p { background: var(--night); padding: 20px 22px 22px; display: grid; gap: 6px; align-content: start; position: relative; }
  .rm-n { color: var(--night-muted); font-size: .7rem; }
  .rm-s { position: absolute; top: 18px; right: 18px; font-size: .62rem; border: 1px solid var(--night-line); border-radius: 99px; padding: 2px 9px; color: var(--night-muted); }
  .rm-p.run .rm-s { color: #4ade80; border-color: rgba(74,222,128,.45); }
  .rm-p.run .rm-s::before { content: '● '; }
  .rm-p b { font-size: 1.02rem; color: var(--night-text); }
  .rm-d { color: var(--night-muted); font-size: .9rem; }
  .rm-note { margin: 16px 0 0; color: var(--night-muted); font-size: .7rem; text-transform: none; letter-spacing: .02em; }
  @media (max-width: 900px) { .rm { grid-template-columns: 1fr; } }

  /* § 04 · equipo, funcionamiento y próximamente */
  .team-sec { border-top: 1px solid var(--night-line); padding-top: 24px; margin-bottom: 64px; }
  .tms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--night-line); border: 1px solid var(--night-line); }
  .tm { background: var(--night); padding: 18px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; }
  .tm img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #1c1c1e; box-shadow: 0 0 0 2px var(--ac); }
  .tm b { display: block; font-family: var(--mono); font-size: .8rem; color: var(--ac); margin-bottom: 4px; }
  .tm span { color: var(--night-muted); font-size: .88rem; line-height: 1.5; }
  .hws { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
  .hw b { display: block; color: var(--night-text); margin-bottom: 6px; font-size: .98rem; }
  .hw span { color: var(--night-muted); font-size: .9rem; }
  .soon { border-top: 1px solid var(--night-line); padding-top: 24px; margin-bottom: 64px; }
  .soons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .soons li { border: 1px dashed var(--night-line); border-radius: 6px; padding: 18px; display: grid; gap: 6px; align-content: start; }
  .soons b { color: var(--night-text); font-size: .98rem; }
  .soons b::before { content: '→ '; color: var(--accent); font-family: var(--mono); }
  .soons span { color: var(--night-muted); font-size: .88rem; }
  @media (max-width: 1100px) { .tms, .hws, .soons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) { .tms, .hws, .soons { grid-template-columns: 1fr; } }

  /* Panel de agentes · especialistas */
  .specs { border-top: 1px dashed var(--night-line); padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .specs p { margin: 0; color: var(--night-muted); font-size: .64rem; text-transform: none; letter-spacing: .02em; }
  .spcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .spc { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 2px 9px; border: 1px solid var(--night-line); border-radius: 10px; padding: 8px 10px 9px 8px; }
  .spc img { grid-row: span 2; }
  .spc img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--ac); background: #1c1c1e; }
  .spc b { font-family: var(--mono); font-size: .66rem; font-weight: 500; color: var(--ac); }
  .spc small { color: var(--night-muted); font-size: .68rem; line-height: 1.4; }
  .flowpipe .log { height: 120px; }
  .gate { display: none; }
  .gate.show { display: flex; }
  @media (max-width: 900px) { .spcs { grid-template-columns: 1fr; } .specs { padding: 8px 10px; } }

  /* ===== Portada v3: valor visible desde el primer instante ===== */
  .hero { padding-bottom: 60px; }
  .name { font-size: clamp(3.2rem, 7.4vw, 6.6rem); margin-bottom: 22px; }
  .name .ch { animation-duration: .6s; }
  .hero-main { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: center; margin-bottom: 40px; }
  .value { font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 18px; max-width: 900px; }
  .value em { font-style: italic; color: var(--accent-text); }
  .role2 { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
  .role2 b { font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 10px; }
  .role2 b::before { content: ''; width: 12px; height: 12px; background: var(--accent); display: inline-block; }
  .role2 span { font-family: var(--mono); font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
  .hero-sys { width: 100%; height: auto; overflow: visible; }
  .hs-w { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: hsDraw .55s var(--ease) .1s forwards; }
  .hs-node { fill: var(--accent); transform-box: fill-box; transform-origin: center; transform: scale(0); animation: isoPop .3s var(--ease) .62s forwards; }
  .hs-link { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: hsDraw .5s var(--ease) .75s forwards; }
  .hs-n { opacity: 0; animation: hsIn .3s ease forwards; animation-delay: calc(.95s + var(--k) * .06s); }
  .hs-n rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
  .hs-n text { font-family: var(--mono); font-size: 10px; text-anchor: middle; fill: var(--ink-2); }
  @keyframes hsDraw { to { stroke-dashoffset: 0; } }
  @keyframes hsIn { to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .hs-w, .hs-link { stroke-dashoffset: 0; animation: none; } .hs-node, .hs-n, .hs-dot { transform: none; opacity: 1; animation: none; } }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; }
  @media (max-width: 900px) {
    .hero-main { grid-template-columns: 1fr; gap: 18px; }
    .hero-sys { width: 220px; }
    .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stat > span { font-size: .74rem; }
  }

  /* ===== § 01 · Casos destacados ===== */
  #casos { padding-top: 40px; }
  .cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
  .case { background: var(--paper); padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 6px; }
  .case-tag { margin: 0; color: var(--accent-text); }
  .case-stat { margin: 6px 0 4px; display: grid; gap: 4px; }
  .case-stat b { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -.03em; }
  .case-stat span { color: var(--muted); font-size: .88rem; max-width: 260px; }
  .case h3 { font-size: 1.2rem; letter-spacing: -.01em; margin: 10px 0 12px; padding-top: 14px; border-top: 1px solid var(--line); }
  .case dl { margin: 0; display: grid; gap: 4px; }
  .case dt { color: var(--muted); font-size: .64rem; margin-top: 8px; }
  .case dd { margin: 0; color: var(--ink-2); font-size: .93rem; line-height: 1.55; }
  .case dt:nth-of-type(4), .case dt:nth-of-type(4) + dd { color: #1f6b40; }
  .case dt:nth-of-type(4) + dd { font-weight: 500; }
  .case-more { margin-top: auto; padding-top: 16px; color: var(--accent-text); text-decoration: none; }
  .cases-more { margin: 22px 0 0; }
  .cases-more a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
  .cases-more a:hover { color: var(--accent-text); border-color: var(--accent); }
  @media (max-width: 1000px) { .cases { grid-template-columns: 1fr; } }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .job-org { margin: -4px 0 12px; color: var(--accent-text); font-weight: 600; font-size: 1rem; }

  /* § 01 · proyectos en tarjetas cortas */
  .pcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
  .pc { background: var(--paper); padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 8px; transition: background .25s ease; }
  .pc:hover { background: #fff; }
  .pc-tag { margin: 0; color: var(--accent-text); font-size: .66rem; }
  .pc h3 { margin: 0; font-size: 1.12rem; line-height: 1.25; letter-spacing: -.01em; }
  .pc-d { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
  .pc-r { margin: 4px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: .9rem; line-height: 1.45; }
  .pc-r::before { content: '→ '; color: var(--accent); }
  .pc-det summary { cursor: pointer; color: var(--accent-text); font-size: .66rem; list-style: none; }
  .pc-det summary::-webkit-details-marker { display: none; }
  .pc-det summary::before { content: '+ '; }
  .pc-det[open] summary::before { content: '− '; }
  .pc-det p { margin: 6px 0 0; color: var(--ink-2); font-size: .86rem; }
  .pc-more { color: var(--accent-text); text-decoration: none; font-size: .7rem; }
  .pc-t { margin: auto 0 0; padding-top: 10px; color: var(--muted); font-size: .66rem; text-transform: none; letter-spacing: .02em; }
  @media (max-width: 1100px) { .pcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 600px) { .pcs { grid-template-columns: 1fr; } }

  /* ===== SUBIR ===== */
  .to-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 115;
    width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--ink); color: var(--paper);
    display: grid; place-items: center;
    opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
    transition: opacity .35s ease, transform .35s var(--ease), background .25s ease, color .25s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
  }
  .to-top.show { opacity: 1; transform: none; pointer-events: auto; }
  .to-top:hover { background: var(--accent); color: #fff; }
  .to-top svg.ring { position: absolute; inset: 0; transform: rotate(-90deg); }
  .to-top .ring circle { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
  .to-top:hover .ring circle { stroke: #fff; }
  .to-top .arrow { position: relative; transition: transform .3s var(--ease); }
  .to-top .tt-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; }
  .to-top .tt-n { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
  .to-top:hover .arrow { transform: translateY(-3px); }
  .on-dark .to-top { background: var(--night-text); color: var(--night); }

  /* ===== APARICIÓN ===== */
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
  .reveal.in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .name .ch { transform: none; animation: none; }
    .iso-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
    .iso-node, .iso-dot, .hs-dot { transform: none; animation: none; }
    .seam-pipe::before, .seam.run .seam-pipe i { animation: none; }
    .ticker-track, .pipe-line::before, .hero-meta .dot, .console-head .live::before { animation: none; }
    .sec-head .rule { transform: scaleX(1); transition: none; }
  }
  @media print {
    .site-header, .to-top, .progress, .ticker, .filters, form, .approval button { display: none !important; }
    .reveal { opacity: 1; transform: none; }
    .row-body { grid-template-rows: 1fr !important; }
  }

  /* Mapa de capacidades: ocho áreas, todo visible */
  .caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 8px; }
  .cap { background: var(--paper); padding: 26px 26px 22px; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 4px 14px; transition: background .25s ease; }
  .cap:hover { background: #fff; }
  .cap-n { margin: 3px 0 0; color: var(--accent-text); font-size: .72rem; }
  .cap h3 { margin: 0 0 6px; font-size: 1.22rem; line-height: 1.25; letter-spacing: -.01em; }
  .cap-l { margin: 0 0 14px; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
  .cap ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .cap li { position: relative; padding: 8px 0 8px 16px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .9rem; line-height: 1.45; }
  .cap li::before { content: ''; position: absolute; left: 1px; top: 15px; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--accent); }
  .cap-t { margin: 12px 0 0; color: var(--muted); font-size: .66rem; text-transform: none; letter-spacing: .02em; }
  @media (max-width: 900px) { .caps { grid-template-columns: 1fr; } .cap { padding: 22px 18px 18px; grid-template-columns: 30px minmax(0, 1fr); } }
  /* Proyectos adicionales, desplegables */
  .pcs-more { margin-top: 18px; }
  .pcs-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--ink); color: var(--ink); font-size: .72rem; transition: background .25s ease, color .25s ease; }
  .pcs-more > summary::-webkit-details-marker { display: none; }
  .pcs-more > summary::after { content: '+'; font-size: .95rem; line-height: 1; }
  .pcs-more[open] > summary::after { content: '−'; }
  .pcs-more > summary:hover { background: var(--ink); color: var(--paper); }
  .pcs-more .pm-c, .pcs-more[open] .pm-o { display: none; }
  .pcs-more[open] .pm-c { display: inline; }
  .pcs-more .pcs { margin-top: 18px; }

  /* Acceso a la versión 3D: un cubo que gira y un brillo que recorre el borde */
  @property --cl-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
  .cube-link { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 999px; text-decoration: none; color: #f2f1ed; background: #000000; isolation: isolate; box-shadow: 0 6px 22px -8px rgba(24, 24, 26, .55); transition: transform .3s ease, box-shadow .3s ease; }
  .cube-link::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; z-index: -2; background: conic-gradient(from var(--cl-a), #a1a1a6, #f5f5f7, #000000 40%, #000000 60%, #a1a1a6); animation: clSpin 3.2s linear infinite; }
  .cube-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: #000000; }
  .cube-link:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .3); }
  @keyframes clSpin { to { --cl-a: 360deg; } }
  .cube-ico { width: 22px; height: 22px; position: relative; transform-style: preserve-3d; animation: clCube 6s linear infinite; perspective: none; }
  .cube-ico i { position: absolute; inset: 0; border: 1.4px solid #a1a1a6; background: rgba(255, 255, 255, .06); }
  .cube-ico .f1 { transform: translateZ(11px); } .cube-ico .f2 { transform: rotateY(180deg) translateZ(11px); }
  .cube-ico .f3 { transform: rotateY(90deg) translateZ(11px); } .cube-ico .f4 { transform: rotateY(-90deg) translateZ(11px); }
  .cube-ico .f5 { transform: rotateX(90deg) translateZ(11px); } .cube-ico .f6 { transform: rotateX(-90deg) translateZ(11px); }
  @keyframes clCube { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(360deg); } }
  .cl-t { display: grid; line-height: 1.1; }
  .cl-t b { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
  .cl-t small { font-size: .68rem; color: #a1a1a6; }
  @media (max-width: 760px) { .cl-t small { display: none; } .cube-link { padding: 6px 12px 6px 7px; } }
  @media (max-width: 420px) { .cl-t { display: none; } .cube-link { padding: 7px; } }
  @media (prefers-reduced-motion: reduce) { .cube-link::before, .cube-ico { animation: none; } }

  /* ===== Estilo 2026 · blanco y negro, acento plata, Geist =====
     Solo cambia la piel: estructura, textos y funcionamiento son los de siempre. */
  ::selection { background: #18181a; color: #fff; }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .wv .wv-a { fill: currentColor; } .wv .wv-b { fill: #a1a1a6; } .wv .wv-x { fill: #5d5d60; }
  .dark .wv .wv-x, .wv-foot .wv-x { fill: #cbcbcf; }
  .wv-head { width: 28px; height: 28px; flex: none; transition: transform .5s var(--ease); }
  .wv-head .wv-b { transition: transform .5s var(--ease); }
  .brand:hover .wv-head .wv-b { transform: translateX(-4px); }
  .brand:hover .wv-head .wv-x { opacity: .4; }
  .wv-foot { width: 44px; height: 44px; flex: none; color: var(--night-text); }
  .brand-word { font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
  .hero-sys .wv-a { fill: var(--ink); } .hero-sys .wv-b { fill: #a1a1a6; } .hero-sys .wv-x { fill: #5d5d60; }
  h1, h2, .name { text-wrap: balance; }
  .name { font-weight: 700; letter-spacing: -.055em; line-height: .9; font-size: clamp(3.4rem, 11vw, 9.6rem); }
  .name em { color: #a1a1a6; font-style: normal; }
  h2 { font-weight: 700; letter-spacing: -.04em; line-height: 1.04; font-size: clamp(2.2rem, 4.8vw, 4rem); }
  h2 em, .value em, .dark h2 em { font-style: normal; color: var(--muted); }
  .dark h2 em { color: var(--night-muted); }
  .value { font-weight: 600; letter-spacing: -.03em; }
  .lead { color: var(--muted); font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.45; }
  .stat b, .case-stat b { font-weight: 700; letter-spacing: -.035em; }
  .stat b sup { color: #a1a1a6; }
  .row-title, .job-when .years, .stack-group h3, .fp-step h3, .sys-step h3, .sec-card h3, .adr h3, .kinds-head h3, .role-card h3, .exp .n, .foot-name, .intro-name b { font-weight: 600; letter-spacing: -.025em; }
  .job-when .years em { color: var(--muted); font-style: normal; }
  .about-text p.first::first-letter { font-weight: 700; color: var(--ink); }
  .sec-head .num { color: var(--ink); }
  /* Tarjetas: bloques grises redondeados, sin bordes, con aire entre ellos */
  .pcs, .caps { gap: 16px; background: none; border: 0; }
  .pc, .cap { background: var(--paper-2); border-radius: 24px; }
  .pc:hover, .cap:hover { background: #efefed; }
  .pc { padding: 26px 24px 22px; }
  .pc-tag, .cap-n { color: var(--muted); }
  .pc-r { border-top-color: #e4e4e2; }
  .pc-r::before { color: var(--ink); }
  .pc-det summary, .pc-more { color: var(--ink); }
  .cap ul, .cap li { border-color: #e4e4e2; }
  .cap li::before { border-color: #8e8e93; }
  .pcs-more > summary { border-radius: 999px; border-color: #d2d2d0; }
  .pcs-more > summary:hover { background: var(--paper-2); color: var(--ink); }
  /* Botones: primario negro, secundario con borde gris; píldora */
  .btn { padding: 14px 26px; font-weight: 500; }
  .btn-solid::before { background: #3a3a3c; }
  .btn-line { border-color: #d2d2d0; }
  .btn-line::before { background: var(--paper-2); }
  .btn-line:hover { color: var(--ink); }
  .lang { border-color: #d2d2d0; }
  /* Contacto: el logo y el mensaje que lo recorre */
  .dl-logo { opacity: .14; }
  .dl-logo .wv-a, .dl-logo .wv-b, .dl-logo .wv-x { fill: var(--night-text); }
  .deliver.done .dl-logo { opacity: .9; transition: opacity .8s ease; }
  .deliver.done .dl-logo .wv-b { fill: #a1a1a6; } .deliver.done .dl-logo .wv-x { fill: #cbcbcf; }

  /* ===== Portada compacta: todo lo importante en la primera pantalla =====
     Nombre en una línea, frase y cargo junto al esquema, resumen y ficha lado a lado, y cifras al pie.
     Los tamaños dependen también de la altura de la ventana para que quepa en portátiles. */
  @media (min-width: 901px) {
    .hero { padding-top: clamp(84px, 11vh, 104px); padding-bottom: clamp(28px, 5vh, 48px); }
    .hero-meta { padding-bottom: 10px; margin-bottom: clamp(14px, 2.6vh, 24px); }
    .name { font-size: clamp(3rem, min(7vw, 11.5vh), 6.6rem); line-height: .95; margin: 0 0 clamp(12px, 2.4vh, 22px); }
    .name .ln { display: inline-block; vertical-align: top; }
    .name .ln:first-child { margin-right: .24em; }
    .name .ln:nth-child(2) { padding-left: 0; }
    .hero-main { grid-template-columns: minmax(0, 1fr) clamp(170px, 18vw, 240px); gap: 32px; margin-bottom: clamp(16px, 3vh, 28px); }
    .value { font-size: clamp(1.5rem, min(2.6vw, 4.4vh), 2.4rem); margin: 0 0 12px; }
    .hero-sys { max-height: clamp(120px, 20vh, 180px); }
    .hero-cols { gap: 48px; }
    .hero-sub { font-size: clamp(.98rem, min(1.25vw, 2.1vh), 1.1rem); margin: 0 0 clamp(14px, 2.4vh, 22px); }
    .spec div { padding: clamp(5px, 1vh, 8px) 0; font-size: .9rem; }
    .stats { margin-top: clamp(18px, 3.2vh, 32px); }
    .stat { padding-top: clamp(10px, 1.8vh, 16px); }
    .stat b { font-size: clamp(2rem, min(3.4vw, 5.6vh), 3rem); }
  }
  @media (min-width: 901px) and (max-height: 840px) {
    .hero-main { grid-template-columns: minmax(0, 1fr) 150px; }
    .hero-sys { max-height: 104px; }
    .spec div { padding: 3px 0; font-size: .86rem; }
    .hero-sub { line-height: 1.45; }
    .stat > span { font-size: .85rem; }
  }

  /* ===== Móvil: lectura y toque cómodos =====
     Mínimo de 12 px en etiquetas y datos, y zonas táctiles de unos 40 px. */
  @media (max-width: 1024px) {
    .pc-tag, .pc-t, .cap-t, .cap-n, .pc-det summary, .pc-more, .sec-head, .spec dt, .hero-meta, .role2 span, .stat > span, .job-areas h4, .pj-when, .past-k, .rm-n, .rm-s, .adr-n, .tm span, .spc small, .fp-count, .fp-rules, .team-cap, .mono { font-size: max(12px, .75rem); }
    .pc-det summary, .pcs-more > summary { display: flex; align-items: center; min-height: 40px; padding: 6px 0; }
    .pc-more { display: inline-flex; align-items: center; min-height: 40px; }
    .pcs-more > summary { padding: 10px 18px; }
    .brand { padding: 6px 6px 6px 0; }
    footer nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; }
    .lang button { min-height: 36px; min-width: 40px; }
  }
  @media (max-width: 1024px) {
    .adr dt, .sys-flow, .pj-when small, .job-when small { font-size: max(12px, .75rem); }
  }
  @media (max-width: 1024px) { .sys-step .sys-flow { font-size: 12px; } }
  @media (max-width: 1024px) {
    /* Las líneas de código entre secciones se ajustan en lugar de cortarse */
    .seam-code .sl { white-space: pre-wrap; word-break: break-word; }
    .seam-code { font-size: 11.5px; }
    /* La línea de tiempo gráfica no se lee en móvil: la trayectoria ya está debajo en texto */
    .gitgraph { display: none; }
    .facts { grid-template-columns: 1fr !important; gap: 22px; }
  }
  @media (max-width: 1024px) {
    .cl-t b, .cl-t small { font-size: 12px; }
    .nav-links a { display: inline-flex; align-items: center; min-height: 40px; }
  }

  /* ===== Entrada del nombre: emerge, enfoca y se ajusta =====
     Cada letra sube enmascarada con un leve desenfoque que se resuelve al llegar; el espaciado se cierra
     a la vez y una línea fina barre el nombre. En reposo, las letras se elevan ligeramente bajo el cursor. */
  .name { position: relative; }
  .name .ch { transform: translateY(108%); filter: blur(10px); opacity: 0; letter-spacing: .06em;
    animation: nameIn 1.05s cubic-bezier(.16, 1, .3, 1) forwards; }
  @keyframes nameIn {
    0% { transform: translateY(108%) rotate(4deg); filter: blur(10px); opacity: 0; letter-spacing: .06em; }
    55% { opacity: 1; }
    100% { transform: none; filter: blur(0); opacity: 1; letter-spacing: 0; }
  }
  .name.settled .ch { animation: none; transform: translateY(calc(var(--lift, 0) * -.12em)); color: color-mix(in srgb, var(--ink) calc(100% - var(--lift, 0) * 45%), #a1a1a6); filter: none; opacity: 1; letter-spacing: 0; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
  .name em { display: inline-block; }
  .name .ln:last-child .ch:last-child { animation-delay: 1.15s !important; }
  .name-sweep { position: absolute; left: 0; bottom: -.04em; height: 2px; width: 100%; background: linear-gradient(90deg, transparent, #18181a 30%, #a1a1a6 70%, transparent);
    transform: scaleX(0); transform-origin: left; opacity: 0; animation: nameSweep 1.1s cubic-bezier(.65, 0, .35, 1) .85s forwards; pointer-events: none; }
  @keyframes nameSweep { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; transform-origin: left; } 61% { transform-origin: right; } 100% { transform: scaleX(0); opacity: 1; transform-origin: right; } }
  @media (prefers-reduced-motion: reduce) {
    .name .ch { animation: none; transform: none; filter: none; opacity: 1; letter-spacing: 0; }
    .name-sweep { display: none; }
  }

  /* ===== § 02 · Nueve áreas: índice a la izquierda, detalle a la derecha ===== */
  .areas { position: relative; margin-top: 8px; }
  .areas-pin { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 36px; align-items: start; }
  .areas-ix { list-style: none; margin: 0; padding: 0; }
  .areas-ix button { position: relative; width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 14px; border: 0; border-radius: 14px; background: none; text-align: left; cursor: pointer; color: var(--muted); font: inherit; transition: background .3s ease, color .3s ease; }
  .areas-ix button:hover, .areas-ix button[aria-selected="true"] { color: var(--ink); background: var(--paper-2); }
  .areas-ix button::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--ink); transform: scaleY(0); transition: transform .35s var(--ease); }
  .areas-ix button[aria-selected="true"]::before { transform: scaleY(1); }
  .ax-n { font-size: .72rem; color: #a1a1a6; }
  .areas-ix button[aria-selected="true"] .ax-n { color: var(--ink); }
  .ax-t { font-weight: 600; font-size: .96rem; letter-spacing: -.01em; line-height: 1.25; }
  .ax-c { font-size: .66rem; color: #a1a1a6; white-space: nowrap; }
  .areas .caps { display: block; }
  .areas .cap { display: none; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; padding: clamp(24px, 3vw, 38px); background: var(--paper-2); border-radius: 28px; }
  .areas .cap.on { display: grid; animation: capIn .55s var(--ease); }
  @keyframes capIn { from { opacity: 0; transform: translateY(14px); } }
  .areas .cap-n { font-size: .8rem; padding-top: 10px; }
  .areas .cap h3 { font-size: clamp(1.6rem, 2.5vw, 2.1rem); font-weight: 700; letter-spacing: -.03em; margin: 0 0 8px; }
  .areas .cap-l { font-size: 1.04rem; color: var(--muted); margin: 0 0 16px; }
  .areas .cap ul:not(.cap-prj) { columns: 2; column-gap: 32px; border-top: 0; margin: 0; }
  .areas .cap ul:not(.cap-prj) li { break-inside: avoid; }
  .cap-t { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .cap-chip { display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: 999px; padding: 6px 12px 6px 9px; font-size: .74rem; color: var(--ink); letter-spacing: 0; }
  .cap-chip img { width: 15px; height: 15px; object-fit: contain; }
  .cap-x { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e4e4e2; }
  .cap-xh { margin: 0 0 10px; color: var(--muted); font-size: .7rem; }
  .cap-links { display: flex; flex-wrap: wrap; gap: 8px; }
  .ax-link { border: 1px solid #d2d2d0; background: none; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .82rem; color: var(--ink); cursor: pointer; transition: background .25s ease, border-color .25s ease; }
  .ax-link:hover { background: #fff; border-color: var(--ink); }
  .cap-prj { list-style: none; margin: 0; padding: 0; }
  .areas .cap .cap-prj li { padding: 0; border: 0; }
  .areas .cap .cap-prj li::before { display: none; }
  .cap-prj a { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; color: var(--ink); text-decoration: none; font-size: .92rem; border-bottom: 1px solid #e4e4e2; }
  .cap-prj a::after { content: '↓'; color: #a1a1a6; transition: transform .3s var(--ease); }
  .cap-prj a:hover::after { transform: translateY(2px); color: var(--ink); }
  .pc.flash { animation: pcFlash 1.6s ease; }
  @keyframes pcFlash { 0%, 30% { box-shadow: 0 0 0 2px var(--ink); } 100% { box-shadow: 0 0 0 2px transparent; } }

  /* Escritorio: la sección se fija y el área avanza con el scroll */
  @media (min-width: 1025px) and (min-height: 640px) {
    .areas { height: calc(9 * 40vh + 100vh); }
    .areas-pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 88px 0 28px; align-content: center; }
    .areas .cap.on { max-height: calc(100svh - 130px); overflow: auto; scrollbar-width: thin; }
  }
  /* Móvil y tablet: acordeón */
  @media (max-width: 1024px), (max-height: 639px) {
    .areas-pin { grid-template-columns: 1fr; gap: 0; }
    .areas-ix { display: none; }
    .areas .caps { display: grid; gap: 12px; }
    .areas .cap, .areas .cap.on { display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 18px 18px; border-radius: 22px; animation: none; }
    .areas .cap h3 { font-size: 1.2rem; margin: 0; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 40px; }
    .areas .cap h3::after { content: '+'; font-weight: 400; color: var(--muted); font-size: 1.4rem; line-height: 1; flex: none; }
    .areas .cap.open h3::after { content: '−'; }
    .areas .cap-n { padding-top: 12px; }
    .areas .cap > div > :not(h3) { display: none; }
    .areas .cap.open > div > p, .areas .cap.open > div > ul { display: block; }
    .areas .cap.open .cap-t { display: flex; }
    .areas .cap.open .cap-x { display: grid; }
    .areas .cap-l { margin-top: 8px; }
    .areas .cap ul:not(.cap-prj) { columns: 1; }
    .cap-x { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) { .areas .cap.on { animation: none; } .pc.flash { animation: none; } }
  @media (max-width: 1024px) { .cap-xh { font-size: 12px; } }
  /* Áreas: el bloque empieza justo debajo de la entradilla; al fijarse, queda bajo la cabecera */
  #capacidades .lead { margin-bottom: 28px; }
  @media (min-width: 1025px) and (min-height: 640px) {
    .areas-pin { top: 84px; height: calc(100svh - 84px); padding: 0 0 24px; align-content: start; }
    .areas .cap.on { max-height: calc(100svh - 112px); }
  }

  /* ===== Ritmo de fondos al estilo Apple =====
     Blanco puro por defecto; Proyectos y Experiencia en gris muy claro con tarjetas blancas.
     La cabecera, en blanco translúcido. */
  .site-header.scrolled { background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); }
  #casos, #experiencia { background: #f5f5f7; }
  #casos .pc { background: #fff; }
  #casos .pc:hover { background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .08); }
  #casos .pc-r, #casos .pcs-more > summary { border-color: #e8e8ea; }
  #experiencia .gitgraph, #experiencia .past { background: transparent; }

  /* ===== § 03 · Proyectos: filtros, entrada escalonada y relieve ===== */
  .pfilters { display: flex; flex-wrap: wrap; gap: 8px; margin: -28px 0 28px; }
  .pf { border: 1px solid #d2d2d0; background: #fff; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: .86rem; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; transition: background .25s ease, color .25s ease, border-color .25s ease; }
  .pf i { font-style: normal; font-family: var(--mono); font-size: .72rem; color: #8e8e93; }
  .pf:hover { border-color: var(--ink); }
  .pf.on { background: var(--ink); border-color: var(--ink); color: #fff; }
  .pf.on i { color: #a1a1a6; }
  .pcs { perspective: 1400px; }
  #casos .pc { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), box-shadow .4s ease, opacity .9s var(--ease); position: relative; will-change: transform; }
  #casos .pc.reveal { transform: translateY(26px); }
  #casos .pc.reveal.in { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  #casos .pc.tilt { transition: transform .12s linear, box-shadow .4s ease; box-shadow: 0 24px 60px rgba(0, 0, 0, .1); }
  #casos .pc::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .9), transparent 45%); mix-blend-mode: soft-light; }
  #casos .pc.tilt::after { opacity: 1; }
  #casos .pc[hidden] { display: none; }
  #casos .pc.pf-in { animation: pfIn .5s var(--ease) both; }
  @keyframes pfIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
  /* Con un filtro activo, los proyectos de «ver más» se integran en la rejilla */
  #casos.filtered .pcs-more > summary { display: none; }
  #casos.filtered .pcs-more .pcs { margin-top: 16px; }
  @media (max-width: 900px) { .pfilters { margin-top: 0; } }
  @media (max-width: 760px) { .pf { font-size: .82rem; padding: 7px 12px; } }
  @media (prefers-reduced-motion: reduce) { #casos .pc, #casos .pc.reveal { transform: none; } #casos .pc.pf-in { animation: none; } }
  /* Secciones fijadas (ciclo, agentes, método): el contenido arranca arriba, sin hueco tras el separador */
  @media (min-width: 901px) {
    #ciclo .sticky, #agentes .sticky, #proyectos .sticky { align-items: flex-start; padding-top: 76px; }
  }
  @media (min-width: 901px) { .flowpipe, .sys { align-items: start; } }

  /* ===== Seguridad · simulación de ataques ===== */
  .pk-ok { fill: var(--ink); }
  .pk-ko { fill: #d4413a; }
  .pk-ko { filter: drop-shadow(0 0 3px rgba(212, 65, 58, .55)); }
  .shard { stroke: #d4413a; stroke-width: 1.2; stroke-linecap: round; animation: shard .6s ease-out forwards; }
  @keyframes shard { to { opacity: 0; } }
  .ring.hit .r { stroke: #d4413a !important; stroke-width: 3.2; }
  .ring.hit .r-t { fill: #d4413a; }
  .sec-grid.arrived .core { fill: #1f8a4c; }
  .core { transition: fill .3s ease; }
  .sec-legend { display: flex; justify-content: center; gap: 22px; margin: 14px 0 0; color: var(--muted); font-size: .7rem; }
  .sec-legend span { display: inline-flex; align-items: center; gap: 7px; }
  .sec-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
  .lg-ok { background: var(--ink); } .lg-ko { background: #d4413a; box-shadow: 0 0 6px rgba(212, 65, 58, .6); }
  .soc { margin-top: 48px; background: #0a0a0b; color: #e8e8ea; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .45); }
  .soc-head { display: flex; align-items: center; gap: 18px; padding: 14px 20px; border-bottom: 1px solid #1f1f22; color: #8e8e93; font-size: .7rem; flex-wrap: wrap; }
  .soc-live { display: inline-flex; align-items: center; gap: 8px; color: #e8e8ea; }
  .soc-live i { width: 7px; height: 7px; border-radius: 50%; background: #d4413a; box-shadow: 0 0 0 0 rgba(212, 65, 58, .6); animation: socPulse 1.6s infinite; }
  .soc.done .soc-live i { background: #2fb36a; animation: none; }
  @keyframes socPulse { 70% { box-shadow: 0 0 0 7px rgba(212, 65, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(212, 65, 58, 0); } }
  .soc-run { margin-left: auto; background: none; border: 1px solid #3a3a3e; color: #e8e8ea; border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: .7rem; transition: background .25s ease, border-color .25s ease; min-height: 36px; }
  .soc-run:hover { background: #1c1c1e; border-color: #8e8e93; }
  .soc-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
  .soc-log { list-style: none; margin: 0; padding: 16px 20px; min-height: 300px; font-size: .74rem; line-height: 1.5; border-right: 1px solid #1f1f22; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; text-transform: none; letter-spacing: 0; }
  .soc-log li { display: grid; grid-template-columns: 62px 56px 150px minmax(0, 1fr); gap: 10px; align-items: baseline; animation: socIn .35s ease; }
  @keyframes socIn { from { opacity: 0; transform: translateY(6px); } }
  .soc-log .ts { color: #6e6e73; }
  .soc-log b { font-weight: 500; }
  .soc-log .ok b { color: #2fb36a; } .soc-log .ko b { color: #ff6b5f; } .soc-log .warn b { color: #f5c04a; }
  .soc-log .soc-ly { color: #a1a1a6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .soc-log .msg { color: #e8e8ea; }
  .soc-stats { padding: 20px; display: grid; gap: 18px; align-content: start; }
  .soc-stats b { display: block; font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: #fff; }
  .soc-stats b.bump { animation: bump .35s ease; }
  @keyframes bump { 40% { transform: scale(1.12); } }
  .soc-stats span { color: #a1a1a6; font-size: .85rem; }
  .soc-zero b { color: #2fb36a; }
  .soc-note { margin: 4px 0 0; color: #6e6e73; font-size: .74rem; line-height: 1.5; border-top: 1px solid #1f1f22; padding-top: 14px; }
  @media (max-width: 900px) {
    .soc-body { grid-template-columns: 1fr; }
    .soc-log { border-right: 0; border-bottom: 1px solid #1f1f22; min-height: 260px; font-size: 12px; }
    .soc-log li { grid-template-columns: 52px 50px minmax(0, 1fr); }
    .soc-log .soc-ly { display: none; }
    .soc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .soc-stats b { font-size: 1.9rem; }
    .soc-stats span { font-size: 12px; }
    .soc-note { grid-column: 1 / -1; font-size: 12px; }
    .soc-head > span:nth-child(2) { display: none; }
    .sec-legend { font-size: 12px; }
  }
  @media (max-width: 1024px) { .soc-head, .soc-run { font-size: 12px; } }

  /* ===== Seguridad · corredor de capas ===== */
  .sec-grid { display: block; }
  .sec-lane { position: relative; display: grid; grid-template-columns: 92px repeat(7, minmax(0, 1fr)) 104px; min-height: 470px; background: #f5f5f7; border-radius: 28px; padding: 22px 18px; overflow: hidden; }
  .ln-in, .ln-out { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; text-align: center; color: var(--muted); }
  .ln-in .mono, .ln-out .mono { font-size: .7rem; }
  .ln-in::before { content: ''; width: 34px; height: 34px; border-radius: 50%; border: 1.5px dashed #a1a1a6; margin-bottom: 6px; }
  .ln-out { background: var(--ink); color: #fff; border-radius: 20px; margin-left: 10px; }
  .ln-out .mono { color: #a1a1a6; }
  .ln-out b { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
  .ln-out small { font-size: .72rem; color: #a1a1a6; }
  .ln-out.ping { animation: outPing .6s ease; }
  @keyframes outPing { 30% { background: #1f8a4c; } }
  .gate-c { position: relative; padding: 0 16px 0 8px; display: flex; flex-direction: column; }
  .gate-h { border: 0; background: none; padding: 0 0 10px; text-align: left; cursor: pointer; font: inherit; color: var(--ink); display: grid; gap: 2px; min-height: 84px; align-content: start; }
  .gate-h .mono { font-size: .68rem; color: #a1a1a6; }
  .gate-h b { font-size: .92rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
  .gate-h small { font-size: .64rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
  .gate-c.on .gate-h .mono { color: var(--ink); }
  .gate-c.on .gate-h b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .gate-l { position: absolute; right: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: #d2d2d0; }
  .gate-c.hit .gate-l { animation: gateHit .7s ease; }
  @keyframes gateHit { 0%, 40% { background: #d4413a; box-shadow: 0 0 0 4px rgba(212, 65, 58, .18), 0 0 18px rgba(212, 65, 58, .5); } }
  .gate-c.pass .gate-l { animation: gatePass .5s ease; }
  @keyframes gatePass { 0%, 40% { background: #2fb36a; } }
  .gate-s { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 6px; }
  .gate-s li { background: #fff; border: 1px solid rgba(212, 65, 58, .35); border-radius: 10px; padding: 6px 8px; font-size: .74rem; line-height: 1.3; color: var(--ink); animation: stampIn .45s cubic-bezier(.16, 1, .3, 1); }
  .gate-s li b { display: block; color: #d4413a; font-size: .66rem; font-weight: 500; }
  .gate-s li.warn { border-color: rgba(245, 192, 74, .7); }
  .gate-s li.warn b { color: #b07d0a; }
  @keyframes stampIn { from { opacity: 0; transform: translateX(-18px) scale(.9); } }
  .ln-fx { position: absolute; inset: 0; pointer-events: none; }
  .tok { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: .74rem; font-weight: 500; padding: 5px 10px 5px 7px; border-radius: 999px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); will-change: transform; transition: opacity .3s ease; }
  .tok i { width: 7px; height: 7px; border-radius: 50%; }
  .tok-ok { color: var(--ink); border: 1px solid #d2d2d0; } .tok-ok i { background: #2fb36a; }
  .tok-ko { color: #b2302a; border: 1px solid rgba(212, 65, 58, .45); background: #fff5f4; } .tok-ko i { background: #d4413a; box-shadow: 0 0 6px rgba(212, 65, 58, .7); }
  .tok-swarm { box-shadow: -10px 0 0 -4px rgba(212, 65, 58, .35), -20px 0 0 -5px rgba(212, 65, 58, .22), -30px 0 0 -6px rgba(212, 65, 58, .12), 0 6px 18px rgba(0, 0, 0, .08); }
  .sec-legend { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px 22px; margin: 14px 4px 0; }
  .sec-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; margin-top: 40px; align-items: start; }
  .sec-row .soc { margin-top: 0; }
  .sec-row .soc-body { grid-template-columns: 1fr; }
  .sec-row .soc-log { border-right: 0; border-bottom: 1px solid #1f1f22; min-height: 270px; }
  .sec-row .soc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sec-row .soc-stats b { font-size: 2.1rem; }
  .sec-row .soc-note { grid-column: 1 / -1; }
  .sec-row .soc-log li { grid-template-columns: 58px 52px 118px minmax(0, 1fr); }
  .sec-row .sec-card { min-height: 0; }

  /* Móvil: el corredor gira; las capas van de arriba abajo */
  @media (max-width: 900px) {
    .sec-lane { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; padding: 14px; border-radius: 22px; }
    .ln-in { flex-direction: row; justify-content: flex-start; padding: 4px 4px 12px; }
    .ln-in::before { width: 20px; height: 20px; margin: 0 6px 0 0; }
    .gate-c { padding: 10px 4px 12px; min-height: 64px; }
    .gate-h { min-height: 0; padding: 0 0 6px; grid-template-columns: 26px auto; align-items: baseline; column-gap: 8px; }
    .gate-h small { grid-column: 2; }
    .gate-l { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 3px; }
    .gate-s { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
    .gate-s li { font-size: 12px; }
    .ln-out { flex-direction: row; justify-content: center; gap: 10px; margin: 12px 0 0; padding: 12px; }
    .ln-out b { font-size: 1.5rem; }
    .tok { font-size: 12px; }
    .sec-row { grid-template-columns: 1fr; gap: 28px; }
    .sec-row .soc-log li { grid-template-columns: 52px 50px minmax(0, 1fr); }
    .gate-h .mono, .gate-h small, .ln-in .mono, .ln-out .mono, .ln-out small, .gate-s li b { font-size: 12px; }
  }

  /* Seguridad: corredor, consola y ficha de la capa en una sola pantalla (escritorio) */
  @media (min-width: 901px) {
    .sec-stage { scroll-margin-top: 80px; }
    .sec-lane { min-height: clamp(250px, 34vh, 340px); padding: 16px 16px; }
    .gate-h { min-height: 64px; padding-bottom: 6px; }
    .gate-s li { padding: 4px 7px; font-size: .7rem; }
    .sec-legend { margin-top: 10px; }
    .sec-row { margin-top: 16px; gap: 28px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
    .sec-tabs { display: none; }
    .sec-row .soc-head { padding: 10px 16px; }
    .sec-row .soc-log { min-height: 0; height: 152px; padding: 12px 16px; gap: 4px; font-size: .7rem; justify-content: flex-start; overflow: hidden; }
    .sec-row .soc-stats { padding: 12px 16px; gap: 10px; }
    .sec-row .soc-stats b { font-size: 1.7rem; }
    .sec-row .soc-stats span { font-size: .76rem; }
    .sec-row .soc-note { font-size: .68rem; padding-top: 8px; margin: 0; }
    .sec-row .sec-card { border-top: 0; padding-top: 0; }
    .sec-row .sec-card h3 { font-size: 1.6rem; margin-bottom: 4px; }
    .sec-row .sec-what { margin-bottom: 8px; font-size: .92rem; }
    .sec-row .sec-card ul { font-size: .86rem; margin-bottom: 10px; }
    .sec-row .sec-card li { margin-bottom: 3px; }
    .sec-row .sec-ver { font-size: .84rem; }
  }

  @media (min-width: 901px) {
    .sec-row .soc-head { flex-wrap: nowrap; }
    .sec-row .soc-head > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sec-row .soc-log li .msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  }
  @media (min-width: 901px) { .sec-row .soc-run { white-space: nowrap; flex: none; } }

  .sec-next { margin-top: 40px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; border-top: 1px solid var(--ink); padding-top: 20px; }
  .sec-next p:last-child { margin: 0; color: var(--ink-2); max-width: 820px; }
  @media (max-width: 900px) { .sec-next { grid-template-columns: 1fr; gap: 10px; } }
  /* Seguridad: el bloque se ajusta a la altura real de la ventana (con la barra del navegador incluida) */
  @media (min-width: 901px) {
    .sec-lane { min-height: 0; height: clamp(210px, 34svh, 330px); }
    .gate-h { min-height: 54px; }
    .gate-h small { display: none; }
    .sec-row { height: calc(100svh - clamp(210px, 34svh, 330px) - 150px); min-height: 250px; max-height: 420px; }
    .sec-row .soc { height: 100%; display: flex; flex-direction: column; }
    .sec-row .soc-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    .sec-row .soc-log { flex: 1; height: auto; min-height: 60px; }
    .sec-row .sec-side { height: 100%; overflow: auto; scrollbar-width: thin; padding-right: 6px; }
  }
  @media (min-width: 901px) and (max-height: 820px) {
    .sec-row .soc-note { display: none; }
    .sec-row .sec-card ul { font-size: .8rem; }
    .sec-row .sec-card h3 { font-size: 1.35rem; }
  }
  /* Seguridad: título, entradilla, corredor y consola caben juntos en una pantalla */
  @media (min-width: 901px) {
    #seguridad { padding-top: 64px; }
    #seguridad > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: end; }
    #seguridad > .wrap > * { grid-column: 1 / -1; }
    #seguridad .sec-head { margin-bottom: 14px; }
    #seguridad > .wrap > h2 { grid-column: 1; margin: 0; font-size: clamp(2rem, 3.4vw, 3.1rem); }
    #seguridad > .wrap > .lead { grid-column: 2; margin: 0; font-size: 1rem; line-height: 1.5; }
    #seguridad .sec-stage { margin-top: 22px; }
    .sec-lane { height: clamp(200px, 30svh, 310px); }
    .sec-row { height: calc(70svh - 316px); min-height: 220px; max-height: 380px; }
  }
  @media (min-width: 901px) {
    .sec-row .soc-note { display: none; }
    .sec-lane { height: clamp(186px, 30svh, 310px); }
  }
  @media (min-width: 901px) { .sec-row { min-height: 196px; } }
  /* Secciones fijadas: el bloque mide lo que su contenido, así no queda hueco al terminar */
  @media (min-width: 901px) {
    #ciclo .sticky, #agentes .sticky, #proyectos .sticky { height: auto; min-height: 0; padding-bottom: 32px; }
  }
  @media (min-width: 901px) {
    #ciclo .bens { margin-top: 24px; }
    #proyectos .scrolly + .wrap:empty { display: none; }
    #proyectos { padding-bottom: 40px; }
  }

  /* =====================================================================
     MODO LECTURA · móvil (≤ 900 px) y ventanas bajas (≤ 600 px de alto)
     Las escenas dejan de fijarse a pantalla: miden lo que su contenido y se recorren con pasos.
     ===================================================================== */
  .stepnav { display: none; }
  @media (max-width: 900px), (max-height: 600px) {
    .scrolly { height: auto !important; }
    .sticky { position: static !important; height: auto !important; min-height: 0 !important; overflow: visible !important; padding: 0 !important; display: block !important; }
    .stepnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 64px; z-index: 5; margin: 0 0 16px; padding: 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid #e4e4e2; }
    .dark .stepnav { background: rgba(28, 28, 30, .92); border-color: #2a2a2d; }
    .stepnav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #d2d2d0; background: #fff; color: var(--ink); font-size: 1.1rem; cursor: pointer; flex: none; }
    .dark .stepnav button { background: #000; color: #f5f5f7; border-color: #3a3a3e; }
    .stepnav button:disabled { opacity: .35; cursor: default; }
    .sn-n { font-size: 12px; text-align: center; flex: 1; color: var(--ink); }
    .dark .sn-n { color: #f5f5f7; }
    .fp-steps, .sys-steps { min-height: 0 !important; }
    .fp-step, .sys-step { position: static !important; display: none; transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
    .fp-step.on, .sys-step.on { display: block; }
    .meter { display: none; }
    #agentes .fp-rules, #agentes .team { display: block; }
    .flowpipe .log { display: block; height: auto; max-height: 160px; }
    .sys-viz { width: 100% !important; max-width: 520px; margin: 0 auto; }
    #ciclo .roles-scene, .flowpipe, .sys { gap: 20px; }
  }

  /* Espaciado móvil común: secciones 44 px por lado, separadores 18 px */
  @media (max-width: 900px) {
    main > section { padding-top: 44px; padding-bottom: 44px; }
    .seam { padding-block: 18px; }
    .lead { margin-bottom: 28px; }
    h2 { margin-bottom: 18px; }
    .wrap { padding-left: 18px; padding-right: 18px; }
    .pc { padding: 18px 16px 16px; }
    .areas .cap, .areas .cap.on { padding: 16px; grid-template-columns: minmax(0, 1fr); }
    .areas .cap-n { padding-top: 0; }
    .cap-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
    .areas .cap h3 { display: block; }
    .areas .cap h3::after { display: none; }
    .cap-toggle::after { content: '+'; font-weight: 400; color: var(--muted); font-size: 1.4rem; line-height: 1; flex: none; }
    .areas .cap.open .cap-toggle::after { content: '−'; }
    /* Objetivos táctiles de 44 px en los controles importantes */
    .pf, .ax-link, .pc-det summary, .pcs-more > summary, .soc-run, .lang button, .burger, .cube-link, .sec-pill { min-height: 44px; }
    .lang button { min-width: 44px; }
    .burger { min-width: 44px; }
    /* Contacto: canales a dos líneas si no caben */
    .channels a { flex-wrap: wrap; gap: 2px 12px; }
    .channels a span:last-child { word-break: break-word; }
    .big-mail { font-size: clamp(1.4rem, 7vw, 2.4rem); word-break: break-word; }
    main > section, .areas .cap, .pc { scroll-margin-top: 76px; }
  }
  @media (min-width: 901px) { .cap-toggle { all: unset; display: inline; cursor: default; } }

  /* Menú móvil: cabe en la pantalla visible y tiene scroll propio */
  @media (max-width: 900px) {
    .nav-links { max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain; padding-block: 28px !important; gap: 8px !important; }
    .nav-links a { min-height: 44px; display: flex; align-items: center; }
    html.menu-open, html.menu-open body { overflow: hidden; }
  }
  @media (max-width: 900px) {
    .flowpipe > *, .sys > *, .roles-scene > *, .fp-text > * { min-width: 0; }
    .team-avs { flex-wrap: wrap; }
    .site-header .nav { gap: 10px; }
    .nav-right { gap: 8px; min-width: 0; }
  }
  @media (max-width: 480px) {
    .cl-t { display: none; }
    .cube-link { padding: 0; width: 44px; justify-content: center; }
    .lang button { min-width: 40px; padding: 0 8px; }
    .brand-word { font-size: 14px; }
  }
  @media (max-width: 360px) { .brand-word { display: none; } }
  @media (max-width: 900px) {
    .adrs { grid-template-columns: minmax(0, 1fr) !important; }
    .adr { min-width: 0; padding-left: 18px; padding-right: 18px; }
    .adr dl { grid-template-columns: minmax(0, 1fr); }
    .kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 360px) { .site-header .wrap.nav { padding-left: 14px; padding-right: 14px; } .nav-right { gap: 6px; } }
  @media (max-width: 900px) {
    .seam-code .sl { width: auto !important; }
    /* Stack: en móvil las tecnologías aparecen en su sitio, sin dispersión animada */
    .stack-group .tile { transform: none !important; opacity: 1 !important; }
  }

  /* ===== Contacto · formulario como transacción SQL ===== */
  .sqlf { display: block; background: #0a0a0b; border: 1px solid #26262a; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); }
  .sq-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid #1f1f22; color: #8e8e93; font-size: .7rem; flex-wrap: wrap; }
  .sq-dots { display: inline-flex; gap: 6px; } .sq-dots i { width: 10px; height: 10px; border-radius: 50%; background: #2c2c30; }
  .sq-file { color: #e8e8ea; }
  .sq-conn b { color: #e8e8ea; font-weight: 500; }
  .sq-mode { margin-left: auto; background: none; border: 1px solid #3a3a3e; color: #c7c7cc; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .68rem; cursor: pointer; min-height: 34px; }
  .sq-mode:hover, .sq-mode[aria-pressed="true"] { border-color: #f5f5f7; color: #f5f5f7; }
  .sq-code { padding: 16px 0 10px; font-family: var(--mono); font-size: .92rem; line-height: 1.75; color: #c7c7cc; counter-reset: ln; }
  .sq-l { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; padding-right: 16px; white-space: pre-wrap; }
  .sq-l > i { font-style: normal; color: #48484c; text-align: right; padding-right: 14px; user-select: none; font-size: .8em; }
  .sq-f { display: flex; flex-wrap: wrap; align-items: baseline; padding-left: 0; }
  .sq-f > i { width: 44px; flex: none; }
  .sq-f > .sq-field { padding-left: 16px; }
  .sq-k { color: #ff7ab2; } .sq-t { color: #78c2ff; } .sq-cm { color: #6c7986; margin-left: 10px; } .sq-c { color: #c7c7cc; }
  .sq-q { color: #fc6a5d; }
  .sq-field { display: inline-flex; align-items: baseline; gap: 0; color: #fc6a5d; }
  .sq-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sqlf input, .sqlf select, .sqlf textarea { width: auto; border: 0; border-bottom: 1px dashed #3a3a3e; background: transparent; padding: 0 2px; color: #fc8a7d; font-family: var(--mono); font-size: inherit; line-height: inherit; text-transform: none; letter-spacing: 0; border-radius: 0; caret-color: #f5f5f7; }
  .sqlf input::placeholder, .sqlf textarea::placeholder { color: #6e5450; }
  .sqlf input:focus, .sqlf select:focus, .sqlf textarea:focus { outline: none; border-bottom-color: #f5f5f7; background: rgba(255, 255, 255, .04); }
  .sqlf select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 14px; background-image: linear-gradient(45deg, transparent 50%, #8e8e93 50%), linear-gradient(135deg, #8e8e93 50%, transparent 50%); background-position: calc(100% - 7px) 55%, calc(100% - 3px) 55%; background-size: 4px 4px; background-repeat: no-repeat; }
  .sqlf select option { background: #1c1c1e; color: #f5f5f7; }
  .sq-msg .sq-field { flex: 1; min-width: 0; align-items: flex-start; }
  .sqlf textarea { flex: 1; min-width: 0; resize: vertical; min-height: 3.5em; }
  .sq-f.err input, .sq-f.err textarea { border-bottom: 1px solid #ff453a; background: rgba(255, 69, 58, .08); }
  .sq-f.err > i { color: #ff453a; }
  .sq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .sq-run { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid #1f1f22; }
  .sq-exec { display: inline-flex; align-items: center; gap: 8px; background: #f5f5f7; color: #000; border: 0; border-radius: 999px; padding: 12px 22px; font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; min-height: 44px; transition: opacity .2s ease, transform .2s ease; }
  .sq-exec:hover { opacity: .85; } .sq-exec:active { transform: scale(.98); }
  .sqlf.busy .sq-exec { opacity: .5; pointer-events: none; }
  .sq-exec-classic { display: none; }
  .sq-hint { color: #6e6e73; font-size: .7rem; } .sq-hint kbd { border: 1px solid #3a3a3e; border-radius: 4px; padding: 1px 5px; font-family: var(--mono); }
  .sq-out { list-style: none; margin: 0; padding: 0 16px; font-size: .78rem; line-height: 1.6; text-transform: none; letter-spacing: 0; color: #c7c7cc; }
  .sq-out:not(:empty) { padding: 12px 16px 16px; border-top: 1px solid #1f1f22; }
  .sq-out li { animation: sqIn .3s ease; word-break: break-word; }
  @keyframes sqIn { from { opacity: 0; transform: translateY(4px); } }
  .sq-out .p { color: #6e6e73; } .sq-out .cm { color: #6c7986; }
  .sq-out .err { color: #ff6b5f; } .sq-out .ok { color: #30d158; } .sq-out .done { font-weight: 500; }
  /* Modo formulario clásico: mismos campos, sin decorado de código */
  .sqlf.classic .sq-dec, .sqlf.classic .sq-l > i, .sqlf.classic .sq-q, .sqlf.classic .sq-c, .sqlf.classic .sq-cm, .sqlf.classic .sq-hint, .sqlf.classic .sq-exec-sql { display: none; }
  .sqlf.classic .sq-exec-classic { display: inline; }
  .sqlf.classic .sq-code { padding: 18px 18px 6px; font-family: var(--sans); display: grid; gap: 16px; }
  .sqlf.classic .sq-f, .sqlf.classic .sq-field { display: grid; gap: 6px; width: 100%; padding: 0; }
  .sqlf.classic .sq-lab { position: static; width: auto; height: auto; clip: auto; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #a1a1a6; }
  .sqlf.classic input, .sqlf.classic select, .sqlf.classic textarea { width: 100%; font-family: var(--sans); font-size: 1rem; color: #f5f5f7; border-bottom: 1px solid #3a3a3e; padding: 8px 0; }
  @media (max-width: 900px) {
    .sq-code { font-size: 14px; }
    .sq-l { grid-template-columns: 28px minmax(0, 1fr); }
    .sq-f > i { width: 28px; }
    .sq-f > .sq-field { padding-left: 8px; flex: 1; min-width: 0; }
    .sqlf input, .sqlf select { flex: 1; min-width: 0; width: 100%; }
    .sq-cm { display: none; }
    .sq-conn { display: none; }
    .sq-mode { min-height: 44px; font-size: 12px; }
    .sq-hint { display: none; }
    .sqlf input, .sqlf textarea, .sqlf select { font-size: 16px; }
  }
  .sq-l { display: flex; flex-wrap: wrap; align-items: baseline; }
  .sq-l > i { width: 44px; flex: none; }
  .sq-dec { white-space: pre; }
  .sq-bar { text-transform: none; letter-spacing: .04em; }
  @media (max-width: 900px) { .sq-l > i { width: 28px; } .sq-dec { white-space: pre-wrap; } }
  .sq-tx { flex: 1; min-width: 0; white-space: pre-wrap; }
  .sqlf.classic .sq-f, .sqlf.classic .sq-field { grid-template-columns: minmax(0, 1fr); }
  .sqlf.classic .sq-f > .sq-field { padding-left: 0; }

  /* ===== Contacto · el email como resultado de una SELECT ===== */
  .qmail { flex: 1; min-width: 0; max-width: 760px; }
  .qm-q { margin: 0 0 14px; font-size: .8rem; color: #a1a1a6; text-transform: none; letter-spacing: 0; min-height: 1.6em; word-break: break-word; }
  .qm-p { color: #6e6e73; } .qm-q .k { color: #ff7ab2; } .qm-q .s { color: #fc6a5d; }
  .qm-caret { display: inline-block; width: .55em; height: 1.05em; vertical-align: -2px; background: #f5f5f7; margin-left: 2px; animation: caret 1s steps(1) infinite; }
  .qmail.shown .qm-caret { display: none; }
  @keyframes caret { 50% { opacity: 0; } }
  .qm-table { border: 1px solid #3a3a3e; border-radius: 14px; overflow: hidden; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s var(--ease); }
  .qmail.shown .qm-table { opacity: 1; transform: none; }
  .qm-head { padding: 8px 18px; border-bottom: 1px solid #3a3a3e; color: #8e8e93; font-size: .7rem; background: #111113; }
  .qm-row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; transition: background .3s ease; }
  .qm-row:hover { background: rgba(255, 255, 255, .05); }
  .qm-mail { flex: 1; min-width: 0; font-weight: 600; font-size: clamp(1.5rem, 4.2vw, 3.2rem); letter-spacing: -.03em; color: #f5f5f7; text-decoration: none; word-break: break-word; }
  .qm-mail .arr { color: #a1a1a6; display: inline-block; transition: transform .5s var(--ease); }
  .qm-mail:hover .arr { transform: translate(6px, -6px); color: #f5f5f7; }
  .qm-copy { flex: none; background: none; border: 1px solid #3a3a3e; color: #c7c7cc; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: .7rem; min-height: 40px; transition: border-color .25s ease, color .25s ease; }
  .qm-copy:hover { border-color: #f5f5f7; color: #f5f5f7; }
  .qm-foot { margin: 10px 0 0; color: #6e6e73; font-size: .72rem; text-transform: none; letter-spacing: 0; opacity: 0; transition: opacity .4s ease .2s; }
  .qmail.shown .qm-foot { opacity: 1; }
  .qm-foot.ok { color: #30d158; }
  @media (max-width: 900px) { .qm-row { flex-wrap: wrap; } .qm-copy { min-height: 44px; font-size: 12px; } .qm-q, .qm-foot, .qm-head { font-size: 12px; } }
  @media (prefers-reduced-motion: reduce) { .qm-table, .qm-foot { transition: none; } .qm-caret { animation: none; } }
  @media (max-width: 900px) {
    .mail-row { flex-direction: column; align-items: stretch; gap: 20px; }
    .qmail { flex: none; width: 100%; max-width: none; }
    .qm-mail { font-size: clamp(1.35rem, 6.6vw, 2rem); word-break: normal; overflow-wrap: anywhere; }
    .deliver { flex-direction: row; justify-content: flex-start; display: flex; align-items: center; gap: 14px; }
    .deliver svg { width: 64px; }
  }
  @media (max-width: 900px) {
    .qm-row { flex-direction: column; align-items: flex-start; gap: 12px; }
    .qm-mail { font-size: clamp(1.3rem, 7.4vw, 2rem); overflow-wrap: normal; white-space: nowrap; }
  }
  @media (max-width: 340px) { .qm-mail { white-space: normal; overflow-wrap: anywhere; } }

  /* ===== Criterio, no solo tecnología: diagrama y decisiones en una pantalla ===== */
  .box { background: #1c1c1e; border-color: #2c2c30; }
  .box.core { border-color: #a1a1a6; }
  .cells-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
  .cells-legend b { font-size: 1em; }
  .adr-toggle { all: unset; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; }
  .adr-toggle::after { content: '+'; font-weight: 400; color: var(--night-muted); font-size: 1.3rem; line-height: 1; flex: none; }
  .adr.open .adr-toggle::after { content: '−'; }
  .adr-toggle:focus-visible { outline: 2px solid #f5f5f7; outline-offset: 4px; }
  .adr dl { display: none; }
  .adr.open dl { display: grid; animation: capIn .4s var(--ease); }
  .adr { cursor: default; }
  @media (min-width: 1025px) {
    #arquitectura { padding-top: 64px; padding-bottom: 64px; }
    #arquitectura > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: end; }
    #arquitectura > .wrap > * { grid-column: 1 / -1; }
    #arquitectura .sec-head { margin-bottom: 14px; }
    #arquitectura > .wrap > h2 { grid-column: 1; margin: 0; font-size: clamp(2rem, 3.4vw, 3.1rem); }
    #arquitectura > .wrap > .lead { grid-column: 2; margin: 0; font-size: 1rem; line-height: 1.5; }
    #arquitectura .adr-tag { margin: 22px 0 10px; }
    .arq-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: start; }
    .arq-grid .arch { max-width: none; }
    .arq-grid .layer { grid-template-columns: 92px 1fr; gap: 14px; }
    .arq-grid .pipe { grid-template-columns: 92px 1fr; gap: 14px; height: 34px; }
    .arq-grid .box { padding: 10px 14px; flex-basis: 160px; }
    .arq-grid .box b { font-size: .95rem; }
    .arq-grid .box > span { font-size: .82rem; line-height: 1.4; }
    .arq-grid .cells { margin-top: 8px; }
    .arq-grid .adrs { margin-top: 0; grid-template-columns: 1fr; }
    .arq-grid .adr { padding: 14px 18px; }
    .arq-grid .adr h3 { font-size: 1.05rem; margin: 0; }
    .arq-grid .adr-n { margin: 0 0 2px; }
    .arq-grid .adr.open dl { margin-top: 10px; gap: 4px 14px; font-size: .86rem; }
  }
  @media (min-width: 1025px) {
    .arq-grid .box { line-height: 1.35; padding: 9px 13px; }
    .arq-grid .box > span { display: block; margin-top: 2px; }
    .arq-grid .pipe { height: 26px; }
    .arq-grid .adr { padding: 10px 16px; }
    .arq-grid .adr.open dl { font-size: .82rem; margin-top: 8px; }
    .arq-grid .adr dd { line-height: 1.4; }
    #arquitectura .adr-tag { margin: 16px 0 8px; }
  }
  @media (min-width: 1025px) and (max-height: 780px) {
    .arq-grid .box > span:not(.cells-legend) { display: none; }
    .arq-grid .layer-label { font-size: .62rem; }
  }
  @media (min-width: 1025px) and (max-height: 760px) {
    .arq-grid .adr-n { display: none; }
    .arq-grid .adr { padding: 9px 16px; }
    #arquitectura > .wrap > h2 { font-size: 2.2rem; }
  }
  @media (max-width: 900px) { .ws-tabs { overflow: hidden; } }

  /* ===== Portada · el esquema en funcionamiento ===== */
  .hs-flow { fill: none; stroke: none; }
  .hs-pk { fill: var(--ink); opacity: 0; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .25)); }
  .hs-hub { fill: var(--ink); opacity: 0; animation: hsIn .3s ease 1.2s forwards; }
  .hero-sys.pulse .hs-hub { animation: none; opacity: 1; r: 4.5; transition: r .3s ease; }
  .hs-hub { transition: r .5s ease; }
  .hs-n rect { transition: fill .5s ease, stroke .5s ease; }
  .hs-n.ping rect { animation: hsPing .9s ease; }
  .hs-n.ping text { animation: hsPingT .9s ease; }
  @keyframes hsPing { 0%, 35% { fill: var(--ink); stroke: var(--ink); } }
  @keyframes hsPingT { 0%, 35% { fill: #fff; } }
  .hero-sys .wv-b { transform-box: view-box; animation: wvBreath 6.4s ease-in-out 2s infinite; }
  .hero-sys .wv-x { animation: wvX 6.4s ease-in-out 2s infinite; }
  @keyframes wvBreath { 0%, 100% { transform: none; } 50% { transform: translateX(-3px); } }
  @keyframes wvX { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
  @media (prefers-reduced-motion: reduce) { .hero-sys .wv-b, .hero-sys .wv-x { animation: none; } }
  .sec-web a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

  /* ===== Descarga del CV · pipeline de compilación ===== */
  .ch-cv { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 18px 0; color: var(--night-text); transition: color .25s ease, padding .35s var(--ease); }
  .ch-cv span:last-child { color: var(--night-muted); }
  .ch-cv:hover { padding-left: 8px; }
  .ch-cv:focus-visible { outline: 2px solid #f5f5f7; outline-offset: 4px; }
  .cvbuild { width: min(720px, 94vw); padding: 0; border: 1px solid #2c2c30; border-radius: 20px; background: #0a0a0b; color: #e8e8ea; box-shadow: 0 40px 120px rgba(0, 0, 0, .5); }
  .cvbuild::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px); }
  .cvbuild[open] { animation: caseIn .4s var(--ease); }
  .cvb-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid #1f1f22; color: #8e8e93; font-size: .7rem; }
  .cvb-live { display: inline-flex; align-items: center; gap: 8px; color: #e8e8ea; } .cvb-live i { width: 7px; height: 7px; border-radius: 50%; background: #30d158; box-shadow: 0 0 8px rgba(48, 209, 88, .7); }
  .cvb-x { margin-left: auto; background: none; border: 1px solid #3a3a3e; color: #c7c7cc; border-radius: 999px; width: 36px; height: 36px; cursor: pointer; }
  .cvb-steps { list-style: none; margin: 0; padding: 16px 18px; font-size: .78rem; line-height: 1.6; text-transform: none; letter-spacing: 0; display: grid; gap: 6px; min-height: 180px; }
  .cvb-steps li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; animation: sqIn .3s ease; }
  .cvb-steps b { color: #6e6e73; font-weight: 400; }
  .cvb-steps .cvt { color: #6e6e73; white-space: nowrap; }
  .st.run { color: #f5c04a; animation: caret 1s steps(1) infinite; } .st.ok { color: #30d158; } .st.ko { color: #ff453a; } .st.cmd { color: transparent; }
  .cvb-art { margin: 0 18px 18px; padding: 16px; border: 1px solid #2c2c30; border-radius: 14px; background: #111113; animation: sqIn .4s ease; }
  .cvb-k { margin: 0 0 6px; color: #8e8e93; font-size: .68rem; }
  .cvb-file { margin: 0; font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; }
  .cvb-hash { margin: 6px 0 14px; color: #6e6e73; font-size: .68rem; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
  .cvb-btns { display: flex; flex-wrap: wrap; gap: 10px; }
  .cvb-dl { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: #f5f5f7; color: #000; text-decoration: none; font-weight: 600; }
  .cvb-other { background: none; border: 1px solid #3a3a3e; color: #c7c7cc; border-radius: 999px; padding: 0 16px; min-height: 44px; cursor: pointer; font-size: .7rem; }
  .cvb-other:hover, .cvb-x:hover { border-color: #f5f5f7; color: #f5f5f7; }
  @media (max-width: 640px) { .cvb-steps li { grid-template-columns: 16px minmax(0, 1fr); } .cvb-steps .cvt { grid-column: 2; } .cvb-bar > span:nth-child(2) { display: none; } .cvb-steps, .cvb-hash, .cvb-other { font-size: 12px; } }

  /* ===== Seguridad de esta web: indicador en la cabecera, panel y firma del despliegue ===== */
  .sec-pill { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: transparent; color: inherit; font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; cursor: pointer; white-space: nowrap; transition: border-color .25s ease; }
  .sec-pill:hover { border-color: currentColor; }
  .sec-pill i { width: 7px; height: 7px; border-radius: 50%; background: #30d158; box-shadow: 0 0 0 3px rgba(48, 209, 88, .18); }
  .sec-pill b { font-weight: 600; }
  .sec-pill .sp-x { opacity: .65; }
  @media (max-width: 1320px) { .sec-pill .sp-x { display: none; } }
  @media (max-width: 520px) { .sec-pill { gap: 6px; padding: 0 10px; } }
  .secdlg .cvb-steps { min-height: 0; }
  .sec-ext { display: inline-flex; align-items: center; text-decoration: none; }
  .foot-sec { all: unset; cursor: pointer; color: var(--night-muted); }
  .foot-sec:hover { color: var(--accent); } .foot-sec:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  .foot-build { opacity: .7; overflow-wrap: anywhere; text-transform: none; }
  @media (max-width: 640px) { .foot-build { padding-right: 72px; } }
  @media (max-width: 1180px) { .cl-t small { display: none; } .cl-t b { white-space: nowrap; } }
  .brand-word { white-space: nowrap; }
  @media (min-width: 901px) and (max-width: 1100px) { .nav nav { gap: 18px; } .nav nav a { font-size: .9rem; } }

  /* Diálogos CV y seguridad: la barra con la X queda fija al hacer scroll y el resultado acaba en un botón claro de salida */
  .cvb-bar { position: sticky; top: 0; z-index: 2; background: #0a0a0b; border-radius: 20px 20px 0 0; }
  .cvb-x { width: 44px; height: 44px; font-size: 1rem; border-color: #6e6e73; color: #f5f5f7; }
  .cvb-back { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; margin-top: 18px; padding: 0 20px; border: 0; border-radius: 999px; background: #f5f5f7; color: #000; font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; transition: background .25s ease; }
  .cvb-back:hover { background: #fff; }
  .cvb-back:focus-visible, .cvb-x:focus-visible { outline: 2px solid #30d158; outline-offset: 3px; }
  #cvbuild .cvb-back { background: none; border: 1px solid #6e6e73; color: #f5f5f7; }
  #cvbuild .cvb-back:hover { border-color: #f5f5f7; }