Wordmark oficial del login y fuentes auto-hospedadas

index.html

@@ -11,11 +11,19 @@
     />
     <meta name="theme-color" content="#0D0F0E" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&display=swap"
-      rel="stylesheet"
+      rel="preload"
+      href="/fonts/IBMPlexSans-Regular.otf"
+      as="font"
+      type="font/otf"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="/fonts/IBMPlexSansCondensed-Bold.otf"
+      as="font"
+      type="font/otf"
+      crossorigin
     />
     <title>Winbit</title>
   </head>

src/index.css

@@ -723,14 +723,9 @@
   }
 
   .login-brand__name {
-    margin: 0;
-    font-family: var(--wb-font);
-    font-size: 1.35rem;
-    font-weight: 700;
-    letter-spacing: 0.14em;
-    line-height: 1;
-    color: var(--login-ink);
-    text-transform: uppercase;
+    display: block;
+    height: 1.65rem;
+    width: auto;
   }
 
   .login-brand__tagline {
@@ -740,7 +735,7 @@
     font-weight: 600;
     letter-spacing: 0.2em;
     text-transform: uppercase;
-    color: var(--login-green);
+    color: var(--login-green-deep);
   }
 
   /* Bloque de login desplazado a la derecha (como el mock) */
@@ -769,18 +764,18 @@
 
   .login-panel__accent {
     display: block;
-    width: 1.85rem;
-    height: 2px;
+    width: 3.75rem;
+    height: 1px;
     margin: 0 auto 0.85rem;
-    background: var(--login-green-mid);
+    background: linear-gradient(90deg, transparent, var(--login-green-mid), transparent);
   }
 
   .login-panel__title {
     margin: 0;
     font-family: var(--wb-font-display);
     font-size: clamp(1.4rem, 5.2vw, 1.9rem);
-    font-weight: 600;
-    letter-spacing: 0.09em;
+    font-weight: 700;
+    letter-spacing: 0.01em;
     line-height: 1.15;
     text-transform: uppercase;
     color: #f7f3ea;
@@ -864,6 +859,14 @@
   .login-cta__shape--stroke .login-cta__inner {
     background: #121412;
     min-height: calc(var(--login-cta-h) - 3px);
+    clip-path: polygon(
+      var(--login-chamfer) 0,
+      100% 0,
+      100% calc(100% - var(--login-chamfer)),
+      calc(100% - var(--login-chamfer)) 100%,
+      0 100%,
+      0 var(--login-chamfer)
+    );
   }
 
   .login-cta--outline:hover:not(:disabled) .login-cta__shape--stroke .login-cta__inner {
@@ -885,6 +888,7 @@
     /* Costura diagonal 45° (paralela al chaflán) */
     clip-path: polygon(0 0, 100% 0, calc(100% - var(--login-cta-h)) 100%, 0 100%);
     margin-right: calc(var(--login-cta-h) * -0.42);
+    padding-right: 1.5rem;
   }
 
   .login-cta-google__mark {

src/pages/LoginPage.jsx

@@ -9,6 +9,9 @@ import { useTranslation } from 'react-i18next';
 /** Mark Winbit W con fondo transparente (para zona crema). */
 const WINBIT_MARK_SRC = '/images/login/logo-winbit-w-clear.png';
 
+/** Wordmark "WINBIT" oficial, recortado del logo institucional y recoloreado a tinta (para zona crema). */
+const WINBIT_WORDMARK_SRC = '/images/login/logo-winbit-wordmark-ink.png';
+
 /** G monocromo (blanco sobre verde), como en el mock. */
 const GoogleMark = () => (
   <svg className="login-cta-google__mark" viewBox="0 0 24 24" aria-hidden="true">
@@ -71,7 +74,14 @@ const LoginBrand = ({ t }) => (
   <div className="login-brand">
     <WinbitMark className="login-brand__mark" />
     <div className="login-brand__copy">
-      <p className="login-brand__name">WINBIT</p>
+      <img
+        src={WINBIT_WORDMARK_SRC}
+        alt="WINBIT"
+        className="login-brand__name"
+        width={482}
+        height={92}
+        decoding="async"
+      />
       <p className="login-brand__tagline">{t('auth.login.tagline')}</p>
     </div>
   </div>

src/styles/winbit-brand.css

@@ -1,6 +1,63 @@
 /**
  * Winbit design tokens — official palette (Aug 2026).
  */
+
+@font-face {
+  font-family: 'IBM Plex Sans';
+  src: url('/fonts/IBMPlexSans-Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans';
+  src: url('/fonts/IBMPlexSans-Medium.otf') format('opentype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans';
+  src: url('/fonts/IBMPlexSans-SemiBold.otf') format('opentype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans';
+  src: url('/fonts/IBMPlexSans-Bold.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans Condensed';
+  src: url('/fonts/IBMPlexSansCondensed-Medium.otf') format('opentype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans Condensed';
+  src: url('/fonts/IBMPlexSansCondensed-SemiBold.otf') format('opentype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans Condensed';
+  src: url('/fonts/IBMPlexSansCondensed-Bold.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
 :root {
   /* Surfaces */
   --wb-bg: #0d0f0e;