plano que envuelve .cta-band en las páginas de producto, etc.) que no estaban en la lista y se veían blancas — cualquier sección nueva o sin tocar volvía a romper la continuidad. Fix real: la textura vive UNA sola vez, en , fija al viewport. Las secciones claras (abajo se les quita su background-color propio, quedan transparentes) dejan verla tal cual, sin importar cuántas secciones haya ni si alguna quedó sin revisar. Las oscuras (.about, .cta-band, footer, .grid-bento .card, etc.) siguen con SU propio fondo opaco, que tapa la textura ahí donde corresponde — eso no cambia. */ /* v3 de la textura (uniforme, sin glow ni degradado marcado) — aprobada. La capa de grano aparte (body::after, multiply) se probó y se quitó: el multiply oscurecía de más las secciones oscuras (.about, footer, cta-band), se veía como un cambio brusco no buscado. Solo la imagen, sin grano extra. */ body{ font-family:var(--font);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden; background-color:var(--bg-mint); background-image:url(img/hero-bg-texture.jpg); background-attachment:fixed; background-size:cover; background-position:center; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .container{max-width:var(--maxw);margin:0 auto;padding:0 24px} .container-sm{max-width:920px;margin:0 auto;padding:0 24px} h1,h2,h3{letter-spacing:-.025em} h1,h2{line-height:1.08} h1{font-size:clamp(36px,5.2vw,62px);font-weight:700} h2{font-size:clamp(28px,3.8vw,46px);font-weight:700} /* 1.08 funciona en escritorio porque el H1 rara vez pasa de 2 líneas. En mobile el piso del clamp (36px) fuerza títulos largos a 3-5 líneas y ese interlineado tan ajustado se lee denso/apretado. */ @media(max-width:600px){h1,h2{line-height:1.18}} h3{font-size:22px;font-weight:600;line-height:1.3} .lead{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:640px;line-height:1.55} .gradient-text{background:linear-gradient(100deg,var(--green-dark),var(--green-2));-webkit-background-clip:text;background-clip:text;color:transparent} section{padding:72px 0;position:relative} .section-head{text-align:center;max-width:760px;margin:0 auto 44px} .section-head .lead{margin:18px auto 0} /* Section Badges / Eyebrow Pills — antes: pastilla verde sólida, repetida en el encabezado de CADA sección de las 9 páginas (es, con diferencia, el elemento verde que más se repite en todo el sitio). Ahora usa el mismo lenguaje de "tinte suave" que .ic-box, para quedar consistente y aligerar esa repetición sin perder la función de wayfinding de la pastilla. */ .eyebrow, .agent-badge{ display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--green-dark);margin-bottom:20px; padding:7px 16px 7px 12px;border-radius:999px;position:relative;overflow:hidden; background:var(--green-50);box-shadow:none; } .eyebrow .ic, .agent-badge .ic{position:relative;width:16px;height:16px} .eyebrow .ic-box{background:none;box-shadow:none;width:auto;height:auto;border-radius:0;overflow:visible} .eyebrow .ic-box::before{content:none} .eyebrow.dark, .agent-badge.dark{box-shadow:none} /* icons */ .ic{width:24px;height:24px;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .ic-sm{width:18px;height:18px} /* ---------- Icono 3D "Modern Depth" — .ic-box es la base compartida por toda la landing: tarjetas, pasos numerados, hero-chips, badges de .eyebrow, etc. Gradiente de marca + bisel suave (sin brillo duro / glare) + sombra flotante, mismo tratamiento que los íconos del mega-menú (ver .mega-link .mi.ic-box más abajo). El tono (verde) lo define --ic-top/--ic-bottom/--ic-shadow, sobreescrito por sección vía .tone-* en o en la

(ver reglas .tone-* más abajo). Sin clase = tono base (Compras / neutral). ---------- */ :root{ --ic-top:#1DAA61; --ic-bottom:#1DAA61; --ic-shadow:0,51,26; } /* ic-box — antes: cuadrado verde sólido por defecto, repetido en cada ícono de feature/card/chip del sitio (esto es lo que el CEO señaló: "mucho verde" en los iconos). Ahora: tinte suave por defecto, el verde sólido queda solo para estados activos/seleccionados (.uc-card3d.is-front, .uct-item.active — ver más abajo, sin cambios ahí), que es donde ese acento realmente comunica algo. */ .ic-box{ width:54px;height:54px;border-radius:15px;display:grid;place-items:center; position:relative;overflow:hidden;color:var(--green-dark); background:var(--green-50);box-shadow:none; } .ic-box::before{content:none} .ic-box .ic{width:26px;height:26px;position:relative} .ic-box.ic-box-xs{width:26px;height:26px;border-radius:9px} .ic-box.ic-box-xs .ic{width:14px;height:14px} .ic-box.ic-box-sm{width:38px;height:38px;border-radius:10px} .ic-box.ic-box-sm .ic{width:19px;height:19px} .ic-box.ic-box-lg{width:76px;height:76px;border-radius:50%} .ic-box.ic-box-lg .ic{width:32px;height:32px;stroke-width:1.6} /* un solo tono en toda la landing — las clases .tone-* siguen en el markup pero ya no cambian nada. (Se probó un acento azul aquí tomado de "Botones → Información" — Stefano señaló que ese color es de UTILIDAD, no de PRINCIPALES, y que me fui a "cualquier otra cosa". Revertido: el sistema real no tiene un segundo color de marca, solo verde/neutros — no hay tono principal distinto que darle a esta página sin inventarlo.) */ /* reveal — materialización: entra desenfocado/escalado y se "enfoca" en su lugar (sitewide, todas las secciones marcadas .reveal en las 9 páginas) */ .reveal{opacity:0;transform:translateY(30px) scale(.965);filter:blur(7px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .7s var(--ease-out)} .reveal.in{opacity:1;transform:none;filter:blur(0)} .reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s} .reveal[data-d="5"]{transition-delay:.40s} .reveal[data-d="6"]{transition-delay:.48s} /* buttons */ .btn{position:relative;display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:16px;padding:14px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .16s var(--ease-out),box-shadow .18s,background .18s,color .18s;overflow:hidden} .btn .ic{width:19px;height:19px} /* .btn-primary / .btn-hero-depth: planos — un solo verde de marca, sin gradiente ni sombra interior. Sin border propio para no generar líneas o artefactos ajenos al badge. */ .btn-primary{background:var(--green);color:#fff;border:none;box-shadow:none} .btn-primary:hover{transform:translateY(-2px);background:var(--green-dark);box-shadow:0 8px 20px rgba(29,170,97,.28)} .btn-primary:active{transform:scale(.97);box-shadow:none} .btn-hero-depth{background:var(--green);border:none;box-shadow:none} .btn-hero-depth:hover{background:var(--green-dark);box-shadow:0 8px 20px rgba(29,170,97,.28)} .btn-hero-depth:active{box-shadow:none} .btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--green);color:var(--green-dark);transform:translateY(-2px)} .btn-ghost:active{transform:scale(.97)} .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{transform:translateY(-2px);background:#000} .btn-dark:active{transform:scale(.97)} /* nav CTA — antes: mismo botón verde sólido que el CTA del hero, duplicado en el mismo fold (2 botones verdes visibles a la vez). El CTA que debe ganar la atención es el del hero; el del nav pasa a tinta, mismo patrón que usan Pleo/Ramp (nav CTA neutro, el acento de marca se reserva para el CTA real). */ /* vuelve a verde a pedido explícito — ya no a tinta (antes se diferenciaba del CTA del hero, pero Stefano lo quiere igual al resto de botones). */ .nav-cta .btn-primary{background:var(--green);box-shadow:none} .nav-cta .btn-primary:hover{background:var(--green-dark);box-shadow:none} .btn-wa{background:#fff;color:#0c8a6a;border-color:#cdeede} .btn-wa:hover{background:#0c8a6a;color:#fff;transform:translateY(-2px)} .btn-wa:active{transform:scale(.97)} .btn-lg{padding:16px 32px;font-size:17px} .btn.magnetic{transition:transform .4s var(--ease-out),box-shadow .18s,background .18s,color .18s} /* link-arrow: revertido de azul (era un color de UTILIDAD del sistema — "Botones → Información" — no un color de PRINCIPALES, Stefano lo señaló). Ahora usa Botón Hover (#008235, sí es un color principal del sistema) — un verde más oscuro que el CTA (#1DAA61) para diferenciar link de botón sin salir de la paleta de marca. */ .link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:#008235;transition:color .2s} .link-arrow:hover{color:var(--green-dark)} .link-arrow .ic{width:18px;height:18px;transition:transform .2s} .link-arrow:hover .ic{transform:translateX(4px)} /* barra de progreso de scroll (sitewide) */ .scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,var(--green),var(--green-2));transform:scaleX(0);transform-origin:0 50%;z-index:200;will-change:transform} /* header */ header.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--line);transition:box-shadow .25s var(--ease)} header.nav.scrolled{box-shadow:0 10px 30px rgba(11,40,28,.08)} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px} /* compensa el header sticky (74px + borde) al saltar a CUALQUIER anchor del sitio (mega menú, footer, links entre páginas) — antes era una lista manual de IDs que se quedaba corta cada vez que se agregaba una sección nueva (p.ej. #faq, #cxp, #rendiciones, #compras-pricing y #rendiciones-pricing quedaban tapados por el nav al saltar directo). Selector universal: cero mantenimiento, sin efectos visuales en elementos que nunca son destino de un anchor. */ [id]{scroll-margin-top:100px} .nav-logo img{height:30px} .nav-links{display:flex;gap:28px;align-items:center} .nav-links a{font-size:15px;font-weight:500;color:#3a463f;transition:color .15s} .nav-links a:hover{color:var(--green-dark)} .nav-cta{display:flex;gap:12px;align-items:center} .nav-cta .login{font-weight:600;font-size:15px} .nav-toggle{display:none;background:none;border:0;cursor:pointer;color:var(--ink);padding:9px} .nav-toggle .ic{width:26px;height:26px} @media(max-width:960px){ .nav-links{position:absolute;top:74px;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none} .nav-links.open{display:flex} .nav-links a{padding:15px 24px;width:100%} .nav-toggle{display:block}.nav-cta .login{display:none} /* el botón heredaba el padding/font-size de escritorio (14px 26px / 16px): a 375px de ancho el texto "Agenda una demo" no entraba en una línea, se envolvía a 2 y el pill (border-radius:999px) se inflaba a ~76px de alto, desbordando el header sticky y tapando el logo. */ .nav-cta .btn-primary{padding:10px 16px;font-size:13.5px;gap:6px;white-space:nowrap} .nav-cta .btn-primary .ic{width:15px;height:15px} } /* hero */ /* B2B enterprise-grade: fondo propio (blanco→gris humo), ya no transparente sobre la textura mint del body — el verde ahí competía con el CTA. */ .hero{padding:84px 0 72px;position:relative;overflow:hidden; background:linear-gradient(180deg,#FFFFFF 0%,#F9FAFB 40%,#F3F4F6 100%)} /* blobs decorativos por sección, apagados: con la textura única sitewide se sumaban encima de ella con posición/tamaño distintos por sección y eso era justo lo que se veía "distinto" al pasar de una a otra (carrusel incluido). */ .hero::before,.hero::after{content:none;position:absolute;border-radius:50%;z-index:0} .hero::before{width:560px;height:560px;background:radial-gradient(circle,rgba(52,199,89,.22),transparent 70%);top:-180px;right:-120px;animation:drift 16s var(--ease-in-out) infinite,auroraHue 13s linear infinite alternate} .hero::after{width:420px;height:420px;background:radial-gradient(circle,rgba(29,170,97,.14),transparent 70%);bottom:-160px;left:-100px;animation:drift 20s var(--ease-in-out) infinite reverse,auroraHue 17s linear infinite alternate-reverse} @keyframes drift{0%{transform:translate(0,0) scale(1) rotate(0deg)}50%{transform:translate(46px,-30px) scale(1.18) rotate(10deg)}100%{transform:translate(0,0) scale(1) rotate(0deg)}} @keyframes auroraHue{from{filter:blur(60px) hue-rotate(0deg)}to{filter:blur(60px) hue-rotate(45deg)}} .hero-field,.section-field{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none} /* fallback global: el spotlight de cursor (JS lo inyecta en toda sección, ver app.js) siempre debe quedar detrás del contenido, incluso en páginas sin regla propia */ section>.container{position:relative;z-index:1} .hero .container{position:relative;z-index:1} #rendiciones{overflow:hidden} #rendiciones .container{position:relative;z-index:1} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center} .hero h1{margin-bottom:22px} .hero .lead{margin-bottom:30px} .hero-lead-tight{max-width:560px} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px} /* solo en el carrusel del home (Rendiciones/Compras/Agentes): botones centrados respecto al ancho de las cards de arriba, no pegados a la izquierda. */ .mod-text .hero-ctas{justify-content:center} /* hero-cta-note — antes: sin regla propia, el font-size vivía inline en el HTML (14px, un valor más del cluster de "casi-duplicados" entre 12-17px). Ahora es una clase real, en el mismo paso de escala que .hero-trust (15px). */ .hero-cta-note{font-size:15px;color:var(--muted);margin:-10px 0 22px} .hero-trust{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:15px;font-weight:500;flex-wrap:wrap} .hero-trust-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .hero-trust .stars{color:var(--green);letter-spacing:2px;font-size:15px} .hero-trust b{color:var(--green-dark);font-weight:700;font-size:16.5px} .hero-trust .sep{width:1px;height:16px;border-radius:1px;background:rgba(15,23,42,.15);flex:none} .hero-visual{position:relative;perspective:1400px} .device{position:relative;width:80%;margin:0 auto;border-radius:32px;background:#fff;padding:0;box-shadow:var(--shadow-lg)} .device img{width:100%;border-radius:32px;display:block} /* hero-chip — antes: con sombra propia, competía en elevación con el botón CTA (única zona de énfasis que debería tener ese tratamiento, según critique-visual-hierarchy). Ahora: plano, solo el borde lo separa del fondo. */ .hero-chip{position:absolute;opacity:0;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:none;padding:13px 16px;font-weight:600;font-size:14px;display:flex;gap:11px;align-items:center;animation:floaty 4.5s ease-in-out infinite,chipFade .8s var(--ease-out) 1s forwards} .hero-chip .ic-box{width:38px;height:38px;border-radius:11px}.hero-chip .ic-box .ic{width:20px;height:20px} .hero-chip small{display:block;color:var(--muted);font-weight:500;font-size:12px} .hero-chip.c1{top:14%;left:-7%} .hero-chip.c2{bottom:12%;right:-5%;animation-delay:1.6s,1.2s} .hero-chip.c3{top:50%;right:-9%;animation-delay:.8s,1.1s} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}} @keyframes chipFade{from{opacity:0}to{opacity:1}} /* entrada cinematográfica del hero (una sola vez, al cargar la página) */ @keyframes heroIn{from{opacity:0;transform:translateY(22px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}} @keyframes frameIn{from{opacity:0;transform:scale(.94);filter:blur(14px)}to{opacity:1;transform:scale(1);filter:blur(0)}} .hero .eyebrow{animation:heroIn .8s var(--ease-out) both} .hero h1{animation:heroIn .9s var(--ease-out) .1s both} .hero .lead{animation:heroIn .9s var(--ease-out) .2s both} .hero-ctas{animation:heroIn .9s var(--ease-out) .3s both} .hero-trust{animation:heroIn .9s var(--ease-out) .4s both} .hero-visual{animation:heroIn 1s var(--ease-out) .25s both} .hero .app-frame{animation:frameIn 1s var(--ease-out) .45s backwards} @media(max-width:880px){ .hero-grid{grid-template-columns:1fr;text-align:center} .hero .lead{margin-inline:auto}.hero-ctas,.hero-trust{justify-content:center} .hero-chip{display:none}.device{width:74%} } /* clientes — réplica exacta del landing original (filas con scroll continuo) */ .trusted-by{background:transparent;color:#000;padding:40px 0;position:relative;overflow:hidden} .trusted-by .container{max-width:1280px;padding:0;position:relative;z-index:1} .trusted-by-title{color:#000;font-size:20px;margin:20px auto;padding:0 16px;text-align:center;font-weight:600} .trusted-by-card{position:relative;z-index:10;padding:24px 0 8px} .trusted-by-wrapper{overflow:hidden;padding:20px 0;position:relative;width:100%} .trusted-by-wrapper:before,.trusted-by-wrapper:after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none} .trusted-by-wrapper:before{left:0;background:linear-gradient(90deg,#fff 0,transparent)} .trusted-by-wrapper:after{right:0;background:linear-gradient(270deg,#fff 0,transparent)} .trusted-by-logos{display:flex;align-items:center;width:max-content;margin-bottom:16px;animation:scroll-logos 45s linear infinite;will-change:transform} .trusted-by-wrapper:hover .trusted-by-logos{animation-play-state:paused} /* margin-right (en vez de gap) hace que cada copia sea idéntica, incluido el espacio final, para que translateX(-50%) cierre el loop sin ningún salto */ .logo-placeholder{background:#fff;border-radius:8px;flex-shrink:0;height:60px;width:120px;margin-right:60px;opacity:.85;transition:opacity .2s} .logo-placeholder:hover{opacity:1} .logo-placeholder img{display:block;height:100%;width:100%;object-fit:contain} @keyframes scroll-logos{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* feature cards grid */ .cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} /* antes sin sombra en reposo — dependía solo del contraste de color contra el fondo para leerse como superficie. Con el fondo ahora texturado y con tono variable (glow verde), ese contraste ya no alcanza: la card se pierde. Sombra permanente y sutil, más marcada en hover, para que la superficie se lea sin importar qué haya detrás. */ /* gris (#eef1f2) → blanco: ese gris asumía que .card vivía sobre secciones blancas/planas (por eso daba contraste ahí). Con el fondo único con textura sitewide esa premisa ya no existe — el mismo blanco que ya funciona bien en .feat-card (compras.html) unifica el resto. */ .card{border:1px solid transparent;border-radius:var(--radius);padding:32px;background:#fff;box-shadow:var(--shadow-sm);transition:.22s var(--ease);min-width:0} .card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)} .card h3{font-size:19px;margin:18px 0 9px} .card p{color:var(--ink-2);font-size:15.5px;line-height:1.5} @media(max-width:880px){.cards-grid{grid-template-columns:1fr}} /* ---- Beneficios > Por perfil: acordeón vertical con video B-roll sincronizado ---- */ .perfil-panel{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;max-width:1080px;margin:0 auto} .perfil-list{display:flex;flex-direction:column;gap:14px} .perfil-item{border-left:4px solid transparent;border-radius:0 20px 20px 0;transition:background .25s var(--ease),border-color .25s var(--ease)} .perfil-item:not(.is-active):hover{background:var(--bg-soft)} .perfil-item-head{display:block;width:100%;text-align:left;background:none;border:0;padding:28px;cursor:pointer;font:inherit} .perfil-item-head h3{font-size:21px;font-weight:600;color:var(--muted-2);letter-spacing:-.01em;transition:color .2s} .perfil-item-body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease-out)} .perfil-item-body p{color:var(--ink-2);font-size:16px;line-height:1.7;max-width:400px;padding:0 28px 28px} .perfil-item.is-active{background:var(--green-50);border-left-color:var(--green)} .perfil-item.is-active .perfil-item-head h3{color:var(--green-dark);font-weight:800} .perfil-media{display:flex;align-items:flex-start;justify-content:center} .perfil-video-wrap{position:relative;width:100%;max-width:380px;aspect-ratio:4/5;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--bg-dark)} #perfilVideo{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s ease} #perfilVideo.is-fading{opacity:0} @media(prefers-reduced-motion:reduce){.perfil-item-body,#perfilVideo{transition:none}} @media(max-width:880px){ .perfil-panel{grid-template-columns:1fr;gap:32px} .perfil-video-wrap{max-width:100%} } /* Bento grid — variante asimétrica (usada en Rendiciones > Virtudes) */ .cards-grid.grid-bento{grid-auto-rows:min-content} .cards-grid.grid-bento .card{border-radius:24px;padding:24px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)} .cards-grid.grid-bento .card:hover{transform:translateY(-4px)} .cards-grid.grid-bento .card--wide{grid-column:span 2} .cards-grid.grid-bento .card--wide .vig{min-height:170px} .cards-grid.grid-bento .card--tall{grid-row:span 2;display:flex;flex-direction:column;justify-content:center} .cards-grid.grid-bento .card--tall .vig{flex:1;min-height:0} @media(max-width:880px){.cards-grid.grid-bento .card--wide,.cards-grid.grid-bento .card--tall{grid-column:span 1;grid-row:span 1}} /* ---- Dark mode de las tarjetas (fondo verde oscuro + caja interior verde difuso) ---- */ .grid-bento .card{background:linear-gradient(160deg,#0a1b15,#123a29);border:1px solid rgba(52,199,89,.25);box-shadow:0 10px 34px rgba(0,0,0,.28)} .grid-bento .card:hover{border-color:rgba(52,199,89,.42);box-shadow:0 18px 46px rgba(0,0,0,.36)} .grid-bento .card h3{color:#fff;font-size:22px;font-weight:700;margin:20px 0 10px;letter-spacing:-.01em} .grid-bento .card p{color:rgba(216,247,228,.8);font-size:16px;line-height:1.65} @media(min-width:1024px){.grid-bento .card h3{font-size:24px}} .grid-bento .vig{background:radial-gradient(circle at 30% 22%,rgba(52,199,89,.32),rgba(18,58,41,.4) 55%,rgba(8,18,14,.3) 100%);border:1px solid rgba(52,199,89,.22);padding:20px;margin-bottom:16px;min-height:150px} .grid-bento .vchip{background:rgba(8,20,15,.55);border-color:rgba(255,255,255,.1);color:#eafaf1;box-shadow:none;backdrop-filter:blur(6px)} .grid-bento .vchip.ok{background:rgba(52,199,89,.18);border-color:rgba(52,199,89,.38);color:#d8f7e4} .grid-bento .vchip.warn{background:rgba(240,200,80,.15);border-color:rgba(240,200,80,.32);color:#f6e2a0} .grid-bento .vchip.warn .ic{color:#f0c850} .grid-bento .vdot{box-shadow:0 0 0 4px rgba(52,199,89,.28)} /* ---- Micro-animaciones por tarjeta — SIEMPRE dibujadas y visibles; el hover solo inyecta movimiento ---- Regla: nada usa opacity:0 / scale(0) / display:none por defecto. Cada pieza ya está en su posición final en reposo; .card:hover activa la keyframe-animation. Los ciclos están escritos para iniciar y terminar en el MISMO estado de reposo (loop sin saltos) o usan animation-direction: alternate, así que al soltar el mouse el movimiento simplemente se detiene donde está — sin parpadeos. Respeta reduced-motion. */ /* Tarjeta 1 — Captura por foto: escaneo rápido, luego las píldoras hacen pop-up en secuencia */ .grid-bento .c-scan .vdoc{overflow:hidden} .grid-bento .c-scan .claser{position:absolute;left:6px;right:6px;top:6%;height:2px;border-radius:2px;background:#4ade80;box-shadow:0 0 10px #4ade80,0 0 22px rgba(74,222,128,.55)} .grid-bento .card.c-scan:hover .claser{animation:claserSweep .8s ease-in-out infinite alternate;animation-delay:0s} @keyframes claserSweep{0%{top:6%}100%{top:88%}} .grid-bento .card.c-scan:hover .vcol .vchip{animation:cpillPopIn .45s cubic-bezier(.34,1.56,.64,1) both} .grid-bento .card.c-scan:hover .vcol .vchip:first-child{animation-delay:.8s} .grid-bento .card.c-scan:hover .vcol .vchip:last-child{animation-delay:.92s} @keyframes cpillPopIn{0%{transform:scale(0)}65%{transform:scale(1.1)}100%{transform:scale(1)}} /* Tarjeta 2 — Validación SUNAT: pill y escudo visibles; micro-rebote + pulso de brillo en hover */ .grid-bento .card.c-sunat:hover .cpop{animation:cpopBounce 1s ease-in-out infinite;animation-delay:0s!important;transition-delay:0s!important} .grid-bento .card.c-sunat:hover .cshield{animation:cshieldPulse 1s ease-in-out infinite;animation-delay:0s!important;transition-delay:0s!important} @keyframes cpopBounce{0%,100%{transform:scale(1)}20%{transform:scale(1.12)}35%{transform:scale(.96)}50%{transform:scale(1.03)}65%,100%{transform:scale(1)}} @keyframes cshieldPulse{0%,100%{filter:drop-shadow(0 0 0 rgba(74,222,128,0))}30%{filter:drop-shadow(0 0 6px rgba(74,222,128,.95))}60%,100%{filter:drop-shadow(0 0 0 rgba(74,222,128,0))}} /* Tarjeta 3 — Aprobaciones a tu medida: nodo visible sobre el conector; viaja de ida y vuelta en hover */ .grid-bento .c-approvals .vwire{overflow:visible} .grid-bento .c-approvals .cnode{position:absolute;top:50%;left:0;width:8px;height:8px;margin-top:-4px;margin-left:-1px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.9)} .grid-bento .card.c-approvals:hover .cnode{animation:cnodeTravel .6s ease-out infinite alternate;animation-delay:0s} @keyframes cnodeTravel{0%{left:0}100%{left:calc(100% - 6px)}} .grid-bento .card.c-approvals:hover .cpop{animation:cpopBounce 1.8s ease-in-out infinite;animation-delay:.2s} /* Tarjeta 4 — Caja chica bajo control: notificaciones visibles; rebote + campana "ring" en hover */ .grid-bento .c-cashbox .vig{padding:20px 16px;min-height:150px;gap:14px} .grid-bento .c-cashbox .vchip{width:100%;justify-content:center} .grid-bento .card.c-cashbox:hover .cpop{animation:cpopBounce 1s ease-in-out infinite;animation-delay:0s!important;transition-delay:0s!important} .grid-bento .c-cashbox .cbell{transform-origin:50% 15%} .grid-bento .card.c-cashbox:hover .cbell{animation:cbellRing 1.6s ease-in-out infinite;animation-delay:0s!important;transition-delay:0s!important} .grid-bento .card.c-cashbox:hover .vdot{animation:pulse 1.4s ease-in-out infinite;animation-delay:0s!important;transition-delay:0s!important} @keyframes cbellRing{0%,100%{transform:rotate(0)}6%{transform:rotate(-10deg)}12%{transform:rotate(10deg)}18%{transform:rotate(-8deg)}24%{transform:rotate(8deg)}30%{transform:rotate(-4deg)}38%,100%{transform:rotate(0)}} /* Tarjeta 5 — Visibilidad total: barras ya en su altura final y grandes; oscilan "en vivo" en hover */ .grid-bento .c-bars .vig{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px} .grid-bento .c-bars .vbars{flex:1;width:100%;height:auto;gap:12px;padding:0 6px;justify-content:center;margin:0 auto} .grid-bento .c-bars .vbars i{flex:1;max-width:40px;border-radius:9px 9px 3px 3px} .grid-bento .card.c-bars:hover .vbars i{animation:cbarLive 1.6s ease-in-out infinite} .grid-bento .card.c-bars:hover .vbars i:nth-child(1){animation-delay:0s} .grid-bento .card.c-bars:hover .vbars i:nth-child(2){animation-delay:.08s} .grid-bento .card.c-bars:hover .vbars i:nth-child(3){animation-delay:.16s} .grid-bento .card.c-bars:hover .vbars i:nth-child(4){animation-delay:.24s} .grid-bento .card.c-bars:hover .vbars i:nth-child(5){animation-delay:.32s} @keyframes cbarLive{0%,100%{transform:scaleY(1)}25%{transform:scaleY(1.08)}55%{transform:scaleY(.93)}80%{transform:scaleY(1.04)}} .grid-bento .card.c-bars:hover .vchip.ok{animation:cglowPulse 1.6s ease-in-out infinite} @keyframes cglowPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 14px rgba(74,222,128,.35)}} /* Tarjeta 6 — Exporta a tu contabilidad: cajas 3D, líneas y partículas ya dibujadas; viajan rápido en hover */ .grid-bento .c-erp .vig{padding:14px 10px} .grid-bento .cerp-flow{display:block;overflow:visible;width:100%;height:auto} .grid-bento .cbox-face{fill:rgba(255,255,255,.07);stroke:rgba(74,222,128,.5);stroke-width:1.25} .grid-bento .cbox-top{fill:rgba(120,235,164,.32)} .grid-bento .cbox-front{fill:rgba(52,199,89,.22)} .grid-bento .cbox-side{fill:rgba(8,26,18,.65)} .grid-bento .cbox-mark{fill:#eafaf1;font-weight:800;font-size:11px;text-anchor:middle} .grid-bento .cerp-path{stroke:rgba(74,222,128,.4);stroke-width:1.5;stroke-dasharray:3 5;fill:none;transition:stroke .3s var(--ease)} .grid-bento .card.c-erp:hover .cerp-path{stroke:rgba(74,222,128,.65)} .grid-bento .cerp-packet{fill:#4ade80;filter:drop-shadow(0 0 4px rgba(74,222,128,.95));offset-distance:0%;transition:offset-distance .6s var(--ease)} .grid-bento .card.c-erp:hover .cerp-packet{animation:cpacketTravel linear infinite;animation-duration:var(--pdur,1.8s);animation-delay:var(--pdelay,0s)} @keyframes cpacketTravel{0%{offset-distance:0%}100%{offset-distance:100%}} @media(prefers-reduced-motion:reduce){ .grid-bento .claser,.grid-bento .cnode,.grid-bento .cpop,.grid-bento .cshield,.grid-bento .cbell,.grid-bento .vdot,.grid-bento .c-bars .vbars i,.grid-bento .c-bars .vchip.ok,.grid-bento .cerp-packet,.grid-bento .c-scan .vcol .vchip{animation:none!important} } /* ── MÓDULOS · carrusel horizontal (compras.html) ───────────────────────────── Clona el formato oscuro del Home (.mod-dark, ver sección "MÓDULO COMPRAS/CXP" en index.html): mismo fondo verde-esmeralda, mismo badge .eyebrow.dark, mismo grid de píldoras .subopts. Cada slide es un .mod-dark de ancho completo dentro de una pista flex que se desliza con transform (ver módulo "MÓDULOS-CARRUSEL" en app.js). El video es la escena .jv-cine de siempre, ahora limpia — sin overlays flotantes encima. */ /* fondo propio (antes transparent → texture mint del body): las 3 slides ya son claras (ver nota de .cxc-tab más abajo), pero el viewport seguía dejando pasar el verde de fondo global. Gris para que se note el corte contra las secciones blancas (Clientes arriba, Ecosistema abajo). */ .cxc-viewport{overflow:hidden;position:relative;background:#F3F4F6} .cxc-track{display:flex;width:100%;transition:transform .6s cubic-bezier(.65,0,.35,1)} /* flex por defecto estira los slides a la altura del más alto (align-items:stretch); sin este display:flex+justify-content:center en el propio slide, el contenido más corto queda pegado arriba con todo el espacio sobrante debajo en vez de repartido. El padding-top extra (vs. 88px del resto) reserva el hueco para .cxc-tabs, que flota superpuesta (position:absolute) sobre el propio slide — sin wrapper ni fondo propio — para que la píldora de tabs y el título compartan el mismo verde continuo del slide activo, sin importar cuál de los 3 módulos esté mostrando. */ .cxc-slide{flex:0 0 100%;min-width:100%;padding:112px 0 40px;display:flex;flex-direction:column;justify-content:center} .cxc-slide .split-media{position:relative;display:flex;justify-content:center} .cxc-slide .jv-cine{margin:0 auto} .cxc-controls{margin-top:28px} /* Barra de tabs del carrusel de módulos (reemplaza flechas): un botón-píldora por slide. Vive superpuesta (absolute) sobre el slide activo, sin fondo ni wrapper propio, para que se sienta como un control integrado en la sección verde y no como un header aislado. Activo = "Modern Depth UI" (relieve 3D con inner shadows); inactivo = glassmorphism oscuro sutil. */ .cxc-tabs{position:absolute;top:0;left:0;right:0;display:flex;justify-content:center; flex-wrap:wrap;gap:16px;padding:40px 24px 0;z-index:5} /* cxc-tab — antes: "glassmorphism oscuro sutil" (blanco translúcido al 10% sobre fondo oscuro). Con las 3 slides ahora claras, esa pastilla translúcida se volvía invisible — no parecía un botón. Ahora: control segmentado normal en claro (blanco + borde), mismo patrón que el selector "Small/Medium/Enterprise" de Pleo. */ .cxc-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:999px; font-size:14px;font-weight:600;cursor:pointer;transition:all .2s var(--ease); background:#fff;border:1px solid var(--line);color:var(--ink-2);box-shadow:var(--shadow-sm)} .cxc-tab .ic{width:17px;height:17px;flex:none} .cxc-tab:hover{background:var(--bg-soft);color:var(--ink);border-color:var(--green-100);transform:translateY(-1px)} .cxc-tab:active{transform:translateY(0) scale(.97)} .cxc-tab.active{background:var(--green);color:#fff;border:none;box-shadow:none} .cxc-tab.active:hover{background:var(--green);color:#fff;transform:none;box-shadow:none} @media(max-width:620px){ /* las 3 etiquetas ("Rendiciones de gastos", "Compras y cuentas por pagar", "Agentes de IA") no caben ni de a 2 en 375px — con flex-wrap se apilaban en 3 píldoras sueltas una debajo de otra, perdiendo el aspecto de control segmentado. Se pasa a scroll horizontal (patrón tab-bar mobile estándar). */ .cxc-tabs{gap:8px;padding:24px 16px 0;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .cxc-tabs::-webkit-scrollbar{display:none} .cxc-tab{padding:8px 16px;font-size:12.5px;flex:none} .cxc-tab .ic{width:15px;height:15px} } /* Escena del módulo Pagos: un personaje (cabeza con la silueta exacta del ícono i-bot — orejas, antena, ojos — pero como forma sólida verde, no un ícono dentro de una caja) entra volando de izquierda a derecha, extiende el brazo y dispara 3 notificaciones que van apareciendo de arriba hacia abajo. Nada se desvanece durante el sostenido: opacidad SIEMPRE explícita en cada keyframe intermedio (si no, el navegador interpola linealmente hacia el próximo keyframe con opacity y todo se ve "lavado"). 100% CSS, sin WAAPI/data-seg (no forma parte de la escena .jv-cine principal). */ .pg-stage{--pgd:8.5s;position:relative} .pg-char-wrap{position:absolute;left:26%;top:50%;transform:translate(-50%,-50%)} .pg-char{position:relative;filter:drop-shadow(0 22px 24px rgba(6,20,13,.32)); transform:translateX(-520%) rotate(-8deg)} /* estado de reposo: fuera de cuadro hasta que .pg-run arranca el loop */ .pg-stage.pg-run .pg-char{animation:pgFly var(--pgd) ease-in-out infinite} .pg-char::after{content:"";position:absolute;left:50%;bottom:-12px;transform:translateX(-50%); width:64%;height:16px;border-radius:50%;background:rgba(6,20,13,.28);filter:blur(7px);z-index:0} /* Bob vertical sutil independiente del vuelo horizontal — el personaje nunca queda perfectamente estático, finge estar flotando/volando todo el rato. */ .pg-bob{display:flex;flex-direction:column;align-items:center} .pg-stage.pg-run .pg-bob{animation:pgBob var(--pgd) ease-in-out infinite} @keyframes pgBob{ 0%,22%{transform:translateY(0)} 35%{transform:translateY(-7px)} 48%{transform:translateY(0)} 61%{transform:translateY(-7px)} 74%,100%{transform:translateY(0)} } /* Cabeza: silueta sólida (no ícono en caja) que imita la forma del i-bot — orejas laterales, antena y ojos — toda en verde. */ .pg-head{position:relative;z-index:2;width:70px;height:56px;border-radius:18px; background:radial-gradient(circle at 35% 30%,#5be79b,#1DAA61 55%,#0c7a45)} .pg-ear{position:absolute;top:50%;transform:translateY(-50%);width:6px;height:18px; border-radius:3px;background:#1DAA61} .pg-ear.l{left:-10px}.pg-ear.r{right:-10px} .pg-antenna{position:absolute;top:-13px;left:50%;transform:translateX(-50%);width:3px;height:11px; background:#1DAA61;border-radius:2px} .pg-antenna::after{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%); width:7px;height:7px;border-radius:50%;background:#1DAA61} .pg-eye{position:absolute;top:19px;width:9px;height:9px;border-radius:50%;background:#06140d} .pg-eye.l{left:16px}.pg-eye.r{right:16px} .pg-body{position:relative;width:78px;height:114px;margin-top:7px; border-radius:50% 50% 46% 46%/60% 60% 38% 38%; background:radial-gradient(circle at 35% 22%,#5be79b,#1DAA61 55%,#0c7a45); box-shadow:inset 0 -14px 30px rgba(0,0,0,.16)} .pg-arm{position:absolute;top:10px;width:10px;height:58px;border-radius:7px; background:linear-gradient(180deg,#5be79b,#1DAA61)} .pg-arm.l{left:-23px;transform-origin:top center;transform:rotate(10deg)} .pg-arm.r{right:-23px;transform-origin:top center;transform:rotate(10deg)} .pg-stage.pg-run .pg-arm.r{animation:pgArm var(--pgd) ease-in-out infinite} @keyframes pgFly{ 0%{transform:translateX(-520%) rotate(-8deg)} 18%{transform:translateX(0) rotate(2deg)} 22%,88%{transform:translateX(0) rotate(0)} 100%{transform:translateX(-520%) rotate(-8deg)} } @keyframes pgArm{ 0%,20%{transform:rotate(10deg)} 26%{transform:rotate(-42deg)} 30%,88%{transform:rotate(-22deg)} 100%{transform:rotate(10deg)} } .pg-notes{position:absolute;right:6%;top:50%;transform:translateY(-50%);z-index:3; display:flex;flex-direction:column;gap:0} .pg-note{position:relative;display:flex;align-items:center;gap:10px;max-width:230px; background:#fff;border:1px solid var(--line);padding:10px 13px; box-shadow:var(--shadow-sm);opacity:0} .pg-note:first-child{border-radius:12px 12px 0 0} .pg-note:last-child{border-radius:0 0 12px 12px} .pg-note:not(:first-child):not(:last-child){border-radius:0} .pg-note:not(:first-child){border-top:none} .pg-note b{display:block;font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap} .pg-note small{display:block;font-size:11px;color:var(--muted);margin-top:1px;white-space:nowrap} .pg-note-ic{flex:none;width:30px;height:30px;border-radius:9px;background:var(--green-50); color:var(--green-dark);display:grid;place-items:center} .pg-note-ic .ic{width:16px;height:16px} .pg-stage.pg-run .pg-note.n1{animation:pgNote1 var(--pgd) ease-in-out infinite} .pg-stage.pg-run .pg-note.n2{animation:pgNote2 var(--pgd) ease-in-out infinite} .pg-stage.pg-run .pg-note.n3{animation:pgNote3 var(--pgd) ease-in-out infinite} @keyframes pgNote1{ 0%,18%{opacity:0;transform:translateX(18px) scale(.92)} 24%{opacity:1;transform:translateX(0) scale(1.02)} 28%{opacity:1;transform:translateX(0) scale(1)} 88%{opacity:1;transform:translateX(0) scale(1)} 96%,100%{opacity:0;transform:translateX(12px) scale(.94)} } @keyframes pgNote2{ 0%,30%{opacity:0;transform:translateX(18px) scale(.92)} 36%{opacity:1;transform:translateX(0) scale(1.02)} 40%{opacity:1;transform:translateX(0) scale(1)} 88%{opacity:1;transform:translateX(0) scale(1)} 96%,100%{opacity:0;transform:translateX(12px) scale(.94)} } @keyframes pgNote3{ 0%,42%{opacity:0;transform:translateX(18px) scale(.92)} 48%{opacity:1;transform:translateX(0) scale(1.02)} 52%{opacity:1;transform:translateX(0) scale(1)} 88%{opacity:1;transform:translateX(0) scale(1)} 96%,100%{opacity:0;transform:translateX(12px) scale(.94)} } @media(max-width:640px){.pg-note{max-width:170px;padding:8px 10px}.pg-note b{font-size:11.5px;white-space:normal}.pg-note small{white-space:normal}} @media(prefers-reduced-motion:reduce){ .pg-char{transform:none} .pg-note{opacity:1;transform:none} } /* Grid de características con ícono + mini-descripción (recicla el ícono .mi del mega-menú de navegación, ver .mega-link en este mismo archivo), adaptado a fondo oscuro. Clase propia (no .subopts) para no afectar los otros usos de .subopts (pills simples) en index.html/rendiciones. */ .feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 0} .feat-card{display:flex;align-items:flex-start;gap:14px;padding:16px;border-radius:14px; background:#fff;border:1px solid transparent;box-shadow:var(--shadow-sm);transition:.2s var(--ease)} .feat-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)} .feat-ic{flex:0 0 38px} .feat-title{font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.25} .feat-desc{font-size:13.5px;color:var(--ink-2);margin-top:3px;line-height:1.45} @media(max-width:560px){.feat-grid{grid-template-columns:1fr}} /* Escena más compacta en alto SIN deformar la composición: ensancho la stage a 1/escala y la escalo desde arriba-izq → renderiza al 100% del ancho de la columna angosta pero con menos alto. */ @media(max-width:980px){ .cxc-slide .jv-cine{max-width:600px;margin-inline:auto} .cxc-slide .jv-stage{width:125%;height:456px;transform:scale(.8);transform-origin:top left;margin-bottom:-91px} } @media(max-width:600px){ .cxc-slide{padding:96px 0 32px} .cxc-slide .jv-cine{max-width:none;padding:14px;border-radius:20px} .cxc-slide .jv-head{margin-bottom:9px} .cxc-slide .jv-stage{width:181.82%;transform:scale(.55);margin-bottom:-205px} } @media(prefers-reduced-motion:reduce){.cxc-track{transition:none}} /* ── Casos de uso · carrusel orbital 3D (billboard sobre elipse) ───────────── */ .usecases .section-head{margin-bottom:20px} .uc-orbit{--uc-ease:cubic-bezier(.16,1,.3,1)} .uc-stage{position:relative;height:270px;margin:0 auto;max-width:1000px;perspective:1400px} .uc-card3d{ position:absolute;left:50%;top:50%;width:300px; border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:#fff; box-shadow:var(--shadow);cursor:pointer; transform:translate(-50%,-50%);transform-origin:center;backface-visibility:hidden; transition:transform .62s var(--uc-ease),opacity .62s var(--uc-ease),filter .62s var(--uc-ease),box-shadow .3s var(--ease),border-color .3s var(--ease); will-change:transform,opacity,filter} .uc-card3d-head{display:flex;align-items:center;gap:12px;margin-bottom:10px} .uc-card3d-head h3{font-size:16.5px;margin:0} .uc-card3d p{color:var(--ink-2);font-size:14px;line-height:1.5} .uc-card3d.is-front{border-color:var(--green-100);box-shadow:0 30px 70px rgba(11,40,28,.18)} .uc-card3d.is-front .ic-box{ background:var(--green);border-color:var(--green);color:#fff;box-shadow:none; } .uc-card3d:not(.is-front){cursor:pointer} .uc-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:14px} .uc-arrow{width:50px;height:50px;flex:none;display:grid;place-items:center;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;box-shadow:var(--shadow-sm);transition:.2s var(--ease)} .uc-arrow .ic{width:22px;height:22px} .uc-arrow:hover{border-color:var(--green);color:var(--green-dark);transform:translateY(-2px);box-shadow:0 12px 26px rgba(29,170,97,.22)} .uc-arrow:active{transform:translateY(0) scale(.96)} .uc-arrow.prev .ic{transform:rotate(180deg)} .uc-dots{display:flex;align-items:center;gap:9px} .uc-dot{position:relative;width:9px;height:9px;padding:0;border:none;border-radius:999px;background:var(--green-100);cursor:pointer;transition:.3s var(--uc-ease)} /* el punto visual mide 9px pero el área de toque real se agranda a 40px con un ::before invisible, sin cambiar el tamaño que se ve (patrón estándar de hit-area accesible para controles chicos). */ .uc-dot::before{content:"";position:absolute;inset:-15px} .uc-dot:hover{background:var(--green-2)} .uc-dot.active{width:26px;background:var(--green)} /* Móvil: se desactiva la órbita 3D y colapsa a carrusel plano deslizante */ @media(max-width:880px){ .uc-stage{height:auto;perspective:none;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:6px 20px 16px;scrollbar-width:none} .uc-stage::-webkit-scrollbar{display:none} .uc-card3d{position:static;left:auto;top:auto;flex:0 0 80%;max-width:320px;width:auto;scroll-snap-align:center; transform:none!important;opacity:1!important;filter:none!important;box-shadow:var(--shadow-sm)} .uc-card3d.is-front{box-shadow:var(--shadow)} } /* casos de uso (tabs) */ .usecases{background:var(--bg-soft)} .uc-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:42px} .uc-tab{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:15px;color:#46524b;cursor:pointer;transition:.18s var(--ease)} .uc-tab .ic{width:18px;height:18px} .uc-tab:hover{border-color:var(--green);color:var(--green-dark)} .uc-tab.active{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 10px 24px rgba(29,170,97,.3)} .uc-panel{display:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden} .uc-panel.active{display:grid;grid-template-columns:1.05fr .95fr;animation:ucfade .35s var(--ease)} @keyframes ucfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .uc-content{padding:48px} .uc-content .ic-box{margin-bottom:18px} .uc-content h3{font-size:27px;margin-bottom:13px} .uc-pain{color:var(--muted);font-size:16px;margin-bottom:22px} /* chip-cat — reutiliza 6 de los 10 pares fondo/texto reales del sistema de diseño (design-system#colors, "chips de categoría") para dar identidad de color a cada caso de uso en casos-de-uso.html. Vive solo dentro del panel del acordeón, así que nunca se ven dos colores a la vez (un panel abierto por vez) — no repite el tinte-por-ícono sitewide que ya se descartó por "colorinche". */ .chip-cat{display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.02em;padding:6px 14px;border-radius:999px;margin-bottom:16px} .chip-cat-blue{background:#CFDFFF;color:#102046} .chip-cat-cyan{background:#D0F0FD;color:#04283F} .chip-cat-amber{background:#FFEAB6;color:#3B2501} .chip-cat-peach{background:#FEE2D5;color:#6B2613} .chip-cat-lavender{background:#EDE3FE;color:#280B42} .chip-cat-gray{background:#EEEEEE;color:#040404} .uc-list{list-style:none;display:grid;gap:14px;margin-bottom:28px} .uc-list li{display:flex;gap:12px;font-size:15.5px;align-items:flex-start} .uc-list .ic{width:22px;height:22px;color:var(--green);flex:0 0 22px;margin-top:1px} .uc-result{display:inline-flex;align-items:center;gap:10px;background:var(--green-50);color:var(--green-dark);font-weight:700;padding:13px 18px;border-radius:12px;font-size:15px;border:1px solid var(--green-100)} .uc-result .ic{width:18px;height:18px} .uc-visual{background:radial-gradient(120% 120% at 80% 0%,#143c2b,#081210);display:grid;place-items:center;padding:36px;position:relative} .uc-visual img{border-radius:18px;box-shadow:0 30px 60px rgba(0,0,0,.45);max-height:440px;width:auto} @media(max-width:880px){.uc-panel.active{grid-template-columns:1fr}.uc-content{padding:34px}} /* ── Casos de uso · vertical sticky tabs (casos-de-uso.html) ───────────────── Desktop: pantalla dividida. Izquierda = acordeón vertical (click cambia activeTab). Derecha = foto sticky que hace crossfade entre imágenes absolutamente apiladas (.uct-img, opacity). Igual que .faq-item, el alto del cuerpo se anima con max-height calculado en JS (ver app.js). */ .uct-wrap{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start} .uct-nav{display:flex;flex-direction:column} .uct-item{border-bottom:1px solid var(--line)} .uct-item:first-child{border-top:1px solid var(--line)} .uct-head{width:100%;display:flex;align-items:center;gap:18px;padding:26px 4px;background:none;border:0;cursor:pointer;text-align:left;transition:opacity .2s var(--ease)} .uct-head .ic-box{flex:none;width:46px;height:46px;border-radius:13px;opacity:.5;transition:.25s var(--ease)} .uct-head .ic-box .ic{width:22px;height:22px} .uct-head h3{flex:1;font-size:19px;font-weight:600;color:var(--muted-2);margin:0;transition:color .2s var(--ease)} .uct-head .pm{flex:none;color:var(--muted-2);transition:transform .3s var(--ease),color .2s var(--ease)} .uct-item:hover .uct-head h3{color:var(--ink-2)} .uct-item:hover .uct-head .ic-box{opacity:.75} .uct-item.active .uct-head .ic-box{ opacity:1;background:var(--green);border-color:var(--green);color:#fff;box-shadow:none; } .uct-item.active .uct-head h3{color:var(--ink)} .uct-item.active .uct-head .pm{color:var(--green-dark);transform:rotate(135deg)} .uct-body{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)} .uct-body-in{padding:0 4px 30px 82px} .uct-body-in p{color:var(--muted);font-size:15.5px;margin-bottom:18px} .uct-body-in .uc-list{margin-bottom:20px} .uct-body-mobile-img{display:none} /* Derecha: marco fotográfico sticky, imágenes apiladas con crossfade */ .uct-visual{position:sticky;top:104px} .uct-visual-inner{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:radial-gradient(120% 120% at 80% 0%,#143c2b,#081210);box-shadow:var(--shadow-lg);border:1px solid var(--line)} .uct-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s var(--ease-in-out);will-change:opacity} .uct-img.active{opacity:1;z-index:1} @media(max-width:980px){ .uct-wrap{grid-template-columns:1fr;gap:0} .uct-visual{display:none} .uct-body-in{padding:0 4px 28px 4px} .uct-body-mobile-img{display:block;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:20px;box-shadow:var(--shadow-sm)} .uct-body-mobile-img img{width:100%;height:auto;display:block} .uct-head{padding:22px 4px;gap:14px} .uct-head h3{font-size:17px} } /* AI agents (dark, glow) */ /* agents — antes: la única de las 3 pestañas del carrusel (Rendiciones/Compras/ Agentes IA) que se quedó oscura, porque usa esta clase en vez de .mod-dark (por eso el fix anterior no la tocó). También es el hero de agentes-ia.html: sus páginas hermanas (rendiciones/compras) ya tienen hero claro, así que esto también resuelve la inconsistencia entre las 3 páginas de producto. */ .agents{background:transparent;color:var(--ink);overflow:hidden;position:relative} .agents::before{content:none;position:absolute;width:560px;height:560px;border-radius:50%;filter:blur(90px);background:radial-gradient(circle,rgba(52,199,89,.2),transparent 70%);top:-180px;left:-120px;pointer-events:none;animation:drift 17s var(--ease-in-out) infinite,auroraHue 15s linear infinite alternate} .agents::after{content:none;position:absolute;width:460px;height:460px;border-radius:50%;filter:blur(90px);background:radial-gradient(circle,rgba(29,170,97,.16),transparent 70%);bottom:-180px;right:-100px;pointer-events:none;animation:drift 21s var(--ease-in-out) infinite reverse,auroraHue 18s linear infinite alternate-reverse} .agents .section-head h2{color:var(--ink)}.agents .section-head .lead{color:var(--muted)} .agents-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center} .agents-orb{position:relative;display:grid;place-items:center;min-height:460px} .orb{width:250px;height:250px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5be79b,#1DAA61 55%,#0c7a45);box-shadow:0 0 90px rgba(52,199,89,.55),inset 0 0 50px rgba(0,0,0,.25);display:grid;place-items:center;animation:pulse 3.2s ease-in-out infinite;position:relative;z-index:2} .orb .ic{width:96px;height:96px;color:#06140d;stroke-width:1.6} @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} .ring{position:absolute;border:1px solid rgba(52,199,89,.25);border-radius:50%} .ring.r1{width:350px;height:350px;animation:spin 18s linear infinite} .ring.r2{width:460px;height:460px;animation:spin 26s linear infinite reverse} .ring .node{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:42px;height:42px;border-radius:12px;background:#0e1c17;border:1px solid rgba(52,199,89,.4);display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.4)} .ring .node .ic{width:20px;height:20px;color:#7fe6a6} .ring .node.nb{top:auto;bottom:-9px} .ring .node.nl{left:-9px;top:50%;transform:translateY(-50%)} .ring .node.nr{left:auto;right:-9px;top:50%;transform:translateY(-50%)} @keyframes spin{to{transform:rotate(360deg)}} /* antes: fila con línea divisoria, sin superficie propia — se veía "calato" directo sobre el fondo con textura. Ahora: mismo lenguaje que .card (relleno gris plano, sin borde) usado en el resto del sitio. */ .agent-feat,.mod-feat{padding:14px 22px;border-radius:var(--radius-sm);background:#fff;box-shadow:var(--shadow-sm)} .mod-feat-head{display:flex;align-items:center;gap:12px;margin-bottom:4px} .agent-feat .ic-box,.mod-feat .ic-box{flex:0 0 54px} .mod-feat-head .ic-box{flex:0 0 38px} /* Especificidad reforzada (.mod-feats .mod-feat h3) a propósito: sin esto, ".split h3" (28px, línea ~1353) empata en especificidad con la regla de abajo y gana por orden de cascada dentro de Rendiciones/Compras, inflando estos subtítulos por encima del h2. */ .mod-feats .agent-feat h3,.mod-feats .mod-feat h3{color:var(--ink);font-size:1.125rem;font-weight:600;margin-bottom:5px} .mod-feat-head h3{margin-bottom:0} .mod-feats .agent-feat p,.mod-feats .mod-feat p{color:var(--muted);font-size:.875rem;line-height:1.5;margin-bottom:0} @media(max-width:880px){.agents-grid{grid-template-columns:1fr;gap:30px}.agents-orb{min-height:320px;order:-1}.ring.r2{display:none}} /* ---------- Filas de beneficios "3 Filas Descriptivas" (Módulos: Rendiciones, Compras, Agentes de IA) — layout unificado y sin salto de pantalla al cambiar de tab: mismo espaciado, mismo alto mínimo de columna en las 3. */ .mod-feats{display:flex;flex-direction:column;gap:10px;margin-top:20px} .cxc-slide .mod-text{min-height:500px;display:flex;flex-direction:column} .cxc-slide .mod-text .hero-ctas{margin-top:auto;padding-top:16px} @media(max-width:880px){.cxc-slide .mod-text{min-height:0}.cxc-slide .mod-text .hero-ctas{margin-top:0}} /* Proporción de grilla: menos ancho para el texto, más para el gráfico (Rendiciones/Compras/Agentes), para que las escenas no se vean encajonadas. */ @media(min-width:881px){ .cxc-slide .split,.cxc-slide .agents-grid{grid-template-columns:5fr 7fr} } /* "Punto medio" de tamaño: un mismo contenedor tope para los tres gráficos (teléfono, escena de Compras, órbita de IA) para que el cambio de tab no se sienta como un salto de escala. */ .mod-visual{width:100%;max-width:520px;margin-inline:auto} /* activity "cine" de agentes (#agents) — motion graphic estilo Ramp: bento oscuro con glassmorphism + borde de luz viajando; micro-narrativa en bucle: la factura entra con resorte → un haz la escanea → los datos saltan a contenedores → SUNAT valida → "Aprobado" se ilumina mientras el resto se atenúa (foco de túnel). */ .ac-avatar{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#5be79b,#1DAA61 60%,#0c7a45);box-shadow:0 6px 16px rgba(52,199,89,.4)} .ac-avatar .ic{width:26px;height:26px;color:#06140d;stroke-width:1.7} .ac-id{display:flex;flex-direction:column;line-height:1.25;margin-right:auto} .ac-id b{color:#fff;font-size:19px;font-weight:650} .ac-id small{color:#7fa593;font-size:14px} .ac-live{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#7fe6a6;background:rgba(52,199,89,.1);border:1px solid rgba(52,199,89,.24);border-radius:999px;padding:5px 13px} .ac-live i{width:8px;height:8px;border-radius:50%;background:#34c759;animation:asPulse 1.8s infinite} @keyframes asPulse{0%{box-shadow:0 0 0 0 rgba(52,199,89,.5)}70%{box-shadow:0 0 0 6px rgba(52,199,89,0)}100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}} /* ── Compras "mejor relación con proveedores": ESCENA CINEMÁTICA CONTINUA estilo Ramp (TEMA CLARO). Una sola FACTURA es la protagonista y la cámara la sigue por todo su ciclo de vida, sin cortes: (1) se escanea desde un CELULAR y sale volando hacia arriba, (2) se le EXTRAEN los datos A LA DERECHA de la factura y valida SUNAT — los datos desaparecen ANTES de que llegue la OC, (3) se pone al lado de la ORDEN DE COMPRA y se hace el MATCH, (4) sube a la PLATAFORMA (un dashboard real de facturas por pagar, con varias facturas), (5) NOTIFICACIÓN de pago al proveedor, (6) la factura pasa por el FLUJO DE APROBACIÓN acompañando cada paso → colapso y loop perfecto. 100% CSS. Todo sincronizado por % sobre --jvd. Cámara virtual (translate+scale) con zoom/foco, resorte en las entradas, revelado por máscara. Cada estación se ancla con left/top + margin negativo (centro real) y SOLO el translate se usa en los @keyframes, para no pelear anclaje con movimiento. */ .jv-cine{position:relative;z-index:1;width:100%;max-width:760px;margin:6px auto 48px;--jvd:20s; background:linear-gradient(180deg,#fff,var(--bg-soft)); border:1px solid var(--line);border-radius:26px;padding:20px; box-shadow:var(--shadow-lg);overflow:hidden;isolation:isolate} .jv-cine::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px; background:conic-gradient(from var(--ac-a,0deg),transparent 0 62%,rgba(52,199,89,.7) 80%,rgba(52,199,89,0) 92%); -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; animation:acBorder 4.5s linear infinite;pointer-events:none;z-index:6} .jv-head{display:flex;align-items:center;gap:11px;margin-bottom:14px;position:relative;z-index:2} .jv-head .ac-id b{color:var(--ink)} .jv-head .ac-id small{color:var(--muted)} .jv-stage{position:relative;height:456px;border-radius:18px;overflow:hidden; background:radial-gradient(120% 90% at 50% 4%,var(--green-50),#fff 62%)} .jv-cam{position:absolute;inset:0;transform-origin:50% 50%;animation:jvCam var(--jvd) cubic-bezier(.62,0,.35,1) infinite;will-change:transform} /* chips y badges (claros sobre fondo claro) */ .jv-chip{position:absolute;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650; color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:9px; padding:6px 10px;white-space:nowrap;box-shadow:var(--shadow-sm)} .jv-chip .ic{width:13px;height:13px;color:var(--green-dark);flex:none} .jv-chip small{font-weight:500;color:var(--muted)} .jv-badge{position:absolute;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700; color:#fff;background:linear-gradient(180deg,#34c759,#1DAA61);border-radius:10px;padding:7px 13px; white-space:nowrap;box-shadow:0 10px 26px rgba(52,199,89,.3)} .jv-badge .ic{width:15px;height:15px;color:#fff;flex:none} /* ── CELULAR (estación 1): la factura se escanea aquí. Device verde de marca, pantalla clara. ── */ .jv-phone{position:absolute;left:50%;top:64%;margin:-128px 0 0 -68px;width:136px;height:256px;z-index:2; border-radius:28px;background:linear-gradient(160deg,#1DAA61,#0c7a45);border:1px solid rgba(12,122,69,.5); box-shadow:0 30px 56px rgba(12,90,52,.35);animation:jvPhone var(--jvd) cubic-bezier(.62,0,.35,1) infinite} .jv-phone::after{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:42px;height:5px;border-radius:3px;background:rgba(255,255,255,.35)} .jv-phscreen{position:absolute;inset:24px 12px 14px;border-radius:16px;overflow:hidden; background:linear-gradient(180deg,#fff,#eef5f0);border:1px solid rgba(255,255,255,.5); display:flex;flex-direction:column;gap:7px;padding:14px 12px} .jv-phscreen i{display:block;height:6px;border-radius:4px;background:#d8e5de} .jv-phscreen i:nth-child(1){width:58%}.jv-phscreen i:nth-child(2){width:88%}.jv-phscreen i:nth-child(3){width:72%}.jv-phscreen i:nth-child(4){width:82%} .jv-scan{position:absolute;left:10%;right:10%;top:26px;height:3px;border-radius:3px;z-index:2; background:linear-gradient(90deg,transparent,#34c759,transparent);box-shadow:0 0 14px 2px rgba(52,199,89,.6); animation:jvScan var(--jvd) ease-in-out infinite} /* ── LA FACTURA (protagonista) ── */ .jv-doc{position:absolute;left:50%;top:45%;margin:-99px 0 0 -80px;width:160px;height:198px;z-index:4; border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg); padding:15px;display:flex;flex-direction:column;gap:9px;overflow:hidden; animation:jvDoc var(--jvd) cubic-bezier(.34,1.56,.64,1) infinite} .jv-doc-top{display:flex;align-items:center;justify-content:space-between} .jv-doc-chip{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#c9efd8,#8fdcae)} .jv-doc-tag{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1DAA61;background:var(--green-50);border-radius:6px;padding:3px 8px} .jv-l{height:8px;border-radius:5px;background:#e3ebe7} .jv-l.s1{width:86%}.jv-l.s2{width:64%}.jv-l.s3{width:78%}.jv-l.s4{width:52%} /* haz que escanea la factura durante la extracción */ .jv-doc::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#34c759,transparent); box-shadow:0 0 14px 2px rgba(52,199,89,.55);opacity:0;animation:jvDocScan var(--jvd) ease-in-out infinite} /* ── DATOS EXTRAÍDOS (estación 2): SIEMPRE a la derecha de la factura, salen volando de ella ── */ .jv-field{left:50%;top:45%;z-index:5;opacity:0;transform:translateX(-46px) scale(.85); animation:jvField var(--jvd) cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:calc(var(--i,0) * .1s)} .jv-field.f0{margin:-56px 0 0 44px} .jv-field.f1{margin:-18px 0 0 44px} .jv-field.f2{margin:20px 0 0 44px} .jv-sunat{left:50%;top:45%;margin:64px 0 0 44px;z-index:5;opacity:0;transform:translateX(-46px) scale(.8); animation:jvSunat var(--jvd) cubic-bezier(.34,1.56,.64,1) infinite} /* ── ORDEN DE COMPRA + MATCH (estación 3): la OC entra por la derecha, factura ya corrida a la izq ── */ .jv-oc{position:absolute;left:50%;top:45%;margin:-74px 0 0 34px;width:124px;height:148px;z-index:4; border-radius:13px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg); padding:13px;display:flex;flex-direction:column;gap:8px;overflow:hidden; opacity:0;transform:translateX(140px) scale(.9);animation:jvOc var(--jvd) cubic-bezier(.34,1.56,.64,1) infinite} .jv-oc-tag{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-dark);background:var(--green-50);border-radius:5px;padding:3px 7px;width:max-content} .jv-wire{position:absolute;left:50%;top:45%;margin:-1px 0 0 30px;width:32px;height:2px;z-index:3; background:linear-gradient(90deg,#1DAA61,#34c759);transform:scaleX(0);transform-origin:left; box-shadow:0 0 10px rgba(52,199,89,.5);animation:jvWire var(--jvd) ease infinite} /* Círculo que recorre la línea factura↔OC (elemento aparte: no hereda el scaleX del wire). Va y viene 3 veces como "analizando" y luego se apaga para dar paso al match. */ .jv-scanpin{position:absolute;left:50%;top:45%;margin:-5px 0 0 30px;width:9px;height:9px;border-radius:50%; background:var(--green-2);z-index:4;opacity:0; box-shadow:0 0 0 4px rgba(52,199,89,.18),0 0 10px 2px rgba(52,199,89,.6); animation:jvScanPin var(--jvd) cubic-bezier(.45,0,.55,1) infinite} .jv-match{left:50%;top:45%;margin:96px 0 0 -76px;z-index:5;opacity:0;transform:scale(.82); animation:jvMatch var(--jvd) cubic-bezier(.34,1.56,.64,1) infinite} /* ── PLATAFORMA (estación 4): dashboard real de facturas por pagar, con varias facturas ── */ .jv-platform{position:absolute;left:50%;top:15%;margin:0 0 0 -212px;width:424px;z-index:3; border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);padding:16px; opacity:0;clip-path:inset(0 0 100% 0 round 16px);animation:jvPlatform var(--jvd) cubic-bezier(.34,1.56,.64,1) infinite} .jv-pf-hd{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--ink);padding:0 2px 4px} .jv-pf-hd .pill{font-size:10px;font-weight:700;color:#fff;background:var(--green);border-radius:99px;padding:3px 10px} .jv-pf-tabs{display:flex;gap:14px;font-size:10.5px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line-2);padding:8px 2px 9px;margin-bottom:10px} .jv-pf-tabs .on{color:var(--green-dark);position:relative} .jv-pf-tabs .on::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:var(--green);border-radius:2px} .jv-plist{display:flex;flex-direction:column;gap:6px} .jv-prow{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;font-size:11px;color:var(--ink-2); background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 11px} .jv-prow .tag{font-size:8.5px;font-weight:700;letter-spacing:.02em;padding:2px 6px;border-radius:5px;background:var(--bg-soft);color:var(--muted)} .jv-prow .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:550} .jv-prow .amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)} .jv-prow .st{font-size:9px;font-weight:700;color:var(--muted);white-space:nowrap;background:var(--bg-soft);border-radius:99px;padding:3px 8px} .jv-prow .st.ok{color:var(--green-dark);background:var(--green-50)} .jv-prow.hot{border-color:var(--green-100);background:var(--green-50);box-shadow:0 0 0 3px rgba(52,199,89,.12);animation:jvHotPay var(--jvd) infinite} .jv-prow.hot .st{color:var(--green-dark);background:#fff} /* estado de la fila resaltada que cambia al ejecutarse el pago (Validada → Pago ejecutado) */ .jv-stswap{position:relative;display:inline-grid;justify-items:end;align-items:center} .jv-stswap .st{grid-area:1/1} .jv-s1{animation:jvSwap1 var(--jvd) infinite} .jv-s2{opacity:0;color:#fff;background:linear-gradient(180deg,#34c759,#1DAA61);animation:jvSwap2 var(--jvd) infinite} /* ── NOTIFICACIÓN (estación 5) ── */ .jv-toast{position:absolute;left:50%;top:15%;margin:-24px 0 0 96px;z-index:7;display:flex;align-items:center;gap:9px; max-width:238px;border-radius:12px;background:linear-gradient(180deg,#34c759,#1DAA61);color:#fff;padding:10px 13px; box-shadow:0 16px 34px rgba(52,199,89,.4);opacity:0;transform:translate(24px,-10px) scale(.9); animation:jvToast var(--jvd) cubic-bezier(.34,1.56,.64,1) infinite} .jv-toast .ic{width:18px;height:18px;color:#fff;flex:none} .jv-toast b{font-size:12px;font-weight:750;display:block;line-height:1.2} .jv-toast small{font-size:10.5px;font-weight:600;opacity:.85} /* ── FLUJO DE APROBACIÓN (estación 6): la factura viaja acompañando cada paso ── */ .jv-flow{position:absolute;left:50%;top:48%;margin:-14px 0 0 -175px;width:350px;z-index:5;display:flex;align-items:center; justify-content:space-between;opacity:0;transform:translateY(12px);animation:jvFlow var(--jvd) cubic-bezier(.34,1.56,.64,1) infinite} .jv-fstep{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--muted); background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 12px;white-space:nowrap;box-shadow:var(--shadow-sm); animation:jvFstep var(--jvd) infinite;animation-delay:calc(var(--i,0) * .8s)} .jv-fstep .ic{width:13px;height:13px;flex:none} .jv-farrow{width:26px;height:2px;background:var(--green-100);flex:none;position:relative} .jv-farrow::after{content:"";position:absolute;right:-1px;top:-3px;border-left:6px solid var(--green-2);border-top:4px solid transparent;border-bottom:4px solid transparent} /* mini factura que recorre el flujo por encima de los pasos */ .jv-fdoc{position:absolute;left:50%;top:48%;margin:-58px 0 0 -16px;width:32px;height:40px;z-index:6; border-radius:7px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-md,0 8px 20px rgba(0,0,0,.12)); display:flex;flex-direction:column;gap:4px;padding:6px;opacity:0; animation:jvFdoc var(--jvd) cubic-bezier(.4,0,.2,1) infinite} .jv-fdoc i{display:block;height:3px;border-radius:2px;background:#cfe0d8} .jv-fdoc i:nth-child(1){width:82%}.jv-fdoc i:nth-child(2){width:56%} .jv-fdoc::before{content:"";position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:3px;background:var(--green-2)} /* ═══ KEYFRAMES ═══ */ /* Cámara: sigue a la factura (translate) y hace zoom/foco en cada estación. Translate suave (≤6%). */ @keyframes jvCam{ 0%,8%{transform:translateY(-6%) scale(1.14)} /* celular (abajo), zoom */ 14%{transform:translateY(-2%) scale(1.08)} /* siguiendo el ascenso */ 20%,35%{transform:translate(2%,0) scale(1.13)} /* factura (izq) + datos (der): extracción */ 41%,58%{transform:translate(1%,0) scale(1.12)} /* factura + OC + match (encuadre hasta el fin de Control) */ 66%,78%{transform:translateY(6%) scale(1.03)} /* plataforma/portal (arriba) + pago — ya en Pago */ 84%,100%{transform:translateY(0) scale(1.08)} /* flujo de aprobación (centro) — IMAGEN FINAL */ } /* Celular: presente durante el escaneo, se hunde y desvanece cuando la factura sale */ @keyframes jvPhone{ 0%{opacity:0;transform:translateY(30px) scale(.9)} 4%{opacity:1;transform:translateY(0) scale(1)} 14%{opacity:1;transform:translateY(0) scale(1)} 20%{opacity:0;transform:translateY(40px) scale(.92)} 100%{opacity:0;transform:translateY(30px) scale(.9)} } @keyframes jvScan{ 0%,3%{top:26px;opacity:0} 5%{opacity:1} 9%{top:210px;opacity:1} 11%,100%{top:26px;opacity:0} } /* Factura: dentro del celular → sube con resorte → se corre a la izq (extracción+match) → sube y se encoge al entrar a la plataforma → oculta → reset dentro del celular. */ @keyframes jvDoc{ 0%,9%{opacity:0;transform:translate(0,86px) scale(.5)} 11%{opacity:0;transform:translate(0,86px) scale(.5)} 15%{opacity:1;transform:translate(0,10px) scale(1.03)} 18%{transform:translate(0,0) scale(1)} 20%{transform:translate(-52px,0) scale(1)} /* se corre a la izq: deja la derecha para los datos */ 52%{opacity:1;transform:translate(-52px,0) scale(1)} /* extracción + match ocurren a su derecha */ 58%{opacity:1;transform:translate(-52px,0) scale(1)} /* mantiene el match hasta el fin de Control */ 62%{opacity:0;transform:translate(-52px,0) scale(.94)} /* se va A LA PAR de OC/wire/match, en su sitio → la plataforma entra limpia */ 86%{opacity:0;transform:translate(0,86px) scale(.5)} /* reset invisible: vuelve al celular */ 100%{opacity:0;transform:translate(0,86px) scale(.5)} } @keyframes jvDocScan{ 0%,20%{opacity:0;top:0} 23%{opacity:1;top:6%} 30%{opacity:1;top:90%} 32%,100%{opacity:0;top:0} } /* Datos extraídos: salen volando de la factura hacia la DERECHA (20–33%) y DESAPARECEN antes de la OC (≤36%) */ @keyframes jvField{ 0%,21%{opacity:0;transform:translateX(-46px) scale(.85)} 26%{opacity:1;transform:translateX(0) scale(1.06)} 28%{transform:translateX(0) scale(1)} 33%{opacity:1;transform:translateX(0) scale(1)} 36%,100%{opacity:0;transform:translateX(8px) scale(.9)} /* se van ANTES de que entre la OC (37%) */ } /* SUNAT válido: se prende al final de la extracción y también se va antes de la OC */ @keyframes jvSunat{ 0%,29%{opacity:0;transform:translateX(-46px) scale(.8)} 32%{opacity:1;transform:translateX(0) scale(1.1)} 34%{transform:translateX(0) scale(1)} 34.5%{opacity:1;transform:translateX(0) scale(1)} 36%,100%{opacity:0;transform:translateX(0) scale(.9)} } /* OC: entra deslizándose desde la derecha (37%, ya sin datos), se va al subir la factura */ @keyframes jvOc{ 0%,37%{opacity:0;transform:translateX(140px) scale(.9)} 42%{opacity:1;transform:translateX(0) scale(1.03)} 44%{transform:translateX(0) scale(1)} /* entra PEGADA a la factura */ 46%{transform:translateX(30px) scale(1)} /* se DESPEGA a la derecha → se abre el hueco para la línea */ 58%{opacity:1;transform:translateX(30px) scale(1)} 62%,100%{opacity:0;transform:translateX(52px) scale(.94)} } @keyframes jvWire{ 0%,45%{transform:scaleX(0);opacity:0} 46%{opacity:1} 48%{transform:scaleX(1);opacity:1} /* la línea se dibuja en el hueco, lista para el análisis */ 58%{opacity:1;transform:scaleX(1)} 62%,100%{opacity:0;transform:scaleX(1)} } /* Círculo: aparece en la factura (48%), va y viene 3 veces entre factura y OC (48→53%) y se apaga (53.3%) para dar paso al match */ @keyframes jvScanPin{ 0%,47.5%{opacity:0;transform:translateX(0)} 48%{opacity:1;transform:translateX(0)} /* en la factura */ 48.8%{transform:translateX(23px)} /* → OC */ 49.6%{transform:translateX(0)} /* ← factura (1) */ 50.4%{transform:translateX(23px)} /* → OC */ 51.2%{transform:translateX(0)} /* ← factura (2) */ 52%{transform:translateX(23px)} /* → OC */ 52.8%{opacity:1;transform:translateX(0)} /* ← factura (3) */ 53.3%,100%{opacity:0;transform:translateX(0)} } @keyframes jvMatch{ 0%,53%{opacity:0;transform:scale(.82)} 55%{opacity:1;transform:scale(1.12)} /* POP tras terminar el análisis */ 56.5%{transform:scale(1)} 58%{opacity:1;transform:scale(1)} 62%,100%{opacity:0;transform:scale(.92)} } /* Plataforma/portal: se revela por máscara justo DESPUÉS del match (57%), permanece durante el pago y se retira ANTES de que entre el flujo de aprobación (82%) */ @keyframes jvPlatform{ 0%,63%{opacity:0;clip-path:inset(0 0 100% 0 round 16px)} 69%{opacity:1;clip-path:inset(0 0 0 0 round 16px)} 78%{opacity:1;clip-path:inset(0 0 0 0 round 16px)} 82%{opacity:0;clip-path:inset(0 0 0 0 round 16px);transform:translateY(-10px)} 100%{opacity:0;clip-path:inset(0 0 100% 0 round 16px);transform:translateY(0)} } /* Notificación de pago: entra desde la derecha sobre la plataforma (70–80%) */ @keyframes jvToast{ 0%,66%{opacity:0;transform:translate(24px,-10px) scale(.9)} 71%{opacity:1;transform:translate(0,0) scale(1.03)} 73%{transform:translate(0,0) scale(1)} 78%{opacity:1;transform:translate(0,0) scale(1)} 81%,100%{opacity:0;transform:translate(16px,-6px) scale(.94)} } /* Cambio de estado de la fila resaltada al ejecutarse el pago (sincronizado con la notificación) */ @keyframes jvSwap1{ 0%,69%{opacity:1} 72%{opacity:0} 100%{opacity:0} } @keyframes jvSwap2{ 0%,70%{opacity:0} 73%{opacity:1} 79%{opacity:1} 82%,100%{opacity:0} } @keyframes jvHotPay{ 0%,69%{box-shadow:0 0 0 3px rgba(52,199,89,.12)} 72%{box-shadow:0 0 0 4px rgba(52,199,89,.4),0 0 26px rgba(52,199,89,.4)} 78%,100%{box-shadow:0 0 0 3px rgba(52,199,89,.12)} } /* Flujo de aprobación: ahora es la ESTACIÓN FINAL (aparece al centro DESPUÉS de la plataforma/pago, 84%→100%) y QUEDA CONGELADO al terminar → imagen final, sin blanco */ @keyframes jvFlow{ 0%,82%{opacity:0;transform:translateY(12px)} 87%{opacity:1;transform:translateY(0)} 100%{opacity:1;transform:translateY(0)} } /* cada paso se prende (verde) cuando la mini factura lo alcanza — delay .8s por paso (--i). Verde desde 86% y SE MANTIENE hasta el final (los 3 pasos quedan aprobados). */ @keyframes jvFstep{ 0%,83%{color:var(--muted);background:#fff;border-color:var(--line)} 86%{color:#fff;background:linear-gradient(180deg,#34c759,#1DAA61);border-color:transparent} 100%{color:#fff;background:linear-gradient(180deg,#34c759,#1DAA61);border-color:transparent} } /* mini factura recorriendo el flujo: paso 1 (izq) → paso 2 (centro) → paso 3 (der), y se QUEDA en "Aprobada" al final */ @keyframes jvFdoc{ 0%,84%{opacity:0;transform:translate(-140px,8px) scale(.9)} 87%{opacity:1;transform:translate(-140px,0) scale(1)} 91%{transform:translate(0,0) scale(1)} 95%{opacity:1;transform:translate(140px,0) scale(1)} 100%{opacity:1;transform:translate(140px,0) scale(1)} } @media(max-width:880px){.jv-cine{max-width:none}} @media(max-width:640px){.jv-platform{width:340px;margin-left:-170px}.jv-prow{grid-template-columns:auto 1fr auto;font-size:10px}.jv-prow .tag{display:none}} /* (La escena de compras se dimensiona ahora en los bloques .pv-visual de arriba; la vieja regla .jv-cam{scale(1.02)!important} rompía la cámara en móvil.) */ @media(prefers-reduced-motion:reduce){ .jv-cam,.jv-phone,.jv-scan,.jv-doc,.jv-doc::after,.jv-field,.jv-sunat,.jv-oc,.jv-wire,.jv-scanpin,.jv-match, .jv-platform,.jv-toast,.jv-flow,.jv-fstep,.jv-fdoc,.jv-cine::before{animation:none} .jv-cam{transform:none} .jv-phone,.jv-scan,.jv-field,.jv-oc,.jv-wire,.jv-scanpin,.jv-toast,.jv-fdoc,.jv-flow{display:none} .jv-doc{opacity:1;transform:translate(-56px,20px) scale(.92)} .jv-sunat{opacity:1;transform:none;margin-top:96px;margin-left:-60px} .jv-match{opacity:1;transform:none} .jv-platform{opacity:1;clip-path:none} } @media(prefers-reduced-motion:reduce){ .ac-live i{animation:none} } /* cómo funciona */ /* how — antes: sección oscura justo debajo del hero .agents (ya oscuro), dos paredes oscuras seguidas en la misma página. Ahora: sección clara; las tarjetas .step (sin cambios, ya son tarjetas oscuras autocontenidas tipo terminal) quedan como el detalle con carácter, no como pared. */ .how{background:transparent;color:var(--ink)} .how .section-head h2{color:var(--ink)}.how .section-head .lead{color:var(--muted)} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s} .step{background:#0e1c17;border:1px solid #1c2c25;border-radius:var(--radius-sm);padding:30px;position:relative;overflow:hidden;transition:transform .22s var(--ease),border-color .22s var(--ease)} .step:hover{transform:translateY(-5px);border-color:rgba(52,199,89,.4)} .step::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(52,199,89,.15),transparent 72%);opacity:0;transition:opacity .35s var(--ease);pointer-events:none} .step:hover::before{opacity:1} .step .ic-box{margin-bottom:18px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)} .step:hover .ic-box{transform:scale(1.15) translateY(-2px)} .step .num{position:absolute;top:22px;right:24px;font-size:40px;font-weight:700;color:rgba(255,255,255,.08);transition:color .3s var(--ease)} .step:hover .num{color:rgba(255,255,255,.45)} .step h3,.step p{position:relative} .step h3{color:#fff;font-size:18px;margin-bottom:8px} .step p{color:#9fb3a8;font-size:14.5px} /* flujo automatizado: encendido acumulativo 1→2→3→4, las 4 tarjetas se apagan juntas para reiniciar el loop */ @keyframes flow-step-1{ 0%,100%{border-color:rgba(255,255,255,.05);box-shadow:none} 5%,95%{border-color:rgba(34,197,94,.8);box-shadow:0 0 25px rgba(34,197,94,.15) inset,0 0 15px rgba(34,197,94,.2)} } @keyframes content-step-1{ 0%,100%{transform:scale(1)} 5%,95%{transform:scale(1.15)} } @keyframes num-step-1{ 0%,100%{opacity:.16;color:inherit} 5%,95%{opacity:.45;color:#22c55e} } @keyframes flow-step-2{ 0%,20%,100%{border-color:rgba(255,255,255,.05);box-shadow:none} 25%,95%{border-color:rgba(34,197,94,.8);box-shadow:0 0 25px rgba(34,197,94,.15) inset,0 0 15px rgba(34,197,94,.2)} } @keyframes content-step-2{ 0%,20%,100%{transform:scale(1)} 25%,95%{transform:scale(1.15)} } @keyframes num-step-2{ 0%,20%,100%{opacity:.16;color:inherit} 25%,95%{opacity:.45;color:#22c55e} } @keyframes flow-step-3{ 0%,40%,100%{border-color:rgba(255,255,255,.05);box-shadow:none} 45%,95%{border-color:rgba(34,197,94,.8);box-shadow:0 0 25px rgba(34,197,94,.15) inset,0 0 15px rgba(34,197,94,.2)} } @keyframes content-step-3{ 0%,40%,100%{transform:scale(1)} 45%,95%{transform:scale(1.15)} } @keyframes num-step-3{ 0%,40%,100%{opacity:.16;color:inherit} 45%,95%{opacity:.45;color:#22c55e} } @keyframes flow-step-4{ 0%,60%,100%{border-color:rgba(255,255,255,.05);box-shadow:none} 65%,95%{border-color:rgba(34,197,94,.8);box-shadow:0 0 25px rgba(34,197,94,.15) inset,0 0 15px rgba(34,197,94,.2)} } @keyframes content-step-4{ 0%,60%,100%{transform:scale(1)} 65%,95%{transform:scale(1.15)} } @keyframes num-step-4{ 0%,60%,100%{opacity:.16;color:inherit} 65%,95%{opacity:.45;color:#22c55e} } .steps .step:nth-child(1){animation:flow-step-1 5s infinite} .steps .step:nth-child(1) .ic-box{animation:content-step-1 5s infinite} .steps .step:nth-child(1) .num{animation:num-step-1 5s infinite} .steps .step:nth-child(2){animation:flow-step-2 5s infinite} .steps .step:nth-child(2) .ic-box{animation:content-step-2 5s infinite} .steps .step:nth-child(2) .num{animation:num-step-2 5s infinite} .steps .step:nth-child(3){animation:flow-step-3 5s infinite} .steps .step:nth-child(3) .ic-box{animation:content-step-3 5s infinite} .steps .step:nth-child(3) .num{animation:num-step-3 5s infinite} .steps .step:nth-child(4){animation:flow-step-4 5s infinite} .steps .step:nth-child(4) .ic-box{animation:content-step-4 5s infinite} .steps .step:nth-child(4) .num{animation:num-step-4 5s infinite} @media(prefers-reduced-motion:reduce){ .steps .step,.steps .step .ic-box,.steps .step .num{animation:none} } /* entrada secuencial con rebote (spring), disparada una sola vez al entrar al viewport (ver .reveal / IntersectionObserver en app.js) */ .steps .step.reveal{opacity:0;transform:translateY(30px);filter:none;transition:opacity .5s var(--ease-out),transform .6s cubic-bezier(.34,1.56,.64,1)} .steps .step.reveal.in{opacity:1;transform:none} .steps .step.reveal[data-d="1"]{transition-delay:0s} .steps .step.reveal[data-d="2"]{transition-delay:.2s} .steps .step.reveal[data-d="3"]{transition-delay:.4s} .steps .step.reveal[data-d="4"]{transition-delay:.6s} @media(max-width:880px){.steps{grid-template-columns:1fr 1fr}} /* a 375px, 2 columnas dejaban cada .step en ~155px — muy angosto para el párrafo de cada paso, forzaba un wrap feo palabra por palabra. 1 columna se lee mucho más estructurado en celular. */ @media(max-width:560px){.steps{grid-template-columns:1fr}} /* comparativa */ .compare{background:var(--bg-soft)} .cmp-table{max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)} .cmp-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;align-items:center} .cmp-row+.cmp-row{border-top:1px solid var(--line)} .cmp-row>div{padding:18px 22px;font-size:15.5px} .cmp-head{background:#fafcfb;font-weight:700} .cmp-head .khipu{color:var(--green-dark);display:flex;align-items:center;gap:8px} .cmp-head .khipu img{height:18px} .cmp-row .feat{font-weight:600} .cmp-row .manual{color:var(--muted);display:flex;align-items:center;gap:8px} .cmp-row .manual .ic{width:18px;height:18px;color:#c2410c} .cmp-row .khipu{font-weight:600;display:flex;align-items:center;gap:8px} .cmp-row .khipu .ic{width:18px;height:18px;color:var(--green)} .cmp-col-khipu{background:linear-gradient(180deg,var(--green-50),#fff)} @media(max-width:680px){.cmp-row>div{padding:13px 12px;font-size:13px}} /* integraciones */ .integrations{position:relative} .int-wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:54px;align-items:center} .int-chips{display:flex;flex-wrap:wrap;gap:14px} .int-chip{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 20px;font-weight:600;font-size:15px;box-shadow:var(--shadow-sm);transition:.2s var(--ease)} .int-chip:hover{transform:translateY(-3px);border-color:var(--green-100)} .int-chip .ic{width:20px;height:20px;color:var(--green-dark)} .int-chip.sunat{border-color:var(--green);color:var(--green-dark);background:var(--green-50)} .int-logo{width:auto;max-width:100%;height:20px;object-fit:contain;display:block} .int-chip.img-only{padding:32px 20px} .int-chip.img-only .int-logo{width:auto;height:76px} /* wordmarks que ya incluyen el nombre de marca: solo logo, centrado, sin texto duplicado */ .int-chip.logo-only{justify-content:center} .int-chip.logo-only .int-logo{height:22px} /* el PNG oficial de CONCAR viene en blanco: se tiñe a su azul de marca */ .int-logo-concar{filter:brightness(0) invert(32%) sepia(96%) saturate(1600%) hue-rotate(190deg) brightness(1.05)} /* SUNAT: pill a ancho completo y bien alto, logo grande y centrado */ .int-chips.chips-full .int-chip{width:100%;justify-content:center} /* Hojas de cálculo: 2 columnas, pills a ancho completo */ .int-chips.chips-grid2{display:grid;grid-template-columns:1fr 1fr} .int-chips.chips-grid2 .int-chip{width:100%} /* ERP y contabilidad: 2 columnas, mismo largo en los botones y alineados en columna */ .int-chips.chips-edges{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px} .int-chips.chips-edges .int-chip{width:100%} @media(max-width:880px){.int-wrap{grid-template-columns:1fr;gap:30px}} @media(max-width:480px){.int-chips.chips-edges{grid-template-columns:1fr}} /* ── Integraciones (página) · Bloques verticales: Torre ERP + Carrusel 3D "Gravedad Cero" ── Antes era un split 1fr/2fr lado a lado; ahora son dos bloques apilados a ancho completo, separados por un espaciado generoso, para darle a los logos ERP la presencia "enterprise" que el layout angosto no permitía. Arriba: torre ERP, grilla de logos con cascada de pop-up al entrar en viewport (IntersectionObserver dedicado sobre #erpLogoGrid, ver app.js). Abajo: coverflow 3D "naked" — el slide no tiene fondo/borde/sombra, solo levita el gráfico (assets/img/int-*.png o icono gigante) sobre el texto. */ .int-eco-stack{display:flex;flex-direction:column;gap:96px} @media(max-width:880px){.int-eco-stack{gap:64px}} /* titular compartido: mismas clases en ambos bloques → misma jerarquía y simetría */ .int-headline{font-size:clamp(28px,3.4vw,36px);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.12;text-align:center;margin:0 0 40px} .int-erp-tower{display:flex;flex-direction:column} .int-erp-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:22px} .int-erp-logo{flex:0 0 calc(25% - 16.5px)} @media(max-width:880px){.int-erp-logos{gap:16px}.int-erp-logo{flex-basis:calc(50% - 8px)}} @media(max-width:520px){.int-erp-logo{flex-basis:100%}} /* píldoras naked, escala "enterprise" (+40% vs. la versión angosta): sin borde, fondo casi imperceptible; al hover ganan sombra suave. Logo + nombre en fila — el texto solo se omite en los que ya son wordmark (.int-erp-logo-mark: Oracle, Concar, Siscont, Odoo) para no duplicar el nombre. Estado inicial invisible/reducido: .is-visible lo detona (IntersectionObserver dedicado en app.js que observa #erpLogoGrid, no el .reveal genérico sitewide) para que SIEMPRE dispare al cruzar el viewport. */ .int-erp-logo{display:flex;align-items:center;justify-content:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:28px 24px;min-height:92px; opacity:0;transform:scale(.8);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1),box-shadow .2s var(--ease)} .int-erp-logo.is-visible{opacity:1;transform:scale(1)} .int-erp-logo:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)} .int-erp-logo.is-visible:hover{transform:translateY(-2px) scale(1)} .int-erp-logo img{max-width:100%;max-height:30px;width:auto;object-fit:contain} .int-erp-logo span{font-weight:600;font-size:17px;color:var(--ink-2);white-space:nowrap} .int-erp-logo.int-erp-logo-mark img{max-height:36px} .int-erp-logo:nth-child(1){transition-delay:.1s} .int-erp-logo:nth-child(2){transition-delay:.2s} .int-erp-logo:nth-child(3){transition-delay:.3s} .int-erp-logo:nth-child(4){transition-delay:.4s} .int-erp-logo:nth-child(5){transition-delay:.5s} .int-erp-logo:nth-child(6){transition-delay:.6s} .int-erp-logo:nth-child(7){transition-delay:.7s} .int-erp-logo:nth-child(8){transition-delay:.8s} .int-coverflow{display:flex;flex-direction:column} .int-stage{position:relative;min-height:520px;perspective:1800px;perspective-origin:50% 40%} .int-slide{position:absolute;left:50%;top:50%;width:380px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center; transform:translate(-50%,-50%);transform-origin:center;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,opacity; transition:transform 1.1s var(--ease-in-out),opacity 1.1s var(--ease-in-out)} .int-slide:not(.is-front){cursor:pointer} .int-slide-visual{flex:1;display:flex;align-items:center;justify-content:center;width:100%;max-height:300px;margin-bottom:22px;pointer-events:none} .int-slide-visual img{max-height:240px;width:auto;object-fit:contain;filter:drop-shadow(0 26px 40px rgba(11,40,28,.18))} .int-slide-visual-duo{display:flex;gap:28px;align-items:center;justify-content:center} .int-slide-visual-duo img{max-height:150px} .int-slide-visual-duo .int-icon-giant{width:114px;height:114px} .int-slide-visual-duo .int-icon-giant .ic{width:64px;height:64px} .int-icon-giant{width:164px;height:164px;border-radius:50%;display:grid;place-items:center;color:var(--green-dark);background:radial-gradient(circle at 35% 30%,var(--green-50),rgba(234,250,241,0) 72%)} .int-icon-giant .ic{width:94px;height:94px;stroke-width:1.1} /* levitación infinita — solo el gráfico, nunca el texto (misma keyframe floaty del resto del sitio) */ .int-float{animation:floaty 4.8s ease-in-out infinite} .int-slide-text h3{font-size:22px;margin-bottom:8px} .int-slide-text p{color:var(--muted);font-size:15px;line-height:1.55;max-width:360px;margin:0 auto} @media(max-width:880px){ .int-stage{position:static;min-height:0;perspective:none;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:10px 20px 20px;scrollbar-width:none} .int-stage::-webkit-scrollbar{display:none} .int-slide{position:static;left:auto;top:auto;flex:0 0 78%;max-width:300px;width:auto;scroll-snap-align:center; transform:none!important;opacity:1!important;pointer-events:auto!important} .int-slide-visual{max-height:190px} .int-slide-visual img{max-height:150px} .int-icon-giant{width:110px;height:110px} .int-icon-giant .ic{width:64px;height:64px} /* .int-slide-visual-duo (ej. "Hoja de cálculo" con 2 íconos lado a lado) nunca tuvo tamaño propio en mobile — heredaba el de escritorio (img 150px + icon-giant 114px + gap 28px) y esa suma no cabía en el ancho de una slide (216px), así que se desbordaba visualmente sobre la slide vecina en el carrusel. Se achica specificamente para que quepa. */ .int-slide-visual-duo{gap:8px} .int-slide-visual-duo img{max-height:68px} .int-slide-visual-duo .int-icon-giant{width:60px;height:60px} .int-slide-visual-duo .int-icon-giant .ic{width:34px;height:34px} } /* métricas — antes: fondo verde saturado full-bleed. Ahora: superficie neutra, el verde queda como acento en las cifras (regla del acento único). */ .metrics{background:transparent;color:var(--ink);overflow:hidden;position:relative;padding:32px 0} .metrics::after{content:none;position:absolute;inset:0;background:radial-gradient(600px 300px at 90% 0%,rgba(29,170,97,.07),transparent 60%)} /* con el fondo ahora continuo sitewide, esta fila de números quedaba "calata" flotando directo sobre la textura — se agrupa en una sola card, mismo lenguaje que .logo-group-card (fondo blanco, radio, sombra). */ .metrics .m-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;position:relative;z-index:1;padding:20px 32px} .metric .big{font-size:clamp(36px,4.4vw,52px);font-weight:700;letter-spacing:-.03em;background:linear-gradient(100deg,var(--green-dark),var(--green-2));-webkit-background-clip:text;background-clip:text;color:transparent} .metric .lbl{font-size:15px;opacity:1;color:var(--muted);margin-top:8px} /* en mobile las 4 cifras colapsan a 2x2 pero quedaban "sueltas" (solo gap, sin ningún límite visual) — se arma como una sola card con divisores en cruz, mismo lenguaje que .logo-group-card, para que se lean como un solo bloque de datos y no como texto flotante suelto. */ @media(max-width:760px){ .metrics .m-grid{grid-template-columns:1fr 1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:8px 0} .metric{padding:22px 16px} .metric:nth-child(odd){border-right:1px solid var(--line)} .metric:nth-child(-n+2){border-bottom:1px solid var(--line)} } /* roi — antes: sección entera en negro (bg-dark), otro bloque full-bleed oscuro. Ahora: la sección es clara; la tarjeta oscura del calculador (.roi-card, sin cambios) queda como un "mockup de producto" contenido, no como pared de color. */ .roi{background:transparent;color:var(--ink)} .roi .section-head h2{color:var(--ink)}.roi .section-head .lead{color:var(--muted)} .roi-card{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;background:#0e1c17;border:1px solid #1c2c25;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)} .roi-inputs{padding:44px} .roi-field{margin-bottom:28px} .roi-field:last-child{margin-bottom:0} .roi-field label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:#cfe0d7;margin-bottom:11px;font-weight:600} .roi-field label b{color:#fff;background:rgba(52,199,89,.14);padding:3px 10px;border-radius:8px;flex:none;min-width:96px;text-align:center;white-space:nowrap} .roi-field input[type=range]{width:100%;accent-color:var(--green-2);height:6px;cursor:pointer} .roi-note{font-size:13px;color:#9aaba3;margin-top:18px} .roi-results{padding:44px;background:linear-gradient(180deg,#12241c,#0e1c17);display:flex;flex-direction:column;gap:16px;justify-content:center} .roi-res-row{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:1px dashed #243a31} .roi-res-row span{color:#9fb3a8;font-size:14px} .roi-res-row b{font-size:22px;color:#fff} .roi-highlight{background:linear-gradient(120deg,var(--green),var(--green-dark));border-radius:15px;padding:22px;text-align:center;margin-top:8px;box-shadow:0 16px 36px rgba(29,170,97,.3)} .roi-highlight .big{font-size:44px;font-weight:700;line-height:1} .roi-highlight .lbl{font-size:14px;opacity:.95;margin-top:5px} @media(max-width:760px){.roi-card{grid-template-columns:1fr}} /* testimonios */ .t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .t-card{border:1px solid var(--line);border-radius:var(--radius);padding:32px;background:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:28px;transition:.22s var(--ease)} .t-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)} .t-top{display:flex;flex-direction:column;gap:16px} .t-card .stars{color:var(--green);font-size:16px;letter-spacing:2px} .t-card .quote{font-size:16px;color:#2a342f;line-height:1.55} .t-card .who{display:flex;align-items:center;justify-content:space-between;gap:14px} .t-card .who-id{display:flex;align-items:center;gap:13px;min-width:0} .t-card .avatar{width:44px;height:44px;padding:9px;border-radius:50%;background:var(--bg-soft);color:var(--muted-2);flex:none;display:grid;place-items:center} .t-card .avatar-photo{display:block;width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;border:1.5px solid rgba(29,170,97,.12);background:var(--bg-soft)} .t-card .avatar-photo img{width:100%;height:100%;object-fit:cover;display:block} .t-card.featured .avatar-photo{width:54px;height:54px;border-color:var(--green-100)} .t-card .who b{display:block;font-size:15px}.t-card .who span{font-size:13.5px;color:var(--ink-2)} .t-card .who .t-logo{height:36px;width:auto;max-width:140px;object-fit:contain;flex:none} @media(max-width:880px){.t-grid{grid-template-columns:1fr}} /* logo wall (prensa / partners) */ /* logo-wall (prensa) — antes: 5 tarjetas individuales de 280×112 cada una, una por logo (pesaba como 5 mini-testimonios). Se probó agrupar los 5 en una sola .logo-group-card (igual que ERPs e inversionistas) y se descartó: Stefano los quería en cuadrantes propios, más grandes/visibles, separados, cada uno con su tarjeta blanca — no todos metidos en una sola barra. */ .logo-wall{margin:24px auto 0;padding:0 16px} .press-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;max-width:960px;margin:0 auto} .press-card{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:var(--radius-sm);padding:28px 20px;box-shadow:var(--shadow-sm);transition:.2s var(--ease)} .press-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)} .press-logo{max-height:40px;width:auto;object-fit:contain;opacity:.9;filter:none;transition:opacity .2s var(--ease)} .press-card:hover .press-logo{opacity:1} @media(max-width:880px){.press-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:560px){.press-grid{grid-template-columns:repeat(2,1fr)}} .partners{background:var(--bg-soft)} /* app */ .app{background:radial-gradient(120% 120% at 10% 0%,#12241c,var(--bg-dark));color:#fff} .app-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center} .app h2{color:#fff;margin-bottom:16px}.app p{color:#9fb3a8;margin-bottom:26px;max-width:430px} .app-badges{display:flex;gap:14px;flex-wrap:wrap} .store-badge{display:inline-flex;align-items:center;gap:11px;background:#000;border:1px solid #243a31;border-radius:14px;padding:11px 20px;color:#fff;transition:.18s var(--ease)} .store-badge:hover{transform:translateY(-3px);border-color:rgba(52,199,89,.4)} .store-badge .ic{width:26px;height:26px} .store-badge .big{font-size:16px;font-weight:600;line-height:1.1} .store-badge small{font-size:11px;opacity:.8} .app-img{text-align:center} .app-img img{max-height:400px;margin:0 auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))} @media(max-width:760px){.app-wrap{grid-template-columns:1fr;text-align:center}.app p{margin-inline:auto}.app-badges{justify-content:center}} .testimonials{background:transparent;position:relative;overflow:hidden} .testimonials>.container{position:relative;z-index:1} /* faq */ .faq{background:transparent;position:relative;overflow:hidden} .faq>.container{position:relative;z-index:1} .faq-list{max-width:800px;margin:0 auto} .faq-item{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:14px;overflow:hidden;background:#fff;transition:.2s} .faq-item.open{border-color:var(--green-100);box-shadow:var(--shadow-sm)} .faq-q{width:100%;text-align:left;background:none;border:0;padding:22px 26px;font-size:17px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--ink)} .faq-q .pm{flex:0 0 26px;color:var(--green);transition:transform .25s var(--ease)} .faq-q .pm .ic{width:22px;height:22px} .faq-item.open .faq-q .pm{transform:rotate(135deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .32s var(--ease);color:var(--ink-2);font-size:15.5px} .faq-a p{padding:0 26px 22px} .faq-link{color:var(--green);font-weight:600;text-decoration:underline;cursor:pointer} /* CTA band */ .cta-band{background:linear-gradient(120deg,var(--ink),#12241c);color:#fff;border-radius:28px;padding:60px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)} .cta-band::before{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(52,199,89,.3),transparent 70%);top:-150px;right:-80px} .cta-band h2{color:#fff;position:relative} .cta-band p{color:#9fb3a8;max-width:540px;margin:14px auto 28px;position:relative} .cta-band .hero-ctas{justify-content:center;position:relative;margin:0} /* cta-band-soft — para cuando una página necesita el componente de banda dos veces (p. ej. precios.html: promo a mitad de página + CTA final). Solo el CTA final se queda con el tratamiento oscuro; el resto usa esta variante clara para no duplicar el momento dramático. */ .cta-band-soft{background:transparent;color:var(--ink);box-shadow:none;border:none} .cta-band-soft::before{display:none} .cta-band-soft h2{color:var(--ink)} .cta-band-soft p{color:var(--muted)} /* demo */ /* demo — antes: mismo verde oscuro que el resto de bloques dark. Ahora: superficie clara, el contraste lo pone la tarjeta blanca del formulario (regla del acento único). */ .demo{position:relative;overflow:hidden;background:transparent} .demo>.container{position:relative;z-index:1} .demo .demo-wrap{display:flex;flex-direction:column;align-items:center} .demo .section-head{margin-bottom:40px} .demo .section-head h2{color:var(--ink)} .demo .section-head .lead{color:var(--muted)} .demo .demo-video{width:100%;max-width:560px;border-radius:24px;overflow:hidden;margin:0 auto 48px;box-shadow:0 45px 90px rgba(11,40,28,.35),0 15px 35px rgba(11,40,28,.2)} .demo .demo-video img{display:block;width:100%;height:auto} .demo .demo-video video{display:block;width:100%;height:auto} .demo .demo-form-grid{display:flex;justify-content:center;width:100%;max-width:640px} .demo .demo-form{width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:50px} /* Foto + formulario en paralelo (el form entra en el primer viewport del CTA) */ .demo .demo-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:stretch;width:100%;max-width:1160px;margin:0 auto} .demo .demo-split .demo-media{display:flex;flex-direction:column;justify-content:center} .demo .demo-split .demo-video{max-width:none;margin:0} .demo .demo-split .demo-points{flex:none} @media(min-width:981px){.demo .demo-split .demo-form{padding:40px 36px}} .demo .demo-points{list-style:none;margin:52px 0 0;padding:0;display:grid;gap:14px} .demo .demo-points li{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;color:var(--ink-2);line-height:1.5} .demo .demo-points .ic-box{flex:none;margin-top:1px} @media(max-width:980px){ .demo .demo-split{grid-template-columns:1fr;gap:40px;max-width:640px} .demo .demo-split .demo-video{max-width:560px;margin:0 auto} } .hs-form-note{background:#fff8e6;border:1px dashed #e3c45a;border-radius:10px;padding:14px 16px;font-size:13px;color:#7a5b00;margin-top:18px} .hs-form-placeholder{border-radius:14px;padding:28px;color:var(--muted);font-size:14px;background:var(--bg-mint);text-align:center} @media(max-width:600px){.demo .demo-form{padding:32px 24px}} /* footer */ footer{background:#081210;color:#9fb3a8;padding:70px 0 34px} .foot-grid{display:grid;grid-template-columns:1.3fr repeat(5,1fr);gap:26px;margin-bottom:44px} @media(max-width:1100px){.foot-grid{grid-template-columns:1fr 1fr 1fr}} footer h4{color:#fff;font-size:15px;margin-bottom:16px} footer a{display:block;font-size:14px;margin-bottom:11px;color:#9fb3a8;transition:color .15s} footer a:hover{color:#fff} .foot-logo img{height:30px;margin-bottom:16px;filter:brightness(0) invert(1)} .foot-social{display:flex;gap:12px;margin-top:18px} .foot-social a{width:40px;height:40px;border-radius:11px;border:1px solid #1c2c25;display:grid;place-items:center;margin:0} .foot-social a:hover{border-color:var(--green);color:#fff;background:rgba(52,199,89,.1)} .foot-social .ic{width:19px;height:19px} .foot-bottom{border-top:1px solid #1c2c25;padding-top:26px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px} @media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr}} /* page hero (detail pages) */ .page-hero{padding:72px 0 56px;text-align:center;position:relative;overflow:hidden; background:radial-gradient(130% 100% at 12% -10%,#DFE2E1 0%,#F3F4F6 42%,#FFFFFF 78%)} /* #seccion-producto-ia: mismo tratamiento que .page-hero, pero por ID — .agents se reutiliza como slide del carrusel de módulos en index.html (fondo gris propio de .cxc-viewport) y no debe heredar este degradado ahí. */ #seccion-producto-ia{background:radial-gradient(130% 100% at 12% -10%,#DFE2E1 0%,#F3F4F6 42%,#FFFFFF 78%)} /* Continuidad con el hero: el hero termina difuminado (concentrado arriba-izq. → blanco abajo). La sección siguiente invierte el mismo degradado (blanco arriba → concentrado abajo-izq.) para que el salto entre ambas se sienta como un solo flujo, no un corte seco entre un fondo y el otro. */ #seccion-funcionalidades-rendiciones, #seccion-funcionalidades-ia{ background:radial-gradient(130% 100% at 12% 110%,#DFE2E1 0%,#F3F4F6 42%,#FFFFFF 78%); } .page-hero::before{content:none;position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(52,199,89,.16),transparent 70%);top:-200px;left:50%;transform:translateX(-50%)} .page-hero .container{position:relative} .breadcrumb{display:inline-flex;gap:8px;align-items:center;color:var(--muted);font-size:14px;margin-bottom:22px} .breadcrumb a:hover{color:var(--green-dark)} .breadcrumb .ic{width:15px;height:15px} .breadcrumb .eyebrow{margin-bottom:0} .breadcrumb.dark{color:#9fb3a8} /* split feature (detail pages) */ .split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center} .split.rev .split-media{order:2} .split-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:radial-gradient(120% 120% at 80% 0%,#143c2b,#081210);padding:30px} .split-media img{border-radius:14px} .split h3{font-size:28px;margin-bottom:14px} .split p{color:var(--muted);font-size:16px;margin-bottom:20px} .split .uc-list{margin-bottom:0} .split+.split{margin-top:80px} @media(max-width:880px){.split{grid-template-columns:1fr;gap:28px}.split.rev .split-media{order:0}} /* floating WhatsApp */ .wa-float{position:fixed;bottom:26px;right:26px;z-index:70;background:#25D366;color:#fff;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;box-shadow:0 12px 32px rgba(37,211,102,.5);transition:transform .18s var(--ease)} .wa-float:hover{transform:scale(1.1)} .wa-float .ic{width:30px;height:30px;stroke-width:0;fill:#fff} /* productos (landing) */ .prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .prod-card{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:36px;background:#fff;transition:.22s var(--ease);overflow:hidden} .prod-card::after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(52,199,89,.10),transparent 70%);top:-120px;right:-80px} .prod-card:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:var(--green-100)} .prod-card .ic-box{width:60px;height:60px;margin-bottom:20px} .prod-card h3{font-size:24px;margin-bottom:10px} .prod-card p{color:var(--muted);font-size:15.5px;margin-bottom:22px;position:relative} .prod-card .uc-list{margin-bottom:26px} @media(max-width:760px){.prod-grid{grid-template-columns:1fr}} /* pricing */ .price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch} .price-grid.cols-3{grid-template-columns:repeat(3,1fr);max-width:940px;margin:0 auto} .price-grid.cols-2{grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto} .price-card{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:30px;background:#fff;display:flex;flex-direction:column;transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease)} .price-card .btn{transition:transform .16s var(--ease-out),box-shadow .18s,background .18s,color .18s,border-color .18s} .price-card:hover{border-color:var(--green);box-shadow:0 16px 40px rgba(29,170,97,.18);transform:translateY(-4px)} .price-card.featured{border-color:var(--green);box-shadow:0 16px 40px rgba(29,170,97,.18)} /* Hover: cualquier tarjeta adopta el botón relleno del plan Business */ .price-card:hover .btn{background:var(--green);color:#fff;border-color:transparent;box-shadow:none} .price-card .pc-tag{position:absolute;top:-12px;right:20px;background:var(--green);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px} .price-card .pc-name{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:700} .price-card .pc-name .ic{width:20px;height:20px;color:var(--green-dark)} .price-card .pc-desc{color:var(--muted);font-size:14px;margin:8px 0 18px;min-height:40px} .price-card .pc-price{font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1} .price-card .pc-price span{font-size:15px;color:var(--muted);font-weight:500} .price-card .pc-sub{color:var(--ink-2);font-size:14.5px;margin:10px 0 20px;line-height:1.45} .price-card ul{list-style:none;display:grid;gap:11px;margin:6px 0 24px;flex:1} .price-card ul li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start} .price-card ul li .ic{width:19px;height:19px;color:var(--green);flex:0 0 19px;margin-top:1px} .price-card .btn{width:100%;justify-content:center} @media(max-width:980px){.price-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.price-grid,.price-grid.cols-3,.price-grid.cols-2{grid-template-columns:1fr}} /* tabla de paquetes de documentos */ .ptable-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-sm);position:relative} /* la tabla mide 640px mínimo y en mobile el wrapper solo muestra ~la mitad (queda "Precio mensual", el dato más importante, fuera de vista) sin ninguna pista de que se puede deslizar — se agrega un degradado fijo en el borde derecho para insinuar que hay más columnas. */ @media(max-width:760px){ .ptable-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:28px;background:linear-gradient(90deg,transparent,#fff);pointer-events:none;border-radius:0 var(--radius) var(--radius) 0} } .ptable{width:100%;background:#fff;border-collapse:separate;border-spacing:0;min-width:640px} .ptable th,.ptable td{padding:16px 22px;text-align:left;font-size:15px} .ptable thead th{background:#fafcfb;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .ptable tbody tr+tr td{border-top:1px solid var(--line)} .ptable td.num{color:var(--muted)} .ptable tr.current td{background:var(--green-50)} .ptable .row-name{font-weight:600;display:flex;align-items:center;gap:9px} .ptable .row-name .ic{width:18px;height:18px;color:var(--green)} .ptable .badge{background:var(--green);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px} .ptable .price{font-weight:700} /* note box (azul informativo) */ .note-box{background:#eef5ff;border:1px solid #d4e4fb;border-radius:var(--radius-sm);padding:22px 24px;margin-top:26px;font-size:14.5px;color:#2c4a72;line-height:1.7} .note-box h4{color:#1b3a63;margin-bottom:6px;font-size:16px;display:flex;align-items:center;gap:8px} .note-box h4 .ic{width:18px;height:18px} .note-box b{color:#16325a} /* pagina "informacion para IA" — contenido tipo articulo, plano y legible */ .ia-doc{padding:8px 0 72px;color:var(--ink-2);font-size:15.5px;line-height:1.75} .ia-doc h2{font-size:clamp(21px,2.4vw,26px);margin:52px 0 14px;padding-top:28px;border-top:1px solid var(--line)} .ia-doc h2:first-child{margin-top:0;padding-top:0;border-top:0} .ia-doc h3{font-size:17px;margin:26px 0 8px} .ia-doc p{margin-bottom:12px} .ia-doc .ptable-wrap{margin:14px 0} .ia-doc ul,.ia-doc ol{font-size:15px} /* utilities */ .center{text-align:center} .mt-40{margin-top:40px}.mt-56{margin-top:56px} .muted{color:var(--muted)} /* ============================================================================ MEGA MENÚ (estilo Egixia) — el HTML lo inyecta app.js en #navLinks ============================================================================ */ .nav-links.nav-mega{gap:4px} .nav-links .nav-top{font-size:15px;font-weight:500;color:#3a463f;padding:9px 13px;border-radius:10px;transition:.15s} .nav-links .nav-top:hover{color:var(--green-dark);background:var(--green-50)} .nav-trigger{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-size:15px;font-weight:500;color:#3a463f;background:none;border:0;cursor:pointer;padding:9px 13px;border-radius:10px;transition:.15s} .nav-trigger:hover{color:var(--green-dark);background:var(--green-50)} .nav-trigger .chev{width:14px;height:14px;transition:transform .2s var(--ease)} .nav-item.open .nav-trigger .chev{transform:rotate(180deg)} .mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 20px} .mega-grid.cols-2{grid-template-columns:1fr 1fr} .mega-grid.cols-3{grid-template-columns:repeat(3,1fr)} .mega-xs .mega-grid{grid-template-columns:1fr} .mega-col h5{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);margin:6px 10px 10px;font-weight:700} .mega-grid .mega-col.ai{background:var(--bg-soft);border-radius:14px;padding:8px 10px 10px} .mega-grid>.mega-col.ai{border-left:none;margin-left:10px} .nav-links .mega-link{display:flex;gap:14px;padding:12px;border-radius:12px;align-items:flex-start;width:auto;transition:background .15s;color:var(--ink)} .nav-links .mega-link.mega-link-sm{align-items:center} .nav-links .mega-link:hover{background:var(--bg-soft);color:var(--ink)} .mega-link .mtx{display:flex;flex-direction:column;min-width:0} /* icono 3D "Modern Depth": gradiente de marca + bisel suave (sin brillo duro) + sombra flotante */ .mega-link .mi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:0 0 44px} .mega-link .mi.ic-box{ box-shadow:none; } .mega-link .mi.ic-box::before{content:none} .mega-link .mi.ic-box .ic{width:20px;height:20px;stroke-width:2.15} .mega-link .mt{font-weight:600;font-size:14px;color:var(--ink);line-height:1.25} .mega-link.mega-link-sm .mt{line-height:1;margin:0} .mega-link .md{font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.4;font-weight:400} .nav-links .mega-link.mega-link-stack{flex-direction:column;align-items:stretch;padding:14px;gap:8px} .mega-link-stack .mlh{display:flex;align-items:center;gap:12px} .mega-link-stack .mt{font-size:15px} .mega-link-stack .md{margin-top:0;padding-left:50px;font-size:13px} .nav-links .mega-feat{display:flex;align-items:center;gap:14px;margin-top:16px;background:linear-gradient(120deg,var(--ink),#12241c);border-radius:15px;padding:15px 20px;color:#fff;width:auto} .nav-links .mega-feat:hover{color:#fff;box-shadow:var(--shadow)} .mega-feat b{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:650} .mega-feat small{display:block;color:#9fb3a8;font-size:12.5px;margin-top:2px;font-weight:400} .mega-feat .fx{width:40px;height:40px;border-radius:11px;background:rgba(52,199,89,.15);border:1px solid rgba(52,199,89,.3);color:#7fe6a6;display:grid;place-items:center;flex:none} .mega-feat .fx .ic{width:20px;height:20px} .mega-feat .go{margin-left:auto;color:#7fe6a6;width:20px;height:20px;flex:none} .pill-new{font-size:10px;font-weight:800;letter-spacing:.05em;background:var(--green);color:#fff;padding:2px 7px;border-radius:6px} @media(min-width:961px){ .nav-item{position:relative} .nav-item:has(.mega-lg){position:static} .mega{position:absolute;top:calc(100% - 6px);left:50%;transform:translateX(-50%) translateY(10px);background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:24px;opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease);z-index:90;margin-top:14px} .mega::before{content:"";position:absolute;top:-24px;left:0;right:0;height:24px} .nav-item.open .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .mega-lg{width:min(1100px,calc(100vw - 40px))} .mega-sm{width:min(680px,calc(100vw - 40px))} .mega-xs{width:min(340px,calc(100vw - 40px))} .mega-grid>.mega-col+.mega-col{border-left:1px solid var(--line-2);padding-left:20px} } @media(max-width:960px){ .nav-links.nav-mega{max-height:calc(100vh - 74px);overflow-y:auto} .nav-links .nav-top{padding:15px 24px;width:100%} .nav-trigger{width:100%;display:flex;justify-content:space-between;padding:15px 24px} .nav-item{width:100%} .mega{display:none;padding:0 12px 12px} .nav-item.open .mega{display:block} .mega-grid{grid-template-columns:1fr;gap:4px} .nav-links .mega-link{padding:10px 12px;width:100%} .nav-links .mega-feat{margin:10px 12px;width:auto} } /* hero visual más grande (desktop) — protagonismo tipo khipugastos.com */ @media(min-width:881px){ .hero-grid{grid-template-columns:.82fr 1.18fr;gap:48px} .device{width:104%;max-width:none;margin-right:-4%} .hero-visual{min-height:560px;display:grid;align-items:center} } /* ============================================================================ BUSCADOR GLOBAL — botón en nav + overlay (inyectados por app.js) ============================================================================ */ .search-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:14px;font-weight:550;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:9px 14px;cursor:pointer;transition:.18s var(--ease)} .search-btn:hover{border-color:var(--green);color:var(--green-dark);background:var(--green-50)} .search-btn .ic{width:16px;height:16px} .search-btn kbd{font-family:var(--mono,monospace);font-size:11px;background:#fff;border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--muted-2)} @media(max-width:960px){.search-btn span,.search-btn kbd{display:none}.search-btn{padding:9px 11px}} .search-overlay{position:fixed;inset:0;z-index:120;background:rgba(8,18,16,.45);backdrop-filter:blur(6px);display:grid;place-items:start center;padding:12vh 20px 20px} .search-overlay[hidden]{display:none!important} .search-panel{width:min(620px,100%);background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;animation:srin .22s var(--ease)} @keyframes srin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}} .search-bar{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line-2)} .search-bar .ic{width:20px;height:20px;color:var(--green-dark);flex:none} .search-bar input{flex:1;border:0;outline:0;font-family:var(--font);font-size:17px;color:var(--ink);background:none} .search-bar input::placeholder{color:var(--muted-2)} .search-bar kbd{font-size:11px;background:var(--bg-soft);border:1px solid var(--line);border-radius:5px;padding:2px 7px;color:var(--muted-2)} .search-results{max-height:52vh;overflow-y:auto;padding:10px} .sr-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);padding:8px 12px 6px} .sr-item{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:12px;transition:background .12s} .sr-item:hover{background:var(--bg-soft)} .sr-ic{flex:none} .sr-ic .ic{width:18px;height:18px} .sr-tx{flex:1;min-width:0} .sr-tx b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)} .sr-tx small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sr-go{width:16px;height:16px;color:var(--muted-2);flex:none} .sr-empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:14.5px} /* ============================================================================ FONDOS: de gris plano a gradiente (formato de la landing anterior) ============================================================================ */ .usecases{background:transparent;overflow:hidden;position:relative} .usecases::before{content:none;position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(70px);background:radial-gradient(circle,rgba(52,199,89,.12),transparent 70%);top:-160px;right:-140px;pointer-events:none} .compare{background:transparent;overflow:hidden;position:relative} .compare::before{content:none;position:absolute;width:460px;height:460px;border-radius:50%;filter:blur(70px);background:radial-gradient(circle,rgba(29,170,97,.10),transparent 70%);bottom:-160px;left:-120px;pointer-events:none} .partners{background:transparent} /* productos con screenshot */ .prod-shot{border-radius:14px;overflow:hidden;background:radial-gradient(120% 120% at 80% 0%,#143c2b,#081210);display:grid;place-items:center;padding:22px;margin-bottom:24px;position:relative} .prod-shot img{max-height:200px;width:auto;border-radius:10px;box-shadow:0 20px 44px rgba(0,0,0,.4)} /* testimonios con logo de empresa */ .t-card{position:relative} .t-quote-mark{position:absolute;top:26px;right:28px;width:64px;height:52px;color:#fff;opacity:.09;pointer-events:none} /* ============================================================================ ECOSISTEMA — 5 pilares orbitando (desktop) / grid (móvil) ============================================================================ */ .eco{background:transparent;overflow:hidden;position:relative} .eco>.container{position:relative;z-index:1} .eco::before{content:none;position:absolute;width:640px;height:640px;border-radius:50%;filter:blur(80px);background:radial-gradient(circle,rgba(52,199,89,.14),transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none} .eco-stage{position:relative;height:660px;display:grid;place-items:center} .eco-ring{position:absolute;width:520px;height:520px;border:1.5px dashed var(--green-100);border-radius:50%} .eco-ring.r2{width:640px;height:640px;border-color:var(--line-2)} .eco-center{position:relative;z-index:3;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#16452f,var(--ink) 70%);display:grid;place-items:center;box-shadow:0 34px 80px rgba(8,18,16,.4)} .eco-center img{height:36px;filter:brightness(0) invert(1)} .eco-rot{position:absolute;width:520px;height:520px;animation:ecospin 56s linear infinite} @keyframes ecospin{to{transform:rotate(360deg)}} @keyframes ecospinrev{to{transform:rotate(-360deg)}} .eco-node{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(var(--a)) translateX(260px)} .eco-unrot{transform:rotate(calc(-1 * var(--a)))} .eco-counter{animation:ecospinrev 56s linear infinite} .eco-stage:hover .eco-rot,.eco-stage:hover .eco-counter{animation-play-state:paused} .eco-card{display:grid;justify-items:center;text-align:center;width:190px;gap:4px} .eco-ic{margin-bottom:8px} .eco-card b{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink)} .eco-card small{font-size:13px;color:var(--ink-2)} @media(prefers-reduced-motion:reduce){.eco-rot,.eco-counter{animation:none}} @media(max-width:900px){ .eco-stage{height:auto;display:block} .eco-ring,.eco-ring.r2{display:none} .eco-center{margin:0 auto 30px;width:140px;height:140px} .eco-rot{position:static;width:auto;height:auto;animation:none;display:grid;grid-template-columns:1fr 1fr;gap:14px} .eco-node{position:static;transform:none} .eco-unrot{transform:none} .eco-counter{animation:none} .eco-card{width:auto;background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px 14px} } /* ============================================================================ IMPLEMENTACIÓN — sin miedo, con acompañamiento ============================================================================ */ .impl{background:transparent;overflow:hidden;position:relative} .impl>.container{position:relative;z-index:1} .impl-tl-row{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin:56px 0 60px;position:relative} .impl-tl-row::before{content:"";position:absolute;top:6px;left:0;right:0;height:2px;background:var(--green-100)} .impl-tl-step{position:relative;padding-top:30px} .impl-tl-step::before{content:"";position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #fff,0 0 0 5px var(--green-100)} .impl-tl-time{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-dark);margin-bottom:8px} .impl-tl-step h4{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:8px} .impl-tl-step p{font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:20px} .impl-tl-img{aspect-ratio:1/1;border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm)} .impl-tl-img img{width:100%;height:100%;object-fit:cover;display:block} .impl-close{max-width:640px;margin:0 auto;text-align:center} .impl-quote{background:linear-gradient(120deg,var(--ink),#12241c);color:#dfeee7;border-radius:16px;padding:22px 24px;font-size:15.5px;line-height:1.55} .impl-quote b{color:#7fe6a6} .impl-close .btn{margin-top:28px} @media(max-width:880px){ .impl-tl-row{grid-template-columns:1fr;gap:44px} .impl-tl-row::before{display:none} .impl-tl-step{padding-top:26px} } /* ============================================================================ NOSOTROS — quiénes somos ============================================================================ */ /* .about es el único momento oscuro full-bleed del home. Se probó un fade con máscara (mostraba la textura de arriba/abajo desvaneciéndose hacia el degradado oscuro) y se descartó explícitamente — Stefano lo quería nítido, sin desvanecido, corte limpio entre la textura clara y el oscuro. */ .about{ background:linear-gradient(160deg,#0a1b15,#123a29); color:#d6ece1;position:relative;overflow:hidden; } .about>.container{position:relative;z-index:1} .about::before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;filter:blur(80px);background:radial-gradient(circle,rgba(52,199,89,.16),transparent 70%);top:-160px;right:-120px;pointer-events:none} /* layout principal: manifiesto + cascada de logos */ .about-grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;max-width:1080px;margin:0 auto;align-items:center} /* --- COLUMNA IZQUIERDA: el manifiesto --- */ .about-manifesto{text-align:left;position:relative} .about-manifesto h2{font-size:clamp(30px,3.2vw,42px);line-height:1.14;letter-spacing:-.015em;color:#fff} /* antes tenía su propio verde (#34d399→#6ee7b7), distinto al resto de títulos del sitio — alineado ahora al .gradient-text de marca (--green/--green-2). */ .about-manifesto .lead{margin-top:20px;color:#b9cdc3} .about-manifesto .lead b{color:#fff;font-weight:800} /* --- COLUMNA DERECHA: grilla de logos a color, entrada "pop" escalonada --- */ /* tarjeta sólida en blanco: obligatorio mantenerla así, no transparente, para que los logos con fondo JPG/oscuro no se rompan visualmente sobre el fondo oscuro de la sección. Bloquea además la luz del cursor (canvas #aboutField). */ .logo-cloud-col{display:flex;flex-direction:column;align-items:center;gap:18px;padding:32px 28px;background:#fff;border-radius:24px;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 70px rgba(0,0,0,.4);position:relative;z-index:2} .marquee-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:4px;text-align:center} .logo-cloud{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;justify-items:center;gap:40px 52px;max-width:560px} .logo-item{display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);transition:opacity .5s ease,transform .6s cubic-bezier(.34,1.56,.64,1)} .logo-cloud.in .logo-item{opacity:1;transform:scale(1)} .logo-cloud.in .logo-item:nth-child(1){transition-delay:0s} .logo-cloud.in .logo-item:nth-child(2){transition-delay:.15s} .logo-cloud.in .logo-item:nth-child(3){transition-delay:.30s} .logo-cloud.in .logo-item:nth-child(4){transition-delay:.45s} .logo-cloud.in .logo-item:nth-child(5){transition-delay:.60s} .logo-cloud.in .logo-item:nth-child(6){transition-delay:.75s} .logo-cloud.in .logo-item:nth-child(7){transition-delay:.90s} .logo-cloud.in .logo-item:nth-child(8){transition-delay:1.05s} .logo-cloud.in .logo-item:nth-child(9){transition-delay:1.20s} /* ola infinita ("heartbeat"): un pop sutil recorre la grilla y luego pausa antes de repetirse — arranca ~2s después de la entrada para no pisar el pop inicial */ @keyframes logoWave{0%,100%{transform:scale(1)}4%{transform:scale(1.08)}9%{transform:scale(1)}} .logo-cloud.in .logo-item{animation:logoWave 6.4s ease-in-out infinite} .logo-cloud.in .logo-item:nth-child(1){animation-delay:2s} .logo-cloud.in .logo-item:nth-child(2){animation-delay:2.15s} .logo-cloud.in .logo-item:nth-child(3){animation-delay:2.30s} .logo-cloud.in .logo-item:nth-child(4){animation-delay:2.45s} .logo-cloud.in .logo-item:nth-child(5){animation-delay:2.60s} .logo-cloud.in .logo-item:nth-child(6){animation-delay:2.75s} .logo-cloud.in .logo-item:nth-child(7){animation-delay:2.90s} .logo-cloud.in .logo-item:nth-child(8){animation-delay:3.05s} .logo-cloud.in .logo-item:nth-child(9){animation-delay:3.20s} .logo-item img{display:block;max-height:56px;width:auto;object-fit:contain;transition:transform .35s ease} .logo-item:hover img{transform:scale(1.08)} @media(prefers-reduced-motion:reduce){ .logo-item{transition:none;opacity:1;transform:none;animation:none} .logo-item img{transition:none} } /* cierre: el gancho final */ .about-close{max-width:1100px;margin:72px auto 0;background:#fff;border-radius:28px;padding:48px 64px;text-align:center;box-shadow:0 25px 60px rgba(0,0,0,.35)} .about-close p{font-size:clamp(26px,3.4vw,40px);font-weight:800;color:#0f172a;line-height:1.3;letter-spacing:-.01em;text-wrap:balance;white-space:normal} .about-close b{color:#059669} @media(max-width:880px){ .about-grid2{grid-template-columns:1fr;gap:36px} .about-manifesto{text-align:center} .logo-cloud{max-width:100%;gap:28px 32px} .logo-item img{max-height:44px} .about-close{margin-top:56px;padding:32px 26px} } /* ============================================================================ ANTI-MONOTONÍA (inspiración Aloha): feed en vivo, dual cards, bento, statement tipográfico y testimonio destacado ============================================================================ */ /* feed de actividad de agentes en vivo */ .feed-strip{background:var(--ink);padding:14px 0;overflow:hidden;border-bottom:1px solid #12241c} .feed-track{display:flex;gap:14px;width:max-content;animation:feedscroll 46s linear infinite;padding-right:14px} .feed-strip:hover .feed-track{animation-play-state:paused} @keyframes feedscroll{to{transform:translateX(-50%)}} .feed-item{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:8px 16px;font-size:13px;color:#cfe0d7;white-space:nowrap} .feed-item b{color:#7fe6a6;font-weight:600} .feed-item .dot{width:7px;height:7px;border-radius:50%;background:var(--green-2);box-shadow:0 0 0 4px rgba(52,199,89,.15);animation:pulse 1.8s infinite;flex:none} @media(prefers-reduced-motion:reduce){.feed-track{animation:none}} /* producto CxP en dark (contraste dual) */ .prod-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono,monospace);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:16px;background:var(--green-50);color:var(--green-dark);border:1px solid var(--green-100)} .prod-card.dark{background:linear-gradient(160deg,#0a1b15,#123a29);border-color:transparent} .prod-card.dark::after{background:radial-gradient(circle,rgba(52,199,89,.3),transparent 70%)} .prod-card.dark h3{color:#fff} .prod-card.dark p{color:#a9d0bd} .prod-card.dark .uc-list li{color:#d6ece1} .prod-card.dark .uc-list .ic{color:#7fe6a6} .prod-card.dark .link-arrow{color:#7fe6a6} .prod-card.dark .prod-shot{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.07)} .prod-card.dark .prod-tag{background:rgba(52,199,89,.16);color:#7fe6a6;border-color:rgba(52,199,89,.3)} /* bento grid de beneficios */ .bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .tile{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:28px;position:relative;overflow:hidden;transition:.22s var(--ease)} .tile:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .tile h3{font-size:19px;margin:16px 0 8px} .tile p{color:var(--muted);font-size:14.5px} .tile.span2{grid-column:span 2} .tile.rows2{grid-row:span 2} .tile.dark{background:linear-gradient(160deg,#0a1b15,#123a29);border:0} .tile.dark h3{color:#fff} .tile.dark p{color:#a9d0bd} .tile-chips{display:flex;flex-direction:column;gap:10px;margin-top:22px} .tile-chip{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:11px 14px;font-size:13.5px;color:#d6ece1} .tile-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--green-2);box-shadow:0 0 0 4px rgba(52,199,89,.15);animation:pulse 1.8s infinite;flex:none} .tile.green{background:linear-gradient(140deg,var(--green),var(--green-dark));border:0;display:flex;flex-direction:column;justify-content:center;color:#fff} .tile.green .huge{font-size:clamp(48px,5vw,68px);font-weight:700;letter-spacing:-.04em;line-height:1} .tile.green p{color:rgba(255,255,255,.92);font-weight:550;margin-top:8px} .tile.img{padding:0;min-height:220px} .tile.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .tile.img .tile-cap{position:absolute;left:0;right:0;bottom:0;padding:40px 24px 20px;background:linear-gradient(180deg,transparent,rgba(8,18,16,.85));color:#fff;font-weight:650;font-size:16px} .tile.mint{background:var(--bg-mint)} @media(max-width:880px){.bento{grid-template-columns:1fr 1fr}.tile.rows2{grid-row:auto}} @media(max-width:560px){.bento{grid-template-columns:1fr}.tile.span2{grid-column:auto}} /* statement tipográfico */ .statement{background:linear-gradient(180deg,#fff,var(--bg-mint));text-align:center;padding:120px 0;position:relative;overflow:hidden} .statement::before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(90px);background:radial-gradient(circle,rgba(52,199,89,.13),transparent 70%);top:-200px;left:50%;transform:translateX(-50%);pointer-events:none} .statement h2{font-size:clamp(34px,5.6vw,66px);line-height:1.04;letter-spacing:-.035em;max-width:940px;margin:0 auto;position:relative} .statement .dim{color:var(--muted-2)} .statement .lead{margin:26px auto 0;position:relative} .statement .link-arrow{margin-top:26px;font-size:17px} /* testimonio destacado */ .t-grid{grid-template-columns:1.05fr .95fr;grid-auto-rows:1fr} /* t-card.featured — antes: la única tarjeta oscura en una grilla de 3 testimonios claros (mezcla de tonos, se veía como un error de diseño, no como jerarquía). Ahora se distingue por borde+sombra, no por invertir el color — mismo patrón que .hm-card:hover en vez de un bloque de color aislado. */ .t-card.featured{background:#fff;border:1.5px solid var(--green-100);box-shadow:var(--shadow-lg);grid-row:span 2;overflow:hidden} .t-card.featured .quote{color:var(--ink);font-size:clamp(19px,1.9vw,24px);line-height:1.5;font-weight:550} .t-card.featured .who b{color:var(--ink)} .t-card.featured .who span{color:var(--muted)} .t-card.featured .t-logo{background:#fff;padding:8px 14px;border-radius:9px;height:46px;width:auto;max-width:160px;box-shadow:0 6px 18px rgba(0,0,0,.25)} @media(max-width:880px){.t-grid{grid-template-columns:1fr;grid-auto-rows:auto}.t-card.featured{grid-row:auto}} /* ============================================================================ VIÑETAS DE PRODUCTO — mini-UI real en vez de íconos repetidos ============================================================================ */ .vig{position:relative;border-radius:14px;border:1px solid #d3d8db;background:linear-gradient(180deg,#e6e9eb,#dde1e4);padding:18px;margin-bottom:20px;min-height:130px;display:flex;flex-direction:column;gap:9px;justify-content:center;align-items:center;overflow:hidden} .vrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .vchip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--ink-2);box-shadow:var(--shadow-sm);width:max-content;max-width:100%;transition:transform .25s var(--ease)} .vchip .ic{width:15px;height:15px;color:var(--green-dark);flex:none} .vchip small{font-weight:500;color:var(--ink-2);font-size:12.5px} .vchip.ok{border-color:var(--green-100);background:var(--green-50);color:var(--green-dark)} .vchip.warn{border-color:#f0e3c2;background:#fdf6e7;color:#8a6d1f} .vchip.warn .ic{color:#b7791f} .vdot{width:7px;height:7px;border-radius:50%;background:var(--green-2);box-shadow:0 0 0 4px rgba(52,199,89,.16);flex:none} /* documento con línea de escaneo (estático por defecto, sin autoplay) */ .vig-scan{flex-direction:row;align-items:center;justify-content:center;gap:16px} .vig-scan .vcol{display:flex;flex-direction:column;gap:8px;align-items:flex-start} /* en mobile los 2 chips ("Foto tomada...", "Datos extraídos...") son texto largo con width:max-content (ver .vchip) — en pantallas angostas eso forzaba a toda la card a desbordarse del viewport (bug real, cortaba el borde derecho contra el overflow:hidden del body). .card ya tiene min-width:0 para que el grid no se infle; acá se deja que el propio chip envuelva su texto en vez de exigir su ancho completo en una sola línea. */ @media(max-width:560px){ .vig-scan .vchip{width:100%;white-space:normal;text-align:left} } .vdoc{position:relative;width:74px;height:94px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow-sm);padding:11px 10px;display:flex;flex-direction:column;gap:7px;flex:none} .vdoc i{display:block;height:5px;border-radius:3px;background:var(--line-2)} .vdoc i:nth-child(1){width:70%}.vdoc i:nth-child(2){width:92%}.vdoc i:nth-child(3){width:55%}.vdoc i:nth-child(4){width:80%} .vdoc::after{content:"";position:absolute;left:5px;right:5px;height:2.5px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--green-2),transparent);top:12%} /* línea de escáner (tarjeta 1): barrido vertical al hacer hover, un par de idas y vueltas */ .vscanline{position:absolute;left:6px;right:6px;top:8%;height:2px;border-radius:2px;background:#22c55e;box-shadow:0 0 8px #22c55e;opacity:0;pointer-events:none} .card:hover .vscanline{opacity:1;animation:vscan 1.5s linear 2} @keyframes vscan{0%{top:8%}50%{top:86%}100%{top:8%}} /* badge de validación (tarjeta 1): pop más marcado, tipo resorte */ .vbadge-pop{transform:scale(1)} .card:hover .vbadge-pop{animation:vbadgePop .5s cubic-bezier(.34,1.56,.64,1) 1} @keyframes vbadgePop{0%{transform:scale(.85)}55%{transform:scale(1.2)}80%{transform:scale(.96)}100%{transform:scale(1.08)}} /* match OC ↔ factura (tarjeta 2) */ .vlink{display:flex;align-items:center} .vwire{width:26px;height:2px;background:var(--green-2);position:relative;flex:none} .vwire::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--green-2);top:-2.5px;left:50%;transform:translateX(-50%) scale(1);box-shadow:0 0 0 4px rgba(52,199,89,.16);transition:transform .25s var(--ease)} .card:hover .vwire::after{transform:translateX(-50%) scale(1.3)} /* nodo verde que viaja por el conector (tarjeta 2): ida y vuelta rápida x3 en hover */ .vpin{position:absolute;top:50%;left:0;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.85);opacity:0} .card:hover .vpin{opacity:1;animation:vpinTravel .6s ease-in-out 3} @keyframes vpinTravel{0%{left:0}50%{left:calc(100% - 6px)}100%{left:0}} /* badge de match (tarjeta 2): pop fuerte y rebotón */ .vbadge-match{transform:scale(1)} .card:hover .vbadge-match{animation:vbadgeMatchPop .6s cubic-bezier(.34,1.56,.64,1) 1} @keyframes vbadgeMatchPop{0%{transform:scale(1)}35%{transform:scale(1.18)}60%{transform:scale(.95)}100%{transform:scale(1.08)}} /* badges (tarjetas 3 y 4): pop agresivo con rebote, sin scale básico */ .vpop,.vchip-top,.vchip-bottom{transform:scale(1) translateY(0)} .card:hover .vpop,.card:hover .vchip-top,.card:hover .vchip-bottom{animation:vpopBounce .55s cubic-bezier(.34,1.56,.64,1) 1} .card:hover .vchip-bottom{animation-name:vpopBounceDown} @keyframes vpopBounce{0%{transform:scale(1) translateY(0)}45%{transform:scale(1.16) translateY(-8px)}75%{transform:scale(1.02) translateY(-2px)}100%{transform:scale(1.1) translateY(-5px)}} @keyframes vpopBounceDown{0%{transform:scale(1) translateY(0)}45%{transform:scale(1.16) translateY(6px)}75%{transform:scale(1.02) translateY(1px)}100%{transform:scale(1.08) translateY(3px)}} /* aviso de vencimiento (tarjeta 4): pulso solo en hover */ .card:hover .vdot{animation:pulse .8s ease-in-out 1} /* mini barras (tarjeta 6): bajan y suben rebotando, en cascada */ .vbars{display:flex;align-items:flex-end;gap:8px;height:58px;padding:0 4px} .vbars i{width:15px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--green-2),var(--green));transform-origin:bottom;transform:scaleY(1)} .vbars i:nth-child(1){height:26%}.vbars i:nth-child(2){height:44%}.vbars i:nth-child(3){height:36%}.vbars i:nth-child(4){height:64%}.vbars i:nth-child(5){height:90%} .card:hover .vbars i{animation:vgrowBar .65s cubic-bezier(.34,1.56,.64,1) backwards} .card:hover .vbars i:nth-child(1){animation-delay:0s} .card:hover .vbars i:nth-child(2){animation-delay:.06s} .card:hover .vbars i:nth-child(3){animation-delay:.12s} .card:hover .vbars i:nth-child(4){animation-delay:.18s} .card:hover .vbars i:nth-child(5){animation-delay:.24s} @keyframes vgrowBar{0%{transform:scaleY(1)}30%{transform:scaleY(.2)}70%{transform:scaleY(1.14)}100%{transform:scaleY(1)}} /* burbuja del agente (tarjeta 5): pop de mensaje nuevo */ .vbot{display:flex;gap:10px;align-items:flex-start} .vbot .ba{width:30px;height:30px;border-radius:9px;background:linear-gradient(150deg,var(--green),var(--green-dark));color:#fff;display:grid;place-items:center;flex:none} .vbot .ba .ic{width:16px;height:16px} .vbot .bb{background:#fff;border:1px solid var(--green-100);border-radius:12px;padding:10px 13px;font-size:12.5px;color:var(--ink-2);box-shadow:var(--shadow-sm);line-height:1.45} .vbot .bb b{color:var(--green-dark)} .card:hover .vbot .bb{animation:vbotPop .5s cubic-bezier(.34,1.56,.64,1) 1} @keyframes vbotPop{0%{transform:translateY(10px) scale(.9)}55%{transform:translateY(-6px) scale(1.06)}100%{transform:translateY(0) scale(1)}} /* ============================================================================ ESTRUCTURA v3: módulos con sub-opciones, stat grande y sección de módulo dark ============================================================================ */ .subopts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:22px 0 26px;position:relative} .subopts span{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:550;padding:10px 13px;border-radius:11px;background:var(--bg-soft);border:1px solid var(--line);color:var(--ink-2)} .subopts span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green-2);flex:none} .prod-card.dark .subopts span{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#d6ece1} .prod-ctas{display:flex;gap:18px;align-items:center;flex-wrap:wrap;position:relative} @media(max-width:560px){.subopts{grid-template-columns:1fr}} .stat-big{display:flex;align-items:baseline;gap:14px;margin:24px 0 26px} .stat-big b{font-size:clamp(46px,4.6vw,60px);font-weight:700;letter-spacing:-.04em;background:linear-gradient(100deg,var(--green),var(--green-2));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1} .stat-big span{font-size:15px;color:var(--muted);max-width:230px;line-height:1.35;font-weight:550} /* mod-dark — antes: verde-casi-negro repetido en cada slide del carrusel (rendiciones/ compras/agentes-IA), 3 veces solo aquí. Ahora: superficie clara; el verde queda reservado para el bloque "about" (manifiesto de marca), que pasa a ser el único momento dramático de la página — regla del acento único. */ .mod-dark{background:transparent;color:var(--ink);overflow:hidden;position:relative} .mod-dark::before{content:none;position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(80px);background:radial-gradient(circle,rgba(52,199,89,.14),transparent 70%);top:-160px;right:-120px;pointer-events:none;animation:drift 18s var(--ease-in-out) infinite,auroraHue 14s linear infinite alternate} .mod-dark::after{content:none;position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(80px);background:radial-gradient(circle,rgba(29,170,97,.12),transparent 70%);bottom:-160px;left:-100px;pointer-events:none;animation:drift 22s var(--ease-in-out) infinite reverse,auroraHue 19s linear infinite alternate-reverse} .mod-dark .container{position:relative;z-index:1} .mod-dark h2{color:var(--ink)} .mod-dark p{color:var(--muted)} .mod-dark .split-media{background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px rgba(11,40,28,.09)} .mod-dark .subopts span{background:#fff;border-color:var(--line);color:var(--ink-2)} .mod-dark .stat-big span{color:var(--green-dark)} /* módulos como mini-cards dentro del hero */ .hero-mods{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px;position:relative;z-index:1} .hm-card{display:flex;align-items:center;gap:16px;padding:20px 24px;border-radius:17px;border:1px solid var(--line);background:rgba(255,255,255,.85);backdrop-filter:blur(8px);box-shadow:none;transition:.2s var(--ease)} .hm-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--green-100)} .hm-card .ic-box{width:48px;height:48px;border-radius:13px} .hm-card .ic-box .ic{width:23px;height:23px} .hm-card .hm-tx{min-width:0} .hm-card b{display:flex;align-items:center;gap:9px;font-size:16.5px;letter-spacing:-.01em;flex-wrap:wrap} .hm-card p{font-size:14px;color:var(--ink-2);margin-top:3px;line-height:1.45} .hm-card .go{margin-left:auto;color:var(--green-dark);width:20px;height:20px;flex:none;transition:transform .2s} .hm-card:hover .go{transform:translateX(4px)} .hm-card.dark{background:linear-gradient(160deg,#0a1b15,#123a29);border-color:transparent;color:#fff} .hm-card.dark p{color:#a9d0bd} .hm-card.dark .go{color:#7fe6a6} .hm-card.dark:hover{border-color:rgba(52,199,89,.35)} @media(max-width:880px){.hero-mods{grid-template-columns:1fr;margin-top:34px}} /* chips del hero: más pequeños y SIEMPRE delante del dashboard */ .hero-visual .hero-chip{z-index:6;padding:9px 13px;font-size:12px;border-radius:12px} .hero-chip .ic-box{width:32px;height:32px;border-radius:9px} .hero-chip .ic-box .ic{width:17px;height:17px} .hero-chip small{font-size:10.5px} .hero-chip.c1{top:3%;left:-2%} .hero-chip.c2{bottom:9%;right:-2%} /* chips flotantes sobre imágenes de producto */ .split-media{position:relative} .float-chip{position:absolute;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:10px 15px;font-size:13px;font-weight:600;display:flex;gap:9px;align-items:center;animation:floaty 4.5s ease-in-out infinite;z-index:2;color:var(--ink)} .float-chip small{display:block;font-weight:500;color:var(--muted);font-size:11px} .float-chip .ic{width:17px;height:17px;color:var(--green-dark);flex:none} .float-chip.fc-tl{top:6%;left:4%} .float-chip.fc-br{bottom:6%;right:4%;animation-delay:1.4s} @media(max-width:880px){.float-chip{display:none}} /* chips con personas (confianza, estilo Brex) */ .people-chip{position:absolute;display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 18px 7px 8px;box-shadow:var(--shadow);z-index:2;font-size:13px;font-weight:650;animation:floaty 5s ease-in-out infinite;color:var(--ink)} .people-chip img{width:36px;height:36px;border-radius:50%;object-fit:cover} .people-chip small{display:block;font-weight:500;color:var(--muted);font-size:11px} .people-chip.fc-tl{top:8%;left:-4%} @media(max-width:880px){.people-chip{display:none}} /* ============================================================================ DEMO ANIMADO DEL PRODUCTO EN EL HERO (efecto GIF, CSS puro · estilo Finnecto) ============================================================================ */ .app-frame{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;width:min(660px,100%);margin:0 auto;position:relative;z-index:1;transform-style:preserve-3d;will-change:transform} /* halo detrás del mockup del hero — mismo mecanismo que .split-media.phone::before, nunca aplicado aquí. El mockup (dashboard-khipu.svg + .app-frame) NO se toca — ver [[feedback_no_reemplazar_mockups]] — esto solo añade una capa de profundidad detrás, para que deje de leerse "flotando sin peso" frente a mockups con sombra horneada (auditoría vs Rindegastos, 2026-08-04). */ /* suavizado: con la textura sitewide ya pareja, este halo extra se leía como una mancha aparte, no como parte del mismo fondo constante. */ .hero-visual::before{content:"";position:absolute;inset:0;margin:auto;width:80%;height:80%;border-radius:50%;background:radial-gradient(closest-side,rgba(15,23,42,.06),transparent 72%);filter:blur(36px);z-index:0} .hero .app-frame{box-shadow:var(--shadow-lg),0 50px 100px -20px rgba(11,40,28,.30);transition:transform .5s var(--ease-in-out)} .hero .app-frame.tilting{transition:transform .12s var(--ease-out)} .af-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line-2);background:var(--bg-soft)} .af-bar i{width:10px;height:10px;border-radius:50%} .af-bar i:nth-child(1){background:#f2c4c4}.af-bar i:nth-child(2){background:#f3ddad}.af-bar i:nth-child(3){background:var(--green-100)} .af-url{margin-left:10px;font-size:11.5px;color:var(--muted-2);background:#fff;border:1px solid var(--line);padding:3px 12px;border-radius:7px;font-weight:550} .af-body{display:grid;grid-template-columns:158px 1fr;min-height:340px} .af-side{border-right:1px solid var(--line-2);padding:16px 10px;display:flex;flex-direction:column;gap:3px;background:#fff} .af-side img{height:20px;margin:2px 8px 14px;align-self:flex-start} .af-item{font-size:12.5px;font-weight:550;color:var(--muted);padding:8px 11px;border-radius:8px} .af-item.on{background:var(--green-50);color:var(--green-dark);font-weight:650} .af-main{padding:18px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,#fff,var(--bg-soft))} .af-head{font-size:13.5px;font-weight:700;display:flex;justify-content:space-between;align-items:center;padding:0 2px 4px} .af-pill{font-size:10.5px;font-weight:700;background:var(--green);color:#fff;padding:3px 10px;border-radius:99px} .af-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px 14px;font-size:12.5px;opacity:0;transform:translateY(10px);animation:afin .5s var(--ease) forwards} .af-row.r1{animation-delay:.4s}.af-row.r2{animation-delay:1s}.af-row.r3{animation-delay:1.6s} .af-doc{font-weight:700;color:var(--green-dark);white-space:nowrap} .af-name{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .af-amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap} .af-st{font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:99px;white-space:nowrap} .af-st.proc{background:#fdf6e7;color:#8a6d1f;position:relative;overflow:hidden} .af-st.proc::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);animation:afshine 1.6s linear infinite} .af-st.ok{background:var(--green-50);color:var(--green-dark)} .af-agent{display:flex;gap:10px;align-items:center;background:var(--ink);color:#dfeee7;border-radius:12px;padding:12px 14px;font-size:12.5px;opacity:0;transform:translateY(10px);animation:afin .5s var(--ease) 2.3s forwards;margin-top:2px} .af-agent .ba{width:28px;height:28px;border-radius:8px;background:linear-gradient(150deg,var(--green),var(--green-dark));color:#fff;display:grid;place-items:center;flex:none} .af-agent .ba .ic{width:15px;height:15px} .af-agent b{color:#7fe6a6} .af-cursor{display:inline-block;width:7px;height:12px;background:#7fe6a6;margin-left:4px;vertical-align:-2px;animation:afblink 1s steps(1) infinite} @keyframes afin{to{opacity:1;transform:none}} @keyframes afshine{to{transform:translateX(100%)}} @keyframes afblink{50%{opacity:0}} @media(max-width:560px){.af-body{grid-template-columns:1fr}.af-side{display:none}} @media(prefers-reduced-motion:reduce){.af-row,.af-agent{opacity:1;transform:none;animation:none}.af-st.proc::after{animation:none}} /* variantes del frame: KPIs (rendiciones) y tabs/tags (pagos) */ .af-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;opacity:0;transform:translateY(10px);animation:afin .5s var(--ease) .3s forwards} .af-kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-align:left} .af-kpi small{display:block;font-size:10px;color:var(--muted);font-weight:600;margin-bottom:2px} .af-kpi b{font-size:13.5px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;display:block} .af-kpi .up{font-size:9.5px;color:var(--green-dark);font-weight:700} .af-tabs{display:flex;gap:16px;font-size:11.5px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line-2);padding:0 2px 9px;margin-bottom:2px} .af-tabs .on{color:var(--green-dark);position:relative} .af-tabs .on::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:var(--green);border-radius:2px} .af-tag{font-size:9.5px;font-weight:700;padding:4px 9px;border-radius:6px;white-space:nowrap;letter-spacing:.02em} .af-tag.det{background:#fdf6e7;color:#8a6d1f} .af-tag.pay{background:var(--green-50);color:var(--green-dark)} .page-hero .app-frame{margin-top:46px;text-align:left;box-shadow:0 14px 34px rgba(11,40,28,.09)} /* screenshot real dentro del marco de navegador (crop superior) */ .af-shot{position:relative;overflow:hidden;max-height:390px;background:#fff} .af-shot img{width:132%;max-width:132%;height:auto;display:block;object-fit:cover;object-position:top left} /* capas decorativas sobre la captura real: brillo + polvo en parallax + viñeta. sin zoom en vivo (probado y descartado: no se veía bien). */ .af-shine{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.5; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%); background-size:220% 220%;animation:shineSweep 9s ease-in-out infinite} @keyframes shineSweep{0%,100%{background-position:120% -20%}50%{background-position:-20% 120%}} .af-grain{position:absolute;inset:-12%;pointer-events:none;opacity:.11;mix-blend-mode:overlay; background-image:radial-gradient(rgba(255,255,255,.95) 1px, transparent 1.6px); background-size:24px 24px;animation:grainDrift 24s linear infinite} @keyframes grainDrift{from{transform:translate(0,0)}to{transform:translate(-48px,-34px)}} .af-vignette{position:absolute;inset:0;pointer-events:none; background:radial-gradient(130% 100% at 50% 0%, transparent 55%, rgba(3,10,7,.14) 100%), linear-gradient(180deg, transparent 78%, #fff 100%), linear-gradient(90deg, transparent 85%, #fff 100%)} .split-media.raw{padding:0;background:#fff;border:1px solid var(--line)} .split-media.raw img{border-radius:0;width:100%;height:100%;object-fit:cover;object-position:top left;max-height:460px} /* Capturas reales del carrusel de compras (Órdenes/Pagos/Proveedores) — mismo .app-frame/.af-bar/.af-vignette del mockup del hero. Las 3 capturas vienen a igual resolución (1680x1080) pero con distinto "llenado" de contenido (Órdenes de compra deja ~1/3 de fondo vacío abajo); el aspect-ratio fijo + object-position:top recorta las 3 desde el mismo punto, y el af-vignette difumina el margen sobrante de Órdenes de compra en vez de dejarlo como corte seco. */ .cxc-slide .app-frame{width:100%;max-width:680px;box-shadow:0 14px 34px rgba(11,40,28,.09)} .cxc-shot{position:relative;overflow:hidden;aspect-ratio:1680/920;background:#fff} .cxc-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block} /* zoom hacia la esquina superior izquierda: agranda el título del dashboard y las primeras columnas de cada tabla, que a tamaño completo quedaban ilegibles dentro del app-frame chico */ .cxc-shot.cxc-shot-zoom-left img{object-position:left top;transform:scale(1.45);transform-origin:left top} /* mockup de celular flotante (PNG transparente) — sin tarjeta/fondo, la imagen ya viene con su propia sombra 3D */ .split-media.phone{background:none;box-shadow:none;border:none;padding:0;overflow:visible;display:grid;place-items:center;min-height:460px;position:relative} .split-media.phone::before{content:"";position:absolute;inset:0;margin:auto;width:70%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(15,23,42,.08),transparent 72%);filter:blur(6px)} .split-media.phone img{position:relative;width:min(400px,86%);border-radius:0;filter:drop-shadow(0 34px 60px rgba(11,40,28,.30));animation:floaty 5.5s ease-in-out infinite} @media(prefers-reduced-motion:reduce){.split-media.phone img{animation:none}} /* logo-group-card — antes: 3 formas distintas de mostrar un grupo de logos (ERPs sueltos sin caja, prensa en tarjetas individuales de 280×112 cada una, inversionistas ya agrupados en una sola tarjeta blanca). Se unifica bajo el patrón que ya funcionaba mejor — el de inversionistas — como UNA tarjeta que agrupa la fila de logos, en vez de una caja por logo. */ .logo-group-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px 44px; padding:32px 36px;max-width:960px;margin-left:auto;margin-right:auto} /* muro de logos ERP (los logos, no solo los nombres) */ .erp-wall{margin-top:26px;text-align:center} .eco .section-head{margin-bottom:22px} .erp-lbl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);display:block;margin-bottom:24px} /* override puntual de .logo-group-card: grid parejo (3x2) en vez de flex-wrap (el flex-wrap dejaba 4 arriba / 2 abajo por los distintos anchos de logo) */ .erp-logos.logo-group-card{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem 3rem;align-items:center;justify-items:center;padding:28px 40px} @media(max-width:640px){.erp-logos.logo-group-card{grid-template-columns:repeat(2,1fr);padding:20px 20px}} .erp-logos img{max-height:40px;height:26px;width:auto;transition:transform .2s var(--ease);cursor:pointer} .erp-logos img:hover{transform:translateY(-2px) scale(1.05)} .erp-word{font-weight:800;font-size:19px;letter-spacing:-.02em;color:#5f6b65} .erp-duo{display:inline-flex;align-items:center;gap:10px;transition:transform .2s var(--ease);cursor:pointer} .erp-duo:hover{transform:translateY(-2px) scale(1.05)} .erp-duo img{height:26px} .erp-duo b{font-size:19px;font-weight:650;color:#706e6b;letter-spacing:-.01em;white-space:nowrap} /* ajuste fino adicional (además del fix de grid arriba): cada logo trae su propio recorte interno, así que una altura pareja no se ve pareja — se afina por logo para emparejar el peso visual real. */ .erp-logos img[alt="SISCONT"]{height:33px} .erp-logos img[alt="Odoo"]{height:39px} /* causa real de la fila desbalanceada en mobile (col. izq. grande / col. der. enana): el grid de 2 columnas alterna auto-placement col1/col2/col1/... y "Microsoft Dynamics" (white-space:nowrap, ~140px de texto a 19px) cae en columna 1 junto a SAP y SISCONT — su min-content obliga a esa columna a medir ~185px, mientras la columna 2 (Oracle/CONCAR/Odoo, puras imágenes que sí se encogen) queda aplastada a ~46px por el 1fr. No es un problema de los logos individuales, es el ancho del track del grid. Achicar el texto le quita esa fuerza al track y las columnas quedan parejas. */ @media(max-width:640px){.erp-duo b{font-size:13.5px}} /* CTA "ver todas las integraciones" con más peso visual (solo en esta sección) */ .eco .link-arrow{border:1.5px solid var(--green-100);background:#fff;padding:12px 22px;border-radius:999px;box-shadow:var(--shadow-sm);transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)} .eco .link-arrow:hover{background:var(--green-50);border-color:var(--green);transform:translateY(-1px)} /* ============================================================================ MÓDULO CXP — Escena "cuentas por pagar" (home). Loop de 7s por ESTADOS. State machine (stage 0→4) orquestada con WAAPI en app.js. Todo namespaced .cxp-* Cámara/cursor: cubic-bezier(.25,1,.5,1) · Beto: spring back-out. ============================================================================ */ /* Mismo alto mínimo que .split-media.phone y .agents-orb (ver "punto medio" arriba): la escena conserva su aspect-ratio propio y se centra dentro de esta caja para que Compras no se sienta "más chata" que Rendiciones/IA al cambiar de tab. */ .cxp-media{padding:0;background:none;border:none;box-shadow:none;overflow:visible;min-height:460px;display:flex;align-items:center;justify-content:center} .cxp-stage{ position:relative;overflow:hidden;isolation:isolate; aspect-ratio:16/11;width:100%;perspective:1400px; background:transparent; } /* ---- Cámara + plataforma (oculta hasta Estado 2) ---- */ .cxp-cam{position:absolute;inset:0;transform-origin:84% 24%;will-change:transform;opacity:0} .cxp-win{position:absolute;inset:4px;border-radius:12px;overflow:hidden;background:#fff; display:flex;flex-direction:column;color:var(--ink);box-shadow:0 20px 50px rgba(0,0,0,.35)} .cxp-titlebar{display:flex;align-items:center;gap:7px;padding:9px 13px;border-bottom:1px solid var(--line-2);background:#fbfdfc;flex:none} .cxp-dot{width:9px;height:9px;border-radius:50%} .cxp-dot:nth-child(1){background:#ff5f57}.cxp-dot:nth-child(2){background:#febc2e}.cxp-dot:nth-child(3){background:#28c840} .cxp-url{margin-left:8px;font-size:11px;color:var(--muted);background:#eef2f0;padding:3px 12px;border-radius:999px;font-weight:500} .cxp-body{flex:1;display:flex;min-height:0} .cxp-sidebar{flex:none;width:32%;max-width:190px;border-right:1px solid var(--line-2);padding:14px 12px;background:#fcfdfd} .cxp-brand{display:flex;align-items:center;margin-bottom:16px;padding-left:2px} .cxp-brand img{height:22px;width:auto;display:block} .cxp-nav{display:flex;flex-direction:column;gap:2px} .cxp-nav span{font-size:12.5px;color:var(--muted);padding:7px 10px;border-radius:8px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cxp-nav span.active{background:var(--green-50);color:var(--green-dark);font-weight:600} .cxp-main{flex:1;min-width:0;padding:14px 16px;position:relative;display:flex;flex-direction:column;overflow:hidden} .cxp-main-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .cxp-main-head h4{font-size:16px;font-weight:700;letter-spacing:-.02em} .cxp-genbtn{display:inline-flex;align-items:center;gap:5px;background:var(--green);color:#fff;border:none;font-family:inherit;font-weight:600;font-size:11.5px;padding:7px 12px;border-radius:999px;cursor:default;box-shadow:0 6px 16px rgba(29,170,97,.34);will-change:transform} .cxp-genbtn .ic{width:13px;height:13px;stroke-width:2.4} .cxp-tabs{display:flex;gap:16px;border-bottom:1px solid var(--line-2);margin-bottom:14px;padding-bottom:9px} .cxp-tabs span{font-size:12px;color:var(--muted);font-weight:500;position:relative} .cxp-tabs span.active{color:var(--green-dark);font-weight:600} .cxp-tabs span.active::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:var(--green);border-radius:2px} /* ---- Filas ---- */ .cxp-rows{position:relative;flex:1;min-height:0} .cxp-row{position:absolute;left:0;right:0;top:0;height:52px;border:1px solid var(--line-2);border-radius:12px; background:#fff;display:flex;align-items:center;gap:10px;padding:0 14px;opacity:0;will-change:transform,opacity,box-shadow} .cxp-row[data-row="2"]{top:64px;z-index:1} .cxp-row[data-row="1"]{z-index:2} .cxp-badge{font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:7px;white-space:nowrap;flex:none} .cxp-badge.green{background:var(--green-50);color:var(--green-dark)} .cxp-badge.amber{background:#fdf3d7;color:#a5730a} .cxp-code{font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cxp-amt{margin-left:auto;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;flex:none} .cxp-status{position:relative;flex:none;display:inline-grid;min-width:78px;justify-items:end} .cxp-st{grid-area:1/1;font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:7px;white-space:nowrap} .cxp-st-prog{background:#eef2f0;color:#8a958f} .cxp-st-done{background:var(--green-50);color:var(--green-dark);opacity:0} .cxp-st-static{opacity:1} /* la detracción entra ya "Ejecutado" */ /* ---- Estado 1: factura física + láser ---- */ .cxp-invoice{position:absolute;top:50%;left:50%;width:min(38%,186px);transform:translate(-50%,-50%) scale(.94); background:#fff;border-radius:12px;box-shadow:0 26px 60px rgba(0,0,0,.5);padding:18px 18px 16px; overflow:hidden;opacity:0;z-index:8;will-change:transform,opacity} .cxp-inv-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .cxp-inv-tag{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--green-dark)} .cxp-inv-tag .ic{width:13px;height:13px} .cxp-inv-no{font-size:10px;font-weight:600;color:var(--muted)} .cxp-inv-lines{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .cxp-inv-lines i{height:6px;border-radius:3px;background:#eef2f0} .cxp-inv-rows{display:flex;flex-direction:column;gap:11px;margin-bottom:16px} .cxp-inv-rows span{display:flex;align-items:center;justify-content:space-between} .cxp-inv-rows i{height:5px;border-radius:3px;background:#eaeeec} .cxp-inv-total{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line-2);padding-top:12px;font-size:11.5px;color:var(--muted)} .cxp-inv-total b{font-size:14px;color:var(--ink)} .cxp-laser{position:absolute;left:-2%;width:104%;height:3px;top:0; background:linear-gradient(90deg,transparent,rgba(52,199,89,.9),transparent); box-shadow:0 0 16px 5px rgba(52,199,89,.6);opacity:0;will-change:transform,opacity} /* ---- Cursor táctico ---- */ .cxp-cursor{position:absolute;top:0;left:0;width:22px;height:22px;z-index:20;opacity:0; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));will-change:transform,opacity;pointer-events:none} /* ---- Banner Beto (aparece en el clímax) ---- */ .cxp-beto{position:absolute;left:16px;right:16px;bottom:14px;z-index:15; display:flex;align-items:center;gap:11px;padding:12px 15px;border-radius:12px; background:#0e1512;color:#eafaf1;box-shadow:0 14px 34px rgba(0,0,0,.45); transform:translateY(160%);opacity:0;will-change:transform,opacity} .cxp-beto p{font-size:12px;line-height:1.35;color:#d6ece1;margin:0} .cxp-beto b{color:#7fe6a6} .cxp-beto-avatar{position:relative;flex:none;width:30px;height:30px;border-radius:9px;background:var(--green);color:#fff;display:grid;place-items:center} .cxp-beto-avatar .ic{width:17px;height:17px} .cxp-live{position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;background:#34C759;border:2px solid #0e1512;animation:cxpPulse 1.6s ease-in-out infinite} @keyframes cxpPulse{0%,100%{box-shadow:0 0 0 0 rgba(52,199,89,.5)}50%{box-shadow:0 0 0 5px rgba(52,199,89,0)}} /* ---- Fundido a negro (reset) ---- */ .cxp-fade{position:absolute;inset:0;z-index:30;background:#050a08;opacity:0;pointer-events:none;will-change:opacity} /* ---- Responsive ---- */ @media(max-width:880px){ .cxp-stage{aspect-ratio:4/3} .cxp-sidebar{display:none} .cxp-cam{transform-origin:80% 24%} .cxp-invoice{width:min(62%,220px)} } @media(prefers-reduced-motion:reduce){ .cxp-live{animation:none} } /* ============================================================================ RENDICIONES — "Cada tipo de gasto, gobernado": centro de control B2B. Layout de 2 columnas (~40/60): a la izquierda copy + tabs verticales interactivos (acordeón simple, sin animación de altura vía JS: solo max-height en CSS); a la derecha una ventana con el mockup real del caso de uso activo. Al hacer clic en un tab (assets/app.js) se togglean las clases .active del tab y del panel correspondiente — sin JS, degrada al primer caso de uso siempre visible. ============================================================================ */ .gt-usecases{background:transparent;overflow:hidden} .gt-split{display:grid;grid-template-columns:.86fr 1.14fr;gap:64px;align-items:center} .gt-copy .lead{color:var(--muted);font-size:17px;line-height:1.6;margin:18px 0 32px;max-width:420px} .gt-tabs{display:flex;flex-direction:column;gap:2px;margin-bottom:28px} .gt-tab{text-align:left;background:transparent;border:none;border-left:3px solid transparent; padding:16px 20px;border-radius:0 14px 14px 0;cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease)} .gt-tab h3{font-size:16.5px;font-weight:700;color:var(--ink-2);margin:0;transition:color .25s var(--ease)} .gt-tab p{font-size:14px;color:var(--muted);line-height:1.55;max-height:0;opacity:0;overflow:hidden; margin-top:0;transition:max-height .35s var(--ease),opacity .3s var(--ease),margin-top .35s var(--ease)} .gt-tab:hover h3{color:var(--green-dark)} .gt-tab.active{background:#fff;border-left-color:var(--green);box-shadow:var(--shadow-sm)} .gt-tab.active h3{color:var(--green-dark)} .gt-tab.active p{max-height:120px;opacity:1;margin-top:8px} .gt-more{margin-left:20px} .gt-visual{position:relative} .gt-window{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px; padding:14px;box-shadow:var(--shadow-lg);overflow:hidden;min-height:420px} .gt-panel{display:none} .gt-panel.active{display:block;animation:gtPanelIn .4s var(--ease) both} .gt-panel img{width:100%;height:auto;display:block;border-radius:12px} @keyframes gtPanelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @media(max-width:960px){ .gt-split{grid-template-columns:1fr;gap:32px} .gt-window{min-height:0} } @media(prefers-reduced-motion:reduce){ .gt-panel.active{animation:none} } /* ============================================================================ ALTERNANCIA VERDE DIFUMINADO / BLANCO — se aplica por instancia (clase extra en el HTML de cada sección), no en la clase base de la sección, porque varias clases (.metrics, .usecases, etc.) se reusan en más de una página con una posición distinta dentro de su propia secuencia de alternancia. El hero de cada página y el momento oscuro (.about, .cta-band, footer) quedan fuera de esta alternancia. Va al final del archivo a propósito: misma especificidad que .eco/.usecases/etc., necesita ganar por orden de cascada. */ .band-white{background:#fff} /* F3F4F6 en vez de F9FAFB: el gris más pálido casi no se distinguía del blanco contiguo — Stefano pidió que las bandas se noten al pasar de una a otra. */ .band-gray{background:#F3F4F6} /* ============================================================================ LANDING DE CAMPAÑA (demo-ads.html) — página exclusiva para Ads (Google/Meta). Formato tarjeta blanca centrada, dos columnas: propuesta+prueba social / formulario HubSpot. No se referencia desde ninguna otra página del sitio. ============================================================================ */ .adslp{padding:56px 0 88px;background:#F3F4F6} .adslp-card{ display:grid;grid-template-columns:1.08fr .92fr;gap:0; max-width:1120px;margin:0 auto;background:#fff;border-radius:28px; border:1px solid var(--green-100);box-shadow:var(--shadow-lg);overflow:hidden; } /* min-width:0 es obligatorio: sin esto, el ancho "max-content" del carrusel de logos (más abajo) se filtra como mínimo del track del grid y empuja la columna del formulario fuera de la tarjeta (bug real, visto en pantalla completa). */ .adslp-left{padding:52px 48px 44px;min-width:0} .adslp-right{padding:52px 44px;background:var(--bg-soft);border-left:1px solid var(--line);min-width:0} .adslp-brand img{height:26px;margin-bottom:22px} .adslp-h1{font-size:clamp(28px,3.2vw,38px);margin-bottom:14px} .adslp-sub{color:var(--muted);font-size:15.5px;line-height:1.6;max-width:460px;margin-bottom:28px} .adslp-check{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:34px} .adslp-check li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.5} .adslp-check-ic{flex:none;width:22px;height:22px;color:var(--green)} .adslp-check-ic .ic{width:22px;height:22px} /* logos — mismo efecto de carrusel continuo que .trusted-by-logos (scroll-logos, ya definido más arriba en este archivo), pero acotado al ancho de la columna y con logos más grandes para que se lean bien dentro de la tarjeta. */ .adslp-logos-wrap{position:relative;overflow:hidden;padding:20px 0;margin-bottom:34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .adslp-logos-wrap::before,.adslp-logos-wrap::after{content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none} .adslp-logos-wrap::before{left:0;background:linear-gradient(90deg,#fff,transparent)} .adslp-logos-wrap::after{right:0;background:linear-gradient(270deg,#fff,transparent)} .adslp-logos-track{display:flex;align-items:center;width:max-content;animation:scroll-logos 26s linear infinite} .adslp-logos-wrap:hover .adslp-logos-track{animation-play-state:paused} .adslp-logos-track img{height:40px;width:auto;max-width:130px;object-fit:contain;margin-right:52px;flex-shrink:0} /* teléfono — réplica de los "cuadrantes" del mockup de Rindegastos: la imagen NO se ve completa, se corta (mask-image) a cierta altura como en el original; badges e íconos van derechos (sin rotación), apoyados sobre el celular y su borde. */ .adslp-phone-row{display:flex;align-items:center;gap:38px;padding-top:6px} .adslp-phone-wrap{position:relative;flex:none;width:196px;margin:0 30px 20px 34px;filter:drop-shadow(0 18px 26px rgba(11,40,28,.16))} .adslp-phone{overflow:hidden;max-height:262px;border-radius:22px} .adslp-phone img{width:100%;display:block;-webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent 92%);mask-image:linear-gradient(to bottom,#000 66%,transparent 92%)} .adslp-badge{position:absolute;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#fff;color:var(--green-dark);box-shadow:var(--shadow);border:1px solid var(--line);animation:floaty 4.5s ease-in-out infinite;z-index:2} .adslp-badge .ic{width:21px;height:21px} .adslp-badge.b1{top:3%;left:-17%;animation-delay:.2s} .adslp-badge.b2{top:-3%;right:-15%;animation-delay:.9s} .adslp-badge.b3{top:27%;right:-19%;animation-delay:1.6s} .adslp-tag{position:absolute;bottom:33%;left:-9%;display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;font-weight:700;font-size:10.5px;white-space:nowrap;padding:7px 12px;border-radius:999px;z-index:2;box-shadow:0 8px 18px rgba(0,0,0,.28)} .adslp-tag .ic-sm{width:12px;height:12px} .adslp-pill{position:absolute;bottom:1%;left:-22%;display:inline-flex;align-items:center;gap:7px;background:var(--green);color:#fff;font-weight:700;font-size:12px;white-space:nowrap;padding:10px 16px;border-radius:999px;box-shadow:0 12px 24px rgba(29,170,97,.34);z-index:2} .adslp-pill .ic{width:15px;height:15px} .adslp-trust p{font-size:22px;color:var(--ink-2);line-height:1.35;font-weight:500} .adslp-trust-num{font-weight:700;color:var(--green-dark)} .adslp-h2{font-size:clamp(20px,2.2vw,25px);margin-bottom:22px} .adslp-form{position:relative} .adslp-form .hbspt-form label,.adslp-form form label{display:block;font-weight:600;font-size:13.5px;color:var(--ink-2);margin-bottom:6px} .adslp-form .hs-form-required{color:var(--green-dark)} .adslp-form input[type="text"],.adslp-form input[type="email"],.adslp-form input[type="tel"],.adslp-form input[type="number"],.adslp-form select,.adslp-form textarea{ width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14.5px;font-family:var(--font);color:var(--ink);transition:border-color .15s } .adslp-form input:focus,.adslp-form select:focus,.adslp-form textarea:focus{outline:none;border-color:var(--green)} .adslp-form .hs-form-field{margin-bottom:16px} .adslp-form fieldset{max-width:100%!important} .adslp-form .form-columns-2,.adslp-form .form-columns-3{display:grid;grid-template-columns:1fr 1fr;gap:14px} .adslp-form .hs-button{width:100%;display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:#fff;font-weight:600;font-size:16px;padding:14px 26px;border-radius:999px;border:none;cursor:pointer;transition:transform .16s var(--ease-out),background .18s} .adslp-form .hs-button:hover{transform:translateY(-2px);background:var(--green-dark)} .adslp-form .hs-error-msgs{list-style:none;color:#c0392b;font-size:12.5px;margin-top:4px} .adslp-form .hs-error-msgs label{color:#c0392b;font-weight:500} @media(max-width:960px){ .adslp-card{grid-template-columns:1fr} .adslp-right{border-left:none;border-top:1px solid var(--line)} } @media(max-width:560px){ .adslp-left,.adslp-right{padding:36px 24px} .adslp-phone-row{gap:26px;flex-wrap:wrap} .adslp-phone-wrap{width:138px;margin:0 22px 16px 22px} .adslp-phone{max-height:184px} .adslp-badge{width:34px;height:34px;border-radius:10px} .adslp-badge .ic{width:16px;height:16px} .adslp-tag{font-size:9.5px;padding:5px 9px} .adslp-pill{font-size:10.5px;padding:8px 12px} .adslp-logos-track img{height:32px;margin-right:38px} }