:root {
  --negro: #050505;
  --crema: #FAFAF8;
  --gris: #9a9a95;
  --linea: rgba(250, 250, 248, .12);
  --lima: #B6F23C;
  --verde: #22C55E;
  --turquesa: #00D8C8;
  --azul: #168FEF;
  --indigo: #7C6CFF;
  --titulo: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --texto: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --suave: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--negro); color: var(--crema); font: 400 17px/1.55 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--crema); color: var(--negro); padding: 8px 12px; z-index: 99; }
.saltar:focus { left: 8px; }
.envoltura { width: min(1240px, 100% - 48px); margin-inline: auto; }

/* Navegación */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(16px, 3vw, 36px); color: var(--crema); }
.nav::before { content: ''; position: absolute; inset: 0; background: rgba(5,5,5,.78); backdrop-filter: blur(10px); pointer-events: none; z-index: -1; }
.nav-marca { font: 400 22px/1 var(--titulo); letter-spacing: .06em; text-decoration: none; }
.nav nav { display: flex; gap: clamp(12px, 2.4vw, 32px); font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.nav nav a { text-decoration: none; opacity: .85; transition: opacity .3s; }
.nav nav a:hover { opacity: 1; }
.nav-cta { border: 1px solid rgba(250,250,248,.5); padding: 9px 14px; border-radius: 999px; background: rgba(5,5,5,.35); backdrop-filter: blur(8px); }
.nav-progreso { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,.08); }
.nav-progreso span { display: block; height: 100%; width: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* Heros de tinta */
.hero { position: relative; height: 230vh; }
.hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero-tinta { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-capa { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto 1fr; pointer-events: none; padding: 88px clamp(16px, 4vw, 56px) 32px; }
.hero-titulo { grid-row: 2; text-align: center; font: 400 clamp(64px, 17vw, 260px)/.9 var(--titulo); text-transform: uppercase; }
.con-tinta .hero-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-etiqueta { grid-row: 1; align-self: start; margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; display: flex; gap: 14px; align-items: center; }
.hero-etiqueta span { border: 1px solid var(--linea); border-radius: 999px; padding: 6px 10px; }
.hero-bajada { grid-row: 3; align-self: end; justify-self: start; max-width: 34ch; margin: 0; font-size: clamp(16px, 1.6vw, 21px); line-height: 1.4; }
.hero-scroll { position: absolute; right: clamp(16px, 4vw, 56px); bottom: 32px; margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .25em; text-transform: uppercase; writing-mode: vertical-rl; display: flex; align-items: center; gap: 12px; }
.hero-scroll::after { content: ''; width: 1px; height: 56px; background: linear-gradient(var(--crema), transparent); animation: gotear 2.2s var(--suave) infinite; }
@keyframes gotear { from { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } to { transform: scaleY(0); transform-origin: bottom; } }
.con-tinta .hero-etiqueta, .con-tinta .hero-bajada, .con-tinta .hero-scroll { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity 1.1s var(--suave), transform 1.1s var(--suave), filter 1.1s var(--suave); }
.con-tinta .nacido .hero-etiqueta, .con-tinta .nacido .hero-bajada, .con-tinta .nacido .hero-scroll { opacity: 1; transform: none; filter: none; }
.con-tinta .nacido .hero-bajada { transition-delay: .25s; }
.con-tinta .nacido .hero-scroll { transition-delay: .5s; }
.hero-capa { opacity: calc(1 - var(--salida, 0) * 1.6); }

/* Bloques */
.bloque { position: relative; padding: clamp(96px, 14vw, 180px) 0; background: var(--negro); }
.rotulo { margin: 0 0 28px; font: 500 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gris); display: flex; align-items: center; gap: 12px; }
.rotulo::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.frase { font: 600 clamp(30px, 4.6vw, 64px)/1.08 var(--texto); letter-spacing: -.03em; max-width: 20ch; }
.frase .pal { display: inline-block; opacity: .14; transition: opacity .5s; }
.frase .pal.on { opacity: 1; }
.bloque-brand .frase .pal.on:nth-last-child(-n+5) { color: var(--lima); }
.bloque-sistema .frase .pal.on:nth-last-child(-n+4) { color: var(--turquesa); }

[data-revelar] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--suave), transform 1s var(--suave); transition-delay: calc(var(--i, 0) * 90ms); }
[data-revelar].in { opacity: 1; transform: none; }

.servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin-top: clamp(56px, 8vw, 110px); }
.servicios article { background: var(--negro); padding: clamp(24px, 3vw, 40px); min-height: 280px; display: flex; flex-direction: column; }
.servicios .num { font: 400 64px/1 var(--titulo); color: var(--lima); margin-bottom: auto; }
.servicios h3 { font: 600 22px/1.2 var(--texto); margin: 40px 0 10px; }
.servicios p { margin: 0; color: var(--gris); }

/* Galería horizontal fijada */
.galeria { position: relative; height: 320vh; margin-top: clamp(80px, 10vw, 140px); }
.galeria-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.galeria-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.galeria-cabecera .rotulo { margin: 0; }
.galeria-nota { margin: 0; color: var(--gris); font-size: 14px; }
.galeria-pista { display: flex; gap: clamp(20px, 3vw, 40px); padding-inline: max(24px, (100vw - 1240px) / 2); will-change: transform; transform: translate3d(calc(var(--g, 0) * -1px), 0, 0); }
.tarjeta-web { margin: 0; flex: 0 0 auto; width: min(62vw, 820px); }
.tarjeta-web .marco { aspect-ratio: 16 / 10; max-height: 64vh; border-radius: 14px; overflow: hidden; border: 1px solid var(--linea); background: #111; position: relative; }
.tarjeta-web img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1.2s var(--suave); }
.tarjeta-web:hover img { transform: scale(1.03); }
.tarjeta-web figcaption { margin-top: 14px; font: 500 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.tarjeta-web figcaption span { color: var(--gris); text-transform: none; letter-spacing: 0; font-family: var(--texto); }

.proceso { margin-top: clamp(80px, 10vw, 140px); }
.proceso ol { list-style: none; padding: 0; margin: 0 0 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.proceso li { border-top: 1px solid var(--linea); padding-top: 22px; display: grid; gap: 14px; }
.proceso b { font: 400 48px/1 var(--titulo); color: var(--lima); }
.proceso span { color: #d6d6d0; }

.boton { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font: 600 15px/1 var(--texto); text-decoration: none; transition: transform .4s var(--suave), background .3s, color .3s; }
.boton:hover { transform: translateY(-2px); }
.boton::after { content: '↗'; font-size: 14px; }
.boton-lima { background: var(--lima); color: #06120A; }
.boton-turquesa { background: var(--turquesa); color: #04201E; }
.boton-borde { border: 1px solid currentColor; }
.boton:focus-visible, a:focus-visible { outline: 2px solid var(--lima); outline-offset: 3px; }

/* Sistema */
.bloque-sistema { background: radial-gradient(120% 60% at 80% 0%, rgba(22,143,239,.10), transparent 60%), var(--negro); }
.pantalla { position: relative; margin-top: clamp(64px, 9vw, 120px); padding-bottom: 80px; }
.pantalla-panel { border-radius: 16px; overflow: hidden; border: 1px solid var(--linea); box-shadow: 0 40px 120px -40px rgba(0,216,200,.35); width: 86%; transform: translate3d(0, calc(var(--y, 0) * 1px), 0); }
.pantalla-movil { position: absolute; right: 0; bottom: 0; width: clamp(150px, 20%, 250px); border-radius: 26px; overflow: hidden; border: 6px solid #141414; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); transform: translate3d(0, calc(var(--y, 0) * 1px), 0); }

.modulos { margin-top: clamp(80px, 10vw, 130px); }
.modulos ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linea); }
.modulos li { padding: 28px 24px 32px 0; border-bottom: 1px solid var(--linea); }
.modulos h3 { font: 600 20px/1.2 var(--texto); margin-bottom: 8px; }
.modulos h3::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--turquesa); margin-right: 12px; vertical-align: middle; }
.modulos p { margin: 0; color: var(--gris); }

.rubros { margin-top: clamp(80px, 10vw, 130px); }
.rubros-cabecera { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.rubros-nota { margin: 0 0 28px; color: var(--gris); }
.rubros-cuerpo { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.rubros-lista { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rubros-lista a { display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--linea); text-decoration: none; transition: padding .4s var(--suave), color .3s; }
.rubros-lista a::before { counter-increment: r; content: counter(r, decimal-leading-zero); font: 500 12px/1 var(--mono); color: var(--gris); }
.rubros-lista strong { font: 400 clamp(24px, 2.6vw, 34px)/1.05 var(--titulo); letter-spacing: .02em; text-transform: uppercase; }
.rubros-lista em { font: 500 12px/1 var(--mono); font-style: normal; color: var(--gris); text-transform: uppercase; letter-spacing: .12em; }
.rubros-lista a:hover, .rubros-lista a.activo { padding-left: 10px; color: var(--turquesa); }
.rubros-vista { position: sticky; top: 110px; margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--linea); aspect-ratio: 1366 / 860; background: #0c0c0c; }
.rubros-vista img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: opacity .35s, transform .8s var(--suave); }
.rubros-vista img.cambiando { opacity: 0; transform: scale(1.03); }
.complementos { margin: 48px 0 0; max-width: 70ch; color: var(--gris); font-size: 15px; border-left: 2px solid var(--turquesa); padding-left: 16px; }

/* Automatizaciones */
.bloque-auto { background: radial-gradient(90% 50% at 15% 10%, rgba(180,76,255,.12), transparent 60%), radial-gradient(70% 40% at 90% 80%, rgba(255,79,109,.08), transparent 60%), var(--negro); }
.bloque-auto .frase .pal.on:nth-last-child(-n+3) { color: #FF4F6D; }
.flujo { margin-top: clamp(64px, 9vw, 120px); }
.flujo-cabecera { display: flex; align-items: center; gap: 28px; margin-bottom: 40px; }
.flujo-cabecera img { width: clamp(120px, 14vw, 200px); height: auto; }
.flujo-nota { margin: 0; max-width: 40ch; color: var(--gris); }
.flujo-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.flujo-pasos::before { content: ''; position: absolute; left: 0; right: 0; top: 19px; height: 2px; background: linear-gradient(90deg, #FF4F6D, #B44CFF, #24E1FF); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.flujo-pasos li { position: relative; padding-top: 56px; }
.flujo-pasos .nodo { position: absolute; top: 4px; left: 0; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; padding: 8px 12px; border-radius: 8px; background: #0d0d0d; border: 1px solid rgba(36,225,255,.5); color: #24E1FF; box-shadow: 0 0 24px rgba(36,225,255,.15); }
.flujo-pasos h3 { font: 600 20px/1.2 var(--texto); margin-bottom: 8px; }
.flujo-pasos p { margin: 0; color: var(--gris); }
.ideas { margin-top: clamp(72px, 9vw, 120px); }
.ideas ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linea); }
.ideas li { padding: 22px 24px 22px 0; border-bottom: 1px solid var(--linea); font-size: 18px; }
.complementos-auto { border-left-color: #FF4F6D; }
.boton-coral { background: #FF4F6D; color: #1a0610; }

/* Hablemos */
.bloque-hablemos { background: var(--crema); color: #0A0A0A; }
.bloque-hablemos .rotulo { color: #5b5b57; }
.canales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(56px, 8vw, 100px); }
.canal { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; padding: clamp(22px, 3vw, 36px); border-radius: 20px; background: #0A0A0A; color: var(--crema); }
.canal img { width: 120px; height: 120px; object-fit: contain; }
.canal h3 { font: 400 34px/1 var(--titulo); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
.canal p { margin: 0 0 18px; color: #bdbdb7; }
.enlaces { display: flex; flex-wrap: wrap; gap: 10px; }
.enlaces .boton { padding: 11px 16px; font-size: 14px; }

.pie { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 28px clamp(16px, 3vw, 36px); font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); border-top: 1px solid var(--linea); }
.pie-marca { font: 400 18px/1 var(--titulo); color: var(--crema); }

@media (max-width: 1100px) { .canales { grid-template-columns: 1fr; } .canal { grid-template-columns: 120px 1fr; align-items: center; } }
@media (max-width: 860px) {
  body { font-size: 16px; }
  .nav nav a:not(.nav-cta) { display: none; }
  .hero { height: 190vh; }
  .servicios, .proceso ol, .canales { grid-template-columns: 1fr; }
  .servicios article { min-height: 0; }
  .servicios h3 { margin-top: 20px; }
  .modulos ul { grid-template-columns: 1fr 1fr; }
  .rubros-cuerpo { grid-template-columns: 1fr; }
  .rubros-vista { display: none; }
  .galeria { height: 260vh; }
  .tarjeta-web { width: 78vw; }
  .pantalla-panel { width: 100%; }
  .pantalla-movil { width: 32%; bottom: -10px; }
  .canal { grid-template-columns: 72px 1fr; gap: 16px; }
  .canal img { width: 72px; height: 72px; }
  .flujo-pasos { grid-template-columns: 1fr; gap: 28px; }
  .flujo-pasos::before { left: 19px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform-origin: 50% 0; transform: scaleY(var(--f, 0)); background: linear-gradient(#FF4F6D, #B44CFF, #24E1FF); }
  .flujo-pasos li { padding: 44px 0 0 48px; }
  .flujo-pasos .nodo { left: 48px; top: 0; }
  .ideas ul { grid-template-columns: 1fr; }
  .flujo-cabecera { flex-direction: column; align-items: start; }
}
@media (max-width: 520px) { .modulos ul { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-revelar] { opacity: 1; transform: none; transition: none; }
  .frase .pal { opacity: 1; }
  .hero-scroll::after { animation: none; }
}

/* Heros con imagen panorámica del runner (2026-10-09). El titular va sobre el lado libre de la imagen. */
.hero.hero-imagen { height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #050505; }
.hero-imagen .hero-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero-imagen[data-lado="izquierda"] .hero-fondo { object-position: left center; }
.hero-imagen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5,5,5,.72) 0%, rgba(5,5,5,.25) 42%, transparent 62%); }
.hero-imagen[data-lado="izquierda"]::after { background: linear-gradient(270deg, rgba(5,5,5,.72) 0%, rgba(5,5,5,.25) 42%, transparent 62%); }
.hero-imagen .hero-capa { z-index: 1; opacity: 1; grid-template-rows: 1fr auto auto 1fr; align-content: center; justify-items: start; padding: 96px clamp(20px, 5vw, 80px) 48px; width: min(52%, 760px); }
.hero-imagen[data-lado="izquierda"] .hero-capa { left: auto; right: 0; justify-items: end; text-align: right; }
.hero-imagen .hero-etiqueta { grid-row: 1; align-self: end; margin-bottom: 18px; }
.hero-imagen .hero-titulo { grid-row: 2; text-align: inherit; font-size: clamp(56px, 8.4vw, 150px); line-height: .9; color: var(--crema); text-shadow: 0 6px 40px rgba(0,0,0,.45); overflow-wrap: anywhere; }
.hero-imagen .hero-bajada { grid-row: 3; align-self: start; justify-self: inherit; margin-top: 22px; max-width: 30ch; }
.hero-imagen[data-runner="chameleon"] .hero-etiqueta span { border-color: #00E640; color: #00E640; }
.hero-imagen[data-runner="lonewolf"] .hero-etiqueta span { border-color: #00D8E8; color: #00D8E8; }
.hero-imagen[data-runner="crowflows"] .hero-etiqueta span { border-color: #E8142E; color: #ff4d62; }
@media (max-width: 760px) {
  /* celular: el runner llena la pantalla desde su lado y el texto va abajo sobre un degradado */
  .hero-imagen .hero-fondo { object-position: 82% center; }
  .hero-imagen[data-lado="izquierda"] .hero-fondo { object-position: 14% center; }
  .hero-imagen::after, .hero-imagen[data-lado="izquierda"]::after { background: linear-gradient(0deg, rgba(5,5,5,.92) 0%, rgba(5,5,5,.55) 38%, transparent 62%); }
  .hero-imagen .hero-capa, .hero-imagen[data-lado="izquierda"] .hero-capa { width: 100%; left: 0; right: 0; grid-template-rows: 1fr auto auto auto; justify-items: start; text-align: left; padding: 96px 20px 40px; }
  .hero-imagen .hero-titulo { font-size: clamp(52px, 15vw, 88px); }
}
/* «Automatizaciones» es larga: tamaño propio para que entre entera en una línea, sin cortar la palabra */
.hero-imagen .hero-titulo { overflow-wrap: normal; }
#hero-auto.hero-imagen .hero-titulo { font-size: clamp(40px, 6.2vw, 108px); white-space: nowrap; }
@media (max-width: 760px) { #hero-auto.hero-imagen .hero-titulo { font-size: clamp(34px, 10.4vw, 58px); } }
/* Heros «Bold» (2026-10-09): fondo sólido con el HEX exacto de cada runner, sin degradados; runner recortado abajo a la derecha.
   Texto: negro sobre el verde de Chameleon (contraste 12,8:1), blanco sobre el cobalto de Lone Wolf (6,9:1) y sobre el rojo de Crow Flows (4,9:1). */
.hero.hero-imagen[data-runner="chameleon"] { background: #00E640; --tx: #050505; }
.hero.hero-imagen[data-runner="lonewolf"]  { background: #1B3BFF; --tx: #FFFFFF; }
.hero.hero-imagen[data-runner="crowflows"] { background: #E8142E; --tx: #FFFFFF; }
.hero-imagen::after, .hero-imagen[data-lado="izquierda"]::after { content: none; }
.hero-imagen .hero-figura { position: absolute; right: clamp(0px, 3vw, 64px); bottom: 0; height: 66%; width: auto; max-width: 52vw; object-fit: contain; object-position: right bottom; pointer-events: none; }
.hero-imagen[data-runner="lonewolf"] .hero-figura { height: 62%; }
.hero-imagen .hero-capa, .hero-imagen[data-lado="izquierda"] .hero-capa { left: 0; right: auto; justify-items: start; text-align: left; width: min(60%, 860px); }
.hero-imagen .hero-titulo, .hero-imagen .hero-bajada, .hero-imagen .hero-etiqueta { color: var(--tx); text-shadow: none; }
.hero-imagen .hero-titulo { font-size: clamp(64px, 9.6vw, 176px); }
#hero-auto.hero-imagen .hero-titulo { font-size: clamp(44px, 6.9vw, 124px); }
.hero-imagen .hero-bajada { opacity: 1; }
.hero.hero-imagen[data-runner] .hero-etiqueta span { border-color: var(--tx); color: var(--tx); }
@media (max-width: 760px) {
  /* celular: texto arriba, runner abajo centrado-derecha sin taparlo */
  .hero-imagen .hero-capa, .hero-imagen[data-lado="izquierda"] .hero-capa { width: 100%; grid-template-rows: auto auto auto 1fr; align-content: start; padding: 104px 20px 0; }
  .hero-imagen .hero-etiqueta { align-self: start; }
  .hero-imagen .hero-figura, .hero-imagen[data-runner="lonewolf"] .hero-figura { right: 4vw; height: 50%; max-width: 92vw; }
  .hero-imagen .hero-titulo { font-size: clamp(52px, 16vw, 92px); }
  #hero-auto.hero-imagen .hero-titulo { font-size: clamp(34px, 10.4vw, 58px); }
}
/* Runners anime cyberpunk (Codex, desde el logo oficial): pegados al borde derecho, donde su corte queda fuera de la vista */
.hero-imagen .hero-figura, .hero-imagen[data-runner="lonewolf"] .hero-figura { right: 0; height: 66%; max-width: 50vw; }
@media (max-width: 760px) { .hero-imagen .hero-figura, .hero-imagen[data-runner="lonewolf"] .hero-figura { right: 0; height: 50%; max-width: 94vw; } }
/* Celular (Johan 2026-10-10: «en móvil salen muy abajo»): el runner va justo debajo del texto y entra completo en la
   primera pantalla. El hero mide lo que su contenido (texto + runner), el bloque de texto tiene el mismo alto en los tres
   heros y el runner el mismo tamaño, así los tres quedan en el mismo lugar. Escritorio no cambia. */
@media (max-width: 760px) {
  .hero.hero-imagen { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .hero-imagen .hero-capa, .hero-imagen[data-lado="izquierda"] .hero-capa { position: relative; inset: auto; order: 1; height: 330px; padding: 92px 20px 0; grid-template-rows: auto auto auto 1fr; }
  .hero-imagen .hero-figura, .hero-imagen[data-runner="lonewolf"] .hero-figura {
    position: relative; order: 2; right: auto; bottom: auto; align-self: flex-end; max-width: none;
    width: min(92vw, 430px, calc((100svh - 346px) / var(--ar, 0.9863))); height: auto; } /* --ar = alto/ancho de la figura (piezas: lo pone tools/pieza.mjs) */
}
/* Bitácora Maestra (2026-10-11) ---------------------------------------------------------------------------------
   Identidad por sección: cada bloque toma el color de su runner (Chameleon verde #00E640, Lone Wolf cobalto #1B3BFF con
   cian #00D8E8 para texto sobre negro, Crow Flows rojo #E8142E con #FF4D62 para texto sobre negro). Rellenos con el HEX
   exacto; texto de acento con la variante que pasa AA (≥ 4,5:1) sobre #050505. Todo el texto en horizontal (§2.2). */
:root { --cham: #00E640; --wolf: #1B3BFF; --wolf-tx: #00D8E8; --crow: #E8142E; --crow-tx: #FF4D62; }
.hero-etiqueta .hero-logo { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--tx, var(--crema)); flex: none; }
.bloque-brand .frase .pal.on:nth-last-child(-n+5), .servicios .num, .proceso b { color: var(--cham); }
.boton-lima { background: var(--cham); color: #050505; }
.boton:focus-visible, a:focus-visible { outline-color: var(--cham); }
.bloque-sistema { background: radial-gradient(120% 60% at 80% 0%, rgba(27,59,255,.16), transparent 60%), var(--negro); }
.bloque-sistema .frase .pal.on:nth-last-child(-n+4), .rubros-lista a:hover, .rubros-lista a.activo { color: var(--wolf-tx); }
.modulos h3::before { background: var(--wolf); box-shadow: 0 0 10px rgba(27,59,255,.8); }
.complementos { border-left-color: var(--wolf); }
.pantalla-panel { box-shadow: 0 40px 120px -40px rgba(27,59,255,.45); }
.boton-turquesa { background: var(--wolf); color: #FFFFFF; }
.bloque-auto .frase .pal.on:nth-last-child(-n+3) { color: var(--crow-tx); }
.complementos-auto { border-left-color: var(--crow); }
.boton-coral { background: var(--crow); color: #FFFFFF; }
.flujo-pasos::before { background: linear-gradient(90deg, var(--crow), #24E1FF); }
@media (max-width: 860px) { .flujo-pasos::before { background: linear-gradient(var(--crow), #24E1FF); } }
/* Cloud (§12): servicio de Lone Wolf, mismo cobalto */
.bloque-cloud { background: radial-gradient(90% 55% at 85% 15%, rgba(27,59,255,.18), transparent 60%), var(--negro); }
.bloque-cloud .frase .pal.on:nth-last-child(-n+6) { color: var(--wolf-tx); }
.cloud-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin-top: clamp(56px, 8vw, 110px); }
.cloud-tipos article { background: var(--negro); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; min-height: 240px; }
.cloud-chip { align-self: flex-start; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--wolf); color: var(--wolf-tx); }
.cloud-tipos h3 { font: 600 24px/1.2 var(--texto); margin-top: auto; }
.cloud-tipos p { margin: 0; color: var(--gris); }
.cloud-incluye { margin-top: clamp(72px, 9vw, 120px); }
.cloud-incluye ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linea); }
.cloud-incluye li { padding: 28px 24px 32px 0; border-bottom: 1px solid var(--linea); }
.cloud-incluye h3 { font: 600 20px/1.2 var(--texto); margin-bottom: 8px; }
.cloud-incluye h3::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--wolf); box-shadow: 0 0 10px rgba(27,59,255,.8); margin-right: 12px; vertical-align: middle; }
.cloud-incluye p { margin: 0; color: var(--gris); }
.proceso-cloud b { color: var(--wolf-tx); }
.proceso-cloud ol { margin-bottom: 0; }
@media (max-width: 860px) { .cloud-tipos, .cloud-incluye ul { grid-template-columns: 1fr; } .cloud-tipos article { min-height: 0; } .hero-etiqueta .hero-logo { width: 44px; height: 44px; } }

/* Orden de entradas sin atributos style */
[data-revelar][data-orden="0"]{--i:0}
[data-revelar][data-orden="1"]{--i:1}
[data-revelar][data-orden="2"]{--i:2}
[data-revelar][data-orden="3"]{--i:3}
[data-revelar][data-orden="4"]{--i:4}
[data-revelar][data-orden="5"]{--i:5}