/* Tres planos dentro del recorrido. El documento conserva su scroll y navegación. */
.integration-stage{position:relative;scroll-margin-top:0;margin-top:34px}
.integration-depth-nav{display:flex;align-items:stretch;gap:27px;border-top:1px solid #ffffff2b;border-bottom:1px solid #ffffff2b;position:relative;z-index:4}
.integration-depth-nav button{display:flex;gap:10px;align-items:center;padding:20px 0;min-height:62px;font-size:15px;color:#bbc8da;background:none;border:0;border-bottom:2px solid transparent}
.integration-depth-nav button>span:first-child{font-size:11px;letter-spacing:.9px;color:#9dadc4}
.integration-depth-nav button[aria-current=step]{color:#fff;border-bottom-color:#e6a4b9}
.integration-depth-nav button[aria-current=step]>span:first-child{color:#efbdd0}
.integration-depth-nav button:hover:not(:disabled){color:#fff}
.integration-depth-nav button:disabled{opacity:.44;cursor:default}
.integration-current-item{margin-left:auto;display:flex;align-items:center;font-size:14px;color:#efbdd0;padding-left:15px}
.integration-planes{position:relative;perspective:1500px;isolation:isolate;overflow:clip}
.integration-plane{position:absolute;top:0;left:0;width:100%;transform-origin:center top;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s ease,visibility .4s;will-change:transform,opacity}
.integration-plane[aria-hidden=true]{pointer-events:none;user-select:none}
.integration-stage .network-scene{margin:0;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s ease;transform-origin:center top}
.integration-plane-connections{z-index:1;opacity:1;transform:translateZ(0)}
.integration-plane-details,.integration-plane-examples{z-index:2;padding:40px 0 20px;visibility:hidden;opacity:0;transform:translateZ(110px) translateY(28px);background:radial-gradient(ellipse at 90% 15%,#69364924,transparent 60%),linear-gradient(#121416eb,#121416fa 70%)}
.integration-plane-examples{z-index:3}
.integration-stage[data-depth="1"] .integration-plane-connections,
.integration-stage[data-depth="2"] .integration-plane-details,
.integration-stage[data-depth="3"] .integration-plane-examples{position:relative;visibility:visible;opacity:1;transform:translateZ(0) translateY(0);pointer-events:auto}
.integration-stage[data-depth="2"] .integration-plane-connections{transform:translateZ(-180px) translateY(-13px) rotateX(5deg);opacity:.2}
.integration-stage[data-depth="3"] .integration-plane-connections{transform:translateZ(-320px) translateY(-20px) rotateX(8deg);opacity:.09}
.integration-stage[data-depth="3"] .integration-plane-details{visibility:visible;transform:translateZ(-150px) translateY(-17px) rotateX(4deg);opacity:.17}
.integration-stage .platforms-icon{background:#293b4b;color:#a8d6f4}.integration-stage .stores-icon{background:#2b3e34;color:#b3e3c2}
.integration-explore-hint{display:flex;gap:23px;align-items:center;border-top:1px solid #ffffff28;border-bottom:1px solid #ffffff28;padding:24px 0;color:#dce3ee}
.hint-index{font-size:12px;color:#becbdf;letter-spacing:1px;flex:none}.integration-explore-hint strong{font-size:20px;font-weight:600;color:#fff}.integration-explore-hint p{font-size:16px;line-height:1.8;color:#bfcada;margin-top:4px}.hint-arrow{margin-left:auto;font-size:27px;color:#d09aaa}
.integration-stage:not([data-depth="1"]) .integration-explore-hint{display:none}
.integration-footer{justify-content:flex-start}.integration-footer>span{max-width:none}
.layer-eyebrow{display:flex;align-items:center;gap:11px;font-size:12px;text-transform:uppercase;letter-spacing:1.4px;color:#f0b7c9;margin-bottom:20px}.layer-dot{width:6px;height:6px;background:#e295b0;border-radius:50%;box-shadow:0 0 12px #e295b066}.layer-eyebrow-divider{color:#9aa5b6}
.integration-depth-title{font-size:39px;line-height:1.18;letter-spacing:-1.4px;max-width:900px;font-weight:550;outline:none;color:#f6f8fc}
.layer-description{font-size:18px;line-height:1.85;color:#d1dbe9;max-width:970px;margin-top:21px}
.before-after{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:32px}
.before-after>div{padding:23px 26px;border-top:1px solid #63748c;border-bottom:1px solid #ffffff18;background:#1e29395c}
.before-after>.after-card{border-top-color:#c68da4;background:#4a2a3c3b}
.before-after h4{font-size:18px;display:flex;align-items:center;gap:13px;margin-bottom:15px;color:#f0f5fc;font-weight:600}
.before-after h4>span{font-size:22px;color:#d9acbf;font-weight:400}.before-after p{font-size:17px;line-height:1.85;color:#d0daea}
.layer-flow{margin-top:28px}.layer-flow-title{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#b4c3d8}
.layer-flow ol{display:flex;gap:0;padding:0;margin:14px 0 0;list-style:none;border-top:1px solid #ffffff1c;padding-top:20px}
.layer-flow li{flex:1;font-size:15px;color:#e5ebf4;display:flex;align-items:center;gap:16px;line-height:1.7}
.layer-flow li+li:before{content:'→';color:#bda2b4;margin:0 3px 0 13px;font-size:19px}
.integration-inline-actions{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:26px 0 0;margin-top:30px;border-top:1px solid #ffffff2b}
.depth-back{font-size:15px;border:0;padding:12px 0;background:none;color:#d5deec;min-height:45px;text-align:left}
.depth-back:hover{color:#fff}.depth-next{border:1px solid #8c697c;background:#3d2b39;color:#fff;font-size:16px;padding:13px 19px;border-radius:4px;display:flex;align-items:center;gap:24px;min-height:49px}
.depth-next:hover{background:#543448;border-color:#bc8ca2}
.integration-examples{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin-top:34px}
.integration-example{padding:25px;border-top:1px solid #9b788f;border-bottom:1px solid #ffffff22;background:#1b243264;display:flex;flex-direction:column;align-items:flex-start}
.example-symbol{height:43px;min-width:43px;display:grid;place-items:center;padding:0 7px;border:1px solid #b591a94d;background:#563b5144;border-radius:6px;color:#f1c1d5;font-size:23px;margin-bottom:24px}
.integration-example h4{font-size:23px;line-height:1.3;font-weight:600;color:#f7f9fc}
.integration-example p{font-size:17px;line-height:1.85;color:#ccd8eb;margin-top:17px;margin-bottom:27px}
.example-flow{margin-top:auto;padding-top:18px;border-top:1px solid #8294ae55;font-size:14px;line-height:1.8;color:#ebc2d5;width:100%}
.layer-note{font-size:13px;color:#bac7db;line-height:1.8;margin-top:23px}

.case-demo{display:flex;align-items:center;gap:15px;padding:20px 24px;margin-top:14px;border:1px solid #876070;border-radius:6px;background:#30232d;color:#fff;transition:background .2s,border-color .2s}.case-demo strong{font-size:17px;font-weight:600}.case-demo small{display:block;font-size:13px;color:#d6c4d1;line-height:1.7;margin-top:5px}.case-demo>span:last-child{margin-left:auto;font-size:23px}.demo-live-dot{width:7px;height:7px;border-radius:50%;background:#e9adbe;box-shadow:0 0 18px #e9adbe66;flex:none}.case-demo:hover{background:#402c3b;border-color:#c191a5}
.social-links{gap:12px}.social-links a{padding:0;width:46px;height:46px;min-height:46px;justify-content:center;border-radius:50%;gap:0}.social-links img,.social-links svg{width:21px;height:21px}.social-links a:hover{color:#ffb9c9;transform:translateY(-2px)}

@media(max-width:1000px){
 .integration-depth-title{font-size:35px}.integration-examples{gap:20px}.integration-example{padding:22px}.integration-example p{font-size:16px}.layer-description{font-size:17px}.before-after{gap:23px}
}
@media(max-width:800px){
 .integration-stage .network-scene{margin:0;padding-top:12px;padding-bottom:20px}
 .integration-depth-nav{gap:22px}.integration-depth-nav button{font-size:14px;gap:8px;padding:18px 0}.integration-current-item{font-size:12px}
 .integration-examples{grid-template-columns:1fr}.integration-example{padding:25px}.integration-example p{font-size:17px}
 .integration-plane-details,.integration-plane-examples{padding-top:31px}.integration-depth-title{font-size:34px}
 .layer-flow ol{flex-direction:column;gap:11px}.layer-flow li+li:before{content:'↓';margin:0 8px 0 0}.layer-flow li:first-child{padding-left:31px}
 .integration-explore-hint{gap:17px}.integration-explore-hint p{font-size:16px}
}
@media(max-width:560px){
 .integration-stage{margin-top:27px}.integration-depth-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
 .integration-depth-nav button{flex-direction:column;gap:4px;justify-content:center;font-size:13px;padding:13px 3px;min-height:68px}.integration-depth-nav button>span:first-child{font-size:10px}
 .integration-current-item{display:none}.integration-plane-details,.integration-plane-examples{padding-top:28px;padding-bottom:7px}
 .integration-depth-title{font-size:30px;letter-spacing:-1px}.layer-eyebrow{font-size:11px;gap:8px;letter-spacing:1px;margin-bottom:19px}
 .layer-description{font-size:17px;line-height:1.85;margin-top:19px}.before-after{grid-template-columns:1fr;gap:20px;margin-top:27px}
 .before-after>div{padding:21px}.before-after p{font-size:16px}.before-after h4{font-size:18px}.layer-flow li{font-size:14px}
 .integration-inline-actions{flex-wrap:wrap;gap:12px;padding-top:21px;margin-top:25px}.depth-back{font-size:14px}.depth-next{width:100%;justify-content:space-between;font-size:15px;min-height:49px}
 .integration-examples{gap:22px;margin-top:29px}.integration-example{padding:23px}.integration-example h4{font-size:22px}.integration-example p{font-size:17px}.example-flow{font-size:13px}.layer-note{font-size:12px}
 .hint-index{align-self:flex-start;margin-top:5px;font-size:10px}.integration-explore-hint strong{font-size:18px}.integration-explore-hint{gap:14px}.hint-arrow{display:none}
 .case-demo{padding:19px;gap:12px}.case-demo strong{font-size:16px}.case-demo small{font-size:12px}.social-links{gap:12px}
}
@media(prefers-reduced-motion:reduce){
 .integration-plane,.integration-stage .network-scene,.social-links a,.case-demo{transition:none;will-change:auto}
 .integration-stage[data-depth] .integration-plane{transform:none}
 .integration-stage{scroll-margin-top:0}
}