/* JUVAECOM — FOLHA DE ESTILOS COMENTADA
   Organização por página e componente.
   Seções de compatibilidade preservam seletores antigos até a revisão dos templates.
   Regras posteriores podem sobrescrever anteriores: mantenha a ordem deste arquivo.
*/

/* ==========================================================
   01 — BASE GLOBAL: dimensões, corpo da página e tipografia
   ========================================================== */
* { box-sizing: border-box; }

body { margin: 0; font-family: Arial, sans-serif; background: #171513; color: #fff; }

/* ==========================================================
   02 — HOME: imagem de fundo, sobreposição e conteúdo principal
   ========================================================== */
.home {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #171513;
}

.home__imagem { position: absolute; inset: 0; z-index: 0; }

.home__imagem img {
    position: absolute;
    top: 50%;
    right: 0;
    width: auto;
    height: 135%;
    max-width: none;
    transform: translateY(-50%);
    filter: brightness(.9);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 50%);
}

.home::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, #171513 0%, #171513ed 28%, #17151388 53%, transparent 85%);
}

.home__conteudo {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 580px) 1fr;
    width: min(calc(100% - 64px), 1200px);
    margin: auto;
    padding: 90px 0;
}

.home__conteudo > * { grid-column: 1; }

.home__marca { font-size: 28px; font-weight: 800; margin-bottom: 70px; }

.home__marca span, h1 span { color: #ff7841; }

.home__categoria { color: #ff995f; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

h1 {
    max-width: 650px;
    margin: 20px 0 24px;
    font-size: clamp(20px, 3vw, 30px);
    line-height: 1.08;
    letter-spacing: -.05em;
}

.home__descricao { max-width: 530px; font-size: 19px; line-height: 1.6; color: #eee5df; }

.home__botao {
    display: inline-block;
    width: fit-content;
    margin-top: 24px;
    padding: 15px 24px;
    border-radius: 8px;
    background: #ff7841;
    color: #171513;
    font-weight: 700;
    text-decoration: none;
}

.home__botao:hover { background: #ff995f; }

/* ==========================================================
   03 — HOME: navegação superior e marca
   ========================================================== */
.menu-principal {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 28px max(32px, calc((100% - 1200px) / 2));
}

.menu-principal a { color: #fff; text-decoration: none; }
.menu-principal__marca { font-size: 25px; font-weight: 800; }
.menu-principal__marca span { color: #ff7841; }

.menu-principal__links { display: flex; gap: 28px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }

.menu-principal__links a:hover { color: #ff995f; }

/* ==========================================================
   04 — PLANOS ANTIGOS: compatibilidade com templates anteriores
   ========================================================== */
.pagina-planos {
    min-height: 100vh;
    padding: 60px 32px 100px;
    background: radial-gradient(circle at 85% 10%, #6b341f55, transparent 38%), #171513;
}

.planos-container { width: min(100%, 1200px); margin: 0 auto; }

.planos-voltar { display: inline-block; margin-bottom: 72px; color: #eee5df; text-decoration: none; }

.planos-voltar:hover { color: #ff995f; }
.planos-cabecalho h1 { max-width: 850px; margin-bottom: 18px; }

.planos-cabecalho > p:last-child { max-width: 600px; color: #eee5df; font-size: 19px; line-height: 1.6; }

.planos-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 60px; }

.plano-card {
    display: flex;
    flex-direction: column;
    min-height: 360px;
    padding: 28px;
    border: 1px solid #ffffff24;
    border-radius: 16px;
    background: #25211f;
}

.plano-card__categoria {
    margin: 0 0 12px;
    color: #ff995f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.plano-card h2 { margin: 0 0 12px; font-size: 32px; }
.plano-card__descricao, .plano-card__texto { color: #eee5df; line-height: 1.5; }
.plano-card__texto { margin: 28px 0; }

.plano-card__rodape { margin-top: auto; padding-top: 20px; border-top: 1px solid #ffffff24; }

.plano-card__periodo { margin: 0 0 8px; color: #eee5df; }
.plano-card__valor { margin: 0; color: #ff7841; font-size: 30px; font-weight: 800; }

/* ==========================================================
   05 — CONTATO PÚBLICO E LOGIN: formulário, campos e mensagens
   ========================================================== */
.pagina-contato {
    min-height: 100vh;
    padding: 55px 32px 100px;
    background: radial-gradient(circle at 85% 20%, #6b341f55, transparent 40%), #171513;
}

.contato-container { width: min(100%, 1200px); margin: 0 auto; }

.contato-grade { display: grid; grid-template-columns: 1fr minmax(0, 460px); gap: 70px; align-items: center; }

.contato-apresentacao h1 { max-width: 650px; }

.contato-apresentacao > p:last-child { max-width: 500px; color: #eee5df; font-size: 19px; line-height: 1.6; }

.contato-card { padding: 36px; border: 1px solid #ffffff24; border-radius: 16px; background: #25211f; }

.contato-card h2 { margin: 0 0 28px; font-size: 28px; }
.contato-card form { display: grid; gap: 12px; }
.contato-card label { font-weight: 700; }

.contato-card input:not([type="hidden"]),
.contato-card textarea {
    width: 100%;
    padding: 13px 14px;
    margin-bottom: 8px;
    border: 1px solid #ffffff35;
    border-radius: 8px;
    background: #171513;
    color: #fff;
    font: inherit;
}

.contato-card input:focus,
.contato-card textarea:focus { outline: 2px solid #ff7841; outline-offset: 2px; }

.contato-card button {
    margin-top: 12px;
    padding: 15px 24px;
    border: 0;
    border-radius: 8px;
    background: #ff7841;
    color: #171513;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.contato-card button:hover { background: #ff995f; }
.contato-aviso { padding: 16px; border-radius: 8px; line-height: 1.5; }
.contato-aviso--sucesso { background: #28513b; }
.contato-aviso--erro { margin-bottom: 18px; background: #71332c; }

/* Administração: estilos do painel anterior (mantidos por compatibilidade) */
.adm-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 48px; }

.adm-sair {
    padding: 12px 20px;
    border: 1px solid #ffffff55;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.adm-sair:hover { border-color: #ff7841; color: #ff995f; }

.adm-menu, .adm-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.adm-menu__item {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 220px;
    padding: 28px;
    border: 1px solid #ffffff24;
    border-radius: 16px;
    background: #25211f;
    color: #eee5df;
    text-decoration: none;
}

.adm-menu__item strong { color: #fff; font-size: 26px; }
.adm-menu__item:not(.adm-menu__item--futuro):hover { border-color: #ff7841; }
.adm-menu__item--futuro { opacity: .55; }

.adm-menu__grupo { color: #ff995f; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

.adm-menu__acao { margin-top: auto; color: #ff995f; font-weight: 700; }
.adm-grade .contato-card h2 { margin-bottom: 20px; }
.adm-grade .contato-card p { line-height: 1.5; }
.adm-data { margin-top: 28px; color: #b9ada6; font-size: 13px; }

/* ==========================================================
   07 — ADMINISTRAÇÃO: estrutura, menu lateral e área principal
   ========================================================== */
.adm-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: 100vh; }

.adm-lateral {
    display: flex;
    flex-direction: column;
    padding: 32px 20px;
    border-right: 1px solid #ffffff20;
    background: #211d1b;
}

.adm-lateral__marca { margin: 0 12px 64px; color: #fff; font-size: 26px; font-weight: 800; text-decoration: none; }

.adm-lateral__marca span { color: #ff7841; }

.adm-lateral__titulo {
    margin: 0 12px 16px;
    color: #ff995f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.adm-lateral__nav { display: grid; gap: 4px; }

.adm-lateral__nav a,
.adm-lateral__nav > span { display: block; padding: 13px 12px; border-radius: 8px; color: #eee5df; text-decoration: none; }

.adm-lateral__nav a:hover,
.adm-lateral__nav a.ativo { background: #ff784122; color: #ff995f; }

.adm-lateral__nav > span { opacity: .5; }

.adm-lateral__nav small { display: block; margin-top: 3px; font-size: 11px; }

.adm-lateral__rodape { display: grid; gap: 16px; margin-top: auto; padding: 32px 12px 0; }

.adm-lateral__rodape a { color: #eee5df; text-decoration: none; }

.adm-lateral__rodape a:hover { color: #ff995f; }

.adm-lateral__rodape button {
    padding: 10px 16px;
    border: 1px solid #ffffff55;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.adm-lateral__rodape button:hover { border-color: #ff7841; }

.adm-principal {
    min-width: 0;
    padding: 70px clamp(24px, 5vw, 90px);
    background: radial-gradient(circle at 90% 10%, #6b341f44, transparent 40%);
}

.adm-resumo {
    max-width: 600px;
    margin-top: 60px;
    padding: 28px;
    border: 1px solid #ffffff24;
    border-radius: 16px;
    background: #25211f;
}

.adm-resumo h2 { margin-top: 0; }
.adm-resumo p { color: #eee5df; line-height: 1.6; }
.adm-resumo a { color: #ff995f; font-weight: 700; text-decoration: none; }

/* ==========================================================
   08 — ATENDIMENTO ANTIGO: cards por prazo (compatibilidade)
   ========================================================== */
.atendimento-grupos { display: grid; gap: 24px; margin-top: 40px; }

.atendimento-card { padding: 28px; border: 2px solid; border-radius: 16px; background: #25211f; }

.atendimento-card--vermelho { border-color: #e86565; }
.atendimento-card--amarelo { border-color: #e5bd54; }
.atendimento-card--verde { border-color: #66b98b; }

.atendimento-card__cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 16px; }

.atendimento-card__cabecalho h2 { margin: 0; font-size: 23px; }

.atendimento-card__quantidade { padding: 6px 12px; border-radius: 8px; background: #ffffff12; font-weight: 700; }

.atendimento-contato { margin-top: 24px; padding-top: 20px; border-top: 1px solid #ffffff24; overflow-wrap: anywhere; }

.atendimento-contato h3 { margin: 0 0 14px; font-size: 20px; }
.atendimento-contato p { color: #eee5df; line-height: 1.5; }
.atendimento-contato a { color: #ff995f; text-decoration: none; }
.atendimento-contato__mensagem { white-space: pre-wrap; }
.atendimento-card__vazio { margin: 24px 0 0; color: #b9ada6; }

/* ==========================================================
   09 — TABELAS COMPARTILHADAS: utilizadas também na página de usuários
   ========================================================== */
.atendimento-tabela-container { margin-top: 24px; overflow-x: auto; }

.atendimento-tabela { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; text-align: left; }

.atendimento-tabela th,
.atendimento-tabela td { padding: 7px 10px; border-bottom: 1px solid #ffffff18; vertical-align: top; }

.atendimento-tabela th { background: #ffffff06; color: #ff995f; font-weight: 700; }

.atendimento-tabela td { color: #eee5df; line-height: 1.3; }

.atendimento-tabela tbody tr:hover { background: #ffffff05; }

.atendimento-tabela tbody tr:last-child td { border-bottom: 0; }

.atendimento-tabela a { color: #ff995f; text-decoration: none; }

.atendimento-tabela a:hover { text-decoration: underline; }

.atendimento-tabela__mensagem { min-width: 180px; max-width: 320px; overflow-wrap: anywhere; white-space: normal; text-align: left; }

.atendimento-tabela__data { white-space: nowrap; }

.atendimento-tabela__legenda { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ==========================================================
   10 — ADMINISTRAÇÃO: botão Sair abaixo das opções do menu
   ========================================================== */
.adm-lateral .adm-form-sair { margin-top: 24px; }

.adm-menu-sair { margin: 0; padding: 0; }

.adm-menu-sair button {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #eee5df;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.adm-menu-sair button:hover { background: #ffffff08; color: #ff995f; }

/* ==========================================================
   11 — RESPONSIVIDADE: home, contato, administração e planos antigos
   ========================================================== */
@media (max-width: 1000px) {
    .planos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .home { min-height: 760px; align-items: flex-end; }

    .home__imagem img {
        position: static;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 25%;
        transform: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .home::before {
        background: linear-gradient(0deg, #171513 0%, #171513ed 38%, #17151366 100%);
    }

    .home__conteudo {
        display: block;
        width: min(calc(100% - 40px), 500px);
        padding: 300px 0 55px;
    }

    .home__marca { margin-bottom: 80px; }
    h1 { font-size: clamp(42px, 10vw, 60px); }
    .home__descricao { font-size: 17px; }

    .menu-principal { padding: 22px 20px; }
    .menu-principal__marca { font-size: 20px; }
    .menu-principal__links { gap: 14px; font-size: 11px; }

    .pagina-contato { padding: 32px 20px 70px; }
    .contato-grade { grid-template-columns: 1fr; gap: 30px; }
    .contato-card { padding: 24px; }

    .adm-cabecalho { flex-direction: column; }
    .adm-menu, .adm-grade { grid-template-columns: 1fr; }

    .adm-layout { grid-template-columns: 1fr; }

    .adm-lateral {
        border-right: 0;
        border-bottom: 1px solid #ffffff20;
    }

    .adm-lateral__marca { margin-bottom: 28px; }
    .adm-lateral__rodape { margin-top: 16px; }
    .adm-principal { padding: 45px 20px 70px; }

    .atendimento-card { padding: 20px; }
    .atendimento-card__cabecalho h2 { font-size: 19px; }
}

@media (max-width: 600px) {
    .pagina-planos { padding: 32px 20px 70px; }
    .planos-voltar { margin-bottom: 50px; }
    .planos-grade { grid-template-columns: 1fr; margin-top: 40px; }
    .plano-card { min-height: 300px; }
}

/* ==========================================================
   12 — PLANOS ANTIGOS: ajustes de preço e botão (compatibilidade)
   ========================================================== */
.plano-card__mensal {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}

.plano-card__valor {
    font-size: 26px;
}

.plano-card .home__botao {
    display: block;
    width: fit-content;
    font-size: 13px;
    padding: 10px 16px;
    margin: 16px auto 0;
}


/* ==========================================================
   13 — USUÁRIOS: inclusão com CPF/CNPJ, login e nível
   ========================================================== */
.usuario-inclusao {
    margin: 28px 0;
    padding: 24px;
    border: 1px solid #ffffff24;
    border-radius: 12px;
    background: #25211f;
}

.usuario-inclusao h2 {
    margin: 0 0 20px;
    font-size: 22px;
}

.usuario-inclusao__linha {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
}

.usuario-inclusao__linha label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

.usuario-inclusao__linha input,
.usuario-inclusao__linha select {
    width: 100%;
    height: 44px;
    padding: 10px 12px;
    border: 1px solid #ffffff35;
    border-radius: 8px;
    background: #171513;
    color: #fff;
    font: inherit;
}

.usuario-inclusao__linha input:focus,
.usuario-inclusao__linha select:focus {
    outline: 2px solid #ff7841;
    outline-offset: 2px;
}

.usuario-inclusao__linha button {
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: #ff7841;
    color: #171513;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.usuario-inclusao__linha button:hover {
    background: #ff995f;
}

.usuario-inclusao__aviso {
    margin: 16px 0 0;
    color: #eee5df;
    font-size: 13px;
}

@media (max-width: 800px) {
    .usuario-inclusao__linha {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   14 — USUÁRIOS: identificação e acesso à troca de senha
   ========================================================== */
.adm-topo {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
}

.adm-topo > span {
    color: #eee5df;
    font-size: 14px;
}

.adm-topo__botao {
    padding: 9px 14px;
    border: 1px solid #ffffff35;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
}

.adm-topo__botao:hover {
    border-color: #ff7841;
    color: #ff995f;
}

/* ==========================================================
   15 — USUÁRIOS: botão para resetar a senha
   ========================================================== */
.usuario-resetar {
    padding: 7px 10px;
    border: 1px solid #ff7841;
    border-radius: 6px;
    background: transparent;
    color: #ff995f;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}


.usuario-resetar:hover {
    background: #ff7841;
    color: #171513;
}



/* ==========================================================
   16 — PESSOA: cartão, campos e ações do formulário
   ========================================================== */
.pessoa-card {
    margin: 28px 0;
    padding: 24px;
    border: 1px solid #ffffff24;
    border-radius: 12px;
    background: #25211f;
}

.pessoa-card h2 {
    margin: 0 0 22px;
    font-size: 24px;
}

.pessoa-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.pessoa-form__amplo { grid-column: span 2; }

.pessoa-form__titulo,
.pessoa-form__acoes { grid-column: 1 / -1; }

.pessoa-form__titulo {
    margin: 8px 0 0;
    font-size: 18px;
    color: #ff995f;
}

.pessoa-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

.pessoa-form input,
.pessoa-form select {
    width: 100%;
    height: 44px;
    padding: 10px 12px;
    border: 1px solid #ffffff35;
    border-radius: 8px;
    background: #171513;
    color: #fff;
    font: inherit;
}

.pessoa-form input:focus,
.pessoa-form select:focus {
    outline: 2px solid #ff7841;
    outline-offset: 2px;
}

.pessoa-form__acoes,
.pessoa-tabela__acoes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.pessoa-form__acoes > button {
    padding: 12px 20px;
    border: 0;
    border-radius: 8px;
    background: #ff7841;
    color: #171513;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.pessoa-form__acoes > button:hover { background: #ff995f; }

.pessoa-form__acoes a,
.pessoa-tabela__acoes a {
    color: #ff995f;
    text-decoration: none;
}

.pessoa-tabela__acoes form { margin: 0; }

@media (max-width: 800px) {
    .pessoa-form { grid-template-columns: 1fr; }
    .pessoa-form__amplo { grid-column: auto; }
}


/* ==========================================================
   17 — PESSOA: botões Salvar, Novo e Excluir
   ========================================================== */
.pessoa-botoes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.pessoa-botoes form { margin: 0; }

.pessoa-botao {
    padding: 11px 20px;
    border: 1px solid #ffffff35;
    border-radius: 8px;
    background: #171513;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.pessoa-botao--salvar {
    border-color: #ff7841;
    background: #ff7841;
    color: #171513;
}

.pessoa-botao--excluir {
    border-color: #d96666;
    color: #ff9999;
}

.pessoa-botao:hover:not(:disabled) { filter: brightness(1.15); }

.pessoa-botao:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.pessoa-selecionar {
    color: #ff995f;
    text-decoration: none;
}

.pessoa-selecionar:hover { text-decoration: underline; }

.atendimento-tabela tr.pessoa-selecionada {
    background: #ff78411a;
}


/* ==========================================================
   18 — PESSOA: formulário central e lista de nomes à direita
   ========================================================== */
.pessoa-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 24px;
    align-items: start;
    margin-top: 28px;
}

.pessoa-layout .pessoa-card { margin: 0; }

.pessoa-lista {
    padding: 20px;
    border: 1px solid #ffffff24;
    border-radius: 12px;
    background: #25211f;
}

.pessoa-lista label {
    display: block;
    margin-bottom: 14px;
    font-weight: 700;
    color: #ff995f;
}

.pessoa-lista select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ffffff35;
    border-radius: 8px;
    background: #171513;
    color: #fff;
    font: inherit;
}

.pessoa-lista option { padding: 8px 10px; }

.pessoa-lista select:focus {
    outline: 2px solid #ff7841;
    outline-offset: 2px;
}

@media (max-width: 1000px) {
    .pessoa-layout { grid-template-columns: 1fr; }
}


/* 19 — PESSOA: grade atual de 20 colunas; os spans estão na seção 28. */
.pessoa-form {
    display: grid;
    grid-template-columns: repeat(20, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 16px;
}


/* ==========================================================
   20 — PESSOA: seleção das relações (cliente, colaborador e fornecedor)
   ========================================================== */
.pessoa-relacoes {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 12px;
    border: 1px solid #ffffff35;
    border-radius: 8px;
}

.pessoa-relacoes legend {
    padding: 0 6px;
    font-size: 14px;
}

.pessoa-relacoes label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.pessoa-relacoes input[type="checkbox"] {
    width: 16px;
    height: 16px;
    padding: 0;
}



/* ==========================================================
   21 — USUÁRIOS: alteração do nível na tabela
   ========================================================== */
.usuario-nivel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.usuario-nivel select {
    padding: 6px 8px;
    border: 1px solid #ffffff35;
    border-radius: 6px;
    background: #171513;
    color: white;
    font: inherit;
}

.usuario-nivel button {
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: #ff7841;
    color: #171513;
    font: inherit;
    cursor: pointer;
}


/* ==========================================================
   22 — PESSOA: linha divisora entre grupos de campos
   ========================================================== */
.pessoa-form__divisor {
    grid-column: 1 / -1;
    width: 100%;
    border: 0;
    border-top: 1px solid #ffffff35;
    margin: 4px 0;
    border-color: #ff7841;
    color: #ff995f;    
}


/* ==========================================================
   23 — CONTATO PÚBLICO: indicador de vendas em marketplaces
   ========================================================== */
.contato-marketplace {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
}

.contato-marketplace input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}


/* ==========================================================
   24 — PLANOS ATUAIS: vitrine, cards dinâmicos, benefícios e WhatsApp
   ========================================================== */
.planos-vitrine {
    min-height: 100vh;
    padding: 40px 24px;
    color: #fff;
    background:
        radial-gradient(ellipse at top right, #ff784125, transparent 55%),
        #141211;
}

.planos-vitrine,
.planos-vitrine * {
    box-sizing: border-box;
}

.planos-vitrine__container {
    max-width: 1440px;
    margin: 0 auto;
}

.planos-vitrine__cabecalho {
    max-width: 850px;
    margin-bottom: 36px;
}

.planos-vitrine__cabecalho .planos-voltar {
    display: inline-block;
    margin-bottom: 24px;
    color: #eee7e2;
    text-decoration: none;
}

.planos-vitrine__cabecalho h1 {
    margin: 12px 0 18px;
    font-size: clamp(32px, 4vw, 58px);
    line-height: 1.1;
}

.planos-vitrine__cabecalho h1 span {
    color: #ff7841;
}

.planos-vitrine__introducao {
    margin: 0;
    color: #e0dcd9;
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.5;
}

.planos-vitrine__grade {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.plano-oferta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 26px 22px;
    border: 1px solid #ff995f35;
    border-radius: 24px;
    background: linear-gradient(150deg, #30221c, #171513 75%);
}

.plano-oferta__categoria {
    margin: 0 0 6px;
    color: #ff7841;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.plano-oferta h2 {
    margin: 0 0 6px;
    color: #fff;
    font-size: clamp(25px, 2.3vw, 34px);
    line-height: 1.15;
}

.plano-oferta__subtitulo {
    margin: 0;
    color: #eee7e2;
    font-size: 16px;
}

.plano-oferta__periodo {
    margin: 20px 0 14px;
    padding: 9px 10px;
    border: 1px solid #ff995f60;
    border-radius: 30px;
    background: #ff784110;
    color: #ffb16d;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.plano-oferta__descricao {
    flex-grow: 1;
    margin: 0 0 18px;
    color: #eee7e2;
    font-size: 16px;
    line-height: 1.5;
}

.plano-oferta__beneficios {
    display: grid;
    gap: 9px;
    margin: 0 0 24px;
    padding: 18px 0 0;
    border-top: 1px solid #ffffff20;
    list-style: none;
}

.plano-oferta__beneficios li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
}

.plano-oferta__beneficios li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ff7841;
    color: #171513;
    font-weight: 700;
}

.plano-oferta__botao {
    display: block;
    margin-top: auto;
    padding: 14px 10px;
    border-radius: 14px;
    background: linear-gradient(120deg, #ff943d, #ff5b24);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.plano-oferta__botao:hover {
    filter: brightness(1.1);
}

.plano-oferta__botao:focus-visible,
.planos-vitrine__rodape a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

.planos-vitrine__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #ffffff20;
}

.planos-vitrine__rodape p {
    margin: 0;
}

.planos-vitrine__rodape a {
    padding: 12px 18px;
    border-radius: 30px;
    background: #128c3e;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 1100px) {
    .planos-vitrine__grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .planos-vitrine {
        padding: 28px 16px;
    }

    .planos-vitrine__grade {
        grid-template-columns: 1fr;
    }

    .planos-vitrine__rodape {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* 25 — PLANOS: dimensões compactas aprovadas; sobrescrevem os valores acima. */
.planos-vitrine {
    padding: 28px 20px;
}

.planos-vitrine__container {
    max-width: 1280px;
}

.planos-vitrine__cabecalho {
    margin-bottom: 26px;
}

.planos-vitrine__cabecalho h1 {
    font-size: clamp(28px, 3.5vw, 48px);
}

.planos-vitrine__introducao {
    font-size: 17px;
}

.planos-vitrine__grade {
    gap: 16px;
}

.plano-oferta {
    padding: 22px 18px;
    border-radius: 20px;
}

.plano-oferta h2 {
    font-size: 28px;
}

.plano-oferta__subtitulo,
.plano-oferta__descricao {
    font-size: 14px;
}

.plano-oferta__periodo {
    margin: 16px 0 12px;
    padding: 7px 8px;
    font-size: 12px;
}

.plano-oferta__beneficios {
    gap: 7px;
    margin-bottom: 18px;
    padding-top: 14px;
}

.plano-oferta__beneficios li {
    font-size: 13px;
}

.plano-oferta__botao {
    padding: 12px 8px;
    font-size: 14px;
}

.planos-vitrine__rodape {
    margin-top: 22px;
    padding-top: 18px;
    font-size: 14px;
}


/* ==========================================================
   26 — CENTRAL DE ATENDIMENTO: formulário, conversas e fila lateral
   ========================================================== */
.central-contato {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
    align-items: start;
    margin-top: 24px;
}

.central-contato,
.central-contato * {
    box-sizing: border-box;
}

.central-contato__principal {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.central-contato__card,
.central-contato__fila {
    min-width: 0;
    padding: 22px;
    border: 1px solid #ffffff24;
    border-radius: 12px;
    background: #25211f;
}

.central-contato h2 {
    margin: 0 0 16px;
    font-size: 20px;
}

.central-contato__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.central-contato__cabecalho h2 {
    margin: 0;
}

.central-contato__cabecalho span,
.central-contato__fila p,
.central-contato__fila small {
    color: #c4bcb6;
    font-size: 12px;
}

.central-contato__form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.central-contato__form > div {
    min-width: 0;
}

.central-contato__amplo {
    grid-column: span 2;
}

.central-contato__inteiro,
.central-contato__check {
    grid-column: 1 / -1;
}

.central-contato label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
}

.central-contato input,
.central-contato select,
.central-contato textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ffffff35;
    border-radius: 7px;
    background: #171513;
    color: #fff;
    font: inherit;
    font-size: 14px;
}

.central-contato textarea {
    display: block;
    resize: vertical;
    line-height: 1.5;
}

.central-contato input:focus,
.central-contato select:focus,
.central-contato textarea:focus {
    outline: 2px solid #ff7841;
    outline-offset: 2px;
}

.central-contato .central-contato__check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.central-contato__check input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.central-contato__botao {
    margin-top: 12px;
    padding: 10px 16px;
    border: 0;
    border-radius: 7px;
    background: #ff7841;
    color: #171513;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.central-contato__botao:hover {
    filter: brightness(1.1);
}

.central-contato__conversa {
    padding: 14px 0;
    border-top: 1px solid #ffffff20;
}

.central-contato__conversa header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.central-contato__conversa strong {
    color: #ff995f;
}

.central-contato__conversa time {
    color: #c4bcb6;
}

.central-contato__conversa p {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.central-contato__fila select {
    height: 240px;
    padding: 6px;
    font-size: 13px;
}

.central-contato__fila option {
    padding: 8px 6px;
}

.central-contato__fila > small {
    display: block;
    margin-top: 12px;
}

@media (max-width: 1000px) {
    .central-contato {
        grid-template-columns: minmax(0, 1fr) 230px;
    }

    .central-contato__form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 750px) {
    .central-contato {
        grid-template-columns: 1fr;
    }

    .central-contato__fila {
        grid-row: 1;
    }

    .central-contato__fila select {
        height: 180px;
    }
}

@media (max-width: 480px) {
    .central-contato__form {
        grid-template-columns: 1fr;
    }

    .central-contato__amplo {
        grid-column: 1 / -1;
    }
}


.central-contato__fila select {
    height: 240px;
    padding: 6px;
    font-size: 13px;
}

/* ==========================================================
   27 — CENTRAL DE ATENDIMENTO: lista dos finalizados e divisor
   ========================================================== */
.central-contato__fila #contato_finalizado {
    height: 190px;
}

.central-contato__divisor {
    border: 0;
    border-top: 1px solid #ffffff25;
    margin: 22px 0;
}

/* ==========================================================
   28 — PESSOA: largura de cada campo na grade de 20 colunas
   ========================================================== */
.pessoa-campo--tipo { grid-column: span 3; }
.pessoa-campo--nome { grid-column: span 11; }
.pessoa-campo--documento { grid-column: span 6; }

.pessoa-campo--telefone { grid-column: span 4; }
.pessoa-campo--email { grid-column: span 7; }
.pessoa-relacoes { grid-column: span 8; }

.pessoa-campo--endereco { grid-column: span 12; }
.pessoa-campo--numero { grid-column: span 2; }
.pessoa-campo--complemento { grid-column: span 6; }

.pessoa-campo--bairro { grid-column: span 8; }
.pessoa-campo--cidade { grid-column: span 8; }
.pessoa-campo--uf { grid-column: span 2; }
.pessoa-campo--cep { grid-column: span 2; }

.pessoa-lista select {font-size: 13px;}

/* ==========================================================
   29 — RESPONSIVIDADE FINAL: regras após os ajustes de largura
   ========================================================== */
@media (max-width: 800px) {
    .pessoa-form { grid-template-columns: 1fr; }
    .pessoa-form > div,
    .pessoa-form > fieldset,
    .pessoa-form > hr { grid-column: 1 / -1; }
}

@media (max-width: 750px) {
    .central-contato__fila select,
    .central-contato__fila #contato_finalizado { height: 180px; }
}