/* ====================================================================
   LOGIN — wwwroot/css/login.css
   Conceito "Split Hero" (DARK): painel esquerdo de marca com foto de
   fundo (background-login.png) sob overlay direcional cobre + grid,
   glow laranja e partículas; painel direito com card glassmorphism.
   Inspirado no Nimo, 100% adaptado à identidade do Minerva.
   Design System: #99582A (cobre), #F27405 (accent), Inter, raios 12–14px,
   color-mix() para derivar tons da cor primária. Animações de entrada
   escalonadas (respeitam prefers-reduced-motion).
   Tokens --color-* vindos de colors.css (carregado antes deste arquivo).
   ==================================================================== */

.lg-split {
    /* ---- tokens locais derivados da paleta do projeto ---- */
    --lg-copper:        var(--color-primary);        /* #99582A */
    --lg-copper-light:  var(--color-primary-light);  /* #CC8F66 */
    --lg-copper-200:    var(--color-primary-200);    /* #E6AB85 */
    --lg-copper-100:    var(--color-primary-100);    /* #F2D0B5 */
    --lg-copper-700:    var(--color-primary-700);    /* #5C351A */
    --lg-accent:        var(--color-nav-dark-font);  /* #F27405 (laranja da marca) */

    --lg-r-card:  14px;
    --lg-r-field: 12px;
    --lg-r-pill:  999px;
    --lg-t: .18s cubic-bezier(.4, 0, .2, 1);

    /* superfícies do painel direito — DARK MODE (tons quentes derivados do primary)
       hierarquia de profundidade: fundo (quase-preto) < card (elevado) < input < botão */
    --lg-pane-bg:    #110a07;                                              /* quase-preto quente */
    --lg-card-bg:    color-mix(in srgb, var(--color-primary-800) 30%, #16100b); /* superfície elevada */
    --lg-field-bg:   rgba(255, 255, 255, .035);
    --lg-field-bd:   rgba(255, 255, 255, .09);
    --lg-text:       rgba(255, 255, 255, .94);
    --lg-text-soft:  rgba(255, 255, 255, .5);

    position: relative;
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--lg-text);
}

/* ════════════════════════════════════════════════════════════
   PAINEL ESQUERDO — HERO DE MINERAÇÃO
   ════════════════════════════════════════════════════════════ */
.lg-hero {
    position: relative;
    flex: 0 0 62%;
    max-width: 62%;
    display: flex;
    flex-direction: column;
    padding: clamp(2rem, 4vw, 3.75rem);
    overflow: hidden;
    color: #fff;
    background-color: #140c06;
    /* overlay DIRECIONAL: escuro à esquerda (legibilidade do texto),
       revelando a imagem à direita — dá profundidade sem "lavar" */
    background-image:
        linear-gradient(102deg, rgba(12, 7, 3, .9) 0%, rgba(18, 11, 5, .58) 44%, rgba(20, 12, 6, .2) 74%, rgba(12, 7, 3, .42) 100%),
        url('/images/background-login.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ---- camadas gráficas de fundo (grid + arte da mina + brilho) ---- */
.lg-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    animation: lgFadeIn 1.3s ease both;
}

/* grid técnico — bem discreto (quase imperceptível, como no Nimo) */
.lg-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--lg-copper-200) 3.5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--lg-copper-200) 3.5%, transparent) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(105% 85% at 22% 22%, #000 18%, transparent 68%);
            mask-image: radial-gradient(105% 85% at 22% 22%, #000 18%, transparent 68%);
}

/* glow laranja suave no canto inferior esquerdo (estilo Nimo) */
.lg-hero__glow {
    position: absolute;
    width: 58%;
    height: 58%;
    left: -14%;
    bottom: -18%;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--lg-accent) 24%, transparent) 0%, transparent 60%);
    filter: blur(14px);
    animation: lgGlow 9s ease-in-out infinite alternate;
}

/* partículas discretas */
.lg-particle {
    position: absolute;
    border-radius: 50%;
    background: color-mix(in srgb, var(--lg-accent) 75%, #fff);
    box-shadow: 0 0 8px 1px color-mix(in srgb, var(--lg-accent) 55%, transparent);
    opacity: .45;
    animation: lgFloat 8s ease-in-out infinite;
}
.lg-particle:nth-of-type(1) { width: 5px; height: 5px; left: 16%; top: 34%; animation-delay: 0s;   }
.lg-particle:nth-of-type(2) { width: 3px; height: 3px; left: 64%; top: 22%; animation-delay: 1.4s; }
.lg-particle:nth-of-type(3) { width: 4px; height: 4px; left: 78%; top: 58%; animation-delay: 2.6s; }
.lg-particle:nth-of-type(4) { width: 3px; height: 3px; left: 30%; top: 70%; animation-delay: 3.4s; }
.lg-particle:nth-of-type(5) { width: 6px; height: 6px; left: 50%; top: 46%; animation-delay: 1.9s; opacity: .3; }
.lg-particle:nth-of-type(6) { width: 3px; height: 3px; left: 88%; top: 38%; animation-delay: .7s;  }

/* ---- conteúdo do hero ---- */
.lg-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* marca topo */
.lg-brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    animation: lgFadeDown .7s cubic-bezier(.22, 1, .36, 1) both;
}
.lg-brand__logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    padding: 3px;
}
.lg-brand__name {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: .01em;
    color: #fff;
}
.lg-brand__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lg-accent);
    box-shadow: 0 0 14px 2px color-mix(in srgb, var(--lg-accent) 70%, transparent);
}

/* bloco central: eyebrow + slogan + lead */
.lg-hero__center {
    margin-top: auto;
    margin-bottom: auto;
    padding: 1.75rem 0;
    max-width: 30rem;
}
.lg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--lg-accent);
    animation: lgFadeUp .7s cubic-bezier(.22, 1, .36, 1) .05s both;
}
.lg-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--lg-accent), transparent);
}
.lg-hero__title {
    margin: 1rem 0 .95rem;
    font-size: clamp(2.4rem, 3.8vw, 3.6rem);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #fff;
    text-wrap: balance;
    animation: lgFadeUp .8s cubic-bezier(.22, 1, .36, 1) .12s both;
}
.lg-hero__title .accent {
    background: linear-gradient(95deg, var(--lg-copper-light) 0%, var(--lg-accent) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--lg-accent);
}
.lg-hero__lead {
    margin: 0;
    max-width: 42ch;
    font-size: 1.02rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
    animation: lgFadeUp .8s cubic-bezier(.22, 1, .36, 1) .2s both;
}

/* chips de funcionalidades */
.lg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: auto;
}
.lg-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--lg-r-pill);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    transition: transform var(--lg-t), background var(--lg-t), border-color var(--lg-t), box-shadow var(--lg-t);
    animation: lgFadeUp .6s cubic-bezier(.22, 1, .36, 1) backwards;
}
.lg-chip i {
    font-size: .82rem;
    color: var(--lg-copper-light);
}
.lg-chip:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .07);
    border-color: color-mix(in srgb, var(--lg-accent) 40%, transparent);
    box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--lg-accent) 55%, transparent);
}
.lg-chip:nth-child(1) { animation-delay: .28s; }
.lg-chip:nth-child(2) { animation-delay: .34s; }
.lg-chip:nth-child(3) { animation-delay: .40s; }
.lg-chip:nth-child(4) { animation-delay: .46s; }
.lg-chip:nth-child(5) { animation-delay: .52s; }
.lg-chip:nth-child(6) { animation-delay: .58s; }

/* ════════════════════════════════════════════════════════════
   PAINEL DIREITO — FORMULÁRIO
   ════════════════════════════════════════════════════════════ */
.lg-pane {
    position: relative;
    flex: 1 1 38%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    background:
        radial-gradient(55% 45% at 50% 42%, color-mix(in srgb, var(--lg-copper) 9%, transparent) 0%, transparent 72%),
        linear-gradient(165deg, #16100b 0%, #110a07 56%, #0c0704 100%);
}

/* card premium — superfície elevada flutuando sobre o fundo quase-preto */
.lg-card {
    position: relative;
    width: 100%;
    max-width: 424px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, transparent 18%),
        color-mix(in srgb, var(--lg-card-bg) 92%, transparent);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--lg-r-card);
    padding: clamp(2rem, 3vw, 2.85rem);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .06) inset,
        0 2px 8px rgba(0, 0, 0, .35),
        0 36px 80px -24px rgba(0, 0, 0, .7),
        0 12px 40px -20px color-mix(in srgb, var(--lg-copper) 40%, transparent);
    animation: lgSlideRight .75s cubic-bezier(.22, 1, .36, 1) both;
}

.lg-card .lg-eyebrow {
    color: var(--lg-copper-light);
    animation: none;
}
.lg-card .lg-eyebrow::before {
    background: linear-gradient(90deg, var(--lg-copper-light), transparent);
}

.lg-card__title {
    margin: .95rem 0 .45rem;
    font-size: 1.95rem;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.1;
    color: var(--lg-text);
}
.lg-card__sub {
    margin: 0 0 1.9rem;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--lg-text-soft);
}

/* resumo de validação / erros */
.lg-alert {
    margin-bottom: 1.1rem;
    padding: .7rem .9rem;
    border-radius: 10px;
    font-size: .86rem;
    color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-danger) 26%, transparent);
}
.lg-alert:empty { display: none; }

/* ---- campos ---- */
.lg-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .82rem 1rem;
    margin-bottom: 1.15rem;
    background: var(--lg-field-bg);
    border: 1.5px solid var(--lg-field-bd);
    border-radius: var(--lg-r-field);
    transition: border-color var(--lg-t), box-shadow var(--lg-t), background var(--lg-t);
    animation: lgFadeUp .55s cubic-bezier(.22, 1, .36, 1) .32s both;
}
/* hover sutil (sem foco) */
.lg-field:hover:not(:focus-within) {
    background: rgba(255, 255, 255, .055);
    border-color: rgba(255, 255, 255, .16);
}
/* foco: cor principal do projeto (cobre) + glow muito leve */
.lg-field:focus-within {
    background: rgba(255, 255, 255, .05);
    border-color: var(--lg-copper-light);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--lg-copper) 16%, transparent),
        0 0 18px -6px color-mix(in srgb, var(--lg-copper) 45%, transparent);
}
.lg-field__icon {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    font-size: .95rem;
    color: var(--lg-text-soft);
    transition: color var(--lg-t);
}
.lg-field:focus-within .lg-field__icon { color: var(--lg-copper-light); }

.lg-field__body {
    position: relative;
    flex: 1;
    min-width: 0;
}
.lg-field__label {
    display: block;
    margin: 0 0 2px;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--lg-text-soft) 85%, transparent);
    transition: color var(--lg-t);
}
.lg-field:focus-within .lg-field__label { color: var(--lg-copper-light); }

/* o input em si — anula a aparência do Bootstrap */
.lg-field__input,
.lg-field__input.form-control {
    width: 100%;
    border: 0 !important;
    background: transparent !important;
    padding: .1rem 0 .05rem !important;
    margin: 0;
    box-shadow: none !important;
    outline: none !important;
    font-size: .98rem;
    font-weight: 500;
    color: var(--lg-text) !important;
    line-height: 1.3;
}
.lg-field__input::placeholder { color: color-mix(in srgb, var(--lg-text-soft) 52%, transparent); font-weight: 400; }

/* autofill: manter fundo do campo, não o azul do navegador */
.lg-field__input:-webkit-autofill,
.lg-field__input:-webkit-autofill:hover,
.lg-field__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--lg-text) !important;
    caret-color: var(--lg-text);
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    transition: background-color 9999s ease-out 0s;
}

/* botão mostrar/ocultar senha (hook .password-toggle)
   sobrescreve o posicionamento absoluto herdado de site.css (.card-login legado)
   para manter o ícone como filho flex em fluxo, reservando espaço no campo */
.lg-field.password-toggle-wrapper .password-toggle {
    position: static;
    transform: none;
    top: auto;
    right: auto;
}
.lg-field .password-toggle {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--lg-text-soft);
    padding: 4px 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: color var(--lg-t), background var(--lg-t);
}
.lg-field .password-toggle:hover { color: var(--lg-copper-light); background: rgba(255, 255, 255, .06); }
.lg-field .password-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-copper) 20%, transparent); }

/* mensagens de validação por campo */
.lg-field-error { display: block; min-height: 0; margin: -.6rem 0 .9rem .2rem; font-size: .78rem; color: var(--color-danger); }
.lg-field-error:empty { margin: 0; }

/* ---- linha lembrar-me / esqueci ---- */
.lg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .85rem 0 1.9rem;
    animation: lgFadeUp .55s cubic-bezier(.22, 1, .36, 1) .42s both;
}

/* switch lembrar-me (usa ~ por causa do hidden input do asp-for bool) */
.lg-switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; user-select: none; }
.lg-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.lg-switch__track {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: var(--lg-r-pill);
    background: color-mix(in srgb, var(--lg-text-soft) 35%, transparent);
    transition: background var(--lg-t);
    flex-shrink: 0;
}
.lg-switch__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform var(--lg-t);
}
.lg-switch input:checked ~ .lg-switch__track {
    background: linear-gradient(135deg, var(--lg-copper-light), var(--lg-copper));
}
.lg-switch input:checked ~ .lg-switch__track::after { transform: translateX(18px); }
.lg-switch input:focus-visible ~ .lg-switch__track { box-shadow: 0 0 0 4px color-mix(in srgb, var(--lg-copper) 18%, transparent); }
.lg-switch__label { font-size: .88rem; font-weight: 500; color: var(--lg-text); }

.lg-link {
    font-size: .85rem;
    font-weight: 600;
    color: var(--lg-copper-200);
    text-decoration: none;
    transition: color var(--lg-t);
}
.lg-link:hover { color: var(--lg-accent); text-decoration: underline; }

/* ---- botão Entrar premium ---- */
.lg-submit {
    position: relative;
    width: 100%;
    border: 0;
    border-radius: var(--lg-r-field);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-top: .25rem;
    padding: 1.05rem 1.25rem;
    background: linear-gradient(135deg, var(--lg-copper-light) 0%, var(--lg-copper) 52%, var(--lg-copper-700) 100%);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, .3),
        0 12px 30px -8px color-mix(in srgb, var(--lg-copper) 58%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .24);
    transition: transform var(--lg-t), box-shadow var(--lg-t), filter var(--lg-t);
    animation: lgFadeUp .55s cubic-bezier(.22, 1, .36, 1) .54s backwards;
}
/* brilho deslizante */
.lg-submit::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-18deg);
    transition: left .6s cubic-bezier(.22, 1, .36, 1);
}
.lg-submit:hover {
    transform: translateY(-2px);
    filter: saturate(1.06) brightness(1.04);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, .32),
        0 18px 44px -8px color-mix(in srgb, var(--lg-copper) 62%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .3);
}
.lg-submit:hover::before { left: 130%; }
.lg-submit:active { transform: translateY(0); }
.lg-submit:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--lg-copper) 28%, transparent); }
.lg-submit i { transition: transform var(--lg-t); }
.lg-submit:hover i { transform: translateX(3px); }

.lg-card__foot {
    margin: 1.8rem 0 0;
    padding-top: 1.3rem;
    border-top: 1px solid rgba(255, 255, 255, .05);
    text-align: center;
    font-size: .78rem;
    letter-spacing: .01em;
    color: color-mix(in srgb, var(--lg-text-soft) 80%, transparent);
}

/* ════════════════════════════════════════════════════════════
   ANIMAÇÕES
   ════════════════════════════════════════════════════════════ */
@keyframes lgSlideRight { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes lgFadeUp     { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes lgFadeDown   { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes lgFadeIn     { from { opacity: 0; } to { opacity: 1; } }
@keyframes lgGlow       { from { opacity: .5; transform: scale(1); } to { opacity: 1; transform: scale(1.08); } }
@keyframes lgFloat      { 0%, 100% { transform: translateY(0); opacity: .3; } 50% { transform: translateY(-12px); opacity: .6; } }

/* ════════════════════════════════════════════════════════════
   RESPONSIVO
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .lg-hero { flex-basis: 56%; max-width: 56%; }
}

/* tablet/mobile: esconde o hero e usa a imagem como FUNDO do painel
   (overlay escuro p/ legibilidade) — a imagem aparece sem precisar rolar
   a página (body tem overflow:hidden) */
@media (max-width: 991.98px) {
    .lg-hero { display: none; }
    .lg-pane {
        flex: 1 1 100%;
        background-color: var(--lg-pane-bg);
        background-image:
            linear-gradient(180deg, rgba(17, 10, 7, .55) 0%, rgba(15, 9, 5, .8) 48%, rgba(11, 6, 3, .96) 100%),
            url('/images/background-login.png');
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }
    .lg-card { max-width: 430px; }
}

/* logo de marca dentro do card — só aparece quando o hero some */
.lg-card__brand { display: none; }
@media (max-width: 991.98px) {
    .lg-card__brand {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .6rem;
        margin-bottom: 1.4rem;
    }
    .lg-card__brand img { width: 44px; height: 44px; object-fit: contain; }
    .lg-card__brand span { font-size: 1.35rem; font-weight: 800; color: var(--lg-text); }
}

@media (max-width: 480px) {
    /* mantém o card de vidro (legível e premium sobre a imagem de fundo) */
    .lg-pane { padding: 1.25rem; }
    .lg-card { max-width: 100%; padding: 1.6rem 1.5rem; }
    .lg-card__title { font-size: 1.6rem; }
}

/* telas de altura baixa (notebooks): compacta AMBOS os lados p/ nada cortar.
   o gargalo é a altura total do card + padding do pane esticar o .lg-split
   (que tem overflow:hidden) — por isso reduzimos sobretudo os paddings verticais */
@media (min-width: 992px) and (max-height: 840px) {
    /* hero */
    .lg-hero { padding: 1.75rem clamp(2rem, 3.5vw, 3.25rem); }
    .lg-hero__center { padding: 1rem 0; }
    .lg-hero__title { font-size: clamp(2.1rem, 3vw, 2.9rem); margin: .7rem 0 .7rem; }
    .lg-hero__lead { font-size: .95rem; line-height: 1.5; }
    .lg-chip { padding: .42rem .8rem; font-size: .78rem; }
    .lg-chips { gap: .5rem; }
    /* form (direita) */
    .lg-pane { align-items: safe center; padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .lg-card { padding: 1.6rem 1.9rem; }
    .lg-card__title { font-size: 1.7rem; margin: .7rem 0 .35rem; }
    .lg-card__sub { margin-bottom: 1.25rem; }
    .lg-field { margin-bottom: .8rem; padding: .68rem 1rem; }
    .lg-row { margin: .6rem 0 1.2rem; }
    .lg-submit { padding: .9rem 1.25rem; }
    .lg-card__foot { margin-top: 1.1rem; padding-top: 1rem; }
}
@media (min-width: 992px) and (max-height: 660px) {
    /* hero */
    .lg-hero__title { font-size: clamp(1.9rem, 2.6vw, 2.4rem); }
    .lg-hero__lead { display: none; }
    .lg-hero__center { padding: .4rem 0; }
    /* form (direita) — mais enxuto ainda */
    .lg-pane { padding-top: 1rem; padding-bottom: 1rem; }
    .lg-card { padding: 1.35rem 1.7rem; }
    .lg-card__title { font-size: 1.5rem; margin: .55rem 0 .3rem; }
    .lg-card__sub { margin-bottom: .95rem; font-size: .88rem; }
    .lg-field { margin-bottom: .65rem; }
    .lg-row { margin: .45rem 0 .95rem; }
    .lg-card__foot { margin-top: .85rem; padding-top: .8rem; }
}

/* respeita preferências de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .lg-split *,
    .lg-split *::before,
    .lg-split *::after {
        animation: none !important;
        transition: none !important;
    }
}