/* ============================================================ theme.css — Tema visual compartido Efectos: glassmorphism, glow, fadeUp, blobs 3D, sombras (estilo CIMET) Colores: degradado cian → púrpura (estilo tecnomer) ============================================================ */ :root{ --cyan:#22d3ee; --cyan2:#06b6d4; --purple:#a855f7; --purple2:#9333ea; --pink:#ec4899; --bg:#0a0f1e; --bg2:#0c1326; --panel:#121a2e; --panel2:#0f1729; --border:#25304a; --text:#e8eef5; --muted:#94a3b8; --green:#22c55e; --red:#ef4444; --amber:#f59e0b; --grad:linear-gradient(135deg,var(--cyan),var(--purple)); --grad-soft:linear-gradient(135deg,rgba(34,211,238,.15),rgba(168,85,247,.15)); } /* ☀️ Modo claro (se activa con ) */ html[data-theme="light"]{ --bg:#f5f7fb; --bg2:#eceff5; --panel:#ffffff; --panel2:#f4f6fb; --border:#e3e7ef; --text:#0f1729; --muted:#5b6678; --grad-soft:linear-gradient(135deg,rgba(34,211,238,.12),rgba(168,85,247,.12)); } html[data-theme="light"] body{background:var(--bg);} *{margin:0;padding:0;box-sizing:border-box;} body{ font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif; background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden; } a{color:inherit;text-decoration:none;} .container{max-width:1140px;margin:0 auto;padding:0 22px;} .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;} .muted{color:var(--muted);} /* ---------- Animaciones ---------- */ @keyframes fadeUp{from{opacity:0;transform:perspective(1000px) rotateX(10deg) translateY(28px);}to{opacity:1;transform:perspective(1000px) rotateX(0) translateY(0);}} @keyframes pop{0%{transform:scale(.7);opacity:0;}100%{transform:scale(1);opacity:1;}} @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}} @keyframes glow{0%,100%{box-shadow:0 0 10px rgba(34,211,238,.4),0 0 30px rgba(168,85,247,.25);} 50%{box-shadow:0 0 22px rgba(34,211,238,.7),0 0 55px rgba(168,85,247,.5);}} @keyframes blob{0%{transform:translate(0,0) scale(1);}33%{transform:translate(40px,-60px) scale(1.15);} 66%{transform:translate(-30px,30px) scale(.9);}100%{transform:translate(0,0) scale(1);}} @keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}} .reveal{animation:fadeUp .7s cubic-bezier(.22,.61,.36,1) both;} .reveal.d1{animation-delay:.1s;} .reveal.d2{animation-delay:.2s;} .reveal.d3{animation-delay:.3s;} .reveal.d4{animation-delay:.4s;} /* ---------- Blobs 3D de fondo ---------- */ .blobs{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;} .blob{position:absolute;width:460px;height:460px;border-radius:50%;filter:blur(90px);opacity:.45;mix-blend-mode:screen;} .blob.c{background:var(--cyan);top:-120px;left:-80px;animation:blob 9s infinite;} .blob.p{background:var(--purple);top:40px;right:-120px;animation:blob 11s infinite reverse;} .blob.k{background:var(--pink);bottom:-160px;left:30%;animation:blob 13s infinite;} /* ---------- Botones ---------- */ .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:12px; font-weight:700;font-size:15px;cursor:pointer;border:none;transition:.22s;} .btn-grad{background:var(--grad);color:#06121f;font-weight:800;box-shadow:0 8px 24px rgba(34,211,238,.25);} .btn-grad:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(168,85,247,.4);} .btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text);} .btn-ghost:hover{border-color:var(--cyan);transform:translateY(-2px);} .btn-block{width:100%;justify-content:center;} /* ---------- Glassmorphism / cards ---------- */ .glass{background:rgba(18,26,46,.6);backdrop-filter:blur(12px);border:1px solid var(--border);} .card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:26px; transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s; position:relative;transform-style:preserve-3d;} .card:hover{transform:translateY(-6px) perspective(1000px) rotateX(2.5deg);border-color:var(--cyan); box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 1px rgba(34,211,238,.15);} .card .ico{font-size:30px;display:inline-block;} /* ---------- Header ---------- */ header{position:sticky;top:0;z-index:50;background:rgba(10,15,30,.72); backdrop-filter:blur(12px);border-bottom:1px solid var(--border);} .nav{display:flex;align-items:center;justify-content:space-between;height:70px;} .brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;} .brand .logo{width:38px;height:38px;border-radius:9px;object-fit:cover;object-position:center 30%; background:var(--panel2);animation:glow 3s infinite;vertical-align:middle;} .nav-links{display:flex;gap:24px;align-items:center;} .nav-links a:not(.btn){color:var(--muted);font-weight:600;font-size:15px;} .nav-links a:not(.btn):hover{color:var(--text);} @media(max-width:820px){.nav-links a:not(.btn){display:none;}} /* ---------- Badges ---------- */ .badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;} .badge.demo{background:rgba(245,158,11,.16);color:var(--amber);border:1px solid var(--amber);} .badge.sub{background:rgba(34,197,94,.16);color:var(--green);border:1px solid var(--green);} .badge.exp{background:rgba(239,68,68,.16);color:var(--red);border:1px solid var(--red);} .dot{width:9px;height:9px;border-radius:50%;background:var(--green);display:inline-block; animation:pulse 1.4s infinite;vertical-align:middle;} /* ---------- Inputs ---------- */ label{display:block;margin:14px 0 6px;color:var(--muted);font-size:13px;font-weight:600;} input,textarea,select{width:100%;background:var(--panel2);border:1px solid var(--border); border-radius:10px;padding:12px 14px;color:var(--text);font-size:15px;font-family:inherit;} input:focus,textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.15);} textarea{resize:vertical;min-height:90px;} /* ---------- Tablas / paneles (dashboards) ---------- */ .panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden;} .panel-head{padding:14px 18px;font-weight:700;border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between;} table{width:100%;border-collapse:collapse;} th,td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:14px;} th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px;} tbody tr{transition:.15s;} tbody tr:hover{background:rgba(34,211,238,.05);} /* ---------- Stats ---------- */ .stat{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:22px; position:relative;overflow:hidden;} .stat::after{content:"";position:absolute;top:-30px;right:-30px;width:90px;height:90px; border-radius:50%;background:var(--grad-soft);} .stat .k{color:var(--muted);font-size:13px;font-weight:600;} .stat .v{font-size:32px;font-weight:800;margin-top:6px;} /* ---------- Mockup navegador ---------- */ .mock{border:1px solid var(--border);border-radius:18px;overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.55);background:var(--panel2);} .mock .bar{background:var(--bg2);padding:11px 16px;display:flex;gap:8px;align-items:center;} .mock .bar i{width:12px;height:12px;border-radius:50%;display:inline-block;} /* ---------- Robot 3D (Spline) ---------- */ .spline-hero{position:relative;width:100%;max-width:760px;height:520px;margin:34px auto 0; border-radius:22px;overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 1px var(--border);} .spline-hero spline-viewer{width:100%;height:100%;display:block;} @media(max-width:640px){.spline-hero{height:380px;}} /* ---------- Tilt 3D al pasar el mouse (microinteracción) ---------- */ .tilt3d{transition:transform .3s cubic-bezier(.22,.61,.36,1);transform-style:preserve-3d;} .tilt3d:hover{transform:perspective(900px) rotateX(4deg) rotateY(-4deg) translateY(-4px);} /* ---------- Accesibilidad: respeta "reducir movimiento" ---------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important;} .blob{animation:none!important;} }