/**
 * Comece Imperfeito — sales.css
 *
 * Página de vendas (page-templates/vendas.php). As seções são grupos do
 * editor com classes ci-sales-*; este arquivo define layout e ritmo.
 * Consome somente tokens de tokens.css.
 *
 * Seções (grupos de nível superior):
 *   .ci-sales-section                 largura da interface (1140px)
 *   .ci-sales-section--component      componentes (880px)
 *   .ci-sales-section--reading        coluna de leitura (680px)
 *
 * Índice
 *  1. Estrutura e ritmo
 *  2. Elementos comuns
 *  3. Abertura
 *  4. Cena e mecanismo
 *  5. As 5 partes e o ritmo do dia
 *  6. Recursos contra o abandono
 *  7. O que você recebe e páginas de amostra
 *  8. Cuidado (TDAH e ansiedade)
 *  9. Para quem é
 * 10. Oferta e garantia
 * 11. Perguntas frequentes
 * 12. Faixas e fechamento
 * 13. Comparativo
 * 14. Três movimentos e os 30 dias
 * 15. Dia 1
 * 16. Barra de compra no celular
 */

/* 1. Estrutura e ritmo --------------------------------------------------- */

/* Substitui as larguras em degraus e o padding de 10px do theme.css do Hello. */
body.page .site-main.ci-sales {
	width: 100%;
	max-width: none;
	padding-inline: 0;
	padding-block: var(--ci-space-8) var(--ci-space-section);
}

.ci-sales__content > * {
	--ci-container: var(--ci-container-wide);
	width: min(100% - (2 * var(--ci-space-gutter)), var(--ci-container));
	margin-inline: auto;
}

.ci-sales__content > .ci-sales-section--component {
	--ci-container: var(--ci-container-component);
}

.ci-sales__content > .ci-sales-section--reading {
	--ci-container: var(--ci-container-reading);
}

.ci-sales .ci-sales__content > * {
	margin-block: 0;
}

.ci-sales .ci-sales__content > * + * {
	margin-block-start: var(--ci-space-section);
}

/*
 * Ritmo interno: as margens do layout de blocos do WordPress são zeradas e
 * substituídas por uma escala própria.
 */
.ci-sales .wp-block-group > *,
.ci-sales .wp-block-details > * {
	margin-block: 0;
}

.ci-sales .wp-block-group > * + * {
	margin-block-start: var(--ci-space-4);
}

.ci-sales .wp-block-group > h2 + * {
	margin-block-start: var(--ci-space-5);
}

.ci-sales .wp-block-group > * + h3 {
	margin-block-start: var(--ci-space-7);
}

.ci-sales .wp-block-group > * + .wp-block-buttons {
	margin-block-start: var(--ci-space-6);
}

.ci-sales .wp-block-group > * + .wp-block-group {
	margin-block-start: var(--ci-space-7);
}

.ci-sales .wp-block-group > h2 + .wp-block-group {
	margin-block-start: var(--ci-space-6);
}

.ci-sales .wp-block-group > h3 + .wp-block-group {
	margin-block-start: var(--ci-space-5);
}

/* 2. Elementos comuns ---------------------------------------------------- */

.ci-sales h2 {
	font-size: var(--ci-text-3xl);
	line-height: var(--ci-leading-tight);
	letter-spacing: var(--ci-tracking-tight);
}

.ci-sales h3 {
	font-size: var(--ci-text-lg);
	line-height: var(--ci-leading-snug);
}

.ci-sales :is(p, li) {
	font-size: var(--ci-text-prose);
	line-height: var(--ci-leading-relaxed);
}

.ci-sales .ci-sales-eyebrow {
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-xs);
	font-weight: var(--ci-weight-medium);
	line-height: var(--ci-leading-snug);
	letter-spacing: var(--ci-tracking-wide);
	text-transform: uppercase;
}

.ci-sales .ci-sales-intro {
	max-width: 40rem;
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-lg);
	line-height: var(--ci-leading-normal);
}

/* Links no texto: reconhecíveis pelo sublinhado, como no resto do site. */
.ci-sales :is(p, li) a {
	text-decoration-line: underline;
}

.ci-sales :is(p, li) a:hover {
	text-decoration-color: currentColor;
	text-decoration-thickness: calc(var(--ci-border-width) * 2);
}

.ci-sales .wp-block-list {
	margin: 0;
	padding-inline-start: 1.25em;
}

.ci-sales .wp-block-list > li + li {
	margin-block-start: var(--ci-space-2);
}

/* Listas com marcador desenhado: ✓ (inclui) e – (não inclui). */
.ci-sales .wp-block-list:is(.ci-sales-checks, .ci-sales-dashes) {
	padding-inline-start: 0;
	list-style: none;
}

.ci-sales :is(.ci-sales-checks, .ci-sales-dashes) > li {
	position: relative;
	padding-inline-start: 1.75em;
}

.ci-sales .ci-sales-checks > li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.42em;
	inset-inline-start: 0.35em;
	width: 0.4em;
	height: 0.75em;
	border: solid var(--ci-color-text);
	border-width: 0 calc(var(--ci-border-width) * 2) calc(var(--ci-border-width) * 2) 0;
	transform: rotate(45deg);
}

.ci-sales .ci-sales-dashes > li::before {
	content: "–";
	position: absolute;
	inset-inline-start: 0.3em;
	color: var(--ci-color-text-tertiary);
}

/* Botões: um pouco maiores que os de interface, para a ação principal. */
.ci-sales .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ci-space-3);
}

.ci-sales .wp-block-button__link {
	min-height: 3.25rem;
	padding: var(--ci-space-3) var(--ci-space-6);
	border-radius: var(--ci-radius-sm);
	font-size: var(--ci-text-base);
	font-weight: var(--ci-weight-semibold);
}

@media (max-width: 639px) {
	.ci-sales .wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
	}

	.ci-sales .wp-block-button__link {
		width: 100%;
	}
}

/* 3. Abertura ------------------------------------------------------------ */

.ci-sales .wp-block-group.ci-sales-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: var(--ci-space-7);
}

.ci-sales .wp-block-group.ci-sales-hero > * {
	margin: 0;
}

.ci-sales .ci-sales-title {
	max-width: 18ch;
	margin-block-start: var(--ci-space-4);
	font-size: var(--ci-text-4xl);
	line-height: var(--ci-leading-tight);
	letter-spacing: var(--ci-tracking-tight);
}

.ci-sales .ci-sales-lead {
	max-width: 36rem;
	margin-block-start: var(--ci-space-5);
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-lg);
	line-height: var(--ci-leading-normal);
}

.ci-sales .wp-block-group > .ci-sales-note {
	margin-block-start: var(--ci-space-3);
	color: var(--ci-color-text-tertiary);
	font-size: var(--ci-text-sm);
	line-height: var(--ci-leading-normal);
}

.ci-sales .ci-sales-hero__media {
	justify-self: center;
	width: 100%;
	max-width: 34rem;
}

.ci-sales .ci-sales-hero__media img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 960px) {
	.ci-sales .wp-block-group.ci-sales-hero {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: var(--ci-space-8);
	}
}

/* 4. Cena e mecanismo ---------------------------------------------------- */

.ci-sales .wp-block-list.ci-sales-scenes {
	padding: 0;
	border-block-start: var(--ci-border-width) solid var(--ci-color-border);
	list-style: none;
}

.ci-sales .ci-sales-scenes > li {
	padding-block: var(--ci-space-4);
	border-block-end: var(--ci-border-width) solid var(--ci-color-border);
	font-size: var(--ci-text-lg);
	line-height: var(--ci-leading-normal);
}

.ci-sales .wp-block-list.ci-sales-scenes > li + li {
	margin-block-start: 0;
}

.ci-sales .wp-block-group > .ci-sales-statement {
	margin-block-start: var(--ci-space-6);
	font-size: var(--ci-text-xl);
	font-weight: var(--ci-weight-semibold);
	line-height: var(--ci-leading-snug);
	letter-spacing: var(--ci-tracking-snug);
}

.ci-sales .wp-block-list.ci-sales-steps {
	padding: 0;
	list-style: none;
	counter-reset: ci-step;
}

/* O número fica fora do fluxo: o texto do item pode ter <strong> no meio. */
.ci-sales .ci-sales-steps > li {
	position: relative;
	padding-block: var(--ci-space-4);
	padding-inline-start: 2.75rem;
	border-block-start: var(--ci-border-width) solid var(--ci-color-border);
	counter-increment: ci-step;
}

.ci-sales .wp-block-list.ci-sales-steps > li + li {
	margin-block-start: 0;
}

.ci-sales .ci-sales-steps > li::before {
	content: counter(ci-step);
	position: absolute;
	inset-block-start: var(--ci-space-4);
	inset-inline-start: 0;
	color: var(--ci-color-text-tertiary);
	font-size: var(--ci-text-2xl);
	font-weight: var(--ci-weight-semibold);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

/* 5. As 5 partes e o ritmo do dia ---------------------------------------- */

.ci-sales .wp-block-group.ci-sales-parts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ci-space-3);
}

.ci-sales .wp-block-group.ci-sales-parts > * {
	margin: 0;
}

.ci-sales .ci-sales-part {
	padding: var(--ci-space-5);
	background-color: var(--ci-color-surface);
	border: var(--ci-border-width) solid var(--ci-color-border);
	border-radius: var(--ci-radius-md);
}

.ci-sales .wp-block-group.ci-sales-part > * + * {
	margin-block-start: var(--ci-space-2);
}

.ci-sales .ci-sales-part h3 {
	font-size: var(--ci-text-xl);
}

.ci-sales .ci-sales-part > p:last-child {
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-base);
	line-height: var(--ci-leading-normal);
}

@media (min-width: 640px) {
	.ci-sales .wp-block-group.ci-sales-parts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ci-sales .ci-sales-part:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1100px) {
	.ci-sales .wp-block-group.ci-sales-parts {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.ci-sales .ci-sales-part:last-child:nth-child(odd) {
		grid-column: auto;
	}
}

.ci-sales .wp-block-group.ci-sales-facts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ci-space-5);
}

.ci-sales .wp-block-group.ci-sales-facts > * {
	margin: 0;
}

.ci-sales .ci-sales-fact {
	padding-block-start: var(--ci-space-4);
	border-block-start: var(--ci-border-width) solid var(--ci-color-border-strong);
}

.ci-sales .wp-block-group.ci-sales-fact > * + * {
	margin-block-start: var(--ci-space-1);
}

.ci-sales .ci-sales-fact__value {
	font-size: var(--ci-text-2xl);
	font-weight: var(--ci-weight-semibold);
	line-height: var(--ci-leading-tight);
	letter-spacing: var(--ci-tracking-tight);
}

.ci-sales .ci-sales-fact__label {
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-sm);
	line-height: var(--ci-leading-normal);
}

@media (min-width: 640px) {
	.ci-sales .wp-block-group.ci-sales-facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 6. Recursos contra o abandono ------------------------------------------ */

.ci-sales .wp-block-group.ci-sales-features {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ci-space-6);
}

.ci-sales .wp-block-group.ci-sales-features > * {
	margin: 0;
}

.ci-sales .ci-sales-feature {
	padding-block-start: var(--ci-space-5);
	border-block-start: var(--ci-border-width) solid var(--ci-color-border);
}

.ci-sales .wp-block-group.ci-sales-feature > * + * {
	margin-block-start: var(--ci-space-2);
}

.ci-sales .ci-sales-feature p {
	color: var(--ci-color-text-secondary);
}

@media (min-width: 768px) {
	.ci-sales .wp-block-group.ci-sales-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ci-space-7) var(--ci-space-6);
	}
}

/* 7. O que você recebe e páginas de amostra ------------------------------ */

.ci-sales .wp-block-group.ci-sales-includes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ci-space-4);
}

.ci-sales .wp-block-group.ci-sales-includes > * {
	margin: 0;
}

.ci-sales .ci-sales-include {
	padding: var(--ci-space-6);
	background-color: var(--ci-color-surface);
	border: var(--ci-border-width) solid var(--ci-color-border);
	border-radius: var(--ci-radius-md);
}

.ci-sales .wp-block-group.ci-sales-include > h3 {
	margin-block-start: var(--ci-space-2);
	font-size: var(--ci-text-xl);
}

.ci-sales .wp-block-group.ci-sales-include > .wp-block-list {
	margin-block-start: var(--ci-space-5);
}

@media (min-width: 768px) {
	.ci-sales .wp-block-group.ci-sales-includes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ci-sales .wp-block-group.ci-sales-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ci-space-5) var(--ci-space-4);
	max-width: var(--ci-container-component);
}

.ci-sales .wp-block-group.ci-sales-gallery > * {
	margin: 0;
}

/* Número ímpar de páginas no celular: a última fica centralizada. */
.ci-sales .ci-sales-gallery > :last-child:nth-child(odd) {
	grid-column: 1 / -1;
	justify-self: center;
	width: calc(50% - var(--ci-space-2));
}

.ci-sales .ci-sales-gallery img {
	display: block;
	width: 100%;
	height: auto;
	border: var(--ci-border-width) solid var(--ci-color-border);
	border-radius: var(--ci-radius-sm);
}

.ci-sales .ci-sales-gallery figcaption {
	margin-block: var(--ci-space-2) 0;
	text-align: start;
}

.ci-sales .wp-block-group > .ci-sales-hint {
	margin-block-start: var(--ci-space-4);
	color: var(--ci-color-text-tertiary);
	font-size: var(--ci-text-xs);
	line-height: var(--ci-leading-normal);
}

/* Até 3 páginas: 3 colunas; com 4, a grade passa a 4 colunas. */
@media (min-width: 640px) {
	.ci-sales .wp-block-group.ci-sales-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ci-sales .wp-block-group.ci-sales-gallery:has(> :nth-child(4)) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ci-sales .ci-sales-gallery > :last-child:nth-child(odd) {
		grid-column: auto;
		justify-self: stretch;
		width: auto;
	}
}

/* Ampliação das páginas (lightbox do bloco de imagem): fundo do tema. */
.wp-lightbox-overlay .scrim {
	background-color: var(--ci-color-bg) !important;
}

.wp-lightbox-overlay .close-button {
	color: var(--ci-color-text);
}

/* 8. Cuidado (TDAH e ansiedade) ------------------------------------------ */

.ci-sales .ci-sales-care {
	padding: var(--ci-space-6);
	background-color: var(--ci-color-surface);
	border: var(--ci-border-width) solid var(--ci-color-border);
	border-radius: var(--ci-radius-md);
}

.ci-sales .ci-sales-care h2 {
	font-size: var(--ci-text-2xl);
}

@media (min-width: 768px) {
	.ci-sales .ci-sales-care {
		padding: var(--ci-space-7);
	}
}

/* 9. Para quem é --------------------------------------------------------- */

.ci-sales .wp-block-group.ci-sales-fit {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ci-space-4);
}

.ci-sales .wp-block-group.ci-sales-fit > * {
	margin: 0;
}

.ci-sales .ci-sales-fit__col {
	padding: var(--ci-space-6);
	border: var(--ci-border-width) solid var(--ci-color-border);
	border-radius: var(--ci-radius-md);
}

.ci-sales .ci-sales-fit__col--yes {
	background-color: var(--ci-color-surface);
}

.ci-sales .wp-block-group.ci-sales-fit__col > .wp-block-list {
	margin-block-start: var(--ci-space-4);
}

@media (min-width: 768px) {
	.ci-sales .wp-block-group.ci-sales-fit {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 10. Oferta e garantia --------------------------------------------------- */

.ci-sales .ci-sales-offer {
	max-width: 36rem;
	margin-inline: auto;
	padding: var(--ci-space-6);
	background-color: var(--ci-color-surface);
	border: var(--ci-border-width) solid var(--ci-color-text);
	border-radius: var(--ci-radius-md);
}

.ci-sales .ci-sales-offer h2 {
	margin-block-start: var(--ci-space-2);
	font-size: var(--ci-text-2xl);
}

.ci-sales .wp-block-group.ci-sales-offer > .ci-sales-price {
	margin-block-start: var(--ci-space-6);
	font-size: var(--ci-text-4xl);
	font-weight: var(--ci-weight-semibold);
	line-height: 1;
	letter-spacing: var(--ci-tracking-tight);
	font-variant-numeric: tabular-nums;
}

.ci-sales .wp-block-group.ci-sales-offer > .ci-sales-price-note {
	margin-block-start: var(--ci-space-2);
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-sm);
	line-height: var(--ci-leading-normal);
}

.ci-sales .wp-block-group.ci-sales-offer > .wp-block-buttons {
	margin-block-start: var(--ci-space-5);
}

.ci-sales .ci-sales-offer .wp-block-button {
	flex: 1 1 100%;
}

.ci-sales .ci-sales-offer .wp-block-button__link {
	width: 100%;
}

.ci-sales .wp-block-group.ci-sales-offer > .ci-sales-pay {
	margin-block-start: var(--ci-space-3);
	color: var(--ci-color-text-tertiary);
	font-size: var(--ci-text-xs);
	line-height: var(--ci-leading-normal);
	text-align: center;
}

.ci-sales .wp-block-group.ci-sales-offer > .ci-sales-guarantee {
	margin-block-start: var(--ci-space-6);
	padding-block-start: var(--ci-space-5);
	border-block-start: var(--ci-border-width) solid var(--ci-color-border);
}

.ci-sales .wp-block-group.ci-sales-guarantee > * + * {
	margin-block-start: var(--ci-space-2);
}

.ci-sales .ci-sales-guarantee h3 {
	font-size: var(--ci-text-base);
}

.ci-sales .ci-sales-guarantee p {
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-sm);
	line-height: var(--ci-leading-normal);
}

@media (min-width: 768px) {
	.ci-sales .ci-sales-offer {
		padding: var(--ci-space-7);
	}
}

/* 11. Perguntas frequentes ------------------------------------------------ */

.ci-sales .ci-sales-faq > .wp-block-details {
	border-block-end: var(--ci-border-width) solid var(--ci-color-border);
}

.ci-sales .ci-sales-faq > h2 + .wp-block-details {
	border-block-start: var(--ci-border-width) solid var(--ci-color-border);
}

.ci-sales .wp-block-group.ci-sales-faq > .wp-block-details + .wp-block-details {
	margin-block-start: 0;
}

.ci-sales .wp-block-details summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ci-space-4);
	padding-block: var(--ci-space-4);
	font-size: var(--ci-text-prose);
	font-weight: var(--ci-weight-semibold);
	line-height: var(--ci-leading-snug);
	list-style: none;
	cursor: pointer;
}

.ci-sales .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.ci-sales .wp-block-details summary::after {
	content: "+";
	flex: none;
	color: var(--ci-color-text-tertiary);
	font-size: var(--ci-text-xl);
	font-weight: var(--ci-weight-regular);
	line-height: 1;
}

.ci-sales .wp-block-details[open] summary::after {
	content: "−";
}

.ci-sales .wp-block-details summary:hover {
	text-decoration-line: underline;
	text-decoration-color: var(--ci-color-link-underline);
	text-underline-offset: 0.22em;
}

.ci-sales .wp-block-details > p {
	padding-block-end: var(--ci-space-4);
	color: var(--ci-color-text-secondary);
}

/* 12. Faixas e fechamento ------------------------------------------------- */

/*
 * Faixa em largura total na cor de ação (tinta no tema claro, papel no
 * escuro), para dar ritmo à página. O conteúdo fica numa coluna de 880px.
 */
.ci-sales .ci-sales__content > .ci-sales-band {
	width: 100%;
	padding-block: calc(var(--ci-space-section) * 0.75);
	padding-inline: max(var(--ci-space-gutter), (100% - var(--ci-container-component)) / 2);
	background-color: var(--ci-color-action);
	color: var(--ci-color-on-action);
}

.ci-sales .ci-sales-band :focus-visible {
	outline-color: var(--ci-color-on-action);
}

.ci-sales .ci-sales-band :is(p, li) a {
	color: inherit;
}

.ci-sales .ci-sales-band__statement {
	max-width: 22ch;
	font-size: var(--ci-text-3xl);
	font-weight: var(--ci-weight-semibold);
	line-height: var(--ci-leading-tight);
	letter-spacing: var(--ci-tracking-tight);
	text-wrap: balance;
}

.ci-sales .wp-block-group > .ci-sales-band__text {
	max-width: 40rem;
	margin-block-start: var(--ci-space-5);
	font-size: var(--ci-text-lg);
	line-height: var(--ci-leading-normal);
}

/* Botão invertido sobre a faixa. */
.ci-sales .ci-sales-band .wp-block-button__link {
	background-color: var(--ci-color-on-action);
	border-color: var(--ci-color-on-action);
	color: var(--ci-color-action);
}

.ci-sales .ci-sales-band .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--ci-color-on-action);
}

.ci-sales .ci-sales-final {
	text-align: center;
}

.ci-sales .ci-sales-final > * {
	margin-inline: auto;
}

.ci-sales .ci-sales-final > p {
	max-width: 32rem;
	font-size: var(--ci-text-lg);
	line-height: var(--ci-leading-normal);
}

.ci-sales .ci-sales-final .wp-block-buttons {
	justify-content: center;
}

.ci-sales .wp-block-group.ci-sales-final > .ci-sales-final__note {
	margin-block-start: var(--ci-space-3);
	font-size: var(--ci-text-sm);
}

/* Quando a página termina numa faixa, ela encosta no rodapé. */
body.page .site-main.ci-sales:has(.ci-sales__content > .ci-sales-band:last-child) {
	padding-block-end: 0;
}

/* 13. Comparativo -------------------------------------------------------- */

.ci-sales .wp-block-group.ci-sales-compare {
	border-block-start: var(--ci-border-width) solid var(--ci-color-border);
}

.ci-sales .wp-block-group.ci-sales-compare > * {
	margin: 0;
}

.ci-sales .ci-sales-compare__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ci-space-1);
	padding-block: var(--ci-space-4);
	border-block-end: var(--ci-border-width) solid var(--ci-color-border);
}

.ci-sales .wp-block-group.ci-sales-compare__row > * {
	margin: 0;
}

.ci-sales .ci-sales-compare__old {
	color: var(--ci-color-text-tertiary);
}

.ci-sales .ci-sales-compare__new {
	font-weight: var(--ci-weight-medium);
}

/* Celular: sem cabeçalho de colunas, cada linha leva o próprio rótulo. */
.ci-sales .ci-sales-compare__head {
	display: none;
}

.ci-sales .ci-sales-compare__old::before,
.ci-sales .ci-sales-compare__new::before {
	display: block;
	font-size: var(--ci-text-xs);
	font-weight: var(--ci-weight-medium);
	letter-spacing: var(--ci-tracking-wide);
	text-transform: uppercase;
}

.ci-sales .ci-sales-compare__old::before {
	content: "Antes";
}

.ci-sales .ci-sales-compare__new::before {
	content: "No método";
	margin-block-start: var(--ci-space-2);
	color: var(--ci-color-text-secondary);
}

@media (min-width: 768px) {
	.ci-sales .ci-sales-compare__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ci-space-6);
	}

	.ci-sales .ci-sales-compare__head {
		display: grid;
		padding-block: var(--ci-space-3);
	}

	.ci-sales .ci-sales-compare__head p {
		color: var(--ci-color-text-secondary);
		font-size: var(--ci-text-xs);
		font-weight: var(--ci-weight-medium);
		letter-spacing: var(--ci-tracking-wide);
		text-transform: uppercase;
	}

	.ci-sales .ci-sales-compare__old::before,
	.ci-sales .ci-sales-compare__new::before {
		content: none;
	}
}

/* Variante em 3 colunas: critério · sem o método · com o método. */
.ci-sales .ci-sales-compare__crit {
	font-weight: var(--ci-weight-semibold);
}

.ci-sales .ci-sales-compare--3 .ci-sales-compare__crit + .ci-sales-compare__old {
	margin-block-start: var(--ci-space-2);
}

.ci-sales .ci-sales-compare--3 .ci-sales-compare__old::before {
	content: "Sem o método";
}

.ci-sales .ci-sales-compare--3 .ci-sales-compare__new::before {
	content: "Com o Comece Imperfeito";
}

@media (min-width: 768px) {
	.ci-sales .ci-sales-compare--3 .ci-sales-compare__row {
		grid-template-columns: minmax(0, 0.8fr) repeat(2, minmax(0, 1fr));
	}

	.ci-sales .ci-sales-compare--3 .ci-sales-compare__crit + .ci-sales-compare__old {
		margin-block-start: 0;
	}

	.ci-sales .ci-sales-compare--3 .ci-sales-compare__old::before,
	.ci-sales .ci-sales-compare--3 .ci-sales-compare__new::before {
		content: none;
	}
}

/* Ciclo da fuga × ciclo da prova, dentro da faixa (cores derivadas do texto da faixa). */
.ci-sales .wp-block-group.ci-sales-cycle > * {
	margin: 0;
}

.ci-sales .ci-sales-cycle__row {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	gap: var(--ci-space-1) var(--ci-space-3);
	padding-block: var(--ci-space-4);
	border-block-start: var(--ci-border-width) solid color-mix(in srgb, currentColor 22%, transparent);
}

.ci-sales .wp-block-group.ci-sales-cycle__row > * {
	margin: 0;
}

.ci-sales .ci-sales-cycle__num {
	grid-row: span 2;
	color: color-mix(in srgb, currentColor 60%, transparent);
	font-size: var(--ci-text-xl);
	font-weight: var(--ci-weight-semibold);
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

.ci-sales .ci-sales-cycle__escape {
	color: color-mix(in srgb, currentColor 72%, transparent);
}

.ci-sales .ci-sales-cycle__proof {
	font-weight: var(--ci-weight-medium);
}

.ci-sales .ci-sales-cycle__head {
	display: none;
}

.ci-sales .ci-sales-cycle__escape::before,
.ci-sales .ci-sales-cycle__proof::before {
	display: block;
	font-size: var(--ci-text-xs);
	font-weight: var(--ci-weight-medium);
	letter-spacing: var(--ci-tracking-wide);
	text-transform: uppercase;
}

.ci-sales .ci-sales-cycle__escape::before {
	content: "Ciclo da fuga";
}

.ci-sales .ci-sales-cycle__proof::before {
	content: "Ciclo da prova";
	margin-block-start: var(--ci-space-2);
}

@media (min-width: 768px) {
	.ci-sales .ci-sales-cycle__row {
		grid-template-columns: 3.5rem repeat(2, minmax(0, 1fr));
		gap: var(--ci-space-6);
	}

	.ci-sales .ci-sales-cycle__num {
		grid-row: auto;
	}

	.ci-sales .ci-sales-cycle__head {
		display: grid;
		padding-block: var(--ci-space-3);
		border-block-start: 0;
	}

	.ci-sales .ci-sales-cycle__head p {
		color: color-mix(in srgb, currentColor 72%, transparent);
		font-size: var(--ci-text-xs);
		font-weight: var(--ci-weight-medium);
		letter-spacing: var(--ci-tracking-wide);
		line-height: var(--ci-leading-snug);
		text-transform: uppercase;
	}

	.ci-sales .ci-sales-cycle__escape::before,
	.ci-sales .ci-sales-cycle__proof::before {
		content: none;
	}
}

/* Lista de benefícios: um pouco mais de ar entre os itens. */
.ci-sales .wp-block-group > .ci-sales-intro + .ci-sales-benefits {
	margin-block-start: var(--ci-space-6);
}

.ci-sales .wp-block-list.ci-sales-benefits > li + li {
	margin-block-start: var(--ci-space-3);
}

/* Bônus: capa à esquerda no celular, cards em 3 colunas no computador. */
.ci-sales .wp-block-group.ci-sales-bonuses {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ci-space-4);
}

.ci-sales .wp-block-group.ci-sales-bonuses > * {
	margin: 0;
}

.ci-sales .ci-sales-bonus {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	grid-auto-rows: min-content;
	align-items: start;
	column-gap: var(--ci-space-5);
	padding: var(--ci-space-5);
	background-color: var(--ci-color-surface);
	border: var(--ci-border-width) solid var(--ci-color-border);
	border-radius: var(--ci-radius-md);
}

.ci-sales .wp-block-group.ci-sales-bonus > * {
	grid-column: 2;
}

.ci-sales .wp-block-group.ci-sales-bonus > figure {
	grid-column: 1;
	grid-row: 1 / span 4;
	margin: 0;
}

.ci-sales .wp-block-group.ci-sales-bonus > * + * {
	margin-block-start: var(--ci-space-2);
}

.ci-sales .wp-block-group.ci-sales-bonus > figure + * {
	margin-block-start: 0;
}

.ci-sales .ci-sales-bonus img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ci-radius-sm);
	outline: var(--ci-border-width) solid var(--ci-color-border);
}

.ci-sales .ci-sales-bonus p:not(.ci-sales-eyebrow) {
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-base);
	line-height: var(--ci-leading-normal);
}

.ci-sales .ci-sales-bonus p.ci-sales-bonus__value {
	color: var(--ci-color-text);
	font-size: var(--ci-text-sm);
	font-weight: var(--ci-weight-medium);
}

.ci-sales .ci-sales-bonus__value s {
	color: var(--ci-color-text-tertiary);
	font-weight: var(--ci-weight-regular);
}

@media (min-width: 960px) {
	.ci-sales .wp-block-group.ci-sales-bonuses {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ci-sales .ci-sales-bonus {
		grid-template-columns: minmax(0, 1fr);
	}

	.ci-sales .wp-block-group.ci-sales-bonus > *,
	.ci-sales .wp-block-group.ci-sales-bonus > figure {
		grid-column: 1;
		grid-row: auto;
	}

	.ci-sales .wp-block-group.ci-sales-bonus > figure {
		width: 7rem;
		margin-block-end: var(--ci-space-3);
	}
}

/* 14. Três movimentos e os 30 dias --------------------------------------- */

.ci-sales .wp-block-group.ci-sales-moves {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ci-space-5);
	counter-reset: ci-move;
}

.ci-sales .wp-block-group.ci-sales-moves > * {
	margin: 0;
}

.ci-sales .ci-sales-move {
	padding-block-start: var(--ci-space-4);
	border-block-start: calc(var(--ci-border-width) * 2) solid var(--ci-color-text);
	counter-increment: ci-move;
}

.ci-sales .wp-block-group.ci-sales-move > * + * {
	margin-block-start: var(--ci-space-2);
}

.ci-sales .ci-sales-move h3::before {
	content: counter(ci-move) ". ";
	color: var(--ci-color-text-tertiary);
}

.ci-sales .ci-sales-move p {
	color: var(--ci-color-text-secondary);
}

@media (min-width: 768px) {
	.ci-sales .wp-block-group.ci-sales-moves {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--ci-space-6);
	}
}

.ci-sales .wp-block-group > * + .ci-sales-days-toggle {
	margin-block-start: var(--ci-space-6);
}

.ci-sales .ci-sales-days-toggle {
	border-block: var(--ci-border-width) solid var(--ci-color-border);
}

.ci-sales .ci-sales-days {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ci-space-5) var(--ci-space-6);
	padding-block: var(--ci-space-2) var(--ci-space-6);
}

.ci-sales .wp-block-group.ci-sales-days > * {
	margin: 0;
}

.ci-sales .wp-block-group.ci-sales-days__part > * + * {
	margin-block-start: var(--ci-space-2);
}

.ci-sales .wp-block-list.ci-sales-days__list {
	padding: 0;
	list-style: none;
}

.ci-sales .ci-sales-days__list > li {
	display: flex;
	gap: var(--ci-space-3);
	padding-block: var(--ci-space-1);
	font-size: var(--ci-text-sm);
	line-height: var(--ci-leading-normal);
}

.ci-sales .wp-block-list.ci-sales-days__list > li + li {
	margin-block-start: 0;
}

.ci-sales .ci-sales-days__list strong {
	flex: none;
	width: 3.75em;
	color: var(--ci-color-text-tertiary);
	font-weight: var(--ci-weight-medium);
	font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
	.ci-sales .ci-sales-days {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.ci-sales .ci-sales-days {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 15. Dia 1 -------------------------------------------------------------- */

.ci-sales .wp-block-group.ci-sales-day1 {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: var(--ci-space-7);
}

.ci-sales .wp-block-group.ci-sales-day1 > * {
	margin: 0;
}

.ci-sales .ci-sales-day1__media {
	justify-self: center;
	width: 100%;
	max-width: 22rem;
}

.ci-sales .ci-sales-day1__media img {
	display: block;
	width: 100%;
	height: auto;
	border: var(--ci-border-width) solid var(--ci-color-border);
	border-radius: var(--ci-radius-sm);
}

.ci-sales .ci-sales-day1__media figcaption {
	margin-block: var(--ci-space-2) 0;
}

@media (min-width: 960px) {
	.ci-sales .wp-block-group.ci-sales-day1 {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: var(--ci-space-8);
	}
}

/* 16. Barra de compra no celular (criada por assets/js/sales.js) --------- */

.ci-sales-bar {
	display: none;
}

@media (max-width: 767px) {
	.ci-sales-bar {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 50;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--ci-space-3);
		padding: var(--ci-space-3) var(--ci-space-gutter) calc(var(--ci-space-3) + env(safe-area-inset-bottom, 0px));
		background-color: var(--ci-color-surface);
		border-block-start: var(--ci-border-width) solid var(--ci-color-border);
		box-shadow: var(--ci-shadow-overlay);
		transform: translateY(110%);
		transition: transform var(--ci-duration-base) var(--ci-ease);
	}

	.ci-sales-bar.is-visible {
		transform: none;
	}

	.ci-sales-bar__price {
		margin: 0;
		font-size: var(--ci-text-lg);
		font-weight: var(--ci-weight-semibold);
		line-height: var(--ci-leading-snug);
		font-variant-numeric: tabular-nums;
	}

	.ci-sales-bar__price span {
		display: block;
		color: var(--ci-color-text-tertiary);
		font-size: var(--ci-text-xs);
		font-weight: var(--ci-weight-regular);
	}

	.ci-sales-bar .ci-button {
		flex: none;
	}
}

html:has(.ci-sales) {
	scroll-behavior: smooth;
}

.ci-sales #comprar {
	scroll-margin-block-start: var(--ci-space-6);
}