/*
 * static/css/site_plataforma.css — a casca das páginas públicas da plataforma.
 *
 * As SEÇÕES são desenhadas pelo CSS da loja (loja_secoes.css e companhia): é
 * o mesmo editor, e um segundo conjunto de regras para a mesma seção seria
 * corrigir cada ajuste duas vezes. O que mora aqui é só o que envolve elas —
 * topo, rodapé e o aviso de prévia.
 *
 * Estas telas não passam pelo `base.html`, então nada daqui alcança as telas
 * de dentro do sistema, nem as do painel da plataforma. É a mesma garantia física do
 * `entrada.css`.
 */

.site-plataforma {
  background: var(--bg, #09090b);
  color: var(--text, #fafafa);
}

/* O <main> das seções ocupa a largura inteira: quem limita é o `.sec-inner`
   de cada seção, como na loja. */
.plataforma-conteudo {
  display: block;
}

/* ── Topo ─────────────────────────────────────────────────────────────────── */

.plataforma-topo {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: var(--header-bg, rgba(9, 9, 11, .85));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border, #3f3f46);
}

.plataforma-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text, #fafafa);
  text-decoration: none;
}

.plataforma-marca-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--lp, #7c5cff), var(--ls, #a78bfa));
  color: #fff;
  font-size: .9rem;
}

/* Mesmo papel do `.entrada-marca-logo`, na medida desta barra - que e mais
   baixa que a das portas. */
.plataforma-marca-logo {
  height: 32px;
  max-width: 200px;
  object-fit: contain;
  border-radius: 8px;
}

.plataforma-topo-links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: .85rem;
}

.plataforma-topo-links a {
  color: var(--text2, #a1a1aa);
  text-decoration: none;
}

.plataforma-topo-links a:hover {
  color: var(--text, #fafafa);
}

.plataforma-topo-links .btn {
  color: #fff;
}

/* ── Rodapé ───────────────────────────────────────────────────────────────── */

.plataforma-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 28px 24px;
  border-top: 1px solid var(--border, #3f3f46);
  color: var(--text3, #71717a);
  font-size: .8rem;
}

.plataforma-rodape a {
  color: var(--text2, #a1a1aa);
  text-decoration: none;
}

/* ── Aviso de prévia ──────────────────────────────────────────────────────── */

.plataforma-previa-aviso {
  padding: 10px 16px;
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  color: #111;
  background: #facc15;
}

/* ── As seções nas PORTAS ─────────────────────────────────────────────────── */
/*
 * Nas quatro telas com formulário, a apresentação emoldura o que o sistema
 * monta. Ali as seções entram mais apertadas do que numa landing: cada linha
 * acima do campo de senha é uma linha entre a pessoa e o que ela veio fazer.
 */

.entrada .sec {
  padding: 40px 0;
}

.entrada .sec-hero {
  padding: 48px 0 28px;
}

.entrada .sec + .sec {
  border-top: 0;
}

/*
 * ...menos na HOME publicada, onde as seções SÃO a página.
 *
 * A regra acima vale para as quatro portas, e pegava a home junto: ali o 40px
 * cravado vencia o `--densidade` de `loja_secoes.css`, e o seletor "Espaço
 * entre seções" do painel de cores não mudava coisa nenhuma. Controle que não
 * responde é pior do que controle que não existe - quem mexe conclui que o
 * editor não salvou.
 */
body.site-plataforma .sec {
  padding: var(--densidade, 80px) 0;
}

body.site-plataforma .sec-hero {
  padding: calc(var(--densidade, 80px) * 1.3) 0;
}

/* ── Planos ───────────────────────────────────────────────────────────────── */

.sec-planos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  align-items: start;
}

.sec-plano {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px;
  border: 1px solid var(--border, #3f3f46);
  border-radius: var(--radius, 12px);
  background: var(--bg2, #18181b);
}

.sec-plano--destaque {
  border-color: var(--lp, #7c5cff);
  box-shadow: var(--shadow, 0 4px 24px rgba(0, 0, 0, .4));
}

.sec-plano-selo {
  position: absolute;
  top: -11px;
  left: 22px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--lp, #7c5cff), var(--ls, #a78bfa));
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sec-plano h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text, #fafafa);
}

/* O preco cheio, riscado acima do que se paga. Ele fica ANTES do
   `.sec-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. */
.sec-plano-preco-cheio {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text2, #a1a1aa);
  text-decoration: line-through;
}

.sec-plano-preco {
  font-size: 1.7rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--lp, #7c5cff), var(--ls, #a78bfa));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sec-plano-periodo {
  margin-top: -6px;
  font-size: .78rem;
  color: var(--text2, #a1a1aa);
}

.sec-plano-desconto {
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--danger, #ef4444);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}

.sec-plano-texto {
  margin: 0;
  color: var(--text2, #a1a1aa);
  font-size: .88rem;
  line-height: 1.6;
}

.sec-plano-limites {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: .82rem;
  color: var(--text2, #a1a1aa);
}

.sec-plano-limites i {
  color: var(--success, #22c55e);
  margin-right: 6px;
}

.sec-plano .btn {
  margin-top: auto;
  text-align: center;
}

/* O bloco de preco de cada forma de pagamento (plans/_periodos.html) e so um
   agrupador: `contents` devolve os filhos ao flex do cartao, e o `gap` entre
   preco, periodo e desconto continua o de sempre. `:not([hidden])` porque
   `display` do autor venceria o `hidden` do navegador e mostraria os blocos
   dos outros periodos juntos. */
.sec-plano > [data-periodo]:not([hidden]) {
  display: contents;
}

/* O seletor "Mensal | Anual". Esta pagina nao carrega o Bootstrap, entao as
   classes `btn-primary`/`btn-outline-primary` que o script alterna ganham
   aqui o desenho - com as cores da paleta do tema. */
.seletor-de-periodo {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 22px;
}

.seletor-de-periodo .btn {
  padding: 6px 16px;
  border: 1px solid var(--lp, #7c5cff);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}

.seletor-de-periodo .btn-outline-primary {
  background: transparent;
  color: var(--text, #fafafa);
}

.seletor-de-periodo .btn-primary {
  background: var(--lp, #7c5cff);
  color: #fff;
}

.sec-planos--lista .sec-planos-grade {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin: 0 auto;
}

/* ── O fundo da home publicada ────────────────────────────────────────────── */
/*
 * A home publicada e inteira do painel da plataforma, entao o fundo dela segue o modelo.
 * Nas quatro portas o fundo continua sendo o do `entrada.css`: ali o que ocupa
 * a tela e o formulario do sistema.
 *
 * Os halos saem da cor primaria em vez de estarem cravados em roxo, que era o
 * que fazia o modelo "Clinica" desenhar secoes claras sobre dois borroes
 * roxos. `color-mix` nao e enfeite: e o unico jeito de tirar uma versao
 * translucida de uma cor que so existe como variavel.
 */
body.entrada.site-plataforma {
  background-color: var(--bg, #101119);
  background-image:
    radial-gradient(900px 600px at 12% -10%,
      color-mix(in srgb, var(--lp, #7c5cff) 22%, transparent), transparent 60%),
    radial-gradient(700px 500px at 100% 100%,
      color-mix(in srgb, var(--ls, #4361ee) 18%, transparent), transparent 55%);
  color: var(--text, #f2f3f8);
}

/* ── A moldura nas quatro portas ──────────────────────────────────────────── */
/*
 * Nas telas com formulário, as seções entram acima e abaixo do que o sistema
 * monta. A largura acompanha a da porta (a tela de login não é uma landing:
 * seção de ponta a ponta ali empurraria o cartão de acesso para fora da
 * primeira dobra).
 */

.plataforma-molde {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/*
 * A faixa segue o MODELO escolhido em o editor de site da plataforma; a moldura da porta,
 * nao.
 *
 * Sao dois donos diferentes na mesma tela: as secoes sao conteudo do
 * painel da plataforma, e o cartao do formulario e o sistema - campo, CSRF e segundo
 * fator nunca viram conteudo editavel. Sem estas duas linhas, escolher um
 * modelo CLARO deixava texto claro sobre o fundo escuro do `entrada.css`, e o
 * que a pessoa via era a secao sumindo, nao um modelo claro.
 *
 * A previa do editor nao pega este caso: ela sempre desenha `pagina.html`,
 * mesmo quando a tela editada e uma porta - entao o defeito so apareceria
 * para o visitante.
 */
.plataforma-molde {
  background: var(--bg, transparent);
  color: var(--text, inherit);
}

.plataforma-molde--antes {
  padding-top: 8px;
}

.plataforma-molde--depois {
  padding-bottom: 32px;
}

.plataforma-molde .sec {
  padding: 28px 0;
}

.plataforma-molde .sec-inner {
  padding: 0;
}

.plataforma-molde .sec + .sec {
  border-top: 1px solid var(--sec-borda-suave, rgba(255, 255, 255, .06));
}

/* ── O marcador do formulário, só na prévia ───────────────────────────────── */
/*
 * Quem edita precisa ver ONDE o formulário entra: é a decisão que o card
 * "Formulário" existe para tomar. Na página publicada ele não desenha nada —
 * ali o formulário é o de verdade.
 */

.plataforma-formulario-caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 20px;
  border: 2px dashed var(--border, #3f3f46);
  border-radius: var(--radius, 12px);
  color: var(--text2, #a1a1aa);
  text-align: center;
}

.plataforma-formulario-caixa i {
  font-size: 1.4rem;
  color: var(--lp, #7c5cff);
}

.plataforma-formulario-caixa strong {
  color: var(--text, #fafafa);
  font-size: .95rem;
}

.plataforma-formulario-caixa span {
  font-size: .78rem;
  color: var(--text3, #71717a);
}

/* ── A apresentação AO LADO do formulário ─────────────────────────────────── */
/*
 * O arranjo `ao-lado` do card "Formulário": as seções de antes ocupam a
 * coluna da vitrine, e o cartão do formulário fica na outra. É o desenho que
 * as quatro portas já tinham escrito à mão - e que publicar, antes disto,
 * desmanchava numa pilha.
 *
 * Aqui só se ajusta ESPAÇO: cor, canto e fonte continuam vindo do modelo
 * escolhido em o editor de site da plataforma, como em qualquer outra seção. A seção foi
 * desenhada para uma página inteira, e numa coluna de ~520px o que sobra é
 * respiro: 80px de `--densidade` entre blocos deixaria o formulário sozinho
 * na dobra.
 *
 * O fundo NÃO é repintado, ao contrário da faixa empilhada: ali a seção é uma
 * tira que atravessa a tela e precisa do próprio fundo; aqui ela está DENTRO
 * da vitrine, e pintar um retângulo por cima do fundo da porta seria recortar
 * a tela no meio. A cor do texto continua vindo do modelo, que é o que evita
 * texto claro sobre fundo claro.
 */

.plataforma-molde--lado {
  background: transparent;
}

.plataforma-molde--lado .sec {
  padding: 14px 0;
}

/* A vitrine escrita à mão não tem linha entre a chamada, os recursos e as
   garantias: é um bloco só, lido de cima a baixo. */
.plataforma-molde--lado .sec + .sec {
  border-top: 0;
}

.plataforma-molde--lado .sec-inner {
  max-width: none;
  padding: 0;
}

.plataforma-molde--lado .sec-hero h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  font-weight: 700;
}

/* Duas colunas de recursos, como a `<ul class="entrada-recursos">` que esta
   seção substitui. Em uma só, seis itens empurravam as garantias para fora da
   primeira dobra. */
.plataforma-molde--lado .sec-servicos--lista .sec-servicos-grade {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 4px 24px;
}

.plataforma-molde--lado .sec-servicos--lista .sec-servico {
  border-bottom: 0;
  padding: 10px 0;
}

.plataforma-molde--lado .sec-numeros-grade {
  text-align: left;
}

/* Na página inteira o número é um letreiro de 2,6rem; na coluna, do lado do
   formulário, ele passa a competir com o título da tela - e o que estas três
   linhas substituem são os chips discretos do rodapé da vitrine. */
.plataforma-molde--lado .sec-numero-valor {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 800;
  margin-bottom: 4px;
}

/* ── A mesma porta, na prévia do editor ───────────────────────────────────── */
/*
 * A prévia desenha `pagina.html`, e não o template da porta - então sem estas
 * regras o editor mostrava empilhado o que vai ao ar em duas colunas, e a
 * escolha "ao lado" só aparecia depois de publicar.
 *
 * As proporções são as da `.entrada-grade` de `entrada.css` de propósito: a
 * prévia existe para dispensar o publicar-e-conferir, e duas colunas com
 * outra proporção seriam um terceiro desenho para manter em dia.
 */

.plataforma-porta {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 3.5rem;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px;
}

.plataforma-porta-cartao {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}

.plataforma-porta-cartao .plataforma-formulario-caixa {
  width: 100%;
}

@media (max-width: 860px) {
  .plataforma-porta {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ── O acento das seções nas telas da plataforma ──────────────────────────── */
/*
 * `--lp` e `--ls` (a cor primária e a secundária) são da LOJA: quem as define
 * é o template da loja pública, com a cor que a organização escolheu. Os
 * presets de `loja_temas.css` não as tocam de propósito - um modelo que as
 * redefinisse apagaria a identidade do cliente a cada troca.
 *
 * Nas seis telas da plataforma não havia quem as definisse, e `loja_secoes.css`
 * as usa SEM fallback em dezesseis lugares. A pior delas é o número da seção
 * "Números": ele é texto em gradiente (`-webkit-text-fill-color: transparent`),
 * e com a var vazia o gradiente é inválido - o "100%" ficava INVISÍVEL, só com
 * o rótulo embaixo. Nada no editor mostrava isso: o valor estava lá, digitado.
 *
 * O valor de partida é o acento da própria porta (`--ent-marca`, de
 * `entrada.css`), e não um roxo repetido aqui: assim o portal do cliente, que
 * troca o acento para azul, sai com as seções azuis também. A cor escolhida em
 * o editor de site da plataforma continua ganhando - ela chega no `style=""` do <body>, que
 * é mais forte que isto.
 */

body.entrada,
body.site-plataforma {
  --lp: var(--ent-marca, #7c5cff);
  --ls: var(--ent-marca-2, #a78bfa);
}