/* ============================================================ BRAINBOW — site.css Light/Dark via [data-theme="dark"] on ============================================================ */ :root { --brand-900:#0a2540;--brand-800:#0e3460;--brand-700:#13477e; --brand-600:#185a9d;--brand-500:#1e6fbe;--brand-400:#3d8fd6; --brand-300:#6db0e6;--brand-200:#a3d0f2;--brand-100:#d4eafc; --brand-50:#eef6fd; --accent-700:#076e5e;--accent-600:#0b8a78;--accent-500:#0ea590; --accent-400:#22c4ae;--accent-300:#5edecf;--accent-200:#a5ede4; --accent-100:#d6f7f3;--accent-50:#edfcfa; --warm-700:#8a5a05;--warm-600:#b97308;--warm-500:#d4850a; --warm-400:#e8a430;--warm-100:#fdf3e0;--warm-50:#fef9ed; --plum-600:#6b3eb5;--plum-500:#7e51c8;--plum-100:#ece4fa;--plum-50:#f6f2fc; --rose-600:#c44a2a;--rose-100:#fceae4; --gray-900:#1b2130;--gray-800:#2d3444;--gray-700:#434d60; --gray-600:#5e6a80;--gray-500:#7f8ba0;--gray-400:#a0a9ba; --gray-300:#c4c9d4;--gray-200:#e0e3e9;--gray-100:#f0f1f4; --gray-50:#f8f9fb; --bg:#ffffff;--bg-soft:#fafbfd;--bg-tint:#f4f7fb; --font-h:'Plus Jakarta Sans',sans-serif; --font-a:'Fraunces',serif; --font-m:'IBM Plex Mono',monospace; --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-full:9999px; --sh-1:0 1px 3px rgba(10,37,64,.06); --sh-2:0 4px 14px rgba(10,37,64,.08); --sh-3:0 12px 36px rgba(10,37,64,.1); --sh-4:0 24px 60px rgba(10,37,64,.14); --max-w:1180px; /* Theme transition */ --theme-transition: background .25s, color .25s, border-color .25s; } /* ===== DARK MODE VARIABLES ===== */ [data-theme="dark"] { --bg:#0c1827; --bg-soft:#0e1e30; --bg-tint:#132335; --gray-900:#edf2f8; --gray-800:#d4dce8; --gray-700:#b8c4d4; --gray-600:#96a2b0; --gray-500:#7a8a9c; --gray-400:#4a5868; --gray-300:#2e3e50; --gray-200:#1e2e40; --gray-100:#172030; --gray-50:#111a28; --brand-50:#0a1a2e; --brand-100:#0d2340; --warm-100:#1e1608; --warm-50:#1a1208; --plum-50:#140e20; --plum-100:#1a1030; --rose-100:#1e0e08; --accent-50:#060e12; --accent-100:#081618; } /* ===== RESETS ===== */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased} body{ font-family:var(--font-h); color:var(--gray-900); background:var(--bg); font-size:16px;line-height:1.65;overflow-x:hidden; transition:var(--theme-transition); } img{max-width:100%;display:block} a{text-decoration:none;color:inherit} button{font-family:var(--font-h);cursor:pointer;border:none;background:none} .wrap{max-width:var(--max-w);margin:0 auto;padding:0 32px} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}} /* ===== NAV ===== */ .nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,box-shadow .3s} .nav.scrolled{ background:rgba(255,255,255,.92); backdrop-filter:blur(20px); box-shadow:0 1px 0 rgba(10,37,64,.06); } [data-theme="dark"] .nav.scrolled{ background:rgba(10,20,38,.92); box-shadow:0 1px 0 rgba(255,255,255,.05); } .nav-inner{ max-width:var(--max-w);margin:0 auto;padding:0 32px; display:flex;align-items:center;justify-content:space-between;height:72px; } .nav-brand{display:flex;align-items:center;gap:10px} .nav-logo{ height:36px;width:auto;display:block; transition:filter .25s,opacity .25s; } [data-theme="dark"] .nav-logo{filter:brightness(0) invert(1);opacity:.85} .nav-text{font-size:20px;font-weight:700;color:var(--brand-900);letter-spacing:-.02em;transition:color .25s} .nav-text span{color:var(--brand-500)} [data-theme="dark"] .nav-text{color:#fff} .nav-menu{display:flex;align-items:center;gap:6px} .nav-link{ font-size:14px;font-weight:500;color:var(--gray-700); padding:8px 14px;border-radius:var(--r-sm);transition:all .2s; display:flex;align-items:center;gap:5px; } .nav-link:hover{background:var(--brand-50);color:var(--brand-700)} .nav-link svg{width:12px;height:12px;opacity:.5} [data-theme="dark"] .nav-link{color:var(--gray-700)} [data-theme="dark"] .nav-link:hover{background:var(--gray-200);color:var(--gray-900)} .nav-cta{ font-size:13px;font-weight:600; background:var(--brand-600);color:#fff; padding:10px 22px;border-radius:var(--r-full); transition:all .2s;box-shadow:0 2px 8px rgba(30,111,190,.2); margin-left:4px; } .nav-cta:hover{background:var(--brand-700);transform:translateY(-1px);box-shadow:0 4px 16px rgba(30,111,190,.3)} /* Botón de reporte — verde llamativo en claro, warm en oscuro */ .nav-rep{ font-size:12px;font-weight:600; background:#16a34a;color:#fff; padding:7px 13px;border-radius:var(--r-full); transition:all .2s;box-shadow:0 2px 6px rgba(22,163,74,.28); display:inline-flex;align-items:center;gap:5px; white-space:nowrap; } .nav-rep svg{width:12px;height:12px;opacity:.9;flex-shrink:0} .nav-rep:hover{background:#15803d;transform:translateY(-1px);box-shadow:0 4px 12px rgba(22,163,74,.45);color:#fff} [data-theme="dark"] .nav-rep{background:var(--warm-500);box-shadow:0 2px 6px rgba(212,133,10,.15)} [data-theme="dark"] .nav-rep:hover{background:var(--warm-600)} /* Lang + Theme controls */ .nav-right{display:flex;align-items:center;gap:4px} .nav-controls{display:flex;align-items:center;gap:4px} /* Show only the flag for the OTHER language */ html[lang="es"] #btn-es{display:none} html[lang="en"] #btn-en{display:none} .ctrl-btn{ width:36px;height:36px;border-radius:var(--r-sm); display:flex;align-items:center;justify-content:center; color:var(--gray-600);transition:all .2s; border:1px solid transparent; } .ctrl-btn:hover{background:var(--gray-100);color:var(--gray-900);border-color:var(--gray-200)} [data-theme="dark"] .ctrl-btn{color:var(--gray-700)} [data-theme="dark"] .ctrl-btn:hover{background:var(--gray-200);color:var(--gray-900)} .ctrl-btn svg{width:16px;height:16px} .ctrl-btn img{width:20px;height:15px;border-radius:2px;object-fit:cover} /* Hamburger button — desktop hidden, mobile shown */ .nav-hamburger{ display:none;align-items:center;justify-content:center; width:36px;height:36px;border-radius:var(--r-sm); background:none;border:1px solid var(--gray-200); color:var(--gray-700);cursor:pointer;transition:all .2s; margin-left:4px; } .nav-hamburger:hover{background:var(--gray-100);border-color:var(--gray-300)} [data-theme="dark"] .nav-hamburger{color:var(--gray-300);border-color:var(--gray-300)} [data-theme="dark"] .nav-hamburger:hover{background:var(--gray-200)} .nav-hamburger svg{width:20px;height:20px} .nav-hamburger .ham-icon{display:block} .nav-hamburger .ham-close{display:none} body.nav-open .nav-hamburger .ham-icon{display:none} body.nav-open .nav-hamburger .ham-close{display:block} /* Mobile drawer */ .mobile-drawer{ display:none;flex-direction:column;gap:2px; position:fixed;top:72px;left:0;right:0;z-index:99; background:var(--bg); border-bottom:1px solid var(--gray-200); padding:12px 16px 20px; box-shadow:0 12px 32px rgba(10,37,64,.1); animation:fadeUp .18s ease; } [data-theme="dark"] .mobile-drawer{ background:var(--bg-tint); border-bottom-color:rgba(255,255,255,.06); box-shadow:0 12px 32px rgba(0,0,0,.3); } body.nav-open .mobile-drawer{display:flex} .md-link{ display:block;padding:13px 16px; font-size:15px;font-weight:500;color:var(--gray-700); border-radius:var(--r-sm);transition:all .15s; } .md-link:hover{background:var(--brand-50);color:var(--brand-700)} [data-theme="dark"] .md-link{color:var(--gray-700)} [data-theme="dark"] .md-link:hover{background:var(--gray-200);color:var(--gray-900)} .md-cta{ display:block;margin-top:10px; padding:13px 16px;text-align:center; background:var(--brand-600);color:#fff; border-radius:var(--r-full);font-size:14px;font-weight:600; box-shadow:0 2px 8px rgba(30,111,190,.25);transition:all .2s; } .md-cta:hover{background:var(--brand-700);transform:translateY(-1px)} .md-rep{ display:flex;align-items:center;justify-content:center;gap:7px; margin-top:6px;padding:12px 16px;text-align:center; background:#16a34a;color:#fff; border-radius:var(--r-full);font-size:14px;font-weight:600; box-shadow:0 2px 8px rgba(22,163,74,.28);transition:all .2s; } .md-rep svg{width:14px;height:14px;opacity:.9;flex-shrink:0} .md-rep:hover{background:#15803d;transform:translateY(-1px);color:#fff} [data-theme="dark"] .md-rep{background:var(--warm-500);box-shadow:0 2px 8px rgba(212,133,10,.2)} [data-theme="dark"] .md-rep:hover{background:var(--warm-600)} /* Megamenu */ .has-menu{position:relative} .megamenu{ position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%); background:var(--bg);border:1px solid var(--gray-200);border-radius:var(--r-lg); padding:24px;min-width:580px;box-shadow:var(--sh-3); opacity:0;visibility:hidden;transition:all .2s;z-index:101; } .has-menu:hover .megamenu{opacity:1;visibility:visible} .mm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .mm-item{ padding:10px 12px;border-radius:var(--r-sm);transition:background .15s; display:flex;gap:10px;align-items:flex-start; } .mm-item:hover{background:var(--bg-tint)} .mm-icon{ width:32px;height:32px;border-radius:8px;flex-shrink:0; display:flex;align-items:center;justify-content:center; } .mm-icon svg{width:16px;height:16px} .mm-icon.geo{background:var(--brand-50);color:var(--brand-600)} .mm-icon.avm{background:var(--warm-100);color:var(--warm-600)} .mm-icon.ml{background:var(--plum-50);color:var(--plum-600)} .mm-icon.bi{background:var(--accent-50);color:var(--accent-600)} .mm-icon.de{background:var(--brand-50);color:var(--brand-700)} .mm-icon.llm{background:var(--rose-100);color:var(--rose-600)} .mm-icon.cd{background:var(--accent-100);color:var(--accent-700)} .mm-icon.au{background:var(--plum-100);color:var(--plum-500)} .mm-text{flex:1;min-width:0} .mm-title{font-size:13px;font-weight:600;color:var(--gray-900);margin-bottom:2px} .mm-desc{font-size:11px;color:var(--gray-500);line-height:1.4} /* ===== HERO ===== */ .hero{ padding:140px 0 80px; background:linear-gradient(170deg,var(--brand-50) 0%,var(--bg) 50%,var(--accent-50) 100%); position:relative;overflow:hidden; transition:background .3s; } [data-theme="dark"] .hero{ background:linear-gradient(170deg,#0a1e38 0%,var(--bg) 50%,#071e2a 100%); } .hero-deco{position:absolute;border-radius:50%;border:1px solid var(--brand-200);pointer-events:none;opacity:.4} .hero-deco.d1{width:560px;height:560px;top:-200px;right:-140px;border-color:var(--accent-200)} .hero-deco.d2{width:340px;height:340px;top:80px;right:60px;border-color:var(--brand-200);opacity:.3} .hero-deco.d3{width:200px;height:200px;bottom:-60px;left:-80px;border-color:var(--accent-200);opacity:.2} [data-theme="dark"] .hero-deco{opacity:.15} .hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;position:relative;z-index:1} .hero-badge{ display:inline-flex;align-items:center;gap:8px; background:var(--brand-100);color:var(--brand-700); font-size:12px;font-weight:600;letter-spacing:.02em; padding:6px 16px;border-radius:var(--r-full);margin-bottom:24px; animation:fadeUp .6s ease both; } .hero-badge .pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-500);animation:float 2.5s ease infinite} .hero h1{ font-family:var(--font-h);font-size:clamp(38px,5vw,60px); font-weight:800;line-height:1.05;letter-spacing:-.03em; color:var(--gray-900);margin-bottom:22px; animation:fadeUp .6s ease .1s both; } .hero h1 .em{ font-family:var(--font-a);font-weight:400;font-style:italic; background:linear-gradient(125deg,var(--brand-500),var(--accent-500)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .hero-desc{font-size:18px;color:var(--gray-600);max-width:480px;line-height:1.65;margin-bottom:32px;animation:fadeUp .6s ease .2s both} .hero-actions{display:flex;gap:12px;flex-wrap:wrap;animation:fadeUp .6s ease .3s both} .btn-primary{ display:inline-flex;align-items:center;gap:8px; background:var(--brand-600);color:#fff; font-size:15px;font-weight:600;padding:15px 28px;border-radius:var(--r-full); transition:all .25s;box-shadow:0 3px 12px rgba(30,111,190,.2); } .btn-primary:hover{background:var(--brand-700);transform:translateY(-2px);box-shadow:0 6px 24px rgba(30,111,190,.3)} .btn-primary svg{width:16px;height:16px} .btn-outline{ display:inline-flex;align-items:center;gap:8px; color:var(--brand-700);font-size:15px;font-weight:600; padding:15px 24px;border-radius:var(--r-full); border:1.5px solid var(--brand-200);transition:all .25s; } .btn-outline:hover{border-color:var(--brand-400);background:var(--brand-50)} [data-theme="dark"] .btn-outline{color:var(--brand-300);border-color:var(--brand-400)} [data-theme="dark"] .btn-outline:hover{background:var(--brand-100)} /* Hero visual */ .hero-visual{position:relative;animation:fadeUp .8s ease .4s both} .hv-stack{display:grid;grid-template-columns:1fr 1fr;gap:14px} .hv-card{ background:var(--bg);border:1px solid var(--gray-200);border-radius:var(--r-lg); padding:16px;box-shadow:var(--sh-2);transition:all .3s; } .hv-card:hover{transform:translateY(-3px);box-shadow:var(--sh-3)} .hv-card.large{grid-column:1/-1} .hv-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .hv-card-tag{font-family:var(--font-m);font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--gray-500);font-weight:500} .hv-card-icon{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center} .hv-card-icon svg{width:12px;height:12px} .hv-card-icon.brand{background:var(--brand-50);color:var(--brand-600)} .hv-card-icon.accent{background:var(--accent-50);color:var(--accent-600)} .hv-card-icon.warm{background:var(--warm-100);color:var(--warm-600)} .hv-card-icon.plum{background:var(--plum-50);color:var(--plum-600)} .hv-card-title{font-size:11px;color:var(--gray-500);margin-bottom:4px} .hv-card-value{font-size:18px;font-weight:700;color:var(--gray-900);font-family:var(--font-m)} .hv-card-value.accent{color:var(--accent-600)} .hv-card-value.warm{color:var(--warm-600)} .hv-card-value.plum{color:var(--plum-600)} .hv-card-trend{font-size:10px;color:var(--accent-600);margin-top:3px;font-weight:500} .hv-card-trend.down{color:var(--rose-600)} .hv-chart{height:50px;position:relative;margin-top:8px} .hv-chart svg{width:100%;height:100%} .hv-chart .bar{fill:var(--brand-500);opacity:.8;transition:opacity .2s} .hv-chart .bar:hover{opacity:1} .hv-map-mini{ height:100px;border-radius:var(--r-sm);position:relative;overflow:hidden; background:linear-gradient(135deg,var(--brand-50),var(--accent-50)); border:1px solid var(--gray-200);margin-top:8px; } .hv-map-grid{ position:absolute;inset:0; background-image:linear-gradient(var(--brand-200) .5px,transparent .5px),linear-gradient(90deg,var(--brand-200) .5px,transparent .5px); background-size:20px 20px;opacity:.3; } .hv-pin{position:absolute;width:8px;height:8px;border-radius:50%;border:2px solid var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.2)} .hv-pin.p1{top:25%;left:30%;background:var(--brand-500)} .hv-pin.p2{top:50%;left:55%;background:var(--brand-500)} .hv-pin.p3{top:65%;left:35%;background:var(--warm-500)} .hv-pin.p4{top:35%;left:75%;background:var(--accent-500)} .hv-pin.p5{top:60%;left:80%;background:var(--brand-500)} .hv-radius{ position:absolute;top:42%;left:48%;width:50px;height:50px; border:1.5px dashed var(--brand-400);border-radius:50%; transform:translate(-50%,-50%);opacity:.5; } .hv-chat{margin-top:8px;font-family:var(--font-m);font-size:10px} .hv-msg{padding:6px 10px;border-radius:8px;margin-bottom:4px;line-height:1.4} .hv-msg.user{background:var(--brand-50);color:var(--brand-700);text-align:right;margin-left:30px} .hv-msg.bot{background:var(--gray-100);color:var(--gray-700);margin-right:30px} /* ===== TRUSTED ===== */ .trusted{padding:40px 0 60px;background:var(--bg);border-bottom:1px solid var(--gray-100)} .trusted-label{text-align:center;font-family:var(--font-m);font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--gray-400);margin-bottom:24px} .trusted-logos{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap} .tlogo{font-size:15px;font-weight:600;color:var(--gray-400);transition:color .2s} .tlogo:hover{color:var(--gray-700)} /* ===== STATS ===== */ .stats{padding:60px 0;background:var(--bg-soft)} .stats-h{text-align:center;margin-bottom:40px} .stats-tag{ display:inline-block;font-family:var(--font-m);font-size:11px; text-transform:uppercase;letter-spacing:.1em;color:var(--brand-500); background:var(--brand-50);padding:5px 14px;border-radius:var(--r-full);margin-bottom:14px;font-weight:500; } .stats-h h2{font-family:var(--font-h);font-size:30px;font-weight:800;color:var(--gray-900);letter-spacing:-.02em} .stats-h h2 .em{font-family:var(--font-a);font-weight:400;font-style:italic;color:var(--brand-600)} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .stat{background:var(--bg);border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:24px;text-align:left;transition:var(--theme-transition)} .stat-num{font-family:var(--font-m);font-size:36px;font-weight:500;color:var(--brand-600);line-height:1;margin-bottom:8px} .stat-txt{font-size:13px;color:var(--gray-700);line-height:1.5;margin-bottom:6px} .stat-src{font-size:10px;color:var(--gray-400);font-style:italic} /* ===== SECTION SHARED ===== */ .section{padding:100px 0} .sec-tag{ display:inline-flex;align-items:center;gap:6px; font-family:var(--font-m);font-size:11px;font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--brand-600); background:var(--brand-50);padding:5px 14px;border-radius:var(--r-full);margin-bottom:14px; } .sec-tag .dot{width:5px;height:5px;border-radius:50%;background:var(--accent-500)} .sec-h{ font-family:var(--font-h);font-size:clamp(30px,3.6vw,42px);font-weight:800; line-height:1.1;letter-spacing:-.02em;color:var(--gray-900);margin-bottom:14px; } .sec-h .em{font-family:var(--font-a);font-weight:400;font-style:italic;color:var(--brand-600)} .sec-sub{font-size:17px;color:var(--gray-600);max-width:620px;line-height:1.65} /* ===== PLATFORM (8 caps) ===== */ .platform{background:var(--bg)} .cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px} .cap{ background:var(--bg);border:1px solid var(--gray-200);border-radius:var(--r-lg); padding:24px 22px;transition:all .3s;cursor:pointer;position:relative;overflow:hidden; display:flex;flex-direction:column; } .cap::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px; transform:scaleX(0);transform-origin:left;transition:transform .3s; } .cap:hover{box-shadow:var(--sh-2);transform:translateY(-3px)} .cap:hover::before{transform:scaleX(1)} .cap.geo::before{background:var(--brand-500)} .cap.avm::before{background:var(--warm-500)} .cap.ml::before{background:var(--plum-500)} .cap.bi::before{background:var(--accent-500)} .cap.de::before{background:var(--brand-700)} .cap.llm::before{background:var(--rose-600)} .cap.cd::before{background:var(--accent-700)} .cap.au::before{background:var(--plum-600)} .cap-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:16px} .cap-icon svg{width:20px;height:20px} .cap.geo .cap-icon{background:var(--brand-50);color:var(--brand-600)} .cap.avm .cap-icon{background:var(--warm-100);color:var(--warm-600)} .cap.ml .cap-icon{background:var(--plum-50);color:var(--plum-600)} .cap.bi .cap-icon{background:var(--accent-50);color:var(--accent-600)} .cap.de .cap-icon{background:var(--brand-50);color:var(--brand-700)} .cap.llm .cap-icon{background:var(--rose-100);color:var(--rose-600)} .cap.cd .cap-icon{background:var(--accent-100);color:var(--accent-700)} .cap.au .cap-icon{background:var(--plum-100);color:var(--plum-500)} .cap-title{font-size:16px;font-weight:700;color:var(--gray-900);margin-bottom:8px;letter-spacing:-.01em} .cap-desc{font-size:13px;color:var(--gray-600);line-height:1.55;margin-bottom:14px;flex:1} .cap-link{font-size:12px;font-weight:600;color:var(--brand-600);display:inline-flex;align-items:center;gap:5px;transition:gap .2s;text-decoration:none} .cap:hover .cap-link{gap:8px} .cap-link svg{width:11px;height:11px} /* Cap dual-action row (Geo + AVM: Probar ahora + Ver detalle) */ .cap-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .cap-detail{font-size:11px;font-weight:500;color:var(--gray-400);text-decoration:none;transition:color .2s;letter-spacing:.01em} .cap-detail:hover{color:var(--brand-600)} .cap-badge{ position:absolute;top:14px;right:14px; font-family:var(--font-m);font-size:9px;font-weight:500; padding:2px 8px;border-radius:var(--r-full);text-transform:uppercase;letter-spacing:.05em; } .cap-badge.demo{background:var(--accent-500);color:#fff} .cap-badge.consult{background:var(--gray-100);color:var(--gray-600)} [data-theme="dark"] .cap-badge.consult{background:var(--gray-200);color:var(--gray-700)} /* ===== EXPLORER — light base, dark override ===== */ .explorer{ background:linear-gradient(175deg,var(--brand-50) 0%,var(--bg) 60%,var(--accent-50) 100%); padding:100px 0;position:relative;overflow:hidden;transition:background .3s; } .explorer::before{content:'';position:absolute;top:-200px;right:-200px;width:500px;height:500px;border-radius:50%;border:1px solid var(--brand-100);pointer-events:none} /* dark */ [data-theme="dark"] .explorer{background:linear-gradient(175deg,var(--brand-900) 0%,var(--brand-800) 100%)} [data-theme="dark"] .explorer::before{border-color:rgba(255,255,255,.04)} [data-theme="dark"] .explorer .sec-tag{background:rgba(255,255,255,.08);color:var(--accent-300)} [data-theme="dark"] .explorer .sec-tag .dot{background:var(--accent-400)} [data-theme="dark"] .explorer .sec-h{color:#fff} [data-theme="dark"] .explorer .sec-sub{color:rgba(255,255,255,.5)} /* tabs */ .exp-tabs{display:flex;gap:6px;margin:24px 0 0} .exp-tab{ font-size:12px;font-weight:600;padding:9px 18px;border-radius:var(--r-full); background:var(--bg);color:var(--gray-600); border:1px solid var(--gray-200);transition:all .2s; } .exp-tab.on,.exp-tab:hover{background:var(--brand-500);color:#fff;border-color:var(--brand-500)} [data-theme="dark"] .exp-tab{background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.1)} [data-theme="dark"] .exp-tab.on,[data-theme="dark"] .exp-tab:hover{background:var(--brand-500);color:#fff;border-color:var(--brand-500)} /* granularity row */ .gran-row{display:flex;align-items:center;gap:6px;margin:18px 0 0;font-size:11px;color:var(--gray-500);flex-wrap:wrap} [data-theme="dark"] .gran-row{color:rgba(255,255,255,.5)} .gran-pill{ padding:5px 11px;border-radius:var(--r-full); background:var(--gray-100);border:1px solid var(--gray-200); font-family:var(--font-m);font-size:10px;color:var(--gray-600); transition:all .2s;cursor:pointer; } .gran-pill.on,.gran-pill:hover{background:var(--accent-500);color:#fff;border-color:var(--accent-500)} [data-theme="dark"] .gran-pill{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.6)} .gran-arrow{color:var(--gray-300);font-size:9px} [data-theme="dark"] .gran-arrow{color:rgba(255,255,255,.2)} /* search box */ .exp-box{ margin-top:28px;background:var(--bg); border:1px solid var(--gray-200);border-radius:var(--r-xl);overflow:hidden; box-shadow:var(--sh-2); } [data-theme="dark"] .exp-box{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07);box-shadow:none} .exp-search{padding:18px;border-bottom:1px solid var(--gray-200);display:flex;gap:10px} [data-theme="dark"] .exp-search{border-bottom-color:rgba(255,255,255,.06)} .exp-search input{ flex:1;background:var(--bg-tint);border:1px solid var(--gray-200); border-radius:var(--r-md);padding:13px 18px;color:var(--gray-900);font-size:14px; font-family:var(--font-h);outline:none;transition:all .2s; } .exp-search input::placeholder{color:var(--gray-400)} .exp-search input:focus{border-color:var(--accent-400);background:var(--bg)} [data-theme="dark"] .exp-search input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#fff} [data-theme="dark"] .exp-search input::placeholder{color:rgba(255,255,255,.22)} [data-theme="dark"] .exp-search input:focus{background:rgba(255,255,255,.1)} .exp-search button{ background:var(--accent-500);color:#fff;padding:13px 24px;border-radius:var(--r-md); font-size:14px;font-weight:600;transition:all .2s;white-space:nowrap; } .exp-search button:hover{background:var(--accent-400)} /* body / map / results */ .exp-body{display:grid;grid-template-columns:1fr 1fr;min-height:480px} /* ── Real Mapbox map (left column, always visible) ── */ .exp-map-real{ position:relative;overflow:hidden;min-height:480px; border-right:1px solid var(--gray-200); border-radius:var(--r-lg) 0 0 var(--r-lg); } [data-theme="dark"] .exp-map-real{border-right-color:rgba(255,255,255,.06)} /* ── Right results / empty panel ── */ .exp-panel{overflow-y:auto;max-height:480px;display:flex;flex-direction:column} /* ── Custom Mapbox marker ── */ .mapbox-pin{ width:16px;height:16px; background:var(--brand-500); border:3px solid #fff; border-radius:50%; box-shadow:0 2px 8px rgba(24,90,157,.55); cursor:pointer; } [data-theme="dark"] .mapbox-pin{border-color:var(--bg)} .exp-results{padding:22px;display:none;flex-direction:column;gap:11px} .exp-results.show{display:flex} .res-h{padding-bottom:13px;border-bottom:1px solid var(--gray-200)} [data-theme="dark"] .res-h{border-bottom-color:rgba(255,255,255,.06)} .res-name{font-size:21px;font-weight:700;color:var(--gray-900)} [data-theme="dark"] .res-name{color:#fff} .res-meta{font-size:11px;color:var(--gray-500);font-family:var(--font-m);margin-top:3px} [data-theme="dark"] .res-meta{color:rgba(255,255,255,.3)} .res-card{background:var(--bg-soft);border:1px solid var(--gray-200);border-radius:var(--r-md);padding:14px} [data-theme="dark"] .res-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06)} .res-card-l{font-size:9px;text-transform:uppercase;letter-spacing:1.4px;color:var(--gray-500);margin-bottom:8px;display:flex;align-items:center;gap:6px;font-weight:600} [data-theme="dark"] .res-card-l{color:rgba(255,255,255,.3)} .res-card-l .cd{width:5px;height:5px;border-radius:50%} .res-row{display:flex;justify-content:space-between;padding:4px 0} .res-row+.res-row{border-top:1px solid var(--gray-100)} [data-theme="dark"] .res-row+.res-row{border-top-color:rgba(255,255,255,.03)} .res-k{font-size:13px;color:var(--gray-600)} [data-theme="dark"] .res-k{color:rgba(255,255,255,.5)} .res-v{font-size:13px;color:var(--gray-900);font-weight:600;font-family:var(--font-m)} [data-theme="dark"] .res-v{color:#fff} .rb{height:4px;border-radius:2px;background:var(--gray-200);margin-top:5px;overflow:hidden} [data-theme="dark"] .rb{background:rgba(255,255,255,.07)} .rf{height:100%;border-radius:2px;transition:width .5s} .rf-lo{background:var(--accent-500);width:22%} .rf-md{background:var(--warm-500);width:50%} .rf-hi{background:#e07a3a;width:72%} .rf-vh{background:#c44a4a;width:90%} .res-lock{margin-top:6px;padding:16px;text-align:center;background:var(--brand-50);border-radius:var(--r-md);color:var(--gray-600);font-size:13px;border:1px solid var(--brand-100)} [data-theme="dark"] .res-lock{background:rgba(10,37,64,.6);border-color:transparent;color:rgba(255,255,255,.4)} .res-lock a{color:var(--accent-600);font-weight:600} [data-theme="dark"] .res-lock a{color:var(--accent-400)} .exp-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px 28px;text-align:center;color:var(--gray-400)} [data-theme="dark"] .exp-empty{color:rgba(255,255,255,.2)} .exp-empty svg{width:44px;height:44px;margin-bottom:14px;opacity:.25} .exp-empty .small{margin-top:6px;font-size:11px;opacity:.6} /* ===== INDUSTRIES ===== */ .industries{background:var(--bg-soft)} .ind-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:48px} .ind{ background:var(--bg);border:1px solid var(--gray-200);border-radius:var(--r-lg); padding:24px 20px;transition:all .25s;cursor:pointer;text-align:left; display:flex;flex-direction:column; } .ind:hover{transform:translateY(-2px);box-shadow:var(--sh-2)} .ind-icon{width:38px;height:38px;border-radius:10px;margin-bottom:14px;display:flex;align-items:center;justify-content:center} .ind-icon svg{width:18px;height:18px} .ind.banca .ind-icon{background:var(--brand-50);color:var(--brand-600)} .ind.seguros .ind-icon{background:var(--rose-100);color:var(--rose-600)} .ind.retail .ind-icon{background:var(--plum-50);color:var(--plum-600)} .ind.gobierno .ind-icon{background:var(--accent-50);color:var(--accent-600)} .ind.inmob .ind-icon{background:var(--warm-100);color:var(--warm-600)} .ind-name{font-size:14px;font-weight:700;color:var(--gray-900);margin-bottom:6px} .ind-q{font-size:12px;color:var(--gray-600);line-height:1.5;flex:1;margin-bottom:14px} .ind-arrow{font-size:11px;font-weight:600;color:var(--brand-600);display:inline-flex;align-items:center;gap:4px;transition:gap .2s} .ind:hover .ind-arrow{gap:7px} [data-theme="dark"] .ind-arrow{color:var(--brand-300)} /* ===== HOW ===== */ .how{background:var(--bg);position:relative;overflow:hidden} .how-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:48px} .how-steps{display:flex;flex-direction:column;gap:18px;position:relative} .how-step{ background:var(--bg);border:1px solid var(--gray-200);border-radius:var(--r-lg); padding:20px 22px;display:flex;gap:16px;align-items:flex-start;transition:all .25s; } .how-step:hover{border-color:var(--brand-300);box-shadow:var(--sh-1)} .how-num{ width:36px;height:36px;border-radius:50%;flex-shrink:0; background:var(--brand-50);color:var(--brand-600); display:flex;align-items:center;justify-content:center; font-family:var(--font-m);font-size:14px;font-weight:600; } .how-step:nth-child(2) .how-num{background:var(--accent-50);color:var(--accent-600)} .how-step:nth-child(3) .how-num{background:var(--warm-100);color:var(--warm-600)} .how-step:nth-child(4) .how-num{background:var(--plum-50);color:var(--plum-600)} .how-step h4{font-size:15px;font-weight:700;margin-bottom:5px;color:var(--gray-900)} .how-step p{font-size:13px;color:var(--gray-600);line-height:1.55} .how-visual{ background:linear-gradient(165deg,var(--brand-50),var(--accent-50)); border-radius:var(--r-xl);padding:40px; border:1px solid var(--gray-200); display:flex;flex-direction:column;gap:14px; } .how-vis-head{font-family:var(--font-m);font-size:11px;color:var(--gray-500);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px} .how-vis-card{ background:var(--bg);border-radius:var(--r-md);padding:14px 16px; display:flex;align-items:center;gap:12px;box-shadow:var(--sh-1); border:1px solid var(--gray-100); } .how-vis-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-500);box-shadow:0 0 0 3px var(--accent-100)} .how-vis-text{flex:1} .how-vis-text-h{font-size:12px;font-weight:600;color:var(--gray-900)} .how-vis-text-p{font-size:10px;color:var(--gray-500);font-family:var(--font-m)} .how-vis-arrow{margin-left:auto;color:var(--gray-400)} /* ===== FORMATS ===== */ .formats{background:var(--bg-soft)} .fmt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px} .fmt{ background:var(--bg);border:1px solid var(--gray-200);border-radius:var(--r-lg); padding:24px;transition:all .25s;text-align:left; } .fmt:hover{transform:translateY(-2px);box-shadow:var(--sh-1)} .fmt-i{ width:38px;height:38px;border-radius:10px;margin-bottom:14px; background:var(--accent-50);color:var(--accent-600); display:flex;align-items:center;justify-content:center; } .fmt-i svg{width:18px;height:18px} .fmt h4{font-size:14px;font-weight:700;margin-bottom:5px;color:var(--gray-900)} .fmt p{font-size:12px;color:var(--gray-500);line-height:1.5} /* ===== PROOF ===== */ .proof{background:var(--bg);text-align:center} .proof-quote{ max-width:780px;margin:48px auto 0; font-family:var(--font-a);font-size:28px;font-weight:300;font-style:italic; color:var(--gray-900);line-height:1.4;letter-spacing:-.01em; } .proof-quote::before{content:'\201C';font-size:60px;color:var(--brand-300);line-height:0;vertical-align:-15px;margin-right:6px} .proof-quote::after{content:'\201D';font-size:60px;color:var(--brand-300);line-height:0;vertical-align:-15px;margin-left:6px} .proof-author{margin-top:24px;font-size:13px;color:var(--gray-500)} .proof-author b{color:var(--gray-800);font-weight:600} .proof-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px;max-width:760px;margin-left:auto;margin-right:auto} .pm{background:var(--bg-soft);border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:24px} .pm-num{font-family:var(--font-m);font-size:32px;font-weight:500;color:var(--brand-600);line-height:1} .pm-num .em{font-family:var(--font-a);font-style:italic;font-weight:400;color:var(--accent-500);font-size:24px} .pm-txt{font-size:12px;color:var(--gray-600);margin-top:8px;line-height:1.5} /* ===== CTA ===== */ .cta{ background:linear-gradient(165deg,var(--brand-800),var(--brand-900)); padding:100px 0;position:relative;overflow:hidden; } .cta::before{content:'';position:absolute;bottom:-100px;left:50%;width:500px;height:500px;transform:translateX(-50%);border-radius:50%;border:1px solid rgba(255,255,255,.04)} .cta::after{content:'';position:absolute;top:-100px;right:-100px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,144,.08),transparent 70%)} .cta-inner{position:relative;z-index:1;text-align:center} .cta h2{ font-family:var(--font-h);font-size:clamp(32px,4vw,46px); font-weight:800;color:#fff;margin-bottom:16px;letter-spacing:-.02em;line-height:1.1; } .cta h2 .em{font-family:var(--font-a);font-weight:400;font-style:italic;color:var(--accent-300)} .cta p{font-size:17px;color:rgba(255,255,255,.5);max-width:540px;margin:0 auto 36px;line-height:1.6} .cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .cta-p{ background:#fff;color:var(--brand-800);font-size:15px;font-weight:700; padding:16px 32px;border-radius:var(--r-full);transition:all .25s; box-shadow:0 4px 16px rgba(0,0,0,.12); } .cta-p:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.18)} .cta-s{ color:rgba(255,255,255,.6);font-size:15px;font-weight:500; padding:16px 28px;border-radius:var(--r-full); border:1px solid rgba(255,255,255,.15);transition:all .25s; } .cta-s:hover{border-color:rgba(255,255,255,.35);color:#fff} /* ===== CONTACT FORM — light base, dark override ===== */ .contact-section{ background:linear-gradient(165deg,var(--brand-50) 0%,var(--bg) 50%,var(--accent-50) 100%); padding:100px 0;position:relative;overflow:hidden;transition:background .3s; } .contact-section::before{ content:'';position:absolute;bottom:-120px;left:50%;width:600px;height:600px; transform:translateX(-50%);border-radius:50%;border:1px solid var(--brand-100); } .contact-section::after{ content:'';position:absolute;top:-80px;right:-80px;width:340px;height:340px; border-radius:50%;background:radial-gradient(circle,var(--accent-100),transparent 70%); } /* dark */ [data-theme="dark"] .contact-section{background:linear-gradient(165deg,var(--brand-800),var(--brand-900))} [data-theme="dark"] .contact-section::before{border-color:rgba(255,255,255,.04)} [data-theme="dark"] .contact-section::after{background:radial-gradient(circle,rgba(14,165,144,.08),transparent 70%)} .contact-head{text-align:center;position:relative;z-index:1;margin-bottom:48px} .contact-head h2{ font-size:clamp(30px,3.8vw,44px);font-weight:800;color:var(--gray-900); letter-spacing:-.02em;line-height:1.1;margin-bottom:12px; } [data-theme="dark"] .contact-head h2{color:#fff} .contact-head h2 .em{font-family:var(--font-a);font-weight:400;font-style:italic;color:var(--brand-600)} [data-theme="dark"] .contact-head h2 .em{color:var(--accent-300)} .contact-head p{font-size:17px;color:var(--gray-600);max-width:520px;margin:0 auto} [data-theme="dark"] .contact-head p{color:rgba(255,255,255,.45)} /* Split card */ .contact-card{ position:relative;z-index:1; max-width:940px;margin:0 auto; background:var(--bg);border:1px solid var(--gray-200); border-radius:var(--r-xl);overflow:hidden;display:grid;grid-template-columns:5fr 7fr; box-shadow:var(--sh-3); } [data-theme="dark"] .contact-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09);box-shadow:none} /* Left panel */ .cc-left{ padding:40px 36px;border-right:1px solid var(--gray-200); display:flex;flex-direction:column;gap:0; background:var(--bg-soft); } [data-theme="dark"] .cc-left{border-right-color:rgba(255,255,255,.07);background:transparent} .cc-left-title{font-size:18px;font-weight:700;color:var(--gray-900);margin-bottom:4px} [data-theme="dark"] .cc-left-title{color:#fff} .cc-left-sub{font-size:13px;color:var(--gray-500);margin-bottom:28px} [data-theme="dark"] .cc-left-sub{color:rgba(255,255,255,.4)} .cc-step{display:flex;gap:12px;align-items:flex-start;margin-bottom:22px} .cc-step-num{ width:28px;height:28px;border-radius:50%;flex-shrink:0; background:var(--gray-100);border:1px solid var(--gray-200); font-family:var(--font-m);font-size:11px;font-weight:600;color:var(--gray-500); display:flex;align-items:center;justify-content:center; } [data-theme="dark"] .cc-step-num{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.5)} .cc-step:nth-child(3) .cc-step-num, .cc-step:nth-child(4) .cc-step-num, .cc-step:nth-child(5) .cc-step-num{background:var(--accent-50);border-color:var(--accent-200);color:var(--accent-600)} [data-theme="dark"] .cc-step:nth-child(3) .cc-step-num, [data-theme="dark"] .cc-step:nth-child(4) .cc-step-num, [data-theme="dark"] .cc-step:nth-child(5) .cc-step-num{background:rgba(14,165,144,.15);border-color:rgba(14,165,144,.3);color:var(--accent-300)} .cc-step-icon{ width:28px;height:28px;border-radius:8px;flex-shrink:0; background:var(--accent-50);color:var(--accent-600); display:flex;align-items:center;justify-content:center; } [data-theme="dark"] .cc-step-icon{background:rgba(14,165,144,.12);color:var(--accent-300)} .cc-step-icon svg{width:13px;height:13px} .cc-step-body h5{font-size:13px;font-weight:600;color:var(--gray-900);margin-bottom:2px} [data-theme="dark"] .cc-step-body h5{color:#fff} .cc-step-body p{font-size:12px;color:var(--gray-500);line-height:1.5;margin:0} [data-theme="dark"] .cc-step-body p{color:rgba(255,255,255,.38)} .cc-guarantee{ margin-top:auto;padding:12px 16px;border-radius:var(--r-md); background:var(--accent-50);border:1px solid var(--accent-200); display:flex;align-items:center;gap:10px; } [data-theme="dark"] .cc-guarantee{background:rgba(14,165,144,.1);border-color:rgba(14,165,144,.2)} .cc-guarantee svg{width:16px;height:16px;flex-shrink:0;color:var(--accent-600)} [data-theme="dark"] .cc-guarantee svg{color:var(--accent-400)} .cc-guarantee span{font-size:12px;font-weight:500;color:var(--accent-700)} [data-theme="dark"] .cc-guarantee span{color:rgba(255,255,255,.55)} /* Right panel — form */ .cc-right{padding:40px 36px;display:flex;flex-direction:column} .cc-form{display:flex;flex-direction:column;gap:12px;flex:1} .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .cf-field{display:flex;flex-direction:column;gap:4px} .cf-field input,.cf-field select,.cf-field textarea{ background:var(--bg-tint);border:1px solid var(--gray-200); border-radius:var(--r-md);padding:12px 15px;color:var(--gray-900); font-size:14px;font-family:var(--font-h);outline:none; transition:border-color .2s,background .2s; width:100%; } .cf-field select option{background:var(--bg);color:var(--gray-900)} .cf-field input::placeholder,.cf-field textarea::placeholder{color:var(--gray-400)} .cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{ border-color:var(--accent-400);background:var(--bg);box-shadow:0 0 0 3px var(--accent-100); } /* dark inputs */ [data-theme="dark"] .cf-field input, [data-theme="dark"] .cf-field select, [data-theme="dark"] .cf-field textarea{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#fff} [data-theme="dark"] .cf-field select option{background:var(--brand-900);color:#fff} [data-theme="dark"] .cf-field input::placeholder,[data-theme="dark"] .cf-field textarea::placeholder{color:rgba(255,255,255,.22)} [data-theme="dark"] .cf-field input:focus, [data-theme="dark"] .cf-field select:focus, [data-theme="dark"] .cf-field textarea:focus{background:rgba(255,255,255,.09);box-shadow:none} /* validation */ .cf-field input.is-invalid,.cf-field select.is-invalid,.cf-field textarea.is-invalid{ border-color:var(--rose-600); } .cf-invalid-msg{font-size:11px;color:var(--rose-600);display:none;margin-top:2px} [data-theme="dark"] .cf-invalid-msg{color:rgba(255,120,80,.9)} .cf-field.has-error .cf-invalid-msg{display:block} .cf-field textarea{resize:none;min-height:88px;flex:1} .cf-recaptcha{display:flex;justify-content:center;margin-top:2px} .cf-recaptcha .g-recaptcha{transform-origin:center center} /* status messages */ .cf-status{padding:10px 14px;border-radius:var(--r-md);font-size:13px;font-weight:500;display:none} .cf-status.success{background:var(--accent-50);border:1px solid var(--accent-200);color:var(--accent-700)} [data-theme="dark"] .cf-status.success{background:rgba(14,165,144,.15);border-color:rgba(14,165,144,.3);color:var(--accent-300)} .cf-status.error{background:var(--rose-100);border:1px solid rgba(196,74,42,.3);color:var(--rose-600)} [data-theme="dark"] .cf-status.error{background:rgba(196,74,42,.15);color:#f8a090} .cf-status.warning{background:var(--warm-50);border:1px solid var(--warm-400);color:var(--warm-700)} [data-theme="dark"] .cf-status.warning{background:rgba(212,133,10,.15);border-color:rgba(212,133,10,.3);color:var(--warm-400)} .cf-status.show{display:block} /* submit button */ .cf-submit{ background:linear-gradient(135deg,var(--accent-600),var(--accent-500)); color:#fff;font-size:15px;font-weight:700; padding:15px 28px;border-radius:var(--r-full); border:none;cursor:pointer;transition:all .25s; box-shadow:0 3px 14px rgba(14,165,144,.25); display:flex;align-items:center;justify-content:center;gap:8px; } .cf-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 24px rgba(14,165,144,.35)} .cf-submit:disabled{opacity:.6;cursor:not-allowed} .cf-submit svg{width:15px;height:15px;flex-shrink:0} .cf-spinner{ width:16px;height:16px;border:2px solid rgba(255,255,255,.3); border-top-color:#fff;border-radius:50%; animation:spin .7s linear infinite;flex-shrink:0; } @keyframes spin{to{transform:rotate(360deg)}} /* Responsive contact */ @media(max-width:800px){ .contact-card{grid-template-columns:1fr} .cc-left{border-right:none;border-bottom:1px solid var(--gray-200);padding:28px 24px} [data-theme="dark"] .cc-left{border-bottom-color:rgba(255,255,255,.07)} .cc-right{padding:28px 24px} .cf-row{grid-template-columns:1fr} } @media(max-width:400px){ .cf-recaptcha .g-recaptcha{transform:scale(.82);transform-origin:center center} } /* ===== FOOTER ===== */ footer{background:var(--brand-900);padding:60px 0 28px;color:rgba(255,255,255,.5)} .ft-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px;margin-bottom:40px} .ft-brand p{font-size:13px;line-height:1.6;margin-top:14px;max-width:260px;color:rgba(255,255,255,.4)} .ft-col h5{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:rgba(255,255,255,.3);margin-bottom:14px;font-weight:700} .ft-col a{display:block;font-size:13px;color:rgba(255,255,255,.5);margin-bottom:8px;transition:color .2s} .ft-col a:hover{color:#fff} .ft-bottom{padding-top:24px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.25);align-items:center} .ft-social{display:flex;gap:8px} .ft-social a{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);transition:all .2s} .ft-social a:hover{background:rgba(255,255,255,.1);color:#fff} .ft-social svg{width:14px;height:14px} /* ===== SCROLL REVEAL — gestionado por ScrollReveal.js ===== */ /* Sin reglas CSS propias: ScrollReveal usa inline styles directamente */ /* ===== HERO CANVAS ===== */ #hero-canvas{ position:absolute;inset:0;width:100%;height:100%; pointer-events:none;z-index:0; opacity:.3;transition:opacity .3s; } [data-theme="dark"] #hero-canvas{opacity:.15} /* ===== HOW — TIMELINE ===== */ .how-steps{position:relative;padding-left:0} .how-steps::before{ content:'';position:absolute;left:19px;top:32px;bottom:32px; width:2px;background:var(--gray-200);border-radius:2px; transition:background .3s; } [data-theme="dark"] .how-steps::before{background:var(--gray-300)} /* Todos los pasos visibles al 100% — el activo se destaca con borde + sombra */ .how-step{transition:all .35s cubic-bezier(0.16,1,0.3,1)} .how-step:not(.active){ opacity:1; transform:translateX(0); } .how-step.active{ opacity:1; border-left:3px solid var(--brand-500); background:linear-gradient(100deg,var(--brand-50) 0%,var(--bg) 60%); box-shadow:var(--sh-2); transform:translateX(5px); } [data-theme="dark"] .how-step.active{ border-left-color:var(--brand-400); background:linear-gradient(100deg,var(--brand-100) 0%,var(--bg-soft) 60%); box-shadow:0 6px 24px rgba(10,37,64,.35); } .how-step.active .how-num{ background:var(--brand-600);color:#fff; box-shadow:0 0 0 5px var(--brand-100); transform:scale(1.12); } [data-theme="dark"] .how-step.active .how-num{ background:var(--brand-500); box-shadow:0 0 0 5px rgba(30,111,190,.25); } .how-step.active h4{color:var(--brand-700)} [data-theme="dark"] .how-step.active h4{color:var(--brand-300)} /* ===== 3D TILT — transition handled via JS but keep will-change ===== */ .cap,.ind,.fmt{will-change:transform;transition:transform .15s ease,box-shadow .2s ease} /* ===== RESPONSIVE ===== */ @media(max-width:1024px){ .hero-grid,.how-grid{grid-template-columns:1fr;gap:48px} .cap-grid{grid-template-columns:repeat(2,1fr)} .ind-grid{grid-template-columns:repeat(2,1fr)} .ft-top{grid-template-columns:1fr 1fr;gap:32px} .stats-grid{grid-template-columns:repeat(2,1fr)} .megamenu{min-width:340px} .mm-grid{grid-template-columns:1fr} } @media(max-width:680px){ /* Nav: hide desktop links, show hamburger */ .nav-menu{display:none} .nav-hamburger{display:flex} .nav-inner{padding:0 20px} /* Hero */ .hero{padding:112px 0 56px} /* Grids: keep 2 columns where content fits */ .cap-grid,.ind-grid,.fmt-grid{grid-template-columns:repeat(2,1fr)} .stats-grid{grid-template-columns:repeat(2,1fr)} .proof-metrics{grid-template-columns:repeat(2,1fr)} /* Explorer: stack map above results panel */ .exp-body{grid-template-columns:1fr} .exp-map-real{min-height:260px;border-right:none;border-bottom:1px solid var(--gray-200);border-radius:var(--r-lg) var(--r-lg) 0 0} [data-theme="dark"] .exp-map-real{border-bottom-color:rgba(255,255,255,.06)} .exp-panel{max-height:360px} /* Footer: brand full-width + 2×2 link grid */ footer{padding:40px 0 20px} .ft-top{grid-template-columns:1fr 1fr;gap:28px 20px;margin-bottom:28px} .ft-brand{grid-column:1/-1;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.07)} .ft-brand p{max-width:100%} .ft-col h5{margin-bottom:10px} .ft-col a{margin-bottom:6px;font-size:13px;padding:2px 0} .ft-bottom{flex-direction:column;gap:10px;text-align:center} .wrap{padding:0 20px} } @media(max-width:420px){ /* Very small screens: single column */ .cap-grid,.ind-grid,.fmt-grid{grid-template-columns:1fr} .stats-grid{grid-template-columns:repeat(2,1fr)} .proof-metrics{grid-template-columns:1fr} } /* ===================================================================== MODAL PDF — Casos de éxito ===================================================================== */ .pdf-modal{ display:none;position:fixed;inset:0;z-index:1200; align-items:center;justify-content:center; padding:16px; } .pdf-modal.open{display:flex} /* Animación de entrada */ .pdf-modal.open .pdf-modal-box{ animation:pdfBoxIn .28s cubic-bezier(0.16,1,0.3,1) both; } @keyframes pdfBoxIn{ from{opacity:0;transform:scale(.95) translateY(16px)} to {opacity:1;transform:scale(1) translateY(0)} } .pdf-modal-backdrop{ position:absolute;inset:0; background:rgba(10,20,40,.65); backdrop-filter:blur(4px); } .pdf-modal-box{ position:relative;z-index:1; width:min(1080px,96vw);height:90vh; background:#fff;border-radius:14px; overflow:hidden;display:flex;flex-direction:column; box-shadow:0 32px 80px rgba(0,0,0,.45); } [data-theme="dark"] .pdf-modal-box{background:#1a1f2e} /* Barra superior */ .pdf-modal-bar{ display:flex;align-items:center;justify-content:space-between; padding:12px 16px 12px 20px; border-bottom:1px solid var(--gray-200); background:var(--bg-soft);flex-shrink:0; } [data-theme="dark"] .pdf-modal-bar{background:var(--bg-tint);border-color:rgba(255,255,255,.07)} .pdf-modal-title{font-size:14px;font-weight:600;color:var(--gray-900)} [data-theme="dark"] .pdf-modal-title{color:#fff} .pdf-modal-actions{display:flex;align-items:center;gap:6px} .pdf-modal-dl{ display:flex;align-items:center;justify-content:center; width:32px;height:32px;border-radius:8px; color:var(--gray-500);transition:background .18s,color .18s; } .pdf-modal-dl svg{width:16px;height:16px} .pdf-modal-dl:hover{background:var(--brand-50);color:var(--brand-600)} [data-theme="dark"] .pdf-modal-dl:hover{background:var(--brand-100);color:var(--brand-400)} .pdf-modal-close{ display:flex;align-items:center;justify-content:center; width:32px;height:32px;border-radius:8px; color:var(--gray-500);cursor:pointer; background:none;border:none; transition:background .18s,color .18s; } .pdf-modal-close svg{width:16px;height:16px} .pdf-modal-close:hover{background:var(--gray-100);color:var(--gray-900)} [data-theme="dark"] .pdf-modal-close:hover{background:rgba(255,255,255,.08);color:#fff} /* iframe */ .pdf-modal-frame{ flex:1;width:100%;border:none;display:block; background:#f5f5f5; } /* Responsive mobile */ @media(max-width:680px){ .pdf-modal{padding:0} .pdf-modal-box{width:100%;height:100%;border-radius:0} } /* ===================================================================== PÁGINAS DE CAPACIDADES (/capacidades/{slug}) ===================================================================== */ /* ── Keyframes ────────────────────────────────────────────────────────── */ @keyframes cpdFadeUp { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} } @keyframes cpdScaleIn { from{opacity:0;transform:scale(0.72)} to{opacity:1;transform:scale(1)} } @keyframes cpdSlideRight{ from{opacity:0;transform:translateX(32px)} to{opacity:1;transform:translateX(0)}} /* ── Hero: anima al cargar (sin scroll) ───────────────────────────────── */ .cpd-hero-icon { animation: cpdScaleIn .55s cubic-bezier(0.16,1,0.3,1) both; } .cpd-hero-label { animation: cpdFadeUp .65s cubic-bezier(0.16,1,0.3,1) .10s both; } .cpd-hero-title { animation: cpdFadeUp .75s cubic-bezier(0.16,1,0.3,1) .20s both; } .cpd-hero-tagline{ animation: cpdFadeUp .65s cubic-bezier(0.16,1,0.3,1) .32s both; } .cpd-hero-right { animation: cpdSlideRight .72s cubic-bezier(0.16,1,0.3,1) .18s both; } /* ── Scroll-reveal base — IntersectionObserver añade .cpd-revealed ─────── */ .cpd-anim { opacity:0; transform:translateY(28px); transition: opacity .6s cubic-bezier(0.16,1,0.3,1), transform .6s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--i,0) * 72ms); } .cpd-anim-left { opacity:0; transform:translateX(-28px); transition: opacity .65s cubic-bezier(0.16,1,0.3,1), transform .65s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--i,0) * 80ms); } .cpd-anim-right { opacity:0; transform:translateX(28px); transition: opacity .65s cubic-bezier(0.16,1,0.3,1), transform .65s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--i,0) * 80ms); } .cpd-anim-scale { opacity:0; transform:scale(0.92); transition: opacity .6s cubic-bezier(0.16,1,0.3,1), transform .6s cubic-bezier(0.16,1,0.3,1); transition-delay: .14s; } /* Estado visible */ .cpd-anim.cpd-revealed, .cpd-anim-left.cpd-revealed, .cpd-anim-right.cpd-revealed, .cpd-anim-scale.cpd-revealed { opacity:1; transform:translateY(0) translateX(0) scale(1); } /* ── Breadcrumb ── */ .cpd-bread{ padding:12px 0;background:var(--bg-soft); border-bottom:1px solid var(--gray-200); font-size:13px;color:var(--gray-500); margin-top:72px; /* altura del nav fijo */ } [data-theme="dark"] .cpd-bread{background:var(--bg-tint);border-bottom-color:rgba(255,255,255,.06)} .cpd-bread a{color:var(--gray-500);transition:color .2s} .cpd-bread a:hover{color:var(--brand-500)} .cpd-bread-sep{margin:0 8px;opacity:.4} .cpd-bread span:last-child{color:var(--gray-900);font-weight:500} [data-theme="dark"] .cpd-bread span:last-child{color:#fff} /* ── Hero ── */ .cpd-hero{padding:44px 0 52px;position:relative;overflow:hidden} .cpd-hero::before{ content:'';position:absolute;inset:0; background:radial-gradient(ellipse 60% 80% at 100% 50%,rgba(255,255,255,.07) 0%,transparent 65%); pointer-events:none; } .cpd-hero--brand{background:linear-gradient(135deg,var(--brand-900) 0%,var(--brand-700) 100%)} .cpd-hero--warm{background:linear-gradient(135deg,#3a2200 0%,var(--warm-700) 100%)} .cpd-hero--plum{background:linear-gradient(135deg,#1e0e3a 0%,var(--plum-600) 100%)} .cpd-hero--accent{background:linear-gradient(135deg,#031a16 0%,var(--accent-700) 100%)} [data-theme="dark"] .cpd-hero--brand{background:linear-gradient(135deg,#060f1e 0%,var(--brand-800) 100%)} [data-theme="dark"] .cpd-hero--warm{background:linear-gradient(135deg,#1a0f00 0%,#7a5000 100%)} [data-theme="dark"] .cpd-hero--plum{background:linear-gradient(135deg,#0e0618 0%,#4a2880 100%)} [data-theme="dark"] .cpd-hero--accent{background:linear-gradient(135deg,#020e0c 0%,#065548 100%)} /* Layout 2 columnas: título izquierda · desc+botones derecha */ .cpd-hero-inner{ display:grid;grid-template-columns:1fr 400px;gap:20px 48px;align-items:center; } .cpd-hero-left{display:flex;flex-direction:column} .cpd-hero-right{display:flex;flex-direction:column;justify-content:center;padding-top:4px} .cpd-hero-label{ font-size:10px;font-family:var(--font-m);text-transform:uppercase;letter-spacing:.16em; color:rgba(255,255,255,.45);margin-bottom:14px; } .cpd-hero-title{ font-size:clamp(26px,3.8vw,44px);font-weight:800;color:#fff; line-height:1.1;margin-bottom:14px; } .cpd-hero-tagline{ font-family:var(--font-a);font-size:clamp(16px,2vw,21px); color:rgba(255,255,255,.7);margin-bottom:0;font-style:italic; } .cpd-hero-desc{font-size:15px;color:rgba(255,255,255,.72);line-height:1.75;margin-bottom:28px} .cpd-hero-actions{display:flex;gap:12px;flex-wrap:wrap} .cpd-hero-actions .btn-outline{border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.85)} .cpd-hero-actions .btn-outline:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)} /* ── Icono hero — colores del megamenu, destacados sobre fondo oscuro ── */ .cpd-hero-icon{ width:60px;height:60px;border-radius:14px;margin-bottom:20px; display:flex;align-items:center;justify-content:center; } /* Colores exactos del megamenu por tipo */ .cpd-hero-icon.cpd-icon--brand{background:var(--brand-100);color:var(--brand-700)} .cpd-hero-icon.cpd-icon--warm {background:var(--warm-100); color:var(--warm-700)} .cpd-hero-icon.cpd-icon--plum {background:var(--plum-100); color:var(--plum-700)} .cpd-hero-icon.cpd-icon--accent{background:var(--accent-100);color:var(--accent-700)} .cpd-hero-icon svg{width:28px;height:28px;stroke:currentColor} /* ── Íconos de use-cases (color por tipo) ── */ .cpd-icon--brand{background:var(--brand-50);color:var(--brand-600)} .cpd-icon--warm{background:var(--warm-100);color:var(--warm-700)} .cpd-icon--plum{background:var(--plum-100);color:var(--plum-600)} .cpd-icon--accent{background:var(--accent-100);color:var(--accent-700)} [data-theme="dark"] .cpd-icon--brand{background:var(--brand-100);color:var(--brand-300)} [data-theme="dark"] .cpd-icon--warm{background:var(--warm-100);color:var(--warm-400)} [data-theme="dark"] .cpd-icon--plum{background:var(--plum-100);color:var(--plum-500)} [data-theme="dark"] .cpd-icon--accent{background:var(--accent-100);color:var(--accent-400)} /* ── Barra de métricas ── */ .cpd-metrics-bar{padding:28px 0;border-bottom:1px solid var(--gray-200)} [data-theme="dark"] .cpd-metrics-bar{border-bottom-color:rgba(255,255,255,.06)} .cpd-metrics-bar--brand{background:var(--brand-50)} .cpd-metrics-bar--warm{background:var(--warm-50)} .cpd-metrics-bar--plum{background:var(--plum-50)} .cpd-metrics-bar--accent{background:var(--accent-50)} [data-theme="dark"] .cpd-metrics-bar--brand{background:var(--brand-100)} [data-theme="dark"] .cpd-metrics-bar--warm{background:var(--warm-100)} [data-theme="dark"] .cpd-metrics-bar--plum{background:var(--plum-100)} [data-theme="dark"] .cpd-metrics-bar--accent{background:var(--accent-100)} .cpd-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center} .cpd-metric-val{ font-size:clamp(22px,3vw,30px);font-weight:800; font-family:var(--font-m);color:var(--gray-900);line-height:1.1; } [data-theme="dark"] .cpd-metric-val{color:#fff} .cpd-metric-label{font-size:12px;color:var(--gray-500);margin-top:4px} /* ── Grid de casos de uso ── */ .cpd-cases{background:var(--bg)} .cpd-cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px} .cpd-case{ background:var(--bg-soft);border:1px solid var(--gray-200);border-radius:var(--r-lg); padding:26px 24px;transition:all .25s; } [data-theme="dark"] .cpd-case{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07)} .cpd-case:hover{transform:translateY(-3px);box-shadow:var(--sh-2)} .cpd-case-icon{ width:40px;height:40px;border-radius:10px;margin-bottom:14px; display:flex;align-items:center;justify-content:center; } .cpd-case-icon svg{width:20px;height:20px;stroke:currentColor} .cpd-case-title{font-size:15px;font-weight:700;color:var(--gray-900);margin-bottom:8px} [data-theme="dark"] .cpd-case-title{color:#fff} .cpd-case-desc{font-size:13px;color:var(--gray-600);line-height:1.6} [data-theme="dark"] .cpd-case-desc{color:rgba(255,255,255,.5)} /* ── Contexto: industrias + tech + CTA ── */ .cpd-context{background:var(--bg-soft);padding:64px 0} [data-theme="dark"] .cpd-context{background:var(--bg-tint)} .cpd-context-grid{display:grid;grid-template-columns:1fr 1fr 340px;gap:40px;align-items:start} .cpd-context-h{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gray-500);margin-bottom:16px} [data-theme="dark"] .cpd-context-h{color:rgba(255,255,255,.35)} .cpd-pills{display:flex;flex-wrap:wrap;gap:8px} .cpd-pill{ background:var(--bg);border:1px solid var(--gray-200);border-radius:var(--r-full); padding:5px 14px;font-size:13px;color:var(--gray-700);font-weight:500; } [data-theme="dark"] .cpd-pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.7)} .cpd-tech-txt{font-size:14px;color:var(--gray-600);font-family:var(--font-m);line-height:1.8} [data-theme="dark"] .cpd-tech-txt{color:rgba(255,255,255,.45)} /* ── CTA card lateral ── */ .cpd-cta-card{ border-radius:var(--r-xl);padding:28px; border:1px solid var(--gray-200);background:var(--bg); } [data-theme="dark"] .cpd-cta-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)} .cpd-cta-card--brand{border-top:3px solid var(--brand-500)} .cpd-cta-card--warm{border-top:3px solid var(--warm-500)} .cpd-cta-card--plum{border-top:3px solid var(--plum-500)} .cpd-cta-card--accent{border-top:3px solid var(--accent-500)} .cpd-cta-title{font-size:17px;font-weight:700;color:var(--gray-900);margin-bottom:10px} [data-theme="dark"] .cpd-cta-title{color:#fff} .cpd-cta-desc{font-size:13px;color:var(--gray-600);line-height:1.6;margin-bottom:20px} [data-theme="dark"] .cpd-cta-desc{color:rgba(255,255,255,.45)} /* ── Nav prev/next — chips de navegación ── */ .cpd-nav-section{padding:28px 0;border-top:1px solid var(--gray-200)} [data-theme="dark"] .cpd-nav-section{border-top-color:rgba(255,255,255,.06)} .cpd-nav-row{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center} /* Chip base */ .cpd-nav-link{ display:inline-flex;align-items:center;gap:10px; padding:9px 18px 9px 12px; border-radius:var(--r-full); border:1.5px solid var(--gray-200); text-decoration:none;transition:all .22s cubic-bezier(0.16,1,0.3,1); width:fit-content;background:var(--bg);color:inherit; } [data-theme="dark"] .cpd-nav-link{border-color:rgba(255,255,255,.12);background:transparent} .cpd-nav-link:hover{ border-color:var(--brand-500);background:var(--brand-500); box-shadow:0 4px 16px rgba(24,90,157,.28);transform:translateY(-1px); } .cpd-nav-link svg{width:15px;height:15px;stroke:var(--gray-400);flex-shrink:0;transition:stroke .22s} .cpd-nav-link:hover svg{stroke:#fff} .cpd-nav-link--next{justify-content:flex-end;margin-left:auto} .cpd-nav-link--next .cpd-nav-text{text-align:right} .cpd-nav-text{display:flex;flex-direction:column;gap:1px} .cpd-nav-dir{ font-size:9px;color:var(--gray-400);text-transform:uppercase; letter-spacing:.1em;line-height:1.2;transition:color .22s; } .cpd-nav-name{font-size:13px;font-weight:600;color:var(--gray-800);transition:color .22s} [data-theme="dark"] .cpd-nav-dir{color:rgba(255,255,255,.3)} [data-theme="dark"] .cpd-nav-name{color:rgba(255,255,255,.85)} .cpd-nav-link:hover .cpd-nav-dir, .cpd-nav-link:hover .cpd-nav-name{color:#fff} /* Botón central "Todas las capacidades" */ .cpd-nav-all{ display:flex;align-items:center;gap:7px;flex-direction:column; color:var(--gray-500);font-size:11px;font-weight:500; text-decoration:none;transition:color .2s;letter-spacing:.02em;white-space:nowrap; } .cpd-nav-all svg{width:18px;height:18px;stroke:var(--gray-400);transition:stroke .2s} .cpd-nav-all:hover{color:var(--brand-500)} .cpd-nav-all:hover svg{stroke:var(--brand-500)} /* ── Responsive ── */ @media(max-width:1024px){ /* Hero: colapsa a 1 columna en tablets */ .cpd-hero-inner{grid-template-columns:1fr;gap:28px} .cpd-hero-right{padding-top:0} .cpd-hero-desc{margin-bottom:24px} /* Resto de secciones */ .cpd-context-grid{grid-template-columns:1fr 1fr;gap:28px} .cpd-context-cta{grid-column:1/-1} .cpd-cases-grid{grid-template-columns:repeat(2,1fr)} .cpd-metrics{grid-template-columns:repeat(2,1fr)} } @media(max-width:680px){ .cpd-hero{padding:36px 0 44px} .cpd-hero-inner{gap:20px} .cpd-hero-icon{width:50px;height:50px;border-radius:12px;margin-bottom:16px} .cpd-cases-grid{grid-template-columns:1fr} .cpd-context-grid{grid-template-columns:1fr} .cpd-metrics{grid-template-columns:repeat(2,1fr)} /* Nav chips en mobile */ .cpd-nav-row{grid-template-columns:1fr 1fr;gap:10px} .cpd-nav-all{display:none} .cpd-nav-link{padding:8px 14px 8px 10px} .cpd-nav-name{font-size:12px} /* Hero acciones */ .cpd-hero-actions{flex-direction:column} .cpd-hero-actions a{text-align:center;justify-content:center} }