/* Referência funcional/visual: login.php e css/gme-web.css do GME Web.
   No celular: cartão central, bloco de logo de 118px e formulário abaixo.
   Identidade V-Bus e layout desktop existentes preservados. */
@media (max-width: 1024px) {
    html { width: 100%; min-height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body {
        width: 100%;
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
        background: linear-gradient(135deg, #e1e7ec 0%, #f2f5f7 52%, #fff 100%);
    }
    .shell {
        width: min(420px, 100%);
        min-width: 0;
        min-height: 0;
        height: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 118px auto;
        gap: 12px;
        padding: 12px;
        margin: auto;
        border: 1px solid #9aabb8;
        border-radius: 10px;
        background: linear-gradient(135deg, #e6ecf1 0%, #f3f6f8 52%, #fff 100%);
        overflow: visible;
    }
    .story {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 0;
        padding: 12px;
        border: 1px solid rgba(255,255,255,.8);
        border-radius: 14px;
        background: linear-gradient(145deg, #fff, #edf6fb);
        box-shadow: inset 0 1px 0 #fff, 0 12px 28px rgba(8,44,71,.12);
        overflow: hidden;
    }
    .story::before {
        content: '';
        position: absolute;
        right: -22px;
        bottom: -44px;
        width: 78%;
        height: 58%;
        background: linear-gradient(170deg, rgba(0,177,228,.2), rgba(8,44,71,.14));
        transform: rotate(-9deg);
    }
    .brand {
        position: relative;
        z-index: 1;
        display: block;
        width: min(74%, 230px);
        max-width: 100%;
        padding: 0;
        border-radius: 0;
        background: transparent;
    }
    .brand img { width: 100%; height: auto; max-height: 88px; object-fit: contain; }
    .story-content, .story footer { display: none; }
    .access {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;
        padding: 20px 16px 18px;
        border-radius: 14px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 12px 28px rgba(8,44,71,.10);
        justify-content: flex-start;
    }
    .form-wrap { width: 100%; min-width: 0; max-width: none; margin: 0; }
    .eyebrow { font-size: 12px; letter-spacing: 1.5px; }
    h2 { font-size: 25px; line-height: 1.25; margin: 12px 0 10px; }
    .intro { font-size: 16px; line-height: 1.5; margin-bottom: 20px; }
    label { display: block; font-size: 16px; line-height: 1.4; margin: 16px 0 7px; }
    input {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 11px 12px;
        font-size: 16px;
        border-radius: 10px;
        background: #fcfdfd;
    }
    button { min-height: 48px; font-size: 16px; line-height: 1.4; margin-top: 22px; padding: 12px 14px; }
    .switch { font-size: 15px; line-height: 1.6; margin: 18px 0; }
    .switch a { display: inline-block; padding: 6px 0; }
    .note, small { font-size: 13px; line-height: 1.5; }
    .note { margin-top: 18px; }
    .error { font-size: 15px; overflow-wrap: anywhere; }
    .access-footer { font-size: 12px; line-height: 1.5; margin-top: 20px; }
}