@charset "UTF-8";

/*
  iQFeeDex — capa de profundidad.
  Se carga después de styles.css y solo añade: iconografía, 3D, luz y movimiento.
  Los tokens, la tipografía y el sistema de diseño siguen viviendo en styles.css.
*/

@property --float-rx { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --float-ry { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

body { overflow-x: clip; }

/* ---------- Iconografía base ---------- */
.ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.has-icon { font-size: 0 !important; line-height: 0; }
.ico--inline { width: 15px; height: 15px; color: var(--blue); }
.ico--eyebrow { width: 15px; height: 15px; }
.ico--chip { width: 11px; height: 11px; margin-right: 6px; color: var(--blue); vertical-align: -2px; }
.signal-strip__inner > span, .seresta-facts__inner > span { display: inline-flex; align-items: center; gap: 9px; }
.seresta-facts__inner > span { display: flex; }

.tile { --rgb: 27, 77, 177; --icon: var(--blue); --soft: #e8effc; position: relative; display: inline-grid; width: 48px; height: 48px; flex: none; place-items: center; border: 1px solid #ffffffd9; border-radius: 14px; background: linear-gradient(145deg, #ffffff 0%, var(--soft) 100%); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(var(--rgb), .14), 0 16px 26px -10px rgba(var(--rgb), .5), 0 2px 6px #102a5214; color: var(--icon); }
.tile .ico { width: 46%; height: 46%; stroke-width: 1.8; }
.tile--sm { width: 36px; height: 36px; border-radius: 11px; }
.tile--blue { --rgb: 27, 77, 177; --icon: #1b4db1; --soft: #e6eefc; }
.tile--green { --rgb: 43, 182, 115; --icon: #168a52; --soft: #e3f6ec; }
.tile--yellow { --rgb: 255, 200, 61; --icon: #9a6a00; --soft: #fff3d1; }
.tile--ink { --rgb: 16, 42, 82; --icon: #102a52; --soft: #e5eaf3; }
.tile--glass { border-color: #ffffff4d; background: linear-gradient(145deg, #ffffff30, #ffffff0f); box-shadow: inset 0 1px 0 #ffffff59, 0 20px 30px -12px #0c214280; color: #fff; backdrop-filter: blur(6px); }

/* ---------- Atmósfera global ---------- */
.depth-ambient { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.depth-ambient__orb { position: absolute; border-radius: 50%; }
.depth-ambient__orb--blue { top: -16%; right: -10%; width: min(58vw, 820px); aspect-ratio: 1; background: radial-gradient(circle, #386fe02b 0, #386fe010 45%, transparent 70%); }
.depth-ambient__orb--green { bottom: -22%; left: -12%; width: min(52vw, 740px); aspect-ratio: 1; background: radial-gradient(circle, #2bb67326 0, #2bb6730d 45%, transparent 70%); }
.depth-ambient__orb--yellow { top: 34%; left: 48%; width: min(26vw, 380px); aspect-ratio: 1; background: radial-gradient(circle, #ffc83d2e 0, #ffc83d0f 48%, transparent 70%); }
.depth-ambient__floor { position: absolute; right: -25%; bottom: -4%; left: -25%; height: 42%; overflow: hidden; transform: perspective(640px) rotateX(66deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(to top, #000 0, transparent 90%); mask-image: linear-gradient(to top, #000 0, transparent 90%); }
.depth-ambient__floor i, .stage__floor i { position: absolute; inset: -56px 0 0; background-image: linear-gradient(#1b4db124 1px, transparent 1px), linear-gradient(90deg, #1b4db124 1px, transparent 1px); background-size: 56px 56px; }
.depth-grain { position: fixed; z-index: 35; inset: 0; opacity: .05; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.depth-progress { position: fixed; z-index: 36; inset: 0 0 auto; height: 3px; pointer-events: none; }
.depth-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--green), var(--yellow)); transform: scaleX(0); transform-origin: 0 50%; }

.depth-cursor, .depth-cursor-dot { position: fixed; z-index: 40; top: 0; left: 0; border-radius: 50%; opacity: 0; pointer-events: none; }
.depth-cursor { margin: -17px 0 0 -17px; width: 34px; height: 34px; border: 1.5px solid #1b4db180; box-shadow: 0 0 0 1px #ffffff59; transition: opacity .3s ease, width .25s ease, height .25s ease, margin .25s ease, background .25s ease, border-color .25s ease; }
.depth-cursor-dot { margin: -3px 0 0 -3px; width: 6px; height: 6px; background: var(--blue); box-shadow: 0 0 0 1px #ffffffa0; transition: opacity .3s ease; }
.depth-cursor.is-active, .depth-cursor-dot.is-active { opacity: 1; }
.depth-cursor.is-hot { margin: -28px 0 0 -28px; width: 56px; height: 56px; border-color: var(--yellow); background: #ffc83d29; }

/* ---------- Preloader con profundidad ---------- */
.preloader::before { position: absolute; top: 50%; left: 50%; width: 138px; height: 138px; margin: -69px 0 0 -69px; border: 1px solid #ffffff1a; border-top-color: var(--yellow); border-right-color: #8caef4; border-radius: 50%; content: ""; }
.preloader::after { position: absolute; top: 50%; left: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; background: radial-gradient(circle, #386fe047 0, transparent 66%); content: ""; }
.preloader__brand, .preloader__line { position: relative; z-index: 1; }
.preloader__brand { text-shadow: 0 0 28px #8caef480; }

/* ---------- Botones con volumen ---------- */
.button { position: relative; overflow: hidden; }
.button::after { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 32%, #ffffff8c 49%, transparent 66%); content: ""; pointer-events: none; transform: translateX(-130%); transition: transform .75s cubic-bezier(.2, .7, .2, 1); }
.button:hover::after { transform: translateX(130%); }
.button--yellow { background: linear-gradient(180deg, #ffd96b, var(--yellow) 55%, #f6b820); box-shadow: inset 0 1px 0 #ffffffa6, 0 3px 0 #d79d10, 0 18px 26px -12px #d79d10a6; }
.button--yellow:hover { background: linear-gradient(180deg, #ffe08a, #ffd04d 55%, #f8bd26); box-shadow: inset 0 1px 0 #ffffffb3, 0 5px 0 #d79d10, 0 24px 32px -12px #d79d10b3; }
.button--yellow:active { box-shadow: inset 0 1px 0 #ffffffa6, 0 1px 0 #d79d10; }
.site-nav__cta { box-shadow: inset 0 1px 0 #ffffff26, 0 3px 0 #06142b, 0 14px 22px -12px #0c2142a6; }
.site-nav__cta:hover { box-shadow: inset 0 1px 0 #ffffff33, 0 5px 0 #06142b, 0 18px 26px -12px #1b4db199; }

/* ---------- Portada: escenario 3D ---------- */
.stage { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.stage__floor { position: absolute; right: -4%; bottom: -2%; left: -4%; height: 46%; overflow: hidden; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 92%); mask-image: linear-gradient(to top, #000 8%, transparent 92%); }
.stage__floor--dark i { background-image: linear-gradient(#9db8f529 1px, transparent 1px), linear-gradient(90deg, #9db8f529 1px, transparent 1px); }
.stage__globe { position: absolute; top: 50%; left: 50%; width: min(470px, 98%); aspect-ratio: 1; transform: translate3d(-50%, -50%, 0); }
.stage__item { position: absolute; z-index: 3; }
.stage__item--cube { top: 12%; left: 15%; perspective: 760px; }
.stage__item--minicube { bottom: 2%; left: 47%; perspective: 520px; }
.stage__item--code { top: 36%; right: -1%; perspective: 900px; }
.stage__item--chat { bottom: 7%; left: -1%; perspective: 900px; }
.stage__item--git { top: 3%; right: 40%; }
.stage__item--db { top: 63%; right: 2%; }
.stage__item--term { top: 52%; left: 7%; }
.stage__item--cloud { top: 20%; right: 20%; }
.stage__item--chip .tile { width: 44px; height: 44px; border-radius: 13px; }

.depth-ready .hero-art__system { left: 0; }
.depth-ready .art-label { z-index: 5; backdrop-filter: none; border-radius: 10px; box-shadow: 0 26px 40px -16px #102a5240, inset 0 1px 0 #fff; }
.depth-ready .art-label--top { top: 6%; right: 2%; }
.depth-ready .art-label--bottom { right: 7%; bottom: 5%; left: auto; }
.depth-ready .art-label__icon.has-icon { display: grid; border-radius: 10px; box-shadow: inset 0 -2px 0 #1b4db11f; }
.depth-ready .art-label__icon .ico { width: 15px; height: 15px; }
.depth-ready .orbit__satellite { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #fff; background: #fff; box-shadow: 0 14px 24px -8px #1b4db180, 0 0 0 1px #1b4db124; color: var(--blue); }
.depth-ready .orbit__satellite--green { width: 32px; height: 32px; color: #168a52; box-shadow: 0 14px 24px -8px #2bb67399, 0 0 0 1px #2bb67333; }
.depth-ready .orbit__satellite--yellow { width: 30px; height: 30px; color: #9a6a00; box-shadow: 0 14px 24px -8px #ffc83dcc, 0 0 0 1px #ffc83d55; }
.orbit__satellite .ico { width: 52%; height: 52%; }
.depth-ready .orbit__core { background: radial-gradient(circle at 32% 24%, #fff 0, #f1f6ff 52%, #d9e7fd 100%); box-shadow: 0 34px 60px -14px #1b4db160, 0 0 0 10px #ffffff80, 0 0 0 11px #1b4db11a, inset 0 -10px 22px #1b4db11f; }
.orbit__core::before { position: absolute; inset: -19px; border: 1.5px solid transparent; border-top-color: var(--yellow); border-right-color: var(--green); border-radius: 50%; content: ""; }

/* Cubo 3D */
.cube3d { --s: 64px; position: relative; width: var(--s); height: var(--s); transform: rotateX(-24deg) rotateY(32deg); transform-style: preserve-3d; }
.cube3d--lg { --s: 84px; }
.cube3d--sm { --s: 46px; }
.cube3d--wire { --s: 118px; }
.cube3d__face { position: absolute; inset: 0; display: grid; place-items: center; border: 1px solid #1b4db14d; background: linear-gradient(145deg, #ffffffeb, #deeaffb3); box-shadow: inset 0 0 22px #386fe029; color: var(--blue); }
.cube3d__face .ico { width: 38%; height: 38%; }
.cube3d__face--front { transform: translateZ(calc(var(--s) / 2)); }
.cube3d__face--back { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cube3d__face--right { background: linear-gradient(145deg, #eaf1ffe6, #c9dcffb3); transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cube3d__face--left { background: linear-gradient(145deg, #eaf1ffe6, #c9dcffb3); transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cube3d__face--top { background: linear-gradient(145deg, #fff, #eef4ff); color: var(--green); transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.cube3d__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.cube3d--wire .cube3d__face { border-color: #9db8f547; background: transparent; box-shadow: inset 0 0 26px #9db8f51a; color: #9db8f580; }

/* Ventanas flotantes */
.deck { width: 206px; overflow: hidden; border: 1px solid #e1e9f5; border-radius: 9px; background: linear-gradient(160deg, #fff, #f2f6fd); box-shadow: 0 34px 50px -18px #102a5247, 0 1px 0 #fff inset; transform: perspective(900px) rotateY(-17deg) rotateX(7deg); }
.deck--chat { width: 188px; transform: perspective(900px) rotateY(16deg) rotateX(6deg); }
.deck__bar { display: flex; height: 27px; align-items: center; gap: 5px; padding: 0 11px; border-bottom: 1px solid #e8eef7; background: #f8fafe; }
.deck__bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.deck__bar i:nth-child(2) { background: var(--green); }
.deck__bar i:nth-child(3) { background: #8caef4; }
.deck__tab { width: 56px; height: 7px; margin-left: 10px; border-radius: 4px; background: #e3eaf6; }
.deck__body { padding: 13px 13px 12px; }
.code-line { display: flex; gap: 5px; margin: 0 0 8px; transform-origin: 0 50%; }
.code-line b { display: block; height: 6px; border-radius: 3px; background: #d5deec; }
.code-line .tone-k { background: var(--blue); }
.code-line .tone-b { background: #8caef4; }
.code-line .tone-g { background: var(--green); }
.code-line .tone-y { background: var(--yellow); }
.deck__caret { display: block; width: 6px; height: 12px; background: var(--yellow); }
.deck__head { display: flex; align-items: center; gap: 8px; padding: 10px 11px; border-bottom: 1px solid #e8eef7; background: #f8fafe; }
.deck__avatar { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #168a52; color: #fff; }
.deck__avatar .ico { width: 15px; height: 15px; }
.deck__title { width: 54px; height: 6px; border-radius: 3px; background: #cfd9ea; }
.deck__live { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px #2bb67330; }
.deck__thread { display: grid; gap: 8px; padding: 12px 11px 13px; }
.bubble { display: grid; width: 76%; gap: 5px; padding: 8px 10px; border-radius: 10px; background: #eef3fb; }
.bubble b { display: block; height: 5px; border-radius: 3px; background: #10294f2e; }
.bubble--in { border-bottom-left-radius: 3px; }
.bubble--out { justify-self: end; width: 62%; border-bottom-right-radius: 3px; background: #dcf4e8; }
.bubble--card { display: flex; width: 100%; align-items: center; gap: 8px; border: 1px solid #ffe7a6; background: #fff6dc; color: #9a6a00; }
.bubble--card .ico { width: 17px; height: 17px; }
.bubble--card b { flex: 1; max-width: 52%; }
.bubble--card em { width: 15px; height: 15px; margin-left: auto; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 9px no-repeat; }

/* ---------- Señal tecnológica ---------- */
.signal-strip { overflow: hidden; }
.tech-ribbon { overflow: hidden; border-top: 1px solid var(--line); background: linear-gradient(90deg, #fff, var(--wash) 50%, #fff); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.tech-ribbon__track { display: flex; width: max-content; gap: 22px; padding: 17px 11px; }
.tech-ribbon .tile { width: 42px; height: 42px; border-radius: 12px; }

/* ---------- Tarjetas con inclinación y luz ---------- */
.depth-card { position: relative; transform-style: preserve-3d; }
.depth-card::after { position: absolute; inset: 0; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), #386fe024, transparent 62%); content: ""; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.depth-card.is-tilting::after { opacity: 1; }
.product-preview.depth-card::after, .seresta-console.depth-card::after { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), #ffffff1f, transparent 62%); }

.approach-card { box-shadow: 0 1px 0 #fff inset, 0 20px 34px -26px #102a5259; }
.approach-card__mark.has-icon { top: 16px; right: 16px; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; background: linear-gradient(145deg, #fff, #e8effc); box-shadow: inset 0 -3px 0 #1b4db114, 0 16px 24px -10px #1b4db166, 0 2px 6px #102a5214; transform: translateZ(34px); }
.approach-card--green .approach-card__mark.has-icon { background: linear-gradient(145deg, #fff, #e3f6ec); box-shadow: inset 0 -3px 0 #2bb67324, 0 16px 24px -10px #2bb67380, 0 2px 6px #102a5214; }
.approach-card--blue .approach-card__mark.has-icon { background: linear-gradient(145deg, #fff, #dfe8fb); }
.approach-card__mark .ico { width: 22px; height: 22px; }
.approach-card h3 { transform: translateZ(18px); }
.approach-card__number { display: inline-block; transform: translateZ(10px); }

/* ---------- Servicios ---------- */
.services__depth { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.services__depth .stage__floor { right: -12%; bottom: -3%; left: -12%; height: 40%; }
.wire { position: absolute; perspective: 800px; }
.wire--lg { top: 8%; right: 5%; }
.wire--sm { right: 14%; bottom: 24%; }
.wire--sm .cube3d { --s: 62px; }
.depth-ready .service-item { grid-template-columns: 34px 48px 1fr 22px; align-items: start; transition: background .3s ease; }
.depth-ready .service-item > * { grid-row: 1; }
.service-item__index { grid-column: 1; }
.service-item__tile { grid-column: 2; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #ffffff2e; border-radius: 13px; background: linear-gradient(145deg, #ffffff2b, #ffffff0a); box-shadow: inset 0 1px 0 #ffffff40, 0 18px 26px -12px #00000080; color: #9db8f5; transition: transform .35s cubic-bezier(.2, .7, .2, 1), color .25s ease, box-shadow .3s ease; }
.service-item__tile .ico { width: 22px; height: 22px; }
.depth-ready .service-item > div { grid-column: 3; }
.depth-ready .service-item__arrow { grid-column: 4; }
.service-item:hover .service-item__tile { color: var(--yellow); box-shadow: inset 0 1px 0 #ffffff59, 0 24px 32px -12px #ffc83d66; transform: translateY(-4px) rotate(-6deg); }

/* ---------- Producto ---------- */
.product-preview { overflow: visible; }
.product-preview::before { content: none; }
.depth-clip { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.depth-clip::before { position: absolute; top: -150px; right: -80px; width: 340px; height: 340px; border: 1px solid #ffffff1a; border-radius: 50%; box-shadow: 0 0 0 38px #ffffff08, 0 0 0 76px #ffffff06; content: ""; }
.depth-clip::after { position: absolute; inset: 0; background-image: linear-gradient(#ffffff0d 1px, transparent 1px), linear-gradient(90deg, #ffffff0d 1px, transparent 1px); background-size: 38px 38px; content: ""; -webkit-mask-image: radial-gradient(ellipse at 70% 20%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 70% 20%, #000, transparent 70%); }
.product-preview__window { transform: translateZ(42px); box-shadow: 0 34px 60px -14px #07162b99; }
.product-preview__topline, .product-preview__footer { transform: translateZ(14px); }
.pp-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 7px 13px 7px 7px; border: 1px solid #ffffffd9; border-radius: 12px; background: #ffffffed; box-shadow: 0 30px 40px -14px #00000080; transform: translateZ(86px); }
.pp-float--ok, .pp-float--bell { padding: 6px; border-radius: 16px; }
.pp-float--chat { top: 33%; left: 4%; }
.pp-float--ok { right: 5%; bottom: 20%; }
.pp-float--bell { top: 22%; right: 7%; transform: translateZ(60px); }
.pp-float__lines { display: grid; width: 58px; gap: 5px; }
.pp-float__lines b { display: block; height: 5px; border-radius: 3px; background: #cfd9ea; }
.pp-float__lines b:last-child { width: 68%; }
.pp-float--static { position: relative; z-index: auto; transform: perspective(700px) rotateY(14deg) rotateX(4deg); }
.ico--chip { color: #8caef4; }
.product-preview__chips span { display: inline-flex; align-items: center; }
.product-preview__chips .ico--chip { color: var(--blue); }

/* ---------- Proceso ---------- */
.process-step { transition-property: opacity, transform; }
.process-step__line { width: 100%; height: 2px; background: linear-gradient(90deg, var(--green), var(--blue) 60%, #dce3ed); transform: scaleX(.14); transform-origin: 0 50%; }
.process-step__tile { position: absolute; top: 20px; right: 0; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #fff; border-radius: 13px; background: linear-gradient(145deg, #fff, #e8effc); box-shadow: inset 0 -3px 0 #1b4db114, 0 16px 24px -12px #1b4db180, 0 2px 6px #102a5214; color: var(--blue); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.process-step:nth-child(2) .process-step__tile { color: #168a52; background: linear-gradient(145deg, #fff, #e3f6ec); }
.process-step:nth-child(3) .process-step__tile { color: #9a6a00; background: linear-gradient(145deg, #fff, #fff3d1); }
.process-step:nth-child(4) .process-step__tile { color: #102a52; background: linear-gradient(145deg, #fff, #e5eaf3); }
.process-step__tile .ico { width: 22px; height: 22px; }
.process-step:hover .process-step__tile { transform: translateY(-5px) rotate(-6deg); }

/* ---------- Contacto ---------- */
.contact__globe { position: absolute; inset: 0; width: 100%; height: 100%; }
.contact__depth { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.contact__tile { position: absolute; width: 54px; height: 54px; border-radius: 16px; }
.contact__tile .ico { width: 24px; height: 24px; }
.contact__tile--mail { top: 15%; right: 24%; }
.contact__tile--phone { right: 10%; bottom: 20%; width: 48px; height: 48px; }
.contact__tile--chat { top: 40%; right: 5%; width: 44px; height: 44px; }

/* ---------- SERESTA ---------- */
.stage--seresta { z-index: 0; }
.stage--seresta .stage__floor { right: -6%; left: -6%; }
.stage--seresta .stage__globe { width: min(400px, 94%); opacity: .85; }
.stage__item--s1 { top: 6%; left: 3%; }
.stage__item--s2 { top: 8%; right: 3%; }
.stage__item--s3 { bottom: 9%; left: 4%; }
.stage__item--s4 { right: 4%; bottom: 8%; }
.depth-ready .seresta-console { transform: perspective(1100px) rotateX(calc(var(--rx, 0deg) + var(--float-rx))) rotateY(calc(var(--ry, 0deg) + var(--float-ry))); transform-style: preserve-3d; transition: transform .16s ease-out; box-shadow: 0 50px 70px -26px #102a5266, 0 0 0 1px #ffffff1a inset; }
.seresta-console__mark { transform: translateZ(30px); box-shadow: 0 14px 22px -8px #2bb67399; }
.seresta-console__headline { transform: translateZ(20px); }
.seresta-console__flow { transform: translateZ(12px); }
.seresta-console__step { position: relative; }
.ico--step { position: absolute; top: 3px; left: 27px; width: 12px; height: 12px; color: #9db8f5; }
.seresta-mode__top .tile { margin-right: 12px; }
.seresta-mode__mark { margin-right: auto; }
.seresta-mode { box-shadow: 0 24px 40px -32px #102a5259; }
.seresta-trust { position: relative; overflow: hidden; }
.seresta-trust__inner { position: relative; z-index: 1; }
.seresta-trust__depth { position: absolute; inset: 0; pointer-events: none; }
.seresta-trust__depth .stage__floor { right: -10%; bottom: -4%; left: 30%; height: 70%; }
.seresta-trust__checklist > div > span { display: grid; justify-items: center; gap: 4px; }
.ico--check { width: 19px; height: 19px; color: var(--blue); }

/* ---------- Legal y pie ---------- */
.legal-hero { position: relative; overflow: hidden; }
.legal-hero__inner { position: relative; z-index: 1; }
.legal-hero__depth { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.legal-hero__depth .stage__floor { right: -10%; bottom: -8%; left: 40%; height: 60%; }
.stage__item--legal { top: 34%; right: 13%; perspective: 760px; }
.legal-hero__tile { position: absolute; right: 26%; bottom: 20%; }
.site-footer__column a, .site-footer__column > span:not(.site-footer__label) { display: inline-flex; align-items: center; gap: 9px; }
.site-footer .ico--inline { color: #8caef4; }
.site-footer { position: relative; overflow: hidden; background: radial-gradient(ellipse at 85% 0, #17356a 0, #0a1c38 55%); }
.whatsapp-float::before { position: absolute; inset: -2px; border: 2px solid #2bb67399; border-radius: 50%; content: ""; opacity: 0; }

/* ---------- Texto con brillo ---------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 span { background: linear-gradient(100deg, #1b4db1 0%, #386fe0 36%, #2bb673 62%, #1b4db1 100%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 12px 16px #1b4db138); text-shadow: none; }
}

/* ---------- Movimiento (solo con preferencia estándar) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .preloader { animation: depth-loader-out .65s .35s cubic-bezier(.6, 0, .2, 1) forwards; }
  .preloader::before { animation: depth-spin .9s linear infinite; }
  .preloader::after { animation: depth-pulse 1.4s ease-in-out infinite alternate; }
  .preloader__brand { animation: depth-brand .6s ease both; }

  .reveal { transform: perspective(1000px) translate3d(0, 40px, -70px) rotateX(10deg); transform-origin: 50% 100%; transition: opacity .8s ease, transform .95s cubic-bezier(.2, .7, .2, 1); }
  .reveal.is-visible { transform: perspective(1000px) translate3d(0, 0, 0) rotateX(0deg); }
  .process-step.is-visible .process-step__line { transform: scaleX(1); transition: transform 1.3s .35s cubic-bezier(.2, .7, .2, 1); }

  .depth-card.is-tilting { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, -4px, 0); transition: transform .14s ease-out, box-shadow .3s ease, opacity .65s ease; transition-delay: 0s; box-shadow: 0 34px 54px -22px #102a5259; }
  .depth-ready .seresta-console.depth-card.is-tilting { transform: perspective(1100px) rotateX(calc(var(--rx, 0deg) + var(--float-rx))) rotateY(calc(var(--ry, 0deg) + var(--float-ry))); box-shadow: 0 50px 70px -26px #102a5266, 0 0 0 1px #ffffff1a inset; }
  .depth-ready .seresta-console { animation: console-sway 7s ease-in-out infinite alternate; }
  .service-item:hover { background: linear-gradient(90deg, #ffffff0f, transparent 70%); }

  .depth-ambient__orb--blue { animation: depth-drift 18s ease-in-out infinite alternate; }
  .depth-ambient__orb--green { animation: depth-drift 22s -6s ease-in-out infinite alternate-reverse; }
  .depth-ambient__orb--yellow { animation: depth-drift 15s -3s ease-in-out infinite alternate; }

  .depth-ambient__floor i, .stage__floor i { animation: depth-floor 3.2s linear infinite; }

  .cube3d { animation: cube-spin 20s linear infinite, depth-float 6s ease-in-out infinite alternate; }
  .cube3d--sm { animation-duration: 14s, 5s; animation-direction: reverse, alternate; }
  .cube3d--wire { animation-duration: 34s, 9s; }
  .deck { animation: depth-float 6.5s ease-in-out infinite alternate; }
  .deck--chat { animation-delay: -2.4s; animation-duration: 7.5s; }
  .stage__item--chip .tile, .pp-float, .contact__tile, .legal-hero__tile { animation: depth-float 5.5s ease-in-out infinite alternate; }
  .stage__item--db .tile { animation-delay: -1.6s; }
  .stage__item--term .tile { animation-delay: -3.1s; }
  .stage__item--cloud .tile { animation-delay: -4.2s; }
  .pp-float--bell { animation-delay: -2s; }
  .pp-float--ok { animation-delay: -3.4s; }
  .contact__tile--phone { animation-delay: -2.2s; }
  .contact__tile--chat { animation-delay: -3.6s; }

  .code-line { animation: code-type 7s ease-in-out infinite both; animation-delay: calc(var(--i) * .38s); }
  .deck__caret { animation: depth-blink 1s steps(2) infinite; }
  .bubble { animation: bubble-pop 8s ease-in-out infinite both; animation-delay: calc(var(--i) * 1.1s); }
  .deck__live { animation: depth-pulse 1.6s ease-in-out infinite alternate; }

  .orbit__satellite .ico { animation: sat-counter var(--orbit-duration, 34s) linear infinite; }
  .orbit--two .orbit__satellite .ico { animation-direction: reverse; }
  .orbit__core::before { animation: depth-spin 7s linear infinite; }

  .hero h1 span { animation: depth-shimmer 8s linear infinite; }
  .tech-ribbon__track { animation: ribbon-run 46s linear infinite; }
  .tech-ribbon:hover .tech-ribbon__track { animation-play-state: paused; }
  .whatsapp-float::before { animation: wa-pulse 2.8s 2.2s ease-out infinite; }
  .hero__scroll span { transform-origin: 0 50%; animation: scroll-hint 2s ease-in-out infinite; }
}

@keyframes depth-loader-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; visibility: hidden; transform: scale(1.06); } }
@keyframes depth-brand { from { opacity: 0; transform: translateY(10px) scale(.94); } }
@keyframes depth-spin { to { transform: rotate(360deg); } }
@keyframes depth-pulse { from { opacity: .55; transform: scale(.94); } to { opacity: 1; transform: scale(1.05); } }
@keyframes depth-drift { from { transform: translate3d(-3%, -2%, 0) scale(.96); } to { transform: translate3d(4%, 3%, 0) scale(1.06); } }
@keyframes console-sway { from { --float-ry: -3.5deg; --float-rx: 1.5deg; } to { --float-ry: 3.5deg; --float-rx: -1.5deg; } }
@keyframes depth-floor { to { transform: translate3d(0, 56px, 0); } }
@keyframes depth-float { from { translate: 0 0; } to { translate: 0 -12px; } }
@keyframes cube-spin { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(360deg); } }
@keyframes code-type { 0% { opacity: 0; transform: scaleX(0); } 10% { opacity: 1; } 24%, 86% { opacity: 1; transform: scaleX(1); } 96%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes bubble-pop { 0% { opacity: 0; transform: translateY(10px) scale(.94); } 7%, 84% { opacity: 1; transform: translateY(0) scale(1); } 95%, 100% { opacity: 0; transform: translateY(0) scale(1); } }
@keyframes depth-blink { 50% { opacity: 0; } }
@keyframes sat-counter { from { transform: rotate(calc(var(--orbit-start, 0deg) * -1)); } to { transform: rotate(calc(var(--orbit-start, 0deg) * -1 - 360deg)); } }
@keyframes depth-shimmer { to { background-position: 220% 0; } }
@keyframes ribbon-run { to { transform: translate3d(-50%, 0, 0); } }
@keyframes wa-pulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes scroll-hint { 50% { transform: scaleX(.45); } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .stage__item--code, .stage__item--chat { scale: .82; }
  .stage__item--minicube { display: none; }
}
@media (max-width: 980px) {
  .stage__item--code { right: -5%; }
  .stage__item--chat { left: 3%; scale: .74; }
  .stage__item--term, .stage__item--db { display: none; }
  .depth-ready .art-label--top { right: 0; }
  .wire--lg { right: 3%; }
  .legal-hero__depth { opacity: .7; }
}
@media (max-width: 700px) {
  .stage__item, .stage__floor, .contact__depth, .pp-float, .wire { display: none; }
  .stage__globe { width: min(420px, 108vw); opacity: .4; }
  .depth-ready .hero-art__system { left: 0; }
  .depth-ready .orbit__satellite { width: 28px; height: 28px; }
  .stage--seresta .stage__globe { opacity: .8; }
  .stage--seresta .stage__item--s2, .stage--seresta .stage__item--s3 { display: block; scale: .8; }
  .stage--seresta .stage__item--s2 { top: 6%; right: 5%; }
  .stage--seresta .stage__item--s3 { bottom: 8%; left: 5%; }
  .depth-ready .service-item { grid-template-columns: 26px 40px 1fr 18px; }
  .service-item__tile { width: 38px; height: 38px; border-radius: 11px; }
  .service-item__tile .ico { width: 18px; height: 18px; }
  .approach-card__mark.has-icon { top: 10px; right: 12px; width: 36px; height: 36px; border-radius: 11px; }
  .approach-card__mark .ico { width: 18px; height: 18px; }
  .process-step__tile { top: 16px; width: 38px; height: 38px; border-radius: 11px; }
  .process-step__tile .ico { width: 18px; height: 18px; }
  .legal-hero__depth { display: none; }
  .tech-ribbon__track { gap: 16px; padding-block: 12px; }
  .tech-ribbon .tile { width: 36px; height: 36px; border-radius: 10px; }
  .seresta-mode__top .tile { width: 32px; height: 32px; }
}
@media (max-width: 390px) and (max-height: 740px) {
  .depth-ready .service-item { grid-template-columns: 22px 34px 1fr 16px; }
  .service-item__tile { width: 32px; height: 32px; }
  .approach-card__mark.has-icon { top: 8px; width: 30px; height: 30px; }
  .approach-card__mark .ico { width: 15px; height: 15px; }
  .process-step__tile { top: 10px; width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .depth-cursor, .depth-cursor-dot, .stage__item--cube, .stage__item--minicube { display: none; }
  .process-step__line { transform: scaleX(1); }
}

/* Zonas fuera de pantalla: sus animaciones se pausan (lo marca depth.js) */
.is-offscreen, .is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }