/* Páginas da loja de cada MCP (/mcp/<mcp>/plans, checkout, thank-you, payment-failed, renew).
   Usam o design system do site principal (backend.css + frontend.css, escopo .site) e os mesmos tokens --s-*;
   aqui só moram os componentes de formulário, plano e confirmação. Sem efeitos de cursor: nos campos do cartão (iframes do Mercado Pago) o cursor
   customizado sumiria, então a loja usa o cursor normal. */
.loja {
	--verde: var(--s-green);
	--ambar: var(--s-amber);
	--bg: var(--s-bg);
	--bg2: var(--s-bg2);
	--linha: rgba(51, 255, 51, 0.2);
	--dim: rgba(51, 255, 51, 0.72);
	--erro: #ff6b5e;
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-mode="frontend"] #site.loja { cursor: auto; }
.loja a:focus-visible, .loja button:focus-visible, .loja input:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }

.faixa-teste { background: #ffb000; color: #0d0d0d; text-align: center; padding: 0.4rem 1rem; font: 500 0.85rem 'Fira Code', ui-monospace, monospace; }

.loja main { max-width: 72rem; margin: 0 auto; padding: 3rem 1.5rem 5rem; display: grid; gap: 2.5rem; flex: 1 0 auto; width: 100%; box-sizing: border-box; align-content: start; }
/* o rodapé fica no fim da janela mesmo quando a página é curta (a faixa do modo de teste entra na conta: a altura é a do corpo da página) */
body:has(#site.loja) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
html[data-mode="frontend"] #site.loja { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; } /* mais específico que o #site da home (display: block e altura de uma tela) */
.loja .cabeca { display: grid; gap: 0.75rem; max-width: 46rem; }
.loja .cabeca h1 { font-size: clamp(2.4rem, 6vw, 3.75rem); line-height: 0.95; letter-spacing: -0.025em; }
.loja h2 { font-size: 1.9rem; line-height: 1.1; }
.loja h3 { font-size: 1.6rem; line-height: 1.1; }
.loja .cabeca p, .loja .inclui, .loja .mini, .loja .seguro { font-size: 0.875rem; line-height: 1.7; color: var(--dim); }
.loja .rotulo { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ambar); }
.loja main p a, .loja .aviso a, .loja .erro a { color: var(--ambar); text-decoration: underline; text-underline-offset: 3px; }
.loja main p a:hover { color: var(--verde); }
.loja strong { font-weight: 500; color: var(--verde); }

/* card: o mesmo desenho do s-card da home (borda verde a 20%, cantos retos), sem a altura mínima dela */
.loja .cartao { position: relative; border: 1px solid var(--linha); background: rgba(10, 26, 10, 0.5); padding: 1.75rem; display: grid; gap: 1rem; align-content: start; }
.loja .cartao.destaque { border-color: var(--verde); background: var(--bg2); }

/* planos */
.loja .planos { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .loja .planos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.loja .plano .rotulo { min-height: 1rem; }
.loja .plano .preco { font-family: 'VT323', ui-monospace, monospace; font-size: 3.5rem; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; color: var(--verde); }
.loja .plano .preco small { font-size: 0.875rem; letter-spacing: 0; color: var(--ambar); }
.loja .plano .ref { font-size: 0.75rem; line-height: 1.6; color: var(--dim); }
.loja .plano ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.85rem; color: var(--dim); }
.loja .plano li::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 0.6rem; vertical-align: middle; background: var(--ambar); }
.loja .plano .bump-dica { font-size: 0.8rem; line-height: 1.6; padding-top: 0.9rem; border-top: 1px solid var(--linha); color: var(--dim); }
.loja .plano .btn { align-self: end; }
.loja .inclui { display: grid; gap: 0.6rem; max-width: 52rem; }
.loja .inclui h2 { margin-top: 0.5rem; }

/* botões: contorno verde que se preenche ao passar o mouse, como o botão da chamada final da home */
.loja .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.75rem 1.5rem;
	border: 1px solid var(--verde); color: var(--verde); font: 500 0.8125rem 'Fira Code', ui-monospace, monospace; text-transform: uppercase;
	letter-spacing: 0.05em; text-decoration: none; cursor: pointer;
	/* a mesma animação dos botões do painel do admin: o contorno enche de verde de baixo para cima ao passar o mouse (ou ao focar pelo teclado) */
	background: linear-gradient(var(--verde), var(--verde)) left bottom / 100% 0 no-repeat transparent;
	transition: background-size 0.5s var(--ease), color 0.3s, border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.loja .btn::before { content: '> '; }
.loja .btn:hover:not(:disabled), .loja .btn:focus-visible:not(:disabled) { background-size: 100% 100%; color: var(--bg); box-shadow: 0 0 30px rgba(51, 255, 51, 0.15); }
.loja .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.loja .btn.sec { border-color: rgba(51, 255, 51, 0.35); color: var(--dim); }
.loja .btn.sec:hover:not(:disabled), .loja .btn.sec:focus-visible:not(:disabled) { color: var(--bg); border-color: var(--verde); }

/* checkout */
.loja .checkout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 52rem) { .loja .checkout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .loja .checkout .resumo { position: sticky; top: 6rem; } }
.loja .form { display: grid; gap: 1.25rem; }
.loja .form fieldset { border: 1px solid var(--linha); margin: 0; padding: 1.25rem; display: grid; gap: 1rem; min-width: 0; }
.loja .form legend { font-family: 'VT323', ui-monospace, monospace; font-size: 1.4rem; text-transform: uppercase; padding: 0 0.5rem; color: var(--verde); }
.loja .campo { display: grid; gap: 0.35rem; min-width: 0; }
.loja .campo label, .loja .campo .lbl { font-size: 0.7rem; color: var(--ambar); text-transform: uppercase; letter-spacing: 0.1em; }
.loja .campo input[type='text'], .loja .campo input[type='email'], .loja .campo input[type='password'] {
	width: 100%; min-height: 3rem; padding: 0.6rem 0.8rem; background: var(--bg); color: var(--verde); border: 1px solid var(--linha);
	font: 0.9375rem 'Fira Code', ui-monospace, monospace; border-radius: 0;
}
.loja .campo input::placeholder { color: rgba(51, 255, 51, 0.35); }
.loja .campo input:focus { outline: 2px solid var(--ambar); outline-offset: 0; border-color: var(--ambar); }
.loja .linha2 { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
/* os campos do cartão são iframes do Mercado Pago: o contêiner dá a altura e o fundo claro (o texto digitado é escuro) */
.loja .campo-mp { min-height: 3rem; height: 3rem; background: var(--bg); border: 1px solid var(--linha); padding: 0 0.8rem; display: flex; align-items: center; }
.loja .campo-mp:focus-within { outline: 2px solid var(--ambar); outline-offset: 0; border-color: var(--ambar); }
.loja .campo-mp iframe { height: 100% !important; }
.loja .consent { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.85rem; line-height: 1.6; color: var(--dim); }
.loja .termos-aceite { margin: 0; font-size: 0.78rem; line-height: 1.6; color: var(--dim); }
.loja .termos-aceite a { color: var(--ambar); text-decoration: underline; text-underline-offset: 3px; }
.loja .termos-aceite a:hover { color: var(--verde); }
.loja .consent input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; accent-color: var(--verde); flex: none; }

/* order bump: o segundo MCP, a 1/3 do valor, marcado pelo cliente na própria página do checkout */
.loja .bump { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; align-items: start; padding: 1.1rem 1.25rem; border: 1px dashed var(--ambar); background: rgba(255, 176, 0, 0.06); cursor: pointer; }
.loja .bump input { width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; accent-color: var(--ambar); }
.loja .bump .t { display: block; font-size: 0.95rem; font-weight: 500; color: var(--ambar); }
.loja .bump .d { display: block; margin-top: 0.3rem; font-size: 0.8rem; line-height: 1.6; color: var(--dim); }
.loja .bump:has(input:checked) { border-style: solid; background: rgba(255, 176, 0, 0.12); }

.loja .aviso { border: 1px solid var(--ambar); background: rgba(255, 176, 0, 0.08); padding: 1rem 1.15rem; display: grid; gap: 0.4rem; font-size: 0.875rem; line-height: 1.7; color: var(--dim); }
.loja .aviso strong { color: var(--ambar); }
.loja .erro { border: 1px solid var(--erro); background: rgba(255, 107, 94, 0.08); color: var(--erro); padding: 0.85rem 1rem; font-size: 0.875rem; line-height: 1.6; }
.loja .ok { border: 1px solid var(--verde); background: rgba(51, 255, 51, 0.06); padding: 1rem 1.15rem; font-size: 0.9rem; }

.loja .resumo dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 0; font-size: 0.8rem; }
.loja .resumo dt { color: var(--dim); }
.loja .resumo dd { margin: 0; text-align: right; color: var(--verde); }
.loja .resumo h2 { font-size: 1.6rem; }
.loja .resumo .total { font-family: 'VT323', ui-monospace, monospace; font-size: 2.6rem; color: var(--verde); line-height: 1; }

/* confirmação */
.loja .passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.loja .passos li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.75rem; align-items: start; padding: 0.9rem 0; border-top: 1px solid var(--linha); }
.loja .passos .n { font-family: 'VT323', ui-monospace, monospace; font-size: 1.8rem; line-height: 1; color: var(--dim); }
.loja .passos li.feito .n, .loja .passos li.agora .n { color: var(--ambar); }
.loja .passos .t { font-size: 0.9rem; color: var(--verde); }
.loja .passos li.feito .t::after { content: '  ✓'; color: var(--verde); }
.loja .passos li.agora .t::after { content: '  …'; color: var(--ambar); animation: loja-pisca 1.2s steps(2) infinite; }
.loja .passos .d { display: block; font-size: 0.8rem; line-height: 1.6; color: var(--dim); }
@keyframes loja-pisca { 50% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .loja .passos li.agora .t::after { animation: none; } }
.loja .chave { font: 700 clamp(1.1rem, 4.5vw, 1.8rem) 'Fira Code', ui-monospace, monospace; letter-spacing: 0.06em; word-break: break-all; color: var(--ambar); border: 1px dashed var(--ambar); padding: 1rem; }
.loja .acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.loja .licencas { display: grid; gap: 1.25rem; margin: 1.25rem 0 0.75rem; }
.loja .licenca { display: grid; gap: 0.6rem; justify-items: start; }
.loja .licenca-nome { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ambar); }
.loja .licenca .chave { width: 100%; }
.loja #pago h2 { margin-top: 2.25rem; }
.loja #pago p, .loja #pago .acoes, .loja #pago .aviso { margin-top: 1rem; }

.s-brand-icone { height: 1.75rem; width: auto; flex: none; }

/* rodapé enxuto (o da home tem a altura da tela inteira) */
/* o rodapé é o da home (frontend.css); nas páginas da loja ele é mais baixo, como nas páginas dos programas (mcp.css) */
.loja .s-foot-wrap { min-height: 0; padding-top: 4rem; }
.loja .s-foot-top { margin-bottom: 3rem; }
@media (min-width: 768px) { .loja .s-foot-top > .s-foot-status:only-child { margin-left: auto; } }
.loja .lp-legal { display: grid; gap: 0.75rem; max-width: 62rem; margin-bottom: 3rem; font-size: 0.7rem; line-height: 1.7; color: rgba(51, 255, 51, 0.5); }
.loja .lp-legal a { color: rgba(51, 255, 51, 0.8); border-bottom: 1px solid rgba(51, 255, 51, 0.3); text-decoration: none; }
/* rodapé do portal do cliente (dash.alcateia.digital): textos à esquerda, (C) à direita, marca d'água embaixo; no celular, um embaixo do outro */
.loja .rodape-portal { padding: 3.5rem 1.5rem 0; }
.loja .rodape-portal .s-foot { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'legal' 'status' 'marca'; gap: 2rem; align-items: start; }
.loja .rodape-portal .lp-legal { grid-area: legal; margin: 0; gap: 0.9rem; max-width: 46rem; font-size: 0.75rem; line-height: 1.75; }
.loja .rodape-portal .s-foot-top { grid-area: status; margin: 0; width: auto; }
.loja .rodape-portal .s-foot-status { text-align: left; white-space: nowrap; }
.loja .rodape-portal .s-foot-brand { grid-area: marca; margin-top: 1rem; padding-top: 1.5rem; }
.loja .rodape-portal .s-foot-brand h2 { font-size: min(15vw, 13rem); }
@media (min-width: 768px) { .loja .rodape-portal .s-foot { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'legal status' 'marca marca'; column-gap: 3rem; } .loja .rodape-portal .s-foot-status { text-align: right; } }

@media (max-width: 640px) { .loja main { padding: 2rem 1rem 3.5rem; } .loja .acoes .btn, .loja .btn { width: 100%; } }

/* área do cliente (/mcp/account): entrar, primeiro acesso, escolher a senha e o painel */
.loja [hidden] { display: none !important; }
.loja main.conta { max-width: 32rem; padding-top: 4.5rem; }
.loja main.conta-painel { max-width: 60rem; padding-top: 2.5rem; gap: 2rem; }
.loja .conta-card { border: 1px solid var(--linha); background: rgba(10, 26, 10, 0.5); padding: 2.25rem 2rem 2rem; display: grid; gap: 1.75rem; align-content: start; }
.loja .conta-tela { display: grid; gap: 1.5rem; scroll-margin-top: 30rem; }   /* o link com # (ex.: /#esqueci) não rola a página para baixo do cabeçalho fixo */   /* título, explicação, formulário: um respiro só entre os blocos */
.loja .conta-cab { display: grid; gap: 0.85rem; }
.loja .conta-card .rotulo { color: var(--ambar); font-size: 0.75rem; line-height: 1.2; }
.loja .conta-card h1 { font-size: clamp(2rem, 7vw, 2.6rem); line-height: 1; margin: 0; }
.loja .conta-card p { margin: 0; font-size: 0.875rem; line-height: 1.7; color: var(--dim); }
.loja .conta-card form { gap: 1.5rem; }
.loja .conta-card .campo { gap: 0.55rem; }
.loja .conta-card .btn { width: 100%; margin-top: 0.25rem; }
.loja .abas { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--linha); margin: -0.5rem 0 0.25rem; }
.loja .abas button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0.95rem 0; font: 500 0.75rem 'Fira Code', ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); cursor: pointer; }
.loja .abas button[aria-selected='true'] { color: var(--verde); border-bottom-color: var(--verde); }
.loja .abas button:hover { color: var(--verde); }
.loja .campo-senha { position: relative; display: block; }
.loja .campo-senha input { padding-right: 3.2rem; }
.loja .campo-senha .mostrar { position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.5rem; min-height: 2.5rem; padding: 0; background: none; border: 0; color: var(--ambar); cursor: pointer; }
.loja .campo-senha .mostrar:hover { color: var(--verde); }
/* os requisitos da senha: lista simples com o marcador que acende (○ âmbar, ✓ verde); a classe é "cumprida" porque ".ok" é a caixa de confirmação */
.loja .requisitos { list-style: none; margin: 0.35rem 0 0; padding: 0.2rem 0 0.2rem 1rem; border-left: 2px solid var(--linha); display: grid; gap: 0.6rem; font-size: 0.75rem; line-height: 1.5; color: var(--dim); }
.loja .requisitos li { display: flex; gap: 0.65rem; align-items: baseline; }
.loja .requisitos li::before { content: '○'; flex: 0 0 auto; color: var(--ambar); }
.loja .requisitos li.cumprida { color: var(--verde); }
.loja .requisitos li.cumprida::before { content: '✓'; color: var(--verde); }
.loja .dica { font-size: 0.75rem; color: var(--dim); }
.loja .conta-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; font-size: 0.8125rem; }
.loja .conta-card .conta-rodape { justify-content: center; padding-top: 1.35rem; border-top: 1px dashed var(--linha); }   /* o link de baixo fica separado do botão */
.loja .link-botao, .loja .conta-rodape a { color: var(--ambar); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.loja .link-botao:hover, .loja .conta-rodape a:hover { color: var(--verde); }
.loja .ok-aviso { border: 1px solid var(--verde); background: rgba(51, 255, 51, 0.06); padding: 0.9rem 1.1rem; font-size: 0.875rem; line-height: 1.6; }
.loja .enviado { display: grid; gap: 1.35rem; }
.loja .enviado .link-botao { justify-self: center; }
.loja .enviado .email { color: var(--ambar); overflow-wrap: anywhere; }

/* painel */
.loja .painel-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; }
.loja .painel-topo h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1; margin: 0; }
.loja .painel-topo .mini { margin: 0.4rem 0 0; overflow-wrap: anywhere; }
.loja .painel h2 { font-size: 1.5rem; margin: 0 0 0.9rem; }
.loja .painel section { display: grid; gap: 1rem; align-content: start; }
.loja .assinaturas { display: grid; gap: 1.25rem; }
.loja .assinatura { border: 1px solid var(--linha); background: rgba(10, 26, 10, 0.5); display: grid; gap: 0; }
.loja .assinatura > * { padding: 1.1rem 1.4rem; }
.loja .assinatura > * + * { border-top: 1px solid var(--linha); }
.loja .ass-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; }
.loja .ass-topo h3 { font-size: 1.35rem; margin: 0; }
.loja .ass-meta { font-size: 0.8125rem; line-height: 1.6; color: var(--dim); display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.loja .ass-meta b { font-weight: 500; color: var(--verde); }
.loja .selo { display: inline-block; padding: 1px 10px; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--verde); color: var(--verde); white-space: nowrap; }
.loja .selo.aviso-chip { border-color: var(--ambar); color: var(--ambar); }
.loja .selo.ruim { border-color: var(--erro); color: var(--erro); }
.loja .chave-linha { display: grid; gap: 0.7rem; }
.loja .chave-linha .nome { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ambar); display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-items: baseline; }
.loja .chave-linha .nome span { color: var(--dim); letter-spacing: 0; text-transform: none; }
.loja .lic-chave { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.loja .lic-chave code { font: 700 1rem 'Fira Code', ui-monospace, monospace; letter-spacing: 0.05em; color: var(--ambar); border: 1px dashed var(--ambar); padding: 0.4rem 0.7rem; overflow-wrap: anywhere; }
.loja .btn.pequeno { min-height: 2.25rem; padding: 0.35rem 0.9rem; font-size: 0.7rem; width: auto; }
.loja .btn.pequeno::before { content: none; }   /* "none", não '': o '' ainda deixa uma caixa vazia no flex e o gap empurra o texto para a direita */
.loja details.computadores { font-size: 0.8125rem; color: var(--dim); }
.loja details.computadores summary { cursor: pointer; color: var(--dim); padding: 0.2rem 0; }
.loja details.computadores summary:hover { color: var(--verde); }
.loja details.computadores[open] summary { margin-bottom: 0.6rem; }
.loja .computadores-lista { display: grid; gap: 0.55rem; }
.loja .computador { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.4rem 1rem; }
.loja .computador.liberado { opacity: 0.75; }
.loja .ass-acoes { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.loja .escolha, .loja .confirmar { border: 1px solid var(--ambar); background: rgba(255, 176, 0, 0.08); padding: 0.9rem 1rem; display: grid; gap: 0.7rem; font-size: 0.8125rem; line-height: 1.6; }
.loja .escolha .opcoes { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.loja .vazio { border: 1px dashed var(--linha); padding: 1.5rem; text-align: center; font-size: 0.875rem; line-height: 1.7; color: var(--dim); }
.loja details.bloco { border: 1px solid var(--linha); }
.loja details.bloco > summary { cursor: pointer; padding: 0.9rem 1.2rem; font-size: 0.875rem; color: var(--verde); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.loja details.bloco > summary::after { content: '+'; color: var(--ambar); }
.loja details.bloco[open] > summary::after { content: '–'; }
.loja details.bloco > summary::-webkit-details-marker { display: none; }
.loja details.bloco > div { padding: 0 1.2rem 1.2rem; display: grid; gap: 1rem; }
.loja .tabela-rolavel { overflow-x: auto; border: 1px solid var(--linha); }
.loja .tabela-rolavel table { width: 100%; border-collapse: collapse; min-width: 28rem; font-size: 0.8125rem; }
.loja .tabela-rolavel th { text-align: left; padding: 0.6rem 0.9rem; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ambar); border-bottom: 1px solid var(--linha); }
.loja .tabela-rolavel td { padding: 0.6rem 0.9rem; border-bottom: 1px solid rgba(51, 255, 51, 0.1); color: var(--dim); }
.loja .tabela-rolavel tr:last-child td { border-bottom: 0; }
.loja .dados-grade { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .loja .dados-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.loja .dados-grade form { display: grid; gap: 0.9rem; align-content: start; }
.loja .dados-grade h3 { font-size: 1.2rem; margin: 0; }
@media (max-width: 640px) { .loja main.conta { padding-top: 2rem; } .loja .conta-card { padding: 1.75rem 1.25rem 1.5rem; } .loja .assinatura > * { padding: 1rem; } .loja .conta-card .btn { width: 100%; } .loja .btn.pequeno { width: auto; } }

/* portal do cliente: contratos (site e servidor) e cobranças (boleto e Pix) */
.loja .contratos { display: grid; gap: 0.9rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .loja .contratos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.loja .contratos .assinatura h3 { font-size: 1.1rem; }
.loja .cobrancas { display: grid; gap: 1.25rem; }
.loja .linha-digitavel { font: 500 0.8125rem 'Fira Code', ui-monospace, monospace; color: var(--ambar); overflow-wrap: anywhere; }
.loja .pix { display: grid; gap: 1rem; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .loja .pix { grid-template-columns: 11rem minmax(0, 1fr); } }
.loja .pix img { width: 11rem; max-width: 100%; height: auto; aspect-ratio: 1; background: #fff; padding: 0.5rem; image-rendering: pixelated; }
.loja .pix-lado { display: grid; gap: 0.7rem; min-width: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--dim); }
.loja .pix-codigo { font: 500 0.75rem 'Fira Code', ui-monospace, monospace; color: var(--ambar); border: 1px dashed var(--ambar); padding: 0.5rem 0.7rem; overflow-wrap: anywhere; word-break: break-all; }

/* Portal de Suporte: chamados (abrir, conversa, responder) */
.loja .campo textarea, .loja .campo select { width: 100%; padding: 0.6rem 0.8rem; background: var(--bg); color: var(--verde); border: 1px solid var(--linha); font: 0.9375rem 'Fira Code', ui-monospace, monospace; border-radius: 0; }
.loja .campo textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
.loja .campo select { min-height: 3rem; }
.loja .campo textarea:focus, .loja .campo select:focus { outline: 2px solid var(--ambar); outline-offset: 0; border-color: var(--ambar); }
.loja .par { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .loja .par { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.loja .chamado-conversa { display: grid; gap: 0.7rem; }
.loja .chamado-msg { border-left: 2px solid var(--linha); padding: 0.3rem 0 0.3rem 0.9rem; display: grid; gap: 0.25rem; }
.loja .chamado-msg.alcateia { border-left-color: var(--ambar); }
.loja .chamado-msg .quem { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ambar); }
.loja .chamado-msg p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--verde); white-space: pre-line; overflow-wrap: anywhere; }
.loja .chamado-responder { display: grid; gap: 0.7rem; }
.loja .campo input[type='file'] { width: 100%; min-width: 0; font: 0.8125rem 'Fira Code', ui-monospace, monospace; color: var(--dim); }
.loja .campo input[type='file']::file-selector-button { margin-right: 0.8rem; padding: 0.5rem 0.9rem; background: linear-gradient(var(--ambar), var(--ambar)) left bottom / 100% 0 no-repeat transparent; color: var(--ambar); border: 1px solid var(--ambar); font: inherit; cursor: pointer; transition: background-size 0.5s var(--ease), color 0.3s; }
.loja .campo input[type='file']:hover::file-selector-button, .loja .campo input[type='file']:focus-visible::file-selector-button { background-size: 100% 100%; color: var(--bg); }
.loja .campo input[type='file']:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
.loja .chamado-anexos { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-start; }
.loja .chamado-anexos img, .loja .chamado-anexos video { display: block; max-width: min(100%, 20rem); max-height: 15rem; border: 1px solid var(--linha); background: var(--bg); }
.loja .anexo-imagem { display: block; max-width: 100%; }
.loja .anexo-video { display: grid; gap: 0.3rem; max-width: 100%; }
.loja .anexo-link, .loja .anexo-removido { font-size: 0.8125rem; overflow-wrap: anywhere; }
.loja .chamado-anexos > .anexo-link, .loja .chamado-anexos > .anexo-removido { flex-basis: 100%; }
.loja .anexo-link { color: var(--ambar); }
.loja .anexo-removido { color: var(--dim); font-style: italic; }

/* portal do cliente (dash.alcateia.digital): o rótulo "| Portal do cliente" ao lado da marca, como o "> admin" do painel do admin */
.loja .s-marca { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; min-width: 0; }
.loja .s-portal { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-weight: 500; font-size: 0.875rem; letter-spacing: 0.04em; color: var(--ambar); white-space: nowrap; }

/* checkout do PC: o campo do cupom e o aviso do resultado */
.loja .cupom-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; align-items: stretch; }
.loja .cupom-linha .btn { white-space: nowrap; }
.loja .mini.cupom-ok { color: var(--verde); }
.loja .mini.cupom-erro { color: var(--erro); }