/* =====================================================================
   GVSX Mod — base: tipografia, superfícies do navegador, ritmo, mobile, movimento reduzido.
   ===================================================================== */

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	scrollbar-color: var(--gvsx-surface-3) transparent;
	background: var(--gvsx-bg);
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: var(--gvsx-bg);
	color: var(--gvsx-text);
	font-family: var(--gvsx-font-text);
	overflow-x: hidden;
	overflow-x: clip;
	transition: background-color var(--gvsx-dur-3) var(--gvsx-ease-out), color var(--gvsx-dur-3) var(--gvsx-ease-out);
}
html.gvsx-theme-init body { transition: none; }
img, video { max-width: 100%; height: auto; }
/* sem o vão de blockGap entre cabeçalho, conteúdo e rodapé, nem recuo no topo da página */
body { margin: 0; }
.wp-site-blocks { padding-block-start: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks > header:first-child { margin-block-start: 0; }
img { font-style: italic; } /* alt visível como texto se a imagem falhar */
button, input, select, textarea { font: inherit; color: inherit; }

/* ---- superfícies do navegador: seleção, cursor de texto, barra de rolagem, foco ---- */
::selection { background: var(--gvsx-accent); color: var(--gvsx-accent-ink); }
::-moz-selection { background: var(--gvsx-accent); color: var(--gvsx-accent-ink); }
input, textarea { caret-color: var(--gvsx-accent); accent-color: var(--gvsx-accent); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gvsx-surface-3); border: 3px solid var(--gvsx-bg); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--gvsx-text-3); }
a:focus:not(:focus-visible), button:focus:not(:focus-visible), summary:focus:not(:focus-visible), label:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible), .wp-block-button__link:focus:not(:focus-visible),
.wc-block-components-button:focus:not(:focus-visible), .wc-block-components-product-image a:focus:not(:focus-visible) { outline: none; box-shadow: none; }
:focus-visible { outline: 2px solid var(--gvsx-accent); outline-offset: 3px; border-radius: 4px; }
a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

/* ---- tipografia ---- */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; overflow-wrap: anywhere; margin-block: 0 0.5em; }
p, li, dd, figcaption { text-wrap: pretty; }
p { max-width: 68ch; }
.has-text-align-center p, p.has-text-align-center, .gvsx-center p { margin-inline: auto; }
strong, b { font-weight: 600; }
small { font-size: 0.875em; }
.gvsx-display {
	font-family: var(--gvsx-font-display);
	font-stretch: 118%;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 0.98;
	text-wrap: balance;
}
.gvsx-display--tight { font-stretch: 100%; letter-spacing: -0.02em; line-height: 1.02; }
.gvsx-label {
	font-family: var(--gvsx-font-display);
	font-stretch: 78%;
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
}
.gvsx-price, .woocommerce-Price-amount, .gvsx-mono {
	font-family: var(--gvsx-font-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}
/* números dentro de texto e títulos: a própria fonte, com dígitos tabulares (o mono espaça a vírgula demais) */
.gvsx-num { font-variant-numeric: tabular-nums; }
.gvsx-lead { font-size: var(--wp--preset--font-size--medium); color: var(--gvsx-text-2); line-height: 1.55; }
.gvsx-muted { color: var(--gvsx-text-2); }
.gvsx-quiet { color: var(--gvsx-text-3); }

/* títulos de seção: alinhados à esquerda, com a linha de apoio abaixo */
.gvsx-section__head { max-width: 44rem; margin-bottom: var(--gvsx-s-6); }
.gvsx-section__head h1, .gvsx-section__head h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -0.04em; margin: 0 0 var(--gvsx-s-3); }
.gvsx-section__head p { margin: 0; color: var(--gvsx-text-2); font-size: 1.125rem; line-height: 1.55; }
@media (max-width: 599px) { .gvsx-section__head p { font-size: 1.0625rem; } }

/* ---- grade de blocos (o desenho da AbacatePay, célula a célula) ----
   Cada seção são duas fileiras de três células: o espaçador (três células listradas) e o conteúdo (margem lisa |
   bloco | margem lisa). Entre as células, vãos de 1px deixam aparecer o fundo da linha: é o fio da grade, que
   corre a página inteira na horizontal e na vertical. Toda célula arredonda (8px) os cantos voltados para a
   coluna central, então em cada vértice quatro cantos arredondados se encontram e o fio forma a estrela. */
.gvsx-section {
	display: grid;
	grid-template-columns: minmax(var(--gvsx-gutter-min), 1fr) minmax(0, var(--gvsx-board-max)) minmax(var(--gvsx-gutter-min), 1fr);
	grid-template-rows: var(--gvsx-spacer) auto;
	gap: 1px;
	padding: 0 0 1px;
	background-color: var(--gvsx-rule);
}
.gvsx-section::before, .gvsx-section::after { content: ""; grid-row: 2; background: var(--gvsx-paper); }
.gvsx-section::before { grid-column: 1; border-radius: 0 var(--gvsx-radius-block) var(--gvsx-radius-block) 0; }
.gvsx-section::after { grid-column: 3; border-radius: var(--gvsx-radius-block) 0 0 var(--gvsx-radius-block); }
.gvsx-row__gap { display: contents; }
.gvsx-row__gap > i { grid-row: 1; background-color: var(--gvsx-paper); background-image: var(--gvsx-stripes); }
.gvsx-row__gap > i:nth-child(1) { grid-column: 1; border-radius: 0 var(--gvsx-radius-block) var(--gvsx-radius-block) 0; }
.gvsx-row__gap > i:nth-child(2) { grid-column: 2; border-radius: var(--gvsx-radius-block); }
.gvsx-row__gap > i:nth-child(3) { grid-column: 3; border-radius: var(--gvsx-radius-block) 0 0 var(--gvsx-radius-block); }
.gvsx-section > .gvsx-wrap, .gvsx-section > .gvsx-row__pair { margin: 0 !important; } /* o blockGap do WordPress não entra nas células */
.gvsx-section > .gvsx-wrap {
	grid-area: 2 / 2 / 3 / 3;
	max-width: none;
	padding: var(--gvsx-block-y) var(--gvsx-block-x);
	background: var(--gvsx-block);
	border-radius: var(--gvsx-radius-block);
}
/* linha sem espaçador: logo abaixo do cabeçalho (hero, topo do produto) */
.gvsx-section--flush { grid-template-rows: auto; }
.gvsx-section--flush > .gvsx-row__gap { display: none; }
.gvsx-section--flush::before, .gvsx-section--flush::after, .gvsx-section--flush > .gvsx-wrap { grid-row: 1; }
.gvsx-section--tight > .gvsx-wrap { padding-block: clamp(2rem, 4vw, 3.5rem); }
/* linha dupla: dois blocos lado a lado na coluna central, separados pelo mesmo fio de 1px */
.gvsx-section > .gvsx-row__pair { grid-area: 2 / 2 / 3 / 3; display: grid; grid-template-columns: var(--gvsx-pair, 1fr 1fr); gap: 1px; min-width: 0; }
.gvsx-section--flush > .gvsx-row__pair { grid-row: 1; }
.gvsx-row__pair > .gvsx-wrap { max-width: none; margin: 0; padding: var(--gvsx-block-y) var(--gvsx-block-x); background: var(--gvsx-block); border-radius: var(--gvsx-radius-block); min-width: 0; }
@media (max-width: 899px) { .gvsx-section > .gvsx-row__pair { grid-template-columns: minmax(0, 1fr); } }
/* o espaçamento entre blocos é o espaçador da própria linha: o blockGap do WordPress sai de cena */
main > .gvsx-section, main > * > .gvsx-section, .gvsx-section { margin-block: 0; }
.gvsx-band { background-color: var(--gvsx-rule); }


/* ---- troca de tema: crossfade curto entre as duas paletas (View Transitions; quem não tem a API troca na hora) ---- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: var(--gvsx-ease-out); }
/* o alternador fica fora do crossfade: só o marcador ao vivo desliza, sem o da foto antiga sumindo por baixo */
.gvsx-theme-toggle { view-transition-name: gvsx-theme-toggle; }
::view-transition-old(gvsx-theme-toggle) { display: none; }
::view-transition-new(gvsx-theme-toggle) { animation: none; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
/* Movimento reduzido: as entradas curtas (painéis das abas, avisos, menu) ficam só na opacidade. */
@media (prefers-reduced-motion: reduce) { [data-gvsx-panel], .woocommerce-message, .woocommerce-info, .woocommerce-error, body .wc-block-components-notice-banner { transform: none !important; transition-duration: 120ms; } .gvsx-cart-link__count.is-bump { transform: none; } }

/* ---- grão: overlay fixo a 3%, fora do fluxo, nunca em quem rola ---- */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 60;
	pointer-events: none;
	opacity: 0.032;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
	mix-blend-mode: overlay;
}
html[data-theme="light"] body::after { opacity: 0.05; mix-blend-mode: multiply; }

/* ---- acessibilidade ---- */
.gvsx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.gvsx-skip { position: fixed; left: 1rem; top: 1rem; z-index: 200; padding: 0.7rem 1rem; border-radius: var(--gvsx-radius-m); background: var(--gvsx-accent); color: var(--gvsx-accent-ink); font-weight: 600; transform: translateY(-200%); opacity: 0; transition: transform var(--gvsx-dur-2) var(--gvsx-ease-out), opacity var(--gvsx-dur-2) var(--gvsx-ease-out); }
.gvsx-skip:focus { transform: none; opacity: 1; outline-offset: 2px; }

/* ---- largura das seções (as seções são wp:html, então cuidam do próprio contêiner) ---- */
/* Uma margem só em todas as seções (a mesma do cabeçalho e do rodapé): a largura de conteúdo do theme.json. */
.gvsx-wrap { box-sizing: border-box; width: 100%; max-width: var(--wp--style--global--content-size, 1240px); margin-inline: auto; padding-inline: var(--gvsx-gutter); }
/* dentro de uma seção, .gvsx-wrap é o bloco: a largura vem da coluna central da grade */
.gvsx-wrap--content { max-width: var(--wp--style--global--content-size, 1240px); }
.gvsx-wrap--narrow { max-width: 56rem; }

/* ---- mobile: toque, viewport, inputs ---- */
button, a, [role="button"], summary, label { touch-action: manipulation; }
button, [role="button"], .wp-block-button__link, .gvsx-chip, summary { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
input, textarea, select { font-size: 16px; }
@media (pointer: coarse) { input, textarea, select { font-size: 16px; } }
.gvsx-scroll-x { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gvsx-scroll-x::-webkit-scrollbar { display: none; }

/* ---- ícones (sprite inline em wp_body_open; ver inc/icons.php) ---- */
.gvsx-i { display: inline-block; width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; fill: currentColor; }
.gvsx-i--s { width: 1em; height: 1em; }
.gvsx-i--l { width: 1.5em; height: 1.5em; }

/* ---- WhatsApp flutuante (só na home; ver inc/woocommerce.php) ---- */
#gvsx-wa-float { position: fixed; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 95; width: 56px; height: 56px; border-radius: 50%; background: var(--gvsx-surface); color: var(--gvsx-text); border: 1px solid var(--gvsx-line-strong); display: flex; align-items: center; justify-content: center; box-shadow: var(--gvsx-shadow-2); text-decoration: none; transition: transform var(--gvsx-dur-2) var(--gvsx-ease-out), background-color var(--gvsx-dur-2) var(--gvsx-ease-out), color var(--gvsx-dur-2) var(--gvsx-ease-out); }
#gvsx-wa-float svg { width: 26px; height: 26px; }
/* Com o botão flutuante na página, o rodapé ganha folga embaixo no celular para a última linha não ficar atrás dele. */
@media (max-width: 599px) { body:has(#gvsx-wa-float) .gvsx-footer { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); } }

#gvsx-wa-float:active { transform: scale(0.96); }
#gvsx-wa-float .gvsx-wa-tip { position: absolute; right: calc(100% + 12px); /* o botão fica à direita: a dica abre para dentro da tela */ background: var(--gvsx-surface-2); color: var(--gvsx-text); font-size: 0.82rem; font-weight: 600; padding: 8px 12px; border-radius: var(--gvsx-radius-m); border: 1px solid var(--gvsx-line); white-space: nowrap; box-shadow: var(--gvsx-shadow-1); opacity: 0; transform: translateX(6px); transition: opacity var(--gvsx-dur-2) var(--gvsx-ease-out), transform var(--gvsx-dur-2) var(--gvsx-ease-out); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
	#gvsx-wa-float:hover { background: var(--gvsx-accent); color: var(--gvsx-accent-ink); border-color: transparent; transform: translateY(-2px); }
	#gvsx-wa-float:hover .gvsx-wa-tip { opacity: 1; transform: translateX(0); }
}
@media (max-width: 749px) { #gvsx-wa-float { right: 14px; width: 52px; height: 52px; } #gvsx-wa-float .gvsx-wa-tip { display: none; } }
body.gvsx-has-buybar #gvsx-wa-float { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* ---- revelação ao rolar (uma vez, escalonada por --i) ---- */
html.gvsx-js [data-gvsx-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--gvsx-dur-4) var(--gvsx-ease-out), transform var(--gvsx-dur-4) var(--gvsx-ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
html.gvsx-js [data-gvsx-reveal].is-in { opacity: 1; transform: none; }
html.gvsx-js .gvsx-bento__cell[data-gvsx-reveal] { transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 0.8s var(--gvsx-ease-out), opacity 0.4s var(--gvsx-ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
html.gvsx-js .gvsx-bento__cell[data-gvsx-reveal].is-in { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
	html.gvsx-js [data-gvsx-reveal] { transform: none; clip-path: none; transition: opacity 0.2s ease; }
}

/* ---- movimento reduzido: mantém opacidade, tira deslocamento ---- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---- brilho verde nos títulos principais e na nota das avaliações (pedido do dono em 23/09/2026) ----
   No ritmo do tema antigo: uma faixa de luz verde atravessa o texto da esquerda para a direita em velocidade
   constante, e logo depois a próxima entra. O ladrilho de 200% com repeat-x fecha o loop sem salto: a faixa leva
   cerca de 2,5s para cruzar o texto e some por pouco mais de 1s. O miolo sólido (47% a 53%) com bordas suaves
   deixa a luz visível mesmo em títulos curtos. O gradiente usa currentColor, então vale nos dois temas;
   --gvsx-shine troca a cor da faixa onde o texto já for verde. Sem suporte a background-clip: text, o texto
   fica normal. */
@keyframes gvsx-shine { from { background-position: 130% 0; } to { background-position: -70% 0; } }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.gvsx-hero__title, .gvsx-section__head h1, .gvsx-section__head h2, .gvsx-teaser h2, .gvsx-cta__inner h2,
	.gvsx-motion__head h2, .gvsx-support h2, .gvsx-product__title, .gvsx-tut__intro h1, .gvsx-light__text h2,
	.gvsx-reviews__h, .gvsx-reviews__sum b, .gvsx-compare__score b {
		/* a caixa na largura do texto: a faixa percorre as letras, não a coluna inteira */
		width: fit-content;
		background-image: linear-gradient(100deg, currentColor 0 38%, var(--gvsx-shine, var(--gvsx-accent)) 47% 53%, currentColor 62% 100%);
		background-size: 200% 100%;
		background-repeat: repeat-x;
		background-position: 130% 0;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: gvsx-shine 5s linear infinite;
	}
	/* filhos com cor própria (a caneta) herdariam o texto transparente */
	.gvsx-section__head h2 .gvsx-pen svg { -webkit-text-fill-color: initial; }
}
@media (prefers-reduced-motion: reduce) {
	.gvsx-hero__title, .gvsx-section__head h1, .gvsx-section__head h2, .gvsx-teaser h2, .gvsx-cta__inner h2,
	.gvsx-motion__head h2, .gvsx-support h2, .gvsx-product__title, .gvsx-tut__intro h1, .gvsx-light__text h2,
	.gvsx-reviews__h, .gvsx-reviews__sum b, .gvsx-compare__score b {
		animation: none; background-image: none; -webkit-text-fill-color: currentColor;
	}
}