/* Página de entrada (/conta/entrar/): entrar ou criar conta numa página própria, sem o menu do site.
   Duas metades no computador (a entrada e, em papel, o que a conta guarda); uma só coluna no telemóvel, com a
   entrada primeiro. Os passos (entrada, código, newsletter) trocam dentro de #enPasso (assets/js/conta-entrar.js). */
.pg-entrar { margin: 0; padding: 0; background: #ffffff; color: #1d1d1f; font-family: 'Geist', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.pg-entrar *, .pg-entrar *::before, .pg-entrar *::after { box-sizing: border-box; }
.en { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

/* ---- a metade da entrada */
.en-lado { display: flex; flex-direction: column; min-width: 0; padding: 0 1.25rem; }
.en-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 64px; flex: none; }
.en-logo { display: inline-flex; align-items: center; min-height: 44px; }
.en-logo img { display: block; width: 128px; height: 32px; }
.en-voltar { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px; padding: 0 0.875rem; margin-right: -0.875rem; border-radius: 999px; font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; color: #6e6e73; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; }
.en-voltar:hover { background: #f5f5f7; color: #1d1d1f; }
.en-centro { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.5rem 0 2.5rem; }
.en-caixa { width: 100%; max-width: 25rem; }
/* Tostão com a chave, por cima da caixa de entrada; some em ecrãs baixos para a caixa nunca sair do primeiro ecrã */
.en-centro { flex-direction: column; }
.en-tostao { width: 100%; max-width: 25rem; margin-bottom: 0.875rem; line-height: 0; }
.en-tostao img { width: 6rem; height: auto; filter: drop-shadow(0 8px 10px rgba(29, 27, 110, 0.16)); }
@media (max-height: 700px) { .en-tostao { display: none; } }
.en-passo { animation: en-entra 0.32s cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes en-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.en-rot { margin: 0 0 0.875rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #2F2BB0; }
.en-passo h1 { margin: 0; text-align: left; font-size: 2.125rem; line-height: 1.04; font-weight: 600; letter-spacing: -0.045em; color: #1d1d1f; text-wrap: balance; }
.en-sub { margin: 0.875rem 0 1.875rem; font-size: 1rem; line-height: 1.5; font-weight: 500; color: #6e6e73; text-wrap: pretty; }
.en-sub b { font-weight: 600; color: #1d1d1f; overflow-wrap: anywhere; }
.en-erro-topo { margin: 0 0 1.25rem; padding: 0.875rem 1rem; border-radius: 14px; background: #fdf1f0; color: #9b2c21; font-size: 0.9375rem; line-height: 1.45; font-weight: 500; }

.en-btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; min-height: 54px; padding: 0 1.125rem; border: 1px solid #dedee3; border-radius: 16px; background: #ffffff; color: #1d1d1f; font: 500 1rem/1.2 'Geist', system-ui, sans-serif; letter-spacing: -0.012em; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; -webkit-tap-highlight-color: transparent; }
.en-btn:hover { background: #f7f7f9; border-color: #cfcfd6; }
.en-btn:active { transform: scale(0.985); }
.en-btn + .en-btn { margin-top: 0.75rem; }
.en-btn svg { flex: none; }
.en-btn[disabled] { opacity: 0.6; cursor: default; }
.en-btn-tinta { border-color: #2F2BB0; background: #2F2BB0; color: #ffffff; border-radius: 999px; }
.en-btn-tinta:hover { background: #26229a; border-color: #26229a; }
.en-btn-leve { border-color: transparent; background: none; color: #6e6e73; min-height: 48px; border-radius: 999px; }
.en-btn-leve:hover { background: #f5f5f7; border-color: transparent; color: #1d1d1f; }
.en-btn:focus-visible, .en-campo:focus-visible, .en-lig:focus-visible, .en-voltar:focus-visible, .en-logo:focus-visible, .en-nota a:focus-visible { outline: 2px solid #5753E2; outline-offset: 2px; }

.en-ou { display: flex; align-items: center; gap: 0.875rem; margin: 1.375rem 0; font-size: 0.8125rem; font-weight: 500; color: #86868b; }
.en-ou::before, .en-ou::after { content: ""; flex: 1; height: 1px; background: #e8e8ea; }
.en-form { margin: 0; }
.en-rotulo { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; color: #1d1d1f; }
.en-campo { display: block; width: 100%; height: 54px; padding: 0 1rem; border: 1px solid #dedee3; border-radius: 16px; background: #ffffff; color: #1d1d1f; font: 500 1rem/1.2 'Geist', system-ui, sans-serif; letter-spacing: -0.01em; transition: border-color 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; appearance: none; }
.en-campo::placeholder { color: #a1a1a6; font-weight: 400; }
.en-campo:focus { outline: none; border-color: #5753E2; box-shadow: 0 0 0 4px rgba(87, 83, 226, 0.14); }
.en-form .en-btn { margin-top: 0.75rem; }
.en-codigo { height: 68px; text-align: center; font-size: 1.875rem; font-weight: 600; letter-spacing: 0.42em; padding-left: 0.42em; font-variant-numeric: tabular-nums; }
.en-codigo::placeholder { color: #d2d2d7; font-weight: 500; }
.en-erro { min-height: 1.35rem; margin: 0.625rem 0 0; font-size: 0.875rem; line-height: 1.35; font-weight: 500; color: #c0392b; }
.en-linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin-top: 0.5rem; }
.en-lig { min-height: 44px; padding: 0; border: 0; background: none; color: #2F2BB0; font: 500 0.9375rem/1.2 'Geist', system-ui, sans-serif; letter-spacing: -0.01em; cursor: pointer; }
.en-lig[disabled] { color: #a1a1a6; cursor: default; }
.en-lig:not([disabled]):hover { text-decoration: underline; text-underline-offset: 3px; }
.en-nota { margin: 1.5rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: #86868b; text-wrap: pretty; }
.en-nota a { color: #6e6e73; text-decoration: underline; text-underline-offset: 2px; }
.en-nota a:hover { color: #1d1d1f; }
.en-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.en-espera { display: grid; gap: 0.75rem; }
.en-espera span { display: block; height: 54px; border-radius: 16px; background: #f3f3f5; animation: en-pulsa 1.4s ease-in-out infinite; }
@keyframes en-pulsa { 50% { opacity: 0.55; } }

/* a escolha da newsletter, no mesmo sítio */
.en-nl-lista { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.5rem; }
.en-nl-lista li { display: flex; align-items: center; gap: 0.875rem; padding: 0.5rem 0.875rem 0.5rem 0.5rem; border-radius: 16px; background: #f7f7f9; }
.en-chapa { display: grid; place-items: center; flex: none; width: 56px; height: 46px; border-radius: 12px; background: #F6F0E2; }
.en-chapa img { display: block; width: 44px; height: auto; }
.en-nl-lista strong { display: block; font-size: 0.9375rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; color: #1d1d1f; }
.en-nl-lista span span { display: block; margin-top: 1px; font-size: 0.8125rem; line-height: 1.35; font-weight: 500; color: #6e6e73; }

/* ---- a metade de papel: o que a conta guarda */
.en-mostra { position: relative; isolation: isolate; overflow: hidden; margin: 0 0.75rem 0.75rem; padding: 2rem 1.5rem 1.75rem; border-radius: 28px; background: #F4EEE1; }
.en-mostra::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(47, 43, 176, 0.15); opacity: 0.42; -webkit-mask: var(--pad) 0 0 / var(--pad-w) var(--pad-h) repeat; mask: var(--pad) 0 0 / var(--pad-w) var(--pad-h) repeat; }
.en-mostra::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(110% 80% at 50% 48%, #F4EEE1 18%, rgba(244, 238, 225, 0) 100%); }
.en-mostra-in { max-width: 30rem; margin: 0 auto; }
.en-mostra h2 { margin: 0; font-size: 1.625rem; line-height: 1.08; font-weight: 600; letter-spacing: -0.04em; color: #2F2BB0; text-wrap: balance; }
.en-mostra-sub { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.5; font-weight: 500; color: #5c5a52; text-wrap: pretty; }
.en-cartoes { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.625rem; }
.en-cartoes li { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem 0.75rem 0.75rem; border-radius: 20px; background: #ffffff; box-shadow: 0 1px 0 rgba(47, 43, 176, 0.05), 0 18px 36px -24px rgba(47, 43, 176, 0.35); }
.en-cartoes .en-chapa { width: 72px; height: 58px; border-radius: 14px; }
.en-cartoes .en-chapa img { width: 58px; }
.en-cartoes strong { display: block; font-size: 1rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; color: #1d1d1f; }
.en-cartoes span span { display: block; margin-top: 2px; font-size: 0.875rem; line-height: 1.4; font-weight: 500; color: #6e6e73; text-wrap: pretty; }
.en-selos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.en-selos li { padding: 0.375rem 0.75rem; border-radius: 999px; background: rgba(47, 43, 176, 0.08); color: #2F2BB0; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.005em; }

/* ---- tablet */
@media (min-width: 640px) {
    .en-lado { padding: 0 2rem; }
    .en-topo { height: 76px; }
    .en-centro { padding: 2.5rem 0 3.5rem; }
    .en-passo h1 { font-size: 2.5rem; }
    .en-mostra { margin: 0 1.25rem 1.25rem; padding: 2.75rem 2.5rem 2.5rem; border-radius: 32px; }
    .en-mostra h2 { font-size: 2rem; }
}
/* ---- computador: lado a lado, o papel a toda a altura */
@media (min-width: 960px) {
    .en { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); }
    .en-lado { padding: 0 3rem; }
    .en-mostra { display: flex; align-items: center; margin: 0.75rem 0.75rem 0.75rem 0; padding: 3rem; border-radius: 36px; }
    .en-mostra-in { width: 100%; max-width: 28.5rem; }
    .en-mostra h2 { font-size: 2.75rem; line-height: 1.02; letter-spacing: -0.048em; }
    .en-mostra-sub { font-size: 1.0625rem; margin-top: 1.125rem; }
    .en-cartoes { margin-top: 2.25rem; gap: 0.75rem; }
    /* os três cartões em escada, sem saírem do papel */
    .en-cartoes li { width: calc(100% - 3rem); padding: 0.875rem 1.25rem 0.875rem 0.875rem; }
    .en-cartoes li:nth-child(2) { transform: translateX(1.5rem); }
    .en-cartoes li:nth-child(3) { transform: translateX(3rem); }
    .en-selos { margin-top: 2rem; }
}
@media (min-width: 1440px) {
    .en-mostra h2 { font-size: 3.25rem; }
    .en-mostra-in { max-width: 32rem; }
    .en-caixa { max-width: 26rem; }
}
/* ecrãs baixos (telemóvel deitado, portátil pequeno): menos ar, nada cortado */
@media (min-width: 960px) and (max-height: 720px) {
    .en-mostra { padding: 2rem 3rem; }
    .en-mostra h2 { font-size: 2.25rem; }
    .en-cartoes { margin-top: 1.5rem; }
    .en-topo { height: 64px; }
    .en-centro { padding: 0.25rem 0 1.25rem; }
    .en-passo h1 { font-size: 2.125rem; }
    .en-sub { margin-bottom: 1.375rem; }
    .en-ou { margin: 1rem 0; }
    .en-nota { margin-top: 1rem; }
}
@media (max-width: 359px) {
    .en-passo h1 { font-size: 1.875rem; }
    .en-codigo { font-size: 1.5rem; letter-spacing: 0.32em; padding-left: 0.32em; }
    .en-cartoes .en-chapa { width: 60px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
    .en-passo, .en-espera span { animation: none; }
    .en-btn { transition: none; }
}