/* ===== Orbitaz · styles.css · componentes compartidos (brief 3.2 y 5.x) · va después de tokens.css ===== Orden: 1) isotipo (3.2) · 2) reglas globales de la intro de la sección 5 · 3) componentes 5.1 a 5.12. Las secciones del index (6.x) van al final de este archivo y las escribe el Dev A; así .hero__orb y .footer__mark .iso ganan a .iso. Rutas absolutas (/assets/...) para que las máscaras funcionen igual desde index.html y desde demos/. */ /* ---------- 1) Isotipo (3.2) ---------- */ .iso{width:1em;height:1em;overflow:visible} /* tamaño = font-size del contenedor */ .iso .gancho{transform-box:view-box;transform-origin:500px 500px} .iso--mono .aspa{fill:currentColor} /* favicon, impresión, avatar mono */ /* una sola aspa (la derecha) como viñeta o separador: máscara sobre currentColor, así el color lo da el CSS */ .aspa-bullet::before,.marquee .sep{content:"";display:inline-block;flex:none;background:currentColor; mask:url(/assets/aspa-mono.svg) center/contain no-repeat;-webkit-mask:url(/assets/aspa-mono.svg) center/contain no-repeat} .aspa-bullet{display:flex;gap:10px;align-items:flex-start}.aspa-bullet::before{width:10px;height:10px;margin-top:.45em;color:var(--brand)} .marquee .sep{width:12px;height:12px;color:var(--blue-400);opacity:.35} /* ---------- 2) Reglas globales (intro de la sección 5, 4.3 y 4.5) ---------- */ html.is-loading{overflow:hidden} /* mientras el preloader está en pantalla */ .skip-preloader .preloader{display:none} /* visita repetida: el head lo decide antes del primer paint */ html.menu-open{overflow:hidden} /* overlay del burger abierto */ .js:not(.reduced) [data-reveal]{visibility:hidden} /* estado inicial de los reveals; reveals() devuelve visible justo antes del from */ .sec--night{background:var(--night-900)} /* marcador: fondo plano solo cuando la sección no define uno */ section[id]{scroll-margin-top:var(--nav-h)} /* anclas sin JS */ .demo-bar ~ * section[id]{scroll-margin-top:calc(var(--nav-h) + 44px)} html[data-dir="-1"]{--dir:-1} /* sentido de giro: la única fuente es */ /* Preloader (6.0): cortina noche con el SVG a 72 px; la timeline vive en main.js */ .preloader{position:fixed;inset:0;z-index:var(--z-preloader);background:var(--night-900);display:grid;place-items:center} .preloader .iso{font-size:72px} /* Reduced motion (4.5): todo visible y quieto; el nav, la barra de WhatsApp, la FAQ y los chips siguen operativos */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .follow,.grain--anim{display:none} .wa-bar,.wa-float{transition:none} } /* ---------- 5.1 Nav ---------- */ .nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:var(--z-nav);display:flex;align-items:center; background:transparent;border-bottom:1px solid transparent;transition:background .3s ease-in-out,border-color .3s,transform .4s cubic-bezier(.22,1,.36,1),color .3s} .nav.is-scrolled{background:rgba(11,16,51,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--line-dark)} .nav.nav--light{background:rgba(255,255,255,.78);color:var(--navy);border-color:var(--line-light)} .nav.is-hidden{transform:translateY(-100%)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%} .nav__logo{display:inline-flex;align-items:center;gap:4px} .nav__o{font-size:24px;display:inline-block;width:1em;height:1em;opacity:0;transition:opacity .2s} /* la rueda aterriza aquí (Fase C) o aparece al 96 % (Fase A) */ .nav__o.is-on{opacity:1} .nav__o .iso{rotate:calc(90deg * var(--dir,1))} /* mismo giro que trae la rueda al llegar: los 8 colores coinciden */ .nav__word{height:23px;width:auto} .nav__word--negro{display:none}.nav--light .nav__word--negro{display:block}.nav--light .nav__word--blanco{display:none} .nav.is-scrolled .nav__cta,.nav.nav--light .nav__cta{background:var(--wa);color:var(--wa-text);border-color:transparent} .nav.is-scrolled .nav__cta:hover,.nav.nav--light .nav__cta:hover{background:var(--wa-hover)} .nav__links{display:flex;gap:28px} .nav__links a{position:relative;font:500 14px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase} .nav__links a::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .26s ease-out} .nav__links a:hover::after{transform:scaleX(1)} .nav__burger{display:none;width:44px;height:44px;border:0;background:none;color:inherit;flex-direction:column;justify-content:center;gap:6px;cursor:pointer} .nav__burger span{display:block;width:22px;height:2px;background:currentColor;margin:0 auto;transition:transform .3s,opacity .3s} .nav__burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)} .nav-overlay{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--night-900);display:grid;align-content:center;gap:40px;padding:var(--pad-x)} .nav-overlay nav{display:grid;gap:12px}.nav-overlay nav a{font:600 40px/1.1 var(--font-display);text-transform:uppercase;letter-spacing:-.01em} .nav-overlay[hidden]{display:none} @media (max-width:1024px){.nav__links,.nav__cta{display:none}.nav__burger{display:flex}} @media (max-width:767px){.nav{height:var(--nav-h-m)}.nav__o{font-size:22px}.nav__word{height:21px}} .no-js .nav__burger{display:none} /* sin JS en ≤ 1024: el nav deja de ser fijo y muestra los enlaces en columna (4.5) */ @media (max-width:1024px){ .no-js .nav{position:relative;height:auto;padding:12px 0;background:var(--night-900)} .no-js .nav .wrap{flex-wrap:wrap} .no-js .nav__links{display:flex;flex-direction:column;gap:14px;width:100%} .no-js .nav__cta{display:inline-flex} } /* ---------- 5.2 Botones ---------- */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:var(--r-pill); font:600 15px/1 var(--font-body);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;transition:background .26s ease-out,transform .26s ease-out,box-shadow .26s} .btn--lg{height:56px;padding:0 32px;font-size:16px} .btn--sm{height:40px;padding:0 18px;font-size:14px} .btn-wa{background:var(--wa);color:var(--wa-text)}.btn-wa:hover{background:var(--wa-hover)} .btn-cta{background:var(--grad-cta);background-size:160% 100%;color:var(--cta-text);box-shadow:var(--shadow-cta),var(--cta-ring);transition:background-position .4s ease} .btn-cta:hover{background-position:100% 0} /* no cambia colores ni agrega glow */ .theme-light .btn-cta{background-image:var(--grad-cta-deep);color:var(--cta-deep-text)} .btn-ghost{background:var(--glass-bg);border:1px solid var(--glass-border-strong);color:var(--text)} .btn-ghost:hover{background:var(--glass-bg-hover)} .btn-text{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--font-body);border-bottom:1px solid currentColor;padding-bottom:3px;border-radius:0;height:auto} .btn-text:hover{border-bottom-color:transparent} .btn__label{display:inline-block;transition:transform .3s cubic-bezier(.22,1,.36,1)} .btn__label--copy{position:absolute;left:0;right:0;text-align:center;transform:translateY(120%)} .btn:hover .btn__label{transform:translateY(-120%)}.btn:hover .btn__label--copy{transform:translateY(0)} .tag{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-pill);background:var(--accent-sky);color:var(--night-900);font:600 12px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase} /* ---------- 5.4 Seguidor "Ver demo" (sin cursor:none) ---------- */ .follow{position:fixed;top:0;left:0;z-index:var(--z-follow);pointer-events:none; height:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--accent-sky);color:var(--night-900); font:600 12px/44px var(--font-body);letter-spacing:.06em;text-transform:uppercase;opacity:0;will-change:transform} /* sin transform ni scale en CSS: el centrado (xPercent/yPercent -50) y la escala .6 los pone follower() con gsap.set, porque GSAP reescribe transform */ @media (hover:none){.follow{display:none}} /* ---------- 5.5 Grain (apagado por defecto; solo sobre noche, SVG estático) ---------- */ .grain{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.045;mix-blend-mode:overlay} body.has-grain .sec--night .grain{display:block} /* ---------- 5.6 Glass card (solo sobre noche) ---------- */ .glass{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:24px;backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));transition:background .3s ease-in-out,border-color .3s} .glass:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-strong)} .theme-light .glass{background:var(--paper-3);border-color:var(--line-light);backdrop-filter:none;-webkit-backdrop-filter:none} @media (max-width:767px){.glass{--glass-blur:10px}} /* ---------- 5.7 Tarjeta de demo con iframe en vivo ---------- */ .demos__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;perspective:1200px} /* 8 demos: 4 columnas en desktop */ .demo-card{padding:24px;transform-style:preserve-3d} .demo-card__meta{display:flex;justify-content:space-between;gap:12px;font:600 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)} .demo-card__device{position:relative;width:280px;aspect-ratio:9/19.5;margin:24px auto;border:6px solid #26262b;border-radius:34px;background:#0d0d0f;overflow:hidden;transform:rotate(4deg) translateZ(0);transition:transform .4s cubic-bezier(.22,1,.36,1)} .demo-card:hover .demo-card__device{transform:rotate(0) translateZ(30px)} .demo-card__poster{position:absolute;inset:0;width:100%;height:auto;transition:transform 7s linear} .demo-card.is-visible .demo-card__poster{transform:translateY(-46%)} /* móvil: paneo de la captura 750 × 3000 */ .demo-card__frame{position:absolute;top:0;left:0;width:390px;height:848px;border:0;transform:scale(.718);transform-origin:top left;pointer-events:none;opacity:0;transition:opacity .5s} .demo-card.is-live .demo-card__frame{opacity:1}.demo-card.is-live .demo-card__poster{visibility:hidden} .demo-card__title small{display:block;font:500 12px/1.4 var(--font-body);color:var(--text-3);margin-top:4px} .demo-card__line{font-size:15px;color:var(--text-2);margin-top:8px} .demo-card__actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px} @media (max-width:1279px){.demos__grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:1023px){.demos__grid{grid-template-columns:repeat(2,1fr);gap:18px}} @media (max-width:699px){.demos__grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}} /* ---------- 5.8 Marquee (dos capas: __inner = keyframes, __track = skew de GSAP) ---------- */ .marquee{height:64px;overflow:hidden;background:var(--night-900);border-block:1px solid var(--line-dark);display:flex;align-items:center; background-image:url("/assets/aspa-tile.svg");background-size:24px 24px} /* patrón pixel: una aspa al 4 % */ .marquee__track{will-change:transform} /* aquí escribe GSAP el skewX */ .marquee__inner{display:flex;align-items:center;gap:40px;width:max-content;font:500 22px/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--blue-400);animation:marquee 28s linear infinite} /* .marquee .sep: máscara de aspa-mono.svg sobre currentColor, definida arriba (3.2) */ @keyframes marquee{to{transform:translateX(-50%)}} /* el marquee es el único movimiento que no para solo: se detiene en reduced y en ?embed=1, que es la vista de la que sale la captura del índice (WCAG 2.2.2, contenido en movimiento sin control) */ @media (prefers-reduced-motion:reduce){.marquee__inner{animation:none}} .reduced .marquee__inner,.is-embed .marquee__inner{animation:none} /* ---------- 5.9 Footer con wordmark gigante (SVG como O + rbitaz-blanco.png) ---------- */ .footer{background:var(--night-950);padding:var(--sec-y-tight) 0 32px} .footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;font-size:14px;color:var(--text-2)} .footer__cols h4{font:600 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px} .footer__mark{display:flex;align-items:center;width:min(76vw,1400px);margin:64px auto 32px} .footer__mark .iso{flex:0 0 21.7%;width:21.7%;height:auto;aspect-ratio:1;margin-right:3.5%} /* proporciones medidas en logo-lockup-blanco.png */ .footer__mark img{width:73.8%;height:auto} .footer__legal{display:flex;justify-content:space-between;font-size:13px;color:var(--text-3);border-top:1px solid var(--line-dark);padding-top:20px} @media (max-width:767px){.footer__cols{grid-template-columns:1fr}.footer__mark{width:92vw}} /* ---------- 5.10 WhatsApp flotante (desktop) y barra inferior (móvil) ---------- */ .wa-float{position:fixed;right:22px;bottom:22px;z-index:var(--z-float);width:56px;height:56px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:var(--shadow-dark);transform:scale(.6);opacity:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .3s} .wa-float.is-on{transform:scale(1);opacity:1}.wa-float:hover{background:var(--wa-hover)} .wa-bar{display:none;position:fixed;inset:auto 0 0 0;height:var(--wa-bar-h);z-index:var(--z-float);background:var(--wa);color:var(--wa-text);font:600 15px/1 var(--font-body);align-items:center;justify-content:center;gap:10px;transform:translateY(100%);transition:transform .4s cubic-bezier(.22,1,.36,1);padding-bottom:env(safe-area-inset-bottom)} .wa-bar.is-on{transform:none} @media (max-width:767px){.wa-float{display:none}.wa-bar{display:flex}body{padding-bottom:var(--wa-bar-h)}} .no-js .wa-bar,.no-js .wa-float{transform:none;opacity:1} /* el contacto funciona sin JS */ @media (prefers-reduced-motion:reduce){.wa-bar,.wa-float{transition:none}} /* en reduced, floating() sigue poniendo .is-on: la barra aparece, sin animar */ /* ---------- 5.11 FAQ (details/summary nativos; animación por ::details-content donde exista) ---------- */ .faq{display:grid;grid-template-columns:1fr 1fr;gap:0 40px} .faq details{border-top:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:22px 0;font:600 16px/1.3 var(--font-body)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font:400 22px/1 var(--font-display);transition:transform .3s cubic-bezier(.22,1,.36,1)} .faq details[open] summary::after{transform:rotate(45deg)} .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .35s cubic-bezier(.22,1,.36,1),content-visibility .35s allow-discrete} .faq details[open]::details-content{block-size:auto} /* requiere interpolate-size:allow-keywords en :root (tokens.css) */ .faq__body{padding-bottom:22px;font-size:15px;color:var(--text-2)} @media (max-width:767px){.faq{grid-template-columns:1fr}} /* una columna visual, pero siguen siendo dos .faq__col: uno abierto por columna */ /* ---------- 5.12 Barra de demo (solo en demos/; ?embed=1 la oculta junto con los flotantes) ---------- */ .demo-bar{position:fixed;inset:0 0 auto 0;height:44px;z-index:calc(var(--z-nav) + 1);display:flex;align-items:center;background:var(--night-900);color:var(--text-on-dark);border-bottom:1px solid var(--line-dark);font:500 13px/1 var(--font-body)} .demo-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%} .demo-bar__brand{display:inline-flex;align-items:center;gap:8px} .demo-bar__brand .iso{font-size:20px} .demo-bar__links{display:flex;align-items:center;gap:16px;color:var(--text-on-dark-2)} .demo-bar__links a:hover{color:var(--text-on-dark)} .demo-bar ~ .nav{top:44px} /* el nav de la demo cuelga debajo de la barra */ body:has(> .demo-bar){padding-top:44px} .is-embed body{padding-top:0} .is-embed .demo-bar,.is-embed .wa-float,.is-embed .wa-bar{display:none} .is-embed .demo-bar ~ .nav{top:0} @media (max-width:767px){.demo-bar__links span,.demo-bar__brand span{display:none}} /* en móvil quedan isotipo, Anterior/Siguiente y el botón verde */ /* ---------- Secciones 6.x del index: las agrega el Dev A debajo de esta línea ---------- */ /* ============ 6.x Secciones del index ============ */ /* ---------- 6.0 Preloader ---------- */ .preloader{position:fixed;inset:0;z-index:var(--z-preloader,120);background:var(--night-900);display:grid;place-items:center} .preloader .iso{width:72px;height:72px} /* ---------- 6.2 Hero ---------- */ .hero{position:relative;min-height:100svh;display:grid;align-items:center;background:var(--grad-night);background-size:100% 140%;overflow:hidden;padding-top:var(--nav-h);color:var(--text-on-dark)} .hero__bg{position:absolute;inset:0;pointer-events:none} .hero__orb{--orb-d:min(62vh,32vw);position:absolute;left:70%;top:50%;width:var(--orb-d);height:var(--orb-d);margin:calc(var(--orb-d) / -2) 0 0 calc(var(--orb-d) / -2);transition:opacity .6s;filter:none} /* centrado por margen, no por translate: GSAP reescribe transform en initHeroSvg */ .hero__3d{position:absolute;inset:0;opacity:0;transition:opacity .6s} .hero.is-3d .hero__3d{opacity:1}.hero.is-3d .hero__orb{opacity:0} .hero__in{position:relative;z-index:1} .hero__in > *{max-width:min(600px,52%)} .hero__in .lead{max-width:min(48ch,52%);color:var(--text-on-dark-2);margin-top:22px} .hero .eyebrow{color:var(--text-on-dark-3)} .hero h1{margin-top:22px;color:var(--text-on-dark);text-wrap:wrap} /* sin balance: con el
y 600 px repartía una palabra por línea */ @media (min-width:768px){.hero h1{font-size:clamp(44px,5.5vw,80px);max-width:min(760px,54%)}} /* 4 líneas: TU WHATSAPP / RESPONDE, / COTIZA Y CIERRA / SOLO. y el CTA sobre el pliegue a 1280x800 */ .hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;margin-top:34px} .hero__proof{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line-dark);font-size:13px;color:var(--text-on-dark-3)} .hero__proof span{opacity:.5} @media (prefers-reduced-motion:no-preference){ .hero__orb{animation:orb-breath 6s ease-in-out infinite} @keyframes orb-breath{0%,100%{scale:1}50%{scale:1.03}} } @media (max-width:767px){ .hero{display:block;padding-top:var(--nav-h-m);min-height:auto;padding-bottom:var(--sec-y-tight)} .hero__bg{position:relative;inset:auto;height:30vh;display:grid;place-items:center;pointer-events:none} .hero__orb{position:static;width:52vw;height:52vw;max-width:30vh;max-height:30vh;margin:0} .hero__3d{display:none} .hero__in > *{max-width:none} } /* ---------- 6.3 Marquee ---------- */ .marquee__inner span{white-space:nowrap} /* ---------- 6.4 Servicios ---------- */ .hoja{position:relative;z-index:2;margin-top:-48px;border-radius:28px 28px 0 0;box-shadow:0 -20px 60px rgba(3,6,30,.35);background:var(--grad-light)} .theme-light{color:var(--text-on-light);background:var(--grad-light)} .theme-light h1,.theme-light h2,.theme-light h3{color:var(--navy)} .theme-light .lead{color:var(--text-on-light-2)} .theme-light .eyebrow{color:var(--text-on-light-3)} .servs{display:grid;grid-template-columns:7fr 5fr;gap:56px;margin-top:56px;align-items:start} .servs__list{display:grid;gap:8px} .serv{padding:28px 0;border-top:1px solid var(--line-light)} .serv__head{display:flex;align-items:baseline;gap:16px} .serv__num{font-size:15px;color:var(--text-on-light-3);letter-spacing:.04em;position:relative;padding-bottom:4px} .serv.is-active .serv__num::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue-500)} .serv__title{font-size:clamp(24px,3.2vw,44px);line-height:1.02;color:var(--text-on-light-3);transition:color .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1)} .serv.is-active .serv__title{color:var(--navy);transform:translateX(8px)} .serv__benef{margin-top:10px;font-size:17px;color:var(--text-on-light-2);max-width:46ch} .serv__list{margin-top:16px;display:grid;gap:8px;font-size:15px;color:var(--text-on-light-2)} .serv__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:20px} .serv__inv{font:600 13px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--navy)} .servs__panel{position:sticky;top:120px;height:60vh;min-height:420px;background:var(--paper-3);border:1px solid var(--line-light);border-radius:24px;overflow:hidden} .pnl{position:absolute;inset:0;display:grid;place-items:center;padding:28px;opacity:0;visibility:hidden} .pnl.is-on{opacity:1;visibility:visible} .mini-chat{width:100%;max-width:330px;display:grid;gap:10px} .mini-chat__hd{display:flex;align-items:center;gap:10px;color:var(--navy);font:600 14px/1 var(--font-body);padding-bottom:12px;border-bottom:1px solid var(--line-light)} .mini-chat__hd i{display:block;font:400 11px/1.4 var(--font-body);color:var(--wa);font-style:normal} .mini-chat__msg{font-size:14px;line-height:1.45;padding:11px 14px;border-radius:14px;max-width:88%} .mini-chat__msg--in{background:var(--paper);border:1px solid var(--line-light);border-bottom-left-radius:4px} .mini-chat__msg--out{background:#d9fdd3;color:#111b21;margin-left:auto;border-bottom-right-radius:4px} .mini-chat__card{display:grid;gap:2px;background:var(--paper);border:1px solid var(--line-light);color:var(--navy)} .mini-chat__card b{font:600 15px/1.2 var(--font-display)} .mini-chat__card span{font-size:13px;color:var(--text-on-light-2)} .pnl-phone{width:min(220px,50%);border:6px solid #26262b;border-radius:28px;overflow:hidden;background:#0d0d0f;aspect-ratio:9/19.5} .pnl-phone img{width:100%;height:auto;display:block} .pnl-cap{margin-top:16px;font-size:13px;color:var(--text-on-light-3);text-align:center} .pnl-flow{width:min(300px,90%);height:auto} .pnl-flow__line{stroke-dasharray:1;stroke-dashoffset:1} .pnl.is-on .pnl-flow__line{animation:flow-draw 1.1s .15s cubic-bezier(.22,1,.36,1) forwards} @keyframes flow-draw{to{stroke-dashoffset:0}} .pnl-flow__node rect{fill:var(--paper);stroke:var(--line-light-strong);stroke-width:1.5} .pnl-flow__node text{fill:var(--navy);font:600 13px/1 var(--font-body);text-anchor:middle} .curso{margin-top:56px;padding:32px;display:grid;gap:10px;justify-items:start;border-radius:24px} .curso h3{font-size:22px} .curso p{color:var(--text-on-light-2);max-width:58ch} @media (max-width:1024px){ .servs{grid-template-columns:1fr;gap:32px} .servs__panel{position:relative;top:auto;height:340px;min-height:0} } /* ---------- 6.5 El agente en acción ---------- */ .agente{position:relative;background:var(--night-900);color:var(--text-on-dark);overflow:hidden;padding:var(--sec-y) 0} .agente__wm{position:absolute;left:-10%;top:50%;translate:0 -50%;width:140vh;opacity:.06;color:var(--blue-300);pointer-events:none} .agente__wm .iso{width:100%;height:auto} .agente__in{position:relative;display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:center;min-height:70vh} .agente__txt{position:relative;min-height:8em} .agente__h{font-size:clamp(32px,4vw,56px);line-height:1.04;color:var(--text-on-dark)} .agente__phone{display:grid;justify-items:center;gap:14px} .agente__cap{font-size:12.5px;color:var(--text-on-dark-3);max-width:32ch;text-align:center} .phone{width:320px;max-width:100%;background:#0b141a;border:8px solid #22262b;border-radius:34px;overflow:hidden;box-shadow:var(--shadow-dark)} .phone__hd{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#1f2c33;color:#e9edef} .phone__name{font:600 14px/1.2 var(--font-body);display:grid} .phone__name i{font:400 11px/1.4 var(--font-body);font-style:normal;color:#8fd7a4} .phone__body{padding:16px;display:grid;gap:9px;background:#0b141a;min-height:420px;align-content:start} .msg{max-width:86%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.42;position:relative} .msg i{display:block;font-style:normal;font-size:10.5px;opacity:.6;text-align:right;margin-top:3px} .msg--in{background:#1f2c33;color:#e9edef;border-bottom-left-radius:4px} .msg--out{background:#005c4b;color:#e9edef;margin-left:auto;border-bottom-right-radius:4px} .msg--card{display:grid;gap:2px;background:#025c4c} .msg--card b{font:600 15px/1.2 var(--font-display)} .msg--card span{font-size:12.5px;opacity:.85} .msg--typing{display:none;gap:4px;width:auto;max-width:60px} .msg--typing span{width:6px;height:6px;border-radius:50%;background:#8696a0;display:inline-block} .phone__res{margin-top:12px;padding:14px;border-radius:14px;background:var(--accent-sky);color:var(--night-900);display:grid;gap:2px} .phone__res b{font:700 15px/1.2 var(--font-display)} .phone__res span{font-size:12.5px;opacity:.85} @media (max-width:1024px){ .agente__in{grid-template-columns:1fr;gap:32px;min-height:0} .agente__txt{min-height:0;display:grid;gap:18px} } /* ---------- 6.6 Demos ---------- */ #demos{background:var(--night-900);color:var(--text-on-dark)} #demos .lead{color:var(--text-on-dark-2)} #demos .eyebrow{color:var(--text-on-dark-3)} .demos__grid{margin-top:48px} .demos__foot{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:40px} /* ---------- 6.7 Proceso ---------- */ .proceso{position:relative;margin-top:48px} .proceso__path{width:100%;height:120px;display:block} .proceso__path path{stroke-dasharray:1;stroke-dashoffset:1} .proceso__iso{position:absolute;left:0;top:0;width:20px;height:20px;display:block;opacity:0} .proceso__iso .iso{width:20px;height:20px} .proceso__list{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;list-style:none;margin-top:8px} .paso__n{display:block;font-size:44px;line-height:1;color:var(--line-light-strong);transition:color .4s} .paso.is-active .paso__n{color:var(--blue-500)} .paso__t{font-size:17px;margin-top:10px;color:var(--text-on-light-3);transition:color .4s,transform .4s cubic-bezier(.22,1,.36,1)} .paso.is-active .paso__t{color:var(--navy);transform:translateX(6px)} .paso__d{font-size:13.5px;line-height:1.5;color:var(--text-on-light-2);margin-top:6px} @media (max-width:900px){ .proceso__path{display:none} .proceso__list{grid-template-columns:1fr;gap:22px;border-left:2px solid var(--line-light-strong);padding-left:22px} } /* ---------- 6.8 Confianza ---------- */ .confianza{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start} .confianza__list{display:grid;gap:16px;font-size:16px;color:var(--text-on-light-2)} @media (max-width:900px){.confianza{grid-template-columns:1fr;gap:24px}} /* ---------- 6.9 Precios ---------- */ .precios{background:var(--paper-2)} .precios__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;align-items:start} .plan{position:relative;background:var(--paper);border:1px solid var(--line-light);border-radius:24px;padding:32px 28px;display:grid;gap:12px;justify-items:start;transition:border-color .26s,transform .26s,box-shadow .26s} .plan:hover{border-color:var(--blue-500);transform:translateY(-4px);box-shadow:var(--shadow-light)} .plan--destacada{background:var(--navy);border-color:transparent;color:#fff} .plan--destacada .plan__n,.plan--destacada .plan__p .num{color:#fff} .plan--destacada .plan__f,.plan--destacada .plan__list{color:rgba(255,255,255,.78)} .plan--destacada .plan__pre{color:rgba(255,255,255,.6)} .plan--destacada .btn-text{color:#fff} .plan .tag{position:absolute;top:-14px;left:28px} .plan__n{font:600 13px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--navy)} .plan__f{font-size:15px;color:var(--text-on-light-2)} .plan__list{display:grid;gap:8px;font-size:14.5px;color:var(--text-on-light-2);margin-top:4px} .plan__p{display:grid;gap:2px;margin-top:8px} .plan__pre{font:500 12px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-light-3)} .plan__p .num{font-size:44px;line-height:1;color:var(--navy)} .plan__nota{font-size:12.5px;color:var(--text-on-light-3);max-width:30ch} .precios__pie{margin-top:28px;font-size:13.5px;color:var(--text-on-light-3)} @media (max-width:1024px){.precios__grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}.plan .tag{left:auto;right:28px}} /* ---------- 6.10 Dudas ---------- */ #dudas .faq{margin-top:40px} .theme-light .faq details{border-color:var(--line-light)} .theme-light .faq summary{color:var(--navy)} .theme-light .faq__body{color:var(--text-on-light-2)} /* ---------- 6.11 Cierre ---------- */ .cierre{position:relative;background:var(--grad-night-inv);color:var(--text-on-dark);overflow:hidden;padding:var(--sec-y) 0} .cierre__wm{position:absolute;right:-16%;top:50%;translate:0 -50%;width:90vh;opacity:.08;pointer-events:none} .cierre__wm .iso{width:100%;height:auto} .cierre__in{position:relative;display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:center} .cierre h2{font-size:clamp(40px,6vw,88px);line-height:1;color:var(--text-on-dark)} .cierre .lead{color:var(--text-on-dark-2);margin-top:22px} .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px} .chips [aria-checked="true"]{background:var(--accent-sky);color:var(--night-900);border-color:transparent} .cierre__cta{margin-top:28px} .cierre__tel{display:grid;gap:2px;margin-top:26px} .cierre__tel .num{font-size:28px;color:var(--text-on-dark)} .cierre__tel span:last-child{font-size:13px;color:var(--text-on-dark-3)} .phone--draft .phone__body{min-height:180px} @media (max-width:1024px){ .cierre__in{grid-template-columns:1fr;gap:36px} .cierre__phone{display:none} .cierre__cta{width:100%} } /* ---------- 6.12 Footer ---------- */ .footer__cols ul{display:grid;gap:8px;list-style:none} .footer__cols a:hover{color:var(--text-on-dark)} /* ---------- reduced-motion global (4.5) ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .follow,.grain--anim{display:none} .wa-bar,.wa-float{transition:none} .pnl{opacity:1;visibility:visible;position:relative;inset:auto} .servs__panel{height:auto;display:grid;gap:24px;padding:24px} .agente__h{position:relative!important;opacity:1!important} } /* titulares del agente: se reemplazan en el mismo lugar (desktop) */ @media (min-width:1025px){ .agente__h{position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden} .agente__h.is-on{opacity:1;visibility:visible} .js:not(.reduced) .agente__h{transition:opacity .3s} } /* el .btn se define después de 5.1 y ganaba a .nav__cta{display:none} en ≤1024 */ @media (max-width:1024px){.nav .nav__cta{display:none}} /* ---------- Ajustes 03-sep (hallazgos de las tres demos; valen para index) ---------- */ .wa-float{color:var(--wa-text)} /* 5.10: icono tinta sobre verde, no heredar el color del body */ .btn{overflow:hidden} .btn__label--copy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:translateY(100%)} /* la copia ocupa todo el botón: 120 % de su propio alto no la sacaba */ .btn:hover .btn__label{transform:translateY(-100%);opacity:0}.btn:hover .btn__label--copy{transform:translateY(0)} .demo-bar__brand,.demo-bar__links{flex:0 0 auto} /* a 390 px Chrome encogía los enlaces y el botón salía del viewport */ .demo-bar .btn{height:30px;padding:0 14px;font-size:12px} /* un solo tamaño de botón para la barra de 44 px en las tres demos */ html.menu-open .nav{z-index:calc(var(--z-overlay) + 1);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--text-on-dark);border-color:transparent} /* el burger en X queda encima del overlay para cerrar */ html.menu-open .nav .nav__word--negro{display:none}html.menu-open .nav .nav__word--blanco{display:block} .is-embed body{padding-bottom:0} /* sin wa-bar no hay hueco al pie de la captura */ /* ---------- Portada v2 (03-sep, ganadora del concurso _qa/hero-v2 con injertos de v1, v3 y v4) ---------- Titular Outfit a todo el ancho en dos líneas con la rueda detrás de las letras, lead corto arriba a la derecha, tarjeta compacta del producto abajo a la izquierda (así la rueda queda libre a la derecha), una regla y una fila con precio, prueba numerada y el único botón verde; el marquee de rubros cierra la primera pantalla. Las reglas 6.2 de arriba siguen valiendo para .hero y aquí se especializan con .hero--v2. */ .nav__o{opacity:1} /* diagnóstico 1: la O se lee desde el primer paint; la rueda aterriza sobre una O visible */ html.hero-on .nav.is-hidden{transform:none} /* mientras dura el hero el nav no se esconde (navAutoHide lo haría a los 120 px): la O tiene que estar a la vista para el acople */ .hero.hero--v2{--orb-cx:82%;--orb-cy:50%; /* 82 %: "SOLO." solo pisa las aspas azules oscuras de la izquierda; las claras quedan libres a la derecha */ /* scene.js lee --orb-cx del hero para centrar la rueda 3D en el mismo punto */ display:block;min-height:100svh;padding:0;overflow:hidden;color:var(--text-on-dark)} .hero--v2 .hero__tex{position:absolute;inset:0;background:url(/assets/aspa-tile.svg) 0 0/96px 96px;opacity:.75;pointer-events:none} /* aspa al 4 % · .75 = 3 %, mismo tile y tamaño que el fondo del canvas 3D */ .hero--v2 .hero__orb{--orb-d:min(54vh,32vw);position:absolute;left:var(--orb-cx);top:var(--orb-cy);width:var(--orb-d);height:var(--orb-d);max-width:none;max-height:none; margin:calc(var(--orb-d) / -2) 0 0 calc(var(--orb-d) / -2)} /* --orb-d va en la rueda: 6.2 la define ahí y pisaría la del hero */ /* crossfade SVG -> vidrio recién cuando terminó el ensamblado de las aspas (is-assembled la pone main.js al cerrar la intro) */ .hero--v2.is-3d .hero__3d{opacity:0}.hero--v2.is-3d .hero__orb{opacity:1} .hero--v2.is-3d.is-assembled .hero__3d{opacity:1}.hero--v2.is-3d.is-assembled .hero__orb{opacity:0} /* --- composición editorial --- */ .hero--v2 .hero__in{position:relative;z-index:1;min-height:100svh;display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,320px); grid-template-rows:auto auto minmax(0,1fr) auto auto; grid-template-areas:"eye lead" "h1 h1" "chat mid" "rule rule" "row row"; column-gap:40px;padding-top:calc(var(--nav-h) + 10px);padding-bottom:calc(56px + 12px)} .hero--v2 .hero__in > *{max-width:none} .hero--v2 .hero__eyebrow{grid-area:eye;align-self:start;margin:0;color:var(--text-on-dark-3)} .hero--v2 .hero__in .hero__lead{grid-area:lead;justify-self:end;align-self:start;margin:0;max-width:30ch;font-size:16px;line-height:1.5;color:var(--text-on-dark-2);text-wrap:pretty} .hero--v2 .hero__h1{grid-area:h1;min-width:0;margin:10px 0 0;max-width:none;font-size:clamp(48px,10.6vw,150px);line-height:.87;letter-spacing:-.03em;text-transform:uppercase;text-wrap:nowrap;color:var(--text-on-dark)} /* fitH1 (main.js) lo ajusta al ancho con tope 150 px; el clamp es el respaldo sin JS */ .hero__l{display:block;overflow:hidden;padding:.07em .14em .07em 0;margin:-.07em -.14em -.07em 0} /* en reduced la regla global *{transition-duration:.01ms} convertía el cambio de font-size en transición y fitH1 medía el tamaño anterior */ @media (prefers-reduced-motion:reduce){.hero__h1,.hero__h1 *{transition:none!important}} .hero__lt{display:inline-block;white-space:nowrap;will-change:transform} .hero__chatwrap{grid-area:chat;align-self:end;justify-self:start;width:min(340px,100%);margin:14px 0 14px;display:grid;gap:6px} .hero__chat-time{margin:0;font:600 12px/1.5 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-on-dark-3)} .hero__chat{padding:10px;border-radius:20px;background:rgba(11,16,51,.86);border:1px solid var(--glass-border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:grid;gap:5px} .hero__chat-cap{display:flex;align-items:center;gap:8px;margin:0;font:600 11.5px/1.4 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-dark-2)} .hero__chat-cap .iso{font-size:12px;color:var(--blue-300);flex:none} .bub{position:relative;max-width:90%;margin:0;padding:8px 11px;border-radius:14px;font:400 13px/1.4 var(--font-body);color:#E9EDEF} .bub i{float:right;font-style:normal;font-size:10.5px;line-height:1;opacity:.6;margin:6px 0 0 10px} /* la hora al final de la última línea, como en WhatsApp */ .bub--in{background:rgba(255,255,255,.09);border-bottom-left-radius:4px} .bub--out{background:#005C4B;margin-left:auto;border-bottom-right-radius:4px} /* burbuja saliente de WhatsApp, igual que .msg--out de la sección 04 */ .bub--st{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:5px 10px;border-radius:var(--r-pill);border:1px solid rgba(125,211,252,.4);color:var(--accent-sky);font:600 12px/1 var(--font-body);letter-spacing:.02em;white-space:nowrap} /* estado final: cierra la historia (accent-sky sobre navy) */ .bub--st svg{width:14px;height:14px;flex:none} .hero--v2 .hero__rule{grid-area:rule;height:1px;border:0;margin:0;background:var(--line-dark-strong);transform-origin:0 50%} .hero--v2 .hero__row{grid-area:row;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"price proof cta";align-items:center;column-gap:32px;padding-top:14px} .hero__price{grid-area:price;display:flex;align-items:baseline;gap:10px;margin:0} .hero__price .eyebrow{color:var(--text-on-dark-3)} .hero__price .num{font-size:34px;line-height:1;color:var(--text-on-dark)} .hero--v2 .hero__proof{grid-area:proof;margin:0;padding:0;border:0;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;font-size:13px;color:var(--text-on-dark-3)} .hero__proof li{display:flex;align-items:baseline;gap:6px;white-space:nowrap} .hero__proof .n{font:600 11px/1 var(--font-body);letter-spacing:.08em;color:var(--blue-300)} .hero__proof .more{margin-left:auto;color:var(--text-on-dark-2)} .hero--v2 .hero__cta{grid-area:cta;margin:0;justify-self:end;display:flex;flex-wrap:nowrap;align-items:center;gap:24px} .hero__marquee{position:absolute;left:0;right:0;bottom:0;z-index:1;height:56px;background:rgba(7,10,31,.42);background-image:none;border-bottom:0;border-top:1px solid var(--line-dark)} .hero__marquee .marquee__inner{font-size:18px;color:var(--blue-300)} .hoja{margin-top:0} /* el marquee ya es el pie del hero: la hoja arranca justo debajo (con -48px tapaba el texto de los rubros) */ /* sin JS (4.5): la cortina del preloader no se retira nunca y tapaba toda la página; el contenido queda visible y se puede scrollear */ .no-js .preloader{display:none}.no-js.is-loading{overflow:auto} @media (max-width:1024px){ .hero--v2 .hero__in{grid-template-columns:minmax(0,1fr) minmax(220px,280px);column-gap:28px} .hero--v2 .hero__row{grid-template-columns:auto auto;grid-template-areas:"price cta" "proof proof";row-gap:12px;justify-content:space-between} .hero__chat-cap{letter-spacing:.06em} } /* móvil: la rueda entra en el flujo como bloque corto junto al lead (entera dentro del viewport, sin texto encima); .hero__bg y .hero__in pasan a display:contents y el hero es la grilla */ @media (max-width:767px){ .hero.hero--v2{min-height:100svh;padding:calc(var(--nav-h-m) + 14px) var(--pad-x) calc(56px + 16px);display:grid; grid-template-columns:minmax(0,1fr) var(--orb-d);grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto; grid-template-areas:"eye eye" "h1 h1" "lead orb" "chat chat" ". ." "rule rule" "row row";column-gap:16px} .hero--v2 .hero__bg,.hero--v2 .hero__in{display:contents} .hero--v2 .hero__tex{position:absolute;inset:0} .hero--v2 .hero__3d{display:none} .hero--v2 .hero__orb{--orb-d:min(44vw,22svh);grid-area:orb;position:relative;left:auto;top:auto;margin:14px 0 0;width:var(--orb-d);height:var(--orb-d);align-self:center;justify-self:end} .hero--v2 .hero__eyebrow{grid-area:eye} .hero--v2 .hero__h1{grid-area:h1;margin-top:10px;font-size:clamp(40px,12.6vw,60px);line-height:.92} .hero--v2 .hero__in .hero__lead{grid-area:lead;justify-self:start;align-self:center;max-width:none;margin:14px 0 0;font-size:15px;line-height:1.5} .hero__chatwrap{grid-area:chat;justify-self:stretch;width:100%;margin:16px 0 12px} .hero--v2 .hero__row{grid-template-columns:1fr auto;grid-template-areas:"price demos" "cta cta" "proof proof";row-gap:14px;align-items:center;padding-top:14px} .hero__price .num{font-size:30px} .hero--v2 .hero__cta{display:contents} .hero--v2 .hero__cta .btn{grid-area:cta;width:100%;padding:0 20px;white-space:normal;text-align:center} .hero--v2 .hero__cta .btn-text{grid-area:demos;justify-self:end} .hero--v2 .hero__proof{gap:6px 14px} .hero__proof .more{margin-left:0} .hero__marquee .marquee__inner{font-size:15px} } /* ---------- Catalogo de 8 demos: el marco de celular se ajusta a la columna ---------- */ .demo-card{padding:18px} .demo-card__device{width:220px} /* 4 columnas a 1280: la tarjeta mide ~285 px */ .demo-card__frame{transform:scale(.564)} /* 220 / 390 */ @media (min-width:1600px){.demo-card__device{width:250px}.demo-card__frame{transform:scale(.641)}} @media (max-width:1279px){.demo-card__device{width:240px}.demo-card__frame{transform:scale(.615)}} @media (max-width:1023px){.demo-card__device{width:260px}.demo-card__frame{transform:scale(.667)}} @media (max-width:699px){.demo-card{padding:24px}.demo-card__device{width:280px}.demo-card__frame{transform:scale(.718)}}