/* ═══════════════════════════════════════════════════════════════════════════
   ON THE GIG GROUP — v4 · SOFTWARE, NO FOLLETO
   La v3 (portafolio, 5.154px) gustó. Esto la reestructura por dos pedidos:

   1. POSICIONAMIENTO. Dejaba de decir "plataformas para inmobiliarias" y pasa a
      decir "capas de IA y sistemas para cualquier negocio", con lo inmobiliario
      como la PROFUNDIDAD que lo respalda, no como el techo.
   2. ESTRUCTURA, del caso de estudio que mandó Roberto (software inmobiliario
      para desarrolladoras, el vecino más cercano a lo que vendemos). La lección
      que se copia: CADA CAPACIDAD FUERTE TIENE SU PROPIA SECCIÓN CON SU PROPIA
      PANTALLA. Una rejilla de seis tarjetas con un icono cada una se lee en diez
      segundos y no deja nada; cuatro secciones con pantalla obligan a mirar el
      producto cuatro veces. Por eso la referencia se ve como software y una
      rejilla de iconos se ve como un folleto de servicios.

   LO QUE SE COPIA DE LA REFERENCIA
   · Un solo botón, con el mismo texto, repetido. Aquí: "Pide tu diagnóstico" x5.
   · Capturas a sangre, SIN marco de navegador dibujado. Un marco de Chrome
     alrededor de una maqueta grita "esto es un mockup".
   · Lenguaje de beneficio, no de especificación.
   · Cero precios: el precio se conversa.

   LO QUE NO SE COPIA, Y POR QUÉ
   · Logos de clientes: no tenemos permiso escrito de nadie. Ni difuminados.
   · Testimonios: no existen todavía. No se inventan, ni con nombre ficticio.
     El hueco queda vacío a propósito: un hueco honesto se repara con dos cartas
     de recomendación; un testimonio falso se cae en la primera llamada.

   Y AQUÍ ES DONDE SE LES GANA
   La referencia no tiene un solo número: ni una medición, ni una fecha. Todo su
   peso está en logos y testimonios. Nosotros no tenemos ni lo uno ni lo otro,
   pero sí tenemos evidencia medida y fechada. Va exactamente donde ellos ponen
   los logos: justo debajo del héroe.

   PALETA — SALA DE CONTROL (Roberto, 2026-08-28: "más moderno, más elegante,
   más sofisticado, tipo Apple"). Sustituye al azul profundo + naranja, que era
   la paleta de contratista y leía a inmobiliaria, no a estudio de software.
   · Monocromo absoluto: la página no tiene un solo color propio, y por eso el
     único color que se ve en pantalla lo pone el producto del cliente. Para un
     estudio que revende plataformas eso no es gusto, es estrategia: una marca
     ruidosa le grita por encima a la del cliente en cada captura.
   · Ni #000 ni #FFF en ninguna parte — medido en 5 de 5 sitios caros con tokens
     legibles (Instrument #070708, Exo Ape #0d0e13, Basement escribe #e6e6e6).
   · El acento ES hueso: el botón principal invierte (hueso con texto casi-negro)
     y esa inversión es todo el contraste que hace falta. Un acento cromático
     aquí sería el uniforme de landing de startup 2023-2025.
   · --dato es la llave de las gráficas, aparte del acento: un cliente con marca
     propia cambia ESA sola llave y sus 90 elementos de datos la siguen.

   REGLAS DE LA CASA QUE SIGUEN EN PIE
   · Una sola curva y cuatro duraciones. Ninguna se escribe a mano.
   · Solo se anima transform / opacity / clip-path. Nunca width, height ni
     box-shadow. Techo 300ms; reacción al cursor 60ms.
   · Todo :hover que cambie algo lleva su gemela :focus-visible, y la gemela vive
     FUERA de @media (hover:hover).
   · Todo tamaño sale de la lista de 7. Cero valores sueltos.
   · Contraste medido contra la superficie REAL de cada pieza.
   · UN SOLO ACENTO. Los cinco tableros por sector NO llevan un color cada uno:
     eso serían cinco acentos y es el tell número uno de plantilla barata. Se
     distinguen por vocabulario y por métricas, que además es el argumento —
     el motor es el mismo, cambia el negocio.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* — PIEL CLARA, de fabrica (2026-08-28). La referencia que trajo Roberto
     es clara y por eso se lee "limpia": el aire y el producto mandan, el color
     se aparta. Ni blanco puro ni negro puro en ninguna parte — el papel lleva
     un grado de gris y la tinta se queda antes del negro, que es lo que separa
     un sitio caro de una plantilla. — */
  --fondo:#FBFBFC;
  --fondoAlt:#F4F5F7;
  --superficie:#FFFFFF;
  --superficieAlta:#FFFFFF;

  --tinta:#0E1013;        /* 17,6:1 sobre el papel */
  --tintaSuave:#43494F;   /* 9,1:1 */
  --tintaTenue:#666D75;   /* 5,4:1 — piso duro, sigue pasando AA de cuerpo */

  /* — EL ACENTO ES CASI-NEGRO, como la pastilla de la referencia: el boton
     principal es solido oscuro con texto papel. Sin color cromatico propio,
     porque el unico color de la pantalla lo pone el producto del cliente. — */
  --acento:#0E1013;
  --acentoSobre:#FFFFFF;
  --acentoTenue:rgba(14,16,19,.06);
  --acentoVivo:#000000;

  /* — El color de los datos, en su propia llave: un cliente con marca propia
     cambia SOLO esta y sus 90 elementos de grafica lo siguen. — */
  --dato:#0E1013;

  --acentoRGB:14 16 19;
  --fondoRGB:251 251 252;

  --linea:rgba(14,16,19,.10);          /* separador decorativo: jamas identifica un control */
  --lineaFuerte:rgba(14,16,19,.16);
  /* MEDIDO 2026-08-29: 3,16:1 sobre superficie y 3,09:1 sobre fondoAlt — las dos
     superficies donde de verdad se pintan los controles. El valor anterior venia
     de la piel oscura (blanco al 34%) y sobre papel claro media 1:1 exacto: los
     chips del formulario eran texto suelto sin caja. Un control que no se ve
     no es un control. */
  --bordeControl:rgba(14,16,19,.46);

  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ── LOS 7 TAMANOS. Ningun font-size del archivo esta fuera de esta lista. ── */
  --fs-h1:clamp(2.125rem,5.4vw,3.75rem);
  --fs-h2:clamp(1.625rem,2.9vw,2.375rem);
  /* Medidos EN PANTALLA a 1440px, los saltos salian 40/38 = 1,05 y 17/16 = 1,06:
     siete tamanos en la lista y tres pares indistinguibles entre si, que es
     justo lo que se lee como "aqui no hay jerarquia". La cifra sube y el lede se
     funde con el h3: menos tamanos distintos, y cada salto por encima de 1,25. */
  --fs-cifra:clamp(2.25rem,3.6vw,3rem);
  --fs-lede:clamp(1.0625rem,1.45vw,1.25rem);
  --fs-h3:1.25rem;     /* era 1.125rem = 18px: solo un 12% por encima del cuerpo,
                          que es jerarquia plana. 20px da el escalon de 1,25 */
  --fs-base:1rem;
  --fs-mono:.75rem;      /* 12px — piso duro de texto de interfaz */

  /* ── 1 curva, 4 duraciones ── */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-cursor:60ms;
  --t-reposo:220ms;
  --t-panel:300ms;
  --t-entra:520ms;

  --r:10px; --r-chico:6px; --r-panel:14px; --r-pill:999px;
  --ancho:1200px;
  --medida:64ch;          /* columna de lectura. Se verifica midiendo el glifo, no estimando */
  --gutter:20px;

  /* Dos ritmos verticales, no uno. Las cuatro capacidades son una CORRIDA —
     se leen como un solo capítulo— así que respiran menos entre ellas que
     entre dos secciones independientes. Sin esta distinción, cuatro secciones
     con pantalla propia costaban 464px de puro aire. */
  --pad-sec:clamp(24px,2.1vw,28px);
  --pad-cap:clamp(18px,1.6vw,22px);
  /* La piel vigente es clara: sin esto el navegador pintaba barras de scroll y
     controles nativos oscuros sobre papel claro — otro resto de la re-piel. */
  color-scheme:light;
}
@media(min-width:760px){:root{--gutter:32px}}
@media(min-width:1100px){:root{--gutter:48px}}

*{margin:0;padding:0;box-sizing:border-box}
/* el agente de usuario le pone borde y padding propios a fieldset: sin esto sale
   una caja gris alrededor del grupo de opciones del formulario. Se vio mirando
   una captura, no leyendo el CSS. */
fieldset{border:0;min-width:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* SIN overflow-x:hidden a proposito. Lo tenia, y lo que hacia era TAPAR
   desbordes en vez de evitarlos: las tablas de los mockups se salian del panel
   en movil y la ultima columna se recortaba en silencio, con la pagina sin
   scroll lateral y por tanto con aspecto de estar bien. Cada contenido ancho
   scrollea ahora dentro de su propia caja (.tablaEnv, .visor__tabs) y el
   resplandor del hero lo recorta .hero. */
body{
  background:var(--fondo);color:var(--tinta);
  font-family:var(--sans);font-size:var(--fs-base);line-height:1.6;
  letter-spacing:-.005em;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
code,kbd{font-family:var(--mono);font-size:var(--fs-base)}
.precarga *,.precarga *::before,.precarga *::after{transition:none!important;animation:none!important}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:2px}

.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:-9999px;top:0;z-index:200;background:var(--acento);color:var(--acentoSobre);
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:0 0 var(--r) 0;
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase}
.saltar:focus{left:0}

/* ── tipografia ── */
h1,h2,h3{text-wrap:balance;letter-spacing:-.028em;font-weight:500}
h1{font-size:var(--fs-h1);line-height:1.02;font-variation-settings:'wght' 490}
h2{font-size:var(--fs-h2);line-height:1.1;font-variation-settings:'wght' 490}
h3{font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.018em;font-variation-settings:'wght' 540}
p{text-wrap:pretty}
.lede{font-size:var(--fs-lede);line-height:1.55;color:var(--tintaSuave);max-width:var(--medida)}
.mono{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--tintaTenue);font-variation-settings:'wght' 450}
/* Las mayusculas solo aguantan ETIQUETAS cortas: leemos las palabras por su
   silueta (astas y colas) y la caja alta la borra. Medido por el detector: seis
   lineas de 32 a 73 caracteres iban en versalita corrida. Estas van en caja
   baja y conservan la mono, que es lo que da el registro tecnico. */
.mono--frase{text-transform:none;letter-spacing:.02em}
.rotulo{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
.rotulo::before{content:"";width:20px;height:1px;background:var(--acento);flex:none}

.env{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--pad-sec);position:relative}
.sec--alt{background:var(--fondoAlt)}
.sec__cab{max-width:var(--medida);margin-bottom:clamp(16px,1.7vw,20px)}
.sec__cab .lede{margin-top:10px;font-size:var(--fs-base);max-width:74ch}

/* Una costura de 1px que se apaga en los bordes. Un borde a todo lo ancho corta
   la pagina en dos; este la cose. Va solo entre secciones del MISMO plano —
   entre planos distintos el cambio de fondo ya hace el trabajo. */
.costura{position:relative}
.costura::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--lineaFuerte) 18%,var(--lineaFuerte) 82%,transparent)}

/* ═══ CABECERA ═══ */
.nav{position:sticky;top:0;z-index:100;background:rgb(var(--fondoRGB) / .82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea)}
.nav__in{display:flex;align-items:center;gap:24px;min-height:64px}
/* min-height 44px en TODO lo que se toca. Medido en el navegador: sin esto la
   marca y los enlaces de correo salian a 29px, que es la mitad de un pulgar. */
.marca{display:inline-flex;align-items:center;gap:2px;min-height:44px;font-size:var(--fs-h3);
  letter-spacing:-.03em;font-variation-settings:'wght' 560;flex:none}
.marca__punto{width:6px;height:6px;border-radius:var(--r-pill);background:var(--acento);
  display:inline-block;margin-left:5px;transform:translateY(-1px)}
.nav__menu{display:none;gap:26px;margin-left:auto}
.nav__link{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-base);
  color:var(--tintaSuave);position:relative}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:11px;height:1px;background:var(--acento);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-reposo) var(--ease)}
.nav__cta{margin-left:auto}
@media(min-width:900px){.nav__menu{display:flex}.nav__cta{margin-left:0}}

/* ═══ BOTONES ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 22px;border-radius:var(--r);border:0;cursor:pointer;
  font-family:var(--sans);font-size:var(--fs-base);font-variation-settings:'wght' 520;
  letter-spacing:-.01em;text-align:center;
  transition:transform var(--t-cursor) var(--ease),opacity var(--t-cursor) var(--ease)}
.btn--solido{background:var(--acento);color:var(--acentoSobre)}
.btn--chico{min-height:44px;padding:0 14px}
.btn__f{transition:transform var(--t-reposo) var(--ease)}
/* Color, fondo y anillo CAMBIAN pero no se ANIMAN. La regla de la casa solo
   permite animar transform, opacity y clip-path, y a 60ms nadie percibe la
   diferencia entre instantaneo y animado. Verificado sobre la hoja SERVIDA:
   cero propiedades fuera de esa lista en cualquier transition del archivo. */

/* ═══ PORTADA ═══ */
.hero{position:relative;padding-block:clamp(36px,3.9vw,54px) clamp(22px,2.3vw,28px);overflow:hidden}
/* La profundidad viene de capas y luz, no de mas colores: un solo pozo calido
   detras del titular. Sin blur() — un radial de varias paradas ya sale suave y
   no cuesta una capa de composicion. */
.hero__luz{position:absolute;inset:-22% -4% -34% -4%;z-index:0;pointer-events:none;
  background:radial-gradient(46% 52% at 34% 44%,rgb(var(--acentoRGB) / .20) 0%,rgb(var(--acentoRGB) / .09) 34%,
              rgb(var(--acentoRGB) / .03) 58%,transparent 76%)}
.hero__in{position:relative;z-index:1;max-width:920px}
.hero h1{margin-bottom:16px}
.hero .lede{max-width:62ch}
.hero__acc{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px}
.hero__correo{display:inline-flex;align-items:center;min-height:44px;color:var(--tintaSuave);
  font-size:var(--fs-base);box-shadow:inset 0 -1px 0 0 var(--linea)}

/* ═══ LA TIRA DE EVIDENCIA — donde la referencia pone logos de clientes ═══ */
.evid{border-block:1px solid var(--linea);background:var(--fondoAlt);padding-block:18px}
/* 54ch AQUI equivale a ~78 caracteres reales por linea: el "ch" CSS mide el
   cero de la fuente (10,6px en esta) y la media real de un parrafo es 7,2px.
   El valor anterior (96ch) juraba una medida de lectura y en pantalla eran
   141 caracteres por linea — medido con un span que hereda la fuente. */
.evid__nota{max-width:54ch;color:var(--tintaSuave);margin-bottom:16px;font-size:var(--fs-base)}
.evid__fila{display:flex;align-items:center;gap:14px 30px;flex-wrap:wrap}
.evid__rej{flex:1 1 560px;display:grid;gap:18px 28px;grid-template-columns:repeat(2,1fr);min-width:0}
@media(min-width:1040px){.evid__rej{grid-template-columns:repeat(4,1fr)}}
.cifra b{display:block;font-size:var(--fs-cifra);line-height:1;letter-spacing:-.04em;
  font-variation-settings:'wght' 500;color:var(--tinta)}
.cifra span{display:block;margin-top:7px;color:var(--tintaSuave);font-size:var(--fs-base);line-height:1.35}
.cifra .mono{display:block;margin-top:6px}

/* ═══════════════════════════════════════════════════════════════════════════
   LA CORRIDA DE CAPACIDADES — cada una con su propia pantalla.
   La primera va a todo el ancho (es el plano general del producto, el momento
   de "esto es software de verdad"); las tres siguientes van a dos columnas
   alternando lado, que es lo que da ritmo sin gastar alto.
   ══════════════════════════════════════════════════════════════════════════ */
.cap{padding-block:var(--pad-cap);position:relative}
.cap--abre{padding-top:var(--pad-sec)}
.cap--cierra{padding-bottom:var(--pad-sec)}
.cap__rej{display:grid;gap:24px}
@media(min-width:1000px){
  .cap__rej{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:52px;align-items:center}
  /* Al invertir el lado tambien se invierten las FRACCIONES: sin esto el visual
     caia en la columna angosta (.86fr ≈ 450px) y el portal no cabia — la tabla
     envolvia cada celda y la tercera pestana nacia cortada. Medido, no teoria.
     La regla vive en la REJILLA hija, no en la seccion: la seccion no es grid. */
  .cap--inv .cap__rej{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
  .cap--inv .cap__vis{order:-1}
}
.cap__txt h2{margin-bottom:12px}
.cap__txt .lede{font-size:var(--fs-base)}
.cap__lista{margin-top:16px;display:grid;gap:9px;list-style:none}
.cap__lista li{display:flex;gap:10px;color:var(--tintaSuave);line-height:1.45}
.cap__lista svg{color:var(--acento);flex:none;margin-top:4px}
.cap__cierre{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(18px,1.8vw,22px);
  padding-top:26px;border-top:1px solid var(--linea)}
.cap__cierre p{color:var(--tintaSuave);flex:1 1 300px;min-width:0;max-width:56ch}

/* ═══ EL PANEL DE PRODUCTO — el objeto que flota ═══
   Sin marco de navegador, sin semaforos, sin laptop: 0 de 9 sitios premium los
   usa y es el tell numero uno de plantilla. Lo confirma el caso de estudio, que
   publica sus capturas a sangre. La profundidad la dan el anillo interior, el
   anillo oscuro exterior y una caida tenida del propio fondo. */
.ui__caja{position:relative}
.ui__luz{position:absolute;inset:-7% -3% -13% -3%;z-index:0;pointer-events:none;
  background:radial-gradient(52% 46% at 50% 50%,rgb(var(--acentoRGB) / .26) 0%,rgb(var(--acentoRGB) / .10) 40%,transparent 74%)}
/* Los anillos y la caida se pintaban con blanco y con el propio color del
   fondo: en la piel oscura eso ERA la sombra, y en la clara medida es un halo
   invisible (1:1). El filo lo da la linea de tinta y la caida el negro puro,
   que es luz y sombra, no identidad. */
.ui{position:relative;z-index:1;border-radius:var(--r-panel);overflow:hidden;
  background:linear-gradient(180deg,var(--superficieAlta) 0%,var(--superficie) 46%,var(--fondoAlt) 100%);
  box-shadow:inset 0 0 0 1px var(--linea),
             0 1px 2px rgb(0 0 0 / .05),
             0 22px 44px -22px rgb(0 0 0 / .16)}
.ui__barra{display:flex;align-items:center;gap:12px;padding:11px 16px;
  border-bottom:1px solid var(--linea)}
/* En caja baja a proposito: son rotulos de hasta 34 caracteres. Y ojo con el
   arreglo que NO funciono: ponerles la clase .mono--frase no bastaba, porque
   las dos reglas tienen la misma especificidad y esta va DESPUES en el archivo,
   asi que ganaba el uppercase. El orden decide cuando la especificidad empata. */
.ui__nom{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;
  color:var(--tintaSuave)}
.ui__tag{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--tintaTenue);flex:none}
.ui__tag::before{content:"";width:5px;height:5px;border-radius:var(--r-pill);background:var(--acento);flex:none}
.ui__cuerpo{display:grid;gap:1px;background:var(--linea)}
@media(min-width:820px){.ui__cuerpo{grid-template-columns:186px 1fr}}
.ui__lado{display:none;background:var(--fondoAlt);padding:14px 12px}
@media(min-width:820px){.ui__lado{display:block}}
.ui__main{background:var(--superficie);padding:clamp(16px,2.2vw,22px);min-width:0}
.ui__it{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r-chico);
  font-size:var(--fs-base);color:var(--tintaTenue);line-height:1.2}
.ui__it--on{background:var(--acentoTenue);color:var(--acento)}
.ui__it i{width:5px;height:5px;border-radius:1px;background:currentColor;flex:none;opacity:.65}
.ui__sep{height:1px;background:var(--linea);margin:11px 10px}

.ui__tit{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:13px}
.ui__tit b{font-size:var(--fs-h3);font-variation-settings:'wght' 540;letter-spacing:-.018em}
.ui__tit span{color:var(--tintaTenue);font-size:var(--fs-base)}
.ui__sub{margin-top:17px}
/* Las notas al pie de los paneles, acotadas: en mono el avance es fijo, asi
   que 76ch son 76 caracteres reales — bajo el techo de 80. A panel completo
   llegaban a 117. */
.ui__main p.mono--frase{max-width:76ch}

/* La versión estrecha del panel, para las capacidades a dos columnas: sin
   barra lateral, porque a 560px de ancho el riel se come la mitad útil. */
.ui--esbelto .ui__cuerpo{grid-template-columns:1fr}
.ui--esbelto .ui__lado{display:none}

/* piezas internas compartidas por todos los tableros */
.campo{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 13px;border-radius:var(--r-chico);background:var(--fondoAlt);
  box-shadow:inset 0 0 0 1px var(--linea)}
.campo em{font-style:normal;color:var(--tintaTenue);font-size:var(--fs-base)}
.campo b{font-variation-settings:'wght' 520;letter-spacing:-.015em}
.pila{display:grid;gap:8px}
.res{display:grid;gap:8px}
.res__f{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:8px;border-bottom:1px solid var(--linea)}
.res__f:last-child{border-bottom:0;padding-bottom:0}
.res__f em{font-style:normal;color:var(--tintaSuave)}
.res__f b{font-size:var(--fs-h3);letter-spacing:-.03em;font-variation-settings:'wght' 520}
.res__f b.mas{color:var(--acento)}
.rej2{display:grid;gap:18px}
@media(min-width:640px){.rej2{grid-template-columns:1fr 1fr;gap:24px}}

/* La tabla desborda su panel por debajo de ~440px. Sin este envoltorio,
   overflow-x:hidden del body se COMIA la ultima columna en silencio: la pagina
   no scrolleaba de lado, asi que parecia bien y estaba recortada. El contenido
   ancho scrollea DENTRO de su propia caja, nunca contra el cuerpo. tabindex=0
   para que tambien se pueda desplazar con el teclado. */
.tablaEnv{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablaEnv:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.tabla{width:100%;min-width:400px;border-collapse:collapse;font-size:var(--fs-base)}
.tabla th{text-align:left;padding:0 10px 8px 0;font-family:var(--mono);font-size:var(--fs-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--tintaTenue);font-weight:400}
.tabla td{padding:10px 10px 10px 0;border-top:1px solid var(--linea);color:var(--tintaSuave);
  vertical-align:middle}
.tabla td:first-child{color:var(--tinta);font-variation-settings:'wght' 490}
/* La pill neutra llevaba un velo blanco que sobre papel claro es invisible: el
   estado quedaba en texto suelto. Ahora la neutra se dibuja con anillo y la
   activa con relleno de tinta tenue — dos geometrias distinguibles sobre
   cualquiera de las dos superficies donde viven (tabla blanca y tarjeta gris). */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px var(--linea);color:var(--tintaSuave)}
.pill--on{background:var(--acentoTenue);box-shadow:none;color:var(--acento)}
.pill i{width:5px;height:5px;border-radius:var(--r-pill);background:currentColor;flex:none}
.ini{width:28px;height:28px;border-radius:var(--r-pill);flex:none;display:grid;place-items:center;
  background:var(--acentoTenue);font-family:var(--mono);font-size:var(--fs-mono);
  letter-spacing:.02em;color:var(--tintaSuave)}
.persona{display:flex;align-items:center;gap:10px}
.barra{height:5px;border-radius:var(--r-pill);background:var(--linea);overflow:hidden;min-width:72px}
.barra i{display:block;height:100%;background:var(--acento);border-radius:inherit}
.grafo{width:100%;height:auto;display:block}
.leyenda{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px}
.leyenda span{display:inline-flex;align-items:center;gap:7px;color:var(--tintaSuave);font-size:var(--fs-base)}
.leyenda i{width:14px;height:3px;border-radius:2px;flex:none}

/* La tira de cifras del tablero. SIN caja: solo una regla arriba.
   Encajonarlas las convertia en tarjetas dentro de una tarjeta —ruido de
   profundidad que el detector marca y que ademas se ve barato— y una regla de
   1px separa igual de bien por una decima del peso visual. */
.mini{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:520px){.mini{grid-template-columns:repeat(3,1fr);gap:20px}}
.mini div{padding-top:9px;border-top:1px solid var(--lineaFuerte)}
.mini b{display:block;font-size:var(--fs-h3);letter-spacing:-.03em;font-variation-settings:'wght' 520}
.mini span{display:block;margin-top:3px;color:var(--tintaTenue);font-size:var(--fs-base);line-height:1.25}

/* ═══ GRÁFICA · EMBUDO POR ETAPAS ═══
   Se dibuja con HTML y no con SVG a proposito: asi los numeros son texto de
   verdad —seleccionable, escalable y leido por un lector de pantalla— en vez de
   glifos incrustados. La barra es un fondo detras del texto, no un elemento que
   se anime: nada aqui cambia de ancho en vivo.
   Y lleva CUENTAS, no porcentajes de conversion: un porcentaje dentro de una
   maqueta se lee como una promesa de resultado, y esta pagina no promete
   ninguno. La forma de embudo ya la da el ancho decreciente. */
.emb{display:grid;gap:7px;max-width:660px}
.emb__f{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 13px;border-radius:var(--r-chico);isolation:isolate;overflow:hidden}
.emb__b{position:absolute;inset:0;z-index:-1;width:var(--w);border-radius:inherit;
  background:rgb(var(--acentoRGB) / .13)}
.emb__f em{font-style:normal;color:var(--tintaSuave)}
.emb__f b{font-variation-settings:'wght' 520;letter-spacing:-.02em;flex:none}
/* La ultima fila del embudo se marca SOLO con tipografia y color: la cifra en
   acento y el rotulo en tinta plena. Antes llevaba relleno naranja al 30%, que
   compuesto sobre azul da un marron sucio; y despues un canto solido de 3px,
   que el detector marca como "pestaña lateral" —firma de plantilla—. El ancho
   decreciente de la barra ya dice que es el final del embudo. */
.emb__f--fin em{color:var(--tinta)}
.emb__f--fin b{color:var(--acento)}

/* ═══ GRÁFICA · ANILLO DE CUMPLIMIENTO ═══ */
.anillo{display:flex;align-items:center;gap:16px}
.anillo__g{flex:none;position:relative;width:92px;height:92px}
.anillo__g svg{transform:rotate(-90deg)}
.anillo__c{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.05}
.anillo__c b{font-size:var(--fs-h3);letter-spacing:-.03em;font-variation-settings:'wght' 540}
.anillo__l{display:grid;gap:9px;min-width:0}
.anillo__l div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:8px;border-bottom:1px solid var(--linea)}
.anillo__l div:last-child{border-bottom:0;padding-bottom:0}
.anillo__l em{font-style:normal;color:var(--tintaSuave)}
.anillo__l b{font-variation-settings:'wght' 520;flex:none}

.duoGraf{display:grid;gap:14px}
@media(min-width:840px){.duoGraf{grid-template-columns:1.3fr 1fr;gap:24px;align-items:start}}
.duoGraf .grafo{max-height:132px}
.duoGraf .calor svg{max-height:132px}

/* ═══ GRÁFICA · MAPA DE CALOR ═══ */
.calor{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.calor svg{flex:1 1 200px;min-width:0;height:auto}
.calor__esc{display:flex;align-items:center;gap:6px;color:var(--tintaTenue);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;text-transform:uppercase}
.calor__esc i{width:11px;height:11px;border-radius:2.5px;background:var(--acento);flex:none}

/* ═══ GRÁFICA · COMPARADOR DE ESCENARIOS ═══ */
.comp{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:560px){.comp{grid-template-columns:repeat(3,1fr)}}
.comp__c{padding:13px;border-radius:var(--r-chico);background:var(--fondoAlt);
  box-shadow:inset 0 0 0 1px var(--linea)}
.comp__c--gana{box-shadow:inset 0 0 0 1px var(--acento)}
.comp__t{display:flex;align-items:center;gap:7px;margin-bottom:11px}
.comp__t b{font-variation-settings:'wght' 540;letter-spacing:-.018em}
.comp__f{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-block:5px}
.comp__f em{font-style:normal;color:var(--tintaTenue);font-size:var(--fs-base)}
.comp__f b{font-variation-settings:'wght' 500;letter-spacing:-.02em}
.comp__f--dest{border-top:1px solid var(--linea);margin-top:6px;padding-top:9px}
.comp__f--dest b{color:var(--acento);font-size:var(--fs-h3);letter-spacing:-.03em}

/* ═══════════════════════════════════════════════════════════════════════════
   EL VISOR — muchas pantallas en el alto de una.
   Radios + labels: funciona SIN JavaScript y las flechas del teclado cambian de
   pieza solas. Los radios estan visualmente ocultos pero siguen siendo
   enfocables; el anillo de foco se pinta sobre su etiqueta.
   Es la unica razon por la que esta pagina puede enseñar nueve tableros sin
   medir el doble: un visor cuesta el alto de UN panel, no la suma de todos.
   ══════════════════════════════════════════════════════════════════════════ */
.visor{position:relative;border:0;min-width:0}
/* La tira de pestanas respira dentro de la ventana: sin esto la primera
   pestana tocaba el borde izquierdo del cromo al pixel. Los paneles si van a
   sangre a proposito — son la captura, no texto contra un filo. */
.visor.cromo>.visor__tabs{padding:10px 10px 4px}
.visor__radio{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
.visor__tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  padding-bottom:4px;margin-bottom:14px;scroll-snap-type:x proximity}
.visor__tabs::-webkit-scrollbar{display:none}
.tab{position:relative;display:inline-flex;align-items:center;gap:10px;flex:none;
  min-height:50px;padding:8px 15px;border-radius:var(--r);cursor:pointer;scroll-snap-align:start;
  background:var(--superficie);box-shadow:inset 0 0 0 1px var(--linea);
  transition:transform var(--t-cursor) var(--ease)}
.tab svg{flex:none;opacity:.9}
.tab__col{display:flex;flex-direction:column;gap:2px;min-width:0}
.tab__t{font-size:var(--fs-base);font-variation-settings:'wght' 500;letter-spacing:-.015em;color:var(--tintaSuave)}
.tab__k{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tintaTenue)}

.paneles{position:relative}
.pan{display:none}
.pan__pie{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 28px;margin-top:12px}
.pan__txt{flex:1 1 320px;max-width:var(--medida)}
.pan__txt p{color:var(--tintaSuave);margin-top:5px;max-width:58ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 240px;align-content:flex-start}
.chip{display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--r-pill);
  background:var(--acentoTenue);color:var(--acento);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.07em;text-transform:uppercase}

/* — estado activo y foco de los dos visores. Se resuelve con :has() en vez de
     con hermanos generales porque el visor de sectores lleva su tira de
     pestañas en un sitio distinto del arbol, y una cadena de hermanos ahi
     habria dejado la mitad de los estados muertos en silencio. — */
.visor:has(#ce1:checked) [for=ce1],
.visor:has(#ce2:checked) [for=ce2],
.visor:has(#ce3:checked) [for=ce3],
.visor:has(#ce4:checked) [for=ce4],
.visor:has(#nq1:checked) [for=nq1],
.visor:has(#nq2:checked) [for=nq2],
.visor:has(#nq3:checked) [for=nq3],
.visor:has(#nq4:checked) [for=nq4],
.visor:has(#nq5:checked) [for=nq5],
.visor:has(#mu1:checked) [for=mu1],
.visor:has(#mu2:checked) [for=mu2],
.visor:has(#mu3:checked) [for=mu3]{background:var(--acento);box-shadow:none}
/* El anillo de foco del teclado se pinta en el LABEL, porque el radio que lo
   recibe es invisible (1px, opacity 0). Sin esto las flechas cambian de
   pestana pero no se ve donde estas parado — 2.4.7 justo en el elemento
   central de la pagina. Mismo molde :has() que el estado activo de arriba.
   UN solo bloque a proposito: estuvo declarado dos veces al mismo nivel (con
   offset 2 y 3) y ganaba en silencio el de abajo — editar el de arriba no
   habria hecho nada. Queda el valor que ya mandaba. */
.visor:has(#ce1:focus-visible) [for=ce1],
.visor:has(#ce2:focus-visible) [for=ce2],
.visor:has(#ce3:focus-visible) [for=ce3],
.visor:has(#ce4:focus-visible) [for=ce4],
.visor:has(#nq1:focus-visible) [for=nq1],
.visor:has(#nq2:focus-visible) [for=nq2],
.visor:has(#nq3:focus-visible) [for=nq3],
.visor:has(#nq4:focus-visible) [for=nq4],
.visor:has(#nq5:focus-visible) [for=nq5],
.visor:has(#mu1:focus-visible) [for=mu1],
.visor:has(#mu2:focus-visible) [for=mu2],
.visor:has(#mu3:focus-visible) [for=mu3]{outline:2px solid var(--acento);outline-offset:3px}
.visor:has(#ce1:checked) [for=ce1] .tab__t,.visor:has(#ce1:checked) [for=ce1] .tab__k,
.visor:has(#ce2:checked) [for=ce2] .tab__t,.visor:has(#ce2:checked) [for=ce2] .tab__k,
.visor:has(#ce3:checked) [for=ce3] .tab__t,.visor:has(#ce3:checked) [for=ce3] .tab__k,
.visor:has(#ce4:checked) [for=ce4] .tab__t,.visor:has(#ce4:checked) [for=ce4] .tab__k,
.visor:has(#nq1:checked) [for=nq1] .tab__t,.visor:has(#nq1:checked) [for=nq1] .tab__k,
.visor:has(#nq2:checked) [for=nq2] .tab__t,.visor:has(#nq2:checked) [for=nq2] .tab__k,
.visor:has(#nq3:checked) [for=nq3] .tab__t,.visor:has(#nq3:checked) [for=nq3] .tab__k,
.visor:has(#nq4:checked) [for=nq4] .tab__t,.visor:has(#nq4:checked) [for=nq4] .tab__k,
.visor:has(#nq5:checked) [for=nq5] .tab__t,.visor:has(#nq5:checked) [for=nq5] .tab__k,
.visor:has(#mu1:checked) [for=mu1] .tab__t,.visor:has(#mu1:checked) [for=mu1] .tab__k,
.visor:has(#mu2:checked) [for=mu2] .tab__t,.visor:has(#mu2:checked) [for=mu2] .tab__k,
.visor:has(#mu3:checked) [for=mu3] .tab__t,.visor:has(#mu3:checked) [for=mu3] .tab__k{color:var(--acentoSobre)}
.visor:has(#ce1:checked) [data-ce="1"],
.visor:has(#ce2:checked) [data-ce="2"],
.visor:has(#ce3:checked) [data-ce="3"],
.visor:has(#ce4:checked) [data-ce="4"],
.visor:has(#nq1:checked) [data-nq="1"],
.visor:has(#nq2:checked) [data-nq="2"],
.visor:has(#nq3:checked) [data-nq="3"],
.visor:has(#nq4:checked) [data-nq="4"],
.visor:has(#nq5:checked) [data-nq="5"],
.visor:has(#mu1:checked) [data-mu="1"],
.visor:has(#mu2:checked) [data-mu="2"],
.visor:has(#mu3:checked) [data-mu="3"]{display:block}

/* ═══ LA DEMOSTRACIÓN DEL AISLAMIENTO — la misma consulta, dos sesiones ═══
   Dos tarjetas lado a lado con filas de la MISMA forma: en la sesión de
   dirección están todas; en la del miembro, solo la suya. La fila vacía se
   dibuja discontinua a propósito: es la única pieza de la página que enseña
   una AUSENCIA, y eso es exactamente el argumento. */
.vista{background:var(--fondoAlt);border-radius:var(--r-chico);
  box-shadow:inset 0 0 0 1px var(--linea);padding:12px;min-width:0}
.vista__cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:6px 8px;margin-bottom:10px}
.vista__cab b{font-variation-settings:'wght' 540;letter-spacing:-.015em}
.vista__fila{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;border-radius:var(--r-chico);background:var(--superficie);
  box-shadow:inset 0 0 0 1px var(--linea);margin-top:6px}
.vista__fila em{font-style:normal;color:var(--tintaSuave);min-width:0}
.vista__vacio{margin-top:6px;padding:8px 10px;border-radius:var(--r-chico);
  border:1px dashed var(--lineaFuerte);color:var(--tintaTenue);
  font-size:var(--fs-base);line-height:1.4}

/* ═══ DOS SITIOS EN VIVO ═══ */
.casos{display:grid;gap:24px}
@media(min-width:860px){.casos{grid-template-columns:1fr 1fr;gap:28px}}
/* Cuando la tarjeta lleva ventana cromo (los minis de servicio), las dos
   ventanas igualan su alto: el contenido de una es mas corto y sin esto los
   titulos de abajo quedaban escalonados 30px. El aire sobrante queda DENTRO
   de la ventana corta, como en una ventana real. En los casos con JPEG no
   cambia nada: ahi no hay cromo y la foto ya iguala por proporcion. */
.casos article{display:flex;flex-direction:column}
.casos .cromo{flex:1 0 auto;display:flex;flex-direction:column}
.casos .cromo>.ui__caja{flex:1;display:flex;flex-direction:column}
.casos .cromo .ui{flex:1}
.caso__marco{border-radius:var(--r-panel);overflow:hidden;position:relative;
  box-shadow:0 0 0 1px var(--linea),0 1px 2px rgb(0 0 0 / .05),
             0 22px 44px -24px rgb(0 0 0 / .16)}
/* El recorte se decide AQUI, no en el archivo: el JPEG queda byte a byte igual
   —su huella sigue valiendo para el guardian de marcas— y se enseña menos alto.
   Recuperar 150px de pagina sin tocar un pixel del original. */
.caso__marco img{width:100%;height:auto;aspect-ratio:1200/425;object-fit:cover;object-position:top center}
/* 1200x600 mostrados a 1200/425: la ventana util es de 425px y la unica banda
   que cabe entera (antetitulo + titular completo + parrafo) empieza en el 40%.
   Mas abajo cortaba la primera linea del titular. El JPEG no se toca. */
.caso__marco--bajo img{object-position:center 40%}
.caso__txt{margin-top:12px}
.caso__txt h3{margin-bottom:5px}
.caso__txt p{color:var(--tintaSuave);max-width:52ch}
.caso__meta{margin-top:9px}

/* ═══ EL DIAGNOSTICO ═══ */
.diag{display:grid;gap:30px}
@media(min-width:960px){.diag{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:52px;align-items:start}}
.vin{padding-top:14px;margin-top:14px;border-top:1px solid var(--linea)}
.vin b{display:block;margin-bottom:3px;font-variation-settings:'wght' 520}
.vin span{color:var(--tintaSuave);font-size:var(--fs-base)}
.forma{background:var(--superficie);border-radius:var(--r-panel);padding:clamp(20px,2.6vw,28px);
  box-shadow:inset 0 0 0 1px var(--linea),0 26px 54px -30px rgb(0 0 0 / .16)}
.grupo{margin-bottom:20px}
.grupo:last-of-type{margin-bottom:0}
.grupo>legend,.eti{display:block;padding:0;margin-bottom:10px;font-variation-settings:'wght' 520;
  letter-spacing:-.015em}
.ayuda{color:var(--tintaTenue);font-size:var(--fs-base);margin-top:-5px;margin-bottom:10px}
.ops{display:flex;flex-wrap:wrap;gap:9px}
.op{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 15px;
  border-radius:var(--r-pill);cursor:pointer;color:var(--tintaSuave);
  box-shadow:inset 0 0 0 1px var(--bordeControl)}
.op input{position:absolute;opacity:0;width:1px;height:1px}
.op:has(input:checked){background:var(--acento);color:var(--acentoSobre);box-shadow:none}
.op:has(input:focus-visible){outline:2px solid var(--acento);outline-offset:3px}
.duo{display:grid;gap:14px}
@media(min-width:560px){.duo{grid-template-columns:1fr 1fr}}
.cmp{display:block}
.cmp input,.cmp select{width:100%;min-height:46px;padding:0 13px;border-radius:var(--r-chico);
  background:var(--fondoAlt);color:var(--tinta);font-family:var(--sans);font-size:var(--fs-base);
  border:0;box-shadow:inset 0 0 0 1px var(--bordeControl)}
.cmp select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--tintaSuave) 50%),
                   linear-gradient(135deg,var(--tintaSuave) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.cmp input::placeholder{color:var(--tintaTenue)}
.cmp input:focus-visible,.cmp select:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.miel{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.envio{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--linea)}
.aviso{color:var(--tintaSuave);font-size:var(--fs-base);flex:1 1 200px;min-width:0}

/* ═══ PIE ═══ */
.pie{border-top:1px solid var(--linea);padding-block:20px;background:var(--fondoAlt)}
.pie__in{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:baseline}
.pie__correo{display:inline-flex;align-items:center;min-height:44px;color:var(--tinta);
  box-shadow:inset 0 -1px 0 0 var(--acento)}
/* 54ch = ~78 caracteres reales (ver la nota de .evid__nota): 88ch daban 129. */
.pie__leg{color:var(--tintaTenue);font-size:var(--fs-base);max-width:54ch;margin-top:12px}

/* ═══ REACCION AL CURSOR — y su gemela de teclado FUERA del @media ═══ */
.btn:focus-visible{transform:translateY(-1px)}
.btn:focus-visible .btn__f{transform:translateX(3px)}
.btn--solido:focus-visible{background:var(--acentoVivo)}
.nav__link:focus-visible{color:var(--tinta)}
.nav__link:focus-visible::after{transform:scaleX(1)}
.hero__correo:focus-visible,.pie__correo:focus-visible{color:var(--acento);box-shadow:inset 0 -1px 0 0 var(--acento)}
@media(hover:hover){
  .btn:hover{transform:translateY(-1px)}
  .btn--solido:hover{background:var(--acentoVivo)}
  .btn:hover .btn__f{transform:translateX(3px)}
  .nav__link:hover{color:var(--tinta)}
  .nav__link:hover::after{transform:scaleX(1)}
  .hero__correo:hover,.pie__correo:hover{color:var(--acento);box-shadow:inset 0 -1px 0 0 var(--acento)}
  .tab:hover{transform:translateY(-1px);background:var(--superficieAlta)}
  .op:hover{color:var(--tinta);box-shadow:inset 0 0 0 1px var(--acento)}
  .op:has(input:checked):hover{background:var(--acentoVivo);color:var(--acentoSobre)}
}

/* ═══ ENTRADA — solo la portada, y solo si el visitante no pidio calma ═══ */
@media(prefers-reduced-motion:no-preference){
  .hero__in>*{opacity:0;transform:translateY(12px);animation:entra var(--t-entra) var(--ease) both}
  .hero__in>*:nth-child(2){animation-delay:80ms}
  .hero__in>*:nth-child(3){animation-delay:160ms}
  @keyframes entra{to{opacity:1;transform:none}}
}

/* — EL MURO DE LOGOS. Patron de la referencia: fila ancha, logos grandes y
   ATENUADOS. Van en escala de grises y al 55% porque un muro a todo color
   compite con el titular y se lee a feria de proveedores; al pasar el raton,
   el apuntado recupera su color y sus hermanos bajan — el foco por resta, que
   es el que se lee caro.

   Los logos se sirven por ALTO con el ancho libre: son marcas ajenas de
   proporciones que no controlamos, y encerrarlas en una caja fija las
   deforma. Deformar la marca de otro no es un detalle estetico. — */
/* En caja baja: son 42 caracteres corridos, y la regla de la casa dice que las
   mayusculas solo aguantan etiquetas cortas — leemos por silueta y la caja
   alta la borra. Fue la ultima linea larga en versalita que quedaba. */
.muro__rotulo{
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.04em;
  color:var(--tintaTenue);
  text-align:center;margin:0 0 clamp(20px,2.4vw,30px)
}
.muro{
  list-style:none;margin:0 0 clamp(26px,3vw,40px);padding:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(28px,5vw,66px)
}
.muro__it{display:flex;align-items:center}
.muro__it img{
  height:clamp(30px,3.6vw,44px);width:auto;max-width:190px;object-fit:contain;
  filter:grayscale(1);opacity:.55;
  transition:opacity var(--t-reposo) var(--ease),filter var(--t-reposo) var(--ease)
}
@media (hover:hover){
  .muro:hover .muro__it img{opacity:.3}
  .muro__it img:hover{opacity:1;filter:grayscale(0)}
}
@media (prefers-reduced-motion:reduce){ .muro__it img{transition:none} }

/* — CROMO DE NAVEGADOR (2026-08-28). Un grafico suelto sobre el fondo se lee
   como ilustracion; el mismo grafico dentro de una ventana se lee como
   PRODUCTO. Es el gesto que la referencia repite en cada seccion, y era lo que
   le faltaba a esta pagina para dejar de parecer un articulo.

   Va en CSS sobre el contenedor que ya existia: enmarcar un mockup nuevo es
   ponerle la clase y su atributo de direccion, no copiar marcado. La barra es
   decorativa entera (aria-hidden por construccion: es un ::before), asi que no
   agrega ruido a un lector de pantalla — la direccion es utileria, no un dato. */
.cromo{
  /* relative propio: hasta ahora el cromo solo vivia sobre fieldset.visor (ya
     posicionado) y su barra ::before se colgaba de ese ancestro por accidente.
     Un cromo suelto la habria pintado contra la seccion entera. */
  position:relative;
  background:var(--superficie);
  border:1px solid var(--linea);
  border-radius:var(--r-panel);
  overflow:hidden;
  padding-top:42px;
  box-shadow:0 1px 2px rgb(0 0 0 / .04),
             0 24px 48px -20px rgb(0 0 0 / .14);
}
.cromo::before{
  content:attr(data-url);
  position:absolute;inset:0 0 auto 0;height:42px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:var(--fs-mono);color:var(--tintaTenue);
  background:var(--fondoAlt);
  border-bottom:1px solid var(--linea);
  /* Los tres puntos, dibujados con un solo degradado: sin marcado extra y sin
     una sola peticion mas. */
  background-image:
    radial-gradient(circle 4px at 18px 21px, rgb(var(--acentoRGB) / .22) 98%, transparent 0),
    radial-gradient(circle 4px at 34px 21px, rgb(var(--acentoRGB) / .16) 98%, transparent 0),
    radial-gradient(circle 4px at 50px 21px, rgb(var(--acentoRGB) / .11) 98%, transparent 0);
  background-repeat:no-repeat;
}
@media(max-width:560px){
  /* .7rem = 11,2px: por encima del piso de 11px de texto de interfaz. El valor
     anterior (.66rem = 10,6px) lo perforaba y el detector lo marcaba. */
  .cromo::before{font-size:.7rem;justify-content:flex-end;padding-right:14px}
}

/* — EL MURO, IGUALADO POR AREA OPTICA. Cuatro marcas de proporciones muy
   distintas (un simbolo cuadrado, un logotipo cinco veces mas ancho que alto)
   no se igualan con una sola altura: eso reparte cuatro pesos visuales y el
   muro se ve desordenado sin que el ojo sepa por que. Cada una lleva la altura
   que la deja pesar lo mismo que sus vecinas. — */
.muro__it:nth-child(1) img{height:clamp(34px,4.2vw,50px)}   /* simbolo con texto debajo */
.muro__it:nth-child(2) img{height:clamp(20px,2.4vw,29px)}   /* logotipo ancho */
.muro__it:nth-child(3) img{height:clamp(19px,2.3vw,27px)}   /* logotipo ancho */
.muro__it:nth-child(4) img{height:clamp(26px,3.1vw,37px)}

/* — EL HERO CENTRADO, como la referencia. Un solo eje vertical para eyebrow,
   titular, bajada y botones es lo que produce la sensacion de orden; y la
   bajada se acota a una medida de lectura, porque una linea centrada muy larga
   obliga a barrer la cabeza para encontrar donde empieza la siguiente. — */
.hero__in{max-width:860px;margin-inline:auto;text-align:center}
.hero__in .lede{margin-inline:auto;max-width:56ch}
.hero__acc{justify-content:center}
.hero__luz{inset:-26% -10% -30% -10%}
@media(max-width:720px){
  .hero__in{text-align:left}
  .hero__in .lede{margin-inline:0}
  .hero__acc{justify-content:flex-start}
}

/* — EL ENLACE QUE ABRE EL CASO. Un portafolio sin destino pide un acto de fe;
   con dos enlaces que abren, el visitante verifica en diez segundos. La flecha
   diagonal avisa que sale del sitio — y es decorativa, porque el destino ya lo
   dice el texto del enlace. — */
.caso__ir{margin:14px 0 0}
.enlace-ir{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-weight:500;color:var(--tinta);text-decoration:none;
  border-bottom:1px solid rgb(var(--acentoRGB) / .28);
  transition:border-color var(--t-reposo) var(--ease)
}
@media (hover:hover){ .enlace-ir:hover{border-bottom-color:var(--acento)} }
.enlace-ir:focus-visible{outline:2px solid var(--acento);outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){ .enlace-ir{transition:none} }

/* ═══════════════════════════════════════════════════════════════════════════
   v5 · DE FOLLETO ÚNICO A SITIO DE SERVICIOS (2026-08-30)
   Roberto, sobre la v4: "No queda mucha claridad de qué es lo que vende...
   Deberían ir los servicios y luego, cuando tú entras, como una página dentro."
   El diagnóstico: la v4 mostraba la PRUEBA antes de la AFIRMACIÓN — "100/100
   casos de la suite" es oro para quien ya sabe que le construimos su CRM, y
   jerga para quien todavía no sabe qué vendemos.

   La reestructura: portada corta con cuatro tarjetas de servicio en lenguaje
   de dueño de negocio, y una página por servicio donde vive la profundidad
   (los visores, las pantallas, la evidencia fechada). La estética NO cambia:
   misma piel, mismos tokens, mismas reglas. Esta hoja pasa a ser COMPARTIDA
   por las cinco páginas — un solo lugar donde editar, cacheada entre páginas.
   ══════════════════════════════════════════════════════════════════════════ */

/* — la página en la que estás, marcada en el menú. El subrayado que en las
     demás aparece al pasar el cursor, aquí está fijo: mismo vocabulario. — */
.nav__link[aria-current="page"]{color:var(--tinta)}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}

/* — portada de página de servicio: el mismo hero, menos alto y alineado a la
     izquierda — es un capítulo, no la fachada. — */
.hero--pag{padding-block:clamp(30px,3.2vw,44px) clamp(18px,2vw,24px)}
.hero--pag .hero__in{max-width:920px;margin-inline:0;text-align:left}
.hero--pag .hero__in .lede{margin-inline:0;max-width:64ch}
.hero--pag .hero__acc{justify-content:flex-start}
.hero--pag .hero__luz{inset:-30% -8% -40% -30%}

/* — botón de anillo: la acción secundaria. El sólido queda reservado para la
     única orden de la casa (el diagnóstico); entrar a un servicio es navegar,
     no comprometerse, y por eso pesa un escalón menos. — */
.btn--anillo{background:transparent;color:var(--tinta);
  box-shadow:inset 0 0 0 1px var(--bordeControl)}
.btn--anillo:focus-visible{box-shadow:inset 0 0 0 1px var(--acento)}
@media(hover:hover){ .btn--anillo:hover{box-shadow:inset 0 0 0 1px var(--acento)} }

/* ═══ LA REJILLA DE SERVICIOS — el corazón nuevo de la portada ═══
   Cuatro tarjetas: nombre, tres beneficios en palabras del dueño, una
   miniatura de su pantalla y la puerta a su página. La miniatura es
   decorativa (aria-hidden en el HTML): el argumento va en el texto, y la
   pantalla completa —con su rótulo de demostración— vive en la página del
   servicio. */
.svc{display:grid;gap:16px;margin-top:clamp(18px,2vw,24px)}
@media(min-width:880px){.svc{grid-template-columns:1fr 1fr;gap:24px}}
.svc__c{display:flex;flex-direction:column;gap:13px;min-width:0;
  padding:clamp(18px,2.2vw,26px);border-radius:var(--r-panel);
  background:var(--superficie);
  box-shadow:inset 0 0 0 1px var(--linea),0 1px 2px rgb(0 0 0 / .04),
             0 20px 44px -26px rgb(0 0 0 / .12)}
.svc__c h3{font-size:var(--fs-h3)}
/* UNA frase por tarjeta, no una lista: la portada muestra, la pagina del
   servicio explica. Pedido de Roberto (2026-08-30): "que sea sencillo de
   entender... no hay que explicar mucho". */
.svc__frase{color:var(--tintaSuave);line-height:1.5;max-width:44ch}
.svc__mini{border-radius:var(--r);background:var(--fondoAlt);
  box-shadow:inset 0 0 0 1px var(--linea);padding:12px;display:grid;gap:7px}
.svc__mini .campo,.svc__mini .emb__f{background:var(--superficie)}
.svc__ir{margin-top:auto;align-self:flex-start}
/* En mono el avance es fijo: 76ch son 76 caracteres reales, bajo el techo de
   80. Sin la medida, la nota corria 100 caracteres a todo el ancho del env —
   lo cazo el detector en la primera pasada sobre lo servido. */
.svc__nota{margin-top:14px;max-width:76ch}

/* ═══ CÓMO TRABAJAMOS — el método a la izquierda, la prueba a la derecha ═══
   Cada cifra vive PEGADA a la pregunta de dueño que responde: la evidencia
   después de la afirmación, nunca antes. */
.metodo{display:grid;gap:26px}
@media(min-width:960px){.metodo{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:52px;align-items:start}}
.qa{display:grid;gap:14px}
.qa>div{padding-top:11px;border-top:1px solid var(--lineaFuerte)}
.qa b{display:block;font-variation-settings:'wght' 540;letter-spacing:-.015em;margin-bottom:3px}
.qa span{display:block;color:var(--tintaSuave);line-height:1.45}
.qa .mono{display:block;margin-top:5px}
/* La version en fila: las tres reglas de la casa en la portada, sin cifras.
   El detalle y la evidencia fechada viven en cada pagina de servicio. */
.qa--fila{grid-template-columns:1fr}
@media(min-width:880px){.qa--fila{grid-template-columns:repeat(3,1fr);gap:28px}}

/* ═══ AGENDAMIENTO — la parrilla de bloques de un día ═══
   Vive en /websites/. Cada bloque es un estado, no un control: la pieza real
   es de la plataforma; esto es su retrato. */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:7px}
.slot{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 11px;border-radius:var(--r-chico);background:var(--fondoAlt);
  box-shadow:inset 0 0 0 1px var(--linea);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;color:var(--tintaSuave)}
.slot i{width:5px;height:5px;border-radius:var(--r-pill);background:currentColor;flex:none;opacity:.55}
.slot--tomado{background:var(--acentoTenue);color:var(--acento);box-shadow:none}
.slot--tomado i{opacity:1}

/* — lista de "qué se puede construir": la misma lista de beneficios, a dos
     columnas cuando cabe, porque son módulos y no argumentos. — */
.mod{display:grid;gap:9px 28px;list-style:none;margin:0;padding:0}
@media(min-width:720px){.mod{grid-template-columns:1fr 1fr}}
.mod li{display:flex;gap:10px;color:var(--tintaSuave);line-height:1.45}
.mod svg{color:var(--acento);flex:none;margin-top:4px}

/* — "moderno tecnológico" sin cambiar la piel: todo numero de dato en cifras
     tabulares, que es como se alinean los numeros en software de verdad.
     Cuesta una linea y se nota en cada mockup. — */
.cifra b,.campo b,.res__f b,.mini b,.emb__f b,.comp__f b,.anillo__l b,
.tabla td,.qa b,.slot,.vista__fila,.ui__tag{font-variant-numeric:tabular-nums}

/* — el hero gano un cuarto hijo (el antetitulo): sin esta linea el bloque de
     botones entraba ANTES que la bajada, porque solo habia retardo hasta el
     tercero. La entrada respeta el orden de lectura o no es una entrada. — */
@media(prefers-reduced-motion:no-preference){
  .hero__in>*:nth-child(4){animation-delay:240ms}
}