/*
Theme Name:  Gabriel Tacco
Theme URI:
Description: Tema WordPress + WPBakery + ACF do projeto Gabriel Tacco (arquitetura derivada do scaffold theme-base).
Version:     0.1.0
Author:
Author URI:
Text Domain: gabriel-tacco
Tags:        custom-post-types, acf, wpbakery
*/

/* =============================================
   Contact Form 7 — estilo genérico (CSS puro, sem
   Tailwind/@apply, porque este arquivo não passa
   pelo build). Troque as cores pelas do projeto.
   ============================================= */
.gt-cf7 form.wpcf7-form > * + * {
	margin-top: 1.25rem;
}
.gt-cf7 label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: rgb(var(--color-accent-50));
	margin-bottom: 0.375rem;
}
.gt-cf7 input::placeholder,
.gt-cf7 textarea::placeholder {
	color: rgb(var(--color-accent-400));
	opacity: 1;
}
.gt-form-input,
.gt-form-textarea {
	display: block;
	width: 100%;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	border: 1px solid #cbd5e1;
	background-color: #f8fafc;
	color: #0f172a;
	font-size: 0.875rem;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.gt-form-input::placeholder,
.gt-form-textarea::placeholder {
	color: #94a3b8;
}
.gt-form-input:focus,
.gt-form-textarea:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgb(var(--color-primary-500));
	border-color: rgb(var(--color-primary-700));
}
.gt-form-textarea {
	resize: none;
}
.gt-form-submit {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	color: rgb(var(--color-accent-950));
	font-weight: 600;
	border-radius: 0.75rem;
	font-size: 0.875rem;
	border: none;
	cursor: pointer;
	background-color: rgb(var(--color-primary-500));
	transition: background-color .2s, box-shadow .2s;
}
.gt-form-submit:hover {
	background-color: rgb(var(--color-primary-600));
	box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}

/* Campo inválido: borda + fundo vermelho-claro */
.gt-form-input.wpcf7-not-valid,
.gt-form-textarea.wpcf7-not-valid {
	border-color: #fca5a5;
	background-color: #fef2f2;
}
.gt-form-input.wpcf7-not-valid:focus,
.gt-form-textarea.wpcf7-not-valid:focus {
	box-shadow: 0 0 0 2px #fecaca;
	border-color: #f87171;
}

/* Mensagem de erro ocupa o lugar do placeholder dentro do campo,
   em vez de aparecer solta embaixo. */
.gt-form-input.wpcf7-not-valid::placeholder,
.gt-form-textarea.wpcf7-not-valid::placeholder {
	color: transparent;
}
.wpcf7-form-control-wrap {
	position: relative;
	display: block;
}
/* Some assim que o usuário começa a digitar — a classe wpcf7-not-valid do
   campo só é removida pelo CF7 na próxima validação (submit/blur), então
   sem isso a mensagem ficava sobreposta ao texto digitado. :placeholder-shown
   reage em tempo real, sem precisar de JS. */
.wpcf7-form-control-wrap:has(.wpcf7-not-valid:not(:placeholder-shown)) .wpcf7-not-valid-tip {
	display: none;
}

.gt-cf7 .wpcf7-not-valid-tip {
	color: #ef4444;
	font-size: 0.875rem;
	font-weight: 500;
	position: absolute;
	top: 0.75rem;
	left: 1rem;
	right: 1rem;
	margin: 0;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Caixa de resposta (sucesso/erro/spam) — sobrescreve as cores padrão do
   plugin, cujo seletor (.wpcf7 form.invalid .wpcf7-response-output) é
   mais específico que o nosso, por isso o !important nas bordas. */
.gt-cf7 .wpcf7-response-output {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	font-size: 0.875rem;
	border-width: 1px;
	border-style: solid;
}
.gt-cf7 form.sent .wpcf7-response-output {
	border-color: #86efac !important;
	background-color: #f0fdf4;
	color: #15803d;
}
.gt-cf7 form.invalid .wpcf7-response-output,
.gt-cf7 form.unaccepted .wpcf7-response-output,
.gt-cf7 form.payment-required .wpcf7-response-output,
.gt-cf7 form.failed .wpcf7-response-output,
.gt-cf7 form.aborted .wpcf7-response-output {
	border-color: #fca5a5 !important;
	background-color: #fef2f2;
	color: #b91c1c;
}
.gt-cf7 form.spam .wpcf7-response-output {
	border-color: #fdba74 !important;
	background-color: #fff7ed;
	color: #c2410c;
}

/* =============================================
   Listas (<ul>/<ol>) no conteúdo — o Preflight do
   Tailwind zera list-style/margin/padding de toda
   lista (ol,ul{list-style:none;margin:0;padding:0}
   em dist/main.css), pensado pra UI (nav, cards),
   mas isso também apaga bullets/numeração e recuo
   do conteúdo de páginas/posts/WPBakery Text.
   Escopado a <main> pra não afetar o <ul> do menu
   de navegação (o único fora do conteúdo).
   ============================================= */
main ul,
main ol {
	margin: 1em 0;
	padding-left: 1.625em;
}
main ul {
	list-style: disc;
}
main ol {
	list-style: decimal;
}
main ul ul {
	list-style: circle;
}

/* =============================================
   Títulos (<h1>-<h6>) e parágrafos no conteúdo —
   o Preflight do Tailwind zera o tamanho/peso dos
   headings (h1,h2,h3,h4,h5,h6{font-size:inherit;
   font-weight:inherit}) e a margem de headings,
   parágrafos, blockquote/hr/pre (mesma regra
   {margin:0} de todos esses elementos), pensado
   pra UI onde tudo leva classe Tailwind explícita.
   Isso também apaga a hierarquia visual de
   headings/parágrafos digitados livremente em
   páginas/posts/WPBakery Text. Escopado a <main>;
   como Tailwind aplica utilitário via classe (mais
   específico que a combinação de elementos usada
   aqui), nenhum heading do próprio tema — que
   sempre tem classes de tamanho/peso/margem — é
   afetado, só o conteúdo sem classes.
   NÃO definir "color" aqui: se algum componente do
   tema tiver um <h3> sem classe de cor própria,
   contando com herança de um ancestral escuro
   (ex: card com fundo escuro e texto branco),
   herança sempre perde pra uma declaração direta
   no elemento, e "color" aqui quebraria isso.
   ============================================= */
main h1, main h2, main h3, main h4, main h5, main h6 {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	line-height: 1.25;
}
main h1 { font-size: 2.25rem; margin: 2.5rem 0 1.5rem; }
main h2 { font-size: 1.875rem; margin: 2.5rem 0 1.5rem; }
main h3 { font-size: 1.5rem; margin: 2rem 0 1.25rem; }
main h4 { font-size: 1.25rem; margin: 1.75rem 0 1rem; }
main h5 { font-size: 1.125rem; margin: 1.75rem 0 1rem; }
main h6 { font-size: 1rem; margin: 1.5rem 0 1rem; }
main p {
	margin: 0 0 1rem;
}

/* =============================================
   WPBakery — largura segura para as Rows padrão.
   O tema não tem um .container (Bootstrap) pra
   limitar a largura, e o WPBakery conta com isso;
   sem essa regra, .vc_row ocupa 100% da viewport.
   Mesmos valores de .section-container (src/input.css).
   Não afeta wrappers de "Full Width Row"
   (.vc_row-full-width), que continuam de ponta a
   ponta — só a .vc_row (conteúdo) interna é limitada.
   Escopado a <main> (== page.php): se a Home
   (front-page.php) montar seções fora de <main> e
   depender de rows full-bleed, replique esse escopo
   lá também.
   ============================================= */
main .wpb_row.vc_row-fluid {
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}
@media (min-width: 640px) {
	main .wpb_row.vc_row-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
	main .wpb_row.vc_row-fluid { padding-left: 2rem; padding-right: 2rem; }
}

/* =============================================
   Paginação (paginate_links / the_posts_pagination)
   — blog, arquivos. O core do WP gera <a>/<span
   class="page-numbers"> sem nenhuma classe Tailwind,
   então o estilo vem daqui. Classe .gt-pagination
   no wrapper ativa essas regras (ver home.php,
   archive.php, search.php, inc/template-blog-listagem.php).
   ============================================= */
.gt-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.875rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #475569;
	background: #fff;
	border: 1px solid #e2e8f0;
	transition: color .2s, background-color .2s, border-color .2s;
}
.gt-pagination a.page-numbers:hover,
.gt-pagination button.page-numbers:not(.disabled):hover {
	border-color: rgb(var(--color-primary-200));
	color: rgb(var(--color-primary-700));
}
.gt-pagination .page-numbers.current {
	background: rgb(var(--color-primary-500));
	border-color: rgb(var(--color-primary-700));
	color: rgb(var(--color-accent-950));
}
.gt-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}
.gt-pagination button.page-numbers.disabled {
	color: #cbd5e1;
	cursor: default;
}

/* =============================================
   Lightbox — abre a imagem em tamanho grande ao
   clicar numa galeria de mídia ([gallery], ver o
   filtro post_gallery em functions.php). Overlay
   único, reaproveitado por qualquer grupo de fotos
   da página (JS em assets/js/theme.js controla
   qual imagem mostrar via data-lightbox-*).
   ============================================= */
.gt-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, .92);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 3rem 1.5rem;
}
.gt-lightbox.is-open {
	display: flex;
}
.gt-lightbox-img {
	max-width: 90vw;
	max-height: 82vh;
	object-fit: contain;
	border-radius: 0.5rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
}
.gt-lightbox-caption {
	position: absolute;
	bottom: 1.5rem;
	left: 1rem;
	right: 1rem;
	text-align: center;
	color: #fff;
	font-size: 0.875rem;
}
.gt-lightbox-close,
.gt-lightbox-prev,
.gt-lightbox-next {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, rgb(var(--color-accent-50)) 10%, transparent);
	color: rgb(var(--color-accent-50));
	border: none;
	border-radius: 9999px;
	cursor: pointer;
	transition: background-color .2s;
}
.gt-lightbox-close:hover,
.gt-lightbox-prev:hover,
.gt-lightbox-next:hover {
	background: color-mix(in srgb, rgb(var(--color-accent-50)) 20%, transparent);
}
.gt-lightbox-close {
	top: 1rem;
	right: 1rem;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.5rem;
	line-height: 1;
}
.gt-lightbox-prev,
.gt-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	font-size: 1.75rem;
}
.gt-lightbox-prev { left: 0.5rem; }
.gt-lightbox-next { right: 0.5rem; }
@media (min-width: 640px) {
	.gt-lightbox-prev { left: 1.5rem; }
	.gt-lightbox-next { right: 1.5rem; }
}

/* =============================================
   HOME — visual "palco" (protótipo arquivos/prototipo-home.html).
   Cores vêm dos tokens em src/input.css (--color-*).
   ============================================= */

/* Hero */
.gt-hero-stage {
	background:
		radial-gradient(60% 55% at 72% 38%, color-mix(in srgb, rgb(var(--color-primary-500)) 20%, transparent), transparent 70%),
		radial-gradient(40% 35% at 20% 0%, color-mix(in srgb, rgb(var(--color-accent-50)) 5%, transparent), transparent 70%);
}
/* Foto do hero estourada atrás de toda a seção, com o Gabriel à direita.
   A sombra escurece a esquerda (onde fica o texto) e deixa a direita mais
   nítida (onde ele está), além de escurecer embaixo pra misturar com a
   próxima seção. */
.gt-hero-bg { object-position: right center; }
.gt-hero-overlay {
	background:
		linear-gradient(90deg,
			rgb(var(--color-accent-950)) 0%,
			color-mix(in srgb, rgb(var(--color-accent-950)) 80%, transparent) 38%,
			color-mix(in srgb, rgb(var(--color-accent-950)) 25%, transparent) 65%,
			transparent 100%),
		linear-gradient(to top, rgb(var(--color-accent-950)) 0%, transparent 40%);
}
.gt-hero-title {
	font-size: clamp(3.6rem, 9vw, 8.5rem);
	line-height: .9;
	letter-spacing: -.035em;
	max-width: 62%;
}
@media (max-width: 900px) {
	/* No celular o texto fica por cima da foto inteira: sombra de cima pra baixo */
	.gt-hero-overlay {
		background:
			linear-gradient(180deg,
				rgb(var(--color-accent-950)) 0%,
				color-mix(in srgb, rgb(var(--color-accent-950)) 65%, transparent) 45%,
				color-mix(in srgb, rgb(var(--color-accent-950)) 30%, transparent) 75%,
				transparent 100%),
			linear-gradient(to top, rgb(var(--color-accent-950)) 0%, transparent 45%);
	}
	.gt-hero-title { max-width: none; }
}

/* Botões */
.gt-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	padding: .9rem 1.4rem;
	border-radius: 999px;
	border: 1px solid transparent;
	transition: background-color .2s, color .2s, border-color .2s;
}
.gt-btn-primary { background: rgb(var(--color-primary-500)); color: rgb(var(--color-accent-950)); }
.gt-btn-primary:hover { background: rgb(var(--color-primary-600)); }
.gt-btn-ghost { border-color: rgb(var(--color-accent-800)); color: rgb(var(--color-accent-50)); }
.gt-btn-ghost:hover { border-color: rgb(var(--color-accent-50)); }
.gt-btn-dark { background: rgb(var(--color-accent-950)); color: rgb(var(--color-primary-500)); }
.gt-btn-dark:hover { background: rgb(var(--color-accent-800)); }

/* Faixa de formatos em movimento */
.gt-ticker-track { animation: gt-tick 38s linear infinite; }
@keyframes gt-tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .gt-ticker-track { animation: none; } }

/* Filtro do portfólio: enquanto o AJAX busca os vídeos (aria-busy="true"),
   escurece os cards antigos e mostra um círculo girando. "fixed" (não
   "absolute") de propósito: centraliza na tela, não no meio do próprio
   miolo — que é alto, com os cards, e deixaria o círculo fora da área
   visível enquanto os filtros (acima) ainda estão na tela. */
[data-portfolio-grid][aria-busy="true"] { min-height: 220px; }
[data-portfolio-grid][aria-busy="true"] > * {
	opacity: .35;
	pointer-events: none;
	transition: opacity .15s ease;
}
[data-portfolio-grid][aria-busy="true"]::after {
	content: '';
	position: fixed;
	top: 50%;
	left: 50%;
	width: 2.75rem;
	height: 2.75rem;
	margin: -1.375rem 0 0 -1.375rem;
	border: 3px solid rgb(var(--color-accent-800));
	border-top-color: rgb(var(--color-primary-500));
	border-radius: 999px;
	animation: gt-spin .7s linear infinite;
	z-index: 60;
}
@keyframes gt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	[data-portfolio-grid][aria-busy="true"]::after { animation: none; }
}

/* Serviços: destaque ao passar o mouse */
.gt-service { transition: background-color .3s; overflow: hidden; }
.gt-service-title { transition: color .3s; }
.gt-service-content { transition: transform .3s ease; }
.gt-service:hover { background: rgb(var(--color-accent-800)); }
.gt-service:hover .gt-service-title { color: rgb(var(--color-primary-500)); }
.gt-service:hover .gt-service-content { transform: translateX(20px); }
.gt-chip { transition: background-color .25s, color .25s, border-color .25s, transform .25s; cursor: default; }
.gt-chip:hover {
	background: rgb(var(--color-primary-500));
	border-color: rgb(var(--color-primary-500));
	color: rgb(var(--color-accent-950));
	transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
	.gt-service, .gt-service-title, .gt-chip, .gt-service-content { transition: none; }
	.gt-chip:hover { transform: none; }
	.gt-service:hover .gt-service-content { transform: none; }
}

/* Depoimentos: foto circular, ou iniciais em navy quando não há foto */
.gt-depo-foto {
	width: 4rem;
	height: 4rem;
	border-radius: 9999px;
	object-fit: cover;
	flex-shrink: 0;
}
.gt-depo-iniciais {
	display: grid;
	place-items: center;
	background: rgb(var(--color-accent-950));
	color: rgb(var(--color-primary-500));
	font-size: 1.125rem;
	letter-spacing: .02em;
}

/* Redes sociais no rodapé: ícone SVG + nome */
.gt-social a { display: inline-flex; align-items: center; gap: .5rem; }
.gt-social-link { display: flex; align-items: center; gap: .5rem; width: fit-content; }
.gt-social svg, .gt-social-link svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* Logos de clientes: páginas de 8 (2 × 4), deslizando como um slider —
   .gt-logos-viewport recorta, .gt-logos-track desliza (transform) e muda de
   altura (height) conforme a página atual, já que o número de logos na
   última página pode variar. */
.gt-logos-viewport {
	overflow: hidden;
	transition: height .35s ease;
}
.gt-logos-track {
	display: flex;
	transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.gt-logos-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	flex: 0 0 100%;
	min-width: 100%;
}
@media (min-width: 768px) {
	.gt-logos-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.gt-logo-cell {
	display: grid;
	place-items: center;
	min-height: 120px;
	padding: 2rem;
	background: rgb(var(--color-accent-900));
}
.gt-logo-img {
	max-height: 5rem;
	width: auto;
	opacity: .7;
	transition: opacity .2s;
}
.gt-logo-cell:hover .gt-logo-img { opacity: 1; }
.gt-logo-cell span {
	font-size: .875rem;
	font-weight: 600;
	color: rgb(var(--color-accent-300));
}
.gt-logos-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.5rem;
}
.gt-logos-nav[hidden] { display: none; }
.gt-logos-nav button {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	border: 1px solid rgb(var(--color-primary-500));
	background: transparent;
	color: rgb(var(--color-primary-500));
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.gt-logos-nav button:hover:not(:disabled) {
	background: rgb(var(--color-primary-500));
	color: rgb(var(--color-accent-950));
}
.gt-logos-nav button:disabled { opacity: .35; cursor: default; }
.gt-logos-contador {
	min-width: 4ch;
	text-align: center;
	font-size: .875rem;
	font-variant-numeric: tabular-nums;
	color: rgb(var(--color-accent-400));
}

/* Depoimentos: mesmo slider das logos acima (viewport recorta, track desliza
   e muda de altura), mas em faixa clara — texto cinza mais escuro no contador,
   já que accent-400 fica apagado demais sobre fundo claro. */
.gt-depo-viewport {
	overflow: hidden;
	transition: height .35s ease;
}
.gt-depo-track {
	display: flex;
	transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
[data-depo-pagina] {
	flex: 0 0 100%;
	min-width: 100%;
}
.gt-depo-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 2rem;
}
.gt-depo-nav[hidden] { display: none; }
.gt-depo-nav button {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	border: 1px solid rgb(var(--color-primary-500));
	background: transparent;
	color: rgb(var(--color-primary-500));
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.gt-depo-nav button:hover:not(:disabled) {
	background: rgb(var(--color-primary-500));
	color: rgb(var(--color-accent-950));
}
.gt-depo-nav button:disabled { opacity: .35; cursor: default; }
.gt-depo-contador {
	min-width: 4ch;
	text-align: center;
	font-size: .875rem;
	font-variant-numeric: tabular-nums;
	color: rgb(var(--color-accent-600));
}

@media (prefers-reduced-motion: reduce) {
	.gt-logos-viewport, .gt-logos-track, .gt-depo-viewport, .gt-depo-track {
		transition: none;
	}
}

/* Banner das páginas internas: brilho em champagne mais forte que o do hero
   (.gt-hero-stage), porque essa faixa é baixa — o brilho do hero, pensado
   pra tela cheia, quase some aqui. Ancorado no canto superior direito. */
.gt-banner-glow {
	background:
		radial-gradient(60% 160% at 100% 0%, color-mix(in srgb, rgb(var(--color-primary-500)) 30%, transparent), transparent 70%),
		radial-gradient(40% 120% at 0% 100%, color-mix(in srgb, rgb(var(--color-primary-500)) 12%, transparent), transparent 70%);
}

/* Reel: imagem de fundo opcional da seção, com efeito fixo ao rolar.
   "fixed" só entra no desktop — no celular (sobretudo iOS) esse efeito
   trava a rolagem ou simplesmente não funciona, então lá a imagem rola
   junto com o conteúdo normalmente. Também desliga se o visitante
   preferir menos movimento. */
.gt-reel-fundo {
	background-size: cover;
	background-position: top center;
	background-attachment: scroll;
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
	.gt-reel-fundo { background-attachment: fixed; }
}
.gt-reel-overlay {
	background: color-mix(in srgb, rgb(var(--color-accent-900)) 80%, transparent);
}

/* Números: valor em tamanho de destaque e o sufixo (+, %) em âmbar, como no protótipo */
.gt-num-valor {
	font-size: clamp(3rem, 6vw, 5rem);
	line-height: .95;
	letter-spacing: -.035em;
	font-variant-numeric: tabular-nums;
}
.gt-num-valor em {
	font-style: normal;
	color: rgb(var(--color-primary-500));
}
.gt-num-rotulo {
	font-size: .9375rem;
	max-width: 20ch;
}

/* Reel */
.gt-reel-play { transition: transform .25s; }
.gt-reel:hover .gt-reel-play { transform: scale(1.08); }

/* Cards de trabalho */
.gt-card { transition: background-color .3s; }
.gt-card:hover { background: rgb(var(--color-accent-800)); }

/* Texto corrido (sobre) */
.gt-prose p { margin: 0 0 1rem; }
.gt-prose p:last-child { margin-bottom: 0; }
/* Coluna de leitura: sem isso, parágrafo solto (sem Row do WPBakery) ocupa a
   largura toda do .section-container, com linhas longas demais pra ler. */
/* Largura de leitura só nos elementos de texto solto (sem Row do WPBakery em
   volta) — uma Row (ex: a galeria em mosaico) é um <div>, não bate com esses
   seletores, e continua usando a largura cheia do .section-container. */
.gt-prose > p,
.gt-prose > ul,
.gt-prose > ol,
.gt-prose > h1,
.gt-prose > h2,
.gt-prose > h3,
.gt-prose > h4,
.gt-prose > h5,
.gt-prose > h6,
.gt-prose > blockquote {
	max-width: 68ch;
}
/* Link/negrito/citação presumem fundo escuro — só no conteúdo de página
   interna (.gt-page-content, sempre em main.bg-accent-950 via page.php).
   O resumo de "Sobre" na home também usa .gt-prose, mas sobre fundo claro
   (papel), então essas cores não podem valer pra ele. */
.gt-page-content a {
	color: rgb(var(--color-primary-500));
	text-decoration-line: underline;
	text-underline-offset: 3px;
}
.gt-page-content a:hover { color: rgb(var(--color-primary-400)); }
.gt-page-content strong, .gt-page-content b { color: rgb(var(--color-accent-50)); }
.gt-page-content blockquote {
	margin: 1.75rem 0;
	padding-left: 1.25rem;
	border-left: 3px solid rgb(var(--color-primary-500));
	font-style: italic;
	color: rgb(var(--color-accent-200));
}

/* Formulário (Contact Form 7) dentro da seção de contato */
.gt-cf7 input:not([type="submit"]):not([type="checkbox"]), .gt-cf7 textarea, .gt-cf7 select {
	width: 100%; background: rgb(var(--color-accent-900)); color: rgb(var(--color-accent-50));
	border: 1px solid rgb(var(--color-accent-800)); border-radius: .75rem; padding: .75rem 1rem; font-size: .9375rem;
}

/* Seletor de data (jQuery UI) com a paleta do tema */
.ui-datepicker {
	z-index: 60 !important;
	width: 17.5rem;
	padding: .75rem;
	background: rgb(var(--color-accent-950));
	border: 1px solid rgb(var(--color-accent-800));
	border-radius: .75rem;
	box-shadow: 0 16px 32px -12px rgb(0 0 0 / .5);
	color: rgb(var(--color-accent-50));
	font-family: 'Inter', sans-serif;
}
.ui-datepicker .ui-datepicker-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: none;
	border: 0;
	padding: 0 0 .5rem;
	color: rgb(var(--color-accent-50));
}
.ui-datepicker .ui-datepicker-title {
	font-weight: 600;
	font-size: .9375rem;
	margin: 0 auto;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: static;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border-radius: 999px;
	cursor: pointer;
	color: rgb(var(--color-primary-500));
	font-size: 1.5rem;
	line-height: 1;
}
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
	background: color-mix(in srgb, rgb(var(--color-primary-500)) 15%, transparent);
}
.ui-datepicker .ui-datepicker-prev::before { content: '\2039'; }
.ui-datepicker .ui-datepicker-next::before { content: '\203A'; }
.ui-datepicker .ui-icon { display: none; }
.ui-datepicker table { width: 100%; border-collapse: collapse; margin-top: .25rem; }
.ui-datepicker th {
	padding: .25rem 0;
	font-size: .6875rem;
	font-weight: 600;
	color: rgb(var(--color-accent-400));
	text-align: center;
}
.ui-datepicker td { padding: 0; }
.ui-datepicker td a,
.ui-datepicker td span {
	display: block;
	padding: .4rem 0;
	border-radius: .5rem;
	text-align: center;
	font-size: .875rem;
	color: rgb(var(--color-accent-50));
	text-decoration: none;
}
.ui-datepicker td a:hover { background: rgb(var(--color-primary-500)); color: rgb(var(--color-accent-950)); }
.ui-datepicker .ui-state-active { background: rgb(var(--color-primary-500)) !important; color: rgb(var(--color-accent-950)) !important; }
.ui-datepicker .ui-state-disabled span,
.ui-datepicker td.ui-datepicker-unselectable span { color: rgb(var(--color-accent-700)); }
.ui-datepicker .ui-datepicker-today a { box-shadow: inset 0 0 0 1px rgb(var(--color-primary-500)); }

/* Formulário em duas colunas (campos longos ocupam a largura toda) */
.gt-form-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 1.25rem;
}
@media (min-width: 640px) {
	.gt-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gt-form-grid > p { margin: 0 0 1rem; }
.gt-form-grid .gt-full { grid-column: 1 / -1; }

/* Aceite (LGPD): checkbox e texto na mesma linha */
.gt-cf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.gt-cf7 .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	margin: 0;
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}
.gt-cf7 input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	margin: .125rem 0 0;
	flex-shrink: 0;
	accent-color: rgb(var(--color-primary-500));
}
.gt-cf7 input:focus, .gt-cf7 textarea:focus, .gt-cf7 select:focus {
	outline: 2px solid rgb(var(--color-primary-500)); outline-offset: 2px;
}
.gt-cf7 input[type="submit"] {
	background: rgb(var(--color-primary-500)); color: rgb(var(--color-accent-950));
	border: 0; border-radius: 999px; padding: .85rem 1.5rem; font-weight: 600; cursor: pointer;
}
.gt-cf7 input[type="submit"]:hover { background: rgb(var(--color-primary-600)); }
.gt-cf7 p { margin: 0 0 1rem; }

/* Logo do cabeçalho (vem de Personalizar > Identidade do site) */
.custom-logo { height: 44px; width: auto; }