/* ========================================================================== hero-wf.css - la version para Webflow. Se genera desde hero.css. NO editar a mano: el original es webflow/hero.css. Este fichero se carga en la Home ENTERA, al lado del CSS del sitio. Por eso NO hay ni un solo selector que pueda salir del hero: cada regla cuelga de `.hero`. Que cambia respecto al original, y nada mas que esto: 1. Fuera los 8 @font-face (Archivo x3, Figtree x5). El sitio ya carga Montserrat, asi que las familias pasan a Montserrat / Arial. 2. Fuera `html,body{}`. Solo daba fondo y margen a la pagina, y el hero ya se pone su propio fondo dentro de `.hero{}`. 3. Lo que daba `body{}` (familia, color, suavizado) se muda a `.hero{}`. 4. `*{box-sizing}` pasa a `.hero,.hero *`. 5. Todo selector que no colgaba de `.hero` lleva ahora `.hero` delante. 6. Los @keyframes de nombre generico llevan el prefijo `dsh-`. ds-orbit-cw y ds-orbit-ccw NO se renombran: el HTML los nombra dentro del atributo style de cada .spin y de cada .chip. 7. Al final, un bloque nuevo para la columna de texto NATIVA de Webflow, que usa clases `.dsh-*` en vez de las del local. El aspecto del hero no cambia. Solo cambia hasta donde llega el CSS. ========================================================================== */ /* ========================================================================== Base del hero. Valores por defecto = la configuracion elegida por Andrea. Todo lo ajustable vive en variables CSS que el panel de tweaks reescribe. ========================================================================== */ .hero,.hero *{box-sizing:border-box} .hero{ /* Lo que antes ponia `body{}`. Ahora vive aqui y no sale del hero. */ font-family:Montserrat,Arial,sans-serif;color:#fff;-webkit-font-smoothing:antialiased; /* CANDADO. El `:root` del sitio ya define --bh (92%) y --len (102px), y una variable CSS se hereda. Donde el hero lee var(--bh,.5em) o var(--len,400) sin que el elemento traiga el suyo, entraria el valor del sitio en vez del de reserva. Aqui se fija el mismo valor de reserva: el aspecto no cambia y el valor ajeno no puede entrar. */ --bh:.5em; --len:400; /* SENAL DE "LA HOJA YA MANDA". hero-wf.js la lee con getComputedStyle antes de levantar el telon del hero (la clase `dsh-listo`). En la pagina publicada este fichero llega DESPUES de la seccion, y sin esta senal el JavaScript podria enseñar el hero antes de tener los estilos. No la borres, y no la copies a ningun otro sitio. */ --dsh-css:1; --bg:#0d0d0d; --glass-a:0; --glass-blur:9px; --fade:95%; --lift:730px; --gscale:1.8; --chip-bg:var(--bg); --orb-size:820px; --orb-x:50%; --orb-y:57%; --orb-op:.78; --orb-color:#000000; --orb2-size:940px; --orb2-x:72%; --orb2-y:40%; --orb2-op:.34; --orb2-color:#2a1a5e; --orb3-size:720px; --orb3-x:34%; --orb3-y:72%; --orb3-op:.26; --orb3-color:#1b1a4a; --orb-blur:0px; --orb-spd:1; --orb-mix:normal; --o1:18s; --o2:24s; --o3:30s; --px:0px; --py:0px; --sy:0px; --scene-x:50%; /* centro horizontal de la escena: 50% centrado, 75% partido */ --copy-w:1180px; --logo-t:.60; /* cuanta caja ocupa la tinta de cada logo, ya normalizada */ /* Curvas. Las de serie de CSS son flojas y se notan sosas. --ease-out para lo que entra, --ease-move para lo que se desplaza en pantalla. Nunca ease-in en interfaz: empieza lento justo cuando el ojo mira. */ --ease:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.23,1,.32,1); --ease-move:cubic-bezier(.77,0,.175,1); --stagger:.08s; position:relative;width:100%;min-height:100vh;overflow:hidden;background:var(--bg);isolation:isolate; padding:clamp(56px,7vh,104px) 24px 0; } /* ---------- escena: globo de particulas + orbitas ---------- */ .hero .scene{position:absolute;left:0;right:0;bottom:calc(var(--lift) * var(--lift-mul,1));height:1px;z-index:1; transform:translate3d(var(--px),calc(var(--py) + var(--sy)),0);will-change:transform} .hero .scene .inner{position:absolute;left:var(--scene-x);bottom:0;width:1400px;height:1px;margin-left:-700px; transform:scale(calc(var(--gscale) * var(--gscale-mul,1)));transform-origin:50% 100%} .hero .globe{position:absolute;bottom:0;left:50%;transform:translate(-50%,50%); width:580px;height:580px;pointer-events:none;z-index:2} .hero .globe canvas{width:100%;height:100%;display:block} /* ---------- orb ambiental ---------- Tres lobulos independientes. El primero es el original y manda el ambiente. Los otros dos se mezclan en `screen`, o sea SUMAN luz: sobre un fondo casi negro un color oscuro entra como un brillo tenue, no como una mancha. Cada uno se mueve con su propia curva y su propio tiempo, y por eso el conjunto nunca repite la misma pose: es lo que lo hace parecer vivo. */ /* El de delante (capa 1) va sobre la escena, que es lo que le da su papel de sombra ambiental. Los dos extra van DETRAS del globo: asi tinen el fondo sin necesidad de modo de mezcla, que obliga al compositor a releer lo que hay debajo en cada fotograma. Medido: con mezcla y desenfoque, 9 fps. */ .hero .orbs{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3} .hero .orbs-back{z-index:0} .hero .orbs[hidden]{display:none} .hero .orb{position:absolute;border-radius:50%; left:var(--x);top:var(--y);width:var(--s);height:var(--s); margin-left:calc(var(--s) / -2);margin-top:calc(var(--s) / -2); opacity:var(--o); /* La caida suave se hace con paradas de degradado, no con filter:blur(). Se ve igual de mullido y no cuesta nada por fotograma. */ background:radial-gradient(circle at 50% 50%, var(--c) 0%, color-mix(in srgb, var(--c) 72%, transparent) 20%, color-mix(in srgb, var(--c) 42%, transparent) 38%, color-mix(in srgb, var(--c) 20%, transparent) 55%, color-mix(in srgb, var(--c) 7%, transparent) 72%, transparent 90%); filter:blur(var(--b,0px)); animation:dsh-orbDrift var(--d,18s) ease-in-out infinite alternate; animation-delay:var(--dl,0s)} .hero .orb-1{--x:var(--orb-x);--y:var(--orb-y);--s:var(--orb-size);--o:var(--orb-op); --c:var(--orb-color);--d:calc(18s / var(--orb-spd,1))} /* los lobulos extra se encienden uno a uno; el display lo manda el bloque de estilos del orb, en mejoras.css */ .hero .orb-2,.hero .orb-3,.hero .orb-4,.hero .orb-5{mix-blend-mode:var(--orb-mix,normal)} .hero .orb-2{--x:var(--orb2-x);--y:var(--orb2-y);--s:var(--orb2-size);--o:var(--orb2-op); --c:var(--orb2-color);--b:var(--orb-blur,70px);--d:calc(23s / var(--orb-spd,1));--dl:-6s; animation-name:dsh-orbDrift2} .hero .orb-3{--x:var(--orb3-x);--y:var(--orb3-y);--s:var(--orb3-size);--o:var(--orb3-op); --c:var(--orb3-color);--b:var(--orb-blur,70px);--d:calc(31s / var(--orb-spd,1));--dl:-13s; animation-name:dsh-orbDrift3} @keyframes dsh-orbDrift{ from{transform:translate3d(-4%,-2%,0) scale(.94)} to {transform:translate3d(4%,3%,0) scale(1.08)} } @keyframes dsh-orbDrift2{ from{transform:translate3d(7%,4%,0) scale(1.10) rotate(0deg)} to {transform:translate3d(-6%,-5%,0) scale(.90) rotate(22deg)} } @keyframes dsh-orbDrift3{ from{transform:translate3d(-3%,8%,0) scale(.88)} to {transform:translate3d(5%,-7%,0) scale(1.16)} } /* ---------- copy ---------- */ .hero .copy{position:relative;z-index:6;max-width:var(--copy-w);margin:0 auto;text-align:center; display:flex;flex-direction:column;align-items:center} .hero .copy h1{ margin:0;font-family:"Montserrat Bold",Arial,sans-serif;font-stretch:112%; font-size:clamp(2.6rem,5.4vw,4.6rem);line-height:1.02;font-weight:500;letter-spacing:-.005em; text-transform:uppercase;text-wrap:balance; /* La aberracion cromatica (el "efecto 3D") viene APAGADA. El panel la vuelve a encender escribiendo la sombra entera en --ab-shadow. */ text-shadow:var(--ab-shadow,none); } .hero .copy p{margin:26px 0 0;max-width:31ch;font-size:clamp(1rem,1.35vw,1.22rem);line-height:1.5; font-weight:500;color:#d5d5dc} .hero .actions{margin-top:36px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center} .hero .cta{display:inline-flex;align-items:center;gap:15px;text-decoration:none;cursor:pointer; height:58px;padding:0 30px 0 9px;border-radius:99px;background:#fff;color:#0b0b0c; font-size:1.06rem;font-weight:600;letter-spacing:-.012em; box-shadow:0 14px 44px -16px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.5) inset; transform:translate3d(var(--mx,0px),var(--my,0px),0); transition:transform .2s var(--ease),scale .22s var(--ease-out),box-shadow .2s} .hero .cta .knob{width:40px;height:40px;flex:none;border-radius:50%;background:#0b0b0c; display:grid;place-items:center;transition:scale .22s var(--ease-out)} .hero .cta .knob svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.1; stroke-linecap:round;stroke-linejoin:round; transition:rotate var(--arrow-d,.34s) var(--ease-out)} .hero .cta:focus-visible{outline:2px solid #fff;outline-offset:4px} /* El raton solo existe donde hay raton. En tactil, un :hover se queda pegado despues del toque y el boton parece roto. */ @media (hover:hover) and (pointer:fine){ .hero .cta:hover{box-shadow:0 22px 56px -18px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.5) inset} .hero .cta:hover .knob{scale:1.06} /* la flecha apunta arriba a la derecha: el gesto de "vamos alla" */ .hero.f-arrow .cta:hover .knob svg{rotate:var(--arrow-deg,-45deg)} } /* al pulsar, el boton cede. Sin esto la interfaz no parece estar escuchando. */ .hero .cta:active{scale:.97;transition:scale .1s var(--ease-out)} .hero .notes{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px} .hero .notes li{font-size:.92rem;font-weight:500;color:#b7b7c2} /* ---------- tarjeta glass con el dashboard ---------- */ .hero .stage{position:relative;z-index:5;margin:clamp(48px,6vh,84px) auto 0;width:max-content; perspective:1600px;perspective-origin:50% 40%} .hero .glass{position:relative;padding:14px;border-radius:26px;transform-style:preserve-3d; transform:rotateX(calc(var(--rx,0deg) + var(--rx0,0deg))) rotateY(calc(var(--ry,0deg) + var(--ry0,0deg))) translate3d(var(--tx,0px),var(--ty,0px),0); transition:transform .12s linear; background:linear-gradient(180deg, rgba(255,255,255,calc(var(--glass-a) * .10)) 0%, rgba(255,255,255,calc(var(--glass-a) * .05)) 46%, rgba(255,255,255,calc(var(--glass-a) * .02)) 100%); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(135%); backdrop-filter:blur(var(--glass-blur)) saturate(135%); border:1px solid rgba(255,255,255,calc(var(--glass-a) * .20)); box-shadow:0 2px 0 rgba(255,255,255,calc(var(--glass-a) * .14)) inset, 0 60px 150px -50px rgba(0,0,0,.9); /* fundido largo: la tarjeta entera (marco, blur y borde) se disuelve hacia abajo */ -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 var(--fade), rgba(0,0,0,.955) calc(var(--fade) + 4%), rgba(0,0,0,.86) calc(var(--fade) + 9%), rgba(0,0,0,.70) calc(var(--fade) + 15%), rgba(0,0,0,.50) calc(var(--fade) + 22%), rgba(0,0,0,.30) calc(var(--fade) + 29%), rgba(0,0,0,.14) calc(var(--fade) + 36%), rgba(0,0,0,.04) calc(var(--fade) + 42%), transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 var(--fade), rgba(0,0,0,.955) calc(var(--fade) + 4%), rgba(0,0,0,.86) calc(var(--fade) + 9%), rgba(0,0,0,.70) calc(var(--fade) + 15%), rgba(0,0,0,.50) calc(var(--fade) + 22%), rgba(0,0,0,.30) calc(var(--fade) + 29%), rgba(0,0,0,.14) calc(var(--fade) + 36%), rgba(0,0,0,.04) calc(var(--fade) + 42%), transparent 100%)} .hero .glass::after{content:"";position:absolute;inset:0;border-radius:26px;pointer-events:none; background:linear-gradient(150deg,rgba(255,255,255,calc(var(--glass-a) * .12)) 0%,rgba(255,255,255,0) 36%)} .hero .dashclip{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.05)} .hero .dash{transform-origin:top left} /* deja aire por debajo para que el globo respire y se corte limpio */ .hero .tail{height:clamp(300px,34vh,430px)} @media (prefers-reduced-motion:reduce){ .hero *{animation-play-state:paused!important} .hero .glass{transition:none} } /* ---------- orbitas ---------- */ @keyframes ds-orbit-cw { from{transform:rotate(0)} to{transform:rotate(360deg)} } @keyframes ds-orbit-ccw{ from{transform:rotate(0)} to{transform:rotate(-360deg)} } .hero .ring{position:absolute;bottom:0;left:50%;transform:translate(-50%,50%);opacity:calc(var(--ring-op,1) * var(--riv,1)); width:var(--dia);height:var(--dia);border-radius:50%;border:1px solid var(--ring-line,rgba(255,255,255,.10))} .hero .arm{position:absolute;top:0;left:50%;width:64px;height:50%;margin-left:-32px;transform-origin:bottom center} .hero .spin{position:absolute;inset:0;transform-origin:bottom center;display:flex;flex-direction:column;align-items:center} .hero .anti-wrap{margin-top:-32px} .hero .chip{padding:calc(16px * var(--chip-scale,1));border-radius:50%; border:1px solid var(--chip-line,rgba(255,255,255,.10));opacity:var(--chip-op,1); background:var(--chip-bg,#1a1a1a);display:flex;position:relative;z-index:10;isolation:isolate} .hero .chip img{width:calc(32px * var(--chip-scale,1));height:calc(32px * var(--chip-scale,1)); display:block} /* ====== DASHBOARD: copiado literal del artefacto, escala nativa 2264px ====== */ .hero .dash{ position:relative;width:var(--dw,2554px);height:var(--croph,1017px);overflow:hidden; background:rgba(11,12,16,.60); font-family:Montserrat,Arial,sans-serif; color:#fff;-webkit-font-smoothing:antialiased; font-size:16px;line-height:1.3;letter-spacing:-.005em; } .hero .dash *{box-sizing:border-box} .hero .dashvp{position:absolute;left:0;top:calc(-1 * var(--croptop,0px));width:var(--dw,2554px);height:var(--dh,1017px)} .hero .dash .ar{width:1.05em;height:1.05em;flex:none;margin-left:.5em} .hero .dash .cv{width:26px;height:26px;color:#c9ccd2} /* rail */ .hero .dash .rail{position:absolute;left:0;top:0;width:78px;height:100%;z-index:4; background:rgba(8,9,13,.55);border-right:1px solid rgba(255,255,255,.06)} .hero .dash .dlogo{position:absolute;left:11px;top:12px;width:56px;height:60px;object-fit:contain;z-index:5} .hero .dash .nav{position:absolute;left:17px;width:44px;height:44px;object-fit:contain;opacity:.95;z-index:5} /* topbar */ .hero .dash .avatar{position:absolute;left:2360px;top:20px;width:60px;height:60px} .hero .dash .flag{position:absolute;left:2476px;top:43px;width:28px;height:16px} .hero .dash .tchev{position:absolute;top:38px;display:block} /* banner */ .hero .dash .banner{position:absolute;top:124px; border-radius:16px;background:rgba(5,6,8,.92);border:1px solid rgba(255,255,255,.075);overflow:hidden} .hero .dash .bart{position:absolute;right:0;top:0;object-fit:cover; -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 12%,rgba(0,0,0,.8) 26%,#000 42%); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 12%,rgba(0,0,0,.8) 26%,#000 42%)} .hero .dash .bbadge{position:absolute;left:22px;top:34px;height:30px;padding:0 13px;display:flex;align-items:center; border-radius:7px;background:#00123d;border:1px solid rgba(88,132,255,.28); font-size:13.5px;font-weight:800;letter-spacing:.085em;color:#5b8cff} .hero .dash .blogo{position:absolute;left:17px;top:78px;width:58px;height:58px;object-fit:contain} .hero .dash .btitle{position:absolute;left:93px;top:76px;margin:0;font-size:35.7px;line-height:44px; font-weight:800;letter-spacing:-.012em;color:#fff} .hero .dash .bsub{position:absolute;left:20px;top:143px;font-size:18.8px;line-height:26px;font-weight:700;color:#fff} .hero .dash .bp{position:absolute;left:20px;top:172px;margin:0;width:940px;font-size:16.5px;line-height:20px; font-weight:700;color:#98a1ae;letter-spacing:-.005em} .hero .dash .bbtn{position:absolute;left:19px;top:226px;height:47px;padding:0 22px;display:inline-flex;align-items:center; border-radius:9px;background:#2d50a3;color:#fff;font-size:20px;font-weight:700;letter-spacing:-.01em} .hero .dash .bdots{position:absolute;left:19px;display:flex;align-items:center;gap:9px} .hero .dash .bdots i{width:9px;height:9px;border-radius:9px;background:#2b2f37;display:block} .hero .dash .bdots i.on{width:26px;background:#2d50a3} /* promo cards */ .hero .dash .promo{position:absolute;border-radius:16px; background:rgba(5,6,8,.92);border:1px solid rgba(255,255,255,.075);overflow:hidden} .hero .dash .part{position:absolute;right:0;top:0;height:100%;object-fit:cover; -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 16%,#000 40%); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 16%,#000 40%)} .hero .dash .ptitle{position:absolute;left:19px;font-size:20.5px;line-height:25px;font-weight:700;color:#fff; letter-spacing:-.015em} .hero .dash .pbtn{position:absolute;left:19px;height:38px;padding:0 20px;display:inline-flex;align-items:center; border-radius:99px;background:#fff;color:#0b0c10;font-size:17px;font-weight:700} /* filtros */ .hero .dash .filters{position:absolute;left:104px;display:flex;align-items:center;gap:14px} .hero .dash .fp{height:42px;padding:0 18px;display:inline-flex;align-items:center;gap:8px;border-radius:99px; border:1px solid rgba(255,255,255,.15);font-size:17.5px;font-weight:600;color:#e9eaee;white-space:nowrap} .hero .dash .fp b{font-weight:600;font-size:15px;color:#8b909a} .hero .dash .fp.act{border-color:transparent;font-weight:800;color:#fff; background:linear-gradient(90deg,#ea2acb 0%,#b234e9 52%,#8738ed 100%); box-shadow:0 0 34px rgba(200,45,215,.38)} .hero .dash .fp.act b{color:rgba(255,255,255,.82)} .hero .dash .search{position:absolute;width:249px;height:42px;border-radius:99px; display:flex;align-items:center;gap:10px;padding:0 16px;background:rgba(20,23,26,.9); border:1px solid rgba(255,255,255,.10);color:#767c86} .hero .dash .search .sr{width:19px;height:19px;flex:none} .hero .dash .search span{font-size:17px;color:#767c86} /* tarjetas destino */ .hero .dash .c{position:absolute;overflow:visible;border-radius:14px; background:rgba(20,23,26,.88);border:1px solid rgba(255,255,255,.085)} .hero .dash .ci{position:absolute;left:23px;top:22px;width:48px;height:48px;object-fit:contain} .hero .dash .ct{position:absolute;left:87px;top:23px;right:10px;font-size:20.9px;line-height:26px;font-weight:700; color:#fff;letter-spacing:-.015em} .hero .dash .cs{margin-top:6px;font-size:13px;line-height:16px;font-weight:800;letter-spacing:.075em;color:#e0952f} .hero .dash .cs.pro{color:#a9adb5} .hero .dash .cs .ai1{background:linear-gradient(90deg,#6c87e6,#a857fe);-webkit-background-clip:text; background-clip:text;color:transparent} .hero .dash .cs .ai2{color:#e0952f} .hero .dash .cb{position:absolute;left:24px;height:42px;border-radius:9px; display:flex;align-items:center;justify-content:center;background:#272b2d; border:1px solid rgba(255,255,255,.16);font-size:18px;font-weight:600;color:#fff} .hero .dash .cb.amber{background:#241d10;border-color:rgba(240,166,60,.35)} .hero .dash .bdg{position:absolute;top:-11px;height:22px;padding:0 11px;display:flex;align-items:center; border-radius:6px;font-size:13px;font-weight:700;letter-spacing:-.01em;z-index:3;white-space:nowrap} .hero .dash .bdg.new{background:linear-gradient(90deg,#b828d6,#8936e8);color:#fff} .hero .dash .bdg.trial{background:#1d0f11;border:1px solid rgba(242,85,90,.5);color:#f2555a} .hero .dash .c.mor{border:0;overflow:visible;background:none} .hero .dash .morimg{position:absolute;left:0;top:-12px;object-fit:cover;object-position:left top} .hero .dash .c.mor .ct,.hero .dash .c.mor .bdg{z-index:2} .hero .dash .cb.mb{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34);z-index:2; backdrop-filter:blur(4px)} /* panel AI Insights */ .hero .dash .aip{position:absolute;top:524px;height:600px;border-radius:18px; background:linear-gradient(158deg,rgba(39,24,60,.94) 0%,rgba(24,17,34,.94) 46%,rgba(19,16,23,.94) 100%); border:1px solid transparent; background-origin:border-box; box-shadow:0 0 0 1px rgba(0,0,0,0) inset; overflow:hidden} .hero .dash .aip::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px; background:linear-gradient(150deg,#c026d3 0%,#7c3aed 34%,#2a2438 72%,#3a2b52 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;pointer-events:none} .hero .dash .aih{position:absolute;left:24px;top:27px;font-size:28.7px;line-height:38px;font-weight:800;letter-spacing:-.02em} .hero .dash .ais{position:absolute;left:24px;top:68px;font-size:15px;line-height:20px;font-weight:500;color:#9aa3b2} .hero .dash .aisp{position:absolute;left:422px;top:36px;width:52px;height:52px;object-fit:contain} .hero .dash .aii{position:absolute;left:24px;height:80px;border-radius:12px; background:#1b1829;border:1px solid rgba(255,255,255,.075); display:flex;align-items:center;padding:0 20px 0 12px;overflow:hidden} .hero .dash .aii img{width:60px;height:60px;object-fit:contain;flex:none} .hero .dash .ail{margin-left:9px;font-size:20px;line-height:25px;font-weight:700;letter-spacing:-.015em} .hero .dash .aib{margin-left:auto;height:36px;width:96px;border-radius:8px;display:flex;align-items:center; justify-content:center;background:#6c757d;font-size:17px;font-weight:600;color:#fff} .hero .dash .aib .ar{width:15px;height:15px;margin-left:6px} .hero .dash .beta{position:absolute;right:-24px;top:6px;width:86px;transform:rotate(45deg); background:linear-gradient(90deg,#f0a63c,#e0762e);color:#3a1c00;font-size:11px;font-weight:800; letter-spacing:.08em;text-align:center;line-height:17px} /* ========================================================================== MEJORAS. Cada bloque se enciende con una clase en .hero y se apaga quitandola. El panel de tweaks pone y quita esas clases. Nada de esto es obligatorio. ========================================================================== */ /* --- 1. Velo tras el texto ------------------------------------------------- Los logos en orbita pasan por detras del parrafo. El verde de Sheets sobre texto gris rompe el contraste. Un velo radial fija el fondo bajo el texto sin tapar la escena. Se mide contra el fotograma mas brillante, no el fijo. */ .hero .copy{position:relative} .hero.f-scrim .copy::before{ content:"";position:absolute;z-index:-1;pointer-events:none; left:50%;top:50%;translate:-50% -50%; width:min(1180px,132%);height:var(--scrim-h,128%); background:radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--bg) calc(var(--scrim,.72) * 100%), transparent) 0%, color-mix(in srgb, var(--bg) calc(var(--scrim,.72) * 62%), transparent) 48%, transparent 74%)} .hero.split.f-scrim .copy::before{left:42%;width:min(900px,150%)} /* --- 2. Los logos se apagan al pasar por detras del texto ------------------- Lo calcula hero.js y lo escribe en --dg de cada chip. Complementa al velo: el velo fija el fondo, esto quita el brillo del logo. */ .hero .chip{opacity:calc(var(--chip-op,1) * var(--dg,1) * var(--iv,1));transition:opacity .3s linear} /* --- 3. Grano --------------------------------------------------------------- El orb es un degradado enorme y muy oscuro: en pantallas de 8 bits aparecen bandas. El grano las rompe. Estatico, no animado: cero coste por fotograma. */ .hero .grain{position:absolute;inset:0;z-index:8;pointer-events:none;display:none; opacity:var(--grain,.055);mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")} .hero.f-grain .grain{display:block} /* --- 4. Viñeta -------------------------------------------------------------- Aqui lo interesante vive en los bordes: las bolas de los destinos. Una viñeta normal se las come. Esta se queda transparente hasta el 58% y solo cierra las esquinas, que es donde no hay nada que mirar. */ .hero .vig{position:absolute;inset:0;z-index:4;pointer-events:none;display:none; opacity:var(--vig,.38); background:radial-gradient(ellipse 88% 78% at 50% 42%, transparent 58%, color-mix(in srgb, var(--bg) 55%, transparent) 82%, color-mix(in srgb, var(--bg) 92%, transparent) 100%)} .hero.f-vig .vig{display:block} /* --- 5. Entrada escalonada -------------------------------------------------- El relleno es `backwards`, no `both`: con `both` el elemento se queda con el fotograma final pegado, y si la animacion no llega a correr (pestana en segundo plano, navegador raro) el titular se queda invisible para siempre. Con `backwards` el estado de reposo es el natural, o sea visible. */ @keyframes dsh-dsRise{from{opacity:0;translate:0 var(--rv-y,20px)} to{opacity:1;translate:0 0}} .hero.f-reveal:not(.is-intro) .rv{animation:dsh-dsRise var(--rv-d,.85s) var(--ease) var(--rv-delay,0s) backwards} /* el retardo vive fuera de f-reveal para que la intro lo pueda reutilizar */ .hero .rv-1{--rv-delay:calc(0 * var(--stagger))} .hero .rv-2{--rv-delay:calc(1 * var(--stagger))} .hero .rv-3{--rv-delay:calc(2 * var(--stagger))} .hero .rv-4{--rv-delay:calc(3 * var(--stagger))} .hero .rv-5{--rv-delay:calc(4 * var(--stagger));--rv-y:34px;--rv-d:1.1s} /* --- 7. El logo dice su nombre --------------------------------------------- Convierte la decoracion en informacion: cada bola es un destino real. Se usa `scale:` y no `transform:` porque el chip ya tiene una animacion de rotacion sobre `transform` y una animacion siempre gana. */ .hero .chip::after{content:attr(data-name);position:absolute;left:50%;top:calc(100% + 12px); translate:-50% 0;padding:6px 11px;border-radius:9px;white-space:nowrap; font:600 13px/1 Montserrat,Arial,sans-serif;letter-spacing:-.01em; color:#0d0d0d;background:#fff;box-shadow:0 10px 30px -10px rgba(0,0,0,.9); opacity:0;pointer-events:none;transition:opacity .18s linear} .hero.f-chipname .chip{transition:scale .28s var(--ease),opacity .3s linear;cursor:default} /* al pasar el raton la bola vuelve a plena luz aunque estuviera apagada por tapar el texto: una etiqueta a media tinta no se lee. El !important de la hoja gana al valor en linea que escribe el JS, que no lleva !important. */ .hero.f-chipname .chip:hover{scale:1.16;z-index:30;--dg:1!important} .hero.f-chipname .chip:hover::after{opacity:1} /* !important obligatorio: la animacion viene en el atributo style de cada .spin y de cada .chip, y una declaracion en linea gana a cualquier hoja de estilo. */ .hero.f-chipname .chip:hover, .hero.f-chipname .spin:has(.chip:hover){animation-play-state:paused!important} .hero:not(.f-chipname) .chip::after{content:none} /* --- 8. Halo del color del propio logo ------------------------------------- --glow lo calcula el generador leyendo el color dominante de cada PNG. */ .hero.f-chipglow .chip{ box-shadow:0 0 var(--glow-r,36px) -8px color-mix(in srgb, var(--glow,#fff) var(--glow-a,60%), transparent)} /* --- 9/10. Pildora y segundo boton ------------------------------------------ */ .hero .eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 22px; height:34px;padding:0 15px 0 12px;border-radius:99px; font-size:.875rem;font-weight:600;letter-spacing:-.005em;color:#e8e8ee; background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13)} .hero .eyebrow b{font-weight:700;color:#fff} .hero .eyebrow .dot{width:7px;height:7px;border-radius:50%;flex:none; background:linear-gradient(90deg,#0cd4fe,#f12bcc)} .hero .eyebrow[hidden],.hero .cta2[hidden]{display:none} .hero .cta2{display:inline-flex;align-items:center;gap:9px;text-decoration:none;cursor:pointer; height:58px;padding:0 24px;border-radius:99px;color:#e8e8ee; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16); font-size:1.02rem;font-weight:600;letter-spacing:-.012em; transition:background .2s,border-color .2s} .hero .cta2:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.3);color:#fff} .hero .cta2:focus-visible{outline:2px solid #fff;outline-offset:4px} /* --- 14. Modo calma: nada se mueve ------------------------------------------ */ .hero.f-calm *,.hero.f-calm{animation:none!important;transition:none!important} .hero.f-calm .rv{opacity:1!important;translate:0 0!important} /* Sin movimiento por preferencia del sistema: la entrada NO se puede quedar congelada en opacidad 0, asi que se desactiva entera. */ @media (prefers-reduced-motion:reduce){ .hero .rv{animation:none!important;opacity:1!important;translate:0 0!important} } /* ========================================================================== VERSION PARTIDA: texto a un lado, escena y producto al otro. ========================================================================== */ .hero.split{padding:0} .hero .wrap{position:relative;z-index:6;margin:0 auto; max-width:var(--split-max,1580px);min-height:100vh; display:grid;grid-template-columns:var(--split-ratio,44%) 1fr; gap:var(--split-gap,40px);align-items:var(--split-align,center); padding:clamp(40px,6vh,96px) clamp(20px,3.6vw,60px) 0} .hero.split .copy{text-align:left;align-items:flex-start;margin:0;max-width:none;z-index:6} .hero.split .copy h1{font-size:clamp(2.3rem,3.9vw,3.9rem)} .hero.split .copy p{max-width:40ch;margin-top:22px} .hero.split .actions{justify-content:flex-start;margin-top:32px} .hero.split .notes{align-items:flex-start} .hero.split .col-visual{position:relative;z-index:5;display:flex; justify-content:var(--split-vjust,center);align-items:center;min-width:0} .hero.split .stage{margin:0} .hero.split .tail{display:none} .hero.split.flip .wrap{grid-template-columns:1fr var(--split-ratio,44%)} .hero.split.flip .col-copy{order:2} .hero.split.flip .col-visual{order:1} @media (max-width:1000px){ .hero.split .wrap{grid-template-columns:1fr;gap:32px;padding-top:clamp(40px,7vh,80px)} .hero.split.flip .wrap{grid-template-columns:1fr} .hero.split.flip .col-copy{order:1} .hero.split.flip .col-visual{order:2} .hero.split .copy{text-align:center;align-items:center} .hero.split .actions,.hero.split .notes{align-items:center;justify-content:center} .hero.split .copy p{max-width:34ch} } /* --- 6. Igualar el tamano optico de los logos ------------------------------- Cada PNG trae el logo a su aire: la tinta ocupaba entre el 43% y el 85% de la caja, y algunos quedaban hasta un 22% por debajo del centro. El generador mide la caja real de tinta de cada imagen y escribe --lm (peso optico) y --lx/--ly (correccion del centro). Aqui solo se aplican. Primero se centra y despues se escala, por eso translate va a la derecha. */ .hero.f-logoeq .chip img{ transform:scale(calc(var(--logo-t,.60) / var(--lm,.6))) translate(var(--lx,0%),var(--ly,0%))} /* --- 12. Fuera de pantalla no se dibuja ------------------------------------ */ /* Fuera de pantalla no se anima NADA. Cada capa que sigue girando cuesta fotogramas que nadie ve. El !important es obligatorio: los .spin y los .chip llevan su animacion en el atributo style, y lo de linea gana. */ .hero.is-paused .spin, .hero.is-paused .chip, .hero.is-paused .orb, .hero.is-paused .bg-beam, .hero.is-paused .bg-rays, .hero.is-paused .grain, .hero.is-paused .bg-wave i, .hero.is-paused .hl-cur{animation-play-state:paused!important} /* --- Movil: la escena se encoge sola ----------------------------------------- El panel escribe --gscale y --lift en linea, y lo de linea gana a cualquier media query. Por eso el ajuste de pantalla pequena va en un MULTIPLICADOR aparte, que el panel no toca nunca. */ @media (max-width:860px){ .hero{--gscale-mul:.62;--lift-mul:.66} .hero .copy p{max-width:28ch} } @media (max-width:520px){ .hero{--gscale-mul:.48;--lift-mul:.56} .hero .copy h1{font-size:clamp(2rem,10vw,2.8rem)} } /* En movil la tarjeta se ve de frente: el giro fijo la deja torcida y se lee peor. La regla apunta a .glass, no a .hero, porque el panel escribe --ry0 en linea sobre .hero y lo heredado pierde contra una declaracion propia. */ @media (max-width:1000px){ .hero.split .glass{--ry0:0deg;--rx0:0deg} } /* ========================================================================== INTRO. Todo nace centrado, crece el globo, entran los anillos y sus logos escalonados, sube el mockup, y al final el conjunto se aparta a la derecha mientras el texto entra por la izquierda. El desplazamiento va en `translate` (propiedad suelta), no en `transform`: `.scene .inner` ya usa transform para su escala, y `.glass` para el giro 3D. Las dos propiedades se combinan y cada una se puede animar por su cuenta. ========================================================================== */ /* Al poner is-intro, los elementos pasan de su estado normal (visibles) al de partida (ocultos) POR UNA TRANSICION: se ve como el titular se desvanece, o sea un fotograma del resultado final antes de empezar. Con esta clase puesta durante un solo fotograma, el estado de partida entra de golpe. */ .hero.sin-tr,.hero.sin-tr *{transition:none!important} /* --- estado de partida --- */ .hero.is-intro .ring{ --riv:0; scale:.9; --in-ring-dl:calc(var(--ri,0) * var(--ring-stagger,90ms)); transition:opacity var(--in-ring-d,.75s) var(--ease-out) var(--in-ring-dl,0s), scale var(--in-ring-d,.75s) var(--ease-out) var(--in-ring-dl,0s)} .hero.is-intro .chip{ --iv:0; scale:.6; --in-chip-dl:calc(var(--ci,0) * var(--chip-stagger,45ms)); transition:opacity var(--in-chip-d,.6s) var(--ease-out) var(--in-chip-dl,0s), scale var(--in-chip-d,.6s) var(--ease-out) var(--in-chip-dl,0s)} .hero.is-intro .stage{ opacity:0; translate:var(--stage-dx,0px) 30px; transition:opacity var(--in-dash-d,.8s) var(--ease-out), translate var(--in-dash-d,.8s) var(--ease-out)} .hero.is-intro .scene .inner{ translate:var(--scene-dx,0px) 0} /* el estado de partida del texto lo pone ahora el bloque de "entrada del texto" */ /* --- paso a paso --- */ .hero.is-intro.step-rings .ring{--riv:1; scale:1} .hero.is-intro.step-chips .chip{--iv:1; scale:1} .hero.is-intro.step-dash .stage{opacity:1; translate:var(--stage-dx,0px) 0} /* el gran desplazamiento: curva de ida y vuelta, que es lo que pide algo que se mueve DENTRO de la pantalla en vez de entrar o salir de ella */ .hero.is-intro.step-move .stage{ translate:0 0; transition:translate var(--in-move-d,1s) var(--ease-move)} .hero.is-intro.step-move .scene .inner{ translate:0 0; transition:translate var(--in-move-d,1s) var(--ease-move)} /* Sin movimiento por preferencia del sistema: la intro se salta entera. El contenido aparece, sin desplazamientos. */ @media (prefers-reduced-motion:reduce){ .hero.is-intro .ring,.hero.is-intro .chip,.hero.is-intro .stage,.hero.is-intro .copy .rv{ --riv:1;--iv:1;opacity:1;scale:1;translate:0 0;transition:none} .hero.is-intro .scene .inner{translate:0 0} } /* ========================================================================== TITULAR: la palabra que rota + el grafico que se convierte en REPORTING. ========================================================================== */ /* El titular pasa a ser una fila de palabras, como la raiz del componente: flex-wrap, alineadas al centro vertical, con separacion propia. (Tailwind: flex flex-wrap items-center gap-x-3 gap-y-1) */ .hero .copy h1.hl{display:flex;flex-wrap:wrap;align-items:center; column-gap:.30em;row-gap:.06em;justify-content:center} .hero.split .copy h1.hl{justify-content:flex-start} /* columna de texto centrada en movil. Debajo de 1000 px el reparto en dos columnas desaparece y el parrafo, el boton y las notas ya se centran. El titular no: es un flex propio y el `text-align` del padre no lo mueve. Aqui manda `justify-content`. La regla va DETRAS de la de escritorio a proposito: las dos tienen la misma especificidad y gana la ultima. Cubre los dos anchos que revisa la usuaria, 767 px y 479 px. Medido antes: a 900 px el parrafo caia centrado y el titular 680 px a la izquierda. */ @media (max-width:1000px){ .hero.split .copy h1.hl{justify-content:center} } .hero .hl-w{white-space:nowrap} /* MADE y EASY van SIEMPRE en la misma linea, a cualquier ancho. El titular es un flex con envoltura: cada palabra es un elemento y el navegador puede cortar entre dos cualesquiera. Medido: entre 590 y 770 px de columna, EASY se caia sola al renglon siguiente. Las dos palabras entran ahora en un mismo elemento flexible, asi que el corte no cabe entre ellas. El hueco propio vale lo mismo que el column-gap del titular: no se mueve nada. El par lo crea hero-wf.js (`montaPalabra`), porque en Webflow el titular son cuatro atributos de texto sueltos. Mismos valores que `.hl-pair` de hero.css. */ .hero .hl-pair{display:inline-flex;flex:none;align-items:center; column-gap:.30em;white-space:nowrap} /* --- la palabra que rota (TypewriterLoop) --- */ .hero .hl-morph{position:relative;display:inline-flex;align-items:center} /* La palabra que rota, siempre sola en su renglon. Sin esto, al pasar de CLIENT a ECOMMERCE la linea cambia de ancho y arrastra a las palabras vecinas: el titular entero da un salto. Estos dos elementos de ancho completo la aislan. */ .hero .hl-brk{display:none;flex-basis:100%;width:100%;height:0} .hero.f-solo .hl-brk{display:block} /* motion.div: overflow-hidden whitespace-nowrap relative, ancho 0 -> auto */ .hero .hl-box{position:relative;display:inline-block;overflow:hidden;white-space:nowrap; width:0;opacity:0; transition:width var(--tw-dur,.8s) cubic-bezier(.42,0,.58,1), opacity var(--tw-dur,.8s) cubic-bezier(.42,0,.58,1)} /* la caja de fondo: absolute inset-0, degradado a la derecha */ .hero .hl-bg{position:absolute;inset:0;pointer-events:none} /* el texto: degradado recortado a la letra, con el pr-1 del original */ .hero .hl-txt{position:relative;padding-right:.25rem; -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:none} /* el clon que sirve para medir el ancho de destino; nunca se ve */ .hero .hl-meas{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none; white-space:nowrap;padding-right:.25rem} /* el cursor: w-[4px] h-[1.10em], parpadeo de 1 a .5 en 0.8s, ida y vuelta */ .hero .hl-cur{display:inline-block;width:4px;height:1.10em;flex:none;margin-left:.04em; animation:dsh-hlCursor .8s ease-in-out infinite alternate} @keyframes dsh-hlCursor{from{opacity:1} to{opacity:.5}} .hero.f-nocursor .hl-cur{display:none} /* --- REPORTING: seis maneras de que la palabra llegue -------------------- Todas comparten la misma mecanica: primero aparece algo, y despues cada letra sube desde donde estaba. Lo que cambia es ese "algo". barras nueve barras, una por letra, con su linea y sus puntos linea solo la linea: la palabra sale detras de ella puntos solo el punto de cada dato escaneo una barra de luz recorre el hueco y lo deja escrito carga una barra fina se llena y entrega la palabra cifras cada hueco pasa numeros hasta que cuaja en su letra ninguna la palabra y ya --ef-c1 y --ef-c2 son los dos colores del efecto. */ .hero .rep{position:relative;display:inline-block;white-space:nowrap; perspective:700px; /* lo pide la variante persiana */ --ef-c1:#0cd4fe; --ef-c2:#f12bcc} .hero .rep-l{position:relative;display:inline-block; --rep-dl:calc(var(--li,0) * var(--rep-stagger,55ms)); --rep-dl2:calc(var(--li,0) * var(--rep-stagger2,42ms))} .hero .rep-l > b{font-weight:inherit;display:inline-block; opacity:0;translate:0 .10em; /* transform y text-shadow los piden persiana y glitch */ transition:opacity .5s var(--ease-out) var(--rep-dl2,0s), translate .5s var(--ease-out) var(--rep-dl2,0s), transform .5s var(--ease-out) var(--rep-dl2,0s), text-shadow .3s linear var(--rep-dl2,0s)} .hero.step-word .rep-l > b{opacity:1;translate:0 0} /* Al repetir el efecto hay que devolver las letras a cero SIN transicion; si no, se quedan a medio desvanecer y la siguiente pasada arranca con la palabra ya puesta. Dura un fotograma. */ .hero .rep.sin-transicion,.hero .rep.sin-transicion *{transition:none!important} /* --- barras --- */ .hero .rep-l > i{position:absolute;left:50%;bottom:.15em;width:58%;height:var(--bh,.5em); translate:-50% 0;transform:scaleY(0);transform-origin:50% 100%;opacity:0; border-radius:.07em .07em .02em .02em; background:linear-gradient(180deg,var(--ef-c1) 0%,var(--ef-c2) 100%); transition:transform var(--rep-d,.6s) var(--ease-out) var(--rep-dl,0s), opacity .28s linear var(--rep-dl,0s)} .hero.ef-barras.step-chart .rep-l > i{transform:scaleY(1);opacity:1} .hero.ef-barras.step-word .rep-l > i{transform:scaleY(0);opacity:0; transition:transform .42s var(--ease-out) var(--rep-dl2,0s), opacity .3s linear var(--rep-dl2,0s)} /* --- linea y puntos --- */ .hero .rep-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible; pointer-events:none;opacity:0;transition:opacity .35s linear} .hero .rep-line polyline{fill:none;stroke:var(--ef-c1);stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400); transition:stroke-dashoffset var(--line-d,.72s) var(--ease-out) .18s} .hero .rep-line circle{fill:var(--ef-c1);transform:scale(0);transform-origin:center; transform-box:fill-box; transition:transform .3s var(--ease-out) calc(.22s + var(--li,0) * var(--rep-stagger,55ms))} .hero.ef-barras.step-chart .rep-line, .hero.ef-linea.step-chart .rep-line, .hero.ef-puntos.step-chart .rep-line{opacity:1} .hero.ef-barras.step-chart .rep-line polyline, .hero.ef-linea.step-chart .rep-line polyline{stroke-dashoffset:0} .hero.ef-barras.step-chart .rep-line circle, .hero.ef-puntos.step-chart .rep-line circle{transform:scale(1)} .hero.ef-linea .rep-line circle{display:none} .hero.ef-puntos .rep-line polyline{display:none} .hero.step-word .rep-line{opacity:0;transition:opacity .3s linear} /* --- escaneo: una barra de luz cruza y deja la palabra escrita --- El recorrido lo mueve la API de animaciones, no una transicion: el elemento viene de display:none y una transicion no tiene con que interpolar, asi que pegaba un salto. Medido. */ .hero .rep-scan{position:absolute;top:-.10em;bottom:.08em;left:0;width:.085em;display:none; border-radius:99px;opacity:0; background:linear-gradient(180deg,transparent,var(--ef-c1) 22%,var(--ef-c1) 78%,transparent); box-shadow:0 0 2.2em .35em color-mix(in srgb, var(--ef-c1) 42%, transparent)} .hero.ef-escaneo .rep-scan{display:block} /* --- carga: una barra fina se llena y entrega la palabra --- El relleno es un hijo de verdad, no un ::after: a un pseudo-elemento no se le puede dar una animacion desde JavaScript. */ .hero .rep-load{position:absolute;left:0;right:0;bottom:.03em;height:.04em;display:none; border-radius:99px;overflow:hidden;opacity:0; background:color-mix(in srgb, var(--ef-c1) 22%, transparent)} .hero .rep-load > i{position:absolute;inset:0;transform:scaleX(0);transform-origin:0 50%; border-radius:99px;background:linear-gradient(90deg,var(--ef-c1),var(--ef-c2))} .hero.ef-carga .rep-load{display:block} /* --- cifras: cada hueco pasa numeros hasta que cuaja en su letra --- */ .hero .rep-l > u{position:absolute;left:0;right:0;top:0;display:none;text-align:center; font-style:normal;font-size:.88em;letter-spacing:-.03em; font-variant-numeric:tabular-nums;color:var(--ef-c1);opacity:0; transition:opacity .18s linear} .hero.ef-cifras .rep-l > u{display:block} .hero.ef-cifras.step-chart .rep-l > u{opacity:.85} .hero.ef-cifras.step-word .rep-l > u{opacity:0;transition:opacity .16s linear var(--rep-dl2,0s)} /* --- arranque: nada se ve hasta que el JavaScript toma el mando ----------- El documento pesa 766 KB y el navegador puede pintar antes de llegar a los scripts del final. Sin esto se ve medio fotograma de la pagina sin montar. La animacion de guardia es el seguro: si el JavaScript no llegara nunca, a los cinco segundos aparece todo igualmente. */ .hero.hero-boot .scene,.hero.hero-boot .copy,.hero.hero-boot .stage{ opacity:0;animation:dsh-bootGuard 1ms linear 5s forwards} @keyframes dsh-bootGuard{to{opacity:1}} /* solo para lectores de pantalla: la palabra entera, sin trocear */ .hero .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* Sin movimiento por preferencia del sistema: se ve el resultado, sin viaje. */ @media (prefers-reduced-motion:reduce){ .hero .rep-l > b{opacity:1!important;translate:0 0!important;transition:none} .hero .rep-l > i,.hero .rep-line{display:none} .hero .hl-cur{animation:none} } /* Sin movimiento por preferencia del sistema: la palabra aparece, sin abrirse. */ @media (prefers-reduced-motion:reduce){ .hero .hl-box{transition:none} } /* ========================================================================== FONDO: cinco capas mas, cada una con su interruptor. Todas son degradados de CSS: ni imagenes, ni lienzos, ni filtros de desenfoque. Un `filter:blur()` sobre una capa a pantalla completa se come los fotogramas; un degradado con paradas suaves se ve igual y no cuesta. ========================================================================== */ /* --- rejilla: lineas o puntos, con la mascara que los apaga hacia el borde --- */ .hero .bg-grid{position:absolute;inset:0;z-index:0;pointer-events:none;display:none; opacity:var(--grid-a,.10); background-image: linear-gradient(to right, var(--grid-c,#5b7bbf) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-c,#5b7bbf) 1px, transparent 1px); background-size:var(--grid-s,64px) var(--grid-s,64px); -webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 45%, #000 18%, transparent 80%); mask-image:radial-gradient(ellipse 72% 62% at 50% 45%, #000 18%, transparent 80%)} .hero.f-grid .bg-grid{display:block} .hero.grid-puntos .bg-grid{ background-image:radial-gradient(var(--grid-c,#5b7bbf) 1.3px, transparent 1.4px); background-size:var(--grid-s,64px) var(--grid-s,64px)} /* --- haz de luz: un abanico ancho que da una vuelta muy despacio --- */ .hero .bg-beam{position:absolute;left:50%;top:50%; width:var(--beam-s,190vmax);height:var(--beam-s,190vmax); margin-left:calc(var(--beam-s,190vmax) / -2);margin-top:calc(var(--beam-s,190vmax) / -2); z-index:0;pointer-events:none;display:none;opacity:var(--beam-a,.18); background:conic-gradient(from 0deg at 50% 50%, transparent 0deg, color-mix(in srgb, var(--beam-c,#6b46ff) 26%, transparent) 13deg, var(--beam-c,#6b46ff) 30deg, color-mix(in srgb, var(--beam-c,#6b46ff) 26%, transparent) 47deg, transparent 62deg, transparent 176deg, color-mix(in srgb, var(--beam-c,#6b46ff) 26%, transparent) 190deg, var(--beam-c,#6b46ff) 208deg, color-mix(in srgb, var(--beam-c,#6b46ff) 26%, transparent) 226deg, transparent 242deg, transparent 360deg); -webkit-mask-image:radial-gradient(circle at 50% 50%, transparent 6%, #000 30%, #000 52%, transparent 74%); mask-image:radial-gradient(circle at 50% 50%, transparent 6%, #000 30%, #000 52%, transparent 74%); animation:dsh-bgSpin var(--beam-d,52s) linear infinite} .hero.f-beam .bg-beam{display:block} @keyframes dsh-bgSpin{to{transform:rotate(360deg)}} /* --- rayos: muchos radios finos, como luz entre persianas --- */ .hero .bg-rays{position:absolute;left:50%;top:50%; width:var(--ray-s,170vmax);height:var(--ray-s,170vmax); margin-left:calc(var(--ray-s,170vmax) / -2);margin-top:calc(var(--ray-s,170vmax) / -2); z-index:0;pointer-events:none;display:none;opacity:var(--ray-a,.10); background:repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg, var(--ray-c,#8fb6ff) var(--ray-w,.5deg), transparent calc(var(--ray-w,.5deg) * 2), transparent var(--ray-step,10deg)); -webkit-mask-image:radial-gradient(circle at 50% 50%, transparent 8%, #000 34%, transparent 68%); mask-image:radial-gradient(circle at 50% 50%, transparent 8%, #000 34%, transparent 68%); animation:dsh-bgSpin var(--ray-d,120s) linear infinite} .hero.f-rays .bg-rays{display:block} /* --- luz del cursor: una lampara suave que sigue al raton --- */ .hero .bg-spot{position:absolute;left:0;top:0; width:var(--spot-s,540px);height:var(--spot-s,540px); margin-left:calc(var(--spot-s,540px) / -2);margin-top:calc(var(--spot-s,540px) / -2); translate:var(--spot-x,50%) var(--spot-y,45%); z-index:4;pointer-events:none;display:none;opacity:var(--spot-a,.13); background:radial-gradient(circle at 50% 50%, var(--spot-c,#9fc3ff) 0%, color-mix(in srgb, var(--spot-c,#9fc3ff) 34%, transparent) 32%, transparent 68%); transition:opacity .3s linear} .hero.f-spot .bg-spot{display:block} /* --- borde difuminado: el hero se funde arriba y abajo con lo que venga --- */ .hero .bg-edge{position:absolute;inset:0;z-index:4;pointer-events:none;display:none; opacity:var(--edge-a,1); background:linear-gradient(to bottom, var(--bg) 0%, transparent var(--edge-t,10%), transparent calc(100% - var(--edge-t,10%)), var(--bg) 100%)} .hero.f-edge .bg-edge{display:block} /* --- el grano puede moverse: cambia de posicion a saltos, sin interpolar --- */ .hero.f-grainmove .grain{animation:dsh-granoSalta var(--grain-d,.8s) steps(1) infinite} @keyframes dsh-granoSalta{ 0% {background-position:0 0} 20% {background-position:-31px 13px} 40% {background-position:19px -27px} 60% {background-position:-13px -19px} 80% {background-position:27px 9px} 100%{background-position:0 0} } /* ========================================================================== ENTRADA DEL TEXTO: seis maneras. El estado de partida cambia; el de llegada es siempre el mismo, o sea el texto en su sitio. ========================================================================== */ .hero{--tin-x:0px; --tin-y:22px} .hero.is-intro .copy .rv, .hero.f-reveal:not(.is-intro) .copy .rv{ /* la lista tiene que nombrar TODAS las propiedades que use algun estilo de entrada; la que falte, salta de golpe en vez de animarse */ transition:opacity var(--in-copy-d,.7s) var(--ease-out) var(--rv-delay,0s), translate var(--in-copy-d,.7s) var(--ease-out) var(--rv-delay,0s), filter var(--in-copy-d,.7s) var(--ease-out) var(--rv-delay,0s), scale var(--in-copy-d,.7s) var(--ease-out) var(--rv-delay,0s), transform var(--in-copy-d,.7s) var(--ease-out) var(--rv-delay,0s), -webkit-mask-position var(--in-copy-d,.7s) var(--ease-out) var(--rv-delay,0s), mask-position var(--in-copy-d,.7s) var(--ease-out) var(--rv-delay,0s), clip-path var(--in-copy-d,.7s) var(--ease-out) var(--rv-delay,0s)} .hero.is-intro.tin-desplazar .copy .rv{opacity:0;translate:var(--tin-x) var(--tin-y)} .hero.is-intro.tin-desenfoque .copy .rv{opacity:0;filter:blur(var(--tin-blur,12px)); translate:calc(var(--tin-x) * .45) calc(var(--tin-y) * .45)} .hero.is-intro.tin-escala .copy .rv{opacity:0;scale:.94} /* la cortina abre por arriba y por los lados para no cortar las barras de REPORTING */ .hero.is-intro.tin-cortina .copy .rv{opacity:1;clip-path:inset(-45% -6% 100% -3%)} .hero.is-intro.tin-ninguna .copy .rv{opacity:1} .hero.is-intro.step-copy .copy .rv{ opacity:1;translate:0 0;filter:none;scale:1;clip-path:inset(-45% -6% -12% -3%)} /* --- por letras: solo el titular, letra a letra --- */ .hero .hl-l{display:inline-block} /* el titular se anima letra a letra; el resto del texto entra desplazandose, si no el parrafo y el boton aparecerian de golpe */ .hero.is-intro.tin-letras .copy .rv{opacity:0;translate:0 var(--tin-y)} /* la llegada tiene que llevar la variante delante: si no, la regla de partida gana por especificidad y el parrafo se queda invisible */ .hero.is-intro.tin-letras.step-copy .copy .rv{opacity:1;translate:0 0} .hero.is-intro.tin-letras .copy h1{opacity:1!important;translate:0 0!important;filter:none!important} .hero.is-intro.tin-letras .copy h1 .hl-l{opacity:0;translate:0 var(--tin-y); transition:opacity .5s var(--ease-out) calc(var(--rv-delay,0s) + var(--li,0) * var(--tin-ls,30ms)), translate .5s var(--ease-out) calc(var(--rv-delay,0s) + var(--li,0) * var(--tin-ls,30ms))} .hero.is-intro.tin-letras.step-copy .copy h1 .hl-l{opacity:1;translate:0 0} @media (prefers-reduced-motion:reduce){ .hero.is-intro .copy .rv,.hero.is-intro .copy h1 .hl-l{ opacity:1!important;translate:0 0!important;filter:none!important;scale:1!important; clip-path:none!important;transition:none!important} } /* ========================================================================== MAS EFECTOS. Todo apagado de serie y todo con su interruptor. ========================================================================== */ /* --- fondo: ondas concentricas que salen del centro --- */ .hero .bg-wave{position:absolute;left:var(--wave-x,50%);top:var(--wave-y,50%); width:0;height:0;z-index:0;pointer-events:none;display:none} .hero .bg-wave i{position:absolute;left:50%;top:50%; width:var(--wave-s,90vmax);height:var(--wave-s,90vmax); margin-left:calc(var(--wave-s,90vmax) / -2);margin-top:calc(var(--wave-s,90vmax) / -2); border-radius:50%;border:1px solid var(--wave-c,#5b7bbf);opacity:0; animation:dsh-bgOnda var(--wave-d,7s) linear infinite} .hero .bg-wave i:nth-child(2){animation-delay:calc(var(--wave-d,7s) / -3)} .hero .bg-wave i:nth-child(3){animation-delay:calc(var(--wave-d,7s) / -1.5)} @keyframes dsh-bgOnda{ 0% {transform:scale(.05);opacity:0} 14% {opacity:var(--wave-a,.16)} 100%{transform:scale(1);opacity:0} } .hero.f-wave .bg-wave{display:block} /* --- fondo: brillo en una esquina --- */ .hero .bg-corner{position:absolute;inset:0;z-index:0;pointer-events:none;display:none; opacity:var(--corner-a,.20); background:radial-gradient(ellipse 62% 58% at var(--corner-p,0% 0%), var(--corner-c,#6b46ff) 0%, color-mix(in srgb, var(--corner-c,#6b46ff) 30%, transparent) 32%, transparent 70%)} .hero.f-corner .bg-corner{display:block} /* ========================================================================== ENTRADA DEL TEXTO: dos maneras mas. ========================================================================== */ /* mascara: un barrido suave de izquierda a derecha. La mascara mide el triple que el elemento: en 0% la parte transparente lo tapa entero, en 100% la parte opaca lo descubre. */ .hero.is-intro.tin-mascara .copy .rv{opacity:1; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 33%,#000 100%); mask-image:linear-gradient(90deg,transparent 0%,#000 33%,#000 100%); -webkit-mask-size:300% 100%;mask-size:300% 100%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:0% 0;mask-position:0% 0} .hero.is-intro.tin-mascara.step-copy .copy .rv{ -webkit-mask-position:100% 0;mask-position:100% 0} /* giro: el bloque se levanta como una tapa */ .hero.is-intro.tin-giro .copy .rv{opacity:0; transform:perspective(900px) rotateX(-24deg);transform-origin:50% 100%} .hero.is-intro.tin-giro.step-copy .copy .rv{opacity:1;transform:perspective(900px) rotateX(0deg)} /* ========================================================================== REPORTING: cinco maneras mas de que llegue la palabra. ========================================================================== */ /* cascada: cae desde arriba. OJO: la regla de partida de una variante tiene MAS especificidad que la de llegada (.hero.step-word .rep-l > b), asi que hay que escribir tambien la de llegada con la variante delante. Si no, la letra se queda arriba. */ .hero.ef-cascada .rep-l > b{translate:0 -.8em} .hero.ef-cascada.step-word .rep-l > b{translate:0 0} /* persiana: gira sobre su base, como las lamas de una persiana */ .hero.ef-persiana .rep-l > b{transform:rotateX(86deg);transform-origin:50% 100%} .hero.ef-persiana.step-word .rep-l > b{transform:rotateX(0deg)} /* ondas: el retardo no va de izquierda a derecha, sino en onda. --lw lo escribe el generador con el valor de la curva en esa letra. */ .hero.ef-ondas .rep-l{--rep-dl2:calc(var(--lw,0) * var(--rep-stagger2,42ms) * 9)} .hero.ef-ondas .rep-l > b{translate:0 .5em} .hero.ef-ondas.step-word .rep-l > b{translate:0 0} /* glitch: pasa simbolos y ademas descuadra el color un instante */ .hero.ef-glitch .rep-l > u{color:var(--ef-c1);font-size:.92em} .hero.ef-glitch .rep-l > b{text-shadow: calc(-1 * var(--glitch,.06em)) 0 var(--ef-c1), var(--glitch,.06em) 0 var(--ef-c2)} .hero.ef-glitch.step-word .rep-l > b{text-shadow:none} .hero.ef-glitch .rep-l > u, .hero.ef-cifras .rep-l > u{display:block} .hero.ef-glitch.step-chart .rep-l > u{opacity:.9} .hero.ef-glitch.step-word .rep-l > u{opacity:0;transition:opacity .16s linear var(--rep-dl2,0s)} /* maquina de escribir: la barra hace de cursor y va saltando de letra en letra */ .hero.ef-maquina .rep-scan{display:block;width:.075em} @media (prefers-reduced-motion:reduce){ .hero .bg-wave i{animation:none;display:none} .hero.is-intro.tin-mascara .copy .rv{-webkit-mask-image:none;mask-image:none} .hero.is-intro.tin-giro .copy .rv{transform:none} .hero.ef-persiana .rep-l > b,.hero.ef-cascada .rep-l > b,.hero.ef-ondas .rep-l > b{ transform:none;translate:0 0} } /* ========================================================================== ORB: seis estilos. La receta de fondo "aurora" que se lleva en 2026 es siempre la misma: varios lobulos de color que se cruzan con tiempos distintos. Lo que cambia de un estilo a otro es la FORMA de cada lobulo. Casi todos los tutoriales resuelven la suavidad con filter:blur(80px). Aqui NO: medido, un desenfoque a pantalla completa se come los fotogramas. La misma suavidad se consigue con paradas de degradado, y sale gratis. El grano va como SEGUNDA CAPA de fondo con background-blend-mode, que mezcla las capas del propio elemento y no obliga a releer lo que hay debajo. ========================================================================== */ /* cada lobulo se enciende por separado */ .hero .orb-2,.hero .orb-3,.hero .orb-4,.hero .orb-5{display:none} .hero.f-orb2 .orb-2{display:block} .hero.f-orb3 .orb-3{display:block} .hero .orb-4{--x:var(--orb4-x,22%);--y:var(--orb4-y,26%);--s:var(--orb4-size,620px); --o:var(--orb4-op,.24);--c:var(--orb4-color,#1d2f6b); --d:calc(27s / var(--orb-spd,1));--dl:-9s;animation-name:dsh-orbDrift2} .hero .orb-5{--x:var(--orb5-x,80%);--y:var(--orb5-y,78%);--s:var(--orb5-size,700px); --o:var(--orb5-op,.22);--c:var(--orb5-color,#3b1d5e); --d:calc(35s / var(--orb-spd,1));--dl:-17s;animation-name:dsh-orbDrift3} /* los dos ultimos solo tienen sentido en el estilo de malla */ .hero.orb-malla.f-orb2 .orb-4,.hero.orb-malla.f-orb2 .orb-5{display:block} /* --- granulado: el acabado de Stripe y compania --- El grano va en un ::after con la MISMA mascara que el lobulo, asi se apaga con el. Nada de background-blend-mode overlay: sobre un color oscuro lo aclara tanto que la mancha se vuelve gris y se le ve el borde. */ .hero.orb-granulado .orb::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; opacity:calc(.55 * var(--orb-grano-mix,1)); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 -0.42'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px; -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0%,#000 34%,transparent 80%); mask-image:radial-gradient(circle at 50% 50%,#000 0%,#000 34%,transparent 80%)} /* --- aurora: bandas alargadas que barren de lado --- */ .hero.orb-aurora .orb{ background:radial-gradient(ellipse 62% 20% at 50% 50%, var(--c) 0%, color-mix(in srgb, var(--c) 60%, transparent) 26%, color-mix(in srgb, var(--c) 26%, transparent) 48%, transparent 78%); animation-name:dsh-orbAurora} @keyframes dsh-orbAurora{ from{transform:translate3d(-12%,-3%,0) rotate(-9deg) scale(1.05)} to {transform:translate3d(12%,4%,0) rotate(7deg) scale(.95)} } /* --- anillo: un aro de luz en vez de una mancha --- */ .hero.orb-anillo .orb{ background:radial-gradient(circle at 50% 50%, transparent 0%, transparent 34%, color-mix(in srgb, var(--c) 45%, transparent) 46%, var(--c) 54%, color-mix(in srgb, var(--c) 40%, transparent) 64%, color-mix(in srgb, var(--c) 12%, transparent) 76%, transparent 92%)} /* --- destello: nucleo pequeno y caida muy larga, con una raya de luz --- */ .hero.orb-destello .orb{ /* la raya es una elipse muy achatada, no un degradado lineal: asi tambien se apaga por arriba y por abajo y no deja un borde recto */ background-image: radial-gradient(ellipse 58% 2.6% at 50% 50%, #ffffff 0%, var(--c) 22%, color-mix(in srgb, var(--c) 45%, transparent) 52%, transparent 88%), radial-gradient(circle at 50% 50%, #ffffff 0%, var(--c) 4%, color-mix(in srgb, var(--c) 70%, transparent) 12%, color-mix(in srgb, var(--c) 34%, transparent) 28%, color-mix(in srgb, var(--c) 12%, transparent) 52%, transparent 84%); background-size:100% 100%, 100% 100%; background-position:50% 50%, 50% 50%; background-repeat:no-repeat, no-repeat} /* --- malla: mas lobulos, mas pequenos y mas juntos --- */ .hero.orb-malla .orb{ background:radial-gradient(circle at 50% 50%, var(--c) 0%, color-mix(in srgb, var(--c) 62%, transparent) 24%, color-mix(in srgb, var(--c) 28%, transparent) 46%, transparent 76%)} /* ========================================================================== COLUMNA DE TEXTO NATIVA DE WEBFLOW (.dsh-*) En Webflow la columna de texto se construye a mano, para que se pueda traducir y editar en el Designer. Sus clases NO son las del local: local Webflow .copy -> .dsh-copy .copy h1 -> .dsh-title palabras -> .dsh-w y .dsh-w-alt parrafo -> .dsh-lead boton -> .dsh-cta (el circulo: .dsh-dot) notas -> .dsh-notes y .dsh-note El resto de la escena (globo, anillos, chips, producto, capas de fondo) lo monta el JavaScript con las clases del local, y por eso no necesita nada. Este bloque copia los MISMOS valores que el local le da a la columna de texto. Solo hay dos diferencias, las dos obligadas: - La familia es Montserrat, no Archivo ni Figtree. - El titular del local lleva `font-stretch:112%`, que Archivo si tiene y Montserrat no. Aqui no se pone: en Montserrat no haria nada. La familia va escrita en cada regla, no heredada: asi ningun `p{}`, `a{}` ni `li{}` del sitio la puede pisar. ========================================================================== */ /* --- la columna --- */ .hero .dsh-copy{position:relative;z-index:6;max-width:var(--copy-w);margin:0 auto; text-align:center;display:flex;flex-direction:column;align-items:center} /* --- el titular --- */ .hero .dsh-title{ margin:0;font-family:"Montserrat Bold",Arial,sans-serif; font-size:clamp(2.6rem,5.4vw,4.6rem);line-height:1.02;font-weight:500;letter-spacing:-.005em; text-transform:uppercase;text-wrap:balance; /* la aberracion cromatica viene APAGADA, igual que en el local */ text-shadow:var(--ab-shadow,none); /* fila de palabras (lo que en el local hace `.copy h1.hl`) */ display:flex;flex-wrap:wrap;align-items:center; column-gap:.30em;row-gap:.06em;justify-content:center} /* --- cada palabra del titular, entera en su renglon --- */ .hero .dsh-w, .hero .dsh-w-alt{white-space:nowrap} /* --- el parrafo --- */ .hero .dsh-lead{margin:26px 0 0;max-width:31ch;font-family:Montserrat,Arial,sans-serif; font-size:clamp(1rem,1.35vw,1.22rem);line-height:1.5;font-weight:500;color:#d5d5dc} /* --- el boton --- */ .hero .dsh-cta{display:inline-flex;align-items:center;gap:15px;text-decoration:none;cursor:pointer; height:58px;padding:0 30px 0 9px;border-radius:99px;background:#fff;color:#0b0b0c; font-family:Montserrat,Arial,sans-serif; font-size:1.06rem;font-weight:600;letter-spacing:-.012em; box-shadow:0 14px 44px -16px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.5) inset; transform:translate3d(var(--mx,0px),var(--my,0px),0); transition:transform .2s var(--ease),scale .22s var(--ease-out),box-shadow .2s} /* `color:#fff` no existe en el local porque alli el circulo lleva un SVG con `stroke:#fff`. Aqui hace falta: mientras la flecha sea texto, heredaria el negro del boton y no se veria. Con el SVG no cambia nada. */ .hero .dsh-dot{width:40px;height:40px;flex:none;border-radius:50%;background:#0b0b0c; color:#fff;display:grid;place-items:center;transition:scale .22s var(--ease-out)} .hero .dsh-dot svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.1; stroke-linecap:round;stroke-linejoin:round; transition:rotate var(--arrow-d,.34s) var(--ease-out)} .hero .dsh-cta:focus-visible{outline:2px solid #fff;outline-offset:4px} @media (hover:hover) and (pointer:fine){ .hero .dsh-cta:hover{box-shadow:0 22px 56px -18px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.5) inset} .hero .dsh-cta:hover .dsh-dot{scale:1.06} .hero.f-arrow .dsh-cta:hover .dsh-dot svg{rotate:var(--arrow-deg,-45deg)} } .hero .dsh-cta:active{scale:.97;transition:scale .1s var(--ease-out)} /* --- las notas --- */ .hero .dsh-notes{margin:22px 0 0;padding:0;list-style:none; display:flex;flex-direction:column;gap:5px} /* En el local cada nota es un `li`, que no trae margen ni interlineado propios. En Webflow es un `p`, y un `p` si trae margen de serie. `margin:0` y `line-height:normal` dejan la nota igual que el `li` del local. */ .hero .dsh-note{margin:0;font-family:Montserrat,Arial,sans-serif; font-size:.92rem;line-height:normal;font-weight:500;color:#b7b7c2} /* --- version partida: el texto a la izquierda --- */ .hero.split .dsh-copy{text-align:left;align-items:flex-start;margin:0;max-width:none;z-index:6} .hero.split .dsh-title{font-size:clamp(2.3rem,3.9vw,3.9rem);justify-content:flex-start} .hero.split .dsh-lead{max-width:40ch;margin-top:22px} .hero.split .dsh-notes{align-items:flex-start} @media (max-width:1000px){ .hero.split .dsh-copy{text-align:center;align-items:center} .hero.split .dsh-title{justify-content:center} .hero.split .dsh-notes{align-items:center} .hero.split .dsh-lead{max-width:34ch} } @media (max-width:860px){ .hero .dsh-lead{max-width:28ch} } @media (max-width:520px){ .hero .dsh-title{font-size:clamp(2rem,10vw,2.8rem)} } /* --- MOVIL: la columna de texto, centrada -------------------------------- Por debajo de 767 px van al centro el titular, el parrafo, el boton y las notas. Cada regla va DOS veces porque la columna tiene dos vidas: antes del JavaScript -> .dsh-copy .dsh-title .dsh-lead .dsh-cta .dsh-notes despues del JavaScript -> .copy h1.hl p .actions .notes El titular no obedece a `text-align`: es un flex de palabras, y quien manda en el es `justify-content`. Este bloque va DESPUES de `.hero.split .copy h1.hl{justify-content:flex-start}`, con la misma especificidad, y por eso gana. Los bloques de 1000 px ya centran casi todo, y por eso aqui casi todo se repite. Se escribe igual: es el ancho que pidio la usuaria, y asi la regla sigue en pie si alguien cambia el corte de 1000 px. */ @media (max-width:767px){ .hero.split .copy, .hero.split .dsh-copy{text-align:center;align-items:center} .hero.split .copy h1.hl, .hero.split .copy h1, .hero.split .dsh-title{justify-content:center} .hero.split .copy p, .hero.split .dsh-lead{margin-left:auto;margin-right:auto} .hero.split .actions{justify-content:center} .hero.split .dsh-cta{align-self:center} .hero.split .notes, .hero.split .dsh-notes{align-items:center;text-align:center} } /* --- el velo que fija el fondo bajo el texto (mejora 1 del local) --- En el local cuelga de `.copy`. Aqui se repite para `.dsh-copy`, con los mismos valores. Sin esto, los logos en orbita pasan por detras del parrafo y se pierde el contraste. */ .hero.f-scrim .dsh-copy::before{ content:"";position:absolute;z-index:-1;pointer-events:none; left:50%;top:50%;translate:-50% -50%; width:min(1180px,132%);height:var(--scrim-h,128%); background:radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--bg) calc(var(--scrim,.72) * 100%), transparent) 0%, color-mix(in srgb, var(--bg) calc(var(--scrim,.72) * 62%), transparent) 48%, transparent 74%)} .hero.split.f-scrim .dsh-copy::before{left:42%;width:min(900px,150%)} /* --- el hueco vertical sobre el boton ---------------------------------------- En el local ese hueco no lo pone el boton: lo pone su fila, `.actions` (`margin-top:36px`, y 32px en la version partida). `hero-wf.js` crea esa fila en cuanto arranca: envuelve el `.dsh-cta` en un `div.actions` y le da la clase `cta`. O sea que con el JavaScript puesto el hueco YA sale, y este bloque tiene que seguir comentado o saldria doble. Descomentalo solo si alguna vez se usa el CSS sin el JavaScript. .hero .dsh-cta{margin-top:36px} .hero.split .dsh-cta{margin-top:32px} */