/* ============================================================ API4IT — site.css Light/Dark via [data-theme="dark"] on Brand: Steel Blue → Cyan | Accent: Electric Green ============================================================ */ :root { /* Brand — blues */ --brand-900:#001D3D;--brand-800:#003060;--brand-700:#004382; --brand-600:#005AA2;--brand-500:#0073C6;--brand-400:#2D91DA; --brand-300:#65B3E8;--brand-200:#A3D3F4;--brand-100:#D4ECFC; --brand-50:#EEF7FD; /* Accent — cyan (connectivity) */ --accent-700:#005F73;--accent-600:#0090A8;--accent-500:#00B4D8; --accent-400:#48CAE4;--accent-300:#7ED8F0;--accent-200:#B0E9F7; --accent-100:#D8F5FD;--accent-50:#EBF9FE; /* Portal button colors */ --portal-auto: #0073C6; --portal-docs: #0090A8; --portal-status: #16A34A; --portal-soporte:#D97706; /* Neutrals */ --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(0,29,61,.06); --sh-2:0 4px 14px rgba(0,29,61,.08); --sh-3:0 12px 36px rgba(0,29,61,.1); --sh-4:0 24px 60px rgba(0,29,61,.14); --max-w:1180px; --theme-transition:background .25s,color .25s,border-color .25s; } /* ===== DARK MODE ===== */ [data-theme="dark"] { --bg:#08162A;--bg-soft:#0C1E38;--bg-tint:#112444; --gray-900:#EDF2F8;--gray-800:#D4DCE8;--gray-700:#B8C4D4; --gray-600:#96A2B0;--gray-500:#7A8A9C;--gray-400:#4A5868; --gray-300:#2A3A50;--gray-200:#1A2C42;--gray-100:#142030; --gray-50:#0E1A2C; --brand-50:#071426;--brand-100:#0D2040; --accent-50:#050E18;--accent-100:#081824; } /* ===== 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 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)}} @keyframes dash{to{stroke-dashoffset:0}} @keyframes nodePulse{0%,100%{r:5;opacity:.8}50%{r:8;opacity:.4}} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes slideIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}} /* ===== 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(0,29,61,.07); } [data-theme="dark"] .nav.scrolled{ background:rgba(8,22,42,.92); box-shadow:0 1px 0 rgba(255,255,255,.06); } .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:34px;width:auto;display:block;transition:filter .25s,opacity .25s} [data-theme="dark"] .nav-logo{filter:brightness(0) invert(1);opacity:.85} /* ── Dark mode: nav transparent over hero — links/logo already light via dark vars ── */ /* In dark mode, [data-theme="dark"] .nav-logo already inverts the logo globally. */ /* In light mode, the hero is light, so default link colors (gray-700) are fine. */ /* ── Language toggle: active indicator ── */ .ctrl-btn.lang-active{ background:var(--brand-50); border:1.5px solid var(--brand-300); border-radius:var(--r-sm); } [data-theme="dark"] .ctrl-btn.lang-active{ background:var(--gray-200); border-color:var(--gray-300); } /* Desktop menu */ .nav-menu{display:flex;align-items:center;gap:2px} .nav-link{ padding:8px 14px;font-size:14px;font-weight:500; color:var(--gray-700);border-radius:var(--r-sm); transition:all .18s; } .nav-link:hover{background:var(--brand-50);color:var(--brand-600)} [data-theme="dark"] .nav-link{color:var(--gray-700)} [data-theme="dark"] .nav-link:hover{background:var(--gray-200);color:var(--gray-900)} /* Accesos dropdown */ .nav-accesos{position:relative} .nav-acc-btn{ display:inline-flex;align-items:center;gap:5px; padding:7px 14px;font-size:13px;font-weight:600; background:var(--brand-50);color:var(--brand-700); border-radius:var(--r-full);border:1.5px solid var(--brand-200); transition:all .18s;cursor:pointer; } .nav-acc-btn svg{width:14px;height:14px;transition:transform .2s} .nav-accesos:hover .nav-acc-btn{background:var(--brand-100);border-color:var(--brand-300)} .nav-accesos:hover .nav-acc-btn svg, .nav-accesos.open .nav-acc-btn svg{transform:rotate(180deg)} [data-theme="dark"] .nav-acc-btn{background:var(--gray-200);color:var(--gray-900);border-color:var(--gray-300)} .acc-dropdown{ display:none;position:absolute;top:calc(100% + 8px);right:0; background:var(--bg);border:1px solid var(--gray-200); border-radius:var(--r-lg);padding:8px; box-shadow:var(--sh-3);min-width:260px;z-index:200; animation:fadeUp .15s ease; } [data-theme="dark"] .acc-dropdown{background:var(--bg-tint);border-color:var(--gray-300)} .nav-accesos:hover .acc-dropdown, .nav-accesos.open .acc-dropdown{display:block} .acc-item{ display:flex;align-items:center;gap:12px; padding:10px 12px;border-radius:var(--r-md); font-size:13px;color:var(--gray-800); transition:background .15s;text-decoration:none; } .acc-item:hover{background:var(--brand-50)} [data-theme="dark"] .acc-item:hover{background:var(--gray-200)} .acc-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0} .acc-dot.auto{background:var(--portal-auto)} .acc-dot.docs{background:var(--portal-docs)} .acc-dot.status{background:var(--portal-status)} .acc-dot.soporte{background:var(--portal-soporte)} .acc-text{flex:1;min-width:0} .acc-label{font-size:13px;font-weight:600;color:var(--gray-900);line-height:1.3} .acc-sub{font-size:11px;color:var(--gray-500);margin-top:1px;line-height:1.3} [data-theme="dark"] .acc-label{color:var(--gray-900)} [data-theme="dark"] .acc-sub{color:var(--gray-600)} .acc-ext{width:13px;height:13px;flex-shrink:0;opacity:.4;transition:opacity .15s} .acc-item:hover .acc-ext{opacity:.8} /* CTA button */ .nav-cta{ margin-left:8px;padding:9px 20px; background:var(--brand-500);color:#fff; border-radius:var(--r-full);font-size:13px;font-weight:600; transition:all .2s;box-shadow:0 2px 8px rgba(0,115,198,.25); } .nav-cta:hover{background:var(--brand-600);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,115,198,.35)} /* Controls */ .nav-right{display:flex;align-items:center;gap:4px} .nav-controls{display:flex;align-items:center;gap:4px} .ctrl-btn{ width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center; border-radius:var(--r-sm);color:var(--gray-600);transition:all .18s; } .ctrl-btn:hover{background:var(--gray-100);color:var(--gray-900)} [data-theme="dark"] .ctrl-btn:hover{background:var(--gray-200)} .ctrl-btn svg{width:16px;height:16px} .ctrl-btn img{border-radius:2px} /* Hamburger */ .nav-hamburger{ display:none;width:38px;height:38px; align-items:center;justify-content:center; border-radius:var(--r-sm);color:var(--gray-700); transition:background .18s; } .nav-hamburger:hover{background:var(--gray-100)} .nav-hamburger svg{width:22px;height:22px} .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 24px; box-shadow:0 12px 32px rgba(0,29,61,.1); animation:fadeUp .18s ease; } [data-theme="dark"] .mobile-drawer{background:var(--bg-tint);border-bottom-color:rgba(255,255,255,.06)} 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-divider{height:1px;background:var(--gray-200);margin:8px 0} [data-theme="dark"] .md-divider{background:var(--gray-300)} .md-section-label{padding:6px 16px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-500)} .md-portals{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px} .md-portal{ display:flex;align-items:center;gap:8px; padding:12px 14px;border-radius:var(--r-md); font-size:13px;font-weight:600;color:#fff; transition:all .18s;box-shadow:0 2px 6px rgba(0,0,0,.12); } .md-portal:hover{transform:translateY(-1px);color:#fff} .md-portal svg{width:14px;height:14px;opacity:.9;flex-shrink:0} .md-portal.auto{background:var(--portal-auto)} .md-portal.docs{background:var(--portal-docs)} .md-portal.status{background:var(--portal-status)} .md-portal.soporte{background:var(--portal-soporte)} .md-cta{ display:block;margin-top:10px;padding:13px 16px;text-align:center; background:var(--brand-500);color:#fff; border-radius:var(--r-full);font-size:14px;font-weight:600; box-shadow:0 2px 8px rgba(0,115,198,.25);transition:all .2s; } .md-cta:hover{background:var(--brand-600);transform:translateY(-1px)} /* ===== BUTTONS ===== */ .btn-primary{ display:inline-flex;align-items:center;gap:8px; padding:13px 28px;background:var(--brand-500);color:#fff; border-radius:var(--r-full);font-size:15px;font-weight:600; transition:all .2s;box-shadow:0 2px 12px rgba(0,115,198,.28); } .btn-primary svg{width:16px;height:16px;transition:transform .2s} .btn-primary:hover{background:var(--brand-600);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,115,198,.38)} .btn-primary:hover svg{transform:translateX(3px)} .btn-outline{ display:inline-flex;align-items:center;gap:8px; padding:13px 28px;background:transparent;color:var(--brand-600); border-radius:var(--r-full);font-size:15px;font-weight:600; border:2px solid var(--brand-300);transition:all .2s; } .btn-outline:hover{border-color:var(--brand-500);background:var(--brand-50)} [data-theme="dark"] .btn-outline{color:var(--brand-300);border-color:var(--brand-600)} [data-theme="dark"] .btn-outline:hover{background:var(--brand-50);color:var(--brand-200)} /* ===== SECTION COMMON ===== */ .section{padding:96px 0} .sec-tag{ display:inline-flex;align-items:center;gap:8px; padding:6px 14px;background:var(--brand-50); color:var(--brand-600);border-radius:var(--r-full); font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; margin-bottom:20px;border:1px solid var(--brand-100); } [data-theme="dark"] .sec-tag{background:var(--brand-50);border-color:var(--brand-100);color:var(--brand-300)} .sec-tag .dot{width:6px;height:6px;background:var(--brand-500);border-radius:50%;animation:pulse 2s infinite} .sec-h{ font-family:var(--font-a);font-size:clamp(2rem,4vw,3rem); font-weight:700;line-height:1.15;color:var(--gray-900); margin-bottom:20px; } .sec-h .em{color:var(--brand-500);font-style:italic} .sec-sub{font-size:1.1rem;color:var(--gray-600);max-width:600px;line-height:1.7} /* ===== HERO ===== */ .hero{ min-height:100vh;display:flex;align-items:center; position:relative;overflow:hidden; background:linear-gradient(135deg,var(--brand-900) 0%,var(--brand-800) 50%,#0a2a5e 100%); padding-top:72px; } .hero::before{ content:'';position:absolute;inset:0; background:radial-gradient(ellipse 70% 60% at 70% 50%,rgba(0,180,216,.15) 0%,transparent 70%); pointer-events:none; } .hero-grid{ display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px; align-items:center;padding:80px 32px; } .hero-badge{ display:inline-flex;align-items:center;gap:8px; padding:6px 14px;background:rgba(0,180,216,.15); border:1px solid rgba(0,180,216,.35);border-radius:var(--r-full); font-size:12px;font-weight:600;color:var(--accent-300); letter-spacing:.05em;text-transform:uppercase;margin-bottom:24px; } .hero-badge .pulse-dot{ width:7px;height:7px;background:var(--accent-400); border-radius:50%;animation:pulse 2s infinite; } .hero h1{ font-family:var(--font-a); font-size:clamp(2.4rem,4.5vw,3.6rem); font-weight:700;line-height:1.12;color:#fff; margin-bottom:24px; } .hero h1 .em{color:var(--accent-400);font-style:italic} .hero-desc{font-size:1.1rem;color:rgba(255,255,255,.75);line-height:1.75;margin-bottom:36px;max-width:500px} .hero-actions{display:flex;gap:14px;flex-wrap:wrap} /* Hero logo visual */ .hero-visual{display:flex;align-items:center;justify-content:center} .hero-logo-wrap{ position:relative;display:flex;align-items:center;justify-content:center; width:420px;height:420px;animation:float 5s ease-in-out infinite; flex-shrink:0; } /* Outer glow blob */ .hero-logo-glow{ position:absolute;inset:-40px;border-radius:50%; background:radial-gradient(circle,rgba(0,180,216,.22) 0%,transparent 68%); pointer-events:none; } /* Decorative rings */ .hero-logo-ring{ position:absolute;inset:0;border-radius:50%;border:1px solid rgba(0,180,216,.18); pointer-events:none; } .hero-logo-ring.ring-1{ inset:-24px; border-style:dashed; border-color:rgba(0,180,216,.12); animation:spin 28s linear infinite; } .hero-logo-ring.ring-2{ inset:-56px; border-color:rgba(0,115,198,.1); animation:spin 40s linear infinite reverse; } /* The logo itself */ .hero-logo-img{ width:78%;height:auto; position:relative;z-index:1; filter:drop-shadow(0 0 56px rgba(0,180,216,.4)) drop-shadow(0 8px 32px rgba(0,29,61,.6)); opacity:.95; } [data-theme="dark"] .hero-logo-img{ filter:brightness(0) invert(1) drop-shadow(0 0 56px rgba(0,180,216,.55)) drop-shadow(0 8px 32px rgba(0,100,200,.45)); opacity:.88; } /* ── LIGHT MODE HERO ── */ [data-theme="light"] .hero{ background:linear-gradient(135deg,#EBF5FD 0%,#F4F9FE 45%,#DAEDfB 100%); } [data-theme="light"] .hero::before{ background:radial-gradient(ellipse 70% 60% at 70% 50%,rgba(0,115,198,.07) 0%,transparent 70%); } [data-theme="light"] .hero h1{color:var(--brand-900)} [data-theme="light"] .hero h1 .em{color:var(--brand-500)} [data-theme="light"] .hero-badge{ background:rgba(0,115,198,.08); border-color:rgba(0,115,198,.2); color:var(--brand-700); } [data-theme="light"] .hero-badge .pulse-dot{background:var(--brand-500)} [data-theme="light"] .hero-desc{color:var(--gray-700)} /* Logo shadows lighter on light bg */ [data-theme="light"] .hero-logo-img{ filter:drop-shadow(0 0 40px rgba(0,115,198,.18)) drop-shadow(0 6px 20px rgba(0,29,61,.1)); opacity:.97; } [data-theme="light"] .hero-logo-glow{ background:radial-gradient(circle,rgba(0,115,198,.1) 0%,transparent 68%); } [data-theme="light"] .hero-logo-ring{border-color:rgba(0,115,198,.15)} [data-theme="light"] .hero-logo-ring.ring-1{border-color:rgba(0,115,198,.1)} [data-theme="light"] .hero-logo-ring.ring-2{border-color:rgba(0,90,160,.07)} /* ===== ACCESOS RÁPIDOS ===== */ .qa-section{ background:var(--bg-tint); border-bottom:1px solid var(--gray-200); padding:48px 0; } [data-theme="dark"] .qa-section{border-bottom-color:var(--gray-300)} .qa-header{ display:flex;flex-direction:column;align-items:center; text-align:center;margin-bottom:36px; } .qa-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:16px; } .qa-card{ display:flex;flex-direction:column;gap:12px; padding:24px 20px;background:var(--bg); border:1.5px solid var(--gray-200);border-radius:var(--r-xl); transition:all .22s;position:relative;overflow:hidden; text-decoration:none; } .qa-card::before{ content:'';position:absolute;inset:0;opacity:0;transition:opacity .22s; } .qa-card.auto::before{background:linear-gradient(135deg,rgba(0,115,198,.06) 0%,transparent 60%)} .qa-card.docs::before{background:linear-gradient(135deg,rgba(0,144,168,.06) 0%,transparent 60%)} .qa-card.status::before{background:linear-gradient(135deg,rgba(22,163,74,.06) 0%,transparent 60%)} .qa-card.soporte::before{background:linear-gradient(135deg,rgba(217,119,6,.06) 0%,transparent 60%)} .qa-card:hover{border-color:transparent;transform:translateY(-4px);box-shadow:var(--sh-3)} .qa-card:hover::before{opacity:1} .qa-card.auto:hover{border-color:var(--portal-auto)} .qa-card.docs:hover{border-color:var(--portal-docs)} .qa-card.status:hover{border-color:var(--portal-status)} .qa-card.soporte:hover{border-color:var(--portal-soporte)} [data-theme="dark"] .qa-card{background:var(--bg-soft);border-color:var(--gray-300)} .qa-icon{ width:48px;height:48px;border-radius:var(--r-md); display:flex;align-items:center;justify-content:center;flex-shrink:0; } .qa-icon svg{width:22px;height:22px} .qa-card.auto .qa-icon{background:rgba(0,115,198,.1);color:var(--portal-auto)} .qa-card.docs .qa-icon{background:rgba(0,144,168,.1);color:var(--portal-docs)} .qa-card.status .qa-icon{background:rgba(22,163,74,.1);color:var(--portal-status)} .qa-card.soporte .qa-icon{background:rgba(217,119,6,.1);color:var(--portal-soporte)} .qa-title{font-size:1rem;font-weight:700;color:var(--gray-900)} .qa-desc{font-size:.875rem;color:var(--gray-600);line-height:1.55;flex:1} .qa-arrow{ display:flex;align-items:center;gap:5px; font-size:.8rem;font-weight:600;margin-top:4px;transition:gap .2s; } .qa-card.auto .qa-arrow{color:var(--portal-auto)} .qa-card.docs .qa-arrow{color:var(--portal-docs)} .qa-card.status .qa-arrow{color:var(--portal-status)} .qa-card.soporte .qa-arrow{color:var(--portal-soporte)} .qa-card:hover .qa-arrow{gap:9px} .qa-arrow svg{width:13px;height:13px} /* ===== STATS BAR ===== */ .stats-bar{ background:var(--brand-900); padding:48px 0; } .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .stat-item{ display:flex;flex-direction:column;align-items:center;gap:6px; padding:20px;border-right:1px solid rgba(255,255,255,.08); text-align:center; } .stat-item:last-child{border-right:none} .stat-num{ font-family:var(--font-m);font-size:2rem;font-weight:700; color:var(--accent-400);line-height:1; } .stat-label{font-size:.8rem;color:rgba(255,255,255,.6);letter-spacing:.03em} .stat-tag{ font-size:.7rem;font-weight:600; padding:2px 8px;border-radius:var(--r-full); background:rgba(0,180,216,.15);color:var(--accent-300); margin-top:4px; } /* ===== PORTAFOLIO ===== */ .port-section{padding:96px 0;background:var(--bg-soft)} .port-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:24px; margin-top:48px; } .port-card{ background:var(--bg);border:1.5px solid var(--gray-200); border-radius:var(--r-xl);padding:32px; transition:all .22s;position:relative;overflow:hidden; } .port-card:hover{transform:translateY(-6px);box-shadow:var(--sh-4);border-color:var(--brand-300)} [data-theme="dark"] .port-card{background:var(--bg-tint);border-color:var(--gray-300)} [data-theme="dark"] .port-card:hover{border-color:var(--brand-400)} .port-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px} .port-logo{height:32px;width:auto;object-fit:contain} [data-theme="dark"] .port-logo{filter:brightness(0) invert(1);opacity:.85} .port-badge{ font-size:.7rem;font-weight:700;padding:4px 10px; border-radius:var(--r-full);letter-spacing:.05em;text-transform:uppercase; } .port-badge.n2it{background:rgba(45,145,218,.12);color:#005AA2} .port-badge.brainbow{background:rgba(0,180,216,.12);color:#0090A8} .port-badge.abbla{background:rgba(156,111,228,.12);color:#6B3EB5} .port-badge.invaia{background:rgba(245,158,11,.12);color:#92400E} .port-badge.redsmart{background:rgba(220,38,38,.10);color:#B91C1C} [data-theme="dark"] .port-badge.n2it{color:var(--brand-300)} [data-theme="dark"] .port-badge.brainbow{color:var(--accent-300)} [data-theme="dark"] .port-badge.redsmart{color:#F87171} .port-title{font-size:1.2rem;font-weight:700;color:var(--gray-900);margin-bottom:10px} .port-desc{font-size:.9rem;color:var(--gray-600);line-height:1.65;margin-bottom:20px} .port-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px} .port-tag{ font-size:.72rem;font-weight:600;padding:3px 10px; background:var(--brand-50);color:var(--brand-700); border-radius:var(--r-full);border:1px solid var(--brand-100); } [data-theme="dark"] .port-tag{background:var(--brand-50);color:var(--brand-300);border-color:var(--brand-100)} .port-actions{display:flex;gap:10px;flex-wrap:wrap} .port-btn{ display:inline-flex;align-items:center;gap:6px; padding:8px 16px;border-radius:var(--r-full); font-size:.8rem;font-weight:600;transition:all .18s; } .port-btn.primary{background:var(--brand-500);color:#fff} .port-btn.primary:hover{background:var(--brand-600)} .port-btn.outline{ border:1.5px solid var(--gray-300);color:var(--gray-700); } .port-btn.outline:hover{border-color:var(--brand-400);color:var(--brand-600)} .port-btn svg{width:12px;height:12px} /* Portfolio logo text fallback */ .port-logo-text{ font-size:1.1rem;font-weight:800;letter-spacing:-.02em; color:#B91C1C;line-height:1;padding:2px 0; } [data-theme="dark"] .port-logo-text{color:#F87171} /* 5th portfolio card — centered when alone in last row */ @media(min-width:1025px){ .port-card--solo{ grid-column:1 / -1; max-width:calc(50% - 12px); margin:0 auto; } } /* ===== APIS PLUG & PLAY ===== */ .apis-section{padding:96px 0;background:var(--bg-tint)} [data-theme="dark"] .apis-section{background:var(--bg-soft)} .apis-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px; margin-top:48px; } .api-cat{ background:var(--bg);border:1.5px solid var(--gray-200); border-radius:var(--r-xl);padding:28px 24px; transition:all .22s; } .api-cat:hover{border-color:var(--brand-300);transform:translateY(-4px);box-shadow:var(--sh-3)} [data-theme="dark"] .api-cat{background:var(--bg-tint);border-color:var(--gray-300)} [data-theme="dark"] .api-cat:hover{border-color:var(--brand-400)} .api-cat-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px} .api-cat-icon{ width:40px;height:40px;border-radius:var(--r-md);flex-shrink:0; display:flex;align-items:center;justify-content:center; } .api-cat-icon svg{width:18px;height:18px} .api-cat-icon--sso {background:rgba(0,115,198,.1);color:var(--brand-500)} .api-cat-icon--abbla {background:rgba(156,111,228,.1);color:#7C3AED} .api-cat-icon--brainbow{background:rgba(0,180,216,.1);color:var(--accent-600)} .api-cat-icon--in2it {background:rgba(22,163,74,.1);color:#16A34A} .api-cat-name{font-size:.9rem;font-weight:700;color:var(--gray-900);line-height:1.3} [data-theme="dark"] .api-cat-name{color:var(--gray-900)} .api-cat-badge{ display:inline-block;font-size:.63rem;font-weight:700; padding:2px 8px;border-radius:var(--r-full); letter-spacing:.06em;text-transform:uppercase;margin-top:5px; } .api-cat-badge--sso {background:rgba(0,115,198,.1);color:var(--brand-600)} .api-cat-badge--abbla {background:rgba(156,111,228,.1);color:#7C3AED} .api-cat-badge--brainbow{background:rgba(0,180,216,.1);color:var(--accent-600)} .api-cat-badge--in2it {background:rgba(22,163,74,.1);color:#15803D} [data-theme="dark"] .api-cat-badge--sso {color:var(--brand-300)} [data-theme="dark"] .api-cat-badge--abbla {color:#A78BFA} [data-theme="dark"] .api-cat-badge--brainbow{color:var(--accent-300)} [data-theme="dark"] .api-cat-badge--in2it {color:#4ADE80} .api-list{list-style:none;display:flex;flex-direction:column;gap:7px} .api-list li{ display:flex;align-items:flex-start;gap:8px; font-size:.815rem;color:var(--gray-700);line-height:1.4; } [data-theme="dark"] .api-list li{color:var(--gray-700)} .api-list li::before{ content:'';display:block;width:5px;height:5px;border-radius:50%; background:var(--brand-400);flex-shrink:0;margin-top:5px; } .apis-cta{display:flex;justify-content:center;margin-top:48px} /* ===== BENEFICIOS ===== */ .ben-section{padding:96px 0} .ben-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px; margin-top:48px; } .ben-card{ padding:28px 24px;background:var(--bg-soft); border:1px solid var(--gray-200);border-radius:var(--r-xl); transition:all .22s; } .ben-card:hover{border-color:var(--brand-300);transform:translateY(-4px);box-shadow:var(--sh-2)} [data-theme="dark"] .ben-card{background:var(--bg-tint);border-color:var(--gray-300)} .ben-icon{ width:44px;height:44px;background:var(--brand-50); border-radius:var(--r-md);display:flex;align-items:center;justify-content:center; color:var(--brand-600);margin-bottom:16px; } .ben-icon svg{width:20px;height:20px} [data-theme="dark"] .ben-icon{background:var(--brand-50);color:var(--brand-300)} .ben-title{font-size:1rem;font-weight:700;color:var(--gray-900);margin-bottom:8px} .ben-desc{font-size:.875rem;color:var(--gray-600);line-height:1.6} /* ===== INTEGRACIÓN ===== */ .int-section{ padding:96px 0; background:linear-gradient(180deg,var(--brand-900) 0%,var(--brand-800) 100%); position:relative;overflow:hidden; } .int-section::before{ content:'';position:absolute; width:600px;height:600px;border-radius:50%; background:radial-gradient(circle,rgba(0,180,216,.12) 0%,transparent 70%); top:-200px;right:-100px;pointer-events:none; } .int-section .sec-tag{ background:rgba(0,180,216,.12);border-color:rgba(0,180,216,.25);color:var(--accent-300); } .int-section .sec-h{color:#fff} .int-section .sec-h .em{color:var(--accent-400)} .int-section .sec-sub{color:rgba(255,255,255,.65)} .int-steps{ display:grid;grid-template-columns:repeat(3,1fr); gap:0;margin-top:56px;position:relative; } .int-steps::before{ content:'';position:absolute;top:40px;left:16.66%;right:16.66%; height:2px;background:linear-gradient(90deg,var(--accent-600),var(--accent-400),var(--accent-600)); opacity:.4; } .int-step{ display:flex;flex-direction:column;align-items:center; text-align:center;padding:0 24px; position:relative; } .int-num{ width:80px;height:80px;border-radius:50%; background:rgba(0,180,216,.15);border:2px solid rgba(0,180,216,.4); display:flex;align-items:center;justify-content:center; font-family:var(--font-m);font-size:1.6rem;font-weight:700; color:var(--accent-400);margin-bottom:24px; position:relative;z-index:1;transition:all .3s; } .int-step:hover .int-num{ background:rgba(0,180,216,.25);border-color:var(--accent-400); box-shadow:0 0 24px rgba(0,180,216,.35); } .int-icon{ width:32px;height:32px;background:rgba(0,180,216,.2); border-radius:50%;display:flex;align-items:center;justify-content:center; color:var(--accent-400);margin-bottom:14px; } .int-icon svg{width:15px;height:15px} .int-title{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:10px} .int-desc{font-size:.875rem;color:rgba(255,255,255,.65);line-height:1.6;margin-bottom:16px} .int-link{ display:inline-flex;align-items:center;gap:5px; font-size:.8rem;font-weight:600;color:var(--accent-400); transition:gap .2s; } .int-link:hover{gap:9px} .int-link svg{width:12px;height:12px} /* ===== FAQ ===== */ .faq-section{padding:96px 0} .faq-list{margin-top:48px;max-width:780px;margin-left:auto;margin-right:auto} .faq-item{ border-bottom:1px solid var(--gray-200); overflow:hidden; } [data-theme="dark"] .faq-item{border-bottom-color:var(--gray-300)} .faq-q{ width:100%;display:flex;align-items:center;justify-content:space-between; padding:20px 0;font-size:1rem;font-weight:600;color:var(--gray-900); text-align:left;gap:16px;cursor:pointer;transition:color .18s; background:none;border:none; } .faq-q:hover{color:var(--brand-600)} .faq-q-icon{ width:24px;height:24px;border-radius:50%; background:var(--gray-100);color:var(--gray-600); display:flex;align-items:center;justify-content:center;flex-shrink:0; transition:all .2s; } [data-theme="dark"] .faq-q-icon{background:var(--gray-200);color:var(--gray-700)} .faq-q-icon svg{width:12px;height:12px;transition:transform .25s} .faq-item.open .faq-q{color:var(--brand-600)} .faq-item.open .faq-q-icon{background:var(--brand-100);color:var(--brand-600)} .faq-item.open .faq-q-icon svg{transform:rotate(180deg)} .faq-a{ max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease; font-size:.9rem;color:var(--gray-600);line-height:1.7; } .faq-item.open .faq-a{max-height:400px;padding-bottom:20px} /* ===== CONTACTO ===== */ .contact-section{padding:96px 0;background:var(--bg-soft)} [data-theme="dark"] .contact-section{background:var(--bg-tint)} .contact-head{text-align:center;margin-bottom:48px} .contact-head h2{font-family:var(--font-a);font-size:clamp(2rem,3.5vw,2.8rem);font-weight:700;margin-bottom:14px} .contact-head p{font-size:1rem;color:var(--gray-600)} .contact-card{ display:grid;grid-template-columns:1fr 1.4fr;gap:0; background:var(--bg);border:1px solid var(--gray-200); border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3); } [data-theme="dark"] .contact-card{background:var(--bg-soft);border-color:var(--gray-300)} .cc-left{ padding:40px 36px; background:linear-gradient(160deg,var(--brand-900) 0%,var(--brand-800) 100%); } .cc-left-title{font-size:1.2rem;font-weight:700;color:#fff;margin-bottom:6px} .cc-left-sub{font-size:.875rem;color:rgba(255,255,255,.6);margin-bottom:32px} .cc-step{display:flex;gap:14px;margin-bottom:20px;align-items:flex-start} .cc-step-num{ font-family:var(--font-m);font-size:.75rem;font-weight:700; color:var(--accent-400);background:rgba(0,180,216,.15); border-radius:50%;width:28px;height:28px; display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px; } .cc-step-icon{ width:32px;height:32px;background:rgba(0,180,216,.12); border-radius:50%;display:flex;align-items:center;justify-content:center; color:var(--accent-400);flex-shrink:0;margin-top:0; } .cc-step-icon svg{width:14px;height:14px} .cc-step-body h5{font-size:.95rem;font-weight:600;color:#fff;margin-bottom:4px} .cc-step-body p{font-size:.82rem;color:rgba(255,255,255,.6);line-height:1.55} .cc-guarantee{ display:flex;align-items:center;gap:8px;margin-top:24px; padding:12px 16px;background:rgba(0,180,216,.1); border-radius:var(--r-md);border:1px solid rgba(0,180,216,.2); } .cc-guarantee svg{width:16px;height:16px;color:var(--accent-400);flex-shrink:0} .cc-guarantee span{font-size:.8rem;color:rgba(255,255,255,.7)} .cc-right{padding:40px 36px} .cc-form{display:flex;flex-direction:column;gap:14px;height:100%} .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .cf-field{display:flex;flex-direction:column;gap:5px;position:relative} .cf-field input, .cf-field select, .cf-field textarea{ width:100%;padding:11px 14px; background:var(--bg-soft);border:1.5px solid var(--gray-200); border-radius:var(--r-md);font-family:var(--font-h);font-size:.875rem; color:var(--gray-900);transition:border-color .18s,box-shadow .18s; outline:none; } [data-theme="dark"] .cf-field input, [data-theme="dark"] .cf-field select, [data-theme="dark"] .cf-field textarea{ background:var(--bg-tint);border-color:var(--gray-300);color:var(--gray-900); } .cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus{ border-color:var(--brand-400); box-shadow:0 0 0 3px rgba(0,115,198,.12); } .cf-field textarea{resize:vertical;min-height:100px} .cf-field.has-error input, .cf-field.has-error select, .cf-field.has-error textarea{border-color:#E53E3E;box-shadow:0 0 0 3px rgba(229,62,62,.1)} .cf-invalid-msg{font-size:.75rem;color:#E53E3E;display:none} .cf-field.has-error .cf-invalid-msg{display:block} .cf-recaptcha{display:flex;justify-content:center} .cf-status{display:none;padding:10px 14px;border-radius:var(--r-md);font-size:.875rem;font-weight:500} .cf-status.show{display:block} .cf-status.success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0} .cf-status.error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca} .cf-status.warning{background:#fffbeb;color:#92400e;border:1px solid #fde68a} [data-theme="dark"] .cf-status.success{background:rgba(22,163,74,.12);color:#4ade80;border-color:rgba(22,163,74,.25)} [data-theme="dark"] .cf-status.error{background:rgba(239,68,68,.1);color:#f87171;border-color:rgba(239,68,68,.2)} .cf-submit{ width:100%;padding:13px;border-radius:var(--r-full); background:var(--brand-500);color:#fff;font-size:.95rem;font-weight:600; display:flex;align-items:center;justify-content:center;gap:8px; transition:all .2s;box-shadow:0 2px 10px rgba(0,115,198,.3); } .cf-submit:hover:not(:disabled){background:var(--brand-600);transform:translateY(-1px)} .cf-submit:disabled{opacity:.65;cursor:not-allowed} .cf-submit svg{width:16px;height:16px} .cf-spinner{ width:14px;height:14px;border:2px solid rgba(255,255,255,.4); border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite; display:inline-block; } /* ===== FOOTER ===== */ /* --gray-900 flips to #EDF2F8 in dark mode → hardcode a deep navy instead */ footer{background:#1a2232;padding:64px 0 28px;color:rgba(255,255,255,.7)} [data-theme="dark"] footer{background:#04101e} .ft-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px} .ft-brand p{font-size:.875rem;line-height:1.65;color:rgba(255,255,255,.5);margin-top:14px;max-width:220px} .ft-col h5{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:16px} .ft-col a{display:block;font-size:.875rem;color:rgba(255,255,255,.6);margin-bottom:8px;transition:color .15s} .ft-col a:hover{color:#fff} .ft-bottom{ display:flex;align-items:center;justify-content:space-between; padding-top:24px;border-top:1px solid rgba(255,255,255,.08); font-size:.8rem;color:rgba(255,255,255,.4); } .ft-social{display:flex;gap:12px} .ft-social a{ width:34px;height:34px;border-radius:var(--r-sm); background:rgba(255,255,255,.08);color:rgba(255,255,255,.5); display:flex;align-items:center;justify-content:center;transition:all .18s; } .ft-social a:hover{background:var(--brand-600);color:#fff} .ft-social svg{width:16px;height:16px} /* ===== STATUS INDICATOR ===== */ .status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--portal-status);margin-right:5px;animation:pulse 2s infinite} /* ===== RESPONSIVE ===== */ @media(max-width:1024px){ .port-grid{grid-template-columns:1fr} .apis-grid{grid-template-columns:1fr 1fr} .ft-top{grid-template-columns:1fr 1fr 1fr;gap:28px} .ft-top .ft-brand{grid-column:1/-1} } @media(max-width:768px){ .nav-menu,.nav-cta{display:none} .nav-hamburger{display:inline-flex} .hero-grid{grid-template-columns:1fr;gap:32px;padding:60px 24px;text-align:center} .hero-actions{justify-content:center} .hero-visual{display:flex;order:-1} .hero-logo-wrap{width:200px;height:200px} .hero-logo-ring.ring-1{inset:-16px} .hero-logo-ring.ring-2{inset:-36px} .qa-grid{grid-template-columns:1fr 1fr} .stats-grid{grid-template-columns:1fr 1fr} .stat-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)} .stat-item:nth-child(even){border-bottom:none} .apis-grid{grid-template-columns:1fr} .ben-grid{grid-template-columns:1fr} .int-steps{grid-template-columns:1fr;gap:32px} .int-steps::before{display:none} .contact-card{grid-template-columns:1fr} .cc-left{display:none} .cf-row{grid-template-columns:1fr} .ft-top{grid-template-columns:1fr 1fr;gap:24px} .ft-top .ft-brand{grid-column:1/-1} .ft-bottom{flex-direction:column;gap:12px;text-align:center} .wrap{padding:0 20px} } @media(max-width:480px){ .qa-grid{grid-template-columns:1fr} .md-portals{grid-template-columns:1fr} }