/* ══ 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:44rem;padding:1.25rem 1.1rem 1rem;
  display:grid;grid-template-columns:1fr 1fr;gap:0 1.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 .55rem;padding:0 .6rem .55rem;
  border-bottom:1px solid rgba(var(--a),.12);
  font-size:.6875rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--azul-2)}
.nav .dpanel.mega a,.nav .dpanel.mega span[aria-disabled]{
  display:grid;grid-template-columns:22px 1fr;gap:.1rem .6rem;align-items:start;
  padding:.5rem .6rem;border-radius:8px;white-space:normal;line-height:1.3}
.nav .dpanel.mega b.nm{grid-column:2;font-size:.875rem;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:.75rem;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:37rem;gap:0 1.1rem;padding:1.1rem .9rem .9rem}
 .nav .dpanel.mega u{font-size:.6875rem}
}
/* 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-texto,#C14A2E);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}
}