/* Telas de ENTRADA do sistema: /login (administrativo) e /cliente/login (portal).
 *
 * Por que arquivo proprio, e nao <style> no template: o `base.html` e casca
 * COMPARTILHADA (painel da plataforma e organizacao), entao seletor escrito la vale para
 * os dois lados - e estas regras sao genericas demais para andarem soltas
 * pelas 55 telas. Aqui elas so chegam ao navegador de quem abre uma das duas
 * portas, porque so esses dois templates dao o <link>.
 *
 * As duas portas dividem o mesmo desenho e trocam so o acento: roxo para a
 * empresa que administra, azul para o cliente que acompanha. Quem chega
 * precisa perceber em meio segundo que entrou na porta certa.
 */

:root {
    --ent-fundo: #101119;
    --ent-fundo-2: #161826;
    --ent-superficie: rgba(30, 32, 44, 0.88);
    --ent-superficie-2: rgba(255, 255, 255, 0.04);
    --ent-borda: rgba(255, 255, 255, 0.09);
    --ent-borda-forte: rgba(255, 255, 255, 0.16);
    --ent-texto: #f2f3f8;
    --ent-suave: #a6a9bd;
    --ent-marca: #7c5cff;
    --ent-marca-2: #4361ee;
    --ent-ok: #2fd4a7;
    --ent-sombra: 0 24px 60px rgba(0, 0, 0, 0.45);
    --ent-raio: 20px;
}

/* A porta do cliente final: mesmo desenho, acento azul-turquesa. */
.entrada--cliente {
    --ent-marca: #2f80ed;
    --ent-marca-2: #21b6a8;
}

body.entrada {
    min-height: 100vh;
    margin: 0;
    color: var(--ent-texto);
    background-color: var(--ent-fundo);
    /* Dois halos do acento sobre o fundo escuro. E o que tira a tela do
       "formulario cinza no meio do nada" sem custar imagem nenhuma. */
    background-image:
        radial-gradient(900px 600px at 12% -10%, rgba(124, 92, 255, 0.22), transparent 60%),
        radial-gradient(700px 500px at 100% 100%, rgba(67, 97, 238, 0.18), transparent 55%),
        linear-gradient(160deg, var(--ent-fundo) 0%, var(--ent-fundo-2) 100%);
    background-attachment: fixed;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.entrada.entrada--cliente {
    background-image:
        radial-gradient(900px 600px at 12% -10%, rgba(47, 128, 237, 0.22), transparent 60%),
        radial-gradient(700px 500px at 100% 100%, rgba(33, 182, 168, 0.16), transparent 55%),
        linear-gradient(160deg, var(--ent-fundo) 0%, var(--ent-fundo-2) 100%);
}

.entrada-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 3.5rem;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
    min-height: 100vh;
}

/* As telas de apoio da entrada (recuperar autenticador, redefinir senha) nao
   tem o que vender: quem chega nelas ja decidiu entrar e esta resolvendo um
   problema. Ficam com uma coluna so, centralizada. */
.entrada-grade--simples {
    grid-template-columns: minmax(0, 480px);
    justify-content: center;
    align-items: start;
    padding-top: 4rem;
}

/* ---------------------------------------------------------------- vitrine */

.entrada-marca {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ent-texto);
    text-decoration: none;
    margin-bottom: 2.25rem;
}

.entrada-marca:hover {
    color: var(--ent-texto);
    opacity: 0.85;
}

.entrada-marca-icone {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 1.15rem;
    color: #fff;
    background: linear-gradient(135deg, var(--ent-marca) 0%, var(--ent-marca-2) 100%);
    box-shadow: 0 8px 20px rgba(124, 92, 255, 0.35);
}

/* O logo enviado em o editor de site da plataforma, no lugar do quadrado do icone.

   `max-width` porque quem envia a imagem nao tem como saber a largura que ela
   vai ter aqui: sem o limite, um logo deitado empurrava os links da barra
   para fora da tela no celular. */
.entrada-marca-logo {
    height: 42px;
    max-width: 220px;
    object-fit: contain;
    border-radius: 10px;
}

/* Em linha propria: a marca acima e `inline-flex`, entao o selo colado nela
   subia para o lado do nome do sistema. */
.entrada-selo {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    margin-bottom: 1.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ent-texto);
    background: var(--ent-superficie-2);
    border: 1px solid var(--ent-borda);
    border-radius: 999px;
}

.entrada-selo i {
    color: var(--ent-marca);
}

.entrada-titulo {
    font-size: clamp(1.9rem, 3.2vw, 2.9rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.entrada-titulo em {
    font-style: normal;
    background: linear-gradient(100deg, var(--ent-marca) 0%, var(--ent-marca-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.entrada-chamada {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ent-suave);
    max-width: 34rem;
    margin-bottom: 2rem;
}

.entrada-recursos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.9rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.entrada-recursos li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.94rem;
    line-height: 1.45;
    color: var(--ent-texto);
}

.entrada-recursos i {
    flex: 0 0 auto;
    margin-top: 0.2rem;
    font-size: 0.95rem;
    color: var(--ent-marca);
}

.entrada-recursos span {
    display: block;
    font-size: 0.84rem;
    color: var(--ent-suave);
}

.entrada-garantias {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ent-borda);
}

.entrada-garantias span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    color: var(--ent-suave);
    background: var(--ent-superficie-2);
    border: 1px solid var(--ent-borda);
    border-radius: 999px;
}

.entrada-garantias i {
    color: var(--ent-ok);
}

/* ----------------------------------------------------------------- cartao */

.entrada-cartao {
    background: var(--ent-superficie);
    border: 1px solid var(--ent-borda);
    border-radius: var(--ent-raio);
    box-shadow: var(--ent-sombra);
    padding: 2.25rem;
    backdrop-filter: blur(14px);
}

.entrada-cartao-topo {
    margin-bottom: 1.75rem;
}

.entrada-cartao-topo h2 {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.35rem;
}

.entrada-cartao-topo p {
    font-size: 0.9rem;
    color: var(--ent-suave);
    margin: 0;
}

.entrada-cartao .form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ent-texto);
    margin-bottom: 0.4rem;
}

/* Os campos: altura de toque confortavel e foco que se ve de longe. O padrao
   do Bootstrap escuro deixava o campo quase da cor do cartao. */
.entrada-cartao .form-control {
    background-color: rgba(12, 13, 20, 0.6);
    border: 1px solid var(--ent-borda-forte);
    border-radius: 12px;
    color: var(--ent-texto);
    padding: 0.8rem 1rem;
    font-size: 0.98rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.entrada-cartao .form-control::placeholder {
    color: rgba(166, 169, 189, 0.65);
}

.entrada-cartao .form-control:focus {
    background-color: rgba(12, 13, 20, 0.85);
    border-color: var(--ent-marca);
    box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.18);
    color: var(--ent-texto);
}

.entrada--cliente .entrada-cartao .form-control:focus {
    box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.2);
}

.entrada-cartao .form-check-input {
    background-color: rgba(12, 13, 20, 0.6);
    border-color: var(--ent-borda-forte);
}

.entrada-cartao .form-check-input:checked {
    background-color: var(--ent-marca);
    border-color: var(--ent-marca);
}

.entrada-cartao .form-check-label {
    font-size: 0.9rem;
    color: var(--ent-suave);
}

/* Campo de senha com o olho dentro: o botao fica por cima, e o padding a
   direita do input reserva o espaco dele. */
.entrada-campo-senha {
    position: relative;
}

.entrada-campo-senha .form-control {
    padding-right: 3rem;
}

.entrada-olho {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 3rem;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    color: var(--ent-suave);
    cursor: pointer;
    border-radius: 0 12px 12px 0;
}

.entrada-olho:hover,
.entrada-olho:focus-visible {
    color: var(--ent-texto);
    outline: none;
}

.entrada-botao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.9rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ent-marca) 0%, var(--ent-marca-2) 100%);
    box-shadow: 0 12px 26px rgba(124, 92, 255, 0.32);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.entrada--cliente .entrada-botao {
    box-shadow: 0 12px 26px rgba(47, 128, 237, 0.32);
}

.entrada-botao:hover {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.entrada-botao:active {
    transform: translateY(0);
}

.entrada-botao:disabled {
    opacity: 0.7;
    transform: none;
}

.entrada-botao-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ent-texto);
    text-decoration: none;
    background: var(--ent-superficie-2);
    border: 1px solid var(--ent-borda-forte);
    border-radius: 12px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.entrada-botao-secundario:hover {
    color: var(--ent-texto);
    border-color: var(--ent-marca);
    background: rgba(255, 255, 255, 0.07);
}

.entrada-elo {
    color: var(--ent-suave);
    text-decoration: none;
    font-size: 0.85rem;
}

.entrada-elo:hover {
    color: var(--ent-marca);
}

.entrada-elo-destaque {
    color: var(--ent-marca);
    font-weight: 600;
    text-decoration: none;
}

.entrada-elo-destaque:hover {
    text-decoration: underline;
}

.entrada-ou {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 1.5rem 0;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ent-suave);
}

.entrada-ou::before,
.entrada-ou::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ent-borda);
}

.entrada-rodape {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ent-borda);
    text-align: center;
    font-size: 0.85rem;
    color: var(--ent-suave);
}

.entrada-creditos {
    grid-column: 1 / -1;
    padding-top: 2rem;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.6;
    color: rgba(166, 169, 189, 0.75);
}

/* "Como funciona", em passos numerados. Era um bloco de alerta cinza com
   1), 2), 3) digitados a mao dentro do texto. */
.entrada-passos {
    margin: 1.5rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ent-suave);
}

.entrada-passos li + li {
    margin-top: 0.4rem;
}

.entrada-passos::marker {
    color: var(--ent-marca);
}

/* Resumo do que ja foi preenchido (etapa 2 do cadastro): confere-se de
   relance sem voltar uma tela. */
.entrada-resumo {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
    background: var(--ent-superficie-2);
    border: 1px solid var(--ent-borda);
    border-radius: 12px;
}

.entrada-resumo li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: var(--ent-texto);
}

.entrada-resumo li + li {
    margin-top: 0.4rem;
}

.entrada-resumo i {
    width: 1rem;
    color: var(--ent-suave);
}

/* O QR do autenticador: o leitor do celular precisa de papel branco, entao
   esta e a unica ilha clara das telas de entrada - e por isso ela ganha uma
   moldura em vez de sair flutuando no escuro. */
.entrada-qr {
    text-align: center;
    margin-bottom: 1.25rem;
}

.entrada-qr p {
    font-size: 0.86rem;
    color: var(--ent-suave);
    margin-bottom: 0.9rem;
}

.entrada-qr-papel {
    display: inline-block;
    padding: 0.75rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--ent-sombra);
}

.entrada-qr-papel img {
    display: block;
    max-height: 170px;
    max-width: 100%;
}

/* Codigo de 6 digitos: fonte tabular e espacamento, para conferir digito a
   digito sem contar com o dedo. */
.entrada-codigo {
    max-width: 260px;
    margin: 0 auto 1.25rem;
}

.entrada-codigo .form-control {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.5rem;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- telas pequenas */

@media (max-width: 991.98px) {
    .entrada-grade {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
        padding: 2rem 1.25rem;
        max-width: 560px;
        align-items: start;
    }

    .entrada-vitrine {
        text-align: center;
    }

    .entrada-marca {
        margin-bottom: 1.25rem;
    }

    .entrada-selo {
        margin-left: auto;
        margin-right: auto;
    }

    .entrada-chamada {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.25rem;
        font-size: 0.98rem;
    }

    /* No celular a tela existe para ENTRAR: a lista de recursos empurraria o
       formulario para baixo da dobra. Ficam o titulo, a chamada e os selos. */
    .entrada-recursos {
        display: none;
    }

    .entrada-garantias {
        justify-content: center;
        padding-top: 1.25rem;
    }

    .entrada-cartao {
        padding: 1.5rem;
    }
}

@media (max-width: 767.98px) {
    .entrada-titulo {
        font-size: 1.6rem;
    }

    .entrada-chamada {
        font-size: 0.92rem;
        margin-bottom: 0;
    }

    /* No celular cada selo ocupa uma linha inteira, e os tres juntos empurram
       o formulario para fora da primeira tela - que e o unico motivo de
       alguem ter aberto este endereco. A confianca aqui vem de entrar e
       funcionar, nao da lista de selos. */
    .entrada-garantias {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .entrada-botao,
    .entrada-botao-secundario,
    .entrada-cartao .form-control,
    .entrada-porta,
    .entrada-plano {
        transition: none;
    }

    .entrada-botao:hover,
    .entrada-porta:hover,
    .entrada-plano:hover {
        transform: none;
    }
}

/* =====================================================================
   A TELA `/`: a escolha da porta, o que o sistema faz e os planos.

   Ela usa as mesmas variaveis e o mesmo cartao das duas telas de login -
   é a primeira que o visitante vê, e as tres precisam parecer o mesmo
   produto. O que e so dela fica daqui para baixo.
   ===================================================================== */

.entrada-pagina {
    max-width: 1140px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 2.5rem;
}

.entrada-capa {
    text-align: center;
    margin-bottom: 3.5rem;
}

.entrada-capa .entrada-marca,
.entrada-capa .entrada-selo {
    margin-left: auto;
    margin-right: auto;
}

.entrada-capa .entrada-chamada {
    margin-left: auto;
    margin-right: auto;
}

.entrada-capa .entrada-garantias {
    justify-content: center;
    border-top: 0;
    padding-top: 0;
    margin-top: 2rem;
}

/* As duas portas: cartao grande, porque a escolha errada aqui custa uma
   volta inteira - o cliente que entra pelo login da empresa nao descobre
   sozinho onde errou. */
.entrada-portas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    max-width: 760px;
    margin: 2.5rem auto 0;
}

.entrada-porta {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    text-align: left;
    text-decoration: none;
    color: var(--ent-texto);
    background: var(--ent-superficie);
    border: 1px solid var(--ent-borda);
    border-radius: 16px;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.entrada-porta:hover {
    color: var(--ent-texto);
    transform: translateY(-3px);
    border-color: var(--ent-marca);
    box-shadow: var(--ent-sombra);
}

.entrada-porta-icone {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 1.3rem;
    color: #fff;
    background: linear-gradient(135deg, var(--ent-marca) 0%, var(--ent-marca-2) 100%);
}

.entrada-porta--cliente .entrada-porta-icone {
    background: linear-gradient(135deg, #2f80ed 0%, #21b6a8 100%);
}

.entrada-porta strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
}

.entrada-porta span {
    display: block;
    font-size: 0.86rem;
    color: var(--ent-suave);
}

.entrada-porta i.entrada-porta-seta {
    margin-left: auto;
    color: var(--ent-suave);
}

/* ------------------------------------------------------------- seções */

.entrada-secao {
    margin-bottom: 3.5rem;
}

.entrada-secao-titulo {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}

.entrada-secao-sub {
    text-align: center;
    font-size: 0.95rem;
    color: var(--ent-suave);
    max-width: 44rem;
    margin: 0 auto 2rem;
}

.entrada-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.entrada-card {
    padding: 1.4rem;
    background: var(--ent-superficie-2);
    border: 1px solid var(--ent-borda);
    border-radius: 16px;
}

.entrada-card i {
    font-size: 1.2rem;
    color: var(--ent-marca);
}

.entrada-card strong {
    display: block;
    margin: 0.75rem 0 0.35rem;
    font-size: 1rem;
    font-weight: 600;
}

.entrada-card p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ent-suave);
}

/* -------------------------------------------------------------- planos */

.entrada-planos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.entrada-plano {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ent-superficie);
    border: 1px solid var(--ent-borda);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.entrada-plano:hover {
    transform: translateY(-4px);
    border-color: var(--ent-borda-forte);
}

/* A cor que o dono do sistema escolheu para o anuncio entra como faixa, e
   nao no preco: `banner_color` aceita `dark`, e preco cinza-escuro sobre
   cartao escuro simplesmente sumia da tela. */
.entrada-plano-faixa {
    height: 4px;
}

.entrada-plano--destaque {
    border-color: var(--ent-marca);
    box-shadow: 0 0 0 1px var(--ent-marca), var(--ent-sombra);
}

/* Centralizada no topo, e o cartao destacado abre espaco para ela: encostada
   no canto direito, a faixa caia por cima do nome do plano. */
.entrada-plano-recomendado {
    position: absolute;
    top: 0.85rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.2rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--ent-marca) 0%, var(--ent-marca-2) 100%);
    border-radius: 999px;
}

.entrada-plano-topo {
    padding: 1.6rem 1.5rem 1rem;
    text-align: center;
}

.entrada-plano--destaque .entrada-plano-topo {
    padding-top: 2.9rem;
}

.entrada-plano-nome {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* O preco cheio, riscado acima do que se paga. Vem ANTES do
   `.entrada-plano-preco` no DOM para o olho ler "de X por Y" de cima para
   baixo, e discreto de proposito: o numero que vale e o de baixo. */
.entrada-plano-preco-cheio {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ent-suave);
    text-decoration: line-through;
}

.entrada-plano-preco {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.1;
    background: linear-gradient(100deg, var(--ent-marca) 0%, var(--ent-marca-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.entrada-plano-periodo {
    font-size: 0.85rem;
    color: var(--ent-suave);
}

.entrada-plano-desconto {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.2rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: #ff6b6b;
    border-radius: 999px;
}

.entrada-plano-descricao {
    padding: 0 1.5rem;
    font-size: 0.86rem;
    line-height: 1.5;
    text-align: center;
    color: var(--ent-suave);
    margin-bottom: 1.25rem;
}

.entrada-plano-itens {
    list-style: none;
    margin: 0;
    padding: 0 1.5rem 1.6rem;
}

.entrada-plano-itens li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-bottom: 0.6rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--ent-texto);
}

.entrada-plano-itens i {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: var(--ent-ok);
}

/* O limite MEDIDO (o numero que barra) vem antes do texto livre do
   anuncio - e por isso ele e o que fica em negrito. */
.entrada-plano-itens .entrada-plano-limite {
    font-weight: 600;
}

/* --------------------------------------------------- chamada final */

.entrada-fechamento {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--ent-superficie-2);
    border: 1px solid var(--ent-borda);
    border-radius: 20px;
}

.entrada-fechamento h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.entrada-fechamento p {
    font-size: 0.95rem;
    color: var(--ent-suave);
    max-width: 38rem;
    margin: 0 auto 1.5rem;
}

.entrada-fechamento .entrada-botao {
    width: auto;
    display: inline-flex;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Alerta que flutua tem de ser opaco: o `custom.css` deixa o aviso em tinta
   diluida (bom no meio do conteudo, ilegivel por cima dele). */
.entrada-flash .alert {
    background-color: var(--ent-superficie);
    border: 1px solid var(--ent-borda-forte);
    border-radius: var(--ent-raio);
    box-shadow: var(--ent-sombra);
    color: var(--ent-texto);
    backdrop-filter: blur(14px);
}

/* As mensagens do servidor ficam fixas no canto para nao empurrar a capa. */
.entrada-flash {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    max-width: min(420px, calc(100vw - 2rem));
}

@media (max-width: 767.98px) {
    .entrada-pagina {
        padding: 2.5rem 1.25rem 2rem;
    }

    .entrada-capa {
        margin-bottom: 2.5rem;
    }

    .entrada-capa .entrada-garantias {
        display: flex;
    }

    .entrada-secao {
        margin-bottom: 2.5rem;
    }
}