body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: linear-gradient(160deg, #c5e7ff, #6bc0f8);
}

.escena {
    width: min(980px, 100%);
    min-height: 600px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--blanco);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 59, 111, .18);
}

/* Panel de marca: misma gradiente que el hero de las demás pantallas */
.marca {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 32px;
    color: #fff;
    text-align: center;
    background: linear-gradient(150deg, var(--azul-claro), var(--azul-medio) 55%, var(--azul));
    overflow: hidden;
}

.marca svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.marca > *:not(svg) { position: relative; }

.placa {
    background: #a7c5d6;
    border-radius: var(--r-tarjeta);
    padding: 14px 20px;
    box-shadow: 0 10px 30px rgba(0, 40, 90, .25);
}

.placa img { display: block; width: 210px; max-width: 60vw; height: auto; }
.marca h2 { margin: 0; font-size: 22px; }
.marca p { margin: 0; max-width: 280px; font-size: 14px; opacity: .95; }

.panel { display: flex; align-items: center; justify-content: center; padding: 40px 44px; }
.vista { width: 100%; max-width: 340px; }
.vista[hidden] { display: none; }

h1 { margin: 0 0 4px; color: var(--azul-oscuro); font-size: 28px; }
.sub { margin: 0 0 22px; color: var(--suave); font-size: 14px; }

form label { margin: 14px 0 5px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.boton.bloque { margin-top: 22px; }

.sr { position: absolute; left: -9999px; }

#codigo {
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: .5em;
    padding-left: .5em;
}

.pie { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--suave); }

.demo {
    margin-top: 14px;
    padding: 10px 14px;
    border: 1px solid var(--aviso-borde);
    border-radius: 12px;
    background: var(--aviso-fondo);
    color: var(--aviso);
    font-size: 12px;
}

.demo strong { font-size: 15px; letter-spacing: .2em; }

@media (max-width: 760px) {
    body { padding: 0; place-items: stretch; }
    .escena { grid-template-columns: 1fr; border-radius: 0; min-height: 100vh; }
    .marca { padding: 28px 20px 44px; gap: 8px; }
    .marca h2, .marca p { display: none; }
    .panel { padding: 28px 22px 40px; margin-top: -24px; background: #fff; border-radius: 24px 24px 0 0; position: relative; }
}