/* Paginas internas: entrar, criar conta, planos e minha conta.
   Reaproveita as variaveis de cor de vendas.css (que carrega antes), para o
   sistema e a pagina de vendas parecerem o mesmo produto. */

.pagina-interna {
	max-width: 1000px;
	margin: 0 auto;
	padding: clamp(40px, 6vw, 80px) 22px 90px;
	min-height: 60vh;
}

.pagina-interna__titulo {
	font-size: clamp(32px, 3.3vw, 50px);
	line-height: 1.06;
	letter-spacing: -.035em;
	margin-bottom: 28px;
}

/* ---- Botoes e links ---- */

.srt-botao {
	min-height: 50px;
	padding: 0 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1px solid #25b6ff;
	border-radius: 6px;
	background: linear-gradient(135deg, #20b7ff, #058af6);
	color: #00121e;
	font-weight: 750;
	font-size: 14px;
	cursor: pointer;
	box-shadow: 0 0 26px rgba(0, 154, 255, .26), inset 0 1px rgba(255, 255, 255, .25);
	transition: transform .2s ease, box-shadow .2s ease;
}

.srt-botao:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 34px rgba(0, 154, 255, .4);
}

.srt-botao--secundario {
	background: rgba(5, 25, 40, .55);
	color: #d9edfa;
	border-color: rgba(36, 160, 231, .55);
	box-shadow: inset 0 0 24px rgba(11, 91, 143, .1);
}

.srt-link {
	display: inline-block;
	color: var(--blue-2);
	font-size: 14px;
	border-bottom: 1px solid rgba(56, 196, 255, .35);
	padding-bottom: 1px;
}

.srt-link:hover {
	border-bottom-color: var(--blue-2);
}

/* ---- Entrar / criar conta ---- */

.srt-auth {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
	align-items: start;
}

.srt-auth--logado {
	grid-template-columns: 1fr;
	max-width: 520px;
}

.srt-auth__col,
.srt-auth--logado {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px;
}

.srt-auth h2 {
	font-size: 24px;
	letter-spacing: -.02em;
	margin-bottom: 18px;
}

.srt-form-auth {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 16px;
}

.srt-form-auth label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	color: var(--muted);
}

.srt-form-auth input[type="text"],
.srt-form-auth input[type="email"],
.srt-form-auth input[type="password"] {
	min-height: 46px;
	padding: 0 14px;
	border-radius: 6px;
	border: 1px solid var(--line);
	background: var(--bg-deep);
	color: var(--text);
	font-size: 15px;
}

.srt-form-auth input:focus {
	outline: none;
	border-color: var(--line-bright);
	box-shadow: 0 0 0 3px rgba(20, 168, 255, .16);
}

.srt-check {
	flex-direction: row !important;
	align-items: center;
	gap: 8px !important;
}

/* Honeypot: fora da tela, mas nao display:none - robo desconfia de campo
   escondido demais e alguns leitores de tela tambem o ignorariam. */
.srt-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.srt-aviso {
	margin: 0 0 16px;
	padding: 11px 14px;
	border-radius: 6px;
	border: 1px solid rgba(255, 86, 103, .45);
	background: rgba(255, 86, 103, .09);
	color: #ffc2c8;
	font-size: 14px;
}

.srt-aviso--ok {
	border-color: rgba(16, 212, 155, .45);
	background: rgba(16, 212, 155, .09);
	color: #9df0d6;
}

.srt-sub {
	color: var(--muted-2);
	font-size: 13px;
}

.srt-ok { color: var(--green); }
.srt-nao { color: var(--red); }

/* ---- Planos (shortcode, fora da home) ---- */

.srt-planos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 20px;
	margin-bottom: 26px;
}

.srt-plano {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.srt-plano h3 {
	font-size: 22px;
	margin: 0;
}

.srt-plano__preco {
	margin: 0;
	font-size: 40px;
	font-weight: 750;
	letter-spacing: -.04em;
	line-height: 1;
}

.srt-plano__preco span {
	font-size: 18px;
	color: var(--muted);
	margin-right: 4px;
}

.srt-plano__preco small {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--muted-2);
	letter-spacing: 0;
	margin-top: 6px;
}

.srt-plano__descricao {
	color: var(--muted);
	font-size: 14px;
	margin: 0;
}

.srt-plano__itens {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
	color: #c6d7e4;
	flex: 1;
}

.srt-plano__itens li::before {
	content: "▸";
	color: var(--blue);
	margin-right: 8px;
}

/* O formulario nao pode empurrar o layout: ele so embrulha o botao. */
.srt-form-plano {
	margin: 0;
}

.srt-form-plano button {
	width: 100%;
}

/* ---- Minha conta ---- */

.srt-conta {
	max-width: 640px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px;
}

.srt-conta h2 {
	font-size: 26px;
	margin-bottom: 18px;
}

.srt-conta__tabela {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 22px;
}

.srt-conta__tabela th {
	text-align: left;
	color: var(--muted-2);
	font-weight: 500;
	font-size: 13px;
	padding: 9px 14px 9px 0;
	width: 150px;
	vertical-align: top;
	border-bottom: 1px solid rgba(67, 151, 210, .12);
}

.srt-conta__tabela td {
	padding: 9px 0;
	font-size: 15px;
	border-bottom: 1px solid rgba(67, 151, 210, .12);
}

.srt-conta__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 0;
}

@media (max-width: 760px) {
	.srt-auth {
		grid-template-columns: 1fr;
	}

	.srt-conta__tabela th {
		width: 120px;
	}
}

/* ======================================================================
   CABECALHO SEMPRE VISIVEL

   O menu acompanha a rolagem em todas as paginas. Sao tres ajustes, e os
   tres sao necessarios - faltando um, o efeito quebra de um jeito ou de
   outro.
   ====================================================================== */

/* 1) O body vinha com overflow-x: hidden, que o navegador transforma em
      "hidden auto" e faz do body um container de rolagem. Nesse estado o
      position: sticky passa a se referir ao body - que nao rola - e o
      cabeçalho simplesmente sobe junto com a pagina, sem aviso nenhum.
      "clip" corta o transbordo horizontal do mesmo jeito, mas nao cria
      container de rolagem. */
body {
	overflow-x: clip;
}

/* 2) A barra e quem gruda. Ela ocupa a largura toda para o fundo cobrir a
      tela; o conteudo continua centralizado pelo .site-header de dentro. */
.site-header-bar {
	position: sticky;
	top: 0;
	/* Acima do .noise, que e fixo em z-index 20. */
	z-index: 40;
	/* Sem fundo proprio, o conteudo da pagina passaria por tras e o menu
	   ficaria ilegivel na rolagem. */
	background: rgba(4, 14, 23, .82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(53, 133, 186, .18);
}

/* Navegador sem backdrop-filter recebe um fundo mais opaco, senao o texto
   atras atrapalha a leitura do menu. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header-bar {
		background: rgba(4, 14, 23, .96);
	}
}

/* 3) Com o cabeçalho por cima, pular para uma ancora esconderia o inicio da
      secao atras dele. A margem de rolagem e a altura do cabeçalho (76px)
      mais um respiro. */
section[id],
[id^="srt-"] {
	scroll-margin-top: 92px;
}

/* O menu do celular abre ancorado no cabeçalho; com a barra grudada ele
   precisa aparecer por cima do conteudo tambem. */
@media (max-width: 1020px) {
	.main-nav {
		z-index: 41;
	}
}

/* A barra do WordPress tambem e fixa no topo e cobriria o cabeçalho. Quem a
   ve e so o administrador (ver show_admin_bar no functions.php), mas para
   ele o site precisa continuar utilizavel: o cabeçalho desce a altura dela.
   32px no desktop, 46px na faixa em que o WordPress engorda a barra. */
body.admin-bar .site-header-bar {
	top: 32px;
}

body.admin-bar section[id],
body.admin-bar [id^="srt-"] {
	scroll-margin-top: 124px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header-bar {
		top: 46px;
	}

	body.admin-bar section[id],
	body.admin-bar [id^="srt-"] {
		scroll-margin-top: 138px;
	}
}

/* Abaixo de 600px o WordPress solta a barra (ela deixa de ser fixa e sobe
   com a pagina), entao o cabeçalho volta a grudar no topo da tela. */
@media screen and (max-width: 600px) {
	body.admin-bar .site-header-bar {
		top: 0;
	}

	body.admin-bar section[id],
	body.admin-bar [id^="srt-"] {
		scroll-margin-top: 92px;
	}
}