:root{--navy:#061a33;--gold:#b89a54;--ivory:#f6f3ed;--ink:#101622;--muted:#6a7485;--line:#ded9ce;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Inter',system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;font-family:var(--sans);color:var(--ink)}.login-shell{min-height:100svh;display:grid;grid-template-columns:1.1fr .9fr}.login-visual{position:relative;overflow:hidden;background:linear-gradient(135deg,#020a14,var(--navy) 60%,#0e3158);color:#fff;padding:42px max(40px,7vw);display:flex;flex-direction:column}.login-visual:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 42%,rgba(184,154,84,.2),transparent 26%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,75px 75px,75px 75px}.login-brand{position:relative;display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}.login-brand>span{width:45px;height:45px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;font:600 29px var(--serif);color:var(--gold)}.login-brand div{display:grid}.login-brand strong{font:600 20px var(--serif)}.login-brand small{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}.visual-copy{position:relative;margin:auto 0;max-width:700px}.eyebrow{font-size:9px;text-transform:uppercase;letter-spacing:.22em;color:var(--gold);font-weight:700}.visual-copy h1{font:600 clamp(54px,6.8vw,92px)/.84 var(--serif);letter-spacing:-.04em;margin:22px 0 32px}.visual-copy h1 em{color:#d7c18b;font-weight:500}.visual-copy p{max-width:510px;color:rgba(255,255,255,.54);font-size:13px}.visual-number{position:absolute;right:-40px;bottom:-100px;font:600 330px/.8 var(--serif);color:rgba(255,255,255,.03)}.visual-foot{position:relative;color:rgba(255,255,255,.35);font-size:8px;letter-spacing:.15em;text-transform:uppercase}.login-panel{display:grid;place-items:center;background:var(--ivory);padding:40px}.login-card{width:min(420px,100%)}.login-card h2{font:600 50px/1 var(--serif);color:var(--navy);margin:14px 0}.login-card>p{color:var(--muted);font-size:12px;margin-bottom:34px}.login-card form{display:grid;gap:20px}.login-card label{display:grid;gap:8px;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.13em}.login-card input{border:0;border-bottom:1px solid var(--line);background:transparent;padding:12px 0;outline:0;font-size:13px}.login-card input:focus{border-color:var(--gold)}.login-card button{min-height:52px;border:0;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:9px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;cursor:pointer}.login-card button:disabled{opacity:.6}.login-status{min-height:18px;color:#a64747;font-size:10px!important;margin:0!important}.login-card aside{border-left:2px solid var(--gold);background:#ece6d9;padding:13px 16px;margin-top:25px}.login-card aside strong{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--navy)}.login-card aside p{font-size:9px;color:var(--muted);margin:5px 0}.back{display:inline-block;margin-top:30px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.1em;text-decoration:none}@media(max-width:800px){.login-shell{grid-template-columns:1fr}.login-visual{min-height:330px;padding:28px 24px}.visual-copy{margin-top:70px}.visual-copy h1{font-size:52px;margin-bottom:18px}.visual-copy p,.visual-foot{display:none}.login-panel{padding:60px 24px}.visual-number{font-size:220px}.login-card h2{font-size:43px}}

/* Titanium login layout hardening */
html,body{max-width:100%;overflow-x:hidden}body{min-width:280px}.login-shell,.login-visual,.login-panel,.login-card,.login-brand>div,.visual-copy{min-width:0}.login-shell{grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr)}.login-visual{min-height:100svh}.login-visual:before,.visual-number{pointer-events:none}.login-brand{width:max-content;max-width:100%}.login-brand div{min-width:0}.login-brand strong,.login-brand small{overflow-wrap:anywhere}.visual-copy h1,.login-card h2{overflow-wrap:anywhere;text-wrap:balance}.visual-copy p,.login-card>p,.login-card aside p{overflow-wrap:anywhere}.login-panel{min-height:100svh;padding:clamp(28px,5vw,64px)}.login-card input{width:100%;min-width:0}.login-card button{width:100%;gap:16px}.back{line-height:1.5}:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

@media(max-width:900px){
  .login-shell{grid-template-columns:minmax(0,1fr)}.login-visual{min-height:clamp(320px,44svh,440px);padding:28px clamp(22px,6vw,48px)}.visual-copy{margin:clamp(48px,9vh,86px) 0 0}.visual-copy h1{font-size:clamp(46px,9vw,66px);margin-block:16px 20px}.visual-copy p{display:none}.visual-foot{display:none}.login-panel{min-height:auto;padding:clamp(48px,9vw,76px) clamp(22px,7vw,56px)}
}

@media(max-width:480px){
  .login-visual{min-height:300px;padding:22px 18px}.login-brand>span{width:41px;height:41px;font-size:26px}.login-brand small{letter-spacing:.08em}.visual-copy{margin-top:52px}.visual-copy h1{font-size:clamp(40px,12vw,52px);line-height:.88}.visual-number{right:-25px;bottom:-55px;font-size:180px}.login-panel{padding:48px 18px}.login-card h2{font-size:clamp(38px,12vw,46px)}.login-card>p{margin-bottom:28px}.login-card aside{padding:12px}.back{margin-top:24px}
}

@media(max-height:620px) and (min-width:901px){
  .login-visual{padding-block:26px}.visual-copy h1{font-size:clamp(48px,6vw,70px);margin-block:14px 20px}.visual-copy p{margin-bottom:0}.login-panel{padding-block:28px}.login-card h2{font-size:42px}.login-card>p{margin-bottom:24px}.login-card form{gap:14px}.login-card aside{margin-top:16px}.back{margin-top:18px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   TITANIUM PROFESSIONAL CORRECTIONS v2.0
   Contraste, stacking, retícula y estabilidad visual sin fallos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Contraste y legibilidad ─────────────────────────────────────────── */
:root {
  --navy:#061a33 !important;
  --gold:#b89a54 !important;
  --gold-muted:rgba(184,154,84,.5) !important;
  --ivory:#f0ece3 !important;
  --ink:#101622 !important;
  --muted:#5b6677 !important;
  --line:#d4cdbf !important;
  --serif:'Cormorant Garamond',Georgia,serif !important;
  --sans:'Inter',system-ui,sans-serif !important;
}

.login-visual {
  background: linear-gradient(135deg,#020a14,#072040 55%,#0e3158) !important;
}

.login-visual:before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 70% 42%,rgba(184,154,84,.22),transparent 28%),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) !important;
  background-size: auto,75px 75px,75px 75px !important;
  pointer-events: none !important;
}

.visual-copy h1 em {
  color: #e0cf9e !important;
}

.visual-copy h1 {
  letter-spacing: -.04em !important;
}

.visual-copy p {
  color: rgba(255,255,255,.58) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.1);
}

.eyebrow {
  color: #a3843c !important;
  letter-spacing: .22em !important;
}

.login-card h2 {
  color: #0a2547 !important;
}

.login-panel {
  background: #f0ece3 !important;
}

.login-card input {
  border-bottom-color: #d4cdbf !important;
}

.login-card input:focus {
  border-bottom-color: #b89a54 !important;
}

.login-card button {
  background: #0a2547 !important;
  min-height: 48px !important;
}

.login-card button:hover {
  background: #12395f !important;
}

.login-card button:disabled {
  opacity: .55 !important;
}

.login-card aside {
  background: #e8e2d4 !important;
  border-left-color: var(--gold-muted) !important;
}

.login-status {
  color: #a64747 !important;
}

/* ── 2. Stacking y z-index ──────────────────────────────────────────────── */
.login-visual:before,
.visual-number {
  pointer-events: none !important;
  user-select: none !important;
}

.visual-number {
  z-index: 0 !important;
}

.visual-copy {
  position: relative !important;
  z-index: 1 !important;
}

.login-brand {
  position: relative !important;
  z-index: 1 !important;
}

/* ── 3. Bloques y retícula – ajustes ──────────────────────────────────────── */
.login-shell {
  grid-template-columns: minmax(0,1.1fr) minmax(380px,.9fr) !important;
}

.login-visual {
  min-height: 100dvh !important;
  padding: 42px max(40px,6vw) !important;
}

.login-panel {
  min-height: 100dvh !important;
  padding: clamp(32px,5vw,60px) !important;
}

.login-card {
  width: min(440px,100%) !important;
}

.visual-copy {
  max-width: 680px !important;
}

.visual-copy h1 {
  font-size: clamp(48px,6.4vw,90px) !important;
}

/* ── 4. Overflows y clipping ────────────────────────────────────────────── */
.login-visual {
  overflow: hidden !important;
}

.login-shell {
  overflow: clip !important;
}

.visual-number {
  bottom: -80px !important;
  right: -30px !important;
  font-size: 300px !important;
}

/* ── 5. Breakpoints intermedios ──────────────────────────────────────────── */
@media(max-width:900px) and (min-width:601px){
  .login-shell {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .login-visual {
    min-height: clamp(300px,40svh,400px) !important;
    padding: 28px 24px !important;
  }
  .visual-copy {
    margin-top: 48px !important;
  }
  .visual-copy h1 {
    font-size: clamp(44px,8vw,60px) !important;
  }
  .visual-copy p {
    display: none !important;
  }
  .login-panel {
    min-height: auto !important;
    padding: 48px 24px !important;
  }
}

@media(max-width:480px){
  .login-shell {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .login-visual {
    min-height: 280px !important;
    padding: 22px 16px !important;
  }
  .visual-copy {
    margin-top: 38px !important;
  }
  .visual-copy h1 {
    font-size: clamp(38px,12vw,50px) !important;
    line-height: .86 !important;
  }
  .visual-number {
    font-size: 160px !important;
    right: -20px !important;
    bottom: -50px !important;
  }
  .login-panel {
    padding: 40px 16px !important;
  }
  .login-card h2 {
    font-size: 40px !important;
  }
}

@media(max-height:620px) and (min-width:901px){
  .login-visual {
    padding-block: 24px !important;
  }
  .visual-copy h1 {
    font-size: clamp(44px,5.4vw,66px) !important;
    margin-block: 12px 16px !important;
  }
  .login-panel {
    padding-block: 24px !important;
  }
  .login-card h2 {
    font-size: 38px !important;
  }
  .login-card>p {
    margin-bottom: 18px !important;
  }
  .login-card form {
    gap: 12px !important;
  }
}

/* ── 6. Modo reducido de movimiento ────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}