/* ============================================================ LA MARCA — sistema de diseño único para todos los productos. Se escribe una vez. Lo heredan todos los proyectos. Uso mínimo en cualquier sitio: Cada producto solo cambia su acento con data-marca. Nada más. ============================================================ */ /* ---------- 1. TOKENS: la única fuente de verdad ---------- */ :root{ /* Acento por defecto (casa) */ --acento: #ff4d2d; --acento-2: #ffb020; --acento-tenue: rgba(255,77,45,.14); --acento-luz: rgba(255,77,45,.38); /* Superficies — oscuro por defecto, es donde el software se ve caro */ --fondo: #07090d; --fondo-2: #0c1017; --panel: #11161f; --panel-alto:#161d28; --linea: rgba(255,255,255,.09); --linea-viva:rgba(255,255,255,.16); /* Texto */ --texto: #f4f6fa; --texto-2: #a8b3c4; --texto-3: #6b7688; /* Señales */ --ok:#2ddf7f; --alerta:#ffc43d; --error:#ff5a5a; --info:#4da3ff; /* Tipografía */ --display:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; --texto-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace; /* Escala tipográfica fluida */ --t-xs: clamp(11px,.68rem + .1vw,12px); --t-sm: clamp(13px,.8rem + .1vw,14px); --t-base:clamp(15px,.92rem + .15vw,17px); --t-lg: clamp(18px,1.05rem + .3vw,21px); --t-xl: clamp(22px,1.2rem + .8vw,30px); --t-2xl: clamp(28px,1.4rem + 2vw,46px); --t-3xl: clamp(38px,1.6rem + 4.2vw,78px); --t-4xl: clamp(46px,1.6rem + 6.5vw,108px); /* Ritmo — todo múltiplo de 4 */ --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px; --e9:96px; --e10:140px; /* Curvas */ --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px; --r-full:999px; /* Profundidad en capas: esto separa "plantilla" de "producto" */ --sombra-1:0 1px 2px rgba(0,0,0,.4), 0 0 0 1px var(--linea); --sombra-2:0 4px 6px -1px rgba(0,0,0,.45), 0 10px 24px -6px rgba(0,0,0,.5), 0 0 0 1px var(--linea); --sombra-3:0 12px 20px -8px rgba(0,0,0,.55), 0 30px 60px -20px rgba(0,0,0,.65), 0 0 0 1px var(--linea-viva); --brillo:inset 0 1px 0 rgba(255,255,255,.07); /* Tiempos: rápido se siente caro, lento se siente barato */ --rapido:120ms; --medio:260ms; --lento:520ms; --curva:cubic-bezier(.2,.8,.2,1); --curva-suave:cubic-bezier(.4,0,.2,1); --ancho:1160px; --ancho-texto:680px; } /* ---------- 2. ACENTOS POR PRODUCTO ---------- */ [data-marca="escuderia"]{ --acento:#e8340c; --acento-2:#ffc400; --acento-tenue:rgba(232,52,12,.15); --acento-luz:rgba(232,52,12,.4); } [data-marca="cadencia"]{ --acento:#2f7bff; --acento-2:#37e0c8; --acento-tenue:rgba(47,123,255,.15); --acento-luz:rgba(47,123,255,.4); } [data-marca="neurolean"]{ --acento:#7c5cff; --acento-2:#22d3ee; --acento-tenue:rgba(124,92,255,.15); --acento-luz:rgba(124,92,255,.4); } [data-marca="localclick"]{ --acento:#ff4d2d; --acento-2:#ffb020; --acento-tenue:rgba(255,77,45,.14); --acento-luz:rgba(255,77,45,.38); } [data-marca="startapia"]{ --acento:#00d68f; --acento-2:#a3e635; --acento-tenue:rgba(0,214,143,.14); --acento-luz:rgba(0,214,143,.38); } [data-marca="leantraining"]{ --acento:#0f9d58; --acento-2:#ffd24d; --acento-tenue:rgba(15,157,88,.15); --acento-luz:rgba(15,157,88,.4); } /* Variante clara — para informes y cosas que se imprimen */ [data-tema="claro"]{ --fondo:#f7f8fb; --fondo-2:#eef1f6; --panel:#fff; --panel-alto:#fff; --linea:rgba(10,14,22,.1); --linea-viva:rgba(10,14,22,.18); --texto:#0b0f16; --texto-2:#4a5668; --texto-3:#8793a5; --sombra-1:0 1px 2px rgba(16,24,40,.06), 0 0 0 1px var(--linea); --sombra-2:0 4px 8px -2px rgba(16,24,40,.08), 0 12px 28px -8px rgba(16,24,40,.1), 0 0 0 1px var(--linea); --sombra-3:0 16px 28px -12px rgba(16,24,40,.16), 0 40px 70px -30px rgba(16,24,40,.2), 0 0 0 1px var(--linea-viva); --brillo:none; } /* ---------- 3. BASE ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth} body{ margin:0; background:var(--fondo); color:var(--texto); font-family:var(--texto-font); font-size:var(--t-base); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:'cv02','cv03','cv04','ss01'; overflow-x:hidden; } /* Grano: mata el aspecto de plantilla */ body::before{ content:''; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.035; background-image:var(--grano); } :root{ --grano:url("data:image/svg+xml;utf8,"); } img,svg,video,canvas{max-width:100%; height:auto; display:block} h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.03; letter-spacing:-.03em; margin:0 0 .5em; text-wrap:balance} h1{font-size:var(--t-3xl)} h2{font-size:var(--t-2xl)} h3{font-size:var(--t-xl)} h4{font-size:var(--t-lg); letter-spacing:-.01em} p{margin:0 0 1.1em; text-wrap:pretty} p.lede{font-size:var(--t-lg); color:var(--texto-2); max-width:var(--ancho-texto)} a{color:var(--acento); text-decoration:none; transition:color var(--rapido) var(--curva)} a:hover{color:var(--acento-2)} strong,b{font-weight:650; color:var(--texto)} small{font-size:var(--t-sm); color:var(--texto-2)} hr{border:0; height:1px; background:var(--linea); margin:var(--e7) 0} ::selection{background:var(--acento); color:#fff} :focus-visible{outline:2px solid var(--acento); outline-offset:3px; border-radius:var(--r-sm)} /* ---------- 4. ESTRUCTURA ---------- */ .env{width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--e5)} .env.angosto{max-width:var(--ancho-texto)} .seccion{padding-block:var(--e9)} .seccion.corta{padding-block:var(--e7)} .rejilla{display:grid; gap:var(--e5)} .rejilla.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .rejilla.c3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .rejilla.c4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .fila{display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap} .fila.entre{justify-content:space-between} .fila.centro{justify-content:center} .apilado{display:flex; flex-direction:column; gap:var(--e4)} /* ---------- 5. TIPOS DE TEXTO ---------- */ .rotulo{font:600 var(--t-xs)/1 var(--texto-font); letter-spacing:.16em; text-transform:uppercase; color:var(--texto-3); display:block; margin-bottom:var(--e3)} .rotulo.acento{color:var(--acento)} .titular{font-family:var(--display); font-size:var(--t-4xl); font-weight:700; line-height:.94; letter-spacing:-.045em; margin:0 0 var(--e4)} .tenue{color:var(--texto-2)} .apagado{color:var(--texto-3)} .mono{font-family:var(--mono); font-size:.92em; letter-spacing:-.02em} .resaltado{background:linear-gradient(180deg,transparent 58%,var(--acento-tenue) 58%); padding-inline:.12em} .degradado{background:linear-gradient(105deg,var(--acento) 0%,var(--acento-2) 100%); -webkit-background-clip:text; background-clip:text; color:transparent} /* ---------- 6. BOTONES ---------- */ .btn{ --bg:var(--acento); --fg:#fff; display:inline-flex; align-items:center; justify-content:center; gap:var(--e2); background:var(--bg); color:var(--fg); border:0; border-radius:var(--r-full); padding:14px 26px; font:650 var(--t-base)/1 var(--texto-font); letter-spacing:-.01em; cursor:pointer; text-decoration:none; white-space:nowrap; position:relative; box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform var(--rapido) var(--curva), box-shadow var(--medio) var(--curva), background var(--rapido) var(--curva); } .btn:hover{transform:translateY(-2px); color:var(--fg); box-shadow:0 8px 16px -6px rgba(0,0,0,.5), 0 0 0 6px var(--acento-tenue)} .btn:active{transform:translateY(0) scale(.985)} .btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none} .btn.fantasma{--bg:transparent; --fg:var(--texto); box-shadow:inset 0 0 0 1px var(--linea-viva)} .btn.fantasma:hover{--bg:var(--panel-alto); box-shadow:inset 0 0 0 1px var(--acento)} .btn.claro{--bg:var(--texto); --fg:var(--fondo)} .btn.grande{padding:18px 34px; font-size:var(--t-lg)} .btn.chico{padding:9px 17px; font-size:var(--t-sm)} .btn.ancho{width:100%} /* Brillo que barre el botón: microdetalle que la gente sí nota */ .btn.brilla{overflow:hidden} .btn.brilla::after{ content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%); background-size:250% 100%; background-position:190% 0; transition:background-position var(--lento) var(--curva-suave); } .btn.brilla:hover::after{background-position:-60% 0} /* ---------- 7. SUPERFICIES ---------- */ .tarjeta{ background:var(--panel); border-radius:var(--r-lg); padding:var(--e5); box-shadow:var(--sombra-1), var(--brillo); position:relative; overflow:hidden; transition:transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva); } .tarjeta.viva:hover{transform:translateY(-4px); box-shadow:var(--sombra-3), var(--brillo)} /* Filo de luz superior: el detalle que la hace ver "de producto" */ .tarjeta.filo::before{ content:''; position:absolute; inset-inline:18%; top:0; height:1px; background:linear-gradient(90deg,transparent,var(--acento),transparent); opacity:.85; } .tarjeta.hueca{background:transparent; box-shadow:inset 0 0 0 1px var(--linea)} .tarjeta.acento{background: radial-gradient(120% 130% at 12% 0%, var(--acento-tenue) 0%, transparent 58%), var(--panel)} .panel{background:var(--panel); border-radius:var(--r); padding:var(--e4); box-shadow:inset 0 0 0 1px var(--linea)} /* ---------- 8. LA CIFRA (lo que más se usa al vender) ---------- */ .cifra{display:flex; flex-direction:column; gap:var(--e1)} .cifra .valor{font-family:var(--display); font-size:var(--t-2xl); font-weight:700; line-height:1; letter-spacing:-.045em; font-variant-numeric:tabular-nums; color:var(--texto)} .cifra .valor.acento{color:var(--acento)} .cifra .valor .unidad{font-size:.44em; font-weight:600; color:var(--texto-3); margin-left:.18em; letter-spacing:0} .cifra .pie{font-size:var(--t-sm); color:var(--texto-2); line-height:1.35} .cifra.gigante .valor{font-size:var(--t-4xl)} /* ---------- 9. INSIGNIAS ---------- */ .insignia{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--r-full); font:600 var(--t-xs)/1.4 var(--texto-font); letter-spacing:.04em; background:var(--acento-tenue); color:var(--acento); box-shadow:inset 0 0 0 1px var(--acento-luz)} .insignia.ok{background:rgba(45,223,127,.13); color:var(--ok); box-shadow:inset 0 0 0 1px rgba(45,223,127,.3)} .insignia.alerta{background:rgba(255,196,61,.13); color:var(--alerta); box-shadow:inset 0 0 0 1px rgba(255,196,61,.3)} .insignia.error{background:rgba(255,90,90,.13); color:var(--error); box-shadow:inset 0 0 0 1px rgba(255,90,90,.3)} .insignia.neutra{background:var(--panel-alto); color:var(--texto-2); box-shadow:inset 0 0 0 1px var(--linea)} /* Punto que late: dice "esto está vivo" sin escribirlo */ .punto{width:7px; height:7px; border-radius:50%; background:currentColor; position:relative; flex:none} .punto::after{content:''; position:absolute; inset:-4px; border-radius:50%; background:currentColor; opacity:.35; animation:latir 2s var(--curva-suave) infinite} @keyframes latir{0%{transform:scale(.6);opacity:.5} 70%,100%{transform:scale(1.9);opacity:0}} /* ---------- 10. BARRA SUPERIOR ---------- */ .barra{position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--fondo) 82%, transparent); backdrop-filter:blur(16px) saturate(1.6); -webkit-backdrop-filter:blur(16px) saturate(1.6); box-shadow:0 1px 0 var(--linea)} .barra .env{display:flex; align-items:center; gap:var(--e4); min-height:66px} .logo{display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-size:var(--t-lg); font-weight:700; letter-spacing:-.03em; color:var(--texto); text-decoration:none} .logo .chispa{width:11px; height:24px; border-radius:3px; flex:none; background:linear-gradient(160deg,var(--acento),var(--acento-2)); transform:skewX(-13deg); box-shadow:0 0 18px var(--acento-luz)} .barra nav{margin-left:auto; display:flex; align-items:center; gap:var(--e1)} .barra nav a{padding:9px 14px; border-radius:var(--r-full); color:var(--texto-2); font-size:var(--t-sm); font-weight:550; transition:color var(--rapido) var(--curva), background var(--rapido) var(--curva)} .barra nav a:hover{color:var(--texto); background:var(--panel)} .barra nav a[aria-current]{color:var(--acento); background:var(--acento-tenue)} @media(max-width:720px){ .barra nav a:not(.btn){display:none} } /* ---------- 11. PORTADA ---------- */ .portada{position:relative; padding-block:var(--e10) var(--e9); overflow:hidden} .portada::before{ content:''; position:absolute; z-index:0; inset:-40% -20% auto -20%; height:120%; pointer-events:none; background: radial-gradient(50% 44% at 22% 12%, var(--acento-tenue) 0%, transparent 62%), radial-gradient(42% 38% at 82% 4%, color-mix(in srgb,var(--acento-2) 16%, transparent) 0%, transparent 58%); filter:blur(28px); } .portada > *{position:relative; z-index:1} /* Malla de fondo: da sensación de plano técnico */ .malla{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; background-image:linear-gradient(var(--linea) 1px,transparent 1px), linear-gradient(90deg,var(--linea) 1px,transparent 1px); background-size:58px 58px; -webkit-mask-image:radial-gradient(72% 58% at 50% 28%,#000 0%,transparent 78%); mask-image:radial-gradient(72% 58% at 50% 28%,#000 0%,transparent 78%)} /* ---------- 12. TABLA ---------- */ .tabla-caja{overflow-x:auto; border-radius:var(--r-lg); box-shadow:inset 0 0 0 1px var(--linea); background:var(--panel)} table.tabla{width:100%; border-collapse:collapse; font-size:var(--t-sm)} table.tabla th{position:sticky; top:0; background:var(--panel-alto); text-align:left; padding:14px var(--e4); font-weight:600; color:var(--texto-2); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; box-shadow:0 1px 0 var(--linea); white-space:nowrap} table.tabla td{padding:14px var(--e4); border-top:1px solid var(--linea); font-variant-numeric:tabular-nums} table.tabla tbody tr{transition:background var(--rapido) var(--curva)} table.tabla tbody tr:hover{background:var(--panel-alto)} table.tabla td.num{text-align:right; font-family:var(--mono)} /* ---------- 13. FORMULARIOS ---------- */ .campo{display:flex; flex-direction:column; gap:7px} .campo label{font-size:var(--t-sm); font-weight:600; color:var(--texto-2)} .campo input,.campo select,.campo textarea{ background:var(--fondo-2); color:var(--texto); border:0; border-radius:var(--r); padding:14px var(--e4); font:450 var(--t-base)/1.4 var(--texto-font); box-shadow:inset 0 0 0 1px var(--linea); transition:box-shadow var(--rapido) var(--curva), background var(--rapido) var(--curva)} .campo input:focus,.campo select:focus,.campo textarea:focus{ outline:0; background:var(--panel); box-shadow:inset 0 0 0 1px var(--acento), 0 0 0 4px var(--acento-tenue)} .campo input::placeholder,.campo textarea::placeholder{color:var(--texto-3)} /* ---------- 14. BARRA DE AVANCE ---------- */ .avance{height:8px; border-radius:var(--r-full); background:var(--fondo-2); overflow:hidden; box-shadow:inset 0 0 0 1px var(--linea)} .avance > i{display:block; height:100%; border-radius:inherit; width:0; background:linear-gradient(90deg,var(--acento),var(--acento-2)); box-shadow:0 0 14px var(--acento-luz); transition:width 1.1s var(--curva)} /* ---------- 15. MOVIMIENTO (lo activa marca.js) ---------- */ /* Red de seguridad: si el JS no corre (bloqueado, error, conexión mala), el contenido aparece igual a los 2,5 s. Una página nunca puede quedar en blanco porque falló una animación. */ [data-entra]{opacity:0; transform:translateY(22px); transition:opacity var(--lento) var(--curva), transform var(--lento) var(--curva); animation:marca-rescate 1ms linear 2.5s forwards} [data-entra].visible{opacity:1; transform:none; animation:none} @keyframes marca-rescate{to{opacity:1; transform:none}} [data-entra="izq"]{transform:translateX(-26px)} [data-entra="esc"]{transform:translateY(22px) scale(.97)} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important} [data-entra]{opacity:1 !important; transform:none !important} } /* ---------- 16. UTILIDADES ---------- */ .centrado{text-align:center} .derecha{text-align:right} .sin-margen{margin:0} .lleno{width:100%} .oculto{display:none !important} .solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .mt1{margin-top:var(--e3)} .mt2{margin-top:var(--e5)} .mt3{margin-top:var(--e7)} .pie-sitio{padding-block:var(--e7); box-shadow:0 -1px 0 var(--linea); color:var(--texto-3); font-size:var(--t-sm)} @media print{ body::before,.malla,.barra{display:none} body{background:#fff; color:#000} }