/* ============================================================
   Kelp · Seguridad. Solo lo propio de esta página; nav, marco,
   hero, cierre y FAQ son del sistema (kelp.css).
   ============================================================ */

/* El H1 lleva dos frases largas: se contiene para que cada una quepa en su línea */
.sg-h1 { font-size: clamp(40px, 4.9vw, 64px); }

/* ---- Hero: cuatro puertas (IT, Seguridad, Compliance, Legal). Kelp avanza por el suelo
   y en cada puerta aparece la prueba que la abre ---- */
#puertas { height: 600px; }
.pd-cv { --cw: 1000px; --ch: 400px; --dw: 176px; --dh: 250px; --gap: 64px; --pw: 152px; }
.pd-dyn { position: absolute; inset: 0; }
.pd-row { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; gap: var(--gap); }
.pd { width: var(--dw); display: grid; justify-items: center; gap: 14px; transition: opacity .5s; }
.pd.past { opacity: .5; }
.pd-sg { display: flex; align-items: center; gap: 9px; height: 34px; color: #F2FBF8; font-size: 16px; }
.pd-sg b { font-weight: 600; letter-spacing: -0.01em; }
.pd-sg .ic { width: 19px; height: 19px; color: var(--foam); }
.pd-fr { position: relative; width: var(--dw); height: var(--dh); border-radius: 12px 12px 3px 3px; background: rgb(0 0 0 / .28); box-shadow: 0 0 0 2px rgb(198 238 227 / .3), inset 0 10px 24px rgb(0 0 0 / .35); }
.pd-lt { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 90% at 50% 100%, rgb(198 238 227 / .5), rgb(198 238 227 / .12) 60%, transparent); opacity: 0; transition: opacity .7s; }
.pd.open .pd-lt { opacity: 1; }
.pd.open .pd-fr { box-shadow: 0 0 0 2px var(--foam), 0 0 40px -6px rgb(198 238 227 / .45); }
.pd-lf { position: absolute; inset: 5px; z-index: 2; border-radius: 9px 9px 2px 2px; background: linear-gradient(180deg, #F2FBF8, #DCEFE8); box-shadow: inset 0 0 0 1px rgb(1 33 32 / .08), 0 16px 30px -18px rgb(0 0 0 / .7); }
.pd-lf::before, .pd-lf::after { content: ""; position: absolute; left: 16px; right: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px rgb(1 33 32 / .09); }
.pd-lf::before { top: 16px; height: 42%; }
.pd-lf::after { bottom: 16px; height: 34%; }
.pd-lk { position: absolute; right: 12px; top: 50%; z-index: 1; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--deep); color: transparent; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff; transition: background-color .3s, color .3s; }
.pd-lk::before { content: ""; position: absolute; width: 6px; height: 9px; border-radius: 3px 3px 1px 1px; background: var(--foam); transition: opacity .2s; }
.pd-lk .ic { width: 14px; height: 14px; stroke-width: 3; }
.pd.ok .pd-lk { background: var(--foam); color: var(--deep); }
.pd.ok .pd-lk::before { opacity: 0; }
.pd-pf { position: absolute; left: 50%; top: 50%; z-index: 3; width: var(--pw); margin: -48px 0 0 calc(var(--pw) / -2); height: 96px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 18px 34px -14px rgb(0 0 0 / .6); opacity: 0; }
.pd-pf > svg { width: 72px; height: 59px; color: var(--deep); }
.pd-pf > b { font-size: 15px; font-weight: 700; color: var(--deep); margin-left: 6px; }
.pd-lg { display: flex; gap: 6px; }
.pd-lg img { width: 24px; height: 24px; }
.pd-fl { position: absolute; left: 40px; right: 40px; top: 368px; height: 2px; border-radius: 1px; background: rgb(198 238 227 / .16); }
.pd-fl i { position: absolute; inset: 0; background: var(--foam); border-radius: inherit; transform-origin: left; transform: scaleX(0); }
.pd-fl2 { display: none; }   /* el segundo suelo solo existe en el móvil (puertas en dos filas) */
.pd-k { position: absolute; left: 0; top: 341px; width: 56px; height: 56px; border-radius: 16px; background: var(--foam); box-shadow: 0 0 0 7px rgb(198 238 227 / .12), 0 16px 30px -10px rgb(0 0 0 / .6); }
.pd-k svg { width: 34px; height: 34px; fill: var(--deep); }
.pd-k .rp { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 20px; box-shadow: 0 0 0 2px var(--foam); }

/* ---- Certificaciones: los sellos de la home y lo que cubre cada uno (al pasar el ratón o, en
   táctil, al tocar la celda: .act). El estado está en el
   dibujo: SOC 2, aún en curso, va en trazo discontinuo y sin relleno ---- */
.sg { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
.sg-c { position: relative; overflow: hidden; padding: 26px 24px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); outline: none; transition: background-color .25s; }
.sg-c:nth-child(5n) { border-right: 0; }
.sg-c:nth-last-child(-n+5) { border-bottom: 0; }
.sg-c:hover, .sg-c:focus-visible, .sg-c.act { background: #fff; }
.sg-c > p { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.sg-soon .ct-svg { color: var(--ink-2); }
.sg-pr { position: absolute; top: 16px; right: 16px; }
.sg-soon .ct-svg .cl { stroke-width: 2.6; stroke-dasharray: 6 5; }
.sg-soon .ct-svg .ct-t { fill: none; stroke: currentColor; stroke-width: 1; }
.ct-svg { width: 88px; height: auto; aspect-ratio: 220 / 180; margin-left: -20px; color: var(--deep); overflow: visible; transition: transform .35s var(--ease-out); }
.sg-c:hover .ct-svg, .sg-c:focus-visible .ct-svg, .sg-c.act .ct-svg { transform: translateY(-4px); }
.ct-svg .cl { fill: none; stroke: currentColor; stroke-width: 2.9; stroke-linecap: round; stroke-linejoin: round; }
.ct-svg .ct-t { font-family: var(--font); font-weight: 600; }
.cert-ring, .lbeam, .soc-ring { transform-box: view-box; }
.cert-ring { transform-origin: 110px 88px; }
.soc-ring { transform-origin: 110px 78px; }
.ct-svg .lbeam { transform-origin: 110px 60px; }
.ct-svg .chk path, .ct-svg .sig path { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.glint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgb(198 238 227 / .55) 50%, transparent 65%); translate: -120% 0; }
@media (prefers-reduced-motion: no-preference) {
  .sg-c:hover .cert-ring, .sg-c:hover .soc-ring, .sg-c.act .cert-ring, .sg-c.act .soc-ring { animation: cert-spin 14s linear infinite; }
  @keyframes cert-spin { to { transform: rotate(360deg); } }
  .sg-c:hover .iso-globo path:nth-of-type(n+3):nth-of-type(-n+8), .sg-c:hover .iso-globo path:nth-of-type(n+10):nth-of-type(-n+15),
  .sg-c.act .iso-globo path:nth-of-type(n+3):nth-of-type(-n+8), .sg-c.act .iso-globo path:nth-of-type(n+10):nth-of-type(-n+15) { animation: cert-glint 3.4s ease-in-out var(--gw, 0s) infinite; }
  .iso-globo path:nth-of-type(8), .iso-globo path:nth-of-type(15) { --gw: 0s; }
  .iso-globo path:nth-of-type(7), .iso-globo path:nth-of-type(14) { --gw: .3s; }
  .iso-globo path:nth-of-type(6), .iso-globo path:nth-of-type(13) { --gw: .6s; }
  .iso-globo path:nth-of-type(3), .iso-globo path:nth-of-type(10) { --gw: .9s; }
  .iso-globo path:nth-of-type(4), .iso-globo path:nth-of-type(11) { --gw: 1.2s; }
  .iso-globo path:nth-of-type(5), .iso-globo path:nth-of-type(12) { --gw: 1.5s; }
  @keyframes cert-glint { 0%, 100% { opacity: .3; stroke-width: 2.2; } 45% { opacity: 1; stroke-width: 4.2; } }
  .sg-c:hover .ens-cursor, .sg-c.act .ens-cursor { animation: ens-blink 1.15s steps(1) infinite; }
  @keyframes ens-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
  .sg-c:hover .lbeam, .sg-c.act .lbeam { animation: beam-rock 2.6s ease-in-out infinite; }
  @keyframes beam-rock { 0%, 100% { rotate: 0deg; } 30% { rotate: -6deg; } 70% { rotate: 5deg; } }
  .sg-c:hover .chk path, .sg-c:hover .sig path, .sg-c.act .chk path, .sg-c.act .sig path { animation: redraw 1.8s var(--ease) infinite; }
  @keyframes redraw { 0% { stroke-dashoffset: 1; } 55%, 100% { stroke-dashoffset: 0; } }
}
.sg-a { color: var(--teal); font-weight: 600; text-decoration: underline; text-decoration-color: rgb(0 74 72 / .3); text-underline-offset: 3px; }
.sg-a:hover { text-decoration-color: currentColor; }
.sg-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 22px clamp(24px, 4.5vw, 56px); border-top: 1px solid var(--line); }
.sg-docs a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 9px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; font-weight: 600; transition: box-shadow .2s, color .2s; }
.sg-docs a:hover { color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.sg-docs .ic { width: 15px; height: 15px; color: var(--teal); margin-left: 3px; }
.sg-pdf { display: inline-grid; place-items: center; height: 20px; padding: 0 5px; border-radius: 4px; background: #C8453B; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .03em; }
.sg-upd { margin-left: auto; font-size: 13px; color: var(--ink-3); }

/* ---- Enterprise Ready: cuatro piezas, una cada vez, con su escena ---- */
.er { display: grid; grid-template-columns: 5fr 7fr; border-top: 1px solid var(--line); }
.er-l { padding: 16px clamp(24px, 4.5vw, 56px) 24px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.er-i { position: relative; display: grid; grid-template-rows: auto 0fr; border-bottom: 1px solid var(--line); transition: grid-template-rows .5s var(--ease); }
.er-i.on { grid-template-rows: auto 1fr; }
.er-i:last-child { border-bottom: 0; }
.er-h { width: 100%; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: center; padding: 18px 0; text-align: left; }
.er-h b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: var(--ink-3); transition: color .3s; }
.er-i.on .er-h b, .er-h:hover b { color: var(--ink); }
.er-n { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); transition: background-color .3s, color .3s; }
.er-i.on .er-n { background: var(--deep); color: var(--foam); box-shadow: none; }
.er-n .ic { width: 17px; height: 17px; }
.er-i > p { min-height: 0; overflow: hidden; padding-left: 48px; font-size: 15px; line-height: 1.6; color: var(--ink-2); opacity: 0; transition: opacity .4s; }
.er-i > p::after { content: ""; display: block; height: 20px; }
.er-i.on > p { opacity: 1; }
.er-pr { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--deep); transform-origin: left; transform: scaleX(0); }
.er-s { position: relative; height: 540px; margin: 24px; border-radius: 18px; --cw: 600px; --ch: 440px; }
.er-sc { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
/* 01 · Por fases: el plano de la organización. Cada área es un bloque con sus puestos (los puntos);
   la mancha entra en cada bloque desde el lado que toca lo ya cubierto (clip-path desde el JS) */
.fz-plan { position: absolute; left: 30px; top: 54px; width: 540px; height: 316px; }
.fz-b { position: absolute; overflow: hidden; border-radius: 10px; background: radial-gradient(circle, rgb(1 33 32 / .14) 1.6px, transparent 2.2px) 9px 9px / 18px 18px, rgb(255 255 255 / .66); box-shadow: inset 0 0 0 1.5px rgb(1 33 32 / .1); }
.fz-p1 { --fc: var(--deep); }
.fz-p2 { --fc: var(--teal); }
.fz-p3 { --fc: #2F726A; }
.fz-f { position: absolute; inset: 0; background: radial-gradient(circle, rgb(198 238 227 / .6) 1.6px, transparent 2.2px) 9px 9px / 18px 18px, var(--fc); clip-path: circle(0 at 0 0); }
.fz-b b { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 3px 8px; border-radius: 6px; background: #fff; font-size: 13px; font-weight: 600; color: var(--ink); transition: background-color .5s, color .5s; }
.fz-b.on b { background: var(--fc); color: #fff; }
.fz-k { position: absolute; left: 180px; top: 62px; z-index: 2; width: 38px; height: 38px; border-radius: 11px; translate: -50% -50%; box-shadow: 0 0 0 4px rgb(255 255 255 / .9), 0 12px 24px -10px rgb(1 33 32 / .6); }
.fz-ph { position: absolute; left: 0; right: 0; top: 396px; display: flex; justify-content: center; gap: 28px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.fz-ph span { display: inline-flex; align-items: center; gap: 8px; transition: color .4s; }
.fz-ph i { width: 12px; height: 12px; border-radius: 4px; background: var(--fc); opacity: .25; transition: opacity .4s; }
.fz-ph span:nth-child(1) { --fc: var(--deep); }
.fz-ph span:nth-child(2) { --fc: var(--teal); }
.fz-ph span:nth-child(3) { --fc: #2F726A; }
.fz-ph span.on { color: var(--ink); }
.fz-ph span.on i { opacity: 1; }
/* 02 · Tu nube: el perímetro se dibuja, tu clave lo cierra y los datos rebotan dentro */
.nb-per { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nb-per path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.nb-wall { stroke: rgb(0 74 72 / .45); transition: stroke .5s; }
.nb-shut { stroke: var(--teal); }
#er-1.shut .nb-wall { stroke: var(--teal); }
.nb-dots { position: absolute; inset: 0; pointer-events: none; }
.nb-dt { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgb(0 74 72 / .14); opacity: 0; }
.nb-rg { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; box-shadow: 0 0 0 2px var(--teal); opacity: 0; }
.nb-h { position: absolute; left: 66px; top: 48px; translate: 0 -50%; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 12px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-card); font-size: 15px; }
.nb-h b { font-weight: 600; }
.nb-lg img { width: 24px; height: 24px; object-fit: contain; }
.nb-pv { justify-items: start; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 3px 9px; border-radius: 6px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.nb-k { position: absolute; left: 118px; top: 176px; z-index: 1; display: grid; justify-items: center; gap: 8px; }
.nb-k b { font-size: 13px; font-weight: 600; }
.nb-m { position: absolute; left: 352px; top: 168px; z-index: 1; width: 170px; padding: 16px; display: grid; justify-items: start; gap: 4px; }
.nb-ml img { width: 28px; height: 28px; object-fit: contain; }
.nb-mn { justify-items: start; margin-top: 6px; }
.nb-mn b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.nb-m small { font-size: 12px; color: var(--ink-3); }
.nb-key { position: absolute; left: 300px; top: 392px; z-index: 2; translate: -50% -50%; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px 0 12px; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1.5px var(--teal), 0 12px 24px -14px rgb(1 33 32 / .5); }
.nb-key .ic { width: 17px; height: 17px; color: var(--ember-ink); transition: rotate .35s var(--ease); }
.nb-key.turn .ic { rotate: -90deg; }
/* 03 · Homologación: el cuestionario de proveedores, en pequeño */
.hq-sheet { position: absolute; left: 12px; right: 12px; top: 22px; overflow: hidden; display: flex; flex-direction: column; font-size: 13px; transition: box-shadow .5s; }
.hq-bar { display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.hq-bar img { width: 17px; height: 17px; }
.hq-bar > b { font-size: 12.5px; font-weight: 600; }
.hq-prov { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); }
.hq-prov b { color: var(--ink); font-weight: 600; font-size: 12.5px; }
.hq-k { position: relative; width: 24px; height: 24px; border-radius: 7px; }
.hq-th, .hq-r { display: grid; grid-template-columns: 40px 208px 1fr; align-items: center; }
.hq-th { height: 30px; background: #F7F8F6; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--ink-3); }
.hq-th > span, .hq-r > span { padding: 0 12px; height: 100%; display: flex; align-items: center; border-left: 1px solid var(--line); }
.hq-th > span:first-child { border-left: 0; }
.hq-r { height: 44px; border-bottom: 1px solid var(--line); transition: background-color .35s; }
.hq-r.on { background: var(--foam-2); }
.hq-st { justify-self: center; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); display: grid; place-items: center; color: transparent; transition: background-color .3s, color .3s, box-shadow .3s; }
.hq-st .ic { width: 11px; height: 11px; stroke-width: 3; }
.hq-r.done .hq-st { background: var(--deep); color: var(--foam); box-shadow: none; }
.hq-q { color: var(--ink-2); font-weight: 500; }
.hq-a { font-weight: 600; color: var(--ink); white-space: nowrap; }
.hq-av { flex: 1; display: flex; align-items: center; gap: 6px; opacity: 0; }
.hq-a img { width: 14px; height: 14px; }
.hq-seals { display: flex; }
.hq-seals svg { width: 34px; height: 28px; color: var(--deep); }
.hq-no { color: var(--ok); }
.hq-pdf { margin-left: auto; display: inline-grid; place-items: center; height: 18px; padding: 0 4px; border-radius: 4px; background: #C8453B; color: #fff; font-size: 8.5px; font-weight: 700; font-style: normal; letter-spacing: .03em; }
.hq-sheet.ok { box-shadow: 0 0 0 3px var(--foam), 0 20px 40px -20px rgb(1 33 32 / .45); }
.hq-ft { display: flex; align-items: center; height: 54px; padding: 0 14px; background: #F7F8F6; }
.hq-cnt { font-size: 12.5px; color: var(--ink-2); }
.hq-cnt b { color: var(--ink); font-weight: 700; }
.hq-ok { margin-left: auto; }
.hq-btn { height: 32px; padding: 0 14px; border-radius: 8px; background: var(--deep); color: #fff; font-size: 12.5px; font-weight: 600; display: grid; place-items: center; }
.hq-done { height: 32px; padding: 0 12px 0 9px; border-radius: 8px; background: var(--foam-2); color: var(--ok); font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; box-shadow: inset 0 0 0 1px rgb(14 107 84 / .25); }
.hq-done .ic { width: 14px; height: 14px; stroke-width: 2.6; }
/* 04 · SLAs: tres diales sin cifras; el cliente los gira a su medida y después firman las dos partes */
.sl-doc { position: absolute; left: 44px; right: 44px; top: 34px; padding: 0 26px 34px; }
.sl-h { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: center; padding: 18px 0 16px; border-bottom: 1px solid var(--line); }
.sl-h .ic { width: 18px; height: 18px; color: var(--teal); }
.sl-h b { font-size: 15px; font-weight: 600; }
.sl-h small { grid-column: 2; font-size: 12px; color: var(--ink-3); }
.sl-ds { display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.sl-d { display: grid; justify-items: center; gap: 4px; }
.sl-d b { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sl-k { position: relative; width: 120px; height: 120px; }
.sl-k svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sl-tk line { stroke: rgb(1 33 32 / .2); stroke-width: 1.5; stroke-linecap: round; }
.sl-tr, .sl-vl { fill: none; stroke-width: 5; stroke-linecap: round; }
.sl-tr { stroke: rgb(1 33 32 / .08); }
.sl-vl { stroke: var(--teal); stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.sl-kn { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: linear-gradient(180deg, #fff, #EEF2F0); box-shadow: 0 0 0 1px var(--line-2), 0 10px 18px -8px rgb(1 33 32 / .45); }
.sl-kn i { position: absolute; left: 50%; top: 6px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--deep); }
.sl-sig { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px; }
.sl-sig div { border-bottom: 1px solid var(--ink-3); position: relative; height: 44px; }
.sl-sig svg { position: absolute; left: 6px; bottom: 2px; width: 120px; height: 34px; overflow: visible; }
.sl-sig path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.sl-sig small { position: absolute; left: 0; top: 50px; font-size: 12px; color: var(--ink-3); }

/* ---- Lo que hace / lo que no: dos hojas separadas ---- */
.rg { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 clamp(24px, 4.5vw, 56px) clamp(56px, 7vw, 88px); }
.rg-p { border-radius: 18px; padding: 28px 32px 18px; }
.rg-si { background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -32px rgb(1 33 32 / .35); }
.rg-no { color: var(--foam); background: radial-gradient(60% 50% at 88% 0%, #0E4F49 0, transparent 70%), radial-gradient(50% 50% at 0% 100%, #0B3A36 0, transparent 70%), var(--deep); }
.rg-h { display: flex; align-items: baseline; gap: 12px; padding-bottom: 16px; }
.rg-h b { font-size: 30px; line-height: 1.1; font-weight: var(--w-head); letter-spacing: var(--track); }
.rg-h span { font-size: 14px; color: var(--ink-3); }
.rg-no .rg-h b { color: #F2FBF8; }
.rg-no .rg-h span { color: rgb(198 238 227 / .55); }
.rg li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.rg-no li { border-top-color: rgb(198 238 227 / .12); }
.rg-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.rg-no .rg-ic { background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(198 238 227 / .16); }
.rg-ic svg { width: 26px; height: 26px; fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rg-no .rg-ic svg { stroke: var(--foam); }
.rg li b { display: inline; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.rg li small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.rg-no li b { color: #F2FBF8; background: linear-gradient(rgb(231 178 92 / .8), rgb(231 178 92 / .8)) no-repeat 0 58% / 0% 1.5px; }
.rg-no li small { color: rgb(198 238 227 / .66); }
.rg.in .rg-no li b { background-size: 100% 1.5px; transition: background-size .5s var(--ease) var(--sd, .6s); }
.rg-ic svg * { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.rg.pre .rg-ic svg * { stroke-dashoffset: 1; }
.rg.in .rg-ic svg * { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-out) var(--dd, 0s); }

/* ---- Autonomía: el panel de reglas de la casa, ajustable ---- */
.au-w { position: relative; margin: 0 clamp(24px, 4.5vw, 56px) clamp(56px, 7vw, 88px); padding: 44px; border-radius: 18px; }
.au { max-width: 1000px; margin-inline: auto; font-size: 13px; }
.au-bar { display: flex; align-items: center; gap: 9px; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.au-bar .ic { color: var(--teal); }
.au-bar b { font-size: 13.5px; font-weight: 600; }
.au-save { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink-3); transition: color .25s; }
.au-save.on { color: var(--ok); }
.au-save.sw { animation: au-in .3s var(--ease-out); }   /* «Guardando…» y «Guardado» se cruzan, no saltan */
.au-r { display: grid; grid-template-columns: 210px 150px 1fr; grid-template-areas: "t st fl" "t lv fl"; column-gap: 34px; row-gap: 6px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--line); transition: background-color .4s; }
.au-r:last-child { border-bottom: 0; }
.au-r.warn { background: var(--ember-2); }
.au-t { grid-area: t; }
.au-t b { display: block; font-size: 14.5px; font-weight: 600; }
.au-t span { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ink-3); }
.au-st { grid-area: st; position: relative; display: flex; align-items: center; justify-content: space-between; height: 28px; }
.au-rail { position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; background: var(--line-2); }
.au-fill { position: absolute; inset: 0; background: var(--deep); transform-origin: left; transform: scaleX(0); transition: transform .35s var(--ease-out); }
.au-d { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #C4CFCC; transition: background-color .2s, box-shadow .2s, transform .15s; }
.au-d:hover { transform: scale(1.2); }
.au-d.on { background: var(--deep); box-shadow: inset 0 0 0 2px var(--deep); }
.au-d.cur { box-shadow: inset 0 0 0 2px var(--deep), 0 0 0 5px rgb(1 33 32 / .1); }
.au-d.au-lk { width: 18px; height: 18px; border-radius: 4px; background: none; box-shadow: none; color: #B98B45; cursor: not-allowed; }
.au-d.au-lk:hover { transform: none; }
.au-lk .ic { width: 18px; height: 18px; stroke-width: 2.2; }
.au-lk.shake { animation: au-shake .4s ease; color: var(--ember-ink); }
@keyframes au-shake { 0%, 100% { translate: 0; } 25% { translate: -3px 0; } 50% { translate: 3px 0; } 75% { translate: -2px 0; } }
.au-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 4px; white-space: nowrap; background: var(--deep); color: #fff; font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: 7px; opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s; z-index: 6; }
.au-tip::after { content: ""; position: absolute; top: 100%; left: 50%; translate: -50%; border: 5px solid transparent; border-top-color: var(--deep); }
.au-tip.show { opacity: 1; translate: -50% 0; }
.au-lv { grid-area: lv; align-self: start; font-size: 12.5px; font-weight: 600; color: var(--teal); }
.au-lv.sw { animation: au-in .3s var(--ease-out); }
@keyframes au-in { from { opacity: 0; translate: 0 5px; } }
.au-fl { grid-area: fl; position: relative; height: 62px; }
.au-lane { position: absolute; left: 16px; right: 16px; top: 24px; border-top: 1.5px dashed var(--line-2); }
.au-k { position: absolute; left: 2px; top: 10px; width: 28px; height: 28px; border-radius: 8px; }
.au-tu { position: absolute; left: 47%; top: 9px; translate: -50% 0; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--line-2); transition: opacity .3s, filter .3s; }
.au-tu img { width: 100%; height: 100%; object-fit: cover; }
.au-tu.off { opacity: .35; filter: grayscale(1); }
.au-tu.press { animation: au-press .5s var(--ease-out); }
@keyframes au-press { 40% { scale: .85; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--teal); } }
.au-tu.deny { animation: au-deny .55s ease; }
@keyframes au-deny { 30%, 70% { scale: 1.12; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #E7B25C; } }
.au-vb .au-tu { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--teal); }
.au-dst { position: absolute; right: 2px; top: 9px; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); display: grid; place-items: center; color: var(--ink-3); }
.au-dst .ic { width: 15px; height: 15px; }
.au-dst.ping { animation: au-ping .6s ease; }
@keyframes au-ping { 40% { scale: 1.2; color: var(--teal); box-shadow: inset 0 0 0 1.5px var(--teal); } }
.au-fl small { position: absolute; top: 46px; font-size: 10.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; translate: -50% 0; }
.au-l1 { left: 16px; }
.au-l2 { left: 47%; }
.au-l3 { right: 17px; translate: 50% 0 !important; }
.au-chip { position: absolute; left: 0; top: 11px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: 7px; background: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1px var(--line-2), 0 8px 16px -8px rgb(1 33 32 / .35); opacity: 0; }
.au-chip > .ic { width: 12px; height: 12px; color: var(--teal); }
.au-chip i { font-style: normal; }
.au-ck { width: 15px; height: 15px; border-radius: 50%; background: var(--deep); color: var(--foam); display: grid; place-items: center; opacity: 0; scale: .4; transition: opacity .2s, scale .25s var(--ease-out); }
.au-ck .ic { width: 9px; height: 9px; stroke-width: 3.4; }
.au-chip.ok .au-ck { opacity: 1; scale: 1; }

/* ---- Trazable: cuatro niveles en profundidad. Arriba, lo que ves; abajo, sus fuentes.
   Una ruta cada vez sube de la fuente a la salida; el resto queda atenuado (.act, .in) ---- */
.tz-w { position: relative; height: 520px; margin: 0 clamp(24px, 4.5vw, 56px) clamp(56px, 7vw, 88px); border-radius: 18px; overflow: hidden; background: #FBF9F4;
  outline: 1px solid var(--line); outline-offset: -1px; }
.tz-cv { --cw: 1104px; --ch: 520px; }
.tz-w.pan .tz-cv { left: 0; translate: 0 -50%; }
.tz-band { position: absolute; left: -600px; right: -600px; border-top: 1px solid rgb(1 33 32 / .07); background: #F3F7F2; }
.tz-band:nth-of-type(1) { border-top-color: rgb(0 74 72 / .2); }
.tz-band:nth-of-type(2) { background: #ECF5EF; }
.tz-band:nth-of-type(3) { background: #E4F2EC; }
.tz-lv { position: absolute; left: 24px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.tz-svg { position: absolute; left: 0; top: 0; width: 1104px; height: 520px; overflow: visible; }
.tz-e { fill: none; stroke: rgb(1 33 32 / .17); stroke-width: 1.3; transition: stroke .45s; }
.tz-w.act .tz-e:not(.in) { stroke: rgb(1 33 32 / .07); }
.tz-g { fill: none; stroke: #2E9C86; stroke-width: 8; stroke-linecap: round; opacity: .14; }
.tz-L { fill: none; stroke: var(--teal); stroke-width: 2.2; stroke-linecap: round; }
.tz-hd { fill: #fff; stroke: var(--teal); stroke-width: 2.2; }
.tz-hh { fill: #2E9C86; fill-opacity: .2; }   /* la opacidad la lleva el script (fundido de la cabeza) */
/* Salidas */
.tz-o { position: absolute; top: 26px; width: 204px; height: 70px; translate: -50% 0; padding: 12px 14px 0; cursor: default;
  transition: translate .45s var(--ease-out), box-shadow .45s; }
.tz-oh { display: flex; align-items: center; gap: 8px; height: 22px; }
.tz-oh > i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--foam-2); color: var(--teal); transition: background-color .4s, color .4s; }
.tz-oh .ic { width: 13px; height: 13px; stroke-width: 2; }
.tz-oh small { font-size: 12px; font-weight: 600; color: var(--ink-3); transition: color .4s; }
.tz-o b { display: block; margin-top: 7px; font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: color .4s; }
.tz-o.on { translate: -50% -4px; box-shadow: 0 0 0 2px var(--teal), 0 18px 32px -14px rgb(1 33 32 / .45); }
.tz-o.on .tz-oh > i { background: var(--deep); color: var(--foam); }
.tz-o.on small { color: var(--teal); }
.tz-w.act .tz-o:not(.in) { box-shadow: 0 0 0 1px var(--line); }
.tz-w.act .tz-o:not(.in) small, .tz-w.act .tz-o:not(.in) b { color: rgb(1 33 32 / .32); }
.tz-w.act .tz-o:not(.in) .tz-oh > i { background: var(--tint); color: rgb(1 33 32 / .3); }
/* Las fuentes de cada salida, en la propia tarjeta, cuando la ruta llega */
.tz-pv { margin-left: auto; display: flex; }
.tz-pv i { width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line-2);
  opacity: 0; scale: .4; transition: opacity .3s, scale .5s var(--ease-out); }
.tz-pv i + i { margin-left: -3px; transition-delay: .12s; }
.tz-pv img { width: 12px; height: 12px; }
.tz-pv .tz-pvm { background: var(--deep); }
.tz-pvm svg { width: 15px; height: 15px; fill: var(--foam); }
.tz-o.fed .tz-pv i { opacity: 1; scale: 1; }
.tz-w.act .tz-o.fed:not(.in) .tz-pv i { opacity: .45; }
/* Análisis y registro */
.tz-n { position: absolute; translate: -50% -50%; height: 32px; padding: 0 13px; border-radius: 9px; background: #fff; display: flex; align-items: center;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgb(1 33 32 / .05);
  transition: color .4s, box-shadow .4s, scale .45s var(--ease-out); }
.tz-n.on { color: var(--ink); scale: 1.04; box-shadow: inset 0 0 0 1.5px var(--teal), 0 10px 20px -10px rgb(0 74 72 / .55); }
.tz-w.act .tz-n:not(.in) { color: rgb(1 33 32 / .3); box-shadow: inset 0 0 0 1px var(--line); }
/* Fuentes */
.tz-s { position: absolute; top: 426px; translate: -50% 0; display: grid; justify-items: center; gap: 8px; }
.tz-s i { position: relative; width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 1px var(--line-2), 0 6px 14px -8px rgb(1 33 32 / .3); transition: box-shadow .4s, opacity .4s; }
.tz-s i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--teal); opacity: 0; pointer-events: none; }
.tz-s img { width: 22px; height: 22px; transition: filter .4s; }
.tz-mem i { background: var(--deep); }
.tz-mem svg { width: 28px; height: 28px; fill: var(--foam); }
.tz-s small { font-size: 12px; font-weight: 600; color: var(--ink-2); transition: color .4s; }
.tz-s.on i { box-shadow: 0 0 0 2px var(--teal), 0 10px 22px -10px rgb(0 74 72 / .6); }
.tz-s.on i::after { animation: tz-rip 1.3s var(--ease-out) both; }
@keyframes tz-rip { from { opacity: .6; scale: 1; } to { opacity: 0; scale: 1.9; } }
.tz-s.on small { color: var(--ink); }
.tz-w.act .tz-s:not(.in) i { opacity: .45; }
.tz-w.act .tz-s:not(.in) img { filter: grayscale(1); }
.tz-w.act .tz-s:not(.in) small { color: rgb(1 33 32 / .3); }

/* ---- Dónde viven los datos: un archivador con un cajón por cliente, cada uno con su cerradura.
   Marta abre el suyo con su llave; en el de otro cliente la cerradura no cede y el registro lo anota ---- */
.ai-cab { position: absolute; left: 158px; top: 24px; width: 244px; padding: 12px; border-radius: 14px; background: linear-gradient(180deg, #E8EEEB, #D9E1DE); box-shadow: inset 0 0 0 1.5px rgb(1 33 32 / .13), 0 26px 40px -26px rgb(1 33 32 / .6); }
.ai-cab::before, .ai-cab::after { content: ""; position: absolute; bottom: -7px; width: 26px; height: 7px; border-radius: 0 0 4px 4px; background: #C3CDC9; }
.ai-cab::before { left: 22px; }
.ai-cab::after { right: 22px; }
.ai-pl { display: flex; align-items: center; justify-content: center; gap: 10px; height: 44px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
.ai-pl b { font-weight: 600; }
.ai-eu { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--deep); padding: 3px 9px 3px 5px; border-radius: 99px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.ai-eu .eu-r { width: 18px; height: 18px; fill: #1F4FA8; }
.ai-dr { position: relative; height: 90px; margin-top: 10px; }
.ai-dr.open { z-index: 2; }
.ai-in { position: absolute; left: 12px; right: 12px; top: -14px; height: 28px; display: flex; align-items: flex-end; justify-content: center; gap: 5px; padding: 0 14px; border-radius: 6px 6px 0 0; background: #CBD5D1; box-shadow: inset 0 6px 10px -6px rgb(1 33 32 / .4); transform-origin: 50% 100%; transform: scaleY(0); }
.ai-in i { width: 28px; height: 20px; border-radius: 4px 4px 0 0; background: var(--c); opacity: .9; }
.ai-in i:nth-child(2n) { height: 15px; background: #fff; opacity: 1; }
.ai-fr { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(180deg, #fff, #F2F5F3); box-shadow: 0 0 0 1px rgb(1 33 32 / .12), 0 2px 0 rgb(1 33 32 / .05); }
.ai-lb { position: absolute; left: 52px; right: 16px; top: 16px; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1.5px rgb(1 33 32 / .16); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.ai-hd { position: absolute; left: 50%; bottom: 14px; width: 80px; height: 9px; margin-left: -26px; border-radius: 5px; background: linear-gradient(180deg, #B9C4C0, #97A5A0); box-shadow: 0 1px 0 #fff; }
.ai-lk { position: absolute; left: 13px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #C5CFCB); box-shadow: 0 0 0 1.5px rgb(1 33 32 / .22), inset 0 -2px 3px rgb(1 33 32 / .14); transition: box-shadow .3s, background-color .3s; }
.ai-lk i { position: absolute; left: 50%; top: 50%; width: 4px; height: 12px; margin: -6px 0 0 -2px; border-radius: 2px; background: var(--deep); }
.ai-lk.ok { box-shadow: 0 0 0 2.5px var(--teal), inset 0 -2px 3px rgb(1 33 32 / .14); }
.ai-lk.no { box-shadow: 0 0 0 2.5px #D08A2E, inset 0 -2px 3px rgb(1 33 32 / .14); }
.ai-m { position: absolute; left: 30px; top: 113px; z-index: 3; width: 80px; display: grid; justify-items: center; gap: 6px; }
.ai-av img { display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 10px 20px -10px rgb(1 33 32 / .5); }
.ai-m b { font-size: 13.5px; font-weight: 600; }
.ai-key { position: absolute; left: 50px; top: 28px; width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2.5px #fff; }
.ai-key .ic { width: 15px; height: 15px; stroke-width: 2.2; }
.ai-log { position: absolute; left: 420px; top: 136px; width: 166px; padding: 0 14px 4px; font-size: 12.5px; }
.ai-lh { display: flex; align-items: center; gap: 7px; height: 36px; font-size: 12px; font-weight: 600; }
.ai-lh .ic { width: 14px; height: 14px; color: var(--teal); }
.ai-lr { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 1px; padding: 9px 0 10px; border-top: 1px solid var(--line); }
.ai-lc { display: flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.ai-lc i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.ai-lr small { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ai-ok { width: 18px; height: 18px; border-radius: 50%; background: var(--foam-2); color: var(--ok); display: grid; place-items: center; }
.ai-ok .ic { width: 11px; height: 11px; stroke-width: 3; }
.ai-x { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ember-ink); padding: 2px 6px; border-radius: 5px; background: var(--ember-2); }
.dt3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.dt3 > div { padding: 28px clamp(24px, 3.5vw, 44px) 32px; border-right: 1px solid var(--line); }
.dt3 > div:last-child { border-right: 0; }
.dt-ic { display: block; width: 48px; height: 48px; }
.dt-ic svg { width: 100%; height: 100%; fill: none; stroke: var(--teal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dt-ic .dt-am { stroke: #C98B34; stroke-width: 2; }
.dt-ic .dt-fl { fill: var(--foam-2); }
.dt-ic .dt-st { fill: #C98B34; stroke: none; }
.dt3 b { display: block; margin-top: 14px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.dt3 span:not(.dt-ic) { display: block; margin-top: 5px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* ---- Responsive ---- */
@media (max-width: 1180px) {
  .tz-cv { zoom: .84; }
  .tz-w { height: 437px; }
  .sg { grid-template-columns: repeat(3, 1fr); }
  .sg-c:nth-child(n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .sg-c:nth-child(3n) { border-right: 0; }
  .sg-c:last-child { border-bottom: 0; }
  /* Autonomía: el carril vuelve, en su propia fila bajo el nivel (sin él la secuencia no tiene dónde ir) */
  .au-r { grid-template-columns: 190px 150px 1fr; grid-template-areas: "t st lv" "fl fl fl"; row-gap: 10px; }
}
@media (max-width: 980px) {
  .pd-cv { zoom: .76; }
  #puertas { height: 440px; }
  .tz-cv { zoom: .74; }
  .tz-w { height: 385px; }
  .er { grid-template-columns: 1fr; }
  .er-l { border-right: 0; }
  #er-s { order: -1; }
  .rg { grid-template-columns: 1fr; }
  .dt3 { grid-template-columns: 1fr; }
  .dt3 > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .dt3 > div:last-child { border-bottom: 0; }
}
@media (max-width: 700px) {
  /* Hero en vertical: dos filas de dos puertas, cada una con su suelo. Kelp recorre la primera,
     sale por la derecha y entra por la izquierda en la segunda, como una línea de texto */
  .pd-cv { --cw: 340px; --ch: 440px; --dw: 120px; --dh: 128px; --gap: 44px; --pw: 108px; zoom: 1; }
  #puertas { height: 476px; }
  .pd-row { flex-wrap: wrap; row-gap: 50px; }
  .pd { gap: 10px; }
  .pd-sg { font-size: 15px; gap: 7px; }
  .pd-sg .ic { width: 17px; height: 17px; }
  .pd-pf { height: 76px; margin-top: -38px; }
  .pd-pf > svg { width: 52px; height: 43px; }
  .pd-pf > b { font-size: 14px; margin-left: 4px; }
  .pd-lg img { width: 20px; height: 20px; }
  .pd-lk { right: 8px; width: 22px; height: 22px; margin-top: -11px; }
  .pd-lf::before, .pd-lf::after { left: 12px; right: 12px; }
  .pd-lf::before { top: 12px; }
  .pd-lf::after { bottom: 12px; }
  .pd-fl { left: 12px; right: 12px; top: 189px; }
  .pd-fl2 { display: block; top: 411px; }
  .pd-k { top: 168px; width: 44px; height: 44px; border-radius: 13px; box-shadow: 0 0 0 5px rgb(198 238 227 / .12), 0 12px 24px -10px rgb(1 33 32 / .6); }
  .pd-k svg { width: 27px; height: 27px; }
  .pd-k .rp { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 16px; }
  .tz-w { margin: 0 16px 56px; }
  /* Enterprise Ready: lienzo propio de móvil (332 px), sin encoger; cada escena recoloca sus piezas */
  #er-s { height: 396px; margin: 16px; }
  .er-cv { --cw: 332px; --ch: 372px; }
  .fz-plan { zoom: .6; left: 7px; top: 117px; }   /* el plano se reduce entero; sus rótulos crecen para quedar en ~11 px */
  .fz-b b { left: 10px; top: 10px; padding: 4px 10px; font-size: 19px; }
  .fz-k { width: 52px; height: 52px; border-radius: 15px; }
  .fz-ph { top: 290px; gap: 18px; font-size: 13px; }
  .nb-h { left: 30px; top: 40px; gap: 8px; height: 40px; font-size: 14px; }
  .nb-lg img { width: 20px; height: 20px; }
  .nb-pv { font-size: 12px; padding: 2px 7px; }
  .nb-k { left: 34px; top: 136px; }
  .nb-m { left: 166px; top: 132px; width: 142px; padding: 13px 14px; }
  .nb-ml img { width: 24px; height: 24px; }
  .nb-mn b { font-size: 14px; }
  .nb-key { left: 166px; top: 332px; }
  .hq-sheet { left: 4px; right: 4px; top: 6px; font-size: 12px; }
  .hq-bar { gap: 7px; height: 42px; padding: 0 10px; }
  .hq-bar > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .hq-prov { font-size: 0; gap: 6px; }   /* «Proveedor» sobra en el móvil: queda Kelp con su símbolo */
  .hq-prov b { font-size: 12px; }
  .hq-th, .hq-r { grid-template-columns: 28px 112px 1fr; }
  .hq-th { height: 28px; }
  .hq-th > span, .hq-r > span { padding: 0 9px; }
  .hq-r { height: 40px; }
  .hq-q { line-height: 1.2; }
  .hq-seals svg { width: 29px; height: 24px; }
  .hq-ft { height: 50px; padding: 0 10px; }
  .hq-cnt { font-size: 12px; }
  .sl-doc { left: 6px; right: 6px; top: 12px; padding: 0 16px 26px; }
  .sl-h { padding: 16px 0 14px; }
  .sl-ds { padding: 16px 0 16px; }
  .sl-d { align-content: start; gap: 6px; }
  .sl-d b { font-size: 12px; line-height: 1.25; text-align: center; }
  .sl-k { width: 92px; height: 92px; }
  .sl-kn { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .sl-kn i { top: 5px; height: 12px; width: 3px; margin-left: -1.5px; }
  .sl-sig { gap: 18px; }
  .sl-sig svg { width: 104px; }
  /* Datos: lienzo propio de móvil. Marta a la izquierda del archivador, cajones más bajos y el
     registro de accesos debajo, a lo ancho, una línea por acceso */
  #s-aisla { height: 460px; margin: 16px; }
  .ai-cv { --cw: 332px; --ch: 436px; }
  .ai-cab { left: 88px; top: 8px; padding: 10px; }
  .ai-pl { height: 40px; }
  .ai-dr { height: 66px; }
  .ai-lb { left: 48px; right: 12px; top: 9px; height: 30px; }
  .ai-hd { bottom: 8px; height: 8px; }
  .ai-m { left: 0; top: 75px; }
  .ai-log { left: 0; right: 0; top: 322px; width: auto; padding: 0 14px 2px; }
  .ai-lr { grid-template-columns: 1fr auto auto; column-gap: 12px; padding: 10px 0; }
  .ai-lr small { grid-column: 2; grid-row: 1; font-size: 12px; }
  .ai-lr > i { grid-column: 3; grid-row: 1; }
  /* Trazable: el lienzo, sin encoger tanto; la vista sigue a la ruta y los rótulos crecen para leerse */
  .tz-cv { zoom: .8; }
  .tz-w { height: 416px; }
  .tz-lv, .tz-oh small, .tz-s small { font-size: 14px; }
  .tz-n, .tz-o b { font-size: 14.5px; }
  .sg { grid-template-columns: 1fr 1fr; }
  .sg-c:nth-child(n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 18px 26px; }
  .sg-c:nth-child(2n) { border-right: 0; }
  .sg-c:nth-last-child(-n+2) { border-bottom: 0; }
  .ct-svg { margin-left: -12px; }
  .sg-docs a { flex: 1 1 100%; }
  .sg-upd { margin-left: 0; }
  .au-w { padding: 14px; }
  .au-r { grid-template-columns: 1fr auto; grid-template-areas: "t t" "st lv" "fl fl"; gap: 10px 12px; padding: 14px 16px 8px; }
  .au-st { width: 144px; }
  .au-lv { align-self: center; white-space: nowrap; }   /* una línea: cambiar de nivel no mueve la fila */
  .au-d::after { content: ""; position: absolute; inset: -14px; }   /* 44 px de toque en cada nivel */
  .au-fl small { font-size: 11px; }
  .au-chip { gap: 4px; padding: 0 6px; }
  .au-chip i { display: none; }   /* en el carril estrecho viaja el documento, sin su nombre */
  .rg-p { padding: 22px 20px 12px; }
}