/* Experiência app: retrato no celular; paisagem no tablet; rotação sem trocar de interface. */
.app-screen { min-height: 100vh; min-height: 100svh; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(ellipse at 16% 4%, var(--c-glow), var(--c-clear) 55%), linear-gradient(160deg, var(--n-50), var(--n-100)); }
.app-brand-area { flex: 0 0 auto; padding: max(36px, env(safe-area-inset-top)) 26px 18px; }
.app-brand { display: block; width: 188px; max-width: 58vw; height: auto; }
.app-brand-line { display: none; }
.app-main-area { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; padding: 28px 26px 26px; }
.app-content { width: min(100%, 440px); margin: 0 auto; }
.app-screen .card-heading { text-align: left; margin-bottom: 34px; }
.app-screen .card-heading h1 { font-size: clamp(28px, 7vw, 35px); font-weight: 700; letter-spacing: -.85px; line-height: 1.16; margin-bottom: 10px; }
.app-screen .card-heading p { font-size: 15px; }
.app-screen .field { margin-bottom: 22px; }
.app-screen input { min-height: 56px; background: var(--c-surface); }
.app-screen .btn-primary { min-height: 56px; margin-top: 30px; }
.app-screen .card-note { margin-top: 30px; padding-top: 0; border: 0; }
.app-footer { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 4px 26px max(24px, env(safe-area-inset-bottom)); color: var(--c-muted); font-size: 12px; }
.app-footer a { color: var(--c-accent); font-weight: 600; text-decoration: none; }
.app-footer a:hover { text-decoration: underline; }
.app-home-top { margin-bottom: auto; }
.app-home-top .app-brand { margin-bottom: 26px; }
.app-home { justify-content: center; }
.app-home .app-content { padding: 26px 0; }
.app-home .home-description { text-align: left; }
@media (min-width: 650px) and (orientation: portrait) { .app-brand-area { padding-left: max(60px, env(safe-area-inset-left)); padding-right: max(60px, env(safe-area-inset-right)); } .app-main-area { padding-left: 60px; padding-right: 60px; justify-content: center; } .app-brand { width: 230px; } }
@media (min-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  .app-screen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; background: var(--n-50); }
  .app-brand-area { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(44px, 6vw, 96px); background: radial-gradient(ellipse at 20% 20%, var(--c-glow), var(--c-clear) 60%), linear-gradient(150deg, var(--n-150), var(--n-100)); border-right: 1px solid var(--c-border); }
  .app-brand { width: min(310px, 100%); max-width: none; }
  .app-brand-line { display: block; max-width: 390px; margin: 34px 0 0; color: var(--n-800); font-size: clamp(22px, 2.7vw, 34px); font-weight: 600; line-height: 1.3; }
  .app-main-area { grid-column: 2; grid-row: 1; justify-content: center; padding: max(36px, env(safe-area-inset-top)) clamp(36px, 5vw, 84px) 16px; }
  .app-content { max-width: 420px; }
  .app-screen .card-heading h1 { font-size: clamp(29px, 3vw, 36px); }
  .app-footer { grid-column: 2; grid-row: 2; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
}
@media (max-height: 560px) and (orientation: landscape) { .app-brand-area { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: 0; } .app-brand { width: 150px; } .app-main-area { justify-content: flex-start; padding-top: 12px; } .app-screen .card-heading { margin-bottom: 18px; } .app-screen .card-heading h1 { font-size: 24px; } .app-screen .field { margin-bottom: 12px; } .app-screen .btn-primary { margin-top: 16px; } .app-screen .card-note { margin-top: 18px; } }
.app-security .app-main-area { justify-content: flex-start; padding-top: 12px; }
.app-security .app-content { padding-bottom: 20px; }
.app-security .card-heading { margin-bottom: 26px; }
.app-security .security-secondary { margin-top: 20px; }
@media (min-width: 900px) and (min-height: 600px) and (orientation: landscape) { .app-security .app-main-area { justify-content: center; padding-top: 36px; } }

/* Formulários extensos rolam sem deslocar a marca no tablet/desktop horizontal. */
@media (min-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  .app-security { height: 100vh; height: 100dvh; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
  .app-security .app-brand-area { min-height: 0; }
  .app-security .app-main-area { display: block; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}