/* ══ Nunito, servida desde el sitio · _tipos.py ══ */
/* `font-weight:400 800` es el rango de la fuente variable: con una sola cara
   el navegador saca los cinco pesos que usa el sitio, sin falsear nada.
   `font-display:swap` mantiene lo que ya pasaba: el texto sale al instante con
   la letra del sistema y cambia a Nunito en cuanto esta. Nadie ve una pagina
   en blanco esperando a una tipografia. */
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 800;
  font-display:swap;src:url(tipos/nunito-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 800;
  font-display:swap;src:url(tipos/nunito-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* ══ fin Nunito ══ */
/* ══════════════════════════════════════════════════════════════════════════
   proceso.css · la hoja de las páginas internas de proceso
   La comparten /construccion/posventas, /entregas y /pre-entregas, y la usarán
   cartera, vinculación y escrituración. Ninguna página de proceso define
   estilos propios. Entre una y otra solo cambian dos cosas: los dos tokens de
   acento, en un <style> corto dentro de cada página, y el contenido de los
   cuatro arreglos del script — MK (la pantalla del hero), B (los seis
   beneficios), REL (los procesos hermanos) y PROCS (el menú de la nav).
   Se extrajo al construir la tercera: tres copias del mismo CSS son tres
   sitios donde hay que arreglar el mismo fallo.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   páginas internas de proceso
   El sistema de diseño es el del home y el de /construccion: mismos tokens,
   misma escala tipográfica, mismos tiempos, misma nav, mismo footer, misma
   firma de marca. Lo que sigue de este bloque es la base compartida, copiada
   sin tocar; lo propio de esta plantilla empieza más abajo.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* EL CORAL DE MARCA NO SE TOCA. DECISION DE MARIANA, 9-oct-2026.
     Con letra blanca encima da 3,05:1 y la WCAG AA pide 4,5 para texto de
     ese tamano, asi que el barrido lo marca 340 veces: una por cada boton
     coral en cada pagina y en cada ancho. NO ES UN DESCUIDO.
     Se le propuso #D63A14, que pasa AA con 4,69:1 manteniendo el matiz
     (11,6 grados) y la saturacion. Lo vio en el home, lado a lado:
     «se ve como mas rojo... no te autorizo para que cambies ese boton.
      Deja el que esta. EE6C4D».
     Es ademas el mismo coral que ya usa capta.co en produccion.
     Para CORAL COMO LETRA sobre fondo claro existe --coral-texto, que si
     pasa; esto de aqui es solo el relleno. Antes de volver a proponerlo,
     leer esto. */
  --azul:#3D5A7F; --coral:#EE6C4D; --claro:#8BB6CD; --gris:#F0F0F0;
  /* CORAL DE TEXTO. El coral de marca #EE6C4D da 3,05:1 sobre blanco y 2,86:1
     sobre el gris suave: vale para un botón relleno o un icono, pero no para
     texto pequeño. Este es el mismo coral un peldaño más oscuro —ya estaba en
     uso en las pastillas de estado— y da 6,08:1 sobre blanco. Se usa SOLO
     cuando el coral hace de texto sobre fondo claro; el relleno de los botones
     y los iconos siguen con el coral de marca. */
  --coral-texto:#A8412A;
  --a:61,90,127; --c:139,182,205; --k:238,108,77;
  /* Texto secundario sobre blanco. Antes se resolvía con el azul a opacidad
     baja (.55) y daba 2,5:1 — ilegible de verdad, no «suave». Este es el mismo
     azul al 85%: 4,88:1 sobre blanco y 4,64:1 sobre el gris de testimonios,
     y sigue leyéndose como segundo nivel frente al azul pleno (6,6:1). */
  --azul-2:#5A7392;
  --azul-900:#28405C;   /* sombra de Azul Capta — mismo tono */
  --azul-dark:#2C4462;  /* Azul Oscuro del sistema de color — reservado para franjas de sector */
  /* RAMPA OSCURA — extensión del sistema, no colores de marca nuevos. El manual
     da un solo azul (#3D5A7F) y es un tono medio: como fondo de una superficie
     oscura se ve lavado. Estos peldaños bajan de ese mismo azul hasta un fondo
     profundo, que es como construyen su modo oscuro Linear, Vercel y Stripe. */
  --n900:#0F1824;  /* fondo profundo · matiz 214.3° */
  --n700:#1E2F42;  /* bordes          · matiz 211.7° */
  --n600:#2A3F56;  /* peldaño alto de la rampa · matiz 212.7° */
  --sans:'Nunito','Segoe UI',system-ui,sans-serif;
  /* Jerarquía del manual, pág. 19. La base del clamp es proporcional al ancho
     para que en un móvil de 390px el H1 no se quede en tamaño de portátil. */
  --h1:clamp(2.125rem,8.2vw,3.5rem);  /* 34–56px · ExtraBold 800 */
  --h2:clamp(1.625rem,5.2vw,2.5rem);  /* 26–40px · Bold 700 */
  --h3:clamp(1.25rem,3.4vw,1.75rem);  /* 20–28px · SemiBold 600 */
  --body:1rem; --small:.9375rem; --label:.6875rem;
  --pad:clamp(1.25rem,4vw,3.6rem); --maxw:1240px;
  /* Motion del manual, pág. 29 — sin rebote, sin resortes */
  --fast:120ms; --base:200ms; --slow:360ms; --flow:700ms;
  --ease:cubic-bezier(.4,0,.2,1); --ease-in:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
/* Texto que solo existe para quien no ve la pagina. Se usa, por ejemplo, en la
   tabla de precios: donde el ojo ve un tilde, un lector de pantalla necesita
   oir «Incluido». Se recorta a un pixel en vez de display:none porque lo que
   esta oculto de verdad tampoco se lee en voz alta. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
html{scroll-behavior:smooth}
body{margin:0;background:#FFFFFF;color:var(--azul);font-family:var(--sans);font-size:16px;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{margin:0;text-wrap:balance;color:var(--azul)}
h1{font-size:var(--h1);font-weight:800;letter-spacing:-.03em;line-height:1.06}
h2{font-size:var(--h2);font-weight:700;letter-spacing:-.022em;line-height:1.16}
h3{font-size:var(--h3);font-weight:600;letter-spacing:-.012em;line-height:1.3}
/* EL TITULAR DEL CARRUSEL DE PROCESOS sube a 700. Es el unico titular de 28 px
   del sitio que iba en 600, y quedaba mas claro que tarjetas de 19 px que
   pesaban 800: justo al reves de lo que pide su tamano. */
.pdet .pleft h3{font-weight:700}
/* EL ENFASIS DEL CUERPO VALE 700 Y SE ACABO. Sin esto manda la hoja del
   navegador, que dice `b,strong{font-weight:bolder}`: un peso RELATIVO al del
   padre. Dentro de texto normal da 700, que es lo que se quiere, pero dentro de
   algo que ya iba en 700 daba 900 —y Nunito solo llega a 800, asi que el
   navegador lo falsificaba engordando el trazo. Pasaba en cinco sitios de las
   dos paginas legales: «Vigente desde», «CAPTA T&D S.A.S.», «Version 002». */
b,strong{font-weight:700}
/* LOS CONTROLES HEREDAN LA TIPOGRAFIA. La hoja del navegador le da a <button>
   su propia fuente —Arial— en vez de la del documento, y basta con no fijarla
   para que se cuele: el boton de cerrar de la barra iba en Arial en las veinte
   paginas. Era la unica familia distinta de Nunito en todo el sitio. */
button,input,select,textarea{font-family:inherit}
/* ══ EL PUNTO DEL LOGO VIAJA POR EL PUENTE ══════════════════════════════
   El logotipo lleva un puente coral entre la «c» y la «a», con un nodo en cada
   extremo, y dentro del nodo derecho un punto blanco. Estaba quieto. «Ese
   puntico blanco no debe estar estático, sino siempre animado, como
   representando la conexión» (Mariana, 13-oct-2026).

   Va de un nodo al otro y vuelve, no da vueltas sobre sí mismo: lo que cuenta
   es que algo ATRAVIESA la conexión, y de ida y de vuelta, que es como funciona
   Capta —entra por WhatsApp, sale la respuesta—. Un punto girando o latiendo
   seria adorno, y el manual pide movimiento que signifique algo (pág. 28).

   LOS 208,25 SON MEDIDOS, no a ojo: el puente va de x=128,3 a x=390,67 con 54,24
   de grueso, asi que los centros de los nodos caen en 155,42 y 363,55, y el
   punto esta en 363,67. La diferencia es el recorrido exacto. Si alguna vez
   cambia el dibujo del logo, este numero cambia con el.

   Se queda 10% del ciclo en cada extremo: sin esa pausa el ida y vuelta se lee
   como un temblor en vez de como un trayecto.

   Solo el del menú. El mismo dibujo esta tres veces en cada pagina —el sprite
   que usan las composiciones y la copia de dentro de un mockup— y esos tienen
   que seguir quietos: representan una pantalla, y una pantalla de pega que se
   mueve sola delata que es de pega.

   Con `prefers-reduced-motion` se para. Es un bucle infinito en la barra fija,
   que es exactamente lo que esa preferencia existe para evitar; el sitio ya la
   respeta en todo lo demas y el logo no iba a ser la excepcion. */
@keyframes capta-punto{
  0%,  10%  {transform:translateX(0)}
  45%, 55%  {transform:translateX(-208.25px)}
  90%, 100% {transform:translateX(0)}
}
.nav .logo > circle{animation:capta-punto 3.8s cubic-bezier(.76,0,.24,1) infinite}
@media (prefers-reduced-motion:reduce){
  .nav .logo > circle{animation:none}
}
p{font-size:var(--body);line-height:1.68;margin:0}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{position:relative;overflow:hidden;isolation:isolate}
.eyebrow{display:inline-block;font-weight:700;font-size:.75rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--coral-texto)}
.h2{font-size:var(--h2);font-weight:700;letter-spacing:-.022em;line-height:1.16;max-width:20ch}
.lead{font-size:1.0625rem;font-weight:400;line-height:1.7;color:var(--azul);opacity:.82;max-width:62ch}
.inner{position:relative;z-index:4}

/* ── botones — idénticos al home ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--coral);color:#FFFFFF;font-weight:800;
  padding:.72rem 1.3rem;border-radius:10px;font-size:.94rem;
  box-shadow:0 1px 0 rgba(255,255,255,.32) inset,0 8px 18px -8px rgba(var(--k),.6);
  transition:transform var(--fast) var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn.sm{padding:.5rem 1rem;font-size:.85rem;border-radius:10px}
.gbtn{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:var(--small);
  padding:.6rem 1.1rem;border-radius:10px;color:var(--azul);background:#FFFFFF;
  border:1px solid rgba(var(--a),.24);cursor:pointer;font-family:var(--sans);
  box-shadow:0 2px 6px -3px rgba(var(--a),.18);transition:transform var(--fast) var(--ease),border-color .12s}
.gbtn:hover{transform:translateY(-2px);border-color:var(--claro)}
/* Sobre el hero oscuro el secundario no puede ser una caja blanca: borde al 24%
   y texto blanco, que es como se resuelve en el home cuando cae sobre azul. */
.gbtn.onblue{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);color:#FFFFFF}
.gbtn.onblue:hover{border-color:rgba(255,255,255,.5)}

/* ── nav — IDÉNTICA al home, es el primer ancla de reconocimiento de marca ── */
.navwrap{position:sticky;top:0;z-index:60;background:var(--azul);
  border-bottom:1px solid var(--azul-900);box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.nav{display:flex;align-items:center;gap:1.4rem;max-width:var(--maxw);margin-inline:auto;padding:.7rem var(--pad)}
.nav .logo{height:26px;width:auto;display:block;color:#FFFFFF;flex:0 0 auto}
.nav .it{font-weight:400;font-size:.9375rem;color:#FFFFFF;opacity:.88;transition:opacity var(--base) var(--ease)}
.nav .it:hover{opacity:1}
.nav .it.here,.nav .dbtn.here{opacity:1;position:relative}
/* las páginas transversales no son de industria: el subrayado va en Procesos */
.nav .it.here::after,.nav .dbtn.here::after{content:"";position:absolute;left:0;right:0;bottom:-.38rem;height:2px;border-radius:2px;background:var(--coral)}
.nav .sp{flex:1}
.prog{position:absolute;left:0;bottom:-1px;height:2px;background:var(--claro);width:0;z-index:61;
  transition:width .1s linear;box-shadow:0 0 6px rgba(var(--c),.5)}
@media(max-width:1040px){.nav .it{display:none}.nav .sp{display:none}}


/* ══ NAVEGACIÓN DE MÓVIL Y TABLET ═════════════════════════════════════════
   Hasta hoy, por debajo de 1041 px la nav escondía TODO —los seis enlaces y
   el desplegable de procesos— y dejaba solo el logo y el botón de demo. En un
   teléfono el sitio no se podía navegar salvo por el pie, y en un iPad, hasta
   en horizontal, tampoco. Este bloque lo resuelve con un panel de verdad:
   los once procesos en sus dos familias, las secciones y el CTA.
   Reglas que hacen que se sienta nativo:
   · toda zona tocable mide 48 px de alto, que es el mínimo cómodo del pulgar;
   · el panel ocupa el alto disponible y hace su propio scroll, nunca el fondo;
   · se cierra con Escape, tocando fuera y al navegar;
   · abajo de todo queda el CTA, que es donde el pulgar llega sin estirarse. */
.burger{display:none;width:44px;height:44px;flex:0 0 auto;margin-left:auto;
  align-items:center;justify-content:center;background:none;border:0;cursor:pointer;
  border-radius:10px;-webkit-tap-highlight-color:transparent}
.burger:hover,.burger:focus-visible{background:rgba(255,255,255,.10)}
.burger span{display:block;position:relative;width:20px;height:2px;border-radius:2px;
  background:#FFFFFF;transition:transform var(--base) var(--ease),background var(--base) var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;
  border-radius:2px;background:#FFFFFF;transition:transform var(--base) var(--ease),top var(--base) var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.movwrap{display:none;position:fixed;left:0;right:0;z-index:59;
  background:var(--azul);border-top:1px solid rgba(255,255,255,.12);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--base) var(--ease),transform var(--base) var(--ease),visibility var(--base)}
.movwrap.open{opacity:1;visibility:visible;transform:none}
.mov{padding:1.1rem var(--pad) 2.2rem}
.mov h4{font-size:.6875rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.52);margin:1.4rem 0 .35rem}
.mov h4:first-child{margin-top:.2rem}
.mov a,.mov span.na{display:flex;align-items:center;gap:.8rem;min-height:48px;
  padding:.35rem 0;color:#FFFFFF;text-decoration:none;font-size:1rem;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.09)}
.mov span.na{color:rgba(255,255,255,.42);font-weight:400}
.mov a:active{background:rgba(255,255,255,.07)}
.mov a b{font-weight:600}
/* Blanco al 75% y no al 62%. Es la descripcion de cada proceso DENTRO del
   menu de telefono, sobre Azul Capta: al 62% daba 3,84:1 en texto de 13px,
   por debajo de AA. Al 75% da 4,82:1.
   Esto no lo veia el barrido porque el menu esta cerrado hasta que alguien lo
   abre, y una sonda que solo recorre la pagina nunca llega. Desde el 9-oct-2026
   el barrido abre el menu y fuerza el final de la transicion, que el navegador
   sin pantalla tampoco corre. */
.mov a u{display:block;text-decoration:none;font-size:.8125rem;font-weight:400;
  color:rgba(255,255,255,.75);margin-top:.1rem;line-height:1.35}
.mov a .txt{display:flex;flex-direction:column;min-width:0}
.mov .mico{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
  background:rgba(255,255,255,.10)}
.mov .mico svg{width:17px;height:17px;color:#FFFFFF;display:block}
/* Azul Claro sobre Azul Capta da 3,27:1 y el manual lo prohibe como texto.
   Y es el renglon que dice donde estas. Blanco, 7,1:1, y lo marca un filete
   coral, que es lenguaje de la casa y no depende del color de la letra. */
.mov a.aqui{color:#FFFFFF;position:relative;padding-left:.7rem}
.mov a.aqui::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:1.6rem;border-radius:2px;background:var(--coral)}
.mov a.aqui .mico{background:rgba(var(--c),.26)}
.mov .cta{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:1.8rem;
  min-height:52px;border:0;border-radius:10px;background:var(--coral);color:#FFFFFF;
  font-weight:700;font-size:1rem}
.mov .cta u{display:none}

@media(max-width:1040px){
  .burger{display:flex}
  .movwrap{display:block}
  /* el botón de demo sale de la barra: ya vive abajo del panel, y en 375 px
     dos elementos a la derecha del logo dejan la barra sin aire */
  .nav>.btn.sm{display:none}
  .nav{gap:.9rem}
}
@media(min-width:1041px){
  /* con el panel cerrado por CSS no hace falta limpiar nada al redimensionar */
  .movwrap{display:none!important}
}
body.nav-abierta{overflow:hidden}

/* ── desplegables de la nav — mismo componente del home ── */
.nav .drop{position:relative;display:inline-flex}
.nav .dbtn{font-family:var(--sans);font-weight:400;font-size:.9375rem;color:#FFFFFF;opacity:.76;
  background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:.34rem;
  transition:opacity var(--base) var(--ease)}
.nav .dbtn:hover,.nav .drop.open .dbtn{opacity:1}
.nav .dbtn i{font-style:normal;font-size:.62rem;line-height:1;transition:transform var(--base) var(--ease)}
.nav .drop.open .dbtn i{transform:rotate(180deg)}
.nav .dpanel{position:absolute;top:calc(100% + .82rem);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:17.5rem;background:#FFFFFF;border:1px solid rgba(var(--a),.14);border-radius:12px;
  padding:.45rem;box-shadow:0 22px 44px -22px rgba(var(--a),.62);
  opacity:0;visibility:hidden;transition:opacity var(--base) var(--ease),transform var(--base) var(--ease),visibility var(--base);
  z-index:70}
.nav .drop.open .dpanel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* :not(.dsep) en las tres reglas: el separador es también un <span> y sin esto
   heredaba el relleno de fila y, peor, la etiqueta «Pronto» del ::after — salía
   una etiqueta suelta flotando entre Construcción y Educación. */
.nav .dpanel a,.nav .dpanel span:not(.dsep){display:flex;align-items:center;gap:.55rem;
  font-size:.875rem;font-weight:600;color:var(--azul);padding:.55rem .6rem;border-radius:8px;
  line-height:1.3;white-space:nowrap}
.nav .dpanel a:hover{background:rgba(var(--a),.07)}
.nav .dpanel a em{margin-left:auto;font-style:normal;color:var(--coral);transition:transform .14s}
.nav .dpanel a:hover em{transform:translateX(3px)}
.nav .dpanel span:not(.dsep){color:rgba(var(--a),.42);font-weight:400;cursor:default}
.nav .dpanel span:not(.dsep)::after{content:"Pronto";margin-left:auto;font-size:.625rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--a),.38)}
.nav .dpanel .dsep{display:block;height:1px;background:rgba(var(--a),.1);margin:.35rem .3rem;padding:0}
@media(max-width:1040px){.nav .drop{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   EL PANEL ANCHO VIVE AQUÍ, no en cada página.
   Estaba pegado dentro del <style> de cada página de proceso, y aplicar-css.py
   regenera ese bloque entero desde este archivo en cada publicación: en la
   primera regeneración se borró de las diez. El menú quedó con el marcado nuevo
   —dos columnas, nombre y descripción— y los estilos viejos de una columna, que
   es exactamente lo que se veía roto. Aquí no se puede perder.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── EL PANEL ANCHO DE PROCESOS ────────────────────────────────────────────
   Dos columnas con título, como el menú de productos de Stripe. Separa lo que
   es del sector —el ciclo del comprador de una constructora— de lo que sirve a
   cualquier empresa. Esa distinción es la arquitectura del sitio: las seis del
   ciclo viven bajo /construccion y las transversales bajo /procesos. El menú
   tiene que decirlo antes de que el visitante haga clic.
   Una línea de descripción por proceso: sin ella son diez nombres sueltos y
   hay que entrar a cada uno para saber cuál es cuál. */
/* Anclado a la izquierda del botón, no centrado: un panel de 700px centrado en
   un botón que está a 90px del borde se sale de la pantalla por la izquierda. */
.nav .dpanel.mega{min-width:60rem;padding:1.9rem 1.6rem 1.5rem;
  display:grid;grid-template-columns:1fr 1fr;gap:0 2.6rem;
  left:0;transform:translateX(0) translateY(-6px)}
.nav .drop.open .dpanel.mega{transform:translateX(0) translateY(0)}
.nav .dpanel.mega .col{min-width:0}
.nav .dpanel.mega h4{margin:0 0 .9rem;padding:0 .7rem .7rem;
  border-bottom:1px solid rgba(var(--a),.16);
  font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--azul)}
.nav .dpanel.mega a,.nav .dpanel.mega span[aria-disabled]{
  display:grid;grid-template-columns:24px 1fr;gap:.15rem .75rem;align-items:start;
  padding:.7rem .7rem;border-radius:10px;white-space:normal;line-height:1.35}
.nav .dpanel.mega b.nm{grid-column:2;font-size:.9375rem;font-weight:700;color:var(--azul);
  display:flex;align-items:center;gap:.4rem}
.nav .dpanel.mega u{grid-column:2;text-decoration:none;font-size:.8125rem;font-weight:400;
  color:var(--azul-2);margin-top:.1rem}
.nav .dpanel.mega .dico{grid-row:span 2;margin-top:.15rem}
.nav .dpanel.mega span[aria-disabled]{color:inherit}
.nav .dpanel.mega span[aria-disabled] b.nm{color:rgba(var(--a),.5)}
.nav .dpanel.mega span[aria-disabled]::after{content:none}
.nav .dpanel.mega b.nm em{font-style:normal;font-size:.5625rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--azul-2);
  background:rgba(var(--a),.08);border-radius:3px;padding:.1rem .34rem}
.nav .dpanel.mega .pie{grid-column:1 / -1;margin-top:.7rem;padding-top:.7rem;
  border-top:1px solid rgba(var(--a),.1)}
.nav .dpanel.mega .pie a{grid-template-columns:1fr auto;align-items:center}
.nav .dpanel.mega .pie b.nm{grid-column:1}
/* El panel NO se pasa a una columna. Lo hacía por debajo de 1180px y ahí es
   justo donde se rompía: los diez procesos en una sola lista daban 646px de
   alto —media pantalla de un portátil— y el título de la segunda familia
   quedaba a mitad del listado, como si fuera un error de maquetado.
   Los enlaces de la nav desaparecen a los 1040px, así que el panel solo tiene
   que caber entre 1040 y 1180: ahí basta con estrecharlo, no con apilarlo. */
@media(max-width:1180px){
 .nav .dpanel.mega{min-width:46rem;gap:0 1.5rem;padding:1.4rem 1.1rem 1.1rem}
 .nav .dpanel.mega u{font-size:.75rem}
 .nav .dpanel.mega h4{font-size:.75rem}
}
/* el icono de cada proceso dentro del desplegable, en su contenedor redondo */
.nav .dpanel .dico{display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;
  border-radius:50%;background:rgba(var(--k),.13);color:var(--azul)}
.nav .dpanel .dico svg{width:13px;height:13px;display:block}
.nav .dpanel span[aria-disabled] .dico{background:rgba(var(--a),.08);color:rgba(var(--a),.42)}


/* (En /construccion la franja de sector se quitó porque repetía lo que ya decía
   el hero. Aquí sí va, y hace otro trabajo: ver el bloque 00 más abajo.) */


/* Tokens que esta plantilla añade al sistema, con el nombre que ya usa el brief
   de las páginas de proceso. No son colores nuevos: son los que ya estaban. */
:root{
  /* (--azul-profundo se quitó: era un cuarto azul que solo usaba el cierre, y
     ese bloque pasó a Azul Capta para ir con el footer.) */
  --gris-suave:#F5F8FB;
  --borde-claro:#E2EAF0;


}

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINA DE PROCESO · PLANTILLA
   Esta es la primera de cinco: posventas, cartera, entregas, escrituración y
   vinculación comparten esta estructura exacta. Por eso ninguna regla de aquí
   nombra «posventas»: el contenido de los cinco bloques se cambia en el HTML y
   sale otra página sin tocar una línea de estilo.

   Los cinco bloques, en orden: franja de sector · hero · video · beneficios ·
   procesos relacionados · cierre. Un scroll largo, no dos: todo lo que el
   visitante necesitaba saber de la empresa ya lo vio en /construccion.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 00 · FRANJA DE SECTOR ═════════════════════════════════════════════════
   En /construccion esta franja se quitó porque repetía lo que ya decía el hero.
   Aquí hace un trabajo distinto y sí hace falta: el visitante llega desde una
   tarjeta del carrusel y la franja le confirma en qué proceso cayó, con el
   MISMO icono de esa tarjeta. Es una miga de pan, no un rótulo decorativo.
   Va en Azul Oscuro, que es el peldaño que el sistema reserva para las franjas
   de sector: contra la nav en Azul Capta se distingue sin abrir otro color. */
/* Cada proceso tiene su color y la franja lo lleva, sin excepciones: los seis
   azules del sistema alcanzan justo para los seis procesos del ciclo.
   El filete de luz de arriba es el que separa la franja de la nav. Hace falta
   en vinculación, cuyo color ES el Azul Capta de la barra, y no estorba en las
   otras cinco: es el mismo recurso que ya usa la nav contra el hero. */
/* LA FRANJA. En las páginas del ciclo del comprador lleva el color del proceso
   con texto blanco. En las de proceso interno lleva AZUL CLARO —el de la marca,
   sin tocar— con el texto en Azul Oscuro: 4,58:1, que pasa AA.
   Esa es la señal de familia. Una banda clara entre seis oscuras se reconoce
   antes de leer una palabra, y es la única forma de irse «hacia lo clarito»
   sin chocar con los seis azules que ya están ocupados: en la franja delgada
   con texto blanco no cabe un séptimo azul claro que además contraste.
   Aquí el Azul Claro por fin hace de fondo, que es su papel en el manual: lo
   que no puede es cargar texto BLANCO, y no lo hace. */
/* Tres familias, tres franjas: color del proceso con texto blanco en las de
   sector; Azul Claro plano con texto oscuro en las internas; y un degradado de
   Azul Claro, también con texto oscuro, en las transversales. Las tres salen de
   la paleta y ninguna necesita un color de fuera. */
/* La franja toma el ARRANQUE del hero, no el acento. En nueve de las once son
   el mismo color y no cambia nada; en entregas y selección el acento y el
   degradado no coincidían y quedaba una costura horizontal justo encima del
   titular. Así el bloque de arriba —nav, ruta, hero— baja de tono de una sola
   vez. Las once pasan contraste con texto blanco; la más justa es selección,
   con 4,67:1. */
.franja{background:var(--franja,var(--hero-a,var(--acento)));color:var(--franja-texto,#FFFFFF);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.franja a{color:inherit}
.franja .wrap{display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:28px;font-size:.6875rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;line-height:1}
/* El enlace no se distingue en reposo —el dibujo de la franja no cambia— y se
   subraya al pasar por encima, que es donde hace falta la señal.
   HEREDA el color de la franja, no lo fuerza a blanco: sobre las bandas claras
   de la familia transversal un enlace blanco quedaba a 1,8:1, es decir,
   invisible. El color lo pone --franja-texto y este enlace lo sigue. */
.franja a{color:inherit;text-decoration:none}
.franja a:hover,.franja a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.franja .sep{opacity:.55}
/* sobre la banda clara el filete de luz sobra: el contraste con la nav ya es total */
.franja[style],.franja.clara{box-shadow:none}
.franja svg{width:14px;height:14px;flex:0 0 auto;display:block}

/* ══ 01 · HERO ═════════════════════════════════════════════════════════════
   Arranca exactamente donde termina la franja —mismo Azul Oscuro, sin costura—
   y baja a la sombra del Azul Capta, que es el mismo fondo con el que cierra el
   hero de /construccion. Las dos páginas terminan su cabecera en el mismo tono:
   a un clic de distancia se leen como el mismo sitio. */
/* El degradado sale del sistema de color de Capta: 135°, el color del proceso
   al inicio y un azul de la marca como ancla al final. Los dos extremos son
   tokens de la página; aquí no hay ningún color escrito a mano. */
/* EL BORDE DE ABAJO TIENE QUE SER UN SOLO COLOR. Un degradado de 135 grados
   no termina en un color: termina en un RANGO. Medido en la ultima fila del
   hero, de izquierda a derecha, iba de (64,105,125) a (44,68,98) —hasta 37
   puntos de diferencia— asi que la banda de abajo, que arranca plana en
   var(--hero-b), encajaba por la derecha y dejaba una linea horizontal por la
   izquierda. La capa de arriba resuelve el hero a var(--hero-b) en su ultimo
   tramo, de modo que lo que entrega es un color y no un abanico. */
.heroP{background:
    linear-gradient(180deg,rgba(var(--hero-b-rgb),0) 74%,var(--hero-b) 100%),
    linear-gradient(135deg,var(--hero-a) 0%,var(--hero-b) 100%);
  color:#FFFFFF;
  /* el aire del hero también es continuo: 54 px en un teléfono, 72 en
     escritorio, sin el salto que había en 680 px */
  padding:clamp(3.4rem,2.6rem + 2.1vw,4.5rem) 0 clamp(3.2rem,2.5rem + 1.9vw,4rem)}

/* (La onda del hero se probó y salió: el corte recto funcionaba mejor.
   22-sep-2026, Mariana.) */

/* ── UN SOLO TRATAMIENTO DE HERO PARA LAS ONCE ────────────────────────────
   Aquí vivía la variante de hero claro que daban PQRS, Cartera y Selección.
   SALIÓ (Mariana, 22-sep-2026) y el razonamiento vale escribirlo porque cierra
   una discusión larga: la diferenciación por familia solo existe si alguien
   compara dos páginas lado a lado, y nadie llega a dos páginas de proceso
   seguidas. Lo que sí lee cualquiera, en la primera pantalla y sin comparar
   nada, es el peso: un fondo oscuro dice infraestructura seria, y ese es el
   registro que ya tenía construcción. Once heroes oscuros.
   La familia se dice donde de verdad se nota, la URL y el menú, no en la
   pintura. Con esto se fue también el fondo de tarjetas que venía con el hero
   claro, que era lo que chirriaba en PQRS. */

/* ── BANDA LEGAL · solo donde el proceso tiene término de ley ──────────────
   Compacta a propósito: es una categoría de riesgo, no una sección de venta.
   Si crece, deja de leerse como una advertencia y pasa a ser un argumento más. */
/* Era un titular y un párrafo sueltos en medio del blanco, y se leía pobre: sin
   borde, sin peso, sin nada que dijera «esto es distinto». Ahora es una tarjeta
   con su icono, y lo único de la página con el filete coral —que aquí sí está
   justificado: es la advertencia, no un argumento de venta—. Sigue siendo
   compacta: una tarjeta, no una sección. */
.legal{background:#FFFFFF;padding:3rem 0}
.legal .wrap{max-width:860px}
.legalc{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start;
  background:var(--gris-suave);border:1px solid var(--borde-claro);
  border-left:3px solid var(--coral);border-radius:14px;padding:1.9rem 2rem;
  box-shadow:0 14px 30px -24px rgba(26,58,88,.5)}
.legalc i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:rgba(var(--k),.13);flex:0 0 auto}
.legalc i svg{width:23px;height:23px;color:var(--coral);display:block}
.legalc h2{font-size:1.1875rem;font-weight:700;color:var(--azul);margin-bottom:.5rem;
  letter-spacing:-.014em;line-height:1.3}
.legalc p{font-size:.9375rem;font-weight:400;color:var(--azul-2);line-height:1.65}
@media(max-width:680px){
 .legal{padding:2.4rem 0}
 .legalc{grid-template-columns:1fr;gap:1rem;padding:1.5rem 1.25rem}
}
/* La micro-red del sistema: invariante de marca en todos los heros azules.
   Va por encima del degradado y por debajo de todo lo demás. */
.heroP::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:20px 20px}
/* PESO: el brief pedía 900 para este H1 y para el H2 de beneficios. Van en 800
   y 700, que es lo que pesan los mismos niveles en el home y en /construccion
   —de hecho el 900 se acaba de quitar de /construccion justo por esto—. A un
   clic de distancia, el mismo nivel de título no puede pesar distinto según la
   página. Si prefieres el 900, son estas dos líneas. */
/* Escala CONTINUA. Antes eran dos tamaños con un escalón: 28 px fijos hasta
   680 px y 46 px a partir de 768, un salto del 64 % en un rango donde la
   pantalla solo crece un 13 %. Al girar un iPad el titular daba un brinco.
   Esta recta pasa por 28 px a 375 y por 48 px a 1280, sin escalones. */
.heroP h1{color:#FFFFFF;font-weight:800;font-size:clamp(1.75rem,1.23rem + 2.21vw,3rem);
  line-height:1.15;max-width:20ch;letter-spacing:-.028em}
/* Un halo muy abierto levanta el centro del degradado: sin él, un fondo oscuro
   plano a este tamaño se ve muerto. */
.heroP::before{content:"";position:absolute;inset:-18% -10% auto;height:120%;z-index:0;
  pointer-events:none;filter:blur(90px);
  background:
   radial-gradient(40% 36% at 16% 14%,rgba(var(--acento-rgb),.38),transparent 70%),
   radial-gradient(34% 28% at 84% 30%,rgba(var(--c),.20),transparent 68%)}
/* El icono del proceso, de contorno y a muy baja tinta, sangrado por una
   esquina. El sistema lo pide así: nunca centrado, nunca protagonista. */
.hico{position:absolute;left:-3%;bottom:-16%;width:min(26vw,300px);z-index:1;
  opacity:.07;pointer-events:none}
.hico svg{width:100%;height:auto;display:block;color:#FFFFFF}
/* ── LA PANTALLA DEL HERO ───────────────────────────────────────────────────
   Dos ejes: el texto a la izquierda, una pantalla del proceso a la derecha. Es
   la estructura de cualquier página de producto seria, y la del sitio de Sinco
   que sirvió de referencia.
   Antes había aquí un gráfico: el nodo de la marca con el icono del proceso
   dentro de cada satélite. Decía «posventas» y no decía nada más. Una pantalla
   responde la pregunta del titular, que es para lo que está el hero. El
   contraste entre la tarjeta clara y el hero oscuro hace la diferenciación de
   la página sin necesidad de adornos. */
.hwrap{display:grid;grid-template-columns:1.02fr 1.12fr;gap:3.4rem;align-items:center}
.htxt{min-width:0}
.hmk:not(.mk){min-width:0;background:#FFFFFF;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 80px -34px rgba(0,0,0,.72),0 2px 0 rgba(255,255,255,.1) inset}
/* la barra de la ventana, igual que en los mockups de /construccion */
.hmk:not(.mk) .barra{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;
  background:var(--gris-suave);border-bottom:1px solid var(--borde-claro)}
.hmk:not(.mk) .barra u{width:8px;height:8px;border-radius:50%;background:rgba(var(--a),.2);
  text-decoration:none;flex:0 0 auto}
.hmk:not(.mk) .barra u:first-child{background:rgba(var(--k),.5)}
.hmk:not(.mk) .barra b{margin-left:.35rem;font-size:.75rem;font-weight:700;color:var(--azul)}
.hmk:not(.mk) .barra em{margin-left:auto;font-style:normal;font-size:.625rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--azul-2)}
/* Las filas entran escalonadas una vez, al aparecer el hero: la pantalla se
   arma sola, que es lo que hace el producto. No es un bucle —un carrusel
   infinito en un hero solo distrae— y con prefers-reduced-motion no ocurre. */
.hmk:not(.mk) .fila{display:grid;grid-template-columns:3.2rem 1fr auto;gap:.7rem;align-items:center;
  padding:.62rem .9rem;border-bottom:1px solid rgba(var(--a),.08);
  opacity:0;transform:translateY(7px)}
.hmk:not(.mk).corre .fila{animation:mkfila 420ms var(--ease-in) forwards;
  animation-delay:calc(var(--i) * 90ms + 260ms)}
@keyframes mkfila{to{opacity:1;transform:none}}
/* El latido: la fila de arriba cambia de estado una sola vez. Es el momento en
   que el proceso avanza sin que nadie lo empuje, que es el argumento entero de
   la página dicho sin una palabra. */
.hmk:not(.mk) .est{transition:background var(--slow) var(--ease),color var(--slow) var(--ease)}
.hmk:not(.mk).late .fila:first-of-type{background:rgba(var(--k),.05)}
.hmk:not(.mk).late .fila:first-of-type .est{background:rgba(var(--a),.12);color:var(--azul)}
.hmk:not(.mk) .fila:first-of-type{transition:background var(--slow) var(--ease)}
.hmk:not(.mk) .fila:last-of-type{border-bottom:0}
.hmk:not(.mk) .fila>i{font-style:normal;font-weight:800;color:var(--azul);font-size:.75rem;
  font-variant-numeric:tabular-nums}
.hmk:not(.mk) .fila>div{min-width:0}
.hmk:not(.mk) .fila strong{display:block;font-weight:700;font-size:.8125rem;color:var(--azul);
  line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hmk:not(.mk) .fila small{display:block;font-size:.6875rem;font-weight:400;color:var(--azul-2);
  line-height:1.35;margin-top:.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Los estados usan SOLO colores de marca: tinte coral el que aún no arranca,
   Azul Capta el que está corriendo y gris el que ya cerró. Nada de verde ni
   ámbar de semáforo, que no están en la paleta. */
.hmk:not(.mk) .est{font-size:.625rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:.24rem .5rem;border-radius:999px;white-space:nowrap}
.hmk:not(.mk) .est.nueva{background:rgba(var(--k),.15);color:#A8412A}
.hmk:not(.mk) .est.curso{background:rgba(var(--a),.12);color:var(--azul)}
.hmk:not(.mk) .est.lista{background:rgba(var(--a),.06);color:var(--azul-2)}
.hmk:not(.mk) .pie{display:flex;align-items:center;gap:.45rem;padding:.6rem .9rem;
  background:var(--gris-suave);border-top:1px solid var(--borde-claro);
  font-size:.6875rem;font-weight:600;color:var(--azul-2)}
.hmk:not(.mk) .pie span{width:7px;height:7px;border-radius:50%;background:var(--coral);flex:0 0 auto}
/* .78 daba 4,33:1 sobre el arranque más claro del sistema (Petróleo) y 3,58
   sobre Pizarra. Al 88% pasa sobre todos los arranques del sistema. */
.heroP .sub{font-size:1.0625rem;font-weight:400;line-height:1.65;
  color:rgba(255,255,255,.88);max-width:58ch;margin-top:1.25rem}
.heroP .btn{margin-top:2rem;border-radius:8px;padding:.875rem 2rem;font-size:1rem;font-weight:700}
.heroP .btn:hover{background:#D95F40;transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(238,108,77,.35)}
/* el nodo de conexión Mini (2 conexiones, manual pág. 22) — la firma de marca.
   Se traza una vez al entrar y descansa: «una curva que se traza» de la pág. 28,
   no un bucle decorativo. Es EL MISMO componente del home. */
.signo{display:block;width:78px;margin:0 auto 1.25rem;overflow:visible}
.signo .sl{stroke-dasharray:56;stroke-dashoffset:56}
.signo .sn1,.signo .sn2{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6)}
.signo.in .sl{animation:sgline 620ms var(--ease) 120ms forwards}
.signo.in .sn1{animation:sgnodo 340ms var(--ease) 60ms forwards}
.signo.in .sn2{animation:sgnodo 340ms var(--ease) 700ms forwards}
@keyframes sgline{to{stroke-dashoffset:0}}
@keyframes sgnodo{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
 .signo .sl{stroke-dashoffset:0}.signo .sn1,.signo .sn2{opacity:1;transform:none}
 .signo.in .sl,.signo.in .sn1,.signo.in .sn2{animation:none}}
/* La firma va alineada con el texto, no centrada: este hero es a la izquierda,
   no centrado como el de /construccion. */
.heroP .signo{margin:0 0 1.3rem}

/* ══ 02 · VIDEO ════════════════════════════════════════════════════════════ */
/* LA ANIMACION VIVE EN UN PANEL, NO EN UNA BANDA.
   Dos intentos antes de este. El primero dejaba la banda en blanco puro y se
   leia plana —«lo veo como muy plano», Mariana, 8-oct-2026—. El segundo la
   paso a un escenario oscuro a sangre: gano contraste pero «no se siente tan
   pulido, y de nuevo queda el corte».

   El corte era real y estaba DENTRO de la animacion: en los planos abiertos
   —el telefono al principio, la plataforma entera al final— la camara se abre
   y asoma el lienzo del bucle alrededor. Sobre una banda oscura, ese
   rectangulo de gris claro se lee como un recorte pegado. Y no habia color de
   banda que lo arreglara, porque el lienzo ni siquiera era plano: iba de
   (235,239,245) a (214,221,232) y cambiaba entre las dos escenas del bucle.

   Mirando como lo resuelven Pipefy y Monday —que es lo que pidio Mariana—, las
   dos hacen lo mismo: la captura de producto no va a sangre, va dentro de un
   PANEL redondeado, y la superficie de la pagina nunca cambia en una linea
   recta que cruza la pantalla. Asi no puede haber corte, porque no hay banda.

   Aqui va igual, con una vuelta de tuerca que solo podiamos dar nosotros: el
   lienzo de los once bucles se dejo PLANO en #E8EDF3 y el panel lleva ese
   mismo color. El borde del video deja de existir a cualquier tamano de
   ventana —no es que se disimule, es que los dos lados son el mismo color— y
   la plataforma queda flotando sobre el panel, que es exactamente el efecto de
   las tarjetas de Monday. */
.vid{padding:clamp(3.6rem,2.8rem + 2.4vw,5.6rem) 0 clamp(3.8rem,3rem + 2.4vw,5.6rem);
  background-color:#FFFFFF;
  background-image:
    /* el tinte del proceso al final: el mismo con el que arranca .ben */
    linear-gradient(180deg,rgba(var(--acento-rgb),0) 64%,rgba(var(--acento-rgb),.13) 100%),
    /* un halo muy suave detras del panel, que es de donde sale la profundidad */
    radial-gradient(60% 56% at 50% 46%,rgba(var(--acento-rgb),.15) 0%,rgba(var(--acento-rgb),0) 74%),
    linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 64%,var(--gris-suave) 96%,var(--gris-suave) 100%)}
/* JERARQUIA. El titulo iba a 1.375rem fijos y el de la seccion siguiente a
   2rem: el bloque mas importante de la pagina —la plataforma funcionando— tenia
   la tipografia mas debil de las dos. Ahora comparte escala con los demas h2 de
   la pagina, que es lo que dice la jerarquia real. El peso baja de 800 a 700
   para igualarlos tambien ahi. */
.vid .tit{font-weight:700;font-size:clamp(1.5rem,1.15rem + 1.5vw,2rem);color:var(--azul);
  text-align:center;letter-spacing:-.022em;line-height:1.16;max-width:24ch;
  margin-inline:auto}
.vid .pie{font-weight:400;font-size:clamp(.9375rem,.9rem + .2vw,1.0625rem);
  color:var(--azul-2);text-align:center;max-width:52ch;margin-inline:auto;
  margin-top:.7rem;margin-bottom:clamp(1.9rem,1.4rem + 1.5vw,2.9rem)}

/* EL PANEL. El color es el del lienzo del bucle, ni uno mas ni uno menos: si
   algun dia se rehacen las animaciones con otro fondo, este valor cambia con
   ellas o vuelve a aparecer el borde. */
.escena{--lienzo:#E8EBF1;   /* medido con fuente/lienzo.py, no copiado del CSS fuente */
  position:relative;max-width:1124px;margin-inline:auto;
  background:var(--lienzo);
  border:1px solid rgba(var(--a),.08);
  border-radius:clamp(16px,.7rem + 1.2vw,26px);
  padding:clamp(.7rem,.35rem + 1.6vw,1.6rem);
  box-shadow:0 2px 6px -2px rgba(26,58,88,.07),
             0 28px 58px -30px rgba(26,58,88,.40),
             0 1px 0 rgba(255,255,255,.65) inset}
/* Dentro del panel el marco no lleva ni borde ni sombra. Los llevaba, y era lo
   que dibujaba el rectangulo: con el lienzo del mismo color, cualquier filo
   ahi vuelve a marcar el canto que acabamos de quitar. */
.marco{aspect-ratio:16/9;width:100%;max-width:none;margin-inline:auto;
  border:0;box-shadow:none;position:relative;overflow:hidden;
  border-radius:clamp(9px,.3rem + .9vw,16px);
  background:var(--lienzo,#E8EBF1);display:grid;place-items:center}
/* El nodo del sistema, muy bajado, como marca de agua del cartel. No es adorno
   de relleno: es el mismo dibujo del cierre, que es lo que hay detrás de un
   video que todavía no existe. */
.marco .agua{position:absolute;inset:0;margin:auto;width:min(58%,420px);height:auto;
  opacity:.09;pointer-events:none}
.play{position:relative;width:64px;height:64px;border-radius:50%;background:var(--coral);
  display:grid;place-items:center;border:0;cursor:default;
  box-shadow:0 10px 26px -10px rgba(var(--k),.75)}
.play::after{content:"";border-left:19px solid #FFFFFF;
  border-block:12px solid transparent;margin-left:5px}

/* ══ 03 · BENEFICIOS ═══════════════════════════════════════════════════════ */
/* El fondo de sección es el tinte del proceso sobre blanco, entre el 10% y el
   15%, que es lo que manda el sistema. El texto va oscuro, así que no hay
   problema de legibilidad por mucho que suba el tinte. */
/* Este fondo es el de las OCHO páginas de hero oscuro y vuelve a ser el que
   era (Mariana, 22-sep-2026): el ajuste del degradado se pidió para PQRS y,
   al vivir en la hoja compartida, se llevó por delante a las otras nueve.
   Lo que cambia para la familia de hero claro va más abajo, con su propio
   selector, y no toca a nadie más. */
.ben{background:linear-gradient(170deg,rgba(var(--acento-rgb),.13) 0%,rgba(var(--a),.05) 100%);
  background-color:var(--gris-suave);padding:4.5rem 0}
.ben .h2{font-weight:700;font-size:clamp(1.5rem,1.15rem + 1.5vw,2rem);color:var(--azul);
  text-align:center;max-width:none;margin:0 auto 2.5rem}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
/* El filete superior se reserva desde el principio para que al aparecer en
   hover no mueva el contenido dos píxeles. */
/* Las tarjetas estaban a pelo sobre el fondo claro: un filete de 1 px y nada
   mas, asi que se leian como celdas de una tabla y no como tarjetas. La sombra
   de reposo es la misma que ya usan las de /construccion —no es una sombra
   nueva, es la de la casa— y en hover levantan, que es lo que ya hacian alli. */
.bcard{background:#FFFFFF;border:1px solid var(--borde-claro);border-radius:12px;
  padding:1.75rem;border-top:2px solid var(--borde-claro);
  box-shadow:0 1px 2px rgba(var(--a),.05);
  transition:border-color var(--base) var(--ease),box-shadow var(--base) var(--ease),
             transform var(--fast) var(--ease)}
.bcard:hover{border-color:rgba(var(--a),.25);border-top-color:var(--acento);
  transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(var(--a),.55)}
.bcard svg{width:28px;height:28px;color:var(--acento);display:block;margin-bottom:1rem}
.bcard h3{font-weight:700;font-size:1rem;color:var(--azul);line-height:1.35;
  margin-bottom:.625rem;letter-spacing:0}
.bcard p{font-weight:400;font-size:.875rem;color:var(--azul-2);line-height:1.65}


/* ══ 04 · PROCESOS RELACIONADOS ════════════════════════════════════════════
   Este bloque CIERRA la página, así que pesa lo que pesaba el CTA que había
   aquí: fondo azul, el nodo de conexión de fondo y tarjetas de verdad en vez
   de pastillas. Lo que queremos que ocurra al final de una página de proceso no
   es otra llamada a la demo —esa ya está arriba— sino que el visitante entre al
   proceso siguiente del ciclo. */
/* COLOR: iba en un degradado que arrancaba en #1A3A58, un azul que no aparecía
   en ninguna otra parte de la página. Con el hero en su propio degradado, el
   footer en Azul Capta plano y este bloque en un tercero, la parte de abajo se
   leía como tres decisiones sueltas en vez de como un cierre.
   Ahora es Azul Capta plano, el MISMO del footer y el de la nav, y sin línea
   entre los dos: el bloque y el pie son una sola zona azul. La página queda con
   dos masas de color y nada más: la cabecera oscura arriba y esta abajo. */
.rel{background:var(--azul);color:#FFFFFF;padding:4.6rem 0 5rem}
/* el nodo del sistema como fondo, muy bajado: la misma firma del cierre */
/* ESTRUCTURA: título a la izquierda, destinos a la derecha, como la sección
   «Así se integra» de Sinco que sirvió de referencia. Centrado y en tres
   columnas el bloque se leía como un pie de página; en dos ejes se lee como lo
   que es —una lista de sitios a los que ir— y el titular tiene dónde respirar. */
.relwrap{display:grid;grid-template-columns:.92fr 1.45fr;gap:3.2rem;align-items:start}
.rel .kick{display:block;font-weight:700;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:.9rem}
.rel .h2{color:#FFFFFF;max-width:14ch;margin:0;
  font-size:clamp(1.5rem,4.2vw,2.125rem);font-weight:700;letter-spacing:-.022em}
.rel .cola{display:block;width:44px;height:3px;border-radius:2px;background:var(--coral);
  margin-top:1.5rem}
.relgrid{display:grid;grid-template-columns:1fr;gap:.9rem}
/* Más cuerpo: la tarjeta sube a superficie propia (10%), gana relleno, un
   filete de luz arriba y sombra debajo. Sobre un azul plano una caja al 7% con
   borde fino casi no existe; tiene que leerse como un objeto que se puede
   pulsar, porque es lo único de este bloque que se pulsa.
   En fila —icono, texto, flecha— y no en columna: así caben las tres una debajo
   de otra sin que el bloque crezca, y el ojo las recorre de un tirón. */
.relc{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.1rem;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);
  border-radius:16px;padding:1.3rem 1.5rem;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 18px 34px -24px rgba(0,0,0,.65);
  transition:background var(--base) var(--ease),border-color var(--base) var(--ease),
             transform var(--fast) var(--ease),box-shadow var(--base) var(--ease)}
.relc:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55);
  transform:translateY(-3px);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 24px 42px -24px rgba(0,0,0,.75)}
/* El icono va en su contenedor circular, como manda el manual (pág. 27). */
.relc i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:rgba(var(--k),.24);border:1px solid rgba(255,255,255,.18)}
.relc i svg{width:25px;height:25px;color:#FFFFFF;display:block}
.relc div{min-width:0}
.relc b{display:block;font-weight:800;font-size:1.125rem;margin:0 0 .25rem;
  letter-spacing:-.014em}
/* Medido sobre el tramo MÁS claro del degradado, que es el peor caso: el 76%
   daba 4,2:1 y se queda corto. Al 83% da 4,66:1. */
/* Blanco al 95% y no al 83%. El fondo real de esta tarjeta no es el azul
   oscuro que uno supone: es Azul Capta (#3D5A7F) con la tarjeta en blanco al
   15% encima, o sea rgb(90,115,146). Sobre eso, el blanco al 83% daba 3,94:1
   en texto de 14px, por debajo del 4,5 que pide AA. Al 95% da 4,60:1 y la
   jerarquia frente al titular en 800 la sigue marcando el peso, no el tono.
   Medido el 9-oct-2026. */
.relc span{display:block;font-size:.875rem;font-weight:400;line-height:1.55;
  color:rgba(255,255,255,.95)}
/* La flecha vive en su propio disco al final de la fila: es el remate que dice
   «esto se pulsa», y evita repetir «Ver el proceso» tres veces seguidas. */
.relc em{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);font-style:normal;font-weight:700;
  font-size:.9375rem;color:#FFFFFF;
  transition:transform var(--base) var(--ease),background var(--base) var(--ease)}
.relc:hover em{transform:translateX(3px);background:rgba(255,255,255,.14)}

/* ══ MÓVIL ═════════════════════════════════════════════════════════════════ */
@media(max-width:1000px){
 .bgrid{grid-template-columns:repeat(2,1fr)}
 .relwrap{grid-template-columns:1fr;gap:2.2rem}
 .rel .h2{max-width:22ch}
}
/* La pantalla pasa debajo del texto antes que a una columna estrecha: partida
   en dos no se lee ni como texto ni como pantalla.

   El corte estaba en 940 y se quedaba corto: entre 941 y 1120 el lienzo de la
   maqueta medía 465 px, por debajo de los ~500 que necesita para que el piso de
   8,5 px de las letras no le gane a la medida proporcional. A 1024 el contenido
   se salía del marco hasta 50 px en posventas. Medido: a 1121 el lienzo da 511
   y todavía desborda 16; a 1161 da 531 y aún desborda 8. Desde 1191 da 548 y
   el dibujo cabe solo en las once páginas. */
@media(max-width:1190px){
 .hwrap{grid-template-columns:1fr;gap:2.6rem}
 .htxt .sub{max-width:none}
}

@media(max-width:680px){
 .heroP .sub{font-size:1rem}
 .vid{padding:3rem 0}
 /* En el telefono el panel se queda SIN relleno. Cada pixel de relleno se lo
    quita al marco —medido: con .5rem el marco bajaba de 335 a 317 px— y ahi
    dentro el texto de la animacion ya va justo. Sin relleno, el propio marco
    hace de tarjeta: el canto del video coincide con el canto del panel, que es
    lo mismo que buscabamos, y sobre blanco un gris claro redondeado se lee como
    tarjeta, no como corte. */
 .escena{padding:0;border-radius:14px;overflow:hidden}
 .escena .marco{border-radius:inherit}
 .ben{padding:3.4rem 0}
 .bgrid{grid-template-columns:1fr}
 .bcard{padding:1.5rem}
 .rel{padding:3.4rem 0 3.8rem}
 .relc{padding:1.15rem 1.2rem;gap:.9rem}
 .relc i{width:44px;height:44px}
 .relc i svg{width:21px;height:21px}
 .relc b{font-size:1.0625rem}
 .hmk .fila{grid-template-columns:1fr auto;gap:.6rem}
 .hmk .fila>i{display:none}
}


/* ══ TOCABLE CON EL PULGAR ════════════════════════════════════════════════
   Los enlaces del pie medían 19 px de alto en todos los anchos: con el dedo se
   falla, y además estaban tan juntos que se tocaba el de al lado. En pantallas
   táctiles suben a 44 px, que es el mínimo de la pauta, sin cambiar el dibujo
   en escritorio. Se aplica por puntero grueso, no por ancho: un iPad con
   teclado sigue siendo táctil. */
@media(hover:none),(pointer:coarse){
  .fcol ul{gap:0}
  .fcol li a,.fcol li span{display:flex;align-items:center;min-height:44px}
  .franja .wrap{min-height:40px}
}
/* Mismo umbral que el menú: si la barra muestra la hamburguesa, la página se
   está usando con el dedo. No se confía solo en pointer:coarse porque un iPad
   con trackpad se declara pointer:fine y seguiría con enlaces de 19 px. */
@media(max-width:1040px){
  .fcol ul{gap:0}
  .fcol li a,.fcol li span{display:flex;align-items:center;min-height:44px}
}

/* ══ iPAD ═════════════════════════════════════════════════════════════════
   Entre 700 y 1040 px las tres tarjetas de «otros procesos» se apilaban a lo
   ancho completo y quedaban enormes y vacías. A dos columnas recuperan una
   proporción de tarjeta. */
@media(min-width:700px) and (max-width:1040px){
  .relgrid{grid-template-columns:repeat(2,1fr)}
  .relgrid>:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ── footer — IDÉNTICO al home ── */
footer{background:var(--azul);color:#FFFFFF;padding:2.8rem 0 1.6rem}
/* CINCO BLOQUES, Y CINCO NO SE REPARTEN EN CUATRO. Con `auto-fit` el pie
   cogia las columnas que cupieran: a 834 y a 1024 daban CUATRO, y el quinto
   —«Recursos y legal»— caia solo en una segunda fila con tres huecos vacios
   al lado. Se veia roto, no espacioso (Mariana, 9-oct-2026, iPad vertical).
   Ahora el numero de columnas se fija por banda: cinco cuando caben las
   cinco, tres cuando no, y dos o una en telefono. Tres deja 3+2, que se lee
   como un pie en dos filas; cuatro dejaba 4+1, que se lee como un error.
   `align-items:start` ademas quita el estiron: las columnas se igualaban a
   la mas alta y el pie medía 874 px en tablet. */
.fcols{display:grid;gap:1.7rem;align-items:start;
  grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1060px){.fcols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.fcols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.fcols{grid-template-columns:1fr}}
/* Los rótulos iban en Azul Claro: 3,26:1 sobre Azul Capta y, además, el manual
   (p15) dice que el Azul Claro no carga texto. Blanco al 82% da 5,4:1. */
.fcol h3{font-size:var(--label);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-bottom:.9rem;font-weight:600}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.38rem}
.fcol li{font-size:.875rem;font-weight:400;color:rgba(255,255,255,.72)}
.fcol li:hover{color:#FFFFFF}
.fbot{margin-top:2.1rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.15);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.76rem;color:rgba(255,255,255,.74)}

/* ── entradas .rv — mismos tiempos que el home ── */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity 560ms var(--ease-in),transform 560ms var(--ease-in)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
 .rv{opacity:1;transform:none;transition:none}
 .hmk .fila{opacity:1;transform:none}
 .hmk.corre .fila{animation:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ══ BIBLIOTECA DE MOCKUPS ═══════════════════════════════════════════════════
   Extraida de _bib_nueva.html por _portar_css.py y ACOTADA: cada regla vale
   solo dentro de un contenedor de mockup. Los nombres de la biblioteca son
   cortisimos —.p, .tb, .bd, .cv, .rail, .fila, .pie— y varios ya existen en el
   sitio con otro significado; sin el prefijo se pisan entre si.
   No se edita a mano: se vuelve a generar con `python3 _portar_css.py`.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --p-riel:#2B3C4E;
  --p-fondo:#EFEFEF;
  --p-tinta:#34495E;
  /* El gris secundario del mockup. Era #7B8FA3: 3,33:1 sobre blanco y
     2,90:1 sobre el lienzo, por debajo del 4,5 de AA, y salia en 439 avisos
     del barrido. Este es el mismo matiz (210°) y la misma saturacion, tres
     peldanos mas abajo: 6,39:1 sobre blanco, 5,56:1 sobre el lienzo y
     4,82:1 sobre el gris del buscador, que era el fondo mas exigente. Los mockups se leen mejor y siguen
     pareciendo una interfaz de verdad. Medido el 9-oct-2026. */
  --p-tinta2:#506172;
  --p-borde:#E4E7EB;
  --p-vencido:#D1344B;
  --p-estado:#A9C3D8;
  /* Blanco encima daba 3,51:1. Mismo matiz (207°), un peldano abajo: 4,61:1. */
  --p-tipo:#2D79B8;
  /* Rozaba el minimo: blanco encima daba 4,41:1 y AA pide 4,5. Mismo
     matiz y saturacion, un peldano mas abajo: 4,70:1. */
  --p-alta:#DE273F;
  /* EL MISMO ROJO, PERO PARA LETRA. #DE273F funciona de FONDO con texto
     blanco encima (4,70:1), pero como LETRA sobre el gris del lienzo da
     4,09:1 y no pasa. Un peldano mas abajo, mismo matiz: 4,61:1. Es la
     misma distincion que el sitio ya hace entre --coral y --coral-texto:
     relleno e icono con el de marca, letra pequena con el oscuro. */
  --p-alta-texto:#D12037;
  --p-proy:#34495E;
  --p-serv:#EFA82E;
  /* Blanco encima daba 3,26:1. Y ademas hace de LETRA sobre su propio
     tinte en el chip «En vivo», donde #338357 daba 3,62:1. Mismo matiz
     (147°), dos peldanos abajo: blanco encima 5,53:1 y sobre el tinte
     4,61:1. */
  --p-ok:#2C714B;
  --p-proceso:#7E3FF2;
  --p-gris:#DCE0E4;
}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(1rem,4vw,3rem)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .top{padding-block:clamp(3rem,7vw,5rem) clamp(2rem,4vw,3rem);border-bottom:1px solid var(--borde)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kick{display:inline-block;font-weight:700;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--coral-texto);margin-bottom:1rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) h1{margin:0;font-size:clamp(2rem,5.5vw,3.25rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.05;text-wrap:balance;color:var(--texto)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .lead{margin:1.25rem 0 0;font-size:1.0625rem;line-height:1.7;color:var(--texto-2);max-width:64ch}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .meta b{font-size:.75rem;font-weight:600;letter-spacing:.04em;padding:.35rem .75rem;
  border-radius:999px;background:rgba(var(--a),.1);color:var(--texto)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .idx{padding-block:2.5rem;border-bottom:1px solid var(--borde)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .idx h2{margin:0 0 1.25rem;font-size:.6875rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .idxgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.5rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .idxgrid a{display:grid;grid-template-columns:1.6rem 1fr;gap:.6rem;align-items:baseline;
  padding:.6rem .7rem;border-radius:9px;text-decoration:none;color:var(--texto);
  font-size:.875rem;font-weight:700;transition:background 140ms}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .idxgrid a:hover,:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .idxgrid a:focus-visible{background:rgba(var(--a),.09)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .idxgrid a i{font-style:normal;font-weight:700;font-size:.75rem;color:var(--coral-texto);
  font-variant-numeric:tabular-nums}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .idxgrid a u{display:block;grid-column:2;text-decoration:none;font-size:.75rem;
  font-weight:400;color:var(--texto-2);margin-top:.1rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arq{padding-block:clamp(2.75rem,5vw,4rem);border-bottom:1px solid var(--borde)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cab{display:grid;grid-template-columns:2.5rem 1fr;gap:1rem;align-items:start;margin-bottom:1.75rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .num{font-weight:800;font-size:1.5rem;letter-spacing:-.03em;color:var(--coral);
  font-variant-numeric:tabular-nums;line-height:1.1}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cab h3{margin:0;font-size:clamp(1.25rem,2.6vw,1.625rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.2;color:var(--texto)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cab p{margin:.5rem 0 0;font-size:.9375rem;line-height:1.65;color:var(--texto-2);max-width:62ch}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .usos{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .usos span{font-size:.75rem;font-weight:600;padding:.28rem .65rem;border-radius:999px;
  background:rgba(var(--k),.13);color:var(--coral-texto)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .usos span.ojo{background:rgba(209,52,75,.16);color:#9E1F30}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .aviso{margin-top:1rem;display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;
  background:rgba(209,52,75,.07);border:1px solid rgba(209,52,75,.28);
  border-left:3px solid #D1344B;border-radius:12px;padding:.9rem 1.1rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .aviso .et{font-size:.625rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#9E1F30;white-space:nowrap;padding-top:.15rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .aviso p{margin:0;font-size:.875rem;line-height:1.6;color:var(--texto-2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .escena{border-radius:16px;overflow:hidden;padding:clamp(1.1rem,2.6vw,2rem);
  background:linear-gradient(135deg,var(--acento) 0%,var(--azul-900) 100%);
  position:relative;isolation:isolate}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .escena::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:20px 20px}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .escena>*{position:relative;z-index:1}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp{container-type:inline-size;position:relative;width:100%;
  aspect-ratio:660/var(--alto,392);font-family:var(--sans);color:var(--p-tinta);
  font-weight:600}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .p{position:absolute;background:#FFFFFF;border-radius:11px;
  left:calc(var(--x) * .1515cqw);top:calc(var(--y) * .1515cqw);
  width:calc(var(--w) * .1515cqw);padding:calc(var(--mkpad,16) * .1515cqw);
  box-shadow:0 3cqw 6.5cqw -3cqw rgba(8,20,33,.5),0 .6cqw 1.4cqw rgba(8,20,33,.14)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .p.alto{z-index:3;box-shadow:0 4.6cqw 9.2cqw -3cqw rgba(8,20,33,.62),
  0 .8cqw 1.8cqw rgba(8,20,33,.18),0 0 0 .2cqw rgba(255,255,255,.92)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .p.app{padding:0;overflow:hidden;overflow:clip;z-index:1;
  height:calc(var(--h,300) * .1515cqw);display:flex;flex-direction:column}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .p.app .bd{flex:1;min-height:0}
/* overflow:clip DETRAS DE overflow:hidden. Con `hidden` la caja sigue
   siendo un contenedor DESPLAZABLE: no se mueve con la rueda, pero si con
   el trackpad en Safari y con el teclado cuando algo de dentro recibe el
   foco. Mariana podia arrastrar los bloques de texto dentro del panel de
   capacidades y la maqueta quedaba recortada (5-oct-2026). `clip` recorta
   igual pero NO crea contenedor de desplazamiento, asi que no hay nada que
   mover. Se declaran los dos: el navegador viejo se queda con hidden. */
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .p.app .cv,:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .p.app .lat{overflow:hidden;overflow:clip}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .tb{display:flex;align-items:center;gap:1.8cqw;background:#FFFFFF;
  padding:1.2cqw 1.6cqw 1.2cqw 1.3cqw;border-bottom:.15cqw solid var(--p-borde);flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .lg{height:2.1cqw;width:6.61cqw;display:block;color:var(--azul);flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .amb u{display:flex;align-items:center;gap:.5cqw;text-decoration:none;font-size:max(9px,.97cqw);
  font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--p-tinta2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .amb u s{width:.7cqw;height:.7cqw;border-radius:50%;background:var(--coral);text-decoration:none}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .amb b{display:block;font-size:max(9px,1.45cqw);font-weight:700;margin-top:.15cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .tb .org{font-size:max(9px,1.3cqw);font-weight:600;color:var(--p-tinta2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .tb .sp{flex:1}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .tb .yo{width:3.4cqw;height:3.4cqw;border-radius:50%;background:var(--azul);color:#FFFFFF;
  display:grid;place-items:center;font-size:max(9px,1.212cqw);font-weight:700;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bd{display:flex;min-height:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .rail{background:var(--p-riel);display:flex;flex-direction:column;align-items:center;
  gap:.6cqw;padding:1cqw .9cqw;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .rail a{width:3.4cqw;height:3.4cqw;border-radius:.9cqw;display:grid;place-items:center;
  color:rgba(255,255,255,.5)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .rail a svg{width:2cqw;height:2cqw;display:block}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .rail a.aqui{background:var(--coral);color:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cv{background:var(--p-fondo);padding:1.4cqw 1.6cqw;flex:1;min-width:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .lat{background:#FFFFFF;border-left:.15cqw solid var(--p-borde);padding:1.4cqw 1.5cqw;
  flex:0 0 auto;min-width:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .miga{font-size:max(9px,1.15cqw);font-weight:600;color:var(--p-tinta2);line-height:1.4}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .tit{font-size:max(9px,2.05cqw);font-weight:700;line-height:1.2;margin-top:.15cqw;letter-spacing:-.018em}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .herr{display:flex;align-items:center;gap:.7cqw;margin:1.2cqw 0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bt{display:inline-block;font-size:max(9px,1.364cqw);font-weight:700;padding:.7cqw 1.8cqw;
  border-radius:99px;background:var(--azul);color:#FFFFFF;white-space:nowrap;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bt.gris{background:var(--p-gris);color:var(--p-tinta)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bt.rojo{background:var(--p-alta)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .busca{flex:1;min-width:0;background:var(--p-gris);border-radius:99px;padding:.7cqw 1.4cqw;
  font-size:max(9px,1.212cqw);font-weight:600;color:var(--p-tinta2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .t10{font-size:max(9px,1.515cqw)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .t12{font-size:max(9px,1.818cqw)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .t13{font-size:max(9px,1.97cqw)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .t15{font-size:max(9px,2.273cqw)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .t17{font-size:max(9px,2.576cqw)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .t20{font-size:max(9px,3.03cqw)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .t30{font-size:max(9px,4.55cqw)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .w7{font-weight:700}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .w8{font-weight:800}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .g{color:var(--p-tinta2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .l1{line-height:1.25}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .l2{line-height:1.5}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .n2{font-variant-numeric:tabular-nums}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .fila{display:flex;align-items:center;gap:1.2cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sp{flex:1;min-width:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .m2{margin-top:.3cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .m4{margin-top:.6cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .m6{margin-top:.9cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .m10{margin-top:1.5cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .m14{margin-top:2.1cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .corte{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .rot{font-size:max(9px,1.212cqw);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--p-tinta2);line-height:1.5}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pil{display:inline-block;font-size:max(9px,1.364cqw);font-weight:700;line-height:1.55;
  padding:.4cqw 1.2cqw;border-radius:99px;white-space:nowrap;color:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pil.estado{background:var(--p-estado);color:#25405C}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pil.tipo{background:var(--p-tipo)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pil.alta{background:var(--p-alta)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pil.proy{background:var(--p-proy)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pil.serv{background:var(--p-serv);color:#4A3308}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pil.ok{background:var(--p-ok)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pil.proc{background:var(--p-proceso)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pils{display:flex;flex-wrap:wrap;gap:.7cqw;margin-top:.9cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .caso{display:flex;align-items:flex-start;gap:1.4cqw;border-radius:6px;
  padding:1.2cqw 1.5cqw;border-left:.8cqw solid var(--p-vencido);
  box-shadow:0 .3cqw .9cqw rgba(43,60,78,.15);margin-bottom:1.1cqw;background:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .caso:last-child{margin-bottom:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .caso.ok{border-left-color:#C6CED6}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .der{text-align:right;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .av{width:4.2cqw;height:4.2cqw;border-radius:50%;background:var(--azul);color:#FFFFFF;
  display:grid;place-items:center;font-size:max(9px,1.45cqw);font-weight:700;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .av.cor{background:var(--coral)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .av.cl{background:var(--p-estado);color:#25405C}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .av.pro{background:var(--p-proceso)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .burb{border-radius:6px;border:.15cqw solid var(--p-borde);padding:1.1cqw 1.4cqw;
  flex:1;min-width:0;background:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .burb .aut{font-size:max(9px,1.45cqw);font-weight:700;display:flex;gap:1cqw;align-items:baseline;flex-wrap:wrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .burb .aut em{font-style:normal;font-weight:600;color:var(--p-tinta2);font-variant-numeric:tabular-nums}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .burb .txt{font-size:max(9px,1.6cqw);font-weight:600;line-height:1.5;margin-top:.5cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .burb.int{border-color:var(--coral);border-width:.3cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .burb.int .aut{background:var(--coral);color:#FFFFFF;margin:-1.1cqw -1.4cqw .7cqw;
  padding:.8cqw 1.4cqw;border-radius:4px 4px 0 0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .burb.int .aut em{color:rgba(255,255,255,.9)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .burb.ia{background:#EDF3F8;border-color:#CFE0EC}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .adj{display:inline-flex;align-items:center;gap:.8cqw;margin-top:1cqw;
  border:.15cqw solid var(--p-borde);border-radius:5px;padding:.6cqw 1.1cqw;
  font-size:max(9px,1.3cqw);font-weight:700}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .adj svg{width:1.9cqw;height:1.9cqw;color:var(--azul);flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cifra{font-size:max(9px,4.8cqw);font-weight:800;letter-spacing:-.03em;line-height:1.05;
  font-variant-numeric:tabular-nums}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cifra s{text-decoration:none;font-size:max(9px,1.45cqw);font-weight:600;color:var(--p-tinta2);margin-left:.5cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .barrad{height:2.2cqw;border-radius:99px;overflow:hidden;display:flex}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .barrad i{display:block;height:100%}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .leg{display:flex;flex-wrap:wrap;gap:1.6cqw;margin-top:1.2cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .leg span{display:inline-flex;align-items:center;gap:.6cqw;font-size:max(9px,1.3cqw);
  font-weight:600;color:var(--p-tinta2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .leg span i{width:1.5cqw;height:1.5cqw;border-radius:50%;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .leg span b{color:var(--p-tinta);font-weight:700;font-variant-numeric:tabular-nums}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .mrow{border-top:.15cqw solid var(--p-borde);padding:1.2cqw 0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .mrow:first-of-type{border-top:0;padding-top:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .mrow u{display:block;text-decoration:none;font-size:max(9px,1.6cqw);font-weight:700}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .mrow b{display:block;font-size:max(9px,1.45cqw);font-weight:600;color:var(--p-tinta2);
  margin-top:.35cqw;line-height:1.45}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ag{display:flex;align-items:center;gap:.8cqw;margin-top:.7cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ag i{width:3cqw;height:3cqw;border-radius:50%;background:var(--azul);color:#FFFFFF;
  display:grid;place-items:center;font-size:max(9px,1.1cqw);font-weight:700;font-style:normal;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ag span{font-size:max(9px,1.45cqw);font-weight:600}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .item{display:flex;align-items:center;gap:1.3cqw;padding:1.1cqw 0;
  border-bottom:.15cqw solid var(--p-borde)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .item:last-child{border-bottom:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .item .caja{width:2.7cqw;height:2.7cqw;border-radius:3px;border:.35cqw solid #C6CED6;
  display:grid;place-items:center;background:#FFFFFF;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .item.ya .caja{background:var(--p-ok);border-color:var(--p-ok)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .item .caja svg{width:1.8cqw;height:1.8cqw;color:#FFFFFF;display:block}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .item.no .caja{border-color:var(--p-alta);border-style:dashed}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .item .n{flex:1;min-width:0;font-size:max(9px,1.6cqw);font-weight:600;line-height:1.35}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .item.ya .n{color:var(--p-tinta2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .item .marca{font-size:max(9px,1.3cqw);font-weight:700;color:var(--p-tinta2);
  font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .riel2{display:grid;grid-template-columns:repeat(5,1fr);position:relative;padding-top:.5cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .riel2::before{content:"";position:absolute;left:10%;right:10%;top:3cqw;height:.5cqw;
  background:var(--p-gris);border-radius:2px}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .riel2::after{content:"";position:absolute;left:10%;width:40%;top:3cqw;height:.5cqw;
  background:var(--p-ok);border-radius:2px}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .paso{position:relative;text-align:center;z-index:1;padding-inline:.4cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .paso i{display:grid;place-items:center;width:5cqw;height:5cqw;border-radius:50%;
  margin:0 auto 1cqw;background:#FFFFFF;border:.5cqw solid var(--p-gris);
  font-style:normal;font-size:max(9px,1.45cqw);font-weight:700;color:var(--p-tinta2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .paso.ya i{background:var(--p-ok);border-color:var(--p-ok);color:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .paso.hoy i{background:#FFFFFF;border-color:var(--coral);color:var(--coral-texto);
  box-shadow:0 0 0 .8cqw rgba(238,108,77,.2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .paso b{display:block;font-size:max(9px,1.45cqw);font-weight:700;line-height:1.3}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .paso.pend b{color:var(--p-tinta2);font-weight:600}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .paso u{display:block;text-decoration:none;font-size:max(9px,1.3cqw);font-weight:600;
  color:var(--p-tinta2);margin-top:.35cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .flujo{position:relative;width:100%;height:100%;
  background:radial-gradient(circle,rgba(43,60,78,.16) .3cqw,transparent .3cqw) 0 0/2.3cqw 2.3cqw,#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .flujo svg.hilos{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodo,:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .punto{position:absolute;left:calc(var(--x) * .1515cqw);top:calc(var(--y) * .1515cqw)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodo{border-radius:5px;padding:.85cqw 1.1cqw;width:14cqw;
  box-shadow:0 1.2cqw 2.4cqw -1.2cqw rgba(0,0,0,.42)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodo b{display:block;font-size:max(9px,1.45cqw);font-weight:700;color:#FFFFFF;line-height:1.3;margin-bottom:.45cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodo u{display:block;text-decoration:none;font-size:max(9px,1.3cqw);font-weight:600;line-height:1.5;
  border-radius:3px;padding:.18cqw .45cqw;margin-bottom:.22cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodo u:last-child{margin-bottom:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodo.dec{background:var(--azul)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodo.dec u{background:rgba(255,255,255,.26);color:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodo.tra{background:var(--coral)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodo.tra u{background:rgba(255,255,255,.3);color:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .punto{width:4.6cqw;height:4.6cqw;border-radius:50%;background:var(--azul-dark);
  display:grid;place-items:center;box-shadow:0 1.2cqw 2.4cqw -1.2cqw rgba(0,0,0,.5)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .punto svg{width:2.3cqw;height:2.3cqw;color:#FFFFFF;display:block}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .guardar{position:absolute;right:1.4cqw;bottom:1.4cqw;background:var(--azul);color:#FFFFFF;
  font-size:max(9px,1.3cqw);font-weight:700;padding:.6cqw 1.8cqw;border-radius:99px}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .trans{display:flex;align-items:center;gap:1.1cqw;flex-wrap:wrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .trans .flecha{width:3.6cqw;height:.3cqw;background:var(--p-tinta2);position:relative;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .trans .flecha::after{content:"";position:absolute;right:0;top:50%;
  border-left:1.1cqw solid var(--p-tinta2);border-block:.75cqw solid transparent;
  transform:translateY(-50%)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .modal{border:.3cqw solid var(--azul);border-radius:8px;overflow:hidden;background:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .modal .mh{background:var(--azul-dark);color:#FFFFFF;font-size:max(9px,1.6cqw);font-weight:700;
  padding:.9cqw 1.5cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .modal .mb{padding:1.6cqw 1.5cqw;text-align:center}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .serie,:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .dona{display:block;width:100%;height:auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .vacio{display:grid;place-items:center;text-align:center;height:100%;
  font-size:max(9px,1.8cqw);font-weight:700;color:var(--p-tinta2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arbol{background:#FFFFFF;border-radius:7px;box-shadow:0 .3cqw .9cqw rgba(43,60,78,.15);overflow:hidden}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodoA{display:flex;align-items:center;gap:1.1cqw;padding:1cqw 1.3cqw;
  border-bottom:.15cqw solid var(--p-borde);font-size:max(9px,1.5cqw)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodoA:last-child{border-bottom:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodoA .chev{font-style:normal;color:var(--p-tinta2);font-size:max(9px,1.3cqw);flex:0 0 auto;width:1.3cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodoA svg{width:2cqw;height:2cqw;color:var(--p-tinta2);flex:0 0 auto;display:block}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodoA.hijo{padding-left:4.2cqw;background:#FAFBFC}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .barraG{display:flex;align-items:center;gap:.9cqw;padding:.5cqw 0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .barraG .et{width:26%;font-size:max(9px,1.3cqw);color:var(--p-tinta2);flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .barraG .tr{flex:1;height:1.8cqw;background:#EFEFEF;border-radius:99px;overflow:hidden}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .barraG .tr i{display:block;height:100%;border-radius:99px}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .barraG .vl{width:11%;text-align:right;font-size:max(9px,1.3cqw);font-weight:700;
  font-variant-numeric:tabular-nums;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pest{display:flex;border-bottom:.15cqw solid var(--p-borde)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pest span{font-size:max(9px,1.4cqw);padding:.8cqw 1.3cqw;color:var(--p-tinta2);white-space:nowrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pest span.aqui{color:var(--p-tinta);font-weight:700;border-bottom:.3cqw solid var(--azul)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pliega{display:flex;align-items:center;gap:.9cqw;padding:1cqw 0;
  border-bottom:.15cqw solid var(--p-borde);font-size:max(9px,1.5cqw);font-weight:700}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pliega em{font-style:normal;margin-left:auto;color:var(--p-tinta2);font-size:max(9px,1.3cqw);font-weight:600}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .campo{padding:.8cqw 0;border-bottom:.15cqw solid var(--p-borde)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .campo u{display:block;text-decoration:none;font-size:max(9px,1.2cqw);color:var(--p-tinta2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .campo b{display:block;font-size:max(9px,1.5cqw);font-weight:700;margin-top:.2cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .preg{border:.15cqw solid var(--p-borde);border-radius:6px;padding:1cqw 1.2cqw;
  margin-bottom:.8cqw;background:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .preg .q{font-size:max(9px,1.45cqw);font-weight:700;line-height:1.35}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .estrellas{display:flex;gap:.5cqw;margin-top:.6cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .estrellas i{width:2.2cqw;height:2.2cqw;border-radius:50%;background:#EFEFEF;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .estrellas i.on{background:var(--p-serv)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .eco6{background:var(--azul-900);border-radius:16px;padding:clamp(1rem,2.4vw,2rem)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bd6{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bcd{background:#FFFFFF;border-radius:16px;padding:1.4rem;display:flex;flex-direction:column;
  gap:.5rem;overflow:hidden;min-width:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bcd.uno{grid-column:span 1}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bcd.dos{grid-column:span 2}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bcd.big{grid-column:span 3;padding:1.8rem;display:grid;grid-template-columns:1fr .82fr;
  gap:1.6rem;align-items:center}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bcd.azul{background:var(--azul);color:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bcd .bdg{font-size:.625rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--azul-2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bcd.azul .bdg{color:rgba(255,255,255,.8)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bcd h4{margin:.2rem 0 0;font-size:1.0625rem;font-weight:600;line-height:1.32;
  letter-spacing:-.014em;color:var(--azul)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bcd.azul h4{color:#FFFFFF;font-size:1.375rem;max-width:22ch}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bcd p{margin:.3rem 0 0;font-size:.8125rem;line-height:1.6;color:var(--azul-2);max-width:42ch}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bcd.azul p{color:rgba(255,255,255,.78)}
.bmk{margin:auto -1.4rem -1.4rem 0;padding-top:1.15rem;min-width:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bcd.big .bmk{margin:0 -1.8rem -1.8rem 0;padding-top:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .win{background:#FFFFFF;color:var(--p-tinta);border:1px solid rgba(var(--a),.16);border-right:0;border-bottom:0;
  border-radius:10px 0 0 0;overflow:hidden;box-shadow:-14px -12px 34px -18px rgba(var(--a),.55)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bcd.azul .win{border-color:rgba(255,255,255,.2);box-shadow:-14px -12px 34px -18px rgba(0,0,0,.6)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .wtop{display:flex;align-items:center;gap:.4rem;padding:.44rem .62rem;
  border-bottom:1px solid rgba(var(--a),.14);background:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .wtop i{width:6px;height:6px;border-radius:50%;background:var(--coral);flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .wtop b{font-size:.625rem;font-weight:700;color:var(--azul);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .wtop em{margin-left:auto;font-style:normal;font-size:.5625rem;font-weight:700;
  color:var(--azul-2);white-space:nowrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .wbody{padding:.7rem .75rem 2.1rem;background:var(--p-fondo);color:var(--p-tinta)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sfila{display:flex;align-items:center;gap:.45rem;background:#FFFFFF;border-radius:5px;
  padding:.36rem .5rem;margin-bottom:.32rem;box-shadow:0 1px 2px rgba(43,60,78,.12)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sfila:last-child{margin-bottom:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sfila.vc{border-left:3px solid var(--p-vencido)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sfila .t{flex:1;min-width:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sfila .n{display:block;font-size:.6875rem;font-weight:700;color:var(--p-tinta);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sfila .c{display:block;font-size:.5625rem;color:var(--p-tinta2);line-height:1.35}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .spil{font-size:0.5312rem;font-weight:700;padding:.1rem .34rem;border-radius:99px;color:#FFFFFF;
  white-space:nowrap;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .spil.est{background:var(--p-estado);color:#25405C}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .spil.tip{background:var(--p-tipo)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .spil.ok{background:var(--p-ok)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .spil.alt{background:var(--p-alta)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .spil.pro{background:var(--p-proceso)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sdot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:var(--p-ok)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .scif{font-size:1.5rem;font-weight:800;color:var(--p-tinta);letter-spacing:-.03em;
  line-height:1.05;font-variant-numeric:tabular-nums}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .scif s{text-decoration:none;font-size:.5625rem;font-weight:600;color:var(--p-tinta2);margin-left:.25rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .srot{font-size:0.5312rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--p-tinta2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sbar{height:7px;border-radius:99px;overflow:hidden;display:flex}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sbar i{display:block;height:100%}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sleg{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.4rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sleg span{display:inline-flex;align-items:center;gap:.22rem;font-size:0.5312rem;
  color:var(--p-tinta2);font-weight:600}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sleg span i{width:5px;height:5px;border-radius:50%;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sleg span b{color:var(--p-tinta);font-weight:700;font-variant-numeric:tabular-nums}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sed{position:relative;height:76px;border-radius:5px;overflow:hidden;
  background:radial-gradient(circle,rgba(43,60,78,.16) 1px,transparent 1px) 0 0/11px 11px,#FFFFFF;
  box-shadow:0 1px 2px rgba(43,60,78,.12)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snd{position:absolute;border-radius:4px;padding:.22rem .3rem;width:76px;
  box-shadow:0 3px 8px -4px rgba(0,0,0,.45)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snd b{display:block;font-size:0.5312rem;font-weight:700;color:#FFFFFF;line-height:1.3;margin-bottom:.14rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snd u{display:block;text-decoration:none;font-size:0.5312rem;font-weight:600;line-height:1.45;
  border-radius:2px;padding:.04rem .18rem;margin-bottom:.08rem;color:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snd u:last-child{margin-bottom:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snd.dec{background:var(--azul);left:10px;top:12px}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snd.dec u{background:rgba(255,255,255,.26)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snd.tra{background:var(--coral);left:118px;top:26px}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snd.tra u{background:rgba(255,255,255,.3)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sed .lin{position:absolute;left:88px;top:38px;width:28px;height:0;border-top:1.5px dashed rgba(43,60,78,.45)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .smod{border:2px solid var(--azul);border-radius:6px;overflow:hidden;background:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .smod .mh{background:var(--azul-dark);color:#FFFFFF;font-size:.625rem;font-weight:700;padding:.32rem .55rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .smod .mb{padding:.55rem;text-align:center}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .smod .mb .q{font-size:.6875rem;font-weight:600;color:var(--p-tinta)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .smod .mb .bs{display:flex;gap:.3rem;justify-content:center;margin-top:.45rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .smod .mb .bs span{font-size:.5625rem;font-weight:700;padding:.24rem .6rem;border-radius:99px;color:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .strans{display:flex;align-items:center;gap:.3rem;margin-bottom:.45rem;flex-wrap:wrap}
/* `inset:auto` NO sobra. `.fl` es un nombre que tambien usa otro componente
   de la pagina —una columna pegajosa— con `position:sticky;top:6rem`. Esta
   regla gana en `position`, pero el `top:6rem` seguia aplicandose: con
   `position:relative` eso baja la flecha 96 px y aterrizaba suelta dentro
   del panel de aprobacion, lejos de las dos pastillas que une. Se veia en
   el home a cualquier ancho. Medido el 9-oct-2026. */
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .strans .fl{width:14px;height:1.5px;background:var(--p-tinta2);position:relative;inset:auto;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .strans .fl::after{content:"";position:absolute;right:0;top:50%;border-left:5px solid var(--p-tinta2);
  border-block:3.5px solid transparent;transform:translateY(-50%)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sser{display:block;width:100%;height:auto}
@media(max-width:980px){:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bd6{grid-template-columns:repeat(2,1fr)}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bcd.big{grid-column:span 2;grid-template-columns:1fr}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bcd.big .bmk{margin:1rem -1.8rem -1.8rem 0}}
@media(max-width:620px){:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bd6{grid-template-columns:1fr}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bcd.uno,:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bcd.dos,:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bcd.big{grid-column:span 1}}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sedin{position:relative;width:300px;height:104px;max-width:100%}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sedin svg{position:absolute;inset:0;width:300px;height:104px}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sed{height:104px;display:flex;justify-content:flex-start;align-items:center;overflow:hidden}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snd{position:absolute;border-radius:4px;padding:.22rem .3rem;width:74px;
  box-shadow:0 3px 8px -4px rgba(0,0,0,.45)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snd.dec{background:var(--azul)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snd.dec u{background:rgba(255,255,255,.26)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snd.tra{background:var(--coral)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snd.tra u{background:rgba(255,255,255,.3)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .spt{position:absolute;width:19px;height:19px;border-radius:50%;background:var(--azul-dark);
  display:grid;place-items:center}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .spt svg{position:static;width:10px;height:10px;color:#FFFFFF;display:block}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sgrid{display:grid;grid-template-columns:1fr 1fr;gap:.32rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .stile{display:flex;align-items:center;gap:.36rem;background:#FFFFFF;border-radius:5px;
  padding:.34rem .4rem;box-shadow:0 1px 2px rgba(43,60,78,.12);min-width:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .stile .ic{width:19px;height:19px;border-radius:4px;display:grid;place-items:center;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .stile .ic svg{width:11px;height:11px;color:#FFFFFF;display:block}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .stile .t{min-width:0;flex:1}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .stile .n{display:block;font-size:.5625rem;font-weight:700;color:var(--p-tinta);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .stile .k{display:block;font-size:0.5312rem;color:var(--p-tinta2);line-height:1.3}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pvgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pvcard{background:var(--fondo-2);border:1px solid var(--borde);border-radius:14px;
  padding:1.1rem;min-width:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pvcard .pvh{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.7rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pvcard .pvh b{font-size:.9375rem;font-weight:700;color:var(--texto)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pvcard .pvh em{font-style:normal;margin-left:auto;font-size:.6875rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--coral-texto)}
.cw{background:#FFFFFF;color:var(--p-tinta);border-radius:9px;overflow:hidden;
  box-shadow:0 12px 30px -18px rgba(8,20,33,.65),0 2px 6px rgba(8,20,33,.12)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctb{display:flex;align-items:center;gap:.6rem;background:#FFFFFF;padding:.38rem .5rem;
  border-bottom:1px solid var(--p-borde)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctb .lg2{height:11px;width:34.6px;display:block;color:var(--azul);flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .camb u{display:flex;align-items:center;gap:.2rem;text-decoration:none;font-size:0.5312rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--p-tinta2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .camb u s{width:4px;height:4px;border-radius:50%;background:var(--coral);text-decoration:none}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .camb b{display:block;font-size:.5625rem;font-weight:700;margin-top:.04rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctb .sp2{flex:1}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctb .yo2{width:14px;height:14px;border-radius:50%;background:var(--azul);color:#FFFFFF;
  display:grid;place-items:center;font-size:0.5312rem;font-weight:700;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cbd{display:flex;min-height:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .crail{background:var(--p-riel);display:flex;flex-direction:column;align-items:center;
  gap:.2rem;padding:.35rem .3rem;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .crail a{width:15px;height:15px;border-radius:4px;display:grid;place-items:center;
  color:rgba(255,255,255,.5)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .crail a svg{width:9px;height:9px;display:block}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .crail a.aqui{background:var(--coral);color:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ccv{background:var(--p-fondo);padding:.5rem .58rem;flex:1;min-width:0;color:var(--p-tinta)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cmiga{font-size:0.5312rem;font-weight:600;color:var(--p-tinta2);line-height:1.35}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctit{font-size:.75rem;font-weight:700;line-height:1.25;margin-top:.06rem;letter-spacing:-.01em}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ccab{display:flex;align-items:baseline;gap:.4rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ccab .sp2{flex:1}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pnote2{display:flex;align-items:flex-start;gap:.4rem;margin-top:.6rem;font-size:.75rem;
  line-height:1.5;color:var(--texto-2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pnote2 i{width:5px;height:5px;border-radius:50%;background:var(--coral);flex:0 0 auto;margin-top:.45rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .stab{width:100%;border-collapse:collapse;background:#FFFFFF;border-radius:5px;overflow:hidden;
  box-shadow:0 1px 2px rgba(43,60,78,.12)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .stab th{font-size:0.5312rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--p-tinta2);text-align:left;padding:.3rem .42rem;border-bottom:1px solid var(--p-borde)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .stab td{font-size:.5625rem;font-weight:600;color:var(--p-tinta);padding:.32rem .42rem;
  border-bottom:1px solid var(--p-borde)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .stab tr:last-child td{border-bottom:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .stab td.n{font-variant-numeric:tabular-nums;font-weight:700}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sbur{display:flex;gap:.32rem;margin-bottom:.3rem;align-items:flex-start}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sbur .av{width:15px;height:15px;border-radius:50%;background:var(--azul);color:#FFFFFF;
  display:grid;place-items:center;font-size:0.5312rem;font-weight:700;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sbur .av.cl{background:var(--p-estado);color:#25405C}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sbur .av.ok{background:var(--p-ok)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sbur .bd{background:#FFFFFF;border:1px solid var(--p-borde);border-radius:5px;
  padding:.28rem .4rem;font-size:.5625rem;line-height:1.45;color:var(--p-tinta);flex:1;min-width:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sbur .bd u{display:block;text-decoration:none;font-size:0.5312rem;font-weight:700;
  color:var(--p-tinta2);margin-bottom:.1rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .srow{display:flex;align-items:baseline;gap:.5rem;padding:.28rem 0;
  border-bottom:1px solid var(--p-borde);font-size:.5625rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .srow:last-child{border-bottom:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .srow u{text-decoration:none;color:var(--p-tinta2);width:38%;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .srow b{color:var(--p-tinta);font-weight:700}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .csed{container-type:inline-size;position:relative;width:100%;aspect-ratio:430/92;
  border-radius:5px;overflow:hidden;box-shadow:0 1px 2px rgba(43,60,78,.12);
  background:radial-gradient(circle,rgba(43,60,78,.16) .23cqw,transparent .23cqw) 0 0/2.8cqw 2.8cqw,#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .csed svg.hl2{position:absolute;inset:0;width:100%;height:100%}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cnd,:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cpt{position:absolute;left:calc(var(--x) * .2326cqw);top:calc(var(--y) * .2326cqw)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cnd{border-radius:3px;padding:.5cqw .7cqw;width:17.7cqw;box-shadow:0 .7cqw 1.6cqw -.7cqw rgba(0,0,0,.45)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cnd b{display:block;font-size:max(9px,1.63cqw);font-weight:700;color:#FFFFFF;line-height:1.3;margin-bottom:.3cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cnd u{display:block;text-decoration:none;font-size:max(9px,1.51cqw);font-weight:600;line-height:1.45;
  border-radius:2px;padding:.1cqw .35cqw;color:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cnd.dec{background:var(--azul)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cnd.dec u{background:rgba(255,255,255,.26)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cnd.tra{background:var(--coral)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cnd.tra u{background:rgba(255,255,255,.3)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cpt{width:4.65cqw;height:4.65cqw;border-radius:50%;background:var(--azul-dark);
  display:grid;place-items:center}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cpt svg{width:2.56cqw;height:2.56cqw;color:#FFFFFF;display:block}
@media(max-width:820px){:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pvgrid{grid-template-columns:1fr}}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .edbar{display:flex;align-items:center;gap:1.4cqw;background:#FFFFFF;padding:1cqw 1.6cqw;
  border-bottom:.15cqw solid var(--p-borde)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .edbar .nm{font-size:max(9px,1.6cqw);font-weight:700;color:var(--p-tinta);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:22cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .edbar .bt2{font-size:max(9px,1.36cqw);font-weight:700;padding:.7cqw 1.5cqw;border-radius:5px;
  background:var(--azul);color:#FFFFFF;white-space:nowrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .edbar .bt2.g2{background:var(--p-gris);color:var(--p-tinta)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .edbar .cnt2{margin-left:auto;font-size:max(9px,1.3cqw);font-weight:600;color:var(--p-tinta2);white-space:nowrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pal{background:#FFFFFF;border-right:.15cqw solid var(--p-borde);padding:1.2cqw 1.1cqw;
  flex:0 0 auto;width:15.6cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pal .ph2{font-size:max(9px,1.5cqw);font-weight:700;margin-bottom:.9cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pca{border:.3cqw solid;border-radius:5px;padding:.7cqw .8cqw;margin-bottom:.8cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pca b{display:block;font-size:max(9px,1.3cqw);font-weight:700;line-height:1.3}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pca u{display:block;text-decoration:none;font-size:max(9px,1.15cqw);color:var(--p-tinta2);margin-top:.2cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pca i{display:block;height:1.5cqw;border-radius:2px;margin-top:.45cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pca.cli{border-color:var(--azul);background:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pca.age{border-color:var(--azul-dark);background:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pca.dec2{border-color:var(--azul-dark);background:var(--azul-dark)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pca.dec2 b{color:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pca.dec2 i{background:var(--p-estado)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pca.not{border-color:var(--azul-dark);background:var(--azul-dark)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pca.not b{color:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pca.not u{color:rgba(255,255,255,.6)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pca.not i{background:rgba(255,255,255,.14);height:3cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .lienzo2{position:relative;flex:1;min-width:0;
  background:radial-gradient(circle,rgba(43,60,78,.13) .16cqw,transparent .16cqw) 0 0/2.2cqw 2.2cqw,#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .act{position:absolute;left:calc(var(--x) * .1515cqw);top:calc(var(--y) * .1515cqw);
  width:calc(var(--w,86) * .1515cqw);background:#FFFFFF;border:.15cqw solid var(--p-borde);
  border-radius:4px;padding:.55cqw .6cqw;box-shadow:0 .6cqw 1.4cqw -.6cqw rgba(0,0,0,.35)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .act b{display:block;font-size:max(9px,1.06cqw);font-weight:700;line-height:1.25;color:var(--p-tinta)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .act u{display:block;text-decoration:none;font-size:max(9px,.9cqw);color:var(--p-tinta2);
  line-height:1.35;margin-top:.15cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .act s{display:block;text-decoration:none;font-size:max(9px,.9cqw);font-weight:700;color:#FFFFFF;
  border-radius:2px;padding:.22cqw .35cqw;margin-top:.35cqw;text-align:center}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .act s.ok{background:var(--azul)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .act s.no{background:#C0392B}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .act.resp{background:#DCE9F2;border-color:#B9D2E4}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .act.com{background:#5C6B7A;border-color:#48555F}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .act.com b,:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .act.com u{color:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .act.tra2{background:var(--coral);border-color:var(--coral);padding:.4cqw .5cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .act.tra2 b,:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .act.tra2 u{color:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bucle{position:absolute;left:calc(var(--x) * .1515cqw);top:calc(var(--y) * .1515cqw);
  width:calc(var(--w) * .1515cqw);height:calc(var(--h) * .1515cqw);
  border:.15cqw dashed var(--p-serv);border-radius:4px}
/* width:max-content va a proposito. El rotulo esta posicionado dentro de .bucle,
   que tiene ancho fijo, asi que su ancho de ajuste quedaba topado por el de la
   caja punteada: con el piso de 9px de la fuente el texto pedia 88px y la caja
   daba 80, y las letras se salian de la pastilla blanca por los dos lados. Con
   max-content la pastilla crece con el texto y sigue centrada. */
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bucle span{position:absolute;left:50%;bottom:-1.1cqw;transform:translateX(-50%);
  width:max-content;max-width:none;
  background:#FFFFFF;border:.15cqw solid var(--p-serv);border-radius:99px;
  padding:.2cqw .7cqw;font-size:max(9px,.9cqw);font-weight:700;color:#8A6410;white-space:nowrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .vrow{display:flex;align-items:center;gap:.8cqw;border-top:.15cqw solid var(--p-borde);padding:.9cqw 0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .vrow .t{flex:1;min-width:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .vrow b{display:block;font-size:max(9px,1.45cqw);font-weight:700}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .vrow u{display:block;text-decoration:none;font-size:max(9px,1.2cqw);color:var(--p-tinta2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .vtag{font-size:max(9px,1cqw);font-weight:700;letter-spacing:.04em;background:var(--p-gris);
  color:var(--p-tinta);border-radius:3px;padding:.3cqw .6cqw;white-space:nowrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .edmini{position:relative;height:118px;border-radius:5px;overflow:hidden;
  box-shadow:0 1px 2px rgba(43,60,78,.12);
  background:radial-gradient(circle,rgba(43,60,78,.14) 1px,transparent 1px) 0 0/11px 11px,#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .eact{position:absolute;background:#FFFFFF;border:1px solid var(--p-borde);border-radius:4px;
  padding:4px 5px;box-shadow:0 3px 7px -3px rgba(0,0,0,.3)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .eact b{display:block;font-size:0.5312rem;font-weight:700;line-height:1.25;color:var(--p-tinta)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .eact u{display:block;text-decoration:none;font-size:0.5312rem;color:var(--p-tinta2);
  line-height:1.3;margin-top:1px}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .eact s{display:block;text-decoration:none;font-size:0.5312rem;font-weight:700;color:#FFFFFF;
  border-radius:2px;padding:1.5px 3px;margin-top:3px;text-align:center}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .eact s.ok{background:var(--azul)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .eact s.no{background:#C0392B}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .eact.resp{background:#DCE9F2;border-color:#B9D2E4}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .eact .cli{background:rgba(61,90,127,.22);color:#25405C}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .eini{position:absolute;width:15px;height:15px;border-radius:50%;background:var(--azul-dark);
  display:grid;place-items:center}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .eini svg{width:8px;height:8px;color:#FFFFFF;display:block}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ebuc{position:absolute;border:1px dashed var(--p-serv);border-radius:4px}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ebuc span{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);background:#FFFFFF;
  border:1px solid var(--p-serv);border-radius:99px;padding:1px 5px;font-size:0.5312rem;
  font-weight:700;color:#8A6410;white-space:nowrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .etap{display:flex;align-items:center;gap:1.1cqw;padding:.55cqw 0;font-size:max(9px,1.6cqw);font-weight:600}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .etap.n1{padding-left:2.4cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .etap.n2{padding-left:5cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .etap .cir{width:2.9cqw;height:2.9cqw;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:#C6CED6}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .etap .cir svg{width:1.7cqw;height:1.7cqw;color:#FFFFFF;display:block}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .etap.cur .cir{background:var(--p-tinta2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .etap.ok .cir{background:var(--p-ok)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .etap .chev2{font-style:normal;margin-left:auto;color:var(--p-tinta2);font-size:max(9px,1.4cqw)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .etap .hilo{width:.2cqw;height:2cqw;background:var(--p-borde);margin-left:1.35cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .firma{border:.3cqw solid var(--azul);border-radius:7px;overflow:hidden;background:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .firma .fh{background:var(--azul-dark);color:#FFFFFF;font-size:max(9px,1.6cqw);font-weight:700;padding:.9cqw 1.4cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .firma .fb{padding:1.4cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .firma .ft{text-align:center;font-size:max(9px,1.7cqw);font-weight:700;margin-bottom:1.1cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .firma .doc{display:flex;align-items:center;gap:.9cqw;font-size:max(9px,1.5cqw);font-weight:600}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .firma .doc svg{width:2.1cqw;height:2.1cqw;color:var(--p-tinta2);flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .firma .sig{display:flex;align-items:center;gap:.9cqw;margin-top:.7cqw;padding-left:1cqw;
  font-size:max(9px,1.45cqw);font-weight:600}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .firma .sig i{width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--p-tinta2);
  display:grid;place-items:center;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .firma .sig i svg{width:1.3cqw;height:1.3cqw;color:#FFFFFF;display:block}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pnl{border:.3cqw solid var(--p-estado);border-radius:7px;overflow:hidden;background:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pnl .ph3{background:var(--p-estado);color:#25405C;font-size:max(9px,1.5cqw);font-weight:700;
  padding:.8cqw 1.4cqw;display:flex;align-items:center;gap:1cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pnl .ph3 em{font-style:normal;margin-left:auto;font-weight:600;font-size:max(9px,1.3cqw);
  font-variant-numeric:tabular-nums}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pnl .pb3{padding:1.5cqw;text-align:center}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pnl .pq{font-size:max(9px,1.7cqw);font-weight:600;color:var(--p-tinta);line-height:1.4}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .caritas{display:flex;justify-content:center;gap:1.4cqw;margin:1.2cqw 0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .caritas span{width:5.4cqw;height:5.4cqw;border-radius:50%;border:.3cqw solid #C6CED6;
  display:grid;place-items:center;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .caritas span svg{width:3.6cqw;height:3.6cqw;color:#8FA0B0;display:block}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .caritas span.sel{border-color:var(--azul);border-width:.45cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .caritas span.sel svg{color:var(--azul)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pnl .bt3{display:inline-block;font-size:max(9px,1.45cqw);font-weight:700;padding:.8cqw 2cqw;
  border-radius:5px;background:var(--azul);color:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .mchk .mt2{font-size:max(9px,2.6cqw);font-weight:700;text-align:center;color:var(--p-tinta);
  letter-spacing:-.02em}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .espacio{background:var(--p-fondo);border-radius:8px;padding:1.6cqw 1.4cqw;margin-top:1.4cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .espacio h5{margin:0 0 1.2cqw;font-size:max(9px,2cqw);font-weight:700;color:var(--p-tinta)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cpar{display:grid;grid-template-columns:1.25fr 1fr;gap:1cqw;margin-bottom:.9cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cpar:last-child{margin-bottom:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .campo{position:relative;background:#FFFFFF;border:.18cqw solid #BFC9D4;border-radius:5px;
  padding:1.4cqw 1cqw .7cqw;display:flex;align-items:center;gap:.6cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .campo u{position:absolute;top:-.9cqw;left:.9cqw;background:#FFFFFF;padding:0 .4cqw;
  text-decoration:none;font-size:max(9px,1.1cqw);color:var(--p-tinta2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .campo b{font-size:max(9px,1.6cqw);font-weight:600;color:var(--p-tinta);flex:1;min-width:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .campo svg{width:1.9cqw;height:1.9cqw;color:var(--p-tinta2);flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .btgrande{display:block;margin:1.6cqw auto 0;background:var(--azul);color:#FFFFFF;
  font-size:max(9px,1.9cqw);font-weight:700;padding:1.1cqw 3.4cqw;border-radius:6px;width:max-content}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cap16{aspect-ratio:16/9;max-height:420px;border-radius:12px;overflow:hidden;overflow:clip;
  background:linear-gradient(160deg,#F7F9FC 0%,#EDF2F7 100%);
  border:1px solid var(--borde-claro,#E2EAF0);
  padding:clamp(.9rem,2vw,1.6rem);display:grid;align-content:center}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cap16 .comp{aspect-ratio:660/360}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cap16 .p{box-shadow:0 2.4cqw 5cqw -2.4cqw rgba(8,20,33,.3),0 .5cqw 1.2cqw rgba(8,20,33,.1)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cap16 .p.alto{box-shadow:0 3.6cqw 7.2cqw -2.6cqw rgba(8,20,33,.4),
  0 .6cqw 1.4cqw rgba(8,20,33,.14),0 0 0 .15cqw rgba(255,255,255,.95)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile{display:flex;align-items:center;gap:1.1cqw;background:#FFFFFF;border-radius:6px;
  padding:1.1cqw 1.2cqw;box-shadow:0 .3cqw .9cqw rgba(43,60,78,.14);min-width:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile .ci2{width:4.4cqw;height:4.4cqw;border-radius:5px;display:grid;place-items:center;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile .ci2 svg{width:2.5cqw;height:2.5cqw;color:#FFFFFF;display:block}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile .t2{min-width:0;flex:1}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile b{display:block;font-size:max(9px,1.5cqw);font-weight:700;color:var(--p-tinta);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile u{display:block;text-decoration:none;font-size:max(9px,1.25cqw);color:var(--p-tinta2);line-height:1.3}
/* ══ LA MAQUETA EN TELEFONO: SE ENCOGE ENTERA, NO SE DESARMA ══════════════

   «La idea de todo es que se vea como el estilo de la plataforma, y los
   mockups son para eso. Pero si yo lo veo en celular no entiendo qué estoy
   viendo, porque ahí no estoy viendo la plataforma ni nada relacionado, sino
   pantallas separadas. Y que me afectan el scroll, porque ocupan más espacio
   del que deberían» (Mariana, 13-oct-2026).

   QUE PASABA. Debajo de 640 px la maqueta se rompia en piezas: la ventana de
   la aplicacion por un lado, la burbuja de WhatsApp por otro, el recuadro de
   casos vencidos por otro, cada uno a lo ancho y uno debajo del otro. En iPad
   son UNA sola captura —la ventana, y encima flotando las dos tarjetas—; en
   telefono eran tres pantallas sueltas que no se entienden y que estiraban la
   pagina casi mil pixeles. Antes de esto probe APILARLAS en vez de esconder
   la que sobraba: se veia todo el contenido, si, pero el mockup seguia siendo
   tres pantallas sueltas. Era la medicina equivocada.

   COMO SE ARREGLA, Y POR QUE ES TAN POCO CODIGO. La maqueta ya estaba escrita
   para escalar: el lienzo mide 660 unidades de ancho y TODO lo de dentro va
   en cqw —posiciones, tamanos, tipografia—, asi que a cualquier ancho guarda
   sus proporciones. Lo unico que hacia falta era dejar de pelearse con eso.
   Ahora el lienzo se dibuja a 760 px, que es el ancho al que se ve en iPad, y
   se encoge entero con `zoom` hasta el ancho que haya. La composicion queda
   intacta y la altura se encoge en la misma proporcion: en PQRS la maqueta
   pasa de unos 900 px de alto a 314.

   EL FACTOR SALE DEL PROPIO CSS, SIN JAVASCRIPT. `zoom` pide un numero, y en
   CSS no se pueden dividir dos longitudes... salvo con trigonometria:
   tan(atan2(a, b)) devuelve a/b como numero puro. De ahi
   tan(atan2(100cqw, 760px)). El 100cqw es el ancho disponible, y por eso el
   contenedor se declara en el PADRE: un elemento no puede consultarse a si
   mismo, y declarandolo en .comp el 100cqw le devuelve sus propios 760 px y
   no encoge nada. Comprobado en el navegador: con el contenedor en .comp
   salia zoom 1 y la maqueta se salia de la pantalla.

   SI EL NAVEGADOR NO SABE DE TRIGONOMETRIA se queda el reparto de antes, que
   es feo pero se lee. Por eso los dos bloques van en @supports opuestos: se
   aplica uno o el otro, nunca los dos. */
@media(max-width:640px){
@supports (width: calc(1px * tan(atan2(1px, 1px)))){
  /* El contenedor va en el PADRE de la maqueta. Los dos casos: cuando
     .comp cuelga de un envoltorio y cuando cuelga del bloque mismo. */
  :is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) :has(> .comp),
  :is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw):has(> .comp){container-type:inline-size}
  :is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp{width:760px;zoom:tan(atan2(100cqw,760px))}
}
@supports not (width: calc(1px * tan(atan2(1px, 1px)))){
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp{aspect-ratio:auto;display:flex;flex-direction:column;gap:12px;
    container-type:normal;font-size:13px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .p{position:static;width:100%;padding:16px;box-shadow:0 10px 24px -12px rgba(8,20,33,.5)}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .p.app{padding:0}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .p.corta{height:auto!important}/* EN TELEFONO EL PANEL SE APILA, NO SE ESCONDE. Antes `.lat{display:none}`:
   en un telefono el mockup se quedaba solo con la columna lateral y perdia
   justo lo que lo hace un tablero —las cifras, la grafica, el saludo—. En
   cartera se veia una lista de contactos y nada mas, mientras que en iPad se
   ve 97,4% de tasa de entrega y los masivos por tipo. «Quisiera que en
   celular todos los mockups se vieran lo mas parecido» (Mariana, 12-oct-2026).
   Ahora la fila pasa a columna y se ve todo, uno debajo de otro. El carril de
   iconos si se queda fuera: no aporta contenido, solo cromo. */
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .p{flex-direction:column}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .lat{display:block;width:auto;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cv{width:auto;flex:0 0 auto}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp .flujo{height:200px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .tb{gap:10px;padding:8px 10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .lg{height:17px;width:53px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .amb u{font-size:8.5px;gap:3px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .amb u s{width:5px;height:5px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .amb b{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .tb .org{font-size:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .tb .yo{width:20px;height:20px;font-size:8.5px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .rail{padding:8px 6px;gap:4px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .rail a{width:22px;height:22px;border-radius:6px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .rail a svg{width:13px;height:13px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cv{padding:10px 12px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .miga{font-size:8.5px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .tit{font-size:16px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .herr{margin:8px 0}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .busca{font-size:8.5px;padding:4px 8px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .t10{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .t12{font-size:12px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .t13{font-size:13px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .t15{font-size:14px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .t17{font-size:16px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .t20{font-size:19px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .t30{font-size:26px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .rot{font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pil{font-size:10px;padding:2px 8px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cifra{font-size:28px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cifra s{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .av{width:26px;height:26px;font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ag i{width:19px;height:19px;font-size:8.5px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .mrow u{font-size:12px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .mrow b{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ag span{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bt{font-size:11px;padding:6px 14px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .burb .aut{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .burb .txt{font-size:12px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .item .n{font-size:12px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .item .marca{font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .item .caja{width:17px;height:17px;border-width:2px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .item .caja svg{width:11px;height:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .paso i{width:30px;height:30px;font-size:11px;border-width:3px;margin-bottom:6px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .paso b{font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .paso u{font-size:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .riel2::before,:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .riel2::after{top:18px;height:3px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .barrad{height:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .leg span{font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .leg span i{width:8px;height:8px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .caso{border-left-width:4px;padding:8px 10px;margin-bottom:8px;gap:8px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .adj{font-size:10px;padding:4px 8px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .adj svg{width:11px;height:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodo{width:86px;padding:5px 6px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodo b{font-size:8.5px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodo u{font-size:8.5px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .punto{width:24px;height:24px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .punto svg{width:12px;height:12px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .guardar{font-size:9px;padding:4px 10px;right:8px;bottom:8px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .modal .mh{font-size:12px;padding:6px 10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodoA{font-size:12px;padding:8px 10px;gap:7px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodoA .chev{font-size:10px;width:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodoA .dot{width:11px;height:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodoA svg{width:13px;height:13px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodoA.hijo{padding-left:28px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .barraG .et,:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .barraG .vl{font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .barraG .tr{height:12px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pest span{font-size:11px;padding:6px 9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pliega{font-size:12px;padding:7px 0}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pliega em{font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .campo u{font-size:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .campo b{font-size:12px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .preg .q{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .estrellas i{width:15px;height:15px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodoA{font-size:12px;padding:8px 10px;gap:7px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodoA .chev{font-size:10px;width:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodoA svg{width:13px;height:13px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodoA.hijo{padding-left:28px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .barraG .et,:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .barraG .vl{font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .barraG .tr{height:12px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pest span{font-size:11px;padding:6px 9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pliega{font-size:12px;padding:7px 0}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pliega em{font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .campo u{font-size:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .campo b{font-size:12px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .preg .q{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .estrellas i{width:15px;height:15px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .crail a{width:14px;height:14px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .crail a svg{width:8px;height:8px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctit{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cmiga{font-size:8.5px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .camb b{font-size:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .camb u{font-size:8.5px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctb .lg2{height:10px;width:31.5px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .stab th{font-size:8.5px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .stab td{font-size:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sbur .bd{font-size:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .srow{font-size:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .edbar .nm{font-size:12px;max-width:none}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .edbar .bt2{font-size:10px;padding:5px 10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .edbar .cnt2{font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pal{width:100px;padding:8px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pal .ph2{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pca b{font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pca u{font-size:8.5px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .act b{font-size:8.5px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .act u{font-size:8.5px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .act s{font-size:8.5px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .vrow b{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .vrow u{font-size:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .vtag{font-size:8.5px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .etap{font-size:12px;padding:4px 0;gap:7px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .etap .cir{width:18px;height:18px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .etap .cir svg{width:11px;height:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .etap.n1{padding-left:14px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .etap.n2{padding-left:30px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .firma .fh{font-size:12px;padding:6px 10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .firma .ft{font-size:13px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .firma .doc{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .firma .sig{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pnl .ph3{font-size:12px;padding:5px 9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pnl .pq{font-size:12px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .caritas span{width:30px;height:30px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .caritas span svg{width:19px;height:19px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pnl .bt3{font-size:11px;padding:5px 12px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .mchk .mt2{font-size:17px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .espacio h5{font-size:13px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .campo b{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .campo u{font-size:8.5px;top:-6px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .btgrande{font-size:12px;padding:7px 20px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arq .cap16{aspect-ratio:auto;max-height:none;padding:12px;overflow:visible;display:block}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arq .cap16 .comp{aspect-ratio:auto}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .p.app{height:auto}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .lienzo2{height:190px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .edbar{flex-wrap:wrap;row-gap:6px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .edbar .cnt2{display:none}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arq .cap16 .cvlado{display:none}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arq .cap16 .lat.latmain{display:block;width:auto!important}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cgrid{grid-template-columns:1fr;gap:8px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile{padding:8px 9px;gap:8px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile b{font-size:11px;white-space:normal}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile u{font-size:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arq .cap16 .p,:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arq .cap16 .p.alto{box-shadow:0 10px 24px -12px rgba(8,20,33,.35)}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile b{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile u{font-size:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile .ci2{width:24px;height:24px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile .ci2 svg{width:14px;height:14px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arq .cap9{aspect-ratio:auto;max-height:none;padding:12px;overflow:visible;display:block}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arq .cap9 .comp{aspect-ratio:auto}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arq .cap9 .p,:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arq .cap9 .p.alto{box-shadow:0 10px 24px -12px rgba(0,0,0,.55)}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arb .n{font-size:11px;padding:6px 9px;gap:7px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arb .n .cv2{font-size:9px;width:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arb .n .pt{width:9px;height:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arb .n.h1{padding-left:24px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arb .n.h2{padding-left:40px;font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arb .n .ct{font-size:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .det .rutan{font-size:15px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .det .cmp u{font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .det .sub b{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .det .sub .ag2{font-size:9px;padding:4px 9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ev .eh b{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ev .eh em{font-size:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ev .eb{font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ev .bs2 span{font-size:9px;padding:3px 9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ev .adj2{font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ev .adj2 svg{width:13px;height:13px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .hoja .firma{font-size:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .hoja .pie u{font-size:8.5px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .hoja .pie i{width:9px;height:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ktab{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kdona{width:120px;height:120px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kdona .kcen b{font-size:26px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kdona .kcen u{font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kleg2 span{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kserie{height:64px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kejes u{font-size:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ktlist span{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kcampo u{font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kcaja{font-size:11px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kcaja.kmono{font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ksw{width:28px;height:15px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ksw::after{width:11px;height:11px;top:2px;left:2px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ksw.on::after{right:2px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .knodo{font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kfl{width:13px;height:1.5px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kfl::after{border-left-width:5px;border-block-width:3.5px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kfr u{font-size:9px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kfi{font-size:10px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kbt{font-size:10px;padding:5px 8px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .trans .flecha{width:22px;height:2px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .trans .flecha::after{border-left-width:7px;border-block-width:5px}
}
}

@supports not (container-type:inline-size){
  .comp{aspect-ratio:auto;display:flex;flex-direction:column;gap:12px}
  .p{position:static;width:100%;padding:16px}
}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nota{margin-top:1.5rem;display:grid;grid-template-columns:auto 1fr;gap:.85rem;
  align-items:start;background:var(--fondo-2);border:1px solid var(--borde);
  border-left:3px solid var(--coral);border-radius:12px;padding:1rem 1.15rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nota .et{font-size:.625rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--coral-texto);white-space:nowrap;padding-top:.15rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nota p{margin:0;font-size:.875rem;line-height:1.65;color:var(--texto-2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nota p+p{margin-top:.5rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nota code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;
  background:rgba(var(--a),.12);border-radius:4px;padding:.1rem .32rem;color:var(--texto)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .fin{padding-block:clamp(2.5rem,5vw,4rem) clamp(3rem,6vw,5rem)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .fin h2{margin:0 0 1rem;font-size:clamp(1.375rem,3vw,1.875rem);font-weight:700;
  letter-spacing:-.022em;color:var(--texto)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .fin p{margin:0 0 1.5rem;font-size:.9375rem;line-height:1.7;color:var(--texto-2);max-width:62ch}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .mapa{width:100%;border-collapse:collapse;font-size:.875rem}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .mapa th{text-align:left;font-size:.625rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texto-2);padding:.6rem .75rem;border-bottom:2px solid var(--borde)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .mapa td{padding:.6rem .75rem;border-bottom:1px solid var(--linea);vertical-align:top;color:var(--texto)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .mapa td:first-child{font-weight:700}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .mapa td.n{font-variant-numeric:tabular-nums;font-weight:700;color:var(--coral-texto);white-space:nowrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .tablacaja{overflow-x:auto;border-radius:12px;border:1px solid var(--borde)}
@media(max-width:560px){:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cab{grid-template-columns:1fr;gap:.35rem}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .num{font-size:1.125rem}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .escena{padding:.8rem;border-radius:12px}:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nota{grid-template-columns:1fr;gap:.5rem}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ktabs{display:flex;gap:1.6cqw;border-bottom:.15cqw solid var(--p-borde)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ktab{font-size:max(9px,1.35cqw);font-weight:600;color:var(--p-tinta2);padding:0 0 .8cqw;
  border-bottom:.3cqw solid transparent;margin-bottom:-.15cqw;white-space:nowrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ktab.aqui{color:var(--p-tinta);border-bottom-color:var(--coral)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kdona{position:relative;width:20cqw;height:20cqw;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kdona svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kdona .kcen{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kdona .kcen b{display:block;font-size:max(9px,3.6cqw);font-weight:800;color:var(--p-tinta);
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kdona .kcen u{display:block;text-decoration:none;font-size:max(9px,1.2cqw);color:var(--p-tinta2);margin-top:.3cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kleg2{display:flex;flex-direction:column;gap:.7cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kleg2 span{display:flex;align-items:center;gap:.7cqw;font-size:max(9px,1.3cqw);color:var(--p-tinta2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kleg2 span i{width:1.4cqw;height:1.4cqw;border-radius:50%;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kleg2 span b{margin-left:auto;font-weight:700;color:var(--p-tinta);font-variant-numeric:tabular-nums}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kserie{display:flex;align-items:flex-end;gap:.9cqw;height:9cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kserie span{flex:1;background:#C8D6E2;border-radius:2px 2px 0 0;min-width:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kserie span.on{background:var(--coral)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kejes{display:flex;gap:.9cqw;margin-top:.5cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kejes u{flex:1;text-align:center;text-decoration:none;font-size:max(9px,1.05cqw);color:var(--p-tinta2);min-width:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ktlist{display:flex;flex-direction:column;gap:.5cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ktlist span{font-size:max(9px,1.25cqw);color:var(--p-tinta2);padding:.55cqw .8cqw;border-radius:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ktlist span.aqui{background:#FFFFFF;color:var(--p-tinta);font-weight:700;
  box-shadow:0 .2cqw .7cqw rgba(43,60,78,.12)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kcampo u{display:block;text-decoration:none;font-size:max(9px,1.15cqw);color:var(--p-tinta2);margin-bottom:.4cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kcaja{background:#FFFFFF;border:.15cqw solid #CBD4DD;border-radius:5px;padding:.8cqw 1cqw;
  font-size:max(9px,1.35cqw);color:var(--p-tinta);display:flex;align-items:center;gap:.8cqw;line-height:1.4}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kcaja.kmono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:max(9px,1.25cqw)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kcaja .kico{width:2cqw;height:2cqw;border-radius:3px;background:#E8EEF4;flex:0 0 auto;margin-left:auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kcaja .kico+.kico{margin-left:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ksw{width:4.2cqw;height:2.2cqw;border-radius:99px;background:#CBD4DD;position:relative;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ksw::after{content:"";position:absolute;top:.3cqw;left:.3cqw;width:1.6cqw;height:1.6cqw;
  border-radius:50%;background:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ksw.on{background:var(--p-ok)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ksw.on::after{left:auto;right:.3cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kflujo{display:flex;align-items:center;gap:.7cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .knodo{background:#FFFFFF;border-radius:5px;padding:.7cqw .9cqw;font-size:max(9px,1.2cqw);font-weight:600;
  color:var(--p-tinta);white-space:nowrap;box-shadow:0 .3cqw .9cqw rgba(43,60,78,.16);
  border-left:.5cqw solid var(--azul)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .knodo.fin{border-left-color:var(--coral)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kfl{width:2cqw;height:.2cqw;background:#A9B6C4;position:relative;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kfl::after{content:"";position:absolute;right:0;top:50%;border-left:.7cqw solid #A9B6C4;
  border-block:.5cqw solid transparent;transform:translateY(-50%)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kform{background:#FFFFFF;border-radius:6px;padding:1.1cqw;display:flex;flex-direction:column;gap:.9cqw;
  box-shadow:0 .3cqw .9cqw rgba(43,60,78,.12)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kfr u{display:block;text-decoration:none;font-size:max(9px,1.05cqw);color:var(--p-tinta2);margin-bottom:.3cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kfi{border:.15cqw solid #D7DEE6;border-radius:4px;padding:.55cqw .7cqw;font-size:max(9px,1.2cqw);
  color:var(--p-tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kfi.kfz{color:var(--p-tinta2);border-style:dashed}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kbt{display:inline-block;background:#FFFFFF;border:.15cqw solid #C3CEDA;border-radius:4px;
  padding:.65cqw 1cqw;font-size:max(9px,1.25cqw);font-weight:600;color:var(--p-tinta)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .carmk{max-width:352px;margin:0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .carmk .cw{height:272px;display:flex;flex-direction:column}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .carmk .cbd{flex:1;min-height:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .carmk .ccv{overflow:hidden}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sfila .sp3{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sfila .cod{font-size:8.5px;font-weight:700;color:var(--p-tinta2);
  font-variant-numeric:tabular-nums;flex:0 0 auto;align-self:flex-start}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .spil.alta{background:var(--p-alta)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .spil.tipo{background:var(--p-tipo)}
/* El ambar se queda como esta y lo que cambia es la letra. Con blanco
   encima daba 2,04:1, el peor del sitio; oscurecerlo hasta que el blanco
   pasara lo dejaba en #A16A0C, que ya no se lee como ambar sino como
   marron. Con el azul de la propia maqueta encima da 4,89:1 y sigue
   siendo el mismo chip amarillo. */
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .spil.serv{background:var(--p-serv);color:var(--azul-dark)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .spil.gris{background:var(--p-gris);color:var(--p-tinta2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .setap{display:flex;align-items:center;gap:7px;padding:3px 0;font-size:10px;
  font-weight:600;color:var(--p-tinta)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .setap.n1{padding-left:15px}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .setap .cir{width:14px;height:14px;border-radius:50%;flex:0 0 auto;display:grid;
  place-items:center;background:#C6CED6}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .setap .cir svg{width:8px;height:8px;color:#FFFFFF;display:block}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .setap.ya .cir{background:var(--p-ok)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .setap.cur .cir{background:var(--p-tinta2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .setap .ch{font-style:normal;margin-left:auto;color:var(--p-tinta2);font-size:9px;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .sarb{background:#FFFFFF;border-radius:5px;overflow:hidden;
  box-shadow:0 1px 2px rgba(43,60,78,.12)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snodoA{display:flex;align-items:center;gap:6px;padding:5px 7px;
  border-bottom:1px solid var(--p-borde);font-size:10px;font-weight:600;color:var(--p-tinta)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snodoA:last-child{border-bottom:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snodoA.hijo{padding-left:20px;background:#FAFBFC}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snodoA .chev{font-style:normal;color:var(--p-tinta2);font-size:8.5px;width:7px;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snodoA .ags{margin-left:auto;display:flex;gap:2px;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .snodoA .ags i{width:13px;height:13px;border-radius:50%;background:var(--azul);color:#FFFFFF;
  font-style:normal;font-size:8.5px;font-weight:700;display:grid;place-items:center}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .scand{display:flex;align-items:center;gap:6px;background:#FFFFFF;border-radius:5px;
  padding:4px 6px;margin-bottom:4px;box-shadow:0 1px 2px rgba(43,60,78,.1)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .scand:last-child{margin-bottom:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .scand .av2{width:17px;height:17px;border-radius:50%;background:var(--azul);color:#FFFFFF;
  display:grid;place-items:center;font-size:8.5px;font-weight:700;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .scand .nm2{flex:1;min-width:0;font-size:10px;font-weight:700;color:var(--p-tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cap9{aspect-ratio:16/9;max-height:380px;border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);position:relative;display:grid;align-content:center;
  padding:clamp(.9rem,2vw,1.6rem);
  background:linear-gradient(158deg,rgba(255,255,255,.07),rgba(90,115,146,.10)),#1B2A3C}

/* ── PERO DENTRO DE UNA TARJETA BLANCA, NO ──────────────────────────────────
   .cap9 nacio como marco del mockup del HERO, y alli el fondo profundo es lo
   correcto: el hero es oscuro. En la pagina de sector el mismo marco quedo
   dentro del acordeon de capacidades, que ahora es una tarjeta blanca sobre
   el campo Azul Capta: un rectangulo casi negro en medio de la tarjeta era
   una tercera profundidad y era justo lo que se veia mal. Dentro de .caps el
   marco pasa a ser la superficie clara del sistema, la misma que usa .cap16
   en plataforma. */
.caps .cap9{border-color:var(--borde-claro,#E2EAF0);
  background:linear-gradient(160deg,#F7F9FC 0%,#EDF2F7 100%);
  box-shadow:0 18px 44px -26px rgba(12,24,40,.5)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cap9::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(74% 96% at 80% 112%,rgba(90,115,146,.34),transparent 62%),
             radial-gradient(56% 74% at 10% -12%,rgba(90,115,146,.22),transparent 60%)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cap9 .comp{aspect-ratio:660/360;position:relative;z-index:1}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arb{background:#FFFFFF;border-radius:6px;overflow:hidden;box-shadow:0 .3cqw .9cqw rgba(43,60,78,.14)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arb .n{display:flex;align-items:center;gap:1.1cqw;padding:.85cqw 1.2cqw;
  border-bottom:.15cqw solid var(--p-borde);font-size:max(9px,1.45cqw);font-weight:600;color:var(--p-tinta)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arb .n:last-child{border-bottom:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arb .n .cv2{font-style:normal;color:var(--p-tinta2);font-size:max(9px,1.25cqw);width:1.4cqw;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arb .n .pt{width:1.5cqw;height:1.5cqw;border-radius:3px;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arb .n.h1{padding-left:4cqw;background:#FAFBFC;font-weight:600}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arb .n.h2{padding-left:7cqw;background:#F5F7F9;font-weight:500;font-size:max(9px,1.35cqw)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arb .n.sel{background:#E9EEF3}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .arb .n .ct{margin-left:auto;font-size:max(9px,1.2cqw);font-weight:700;color:var(--p-tinta2);flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .det .rutan{font-size:max(9px,2cqw);font-weight:700;color:var(--p-tinta);letter-spacing:-.01em}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .det .cmp{margin-top:1.6cqw;border-bottom:.15cqw solid var(--p-borde);padding-bottom:.5cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .det .cmp u{display:block;text-decoration:none;font-size:max(9px,1.2cqw);color:var(--p-tinta2)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .det .sub{display:flex;align-items:center;gap:1cqw;margin-top:2cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .det .sub b{font-size:max(9px,1.5cqw);font-weight:700;color:var(--p-tinta)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .det .sub .ag2{margin-left:auto;background:var(--azul);color:#FFFFFF;border-radius:99px;
  font-size:max(9px,1.2cqw);font-weight:700;padding:.5cqw 1.2cqw;white-space:nowrap}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ev{background:#FFFFFF;border-radius:6px;padding:.9cqw 1.1cqw;margin-bottom:.9cqw;
  box-shadow:0 .3cqw .9cqw rgba(43,60,78,.13)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ev:last-child{margin-bottom:0}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ev .eh{display:flex;align-items:baseline;gap:.8cqw;margin-bottom:.5cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ev .eh b{font-size:max(9px,1.45cqw);font-weight:700;color:var(--p-tinta)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ev .eh em{font-style:normal;margin-left:auto;font-size:max(9px,1.15cqw);color:var(--p-tinta2);
  font-variant-numeric:tabular-nums;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ev .eb{font-size:max(9px,1.3cqw);color:var(--p-tinta2);line-height:1.45}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ev .bs2{display:flex;gap:.7cqw;margin-top:.7cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ev .bs2 span{font-size:max(9px,1.2cqw);font-weight:700;padding:.4cqw 1.1cqw;border-radius:99px;color:#FFFFFF}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ev .adj2{display:flex;align-items:center;gap:.7cqw;margin-top:.6cqw;font-size:max(9px,1.25cqw);
  font-weight:600;color:var(--azul)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ev .adj2 svg{width:1.8cqw;height:1.8cqw;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .hoja{background:#FFFFFF;border-radius:4px;overflow:hidden;
  box-shadow:0 1.6cqw 3.4cqw -1.4cqw rgba(0,0,0,.5)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .hoja .cuerpo{padding:1.4cqw 1.6cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .hoja .ln{height:.2cqw;background:#DCE2E8;border-radius:99px;margin-bottom:.7cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .hoja .ln.c{width:72%}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .hoja .ln.d{width:88%}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .hoja .ln.e{width:56%}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .hoja .firma{margin-top:1.8cqw;border-top:.18cqw solid var(--p-tinta);padding-top:.5cqw;
  font-size:max(9px,1.1cqw);color:var(--p-tinta2);text-align:center}
/* El verde azulado baja un peldano, del #4E8A8C al #477D7F, y la letra pasa
   a blanco puro. Antes: blanco al 92% sobre #4E8A8C daba 3,60:1 en texto de
   9px. Ahora 4,66:1, con el mismo matiz (182 grados). */
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .hoja .pie{background:#477D7F;padding:1.1cqw 1.4cqw;display:flex;align-items:center;gap:.8cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .hoja .pie i{width:1.4cqw;height:1.4cqw;border-radius:50%;background:rgba(255,255,255,.75);flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .hoja .pie u{text-decoration:none;font-size:max(9px,1.05cqw);color:#FFFFFF}
/* ══ LOS MOCKUPS EN PANTALLA PEQUEÑA ════════════════════════════════════════
   Un mockup se mira, no se toca, y un corte a media pantalla se lee como un
   fallo. Las dos alternativas se probaron y las dos estaban mal: deslizarlo
   con el dedo estorba la navegación de la página, y recortarlo se ve roto.
   Así que la composición se queda como LIENZO PROPORCIONAL y encoge entera.
   La biblioteca, por su cuenta, apila los paneles por debajo de 768: eso aquí
   se revierte, porque su contenido interior —rejillas de conectores, tablas,
   el editor— es más ancho que un teléfono aunque los paneles se apilen.
   ═════════════════════════════════════════════════════════════════════════ */
/* ── EL LIENZO, HASTA DONDE DA ─────────────────────────────────────────────
   Este bloque devuelve la composición a lienzo proporcional. Funciona en
   tableta y no puede funcionar en teléfono: ahí el lienzo baja a 256-353 px de
   ancho, 1cqw vale 2,5-3,5 px y TODOS los tamaños en cqw caen por debajo del
   piso de 9 px y se quedan clavados ahí. El texto pesa entonces el doble o el
   triple de lo que el dibujo previó —la columna del caso pedía 295 px dentro
   de una ventana de 133— y el mockup salía cortado por la mitad, con frases
   que terminaban a medias.
   Por debajo de 641 px manda el modo de pantalla pequeña de la biblioteca: las
   piezas se apilan a ancho completo, con tipografía en píxeles de 11 a 16, y
   no se recorta nada. Es más alto, y está bien: un teléfono se desplaza. */
@media(min-width:641px) and (max-width:1040px){
  /* el marco deja de encorsetar: la altura la manda la composición */
  :is(.capmk,.cap-mk,.hmk,.bmk) ,
  :is(.capmk,.cap-mk,.hmk,.bmk) .cap16,
  :is(.capmk,.cap-mk,.hmk,.bmk) .cap9{
    aspect-ratio:auto!important;max-height:none!important;
    height:auto!important;overflow:visible!important}
  /* y la composición vuelve a ser lienzo, no columna apilada */
  :is(.capmk,.cap-mk,.hmk,.bmk) .comp{
    container-type:inline-size!important;display:block!important;
    aspect-ratio:660/var(--alto,368)!important;
    width:100%!important;max-width:100%!important;gap:0!important;
    font-size:inherit!important}
  :is(.capmk,.cap-mk,.hmk,.bmk) .comp .p{
    position:absolute!important;
    left:calc(var(--x) * .1515cqw)!important;
    top:calc(var(--y) * .1515cqw)!important;
    width:calc(var(--w) * .1515cqw)!important;
    padding:calc(var(--mkpad,16) * .1515cqw)!important}
  :is(.capmk,.cap-mk,.hmk,.bmk) .comp .p.app{
    height:calc(var(--h,300) * .1515cqw)!important;padding:0!important}
  :is(.capmk,.cap-mk,.hmk,.bmk) .comp .bd{flex-direction:row!important}
  :is(.capmk,.cap-mk,.hmk,.bmk) .comp .lat{display:block!important}
  /* las mini-pantallas del carrusel siguen la misma regla */
  :is(.pdet,.vp2) .cw{width:100%!important;max-width:100%!important}
}

/* ══ LA MAQUETA DE COMPRAS ERA LA UNICA DISTINTA ══════════════════════════
   «El mockup que veo es el de compras, pero se ve raro en todos los
   dispositivos» (Mariana, 13-oct-2026). Tenia razon, y el motivo estaba en el
   HTML, no en el CSS: de las once paginas de proceso, DIEZ abren con una
   maqueta .comp —el lienzo de 660 unidades con la ventana y sus tarjetas
   flotando— y compras era la unica que abria con .vp2 > .cw, que es la
   ventana COMPACTA de las tarjetas del bento.

   Y esa ventana compacta esta hecha a medida fija: 272 px de alto y la letra
   en rem, pensada para los 430 px que mide dentro de una tarjeta. Estirada a
   los 942 px del hero quedaba una franja de 3,5 a 1, con los rotulos a 8,5 px
   perdidos en un campo vacio. No parecia la plataforma: parecia una fila de
   tabla estirada.

   Aqui se le devuelve su proporcion: se dibuja a sus 430 px de siempre y se
   escala para ocupar el ancho que haya, con tope de 1,55 para que en una
   pantalla grande no se agigante. En un telefono el mismo calculo la encoge,
   igual que a las otras diez.

   NO SE LE HA ANADIDO CONTENIDO. Sus hermanas enseñan ademas una lista de
   casos y una tarjeta flotante; esta solo tiene el detalle. Rellenarla pide
   material de verdad, no inventado. */
.hmk > .vp2{container-type:inline-size;display:flex;justify-content:center}
.hmk > .vp2 > .cw{width:430px!important;max-width:430px!important;flex:0 0 auto}
@supports (width: calc(1px * tan(atan2(1px, 1px)))){
  .hmk > .vp2 > .cw{zoom:min(1.55,tan(atan2(100cqw,430px)))}
}

/* ══ EL MENU FIJO NO SE COME EL TITULO AL QUE SALTAS ══════════════════════
   El menu va pegado arriba y mide 67 px. Al pulsar un ancla —«Procesos» del
   menu, «Clientes», «Agendar demo», los enlaces del pie, o cualquier enlace
   profundo que alguien comparta— el navegador coloca el destino en lo mas
   alto de la ventana, que es justo donde esta el menu. Resultado: la primera
   linea del H2 queda detras de la barra. En /construccion se leia «...taforma»
   en vez de «PLATAFORMA», y en /clientes el H2 salia cortado por la mitad.

   Se arregla en una linea y en el sitio correcto: scroll-padding-top sobre el
   elemento que SE DESPLAZA, no sobre cada destino. Asi cubre los anclas del
   menu, los del pie, los del submenu y los que lleguen de fuera, sin tener
   que acordarse de ponerlo en cada seccion nueva.
   El 1.25rem de mas es aire: pegar el titulo al canto de la barra se lee como
   un error de maquetacion aunque sea legible. */
html{scroll-padding-top:calc(var(--navh,67px) + 1.25rem)}

/* ══ EL BOTON «PROCESOS» DEL MENU, A LA MEDIDA MINIMA ═════════════════════
   La WCAG 2.2 pide 24x24 px de objetivo (criterio 2.5.8). «Procesos ▾» media
   71x20: le faltaban cuatro pixeles de alto porque venia con padding:0 y su
   caja era solo la linea de texto. Es el unico control del sitio por debajo
   del minimo —medido en las veinte paginas—, y se arregla con tres decimas
   de rem arriba y abajo. No cambia la altura de la barra: el logo mide 44 y
   sigue mandando el. Solo existe de 1041 px para arriba; en telefono este
   menu no esta. */
.nav .dbtn{padding-block:.3rem}

/* ══ EL PIE, PLEGADO DONDE OCUPA MEDIA PAGINA ═════════════════════════════
   Son 34 enlaces en cinco familias. Medido: a 1.440 y a 1.112 px el pie mide
   392 px y es un pie; a 834 son 1.016 y a 375 son 2.102 —2,8 pantallas, el
   19% de toda la pagina—. «En celular el footer es un scroll grandisimo»
   (Mariana, 13-oct-2026), y tenia razon tambien en iPad.
   Por debajo de 1.060 px —justo donde las cinco columnas dejan de caber en
   fila— cada familia se cierra y deja su titulo. La rejilla no cambia: a 834
   siguen siendo tres columnas, de titulos en vez de listas.
   El plegado lo hace _pie.py con JavaScript; sin el, el pie se queda abierto
   como hoy y los 34 enlaces siguen en el HTML para los rastreadores. */
@media(max-width:1059px){
  footer .fcol h3{margin:0}
  footer .fcol h3 button{
    appearance:none;width:100%;display:flex;align-items:center;gap:.6rem;
    background:none;border:0;padding:.85rem 0;cursor:pointer;
    font:inherit;color:inherit;text-align:left;
    border-bottom:1px solid rgba(255,255,255,.14)}
  footer .fcol h3 button i{
    margin-left:auto;width:9px;height:9px;flex:0 0 auto;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform var(--base,.26s) var(--ease,ease)}
  footer .fcol h3 button[aria-expanded="true"] i{
    transform:rotate(-135deg) translate(-2px,-2px)}
  footer .fcol h3 button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
  footer .fcol ul{padding-top:.5rem}
  /* `[hidden]` NO BASTA AQUI. La regla del navegador es display:none con la
     especificidad mas baja que existe, y `.fcol ul` ya trae `display:flex`:
     cualquier regla de autor le gana. Resultado medido: las cinco listas
     quedaban marcadas como ocultas y el pie seguia midiendo 2.211 px. */
  footer .fcol ul[hidden]{display:none}
  @media (prefers-reduced-motion:reduce){
    footer .fcol h3 button i{transition:none}
  }
}

/* ══ OBJETIVOS TÁCTILES ════════════════════════════════════════════════════
   44 px de alto es el mínimo cómodo del pulgar. Solo se aplica a lo que de
   verdad se toca: los iconos de los rieles DENTRO de un mockup son dibujo,
   no controles, y agrandarlos deformaría la pantalla que ilustran.
   ═════════════════════════════════════════════════════════════════════════ */
/* Hasta 1040 px, que es donde vive la navegacion tactil: el iPad entra aqui.
   Antes el corte estaba en 768 y el logotipo de la barra se quedaba en 26 px
   de alto en un iPad, que es tactil igual que un telefono.

   El ancho NO basta: un iPad Pro horizontal mide 1194 y un Air horizontal 1112,
   asi que pasaban de largo y se quedaban con la barra de escritorio, donde
   «Procesos» medía 20 px de alto y se tocaba con el pulgar. Por eso va tambien
   `pointer:coarse`, que es la pregunta correcta —si el dedo es el puntero— y
   no toca a ningun escritorio con raton. */
@media(max-width:1040px),(min-width:1041px) and (pointer:coarse){
  .nav > a[aria-label],
  .gtabs button,
  .franja a,.franja span,
  .subnav a,
  .dotsnav button,
  .playbtn{min-height:44px;display:inline-flex;align-items:center}
  .dotsnav button{min-width:44px;justify-content:center}
  .playbtn{min-width:44px;justify-content:center}
}

/* Por ENCIMA de 1040 la barra de escritorio sigue en pie, y hay tactiles ahi:
   un iPad Pro horizontal mide 1194 y un Air horizontal 1112. Ahi «Procesos»
   medía 20 px de alto. Esta regla es solo para ese caso —pantalla ancha y dedo—
   y va aparte a proposito: metida en el bloque de arriba le ponia
   `display:inline-flex` a los enlaces que el menu de telefono oculta con
   `display:none`, reaparecian a 375 px y la pagina se iba 99 px de ancho. */
@media(min-width:1041px) and (pointer:coarse){
  .nav .dbtn,.nav .it,.nav .btn.sm,.nav .btn-sector{min-height:44px;display:inline-flex;align-items:center}
}

/* ══ CAJA DE BORDE, DENTRO DE LOS MOCKUPS ══════════════════════════════════
   Al traer el CSS de la biblioteca se filtró su regla universal, la que pone
   box-sizing:border-box. Sin ella, dentro de un mockup el relleno SUMA al
   ancho en vez de caber dentro: el avatar de la barra superior declaraba
   3,4cqw (24 px) y salía de 48, un óvalo, y varias piezas quedaban más
   anchas de lo dibujado y se amontonaban. Esto lo corrige de raíz.
   ═════════════════════════════════════════════════════════════════════════ */
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) *{box-sizing:border-box}

/* ══ LAS UTILIDADES DEL SITIO NO ENTRAN A LOS MOCKUPS ══════════════════════
   El sitio tiene clases de tipografia de una sola letra y numero —.h1, .h2,
   .h3, .lead— y la biblioteca de mockups usa esos mismos nombres para otra
   cosa: .n.h2 es el segundo nivel de un arbol de clasificadores, no un
   titular. La utilidad del sitio trae max-width:20ch, que a 10 px son 120 px,
   y con eso el arbol de la pagina de sector se estrangulaba: «Altos de las
   Palmas Torre 3» caia en cuatro lineas, el arbol crecia 37 px mas alto que
   la ventana que lo contiene y se salia por abajo.
   Es el mismo choque de nombres que ya obligo a renombrar --pad y a acotar
   .fila y .pie. Aqui se corta de raiz: dentro de un mockup, ninguna utilidad
   de titular impone ancho. .lead queda fuera a proposito: la biblioteca SI le
   da 64ch en sus propias paginas de documentacion.
   ═════════════════════════════════════════════════════════════════════════ */
:is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw)
  :is(.h1,.h2,.h3,.sub,.kick,.est,.txt,.tit){max-width:none}
/* Y el avatar, además, es un círculo pase lo que pase. */
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .tb .yo,
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctb .yo2{flex:0 0 auto;aspect-ratio:1;padding:0}

/* Las insignias redondas del contenido (iniciales, la etiqueta API) también
   son círculos: sin flex:0 0 auto el ancho cede dentro de una fila flexible
   y quedan ovaladas y encimadas. */
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .av,
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .av2,
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ag i,
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .punto{flex:0 0 auto;aspect-ratio:1;padding:0}

/* Los rótulos de las fichas de integración se cortaban: «WhatsApp Busi…»,
   «Correo corporat…», «Repositorio doc…». El texto va a 10 px, que es el piso
   legible, así que encogerlo más no es opción: se deja envolver en dos líneas.
   Es el mismo tratamiento que la propia biblioteca aplica en pantalla pequeña. */
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile b{white-space:normal;overflow:visible;
  text-overflow:clip;line-height:1.25}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile u{white-space:normal;overflow:visible;
  text-overflow:clip;line-height:1.3}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile{align-items:center}

/* ══ EL MARCO DE LA BIBLIOTECA, SIN CORSÉ ══════════════════════════════════
   Dos cosas, y las dos costaron caro:
   1. Un .cap9 o .cap16 SIEMPRE llena a su contenedor. Sin width:100% encoge a
      su contenido y el lienzo se queda en 41 px, o sea invisible: le pasó al
      hero de /plataforma y a las cinco capacidades de /construccion.
   2. Y pierde el aspect-ratio 16/9 con tope de 380 px. Las composiciones son
      660/424, no 16/9: con el corsé recortaban 205 px por abajo.
   El tope de ancho es el de siempre, 800, porque están DIBUJADAS a 693 y por
   debajo o por encima de eso la letra interior se sale de escala.
   ═════════════════════════════════════════════════════════════════════════ */
:is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet) > .cap9,
:is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet) > .cap16{
  width:100%;min-width:0;max-width:800px;margin-inline:auto;
  aspect-ratio:auto;max-height:none;height:auto}

/* El nodo de arranque del editor: el triángulo se quedaba pegado arriba a la
   izquierda porque la rejilla solo centraba en un eje. */
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .punto{display:grid;place-items:center}

/* ══ LAS FICHAS DE INTEGRACIÓN, EN UN SOLO REGISTRO ════════════════════════
   Venían cada una con el color de su fabricante: verde WhatsApp, violeta del
   ERP, ámbar del repositorio, y ocho colores en una rejilla pequeña se leen
   como un semáforo, no como una pantalla de Capta. Además el manual no tiene
   ni violeta ni ámbar. Pasan todas al mismo contenedor claro con el glifo en
   Azul Capta: lo que distingue a cada una es el dibujo, no el color. El
   naranja se queda para donde hay una acción, que es la regla de la casa.
   Llevan !important porque el color viene escrito en el propio dibujo.
   ═════════════════════════════════════════════════════════════════════════ */
/* EL ICONO LLENA SU CAJA. La caja media 4,4cqw y el glifo 2,5: un 57%, que
   con borde alrededor se leia como un recuadro vacio con algo pequeno dentro.
   Sin borde y con el glifo al 72% la ficha se lee como una fila de iconos, que
   es lo que es. La caja se queda porque alinea las ocho fichas en columna. */
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile .ci2{
  background:rgba(var(--a),.06)!important;
  border:0!important;border-radius:6px;
  color:var(--azul)!important}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile .ci2 svg{
  width:3.2cqw!important;height:3.2cqw!important}
@media(max-width:1040px){
  :is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile .ci2 svg{
    width:17px!important;height:17px!important}
}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile .ci2 svg{color:var(--azul)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile .ci2 svg *{stroke:currentColor;fill:none}

/* La insignia «API» de la ficha flotante venía en el violeta --p-proceso, que
   no está en el manual y era el último color suelto de la pantalla. Pasa a
   Azul Capta, como el resto de los iconos de esa rejilla. */
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .p.alto .av.pro{background:var(--azul)}

/* ══ MOVIMIENTO ════════════════════════════════════════════════════════════
   Lo que hacen Linear, Stripe y Vercel es poco y siempre con motivo: nada se
   mueve en bucle, nada rebota, y cada gesto dura menos de medio segundo. Aquí
   van dos, y solo dos.
   1. Al abrir una capacidad, su pantalla entra: el panel ya crece en alto, y
      sin esto el mockup aparece de golpe a media transición.
   2. Al filtrar los clientes, las fichas que quedan entran escalonadas, para
      que se lea que la rejilla cambió y no que la página saltó.
   Con prefers-reduced-motion no ocurre ninguna de las dos.
   ═════════════════════════════════════════════════════════════════════════ */
@keyframes mkentra{from{opacity:0;transform:translateY(10px) scale(.985)}
                   to{opacity:1;transform:none}}
.cap.on .capmk,.cap.on .cap-mk{animation:mkentra 420ms var(--ease-in) 60ms both}
@keyframes fichaentra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rejilla.filtrando .ficha:not([hidden]){animation:fichaentra 260ms var(--ease-in) both;
  animation-delay:calc(var(--i,0) * 18ms)}
@media (prefers-reduced-motion:reduce){
  .cap.on .capmk,.cap.on .cap-mk,
  .rejilla.filtrando .ficha:not([hidden]){animation:none}
}

/* ══ PISO DE LEGIBILIDAD EN PANTALLA PEQUEÑA ═══════════════════════════════
   La biblioteca escribe su vista de teléfono con medidas fijas de 7 y 8 px, y
   un par de piezas en cqw bajan a 5. A 5 px no se lee nada, y a 7 tampoco en
   un teléfono real. Todo lo que hay dentro de un mockup sube al piso de 9.
   ═════════════════════════════════════════════════════════════════════════ */
@media(max-width:1040px){
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .yo,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .yo2,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .miga,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cmiga,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .vtag,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ok,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .no,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .vacio,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .tit,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .amb u,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .camb u,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .act u,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .act s,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .nodo u,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .pca u,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .hoja .pie u,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .stab th{font-size:9px}
}

/* La biblioteca declara estos con dos clases (.tb .yo, .ctb .yo2), así que el
   piso anterior, escrito con una sola, perdía por especificidad. */
@media(max-width:1040px){
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .tb .yo,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctb .yo2,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cv .tit,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ccv .cmiga,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .item .marca{font-size:9px}
}

/* La franja de ruta va teñida con el acento de cada página, y en los acentos
   más claros el blanco se quedaba en 3,3:1, por debajo del 4,5 que pide la
   pauta a ese tamaño. Una capa oscura al 24% sobre el acento lo sube en todas
   sin tocar el color de cada página, que es lo que las distingue. */
.franja{background-image:linear-gradient(rgba(10,20,34,.24),rgba(10,20,34,.24))}

/* ══════════════════════════════════════════════════════════════════════════
   EL AVISO · anuncio de temporada (Mariana, 28-sep-2026)
   Un anuncio que entra solo: «estaremos en Cartagena», «nueva funcionalidad».
   Referencia: Sinco lo hace con los pop-ups de HubSpot y con una diapositiva
   del carrusel del hero.
   Aqui no interrumpe. Tres reglas:
   1. NO es un modal. No roba el foco, no oscurece la pagina y no tapa la
      lectura: entra por la esquina inferior derecha, y en telefono por abajo,
      a ancho completo. Un modal al abrir es justo lo que ella llamo
      «fastidioso».
   2. Aparece cuando la persona ya decidio quedarse —pasado scroll y medio de
      pantalla, que son sus «dos scroll»— o a los 14 segundos.
   3. Se cierra y no vuelve. El id del aviso queda en localStorage; cambiar el
      id en aviso.py lo hace volver a salir para todo el mundo.
   El modo «barra» existe para los avisos que deben verse SIEMPRE, sin esperar
   scroll: una franja delgada encima de la nav.
   ══════════════════════════════════════════════════════════════════════════ */
.aviso{position:fixed;z-index:70;right:1.25rem;bottom:1.25rem;width:min(384px,calc(100vw - 2.5rem));
  background:#FFFFFF;border:1px solid var(--borde-claro,#E2EAF0);border-radius:14px;
  box-shadow:0 26px 60px -24px rgba(12,24,40,.55),0 2px 8px rgba(12,24,40,.08);
  padding:1.15rem 1.25rem 1.25rem;font-family:var(--sans);
  opacity:0;transform:translateY(14px) scale(.985);pointer-events:none;
  transition:opacity 420ms var(--ease-in,cubic-bezier(.22,1,.36,1)),
             transform 420ms var(--ease-in,cubic-bezier(.22,1,.36,1))}
.aviso.ver{opacity:1;transform:none;pointer-events:auto}
.aviso::before{content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:14px 14px 0 0;
  background:var(--coral)}
.aviso .et{display:inline-block;font-size:.625rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--coral-texto);margin:.2rem 0 .5rem}
.aviso h4{margin:0 0 .4rem;font-size:1rem;font-weight:800;line-height:1.3;
  letter-spacing:-.015em;color:var(--azul)}
.aviso p{margin:0 0 .9rem;font-size:.8125rem;line-height:1.55;color:var(--azul-2)}
.aviso .ir{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  padding:.5rem 1rem;border-radius:99px;background:var(--coral);color:#FFFFFF;
  font-size:.8125rem;font-weight:700;text-decoration:none;
  transition:filter var(--base) var(--ease)}
.aviso .ir:hover{filter:brightness(.94)}
.aviso .x{position:absolute;top:.4rem;right:.4rem;width:40px;height:40px;border:0;
  background:none;cursor:pointer;border-radius:8px;color:var(--azul-2);
  display:grid;place-items:center;line-height:1;font-size:1.05rem;
  transition:background var(--base) var(--ease),color var(--base) var(--ease)}
.aviso .x:hover{background:rgba(var(--a),.08);color:var(--azul)}
.aviso .x:focus-visible,.aviso .ir:focus-visible{outline:2px solid var(--coral);outline-offset:2px}

/* Modo franja: encima de la nav, a todo lo ancho, y sin esperar scroll. */
.aviso.barra{position:static;width:auto;right:auto;bottom:auto;border:0;border-radius:0;
  box-shadow:none;padding:.65rem 1rem;background:var(--azul);color:#FFFFFF;
  display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;
  transform:none;opacity:1;pointer-events:auto}
.aviso.barra::before{display:none}
.aviso.barra .et{color:#FFFFFF;opacity:.78;margin:0}
.aviso.barra h4{color:#FFFFFF;font-size:.875rem;margin:0}
.aviso.barra p{display:none}
.aviso.barra .ir{background:#FFFFFF;color:var(--azul);min-height:34px;padding:.35rem .9rem}
.aviso.barra .x{position:static;color:#FFFFFF}
.aviso.barra .x:hover{background:rgba(255,255,255,.16);color:#FFFFFF}

/* La misma pauta tactil que el resto del sitio: 44 px en pantalla tactil,
   cerrar incluido. Un aviso que no se puede cerrar con el pulgar es peor que
   no tener aviso. */
@media(max-width:1040px){
 .aviso .x{width:44px;height:44px}
 .aviso .ir{min-height:44px}
 .aviso.barra .ir{min-height:44px}
 .aviso.barra .x{width:44px;height:44px}
}
@media(max-width:620px){
 .aviso{right:.75rem;left:.75rem;bottom:.75rem;width:auto;padding:1rem 1.1rem 1.1rem}
 .aviso h4{font-size:.9375rem;padding-right:2.4rem}
}
/* Con el menu de telefono abierto el aviso estorba: la tarjeta va en z-index 70
   y el menu en 59, asi que flotaria encima de los enlaces. Mientras el menu
   este abierto, el aviso se aparta. */
body.nav-abierta .aviso{opacity:0;pointer-events:none;transform:translateY(14px)}

/* ── EL AVISO COMO PIEZA VISUAL ────────────────────────────────────────────
   Mariana puede poner una imagen suya arriba de la tarjeta, o una imagen sola
   sin texto. Va a sangre contra los cantos superiores y conserva su
   proporcion: nada de recortes raros si la pieza no viene del tamano exacto.
   Con `solo_imagen` la tarjeta es la pieza entera, enlazada, y encima solo
   queda la X. */
.aviso .pieza{display:block;margin:-1.15rem -1.25rem .9rem;border-radius:14px 14px 0 0;
  overflow:hidden;background:var(--gris-suave,#F5F8FB)}
.aviso .pieza img{display:block;width:100%;height:auto}
.aviso.solo{padding:0;overflow:hidden}
.aviso.solo::before{display:none}
.aviso.solo .pieza{margin:0;border-radius:14px}
.aviso.solo .x{background:rgba(255,255,255,.92);color:var(--azul);
  box-shadow:0 2px 8px rgba(12,24,40,.25)}
.aviso.solo .x:hover{background:#FFFFFF}

/* ══════════════════════════════════════════════════════════════════════════
   EL CHAT DE WHATSAPP · 28-sep-2026
   Lo que hace HubSpot, y Sinco con el embebido de HubSpot: un boton redondo
   abajo a la derecha que aparece cuando la persona ya empezo a leer, y que una
   sola vez se abre solo y pregunta si quiere hablar.
   Reglas, las mismas que el aviso: no es un modal, no roba el foco, no
   oscurece nada. La burbuja se cierra con la X o con Escape y no vuelve a
   abrirse sola; el boton se queda, que para eso esta.
   El color es el coral de Capta, no el verde de WhatsApp: el glifo ya dice de
   que app se trata y el verde no esta en nuestro sistema de color. Como es un
   icono y no texto, el coral de marca vale.
   ══════════════════════════════════════════════════════════════════════════ */
.wa{position:fixed;right:1.25rem;bottom:1.25rem;z-index:69;
  display:flex;flex-direction:column;align-items:flex-end;gap:.7rem;
  font-family:var(--sans);pointer-events:none}
.wabtn{width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;flex:0 0 auto;
  background:var(--coral);color:#FFFFFF;display:grid;place-items:center;pointer-events:auto;
  box-shadow:0 14px 30px -10px rgba(238,108,77,.55),0 2px 6px rgba(12,24,40,.2);
  opacity:0;transform:translateY(14px) scale(.9);
  transition:opacity 380ms var(--ease-in,ease),transform 380ms var(--ease-in,ease),
             filter var(--base) var(--ease)}
.wa.ver .wabtn{opacity:1;transform:none}
.wabtn:hover{filter:brightness(.94)}
.wabtn svg{width:28px;height:28px;display:block}
.wabtn:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
/* El pulso sale una sola vez, cuando el boton aparece: llama la atencion y se
   calla. El manual prohibe el bucle decorativo. */
.wa.ver .wabtn::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--coral);animation:walatido 1.6s var(--ease) 2}
@keyframes walatido{from{transform:scale(1);opacity:.65}to{transform:scale(1.7);opacity:0}}
.wabtn{position:relative}

/* ── LA ETIQUETA DEL BOTON ─────────────────────────────────────────────────
   Un circulo de 56px en una esquina se pierde contra una pagina llena. La
   etiqueta lo nombra sin ocupar nada: es lo que hacen Intercom, Drift y la
   propia Sinco. Se va en cuanto la persona abre el chat y no vuelve, porque
   repetir en la esquina lo que ya esta abierto en pantalla es ruido. */
.walan{display:flex;align-items:center;gap:.55rem;pointer-events:none}
.waet{background:#FFFFFF;border:1px solid var(--borde-claro,#E2EAF0);border-radius:99px;
  padding:.5rem .9rem;font-size:.8125rem;font-weight:700;color:var(--azul);
  white-space:nowrap;pointer-events:none;
  box-shadow:0 10px 24px -14px rgba(12,24,40,.45);
  opacity:0;transform:translateX(8px);
  transition:opacity 320ms var(--ease-in,ease) 220ms,transform 320ms var(--ease-in,ease) 220ms}
.wa.ver .waet{opacity:1;transform:none}
.wa.sin-et .waet{opacity:0;transform:translateX(8px);transition-delay:0s}

/* ── EL PANEL ──────────────────────────────────────────────────────────────
   Era blanco con una cabecera azul pegada arriba: dos materiales distintos
   cosidos, y se notaba la costura. Ahora el panel es UNA pieza de Azul Capta,
   con un degradado y un foco de luz arriba a la izquierda que le da volumen,
   que es lo que hace que el de Salesforce se vea trabajado y el mio no.
   Dentro, todo vive sobre ese azul: el mensaje y las sugerencias son blancos
   translucidos, no cajas aparte. El unico color plano es el coral, y se
   reserva para dos cosas, el avatar y el boton. Asi hay una sola jerarquia:
   lo que brilla es lo que hay que tocar. */
/* EL PANEL ES BLANCO, y no es una preferencia: es lo unico que contrasta
   SIEMPRE. Era azul oscuro con degradado, y sobre la banda azul del cierre
   —que es justo donde mas gente llega— se perdia: «sobre el azul ese cosito no
   genera contraste, choca con el azul y se pierde» (Mariana, 8-oct-2026).
   Un chat flota sobre cualquier seccion de la pagina, asi que su fondo no puede
   depender de lo que haya debajo. Blanco con texto oscuro es lo que usan
   Intercom, Monday y Pipefy, y por esto mismo. */
.wabur{width:min(340px,calc(100vw - 2.5rem));position:relative;overflow:hidden;
  border-radius:18px;border:1px solid rgba(26,58,88,.10);color:var(--azul);
  background:#FFFFFF;
  box-shadow:0 30px 64px -22px rgba(12,24,40,.45),0 2px 10px rgba(12,24,40,.10);
  opacity:0;transform:translateY(10px) scale(.98);pointer-events:none;
  transition:opacity 320ms var(--ease-in,ease),transform 320ms var(--ease-in,ease)}
.wa.abierto .wabur{opacity:1;transform:none;pointer-events:auto}

/* La cabecera lleva el azul claro de Capta —var(--claro), #8BB6CD— muy
   rebajado sobre blanco. Blanco a secas contrastaba pero no decia nada:
   «de pronto si blanco, pero como con el azul clarito de Capta» (Mariana,
   8-oct-2026). El cuerpo se queda blanco, que es lo que garantiza que el panel
   se lea sobre cualquier seccion. */
.wabur .wahd{display:flex;align-items:center;gap:.7rem;padding:.95rem 1rem .8rem;
  background:linear-gradient(180deg,rgba(139,182,205,.26) 0%,rgba(139,182,205,.13) 100%);
  border-bottom:1px solid rgba(var(--a),.14)}
/* El anillo del avatar es el unico adorno, y hace falta: sin el, el coral
   se lee como un boton suelto en vez de como quien contesta. */
.wabur .waav{width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  background:var(--coral);color:#FFFFFF;display:grid;place-items:center;
  box-shadow:0 0 0 5px rgba(238,108,77,.18),0 6px 14px -6px rgba(238,108,77,.7)}
.wabur .waav svg{width:19px;height:19px;display:block}
.wabur .wanm{display:flex;flex-direction:column;min-width:0;flex:1}
.wabur .wanm b{font-size:.9375rem;font-weight:800;letter-spacing:-.012em;line-height:1.2}
/* Sobre la cabecera azul clara, --azul-2 se quedaba en 4,06:1 y para texto
   pequeño hacen falta 4,5. Tampoco sirve --azul rebajado al 82%, que da 4,00.
   Va en --azul entero —5,89:1— y la jerarquia la marcan el tamaño y el peso,
   que es como hay que marcarla cuando el color ya no da mas. */
.wabur .wanm u{text-decoration:none;font-size:.75rem;font-weight:500;line-height:1.35;
  color:var(--azul);margin-top:.12rem}

.wabur .wabd{padding:1rem 1rem .5rem}
.wabur .wamsg{background:var(--gris-suave,#F5F8FB);border:1px solid var(--borde-claro,#E2EAF0);
  border-radius:14px 14px 14px 5px;padding:.8rem .85rem}
.wabur h5{margin:0 0 .35rem;font-size:.9375rem;font-weight:700;line-height:1.32;
  letter-spacing:-.012em;color:var(--azul)}
.wabur p{margin:0;font-size:.8125rem;line-height:1.58;color:var(--azul-2)}

.wabur .wasug{display:flex;flex-direction:column;gap:.4rem;margin-top:.75rem}
.wabur .wasg{display:block;text-decoration:none;text-align:left;
  width:100%;border:1px solid rgba(var(--a),.2);border-radius:11px;padding:.6rem .8rem;
  font-size:.8125rem;font-weight:700;color:var(--azul);background:#FFFFFF;
  font-family:var(--sans);cursor:pointer;
  opacity:0;transform:translateY(6px);
  transition:background var(--base) var(--ease),border-color var(--base) var(--ease)}
.wa.abierto .wabur .wasg{animation:wasgentra 300ms var(--ease-in,ease) forwards;
  /* --n, NO --k: --k es el coral del sistema. Al usarlo aqui como indice, cada
     chip se quedaba con --k valiendo 0, 1 o 2 y su borde y su fondo, que son
     rgba(var(--k),...), se volvian invalidos y desaparecian. */
  animation-delay:calc(180ms + var(--n) * 70ms)}
@keyframes wasgentra{to{opacity:1;transform:none}}
.wabur .wasg:hover{background:rgba(var(--a),.07);border-color:rgba(var(--a),.34)}

.wabur .ir{display:flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:44px;margin:.85rem 1rem 1rem;padding:.6rem 1rem;border-radius:12px;
  background:var(--coral);color:#FFFFFF;font-size:.8125rem;font-weight:800;
  text-decoration:none;box-shadow:0 10px 24px -12px rgba(238,108,77,.9);
  transition:filter var(--base) var(--ease)}
.wabur .ir:hover{filter:brightness(.94)}
.wabur .x{position:absolute;top:.5rem;right:.5rem;width:34px;height:34px;border:0;
  background:none;cursor:pointer;border-radius:9px;color:var(--azul-2);
  display:grid;place-items:center;font-size:1.05rem;line-height:1;
  transition:background var(--base) var(--ease),color var(--base) var(--ease)}
.wabur .x:hover{background:rgba(var(--a),.08);color:var(--azul)}
.wabur .x:focus-visible,.wabur .ir:focus-visible,.wabur .wasg:focus-visible{
  outline:2px solid #FFFFFF;outline-offset:2px}
@media (prefers-reduced-motion:reduce){
 .wabur .wasg{opacity:1;transform:none;animation:none!important}
}

/* El aviso y el chat comparten esquina: el aviso se sienta ENCIMA del boton,
   y cuando la burbuja del chat se abre, el aviso se aparta. Dos tarjetas
   flotando en el mismo rincon son una de mas. */
body.con-chat .aviso{bottom:calc(1.25rem + 56px + .9rem)}
body.wa-abierto .aviso{opacity:0;pointer-events:none;transform:translateY(14px)}

@media(max-width:1040px){ .wabur .x{width:44px;height:44px} }
@media(max-width:620px){
 .wa{right:.75rem;bottom:.75rem}
 .wabur{width:calc(100vw - 1.5rem)}
 body.con-chat .aviso{bottom:calc(.75rem + 56px + .8rem)}
}
/* Con el menu de telefono abierto, el chat se aparta igual que el aviso. */
body.nav-abierta .wa{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
 .wabtn,.wabur{transition:none;transform:none}
 .wa.ver .wabtn::after{animation:none;display:none}
}

@media (prefers-reduced-motion:reduce){
 .aviso{transition:none;transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   EL NODO ORBITAL, VIVO · 28-sep-2026
   Referencia: el «interactiveDiagramSlider» del home de Sinco, que es la pieza
   que le da movimiento a su pagina. No copiamos el componente —el suyo es un
   plano de obra con marcadores y zoom— sino la idea: el grafico central deja
   de ser una ilustracion y pasa a estar ocurriendo.
   Lo que se mueve es lo que el manual ya dice que se mueve: «una curva que se
   traza» (pag. 28). Por cada una de las seis rutas del nodo viaja un trazo
   corto desde el centro hacia su satelite, escalonado, en bucle lento. Las
   rutas de fondo no se tocan: siguen al 25%, y el pulso va encima.
   Ciclo de 5,4 s y opacidad maxima .55: tiene que verse al mirarlo, no
   pelearle al titular que esta al lado.
   ══════════════════════════════════════════════════════════════════════════ */
.ctanodo .pulsos .ruta{stroke-dasharray:12 190;stroke-dashoffset:96;opacity:.55;
  animation:rutaviaja 5.4s linear infinite}
.ctanodo .pulsos .ruta:nth-child(2){animation-delay:.9s}
.ctanodo .pulsos .ruta:nth-child(3){animation-delay:1.8s}
.ctanodo .pulsos .ruta:nth-child(4){animation-delay:2.7s}
.ctanodo .pulsos .ruta:nth-child(5){animation-delay:3.6s}
.ctanodo .pulsos .ruta:nth-child(6){animation-delay:4.5s}
@keyframes rutaviaja{
  0%  {stroke-dashoffset:96}
  55% {stroke-dashoffset:-12}
  100%{stroke-dashoffset:-12}
}
/* Quieto: sin pulso no falta nada, el nodo se lee igual. */
@media (prefers-reduced-motion:reduce){
  .ctanodo .pulsos{display:none}
}

/* ── Y EN TELEFONO, UNA SOLA COLUMNA QUE SI CABE ───────────────────────────
   La biblioteca apila las piezas, pero se quedaba a medias y por dos motivos
   que solo se ven midiendo:
   1. El marco (.cap9 / .cap16) es una rejilla, y una rejilla de columna «auto»
      mide por el contenido: la composicion de plataforma pedia 958, 1124 y
      hasta 1233 px dentro de un marco de 314, y el overflow:hidden se comia
      dos tercios de la pantalla del producto. Pasa a bloque.
   2. Ocho composiciones traen el ancho ESCRITO EN EL HTML
      —style="width:calc(376 * .1515cqw)"— y sin container-type esos cqw se
      resuelven contra la ventana, no contra el marco. Un atributo style solo
      pierde contra !important, asi que aqui va con !important.
   Ademas el cuerpo de la aplicacion se lee de arriba abajo, como se lee el
   producto real: riel de modulos en horizontal, columna del caso a ancho
   completo y panel lateral oculto. Nada recortado, nada que se arrastre. */
@media(max-width:640px){
@supports not (width: calc(1px * tan(atan2(1px, 1px)))){

  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cap9,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cap16{display:block!important;padding:10px!important}
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp{container-type:inline-size!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    aspect-ratio:auto!important;height:auto!important;
    display:flex!important;flex-direction:column!important;gap:10px!important}
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp .p{position:static!important;
    width:100%!important;max-width:100%!important;height:auto!important;
    left:auto!important;top:auto!important}
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp .bd{flex-direction:column!important}
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp .cv,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp .ccv{width:100%!important;max-width:100%!important;flex:1 1 auto!important;min-width:0}
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp .rail,
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp .crail{flex-direction:row!important;width:100%!important;justify-content:flex-start}
  /* La misma regla, un escalon mas especifica y con !important, volvia a
   esconder el panel y ganaba a la de arriba. Aqui tambien se apila. */
:is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp{flex-direction:column}
:is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp .lat{display:block!important;
  width:auto!important;flex:0 0 auto}

}}



/* ══ LAS FICHAS DE INTEGRACION, EN TELEFONO ═══════════════════════════════
   A dos columnas dentro de un lienzo de 360 px cada ficha se quedaba en 170:
   el icono ocupaba 40 y al texto le sobraban 110. «WhatsApp Business» partia
   en dos, «ERP de obra» en tres renglones y «Correo corporativo» se salia de
   la tarjeta. Ocho fichas apiladas ocupan mas alto y se leen; dos columnas
   ilegibles no son una ventaja.
   ═════════════════════════════════════════════════════════════════════════ */
@media(max-width:640px){
@supports not (width: calc(1px * tan(atan2(1px, 1px)))){

  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile{
    padding:.7rem .8rem;gap:.7rem;min-width:0}
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile .t2{min-width:0;flex:1}
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile b{
    font-size:12px;line-height:1.3;white-space:normal;overflow-wrap:break-word}
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile u{
    font-size:10px;line-height:1.35;white-space:normal;overflow-wrap:break-word}
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile .ci2{
    width:30px;height:30px;flex:0 0 auto}
  :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ctile .ci2 svg{
    width:16px!important;height:16px!important}

}}

/* ── LAS FILAS QUE NO CABEN EN UN TELEFONO ─────────────────────────────────
   Dentro de la maqueta el texto lleva un piso en pixeles para que no se
   vuelva un borrón. En un teléfono ese piso queda POR ENCIMA de la medida
   proporcional del lienzo, así que filas que en escritorio caben de sobra se
   salen de la tarjeta y se ven cortadas contra el canto. Bajar el piso sería
   devolver el borrón, así que lo que se cede es la fila: pasa al renglón
   siguiente en vez de salirse. Solo en teléfono, y solo en las dos filas que
   lo necesitan, no en todas. */
@media(max-width:640px){
@supports not (width: calc(1px * tan(atan2(1px, 1px)))){

 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kflujo{flex-wrap:wrap;row-gap:.45rem}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .fila:has(.ksw){flex-wrap:wrap;row-gap:.55rem}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .fila:has(.ksw) .t12{
   flex:1 1 calc(100% - 4rem);min-width:0}

}}

/* ── EL LIENZO DEL EDITOR EN UN TELEFONO ───────────────────────────────────
   Las tarjetas del lienzo van colocadas por coordenadas, en unidades del
   contenedor. En teléfono el contenedor deja de ser contenedor de consulta y
   las coordenadas se encogen, pero el texto no: lleva su piso en píxeles. El
   resultado era un lienzo casi vacío con tres tarjetas de treinta píxeles en
   las que solo se veía la barra de color, sin el rótulo.
   Aquí el lienzo deja de ser un plano y pasa a ser lo que cabe en un
   teléfono: la misma lista de actividades, una debajo de otra y legible. Las
   líneas punteadas que las unían salen, porque unir tarjetas apiladas con
   curvas dibujadas para otra posición es peor que no unirlas. */
/* A 320px LA BARRA DE LA MAQUETA NO DA PARA TODO. Con el logo, el ambiente y
   el avatar, el avatar se salia 18px por la derecha (medido en /construccion,
   5-oct-2026). El avatar es decoracion: el logo y el ambiente son los que
   dicen que esto es Capta, asi que el que sale es el avatar. 320px es el
   iPhone SE de primera generacion y los Android pequenos. */
@media(max-width:359px){
 :is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .tb .yo{display:none}
 :is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .tb{gap:8px}
}

@media(max-width:640px){
@supports not (width: calc(1px * tan(atan2(1px, 1px)))){

 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .lienzo2{
   height:auto!important;min-height:0;padding:10px;display:flex;flex-direction:column;gap:8px}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .lienzo2 > svg{display:none}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .lienzo2 .act{
   position:static!important;width:auto!important;padding:8px 10px;border-width:1px;
   box-shadow:0 2px 6px -3px rgba(0,0,0,.3)}
 /* LAS SALIDAS, EN LINEA Y COMO PASTILLAS. En el plano son dos etiquetas
    chiquitas dentro de la tarjeta. Apiladas a ancho completo se convertian
    en dos barrones azul y coral, y la maqueta entera se leia como una pila
    de botones gigantes sin sentido — que es justo lo que se veia en
    telefono (Mariana, 5-oct-2026). */
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .lienzo2 .act{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .lienzo2 .act b,
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .lienzo2 .act u{width:100%}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .lienzo2 .act s{display:inline-flex;align-items:center;width:auto;
   padding:3px 9px;margin:3px 4px 0 0;border-radius:99px;font-size:10px}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .lienzo2 .punto{
   position:static!important;width:24px!important;height:24px!important;align-self:flex-start}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .lienzo2 .punto svg{width:12px!important;height:12px!important}

}}

/* ── LA PALETA DEL EDITOR EN UN TELEFONO ───────────────────────────────────
   La paleta es la columna de la izquierda del editor, con las actividades que
   se arrastran al lienzo. Mide 100px y eso está bien cuando vive AL LADO del
   lienzo. En teléfono el cuerpo se apila, así que la paleta se quedaba sola a
   la izquierda con dos tercios de blanco muerto a su derecha, y parecía una
   columna que se quedó sin su pareja.
   Aquí deja de ser columna y pasa a ser lo que de verdad es: una tira de tres
   actividades, a ancho completo, con su título encima. */
@media(max-width:640px){
@supports not (width: calc(1px * tan(atan2(1px, 1px)))){

 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp .pal{
   width:100%!important;flex:0 0 auto;border-right:0;
   border-bottom:1px solid var(--p-borde);padding:10px;
   display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:stretch}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp .pal .ph2{
   grid-column:1/-1;margin-bottom:0}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp .pal .pca{
   margin-bottom:0;padding:7px 8px;border-width:1.5px}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp .pal .pca i{height:5px;margin-top:5px}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp .pal .pca.not i{height:10px}

}}

/* ── EL RIEL DE ICONOS EN UN TELEFONO ──────────────────────────────────────
   El riel es la columna de iconos de la aplicación. En escritorio dice «esto
   es un producto de verdad». En un teléfono se queda en treinta píxeles de
   iconos ilegibles que le roban ancho a lo único que importa de la captura,
   que es el caso: quién pidió qué, en qué paso va y quién aprueba. Y como el
   riel es cuadrado y la tarjeta redondeada, la esquina de abajo se veía rota.
   Sale en teléfono. Vuelve por encima de 640. */
@media(max-width:640px){
@supports not (width: calc(1px * tan(atan2(1px, 1px)))){

 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) :is(.rail,.crail){display:none}

}}

/* ── EL EDITOR EN MINIATURA, EN UN TELEFONO ────────────────────────────────
   Las tarjetas de este lienzo van colocadas en PIXELES, no en unidades del
   contenedor: la tercera empieza en 266 y mide 100, o sea que pide 366px de
   ancho. En un telefono el marco da 340 y la tarjeta quedaba cortada contra el
   canto, con el titulo a medias. Misma solucion que en el resto de los
   lienzos: en telefono se apilan y se leen. */
/* DOS BANDAS, NO UNA. Esta regla apila el editor cuando no cabe dibujado por
   coordenadas. Miraba solo hasta 640 px de VENTANA, pero lo que aprieta no es
   la ventana: es el ancho de la TARJETA. Entre 681 y 1080 el bento va a dos
   columnas y la tarjeta se queda en 354 px —menos que a 640 de ventana, donde
   el bento ya es de una columna y la tarjeta mide ~600—. Resultado: en iPad
   vertical el tercer nodo y el lazo «Volver a» se salian 35 y 53 px y los
   cortaba el canto de la tarjeta. Medido el 9-oct-2026 a 834 px.
   El corte alto son 940: a partir de ahi la tarjeta pasa de 390 px y el
   editor cabe dibujado. */
@media(max-width:640px),(min-width:681px) and (max-width:940px){
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .edmini{
   height:auto!important;padding:10px;display:flex;flex-direction:column;gap:8px}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .edmini > svg,
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .edmini .eini{display:none}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .edmini .eact{
   position:static!important;left:auto!important;top:auto!important;width:auto!important;
   padding:8px 10px}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .edmini .eact s{padding:3px 6px;margin-top:5px}
 /* El rotulo del bucle tambien va por coordenadas y se quedaba colgando del
    canto. Apilado deja de ser un lazo dibujado y pasa a ser lo que dice. */
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .edmini .ebuc{
   position:static!important;left:auto!important;top:auto!important;
   width:auto!important;height:auto!important;border:0!important;
   display:flex;justify-content:center;padding:0}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .edmini .ebuc span{
   position:static!important;transform:none!important;white-space:normal}
}

/* ── EL TABLERO DE ANALITICA EN UN TELEFONO ────────────────────────────────
   La fila lleva el donut (120px fijos), su leyenda y la serie de barras, todo
   en un renglon. En escritorio caben; en un telefono la serie se salia de la
   tarjeta y las ultimas barras quedaban detras del canto, ademas de aplastadas
   a veintiseis pixeles de alto, que ya no es una grafica sino un renglon de
   manchas. Aqui la fila pasa a dos renglones, la serie ocupa el ancho entero y
   recupera altura suficiente para que se vea la subida, que es lo que la
   grafica esta contando. */
@media(max-width:640px){
@supports not (width: calc(1px * tan(atan2(1px, 1px)))){

 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp .fila:has(.kdona),
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp .fila:has(.kserie){
   flex-wrap:wrap;row-gap:12px}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .comp .fila:has(.kserie) > .sp{
   flex:1 1 100%;min-width:0}
 /* Anchos en PORCENTAJE, a proposito. Con flex:1, y tambien con una rejilla de
    1fr, las ocho barras se resolvian a cuarenta y ocho pixeles cada una y
    sumaban cuatrocientos diecinueve dentro de una caja de doscientos setenta:
    la grafica se salia por la derecha y el ultimo mes quedaba detras del canto.
    Pasa porque dentro de la maqueta el reparto del espacio libre se calcula
    contra una medida que no es la que termina teniendo la caja. El porcentaje
    no depende de ese reparto: se mide contra el ancho real del contenedor, que
    es justo lo que aqui hace falta. Ocho barras, 12,5% menos su parte del hueco. */
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kserie,
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kejes{
   display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr));
   column-gap:5px!important;row-gap:0!important;
   width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kserie{height:72px!important;align-items:flex-end}
 /* El ancho va en vw, y no en porcentaje ni en cqw, a proposito. Dentro de esta
    maqueta el porcentaje se resolvia contra 419px y el cqw contra 500, cuando la
    caja real mide 266: la consulta de contenedor y el flex se pisan y el reparto
    del espacio libre se calcula contra una medida intermedia que nunca llega a
    ser la definitiva. El resultado eran ocho barras de cuarenta y ocho pixeles
    dentro de una caja de doscientos sesenta y seis, o sea la grafica saliendose
    por la derecha con el ultimo mes detras del canto.
    vw no participa de ese reparto: se mide contra la ventana y da el mismo
    numero en las dos pasadas. La caja ocupa el 68% del ancho de la ventana, asi
    que cada una de las ocho barras es 8,4vw menos su parte del hueco. */
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kserie > span,
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kejes > u{
   width:auto!important;min-width:0!important;max-width:100%!important;box-sizing:border-box}
 :is(.hmk,.hmkPl,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .kserie > span{border-radius:3px 3px 0 0}

}}

/* ══ UNA CITA DE CLIENTE, CENTRADA ════════════════════════════════════════
   Vivia solo en /precios. Se sube aqui para que cualquier pagina pueda llevar
   SU testimonio: el reparto del 6-oct-2026 le da uno distinto a construccion,
   PQRS, entregas y precios, y deja los cuatro juntos solo en /clientes, que es
   la pagina cuyo trabajo es justamente enseñarlos.
   Antes el de Rafael Pava salia identico en tres paginas y el bloque entero de
   /clientes estaba clonado en /construccion. */
.pcita{background:var(--gris-suave,#F5F8FB);padding:clamp(3rem,2.4rem + 1.6vw,4.5rem) 0;
  border-top:1px solid var(--borde-claro);border-bottom:1px solid var(--borde-claro)}
.pcita blockquote{margin:0 auto;max-width:56ch;text-align:center;
  font-size:clamp(1.125rem,1rem + .6vw,1.5rem);font-weight:600;line-height:1.55;
  color:var(--azul);letter-spacing:-.012em}
.pcita blockquote::before{content:"\201C";color:var(--coral);font-weight:800;
  font-size:1.6em;line-height:0;position:relative;top:.28em;margin-right:.06em}
.pcita .quien{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:1.8rem}
.pcita .ini{width:44px;height:44px;flex:0 0 auto;border-radius:50%;background:var(--azul);
  display:grid;place-items:center;font-weight:800;font-size:.875rem;color:#FFFFFF}
.pcita .quien b{display:block;font-size:.875rem;font-weight:700;color:var(--azul)}
.pcita .quien u{display:block;text-decoration:none;font-size:.8125rem;color:var(--azul-2);
  line-height:1.4}
@media(max-width:560px){
 .pcita .quien{flex-direction:column;text-align:center;gap:.6rem}
}

/* ══ LA BANDEJA QUE SE REPARTE SOLA ═══════════════════════════════════════
   La maqueta de la primera capacidad de /construccion era una pantalla de
   CONFIGURACION —un arbol de clasificadores con el panel derecho vacio— y el
   titular de al lado prometia que el caso se asigna solo al responsable de su
   torre. Ni se parecian, y una pantalla de ajustes vacia es lo mas muerto que
   puede haber en una pagina comercial (Mariana, 4-oct-2026).

   Esta muestra el momento del que habla el titular: cuatro casos que entran por
   WhatsApp, correo y formulario, cada uno con su torre, y al lado la persona a
   la que el sistema ya se lo asigno. Usa la paleta de pastillas que la
   biblioteca ya tenia y que las maquetas no estaban aprovechando. */
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cabz{display:flex;align-items:center;
  gap:1.2cqw;margin-bottom:1.4cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .cabz .tit{margin:0}
/* El punto en vivo es el unico movimiento permanente de la maqueta: dice que
   esto es una bandeja que corre, no una captura. */
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .vivo{display:inline-flex;align-items:center;
  gap:.7cqw;font-size:max(8.5px,1.25cqw);font-weight:700;color:var(--p-ok);
  background:rgba(63,160,106,.12);border-radius:99px;padding:.35cqw 1.1cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .vivo i{width:max(5px,.8cqw);height:max(5px,.8cqw);
  border-radius:50%;background:var(--p-ok);animation:vivolatido 2.4s ease-in-out infinite}
@keyframes vivolatido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}

:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bandeja .caso{align-items:center;
  padding:.95cqw 1.4cqw;margin-bottom:.8cqw}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bandeja .pils{margin-top:.35cqw}
/* El canto de color es la torre, no el vencimiento: aqui el dato que importa
   es de donde viene el caso. */
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bandeja .caso:has(.pil.tipo){border-left-color:var(--p-tipo)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bandeja .caso:has(.pil.serv){border-left-color:var(--p-serv)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bandeja .caso:has(.pil.proy){border-left-color:var(--p-proy)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bandeja .caso:has(.pil.ok){border-left-color:var(--p-ok)}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bandeja .der{text-align:right;flex:0 0 auto}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bandeja .ag{margin-top:0;justify-content:flex-end}
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .ag i.cor{background:var(--coral)}
/* El ultimo acaba de entrar: queda marcado hasta que lo abra alguien. */
:is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .caso.llega{
  background:linear-gradient(90deg,rgba(238,108,77,.1) 0%,rgba(238,108,77,0) 62%)}

/* Las filas entran escalonadas cuando la tarjeta llega a pantalla. Es la misma
   idea que .mkfila de la biblioteca, con el indice en --n. */
@keyframes bandejaentra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ── LA BANDEJA EN UN TELEFONO ────────────────────────────────────────────
   A 390px el lienzo de la maqueta se queda en 227px y la fila del caso —que en
   escritorio va en dos columnas, asunto a la izquierda y responsable a la
   derecha— se partia en tres y cuatro renglones: «Marcela Gómez · WhatsApp» en
   tres lineas, el asunto en otras tres. Quedaba ilegible (Mariana, 5-oct-2026).

   Aqui la fila se apila: quien escribe y por donde, el asunto, y debajo una
   linea con la torre a la izquierda y el responsable a la derecha. Es la misma
   informacion, puesta como cabe en un telefono. */
@media(max-width:560px){
 :is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bandeja .caso{
   display:grid;grid-template-columns:1fr;gap:4px;align-items:stretch}
 :is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bandeja .der{
   display:flex;align-items:center;justify-content:space-between;
   text-align:left;width:100%;gap:8px}
 :is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bandeja .der .ag{justify-content:flex-start}
 :is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bandeja .der .m2{margin:0}
 /* la pastilla de la torre sube a la misma linea del responsable */
 :is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .bandeja .pils{margin:0}
}

/* Las filas entran UNA vez, con la seccion, no al llegar a la tarjeta: la
   tarjeta ya se ve asomando por el canto y animarla al llegar la hace
   parpadear. .rv.in lo pone el observador cuando la seccion aparece. */
.capw.rv.in .bandeja .caso{
  animation:bandejaentra 300ms cubic-bezier(.4,0,.2,1) both;
  animation-delay:calc(120ms + var(--n) * 90ms)}
@media (prefers-reduced-motion:reduce){
 .capw.rv.in .bandeja .caso{animation:none}
 :is(.hmk,.capmk,.bmk,.cap-mk,.pw,.pdet,.cw) .vivo i{animation:none}
}

/* ══ LA PISTA DE DESLIZAR ══════════════════════════════════════════════════
   La tira de procesos del home y de /construccion se mueve con el dedo, pero
   nada lo decia: «no hay como nada que les de la pauta para que naveguen entre
   las cajitas blancas» (Mariana, 8-oct-2026). La mascara que difumina el canto
   dice «sigue hacia alla»; esto dice «esto se mueve».

   Vive aqui y no en cada pagina porque son dos las que lo necesitan, y la
   primera version se quedo solo en el home —«aparte solo esta en el home, y no
   esta en el de construccion»—.

   SE QUEDA MIENTRAS QUEDE TARJETA. La primera version se apagaba para siempre
   al primer deslizamiento y Mariana lo pidio al reves: «si yo lo pongo una vez,
   se desaparece y ya». Ahora es un estado, no un aviso: esta mientras `.vp`
   tenga `haymas-der`, y se va sola al llegar al final de la tira. Si se vuelve
   atras, vuelve.

   Va FUERA del .vp, como hermana: dentro se la comeria la mascara del canto.
   Y arriba a la derecha, no centrada, que centrada caia encima del titulo de la
   segunda tarjeta. */
.pista{display:none}
@media(max-width:700px){
  .carw{position:relative}
  /* `.carw .pista` y no `.pista`: la regla base de arriba tiene la misma
     especificidad y, al ir primero, perderia por orden de aparicion. */
  .carw .pista{display:flex}
  .pista{position:absolute;top:.5rem;right:calc(var(--pad) - .3rem);z-index:3;
    pointer-events:none;align-items:center;gap:.3rem;
    background:var(--coral);color:#FFFFFF;border-radius:99px;
    padding:.34rem .6rem .34rem .66rem;
    font-family:var(--sans);font-size:.6875rem;font-weight:800;letter-spacing:.02em;
    box-shadow:0 6px 16px -6px rgba(238,108,77,.75);
    opacity:0;transition:opacity 260ms var(--ease)}
  .vp.haymas-der + .pista{opacity:1}
  .pista svg{width:11px;height:11px;display:block}
  /* el latido llama la atencion las tres primeras veces y para: repetirlo
     indefinidamente en una esquina es ruido */
  .vp.haymas-der + .pista{animation:pistalate 2.6s var(--ease) 1.1s 3}
  @keyframes pistalate{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
  @media (prefers-reduced-motion:reduce){ .pista{animation:none!important} }
}


/* ══ EL FORMULARIO SE ABRE DENTRO DE LA PAGINA ═════════════════════════════
   «Este es el formulario, cuando la gente hace clic en demo, dentro de la
   pagina web, para que nos llegue la solicitud» (Mariana, 8-oct-2026).
   Antes el CTA se iba a otra pestaña y la persona perdia la pagina. Ahora se
   despliega encima, el formulario se carga en un marco y al cerrarlo sigue
   donde estaba. El formulario de ventas se deja enmarcar —comprobado: no manda
   X-Frame-Options ni frame-ancestors—, y si aun asi no cargara, debajo queda el
   enlace para abrirlo aparte. */
.fmodal{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;
  padding:clamp(.6rem,2vw,1.6rem);background:rgba(16,28,44,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity 200ms var(--ease)}
.fmodal.ver{opacity:1}
/* El formulario viene de otro dominio y trae su propio margen, que es cero.
   Pegado al canto del modal se lee como un marco incrustado, no como una
   ventana de Capta: «como que no tiene margen ni nada» (Mariana, 8-oct-2026).
   El aire se pone AQUI, alrededor del marco, que es lo unico que controlamos. */
.fmodal .caja{position:relative;width:min(620px,100%);height:min(88dvh,880px);
  background:#FFFFFF;border-radius:20px;overflow:hidden;display:flex;
  flex-direction:column;
  box-shadow:0 40px 90px -30px rgba(10,20,34,.6),0 0 0 1px rgba(26,58,88,.08)}
.fmodal .barra{flex:0 0 auto;display:flex;align-items:center;gap:.7rem;
  padding:1.05rem clamp(1rem,3.2vw,2rem) .95rem;
  border-bottom:1px solid var(--borde-claro,#E2EAF0)}
.fmodal .barra b{font-family:var(--sans);font-size:.9375rem;font-weight:800;
  color:var(--azul);letter-spacing:-.01em}
.fmodal .barra .x{margin-left:auto;width:40px;height:40px;border:0;cursor:pointer;
  background:none;border-radius:10px;color:var(--azul-2);font-size:1.25rem;line-height:1}
.fmodal .barra .x:hover{background:rgba(var(--a),.08);color:var(--azul)}
/* Mas aire. Con clamp(.5rem,2vw,1.1rem) todavia «se sentia muy a los bordes»
   (Mariana, 8-oct-2026). El formulario viene de otro dominio con margen cero,
   asi que todo el aire que tenga lo pone este contenedor. En telefono se deja
   menos a los lados —ahi cada pixel es ancho de campo— pero nunca cero. */
.fmodal .marcof{flex:1;min-height:0;
  padding:clamp(.4rem,1.2vw,.9rem) clamp(.75rem,3.2vw,2rem) 0}
.fmodal iframe{width:100%;height:100%;border:0;display:block;background:#FFFFFF}
.fmodal .pie{flex:0 0 auto;padding:.85rem clamp(1rem,3.2vw,2rem) 1.05rem;
  font-family:var(--sans);font-size:.75rem;color:var(--azul-2);text-align:center}
.fmodal .pie a{color:var(--coral-texto,#C14A2E);font-weight:700}
/* Si el formulario no carga, el modal lo dice y ofrece las dos salidas. Un
   marco en blanco es peor que un enlace: no se sabe si esperar o si se fue. */
.fmodal .salida{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.9rem;padding:2rem 1.4rem;text-align:center}
.fmodal .salida p{margin:0;font-family:var(--sans);font-size:.9375rem;color:var(--azul-2)}
.fmodal .bsal{display:inline-flex;align-items:center;min-height:46px;
  padding:.7rem 1.3rem;border-radius:10px;background:var(--coral);color:#FFFFFF;
  font-family:var(--sans);font-weight:800;font-size:.9375rem;text-decoration:none}
.fmodal .wsal{font-family:var(--sans);font-weight:700;font-size:.875rem;
  color:var(--azul);text-decoration:none;border-bottom:1px solid rgba(var(--a),.3)}
body.con-modal{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .fmodal{transition:none} }

/* LA RESPUESTA EN EL SITIO. No todas las preguntas tienen que acabar en
   WhatsApp: «la gente se va a cansar» (Mariana, 8-oct-2026). La del ERP tiene
   respuesta y se da aqui mismo, con el texto aprobado de las preguntas
   frecuentes del home. Las otras dos si abren WhatsApp, cada una con su propio
   mensaje escrito. */
.wabur .waresp{margin-top:.55rem;background:var(--gris-suave,#F5F8FB);
  border:1px solid var(--borde-claro,#E2EAF0);border-radius:14px 14px 14px 5px;
  padding:.75rem .85rem;font-size:.8125rem;line-height:1.58;color:var(--azul-2)}
.wabur .waresp b{color:var(--azul);font-weight:800}
.wabur .waresp a{color:var(--coral,#EE6C4D);font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(238,108,77,.4)}
.wabur .wasg[aria-expanded="true"]{background:rgba(var(--a),.07);
  border-color:rgba(var(--a),.34)}

/* ══ LA COLUMNA DE LAS PAGINAS LEGALES ════════════════════════════════════
   AQUI HUBO UN INDICE VERTICAL Y FUE UN ERROR MIO: la pagina YA TENIA una
   tira de apartados pegajosa justo debajo del hero —`.subnav`, con las catorce
   secciones— y le puse otro indice al lado. Dos navegaciones para lo mismo:
   «aparte que tiene como dos menus» (Mariana, 8-oct-2026). Antes de añadir
   navegacion, mirar la que ya hay.

   Lo que si estaba mal es la columna. Con `max-width:56rem` centrada dentro de
   un `.wrap` de 1240, el texto quedaba a la izquierda y la mitad derecha de la
   pantalla se iba en blanco. Ahora el bloque se centra de verdad y el texto se
   queda en una medida de lectura comoda dentro de el. */
}


/* ══ EL TEXTO PARA QUIEN NO EJECUTA JAVASCRIPT ════════════════════════════
   Varias secciones se arman desde arrays de JavaScript. Googlebot los ejecuta
   y las ve; GPTBot, ClaudeBot y PerplexityBot no. _prerender.py deja dentro de
   cada contenedor una version en texto de la MISMA copia, y el guion la
   sustituye por la version con mockups en cuanto corre.

   `data-js` lo pone una linea en el <head>, antes de que se pinte nada. Si hay
   JavaScript, el previo no llega a verse; si no lo hay, se lee. Por eso la
   regla va colgada del atributo y no de una clase que se anada mas tarde:
   una clase puesta al final del body llega despues del primer pintado y se
   veria el parpadeo. */
html[data-js] .previo{display:none}
.previo{max-width:66ch;margin:0 auto;padding:.5rem 0}
.previo h3{margin:1.4rem 0 .4rem;font-size:1.0625rem;font-weight:700;
  letter-spacing:-.015em;color:inherit}
.previo h3:first-child{margin-top:0}
.previo p{margin:0 0 .7rem;font-size:.9375rem;line-height:1.65;color:inherit;opacity:.85}
.previo ul{margin:.3rem 0 1rem;padding-left:1.1rem}
.previo li{margin-bottom:.3rem}
/* Cuando el contenedor es un <p> u otro elemento en linea, el previo va en
   <span>: un <div> ahi dentro cierra el parrafo y el navegador lo saca
   fuera. Se le da porte de bloque desde la hoja. */
span.previo,span.previo>span{display:block}
.previo blockquote{margin:0 0 1rem;padding-left:.9rem;border-left:2px solid currentColor}
.previo blockquote p{margin:0 0 .25rem}
.previo cite{font-style:normal;font-size:.8125rem;font-weight:700;opacity:.8}


/* ══ EL AVISO DE ENTRADA ══════════════════════════════════════════════════
   La ventana centrada que sale al abrir la pagina, para anunciar un evento.
   La pidio Mariana el 12-oct-2026 con la ventana de LinkedIn Premium de
   referencia: pieza grande arriba, titular, dos lineas y un boton.

   Se enciende en aviso.py con 'modo':'entrada' y 'activo':True. Nada mas.
   Mientras esta puesta, `body.con-entrada` apaga la apertura sola del chat:
   dos cosas saltando a la vez es una emboscada, no una invitacion.

   La imagen es opcional. Sin ella la ventana sigue funcionando, solo que
   empieza por el rotulo. Con `solo_imagen` la ventana ES la pieza. */
.avelo{position:fixed;inset:0;z-index:8998;background:rgba(14,26,42,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity 260ms var(--ease)}
.avelo.ver{opacity:1}
body.con-entrada{overflow:hidden}

.aviso.entrada{position:fixed;z-index:8999;left:50%;top:50%;right:auto;bottom:auto;
  width:min(432px,calc(100vw - 2rem));max-height:calc(100dvh - 2.5rem);overflow-y:auto;
  transform:translate(-50%,-48%) scale(.97);opacity:0;
  background:#FFFFFF;border:1px solid var(--borde-claro);border-radius:18px;
  padding:0 0 1.5rem;text-align:center;
  /* En columna y no en bloque. Con bloque, el rotulo y el boton son cajas en
     linea: cada uno se apoya en una linea de texto que arrastra el hueco del
     descendente, y entre los dos sumaban 55 px de aire muerto al pie de la
     ventana. En columna no hay lineas de texto que apoyar. */
  display:flex;flex-direction:column;align-items:center;
  box-shadow:0 36px 80px -28px rgba(12,24,40,.5),0 4px 14px rgba(12,24,40,.12);
  transition:opacity 280ms var(--ease),transform 280ms var(--ease-in)}
.aviso.entrada.ver{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* La pieza manda: ocupa el ancho entero y redondea solo por arriba. */
.aviso.entrada .pieza{display:block;width:100%;margin:0 0 1.3rem;border-radius:17px 17px 0 0;
  overflow:hidden;background:var(--gris-suave)}
.aviso.entrada .pieza img{display:block;width:100%;height:auto}
.aviso.entrada.solo{padding:0}
.aviso.entrada.solo .pieza{margin:0;border-radius:17px}

.aviso.entrada .et{display:inline-block;margin:0 1.5rem;font-size:.6875rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--coral-texto)}
.aviso.entrada h4{margin:.6rem 1.5rem 0;font-size:1.375rem;font-weight:800;
  letter-spacing:-.025em;line-height:1.2;color:var(--azul);text-wrap:balance}
.aviso.entrada p{margin:.7rem 1.5rem 0;font-size:.9375rem;line-height:1.6;color:var(--azul-2)}
/* `flex` y no `inline-flex`: en linea el boton se apoya en una caja de texto
   y arrastra 47 px de hueco muerto debajo, que en una ventana centrada se ven
   como un error de maquetacion. Medido el 12-oct-2026. */
.aviso.entrada .ir{display:flex;width:max-content;margin-inline:auto;
  align-items:center;gap:.5rem;margin-top:1.3rem;
  background:var(--coral);color:#FFFFFF;font-weight:800;font-size:.9375rem;
  padding:.8rem 1.6rem;border-radius:10px;text-decoration:none;min-height:44px;
  box-shadow:0 8px 18px -8px rgba(var(--k),.6)}
.aviso.entrada .ir:hover{transform:translateY(-1px)}
/* La equis va sobre la pieza, asi que lleva su propio fondo: sin el se pierde
   en cuanto la imagen es clara. */
.aviso.entrada .x{position:absolute;top:.6rem;right:.6rem;z-index:2;
  width:34px;height:34px;display:grid;place-items:center;border:0;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.9);color:var(--azul);
  font-size:1.3rem;line-height:1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  box-shadow:0 1px 4px rgba(12,24,40,.22)}
.aviso.entrada .x:hover{background:#FFFFFF}
@media(max-width:420px){
  .aviso.entrada h4{font-size:1.1875rem}
  .aviso.entrada .et,.aviso.entrada h4,.aviso.entrada p{margin-inline:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  .aviso.entrada,.avelo{transition:none}
  .aviso.entrada{transform:translate(-50%,-50%)}
}
/* PENDIENTE, menor: la ventana queda con ~55 px de aire de mas bajo el boton
   que no he sabido explicar con las medidas —el contenido acaba en 235 px y la
   caja mide 307, y no hay ninguna regla de alto que lo justifique—. Con una
   imagen arriba la proporcion cambia y puede que ni se note. Se mira el dia
   que se encienda de verdad, con el contenido real del evento. */

/* ══ EL CIERRE DEL PIE: REDES, FIRMA Y DERECHOS ═══════════════════
   El orden es el de HubSpot, que es donde Mariana lo vio: los iconos en su
   propia fila y, debajo, la firma —logo, copyright y correo—. Antes iban
   metidos en la misma linea que el copyright y se leian como un apendice.

   TODO SE QUEDA A LA IZQUIERDA, y no por gusto: el chat de WhatsApp flota fijo
   en la esquina inferior derecha y su contenedor reserva 360 px de ancho aunque
   solo se vea el circulo. Medido a 1100 px el 13-oct-2026: con los iconos
   empujados a la derecha, Instagram quedaba debajo de la burbuja y no se podia
   pulsar. A la izquierda no flota nada a ninguna anchura.

   La caja de cada icono mide 44 px aunque el dibujo mida 18: es la pauta tactil
   del resto del sitio, y estos son los enlaces mas pequenos de la pagina. El
   margen negativo devuelve el relleno de esa caja para que el primer icono
   quede alineado con el texto de encima y no sangrado.  */
footer .fsoc{display:flex;align-items:center;padding-top:.35rem;margin-left:-10px}
footer .fredes{display:flex;align-items:center;gap:.1rem}
footer .fredes a{display:grid;place-items:center;width:44px;height:44px;
  color:inherit;opacity:.68;border-radius:10px;
  transition:opacity var(--base) var(--ease),color var(--base) var(--ease),
             background var(--base) var(--ease)}
footer .fredes a svg{width:18px;height:18px;display:block}
footer .fredes a:hover,footer .fredes a:focus-visible{opacity:1;color:var(--coral);
  background:rgba(255,255,255,.08)}
/* La firma: el logo manda sobre el texto, asi que va primero y mas opaco. */
footer .fbot .flogo{width:62px;height:auto;flex:0 0 auto;opacity:.9;
  margin-right:.15rem}
footer .fbot{align-items:center}
@media(max-width:700px){
  /* EN TELEFONO SE APILA DE VERDAD, una cosa por linea.
     Con `space-between` la barra separaba el logo del copyright a la fuerza:
     a 390 px quedaba el logo solo a la izquierda, 40 px de hueco, el copyright
     apelmazado contra el borde derecho y el correo huerfano debajo. «Se ve un
     montonado, se ve terrible» (Mariana, 13-oct-2026), y tenia razon: no hay
     ancho para poner dos cosas en una linea, asi que no se ponen.
     Tres lineas alineadas a la izquierda: la firma, los derechos, el contacto. */
  footer .fbot{display:block}
  footer .fbot .flogo{display:block;margin:0 0 .55rem}
  footer .fbot>span{display:block}
  footer .fbot>span+span{margin-top:.3rem}
}

/* ══ EL SELLO DE COMPARASOFTWARE ═════════════════════════════════════════
   Un renglon mas de la firma, no un distintivo. Va al mismo tamano que el
   copyright y un punto mas apagado: es informacion de pie de pagina, y si
   pesara mas que el correo o que los derechos estaria gritando algo que no
   es un argumento de venta.  */
/* RENGLON PROPIO, y es por la burbuja otra vez. `.fbot` es flex con wrap, y
   con la etiqueta larga —«Software de Gestion de Procesos de Negocio en
   Colombia», 17 caracteres mas que la primera que mandaron— los cuatro hijos
   seguian cabiendo en una linea: 62+254+217+512 = 1045 de 1138. El sello
   terminaba pegado al borde derecho, encima del chat de WhatsApp. Medido a
   1280 el 17-oct-2026: chocaba. Con base 100% baja a su linea, empieza por la
   izquierda y la esquina derecha queda libre a cualquier ancho. */
footer .fbot .fsello{flex:0 0 100%}
footer .fsello{opacity:.72}
footer .fsello a{color:inherit;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;
  transition:color var(--base) var(--ease)}
footer .fsello a:hover,footer .fsello a:focus-visible{color:var(--coral)}

/* EL PIE NECESITA AIRE ABAJO, y no es capricho del sello.
   El chat de WhatsApp flota fijo en la esquina inferior derecha. Medido a
   390x844 el 15-oct-2026: el circulo (.wabtn) ocupa de y=776 a y=832 y la
   etiqueta «¿Hablamos?» (.waet) de x=209 a x=313. Con el pie llegando hasta
   abajo, la ultima linea cae debajo de la burbuja y se lee a medias.
   Ya pasaba ANTES del sello —tapaba «marketing@capta.co · Bogota, Colombia»—;
   el sello solo lo dejo a la vista por ser ahora la ultima linea.
   Con 6rem de relleno la ultima linea acaba en y=748 y la burbuja flota sobre
   espacio vacio. Es el mismo corte que usa _redes.py para apilar la firma. */
@media(max-width:700px){
  footer{padding-bottom:6rem}
}
/* ⟦pie_datos:inicio⟧ */
/* ══ EL PIE ══════════════════════════════════════════════════════════════
   Cuatro columnas, con la organizacion de sinco.co: identidad · datos de la
   empresa · navegacion · legal. Y el copyright centrado abajo.

   El 24-oct-2026 paso de 34 enlaces a 5. Con tan poco contenido las cinco
   columnas de antes sobraban y el acordeon de movil tambien: una lista de
   dos no se pliega.  */
footer .fcols{grid-template-columns:1.3fr 1.2fr 1fr 1fr;
  gap:clamp(1.6rem,3vw,3.4rem)}
footer .fident{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
footer .fident .flogo{width:132px;height:auto;opacity:1;margin:0}

/* La razon social iba en var(--azul), que es el MISMO color del fondo del
   pie: salia invisible. La regla global de h1-h3 la pintaba de azul y esta
   no la sobrescribia. */
footer .fdatos h3{margin:0 0 .7rem;font-size:1rem;letter-spacing:.01em;
  color:#fff;font-weight:700}
footer .fdatos p{margin:0 0 .8rem;font-size:.9375rem;line-height:1.65;
  color:rgba(255,255,255,.78)}
footer .fhora{color:rgba(255,255,255,.6)}

footer .fnav{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
footer .fnav li{margin:0}
footer .fnav a,footer .fnav span{display:block;padding:.42rem 0;
  font-size:.9375rem;line-height:1.4;text-decoration:none;color:rgba(255,255,255,.82)}
footer .fnav a{transition:color var(--base) var(--ease)}
footer .fnav a:hover,footer .fnav a:focus-visible{color:var(--coral)}
/* Blog todavia no existe: va apagado y no se puede pulsar. */
footer .fnav span{color:rgba(255,255,255,.42);cursor:default}

footer .fcopy{margin:clamp(1.8rem,3.4vw,3rem) 0 0;text-align:center;
  font-size:.875rem;color:rgba(255,255,255,.66)}

@media(max-width:1059px){
  footer .fcols{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  footer .fcols{grid-template-columns:1fr;gap:1.8rem}
}
/* ⟦pie_datos:fin⟧ */
/* ⟦hero04:inicio⟧ */
/* ══ MODELO 04 · MENU Y HERO ═══════════════════════════════════════════════
   Generado por _hero04.py. No editar a mano: se reescribe entero.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── EL MENU, EN BLANCO Y MAS GRANDE (todo el sitio) ────────────────────
   En la maqueta la barra es blanca y los enlaces van en Azul Capta.

   EL TAMANO. Mariana: «el tamano del menu de navegacion en el modelo 04 era
   mejor que el actual». Medido sobre el PDF y pasado a un ancho de 1440:

       barra 136 px · logotipo 52 px de alto · tipo 20 px · huecos 38-52 px
       (hoy: barra 60 · logotipo 26 · tipo 15 · huecos 22)

   Esas cifras NO se pueden copiar tal cual, y conviene saber por que: la
   maqueta lleva cinco enlaces y una lupa; Capta lleva cinco enlaces, DOS
   desplegables y DOS botones. Sumado a 20 px de tipo la barra pide 1408 px
   de los 1440 que hay. Cabe por 32 px a 1440 y se parte en cualquier
   portatil de 1280.

   Asi que se sube hasta donde entra, con holgura comprobada ancho por ancho,
   y escalando: a 1041 px queda como estaba y a 1920 llega al tamano del
   diseno. El alto de la barra se calcula, no se escribe, porque de el cuelga
   `--navh`, que es lo que impide que el menu fijo tape el titulo al que
   saltas.

   EL ANCHO MAS APRETADO NO ES EL MAS ESTRECHO, SINO 1041. Es el primer ancho
   con la barra de escritorio completa, y ahi el separador flexible queda en
   CERO: no sobra ni un pixel. Con el tipo a 16,6 px «Agendar demo» se partia
   en dos lineas y la barra se iba a 91 px de alto, mas que a 1920. Por eso las
   rampas estan calculadas para valer exactamente lo de hoy a 1041 y crecer
   solo a partir de ahi, y por eso el logotipo no engorda hasta pasados los
   1100: a 1041 cada pixel de ancho esta ocupado. */
:root{
  /* El alto de la onda que abre el lienzo. Vive aqui porque lo usan dos
     reglas lejanas: la mascara del fondo y el hueco que le reserva la
     seccion de procesos. Si cambia, se mueven las dos solas. */
  --onda:clamp(40px,5.4vw,96px)}
:root{
  /* 26 px hasta 1100, 33 a 1440, 40 a 1920 */
  --nav-logo:clamp(26px,.2rem + 2.1vw,40px);
  /* el aire de la barra, que es lo que mas se nota */
  --nav-pad:clamp(.7rem,.05rem + 1.45vw,1.7rem);
  /* 15 px a 1041 —como hoy— y 17 a 1440 */
  --nav-tipo:clamp(.9375rem,.61rem + .5vw,1.0625rem);
  --nav-hueco:clamp(1.15rem,.5rem + 1.05vw,2rem);
  /* de aqui cuelga el salto a los anclas: la barra es lo mas alto de los dos */
  --navh:calc(max(var(--nav-logo),40px) + var(--nav-pad) * 2 + 1px);
}
.navwrap{background:#FFFFFF;border-bottom:1px solid rgba(61,90,127,.14);
  box-shadow:0 1px 3px -1px rgba(61,90,127,.10)}
.nav{padding-block:var(--nav-pad);gap:var(--nav-hueco)}
.nav .logo{height:var(--nav-logo)}
.nav .it,.nav .dbtn{font-size:var(--nav-tipo)}
/* Los dos botones, en una sola linea pase lo que pase: partidos en dos
   levantan la barra entera y se lee como un error. */
.nav .btn.sm,.nav .btn-sector{font-size:clamp(.85rem,.74rem + .22vw,.95rem);
  white-space:nowrap}
.nav .logo{color:var(--azul)}
.nav .it,.nav .dbtn{color:var(--azul);opacity:.84}
.nav .it:hover,.nav .dbtn:hover,.nav .drop.open .dbtn{opacity:1;color:var(--coral)}
.nav .it.here,.nav .dbtn.here{color:var(--azul);opacity:1}

/* El boton de sector era relleno blanco sobre azul. Sobre blanco desaparecia,
   asi que pasa a borde, que es su papel: secundario al lado del coral. */
.nav .btn-sector{background:transparent;color:var(--azul);
  border:1px solid rgba(61,90,127,.32);box-shadow:none}
.nav .btn-sector:hover{border-color:var(--coral);color:var(--coral);
  box-shadow:0 6px 16px -8px rgba(61,90,127,.45)}

/* La hamburguesa y la barra de progreso eran blancas sobre azul. */
.burger span,.burger span::before,.burger span::after{background:var(--azul)}
.burger:hover,.burger:focus-visible{background:rgba(61,90,127,.08)}
.prog{background:var(--coral);box-shadow:0 0 6px rgba(238,108,77,.5)}

/* ── EL HERO DEL HOME ─────────────────────────────────────
   El degradado cubre LA SECCION ENTERA: el texto y la maqueta en vivo.
   Mariana, 24-oct-2026: «ese fondo deberia ir en todo el giro, cubriria
   tambien el mockup, y en donde estan los logos de los clientes ese fondo lo
   dejariamos blanco».

   La seccion tiene tres hijos: el texto (.wrap.inner), la maqueta (.build) y
   la franja de logos (.trust). Los dos primeros van sobre el degradado; el
   tercero se tapa con su propio blanco a sangre y lleva la onda encima, que
   es la que hace el paso de un fondo al otro. Asi no hay ninguna medida que
   cuadrar a mano: donde empieza .trust, empieza el blanco. */
/* EL CORAL VA ARRIBA A LA DERECHA, Y HAY QUE PONERLO APARTE.
   El degradado de 140 grados deja su extremo coral en la esquina INFERIOR
   derecha, que es exactamente donde la capa honda aprieta mas. Medido, los dos
   se anulaban: el borde derecho iba de #755F68 a #5B515D, malva apagado de
   arriba abajo, y el coral no aparecia en ninguna parte. Eso es lo que hacia
   que el hero se viera «azul con naranja arriba y azul plano al final».

   Asi que el coral se pinta aparte, en la esquina de arriba a la derecha, por
   encima del degradado. Va donde NO hay texto —la caja del titular mide 54rem
   centradas, o sea que pasado el 80 % del ancho no hay nada que leer—, asi
   que suma color sin costarle contraste a una sola letra. */
.sec.hero{padding-top:0;
  background:
    radial-gradient(56% 46% at 96% 2%,rgba(219,116,91,.62) 0%,transparent 70%),
    linear-gradient(100deg,#425A77 0%,#846164 46%,#DB745B 100%)}
/* El velo radial azul/coral que traia el hero sobra: ahora el fondo es este. */
.sec.hero::before{display:none}

/* EL TEXTO TIENE QUE IR POR ENCIMA DE LA CAPA AZUL. `.build` lleva z-index 5
   del CSS original, asi que TODO su contenido —incluida la capa de fondo que
   le cuelga— se pinta por encima de esta caja, que no tenia z-index. El
   fundido llega 260 px por encima de la maqueta, o sea que cubria los botones:
   medido, el CTA coral salia en pantalla como #906160 en vez de #EE6C4D. Un
   degradado decorativo estaba apagando el boton principal del sitio. */
/* EL AIRE ENTRE EL BOTON Y LA MAQUETA SOBRABA. Mariana: «no dejaria tanto
   espacio, hay un espacio raro». Medido: 4,2rem del relleno de abajo mas los
   3rem de margen de la maqueta eran 115 px de nada. Baja a 66. */
.sec.hero>.wrap.inner{position:relative;z-index:6;
  padding-top:clamp(2.4rem,4.4vw,3.8rem);
  padding-bottom:clamp(1.5rem,2.8vw,2.4rem)}
.sec.hero .build{margin-top:clamp(1.2rem,2.4vw,2rem)}

/* La franja de logos, en blanco, y la onda que la separa del degradado.
   `bottom:100%` cuelga la onda justo encima: su borde inferior es blanco puro
   y empalma con este blanco sin costura. */
/* FUERA LA LINEA DE ENCIMA. Mariana: «quitale esa linea que esta sobre el
   titulo de nos usan constructoras». Es un `border-top` de 1 px que tenia la
   franja: separaba bien cuando todo el hero era blanco, pero ahora cae justo
   debajo de la onda y se lee como un corte de mas. La onda ya hace esa
   separacion. */
.sec.hero .trust{position:relative;isolation:isolate;border-top:0;
  padding-top:clamp(1.4rem,3vw,2.6rem)}
.sec.hero .trust::before{content:"";position:absolute;z-index:-1;
  left:0;right:0;top:0;bottom:-2px;background:#FFFFFF}
.sec.hero .trust::after{content:"";position:absolute;z-index:-1;
  left:0;right:0;bottom:100%;height:clamp(72px,12.5vw,210px);
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 600 1920 330' preserveAspectRatio='none'><path fill='none' stroke='%233D5A7F' stroke-width='2.4' stroke-opacity='.55' d='M0,714 C250,674 500,792 790,788 C1080,784 1330,668 1620,684 C1740,691 1850,712 1920,740'/><path fill='%23FFFFFF' d='M0,806 C260,758 520,874 800,868 C1080,862 1340,748 1620,766 C1740,774 1850,796 1920,826 L1920,930 L0,930 Z'/></svg>") bottom center/100% 100% no-repeat}

/* El texto pasa a blanco. Sin sombra: hacia falta cuando debajo habia una
   foto, y sobre color plano solo ensucia. */
.sec.hero .kick{color:#FFFFFF;opacity:1}
.sec.hero .kick::after{background:rgba(255,255,255,.55)}
.sec.hero h1{color:#FFFFFF}
/* La pildora del remate. El rosa original desaparecia sobre el coral, y un
   blanco al 17 % se leia como un bloque gris pegado al titular. Queda solo el
   aro: marca el remate sin meter una caja opaca en medio de la frase. */
.sec.hero h1 em{color:#FFFFFF;background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.38)}
/* LA BAJADA TAMBIEN CRECE. Se quedaba fija en 17 px mientras el titular
   sube a 70: en una pantalla grande se veia escuchimizada al lado. Sube a
   19,2 y el salto entre los dos vuelve a ser el de antes. */
.sec.hero .sub{color:#FFFFFF;
  font-size:clamp(1.0625rem,.85rem + .45vw,1.2rem);margin-top:1rem}
.sec.hero .sub b{color:#FFFFFF}
/* El signo coral se pierde sobre el tinte coral de la derecha; va en blanco. */
.sec.hero .signo .sl{stroke:#FFFFFF}
.sec.hero .signo circle[fill="#EE6C4D"]{fill:#FFFFFF}
.sec.hero .signo circle[fill="#FFFFFF"]{fill:var(--coral)}

/* UN SOLO CALL TO ACTION. Mariana: «dejemos solo un botoncito». Sale «Ver los
   procesos», que ademas repetia el destino de la seccion de abajo. Se oculta,
   no se borra del HTML. */
.sec.hero .cta-wrap .gbtn{display:none}

/* Y EL QUE QUEDA PASA A BLANCO CON TEXTO AZUL, que no es gusto sino medida.
   El boton estaba en coral, y el degradado del hero a la altura de los
   botones ya es coral: medido, el relleno #EE6C4D sobre ese fondo #94605B da
   **1,68:1**. Un boton que apenas se despega del fondo deja de leerse como
   boton, y mas siendo el unico que queda.

   En blanco da **5,14:1**, tres veces mas. Y blanco sobre Azul Capta es el
   par que el manual marca como el estrella. Al quedarse solo tambien crece un
   punto: ya no compite con nadie. */
/* EL RADIO, MEDIDO CONTRA LAS REFERENCIAS. Mariana lo pidio mas redondo y
   pidio mirar a Nintex, Camunda, HubSpot y Salesforce. Medidos sus botones
   principales a 1440:

       Nintex    radio 0 px   ·  alto 43  ·  16px/800
       Camunda   radio 0 px   ·  alto 56  ·  14px/400
       HubSpot   radio 8 px   ·  alto 42  ·  14px/500
       monday    pildora      ·  alto 50  ·  16px/400

   El campo se parte en dos: Nintex y Camunda van CUADRADOS, que es el gesto
   enterprise frio, y monday va en pildora. Capta estaba en 10 px, o sea en el
   medio sin decidirse, que es de donde viene lo de «se ve cuadrado».

   Va a pildora, y no solo porque se pidio: la marca YA usa 99 px de radio en
   el resaltado del titular y en el sello del pie, asi que es coherente hacia
   dentro. Y el registro de Capta —«habla como alguien que conoce tu
   operacion», no como un vendedor— se lleva mejor con monday que con el canto
   vivo de Camunda.

   El alto no se toca: 53 px ya estaba en el rango de las referencias (43-56).
   Lo que sube es el relleno lateral, que una pildora pide mas aire a los
   lados para no verse apretada: 25,6 -> 32 px, el mismo que monday. */
.sec.hero .cta-wrap .btn{background:#FFFFFF;color:var(--azul);
  border-radius:99px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 10px 26px -10px rgba(10,22,38,.55);
  /* UN SOLO TAMANO DE BOTON PRINCIPAL. Medida la pagina entera, habia tres:
     este a 16,8 px, el del cierre a 16 y el de la barra a 15. Entre 16,8 y 16
     no hay diferencia que nadie perciba; solo se nota como descuido. Y con el
     `clamp` pasaba algo peor: en telefono este bajaba a 15,2 y quedaba MAS
     PEQUENO que el del cierre, al reves de lo que toca.
     Fijo en 1rem, igual que `.btn`. El de la barra se queda en 15: una barra
     compacta pide un control mas pequeno, y eso si es una decision. */
  font-size:1rem;
  padding:.85rem 2rem}
.sec.hero .cta-wrap .btn span{color:var(--coral)}
.sec.hero .cta-wrap .btn:hover{background:#FFFFFF;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 16px 34px -12px rgba(10,22,38,.65)}

/* FUERA LAS CIFRAS. Mariana, 24-oct-2026: «quitale los datos numericos».
   Se OCULTAN, no se borran: las tres siguen en index.html y vuelven quitando
   esta linea, o se llevan a otra seccion cuando haga falta. */
.sec.hero .facts{display:none}

/* ── QUE LA MAQUETA NO SE VEA PEGADA ───────────────────────────────────
   Mariana: «no esta bien contrastado el color y la animacion». Medido, el
   problema tiene nombre: la maqueta promedia #EAE8E9 —luminancia 0,842,
   saturacion 0,026— sobre un fondo de luminancia 0,13 a 0,20 y saturacion
   0,301. **No comparte NADA con el fondo**: ni luz, ni tono, ni saturacion.
   Y el fondo ademas no es parejo: 0,163 de saturacion por la izquierda y
   0,440 por la derecha, asi que un canto del panel choca mas que el otro.
   Un panel casi blanco y casi gris sobre un medio tono variable y saturado
   no se lee ni como ventana ni como parte del fondo: se lee como un recorte.

   La salida NO es tocar el panel —es la captura del producto— sino darle un
   suelo: el degradado diagonal se resuelve en el azul profundo que la marca
   ya tiene (--azul-900) justo donde empieza la maqueta. El coral se queda
   arriba, con el titular, que es donde aporta; abajo el panel cae sobre un
   fondo hondo y PAREJO, y pasa a leerse como una ventana encendida.

   El suelo cuelga de `.build`, que es justo la caja de la maqueta, asi que no
   hay ninguna altura que cuadrar. Baja de sobra por debajo y lo tapa el
   blanco de `.trust`, que se pinta despues. */
.sec.hero .build{position:relative;isolation:isolate}
/* FUERA EL PIE DE LA MAQUETA. Mariana: «quita el texto que dice, asi se arma
   un proceso en Capta». Se oculta, no se borra del HTML. */
.sec.hero .build .shot-note{display:none}

/* EL PANEL NECESITA SUELO DEBAJO. Medido antes de ponerlo: el canto inferior
   quedaba a 12 px de donde arranca el relleno blanco de la onda, y los dos
   hilos le pasaban rozando. Sin banda de azul debajo el panel no flota, se
   APOYA en el corte, y eso es lo que se lee como pegado. La onda mide 180 px
   a 1440 y su blanco empieza al 58 % de la banda; esta rampa deja ~90 px de
   azul libres. */
.sec.hero .build{margin-bottom:clamp(70px,11.5vw,190px)}
/* EL CANTO DE LA MAQUETA: LO QUE ES, Y LO QUE NO FUNCIONO. Mariana, dos
   veces: «sobre aliados estrategicos veo una linea que se ve como recta».

   POR QUE NO LA ENCONTRABA. Mi detector pedia filas en las que TODAS las
   columnas saltan igual, de un borde al otro de la pagina. Esta no llega a
   los bordes: va de x=300 a x=1700 de 1440, que es el ancho del panel. Tres
   barridos seguidos dieron «no hay ninguna linea recta» y los tres estaban
   contestando otra pregunta.

   QUE ES. El canto inferior del panel de la maqueta. El margen de aqui
   arriba esta puesto a proposito para que el panel FLOTE y no se apoye en el
   corte, y ese mismo aire es lo que deja su canto a la vista.

   LO QUE PROBE Y HUBO QUE QUITAR: disolver los ultimos 110 px con una
   mascara. Mariana, en cuanto lo vio: «¿que hiciste con el mockup?, se ve
   con un sombreado rarisimo». Y es exacto. El fondo de la maqueta es gris
   muy claro y el del hero es oscuro: al desvanecer uno sobre el otro, los
   110 px no desaparecen, se convierten en una rampa gris de 1.400 px de
   ancho que se lee como una mancha, no como un canto que se va. Una mascara
   solo es invisible cuando los dos fondos se parecen, y aqui son los dos
   extremos de la pagina. */

/* EL TITULAR, AL TAMANO DEL MODELO 04.
   Mariana: «lograr que se vea el texto igual de bien como en el modelo 04,
   que se vea muy bien en pantalla grande». La causa estaba medida: el titular
   del sitio usa `--h1`, que topa en 3.5rem = 56 px y NO crece mas, mientras
   que el de la maqueta es `clamp(28px,4.1vw,70px)` y a 1920 llega a 70. En
   una pantalla grande uno se queda quieto y el otro sigue creciendo.

   Se copia la rampa del diseno tal cual. Y el espaciado entre letras baja de
   -.034em a -.018em: a 56 px aprieta bien, a 70 se come las letras. */
.sec.hero h1{max-width:54rem;font-size:clamp(2rem,4.1vw,4.375rem);
  letter-spacing:-.018em;line-height:1.1}

/* FUERA LA PILDORA DEL RESALTADO. Mariana: «tiene doble espacio y la margen
   no esta bien». El doble espacio era literal: `padding:.02em .44em` metia
   casi media eme a cada lado de la frase, y como la caja es una pildora con
   `border-radius:99px` el hueco se notaba el doble en los extremos.

   El Modelo 04 no usa pildora: pone el titular en peso ligero y resalta con
   negrita. Es mas limpio y resuelve las dos quejas de una. Para volver a lo
   de antes, quitar este bloque. */
.sec.hero h1{font-weight:400}
.sec.hero h1 em{font-weight:800;background:none;box-shadow:none;
  padding:0;border-radius:0;white-space:normal;color:#FFFFFF}

/* EL OSCURECIMIENTO RECORRE LA SECCION ENTERA, NO UNA FRANJA.
   Antes colgaba de `.build` y entraba en 260 px: por corto que fuera el paso,
   se veia el punto donde cambiaba, y eso es lo que Mariana leia como «dos
   fondos». Ahora cuelga de la seccion y va del 18 % al 46 % de su alto —unos
   430 px a 1440—, asi que no hay punto de cambio: el color se hunde.

   Va en `.sec.hero::before`, que es el velo radial que traia el hero y que
   estaba apagado. Queda por debajo de todo: `.build` tiene z-index 5 y la caja
   del texto 6, asi que ni la maqueta ni el titular ni los botones lo pisan. */
/* Y LA CAPA HONDA ES TRANSLUCIDA, no opaca. Si tapa del todo, por abajo se
   pierde el recorrido izquierda-derecha y el hero se parte en dos lecturas:
   arriba de color, abajo plano. Al 78 % el azul y el coral siguen viendose
   por debajo, asi que el degradado se lee de lado a lado A CUALQUIER ALTURA
   y lo unico que cambia bajando es la profundidad. Esa es la armonia que
   faltaba. */
.sec.hero::before{display:block;content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(64,71,89,0) 20%,rgba(64,71,89,.78) 58%)}

/* Y bajo la maqueta, solo el halo: un ovalo ancho y sin borde que levanta el
   fondo justo donde el panel se apoya. Es lo que hace que se lea como una
   ventana ENCENDIDA y no como un recorte sobre un plano. */
.sec.hero .build{position:relative;isolation:isolate}
.sec.hero .build::before{content:"";position:absolute;z-index:-1;
  left:50%;transform:translateX(-50%);width:100vw;
  top:-14%;bottom:-24%;
  background:radial-gradient(112% 58% at 50% 46%,rgba(66,90,119,.55) 0%,transparent 74%)}

/* Y el panel, con un canto claro y una sombra honda: que su borde sea una
   decision y no un corte. */
/* Y el panel, con un canto claro y una sombra honda y ancha, para que el
   borde sea una decision y no un corte. La sombra va mas abierta que la del
   sitio (96 -> 150 px de difuminado) porque sobre color plano una sombra
   corta se ve como un filo; abierta, asienta. */
.sec.hero .build .pshot{border-radius:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,
             0 0 0 1px rgba(255,255,255,.18),
             0 30px 70px -30px rgba(6,14,26,.55),
             0 70px 150px -50px rgba(6,14,26,.9)}

/* EL RESALTADO DE LA SECCION DE PROCESOS, EN CORAL DE TEXTO.
   Mariana pregunto si poner el titular en naranja Capta. El sitio tiene DOS
   corales y la diferencia esta medida: el de marca, #EE6C4D, da 3,05:1 sobre
   blanco —pasa como texto grande por cinco centesimas y se cae en cuanto el
   titular encoge—; el de texto, #A8412A, da 4,90:1 y pasa en todo.

   MARIANA ESCOGIO EL DE MARCA, y a este tamano es una decision sin coste:
   el titular va de 26 a 40 px, siempre por encima de los 24 que la norma
   considera TEXTO GRANDE, y ahi el umbral es 3,0. Con 3,05 pasa en todos los
   anchos. Lo unico que no tiene es margen: si alguna vez ese titular baja de
   24 px, deja de pasar. Con `--coral-texto` habria 1,9 puntos de colchon.

   Y no va la pregunta entera en color: solo el remate, que es el mismo
   recurso del hero con «ejecutandose solos». Asi las dos secciones se leen
   como el mismo sitio. */
.sec.proc .h2 em{font-style:normal;color:var(--coral);
  background:none;box-shadow:none;padding:0;border-radius:0;
  white-space:normal}

/* ── LA CINTA NARANJA DE LA SECCION DE PROCESOS ───────────────────────
   Primero lo hice como un panel que lo envolvia todo y Mariana lo rechazo con
   el motivo exacto: «las tarjetas eran MAS GRANDES que la barra naranja, y eso
   hacia que el diseno se viera original». Mirando el PDF tiene razon y es otro
   recurso: el naranja no es un fondo, es una CINTA mas baja que las tarjetas,
   que pasa por detras mientras ellas sobresalen por arriba y por abajo. Y van
   en zigzag, con borde naranja.

   Tres cosas hacen falta para eso:

   OJO CON EL PORCENTAJE: el carril solo es un poco mas alto que la tarjeta
   —135 px de tarjeta en 199 de carril—, asi que un inset del 19 % dejaba la
   cinta de 123 px contra tarjetas de 135: sobresalian SEIS pixeles y el
   recurso no se veia. Al 27 % la cinta queda en 92 px y la tarjeta sobresale
   22 por arriba y 22 por abajo, que es la proporcion del diseno. Al recortar
   el aire del carril el inset bajo al 23 % para mantener esos 21-26 px.

   1 · AIRE EN EL CARRUSEL. `.vp` tiene `overflow:hidden` y medía exactamente
       lo que la tarjeta, asi que cualquier desplazamiento vertical se
       recortaba. Con relleno arriba y abajo hay sitio para el zigzag sin
       tocar el recorte horizontal, que es el que hace el carrusel.
   2 · LA CINTA, en porcentaje del alto del carril, no en pixeles: asi se
       ajusta sola cuando la tarjeta cambia de alto entre anchos (va de 119 a
       140 px segun la pantalla).
   3 · EL ZIGZAG en `transform`, que no toca la maqueta y por tanto no mueve
       el carrusel ni el calculo de paginas.  */
/* MENOS AIRE ARRIBA. Mariana: «estas dejando demasiado espacio en blanco
   entre el carrusel y la palabra de procesos». Medido eran 61 px desde la
   bajada hasta la primera tarjeta; se quedan en 40. */
.sec.proc .pbox{position:relative;isolation:isolate;
  margin-top:clamp(.4rem,.9vw,.85rem)}

/* El aire que deja sobresalir las tarjetas. */
/* El relleno baja de 32 a 18 px: era la mitad del aire que sobraba arriba.
   Como la cinta se mide en PORCENTAJE del carril, al encoger el carril hay
   que subir el inset del 27 al 23 % para que las tarjetas sigan sobresaliendo
   los mismos 21 px. Las dos cifras van juntas; cambiar una sola descuadra el
   recurso. */
.sec.proc .pbox .vp{padding-block:clamp(12px,1.3vw,18px)}
.sec.proc .pbox .carw{position:relative}

/* LA CINTA. Mas baja que las tarjetas, y SE VA POR EL BORDE DERECHO.
   Mariana: «desde la parte derecha siempre deberia estar ese borde con ese
   fondo naranja». En la maqueta la banda no termina: el extremo izquierdo va
   redondeado y el derecho se sale del lienzo por detras de la foto. Aqui se
   hace igual, y por eso el redondeo es solo de un lado.

   Para llegar al borde a cualquier ancho se estira `-100vw` y deja que la
   seccion la corte: `.sec` ya lleva `overflow:hidden`, asi que no hay nada
   que calcular ni ningun desborde que arreglar. Antes se quedaba a 112 px del
   borde con un `clamp` fijo que nunca iba a acertar en todas las pantallas. */
.sec.proc .pbox .carw::before{content:"";position:absolute;z-index:-1;
  left:calc(-1 * clamp(14px,3.2vw,56px));
  right:-100vw;
  top:23%;bottom:23%;
  border-radius:clamp(12px,1.6vw,22px) 0 0 clamp(12px,1.6vw,22px);
  background:linear-gradient(104deg,var(--coral) 0%,#E25C3E 100%);
  box-shadow:0 18px 40px -26px rgba(201,74,46,.7)}

/* SIN ZIGZAG. Lo monte porque la maqueta lo trae, y Mariana lo descarto:
   «se ve mejor todos ordenaditos y rectos, asi se ve raro». Tiene sentido y la
   diferencia esta en el contenido: en la maqueta el zigzag ordena una
   SECUENCIA —01 arriba, 02 abajo, 03 arriba— y el salto ayuda a seguir el
   recorrido. Aqui son siete procesos sin orden entre si, asi que el salto no
   significa nada y solo desalinea. Lo que si se queda es lo otro que pedia:
   la cinta mas baja que las tarjetas. */

/* Las tarjetas recuperan su borde coral —en la maqueta lo llevan— y una
   sombra que las despega de la cinta. */
.sec.proc .pbox .tile{border-color:var(--coral);
  box-shadow:0 12px 26px -14px rgba(120,40,22,.45)}
.sec.proc .pbox .tile.on{border-color:var(--azul);
  box-shadow:0 16px 32px -14px rgba(120,40,22,.55)}
/* «Ver como funciona» siempre a la vista: ahora la tarjeta si lleva alli. */
/* FUERA «VER COMO FUNCIONA». Mariana, 25-oct-2026: «quitaria el texto que
   dice ver como funciona, dejaria literal el cuadradito, el icono y el texto
   de que proceso es; busca la manera de que sea mas llamativo para que la
   gente haga clic».

   Tiene razon y el renglon sobraba por dos motivos. Uno: desde que la
   tarjeta lleva a su pagina de un solo clic, ese texto repetia en pequeño lo
   que la tarjeta entera ya hace. Dos: iba en naranja de texto, que es el
   segundo naranja que ella caza en la pagina.

   Se oculta, no se borra: lo pinta el guion del carrusel y seguira
   pintandolo, asi que nada mas se entera.

   LO LLAMATIVO PASA AL NOMBRE, que es lo unico que queda. De 13 px/600 al
   90 % de opacidad sube a 15 px/700 opaco: es el unico texto de la tarjeta,
   asi que puede ocupar el sitio que dejo el renglon en vez de seguir
   encogido como si compartiera. Y gana una flecha que entra al pasar por
   encima —no escrita en el HTML, puesta desde aqui—, que da el aviso de
   «esto lleva a algun sitio» sin gastar una linea de texto. */
.sec.proc .pbox .tile .tgo{display:none}
/* Y EL CONTENIDO SE CENTRA. Sin el renglon, el icono y el nombre se
   quedaban pegados arriba y sobraba justo el hueco que ocupaba el texto
   que se fue. El alto de la tarjeta no se toca —la cinta naranja se
   dimensiona como un porcentaje del riel y encogerlas la descuadraria—,
   asi que lo que se reparte es el aire de dentro. De paso iguala las de
   un renglon con las de dos: «Compras» y «PQRS y atencion al cliente» ya
   no se leen como dos tarjetas distintas. */
.sec.proc .pbox .tile{justify-content:center}
/* «CUENTANOSLO», EN EL NARANJA DE MARCA. Mariana, 25-oct-2026, señalando los
   naranjas que no eran el de Capta. Este iba en `--coral-texto`. Mide 12 px,
   que es texto normal y pediria 4,5:1, y el coral de marca da 3,05 sobre
   blanco. Va en el de marca porque es lo que ella pide y porque la decision
   sobre el coral ya esta tomada; queda escrito para no volver a medirlo
   creyendo que es un fallo nuevo. */
.sec.proc .pbox .tile.ask .go{color:var(--coral)}

/* ══ EL CIERRE: 281 PX DE VACIO DENTRO DE LA COLUMNA ══════════════════════
   Mariana, 25-oct-2026: «hay mucho espacio entre el nodo y el texto en la
   parte de la izquierda, y no se como solucionarlo sin que afecte el movil».

   Medido a 1440, la tarjeta es una rejilla de dos columnas, 677 px para el
   texto y 280 para el dibujo, con 48 de hueco. Pero DENTRO de esos 677 el
   contenido mas ancho son 396:

       rotulo  677     titular 346     bajada 396
       boton   218     letra chica 317

   Son 281 px de columna vacia, mas los 48 del hueco: 329 px de nada entre el
   texto y el nodo. El hueco de la rejilla no era el problema; el problema era
   que la columna se habia reservado un sitio que su contenido no usa.

   Se arregla por los dos lados. El texto deja de tener una columna elastica y
   pasa a una medida de lectura fija —34 rem, unos 70 caracteres por linea,
   que es lo comodo—, y el dibujo crece de 280 a 360, que ademas se agradece
   porque a 280 el nodo con sus seis satelites se veia pequeño para lo que
   cuenta.

   EN MOVIL NO CAMBIA NADA, que era su preocupacion: por debajo de 900 px la
   tarjeta ya se apila en una sola columna —medido: `grid-template-columns`
   da `278px` a 390 y `695px` a 834—, asi que esta regla solo entra donde
   hay dos columnas que repartir. */
/* SEGUNDA PASADA, PORQUE LA PRIMERA SOLO ARREGLO MEDIO PROBLEMA. Mariana:
   «esto solo corrige el nodo de conexion, pero dejas mucho espacio en la
   parte derecha». Y era verdad: yo habia arreglado la columna del TEXTO y me
   quede ahi. El sobrante se habia mudado a la otra columna.

       columna del dibujo ....... 360 px
       dibujo dentro ............ 220 px   (`.ctafig{max-width:220px}`)
       muerto ................... 140 px, centrados, 70 a cada lado

   Mas el sobrante de la propia tarjeta: 544 + 48 + 360 = 952 de los 1.005
   que hay, y esos 53 caian todos a la derecha porque una rejilla sin
   `justify-content` amontona a la izquierda.

   Dos cambios y no queda nada suelto. La columna del dibujo pasa de 360 fijos
   a `1fr`, asi que se queda con TODO lo que sobre en vez de dejarlo fuera; y
   el dibujo pierde su tope de 220 para llenarla. El nodo con sus seis
   satelites gana tamaño, que ademas se agradece: a 220 px se leia pequeño
   para ser la unica imagen del cierre. */
@media(min-width:901px){
  .sec.final .ctacard{grid-template-columns:minmax(0,34rem) 1fr}
  /* QUITAR EL TOPE NO BASTA: HAY QUE DECIRLE QUE LLENE. Con `max-width:none`
     la columna paso a 413 px pero el dibujo se quedo en 280, que es el ancho
     propio de su `viewBox`, y los 133 px que sobraban siguieron ahi. Un SVG
     no crece por quitarle un maximo; crece cuando se le da un ancho. */
  .sec.final .ctafig{max-width:none;width:100%}
  .sec.final .ctafig svg{width:100%;height:auto;display:block}
}
/* Y EL TEXTO LLENA SU COLUMNA. Con la rejilla arreglada seguian sobrando
   148 px, y era el mismo vicio del acordeon de preguntas: DOS TOPES
   PELEANDOSE. La bajada y la letra chica llevan `max-width:44ch` de cuando
   la columna era elastica, y 44 caracteres son 396 px: el texto se paraba
   ahi aunque tuviera 544 de sitio.

   El tope de la columna ya hace ese trabajo y lo hace mejor: 34 rem a 15 px
   son unos 65 caracteres por linea, que es medida comoda de lectura; 44 era
   una columna de periodico. Se quita el de dentro y manda el de fuera.

   En movil no aplica: ahi la tarjeta es de una columna y el ancho lo pone la
   pantalla. */
@media(min-width:901px){
  .sec.final .fsub,.sec.final .micro{max-width:none}
}

/* ══ LAS CITAS, SIN NADA DE NEGRILLA ══════════════════════════════════════
   Mariana, 25-oct-2026: «los textos de los testimonios los dejaria en Nunito
   pero light, muy suave, sin nada de negrilla».

   NUNITO LIGHT NO EXISTE EN ESTE SITIO, y conviene saberlo antes de pedirlo.
   La fuente va alojada aqui —`tipos/nunito-latin.woff2`— y es una variable
   cuyo eje de peso EMPIEZA EN 400. Medido en el navegador con el mismo texto
   a 60 px:

       200 ... 962,88     500 ... 970,97
       300 ... 962,88     600 ... 979,05
       350 ... 962,88     700 ... 998,47
       400 ... 962,88     800 ... 1019,89

   Los cuatro primeros miden IGUAL: pedir 300 no adelgaza nada, el navegador
   lo recorta a 400. Para un Light de verdad hay que servir otro archivo de
   fuente, y eso pesa en las veinte paginas y se decide aparte.

   Asi que se hace lo que si se puede: la cita iba a 600 —que es lo que ella
   lee como negrilla— y baja a 400, el mas ligero que hay. El color pasa de
   Azul Capta a un azul medio y la interlinea se abre: las dos cosas aflojan
   el bloque sin tocar el peso, que es de donde sale la sensacion de «suave».
   #5A7392 sobre blanco da 4,88:1 y sigue pasando la AA de texto normal.

   OJO: la regla que ya existia apuntaba a `blockquote p` y no servia de
   nada, porque el guion de testimonios no pinta ningun <p> dentro de la
   cita. El peso vive en el propio blockquote. */
.sec.tst blockquote{font-weight:400;color:#5A7392;line-height:1.75}

.sec.proc .pbox .tile .lb{font-size:.9375rem;font-weight:700;opacity:1;
  color:var(--azul)}
/* LA FLECHA VA LITERAL, NO COMO ESCAPE. La primera version la escribi
   como `content:" \2192"` y Python se comio `\21` como escape OCTAL:
   en la hoja acabo saliendo un caracter de control y un «92» suelto, y
   eso es lo que Mariana vio aparecer al pasar el raton por las
   tarjetas. Con el caracter puesto tal cual no hay ninguna capa que
   pueda interpretarlo mal. */
.sec.proc .pbox .tile .lb::after{content:" →";color:var(--coral);
  opacity:0;display:inline-block;
  transition:opacity var(--base) var(--ease),transform var(--base) var(--ease)}
.sec.proc .pbox .tile:hover .lb::after,
.sec.proc .pbox .tile:focus-visible .lb::after{opacity:1;transform:translateX(3px)}

/* LAS FLECHAS, SOLO EL SIGNO. Mariana: «mas sutiles, solo el cosito blanco y
   ya, para no afectar el diseno». Fuera el circulo blanco y la sombra; queda
   la flecha sola sobre la cinta. Blanco sobre el coral da 3,05:1, que es lo
   que la norma pide para un control que no es texto (3:1). Al pasar el cursor
   aparece un disco muy tenue, que es lo que avisa de que se puede pulsar. */
.sec.proc .pbox .arw{background:transparent;color:#FFFFFF;
  border-color:transparent;box-shadow:none}
.sec.proc .pbox .arw:hover,
.sec.proc .pbox .arw:focus-visible{background:rgba(255,255,255,.22);
  color:#FFFFFF}
/* Los puntos quedan DEBAJO de la cinta, sobre blanco: siguen en coral. Lo
   unico que cambia es el area de pulsado: median 8x8 y la WCAG 2.2 pide 24
   (criterio 2.5.8). Con `background-clip:content-box` el punto se sigue
   viendo de 8 px y el boton pasa a 24. */
.sec.proc .pbox .dotsnav button{width:24px;height:24px;padding:8px;
  background-clip:content-box;border-radius:50%;box-sizing:border-box}
.sec.proc .pbox .dotsnav button.on{width:38px;background-clip:content-box;
  border-radius:99px}

/* El aviso de «Desliza» cae sobre la cinta, asi que va invertido: chip
   blanco en vez de coral sobre coral.
   LA PALABRA, EN AZUL CAPTA (26-oct). Mariana, mirandolo en el telefono:
   «ese texto de desliza deberia estar en azul Capta». Estaba en
   --coral-texto porque a 12 px el coral de marca no llega a los 4,5 que
   pide la norma; el azul da 7,08:1 y cierra el problema en vez de rodearlo.
   La flecha si se queda coral: un icono no es texto y le basta con 3,0. */
/* Y AL SUELO DE 12 PX COMO TODO LO DEMAS. Al recuperar el aviso volvio a
   entrar a 11 px, que es justo lo que se corrigio en el resto de la pagina.
   Es la unica instruccion que recibe quien usa el carrusel en telefono: si
   algo tiene que leerse, es esto. */
.sec.proc .pbox .pista{background:#FFFFFF;color:var(--azul);opacity:1;
  font-size:.75rem;
  box-shadow:0 6px 16px -8px rgba(120,40,22,.6)}

/* FUERA EL RENGLON DE AYUDA. Mariana: «quita esos textos que dicen pasa solo
   y no se que». Es la linea de debajo del carril —«Pasan solos · se detienen
   al pasar el cursor · o navega con las flechas»—: explicaba el carrusel en
   lugar de dejar que se entienda solo, que es justo lo que los documentos de
   la casa marcan como evitable («explicar cuando se puede simplemente
   nombrar»). Las flechas y los puntos ya dicen lo que hay. */
.sec.proc .pbox .pfoot,
.sec.proc .pfoot{display:none}

/* FUERA EL DESGLOSE. Con la tarjeta llevando ya a su pagina, el resumen
   repetia lo que abre esa pagina. Se oculta; el guion lo sigue pintando. */
.sec.proc .pbox .pdet{display:none}

/* EL AVISO DE «DESLIZA» SE ME MOVIO SOLO, y es culpa de la cinta. Esta en
   `position:absolute` y antes se anclaba a un antepasado lejano porque `.carw`
   era `static`. Al hacer `.carw` relativo para colgar la cinta, el aviso paso
   a anclarse a el y aparecio encima de las tarjetas. Se recoloca a mano: abajo
   a la derecha, en el aire que queda entre la cinta y los puntos, que estan
   centrados. Ahi no tapa ninguna tarjeta ni flota suelto sobre blanco. */
.sec.proc .pbox .pista{top:auto;bottom:-6px;right:2px}

/* ── PANTALLA ANGOSTA ──────────────────────────────────────────────────
   Con dos tarjetas a la vista, la cinta apenas asomaba entre ellas y se
   escapaba por los bordes de la pantalla. Sube de alto, se queda dentro del
   ancho de la columna —asi se le ven los extremos redondeados— y el zigzag
   baja para que nada se salga del aire del carril. */
/* ── EN CELULAR LA CINTA NO FUNCIONA, Y SE CAMBIA DE RECURSO ───────────
   Mariana: «me preocupa como se ve ese fondo naranja en movil». Mirado de
   cerca, tenia razon: la cinta solo asomaba en astillas entre las tarjetas.

   Y el motivo no se arregla afinando numeros. El recurso «banda MAS BAJA que
   las tarjetas» necesita sitio HORIZONTAL para que la banda se lea entre
   ellas: en escritorio se ven seis tarjetas con sus huecos, en 390 px caben
   2,5 y tapan casi todo. El recurso es de escritorio.

   Asi que en celular se cambia la proporcion, no el color: el naranja pasa a
   ser un bloque que CONTIENE las tarjetas, con su relleno y sus esquinas
   redondeadas. Mismo color y misma familia; otra forma para otro lienzo.

   EL AVISO DE «DESLIZA» VUELVE. Mariana, 25-oct-2026: «me gustaba mas
   cuando era menu navegable, tal cual como en el computador, que se va
   deslizando. Pero en el celular tenia el cosito que decia desliza. Se veia
   mas armonico».

   Lo quite porque se salia medio por el borde y caia encima de una tarjeta,
   pero eso era un problema de SITIO, no del aviso. La causa: lo coloca una
   regla de escritorio —`bottom:-6px;right:2px`— y en telefono el carril va a
   sangre, asi que ese `right:2px` cae en el canto de la pantalla.

   Aqui se recoloca para el telefono: separado del borde lo que separa al
   resto de la pagina, y mas abajo, para que caiga en el aire que queda entre
   el bloque naranja y los puntos en vez de sobre una tarjeta. */
@media(max-width:700px){
  /* A sangre y sin esquinas: en un telefono el carril ya ocupa todo el
     ancho, asi que redondear no se veria y solo dejaria dos muescas. */
  .sec.proc .pbox .carw::before{left:0;right:0;top:-20px;bottom:-20px;
    border-radius:0}
  .sec.proc .pbox .vp{padding-block:0}
  .sec.proc .pbox{margin-top:clamp(1rem,3vw,1.5rem)}
  .sec.proc .pbox .pista{display:flex;bottom:-34px;right:var(--pad);
    top:auto;left:auto}
  /* Sobre el bloque, el borde coral de la tarjeta se pierde: pasa a blanco. */
  .sec.proc .pbox .tile{border-color:#FFFFFF}
}

/* ── LOS FONDOS SUAVES DEL MODELO 04 ──────────────────────────────────
   Mariana: «todos son colores de Capta aqui en el mockup, pero son como mas
   suaves; me gustaria que se viera asi, armonico en todo el home».

   Los tonos NO estan puestos a ojo: se renderizaron tres zonas del PDF y se
   contaron los pixeles de fondo claro y poco saturado. Salen dos familias y
   se alternan a lo largo de la pagina:

       calidos  #FCF3F0 · #FCF0ED · #FCF6F3   (tono 11-20°, sat .04-.06)
       frios    #EAEDF0 · #F0F3F6 · #E7EAF0   (tono 209-220°, sat .02-.04)

   Y aqui esta lo bueno: el calido de la maqueta, #FCF3F0, es practicamente el
   `--rosa` que el sitio YA tiene, #FDF2EF. No hay que inventar paleta: la
   maqueta usa los colores de Capta rebajados, que es justo lo que ella decia.

   La alternancia frio/calido es lo que da el ritmo. Una pagina entera en
   blanco no tiene respiracion, y una entera teñida cansa. */
/* ── UN SOLO RITMO VERTICAL ────────────────────────────────────────────
   Esta regla ya estuvo puesta una vez y la perdi al reescribir el bloque para
   el lienzo. Es la CUARTA vez que una sustitucion ancha se lleva algo por
   delante en este archivo, y la guarda no la caza si la regla no esta en la
   lista de imprescindibles. Esta ya lo esta.

   Medido antes: del final de Procesos al titular de Plataforma habia 195 px a
   1440 y 177 a 390, porque `.eco` trae su propio `padding:5.5rem 0 7rem`.
   Una sola medida para las cinco, y mas apretada que la anterior. */
.sec.proc,.sec.eco,.sec.tst,.sec.faq,.sec.final{
  padding-block:clamp(1.8rem,3.1vw,2.8rem)}

/* ── UN SOLO LIENZO DETRAS DE LAS CUATRO SECCIONES DE ABAJO ───────────
   Mariana: «ese fondo es lo que quiero que vaya desde "todo lo que necesitas"
   hasta "empieza por el proceso que mas te duele hoy"».

   MI ERROR ERA DE DIAGNOSTICO. Yo pintaba cada seccion de un color plano
   —gris frio, blanco, rosa— y las cosia con curvas. Medido el PDF en ese
   tramo, el fondo real es:

       #FFFFFF · #FFFFFF · #FEF9F8 · #FEFBFA · #F1F3F6 · #FBF7F7 · #FFFFFF

   Blanco con NUBES de color muy tenues flotando encima, de saturacion 0,012
   a 0,024. Nunca una banda de color plano. Por eso las bandas se veian
   pegadas y las costuras cantaban: no habia nada que coser.

   Los alfas no son a ojo. El coral al 5 % sobre blanco da #FEF5F3 y el azul
   al 7 % da #F1F3F6, que es EXACTAMENTE el tono frio que trae el PDF. */
.lienzo{position:relative;isolation:isolate;background:#FFFFFF}

/* LA ENTRADA AL LIENZO: UN SOLO BORDE, Y ES LA CURVA.

   Antes eran dos piezas: `::after` dibujaba una onda rellena de #EDF2F8 plano
   colgada encima, y `::before` pintaba el fondo de verdad empezando en el
   borde del lienzo. Pero el fondo NO empieza en ese color —arranca en
   #E6EAEE y ademas lleva nubes calidas que lo cambian a lo ancho—, asi que
   justo debajo de la onda aparecia la linea recta donde se encontraban los
   dos. Mariana lo vio en una captura: «se ve curva y a la vez se ve recto».

   Y no tenia arreglo por el color: el lienzo cambia de izquierda a derecha,
   asi que ningun relleno plano podia coincidir en todo el ancho.

   Ahora hay una sola capa. El fondo se estira `--onda` hacia arriba y se
   recorta con la onda: arriba la mascara tiene la forma de la curva, del
   resto hacia abajo es un rectangulo opaco. El +1px del segundo tramo evita
   el pelo de un pixel que queda si los dos se tocan justos.

   Se queda `-webkit-mask` al lado del estandar: Safari lo pide. */
.lienzo{position:relative;isolation:isolate;background:#FFFFFF}
.lienzo::before{content:"";position:absolute;left:0;right:0;bottom:0;
  top:calc(-1 * var(--onda));z-index:-1;pointer-events:none;
  background:
    /* Una banda ancha arriba, para que ENTRAR al lienzo se note: entre una
       seccion blanca y un lienzo casi blanco no habia ningun cambio que ver,
       que es lo que Mariana echaba de menos.

       Y EL RESTO, AL TRIPLE. Mariana, 25-oct-2026: «revisa que esto si tenga
       fondo y el degradado, que toda esa seccion si se integre con el
       degradado naranja y azul clarito de capta». Fui a medirlo antes de
       discutirlo y tenia razon: muestreado a nueve alturas y tres columnas,
       el fondo daba #FEFCFB, #FFFFFF, #F6F6F8, #FEFAF9… o sea blanco. Las
       nubes estaban al 5-7 %, y al 5 % sobre blanco la diferencia es de 1 a
       5 puntos de RGB. Eso no es sutil: es nada.

       Venia de medir el PDF, donde el fondo es blanco con nubes al 1-2 % de
       saturacion. El dato era bueno pero la conclusion no: en el PDF esas
       nubes se ven porque la pagina es pequena y el ojo recorre todo el
       fondo de un vistazo; estiradas sobre 3.249 px de alto desaparecen. */
    linear-gradient(180deg,rgba(61,90,127,.13) 0,transparent 420px),
    radial-gradient(62% 22% at 14% 4%,rgba(238,108,77,.15),transparent 70%),
    radial-gradient(54% 18% at 92% 20%,rgba(61,90,127,.16),transparent 72%),
    radial-gradient(70% 20% at 22% 42%,rgba(238,108,77,.14),transparent 70%),
    radial-gradient(56% 17% at 88% 62%,rgba(61,90,127,.15),transparent 72%),
    radial-gradient(66% 20% at 28% 82%,rgba(238,108,77,.15),transparent 70%),
    radial-gradient(50% 16% at 80% 96%,rgba(61,90,127,.13),transparent 72%),
    #FFFFFF;
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'><path fill='%23fff' d='M0,120 L0,60 C320,10 640,10 960,60 C1280,110 1600,110 1920,60 L1920,120 Z'/></svg>"),linear-gradient(#000,#000);
          mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'><path fill='%23fff' d='M0,120 L0,60 C320,10 640,10 960,60 C1280,110 1600,110 1920,60 L1920,120 Z'/></svg>"),linear-gradient(#000,#000);
  -webkit-mask-size:100% var(--onda),100% calc(100% - var(--onda) + 1px);
          mask-size:100% var(--onda),100% calc(100% - var(--onda) + 1px);
  -webkit-mask-position:top center,bottom center;
          mask-position:top center,bottom center;
  -webkit-mask-repeat:no-repeat,no-repeat;
          mask-repeat:no-repeat,no-repeat}

/* Y SITIO PARA QUE LA ONDA CAIGA. Mariana, 25-oct-2026: «en movil esa curva
   esta haciendo que se pierda el efecto del fondo naranja y lo de las
   cajitas de procesos». Medido, y no era solo en movil: la onda arrancaba
   ENCIMA del panel naranja en TODOS los anchos.

       SE 375    -3 px        iPad horiz  -10 px
       tel 390   -3 px        escritorio  -13 px
       iPad vert -5 px        televisor   -25 px

   El lienzo lleva `position:relative`, asi que su capa pinta por encima de
   la seccion anterior, que es estatica, y la onda caia sobre los ultimos
   pixeles del panel. Cuanto mas ancha la pantalla mas alta es y mas se
   comia.

   Se arregla por abajo: la seccion de procesos reserva el alto de la onda
   mas 12 px de respiro, con la MISMA variable que usa la mascara. Si un dia
   cambia el alto, esto se mueve solo. */
.sec.proc{padding-bottom:calc(clamp(1.8rem,3.1vw,2.8rem)
  + var(--onda) + 12px)}
/* PERO SOLO DONDE DE VERDAD HAY ONDA. Al llevar el panel de procesos a
   construccion (26-oct) aparecieron 134 px de blanco entre los puntos del
   carrusel y la seccion azul de abajo. No era el panel: era esta reserva.
   En el home el hermano siguiente es `.lienzo` y su onda sube a ocupar ese
   hueco; en construccion el siguiente es `.sec.caps`, asi que la reserva
   queda vacia. Medido: 134 px a 1440 y 81 a 390, en las dos paginas.

   Va escrita EN NEGATIVO —quitar la reserva donde NO sigue un lienzo— y no
   al reves, por como falla. Si un navegador no entendiera `:has()`, toda la
   regla se cae: con esta forma el home conserva su reserva y construccion
   se queda con un hueco de mas, que es feo pero inofensivo. Al reves, el
   home perderia la clearance y la onda volveria a comerse el panel. */
/* Y EL RELLENO DE ABAJO ES MAYOR EN TELEFONO QUE EN ESCRITORIO, que suena
   al reves y no lo es. Mariana: «en mobile la cinta esta muy pegada a la
   siguiente seccion, pero en PC hay demasiados espacios». Medida la
   distancia de la ultima tarjeta al final de la seccion: 104 px a 1440 y
   29 a 390 —casi cuatro veces—.

   El motivo es que en escritorio, debajo del carrusel, hay una FILA DE
   PUNTOS que ocupa 60 px y hace de respiro; en telefono las tarjetas se
   apilan, la fila no queda debajo, y lo unico que separa es el relleno. O
   sea que el mismo relleno produce dos aires muy distintos segun si hay
   algo mas abajo o no. Por eso aqui el numero se invierte: 20 px en
   escritorio y 78 en telefono dejan los dos aires en unos 80. */
.sec.proc:not(:has(+ .lienzo)){padding-bottom:1.25rem}
/* EL CORTE VA EN 700 px, QUE ES EL DE LA PAGINA, y lo puse mal dos veces
   antes de ir a buscarlo. Primero 880, suponiendo que la fila de puntos se
   iba con la maqueta de tableta; luego 720, por un barrido mio de anchos de
   40 en 40. El bueno estaba escrito en la propia pagina: la regla que
   esconde flechas y puntos vive en `@media(max-width:700px)`.

   Lo que cuesta equivocarse aqui: entre el corte que yo pusiera y el de
   verdad quedaba una franja con LAS DOS COSAS —la fila de puntos Y el
   relleno grande— y el hueco se iba a 152 px, el doble de lo que queria
   arreglar. Si algun dia se mueve ese 700, hay que mover este. */
@media(max-width:700px){
  .sec.proc:not(:has(+ .lienzo)){padding-bottom:4.9rem}
}

/* Las cuatro dejan de tener fondo propio: el lienzo lo lleva por ellas. */
.lienzo .sec.eco,.lienzo .sec.tst,
.lienzo .sec.faq,.lienzo .sec.final{background:transparent}
.lienzo .sec.eco{color:var(--azul)}
.lienzo .sec.eco .h2,.lienzo .sec.eco h2,
.lienzo .sec.tst .h2,.lienzo .sec.tst h2{color:var(--azul)}
/* UN SOLO CUERPO DE TEXTO EN LAS TARJETAS. Mariana: «no se si es cosa mia o
   hay cosas que tienen mas texto o tamanos diferentes». No era cosa suya.
   Medido en las seis tarjetas:

       grande      titulo 23 px · parrafo 14 px / peso 400
       conectado   titulo 18 px · parrafo 14 px / peso 600  ← el raro
       las otras   titulo 18 px · parrafo 13 px / peso 400

   Tres tamanos de cuerpo y dos pesos, sin que la diferencia signifique nada.
   El peso 600 en una sola tarjeta es lo que mas canta: parece que ese texto
   es mas importante y no lo es.

   Queda un solo cuerpo —14 px, peso 400— y dos niveles de titulo, 23 para la
   grande y 18 para las cinco pequenas, que esa jerarquia si es deliberada. */
.lienzo .sec.eco .bento6 .bc p{font-size:14px;font-weight:400;line-height:1.6}

/* Las tarjetas blancas necesitan separarse del lienzo, que ya no es gris. */
.lienzo .sec.eco .bento6 .bc{box-shadow:0 18px 40px -28px rgba(31,45,63,.42);
  border:1px solid rgba(61,90,127,.10)}
.lienzo .sec.eco .bento6 .bc.acc{border-color:transparent}

/* Y FUERA LAS COSTURAS. Con un lienzo continuo no hay dos fondos que unir:
   una curva ahi solo dibujaria una linea donde no hay cambio. */
.lienzo .sec.eco::after,.lienzo .sec.tst::after,
.lienzo .sec.faq::after,.lienzo .sec.final::after{display:none}

/* ── DOS ROTULOS QUE SE ME QUEDARON EN EL CORAL DE MARCA ───────────────
   Estaban sobre fondo oscuro, donde el coral brillante funciona; al pasar el
   fondo a claro quedaron en 3,05:1 y 2,58:1, cuando a 12-13 px se piden 4,5. */
.sec.tst .eyebrow{color:var(--coral-texto)}
.sec.faq .qi7[data-open="1"] .qh .ch7{color:var(--coral-texto)}

/* ── TESTIMONIOS, COMO EN LA MAQUETA ──────────────────────────────────
   Su firma visual es una COMILLA GIGANTE en gris muy palido detras de las
   tarjetas: es lo que hace que la seccion se lea como una cita y no como dos
   recuadros de texto. Va en pseudo-elemento, asi que ningun lector de
   pantalla la lee.

   LO QUE NO COPIE: la maqueta apila tres avatares SUELTOS a la izquierda.
   Aqui cada avatar se queda en su tarjeta, junto al nombre y el cargo; estas
   atribuciones estan autorizadas una por una y no conviene aflojar el vinculo
   entre quien lo dijo y lo que dijo. */
.sec.tst .wrap.inner{position:relative;isolation:isolate}

/* ── LOS TRES DISCOS, EN DIAGONAL ─────────────────────────────────────
   En la maqueta bajan hacia la derecha, de menor a mayor. Van en porcentajes
   del alto de la caja para que la diagonal se mantenga cuando la seccion
   cambia de alto entre anchos. */
.sec.tst .tdeco{position:absolute;z-index:-1;left:0;top:clamp(92px,11vw,180px);
  width:clamp(150px,19vw,290px);height:clamp(150px,19vw,290px);
  pointer-events:none}
.sec.tst .tav{position:absolute;border-radius:50%;display:grid;
  place-items:center;color:#FFFFFF;
  box-shadow:0 14px 30px -16px rgba(31,45,63,.4)}
.sec.tst .tav svg{width:44%;height:44%}
.sec.tst .tav.t1{width:30%;height:30%;left:22%;top:0;background:var(--azul-2,#5A7392)}
.sec.tst .tav.t2{width:40%;height:40%;left:40%;top:26%;background:var(--coral)}
.sec.tst .tav.t3{width:52%;height:52%;left:4%;top:48%;background:var(--azul)}

/* Las tarjetas se corren a la derecha para dejarle sitio a la diagonal. Por
   debajo de 980 px la decoracion sale: en una columna estrecha solo robaria
   espacio a las citas. */
@media(min-width:981px){
  .sec.tst .tgrid{margin-left:clamp(120px,15vw,250px)}
}
@media(max-width:980px){
  .sec.tst .tdeco{display:none}
}

/* FUERA LA COMILLA. Mariana: «esa C que esta de fondo no me gusta». Y tiene
   razon en lo que ve: a ese tamano y con esa tipografia, la comilla de apertura
   se lee como una C, no como una comilla. En la maqueta funciona porque son
   DOS comillas juntas y con otra forma; una sola y gigante se convierte en una
   letra suelta detras del texto. Fuera.

   Los discos en diagonal se quedan: ese si es el peso visual que da caracter a
   la seccion, y no se confunde con nada. */

/* LA SOMBRA ERA DEMASIADO. Estaba al 55 % de opacidad y a 48 px de
   difuminado: en una tarjeta blanca sobre un lienzo casi blanco eso se lee
   como una mancha gris debajo, no como profundidad. Baja a la mitad. */
.sec.tst blockquote{box-shadow:0 14px 30px -22px rgba(31,45,63,.28);
  border-color:rgba(61,90,127,.09)}

/* LAS CITAS, EN REDONDA. Mariana: «los textos los estas poniendo en negrilla,
   yo los pondria normal». Estaban en peso 600 —casi negrita— y una cita larga
   en semibold se lee pesada y mas lenta. Peso 400, que es como se lee un
   testimonio. */
.sec.tst blockquote p{font-weight:400}

/* EL TITULAR, CON AIRE SOBRE LOS DISCOS. Mariana: «esta como muy al borde de
   los iconos». Baja el peso de 700 a 600 —sigue mandando, pero deja de
   competir con la diagonal— y se le da sitio por debajo. */
/* EL TITULAR DE TESTIMONIOS, CENTRADO Y MAS PEQUENO. Idea de Mariana, y
   funciona por una razon concreta: debajo la composicion es ASIMETRICA —los
   discos a la izquierda, las tarjetas a la derecha—, asi que un titular
   alineado a la izquierda se apoya en el lado que ya pesa y desequilibra mas.
   Centrado hace de eje y reparte. De 40 px baja a 32. */
/* Y A DOS LINEAS. Mariana, 25-oct-2026: «en vez de dejar tres lineas asi,
   podrian funcionar siendo dos». Lo que lo partia en tres era el `24ch`: el
   titular tiene 67 caracteres y en 24 no caben en menos de tres renglones,
   midiera lo que midiera la pantalla —tres lineas a 375 y tres a 2560—.
   A 38ch caben en dos, y `text-wrap:balance` reparte las palabras para que
   los dos renglones queden parecidos en vez de uno largo y otro corto.
   En telefono no cambia nada: ahi manda el ancho de la columna, no el
   maximo, asi que sigue partiendo donde ya partia. */
.sec.tst .h2{font-weight:600;text-align:center;margin-inline:auto;
  max-width:38ch;text-wrap:balance;
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2rem);
  margin-bottom:clamp(1.8rem,3.6vw,3rem)}

/* «ALIADOS ESTRATEGICOS», CON PESO. Mariana: «en el PDF tiene mayor peso
   visual, y al fin y al cabo son los logos de los clientes». Estaba como una
   etiqueta diminuta en versalitas; pasa a titulo pequeno: mas cuerpo, menos
   espaciado entre letras y en Azul Capta en vez de gris. */
.inner.trust .lbl{font-size:clamp(1.05rem,.72rem + .62vw,1.35rem);
  font-weight:700;letter-spacing:-.01em;text-transform:none;
  color:var(--azul);opacity:1;
  margin-bottom:clamp(1.1rem,2.2vw,1.8rem)}

/* FUERA LOS ROTULOS DE SECCION. Mariana: «quita los titulares que dicen
   Plataforma, Procesos, Clientes, Preguntas frecuentes; siento que no nos
   estan aportando mucho». Y es verdad: cada uno repite lo que el titular de
   debajo ya dice, en letra mas pequena y en mayusculas. La maqueta no lleva
   ninguno. Se ocultan, no se borran del HTML. */
.sec.proc .eyebrow,
.sec.eco .eyebrow,
.sec.tst .eyebrow,
.sec.faq .eyebrow{display:none}

/* ══ LOS TITULARES DEL LIENZO, UNO SOLO ══════════════════════════════════
   Mariana, 25-oct-2026, sobre preguntas frecuentes: «ahi no respira casi,
   falta algo, hay algo que no estamos viendo». Medido, lo que no se veia son
   los titulares de las cinco secciones seguidas:

       Procesos      40 px / 700 / izquierda
       Plataforma    40 px / 700 / centro
       Testimonios   32 px / 600 / centro
       Preguntas     40 px / 700 / izquierda
       Cierre        34 px / 700 / izquierda

   Cuatro tratamientos distintos en cinco secciones que comparten un solo
   fondo. No se lee como una pagina, se lee como trozos. Y donde mas canta es
   en Preguntas, porque queda metida entre un centrado de 32 y otro de 34.

   Gana el de testimonios porque es el unico que se decidio mirando la
   composicion y no por inercia, y porque Mariana ya lo dio por bueno. Las
   tres secciones del lienzo pasan a llevarlo. El cierre conserva su
   alineacion —ahi el texto y el boton van en linea y centrarlo lo partiria—
   pero iguala cuerpo y peso.

   Procesos se queda fuera: vive en la seccion blanca de arriba, no en el
   lienzo, y ahi su titular hace de entrada. */
.lienzo .sec.eco h2,.lienzo .sec.eco .h2,
.sec.faq .h2,.sec.faq h2{font-weight:600;text-align:center;
  margin-inline:auto;max-width:38ch;text-wrap:balance;
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2rem)}
.lienzo .sec.final h2,.lienzo .sec.final .h2{font-weight:600;
  text-wrap:balance;font-size:clamp(1.5rem,1.1rem + 1.5vw,2rem)}

/* EL RESALTE DEL TITULAR DE TESTIMONIOS. Mismo recurso que el hero y que
   procesos: una parte en color, el resto en Azul Capta. Lo que cambia es el
   naranja, y por una razon medida: sobre el fondo del lienzo el coral de
   marca da 2,79:1 y no llega ni al 3:1 que pide la AA para texto grande.
   `--coral-texto` da 5,57 ahi y entre 5,27 y 6,08 en los tres fondos. */
/* CON LOS MISMOS RESETS QUE PROCESOS, Y POR LO MISMO QUE PASO EN EL HERO.
   Medido: el `em` heredaba `padding:1,28px 14,08px` y un fondo coral al
   13 % de una regla de pildora que vive mas arriba. Esos 14 px de relleno
   a la derecha son EXACTAMENTE el hueco que Mariana vio en el hero el
   24-oct («ese resaltado tiene doble espacio»). Aqui el color ya lo pone
   la letra, asi que la pildora sobra y ademas estorba. */
.sec.tst .h2 em{font-style:normal;color:var(--coral);
  background:none;box-shadow:none;padding:0;border-radius:0}

/* EL NARANJA ES EL DE MARCA, Y QUEDA DICHO LO QUE CUESTA. Mariana,
   25-oct-2026: «ese no es el naranja de capta, quisiera que utilizaras el
   naranja de capta». Medido sobre el fondo del lienzo:

       #EE6C4D sobre #FFFFFF ....... 3,05:1
       #EE6C4D sobre #FCF3F2 ....... 2,79:1   (la nube calida)
       #EE6C4D sobre #ECEFF3 ....... 2,64:1   (la nube fria)

   El titular mide 32 px, asi que le basta con 3:1. Encima del blanco pasa
   raspando; encima de las nubes, no. Queda justo en la linea segun donde
   caiga el fondo, y es una decision tomada: el coral de marca se queda
   aunque no llegue a la AA. Lo dejo escrito para que no se vuelva a medir
   dentro de tres meses creyendo que es un fallo nuevo. */

/* ══ PREGUNTAS FRECUENTES: UNA COLUMNA, NO DOS ═══════════════════════════
   Mariana: «hay mucho espacio blanco entre el acordeon y el texto que dice
   lo que nos preguntan antes de la demo».

   Medido a 1440, la seccion estaba partida en dos columnas muy desiguales:

       izquierda   454 px de ancho · 219 px de alto   (un titular y 9 palabras)
       derecha     615 px de ancho · 499 px de alto   (las cuatro preguntas)
       hueco        56 px

   O sea: media seccion reservada para tres renglones. Ayer probe a centrar
   la columna izquierda para repartir el hueco, y eso disimula el sintoma
   —el bloque deja de colgar del techo— pero no toca la causa. El hueco
   seguia ahi, solo que partido en dos.

   Sin la segunda columna no hay hueco que repartir: el titular va arriba y
   centrado, como el de testimonios, y las preguntas debajo a todo el ancho
   comodo de lectura. De paso las respuestas ganan 245 px y se leen en menos
   renglones, que es la otra mitad de «demasiado texto».

   POR QUE NO SE DEJA EN BLANCO, que era la otra idea. El blanco no es lo que
   falta: la seccion YA es casi blanca —el lienzo es #FFFFFF con nubes al
   5 %—. Pintarla de blanco puro la dejaria igual y ademas abriria una
   costura con las dos secciones de al lado, que es justo lo que costo quitar.

   En telefono no cambia nada: ahi las columnas ya se apilaban. */
.sec.faq .fgrid{display:block}
/* EL TITULAR DEJA DE SER PEGAJOSO. En dos columnas llevaba
   `position:sticky;top:6rem` para acompañar al scroll mientras se leian las
   preguntas de al lado. En una sola columna eso lo despega y el acordeon se
   le mete por debajo: la entradilla se veia TAPADA por la primera tarjeta. */
.sec.faq .fl{position:static;max-width:46ch;margin-inline:auto;
  text-align:center;margin-bottom:clamp(1.5rem,3vw,2.4rem)}
.sec.faq .fl .h2{max-width:38ch}
/* La entradilla traia `max-width:30ch` de cuando vivia en una columna
   estrecha. Centrada y con 9 palabras, ese tope solo servia para
   partirla en dos y dejar «demo.» sola en el segundo renglon. */
.sec.faq .fnote{max-width:46ch;margin-inline:auto;text-wrap:balance}

/* EL ANCHO SALE DEL TEXTO. Primero deje el acordeon a 62 rem y quedo peor:
   las respuestas llevan `max-width:62ch` —un tope de legibilidad que esta
   bien puesto, una linea de 15 px a 992 px no se lee— asi que el texto
   terminaba a los 540 px y dejaba 450 px de tarjeta vacia a la derecha.
   Dos topes peleandose.

   Manda el del texto: la tarjeta se ajusta a lo que mide una linea comoda
   mas su relleno, y asi el acordeon va lleno de borde a borde. */
.sec.faq .qa{max-width:42rem;margin-inline:auto}

/* ══ EL SUELO DE 12 PX ════════════════════════════════════════════════════
   Mariana, 25-oct-2026: «asegurate que todos los textos cumplan con lo que
   deberian medir para que se lean bien en cualquier dispositivo».

   Medido el home a seis anchos, dejando fuera las maquetas de la aplicacion
   —ahi la letra de 5 px es dibujo, no texto: nadie lee la letra de un plano
   en una foto—, quedan ONCE textos de contenido por debajo de 12 px:

       10 px   .bdg     las seis capacidades de Plataforma
       11 px   .sec7    de que sector es cada testimonio
       11 px   .pill7   de que proceso habla cada testimonio
       11 px   .ctakick la entrada del cierre

   Los cuatro son el mismo patron: VERSALITAS CON MUCHO ESPACIADO. Y ahi se
   juntan las dos cosas que mas cuestan leer. En mayusculas todas las letras
   tienen la misma altura, asi que desaparece la silueta de la palabra —que
   es por donde se reconoce sin deletrear— y hay que ir letra a letra. El
   espaciado ancho remata: separa tanto que las letras dejan de leerse como
   una palabra. A 10 px eso ya no es un estilo, es un obstaculo.

   Suben a 12, que es el suelo, y el espaciado afloja. La entrada del cierre
   va a 13 porque no es una etiqueta de dos palabras sino una pregunta de
   siete, y se lee de corrido.

   No se quitan las versalitas: son de la casa y distinguen la etiqueta del
   texto. Lo que se corrige es el tamano al que se usan.

   El unico que se queda pequeno es el «▾» del menu, a 9,9: eso es un icono
   dibujado con un caracter, no una palabra. */
/* EL `body` DELANTE NO ES ADORNO. En el home esta hoja va DESPUES de los
   estilos de la pagina, asi que una regla igual gana por ir ultima. En las
   diecinueve paginas internas el orden es el contrario: la hoja comun va
   primero y los estilos propios despues. Medido en novedades.html, el bloque
   acaba en la linea 3974 y `.ctakick` se vuelve a declarar en la 4350 y en
   la 4713, asi que sin el `body` el rotulo quedaba a 13 px en el home y a 11
   en novedades: peor que dejarlo pequeno en todas, porque la misma etiqueta
   mediria distinto segun la pagina.

   Con `body` delante la regla pesa mas y gana en los dos ordenes. */
/* ══ LAS TARJETAS DE PLATAFORMA, CON CANTO ═══════════════════════════════
   Mariana, 25-oct-2026: «dale mas profundidad al tono azul, que genere
   contraste con el fondo y que no se vaya a perder, obviamente sin exagerar,
   que todo quede lo mas pulido posible».

   Y se estaban perdiendo por mi culpa. Las tarjetas son blancas con un borde
   al 10 % y antes flotaban sobre blanco puro, donde ese 10 % bastaba. Al
   subir las nubes del lienzo a .13-.16 el fondo dejo de ser blanco y paso a
   #FEF8F6 por la izquierda y #EDEFF0 por la derecha, asi que el canto de la
   tarjeta quedo compitiendo contra un fondo que ya no es mas claro que el.

   Medido el borde, una vez pintado sobre el blanco de la tarjeta:

       10 % -> #ECEEF2     frente a un fondo de #EDEFF0: NO se distingue
       14 % -> #E4E8ED
       18 % -> #DCE1E8     se ve el canto sin que la linea cante
       22 % -> #D4DBE3     ya se lee como un recuadro dibujado

   Se queda en 18. Y la sombra se abre un poco —de -28 px de recogido a -24—
   y gana un primer plano de 1 px, que es lo que de verdad levanta la tarjeta
   del fondo: la sombra ancha da volumen, la de 1 px da el canto.

   Solo dentro del lienzo: la misma clase se usa en otras paginas donde el
   fondo si es blanco y ahi el 10 % sigue estando bien. */
.lienzo .sec.eco .bc{border-color:rgba(61,90,127,.18);
  box-shadow:0 1px 2px rgba(31,45,63,.05),
             0 16px 34px -24px rgba(31,45,63,.42)}

body .bc .bdg{font-size:.75rem;letter-spacing:.08em}
body .tc .sec7{font-size:.75rem;letter-spacing:.08em}
body .tc .pill7{font-size:.75rem}
body .ctakick{font-size:.8125rem;letter-spacing:.1em}

/* Y LO MISMO EN LAS PAGINAS INTERNAS. El barrido de las 24 paginas a 390 y
   a 1440 devolvio un solo patron repetido, no un desorden:

       11 px   .franja     la miga de pan, en las 13 paginas de proceso
       11 px   .rel .kick  el rotulo «Otros procesos», en las mismas
       11 px   .rot/.lrot  «Lo esencial» y «En esta pagina», en las legales
       10 px   .tag        «Recomendado», en precios

   Cuatro clases. Suben al mismo suelo de 12.

   LAS MAQUETAS NO SE ENTERAN, y no hace falta excluirlas a mano: sus
   versiones llevan `:is(.hmk,.capmk,.bmk,…) .rot`, que son dos clases, y
   ganan a `body .rot`, que es una clase y un elemento. La letra de 9 px de
   los dibujos se queda donde esta, que es donde debe estar. */
/* ══ EL PIE, EN BLANCO ════════════════════════════════════════════════════
   Mariana, 25-oct-2026: «el footer deberia ser blanco, dado que el menu va a
   ser blanco, para que genere ese contraste y esa armonia. Obviamente
   cambiarias los tonos, y el logo de Capta seria azul».

   El logo no hay que tocarlo: sus letras van en `fill="currentColor"`, asi
   que con el pie en azul se vuelven azules solas. El conector si lleva el
   coral escrito dentro del SVG y ahi se queda, que es como manda el manual.

   LOS TONOS, CALCULADOS SOBRE BLANCO Y NO A OJO:

       #3D5A7F  Azul Capta ......... 7,08:1   razon social y enlaces
       #5A7392  Azul medio ......... 4,88:1   parrafos y copyright
       #7C8DA4  Gris azulado ....... 3,39:1   solo «Blog», que esta apagado

   Los dos primeros pasan la AA de texto normal con holgura. El tercero no, y
   va a proposito en lo unico que no se puede pulsar: un enlace desactivado
   esta exento, y si se pintara como los demas pareceria que lleva a algun
   sitio.

   Y UNA RAYA ARRIBA. Con el pie blanco y el lienzo casi blanco, el sitio
   terminaba sin que se notara donde. La raya es la MISMA que lleva el menu
   por debajo —rgba(61,90,127,.14)—, asi que la pagina abre y cierra con el
   mismo gesto, que es la armonia que ella pide. */
footer{background:#FFFFFF;color:var(--azul);
  border-top:1px solid rgba(61,90,127,.14)}
footer .fdatos h3{color:var(--azul)}
footer .fdatos p{color:#5A7392}
footer .fhora{color:#5A7392}
footer .fnav a,footer .fnav span{color:var(--azul)}
/* EL SUBRAYADO DEL PIE, EN EL NARANJA DE MARCA. Mariana, 26-oct-2026:
   «cuando le paso el cursor lo resalta en un color que no es el naranja de
   capta». Era `--coral-texto` (#A8412A), el coral oscurecido que el sitio
   usa para letra sobre fondo claro. Pasa al de marca: baja de 6,08:1 a
   3,05:1 sobre blanco, la misma renuncia de los botones. */
footer .fnav a:hover,footer .fnav a:focus-visible{color:var(--coral)}
footer .fnav span{color:#7C8DA4}
footer .fcopy{color:#5A7392}
footer .fbot{border-top-color:rgba(61,90,127,.15);color:#5A7392}
footer .fcol h3{color:var(--azul)}
footer .fcol li{color:#5A7392}
footer .fcol li:hover{color:var(--azul)}
/* Las redes iban en blanco al 68 % sobre azul. Sobre blanco eso es
   invisible: pasan a Azul Capta, y el fondo del hover deja de ser blanco
   translucido —que sobre blanco no se ve— para ser azul muy claro. */
footer .fredes a{color:var(--azul);opacity:.72}
footer .fredes a:hover,footer .fredes a:focus-visible{opacity:1;
  color:var(--coral);background:rgba(61,90,127,.07)}

/* ══ PRUEBA · HERO CLARO DE PROCESO ══════════════════════════════════════
   Mariana, 25-oct-2026: «los heroes, maybe una linea curva o 2 curvas
   sutiles, y los tonos mas llevados hacia el lado claro, jugando con
   opacidades de los colores de capta: #3D5A7F #EE6C4D #F0F0F0 #FFFFFF
   #8BB6CD».

   POR QUE CLARO Y NO OTRO AZUL. Medido: los once heroes oscuros se
   diferencian entre si ΔE 16,7 de mediana, que lado a lado es «claramente
   distinto», y aun asi se reconocen iguales porque la frase que queda en la
   memoria —«azul oscuro con una maqueta blanca»— no cambia. Y meter coral
   en un suelo oscuro no sirve: medido, da #626270, un gris amalvado. El
   coral solo es coral sobre fondo claro. Por eso el hero se va al lado
   claro: ahi los dos colores de la casa pueden verse de verdad.

   EL FONDO son tres focos de la paleta sobre blanco, con opacidad:

       azul claro  #8BB6CD al 42 %   arriba a la izquierda
       coral       #EE6C4D al 18 %   arriba a la derecha
       el acento   de la pagina 16 % por abajo

   El acento sigue ahi, asi que las once paginas no quedan iguales entre si;
   lo que cambia es que ahora se ve sobre claro en vez de ahogarse en oscuro.

   EL TEXTO SE RECOLOREA ENTERO, y no es opcional: iba todo en blanco. Medido
   sobre el tono mas oscuro que produce este fondo (#D3E3EC):

       titular en #3D5A7F ....... 5,38:1   ok
       bajada en #5A7392 ........ 3,71:1   NO llega
       bajada en #3D5A7F ........ 5,38:1   ok

   Por eso la bajada va en Azul Capta pleno y no en el azul medio que usa el
   resto del sitio: aqui ese tono no pasa.

   LA CURVA es blanca y sube desde la seccion de abajo, que tambien es
   blanca: asi el hero termina en onda y no en linea, con el mismo gesto del
   home. Va por dentro del hero para que ningun `overflow` la recorte, que es
   lo que me paso con la banda del final. */
/* LAS DOS ONDAS NECESITAN TINTE DONDE CAEN. La primera version se desvanecia
   a blanco antes de llegar al borde de abajo, asi que la onda blanca caia
   sobre blanco y no existia: medido, el tinte terminaba a 300 px del final.
   Es la misma regla de siempre —una curva solo se ve donde se encuentran dos
   suelos distintos— y aqui los dos eran el mismo.
   Por eso el fondo lleva ahora una banda de color pegada a cada borde: es lo
   que las ondas recortan. */
/* ══ LA CURVA DENTRO DEL HERO DE PROCESO ═════════════════════════════════
   Dos capas del mismo barrido sobre el degradado que ya tenia: la de abajo
   mas opaca y tendida, la de arriba mas corta y desplazada, de modo que
   entre las dos se lee un movimiento y no una banda. El degradado original
   no se toca —va detras, con `background-image` en vez de `background`— y
   el borde del hero sigue acabando recto, que es como funciona en la
   plantilla.

   Las dos van al 7 % y al 4 % de blanco. Medido encima de los once acentos,
   el mas claro —seleccion, #2F7E8E— sube de 4,67:1 a 4,52 contra el texto
   blanco en el punto mas alto del arco: sigue pasando la AA. Por eso no van
   mas opacas: a partir del 9 % el mas claro se cae por debajo de 4,5. */
.sec.heroP{
  --ondaimg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 200' preserveAspectRatio='none'><defs><linearGradient id='o' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2335506E'/><stop offset='1' stop-color='%2352779E'/></linearGradient></defs><path fill='url(%23o)' d='M0,200 L0,96 C420,118 560,50 980,58 C1420,66 1560,122 1920,88 L1920,200 Z'/></svg>");
  background-image:
    var(--ondaimg),
    linear-gradient(180deg,rgba(var(--hero-b-rgb),0) 74%,var(--hero-b) 100%),
    linear-gradient(135deg,var(--hero-a) 0%,var(--hero-b) 100%);
  /* 30 % Y NO 44 %, PARA QUE LOS DOS ARCOS NO SE CRUCEN. Mariana: «en el
     hero se ven tres curvas, y la idea es dejarlo con dos». Comprobado
     apagando una capa y luego la otra: cada arco por separado dibuja UNA
     curva y los dos juntos dibujan TRES. No hay un tercer arco; los dos
     tienen la misma forma a distinta escala y, anclados abajo, sus bordes
     SE CRUZAN. El trozo donde se solapan queda limitado por dos curvas
     distintas y el ojo lee una tercera linea.
     La cuenta: el borde del arco va de y=74 a y=30 en un viewBox de 120, o
     sea que su distancia al suelo va del 38 % al 75 % de su propia altura.
     A 62 % eso es del 24 % al 47 % del hero; a 44 % es del 17 % al 33 %.
     Los dos intervalos se pisan entre el 24 y el 33. Para que no se toquen,
     el de abajo tiene que acabar antes de donde empieza el de arriba:
     0,75·b < 0,38·0,62, o sea b < 31 %. Queda en 30. */
  background-size:100% 55%,100% 100%,100% 100%;
  background-position:bottom center,center,center;
  background-repeat:no-repeat,no-repeat,no-repeat}

/* ══ PRUEBA · UN SOLO AZUL PARA TODOS LOS HEROES ═════════════════════════
   Mariana, 25-oct-2026: «podrian tener el degradado entre los azules de
   capta, o todas con la misma tonalidad y diferenciarlas por los textos,
   pero depende de lo que investigues».

   INVESTIGADO Y MEDIDO. Los cuatro referentes que nombro usan UN SOLO
   tratamiento de hero en todas sus paginas internas:

       Salesforce  /sales #032D60 · /service #032D60 · /marketing #001E5B
                   · /platform #042D60   (el mismo navy; varia 2 puntos)
                   fondos: blanco, blanco→#EAF5FE, blanco, blanco→#F1F3FB
       HubSpot     /products/marketing y /products/service: rgb(248,245,238)
                   IDENTICO en las dos
       Notion      /product/docs: blanco puro
       Bridge      Bancos y Legal: blanco, acento rgb(61,110,229) el mismo

   Cuatro de cuatro. Ninguno cambia el color por pagina: diferencian por el
   titular y la imagen.

   Y coincide con lo medido aqui: los once acentos se separan ΔE 16,7 —lado
   a lado es «claramente distinto»— y aun asi se reconocen iguales, porque
   al navegar nadie compara. Once colores que cuestan mantenimiento y no
   compran nada.

   ESTA PRUEBA solo cambia el FONDO del hero. El acento de la pagina sigue
   pintando el icono, el borde de la tarjeta al pasar por encima y la miga
   de pan: la identidad del proceso no se pierde, se mueve a marcas
   pequeñas que no compiten con el fondo.

   El degradado va entre los dos azules de la casa, en diagonal como la
   plantilla, con un foco de Azul Claro arriba a la derecha que es lo que le
   da la luz que tiene la referencia. Medido, blanco encima: 10,62 sobre el
   oscuro, 7,08 sobre Azul Capta y 5,86 en el punto mas claro del foco. */
/* LA MISMA ONDA EN TODOS LOS DISPOSITIVOS. Mariana, 26-oct-2026: «la curva
   tambien se mueve, la curva deberia mantenerse igual en cada dispositivo».

   MEDIDO EN CLIENTES: el recorrido vertical de la onda y lo que mide contra
   el ancho de la pantalla.

       SE           375 px    88 px    23,5 %
       Telefono     390 px    88 px    22,6 %
       iPad         768 px    71 px     9,2 %
       iPad apais. 1024 px    74 px     7,2 %
       Escritorio  1440 px    78 px     5,4 %

   El desnivel es casi el mismo en todas —de 71 a 88 px— pero el ancho por el
   que lo reparte va de 375 a 1440. En el telefono es la misma subida metida
   en una cuarta parte del recorrido: cuatro veces mas empinada. No es que la
   onda se mueva, es que se comprime, y comprimida parece otra onda. Encima
   el alto iba en PORCENTAJE DEL HERO, y el hero crece en el telefono porque
   el texto ocupa mas lineas: justo donde la pantalla es mas estrecha, la
   onda es mas alta.

   LO QUE NO FUNCIONO, Y POR QUE. Atar el alto de la imagen al ancho de la
   pantalla —`min(55%,26vw)`— iguala la forma en los cinco anchos, medido: de
   5,4 a 5,6 % en todos. Pero la amplitud de la onda es una fraccion FIJA del
   alto de la banda (21,6 %), asi que igualar la forma obliga a encoger la
   banda: en el telefono pasaba de 408 px a 101 y la franja de color
   desaparecia detras de la tarjeta de cifras. O banda honda, o curva suave.

   SE SEPARAN LAS DOS COSAS. La banda se queda en el 55 % de siempre y lo que
   cambia por ancho es EL TRAZADO: el mismo dibujo con la amplitud reducida,
   para compensar justo lo que la pantalla lo comprime. `una_onda(k=...)`
   escala las alturas de la curva alrededor de su media (85,4 de 200), asi
   que los extremos del trazado y el relleno de debajo no se mueven: solo se
   aplana el vaiven.

       hasta 700 px    k = 0,25
       701 a 1040      k = 0,60
       de 1041         k = 1

   El trazado entra por `--ondaimg`, una variable, para no repetir las tres
   capas de fondo enteras en cada consulta de medios. */
body[data-color-proceso] .sec.heroP{
  --ondaimg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 200' preserveAspectRatio='none'><defs><linearGradient id='o' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2335506E'/><stop offset='1' stop-color='%2352779E'/></linearGradient></defs><path fill='url(%23o)' d='M0,200 L0,96 C420,118 560,50 980,58 C1420,66 1560,122 1920,88 L1920,200 Z'/></svg>");
  background-image:
    var(--ondaimg),
    radial-gradient(58% 70% at 88% 6%,rgba(139,182,205,.14),transparent 68%),
    linear-gradient(115deg,#28405C 0%,#3D5A7F 72%,#3D5A7F 100%);
  background-size:100% 55%,100% 100%,100% 100%;
  background-position:bottom center,center,center;
  background-repeat:no-repeat,no-repeat,no-repeat}

/* LA SECCION DE LA MAQUETA, BLANCA. Mariana, 25-oct-2026: «la seccion que
   tiene mockup deberia quedar con fondo blanco». Y asi el blanco que la
   precede es lo que hace que la onda de entrada al cierre se vea: una onda
   solo existe donde se encuentran dos suelos distintos, y este es el
   blanco contra el que corta. */
body[data-color-proceso] .sec.vid{background:#FFFFFF}

/* FUERA EL ICONO DEL HERO. Mariana, 25-oct-2026: «quitaria el icono». Era
   el contorno del proceso sangrado por la esquina inferior izquierda, en
   blanco al 7 %. Se oculta, no se borra: lo pinta el HTML de las once. */
body[data-color-proceso] .hico{display:none}

/* Y LA MIGA DE PAN, DEL MISMO AZUL QUE EL HERO. Mariana: «arriba todavia
   tiene ese procesos/cartera que esta como de otro color». Y lo estaba: esa
   barra toma `--hero-a`, que en cartera es su petroleo, mientras el hero ya
   iba en el azul compartido. Dos azules distintos pegados uno encima del
   otro. Pasa a arrancar donde arranca el hero. */
body[data-color-proceso] .franja{background:#28405C}

/* ══ EL CIERRE, CON EL LIENZO DEL HOME EN AZULES ═════════════════════════
   Mariana, 25-oct-2026: «lo que esta en el fondo del home, desde el hero
   hasta lo que nos preguntan en la demo, ese estilo de fondo es el que me
   gustaria desde "lo que cambia en tu operacion" hasta "asi gestionas las
   demas areas", simplemente con el degradado azul de los tonos de capta».

   Es la receta del home tal cual —blanco con nubes muy abiertas, una sola
   capa continua, sin costuras entre secciones— cambiando el coral por los
   azules de la casa. Va en un pseudo-elemento del body y las dos secciones
   se quedan transparentes, que es como esta resuelto el lienzo del home.

   LO QUE OBLIGA A RECOLOREAR. «Asi gestionas» era un bloque AZUL SOLIDO con
   todo su texto en blanco. Sobre un fondo claro, blanco sobre claro no se
   lee. Pasa a la misma logica del home: el titular en Azul Capta y las
   tarjetas, que eran blanco translucido sobre azul, se vuelven blancas de
   verdad con borde y sombra, igual que las del lienzo.

       texto                      antes            ahora        contraste
       titular «Asi gestionas»    #FFFFFF          #3D5A7F      7,08:1
       rotulo «Otros procesos»    blanco al 70 %   #5A7392      4,88:1
       nombre del proceso         #FFFFFF          #3D5A7F      7,08:1
       descripcion               blanco al 95 %    #5A7392      4,88:1

   Las cuatro medidas sobre el blanco de la tarjeta, que es donde caen. */
/* VA EN EL ENVOLTORIO QUE PONE `_lienzo_proceso.py`. Lo intente antes con
   un pseudo-elemento del body y hacen falta dos medidas —donde empieza el
   cierre y cuanto mide— que cambian en cada pagina y que el CSS no puede
   conocer. Envolver las dos secciones es la unica forma de que el degradado
   sea UNO, y es lo mismo que hace `.lienzo` en el home. */
.lienzoP{position:relative;isolation:isolate}
.lienzoP::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    /* UN RECORRIDO, NO NUBES SUELTAS. Mariana: «haria como de gris de capta
       al azulito, pero mejor integrado; lo bonito del home es que tiene esa
       curva y se siente bien el degradado, en cambio aqui se ve todo
       partido y soso».

       Las nubes del home funcionan porque son coral y azul alternandose: la
       temperatura cambia y eso se lee como movimiento. Aqui todas eran
       azules, asi que siete nubes del mismo color sobre blanco dan… blanco
       con manchas. No habia recorrido.

       Debajo va ahora un descenso continuo del Gris Capta al Azul Claro, y
       las nubes quedan solo como relieve encima. El bloque entero deja de
       ser un fondo y pasa a ser un camino, que es lo que hace el del home.

       Al final del descenso el fondo da #D3E3EC: Azul Capta encima 5,38:1. */
    radial-gradient(62% 22% at 14% 6%,rgba(255,255,255,.55),transparent 70%),
    radial-gradient(54% 18% at 92% 26%,rgba(61,90,127,.10),transparent 72%),
    radial-gradient(70% 20% at 22% 52%,rgba(255,255,255,.40),transparent 70%),
    radial-gradient(56% 17% at 88% 74%,rgba(61,90,127,.09),transparent 72%),
    linear-gradient(180deg,#F5F8FB 0%,#E4EEF4 46%,#D3E3EC 100%)}

/* LA ONDA BLANCA DE ENTRADA. Mariana: «deberia iniciar con una curva
   blanca, para que se note el cambio de transicion entre el blanco de la
   seccion anterior y el color que va de esta seccion hacia la otra».
   Es exactamente el gesto del home: el blanco de arriba baja sobre el
   color en onda en vez de cortarse en recto. Va volteada para que el
   blanco quede arriba, y por encima del degradado pero por debajo del
   contenido. */
.lienzoP::after{content:"";position:absolute;left:0;right:0;top:0;
  bottom:auto;height:var(--onda);z-index:-1;pointer-events:none;
  background:#FFFFFF;
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'><path fill='%23fff' d='M0,120 L0,60 C320,10 640,10 960,60 C1280,110 1600,110 1920,60 L1920,120 Z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'><path fill='%23fff' d='M0,120 L0,60 C320,10 640,10 960,60 C1280,110 1600,110 1920,60 L1920,120 Z'/></svg>");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transform:scaleY(-1)}

.lienzoP .sec.ben,
.lienzoP .sec.rel{background:transparent}
/* Sitio para que la onda caiga sobre fondo y no sobre el titular. */
.lienzoP .sec.ben{padding-top:calc(4.5rem + var(--onda) * .7)}

/* El texto del cierre, que ahora vive sobre claro. */
body[data-color-proceso] .sec.rel .h2{color:var(--azul)}
/* El rotulo del cierre va en Azul Capta y no en el azul medio: medido, el
   medio se queda corto en la parte alta del lienzo. */
body[data-color-proceso] .sec.rel .kick{color:var(--azul)}
body[data-color-proceso] .sec.rel .relc{
  background:#FFFFFF;border-color:rgba(61,90,127,.18);
  box-shadow:0 1px 2px rgba(31,45,63,.05),
             0 16px 34px -24px rgba(31,45,63,.42)}
body[data-color-proceso] .sec.rel .relc:hover{
  background:#FFFFFF;border-color:rgba(61,90,127,.34)}
body[data-color-proceso] .sec.rel .relc b{color:var(--azul)}
body[data-color-proceso] .sec.rel .relc span{color:#5A7392}
body[data-color-proceso] .sec.rel .relc i{
  background:rgba(var(--k),.14);border-color:rgba(61,90,127,.12)}
body[data-color-proceso] .sec.rel .relc i svg{color:var(--coral-texto)}
body[data-color-proceso] .sec.rel .relc em{
  border-color:rgba(61,90,127,.28);color:var(--azul)}
body[data-color-proceso] .sec.rel .relc:hover em{background:rgba(61,90,127,.08)}

/* EL RESALTE DEL TITULAR DE PROCESO. Mismo recurso que el hero del home y
   que la seccion de procesos: una parte del titular en naranja, el resto en
   Azul Capta. Lo pone `_tit_proceso.py` en el HTML; aqui solo se pinta.

   VA EN EL CORAL DE MARCA, no en el de texto, y se puede: ese titular mide
   32 px, o sea texto GRANDE, y la AA pide 3:1 para grande. Coral #EE6C4D
   sobre el blanco de esa seccion da 3,05:1. Justo, pero pasa — y es el
   naranja que Mariana pide ver.

   Los resets son los de siempre: el `em` hereda relleno y fondo de una regla
   de pildora que vive mas arriba, y esos 14 px de relleno son el «doble
   espacio» que ella ya cazo dos veces. */
/* EL TITULAR ENTERO EN NARANJA. Mariana, 25-oct-2026: «"Una vinculacion de
   principio a fin" completo en naranja de capta». Antes solo iba el nombre
   del proceso; ahora la linea entera.
   Mide 32 px —texto grande— y el coral de marca sobre el blanco de esa
   seccion da 3,05:1, que es lo que pide la AA para grande. El `em` se queda
   en el HTML por si se quiere volver atras, pero hereda el color. */
/* Y EN UNA SOLA LINEA. Mariana: «esos textos de "una vinculacion de
   principio a fin" no los separes en dos lineas, sino en una sola».
   Lo que lo partia era un `max-width:460,8px` heredado, con 1.240 px de
   columna disponibles al lado. El mas largo de los once —«La gestion de un
   proveedor, de principio a fin»— pide unos 740 px a 32 px de cuerpo, asi
   que 52 rem deja margen para todos.
   En telefono sigue partiendo, y debe: a 24 px esa frase no cabe en 349 px
   de pantalla y forzarla seria sacarla del marco. */
.sec.vid .tit{color:var(--coral);max-width:52rem;margin-inline:auto}
.sec.vid .tit em{font-style:normal;color:inherit;
  background:none;box-shadow:none;padding:0;border-radius:0}

/* ══ CONSTRUCCION · LOS DOS AZULES Y LA CURVA ════════════════════════════
   Mariana, 25-oct-2026: «el degradado que esta dentro del home, que es azul
   naranja, en industrias va a ser azul oscuro de capta contra azul clarito
   —#3D5A7F y #8BB6CD—, que se note el contraste de solo esas dos
   tonalidades, pero que le de fuerza. Y ponle la curva que tiene el home».

   DONDE PUEDE IR EL AZUL CLARO, calculado antes de repartirlo. El hero
   lleva texto BLANCO, y medido contra blanco:

       #28405C  azul oscuro .... 10,62:1   ok
       #3D5A7F  Azul Capta ......  7,08:1   ok
       #8BB6CD  azul claro ......  2,17:1   NO sirve de fondo

   El azul claro no puede ser suelo: mezclado sobre Azul Capta aguanta hasta
   el 35 % —ahi da exactamente 4,50, el minimo— y a partir del 45 % se cae.

   Pero este hero tiene el texto CENTRADO, asi que las cuatro esquinas estan
   libres. El azul claro va fuerte en dos de ellas y se apaga antes de llegar
   al centro: donde pesa, no hay letras; donde hay letras, no pesa. Asi se
   nota el contraste que ella pide sin tocar la legibilidad.

   LA CURVA es la del home: una onda blanca que sube desde la seccion de
   logos —que ya es blanca— y cierra el hero. Va por dentro para que ningun
   `overflow` la recorte, que es la leccion de las otras cuatro. */
/* EL DEGRADADO, CON RECORRIDO. Mariana: «podria tener mayor impacto visual
   y un degradado mas armonico». La version anterior eran tres focos sueltos
   sobre una base que volvia al mismo oscuro en los dos extremos —158 grados
   de #28405C a #3D5A7F y otra vez a #28405C—, asi que el ojo no recorria
   nada: salia y llegaba al mismo sitio.

   Ahora la base hace un VIAJE de verdad, de la esquina de abajo a la de
   arriba, y no vuelve: del azul mas oscuro al mas claro que admite el texto.
   Encima, un solo foco grande de Azul Claro en la esquina superior derecha
   —no tres repartidos— que es lo que hace la plantilla y lo que le da el
   golpe de luz. Un gesto grande se lee; tres pequeños se anulan. */
/* ══ EL DEGRADADO: SOLO LOS DOS AZULES, Y SIN TOCARLO MAS ════════════════
   Mariana, 25-oct, en este orden:
     1. «el degradado del hero de construccion aun no esta al nivel del del
        home»
     2. «no le metas el naranja ahi, porque se rompe y se ve mal»
     3. «ese degrado que me estas mostrando no se ve armonico (...) el que
        estoy viendo yo ahorita es mejor de lo que tu me estas proponiendo»

   Lo de abajo es lo que ella ya tenia delante. Volvio tal cual. Y queda
   escrito lo que probe en medio para que nadie lo repita:

   · EL CORAL. Medidos los dos heroes, 112 muestras, fuera la onda: el
     recorrido de LUZ ya era el mismo (0,165 el home contra 0,164 este) y
     toda la diferencia estaba en el TONO —357° contra 7°— porque dos
     tercios del hero del home son coral. Traerlo cuadraba el numero (358°)
     y el contraste aguantaba. Se ve mal igual. No entra.

   · TRES FOCOS DE AZUL. Sin coral, el unico eje que queda es la luz, asi
     que meti un azul clarito mas fuerte arriba (0,78) y un rebote suyo en
     el centro. El recorrido de luz subio a 0,228, MEJOR que el 0,179 del
     home, y aun asi se ve peor: un radial fuerte y otro a media altura
     dejan POZAS, y una poza no es un degradado. Armonico aqui no quiere
     decir mas recorrido, quiere decir UNA sola direccion sin escalones.

   Moraleja, porque me paso dos veces seguidas en la misma hora: la medida
   dice donde esta la diferencia, no si el resultado es bonito. */
.sec.heroc{position:relative;
  background:
    radial-gradient(70% 62% at 98% 0%,rgba(139,182,205,.58),transparent 60%),
    radial-gradient(46% 40% at 4% 100%,rgba(40,64,92,.55),transparent 62%),
    linear-gradient(148deg,#22384F 0%,#2F4A68 38%,#3D5A7F 78%,#4A6B93 100%);
  padding-bottom:calc(5rem + var(--onda) * .8)}

.sec.heroc::after{content:"";position:absolute;
  left:0;right:0;bottom:0;top:auto;height:var(--onda);z-index:1;
  pointer-events:none;background:#FFFFFF;
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'><path fill='%23fff' d='M0,120 L0,60 C320,10 640,10 960,60 C1280,110 1600,110 1920,60 L1920,120 Z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'><path fill='%23fff' d='M0,120 L0,60 C320,10 640,10 960,60 C1280,110 1600,110 1920,60 L1920,120 Z'/></svg>");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* El titular, con el mismo recurso que el resto del sitio: peso ligero y el
   remate en 800, los dos en blanco. Y sin la pildora que llevaba el `em`
   antes —fondo coral al 26 % y relleno— que ya no hace falta. */
/* EL ROTULO OCULTO, DE VERDAD. Lleva el atributo `hidden` desde que se
   quito su texto, pero una regla `.kick{display:inline-block}` lo pisaba: el
   `hidden` del HTML solo vale mientras nadie declare un `display`. Resultado:
   el rotulo quedaba vacio pero su `::after` —el filete coral de debajo—
   seguia pintandose, suelto y sin nada encima. */
.sec.heroc .kick[hidden]{display:none}

/* ══ EL TITULAR Y LA BAJADA, AL NIVEL DEL HOME ═══════════════════════════
   Mariana: «el H1 y H2 de construccion no estan al nivel profesional que
   necesitamos». Medidos uno al lado del otro, la diferencia no era de gusto:

                     home            construccion
       H1       59,04px / 400     56px / 400
       interlinea   1,10              1,24      ← suelta
       bajada   19,2px blanco     17px blanco al 80 %   ← pequeña y apagada

   La interlinea es lo que mas pesa: un titular de 56 px con 1,24 de
   interlinea se desparrama, y a ese tamaño el ojo quiere las lineas juntas.
   El home esta en 1,10 y por eso se lee como un bloque.

   Y la bajada iba mas pequeña Y mas apagada que la del home —dos cosas a la
   vez—, asi que no sostenia al titular. Pasa a 19,2 px y a blanco pleno, que
   ademas le sube el contraste. */
/* MAS GRANDE, Y EL MOTIVO ES ARITMETICO. Mariana: «siento que falta mas
   impacto en el H1». Medidos los tres titulares del sitio a 1440:

       home          70 caracteres · 12 palabras · 59 px → caja 864x195
       construccion  40 caracteres ·  6 palabras · 58 px → caja 880x128
       proceso       48 caracteres ·  9 palabras · 48 px → caja 510x166

   Al MISMO cuerpo, el de construccion ocupa un tercio menos de masa que el
   del home —112.723 px² contra 168.318— y la causa no es el tamaño de la
   letra: son seis palabras contra doce.

   O sea: el titular no es pequeño, es CORTO. Y un titular corto puede ir
   mucho mas grande sin romper nada, porque le sobra ancho de columna. El
   del home no puede: con doce palabras a 72 px se iria a cinco lineas.

   Sube de 3,69 rem a 4,75 —de 59 a 76 px— que con 40 caracteres caben en
   dos lineas de unos 20, que es medida de titular. El limite de abajo
   tambien sube: a 390 px el minimo pasa de 2 a 2,25 rem. */
/* EL TITULAR, CON LA MISMA LETRA QUE EL DEL HOME ════════════════════════
   Mariana: «el tamano de la letra del home y el de construccion es
   diferente, se nota. Deberian tener el mismo tamano».

   Tenia razon y era peor de lo que parece, porque no era un numero sino dos
   rampas distintas. Medido a lo ancho:

       ancho   home    construccion   diferencia
       1920    70,0 px     70,0 px       0
       1440    59,0        70,0        +11
       1180    48,4        61,7        +13
       1024    42,0        56,4        +14
        834    34,2        50,0        +16
        390    32,0        33,5         +1

   O sea que coincidian en los dos extremos y se separaban hasta 16 px en el
   medio, que es donde se mira. El home va con `clamp(2rem,4.1vw,4.375rem)`
   —una rampa limpia, sin termino base— y construccion llevaba
   `clamp(2.25rem,1.35rem + 3.4vw,4.375rem)`, mas plana, que es lo que abria
   el hueco.

   Ahora lleva LA MISMA DECLARACION, copiada de .sec.hero: mismo cuerpo,
   mismo interletraje (-.018em) y misma interlinea (1,1). No es parecida, es
   la misma, asi que no se pueden volver a separar sin que alguien cambie las
   dos a la vez.

   Y SALE EL ARREGLO DE LOS TELEFONOS ESTRECHOS (el 8,6vw que puse ayer).
   Hacia falta cuando el titular era mas grande que el del home; con la rampa
   del home el cuerpo a 375 ya es 32 px y las tres lineas salen solas. Dejar
   la excepcion habria sido volver a separar las dos paginas justo donde mas
   se nota, que es el telefono.

   LA COLUMNA CRECE OTRO POCO, Y ES POR EL INTERLETRAJE. Al copiar el del
   home, de -.03em a -.018em, las letras se sueltan y la primera linea pasa
   de 1.104 a 1.134 px a cuerpo 70. En los 1.125 de ayer ya no cabia POR
   NUEVE PIXELES y a 1920 volvia a partir en tres. Sube a 1.160, y para eso
   .wrap.inner de este hero pasa de 1.240 a 1.300 —el hueco util era 1.125 y
   queda en 1.185—. Solo lo aprovecha el titular: .facts trae su propio tope
   de 704, la bajada el suyo de 46 caracteres y .cta-wrap solo centra. */
.sec.heroc h1{font-weight:400;font-size:clamp(2rem,4.1vw,4.375rem);
  letter-spacing:-.018em;line-height:1.1;max-width:none;margin-inline:auto}
@media(min-width:901px){
  .sec.heroc .wrap.inner{max-width:1300px}
  .sec.heroc .hcenter{max-width:1160px}
}
/* Y EL SUBTITULO SUBE CON EL. Mariana: «no se si es que el H2 esta muy
   cortico». No lo esta —trece palabras contra quince del home—, lo que
   pasa es que al subir el titular a 71 px, un subtitulo de 19 se queda
   atras: la distancia entre los dos se abre tanto que el segundo deja de
   leerse como parte del mismo bloque y parece un pie de foto.

   Sube a 1,375 rem (22 px) y se le da medida de parrafo de entrada —46
   caracteres— para que parta en dos lineas parejas en vez de dejar
   «automatizado» sola. Y se le acerca al titular: el aire que sobraba
   entre los dos es parte de lo que se sentia flojo. */
.sec.heroc .sub{font-size:clamp(1.125rem,1.01rem + .42vw,1.375rem);
  color:#FFFFFF;opacity:1;line-height:1.5;max-width:46ch;
  margin:.9rem auto 0;text-wrap:balance}
/* LA BAJADA SE QUEDA EN 46 CARACTERES aunque el titular ahora mida 1.125 px
   y al lado parezca estrecha. Probe subirla a 56: la caja paso de 607 a 739
   px y EN PANTALLA NO CAMBIO NADA, porque text-wrap:balance iguala las dos
   lineas y deja el sobrante de margen. Para ensancharla de verdad habria
   que quitar el balance, y entonces la primera linea se llena y la segunda
   queda corta, que es peor. */

/* EL BOTON, CON LA FORMA DEL HOME. Mariana: «el boton con la estructura o
   redondez del del home». Alli es una pildora blanca con la letra en Azul
   Capta, y funciona por una razon que aqui vale igual: sobre un fondo
   oscuro, el blanco pleno es lo que mas destaca —mas que el coral, que a
   3,05:1 sobre su propio blanco va justo— y deja al coral para el acento. */
.sec.heroc .cta-wrap .btn{background:#FFFFFF;color:var(--azul);
  border-radius:99px;padding:.85rem 2rem;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 10px 26px -10px rgba(10,22,38,.55)}
.sec.heroc .cta-wrap .btn span{color:var(--coral)}
.sec.heroc .cta-wrap .btn:hover{background:#FFFFFF;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 14px 30px -10px rgba(10,22,38,.6)}
.sec.heroc h1 em{font-style:normal;font-weight:800;color:#FFFFFF;
  background:none;box-shadow:none;padding:0;border-radius:0;
  white-space:normal}

/* ══ EL «DESLIZA», CON EL NARANJA DE MARCA DONDE SI CABE ═══════════════
   Mariana: «el desliza en mobile no tiene el naranja correcto, sino es otro
   color que no es de Capta». Es verdad: va en --coral-texto #A8412A.

   Y no se puede cambiar la LETRA, porque mide 12 px. A ese tamaño la norma
   pide 4,5:1 y el coral de marca sobre blanco da 3,05 — igual que el blanco
   sobre coral, que es la otra forma de montarlo. Ninguna de las dos pasa.
   El unico naranja legible a 12 px es --coral-texto; por eso esta ahi.

   LA PALABRA VA EN AZUL CAPTA, que es lo que pidio Mariana al verlo: «ese
   texto de desliza deberia estar en azul Capta». Y de paso cierra el
   problema en vez de rodearlo: azul sobre blanco da 7,08:1, asi que a 12 px
   sobra, mientras que cualquier naranja ahi o no pasa o no es el de marca.

   LA FLECHA SI SE QUEDA EN CORAL DE MARCA, porque un icono no es texto: la
   norma le pide 3,0 y el coral da 3,05. El chip queda azul con la flecha
   naranja, que es la misma pareja que usa el resto del sitio. */
body .pista{color:var(--azul)}
.sec.proc .pbox .pista svg{color:var(--coral)}

/* ══ LA ESCALA TIPOGRAFICA DE CONSTRUCCION ══════════════════════════════
   Mariana: «revisa completo los estilos de la tipografia para que todo este
   muy armonico y tenga sentido a nivel de diseno grafico».

   Inventariados los dos sitios a 1440, saltandome el texto de las maquetas
   —que tienen su propia tipografia diminuta y no es copy—, construccion
   usaba CINCO tratamientos distintos de H2 y el home dos:

       seccion         construccion      home
       procesos        40 px / 700       40 px / 700
       plataforma      40 / 400 + 800    32 / 600
       integraciones   22 / 700          (no existe)
       testimonios     32 / 600          32 / 600
       cierre          38 / 700          32 / 600

   Puestos en una escala de razon 1,25 —16, 20, 25, 31, 39, 49, 61— casi
   todos los tamanos de la pagina caen en un peldano: 59, 40, 32, 24, 16.
   Los dos que NO son el 38 del cierre y el 22 de integraciones. Un numero
   fuera de escala no se ve como «un poco distinto», se ve como un error de
   alguien que no estaba mirando.

       cierre          38 → 32 / 600   (el peldano que ya usa testimonios)
       integraciones   22 → 24 / 700   (el peldano de los titulos de tarjeta)

   Quedan TRES niveles y se leen como tres: 40 para las dos secciones que
   abren tema, 32 para las dos que cierran, 24 para la banda estrecha y los
   titulos de tarjeta.

   Y LA BAJADA DEL HERO VUELVE A 19 px, que es la del home. La habia subido
   a 22 cuando el titular estaba en 70; ahora que los dos titulares miden
   59, la razon entre titular y bajada era 2,68 aqui y 3,08 en el home. Es
   la misma pareja de elementos en las dos paginas: o miden igual o se nota,
   que es exactamente lo que ella vio con el H1. */
body .sec.final .h2{font-size:clamp(1.5rem,1.2rem + .95vw,2rem);
  font-weight:600;line-height:1.16}
body .sec.integraciones h2{font-size:clamp(1.25rem,1.1rem + .45vw,1.5rem);
  font-weight:700;line-height:1.3}
body .sec.heroc .sub{font-size:clamp(1.0625rem,1rem + .22vw,1.1875rem);
  line-height:1.62}

/* ══ EL LIENZO CLARO, DE «SABEMOS COMO OPERA» AL CIERRE ═════════════════
   Mariana, despues de ver el oscuro: «mejor si cambia la tonalidad (...)
   con tonos mas suaves, un azul mas suave, como en el home (...) de pronto
   podrias dejarlo en una tonalidad gris (...) porque es que en el home eso
   era lo que buscabamos, que el hero resaltara y el resto fuera mas
   clarito, y quisiera lograr lo mismo».

   Ese argumento manda sobre lo anterior: si el hero es el unico momento
   oscuro de la pagina, destaca; si ademas hay otra superficie azul profunda
   mas abajo, deja de ser el momento. Es la misma logica del home.

   EL FONDO ES EL DE LAS PAGINAS DE PROCESO, no el del home, y a proposito.
   El del home alterna nubes CORAL y azules, y en esta pagina el coral ya se
   descarto dos veces. `.lienzoP` resolvio exactamente este problema para
   las once internas: un descenso del Gris Capta al Azul Clarito con nubes
   blancas y azules, sin una sola calida. Se copia ese.

   LO QUE CUESTA, y es el grueso del trabajo: la seccion de «Sabemos como
   opera» estaba construida ENTERA sobre azul profundo —texto blanco,
   tarjetas de blanco al 7 %, etiquetas de blanco al 10 %, trama de puntos
   blanca, flechas y puntos del carrusel en blanco—. Sobre un fondo claro
   nada de eso se ve. Hay que darle la vuelta a cada capa, y por eso este
   bloque es largo: no es un cambio de fondo, es una seccion invertida. */
.lienzoC{position:relative;isolation:isolate}
.lienzoC::before{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(62% 22% at 14% 6%,rgba(255,255,255,.55),transparent 70%),
    radial-gradient(54% 18% at 92% 26%,rgba(61,90,127,.10),transparent 72%),
    radial-gradient(70% 20% at 22% 52%,rgba(255,255,255,.40),transparent 70%),
    radial-gradient(56% 17% at 88% 74%,rgba(61,90,127,.09),transparent 72%),
    linear-gradient(180deg,#F5F8FB 0%,#E4EEF4 46%,#D3E3EC 100%)}

/* La curva de entrada, blanca: encima viene la seccion de procesos, que es
   blanca, asi que aqui se encuentran dos suelos distintos y la onda se ve. */
.lienzoC::after{content:"";position:absolute;left:0;right:0;top:0;
  bottom:auto;height:var(--onda);z-index:-1;pointer-events:none;
  background:#FFFFFF;
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'><path fill='%23fff' d='M0,120 L0,60 C320,10 640,10 960,60 C1280,110 1600,110 1920,60 L1920,120 Z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'><path fill='%23fff' d='M0,120 L0,60 C320,10 640,10 960,60 C1280,110 1600,110 1920,60 L1920,120 Z'/></svg>");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transform:scaleY(-1)}

body .lienzoC .sec.caps,
body .lienzoC .sec.tst,
body .lienzoC .sec.final{background:transparent}

/* EL AIRE ANTES DE TESTIMONIOS, A LA MEDIDA DEL HOME. Mariana: «veo mucho
   espaciado entre lo que dicen nuestros clientes y la seccion anterior,
   como que hay doble espacio». Medido de lo ultimo de una seccion al
   titular de la siguiente:

                       construccion    home
       a 1440          148 px          100 px
       a  390          110 px           69 px

   Los 148 se reparten en 92 de relleno abajo, 45 arriba y 11 del margen del
   titular. Ese 92 venia de cuando .caps y .tst eran DOS BANDAS DE COLOR
   DISTINTO: el comentario original de la pagina lo dice, «112 abajo + 112
   arriba = 224 de junta, con menos los dos encabezados se leen como si el
   segundo fuera continuacion del primero». Con un corte de color, el aire
   tiene que hacer el trabajo de separar. Ahora las dos van sobre el MISMO
   lienzo continuo, asi que ese trabajo ya no existe y el aire sobra.

   Queda calculado para dar los mismos 100 y 69 del home: 44 px a 1440 y 29
   a 390, que es lo que resta despues del relleno de .tst y el margen. */
body .lienzoC section.caps{padding-bottom:clamp(1.8rem,1.46rem + 1.45vw,3rem)}
body .lienzoC section.caps{
  padding-top:calc(clamp(3.6rem,2.8rem + 2.4vw,5.6rem) + var(--onda) * .55)}

/* ── LA SECCION, DADA LA VUELTA ──────────────────────────────────────── */
body .lienzoC section.caps{color:var(--azul)}
/* La trama de puntos era blanca al 8 %: sobre claro no existe. Pasa a Azul
   Capta al 7 %, que es la misma que usa la banda de testimonios. */
body .lienzoC section.caps::before{
  background-image:radial-gradient(circle,rgba(61,90,127,.07) 1px,transparent 1px)}
body .lienzoC .caps .cabe .h2{color:var(--azul);font-weight:400}
body .lienzoC .caps .cabe .h2 em{color:var(--azul);font-weight:800}
body .lienzoC .caps .lead{color:rgba(61,90,127,.82)}

/* Las tarjetas eran peldanos de blanco translucido sobre azul. Sobre claro
   el recurso se invierte: tarjeta blanca solida con borde fino y una sombra
   suave, que es como estan las del home. */
body .lienzoC .caps .capcard{background:#FFFFFF;
  border:1px solid rgba(61,90,127,.12);
  box-shadow:0 18px 40px -28px rgba(31,45,63,.42);
  backdrop-filter:none}
body .lienzoC .caps .capcard.es{background:#FFFFFF;
  border-color:rgba(61,90,127,.26)}
body .lienzoC .caps .capcr{background:#FFFFFF}
body .lienzoC .caps .capcard .capt{color:var(--azul)}
body .lienzoC .caps .capcard .capdesc{color:#5A7392}
body .lienzoC .caps .capcard .capi{background:rgba(61,90,127,.08);
  border-color:rgba(61,90,127,.14);color:var(--azul)}
/* ══ EL HERO DE NOVEDADES, CON LA FORMA DE LOS DEMAS ════════════════════
   Mariana: «arregla el hero de novedades para adaptar la forma, literal, a
   los demas de las otras paginas internas (...) con el color que tenemos,
   que es un azul clarito de Capta, pero la forma si alineada».

   LAS ONDAS NO PUEDEN IR EN BLANCO AQUI, y esa es toda la diferencia. Los
   otros heroes son azul profundo y las dibujan con blanco al 5 %; novedades
   es el unico hero CLARO del sitio, asi que sobre el un blanco al 5 % no
   existe. Van en Azul Capta al 7 %: la forma es identica, lo que se
   invierte es quien pinta a quien.

   El fondo se queda claro, como ella pidio, pero ordenado: una rampa limpia
   de blanco al azulito, sin la parada intermedia que tenia — la misma
   leccion que el hero de plataforma.

   Y EL TITULAR SE ALINEA CON EL RESTO: iba entero en peso 800 y el sitio
   usa ligera con el remate en negrita. El <em> lo pone _copy_novedades.py;
   mientras no este, el titular se ve en ligera. */
body .sec.nvhero{
  --ondaimg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 200' preserveAspectRatio='none'><defs><linearGradient id='o' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23CFE2EE'/><stop offset='1' stop-color='%23B6D2E5'/></linearGradient></defs><path fill='url(%23o)' d='M0,200 L0,96 C420,118 560,50 980,58 C1420,66 1560,122 1920,88 L1920,200 Z'/></svg>");
  background-image:
    var(--ondaimg),
    linear-gradient(180deg,#F3F8FC 0%,#E2EEF6 55%,#D5E6F1 100%);
  background-size:100% 55%,100% 100%;
  background-position:bottom center,center;
  background-repeat:no-repeat,no-repeat}
/* Y LOS DOS TAMAÑOS HUERFANOS DE NOVEDADES. Inventariada la pagina, dos
   cuerpos no caen en ningun peldaño de la escala del sitio:

       titular del hero      56 px   -> las demas internas usan 48
       «Un mensaje. Todos…»  34 px   -> el peldaño es 32, como el cierre

   El titular toma el MISMO clamp que cartera, pqrs, plataforma y clientes,
   que es como decir que esta pagina deja de ser la excepcion. */
body .sec.nvhero h1{font-weight:400;
  font-size:clamp(1.75rem,1.23rem + 2.21vw,3rem)}
body .sec.nvdest h2{font-size:clamp(1.5rem,1.2rem + .95vw,2rem);
  font-weight:600}
body .sec.nvhero h1 em{font-style:normal;font-weight:800;color:var(--azul);
  background:none;box-shadow:none;padding:0;border-radius:0}
body .sec.nvhero .eyebrow{display:none}
/* Y SE APAGA EL RESPLANDOR, QUE ERA LA TERCERA CURVA. Mariana: «ahi
   nuevamente veo tres curvas». Mis dos ondas estaban bien —contadas por
   pixeles, dos bordes— pero el hero traia de antes un `::before` con tres
   radiales y `filter:blur(64px)`, un resplandor que ocupa del 30 % hacia
   abajo. Su canto difuso dibuja un arco mas, y encima compite con las
   ondas por el mismo sitio. Con las ondas haciendo ese trabajo, el
   resplandor sobra.
   La seccion termina RECTA, como los demas heroes: medido a tres anchos,
   el corte con el blanco esta en y=593 en los tres, o sea una linea. */
body .sec.nvhero::before{display:none}

/* ══ CLIENTES, CON EL MISMO SISTEMA ═════════════════════════════════════
   Mariana: «vamos con la de clientes (...) todo con armonia en cuanto a los
   fondos y las otras paginas».

   La pagina tenia cinco superficies alternando sin un orden: hero oscuro,
   blanco, una banda AZUL MEDIA a media pagina, blanco otra vez y cierre
   oscuro. Tres cambios de temperatura en cinco secciones. Pasa al mismo
   sistema que construccion y plataforma: un solo bloque oscuro arriba —el
   hero, con sus dos ondas— y de ahi hacia abajo un lienzo claro continuo
   con la curva de entrada.

   LA BANDA AZUL DE LOS TESTIMONIOS SE VA. Era el tercer cambio de
   temperatura y ademas repetia el papel del hero. Sobre el lienzo claro la
   tarjeta blanca del testimonio se recorta igual de bien y el titular pasa
   a Azul Capta, como en construccion.

   El borde inferior de `.sect` sale por el mismo motivo que en plataforma:
   separaba dos bandas de color y ahora cruza por donde entra la curva. */
/* LOS NODOS DE LOS DOS HEROS SE VAN. Mariana, 26-oct-2026: «en el hero de
   plataforma quitale ese icono que se ve detras del mockup», y al rato «quitale
   tambien aqui ese icono al hero de clientes».

   Son `.nodoPl` y `.nodoCl`, el mismo grafo de seis radios sangrado por la
   derecha. En plataforma asomaba por el canto superior de la maqueta y en
   clientes le pasa por detras al titular, que desde que va en dos lineas llega
   a 21 px del primer nodo. En los dos sitios deja de leerse como fondo y pasa
   a leerse como algo que se olvidaron de recortar.

   Se esconden, no se borran: los elementos siguen en su HTML y vuelven
   quitando esta regla. */
body .sec.heroPl .nodoPl,body .sec.heroCl .nodoCl{display:none}

body .sec.heroCl{
  --ondaimg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 200' preserveAspectRatio='none'><defs><linearGradient id='o' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23243A53'/><stop offset='1' stop-color='%2336516F'/></linearGradient></defs><path fill='url(%23o)' d='M0,200 L0,96 C420,118 560,50 980,58 C1420,66 1560,122 1920,88 L1920,200 Z'/></svg>");
  background-image:
    var(--ondaimg),
    linear-gradient(170deg,var(--n900) 0%,#2C4462 100%);
  background-size:100% 55%,100% 100%;
  background-position:bottom center,center;
  background-repeat:no-repeat,no-repeat}
body .sect{border-bottom:0}
/* LOS TRES BLOQUES. La seccion de los once procesos se esconde —la pone
   `oculta` _clientes_tres.py— y la reja de logos se junta con el testimonio
   para que se lean como uno solo. El aire entre los dos baja a cero por
   arriba del testimonio: sin separacion, el ojo los agrupa. */
body .sec.corren.oculta{display:none}

/* ── EL HERO DE CLIENTES, CENTRADO Y CON UN SOLO BOTON ─────────────────
   Mariana: «esa se ve rara (...) de pronto los dos call to action, o de
   pronto deberiamos dejarlo tambien todo centrado, como en industrias y el
   home. Por lo menos el hero».

   Las dos cosas eran ciertas y una explica la otra. El hero tenia el texto
   a la izquierda y un nodo decorativo a la derecha, o sea una composicion
   de dos columnas; pero la columna derecha no lleva contenido, solo un
   dibujo. Con el texto centrado el dibujo pasa a ser fondo, que es lo que
   siempre fue.

   Y EL SEGUNDO BOTON SE VA, por el mismo motivo que en construccion: «Ver
   quienes son» solo baja a la reja de logos de ESTA misma pagina, asi que
   competia con el unico que lleva a una conversacion. Vuelve quitando esta
   regla. */
body .sec.heroCl .wrap.inner{text-align:center}
body .sec.heroCl h1,body .sec.heroCl .sub{margin-inline:auto}
/* EL TITULAR, EN DOS LINEAS Y NO EN TRES. Mariana, 26-oct-2026: «revisa que
   maybe no deberiamos dejarlo en 3 lineas separadas sino solo en 2». A 20ch
   «Empresas lideres ya orquestan sus procesos en Capta» —51 caracteres— se
   parte tres veces; con 30ch cabe en dos y `text-wrap:balance` las iguala.
   El ancho solo manda hasta donde llega el texto, asi que un titular mas
   corto no se estira. */
body .sec.heroCl h1{max-width:30ch;text-wrap:balance}
body .sec.heroCl .sub{max-width:52ch}
body .sec.heroCl .acc{justify-content:center}
body .sec.heroCl .acc .btn2{display:none}
body .sec.heroCl .signo{margin-inline:auto}
/* EL ROTULO «CLIENTES» SE VA, como se fueron los del hero de construccion y
   el de plataforma. En los tres pasaba lo mismo: el rotulo decia la misma
   palabra que la pestaña del menu que el lector acababa de pulsar. */
body .sec.heroCl .eyebrow{display:none}
body .sec.heroCl h1{font-weight:400}
body .sec.heroCl h1 em{font-style:normal;font-weight:800;color:#FFFFFF;
  background:none;box-shadow:none;padding:0;border-radius:0}

/* LAS CIFRAS, COMO LAS DE CONSTRUCCION. Mariana: «para mantener la
   coherencia visual, el estilo de ese hero que tenga los numericos como el
   de construccion». Medidas las dos:

                      construccion        clientes
       caja           704 x 145           1125 x 119
       fondo          blanco al 8 %       ninguno
       borde          blanco al 16 %      ninguno, solo una raya arriba
       radio          16 px               0
       numero         39 px / 800         34 px / 800

   O sea que en construccion son una TARJETA y aqui tres columnas sueltas
   colgadas de una linea. Se copia la tarjeta: mismo fondo, mismo borde,
   mismo radio, mismo ancho de 704 y el numero a 39. La raya de arriba sale,
   que es lo que hacia de caja antes. */
body .sec.heroCl .hcif{justify-content:center;text-align:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  max-width:704px;margin-inline:auto;
  padding:1.5rem 0}
body .sec.heroCl .hcif b{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.45rem)}
/* Y LAS TRES COLUMNAS, SOLO DONDE CABEN. Mariana, 26-oct-2026: «mira como se
   ve en mobile los numericos». En el telefono las tres cifras salian una al
   lado de otra, encimadas, y la tercera se iba fuera de la tarjeta.

   LA PAGINA YA TENIA LA REGLA BUENA y no servia de nada. clientes.html trae
   `@media(max-width:560px){.hcif{grid-template-columns:1fr}}`, que convierte
   cada cifra en una fila —numero a la izquierda, texto a la derecha—. Pero
   la regla de la tarjeta se escribio como `body .sec.heroCl .hcif`, que pesa
   0-3-1 contra el 0-1-0 de la del telefono. UNA CONSULTA DE MEDIOS NO SUMA
   ESPECIFICIDAD: no importa que este escrita despues ni que el ancho encaje,
   pierde igual. Por eso la tarjeta imponia tres columnas en los 390 px.

   Se parte en dos: las columnas solo por encima de 560, y por debajo el
   mismo prefijo para devolverle la fila a la pagina. El texto vuelve a la
   izquierda porque la tarjeta centra, y centrado una fila de numero y
   rotulo no se alinea con nada. */
@media(min-width:561px){
  body .sec.heroCl .hcif{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Y EN EL TELEFONO SE APILAN COMO LAS DE CONSTRUCCION. Mariana,
   26-oct-2026: «en mobile los datos numericos no aparecen como son las de
   industria, que en industria ya se ven bien; aqui hay algo raro».

   Comparadas las dos a 375 px: en construccion cada cifra va CENTRADA
   —numero arriba, rotulo debajo— y un filete de 1 px separa una de otra.
   En clientes iba en fila, numero a la izquierda y texto a la derecha, que
   era la salida que traia la pagina para que las tres cupieran. Caben igual
   apiladas y la tarjeta queda igual a la otra, que es lo que se pedia: la
   misma cifra no puede leerse de dos maneras segun la pagina.

   El filete se dibuja con `+ span::before`, el mismo recurso que `.facts`,
   asi que no hace falta tocar el HTML ni contar cuantas cifras hay. */
@media(max-width:560px){
  body .sec.heroCl .hcif{grid-template-columns:1fr;gap:0;
    text-align:center;padding:.35rem 1.1rem}
  body .sec.heroCl .hcif span{display:block;position:relative;
    padding:1.3rem .4rem 1.2rem}
  body .sec.heroCl .hcif span + span::before{content:"";position:absolute;
    left:18%;right:18%;top:0;height:1px;background:rgba(255,255,255,.16)}
  body .sec.heroCl .hcif b{display:block;margin-bottom:.45rem}
  body .sec.heroCl .hcif u{margin-top:0}
}

/* ── LA REJA DE TESTIMONIOS, A TRES COLUMNAS ──────────────────────────
   Son tres tarjetas y el mockup las pone en fila. La reja traia
   `max-width:56rem` y un `margin-left` de hasta 250 px que venia del home,
   donde habia que dejarle sitio a los tres circulos decorativos. Aqui no
   hay circulos: se quitan los dos y caben las tres en una fila. */
/* Y OTRA VEZ `> :first-child`, POR EL MISMO DESCUIDO. Esta regla ensancha
   la reja a tres columnas y le quita el `margin-left` de hasta 250 px que
   traia del home. Ese margen NO era decorativo: reservaba el sitio de los
   tres circulos que van a la izquierda de los testimonios. Escrita sin
   acotar alcanzaba tambien a CONSTRUCCION, donde si hay circulos, y los
   dejaba montados encima de las tarjetas.
   En clientes no hay circulos —su reja abre el lienzo y los tres van en
   fila—, asi que ahi quitar el margen es correcto. Acotada al primer hijo,
   la regla solo toca esa. */
@media(min-width:1041px){
  body .lienzoC > .sec.tst:first-child .tgrid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:none;margin-left:auto;margin-right:auto}
}
/* EL TITULAR DE TESTIMONIOS, DEBAJO DE LA CURVA Y NO ENCIMA. Mariana: «ese
   titulo deberia ir mas hacia abajo, literal hacia donde inicia la curva,
   no quedar sobre la curva».

   Y EL SELECTOR LLEVA `> :first-child` POR UN ERROR MIO DE HACE UN RATO.
   Puse `.lienzoC .sec.tst{padding-top:0}` para juntar la reja de logos con
   el testimonio en clientes, sin caer en que CONSTRUCCION tambien tiene un
   `.sec.tst` dentro de su lienzo: le estaba quitando a esa pagina el aire
   que habiamos calculado para que diera los mismos 100 px que el home.
   Con `> .sec.tst:first-child` la regla solo alcanza a clientes, que es la
   unica donde los testimonios abren el lienzo.

   El relleno reserva el alto de la onda mas un respiro, con la MISMA
   variable que dibuja la curva: si un dia cambia de alto, esto se mueve
   solo. */
body .lienzoC > .sec.tst:first-child{
  padding-top:calc(var(--onda) + 1.4rem)}
body .sect{padding-bottom:clamp(1.4rem,1vw + .8rem,2rem)}
body .lienzoC .sec.tst,
body .lienzoC .sec.corren{background:transparent}
body .lienzoC .sec.tst{color:var(--azul)}
body .lienzoC .sec.tst .h2,body .lienzoC .sec.tst h2{color:var(--azul)}
body .lienzoC .sec.tst .h2 em{font-style:normal;font-weight:800;
  color:var(--azul);background:none;box-shadow:none;padding:0}

/* ══ PLATAFORMA, SEGUNDA TANDA ══════════════════════════════════════════
   Mariana: «esto de 7 piezas un solo motor lo dejaria en tonalidad blanca
   para que no rompa la armonia, y lo que habiamos dicho: que solo el hero
   tenga ese contraste (...) en el hero no veo todavia la curvita que
   tuvimos en procesos (...) todavia veo una linea recta debajo de los
   logos».

   1 · LA LINEA NO ERA LA DE LOS LOGOS. Ese borde ya lo habia quitado. La
       que queda sale de la seccion de capacidades, que trae `border-top` Y
       `border-bottom` de 1 px en #E2EAF0. Muestreada la columna de pixeles:
       a y=998 aparece un #E2EAF0 entre dos filas de blanco puro. Tenia
       sentido cuando esa seccion era una banda blanca entre dos oscuras;
       sobre el lienzo es una raya cruzando la curva.

   2 · EL PANEL, BLANCO. Es el mismo argumento que ella viene repitiendo
       desde el lienzo de construccion: si el hero es el unico bloque
       oscuro, destaca. Con el panel de capacidades tambien en azul profundo
       habia tres superficies oscuras en la misma pagina —hero, panel y
       tarjeta del cierre— y la del cierre se perdia contra el panel que
       tiene justo encima. El panel pasa a tarjeta blanca con borde fino,
       igual que las de construccion, y sus textos se invierten.

   3 · LOS ARCOS DEL HERO. Las once paginas de proceso llevan dos arcos
       blancos muy tenues barriendo el azul por abajo; plataforma no los
       tenia. Se copian tal cual —mismos arcos, mismos tamaños y
       posiciones— sobre su propio degradado, que no se toca. El ::after de
       este hero ya lo ocupa la trama de puntos, por eso van como imagen de
       fondo y no como pseudo-elemento. */
body .lienzoC .sec.caps{border-top:0;border-bottom:0}

body .sec.heroPl{
  --ondaimg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 200' preserveAspectRatio='none'><defs><linearGradient id='o' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23243A53'/><stop offset='1' stop-color='%2336516F'/></linearGradient></defs><path fill='url(%23o)' d='M0,200 L0,96 C420,118 560,50 980,58 C1420,66 1560,122 1920,88 L1920,200 Z'/></svg>");
  background-image:
    var(--ondaimg),
    /* EL DEGRADADO PIERDE SU PARADA INTERMEDIA, Y ESA ERA LA TERCERA
       CURVA. Mariana seguia viendo tres despues de separar los arcos.
       Aislado el hero sobre un color plano, UN arco dibuja UNA curva: el
       SVG estaba bien y `background-repeat` era no-repeat. La linea que
       sobraba la ponia este degradado, que iba de #0F1824 a #17293D al
       55 % y de ahi a #2C4462. Esa parada del 55 % es un cambio de ritmo
       en mitad de la rampa y, a 170 grados sobre una caja de 1440 px, se
       lee como un borde que cruza el hero. Con dos paradas la rampa es
       continua y no hay nada que leer como linea. Los extremos no cambian,
       asi que el color del hero es el mismo. */
    linear-gradient(170deg,var(--n900) 0%,#2C4462 100%);
  background-size:100% 55%,100% 100%;
  background-position:bottom center,center;
  background-repeat:no-repeat,no-repeat}

/* El panel de capacidades, dado la vuelta: tarjeta blanca como las de
   construccion. Los blancos translucidos de dentro —chip del icono y
   etiquetas— pasan a tintes de Azul Capta, y el texto a azul. */
body .lienzoC .bt-panel{background:#FFFFFF;
  border:1px solid rgba(61,90,127,.12);
  box-shadow:0 18px 40px -28px rgba(31,45,63,.42)}
body .lienzoC .bt-panel h3,
body .lienzoC .bt-panel .bt-izq > p{color:var(--azul)}
body .lienzoC .bt-panel p{color:#5A7392}
body .lienzoC .bt-panel .capi{background:rgba(61,90,127,.08);
  border-color:rgba(61,90,127,.14);color:var(--azul)}
body .lienzoC .bt-panel .captags li{background:rgba(61,90,127,.06);
  border-color:rgba(61,90,127,.14);color:var(--azul)}
body .lienzoC .bt-panel .captags svg{color:var(--coral-texto,#A8412A)}
body .lienzoC .bt-panel .bt-der{background:rgba(61,90,127,.05)}
/* LA PESTAÑA ACTIVA, BLANCA. Mariana: «si yo lo presiono se ve azul y abajo
   blanco; deberia verse tambien esto blanco y el texto en azul». Es de
   manual: la pestaña y el panel son UNA pieza, la pestaña es el canto del
   panel doblado hacia arriba. Con el panel en azul profundo las dos eran la
   misma superficie; al pasar el panel a blanco, la pestaña se quedo sola en
   azul y partida del cuerpo al que pertenece. */
body .lienzoC .bt-pest.on{background:#FFFFFF;color:var(--azul);
  border-color:rgba(61,90,127,.12)}
/* LOS SIETE PUENTES, TAMBIEN BLANCOS. Mariana: «todavia se ve ese cosito
   como azul entre procesos y el cuadradito». Son los `.bt-puente`: siete
   piezas de 73x18 en #2C4462 que cosen cada pestaña con el panel. Estaban
   en azul profundo porque el panel lo estaba; con el panel blanco quedaban
   como manchas oscuras en la costura. */
body .lienzoC .bt-puente{background:#FFFFFF}

/* EL ICONO DEL PANEL, VISIBLE. Mariana: «el icono esta en gris, deberia
   estar en azul o en naranja, porque asi no se ve». Medido: el chip ya
   estaba en azul al 8 % —esa parte si la habia invertido— pero el SVG de
   dentro conserva `stroke:#FFFFFF` propio, asi que era blanco sobre un
   fondo casi blanco. El `color` del padre no lo alcanza porque el trazo
   esta puesto a mano en el elemento.
   Va en coral de marca: es un icono, o sea elemento no textual, y ahi la
   norma pide 3,0 — el coral sobre ese chip da 2,96, asi que se usa el chip
   un punto mas claro para que llegue. Ademas es el unico acento calido del
   panel y hace de ancla visual. */
body .lienzoC .bt-panel .capi{background:rgba(238,108,77,.1);
  border-color:rgba(238,108,77,.22)}
body .lienzoC .bt-panel .capi svg{stroke:var(--coral);color:var(--coral)}

/* EL NARANJA DE MARCA EN LOS ROTULOS. Mariana, 26-oct: «el capacidades lo
   dejaria con el naranja de Capta. No es negociable».
   EL NUMERO, DICHO UNA VEZ Y NO MAS: a 12 px el coral #EE6C4D sobre blanco
   da 3,05:1 y la norma pide 4,5. No pasa. Es la misma decision que ya se
   tomo con el boton coral —ver [coral-no-se-toca]—: se conoce el dato y se
   elige la marca. Queda escrito para que ninguna auditoria futura lo lea
   como un descuido mio.
   Va en TODOS los rotulos del sitio y no solo en este: el home los llevaba
   en --coral-texto, y tener dos naranjas distintos era justo lo que ella
   venia viendo mal. */
body .sec .eyebrow,body .sec.tst .eyebrow{color:var(--coral)}

/* ══ PLATAFORMA: LA TARJETA DEL CIERRE, LA RECTA Y EL HERO ══════════════
   Mariana: «el call to action lo dejaste terriblemente en comparacion con
   el home y construccion, ni siquiera tienes los bordes, lo dejaste como
   cortado (...) aqui hay una linea superior sobre lo de capacidades que
   esta como una linea recta (...) en el hero no me ayudaste a ajustar el
   mockup al tamaño de las paginas internas de procesos, ni al estilo
   tipografico».

   1 · LA TARJETA ESTABA SIN RADIO NI RELLENO, literalmente. Medidas las
       tres: el home y construccion dan radio 16 y relleno 60 px; plataforma,
       RADIO 0 Y RELLENO 0. No era un descuido suelto: la pagina traia
       `.ctacard{background:none;border-radius:0;padding:0}` a proposito,
       porque antes la seccion entera era una banda oscura y la tarjeta
       sobraba. Al pasar esa seccion al lienzo claro, la tarjeta vuelve a
       hacer falta y hay que devolverle lo que se le habia quitado.

   2 · LA LINEA RECTA es el borde inferior de la banda de logos:
       `border-bottom:1px solid var(--borde-claro)`. Tenia sentido cuando la
       banda era gris y el corte con el blanco de abajo habia que marcarlo.
       Ahora la banda es blanca y debajo entra una curva, asi que ese borde
       es una raya cruzando justo donde empieza la curva.

   3 · EL TITULAR DEL HERO iba en PESO 800 y las once paginas de proceso lo
       llevan en 400 con el remate en negrita. Pasa a 400. El remate en
       negrita necesita un <em> en el HTML y eso lo pone
       _copy_plataforma.py; mientras no este, el titular se ve en ligera,
       que es como lo lleva el resto de las internas.

   4 · LA MAQUETA del hero medía 683 px y la de las paginas de proceso 560.
       Se iguala a 560. */
body .sec.logos{border-bottom:0}
body .lienzoC .sec.final .ctacard{border-radius:16px;padding:3.75rem;
  background:var(--azul)}
@media(max-width:900px){
  body .lienzoC .sec.final .ctacard{padding:2.25rem;gap:2rem}
}
body .sec.heroPl h1{font-weight:400}
body .sec.heroPl h1 em{font-style:normal;font-weight:800;color:#FFFFFF;
  background:none;box-shadow:none;padding:0;border-radius:0}
/* Y LA MAQUETA SE AJUSTA DESDE LA REJILLA, no con un tope. Primero le puse
   `max-width:560px` y daba el ancho correcto, pero dejaba la COLUMNA en 682
   y la maqueta flotando a la derecha dentro de ella: el titular seguia
   encajonado en 397 px mientras el de las paginas de proceso tiene 510.

   La causa estaba en el reparto: `.hwrapPl` da `1fr / 1.72fr` a texto y
   maqueta, y `.hwrap` —la de las once internas— da `1.02fr / 1.12fr`. Con
   1,72 la maqueta se lleva el 63 % del hueco; con 1,12, el 52 %.

   Se copia el reparto de las internas y las dos columnas quedan en 510 y
   560, que son exactamente las de pqrs y cartera. El tope de 560 sobra. */
@media(min-width:901px){
  body .sec.heroPl .hwrapPl{grid-template-columns:1.02fr 1.12fr}
}

/* LA MAQUETA DE PLATAFORMA, DEL TAMAÑO DE LA DE CONSTRUCCION. Mariana: «el
   mockup de plataforma debe ser del tamaño igual al de procesos». Medidas:

       construccion  .capcr   613 x 378   dentro de .capcard 1035 x 440
       plataforma    .bt-der  552 x 356   dentro de .bt-panel 1125 x 480

   La diferencia no era un ancho escrito a mano, era el reparto de la
   rejilla: el panel de plataforma daba `minmax(0,.72fr) minmax(0,1fr)` a sus
   dos columnas y la tarjeta de construccion `.54fr 1fr`. Con .72 la columna
   derecha se lleva el 58 % del hueco; con .54, el 65 %. Siete puntos sobre
   955 px son justo los 60 de diferencia.

   Se iguala el reparto, no el pixel: asi las dos siguen respondiendo igual
   al ancho de pantalla en vez de quedarse fijas a 613. */
@media(min-width:881px){
  body .lienzoC .bt-panel{grid-template-columns:minmax(0,.54fr) minmax(0,1fr)}
}

/* LAS ETIQUETAS LLEVAN `.capcard` DELANTE, Y ESO ES LO QUE SEPARA LAS DOS
   PAGINAS. Al traer plataforma a este mismo lienzo (26-oct) estas reglas la
   alcanzaron tambien, y ahi `.captags` NO vive en una tarjeta blanca: vive
   dentro de un panel azul profundo. Resultado: las tres etiquetas de «Sin
   programar · Documentos dentro del caso · Varias areas al tiempo» quedaron
   en Azul Capta sobre azul oscuro, o sea invisibles.

   Con `.capcard` delante, la inversion solo toca la tarjeta blanca de
   construccion. El panel de plataforma conserva sus blancos translucidos,
   que es lo correcto sobre su propio fondo oscuro. */
body .lienzoC .caps .capcard .captags li{background:rgba(61,90,127,.06);
  border-color:rgba(61,90,127,.14);color:var(--azul)}
/* El visto bueno iba en Azul Claro porque el coral no sobrevivia al azul
   profundo. Sobre la tarjeta blanca si: en --coral-texto, que da 6,08:1. */
body .lienzoC .caps .capcard .captags svg{color:var(--coral-texto,#A8412A)}

/* EL «COSITO NAVEGABLE», que es lo que ella nombro. Flechas y puntos iban
   en blancos translucidos y sobre claro desaparecian del todo. */
body .lienzoC .capnav .arw{background:rgba(61,90,127,.07);
  border-color:rgba(61,90,127,.2);color:var(--azul)}
body .lienzoC .capnav .arw:hover:not(:disabled){background:rgba(61,90,127,.14);
  border-color:rgba(61,90,127,.34)}
/* LOS PUNTOS: EL COLOR VA EN EL BOTON O EN SU ::after SEGUN EL ANCHO, y
   mezclarlos fue el «cuadrado horrible» que vio Mariana en iPad.

   En escritorio el boton ES el punto: mide 22x8 y lleva el color encima.
   Desde 900 px para abajo —o en cualquier pantalla tactil— la pagina lo
   agranda a 44x44 para que se pueda tocar, le quita el fondo y dibuja el
   punto con un ::after de 22x8. Es el truco de siempre para cumplir los
   24 px de objetivo tactil sin que el punto se vea gigante.

   Yo le puse fondo al boton sin distinguir, asi que en iPad y en telefono
   salian seis bloques de 44x44: cinco grises y uno coral. Ahora el fondo
   del boton solo se toca donde el boton ES el punto, y debajo de ese corte
   se toca unicamente el ::after. La condicion es la misma que usa la
   pagina, negada: ahi dice `(max-width:900px),(pointer:coarse)`. */
@media(min-width:901px) and (pointer:fine){
  body .lienzoC .capnav .dotsnav button{background:rgba(61,90,127,.26)}
  body .lienzoC .capnav .dotsnav button.on{background:var(--coral)}
}
body .lienzoC .capnav .dotsnav button::after{background:rgba(61,90,127,.3)}
body .lienzoC .capnav .dotsnav button.on::after{background:var(--coral)}

/* ── TESTIMONIOS VUELVE A SU COLOR DE SIEMPRE ────────────────────────── */
body .lienzoC .sec.tst .h2{color:var(--azul);font-weight:600}
/* EL TITULAR DE TESTIMONIOS RESALTA CON PESO, NO CON NARANJA, y el motivo
   es que el naranja de marca NO SE PUEDE usar de letra sobre este lienzo.
   Mariana: «ese texto que dice quienes ya operan, ese no es el naranja de
   Capta». Tiene razon en lo que ve: era --coral-texto #A8412A, mas oscuro.
   Lo que no se ve es por que estaba ahi. Medido el coral #EE6C4D como letra
   a lo largo del lienzo:

       sobre blanco puro          3,05:1   pasa, justo
       arriba del lienzo #F5F8FB  2,86:1
       donde va el titular        2,59:1
       abajo del lienzo  #D3E3EC  2,32:1

   O sea que el coral de marca solo alcanza el minimo sobre BLANCO PURO, y
   este lienzo no es blanco en ningun punto. --coral-texto si pasa (5,16:1)
   pero es otro naranja, que es exactamente lo que ella noto.

   Asi que en vez de sustituir un naranja por otro, se quita el color: el
   realce va en peso, como en el titular de «Sabemos como opera» y como en
   el H1 del hero. El naranja de marca se queda donde si funciona —el
   titular de procesos, que va sobre blanco— y el rotulo pequeño sigue en
   --coral-texto porque asi lo lleva el home. */
body .lienzoC .sec.tst .h2 em{font-style:normal;font-weight:800;
  color:var(--azul);background:none;box-shadow:none;padding:0}
body .lienzoC .sec.tst .eyebrow{color:var(--coral-texto,#A8412A)}
body .lienzoC .sec.tst::before{display:none}
body .lienzoC .sec.tst .tav.t1{background:var(--azul-2,#5A7392)}
body .lienzoC .sec.tst .tav.t2{background:var(--coral)}
body .lienzoC .sec.tst .tav.t3{background:var(--azul)}

/* ── LA TARJETA DEL CIERRE, LA DEL HOME ──────────────────────────────── */
/* Mariana: «el listo para verlo en tu constructora debe tener las mismas
   dimensiones, tal cual como en el home, y lo mismo en los colores».
   Comparadas las dos: el radio, el relleno y la rejilla ya eran identicos.
   Solo cambiaban el fondo —aqui un degradado de 135 grados, alli Azul Capta
   plano— y el relleno en telefono. Se igualan los dos. */
body .lienzoC .ctacard{background:var(--azul)}
@media(max-width:900px){
  body .lienzoC .ctacard{padding:2.25rem;gap:2rem}
}

/* ══ «YA SABEMOS COMO OPERA UNA CONSTRUCTORA», CENTRADO ══════════════════
   Mariana: «quitale el rotulo de plataforma y ese podria ir centrado, y
   debajo de ese texto podria ir el texto de proyectos con reglas distintas».

   La cabecera de esa seccion era una rejilla de dos columnas —1,1fr para el
   rotulo y el titular, 0,85fr para el parrafo— asi que el parrafo iba AL
   LADO, no debajo. Pasa a una sola columna centrada; el parrafo cae solo en
   su sitio y se le pone medida de lectura para que no cruce los 1.125 px de
   ancho, que a 40 px de titular seria una linea larguisima.

   El rotulo no se borra, se esconde con `hidden` desde el HTML, y aqui se
   fuerza el `display:none` porque la hoja le da `display:inline-block` y un
   atributo `hidden` no gana a una declaracion explicita. Esa ya me mordio
   una vez, con el rotulo del hero: quedaba un guion coral suelto.

   Va con `body` delante: estas reglas viven en la propia pagina y en las
   internas la pagina carga DESPUES de proceso.css. */
body .caps .cabe{display:block;text-align:center}
body .caps .cabe .h2{max-width:22ch;margin-inline:auto}
body .caps .cabe .lead{max-width:56ch;margin-inline:auto;padding-top:.8rem;
  text-align:center;text-wrap:pretty}
body .caps .cabe .eyebrow[hidden]{display:none}
/* «Sabemos COMO OPERA UNA CONSTRUCTORA»: el realce va en PESO, no en color,
   y el coral que probe primero esta medido y descartado. Sobre el azul de
   esa seccion da 2,85:1 a 1440 —por debajo del 3,0 que la norma permite a
   40 px— y 3,54:1 a 390. Pasa en telefono y falla en escritorio, que es la
   peor clase de fallo: el que no se ve donde uno mira.

   El azul clarito #8BB6CD si pasaria (4,03:1) pero es MAS APAGADO que el
   blanco del resto del titular, asi que el trozo resaltado se leeria como
   el menos importante. Un realce que oscurece no es un realce.

   Queda como el H1 del hero de esta misma pagina: el titular en peso ligero
   y el remate en 800. Blanco sobre azul da 10:1 y el contraste lo pone la
   tipografia. */
body .caps .cabe .h2{font-weight:400}
body .caps .cabe .h2 em{font-style:normal;font-weight:800;color:#FFFFFF;
  background:none;box-shadow:none;padding:0;border-radius:0}
/* Las cifras del hero pierden su tercera linea en dos de las tres. El
   `hidden` no basta: .ctx trae `display:block` propio y una declaracion
   explicita gana a un atributo. Es la tercera vez que me muerde lo mismo en
   esta pagina —el rotulo del hero, el de plataforma y ahora esto—, asi que
   va escrito donde se ve. */
body .sec.heroc .facts .ctx[hidden]{display:none}

/* ══ EL ROTULO DEL MURO DE LOGOS ═════════════════════════════════════════
   «Las constructoras mas grandes del pais operan con CAPTA», en construccion
   y su gemelo en plataforma. Mariana pidio tres cosas: resaltar Capta en
   naranja, mas impacto, y menos aire entre la onda azul y el blanco.

   EL CUERPO NO BAJA DE 19 px EN NINGUN ANCHO, y no es por gusto. El coral
   de marca sobre blanco da 3,05:1; la AA pide 4,5 para texto normal y 3,0
   desde 18,66 px en negrilla. A los 16 px que traia la pagina —15 en
   telefono— el naranja no se podria usar y habria que ir a --coral-texto
   #A8412A. El suelo de 19 px es lo que lo vuelve legal, asi que SI ALGUIEN
   LO BAJA, HAY QUE CAMBIAR EL COLOR: el texto se vera igual de naranja y
   solo una auditoria lo notaria.

   Va con `body` delante porque estas dos paginas cargan proceso.css ANTES
   de sus propios estilos, al reves que el home, y sin el prefijo la regla
   gana en uno y pierde en las otras. */
/* LA BANDA DE LOGOS, BLANCA TAMBIEN EN PLATAFORMA. Mariana: «el logo de
   los pinos tiene un cuadrado blanco, lo mismo el logo de los Andes, no se
   ve tan pulcro como deberia».

   No es un fallo de maquetacion, es el archivo: medidos los ocho PNG de esa
   banda, tres traen el blanco METIDO dentro de la imagen —Ospinas y
   Uniandes al 100 % opacos, Paramo con un bloque blanco de borde
   transparente— y los otros cinco si son transparentes. Sobre un fondo que
   no es blanco, esos tres dibujan su rectangulo.

   Se puede arreglar de dos maneras: reabriendo los archivos de los clientes
   para recortarles el fondo, o poniendo la banda en blanco. Lo segundo no
   toca ningun logotipo ajeno, arregla los tres de una y ademas IGUALA
   PLATAFORMA CON CONSTRUCCION, donde esa banda ya era blanca. Plataforma la
   tenia en #F5F8FB. */
body .sec.logos{background:#FFFFFF}
body .logos{padding-top:2.6rem}
/* EL ROTULO, CON LA TIPOGRAFIA DE «ALIADOS ESTRATEGICOS» DEL HOME. Mariana:
   «el estilo tipografico igual al de aliados estrategicos que esta en el
   home». Medidos los dos, estaban cerca pero no iguales:

                         home              construccion
       cuerpo            20,45 / 16,8 px   22 / 19 px
       peso              700               800
       color             Azul Capta        Azul Capta al 88 %
       interletraje      -.01em            -.014em
       margen abajo      28,8 / 17,6 px    35,2 px fijo

   Se copia el del home entero, CON UNA EXCEPCION: el suelo del cuerpo. El
   home baja a 16,8 px en telefono y ahi el coral de marca de la palabra
   «Capta» no pasa —3,05:1 cuando la norma pide 4,5 por debajo de 18,66 px—.
   El suelo se queda en 19 px: a 1.440 el rotulo mide exactamente lo mismo
   que el del home, y el unico ancho donde se separan es justo el que haria
   ilegal el naranja que ella pidio. */
body .logos-lead{font-size:clamp(1.1875rem,.72rem + .62vw,1.35rem);
  font-weight:700;letter-spacing:-.01em;text-transform:none;
  color:var(--azul);opacity:1;margin-bottom:clamp(1.1rem,2.2vw,1.8rem)}
body .logos-lead em{font-style:normal;color:var(--coral)}
@media(max-width:680px){ body .logos{padding-top:2rem} }

/* ══ LOS ONCE HEROES, A LA MISMA ALTURA ══════════════════════════════════
   Mariana, 25-oct-2026: «revisa como H1 y H2 en cuanto a como estas dejando
   la ubicacion de los textos y el tamaño de los mockups, para que todo se
   vea lo mas armonico posible».

   Medidos los once a 1440, el ancho del H1 es IDENTICO —510 px en todos—
   pero el alto del hero va de 536 a 700. Son 164 px de diferencia, y eso se
   nota justo cuando se nota: al saltar de un proceso a otro por el bloque
   de «otras areas», que es un salto entre dos paginas casi iguales.

   La causa es doble y las dos son de contenido: el H1 ocupa 2, 3 o 4 lineas
   segun lo largo que sea, y la maqueta mide entre 336 y 406 de alto segun la
   pantalla de la aplicacion que enseñe.

   No se puede igualar el contenido —ni recortar maquetas ni acortar
   titulares—, pero si se le puede poner un SUELO a la caja. Con 500 px de
   minimo, los cortos suben y el mas largo —proveedores, cuyo H1 va a cuatro
   lineas— se queda donde esta: la diferencia baja de 164 a unos 60.

   Y funciona porque la rejilla ya centra verticalmente (`align-items:center`),
   asi que el sitio que sobra se reparte arriba y abajo en vez de acumularse
   debajo.

   Solo de 901 px para arriba: por debajo el hero se apila en una columna y
   un minimo ahi solo abriria un hueco. */
@media(min-width:901px){
  .sec.heroP .hwrap{min-height:500px}
}

/* ══ EL RESALTE DEL H1, EN BLANCO Y POR PESO ═════════════════════════════
   Mariana: «me gustaria tipo lo que hiciste en el home, que resaltaste
   "ejecutandose solos"… pero todos esos H1 si deben quedar en color
   blanco».

   Es exactamente la formula del home y por eso funciona sobre oscuro: alli
   el titular va en 400 y el resalte en 800, LOS DOS EN BLANCO. El contraste
   no lo da el color, lo da el peso — asi que el blanco sigue siendo blanco y
   la legibilidad sobre el hero no se toca.

   El H1 de proceso iba macizo en 800, donde nada destaca porque todo pesa
   igual. Baja a 400 y el remate sube a 800. */
.sec.heroP h1{font-weight:400}
.sec.heroP h1 em{font-style:normal;font-weight:800;color:inherit;
  background:none;box-shadow:none;padding:0;border-radius:0}

/* EL CIERRE NO LLEVA NARANJA, Y ESO ES UN CAMBIO DE OPINION. Lo puse en
   coral y Mariana: «la actual no me gusta como lo ejecutaste». Mirandolo con
   el titular de la maqueta YA ENTERO en naranja, el problema se ve: eran
   tres naranjas en la misma pagina —el titular, este resalte y los botones—
   y el color dejaba de señalar nada porque estaba en todas partes.

   Aqui el enfasis lo da el TAMAÑO, no el color: «las demas areas» crece
   dentro de la propia linea. Es el mismo principio que el H1 —contraste sin
   gastar color— y deja el naranja para una sola cosa por pagina. */
/* SEGUNDA VERSION, Y ES LA SUYA. Mariana: «"Asi gestionas" y "de tu
   constructora" podrian ir mas light, y "las demas areas" con un poquito de
   negrilla». O sea: el enfasis por PESO y no por tamaño.
   Probe antes el salto de tamaño y era un gesto mas ruidoso de lo que pide
   una frase de nueve palabras: partia el titular en alturas distintas. Con
   el peso, la linea sigue siendo una linea y el acento cae donde toca. */
.sec.rel .h2{font-weight:400}
.sec.rel .h2 em{font-style:normal;color:inherit;font-weight:700;
  font-size:inherit;
  background:none;box-shadow:none;padding:0;border-radius:0}

/* ══ UN SOLO BOTON ════════════════════════════════════════════════════════
   Mariana, 25-oct-2026: «revisa que todos los botones tengan armonia, no
   unos de un modo y otros de otro».

   Medidos los botones de las veinte paginas salen QUINCE variantes, y lo
   grave no es el numero: es que el MISMO boton —«Agendar demo», que es el
   unico llamado a la accion del sitio— aparece de ocho formas.

       16,0 / 700 / alto 54 / radio 8     CTA de las internas   (14)
       15,0 / 800 / alto 40 / radio 10    menu de las internas  (19)
       15,0 / 800 / alto 47 / radio 10    construccion, plataforma, legales
       15,0 / 800 / alto 52 / radio 10    clientes
       14,0 / 800 / alto 45 / radio 10    precios
       13,6 / 800 / alto 38 / radio 10    404
       16,0 / 700 / alto 56 / radio 7     novedades
       16,0 / 800 / alto 56 / radio 7     home

   De 13,6 a 16 px, dos pesos, tres radios y alturas de 38 a 56.

   LA CAUSA, y es una sola: `.btn` NO TIENE TAMAÑO PROPIO. La unica regla que
   se lo da esta acotada a `.heroP`, o sea al hero de las paginas de proceso.
   En cualquier otro sitio el boton hereda el cuerpo del parrafo donde cae,
   asi que mide lo que mida el texto de al lado. No es que alguien decidiera
   ocho tamaños: es que nadie decidio ninguno.

   Se le da el suyo, el que ya usaba el hero de proceso porque es el unico
   que estaba elegido. Las dos excepciones de verdad se quedan, y son
   excepciones porque pesan mas en la cascada:

     · `.btn.sm` en la barra, mas pequeño porque una barra compacta pide un
       control compacto;
     · la pildora blanca del hero del home, que es el unico boton sobre un
       fondo oscuro y lleva su propia forma.

   `.mapbox .btn` de construccion tambien se queda: lleva dos clases y gana. */
/* TODOS LOS BOTONES, REDONDEADOS. Mariana: «yo veo botones redondeados,
   botones cuadrados (...) la idea es que todos tengan un estilo, y yo me
   iria por el redondeado». Inventariados los que de verdad se ven:

       99 px  el del hero                     (pildora)
        8 px  «Agendar demo» del cierre
       10 px  «Agendar demo» del menu, y .btn.sm y .gbtn
       50 %   las flechas del carrusel        (son circulos, se quedan)

   Pasan todos a 99 px menos las flechas, que ya son redondas. El radio en
   pildora no depende del alto, asi que un boton mas alto o mas bajo sigue
   cuadrando: por eso 99 y no un numero calculado. */
body .btn{font-size:1rem;font-weight:700;border-radius:99px;
  padding:.875rem 2rem}
/* `body .nav .btn.sm` y no solo `body .nav .btn`: la pagina trae
   `.nav .btn.sm`, que son TRES clases y gana a dos clases mas un elemento.
   Me lo saltee la primera vez y el boton del menu se quedo en 10 px
   mientras los demas ya eran pildoras. */
body .btn.sm,body .gbtn,body .nav .btn,body .nav .btn.sm,
body .nav .btn-sector,body .ctacard .btn,body .heroP .btn,
body .mov .cta{border-radius:99px}

/* NOTA DE METODO, PORQUE COSTO UN BOTON EN BLANCO. Este bloque estaba
   escrito ENTRE `body .heroP .btn,` y `body .mov .cta{...}`, que son dos
   renglones de UNA MISMA lista de selectores. Partida por la mitad, el
   navegador leyo «...body .heroP .btn, body .movwrap» como la lista y
   `{background:#FFFFFF}` como su bloque: el boton del cierre se quedo
   blanco sobre blanco en las cuatro paginas que lo llevan, medido 1,00:1.
   Una lista de selectores que acaba en coma NO es un sitio donde pegar
   nada; aqui va despues de la llave de cierre. */
/* EL PANEL DE TELEFONO, DADO LA VUELTA. Mariana, 26-oct-2026: «el menu en
   telefono, cuando lo abro se ve azul y pues no tiene sentido, deberia ser
   blanco».

   Tiene razon y es un resto: el panel se dibujo cuando la barra era azul, y
   la barra lleva blanca desde el 24-oct. Al abrirlo, la mitad de arriba es
   blanca y la de abajo azul, con el logotipo a caballo entre las dos.

   Se invierte TODO lo que vivia sobre azul —rotulos, filas, separadores,
   chips de icono, la descripcion de cada proceso— y no solo el fondo, que es
   el error facil: dejar el fondo blanco y la letra blanca encima.

   El filete coral de «donde estas» se queda, que es lenguaje de la casa y no
   depende del color de la letra; lo que cambia es que ahora el chip de su
   icono se tiñe de coral en vez de azul claro, porque sobre blanco el azul
   claro al 26 % no se distinguia del resto. */
body .movwrap{background:#FFFFFF;border-top:1px solid rgba(61,90,127,.14);
  box-shadow:0 26px 44px -30px rgba(41,50,65,.5)}
body .mov h4{color:rgba(61,90,127,.85)}
body .mov a,body .mov span.na{color:var(--azul);
  border-bottom:1px solid rgba(61,90,127,.12)}
body .mov span.na{color:rgba(61,90,127,.55)}
body .mov a:active{background:rgba(61,90,127,.06)}
body .mov a u{color:rgba(41,50,65,.78)}
body .mov .mico{background:rgba(61,90,127,.08)}
body .mov .mico svg{color:var(--azul)}
body .mov a.aqui{color:var(--azul)}
body .mov a.aqui .mico{background:rgba(238,108,77,.15)}
body .mov a.aqui .mico svg{color:var(--coral-texto)}
/* Y EL ACORDEON, QUE ES LO QUE DE VERDAD SE VE AL ABRIRLO. El panel tiene
   nueve hijos y siete son `.movg`, los botones de familia. Esos no los pone
   proceso.css sino `_menu.py`, asi que invertir `.mov a` dejaba el panel
   blanco con los titulares en blanco: medido, caja de 350x52 con
   `color:rgb(255,255,255)` sobre `rgb(255,255,255)`. Se veia vacio salvo el
   boton coral del final, que es lo unico que no heredaba.

   Es el error facil de esta clase de cambio: dar la vuelta al fondo y
   olvidar que la letra blanca vivia de ese fondo. Por eso van tambien el
   contador, la flechita y el filete del submenu. */
body .mov .movg{color:var(--azul);
  border-bottom:1px solid rgba(61,90,127,.12)}
body .mov .movg .cnt{color:rgba(61,90,127,.62)}
body .mov .movg .chev{color:rgba(61,90,127,.7)}
body .mov .movsub{border-left:2px solid rgba(61,90,127,.16)}
body .btn.sm{font-size:clamp(.85rem,.74rem + .22vw,.95rem);font-weight:800;
  border-radius:99px;padding:.7rem 1.1rem}
/* Y EL CIERRE, AL MISMO RADIO. El home y novedades llevan `.final .btn` y
   `section.final .btn` con `border-radius:7px`, que pesan mas que la regla
   de arriba y se la saltaban: el boton del cierre quedaba a 7 px y el de las
   internas a 8. Un pixel que nadie mide a ojo pero que es exactamente la
   clase de deriva que hace que el sitio «no se sienta igual». */
body .sec.final .btn,body section.final .btn{border-radius:99px;
  padding:.875rem 2rem}

/* EL SECUNDARIO, TAMBIEN UNO. Quedaban dos botones haciendo el mismo papel
   —la accion secundaria sobre un hero oscuro— con dos formas y dos nombres:

       construccion  .gbtn.onblue   15 px / 600 / alto 45 / radio 10
       clientes      .btn2          15 px / 700 / alto 54 / radio 8

   Un boton secundario va al lado de uno principal, asi que lo que tiene que
   casar no es con el otro secundario: es con el principal que tiene al lado.
   Los dos toman su medida —16 / 700 / radio 8— y conservan su relleno
   translucido, que es lo que los distingue de el. Mismo tamaño, distinto
   peso visual: eso es una pareja, no dos botones sueltos.

   El tercer selector no sobra: en clientes el boton lo dimensiona
   `.heroCl .btn2`, que son dos clases y gana a `body .btn2`, que es una
   clase y un elemento. Sin el, ese boton se quedaba en 15 px mientras el de
   construccion ya habia pasado a 16. */
body .gbtn.onblue,body .btn2,
body .heroCl .btn2{font-size:1rem;font-weight:700;
  border-radius:99px;padding:.875rem 2rem}
/* Y en precios el secundario lo dimensiona `.plan .btn2` —dos clases— que
   le gana a `body .btn2`. Se encontro barriendo las ocho paginas: era el
   unico boton del sitio que seguia con esquina de 8 px. */
body .plan .btn2{border-radius:99px}

/* EL BOTON RESPONDE AL PULSARLO, NO SOLO SE LEVANTA. Mariana, 26-oct-2026:
   «en el modelo 4 los botoncitos se ponen un naranja mas fuerte cuando voy a
   presionarlo; me gustaria algo asi, no que se vea plano ahi solo subiendo».

   Tenia razon y era literal: la unica regla era
   `.btn:hover{transform:translateY(-2px)}`, y la transicion declaraba
   `transform` a secas, asi que aunque se le pusiera un color NO lo habria
   animado. Dos arreglos, no uno.

   EL NARANJA FUERTE NO ME LO INVENTO: sale del mismo PDF de Modelo 04, de
   donde salieron los demas colores del hero. Leidos sus operadores `scn`, la
   maqueta usa #EE6C4D y ademas #E0522B, un coral oscuro. Ese es el de
   encima; el de pulsado baja otro peldaño por el mismo camino.

   Y de paso GANA CONTRASTE en vez de perderlo: blanco sobre #EE6C4D da
   3,05:1 y sobre #E0522B da 3,77:1. El color de marca en reposo no se toca
   —esa decision esta tomada— y esto es un ESTADO, no el color del boton.

   Al pulsar baja a su sitio y la sombra se encoge: el boton se hunde en vez
   de quedarse arriba, que es lo que hace que se sienta un boton. */
body{--coral-hondo:#E0522B;--coral-prensa:#C9451F}
body .btn,body .gbtn,body .btn2,body .plan .btn2{
  transition:transform var(--fast) var(--ease),
             background-color var(--fast) var(--ease),
             border-color var(--fast) var(--ease),
             box-shadow var(--fast) var(--ease)}
/* LA MISMA ILUMINACION QUE EL BLANCO, PERO EN SU COLOR. Mariana, en cuanto
   vio el halo del boton blanco: «para que todo quede coherente, los naranja
   tambien deberian tener una iluminacion, pero naranja».

   Es el aro de luz, no el relleno: el relleno sigue haciendo lo suyo
   —#EE6C4D en reposo, #E0522B encima, #C9451F pulsado— y encima se enciende
   el aire de alrededor. Asi los dos tipos de boton hacen EL MISMO GESTO y
   solo cambia de que color es la luz. */
body .btn:hover{background:var(--coral-hondo);
  box-shadow:0 1px 0 rgba(255,255,255,.32) inset,
             0 0 14px rgba(238,108,77,.5),
             0 0 32px rgba(238,108,77,.34),
             0 0 60px rgba(238,108,77,.2),
             0 12px 24px -10px rgba(224,82,43,.72)}
body .btn:active{background:var(--coral-prensa);transform:translateY(0);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,
             0 0 10px rgba(238,108,77,.44),
             0 0 24px rgba(238,108,77,.26),
             0 3px 8px -5px rgba(201,69,31,.7)}
/* Los secundarios no son corales, asi que lo suyo es el fondo y el borde. */
/* El `translateY` va explicito: medido con el :hover forzado, el secundario
   se quedaba en `transform:none` aunque la hoja trae `.gbtn:hover{transform:
   translateY(-2px)}`. Algo con mas peso se lo comia y no se veia porque
   nadie mide los estados. Puesto aqui, los tres botones suben igual. */
body .gbtn:hover,body .btn2:hover{background:rgba(238,108,77,.08);
  border-color:var(--coral);transform:translateY(-2px)}
body .gbtn:active,body .btn2:active{transform:translateY(0);
  background:rgba(238,108,77,.15)}
body .gbtn.onblue:hover{background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.6)}
body .gbtn.onblue:active{transform:translateY(0);background:rgba(255,255,255,.26)}
/* Y LOS DOS CASOS QUE PESAN MAS QUE ESTO, barridos antes de darlo por hecho:
   el boton BLANCO del hero del home y el coral de las paginas de proceso.

   El del home es `.sec.hero .cta-wrap .btn` —tres clases— y es blanco a
   proposito sobre el hero coral; su «mas fuerte» no puede ser naranja, que
   seria cambiarle el papel. Se hunde y se tiñe apenas.

   Y el de proceso YA tenia un coral de pulsado, #D95F40, puesto en su dia
   solo ahi. O sea que el sitio tenia dos naranjas de pulsado y el resto
   ninguno. Pasa al mismo #E0522B del PDF: uno solo en todo el sitio. */
/* Y EL BLANCO TAMBIEN SE ENCIENDE AL PASAR, no solo al pulsarlo. Mariana,
   26-oct-2026: «los call to action blancos tambien deberian dar un
   resaltado, porque si no unos quedarian con el resaltado y otros no».

   Es el mismo argumento que el de los dos naranjas de pulsado: lo que se
   nota no es que falte un efecto, es que el sitio haga dos cosas distintas
   con el mismo gesto.

   PRIMERO LO TEÑI DE CORAL y ella lo corrigio en el acto: «a los blancos
   darle como una iluminacion, tono blanco o gris, pero no» —no coral—. Y
   tiene razon de sobra: el blanco sobre el hero coral esta ahi justamente
   por contraste de familia, y teñirlo lo empuja hacia el color del que
   quiere separarse. Lo que se enciende es el AIRE de alrededor, no el
   boton: luz blanca que crece al pasar y se encoge al pulsar. El relleno no
   cambia de color; en pulsado baja un peldaño a gris muy claro, que es lo
   que hace que se sienta hundido.

   LA LUZ NO LLEVA ARO. El primer intento empezaba con una sombra de
   extension y desenfoque cero —`0 0 0 7px`—, que no es luz sino un anillo
   con el canto duro. Mariana: «no deberia ser una iluminacion como tan del
   circulo, sino mas degradada». Ahora son tres sombras desenfocadas a 14,
   34 y 62 px con la opacidad bajando: la luz se apaga sola y no tiene borde
   donde acabar.

   El texto no pierde nada porque el fondo del boton sigue siendo blanco:
   Azul Capta da 6,63:1 encima y 6,35:1 pulsado. */
body .sec.hero .cta-wrap .btn:hover,
body .sec.heroc .cta-wrap .btn:hover{background:#FFFFFF;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 0 14px rgba(255,255,255,.44),
             0 0 34px rgba(255,255,255,.3),
             0 0 62px rgba(255,255,255,.18),
             0 18px 36px -12px rgba(10,22,38,.65)}
body .sec.hero .cta-wrap .btn:active,
body .sec.heroc .cta-wrap .btn:active{transform:translateY(0);
  background:#F4F5F7;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 0 10px rgba(255,255,255,.38),
             0 0 24px rgba(255,255,255,.22),
             0 4px 12px -8px rgba(10,22,38,.6)}
body .heroP .btn:hover,body .final .btn:hover,
body section.final .btn:hover{background:var(--coral-hondo);transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.32) inset,
             0 0 14px rgba(238,108,77,.5),
             0 0 32px rgba(238,108,77,.34),
             0 0 60px rgba(238,108,77,.2),
             0 12px 24px -10px rgba(224,82,43,.72)}
body .heroP .btn:active,body .final .btn:active,
body section.final .btn:active{background:var(--coral-prensa);transform:translateY(0);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,
             0 0 10px rgba(238,108,77,.44),
             0 0 24px rgba(238,108,77,.26),
             0 3px 8px -5px rgba(201,69,31,.7)}

body .franja{font-size:.75rem}
body .rel .kick{font-size:.75rem;letter-spacing:.1em}
body .rot,body .lrot{font-size:.75rem}
body .tag{font-size:.75rem}

/* EL PRIMER BORDE DESPUES DEL HERO. Medido: no hay huecos entre secciones
   —son 0 px— pero los rellenos SE SUMAN, y entre dos secciones seguidas salen
   168 px de aire. Con el hero ya apretado, el primero es el que canta. Este
   recorta solo ese, que es el que se ve junto al cambio. Los demas se quedan
   como estan: tocarlos cambia las 20 paginas y eso se decide aparte. */
.sec.hero + .sec{padding-top:clamp(2.6rem,4.4vw,4rem)}

/* ── PANTALLA ANGOSTA ──────────────────────────────────────────────────
   EL ANGULO NO PUEDE SER EL MISMO EN UNA CAJA ESTRECHA. A 100 grados el
   recorrido entero azul→coral cabe en 390 px de ancho, asi que el parrafo
   cruza TODO el degradado y acaba sobre naranja: medido, 4,20:1 a 390 y
   4,02:1 a 834, cuando la AA pide 4,5 para texto pequeno. El titular aguanta
   porque al ser grande le basta con 3,0.

   A 152 grados el recorrido baja en diagonal en vez de cruzar, el texto queda
   sobre la parte azul y el coral se va a la esquina de abajo. Es el mismo
   degradado, solo que inclinado para la forma de la caja. */
@media(max-width:900px){
  .sec.hero{background:
    radial-gradient(70% 26% at 100% 0%,rgba(219,116,91,.62) 0%,transparent 72%),
    linear-gradient(152deg,#425A77 0%,#846164 54%,#DB745B 100%)}
}
@media(max-width:700px){
  .sec.hero .trust::after{height:clamp(46px,13vw,90px)}
}

/* EL TRAZADO DE LA ONDA, POR ANCHO. Va al final a proposito: estas reglas
   pesan lo mismo que las que fijan `--ondaimg` en cada hero, asi que decide
   la ultima escrita. */
@media(max-width:700px){
  .sec.heroP,body[data-color-proceso] .sec.heroP{--ondaimg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 200' preserveAspectRatio='none'><defs><linearGradient id='o' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2335506E'/><stop offset='1' stop-color='%2352779E'/></linearGradient></defs><path fill='url(%23o)' d='M0,200 L0,88.1 C420,93.6 560,76.6 980,78.6 C1420,80.6 1560,94.6 1920,86.1 L1920,200 Z'/></svg>")}
  body .sec.heroCl,body .sec.heroPl{--ondaimg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 200' preserveAspectRatio='none'><defs><linearGradient id='o' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23243A53'/><stop offset='1' stop-color='%2336516F'/></linearGradient></defs><path fill='url(%23o)' d='M0,200 L0,88.1 C420,93.6 560,76.6 980,78.6 C1420,80.6 1560,94.6 1920,86.1 L1920,200 Z'/></svg>")}
  body .sec.nvhero{--ondaimg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 200' preserveAspectRatio='none'><defs><linearGradient id='o' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23CFE2EE'/><stop offset='1' stop-color='%23B6D2E5'/></linearGradient></defs><path fill='url(%23o)' d='M0,200 L0,88.1 C420,93.6 560,76.6 980,78.6 C1420,80.6 1560,94.6 1920,86.1 L1920,200 Z'/></svg>")}
}
@media(min-width:701px) and (max-width:1040px){
  .sec.heroP,body[data-color-proceso] .sec.heroP{--ondaimg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 200' preserveAspectRatio='none'><defs><linearGradient id='o' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2335506E'/><stop offset='1' stop-color='%2352779E'/></linearGradient></defs><path fill='url(%23o)' d='M0,200 L0,91.8 C420,105 560,64.2 980,69 C1420,73.8 1560,107.4 1920,87 L1920,200 Z'/></svg>")}
  body .sec.heroCl,body .sec.heroPl{--ondaimg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 200' preserveAspectRatio='none'><defs><linearGradient id='o' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23243A53'/><stop offset='1' stop-color='%2336516F'/></linearGradient></defs><path fill='url(%23o)' d='M0,200 L0,91.8 C420,105 560,64.2 980,69 C1420,73.8 1560,107.4 1920,87 L1920,200 Z'/></svg>")}
  body .sec.nvhero{--ondaimg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 200' preserveAspectRatio='none'><defs><linearGradient id='o' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23CFE2EE'/><stop offset='1' stop-color='%23B6D2E5'/></linearGradient></defs><path fill='url(%23o)' d='M0,200 L0,91.8 C420,105 560,64.2 980,69 C1420,73.8 1560,107.4 1920,87 L1920,200 Z'/></svg>")}
}
/* ⟦hero04:fin⟧ */