html,body{overflow-x:hidden;max-width:100vw}section{overflow-x:clip;max-width:100vw}.container-main{max-width:1280px;margin:0 auto;padding:0 2rem;overflow-x:clip}#navbar{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.5rem 0;transition:background .4s ease,padding .4s ease,backdrop-filter .4s ease}#navbar.scrolled{padding:1rem 0;background:rgba(14,14,14,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-base)}.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}.nav-logo img{height:28px;width:auto}.nav-links{display:flex;align-items:center;gap:2rem}.nav-links a{font-size:.875rem;font-weight:500;color:var(--text-secondary);text-decoration:none;transition:color .2s;letter-spacing:.01em}.nav-links a:hover{color:var(--text-primary)}.nav-dropdown{position:relative;display:inline-block}.nav-dropdown-trigger{display:flex;align-items:center;gap:.25rem;cursor:pointer}.nav-dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);background:rgba(14,14,14,.97);border:1px solid var(--border-strong);border-radius:.5rem;padding:.5rem 0;min-width:240px;opacity:0;visibility:hidden;transition:all .3s ease;backdrop-filter:blur(16px);box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:100}.nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}.nav-dropdown-menu a{display:block;padding:.75rem 1.25rem;color:var(--text-secondary);font-size:.875rem;transition:all .2s;white-space:nowrap;text-decoration:none}.nav-dropdown-menu a:hover{background:rgba(var(--mint-rgb),.05);color:var(--mint)}.nav-dropdown-divider{height:1px;background:var(--border-base);margin:.25rem 0}.nav-links>a.nav-active,.nav-dropdown-trigger.nav-active{color:var(--mint);position:relative}.nav-links>a.nav-active::after,.nav-dropdown-trigger.nav-active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--mint);border-radius:1px}.nav-dropdown-menu a.nav-active{color:var(--mint);background:rgba(var(--mint-rgb),.05)}.nav-cta{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.5rem;border:1px solid var(--mint);color:var(--mint);font-size:.875rem;font-weight:600;font-family:var(--font-heading);text-decoration:none;border-radius:.5rem;transition:background .2s,color .2s;white-space:nowrap}.nav-cta:hover{background:var(--mint);color:#0e0e0e}.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.5rem;background:0;border:0}.nav-hamburger span{display:block;width:22px;height:2px;background:var(--text-secondary);transition:all .3s}.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-hamburger.open span:nth-child(2){opacity:0}.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}#mobile-menu{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,.97);z-index:90;padding:4.5rem 2rem 2rem;flex-direction:column;gap:0;overflow-y:auto;display:flex;clip-path:circle(0% at calc(100% - 2.5rem) 2rem);transition:clip-path .6s cubic-bezier(.77,0,.18,1),opacity .4s ease;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);pointer-events:none;opacity:0}#mobile-menu.open{clip-path:circle(150% at calc(100% - 2.5rem) 2rem);pointer-events:auto;opacity:1}#mobile-menu.closing{clip-path:circle(0% at calc(100% - 2.5rem) 2rem);opacity:0;pointer-events:none;transition:clip-path .5s cubic-bezier(.55,0,.1,1),opacity .35s ease .1s}#mobile-menu.closing a{opacity:0;filter:blur(8px);transform:scale(.95);transition:all .25s ease}#mobile-menu a{font-size:1.5rem;font-family:var(--font-heading);font-weight:700;color:var(--text-secondary);text-decoration:none;border-bottom:1px solid rgba(var(--mint-rgb),.08);padding:1rem 0;transition:color .3s,transform .3s,opacity .3s;opacity:0;transform:translateY(20px)}#mobile-menu.open a{opacity:1;transform:translateY(0)}#mobile-menu a:nth-child(1){transition-delay:.15s}#mobile-menu a:nth-child(2){transition-delay:.2s}#mobile-menu a:nth-child(3){transition-delay:.25s}#mobile-menu a:nth-child(4){transition-delay:.3s}#mobile-menu a:nth-child(5){transition-delay:.35s}#mobile-menu a:nth-child(6){transition-delay:.4s}#mobile-menu a:nth-child(7){transition-delay:.45s}#mobile-menu a:nth-child(8){transition-delay:.5s}#mobile-menu a:nth-child(9){transition-delay:.55s}#mobile-menu a:nth-child(10){transition-delay:.6s}#mobile-menu a:nth-child(11){transition-delay:.65s}#mobile-menu a:nth-child(12){transition-delay:.7s}#mobile-menu a:last-child{margin-top:1rem;color:var(--mint);border:1px solid var(--mint);border-radius:var(--radius-lg);text-align:center;padding:1rem;font-size:1rem;border-bottom:1px solid var(--mint)}#mobile-menu a:hover{color:var(--mint);transform:translateX(8px)}@media(max-width:768px){.nav-links,.nav-cta-desktop{display:none}.nav-hamburger{display:flex}}#hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:8rem 0 5rem;overflow:hidden}#hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 70% 50%,rgba(var(--mint-rgb),.04) 0,transparent 70%),radial-gradient(ellipse 40% 40% at 20% 80%,rgba(78,165,255,.03) 0,transparent 60%);pointer-events:none}#hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.hero-content{position:relative;z-index:1;width:100%}.hero-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}@media(max-width:1024px){.hero-layout{grid-template-columns:1fr;gap:3rem}}.hero-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border:1px solid var(--border-strong);border-radius:var(--radius-full);font-size:11px;font-weight:600;color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.5rem}.hero-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);animation:pulse-dot 2s infinite}.hero-h1{font-family:var(--font-heading);font-weight:800;font-size:clamp(2.25rem,5vw,3.75rem);letter-spacing:-.035em;line-height:1.1;margin-bottom:1.75rem}#hero-h1 .word{opacity:0;transform:translateY(18px);display:inline}.hero-subtitle{font-size:1.0625rem;color:var(--text-secondary);line-height:1.75;max-width:520px;margin-bottom:2.5rem}.hero-ctas{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:3rem}.hero-metrics{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}.hero-metric-item{display:flex;flex-direction:column;gap:.25rem}.hero-metric-value{font-family:var(--font-heading);font-size:1.25rem;font-weight:800;color:var(--text-primary)}.hero-metric-label{font-size:.75rem;color:var(--text-muted);letter-spacing:.02em}.hero-metric-sep{width:1px;height:32px;background:var(--border-strong)}.hero-phone-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem 0 3rem}.hero-aura{position:absolute;top:50%;left:50%;width:900px;height:900px;margin:-450px 0 0 -450px;background:radial-gradient(circle,rgba(var(--mint-rgb),.07) 0,transparent 70%);pointer-events:none;z-index:0;filter:blur(60px);animation:auraPulse 12s ease-in-out infinite alternate;opacity:1}.hero-phone{position:relative;width:280px;min-height:560px;border-radius:2.5rem;background:#111;border:3px solid #2a2a2a;box-shadow:0 0 0 1px rgba(255,255,255,.04),0 40px 100px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;opacity:0;transform:translateY(40px) scale(.95);animation:glowPulse 4s ease-in-out 2s infinite,phoneEnter .9s cubic-bezier(.22,1,.36,1) .8s forwards;z-index:2}.hero-phone-notch{position:relative;width:100%;height:2.2rem;background:#111;display:flex;justify-content:center;align-items:center}.hero-phone-notch::after{content:"";width:5rem;height:1.4rem;background:#000;border-radius:999px;border:1px solid #1a1a1a}.hero-phone-screen{padding:.5rem .75rem .75rem;display:flex;flex-direction:column;gap:.65rem;background:#0a0a0a;min-height:490px}.phone-el{opacity:0;transform:translateY(16px) scale(.96);animation:buildIn .55s cubic-bezier(.22,1,.36,1) forwards}.phone-navbar{display:flex;align-items:center;justify-content:space-between;padding:.5rem .1rem;animation-delay:1.2s}.phone-navbar-logo{display:flex;align-items:center;gap:.35rem}.phone-navbar-logo img{height:12px;width:auto;opacity:.9}.phone-navbar-hamburger{display:flex;flex-direction:column;gap:3px}.phone-navbar-hamburger span{display:block;width:14px;height:1.5px;background:#666;border-radius:1px}.phone-hero-img{height:110px;border-radius:.7rem;background:linear-gradient(135deg,#1a1a1a 0,#222 50%,#1a1a1a 100%);border:1px solid #222;position:relative;overflow:hidden;animation-delay:1.6s}.phone-hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.03) 50%,transparent 100%);background-size:200% 100%;animation:shimmer 3s linear 2s infinite}.phone-hero-img-content{padding:.9rem;display:flex;flex-direction:column;gap:.4rem;position:relative;z-index:1}.phone-hero-img-line{height:.55rem;border-radius:999px;background:#2a2a2a}.phone-hero-img-line:first-child{width:70%;height:.7rem;background:#333}.phone-hero-img-line:nth-child(2){width:50%}.phone-cta-row{display:flex;gap:.5rem;animation-delay:2s}.phone-cta-btn{flex:1;padding:.5rem 0;border-radius:.5rem;text-align:center;font-size:.58rem;font-weight:700;letter-spacing:.04em}.phone-cta-btn--primary{background:var(--mint);color:#0a0a0a}.phone-cta-btn--secondary{background:transparent;border:1px solid #333;color:#888}.phone-cards{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;animation-delay:2.4s}.phone-card{border-radius:.55rem;padding:.6rem;background:#141414;border:1px solid #222;display:flex;flex-direction:column;gap:.35rem}.phone-card-icon{width:1.6rem;height:1.6rem;border-radius:.35rem;background:#1f1f1f;border:1px solid #2a2a2a;display:flex;align-items:center;justify-content:center}.phone-card-icon svg{width:10px;height:10px;color:var(--mint);opacity:.7}.phone-card-line{height:.4rem;border-radius:999px;background:#222}.phone-card-line:first-of-type{width:80%}.phone-card-line:last-of-type{width:55%}.phone-metrics{display:flex;align-items:center;gap:.3rem;padding:.55rem .5rem;background:#141414;border:1px solid #222;border-radius:.55rem;animation-delay:2.8s}.phone-metric-item{flex:1;text-align:center}.phone-metric-value{display:block;font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:var(--mint)}.phone-metric-label{display:block;font-size:.5rem;color:#555;margin-top:.1rem}.phone-metric-sep{width:1px;height:1.5rem;background:#222}.phone-bottom-nav{margin-top:auto;display:flex;justify-content:space-around;padding:.55rem .2rem;border-top:1px solid #1a1a1a;animation-delay:3.2s}.phone-bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:.15rem}.phone-bottom-nav-item svg{width:14px;height:14px;color:#444}.phone-bottom-nav-item.active svg{color:var(--mint)}.phone-bottom-nav-item span{font-size:.45rem;color:#444}.phone-bottom-nav-item.active span{color:var(--mint)}.phone-callout{position:absolute;left:calc(50% + 130px);display:flex;align-items:center;gap:0;opacity:0;z-index:10}.phone-callout-line{width:45px;height:1px;position:relative;overflow:visible}.phone-callout-line::before{content:"";position:absolute;inset:0;background:rgba(var(--mint-rgb),.2);transform-origin:right;transform:scaleX(0)}.phone-callout-line::after{content:"";position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px rgba(var(--mint-rgb),.6);opacity:0}.phone-callout-dot{width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px rgba(var(--mint-rgb),.5);opacity:0;transform:scale(0);flex-shrink:0}.phone-callout-bubble{display:flex;align-items:center;gap:.3rem;padding:.35rem .6rem;border-radius:.4rem;background:rgba(12,12,12,.95);border:1px solid rgba(var(--mint-rgb),.2);font-size:.58rem;font-weight:500;color:var(--mint);white-space:nowrap;opacity:0;transform:translateX(8px)}.phone-callout-bubble svg{width:10px;height:10px;min-width:10px;opacity:.7}.phone-callout.show{animation:calloutFadeIn .1s ease forwards}.phone-callout.show .phone-callout-bubble{animation:bubbleSlideIn .45s cubic-bezier(.22,1,.36,1) forwards,calloutPulse 3s ease-in-out 1s infinite}.phone-callout.show .phone-callout-line::before{animation:lineGrowReverse .35s cubic-bezier(.22,1,.36,1) .3s forwards}.phone-callout.show .phone-callout-line::after{animation:dotTravel .4s ease .3s forwards,dotTravelLoop 2.5s ease-in-out 2s infinite}.phone-callout.show .phone-callout-dot{animation:dotAppear .3s cubic-bezier(.34,1.56,.64,1) .55s forwards,dotPulse 2s ease-in-out 1.5s infinite}.phone-callout.c1{top:80px}.phone-callout.c2{top:160px}.phone-callout.c3{top:280px}.phone-callout.c4{top:345px}.phone-callout.c5{top:430px}.phone-callout.c6{top:510px}.phone-callout.c1,.phone-callout.c1 .phone-callout-bubble,.phone-callout.c1 .phone-callout-line::before,.phone-callout.c1 .phone-callout-line::after,.phone-callout.c1 .phone-callout-dot{animation-delay:1.35s}.phone-callout.c2,.phone-callout.c2 .phone-callout-bubble,.phone-callout.c2 .phone-callout-line::before,.phone-callout.c2 .phone-callout-line::after,.phone-callout.c2 .phone-callout-dot{animation-delay:1.75s}.phone-callout.c3,.phone-callout.c3 .phone-callout-bubble,.phone-callout.c3 .phone-callout-line::before,.phone-callout.c3 .phone-callout-line::after,.phone-callout.c3 .phone-callout-dot{animation-delay:2.15s}.phone-callout.c4,.phone-callout.c4 .phone-callout-bubble,.phone-callout.c4 .phone-callout-line::before,.phone-callout.c4 .phone-callout-line::after,.phone-callout.c4 .phone-callout-dot{animation-delay:2.55s}.phone-callout.c5,.phone-callout.c5 .phone-callout-bubble,.phone-callout.c5 .phone-callout-line::before,.phone-callout.c5 .phone-callout-line::after,.phone-callout.c5 .phone-callout-dot{animation-delay:2.95s}.phone-callout.c6,.phone-callout.c6 .phone-callout-bubble,.phone-callout.c6 .phone-callout-line::before,.phone-callout.c6 .phone-callout-line::after,.phone-callout.c6 .phone-callout-dot{animation-delay:3.35s}.orbit-ring{position:absolute;top:50%;left:50%;width:660px;height:660px;margin-top:-330px;margin-left:-330px;border-radius:50%;border:1px dashed rgba(var(--mint-rgb),.07);pointer-events:none;z-index:0;animation:orbitRingFadeIn 1s ease .6s forwards,orbitRotation 60s linear infinite;opacity:0}.orbit-bubble{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(18,18,18,.92);border:1px solid rgba(var(--mint-rgb),.15);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 25px rgba(0,0,0,.7);opacity:0;z-index:5;animation:orbitBubbleIn .6s cubic-bezier(.34,1.56,.64,1) forwards,orbitCounterRotation 60s linear infinite}.orbit-bubble img{width:24px;height:24px;object-fit:contain;filter:grayscale(20%) brightness(.95)}.orbit-bubble.ob1{top:calc(50% - 356px);left:calc(50% - 26px)}.orbit-bubble.ob2{top:calc(50% - 293px);left:calc(50% + 168px)}.orbit-bubble.ob3{top:calc(50% - 128px);left:calc(50% + 288px)}.orbit-bubble.ob4{top:calc(50% + 76px);left:calc(50% + 288px)}.orbit-bubble.ob5{top:calc(50% + 241px);left:calc(50% + 168px)}.orbit-bubble.ob6{top:calc(50% + 304px);left:calc(50% - 26px)}.orbit-bubble.ob7{top:calc(50% + 241px);left:calc(50% - 220px)}.orbit-bubble.ob8{top:calc(50% + 76px);left:calc(50% - 340px)}.orbit-bubble.ob9{top:calc(50% - 128px);left:calc(50% - 340px)}.orbit-bubble.ob10{top:calc(50% - 293px);left:calc(50% - 220px)}.chatgpt-white-logo{filter:brightness(0) invert(1) !important}@media(max-width:768px){.orbit-ring{width:320px;height:320px;margin-top:-160px;margin-left:-160px}.orbit-bubble{width:32px;height:32px}.orbit-bubble img{width:16px;height:16px}.orbit-bubble.ob1{top:calc(50% - 165px);left:calc(50% - 16px)}.orbit-bubble.ob2{top:calc(50% - 135px);left:calc(50% + 78px)}.orbit-bubble.ob3{top:calc(50% - 60px);left:calc(50% + 130px)}.orbit-bubble.ob4{top:calc(50% + 35px);left:calc(50% + 130px)}.orbit-bubble.ob5{top:calc(50% + 110px);left:calc(50% + 78px)}.orbit-bubble.ob6{top:calc(50% + 140px);left:calc(50% - 16px)}.orbit-bubble.ob7{top:calc(50% + 110px);left:calc(50% - 105px)}.orbit-bubble.ob8{top:calc(50% + 35px);left:calc(50% - 155px)}.orbit-bubble.ob9{top:calc(50% - 60px);left:calc(50% - 155px)}.orbit-bubble.ob10{top:calc(50% - 135px);left:calc(50% - 105px)}}.hero-phone-label{margin-top:1.5rem;display:flex;align-items:center;gap:.5rem;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);opacity:0;animation:fadeUp .6s ease 3.6s forwards}.hero-phone-label::before,.hero-phone-label::after{content:"";flex:1;height:1px;background:var(--border-base)}@media(max-width:960px){.hero-phone-wrapper{display:flex;transform:scale(0.85);margin-top:2rem}}#logos{padding:2rem 0;border-top:1px solid var(--border-base);border-bottom:1px solid var(--border-base);background:var(--bg-surface)}.logos-inner{display:flex;align-items:center;gap:2.5rem;flex-wrap:wrap}.logo-strip-label{font-size:.7rem;color:var(--text-muted);font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.logo-strip-tech{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center}.logo-strip-item{font-size:.8rem;color:var(--text-muted);font-weight:500;white-space:nowrap}.marquee-section{padding:2rem 0;overflow:hidden;background:var(--bg-base);border-bottom:1px solid var(--border-base)}.marquee-track{display:flex;gap:0;animation:marqueeTicker 40s linear infinite;width:max-content}.marquee-track:hover{animation-play-state:paused}.marquee-item{display:flex;align-items:center;gap:1.5rem;padding:0 2rem;white-space:nowrap}.marquee-text{font-size:.875rem;color:var(--text-muted);line-height:1.5}.marquee-text .hl{color:var(--text-secondary);font-weight:500}.marquee-sep{color:var(--mint);font-size:1rem;opacity:.5}#propuesta{padding:7rem 0;border-top:1px solid var(--border-base)}.propuesta-header{margin-bottom:4rem}.servicios-stack{display:flex;flex-direction:column;gap:0;padding-bottom:280px;margin-bottom:-280px}.servicio-item{position:sticky;background:var(--bg-surface);border:1px solid var(--border-base);border-radius:var(--radius-xl);padding:2.5rem;margin-bottom:1.5rem;transition:box-shadow .3s,border-color .3s,transform .3s;display:grid;grid-template-columns:1fr 380px;gap:3rem;align-items:start;will-change:transform}.servicio-item:nth-child(1){top:80px;z-index:2}.servicio-item:nth-child(2){top:100px;z-index:4}.servicio-item:nth-child(3){top:120px;z-index:6}.servicio-item:nth-child(4){top:140px;z-index:8}.servicio-item:nth-child(5){top:160px;z-index:10}.servicio-item:nth-child(6){top:180px;z-index:12}.servicio-item:hover{border-color:rgba(var(--mint-rgb),.2);box-shadow:0 0 50px rgba(var(--mint-rgb),.08),0 24px 60px rgba(0,0,0,.5)}@media(max-width:900px){.servicios-stack{padding-bottom:0;margin-bottom:0}.servicio-item{position:static;grid-template-columns:1fr;gap:1.5rem;padding:2rem}}.servicio-body{display:flex;flex-direction:column;gap:1rem}.servicio-header{display:flex;align-items:center;gap:1rem}.servicio-icon{width:44px;height:44px;border-radius:var(--radius-md);background:rgba(var(--mint-rgb),.06);border:1px solid rgba(var(--mint-rgb),.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}.servicio-icon svg{width:20px;height:20px;color:var(--mint)}.servicio-tag{font-size:.7rem;font-weight:600;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase}.servicio-title{font-family:var(--font-heading);font-weight:800;font-size:1.375rem;color:var(--text-primary);line-height:1.25}.servicio-desc{font-size:.9rem;color:var(--text-secondary);line-height:1.7;flex:1}.servicio-bullets{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-top:.25rem}.servicio-bullets li{font-size:.8125rem;color:var(--text-muted);padding-left:1rem;position:relative;line-height:1.55}.servicio-bullets li::before{content:"→";position:absolute;left:0;color:var(--mint);font-size:.7rem;top:.15em}.servicio-visual{border-left:1px solid var(--border-base);background:var(--bg-subtle);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;min-height:240px}@media(max-width:768px){.servicio-visual{border-left:0;border-top:1px solid var(--border-base);min-height:180px}}.browser-mock{width:85%;background:#0a0a0a;border-radius:8px;overflow:hidden;border:1px solid var(--border-strong);box-shadow:0 20px 40px rgba(0,0,0,.5)}.browser-bar{display:flex;align-items:center;gap:.4rem;padding:.45rem .65rem;background:var(--bg-muted);border-bottom:1px solid var(--border-base)}.browser-dot{width:7px;height:7px;border-radius:50%}.browser-dot:nth-child(1){background:#ff5f56}.browser-dot:nth-child(2){background:#ffbd2e}.browser-dot:nth-child(3){background:#27c93f}.browser-url{flex:1;margin-left:.5rem;background:var(--bg-subtle);border-radius:4px;padding:.2rem .5rem;font-size:.55rem;color:var(--text-muted);font-family:var(--font-mono)}.browser-body{padding:.75rem}.browser-line{height:4px;background:var(--border-strong);border-radius:2px;margin-bottom:5px}.browser-line:nth-child(2){width:75%}.browser-line:nth-child(3){width:55%}.browser-cols{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.6rem}.browser-card{background:var(--bg-muted);border-radius:4px;padding:.5rem;border:1px solid var(--border-base)}.browser-card-line{height:3px;background:var(--border-strong);border-radius:2px;margin-bottom:4px}.browser-card-line:last-child{width:60%}.browser-metrics{display:flex;gap:.3rem;margin-top:.5rem}.browser-metric{flex:1;text-align:center;background:var(--bg-muted);border-radius:4px;padding:.3rem .2rem}.browser-metric-val{font-family:var(--font-heading);font-size:.6rem;font-weight:800;color:var(--mint);display:block}.browser-metric-lbl{font-size:.4rem;color:var(--text-muted)}.sv-ux-frame{width:85%;position:relative}.sv-ux-screen{background:#0a0a0a;border-radius:8px;border:1px solid var(--border-strong);overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.5)}.sv-ux-bar{display:flex;align-items:center;gap:.3rem;padding:.4rem .6rem;background:var(--bg-muted);border-bottom:1px solid var(--border-base)}.sv-ux-dot{width:6px;height:6px;border-radius:50%}.sv-ux-dot:nth-child(1){background:#ff5f56}.sv-ux-dot:nth-child(2){background:#ffbd2e}.sv-ux-dot:nth-child(3){background:#27c93f}.sv-ux-body{padding:.6rem}.sv-ux-hero{height:40px;background:linear-gradient(135deg,rgba(var(--mint-rgb),.08),rgba(78,165,255,.05));border-radius:5px;margin-bottom:.5rem;display:flex;align-items:center;justify-content:center}.sv-ux-cta{width:40%;height:10px;background:var(--mint);border-radius:3px;opacity:.8}.sv-ux-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.3rem;margin-bottom:.5rem}.sv-ux-card{background:var(--bg-muted);border-radius:4px;padding:.35rem;border:1px solid var(--border-base)}.sv-ux-card-top{height:20px;background:linear-gradient(135deg,var(--bg-subtle),var(--border-base));border-radius:3px;margin-bottom:.3rem}.sv-node{padding:.45rem .75rem;border-radius:var(--radius-sm);font-size:.65rem;font-weight:600;font-family:var(--font-mono);text-align:center;opacity:0;transform:translateY(8px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),background .4s,border-color .4s,box-shadow .4s}.sv-node.visible{opacity:1;transform:translateY(0)}.sv-node--top{background:rgba(var(--mint-rgb),.06);border:1px solid rgba(var(--mint-rgb),.2);color:var(--mint);margin-bottom:.5rem}.sv-node--mid{background:var(--bg-base);border:1px solid var(--border-strong);color:var(--text-secondary)}.sv-node--bot{background:var(--bg-base);border:1px solid var(--border-base);color:var(--text-muted);font-size:.6rem}.sv-node.active{border-color:rgba(var(--mint-rgb),.6);box-shadow:0 0 18px rgba(var(--mint-rgb),.15),inset 0 0 6px rgba(var(--mint-rgb),.04);color:var(--mint);animation:svPulseGlow 2.5s ease-in-out infinite}.sv-arrow{display:flex;flex-direction:column;align-items:center;height:24px;margin:.1rem 0;position:relative;overflow:hidden}.sv-arrow.visible .sv-arrow-line{animation:svLineGrow .4s ease forwards}.sv-arrow-line{width:1px;height:100%;background:linear-gradient(to bottom,rgba(var(--mint-rgb),.5),rgba(var(--mint-rgb),.1));transform-origin:top;transform:scaleY(0)}.sv-arrow-dot{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--mint);left:50%;transform:translateX(-50%);opacity:0}.sv-arrow.visible .sv-arrow-dot{animation:svFlowDot 1.5s ease-in-out .5s infinite}@keyframes svLineGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes svFlowDot{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}@keyframes svPulseGlow{0%,100%{box-shadow:0 0 8px rgba(var(--mint-rgb),.08)}50%{box-shadow:0 0 20px rgba(var(--mint-rgb),.2),inset 0 0 8px rgba(var(--mint-rgb),.04)}}@keyframes svFadePhase{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.sv-badge{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.62rem;color:var(--mint);border:1px solid rgba(var(--mint-rgb),.2);border-radius:var(--radius-sm);padding:.35rem .7rem;margin-top:.75rem;opacity:0;transition:opacity .5s}.sv-badge.visible{opacity:1}.deploy-dot{width:6px;height:6px;border-radius:50%;background:var(--mint);display:inline-block;animation:pulse-dot 1.5s infinite}.sv-funnel-vis{display:flex;flex-direction:column;gap:0;flex:1}.sv-funnel-row{display:grid;grid-template-columns:110px 1fr 36px;align-items:center;gap:.5rem;padding:.5rem .625rem;background:var(--bg-base);border:1px solid var(--border-base);font-size:.65rem}.sv-funnel-row:first-child{border-radius:var(--radius-sm) var(--radius-sm) 0 0}.sv-funnel-row:last-child{border-radius:0 0 var(--radius-sm) var(--radius-sm)}.sv-funnel-row:not(:first-child){border-top:0}.sv-funnel-row--issue{background:rgba(248,113,113,.04);border-color:rgba(248,113,113,.2)}.sv-funnel-row--ok{background:rgba(var(--mint-rgb),.04);border-color:rgba(var(--mint-rgb),.15)}.sv-fl{font-weight:600;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sv-fbar-wrap{background:var(--bg-muted);border-radius:2px;height:4px;overflow:hidden}.sv-fbar{height:4px;border-radius:2px;width:0;transition:width 1s ease}.sv-fbar--mint{background:var(--mint)}.sv-fbar--red{background:rgba(248,113,113,.6)}.sv-fpct{font-family:var(--font-mono);font-size:.6rem;color:var(--text-muted);text-align:right}.sv-ux-canvas{background:var(--bg-base);border:1px solid var(--border-base);border-radius:var(--radius-md);padding:.875rem;flex:1;display:flex;flex-direction:column;gap:.5rem;overflow:hidden;transition:border-color .5s}.sv-ux-canvas.colored{border-color:rgba(var(--mint-rgb),.2)}.sv-ux-nav-bar{height:10px;background:#1f1f1f;border-radius:3px;transition:background .5s}.sv-ux-nav-bar.colored{background:rgba(var(--mint-rgb),.12)}.sv-ux-hero-block{display:flex;flex-direction:column;gap:.35rem;padding:.5rem;background:#141414;border-radius:5px;transition:background .5s,border .5s;border:1px solid transparent}.sv-ux-hero-block.colored{background:rgba(var(--mint-rgb),.04);border-color:rgba(var(--mint-rgb),.15)}.sv-ux-h1{height:8px;width:80%;background:#2a2a2a;border-radius:3px;transition:background .5s}.sv-ux-h1.colored{background:rgba(var(--mint-rgb),.3)}.sv-ux-sub{height:5px;width:60%;background:#222;border-radius:3px}.sv-ux-btns{display:flex;gap:.35rem;margin-top:.25rem}.sv-ux-btn{height:12px;border-radius:3px;transition:all .5s}.sv-ux-btn--primary{width:55px;background:#2a2a2a}.sv-ux-btn--primary.colored{background:var(--mint)}.sv-ux-btn--ghost{width:45px;background:transparent;border:1px solid #333}.sv-ux-btn--ghost.colored{border-color:rgba(var(--mint-rgb),.4)}.sv-ux-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.35rem}.sv-ux-card-mini{height:40px;background:#141414;border:1px solid #1f1f1f;border-radius:4px;transition:all .5s}.sv-ux-card-mini.colored{background:rgba(var(--mint-rgb),.04);border-color:rgba(var(--mint-rgb),.12)}.sv-pd{width:6px;height:6px;border-radius:50%;background:var(--border-strong);display:inline-block;transition:all .3s}.sv-pd--on{background:var(--mint);width:14px;border-radius:3px}@keyframes slideInLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}@keyframes slideInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes numberRoll{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes cardFlip{from{opacity:0;transform:perspective(600px) rotateY(-15deg) translateY(20px)}to{opacity:1;transform:perspective(600px) rotateY(0) translateY(0)}}@keyframes borderGlow{0%,100%{border-color:var(--border-base)}50%{border-color:rgba(var(--mint-rgb),.3)}}@keyframes svFadePhase{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity .65s ease,transform .65s ease}.reveal-left.visible{opacity:1;transform:translateX(0)}.reveal-scale{opacity:0;transform:scale(.94);transition:opacity .55s ease,transform .55s ease}.reveal-scale.visible{opacity:1;transform:scale(1)}.de-visual{display:flex !important;flex-direction:column;gap:0;padding:0 !important;overflow:hidden;height:320px}.de-split{display:grid;grid-template-columns:1fr 1fr;gap:0;flex:1;height:100%}.de-panel{background:var(--bg-subtle);border-right:1px solid var(--border-base);padding:1.25rem 1rem;display:flex;flex-direction:column;gap:.75rem;overflow:hidden}.de-panel:last-child{border-right:0}.de-panel-label{font-size:.5rem;font-weight:700;color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:.3rem;border-bottom:1px solid var(--border-base);padding-bottom:.5rem}.de-panel-label svg{width:9px;height:9px;color:var(--mint);flex-shrink:0}.figma-frame{background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:6px;padding:.625rem;position:relative;transition:border-color .4s,background .4s,box-shadow .4s;flex-shrink:0}.figma-frame.built{border-color:rgba(var(--mint-rgb),.4);background:rgba(var(--mint-rgb),.03);box-shadow:0 0 20px rgba(var(--mint-rgb),.06)}.figma-component-label{font-size:.45rem;font-weight:600;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.4rem}.figma-preview-btn{height:22px;border-radius:4px;background:var(--mint);display:flex;align-items:center;justify-content:center;font-size:.5rem;font-weight:700;color:#0e0e0e;margin-bottom:.35rem;transition:transform .2s}.figma-frame.built .figma-preview-btn{transform:scaleX(1.02)}.figma-props{display:flex;flex-direction:column;gap:.2rem}.figma-prop-row{display:flex;justify-content:space-between;align-items:center;font-size:.44rem;color:var(--text-muted);font-family:var(--font-mono);padding:.15rem 0;border-top:1px solid var(--border-base)}.figma-prop-val{color:var(--mint)}.figma-cursor{position:absolute;top:50%;right:-8px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:8px solid rgba(var(--mint-rgb),.6);animation:cursorBlink 1.2s step-end infinite}@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}.figma-sync-arrow{display:flex;align-items:center;justify-content:center;gap:.3rem;font-size:.45rem;color:var(--mint);padding:.25rem 0;letter-spacing:.06em;font-weight:600;font-family:var(--font-mono)}.figma-sync-arrow svg{width:10px;height:10px;animation:syncSpin 2s linear infinite}@keyframes syncSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}.code-window{background:#0d0d0d;border-radius:6px;overflow:hidden;border:1px solid var(--border-base);flex:1;display:flex;flex-direction:column}.code-titlebar{display:flex;align-items:center;gap:.4rem;padding:.35rem .6rem;background:#161616;border-bottom:1px solid var(--border-base);flex-shrink:0}.code-dot{width:6px;height:6px;border-radius:50%}.code-dot:nth-child(1){background:#ff5f56}.code-dot:nth-child(2){background:#ffbd2e}.code-dot:nth-child(3){background:#27c93f}#code-typing-area{padding:.5rem .65rem;flex:1;height:140px;max-height:140px;overflow:hidden}.code-line{font-size:.5rem;font-family:var(--font-mono);color:var(--text-secondary);line-height:1.65;white-space:nowrap;animation:slideCodeLine .2s ease forwards}.code-kw{color:#c084fc}.code-fn{color:var(--mint)}.code-var{color:#4ea5ff}.code-tag{color:var(--color-error)}.code-str{color:#fbbf24}.typing-cursor{display:inline-block;width:5px;height:10px;background:var(--mint);vertical-align:middle;margin-left:1px;border-radius:1px;animation:blink .75s step-end infinite}.deploy-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem;background:rgba(39,201,63,.08);border:1px solid rgba(39,201,63,.2);border-radius:var(--radius-full);font-size:.5rem;font-weight:600;color:#27c93f;flex-shrink:0;width:fit-content;margin-top:.5rem}.deploy-dot{width:5px;height:5px;border-radius:50%;background:#27c93f;animation:pulse-dot 2s infinite}.sv-ia-visual{padding:1.5rem;height:100%;display:flex;flex-direction:column}.sv-ia-flow{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex:1;position:relative}.ia-col{display:flex;flex-direction:column;gap:.6rem;z-index:2}#arquitectura{padding:7rem 0;background:var(--bg-surface);border-top:1px solid var(--border-base)}.arquitectura-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}@media(max-width:1024px){.arquitectura-layout{grid-template-columns:1fr;gap:3rem}}#arquitectura p{font-size:.9375rem;color:var(--text-secondary);line-height:1.8;margin-bottom:1.25rem}#arquitectura p strong{color:var(--text-primary)}.arquitectura-links{display:flex;flex-direction:column;gap:.75rem;margin-top:2rem}.arquitectura-link{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;background:var(--bg-muted);border:1px solid var(--border-strong);border-radius:var(--radius-lg);font-size:.875rem;color:var(--text-secondary);text-decoration:none;transition:all .25s}.arquitectura-link:hover{background:rgba(var(--mint-rgb),.04);border-color:rgba(var(--mint-rgb),.2);color:var(--text-primary)}.arquitectura-link svg{width:16px;height:16px;color:var(--mint);flex-shrink:0}.friction-visual{background:var(--bg-muted);border:1px solid var(--border-strong);border-radius:var(--radius-xl);padding:1.5rem;font-family:var(--font-mono)}.friction-visual-header{font-size:.65rem;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:1.25rem;font-weight:600}.friction-item{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 0;border-bottom:1px solid var(--border-base)}.friction-item:last-child{border-bottom:0}.friction-status{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:.3rem}.friction-status.error{background:var(--color-error);box-shadow:0 0 6px rgba(248,113,113,.4);animation:pulse-dot 2s infinite}.friction-status.warn{background:#fbbf24}.friction-status.ok{background:#4ade80}.friction-label{font-size:.75rem;color:var(--text-secondary);line-height:1.5}.friction-label strong{color:var(--text-primary);display:block;margin-bottom:.2rem;font-size:.8rem}.friction-impact{font-size:.65rem;color:var(--text-muted);margin-top:.15rem;display:flex;align-items:center;gap:.4rem}.friction-impact::before{content:"→";color:var(--mint)}#uxui-block{padding:7rem 0;background:var(--bg-base);border-top:1px solid var(--border-base)}.uxui-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}@media(max-width:1024px){.uxui-layout{grid-template-columns:1fr;gap:3rem}}.uxui-copy{display:flex;flex-direction:column}.uxui-stat{display:flex;align-items:center;gap:1rem;margin:1.75rem 0;padding:1.25rem 1.5rem;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg)}.uxui-stat-number{font-family:var(--font-heading);font-size:2rem;font-weight:800;color:var(--mint);flex-shrink:0}.uxui-stat-text{font-size:.875rem;color:var(--text-secondary);line-height:1.55}.uxui-stat-text strong{color:var(--text-primary)}.uxui-funnel-wrap{margin-bottom:2rem}.uxui-funnel-label{font-size:.7rem;color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;font-family:var(--font-mono)}.uxui-funnel-row{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem}.uxui-funnel-step{font-size:.75rem;color:var(--text-muted);width:90px;flex-shrink:0;font-family:var(--font-mono)}.uxui-funnel-track{flex:1;height:6px;background:var(--bg-muted);border-radius:3px;overflow:hidden}.uxui-funnel-bar{height:100%;width:0;border-radius:3px;transition:width 1s cubic-bezier(.22,1,.36,1)}.uxui-funnel-pct{font-size:.65rem;color:var(--text-muted);width:30px;text-align:right;font-family:var(--font-mono);flex-shrink:0}#trinchera{padding:5rem 0;background:var(--bg-surface);border-top:1px solid var(--border-base)}.trinchera-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5px;background:var(--border-base);border:1px solid var(--border-base);border-radius:var(--radius-xl);overflow:hidden}@media(max-width:900px){.trinchera-grid{grid-template-columns:repeat(2,1fr);gap:1rem}}@media(max-width:768px){.hero-phone-wrapper{max-width:340px;margin:0 auto;overflow:hidden}.hero-aura{width:400px;height:400px;margin:-200px 0 0 -200px}.hero-phone{max-width:280px}#hero{overflow:hidden}.hero-content{overflow:hidden}.phone-callout{display:none!important}}
@media(max-width:500px){.trinchera-grid{grid-template-columns:1fr}}.trinchera-item{background:var(--bg-surface);padding:2.5rem 2rem;display:flex;flex-direction:column;gap:.75rem;position:relative;overflow:hidden;transition:background .3s}.trinchera-item:hover{background:var(--bg-subtle)}.trinchera-tag{font-size:.65rem;color:var(--mint);font-weight:600;letter-spacing:.1em;text-transform:uppercase}.trinchera-number{font-family:var(--font-heading);font-size:3.5rem;font-weight:800;color:var(--text-primary);line-height:1;letter-spacing:-.04em}.trinchera-accent{color:var(--mint)}.trinchera-label{font-size:.8125rem;color:var(--text-secondary);line-height:1.6}.trinchera-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;background:rgba(var(--mint-rgb),.06);border:1px solid rgba(var(--mint-rgb),.15);border-radius:var(--radius-full);font-size:.7rem;color:var(--mint);font-weight:600;margin-top:.25rem}.trinchera-pill svg{width:10px;height:10px}.trinchera-stars{display:flex;gap:.15rem}.trinchera-stars svg{width:16px;height:16px;fill:var(--mint)}#casos{padding:7rem 0;background:var(--bg-base)}.casos-header{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:3rem;flex-wrap:wrap}.casos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--border-base);border:1px solid var(--border-base);border-radius:var(--radius-xl);overflow:hidden}@media(max-width:900px){.casos-grid{grid-template-columns:1fr}}.caso-card{background:var(--bg-surface);padding:2.5rem 2rem;display:flex;flex-direction:column;gap:1.25rem;text-decoration:none;color:inherit;position:relative;transition:background .25s}.caso-card:hover{background:var(--bg-subtle)}.caso-sector{font-size:.65rem;color:var(--mint);font-weight:600;letter-spacing:.1em;text-transform:uppercase}.caso-problem{font-family:var(--font-heading);font-size:1.0625rem;font-weight:700;color:var(--text-primary);line-height:1.35}.caso-solution{font-size:.8125rem;color:var(--text-secondary);line-height:1.65;flex:1}.caso-impact{padding-top:1.25rem;border-top:1px solid var(--border-base)}.caso-impact-label{font-size:.65rem;color:var(--mint);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem}.caso-impact-text{font-size:.8125rem;color:var(--text-secondary);line-height:1.55}.caso-arrow{position:absolute;bottom:1.75rem;right:1.75rem;color:var(--text-muted);transition:all .2s}.caso-card:hover .caso-arrow{color:var(--mint);transform:translate(3px,-3px)}#testimonios{padding:7rem 0;background:var(--bg-surface);border-top:1px solid var(--border-base)}.testimonios-header{margin-bottom:3rem}.google-rating{display:inline-flex;align-items:center;gap:.75rem;margin-top:1.25rem;padding:.75rem 1.25rem;background:var(--bg-muted);border:1px solid var(--border-strong);border-radius:var(--radius-lg)}.google-logo{display:flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:700;color:var(--text-secondary)}.google-g{width:18px;height:18px;background:linear-gradient(135deg,#4285f4,#34a853,#fbbc04,#ea4335);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:900;color:#fff}.stars{display:flex}.star{color:#fbbf24;font-size:.875rem}.rating-text{font-size:.875rem;font-weight:700;color:var(--text-primary)}.carousel-viewport{position:relative;overflow:hidden;border:1px solid var(--border-base);border-radius:var(--radius-xl)}.carousel-viewport::before,.carousel-viewport::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:3;pointer-events:none}.carousel-viewport::before{left:0;background:linear-gradient(to right,var(--bg-surface) 5%,transparent)}.carousel-viewport::after{right:0;background:linear-gradient(to left,var(--bg-surface) 5%,transparent)}.carousel-track{display:flex;flex-direction:row;background:var(--border-base);gap:1px;will-change:transform}.testimonio-card{flex-shrink:0;background:var(--bg-surface);padding:2.5rem 2rem;display:flex;flex-direction:column;gap:1rem;position:relative;box-sizing:border-box;transition:background .25s}.testimonio-card:hover{background:var(--bg-subtle)}.testimonio-card.featured{border-left:2px solid var(--mint)}.quote-mark{font-family:var(--font-heading);font-size:3rem;color:var(--mint);line-height:.8;opacity:.3;font-weight:800}.card-stars{display:flex;gap:.15rem}.card-star{color:#fbbf24;font-size:.75rem}.testimonio-text{font-size:.875rem;line-height:1.7;color:var(--text-secondary);flex:1}.testimonio-text em{font-style:normal;color:var(--text-primary);font-weight:500}.testimonio-author{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--border-base)}.author-avatar{width:40px;height:40px;border-radius:var(--radius-full);background:linear-gradient(135deg,rgba(var(--mint-rgb),.2),rgba(var(--mint-rgb),.05));border:1px solid rgba(var(--mint-rgb),.15);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:14px;font-weight:700;color:var(--mint);flex-shrink:0}.author-name{font-family:var(--font-heading);font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:2px}.author-meta{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px}.author-company{font-size:12px;color:var(--text-muted);font-weight:500;margin-bottom:3px}.author-verified{font-size:11px}.verified{display:inline-flex;align-items:center;gap:4px;color:var(--mint);font-weight:500}.verified-icon{width:12px;height:12px;background:var(--mint);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:7px;color:#0e0e0e;font-weight:900;flex-shrink:0}.carousel-controls{display:flex;align-items:center;justify-content:space-between;margin-top:2rem}.carousel-dots{display:flex;gap:8px}.carousel-dot{width:6px;height:6px;border-radius:50%;background:var(--border-strong);transition:all .3s;cursor:pointer;border:0}.carousel-dot.active{background:var(--mint);width:20px;border-radius:3px}.carousel-btns{display:flex;gap:.5rem}.carousel-btn{width:38px;height:38px;border-radius:50%;background:var(--bg-surface);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);cursor:pointer;transition:all .2s}.carousel-btn:hover{border-color:var(--mint);color:var(--mint)}.carousel-btn svg{width:16px;height:16px}.testimonios-footer{display:flex;align-items:center;justify-content:space-between;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--border-base);gap:1.5rem;flex-wrap:wrap}.testimonios-footer-text{font-size:.9375rem;color:var(--text-secondary);line-height:1.6}.testimonios-footer-text strong{color:var(--text-primary)}#proceso{padding:7rem 0;background:var(--bg-surface);border-top:1px solid var(--border-base)}.proceso-layout{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:start}@media(max-width:1024px){.proceso-layout{grid-template-columns:1fr;gap:3.5rem}}.proceso-steps-list{display:flex;flex-direction:column;gap:0;margin-top:2.5rem;position:relative}.proceso-steps-list::before{content:"";position:absolute;left:19px;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,rgba(var(--mint-rgb),.3),transparent 90%)}.proceso-step{display:grid;grid-template-columns:40px 1fr;gap:1.25rem;padding:1.5rem 0}.proceso-step:not(:last-child){border-bottom:1px solid var(--border-base)}.proceso-step-bubble{width:40px;height:40px;border-radius:50%;background:var(--bg-muted);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}.proceso-step-bubble svg{width:16px;height:16px;color:var(--mint)}.proceso-step-num{font-family:var(--font-mono);font-size:.65rem;font-weight:500;color:var(--mint);letter-spacing:.08em;margin-bottom:.3rem;opacity:.6}.proceso-step-title{font-family:var(--font-heading);font-weight:700;font-size:1rem;color:var(--text-primary);margin-bottom:.4rem}.proceso-step-desc{font-size:.8125rem;color:var(--text-muted);line-height:1.65}.proceso-step-badge{display:inline-flex;align-items:center;gap:.35rem;margin-top:.5rem;padding:.25rem .65rem;background:rgba(var(--mint-rgb),.05);border:1px solid rgba(var(--mint-rgb),.15);border-radius:var(--radius-full);font-size:.65rem;font-weight:600;color:var(--mint)}.proceso-step-badge svg{width:9px;height:9px}#faq{padding:7rem 0;background:var(--bg-base);border-top:1px solid var(--border-base)}.faq-layout{display:grid;grid-template-columns:1fr 2fr;gap:5rem;align-items:start}@media(max-width:900px){.faq-layout{grid-template-columns:1fr;gap:2.5rem}}.faq-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--border-base);border-radius:var(--radius-xl);overflow:hidden}.faq-item{border-bottom:1px solid var(--border-base)}.faq-item:last-child{border-bottom:0}.faq-question{width:100%;background:var(--bg-surface);border:0;padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:var(--font-heading);font-weight:700;font-size:.9375rem;color:var(--text-primary);cursor:pointer;text-align:left;transition:background .2s}.faq-question:hover{background:var(--bg-subtle)}.faq-icon{width:18px;height:18px;flex-shrink:0;color:var(--mint);transition:transform .3s}.faq-item.open .faq-icon{transform:rotate(45deg)}.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1)}.faq-item.open .faq-answer{max-height:400px}.faq-answer-inner{padding:0 1.5rem 1.5rem;font-size:.875rem;color:var(--text-secondary);line-height:1.75}#cierre{padding:7rem 0;background:var(--bg-surface);border-top:1px solid var(--border-base)}.cierre-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}@media(max-width:1024px){.cierre-layout{grid-template-columns:1fr;gap:3rem}}.cierre-h2{font-family:var(--font-heading);font-weight:800;font-size:clamp(1.75rem,3vw,2.625rem);letter-spacing:-.03em;line-height:1.15;margin-bottom:1.25rem;background:linear-gradient(135deg,#fff 30%,#5dffbf 60%,#4ea5ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;animation:cyber-aurora 4s linear infinite}.checkbox-row{display:flex;align-items:flex-start;gap:.75rem;cursor:pointer}.checkbox-row input[type="checkbox"]{width:16px;height:16px;accent-color:var(--mint);flex-shrink:0;margin-top:.15rem;cursor:pointer}.checkbox-label{font-size:.8rem;color:var(--text-muted);line-height:1.6}.checkbox-label a{color:var(--text-secondary);text-decoration:underline;text-underline-offset:2px}.form-note{font-size:.75rem;color:var(--text-muted);text-align:center;font-family:var(--font-mono);letter-spacing:.03em}footer{padding:5rem 0 2rem;background:#080808;border-top:1px solid var(--border-base);position:relative;z-index:10}.footer-grid{display:grid;grid-template-columns:2fr 1.2fr 1fr 1fr;gap:4rem;margin-bottom:4rem}@media(max-width:960px){.footer-grid{grid-template-columns:1.5fr 1fr;gap:3rem}}@media(max-width:600px){.footer-grid{grid-template-columns:1fr;gap:2.5rem}}.footer-col-brand{display:flex;flex-direction:column;gap:1.5rem}.footer-brand-text{font-size:.9375rem;color:var(--text-secondary);line-height:1.6;max-width:360px}.footer-big-cta{margin-bottom:5rem;padding-bottom:5rem;border-bottom:1px solid var(--border-base);position:relative}.footer-big-cta-link{display:block;font-family:var(--font-heading);font-weight:900;font-size:clamp(3rem,10vw,8rem);line-height:.9;letter-spacing:-.05em;text-decoration:none;background:linear-gradient(135deg,#fff 20%,#5dffbf 50%,#4ea5ff 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;animation:cyber-aurora 4s linear infinite;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s}.footer-big-cta-link:hover{transform:scale(1.02) skewX(-2deg);opacity:.9}.footer-big-cta-sub{position:absolute;bottom:2rem;right:0;font-family:var(--font-mono);font-size:.875rem;color:var(--mint);display:flex;align-items:center;gap:.75rem}.footer-big-cta-sub::before{content:"";width:40px;height:1px;background:var(--mint)}.footer-bg-animation{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden}.particle{position:absolute;width:2px;height:2px;background:var(--mint);border-radius:50%;opacity:.3;filter:blur(1px)}@keyframes floatParticle{0%{transform:translateY(0) translateX(0);opacity:0}20%{opacity:.7}80%{opacity:.7}100%{transform:translateY(-100vh) translateX(30px);opacity:0}}.footer-map-container{position:absolute;top:0;right:0;width:60%;height:100%;pointer-events:none;opacity:.12;mask-image:radial-gradient(circle at center,black 0,transparent 80%);-webkit-mask-image:radial-gradient(circle at center,black 0,transparent 80%);z-index:-1}.dot-grid{width:100%;height:100%;background-image:radial-gradient(var(--text-muted) 1px,transparent 1px);background-size:30px 30px}.world-dot{position:absolute;width:6px;height:6px;background:var(--mint);border-radius:50%;box-shadow:0 0 10px var(--mint);opacity:.6}.world-dot:nth-child(1){top:20%;left:30%;animation:blinkStatus 3s infinite .5s}.world-dot:nth-child(2){top:50%;left:10%;animation:blinkStatus 4s infinite 1s}.world-dot:nth-child(3){top:70%;left:80%;animation:blinkStatus 5s infinite 1.5s}.world-dot:nth-child(4){top:40%;left:60%;animation:blinkStatus 3.5s infinite 2s}@keyframes blinkStatus{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:.8;transform:scale(1.5)}}.footer-status{display:flex;flex-direction:column;gap:.5rem;margin-top:1.5rem}.status-item{display:flex;align-items:center;gap:.75rem;font-size:.75rem;font-family:var(--font-mono);color:var(--text-muted)}.status-dot{width:6px;height:6px;background:var(--mint);border-radius:50%;animation:auraPulse 2s infinite}footer{background:#000;position:relative;z-index:1;overflow:hidden;padding:6rem 0 0;border-top:1px solid var(--border-base)}.footer-h4{font-family:var(--font-heading);font-size:.8125rem;font-weight:700;color:#fff;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.5rem}.footer-links{display:flex;flex-direction:column;gap:.875rem}.footer-links a{font-size:.875rem;color:var(--text-muted);text-decoration:none;transition:color .2s,transform .2s;display:flex;align-items:center;gap:.5rem}.footer-links a:hover{color:var(--mint);transform:translateX(4px);color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.02em}.footer-logo svg{filter:drop-shadow(0 0 8px rgba(var(--mint-rgb),0.2));transition:filter .3s ease}.footer-logo:hover svg{filter:drop-shadow(0 0 15px rgba(var(--mint-rgb),0.4))}.section-h2{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}.section-h2.visible{opacity:1;transform:translateY(0)}.section-badge{opacity:0;transform:translateX(-12px);transition:opacity .5s ease,transform .5s ease}.section-badge.visible{opacity:1;transform:translateX(0)}[data-count]{display:inline-block;transition:transform .3s}.sv-node{transition:all .35s cubic-bezier(.22,1,.36,1)}.sv-node.active{border-color:rgba(var(--mint-rgb),.7) !important;box-shadow:0 0 20px rgba(var(--mint-rgb),.18),inset 0 0 10px rgba(var(--mint-rgb),.05);color:var(--mint) !important;transform:scale(1.03)}.sv-node.visible{opacity:1 !important;transform:translateY(0) !important}.sv-badge.visible{opacity:1 !important}#sv-ar-1-line,#sv-ar-2-line{transform-origin:top !important}#sv-ecom-badge{opacity:0;transition:opacity .5s ease}#sv-ecom-badge.visible{opacity:1}.friction-item{opacity:0;transform:translateX(-12px);transition:opacity .45s ease,transform .45s ease}.friction-item.visible{opacity:1;transform:translateX(0)}.proceso-step{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}.proceso-step.visible{opacity:1;transform:translateY(0)}.caso-item{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}.caso-item.visible{opacity:1;transform:translateY(0) scale(1)}transform:scaleX(0);transform-origin:center;transition:transform 1s cubic-bezier(.22,1,.36,1)}.sep-line.visible{transform:scaleX(1)}.code-line{font-family:var(--font-mono);font-size:.65rem;line-height:1.6;color:var(--text-secondary);padding:0 .65rem;opacity:0;transform:translateX(-8px);animation:slideCodeLine .25s ease forwards}@keyframes slideCodeLine{to{opacity:1;transform:translateX(0)}}.typing-cursor{display:inline-block;width:6px;height:11px;background:var(--mint);margin-left:2px;vertical-align:middle;animation:blink .8s step-end infinite;border-radius:1px}.code-kw{color:#c084fc}.code-fn{color:var(--mint)}.code-var{color:#4ea5ff}.code-tag{color:var(--color-error)}.code-str{color:#fbbf24}#scroll-progress{position:fixed;top:0;left:0;width:0;height:2px;background:linear-gradient(to right,var(--mint),#4ea5ff,#c084fc);z-index:9999;transition:width .1s linear;pointer-events:none}.servicio-num{display:none}@keyframes borderScan{0%{transform:translateY(-100%);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(100%);opacity:0}}.servicio-item:hover .servicio-visual::after{content:"";position:absolute;left:0;top:0;width:100%;height:40%;background:linear-gradient(to bottom,transparent,rgba(var(--mint-rgb),.04),transparent);animation:borderScan 2s ease infinite;pointer-events:none}#propuesta,#arquitectura,#casos,#testimonios,#proceso,#faq,#cierre{background:var(--bg-base);position:relative;z-index:2}.uxui-benefits{display:flex;flex-direction:column}.uxui-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.uxui-card{background:var(--bg-surface);border:1px solid var(--border-base);border-radius:var(--radius-lg);padding:1.25rem;display:flex;flex-direction:column;gap:.625rem;transition:border-color .3s,box-shadow .3s,transform .25s}.uxui-card:hover{border-color:rgba(var(--mint-rgb),.2);box-shadow:0 0 30px rgba(var(--mint-rgb),.06);transform:translateY(-2px)}.uxui-card-icon{width:36px;height:36px;border-radius:var(--radius-md);background:rgba(var(--mint-rgb),.08);border:1px solid rgba(var(--mint-rgb),.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}.uxui-card-icon svg{width:16px;height:16px;color:var(--mint)}.uxui-card-title{font-family:var(--font-heading);font-weight:700;font-size:.875rem;color:var(--text-primary);line-height:1.35}.uxui-card-text{font-size:.775rem;color:var(--text-secondary);line-height:1.65}#mobile-menu-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;opacity:0;transition:opacity .8s ease}#mobile-menu.open #mobile-menu-canvas{opacity:.6}
@media(max-width:768px){.carousel-viewport{border:none;border-radius:0;overflow:hidden}.carousel-viewport::before,.carousel-viewport::after{display:none}.carousel-track{gap:0!important;background:transparent}.testimonio-card{min-width:0;padding:2rem 1.25rem;box-sizing:border-box}.carousel-controls{margin-top:1.25rem}.carousel-dot{width:8px;height:8px}.carousel-dot.active{width:24px}.carousel-btn{width:44px;height:44px}.casos-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:1rem;padding:0 1rem 1rem;scrollbar-width:none;scroll-padding-left:1rem}.casos-grid::-webkit-scrollbar{display:none}.casos-grid>.caso-card{min-width:80vw;scroll-snap-align:center;flex-shrink:0;border:1px solid var(--border-base);border-radius:var(--radius-xl);overflow:hidden}.proceso-step,.proceso-card{padding-right:2rem;overflow:hidden;word-wrap:break-word}.proceso-step .proceso-text,.proceso-card p{padding-right:0;overflow-wrap:break-word}.testimonio-text{font-size:.75rem;line-height:1.5}.quote-mark{font-size:2rem;line-height:1}.casos-header{flex-direction:column;align-items:flex-start;gap:1rem}.casos-header .btn-ghost{align-self:flex-start;font-size:.8rem}}
@media(max-width:500px){.trinchera-grid{grid-template-columns:1fr;gap:0}}

@media(max-width:420px){.container-main{padding-left:1.25rem;padding-right:1.25rem}.section-h2{font-size:1.75rem}.proceso-layout{padding:0}.trinchera-grid{grid-template-columns:1fr!important;gap:.5rem}}

/* ── Large screens (≥1600px) ── */
@media(min-width:1600px){
  .container-main{max-width:1440px;padding:0 3rem}
  .hero-h1{font-size:clamp(3rem,4.5vw,4.5rem)}
  .hero-subtitle{font-size:1.15rem;max-width:600px}
  .hero-layout{gap:6rem}
  .hero-metric-value{font-size:1.4rem}
  .hero-metric-label{font-size:.9rem}
  .nav-links a{font-size:.9375rem}
  .nav-links{gap:2.5rem}
  .nav-logo img{height:32px}
  .cierre-form-inner{padding:3rem}
  .input{padding:.875rem 1.1rem;font-size:.9375rem}
  .label{font-size:.85rem}
}

/* ── Extra-large screens (≥1920px) ── */
@media(min-width:1920px){
  .container-main{max-width:1600px;padding:0 4rem}
  .hero-h1{font-size:clamp(3.5rem,4.5vw,5rem)}
  .hero-subtitle{font-size:1.2rem;max-width:640px}
  .hero-layout{gap:7rem}
  .hero-metric-value{font-size:1.5rem}
  .hero-metric-label{font-size:.95rem}
  .nav-links a{font-size:1rem}
  .nav-links{gap:3rem}
  .nav-logo img{height:36px}
  .cierre-form-inner{padding:3.5rem}
  .input{padding:1rem 1.25rem;font-size:1rem}
  .label{font-size:.9rem}
  .form-row{gap:1.25rem}
}

@media(max-width:768px){.carousel-card{min-width:280px;padding:1.5rem}.carousel-card .quote-text{font-size:.9rem;line-height:1.6}.nosotros-ai-member{min-width:260px;flex-shrink:0}}
#mobile-menu.open a{opacity:0;animation:menuLinkSlide .5s cubic-bezier(.22,1,.36,1) forwards}
#mobile-menu.open a:nth-child(even){animation-name:menuLinkSlideRight}
#mobile-menu.open a:nth-child(1){animation-delay:.08s}#mobile-menu.open a:nth-child(2){animation-delay:.14s}#mobile-menu.open a:nth-child(3){animation-delay:.2s}#mobile-menu.open a:nth-child(4){animation-delay:.26s}#mobile-menu.open a:nth-child(5){animation-delay:.32s}#mobile-menu.open a:nth-child(6){animation-delay:.38s}#mobile-menu.open a:nth-child(7){animation-delay:.44s}#mobile-menu.open a:nth-child(8){animation-delay:.5s}#mobile-menu.open a:nth-child(9){animation-delay:.56s}#mobile-menu.open a:nth-child(10){animation-delay:.62s}#mobile-menu.open a:nth-child(11){animation-delay:.68s}
#mobile-menu.open a:last-child{animation-name:menuCtaPop;animation-delay:.75s;animation-duration:.6s}
/* ═══ Mobile spacing fixes (375-768px) ═══ */
/* ═══ Tablet + Mobile spacing (≤900px) ═══ */
@media(max-width:900px){
  section{padding-top:3.5rem !important;padding-bottom:3.5rem !important}
  #trinchera{padding-top:3rem !important;padding-bottom:3rem !important}
  .section-h2{font-size:clamp(1.5rem,5vw,2rem);margin-bottom:.75rem}
  .section-sub{font-size:.875rem;margin-top:.5rem}
  .marquee-section{padding-top:1.25rem !important;padding-bottom:1.25rem !important}
  .servicios-stack{gap:1.5rem}
  .servicios-stack .servicio-card{padding:1.5rem}
  .proceso-layout{gap:1.5rem}
  .proceso-step{padding:1.25rem}
  .faq-layout{gap:1rem}
  .cierre-layout{gap:1.5rem}
  .cierre-form-inner{padding:1.5rem}
  .trinchera-grid{gap:.75rem}
  .funnel-container{padding:1.5rem}
  .uxui-benefits{gap:1rem}
  .uxui-benefit{padding:1.25rem}
  .container-main{max-width:100% !important;overflow-x:clip}
}
/* ═══ Mobile spacing (≤768px) ═══ */
@media(max-width:768px){
  #hero{padding-top:6rem !important;padding-bottom:2rem !important;min-height:auto !important}
  .hero-phone-wrapper{display:none !important}
  .hero-layout{gap:1.5rem !important}
  .hero-subtitle{margin-bottom:1.25rem !important}
  .hero-ctas{margin-bottom:1.5rem !important;flex-direction:column !important}
  .hero-ctas .btn-primary,.hero-ctas .btn-secondary{width:100% !important;justify-content:center !important;text-align:center !important}
  .hero-tag{margin-bottom:.75rem !important}
  .hero-h1{margin-bottom:1rem !important}
  .hero-metrics{gap:.75rem}
  .hero-stats{gap:1rem}
  .hero-stats .stat-item{padding:.75rem}
  .casos-grid>.caso-card{min-width:0;width:80vw;max-width:80vw}
  #casos{overflow-x:hidden !important}
}
@media(max-width:420px){
  section{padding-top:2.5rem !important;padding-bottom:2.5rem !important}
  #hero{padding-top:6.5rem !important;padding-bottom:1.5rem !important}
  .section-h2{font-size:1.5rem}
  .cierre-form-inner{padding:1.25rem}
}

/* ═══ UX Funnel Visual ═══ */
.ux-funnel-container {
  position: relative;
  width: 100%;
  height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

.ux-funnel-layer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(20px) rotateX(15deg);
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.servicio-item.visible .ux-funnel-layer {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

.ux-funnel-layer.l-top { transition-delay: 0.1s; z-index: 3; }
.ux-funnel-layer.l-mid { transition-delay: 0.3s; z-index: 2; margin-top: -15px; }
.ux-funnel-layer.l-bot { transition-delay: 0.5s; z-index: 1; margin-top: -15px; }

.ux-funnel-shape {
  background: rgba(93, 255, 191, 0.04);
  border: 1px solid rgba(93, 255, 191, 0.2);
  border-radius: 50% / 25%;
  position: relative;
  box-shadow: inset 0 0 20px rgba(93, 255, 191, 0.05);
}

.l-top .ux-funnel-shape { width: 180px; height: 45px; }
.l-mid .ux-funnel-shape { width: 130px; height: 40px; background: rgba(93, 255, 191, 0.08); border-color: rgba(93, 255, 191, 0.4); }
.l-bot .ux-funnel-shape { width: 80px; height: 35px; background: rgba(93, 255, 191, 0.15); border-color: var(--mint); box-shadow: 0 0 15px rgba(93, 255, 191, 0.2); }

.ux-funnel-tag {
  position: absolute;
  left: calc(50% + 100px);
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  opacity: 0.6;
}

@media(max-width: 768px) {
  .ux-funnel-tag { left: auto; right: -20px; top: -10px; font-size: 8px; }
}

.ux-funnel-badge {
  position: absolute;
  bottom: -40px;
  background: var(--mint);
  color: #0c0c0c;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(93, 255, 191, 0.3);
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s;
}

.servicio-item.visible .ux-funnel-badge {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ux-particles {
  position: absolute;
  top: 40px;
  height: 140px;
  width: 100px;
  pointer-events: none;
  z-index: 4;
}

.p-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--mint);
  border-radius: 50%;
  opacity: 0;
  filter: blur(1px);
}

.servicio-item.visible .p-dot {
  animation: funnelFlow 2.8s infinite;
}

.p-dot:nth-child(1) { left: 20%; animation-delay: 0s; }
.p-dot:nth-child(2) { left: 50%; animation-delay: 0.5s; }
.p-dot:nth-child(3) { left: 80%; animation-delay: 1s; }
.p-dot:nth-child(4) { left: 35%; animation-delay: 1.5s; }
.p-dot:nth-child(5) { left: 65%; animation-delay: 2s; }
.p-dot:nth-child(6) { left: 45%; animation-delay: 0.8s; }

@keyframes funnelFlow {
  0% { transform: translateY(0) scale(1.2); opacity: 0; }
  10% { opacity: 0.8; }
  50% { transform: translateY(70px) scale(0.8); opacity: 0.4; }
  80% { opacity: 0.8; transform: translateY(120px) scale(0.5); }
  100% { transform: translateY(150px) scale(0.3); opacity: 0; }
}

.ux-blueprint-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.15;
}

.ux-blueprint-lines .line {
  position: absolute;
  background: var(--mint);
  width: 1px;
  height: 120px;
  top: 60px;
  transform-origin: top;
}

.line.l1 { left: 25%; transform: rotate(18deg); }
.line.l2 { right: 25%; transform: rotate(-18deg); }

/* ─── CTA FORM: Service cards (shared across all pages) ─── */
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .375rem; }
.service-card {
  display: flex; align-items: center; gap: .375rem;
  padding: .3125rem .625rem; border: none; background: rgba(255,255,255,.05);
  border-radius: 20px; cursor: pointer; transition: all .15s; user-select: none;
}
.service-card:hover { background: rgba(255,255,255,.09); }
.service-card.selected { background: rgba(var(--mint-rgb),.1); }
.service-card-check {
  width: 12px; height: 12px; min-width: 12px; border-radius: 3px;
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}
.service-card.selected .service-card-check { background: var(--mint); border-color: var(--mint); }
.service-card-check svg { width: 8px; height: 8px; color: #0e0e0e; opacity: 0; transition: opacity .1s; }
.service-card.selected .service-card-check svg { opacity: 1; }
.service-card-label { font-size: .75rem; font-weight: 500; color: var(--text-secondary); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.service-card.selected .service-card-label { color: var(--text-primary); }


/* ── Mobile: section-badge navbar clearance ── */
@media (max-width: 1024px) {
  .section-badge:first-child { margin-top: 1rem; }
}


/* ──────────────────────────────────────────────────────────
   CTA FORM (footer-cta variant) — scoped a #tp-cta-form
   Mejoras visuales del form que se inyecta en home/casos/servicios
   Coordinado con iniciar-proyecto/index.html
   ────────────────────────────────────────────────────────── */

#tp-cta-form .cta-section + .cta-section { margin-top: 1.5rem; }

#tp-cta-form .cta-section-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 .875rem;
  display: flex;
  align-items: center;
  gap: .625rem;
}
#tp-cta-form .cta-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), transparent);
}

#tp-cta-form .form-row { margin-bottom: 1rem; }
#tp-cta-form .form-row:last-child { margin-bottom: 0; }

#tp-cta-form .input {
  padding: .75rem 1rem;
  min-height: 44px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
#tp-cta-form .input:hover { border-color: rgba(255,255,255,.16); }
#tp-cta-form .input:focus {
  border-color: rgba(var(--mint-rgb),.45);
  box-shadow: 0 0 0 4px rgba(var(--mint-rgb),.12);
  background: var(--bg-surface);
}

#tp-cta-form .custom-select-trigger {
  padding: .75rem 1rem;
  min-height: 44px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
#tp-cta-form .custom-select-trigger:hover { border-color: rgba(255,255,255,.16); }
#tp-cta-form .custom-select[aria-expanded="true"] .custom-select-trigger,
#tp-cta-form .custom-select-trigger:focus {
  border-color: rgba(var(--mint-rgb),.45);
  box-shadow: 0 0 0 4px rgba(var(--mint-rgb),.12);
  background: var(--bg-surface);
}

/* Services chips: 3 columnas con cuerpo (override de case-study.css) */
#tp-cta-form .services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: .5rem !important;
}
#tp-cta-form .service-card {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  padding: .5rem .625rem !important;
  min-height: 40px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  user-select: none;
}
#tp-cta-form .service-card:hover {
  background: rgba(var(--mint-rgb),.04) !important;
  border-color: rgba(var(--mint-rgb),.25) !important;
}
#tp-cta-form .service-card:active { transform: scale(.98); }
#tp-cta-form .service-card.selected {
  background: rgba(var(--mint-rgb),.08) !important;
  border-color: rgba(var(--mint-rgb),.55) !important;
}
#tp-cta-form .service-card-check {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  border-radius: 4px !important;
  border: 1.5px solid rgba(255,255,255,.3) !important;
}
#tp-cta-form .service-card:hover .service-card-check { border-color: rgba(var(--mint-rgb),.5) !important; }
#tp-cta-form .service-card.selected .service-card-check {
  background: var(--mint) !important;
  border-color: var(--mint) !important;
}
#tp-cta-form .service-card-check svg { width: 10px !important; height: 10px !important; color: #0e0e0e !important; }
#tp-cta-form .service-card-label {
  font-size: .75rem !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0;
}
#tp-cta-form .service-card.selected .service-card-label { color: var(--text-primary) !important; font-weight: 600 !important; }

@media (max-width: 560px) {
  #tp-cta-form .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Submit button: outline mint cuando disabled (no gris muerto) */
#tp-cta-form #form-submit-btn {
  width: 100%;
  margin-top: 1.25rem;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9375rem 1.5rem;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s;
}
#tp-cta-form #form-submit-btn.btn-enabled {
  background: var(--mint);
  color: #0e0e0e;
  box-shadow: 0 0 20px rgba(var(--mint-rgb),.25), 0 4px 12px rgba(0,0,0,.2);
}
#tp-cta-form #form-submit-btn.btn-enabled:hover {
  background: #7fffcf;
  box-shadow: 0 0 30px rgba(var(--mint-rgb),.35), 0 6px 20px rgba(0,0,0,.25);
  transform: translateY(-1px);
}
#tp-cta-form #form-submit-btn.btn-disabled {
  background: rgba(var(--mint-rgb),.04);
  color: rgba(var(--mint-rgb),.55);
  cursor: not-allowed;
  border: 1px solid rgba(var(--mint-rgb),.2);
}
#tp-cta-form #form-submit-btn.btn-success {
  background: rgba(var(--mint-rgb),.15);
  color: var(--mint);
  border: 1px solid rgba(var(--mint-rgb),.2);
  cursor: default;
}

/* Counter dinámico */
#tp-cta-form .cta-form-counter {
  display: none;
  text-align: center;
  font-size: .75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: .75rem;
  letter-spacing: .02em;
}
#tp-cta-form .cta-form-counter.visible { display: block; }
#tp-cta-form .cta-form-counter .num { color: var(--mint); font-weight: 600; }

/* Privacy más legible */
#tp-cta-form #privacy-row .checkbox-label {
  font-size: .8125rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ============================================================
   BENTO SERVICIOS v2 — Stripe-style sobre dark (2026-05-19)
   ============================================================ */

/* Section spacing: Stripe usa 96px arriba/abajo */
#propuesta { padding-top: 96px; padding-bottom: 96px; }
#propuesta .section-h2 { font-weight: 300; letter-spacing: -.025em; }
.servicios-bento { margin-top: 3rem; }

/* Layout flex (NO grid) con gap 16px como Stripe */
.servicios-bento {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Tamaños card: large 2/3, small 1/3 — Stripe usa 816+16+400=1232 (66/33) */
.bento-card {
  position: relative;
  display: block;
  flex-shrink: 0;
  flex-grow: 0;
  height: 620px;
  border-radius: 6px;
  overflow: hidden;
  background: #050505;
  color: inherit;
  text-decoration: none;
  isolation: isolate;
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.bento-card--large { flex-basis: calc(66.666% - 8px); }
.bento-card--small { flex-basis: calc(33.333% - 8px); }

/* Hover: lift sutil + glow */
.bento-card:hover {
  transform: translateY(-3px);
}

/* Blobs — el secreto de Stripe: 3 círculos gigantes con blur(10px) apilados */
.bento-card-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
}
.bento-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .85;
  mix-blend-mode: screen;
  transition: transform 8s ease-in-out;
}
.bento-blob-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,.18) 45%, rgba(5,5,5,.45) 100%);
  pointer-events: none;
}

/* Animación lenta de los blobs (respiración) */
@keyframes bentoBlobDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.08); } }
@keyframes bentoBlobDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,40px) scale(1.05); } }
@keyframes bentoBlobDrift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px,20px) scale(1.1); } }
.bento-blob--1 { animation: bentoBlobDrift1 18s ease-in-out infinite; }
.bento-blob--2 { animation: bentoBlobDrift2 22s ease-in-out infinite; }
.bento-blob--3 { animation: bentoBlobDrift3 26s ease-in-out infinite; }

/* Tints por servicio — cada card tiene 3 blobs de color distintos */
.bento-card--ux .bento-blob--1 { width: 70%; height: 60%; left: -10%; top: 25%; background: rgba(255,140,90,.55); }   /* peach */
.bento-card--ux .bento-blob--2 { width: 65%; height: 55%; right: -8%; top: 5%; background: rgba(255,90,180,.42); }   /* magenta */
.bento-card--ux .bento-blob--3 { width: 60%; height: 50%; right: 5%; bottom: -10%; background: rgba(93,255,191,.30); } /* mint accent */

.bento-card--web .bento-blob--1 { width: 90%; height: 60%; left: -10%; top: 20%; background: rgba(93,255,191,.55); }
.bento-card--web .bento-blob--2 { width: 80%; height: 50%; right: -15%; top: 50%; background: rgba(80,180,255,.42); }
.bento-card--web .bento-blob--3 { width: 75%; height: 45%; left: 10%; bottom: -15%; background: rgba(120,90,255,.28); }

.bento-card--consult .bento-blob--1 { width: 85%; height: 55%; left: -10%; top: 30%; background: rgba(80,227,194,.50); }
.bento-card--consult .bento-blob--2 { width: 75%; height: 50%; right: -10%; top: 10%; background: rgba(150,255,160,.38); }
.bento-card--consult .bento-blob--3 { width: 70%; height: 50%; right: 0%; bottom: -10%; background: rgba(255,230,130,.25); }

.bento-card--ia .bento-blob--1 { width: 65%; height: 55%; left: -5%; top: 20%; background: rgba(93,255,191,.55); }
.bento-card--ia .bento-blob--2 { width: 60%; height: 55%; right: -5%; top: 5%; background: rgba(190,255,100,.40); }
.bento-card--ia .bento-blob--3 { width: 65%; height: 55%; right: 10%; bottom: -10%; background: rgba(140,90,255,.32); }

/* Texto: absolute top-left como Stripe */
.bento-card-text {
  position: absolute;
  top: 28px;
  left: 28px;
  right: 60px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.bento-card--large .bento-card-text { top: 32px; left: 32px; right: 72px; }

.bento-card-tag {
  font-size: .7rem;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bento-card-headline {
  font-family: 'Plus Jakarta Sans', var(--font-heading, system-ui), sans-serif;
  font-weight: 300;
  font-size: 1.625rem;       /* 26px como Stripe */
  line-height: 1.12;
  letter-spacing: -.025em;
  color: #fff;
  margin: 0;
}
.bento-card--large .bento-card-headline { font-size: 1.875rem; }  /* 30px en large */

.bento-card-sub {
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255,255,255,.62);
  margin: .35rem 0 0;
  max-width: 36em;
}

/* Icono expand top-right (detalle Stripe) */
.bento-card-expand {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.55);
  z-index: 4;
  transition: background 1s cubic-bezier(.22,.61,.36,1), color 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);
}
.bento-card-expand svg { width: 12px; height: 12px; }
.bento-card:hover .bento-card-expand {
  background: rgba(255,255,255,.12);
  color: #fff;
  transform: rotate(0deg) scale(1.08);
}

/* Scene: contenedor de la UI composition (ocupa la parte inferior) */
.bento-card-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

/* Stub temporal */
.web-stub {
  position: absolute;
  inset: auto 0 40% 0;
  text-align: center;
  font-size: .8rem;
  color: rgba(255,255,255,.35);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* sr-only (bullets indexables pero invisibles) */
.bento-card .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   SCENE — UX/UI composition
   ============================================================ */
.scene--ux .ux-frame {
  position: absolute;
  left: 32px;
  bottom: -40px;
  width: 58%;
  background: #111316;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transform-origin: left center;
  overflow: hidden;
  transition: transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.bento-card:hover .scene--ux .ux-frame {
  transform: perspective(1400px) rotateY(-4deg) rotateX(1deg) translateY(-4px);
}
.ux-frame-bar {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: 9px 12px;
  background: #0d0e10;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ux-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.ux-dot:nth-child(2) { background: #febc2e; }
.ux-dot:nth-child(3) { background: #28c840; }
.ux-url {
  margin-left: .75rem;
  font-size: .65rem;
  color: rgba(255,255,255,.4);
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: .02em;
}
.ux-frame-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 12px;
  padding: 14px;
}
.ux-col {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ux-canvas-title, .ux-tokens-title {
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.ux-btn-row { display: flex; gap: 6px; }
.ux-btn {
  font-size: .65rem;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 600;
}
.ux-btn--primary { background: #5DFFBF; color: #0e0e0e; }
.ux-btn--ghost { background: rgba(255,255,255,.05); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.1); }
.ux-spec-row {
  display: flex;
  justify-content: space-between;
  font-size: .6rem;
  font-family: var(--font-mono, monospace);
  color: rgba(255,255,255,.4);
}
.ux-spec-row b { color: rgba(255,255,255,.85); font-weight: 500; }
.ux-token {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .6rem;
  color: rgba(255,255,255,.55);
}
.ux-token code { margin-left: auto; font-size: .55rem; color: rgba(255,255,255,.7); font-family: var(--font-mono, monospace); }
.ux-swatch { width: 10px; height: 10px; border-radius: 3px; border: 1px solid rgba(255,255,255,.1); }
.ux-swatch--mint { background: #5DFFBF; }
.ux-swatch--dark { background: #0E0E0E; }
.ux-swatch--text { background: #F8F8F8; }
.ux-swatch--muted { background: #7A7F85; }

/* Cursor flotante */
.ux-cursor {
  position: absolute;
  left: 38%;
  top: 60%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
.ux-cursor svg { width: 16px; height: 18px; }
.ux-cursor-tag {
  background: #5DFFBF;
  color: #0e0e0e;
  font-size: .6rem;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: -.01em;
}

/* Phone overlay derecha */
.scene--ux .ux-phone {
  position: absolute;
  right: 6%;
  bottom: 14%;
  width: 168px;
  background: #0a0a0a;
  border: 4px solid #181818;
  border-radius: 22px;
  padding: 14px 12px;
  box-shadow: 0 24px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) inset;
  transform: rotate(4deg);
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.bento-card:hover .scene--ux .ux-phone { transform: rotate(2deg) translateY(-4px); }
.ux-phone-screen { display: flex; flex-direction: column; gap: 6px; }
.ux-phone-step {
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.ux-phone-h {
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 6px;
}
.ux-phone-options { display: flex; flex-direction: column; gap: 4px; }
.ux-phone-opt {
  font-size: .62rem;
  padding: 6px 9px;
  border-radius: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
}
.ux-phone-opt--sel {
  background: rgba(93,255,191,.12);
  border-color: rgba(93,255,191,.45);
  color: #5DFFBF;
}
.ux-phone-cta {
  margin-top: 6px;
  font-size: .65rem;
  font-weight: 600;
  background: #5DFFBF;
  color: #0e0e0e;
  text-align: center;
  padding: 7px;
  border-radius: 6px;
}

/* Métrica conversión bottom-right */
.scene--ux .ux-metric {
  position: absolute;
  right: 32px;
  bottom: 32px;
  background: rgba(14,14,14,.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
  min-width: 130px;
}
.ux-metric-label {
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.ux-metric-val {
  font-family: var(--font-heading, sans-serif);
  font-weight: 300;
  font-size: 1.75rem;
  letter-spacing: -.03em;
  color: #5DFFBF;
  line-height: 1;
}
.ux-metric-val small { font-size: 1rem; opacity: .7; }
.ux-metric-bars {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 22px;
}
.ux-metric-bars i {
  display: block;
  width: 6px;
  height: var(--h);
  background: linear-gradient(180deg, #5DFFBF, rgba(93,255,191,.4));
  border-radius: 1px;
}

/* Responsive */
@media (max-width: 1024px) {
  .bento-card { height: 540px; }
  .bento-card--large, .bento-card--small { flex-basis: 100%; }
  .scene--ux .ux-frame { width: 65%; }
}
@media (max-width: 720px) {
  #propuesta { padding-top: 56px; padding-bottom: 56px; }
  .bento-card { height: 480px; border-radius: 6px; }
  .bento-card-text { top: 22px; left: 22px; right: 50px; }
  .bento-card-headline,
  .bento-card--large .bento-card-headline { font-size: 1.4rem; }
  .bento-card-sub { font-size: .85rem; }
  .bento-card-expand { top: 22px; right: 22px; }
  .scene--ux .ux-frame { width: 80%; left: 22px; bottom: -30px; }
  .scene--ux .ux-phone { width: 130px; right: 4%; bottom: 10%; }
  .scene--ux .ux-metric { right: 18px; bottom: 18px; padding: 9px 12px; }
  .ux-metric-val { font-size: 1.4rem; }
}

/* ============================================================
   SCENE — Web a Medida (composition)
   ============================================================ */
.scene--web .web-dashboard {
  position: absolute;
  left: 24px;
  bottom: -20px;
  width: 78%;
  background: #111316;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  box-shadow: 0 24px 50px rgba(0,0,0,.55);
  transform: perspective(1200px) rotateX(8deg) rotateY(-4deg);
  transform-origin: bottom left;
  overflow: hidden;
  transition: transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.bento-card:hover .scene--web .web-dashboard {
  transform: perspective(1200px) rotateX(6deg) rotateY(-3deg) translateY(-4px);
}
.web-dash-bar {
  display: flex; align-items: center; gap: .35rem;
  padding: 8px 10px;
  background: #0d0e10;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.web-dash-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px 12px 6px;
}
.web-kpi {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 5px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.web-kpi-label {
  font-size: .55rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.45); font-weight: 600;
}
.web-kpi-val {
  font-size: 1.05rem; font-weight: 500; color: #fff;
  letter-spacing: -.02em;
}
.web-kpi-trend {
  font-size: .6rem; color: #5DFFBF; font-weight: 600;
}
.web-chart { padding: 0 12px 12px; height: 56px; }
.web-chart svg { width: 100%; height: 100%; display: block; }

.scene--web .web-perf {
  position: absolute;
  top: 38%;
  right: 18px;
  background: rgba(14,14,14,.78);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 9px 12px;
  display: flex; align-items: center; gap: 8px;
  z-index: 5;
}
.web-perf .deploy-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #5DFFBF;
  box-shadow: 0 0 10px #5DFFBF;
}
.web-perf-label {
  font-size: .5rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.55); font-weight: 600;
}
.web-perf-val {
  font-size: 1.1rem; font-weight: 300; color: #fff;
  letter-spacing: -.02em; line-height: 1;
}
.web-perf-val small { font-size: .7rem; opacity: .7; margin-left: 1px; }

.scene--web .web-code {
  position: absolute;
  bottom: 24px;
  right: 16px;
  background: rgba(10,10,12,.85);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .58rem;
  line-height: 1.5;
  color: rgba(255,255,255,.75);
  z-index: 5;
}
.web-code-l { color: #c084fc; }
.web-code-v { color: #5DFFBF; }
.web-code-fn { color: #fbbf24; }
.web-code-c { color: rgba(255,255,255,.35); font-style: italic; }

/* ============================================================
   SCENE — Consultoría (funnel)
   ============================================================ */
.scene--consult .consult-funnel {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 4;
}
.consult-step {
  display: grid;
  grid-template-columns: 80px 1fr 50px;
  gap: 10px;
  align-items: center;
}
.consult-step-label {
  font-size: .6rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  letter-spacing: .02em;
}
.consult-step-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(80,227,194,.55), rgba(80,227,194,.85));
  width: var(--w);
  box-shadow: 0 0 8px rgba(80,227,194,.3);
}
.consult-step-bar--red {
  background: linear-gradient(90deg, rgba(248,113,113,.55), rgba(248,113,113,.85));
  box-shadow: 0 0 8px rgba(248,113,113,.3);
}
.consult-step-bar--ok {
  background: linear-gradient(90deg, #5DFFBF, #80FFD0);
  box-shadow: 0 0 12px rgba(93,255,191,.5);
}
.consult-step-val {
  font-size: .6rem;
  font-family: var(--font-mono, monospace);
  color: rgba(255,255,255,.8);
  text-align: right;
}
.consult-step--issue .consult-step-label { color: #f87171; }
.consult-step--ok .consult-step-label { color: #5DFFBF; }
.consult-step--ok .consult-step-val { color: #5DFFBF; font-weight: 600; }

.scene--consult .consult-tag {
  position: absolute;
  top: 38%;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  background: rgba(14,14,14,.6);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 5px 10px;
  z-index: 5;
}
.consult-tag svg { width: 11px; height: 11px; color: #5DFFBF; }

/* ============================================================
   SCENE — IA generativa (workflow + chat + counter)
   ============================================================ */
.scene--ia .ia-workflow {
  position: absolute;
  left: 32px;
  bottom: 80px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 4;
}
.ia-node {
  background: rgba(20,22,26,.92);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: .62rem;
  color: rgba(255,255,255,.8);
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  backdrop-filter: blur(6px);
}
.ia-node svg { width: 11px; height: 11px; color: rgba(255,255,255,.55); }
.ia-node--core {
  background: rgba(93,255,191,.14);
  border-color: rgba(93,255,191,.55);
  color: #5DFFBF;
  font-weight: 600;
  padding: 9px 12px;
  position: relative;
}
.ia-node--core small {
  display: block;
  font-size: .5rem;
  opacity: .65;
  margin-top: 1px;
  font-weight: 400;
  font-family: var(--font-mono, monospace);
}
.ia-node-spark {
  position: absolute;
  top: -3px; right: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #5DFFBF;
  box-shadow: 0 0 8px #5DFFBF;
  animation: iaSparkPulse 2s ease-in-out infinite;
}
@keyframes iaSparkPulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
.ia-link {
  width: 18px; height: 1px;
  background: linear-gradient(90deg, rgba(93,255,191,.6), rgba(93,255,191,.1));
}
.ia-node-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ia-node-stack .ia-node {
  padding: 4px 8px;
  font-size: .55rem;
}
.ia-node--out {
  background: rgba(93,255,191,.06);
  border-color: rgba(93,255,191,.18);
  color: rgba(255,255,255,.85);
}

.scene--ia .ia-chat {
  position: absolute;
  right: 28px;
  bottom: 90px;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 5;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.55));
}
.ia-msg {
  font-size: .68rem;
  line-height: 1.4;
  padding: 7px 10px;
  border-radius: 11px;
  max-width: 88%;
}
.ia-msg--bot {
  background: rgba(20,22,26,.92);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.08);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.ia-msg--user {
  background: #5DFFBF;
  color: #0e0e0e;
  font-weight: 500;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.ia-msg--typing {
  display: inline-flex;
  gap: 4px;
  padding: 9px 11px;
  width: 44px;
}
.ia-msg--typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.6);
  animation: iaDot 1.3s infinite ease-in-out;
}
.ia-msg--typing span:nth-child(2) { animation-delay: .15s; }
.ia-msg--typing span:nth-child(3) { animation-delay: .3s; }
@keyframes iaDot { 0%,80%,100% { opacity:.3; transform: scale(.8); } 40% { opacity:1; transform: scale(1); } }

.scene--ia .ia-counter {
  position: absolute;
  left: 32px;
  bottom: 24px;
  background: rgba(14,14,14,.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px 14px;
  z-index: 5;
}
.ia-counter-label {
  font-size: .55rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  font-weight: 600;
}
.ia-counter-val {
  font-family: var(--font-heading, sans-serif);
  font-weight: 300;
  font-size: 1.5rem;
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1;
  margin: 2px 0;
}
.ia-counter-trend {
  font-size: .58rem;
  color: #5DFFBF;
  font-weight: 600;
}

/* Mobile tweaks scenes */
@media (max-width: 720px) {
  .scene--web .web-dashboard { width: 90%; left: 18px; bottom: -16px; }
  .scene--web .web-perf { right: 16px; top: 32%; padding: 7px 10px; }
  .scene--web .web-code { display: none; }
  .scene--consult .consult-funnel { left: 18px; right: 18px; bottom: 40px; }
  .consult-step { grid-template-columns: 70px 1fr 45px; gap: 8px; }
  .scene--consult .consult-tag { right: 18px; top: 38%; }
  .scene--ia .ia-workflow { left: 18px; bottom: 60px; gap: 6px; }
  .scene--ia .ia-chat { right: 18px; bottom: 70px; width: 210px; }
  .ia-msg { font-size: .62rem; }
  .scene--ia .ia-counter { left: 18px; bottom: 18px; padding: 8px 12px; }
}

/* ============================================================
   BENTO v3 — Overrides Stripe-faithful (2026-05-19)
   Animaciones internas reales + mockups centrados + clip-path inset
   ============================================================ */

/* Variables de easing universal Stripe */
:root {
  --bento-ease: cubic-bezier(0.165, 0.84, 0.44, 1);  /* easeOutExpo */
  --bento-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* easeOutQuint */
}

/* Cards más altas, clip-path en hover (técnica Stripe) */
.bento-card {
  height: 720px;
  transition: transform 1.2s var(--bento-ease);
}
.bento-card-blobs {
  clip-path: inset(4px round 6px);
  transition: clip-path .9s var(--bento-ease);
}
.bento-card:hover .bento-card-blobs { clip-path: inset(0px round 6px); }

/* Glow border en hover (técnica Stripe — border gradient que aparece) */
.bento-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(93,255,191,0) 0%, rgba(93,255,191,.4) 50%, rgba(93,255,191,0) 100%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .8s var(--bento-ease);
  pointer-events: none;
  z-index: 6;
}
.bento-card:hover::after { opacity: 1; }

/* ============================================================
   SCENE UX/UI v3 — Frame centrado, animaciones internas
   ============================================================ */
.scene--ux .ux-frame {
  bottom: auto;
  top: 50%;
  left: 32px;
  width: 56%;
  transform: translateY(-42%) perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition: transform 1.4s var(--bento-ease);
}
.bento-card:hover .scene--ux .ux-frame {
  transform: translateY(-46%) perspective(1400px) rotateY(-4deg) rotateX(1deg);
}

/* Phone CTA pulse */
.ux-phone-cta {
  position: relative;
  overflow: hidden;
}
.ux-phone-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: uxCtaShine 3.5s var(--bento-ease) infinite;
}
@keyframes uxCtaShine {
  0%, 60% { transform: translateX(-100%); }
  100% { transform: translateX(120%); }
}

/* Métrica val: cuenta animada */
.ux-metric-val {
  background: linear-gradient(180deg, #5DFFBF, #B4FFD9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: uxMetricGlow 4s ease-in-out infinite;
}
@keyframes uxMetricGlow {
  0%, 100% { filter: drop-shadow(0 0 0px rgba(93,255,191,0)); }
  50% { filter: drop-shadow(0 0 12px rgba(93,255,191,.55)); }
}
.ux-metric-bars i {
  transform-origin: bottom;
  animation: uxBarRise 1.4s var(--bento-ease) backwards;
}
.ux-metric-bars i:nth-child(1) { animation-delay: 0s; }
.ux-metric-bars i:nth-child(2) { animation-delay: .15s; }
.ux-metric-bars i:nth-child(3) { animation-delay: .3s; }
.ux-metric-bars i:nth-child(4) { animation-delay: .45s; }
@keyframes uxBarRise { from { transform: scaleY(0); } }

/* Cursor flotante con movimiento sutil */
.ux-cursor {
  animation: uxCursorMove 6s var(--bento-ease-smooth) infinite;
}
@keyframes uxCursorMove {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(8px, -4px); }
  60% { transform: translate(-3px, 6px); }
}

/* Phone más centrado verticalmente */
.scene--ux .ux-phone {
  bottom: auto;
  top: 50%;
  right: 8%;
  transform: translateY(-48%) rotate(4deg);
}
.bento-card:hover .scene--ux .ux-phone {
  transform: translateY(-52%) rotate(2deg);
}

/* Métrica más arriba */
.scene--ux .ux-metric {
  bottom: 80px;
  right: 36px;
}

/* ============================================================
   SCENE WEB v3 — Dashboard centrado + chart drawing
   ============================================================ */
.scene--web .web-dashboard {
  bottom: auto;
  top: 52%;
  left: 50%;
  width: 82%;
  transform: translate(-50%, -50%) perspective(1200px) rotateX(10deg) rotateY(-3deg);
  transition: transform 1.4s var(--bento-ease);
}
.bento-card:hover .scene--web .web-dashboard {
  transform: translate(-50%, -54%) perspective(1200px) rotateX(7deg) rotateY(-2deg);
}

/* Chart SVG: anima stroke-dasharray (se dibuja) */
.web-chart svg path:first-child {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: webChartDraw 2.4s var(--bento-ease) forwards;
  animation-delay: .4s;
}
.web-chart svg path:last-child {
  opacity: 0;
  animation: webChartFill 1.2s var(--bento-ease) forwards;
  animation-delay: 2.4s;
}
@keyframes webChartDraw { to { stroke-dashoffset: 0; } }
@keyframes webChartFill { to { opacity: .25; } }

/* KPIs count-up (CSS @property + counter) */
@property --kpi-1 { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --kpi-2 { syntax: '<number>'; inherits: false; initial-value: 0; }

.web-kpi:nth-child(1) .web-kpi-val { animation: kpiCount1 2.2s var(--bento-ease) forwards; counter-reset: kpi var(--kpi-1); }
.web-kpi:nth-child(1) .web-kpi-val::before { content: counter(kpi); }
.web-kpi:nth-child(1) .web-kpi-val::after { content: " "; }
@keyframes kpiCount1 { 0% { --kpi-1: 0; } 100% { --kpi-1: 14800; } }

/* Web-perf badge pulse */
.web-perf .deploy-dot { animation: webDotPulse 1.8s ease-in-out infinite; }
@keyframes webDotPulse {
  0%, 100% { box-shadow: 0 0 8px #5DFFBF; transform: scale(1); }
  50% { box-shadow: 0 0 20px #5DFFBF, 0 0 30px rgba(93,255,191,.4); transform: scale(1.12); }
}

/* Web code: typewriter cursor */
.web-code::after {
  content: "█";
  display: inline-block;
  color: #5DFFBF;
  animation: webCodeCaret 1.1s steps(2) infinite;
}
@keyframes webCodeCaret { 50% { opacity: 0; } }

/* Centrar code & perf en altura razonable */
.scene--web .web-perf { top: 50%; transform: translateY(-50%); }
.scene--web .web-code {
  bottom: auto;
  top: 50%;
  transform: translateY(140%);
}

/* ============================================================
   SCENE CONSULT v3 — Funnel centrado + barras animadas
   ============================================================ */
.scene--consult .consult-funnel {
  top: 50%;
  bottom: auto;
  transform: translateY(-42%);
  left: 28px;
  right: 28px;
  z-index: 4;
}
.consult-step-bar {
  transform-origin: left;
  animation: consultBarGrow 1.6s var(--bento-ease) backwards;
}
.consult-step:nth-child(1) .consult-step-bar { animation-delay: .1s; }
.consult-step:nth-child(2) .consult-step-bar { animation-delay: .35s; }
.consult-step:nth-child(3) .consult-step-bar { animation-delay: .6s; }
.consult-step:nth-child(4) .consult-step-bar { animation-delay: .85s; }
@keyframes consultBarGrow { from { transform: scaleX(0); } }

.consult-step-val {
  opacity: 0;
  animation: consultValFade 1s var(--bento-ease) backwards;
}
.consult-step:nth-child(1) .consult-step-val { animation-delay: .9s; }
.consult-step:nth-child(2) .consult-step-val { animation-delay: 1.15s; }
.consult-step:nth-child(3) .consult-step-val { animation-delay: 1.4s; }
.consult-step:nth-child(4) .consult-step-val { animation-delay: 1.65s; }
@keyframes consultValFade { to { opacity: 1; } }

.consult-step--ok .consult-step-bar {
  animation: consultBarGrow 1.6s var(--bento-ease) .85s backwards, consultOkPulse 2.5s ease-in-out 2.5s infinite;
}
@keyframes consultOkPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(93,255,191,.5); }
  50% { box-shadow: 0 0 24px rgba(93,255,191,.9), 0 0 40px rgba(93,255,191,.3); }
}

.scene--consult .consult-tag {
  top: 50%;
  transform: translateY(-220%);
}

/* ============================================================
   SCENE IA v3 — Workflow + chat centrados + animaciones reales
   ============================================================ */
.scene--ia .ia-workflow {
  bottom: auto;
  top: 50%;
  transform: translateY(40%);
  left: 32px;
}
.scene--ia .ia-chat {
  bottom: auto;
  top: 50%;
  transform: translateY(-95%);
  right: 32px;
  width: 280px;
}
.scene--ia .ia-counter {
  bottom: auto;
  top: 50%;
  transform: translateY(95%);
  left: 32px;
}

/* Chat: mensajes aparecen secuencialmente */
.ia-msg {
  opacity: 0;
  animation: iaMsgIn 0.6s var(--bento-ease) forwards;
}
.ia-msg--bot:nth-of-type(1) { animation-delay: 0.3s; }
.ia-msg--user { animation-delay: 1.5s; }
.ia-msg--typing { animation-delay: 2.7s; }
@keyframes iaMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Links del workflow con pulso viajando */
.ia-link {
  position: relative;
  overflow: hidden;
}
.ia-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #5DFFBF, transparent);
  transform: translateX(-100%);
  animation: iaLinkFlow 2.5s var(--bento-ease) infinite;
}
.ia-link:nth-of-type(2)::after { animation-delay: 0.8s; }
@keyframes iaLinkFlow {
  0%, 30% { transform: translateX(-100%); }
  70%, 100% { transform: translateX(100%); }
}

/* Out nodes: highlight rotativo */
.ia-node--out {
  animation: iaOutPulse 4s ease-in-out infinite;
}
.ia-node-stack .ia-node:nth-child(1) { animation-delay: 0s; }
.ia-node-stack .ia-node:nth-child(2) { animation-delay: 1.3s; }
.ia-node-stack .ia-node:nth-child(3) { animation-delay: 2.6s; }
@keyframes iaOutPulse {
  0%, 15%, 100% { background: rgba(93,255,191,.06); border-color: rgba(93,255,191,.18); color: rgba(255,255,255,.85); }
  20%, 30% { background: rgba(93,255,191,.18); border-color: rgba(93,255,191,.55); color: #5DFFBF; }
}

/* Counter IA: cuenta animada */
.ia-counter-val {
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.7));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Indicador entry de sección — todas las cards reveal-blur al entrar viewport */
.bento-card { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--bento-ease), transform 1s var(--bento-ease); }
.bento-card.reveal-visible,
.bento-card.visible { opacity: 1; transform: translateY(0); }
.servicios-bento .bento-card:nth-child(1) { transition-delay: .05s; }
.servicios-bento .bento-card:nth-child(2) { transition-delay: .15s; }
.servicios-bento .bento-card:nth-child(3) { transition-delay: .25s; }
.servicios-bento .bento-card:nth-child(4) { transition-delay: .35s; }

/* Re-aplicar hover transform sobre el opacity reveal */
.bento-card.reveal-visible:hover,
.bento-card.visible:hover { transform: translateY(-3px); }

/* Mobile: cards no tan altas */
@media (max-width: 720px) {
  .bento-card { height: 560px; }
  .scene--ux .ux-frame { width: 78%; left: 18px; transform: translateY(-44%) perspective(1200px) rotateY(-4deg) rotateX(2deg); }
  .scene--ux .ux-phone { right: 5%; }
  .scene--web .web-dashboard { width: 92%; }
  .scene--ia .ia-chat { right: 18px; width: 220px; }
  .scene--ia .ia-counter { left: 18px; }
  .scene--ia .ia-workflow { left: 18px; }
}

/* ============================================================
   BENTO v3.1 — Fixes + mockups más grandes (ocupan centro)
   ============================================================ */

/* Card height ajustado y mockup más grande */
.bento-card { height: 660px; }

/* Fix counter bug: quitar pseudo-elementos */
.web-kpi:nth-child(1) .web-kpi-val { counter-reset: none; animation: none; }
.web-kpi:nth-child(1) .web-kpi-val::before,
.web-kpi:nth-child(1) .web-kpi-val::after { content: none; }

/* Fix small "%" perdido en clip-text */
.ux-metric-val small {
  -webkit-text-fill-color: initial;
  background: none;
  color: rgba(93,255,191,.85);
  -webkit-background-clip: initial;
  background-clip: initial;
}

/* UX: frame más ancho y phone más grande */
.scene--ux .ux-frame { width: 62%; left: 36px; transform: translateY(-44%) perspective(1400px) rotateY(-7deg) rotateX(2deg); }
.scene--ux .ux-phone {
  width: 192px;
  right: 9%;
  transform: translateY(-50%) rotate(5deg);
}
.bento-card:hover .scene--ux .ux-phone { transform: translateY(-54%) rotate(3deg); }
.scene--ux .ux-frame-grid { padding: 18px; gap: 14px; }
.scene--ux .ux-col { padding: 12px 14px; gap: 10px; }
.scene--ux .ux-spec-row { font-size: .65rem; }
.scene--ux .ux-token { font-size: .65rem; }
.scene--ux .ux-token code { font-size: .6rem; }
.scene--ux .ux-canvas-title, .scene--ux .ux-tokens-title { font-size: .62rem; }
.scene--ux .ux-btn { font-size: .7rem; padding: 7px 12px; }

/* UX: métrica más grande */
.scene--ux .ux-metric { padding: 14px 18px; min-width: 150px; bottom: 56px; right: 36px; }
.ux-metric-val { font-size: 2.1rem; }
.ux-metric-bars { height: 26px; }

/* WEB: dashboard MUCHO más grande */
.scene--web .web-dashboard {
  width: 90%;
  top: 56%;
  transform: translate(-50%, -50%) perspective(1200px) rotateX(10deg) rotateY(-4deg);
}
.web-dash-grid { padding: 14px 16px 8px; gap: 12px; }
.web-kpi { padding: 12px 14px; }
.web-kpi-label { font-size: .6rem; }
.web-kpi-val { font-size: 1.4rem; }
.web-kpi-trend { font-size: .68rem; }
.web-chart { padding: 4px 16px 16px; height: 72px; }
.scene--web .web-perf { padding: 12px 16px; right: 28px; }
.web-perf-label { font-size: .55rem; }
.web-perf-val { font-size: 1.4rem; }
.web-perf-val small { font-size: .85rem; }
.scene--web .web-code {
  padding: 10px 12px;
  font-size: .65rem;
  bottom: auto;
  right: 28px;
  top: 50%;
  transform: translateY(170%);
}

/* CONSULT: funnel más visible (mayor tamaño tipográfico) */
.scene--consult .consult-funnel { gap: 14px; }
.consult-step-label { font-size: .72rem; }
.consult-step-val { font-size: .72rem; }
.consult-step-bar { height: 8px; }
.consult-step { grid-template-columns: 100px 1fr 60px; gap: 12px; }
.scene--consult .consult-tag {
  top: 50%; right: 28px; padding: 7px 14px; font-size: .65rem;
  transform: translateY(-260%);
}
.scene--consult .consult-tag svg { width: 13px; height: 13px; }

/* IA: workflow más grande */
.ia-node { padding: 9px 13px; font-size: .72rem; }
.ia-node--core { padding: 11px 14px; font-size: .75rem; }
.ia-node--core small { font-size: .58rem; }
.ia-node-stack .ia-node { padding: 6px 10px; font-size: .65rem; }
.ia-link { width: 22px; }

.scene--ia .ia-chat { width: 300px; right: 36px; }
.ia-msg { font-size: .78rem; padding: 9px 13px; }
.scene--ia .ia-counter { padding: 13px 18px; left: 36px; }
.ia-counter-label { font-size: .6rem; }
.ia-counter-val { font-size: 1.85rem; margin: 4px 0; }
.ia-counter-trend { font-size: .65rem; }

/* ============================================================
   BENTO v3.2 — Llenar el centro (altura óptima)
   ============================================================ */
.bento-card { height: 600px; }
.bento-card--large .bento-card-text { top: 30px; left: 32px; right: 72px; }
.bento-card-text { top: 26px; left: 28px; right: 60px; }

/* UX: subir frame y phone */
.scene--ux .ux-frame { top: 52%; transform: translateY(-38%) perspective(1400px) rotateY(-7deg) rotateX(2deg); }
.bento-card:hover .scene--ux .ux-frame { transform: translateY(-42%) perspective(1400px) rotateY(-5deg) rotateX(1deg); }
.scene--ux .ux-phone { top: 56%; transform: translateY(-44%) rotate(5deg); }
.bento-card:hover .scene--ux .ux-phone { transform: translateY(-48%) rotate(3deg); }
.scene--ux .ux-metric { bottom: 40px; }
.scene--ux .ux-cursor { top: 64%; }

/* WEB: dashboard centrado mejor */
.scene--web .web-dashboard { top: 58%; }
.scene--web .web-perf { top: 55%; }
.scene--web .web-code { transform: translateY(160%); }

/* CONSULT: funnel ocupando vertical centro */
.scene--consult .consult-funnel { top: 58%; transform: translateY(-36%); }
.scene--consult .consult-tag { transform: translateY(-300%); }

/* IA: subir todo */
.scene--ia .ia-workflow { top: 55%; transform: translateY(20%); }
.scene--ia .ia-chat { top: 55%; transform: translateY(-110%); }
.scene--ia .ia-counter { top: 55%; transform: translateY(75%); }

/* ============================================================
   BENTO v4 — UX/UI ultra-densa (composition rica + sombras)
   ============================================================ */

/* Card UX más alta para meter más contenido */
.bento-card--ux { /* same height keep grid */ }

/* Frame: sombra profunda Stripe-like */
.scene--ux .ux-frame {
  width: 64%;
  filter: drop-shadow(0 50px 80px rgba(0,0,0,.55)) drop-shadow(0 0 0 1px rgba(255,255,255,.04));
  box-shadow: none;
}

/* Tabs en barra del navegador */
.ux-frame-tabs {
  display: flex; gap: 4px; margin-left: auto; padding-right: 8px;
}
.ux-tab {
  font-size: .58rem;
  padding: 3px 8px;
  border-radius: 4px;
  color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.025);
  letter-spacing: .02em;
}
.ux-tab--active {
  background: rgba(93,255,191,.12);
  color: #5DFFBF;
}

/* Grid 2-col con más densidad */
.ux-frame-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 10px;
  padding: 14px 14px 0;
}
.ux-col {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 6px;
  padding: 11px 12px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 0;
}
.ux-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.ux-col-title {
  font-size: .68rem; font-weight: 600; color: #fff;
  letter-spacing: -.005em;
}
.ux-col-meta {
  font-size: .55rem; color: rgba(255,255,255,.4);
  font-family: var(--font-mono, monospace);
}

/* Stack de variantes de botón */
.ux-btn-stack { display: flex; flex-direction: column; gap: 5px; }
.ux-btn {
  font-size: .65rem;
  padding: 6px 10px;
  border-radius: 5px;
  font-weight: 600;
  text-align: center;
  display: inline-block;
}
.ux-btn--outline { background: transparent; color: #5DFFBF; border: 1px solid rgba(93,255,191,.45); }
.ux-btn--disabled { background: rgba(255,255,255,.04); color: rgba(255,255,255,.3); }

.ux-prop-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,.06);
}

/* Tokens con type swatches y más colores */
.ux-swatch--surface { background: #161616; }
.ux-swatch--accent  { background: #FF8E6E; }
.ux-token--type { display: flex; align-items: center; gap: 6px; }
.ux-type-swatch {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading, serif);
  font-size: .65rem;
  color: #fff;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
}
.ux-type-swatch--sm { font-size: .55rem; }

/* Status bar abajo */
.ux-frame-status {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  background: rgba(255,255,255,.015);
  border-top: 1px solid rgba(255,255,255,.05);
  font-size: .55rem;
  color: rgba(255,255,255,.45);
}
.ux-status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  color: #5DFFBF;
}
.ux-status-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #5DFFBF;
  box-shadow: 0 0 6px #5DFFBF;
  animation: webDotPulse 2.2s ease-in-out infinite;
}
.ux-status-meta {
  font-family: var(--font-mono, monospace);
  letter-spacing: .02em;
}
.ux-status-meta--right { margin-left: auto; color: rgba(255,255,255,.6); }

/* Comment bubble flotante (Dani review) */
.ux-comment {
  position: absolute;
  z-index: 6;
  top: 18%;
  right: 14%;
  display: flex; gap: 8px;
  background: rgba(15,15,17,.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px 10px 10px 2px;
  padding: 9px 11px;
  width: 200px;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.55));
  animation: uxCommentIn 1s var(--bento-ease) .6s backwards;
}
@keyframes uxCommentIn {
  from { opacity: 0; transform: translateY(-8px) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ux-comment-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8E6E, #FF5AB4);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ux-comment-body { font-size: .65rem; line-height: 1.4; color: rgba(255,255,255,.85); }
.ux-comment-head { display: flex; gap: 6px; align-items: baseline; }
.ux-comment-head b { color: #fff; font-size: .68rem; }
.ux-comment-head span { color: rgba(255,255,255,.45); font-size: .55rem; }
.ux-comment-body p { margin: 2px 0 0; color: rgba(255,255,255,.75); }

/* Phone v4: más realista, con bar de status, progress, footer */
.scene--ux .ux-phone {
  width: 200px;
  padding: 10px 12px 14px;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.65)) drop-shadow(0 0 0 1px rgba(255,255,255,.06));
  box-shadow: none;
}
.ux-phone-bar {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .5rem;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
  padding: 0 4px;
}
.ux-phone-time { font-weight: 600; color: rgba(255,255,255,.9); }
.ux-phone-icons { letter-spacing: -.05em; }
.ux-phone-progress {
  display: flex; gap: 3px; margin-bottom: 8px;
}
.ux-phone-progress-step {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.1);
}
.ux-phone-progress-step--active { background: #5DFFBF; box-shadow: 0 0 6px rgba(93,255,191,.5); }
.ux-phone-step {
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.ux-phone-h {
  font-size: .82rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
  margin: 4px 0 8px;
}
.ux-phone-options { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.ux-phone-opt {
  font-size: .62rem;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  display: flex; flex-direction: column; gap: 1px;
}
.ux-phone-opt-meta {
  font-size: .53rem;
  color: rgba(255,255,255,.42);
  letter-spacing: .01em;
}
.ux-phone-opt--sel {
  background: rgba(93,255,191,.13);
  border-color: rgba(93,255,191,.5);
  color: #5DFFBF;
}
.ux-phone-opt--sel .ux-phone-opt-meta { color: rgba(93,255,191,.6); }
.ux-phone-footnote {
  font-size: .5rem;
  color: rgba(255,255,255,.4);
  margin-top: 6px;
  text-align: center;
  line-height: 1.4;
}
.ux-phone-footnote u { color: #5DFFBF; text-decoration: none; }

/* Métrica v4: con sparkline + delta + bars con labels */
.scene--ux .ux-metric {
  min-width: 180px;
  padding: 14px 16px;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.6));
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
.ux-metric-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ux-metric-delta {
  font-size: .58rem;
  color: #5DFFBF;
  font-weight: 600;
  padding: 3px 7px;
  background: rgba(93,255,191,.1);
  border-radius: 999px;
  white-space: nowrap;
  align-self: flex-start;
}
.ux-metric-sparkline {
  height: 24px;
  margin: 6px 0;
}
.ux-metric-sparkline svg { width: 100%; height: 100%; display: block; }
.ux-metric-sparkline svg path:first-child {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: webChartDraw 2.8s var(--bento-ease) .4s forwards;
}
.ux-metric-bars {
  display: flex; gap: 4px; align-items: flex-end; height: 28px;
}
.ux-metric-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 1.5px;
  background: linear-gradient(180deg, #5DFFBF, rgba(93,255,191,.35));
}

/* Card UX background base más oscuro para contrastar con blobs vivos */
.bento-card--ux { background: #08070a; }

/* ============================================================
   BENTO v5 — Hover Stripe-faithful + mouse-follow spotlight
   ============================================================ */

/* Override v3.x: quitar translateY del hover, usar clip-path */
.bento-card { transform: none !important; }
.bento-card:hover { transform: none !important; }
.bento-card.reveal-visible:hover,
.bento-card.visible:hover { transform: none !important; }

/* La técnica Stripe: clip-path inset que se expande en hover */
.bento-card-blobs { clip-path: inset(4px round 6px); transition: clip-path 1s var(--bento-ease); }
.bento-card:hover .bento-card-blobs { clip-path: inset(0px round 6px); }

.bento-card-scene { clip-path: inset(4px round 5px); transition: clip-path 1s var(--bento-ease); }
.bento-card:hover .bento-card-scene { clip-path: inset(0px round 5px); }

/* Mouse-follow spotlight: variables CSS actualizadas por JS via --mx --my */
.bento-card {
  --mx: 50%;
  --my: 50%;
}
.bento-card .bento-spotlight {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(360px circle at var(--mx) var(--my),
    rgba(93,255,191,.18) 0%,
    rgba(93,255,191,.06) 25%,
    transparent 60%);
  opacity: 0;
  transition: opacity .6s var(--bento-ease);
  mix-blend-mode: screen;
}
.bento-card:hover .bento-spotlight { opacity: 1; }

/* Border gradient que aparece en hover (igual que Stripe borderColor) */
.bento-card::after {
  background: radial-gradient(circle at var(--mx) var(--my),
    rgba(93,255,191,.65) 0%,
    rgba(93,255,191,.2) 20%,
    rgba(93,255,191,0) 50%);
  opacity: 0;
  transition: opacity .6s var(--bento-ease);
}

/* Icono expand: outline → fill mint en hover (técnica Stripe) */
.bento-card-expand {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.55);
  transition: background .5s var(--bento-ease),
              border-color .5s var(--bento-ease),
              color .5s var(--bento-ease),
              transform .8s var(--bento-ease);
}
.bento-card:hover .bento-card-expand {
  background: #5DFFBF;
  border-color: #5DFFBF;
  color: #0e0e0e;
  transform: translate(4px, -4px);  /* Igual que Stripe: matrix(1,0,0,1,4.83,-4) */
}

/* Mockup interno: parallax 3D según mouse */
.bento-card .ux-frame,
.bento-card .web-dashboard,
.bento-card .ux-phone {
  transition-property: transform;
  transition-duration: .8s;
  transition-timing-function: var(--bento-ease);
}

/* Más densidad revelada en hover: extra-row visible solo on hover */
.ux-frame-status-extra {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .8s var(--bento-ease), opacity .6s var(--bento-ease);
}
.bento-card:hover .ux-frame-status-extra {
  max-height: 24px;
  opacity: 1;
}

/* Blob intensification en hover */
.bento-card:hover .bento-blob {
  opacity: 1;
  filter: blur(38px);
  transition: opacity 1s var(--bento-ease), filter 1s var(--bento-ease);
}

/* Counters numéricos: glow pulse on hover */
.bento-card:hover .ux-metric-val,
.bento-card:hover .web-kpi-val,
.bento-card:hover .ia-counter-val,
.bento-card:hover .web-perf-val {
  animation: bentoValPulse 1.6s var(--bento-ease) infinite;
}
@keyframes bentoValPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(93,255,191,0)); }
  50% { filter: drop-shadow(0 0 14px rgba(93,255,191,.65)); }
}

/* Comment UX y elementos flotantes: lift sutil en hover de la card */
.bento-card:hover .ux-comment { transform: translateY(-3px); }
.ux-comment { transition: transform .8s var(--bento-ease); }

/* Cursor real estilo Mac (sobre la card)  */
.bento-card { cursor: pointer; }
.bento-card:hover { cursor: pointer; }

/* Parallax 3D del mockup según mouse (CSS vars actualizadas via JS) */
.bento-card:hover .scene--ux .ux-frame {
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0)
             translateY(-42%)
             perspective(1400px) rotateY(-5deg) rotateX(1deg);
}
.bento-card:hover .scene--ux .ux-phone {
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0)
             translateY(-48%)
             rotate(3deg);
}
.bento-card:hover .scene--web .web-dashboard {
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0)
             translate(-50%, -54%)
             perspective(1200px) rotateX(7deg) rotateY(-2deg);
}

/* ============================================================
   BENTO v6 — CSS para nuevos elementos (UX cursor alt, Web editor, Consult board, IA logs+tokens)
   ============================================================ */

/* UX: segundo cursor (Dani · review) — orbita en hover */
.ux-cursor--alt {
  top: 38%; left: 56%;
  animation: uxCursorMove2 8s var(--bento-ease-smooth) infinite;
  animation-delay: -2s;
}
.ux-cursor-tag--alt { background: #FF8E6E; color: #0e0e0e; }
@keyframes uxCursorMove2 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-10px, 6px); }
  60% { transform: translate(12px, -8px); }
}

/* Quitar la regla vieja del metric (no debería renderizarse pero por si acaso) */
.scene--ux .ux-metric { display: none; }

/* ============================================================
   WEB editor de código (estilo VSCode dark)
   ============================================================ */
.scene--web .web-editor {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 88%;
  background: #0d0e10;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  overflow: hidden;
  transform: translate(-50%, -50%) perspective(1200px) rotateX(8deg) rotateY(-4deg);
  transition: transform 1.4s var(--bento-ease);
  filter: drop-shadow(0 50px 80px rgba(0,0,0,.6));
}
.bento-card:hover .scene--web .web-editor {
  transform: translate(-50%, -54%) perspective(1200px) rotateX(5deg) rotateY(-2deg);
}
.web-editor-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  background: #08080a;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.web-editor-tabs { display: flex; gap: 2px; margin-left: 10px; }
.web-tab {
  font-size: .58rem;
  padding: 4px 9px;
  border-radius: 4px 4px 0 0;
  color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.02);
  font-family: var(--font-mono, monospace);
}
.web-tab--active {
  background: #0d0e10;
  color: #fff;
  border-bottom: 2px solid #5DFFBF;
}
.web-editor-body {
  display: grid;
  grid-template-columns: 28px 1fr;
  padding: 10px 0;
  min-height: 200px;
}
.web-editor-gutter {
  display: flex; flex-direction: column;
  font-family: var(--font-mono, monospace);
  font-size: .58rem;
  color: rgba(255,255,255,.25);
  text-align: right;
  padding-right: 6px;
  border-right: 1px solid rgba(255,255,255,.04);
  line-height: 1.6;
}
.web-editor-code {
  font-family: var(--font-mono, monospace);
  font-size: .65rem;
  line-height: 1.6;
  color: rgba(255,255,255,.85);
  padding-left: 10px;
  overflow: hidden;
}
.web-cl {
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation: webCodeTypewriter 1.2s steps(40, end) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes webCodeTypewriter { to { width: 100%; } }

/* Syntax highlighting tokens */
.tk-key { color: #c084fc; }    /* keyword: import, const, export, return */
.tk-var { color: #5DFFBF; }    /* variables */
.tk-str { color: #fbbf24; }    /* strings */
.tk-fn  { color: #60a5fa; }    /* function names */
.tk-type { color: #34d399; }   /* types/components */
.tk-pun { color: rgba(255,255,255,.55); }
.web-caret {
  display: inline-block;
  width: 2px; height: 1em;
  background: #5DFFBF;
  margin-left: 2px;
  vertical-align: middle;
  animation: webCaret 1s steps(2) infinite;
}
@keyframes webCaret { 50% { opacity: 0; } }

.web-editor-status {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  background: #08080a;
  border-top: 1px solid rgba(255,255,255,.04);
  font-size: .55rem;
  color: rgba(255,255,255,.45);
  font-family: var(--font-mono, monospace);
}
.web-st-pill { display: inline-flex; align-items: center; gap: 4px; color: #5DFFBF; }
.web-st-meta { color: rgba(255,255,255,.45); }
.web-st-meta--right { margin-left: auto; }

/* Deploy badge */
.scene--web .web-deploy {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 6;
  background: rgba(15,15,17,.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .58rem;
  color: rgba(255,255,255,.8);
  font-family: var(--font-mono, monospace);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 170px;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.5));
}
.web-deploy-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 8px;
  align-items: center;
}
.web-deploy-chk {
  color: #5DFFBF;
  font-weight: 700;
  font-size: .68rem;
}
.web-deploy-chk--live {
  display: block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #5DFFBF;
  margin: 0 auto;
  animation: webDotPulse 1.4s ease-in-out infinite;
}
.web-deploy-row--live { color: #fff; }
.web-deploy-time { color: rgba(255,255,255,.5); font-size: .55rem; }

/* Web-perf badge: reposicionar para que no choque con editor */
.scene--web .web-perf {
  top: 28px;
  right: 80px;
  transform: none;
}
.scene--web .web-code { display: none; }  /* el viejo code chip ya no se usa */

/* ============================================================
   CONSULT — Workshop board con sticky notes
   ============================================================ */
.scene--consult .consult-funnel,
.scene--consult .consult-tag { display: none; }  /* ocultar antiguos */

.scene--consult .consult-board {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 88%;
  background: #0d0e10;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  overflow: hidden;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 40px 70px rgba(0,0,0,.6));
  transition: transform 1.4s var(--bento-ease);
}
.bento-card:hover .scene--consult .consult-board { transform: translate(-50%, -52%); }
.consult-board-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  background: #08080a;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.consult-board-title {
  font-size: .6rem;
  color: rgba(255,255,255,.6);
  margin-left: 10px;
  font-weight: 600;
}
.consult-board-avatars { display: flex; gap: -3px; margin-left: auto; }
.consult-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  color: #fff;
  font-size: .55rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #0d0e10;
  margin-left: -6px;
}
.consult-avatar:first-child { margin-left: 0; }

.consult-canvas {
  position: relative;
  height: 220px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
  background-size: 18px 18px;
}
.consult-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.consult-lines path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: webChartDraw 2.4s var(--bento-ease) .5s forwards;
}

.consult-sticky {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 110px;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: .58rem;
  line-height: 1.3;
  transform: rotate(var(--rot, 0deg));
  box-shadow: 0 6px 14px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.15);
  z-index: 2;
  animation: consultStickyIn .6s var(--bento-ease) backwards;
}
.consult-sticky--insight { background: #5DFFBF; color: #0e0e0e; animation-delay: .2s; }
.consult-sticky--user    { background: #fbbf24; color: #0e0e0e; animation-delay: .5s; }
.consult-sticky--action  { background: #c084fc; color: #0e0e0e; animation-delay: .8s; }
.consult-sticky--risk    { background: #f87171; color: #0e0e0e; animation-delay: 1.1s; }
.consult-sticky--win     { background: #34d399; color: #0e0e0e; animation-delay: 1.4s; }
@keyframes consultStickyIn {
  from { opacity: 0; transform: rotate(var(--rot, 0deg)) translateY(-8px) scale(.9); }
  to { opacity: 1; transform: rotate(var(--rot, 0deg)) translateY(0) scale(1); }
}
.consult-sticky-tag {
  font-size: .5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .65;
  margin-bottom: 2px;
}
.consult-sticky-text { font-weight: 500; }

.consult-cursor {
  position: absolute;
  left: 42%; top: 56%;
  z-index: 5;
  display: flex; align-items: center; gap: 5px;
  animation: uxCursorMove 7s var(--bento-ease-smooth) infinite;
}
.consult-cursor svg { width: 14px; height: 16px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.consult-cursor-tag {
  background: #5DFFBF; color: #0e0e0e;
  font-size: .55rem; font-weight: 700;
  padding: 2px 6px; border-radius: 3px;
}

/* ROI badge */
.scene--consult .consult-roi {
  position: absolute;
  bottom: 22px;
  right: 22px;
  background: rgba(15,15,17,.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 10px 14px;
  z-index: 7;
  text-align: right;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.5));
}
.consult-roi-label {
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  font-weight: 600;
}
.consult-roi-val {
  font-family: var(--font-heading, sans-serif);
  font-weight: 300;
  font-size: 1.6rem;
  color: #5DFFBF;
  letter-spacing: -.025em;
  line-height: 1;
  margin: 2px 0;
}
.consult-roi-val small { font-size: .85rem; opacity: .85; }
.consult-roi-meta {
  font-size: .52rem;
  color: rgba(255,255,255,.5);
}

/* ============================================================
   IA — Workflow + logs sidebar + tokens badge
   ============================================================ */
.ia-stage { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.ia-stage-label {
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 4px;
}
.ia-node--small { padding: 5px 9px; font-size: .58rem; opacity: .85; }

/* Chat más larga con header */
.scene--ia .ia-chat {
  width: 290px;
  top: 22%;
  transform: none;
  bottom: auto;
  background: rgba(15,15,17,.86);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px;
  gap: 5px;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.55));
}
.ia-chat-head {
  display: flex; align-items: center; gap: 6px;
  padding: 0 4px 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 4px;
}
.ia-chat-avatar { color: #5DFFBF; font-size: .9rem; }
.ia-chat-name { font-size: .65rem; font-weight: 600; color: #fff; flex: 1; }
.ia-chat-status {
  font-size: .55rem;
  color: #5DFFBF;
  padding: 2px 6px;
  background: rgba(93,255,191,.1);
  border-radius: 999px;
}
.ia-msg { font-size: .68rem; padding: 7px 10px; }
.ia-msg--bot b { color: #5DFFBF; }

/* Activity logs sidebar */
.scene--ia .ia-logs {
  position: absolute;
  top: 22%;
  left: 32px;
  width: 230px;
  background: rgba(8,8,11,.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 10px;
  font-family: var(--font-mono, monospace);
  z-index: 5;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.55));
}
.ia-logs-head {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 6px;
}
.ia-logs-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #5DFFBF;
  box-shadow: 0 0 6px #5DFFBF;
  animation: webDotPulse 1.5s ease-in-out infinite;
}
.ia-logs-title {
  font-size: .58rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  flex: 1;
}
.ia-logs-meta {
  font-size: .52rem;
  color: #5DFFBF;
}
.ia-log-row {
  display: grid;
  grid-template-columns: 30px 14px 1fr;
  gap: 6px;
  align-items: center;
  font-size: .58rem;
  padding: 4px 0;
  color: rgba(255,255,255,.75);
  animation: iaMsgIn .5s var(--bento-ease) backwards;
}
.ia-log-row:nth-child(2) { animation-delay: .5s; }
.ia-log-row:nth-child(3) { animation-delay: 1s; }
.ia-log-row:nth-child(4) { animation-delay: 1.5s; }
.ia-log-row:nth-child(5) { animation-delay: 2s; }
.ia-log-time {
  color: rgba(255,255,255,.4);
  font-size: .54rem;
}
.ia-log-tag {
  font-size: .65rem;
  text-align: center;
  font-weight: 700;
}
.ia-log-tag--ok { color: #5DFFBF; }
.ia-log-tag--run { color: #fbbf24; animation: webDotPulse 1.2s ease-in-out infinite; }
.ia-log-tag--wait { color: rgba(255,255,255,.4); }

/* Tokens badge */
.scene--ia .ia-tokens {
  position: absolute;
  bottom: 24px;
  right: 32px;
  width: 180px;
  background: rgba(15,15,17,.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 10px 14px;
  z-index: 6;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.5));
}
.ia-tokens-label {
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  font-weight: 600;
  margin-bottom: 6px;
}
.ia-tokens-bar {
  height: 5px;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.ia-tokens-fill {
  display: block;
  height: 100%;
  width: var(--w);
  background: linear-gradient(90deg, #5DFFBF, #4ea3ff);
  border-radius: 3px;
  animation: consultBarGrow 1.6s var(--bento-ease) .8s backwards;
  transform-origin: left;
}
.ia-tokens-row {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono, monospace);
  font-size: .68rem;
  color: #fff;
  font-weight: 500;
}
.ia-tokens-cost { color: #5DFFBF; }

/* IA workflow reposicionar más bajo */
.scene--ia .ia-workflow {
  top: auto;
  bottom: 80px;
  left: 32px;
  transform: none;
  gap: 12px;
}
.scene--ia .ia-counter {
  top: auto;
  bottom: 24px;
  left: 220px;
  transform: none;
}

/* ============================================================
   BENTO v7 — IA recomposición (centrar, no esquinas)
   ============================================================ */

/* Workflow al CENTRO horizontal del card */
.scene--ia .ia-workflow {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 3;
}

/* Logs sidebar pegado al centro izquierda (encima del workflow) */
.scene--ia .ia-logs {
  position: absolute;
  top: 28%;
  left: 22%;
  transform: translate(-50%, 0);
  width: 215px;
  z-index: 5;
}

/* Chat pegado al centro derecha (encima del workflow) */
.scene--ia .ia-chat {
  position: absolute;
  top: 28%;
  right: 22%;
  transform: translate(50%, 0);
  width: 270px;
  z-index: 5;
}

/* Counter y tokens FILA HORIZONTAL debajo del workflow, centrados */
.scene--ia .ia-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(calc(-100% - 8px));
  z-index: 6;
  min-width: 170px;
}
.scene--ia .ia-tokens {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(8px);
  right: auto;
  z-index: 6;
  width: 200px;
}

/* Conectores visuales entre chat→workflow y logs→workflow */
.scene--ia::before {
  content: "";
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 16%;
  background: linear-gradient(180deg, rgba(93,255,191,.35), rgba(93,255,191,0));
  z-index: 2;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 1024px) {
  .scene--ia .ia-logs { left: 18%; width: 180px; }
  .scene--ia .ia-chat { right: 18%; width: 230px; }
  .scene--ia .ia-workflow { gap: 8px; }
  .scene--ia .ia-counter,
  .scene--ia .ia-tokens { width: 150px; }
}
@media (max-width: 720px) {
  .scene--ia .ia-logs { display: none; }
  .scene--ia .ia-chat { right: 50%; transform: translateX(50%); width: 86%; top: 22%; }
  .scene--ia .ia-workflow { top: 64%; gap: 6px; }
  .scene--ia .ia-counter { transform: translateX(calc(-100% - 4px)); bottom: 18px; min-width: 130px; }
  .scene--ia .ia-tokens { transform: translateX(4px); bottom: 18px; width: 150px; }
}

/* ============================================================
   BENTO v7.1 — Fix overlap chat/workflow en IA
   ============================================================ */
.scene--ia .ia-logs {
  top: 24%;
  width: 200px;
  padding: 8px 10px;
}
.scene--ia .ia-chat {
  top: 24%;
  width: 260px;
  padding: 8px;
}
.scene--ia .ia-chat .ia-msg { font-size: .65rem; padding: 6px 9px; }
.scene--ia .ia-chat-head { padding-bottom: 6px; margin-bottom: 3px; }

/* Workflow más abajo para no chocar */
.scene--ia .ia-workflow {
  top: 70%;
}

/* Bajar conector vertical */
.scene--ia::before {
  top: 52%;
  height: 14%;
}

/* Counter / tokens más pegados al borde inferior */
.scene--ia .ia-counter,
.scene--ia .ia-tokens { bottom: 20px; }

/* ============================================================
   BENTO v7.2 — IA: chat vertical derecho, workflow+logs+counter izquierda
   ============================================================ */

/* Chat ocupa toda la mitad derecha en vertical */
.scene--ia .ia-chat {
  position: absolute;
  top: 22%;
  right: 32px;
  bottom: 24px;
  left: auto;
  width: 38%;
  max-width: 320px;
  transform: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

/* Logs arriba a la izquierda, ancho mayor */
.scene--ia .ia-logs {
  top: 22%;
  left: 32px;
  width: 280px;
  transform: none;
}

/* Workflow horizontal MEDIO IZQUIERDA debajo de los logs */
.scene--ia .ia-workflow {
  top: auto;
  bottom: 130px;
  left: 32px;
  transform: none;
  gap: 10px;
}
.ia-stage { gap: 4px; }
.ia-node { padding: 7px 10px; font-size: .65rem; }
.ia-node--core { padding: 9px 11px; font-size: .68rem; }
.ia-node--small { padding: 4px 7px; font-size: .55rem; }
.ia-node-stack .ia-node { padding: 4px 8px; font-size: .55rem; }

/* Counter y tokens: fila horizontal abajo izquierda */
.scene--ia .ia-counter {
  bottom: 24px;
  left: 32px;
  transform: none;
  min-width: 145px;
  padding: 8px 12px;
}
.scene--ia .ia-tokens {
  bottom: 24px;
  left: 190px;
  transform: none;
  width: 175px;
  right: auto;
  padding: 8px 12px;
}
.ia-counter-val { font-size: 1.5rem; margin: 1px 0; }
.ia-counter-label, .ia-tokens-label { font-size: .52rem; margin-bottom: 4px; }

/* Eliminar conector vertical (sobra) */
.scene--ia::before { display: none; }

/* ============================================================
   BENTO MOBILE — Simplificación (max-width: 720px)
   ============================================================ */
@media (max-width: 720px) {

  /* Cards más bajas para que respire */
  .bento-card { height: 520px; border-radius: 12px; }

  /* Header tighter */
  .bento-card-text { top: 22px; left: 22px; right: 56px; gap: .35rem; }
  .bento-card--large .bento-card-text { top: 24px; left: 24px; right: 60px; }
  .bento-card-headline,
  .bento-card--large .bento-card-headline { font-size: 1.3rem; line-height: 1.2; }
  .bento-card-sub { font-size: .82rem; }
  .bento-card-expand { top: 22px; right: 22px; width: 24px; height: 24px; }

  /* ===========================================
     UX/UI mobile — quitar elementos secundarios
     =========================================== */
  /* Ocultar: comment bubble, segundo cursor, status bar, tabs */
  .scene--ux .ux-comment { display: none; }
  .scene--ux .ux-cursor--alt { display: none; }
  .scene--ux .ux-cursor { display: none; }  /* incluso el primero, simplificar */
  .scene--ux .ux-frame-tabs { display: none; }
  .scene--ux .ux-frame-status { display: none; }

  /* Frame más sencillo: 1 columna en lugar de 2 */
  .scene--ux .ux-frame {
    width: 70%;
    left: 18px;
    top: 56%;
    transform: translateY(-44%) perspective(1200px) rotateY(-3deg) rotateX(1deg);
  }
  .scene--ux .ux-frame-grid { grid-template-columns: 1fr; padding: 12px; gap: 8px; }
  /* Mostrar solo Tokens (col 2) — más visual que Components */
  .scene--ux .ux-col--canvas { display: none; }
  .scene--ux .ux-col { padding: 10px 12px; }

  /* Phone reducido y simplificado */
  .scene--ux .ux-phone {
    width: 145px;
    right: 5%;
    top: 52%;
    transform: translateY(-46%) rotate(4deg);
    padding: 8px 10px 12px;
  }
  .scene--ux .ux-phone-bar,
  .scene--ux .ux-phone-progress,
  .scene--ux .ux-phone-footnote { display: none; }
  .scene--ux .ux-phone-step { font-size: .48rem; }
  .scene--ux .ux-phone-h { font-size: .72rem; margin: 3px 0 6px; }
  .scene--ux .ux-phone-opt { font-size: .56rem; padding: 5px 8px; }
  .scene--ux .ux-phone-opt-meta { font-size: .48rem; }
  .scene--ux .ux-phone-cta { font-size: .58rem; padding: 5px; margin-top: 4px; }

  /* ===========================================
     WEB mobile — editor compacto, mover badge LCP
     =========================================== */
  .scene--web .web-editor {
    width: 92%;
    top: 56%;
  }
  .web-editor-tabs { gap: 1px; margin-left: 6px; }
  .web-tab { font-size: .5rem; padding: 3px 6px; }
  .web-tab:nth-of-type(3) { display: none; }  /* ocultar api.ts en mobile */
  .web-editor-code { font-size: .55rem; padding-left: 6px; }
  .web-editor-gutter { font-size: .5rem; }
  .web-editor-body { padding: 6px 0; }
  /* Ocultar líneas 8-10 del código (se simplifica) */
  .web-cl:nth-child(n+8) { display: none; }
  .web-editor-gutter span:nth-child(n+8) { display: none; }
  .web-editor-status { display: none; }

  /* LCP badge: mover para que NO pise el título */
  .scene--web .web-perf {
    top: auto;
    bottom: 26px;
    right: 18px;
    padding: 7px 10px;
  }
  .web-perf-val { font-size: 1rem; }
  .scene--web .web-deploy { display: none; }  /* deploy badge sobra en mobile */

  /* ===========================================
     CONSULT mobile — board simplificado
     =========================================== */
  .scene--consult .consult-board { width: 94%; top: 56%; }
  .consult-canvas { height: 200px; }
  .consult-board-avatars { display: none; }
  .consult-board-title { font-size: .55rem; }
  /* Ocultar 2 stickies para reducir overlap */
  .consult-sticky--win { display: none; }
  .consult-sticky--action { display: none; }
  .consult-sticky { width: 95px; padding: 5px 7px; font-size: .52rem; }
  .consult-sticky-tag { font-size: .42rem; }
  .scene--consult .consult-cursor { display: none; }
  .scene--consult .consult-roi {
    bottom: 18px;
    right: 18px;
    padding: 7px 10px;
  }
  .consult-roi-val { font-size: 1.25rem; }
  .consult-roi-meta { font-size: .45rem; }
  .consult-roi-label { font-size: .48rem; }

  /* ===========================================
     IA mobile — quitar logs, chat full width
     =========================================== */
  .scene--ia .ia-logs { display: none; }   /* ya estaba pero refuerzo */
  .scene--ia .ia-chat {
    position: absolute;
    top: 22%;
    left: 18px;
    right: 18px;
    bottom: 130px;
    width: auto;
    max-width: none;
  }
  .scene--ia .ia-chat .ia-msg:nth-of-type(3),
  .scene--ia .ia-chat .ia-msg:nth-of-type(4) { display: none; }  /* solo 2 mensajes */

  /* Workflow horizontal compacto debajo del chat */
  .scene--ia .ia-workflow {
    top: auto;
    bottom: 86px;
    left: 18px;
    right: 18px;
    gap: 6px;
    transform: none;
    justify-content: space-between;
  }
  .ia-stage-label { font-size: .42rem; }
  .ia-node { padding: 4px 7px; font-size: .55rem; }
  .ia-node--core { padding: 6px 9px; font-size: .58rem; }
  .ia-node--small { display: none; }   /* solo el principal por stage */
  .ia-node-stack .ia-node:nth-child(n+3) { display: none; }  /* solo 2 outputs */
  .ia-link { width: 12px; }
  .ia-node--core small { display: none; }

  /* Counter y tokens lado a lado abajo */
  .scene--ia .ia-counter {
    bottom: 18px;
    left: 18px;
    min-width: 0;
    width: calc(50% - 22px);
    padding: 7px 10px;
  }
  .scene--ia .ia-tokens {
    bottom: 18px;
    left: 50%;
    width: calc(50% - 22px);
    padding: 7px 10px;
  }
  .ia-counter-val { font-size: 1.15rem; }
  .ia-counter-label,
  .ia-tokens-label { font-size: .45rem; }
  .ia-counter-trend { font-size: .5rem; }
  .ia-tokens-row { font-size: .58rem; }
}

/* ============================================================
   BENTO MOBILE v8.1 — Fix IA chat/desc overlap
   ============================================================ */
@media (max-width: 720px) {
  /* Card IA: aumentar height un poco más */
  .bento-card--ia { height: 560px; }

  /* Chat más abajo para no tapar la descripción */
  .scene--ia .ia-chat {
    top: 34%;
    bottom: 130px;
    padding: 7px;
  }
  .scene--ia .ia-chat .ia-msg { font-size: .62rem; padding: 6px 8px; }
  .scene--ia .ia-chat-head { padding-bottom: 5px; }
  .scene--ia .ia-chat-name { font-size: .58rem; }
  .scene--ia .ia-chat-status { font-size: .5rem; padding: 1px 5px; }

  /* Workflow más compacto y centrado */
  .scene--ia .ia-workflow {
    bottom: 92px;
    gap: 4px;
    justify-content: center;
  }
  .ia-stage-label { font-size: .4rem; }
  .ia-node { padding: 3px 6px; font-size: .5rem; }
  .ia-node--core { padding: 5px 8px; font-size: .55rem; }
  .ia-link { width: 8px; }

  /* Tokens más estrecho con label compacto */
  .scene--ia .ia-tokens {
    padding: 6px 9px;
  }
  .ia-tokens-row { font-size: .55rem; }
  .ia-tokens-cost { font-size: .5rem; }
  .ia-tokens-bar { height: 4px; margin-bottom: 4px; }

  /* Counter */
  .scene--ia .ia-counter { padding: 6px 9px; }
  .ia-counter-val { font-size: 1.05rem; }
  .ia-counter-trend { font-size: .48rem; }
}

/* ============================================================
   BENTO v8 — Panel System Prompt (sin clientes) + respiración izquierda
   ============================================================ */

/* ----- Panel derecho: sustituye chat ----- */
.ia-prompt {
  padding: 12px !important;
  gap: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.ia-prompt .ia-chat-head {
  padding: 0 4px 9px !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.ia-prompt .ia-chat-avatar {
  color: #5DFFBF;
  font-size: .95rem;
  font-family: var(--font-mono, monospace);
}
.ia-prompt .ia-chat-name { letter-spacing: -.005em; }
.ia-prompt .ia-chat-status {
  font-family: var(--font-mono, monospace);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  font-size: .52rem;
}

.ia-prompt-block {
  margin-bottom: 10px;
  flex-shrink: 0;
}
.ia-prompt-label {
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(255,255,255,.4);
  margin-bottom: 5px;
  font-family: var(--font-mono, monospace);
}
.ia-prompt-code {
  font-family: var(--font-mono, monospace);
  font-size: .62rem;
  line-height: 1.45;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.03);
  border-left: 2px solid rgba(93,255,191,.45);
  border-radius: 0 4px 4px 0;
  padding: 7px 9px;
  margin: 0;
  white-space: pre-wrap;
}
.ia-prompt-code .tk-key { color: #c084fc; font-weight: 600; }

.ia-tool-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ia-tool {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono, monospace);
  font-size: .6rem;
  color: rgba(255,255,255,.78);
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
}
.ia-tool code { color: #5DFFBF; font-family: inherit; }
.ia-tool-check {
  color: #5DFFBF;
  font-weight: 700;
  font-size: .7rem;
  width: 12px;
  text-align: center;
}

.ia-prompt-foot {
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ia-prompt-foot-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono, monospace);
  font-size: .58rem;
}
.ia-prompt-foot-label {
  color: rgba(255,255,255,.4);
  letter-spacing: .04em;
}
.ia-prompt-foot-val { color: rgba(255,255,255,.88); }
.ia-prompt-foot-val--ok { color: #5DFFBF; font-weight: 600; }

/* ----- Composición izquierda: respiración ----- */
.scene--ia .ia-logs {
  top: 30%;   /* más separado del título/desc */
  width: 290px;
  padding: 11px 12px;
}
.scene--ia .ia-workflow {
  bottom: 130px;   /* más arriba del fondo */
  left: 36px;
  gap: 14px;
}
.scene--ia .ia-counter {
  bottom: 32px;
  left: 36px;
}
.scene--ia .ia-tokens {
  bottom: 32px;
  left: 200px;
}

/* Mobile: chat ahora es ia-prompt — ajustar */
@media (max-width: 720px) {
  .ia-prompt .ia-prompt-code { font-size: .55rem; padding: 6px 8px; }
  .ia-tool { font-size: .55rem; padding: 3px 5px; }
  .ia-prompt-foot-row { font-size: .53rem; }
  /* En mobile el panel es full-width, ajustar altura */
  .ia-prompt { padding: 10px !important; }
}

/* ============================================================
   BENTO v9 — Loops sutiles continuos (CSS only)
   ============================================================ */

/* ----- UX/UI: token swatches highlight rotativo + option seleccionada pulse ----- */
.ux-token { transition: background .8s var(--bento-ease); }
.ux-swatch {
  animation: uxSwatchGlow 10s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.ux-col--tokens .ux-token:nth-child(2) .ux-swatch { --d: 0s; }
.ux-col--tokens .ux-token:nth-child(3) .ux-swatch { --d: 1.5s; }
.ux-col--tokens .ux-token:nth-child(4) .ux-swatch { --d: 3s; }
.ux-col--tokens .ux-token:nth-child(5) .ux-swatch { --d: 4.5s; }
.ux-col--tokens .ux-token:nth-child(6) .ux-swatch { --d: 6s; }
.ux-col--tokens .ux-token:nth-child(7) .ux-swatch { --d: 7.5s; }
@keyframes uxSwatchGlow {
  0%, 88%, 100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
  92%, 96% { box-shadow: 0 0 6px 1px currentColor; transform: scale(1.15); }
}

/* Phone option seleccionada: glow loop muy sutil */
.ux-phone-opt--sel {
  animation: uxOptGlow 5s ease-in-out infinite;
}
@keyframes uxOptGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(93,255,191,0); }
  50% { box-shadow: 0 0 12px 0 rgba(93,255,191,.25), inset 0 0 8px rgba(93,255,191,.08); }
}

/* ----- WEB: dot recorriendo el chart + status main pulse ----- */
/* Status main pill: el dot ya pulsa */

/* Code editor body: cursor que parpadea ya está. Añadir respiración sutil al status pill */
.web-st-pill {
  animation: webPillFade 6s ease-in-out infinite;
}
@keyframes webPillFade {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}

/* Deploy badge live row: dot ya pulsa.  Hacer toda la fila live tener un fade sutil */
.web-deploy-row--live {
  animation: webDeployFade 4s ease-in-out infinite;
}
@keyframes webDeployFade {
  0%, 100% { opacity: 1; }
  50% { opacity: .75; }
}

/* LCP val: pulse glow muy sutil */
.web-perf-val {
  animation: webValGlow 5s ease-in-out infinite;
}
@keyframes webValGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(93,255,191,0)); }
  50% { filter: drop-shadow(0 0 8px rgba(93,255,191,.35)); }
}

/* ----- CONSULT: stickies con micro-tilt + ROI pulse + líneas que redibujan ----- */
.consult-sticky {
  animation: consultStickyIn .6s var(--bento-ease) backwards,
             consultStickyTilt 8s ease-in-out var(--tilt-d, 0s) infinite;
}
.consult-sticky--insight { --tilt-d: 0s; }
.consult-sticky--user    { --tilt-d: 1.5s; }
.consult-sticky--action  { --tilt-d: 3s; }
.consult-sticky--risk    { --tilt-d: 4.5s; }
.consult-sticky--win     { --tilt-d: 6s; }
@keyframes consultStickyTilt {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0); }
  50% { transform: rotate(calc(var(--rot, 0deg) + .8deg)) translateY(-2px); }
}

/* Líneas SVG del board: dasharray loop */
.consult-lines path {
  animation: webChartDraw 2.4s var(--bento-ease) .5s forwards,
             consultLineFlow 10s linear 3s infinite;
}
@keyframes consultLineFlow {
  0% { stroke-dashoffset: 0; }
  50% { stroke-dashoffset: -24; }
  100% { stroke-dashoffset: 0; }
}

/* ROI val: pulse mint glow */
.consult-roi-val {
  animation: consultROIGlow 5s ease-in-out infinite;
}
@keyframes consultROIGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(93,255,191,0)); }
  50% { filter: drop-shadow(0 0 10px rgba(93,255,191,.5)); }
}

/* Board avatars: respira el más reciente (J · Jordi) */
.consult-board-avatars .consult-avatar:nth-child(1) {
  animation: consultAvatarPulse 4s ease-in-out infinite;
}
@keyframes consultAvatarPulse {
  0%, 100% { box-shadow: 0 0 0 2px #0d0e10; }
  50% { box-shadow: 0 0 0 2px #0d0e10, 0 0 0 4px rgba(255,142,110,.4); }
}

/* ----- IA: tools rotativo + accuracy pulse + caret en system prompt + tokens bar respira ----- */

/* Tools list: cada uno se ilumina por turnos */
.ia-tool {
  animation: iaToolPulse 8s ease-in-out infinite;
}
.ia-tool:nth-child(1) { animation-delay: 0s; }
.ia-tool:nth-child(2) { animation-delay: 2s; }
.ia-tool:nth-child(3) { animation-delay: 4s; }
.ia-tool:nth-child(4) { animation-delay: 6s; }
@keyframes iaToolPulse {
  0%, 22%, 100% { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.04); }
  6%, 16% { background: rgba(93,255,191,.08); border-color: rgba(93,255,191,.3); }
}
.ia-tool-check { transition: color .8s var(--bento-ease); }

/* System prompt: añadir caret virtual al final del code (sutil) */
.ia-prompt-code::after {
  content: "▌";
  display: inline;
  color: #5DFFBF;
  margin-left: 2px;
  animation: webCaret 1.1s steps(2) infinite;
  opacity: .6;
}

/* Accuracy footer val: pulse glow muy sutil cada 6s */
.ia-prompt-foot-val--ok {
  animation: webValGlow 6s ease-in-out infinite;
}

/* Tokens bar: respira de ±2% cada 6s para sensación "en vivo" */
.ia-tokens-fill {
  animation: consultBarGrow 1.6s var(--bento-ease) .8s backwards,
             iaTokensBreathe 6s ease-in-out 3s infinite;
}
@keyframes iaTokensBreathe {
  0%, 100% { width: var(--w); }
  50% { width: calc(var(--w) + 4%); }
}

/* Counter val: pulse glow sutil */
.ia-counter-val {
  animation: webValGlow 7s ease-in-out infinite;
}

/* Activity logs: la fila "run" ya pulsa. Añadir respiración sutil a la fila "wait" */
.ia-log-tag--wait {
  animation: iaWaitBreath 4s ease-in-out infinite;
}
@keyframes iaWaitBreath {
  0%, 100% { opacity: .4; }
  50% { opacity: .7; }
}

/* Spark del agent core: ya pulsa rápido, lo dejamos */

/* ----- Global: sub-text de cada card respira sutilmente con el blob ----- */
/* Nope, eso es demasiado. Skip. */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ux-swatch, .ux-phone-opt--sel,
  .web-st-pill, .web-deploy-row--live, .web-perf-val,
  .consult-sticky, .consult-lines path, .consult-roi-val, .consult-board-avatars .consult-avatar,
  .ia-tool, .ia-prompt-code::after, .ia-prompt-foot-val--ok,
  .ia-tokens-fill, .ia-counter-val, .ia-log-tag--wait {
    animation: none !important;
  }
}

/* ============================================================
   FIX overlap LCP badge con title en card Web (override final)
   ============================================================ */
.scene--web .web-perf {
  top: auto !important;
  bottom: 28px !important;
  right: 28px !important;
  left: auto !important;
  transform: none !important;
  z-index: 6;
}

/* Asegurar que el deploy badge no choque tampoco */
.scene--web .web-deploy {
  bottom: 28px;
  left: 28px;
}


/* ============================================================
   FRICTION SCENE — diagnóstico en vivo con pins anotados
   ============================================================ */
.friction-visual{
  position:relative;
  background:transparent;
  border:0;
  padding:0;
  font-family:var(--font-sans);
  isolation:isolate;
  min-height:560px;
}
.friction-visual::before{
  content:"";
  position:absolute;
  inset:-30px -50px -40px -30px;
  background:
    radial-gradient(55% 45% at 80% 25%, rgba(248,113,113,.10), transparent 70%),
    radial-gradient(45% 40% at 20% 80%, rgba(var(--mint-rgb),.08), transparent 70%);
  filter:blur(38px);
  z-index:-1;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.4s ease .2s;
}
.friction-visual.visible::before{opacity:1;}

/* ---- Browser frame ---- */
.fr-frame{
  position:relative;
  background:linear-gradient(180deg,rgba(22,22,22,.95),rgba(14,14,14,.95));
  border:1px solid var(--border-strong);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 25px 55px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.03);
  transform:scale(.94) translateY(22px);
  opacity:0;
  transition:transform .95s cubic-bezier(.22,1,.36,1),opacity .9s ease;
  z-index:1;
  animation:frFloat 9s ease-in-out 1.8s infinite;
  animation-play-state:paused;
}
.friction-visual.visible .fr-frame{
  transform:scale(1) translateY(0);
  opacity:1;
  animation-play-state:running;
}
@keyframes frFloat{
  0%,100%{translate:0 0;}
  50%{translate:0 -3px;}
}

.fr-frame-bar{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.65rem .9rem;
  background:rgba(255,255,255,.025);
  border-bottom:1px solid var(--border-base);
}
.fr-frame-bar .ux-dot{
  width:10px;height:10px;border-radius:50%;
  background:#3a3a3a;
  flex-shrink:0;
  opacity:0;
  transform:scale(.4);
  transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1);
}
.friction-visual.visible .fr-frame-bar .ux-dot{opacity:1;transform:scale(1);}
.friction-visual.visible .fr-frame-bar .ux-dot:nth-child(1){transition-delay:.20s;background:#ff5f57;}
.friction-visual.visible .fr-frame-bar .ux-dot:nth-child(2){transition-delay:.27s;background:#ffbd2e;}
.friction-visual.visible .fr-frame-bar .ux-dot:nth-child(3){transition-delay:.34s;background:#28c940;}

.fr-url{
  flex:1;
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--text-muted);
  background:rgba(0,0,0,.35);
  border:1px solid var(--border-base);
  border-radius:8px;
  padding:.32rem .6rem;
  overflow:hidden;
  min-width:0;
}
.fr-url-lock{opacity:.55;font-size:.68rem;flex-shrink:0;}
.fr-url-text{
  display:inline-block;
  max-width:0;
  overflow:hidden;
  white-space:nowrap;
  transition:max-width 1.1s steps(28,end) .45s;
}
.friction-visual.visible .fr-url-text{max-width:240px;}

.fr-live{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mint);
  opacity:0;
  transform:translateX(6px);
  transition:opacity .55s ease 1.1s,transform .55s ease 1.1s;
  flex-shrink:0;
}
.friction-visual.visible .fr-live{opacity:1;transform:none;}
.fr-live-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 0 rgba(var(--mint-rgb),.6);
  animation:frLivePulse 1.6s ease-in-out infinite 1.4s;
}
@keyframes frLivePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(var(--mint-rgb),.55);}
  50%{box-shadow:0 0 0 6px rgba(var(--mint-rgb),0);}
}

/* ---- Page ---- */
.fr-page{
  position:relative;
  padding:1rem 1.15rem 1.1rem;
  min-height:400px;
  overflow:hidden;
}

/* Breadcrumb */
.fr-bc{
  position:relative;
  display:flex;
  align-items:center;
  gap:.35rem;
  font-size:.66rem;
  color:var(--text-muted);
  font-family:var(--font-mono);
  margin-bottom:.85rem;
  white-space:nowrap;
}
.fr-bc-item{
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .35s ease,transform .35s ease;
}
.fr-bc-sep{
  opacity:0;
  transition:opacity .35s ease;
}
.friction-visual.visible .fr-bc-item{opacity:.75;transform:none;}
.friction-visual.visible .fr-bc-sep{opacity:.35;}
.friction-visual.visible .fr-bc-item:nth-child(1){transition-delay:.70s;}
.friction-visual.visible .fr-bc-sep:nth-child(2){transition-delay:.76s;}
.friction-visual.visible .fr-bc-item:nth-child(3){transition-delay:.82s;}
.friction-visual.visible .fr-bc-sep:nth-child(4){transition-delay:.88s;}
.friction-visual.visible .fr-bc-item:nth-child(5){transition-delay:.94s;}
.friction-visual.visible .fr-bc-sep:nth-child(6){transition-delay:1.00s;}
.friction-visual.visible .fr-bc-item:nth-child(7){transition-delay:1.06s;}
.friction-visual.visible .fr-bc-sep:nth-child(8){transition-delay:1.12s;}
.friction-visual.visible .fr-bc-item:nth-child(9){transition-delay:1.18s;}
.friction-visual.visible .fr-bc-sep:nth-child(10){transition-delay:1.24s;}
.friction-visual.visible .fr-bc-item:nth-child(11){transition-delay:1.30s;}
.fr-bc-cur{color:var(--text-primary)!important;}
.friction-visual.visible .fr-bc-cur{opacity:1!important;}

/* Hero block */
.fr-hero{
  position:relative;
  height:115px;
  border-radius:10px;
  background:linear-gradient(135deg,rgba(255,142,110,.10),rgba(248,113,113,.06));
  border:1px solid rgba(248,113,113,.18);
  overflow:hidden;
  margin-bottom:.95rem;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .55s ease 1s,transform .55s ease 1s;
}
.friction-visual.visible .fr-hero{opacity:1;transform:none;}
.fr-hero-shimmer{
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.05) 40%,rgba(255,255,255,.11) 50%,rgba(255,255,255,.05) 60%,transparent 100%);
  background-size:200% 100%;
  animation:frShimmer 2.4s linear 1.4s infinite;
}
@keyframes frShimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
.fr-hero-meta{
  position:absolute;
  bottom:.55rem;
  left:.7rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.fr-hero-pill{
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.04em;
  color:#fca5a5;
  background:rgba(248,113,113,.14);
  border:1px solid rgba(248,113,113,.32);
  padding:.16rem .42rem;
  border-radius:5px;
}
.fr-hero-bar{
  display:inline-block;
  width:50px;height:3px;
  background:rgba(255,255,255,.08);
  border-radius:3px;
  overflow:hidden;
}
.fr-hero-bar-fill{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,#fcd34d,#f87171);
  transition:width 1.4s ease 1.6s;
}
.friction-visual.visible .fr-hero-bar-fill{width:84%;}

/* Section title */
.fr-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  font-size:.72rem;
  font-weight:600;
  color:var(--text-secondary);
  letter-spacing:.01em;
  margin-bottom:.55rem;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .45s ease 1.05s,transform .45s ease 1.05s;
}
.friction-visual.visible .fr-title{opacity:1;transform:none;}
.fr-title-meta{
  font-family:var(--font-mono);
  font-size:.58rem;
  color:var(--text-muted);
  font-weight:400;
}

/* Form */
.fr-form{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.45rem;
  margin-bottom:.85rem;
}
.fr-field{
  height:28px;
  border-radius:6px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border-base);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s ease,transform .35s ease;
}
.fr-field--full{grid-column:1/-1;}
.friction-visual.visible .fr-field{opacity:1;transform:none;}
.friction-visual.visible .fr-field:nth-child(1){transition-delay:1.15s;}
.friction-visual.visible .fr-field:nth-child(2){transition-delay:1.21s;}
.friction-visual.visible .fr-field:nth-child(3){transition-delay:1.27s;}
.friction-visual.visible .fr-field:nth-child(4){transition-delay:1.33s;}
.friction-visual.visible .fr-field:nth-child(5){transition-delay:1.39s;}
.friction-visual.visible .fr-field:nth-child(6){transition-delay:1.45s;}
.friction-visual.visible .fr-field:nth-child(7){transition-delay:1.51s;}

/* Log line */
.fr-log{
  position:relative;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.42rem .55rem;
  background:rgba(248,113,113,.06);
  border-left:2px solid rgba(248,113,113,.55);
  border-radius:0 6px 6px 0;
  font-family:var(--font-mono);
  font-size:.66rem;
  color:var(--text-muted);
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .5s ease 1.65s,transform .5s ease 1.65s;
}
.friction-visual.visible .fr-log{opacity:1;transform:none;}
.fr-log-time{opacity:.55;}
.fr-log-tag{
  font-weight:700;
  padding:.06rem .32rem;
  border-radius:3px;
  font-size:.6rem;
  letter-spacing:.04em;
}
.fr-log-tag--err{
  background:rgba(248,113,113,.18);
  color:#fca5a5;
  animation:frTagBlink 2s ease-in-out 2.4s infinite;
}
@keyframes frTagBlink{
  0%,100%{background:rgba(248,113,113,.18);}
  50%{background:rgba(248,113,113,.32);}
}
.fr-log-msg{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
}

/* Status bar */
.fr-frame-status{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.5rem .9rem;
  border-top:1px solid var(--border-base);
  background:rgba(0,0,0,.28);
  font-family:var(--font-mono);
  font-size:.6rem;
  color:var(--text-muted);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .5s ease 1.9s,transform .5s ease 1.9s;
}
.friction-visual.visible .fr-frame-status{opacity:1;transform:none;}
.fr-status-pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--mint);
  font-weight:700;
}
.fr-status-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 7px rgba(var(--mint-rgb),.6);
  animation:frLivePulse 1.6s ease-in-out infinite;
}
.fr-status-count{
  display:inline-block;
  min-width:.7em;
  animation:frCountUp .9s ease 2.1s both;
}
@keyframes frCountUp{
  0%{opacity:0;transform:translateY(4px);}
  100%{opacity:1;transform:none;}
}
.fr-status-meta{opacity:.6;}
.fr-status-meta--right{margin-left:auto;}

/* ---- Pins ---- */
.fr-pin{
  position:absolute;
  z-index:5;
  width:24px;height:24px;
  opacity:0;
  transform:scale(0);
  cursor:default;
}
.friction-visual.visible .fr-pin{
  animation:frPinDrop .65s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes frPinDrop{
  0%{opacity:0;transform:scale(0) translateY(-12px) rotate(-20deg);}
  60%{opacity:1;transform:scale(1.18) translateY(0) rotate(0);}
  100%{opacity:1;transform:scale(1);}
}
.fr-pin-marker{
  position:relative;
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:800;
  color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.5);
  transition:transform .25s ease;
}
.fr-pin:hover .fr-pin-marker{transform:scale(1.12);}
.fr-pin-marker::before,
.fr-pin-marker::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  border:1.5px solid currentColor;
  opacity:0;
}
.friction-visual.visible .fr-pin-marker::before{
  animation:frPing 2.6s ease-out 3.8s infinite;
}
.friction-visual.visible .fr-pin-marker::after{
  animation:frPing 2.6s ease-out 5.1s infinite;
}
@keyframes frPing{
  0%{opacity:.6;transform:scale(.9);}
  70%{opacity:0;transform:scale(2);}
  100%{opacity:0;transform:scale(2);}
}
.fr-pin--err .fr-pin-marker{background:#f87171;color:#fff;}
.fr-pin--err .fr-pin-marker::before,
.fr-pin--err .fr-pin-marker::after{color:#f87171;}
.fr-pin--warn .fr-pin-marker{background:#f59e0b;color:#1a1a1a;}
.fr-pin--warn .fr-pin-marker::before,
.fr-pin--warn .fr-pin-marker::after{color:#f59e0b;}
.fr-pin--ok .fr-pin-marker{background:var(--mint);color:#0e0e0e;}
.fr-pin--ok .fr-pin-marker::before,
.fr-pin--ok .fr-pin-marker::after{color:var(--mint);}

/* Pin cards */
.fr-pin-card{
  position:absolute;
  display:block;
  background:rgba(18,18,18,.94);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid var(--border-strong);
  border-radius:9px;
  padding:.55rem .7rem .65rem;
  width:200px;
  font-family:var(--font-sans);
  font-size:.7rem;
  color:var(--text-secondary);
  line-height:1.42;
  box-shadow:0 14px 30px rgba(0,0,0,.55);
  opacity:0;
  transform:translateY(6px) scale(.96);
  transition:opacity .4s ease,transform .4s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.friction-visual.visible .fr-pin-card{opacity:1;transform:none;}
.fr-pin-cat{
  display:block;
  font-family:var(--font-mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:.2rem;
}
.fr-pin--err .fr-pin-cat{color:#fca5a5;}
.fr-pin--warn .fr-pin-cat{color:#fcd34d;}
.fr-pin--ok .fr-pin-cat{color:var(--mint);}
.fr-pin-text{display:block;}
.fr-pin-impact{
  display:block;
  font-size:.62rem;
  color:var(--text-muted);
  margin-top:.25rem;
  padding-top:.25rem;
  border-top:1px dashed var(--border-base);
}
.fr-pin-impact::before{content:"→ ";color:var(--mint);font-weight:700;}

/* Connector line drawn between pin & card */
.fr-pin::after{
  content:"";
  position:absolute;
  background-image:linear-gradient(90deg,currentColor 50%,transparent 50%);
  background-size:6px 1px;
  background-repeat:repeat-x;
  height:1px;
  opacity:0;
  transition:opacity .5s ease;
  pointer-events:none;
}
.friction-visual.visible .fr-pin::after{opacity:.45;}
.fr-pin--err::after{color:#f87171;}
.fr-pin--warn::after{color:#fbbf24;}

/* Pin placements — zig-zag (steps/form/hook → LEFT of pin · lcp → DOWN from pin) */
.fr-pin--steps{top:-3px;right:0;}
.fr-pin--steps .fr-pin-card{
  top:-4px;
  right:36px;
  width:180px;
}
.fr-pin--steps::after{top:10px;right:24px;width:12px;height:0;background:none;border-top:1px dashed #fbbf24;}
.friction-visual.visible .fr-pin--steps{animation-delay:2.2s;}
.friction-visual.visible .fr-pin--steps .fr-pin-card{transition-delay:2.55s;}
.friction-visual.visible .fr-pin--steps::after{transition-delay:2.55s;}

.fr-pin--lcp{top:8px;right:8px;}
.fr-pin--lcp .fr-pin-card{
  top:34px;
  right:0;
  width:190px;
}
.fr-pin--lcp::after{top:24px;right:12px;width:0;height:10px;background:none;border-left:1px dashed #f87171;}
.friction-visual.visible .fr-pin--lcp{animation-delay:2.5s;}
.friction-visual.visible .fr-pin--lcp .fr-pin-card{transition-delay:2.85s;}
.friction-visual.visible .fr-pin--lcp::after{transition-delay:2.85s;}

.fr-pin--form{top:-12px;right:0;}
.fr-pin--form .fr-pin-card{
  top:0;
  right:36px;
  width:190px;
}
.fr-pin--form::after{top:14px;right:24px;width:12px;height:0;background:none;border-top:1px dashed #fbbf24;}
.friction-visual.visible .fr-pin--form{animation-delay:2.8s;}
.friction-visual.visible .fr-pin--form .fr-pin-card{transition-delay:3.15s;}
.friction-visual.visible .fr-pin--form::after{transition-delay:3.15s;}

.fr-pin--hook{top:-10px;right:-6px;}
.fr-pin--hook .fr-pin-card{
  bottom:0;
  right:36px;
  width:190px;
}
.fr-pin--hook::after{bottom:14px;right:24px;width:12px;height:0;background:none;border-top:1px dashed #f87171;}
.friction-visual.visible .fr-pin--hook{animation-delay:3.1s;}
.friction-visual.visible .fr-pin--hook .fr-pin-card{transition-delay:3.45s;}
.friction-visual.visible .fr-pin--hook::after{transition-delay:3.45s;}

/* Floating comment */
.fr-comment{
  position:absolute;
  bottom:-22px;
  right:0;
  display:flex;
  gap:.6rem;
  background:rgba(18,18,18,.96);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid var(--border-strong);
  border-radius:12px;
  padding:.6rem .85rem .7rem;
  max-width:270px;
  box-shadow:0 18px 36px rgba(0,0,0,.55);
  opacity:0;
  transform:translateY(16px) scale(.94);
  transition:opacity .65s ease 3.7s,transform .7s cubic-bezier(.34,1.56,.64,1) 3.7s;
  z-index:8;
}
.friction-visual.visible .fr-comment{opacity:1;transform:none;}
.fr-comment-avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--mint),#4ade80);
  color:#0e0e0e;
  font-weight:700;
  font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 0 14px rgba(var(--mint-rgb),.35);
}
.fr-comment-body{font-size:.72rem;line-height:1.45;}
.fr-comment-head{
  display:flex;
  align-items:baseline;
  gap:.45rem;
  margin-bottom:.18rem;
}
.fr-comment-head b{color:var(--text-primary);font-size:.74rem;font-weight:700;}
.fr-comment-head span{font-size:.6rem;color:var(--text-muted);}
.fr-comment-body p{
  margin:0;
  color:var(--text-secondary);
  overflow:hidden;
  white-space:nowrap;
  max-width:0;
  text-overflow:clip;
  transition:max-width 1.4s steps(40,end) 4.3s;
}
.friction-visual.visible .fr-comment-body p{max-width:240px;white-space:normal;}

/* Responsive */
@media(max-width:1024px){
  .friction-visual{min-height:auto;margin-top:1.5rem;}
}
@media(max-width:768px){
  .friction-visual{min-height:auto;padding-bottom:0;width:100%;min-width:0;max-width:100%;}
  .fr-frame{max-width:100%;width:100%;min-width:0;}
  .fr-page{padding:.85rem .85rem 1rem;min-height:auto;}
  .fr-hero{height:95px;}
  .fr-form{grid-template-columns:1fr 1fr;gap:.4rem;}
  .fr-pin-card{display:none;}
  .fr-pin::after{display:none;}
  .fr-comment{position:relative;bottom:auto;right:auto;margin:1.25rem 0 0;max-width:100%;}
  .fr-bc{font-size:.58rem;gap:.22rem;min-width:0;overflow:hidden;text-overflow:ellipsis;}
  .fr-bc-item,.fr-bc-sep{flex-shrink:1;}
  .fr-url{min-width:0;}
  .fr-url-text{font-size:.65rem;}
  .fr-frame-bar{gap:.5rem;padding:.6rem .75rem;}
  .fr-log-msg{font-size:.6rem;}
}
@media(max-width:480px){
  .fr-bc-item:nth-child(n+5){display:none;}
  .fr-bc-sep:nth-child(n+5){display:none;}
}

@media (prefers-reduced-motion: reduce){
  .friction-visual *,
  .friction-visual *::before,
  .friction-visual *::after{
    animation:none!important;
    transition-duration:.01s!important;
  }
  .friction-visual.visible .fr-url-text{max-width:240px;}
  .friction-visual.visible .fr-comment-body p{max-width:240px;white-space:normal;}
}