/*
 * Checkout em etapas — densidade de formulario, nao de landing page.
 *
 * O template da VIME nasce com medidas de pagina de vendas: campos de 1140px
 * de largura para conter um e-mail, e o dobro do respiro que um formulario
 * pede. Aqui o objetivo e o oposto — a pessoa ja decidiu assinar, entao o
 * formulario tem de caber na tela e sair do caminho.
 */
.ao-checkout {
	--ao-chk-largura: 720px;
	--ao-chk-gap: var(--ao-space-5, 16px);
	--ao-chk-campo-h: 44px;

	font-family: var(--ao-font, 'Poppins', sans-serif);
	color: var(--ao-body, #4D4D4D);
}

/* A leitura de um campo depende de linha curta, nao de caixa larga. */
.ao-checkout .vime-checkout-steps,
.ao-checkout .vime-checkout-step {
	max-width: var(--ao-chk-largura);
	margin-inline: auto;
}

.ao-checkout .form-row,
.ao-checkout .vime-checkout-step .form-row {
	margin-block: 0 var(--ao-chk-gap);
	padding: 0;
}

/*
 * `:not(.vime-no-number-label)` porque nem todo label aqui rotula um campo: o
 * "Sem número" que o widget injeta e um label que ENVOLVE o checkbox e o texto,
 * e depende do proprio `inline-flex` + `gap` para separar os dois
 * (`checkout-widget.css:3551`). Um `display: block` generico o achata e cola o
 * texto na caixinha.
 */
.ao-checkout .form-row label:not(.vime-no-number-label) {
	display: block;
	margin-bottom: 4px;
	font-size: var(--ao-fs-body-2, 14px);
	font-weight: var(--ao-fw-medium, 500);
	line-height: 1.3;
	color: var(--ao-body, #4D4D4D);
}

/* O checkbox e uma caixinha de 18px, nao um campo de 44px. */
.ao-checkout .vime-no-number-wrapper {
	margin-top: var(--ao-space-2, 8px);
}

.ao-checkout .vime-no-number-label {
	display: inline-flex;
	align-items: center;
	gap: var(--ao-space-2, 8px);
	font-size: var(--ao-fs-body-2, 14px);
	line-height: 1.3;
	color: var(--ao-muted, #808080);
	cursor: pointer;
}

.ao-checkout .form-row input[type="checkbox"],
.ao-checkout .vime-no-number-checkbox {
	width: 18px;
	min-height: 0;
	height: 18px;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
	accent-color: var(--ao-accent, #FF4900);
}

.ao-checkout .form-row input[type="text"],
.ao-checkout .form-row input[type="email"],
.ao-checkout .form-row input[type="tel"],
.ao-checkout .form-row input[type="number"],
.ao-checkout .form-row input[type="password"],
.ao-checkout .form-row select,
.ao-checkout .select2-container .select2-selection--single {
	min-height: var(--ao-chk-campo-h);
	height: var(--ao-chk-campo-h);
	padding: 0 var(--ao-space-4, 12px);
	font-size: var(--ao-fs-body-2, 14px);
	line-height: var(--ao-chk-campo-h);
}

/*
 * Grid com fluxo automatico. [REF:paginas-conecta]
 *
 * A primeira versao disto declarava a coluna campo a campo, e a etapa 2 quebrou:
 * o WooCommerce distribui `form-row-first`/`-last` pela ordem de REGISTRO, e ali
 * saem tres `form-row-first` seguidos (CEP, numero, bairro) — todos disputando a
 * coluna esquerda. Mapear id por id so empurra o problema para o proximo campo
 * que alguem adicionar.
 *
 * Agora quem decide a largura e o proprio campo: por padrao ocupa meia linha e o
 * grid acomoda, e so os que precisam da linha inteira sao nomeados. O
 * paginas-conecta chega na mesma conclusao por outro caminho — "nao reestilizar
 * campo por campo, isso e trabalho do widget" (`pc-prestador.css:624`).
 */
@media (min-width: 720px) {
	.ao-checkout .vime-checkout-fields {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--ao-chk-gap);
		align-items: start;
	}

	/* Linha inteira: textos longos e campos sem par natural. */
	.ao-checkout .vime-checkout-fields #billing_email_field,
	.ao-checkout .vime-checkout-fields #billing_persontype_field,
	.ao-checkout .vime-checkout-fields #billing_address_1_field,
	.ao-checkout .vime-checkout-fields #billing_country_field {
		grid-column: 1 / -1;
	}

	/* O float do WooCommerce brigaria com o grid. */
	.ao-checkout .vime-checkout-fields .form-row-first,
	.ao-checkout .vime-checkout-fields .form-row-last,
	.ao-checkout .vime-checkout-fields .form-row-wide {
		float: none;
		width: auto;
		margin-right: 0;
	}
}

/*
 * O Select2 joga o <select> original para fora da tela; com 100% de largura ele
 * estoura o viewport e cria scroll horizontal no celular. [REF:paginas-conecta]
 */
.ao-checkout select.select2-hidden-accessible {
	width: 1px !important;
	max-width: 1px !important;
}

.ao-checkout,
.ao-checkout .vime-checkout-container,
.ao-checkout .vime-checkout-fields {
	max-width: 100%;
	box-sizing: border-box;
}

.ao-checkout input,
.ao-checkout select,
.ao-checkout textarea {
	max-width: 100%;
	box-sizing: border-box;
}

/* Nao ha frete nem entrega numa assinatura. [REF:paginas-conecta] */
.ao-checkout .woocommerce-shipping-fields,
.ao-checkout .woocommerce-additional-fields,
.ao-checkout .vime-checkout-shipping,
.ao-checkout .vime-shipping-methods,
.ao-checkout .vime-no-shipping-methods,
.ao-checkout .woocommerce-shipping-totals,
.ao-checkout .vime-checkout-coupon,
.ao-checkout .product-quantity,
.ao-checkout .product-thumbnail,
.ao-checkout #billing_country_field,
.ao-checkout noscript {
	display: none;
}

/*
 * Sem isto, clicar em "Assinar plano" so acinzenta a tela: o CSS do WooCommerce
 * que desenha o spinner do blockUI nao esta carregado. [REF:paginas-conecta]
 */
.ao-checkout .blockUI.blockOverlay {
	position: relative;
}

.ao-checkout .blockUI.blockOverlay::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	border: 3px solid var(--ao-grey-10, #E6E6E6);
	border-top-color: var(--ao-accent, #FF4900);
	border-radius: 50%;
	animation: ao-checkout-girando 0.7s linear infinite;
}

@keyframes ao-checkout-girando {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ao-checkout .blockUI.blockOverlay::before {
		animation: none;
	}
}

/* Titulo de secao: marca o bloco sem virar cabecalho de pagina. */
.ao-checkout h3,
.ao-checkout .vime-checkout-section-title {
	margin: 0 0 var(--ao-space-5, 16px);
	padding-bottom: var(--ao-space-3, 10px);
	border-bottom: 1px solid var(--ao-grey-10, #E6E6E6);
	font-size: var(--ao-fs-h4, 18px);
	font-weight: var(--ao-fw-semibold, 600);
	color: var(--ao-primary, #00126B);
}

/* Barra de progresso — compacta, e o passo atual em destaque. */
.ao-checkout .vime-checkout-progress {
	margin-bottom: var(--ao-space-8, 24px);
	padding-bottom: var(--ao-space-5, 16px);
}

.ao-checkout .vime-progress-step.active .vime-progress-number,
.ao-checkout .vime-progress-step.completed .vime-progress-number {
	background: var(--ao-primary, #00126B);
	border-color: var(--ao-primary, #00126B);
	color: var(--ao-white, #FFFFFF);
}

.ao-checkout .vime-progress-step.active .vime-progress-label {
	font-weight: var(--ao-fw-semibold, 600);
	color: var(--ao-primary, #00126B);
}

/* A bolinha navega, entao precisa parecer que navega. */
.ao-checkout .progress-step {
	cursor: pointer;
}

.ao-checkout .progress-step .vime-step-circle {
	transition: transform 0.15s ease;
}

@media (hover: hover) {
	.ao-checkout .progress-step:hover .vime-step-circle {
		transform: scale(1.1);
	}
}

.ao-checkout .progress-step:focus-visible {
	outline: 2px solid var(--ao-accent, #FF4900);
	outline-offset: 4px;
	border-radius: var(--ao-radius-btn, 6px);
}

@media (prefers-reduced-motion: reduce) {
	.ao-checkout .progress-step:hover .vime-step-circle {
		transform: none;
	}
}

/*
 * Avancar e a acao principal, voltar e escape — um sob o outro, nao lado a
 * lado. Em duas colunas os dois botoes tem o mesmo peso visual e o "Voltar"
 * disputa atencao com o laranja ao lado. Empilhado, a ordem de leitura ja diz
 * qual e o caminho adiante.
 */
.ao-checkout .vime-checkout-step-navigation,
.ao-checkout .vime-checkout-buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ao-space-3, 10px);
	margin-top: var(--ao-space-7, 20px);
	text-align: center;
}

/* Num formulario largo o botao de borda a borda fica desproporcional. */
.ao-checkout .vime-checkout-step-navigation > *,
.ao-checkout .vime-checkout-buttons > * {
	width: 100%;
	max-width: 360px;
}

/* O botao de assinar nao fica na navegacao das etapas: mora em .place-order,
   junto da nota de cobranca. */
.ao-checkout .form-row.place-order {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	text-align: center;
}

.ao-checkout .form-row.place-order #place_order {
	max-width: 360px;
}

/* Avancar primeiro, seja qual for a ordem no DOM. */
.ao-checkout .vime-checkout-next-step {
	order: 1;
}

.ao-checkout .vime-checkout-prev-step {
	order: 2;
}

.ao-checkout .vime-checkout-next-step,
.ao-checkout .vime-checkout-prev-step,
.ao-checkout #place_order {
	/* flex + center para valer tanto em <button> quanto em <input>, e para
	   centralizar tambem o icone que o widget pode injetar junto do texto. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--ao-chk-campo-h);
	padding: 0 var(--ao-space-8, 24px);
	border-radius: var(--ao-radius-btn, 6px);
	font-family: var(--ao-font, 'Poppins', sans-serif);
	font-size: var(--ao-fs-body-2, 14px);
	font-weight: var(--ao-fw-semibold, 600);
	text-align: center;
	cursor: pointer;
}

.ao-checkout .vime-checkout-next-step,
.ao-checkout #place_order {
	border: 0;
	background: var(--ao-accent, #FF4900);
	color: var(--ao-white, #FFFFFF);
}

/*
 * `opacity: 1` de proposito: o widget deixa o "Voltar" em 0.35 mesmo quando a
 * etapa anterior esta disponivel, e ele parece desabilitado. [REF:paginas-conecta]
 */
.ao-checkout .vime-checkout-prev-step {
	border: 1px solid var(--ao-grey-10, #E6E6E6);
	background: transparent;
	color: var(--ao-muted, #808080);
	opacity: 1;
}

/* O que se leva pelo plano, ao lado do quanto custa. */
.ao-checkout__beneficios {
	margin: var(--ao-space-2, 8px) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--ao-fs-caption, 12px);
	line-height: 1.6;
	color: var(--ao-muted, #808080);
}

.ao-checkout__beneficios li {
	position: relative;
	padding-left: var(--ao-space-5, 16px);
}

.ao-checkout__beneficios li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ao-accent, #FF4900);
}

/*
 * Assinatura e item unico: a miniatura e um placeholder vazio (o produto do
 * plano nao tem imagem) e a quantidade nao faz sentido — nao ha como assinar
 * dois Premium. O `sold_individually` do produto ja impede, o controle so
 * confunde.
 */
.ao-checkout .vime-order-item-image,
.ao-checkout .vime-order-item-quantity {
	display: none;
}

/* Sem a miniatura, o texto ocupa a linha toda. */
.ao-checkout .vime-order-item-details {
	width: 100%;
}

/* RN-50 dita no ato do clique, entao a nota fica colada no botao. */
.ao-checkout__nota {
	margin: 0 0 var(--ao-space-4, 12px);
	font-size: var(--ao-fs-caption, 12px);
	line-height: 1.5;
	color: var(--ao-muted, #808080);
}

.ao-checkout__aviso {
	margin-bottom: var(--ao-space-8, 24px);
	padding: var(--ao-space-5, 16px) var(--ao-space-7, 20px);
	border-radius: var(--ao-radius-card, 8px);
	border-left: 4px solid var(--ao-accent, #FF4900);
	background: var(--ao-grey-light, #F5F5F5);
	font-size: var(--ao-fs-body-2, 14px);
}

.ao-checkout .vime-checkout-payment .wc_payment_method.checked .payment_box,
.ao-checkout .wc_payment_method.checked .payment_box {
	display: block !important;
}

.ao-checkout .wc_payment_method.checked .payment_box .form-row,
.ao-checkout .wc_payment_method.checked .payment_box fieldset {
	display: block;
}

.ao-checkout .wc_payment_method.checked .payment_box input[type="text"],
.ao-checkout .wc_payment_method.checked .payment_box input[type="tel"],
.ao-checkout .wc_payment_method.checked .payment_box input[type="number"],
.ao-checkout .wc_payment_method.checked .payment_box select {
	min-height: 40px;
}

.ao-checkout .woocommerce-NoticeGroup,
.ao-checkout .woocommerce-error,
.ao-checkout .woocommerce-message {
	display: none;
}

/* Mesmo respiro vertical das demais telas de aplicacao (`ao-painel.css:1`). */
.ao-plans {
	padding-block: calc(var(--ao-space-11, 70px) * 2);
}

.ao-plans__head {
	max-width: 620px;
	margin: 0 auto var(--ao-space-11, 70px);
	text-align: center;
}

.ao-plans__titulo {
	margin: 0;
	font-size: var(--ao-fs-h2, 32px);
	line-height: var(--ao-lh-h2, 40px);
	font-weight: var(--ao-fw-semibold, 600);
	color: var(--ao-primary, #00126B);
}

.ao-plans__sub {
	margin: var(--ao-space-4, 12px) 0 0;
	font-size: var(--ao-fs-body-1, 16px);
	line-height: var(--ao-lh-body-1, 20px);
	color: var(--ao-subtle, #B3B3B3);
}

.ao-planos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	align-items: stretch;
	gap: var(--ao-space-8, 24px);
	font-family: var(--ao-font, 'Poppins', sans-serif);
}

.ao-plano {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ao-space-9, 30px);
	padding: var(--ao-space-11, 70px) var(--ao-space-10, 40px) var(--ao-space-10, 40px);
	border-radius: var(--ao-radius-card, 10px);
	border: 1px solid var(--ao-grey-10, #E6E6E6);
	background: var(--ao-white, #FFFFFF);
}

/* Nome e preco sao um bloco so: o gap grande do cartao separa os grupos. */
.ao-plano__nome + .ao-plano__preco {
	margin-top: calc(var(--ao-space-9, 30px) * -1 + var(--ao-space-4, 12px));
}

.ao-plano--destaque {
	border-color: var(--ao-accent, #FF4900);
	border-width: 2px;
}

/* O selo sobrepoe a borda do cartao, como o badge de tipo faz no card de oferta. */
.ao-plano__selo {
	position: absolute;
	top: 0;
	left: var(--ao-space-9, 30px);
	transform: translateY(-50%);
	padding: 5px var(--ao-space-4, 12px);
	border-radius: var(--ao-radius-badge, 4px);
	background: var(--ao-accent, #FF4900);
	color: var(--ao-on-dark, #F1ECDF);
	font-size: var(--ao-fs-body-2, 14px);
	line-height: var(--ao-lh-btn, 1.5);
	font-weight: var(--ao-fw-bold, 700);
}

.ao-plano__nome {
	margin: 0;
	font-size: var(--ao-fs-h3, 20px);
	line-height: 1.3;
	font-weight: var(--ao-fw-bold, 700);
	color: var(--ao-primary, #00126B);
}

.ao-plano__preco {
	display: flex;
	align-items: baseline;
	gap: var(--ao-space-2, 8px);
}

.ao-plano__valor {
	font-size: var(--ao-fs-h2, 32px);
	line-height: var(--ao-lh-h2, 40px);
	font-weight: var(--ao-fw-extrabold, 800);
	color: var(--ao-institucional-02, #2F2F2E);
}

.ao-plano__ciclo {
	font-size: var(--ao-fs-body-2, 14px);
	color: var(--ao-muted, #808080);
}

.ao-plano__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--ao-space-4, 12px);
	flex: 1 1 auto;
	padding-block: var(--ao-space-2, 8px);
}

.ao-plano__lista li {
	position: relative;
	padding-left: var(--ao-space-8, 24px);
	font-size: var(--ao-fs-body-1, 16px);
	line-height: var(--ao-lh-body-1, 20px);
	color: var(--ao-body, #4D4D4D);
}

.ao-plano__lista li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--ao-positive, #16A34A);
}

/* O CTA encosta na base do cartao para alinhar entre planos de listas desiguais. */
.ao-plano__cta {
	margin-top: auto;
	padding-top: var(--ao-space-8, 24px);
	border-top: 1px solid var(--ao-grey-10, #E6E6E6);
}

.ao-plano__cta .ao-btn {
	width: 100%;
	justify-content: center;
}

.ao-plano__atual {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--ao-btn-h-card, 38px);
	margin: 0;
	border-radius: var(--ao-radius-btn, 6px);
	background: var(--ao-success-bg, #DCFCE7);
	font-size: var(--ao-fs-body-2, 14px);
	font-weight: var(--ao-fw-bold, 700);
	color: var(--ao-success, #15803D);
}

/* Nao e conquista, e um caminho fechado: o verde de sucesso do plano atual
   passaria a mensagem errada. */
.ao-plano__atual--bloqueado {
	background: var(--ao-grey-light, #F5F5F5);
	font-weight: var(--ao-fw-regular, 400);
	color: var(--ao-muted, #808080);
}

.ao-planos__vazio {
	padding: var(--ao-space-9, 30px);
	text-align: center;
	color: var(--ao-muted, #808080);
}

@media (max-width: 782px) {
	.ao-checkout__resumo {
		flex-direction: column;
		align-items: flex-start;
	}

	.ao-plans {
		padding-block: var(--ao-space-10, 40px);
	}

	.ao-plans__head {
		margin-bottom: var(--ao-space-9, 30px);
	}

	.ao-plano {
		padding: var(--ao-space-9, 30px) var(--ao-space-7, 20px);
	}
}


/* ==========================================================================
   Assinatura confirmada — a tela de sucesso do checkout
   O selo, o confete e as animacoes sao os mesmos da retirada de cupom
   (ao-painel.css:1740). A duplicacao e proposital: aquele arquivo nao e
   carregado na pagina de agradecimento, e puxar o painel inteiro por causa de
   um selo custaria muito mais que estas regras.
   ========================================================================== */

.ao-assinou {
	position: relative;
	overflow: hidden;
	padding-block: var(--ao-space-11, 48px);
}

.ao-assinou__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ao-space-5, 16px);
	max-width: 560px;
	margin-inline: auto;
	padding: var(--ao-space-10, 40px) var(--ao-space-7, 20px);
	text-align: center;
}

.ao-assinou--won .ao-assinou__card {
	animation: ao-won-card 520ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

/*
 * O reset do tema encolhe para 1em todo svg sem width e sem classe `ao-`
 * (ao-components.css) — por isso o selo declara o tamanho nos dois lugares.
 */
.ao-assinou .ao-won__seal {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	color: var(--ao-success, #1AA053);
	animation: ao-won-seal 620ms cubic-bezier(0.2, 1.5, 0.4, 1) 120ms both;
}

.ao-assinou .ao-won__seal-svg {
	width: 72px;
	height: 72px;
}

/* 145 ~= perimetro do circulo de raio 23; 32 ~= comprimento do traco do check */
.ao-assinou .ao-won__seal-ring {
	stroke-dasharray: 145;
	animation: ao-won-ring 560ms ease-out 140ms both;
}

.ao-assinou .ao-won__seal-check {
	stroke-dasharray: 32;
	animation: ao-won-check 380ms ease-out 480ms both;
}

.ao-assinou__titulo {
	margin: 0;
	font-size: var(--ao-fs-7, 32px);
	font-weight: var(--ao-fw-bold, 700);
	color: var(--ao-black, #161616);
}

.ao-assinou__texto {
	margin: 0;
	max-width: 42ch;
	color: var(--ao-gray-600, #5B5B5B);
}

/*
 * Os beneficios entram depois do titulo, ja com a tela montada: sao a
 * confirmacao do que a pessoa levou, nao a noticia principal.
 */
.ao-assinou__beneficios {
	display: flex;
	flex-direction: column;
	gap: var(--ao-space-3, 8px);
	width: 100%;
	max-width: 360px;
	margin: 0;
	padding: var(--ao-space-6, 18px) var(--ao-space-7, 20px);
	list-style: none;
	text-align: left;
	background: var(--ao-gray-50, #F7F7F7);
	border-radius: var(--ao-radius-3, 12px);
	animation: ao-won-coupon 520ms cubic-bezier(0.16, 0.84, 0.44, 1) 320ms both;
}

.ao-assinou__beneficios li {
	position: relative;
	margin: 0;
	padding-left: 26px;
	color: var(--ao-black, #161616);
}

.ao-assinou__beneficios li::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 0;
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--ao-success, #1AA053);
	border-bottom: 2px solid var(--ao-success, #1AA053);
	transform: rotate(-45deg);
}

.ao-assinou__redirect {
	margin: 0;
	font-size: var(--ao-fs-2, 14px);
	color: var(--ao-gray-500, #767676);
}

/* Sem JS a contagem nunca anda — a frase viraria uma promessa falsa. */
.ao-assinou__redirect[hidden] {
	display: none;
}

.ao-confetti {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

/*
 * Uma variavel por peca (--ao-confetti-i, 1..18) espalha posicao, atraso e giro
 * sem escrever 18 regras.
 */
.ao-confetti__bit {
	position: absolute;
	top: -24px;
	left: calc(var(--ao-confetti-i) * 5.4%);
	width: 9px;
	height: 14px;
	background: var(--ao-accent, #FF6B00);
	border-radius: 2px;
	opacity: 0;
	animation: ao-confetti-fall 2.4s cubic-bezier(0.3, 0.1, 0.5, 1) both;
	animation-delay: calc(var(--ao-confetti-i) * 70ms);
}

.ao-confetti__bit--1 {
	width: 10px;
	height: 10px;
	background: var(--ao-primary, #00126B);
	border-radius: 50%;
}

.ao-confetti__bit--2 {
	width: 7px;
	height: 16px;
	background: var(--ao-success, #1AA053);
}

@keyframes ao-won-card {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ao-won-seal {
	from {
		opacity: 0;
		transform: scale(0.4);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ao-won-ring {
	from {
		stroke-dashoffset: 145;
	}

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes ao-won-check {
	from {
		stroke-dashoffset: 32;
	}

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes ao-won-coupon {
	from {
		opacity: 0;
		transform: scale(0.92);
	}

	60% {
		transform: scale(1.03);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ao-confetti-fall {
	0% {
		opacity: 0;
		transform: translate3d(0, 0, 0) rotate(0deg);
	}

	10% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate3d(calc(var(--ao-confetti-i) * 2px - 20px), 460px, 0) rotate(720deg);
	}
}

/* Movimento e enfeite aqui: quem pediu menos movimento ve a tela pronta. */
@media (prefers-reduced-motion: reduce) {
	.ao-confetti {
		display: none;
	}

	.ao-assinou--won .ao-assinou__card,
	.ao-assinou__beneficios,
	.ao-assinou .ao-won__seal,
	.ao-assinou .ao-won__seal-ring,
	.ao-assinou .ao-won__seal-check {
		animation: none;
		opacity: 1;
		stroke-dashoffset: 0;
		transform: none;
	}
}

@media (max-width: 782px) {
	.ao-assinou__card {
		padding: var(--ao-space-8, 24px) var(--ao-space-5, 16px);
	}

	.ao-assinou__titulo {
		font-size: var(--ao-fs-5, 24px);
	}
}