/* ════════════════════════════════════════════════════════════════════════
   auth-login.css — FORTE GROUP / FORTEONE Login F10 Final Integration
   Scope: body.auth-body + .auth-login-shell
   Dependencias: Bootstrap Icons 1.10.0 + static/images/auth/forte-aerial-factory.jpg
   Contrato preservado: Flask-WTF, CSRF, data-theme-toggle, forteAuthTheme, v=2.0
   ════════════════════════════════════════════════════════════════════════ */

:root {
    --lg-forte-logo-w: clamp(14rem, 28vw, 38rem); /* DARK hero logo width */
    --lg-forte-f-frac: 0.22;                      /* F char width / total logo width (tuneable) */
    --lg-rule-cap-offset: 0.3rem;                 /* hairline: offset to align with statement cap-height */
    --lg-forte-light-logo-w: clamp(10rem, 17vw, 22rem); /* LIGHT hero logo width — governs ONE size + grid row */

    /* R-3.J / F-7D — tokens tipográficos auth-local
       ForteInter disponible desde forte-fonts.css cargado en base_auth.html.
       No dependen de lg-forte-tokens.css; aislamiento auth preservado. */
    --auth-forte-font:         "ForteInter", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --auth-forte-font-display: "ForteInter", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    /* auth-scope fallback for rgba(var(--forte-teal-rgb), ...) — UI-GLOBAL-02A */
    --forte-teal-rgb: 5, 63, 67;
    /* auth-scope fallback FORTE cream RGB — UI-GLOBAL-02A-HF1 */
    --auth-cream-rgb: 242, 239, 235;
}

html {
    min-height: 100%;
    overflow-x: hidden;
    background: #140608;
}

body.auth-body {
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.auth-login-shell,
.auth-login-shell *,
.auth-login-shell *::before,
.auth-login-shell *::after {
    box-sizing: border-box;
}

.auth-login-shell {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: grid;
    color: var(--auth-text-primary);
    background: var(--auth-bg);
    isolation: isolate;
}

/* ════════════════════════════════════════════════════════════════════════
   TOKENS — Identidad FORTE extraída del pack visual
   ════════════════════════════════════════════════════════════════════════ */
.auth-login-shell[data-auth-theme="forte-dark"] {
    --auth-bg: #140608;
    --auth-bg-2: #1b0a0b;
    --auth-ink: #140608;
    --auth-cream: #f2efeb;            /* FORTE canonical cream · UI-GLOBAL-02A */
    --auth-cream-rgb: 242, 239, 235;  /* FORTE cream RGB — UI-GLOBAL-02A-HF1 */
    --auth-card-bg: rgba(28, 10, 11, .54);
    --auth-card-border: rgba(var(--auth-cream-rgb), .18);
    --auth-input-bg: rgba(10, 3, 4, .30);
    --auth-input-border: rgba(var(--auth-cream-rgb), .22);
    --auth-input-border-focus: rgba(var(--auth-cream-rgb), .48);
    --auth-text-primary: var(--auth-cream);
    --auth-text-secondary: rgba(var(--auth-cream-rgb), .74);
    --auth-text-tertiary: rgba(var(--auth-cream-rgb), .52);
    --auth-line: rgba(var(--auth-cream-rgb), .18);
    --auth-line-soft: rgba(var(--auth-cream-rgb), .09);
    --auth-red: #b3342e;
    --auth-red-soft: rgba(179, 52, 46, .20);
    --auth-teal: #053f43;
    --auth-teal-text: #78b9b4;
    --auth-button-bg: var(--auth-cream);
    --auth-button-text: #140608;
    --auth-shadow: 0 36px 100px rgba(22, 9, 10, .28);
    --auth-radius: 2px;
    --auth-radius-card: 2px;
}

.auth-login-shell[data-auth-theme="forte-light"] {
    --auth-bg: #f2efeb;
    --auth-bg-2: #f7f5f1;
    --auth-ink: #140608;
    --auth-cream: #f4f0ec;
    --auth-card-bg: rgba(255, 255, 255, .82);
    --auth-card-border: rgba(20, 6, 8, .09);
    --auth-input-bg: rgba(255, 255, 255, .78);
    --auth-input-border: rgba(20, 6, 8, .18);
    --auth-input-border-focus: rgba(20, 6, 8, .42);
    --auth-text-primary: #140608;
    --auth-text-secondary: rgba(20, 6, 8, .68);
    --auth-text-tertiary: rgba(20, 6, 8, .46);
    --auth-line: rgba(20, 6, 8, .14);
    --auth-line-soft: rgba(20, 6, 8, .07);
    --auth-red: #b3342e;
    --auth-red-soft: rgba(179, 52, 46, .10);
    --auth-teal: #053f43;
    --auth-teal-text: #053f43;
    --auth-button-bg: #140608;
    --auth-button-text: #f4f0ec;
    --auth-shadow: 0 26px 70px rgba(20, 6, 8, .10);
    --auth-radius: 2px;
    --auth-radius-card: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   LAYOUT DARK / LIGHT
   ════════════════════════════════════════════════════════════════════════ */
.auth-login-shell[data-auth-theme="forte-dark"] {
    grid-template-columns: 58% 42%;
    background:
        radial-gradient(circle at 25% 55%, rgba(255,255,255,.025), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(179,52,46,.10), transparent 28%),
        linear-gradient(115deg, #0d0304 0%, #140608 58%, #1a090a 100%);
}

.auth-login-shell[data-auth-theme="forte-light"] {
    grid-template-columns: 52.5% 47.5%;
    background:
        linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.12)),
        #f2efeb;
}

.auth-brand-panel,
.auth-form-panel {
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
}

.auth-brand-panel {
    overflow: hidden;
    padding: clamp(28px, 2.6vw, 48px) clamp(40px, 4.8vw, 80px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
}

.auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(34px, 4.7vw, 78px) clamp(46px, 5vw, 86px);
    overflow: hidden;
    z-index: 2;
}

.auth-login-shell[data-auth-theme="forte-dark"] .auth-form-panel {
    align-items: center;
    justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════════
   DECORACIONES / BACKGROUNDS
   ════════════════════════════════════════════════════════════════════════ */
.auth-industrial-grid,
.auth-industrial-hairline,
.auth-orb,
.auth-orb-light,
.auth-vessel,
.auth-vignette-light,
.auth-aerial-factory {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.auth-industrial-grid {
    inset: 0;
    opacity: 0;
}

.auth-login-shell[data-auth-theme="forte-dark"] .auth-industrial-grid {
    opacity: .34;
    background:
        linear-gradient(90deg, rgba(var(--auth-cream-rgb),.07) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(0deg, rgba(var(--auth-cream-rgb),.052) 1px, transparent 1px) 0 0 / 64px 64px,
        radial-gradient(circle at 63% 28%, rgba(179,52,46,.18), transparent 23%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,.80), rgba(0,0,0,.26) 82%, transparent);
}

.auth-industrial-hairline {
    inset: 0;
    opacity: 0;
}

.auth-login-shell[data-auth-theme="forte-dark"] .auth-industrial-hairline {
    opacity: 1;
    /* F25: línea en el borde derecho del brand panel = delimita el espacio del form */
    background:
        linear-gradient(90deg, transparent 0 99.92%, rgba(var(--auth-cream-rgb),.14) 99.92%);
}

.auth-orb {
    opacity: 0;
}

.auth-login-shell[data-auth-theme="forte-dark"] .auth-orb {
    opacity: 0;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-industrial-grid {
    opacity: 1;
    inset: 0 -38vw 0 0;
    background:
        linear-gradient(90deg, rgba(20,6,8,.055) 1px, transparent 1px) 0 0 / 72px 72px,
        linear-gradient(0deg, rgba(20,6,8,.045) 1px, transparent 1px) 0 0 / 72px 72px,
        radial-gradient(circle at 84% 12%, transparent 0 144px, rgba(20,6,8,.09) 145px 146px, transparent 147px),
        radial-gradient(circle at 84% 12%, transparent 0 236px, rgba(20,6,8,.055) 237px 238px, transparent 239px);
    mask-image: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.72) 52%, rgba(0,0,0,.64));
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-industrial-hairline {
    opacity: 1;
    inset: 0 -34vw 0 0;
    background-image:
        radial-gradient(circle, rgba(20,6,8,.20) 1px, transparent 1.5px),
        linear-gradient(90deg, transparent 49.5%, rgba(20,6,8,.08) 49.6%, transparent 49.7%);
    background-size: 20px 20px, 100% 100%;
    background-position: right 92px top 80px, center;
    mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.2) 58%, rgba(0,0,0,.82));
}

.auth-aerial-factory { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   LIGHT — Aerial Factory Image (IMG tag, z-index > vignette)
   ════════════════════════════════════════════════════════════════════════ */
.auth-aerial-img-wrap {
    position: absolute;
    bottom: 54px; /* F36: clearance sobre el footer — foto no tapa el footer */
    left: 0;
    width: 100%;
    height: 80%;
    z-index: 2;
    display: none;
    overflow: hidden;
    pointer-events: none;
    /* F36: gradiente radial centrado en esquina inferior-izquierda
       → bordes izquierdo e inferior se ven enteros (sin corte),
         fade suave hacia arriba y hacia la derecha */
    -webkit-mask-image: radial-gradient(
        ellipse 90% 86% at 6% 96%,
        rgba(0,0,0,.90) 26%,
        rgba(0,0,0,.56) 54%,
        rgba(0,0,0,.18) 74%,
        transparent 88%
    );
    mask-image: radial-gradient(
        ellipse 90% 86% at 6% 96%,
        rgba(0,0,0,.90) 26%,
        rgba(0,0,0,.56) 54%,
        rgba(0,0,0,.18) 74%,
        transparent 88%
    );
}

.auth-aerial-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    opacity: .70;
    filter: saturate(.52) brightness(1.14) contrast(0.96);
    display: block;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-aerial-img-wrap {
    display: block;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-vignette-light {
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.28), transparent 32%);
    z-index: 1;
}

.auth-login-shell[data-auth-theme="forte-light"]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 54px;
    height: 1px;
    background: rgba(179,52,46,.78);
    z-index: 3;
}

.auth-login-shell[data-auth-theme="forte-light"]::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 112px;
    height: 54px;
    background: #053f43;
    z-index: 4;
}

.auth-orb-light,
.auth-vessel { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   BRAND TOPLINE
   ════════════════════════════════════════════════════════════════════════ */
.auth-brand-topline {
    position: relative;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 36px;
    color: var(--auth-text-primary);
}

.auth-brand-topline-logo {
    --topline-logo-h: clamp(1.05rem, 1.38vw, 1.58rem);
    font-size: 0;
    line-height: 1;
    display: inline-flex;
    align-items: baseline; /* F30: baseline mask=bottom-edge, GROUP=font-baseline → misma línea inferior */
    gap: clamp(0.22rem, 0.32vw, 0.42rem);
    position: relative; /* F40: ancla el ::after de la línea subrayada */
}

/* F40: DARK — línea subrayado bajo "Forte GROUP", color texto, fade hacia la derecha */
.auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-topline-logo::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: clamp(180px, 24vw, 360px); /* se extiende más allá del texto */
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(var(--auth-cream-rgb),.72) 0%,
        rgba(var(--auth-cream-rgb),.42) 48%,
        rgba(var(--auth-cream-rgb),.12) 76%,
        transparent 100%
    );
}

.auth-logo-forte-bold {
    font-weight: 800;
    font-size: clamp(1.04rem, 1.45vw, 1.42rem);
    letter-spacing: -.03em;
}

/* F22: height-based — control exacto para alineación con GROUP */
.auth-topline-forte-mask {
    display: inline-block;
    width: calc(var(--topline-logo-h) * 3.103); /* 1024/330 ≈ 3.103 */
    height: var(--topline-logo-h);
    background: var(--auth-cream);
    -webkit-mask: url("../images/auth/forte-logo-negro-1024x330.png") center / contain no-repeat;
            mask: url("../images/auth/forte-logo-negro-1024x330.png") center / contain no-repeat;
    flex-shrink: 0;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-topline-forte-mask {
    display: none; /* LIGHT topline uses auth-logo-forte-light text */
}

.auth-logo-group-thin {
    font-weight: 230;
    /* F28: 1.0 × topline-logo-h → cap-height ≈0.73× = 73% visual ratio respecto a FORTE mask */
    font-size: calc(var(--topline-logo-h, 1.3rem) * 1.0);
    letter-spacing: -.01em;
    line-height: 1;
}

.auth-logo-forte-light {
    display: none;
    font-weight: 790;
    font-size: clamp(1.72rem, 2.9vw, 2.85rem);
    letter-spacing: -.065em;
    color: #140608;
    font-family: var(--auth-forte-font-display); /* R-3.J / F-7D */
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-logo-forte-bold,
.auth-login-shell[data-auth-theme="forte-light"] .auth-logo-group-thin { display: none; }
.auth-login-shell[data-auth-theme="forte-light"] .auth-logo-forte-light { display: inline; }

.auth-brand-topline-sep {
    width: 1px;
    height: 30px;
    background: var(--auth-line);
}

.auth-brand-topline-label {
    font-size: .72rem;
    line-height: 1;
    letter-spacing: .04em;
    font-weight: 820;
    text-transform: uppercase;
}

.auth-brand-topline-rule {
    width: clamp(54px, 6vw, 100px);
    height: 1px;
    background: currentColor;
    opacity: .75;
}

.auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-topline-sep,
.auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-topline-label,
.auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-topline-rule {
    display: none;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-brand-topline {
    color: #140608;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-brand-topline-sep {
    background: rgba(20,6,8,.16);
}

/* ════════════════════════════════════════════════════════════════════════
   BRAND MAIN — DARK
   ════════════════════════════════════════════════════════════════════════ */
.auth-brand-main {
    position: relative;
    z-index: 5;
}

[data-theme-only="forte-light"] { display: none; }
.auth-login-shell[data-auth-theme="forte-light"] [data-theme-only="forte-dark"] { display: none; }
.auth-login-shell[data-auth-theme="forte-light"] [data-theme-only="forte-light"] { display: block; }

/* c3 FIX: Explicit suppression — DARK mode never shows LIGHT-only elements.
   Specificity of .auth-brand-main rule (0,2,0) would override [data-theme-only] (0,1,0)
   without this explicit override. */
.auth-login-shell[data-auth-theme="forte-dark"] [data-theme-only="forte-light"],
.auth-login-shell[data-auth-theme="forte-dark"] .auth-logo-forte-light {
    display: none !important;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* F22: grid exterior — col1 = logo exacto, col2 = regla+statement se expande */
.auth-brand-hero-mainline {
    display: grid;
    grid-template-columns: var(--lg-forte-logo-w) minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(0.8rem, 1.1vw, 1.6rem);
    width: 100%;
}

.auth-brand-we-forte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
}

.auth-brand-kicker {
    width: calc(var(--lg-forte-logo-w) * var(--lg-forte-f-frac));
    display: block;
    text-align: center;
    margin: 0 0 clamp(2px, .2vw, 3px);
    font-size: calc(var(--lg-forte-logo-w) * 0.060);
    line-height: 1; /* F26: altura exacta = font-size, padding-top formula correcta */
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: clamp(0.02em, 0.12vw, 0.07em);
    color: rgba(var(--auth-cream-rgb),.92);
    font-weight: 400;
    font-family: var(--auth-forte-font); /* R-3.J / F-7D */
}

/* .auth-brand-hero-word replaced by .auth-forte-wordmark (logo img) in F16 */

.auth-forte-wordmark {
    display: block;
    width: var(--lg-forte-logo-w);
    height: auto;
    flex-shrink: 0;
    /* DARK: invert black logo to cream-white via blend mode */
    filter: invert(1);
    mix-blend-mode: screen;
    -webkit-user-select: none;
    user-select: none;
}

@supports not (mix-blend-mode: screen) {
    .auth-forte-wordmark {
        /* fallback: tinted with CSS opacity, white logo on dark bg */
        filter: invert(1) sepia(0.08) brightness(0.95);
    }
}

/* F25: padding-top recalculado con kicker proporcional
   kicker-h = logo-w * 0.060  (line-height:1)
   margin   = clamp(2px, 0.2vw, 3px)
   wordmark-h = logo-w * 0.3223
   total = logo-w * (0.060 + 0.3223) + margin = logo-w * 0.3823 + margin */
.auth-brand-rule-statement {
    padding-top: calc(
        var(--lg-forte-logo-w) * 0.3823 +
        clamp(2px, 0.2vw, 3px)
    );
    display: grid;
    grid-template-columns: 1fr clamp(11rem, 14vw, 18rem);
    align-items: start;
    column-gap: clamp(0.8rem, 1vw, 1.2rem);
    min-width: 0;
}

.auth-brand-rule {
    display: block;
    height: 1px;
    background: rgba(var(--auth-cream-rgb),.55);
    /* F23: margin-top:0 — el padding-top del contenedor ya posiciona exactamente */
    margin-top: 0;
    min-width: 0;
}

.auth-brand-statement {
    margin: 0;
    color: rgba(var(--auth-cream-rgb),.88);
    font-size: clamp(1.05rem, 1.45vw, 1.72rem);
    line-height: 1.32; /* F-8: 1.22→1.32 — interlineado más cómodo */
    font-weight: 290;
    letter-spacing: -.015em; /* F-8: -.035em→-.015em — tracking menos comprimido */
    text-align: left;
    font-family: var(--auth-forte-font); /* R-3.J / F-7E */
    /* F22: sin max-width — ocupa su columna de grid */
}

.auth-brand-statement strong {
    font-weight: 680; /* F-8: 760→680 — reduce contraste extremo con peso 290 del padre */
}

/* ════════════════════════════════════════════════════════════════════════
   BRAND MAIN — LIGHT
   ════════════════════════════════════════════════════════════════════════ */
/* F38: selector estricto — solo aplica al section LIGHT, evita que DARK se cuele */
.auth-login-shell[data-auth-theme="forte-light"] .auth-brand-main[data-theme-only="forte-dark"] {
    display: none !important;
}
.auth-login-shell[data-auth-theme="forte-light"] .auth-brand-main[data-theme-only="forte-light"] {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* F38: flex-start + padding-top → bloque sube al tercio superior del panel */
    justify-content: flex-start;
    padding-top: clamp(2.5rem, 14vh, 16rem);
    margin-top: 0;
    color: #140608;
    position: relative;
    z-index: 5;
}

.auth-brand-wordmark {
    display: flex;
    align-items: flex-end;
    white-space: nowrap;
    letter-spacing: -.075em;
    color: #140608;
}

/* .auth-forte-logo-light: logo img in LIGHT FORTEONE wordmark */
.auth-forte-logo-light {
    display: block;
    /* F42: usa --lg-forte-light-logo-w para mantener ONE siempre acoplado */
    width: var(--lg-forte-light-logo-w);
    height: auto;
    flex-shrink: 0;
    mix-blend-mode: multiply;
    -webkit-user-select: none;
    user-select: none;
}

.auth-brand-wordmark .one {
    /* F42: font-size = logo-height = logo-width * 0.3223 (ratio 330/1024 del PNG)
       Derivado de --lg-forte-light-logo-w para que escale en todos los breakpoints
       sin desacoplarse nunca de la altura del logo */
    font-size: calc(var(--lg-forte-light-logo-w) * 0.3223);
    line-height: 1;
    font-weight: 200;
    letter-spacing: -.085em;
}

/* F39: misma arquitectura que DARK hero-mainline
   grid 2 col [wordmark auto | right-col 1fr]
   right-col tiene padding-top = altura renderizada del logo = logo-width * 0.3223
   y dentro un flex-row: [línea roja flex:1] [contenido ancho-fijo] */
.auth-brand-light-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    /* F43: single-row — wordmark y right-col en la misma fila.
       El spanning rows 1+2 del F41/F42 alineaba ONE al fondo del grid total
       (logo+contenido), desplazando la línea muy abajo. */
    align-items: start;
}

/* F43: wordmark col1 row1, sin spanning */
.auth-brand-light-hero .auth-brand-wordmark {
    grid-column: 1;
    grid-row: 1;
}

/* F43: right-col col2 row1 — misma fila que el wordmark.
   padding-top = baseline visual de ONE = logo-width × 0.3223 × (1 − descent)
   descent Segoe UI ≈ 0.243 → factor = 0.3223 × 0.757 ≈ 0.244
   0.248 es el valor cross-platform (Windows/macOS ≤ 1.5px de error) */
.auth-brand-light-right {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: flex-start;
    min-width: 0;
    padding-top: calc(var(--lg-forte-light-logo-w) * 0.248);
}

/* línea roja: desde el final de la E hasta el inicio del contenido */
.auth-brand-light-rule {
    flex: 1 1 auto;
    align-self: flex-start;
    height: 2px;
    background: #b3342e;
    min-width: clamp(1.5rem, 3vw, 4rem);
}

/* contenido a la derecha de la línea, top alineado con la línea */
.auth-brand-light-content {
    flex: 0 0 auto;
    width: clamp(13rem, 18vw, 22rem);
    padding-left: clamp(10px, 1.1vw, 18px);
}

.auth-brand-light-title {
    margin: 0 0 22px;
    color: #140608;
    font-size: clamp(1.42rem, 2.1vw, 2rem);
    line-height: 1.30; /* F-8: 1.22→1.30 — ritmo más cómodo en modo LIGHT */
    font-weight: 400;
    letter-spacing: -.025em;
    font-family: var(--auth-forte-font-display); /* R-3.J / F-7D */
}

.auth-brand-light-copy {
    margin: 0;
    max-width: 560px;
    color: rgba(20,6,8,.64);
    font-size: clamp(1rem, 1.27vw, 1.24rem);
    line-height: 1.48;
    font-weight: 390;
}

/* ════════════════════════════════════════════════════════════════════════
   BRAND FOOTER
   ════════════════════════════════════════════════════════════════════════ */
.auth-brand-footer {
    position: relative;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    color: var(--auth-text-tertiary);
    font-size: clamp(.72rem, .85vw, .92rem);
}

.auth-brand-footer-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-brand-footer-left i {
    font-size: 1.2rem;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-brand-footer-left { display: none; }
.auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-footer-right { display: none; }

.auth-login-shell[data-auth-theme="forte-light"] .auth-brand-footer {
    position: absolute;
    bottom: 14px;
    left: clamp(40px, 4.8vw, 80px);
    margin-bottom: 0;
    color: rgba(20,6,8,.44);
    font-size: .82rem;
}

/* ════════════════════════════════════════════════════════════════════════
   FORM PANEL / CARD
   ════════════════════════════════════════════════════════════════════════ */
.auth-card {
    position: relative;
    z-index: 6;
    width: min(100%, 560px);
    color: var(--auth-text-primary);
}

.auth-login-shell[data-auth-theme="forte-dark"] .auth-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-card {
    width: min(100%, 488px);
    padding: clamp(40px, 3.8vw, 56px) clamp(44px, 4.2vw, 60px);
    background: var(--forte-cream, #f2efeb);
    border: 1px solid rgba(20,6,8,.08);
    border-radius: 2px;
    box-shadow: 0 20px 60px rgba(20,6,8,.12);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.auth-card-icon,
.auth-secure-banner {
    display: none;
}

.auth-card-header {
    margin-bottom: clamp(24px, 3.2vw, 38px);
}

.auth-card-title {
    margin: 0;
    color: var(--auth-text-primary);
    font-size: clamp(2.5rem, 4.2vw, 5rem);
    line-height: 1.02;
    font-weight: 300;
    letter-spacing: -.045em;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-card-title {
    font-size: clamp(2.1rem, 2.8vw, 3.2rem);
    letter-spacing: -.035em;
    font-weight: 350;
}

.auth-card-subtitle {
    margin: .68rem 0 0;
    color: var(--auth-text-secondary);
    font-size: clamp(.96rem, 1.05vw, 1.08rem);
    line-height: 1.46;
}

.auth-card-header::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    margin-top: clamp(24px, 2.6vw, 32px);
    background: var(--auth-line);
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-card-header::after {
    display: none;
}

.auth-info-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    margin-bottom: 26px;
    padding: 0 22px;
    color: var(--auth-teal-text, #78b9b4);
    border: 1px solid rgba(var(--forte-teal-rgb), .28);
    background: rgba(var(--forte-teal-rgb), .07);
    border-radius: 2px;
    font-size: clamp(.9rem, 1vw, 1.02rem);
    transition: opacity .6s ease, max-height .5s ease .3s,
                margin-bottom .5s ease .3s, padding .5s ease .3s;
}

.auth-info-banner.auth-dismissing {
    opacity: 0;
    max-height: 0 !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
}

.auth-info-banner i {
    font-size: 1.2rem;
    opacity: .9;
    color: var(--auth-teal-text, #78b9b4);
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-info-banner {
    display: none;
}

.auth-form {
    display: block;
}

.auth-field-group {
    margin-bottom: 22px;
}

.auth-label {
    display: block;
    margin: 0 0 9px;
    color: var(--auth-text-primary);
    font-size: clamp(.88rem, 1vw, 1.03rem);
    font-weight: 450;
    line-height: 1.24;
}

.auth-password-wrapper {
    position: relative;
}

.auth-input {
    width: 100%;
    min-height: 56px;
    border: 1px solid var(--auth-input-border);
    border-radius: 2px;
    background: var(--auth-input-bg);
    color: var(--auth-text-primary);
    padding: 0 48px 0 22px;
    font: inherit;
    font-size: clamp(.98rem, 1.05vw, 1.07rem);
    letter-spacing: .01em;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.auth-input::placeholder {
    color: var(--auth-text-tertiary);
}

.auth-input:focus {
    border-color: var(--auth-input-border-focus);
    box-shadow: 0 0 0 3px rgba(179,52,46,.10);
}

.auth-pw-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--auth-text-tertiary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.auth-pw-toggle:hover {
    color: var(--auth-text-primary);
}

.auth-row-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 7px 0 26px;
    color: var(--auth-text-secondary);
    font-size: clamp(.88rem, .96vw, .98rem);
}

.auth-check-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.auth-check-label input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #140608;
    cursor: pointer;
}

.auth-login-shell[data-auth-theme="forte-dark"] .auth-check-label input {
    accent-color: var(--auth-cream);
}

.auth-forgot-link,
.auth-support-text a {
    color: var(--auth-text-tertiary);
    text-decoration: none;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-forgot-link,
.auth-login-shell[data-auth-theme="forte-light"] .auth-support-text a {
    color: #b3342e;
}

.auth-forgot-link:hover,
.auth-support-text a:hover {
    color: var(--auth-text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-cta {
    width: 100%;
    min-height: 62px;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: 2px;
    background: var(--auth-button-bg);
    color: var(--auth-button-text);
    font: inherit;
    font-size: clamp(.98rem, 1.05vw, 1.08rem);
    font-weight: 700;
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease, border-color .16s ease;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-cta {
    background: #140608;
    color: #efecea;
}

.auth-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.auth-divider {
    margin: 28px 0 25px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 22px;
    color: var(--auth-text-tertiary);
    font-size: .9rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    height: 1px;
    background: var(--auth-line);
}

.auth-card-footer {
    color: var(--auth-text-tertiary);
}

.auth-support-text {
    margin: 0;
    font-size: clamp(.88rem, 1vw, 1rem);
    line-height: 1.45;
}

.auth-card-secure-note {
    display: none;
}

.auth-legal-links {
    margin-top: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    color: var(--auth-text-tertiary);
    font-size: .86rem;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-card-footer {
    display: none;
}

.auth-page-legal,
.auth-language {
    position: absolute;
    z-index: 7;
    color: var(--auth-text-tertiary);
    font-size: .92rem;
}

.auth-page-legal {
    right: clamp(74px, 7vw, 130px);
    bottom: 36px;
    display: flex;
    gap: 18px;
    align-items: center;
}

.auth-language {
    right: clamp(22px, 3.2vw, 56px);
    bottom: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--auth-text-primary);
}

.auth-login-shell[data-auth-theme="forte-dark"] .auth-language {
    display: none;
}

.auth-login-shell[data-auth-theme="forte-dark"] .auth-page-legal {
    display: none;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-page-legal {
    bottom: 16px;
    right: 132px;
    font-size: .86rem;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-language {
    right: 0;
    bottom: 0;
    width: 112px;
    height: 54px;
    justify-content: center;
    color: rgba(242, 239, 235, .88);
    z-index: 8;
    gap: 8px;
}

/* LIGHT form refinements */
.auth-login-shell[data-auth-theme="forte-light"] .auth-form-panel {
    align-items: center;
    justify-content: center;
    padding-top: clamp(42px, 5.5vw, 92px);
    padding-bottom: 100px;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-info-banner,
.auth-login-shell[data-auth-theme="forte-light"] .auth-divider,
.auth-login-shell[data-auth-theme="forte-light"] .auth-row-options,
.auth-login-shell[data-auth-theme="forte-light"] .auth-card-icon,
.auth-login-shell[data-auth-theme="forte-light"] .auth-secure-banner {
    display: none;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-field-group {
    margin-bottom: 28px;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-label {
    font-weight: 460;
    font-size: 1rem;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-input {
    min-height: 58px;
    padding-left: 56px;
    padding-right: 54px;
    background: rgba(255,255,255,.54);
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-field-group:first-of-type,
.auth-login-shell[data-auth-theme="forte-light"] .auth-password-wrapper {
    position: relative;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-field-group:first-of-type::before,
.auth-login-shell[data-auth-theme="forte-light"] .auth-password-wrapper::before {
    font-family: "bootstrap-icons";
    position: absolute;
    z-index: 2;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(20,6,8,.62);
    font-size: 1.08rem;
    pointer-events: none;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-field-group:first-of-type::before {
    content: "\F4E1";
    top: calc(50% + 14px);
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-password-wrapper::before {
    content: "\F47A";
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-cta {
    margin-top: 16px;
    min-height: 62px;
}

.auth-forgot-center {
    display: none;
    margin-top: 24px;
    color: #b3342e;
    text-align: center;
    font-size: 1rem;
    text-decoration: none;
    line-height: 1.4;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-forgot-center {
    display: block;
}

/* DARK: hide elements not relevant in dark reference */
.auth-login-shell[data-auth-theme="forte-dark"] .auth-card-icon,
.auth-login-shell[data-auth-theme="forte-dark"] .auth-secure-banner,
.auth-login-shell[data-auth-theme="forte-dark"] .auth-card-secure-note {
    display: none;
}

/* DARK: card footer & support-text spacing */
.auth-login-shell[data-auth-theme="forte-dark"] .auth-card-footer {
    margin-top: 6px;
}

.auth-login-shell[data-auth-theme="forte-dark"] .auth-legal-links {
    margin-top: 22px;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .82rem;
}

/* ════════════════════════════════════════════════════════════════════════
   THEME TOGGLE
   ════════════════════════════════════════════════════════════════════════ */
.auth-theme-toggle {
    position: absolute;
    z-index: 20;
    top: 24px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--auth-line);
    background: rgba(255,255,255,.06);
    color: var(--auth-text-secondary);
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: .72rem;
    letter-spacing: .08em;
    cursor: pointer;
    opacity: .20;
    transition: opacity .15s ease, background .15s ease, border-color .15s ease;
}

.auth-theme-toggle:hover,
.auth-theme-toggle:focus-visible {
    opacity: 1;
    background: rgba(255,255,255,.12);
}

.auth-login-shell[data-auth-theme="forte-dark"] .auth-theme-toggle {
    top: auto;
    bottom: 22px;
    right: clamp(22px, 3.2vw, 46px);
    opacity: .15;
}

.auth-login-shell[data-auth-theme="forte-dark"] .auth-theme-toggle:hover,
.auth-login-shell[data-auth-theme="forte-dark"] .auth-theme-toggle:focus-visible {
    opacity: .85;
}

.auth-login-shell[data-auth-theme="forte-light"] .auth-theme-toggle {
    background: rgba(20,6,8,.04);
}

/* ════════════════════════════════════════════════════════════════════════
   ALERTS / ERRORS
   ════════════════════════════════════════════════════════════════════════ */
.auth-alerts {
    margin: -10px 0 22px;
    display: grid;
    gap: 10px;
}

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--auth-input-border);
    background: rgba(255,255,255,.035);
    color: var(--auth-text-secondary);
    border-radius: 2px;
    font-size: .9rem;
    line-height: 1.42;
}

.auth-alert--error,
.auth-alert--danger {
    color: #ffb5ad;
    border-color: rgba(179,52,46,.36);
    background: rgba(179,52,46,.10);
}

.auth-alert--success {
    color: #83c8b9;
    border-color: rgba(5,63,67,.36);
    background: rgba(5,63,67,.13);
}

/* c8: info and warning alerts — FORTE teal (PB-G5: reemplazado iOS blue) */
.auth-alert--info,
.auth-alert--warning {
    color: var(--auth-teal-text, #78b9b4);
    border-color: rgba(var(--forte-teal-rgb), .28);
    background: rgba(var(--forte-teal-rgb), .07);
}

/* Shared dismiss animation (info banners + autodismiss alerts) */
.auth-alert[data-auth-autodismiss].auth-dismissing {
    opacity: 0;
    max-height: 0 !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    transition: opacity .6s ease, max-height .5s ease .3s,
                margin-bottom .5s ease .3s, padding .5s ease .3s;
}

/* c9: simplified footer copy */
.auth-footer-copy {
    display: block;
    margin-top: 6px;
    font-size: .82rem;
    color: var(--auth-text-tertiary);
}

.auth-field-errors {
    margin-top: 8px;
    display: grid;
    gap: 3px;
}

.auth-field-error {
    color: #b3342e;
    font-size: .84rem;
}

/* ════════════════════════════════════════════════════════════════════════
   ACCESIBILIDAD / ESTADOS
   ════════════════════════════════════════════════════════════════════════ */
.auth-login-shell a:focus-visible,
.auth-login-shell button:focus-visible,
.auth-login-shell input:focus-visible {
    outline: 2px solid rgba(179,52,46,.72);
    outline-offset: 3px;
}

.auth-login-shell ::selection {
    background: rgba(179,52,46,.26);
}

@media (prefers-reduced-motion: reduce) {
    .auth-login-shell *,
    .auth-login-shell *::before,
    .auth-login-shell *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {
    .auth-input,
    .auth-cta,
    .auth-info-banner,
    .auth-card {
        border: 1px solid CanvasText;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE — F49: OVERLAY MODEL (DARK + LIGHT, todos los viewports)
   Estrategia: brand panel = fondo fullscreen absoluto con TODOS sus
   decoradores visibles y escalados. Form panel = overlay z-index:10
   transparente con pointer-events:none. Card = glass flotante centrada
   con scroll interno. Cero scroll de página.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1120px) {
    /* F49: shell — bloque único, altura exacta, position relative como raíz de overlay */
    .auth-login-shell,
    .auth-login-shell[data-auth-theme="forte-dark"],
    .auth-login-shell[data-auth-theme="forte-light"] {
        display: block;
        position: relative;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        scroll-snap-type: none;
    }

    /* F49: brand panel = fondo fullscreen, flex column, TODOS los elementos visibles */
    .auth-brand-panel,
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-panel {
        position: absolute;
        inset: 0;
        z-index: 1;
        min-height: 100dvh;
        max-height: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: clamp(14px, 3vh, 28px) clamp(16px, 5vw, 32px);
        overflow: hidden;
        align-items: flex-start;
        justify-content: flex-start;
        scroll-snap-align: none;
    }

    /* F49: form panel = overlay transparente, centrado, pointer-events:none */
    .auth-form-panel,
    .auth-login-shell[data-auth-theme="forte-light"] .auth-form-panel {
        position: absolute;
        inset: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: clamp(12px, 2dvh, 24px) clamp(12px, 4vw, 24px);
        background: transparent !important;
        overflow: hidden;
        pointer-events: none;
        min-height: auto;
        flex: none;
        scroll-snap-align: none;
    }

    /* F49: todos los hijos del form-panel recuperan pointer-events */
    .auth-form-panel > * {
        pointer-events: auto;
    }

    /* F49: imagen aérea LIGHT — VISIBLE, anclada al fondo, escalada */
    .auth-aerial-img-wrap {
        display: none; /* DARK: no hay aerial en dark, se mantiene oculta */
    }
    .auth-login-shell[data-auth-theme="forte-light"] .auth-aerial-img-wrap {
        display: block !important;
        position: absolute;
        bottom: 54px;
        left: 0;
        width: 100%;
        height: clamp(140px, 30dvh, 280px);
        z-index: 2;
        overflow: hidden;
        pointer-events: none;
        -webkit-mask-image: radial-gradient(
            ellipse 100% 90% at 10% 100%,
            rgba(0,0,0,.82) 20%,
            rgba(0,0,0,.48) 50%,
            rgba(0,0,0,.12) 72%,
            transparent 88%
        );
        mask-image: radial-gradient(
            ellipse 100% 90% at 10% 100%,
            rgba(0,0,0,.82) 20%,
            rgba(0,0,0,.48) 50%,
            rgba(0,0,0,.12) 72%,
            transparent 88%
        );
    }
    .auth-login-shell[data-auth-theme="forte-light"] .auth-aerial-img {
        object-position: center 35%;
        opacity: .58;
    }

    /* F49: topline FORTE GROUP / SOLUTIONS / BEYOND PLASTIC — visible, escalada */
    .auth-brand-topline {
        display: flex !important;
        flex-wrap: wrap;
        gap: clamp(8px, 2vw, 16px);
        font-size: clamp(.72rem, 2.2vw, .95rem);
    }
    .auth-brand-topline-rule {
        width: clamp(28px, 6vw, 56px);
    }

    /* F49: footer brand — visible, pegado al fondo del flex column */
    .auth-brand-footer {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        font-size: clamp(.7rem, 2vw, .85rem);
        z-index: 5;
        margin-top: auto;
        position: relative;
    }

    /* F49/F54/F55: hero DARK — wordmark Forte + kicker + rule+statement VISIBLES, escalados */
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-kicker {
        display: block !important;      /* flex-item blockificado */
        font-size: clamp(.78rem, 2.4vw, 1rem);
        width: auto;                    /* F55: sin ancho fijo que corte «We are» */
        overflow: visible;              /* F55: «We are» completo */
    }
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-rule-statement {
        display: flex !important;       /* F54: flex — rule crece en la fila */
        flex-direction: row;
        align-items: center;            /* F55: alinea línea y texto al eje vertical */
        gap: clamp(12px, 2.5vw, 24px); /* F55: separación regla–statement */
        width: 100%;
        max-width: none;
        padding-top: 0;                 /* F55: el align-items:center del hero-mainline posiciona */
    }
    /* F55: regla horizontal crece en contexto flex */
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-rule {
        flex: 1 1 auto;
        align-self: center;
        min-width: clamp(1.5rem, 4vw, 5rem);
    }
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-statement {
        font-size: clamp(.78rem, 2.4vw, .95rem);
        width: 100%;      /* F54: sin límite de ancho lateral */
        max-width: none;
    }
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-main {
        flex: 1 1 auto;   /* F54: franja superior crece; deja de ser flex:0 0 auto */
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-hero-mainline {
        grid-template-columns: auto minmax(0, 1fr); /* F54: statement crece al ancho útil */
        column-gap: clamp(10px, 3vw, 24px);
        align-items: center;
        width: 100%;
    }

    /* F49: logos DARK compactos en mobile */
    :root {
        --lg-forte-logo-w: clamp(8rem, 30vw, 13rem);
        --lg-forte-light-logo-w: clamp(7rem, 24vw, 12rem);
    }

    /* F49/F54: hero LIGHT — wordmark FORTEONE + rule + título + copy VISIBLES, escalados */
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-main[data-theme-only="forte-light"] {
        display: flex !important;
        flex: 1 1 auto;              /* F54: crece para llenar la franja */
        align-items: center;         /* F54: centra verticalmente */
        justify-content: center !important;  /* F54: vence (0,4,0) del desktop */
        padding-top: 0;              /* F54: sin padding-top que esquine arriba */
        width: 100%;
    }
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-light-hero {
        width: 100%;     /* F54: usa el ancho útil del panel */
        max-width: none;
    }
    /* F56: LIGHT light-right → columna (regla full-width + contenido debajo, sin overflow) */
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-light-right {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(6px, 1.2vh, 14px);
        padding-top: clamp(8px, 1.5dvh, 16px);
        width: 100%;
    }
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-light-rule {
        width: 100%;
        flex: none;
        min-width: 0;
    }
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-light-content {
        width: 100%;
        max-width: none;
        padding-left: 0;  /* F56: sin padding lateral en layout columna */
    }
    .auth-brand-light-title {
        font-size: clamp(.88rem, 2.8vw, 1.2rem);
    }
    .auth-brand-light-copy {
        font-size: clamp(.75rem, 2.2vw, .92rem);
    }

    /* F49: pseudos LIGHT — PRESERVADOS (no ocultar línea roja ni bloque teal) */
    .auth-login-shell[data-auth-theme="forte-light"]::after {
        display: block;
        bottom: 54px;
    }
    .auth-login-shell[data-auth-theme="forte-light"]::before {
        display: block;
        width: clamp(72px, 22vw, 112px);
        z-index: 5;
    }

    /* F49: card — overlay glass flotante centrada, scroll INTERNO */
    .auth-card,
    .auth-login-shell[data-auth-theme="forte-light"] .auth-card {
        width: min(90vw, 460px);
        max-height: calc(100dvh - clamp(24px, 4dvh, 48px));
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: clamp(20px, 3dvh, 32px) clamp(18px, 5vw, 28px);
        backdrop-filter: blur(28px) saturate(140%);
        -webkit-backdrop-filter: blur(28px) saturate(140%);
        box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
    }

    /* F49-DARK: form panel anclado al fondo → hero "We are / Forte" visible arriba */
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-form-panel {
        align-items: flex-end;
        justify-content: center;
        padding-bottom: clamp(16px, 3dvh, 32px);
    }

    /* DARK card: opacidad alta para legibilidad sobre brand panel */
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-card {
        background: rgba(20, 6, 8, .74);
        box-shadow: 0 24px 80px rgba(0, 0, 0, .52);
        max-height: calc(62dvh - clamp(16px, 3dvh, 32px));
    }

    /* LIGHT card: fondo blanco con alpha alta */
    .auth-login-shell[data-auth-theme="forte-light"] .auth-card {
        background: rgba(255, 255, 255, .86);
        box-shadow: 0 24px 80px rgba(20, 6, 8, .18);
    }

    /* F49: elementos del card — TODOS visibles, sin ocultar nada */
    .auth-card-icon {
        transform: scale(0.88);
        margin-bottom: 6px;
    }
    .auth-field-group {
        margin-bottom: clamp(10px, 1.5dvh, 18px);
    }

    /* F49: theme toggle — asegurar posición en overlay */
    .auth-theme-toggle {
        position: fixed;
        top: clamp(10px, 2vh, 20px);
        right: clamp(12px, 3vw, 24px);
        z-index: 20;
    }

    /* F49: @supports fallback — sin backdrop-filter, fondo sólido */
    @supports not (backdrop-filter: blur(1px)) {
        .auth-card {
            background: rgba(20, 6, 8, .92) !important;
        }
        .auth-login-shell[data-auth-theme="forte-light"] .auth-card {
            background: rgba(255, 255, 255, .96) !important;
        }
    }
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE — F55-IMPL: DARK HERO REDISTRIBUTION (901px–1120px)
   Restablece logo Forte, línea y statement con distribución visual óptima.
   Aplica SOLO a forte-dark. LIGHT sin cambios.
   DB-3, DB-2.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) and (max-width: 1120px) {
    /* F57: brand panel — reserva espacio del form overlay para centrar hero en zona superior */
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-panel {
        padding-bottom: calc(62dvh + clamp(16px, 3dvh, 32px));
    }

    .auth-login-shell[data-auth-theme="forte-dark"] {
        --lg-forte-logo-w: clamp(13rem, 36vw, 22rem);
    }

    /* F57: grid de 3 COLUMNAS DIRECTO — [FORTE | línea | statement] */
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-hero-mainline {
        display: grid;
        grid-template-columns:
            minmax(13rem, var(--lg-forte-logo-w))
            minmax(4rem, 1fr)
            minmax(10rem, 19rem);
        column-gap: clamp(1rem, 2vw, 2rem);
        align-items: start;
        width: min(100%, 64rem);
        max-width: calc(100vw - clamp(48px, 8vw, 96px));
        margin-inline: auto;
    }

    /* Columna 1: .auth-brand-we-forte ocupa su celda */
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-we-forte {
        grid-column: 1;
        min-width: 0;
        justify-self: start;
    }

    /* display: contents — promociona rule + statement como grid items del padre */
    /* Anula display:flex !important heredado del bloque ≤1120 */
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-rule-statement {
        display: contents !important;
    }

    /* Columna 2: línea — mínimo editorial 4rem, nunca invade FORTE ni statement */
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-rule {
        grid-column: 2;
        width: 100%;
        min-width: 4rem;
        max-width: none;
        align-self: start;
        flex: none;
    }

    /* Columna 3: statement — siempre alineado a la derecha */
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-statement {
        grid-column: 3;
        justify-self: end;
        text-align: right;
        width: 100%;
        max-width: 19rem;
        font-size: clamp(.92rem, 1.7vw, 1.15rem);
        line-height: 1.22;
    }

    /* F60: LIGHT 901–1120 — corregir elementos flotantes en zona media */
    .auth-login-shell[data-auth-theme="forte-light"]::after,
    .auth-login-shell[data-auth-theme="forte-light"]::before {
        display: none;
    }
    .auth-login-shell[data-auth-theme="forte-light"] .auth-aerial-img-wrap {
        bottom: 0;
        height: clamp(80px, 18dvh, 140px);
    }
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-footer {
        position: relative;
        inset: auto;
        bottom: auto;
        left: auto;
        margin-top: auto;
        z-index: 3;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE — F53: STACKED LAYOUT (DARK + LIGHT, ≤900px)
   Cambio arquitectónico: overlay (F49 ≤1120px) → layout apilado real.
   Franja superior = brand-panel (topline + hero centrado + footer).
   Franja inferior = form-panel (card/formulario).
   DB-3 (glass donde permitido), DB-2 (tokens --lg-*).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* ── 1. Shell: flex column, sin height fija, sin overflow:hidden ── */
    .auth-login-shell,
    .auth-login-shell[data-auth-theme="forte-dark"],
    .auth-login-shell[data-auth-theme="forte-light"] {
        display: flex !important;
        flex-direction: column;
        height: auto;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
    }

    /* ── 2. Brand-panel: franja superior en flujo, sin position:absolute ── */
    .auth-brand-panel,
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-panel {
        position: relative;
        inset: auto;
        width: 100%;
        flex-shrink: 0;
        min-height: clamp(280px, 46dvh, 480px);
        max-height: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: clamp(14px, 3dvh, 24px) clamp(16px, 5vw, 28px);
        overflow: hidden;
        align-items: flex-start;
        z-index: 1;
    }

    /* F54: LIGHT brand-panel — padding-bottom para que la foto no tape el footer */
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-panel {
        padding-bottom: clamp(120px, 26dvh, 210px);
    }

    /* F54: LIGHT brand-footer — position:relative para quedar sobre la foto y en flujo */
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-footer {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        margin-top: auto;
        z-index: 2;
    }

    /* ── 3. Brand-main: crece para llenar la zona entre topline y footer ── */
    .auth-login-shell .auth-brand-main {
        flex: 1;
        min-height: clamp(120px, 28dvh, 280px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* DARK: override flex:0 0 auto del bloque ≤1120px → flex:1 + centrado */
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-main {
        flex: 1;
        align-items: flex-start;
        justify-content: center;
    }

    /* LIGHT: override flex:0 0 auto + justify-content:flex-start del desktop */
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-main[data-theme-only="forte-light"] {
        flex: 1;
        align-items: flex-start;
        justify-content: center !important;
        padding-top: 0;
    }

    /* ── 4. Form-panel: franja inferior en flujo, sin position:absolute ── */
    .auth-form-panel,
    .auth-login-shell[data-auth-theme="forte-light"] .auth-form-panel {
        position: relative;
        inset: auto;
        width: 100%;
        flex-shrink: 0;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: clamp(20px, 3dvh, 36px) clamp(12px, 4vw, 24px) clamp(24px, 5dvh, 48px);
        background: transparent !important;
        pointer-events: auto;
        min-height: auto;
        overflow: visible;
        flex: none;
    }

    /* DARK form-panel: override align-items:flex-end del bloque ≤1120px */
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-form-panel {
        align-items: flex-start;
        padding-bottom: clamp(24px, 5dvh, 48px);
    }

    /* LIGHT form-panel: override padding-bottom:100px del desktop LIGHT */
    .auth-login-shell[data-auth-theme="forte-light"] .auth-form-panel {
        padding-bottom: clamp(24px, 5dvh, 48px);
    }

    /* ── 5. Hero DARK: dos columnas [logo | rule+statement] — preserva estructura horizontal ── */
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-hero-mainline {
        grid-template-columns: auto minmax(0, 1fr) !important;
        row-gap: 0;
        column-gap: clamp(8px, 2vw, 16px);
        align-items: center;
    }
    /* Rule-statement: flex fila — la regla crece entre el logo y el statement */
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-rule-statement {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 0;
        width: 100%;
        min-width: 0;
        padding-top: 0;
    }
    /* F57: Regla: ocupa espacio entre logo y statement, mínimo editorial 2rem */
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-rule {
        flex: 1 1 auto;
        align-self: center;
        min-width: clamp(2rem, 6vw, 4rem);
        max-width: none;
    }

    /* ── 6. Hero LIGHT: una columna, sin desborde horizontal ── */
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-light-hero {
        grid-template-columns: 1fr;
        row-gap: clamp(8px, 1.5dvh, 16px);
    }
    /* F55: light-right en columna → la línea roja se extiende full-width arriba del contenido */
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-light-right {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(6px, 1vh, 12px);
        padding-top: clamp(8px, 1.5dvh, 16px);
        width: 100%;
    }
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-light-rule {
        width: 100%;   /* F55: ocupa todo el ancho disponible */
        flex: none;
        min-width: 0;
    }
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-light-content {
        padding-left: 0;  /* F55: sin separación lateral en layout columna */
        width: 100%;
    }

    /* ── 7. Tipografía hero compacta ── */
    .auth-brand-statement {
        font-size: clamp(.92rem, 2.6vw, 1.15rem);
    }

    /* F55-FIX: DARK ≤900 — statement derecha, ancho contenido */
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-statement {
        text-align: right;
        flex: 0 0 auto;
        max-width: clamp(9rem, 40%, 14rem);
    }

    /* ── 8. Card: sin restricción overlay, tamaño natural ── */
    .auth-card,
    .auth-login-shell[data-auth-theme="forte-light"] .auth-card {
        max-height: none;
        overflow-y: visible;
        overflow-x: hidden;
        width: min(92vw, 480px);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-card {
        max-height: none;
        background: transparent;
        box-shadow: none;
    }
    .auth-login-shell[data-auth-theme="forte-light"] .auth-card {
        background: rgba(255, 255, 255, .86);
        box-shadow: 0 12px 48px rgba(20, 6, 8, .14);
    }

    /* ── 9. Imagen aérea LIGHT: anclada al fondo del brand-panel ── */
    .auth-login-shell[data-auth-theme="forte-light"] .auth-aerial-img-wrap {
        display: block !important;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: clamp(100px, 24dvh, 200px);
        z-index: 0;
        pointer-events: none;
    }

    /* ── 10. Theme toggle: posición fija ── */
    .auth-theme-toggle {
        position: fixed;
        top: clamp(10px, 2vh, 20px);
        right: clamp(12px, 3vw, 24px);
        z-index: 20;
    }

    /* ── 11. @supports fallback ── */
    @supports not (backdrop-filter: blur(1px)) {
        .auth-login-shell[data-auth-theme="forte-light"] .auth-card {
            background: rgba(255, 255, 255, .96) !important;
        }
    }

    /* F60: LIGHT ≤900 — ocultar pseudos flotantes */
    .auth-login-shell[data-auth-theme="forte-light"]::after,
    .auth-login-shell[data-auth-theme="forte-light"]::before {
        display: none !important;
    }
}

/* F49: ≤680px — colapso vertical del hero, ajustes de escala */
@media (max-width: 680px) {
    /* Hero DARK ≤680px: mantiene 2 columnas, gap reducido */
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-hero-mainline {
        column-gap: clamp(6px, 1.5vw, 12px);
    }
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-rule-statement {
        align-items: center;
    }

    /* Hero LIGHT: right-col debajo del wordmark */
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-light-hero {
        flex-direction: column;
        gap: clamp(6px, 1.5vh, 12px);
    }
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-light-right {
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
    }

    .auth-brand-topline {
        gap: clamp(6px, 1.5vw, 12px);
        flex-wrap: wrap;
        font-size: clamp(.65rem, 2vw, .85rem);
    }
    .auth-brand-topline-rule { width: clamp(20px, 5vw, 42px); }

    :root {
        --lg-forte-logo-w: clamp(7rem, 28vw, 11rem);
        --lg-forte-light-logo-w: clamp(6rem, 22vw, 10rem);
    }

    /* Card: ancho completo en estrecho */
    .auth-card,
    .auth-login-shell[data-auth-theme="forte-light"] .auth-card {
        width: min(92vw, 440px);
        padding: clamp(16px, 2.5dvh, 26px) clamp(14px, 4vw, 24px);
    }

    .auth-row-options {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Footer brand: ocultar copyright, mantener "Internal" */
    .auth-brand-footer-right { display: none; }
}

/* F50/F53/F54: ≤640px — brand-panel compacto, statement compacto */
@media (max-width: 640px) {
    .auth-brand-panel,
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-panel {
        min-height: clamp(220px, 40dvh, 360px);
    }
    /* F54: foto LIGHT más pequeña → padding-bottom escalado */
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-panel {
        padding-bottom: clamp(100px, 22dvh, 180px);
    }
    .auth-brand-statement {
        font-size: clamp(.84rem, 3vw, 1rem);
        line-height: 1.32;
    }
    .auth-brand-light-content {
        width: 100%;
    }
    .auth-login-shell .auth-brand-main {
        min-height: clamp(140px, 30dvh, 260px);
    }
}

/* F49: ≤480px — escalado extremo, mínimos */
@media (max-width: 480px) {
    :root {
        --lg-forte-logo-w: clamp(6rem, 28vw, 9rem);
        --lg-forte-light-logo-w: clamp(5rem, 20vw, 8rem);
    }

    .auth-brand-panel {
        padding: clamp(10px, 2dvh, 18px) 14px; /* F53: padding compacto para stacked layout */
        min-height: clamp(180px, 36dvh, 300px);
    }
    /* F54: foto LIGHT ≤480px más compacta */
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-panel {
        padding-bottom: clamp(80px, 20dvh, 160px);
    }

    .auth-card-icon {
        transform: scale(0.75);
        margin-bottom: 2px;
    }
    .auth-card-header { margin-bottom: 8px; }
    .auth-card-title { font-size: clamp(1.5rem, 7vw, 2rem); }
    .auth-field-group { margin-bottom: clamp(8px, 1.2dvh, 14px); }
    .auth-row-options { margin: 2px 0 8px; }
    .auth-info-banner { min-height: 40px; margin-bottom: 8px; padding: 0 12px; font-size: .85rem; }
    .auth-cta { min-height: 50px; }

    /* Decorador teal ::before escalado para ≤480px */
    .auth-login-shell[data-auth-theme="forte-light"]::before {
        width: clamp(64px, 20vw, 90px);
        height: 46px;
    }

    .auth-secure-banner { font-size: .78rem; min-height: 32px; }

    /* F50: ≤480px — statement sin <br> forzados, LIGHT compacto */
    .auth-brand-statement br { display: none; }
    .auth-brand-statement {
        font-size: clamp(.78rem, 3.4vw, .92rem);
    }
    .auth-brand-light-rule {
        min-width: 0;
        max-width: clamp(20px, 8vw, 60px);
    }
    .auth-brand-light-title {
        font-size: clamp(.95rem, 3.4vw, 1.15rem);
    }
    .auth-brand-light-copy {
        font-size: clamp(.72rem, 2.6vw, .85rem);
    }

    /* F53: franja superior escalada */
    .auth-login-shell .auth-brand-main {
        min-height: clamp(120px, 30dvh, 240px);
    }

    /* F60: LIGHT ≤480 — foto compacta, footer escalado */
    .auth-login-shell[data-auth-theme="forte-light"] .auth-aerial-img-wrap {
        height: clamp(72px, 14dvh, 130px);
        opacity: .72;
    }
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-footer {
        font-size: clamp(.62rem, 2.5vw, .72rem);
    }
}

/* F49: ≤380px — extremo */
/* F52: franja superior escalada */
@media (max-width: 380px) {
    :root {
        --lg-forte-logo-w: clamp(5rem, 26vw, 7.5rem);
        --lg-forte-light-logo-w: clamp(4.5rem, 18vw, 7rem);
    }
    .auth-brand-panel { padding: 8px 12px; min-height: clamp(160px, 32dvh, 260px); } /* F53 */
    /* F54: foto LIGHT mínima */
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-panel {
        padding-bottom: clamp(70px, 18dvh, 130px);
    }
    .auth-card,
    .auth-login-shell[data-auth-theme="forte-light"] .auth-card {
        padding: clamp(14px, 2.5dvh, 22px) clamp(12px, 3vw, 18px);
    }
    .auth-card-title { font-size: clamp(1.4rem, 7vw, 1.8rem); }
    .auth-login-shell .auth-brand-main {
        min-height: clamp(100px, 26dvh, 200px);
    }
    /* F57: DARK ≤380px — ocultar línea (espacio editorial insuficiente) */
    .auth-login-shell[data-auth-theme="forte-dark"] .auth-brand-rule {
        display: none;
    }

    /* F60: LIGHT ≤380 — ocultar foto para evitar saturación */
    .auth-login-shell[data-auth-theme="forte-light"] .auth-aerial-img-wrap {
        display: none;
    }
}

/* F49: ≤320px — extremo absoluto */
/* F52: franja superior mínima */
@media (max-width: 320px) {
    :root {
        --lg-forte-logo-w: clamp(5rem, 28vw, 7rem);
        --lg-forte-light-logo-w: clamp(4rem, 18vw, 6rem);
    }
    .auth-brand-panel { padding: 6px 10px; min-height: clamp(140px, 28dvh, 220px); } /* F53 */
    .auth-card,
    .auth-login-shell[data-auth-theme="forte-light"] .auth-card {
        width: 96vw;
        padding: 12px;
    }
    .auth-secure-banner { display: none; }

    /* F50: ≤320px — versión mínima sin statement ni light-content */
    .auth-brand-statement,
    .auth-brand-light-content {
        display: none;
    }

    /* F53: franja superior mínima */
    .auth-login-shell .auth-brand-main {
        min-height: clamp(80px, 22dvh, 160px);
    }

    /* F60: LIGHT ≤320 — ocultar footer si compromete usabilidad */
    .auth-login-shell[data-auth-theme="forte-light"] .auth-brand-footer {
        display: none;
    }
}

/* F49: landscape protection — móviles en horizontal (≤600px alto): NO ocultar nada, solo compactar */
@media (max-height: 600px) and (max-width: 1120px) {
    .auth-card-header { margin-bottom: 6px; }
    .auth-card-title { font-size: clamp(1.3rem, 4vh, 1.7rem); }
    .auth-card,
    .auth-login-shell[data-auth-theme="forte-light"] .auth-card {
        max-height: calc(100dvh - 12px);
        padding: 14px clamp(14px, 4vw, 22px);
    }
    .auth-card-icon { transform: scale(0.72); margin-bottom: 0; }
    .auth-field-group { margin-bottom: clamp(6px, 1vh, 10px); }
    .auth-info-banner { min-height: 32px; margin-bottom: 6px; font-size: .8rem; }
    .auth-cta { min-height: 44px; }
    :root {
        --lg-forte-logo-w: clamp(5rem, 18vh, 9rem);
        --lg-forte-light-logo-w: clamp(4rem, 14vh, 7rem);
    }
    .auth-brand-panel { padding: 8px 14px clamp(4px, 6vh, 40px) 14px; }
}

/* F49: UHD ≥2560px */
@media (min-width: 2560px) {
    :root { --lg-forte-logo-w: min(44rem, 26vw); }
    .auth-card,
    .auth-login-shell[data-auth-theme="forte-light"] .auth-card {
        width: min(100%, 640px);
    }
}

/* F49: prefers-reduced-motion — ya cubierto globalmente arriba */

/* F49: @supports fallback sin backdrop-filter (desktop) */
@supports not (backdrop-filter: blur(1px)) {
    @media (min-width: 1121px) {
        .auth-card {
            background: rgba(20, 6, 8, .95);
        }
        .auth-login-shell[data-auth-theme="forte-light"] .auth-card {
            background: rgba(255, 255, 255, .98);
        }
    }
}

/* ==========================================================================
   UI-GLOBAL-02R-OVERLAY-D — editorial wordmark for public login DARK
   Añadido: 2026-05-26
   Alcance: solo hero DARK (.auth-brand-main--editorial), no toca LIGHT ni form
   ========================================================================== */

/* Wordmark editorial SVG — hero DARK */
.auth-editorial-wordmark {
    display:        block;
    height:         clamp(52px, 7.5vw, 88px);
    width:          auto;
    max-width:      min(340px, 72vw);
    object-fit:     contain;
    /* cream en DARK mediante filter (SVG usa fill: currentColor / .cls-1) */
    filter:         brightness(0) saturate(0) invert(1);
    transition:     filter 0.25s ease;
}

/* Defensivo: si alguien fuerza LIGHT sobre este elemento — ink */
[data-auth-theme="forte-light"] .auth-editorial-wordmark {
    filter:         brightness(0);
}

/* Hairline estructural OVERLAY-D */
.auth-brand-rule--editorial {
    display:        block;
    width:          1px;
    height:         clamp(28px, 4vh, 44px);
    background:     rgba(242, 239, 235, 0.28);  /* --forte-cream @ 28% */
    flex-shrink:    0;
}

/* Contenedor rule + kicker — alineación vertical */
.auth-brand-rule-statement--editorial {
    display:        flex;
    flex-direction: row;
    align-items:    center;
    gap:            clamp(10px, 1.5vw, 18px);
}

/* Kicker operativo */
.auth-editorial-kicker {
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          rgba(242, 239, 235, 0.68);  /* --forte-cream @ 68% — WCAG AA */
    line-height:    1.4;
    margin:         0;
    transition:     color 0.25s ease;
}

/* Layout hero-mainline editorial — fila flex */
.auth-brand-hero-mainline--editorial {
    display:        flex;
    flex-direction: row;
    align-items:    center;
    gap:            clamp(14px, 2vw, 28px);
    width:          100%;
}

/* ── Responsive OVERLAY-D: ≤1120px ──────────────────────────────────────── */
@media (max-width: 1120px) {
    .auth-editorial-wordmark {
        height:     clamp(44px, 6.5vw, 72px);
    }
}

/* ── Responsive OVERLAY-D: ≤900px — mobile stack ────────────────────────── */
@media (max-width: 900px) {
    .auth-brand-hero-mainline--editorial {
        flex-direction: column;
        align-items:    flex-start;
        gap:            clamp(8px, 2vw, 14px);
    }

    .auth-brand-rule-statement--editorial {
        flex-direction: row;
        align-items:    center;
    }

    .auth-brand-rule--editorial {
        width:          clamp(28px, 8vw, 52px);
        height:         1px;
    }

    .auth-editorial-wordmark {
        height:     clamp(36px, 5.5vw, 54px);
    }
}

/* ── Responsive OVERLAY-D: ≤680px ───────────────────────────────────────── */
@media (max-width: 680px) {
    .auth-editorial-wordmark {
        height:     clamp(30px, 7.5vw, 46px);
    }

    .auth-editorial-kicker {
        font-size:  10px;
    }
}

/* ── prefers-reduced-motion — anular transiciones OVERLAY-D ─────────────── */
@media (prefers-reduced-motion: reduce) {
    .auth-editorial-wordmark,
    .auth-editorial-kicker {
        transition: none;
    }
}

/* ==========================================================================
   UI-GLOBAL-02R-OVERLAY-D-HF1 — restore DARK hero composition
   Añadido: 2026-05-26
   Restaura la composición anterior del hero DARK (We are / Forte PNG / statement EN).
   Las clases --editorial de OVERLAY-D quedan definidas pero sin targets activos en HTML.
   Añade .auth-brand-operation-kicker alineado a la derecha en el grid del statement.
   ========================================================================== */

/* Operation kicker — FORTEONE · Entorno interno de operaciones
   Se coloca como 3.er hijo del grid auth-brand-rule-statement (grid-column: 1/-1)
   para abarcar ambas columnas y forzar text-align: right */
.auth-brand-operation-kicker {
    grid-column:    1 / -1;
    margin:         clamp(8px, 1vh, 14px) 0 0;
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          rgba(242, 239, 235, 0.52);
    line-height:    1.4;
    text-align:     right;
}

/* HF1: ≤680px — escala mínima */
@media (max-width: 680px) {
    .auth-brand-operation-kicker {
        font-size: 9px;
    }
}

/* HF1: ≤380px — ocultar si el espacio es insuficiente */
@media (max-width: 380px) {
    .auth-brand-operation-kicker {
        display: none;
    }
}