/* sem achismo ☕: o formulário de inscrição e o cartão de convite.
   Arquivo independente de propósito: entra também em post, /conteudos/ e /obrigado/,
   onde page-home.css e page-novo.css não existem. Por isso não usa --hj-* nem .hj-botao. */

.sa-assinar, .sa-inscricao {
	--sa-azul: #2b6bd9; --sa-azul-escuro: #1f51b3; --sa-azul-claro: #6ea0f5;
	--sa-tinta: #18181b; --sa-cinza-3: #d4d4d8; --sa-cinza-4: #a1a1aa; --sa-cinza-5: #71717a; --sa-cinza-7: #52525b; --sa-cinza-9: #3f3f46;
}
.sa-oculto, .sa-isca { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sa-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--sa-azul); color: #fff !important; font: 600 15px/1 Montserrat, sans-serif; text-decoration: none; cursor: pointer; transition: background .15s ease, transform .1s ease; }
.sa-botao:hover { background: var(--sa-azul-escuro); }
.sa-botao:active { transform: scale(.98); }
.sa-botao:focus-visible { outline: 3px solid var(--sa-azul-claro); outline-offset: 2px; }

/* A barra branca, com o botão dentro, como no the news. O formulário mede o
   espaço que tem (container query): estreito, empilha; com espaço, fica em linha. */
.sa-assinar { container-type: inline-size; display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 580px; font-family: Montserrat, sans-serif; }
.sa-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.sa-form[hidden] { display: none; }
.sa-form__linha { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 18px 50px rgba(43,107,217,.35); transition: box-shadow .2s ease; }
.sa-form__linha:focus-within { box-shadow: 0 0 0 3px rgba(110,160,245,.6), 0 18px 50px rgba(43,107,217,.45); }
.sa-form__campo { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.sa-form__icone { position: absolute; left: 14px; color: var(--sa-cinza-5); pointer-events: none; }
.sa-form__email { width: 100%; min-height: 52px; margin: 0; padding: 0 14px 0 44px; border: 0; border-radius: 14px; background: transparent; color: var(--sa-tinta); font: 500 16px Montserrat, sans-serif; box-shadow: none; }
.sa-form__email::placeholder { color: var(--sa-cinza-5); font-weight: 400; }
.sa-form__email:focus { outline: none; }
.sa-form__email[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #ef4444; }
.sa-form__botao { min-height: 52px; white-space: nowrap; }
.sa-form__botao[disabled] { opacity: .7; cursor: progress; }
.sa-form__turnstile:empty { display: none; }
.sa-form__selos { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--sa-cinza-4); }
.sa-form__selos li { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.sa-form__selos li::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: rgba(110,160,245,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ea0f5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.sa-erro { margin: 0; font-size: 14px; color: #fca5a5; }
@container (min-width: 460px) {
	.sa-form__linha { flex-direction: row; align-items: center; padding: 6px; border-radius: 999px; }
	.sa-form__email { border-radius: 999px; }
}

/* Passo 2 e "pronto": cartão branco no lugar do formulário */
.sa-cartao { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px; border-radius: 24px; background: #fff; color: var(--sa-tinta); box-shadow: 0 30px 80px rgba(0,0,0,.35); text-align: left; }
.sa-cartao[hidden] { display: none; }
.sa-cartao__titulo { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.015em; color: var(--sa-tinta); }
.sa-cartao__titulo:focus { outline: none; }
.sa-cartao__apoio { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--sa-cinza-7); }
.sa-cartao .sa-erro { color: #b91c1c; }
.sa-perfil__campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sa-campo { display: flex; flex-direction: column; gap: 6px; margin: 0; font: 500 13.5px/1.3 Montserrat, sans-serif; color: var(--sa-cinza-9); }
.sa-campo input, .sa-campo select { width: 100%; min-height: 48px; margin: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--sa-cinza-3); background: #fff; color: var(--sa-tinta); font: 400 16px Montserrat, sans-serif; }
.sa-campo input:focus, .sa-campo select:focus { outline: none; border-color: var(--sa-azul); box-shadow: 0 0 0 3px rgba(43,107,217,.15); }
.sa-perfil__acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.sa-perfil__pular { padding: 0 0 2px; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--sa-cinza-7); font: 500 15px Montserrat, sans-serif; cursor: pointer; }
.sa-perfil__privacidade { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--sa-cinza-5); }
@container (min-width: 460px) {
	.sa-cartao { padding: 28px; }
	.sa-perfil__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sa-campo--largo { grid-column: 1 / -1; }
}

/* O convite compacto (bloco sem-achismo-inscricao): post, /obrigado/ e afins */
.sa-convite { container-type: inline-size; box-sizing: content-box; width: calc(100% - 32px); max-width: 880px; margin: 0 auto; padding: 56px 0; } /* padding, não margin: a margem sumia antes do rodapé */
.sa-inscricao { display: grid; gap: 22px; padding: 28px 22px; border-radius: 24px; background: #0c0c0e radial-gradient(120% 90% at 100% 0%, rgba(43,107,217,.28), transparent 60%); color: #fff; font-family: Montserrat, sans-serif; text-align: left; }
.sa-inscricao .sa-inscricao__marca { margin: 0; color: #fff; font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.sa-inscricao .sa-inscricao__titulo { margin: 10px 0 0; color: #fff; font-size: clamp(20px, 1.2rem + .6vw, 26px); font-weight: 400; line-height: 1.25; letter-spacing: -.02em; }
.sa-inscricao .sa-inscricao__apoio { margin: 10px 0 0; color: var(--sa-cinza-4); font-size: 15px; line-height: 1.55; }
.sa-inscricao__form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sa-inscricao .sa-inscricao__link { align-self: flex-start; color: #cfe0ff; font-size: 14px; text-decoration: none; border-bottom: 1px solid currentColor; }
.sa-inscricao .sa-inscricao__link:hover { opacity: .8; }
@container (min-width: 720px) {
	.sa-inscricao { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 36px; padding: 36px; }
}

/* Dentro de um cartão do site (/conteudos/): faixa larga, texto à esquerda e formulário à direita */
.sa-no-cartao .sa-assinar { max-width: none; }
.pn-cartao.sa-cartao-largo { grid-column: 1 / -1; display: grid; gap: 22px; }
.pn-cartao--azul .pn-cartao__num { color: rgba(255,255,255,.78); }
@media (min-width: 768px) {
	.pn-cartao.sa-cartao-largo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 40px; }
}
.pn-cartao--azul .sa-form__selos { color: rgba(255,255,255,.88); }
.pn-cartao--azul .sa-form__selos li::before { background-color: rgba(255,255,255,.2); }
.pn-cartao--azul .sa-form__linha { box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 14px 34px rgba(12,12,14,.25); }