/*
Theme Name: Sway
Theme URI: https://sway.sproutstack-garden.com
Author: Sproutstack Garden
Description: Tema do portal Sway, da comunidade Sproutstack Garden: telas neutras nas cores da marca e telas de canteiro no tema do personagem responsável (Spark em Tecnologia), fonte Sora, vereditos do Seiva e ligação com o comparador de preços.
Version: 0.2.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sproutstack
*/

/* ================================================================ tokens
   Telas neutras usam as cores da marca. Em um canteiro, a página recebe data-persona="<chave>" (functions.php) e
   os tokens saem dos quatro tons do personagem (--p-manto, --p-sombra, --p-brilho, --p-olhos, de
   assets/personagens.css), com a mesma derivação do quadro de temas dos mockups (seção 4.3 do planejamento).
   --sg-on-primary (texto sobre a cor primária) é calculado por contraste em functions.php. */
:root {
	--sg-ground: #0b0f12;
	--sg-surface: #14111c;
	--sg-surface2: #1b1626;
	--sg-line: #2a2140;
	--sg-line-strong: #4a3a78;
	--sg-on-dark: #f5f7fa;
	--sg-on-dark-soft: #b9b4c7;
	--sg-primary: #7c3aed;
	--sg-primary-bright: #a78bfa;
	--sg-sombra: #4c1d95;
	--sg-accent: #a3e635;
	--sg-on-primary: #ffffff;
	--sg-paper: #f5f7fa;
	--sg-paper-line: #ddd6f0;
	--sg-wash: #ece6fb;
	--sg-ink: #14111c;
	--sg-ink-soft: #4b4660;
	--sg-link: #6d28d9;
}
html[data-persona]:not([data-persona="seiva"]) {
	--sg-ground: color-mix(in srgb, var(--p-sombra) 40%, #000);
	--sg-surface: color-mix(in srgb, var(--p-sombra) 55%, #000);
	--sg-surface2: color-mix(in srgb, var(--p-sombra) 70%, #000);
	--sg-line: color-mix(in srgb, var(--p-sombra) 85%, #000);
	--sg-line-strong: color-mix(in srgb, var(--p-manto) 75%, #000);
	--sg-on-dark: color-mix(in srgb, var(--p-brilho) 10%, #fff);
	--sg-on-dark-soft: color-mix(in srgb, var(--p-brilho) 75%, #fff);
	--sg-primary: var(--p-manto);
	--sg-primary-bright: var(--p-brilho);
	--sg-sombra: var(--p-sombra);
	--sg-accent: var(--p-olhos);
	--sg-paper: color-mix(in srgb, var(--p-brilho) 12%, #fff);
	--sg-paper-line: color-mix(in srgb, var(--p-brilho) 55%, #fff);
	--sg-wash: color-mix(in srgb, var(--p-brilho) 28%, #fff);
	--sg-ink: color-mix(in srgb, var(--p-sombra) 35%, #000);
	--sg-ink-soft: color-mix(in srgb, var(--p-sombra) 70%, #000);
	--sg-link: color-mix(in srgb, var(--p-sombra) 80%, #000);
}

/* ================================================================ base */
body {
	background: var(--sg-paper);
	color: var(--sg-ink);
	-webkit-font-smoothing: antialiased;
}
.wp-site-blocks > * + *,
main.wp-block-group > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
.sg-wrap {
	width: 100%;
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: 24px;
	box-sizing: border-box;
}
.sg-personagem,
.sg-personagem img {
	image-rendering: pixelated;
}
.sg-kicker {
	margin: 0 0 8px;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--sg-sombra);
}
.sg-kicker-claro {
	color: var(--sg-primary-bright);
	margin-bottom: 14px;
}
.sg-cartao {
	background: #fff;
	border: 1px solid var(--sg-paper-line);
	border-radius: 14px;
}

/* Botões: .sg-btn-destaque (olhos do personagem), .sg-btn-primario (manto), .sg-btn-contorno (sobre fundo escuro). */
.sg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 12px;
	border: 0;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}
.sg-btn[hidden] {
	display: none;
}
.sg-btn-destaque {
	background: var(--sg-accent);
	color: #0b0f12;
}
.sg-btn-destaque:hover {
	filter: brightness(1.08);
	color: #0b0f12;
}
.sg-btn-primario {
	background: var(--sg-primary);
	color: var(--sg-on-primary);
}
.sg-btn-primario:hover {
	background: var(--sg-sombra);
	color: #fff;
}
.sg-btn-contorno {
	background: transparent;
	color: var(--sg-on-dark);
	border: 1.5px solid var(--sg-line-strong);
}
.sg-btn-contorno:hover {
	background: var(--sg-surface2);
	color: var(--sg-on-dark);
}
.sg-cartao .sg-btn-contorno,
.sg-compartilhar .sg-btn-contorno,
.sg-ver-historico .sg-btn-contorno {
	color: var(--sg-sombra);
	border-color: var(--sg-primary);
	background: #fff;
}
.sg-cartao .sg-btn-contorno:hover,
.sg-ver-historico .sg-btn-contorno:hover {
	background: var(--sg-wash);
	color: var(--sg-sombra);
}
.sg-btn-icone {
	padding: 0 14px;
}
:where(.sg-btn, .sg-nav a, .sg-barra-sub a, .sg-logo, .sg-rodape a, .sg-tile, .sg-atalhos a):focus-visible {
	outline: 3px solid var(--sg-accent);
	outline-offset: 2px;
}

/* ================================================================ aviso "Veio de um vídeo do ...?" */
.sg-figura {
	background: var(--sg-primary);
	color: var(--sg-on-primary);
}
.sg-figura-corpo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding-block: 10px;
	font-size: 14px;
}
.sg-figura-texto {
	flex: 1 1 300px;
}
.sg-figura-link {
	color: inherit;
	font-weight: 700;
}
.sg-figura-fechar {
	min-width: 44px;
	min-height: 44px;
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 22px;
	cursor: pointer;
}

/* ================================================================ cabeçalho e barra da categoria */
.sg-cabecalho {
	background: var(--sg-ground);
	border-bottom: 1px solid var(--sg-line);
}
.sg-cabecalho-corpo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	padding-block: 14px;
}
.sg-logo {
	display: inline-flex;
}
.sg-logo img {
	display: block;
	height: 40px;
	width: auto;
}
.sg-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	flex: 1 1 auto;
}
.sg-nav a {
	color: var(--sg-on-dark);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	padding: 12px 14px;
	border-radius: 10px;
}
.sg-nav a:hover,
.sg-nav a[aria-current="page"] {
	background: var(--sg-surface2);
	color: var(--sg-on-dark);
}
.sg-cabecalho-acoes {
	display: flex;
	gap: 10px;
	align-items: center;
}

.sg-barra-categoria {
	background: var(--sg-surface);
	border-bottom: 1px solid var(--sg-line);
}
.sg-barra-corpo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 20px;
}
.sg-barra-nome {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-block: 8px;
	color: var(--sg-accent);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}
.sg-barra-sub {
	display: flex;
	flex-wrap: wrap;
}
.sg-barra-sub a {
	color: var(--sg-on-dark-soft);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	padding: 14px 4px;
	margin-right: 18px;
	border-bottom: 3px solid transparent;
}
.sg-barra-sub a:hover {
	color: var(--sg-on-dark);
	border-bottom-color: var(--sg-primary-bright);
}
.sg-barra-sub a.sg-ativo {
	color: var(--sg-on-dark);
	border-bottom-color: var(--sg-accent);
}

/* ================================================================ herói (início, categoria, artigo) */
.sg-heroi {
	position: relative;
	overflow: hidden;
	background: var(--sg-ground);
	border-bottom: 1px solid var(--sg-line);
	color: var(--sg-on-dark);
}
.sg-heroi .sg-padrao {
	position: absolute;
	inset: 0;
}
.sg-heroi .sg-padrao-pontos {
	opacity: 0.5;
}
.sg-brilho {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 480px 360px at 82% 50%, color-mix(in srgb, var(--sg-primary) 38%, transparent), transparent 70%);
	pointer-events: none;
}
html:not([data-persona]) .sg-brilho,
html[data-persona="seiva"] .sg-brilho {
	display: none;
}
.sg-heroi-corpo {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
	padding-block: 56px;
}
.sg-heroi-texto {
	flex: 1 1 520px;
	min-width: 0;
}
.sg-heroi-titulo {
	margin: 0 0 16px;
	font-size: clamp(2.4rem, 6vw, 3.5rem);
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--sg-on-dark);
}
.sg-heroi-titulo span {
	color: var(--sg-accent);
}
.sg-heroi-titulo-categoria {
	font-size: clamp(2.6rem, 7vw, 4rem);
	margin-bottom: 6px;
}
.sg-heroi-sub {
	font-size: 22px;
	font-weight: 600;
	color: var(--sg-on-dark);
	margin-bottom: 16px;
}
.sg-heroi-lead {
	margin: 0 0 28px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--sg-on-dark-soft);
	max-width: 560px;
}
.sg-heroi-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.sg-busca {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 600px;
}
.sg-busca-campo {
	flex: 1 1 220px;
	min-width: 0;
	min-height: 52px;
	border-radius: 12px;
	border: 1.5px solid var(--sg-line-strong);
	background: var(--sg-surface);
	color: var(--sg-on-dark);
	padding: 0 16px;
	font: inherit;
	font-size: 16px;
}
.sg-busca-campo::placeholder {
	color: var(--sg-on-dark-soft);
}
.sg-busca .sg-btn {
	min-height: 52px;
}
.sg-heroi-fala {
	flex: 0 1 380px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 10px;
	margin-inline: auto;
}
.sg-heroi-fala .sg-personagem {
	display: block;
	max-width: 100%;
	height: auto;
}
.sg-balao {
	background: var(--sg-surface);
	border: 1.5px solid var(--sg-line-strong);
	border-radius: 16px 16px 16px 4px;
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sg-on-dark);
	max-width: 180px;
	margin-bottom: 150px;
}
@media (prefers-reduced-motion: no-preference) {
	.sg-heroi-fala .sg-personagem {
		animation: sg-balanco 3.5s ease-in-out infinite;
	}
}
@keyframes sg-balanco {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

/* Cabeçalho de página simples (mais baixo que o herói do canteiro). */
.sg-heroi-pagina .sg-heroi-corpo {
	gap: 24px;
	padding-block: 40px;
}
.sg-heroi-pagina .sg-heroi-texto {
	flex-basis: 560px;
}
.sg-heroi-titulo-artigo {
	font-size: clamp(1.9rem, 4.5vw, 2.75rem);
	line-height: 1.12;
	max-width: 760px;
}
.sg-trilha {
	font-size: 13px;
	color: var(--sg-on-dark-soft);
	margin-bottom: 16px;
}
/* Cabeçalho do artigo (canvas de 1/11): tudo em uma coluna central, com os atalhos "Neste artigo" no fim. */
.sg-heroi-artigo .sg-heroi-corpo {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 16px;
	padding-block: 48px 44px;
	text-align: center;
}
.sg-heroi-artigo .sg-heroi-titulo {
	margin: 0;
	max-width: 900px;
	text-wrap: balance;
}
.sg-heroi-artigo .sg-trilha {
	margin: 0;
	letter-spacing: 0.04em;
}
.sg-heroi-artigo .sg-meta {
	justify-content: center;
}
.sg-atalhos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	max-width: 900px;
	margin-top: 8px;
}
.sg-atalhos a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--sg-surface);
	border: 1px solid var(--sg-line);
	color: var(--sg-on-dark);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.sg-atalhos a:hover {
	border-color: var(--sg-primary-bright);
}
.sg-trilha a,
.sg-meta a {
	color: var(--sg-primary-bright);
}
.sg-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-size: 14px;
	color: var(--sg-on-dark-soft);
}
.sg-heroi-figura-caixa {
	flex: 0 0 auto;
}
.sg-heroi-figura {
	display: block;
}

/* Fundo limpo sob o texto (mockups de 2/11, opção C): a textura do herói continua inteira, mas cada
   bloco de texto (e o personagem) ganha uma clareira borrada na cor do fundo, entre a textura e as letras.
   .sg-clareira vale para os filhos do contêiner; .sg-clareira-propria, para o próprio elemento. */
.sg-clareira > *,
.sg-clareira-propria,
.sg-heroi-figura-caixa {
	position: relative;
	z-index: 0;
}
.sg-clareira > *::before,
.sg-clareira-propria::before {
	content: "";
	position: absolute;
	inset: -10px -30px;
	background: var(--sg-ground);
	border-radius: 34px;
	filter: blur(12px);
	opacity: 0.97;
	z-index: -1;
	pointer-events: none;
}

/* ================================================================ seções, cartões e mapa */
.sg-secao {
	padding-block: 48px 24px;
}
.sg-secao-cabeca {
	margin-bottom: 24px;
}
.sg-secao h2,
.sg-secao-titulo {
	margin: 0 0 24px;
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	letter-spacing: -0.01em;
}
.sg-secao-cabeca h2 {
	margin-bottom: 8px;
}
.sg-secao-cabeca p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--sg-ink-soft);
	max-width: 640px;
}

.sg-cartoes .wp-block-post-template {
	gap: 20px;
}
.sg-cartoes .wp-block-post {
	background: #fff;
	border: 1px solid var(--sg-paper-line);
	border-top: 8px solid var(--sg-primary);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, border-color 0.2s ease;
}
.sg-cartoes .wp-block-post:hover {
	transform: translateY(-2px);
	border-color: var(--sg-primary);
}
.sg-cartoes .wp-block-post-featured-image {
	margin: 0;
}
.sg-cartoes .wp-block-post-featured-image img {
	aspect-ratio: 1200 / 630;
	object-fit: cover;
}
.sg-cartoes .sg-cartao-corpo {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sg-cartoes .sg-cartao-corpo > * {
	margin: 0;
}
.sg-cartoes .wp-block-post-title {
	font-size: 1.125rem;
	line-height: 1.35;
}
.sg-cartoes .wp-block-post-title a {
	color: var(--sg-ink);
	text-decoration: none;
}
.sg-cartoes .wp-block-post-title a:hover {
	color: var(--sg-sombra);
}
.sg-cartoes .wp-block-post-excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: var(--sg-ink-soft);
}
.sg-cartoes .wp-block-post-date {
	margin-top: auto;
	font-size: 13px;
	color: var(--sg-ink-soft);
}
.sg-chip-formato a {
	display: inline-block;
	background: var(--sg-wash);
	color: var(--sg-sombra);
	padding: 3px 8px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}
.wp-block-query-pagination {
	margin-top: 32px;
	gap: 12px;
}

/* Mapa do Jardim e Conheça a família */
.sg-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 14px;
}
.sg-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 2px;
	padding: 16px;
	background: var(--sg-surface);
	border: 1px solid var(--sg-line);
	border-top: 4px solid var(--sg-tile, var(--sg-line-strong));
	border-radius: 16px;
	color: var(--sg-on-dark);
	text-decoration: none;
}
a.sg-tile:hover {
	border-color: var(--sg-primary-bright);
	border-top-color: var(--sg-tile, var(--sg-line-strong));
	color: var(--sg-on-dark);
}
.sg-tile .sg-personagem {
	display: block;
	margin-bottom: 10px;
	width: 64px;
	height: auto;
}
.sg-tile-titulo {
	font-weight: 700;
	font-size: 15px;
	color: var(--sg-on-dark);
}
.sg-tile-sub {
	font-size: 13px;
	color: var(--sg-on-dark-soft);
	margin-bottom: 8px;
}
.sg-chip-status {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--sg-line);
	color: #e5e0f2;
}
.sg-chip-aberto {
	background: var(--sg-accent);
	color: #0b0f12;
}
.sg-tile:not(.sg-tile-aberto) .sg-personagem {
	opacity: 0.85;
}
/* Canteiro ainda não descoberto na família da Sobre: só o "Em breve", no centro do quadro. */
.sg-tile-oculto {
	justify-content: center;
	min-height: 150px;
}

.sg-volta {
	background: var(--sg-ground);
	border-radius: 20px;
	padding: 28px 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
	color: var(--sg-on-dark);
}
.sg-volta-texto {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1 1 360px;
}
.sg-volta-texto strong {
	display: block;
	font-size: 18px;
	margin-bottom: 4px;
}
.sg-volta-texto span {
	font-size: 14px;
	line-height: 1.55;
	color: var(--sg-on-dark-soft);
}

.sg-metodo {
	background: var(--sg-wash);
	border: 1px solid var(--sg-paper-line);
	border-radius: 20px;
	padding: 36px;
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: center;
	margin-bottom: 48px;
}
.sg-metodo-texto {
	flex: 1 1 320px;
	min-width: 0;
}
.sg-metodo-texto h2 {
	margin: 0 0 12px;
	font-size: 1.75rem;
}
.sg-metodo-texto p {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--sg-ink-soft);
}
.sg-metodo-selos {
	flex: 1 1 380px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sg-metodo-linha {
	display: flex;
	gap: 14px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--sg-paper-line);
	border-radius: 14px;
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.5;
}
.sg-metodo-linha .sg-selo {
	min-width: 92px;
	justify-content: center;
}

/* ================================================================ selos (as cores nunca mudam com o tema) */
.sg-selo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
}
.sg-selo-compre { background: #a3e635; color: #0b0f12; }
.sg-selo-espere { background: #f5a524; color: #0b0f12; }
.sg-selo-evite { background: #d32f2f; color: #fff; }
.sg-selo-observando { background: #e5e0f2; color: #14111c; }

/* ================================================================ artigo */
/* Artigo em coluna única de 760 px. Títulos centralizados; parágrafos justificados (última linha à esquerda);
   listas e tabelas alinhadas à esquerda. */
.sg-artigo {
	max-width: 760px;
	padding-block: 40px 64px;
}
.sg-prosa {
	font-size: 17px;
}
.sg-prosa h2,
.sg-prosa h3 {
	text-align: center;
	text-wrap: balance;
}
.sg-prosa p,
.sg-prosa li {
	text-align: justify;
	hyphens: auto;
}
.sg-prosa :is(ul, ol) {
	max-width: 640px;
	margin-inline: auto;
	padding-left: 1.3em;
	text-align: left;
}
.sg-prosa .sg-kicker,
.sg-prosa .sg-veredito-topo,
.sg-prosa .sg-veredito-data {
	text-align: center;
}
.sg-prosa > :first-child {
	margin-top: 0;
}
.sg-prosa p,
.sg-prosa li {
	line-height: 1.75;
}
.sg-prosa h2 {
	font-size: 1.625rem;
	line-height: 1.25;
	margin: 48px 0 14px;
	letter-spacing: -0.01em;
	scroll-margin-top: 24px;
}
.sg-prosa h3 {
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 28px 0 10px;
}
.sg-capa {
	margin: 0 0 24px;
}
/* Ilustrações no meio do texto: largura da coluna, cantos como os da capa. */
.sg-prosa .wp-block-image {
	margin: 8px 0 24px;
}
.sg-prosa .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}
.sg-capa img {
	border-radius: 14px;
	width: 100%;
	height: auto;
}

.sg-resposta-rapida {
	background: #fff;
	border: 2px solid var(--sg-primary);
	border-radius: 16px;
	padding: 22px 24px;
	margin-bottom: 20px;
}
.sg-resposta-rapida > * {
	margin: 0;
}
.sg-resposta-rapida p:not(.sg-kicker) {
	font-size: 17px;
	line-height: 1.7;
}
.sg-aviso-afiliado {
	font-size: 14px;
	line-height: 1.6;
	color: var(--sg-ink-soft);
	margin: 0 0 24px;
}

/* Ícone de ticket ao lado dos links de loja (inserido pelo tema.js) e a explicação "Link de afiliado". */
.sg-afiliado {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: 4px;
	line-height: 1;
}
.sg-afiliado-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: var(--sg-wash);
	color: var(--sg-sombra);
	cursor: help;
}
.sg-afiliado-icone:hover {
	background: var(--sg-paper-line);
}
.sg-afiliado-icone:focus-visible {
	outline: 3px solid var(--sg-accent);
	outline-offset: 2px;
}
.sg-afiliado-dica {
	position: absolute;
	z-index: 20;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(calc(-50% + var(--sg-desvio, 0px)));
	width: max-content;
	max-width: min(260px, calc(100vw - 16px));
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--sg-ground);
	color: var(--sg-on-dark);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	white-space: normal;
	box-shadow: 0 6px 20px rgb(11 15 18 / 0.25);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.15s ease, visibility 0.15s;
}
/* Ponte invisível entre o ícone e a explicação, para o mouse chegar ao "Saiba mais" sem fechar. */
.sg-afiliado-dica::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 10px;
}
.sg-afiliado-dica a {
	color: var(--sg-accent);
}
.sg-afiliado:hover .sg-afiliado-dica,
.sg-afiliado:focus-within .sg-afiliado-dica,
.sg-afiliado-aberto .sg-afiliado-dica {
	visibility: visible;
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.sg-afiliado-dica {
		transition: none;
	}
}

/* Veredito do Seiva: o selo é o carimbo; a cor nunca é o único sinal (o texto diz o veredito). */
.sg-veredito {
	background: var(--sg-ground);
	color: var(--sg-on-dark);
	border-radius: 18px;
	padding: 22px 24px;
	margin: 32px 0 8px;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.sg-veredito-figura {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	flex: 0 0 auto;
}
.sg-veredito-figura .sg-personagem {
	display: block;
	height: auto;
}
.sg-veredito-figura .sg-personagem:last-child:not(:first-child) {
	margin-bottom: 6px;
}
.sg-veredito-texto {
	width: 100%;
	min-width: 0;
}
.sg-veredito-texto > * {
	margin: 0 0 6px;
}
.sg-veredito .sg-kicker {
	color: var(--sg-on-dark-soft);
	margin: 0;
}
.sg-veredito-topo {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	align-items: center;
	margin-bottom: 8px;
}
.sg-veredito-topo .sg-selo {
	font-size: 15px;
	padding: 7px 16px;
}
.sg-veredito p {
	font-size: 15px;
	line-height: 1.6;
}
.sg-veredito-data {
	font-size: 13px !important;
	color: var(--sg-on-dark-soft);
}
.sg-veredito a {
	color: var(--sg-primary-bright);
}

.sg-traduz {
	background: var(--sg-wash);
	border: 1px solid var(--sg-paper-line);
	border-radius: 14px;
	padding: 18px 20px;
	margin: 0 0 24px;
	gap: 16px;
}
.sg-traduz p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
}
.sg-traduz .sg-kicker {
	margin-bottom: 6px;
}
.sg-prosa .sg-traduz {
	margin: 28px 0;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
}
.sg-prosa .sg-traduz > .wp-block-group {
	width: 100%;
}
/* Com ilustração: a imagem entra como faixa no topo de um quadro escuro, sem texto por cima dela. */
.sg-traduz-ilustrado {
	background: var(--sg-ground);
	border-color: var(--sg-line);
	color: var(--sg-on-dark);
	padding-top: 0;
	overflow: hidden;
}
.sg-prosa .sg-traduz-ilustrado .sg-traduz-faixa {
	display: block;
	width: calc(100% + 40px);
	max-width: none;
	margin: 0 -20px 4px;
}
.sg-prosa .sg-traduz-ilustrado .sg-traduz-faixa img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}
.sg-traduz-ilustrado .sg-kicker {
	color: var(--sg-on-dark-soft);
}

.sg-comparador {
	background: #fff;
	border: 1px solid var(--sg-paper-line);
	border-radius: 14px;
	padding: 1.1rem 1.25rem;
	gap: 16px;
	align-items: center;
}
.sg-comparador p {
	margin: 0;
}
.sg-prosa .sg-comparador {
	flex-direction: column;
	gap: 10px;
	margin-block: 8px 16px;
}
.sg-prosa .sg-comparador p {
	text-align: center;
}
.sg-prosa .sg-comparador .wp-block-buttons {
	justify-content: center;
}

/* Tabela de ficha técnica: rola de lado no celular. */
.sg-prosa .wp-block-table {
	overflow-x: auto;
	border: 1px solid var(--sg-paper-line);
	border-radius: 14px;
	background: #fff;
	margin-bottom: 12px;
}
.sg-prosa .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	min-width: 640px;
	font-size: 14px;
}
.sg-prosa .wp-block-table th {
	background: var(--sg-ground);
	color: var(--sg-on-dark);
	text-align: left;
	padding: 12px 14px;
	font-weight: 700;
	border: 0;
}
.sg-prosa .wp-block-table td {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--sg-paper-line);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
}
.sg-prosa .wp-block-table td:first-child {
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
}

/* Perguntas frequentes (core/details). */
.sg-faq {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sg-faq .wp-block-details {
	background: #fff;
	border: 1px solid var(--sg-paper-line);
	border-radius: 12px;
	padding: 0;
}
.sg-faq .wp-block-details:hover {
	border-color: var(--sg-primary);
}
.sg-faq .wp-block-details summary {
	cursor: pointer;
	list-style: none;
	min-height: 56px;
	padding: 16px 18px;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
}
.sg-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}
.sg-faq .wp-block-details summary::after {
	content: "+";
	font-size: 22px;
	line-height: 1;
	color: var(--sg-primary);
}
.sg-faq .wp-block-details[open] summary::after {
	content: "\2212";
}
.sg-faq .wp-block-details > :not(summary) {
	padding: 0 18px;
	margin: 0 0 14px;
}
.sg-prosa .sg-faq p {
	text-align: left;
}

/* Compartilhar, depois do texto. */
.sg-compartilhar {
	padding: 16px;
	margin-top: 32px;
	text-align: center;
}
.sg-compartilhar-acoes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.sg-leia-tambem {
	background: var(--sg-wash);
	padding-block: 40px 56px;
}
.sg-leia-tambem .sg-wrap {
	max-width: 1000px;
}
.sg-leia-tambem h2 {
	text-align: center;
	margin: 0 0 20px;
	font-size: 1.625rem;
	letter-spacing: -0.01em;
}
.sg-grade-3 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}
.sg-leia-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 20px;
	color: var(--sg-ink);
	text-decoration: none;
}
.sg-leia-item:hover {
	border-color: var(--sg-primary);
}
.sg-leia-titulo {
	font-weight: 700;
	font-size: 17px;
	line-height: 1.35;
}

/* Histórico: todos os artigos pelo número (ordem de chegada), em uma coluna. */
.sg-ver-historico {
	margin: 24px 0 0;
	text-align: center;
}
.sg-historico {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 760px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sg-historico-item {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 20px;
	color: var(--sg-ink);
	text-decoration: none;
}
.sg-historico-item:hover {
	border-color: var(--sg-primary);
}
.sg-historico-numero {
	flex: 0 0 auto;
	min-width: 56px;
	font-size: 20px;
	font-weight: 700;
	color: var(--sg-sombra);
	text-align: center;
}
.sg-historico-texto {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.sg-historico-titulo {
	font-weight: 700;
	font-size: 17px;
	line-height: 1.35;
}
.sg-historico-data {
	font-size: 13px;
	color: var(--sg-ink-soft);
}

/* Páginas (Sobre, Como escolhemos...). */
.sg-pagina {
	padding-bottom: 72px;
}

/* Página Sobre: um cartão por tema (3 por linha, a última centralizada). Os cartões da mesma linha ficam com
   a altura do mais alto. Kicker e títulos centralizados; o texto corrido é justificado, com a última linha
   alinhada à esquerda. */
.sg-sobre-grade {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 24px;
}
.sg-sobre-cartao {
	flex: 0 1 calc((100% - 48px) / 3);
	min-height: 320px;
	box-sizing: border-box;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 28px;
	text-align: center;
}
.sg-sobre .sg-sobre-cartao h2 {
	margin: 0 0 12px;
	font-size: clamp(1.3rem, 2.2vw, 1.5rem);
	line-height: 1.2;
}
.sg-sobre-cartao p,
.sg-sobre-cartao .wp-block-group > p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.65;
}
.sg-sobre-cartao p:not(.sg-kicker),
.sg-heroi-centro .sg-heroi-lead,
.sg-sobre-familia .sg-secao-cabeca p {
	text-align: justify;
	text-align-last: start;
	hyphens: auto;
}
.sg-sobre-cartao > :last-child {
	margin-bottom: 0;
}
.sg-sobre-cartao .sg-kicker {
	font-size: 12px;
	line-height: 1.4;
	margin-bottom: 12px;
}
.sg-sobre-cartao .sg-sobre-foto {
	margin: 0 auto 12px;
}
.sg-sobre-cartao .sg-sobre-foto img {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: 14px;
	border: 1px solid var(--sg-paper-line);
}

/* Cabeçalho da Sobre com os textos centralizados. */
.sg-heroi-centro .sg-heroi-texto {
	text-align: center;
}
.sg-heroi-centro .sg-heroi-lead {
	margin-inline: auto;
}
.sg-heroi-centro .sg-heroi-figura-caixa {
	margin-inline: auto;
}

/* Família da Sobre: duas linhas de cinco (no celular, cinco linhas de dois). */
.sg-sobre-familia .sg-secao-cabeca {
	text-align: center;
}
.sg-sobre-familia .sg-secao-cabeca p {
	max-width: 640px;
	margin-inline: auto;
}
.sg-sobre-familia .sg-tiles {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1000px) {
	.sg-sobre-cartao {
		flex-basis: calc((100% - 24px) / 2);
	}
	.sg-sobre-familia .sg-tile {
		padding: 12px 8px;
	}
	.sg-sobre-familia .sg-tile-titulo {
		font-size: 14px;
	}
}
@media (max-width: 640px) {
	.sg-sobre-cartao {
		flex-basis: 100%;
		min-height: 0;
		padding: 22px;
	}
	.sg-sobre-familia .sg-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Busca da página de resultados. */
.sg-busca-pagina {
	margin-bottom: 32px;
}
.sg-busca-pagina .wp-block-search__input {
	min-height: 48px;
	border: 1.5px solid var(--sg-paper-line);
	border-radius: 12px;
	padding: 0 16px;
	background: #fff;
}
.sg-busca-pagina .wp-block-search__button {
	min-height: 48px;
	border-radius: 12px;
	border: 0;
}

/* ================================================================ rodapé */
.sg-rodape {
	background: var(--sg-ground);
	border-top: 1px solid var(--sg-line);
	color: var(--sg-on-dark);
}
/* Rodapé (canvas de 1/11): logo, frase e as duas linhas de links, tudo centralizado. */
.sg-rodape-corpo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	max-width: 1000px;
	padding-block: 40px 28px;
	text-align: center;
}
.sg-rodape-marca {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}
.sg-rodape-marca img {
	display: block;
	height: 36px;
	width: auto;
	margin-bottom: 18px;
}
.sg-rodape-marca p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sg-on-dark-soft);
	max-width: 520px;
}
.sg-rodape-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
}
.sg-rodape a {
	color: var(--sg-on-dark-soft);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}
.sg-rodape a:hover {
	color: var(--sg-on-dark);
	text-decoration: underline;
}
.sg-rodape-aviso {
	border-top: 1px solid var(--sg-line);
}
.sg-rodape-aviso .sg-wrap {
	max-width: 900px;
	text-align: center;
	padding-block: 18px 24px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--sg-on-dark-soft);
}

/* ================================================================ celular */
@media (max-width: 781px) {
	.sg-wrap {
		padding-inline: 16px;
	}
	.sg-heroi-corpo {
		padding-block: 40px;
	}
	.sg-heroi-fala {
		flex-basis: auto;
	}
	.sg-balao {
		margin-bottom: 110px;
		max-width: 150px;
	}
	.sg-heroi-fala .sg-personagem {
		width: 140px;
	}
	.sg-metodo {
		padding: 24px;
	}
	.sg-volta {
		padding: 22px 20px;
	}
	.sg-veredito {
		padding: 18px;
	}
	.sg-heroi-figura,
	.sg-heroi-figura-caixa {
		display: none;
	}
	.sg-heroi-artigo .sg-heroi-figura-caixa,
	.sg-heroi-artigo .sg-heroi-figura {
		display: block;
		width: 72px;
		height: auto;
	}
	.sg-prosa {
		font-size: 16px;
	}
}