/* ===== Tokens ===== */

/* Brandon Text — Regular (400) */
@font-face{
  font-family: "Brandon Text";
  src: url("../Fuentes/HVDFonts-BrandonText-Regular.woff2") format("woff2"),
       url("../Fuentes/HVDFonts-BrandonText-Regular.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Si quieres TODO en Regular, no declares otros pesos.
   (Cuando te pidan Bold/Light/Italic, añadimos más @font-face.) */

/* Fuente global del sitio */
:root{
  --font-sans: "Brandon Text", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

html, body{
  font-family: var(--font-sans);
  /*font-weight: 400;
  /* Evita “falso bold/italic” si no declaramos otras variantes */
  font-synthesis-weight: none;
  font-synthesis-style: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root{
  --cem-navy:#1d2230;
  --cem-yellow:#f2c300;
  --cem-ink:#1d2230;
  --cem-shadow:0 10px 28px rgba(0,0,0,.18);
}

html,body{ height:100%; }

/* Brandbar mobile */
.brandbar{ background:var(--cem-navy); color:#fff; }

/* Wrapper: mobile = degradado; desktop = hero imagen */
.login-page{
  background:#fff;
}
.login-wrap{
  min-height: calc(100vh - 64px);
  background: linear-gradient(180deg, var(--cem-yellow) 0%, #fde784 100%);
}

@media (min-width: 992px){
  .login-wrap{
    min-height: 100vh;
    background: url('../img/LoginFondo.jpg') center left / cover no-repeat fixed;
  }
}

/* Tarjeta */
.login-card{
  background:#fff; width:min(92vw, 390px); border-radius:12px;
  padding:18px 18px 16px; box-shadow: var(--cem-shadow);
  margin: 24px 0;
}
@media (min-width: 992px){
  .login-card{ margin: 48px 4vw; }
}

/* Brand dentro de tarjeta */
.login-card-brand{ display:flex; align-items:center; gap:12px; }
.brand-circle{
  width:56px; height:56px; border-radius:50%; background:var(--cem-yellow);
  display:inline-flex; align-items:center; justify-content:center;
  color:#111; font-size:1.4rem; flex:0 0 auto;
}
.brand-text{ line-height:1; }
.brand-pre{ display:block; font-weight:700; color:#111; font-size:.95rem; letter-spacing:.01em; }
.brand-title{ display:block; font-weight:900; color:#111; font-size:2rem; margin-top:.1rem; letter-spacing:.01em; }

/* Form */
.form-label{ font-size:.875rem; color:#333; margin-bottom:.35rem; }
.form-control{ height:38px; border-color:#e3e6eb; }
.form-control:focus{ border-color:#c6cad3; box-shadow:0 0 0 .2rem rgba(13,110,253,.05); }
.btn-login{
  background:var(--cem-yellow); border:none; color:#111;
  font-weight:800; letter-spacing:.02em; border-radius:10px; padding:.6rem 1rem;
}
.btn-login:hover{ filter:brightness(.95); }

/* Links */
.small-links{ text-align:center; font-size:.9rem; }
.small-link{ color:#111; text-decoration:none; }
.small-link:hover{ text-decoration:underline; }
.sep{ color:#888; margin:0 .5rem; }

.back-link{ color:#111; text-decoration:none; font-size:.95rem; }
.back-link:hover{ text-decoration:underline; }
.privacy-link{ color:#555; font-size:.85rem; text-decoration:none; }
.privacy-link:hover{ text-decoration:underline; }