:root{--petrol:#161d20;--raised:#20292d;--surface:#283338;--ivory:#f4efe6;--signal:#35b39a;--signal-ink:#8fd7c8;--warm:#d5b56d;--ink:#1b2430;--muted:#637076;--line:#3d4a4f;--light-line:#dce1e0;--paper:#fff;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 'Public Sans',sans-serif;font-synthesis:none}a{color:inherit;text-decoration:none}button,input{font:inherit}.skip-link{position:fixed;top:8px;left:8px;z-index:100;transform:translateY(-140%);background:#fff;padding:9px 12px}.skip-link:focus{transform:none}.mono{font-family:'IBM Plex Mono',monospace}.site-header{position:fixed;z-index:50;top:0;left:0;right:0;height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,4.5vw,86px);color:var(--ivory);mix-blend-mode:normal;background:linear-gradient(180deg,rgba(22,29,32,.7),rgba(22,29,32,.46));backdrop-filter:blur(8px)}.brand{display:flex;align-items:center;gap:10px}
.brand-mark{display:block;flex-shrink:0}
.wordmark{display:flex;flex-direction:column;line-height:1;font-size:13px;font-weight:700;letter-spacing:.15em}
.wordmark small{font-size:9px;font-weight:500;letter-spacing:.09em;color:#9fb0ac;margin-top:3px}
@media(max-width:720px){.wordmark small{display:none}}.site-header nav{display:flex;align-items:center;gap:28px;font-size:13px}.site-header nav>a:not(.button){color:#d3ddda;transition:color .2s}.site-header nav>a:not(.button):hover{color:var(--signal-ink)}.button{display:inline-flex;align-items:center;justify-content:center;gap:13px;border:0;border-radius:2px;background:var(--signal);color:#071612;padding:14px 19px;font-size:14px;font-weight:700;cursor:pointer}.button i,.quiet-link i{font-style:normal;font-size:18px}.button-small{padding:10px 14px;font-size:12px}.data-experience{position:relative;background:var(--petrol);color:var(--ivory);overflow:clip}.data-experience canvas{position:fixed;z-index:0;inset:0;width:100%;height:100vh;pointer-events:none}.data-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.045;background-image:radial-gradient(rgba(244,239,230,.7) .55px,transparent .7px);background-size:9px 9px}.scene-progress{position:fixed;right:26px;top:50%;z-index:20;width:1px;height:120px;background:#ffffff17;transform:translateY(-50%)}.scene-progress span{display:block;width:1px;height:0;background:var(--signal);transition:height .1s linear}.system-status{position:fixed;right:52px;bottom:26px;z-index:20;display:flex;gap:14px;align-items:center;color:#90a09d;font-size:11px;letter-spacing:.08em;background:none;border:0;cursor:pointer;font-family:inherit}.system-status b{color:var(--signal-ink);font-weight:500}.system-status:hover,.system-status:focus-visible{color:var(--ivory)}
/* Menú de saltos — el contador fijo ya existía como lectura pasiva; esto lo vuelve un atajo real para no tener que scrollear 10 pantallas largas a mano. */
.story-jump{position:fixed;right:52px;bottom:58px;z-index:21;background:rgba(22,29,32,.94);border:1px solid rgba(244,239,230,.14);border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:1px;backdrop-filter:blur(6px);box-shadow:0 12px 30px rgba(0,0,0,.32)}
.story-jump[hidden]{display:none}
.story-jump button{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:5px;background:none;border:0;cursor:pointer;color:#aebdb9;font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.story-jump button:hover,.story-jump button:focus-visible{background:rgba(53,179,154,.14);color:var(--ivory)}
.story-jump button span{color:#6f8884;font-size:10px}
.story-jump button.is-current{color:var(--signal-ink)}
.story-jump button.is-current span{color:var(--signal)}
@media(max-width:720px){.system-status,.story-jump{display:none!important}}
/* El banner de cookies (z-index:90, fijo al fondo) tapaba estos controles antes de que hubiera nada clicable ahí abajo — ahora que #system-status sí lo es, sube mientras el banner siga visible. */
body.cookie-visible .system-status{bottom:112px}
body.cookie-visible .story-jump{bottom:144px}
body.cookie-visible .story-cta{bottom:112px}.scene{position:relative;z-index:2;min-height:118vh}.long-scene{min-height:158vh}.scene-frame{position:sticky;top:0;min-height:100vh;padding:clamp(100px,12vh,148px) clamp(24px,8vw,150px);display:grid;align-items:center;overflow:hidden}.scene-copy{position:relative;z-index:4}.eyebrow{font:500 12px/1.4 'IBM Plex Mono',monospace;letter-spacing:.1em;color:var(--signal-ink);margin:0 0 18px}.eyebrow span{padding:0 6px}.scene h1,.scene h2,.config-transition h2,.config-head h2,.faq h2,.closing h2{font-family:Fraunces,Georgia,serif;font-weight:600;letter-spacing:-.052em;text-wrap:balance}.scene h1{font-size:clamp(52px,6.1vw,102px);line-height:.98;margin:0}.scene h2{font-size:clamp(47px,5vw,84px);line-height:1;margin:0}.scene h1 em,.scene h2 em,.config-transition h2 em,.closing h2 em{font-weight:500;color:var(--signal-ink)}.scene-copy>p:not(.eyebrow),.track-copy>p:not(.eyebrow),.physical-copy>p:not(.eyebrow){max-width:500px;color:#c0ccc8;font-size:17px;margin:24px 0 0}.quiet-link{display:inline-flex;align-items:center;gap:11px;color:var(--ivory);font-size:14px}.quiet-link:hover{color:var(--signal-ink)}
.hero-frame{grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);gap:6vw}.hero-copy{margin-left:clamp(0px,5vw,110px);max-width:820px}.lede{max-width:520px;color:#c8d3d0;font-size:18px;margin:28px 0 12px}.hero-products{display:flex;gap:8px;flex-wrap:wrap;color:#93a5a1;font-size:11px;letter-spacing:.08em;margin:0 0 30px}.hero-products i{font-style:normal;color:var(--signal)}.hero-actions{display:flex;align-items:center;gap:26px}.hero-data-map{position:relative;width:min(100%,760px);aspect-ratio:1.08;margin-left:auto;opacity:.96}.data-axis{position:absolute;background:linear-gradient(90deg,transparent,#35b39a35,transparent)}.axis-x{left:8%;right:2%;top:53%;height:1px}.axis-y{top:9%;bottom:6%;left:52%;width:1px;background:linear-gradient(180deg,transparent,#35b39a30,transparent)}.data-cluster{position:absolute;background-image:radial-gradient(rgba(244,239,230,.34) 1.1px,transparent 1.3px);background-size:18px 18px;mask-image:linear-gradient(90deg,transparent,#000 16%,#000 82%,transparent)}.cluster-a{left:5%;top:16%;width:42%;height:26%;opacity:.44}.cluster-b{left:42%;top:58%;width:52%;height:22%;opacity:.5}.cluster-c{left:58%;top:17%;width:33%;height:16%;opacity:.28}.data-node{position:absolute;border-radius:50%;background:var(--signal);box-shadow:0 0 0 7px #35b39a18}.node-source{left:52%;top:53%;width:10px;height:10px;transform:translate(-50%,-50%)}.node-destination{left:83%;top:32%;width:7px;height:7px}.data-route{position:absolute;height:1px;background:linear-gradient(90deg,var(--signal),rgba(143,215,200,.12));transform-origin:left center}.route-main{left:52%;top:53%;width:32%;transform:rotate(-24deg)}.route-branch{left:52%;top:53%;width:23%;transform:rotate(23deg);opacity:.35}
/* Reusa la misma animación "travel" del riel de Signal — el gráfico del
héroe era 100% estático (ni un solo @keyframes), bug real reportado como
"el primer gráfico no tiene movimiento". No se inventa una coreografía
nueva: una señal recorriendo el acceso ya es el lenguaje visual del sitio. */
.route-pulse{position:absolute;left:3%;top:50%;width:6px;height:6px;border-radius:50%;background:var(--ivory);transform:translate(-50%,-50%);box-shadow:0 0 6px 2px rgba(53,179,154,.55);animation:travel 2.3s linear infinite}
.route-branch .route-pulse{animation-duration:2.9s;animation-delay:.6s}
@media (prefers-reduced-motion:reduce){.route-pulse{animation:none;opacity:0}}.data-readout{position:absolute;right:1%;bottom:7%;display:grid;gap:4px;color:#8fa09c;font-size:11px}.data-readout strong{color:var(--signal-ink);font-weight:500}.hero-sequence{position:absolute;left:clamp(24px,8vw,150px);bottom:34px;display:flex;gap:10px;align-items:center;color:#80928e;font-size:11px}.hero-sequence i{font-style:normal;color:var(--signal)}.scroll-cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);font-size:10px;color:#71837f;letter-spacing:.08em}.scroll-cue span{display:inline-block;width:28px;height:1px;background:var(--signal);vertical-align:middle;margin-right:9px}
.signal-frame{grid-template-columns:.8fr 1.2fr}.narrow-copy{margin-left:clamp(0px,10vw,180px)}.signal-rail{position:relative;width:min(780px,90%);height:90px;margin-left:4vw}.signal-rail>i{position:absolute;left:3%;right:4%;top:50%;height:1px;background:linear-gradient(90deg,#35b39a20,var(--signal),#8fd7c84a)}.signal-origin{position:absolute;left:3%;top:50%;width:11px;height:11px;border-radius:50%;background:var(--signal);transform:translate(-50%,-50%);box-shadow:0 0 0 9px #35b39a16}.signal-rail b{position:absolute;left:3%;top:50%;width:8px;height:8px;border-radius:50%;background:var(--ivory);transform:translate(-50%,-50%);animation:travel 2.6s linear infinite}.signal-rail em{position:absolute;right:3%;top:50%;width:9px;height:9px;border:1px solid var(--signal-ink);transform:translateY(-50%) rotate(45deg)}@keyframes travel{0%{left:3%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:96%;opacity:0}}.sequence-labels{position:absolute;left:clamp(24px,11vw,200px);bottom:15vh;display:flex;gap:13px;align-items:center;color:#91a19e;font-size:11px}.sequence-labels i{font-style:normal;color:var(--signal)}.sequence-labels b{color:var(--signal-ink);font-weight:500}
.ecosystem-frame{grid-template-columns:1fr 1fr;gap:8vw}.ecosystem-copy{margin-left:clamp(0px,7vw,130px)}.ecosystem-words{display:grid;gap:0;width:min(100%,620px)}.ecosystem-words span{display:grid;grid-template-columns:180px 1fr;align-items:end;padding:21px 0;border-bottom:1px solid #ffffff24}.ecosystem-words small{font-size:11px;color:#93a4a1}.ecosystem-words b{font:500 clamp(34px,3vw,52px)/1 Fraunces;color:var(--ivory)}.ecosystem-words em{grid-column:2;font-style:normal;color:#8da09c;font-size:14px;margin-top:6px}
.identity-frame{grid-template-columns:1.12fr .88fr;gap:7vw}.identity-visual{position:relative;height:64vh;min-height:520px}.identity-person{position:absolute;left:14%;top:42%;display:grid;place-items:center}.identity-person span{display:block;width:18px;height:18px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 12px #35b39a12}.identity-person b{font:500 12px 'IBM Plex Mono';color:#8fd7c8;margin-top:14px}.identity-grid{position:absolute;left:39%;top:18%;width:55%;height:62%;display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-content:center}.identity-grid span{display:block;aspect-ratio:1;border-radius:50%;background:#f4efe670;border:1px solid #f4efe62a;transform:scale(.72);opacity:.48;transition:transform .7s var(--ease),opacity .7s var(--ease)}.identity-grid span:nth-child(4n+1){background:#35b39aa8}.identity-grid.is-active span{transform:scale(1);opacity:.88}.identity-team-label{position:absolute;right:4%;bottom:12%;font-size:11px;color:var(--signal-ink)}.identity-copy{align-self:center;max-width:560px}.identity-stages{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:34px 0 28px;color:#8ea09c;font-size:11px}.identity-stages i{font-style:normal;color:var(--signal)}.identity-stages b{color:var(--signal-ink);font-weight:500}.product-whisper{display:flex;align-items:center;gap:14px;color:#aebdb9;font-size:14px}.product-whisper p{margin:0}.product-whisper b{color:var(--ivory)}.identity-whisper{position:absolute;left:12%;bottom:9%}.mini-nfc,.mini-presenter{display:grid;place-items:center;width:46px;height:30px;border:1px solid #d5b56d70;color:var(--warm);border-radius:4px;font:600 11px 'IBM Plex Mono'}
.track-frame{display:block;padding-top:11vh}.track-copy{max-width:760px;margin-left:clamp(0px,4vw,80px)}.track-map{position:absolute;left:8%;right:5%;top:40%;height:48%;min-height:360px}.track-map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.track-grid path{stroke:#ffffff0c;stroke-width:1}.route-line{fill:none;stroke:#8fd7c82b;stroke-width:1.4;transition:stroke .5s,stroke-width .5s,filter .5s}.route-line.is-active{stroke:var(--signal);stroke-width:2.6;filter:drop-shadow(0 0 7px #35b39a77)}.track-source{fill:var(--signal);filter:drop-shadow(0 0 7px #35b39a77)}.track-target{fill:#f4efe640;stroke:#8fd7c855;stroke-width:1.5;transition:fill .5s,stroke .5s,r .5s}.track-target.is-active{fill:var(--ivory);stroke:var(--signal);r:10px}.track-pulse{fill:var(--ivory);filter:drop-shadow(0 0 6px #35b39a)}.track-source-label{position:absolute;left:11%;top:51%;transform:translateY(-50%);font-size:11px;color:var(--signal-ink)}.track-destination-label{position:absolute;left:76.5%;display:grid;gap:3px;opacity:.36;transform:translateY(-50%);transition:opacity .5s,transform .5s}.track-destination-label small{font-size:11px;color:#82938f}.track-destination-label strong{font:500 clamp(24px,2.3vw,38px)/1.05 Fraunces;color:var(--ivory)}.track-destination-label.is-active{opacity:1;transform:translateY(-50%) translateX(8px)}.destination-a{top:17%}.destination-b{top:50%}.destination-c{top:83%}.track-caption{position:absolute;left:10%;bottom:10%;font:500 clamp(24px,2.2vw,35px) Fraunces;color:#d7dfdc}.track-caption em{font-style:normal;color:var(--signal-ink)}.track-whisper{position:absolute;right:8%;bottom:8%}.mini-tag{display:block;width:34px;height:34px;border-radius:50%;border:1px solid #d5b56d75;box-shadow:inset 0 0 0 7px #d5b56d12}
.reputation-frame{grid-template-columns:.9fr 1.1fr;gap:8vw}.reputation-copy{margin-left:clamp(0px,4vw,80px)}.reputation-flow{position:relative;height:62vh;min-height:500px}.rep-node{position:absolute;padding:9px 12px;border:1px solid #ffffff28;background:#161d20cc;color:#b9c7c3;font:500 11px 'IBM Plex Mono';letter-spacing:.07em}.rep-source{left:4%;top:50%}.rep-core{left:39%;top:50%;color:var(--signal-ink);border-color:#35b39a66}.rep-feedback{right:3%;top:29%}.rep-public{right:3%;top:70%}.rep-line{position:absolute;height:1px;background:linear-gradient(90deg,#35b39a25,var(--signal));transform-origin:left center}.rep-line-main{left:16%;top:52%;width:25%}.rep-line-up{left:51%;top:52%;width:36%;transform:rotate(-24deg)}.rep-line-down{left:51%;top:52%;width:36%;transform:rotate(24deg)}/* Prueba social — franja independiente entre Hero y Signal, sin data-scene a
   propósito: no debe contar como una "escena" más del storytelling (el
   contador 0N/10, el menú de saltos y el canvas de partículas solo
   reaccionan a [data-scene], confirmado antes de construir esto). Números
   reales verificados contra la base de producción de Track, de solo
   lectura, el 2026-10-07 — no son demo data. */
.social-proof-band{position:relative;z-index:2;background:var(--raised);border-block:1px solid #ffffff14;padding:clamp(48px,7vw,86px) clamp(24px,8vw,150px)}
.social-proof-shell{width:min(100%,1180px);margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr;column-gap:clamp(32px,6vw,80px);row-gap:clamp(20px,2.5vw,32px);align-items:center}
.social-proof-item .eyebrow{font:500 12px/1.4 'IBM Plex Mono',monospace;letter-spacing:.1em;color:var(--signal-ink);margin:0 0 14px}
.social-proof-lead strong{display:block;font:600 clamp(56px,7vw,104px) Fraunces,Georgia,serif;color:var(--ivory);line-height:1;letter-spacing:-.02em}
.social-proof-lead>span{display:block;margin-top:10px;font:500 13px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#c0ccc8}
.social-proof-lead small{display:block;margin-top:8px;color:#8fa29e;font-size:12px}
.social-proof-pair{display:flex;gap:clamp(28px,4vw,56px)}
.social-proof-pair strong{display:block;font:600 clamp(36px,4vw,54px) Fraunces,Georgia,serif;color:var(--ivory);line-height:1}
.social-proof-pair span{display:block;margin-top:6px;font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#8fa29e}
.social-proof-note{grid-column:1/-1;margin:clamp(16px,2.5vw,28px) 0 0;padding-top:clamp(16px,2.5vw,24px);border-top:1px solid #ffffff14;color:#91a29e;font-size:12px;letter-spacing:.03em;max-width:620px}
.social-proof-status{display:block;max-width:100%;margin-top:14px;font-size:12px;line-height:1.7;letter-spacing:.04em;color:#c0ccc8;text-decoration:none;transition:color .2s}
.social-proof-status .status-dot{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--signal);vertical-align:middle;animation:livePulse 2s ease-in-out infinite}
.social-proof-status i{font-style:normal;color:var(--signal-ink);white-space:nowrap}
.social-proof-status:hover{color:var(--ivory)}
.social-proof-status:hover i{text-decoration:underline}
@media(max-width:900px){.social-proof-shell{grid-template-columns:1fr;gap:36px}}
@media(max-width:480px){.social-proof-pair{gap:28px}}
.metric-glimpse{position:absolute;right:8%;bottom:9%;display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));gap:25px;max-width:520px}.metric-glimpse>p{grid-column:1/-1;margin:0;color:var(--signal-ink);font-size:11px}.metric-glimpse div{display:grid}.metric-glimpse strong{font:500 clamp(28px,2.7vw,42px) 'IBM Plex Mono';color:var(--ivory)}.metric-glimpse span{font:500 11px 'IBM Plex Mono';color:#91a29e}.reputation-whisper{position:absolute;left:9%;bottom:10%}
.pause-scene{min-height:102vh}.pause-frame{place-items:center;text-align:center}.pause-frame h2{font-size:clamp(56px,6vw,96px)}.single-point{display:block;width:12px;height:12px;border-radius:50%;background:var(--signal);margin-top:46px;box-shadow:0 0 0 13px #35b39a12}
.physical-frame{display:block;padding-top:10vh}.physical-copy{max-width:730px;margin-left:clamp(0px,4vw,80px)}.warm-text{color:var(--warm)}.physical-copy h2{font-size:clamp(52px,5.5vw,90px)}.physical-stage{position:absolute;left:7%;right:7%;top:45%;display:grid;grid-template-columns:1fr .7fr 1fr;gap:7vw;align-items:end}.physical-object{display:grid;justify-items:center;gap:18px;border:0;background:none;color:inherit;cursor:pointer;opacity:.5;transform:translateY(18px) scale(.92);transition:opacity .55s,transform .55s}.physical-object.is-active{opacity:1;transform:none}.physical-object small{font-size:11px;color:#cbb47c}.nfc-card-object,.nfc-presenter-object{position:relative;display:flex;flex-direction:column;justify-content:space-between;background:#fbfbf8;color:#1b2426;box-shadow:0 30px 65px #0008,0 0 0 1px #ffffff55 inset}.nfc-card-object{width:min(27vw,330px);aspect-ratio:1.58;border-radius:13px;padding:22px}.nfc-card-object i,.nfc-presenter-object i{align-self:flex-end;font:600 13px 'IBM Plex Mono';font-style:normal;color:#b8934b}.nfc-card-object b{font-size:12px;letter-spacing:.12em}.nfc-tag-object{display:grid;place-items:center;width:min(12vw,138px);aspect-ratio:1;border-radius:50%;background:#fbfbf8;box-shadow:0 25px 55px #0007,0 0 0 1px #ffffff55 inset}.nfc-tag-object i{font:600 13px 'IBM Plex Mono';font-style:normal;color:#b8934b}.nfc-presenter-object{width:min(21vw,250px);height:min(32vw,390px);border-radius:8px 8px 2px 2px;padding:24px;transform:perspective(850px) rotateX(2deg) rotateY(-8deg)}.nfc-presenter-object:after{content:'';position:absolute;left:-7%;right:-7%;bottom:-14px;height:18px;background:#d9d9d3;transform:skewX(-18deg);box-shadow:0 12px 28px #0008}.nfc-presenter-object b{margin:auto 0;font-size:12px}.nfc-presenter-object em{width:64px;height:64px;align-self:center;background:linear-gradient(90deg,#171d1f 50%,transparent 50%),linear-gradient(#171d1f 50%,transparent 50%);background-size:12px 12px}.physical-route-panel{position:absolute;right:7%;bottom:6%;width:min(470px,39vw);padding:20px 0;border-top:1px solid #ffffff31}.physical-route-panel>p:first-child{font-size:11px;color:var(--warm);margin:0 0 9px}.physical-route{display:flex;align-items:center;gap:14px;font-size:15px}.physical-route i{font-style:normal;color:var(--signal)}.physical-route strong{font:500 30px Fraunces;color:var(--ivory)}.physical-route-panel>p:nth-child(3){color:#aab9b5;font-size:14px}.physical-channel-data{display:flex;gap:28px;font-size:11px;color:#8fa09c}.physical-channel-data b{color:var(--ivory);font-weight:500}.physical-principle{position:absolute;left:8%;bottom:7%;display:grid;gap:5px}.physical-principle span{font-size:11px;color:var(--warm)}.physical-principle b{font:500 27px Fraunces;color:var(--ivory)}
.control-frame{grid-template-columns:.72fr 1.28fr;gap:8vw}.control-copy{margin-left:clamp(0px,4vw,80px)}.control-matrix{display:grid;gap:18px;padding:30px 0}.control-matrix div{display:flex;align-items:center;gap:9px}.control-matrix span{width:115px;color:#8fa09c;font:500 11px 'IBM Plex Mono'}.control-matrix b{width:11px;height:11px;border-radius:50%;background:#f4efe66f}.control-matrix div:nth-child(2) b:nth-last-child(-n+3),.control-matrix div:nth-child(4) b:nth-last-child(-n+2){background:var(--signal);animation:livePulse 2.4s ease-in-out infinite}
.status-dot{animation:livePulse 2.4s ease-in-out infinite}.touchpoint-console{position:absolute;right:7%;bottom:8%;width:min(470px,38vw);border-top:1px solid #ffffff34;padding-top:15px}.console-head{display:flex;align-items:center;gap:10px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--signal)}.console-head b{font-size:13px}.console-head em{margin-left:auto;font-style:normal;color:#8fa09c;font-size:11px}.console-grid{display:grid;grid-template-columns:120px 1fr;gap:7px 16px;padding:16px 0;color:#92a39f;font-size:12px}.console-grid strong{color:#d9e0de;font-weight:500}.console-actions{display:flex;gap:18px;color:var(--signal-ink);font-size:11px}
.security-frame{grid-template-columns:.8fr 1.2fr;gap:8vw}.security-copy{margin-left:clamp(0px,4vw,80px)}.security-domains{display:grid;grid-template-columns:1fr 1fr;gap:42px}.security-domains>div{position:relative;min-height:320px;border:1px solid #ffffff22;padding:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-content:center}.security-domains span{position:absolute;left:18px;top:16px;font-size:11px;color:var(--signal-ink)}.security-domains i{display:block;width:14px;height:14px;border-radius:50%;background:#f4efe66d;margin:auto}.security-domains>div:first-child i:nth-of-type(2),.security-domains>div:first-child i:nth-of-type(5),.security-domains>div:last-child i:nth-of-type(3){background:var(--signal);animation:livePulse 2.4s ease-in-out infinite}
/* CONTROL/SECURITY: "todos tus puntos en un solo lugar" y "cada empresa con
sus datos" eran diagramas 100% quietos (Control ya tenía un settle-in de
0.75s al entrar, pero terminaba casi antes de notarse; Security no tenía
nada) — bug real reportado como "sin movimiento". Lo que ambas secciones
quieren decir es "esto está vivo, se monitorea ahora", así que los puntos ya
marcados como activos laten en vez de quedar prendidos fijos; no se inventa
una coreografía nueva, solo se hace visible la que ya implicaba "ACTIVO". */
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(53,179,154,.35)}50%{opacity:.62;box-shadow:0 0 0 5px rgba(53,179,154,0)}}
@media (prefers-reduced-motion:reduce){.control-matrix b,.status-dot,.security-domains i{animation:none!important}}.security-labels{position:absolute;right:8%;bottom:10%;display:flex;gap:10px;flex-wrap:wrap;max-width:620px}.security-labels span{border:1px solid #ffffff28;padding:8px 11px;color:#aebdb9;font-size:11px}
.config-transition{position:relative;overflow:hidden;min-height:720px;padding:160px clamp(24px,12vw,210px);background:linear-gradient(180deg,var(--petrol) 0%,#283338 30%,#f7f8f7 74%,#fff 100%);color:var(--ink)}.resolve-field{position:absolute;inset:0;background-image:radial-gradient(rgba(244,239,230,.78) 1px,transparent 1.2px);background-size:22px 22px;opacity:.27;mask-image:linear-gradient(#000 0%,#000 42%,transparent 79%)}.resolve-field:after{content:'';position:absolute;left:14%;right:14%;top:28%;height:1px;background:linear-gradient(90deg,transparent,#ffffff55,transparent);box-shadow:0 44px 0 #ffffff22,0 88px 0 #ffffff18,0 132px 0 #ffffff11}.transition-copy{position:relative;max-width:840px}.config-transition .eyebrow{color:var(--signal-ink)}.config-transition h2{font-size:clamp(48px,5.6vw,88px);line-height:1;margin:10px 0 22px}.config-transition h2 em{color:var(--ink)}.config-transition p{max-width:520px;color:#495854;font-size:17px}.intent-picker{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:0;margin-top:44px;border-top:1px solid #20292d}.intent-picker a{display:grid;grid-template-columns:45px 1fr auto;gap:12px;align-items:center;border-bottom:1px solid #cfd6d4;padding:18px 0;font:500 19px Fraunces}.intent-picker a:nth-child(odd){padding-right:28px}.intent-picker a:nth-child(even){padding-left:28px;border-left:1px solid #cfd6d4}.intent-picker span{font:500 11px 'IBM Plex Mono';color:#61706c}.intent-picker i{font-style:normal;color:var(--signal)}
.configurator{padding:120px clamp(24px,8vw,140px);background:#fff}.config-head{margin-bottom:64px}.config-head .eyebrow,.faq .eyebrow{color:#186b5c}.closing .eyebrow{color:#4a8b7f}.config-head h2,.faq h2{font-size:clamp(42px,4.8vw,72px);line-height:1.04;margin:10px 0}.config-head>p:last-child{max-width:560px;color:var(--muted);font-size:16px}.config-layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:84px;align-items:start}.plan-group{border:0;border-top:1px solid var(--light-line);padding:22px 0 36px;margin:0}.plan-group legend{font:600 31px Fraunces;padding:0 0 12px}.plan-group legend span{font:500 11px 'IBM Plex Mono';color:#186b5c;margin-right:12px}.choice{display:grid;grid-template-columns:22px 1fr auto;gap:14px;align-items:center;border-bottom:1px solid #edf0ef;padding:16px 4px;cursor:pointer}.choice input{accent-color:#278b78}.choice span{display:grid}.choice b{font-size:15px}.choice small,.annual,.physical-choice small,.tier-note{color:var(--muted);font-size:13px}.choice strong{font:500 14px 'IBM Plex Mono';text-align:right}.choice strong small{font:400 11px 'IBM Plex Mono'}.quantity{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;margin-top:14px;padding:16px;background:#f5f7f6;font-size:14px}.quantity>div{display:flex;border:1px solid #ccd4d1;background:#fff}.quantity input{width:48px;border:0;text-align:center;appearance:textfield}.quantity input::-webkit-inner-spin-button{appearance:none}.quantity button{width:34px;border:0;background:#fff;cursor:pointer}.quantity output{font:500 12px 'IBM Plex Mono';color:#186b5c}.tier-note{width:100%;font-family:'IBM Plex Mono';font-size:11px}.annual{display:block;padding:14px 4px}.physical-config-grid{display:grid;gap:0}.physical-config-grid label{display:grid;grid-template-columns:22px 1fr auto;gap:14px;align-items:center;padding:16px 4px;border-bottom:1px solid #edf0ef;cursor:pointer}.physical-config-grid label span{display:grid}.physical-config-grid label b{font-size:15px}.physical-config-grid label em{font-style:normal;color:#87682b;font-size:13px}.cart{position:sticky;top:105px;border-left:1px solid var(--ink);padding-left:30px}.cart-items{min-height:110px}.empty-cart{color:var(--muted);font-size:14px}.cart-item{display:grid;gap:4px;border-top:1px solid var(--light-line);padding:15px 0}.cart-item b{font-size:15px}.cart-item span{font:12px 'IBM Plex Mono';color:var(--muted)}.cart-item strong{font:500 14px 'IBM Plex Mono'}.cart-physical{display:grid;gap:8px;border-top:1px solid var(--light-line);padding:15px 0;font-size:13px}.cart-physical>b{font:500 11px 'IBM Plex Mono';color:var(--muted)}.cart-physical span{display:flex;justify-content:space-between}.cart-physical em{font-style:normal;color:#87682b}.cart-total,.annual-total{display:grid;gap:4px;border-top:1px solid var(--ink);padding:17px 0}.cart-total span,.annual-total span{font:500 11px 'IBM Plex Mono';color:var(--muted)}.cart-total strong,.annual-total strong{font:600 21px 'IBM Plex Mono'}.annual-total{border-top:0;padding-top:0}.cart .button{width:100%;justify-content:space-between}.button.disabled{background:#d9e0de;color:#7e8785}.cart-help{color:var(--muted);font-size:12px}
.signup-form{display:grid;gap:14px;border-top:1px solid var(--ink);padding-top:20px;margin-top:4px}
.signup-form>.eyebrow{margin:0}
.cart .eyebrow,.signup-form>.eyebrow{color:#186b5c}
.signup-form label{display:grid;gap:6px;font:500 12px 'IBM Plex Mono';color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.signup-form input{font:400 15px 'Public Sans';color:var(--ink);border:1px solid #ccd4d1;background:#fff;padding:10px 12px;text-transform:none;letter-spacing:normal}
.signup-form .slug-input{display:flex;align-items:center;gap:8px;border:1px solid #ccd4d1;background:#fff;padding:0 12px}
.signup-form .slug-input input{border:0;padding:10px 0;flex:1}
.signup-form .slug-input em{font:400 13px 'IBM Plex Mono';font-style:normal;color:var(--muted);text-transform:none}
.signup-error{color:#a8452f;font-size:13px;margin:8px 0 0;padding:10px 12px;border:1px solid #e2b7ab;background:#fdf2ee}
.consent-check{display:flex!important;flex-direction:row;align-items:flex-start;gap:8px;font:400 13px 'Public Sans'!important;color:var(--muted);text-transform:none!important;letter-spacing:normal!important}
.consent-check input{flex:0 0 auto;width:16px;height:16px;margin-top:2px;accent-color:#278b78}
.consent-check a{color:#186b5c;text-decoration:underline}
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:18px clamp(20px,5vw,48px);background:var(--petrol);color:var(--ivory);box-shadow:0 -8px 24px rgba(0,0,0,.18)}
.cookie-banner[hidden]{display:none}
.cookie-banner p{margin:0;font-size:14px;line-height:1.5;max-width:720px}
.cookie-banner a{color:var(--signal-ink);text-decoration:underline}
.cookie-banner-actions{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.cookie-banner-actions .quiet-link{background:none;border:0;color:var(--ivory);font:500 13px 'IBM Plex Mono';text-decoration:underline;cursor:pointer;padding:0}
.cookie-banner-actions .button-small{padding:10px 20px;font-size:13px}
@media (max-width:640px){.cookie-banner{flex-direction:column;align-items:stretch}.cookie-banner-actions{justify-content:space-between}}.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;padding:125px clamp(24px,8vw,140px);border-top:1px solid var(--light-line)}.faq-terminal{border-top:1px solid var(--ink);padding-top:10px}.faq-question{display:block;width:100%;text-align:left;border:0;background:none;padding:13px 0;font-size:16px;cursor:pointer}.faq-question:before{content:'>';margin-right:10px;font:500 14px 'IBM Plex Mono';color:#186b5c}.faq-question.is-active{font-weight:600}.faq-terminal p{border-left:1px solid var(--signal);margin:12px 0 24px;padding:10px 0 10px 16px;color:var(--muted);font-size:15px}.closing{padding:145px clamp(24px,12vw,210px);background:var(--petrol);color:var(--ivory)}.closing h2{font-size:clamp(52px,6.8vw,98px);line-height:.99;margin:10px 0 50px}.closing-links{max-width:760px;border-top:1px solid var(--line)}.closing-links a{display:grid;grid-template-columns:48px 1fr auto;gap:15px;align-items:center;border-bottom:1px solid var(--line);padding:19px 0;font:500 24px Fraunces}.closing-links span{font:11px 'IBM Plex Mono';color:var(--signal-ink)}.closing-links i{font-style:normal;color:var(--signal)}.contact-note{margin-top:42px;color:#bdc9c5;font-size:14px}footer{display:flex;justify-content:space-between;padding:26px clamp(24px,5vw,86px);font-size:12px;color:var(--muted)}
@media(max-width:1000px){.hero-frame,.signal-frame,.ecosystem-frame,.identity-frame,.reputation-frame,.control-frame,.security-frame{grid-template-columns:1fr}.hero-data-map{width:min(90vw,650px);margin:20px auto 0}.signal-rail{width:100%;margin:40px 0}.identity-visual{order:2;height:48vh;min-height:420px}.identity-copy{order:1}.identity-whisper{left:auto;right:8%;bottom:8%}.reputation-flow{height:44vh;min-height:390px}.metric-glimpse{position:static;margin-top:25px}.reputation-whisper{left:auto;right:7%;bottom:7%}.physical-stage{gap:3vw}.touchpoint-console{position:static;width:100%;margin-top:25px}.control-matrix{margin-top:25px}.security-domains{margin-top:30px}.config-layout{grid-template-columns:1fr 330px;gap:48px}}
@media(max-width:720px){.site-header{height:66px}.site-header nav{gap:12px}.site-header nav>a:not(.button){display:none}.scene-progress,.system-status{display:none}.scene,.long-scene{min-height:110vh}.scene-frame{padding:95px 24px 70px;min-height:100vh}.scene h1{font-size:48px}.scene h2{font-size:45px}.hero-frame{display:block}.hero-copy{margin:0}.hero-data-map{height:42vh;margin-top:20px}.data-readout{font-size:10px}.hero-sequence{left:24px;bottom:22px;font-size:10px}.scroll-cue{display:none}.lede{font-size:16px}.signal-frame{display:block}.sequence-labels{left:24px;right:24px;bottom:55px;flex-wrap:wrap}.ecosystem-frame{display:block}.ecosystem-copy{margin:0}.ecosystem-words{margin-top:50px}.ecosystem-words span{grid-template-columns:130px 1fr}.identity-frame{display:block}.identity-visual{height:42vh;min-height:360px;margin-top:30px}.identity-grid{left:28%;width:66%;gap:12px}.identity-whisper{position:static;margin-top:25px}.track-frame{padding-top:95px}.track-map{position:relative;left:auto;right:auto;top:auto;height:52vh;margin-top:45px}.track-source-label{left:7%;font-size:10px}.track-destination-label{left:69%}.track-destination-label strong{font-size:20px}.track-caption{position:static;margin-top:18px;font-size:22px}.track-whisper{position:static;margin-top:25px}.reputation-frame{display:block}.reputation-copy{margin:0}.reputation-flow{height:48vh;margin-top:35px}.metric-glimpse{grid-template-columns:repeat(3,1fr);gap:12px}.metric-glimpse strong{font-size:25px}.reputation-whisper{position:static;margin-top:25px}.pause-frame h2{font-size:50px}.physical-frame{padding-top:95px}.physical-copy{margin:0}.physical-stage{position:relative;left:auto;right:auto;top:auto;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:46px;align-items:end}.nfc-card-object{width:30vw;padding:10px}.nfc-tag-object{width:22vw}.nfc-presenter-object{width:25vw;height:40vw;padding:10px}.physical-route-panel{position:static;width:100%;margin-top:36px}.physical-principle{position:static;margin-top:22px}.control-frame,.security-frame{display:block}.control-copy,.security-copy{margin:0}.control-matrix{overflow-x:auto}.touchpoint-console{width:100%}.security-domains{grid-template-columns:1fr;gap:18px}.security-labels{position:static;margin-top:24px}.config-transition{min-height:650px;padding:110px 24px}.intent-picker{grid-template-columns:1fr}.intent-picker a:nth-child(odd),.intent-picker a:nth-child(even){padding-left:0;padding-right:0;border-left:0}.configurator,.faq,.closing{padding-left:24px;padding-right:24px}.config-layout,.faq{grid-template-columns:1fr}.cart{position:static;border-left:0;border-top:1px solid var(--ink);padding:24px 0 0}.choice{grid-template-columns:22px 1fr;row-gap:4px}.choice strong{font-size:12px;grid-column:2;text-align:left}.plan-summary{overflow-x:hidden;white-space:normal}.faq{gap:34px}.closing-links a{font-size:21px}footer{flex-wrap:wrap;gap:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.signal-rail b{animation:none}.physical-object,.identity-grid span,.track-destination-label,.route-line,.track-target{transition:none!important}}

/* ===== V6 motion/premium refinement ===== */
:root{--v6-soft:rgba(244,239,230,.08);--v6-structure:rgba(244,239,230,.30);--v6-active:#35b39a}
.site-header{transition:background .45s var(--ease),height .45s var(--ease),border-color .45s var(--ease)}
.site-header.story-mode{height:64px;background:linear-gradient(180deg,rgba(22,29,32,.92),rgba(22,29,32,.74) 70%,rgba(22,29,32,.58));backdrop-filter:blur(10px)}
.site-header.story-mode nav>a:not(.button){opacity:.48;transition:opacity .25s,color .25s}.site-header.story-mode nav>a:not(.button):hover{opacity:1}
.long-scene{min-height:175vh}.physical-scene{min-height:220vh}.insight-scene{min-height:150vh}
.scene-frame{isolation:isolate}.scene-frame:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 0,transparent 52%,rgba(22,29,32,.12) 84%,rgba(22,29,32,.38) 100%);z-index:-1}
.scene-copy h1,.scene-copy h2,.track-copy h2,.physical-copy h2,.insight-copy h2{clip-path:inset(0 0 0 0);transform:translateY(14px);opacity:.65;transition:transform .9s var(--ease),opacity .9s var(--ease)}
.scene.is-current .scene-copy h1,.scene.is-current .scene-copy h2,.scene.is-current .track-copy h2,.scene.is-current .physical-copy h2,.scene.is-current .insight-copy h2{transform:none;opacity:1}

/* Signal: one clear motion, no wallpaper */
.signal-frame{grid-template-columns:.82fr 1.18fr}.signal-rail{height:150px;align-self:center}.signal-rail>i{left:2%;right:3%;background:linear-gradient(90deg,rgba(53,179,154,.08),var(--signal),rgba(143,215,200,.12))}.signal-origin{width:13px;height:13px;box-shadow:0 0 0 12px rgba(53,179,154,.10),0 0 34px rgba(53,179,154,.22)}.signal-rail b{width:7px;height:7px;box-shadow:0 0 14px rgba(244,239,230,.65)}.sequence-labels{bottom:12vh}

/* Ecosystem: quieter, product typography does the work */
.ecosystem-words{position:relative}.ecosystem-words:before{content:'';position:absolute;left:-54px;top:12%;bottom:12%;width:1px;background:linear-gradient(transparent,rgba(53,179,154,.48),transparent)}
.ecosystem-words span{padding:25px 0;border-bottom-color:rgba(244,239,230,.13)}
.ecosystem-words span:hover b{color:var(--signal-ink)}

/* Identity: smaller data points and progressive states */
.identity-visual{height:62vh}.identity-grid{left:34%;top:22%;width:58%;height:54%;grid-template-columns:repeat(6,1fr);gap:24px;align-content:center;justify-items:center}
.identity-grid span{width:16px;height:16px;aspect-ratio:auto;border-radius:50%;background:rgba(244,239,230,.34);border:1px solid rgba(244,239,230,.12);transform:scale(.45);opacity:.10;transition:transform .7s var(--ease),opacity .7s var(--ease),background .7s var(--ease),box-shadow .7s var(--ease)}
.identity-grid span:nth-child(4n+1){background:rgba(53,179,154,.62)}
.identity-grid.stage-1 span:nth-child(-n+5){transform:scale(.72);opacity:.72}
.identity-grid.stage-2 span:nth-child(-n+18){transform:scale(.85);opacity:.74}
.identity-grid.stage-3 span{transform:scale(1);opacity:.78}.identity-grid.stage-3 span:nth-child(4n+1){box-shadow:0 0 0 5px rgba(53,179,154,.05)}
.identity-person{transition:opacity .6s var(--ease),transform .7s var(--ease)}.identity-scene[data-story-stage="3"] .identity-person{opacity:.25;transform:scale(.72)}

/* Track: one route dominates; pulse travels on the same SVG geometry */
.track-map{top:38%;height:50%}.track-grid{opacity:.42}.route-line{stroke:rgba(143,215,200,.075);stroke-width:1;filter:none;stroke-dasharray:1;stroke-dashoffset:0}.route-line.is-active{stroke:var(--signal);stroke-width:2.35;filter:drop-shadow(0 0 5px rgba(53,179,154,.42));animation:routeDraw .9s var(--ease) both}@keyframes routeDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.track-target{opacity:.24}.track-target.is-active{opacity:1}.track-destination-label{opacity:.12;filter:blur(.25px);transition:opacity .55s var(--ease),transform .55s var(--ease),filter .55s}.track-destination-label.is-active{opacity:1;filter:none;transform:translateX(0)}.track-pulse{opacity:0}.track-pulse.is-moving{opacity:1}
.track-caption{bottom:8.5%}.track-whisper{opacity:.72}

/* Reputation: clean paths; particles are accents, not the path */
.reputation-flow{height:58vh}.rep-line{height:1px;background:linear-gradient(90deg,rgba(53,179,154,.18),rgba(53,179,154,.82),rgba(143,215,200,.16));opacity:.68}.rep-node{background:rgba(22,29,32,.86);border-color:rgba(244,239,230,.16)}.rep-core{border-color:rgba(53,179,154,.52);box-shadow:0 0 30px rgba(53,179,154,.06)}
.metric-glimpse{gap:32px}.metric-glimpse strong{letter-spacing:-.04em}

/* Insight: replace lone point with convergence + ordered matrix */
.insight-frame{display:grid;grid-template-columns:.82fr 1.18fr;gap:8vw}.insight-copy{margin-left:clamp(0px,5vw,95px);align-self:center}.insight-copy>p:last-child{max-width:500px;color:#c0ccc8;font-size:17px}.insight-convergence{position:relative;height:62vh;min-height:500px;align-self:center}.insight-source{position:absolute;left:4%;width:150px;color:#90a29e;font:500 11px 'IBM Plex Mono';letter-spacing:.07em}.insight-source span{display:block;margin-bottom:7px}.insight-source i{display:block;height:1px;width:0;background:linear-gradient(90deg,rgba(143,215,200,.12),var(--signal));transition:width 1.1s var(--ease)}.source-identity{top:19%}.source-track{top:37%}.source-reputation{top:55%}.source-physical{top:73%}.insight-core{position:absolute;left:48%;top:50%;width:14px;height:14px;border-radius:50%;background:var(--signal);transform:translate(-50%,-50%) scale(.3);opacity:.2;box-shadow:0 0 0 0 rgba(53,179,154,.18);transition:transform .8s var(--ease),opacity .8s var(--ease),box-shadow .8s var(--ease)}.insight-matrix{position:absolute;right:5%;top:31%;width:33%;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;opacity:.08;transform:translateX(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}.insight-matrix i{display:block;width:6px;height:6px;border-radius:50%;background:rgba(244,239,230,.74)}.insight-scene.is-current .insight-source i{width:clamp(160px,24vw,390px)}.insight-scene.is-current .insight-core{transform:translate(-50%,-50%) scale(1);opacity:1;box-shadow:0 0 0 13px rgba(53,179,154,.07),0 0 34px rgba(53,179,154,.15)}.insight-scene.is-current .insight-matrix{opacity:.75;transform:none}.insight-caption{position:absolute;left:52%;bottom:12%;display:flex;gap:12px;color:#82938f;font-size:11px}.insight-caption i{font-style:normal;color:var(--signal)}.insight-caption b{color:var(--signal-ink);font-weight:500}

/* Physical: clearer objects, presenter has recognizable QR and base */
.physical-copy{max-width:790px}.physical-stage{top:42%;gap:8vw}.physical-object{opacity:.22;filter:saturate(.72);transform:translateY(24px) scale(.88);transition:opacity .7s var(--ease),transform .8s var(--ease),filter .7s}.physical-object.is-active{opacity:1;filter:none;transform:translateY(0) scale(1.04)}.physical-stage.show-family .physical-object{opacity:.82;filter:none;transform:none}.physical-stage.show-family .physical-object.is-active{opacity:1;transform:scale(1.04)}
.nfc-card-object,.nfc-presenter-object{background:linear-gradient(145deg,#fff 0%,#f5f5f1 100%);box-shadow:0 34px 82px rgba(0,0,0,.43),0 0 0 1px rgba(255,255,255,.55) inset}.nfc-tag-object{background:linear-gradient(145deg,#fff,#f1f1ed);box-shadow:0 28px 60px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.6) inset}.nfc-presenter-object{justify-content:flex-start;align-items:center;padding:34px 28px 28px;gap:26px;transform:perspective(900px) rotateY(-7deg) rotateX(1deg)}.nfc-presenter-object:before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(112deg,rgba(255,255,255,.42),transparent 26%,transparent 74%,rgba(0,0,0,.035));pointer-events:none}.nfc-presenter-object:after{left:-9%;right:-3%;bottom:-17px;height:21px;border-radius:2px;background:linear-gradient(180deg,#efefea,#cfcfc9);transform:perspective(400px) rotateX(58deg);box-shadow:0 16px 32px rgba(0,0,0,.45)}.nfc-presenter-object>b{margin:0;font-size:12px;letter-spacing:.08em;color:#303638}.presenter-qr{position:relative;display:grid;grid-template-columns:repeat(3,13px);grid-template-rows:repeat(3,13px);gap:4px;width:auto;height:auto;padding:9px;border:1px solid #d7d7d0;background:#fff}.presenter-qr i{display:block;width:13px;height:13px;background:#22292b;color:transparent}.presenter-qr i:nth-child(2),.presenter-qr i:nth-child(4),.presenter-qr i:nth-child(6),.presenter-qr i:nth-child(8){opacity:.18}.presenter-qr i:nth-child(5){transform:scale(.58)}.presenter-nfc{font:600 16px 'IBM Plex Mono';color:#b8934b;letter-spacing:-.12em}.physical-route-panel{background:linear-gradient(180deg,rgba(22,29,32,.34),rgba(22,29,32,.08));backdrop-filter:blur(4px)}

/* Control: order is the visual; no particle cloud */
.control-frame{grid-template-columns:.72fr 1.28fr}.control-matrix{align-self:center;justify-self:start;width:min(100%,600px);gap:24px}.control-matrix div{position:relative;gap:12px;padding:8px 0}.control-matrix div:after{content:'';position:absolute;left:126px;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(244,239,230,.11),transparent)}.control-matrix span{width:118px;font-size:11px}.control-matrix b{width:9px;height:9px;background:rgba(244,239,230,.34);transition:transform .5s var(--ease),background .5s}.control-scene.is-current .control-matrix b{animation:controlSettle .75s var(--ease) both}.control-matrix div:nth-child(1) b{animation-delay:.05s}.control-matrix div:nth-child(2) b{animation-delay:.12s}.control-matrix div:nth-child(3) b{animation-delay:.19s}.control-matrix div:nth-child(4) b{animation-delay:.26s}@keyframes controlSettle{from{transform:translate(var(--scatter-x,10px),var(--scatter-y,-8px));opacity:.15}to{transform:none;opacity:1}}
.touchpoint-console{background:rgba(22,29,32,.46);backdrop-filter:blur(5px);padding:18px 0 0}

/* Security: zones without UI-box look */
.security-domains{position:relative;gap:0;padding:45px 0}.security-domains:after{content:'';position:absolute;left:50%;top:12%;bottom:12%;width:1px;background:linear-gradient(transparent,rgba(53,179,154,.55),transparent)}.security-domains>div{min-height:300px;border:0;padding:34px;grid-template-columns:repeat(3,1fr);background:radial-gradient(circle at 50% 50%,rgba(53,179,154,.035),transparent 62%)}.security-domains>div:first-child{padding-right:70px}.security-domains>div:last-child{padding-left:70px}.security-domains span{left:28px;top:20px}.security-domains i{width:10px;height:10px;background:rgba(244,239,230,.36)}.security-labels{gap:24px}.security-labels span{border:0;padding:0;color:#9fb0ac;font-size:11px;position:relative}.security-labels span:before{content:'';display:inline-block;width:14px;height:1px;background:var(--signal);margin:0 8px 3px 0}

/* Dark to light: cleaner ordered matrix */
.config-transition{min-height:108vh;display:flex;align-items:center;background:linear-gradient(180deg,var(--petrol) 0%,#20292d 23%,#e8ecea 72%,#fff 100%)}.resolve-field{opacity:.18;background-size:28px 28px;transform:scale(1.04);transition:transform 1.5s var(--ease),opacity 1.5s var(--ease)}.config-transition.is-current .resolve-field{transform:scale(1);opacity:.34}

@media(max-width:1000px){.insight-frame{grid-template-columns:1fr}.insight-copy{margin:0}.insight-convergence{height:45vh;min-height:390px}.insight-caption{left:auto;right:7%;bottom:8%}.physical-stage{gap:3vw}}
@media(max-width:720px){.site-header.story-mode{height:60px}.long-scene{min-height:145vh}.physical-scene{min-height:185vh}.insight-frame{display:block}.insight-copy{margin:0}.insight-convergence{height:46vh;min-height:360px;margin-top:28px}.insight-source{width:105px;font-size:9px}.source-identity{top:14%}.source-track{top:34%}.source-reputation{top:54%}.source-physical{top:74%}.insight-core{left:47%}.insight-matrix{right:0;width:34%;gap:8px}.insight-scene.is-current .insight-source i{width:34vw}.insight-caption{position:static;margin-top:10px;justify-content:center}.identity-grid{gap:13px}.identity-grid span{width:11px;height:11px}.physical-stage{grid-template-columns:1fr 1fr 1fr}.nfc-presenter-object{padding:18px 10px 16px;gap:12px}.presenter-qr{grid-template-columns:repeat(3,8px);grid-template-rows:repeat(3,8px);gap:3px;padding:6px}.presenter-qr i{width:8px;height:8px}.security-domains>div:first-child,.security-domains>div:last-child{padding:42px 20px}.security-domains:after{display:none}}
.presenter-qr i{align-self:auto;font:inherit;color:transparent}

/* V7 — conversion, support and compliance refinement */
.configurator{padding:96px 0 108px;background:#fff}
.config-shell{width:min(92vw,1920px);margin:0 auto}
.config-head{margin-bottom:48px;max-width:760px}
.config-head h2{font-size:clamp(48px,4.8vw,78px)}
.config-layout{grid-template-columns:minmax(0,1fr) minmax(340px,410px);gap:clamp(48px,5vw,92px)}
.plan-group{padding:20px 0 28px}
.plan-group legend{font-size:clamp(28px,2vw,34px)}
.choice,.physical-config-grid label{padding:15px 4px}
.cart{top:96px}

.faq{display:block;padding:0;background:#fff;border-top:1px solid var(--light-line)}
.faq-shell{width:min(92vw,1760px);margin:0 auto;padding:100px 0 106px;display:grid;grid-template-columns:minmax(340px,.72fr) minmax(620px,1.28fr);gap:clamp(60px,7vw,130px);align-items:start}
.faq-intro{max-width:560px;position:sticky;top:110px}
.faq-intro h2{font-size:clamp(46px,4.5vw,76px);line-height:1.02;margin:10px 0 20px}
.faq-intro>p:last-child{font-size:16px;color:var(--muted);max-width:460px}
.faq-terminal{display:grid;grid-template-columns:minmax(310px,.9fr) minmax(340px,1.1fr);column-gap:42px;align-items:start;border-top:1px solid var(--ink);padding-top:12px}
.faq-question{grid-column:1;position:relative;padding:14px 34px 14px 0;font-size:16px;border-bottom:1px solid #edf0ef;transition:color .2s,padding-left .2s}
.faq-question:before{content:'>';display:inline-block;margin-right:11px;font:500 14px 'IBM Plex Mono';color:#186b5c;transition:transform .2s}
.faq-question:hover,.faq-question.is-active{color:#186b5c;padding-left:6px}
.faq-question.is-active:before{transform:translateX(3px)}
.faq-answer-panel{grid-column:2;grid-row:1/span 10;position:sticky;top:110px;min-height:280px;border-left:1px solid var(--signal);padding:7px 0 0 28px}
.faq-answer-panel>span{font-size:11px;color:#186b5c;letter-spacing:.08em}
.faq-answer-panel p{border:0;margin:26px 0 0;padding:0;font-size:clamp(18px,1.2vw,23px);line-height:1.55;color:#45514e;max-width:560px}

.support-section{background:var(--petrol);color:var(--ivory);padding:120px 0;border-top:1px solid #ffffff12}
.support-shell{width:min(92vw,1760px);margin:0 auto;display:grid;grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr);gap:clamp(70px,8vw,150px);align-items:center}
.support-copy{max-width:650px}
.support-copy .eyebrow{color:var(--signal-ink)}
.support-copy h2{font:600 clamp(48px,4.8vw,78px)/1.02 Fraunces,Georgia,serif;letter-spacing:-.052em;margin:10px 0 24px}
.support-copy h2 em{font-weight:500;color:var(--signal-ink)}
.support-copy>p{font-size:17px;color:#c4cfcc;max-width:570px}
.support-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:34px}
.whatsapp-button{display:inline-flex;align-items:center;gap:13px;min-height:58px;padding:10px 18px 10px 14px;background:var(--signal);color:#071612;border-radius:3px;font-size:14px;font-weight:700}
.whatsapp-button svg{width:27px;height:27px;fill:currentColor}
.whatsapp-button span{display:grid;gap:1px}.whatsapp-button small{font-size:10px;font-weight:500;opacity:.8}
.support-link{display:inline-flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid #8fd7c860;color:var(--signal-ink);font-size:14px}.support-link i{font-style:normal}
.support-note{display:flex;gap:10px;margin-top:28px;font-size:10px;letter-spacing:.08em;color:#82948f}.support-note i{font-style:normal;color:var(--signal)}
.contact-form{background:var(--raised);border:1px solid #ffffff18;padding:clamp(26px,3vw,46px);box-shadow:20px 24px 0 rgba(0,0,0,.14)}
.form-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid #ffffff18}.form-head span{font-size:11px;color:var(--signal-ink)}.form-head p{margin:0;color:#c9d2d0;font-size:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:24px}
.form-grid label{display:grid;gap:8px}.form-grid label>span{font-size:12px;color:#aebbb8}.form-grid label>span small{color:#82918d}.form-wide{grid-column:1/-1}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #ffffff20;background:#161d20;color:var(--ivory);padding:13px 14px;border-radius:2px;outline:none;font:400 14px 'Public Sans',sans-serif;transition:border-color .2s,box-shadow .2s}.contact-form textarea{resize:vertical;min-height:110px}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:#35b39a90;box-shadow:0 0 0 3px #35b39a10}.contact-form option{background:#161d20;color:var(--ivory)}
.consent-row{display:grid;grid-template-columns:18px 1fr;gap:10px;margin:20px 0;color:#9fafab;font-size:12px}.consent-row input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--signal)}
.form-submit{min-width:190px}.form-status{margin:14px 0 0;color:#7f918d;font-size:11px}

.closing{padding:120px 0;background:#11181b;color:var(--ivory);border-top:1px solid #ffffff10}
.closing-shell{width:min(92vw,1760px);margin:0 auto}
.closing h2{font-size:clamp(54px,6.4vw,96px);max-width:920px;margin:10px 0 46px}
.closing-links{max-width:800px}

.site-footer{display:block;background:#0c1113;color:#9caaa7;padding:0;font-size:13px}
.footer-shell{width:min(92vw,1760px);margin:0 auto;padding:78px 0 58px;display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:clamp(48px,5vw,90px)}
.footer-brand .wordmark{display:block;color:var(--ivory);margin-bottom:18px}.footer-brand p{max-width:330px;color:#84938f;line-height:1.6}.footer-primary{display:inline-block;margin-top:18px;color:var(--signal-ink);font-weight:600}
.footer-column{display:grid;align-content:start;gap:11px}.footer-column h3{margin:0 0 8px;color:var(--ivory);font-size:13px}.footer-column a,.footer-legal-link{width:max-content;max-width:100%;padding:0;border:0;background:none;color:#8f9f9b;text-align:left;font:400 13px/1.5 'Public Sans',sans-serif;cursor:pointer}.footer-column a:hover,.footer-legal-link:hover{color:var(--signal-ink)}
.provider-info{width:min(92vw,1760px);margin:0 auto;padding:32px 0;border-top:1px solid #ffffff12;display:grid;grid-template-columns:.8fr 2.2fr;gap:50px}.provider-info>div>span{font-size:10px;color:var(--signal-ink);letter-spacing:.08em}.provider-info>div>p{max-width:390px;color:#73827f;font-size:12px;margin-top:10px}.provider-info dl{margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}.provider-info dl div{display:grid;gap:6px}.provider-info dt{font-size:10px;color:#717f7c}.provider-info dd{margin:0;color:#bac5c2;font-size:12px}.provider-info dd:has(+ *){color:#bac5c2}
.footer-bottom{width:min(92vw,1760px);margin:0 auto;padding:22px 0 28px;border-top:1px solid #ffffff0d;display:flex;gap:26px;align-items:center;flex-wrap:wrap;color:#717f7b;font-size:11px}.footer-bottom a:hover{color:var(--signal-ink)}

.floating-whatsapp{position:fixed;right:28px;bottom:28px;z-index:80;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--signal);color:#071612;box-shadow:0 12px 38px rgba(0,0,0,.28);transition:transform .2s,box-shadow .2s}.floating-whatsapp:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(0,0,0,.34)}.floating-whatsapp svg{width:27px;height:27px;fill:currentColor}.floating-whatsapp span{position:absolute;right:64px;white-space:nowrap;padding:7px 9px;background:#20292d;color:#f4efe6;font-size:11px;border:1px solid #ffffff14;opacity:0;transform:translateX(8px);pointer-events:none;transition:.2s}.floating-whatsapp:hover span{opacity:1;transform:none}

.legal-dialog{width:min(560px,calc(100vw - 36px));border:1px solid #d6ddda;padding:34px;background:#fff;color:var(--ink);box-shadow:0 28px 100px rgba(0,0,0,.28)}.legal-dialog::backdrop{background:rgba(12,17,19,.66);backdrop-filter:blur(4px)}.legal-dialog h2{font:600 38px/1 Fraunces;margin:10px 0 18px}.legal-dialog p:not(.eyebrow){color:var(--muted)}.dialog-close{position:absolute;right:17px;top:12px;border:0;background:none;font-size:28px;cursor:pointer;color:#4d5b58}.legal-dialog .button{margin-top:12px}

@media(min-width:1900px){
  .config-shell,.faq-shell,.support-shell,.closing-shell,.footer-shell,.provider-info,.footer-bottom{width:min(86vw,2100px)}
  .config-layout{grid-template-columns:minmax(0,1fr) 440px}
  .choice b,.physical-config-grid label b{font-size:17px}.choice small,.annual,.physical-choice small,.tier-note{font-size:14px}.choice strong{font-size:15px}
  .faq-question{font-size:18px}.faq-answer-panel p{font-size:24px}
}

@media(max-width:980px){
  .config-layout,.faq-shell,.support-shell{grid-template-columns:1fr}.faq-intro,.faq-answer-panel{position:static}.faq-terminal{grid-template-columns:1fr}.faq-question{grid-column:1}.faq-answer-panel{grid-column:1;grid-row:auto;min-height:0;margin-top:24px}.support-copy{max-width:none}.provider-info{grid-template-columns:1fr}.provider-info dl{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-shell{grid-template-columns:1fr 1fr}
}

@media(max-width:720px){
  .configurator{padding:78px 0 86px}.config-shell,.faq-shell,.support-shell,.closing-shell,.footer-shell,.provider-info,.footer-bottom{width:calc(100% - 40px)}
  .config-head{margin-bottom:36px}.config-head h2{font-size:46px}.config-layout{gap:34px}.cart{position:static;border-left:0;border-top:1px solid var(--ink);padding:22px 0 0}
  .faq-shell{padding:78px 0}.faq-intro h2{font-size:45px}.faq-terminal{column-gap:0}.faq-question{font-size:15px}.faq-answer-panel p{font-size:18px}
  .support-section{padding:84px 0}.support-copy h2{font-size:46px}.form-grid{grid-template-columns:1fr}.form-wide{grid-column:auto}.form-head{display:grid}.contact-form{box-shadow:none;padding:24px}
  .closing{padding:88px 0}.closing h2{font-size:52px}.footer-shell{grid-template-columns:1fr;padding:60px 0 42px}.provider-info dl{grid-template-columns:1fr}.floating-whatsapp{right:18px;bottom:18px}
}
.cart{background:#f7f8f7;border-left:0;padding:26px 28px;min-height:390px;box-shadow:0 0 0 1px #e3e7e5 inset}
.cart-items{min-height:150px}.empty-cart{color:var(--muted);font-size:14px}.empty-cart>p{margin:18px 0 24px;max-width:270px}.empty-cart-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:18px 0;border-top:1px solid #dce1e0;border-bottom:1px solid #dce1e0;color:#71807c;font-size:10px}.empty-cart-flow i{font-style:normal;color:#35b39a}.empty-cart>small{display:block;margin-top:18px;max-width:280px;line-height:1.55;color:#7c8986}.cart .eyebrow{margin-bottom:0}
@media(max-width:980px){.cart{min-height:0}}

/* V8 — unified editorial shell + progressive data activation */
:root{--shell-max:1720px;--shell-gap:48px}

/* Full-bleed motion, bounded editorial content. */
.scene-frame{width:min(calc(100% - var(--shell-gap)),var(--shell-max));margin-inline:auto;padding-left:0;padding-right:0}
.site-header{padding-inline:max(24px,calc((100vw - var(--shell-max))/2))}
.config-transition{padding-left:max(24px,calc((100vw - var(--shell-max))/2));padding-right:max(24px,calc((100vw - var(--shell-max))/2))}
.config-shell,.faq-shell,.support-shell,.closing-shell,.footer-shell,.provider-info,.footer-bottom{width:min(calc(100% - var(--shell-gap)),var(--shell-max))}
.hero-copy,.ecosystem-copy,.narrow-copy,.identity-copy,.track-copy,.reputation-copy,.physical-copy,.control-copy,.security-copy,.insight-copy{margin-left:0}
.scene-copy,.track-copy,.physical-copy,.ecosystem-copy{max-width:720px}
.hero-copy{max-width:820px}

/* Header becomes contextual while the story is running. */
.header-story-label{position:absolute;left:50%;transform:translateX(-50%) translateY(-5px);font-size:11px;letter-spacing:.09em;color:var(--signal-ink);opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none}
.site-header.story-mode .header-story-label{opacity:1;transform:translateX(-50%) translateY(0)}
.site-header.story-mode nav>a:not(.button){opacity:.18}
.site-header.story-mode nav>a[href="#configurar"]{opacity:.8;color:var(--signal-ink)}

/* One visual signal only: the DOM rail is the event; canvas stays ambient. */
.signal-frame{grid-template-columns:.82fr 1.18fr;gap:clamp(50px,6vw,110px)}
.signal-rail{width:min(780px,100%);margin-left:0}
.signal-rail:after{content:'';position:absolute;left:3%;right:3%;top:50%;height:50px;transform:translateY(-50%);background:radial-gradient(ellipse at 48% 50%,rgba(53,179,154,.055),transparent 58%);pointer-events:none}

/* The story gains information, not noise. Passive geometry gets quieter as structure gets denser. */
.data-grain{opacity:.026}
.scene-frame:after{opacity:.62}

/* Slightly narrower text measure on ultrawide screens. */
@media(min-width:1900px){
  :root{--shell-gap:96px}
  .scene h1{font-size:clamp(72px,4.6vw,104px)}
  .scene h2{font-size:clamp(62px,4vw,88px)}
  .scene-copy>p:not(.eyebrow),.track-copy>p:not(.eyebrow),.physical-copy>p:not(.eyebrow){max-width:560px}
  .config-layout{grid-template-columns:minmax(0,1fr) 420px}
}

/* Contextual CTA keeps conversion available without fighting the narrative. */
.story-cta{position:fixed;z-index:42;left:max(24px,calc((100vw - var(--shell-max))/2));bottom:28px;display:flex;align-items:center;gap:12px;padding:8px 0;color:#91a39f;font-size:10px;letter-spacing:.09em;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease),color .2s}
.story-cta:before{content:'';width:24px;height:1px;background:var(--signal)}
.story-cta b{font-size:14px;color:var(--signal);font-weight:500}
body[data-story-state]:not([data-story-state="hero"]) .story-cta{opacity:.88;transform:none;pointer-events:auto}
body[data-story-state="security"] .story-cta,body[data-story-state="pause"] .story-cta{opacity:.65}
.story-cta:hover{color:var(--ivory)}
body.config-zone .story-cta{opacity:0!important;pointer-events:none!important}

/* Ordered progression: the closer we are to control, the calmer the canvas should feel. */
body[data-story-state="control"] .data-grain,body[data-story-state="security"] .data-grain{opacity:.012}
body[data-story-state="control"] .scene-frame:after,body[data-story-state="security"] .scene-frame:after{opacity:.28}

/* Dark-to-light transition visually resolves the active data into an ordered field. */
.resolve-field{background-image:radial-gradient(rgba(117,133,128,.42) 1px,transparent 1.2px);background-size:28px 28px}
.resolve-field:before{content:'';position:absolute;inset:18% 11% 26%;background-image:radial-gradient(rgba(53,179,154,.72) 1.25px,transparent 1.5px);background-size:28px 28px;opacity:.12;mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 84%,transparent 100%);transition:opacity 1.3s var(--ease)}
.config-transition.is-current .resolve-field:before{opacity:.38}

/* Contact: WhatsApp is the conversational CTA; the form is already immediately adjacent. */
.support-actions{margin-top:34px}
.floating-whatsapp{bottom:104px}

/* FAQ/contact preserve the same editorial width and a tighter reading measure. */
.faq-answer-panel p{max-width:620px}
.support-copy{max-width:620px}
.contact-form{max-width:820px;justify-self:end;width:100%}

@media(max-width:980px){
  :root{--shell-gap:40px}
  .header-story-label{display:none}
  .story-cta{left:20px;bottom:20px}
  .floating-whatsapp{bottom:88px}
  .contact-form{max-width:none;justify-self:stretch}
}
@media(max-width:720px){
  :root{--shell-gap:40px}
  .scene-frame,.config-shell,.faq-shell,.support-shell,.closing-shell,.footer-shell,.provider-info,.footer-bottom{width:calc(100% - 40px)}
  .site-header{padding-inline:20px}
  .config-transition{padding-inline:20px}
  .story-cta{display:none}
  .floating-whatsapp{right:18px;bottom:82px}
}

/* V9 — explanatory scrollytelling + product data context */
.ecosystem-scene{min-height:168vh}
.ecosystem-copy{align-self:center}
.ecosystem-lede{max-width:520px;margin-top:26px;color:#b9c7c3;font-size:16px}
.ecosystem-product{position:relative;opacity:.24;transform:translateX(18px);transition:opacity .55s var(--ease),transform .55s var(--ease),border-color .55s var(--ease)}
.ecosystem-product.is-past{opacity:.48;transform:none}
.ecosystem-product.is-active{opacity:1;transform:none;border-bottom-color:rgba(143,215,200,.55)}
.ecosystem-product b{transition:color .4s var(--ease)}
.ecosystem-product.is-active b{color:var(--signal-ink)}
.ecosystem-product em{max-width:420px;line-height:1.45;transition:color .4s var(--ease)}
.ecosystem-product strong{grid-column:2;display:block;margin-top:11px;color:#6f817d;font-size:9px;line-height:1.6;letter-spacing:.08em;font-weight:500;opacity:0;transform:translateY(4px);transition:opacity .4s var(--ease),transform .4s var(--ease),color .4s var(--ease)}
.ecosystem-product.is-active strong{opacity:1;transform:none;color:var(--signal-ink)}
.ecosystem-progress{position:absolute;right:0;bottom:10%;display:grid;grid-template-columns:auto 120px auto;align-items:center;gap:10px;color:#72837f;font-size:9px}
.ecosystem-progress i{height:1px;background:#ffffff16;position:relative;overflow:hidden}
.ecosystem-progress i:after{content:'';position:absolute;inset:0 auto 0 0;width:var(--ecosystem-progress,12%);background:var(--signal);transition:width .12s linear}

/* Each module reveals the type of information it contributes before convergence. */
.insight-scene{min-height:192vh}
.insight-convergence{height:64vh;min-height:520px}
.insight-source{width:300px;opacity:.18;transition:opacity .45s var(--ease),transform .45s var(--ease);transform:translateX(-8px)}
.insight-source span{color:#91a29e;transition:color .35s var(--ease)}
.insight-source small{display:block;max-width:255px;color:#71837f;font:500 9px/1.55 'IBM Plex Mono',monospace;letter-spacing:.055em;transition:color .35s var(--ease)}
.insight-source i{margin-top:8px}
.insight-scene.is-current .insight-source i{width:0}
.insight-source.is-past{opacity:.46;transform:none}
.insight-source.is-active{opacity:1;transform:none}
.insight-source.is-active span,.insight-source.is-active small{color:var(--signal-ink)}
.insight-source.is-active i{width:clamp(150px,20vw,340px)!important}
.insight-source.is-past i{width:clamp(80px,12vw,190px)!important;background:linear-gradient(90deg,rgba(143,215,200,.08),rgba(53,179,154,.34))}
.insight-scene:not([data-insight-stage="4"]) .insight-matrix,.insight-scene:not([data-insight-stage="4"]) .insight-matrix-label{opacity:.08!important;transform:translateX(28px)!important}
.insight-scene[data-insight-stage="4"] .insight-source{opacity:.38;transform:none}
.insight-scene[data-insight-stage="4"] .insight-source i{width:clamp(110px,15vw,245px)!important}
.insight-scene[data-insight-stage="4"] .insight-core{transform:translate(-50%,-50%) scale(1);opacity:1;box-shadow:0 0 0 13px rgba(53,179,154,.07),0 0 34px rgba(53,179,154,.15)}
.insight-scene[data-insight-stage="4"] .insight-matrix,.insight-scene[data-insight-stage="4"] .insight-matrix-label{opacity:.78!important;transform:none!important}
/* La cuadrícula se quedaba casi invisible (8% opacidad) hasta la última
   etapa sin ninguna pista de qué era — leía como un elemento roto, no como
   "ya se organizó todo en una matriz" (bug real reportado). Esta etiqueta
   se revela exactamente junto con ella, no antes. */
.insight-matrix-label{position:absolute;right:5%;top:24%;width:33%;text-align:right;color:#90a29e;font-size:10px;letter-spacing:.09em;opacity:.08;transform:translateX(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}

/* Transition now explains the next action instead of speaking abstractly. */
.transition-copy{max-width:1120px}
.config-transition h2{max-width:1050px}
.config-transition p{max-width:690px}
.intent-picker a{grid-template-columns:45px minmax(0,1fr) auto;align-items:start}
.intent-picker a b{display:block;font:500 19px/1.15 Fraunces,Georgia,serif}
.intent-picker a small{display:block;margin-top:5px;color:#6b7975;font:400 12px/1.45 'Public Sans',sans-serif}
.intent-picker a i{align-self:center}

/* Small value reminders inside the configurator. */
.plan-summary{display:flex;flex-wrap:wrap;gap:8px 16px;padding:13px 4px 0;color:#5c6966;font-size:9px;letter-spacing:.065em}
.plan-summary span{position:relative;padding-left:12px}
.plan-summary span:before{content:'';position:absolute;left:0;top:50%;width:4px;height:4px;border-radius:50%;background:#35b39a;transform:translateY(-50%)}

@media(max-width:1000px){
  .ecosystem-product strong{grid-column:2}.ecosystem-progress{display:none}
  .insight-source{width:230px}.insight-source small{max-width:200px;font-size:8px}
}
@media(max-width:720px){
  .ecosystem-scene{min-height:150vh}.ecosystem-lede{font-size:15px}.ecosystem-product{opacity:.34}.ecosystem-product strong{grid-column:1/-1;margin-left:130px;font-size:8px}
  .insight-scene{min-height:180vh}.insight-source{width:130px}.insight-source small{max-width:125px;font-size:7px;line-height:1.4}.insight-source.is-active i{width:32vw!important}.insight-source.is-past i{width:20vw!important}
  .intent-picker a b{font-size:18px}.intent-picker a small{font-size:11px}.plan-summary{font-size:8px;gap:7px 12px}
}

/* V9.2 — iOS/mobile motion reliability */
@media (max-width:720px){
  /* Safari iOS can prevent sticky descendants from behaving correctly when an ancestor clips overflow. */
  html,body{max-width:100%;overflow-x:hidden}
  .data-experience{overflow:visible!important}
  .data-experience canvas{height:100svh;min-height:100svh;transform:translateZ(0);-webkit-transform:translateZ(0)}
  .scene-frame{position:-webkit-sticky;position:sticky;top:0;min-height:100svh;height:100svh;padding-top:max(78px,calc(env(safe-area-inset-top) + 66px));padding-bottom:max(42px,calc(env(safe-area-inset-bottom) + 28px));overflow:hidden;transform:translateZ(0);-webkit-transform:translateZ(0)}

  /* Give scroll-led stories enough physical distance to reveal every state on a phone. */
  .hero-scene{min-height:118svh}
  .signal-scene{min-height:142svh}
  .ecosystem-scene{min-height:275svh}
  .identity-scene{min-height:225svh}
  .track-scene{min-height:205svh}
  .reputation-scene{min-height:205svh}
  .insight-scene{min-height:325svh}
  .physical-scene{min-height:285svh}
  .control-scene,.security-scene{min-height:155svh}

  /* Mobile hierarchy: keep the visual story inside the stable viewport. */
  .scene h1{font-size:clamp(43px,12.5vw,52px)}
  .scene h2{font-size:clamp(39px,11.2vw,48px)}
  .scene-copy>p:not(.eyebrow),.track-copy>p:not(.eyebrow),.physical-copy>p:not(.eyebrow){font-size:15px;line-height:1.52;margin-top:18px}
  .eyebrow{font-size:11px;margin-bottom:13px}
  .ecosystem-words{margin-top:28px}
  .ecosystem-words span{grid-template-columns:100px minmax(0,1fr);gap:6px 14px;padding:13px 0}
  .ecosystem-product em{font-size:13px;line-height:1.38}
  .ecosystem-product strong{grid-column:2;margin:3px 0 0;font-size:10px;line-height:1.45;letter-spacing:.045em}
  .ecosystem-lede{font-size:14px;margin-top:17px}

  .identity-visual{height:32svh;min-height:245px;margin-top:14px}
  .identity-grid{gap:9px}
  .identity-grid span{width:10px;height:10px}

  .track-map{height:39svh;min-height:285px;margin-top:20px}
  .track-destination-label small{font-size:9px}.track-destination-label strong{font-size:18px}
  .track-caption{font-size:20px;margin-top:8px}

  .reputation-flow{height:39svh;min-height:285px;margin-top:18px}
  .metric-glimpse{margin-top:12px}.metric-glimpse strong{font-size:23px}.metric-glimpse span{font-size:9px}

  .insight-convergence{height:48svh;min-height:350px;margin-top:16px}
  .insight-source{width:145px;font-size:10px}
  .insight-source small{max-width:140px;font-size:9.5px;line-height:1.38;letter-spacing:.035em}
  .source-identity{top:8%}.source-track{top:31%}.source-reputation{top:54%}.source-physical{top:77%}
  .insight-source.is-active i{width:29vw!important}.insight-source.is-past i{width:18vw!important}
  .insight-caption{font-size:10px;margin-top:4px}

  .physical-stage{margin-top:20px;min-height:32svh}
  .physical-route-panel{margin-top:18px}
  .physical-principle{margin-top:14px}

  /* Keep essential state transitions visible even when iOS Reduce Motion is enabled. */
  .ecosystem-product,.insight-source,.identity-grid span,.track-destination-label,.route-line,.track-target,.physical-object{will-change:opacity,transform}
}

@media (max-width:390px) and (max-height:760px){
  .scene-frame{padding-top:max(70px,calc(env(safe-area-inset-top) + 58px));padding-bottom:28px}
  .scene h1{font-size:41px}.scene h2{font-size:37px}
  .ecosystem-product em{font-size:12px}.ecosystem-product strong{font-size:9px}
  .identity-visual{height:29svh;min-height:220px}
  .track-map,.reputation-flow{height:35svh;min-height:250px}
  .insight-convergence{height:44svh;min-height:320px}
}


/* iPhone landscape / coarse-pointer fallback: preserve sticky storytelling beyond 720px CSS width. */
@media (min-width:721px) and (max-width:920px) and (hover:none) and (pointer:coarse){
  .data-experience{overflow:visible!important}
  .data-experience canvas{height:100svh;min-height:100svh;transform:translateZ(0);-webkit-transform:translateZ(0)}
  .scene-frame{position:-webkit-sticky;position:sticky;top:0;min-height:100svh;transform:translateZ(0);-webkit-transform:translateZ(0)}
  .ecosystem-scene{min-height:245svh}.identity-scene{min-height:205svh}.track-scene{min-height:195svh}.reputation-scene{min-height:195svh}.insight-scene{min-height:295svh}.physical-scene{min-height:255svh}
}

/* V9.3 — clearer Control/Security + stronger transition spacing */
.control-copy p:not(.eyebrow),.security-copy p:not(.eyebrow){max-width:610px;font-size:clamp(16px,1.05vw,18px);line-height:1.7}
.security-labels{max-width:760px}
.security-labels span{font-family:'Public Sans',sans-serif;font-size:11px;letter-spacing:.025em}
.config-transition{isolation:isolate;padding-top:clamp(190px,18vh,280px)}
.transition-copy{position:relative}
.transition-step{display:flex;align-items:center;gap:14px;margin:0 0 34px;color:#66736f;font:600 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em}
.transition-step span{display:block;width:54px;height:1px;background:linear-gradient(90deg,var(--signal),rgba(53,179,154,.12))}
.transition-step b{font:inherit}
.transition-eyebrow{margin-bottom:14px}
@media(max-width:720px){
  .control-copy p:not(.eyebrow),.security-copy p:not(.eyebrow){font-size:15px;line-height:1.65;max-width:34rem}
  .security-labels{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:30px}
  .security-labels span{padding:10px 11px;font-size:10px;line-height:1.35}
  .config-transition{min-height:780px;padding-top:max(175px,22svh);padding-bottom:max(96px,12svh)}
  .transition-step{margin-bottom:38px;gap:11px;font-size:9px;letter-spacing:.115em}
  .transition-step span{width:40px}
  .transition-eyebrow{margin-bottom:18px}
  .config-transition h2{margin-top:0;font-size:clamp(43px,12vw,58px);line-height:1.02}
  .config-transition p{font-size:15px;line-height:1.65}
  .intent-picker{margin-top:54px}
}

/* V9.4 — tablet refinement, clearer control state, readable dark/light handoff, inline FAQ */
.control-matrix div{min-width:0}
.control-matrix b{background:rgba(218,226,223,.72)!important;box-shadow:0 0 0 1px rgba(244,239,230,.08);opacity:1}
.control-matrix small{margin-left:auto;color:var(--signal-ink);font:600 9px/1 'IBM Plex Mono',monospace;letter-spacing:.1em;white-space:nowrap}
.control-matrix small:before{content:'';display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px rgba(53,179,154,.08);vertical-align:1px}
.control-scene.is-current .control-matrix div:nth-child(1){--focus-delay:.08s}.control-scene.is-current .control-matrix div:nth-child(2){--focus-delay:.16s}.control-scene.is-current .control-matrix div:nth-child(3){--focus-delay:.24s}.control-scene.is-current .control-matrix div:nth-child(4){--focus-delay:.32s}
.control-scene.is-current .control-matrix small{animation:statusPulse 1.2s var(--ease) var(--focus-delay) both}@keyframes statusPulse{0%{opacity:.35}55%{opacity:1}100%{opacity:.9}}

/* Keep the transition copy on a consistently dark surface; reveal white only after the message. */
.config-transition{background:var(--petrol)!important;color:var(--ivory)!important;min-height:960px;padding-bottom:250px!important}
.config-transition:after{content:'';position:absolute;z-index:0;left:0;right:0;bottom:0;height:210px;background:linear-gradient(180deg,rgba(22,29,32,0),rgba(247,248,247,.2) 32%,#fff 82%,#fff 100%);pointer-events:none}
.config-transition .transition-copy{z-index:2}
.config-transition .transition-step{color:#90a09d}
.config-transition .transition-eyebrow,.config-transition .eyebrow{color:var(--signal-ink)}
.config-transition h2{color:var(--ivory)!important}
.config-transition h2 em{color:var(--signal-ink)!important}
.config-transition p{color:#c0ccc8!important}
.config-transition .intent-picker{border-top-color:rgba(244,239,230,.28)}
.config-transition .intent-picker a{color:var(--ivory);border-bottom-color:rgba(244,239,230,.16)}
.config-transition .intent-picker a:nth-child(even){border-left-color:rgba(244,239,230,.16)}
.config-transition .intent-picker span,.config-transition .intent-picker small{color:#95a6a2}
.config-transition .intent-picker i{color:var(--signal)}
.config-transition .resolve-field{mask-image:linear-gradient(#000 0%,#000 68%,transparent 94%);opacity:.18}

/* Inline answer component is generated by JS and used on tablet/mobile. */
.faq-inline-answer{display:none}

/* Tablet gets its own choreography instead of inheriting phone-length scenes. */
@media (min-width:721px) and (max-width:1100px){
  :root{--shell-gap:64px}
  .scene-frame{padding:92px 42px 58px;min-height:100svh;height:100svh}
  .hero-scene{min-height:108svh}.signal-scene{min-height:118svh}.ecosystem-scene{min-height:168svh}.identity-scene{min-height:158svh}.track-scene{min-height:150svh}.reputation-scene{min-height:150svh}.insight-scene{min-height:188svh}.physical-scene{min-height:178svh}.control-scene,.security-scene{min-height:126svh}
  .physical-frame{padding-top:88px}.physical-stage{top:41%;left:5%;right:5%;gap:3vw}.physical-route-panel{bottom:5%}.physical-principle{bottom:5%}
  .control-frame,.security-frame{grid-template-columns:1fr;align-content:center}.control-copy,.security-copy{max-width:660px}.control-matrix{margin-top:28px;width:min(100%,680px)}.touchpoint-console{position:static;width:min(100%,680px);margin-top:26px}.security-domains{margin-top:30px}
  .config-transition{min-height:840px!important;padding:130px 42px 220px!important;align-items:flex-start}.config-transition:after{height:170px}.transition-copy{max-width:860px}.config-transition h2{font-size:clamp(54px,7.1vw,76px)}
  .faq-shell{grid-template-columns:1fr;gap:38px;padding:88px 0}.faq-intro{position:static;max-width:680px}.faq-terminal{display:block;border-top:1px solid var(--ink);padding-top:4px}.faq-question{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #e4e8e6;padding:18px 44px 18px 0;font-size:17px;background:transparent;color:var(--ink);cursor:pointer}.faq-question:after{content:'+';position:absolute;right:4px;top:50%;transform:translateY(-50%);font:500 19px 'IBM Plex Mono';color:#186b5c}.faq-question.is-active:after{content:'−'}.faq-answer-panel{display:none!important}.faq-inline-answer{display:none;padding:0 34px 22px 24px;border-bottom:1px solid #e4e8e6;border-left:1px solid var(--signal);background:linear-gradient(90deg,#f7faf8,transparent)}.faq-question.is-active + .faq-inline-answer{display:block}.faq-inline-answer span{display:block;padding-top:18px;color:#186b5c;font:600 10px 'IBM Plex Mono';letter-spacing:.08em}.faq-inline-answer p{max-width:720px;margin:8px 0 0;color:#45514e;font-size:16px;line-height:1.62}
}

@media (max-width:720px){
  .control-matrix{overflow:visible}.control-matrix div{gap:8px}.control-matrix span{width:86px}.control-matrix small{font-size:8px}
  .config-transition{min-height:820px!important;padding-top:max(128px,18svh)!important;padding-bottom:190px!important;background:var(--petrol)!important}.config-transition:after{height:145px}.config-transition .resolve-field{opacity:.12}.config-transition h2{color:var(--ivory)!important}.config-transition p{color:#c0ccc8!important}.config-transition .intent-picker a:nth-child(even){border-left:0}
  .faq-terminal{display:block}.faq-answer-panel{display:none!important}.faq-question{position:relative;display:block;width:100%;text-align:left;padding:17px 40px 17px 0;border-bottom:1px solid #e4e8e6;background:transparent;color:var(--ink)}.faq-question:after{content:'+';position:absolute;right:2px;top:50%;transform:translateY(-50%);font:500 18px 'IBM Plex Mono';color:#186b5c}.faq-question.is-active:after{content:'−'}.faq-inline-answer{display:none;padding:0 18px 20px 18px;border-left:1px solid var(--signal);border-bottom:1px solid #e4e8e6;background:#f8faf9}.faq-question.is-active + .faq-inline-answer{display:block}.faq-inline-answer span{display:block;padding-top:16px;color:#186b5c;font:600 9px 'IBM Plex Mono';letter-spacing:.08em}.faq-inline-answer p{margin:8px 0 0;color:#45514e;font-size:15px;line-height:1.6}
}

/* V10 — Data Field 2.0: intentional motion, fewer particles, stronger editorial rhythm */
.data-grain{opacity:.016}
.data-experience canvas{opacity:.92}
.scene-frame:after{opacity:.32}

/* Prevent Fraunces italic overshoots/descenders from clipping on narrow viewports. */
.scene h1,.scene h2,.scene-copy,.narrow-copy{overflow:visible}
.scene h1 em,.scene h2 em{display:inline-block;padding-right:.09em;padding-bottom:.10em;margin-right:-.02em}
.signal-scene .scene-copy{padding-right:clamp(8px,1.2vw,22px)}
.signal-scene .scene-copy h2{overflow:visible;max-width:680px;line-height:1.03;padding-bottom:.08em}
.signal-scene .scene-copy h2 em{white-space:nowrap}

/* Signal = one event, not a second particle system. */
.signal-rail{height:120px}
.signal-rail:after{opacity:.52}
.signal-rail>i{height:1px;background:linear-gradient(90deg,rgba(53,179,154,.13),rgba(53,179,154,.92) 55%,rgba(143,215,200,.18))}
.signal-origin{box-shadow:0 0 0 10px rgba(53,179,154,.085)}
.signal-rail b{box-shadow:0 0 11px rgba(244,239,230,.48)}

/* The persistent field retreats in scenes that already own a strong visual metaphor. */
body[data-story-state="identity"] #data-field,
body[data-story-state="track"] #data-field,
body[data-story-state="reputation"] #data-field,
body[data-story-state="control"] #data-field,
body[data-story-state="security"] #data-field{opacity:.62}
body[data-story-state="signal"] #data-field{opacity:.22}

/* Quiet pauses are intentional. */
.pause-scene .scene-frame{background:radial-gradient(circle at 53% 54%,rgba(53,179,154,.025),transparent 34%)}

/* On mobile the word signal may wrap to a third line rather than being squeezed/cropped. */
@media(max-width:720px){
  .signal-scene .scene-copy{padding-right:10px}
  .signal-scene .scene-copy h2{font-size:clamp(40px,12vw,47px);line-height:1.04;letter-spacing:-.047em;max-width:calc(100vw - 54px)}
  .signal-scene .scene-copy h2 em{padding-right:.12em;padding-bottom:.12em}
  .signal-rail{height:96px;margin-top:32px}
  .data-grain{opacity:.010}
  .data-experience canvas{opacity:.78}
}

@media(min-width:721px) and (max-width:1100px){
  .signal-scene .scene-copy h2{max-width:620px;padding-right:.16em}
  .data-experience canvas{opacity:.82}
}
.signal-scene .title-line{display:inline-block;overflow:visible;max-width:100%;padding-right:.16em;padding-bottom:.03em}
.signal-rail b:before,.signal-rail b:after{content:'';position:absolute;top:50%;border-radius:50%;background:var(--signal-ink);transform:translateY(-50%);pointer-events:none}
.signal-rail b:before{width:5px;height:5px;left:-12px;opacity:.42}
.signal-rail b:after{width:3px;height:3px;left:-21px;opacity:.20}
@media(max-width:720px){.signal-scene .title-line{padding-right:.20em}.signal-rail b:before{left:-10px}.signal-rail b:after{left:-17px}}

/* V11 — Data Gravity: distributed information converges into controlled structure */
.data-experience canvas{opacity:1}
.data-grain{opacity:.012}

/* Centralized-control cue: always legible even before the visitor discovers mouse gravity. */
.control-matrix{position:relative;padding-right:174px}
.control-matrix>div:not(.control-central-hub):after{right:150px;background:linear-gradient(90deg,rgba(244,239,230,.10),rgba(53,179,154,.22),rgba(53,179,154,.04))}
.control-central-hub{position:absolute!important;right:0;top:50%;width:132px!important;min-width:132px!important;height:92px;transform:translateY(-50%);display:flex!important;flex-direction:column;align-items:center!important;justify-content:center!important;gap:5px!important;padding:0!important;border:1px solid rgba(143,215,200,.24);background:rgba(22,29,32,.72);box-shadow:0 0 0 7px rgba(53,179,154,.025),0 18px 50px rgba(0,0,0,.2);backdrop-filter:blur(6px)}
.control-central-hub:after{display:none!important}
.control-central-hub:before{content:'';position:absolute;left:-151px;top:50%;width:151px;height:1px;background:linear-gradient(90deg,rgba(53,179,154,.03),rgba(53,179,154,.42))}
.control-central-hub i{display:block;width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 7px rgba(53,179,154,.08),0 0 22px rgba(53,179,154,.20)}
.control-central-hub strong{font:600 12px/1.1 'Public Sans',sans-serif;color:var(--ivory);letter-spacing:.04em}
.control-central-hub small{margin:0!important;color:var(--signal-ink)!important;font:500 8px/1.1 'IBM Plex Mono',monospace!important;letter-spacing:.08em!important}
.control-central-hub small:before{display:none!important}
.control-scene.is-current .control-central-hub{animation:centralHubIn .8s var(--ease) both}
@keyframes centralHubIn{from{opacity:.25;transform:translateY(-50%) scale(.94)}to{opacity:1;transform:translateY(-50%) scale(1)}}

/* The canvas itself becomes more readable while keeping the number of signals restrained. */
body[data-story-state="hero"] #data-field,
body[data-story-state="ecosystem"] #data-field,
body[data-story-state="pause"] #data-field{opacity:.96}
body[data-story-state="control"] #data-field{opacity:.88}
body[data-story-state="signal"] #data-field{opacity:.18}

/* A little extra breathing room around cursor-driven scenes so the interaction reads as intentional. */
.hero-data-map,.ecosystem-words,.insight-convergence,.control-matrix{isolation:isolate}

@media (min-width:721px) and (max-width:1100px){
  .control-matrix{padding:88px 0 0;width:min(100%,680px)}
  .control-central-hub{left:0;right:auto;top:0;transform:none;width:150px!important;height:68px}
  .control-central-hub:before{display:none}
  .control-scene.is-current .control-central-hub{animation:centralHubTablet .7s var(--ease) both}
  @keyframes centralHubTablet{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}
  .control-matrix>div:not(.control-central-hub):after{right:0}
}

@media(max-width:720px){
  .control-matrix{padding:82px 0 0}
  .control-central-hub{left:0;right:auto;top:0;transform:none;width:142px!important;height:62px}
  .control-central-hub:before{display:none}
  .control-central-hub strong{font-size:11px}.control-central-hub small{font-size:7px!important}
  .control-scene.is-current .control-central-hub{animation:centralHubTablet .7s var(--ease) both}
  .control-matrix>div:not(.control-central-hub):after{right:0}
}


/* V11.1 — Single visual flow audit
   Each scene has exactly one narrative owner. Canvas supports; it does not duplicate DOM/SVG diagrams. */
body[data-story-state="hero"] #data-field{opacity:.78}
body[data-story-state="signal"] #data-field{opacity:.10}
body[data-story-state="ecosystem"] #data-field{opacity:.58}
body[data-story-state="identity"] #data-field{opacity:.24}
body[data-story-state="track"] #data-field{opacity:.16}
body[data-story-state="reputation"] #data-field{opacity:.16}
body[data-story-state="pause"] #data-field{opacity:.10}
body[data-story-state="physical"] #data-field{opacity:.18}
body[data-story-state="control"] #data-field{opacity:.10}
body[data-story-state="security"] #data-field{opacity:.08}

/* Keep the scene's own visual system above the ambient field. */
.signal-rail,.identity-visual,.track-map,.reputation-flow,.insight-convergence,.physical-stage,.control-matrix,.security-domains{position:relative;z-index:3}

/* Clean handoff at sticky boundaries: secondary remnants fade when their scene loses focus. */
.scene .product-whisper,.scene .metric-glimpse,.scene .touchpoint-console{transition:opacity .32s var(--ease)}
.scene:not(.is-current) .product-whisper,.scene:not(.is-current) .metric-glimpse,.scene:not(.is-current) .touchpoint-console{opacity:.16}
@media(max-width:1100px){
  body[data-story-state="hero"] #data-field{opacity:.62}
  body[data-story-state="ecosystem"] #data-field{opacity:.44}
}

/* V11.2 — Flow visibility + secondary ≠ disabled
   The primary diagram owns each scene. Secondary states stay legible and available. */

/* TRACK: inactive destinations are alternate destinations, not disabled options. */
.track-map{overflow:visible}
.route-line{stroke:rgba(143,215,200,.19);stroke-width:1.2}
.route-line.is-active{stroke:var(--signal);stroke-width:2.7;filter:drop-shadow(0 0 6px rgba(53,179,154,.5))}
.track-target{opacity:.55;fill:rgba(244,239,230,.30);stroke:rgba(143,215,200,.42)}
.track-target.is-active{opacity:1}
.track-destination-label{left:72%;width:26%;opacity:.46;filter:none;transform:translateY(-50%)}
.track-destination-label small{color:#9aaba7}
.track-destination-label strong{color:rgba(244,239,230,.72);font-size:clamp(23px,2.15vw,35px);line-height:1.08;white-space:normal}
.track-destination-label.is-active{opacity:1;transform:translateY(-50%) translateX(6px)}
.track-destination-label.is-active strong{color:var(--ivory)}
.track-pulse{r:5;filter:drop-shadow(0 0 8px rgba(53,179,154,.9))}

/* Supporting physical touchpoints are recommendations, never disabled products. */
.product-whisper{opacity:1!important;padding:11px 14px;border:1px solid rgba(213,181,109,.24);background:rgba(22,29,32,.82);box-shadow:0 14px 38px rgba(0,0,0,.12);backdrop-filter:blur(5px)}
.product-whisper p{color:#aebdb9}
.product-whisper b{color:var(--ivory)}
.track-whisper{opacity:1}
.scene:not(.is-current) .product-whisper,.scene:not(.is-current) .metric-glimpse,.scene:not(.is-current) .touchpoint-console{opacity:0!important;pointer-events:none}

/* PHYSICAL: non-selected means available, not disabled. */
.physical-object{opacity:.62;filter:none;transform:translateY(10px) scale(.96)}
.physical-object:hover,.physical-object:focus-visible{opacity:.88;transform:translateY(4px) scale(.985)}
.physical-object.is-active{opacity:1;transform:translateY(0) scale(1.035)}
.physical-stage.show-family .physical-object{opacity:.90}
.physical-stage.show-family .physical-object.is-active{opacity:1}

/* REPUTATION: visible flow lives on the existing route, not on a second canvas network. */
.rep-line{overflow:visible;opacity:.82}
.rep-line:after{content:'';position:absolute;top:50%;left:0;width:6px;height:6px;border-radius:50%;background:var(--signal-ink);box-shadow:0 0 10px rgba(53,179,154,.5);transform:translate(-50%,-50%);opacity:0}
.reputation-scene.is-current .rep-line:after{animation:repFlow 2.4s var(--ease) infinite}
.reputation-scene.is-current .rep-line-up:after{animation-delay:.45s}
.reputation-scene.is-current .rep-line-down:after{animation-delay:.9s}
@keyframes repFlow{0%{left:0;opacity:0}10%{opacity:.9}80%{opacity:.75}100%{left:100%;opacity:0}}

/* DATO: the existing source lines carry small signals into the central core. */
.insight-source i{position:relative;overflow:visible}
.insight-source i:after{content:'';position:absolute;left:0;top:50%;width:5px;height:5px;border-radius:50%;background:var(--signal-ink);box-shadow:0 0 9px rgba(53,179,154,.42);transform:translate(-50%,-50%);opacity:0}
.insight-scene.is-current .insight-source.is-active i:after{animation:insightFlow 1.55s var(--ease) infinite}
.insight-scene.is-current .insight-source.is-past i:after{animation:insightFlow 2.25s var(--ease) infinite;opacity:.45}
@keyframes insightFlow{0%{left:0;opacity:0}12%{opacity:.95}78%{opacity:.72}100%{left:100%;opacity:0}}

/* CONTROL: connections remain visible without suggesting off/disabled states. */
.control-matrix>div:not(.control-central-hub):after{opacity:.68}
.control-matrix>div:not(.control-central-hub) small{opacity:.82}

@media(max-width:1100px){
  .track-destination-label{left:69%;width:29%}
  .track-destination-label strong{font-size:clamp(20px,2.6vw,28px)}
  .product-whisper{padding:10px 12px}
}
@media(max-width:720px){
  .track-destination-label{left:61%;width:38%}
  .track-destination-label strong{font-size:18px;line-height:1.08}
  .track-destination-label small{font-size:9px}
  .route-line{stroke:rgba(143,215,200,.25)}
  .track-target{opacity:.66}
  .product-whisper{background:rgba(22,29,32,.94);border-color:rgba(213,181,109,.28)}
  .physical-object{opacity:.70;transform:scale(.97)}
}
.product-whisper .whisper-kicker{display:block;margin-bottom:4px;color:var(--warm);font-size:8px;letter-spacing:.10em}
.product-whisper .whisper-kicker+b{display:inline-block;margin-bottom:2px}

/* V12 — mobile-first editorial choreography
   Mobile is not desktop compressed: each sticky frame fits a readable composition,
   while scroll changes state without forcing long empty travel. */
@media (max-width:720px){
  :root{--mobile-side:20px}
  .site-header{height:58px;padding-inline:var(--mobile-side);background:linear-gradient(180deg,rgba(22,29,32,.92),rgba(22,29,32,.76) 70%,rgba(22,29,32,.6));backdrop-filter:blur(8px)}
  .site-header .wordmark{font-size:12px}.site-header .button-small{padding:9px 12px;font-size:11px}
  .scene-frame{width:calc(100% - (var(--mobile-side)*2));height:100svh;min-height:100svh;padding:max(72px,calc(env(safe-area-inset-top) + 58px)) 0 max(26px,env(safe-area-inset-bottom));align-content:start;align-items:start;overflow:hidden}
  .scene h1{font-size:clamp(42px,11.8vw,50px);line-height:.98}.scene h2{font-size:clamp(38px,10.8vw,46px);line-height:1.01}
  .scene-copy>p:not(.eyebrow),.track-copy>p:not(.eyebrow),.physical-copy>p:not(.eyebrow),.insight-copy>p:last-child{font-size:14px;line-height:1.52;margin-top:14px}
  .eyebrow{font-size:9.5px;line-height:1.3;margin-bottom:11px;letter-spacing:.085em}

  /* Shorter scene travel: enough for states, never several screens of nothing. */
  .hero-scene{min-height:106svh}.signal-scene{min-height:122svh}.ecosystem-scene{min-height:188svh}.identity-scene{min-height:170svh}.track-scene{min-height:158svh}.reputation-scene{min-height:158svh}.insight-scene{min-height:220svh}.physical-scene{min-height:195svh}.control-scene,.security-scene{min-height:122svh}

  /* Secondary means context, not disappearance. */
  .scene .product-whisper,.scene .metric-glimpse,.scene .touchpoint-console{opacity:1!important;transition:opacity .22s var(--ease),transform .22s var(--ease)}
  .scene:not(.is-current) .product-whisper,.scene:not(.is-current) .metric-glimpse,.scene:not(.is-current) .touchpoint-console{opacity:.46!important;pointer-events:none}
  .product-whisper{padding:9px 10px;background:rgba(22,29,32,.88);box-shadow:none}
  .product-whisper p{font-size:11px;line-height:1.4}.product-whisper .whisper-kicker{font-size:7px}.product-whisper b{font-size:11px}

  /* Signal: one readable event with no unnecessary lower-space. */
  .signal-frame{display:flex;flex-direction:column;justify-content:flex-start}.signal-rail{margin:34px 0 0;width:100%}.sequence-labels{position:static;margin-top:22px;display:flex;gap:7px;font-size:8px;line-height:1.2}

  /* Ecosystem: active product has focus; the other two remain visibly available. */
  .ecosystem-frame{display:flex;flex-direction:column;justify-content:flex-start}.ecosystem-lede{margin-top:13px}.ecosystem-words{margin-top:18px}
  .ecosystem-product{opacity:.58;transform:none;padding:11px 0}.ecosystem-product.is-past{opacity:.72}.ecosystem-product.is-active{opacity:1}
  .ecosystem-words span{grid-template-columns:92px minmax(0,1fr);gap:4px 10px}.ecosystem-product em{font-size:12px;line-height:1.34}.ecosystem-product strong{grid-column:2;margin:2px 0 0;font-size:8.5px;line-height:1.38}

  /* Identity: visual remains close to the explanation instead of dropping to the lower half. */
  .identity-frame{display:flex;flex-direction:column;justify-content:flex-start}.identity-copy{order:1}.identity-visual{order:2;height:29svh;min-height:220px;margin-top:10px}.identity-grid{left:25%;top:12%;width:72%;height:70%;gap:8px}.identity-person{left:5%;top:39%}.identity-team-label{right:0;bottom:5%;font-size:8px}.identity-stages{margin:10px 0 10px;gap:6px;font-size:8px}.identity-whisper{position:static;margin-top:6px;align-self:flex-start}

  /* Track: the full route fits in the viewport and alternatives stay visible. */
  .track-frame{display:flex;flex-direction:column;justify-content:flex-start;padding-top:max(72px,calc(env(safe-area-inset-top) + 58px))}.track-copy{max-width:none}.track-map{position:relative;left:auto;right:auto;top:auto;height:34svh;min-height:245px;margin-top:14px}.track-source-label{left:4%;font-size:8px}.track-destination-label{left:58%;width:41%;opacity:.58}.track-destination-label strong{font-size:16px}.track-destination-label small{font-size:8px}.track-caption{position:static;margin-top:2px;font-size:18px}.track-whisper{position:static;margin-top:7px;align-self:flex-start}.route-line{stroke:rgba(143,215,200,.32)}

  /* Reputation: flow, metrics and optional touchpoint are all visible together. */
  .reputation-frame{display:flex;flex-direction:column;justify-content:flex-start}.reputation-flow{height:30svh;min-height:215px;margin-top:12px}.rep-node{font-size:8px;padding:6px 8px}.metric-glimpse{position:static;margin-top:6px;grid-template-columns:repeat(3,1fr);gap:8px}.metric-glimpse>p{font-size:8px}.metric-glimpse strong{font-size:20px}.metric-glimpse span{font-size:7px;line-height:1.3}.reputation-whisper{position:static;margin-top:7px;align-self:flex-start}

  /* DATO: mobile uses a compact 2x2 source grid -> TU DATA -> ordered matrix. */
  .insight-frame{display:flex;flex-direction:column;justify-content:flex-start;gap:0}.insight-copy{margin:0;align-self:auto}.insight-convergence{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto;gap:8px 9px;height:auto;min-height:0;margin-top:18px;align-self:stretch}
  .insight-source,.source-identity,.source-track,.source-reputation,.source-physical{position:relative!important;left:auto!important;top:auto!important;width:auto!important;min-width:0;padding:10px;border:1px solid rgba(244,239,230,.11);background:rgba(32,41,45,.52);opacity:.58;transform:none!important;font-size:8.5px;letter-spacing:.045em}
  .insight-source.is-past{opacity:.72}.insight-source.is-active{opacity:1;border-color:rgba(53,179,154,.42);background:rgba(32,41,45,.78)}
  .insight-source span{margin-bottom:4px;font-size:9px}.insight-source small{max-width:none;font-size:7.5px;line-height:1.36;letter-spacing:.025em;color:#8fa09c}
  .insight-source i,.insight-source.is-active i,.insight-source.is-past i,.insight-scene.is-current .insight-source i,.insight-scene[data-insight-stage="4"] .insight-source i{display:block;width:100%!important;height:2px;margin-top:8px;background:linear-gradient(90deg,rgba(143,215,200,.10),rgba(53,179,154,.58));overflow:visible}
  .insight-core,.insight-scene[data-insight-stage="4"] .insight-core{position:relative!important;left:auto!important;top:auto!important;grid-column:1/-1;justify-self:center;width:12px;height:12px;margin:2px 0 12px;transform:none!important;opacity:1;box-shadow:0 0 0 9px rgba(53,179,154,.06),0 0 24px rgba(53,179,154,.12)}
  .insight-core:after{content:'TU DATA';position:absolute;left:50%;top:21px;transform:translateX(-50%);white-space:nowrap;color:var(--signal-ink);font:600 8px/1 'IBM Plex Mono',monospace;letter-spacing:.08em}
  .insight-matrix,.insight-scene:not([data-insight-stage="4"]) .insight-matrix,.insight-scene[data-insight-stage="4"] .insight-matrix{position:relative!important;right:auto!important;top:auto!important;grid-column:1/-1;justify-self:center;width:66%!important;gap:8px;opacity:.58!important;transform:none!important;margin-top:3px}
  .insight-scene[data-insight-stage="4"] .insight-matrix{opacity:.92!important}.insight-matrix i{width:5px;height:5px}.insight-caption{position:static;left:auto;bottom:auto;margin-top:10px;justify-content:center;font-size:8px}

  /* Physical: keep the three products visible as a family; focus changes without hiding the others. */
  .physical-frame{display:flex;flex-direction:column;justify-content:flex-start;padding-top:max(72px,calc(env(safe-area-inset-top) + 58px))}.physical-copy{max-width:none}.physical-stage{position:relative;left:auto;right:auto;top:auto;display:grid;grid-template-columns:1.1fr .8fr 1fr;gap:8px;align-items:end;min-height:0;margin-top:18px}
  .physical-object{opacity:.72!important;transform:none;filter:none;gap:8px}.physical-object.is-active{opacity:1!important;transform:translateY(-4px) scale(1.035)}.physical-stage.show-family .physical-object{opacity:.9!important}.physical-object small{font-size:8px}
  .nfc-card-object{width:100%;max-width:126px;padding:10px;border-radius:8px}.nfc-card-object b{font-size:8px}.nfc-tag-object{width:min(74px,100%);justify-self:center}.nfc-tag-object i{font-size:9px}.nfc-presenter-object{width:100%;max-width:104px;height:154px;padding:13px 9px;gap:9px;transform:perspective(850px) rotateY(-4deg)}.nfc-presenter-object>b{font-size:8px}.presenter-qr{grid-template-columns:repeat(3,7px);grid-template-rows:repeat(3,7px);gap:2px;padding:5px}.presenter-qr i{width:7px;height:7px}.presenter-nfc{font-size:11px}
  .physical-route-panel{position:static;width:100%;margin-top:14px;padding:12px 0 0}.physical-route-panel>p:first-child{font-size:8px;margin-bottom:5px}.physical-route{gap:8px;font-size:10px}.physical-route strong{font-size:20px}.physical-route-panel>p:nth-child(3){margin:7px 0;font-size:10.5px;line-height:1.38}.physical-channel-data{gap:15px;font-size:8px}.physical-principle{position:static;margin-top:10px;display:flex;gap:8px;align-items:baseline}.physical-principle span{font-size:8px}.physical-principle b{font-size:16px}

  /* Control: compact dashboard, no large dead zone between title and centralized control. */
  .control-frame{display:flex;flex-direction:column;justify-content:flex-start}.control-copy{margin:0}.control-matrix{position:relative;width:100%;margin-top:16px;padding:58px 0 0;gap:7px;overflow:visible}.control-central-hub{left:0;right:auto;top:0;width:132px!important;height:48px!important;border-radius:2px}.control-central-hub strong{font-size:10px}.control-central-hub small{font-size:6.5px!important}.control-central-hub i{width:5px;height:5px}.control-matrix div:not(.control-central-hub){min-height:26px;padding:3px 0;gap:6px}.control-matrix span{width:74px;font-size:7.5px}.control-matrix b{width:7px;height:7px}.control-matrix small{font-size:6.5px}.touchpoint-console{position:static;width:100%;margin-top:11px;padding-top:10px;background:rgba(22,29,32,.52)}.console-head b{font-size:10px}.console-head em{font-size:8px}.console-grid{grid-template-columns:92px 1fr;gap:4px 10px;padding:9px 0;font-size:8px}.console-actions{gap:11px;font-size:7px}

  /* Security: two companies and four protections remain within one phone viewport. */
  .security-frame{display:flex;flex-direction:column;justify-content:flex-start}.security-domains{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.security-domains>div{min-height:126px;padding:30px 10px 10px;grid-template-columns:repeat(3,1fr);gap:12px}.security-domains span{left:10px;top:9px;font-size:8px}.security-domains i{width:9px;height:9px}.security-labels{position:static;margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px}.security-labels span{padding:7px 8px;font-size:8px;line-height:1.25}

  /* Handoff to configuration: shorter, clear and readable before the white UI starts. */
  .config-transition{min-height:700px!important;padding:max(100px,14svh) var(--mobile-side) 145px!important}.config-transition:after{height:120px}.transition-step{margin-bottom:24px}.config-transition h2{font-size:clamp(40px,10.8vw,48px)}.config-transition p{font-size:14px}.intent-picker{margin-top:30px}.intent-picker a{padding:13px 0;grid-template-columns:32px 1fr auto;font-size:17px}.intent-picker a small{font-size:9px}

  /* FAQ/support/footer remain tactile and denser on phones. */
  .faq-shell{padding:68px 0}.faq-question{padding:15px 36px 15px 0;font-size:14px}.faq-inline-answer p{font-size:14px}.support-section{padding:72px 0}.support-copy h2{font-size:42px}.closing{padding:76px 0}.closing h2{font-size:46px}
}

@media (max-width:390px) and (max-height:760px){
  .scene-frame{padding-top:max(66px,calc(env(safe-area-inset-top) + 54px));padding-bottom:20px}
  .scene h1{font-size:40px}.scene h2{font-size:36px}
  .hero-scene{min-height:104svh}.signal-scene{min-height:118svh}.ecosystem-scene{min-height:178svh}.identity-scene{min-height:162svh}.track-scene,.reputation-scene{min-height:150svh}.insight-scene{min-height:205svh}.physical-scene{min-height:184svh}.control-scene,.security-scene{min-height:116svh}
  .identity-visual{height:26svh;min-height:190px}.track-map{height:31svh;min-height:220px}.reputation-flow{height:27svh;min-height:195px}
  .physical-stage{margin-top:12px}.nfc-presenter-object{height:140px}.physical-route-panel{margin-top:10px}
  .control-matrix{margin-top:12px}.security-domains{margin-top:12px}
}

/* V13 FINAL QA: 1440-class desktop physical containment. */
@media (min-width:1101px) and (max-width:1599px){
  .physical-stage{left:8%!important;right:15%!important;grid-template-columns:1fr .54fr .72fr!important;gap:3.7vw!important}
  .nfc-presenter-object{width:min(14.5vw,185px)!important;height:min(20vw,250px)!important;padding:21px 17px 18px!important;gap:13px!important}
  .nfc-presenter-object:after{left:-7%!important;right:-2%!important}
  .presenter-qr{grid-template-columns:repeat(3,9px)!important;grid-template-rows:repeat(3,9px)!important;padding:6px!important;gap:3px!important}
  .presenter-qr i{width:9px!important;height:9px!important}
  .physical-route-panel{right:8%!important;width:min(340px,29vw)!important}
}

/* V13 FINAL QA: floating help yields once configuration begins. */
.floating-whatsapp{transition:opacity .22s var(--ease),transform .22s var(--ease)}
.floating-whatsapp.is-hidden{opacity:0!important;pointer-events:none!important;transform:translateY(10px) scale(.94)!important}

/* =========================================================
   V13 — Responsive architecture reset
   Desktop (>1100): cinematic sticky storytelling.
   Tablet (768–1100): editorial two-column, normal document flow.
   Mobile (<=767): compact vertical narrative, no dead-scroll zones.
   ========================================================= */

@media (max-width:1100px){
  .data-experience{overflow:hidden}
  .scene,.long-scene,.hero-scene,.signal-scene,.ecosystem-scene,.identity-scene,.track-scene,.reputation-scene,.insight-scene,.physical-scene,.control-scene,.security-scene{min-height:0!important;height:auto!important}
  .scene-frame{position:relative!important;top:auto!important;height:auto!important;min-height:0!important;overflow:visible!important;transform:none!important;-webkit-transform:none!important}
  .scene:not(:first-of-type){border-top:1px solid rgba(244,239,230,.045)}
  .scene .product-whisper,.scene .metric-glimpse,.scene .touchpoint-console,.scene:not(.is-current) .product-whisper,.scene:not(.is-current) .metric-glimpse,.scene:not(.is-current) .touchpoint-console{opacity:1!important;pointer-events:auto!important}
  .scene-copy h1,.scene-copy h2,.track-copy h2,.physical-copy h2,.insight-copy h2{opacity:1!important;transform:none!important}
  .data-experience canvas{position:absolute;height:100%;opacity:.16!important}
  .scene-frame:after{opacity:.16!important}
  .system-status,.scene-progress{display:none!important}
  .story-cta{display:none!important}
}

/* TABLET — editorial, compact, two-column when space allows */
@media (min-width:768px) and (max-width:1100px){
  :root{--tablet-side:42px}
  .site-header{height:68px;padding-inline:var(--tablet-side)}
  .scene-frame{width:calc(100% - (var(--tablet-side)*2));padding:92px 0 78px!important;margin-inline:auto}
  .scene h1{font-size:clamp(56px,7.3vw,76px)}
  .scene h2{font-size:clamp(48px,6.2vw,66px)}
  .scene-copy>p:not(.eyebrow),.track-copy>p:not(.eyebrow),.physical-copy>p:not(.eyebrow){font-size:16px;line-height:1.55;margin-top:18px}

  .hero-frame{grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);gap:42px;min-height:720px!important;align-items:center}
  .hero-data-map{height:430px;margin:0}
  .signal-frame{grid-template-columns:minmax(300px,.8fr) minmax(360px,1.2fr);gap:48px;align-items:center;min-height:560px!important}
  .signal-rail{margin:0;width:100%}
  .sequence-labels{left:auto;right:0;bottom:42px;width:48%;justify-content:flex-start}

  .ecosystem-frame{grid-template-columns:minmax(280px,.72fr) minmax(410px,1.28fr);gap:52px;align-items:start}
  .ecosystem-words{margin-top:4px}.ecosystem-product,.ecosystem-product.is-active,.ecosystem-product.is-past{opacity:1!important;transform:none!important}
  .ecosystem-product{padding:16px 0}.ecosystem-product em{font-size:14px}.ecosystem-product strong{font-size:9px}

  .identity-frame{grid-template-columns:minmax(360px,1.08fr) minmax(300px,.92fr);gap:46px;align-items:center}
  .identity-visual{height:430px;min-height:0;margin:0}.identity-copy{order:2}.identity-visual{order:1}.identity-whisper{position:absolute;left:0;bottom:30px;right:auto}

  .track-frame{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(420px,1.28fr);gap:40px;align-items:center}
  .track-copy{align-self:start}.track-map{position:relative;left:auto;right:auto;top:auto;height:430px;margin:0;grid-column:2;grid-row:1/3}
  .track-caption{position:static;grid-column:1;margin-top:24px;font-size:25px}.track-whisper{position:static;grid-column:1;margin-top:16px;width:max-content;max-width:100%}
  .track-destination-label{left:70%;width:29%}.track-destination-label strong{font-size:25px}

  .reputation-frame{grid-template-columns:minmax(300px,.78fr) minmax(420px,1.22fr);gap:42px;align-items:center}
  .reputation-flow{height:390px;min-height:0;margin:0}.metric-glimpse{position:absolute;right:0;bottom:46px;width:52%;margin:0}.reputation-whisper{position:absolute;left:0;bottom:40px;right:auto}

  .insight-frame{grid-template-columns:minmax(300px,.75fr) minmax(430px,1.25fr);gap:44px;align-items:center}
  .insight-convergence{height:430px;min-height:0;margin:0}.insight-source,.insight-source.is-active,.insight-source.is-past{opacity:.86!important}.insight-caption{position:absolute;right:0;bottom:38px;width:55%;justify-content:center}

  .physical-frame{display:grid;grid-template-columns:minmax(300px,.75fr) minmax(430px,1.25fr);gap:42px;align-items:start}
  .physical-stage{position:relative;left:auto;right:auto;top:auto;grid-column:2;grid-row:1/3;margin:0;min-height:390px;align-self:center}.physical-object{opacity:.78!important}.physical-object.is-active{opacity:1!important}
  .physical-route-panel{position:static;grid-column:1;margin-top:26px;width:100%}.physical-principle{position:static;grid-column:1;margin-top:16px}

  .control-frame,.security-frame{grid-template-columns:minmax(300px,.8fr) minmax(420px,1.2fr);gap:50px;align-items:start}
  .control-matrix{margin-top:0}.touchpoint-console{position:static;grid-column:2;margin-top:26px;width:100%}
  .security-domains{margin-top:0}.security-labels{position:static;grid-column:2;margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:8px}

  .config-transition{min-height:0!important;padding:110px var(--tablet-side) 100px!important}
  .transition-copy{max-width:920px}.intent-picker{margin-top:38px}
}

/* MOBILE — intentionally vertical. No sticky desktop geometry. */
@media (max-width:767px){
  :root{--mobile-side:18px}
  body{font-size:15px}
  .site-header{height:56px;padding-inline:var(--mobile-side);background:rgba(22,29,32,.92);backdrop-filter:blur(8px)}
  .site-header.story-mode{height:56px}.site-header .button-small{padding:8px 11px;font-size:10px}.site-header .wordmark{font-size:11px}
  .header-story-label{display:none!important}
  .floating-whatsapp{width:48px!important;height:48px!important;right:16px!important;bottom:calc(18px + env(safe-area-inset-bottom))!important}

  .scene-frame{width:calc(100% - (var(--mobile-side)*2));padding:84px 0 66px!important;margin-inline:auto;display:block!important}
  .scene h1{font-size:clamp(41px,12.2vw,52px);line-height:.98}
  .scene h2{font-size:clamp(36px,10.5vw,45px);line-height:1.01}
  .scene h1 em,.scene h2 em{padding-bottom:.12em;padding-right:.12em}
  .eyebrow{font-size:9px;margin-bottom:10px}.scene-copy>p:not(.eyebrow),.track-copy>p:not(.eyebrow),.physical-copy>p:not(.eyebrow),.insight-copy>p:last-child{font-size:14px;line-height:1.48;margin-top:13px}

  /* Hero — one viewport-ish composition without forcing extra scroll */
  .hero-frame{min-height:calc(100svh - 18px)!important;padding-top:88px!important;padding-bottom:56px!important}
  .hero-data-map{height:260px;margin:28px 0 0}.hero-products{font-size:8px;gap:5px}.hero-actions{margin-top:22px}.hero-sequence{position:static;margin-top:25px;font-size:8px;display:flex;gap:7px;flex-wrap:wrap}.scroll-cue{display:none}

  /* Signal — copy + one rail + sequence, then next scene. */
  .signal-frame{padding-bottom:58px!important}.signal-rail{height:90px;margin:28px 0 12px}.sequence-labels{position:static!important;display:flex;gap:6px;flex-wrap:wrap;font-size:7.5px;margin-top:8px}

  /* Ecosystem — all three products visible; current highlight is additive, never hiding context. */
  .ecosystem-frame{padding-top:70px!important}.ecosystem-lede{margin-top:12px!important}.ecosystem-words{margin-top:24px!important;border-top:1px solid rgba(244,239,230,.09)}
  .ecosystem-product,.ecosystem-product.is-active,.ecosystem-product.is-past{opacity:1!important;transform:none!important;padding:16px 0!important;display:grid!important;grid-template-columns:84px minmax(0,1fr)!important;gap:4px 10px!important;border-bottom:1px solid rgba(244,239,230,.08)}
  .ecosystem-product small{font-size:7.5px!important;color:#91a39f}.ecosystem-product b{font-size:28px!important;line-height:1!important}.ecosystem-product em{font-size:12px!important;line-height:1.35!important;color:#b7c4c0!important}.ecosystem-product strong{grid-column:2!important;font-size:7.5px!important;line-height:1.4!important;color:var(--signal-ink)!important;margin-top:2px!important}
  .ecosystem-progress{display:none!important}

  /* Identity — copy and visual stay adjacent. Secondary NFC card follows the visual. */
  .identity-copy{margin:0!important}.identity-stages{margin:12px 0 10px;font-size:7.5px;gap:5px;flex-wrap:wrap}.identity-visual{position:relative!important;height:270px!important;min-height:270px!important;margin:20px 0 0!important;order:initial!important}.identity-grid{left:23%!important;top:12%!important;width:74%!important;height:68%!important;gap:8px!important}.identity-person{left:2%!important;top:38%!important}.identity-team-label{right:0!important;bottom:4%!important;font-size:7.5px!important}.identity-whisper{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;margin-top:16px!important;width:100%!important}

  /* Track — vertical route list. The desktop SVG is deliberately hidden on phone. */
  .track-frame{padding-top:70px!important}.track-map{position:relative!important;height:auto!important;min-height:0!important;margin:28px 0 0!important;padding:14px 0 10px 42px!important;border-left:1px solid rgba(143,215,200,.22);overflow:visible!important}
  .track-map svg{display:none!important}.track-source-label{position:relative!important;left:auto!important;top:auto!important;transform:none!important;display:block;margin:0 0 18px -28px;padding-left:28px;font-size:8px!important;color:var(--signal-ink)}
  .track-source-label:before{content:'';position:absolute;left:-4px;top:50%;width:10px;height:10px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 7px rgba(53,179,154,.08)}
  .track-destination-label,.track-destination-label.is-active{position:relative!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;width:100%!important;opacity:.68!important;filter:none!important;margin:0!important;padding:0 0 22px 0!important;display:block!important}
  .track-destination-label:before{content:'';position:absolute;left:-47px;top:7px;width:8px;height:8px;border-radius:50%;background:#82918e;border:1px solid rgba(143,215,200,.25)}
  .track-destination-label.is-active{opacity:1!important}.track-destination-label.is-active:before{background:var(--signal);box-shadow:0 0 0 6px rgba(53,179,154,.07)}
  .track-destination-label small{font-size:7.5px!important}.track-destination-label strong{display:block;margin-top:2px;font-size:22px!important;line-height:1.05;color:rgba(244,239,230,.72)!important}.track-destination-label.is-active strong{color:var(--ivory)!important}
  .track-caption{position:static!important;margin:4px 0 0!important;font-size:20px!important;line-height:1.12}.track-whisper{position:relative!important;margin-top:22px!important;width:100%!important}

  /* Reputation — compact flow, metrics, then optional presenter. */
  .reputation-frame{padding-top:70px!important}.reputation-flow{position:relative!important;height:230px!important;min-height:230px!important;margin:22px 0 0!important}.metric-glimpse{position:relative!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;margin:8px 0 0!important}.metric-glimpse strong{font-size:21px!important}.metric-glimpse span{font-size:6.5px!important}.reputation-whisper{position:relative!important;margin-top:18px!important;width:100%!important}

  /* Information — all sources visible, 2x2 grid, then central TU DATA and matrix. */
  .insight-frame{padding-top:70px!important}.insight-convergence{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;height:auto!important;min-height:0!important;margin-top:20px!important}
  .insight-source,.source-identity,.source-track,.source-reputation,.source-physical,.insight-source.is-active,.insight-source.is-past{position:relative!important;left:auto!important;top:auto!important;width:auto!important;opacity:1!important;transform:none!important;padding:11px!important;border:1px solid rgba(244,239,230,.11)!important;background:rgba(32,41,45,.56)!important}
  .insight-source.is-active{border-color:rgba(53,179,154,.38)!important;background:rgba(32,41,45,.78)!important}.insight-source span{font-size:8.5px!important}.insight-source small{font-size:7px!important;line-height:1.38!important;color:#9caaa7!important}.insight-source i{display:none!important}
  .insight-core{position:relative!important;left:auto!important;top:auto!important;grid-column:1/-1!important;justify-self:center!important;width:12px!important;height:12px!important;margin:12px 0 18px!important;transform:none!important;opacity:1!important}.insight-core:after{content:'TU DATA';position:absolute;top:22px;left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--signal-ink);font:600 8px/1 'IBM Plex Mono',monospace;letter-spacing:.08em}
  .insight-matrix,.insight-scene:not([data-insight-stage="4"]) .insight-matrix,.insight-scene[data-insight-stage="4"] .insight-matrix{position:relative!important;right:auto!important;top:auto!important;grid-column:1/-1!important;width:68%!important;justify-self:center!important;opacity:.9!important;transform:none!important;margin-top:10px!important}.insight-caption{position:static!important;margin-top:14px!important;justify-content:center!important;font-size:7.5px!important}

  /* Physical — family first, details directly underneath. */
  .physical-frame{padding-top:70px!important}.physical-stage{position:relative!important;display:grid!important;grid-template-columns:1.05fr .8fr 1fr!important;gap:8px!important;align-items:end!important;min-height:0!important;margin:24px 0 0!important}.physical-object,.physical-stage.show-family .physical-object{opacity:.78!important;transform:none!important}.physical-object.is-active{opacity:1!important;transform:translateY(-3px) scale(1.025)!important}.physical-object small{font-size:7px!important}.nfc-card-object{width:100%!important;max-width:118px!important}.nfc-tag-object{width:64px!important}.nfc-presenter-object{width:94px!important;height:138px!important;padding:12px 8px!important}.physical-route-panel{position:relative!important;width:100%!important;margin-top:20px!important;padding-top:14px!important}.physical-route strong{font-size:21px!important}.physical-route-panel>p:nth-child(3){font-size:11px!important}.physical-principle{position:relative!important;margin-top:14px!important}

  /* Control — no dead zone. */
  .control-frame{padding-top:70px!important}.control-matrix{position:relative!important;margin-top:22px!important;padding:62px 0 0!important;overflow:visible!important}.control-central-hub{left:0!important;top:0!important;width:136px!important;height:50px!important;transform:none!important}.control-matrix div:not(.control-central-hub){gap:5px!important;min-height:27px!important}.control-matrix span{width:78px!important;font-size:7px!important}.control-matrix b{width:7px!important;height:7px!important}.control-matrix small{font-size:6px!important}.touchpoint-console{position:relative!important;width:100%!important;margin-top:16px!important;padding-top:12px!important}.console-grid{grid-template-columns:88px 1fr!important;font-size:7.5px!important}.console-actions{font-size:6.5px!important;gap:10px!important}

  /* Security — both tenants and protections in one compact block. */
  .security-frame{padding-top:70px!important}.security-domains{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:22px!important}.security-domains>div{min-height:120px!important;padding:30px 10px 10px!important;grid-template-columns:repeat(3,1fr)!important;gap:11px!important}.security-domains span{left:10px!important;top:9px!important;font-size:7.5px!important}.security-domains i{width:8px!important;height:8px!important}.security-labels{position:relative!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:10px!important}.security-labels span{font-size:7.5px!important;padding:7px 8px!important}

  /* Clean dark -> light handoff: dark message finishes first, white begins afterward. */
  .config-transition{min-height:0!important;padding:90px var(--mobile-side) 82px!important;background:var(--petrol)!important;color:var(--ivory)!important}
  .config-transition:before{display:none!important}.config-transition:after{display:none!important}.resolve-field{opacity:.12!important}.transition-copy{position:relative!important;z-index:2!important;color:var(--ivory)!important}.transition-copy h2{font-size:clamp(38px,10.5vw,46px)!important;color:var(--ivory)!important}.transition-copy h2 em{color:var(--signal-ink)!important}.transition-copy>p:not(.eyebrow){color:#bdc9c5!important;font-size:13.5px!important}.transition-step{margin-bottom:20px!important}.intent-picker{margin-top:28px!important}.intent-picker a{color:var(--ivory)!important;border-color:rgba(244,239,230,.14)!important;padding:14px 0!important;grid-template-columns:30px 1fr auto!important}.intent-picker a b{font-size:17px!important}.intent-picker a small{font-size:8px!important;color:#9baaa6!important}
  .configurator{border-top:1px solid #e2e7e5}

  /* White sections */
  .configurator,.faq,.support-section,.closing{padding-left:var(--mobile-side)!important;padding-right:var(--mobile-side)!important}.configurator{padding-top:72px!important}.config-head h2{font-size:42px!important}.faq-shell,.support-shell,.closing-shell{padding-top:64px!important;padding-bottom:64px!important}.faq-question{font-size:14px!important}.faq-inline-answer p{font-size:13.5px!important;line-height:1.5!important}
}

@media (max-width:390px){
  .scene-frame{padding-top:76px!important;padding-bottom:56px!important}
  .scene h1{font-size:40px}.scene h2{font-size:35px}
  .ecosystem-product b{font-size:25px!important}.track-destination-label strong{font-size:20px!important}
  .identity-visual{height:240px!important;min-height:240px!important}.reputation-flow{height:210px!important;min-height:210px!important}
  .nfc-presenter-object{width:86px!important;height:128px!important}.nfc-card-object{max-width:110px!important}
}


/* V13 final responsive polish after cross-device QA */
@media (max-width:767px){
  .scene{scroll-margin-top:56px}
  .identity-frame{display:flex!important;flex-direction:column!important}
  .identity-copy{order:1!important}
  .identity-visual{order:2!important}
  .identity-whisper{order:3!important}
}
@media (min-width:768px) and (max-width:1100px){.scene{scroll-margin-top:68px}}
@media (min-width:1101px){.scene{scroll-margin-top:78px}}

/* V13.1 — mobile/tablet stabilization
   Fix inherited desktop offsets, preserve secondary context, and make compact choreography visible. */
@media (max-width:1100px){
  .track-whisper,.reputation-whisper,.physical-route-panel,.physical-principle,.touchpoint-console,.metric-glimpse{
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  }
  .product-whisper,.physical-route-panel,.touchpoint-console,.metric-glimpse{box-sizing:border-box;max-width:100%!important}
  .physical-route-panel,.touchpoint-console{overflow:visible!important}
  .physical-route-panel p,.touchpoint-console *,.product-whisper p{overflow-wrap:anywhere}

  /* Compact ecosystem has one clear active module at a time, while all remain readable. */
  .ecosystem-product,.ecosystem-product.is-past{opacity:.68!important}
  .ecosystem-product.is-active{opacity:1!important;border-bottom-color:rgba(143,215,200,.55)!important}
  .ecosystem-product b{color:var(--ivory)!important}
  .ecosystem-product.is-active b{color:var(--signal-ink)!important}
  .ecosystem-product strong{opacity:.55!important;transform:none!important;color:#82938f!important}
  .ecosystem-product.is-active strong{opacity:1!important;color:var(--signal-ink)!important}

  /* Identity's three stages are visibly different instead of jumping straight to the final grid. */
  .identity-grid span{opacity:.10!important;transform:scale(.52)!important;transition:opacity .48s var(--ease),transform .48s var(--ease),background .48s var(--ease)!important}
  .identity-grid.stage-1 span:nth-child(-n+5){opacity:.86!important;transform:scale(.76)!important}
  .identity-grid.stage-2 span:nth-child(-n+18){opacity:.72!important;transform:scale(.88)!important}
  .identity-grid.stage-3 span{opacity:.82!important;transform:scale(1)!important}
  .identity-person,.identity-team-label{transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .identity-scene[data-story-stage="1"] .identity-person{opacity:1;transform:scale(1)}
  .identity-scene[data-story-stage="1"] .identity-team-label{opacity:.22}
  .identity-scene[data-story-stage="2"] .identity-person{opacity:.72;transform:scale(.92)}
  .identity-scene[data-story-stage="2"] .identity-team-label{opacity:.58}
  .identity-scene[data-story-stage="3"] .identity-person{opacity:.48;transform:scale(.86)}
  .identity-scene[data-story-stage="3"] .identity-team-label{opacity:1}
  .identity-stages span,.identity-stages b{transition:color .35s var(--ease),opacity .35s var(--ease);opacity:.58}
  .identity-scene[data-story-stage="1"] .identity-stages span:first-child,
  .identity-scene[data-story-stage="2"] .identity-stages span:nth-of-type(2),
  .identity-scene[data-story-stage="3"] .identity-stages b{color:var(--signal-ink)!important;opacity:1}
}

@media (max-width:767px){
  /* Kill residual absolute offsets inherited from desktop that were clipping content. */
  .track-whisper,.reputation-whisper,.identity-whisper,.physical-route-panel,.physical-principle,.touchpoint-console,.metric-glimpse{
    position:relative!important;inset:auto!important;transform:none!important;margin-left:0!important;margin-right:0!important;
  }
  .identity-team-label{left:auto!important;right:0!important;max-width:55%;white-space:normal;text-align:right;line-height:1.25}

  /* Secondary information remains inside the editorial column. */
  .product-whisper{width:100%!important;align-items:flex-start!important}
  .metric-glimpse{width:100%!important;padding-inline:0!important}
  .metric-glimpse>p{grid-column:1/-1;margin:0 0 2px!important;font-size:7.5px!important}
  .metric-glimpse div{min-width:0}
  .metric-glimpse strong{font-size:21px!important;white-space:nowrap}
  .metric-glimpse span{font-size:7px!important;white-space:normal;overflow-wrap:anywhere}

  .physical-route-panel{width:100%!important;padding-left:0!important;padding-right:0!important}
  .physical-route-panel>p:first-child{font-size:8.5px!important;white-space:normal}
  .physical-route{flex-wrap:wrap;row-gap:3px}
  .physical-route strong{min-width:0;overflow-wrap:anywhere}
  .physical-channel-data{flex-wrap:wrap;font-size:8.5px!important}
  .physical-principle{width:100%!important;flex-wrap:wrap!important}

  .touchpoint-console{width:100%!important;padding-left:0!important;padding-right:0!important}
  .console-head{min-width:0}.console-head b{font-size:10px}.console-head em{font-size:8px;white-space:nowrap}
  .console-grid{grid-template-columns:minmax(76px,30%) minmax(0,1fr)!important;gap:6px 10px!important;font-size:8.5px!important}
  .console-grid span,.console-grid strong{min-width:0;overflow-wrap:anywhere}
  .console-actions{flex-wrap:wrap;row-gap:6px;font-size:7.5px!important}

  /* Give each compact scene enough bottom breathing room without reintroducing dead scroll. */
  .identity-frame,.track-frame,.reputation-frame,.physical-frame,.control-frame,.security-frame{padding-bottom:72px!important}
}

/* V13.1 final containment fixes from mobile/tablet QA */
@media (max-width:767px){
  .security-labels{inset:auto!important;width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
  .security-labels span{min-width:0!important;overflow-wrap:anywhere}
}
@media (min-width:768px) and (max-width:1100px){
  .physical-stage{width:100%!important;grid-template-columns:minmax(0,1.05fr) minmax(0,.62fr) minmax(0,.78fr)!important;gap:12px!important;overflow:visible!important}
  .physical-object{min-width:0!important;width:100%!important}
  .nfc-card-object{width:100%!important;max-width:none!important;padding:14px!important}
  .nfc-tag-object{width:min(78px,100%)!important}
  .nfc-presenter-object{width:100%!important;max-width:none!important;height:210px!important;padding:18px 12px!important;gap:12px!important;transform:perspective(850px) rotateY(-3deg)!important}
  .presenter-qr{grid-template-columns:repeat(3,8px)!important;grid-template-rows:repeat(3,8px)!important;gap:3px!important;padding:5px!important}
  .presenter-qr i{width:8px!important;height:8px!important}
}
@media (min-width:1101px) and (max-width:1599px){
  .physical-stage{right:18%!important;grid-template-columns:1fr .52fr .68fr!important;gap:3.2vw!important}
  .nfc-presenter-object{width:min(13vw,170px)!important}
}
@media (min-width:768px) and (max-width:1100px){
  .physical-stage{padding-right:18px!important;box-sizing:border-box!important}
  .physical-object[data-physical-demo="presenter"]{justify-self:start!important;width:92%!important}
}

/* =========================================================
   V13.2 — Physical discoverability + compact identity/reputation
   ========================================================= */
.physical-jump{color:inherit;text-decoration:none;cursor:pointer;border:1px solid transparent;border-radius:3px;padding:8px;transition:border-color .25s,background .25s,transform .25s}
.physical-jump:hover,.physical-jump:focus-visible{border-color:rgba(213,181,109,.45);background:rgba(213,181,109,.035);outline:none}
.physical-jump p em{display:block;margin-top:5px;color:var(--signal-ink);font:500 9px/1.3 'IBM Plex Mono';font-style:normal;letter-spacing:.04em}
.physical-interaction-head{position:absolute;left:7%;top:39%;display:grid;gap:4px;z-index:3}.physical-interaction-head span{color:var(--warm);font-size:9px;letter-spacing:.08em}.physical-interaction-head p{margin:0;color:#9aaba7;font-size:12px}
.physical-selector-dots{position:absolute;left:50%;bottom:5.7%;transform:translateX(-50%);display:flex;align-items:center;gap:2px;z-index:4}.physical-selector-dots button{width:24px;height:24px;border-radius:50%;border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center}.physical-selector-dots button::after{content:'';width:7px;height:7px;border-radius:50%;border:1px solid #8fa09c;transition:transform .25s,background .25s,border-color .25s}.physical-selector-dots button.is-active::after{background:var(--signal);border-color:var(--signal);transform:scale(1.45);box-shadow:0 0 0 5px rgba(53,179,154,.08)}
.physical-object{position:relative}.physical-object:focus-visible{outline:1px solid var(--signal-ink);outline-offset:8px}.physical-object.is-active:after{content:'';position:absolute;left:22%;right:22%;bottom:-8px;height:1px;background:var(--signal);box-shadow:0 0 12px rgba(53,179,154,.35)}

@media (min-width:768px) and (max-width:1100px){
  /* Reputation: one calm vertical narrative on tablet so no metric/touchpoint is clipped. */
  .reputation-frame{display:block!important}
  .reputation-copy{max-width:650px!important;margin:0!important}
  .reputation-flow{width:min(78%,680px)!important;height:300px!important;min-height:300px!important;margin:28px auto 0!important}
  .metric-glimpse{position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;margin:20px 0 0!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
  .metric-glimpse strong{font-size:30px!important}.metric-glimpse span{font-size:9px!important}
  .reputation-whisper{position:relative!important;inset:auto!important;width:min(520px,72%)!important;margin:20px 0 0!important}

  /* Physical: keep interaction hint and selector in normal flow on tablet. */
  .physical-interaction-head{position:relative!important;left:auto!important;top:auto!important;grid-column:2;grid-row:1;margin:120px 0 12px!important;align-self:start}
  .physical-selector-dots{position:relative!important;left:auto!important;bottom:auto!important;transform:none!important;grid-column:2;margin:12px auto 0!important;justify-self:center}
  .physical-stage{grid-row:2!important}
  .physical-route-panel{grid-row:2!important;align-self:end}
  .physical-principle{grid-row:3!important}
  .physical-object{opacity:.72!important;transform:scale(.95)!important}
  .physical-object.is-active{opacity:1!important;transform:translateY(-4px) scale(1.025)!important}
  .physical-jump{padding:10px!important}
}

@media (max-width:767px){
  /* Identity visual uses the editorial width instead of reading as a tiny corner diagram. */
  .identity-visual{height:310px!important;min-height:310px!important;margin-top:22px!important;display:flex!important;align-items:center!important;justify-content:center!important}
  .identity-grid{left:6%!important;top:12%!important;width:88%!important;height:70%!important;grid-template-columns:repeat(6,1fr)!important;gap:10px 12px!important;justify-items:center!important;align-content:center!important}
  .identity-grid span{width:17px!important;height:17px!important}
  .identity-person{left:4%!important;top:43%!important}.identity-person span{width:17px!important;height:17px!important}.identity-person b{font-size:8px!important;margin-top:10px!important}
  .identity-team-label{left:0!important;right:0!important;bottom:0!important;max-width:none!important;width:100%!important;text-align:center!important;font-size:8px!important;white-space:normal!important}

  /* Physical affordance is explicit on touch devices. */
  .physical-interaction-head{position:relative!important;left:auto!important;top:auto!important;margin:30px 0 10px!important;text-align:center!important}.physical-interaction-head span{font-size:8px!important}.physical-interaction-head p{font-size:11px!important}
  .physical-stage{margin-top:12px!important}
  .physical-object{opacity:.68!important;transform:scale(.92)!important;transition:opacity .35s,transform .35s!important}
  .physical-object.is-active{opacity:1!important;transform:translateY(-5px) scale(1.035)!important}
  .physical-object small{font-size:7.5px!important}
  .physical-selector-dots{position:relative!important;left:auto!important;bottom:auto!important;transform:none!important;justify-content:center!important;margin:14px 0 0!important}
  .physical-selector-dots button::after{width:8px!important;height:8px!important}
  .physical-route-panel{margin-top:22px!important}
  .physical-jump{padding:10px 8px!important;margin-top:18px!important;border-color:rgba(213,181,109,.22)!important;background:rgba(213,181,109,.018)!important}
  .physical-jump p em{font-size:8px!important;margin-top:6px!important}
  .identity-whisper,.track-whisper,.reputation-whisper{margin-bottom:14px!important}

  /* Reputation remains linear and fully visible on phone. */
  .reputation-flow{width:100%!important}
  .metric-glimpse{margin-top:16px!important}
}

@media (max-width:390px){
  .identity-visual{height:285px!important;min-height:285px!important}.identity-grid span{width:15px!important;height:15px!important}.identity-grid{gap:8px 10px!important}
}

/* V13.2 final identity containment: flex child must stretch before percentage grid widths resolve. */
@media (max-width:767px){
  .identity-visual{width:100%!important;align-self:stretch!important;box-sizing:border-box!important}
  .identity-grid{box-sizing:border-box!important}
}

/* V13.2 desktop containment: touch affordance is reserved for touch/tablet layouts. */
@media (min-width:1101px){
  .physical-interaction-head,.physical-selector-dots{display:none!important}
}
@media (max-width:1100px){
  .physical-interaction-head{display:grid!important}
  .physical-selector-dots{display:flex!important}
}

/* =========================================================
   V13.3 — scroll-timed compact states + softer dark/light handoff
   ========================================================= */
@media (max-width:1100px){
  /* Clear active state while keeping the other modules readable. */
  .ecosystem-product{transition:opacity .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)!important}
  .ecosystem-product.is-active{background:linear-gradient(90deg,rgba(53,179,154,.055),transparent 72%)!important}
  .ecosystem-product.is-active b{color:var(--signal-ink)!important}
  .ecosystem-product.is-active small{color:var(--signal-ink)!important}
  .ecosystem-product.is-active strong{color:var(--signal-ink)!important;opacity:1!important}

  /* Identity stages change while the headline/visual are still centered. */
  .identity-grid.stage-1 span{background:#f4efe640!important}
  .identity-grid.stage-1 span:nth-child(-n+5){background:#35b39ab5!important}
  .identity-grid.stage-2 span{background:#f4efe652!important}
  .identity-grid.stage-2 span:nth-child(-n+18):nth-child(3n+1){background:#35b39aa5!important}
  .identity-grid.stage-3 span{background:#f4efe675!important}
  .identity-grid.stage-3 span:nth-child(4n+1){background:#35b39abd!important}

  /* Insight illuminates one module at a time, then resolves with all four active. */
  .insight-source{transition:border-color .28s var(--ease),background .28s var(--ease),opacity .28s var(--ease)!important}
  .insight-source.is-past{opacity:.68!important}
  .insight-source.is-active{opacity:1!important;border-color:rgba(53,179,154,.52)!important;background:rgba(53,179,154,.07)!important}
  .insight-source.is-active span{color:var(--signal-ink)!important}
  .insight-source.is-active small{color:#c5d0cd!important}

  /* The dark story finishes first; the white product area arrives through a short,
     neutral fade rather than a broad gray band. */
  .config-transition{padding-bottom:126px!important;overflow:hidden!important}
  .config-transition:after{
    display:block!important;
    content:''!important;
    position:absolute!important;
    z-index:1!important;
    left:0!important;right:0!important;bottom:0!important;
    height:86px!important;
    background:linear-gradient(180deg,rgba(22,29,32,0) 0%,rgba(247,248,247,.08) 34%,rgba(247,248,247,.42) 72%,#fff 100%)!important;
    pointer-events:none!important;
  }
  .transition-copy{z-index:2!important}
}

@media (min-width:1101px){
  .config-transition:after{
    height:96px!important;
    background:linear-gradient(180deg,rgba(22,29,32,0) 0%,rgba(247,248,247,.06) 34%,rgba(247,248,247,.36) 72%,#fff 100%)!important;
  }
}

/* V13.3 final transition tuning — short, clean fade without a gray fog band. */
@media (max-width:1100px){
  .config-transition{padding-bottom:104px!important}
  .config-transition:after{
    height:54px!important;
    background:linear-gradient(180deg,rgba(22,29,32,0) 0%,rgba(247,248,247,.10) 48%,#fff 100%)!important;
  }
}
@media (min-width:1101px){
  .config-transition:after{
    height:68px!important;
    background:linear-gradient(180deg,rgba(22,29,32,0) 0%,rgba(247,248,247,.09) 48%,#fff 100%)!important;
  }
}

/* =========================================================
   V13.4 — visible compact choreography
   ========================================================= */
.compact-stage-readout{display:none}
@media (max-width:1100px){
  .compact-stage-readout{display:inline-flex;align-items:center;gap:8px;color:var(--signal-ink);font-size:9px;letter-spacing:.09em}
  .compact-stage-readout:before{content:'';width:18px;height:1px;background:var(--signal)}

  /* Ecosystem: an unmistakable active module, not a subtle tint. */
  .ecosystem-frame{position:relative}
  .ecosystem-stage-readout{margin-top:14px}
  .ecosystem-product,.ecosystem-product.is-past{position:relative;opacity:.48!important;transform:translateX(0)!important;transition:opacity .34s var(--ease),transform .34s var(--ease),background .34s var(--ease),border-color .34s var(--ease)!important}
  .ecosystem-product.is-active{opacity:1!important;transform:translateX(8px)!important;background:linear-gradient(90deg,rgba(53,179,154,.14),rgba(53,179,154,.025) 70%,transparent)!important;border-left:2px solid var(--signal)!important;padding-left:12px!important}
  .ecosystem-product.is-active:after{content:'ACTIVO';position:absolute;right:2px;top:11px;color:var(--signal-ink);font:500 7.5px/1 'IBM Plex Mono',monospace;letter-spacing:.08em}
  .ecosystem-product.is-active b{color:var(--signal-ink)!important;text-shadow:0 0 22px rgba(53,179,154,.12)}
  .ecosystem-product.is-active em{color:#d2ddda!important}

  /* Identity: stages are visually different and explicitly labelled. */
  .identity-stage-readout{position:absolute;left:50%;top:2px;transform:translateX(-50%);z-index:3;white-space:nowrap}
  .identity-stages span,.identity-stages b{padding:3px 6px;border-radius:999px;background:transparent;color:#758682!important;opacity:.48!important}
  .identity-scene[data-story-stage="1"] .identity-stages span:first-child,
  .identity-scene[data-story-stage="2"] .identity-stages span:nth-of-type(2),
  .identity-scene[data-story-stage="3"] .identity-stages b{color:#071612!important;background:var(--signal)!important;opacity:1!important}
  .identity-grid span{opacity:.045!important;transform:scale(.42)!important}
  .identity-grid.stage-1 span:nth-child(-n+5){opacity:1!important;transform:scale(.92)!important;background:var(--signal)!important;box-shadow:0 0 0 5px rgba(53,179,154,.08)}
  .identity-grid.stage-2 span:nth-child(-n+18){opacity:.86!important;transform:scale(.9)!important;background:#e8e6df!important}
  .identity-grid.stage-2 span:nth-child(-n+18):nth-child(3n+1){background:var(--signal)!important;box-shadow:0 0 0 4px rgba(53,179,154,.06)}
  .identity-grid.stage-3 span{opacity:.9!important;transform:scale(1)!important;background:#e8e6df!important}
  .identity-grid.stage-3 span:nth-child(4n+1){background:var(--signal)!important;box-shadow:0 0 0 4px rgba(53,179,154,.07)}
  .identity-team-label{color:var(--signal-ink)!important;opacity:1!important;font-size:9px!important}

  /* Insight: one module clearly owns the moment; final state resolves all four. */
  .insight-convergence{position:relative}
  .insight-stage-readout{grid-column:1/-1;justify-self:start;margin:0 0 3px 2px}
  .insight-source,.insight-source.is-past{opacity:.40!important;transform:translateX(0)!important;border-left:2px solid transparent!important}
  .insight-source.is-active{opacity:1!important;transform:translateX(7px)!important;border-color:rgba(53,179,154,.62)!important;border-left:3px solid var(--signal)!important;background:linear-gradient(90deg,rgba(53,179,154,.14),rgba(32,41,45,.7))!important}
  .insight-source.is-active span{color:var(--signal-ink)!important;font-weight:600!important}
  .insight-source.is-active small{color:#d0dbd8!important}
  .insight-scene[data-insight-stage="4"] .insight-source{opacity:.86!important;transform:none!important;border-left-color:rgba(53,179,154,.28)!important}
  .insight-scene[data-insight-stage="4"] .insight-core{background:var(--signal)!important;box-shadow:0 0 0 12px rgba(53,179,154,.08),0 0 32px rgba(53,179,154,.18)!important}

  /* Dark to light: short handoff, no broad gray/shadow band. */
  .config-transition{padding-bottom:78px!important}
  .config-transition:after{height:24px!important;background:linear-gradient(180deg,rgba(22,29,32,0) 0%,rgba(255,255,255,.35) 62%,#fff 100%)!important}
  .configurator{box-shadow:none!important;border-top:0!important}
}
@media (min-width:1101px){
  .config-transition:after{height:34px!important;background:linear-gradient(180deg,rgba(22,29,32,0) 0%,rgba(255,255,255,.28) 60%,#fff 100%)!important}
  .configurator{box-shadow:none!important}
}

/* =========================================================
   V13.5 — shared story carousel controller
   Scroll selects the scene; autoplay/tap selects the internal stage.
   ========================================================= */
.story-carousel-control{display:flex;align-items:center;gap:8px;margin-top:18px;min-height:18px}
.story-carousel-dot{appearance:none;width:8px;height:8px;padding:0;border:1px solid rgba(143,215,200,.34);border-radius:999px;background:rgba(244,239,230,.20);cursor:pointer;transition:width .32s var(--ease),background .32s var(--ease),border-color .32s var(--ease),transform .32s var(--ease);position:relative}
.story-carousel-dot.is-active{width:26px;background:var(--signal);border-color:var(--signal);transform:translateY(-1px)}
.story-carousel-dot:focus-visible{outline:2px solid var(--signal-ink);outline-offset:4px}
.ecosystem-product,[data-insight-source],.identity-stages span,.identity-stages b{cursor:pointer}
.ecosystem-product:focus-visible,[data-insight-source]:focus-visible,.identity-stages span:focus-visible,.identity-stages b:focus-visible{outline:1px solid var(--signal);outline-offset:5px}
.ecosystem-carousel-control{margin-top:22px}
.identity-carousel-control{margin-top:14px}
.insight-carousel-control{margin-top:20px}

/* Make the active carousel state read unmistakably on desktop as well. */
@media (min-width:1101px){
  .ecosystem-product.is-active{background:linear-gradient(90deg,rgba(53,179,154,.085),transparent 72%);padding-left:12px;border-left:2px solid var(--signal)}
  .ecosystem-product.is-active:after{content:'ACTIVO';position:absolute;right:0;top:10px;color:var(--signal-ink);font:500 8px/1 'IBM Plex Mono',monospace;letter-spacing:.08em}
  .identity-stages span,.identity-stages b{cursor:pointer;padding:3px 7px;border-radius:999px;transition:background .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease)}
  .identity-scene[data-story-stage="1"] .identity-stages span:first-child,
  .identity-scene[data-story-stage="2"] .identity-stages span:nth-of-type(2),
  .identity-scene[data-story-stage="3"] .identity-stages b{background:rgba(53,179,154,.14);color:var(--signal-ink);opacity:1}
  .insight-source.is-active{opacity:1;transform:translateX(4px)}
  .insight-source.is-active span,.insight-source.is-active small{color:var(--signal-ink)}
}

@media (max-width:1100px){
  .story-carousel-control{justify-content:flex-start;margin-top:13px}
  .story-carousel-dot{width:9px;height:9px;background:rgba(244,239,230,.28)}
  .story-carousel-dot.is-active{width:30px}
  .ecosystem-carousel-control{margin:14px 0 0}
  .identity-carousel-control{margin:10px 0 0}
  .insight-carousel-control{margin:13px 0 0}
}

@media (prefers-reduced-motion:reduce){
  .story-carousel-dot{transition:none}
}

/* Páginas legales (/terminos, /privacidad, /cookies) */
.legal-header{padding:48px clamp(24px,8vw,140px) 0}
.legal-header a{font:500 13px 'IBM Plex Mono';color:var(--signal-ink);text-decoration:none}
.legal-page{max-width:820px;margin:0 auto;padding:40px clamp(24px,8vw,140px) 140px;color:var(--ink);background:#fff}
.legal-page h1{font:600 clamp(32px,4vw,52px) Fraunces;margin:0 0 8px;line-height:1.08}
.legal-page .legal-updated{font:500 12px 'IBM Plex Mono';color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 48px}
.legal-page h2{font:600 24px Fraunces;margin:48px 0 16px;border-top:1px solid var(--light-line);padding-top:32px}
.legal-page h2:first-of-type{border-top:0;padding-top:0}
.legal-page p{font:400 16px/1.7 'Public Sans';color:var(--ink);margin:0 0 16px;text-align:justify;text-align-last:left;hyphens:auto}
.legal-page p strong{font-weight:600}
.legal-page .legal-meta{background:#f5f7f6;border:1px solid var(--light-line);padding:20px 24px;margin:0 0 40px;font-size:14px}
.legal-page .legal-meta p{margin:0 0 6px;font-size:14px}
.legal-page .legal-meta p:last-child{margin:0}
.price-legal-note{margin:10px 0 0;line-height:1.5}.price-legal-note a{color:#186b5c;text-decoration:underline}

/* Landing pages SEO (/identidad-digital, /qr-inteligente, /reputacion-online)
   — header propio, no-fixed (a diferencia de .site-header, pensado para
   flotar sobre el canvas oscuro de la home). Fondo sólido petrol, misma
   paleta y tipografía que el resto del sitio. */
.landing-header{background:var(--petrol);color:var(--ivory);padding:22px clamp(24px,4.5vw,86px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.landing-header .brand{display:flex;align-items:center;gap:10px}
.landing-header nav{display:flex;align-items:center;gap:24px;font-size:13px}
.landing-header nav a:not(.button){color:#d3ddda;transition:color .2s}
.landing-header nav a:not(.button):hover{color:var(--signal-ink)}
.landing-crumb{background:#101417;color:#7c8986;padding:12px clamp(24px,4.5vw,86px);font:500 12px 'IBM Plex Mono';letter-spacing:.03em}
.landing-crumb a{color:#9fb0ac}.landing-crumb a:hover{color:var(--signal-ink)}
.landing-hero{background:linear-gradient(180deg,var(--petrol) 0%,#20292d 100%);color:var(--ivory);padding:64px 0 84px}
.landing-hero-shell{max-width:980px;margin:0 auto;padding:0 clamp(24px,8vw,140px)}
.landing-hero .eyebrow{font:500 12px 'IBM Plex Mono';letter-spacing:.1em;color:var(--signal-ink);margin:0 0 16px}
.landing-hero h1{font:600 clamp(34px,4.6vw,60px) Fraunces;line-height:1.06;margin:0 0 22px;text-wrap:balance}
.landing-hero h1 em{font-style:normal;color:var(--signal-ink)}
.landing-hero .lede{max-width:620px;color:#c8d3d0;font-size:18px;line-height:1.6;margin:0 0 32px}
.landing-hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.landing-page{max-width:980px;margin:0 auto;padding:0 clamp(24px,8vw,140px)}
.landing-section{padding:72px 0;border-top:1px solid var(--light-line)}
.landing-section:first-child{border-top:0}
.landing-section h2{font:600 clamp(28px,3.2vw,40px) Fraunces;margin:0 0 14px;line-height:1.08}
.landing-section>p.landing-intro{max-width:620px;color:var(--muted);font-size:16px;margin:0 0 40px}
.landing-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;counter-reset:step}
.landing-step{position:relative;padding-top:38px}
.landing-step:before{counter-increment:step;content:counter(step,decimal-leading-zero);position:absolute;top:0;left:0;font:500 12px 'IBM Plex Mono';color:#186b5c;letter-spacing:.05em}
.landing-step h3{font:600 19px Fraunces;margin:0 0 8px}
.landing-step p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}
.landing-pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-top:1px solid var(--ink)}
.landing-plan{padding:24px 24px 24px 0;border-bottom:1px solid #edf0ef}
.landing-pricing .landing-plan+.landing-plan{padding-left:24px;border-left:1px solid #edf0ef}
.landing-plan b{display:block;font:600 20px Fraunces;margin-bottom:4px}
.landing-plan small{display:block;color:var(--muted);font-size:13px;margin-bottom:14px}
.landing-plan strong{font:600 22px 'IBM Plex Mono'}
.landing-plan strong small{font:400 12px 'IBM Plex Mono';color:var(--muted)}
.landing-plan ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.landing-plan li{font-size:13px;color:#45514e;padding-left:18px;position:relative}
.landing-plan li:before{content:'';position:absolute;left:0;top:7px;width:7px;height:1px;background:var(--signal)}
.landing-faq details{border-bottom:1px solid #edf0ef;padding:18px 0}
.landing-faq summary{cursor:pointer;font:500 17px/1.4 'Public Sans';list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.landing-faq summary::-webkit-details-marker{display:none}
.landing-faq summary:after{content:'+';font:400 22px/1 'IBM Plex Mono';color:#186b5c;flex-shrink:0}
.landing-faq details[open] summary:after{content:'−'}
.landing-faq p{color:var(--muted);font-size:15px;line-height:1.7;margin:14px 0 0;max-width:640px}
.landing-cross{display:flex;flex-wrap:wrap;gap:14px}
.landing-cross a{border:1px solid var(--light-line);padding:14px 18px;font-size:13px;color:#186b5c;border-radius:3px}
.landing-cross a:hover{border-color:#186b5c;background:#f5f7f6}
.landing-closing{background:var(--petrol);color:var(--ivory);padding:80px clamp(24px,8vw,140px);text-align:center}
.landing-closing h2{font:600 clamp(30px,3.6vw,46px) Fraunces;margin:0 0 24px;text-wrap:balance}
@media(max-width:860px){.landing-steps{grid-template-columns:1fr}.landing-pricing{grid-template-columns:1fr}.landing-pricing .landing-plan+.landing-plan{border-left:0;padding-left:0;border-top:1px solid #edf0ef}}
.plan-group.is-focused{background:#f0f9f6;box-shadow:inset 4px 0 0 var(--signal);transition:background .4s,box-shadow .4s}

/* Página /estado — resumen de disponibilidad (UptimeRobot vía status.json) */
.status-overall{display:inline-flex;align-items:center;gap:12px;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:999px;padding:10px 22px;font:500 13px 'IBM Plex Mono';letter-spacing:.04em;margin-bottom:28px}
.status-overall .status-dot{width:9px;height:9px;border-radius:50%;background:var(--signal);flex:none;animation:livePulse 2s ease-in-out infinite}
.status-overall.is-degraded .status-dot{background:var(--warm);animation:none}
.status-overall.is-degraded{border-color:#d5b56d4a}
.status-list{max-width:980px;margin:0 auto;padding:64px clamp(24px,8vw,140px) 40px}
.status-row{display:flex;align-items:center;gap:18px;padding:22px 0;border-top:1px solid var(--light-line)}
.status-row:first-child{border-top:0}
.status-row .status-dot{width:10px;height:10px;border-radius:50%;background:var(--signal);flex:none}
.status-row.is-down .status-dot{background:#a8452f;animation:none}
.status-row .status-name{flex:1;font:600 16px Fraunces;color:var(--ink)}
.status-row .status-meta{display:flex;gap:28px;text-align:right}
.status-row .status-meta div{display:flex;flex-direction:column;gap:2px}
.status-row .status-meta strong{font:600 18px 'IBM Plex Mono';color:var(--ink)}
.status-row .status-meta span{font-size:10px;letter-spacing:.07em;color:var(--muted);text-transform:uppercase}
.status-foot{color:var(--muted);font-size:13px;margin-top:28px;padding-top:24px;border-top:1px solid var(--light-line)}
.status-foot a{color:#186b5c}
.status-foot-sub{color:#9aa5a2;font-size:11px;margin-top:10px}
@media(max-width:600px){.status-row{flex-wrap:wrap}.status-row .status-meta{width:100%;justify-content:flex-start;gap:32px;margin-left:28px}}

/* Titular del hero con el nombre completo "NEXA By TU-DATA": más largo que el original, se reduce un paso para que no empuje los CTA fuera de la primera pantalla. */
@media(min-width:1001px){.hero-copy h1{font-size:clamp(46px,3.7vw,68px)}}
@media(max-width:1000px){.hero-copy h1{font-size:clamp(38px,9.6vw,50px)}}
.support-email{margin:14px 0 0;font:500 13px 'IBM Plex Mono',monospace;color:#c0ccc8}
.support-email a{color:var(--signal-ink);text-decoration:underline}