/* ==========================================================================
   Porta de entrada

   Redesenhada em 23/08/2026 sobre o sistema visual da Plataforma RTC da casa
   (acta.tax), extraído por leitura de CSS computado e registrado em
   `03-planejamento/design-2026-08-23/01-sistema-da-plataforma-rtc.md`.

   O que veio de lá, sem alteração: cartão de raio 24px em branco a 45% com
   desfoque de fundo de 12px e borda de 1px a 6%, SEM SOMBRA; botão de raio
   16px com gradiente de 135 graus; campo só com sublinhado, sem caixa; título
   em peso 800 com entreletra negativa e o termo que importa em verde; e o
   fundo em três camadas, dois brilhos radiais a 4% mais malha de pontos a 6%.

   A elevação aqui NÃO vem de sombra. Vem do vidro e da borda de 6%. Sombra
   projetada nesta tela é regressão, não refinamento.

   Duas colunas: à esquerda a plataforma se apresenta, à direita se entra. Em
   tela estreita empilham e a composição visual sai, porque no celular ela
   rouba a altura que o formulário precisa.
   ========================================================================== */

.pc-porta {
  --porta-fio: rgba(0, 0, 0, .06);

  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  background-color: var(--color-background);
  background-image:
    radial-gradient(60% 50% at 20% 85%, rgba(0, 110, 101, .04) 0%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(50% 40% at 85% 15%, rgba(0, 110, 101, .045) 0%, rgba(0, 0, 0, 0) 60%),
    /* A 6% a malha sumia em monitor claro e o fundo lia como chapado. */
    radial-gradient(rgba(0, 110, 101, .09) 1.15px, rgba(0, 0, 0, 0) 1.15px);
  background-size: auto, auto, 22px 22px;
}

/* ---- coluna institucional ------------------------------------------------ */

/* Centrado como unidade, e não esticado de topo a pé. Com `space-between` o
   rodapé ia para o fundo da tela e abria um vão órfão entre a composição e ele,
   enquanto o cartão da direita ficava centrado: as duas colunas não se
   olhavam. */
.pc-porta__institucional {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Recuo simétrico. O respiro maior embaixo existia para compensar o rodapé,
     que vivia nesta coluna e somava altura ao pé do bloco. Com o rodapé na
     coluna de acesso, a compensação virou resíduo: media 82px acima contra
     146px abaixo, e o bloco lia como empurrado para cima. */
  padding: 40px clamp(24px, 4.5vw, 60px);
  border-right: 1px solid var(--porta-fio);
}

.pc-porta__discurso {
  max-width: 600px;
  width: 100%;
  margin-left: auto;
}

/* As marcas ficam estáticas enquanto a composição representa a plataforma. */
.pc-porta__marca {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  line-height: 0;
}

.pc-porta__logo { display: block; width: 132px; height: auto; }
.pc-porta__bic { display: block; width: 58px; height: auto; opacity: .92; }
.pc-porta__fio { width: 1px; height: 26px; background: var(--color-border); }

.pc-porta__para {
  align-self: center;
  font: 500 11px/1 var(--fonte-texto);
  letter-spacing: .9px;
  color: var(--texto-terciario);
}

.pc-porta__sobretitulo {
  margin: 38px 0 14px;
  font: 600 11px/1 var(--fonte-texto);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.pc-porta h1 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: var(--texto-primario);
}

.pc-porta h1 em { font-style: normal; color: var(--color-primary); }

.pc-porta__resumo {
  margin: 20px 0 0;
  max-width: 62ch;
  font-size: 15px;
  color: var(--texto-secundario);
}

.pc-porta__regua {
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-primary);
}

.pc-porta__discurso .pc-porta__regua { margin-top: 26px; }

/* ---- ecossistema comercial -------------------------------------------- */

.pc-porta__ecossistema {
  width: 100%;
  max-width: 520px;
  margin-top: 34px;
}

.pc-ecossistema__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 600 8px/1.4 var(--fonte-texto);
  letter-spacing: 1.4px;
  color: var(--texto-terciario);
}

.pc-ecossistema__cabecalho b {
  padding-inline: 6px;
  font-weight: 400;
  color: #86b3a8;
}

.pc-ecossistema__mapa {
  position: relative;
  height: 253px;
  margin-top: 8px;
}

.pc-ecossistema__conexoes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pc-ecossistema__conexoes ellipse {
  fill: none;
  stroke: #d7e4da;
  stroke-width: 1;
  stroke-dasharray: 2 6;
}

.pc-ecossistema__conexoes path {
  fill: none;
  stroke: #b9d2c5;
  stroke-width: 1;
}

.pc-ecossistema__conexoes .pc-ecossistema__orbita {
  stroke: #57978b;
  stroke-width: 3;
  stroke-dasharray: 5 810;
  stroke-linecap: round;
}

.pc-ecossistema__centro {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 184px;
  height: 100px;
  border: 1px solid #cbded1;
  border-radius: 20px;
  background: #f0f5ee;
}

.pc-ecossistema__centro > span {
  font: 600 8px/1.2 var(--fonte-texto);
  letter-spacing: 1.7px;
  color: var(--color-primary);
}

.pc-ecossistema__centro strong {
  margin-top: 7px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.5px;
  color: var(--color-primary);
}

.pc-ecossistema__centro i {
  font-style: normal;
  font-weight: 300;
  color: #71a193;
}

.pc-ecossistema__regua {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
}

.pc-ecossistema__regua b {
  width: 21px;
  height: 3px;
  border-radius: 2px;
  background: #afcfc0;
}

.pc-ecossistema__regua b:first-child { background: #3c8b79; }
.pc-ecossistema__regua b:last-child { background: #d4e2d7; }

.pc-ecossistema__no {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 9px 12px;
  border: 1px solid #e0e7dd;
  border-radius: 11px;
  background: #fcfcf9;
  color: var(--texto-secundario);
  font: 500 10px/1 var(--fonte-texto);
  white-space: nowrap;
}

.pc-ecossistema__no svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #628e7d;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pc-ecossistema__no--produtos { left: 19.6%; top: 17.8%; border-color: #8dbba7; background: #e5f0e8; color: var(--color-primary); }
.pc-ecossistema__no--clientes { left: 50%; top: 10%; }
.pc-ecossistema__no--canais { left: 80.4%; top: 17.8%; }
.pc-ecossistema__no--tributos { left: 80.4%; top: 80.4%; }
.pc-ecossistema__no--cenarios { left: 50%; top: 91.1%; }
.pc-ecossistema__no--cadeia { left: 19.6%; top: 80.4%; }

@media (prefers-reduced-motion: no-preference) {
  .pc-ecossistema__orbita { animation: pc-ecossistema-orbita 42s linear infinite; }
}

@keyframes pc-ecossistema-orbita { to { stroke-dashoffset: -830; } }

@media (min-width: 821px) and (max-width: 1150px) {
  .pc-porta__institucional { padding-inline: 28px; }
  .pc-ecossistema__cabecalho { font-size: 9px; letter-spacing: 1.1px; }
  .pc-ecossistema__no { padding: 8px; font-size: 9px; }
  .pc-ecossistema__centro { width: 162px; }
  .pc-ecossistema__centro strong { font-size: 14px; }
}

@media (min-width: 821px) and (max-height: 800px) {
  .pc-porta__ecossistema { margin-top: 25px; }
  .pc-ecossistema__mapa { height: 225px; }
}

.pc-porta__rodape {
  width: 100%;
  max-width: 420px;
  display: grid;
  gap: 7px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--texto-terciario);
  text-align: center;
}

.pc-porta__legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
}

.pc-porta__legal a {
  color: var(--texto-secundario);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1px;
}

.pc-porta__legal a:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.pc-porta__legal a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* ---- coluna de acesso ---------------------------------------------------- */

/* O rodape acompanha o cartao. Com `align-items:center` e um segundo filho, o
   conjunto continua centrado como bloco e o rodape fica preso ao cartao, em vez
   de descer para o pe da tela e abrir um vao. */
.pc-porta__acesso {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 40px clamp(20px, 3vw, 32px);
}

.pc-porta__cartao {
  width: 100%;
  max-width: 420px;
  padding: 44px 40px;
  border: 1px solid var(--porta-fio);
  border-radius: 24px;
  background: rgba(255, 255, 255, .45);
  backdrop-filter: blur(12px);
  box-shadow: none;
}

.pc-porta__cabecalho { margin: 20px 0 28px; }

.pc-porta__cabecalho h2 {
  margin: 0 0 6px;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--texto-primario);
}

.pc-porta__cabecalho p {
  margin: 0;
  font-size: 14px;
  color: var(--texto-secundario);
}

.pc-porta__aviso {
  margin-bottom: 18px;
  padding: 10px 13px;
  border-radius: 12px;
  border-left: 3px solid var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, var(--superficie));
  font-size: 13px;
  line-height: 1.5;
}

.pc-porta__aviso--erro {
  border-left-color: var(--color-destructive);
  background: color-mix(in srgb, var(--color-destructive) 8%, var(--superficie));
}

.pc-botao-microsoft {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: transparent;
  font: 600 14px/1 var(--fonte-texto);
  color: var(--texto-primario);
  text-decoration: none;
}

.pc-botao-microsoft:hover { background: var(--superficie); }

.pc-porta__separador {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0;
  font: 600 11px/1 var(--fonte-texto);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--texto-terciario);
}

.pc-porta__separador::before,
.pc-porta__separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.pc-porta__separador span { flex: 0 0 auto; }

/* Campo sublinhado, sem caixa: é a forma da Plataforma RTC. */
.pc-porta .pc-campo { display: block; margin-bottom: 22px; }

.pc-porta .pc-campo label {
  display: block;
  margin-bottom: 9px;
  font: 600 11px/1 var(--fonte-texto);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--texto-terciario);
}

.pc-porta .pc-campo input {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  font: 400 15px/1.5 var(--fonte-texto);
  color: var(--texto-primario);
}

.pc-porta .pc-campo input::placeholder { color: var(--color-nao-avaliavel); }

.pc-porta .pc-campo input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-primary);
  border-bottom-color: transparent;
}

.pc-porta .pc-botao--primario {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--color-primary-escuro), var(--color-primary));
  color: var(--color-on-primary);
  font: 700 14px/1 var(--fonte-texto);
  letter-spacing: .5px;
  cursor: pointer;
}

.pc-porta .pc-botao--primario:hover { filter: brightness(1.08); }

.pc-porta__nota {
  margin: 22px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--texto-terciario);
}

/* ---- estreito ------------------------------------------------------------ */

@media (max-width: 820px) {
  .pc-porta { grid-template-columns: 1fr; }

  .pc-porta__institucional {
    padding: 40px 26px;
    border-right: 0;
    border-bottom: 1px solid var(--porta-fio);
  }

  .pc-porta__discurso { margin-left: 0; }

  /* A composição rouba a altura que o formulário precisa no celular. */
  .pc-porta__ecossistema { display: none; }

  .pc-porta__cartao { padding: 32px 24px; }
}


/* ==========================================================================
   Política de Privacidade e Termos de Uso

   Vivem fora da casca da aplicacao, porque sao alcancados por quem ainda nao
   entrou. Herdam o fundo e a tipografia da porta de entrada e nada mais: sao
   documento para ler, e nao tela para operar.

   A medida de linha e de 68 caracteres. Documento juridico com linha longa
   demais perde o inicio da proxima linha, e este e para ser lido inteiro.
   ========================================================================== */

.pc-doc {
  max-width: 68ch;
  margin: 0 auto;
  padding: 56px clamp(20px, 5vw, 32px) 96px;
  color: var(--texto-secundario);
  font-size: 14.5px;
  line-height: 1.65;
}

.pc-doc__voltar {
  display: inline-block;
  margin-bottom: 40px;
  font: 600 12px/1 var(--fonte-texto);
  letter-spacing: .3px;
  color: var(--color-primary);
  text-decoration: none;
}

.pc-doc__voltar:hover { text-decoration: underline; }

.pc-doc__cabecalho { padding-bottom: 22px; border-bottom: 1px solid var(--color-border); }

.pc-doc__rot {
  font: 600 11px/1 var(--fonte-texto);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.pc-doc h1 {
  margin: 14px 0 10px;
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--texto-primario);
}

.pc-doc__vigencia { font-size: 12.5px; color: var(--texto-terciario); }

.pc-doc__abertura {
  margin: 26px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto-primario);
}

.pc-doc__secao { margin-top: 38px; }

.pc-doc h2 {
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--texto-primario);
}

/* `p + p` não alcança o parágrafo que vem DEPOIS de uma lista, e nas seções 2
   e 7 ele ficava colado no último item. */
.pc-doc p + p,
.pc-doc ul + p { margin-top: 12px; }
.pc-doc ul { margin: 12px 0 0; padding-left: 0; list-style: none; display: grid; gap: 9px; }

.pc-doc li {
  position: relative;
  padding-left: 20px;
}

.pc-doc li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--color-primary);
}

/* O que a ACTA ainda precisa decidir fica marcado na propria pagina. Some do
   documento quando a decisao entrar; enquanto nao entra, o texto e honesto
   sobre a lacuna em vez de inventar o que nao sabe. */
.pc-doc__pendente {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--norma-fio, #DDD6FE);
  background: var(--norma-bg, #F5F3FF);
  font-size: 13px;
  color: #4A1D96;
}

.pc-doc__pendente b { color: #5B21B6; font-weight: 700; }

.pc-doc__pe {
  margin-top: 52px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--texto-terciario);
}

.pc-doc__pe a { color: var(--color-primary); }
.pc-doc__irmao { margin-top: 8px; }
.pc-doc__irmao a { font-weight: 600; }

@media (max-width: 820px) {
  .pc-doc { padding-top: 36px; }
  .pc-doc__voltar { margin-bottom: 28px; }
}


/* ==========================================================================
   A dupla de marcas, em toda página servida fora da casca da aplicação

   As telas dentro do produto recebem a dupla pelo menu lateral. As de fora
   (entrada, conta, saída, auditoria, acesso negado, política e termos) não
   têm menu, e mostravam só o nome do produto em texto. Quem abre um link
   direto para os termos precisa ver de quem é a ferramenta e para quem ela
   foi feita, do mesmo jeito que vê na porta de entrada.
   ========================================================================== */

.pc-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  line-height: 0;
  margin-bottom: 28px;
}

.pc-marca__acta { display: block; height: 26px; width: auto; }
.pc-marca__bic { display: block; height: 14px; width: auto; opacity: .92; }
.pc-marca__fio { width: 1px; height: 20px; background: var(--color-border); }

.pc-marca__para {
  align-self: center;
  font: 500 10px/1 var(--fonte-texto);
  letter-spacing: .9px;
  color: var(--texto-terciario);
}