/* Elio · sitio integral (V2): componentes nuevos sobre site.css (mismos tokens y tipografía).
   Mapa de operación (hero), capacidades, industrias, productos, casos, proceso y menú ampliado.
   El movimiento lo controla v2.js; sin JS o con movimiento reducido todo se ve completo y quieto. */

/* ── Mapa de operación (hero del inicio): composición de producto en capas ──
   Cuatro tarjetas sobre una placa durazno cuentan una operación de punta a punta: la entrada (chat de WhatsApp,
   formulario o factura), el agente de Elio trabajando paso a paso, el sistema donde entra el resultado y la ficha
   «Te pide aprobación» con la persona que decide. Las capas se montan solo sobre bordes y márgenes: nunca tapan texto.
   Contenedor «om» de 480 px o más: la entrada a la izquierda a todo el alto y, a la derecha, sistema, agente y
   aprobación en escalera (el sistema se mete detrás de la entrada: --om-tuck). Más angosto: cascada vertical.
   Modos (data-m): «Lo hace sola» durazno, «Te pide aprobación» ámbar, «Pasa a una persona» tinta; verde solo para lo
   pagado o aprobado. v2.js reproduce el guion (data-cue) con .is-live; sin JS o con movimiento reducido todo queda
   quieto en el estado final que trae el HTML. */
.opsmap{
  --om-r:18px;
  --om-sh-1:0 1px 2px color-mix(in srgb,var(--ink) 6%,transparent),0 18px 36px -22px color-mix(in srgb,var(--navy-deep) 34%,transparent);
  --om-sh-2:0 1px 2px color-mix(in srgb,var(--ink) 7%,transparent),0 26px 50px -24px color-mix(in srgb,var(--navy-deep) 44%,transparent),0 16px 36px -24px color-mix(in srgb,var(--orange) 36%,transparent);
  --om-sh-3:0 2px 5px color-mix(in srgb,var(--ink) 8%,transparent),0 38px 64px -28px color-mix(in srgb,var(--navy-deep) 52%,transparent),0 22px 46px -26px color-mix(in srgb,var(--magenta) 36%,transparent);
  container:om/inline-size;position:relative;margin:0;width:100%;max-width:660px;color:var(--ink-2);isolation:isolate}
.opsmap [data-m="ai"]{--m-bg:var(--peach-50);--m-tx:var(--orange-ink);--m-bd:var(--peach-100);--m-ic:var(--magenta)}
.opsmap [data-m="ok"]{--m-bg:var(--warn-bg);--m-tx:var(--warn);--m-bd:color-mix(in srgb,var(--warn) 24%,var(--warn-bg));--m-ic:var(--warn)}
.opsmap [data-m="human"]{--m-bg:var(--ink);--m-tx:var(--paper);--m-bd:var(--ink);--m-ic:var(--paper)}
.opsmap [data-m="done"]{--m-bg:var(--ok-bg);--m-tx:var(--ok);--m-bd:color-mix(in srgb,var(--ok) 22%,var(--ok-bg));--m-ic:var(--ok)}
.opsmap [data-m="none"]{--m-bg:var(--bg-2);--m-tx:var(--ink-3);--m-bd:var(--line);--m-ic:var(--ink-3)}
.om-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:99px;border:1px solid var(--m-bd);background:var(--m-bg);color:var(--m-tx);font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.om-chip .ic{width:13px;height:13px;margin-left:-2px;stroke-width:2.1;color:var(--m-ic)}

/* Encabezado: título, «Ejemplo», pausa y pestañas */
.om-head{display:grid;gap:12px;margin-bottom:12px}
.om-title{display:flex;align-items:center;gap:10px;min-height:32px;font-size:14.5px;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.om-dot{width:8px;height:8px;border-radius:50%;background:var(--grad);flex:none}
.om-ex{margin-left:auto;padding:4px 10px;border-radius:99px;border:1px dashed var(--line-3);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.om-pause{display:none;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);cursor:pointer;flex:none;box-shadow:var(--sh-1);transition:background-color .2s,border-color .2s}
.js-motion .om-pause{display:grid}
.om-pause>span{display:grid}
.om-pause .ic{width:14px;height:14px;fill:currentColor;stroke-width:1.2}
.om-pause .i-play,.om-pause[aria-pressed="true"] .i-pause{display:none}
.om-pause[aria-pressed="true"] .i-play{display:grid}
.om-pause:hover{border-color:var(--line-3);background:var(--bg)}
.om-pause:focus-visible{outline:2.5px solid var(--navy);outline-offset:2px}
.om-tabs{display:flex;gap:2px;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--bg-3) 60%,var(--paper));box-shadow:inset 0 1px 2px color-mix(in srgb,var(--ink) 8%,transparent);overflow-x:auto;scrollbar-width:none}
.om-tabs::-webkit-scrollbar{display:none}
.om-tabs button{position:relative;flex:1 0 auto;min-height:38px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--ink-3);font-size:14px;font-weight:500;cursor:pointer;overflow:hidden;white-space:nowrap;transition:color .2s,background-color .25s,box-shadow .25s}
.om-tabs button:hover{color:var(--ink)}
.om-tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 10%,transparent),0 6px 14px -8px color-mix(in srgb,var(--orange) 45%,transparent)}
.om-tabs button i{position:absolute;left:18px;right:18px;bottom:5px;height:2px;border-radius:2px;background:var(--grad);transform-origin:left;opacity:0}
.om-tabs button[aria-selected="true"] i{opacity:1}
.om-tabs .om-s{display:none}
.om-tabs button:focus-visible{outline:2.5px solid var(--navy);outline-offset:-3px}

/* Escenas apiladas en una sola celda: la composición mide lo mismo en las tres pestañas */
.om-scenes{display:grid}
.om-scene{grid-area:1/1;display:grid;min-width:0}
.om-scene[hidden]{display:grid!important}   /* site.js pone hidden a los paneles de toda pestaña; aquí manda .is-on */
.om-scene:not(.is-on){visibility:hidden;pointer-events:none}

/* Escenario: placa durazno con retícula de puntos y las cuatro capas */
.om-stage{--om-tuck:44px;position:relative;display:grid;grid-template-columns:minmax(0,37fr) minmax(0,63fr);grid-template-rows:auto auto auto 1fr;column-gap:18px;padding-bottom:8px}
.om-stage::before,.om-stage::after{content:"";position:absolute;z-index:0;pointer-events:none}
.om-stage::before{inset:-4% -3% -3% 2%;background:radial-gradient(46% 44% at 68% 52%,color-mix(in srgb,var(--magenta) 15%,transparent),transparent 72%),
  radial-gradient(42% 46% at 26% 62%,color-mix(in srgb,var(--orange) 13%,transparent),transparent 72%),radial-gradient(36% 30% at 80% 8%,color-mix(in srgb,var(--yellow) 12%,transparent),transparent 70%)}
.om-stage::after{inset:0 -2% 0 4%;background-image:radial-gradient(color-mix(in srgb,var(--orange-ink) 22%,transparent) 1px,transparent 1.5px);background-size:16px 16px;
  -webkit-mask-image:radial-gradient(58% 54% at 60% 50%,black 25%,transparent 78%);mask-image:radial-gradient(58% 54% at 60% 50%,black 25%,transparent 78%)}
.om-slot{position:relative;z-index:1;display:grid;grid-template-rows:minmax(0,1fr);min-width:0}
.om-at-src{grid-column:1;grid-row:1/-1;contain:size;margin:38px 0 6px;z-index:2}
.om-at-sys{grid-column:2;grid-row:1;margin-left:calc(-18px - var(--om-tuck))}
.om-at-agent{grid-column:2;grid-row:2;margin:-16px 0 0 -22px;z-index:3}
.om-at-ask{grid-column:2;grid-row:3;margin:-10px 0 0 38px;z-index:4}
.om-card{position:relative;min-width:0;border-radius:var(--om-r);background:var(--paper);border:1px solid color-mix(in srgb,var(--line-2) 80%,transparent);box-shadow:var(--om-sh-2)}
.om-av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;font-size:12px;font-weight:600;letter-spacing:.02em;background:var(--bg-3);color:var(--ink-2)}

/* Entrada 1: teléfono con WhatsApp (lo nuevo abajo; lo viejo se va por arriba) */
.om-phone{display:flex;flex-direction:column;height:100%;padding:6px;border:0;border-radius:32px;background:linear-gradient(155deg,var(--night-2),var(--navy-deep) 65%);
  box-shadow:var(--om-sh-2),inset 0 0 0 1px color-mix(in srgb,var(--paper) 14%,transparent)}
.om-screen{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;border-radius:26px;overflow:hidden;background:var(--wa-chat)}
.om-screen::before{content:"";position:absolute;top:8px;left:50%;z-index:2;width:56px;height:16px;margin-left:-28px;border-radius:99px;background:var(--navy-deep)}
.om-wa-hd{display:flex;align-items:center;gap:9px;padding:32px 12px 9px;background:var(--wa-head);color:var(--paper);flex:none}
.om-wa-hd .om-av{background:color-mix(in srgb,var(--paper) 22%,var(--wa-head));color:var(--paper)}
.om-wa-who{display:grid;min-width:0;line-height:1.25}
.om-wa-who b{font-size:13.5px;font-weight:600;color:var(--paper)}
.om-wa-st{display:grid;font-size:12px;color:color-mix(in srgb,var(--paper) 74%,var(--wa-head))}
.om-wa-st>span{grid-area:1/1;transition:opacity .12s linear}
/* relevo sin cruce: el estado que sale se va y el que entra aparece justo después */
.om-wa-st.is-tp .s-tp,.om-wa-st:not(.is-tp) .s-on{transition-delay:.12s}
.om-wa-st .s-tp{opacity:0;color:var(--paper)}
.om-wa-st.is-tp .s-on{opacity:0}
.om-wa-st.is-tp .s-tp{opacity:1}
.om-wa-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 9px 4px;overflow:hidden;
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1.4px);background-size:13px 13px;
  -webkit-mask-image:linear-gradient(transparent,black 30px);mask-image:linear-gradient(transparent,black 30px)}
.om-wa-day{align-self:center;margin:10px 0 0;padding:3px 9px;border-radius:7px;background:var(--paper);font-size:12px;color:var(--ink-3);box-shadow:0 1px .5px color-mix(in srgb,var(--ink) 12%,transparent)}
.om-msg{display:grid;grid-template-rows:0fr;flex:none;margin:0;transition:grid-template-rows .45s var(--ease)}
.om-msg.is-in{grid-template-rows:1fr}
.om-msg>span{display:flex;min-height:0;overflow:hidden;padding:0 1px}
.om-msg.m-out>span{justify-content:flex-end}
.om-bub{display:grid;gap:7px;max-width:88%;margin:6px 0 1px;padding:6px 9px 7px;border-radius:11px;font-size:12.5px;line-height:1.4;color:var(--ink);background:var(--paper);
  box-shadow:0 1px .5px color-mix(in srgb,var(--ink) 16%,transparent);opacity:0;transform:translateY(8px) scale(.92);transition:opacity .3s var(--ease) .1s,transform .55s var(--spring) .1s}
.m-in .om-bub{border-top-left-radius:3px;transform-origin:0 100%}
.m-out .om-bub{background:var(--wa-out);border-top-right-radius:3px;transform-origin:100% 100%}
.om-msg.is-in .om-bub{opacity:1;transform:none}
.om-tick{display:inline-block;margin-left:5px;vertical-align:-3px}
.om-tick .ic{width:15px;height:15px;color:var(--wa-link);stroke-width:2}
.om-typing .om-bub{display:flex;gap:4px;padding:10px 11px}
.om-typing i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--ink-3) 70%,transparent)}
.js-motion .om-typing.is-in i{animation:omDot 1.1s var(--ease-io) infinite}
.om-typing i:nth-child(2){animation-delay:.15s}
.om-typing i:nth-child(3){animation-delay:.3s}
@keyframes omDot{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-3px);opacity:1}}
.om-paylink{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;background:color-mix(in srgb,var(--paper) 70%,var(--wa-out))}
.om-paylink-i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--grad-cta);color:var(--paper);flex:none}
.om-paylink-i .ic{width:15px;height:15px}
.om-paylink-tx{display:grid;min-width:0;line-height:1.3}
.om-paylink-tx b{font-size:12.5px;color:var(--ink)}
.om-paylink-tx span{font-size:12px;color:var(--ink-3)}
.om-wa-bar{display:flex;align-items:center;gap:6px;padding:6px 8px 9px;flex:none}
.om-wa-bar span{display:flex;align-items:center;flex:1;height:32px;padding:0 12px;border-radius:99px;background:var(--paper);font-size:12px;color:var(--ink-3)}
.om-wa-bar i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--wa-ink);color:var(--paper);flex:none}
.om-wa-bar .ic{width:16px;height:16px}

/* Entrada 2: formulario de la página (los campos se llenan uno a uno y se envía) */
.om-form{display:flex;flex-direction:column;height:100%;overflow:hidden}
.om-form-bar{display:flex;align-items:center;gap:5px;height:38px;padding:0 10px;border-bottom:1px solid var(--line);background:var(--bg-2);flex:none}
.om-form-bar i{width:8px;height:8px;border-radius:50%;background:var(--line-3);flex:none}
.om-form-bar span{display:flex;align-items:center;gap:5px;flex:1;min-width:0;height:24px;margin-left:6px;padding:0 9px;border-radius:7px;background:var(--paper);font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden}
.om-form-bar .ic{width:12px;height:12px}
.om-form-bd{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;padding:14px}
.om-form-h{display:grid;line-height:1.25}
.om-form-h b{font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.om-form-h span{font-size:12px;color:var(--ink-3)}
.om-fld{display:grid;gap:4px}
.om-fld-l{font-size:12px;font-weight:500;color:var(--ink-3)}
.om-fld-v{display:flex;align-items:center;height:34px;padding:0 10px;border-radius:9px;border:1px solid var(--line-2);background:var(--paper);font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.om-fld-v>span{clip-path:inset(0 100% 0 0);transition:clip-path .45s steps(14,end)}
.om-fld.is-in .om-fld-v>span{clip-path:inset(0)}
/* el campo que se está llenando: anillo durazno (solo mientras se escribe) */
.om-form:not(:has(.om-send.is-in)) .om-fld.is-in:not(:has(~ .om-fld.is-in)) .om-fld-v{border-color:var(--peach-300);box-shadow:0 0 0 3px color-mix(in srgb,var(--peach-200) 40%,transparent)}
.om-send{display:grid;place-items:center;height:38px;margin-top:auto;border-radius:10px;background:var(--grad-cta);color:var(--paper);font-size:13.5px;font-weight:600;flex:none;transition:background-color .3s}
.om-send>span{grid-area:1/1;display:inline-flex;align-items:center;gap:6px;transition:opacity .25s}
.om-send .ic{width:15px;height:15px;stroke-width:2.4}
.om-send .b-d,.om-send.is-in .b-a{opacity:0}
.om-send.is-in{background:var(--ink)}
.om-send.is-in .b-d{opacity:1}
.js-motion .om-send.is-in{animation:omPress .4s var(--ease)}
@keyframes omPress{40%{transform:scale(.96)}}

/* Entrada 3: factura que llega por correo y se lee campo por campo */
.om-doc{display:flex;flex-direction:column;height:100%;overflow:hidden}
.om-doc-hd{display:flex;align-items:center;gap:10px;padding:12px 12px 11px;border-bottom:1px solid var(--line);flex:none}
.om-doc-i{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--peach-50);color:var(--orange-ink);box-shadow:inset 0 0 0 1px var(--peach-100);flex:none}
.om-doc-i .ic{width:17px;height:17px}
.om-doc-who{display:grid;min-width:0;line-height:1.25}
.om-doc-who b{font-size:13.5px;color:var(--ink)}
.om-doc-who span{font-size:12px;color:var(--ink-3)}
.om-doc-pg{position:relative;flex:1;min-height:0;margin:0 12px;padding:12px 8px 8px;border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;background:linear-gradient(var(--paper),var(--bg));overflow:hidden;
  -webkit-mask-image:linear-gradient(black 82%,transparent);mask-image:linear-gradient(black 82%,transparent)}
.om-doc-top{display:grid;gap:1px;margin:0 4px 6px;padding-bottom:9px;border-bottom:1px dashed var(--line-2);line-height:1.3}
.om-doc-top b{font-size:13px;color:var(--ink)}
.om-doc-top span{font-size:12px;color:var(--ink-3)}
.om-doc-pg dl{display:grid;gap:2px;margin:0}
.om-doc-tot{margin-top:6px!important;padding-top:6px;border-top:1px dashed var(--line-2)}
.om-doc-ln .om-dl:nth-child(n+3) dt{color:var(--ink-2)}
.om-dl{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 6px;border-radius:7px;font-size:12px;line-height:1.3;transition:background-color .3s,box-shadow .3s}
.om-dl dt{min-width:0;color:var(--ink-3)}
.om-dl dd{display:inline-flex;align-items:center;gap:5px;margin:0;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.om-dl dd .ic{width:13px;height:13px;stroke-width:2.6;color:var(--orange);opacity:0;transform:scale(.5);transition:opacity .25s,transform .4s var(--spring)}
.om-dl.is-hl{background:var(--peach-50);box-shadow:inset 0 0 0 1px var(--peach-200)}
.om-dl.is-rd dd .ic{opacity:1;transform:none}
.om-doc-tot .om-dl:last-child dd{font-size:13px}
.om-scan{position:absolute;left:0;right:0;top:0;height:44px;background:linear-gradient(transparent,color-mix(in srgb,var(--orange) 14%,transparent),transparent);opacity:0;pointer-events:none}
.js-motion .om-scan.is-in{animation:omScan 2.4s var(--ease-io) both}
@keyframes omScan{0%{opacity:0;transform:translateY(40px)}12%,88%{opacity:1}100%{opacity:0;transform:translateY(250px)}}
.om-doc-att{display:flex;align-items:center;gap:7px;margin:10px 12px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--bg-2);font-size:12px;font-weight:500;color:var(--ink-2);flex:none}
.om-doc-att .ic{width:15px;height:15px;color:var(--orange-ink)}

/* El agente de Elio: su modo, la barra de avance y los pasos que se marcan uno a uno */
.om-agent{padding:14px;border:1.5px solid transparent;background:linear-gradient(var(--paper),var(--paper)) padding-box,linear-gradient(150deg,var(--peach-200),var(--orange) 55%,var(--magenta)) border-box;
  box-shadow:var(--om-sh-3);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.om-agent.is-on{transform:translateY(-3px);box-shadow:var(--om-sh-3),0 0 0 5px color-mix(in srgb,var(--peach-200) 30%,transparent)}
.om-ag-hd{display:flex;align-items:center;gap:10px}
.om-ag-logo{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--peach-50);box-shadow:inset 0 0 0 1px var(--peach-100);flex:none}
.om-ag-logo .om-e{width:21px;height:auto}
.om-ag-who{display:grid;min-width:0;line-height:1.25}
.om-ag-who b{font-size:14px;color:var(--ink);white-space:nowrap}
.om-ag-who span{font-size:12px;color:var(--ink-3)}
.om-mode{display:grid;justify-items:end;margin-left:auto;flex:none}
.om-mode>.om-chip{grid-area:1/1;transition:opacity .25s var(--ease),transform .35s var(--ease)}
.om-mode>[data-m="ok"],.om-mode.is-ask>[data-m="ai"]{opacity:0;transform:translateY(4px)}
.om-mode.is-ask>[data-m="ok"]{opacity:1;transform:none}
.om-prog{display:block;height:3px;margin:12px 0 8px;border-radius:3px;background:var(--bg-3);overflow:hidden}
.om-prog i{display:block;height:100%;border-radius:inherit;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.om-prog.is-p1 i{transform:scaleX(.25)}
.om-prog.is-p2 i{transform:scaleX(.5)}
.om-prog.is-p3 i{transform:scaleX(.75)}
.om-prog.is-p4 i{transform:none}
.om-steps{display:grid;gap:1px;list-style:none}
.om-step{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;padding:5px 0;font-size:13px;line-height:1.35;color:var(--ink-3)}
.om-step-i{position:relative;display:grid;place-items:center;width:22px;height:22px;margin-top:-1px;border-radius:50%;border:1.5px dashed var(--line-3);color:var(--paper);transition:background-color .3s,border-color .3s}
.om-step-i .ic{width:13px;height:13px;stroke-width:2.8;opacity:0;transform:scale(.5);transition:opacity .2s,transform .4s var(--spring)}
.om-step-i::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:2px solid transparent;border-top-color:var(--orange);border-right-color:var(--magenta);opacity:0}
.om-step.is-run,.om-step.is-done{color:var(--ink)}
.om-step.is-run:not(.is-done) .om-step-i{border-style:solid;border-color:var(--peach-100)}
.om-step.is-run:not(.is-done) .om-step-i::after{opacity:1}
.js-motion .om-step.is-run:not(.is-done) .om-step-i::after{animation:omSpin .8s linear infinite}
@keyframes omSpin{to{transform:rotate(1turn)}}
.om-step.is-done .om-step-i{border-style:solid;border-color:var(--peach-200);background:var(--peach-50);color:var(--orange-ink)}
.om-step.is-done .om-step-i .ic{opacity:1;transform:none}
.om-step[data-m="ok"].is-run:not(.is-done) .om-step-i{border-color:color-mix(in srgb,var(--warn) 30%,var(--warn-bg));background:var(--warn-bg)}
.om-step[data-m="ok"].is-run:not(.is-done) .om-step-i::after{border-top-color:var(--warn);border-right-color:transparent}
.om-step[data-m="ok"].is-done .om-step-i{border-color:var(--ok);background:var(--ok);color:var(--paper)}
.om-step-tx{display:grid;gap:2px;min-width:0}
.js-motion .om-step[data-m="ai"].is-run:not(.is-done) .om-step-tx>span:first-child{background:linear-gradient(90deg,var(--ink) 0 38%,var(--orange) 50%,var(--ink) 62% 100%);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:omShine 1.5s linear infinite}
@keyframes omShine{from{background-position:100% 0}to{background-position:-160% 0}}
.om-step-st{display:grid;font-size:12px;font-weight:500}
.om-step-st>span{grid-area:1/1;display:inline-flex;align-items:center;gap:4px;opacity:0;transition:opacity .25s}
.om-step-st .ic{width:12px;height:12px;stroke-width:2.3}
.om-step-st .st-p{color:var(--ink-3)}
.om-step-st .st-w{color:var(--warn)}
.om-step-st .st-d{color:var(--ok)}
.om-step:not(.is-run):not(.is-done) .st-p,.om-step.is-run:not(.is-done) .st-w,.om-step.is-done .st-d{opacity:1}

/* El sistema: ventana de la app con la fila nueva arriba (pendiente y luego en verde) */
.om-sys{padding-bottom:22px;overflow:hidden;box-shadow:var(--om-sh-1)}
.om-sys-hd{display:flex;align-items:center;gap:8px;height:44px;padding:0 10px 0 12px;border-bottom:1px solid var(--line);background:var(--bg)}
.om-sys-logo{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);flex:none}
.om-sys-logo .om-e{width:14px;height:auto}
.om-sys-hd b{min-width:0;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.om-sys-f{margin-left:auto;padding:3px 9px;border-radius:7px;border:1px solid var(--line-2);background:var(--paper);font-size:12px;color:var(--ink-2);white-space:nowrap}
.om-sys-q{display:grid;place-items:center;width:26px;height:26px;color:var(--ink-3);flex:none}
.om-sys-q .ic{width:15px;height:15px}
.om-rows{--om-row:50px;display:flex;flex-direction:column;height:calc(var(--om-row) * 3 + 6px);padding:6px 8px 0 calc(var(--om-tuck) + 8px);list-style:none;overflow:hidden}
.om-rows>li{flex:none}
.om-row-in{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;height:var(--om-row);padding:0 8px;border-radius:12px}
.om-row+.om-row .om-row-in{box-shadow:inset 0 1px 0 var(--line);border-radius:0}
.om-row-tx{display:grid;min-width:0;line-height:1.3}
.om-row-tx>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.om-row-tx b{font-size:13px;color:var(--ink)}
.om-row-tx span{font-size:12px;color:var(--ink-3)}
.om-row-st{display:grid;justify-items:end}
.om-row-st>.om-chip{grid-area:1/1}
.om-new{max-height:var(--om-row);overflow:hidden;transition:max-height .55s var(--ease),opacity .4s var(--ease) .1s}
.om-new:not(.is-in){max-height:0;opacity:0}
.om-new .om-row-in{background:linear-gradient(90deg,var(--peach-50),color-mix(in srgb,var(--peach-50) 25%,var(--paper)));box-shadow:inset 0 0 0 1px var(--peach-100)}
.om-new .om-av{background:var(--grad-cta);color:var(--paper)}
.om-new .om-chip{transition:opacity .25s,transform .4s var(--spring)}
.om-new .st-b,.om-new.is-done .st-a{opacity:0;transform:scale(.9)}
.om-new.is-done .st-b{opacity:1;transform:none}

/* La aprobación: ficha en ámbar y la persona que llega con su cursor y hace clic en «Aprobar» */
.om-ask{padding:13px 14px 14px;border-color:color-mix(in srgb,var(--warn) 26%,var(--line));box-shadow:var(--om-sh-3);transition:opacity .4s var(--ease),transform .6s var(--spring)}
.om-ask:not(.is-in){opacity:0;transform:translateY(16px) scale(.96)}
.om-ask-hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.om-ask-t{font-size:12px;color:var(--ink-3)}
.om-ask-tl{display:grid;gap:2px;margin:9px 0 12px;line-height:1.3}
.om-ask-tl b{font-size:14px;letter-spacing:-.005em;color:var(--ink)}
.om-ask-tl span{font-size:12.5px;color:var(--ink-3)}
.om-ask-ft{display:flex;align-items:center;gap:10px}
.om-ask-who{display:grid;min-width:0;font-size:12px;line-height:1.3;color:var(--ink-3)}
.om-ask-who b{font-size:12.5px;color:var(--ink);white-space:nowrap}
.om-acts{position:relative;display:flex;gap:6px;margin-left:auto;flex:none}
.om-b-no,.om-b-yes{display:grid;place-items:center;height:32px;padding:0 12px;border-radius:9px;font-size:12.5px;font-weight:600;white-space:nowrap}
.om-b-no{border:1px solid var(--line-2);background:var(--paper);color:var(--ink-2);transition:opacity .3s}
.om-b-yes{position:relative;background:var(--ink);color:var(--paper);transition:background-color .3s}
.om-b-yes>span{grid-area:1/1;display:inline-flex;align-items:center;gap:5px;transition:opacity .2s}
.om-b-yes .ic{width:14px;height:14px;stroke-width:2.6}
.om-b-yes .b-d,.om-ask.is-ok .om-b-yes .b-a{opacity:0}
.om-ask.is-ok .om-b-yes{background:var(--ok)}
.om-ask.is-ok .om-b-yes .b-d{opacity:1}
.om-ask.is-ok .om-b-no{opacity:.4}
.js-motion .om-ask.is-ok .om-b-yes::after{content:"";position:absolute;inset:0;border-radius:inherit;animation:omRing .7s var(--ease) both}
@keyframes omRing{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}to{box-shadow:0 0 0 12px color-mix(in srgb,var(--ok) 0%,transparent)}}
.om-pin{position:absolute;right:-12px;top:19px;z-index:2;pointer-events:none;transition:opacity .35s,transform 1.1s var(--ease-io)}
.om-pin:not(.is-in){opacity:0;transform:translate(86px,70px)}
.om-pin i{display:grid;place-items:center;width:28px;height:28px;border-radius:3px 50% 50% 50%;border:2px solid var(--paper);background:var(--ink);color:var(--paper);font-size:12px;font-style:normal;font-weight:600;
  box-shadow:0 8px 16px -6px color-mix(in srgb,var(--navy-deep) 60%,transparent)}
.js-motion .om-pin.is-tap i{animation:omTap .45s var(--ease)}
@keyframes omTap{40%{transform:scale(.8)}}

/* Movimiento (v2.js pone .is-live): las capas entran escalonadas, de atrás hacia adelante, y salen juntas al cambiar de
   escena. Sin v2.js la composición aparece igual, quieta, al poco tiempo (respaldo). */
.om-at-sys{--d:.05s}.om-at-src{--d:.16s}.om-at-agent{--d:.3s}.om-at-ask{--d:.42s}
.js-motion .opsmap.is-live .om-slot{transition:opacity .55s var(--ease) var(--d),transform .9s var(--spring) var(--d)}
.js-motion .opsmap.is-live :is(.om-scene:not(.is-on),.om-scene.is-out) .om-slot{opacity:0;transform:translateY(22px) scale(.97);transition:opacity .3s var(--ease),transform .4s var(--ease)}
.js-motion .opsmap.is-live .om-scene:not(.is-on){transition:visibility 0s .4s}
.om-scene.is-reset *{transition:none!important;animation:none!important}
.js-motion .opsmap:not(.is-live) .om-scenes{opacity:0;animation:omWake .4s 1.6s forwards}
@keyframes omWake{to{opacity:1}}
.opsmap.is-paused .om-tabs button[aria-selected="true"] i{opacity:.5}

/* Hero del inicio con el mapa (.om-hero): el visual gana ancho y, en pantallas grandes, se sale un poco del margen
   derecho (el hero recorta lo que sobra): la composición respira sin achicar el titular */
@media (min-width:980px){
  .om-hero .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(32px,4vw,56px)}
  .om-hero .hero-stage-v2{margin-right:calc(-1 * clamp(0px,(100vw - 1150px) / 2,104px))}
  .om-hero .opsmap{max-width:none}
}

/* Escritorio estrecho (480 a 579 px: laptops pequeñas, tabletas y la imagen para compartir): la entrada gana ancho y el
   sistema muestra dos filas, así la composición no crece de alto */
@container om (min-width:480px) and (max-width:579px){
  .om-stage{--om-tuck:36px;grid-template-columns:minmax(0,40fr) minmax(0,60fr);column-gap:14px}
  .om-at-sys{margin-left:calc(-14px - var(--om-tuck))}
  .om-at-agent{margin-left:-18px}
  .om-at-ask{margin-left:8px}
  .om-ask{padding:12px}
  .om-rows{height:calc(var(--om-row) * 2 + 6px)}
  .om-ag-who>span{display:none}
  .om-bub{max-width:92%}
  .om-b-no,.om-b-yes{padding:0 9px;font-size:12px}
}

/* Contenedor angosto (celular): cascada vertical. Entrada, agente, sistema y aprobación; cada capa se monta sobre el
   margen de la anterior y se corre a un lado (profundidad sin tapar texto) */
@container om (max-width:479px){
  .om-tabs button{padding:0 12px}
  .om-tabs .om-l{display:none}
  .om-tabs .om-s{display:inline}
  .om-stage{--om-tuck:0px;grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding-bottom:4px}
  .om-at-src{grid-column:1;grid-row:1;height:236px;margin:0 10% 0 0}
  .om-at-agent{grid-column:1;grid-row:2;margin:-24px 0 0 6%}
  .om-at-sys{grid-column:1;grid-row:3;margin:-10px 5% 0 0}
  .om-at-ask{grid-column:1;grid-row:4;margin:-12px 0 0 8%}
  .om-screen::before{top:6px;height:14px}
  .om-wa-hd{padding:24px 12px 8px}
  .om-wa-bar{padding:5px 8px 7px}
  .om-wa-bar span,.om-wa-bar i{height:30px}
  .om-wa-bar i{width:30px}
  .om-agent{padding:12px}
  .om-ag-who>span{display:none}
  .om-ag-logo{width:32px;height:32px}
  .om-prog{margin:10px 0 6px}
  .om-step{padding:4px 0}
  .om-sys{padding-bottom:12px}
  .om-sys-hd{height:40px}
  .om-rows{height:calc(var(--om-row) + 6px)}
  .om-ask{padding:12px}
  .om-ask-tl{margin:8px 0 10px}
  .om-acts{gap:5px}
  .om-b-no,.om-b-yes{height:30px;padding:0 9px;font-size:12px}
  .om-pin{right:-17px;top:20px}
  .om-form-h,.om-fld:nth-of-type(5),.om-doc-att,.om-doc-who>span,.om-doc-ln .om-dl:not(:nth-child(2)){display:none}
  .om-form-bar{height:34px}
  .om-form-bd{gap:5px;padding:9px 12px 30px}
  .om-fld{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px}
  .om-fld-v{height:28px}
  .om-send{height:30px;margin-top:3px}
  .om-doc-hd{padding:9px 12px 8px}
  .om-doc-i{width:28px;height:28px;border-radius:9px}
  .om-doc-pg{margin:8px 10px 0;padding:8px 6px 4px}
  .om-dl{padding:3px 6px}
  .om-doc-top{padding-bottom:6px}
}

/* Rótulos de modo genéricos sobre fondo oscuro */
.t-ai{background:rgba(230,27,87,.2);color:var(--peach-100)}
.t-auto{background:rgba(244,165,138,.16);color:var(--peach-200)}
.t-ok{background:rgba(255,206,92,.14);color:#ffd77a}
.t-human{background:rgba(255,255,255,.1);color:#e6e8f5}
.t-done{background:rgba(52,199,120,.16);color:#7ee2a8}

/* ── Menú «Soluciones» (escritorio) ── */
.menu{align-items:center}
.mg-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 12px 9px 14px;border:0;border-radius:999px;background:transparent;font-size:15.5px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:color .2s,background-color .2s}
.mg-btn:hover,.mg-btn[aria-expanded="true"]{color:var(--ink);background:rgba(18,22,51,.05)}
.mg-btn[data-current]{color:var(--ink);background:var(--bg-3)}
.mg-btn .chev{width:12px;height:12px;transition:transform .25s var(--ease)}
.mg-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mega{position:absolute;left:0;right:0;top:calc(100% - 6px);padding-inline:var(--gutter);z-index:49}
.mega-in{max-width:min(1180px,calc(var(--max) - 2 * var(--gutter)));margin-inline:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(230px,.8fr);gap:8px 14px;padding:18px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-3)}
.js-motion .mega:not([hidden]) .mega-in{animation:mgIn .3s var(--ease) both}
@keyframes mgIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mg-h{padding:6px 10px 8px;font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.mg-col ul{list-style:none;display:grid;gap:2px}
.mg-col .mg-h a{display:inline;padding:0;border-radius:0;color:inherit;transition:color .2s}
.mg-col .mg-h a:hover{background:none;color:var(--orange-ink)}
.mg-col a{display:flex;align-items:flex-start;gap:12px;padding:10px;border-radius:14px;transition:background-color .2s}
.mg-col a:hover{background:var(--bg-2)}
.mg-col a[aria-current]{background:var(--peach-50)}
/* fila final «Ver todos los servicios» / «Ver todo para servicios profesionales»: si el texto no cabe en una línea, la
   flecha sigue a la última palabra */
.mg-col a.mg-more{display:block;min-height:0;margin-top:2px;padding:11px 10px;font-size:14.5px;line-height:1.5;font-weight:600;color:var(--orange-ink);text-wrap:balance}
.mg-col a.mg-more .arr{display:inline-block;vertical-align:-2px;margin-left:6px}
.mg-col a.mg-more:hover{background:none;color:var(--magenta)}
.mg-col .mg-h a[aria-current]{background:none;color:var(--orange-ink)}
.mg-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--peach-50);color:var(--orange-ink);flex:none;transition:background .2s,color .2s}
.mg-ic .ic{width:18px;height:18px}
.mg-col a:hover .mg-ic{background:var(--grad-cta);color:#fff}
.mg-col b{display:block;font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)}
.mg-col a > span:last-child > span{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--ink-3)}
.mg-feat{display:grid;gap:10px;align-content:start;justify-items:start;padding:20px;border-radius:18px;background:var(--grad-soft);font-size:14.5px;line-height:1.5}
.mg-feat-h{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.mg-feat .btn{margin-top:4px;width:100%}

/* ── Menú del celular: «Soluciones» desplegable ── */
.mobile-menu .mm-sol details{border-bottom:1px solid var(--line)}
.mobile-menu .mm-sol summary{display:flex;align-items:center;justify-content:space-between;padding:14px 2px;font-size:20px;font-weight:500;color:var(--ink);cursor:pointer;list-style:none}
.mobile-menu .mm-sol summary::-webkit-details-marker{display:none}
.mobile-menu .mm-sol summary::after{content:"";width:8px;height:8px;margin-right:2px;border-right:1.8px solid var(--ink-3);border-bottom:1.8px solid var(--ink-3);transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease)}
.mobile-menu .mm-sol details[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.mm-groups{display:grid;gap:4px;padding:0 0 16px}
.mm-h{padding:10px 2px 4px;font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
/* Título de grupo que lleva a su página general (/servicios/, /servicios-profesionales/) */
.mobile-menu .mm-h a{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0;font-size:inherit;font-weight:inherit;color:var(--ink-2);border-bottom:0}
.mobile-menu .mm-h a::after{width:6px;height:6px;border-width:1.6px;border-color:var(--ink-3)}
.mobile-menu .mm-sub a{justify-content:flex-start;gap:12px;padding:9px 2px;font-size:17px;border-bottom:0}
.mobile-menu .mm-sub a::after{display:none}
.mobile-menu .mm-sub .mg-ic{width:32px;height:32px;border-radius:10px}
.mm-groups .link{margin-top:4px}

/* ── Pie con más columnas ── */
@media (min-width:860px){.foot-in{grid-template-columns:1.3fr repeat(4,minmax(0,1fr))}}
.mobile-menu .mm-groups a.link{justify-content:flex-start;padding:10px 2px;font-size:16px;font-weight:600;color:var(--orange-ink);border-bottom:0}
.mobile-menu .mm-groups a.link::after{width:7px;height:7px;margin-left:2px;border-color:var(--orange-ink)}

/* ── Pilares (consultoría, automatización, desarrollo): tarjetas que se apilan al bajar ── */
.pillars{display:grid;gap:22px;list-style:none;counter-reset:pl}
.pillar{position:relative;display:grid;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(22px,3.4vw,44px);border-radius:var(--r-xl);background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-2);overflow:hidden}
.pillar::before{content:"";position:absolute;inset:auto -10% -40% auto;width:60%;height:80%;background:radial-gradient(closest-side,rgba(252,221,211,.7),transparent);pointer-events:none}
@media (min-width:980px){
  .pillar{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:min(560px,calc(100svh - var(--hdr-h) - 72px))}
  .pillars.is-stack .pillar{position:sticky;top:calc(var(--hdr-h) + 20px + var(--i,0) * 16px)}
}
.pl-copy{position:relative;display:grid;gap:16px;align-content:start;justify-items:start}
.pl-num{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--orange-ink);font-variant-numeric:tabular-nums}
.pl-num::before{content:"";width:28px;height:3px;border-radius:9px;background:var(--grad)}
.pl-copy h3{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);letter-spacing:-.03em;line-height:1.1}
.pl-copy p{max-width:52ch}
.pl-copy .ticks{margin-top:4px}
.pl-vis{position:relative;display:grid;place-items:center}

/* Maquetas de los pilares */
.vis{position:relative;width:100%;max-width:520px;padding:14px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-3);font-size:14px;color:var(--ink-2)}
.vis-bar{display:flex;align-items:center;gap:10px;padding:2px 4px 12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.vis-t{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink)}
.vis-t .ic{width:17px;height:17px;color:var(--orange)}
.vis-ex{margin-left:auto;padding:2px 8px;border-radius:99px;background:var(--bg-2);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.vis .dots{display:inline-flex;gap:5px}
.vis .dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.vtag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:99px;font-size:11.5px;font-weight:600;white-space:nowrap}
/* Los tres modos en fondos claros (un solo juego para todo el sitio): lo hace sola = durazno, te pide aprobación =
   ámbar, pasa a una persona = tinta. Sin verde (solo éxito) ni azul. */
:is(.vis,.modes-legend) :is(.t-ai,.t-auto){background:var(--peach-50);color:var(--orange-ink);box-shadow:inset 0 0 0 1px var(--peach-100)}
:is(.vis,.modes-legend) .t-ok{background:var(--warn-bg);color:var(--warn)}
:is(.vis,.modes-legend) .t-human{background:var(--ink);color:var(--paper)}

/* Consultoría: el diagnóstico marca cada paso del proceso */
.vc-list{position:relative;display:grid;gap:8px;list-style:none}
.vc-step{position:relative;z-index:1;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.vc-n{font-size:12px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.vc-tx{font-size:14px;line-height:1.35;color:var(--ink)}
.vc-scan{display:none}
.vc-out{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--ok-bg);color:var(--ok);font-size:14px;font-weight:600}
.vc-out .ic{width:19px;height:19px}
.js-motion .vis-consult .vtag{opacity:0;transform:translateX(8px) scale(.94);transition:opacity .4s var(--ease),transform .5s var(--spring)}
.js-motion .vis-consult .vc-step{transition:border-color .35s,background-color .35s}
.js-motion .vis-consult .vc-step.is-on{border-color:var(--peach-200);background:#fff}
.js-motion .vis-consult .vc-step.is-done .vtag{opacity:1;transform:none}
.js-motion .vis-consult .vc-out{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js-motion .vis-consult.is-done .vc-out{opacity:1;transform:none}

/* Automatización: un punto recorre el flujo y cada paso se enciende */
.va-flow{position:relative;display:grid;gap:14px;list-style:none;padding-left:2px}
.va-flow::before{content:"";position:absolute;left:20px;top:22px;bottom:22px;width:2px;background:var(--line-2);border-radius:2px}
.va-flow::after{content:"";position:absolute;left:20px;top:22px;width:2px;height:var(--fill,0%);max-height:calc(100% - 44px);background:var(--grad);border-radius:2px;transition:height .7s var(--ease)}
.va-node{position:relative;z-index:1;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px}
.va-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:#fff;border:1px solid var(--line-2);color:var(--ink-3);transition:background .35s,color .35s,border-color .35s,box-shadow .35s}
.va-ic .ic{width:19px;height:19px}
.va-tx{display:grid;gap:1px;min-width:0}
.va-tx b{font-size:14.5px;font-weight:600;line-height:1.3}
.va-tx span{font-size:12.5px;color:var(--ink-3)}
.va-node.is-on .va-ic{background:var(--grad-cta);border-color:transparent;color:#fff;box-shadow:0 8px 18px -10px rgba(230,27,87,.7)}
.va-sw{position:relative;display:inline-grid;grid-template-columns:1fr;align-items:center;height:26px;padding:0 10px 0 30px;border-radius:99px;background:var(--peach-50);font-size:11.5px;font-weight:600;color:var(--orange-ink);white-space:nowrap;transition:background .35s,color .35s}
.va-sw i{position:absolute;left:4px;top:4px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .35s var(--spring)}
.va-sw span{grid-area:1/1;transition:opacity .25s}
.va-sw .off{opacity:0}
.va-node.is-ask .va-sw{background:var(--warn-bg);color:var(--warn)}
.va-node.is-ask .va-sw .on{opacity:0}
.va-node.is-ask .va-sw .off{opacity:1}
@media (max-width:480px){.va-node{grid-template-columns:40px minmax(0,1fr)}.va-sw{grid-column:2;justify-self:start}}

/* Desarrollo a la medida: los módulos del sistema se arman en la ventana */
.vx-app{display:grid;grid-template-columns:116px minmax(0,1fr);gap:12px}
.vx-side{list-style:none;display:grid;gap:4px;align-content:start;padding:8px;border-radius:14px;background:var(--bg-2);font-size:13px;color:var(--ink-3)}
.vx-side li{padding:7px 10px;border-radius:9px}
.vx-side li.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
.vx-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.vx-mod{display:grid;gap:3px;padding:12px;border-radius:14px;background:var(--bg);border:1px solid var(--line);font-size:12.5px;line-height:1.35;color:var(--ink-3)}
.vx-mod b{font-size:14px;color:var(--ink)}
.vx-ic{display:grid;place-items:center;width:30px;height:30px;margin-bottom:4px;border-radius:9px;background:var(--peach-50);color:var(--orange-ink)}
.vx-ic .ic{width:16px;height:16px}
.vx-badge{position:absolute;right:-10px;bottom:-14px;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:99px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;box-shadow:var(--sh-2)}
.vx-badge .ic{width:16px;height:16px;color:var(--peach-200)}
.js-motion .vis-custom .vx-mod{opacity:0;transform:translateY(14px) scale(.96)}
.js-motion .vis-custom.is-in .vx-mod{animation:vxIn .6s var(--spring) both;animation-delay:calc(var(--i) * 110ms + 200ms)}
.js-motion .vis-custom .vx-badge{opacity:0;transform:translateY(8px)}
.js-motion .vis-custom.is-in .vx-badge{transition:opacity .5s var(--ease) 1.1s,transform .6s var(--spring) 1.1s;opacity:1;transform:none}
@keyframes vxIn{to{opacity:1;transform:none}}
@media (max-width:480px){.vx-app{grid-template-columns:1fr}.vx-side{display:none}.vx-badge{right:8px}}

/* ── Procesos: «Hoy» frente a «Con el trabajo terminado» ── */
.procs{display:grid;gap:clamp(20px,3vw,40px)}
@media (min-width:980px){.procs{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);align-items:start}}
.pr-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.pr-tabs::-webkit-scrollbar{display:none}
@media (min-width:980px){.pr-tabs{flex-direction:column;overflow:visible;position:sticky;top:calc(var(--hdr-h) + 24px)}}
.pr-tabs button{display:flex;align-items:center;gap:12px;flex:none;min-height:48px;padding:8px 16px 8px 8px;border-radius:16px;border:1px solid var(--line-2);background:var(--paper);font-size:15.5px;font-weight:500;color:var(--ink-2);text-align:left;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s,box-shadow .25s}
.pr-tabs button:hover{border-color:var(--line-3);color:var(--ink)}
.pr-tabs button[aria-selected="true"]{background:#fff;border-color:var(--peach-200);color:var(--ink);box-shadow:var(--sh-2)}
.pr-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--bg-2);color:var(--ink-3);flex:none;transition:background .25s,color .25s}
.pr-ic .ic{width:18px;height:18px}
.pr-tabs button[aria-selected="true"] .pr-ic{background:var(--grad-cta);color:#fff}
.pr-panel{display:grid;gap:14px;align-content:start}
.pr-prob{font-size:17px;color:var(--ink-2);max-width:60ch}
.pr-build{font-size:16px;max-width:62ch}
.pr-card{position:relative;margin-top:8px;padding:clamp(16px,2.4vw,26px);border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2)}
.pr-switch{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:999px;background:var(--bg-2);margin-bottom:18px;isolation:isolate}
.pr-t{min-height:40px;padding:0 18px;border:0;border-radius:999px;background:transparent;font-size:14.5px;font-weight:600;color:var(--ink-3);cursor:pointer;white-space:nowrap;transition:color .3s,background-color .35s,box-shadow .35s}
.pr-t:hover{color:var(--ink)}
.pr-t.is-on{color:#fff;background:var(--ink)}
.pr-t.is-on[data-side="after"]{background:var(--grad-cta);box-shadow:0 8px 18px -12px rgba(230,27,87,.7)}
.pr-list{display:grid;gap:10px;list-style:none}
.pr-list li{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;font-size:15.5px;line-height:1.4}
.pr-today li{background:var(--bg);color:var(--ink-3);border:1px dashed var(--line-3)}
.pr-today .ic{color:var(--warn)}
.pr-after li{background:var(--ok-bg);color:var(--ink);border:1px solid #cdebd9}
.pr-after .ic{color:var(--ok)}
.pr-after li.is-person{background:var(--paper);border-color:var(--line-2)}
.pr-after li.is-person .ic{color:var(--ink)}
.pr-after em{margin-left:auto;padding:2px 9px;border-radius:99px;background:var(--ink);font-style:normal;font-size:12px;font-weight:600;color:var(--paper);white-space:nowrap}
.pr-ex{position:absolute;right:18px;top:22px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:560px){.pr-ex{position:static;display:block;margin-top:12px}.pr-switch{display:grid;width:100%}.pr-t{padding:0 8px;font-size:13.5px;white-space:normal;line-height:1.15}}
.js-motion .pr-list:not([hidden]) li{animation:prIn .45s var(--ease) both;animation-delay:calc(var(--k,0) * 70ms)}
@keyframes prIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Plataforma por capas ── */
.stack{display:grid;gap:14px;list-style:none;perspective:1400px}
.st-layer{position:relative;display:grid;gap:14px;padding:clamp(18px,2.4vw,26px);border-radius:var(--r-l);border:1px solid var(--line);background:var(--paper);box-shadow:var(--sh-1)}
@media (min-width:860px){.st-layer{grid-template-columns:minmax(0,.9fr) minmax(0,2fr);align-items:center;gap:28px}}
.st-head{display:grid;gap:4px}
.st-tag{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.st-head b{font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem);letter-spacing:-.02em;color:var(--ink)}
.st-desc{font-size:15px;line-height:1.45;color:var(--ink-3)}
.st-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.st-chips li{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px;border-radius:999px;background:var(--bg);border:1px solid var(--line-2);font-size:14.5px;font-weight:500;color:var(--ink)}
.st-chips li span{padding:2px 8px;border-radius:99px;font-size:11.5px;font-weight:600;background:var(--bg-2);color:var(--ink-3)}
.st-top{background:var(--night);border-color:transparent;color:#c9cde6}
.st-top .st-head b{color:#fff}.st-top .st-tag,.st-top .st-desc{color:#9aa0c4}
.st-top .st-chips li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.st-mid{background:var(--grad-soft);border-color:var(--peach-100)}
.st-mid .st-chips li{background:#fff;border-color:var(--peach-100)}
.js-motion [data-stack] .st-layer{opacity:0;transform:translateY(40px) rotateX(18deg);transform-origin:50% 100%}
.js-motion [data-stack].is-in .st-layer{transition:opacity .7s var(--ease),transform .9s var(--spring);transition-delay:calc((2 - var(--i)) * 160ms);opacity:1;transform:none}
.js-motion [data-stack] .st-chips li{opacity:0;transform:scale(.9)}
.js-motion [data-stack].is-in .st-chips li{transition:opacity .4s var(--ease),transform .5s var(--spring);transition-delay:calc((2 - var(--i)) * 160ms + 300ms + var(--k,0) * 40ms);opacity:1;transform:none}

/* ── Método en siete etapas: la línea se llena al bajar y la etapa en pantalla se enciende ── */
.method{position:relative;display:grid}
.mt-rail{position:absolute;left:23px;top:24px;bottom:24px;width:2px;border-radius:2px;background:var(--line-2)}
.mt-rail i{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0) * 100%);border-radius:2px;background:var(--grad)}
.mt-steps{display:grid;gap:clamp(14px,2vw,22px);list-style:none}
.mt-step{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:clamp(14px,2vw,24px);align-items:start}
.mt-n{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:#fff;border:1px solid var(--line-2);font-size:15px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums;transition:background .4s,color .4s,border-color .4s,box-shadow .4s}
.mt-body{display:grid;gap:6px;padding:14px 18px 16px;border-radius:var(--r-m);background:var(--paper);border:1px solid var(--line);transition:border-color .4s,box-shadow .4s,transform .4s var(--ease)}
.mt-body h3{font-size:1.2rem}
.mt-body p{font-size:15.5px;line-height:1.5}
.mt-out{color:var(--ink)}
.mt-out b{color:var(--orange-ink)}
.mt-step.is-on .mt-n{background:var(--grad-cta);border-color:transparent;color:#fff;box-shadow:0 10px 22px -12px rgba(230,27,87,.7)}
.mt-step.is-on .mt-body{border-color:var(--peach-200);box-shadow:var(--sh-2)}
/* Siete columnas solo desde 1280 px (por debajo, la línea vertical): cada etapa muestra su nombre y lo que recibes;
   la descripción sigue en el celular y su contenido está en la tabla de responsabilidades */
@media (min-width:1280px){
  .method{grid-template-columns:minmax(0,1fr)}
  .mt-steps{grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
  .mt-rail{left:24px;right:24px;top:23px;bottom:auto;width:auto;height:2px}
  .mt-rail i{width:calc(var(--p,0) * 100%);height:100%}
  .mt-step{grid-template-columns:1fr;grid-template-rows:48px 1fr;gap:14px}
  .mt-body{padding:14px 14px 16px;height:100%;align-content:start}
  .mt-body h3{font-size:1.1rem}
  .mt-body p{font-size:14.5px;line-height:1.45}
  .mt-body p:not(.mt-out){display:none}
}

/* ── Mini-maquetas (mx-*) ── */
.mx{position:relative;display:grid;gap:10px;width:100%;max-width:400px;padding:14px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);font-size:13px;color:var(--ink-2)}
.mx-row{display:flex;align-items:center;gap:10px}
.mx-row > .m-tag{margin-left:auto}
.mx-av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--grad-cta);color:#fff;font-size:12.5px;font-weight:700;flex:none}
.mx-av.g{background:linear-gradient(135deg,#2c3354,#00062a)}
.mx-who{display:grid;line-height:1.25;min-width:0}
.mx-who b{font-size:14px}
.mx-who span{font-size:12px;color:var(--ink-3)}
.mx-chat{display:grid;gap:6px;padding:10px;border-radius:12px;background:var(--wa-chat)}
.mx-chat span{max-width:88%;padding:6px 9px;border-radius:9px;font-size:12.5px;line-height:1.35;color:#111b21;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.mx-in{justify-self:start;background:#fff;border-top-left-radius:2px}
.mx-out{justify-self:end;background:var(--wa-out);border-top-right-radius:2px}
.mx-steps{display:grid;gap:6px;list-style:none}
.mx-steps li{display:flex;align-items:center;gap:8px;font-size:12.8px;color:var(--ink-3)}
.mx-steps li::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--line-3);flex:none}
.mx-steps li.done{color:var(--ink)}
.mx-steps li.done::before{border-color:var(--ok);background:var(--ok)}
.mx-steps li.now{color:var(--ink);font-weight:600}
.mx-steps li.now::before{border-color:var(--orange);box-shadow:0 0 0 3px rgba(229,97,45,.18)}
.mx-ex{justify-self:end;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.mx-kitchen{grid-template-columns:1fr 1fr}
.mx-kitchen .mx-ex{grid-column:1/-1}
.mx-ticket{display:grid;gap:4px;align-content:start;padding:10px;border-radius:12px;background:var(--bg);border:1px dashed var(--line-3)}
.mx-ticket b{font-size:14px}
.mx-ticket > span:not(.m-tag){font-size:11.5px;color:var(--ink-3)}
.mx-ticket ul{list-style:none;display:grid;gap:2px;margin:4px 0 6px;font-size:12.5px;color:var(--ink)}
.mx-ticket .m-tag{justify-self:start}
.mx-plan{display:grid;gap:6px;list-style:none}
.mx-plan li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:8px 10px;border-radius:10px;background:var(--bg);font-size:12.8px;color:var(--ink)}
.mx-plan li b{min-width:30px;font-size:12px;color:var(--orange-ink)}
.mx-plan li.ask{background:var(--peach-50)}
.mx-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;list-style:none}
.mx-kpis li{display:grid;padding:8px 10px;border-radius:10px;background:var(--bg);line-height:1.2}
.mx-kpis b{font-size:19px;color:var(--ink);font-variant-numeric:tabular-nums}
.mx-kpis span{font-size:11px;color:var(--ink-3)}
.mx-urg{display:grid;gap:6px;list-style:none}
.mx-urg li{display:flex;align-items:center;gap:8px;font-size:12.6px;color:var(--ink);line-height:1.3}
.mx-urg .m-tag{flex:none}
/* Recorrido (agencia de seguros): las etapas se encienden en cadena */
.mx-journey{display:flex;flex-wrap:wrap;gap:6px;list-style:none;counter-reset:j}
.mx-journey li{position:relative;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:12.5px;font-weight:500;color:#e6e8f5;transition:background .35s,border-color .35s,color .35s}
.mx-journey li.is-on{background:var(--grad-cta);border-color:transparent;color:#fff}

/* ── Dos frentes ── */
.fronts{display:grid;gap:18px}
@media (min-width:980px){.fronts{grid-template-columns:1fr 1fr}}
.front{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-xl);background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-1);overflow:hidden;transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.front:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.front-vis{position:relative;display:grid;place-items:center;min-height:300px;padding:28px 22px;background:var(--grad-soft);border-bottom:1px solid var(--line);overflow:hidden}
.front-vis .phone{--pw:230px;transform:translateY(72px)}
.front:nth-child(2) .front-vis{background:linear-gradient(140deg,#f3f1fb 0%,#fbeee8 100%)}
.front-body{display:grid;gap:14px;align-content:start;padding:clamp(22px,3vw,32px)}
.front-body .eyebrow{margin-bottom:-2px}
.front-body h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);letter-spacing:-.028em}
.front-list{display:grid;gap:2px;list-style:none;margin-top:4px}
.front-list a{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line);font-weight:500;color:var(--ink);transition:color .2s,padding .25s var(--ease)}
.front-list a .ic{width:18px;height:18px;color:var(--orange)}
.front-list a::after{content:"";margin-left:auto;width:7px;height:7px;border-right:1.7px solid var(--ink-3);border-top:1.7px solid var(--ink-3);transform:rotate(45deg);transition:transform .25s var(--ease)}
.front-list a:hover{color:var(--orange-ink);padding-left:8px}
.front-list a:hover::after{transform:translateX(3px) rotate(45deg)}
.front-body .btn{justify-self:start;margin-top:6px}

/* ── Casos en mosaico ── */
.cases{display:grid;gap:18px;list-style:none}
@media (min-width:760px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.cases{grid-template-columns:repeat(3,minmax(0,1fr))}.case-card.feat{grid-column:span 2}}
.case-card{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-1);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.case-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.cc-vis{position:relative;display:grid;place-items:center;min-height:230px;padding:18px;background:var(--bg-2);overflow:hidden;border-bottom:1px solid var(--line)}
.cc-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.cc-vis .mx{max-width:340px;transform:scale(.94)}
.case-card.feat .cc-vis{height:auto;min-height:230px;align-content:center;justify-items:start;gap:18px;padding:26px 28px;background:radial-gradient(90% 120% at 100% 0%,rgba(230,27,87,.25),transparent 60%),var(--night);color:#c9cde6}
.case-card.feat .cc-vis p{max-width:46ch;font-size:15px;line-height:1.5}
.case-card.feat .cc-vis b{color:#fff}
.cc-body{display:grid;gap:10px;align-content:start;padding:20px 22px 22px}
.cc-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cc-body h3{font-size:1.28rem}
.cc-body h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.cc-body h3 a:focus-visible{outline:none}
.case-card:has(h3 a:focus-visible){outline:2.5px solid var(--navy);outline-offset:3px}
.cc-body p{font-size:15.5px;line-height:1.5}
.cc-proof{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.cc-proof span{padding:4px 10px;border-radius:99px;background:var(--bg);border:1px solid var(--line);font-size:12.5px;font-weight:500;color:var(--ink-2)}
.cc-body .tiny{margin-top:-2px}
/* «Ver el caso» al pie de la tarjeta (decorativo: el enlace del h3 ya cubre la tarjeta); queda abajo aunque el texto sea corto */
.cc-body:has(> .cc-go){display:flex;flex-direction:column;gap:10px}
.cc-body > .cc-go{align-self:flex-start;margin-top:auto;padding-top:2px;min-height:0;font-size:15px}
.case-card:hover .cc-go .arr{transform:translateX(3px)}

/* ── Productos ── */
.products{display:grid;gap:18px;list-style:none}
@media (min-width:980px){.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
.product{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-1);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.product:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.product-vis{position:relative;display:grid;place-items:center;height:250px;padding:18px;background:var(--grad-soft);overflow:hidden;border-bottom:1px solid var(--line)}
.product-vis img{position:absolute;left:18px;right:-40px;top:22px;width:calc(100% + 22px);max-width:none;border-radius:12px;box-shadow:var(--sh-3);object-fit:cover;object-position:top left;height:auto}
.product-vis .mx{transform:scale(.92)}
.product-body{display:grid;gap:10px;align-content:start;padding:20px 22px 22px}
.product-body h3{font-size:1.3rem}
.product-body h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.product-body h3 a:focus-visible{outline:none}
.product:has(h3 a:focus-visible){outline:2.5px solid var(--navy);outline-offset:3px}
.product-body p{font-size:15.5px;line-height:1.5}
.product .more{margin-top:auto;padding-top:4px;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--orange-ink)}
.product .more .arr{width:15px;height:15px;transition:transform .25s var(--ease)}
.product:hover .more .arr{transform:translateX(3px)}
.product.nf .product-vis{background:#08080a}
.product.nf .product-vis img{position:static;width:min(220px,70%);border-radius:0;box-shadow:none;filter:invert(1)}
.product.nf .product-vis .nf-line{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:13px;color:#a7a7ad}

/* ── Programas de apoyo: cinta que se desplaza (quieta con movimiento reducido o sin JS) ── */
.programs{border-bottom:1px solid var(--line)}
.programs .def-label{margin-bottom:18px}
/* Franja de programas al pie de las páginas de solución y de proyectos: rótulo h2 discreto y línea arriba */
.cx-programs{border-top:1px solid var(--line)}
.cx-prog-h{margin-bottom:18px;font-size:13.5px;font-weight:500;letter-spacing:0;line-height:1.4;text-align:center;color:var(--ink-3)}
.marquee{position:relative;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;flex:none;align-items:center;gap:56px;padding-right:56px;list-style:none;animation:mq 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee .logo-item img{height:28px;width:auto}
@keyframes mq{to{transform:translateX(-100%)}}
html:not(.js-motion) .marquee{-webkit-mask-image:none;mask-image:none;justify-content:center}
html:not(.js-motion) .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;gap:14px 34px;padding-right:0;flex:1}
html:not(.js-motion) .marquee-track[aria-hidden="true"]{display:none}

/* ── Hero del sitio integral ── */
.hero-v2 .hero-copy .lede{max-width:58ch}
.hero-stage-v2{min-height:0}
@media (min-width:980px){.hero-v2 .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hero-stage-v2{justify-items:end}}

/* ── Ideas para el formulario: un toque escribe el comienzo del mensaje ── */
.need-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
.need-chips button{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.need-chips button:hover{border-color:var(--peach-200);color:var(--ink)}
.need-chips button[aria-pressed="true"]{background:var(--peach-50);border-color:var(--peach-200);color:var(--orange-ink)}

/* ── Plano de «tu sistema» (tarjeta de producto a la medida) ── */
.mx-plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mx-plan-grid span{display:grid;place-items:center;min-height:64px;padding:8px;border-radius:12px;border:1.5px dashed var(--peach-200);background:rgba(255,255,255,.6);font-size:12.8px;font-weight:600;color:var(--orange-ink);text-align:center}
.mx-plan-grid span:first-child{grid-column:1/-1;min-height:44px;border-style:solid;border-color:var(--line-2);background:#fff;color:var(--ink)}

/* Tienda online (frente de ventas en línea) */
.mx-shop{position:relative;width:100%;max-width:440px;height:250px}
.mx-shop-card{position:absolute;left:0;top:6px;display:grid;width:min(200px,48%);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--sh-3)}
.mx-shop-card .ph{aspect-ratio:1/1;background:var(--bg-3)}
.mx-shop-b{display:grid;gap:1px;padding:10px 12px 12px;font-size:12px;color:var(--ink-3)}
.mx-shop-b b{font-size:13.5px;color:var(--ink)}
.mx-bub{position:absolute;right:0;max-width:min(240px,54%);padding:8px 11px;border-radius:12px;font-size:13px;line-height:1.35;color:#111b21;box-shadow:0 1px .5px rgba(11,20,26,.13),var(--sh-2)}
.mx-bub.in{top:18px;background:#fff;border-top-left-radius:3px}
.mx-bub.out{top:96px;background:var(--wa-out);border-top-right-radius:3px}
.mx-pill{position:absolute;right:8px;bottom:22px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--ok-bg);border:1px solid #cdebd9;color:var(--ok);font-size:13px;font-weight:600;box-shadow:var(--sh-2)}
.mx-pill .ic{width:17px;height:17px}
.mx-shop .mx-ex{position:absolute;right:10px;bottom:0}
.js-motion .mx-shop .mx-bub,.js-motion .mx-shop .mx-pill{opacity:0;transform:translateY(8px) scale(.97)}
.js-motion .is-in .mx-shop .mx-bub,.js-motion .is-in .mx-shop .mx-pill{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .6s var(--spring)}
.js-motion .is-in .mx-shop .mx-bub.in{transition-delay:.25s}
.js-motion .is-in .mx-shop .mx-bub.out{transition-delay:.9s}
.js-motion .is-in .mx-shop .mx-pill{transition-delay:1.6s}

/* Pie: la marca necesita un poco más de ancho con cinco columnas */
@media (min-width:860px){.foot-in{grid-template-columns:1.3fr repeat(5,minmax(0,1fr));gap:36px 24px}}
.foot-wa{white-space:nowrap}

/* Celular: las tarjetas con maquetas no deben ensanchar su columna */
.front-vis,.cc-vis,.product-vis,.pl-vis{grid-template-columns:minmax(0,1fr)}
.front-vis > *,.cc-vis > *,.product-vis > *,.pl-vis > *{min-width:0}
.front-vis > .mx,.front-vis > .mx-shop,.cc-vis > .mx,.product-vis > .mx{justify-self:center}
@media (max-width:520px){
  .vc-step{grid-template-columns:24px minmax(0,1fr);row-gap:6px}
  .vc-step .vtag{grid-column:2;justify-self:start}
}

/* Transición suave entre páginas donde el navegador la soporta (sin JS; nada con movimiento reducido) */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}

/* ── «Tu equipo decide»: simulador de aprobación ── */
.decide{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:980px){.decide{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.modes-legend{display:grid;gap:10px;list-style:none;margin-top:6px}
.modes-legend li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;font-size:15.5px}
.modes-legend .vtag{justify-self:start;min-width:150px;justify-content:center}
/* colores de los tres modos: el juego común de «.vis» (arriba, «Maquetas de los pilares») */
.approve{display:grid;gap:12px;padding:clamp(14px,2vw,20px);border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-3)}
.ap-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:2px 4px 10px;border-bottom:1px solid var(--line)}
.ap-head b{font-size:16px}
.ap-count{padding:3px 10px;border-radius:99px;background:var(--warn-bg);color:var(--warn);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.ap-ex{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ap-list{display:grid;gap:10px;list-style:none}
.ap-card{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px 14px;padding:14px;border-radius:18px;background:var(--bg);border:1px solid var(--line);transition:background-color .35s,border-color .35s,opacity .35s}
@media (min-width:640px){.ap-card{grid-template-columns:40px minmax(0,1fr) auto;align-items:center}}
.ap-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--peach-50);color:var(--orange-ink)}
.ap-ic .ic{width:19px;height:19px}
.ap-body{display:grid;gap:2px;min-width:0}
.ap-meta{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.ap-body b{font-size:15.5px;line-height:1.3}
.ap-why{font-size:14px;line-height:1.45;color:var(--ink-3)}
.ap-state{display:none;align-items:center;gap:6px;margin-top:4px;font-size:13.5px;font-weight:600}
.ap-actions{display:flex;gap:8px;grid-column:2}
@media (min-width:640px){.ap-actions{grid-column:auto}}
.ap-actions button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s,border-color .2s,transform .15s}
.ap-actions button:active{transform:scale(.97)}
.ap-yes{border:0;background:var(--ink);color:#fff}
.ap-yes:hover{background:var(--navy)}
.ap-yes .ic{width:16px;height:16px}
.ap-no{border:1px solid var(--line-2);background:#fff;color:var(--ink-2)}
.ap-no:hover{border-color:var(--line-3);color:var(--ink)}
html:not(.js):not(.js-motion) .ap-actions{display:none}
.ap-card.is-ok{background:var(--ok-bg);border-color:#cdebd9}
.ap-card.is-ok .ap-ic{background:#fff;color:var(--ok)}
.ap-card.is-no{opacity:.75}
.ap-card.is-ok .ap-state,.ap-card.is-no .ap-state{display:flex}
.ap-card.is-ok .ap-state{color:var(--ok)}
.ap-card.is-no .ap-state{color:var(--ink-3)}
.ap-card.is-ok .ap-actions,.ap-card.is-no .ap-actions{display:none}
.ap-card.is-ok .ap-why,.ap-card.is-no .ap-why{display:none}
.js-motion .ap-card.is-ok,.js-motion .ap-card.is-no{animation:apPop .45s var(--spring)}
@keyframes apPop{0%{transform:scale(.98)}60%{transform:scale(1.01)}100%{transform:none}}
.ap-done{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:16px;background:var(--ok-bg);color:var(--ok);font-weight:600;font-size:14.5px}
.ap-done p{display:flex;align-items:center;gap:8px}
.ap-done .ic{width:18px;height:18px}
.ap-reset{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid #cdebd9;background:#fff;color:var(--ok);font-weight:600;cursor:pointer}
.ap-log{padding:4px 4px 0}
.ap-log-h{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ap-log ol{display:grid;gap:4px;margin-top:6px;list-style:none;font-size:13.5px;color:var(--ink-2)}
.ap-log ol:empty::before{content:"Aún no hay decisiones.";color:var(--ink-3)}
.ap-log li{display:flex;gap:8px}
.ap-log time{color:var(--ink-3);font-variant-numeric:tabular-nums}
.js-motion .ap-log li{animation:prIn .4s var(--ease) both}
.ap-count.is-zero{background:var(--ok-bg);color:var(--ok)}

/* Ajustes de la revisión: tarjetas con maqueta crecen lo necesario (las de captura conservan su alto fijo) */
.cc-vis:has(> img){height:230px}
@media (max-width:520px){.modes-legend li{align-items:start}.modes-legend .vtag{min-width:0;margin-top:1px}}
/* Interruptor de la maqueta de automatización: la perilla también se mueve al pedir aprobación */
.va-sw{transition:background .35s,color .35s,padding .35s var(--spring)}
.va-sw i{transition:left .35s var(--spring)}
.va-node.is-ask .va-sw{padding:0 30px 0 10px}
.va-node.is-ask .va-sw i{left:calc(100% - 22px)}
/* Tienda en celular: la confirmación del pedido va debajo de la ficha, sin tapar el precio */
@media (max-width:520px){.mx-shop{height:300px}.mx-pill{left:0;right:auto;bottom:20px}.mx-shop .mx-ex{bottom:0}}

/* ── Páginas de solución por gremio (sp-): hero con «En resumen», demo, antes y después, módulos, reglas, pasos y relacionadas ── */
.sp-hero-in{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:980px){.sp-hero-in{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}
.sp-copy{display:grid;gap:18px;justify-items:start}
.sp-copy .hero-ctas{margin-top:4px}
.sp-hero .h1-page{text-wrap:balance}
.sp-hero .lede{max-width:62ch}
.sp-hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:min(720px,80vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(244,165,138,.32),rgba(230,27,87,.08) 60%,transparent);filter:blur(20px);pointer-events:none;z-index:-1}
.sp-sum{position:relative;padding:22px 22px 18px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-2)}
.sp-sum::before{content:"";position:absolute;inset:0 0 auto;height:4px;border-radius:var(--r-l) var(--r-l) 0 0;background:var(--grad)}
.sp-sum-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink)}
.sp-sum-h .ic{width:16px;height:16px}
.sp-sum dl{display:grid;margin:0}
.sp-sum dl > div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.sp-sum dl > div:first-child{border-top:0}
.sp-sum dt{font-size:13.5px;font-weight:600;color:var(--ink)}
.sp-sum dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
@media (max-width:520px){.sp-sum dl > div{grid-template-columns:1fr;gap:2px}}

.sp-demo{position:relative;background:linear-gradient(180deg,var(--bg-2),var(--bg) 85%)}
.sp-demo::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(18,22,51,.07) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%);pointer-events:none}
.sp-demo .wrap{position:relative}
.sp-demo-head{display:grid;gap:10px;max-width:760px;margin:0 auto clamp(22px,3vw,36px);text-align:center;justify-items:center}
.sp-demo-head .lede{max-width:62ch}
.sp-demo .dx{max-width:1120px;margin-inline:auto}
/* En el celular, la cabecera de la demo va a la izquierda como las demás (el texto largo centrado se lee peor) */
@media (max-width:719px){.sp-demo-head{text-align:left;justify-items:start}}
/* La demo termina en el mismo fondo de la sección siguiente: menos aire entre las dos para que no quede un hueco */
.sp-demo{padding-bottom:clamp(40px,5vw,72px)}
.sp-demo + .sec:not(.sec-alt):not(.sec-dark){padding-top:clamp(40px,5vw,80px)}

.sp-pains{display:grid;gap:14px;list-style:none}
@media (min-width:700px){.sp-pains{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.sp-pains{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sp-pains > li{display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.sp-pains > li:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
/* «Hoy» y «Con el sistema» alineados entre tarjetas de la misma fila */
@supports (grid-template-rows:subgrid){@media (min-width:700px){.sp-pains > li{grid-row:span 2;grid-template-rows:subgrid;row-gap:0}}}
.sp-pains p{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 10px;margin:0;padding:16px 18px;font-size:15.5px;line-height:1.5}
.sp-pains p .ic{width:20px;height:20px;margin-top:2px;grid-row:span 2}
.sp-pains p > span{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.sp-before{background:var(--bg-2);color:var(--ink-3)}
.sp-before .ic,.sp-before > span{color:var(--ink-3)}
.sp-after{color:var(--ink)}
.sp-after .ic{color:var(--ok)}
.sp-after > span{color:var(--ok)}

.sp-mods{display:grid;gap:14px;list-style:none}
@media (min-width:680px){.sp-mods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.sp-mods{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sp-mod{position:relative;display:grid;gap:8px;align-content:start;padding:22px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line);transition:border-color .25s,box-shadow .3s var(--ease),transform .3s var(--ease)}
.sp-mod:hover{border-color:var(--peach-200);box-shadow:var(--sh-2);transform:translateY(-2px)}
.sp-mod-ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:4px;border-radius:14px;background:var(--peach-50);color:var(--orange-ink);transition:background .25s,color .25s}
.sp-mod-ic .ic{width:22px;height:22px}
.sp-mod:hover .sp-mod-ic,.sp-mod.is-ai .sp-mod-ic{background:var(--grad-cta);color:#fff}
.sp-mod h3{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:1.13rem;line-height:1.25;color:var(--ink)}
.sp-mod p{font-size:15.5px;line-height:1.5}
.sp-ai{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:99px;background:linear-gradient(100deg,rgba(212,201,0,.18),rgba(229,97,45,.16),rgba(230,27,87,.14));font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--orange-ink)}
/* «Con IA» va en la fila del ícono, fuera del título: los títulos largos no la bajan de línea y las descripciones de una
   misma fila empiezan a la misma altura */
.sp-mod .sp-ai{position:absolute;top:33px;right:22px}
.sp-chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin-top:4px}
.sp-chips li{padding:4px 10px;border-radius:99px;background:var(--bg);border:1px solid var(--line-2);font-size:13px;font-weight:500;color:var(--ink-2)}

.sp-rules{display:grid;gap:14px}
@media (min-width:900px){.sp-rules{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sp-rule{display:grid;gap:12px;align-content:start;padding:22px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line)}
.sp-rule h3{display:flex;align-items:center;gap:10px;font-size:1.08rem;color:var(--ink)}
.sp-rule h3 i{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;flex:none}
.sp-rule h3 .ic{width:18px;height:18px}
/* Los tres modos (mismo juego que .vis y .modes-legend): sola = durazno, aprobación = ámbar, persona = tinta */
.sp-rule.k-auto h3 i{background:var(--peach-50);color:var(--orange-ink)}
.sp-rule.k-ask h3 i{background:var(--warn-bg);color:var(--warn)}
.sp-rule.k-human h3 i{background:var(--ink);color:var(--paper)}
.sp-rule ul{display:grid;gap:9px;list-style:none;font-size:15px;line-height:1.45}
.sp-rule li{display:grid;grid-template-columns:8px minmax(0,1fr);gap:10px}
.sp-rule li::before{content:"";width:6px;height:6px;margin-top:9px;border-radius:50%;background:var(--line-3)}
.sp-rule.k-auto li::before{background:var(--peach-300)}.sp-rule.k-ask li::before{background:var(--warn)}.sp-rule.k-human li::before{background:var(--ink-3)}

.sp-steps{display:grid;gap:14px;list-style:none;counter-reset:sp}
@media (min-width:760px){.sp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.sp-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sp-steps li{position:relative;display:grid;gap:8px;align-content:start;padding:22px 20px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line)}
.sp-steps li b{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--orange-ink)}
.sp-steps h3{font-size:1.1rem;color:var(--ink)}
.sp-steps p{font-size:15px;line-height:1.5}
.sp-steps .sp-get{margin-top:4px;padding-top:10px;border-top:1px dashed var(--line-2);font-size:13.5px;color:var(--ink-3)}
.sp-steps .sp-get strong{color:var(--ink);font-weight:600}
@media (min-width:1080px){.sp-steps li:not(:last-child)::after{content:"";position:absolute;top:34px;right:-15px;width:16px;height:2px;background:var(--grad);z-index:1}}

.sp-rel{display:grid;gap:12px;list-style:none}
@media (min-width:700px){.sp-rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.sp-rel{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sp-rel a{display:grid;grid-template-columns:40px minmax(0,1fr) 16px;align-items:center;gap:12px;height:100%;padding:16px;border-radius:var(--r-m);background:var(--paper);border:1px solid var(--line);transition:border-color .2s,box-shadow .25s,transform .25s var(--ease)}
.sp-rel a:hover{border-color:var(--peach-200);box-shadow:var(--sh-1);transform:translateY(-2px)}
.sp-rel-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--peach-50);color:var(--orange-ink)}
.sp-rel-ic .ic{width:20px;height:20px}
.sp-rel b{display:block;font-size:15.5px;color:var(--ink)}
.sp-rel a > span:nth-child(2) > span{display:block;font-size:13.5px;line-height:1.4;color:var(--ink-3)}
.sp-rel .arr{width:16px;height:16px;color:var(--ink-3);transition:transform .2s,color .2s}
.sp-rel a:hover .arr{transform:translateX(3px);color:var(--orange-ink)}

/* ── Vitrina de demos (inicio y hubs): pestañas por gremio; cada demo se monta al elegirla ── */
.dsh{display:grid;gap:18px}
.dsh-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.dsh-tabs button{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 12px;border-radius:99px;border:1px solid var(--line-2);background:var(--paper);font-size:15px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,box-shadow .25s}
.dsh-tabs button .ic{width:18px;height:18px;color:var(--orange-ink);transition:color .2s}
.dsh-tabs button:hover{border-color:var(--peach-200);color:var(--ink)}
.dsh-tabs button[aria-selected="true"]{background:var(--grad-cta);border-color:transparent;color:#fff;box-shadow:0 10px 22px -12px rgba(224,4,76,.6)}
.dsh-tabs button[aria-selected="true"] .ic{color:#fff}
.dsh-tabs .dsh-sep{width:1px;align-self:stretch;margin:6px 4px;background:var(--line-2)}
@media (max-width:760px){
  .dsh-tabs button{height:40px;font-size:14.5px}
  /* Todas las pestañas a la vista, en dos columnas, para que cada gremio vea la suya sin deslizar. En la vitrina de los dos
     frentes, la raya ocupa una fila entera entre ventas en línea y servicios profesionales. En la de un solo frente (sin
     raya), con un número impar de pestañas la última ocupa la fila entera (con raya no aplica: la raya cuenta como hijo) */
  .dsh-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin-inline:0;padding:0}
  .dsh-tabs button{justify-content:center;min-width:0;padding:0 12px}
  .dsh-tabs:not(:has(.dsh-sep)) button:last-child:nth-child(odd){grid-column:1/-1}
  .dsh-tabs .dsh-sep{grid-column:1/-1;width:auto;height:1px;align-self:auto;margin:4px 0}
}
.dsh-panel{display:grid;gap:14px}
.dsh-panel[hidden]{display:none}
.js-motion .dsh-panel:not([hidden]){animation:dshIn .45s var(--ease) both}
@keyframes dshIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dsh-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;font-size:15.5px}
.dsh-more .link{font-weight:600}

/* ── Qué hacemos (inicio): tres servicios en tarjetas ── */
.svc3{display:grid;gap:16px;list-style:none;counter-reset:s}
@media (min-width:980px){.svc3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.svc3 > li{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.4vw,30px);border-radius:var(--r-xl);background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s}
.svc3 > li::after{content:"";position:absolute;inset:auto -30% -55% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(244,165,138,.28),transparent);opacity:0;transition:opacity .4s;pointer-events:none}
.svc3 > li:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--peach-200)}
.svc3 > li:hover::after{opacity:1}
.svc3-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.svc3-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--grad-cta);color:#fff;box-shadow:0 12px 24px -14px rgba(224,4,76,.7)}
.svc3-ic .ic{width:26px;height:26px}
.svc3-n{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ink-3)}
.svc3 h3{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.2;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.svc3 p{font-size:16px;line-height:1.55}
.svc3 .ticks{margin:2px 0 4px}
.svc3 .acts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:auto}

/* ── Galería de soluciones por gremio ── */
.solg{display:grid;gap:clamp(28px,4vw,44px)}
.solg-grp{display:grid;gap:14px}
.solg-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.solg-h h3{font-size:1.3rem;letter-spacing:-.02em;color:var(--ink)}
.solg-h p{font-size:15.5px;color:var(--ink-3)}
.solg ul{display:grid;gap:14px;list-style:none}
@media (min-width:640px){.solg ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.solg ul{grid-template-columns:repeat(4,minmax(0,1fr))}}
.solg li > a{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;padding:20px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .25s}
.solg li > a::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.solg li > a:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--peach-200)}
.solg li > a:hover::before{transform:scaleX(1)}
.solg-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--peach-50);color:var(--orange-ink);transition:background .25s,color .25s}
.solg-ic .ic{width:22px;height:22px}
.solg li > a:hover .solg-ic{background:var(--grad-cta);color:#fff}
.solg b{font-size:1.1rem;color:var(--ink)}
.solg li > a > span:not(.solg-ic):not(.solg-go){font-size:15px;line-height:1.5;color:var(--ink-2)}
.solg-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;font-size:14.5px;font-weight:600;color:var(--orange-ink)}
.solg-go .arr{width:15px;height:15px;transition:transform .2s}
.solg li > a:hover .solg-go .arr{transform:translateX(3px)}
.solg-h h3 a{transition:color .2s}
.solg-h h3 a:hover{color:var(--orange-ink)}
@media (max-width:639px){
  .solg ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .solg li > a{gap:8px;padding:14px}
  .solg li > a > span:not(.solg-ic):not(.solg-go){display:none}
  .solg b{font-size:1rem;line-height:1.25}
  .solg-ic{width:38px;height:38px;border-radius:12px}
  .solg-go{font-size:13.5px}
  .solg-h p{font-size:14.5px}
  /* Galería con descripciones (solg_pro): una columna, ícono a la izquierda y la descripción visible */
  .solg-full ul{grid-template-columns:1fr}
  .solg-full li > a{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:12px;row-gap:4px}
  .solg-full .solg-ic{grid-row:span 3}
  .solg-full li > a > span:not(.solg-ic):not(.solg-go){display:block;font-size:14.5px}
}
/* Páginas de solución en celular: tarjetas más cortas */
@media (max-width:639px){
  .sp-mod{grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:16px}
  .sp-mod-ic{grid-row:span 2;width:40px;height:40px;margin:0;border-radius:12px}
  .sp-mod h3{font-size:1.04rem}
  .sp-mod p{font-size:14.5px}
  .sp-chips{display:none}
  .sp-pains p{padding:13px 15px;font-size:14.5px}
  .sp-rule,.sp-steps li{padding:18px}
  .sp-mod:has(.sp-ai) h3{padding-right:62px}
  .sp-mod .sp-ai{top:16px;right:16px}
}

/* ── Bloque de casos ({{cases:...}}, v2.cases): la cuadrícula depende de cuántas tarjetas hay, sin huecos ── */
.cases-n1{grid-template-columns:minmax(0,1fr)}
/* mismo alto de visual en todas las tarjetas (captura o maqueta): los textos de una fila empiezan a la misma altura */
.cases:is(.cases-n2,.cases-n3,.cases-n4) > li .cc-vis{height:280px}
.cases[class*="cases-n"] .cc-vis img{object-position:top left}   /* el titular de la captura no se corta en columnas angostas */
@media (min-width:760px){.cases-n2,.cases-n3,.cases-n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){
  .cases-n1{grid-template-columns:minmax(0,1fr)}
  .cases-n2,.cases-n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cases-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Tarjeta horizontal (visual a la izquierda, texto a la derecha): una sola tarjeta desde 900 px, y la tercera de tres
   entre 760 y 1079 px, que ocupa la fila entera */
@media (min-width:900px){
  .cases-n1 > li{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:none}
  .cases-n1 > li .cc-vis{height:auto;min-height:300px;border-bottom:0;border-right:1px solid var(--line)}
  .cases-n1 > li .cc-body{align-content:center;justify-content:center;padding:28px 30px}
  .cases-n1 > li .cc-go{margin-top:4px}
}
@media (min-width:760px) and (max-width:1079px){
  .cases-n3 > li:nth-child(3){grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:none}
  .cases-n3 > li:nth-child(3) .cc-vis{height:auto;min-height:260px;border-bottom:0;border-right:1px solid var(--line)}
  .cases-n3 > li:nth-child(3) .cc-body{align-content:center;justify-content:center}
  .cases-n3 > li:nth-child(3) .cc-go{margin-top:4px}
}
/* «Ver los casos completos» debajo del bloque */
.cases-more{display:flex;margin-top:clamp(18px,2.4vw,28px)}
/* Maqueta de formalización (seguros): la de la tarjeta, legible sobre el fondo claro */
.mx-formal .mx-steps li{font-size:13px}
.mx-formal .mx-steps li.now{color:var(--ink)}

/* Visuales de casos */
/* casevis.py: maquetas ilustrativas del entregable de cada caso (prefijo .cv-). La maqueta llena el área visual de la
   tarjeta (.cc-vis) y su ventana se corta en el borde inferior, como una pantalla que asoma; las consultas de contenedor
   (.cv) suben el detalle cuando el área es más ancha o más alta (tarjetas horizontales del inicio). Modos de la IA:
   lo hace sola = durazno, te pide aprobación = ámbar, pasa a una persona = tinta. */
.cc-vis:has(> .cv){min-height:250px;padding:0;background:radial-gradient(120% 90% at 100% 0%,var(--peach-50),transparent 60%),var(--bg-2)}
.cv{position:absolute;inset:0;container-type:size;padding:18px 18px 0;font-size:12px;line-height:1.35;color:var(--ink-2);text-align:left}
.cv-win{position:relative;display:flex;flex-direction:column;height:calc(100% + 1px);border-radius:16px 16px 0 0;background:var(--paper);border:1px solid var(--line-2);border-bottom:0;box-shadow:var(--sh-3);overflow:hidden}
.cv-bar{display:flex;align-items:center;gap:10px;flex:none;padding:8px 12px;border-bottom:1px solid var(--line)}
.cv-t{display:flex;align-items:center;gap:7px;min-width:0;font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.cv-t .ic{width:16px;height:16px;color:var(--orange)}
.cv-t > span{overflow:hidden;text-overflow:ellipsis}
.cv-ex{flex:none;margin-left:auto;padding:2px 8px;border-radius:99px;background:var(--bg-2);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.cv-body{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;padding:12px}
.cv-body > *{flex:none}   /* nada se encoge: lo que no cabe se corta en el borde, como la pantalla que asoma */
.cv ul,.cv ol{list-style:none;margin:0;padding:0}
/* los tres modos */
.cv-m{display:inline-flex;align-items:center;flex:none;height:20px;padding:0 7px;border-radius:99px;font-size:10.5px;font-weight:600;white-space:nowrap}
.cv-m-sola{background:var(--peach-50);color:var(--orange-ink);box-shadow:inset 0 0 0 1px var(--peach-100)}
.cv-m-apr{background:var(--warn-bg);color:var(--warn)}
.cv-m-per{background:var(--ink);color:var(--paper)}
.cv-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:auto;font-size:10.5px;color:var(--ink-3)}
.cv-legend li{display:inline-flex;align-items:center;gap:5px}
.cv-legend i{width:10px;height:10px;border-radius:3px}
.cv-legend i{flex:none}
.cv-legend i.cv-m-sola{background:var(--peach-50);box-shadow:inset 0 0 0 1.5px var(--peach-300)}
.cv-legend i.cv-m-apr{background:var(--warn-bg);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--warn) 55%,transparent)}
/* «Qué se propone» y «Plan por prioridad» */
.cv-plan{display:grid;gap:6px}
.cv-plan-h{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.cv-plan-h .ic{width:13px;height:13px;color:var(--orange)}
.cv-plan :is(ul,ol){display:grid;gap:5px}
.cv-plan li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:10px;background:var(--bg);border:1px solid var(--line);font-size:11.5px;color:var(--ink)}

/* Restaurante: pantalla de cocina (fondo de tinta, como la pantalla real) */
.cv-kds .cv-win{background:var(--night);border-color:color-mix(in srgb,var(--paper) 14%,transparent)}
.cv-kds .cv-bar{border-bottom-color:color-mix(in srgb,var(--paper) 10%,transparent)}
.cv-kds .cv-t{color:var(--paper)}
.cv-kds .cv-t .ic{color:var(--peach-300)}
.cv-kds .cv-ex{background:color-mix(in srgb,var(--paper) 10%,transparent);color:var(--peach-100)}
.cv-kcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cv-kcol{display:flex;flex-direction:column;gap:7px;min-width:0}
.cv-kcol-h{display:flex;align-items:center;gap:5px;padding:0 2px;font-size:11px;font-weight:600;color:var(--peach-100)}
.cv-kcol-h .ic{width:13px;height:13px;color:var(--peach-300)}
.cv-kcol-h b{display:grid;place-items:center;min-width:18px;height:18px;margin-left:auto;padding:0 5px;border-radius:99px;background:color-mix(in srgb,var(--paper) 12%,transparent);font-size:10px;color:var(--paper)}
.cv-tk{display:grid;gap:4px;padding:7px 8px 8px;border-radius:10px;background:var(--paper);border-top:3px solid var(--peach-300);font-size:11px;color:var(--ink-2)}
.cv-tk-new{border-top-color:var(--line-3)}
.cv-tk-ready{border-top-color:var(--ok)}
.cv-tk-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1px 6px}
.cv-tk-h b{font-size:11.5px;color:var(--ink);white-space:nowrap}
.cv-tk-t{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.cv-tk-t .ic{width:11px;height:11px}
.cv-tk-t.is-late{color:var(--warn)}
.cv-tk ul{display:grid;gap:1px;color:var(--ink)}
.cv-tk-st{justify-self:start;height:18px;padding:0 7px;border-radius:99px;font-size:10px;font-weight:600;line-height:18px;background:var(--peach-50);color:var(--orange-ink)}
.cv-tk-new .cv-tk-st{background:var(--bg-2);color:var(--ink-3)}
.cv-tk-ready .cv-tk-st{background:var(--ok-bg);color:var(--ok)}
.cv-kds .cv-tk:nth-child(n+5){position:absolute;top:100%;left:0}

/* Constructora: embudo del proceso comercial con la propuesta en cada etapa. El modo va a la derecha de la barra
   (fuera del recorte del trapecio); en celular es una muestra de color que explica la leyenda. Donde se pierden
   clientes, la flecha roja; la píldora «Se pierden» va pegada al nombre y solo sale si hay espacio. En áreas altas
   (tarjeta horizontal del inicio) el modo sale de la barra y aparece la lista «Qué se propone». */
.cv-fn{display:grid;gap:4px}
.cv-fn-row{position:relative;display:flex;justify-content:center;padding-right:var(--fn-pad,28px)}
.cv-fn-bar{display:flex;align-items:center;gap:7px;width:var(--w);height:24px;padding:0 12px;background:var(--peach-50);clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,7px 100%);font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;transform-origin:center}
.cv-fn-bar .ic{flex:none;width:14px;height:14px;color:var(--orange-ink)}
.cv-fn-row.is-leak .cv-fn-bar .ic{color:var(--danger);stroke-width:2.2}
.cv-fn-row:nth-child(2) .cv-fn-bar{background:color-mix(in srgb,var(--peach-100) 70%,var(--peach-50))}
.cv-fn-row:nth-child(3) .cv-fn-bar{background:var(--peach-100)}
.cv-fn-row:nth-child(4) .cv-fn-bar{background:color-mix(in srgb,var(--peach-200) 75%,var(--peach-100))}
.cv-fn-row:nth-child(5) .cv-fn-bar{background:var(--peach-200)}
.cv-fn-row:first-child .cv-fn-bar{border-radius:8px 8px 0 0}
.cv-fn-leak{display:none;align-items:center;flex:none;height:18px;margin-left:2px;padding:0 7px;border-radius:99px;background:var(--paper);color:var(--danger);font-size:10px;font-weight:600}
.cv-fn-m{position:absolute;right:0;top:0;bottom:0;margin-block:auto;gap:4px;box-shadow:0 0 0 2px var(--paper),var(--sh-1)}
.cv-fn-m .ic,.cv-fn-sw .ic{flex:none;width:11px;height:11px;stroke-width:2.2}
.cv-fn-m .ic{display:none}
.cv-fn-sw{justify-content:center;width:18px;height:16px;padding:0;border-radius:5px}
.cv-fn-sw.cv-m-sola{box-shadow:inset 0 0 0 1.5px var(--peach-300)}
.cv-fn-sw.cv-m-apr{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--warn) 55%,transparent)}
.cv-fn-m.cv-m-sola{box-shadow:inset 0 0 0 1.5px var(--peach-300),0 0 0 2px var(--paper),var(--sh-1)}
.cv-fn-m.cv-m-apr{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--warn) 55%,transparent),0 0 0 2px var(--paper),var(--sh-1)}
.cv-fn-key{margin-top:auto}
.cv-fn-key-leak .ic{width:12px;height:12px;color:var(--danger);stroke-width:2.2}
/* la lista y el cuarto pedido se esconden debajo de la ventana (no con display ni visibility): así su entrada no se
   reinicia ni queda sin pintar cuando el navegador vuelve a medir el contenedor al terminar la entrada de la tarjeta */
.cv-funnel .cv-plan{position:absolute;top:100%;left:0;right:0}
.cv-funnel .cv-plan li > span:first-child{min-width:0}

/* Oficina de inversiones: plan del taller y política de uso de IA */
.cv-tr{position:relative;display:grid;gap:8px}
.cv-tr::before{content:"";position:absolute;left:14px;top:16px;bottom:16px;border-left:1.5px dashed var(--peach-200)}
.cv-tr li{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:10px}
.cv-tr-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--paper);border:1px solid var(--peach-100);color:var(--orange-ink);box-shadow:0 0 0 3px var(--paper)}
.cv-tr li:first-child .cv-tr-ic{background:var(--grad-cta);border-color:transparent;color:var(--paper)}
.cv-tr-ic .ic{width:15px;height:15px}
.cv-tr-tx{display:grid;min-width:0;line-height:1.3}
.cv-tr-tx b{font-size:12.5px;color:var(--ink)}
.cv-tr-tx span{font-size:11px;color:var(--ink-3)}
.cv-tr-n{position:absolute;right:0;top:1px;font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.cv-tr li:has(.cv-tr-n) .cv-tr-tx b{padding-right:62px}
.cv-pol{align-self:flex-end;width:min(100%,280px);padding:9px 12px 10px;border-radius:12px;background:var(--bg);border:1px solid var(--peach-100);box-shadow:var(--sh-2);transform:rotate(-1.4deg);transform-origin:right top}
.cv-pol-h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink)}
.cv-pol-h .ic{width:14px;height:14px;color:var(--orange)}
.cv-pol ul{display:grid;gap:3px;margin-top:6px}
.cv-pol li{display:grid;grid-template-columns:13px minmax(0,1fr);gap:6px;font-size:11px;color:var(--ink-2)}
.cv-pol li .ic{width:13px;height:13px;margin-top:1px;color:var(--orange)}

/* Marca con tienda en línea en dos países: mapa de procesos por área */
.cv-mp{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cv-mp > span{display:flex;align-items:center;gap:6px;min-width:0;min-height:31px;padding:4px 8px;border-top:1px solid var(--line)}
.cv-mp > :nth-child(-n+3){min-height:0;padding-block:5px;border-top:0;background:var(--bg-2)}
.cv-mp-hd{font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.cv-mp-hd .ic{width:12px;height:12px;color:var(--orange)}
.cv-mp-c,.cv-mp-cell{border-left:1px solid var(--line)}
.cv-mp-area{font-size:11.5px;font-weight:600;color:var(--ink);line-height:1.2}
.cv-mp-area .ic{width:14px;height:14px;color:var(--orange-ink)}
.cv-mp-cell{flex-direction:column;align-items:flex-start!important;justify-content:center;gap:3px!important;font-size:10.5px;color:var(--ink-2)}
.cv-mp-l1{background:var(--peach-50)}
.cv-mp-meter{display:inline-flex;gap:2px}
.cv-mp-meter i{width:9px;height:6px;border-radius:2px;background:var(--line-2)}
.cv-mp-meter i.on{background:var(--orange)}
.cv-mp-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;font-size:11px;font-weight:600;color:var(--ink)}
.cv-mp-foot > span:first-child{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:99px;background:var(--peach-50);color:var(--orange-ink)}
.cv-mp-foot .ic{width:13px;height:13px}
.cv-mp-key{font-size:10px;font-weight:500;color:var(--ink-3)}

/* Otra agencia de seguros: proceso por carriles */
.cv-ln{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cv-ln-row{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:stretch}
.cv-ln-row + .cv-ln-row{border-top:1px solid var(--line)}
.cv-ln-lb{display:flex;align-items:center;padding:0 8px;background:var(--bg-2);border-right:1px solid var(--line);font-size:10.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.cv-ln-row > ol{position:relative;display:flex;gap:10px;padding:3px 7px}
.cv-ln-row > ol::before{content:"";position:absolute;left:14px;right:14px;top:50%;border-top:1.5px dashed var(--line-3)}
.cv-ln-st{position:relative;flex:1 1 0;min-width:0;display:grid;place-items:center;height:22px;padding:0 3px;border-radius:7px;background:var(--paper);border:1px solid var(--line-2);font-size:10.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.cv-ln-st.cv-m-sola{background:var(--peach-50);border-color:var(--peach-200);color:var(--orange-ink)}
.cv-ln-st.cv-m-apr{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 30%,transparent);color:var(--warn)}
.cv-ln-st.cv-m-per{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* Seguridad web: controles, puntaje ilustrativo y plan por prioridad */
.cv-sc-top{display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;gap:12px}
.cv-sc-ring{display:grid;place-items:center;align-content:center;width:78px;height:78px;border-radius:50%;background:radial-gradient(closest-side,var(--paper) 76%,transparent 78%),conic-gradient(var(--yellow),var(--orange) calc(var(--p) * .55%),var(--magenta) calc(var(--p) * 1%),var(--line) 0);line-height:1}
.cv-sc-ring span{font-size:10px;font-weight:600;color:var(--ink-3)}
.cv-sc-ring b{font-size:21px;color:var(--ink);font-variant-numeric:tabular-nums}
.cv-sc-ring small{margin-top:3px;font-size:8.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.cv-sc-ctl{display:grid;gap:5px}
.cv-sc-ctl li{display:grid;grid-template-columns:17px minmax(0,1fr);align-items:center;gap:7px;font-size:11.5px;color:var(--ink);line-height:1.25}
.cv-sc-ctl .ic{width:17px;height:17px;padding:3px;border-radius:50%;stroke-width:2.4}
.cv-sc-ok .ic{background:var(--ok-bg);color:var(--ok)}
.cv-sc-warn .ic{background:var(--warn-bg);color:var(--warn)}
.cv-sc-bad .ic{background:var(--danger-bg);color:var(--danger)}
.cv-sc-plan li{justify-content:flex-start}
.cv-sc-p{flex:none;min-width:46px;height:19px;padding:0 7px;border-radius:99px;font-size:10px;font-weight:600;line-height:19px;text-align:center}
.cv-sc-p-hi{background:var(--danger-bg);color:var(--danger)}
.cv-sc-p-mid{background:var(--warn-bg);color:var(--warn)}
.cv-sc-p-lo{background:var(--bg-2);color:var(--ink-3)}

/* Más ancho: letra y aire un poco mayores */
@container (min-width:420px){
  .cv-body{gap:12px;padding:14px 16px}
  .cv-fn-bar,.cv-tr-tx b{font-size:13px}
  .cv-plan li,.cv-sc-ctl li,.cv-mp-area{font-size:12.5px}
  .cv-ln-row{grid-template-columns:100px minmax(0,1fr)}
  .cv-ln-lb,.cv-ln-st{font-size:11.5px}
  .cv-ln-st{height:24px}
  .cv-tk{font-size:11.5px}
  .cv-fn-bar{font-size:12px}
}
/* Embudo: con espacio, el modo lleva su ícono, y la píldora «Se pierden» sale junto al nombre sin tocar el modo
   (las consultas de contenedor miden el área de contenido de .cv: el ancho de la tarjeta menos 36 px) */
@container (min-width:340px){.cv-fn-m .ic{display:block}}
@container (min-width:400px){.cv-fn-leak{display:inline-flex}}
/* Más alto (tarjetas horizontales del inicio y casos de una sola tarjeta): todo el embudo, la propuesta y más pedidos */
@container (min-height:400px){
  .cv-body{gap:14px}
  .cv-fn{gap:7px}
  .cv-fn-bar{height:36px;font-size:13px}
  .cv-plan li{padding:8px 10px}
  .cv-kcols{gap:10px}
  .cv-kcol{gap:9px}
  .cv-tk{padding:9px 10px 10px}
  /* el embudo vuelve a ocupar todo el ancho, con «Se pierden» y la lista «Qué se propone» al pie; las barras crecen
     con el alto de la tarjeta para que la pantalla no quede vacía abajo */
  .cv-fn-row{--fn-pad:0px}
  .cv-fn-m,.cv-fn-key{display:none}
  .cv-fn-leak{display:inline-flex}
  .cv-fn{gap:clamp(7px,1.8cqh,11px)}
  .cv-fn-bar{height:clamp(36px,10cqh,54px);font-size:clamp(13px,2.7cqh,14.5px)}
  .cv-funnel .cv-plan{position:static;margin-top:auto}
  .cv-funnel .cv-plan li{padding-block:clamp(8px,1.6cqh,11px)}
}
/* Cocina en una tarjeta alta: un cuarto pedido por columna, para que la pantalla no quede vacía abajo */
@container (min-height:460px){.cv-kds .cv-tk:nth-child(n+5){position:static}}
/* Taller en un área baja: sin las descripciones, para que la política de uso entre completa */
@container (max-height:320px){
  .cv-training .cv-tr{gap:5px}
  .cv-training .cv-tr-tx span{display:none}
  .cv-training .cv-tr-ic{width:26px;height:26px}
  .cv-training .cv-tr li{grid-template-columns:26px minmax(0,1fr)}
  .cv-training .cv-tr::before{left:12px}
}
/* Taller en un área ancha y baja: los módulos a la izquierda y la política completa a la derecha */
@container (min-width:460px) and (max-height:340px){
  .cv-training .cv-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;align-content:start;column-gap:16px}
  .cv-training .cv-pol{align-self:start;width:auto}
  .cv-training .cv-tr{gap:9px}
  .cv-training .cv-tr-tx span{display:block}
}
/* Cocina angosta: menos aire para que los platos no se partan */
@container (max-width:380px){
  .cv-kds .cv-body{padding:10px 8px}
  .cv-kcols{gap:6px}
  .cv-kcol-h{gap:4px;font-size:10.5px}
  .cv-kcol-h .ic{display:none}
  .cv-kcol-h b{min-width:16px;height:16px;padding:0 4px;font-size:9.5px}
  .cv-tk{padding:6px 7px;font-size:10.5px}
  .cv-tk-h b{font-size:11px}
  .cv-tk-st{padding:0 6px;font-size:9.5px}
}
/* Angosto (celular): la ventana deja ver lo esencial */
@container (max-width:340px){
  .cv{padding:14px 14px 0}
  .cv-t .ic,.cv-mp-area .ic{display:none}
  .cv-ex{padding:2px 7px;font-size:9px;letter-spacing:.03em}
  /* carriles: nodos más bajos y angostos, para que el texto no toque el borde y la leyenda entre completa */
  .cv-ln-row{grid-template-columns:74px minmax(0,1fr)}
  .cv-ln-lb{padding:0 6px;font-size:9.5px}
  .cv-ln-row > ol{gap:4px;padding-inline:4px}
  .cv-ln-st{height:19px;padding:0 1px;font-size:9.5px}
  .cv-legend{gap:2px 8px;font-size:9.5px}
  /* mapa de procesos: filas más bajas, para que la píldora de formación entre completa */
  .cv-mp > span{min-height:26px;padding-block:3px}
  .cv-mp-area{font-size:11px}
  .cv-mp-key{display:none}
}
/* Muy angosto (celulares de 360 a 390 px): barra de título, mapa, carriles, taller y cocina un poco más compactos */
@container (max-width:270px){
  .cv-bar{gap:8px;padding:8px 10px}
  .cv-t{font-size:12px}
  .cv-ex{padding:2px 6px;font-size:8.5px;letter-spacing:.02em}
  .cv-mp{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr) minmax(0,1fr)}
  .cv-mp > span{padding-inline:6px}
  .cv-mp-hd .ic{display:none}
  .cv-mp-area{font-size:10.5px}
  .cv-ln-row{grid-template-columns:66px minmax(0,1fr)}
  .cv-ln-lb{padding:0 4px;font-size:9px}
  .cv-ln-row > ol{gap:3px;padding-inline:3px}
  .cv-tr-n{display:none}
  .cv-tr li:has(.cv-tr-n) .cv-tr-tx b{padding-right:0}
  .cv-pol{padding:8px 10px 9px}
  .cv-pol li{font-size:10.5px}
  .cv-kds .cv-body{padding:8px 6px}
  .cv-kcol-h b{display:none}
  .cv-tk{padding:6px 5px}
  .cv-tk-st{padding:0 5px;font-size:9px}
}
/* Taller angosto y bajo: módulos un poco más juntos */
@container (max-width:340px) and (max-height:240px){
  .cv-training .cv-tr{gap:4px}
  .cv-training .cv-tr-ic{width:24px;height:24px}
  .cv-training .cv-tr li{grid-template-columns:24px minmax(0,1fr);gap:8px}
  .cv-training .cv-tr::before{left:11px}
}
/* Embudo en un área angosta: menos inclinación, letra un poco menor y el modo solo con su ícono (lo explica la leyenda) */
@container (max-width:304px){
  .cv-fn{gap:5px}
  .cv-fn-row{--fn-pad:28px}
  .cv-fn-bar{width:calc(50% + var(--w) / 2);gap:5px;padding:0 10px;font-size:11.5px}
  .cv-fn-m{justify-content:center;width:20px;height:18px;padding:0;border-radius:6px}
  .cv-fn-m .ic{display:block}
  .cv-fn-m > span{display:none}
}
/* Embudo angosto y bajo (carriles de celular): barras más bajas para que la leyenda entre completa */
@container (max-width:304px) and (max-height:240px){
  .cv-fn{gap:3px}
  .cv-fn-bar{height:21px}
}

/* Entrada: las piezas aparecen cuando la tarjeta entra en pantalla (sin JS o con movimiento reducido, quietas) */
@keyframes cvRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cvGrow{from{opacity:0;transform:scaleX(.3)}to{opacity:1;transform:none}}
@keyframes cvPol{from{opacity:0;transform:translateY(18px) rotate(2deg)}to{opacity:1;transform:rotate(-1.4deg)}}
@keyframes cvPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
/* cada maqueta entra sola cuando se ve un tercio de ella (motion.js le pone .is-in), también al deslizar un carril;
   antes de eso sus piezas esperan ocultas para que no se vea un salto */
.js-motion .cv:not(.is-in) :is(.cv-fn-bar,.cv-fn-m,.cv-tk,.cv-tr li,.cv-ln-row,.cv-sc-ctl li,.cv-plan li,.cv-pol){opacity:0}
.js-motion .cv.is-in .cv-fn-bar{animation:cvGrow .7s var(--ease) both;animation-delay:calc(.15s + var(--i) * .09s)}
.js-motion .cv.is-in .cv-fn-m{animation:cvPop .45s var(--spring) both;animation-delay:calc(.55s + var(--i) * .09s)}
.js-motion .cv.is-in :is(.cv-tk,.cv-tr li,.cv-ln-row,.cv-sc-ctl li,.cv-plan li){animation:cvRise .55s var(--ease) both;animation-delay:calc(.2s + var(--i,0) * .08s)}
.js-motion .cv.is-in .cv-pol{animation:cvPol .8s var(--spring) both;animation-delay:.6s}

/* Inicio (#casos): seis tarjetas sin huecos, en dos listas (la fila de seguros y Salvedad, y las otras cuatro dentro de
   .cv-mosaic-rail). Dos columnas desde 760 px; desde 1080, tres columnas con la destacada de seguros y dos horizontales
   (restaurante y constructora) que alternan de lado. Mismo alto de visual en cada fila. En celular, las cuatro de la
   segunda lista pasan a un carril. */
.cv-mosaic-rail{margin-top:18px}   /* el mismo espacio que hay entre filas de la cuadrícula */
.cases.cv-mosaic .cc-vis img{object-position:top left}   /* el titular de la captura de Salvedad no se corta a la izquierda */
.cases.cv-mosaic > li:not(.feat) .cc-vis{height:260px}
@media (min-width:760px){.cases.cv-mosaic > li:not(.feat) .cc-vis{height:270px}}
/* La captura de Paintball se corta bajo su titular a cualquier ancho (alto proporcional al ancho de la tarjeta); en dos
   columnas comparte fila con el restaurante, que toma el mismo alto. Desde 1080 el restaurante va en horizontal. */
.cases.cv-mosaic > li.cv-short .cc-vis{height:auto;min-height:0;aspect-ratio:361/229}
@media (min-width:760px){.cases.cv-mosaic > li.feat .cc-vis{min-height:270px}}
@media (min-width:1080px){.cases.cv-mosaic > li.cv-wide.cv-short .cc-vis{min-height:250px;aspect-ratio:auto}}
@media (min-width:1080px){
  .cases.cv-mosaic > li.feat .cc-vis{min-height:270px}
  .cases.cv-mosaic > li.cv-wide{grid-column:span 2;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:none}
  .cases.cv-mosaic > li.cv-wide:not(.feat) .cc-vis{height:auto;border-bottom:0;border-right:1px solid var(--line)}
  .cases.cv-mosaic > li.cv-wide .cc-body{justify-content:center;padding:26px 28px}
  .cases.cv-mosaic > li.cv-wide .cc-go{margin-top:4px}
}

/* Casos (/proyectos/#otras): cinco consultorías en tarjetas. Celular: carril que se desliza (asoma la siguiente);
   tableta: la primera en horizontal y dos por fila; escritorio: tres arriba y dos abajo. */
.cv-cards{display:grid;gap:18px}
.cv-card{display:grid;grid-template-rows:auto 1fr;min-width:0;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-1);overflow:hidden}
.cv-card .cc-vis{height:260px}
.cv-card-b{display:grid;gap:8px;align-content:start;padding:18px 20px 22px}
.cv-card-b .chip{justify-self:start;height:24px;padding:0 10px;font-size:12px;font-weight:600}
.cv-card-b h3{font-size:1.14rem;line-height:1.25}
.cv-card-b p{font-size:15px;line-height:1.5}
.cv-swipe{display:none}
@media (min-width:760px) and (max-width:1079px){
  .cv-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cv-cards > li:first-child{grid-column:1/-1;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:none}
  .cv-cards > li:first-child .cc-vis{height:auto;min-height:290px;border-bottom:0;border-right:1px solid var(--line)}
  .cv-cards > li:first-child .cv-card-b{align-content:center;padding:26px 28px}
}
@media (min-width:1080px){
  .cv-cards{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cv-cards > li{grid-column:span 2}
  .cv-cards > li:nth-child(n+4){grid-column:span 3}
}
@media (max-width:759px){
  .cv-rail{margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) 12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .cv-rail::-webkit-scrollbar{display:none}
  .cv-rail:focus-visible{outline-offset:-3px}
  .cv-cards,.cv-rail > .cases{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(84%,330px);gap:12px}
  .cv-cards > li,.cv-rail > .cases > li{scroll-snap-align:start}
  .cv-rail > .cases > li .cc-vis{height:250px}
  .cv-rail > .cases > li:hover{transform:none}
  .cv-card .cc-vis{height:250px}
  .cv-card-b{padding:16px 18px 18px}
  .cv-card-b p{font-size:14.5px}
  .cv-swipe{display:flex;align-items:center;gap:8px;margin-top:2px;font-size:14px;color:var(--ink-3)}
  .cv-swipe .ic{width:17px;height:17px;color:var(--orange)}
}
/* Inicio en celular: seguros y Salvedad en columna; Paintball, restaurante, constructora e inversiones en un carril.
   El visual tiene alto proporcional al ancho (13:12): la captura de Paintball se corta siempre bajo su titular y las
   maquetas tienen el mismo alto. */
@media (max-width:759px){
  .cases.cv-mosaic + .cv-swipe{margin-top:22px}
  .cv-swipe + .cv-mosaic-rail{margin-top:6px}
  .cv-rail > .cases.cv-mosaic > li .cc-vis{height:auto;min-height:0;aspect-ratio:13/12}
}

/* Visuales de lo que ya construimos */
/* builtvis.py: las tarjetas de {{cases:...}} de seguros, Salvedad, Paintball y el restaurante comparten un marco
   (.cc-vis.bv-stage): mismo fondo de marca, el mismo alto por número de tarjetas (240 px en celular, 290 px desde 760 px,
   el alto del texto en la tarjeta horizontal) y un dispositivo que nace arriba y se corta en el borde inferior, sin espacio
   muerto. Las capas (.bv) llenan el panel y se ajustan con consultas de contenedor. */
.cases > li > .cc-vis.bv-stage{position:relative;display:block;height:240px;min-height:0;padding:0;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line);
  background:radial-gradient(70% 90% at 100% 0%,rgba(230,27,87,.09),transparent 60%),radial-gradient(80% 100% at 0% 100%,rgba(229,97,45,.13),transparent 62%),
    radial-gradient(circle at 1px 1px,rgba(179,61,24,.11) 1px,transparent 1.4px) 0 0/16px 16px,var(--peach-50)}
@media (min-width:760px){.cases > li > .cc-vis.bv-stage{height:290px}}
@media (min-width:900px){.cases-n1 > li > .cc-vis.bv-stage{height:auto;min-height:340px;border-bottom:0}}
@media (min-width:760px) and (max-width:1079px){.cases-n3 > li:nth-child(3) > .cc-vis.bv-stage{height:auto;min-height:300px;border-bottom:0}}
.bv{position:absolute;inset:0;container-type:size;font-size:12px;line-height:1.35;color:var(--ink-2);text-align:left}
.bv p{margin:0}
.bv .ic{flex:none}
.cc-vis.bv-stage .bv-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.bv-screen{position:relative;overflow:hidden;background:var(--bg-3)}
.bv-card{position:absolute;z-index:2;display:grid;gap:6px;padding:11px 12px;border-radius:14px;background:var(--paper);border:1px solid var(--line-2);box-shadow:var(--sh-3)}
/* «Ejemplo ilustrativo»: una sola píldora para todas las capas, en la esquina superior derecha de su ficha o barra */
.bv-ex{justify-self:end;display:inline-flex;align-items:center;flex:none;height:19px;padding:0 8px;border-radius:99px;background:var(--paper);border:1px solid var(--line-2);
  font-size:10.5px;font-weight:700;line-height:1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--ink-3)}

/* Paintball: captura móvil en un celular que asoma, con la ficha del agente de WhatsApp encima */
/* la ficha solo toca el marco del celular (4 px): el titular de la captura queda entero */
.bv-pb{--pw:clamp(128px,40cqw,190px);--cw:clamp(176px,50cqw,246px);--x:max(14px,calc((100cqw - var(--pw) - var(--cw) + 4px) / 2))}
.bv-phone{position:absolute;left:var(--x);top:20px;bottom:-30px;width:var(--pw);padding:6px;border-radius:30px;background:var(--night);box-shadow:var(--sh-3),inset 0 0 0 1.5px rgba(255,255,255,.1)}
.bv-notch{position:absolute;z-index:1;top:13px;left:50%;width:30%;height:13px;border-radius:99px;background:var(--night);transform:translateX(-50%)}
.bv-phone .bv-screen{height:100%;border-radius:24px;background:var(--night)}
/* barra de estado propia bajo la muesca: la placa del logo de la captura no queda mordida */
.cc-vis.bv-stage .bv-pb .bv-shot{top:22px;height:calc(100% - 22px)}
.bv-wa{left:calc(var(--x) + var(--pw) - 4px);top:50%;width:var(--cw);transform:translateY(-44%)}
.bv-wa-h{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink)}
.bv-wa-ic{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--wa);color:#fff;flex:none}
.bv-wa-ic .ic{width:13px;height:13px}
.bv-wa-msg{display:flex;align-items:center;gap:6px;justify-self:start;padding:5px 9px;border-radius:4px 12px 12px 12px;background:var(--wa-chat);font-size:11px;color:var(--ink-2)}
.bv-wa-msg .ic{width:13px;height:13px;color:var(--ink-3)}
.bv-wa-row{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink)}
.bv-wa-row .ic{width:14px;height:14px}
.bv-ok .ic{color:var(--ok)}
.bv-dot{width:8px;height:8px;margin:0 3px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgba(229,97,45,.18);flex:none}
.bv-wait{color:var(--orange-ink)}
/* panel ancho (dos tarjetas desde 1080 px): celular y ficha más grandes, ficha un poco más abajo. Las variables se
   redeclaran en los hijos porque .bv-pb es el propio contenedor de la consulta */
@container (min-width:480px){
  .bv-pb > *{--pw:200px;--cw:min(272px,calc(100cqw - 224px));--x:max(14px,calc((100cqw - var(--pw) - var(--cw) + 4px) / 2))}
  .bv-wa{top:56%}
}

/* Salvedad: su pantalla en un navegador que asoma, con la ficha de aprobación encima */
/* el navegador deja el mismo margen a los lados (como la ventana de seguros) y se limita a 470 px, para que la captura
   no crezca y su titular quede entero arriba de la ficha; en los anchos se centra y la ficha sale de su borde derecho */
.bv-sv{--l:max(18px,6cqw,calc((100cqw - 520px) / 2))}
.bv-browser{position:absolute;left:var(--l);top:max(16px,7cqh);width:min(calc(100cqw - 2 * var(--l)),470px);bottom:-24px;display:flex;flex-direction:column;border-radius:12px;background:var(--paper);border:1px solid var(--line-2);box-shadow:var(--sh-3);overflow:hidden}
.bv-bar{display:flex;align-items:center;gap:10px;flex:none;height:26px;padding:0 10px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.bv-dots{display:flex;gap:5px}
.bv-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-3)}
.bv-url{display:inline-flex;align-items:center;gap:4px;height:17px;padding:0 9px;border-radius:99px;background:var(--paper);font-size:10px;color:var(--ink-3)}
.bv-url .ic{width:10px;height:10px}
.bv-browser .bv-screen{flex:1;min-height:0}
.cc-vis.bv-stage .bv-sv .bv-shot{object-position:top left}
/* la base de la captura se funde con el negro de Salvedad: la ficha queda sobre una zona tranquila y el titular arriba */
/* rampa corta: el titular termina entre el 44 % y el 49 % de la pantalla (medido desde abajo) en todos los paneles y el
   párrafo empieza 6 puntos más abajo; así el titular queda nítido y el párrafo se apaga antes de pasar bajo la ficha */
.bv-sv .bv-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,10,14,.95),rgba(9,10,14,.94) 35%,rgba(9,10,14,0) 44%);pointer-events:none}
/* ficha al pie (no tapa el titular de la captura), con la píldora «Ejemplo ilustrativo» dentro, arriba a la derecha */
/* el ícono ocupa las dos filas: arriba a la derecha la píldora, abajo el texto (y «Aprobar» si hay espacio) */
.bv-note{right:max(12px,4cqw);bottom:max(12px,5cqh);max-width:calc(100% - 24px);grid-template-columns:auto 1fr;align-items:center;gap:4px 10px;padding:9px 12px 10px}
.bv-note .bv-ex{grid-column:2/-1;grid-row:1}
.bv-note-ic{grid-row:1/3}
.bv-note-t{grid-row:2}
.bv-approve{grid-row:2}
.bv-approve{display:none}
@container (min-width:420px){.bv-note{grid-template-columns:auto 1fr auto;column-gap:14px}.bv-approve{display:inline-flex}}
.bv-note-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--grad-soft);color:var(--orange-ink)}
.bv-note-ic .ic{width:17px;height:17px}
.bv-note-t{display:grid;line-height:1.25}
.bv-note-t b{font-size:12px;color:var(--ink)}
.bv-note-t span{font-size:11px;color:var(--ink-3)}
.bv-approve{align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:99px;background:var(--grad-cta);color:#fff;font-size:11px;font-weight:600}
.bv-approve .ic{width:12px;height:12px}
.bv-sv .bv-note{bottom:max(12px,4cqh)}

/* Restaurante: pantalla de cocina que llena el panel */
.bv-kds{padding:18px 18px 0}
.bv-kwin{display:flex;flex-direction:column;height:calc(100% + 1px);border-radius:16px 16px 0 0;background:var(--night);box-shadow:var(--sh-3);overflow:hidden;color:#c9cde6}
.bv-kbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.09)}
.bv-kt{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap}
.bv-kt .ic{width:15px;height:15px;color:var(--peach-300)}
.bv-kt-s{display:none}
@container (max-width:380px){.bv-kt-l{display:none}.bv-kt-s{display:inline}}
.bv-kds .bv-ex{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#c9cde6}
.bv-kcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:1;min-height:0;padding:10px}
.bv-kcol{display:flex;flex-direction:column;gap:7px;min-width:0}
.bv-kcol-h{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#fff}
.bv-kcol-h .ic{width:13px;height:13px;color:var(--peach-300)}
/* una sola pista que no pasa del ancho de la columna (sin ella, el texto sin cortes empujaba las comandas fuera) */
.bv-kcol ul{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:7px;margin:0;padding:0;list-style:none}
.bv-tk{min-width:0;display:grid;gap:3px;padding:7px 8px;border-radius:9px;background:var(--paper);color:var(--ink-2);border-top:3px solid var(--peach-300)}
.bv-tk-h{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:11px;white-space:nowrap}
.bv-tk-h b{color:var(--ink)}
.bv-tk-h span{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;color:var(--ink-3)}
.bv-tk-h .ic{width:10px;height:10px}
.bv-tk-i{overflow:hidden;font-size:10.5px;white-space:nowrap;text-overflow:ellipsis}
.bv-tk-st{justify-self:start;max-width:100%;overflow:hidden;padding:1px 7px;border-radius:99px;font-size:10px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.bv-tk-new{border-top-color:var(--magenta)}
.bv-tk-new .bv-tk-st{background:var(--peach-50);color:var(--orange-ink)}
.bv-tk-prep{border-top-color:var(--orange)}
.bv-tk-prep .bv-tk-st{background:var(--warn-bg);color:var(--warn)}
.bv-tk-ready{border-top-color:var(--ok)}
.bv-tk-ready .bv-tk-st{background:var(--ok-bg);color:var(--ok)}
/* panel de 290 px o menos (dos o tres tarjetas): más compacta, para que la tercera comanda quepa entera; en el de 240 px
   (celular) la tercera asoma cortada por el borde, como el celular y el navegador */
@container (max-height:290px){.bv-kbar{padding:7px 11px}.bv-kcols{gap:6px;padding:8px}.bv-kcol,.bv-kcol ul{gap:5px}.bv-tk{gap:2px;padding:6px 7px}}
/* panel angosto (tres tarjetas a 1080, dos a 760): columnas de unos 86 px, la comanda no pasa de su columna */
@container (max-width:340px){.bv-kcols{gap:5px;padding:7px}.bv-tk{padding:6px}.bv-tk-h .ic{display:none}.bv-tk-h span{font-size:10px}.bv-tk-st{padding:1px 5px}}
@container (min-width:440px) and (min-height:300px){.bv-kcols{gap:10px;padding:12px}.bv-tk{padding:8px 10px}.bv-tk-h{font-size:12px}.bv-tk-i{font-size:11.5px}}

/* Seguros: la maqueta de formalización, grande, en una ventana clara con barra que nace arriba y se corta en el borde
   inferior (como la cocina); el rótulo propio de la maqueta, al pie, se oculta: la barra lleva la píldora común */
.bv-sg{padding:20px 20px 0}
.bv-sgwin{display:flex;flex-direction:column;width:min(100%,468px);height:calc(100% + 1px);margin:0 auto;border-radius:16px 16px 0 0;background:var(--paper);border:1px solid var(--line-2);border-bottom:0;box-shadow:var(--sh-3);overflow:hidden}
.bv-sgbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;padding:8px 12px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.bv-sgbar .bv-kt{color:var(--ink)}
.bv-sgbar .bv-kt .ic{color:var(--orange)}
.cc-vis.bv-stage .bv-sg .mx{flex:1;align-content:start;max-width:none;width:100%;transform:none;border:0;border-radius:0;background:transparent;box-shadow:none}
.bv-sg .mx-ex{display:none}
/* las consultas de .bv-sg miden su caja de contenido (panel menos 20 px de relleno arriba y 40 px a los lados) */
/* panel de 290 px y angosto (tres tarjetas): sin pie; la maqueta respira para llenar la ventana */
@container (max-width:399px) and (min-height:260px){.cc-vis.bv-stage .bv-sg .mx{gap:13px;padding:16px}.bv-sg .mx-steps{gap:10px}}
/* pie: «Espera la revisión del asesor» y el botón de envío apagado; solo donde cabe entero (paneles de 290 px o más y
   anchos: una o dos tarjetas), no en el de 240 px ni en el de tres tarjetas */
.bv-sgfoot{display:none;align-items:center;justify-content:space-between;gap:8px;flex:none;padding:8px 14px;border-top:1px solid var(--line);background:var(--bg-2);font-size:11.5px;color:var(--ink-3)}
.bv-sgfoot > span:first-child{display:inline-flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.bv-sgfoot .ic{width:13px;height:13px}
.bv-sgbtn{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 11px;border-radius:99px;background:var(--paper);border:1px solid var(--line-2);font-weight:600;white-space:nowrap}
@container (min-width:400px) and (min-height:260px){.bv-sgfoot{display:flex}}
/* tarjeta horizontal (panel alto y ancho): la maqueta crece y llena el panel */
@container (min-width:460px) and (min-height:290px){
  .cc-vis.bv-stage .bv-sg .mx{gap:13px;padding:18px 20px;font-size:14px}
  .bv-sg .mx-av{width:42px;height:42px;font-size:14px}
  .bv-sg .mx-who b{font-size:16px}
  .bv-sg .mx-who span{font-size:13px}
  .bv-sg .m-tag{height:26px;padding:0 10px;font-size:12.5px}
  .bv-sg .mx-steps{gap:10px}
  .bv-sg .mx-formal .mx-steps li{gap:10px;font-size:14.5px}
  .bv-sg .mx-steps li::before{width:16px;height:16px}
}

@media (prefers-reduced-motion:no-preference){
  .bv-dot{animation:bv-pulse 2.4s var(--ease-io) infinite}
  @keyframes bv-pulse{50%{box-shadow:0 0 0 6px rgba(229,97,45,0)}}
}