/* ViraAutoChat — landing público (viraautochat.pe) Estética "Framer-grade" con stack gratuito: GSAP + ScrollTrigger + SplitText (licencia estándar gratuita), auto-hospedados en /assets/vendor. El CSS mantiene fallbacks completos: sin JS todo el contenido es visible y usable. Regla de rendimiento de este archivo: nada que se mueva o se vea durante el scroll usa filter/backdrop-filter — solo transform, opacity y degradados, que el navegador compone sin repintar. */ :root{ --tinta:#111621; --tinta-suave:#4e5774; --tenue:#5f6a86; --fondo:#ffffff; --fondo-alt:#f5f7fb; --borde:#e6e9f2; --marca:#0086f0; --marca-media:#0072e0; --marca-osc:#0063c4; --marca-clara:#eaf2ff; --navy:#0a1030; --navy-2:#101a56; --ok:#16a34a; --wa:#25d366; --ambar:#b45309; --radio:20px; --radio-lg:26px; --radio-sm:16px; --ancho:1180px; --fuente:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --display:'Plus Jakarta Sans','Inter',-apple-system,sans-serif; --sombra:0 2px 20px rgba(17,22,33,.05); --sombra-alta:0 24px 60px rgba(17,22,33,.11); --sombra-azul:0 10px 30px rgba(0,134,240,.28); --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:96px} body{ font-family:var(--fuente);color:var(--tinta);background:var(--fondo); line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden; font-feature-settings:'cv11','ss01'; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} ::selection{background:#cce6ff;color:var(--tinta)} :focus-visible{outline:2px solid var(--marca);outline-offset:3px;border-radius:6px} .saltar{position:absolute;left:-9999px;top:0;background:var(--marca);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0} .saltar:focus{left:0} .wrap{max-width:var(--ancho);margin:0 auto;padding:0 24px} .wrap.estrecho{max-width:860px} section{padding:112px 0;position:relative} section.alterna{background:var(--fondo-alt)} h2{ font-family:var(--display);font-size:clamp(1.95rem,4.2vw,3.1rem); letter-spacing:-.04em;line-height:1.08;margin-bottom:18px;text-align:center;font-weight:800; text-wrap:balance; } h2.izquierda{text-align:left} h3{font-family:var(--display);font-size:1.1rem;letter-spacing:-.02em;margin-bottom:8px;font-weight:700} .entrada{text-align:center;color:var(--tinta-suave);max-width:62ch;margin:0 auto 60px;font-size:1.08rem} .rotulo{ display:table;margin:0 auto 18px;padding:6px 15px;border-radius:999px; font-size:.73rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase; color:var(--marca-osc);background:var(--marca-clara);border:1px solid #d5e6ff; } .rotulo.claro{margin:0 0 18px;color:#8fc6ff;background:rgba(0,134,240,.14);border-color:rgba(0,134,240,.35)} /* Textura de grano para las cajas oscuras */ .grano{position:absolute;inset:0;background-image:var(--grano);background-size:160px;opacity:.14;pointer-events:none;z-index:1} /* ---------- Animación de entrada (fallback sin GSAP) ---------- Solo se oculta contenido si el JS llegó a correr: un script inline en el añade html.js, y landing.js añade html.anim-listo. Si landing.js no carga, un failsafe con retardo vuelve a mostrar todo. */ html.js [data-anim]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)} html.js:not(.anim-listo) [data-anim]{animation:animFailsafe 0s 3s forwards} @keyframes animFailsafe{to{opacity:1;transform:none}} html.js [data-anim].visible{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ html.js [data-anim]{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} .orbe,.latido,.tarjetita.mueve,.telefono,.marquee-pista,.toast-flotante,.degradado,.wa-msg,.wa-etiqueta,.wa-puntos,.brillo::before{animation:none !important} } /* ---------- Nav (pill flotante al hacer scroll) ---------- */ .nav{position:sticky;top:0;z-index:100} .nav-caja{ display:flex;align-items:center;gap:22px;min-height:78px;padding:0 4px; border:1px solid transparent;border-radius:999px; transition:min-height .35s cubic-bezier(.16,1,.3,1),margin .35s cubic-bezier(.16,1,.3,1), padding .35s cubic-bezier(.16,1,.3,1),background .35s,border-color .35s,box-shadow .35s; background:transparent; } /* Sin backdrop-filter: desenfocar lo que hay detrás de una barra fija obliga a releer y refiltrar el fondo en cada frame de scroll. Un blanco casi opaco da el mismo resultado visual sobre una página clara y no cuesta nada. */ .nav::before{ content:"";position:absolute;inset:0;z-index:-1;opacity:1;transition:opacity .35s; background:rgba(255,255,255,.92); } .nav.solido::before{opacity:0} .nav.solido .nav-caja{ margin:10px 0;min-height:58px;padding:0 8px 0 18px; background:rgba(255,255,255,.94); border-color:var(--borde);box-shadow:0 12px 44px rgba(17,22,33,.09); } .marca{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.06rem;letter-spacing:-.03em;color:var(--tinta)} .marca .punto{ width:34px;height:34px;border-radius:11px;flex:none; background:linear-gradient(135deg,var(--marca),#00c2ff);color:#fff; display:grid;place-items:center;font-size:.95rem;font-weight:800; box-shadow:0 4px 14px rgba(0,134,240,.35); } .enlaces{display:flex;gap:28px;margin-left:auto} .enlaces a{color:var(--tinta-suave);font-size:.92rem;font-weight:500;padding:4px 0;transition:color .2s} .enlaces a:hover{color:var(--tinta)} .acciones{display:flex;gap:6px;align-items:center} .menu-movil{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto} .menu-movil span{width:24px;height:2px;background:var(--tinta);border-radius:2px;transition:transform .3s,opacity .3s} .menu-movil[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-movil[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-movil[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .panel-movil{ display:none;flex-direction:column;gap:6px;padding:0 24px 22px;background:#fff; border-bottom:1px solid var(--borde);max-height:calc(100dvh - 78px);overflow-y:auto; } .panel-movil.abierto{display:flex} /* Con el menú abierto el header recupera su fondo completo (la píldora sola dejaría franjas transparentes entre ella y el panel). */ .nav.menu-abierto::before{opacity:1} .panel-movil a{color:var(--tinta-suave);padding:12px 0;border-bottom:1px solid var(--borde);font-weight:500} .panel-movil .btn{margin-top:10px;border-bottom:0} /* ---------- Botones ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:11px 24px;border-radius:999px;font-weight:600;font-size:.93rem; border:1.5px solid transparent;cursor:pointer;position:relative;overflow:hidden; letter-spacing:-.01em; transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s,background .18s,color .18s,border-color .18s; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.98)} /* Texto blanco pequeño exige azules más oscuros (#0072e0 = 4.68:1, AA). */ .btn-primario{background:linear-gradient(135deg,var(--marca-media),var(--marca-osc));color:#fff;box-shadow:var(--sombra-azul)} .btn-primario:hover{box-shadow:0 14px 38px rgba(0,134,240,.4)} .btn-borde{border-color:var(--borde);color:var(--tinta);background:#fff} .btn-borde:hover{border-color:var(--marca);color:var(--marca-osc)} .btn-vidrio{background:#fff;color:var(--tinta);border-color:var(--borde);box-shadow:var(--sombra)} .btn-vidrio:hover{border-color:#c9d4e8} .btn-blanco{background:#fff;color:var(--navy);box-shadow:0 12px 36px rgba(0,0,0,.25)} .btn-blanco:hover{box-shadow:0 16px 44px rgba(0,0,0,.32)} .btn-texto{color:var(--tinta-suave)} .btn-texto:hover{color:var(--tinta)} .btn-grande{padding:16px 34px;font-size:1.03rem} .btn.ancho{display:flex;width:100%} .play{width:0;height:0;border-left:9px solid var(--marca);border-top:6px solid transparent;border-bottom:6px solid transparent} /* Reflejo que cruza el botón principal */ /* Animar transform y no left: 'left' recalcula posición y repinta el botón en cada frame; transform se resuelve en la GPU. */ .brillo::before{ content:"";position:absolute;top:0;left:0;width:60%;height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.38),transparent); animation:cruzar 3.6s ease-in-out infinite; } @keyframes cruzar{ 0%,72%{transform:translate3d(-220%,0,0) skewX(-22deg)} 100%{transform:translate3d(320%,0,0) skewX(-22deg)} } /* ---------- Hero ---------- */ .hero{padding:96px 0 96px;overflow:hidden} .fondo-hero{position:absolute;inset:0;pointer-events:none} .rejilla-puntos{ position:absolute;inset:0; background-image:radial-gradient(circle,#d5e2f5 1.2px,transparent 1.2px); background-size:26px 26px; -webkit-mask-image:radial-gradient(900px 600px at 50% 0%,#000 30%,transparent 75%); mask-image:radial-gradient(900px 600px at 50% 0%,#000 30%,transparent 75%); } /* Los halos son degradados radiales, no filter:blur(). Un blur de 85px sobre un elemento de 560px obliga al navegador a repintar y volver a desenfocar toda esa superficie en cada frame de scroll: era la causa principal del arrastre. Un degradado se rasteriza una vez y luego solo se compone. */ .orbe{position:absolute;border-radius:50%} .orbe-1{width:680px;height:680px;top:-250px;left:-200px;background:radial-gradient(circle closest-side,rgba(150,203,255,.75),rgba(150,203,255,0))} .orbe-2{width:560px;height:560px;top:80px;right:-200px;background:radial-gradient(circle closest-side,rgba(178,240,222,.75),rgba(178,240,222,0))} .orbe-3{width:520px;height:520px;bottom:-240px;left:34%;background:radial-gradient(circle closest-side,rgba(197,214,255,.7),rgba(197,214,255,0))} .orbe-4{width:820px;height:560px;top:-200px;left:50%;transform:translateX(-50%);background:radial-gradient(ellipse closest-side,rgba(0,134,240,.55),rgba(0,134,240,0))} .hero .wrap{position:relative;z-index:2} .hero-rejilla{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} .pastilla{ display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:999px; background:var(--marca-clara);color:var(--marca-osc);border:1px solid #d5e6ff; font-size:.83rem;font-weight:600;margin-bottom:26px; } .latido{width:7px;height:7px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 0 rgba(37,211,102,.7);animation:latir 2s infinite} @keyframes latir{ 0%{box-shadow:0 0 0 0 rgba(37,211,102,.7)} 70%{box-shadow:0 0 0 9px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} } h1{ font-family:var(--display);font-size:clamp(2.4rem,5.4vw,4.1rem); line-height:1.04;letter-spacing:-.045em;margin-bottom:24px;font-weight:800; } .degradado{ /* Mismo par azul→cian del logo: la identidad no termina en el verde de Meta. */ background:linear-gradient(110deg,var(--marca),#00c2ff); -webkit-background-clip:text;background-clip:text;color:transparent; } .bajada{font-size:clamp(1rem,1.7vw,1.16rem);color:var(--tinta-suave);max-width:54ch;margin-bottom:34px} .acciones-hero{display:flex;gap:14px;flex-wrap:wrap} .nota-hero{margin-top:18px;font-size:.88rem;color:var(--tenue)} .marcas-hero{list-style:none;display:flex;gap:24px;flex-wrap:wrap;margin-top:32px;padding-top:28px;border-top:1px solid var(--borde)} .marcas-hero li{font-size:.86rem;color:var(--tinta-suave);display:flex;align-items:center;gap:7px;font-weight:500} .marcas-hero span{color:var(--ok);font-weight:700} /* ---------- Teléfono (WhatsApp claro) ---------- */ .hero-demo{position:relative;display:grid;place-items:center} .resplandor{ position:absolute;width:440px;height:440px;border-radius:50%; background:radial-gradient(circle closest-side,rgba(0,134,240,.22),rgba(0,134,240,0)); } .telefono{ position:relative;width:300px;background:#efeae2;border-radius:38px; border:9px solid #111621;box-shadow:0 40px 90px rgba(17,22,33,.32),0 0 0 1px rgba(17,22,33,.06); overflow:hidden;animation:levitar 6s ease-in-out infinite; } @keyframes levitar{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}} .muesca{position:absolute;top:0;left:50%;transform:translateX(-50%);width:96px;height:19px;background:#111621;border-radius:0 0 13px 13px;z-index:3} .wa-barra{display:flex;align-items:center;gap:9px;background:#f0f2f5;padding:15px 12px 11px;color:var(--tinta);border-bottom:1px solid #e4e6ea} .wa-volver{font-size:1.3rem;color:#54656f;line-height:1} .wa-avatar{width:31px;height:31px;border-radius:50%;background:linear-gradient(135deg,var(--marca),#00c2ff);display:grid;place-items:center;font-size:.82rem;font-weight:700;color:#fff;flex:none} .wa-quien{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0} .wa-quien strong{font-size:.83rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wa-quien small{font-size:.68rem;color:#54656f} .wa-iconos{color:#54656f;font-size:1.1rem} .wa-chat{ height:335px;padding:14px 11px;overflow:hidden;display:flex;flex-direction:column;gap:8px; background:#efeae2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23000000' fill-opacity='.028'%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Ccircle cx='45' cy='34' r='2'/%3E%3Ccircle cx='26' cy='50' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); } .wa-msg{ max-width:82%;padding:8px 11px;border-radius:9px;font-size:.79rem;line-height:1.45; position:relative;animation:entrarMsg .34s cubic-bezier(.16,1,.3,1) both;word-wrap:break-word; box-shadow:0 1px 1px rgba(17,22,33,.08); } @keyframes entrarMsg{from{opacity:0;transform:translateY(9px) scale(.96)}to{opacity:1;transform:none}} .wa-msg.ellos{background:#ffffff;color:var(--tinta);align-self:flex-start;border-top-left-radius:2px} .wa-msg.yo{background:#d9fdd3;color:var(--tinta);align-self:flex-end;border-top-right-radius:2px} .wa-hora{display:block;text-align:right;font-size:.58rem;color:rgba(17,22,33,.4);margin-top:3px} .wa-msg.yo .wa-hora::after{content:" ✓✓";color:#53bdeb} .wa-etiqueta{ align-self:flex-end;font-size:.6rem;color:#0a7c43;background:rgba(37,211,102,.14); border:1px solid rgba(37,211,102,.35);padding:2px 8px;border-radius:999px; animation:entrarMsg .34s both;font-weight:600; } .wa-puntos{display:flex;gap:3px;align-self:flex-start;background:#fff;padding:11px;border-radius:9px;border-top-left-radius:2px;animation:entrarMsg .3s both;box-shadow:0 1px 1px rgba(17,22,33,.08)} .wa-puntos i{width:5px;height:5px;border-radius:50%;background:#8696a0;animation:rebotar 1.3s infinite} .wa-puntos i:nth-child(2){animation-delay:.18s} .wa-puntos i:nth-child(3){animation-delay:.36s} @keyframes rebotar{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}} .wa-escribir{display:flex;align-items:center;gap:8px;background:#f0f2f5;padding:9px 11px} .wa-input{flex:1;background:#fff;border-radius:999px;padding:7px 13px;font-size:.75rem;color:#8696a0;box-shadow:0 1px 1px rgba(17,22,33,.05)} .wa-enviar{width:29px;height:29px;border-radius:50%;background:#00a884;display:grid;place-items:center;color:#fff;font-size:.75rem;flex:none} /* Toasts flotantes junto al teléfono */ .telefono-marco{position:relative;width:max-content} .toast-flotante{ position:absolute;display:flex;align-items:center;gap:10px; background:rgba(255,255,255,.97);border:1px solid var(--borde);border-radius:var(--radio-sm); padding:11px 16px;box-shadow:0 18px 44px rgba(17,22,33,.16); opacity:0;animation:asomarToast 10s ease-in-out infinite; } .toast-venta{bottom:13%;left:-34px} .toast-ia{top:9%;right:-26px;animation-delay:5s} @keyframes asomarToast{ 0%,4%{opacity:0;transform:translateY(10px) scale(.96)} 10%,44%{opacity:1;transform:translateY(0) scale(1)} 52%,100%{opacity:0;transform:translateY(-8px) scale(.97)} } .toast-icono{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:.85rem;font-weight:700;flex:none} .toast-icono.ok{background:rgba(22,163,74,.13);color:var(--ok)} .toast-icono.ia{background:var(--marca-clara);color:var(--marca)} .toast-texto{display:flex;flex-direction:column;line-height:1.3} .toast-texto strong{font-size:.82rem;letter-spacing:-.015em} .toast-texto small{font-size:.72rem;color:var(--tinta-suave)} /* ---------- Marquee de rubros ---------- */ .rubros{padding:6px 0 0;overflow:hidden} .rubros-titulo{ text-align:center;font-size:.8rem;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--tenue);margin-bottom:22px; } .marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .marquee-pista{display:flex;width:max-content;animation:marquesina 38s linear infinite} .marquee:hover .marquee-pista,.marquee:focus-within .marquee-pista{animation-play-state:paused} @keyframes marquesina{to{transform:translate3d(-50%,0,0)}} .rubro{ flex:none;margin-right:14px;padding:10px 20px;border-radius:999px; background:#fff;border:1px solid var(--borde);box-shadow:var(--sombra); font-size:.9rem;font-weight:500;color:var(--tinta-suave);white-space:nowrap; } /* ---------- Métricas ---------- */ .metricas{padding:72px 0 96px} .metricas-rejilla{ display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--borde); border:1px solid var(--borde);border-radius:var(--radio-lg);overflow:hidden;box-shadow:var(--sombra); } .metrica{background:#fff;padding:36px 24px;text-align:center} .metrica strong{ display:block;font-family:var(--display);font-size:clamp(2rem,3.6vw,2.8rem); font-weight:800;letter-spacing:-.05em;line-height:1.1;color:var(--tinta); } .metrica strong em{font-style:normal;color:var(--marca)} .metrica span{font-size:.88rem;color:var(--tinta-suave)} /* ---------- Efecto foco (spotlight) en tarjetas ---------- */ .con-luz{position:relative} .con-luz::after{ content:"";position:absolute;inset:0;border-radius:inherit;opacity:0; transition:opacity .35s;pointer-events:none; background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(0,134,240,.1),transparent 45%); } @media(hover:hover){.con-luz:hover::after{opacity:1}} /* ---------- Rejillas ---------- */ .rejilla-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px} .dato{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:26px;transition:transform .25s,box-shadow .25s,border-color .25s} .dato:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta);border-color:#c9dffb} .dato-icono{ width:44px;height:44px;border-radius:12px;display:grid;place-items:center; margin-bottom:14px;background:var(--marca-clara);color:var(--marca-osc); } .dato-icono svg{width:22px;height:22px} .dato strong{display:block;margin-bottom:6px;font-size:.99rem;letter-spacing:-.015em} .dato span{color:var(--tinta-suave);font-size:.9rem} /* ---------- Bento de producto ---------- */ .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:22px} .bento-a{grid-column:span 4;display:grid;grid-template-columns:1fr .95fr;gap:26px;align-items:center} .bento-b,.bento-c,.bento-d,.bento-e{grid-column:span 2} .bento-f{grid-column:span 6;display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:center} .tarjeta{ background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:30px; position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s; } .tarjeta:hover{transform:translateY(-6px);box-shadow:var(--sombra-alta);border-color:#c9dffb} .tarjeta p{color:var(--tinta-suave);font-size:.93rem} .tarjeta.destacada{border-color:#c9dffb;background:linear-gradient(170deg,#fff,#f4f9ff)} .icono{ width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px; background:var(--marca-clara);color:var(--marca-osc);transition:transform .25s; } .icono svg{width:24px;height:24px} .tarjeta:hover .icono{transform:scale(1.08) rotate(-5deg)} .etiqueta{ position:absolute;top:18px;right:18px;background:var(--marca-media);color:#fff; font-size:.66rem;font-weight:700;padding:4px 11px;border-radius:999px;letter-spacing:.04em; } .bento-f .etiqueta{position:static;display:inline-block;margin-top:14px} /* Mini visual de chat dentro de la tarjeta grande */ .mini-chat{ background:var(--fondo-alt);border:1px solid var(--borde);border-radius:var(--radio-sm); padding:16px;display:flex;flex-direction:column;gap:8px; } .mini-burbuja{ max-width:92%;padding:9px 12px;border-radius:11px;font-size:.8rem;line-height:1.45; box-shadow:0 1px 1px rgba(17,22,33,.06); } .mini-burbuja.ellos{background:#fff;border:1px solid var(--borde);align-self:flex-start;border-top-left-radius:3px} .mini-burbuja.yo{background:#d9fdd3;align-self:flex-end;border-top-right-radius:3px} .mini-fuente{font-size:.7rem;color:var(--marca-osc);font-weight:600;align-self:flex-end;margin-top:2px} /* Mini alerta de auditoría */ .mini-alerta{ display:flex;gap:12px;align-items:flex-start; background:#fffaf1;border:1px solid #f3dfb6;border-radius:var(--radio-sm);padding:16px 18px; } .mini-alerta-icono{color:var(--ambar);line-height:1;padding-top:2px} .mini-alerta-icono svg{width:20px;height:20px} .mini-alerta-texto{display:flex;flex-direction:column;gap:2px;line-height:1.45} .mini-alerta-texto strong{font-size:.88rem;color:var(--ambar);letter-spacing:-.01em} .mini-alerta-texto small{font-size:.78rem;color:var(--tinta-suave)} /* ---------- Pasos ---------- */ .pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:22px;position:relative} .paso{ padding:28px;position:relative;background:#fff;border:1px solid var(--borde); border-radius:var(--radio);transition:transform .25s,box-shadow .25s,border-color .25s; } .paso:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta);border-color:#c9dffb} .paso .num{ display:grid;place-items:center;width:46px;height:46px;border-radius:14px; font-family:var(--display);background:linear-gradient(135deg,var(--marca-media),var(--marca-osc));color:#fff;font-weight:800; margin-bottom:18px;box-shadow:var(--sombra-azul); } .paso p{color:var(--tinta-suave);font-size:.94rem} /* ---------- Franja oscura (azul marino) ---------- */ .franja{background:linear-gradient(150deg,var(--navy) 20%,var(--navy-2) 75%,#0c1140 100%);color:#fff;overflow:hidden} .franja::before{ content:"";position:absolute;width:820px;height:560px;pointer-events:none; background:radial-gradient(ellipse closest-side,rgba(0,134,240,.4),rgba(0,134,240,0)); top:-180px;right:-160px; } .franja .wrap{position:relative;z-index:2} .franja-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .franja-texto{color:rgba(255,255,255,.72);margin-bottom:26px} .lista-check{list-style:none;display:flex;flex-direction:column;gap:12px} .lista-check li{padding-left:30px;position:relative;color:rgba(255,255,255,.88);font-size:.95rem} .lista-check li::before{ content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%; background:rgba(37,211,102,.16);color:#4ade80;display:grid;place-items:center;font-size:.7rem;font-weight:700; } .tablero{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:var(--radio-lg);overflow:hidden} .tablero-barra{display:flex;align-items:center;gap:7px;padding:13px 17px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.09)} .tablero-barra>span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)} .tablero-barra>span:first-child{background:#ff5f57} .tablero-barra>span:nth-child(2){background:#febc2e} .tablero-barra>span:nth-child(3){background:#28c840} .tablero-barra small{margin-left:auto;font-size:.74rem;color:rgba(255,255,255,.55)} .tablero-cuerpo{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px} .col-titulo{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.55);margin-bottom:9px;display:flex;justify-content:space-between} .col-titulo em{font-style:normal;color:rgba(255,255,255,.35)} .col-titulo.gana{color:#4ade80} .tarjetita{ background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:10px; padding:9px 10px;margin-bottom:7px;font-size:.75rem;display:flex;justify-content:space-between;gap:6px; } .tarjetita span{color:rgba(255,255,255,.55);font-size:.7rem} .tarjetita.ok{border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.09)} .tarjetita.mueve{animation:deslizar 4.5s ease-in-out infinite;border-color:rgba(0,194,255,.45);background:rgba(0,134,240,.16)} @keyframes deslizar{0%,68%,100%{transform:translateX(0)}82%{transform:translateX(9px)}} .tablero-pie{padding:15px 18px;border-top:1px solid rgba(255,255,255,.09);display:flex;align-items:baseline;gap:9px} .contador{font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:-.04em;color:#4ade80} .tablero-pie small{color:rgba(255,255,255,.55);font-size:.78rem} /* ---------- Comparativa ---------- */ .comparativa{margin-top:34px;border:1px solid var(--borde);border-radius:var(--radio-lg);overflow:hidden;background:#fff;box-shadow:var(--sombra)} .comp-cabecera{display:grid;grid-template-columns:1fr 1fr;background:var(--fondo-alt);border-bottom:1px solid var(--borde)} .comp-cabecera span{padding:15px 22px;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tenue);font-weight:700} .comp-nuestra{background:linear-gradient(135deg,var(--marca-media),var(--marca-osc));color:#fff !important} .comp-fila{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--borde)} .comp-fila:last-child{border-bottom:0} .comp-fila>div{padding:18px 22px;font-size:.93rem;display:flex;gap:11px;align-items:flex-start} .comp-mal{color:var(--tinta-suave)} .comp-mal span{color:#e11d48;font-weight:700;flex:none} .comp-bien{background:linear-gradient(135deg,#f2f8ff,#f7fbff);color:var(--tinta)} .comp-bien span{color:var(--ok);font-weight:700;flex:none} /* ---------- Planes ---------- */ .planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:24px;align-items:start} .plan{ background:#fff;border:1px solid var(--borde);border-radius:var(--radio-lg);padding:34px 30px; position:relative;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s; } .plan:hover{transform:translateY(-6px);box-shadow:var(--sombra-alta)} .plan.resaltado{border:2px solid var(--marca);box-shadow:0 16px 48px rgba(0,134,240,.17);transform:scale(1.03)} .plan.resaltado:hover{transform:scale(1.03) translateY(-6px)} .cinta{ position:absolute;top:-14px;left:50%;transform:translateX(-50%); background:linear-gradient(135deg,var(--marca-media),var(--marca-osc));color:#fff;font-size:.74rem;font-weight:700; padding:5px 16px;border-radius:999px;white-space:nowrap;box-shadow:var(--sombra-azul); } .precio{font-family:var(--display);font-size:2.5rem;font-weight:800;letter-spacing:-.05em;margin:8px 0} .precio span{font-family:var(--fuente);font-size:.9rem;font-weight:400;color:var(--tenue);letter-spacing:0} .para{color:var(--tinta-suave);font-size:.9rem;margin-bottom:20px} .plan ul{list-style:none;margin-bottom:26px} .plan li{padding-left:26px;position:relative;margin-bottom:10px;font-size:.92rem;color:var(--tinta-suave)} .plan li::before{ content:"✓";position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:50%; background:rgba(22,163,74,.12);color:var(--ok);display:grid;place-items:center;font-size:.66rem;font-weight:700; } .letra-chica{text-align:center;color:var(--tenue);font-size:.85rem;margin-top:30px;max-width:62ch;margin-inline:auto} /* ---------- Preguntas ---------- */ .faq details{border:1px solid var(--borde);border-radius:var(--radio);margin-bottom:11px;background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s} .faq summary:focus-visible{outline-offset:-3px} .faq details[open]{border-color:#c9dffb;box-shadow:var(--sombra)} .faq summary{ cursor:pointer;font-weight:600;font-size:1rem;list-style:none;letter-spacing:-.015em; display:flex;justify-content:space-between;gap:14px;padding:19px 24px;transition:color .2s; } .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--marca-osc)} .faq summary::after{content:"+";color:var(--marca);font-size:1.45rem;line-height:1;transition:transform .25s;flex:none} .faq details[open] summary::after{transform:rotate(45deg)} .faq-cuerpo{overflow:hidden} .faq-cuerpo p{color:var(--tinta-suave);font-size:.94rem;padding:0 24px 20px} /* ---------- Cierre ---------- */ .cierre{padding:30px 0 120px} .cierre-caja{ position:relative;text-align:center;overflow:hidden; background:linear-gradient(150deg,var(--navy) 15%,var(--navy-2) 75%,#0c1140 100%); color:#fff;border-radius:34px;padding:96px 40px; } .cierre-caja .malla{position:absolute;inset:0;overflow:hidden;pointer-events:none} .cierre-caja>*{position:relative;z-index:2} /* Mayor especificidad que la regla >* de arriba: los fondos siguen absolutos y detrás. */ .cierre-caja .grano,.cierre-caja .malla{position:absolute;z-index:1} .cierre h2{color:#fff} .cierre-caja>p{color:rgba(255,255,255,.75);margin-bottom:32px} .cierre-nota{font-size:.85rem;color:rgba(255,255,255,.5) !important;margin-top:22px;margin-bottom:0 !important} /* ---------- Pie ---------- */ footer{background:var(--fondo-alt);border-top:1px solid var(--borde);padding:64px 0 56px} footer .marca{color:var(--tinta)} .pie{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;margin-bottom:40px} .pie-marca p{color:var(--tinta-suave);font-size:.9rem;margin-top:14px;max-width:34ch} .pie-canales{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap} .canal{ font-size:.76rem;font-weight:600;color:var(--tinta-suave); background:#fff;border:1px solid var(--borde);border-radius:999px;padding:5px 12px; } .pie-col{display:flex;flex-direction:column;gap:11px;align-items:flex-start} .pie-col strong{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tenue);margin-bottom:4px} .pie-col a{color:var(--tinta-suave);font-size:.9rem;transition:color .2s} .pie-col a:hover{color:var(--marca-osc)} .legal{border-top:1px solid var(--borde);padding-top:24px;color:var(--tenue);font-size:.8rem;max-width:90ch} /* ---------- Responsive ---------- */ @media(max-width:980px){ /* El nav colapsa aquí y no a 760: entre 761 y ~940px los 5 enlaces + botones no caben y se partían en dos líneas (iPad vertical incluido). */ .enlaces,.acciones{display:none} .menu-movil{display:flex} .hero-rejilla{grid-template-columns:1fr;gap:56px;text-align:center} .bajada{margin-inline:auto} .acciones-hero,.marcas-hero{justify-content:center} .pastilla{margin-inline:auto} .metricas-rejilla{grid-template-columns:repeat(2,1fr)} .bento-a,.bento-b,.bento-c,.bento-d,.bento-e,.bento-f{grid-column:span 6} .bento-a,.bento-f{grid-template-columns:1fr} .franja-rejilla{grid-template-columns:1fr;gap:40px} h2.izquierda{text-align:center} .rotulo.claro{margin-inline:auto} .pie{grid-template-columns:1fr 1fr} } @media(max-width:760px){ section{padding:72px 0} .hero{padding:56px 0 72px} .metricas{padding:56px 0 72px} .metrica{padding:26px 16px} .cierre-caja{padding:64px 24px;border-radius:26px} /* Apilada, la cabecera de dos columnas ya no rotula nada (y dejaba la marca encima de la primera fila negativa): micro-rótulos por celda en su lugar. */ .comp-cabecera{display:none} .comp-fila{grid-template-columns:1fr} .comp-fila>div{padding:15px 18px;flex-wrap:wrap} .comp-mal::before,.comp-bien::before{ flex-basis:100%;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em; } .comp-mal::before{content:"Lo habitual";color:var(--tenue)} .comp-bien::before{content:"ViraAutoChat";color:var(--marca-osc)} .comp-fila .comp-mal{border-bottom:1px dashed var(--borde)} .plan.resaltado{transform:none} .plan.resaltado:hover{transform:translateY(-6px)} .toast-venta{left:-8px} .toast-ia{right:-6px} .telefono{width:270px} } @media(max-width:420px){ .metricas-rejilla{grid-template-columns:1fr 1fr} /* Son decorativos (aria-hidden) y a este ancho tapaban el chat de la demo. */ .toast-flotante{display:none} .telefono{width:250px} .tablero-cuerpo{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:12px} .tarjetita{font-size:.68rem;padding:7px 8px} .tarjetita span{font-size:.62rem} .pie{grid-template-columns:1fr} } /* ---------- Páginas legales ---------- */ .enlace-legal{color:var(--marca-osc);text-decoration:underline;text-underline-offset:3px} .enlace-legal:hover{color:var(--marca)} .pagina-legal .marca{color:var(--tinta)} .cabecera-legal{border-bottom:1px solid var(--borde);background:#fff} .cabecera-legal .wrap{display:flex;align-items:center;justify-content:space-between;min-height:70px} .cabecera-legal .volver{color:var(--tinta-suave);font-size:.9rem} .cabecera-legal .volver:hover{color:var(--marca-osc)} .legal-cuerpo{max-width:800px;padding-top:56px;padding-bottom:88px} .legal-cuerpo h1{font-size:clamp(1.8rem,4vw,2.4rem);letter-spacing:-.04em;line-height:1.15;margin-bottom:8px} .legal-cuerpo .fecha{color:var(--tenue);font-size:.88rem;margin-bottom:38px} .legal-cuerpo h2{font-size:1.16rem;text-align:left;margin:36px 0 10px} .legal-cuerpo p,.legal-cuerpo li{color:var(--tinta-suave);font-size:.95rem;margin-bottom:10px} .legal-cuerpo ul,.legal-cuerpo ol{padding-left:24px;margin:10px 0 16px} .legal-cuerpo li{margin-bottom:7px} .legal-cuerpo a{color:var(--marca-osc);text-decoration:underline;text-underline-offset:3px} .pie-legal{border-top:1px solid var(--borde);background:var(--fondo-alt);padding:26px 0} .pie-legal p{color:var(--tenue);font-size:.82rem}