/* ========================================================================== Smart Systems — design system compartido (2026-07-25) Lenguaje visual tomado de la landing de Clientivo (crm2026: resources/css/landing.css): paleta brick/citas/crm/sky, Manrope display + Inter texto, cards con ring y lift, eyebrow pills, blobs difuminados, banda oscura de CTA, dark mode por clase. Sin build step, sin Tailwind, sin CDN de CSS: un solo archivo para todo el sitio. ========================================================================== */ :root { /* marca Clientivo — brick (naranja) */ --brick-50:#FFF4E5; --brick-100:#FFE0B8; --brick-200:#FFD299; --brick-300:#FFA042; --brick-400:#F08C20; --brick-500:#E07B00; --brick-600:#C66D00; --brick-700:#B85F00; --brick-800:#8F4A00; --brick-900:#663500; /* teal */ --citas-50:#F0FDFA; --citas-100:#CCFBF1; --citas-300:#5EEAD4; --citas-500:#14B8A6; --citas-600:#0D9488; --citas-700:#0F766E; /* violeta */ --crm-50:#F5F3FF; --crm-100:#EDE9FE; --crm-300:#C4B5FD; --crm-500:#8B5CF6; --crm-600:#7C3AED; --crm-700:#6D28D9; /* azul */ --sky-50:#F0F9FF; --sky-100:#E0F2FE; --sky-300:#7DD3FC; --sky-500:#0EA5E9; --sky-600:#0284C7; --sky-700:#0369A1; /* neutrales */ --slate-50:#F8FAFC; --slate-100:#F1F5F9; --slate-200:#E2E8F0; --slate-300:#CBD5E1; --slate-400:#94A3B8; --slate-500:#64748B; --slate-600:#475569; --slate-700:#334155; --slate-800:#1E293B; --slate-900:#0F172A; /* acento por pagina — cada producto lo sobrescribe en su */ --accent:#E07B00; --accent-soft:#FFF4E5; --accent-strong:#B85F00; --accent-ring:rgba(224,123,0,.28); /* semanticos (light) */ --bg:#FFFFFF; --bg-2:#F8FAFC; --bg-3:#FFFDFA; --surface:#FFFFFF; --surface-2:#F8FAFC; --border:#E2E8F0; --border-soft:#EEF2F6; --text:#0F172A; --text-soft:#334155; --text-mute:#64748B; --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06); --shadow-md:0 10px 30px -12px rgba(15,23,42,.18); --shadow-lg:0 24px 60px -20px rgba(15,23,42,.28); --rad:16px; --rad-lg:22px; --rad-pill:999px; --font-display:"Manrope","Inter",system-ui,-apple-system,sans-serif; --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --maxw:1180px; } html.dark { --bg:#0B1220; --bg-2:#0F172A; --bg-3:#0F172A; --surface:#111C2E; --surface-2:#0F172A; --border:#1E293B; --border-soft:#18243A; --text:#F1F5F9; --text-soft:#CBD5E1; --text-mute:#94A3B8; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 10px 30px -12px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7); --accent-soft:rgba(224,123,0,.14); } *,*::before,*::after{box-sizing:border-box} html{overflow-x:hidden;scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--font-sans);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; } h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--text);margin:0;line-height:1.15;letter-spacing:-.025em} p{margin:0} img{max-width:100%;height:auto;display:block} a{color:inherit} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px} .center{text-align:center} /* ---------- Navbar ---------- */ .nav{ position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--border); } .nav-in{display:flex;align-items:center;gap:18px;height:62px;max-width:var(--maxw);margin:0 auto;padding:0 22px} .brand{display:inline-flex;align-items:center;gap:9px;padding:7px 0;font-family:var(--font-display);font-weight:800;font-size:1.02rem;text-decoration:none;letter-spacing:-.03em} .brand-mark{ width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:.78rem; background:linear-gradient(135deg,var(--brick-500),var(--crm-500));box-shadow:0 4px 12px var(--accent-ring); } .nav-links{display:flex;gap:20px;margin-left:auto;align-items:center} .nav-links a{color:var(--text-mute);text-decoration:none;font-size:.88rem;font-weight:600;transition:color .18s;padding:9px 7px;display:inline-flex;align-items:center} .nav-links a:hover,.nav-links a[aria-current]{color:var(--text)} /* .nav-links a tambien matchea el CTA: hay que ganarle en especificidad o hereda el gris */ .nav-links a.nav-cta,.nav-cta{ display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:11px; background:var(--text);color:var(--bg);font-size:.85rem;font-weight:800;text-decoration:none; transition:transform .18s,box-shadow .18s; } .nav-links a.nav-cta:hover{color:var(--bg)} .nav-cta:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)} .theme-toggle{ width:36px;height:36px;flex:0 0 36px;border-radius:50%;border:1px solid var(--border); background:var(--surface);color:var(--text-soft);cursor:pointer;display:grid;place-items:center; font-size:.95rem;transition:transform .18s,border-color .18s; } .theme-toggle:hover{transform:scale(1.08);border-color:var(--accent)} @media(max-width:860px){ .nav-links a:not(.nav-cta){display:none} } /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;padding:78px 0 72px;background: radial-gradient(1200px 460px at 12% -10%, var(--accent-soft) 0%, transparent 62%), linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);} .hero::before,.hero::after{ content:'';position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(78px);pointer-events:none;opacity:.5; } .hero::before{top:-140px;left:-150px;background:var(--accent);opacity:.16} .hero::after{bottom:-190px;right:-160px;background:var(--crm-500);opacity:.12} .hero-grid{position:relative;display:grid;grid-template-columns:1fr;gap:38px;align-items:center} .hero-copy{min-width:0} .hero h1{font-size:clamp(2.15rem,6.4vw,3.6rem);font-weight:800;margin:14px 0 16px} .hero h1 .grad{ background:linear-gradient(100deg,var(--accent),var(--crm-500) 55%,var(--sky-500)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; } .hero-sub{font-size:1.06rem;color:var(--text-mute);max-width:38rem;margin-bottom:24px} .hero-media{position:relative;min-width:0} .hero-media img{border-radius:var(--rad-lg);box-shadow:var(--shadow-lg);border:1px solid var(--border)} @media(min-width:900px){ .hero{padding:96px 0 88px} .hero-grid.has-media{grid-template-columns:1.05fr .95fr;gap:52px} } /* ---------- Pills / badges ---------- */ .pill{ display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--rad-pill); background:var(--accent-soft);color:var(--accent-strong); font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.9px; border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); } html.dark .pill{color:var(--brick-300)} .pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.2s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .tag{ display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--rad-pill); background:var(--surface-2);border:1px solid var(--border);color:var(--text-mute); font-size:.72rem;font-weight:700; } /* ---------- Botones ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:13px 24px;border-radius:13px;font-weight:800;font-size:.94rem;text-decoration:none; border:2px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s; max-width:100%;overflow-wrap:anywhere;text-align:center; } .btn:hover{transform:translateY(-2px)} .btn-primary{background:var(--accent);color:#fff;box-shadow:0 12px 26px -12px var(--accent-ring)} .btn-primary:hover{background:var(--accent-strong);box-shadow:0 18px 34px -14px var(--accent-ring)} .btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:var(--shadow-sm)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent-strong)} .btn-wa{background:#25D366;color:#fff;box-shadow:0 12px 26px -12px rgba(37,211,102,.5)} .btn-wa:hover{background:#1FB855} .btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px} .hero-note{font-size:.82rem;color:var(--text-mute);display:flex;flex-wrap:wrap;gap:16px} .hero-note i{color:var(--citas-600);margin-right:5px} /* ---------- Secciones ---------- */ .section{padding:74px 0} .section.alt{background:var(--bg-2);border-block:1px solid var(--border-soft)} .section-head{max-width:720px;margin:0 auto 44px;text-align:center} .section-head.left{margin-left:0;text-align:left} .section-head h2{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;margin:14px 0 12px} .section-head p{color:var(--text-mute);font-size:1.02rem} /* ---------- Grid de cards ---------- */ .grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))} .grid.two{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))} .grid.tight{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:16px} .card{ position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--rad-lg); padding:26px 24px;box-shadow:var(--shadow-sm);transition:transform .22s,box-shadow .22s,border-color .22s; display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;overflow-wrap:anywhere; } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))} .card-ico{ width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.15rem; background:var(--accent-soft);color:var(--accent-strong);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent); } html.dark .card-ico{color:var(--brick-300)} .card h3{font-size:1.12rem;font-weight:800} .card .tagline{font-size:.82rem;font-weight:700;color:var(--accent-strong);text-transform:uppercase;letter-spacing:.5px} html.dark .card .tagline{color:var(--brick-300)} .card p{color:var(--text-mute);font-size:.93rem} .card ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:7px} .card li{position:relative;padding-left:24px;font-size:.88rem;color:var(--text-soft)} .card li::before{ content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;left:0;top:1px; color:var(--citas-600);font-size:.76rem; } .card-cta{margin-top:auto;padding-top:6px;font-weight:800;font-size:.88rem;color:var(--accent-strong);display:inline-flex;align-items:center;gap:8px} html.dark .card-cta{color:var(--brick-300)} .card:hover .card-cta i{transform:translateX(4px)} .card-cta i{transition:transform .2s} .card-tags{display:flex;flex-wrap:wrap;gap:6px} .card-media{ margin:-26px -24px 4px;border-radius:var(--rad-lg) var(--rad-lg) 0 0;overflow:hidden; background:var(--surface-2);aspect-ratio:16/9;max-height:230px; } .card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s} .card:hover .card-media img{transform:scale(1.04)} .card.mini .card-media{margin:-20px -20px 2px} /* card compacta (features secundarias) */ .card.mini{padding:20px;gap:9px} .card.mini .card-ico{width:38px;height:38px;border-radius:11px;font-size:.95rem} .card.mini h3{font-size:1rem} .card.mini p{font-size:.88rem} /* ---------- Stats ---------- */ .stats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))} .stat{ background:var(--surface);border:1px solid var(--border);border-radius:var(--rad); padding:22px 18px;text-align:center;box-shadow:var(--shadow-sm); } .stat .n{font-family:var(--font-display);font-size:1.9rem;font-weight:800;color:var(--accent-strong);line-height:1.1} html.dark .stat .n{color:var(--brick-300)} .stat .l{font-size:.79rem;color:var(--text-mute);margin-top:5px;font-weight:600} /* ---------- FAQ ---------- */ .faq{display:grid;gap:12px;max-width:820px;margin:0 auto} .faq details{ background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-sm); } .faq summary{cursor:pointer;font-weight:700;font-size:.97rem;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;font-size:.72rem;color:var(--text-mute);transition:transform .2s} .faq details[open] summary::after{transform:rotate(180deg)} .faq p{margin-top:11px;color:var(--text-mute);font-size:.93rem} /* ---------- Banda CTA oscura ---------- */ .cta-band{ position:relative;overflow:hidden;background:linear-gradient(135deg,var(--slate-900) 0%,#16213A 55%,var(--slate-800) 100%); color:#fff;padding:66px 0;text-align:center; } .cta-band::before{ content:'';position:absolute;inset:auto -80px -160px auto;width:420px;height:420px;border-radius:50%; background:var(--accent);opacity:.22;filter:blur(90px); } .cta-band h2{color:#fff;font-size:clamp(1.6rem,4.2vw,2.35rem);font-weight:800;margin-bottom:12px;position:relative} .cta-band p{color:#CBD5E1;max-width:620px;margin:0 auto 26px;position:relative} .cta-band .btn-row{justify-content:center;position:relative;margin-bottom:0} .cta-band .btn-ghost{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.28)} .cta-band .btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff} /* ---------- Footer ---------- */ .footer{background:var(--slate-900);color:#94A3B8;padding:54px 0 26px;font-size:.88rem} html.dark .footer{background:#070D18} .footer-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))} .footer h4{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:1.1px;margin-bottom:14px;font-weight:800} .footer a{color:#94A3B8;text-decoration:none;display:block;padding:7px 0;transition:color .18s} .footer a:hover{color:#fff} .footer .brand{color:#fff;margin-bottom:12px} .footer-about p{color:#94A3B8;max-width:23rem} .footer-bottom{ margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.10); display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;color:#64748B;font-size:.8rem; } /* ---------- Utilidades ---------- */ .prose p+p{margin-top:12px} .mt-0{margin-top:0}.mb-0{margin-bottom:0} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* ---------- CV: timeline de trayectoria ---------- */ .lead-block{max-width:760px;margin:0 auto 30px;color:var(--text-mute);font-size:1rem} .section-head+.lead-block{margin-top:-18px} .timeline{display:grid;gap:18px;position:relative} .job{ background:var(--surface);border:1px solid var(--border);border-radius:var(--rad-lg); padding:24px;box-shadow:var(--shadow-sm);border-left:4px solid var(--accent); } .job-top{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;justify-content:space-between} .job-title{font-family:var(--font-display);font-weight:800;font-size:1.08rem} .job-company{color:var(--accent-strong);font-weight:700;font-size:.92rem} html.dark .job-company{color:var(--brick-300)} .job-meta{font-size:.8rem;color:var(--text-mute);font-weight:600} .job-desc{margin-top:10px;color:var(--text-mute);font-size:.93rem} .job ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px} .job li{position:relative;padding-left:24px;font-size:.89rem;color:var(--text-soft)} .job li::before{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;left:0;top:1px;color:var(--citas-600);font-size:.74rem} .product-block{ margin-top:14px;padding:16px 18px;background:var(--surface-2);border:1px solid var(--border-soft); border-radius:14px; } .product-block .pn{font-weight:800;font-size:.97rem;font-family:var(--font-display)} .product-block .pd{font-size:.89rem;color:var(--text-mute);margin-top:5px} .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .chip{ display:inline-flex;align-items:center;padding:4px 11px;border-radius:var(--rad-pill); background:var(--accent-soft);color:var(--accent-strong);font-size:.74rem;font-weight:700; border:1px solid color-mix(in srgb,var(--accent) 20%,transparent); } html.dark .chip{color:var(--brick-300)} .chip.plain{background:var(--surface);color:var(--text-mute);border-color:var(--border)} a.chip{padding:7px 12px;text-decoration:none} a.chip:hover{border-color:var(--accent);color:var(--accent-strong)} .tech-line{margin-top:10px;font-size:.78rem;color:var(--text-mute);font-family:ui-monospace,SFMono-Regular,Menlo,monospace} .skill-groups{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))} .skill-group{background:var(--surface);border:1px solid var(--border);border-radius:var(--rad);padding:20px;box-shadow:var(--shadow-sm)} .skill-group h3{font-size:.98rem;margin-bottom:12px} /* El CTA del nav nunca debe partirse: en pantallas chicas se aprieta, no se envuelve */ .nav-links a.nav-cta,.nav-cta{white-space:nowrap} .brand-sub{font-weight:600;opacity:.6} @media(max-width:560px){ .nav-links a.nav-cta,.nav-cta{padding:9px 12px;font-size:.8rem} .brand{font-size:.95rem} .brand-sub{display:none} }