/**
 * Jane Flores — componentes de conteúdo.
 *
 * Existem para resolver um problema concreto: as páginas informativas eram
 * paredes de parágrafo ocupando metade da largura, com a outra metade vazia.
 * Texto corrido serve para explicar; não serve para ser consultado com pressa,
 * que é como alguém lê "sobre a entrega" no meio de um velório (§2.6).
 *
 * Três peças, e cada uma tem um uso definido:
 *
 *   jf-destaque  a frase de abertura de uma seção, em corpo maior
 *   jf-nota      uma ressalva com ícone e regra lateral — as honestas do §29.11
 *                ("confirmamos antes", "a flor pode ser substituída")
 *   jf-fatos     grade de pares rótulo/valor, para o que é consultado e não lido
 */

/* ---------- Abertura ---------- */

.jf-destaque {
	max-width: var(--jf-measure);
	margin: 0 0 var(--jf-space-lg);
	color: var(--jf-color-text);
	font-size: var(--jf-size-lg);
	line-height: var(--jf-leading-snug);
}

/* ---------- Nota com ícone ---------- */

.jf-nota {
	display: flex;
	gap: var(--jf-space-sm);
	max-width: var(--jf-measure);
	margin: 0 0 var(--jf-space-md);
	padding: var(--jf-pad-md);
	background-color: var(--jf-color-surface);
	border: 1px solid var(--jf-color-border);
	border-left: 3px solid var(--jf-color-primary);
	border-radius: var(--jf-radius-lg);
}

/* O ícone vem do CSS, não do markup.
 *
 * É o que torna a nota escrevível no editor de blocos: a Jane insere um grupo
 * com a classe e escreve o texto, sem precisar colar SVG. `mask-image` em vez
 * de `background-image` para o desenho herdar a cor do tema — trocar a paleta
 * não deixa um ícone com a cor antiga. */
.jf-nota::before {
	content: "";
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	background-color: var(--jf-color-primary-soft);
	border-radius: var(--jf-radius-pill);
	background-image: none;
}

.jf-nota::after {
	content: "";
	position: absolute;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.5rem 0 0 0.5rem;
	background-color: var(--jf-color-primary);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.jf-nota {
	position: relative;
}

/* Um desenho por variante. Sem variante, a nota sai com o círculo liso — que
   ainda funciona como marcador visual. */
.jf-nota--relogio::after {
	-webkit-mask-image: var(--jf-icone-relogio);
	mask-image: var(--jf-icone-relogio);
}

.jf-nota--local::after {
	-webkit-mask-image: var(--jf-icone-local);
	mask-image: var(--jf-icone-local);
}

.jf-nota--flor::after {
	-webkit-mask-image: var(--jf-icone-flor);
	mask-image: var(--jf-icone-flor);
}

.jf-nota--ressalva::after {
	background-color: var(--jf-color-accent);
}

.jf-nota__texto {
	min-width: 0;
}

.jf-nota__titulo {
	display: block;
	margin: 0 0 var(--jf-space-3xs);
	font-family: var(--jf-font-heading);
	font-size: var(--jf-size-base);
	font-weight: var(--jf-weight-semibold);
	color: var(--jf-color-text);
}

.jf-nota p {
	margin: 0;
	max-width: none;
	color: var(--jf-color-text-muted);
	line-height: var(--jf-leading-normal);
}

/* Variante de ressalva: o mesmo bloco, em tom de atenção discreta. */
.jf-nota--ressalva {
	border-left-color: var(--jf-color-accent);
}

.jf-nota--ressalva .jf-nota__icone {
	background-color: var(--jf-color-accent-soft);
	color: var(--jf-color-accent);
}

/* ---------- Grade de fatos ---------- */

.jf-fatos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--jf-space-md);
	margin: 0 0 var(--jf-space-lg);
	padding: 0;
	list-style: none;
}

.jf-fatos > li,
.jf-fatos > div {
	max-width: none;
	margin: 0;
	padding: var(--jf-pad-md);
	background-color: var(--jf-color-surface);
	border: 1px solid var(--jf-color-border);
	border-radius: var(--jf-radius-lg);
}

.jf-fatos dt,
.jf-fatos strong:first-child {
	display: block;
	margin-bottom: var(--jf-space-3xs);
	font-family: var(--jf-font-body);
	font-size: var(--jf-size-xs);
	font-weight: var(--jf-weight-semibold);
	letter-spacing: var(--jf-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--jf-color-text-muted);
}

.jf-fatos dd {
	margin: 0;
	color: var(--jf-color-text);
	line-height: var(--jf-leading-snug);
}

/* ---------- Seção de conteúdo com coluna de apoio ----------
 * Resolve a metade vazia da tela: o texto mantém a medida de leitura e a
 * coluna ao lado recebe as notas, em vez de o parágrafo se esticar ou o
 * espaço sobrar.
 */

.jf-conteudo-duplo {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--jf-space-lg);
	align-items: start;
}

@media (min-width: 62em) {
	.jf-conteudo-duplo {
		grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
		gap: var(--jf-space-2xl);
	}
}

/* ---------- Páginas legais ----------
 * Privacidade, cookies, termos, entrega e trocas. Texto de leitura: a mesma
 * medida de linha do resto do conteúdo, tabelas que viram rolagem horizontal
 * no celular em vez de estourar a tela, e a identificação da empresa num
 * quadro, porque é a parte que as pessoas procuram primeiro.
 */

.jf-legal-data {
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-sm);
}

.jf-empresa {
	display: grid;
	gap: var(--jf-space-2xs);
	max-width: var(--jf-measure);
	margin: 0 0 var(--jf-space-md);
	padding: var(--jf-pad-md);
	background-color: var(--jf-color-surface);
	border: 1px solid var(--jf-color-border);
	border-radius: var(--jf-radius-lg);
}

.jf-empresa div {
	display: grid;
	grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
	gap: var(--jf-space-sm);
}

.jf-empresa dt {
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-sm);
	font-weight: var(--jf-weight-regular);
}

.jf-empresa dd {
	margin: 0;
	font-size: var(--jf-size-sm);
	overflow-wrap: anywhere;
}

@media (max-width: 30em) {
	.jf-empresa div {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}

.jf-tabela-legal {
	max-width: none;
	margin: 0 0 var(--jf-space-md);
	overflow-x: auto;
}

.jf-tabela-legal table {
	width: 100%;
	min-width: 32rem;
	margin: 0;
	border-collapse: collapse;
	background-color: var(--jf-color-surface);
	font-size: var(--jf-size-sm);
}

.jf-tabela-legal th,
.jf-tabela-legal td {
	padding: var(--jf-space-xs) var(--jf-space-sm);
	text-align: left;
	vertical-align: top;
	border: 1px solid var(--jf-color-border);
}

.jf-tabela-legal th {
	background-color: var(--jf-color-surface-alt);
	color: var(--jf-color-text);
	font-weight: var(--jf-weight-semibold);
}

.jf-tabela-legal code {
	font-size: var(--jf-size-xs);
	overflow-wrap: anywhere;
}

/* "Preferências de cookies" dentro da página: aqui é ação principal, então
   parece botão, e não link como no rodapé. */
.jf-cookies-preferencias.jf-cookies-preferencias--pagina {
	display: inline-flex;
	align-items: center;
	min-height: var(--jf-tap-min);
	margin: 0 0 var(--jf-space-md);
	padding: var(--jf-space-2xs) var(--jf-space-md);
	color: var(--jf-color-primary);
	font-weight: var(--jf-weight-semibold);
	text-decoration: none;
	border: 1px solid var(--jf-color-primary);
	border-radius: var(--jf-radius-md);
}

.jf-cookies-preferencias.jf-cookies-preferencias--pagina:hover {
	background-color: var(--jf-color-primary);
	color: var(--jf-color-text-on-dark);
	text-decoration: none;
}

/* Canais de atendimento ([jf_contato]), na página de contato. */
.jf-contato {
	display: grid;
	gap: var(--jf-space-2xs);
	max-width: var(--jf-measure);
	margin: 0 0 var(--jf-space-md);
	padding: var(--jf-pad-md);
	list-style: none;
	background-color: var(--jf-color-surface);
	border: 1px solid var(--jf-color-border);
	border-radius: var(--jf-radius-lg);
}

.jf-contato li {
	margin: 0;
}

.jf-contato a {
	font-weight: var(--jf-weight-semibold);
}