/* Página de contratação (/assinar/): complementa site.css */
.assinar-topo .miolo { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 56px; }
.assinar .aviso { padding: 12px 16px; border-radius: 10px; background: var(--verde-suave); color: var(--verde-escuro); font-weight: 600; }
.assinar .aviso.error { background: #FDECEC; color: #B42318; }
.periodos { display: inline-flex; border: 1px solid var(--linha); border-radius: 999px; padding: 4px; background: var(--superficie); margin-top: 14px; }
.periodo { border: 0; background: transparent; padding: 8px 18px; border-radius: 999px; font: inherit; font-weight: 700; color: var(--texto-suave); cursor: pointer; }
.periodo.ativo { background: var(--azul); color: #fff; }
.periodo small { font-weight: 500; }
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; max-width: 1000px; margin: 0 auto 56px; }
.plano { position: relative; background: var(--superficie); border: 2px solid var(--linha); border-radius: var(--raio); padding: 26px 24px 24px; box-shadow: var(--sombra); cursor: pointer; display: flex; flex-direction: column; transition: transform .15s, border-color .15s; }
.plano:hover { transform: translateY(-3px); }
.plano input[type=radio] { position: absolute; opacity: 0; }
.plano.selecionado { border-color: var(--verde); box-shadow: var(--sombra-grande); }
.plano.destaque { border-color: var(--azul-claro); }
.plano.indisponivel { opacity: .45; cursor: not-allowed; }
.selo-destaque { position: absolute; top: -12px; left: 20px; background: var(--azul); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .05em; padding: 3px 12px; border-radius: 999px; text-transform: uppercase; }
.plano h3 { margin: 0 0 8px; font-size: 20px; color: var(--azul-escuro); }
.plano .preco { font-size: 34px; font-weight: 800; color: var(--azul-escuro); margin: 0; letter-spacing: -.02em; }
.plano .preco small { font-size: 16px; font-weight: 700; vertical-align: top; }
.plano .preco span { font-size: 14px; font-weight: 600; color: var(--texto-suave); margin-left: 2px; }
.plano .empresas { color: var(--texto-suave); font-size: 14px; margin: 4px 0 14px; }
.plano ul { list-style: none; padding: 0; margin: 0 0 18px; font-size: 14.5px; }
.plano li { padding-left: 24px; position: relative; margin-bottom: 6px; }
.plano li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 7px; border-left: 2.5px solid var(--verde); border-bottom: 2.5px solid var(--verde); transform: rotate(-45deg); }
.plano .escolher { margin-top: auto; }
.plano.selecionado .escolher { background: var(--verde-escuro); }
.plano.selecionado .escolher::before { content: "✓ "; }
.dados { max-width: 760px; margin: 0 auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 32px; box-shadow: var(--sombra); }
.dados .cabeca { margin-bottom: 22px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; color: var(--texto); }
.campo.largo { grid-column: 1 / -1; }
.campo input { font: inherit; font-weight: 500; padding: 11px 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--fundo); color: var(--texto); }
.campo input:focus { outline: 2px solid var(--azul-claro); border-color: transparent; }
.campo.erro input { border-color: #B42318; }
.campo small { font-weight: 500; color: var(--texto-suave); font-size: 12.5px; }
.campo .msg-erro { color: #B42318; font-weight: 600; }
.dominio { display: flex; align-items: center; gap: 6px; }
.dominio input { flex: 1; min-width: 0; }
.dominio em { font-style: normal; color: var(--texto-suave); font-weight: 600; white-space: nowrap; }
.termos { margin: 18px 0 6px; font-size: 14px; }
.termos summary { cursor: pointer; font-weight: 700; color: var(--azul-claro); }
.termos pre { white-space: pre-wrap; font: inherit; color: var(--texto-suave); max-height: 220px; overflow: auto; background: var(--fundo); padding: 12px; border-radius: 10px; }
.aceite { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 18px; font-size: 14.5px; }
.aceite.erro { color: #B42318; }
.resumo { background: var(--verde-suave); color: var(--verde-escuro); padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 15px; }
.botao.grande { width: 100%; padding: 16px; font-size: 17px; border: 0; cursor: pointer; font-family: inherit; }
.seguro { font-size: 13.5px; color: var(--texto-suave); text-align: center; margin: 14px 0 0; }
.miolo.estreito { max-width: 720px; }
.cartao-situacao { background: var(--superficie); border: 1px solid var(--linha); border-left: 6px solid var(--azul-claro); border-radius: var(--raio); padding: 32px; box-shadow: var(--sombra); }
.cartao-situacao.paga, .cartao-situacao.ativa { border-left-color: var(--verde); }
.cartao-situacao.cancelada { border-left-color: #B42318; }
.cartao-situacao h2 { margin: 0 0 10px; color: var(--azul-escuro); font-size: 26px; }
.resumo-ass { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--linha); }
.resumo-ass dt { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); font-weight: 700; }
.resumo-ass dd { margin: 2px 0 0; font-weight: 600; }
@media (max-width: 720px) { .campos { grid-template-columns: 1fr; } .dados { padding: 20px; } .abertura h1 { font-size: 32px; } }
#dados { scroll-margin-top: 90px; }
.aceite span { flex: 1; }
.aceite a { font-weight: 700; }
.termos-pagina { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 36px 40px; box-shadow: var(--sombra); font-size: 15px; line-height: 1.65; }
.termos-pagina h1 { font-size: 24px; color: var(--azul-escuro); margin: 0 0 18px; line-height: 1.3; }
.termos-pagina h2 { font-size: 17px; color: var(--azul-escuro); margin: 26px 0 8px; }
.termos-pagina p { margin: 0 0 10px; text-align: justify; }
@media (max-width: 720px) { .termos-pagina { padding: 22px 18px; } .termos-pagina p { text-align: left; } }
@media print { .topo, .rodape { display: none; } .termos-pagina { border: 0; box-shadow: none; padding: 0; } }
.cartao-situacao.vencida { border-left-color: #D97706; }
/* planos na página inicial do site: o cartão inteiro é um link para a contratação */
.planos-site { margin-bottom: 0; }
a.plano { color: inherit; text-decoration: none; }
a.plano:hover { border-color: var(--verde); }
.plano .anual-detalhe { color: var(--verde-escuro, #1F7A2D); font-size: 13px; font-weight: 600; margin: 2px 0 6px; }
/* Plano com preço por usuário (21/10/2026): descontos no cartão, quantidade de usuários e total na hora */
:root { --erro: #B42318; --erro-suave: #FDECEC; }
@media (prefers-color-scheme: dark) { :root { --erro: #FF8A80; --erro-suave: #3A1C1C; } }
.assinar .aviso.error { background: var(--erro-suave); color: var(--erro); }
.campo.erro input { border-color: var(--erro); }
.campo .msg-erro, .aceite.erro { color: var(--erro); }
.plano .faixas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 2px; font-size: 13px; }
.plano .faixas span { color: var(--texto-suave); font-weight: 700; width: 100%; }
.plano .faixas em { font-style: normal; font-weight: 700; color: var(--verde-escuro); background: var(--verde-suave); border-radius: 999px; padding: 2px 10px; }
.qtd { max-width: 760px; margin: 0 auto 32px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 32px; box-shadow: var(--sombra); scroll-margin-top: 90px; }
.qtd .cabeca { margin-bottom: 20px; }
.qtd-grade { display: grid; grid-template-columns: minmax(200px, 240px) 1fr; gap: 20px; align-items: start; }
.contador { display: flex; align-items: stretch; gap: 0; }
.contador input { flex: 1; min-width: 0; text-align: center; font-size: 20px; font-weight: 800; border-radius: 0; -moz-appearance: textfield; appearance: textfield; }
.contador input::-webkit-outer-spin-button, .contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mais-menos { width: 46px; border: 1px solid var(--linha); background: var(--fundo); color: var(--azul-escuro); font: inherit; font-size: 22px; font-weight: 800; cursor: pointer; }
.mais-menos:first-child { border-radius: 10px 0 0 10px; border-right: 0; }
.mais-menos:last-child { border-radius: 0 10px 10px 0; border-left: 0; }
.mais-menos:hover { background: var(--azul-suave); }
.calculo { display: grid; gap: 10px; }
.calc-linha { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; text-align: left; font: inherit; color: var(--texto); background: var(--fundo); border: 2px solid var(--linha); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.calc-linha.ativo { border-color: var(--verde); background: var(--verde-suave); }
.calc-rotulo { font-weight: 700; color: var(--azul-escuro); }
.calc-rotulo small { font-weight: 500; color: var(--texto-suave); }
.calc-total { font-size: 20px; font-weight: 800; color: var(--azul-escuro); white-space: nowrap; }
.calc-detalhe { grid-column: 1 / -1; font-size: 13px; color: var(--texto-suave); }
.calc-linha.ativo .calc-detalhe { color: var(--verde-escuro); }
@media (max-width: 720px) { .qtd { padding: 20px; } .qtd-grade { grid-template-columns: 1fr; } }