/* Estilos das seções do tema MakeGrow: cabeçalho, rodapé, barra fixa, página de nicho e Home. */

/*
 * Mobile-first: os estilos sem media query valem para o celular; as ampliações entram com
 * "min-width: 768px" e "min-width: 1024px" (mesmos limites do protótipo, ordem invertida),
 * exceto a troca para o menu de mesa, em "min-width: 1100px" (motivo junto da regra).
 */

/*
 * Partes da raiz encostadas umas nas outras, como no protótipo: cabeçalho no topo da página,
 * "main" logo abaixo dele, rodapé logo depois do "main" e a barra fixa de contato sem espaço
 * antes. O núcleo aplica o "styles.spacing.blockGap" do theme.json (24 px) a todo filho da
 * raiz ("wp-site-blocks"), exceto o primeiro, que aqui é o skip-link. Zerar o blockGap no
 * theme.json não serve: o mesmo valor é o espaçamento padrão dentro do conteúdo. A regra
 * mira só as partes de template e o "main" da raiz, com especificidade maior que a do núcleo
 * (":where(.wp-site-blocks) > *" no site, ":root :where(.wp-site-blocks) > *" no editor, cuja
 * raiz também tem a classe "wp-site-blocks").
 */
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > main {
	margin-block-start: 0;
}

/*
 * Cabeçalho fixo: 64 px no celular, 72 px a partir de 768 px; fundo do papel semântico
 * "fundo" a 94% com desfoque, borda inferior. Fica acima do conteúdo e do painel do menu.
 *
 * O "position: sticky" vai na parte de template ("site-header-part", o elemento
 * "header.wp-block-template-part" que os templates renderizam), não no grupo interno
 * ("site-header"): um elemento sticky só se move dentro do próprio pai, e o pai do
 * grupo interno tem a mesma altura do cabeçalho, então nunca gruda no topo. O grupo
 * interno fica "position: relative", porque é o ancestral posicionado mais próximo do
 * painel do makegrow/mobile-menu (ver src/blocks/mobile-menu/style.css).
 */
.site-header-part {
	position: sticky;
	top: 0;
	z-index: 40;
}

/*
 * Com a barra de administração (usuário logado), o cabeçalho gruda logo abaixo dela. Abaixo
 * de 601 px a barra do núcleo não é fixa (rola com a página), então o topo continua em 0.
 * A variável vem de wp-includes/css/admin-bar.css.
 */
@media (min-width: 601px) {

	.admin-bar .site-header-part {
		top: var(--wp-admin--admin-bar--height, 0);
	}
}

.site-header {
	position: relative;
	background: color-mix(in srgb, var(--wp--custom--cor--fundo) 94%, transparent);
	backdrop-filter: saturate(1.2) blur(8px);
	border-block-end: var(--wp--custom--traco--borda) solid var(--wp--custom--cor--borda);
}

/*
 * O grupo interno usa layout "default" e não recebe o padding global do tema: a margem
 * lateral é explícita, com o mesmo resultado do ".largo" do protótipo
 * (largura de min(100% - 2 * margem, wide-size)).
 */
.site-header__inner {
	box-sizing: border-box;
	min-block-size: var(--wp--custom--layout--topo-altura);
	max-inline-size: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--custom--layout--margem));
	margin-inline: auto;
	padding-inline: var(--wp--custom--layout--margem);
	gap: var(--wp--preset--spacing--40);
}

/*
 * O theme.json já define o token em 72 px (valor de tablet/desktop); para manter a cascata
 * mobile-first invertemos a ordem aqui: primeiro fixamos 64 px para todas as larguras,
 * depois a media query a partir de 768 px restaura o valor de 72 px do token.
 */
:root {
	--wp--custom--layout--topo-altura: 64px;
}

@media (min-width: 768px) {

	:root {
		--wp--custom--layout--topo-altura: 72px;
	}
}

/*
 * O menu de mesa (site-header__nav, o core/navigation com "overlayMenu":"never") só
 * aparece a partir de 1100 px; abaixo disso quem mostra o menu é o bloco
 * makegrow/mobile-menu (com <details>/<summary>, ver src/blocks/mobile-menu), que não
 * depende de JavaScript para abrir. Os dois blocos usam o mesmo menu "Principal",
 * resolvido pelo token "makegrow-menu-principal" (ver parts/header.html). Seletor composto
 * (duas classes no mesmo elemento) para ganhar do "body .is-layout-flex" que o suporte de
 * layout do núcleo imprime inline.
 *
 * Por que 1100 px e não o 1024 px do protótipo: logo, os quatro itens e o botão, com 24 px
 * entre os itens do menu, somam cerca de 1031 px, mais 48 px de margem, e só cabem numa
 * linha a partir de cerca de 1079 px. A 1024 px o botão quebrava para uma segunda linha e
 * o cabeçalho passava de 72 px; o próprio protótipo também não cabe nessa faixa (quebra o
 * texto dos itens em duas linhas até cerca de 1112 px). Reduzir as distâncias para 16 px
 * ainda deixava faltando cerca de 7 px a 1024 px, então o corte sobe para 1100 px, com
 * folga.
 *
 * O botão do cabeçalho (makegrow/whatsapp-link com a classe "site-header__cta") fica fora
 * do wp_navigation, em parts/header.html, e acompanha a troca: escondido abaixo de 1100 px
 * (no celular o botão está no painel do menu) e visível a partir daí. Duas classes vencem o
 * "display: inline-flex" do estilo do próprio bloco sem depender da ordem de carga.
 *
 * Espaços como no protótipo: entre o último item e o botão, sempre 32 px (".topo .largo
 * { gap: var(--s40) }"), que é o "gap" de "site-header__inner", porque o botão é irmão da
 * navegação; a navegação recebe "margin-inline-start: auto" (".nav { margin-left: auto }")
 * para ficar junto do botão, à direita, em vez de centrada pelo "space-between". A margem
 * mira só o filho direto de "site-header__inner", porque o núcleo repete o "className" da
 * navegação no "<ul>". Entre os itens, 24 px até 1199 px e 32 px a partir de 1200 px
 * (".nav ul { gap: var(--s40) }", reduzido a "var(--s30)" abaixo de 1200 px), na lista
 * (".wp-block-navigation__container"); o seletor da lista tem uma classe a mais (0,3,0) e
 * vence sem depender da ordem das regras. O botão não encolhe, para o rótulo não quebrar.
 */
.site-header__nav.wp-block-navigation {
	display: none;
}

.site-header .site-header__cta {
	display: none;
}

@media (min-width: 1100px) {

	.site-header__nav.wp-block-navigation {
		display: flex;
	}

	.site-header__inner > .site-header__nav {
		margin-inline-start: auto;
	}

	.site-header .site-header__cta {
		display: inline-flex;
		flex-shrink: 0;
	}

	.site-header__nav.wp-block-navigation .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--30);
	}

	/*
	 * Links inline, como o ".nav a" do protótipo: a caixa fica com a altura da fonte mais o
	 * padding de 8 px, e o sublinhado animado (fundo na base da caixa, blocks/navigation.css)
	 * fica à mesma distância do texto. Com o "display: block" do núcleo, a caixa usava a
	 * entrelinha e o sublinhado descia cerca de 3 px. O item da lista deixa de ser flex (o
	 * núcleo o faz flex, o que tornaria o link bloco de novo) e continua centrado no
	 * cabeçalho, então o texto não muda de lugar. Três classes vencem as regras do núcleo.
	 */
	.site-header__nav.wp-block-navigation .wp-block-navigation-item {
		display: block;
	}

	.site-header__nav.wp-block-navigation .wp-block-navigation-item__content {
		display: inline;
	}

	.wp-block-makegrow-mobile-menu {
		display: none;
	}
}

@media (min-width: 1200px) {

	.site-header__nav.wp-block-navigation .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--40);
	}
}

/*
 * Cabeçalho de nicho (parts/header-niche.html, classe "site-header--niche"): o menu de mesa
 * aparece a partir de 1024 px, como no protótipo e na tabela 7.1 da especificação. O corte
 * de 1100 px do cabeçalho da marca-mãe existe porque aquele menu não cabe numa linha a
 * 1024 px; aqui logo, quatro âncoras, 24 px entre elas e o botão somam cerca de 925 px e
 * cabem nos 1024 px menos as margens. As regras repetem as de 1100 px com a classe do
 * nicho, que dá uma classe a mais de especificidade; por isso o "gap" de 32 px a partir
 * de 1200 px também é repetido, senão o de 24 px daqui venceria.
 */
@media (min-width: 1024px) {

	.site-header--niche .site-header__nav.wp-block-navigation {
		display: flex;
	}

	.site-header--niche .site-header__inner > .site-header__nav {
		margin-inline-start: auto;
	}

	.site-header--niche .site-header__cta {
		display: inline-flex;
		flex-shrink: 0;
	}

	.site-header--niche .site-header__nav.wp-block-navigation .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--30);
	}

	.site-header--niche .site-header__nav.wp-block-navigation .wp-block-navigation-item {
		display: block;
	}

	.site-header--niche .site-header__nav.wp-block-navigation .wp-block-navigation-item__content {
		display: inline;
	}

	.site-header--niche .wp-block-makegrow-mobile-menu {
		display: none;
	}
}

@media (min-width: 1200px) {

	.site-header--niche .site-header__nav.wp-block-navigation .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--40);
	}
}

/*
 * Painel do menu do celular. A navegação interna sai do núcleo em flexbox linha com "gap";
 * aqui ela empilha o conteúdo sem o "gap". O botão de WhatsApp (makegrow/whatsapp-link com
 * "isBlock", fora do wp_navigation) vem depois da navegação, em largura total (classe
 * "is-block" do próprio bloco) e 8 px abaixo do último item (protótipo,
 * ".menu-cel .painel .btn { margin-top: 8px; width: 100% }").
 */
.wp-block-makegrow-mobile-menu__panel .wp-block-navigation {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.wp-block-makegrow-mobile-menu__panel .wp-block-makegrow-whatsapp-link {
	margin-block-start: 8px;
}

/*
 * Rodapé: sempre no papel semântico "rodapé" (a variação de bloco "escuro" cuida do texto).
 * Espaço extra no fim, no celular, para a barra fixa não cobrir o final do rodapé; some a
 * partir de 768 px, quando a barra deixa de existir.
 */
.site-footer {
	padding-block: var(--wp--preset--spacing--60) calc(var(--wp--preset--spacing--40) + 72px);
	font-size: var(--wp--preset--font-size--interface);
}

@media (min-width: 768px) {

	.site-footer {
		padding-block-end: var(--wp--preset--spacing--40);
	}
}

/*
 * Grade do rodapé: 1 coluna no celular, 2 a partir de 768 px e 4 a partir de 1024 px. O
 * "columnCount: 4" da parte gera no núcleo ".wp-container-core-group-is-layout-N" com
 * "repeat(4, minmax(0, 1fr))", com a mesma especificidade de uma classe só: no site esta
 * folha vinha depois e vencia, mas no editor o estilo de layout entra depois dela e as
 * quatro colunas iguais apareciam em qualquer largura. O seletor com duas classes vence
 * nos dois lugares, sem depender da ordem de carregamento.
 */
.site-footer .site-footer__grid {
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 768px) {

	.site-footer .site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {

	.site-footer .site-footer__grid {
		grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
	}
}

.site-header__logo img {
	block-size: 30px;
	inline-size: auto;
}

/*
 * O rodapé é sempre escuro, nos dois temas: a logomarca troca para a versão negativa
 * sempre, ao contrário do cabeçalho (que troca só no modo escuro, em theme-dark.css).
 * Nunca filtro de inversão de cor; o alt vem do bloco core/site-logo.
 */
.site-footer__logo img {
	block-size: 32px;
	inline-size: auto;
	content: url(../img/logo/lockup-horizontal-negativo.svg);
}

/*
 * Alvo de toque de 44 px nos links do logo, sem mexer na imagem. O link vira um flex de
 * pelo menos 44 px de altura com a imagem centralizada. No cabeçalho, o grupo interno já
 * centraliza o bloco na altura do topo, então a imagem fica onde estava. No rodapé, o
 * logo está num fluxo de blocos: a margem negativa de 6 px em cima e embaixo devolve os
 * 12 px a mais (44 - 32), e a frase de apoio logo abaixo não desce.
 */
.site-header__logo .custom-logo-link,
.site-footer__logo .custom-logo-link {
	display: flex;
	align-items: center;
	inline-size: fit-content;
	min-block-size: 44px;
}

.site-footer__logo .custom-logo-link {
	margin-block: -6px;
}

.site-footer__tagline {
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--custom--cor--sobre-escuro-2);
	max-inline-size: 26ch;
}

/*
 * Título das colunas do rodapé com a entrelinha de título (o "h2" do protótipo) e 14 px até
 * o primeiro link (".rodape h2 { margin-bottom: 14px }"). O bloco seguinte perde a margem de
 * topo que o layout de fluxo do núcleo aplica (blockGap de 24 px, que colapsava com os 14 px
 * e valia 24). As margens levam duas classes para vencer o layout de fluxo também no editor,
 * onde ele zera a margem inferior do título.
 */
.footer__title {
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: var(--wp--custom--tipografia--peso-titulo);
	line-height: var(--wp--custom--tipografia--altura-linha-titulo);
	color: var(--wp--custom--cor--sobre-escuro);
}

.site-footer .footer__title {
	margin-block-end: 14px;
}

.site-footer .footer__title + * {
	margin-block-start: 0;
}

/*
 * Sublinhado de 1 px, 2 px no hover, como os demais links (base.css). A espessura é repetida
 * aqui porque o estilo global da navegação (":root :where(.wp-block-navigation a)", com
 * "text-decoration: none" no theme.json) vence a regra de base.css e a deixaria em "auto".
 */
.site-footer a {
	color: var(--wp--custom--cor--texto-sobre-escuro);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--wp--custom--cor--texto-sobre-escuro) 40%, transparent);
}

.site-footer a:hover {
	text-decoration-thickness: 2px;
	text-decoration-color: var(--wp--preset--color--mel);
}

/*
 * Links e passo das navegações do rodapé. No celular, links com 10 px em cima e embaixo
 * (24,8 + 20 = 44,8 px de alvo de toque, como em base.css; aqui é repetido porque o
 * padding de 8 px de blocks/navigation.css vence a regra de base.css) e nenhum espaço
 * entre eles. Largura mínima de 44 px para o alvo de um link curto, como "Início"; o
 * texto continua alinhado à esquerda e o sublinhado só sob ele, então nada se move.
 * A partir de 768 px, links sem padding e 10 px entre os itens, como o
 * ".rodape ul" do protótipo. O "gap" leva duas classes para vencer o do layout flex do
 * núcleo também no editor, onde o estilo de layout entra depois desta folha. O peso volta
 * ao do corpo (400, o ".rodape a" do protótipo), em vez do peso 500 que o theme.json dá a
 * toda navegação; as duas classes vencem também o estilo global da navegação.
 */
.site-footer__nav .wp-block-navigation-item__content {
	min-inline-size: 44px;
	background-image: none;
	padding-block: 10px;
}

.site-footer .site-footer__nav {
	gap: 0;
	font-weight: 400;
}

@media (min-width: 768px) {

	.site-footer__nav .wp-block-navigation-item__content {
		padding-block: 0;
	}

	.site-footer .site-footer__nav {
		gap: 10px;
	}
}

.site-footer__bottom {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: var(--wp--custom--traco--borda) solid var(--wp--custom--cor--borda-sobre-escuro);
	color: var(--wp--custom--cor--sobre-escuro-2);
	font-size: var(--wp--preset--font-size--nota);
}

/*
 * Barra fixa de WhatsApp: visível por padrão (celular), some a partir de 768 px. Fica
 * escondida (fora da tela) enquanto o topo da página está visível, via data-hidden.
 */
.contact-bar {
	display: block;
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 50;
	padding: 10px var(--wp--custom--layout--margem) calc(10px + env(safe-area-inset-bottom));
	background: color-mix(in srgb, var(--wp--custom--cor--fundo) 96%, transparent);
	border-block-start: var(--wp--custom--traco--borda) solid var(--wp--custom--cor--borda);
	transition: transform var(--wp--custom--movimento--duracao-barra) ease;
}

.contact-bar[data-hidden="true"] {
	transform: translateY(110%);
}

/*
 * A partir de 768 px some a parte de template inteira ("contact-bar-part", o
 * <aside aria-label> que os templates renderizam), não só o grupo interno: esconder só
 * o grupo deixaria na árvore de acessibilidade uma região "complementary" vazia.
 */
@media (min-width: 768px) {

	.contact-bar-part {
		display: none;
	}
}

/*
 * Com a barra fixa na página, a rolagem do foco por teclado reserva a altura dela (69 px
 * medidos, 72 px como no rodapé) mais a área segura, para o elemento focado perto da base
 * da janela não ficar coberto. A partir de 768 px a barra some e a reserva também.
 */
html:has(.contact-bar-part) {
	scroll-padding-block-end: calc(72px + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {

	html:has(.contact-bar-part) {
		scroll-padding-block-end: 0;
	}
}

/*
 * Cor de nicho por modelo de página: a classe "niche-health" vem de
 * makegrow_niche_body_class() (inc/editor.php) nas páginas com o modelo "niche-health".
 * O valor segue o tema de cor porque "--wp--custom--nicho--salvia" é redefinido em
 * theme-dark.css.
 */
.niche-health {
	--wp--custom--nicho--cor: var(--wp--custom--nicho--salvia);
}

/*
 * Seção 1: Topo de nicho e topo da marca (padrões makegrow/hero-niche e makegrow/hero-brand;
 * as regras de valores iguais são compartilhadas). Topo de nicho, mobile-first: 1 coluna até
 * 1199 px, com o texto até 640 px (tabela 7.1); 2 colunas iguais e altura mínima
 * min(78vh, 640px) a partir de 1200 px. O botão de WhatsApp ocupa a largura toda no
 * celular; o contorno vira link sublinhado pelas regras ".hero" de blocks/button.css.
 */
.hero-niche,
.hero-brand {
	padding-block: clamp(2.5rem, 1rem + 5vw, 5rem) var(--wp--preset--spacing--60);
}

.hero-niche__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

.hero-niche .hero-niche__text {
	max-inline-size: 640px;
}

.hero-niche h1 {
	max-inline-size: 18ch;
}

.hero-niche .hero-niche__sub,
.hero-brand .hero-brand__sub {
	margin-block-start: var(--wp--preset--spacing--30);
	max-inline-size: 34em;
	font-size: var(--wp--preset--font-size--medio);
	line-height: 1.5;
	color: var(--wp--custom--cor--texto-2);
}

.hero-niche .hero-niche__list,
.hero-brand .hero-brand__list {
	margin-block-start: var(--wp--preset--spacing--30);
	font-weight: var(--wp--custom--tipografia--peso-subtitulo);
}

/* Duas classes vencem o "gap" do layout flex do núcleo também no editor. */
.hero-niche .hero-niche__actions,
.hero-brand .hero-brand__actions {
	gap: 12px var(--wp--preset--spacing--20);
	align-items: center;
	margin-block-start: var(--wp--preset--spacing--40);
}

.hero-niche__actions > .wp-block-makegrow-whatsapp-link,
.hero-brand__actions > .wp-block-makegrow-whatsapp-link {
	flex-basis: 100%;
}

.hero-niche .hero-niche__visual {
	margin-block-start: 0;
}

@media (min-width: 768px) {

	.hero-niche__actions > .wp-block-makegrow-whatsapp-link,
	.hero-brand__actions > .wp-block-makegrow-whatsapp-link {
		flex-basis: auto;
	}
}

@media (min-width: 1200px) {

	.hero-niche__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		min-block-size: min(78vh, 640px);
	}

	.hero-niche .hero-niche__text {
		max-inline-size: none;
	}
}

/*
 * Topo da marca (padrão makegrow/hero-brand; tabela 7.2). Mobile-first: no celular, uma
 * coluna com o símbolo de 96 px acima do título, alinhado à esquerda (protótipo
 * ".hero-home .visual { order: -1 }" e ".simbolo-grande { width: 96px }"); de 768 a 1199 px,
 * uma coluna com o texto até 640 px e o símbolo centralizado abaixo, até o "size" do bloco
 * (400 px); a partir de 1200 px, 7fr / 5fr com altura mínima min(78vh, 640px).
 */
.hero-brand__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

.hero-brand .hero-brand__grid > * {
	margin-block: 0;
}

.hero-brand .hero-brand__text {
	max-inline-size: 640px;
}

.hero-brand h1 {
	max-inline-size: 20ch;
}

.hero-brand .hero-brand__visual {
	order: -1;
}

.hero-brand .hero-brand__visual .wp-block-makegrow-symbol {
	justify-content: flex-start;
}

.hero-brand .hero-brand__visual .wp-block-makegrow-symbol__svg {
	inline-size: 96px;
}

@media (min-width: 768px) {

	.hero-brand .hero-brand__visual {
		order: 0;
	}

	.hero-brand .hero-brand__visual .wp-block-makegrow-symbol {
		justify-content: center;
	}

	.hero-brand .hero-brand__visual .wp-block-makegrow-symbol__svg {
		inline-size: min(100%, var(--makegrow-symbol-size));
	}
}

@media (min-width: 1200px) {

	.hero-brand__grid {
		grid-template-columns: 7fr 5fr;
		min-block-size: min(78vh, 640px);
	}

	.hero-brand .hero-brand__text {
		max-inline-size: none;
	}
}

/*
 * Topo da marca com ilustração (padrão makegrow/hero-brand-illustration; 04-conteudo 7.3).
 * A lista usa a margem da lista do topo de nicho (regra compartilhada acima); o microcopy
 * fica 24 px abaixo dos botões ("p" vence o 14 px do estilo "micro" em qualquer ordem de
 * carga). Mobile-first: no celular, a ilustração fica abaixo dos botões (anula o "order: -1"
 * do símbolo), com no máximo 440 px; de 768 a 1199 px, centralizada até 440 px, como o
 * símbolo da Home; a partir de 1200 px, ocupa a coluna 5fr da grade do topo da marca.
 */
.hero-brand p.hero-brand__micro {
	margin-block-start: var(--wp--preset--spacing--30);
}

.hero-brand.hero-brand--illustration .hero-brand__visual {
	order: 0;
	inline-size: 100%;
	max-inline-size: 440px;
}

@media (min-width: 768px) {

	.hero-brand.hero-brand--illustration .hero-brand__visual {
		margin-inline: auto;
	}
}

@media (min-width: 1200px) {

	.hero-brand.hero-brand--illustration .hero-brand__visual {
		max-inline-size: none;
		margin-inline: 0;
	}
}

/*
 * Topo só com texto (padrão makegrow/hero-brand-text, SPEC 6): sem a coluna do símbolo, o
 * texto ocupa a grade inteira e o topo perde a altura mínima do topo da Home.
 */
@media (min-width: 1200px) {

	.hero-brand.hero-brand--text .hero-brand__grid {
		grid-template-columns: minmax(0, 1fr);
		min-block-size: 0;
	}

	.hero-brand.hero-brand--text .hero-brand__text {
		max-inline-size: 640px;
	}
}

/* ==========================================================================
   Seções da página de nicho (padrões da categoria makegrow-sections, SPEC 3)
   ========================================================================== */

/*
 * Título de seção, como o ".secao-cab" do protótipo: até 40rem e 48 px até o conteúdo. O
 * bloco seguinte perde a margem do layout de fluxo do núcleo; o seletor com duas classes
 * vence o layout também no editor, onde ele entra depois desta folha.
 */
.wp-block-heading.section-heading {
	max-inline-size: 40rem;
	margin-block-end: var(--wp--preset--spacing--50);
}

.wp-block-group .section-heading + * {
	margin-block-start: 0;
}

/*
 * Seções encostadas como no protótipo; cada seção tem o próprio padding. O "post-content"
 * (layout "constrained") dá o blockGap de 24 px entre os filhos; duas classes e a tag
 * (0,2,1) vencem o ":root :where(.is-layout-constrained) > *" do núcleo no site e no editor.
 */
.wp-block-post-content > section.wp-block-group {
	margin-block-start: 0;
}

/*
 * Texto corrido de página (política de privacidade e qualquer página de texto dos sites de
 * clientes): o conteúdo sem seções próprias ganha respiro em cima e embaixo, subtítulos
 * mais afastados do bloco anterior do que dos parágrafos que abrem, itens de lista separados
 * e palavras longas (URLs) quebrando dentro da coluna. A largura fica a do layout (720 px,
 * abaixo dos 64ch da medida em Figtree). ":has(> section)" deixa de fora as páginas
 * montadas com seções.
 */
.wp-block-post-content:not(:has(> section)) {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
	overflow-wrap: break-word;
}

.wp-block-post-content:not(:has(> section)) > h2 {
	margin-block-start: var(--wp--preset--spacing--60);
}

.wp-block-post-content:not(:has(> section)) > h3 {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wp-block-post-content:not(:has(> section)) > :is(h2, h3) + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.wp-block-post-content:not(:has(> section)) li + li {
	margin-block-start: var(--wp--preset--spacing--10);
}

/*
 * Situações: cenas em cartões. Mobile-first (tabela 7.1 da especificação): 1 coluna, texto
 * em linha e sem altura mínima; 2 colunas a partir de 768 px, com altura mínima de 220 px e
 * o texto no pé do cartão; 4 colunas a partir de 1200 px.
 */
.situations__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20);
}

.wp-block-group.situations__grid > * {
	margin-block: 0;
}

.situations__card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--custom--cor--superficie);
	border: var(--wp--custom--traco--borda) solid var(--wp--custom--cor--borda);
	border-radius: var(--wp--custom--raio--medio);
}

.situations__card p {
	margin: 0;
	font-size: var(--wp--preset--font-size--base-menor);
	font-weight: var(--wp--custom--tipografia--peso-subtitulo);
	line-height: 1.45;
}

/*
 * Fecho: frase com o ponto mel de 14 px à esquerda. O ponto é um pseudo-elemento, fora da
 * árvore de acessibilidade, como o span aria-hidden do protótipo.
 */
.wp-block-group.situations__closing {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	max-inline-size: 46rem;
	margin-block-start: var(--wp--preset--spacing--50);
}

.situations__closing::before {
	content: "";
	inline-size: 14px;
	block-size: 14px;
	border-radius: 50%;
	background: var(--wp--preset--color--mel);
}

.situations__closing p {
	margin: 0;
	font-size: var(--wp--preset--font-size--grande);
	font-weight: var(--wp--custom--tipografia--peso-subtitulo);
	line-height: 1.35;
	letter-spacing: -0.01em;
}

@media (min-width: 768px) {

	.situations__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.situations__card {
		flex-direction: column;
		gap: var(--wp--preset--spacing--30);
		min-block-size: 220px;
	}

	.situations__card p {
		margin-block-start: auto;
	}
}

@media (min-width: 1200px) {

	.situations__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Como funciona: passos numerados, três ou mais (especificação, componente 11), nos padrões
 * makegrow/steps (nicho, com botão), makegrow/steps-brand (Home, sem botão),
 * makegrow/steps-brand-four e makegrow/steps-brand-guarantee (com a faixa da garantia entre
 * os passos e o botão). Mobile-first: na vertical, número à esquerda e tracejado vertical
 * ligando os círculos; uma coluna por passo com o tracejado horizontal a partir de 1024 px
 * (tabela 7.1). O número vem de um contador CSS
 * com texto alternativo vazio ("/ \"\""), para o leitor de tela não ler "1, 2, 3" antes de
 * cada título, como o span aria-hidden do protótipo.
 */
.steps__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	counter-reset: makegrow-step;
}

.wp-block-group.steps__list > *,
.wp-block-group.steps__item > * {
	margin-block: 0;
}

.steps__item {
	position: relative;
	min-block-size: 52px;
	padding-inline-start: 76px;
	counter-increment: makegrow-step;
}

.steps__item::before {
	content: counter(makegrow-step) / "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	inline-size: 52px;
	block-size: 52px;
	border: 1.5px solid var(--wp--custom--cor--texto);
	border-radius: 50%;
	background: var(--wp--custom--cor--fundo);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--tipografia--peso-titulo);
}

/* O passo em que o cliente participa: círculo mel, número no papel "sobre-mel". */
.steps__item.is-yours::before {
	background: var(--wp--preset--color--mel);
	border-color: var(--wp--preset--color--mel);
	color: var(--wp--custom--cor--sobre-mel);
}

.steps__item:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-block: 60px calc(-1 * var(--wp--preset--spacing--30) + 6px);
	inset-inline-start: 26px;
	border-inline-start: 1.5px dashed var(--wp--custom--cor--borda-forte);
}

.wp-block-group.steps__item > .wp-block-heading {
	margin-block-end: 10px;
}

.steps__item p {
	max-inline-size: 30ch;
	color: var(--wp--custom--cor--texto-2);
}

.wp-block-group.steps__inner > .wp-block-makegrow-guarantee,
.wp-block-group.steps__inner > .steps__actions {
	margin-block-start: var(--wp--preset--spacing--40);
}

@media (min-width: 1024px) {

	/*
	 * Uma coluna por passo, sem número fixo: três na /saude e na Home, quatro em
	 * /da-ideia-a-primeira-versao (SPEC 6, seção 4). O último passo (":last-child") não
	 * desenha o tracejado.
	 */
	.steps__list {
		grid-template-columns: none;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		gap: var(--wp--preset--spacing--40);
	}

	.steps__item {
		min-block-size: 0;
		padding-block-start: 72px;
		padding-inline-start: 0;
	}

	.steps__item:not(:last-child)::after {
		inset-block: 26px auto;
		inset-inline: 68px calc(-1 * var(--wp--preset--spacing--40) + 16px);
		border-inline-start: 0;
		border-block-start: 1.5px dashed var(--wp--custom--cor--borda-forte);
	}
}

/*
 * O que está incluído (especificação, componente 12). Mobile-first: 1 coluna, título acima
 * da lista; a partir de 1200 px, 5fr/7fr com o título fixo ao rolar (tabela 7.1). Aqui o
 * espaço entre o título e a lista é o "gap" da grade, não a margem do ".section-heading".
 * A lista das customizações (padrão makegrow/customizations) usa as mesmas linhas com ícone.
 */
.included__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

.wp-block-group.included__grid > *,
.wp-block-group.included__list > *,
.wp-block-group.included__item > *,
.wp-block-group.customizations__list > *,
.wp-block-group.customizations__item > * {
	margin-block: 0;
}

.included__grid .wp-block-heading.section-heading {
	margin-block-end: 0;
}

.included__list,
.customizations__list {
	border-block-start: var(--wp--custom--traco--borda) solid var(--wp--custom--cor--borda);
}

.included__item,
.customizations__item {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	padding-block: 18px;
	border-block-end: var(--wp--custom--traco--borda) solid var(--wp--custom--cor--borda);
}

.included__item p,
.customizations__item p {
	font-size: var(--wp--preset--font-size--base-menor);
}

/* Caixa de 48 px do ícone: o invólucro do makegrow/icon recebe a classe e centra o SVG. */
.wp-block-makegrow-icon.included__icon {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	inline-size: 48px;
	block-size: 48px;
	background: var(--wp--custom--cor--superficie);
	border: var(--wp--custom--traco--borda) solid var(--wp--custom--cor--borda);
	border-radius: var(--wp--custom--raio--medio);
}

@media (min-width: 1200px) {

	.included__grid {
		grid-template-columns: 5fr 7fr;
		gap: var(--wp--preset--spacing--60);
	}

	/* Título fixo logo abaixo do cabeçalho fixo, com 32 px de folga, como no protótipo. */
	.included__grid .section-heading {
		position: sticky;
		inset-block-start: calc(var(--wp--custom--layout--topo-altura) + var(--wp--preset--spacing--40));
	}

	/* Logado, a barra de administração (fixa a partir de 601 px) empurra o cabeçalho. */
	.admin-bar .included__grid .section-heading {
		inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--layout--topo-altura) + var(--wp--preset--spacing--40));
	}
}

/*
 * Planos: a grade, os cartões e a garantia têm CSS no próprio bloco (src/blocks/); aqui
 * ficam os espaços entre as partes da seção, as notas e a nota final. Notas em 1 coluna;
 * 2 colunas a partir de 1024 px (tabela 7.1). As notas e a nota final dos tamanhos
 * (padrão makegrow/sizes) repetem as dos planos.
 */
.wp-block-group.plans__inner > .wp-block-makegrow-guarantee,
.wp-block-group.plans__inner > .plans__notes,
.wp-block-group.sizes__inner > .sizes__notes {
	margin-block-start: var(--wp--preset--spacing--40);
}

.wp-block-group.plans__inner > .plans__final-note,
.wp-block-group.sizes__inner > .sizes__final-note {
	margin-block-start: var(--wp--preset--spacing--30);
}

.plans__notes,
.sizes__notes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

.wp-block-group.plans__notes > *,
.wp-block-group.plans__note > *,
.wp-block-group.sizes__notes > *,
.wp-block-group.sizes__note > * {
	margin-block: 0;
}

.plans__note,
.sizes__note {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 14px;
	font-size: var(--wp--preset--font-size--interface);
}

.plans__note .wp-block-makegrow-icon,
.sizes__note .wp-block-makegrow-icon {
	margin-block-start: 1px;
	color: var(--wp--custom--cor--texto);
}

.plans__note p,
.sizes__note p {
	color: var(--wp--custom--cor--texto-2);
}

.plans__note strong,
.sizes__note strong {
	font-weight: var(--wp--custom--tipografia--peso-titulo);
}

/* Nota final: divisória acima e as duas frases em microcopy, 6 px entre elas. */
.plans__final-note,
.sizes__final-note {
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: var(--wp--custom--traco--borda) solid var(--wp--custom--cor--borda);
}

.wp-block-group.plans__final-note > .is-style-micro,
.wp-block-group.sizes__final-note > .is-style-micro {
	margin-block: 0;
}

.wp-block-group.plans__final-note > .is-style-micro + .is-style-micro,
.wp-block-group.sizes__final-note > .is-style-micro + .is-style-micro {
	margin-block-start: 6px;
}

@media (min-width: 1024px) {

	.plans__notes,
	.sizes__notes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * O site é seu (padrão makegrow/its-yours-niche): bloco escuro (variação "is-style-escuro") com o
 * título e o texto com três fatos. Celular: uma coluna e fatos empilhados; a partir de 768 px,
 * fatos em 3 colunas; a partir de 1200 px, título e texto lado a lado (1fr / 1.2fr), alinhados
 * pela base (protótipo ".seu-grade", ".seu .fatos", ".fato").
 */
.its-yours {
	border-block: var(--wp--custom--traco--borda) solid var(--wp--custom--cor--borda);
}

.its-yours .its-yours__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	align-items: end;
}

.its-yours .its-yours__grid > *,
.its-yours .its-yours__facts > * {
	margin-block: 0;
}

.its-yours__title {
	max-inline-size: 12ch;
}

.its-yours .its-yours__body {
	font-size: var(--wp--preset--font-size--medio);
	line-height: 1.6;
}

.its-yours .its-yours__facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--40);
}

/*
 * Os fatos ficam com 20 px e entrelinha 1.6, como o corpo: no protótipo o ".seu .texto p"
 * vence o "font-size: 1rem" do ".fato", e é esse o tamanho que aparece na tela.
 */
.its-yours .its-yours__fact {
	padding-block-start: 14px;
	border-block-start: 1.5px solid var(--wp--preset--color--mel);
	font-size: var(--wp--preset--font-size--medio);
	line-height: 1.6;
	color: var(--wp--custom--cor--texto-sobre-escuro);
}

.its-yours__fact strong {
	display: block;
	margin-block-end: 4px;
	font-size: var(--wp--preset--font-size--base-menor);
	font-weight: var(--wp--custom--tipografia--peso-titulo);
	color: var(--wp--custom--cor--sobre-escuro);
}

@media (min-width: 768px) {

	.its-yours .its-yours__facts {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1200px) {

	.its-yours .its-yours__grid {
		grid-template-columns: 1fr 1.2fr;
		gap: var(--wp--preset--spacing--60);
	}
}

/*
 * O site é seu, variante da marca (padrão makegrow/its-yours-brand; especificação 5,
 * componente 15, "Home: título + 1 frase"): uma coluna em todas as larguras, título no
 * tamanho "display" pelo próprio bloco e a frase 16 px abaixo, em "medio" (protótipo
 * ".seu-home"). Três classes vencem a margem do layout de fluxo do núcleo.
 */
.its-yours--brand .its-yours__inner > .its-yours__lead {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--medio);
}

/*
 * Regras do conselho (padrão makegrow/niche-band-illustration): seção sem fundo com a faixa
 * de nicho larga. O layout interno da faixa está em src/blocks/niche-band/style.css; aqui só
 * o título do tamanho h2 do protótipo dentro da faixa.
 */
.council .wp-block-makegrow-niche-band h2 {
	font-size: var(--wp--preset--font-size--x-grande);
}

/*
 * Para clínicas (padrão makegrow/clinics): texto com botão tinta e a lista do que muda num
 * cartão "superficie". Celular a 1199 px: uma coluna; a partir de 1200 px, duas colunas iguais
 * (protótipo ".clinica-grade", "ul.muda", ".muda li").
 */
.clinics .clinics__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

.clinics .clinics__grid > *,
.clinics .clinics__changes > *,
.clinics .clinics__change > * {
	margin-block: 0;
}

/*
 * O título fica a 24 px do corpo, como o ".clinica-grade .corpo" do protótipo (aqui não há
 * ".secao-cab"): três classes vencem os 48 px do ".section-heading".
 */
.clinics .clinics__intro > .section-heading {
	margin-block-end: var(--wp--preset--spacing--30);
}

.clinics .clinics__body {
	max-inline-size: 34em;
}

.clinics .clinics__intro > .wp-block-makegrow-whatsapp-link {
	margin-block-start: var(--wp--preset--spacing--40);
}

.clinics .clinics__changes {
	padding: var(--wp--preset--spacing--10) 28px;
	border: var(--wp--custom--traco--borda) solid var(--wp--custom--cor--borda);
	border-radius: var(--wp--custom--raio--medio);
	background: var(--wp--custom--cor--superficie);
}

.clinics .clinics__change {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 14px;
	padding-block: 20px;
	border-block-end: var(--wp--custom--traco--borda) solid var(--wp--custom--cor--borda);
}

.clinics .clinics__change:last-child {
	border-block-end: 0;
}

/*
 * Entrelinha do texto do corpo (não a da letra de 16 px), como no protótipo, em que a descrição
 * é um "span" dentro de um bloco com a letra do corpo: cada linha mede a entrelinha do corpo.
 */
.clinics__change-text {
	font-size: var(--wp--preset--font-size--interface);
	line-height: calc(var(--wp--custom--tipografia--altura-linha-corpo) * var(--wp--preset--font-size--base-menor));
	color: var(--wp--custom--cor--texto-2);
}

.clinics__change-text strong {
	display: block;
	font-size: var(--wp--preset--font-size--base-menor);
	font-weight: var(--wp--custom--tipografia--peso-titulo);
	color: var(--wp--custom--cor--texto);
}

@media (min-width: 768px) {

	.clinics__change-text {
		line-height: calc(var(--wp--custom--tipografia--altura-linha-corpo) * var(--wp--preset--font-size--base));
	}

	.clinics__change-text strong {
		font-size: var(--wp--preset--font-size--base);
	}
}

@media (min-width: 1200px) {

	.clinics .clinics__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--60);
	}
}

/*
 * Quem cuida (padrão makegrow/who-cares-niche): retrato opcional e texto. A coluna do retrato só
 * existe quando o bloco makegrow/portrait imprime algo (":has()"); sem foto, ou em navegador
 * sem ":has()", a grade fica com uma coluna e o texto ocupa a largura. Celular: uma coluna;
 * a partir de 768 px, 240 px / texto; a partir de 1200 px, 320 px / texto, gap 64
 * (protótipo ".quem" e tabela 7.1).
 */
.who-cares .who-cares__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
}

.who-cares .who-cares__grid > *,
.who-cares .who-cares__channels > *,
.who-cares .who-cares__channel > * {
	margin-block: 0;
}

.who-cares .who-cares__body {
	margin-block-start: var(--wp--preset--spacing--30);
	max-inline-size: 34em;
	font-size: var(--wp--preset--font-size--medio);
	line-height: 1.6;
}

.who-cares .who-cares__channels {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--40);
}

.who-cares .who-cares__channel {
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: var(--wp--preset--font-size--interface);
}

.who-cares__channel p {
	color: var(--wp--custom--cor--texto-2);
}

@media (min-width: 768px) {

	.who-cares .who-cares__grid:has(> .wp-block-makegrow-portrait) {
		grid-template-columns: 240px 1fr;
	}
}

@media (min-width: 1200px) {

	.who-cares .who-cares__grid {
		gap: var(--wp--preset--spacing--60);
	}

	.who-cares .who-cares__grid:has(> .wp-block-makegrow-portrait) {
		grid-template-columns: 320px 1fr;
	}
}

/*
 * Quem cuida, variante da marca (padrão makegrow/who-cares-brand; tabela 7.2): gap de 48 px
 * em todas as larguras, texto 16 px abaixo do título, botão "Sobre" 24 px abaixo do texto e,
 * com foto, coluna de 200 px a partir de 768 px (protótipo ".quem-home"). O seletor com as
 * duas classes da seção vence as regras de 768 e 1200 px da variante de nicho. O texto volta
 * à entrelinha do corpo (".quem-home .corpo" herda a do body), em vez do 1.6 do nicho.
 */
.who-cares.who-cares--brand .who-cares__grid {
	gap: var(--wp--preset--spacing--50);
}

.who-cares--brand .who-cares__text > .who-cares__body {
	margin-block-start: var(--wp--preset--spacing--20);
	line-height: var(--wp--custom--tipografia--altura-linha-corpo);
}

.who-cares--brand .who-cares__text > .who-cares__actions {
	margin-block-start: var(--wp--preset--spacing--30);
}

@media (min-width: 768px) {

	.who-cares.who-cares--brand .who-cares__grid:has(> .wp-block-makegrow-portrait) {
		grid-template-columns: 200px 1fr;
	}
}

/*
 * Quem cuida, abertura de /sobre (padrão makegrow/who-cares-about): a foto é a imagem do topo,
 * então a partir de 1200 px a coluna volta aos 320 px da variante de nicho. O seletor tem a
 * mesma força do da variante da marca e vem depois dele.
 */
@media (min-width: 1200px) {

	.who-cares.who-cares--about .who-cares__grid:has(> .wp-block-makegrow-portrait) {
		grid-template-columns: 320px 1fr;
	}
}

/*
 * Dúvidas (padrão makegrow/faq): cabeçalho e lista de core/details. Celular a 1199 px: uma
 * coluna, gap 32; a partir de 1200 px, 4fr / 8fr, gap 64 (protótipo ".duvidas-grade"). A lista
 * tem a linha superior "borda-forte"; os itens encostam uns nos outros (sem o blockGap).
 */
.faq .faq__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

.faq .faq__grid > *,
.faq .faq__list > * {
	margin-block: 0;
}

/*
 * O cabeçalho é o ".secao-cab" do protótipo: até 40rem e 48 px abaixo dele, que somam ao gap
 * quando a grade tem uma coluna. Três classes vencem a margem zerada acima.
 */
.faq .faq__grid > .faq__header {
	max-inline-size: 40rem;
	margin-block-end: var(--wp--preset--spacing--50);
}

/*
 * O apoio fica a 16 px do título, como o ".secao-cab .apoio" do protótipo: três classes
 * vencem os 48 px do ".section-heading", que aqui ficam no cabeçalho inteiro.
 */
.faq .faq__header > .section-heading {
	margin-block-end: 0;
}

.faq .faq__lead {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--medio);
	color: var(--wp--custom--cor--texto-2);
}

.faq .faq__list {
	border-block-start: var(--wp--custom--traco--borda) solid var(--wp--custom--cor--borda-forte);
}

@media (min-width: 1200px) {

	.faq .faq__grid {
		grid-template-columns: 4fr 8fr;
		gap: var(--wp--preset--spacing--60);
	}
}

/*
 * Convite final (padrões makegrow/final-call-niche e makegrow/final-call-brand, com as mesmas
 * classes). Celular a 1199 px: uma coluna, WhatsApp primeiro e o formulário
 * (makegrow/contact-form, SPEC 4) abaixo; botão grande em largura total só abaixo de 768 px.
 * A partir de 1200 px: duas colunas iguais (gap 64) quando a grade tem o segundo filho; sem
 * formulário (sem e-mail de destino ou sem o plugin), a coluna do WhatsApp fica com a largura
 * da coluna do protótipo, alinhada à esquerda, sem caixa vazia. A coluna do WhatsApp fica fixa
 * ao rolar a partir de 1200 px (protótipo ".convite-bloco", ".convite-whats").
 */
.final-call .final-call__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

.final-call .final-call__grid > * {
	margin-block: 0;
}

.final-call .final-call__lead {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--medio);
	color: var(--wp--custom--cor--texto-2);
}

.final-call .final-call__whatsapp > .wp-block-makegrow-whatsapp-link {
	display: flex;
	inline-size: 100%;
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Três classes vencem a margem zero do balão (":root .wp-block-makegrow-message-bubble"). */
.final-call .final-call__whatsapp > .wp-block-makegrow-message-bubble {
	margin-block-start: var(--wp--preset--spacing--40);
}

@media (min-width: 768px) {

	.final-call .final-call__whatsapp > .wp-block-makegrow-whatsapp-link {
		display: inline-flex;
		inline-size: auto;
	}
}

@media (min-width: 1200px) {

	.final-call .final-call__grid:has(> :nth-child(2)) {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--60);
	}

	.final-call .final-call__grid > .final-call__whatsapp {
		position: sticky;
		inset-block-start: calc(var(--wp--custom--layout--topo-altura) + var(--wp--preset--spacing--40));
		max-inline-size: calc((var(--wp--style--global--wide-size) - var(--wp--preset--spacing--60)) / 2);
	}

	/* Logado, a barra de administração (fixa a partir de 601 px) empurra o cabeçalho. */
	.admin-bar .final-call .final-call__grid > .final-call__whatsapp {
		inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--layout--topo-altura) + var(--wp--preset--spacing--40));
	}
}

/* ==========================================================================
   Seções da Home (padrões da categoria makegrow-sections, SPEC 5)
   ========================================================================== */

/*
 * Conceito (padrão makegrow/concept, variante A; tabela 7.2): faixa com o texto e a
 * ilustração. Uma coluna, ilustração abaixo do texto, até 1199 px; 5fr / 7fr a partir de
 * 1200 px (protótipo ".conceito", ".conceito .texto p").
 */
.concept .concept__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: center;
}

.concept .concept__grid > * {
	margin-block: 0;
}

.concept .concept__body {
	margin-block-start: var(--wp--preset--spacing--30);
	max-inline-size: 30em;
	font-size: var(--wp--preset--font-size--medio);
	line-height: 1.6;
	color: var(--wp--custom--cor--texto-2);
}

/* Segundo parágrafo (padrão makegrow/concept-notebook): continua o primeiro, mais perto. */
.concept .concept__body + .concept__body {
	margin-block-start: var(--wp--preset--spacing--20);
}

@media (min-width: 1200px) {

	.concept .concept__grid {
		grid-template-columns: 5fr 7fr;
		gap: var(--wp--preset--spacing--60);
	}
}

/*
 * Serviços (padrão makegrow/services): o título oculto não ocupa espaço, então a grade
 * perde a margem do layout de fluxo; uma coluna até 1023 px e duas a partir de 1024 px
 * (protótipo ".servicos"). O cartão tem CSS próprio em src/blocks/service-card/.
 */
.services .services__inner > .services__grid {
	margin-block-start: 0;
}

.services .services__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
}

.services .services__grid > * {
	margin-block: 0;
}

@media (min-width: 1024px) {

	.services .services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * IA do jeito certo (padrão makegrow/ai-note): faixa com título até 16ch e parágrafo em
 * "texto-2". Uma coluna até 1199 px; duas colunas iguais a partir de 1200 px (protótipo ".ia").
 */
.ai-note .ai-note__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

.ai-note .ai-note__grid > * {
	margin-block: 0;
}

.ai-note .ai-note__title {
	max-inline-size: 16ch;
}

.ai-note .ai-note__body {
	font-size: var(--wp--preset--font-size--medio);
	line-height: 1.6;
	color: var(--wp--custom--cor--texto-2);
}

/*
 * Variante com vários parágrafos (padrão makegrow/ai-note-text): os parágrafos ficam no grupo
 * ai-note__text, na segunda coluna, com 24 px entre eles.
 */
.ai-note .ai-note__text > * {
	margin-block: 0;
}

.ai-note .ai-note__text > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

@media (min-width: 1200px) {

	.ai-note .ai-note__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--60);
	}
}

/*
 * Um nicho de cada vez (padrão makegrow/niche-call): cartão "superficie" raio 20 com o título
 * e o botão lado a lado quando cabem e empilhados quando não (flex com quebra); padding de
 * 24 px no celular e 48 px a partir de 768 px (protótipo ".nicho-chamada").
 */
.niche-call .niche-call__card {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--custom--cor--superficie);
	border: var(--wp--custom--traco--borda) solid var(--wp--custom--cor--borda);
	border-radius: var(--wp--custom--raio--grande);
}

.niche-call .niche-call__card > * {
	margin-block: 0;
}

@media (min-width: 768px) {

	.niche-call .niche-call__card {
		padding: var(--wp--preset--spacing--50);
	}
}

/* ==========================================================================
   Páginas internas da marca-mãe (padrões da SPEC 6)
   ========================================================================== */

/*
 * Tamanhos (padrão makegrow/sizes): cartões com a superfície e a borda dos cartões de serviço;
 * uma coluna no celular e três a partir de 1024 px. No cartão, o título, para quem é (em
 * "texto"), o texto e os ajustes do mês (em "texto-2") e, no pé, o preço de referência com
 * divisória acima: o valor em "texto" e peso de título, nunca em mel. As notas e a nota final
 * repetem as dos planos (acima).
 */
.sizes__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
}

.wp-block-group.sizes__grid > *,
.wp-block-group.sizes__card > * {
	margin-block: 0;
}

.sizes__card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--custom--cor--superficie);
	border: var(--wp--custom--traco--borda) solid var(--wp--custom--cor--borda);
	border-radius: var(--wp--custom--raio--grande);
}

.wp-block-group.sizes__card > * + * {
	margin-block-start: 10px;
}

.sizes__card p {
	color: var(--wp--custom--cor--texto-2);
}

.sizes__card p.sizes__audience {
	color: var(--wp--custom--cor--texto);
	font-weight: var(--wp--custom--tipografia--peso-subtitulo);
}

/* A margem de baixo garante a folga mínima até o preço quando o cartão não estica. */
.wp-block-group.sizes__card > .sizes__adjust {
	margin-block-end: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--interface);
}

/* O "auto" empurra o preço para o pé do cartão; os três ficam alinhados na mesma linha. */
.wp-block-group.sizes__card > .sizes__price {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: var(--wp--custom--traco--borda) solid var(--wp--custom--cor--borda);
	font-size: var(--wp--preset--font-size--interface);
}

.sizes__price strong {
	font-size: var(--wp--preset--font-size--preco);
	font-weight: var(--wp--custom--tipografia--peso-titulo);
	letter-spacing: -0.02em;
	color: var(--wp--custom--cor--texto);
}

/*
 * Chamada de nicho (abaixo das notas): o cartão de makegrow/niche-call, com o fundo na sálvia
 * e o texto no papel "nicho-texto" (a sálvia é redefinida no tema escuro). Texto e botão lado
 * a lado quando cabem; padding de 24 px no celular e 48 px a partir de 768 px.
 */
.wp-block-group.sizes__inner > .sizes__niche {
	margin-block-start: var(--wp--preset--spacing--50);
}

.sizes .sizes__niche {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--custom--nicho--salvia);
	color: var(--wp--custom--cor--nicho-texto);
	border-radius: var(--wp--custom--raio--grande);
}

.sizes .sizes__niche > * {
	margin-block: 0;
}

.sizes .sizes__niche > p {
	max-inline-size: 34em;
	font-size: var(--wp--preset--font-size--medio);
	font-weight: var(--wp--custom--tipografia--peso-subtitulo);
}

/*
 * Customizações (padrão makegrow/customizations): apoio até 40rem, a lista com ícone de
 * "O que está incluído" (acima), em duas colunas a partir de 1024 px, a nota em "texto-2" e o
 * link para a página "Da ideia à primeira versão".
 */
.sizes .sizes__lead,
.customizations .customizations__lead {
	max-inline-size: 40rem;
	margin-block: 0 var(--wp--preset--spacing--40);
	color: var(--wp--custom--cor--texto-2);
}

.wp-block-group.customizations__inner > .customizations__note {
	max-inline-size: 40rem;
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--interface);
	color: var(--wp--custom--cor--texto-2);
}

.wp-block-group.customizations__inner > .customizations__link {
	margin-block-start: var(--wp--preset--spacing--20);
}

@media (min-width: 768px) {

	.sizes .sizes__niche {
		padding: var(--wp--preset--spacing--50);
	}
}

@media (min-width: 1024px) {

	.sizes__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.customizations__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--50);
	}
}

/*
 * Valores (padrão makegrow/values): título e texto por item, uma coluna no celular e duas a
 * partir de 1024 px.
 */
.values__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
}

.wp-block-group.values__list > *,
.wp-block-group.values__item > * {
	margin-block: 0;
}

.wp-block-group.values__item > .wp-block-heading {
	margin-block-end: 10px;
}

.values__item p {
	max-inline-size: 36em;
	color: var(--wp--custom--cor--texto-2);
}

@media (min-width: 1024px) {

	.values__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Seção de texto (padrão makegrow/text-section): linha de leitura de até 40rem. */
.text-section .text-section__body {
	max-inline-size: 40rem;
}

/*
 * Página 404 (padrão makegrow/not-found): título, frase e os dois botões lado a lado, que
 * quebram em linhas no celular estreito.
 */
.not-found {
	padding-block: var(--wp--preset--spacing--70);
}

.not-found .not-found__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.not-found .not-found__actions > * {
	margin-block: 0;
}