:root{ --bg:#05070d; --bg2:#080a11; --panel:#111216; --panel2:#0d0f14; --line:#242731; --text:#f7f7f7; --muted:#a3a4a7; --orange:#FB923C; --orange2:#FB923C; --max:1630px; --radius:24px; --halo-1:57,59,68; --halo-2:106,43,19; /* halos del hero, ver bloque final */ } *{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--bg)} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);overflow-x:hidden;-webkit-font-smoothing:antialiased} /* `overflow-x:hidden` en el body obliga al navegador a computar `overflow-y:auto`, y eso convierte al body en contenedor de scroll. Pero el que scrollea de verdad es el , asi que el body quedaba como un scroller sin nada que scrollear (comprobado en la pagina: `body.scrollTop` en 0 mientras `documentElement.scrollTop` iba por 2921). Consecuencia: toda animacion ligada al scroll con `animation-timeline: view()` resuelve su scroller contra ese body muerto y el timeline no se activa nunca. Es decir, el parallax de fx-native.css no podia estar haciendo nada. `clip` recorta exactamente igual que `hidden`, pero NO crea contenedor de scroll, asi que `overflow-y` se queda en `visible` y los timelines resuelven contra el viewport. Va en regla aparte para que no se pierda: los navegadores sin soporte ignoran esta linea y conservan el `hidden` de arriba (sin parallax, que es la degradacion prevista). */ @supports (overflow-x: clip){ body{overflow-x:clip} } a{color:inherit;text-decoration:none} button,input{font:inherit}.section-dark{background:#05070d}.container{width:min(var(--max),calc(100% - 80px));margin-inline:auto;position:relative}.muted{color:#8b8c91} .page-noise{position:fixed;inset:0;opacity:.028;pointer-events:none;z-index:100;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")} .site-header{position:sticky;top:0;z-index:60;background:rgba(5,7,13,.82);border-bottom:1px solid rgba(255,255,255,.055)} .site-header:after{content:"";position:absolute;left:0;right:0;bottom:-28px;height:55px;background:radial-gradient(ellipse at var(--nav-light-x,78%) 0%,rgba(255,255,255,.34),transparent 28%);filter:blur(18px);opacity:var(--nav-light-opacity,0);pointer-events:none;transition:opacity .2s} .nav-shell{height:94px;display:flex;align-items:center;gap:32px;border-bottom:1px solid rgba(255,255,255,.06)} .brand{font-size:31px;line-height:1;font-weight:550;letter-spacing:-.055em;display:inline-flex;align-items:center}.brand-sun{width:17px;height:17px;border-radius:50%;margin-left:-1px;background:linear-gradient(135deg,#FB923C,#FB923C);box-shadow:0 0 16px rgba(251,146,60,.5)} .desktop-nav{margin:auto;display:flex;align-items:center;gap:48px;font-size:17px;color:#a7a7aa}.desktop-nav a{transition:.25s}.desktop-nav a:hover,.desktop-nav .active{color:#fff}.desktop-nav .active{font-weight:650} .button{height:55px;border-radius:18px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .25s,box-shadow .25s,background .25s}.button:hover{transform:translateY(-2px)}.button-primary{color:#fff;background:linear-gradient(90deg,#FB923C,#FB923C);box-shadow:0 0 0 1px rgba(251,146,60,.18),0 10px 36px rgba(251,146,60,.34)}.button-primary:hover{box-shadow:0 0 0 1px rgba(251,146,60,.35),0 13px 40px rgba(251,146,60,.48)}.button-dark{background:linear-gradient(180deg,#2a1b14,#25160e);border-color:rgba(251,146,60,.16);box-shadow:inset 0 1px rgba(255,255,255,.03),0 8px 24px rgba(0,0,0,.15)}.button.small{height:48px;border-radius:16px}.button.full{width:100%}.nav-cta{margin-left:auto}.menu-toggle,.mobile-menu{display:none} .hero{height:1070px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.015)}.hero-inner{text-align:center;padding-top:78px;z-index:3}.hero-halo{position:absolute;width:940px;height:940px;border-radius:50%;opacity:.32}.halo-left{left:-400px;top:-180px;background:radial-gradient(circle closest-side,#393b44,rgba(57,59,68,0) 72%)}.halo-right{right:-400px;top:-200px;background:radial-gradient(circle closest-side,#6a2b13,rgba(106,43,19,0) 72%);opacity:.2} .update-pill{width:max-content;max-width:100%;margin-inline:auto;display:flex;align-items:center;justify-content:center;height:34px;border:1px solid rgba(251,146,60,.18);border-radius:999px;background:linear-gradient(90deg,rgba(251,146,60,.16),rgba(70,29,12,.35));padding-right:9px;gap:8px;font-size:11px;box-shadow:inset 0 0 18px rgba(251,146,60,.055)}.pill-orange{height:30px;border-radius:999px;display:flex;align-items:center;padding:0 13px;background:linear-gradient(90deg,#FB923C,#FB923C);box-shadow:0 0 19px rgba(251,146,60,.24)}.update-pill b{font-size:14px;color:#b0b0b2;font-weight:400} .hero-title{font-size:72px;line-height:1.17;letter-spacing:var(--track-display);margin:48px 0 29px;font-weight:450}.hero-title .hero-accent{background:linear-gradient(90deg,#fff,#FB923C,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy{font-size:20px;line-height:1.45;color:#a6a6a8;margin:0}.hero-actions{margin-top:45px;display:flex;justify-content:center;gap:16px}.hero-actions .button{font-size:18px;height:57px} .sun-wrap{position:absolute;left:50%;transform:translateX(-50%);width:1420px;height:650px;bottom:-140px;z-index:1}.sun-glow{position:absolute;left:50%;top:-120px;transform:translateX(-50%);width:1050px;height:360px;border-radius:50%;background:radial-gradient(ellipse,rgba(251,146,60,.72),rgba(251,146,60,.25) 35%,transparent 67%)}.sun-ring{position:absolute;inset:0;border-radius:50% 50% 0 0;background:linear-gradient(105deg,#FB923C 15%,#FB923C 45%,#FB923C 55%,#FB923C 83%);box-shadow:inset 0 2px 0 rgba(255,255,255,.78),0 -6px 18px rgba(255,255,255,.42),0 -25px 55px rgba(251,146,60,.2);overflow:hidden}.sun-ring:before{content:"";position:absolute;left:125px;right:125px;top:130px;height:520px;background:#070910;border-radius:50% 50% 0 0;box-shadow:0 -7px 12px rgba(255,255,255,.24),0 -19px 33px rgba(56,88,133,.28)}.sun-core{position:absolute;left:235px;right:235px;top:235px;height:500px;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 50% 25%,#FB923C,#24120c 44%,#070910 72%);filter:drop-shadow(0 -25px 40px rgba(251,146,60,.18))} .dashboard-showcase{padding:42px 0 70px}.dashboard-frame{padding:12px;border:1px solid #2a2d35;border-radius:20px;background:#0d1118;box-shadow:0 0 55px rgba(251,146,60,.12)}.dashboard-frame img{display:block;width:100%;border-radius:12px;filter:saturate(.92) contrast(1.03)} .ecosystem{position:relative;padding:65px 0 105px;overflow:hidden}.ecosystem-glow{position:absolute;right:-50px;top:0;width:420px;height:1050px;background:radial-gradient(ellipse,rgba(251,146,60,.22),transparent 65%)}.section-kicker{text-align:center;color:#a8a8aa;font-size:20px;margin:0 auto 58px;max-width:1341px}/* 1341px = el ancho que este parrafo ya tiene en 1440px, la resolucion de referencia del diseno. Sin el tope seguia creciendo con el contenedor hasta 1630px en ultrawide y la linea llegaba a 163 caracteres. Asi por debajo de 1440 no cambia nada y por encima deja de estirarse. */.logo-marquee{overflow:hidden;margin-bottom:112px;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}.logo-track{width:max-content;display:flex;gap:100px;animation:marquee 26s linear infinite;color:#5c5d61;font-size:35px;font-weight:700;letter-spacing:-.043em}.logo-track span{min-width:160px;white-space:nowrap}@keyframes marquee{to{transform:translateX(-33.333%)}} .bento-grid{display:grid;grid-template-columns:1fr 1fr .92fr;grid-template-rows:420px 360px;gap:40px}.bento-card{position:relative;overflow:hidden;border:1px solid #282c34;border-radius:34px;background:linear-gradient(160deg,#101116,#0b0d11);box-shadow:inset 0 0 0 8px #090b10,0 0 34px rgba(251,146,60,.08)}.bento-card:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 35px rgba(251,146,60,.08);pointer-events:none}.bento-card h3{text-align:center;font-size:29px;font-weight:520;margin:38px 0 10px}.bento-card>p{text-align:center;color:#a4a4a7;font-size:20px;line-height:1.35;margin:0}.task-stack{position:absolute;left:44px;right:-60px;top:235px;display:flex;flex-direction:column;gap:16px}.task{height:64px;background:linear-gradient(180deg,#1e2128,#14171d);border:1px solid #373a43;border-radius:17px;display:flex;align-items:center;gap:16px;padding:0 28px;color:#acadb2;box-shadow:0 8px 18px rgba(0,0,0,.28)}.task span{opacity:.7}.task b{font-weight:500}.task i{width:14px;height:14px;border:2px solid #ffc500;border-radius:50%}.task em{font-style:normal;white-space:nowrap}.task-hot{background:linear-gradient(90deg,#FB923C,#FB923C);color:#fff;border-color:#FB923C;box-shadow:0 0 30px rgba(251,146,60,.55)} .metric-window{position:absolute;left:62px;right:62px;top:257px;border-radius:18px;border:1px solid #3d414c;background:linear-gradient(145deg,#21232a,#17191f);padding:25px 30px;color:#aaa;box-shadow:0 18px 38px rgba(0,0,0,.35)}.metric-window small{font-size:15px}.metric-line{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.metric-line strong{color:#fff;font-size:28px}.metric-line span{color:#4ac967}.metric-window svg{position:absolute;right:15px;bottom:6px;width:125px;height:40px;color:#8f9095} .rays-card{grid-column:3;grid-row:1/3;background:#0f1014} /* Geometria del abanico naranja: ver bloque "TARJETA DE RAYOS" al final. */ .ray{background:linear-gradient(#FB923C,#FB923C);clip-path:polygon(43% 100%,57% 100%,100% 0,0 0)} .ray-badge{display:grid;place-items:center;color:#eeebf6;background:linear-gradient(145deg,#34353b,#1d1e22);border:1px solid #FB923C;box-shadow:0 0 32px rgba(251,146,60,.24),inset 0 0 35px rgba(251,146,60,.08)} .ai-card{grid-column:1/3;grid-row:2;display:flex;align-items:end;padding:38px 48px}.ai-card h3{text-align:left;margin:0 0 8px;font-size:30px}.ai-card>div>p{margin:0;color:#aaa;font-size:19px}.ai-popup{position:absolute;right:34px;bottom:-60px;width:475px;height:300px;border-radius:24px;border:1px solid #444851;background:linear-gradient(145deg,#1c1f26,#0d0f13);padding:34px;color:#eee;display:flex;flex-direction:column;gap:20px;font-size:21px;box-shadow:0 15px 40px rgba(0,0,0,.42)}.ai-popup i{position:absolute;right:55px;bottom:75px;font-size:100px;font-style:normal}.popup-dot{position:absolute;left:34px;top:28px;color:#FB923C}.ai-popup b,.ai-popup span:not(.popup-dot){padding-left:46px} .feature-section{padding:38px 0 115px}.section-heading.centered{text-align:center}.section-heading :is(h1,h2){font-size:58px;letter-spacing:var(--track-title);font-weight:450;margin:0 0 20px}.section-heading p{margin:0;color:#aaa;font-size:19px;line-height:1.45}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.first-feature{margin-top:70px}.feature-copy h3{font-size:45px;line-height:1.22;letter-spacing:-.033em;font-weight:500;margin:0 0 28px}.feature-copy>p{font-size:19px;line-height:1.4;color:#aaa;margin:0 0 30px}.feature-copy .button{margin-bottom:35px}.check-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:20px;color:#aaa;font-size:18px}.check-list li{display:flex;align-items:center;gap:14px}.check-list li:before{content:"✓";width:31px;height:31px;border-radius:5px;display:grid;place-items:center;background:#FB923C;border:1px solid #FB923C;color:#fff;font-weight:700}.feature-visual{border-radius:30px;overflow:hidden;background:#0d0f13;box-shadow:0 0 60px rgba(251,146,60,.08)}.feature-visual img{display:block;width:100%;height:auto}.feature-alt{padding-top:30px;padding-bottom:95px}.second-feature{gap:110px} .pricing{padding:82px 0 120px}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:72px}.price-card{border:1px solid rgba(251,146,60,.25);border-radius:19px;overflow:hidden;background:#07090f}.price-card.featured{border-color:#FB923C;box-shadow:0 0 38px rgba(251,146,60,.08)}.price-top{background:#111216;padding:52px 44px 48px}.price-card.featured .price-top{background:radial-gradient(circle at 85% 15%,rgba(112,59,38,.48),#121216 58%)}.price-top h3{font-size:57px;letter-spacing:var(--track-title);margin:0 0 20px}.price-top h4{font-size:21px;margin:0 0 20px}.price-top p{color:#aaa;line-height:1.45;font-size:18px;margin:0 0 34px}.price-card ul{list-style:none;padding:42px 54px 45px;margin:0;display:flex;flex-direction:column;gap:23px;color:#a9a9ac;font-size:18px}.price-card li{display:flex;align-items:center;gap:14px}.price-card li:before{content:"✓";width:31px;height:31px;border-radius:5px;display:grid;place-items:center;background:#FB923C;border:1px solid #FB923C;color:white;font-weight:700} .blog{position:relative;padding:75px 0 105px;overflow:hidden}.blog-glow{position:absolute;right:0;top:70px;width:480px;height:720px;background:radial-gradient(ellipse,rgba(251,146,60,.24),transparent 65%)}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;margin-top:65px}.blog-card{height:680px;border-radius:27px;overflow:hidden;position:relative;background:#e6e6e3;transition:transform .35s,box-shadow .35s}.blog-card:hover{transform:translateY(-8px);box-shadow:0 22px 55px rgba(0,0,0,.28)}.blog-card img{width:100%;height:100%;display:block;object-fit:cover}.corner-arrow{position:absolute;right:20px;top:20px;width:56px;height:56px;border-radius:8px;display:grid;place-items:center;background:#555552;color:#fff;font-size:34px}.blog-overlay{position:absolute;left:22px;right:22px;bottom:20px;border-radius:20px;background:rgba(66,66,64,.86);backdrop-filter:blur(8px);padding:28px 30px;color:#fff}.blog-overlay h3{font-size:31px;margin:0 0 13px;font-weight:500}.blog-overlay p{font-size:18px;line-height:1.45;color:#c7c7c1;margin:0} .cta-section{padding:55px 0 70px}.cta-card{min-height:820px;border:1px solid #5b3727;border-radius:25px;background:linear-gradient(155deg,#121116,#0a0b10);position:relative;overflow:hidden;display:grid;grid-template-columns:44% 56%;box-shadow:inset 0 0 70px rgba(251,146,60,.07),0 20px 55px rgba(0,0,0,.25)}.cta-card:after{content:"";position:absolute;right:-60px;bottom:-30px;width:750px;height:180px;background:radial-gradient(ellipse at 100% 50%,rgba(251,146,60,.85),rgba(251,146,60,0) 72%);opacity:.8}.cta-copy{display:flex;flex-direction:column;justify-content:center;padding:70px 40px}.cta-copy h2{font-size:50px;line-height:1.22;letter-spacing:-.032em;font-weight:480;margin:0 0 10px}.cta-copy p{font-size:20px;color:#aaa;line-height:1.35;margin:0 0 50px}.email-form{width:530px;max-width:100%;height:69px;border:1px solid #5f301a;border-radius:24px;background:#0d0e12;display:flex;padding:5px}.email-form input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;padding:0 16px;font-size:18px}.email-form .button{height:57px;min-width:178px;border-radius:20px;border:0}.cta-visual{position:relative;z-index:2;display:flex;align-items:center;overflow:hidden}.cta-visual img{width:112%;height:auto;max-width:none;transform:translateX(1%);border-radius:16px 0 0 16px;box-shadow:-18px 0 50px rgba(0,0,0,.35)} .footer{padding:45px 0 32px}.footer-grid{display:grid;grid-template-columns:1.8fr .9fr .55fr .55fr;gap:65px;padding:35px 0 75px}.footer-brand h2{font-size:48px;line-height:1.15;margin:28px 0 22px}.footer-brand p,.footer-col a{color:#a8a8ab;font-size:18px;line-height:1.45}.footer-col h4{font-size:17px;font-weight:500;margin:4px 0 16px}.footer-col{display:flex;flex-direction:column;gap:10px}.footer-col a:hover{color:#fff}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px}.two-col>div{display:flex;flex-direction:column;gap:10px}.footer-bottom{border-top:1px solid #35363a;padding:42px 0 6px;display:flex;justify-content:space-between;font-size:16px} .reveal,.reveal-up,.reveal-left,.reveal-right,.reveal-scale{opacity:0;transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}.reveal,.reveal-up{transform:translateY(42px)}.reveal-left{transform:translateX(-55px)}.reveal-right{transform:translateX(55px)}.reveal-scale{transform:scale(.96) translateY(25px)}.is-visible{opacity:1!important;transform:none!important} @media(max-width:1200px){.container{width:min(var(--max),calc(100% - 42px))}.desktop-nav{gap:24px}.nav-cta{display:none}.hero-title{font-size:62px}.bento-grid{gap:24px}.feature-grid{gap:50px}.pricing-grid{gap:24px}.blog-card{height:560px}.cta-card{grid-template-columns:48% 52%}} @media(max-width:900px){.nav-shell{height:76px}.desktop-nav{display:none}.menu-toggle{margin-left:auto;width:46px;height:46px;border:1px solid #2c2f37;background:#0f1116;border-radius:12px;display:grid;place-content:center;gap:6px}.menu-toggle span{display:block;width:20px;height:2px;background:#fff}.mobile-menu{position:absolute;top:76px;left:20px;right:20px;padding:20px;border:1px solid #2c2f37;background:#0b0d12;border-radius:16px;flex-direction:column;gap:18px}.mobile-menu.open{display:flex}.hero{height:860px}.hero-inner{padding-top:70px}.hero-title{font-size:50px;letter-spacing:-.04em}.sun-wrap{width:980px;height:460px;bottom:-230px}.sun-ring:before{left:95px;right:95px;top:100px}.sun-core{left:180px;right:180px;top:180px}.bento-grid{grid-template-columns:1fr 1fr;grid-template-rows:360px 360px 360px}.rays-card{grid-column:2;grid-row:1/3}.ai-card{grid-column:1/3;grid-row:3}.feature-grid,.second-feature{grid-template-columns:1fr;gap:48px}.feature-copy{order:1}.first-feature .feature-visual{order:2}.second-feature .feature-visual{order:1}.second-feature .feature-copy{order:2}.pricing-grid,.blog-grid{grid-template-columns:1fr}.blog-card{height:auto;aspect-ratio:4/5}.cta-card{grid-template-columns:1fr;min-height:auto}.cta-copy{padding:70px 45px}.cta-visual{height:auto}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/3}} @media(max-width:620px){.container{width:calc(100% - 28px)}.brand{font-size:25px}.hero{height:760px}.hero-inner{padding-top:54px}.update-pill{font-size:10px;height:32px;padding-right:8px;gap:7px}.pill-orange{height:28px;padding:0 11px}.update-pill b{font-size:13px}.hero-title{font-size:42px;line-height:1.12;margin-top:40px}.hero-copy{font-size:16px}.hero-actions{gap:10px}.hero-actions .button{font-size:15px;padding:0 15px}.sun-wrap{width:740px;height:380px;bottom:-195px}.sun-ring:before{left:72px;right:72px;top:77px}.sun-core{left:130px;right:130px;top:140px}.dashboard-showcase{padding-top:20px}.dashboard-frame{padding:6px}.logo-track{gap:55px;font-size:28px}.bento-grid{display:flex;flex-direction:column}.bento-card{height:360px}.rays-card{height:520px}.ai-card{height:360px}.feature-section{padding-bottom:75px}.section-heading :is(h1,h2){font-size:40px}.section-heading p{font-size:16px}.first-feature{margin-top:48px}.feature-copy h3{font-size:34px}.feature-copy>p{font-size:16px}.check-list{font-size:16px}.pricing{padding-top:55px}.price-top{padding:40px 27px}.price-top h3{font-size:48px}.price-card ul{padding:36px 30px}.cta-copy{padding:50px 24px}.cta-copy h2{font-size:39px}.cta-copy p{font-size:17px}.email-form{height:auto;display:grid;gap:8px;border:0;background:transparent}.email-form input{height:58px;border:1px solid #5f301a;border-radius:17px;background:#0d0e12}.email-form .button{width:100%}.cta-visual{height:auto}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-brand h2{font-size:38px}.footer-bottom{gap:20px;flex-direction:column}.two-col{gap:20px}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal,.reveal-up,.reveal-left,.reveal-right,.reveal-scale{opacity:1;transform:none}} /* Silicon glass layer: translucent depth sobre la estructura existente. */ :root{ --glass-bg:rgba(18,20,27,.58); --glass-bg-strong:rgba(15,17,23,.78); --glass-line:rgba(255,255,255,.13); --glass-shadow:0 24px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08); } body{ background: radial-gradient(circle at 13% 18%,rgba(109,128,169,.08),transparent 28%), radial-gradient(circle at 88% 34%,rgba(251,146,60,.10),transparent 24%), var(--bg); } .section-dark{background:transparent} .site-header{background:transparent;border:0;padding:12px 0 0;pointer-events:none} .site-header:after{bottom:-24px} .nav-shell{ height:72px; padding:0 18px 0 24px; border:1px solid var(--glass-line); border-radius:22px; background:linear-gradient(135deg,rgba(28,31,40,.74),rgba(9,11,16,.60)); box-shadow:0 18px 55px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.1); -webkit-backdrop-filter:blur(26px) saturate(165%); backdrop-filter:blur(26px) saturate(165%); pointer-events:auto; } .mobile-menu{ border-color:var(--glass-line); background:rgba(12,14,20,.82); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:blur(28px) saturate(160%); backdrop-filter:blur(28px) saturate(160%); } .button-dark,.email-form{ background:linear-gradient(145deg,rgba(52,40,34,.9),rgba(18,19,25,.94)); border-color:rgba(255,255,255,.11); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 35px rgba(0,0,0,.22); } .dashboard-frame,.feature-visual,.bento-card,.price-card,.cta-card{ border-color:var(--glass-line); background:linear-gradient(145deg,rgba(29,32,41,.86),rgba(8,10,15,.82)); box-shadow:var(--glass-shadow); } /* .blog-overlay si mantiene el desenfoque: va encima de una foto y ahi el efecto si se aprecia. Son 3 cajas pequenas, no 22 superficies grandes. */ .blog-overlay{ border-color:var(--glass-line); background:linear-gradient(145deg,rgba(29,32,41,.62),rgba(8,10,15,.52)); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%); } .dashboard-frame{width:100%;margin-inline:auto;border-radius:28px;padding:10px} .dashboard-showcase{position:relative;z-index:4;margin-top:-450px} .dashboard-frame img{border-radius:19px} .bento-card{box-shadow:var(--glass-shadow),inset 0 0 0 7px rgba(5,7,12,.45)} .card-route{position:absolute;inset:0;z-index:5;border-radius:inherit}.bento-card:has(.card-route):hover{border-color:rgba(251,146,60,.3)} .price-card{background:linear-gradient(160deg,rgba(25,27,35,.67),rgba(5,7,12,.55))} .price-top,.price-card.featured .price-top{background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(251,146,60,.035))} .cta-card{background:linear-gradient(145deg,rgba(31,30,38,.68),rgba(8,10,15,.50))} .blog-overlay{background:rgba(34,35,37,.56);border:1px solid rgba(255,255,255,.16)} .glass-surface{position:relative;isolation:isolate} .glass-surface::before{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; background:radial-gradient(420px circle at var(--glass-x,50%) var(--glass-y,0%),rgba(255,255,255,.14),transparent 43%); opacity:.48; transition:opacity .35s ease; } .glass-surface:hover::before{opacity:.88} .glass-surface>*{z-index:1} .word-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.07em;margin-bottom:-.07em} .word{display:inline-block} .hero-title .word-mask,.hero-title .word{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit} .hero-title .hero-accent .word{ background:linear-gradient(90deg,#FB923C,#FB923C,#FB923C); -webkit-background-clip:text; background-clip:text; color:transparent; } .gsap-ready .reveal,.gsap-ready .reveal-up,.gsap-ready .reveal-left,.gsap-ready .reveal-right,.gsap-ready .reveal-scale{ opacity:1; transform:none; transition:none; } /* preserve-3d retirado: rompia overflow:hidden en Safari. La perspectiva 3D ahora esta aislada en .dashboard-stage. */ @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ .nav-shell,.mobile-menu,.nav-dropdown-panel,.dashboard-frame,.feature-visual,.bento-card,.price-card,.cta-card,.blog-overlay{background:var(--glass-bg-strong)} } @media(max-width:900px){ .site-header{padding-top:8px} .nav-shell{height:64px;border-radius:18px;padding-inline:18px} .mobile-menu{top:80px} } @media(max-width:900px){.sun-wrap{bottom:-90px}} @media(max-width:620px){.sun-wrap{bottom:-70px}} @media(max-width:900px){.dashboard-showcase{margin-top:-260px}} @media(max-width:620px){.dashboard-showcase{margin-top:-170px}} @media(prefers-reduced-motion:reduce){ .word{filter:none!important;opacity:1!important;transform:none!important} .glass-surface::before{display:none} } /* Mantiene visibles las filas informativas de MDM sobre la superficie glass. */ .task-stack{z-index:2} .task-stack .task{opacity:1} /* Logo Shalom Trust en cabecera y pie. */ .brand img{height:38px;width:auto;display:block} .footer-brand .brand img{height:44px} @media(max-width:900px){.brand img{height:31px}.footer-brand .brand img{height:38px}} /* Navegación de soluciones: prolonga el mismo lenguaje glass del navbar. */ .desktop-nav .solutions-trigger{ appearance:none; border:0; padding:0; background:transparent; color:inherit; cursor:pointer; transition:color .25s; } .desktop-nav .solutions-trigger:hover, .desktop-nav .solutions-trigger[aria-expanded="true"]{color:#fff} .desktop-nav .solutions-trigger span{display:inline-block;margin-left:4px;transition:transform .25s} .desktop-nav .solutions-trigger[aria-expanded="true"] span{transform:rotate(180deg)} .desktop-nav .nav-menu{position:relative;display:flex;align-items:center;color:inherit} .desktop-nav .nav-menu-trigger{appearance:none;border:0;padding:0;background:transparent;color:inherit;cursor:pointer;transition:color .25s} .desktop-nav .nav-menu-trigger:hover,.desktop-nav .nav-menu-trigger[aria-expanded="true"],.desktop-nav .nav-menu.active{color:#fff}.desktop-nav .nav-menu.active{font-weight:650} .desktop-nav .nav-menu-trigger span{display:inline-block;margin-left:4px;transition:transform .25s}.desktop-nav .nav-menu-trigger[aria-expanded="true"] span{transform:rotate(180deg)} .nav-dropdown{position:absolute;left:0;right:0;top:calc(100% + 12px);opacity:0;visibility:hidden;max-height:0;transform:translateY(-28px);pointer-events:none;overflow:hidden;transition:max-height .52s cubic-bezier(.2,.8,.2,1),opacity .3s ease,transform .46s cubic-bezier(.2,.8,.2,1),visibility .3s} .nav-dropdown.open{opacity:1;visibility:visible;max-height:520px;transform:translateY(0);pointer-events:auto} .nav-dropdown-panel{padding:40px 44px 42px;border:1px solid var(--glass-line);border-radius:24px;background:linear-gradient(145deg,rgba(24,27,35,.97),rgba(7,9,14,.95));box-shadow:0 26px 80px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.08),0 0 42px rgba(251,146,60,.08);-webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%)} .nav-dropdown-title{margin:0 0 36px;color:var(--orange2);font-size:18px;line-height:1;font-weight:700} .nav-dropdown-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:105px;row-gap:32px} .nav-dropdown-item{display:block;min-width:0;transition:transform .18s ease} .nav-dropdown-item:hover{transform:translateX(4px)} .nav-dropdown-item h3{margin:0 0 7px;color:#f6f6f7;font-size:20px;line-height:1.18;font-weight:700} .nav-dropdown-item p{margin:0;max-width:630px;color:#9fa1a7;font-size:17px;line-height:1.38} .mega-menu{ position:absolute; left:0; right:0; top:calc(100% + 7px); opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none; transition:opacity .24s ease,transform .24s ease,visibility .24s; } .mega-menu.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto} .mega-menu-panel{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 34px; padding:24px 28px 20px; border:1px solid var(--glass-line); border-radius:22px; background:linear-gradient(145deg,rgba(24,27,35,.94),rgba(7,9,14,.92)); box-shadow:0 26px 80px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08),0 0 40px rgba(251,146,60,.08); -webkit-backdrop-filter:blur(30px) saturate(160%); backdrop-filter:blur(30px) saturate(160%); pointer-events:auto; } .mega-label{margin:0 0 9px;color:var(--orange2);font-size:12px;font-weight:750;letter-spacing:.16em;text-transform:uppercase} .mega-column{min-width:0} .mega-column a{display:block;padding:8px 10px;border-radius:12px;transition:background .22s,transform .22s} .mega-column a:hover{background:rgba(251,146,60,.09);transform:translateX(3px)} .mega-column strong{display:block;margin-bottom:3px;color:#f7f7f7;font-size:14px;font-weight:650} .mega-column span{display:block;color:#94979f;font-size:12px;line-height:1.35} .mega-column .mega-view-all{margin-top:4px;color:#FB923C;font-size:12px;font-weight:650} .mega-cta{ grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:2px; padding:13px 16px; border:1px solid rgba(251,146,60,.2); border-radius:15px; background:linear-gradient(90deg,rgba(251,146,60,.11),rgba(251,146,60,.025)); } .mega-cta strong,.mega-cta small{display:block}.mega-cta strong{font-size:14px}.mega-cta small{margin-top:3px;color:#9b9da3}.mega-cta b{color:var(--orange2);font-size:13px;white-space:nowrap} .mobile-solutions-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;text-align:left} .mobile-solutions-toggle span{font-size:22px;transition:transform .25s} .mobile-solutions-toggle[aria-expanded="true"] span{transform:rotate(45deg)} .mobile-solutions-submenu{max-height:0;overflow:hidden;padding-left:14px;border-left:1px solid rgba(251,146,60,.25);transition:max-height .3s ease} .mobile-solutions-submenu.open{max-height:720px} .mobile-solutions-submenu a{display:none;padding:7px 0;color:#a7a9af;font-size:14px} .mobile-solutions-submenu.open a{display:block} .mobile-nav-group{display:grid;gap:0}.mobile-nav-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;text-align:left}.mobile-nav-toggle span{font-size:22px;transition:transform .25s}.mobile-nav-toggle[aria-expanded="true"] span{transform:rotate(45deg)}.mobile-nav-panel{max-height:0;overflow:hidden;padding-left:14px;border-left:1px solid rgba(251,146,60,.25);transition:max-height .3s ease}.mobile-nav-panel.open{max-height:820px;margin-top:10px}.mobile-nav-panel a,.mobile-nav-panel small{display:block;padding:7px 0}.mobile-nav-panel a{color:#a7a9af;font-size:14px}.mobile-nav-panel small{margin-top:6px;color:#FB923C;font-size:10px;font-weight:750;letter-spacing:.12em;text-transform:uppercase} .hero-title .hero-accent{background:linear-gradient(90deg,#FB923C,#FB923C,#FB923C);-webkit-background-clip:text;background-clip:text;color:transparent} .section-kicker strong{display:block;color:#ededee;font-size:22px;font-weight:520;margin-bottom:8px}.section-kicker span{font-size:16px} .ecosystem-heading{margin-top:-54px;margin-bottom:62px} .control-summary{position:absolute;left:28px;right:28px;bottom:32px;text-align:center;z-index:2}.control-summary h3{margin:0 0 8px}.control-summary p{margin:0;color:#a4a4a7;line-height:1.45} .plan-badge{display:inline-flex;margin-bottom:16px;padding:7px 10px;border:1px solid rgba(251,146,60,.4);border-radius:999px;color:#FB923C;background:rgba(251,146,60,.09);font-size:11px;font-weight:750;letter-spacing:.11em} .price-top h3{font-size:clamp(36px,3.1vw,57px)} .feature-visual picture{display:block}.feature-visual picture img{width:100%;height:auto;object-fit:contain} .blog-overlay p b{display:inline-block;margin-top:10px;color:#fff;font-weight:600} .cta-copy p small{display:inline-block;margin-top:16px;color:#d4d4d6;letter-spacing:.03em}.form-status{min-height:22px!important;margin:14px 0 0!important;color:#c4c5c8!important;font-size:14px!important}.footer-cta{margin-top:24px;height:50px}.footer-bottom{justify-content:flex-start} .standalone-dashboard{margin-top:0;padding-top:92px}.platform-heading{margin-bottom:54px} @media(max-width:1200px){.desktop-nav{gap:20px;font-size:15px}.mega-menu-panel{gap-inline:18px}.nav-dropdown-panel{padding:32px 34px 35px}.nav-dropdown-grid{column-gap:58px;row-gap:26px}.nav-dropdown-title{margin-bottom:28px}.nav-dropdown-item p{font-size:15px}} @media(min-width:1201px) and (max-width:1500px){.desktop-nav{gap:22px;font-size:15px}.nav-shell{padding-inline:18px}.nav-cta{height:50px;padding-inline:16px}} @media(max-width:900px){ .mega-menu,.nav-dropdown{display:none} .mobile-menu{max-height:calc(100vh - 96px);max-height:calc(100svh - 96px);overflow-y:auto;overscroll-behavior:contain} .ecosystem-heading{margin-top:-42px} .standalone-dashboard{margin-top:0;padding-top:72px} } @media(max-width:620px){ .section-kicker strong{font-size:19px}.section-kicker span{font-size:14px} .ecosystem-heading{margin-top:-35px;margin-bottom:44px} .control-summary{left:18px;right:18px;bottom:24px} .control-summary p{font-size:15px} .price-top h3{font-size:38px} .standalone-dashboard{margin-top:0;padding-top:58px} } /* Nav centrado respecto a la barra. Iba corrido a la izquierda porque .desktop-nav{margin:auto} y .nav-cta{margin-left:auto} son dos márgenes automáticos repartiéndose el espacio libre: 1/3 antes del nav y 2/3 después. Con grid, las dos columnas laterales son iguales por definición, así que el nav queda centrado sea cual sea el ancho del logo y del botón. 1fr lleva suelo de contenido, así que las columnas nunca encogen por debajo del logo ni del botón: en pantallas justas el nav se descentra un poco en vez de solaparse (que es lo que sí pasaba centrándolo con position:absolute). */ @media(min-width:901px){ .nav-shell{display:grid;grid-template-columns:1fr auto 1fr;align-items:center} .brand{justify-self:start} .desktop-nav{margin:0;justify-self:center} .nav-cta{margin-left:0;justify-self:end} } /* ===== Movimiento continuo (motion-fx.js) ===== */ /* Indicador deslizante del nav */ .desktop-nav{position:relative} .nav-glide{ position:absolute;left:0;bottom:-9px;height:2px;width:0; border-radius:2px;pointer-events:none;opacity:0; background:linear-gradient(90deg,transparent,#FB923C 18%,#FB923C 50%,#FB923C 82%,transparent); box-shadow:0 0 12px rgba(251,146,60,.55); } @media(prefers-reduced-motion:reduce){ .nav-glide{display:none} } /* ===== Tema claro fijo Shalom Trust ===== */ :root{ color-scheme:light; --bg:#ffffff;--bg2:#ffffff;--panel:#ffffff;--panel2:#f7f9fb;--line:#e3e8ef; --text:#182130;--muted:#657181; --glass-bg:rgba(249,251,253,.78);--glass-bg-strong:rgba(248,250,252,.94); --glass-line:rgba(55,67,84,.17); --glass-shadow:0 22px 65px rgba(44,55,72,.17),inset 0 1px 0 rgba(255,255,255,.98); --halo-1:236,241,248; --halo-2:255,224,205 } html,body{background:#fff;color:var(--text)} /* Se retira el radial azul-gris de 13% 18%: era la mancha gris que se veia detras del hero. Queda solo un naranja de marca muy tenue. */ body{background:radial-gradient(circle at 88% 34%,rgba(251,146,60,.07),transparent 26%),var(--bg)} .page-noise{opacity:.012}.section-dark{background:transparent} .nav-shell{border-color:rgba(31,41,55,.1);background:linear-gradient(135deg,rgba(255,255,255,.91),rgba(246,248,251,.82));box-shadow:0 18px 55px rgba(52,62,78,.12),inset 0 1px 0 #fff} .desktop-nav{color:#697383}.desktop-nav a:hover,.desktop-nav .active,.desktop-nav .solutions-trigger:hover,.desktop-nav .solutions-trigger[aria-expanded="true"],.desktop-nav .nav-menu-trigger:hover,.desktop-nav .nav-menu-trigger[aria-expanded="true"],.desktop-nav .nav-menu.active{color:#17202e} .mobile-menu{border-color:rgba(31,41,55,.11);background:rgba(255,255,255,.96);box-shadow:0 24px 70px rgba(45,55,72,.16)} .mobile-menu a,.mobile-solutions-toggle,.mobile-nav-toggle{color:#17202e}.mobile-nav-panel a,.mobile-solutions-submenu a{color:#687383} .menu-toggle{border-color:#d9dee6!important;background:#fff!important}.menu-toggle span{background:#17202e!important} .mega-menu-panel,.nav-dropdown-panel{border-color:rgba(31,41,55,.11);background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,248,251,.96));box-shadow:0 26px 80px rgba(45,55,72,.16),inset 0 1px #fff,0 0 42px rgba(251,146,60,.07)} .mega-column strong,.nav-dropdown-item h3,.mega-cta strong{color:#17202e}.mega-column span,.nav-dropdown-item p,.mega-cta small{color:#687383} .mega-column a:hover{background:rgba(251,146,60,.08)}.mega-cta{background:linear-gradient(90deg,rgba(251,146,60,.09),rgba(255,255,255,.42))} .button-dark,.email-form{color:#202938;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,246,249,.94));border-color:rgba(31,41,55,.12);box-shadow:inset 0 1px #fff,0 10px 30px rgba(45,55,72,.1)} .hero{border-color:rgba(31,41,55,.05)}.halo-left{background:#ccd5e3}.halo-right{background:#FB923C;opacity:.3} .update-pill{color:#293342;background:linear-gradient(90deg,rgba(251,146,60,.13),rgba(255,255,255,.76))}.pill-orange{color:#fff} .hero-title .hero-accent{background:linear-gradient(90deg,#FB923C,#FB923C,#FB923C);-webkit-background-clip:text;background-clip:text;color:transparent} .hero-copy,.section-kicker,.section-heading p,.feature-copy>p,.check-list,.cta-copy p,.footer-brand p,.footer-col a{color:#687383} .section-kicker strong{color:#17202e}.cta-copy p small{color:#596575}.form-status{color:#596575!important} .sun-ring:before{background:#f4f6f9;box-shadow:0 -7px 12px rgba(255,255,255,.78),0 -19px 33px rgba(132,148,174,.2)} .sun-core{background:radial-gradient(ellipse at 50% 25%,#FB923C,#FB923C 44%,#f4f6f9 72%)} .dashboard-frame,.feature-visual,.bento-card,.price-card,.cta-card,.blog-overlay{border-color:rgba(55,67,84,.17);background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(232,237,244,.93));box-shadow:var(--glass-shadow)} .blog-overlay{color:#17202e}.blog-overlay p{color:#687383}.blog-overlay p b{color:#17202e} .dashboard-frame{background:#f9fbfd}.bento-card{box-shadow:var(--glass-shadow),inset 0 0 0 7px rgba(222,229,238,.68)} .bento-card>p,.ai-card>div>p{color:#657181}.task{color:#5d6979;background:linear-gradient(180deg,#fff,#e9eef4);border-color:#cbd4df;box-shadow:0 8px 18px rgba(45,55,72,.14)}.task-hot{color:#fff;background:linear-gradient(90deg,#FB923C,#FB923C);border-color:#FB923C} .metric-window{color:#647080;border-color:#c5ceda;background:linear-gradient(145deg,#fff,#e6ebf2);box-shadow:0 18px 38px rgba(45,55,72,.16)}.metric-line strong{color:#17202e} .rays-card{background:linear-gradient(145deg,#fdfefe,#e6ebf2)}.ray-badge{color:#FB923C;background:linear-gradient(145deg,#fff,#e2e8f0);border-color:#FB923C;box-shadow:0 0 28px rgba(251,146,60,.18),inset 0 0 28px rgba(255,255,255,.82)} .ai-popup{color:#17202e;border-color:#c5ceda;background:linear-gradient(145deg,#fff,#e6ebf2);box-shadow:0 15px 40px rgba(45,55,72,.18)} .price-card{background:#f9fbfd}.price-top,.price-card.featured .price-top{background:linear-gradient(145deg,#fff,#e8edf3)}.price-top p,.price-card ul{color:#657181} .cta-card{background:linear-gradient(155deg,#fff,#e7ecf3)}.email-form input{color:#17202e}.footer-bottom{border-color:#cbd4df}.footer-col a:hover{color:#17202e} .glass-surface::before{background:radial-gradient(420px circle at var(--glass-x,50%) var(--glass-y,0%),rgba(255,255,255,.95),transparent 43%)} @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.nav-shell,.mobile-menu,.nav-dropdown-panel,.dashboard-frame,.feature-visual,.bento-card,.price-card,.cta-card,.blog-overlay{background:#f7f9fc}} /* Escala compacta: conserva el diseño claro y reduce únicamente dimensiones. */ @media(min-width:1201px){ .dashboard-showcase>.container, .ecosystem>.bento-grid, .feature-section>.container, .pricing>.container, .blog>.container, .cta-section>.container{width:min(1360px,calc(100% - 96px))} .dashboard-frame{width:min(100%,1240px)} .bento-grid{grid-template-rows:350px 290px;gap:24px} .bento-card{border-radius:27px} .bento-card h3{margin:30px 0 7px;font-size:27px} .bento-card>p{font-size:16px;line-height:1.45} .task-stack{left:30px;right:30px;top:188px;gap:10px} .task{height:49px;padding:0 18px;border-radius:13px;font-size:13px} .task em{font-size:13px} .metric-window{left:38px;right:38px;top:200px;padding:17px 20px;border-radius:17px} .metric-line strong{font-size:29px}.metric-line span{font-size:12px} .metric-window svg{height:42px} .ray{top:-195px;width:92px;height:440px} .ray-badge{top:218px;width:112px;height:112px;border-radius:31px;font-size:54px} .control-summary{left:24px;right:24px;bottom:24px} .control-summary h3{font-size:26px}.control-summary p{font-size:14px} .ai-card{padding:29px 36px} .ai-card h3{font-size:27px}.ai-card>div>p{font-size:16px} .ai-popup{right:34px;bottom:-64px;width:400px;height:238px;padding:26px;gap:14px;border-radius:24px;font-size:16px} .feature-section{padding-bottom:86px} .feature-grid{gap:58px}.second-feature{gap:70px} .first-feature{margin-top:54px} .feature-copy h3{font-size:clamp(34px,3vw,44px)} .feature-copy>p{font-size:16px;line-height:1.6} .feature-copy .button{margin-top:25px} .check-list{margin-top:26px;gap:13px;font-size:15px} .check-list li:before{width:26px;height:26px;border-radius:8px} .pricing-grid{gap:25px;margin-top:52px} .price-card{border-radius:27px} .price-top{padding:38px 32px 34px} .price-top h3{font-size:clamp(36px,3vw,46px)} .price-top h4{margin:13px 0 14px;font-size:18px} .price-top p{font-size:15px;line-height:1.55} .price-card ul{padding:31px 35px 35px;gap:16px;font-size:15px} .price-card li:before{width:27px;height:27px;border-radius:8px} .blog-grid{gap:24px;margin-top:52px} .blog-card{height:520px} .blog-overlay{left:25px;right:25px;bottom:25px;padding:24px} .blog-overlay h3{font-size:25px}.blog-overlay p{font-size:14px} .cta-card{min-height:520px;border-radius:30px} .cta-copy{padding:52px 38px} .cta-copy h2{font-size:clamp(37px,3.4vw,50px)} .cta-copy p{margin-top:20px;font-size:16px} .email-form{width:min(480px,100%);height:62px;margin-top:35px} .email-form .button{height:50px} } /* El hero vuelve a su fondo limpio: la imagen de olas gris se retiro a peticion del diseno (y con ella un PNG de 1,6 MB que se descargaba siempre, por encima del fold). */ /* La ilustración MDM conserva el PNG original y su transparencia real. */ .feature-visual.feature-visual--transparent{ border:0; background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; overflow:visible; } .feature-visual.feature-visual--transparent::before{display:none} /* ========================================================================== OPTIMIZACIÓN DE RENDIMIENTO Y MOVIMIENTO Solo geometría, capas y motion. Ningún color de marca se toca aquí: la paleta sigue viniendo de los bloques anteriores (claro y oscuro). ========================================================================== */ /* -------------------------------------------------------------------------- 1. NAVBAR — mismo aspecto, sin repintado continuo. Antes: script.js reescribía --nav-light-x con un Math.sin(scrollY) en cada frame de scroll. Eso repintaba un degradado desenfocado a lo ancho de una barra sticky que además lleva backdrop-filter: repaint constante. Ahora la posición es fija y la opacidad la conmuta una clase. -------------------------------------------------------------------------- */ .site-header:after{ --nav-light-x:62%; opacity:0; transition:opacity .45s ease; } .site-header.is-scrolled:after{opacity:.5} /* La barra es lo único con backdrop-filter permanente del sitio. `contain` evita que su repintado invalide el resto del documento. */ .nav-shell{contain:paint} /* -------------------------------------------------------------------------- 2. CAPTURA DEL SISTEMA — escenario 3D. La perspectiva vive en el wrapper y la transformación en el marco: es la única forma de que rotateX se vea como profundidad real y no como un aplastado. Ningún ancestro lleva overflow:hidden, así que Safari no recorta el elemento a mitad del giro. -------------------------------------------------------------------------- */ .dashboard-stage{ position:relative; width:min(78vw,1120px); /* ~21% más pequeña que los 1420px anteriores */ max-width:100%; margin-inline:auto; padding-bottom:34px; /* aire para la sombra de contacto */ perspective:1500px; perspective-origin:50% 42%; } .dashboard-stage .dashboard-frame{ transform-origin:50% 100%; backface-visibility:hidden; /* Sombra final estática: se rasteriza una vez y nunca se re-calcula. La sensación de "se levanta del suelo" la da .dashboard-shadow, que solo mueve transform y opacity (coste GPU ~0). */ box-shadow:var(--glass-shadow),0 45px 110px rgba(20,28,44,.16); } /* Sombra de contacto: la elipse del suelo. */ .dashboard-shadow{ position:absolute; /* Centrada con left/width, no con translateX(-50%): GSAP anima `transform` en este elemento y si el centrado viviera ahi lo sobrescribiria con un valor en px que dejaria de centrar al redimensionar. */ left:9%; bottom:6px; width:82%; height:46px; border-radius:50%; background:radial-gradient(ellipse closest-side,rgba(18,26,42,.34),rgba(18,26,42,0) 78%); pointer-events:none; z-index:-1; } .dashboard-frame img{display:block;width:100%;height:auto} @media(max-width:900px){ .dashboard-stage{width:min(92vw,760px);perspective:900px;padding-bottom:22px} .dashboard-shadow{height:30px} } /* -------------------------------------------------------------------------- 3. TARJETA DE RAYOS — el gráfico naranja, contenido y proporcionado. Causa del recorte: .ray medía 120px de ancho y 520px de alto con top:-200px, medidas fijas dentro de una tarjeta de ancho variable. En cuanto la columna se estrechaba (o se ensanchaba) el abanico se salía y .bento-card{overflow:hidden} lo cortaba. Ahora todo se mide en unidades de contenedor (cqw), así que el abanico ocupa siempre ~62-68% del ancho interno, en cualquier viewport. Además el layout es flex: nada va en position:absolute, no hay nada que se pueda salir. -------------------------------------------------------------------------- */ .rays-card{ container-type:inline-size; --fan-h:min(86cqw,360px); --ray-w:calc(var(--fan-h) * .25); display:flex; flex-direction:column; align-items:center; padding:clamp(24px,6cqw,44px) clamp(18px,5cqw,34px) clamp(26px,5cqw,40px); } /* Safari 15 y anteriores: sin container queries, medida equivalente en vw. */ @supports not (container-type:inline-size){ .rays-card{--fan-h:clamp(210px,28vw,360px)} } .ray-fan{ position:relative; flex:none; /* .92 es el ancho real que barre el abanico: los rayos extremos giran 20°, así que su esquina superior cae justo en el borde de esta caja. */ width:calc(var(--fan-h) * .92); height:var(--fan-h); /* Los rayos se desvanecen por arriba en vez de terminar en un corte recto (que es lo que antes se escondía sacándolos fuera de la tarjeta). */ -webkit-mask-image:linear-gradient(to bottom,transparent,#000 26%); mask-image:linear-gradient(to bottom,transparent,#000 26%); filter:drop-shadow(0 0 26px rgba(251,146,60,.16)); /* uno, no cinco */ } .ray{ position:absolute; left:50%; /* `top:auto` es deliberado: hay reglas responsive anteriores que fijan top en px (top:-195px, top:-200px) de la epoca en que el abanico sobresalia por arriba de la tarjeta. Si no se anula, el rayo se ancla arriba y vuelve a salirse. */ top:auto; bottom:0; width:var(--ray-w); height:100%; transform-origin:50% 100%; } .ray-1{transform:translateX(-50%) rotate(-20deg)} .ray-2{transform:translateX(-50%) rotate(-10deg)} .ray-3{transform:translateX(-50%)} .ray-4{transform:translateX(-50%) rotate(10deg)} .ray-5{transform:translateX(-50%) rotate(20deg)} .rays-card .ray-badge{ position:relative; flex:none; left:auto;top:auto;transform:none; margin-top:calc(var(--fan-h) * -.05); width:min(32cqw,144px); height:min(32cqw,144px); border-radius:min(7cqw,36px); font-size:min(15.5cqw,72px); line-height:1; } @supports not (container-type:inline-size){ .rays-card .ray-badge{width:clamp(84px,10vw,144px);height:clamp(84px,10vw,144px);border-radius:clamp(21px,2.5vw,36px);font-size:clamp(42px,5vw,72px)} } .rays-card .control-summary{ position:relative; left:auto;right:auto;bottom:auto; margin-top:auto; padding-top:clamp(20px,4cqw,32px); width:100%; } /* -------------------------------------------------------------------------- 4. MARQUEE — sigue siendo CSS puro (transform, compositor). Se pausa cuando no está en pantalla: no tiene sentido componer 26s de animación infinita mientras el usuario lee el pie de página. -------------------------------------------------------------------------- */ .logo-track{will-change:transform} .logo-marquee.is-offscreen .logo-track{animation-play-state:paused} /* -------------------------------------------------------------------------- 5. HIGIENE DE CAPAS. will-change solo mientras algo se anima de verdad; script.js pone y quita la clase .is-animating. Dejarlo puesto en 40 elementos obliga al navegador a mantener 40 texturas en memoria de vídeo permanentemente. -------------------------------------------------------------------------- */ .is-animating{will-change:transform,opacity} /* Red de seguridad: si por lo que sea una animación de entrada no llega a ejecutarse, el contenido se ve igual. Nada crítico se queda en opacity:0. */ html.fx-failsafe .reveal, html.fx-failsafe .reveal-up, html.fx-failsafe .reveal-left, html.fx-failsafe .reveal-right, html.fx-failsafe .reveal-scale, html.fx-failsafe .bento-card, html.fx-failsafe .price-card, html.fx-failsafe .blog-card, html.fx-failsafe .feature-visual, html.fx-failsafe .feature-copy>*, html.fx-failsafe .dashboard-frame, html.fx-failsafe .cta-card, html.fx-failsafe .word{ opacity:1!important; visibility:visible!important; transform:none!important; filter:none!important; clip-path:none!important; } /* -------------------------------------------------------------------------- 6. RESPONSIVE — la tarjeta derecha deja de dominar en portátiles. -------------------------------------------------------------------------- */ @media(min-width:901px) and (max-width:1400px){ /* Solo la proporcion de columnas. Las alturas de fila se dejan como estaban: .task-stack y .metric-window se posicionan con px fijos dentro de la tarjeta y encogerlas les recortaria contenido. */ .bento-grid{grid-template-columns:1fr 1fr .95fr} } @media(max-width:900px){ .bento-grid{grid-template-columns:1fr 1fr} } /* -------------------------------------------------------------------------- 7. PREFERS-REDUCED-MOTION — sin 3D, sin parallax, sin marquee. -------------------------------------------------------------------------- */ @media(prefers-reduced-motion:reduce){ .dashboard-stage{perspective:none} .dashboard-stage .dashboard-frame{transform:none!important} .dashboard-shadow{display:none} .logo-track{animation:none!important;will-change:auto} .is-animating{will-change:auto} .site-header:after{display:none} } /* Indicador del nav: el muelle de Motion se sustituye por una transición del compositor. Mismo gesto, sin librería. */ .nav-glide{ display:none; } /* -------------------------------------------------------------------------- HALOS DEL HERO — degradado en vez de filter: blur(110px). Un blur de 110px sobre un circulo solido de 660px obliga al navegador a rasterizar una region mucho mayor que el propio elemento, y a rehacerla cada vez que algo dentro del hero se invalida (el sol se mueve con parallax justo encima). Un radial-gradient da el mismo degradado sin pasar por el pipeline de filtros. Los stops estan escalonados a proposito: con un unico salto a transparent se veia el borde del disco. El color lo pone cada tema en --halo-1 / --halo-2, asi que esta regla sirve para la paleta oscura y para la clara sin duplicarse. -------------------------------------------------------------------------- */ .hero-halo{ background:none; background-image:radial-gradient(circle closest-side, rgba(var(--halo-1),1) 0%, rgba(var(--halo-1),.6) 24%, rgba(var(--halo-1),.26) 45%, rgba(var(--halo-1),.08) 66%, rgba(var(--halo-1),0) 84%); } .halo-right{ background-image:radial-gradient(circle closest-side, rgba(var(--halo-2),1) 0%, rgba(var(--halo-2),.6) 24%, rgba(var(--halo-2),.26) 45%, rgba(var(--halo-2),.08) 66%, rgba(var(--halo-2),0) 84%); } /* -------------------------------------------------------------------------- COMPATIBILIDAD CON LAS ESCALAS RESPONSIVE ANTERIORES. Varias media queries del archivo posicionan .ray, .ray-badge y .control-summary en absoluto con medidas en px, que es de donde venia el recorte. La tarjeta ahora es un contenedor flex y esas coordenadas no aplican, pero siguen en el archivo (dan tamanos de fuente utiles), asi que aqui se neutraliza solo el posicionamiento. -------------------------------------------------------------------------- */ .rays-card .ray{top:auto!important;bottom:0!important;width:var(--ray-w)!important;height:100%!important} .rays-card .ray-badge{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important} .rays-card .control-summary{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important} /* La captura la dimensiona .dashboard-stage; el marco solo la rellena. */ .dashboard-stage .dashboard-frame{width:100%;max-width:none} /* -------------------------------------------------------------------------- NAVBAR — que no se descuelgue al hacer scroll. La barra es position:sticky y su geometria es correcta (top:0 en todo el recorrido, medido). Lo que se veia era retraso de repintado: .nav-shell lleva backdrop-filter, asi que en cada frame tiene que volver a leer lo que hay debajo, y debajo ahora pasa una galeria negra a pantalla completa con 12 capturas y un PNG grande. Cuando el compositor no llega a tiempo, la barra se queda atras unos pixeles y parece que baja. Promoviendola a su propia capa, el compositor la desplaza sin repintarla. Es UN elemento, siempre visible y siempre en movimiento respecto al documento: es exactamente el caso para el que existe will-change. -------------------------------------------------------------------------- */ /* La barra NO se queda fija: se ve arriba del todo y se va con el scroll. `relative` en vez de `static` a proposito: el mega-menu y los desplegables son position:absolute y necesitan que la cabecera siga siendo su bloque contenedor. Con `static` se anclarian al viewport y quedarian fuera de sitio. Tampoco hace falta ya promoverla a capa propia: aquello era para el retraso de repintado del sticky, y sin sticky no hay retraso. */ .site-header{ position:relative; will-change:auto; transform:none; } /* ========================================================================== COMPOSICIÓN MÓVIL — misma identidad, ritmo más compacto. Las referencias móviles trabajan con bloques que empiezan a contar algo en el primer encuadre. Estas reglas no cambian componentes, colores ni orden: únicamente reducen vacíos, acercan los contenidos relacionados y mantienen las tarjetas parcialmente visibles entre pantallas. ========================================================================== */ @media(max-width:620px){ .ecosystem{padding:38px 0 64px} .section-kicker{margin-bottom:24px;line-height:1.45} .ecosystem .logo-marquee{ width:calc(100% - 28px); margin-bottom:32px; } .ecosystem .logo-track{font-size:17px} .ecosystem .logo-set{gap:30px;padding-right:30px} .ecosystem-heading{ margin-top:0; margin-bottom:30px; } .ecosystem-heading h2{ margin-bottom:16px; font-size:clamp(34px,10vw,40px); line-height:1.04; } .ecosystem-heading p{font-size:15px;line-height:1.42} .bento-grid{gap:16px} .bento-card{height:310px;border-radius:28px} .bento-card h3{margin:27px 0 8px;font-size:27px} .bento-card>p{font-size:17px;line-height:1.35} .task-stack{left:40px;right:-58px;top:190px;gap:12px} .task{height:57px;padding-inline:20px;gap:12px;border-radius:15px;font-size:14px} .metric-window{left:48px;right:48px;top:190px;padding:20px 22px} .rays-card{height:410px} .rays-card{--fan-h:min(77cqw,300px)} .rays-card .control-summary{padding-top:14px} .ai-card{height:310px;padding:28px} .ai-card h3{font-size:27px} .ai-card>div>p{font-size:16px} .ai-popup{right:20px;bottom:-78px;width:85%;height:235px;padding:25px;gap:13px;font-size:16px} .feature-section{padding-top:30px;padding-bottom:58px} .feature-section .section-heading :is(h1,h2){font-size:clamp(34px,9.5vw,40px);line-height:1.06} .feature-section .section-heading p{line-height:1.48} .first-feature{margin-top:34px} } @media(max-width:360px){ .ecosystem{padding-top:32px} .ecosystem-heading h2{font-size:33px} .bento-card{height:292px} .rays-card{height:380px} .ai-card{height:292px} .task-stack,.metric-window{top:180px} } /* ========================================================================== NAVBAR DE ESCRITORIO — composición de tres zonas sobre el hero. El menú móvil conserva íntegramente su diseño y comportamiento propios. ========================================================================== */ .desktop-nav-actions{ display:none; } @media(min-width:901px){ .site-header{ height:92px; padding:0; background:transparent; border:0; pointer-events:auto; } .site-header::after{ display:none; } .site-header > .nav-shell{ /* Sin tope, en un ultrawide de 3440px la barra medía 3341: el logotipo quedaba en un extremo y el boton en el otro, a mas de tres metros visuales. El min() la centra a partir de 2K sin tocar ningun monitor normal. */ width:min(calc(100% - 84px),var(--shell-max,2100px)); margin-inline:auto; height:92px; padding:0; display:grid; grid-template-columns:minmax(150px,1fr) auto minmax(220px,1fr); align-items:center; gap:0; border:0; border-radius:0; background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; contain:none; overflow:visible; } /* El cristal de la cabecera se apaga en TODO el sitio. script.js anade la clase .glass-surface a .nav-shell, y su ::before pinta un radial-gradient blanco al 95% recortado a inset:0 sobre una caja de 92px sin radio. Sobre fondos oscuros pasaba desapercibido; sobre cualquier fondo claro se lee como un marco blanco brillante con corte recto justo detras de los enlaces del menu. Se apaga UNICAMENTE ese pseudo-elemento del navbar, y solo en escritorio. No toca los enlaces, el subrayado naranja, los botones Login y Solicitar demo, el logo, ni las demas superficies de cristal del sitio (tarjetas, dashboard-frame, cta-card, blog-overlay...), que conservan su ::before intacto. */ .site-header > .nav-shell.glass-surface::before{ content:none; } .site-header > .nav-shell > .brand{ justify-self:start; } .site-header > .nav-shell > .brand img{ width:auto; height:34px; } .desktop-nav{ justify-self:center; gap:40px; color:#354052; font-size:16px; font-weight:450; letter-spacing:-.018em; } .desktop-nav > :is(a,button){ position:relative; padding:13px 0; white-space:nowrap; } .desktop-nav > :is(a,button)::after{ content:""; position:absolute; right:0; bottom:5px; left:0; height:1px; background:#FB923C; opacity:.8; transform:scaleX(0); transform-origin:center; transition:transform .2s ease; } .desktop-nav > :is(a,button):hover::after, .desktop-nav > .active::after, .desktop-nav > .nav-menu.active > button::after{ transform:scaleX(1); } .desktop-nav-actions{ justify-self:end; display:flex; align-items:center; gap:12px; } .desktop-nav-actions .nav-login, .desktop-nav-actions .nav-cta{ min-width:92px; height:42px; margin:0; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-size:15px; font-weight:500; line-height:1; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; } .desktop-nav-actions .nav-login{ color:#17202e; border:1px solid rgba(31,41,55,.11); background:rgba(255,255,255,.94); box-shadow:0 2px 10px rgba(31,41,55,.06); } .desktop-nav-actions .nav-cta{ display:inline-flex; min-width:132px; color:#fff; border:1px solid rgba(255,255,255,.1); background:linear-gradient(180deg,#333b48 0%,#17202e 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 3px 12px rgba(31,41,55,.16); } .desktop-nav-actions :is(.nav-login,.nav-cta):hover{ transform:translateY(-1px); } } @media(min-width:901px) and (max-width:1200px){ .site-header > .nav-shell{ width:calc(100% - 48px); grid-template-columns:minmax(120px,1fr) auto minmax(190px,1fr); } .site-header > .nav-shell > .brand img{ height:30px; } .desktop-nav{ gap:24px; font-size:14px; } .desktop-nav-actions{ gap:8px; } .desktop-nav-actions .nav-login, .desktop-nav-actions .nav-cta{ height:40px; padding-inline:15px; font-size:14px; } .desktop-nav-actions .nav-cta{ min-width:116px; } } /* ========================================================================== HERO DE ESCRITORIO — fondo y figura proporcionados por el cliente. Se limita a desktop para conservar intacta la portada específica de móvil. ========================================================================== */ .desktop-hero-person{ display:none; } @media(min-width:901px){ .home-page main[data-page="index"] > .hero{ height:clamp(772px,100svh,972px); min-height:772px; margin-top:-92px; border:0; isolation:isolate; background-color:#fff4e9; /* El PNG pesaba 1,2 MB para un degradado: en WebP son 20 KB con la misma imagen (49,5 dB). Se declara con `image-set` y el PNG de respaldo, igual que las nubes del hero en hero-clouds.css. */ background-image:url("assets/hero-desktop-gradient.png?v=hero-desktop-20260901-1"); background-image:image-set( url("assets/hero-desktop-gradient.webp?v=webp-hero-20260902-1") type("image/webp"), url("assets/hero-desktop-gradient.png?v=hero-desktop-20260901-1") type("image/png") ); background-repeat:no-repeat; background-position:center top; background-size:cover; } .home-page main[data-page="index"] > .hero .hero-halo, .home-page main[data-page="index"] > .hero .sun-wrap{ display:none; } .home-page .desktop-hero-person{ position:absolute; z-index:2; right:auto; left:clamp(205px,27vw,389px); bottom:clamp(-92px,-6vw,-54px); display:block; width:min(61vw,880px); max-width:none; height:auto; user-select:none; pointer-events:none; } .home-page .hero-inner{ position:relative; z-index:3; width:calc(100% - 84px); height:100%; padding:0 0 clamp(62px,8vh,92px); display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; text-align:left; } /* El hero comienza detrás de la cabecera. Se conservan exactamente su estructura, medidas y separación; solo adopta contraste para el fondo naranja que ahora sí continúa hasta el borde superior. */ body.home-page:has(> main + [data-site-footer])::before{ display:none; } .home-page .site-header > .nav-shell > .brand img{ filter:brightness(0) invert(1); } .home-page .desktop-nav, .home-page .desktop-nav > a, .home-page .desktop-nav .solutions-trigger, .home-page .desktop-nav .nav-menu-trigger{ color:rgba(255,255,255,.94); } .home-page .desktop-nav :is(a,.solutions-trigger,.nav-menu-trigger):hover, .home-page .desktop-nav .active{ color:#fff; } .home-page .desktop-nav > :is(a,button)::after, .home-page .desktop-nav > .nav-menu > .nav-menu-trigger::after{ background:#fff; } .home-page .hero-inner .update-pill{ margin:0 0 24px; color:#344052; border-color:rgba(251,146,60,.22); background:rgba(255,255,255,.62); box-shadow:0 8px 28px rgba(136,77,35,.08),inset 0 1px 0 rgba(255,255,255,.9); } .home-page .hero-inner .update-pill b{ color:#596575; } .home-page .hero-title{ max-width:min(43vw,620px); margin:0 0 22px; color:#17202e; font-size:clamp(54px,5vw,76px); line-height:.99; letter-spacing:-.052em; font-weight:450; } .home-page .hero-copy{ max-width:min(42vw,570px); color:#4f5b6b; font-size:17px; line-height:1.48; } .home-page .hero-actions{ margin-top:28px; justify-content:flex-start; } .home-page .hero-actions .button{ height:50px; border-radius:999px; padding-inline:24px; font-size:15px; } .home-page .hero-actions .button-dark{ color:#17202e; border-color:rgba(31,41,55,.12); background:rgba(255,255,255,.88); box-shadow:0 8px 25px rgba(31,41,55,.08); } .home-page .hero + .dashboard-showcase{ margin-top:0; } } @media(min-width:901px) and (max-width:1200px){ .home-page .desktop-hero-person{ right:auto; left:20vw; bottom:-48px; width:min(66vw,760px); } .home-page .hero-inner{ width:calc(100% - 48px); padding-bottom:58px; } .home-page .hero-title{ max-width:44vw; font-size:clamp(48px,5.5vw,62px); } .home-page .hero-copy{ max-width:43vw; font-size:15px; } } /* Ajustes solicitados para la portada en teléfono. La versión de escritorio conserva su contenido y sus proporciones. */ @media(max-width:620px){ .home-page .ecosystem-heading{ display:none; } .home-page .ecosystem .logo-marquee{ margin-bottom:18px; } .home-page .bento-grid{ gap:12px; } .home-page .bento-card{ height:282px; border-radius:25px; } .home-page .bento-card h3{ margin-top:23px; font-size:25px; } .home-page .bento-card > p{ font-size:16px; } .home-page .task-stack{ top:168px; } .home-page .metric-window{ top:168px; } .home-page .rays-card{ height:365px; --fan-h:min(70cqw,270px); } .home-page .ai-card{ height:282px; padding:24px; } .home-page .ai-popup{ height:215px; bottom:-72px; } .home-page .cta-section{ padding:32px 0 48px; } .home-page .cta-card{ width:100%; min-width:0; min-height:0; border-radius:24px; grid-template-columns:minmax(0,1fr); background:linear-gradient(155deg,#fff,#edf1f6); } .home-page .cta-copy{ min-width:0; padding:38px 22px 28px; } .home-page .cta-copy h2{ max-width:100%; margin-bottom:14px; color:#182130; font-size:clamp(31px,9.6vw,38px); line-height:1.08; } .home-page .cta-copy p{ max-width:100%; margin:0 0 25px; color:#687383; font-size:15px; line-height:1.45; } .home-page .cta-copy p small{ margin-top:13px; font-size:13px; } .home-page .email-form{ width:100%; max-width:100%; margin:0; gap:9px; } .home-page .email-form input{ width:100%; min-width:0; color:#182130; border:1px solid rgba(251,146,60,.3); background:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.95); } .home-page .email-form input::placeholder{ color:#7a8492; opacity:1; } .home-page .email-form .button{ min-width:0; } .home-page .cta-visual{ height:210px; min-height:0; align-items:flex-start; } .home-page .cta-visual img{ width:116%; transform:translateX(-1%); border-radius:0; } } @media(max-width:360px){ .home-page .bento-card, .home-page .ai-card{ height:268px; } .home-page .rays-card{ height:345px; } .home-page .task-stack, .home-page .metric-window{ top:158px; } .home-page .cta-copy{ padding-inline:18px; } } /* ========================================================================== CABECERA MÓVIL — logo libre + controles flotantes. La navegación de escritorio no cambia y el contenido del menú móvil sigue viviendo en .st-mobile-menu. ========================================================================== */ .mobile-header-actions{ display:none; } @media(max-width:900px){ .site-header{ position:absolute; inset:0 0 auto; z-index:200; padding-top:max(12px,env(safe-area-inset-top)); background:transparent; border:0; pointer-events:none; } body:not(.home-page) .site-header{ background:transparent; } .site-header::after{ display:none; } .site-header > .nav-shell{ width:calc(100% - 28px); height:64px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; contain:none; overflow:visible; pointer-events:none; } .site-header > .nav-shell::before{ display:none!important; content:none!important; } .site-header > .nav-shell > .brand{ transition:opacity .24s ease,transform .32s cubic-bezier(.2,.8,.2,1); pointer-events:auto; } .site-header > .nav-shell > .brand img{ height:31px; } .mobile-header-actions{ position:relative; z-index:1; display:flex; align-items:center; gap:clamp(7px,2vw,9px); margin-left:auto; pointer-events:auto; } .mobile-header-language{ width:clamp(70px,19.5vw,78px); height:clamp(42px,11.5vw,46px); padding:0 12px; display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid rgba(255,255,255,.92); border-radius:16px; color:#FB923C; background:rgba(255,249,244,.28); -webkit-backdrop-filter:none; backdrop-filter:none; font-size:clamp(14px,4vw,16px); font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; } .mobile-header-chevron{ width:9px; height:9px; margin-top:-4px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); } body:not(.home-page) .mobile-header-language{ border-color:rgba(251,146,60,.24); background:rgba(255,247,240,.82); } .menu-toggle{ width:clamp(42px,11.5vw,46px); height:clamp(42px,11.5vw,46px); margin:0; padding:0; display:grid; place-items:center; border:0!important; border-radius:50%; color:#FB923C; background:rgba(255,255,255,.7)!important; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; cursor:pointer; -webkit-tap-highlight-color:transparent; } .menu-toggle-icon{ width:20px; height:20px; overflow:visible; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .menu-toggle-line{ transform-box:fill-box; } body:not(.home-page) .menu-toggle{ background:rgba(255,247,240,.9)!important; box-shadow:none; } .menu-toggle.is-active .menu-toggle-line--1{ transform:translate(-2.35px,.35px) rotate(-45deg); transform-origin:top right; } .menu-toggle.is-active .menu-toggle-line--2{ opacity:0; } .menu-toggle.is-active .menu-toggle-line--3{ transform:translate(-2.35px,-.35px) rotate(45deg); transform-origin:bottom right; } .site-header.mobile-controls-floating > .nav-shell > .brand{ opacity:0; transform:translateY(-12px); pointer-events:none; } .site-header.mobile-controls-floating .mobile-header-actions{ position:fixed; top:max(12px,env(safe-area-inset-top)); right:14px; z-index:220; } .site-header.mobile-controls-floating .mobile-header-language{ border-color:rgba(251,146,60,.2); background:rgba(255,249,244,.86); box-shadow:0 10px 35px rgba(110,58,22,.1); } .site-header.mobile-controls-floating .menu-toggle{ background:rgba(255,255,255,.9)!important; box-shadow:0 10px 35px rgba(110,58,22,.1); } .site-header.menu-open .mobile-header-actions{ z-index:calc(var(--layer-menu-controls,310) + 1); } .site-header.menu-open > .nav-shell{ z-index:var(--layer-menu-controls,310); isolation:auto; } .site-header.menu-open > .nav-shell > .brand{ opacity:0; visibility:hidden; pointer-events:none; } .site-header.menu-open .mobile-header-language{ opacity:0; visibility:hidden; pointer-events:none; } .site-header.menu-open .menu-toggle{ color:#fff; background:rgba(255,255,255,.24)!important; } .site-header.menu-open .st-mobile-menu .close-button{ opacity:0; visibility:hidden; pointer-events:none; } } @media(max-width:380px){ .site-header{padding-top:max(10px,env(safe-area-inset-top))} .site-header > .nav-shell{width:calc(100% - 22px);height:58px} .site-header > .nav-shell > .brand img{height:27px} .mobile-header-actions{gap:7px} .mobile-header-language{width:68px;height:40px;padding-inline:10px;font-size:14px} .menu-toggle{width:40px;height:40px} .menu-toggle-icon{width:18px;height:18px} .site-header.mobile-controls-floating .mobile-header-actions{top:max(10px,env(safe-area-inset-top));right:11px} } @media(prefers-reduced-motion:reduce){ .site-header > .nav-shell > .brand, .menu-toggle-line{transition:none!important} } @media(max-width:620px){ /* Se usa únicamente el botón de cierre del menú. Ocultar los controles flotantes evita la doble figura que convertía la X en un chevrón. */ .site-header.menu-open .mobile-header-actions{ opacity:0; visibility:hidden; pointer-events:none; } .site-header.menu-open .st-mobile-menu .close-button{ opacity:1; visibility:visible; pointer-events:auto; } } /* ========================================================================== BENTO EN TELÉFONO — las cuatro tarjetas en rejilla 2x2, juntas. Solo dentro de @media(max-width:620px): escritorio y tablet no cambian. Los selectores llevan .home-page a propósito. Más arriba ya existe un bloque ".home-page .bento-*" para la portada en teléfono; sin ese prefijo estas reglas pierden por especificidad (0-2-0 contra 0-1-0) aunque vayan después. Y va al final del archivo para ganar por orden a ese bloque. min-width:0 es imprescindible: los items de una rejilla valen por defecto min-width:auto, así que la tarjeta se negaba a bajar de su ancho mínimo de contenido (~235px) y se salía de una columna de 175px. Las piezas de dentro (.task-stack, .metric-window, .ai-popup) estaban medidas para una tarjeta de ancho completo (~362px); a media columna se salían por todos lados, así que aquí llevan su medida compacta. La .rays-card no necesita nada de eso: ya se mide en cqw sobre su propio ancho, solo se le ajusta el texto. ========================================================================== */ @media (max-width:620px){ .home-page .bento-grid{ display:grid; grid-template-columns:1fr 1fr; /* Sin esto siguen valiendo las tres filas de 360px de la regla de <=900px y quedan huecos enormes entre las dos filas. */ grid-template-rows:auto auto; gap:10px; } /* En escritorio .rays-card y .ai-card ocupan varias celdas (grid-column:1/3, grid-row:1/3). Con el flex de antes eso quedaba inerte; al volver a rejilla hay que devolverlas a una celda normal para que las cuatro caigan en el 2x2. */ .home-page .bento-card, .home-page .rays-card, .home-page .ai-card{ grid-column:auto; grid-row:auto; } .home-page .bento-card{ min-width:0; height:auto; /* Vertical, como en la referencia. Con aspect-ratio las cuatro miden igual sin depender de lo que lleven dentro. */ aspect-ratio:1 / 1.2; border-radius:18px; } .home-page .bento-card h3{margin:15px 0 4px;font-size:15px;letter-spacing:-.01em} .home-page .bento-card > p{font-size:10px;line-height:1.35;padding-inline:6px} /* 1 · MDM Android */ .home-page .task-stack{left:9px;right:-15px;top:auto;bottom:11px;gap:5px} .home-page .task{height:24px;padding-inline:7px;gap:5px;border-radius:8px;font-size:8px;box-shadow:0 4px 9px rgba(0,0,0,.16)} .home-page .task i{width:6px;height:6px;border-width:1.5px} .home-page .task span{font-size:7px} /* 2 · MDM Apple */ .home-page .metric-window{left:9px;right:9px;top:auto;bottom:11px;padding:8px 9px;border-radius:11px} .home-page .metric-window small{font-size:7px} .home-page .metric-line{margin-top:2px} .home-page .metric-line strong{font-size:13px} .home-page .metric-line span{font-size:7px} .home-page .metric-window svg{right:7px;bottom:4px;width:48px;height:17px} /* 3 · Control Remoto */ .home-page .rays-card{height:auto;--fan-h:min(56cqw,96px);padding:14px 10px 12px} .home-page .rays-card .control-summary{padding-top:8px} .home-page .rays-card .control-summary h3{margin:0 0 3px;font-size:14px} .home-page .rays-card .control-summary p{font-size:8px;line-height:1.28} /* 4 · Cobranza + MDM */ .home-page .ai-card{height:auto;padding:14px 11px;align-items:flex-start} .home-page .ai-card h3{font-size:15px;margin:0 0 4px} .home-page .ai-card > div > p{font-size:9px;line-height:1.35} /* bottom:-24px y no -32: a 360px la última línea del recuadro quedaba a 1px del borde de la tarjeta. Subirlo deja aire sin perder el efecto de que el recuadro asoma por abajo. */ .home-page .ai-popup{right:7px;bottom:-24px;width:88%;height:108px;padding:9px;gap:4px;font-size:8px;border-radius:12px} .home-page .ai-popup i{right:12px;bottom:22px;font-size:32px} .home-page .popup-dot{left:9px;top:8px;font-size:8px} .home-page .ai-popup b, .home-page .ai-popup span:not(.popup-dot){padding-left:13px} } /* ========================================================================== SISTEMA DE BLOQUES — .section-shell El sitio ya tenía un lenguaje de formas, pero repetido a mano en cada pieza: .mdm-mgmt y .mdm-crm (mdm-management-hero.css / mdm-crm-band.css) escriben los mismos tres valores —ancho máximo 1440, margen lateral, radio grande— cada una por su cuenta. Las franjas naranjas de más abajo se quedaron sin ellos y por eso entraban con un corte recto de lado a lado. Aquí ese lenguaje se escribe UNA vez, en variables, y se aplica con una clase. No es un sistema nuevo: son exactamente las medidas que ya usaban los bloques correctos. --section-inset el margen lateral del bloque (24 → 14 → 0 en móvil, igual que .mdm-mgmt: min(1440,100%-48) → 100%-28 → 100%) --section-radius el radio de las esquinas normales (30 → 24 → 28) --section-sweep la curva grande de la esquina superior derecha, la firma que ya lleva .mdm-mgmt (176 → 120 → 100) En móvil el bloque va a sangre —como ya hacían .mdm-mgmt y .mdm-crm— pero NO pierde las curvas: el radio solo se reduce. ========================================================================== */ :root{ --section-inset:24px; --section-max:1440px; --section-width:min(var(--section-max),calc(100% - var(--section-inset) * 2)); --section-radius:clamp(24px,2.1vw,30px); --section-sweep:clamp(100px,12vw,176px); } @media(max-width:1100px){ :root{--section-inset:14px;--section-radius:24px;--section-sweep:120px} } @media(max-width:900px){ :root{--section-inset:0px;--section-radius:28px;--section-sweep:100px} } @media(max-width:620px){ :root{--section-radius:26px;--section-sweep:84px} } @media(max-width:390px){ :root{--section-radius:24px;--section-sweep:72px} } .section-shell{ width:var(--section-width); margin-inline:auto; } /* Un bloque puede estar partido en varias secciones contiguas del mismo color: solo la primera redondea arriba y solo la última abajo. Las de en medio van a escuadra para que la superficie no se corte. */ .section-shell--top{border-radius:var(--section-radius) var(--section-sweep) 0 0} .section-shell--mid{border-radius:0} .section-shell--bottom{border-radius:0 0 var(--section-radius) var(--section-radius)} .section-shell--solo{border-radius:var(--section-radius) var(--section-sweep) var(--section-radius) var(--section-radius)} /* ========================================================================== PERFIL BAJO — `html.fx-low` La clase la pone el snippet en linea del cuando el navegador declara <=4 GB de RAM, <=4 nucleos o "ahorro de datos". No cambia la composicion: quita los efectos cuyo coste es por CUADRO en vez de por pintado, que son los que en un equipo justo se comen el presupuesto de una animacion. (La transicion entre paginas tiene su propio relevo en transitions.css.) ========================================================================== */ /* El grano cubre el viewport entero por encima de todo (`position:fixed`, z-index 100). A opacidad .028 no se echa de menos, y quitarlo libera una capa de pantalla completa en cada composicion. */ .fx-low .page-noise{display:none} /* `backdrop-filter` obliga a leer y desenfocar lo que hay DEBAJO de la barra en cada cuadro; en una barra sticky eso es todo el scroll y toda transicion. El fondo ya lleva su propio degradado, asi que sin el filtro la barra sigue siendo la misma barra, solo que opaca. */ .fx-low .nav-shell, .fx-low .mobile-menu, .fx-low .nav-dropdown-panel, .fx-low .mega-menu-panel{ -webkit-backdrop-filter:none; backdrop-filter:none; } /* El resplandor de la barra es un degradado desenfocado de 18px: barato de pintar una vez, caro cada vez que la barra cambia de estado. En perfil bajo se apaga en lugar de animar su opacidad. */ .fx-low .site-header:after{display:none} /* ========================================================================== MOVIMIENTO AÑADIDO — todo resuelto fuera del hilo principal Detalles nuevos que no cuestan un solo listener de scroll ni una linea de JavaScript: la barra de lectura va con `animation-timeline:scroll()`, que el navegador liga al scroll EN EL COMPOSITOR (si no lo soporta, no pasa nada: la barra simplemente no aparece), y la entrada del mega menu son transform + opacity sobre cuatro bloques, solo mientras esta abierto. Todo se apaga con `prefers-reduced-motion` y en perfil bajo (`fx-low`). ========================================================================== */ @keyframes fx-read-progress{ from{transform:scaleX(0)} to {transform:scaleX(1)} } @keyframes fx-menu-column{ from{opacity:0;transform:translate3d(0,7px,0)} to {opacity:1;transform:none} } @media (prefers-reduced-motion:no-preference){ /* Barra de progreso de lectura, pegada al borde inferior de la cabecera. `scaleX` sobre una franja de 2px: una sola propiedad de composicion. */ @supports (animation-timeline:scroll()){ :root:not(.fx-low) .site-header::before{ content:""; position:absolute; left:0; bottom:-1px; z-index:2; width:100%; height:2px; transform:scaleX(0); transform-origin:left center; background:linear-gradient(90deg,var(--orange2),#ffc08a); opacity:.92; pointer-events:none; animation:fx-read-progress linear both; animation-timeline:scroll(root block); } } /* Las columnas del mega menu entran escalonadas al abrirlo. */ :root:not(.fx-low) .mega-menu.open .mega-column, :root:not(.fx-low) .mega-menu.open .mega-cta{ animation:fx-menu-column .32s cubic-bezier(.22,.61,.36,1) both; } :root:not(.fx-low) .mega-menu.open .mega-column:nth-of-type(2){animation-delay:.05s} :root:not(.fx-low) .mega-menu.open .mega-column:nth-of-type(3){animation-delay:.1s} :root:not(.fx-low) .mega-menu.open .mega-cta{animation-delay:.15s} } /* En el hero movil la cabecera flota sobre la imagen, sin fondo: una barra de progreso ahi quedaria colgada en el aire. */ @media (max-width:699px){ .home-page .site-header::before{display:none} } /* Mismo caso en Android/Apple: la cabecera es transparente en todo el recorrido (mdm-android.css/mdm-apple.css), asi que la barra tampoco tiene donde apoyarse. */ @media (max-width:900px){ .mdm-detail-page .site-header::before{display:none} } /* ========================================================================== CONTROLES FLOTANTES DE ESCRITORIO — `.site-header.desktop-controls-floating` (la clase la conmuta script.js al pasar de 88px de scroll, >900px de ancho) Al bajar, la barra completa cede su sitio al mismo trio compacto de la referencia: [+ Solicitar demo] [ES v] [menu]. La cabecera ya es position:fixed, asi que el grupo baja con la pagina sin JS por cuadro. Reutiliza `.mobile-header-actions`, que es donde ya viven el conmutador de idioma y el boton de menu con sus manejadores; aqui solo se muestra en escritorio y se le da el aspecto de las capsulas. ========================================================================== */ /* Por defecto NO existe: solo aparece en el grupo flotante de ESCRITORIO. Sin esta linea se colaba tambien en la cabecera de movil, que comparte el mismo contenedor `.mobile-header-actions`. */ .float-cta{display:none} @media(min-width:901px){ /* Piezas que se retiran: la barra de cristal, el logo y la navegacion. La cabecera se queda sin fondo para que solo floten las capsulas. */ .site-header.desktop-controls-floating > .nav-shell{ border-color:transparent; background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; } .site-header.desktop-controls-floating > .nav-shell > .brand, .site-header.desktop-controls-floating > .nav-shell > .desktop-nav, .site-header.desktop-controls-floating > .nav-shell > .desktop-nav-actions{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .28s ease,visibility 0s .28s; } /* El grupo compacto entra en su lugar, alineado a la derecha. */ /* `fixed`, igual que el grupo flotante de movil: en escritorio la cabecera es `position:relative` (se va con la pagina), asi que fijar el grupo es lo unico que hace que baje contigo. No se toca la posicion de la cabecera: cambiarla alteraria el flujo de todas las paginas. */ .site-header.desktop-controls-floating .mobile-header-actions{ display:flex; align-items:center; gap:10px; position:fixed; top:25px; right:clamp(18px,2.4vw,38px); z-index:220; pointer-events:auto; animation:fx-float-in .34s cubic-bezier(.22,.61,.36,1) both; } @media (prefers-reduced-motion:reduce){ .site-header.desktop-controls-floating .mobile-header-actions{animation:none} } /* --- Capsula principal: naranja de marca, texto blanco, con el "+" --- */ .site-header.desktop-controls-floating .float-cta{ display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 22px; border-radius:999px; background:var(--orange2); color:#fff; font-size:15px; font-weight:500; letter-spacing:-.01em; white-space:nowrap; text-decoration:none; box-shadow:0 8px 22px rgba(251,146,60,.28); transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; } .site-header.desktop-controls-floating .float-cta:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(251,146,60,.36); filter:saturate(1.06); } .float-cta__plus{font-size:18px;font-weight:400;line-height:0} /* --- Capsula de idioma: contorno naranja sobre blanco --- */ .site-header.desktop-controls-floating .mobile-header-language{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:auto; min-width:0; height:46px; padding:0 20px; /* Capsula clara y solida, con la tinta oscura del sitio: es la referencia final. El borde y la sombra son minimos pero necesarios — el grupo pasa por tramos blancos de la pagina y sin ellos la pieza se fundiria con el fondo. */ border:1px solid rgba(27,36,48,.10); border-radius:999px; background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; color:#16202E; font-size:14px; font-weight:700; letter-spacing:.04em; box-shadow:0 6px 18px rgba(31,41,55,.12); } /* La flecha del conmutador, a la escala de la capsula. */ .site-header.desktop-controls-floating .mobile-header-chevron{ width:8px; height:8px; margin-top:-3px; border-right:2.3px solid currentColor; border-bottom:2.3px solid currentColor; transform:rotate(45deg); } /* --- Boton de menu: circulo gris claro, como en la referencia --- */ /* El circulo del menu NO va en escritorio: el grupo flotante son SOLO los dos botones (Solicitar demo + idioma). En movil el boton sigue intacto, porque toda esta seccion vive dentro de @media(min-width:901px). */ .site-header.desktop-controls-floating .menu-toggle{ display:none; } } @keyframes fx-float-in{ from{opacity:0;transform:translate3d(0,-12px,0)} to {opacity:1;transform:none} } /* -------------------------------------------------------------------------- VERSION CLARA DEL GRUPO FLOTANTE — `.float-invert` La clase la enciende script.js cuando bajo el grupo hay una seccion naranja u oscura. Ahi el naranja de marca se funde con el fondo y el boton deja de leerse; se cambia por la capsula blanca con tinta oscura y el idioma pasa a contorno translucido claro, como en la referencia. -------------------------------------------------------------------------- */ @media(min-width:901px){ .site-header.desktop-controls-floating.float-invert .float-cta{ background:#fff; color:#16202E; box-shadow:0 8px 24px rgba(20,26,35,.16); } .site-header.desktop-controls-floating.float-invert .float-cta:hover{ background:#fff; box-shadow:0 12px 30px rgba(20,26,35,.22); filter:none; } /* La capsula de idioma NO cambia sobre fondos oscuros: se queda solida y clara con la tinta oscura, que es como se pidio. Se probo la version translucida con texto blanco (como la referencia) y falla en este sitio: el grupo suele caer JUSTO sobre el canto redondeado de las secciones naranjas, con media capsula sobre naranja y la otra media sobre el blanco de la pagina. Ahi el texto blanco desaparece. Solida se lee sobre los dos. */ /* El cambio acompana al scroll sin parpadeo. */ .site-header.desktop-controls-floating .float-cta, .site-header.desktop-controls-floating .mobile-header-language{ transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease; } }