/* ========================================================== CashBack.ec — Estilos compartidos · TEMA CLARO Los colores de cada comunidad se inyectan con data-com en ========================================================== */ :root{ --bg:#F4F6FB; --paper:#FFFFFF; --ink:#131829; --ink2:#3C4560; --dim:#767F99; --dim2:#5A6480; --line:#E4E8F2; --line2:#D2D8E8; --ok:#0EA96B; --okBg:#E6F8F0; --warn:#D98613; --warnBg:#FEF4E4; --bad:#DC3C4A; --badBg:#FDEDEE; --acc:#F59E0B; --acc2:#D97706; --accSoft:#FEF3DC; --disp:'Archivo',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --r:16px; --rl:22px; --sh:0 1px 2px rgba(19,24,41,.05), 0 6px 18px -8px rgba(19,24,41,.10); --shUp:0 2px 4px rgba(19,24,41,.06), 0 14px 32px -12px rgba(19,24,41,.18); } /* Temas por comunidad — claros y llamativos */ body[data-com="con"]{ --acc:#F59E0B; --acc2:#D97706; --accSoft:#FEF3DC; } body[data-com="uni"]{ --acc:#6366F1; --acc2:#4F46E5; --accSoft:#EAEAFE; } body[data-com="tra"]{ --acc:#06B6D4; --acc2:#0891B2; --accSoft:#E0F7FC; } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth} body{ font-family:var(--body);background:var(--bg);color:var(--ink); line-height:1.5;-webkit-font-smoothing:antialiased; } body.app{padding-bottom:84px} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.025em;line-height:1.08;font-weight:800} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} input,select,textarea{font-family:inherit} :focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:8px} .mono{font-family:var(--mono)} .hide{display:none !important} .wrap{max-width:520px;margin:0 auto;padding:0 16px} .wrap-lg{max-width:1120px;margin:0 auto;padding:0 22px} /* ---------- Barra superior ---------- */ .top{ position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92); backdrop-filter:blur(14px);border-bottom:1px solid var(--line); } .top-in{display:flex;align-items:center;justify-content:space-between;height:58px;gap:10px} .logo{font-family:var(--disp);font-weight:800;font-size:18px;letter-spacing:-.03em;color:var(--ink)} .logo i{font-style:normal;color:var(--acc2)} .top-r{display:flex;align-items:center;gap:8px} .comsel{ display:flex;align-items:center;gap:7px;background:var(--accSoft); border:1px solid var(--line);padding:7px 12px;border-radius:999px; font-size:13px;font-weight:700;color:var(--acc2); } .comsel .dot{width:8px;height:8px;border-radius:50%;background:var(--acc);flex:none} .menu-btn{ width:38px;height:38px;border-radius:11px;border:1px solid var(--line2); background:var(--paper);display:grid;place-items:center;flex:none; } .menu-btn svg{width:19px;height:19px;stroke:var(--ink2);fill:none;stroke-width:2} /* ---------- Menú lateral tipo app ---------- */ .drawer{position:fixed;inset:0;z-index:90;display:none} .drawer.on{display:block} .drawer-bg{position:absolute;inset:0;background:rgba(19,24,41,.45);backdrop-filter:blur(2px)} .drawer-pan{ position:absolute;top:0;right:0;bottom:0;width:min(310px,86vw); background:var(--paper);border-left:1px solid var(--line); padding:20px 16px calc(22px + env(safe-area-inset-bottom)); overflow:auto;animation:slideIn .26s cubic-bezier(.2,.8,.2,1); } @keyframes slideIn{from{transform:translateX(100%)}to{transform:none}} .drawer-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .drawer-sec{ font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--dim);margin:20px 0 8px; } .dl{ display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px; font-size:14.5px;font-weight:600;color:var(--ink2); } .dl svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;flex:none} .dl.on{background:var(--accSoft);color:var(--acc2);font-weight:700} /* ---------- Botones ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-weight:700;font-size:14.5px;padding:15px 18px;border-radius:14px; transition:transform .14s ease,box-shadow .2s ease,opacity .2s ease;text-align:center; } .btn:active{transform:scale(.98)} .btn-a{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;box-shadow:0 6px 16px -6px var(--acc)} .btn-g{background:var(--paper);border:1px solid var(--line2);color:var(--ink)} .btn-o{background:transparent;border:1px solid var(--line2);color:var(--ink)} .btn-w{width:100%} .btn-sm{padding:11px 15px;font-size:13px;border-radius:11px} .btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex:none} .btn[disabled]{opacity:.45;pointer-events:none} /* ---------- Tarjetas ---------- */ .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh)} .card-p{padding:20px} /* ---------- Billetera ---------- */ .wcard{ position:relative;margin-top:16px;border-radius:var(--rl);overflow:hidden; padding:24px;color:#fff;box-shadow:var(--shUp); background:linear-gradient(140deg,var(--acc) 0%,var(--acc2) 100%); } .wcard::before{content:"";position:absolute;inset:0;opacity:.16;pointer-events:none} body[data-com="con"] .wcard::before{ background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size:34px 34px; } body[data-com="uni"] .wcard::before{ background-image:radial-gradient(#fff 1.3px,transparent 1.3px);background-size:22px 22px; } body[data-com="tra"] .wcard::before{ background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 16px); } .wcard::after{ content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%; background:rgba(255,255,255,.14);pointer-events:none; } .wc-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start} .wc-brand{font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:-.03em;color:#fff} .wc-kind{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:rgba(255,255,255,.85);margin-top:3px} .wc-ico{ width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.22); display:grid;place-items:center;flex:none; } .wc-ico svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8} .wc-com{position:relative;z-index:2;margin-top:22px;font-size:12px;color:rgba(255,255,255,.88)} .wc-comv{font-family:var(--disp);font-weight:700;font-size:17px;margin-top:1px;color:#fff} .wc-bal{position:relative;z-index:2;margin-top:16px} .wc-bal .l{font-size:12px;color:rgba(255,255,255,.88)} .wc-bal .v{font-family:var(--disp);font-weight:800;font-size:48px;letter-spacing:-.035em;color:#fff;line-height:1} .wc-exp{ position:relative;z-index:2;margin-top:13px;display:inline-flex;align-items:center;gap:6px; font-size:12px;font-weight:700;background:rgba(255,255,255,.22); padding:7px 12px;border-radius:999px;color:#fff; } .wc-foot{ position:relative;z-index:2;margin-top:18px;padding-top:14px; border-top:1px solid rgba(255,255,255,.25); display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.88);gap:10px; } /* ---------- Rejillas ---------- */ .g2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px} /* ---------- Secciones ---------- */ .sec{margin-top:26px} .sec-t{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;gap:12px} .sec-t h3{font-size:16px;font-weight:800} .sec-t a{font-size:12.5px;color:var(--acc2);font-weight:700} .eyebrow{ font-family:var(--mono);font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--acc2);font-weight:700; } /* ---------- Listas ---------- */ .mv{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)} .mv:last-child{border-bottom:none} .mv-ic{ width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none; font-family:var(--disp);font-weight:800;font-size:15px; } .mv-ic.up{background:var(--okBg);color:var(--ok)} .mv-ic.dn{background:var(--accSoft);color:var(--acc2)} .mv-b{flex:1;min-width:0} .mv-b .n{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mv-b .s{font-size:11.5px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mv-a{font-family:var(--mono);font-weight:700;font-size:14.5px;flex:none} .mv-a.up{color:var(--ok)} .mv-a.dn{color:var(--acc2)} .empty{text-align:center;padding:32px 14px;color:var(--dim);font-size:13.5px} .empty .e{font-size:30px;display:block;margin-bottom:10px;opacity:.55} /* ---------- Marcas afiliadas ---------- */ .chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;-webkit-overflow-scrolling:touch} .chips::-webkit-scrollbar{display:none} .chip{ flex:none;padding:9px 14px;border-radius:999px;border:1px solid var(--line2); background:var(--paper);font-size:13px;font-weight:600;color:var(--ink2);white-space:nowrap; } .chip.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:700} .brand{ display:flex;align-items:center;gap:13px;background:var(--paper);border:1px solid var(--line); border-radius:var(--r);padding:14px;box-shadow:var(--sh);margin-bottom:10px; } .brand .av{ width:48px;height:48px;border-radius:13px;flex:none;display:grid;place-items:center; font-family:var(--disp);font-weight:800;font-size:19px;background:var(--accSoft);color:var(--acc2); } .brand .bi{flex:1;min-width:0} .brand .bn{font-size:15px;font-weight:700} .brand .bt{font-size:12px;color:var(--dim);margin-top:3px} .brand .bp{ flex:none;text-align:center;background:var(--accSoft);border-radius:12px;padding:9px 11px;min-width:64px; } .brand .bp .v{font-family:var(--disp);font-weight:800;font-size:19px;color:var(--acc2);line-height:1} .brand .bp .l{font-size:9px;color:var(--acc2);margin-top:3px;font-weight:700;letter-spacing:.04em} .badge-t{ display:inline-block;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px; background:var(--bg);color:var(--dim2); } /* ---------- Formularios ---------- */ .lbl{display:block;font-size:12.5px;color:var(--dim2);font-weight:700;margin-bottom:7px} .inp{ width:100%;background:var(--bg);border:1px solid var(--line2);color:var(--ink); border-radius:12px;padding:14px;font-size:14px; } .inp.mono{font-family:var(--mono);font-size:12.5px} .inp::placeholder{color:#9AA3BC} .inp:focus{border-color:var(--acc);background:var(--paper);outline:none} .fld{margin-top:14px} .cnt{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--mono);font-size:11px;color:var(--dim)} .cnt b.ok{color:var(--ok)} .cnt b.bad{color:var(--bad)} /* ---------- Marco de escaneo ---------- */ .frame{ position:relative;height:172px;border-radius:14px;background:var(--accSoft); border:1px dashed var(--acc);display:grid;place-items:center;overflow:hidden;margin-bottom:16px; } .frame .hint{text-align:center;color:var(--acc2);font-size:12.5px;padding:0 20px;font-weight:600} .frame .hint svg{width:38px;height:38px;stroke:var(--acc2);fill:none;stroke-width:1.5;margin:0 auto 8px} .scanline{ position:absolute;left:8%;right:8%;height:2px; background:linear-gradient(90deg,transparent,var(--acc),transparent); animation:sweep 2.4s ease-in-out infinite; } @keyframes sweep{0%,100%{top:18%;opacity:.3}50%{top:80%;opacity:1}} .corner{position:absolute;width:26px;height:26px;border:2px solid var(--acc);opacity:.7} .c1{top:14px;left:14px;border-right:0;border-bottom:0;border-radius:6px 0 0 0} .c2{top:14px;right:14px;border-left:0;border-bottom:0;border-radius:0 6px 0 0} .c3{bottom:14px;left:14px;border-right:0;border-top:0;border-radius:0 0 0 6px} .c4{bottom:14px;right:14px;border-left:0;border-top:0;border-radius:0 0 6px 0} /* ---------- Resultado de validación ---------- */ .res{margin-top:14px;border-radius:var(--r);padding:17px;border:1px solid;animation:fadeIn .3s ease} .res.ok{background:var(--okBg);border-color:#A8E5CA} .res.bad{background:var(--badBg);border-color:#F5B9BE} .res.warn{background:var(--warnBg);border-color:#F3D6A0} .res-h{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:15.5px} .res.ok .res-h{color:#0A7E50} .res.bad .res-h{color:#B22B38} .res.warn .res-h{color:#A56409} .res-h .b{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-size:14px;flex:none;color:#fff} .res.ok .res-h .b{background:var(--ok)} .res.bad .res-h .b{background:var(--bad)} .res.warn .res-h .b{background:var(--warn)} .res p{font-size:13px;color:var(--ink2);margin-top:9px} .kv{margin-top:13px;border-top:1px solid rgba(19,24,41,.10);padding-top:12px;display:flex;flex-direction:column;gap:8px} .kv .r{display:flex;justify-content:space-between;gap:12px;font-size:12.5px} .kv .r span{color:var(--dim2)} .kv .r b{font-family:var(--mono);font-weight:700;text-align:right;word-break:break-all;color:var(--ink)} .steps-v{margin-top:13px;display:flex;flex-direction:column;gap:7px} .sv{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--ink2)} .sv .m{font-family:var(--mono);font-size:11px;flex:none;width:16px;text-align:center;font-weight:700} .sv.p .m{color:var(--ok)} .sv.f .m{color:var(--bad)} .sv.s .m{color:var(--dim)} /* ---------- Catálogo ---------- */ .prod{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:13px; display:flex;flex-direction:column;text-align:left;box-shadow:var(--sh); transition:border-color .2s,transform .14s; } .prod:active{transform:scale(.985)} .prod.afford{border-color:var(--acc)} .prod .th{ height:98px;border-radius:11px;background:var(--bg);margin-bottom:10px; overflow:hidden;position:relative;display:grid;place-items:center;font-size:30px; } .prod .th img{width:100%;height:100%;object-fit:cover} .prod .n{font-size:13px;font-weight:700;line-height:1.3} .prod .b{font-size:11px;color:var(--dim);margin-top:2px} .prod .p{font-family:var(--disp);font-weight:800;font-size:17px;color:var(--acc2);margin-top:7px} .prod .lock{font-size:10.5px;color:var(--dim);font-family:var(--mono);margin-top:3px} /* ---------- KPIs ---------- */ .kp{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--sh)} .kp .l{font-size:10.5px;color:var(--dim);line-height:1.3} .kp .v{font-family:var(--disp);font-weight:800;font-size:22px;margin-top:6px} .kp .v.a{color:var(--acc2)} .kp .v.g{color:var(--ok)} /* ---------- Barras ---------- */ .bar{display:flex;align-items:center;gap:10px;margin-top:10px} .bar .m{font-family:var(--mono);font-size:11px;color:var(--dim);width:46px;flex:none} .trk{flex:1;height:10px;background:var(--bg);border-radius:5px;overflow:hidden} .fil{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:5px;width:0;transition:width .9s cubic-bezier(.2,.7,.2,1)} .bar .n{font-family:var(--mono);font-size:11px;width:52px;text-align:right;flex:none;color:var(--ink2)} /* ---------- Pestañas ---------- */ .tabs{display:flex;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:5px;margin-top:16px;box-shadow:var(--sh)} .tb{flex:1;padding:11px 6px;border-radius:9px;font-size:13px;font-weight:700;color:var(--dim2)} .tb.on{background:var(--acc);color:#fff} /* ---------- Navegación inferior ---------- */ .nav{ position:fixed;bottom:0;left:0;right:0;z-index:50; background:rgba(255,255,255,.96);backdrop-filter:blur(16px); border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom); } .nav-in{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)} .nv{padding:10px 2px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--dim);font-size:10px;font-weight:600} .nv svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8} .nv.on{color:var(--acc2);font-weight:700} .nv.on svg{stroke-width:2.2} /* ---------- Toast ---------- */ .toast{ position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:96px;z-index:80; background:var(--ink);color:#fff;border-radius:13px;padding:13px 17px; font-size:13.5px;font-weight:600;max-width:88vw;opacity:0;pointer-events:none;transition:.3s; box-shadow:var(--shUp); } .toast.on{opacity:1;transform:translateX(-50%) translateY(0)} .toast.good{background:#0A7E50} .toast.bad{background:#B22B38} /* ---------- Hoja modal ---------- */ .ov{position:fixed;inset:0;z-index:70;background:rgba(19,24,41,.45);backdrop-filter:blur(3px);display:none;align-items:flex-end;justify-content:center} .ov.on{display:flex} .sheet{ background:var(--paper);border-radius:22px 22px 0 0;width:100%;max-width:520px; padding:22px 18px calc(26px + env(safe-area-inset-bottom)); animation:up .3s cubic-bezier(.2,.8,.2,1);max-height:88vh;overflow:auto; } @keyframes up{from{transform:translateY(100%)}to{transform:none}} .sheet h3{font-size:19px} .sheet p{font-size:13.5px;color:var(--ink2);margin-top:8px} .grab{width:38px;height:4px;background:var(--line2);border-radius:2px;margin:0 auto 16px} .com-opt{ display:flex;align-items:center;gap:13px;padding:14px;border-radius:14px; border:1px solid var(--line);background:var(--bg);margin-top:9px;width:100%;text-align:left; } .com-opt.on{border-color:var(--acc);background:var(--accSoft)} .com-opt .ci{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex:none;background:var(--paper)} .com-opt .cn{font-weight:700;font-size:14.5px;display:block} .com-opt .cd{font-size:11.5px;color:var(--dim);margin-top:1px;display:block} /* ---------- Página pública ---------- */ .pnav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .pnav-in{display:flex;align-items:center;justify-content:space-between;height:66px} .pnav-links{display:flex;gap:26px;align-items:center} .pnav-links a{font-size:14px;color:var(--dim2);font-weight:600} .pnav-links a:hover{color:var(--ink)} @media(max-width:860px){.pnav-links a:not(.btn){display:none}} .hero{position:relative;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--line)} .hero-bg{position:absolute;inset:0;z-index:0} .hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.20} .hero-bg::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.93) 55%,var(--bg) 100%); } .hero-in{position:relative;z-index:2;padding:86px 0 84px;max-width:730px} .hero h1{font-size:clamp(36px,5.6vw,62px);margin-top:16px} .hero h1 em{font-style:normal;color:var(--acc2)} .hero .lead{margin-top:20px;font-size:18px;color:var(--ink2);max-width:44ch} .hero-cta{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap} .hero-stats{margin-top:44px;display:flex;gap:36px;flex-wrap:wrap} .hero-stats .k{font-family:var(--disp);font-weight:800;font-size:30px;color:var(--acc2)} .hero-stats .l{font-size:13px;color:var(--dim);margin-top:2px} .psec{padding:84px 0;border-bottom:1px solid var(--line)} .psec.alt{background:var(--paper)} .psec-head{max-width:640px} .psec-head h2{font-size:clamp(27px,3.6vw,40px);margin-top:14px} .psec-head p{margin-top:14px;color:var(--ink2);font-size:17px} .cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px} .cols2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px} .fcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--rl);overflow:hidden;box-shadow:var(--sh)} .fcard .ph{height:172px;overflow:hidden;background:var(--bg)} .fcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .fcard:hover .ph img{transform:scale(1.04)} .fcard .bd{padding:22px} .fcard h3{font-size:19px} .fcard p{font-size:14.5px;color:var(--ink2);margin-top:9px} .fcard .tag{ display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;padding:5px 10px;border-radius:999px;margin-bottom:11px; background:var(--accSoft);color:var(--acc2);font-weight:700; } .step{background:var(--paper);border:1px solid var(--line);border-radius:var(--rl);padding:26px;box-shadow:var(--sh)} .step .n{font-family:var(--mono);font-size:12px;color:var(--acc2);letter-spacing:.12em;font-weight:700} .step h3{font-size:18px;margin-top:13px} .step p{font-size:14.5px;color:var(--ink2);margin-top:9px} .plan{background:var(--paper);border:1px solid var(--line);border-radius:var(--rl);padding:30px;position:relative;box-shadow:var(--sh)} .plan.hi{border-color:var(--acc);box-shadow:var(--shUp)} .plan .pn{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc2);font-weight:700} .plan .pr{font-family:var(--disp);font-weight:800;font-size:42px;margin-top:10px} .plan .pr small{font-family:var(--body);font-weight:500;font-size:15px;color:var(--dim)} .plan ul{list-style:none;margin:20px 0 24px;display:flex;flex-direction:column;gap:11px} .plan li{font-size:14.5px;padding-left:24px;position:relative;color:var(--ink2)} .plan li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800} .plan .badge{position:absolute;top:22px;right:22px;font-family:var(--mono);font-size:10.5px;padding:5px 10px;border-radius:999px;background:var(--acc);color:#fff;font-weight:700} .foot{padding:54px 0 34px;color:var(--dim);font-size:13.5px;background:var(--paper);border-top:1px solid var(--line)} .foot-in{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap} .legal{ margin-top:30px;padding-top:22px;border-top:1px solid var(--line); font-size:11.5px;color:#8A93AB;line-height:1.65; } .note{font-size:11.5px;color:var(--dim);line-height:1.55;margin-top:14px} .note b{color:var(--ink2)} @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} @media(max-width:860px){ .cols3,.cols2{grid-template-columns:1fr} .psec{padding:60px 0} .hero-in{padding:62px 0 58px} } @media(prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important;scroll-behavior:auto !important} .reveal{opacity:1;transform:none} }