/* ==========================================================================
   Vellocont — base: tokens, tipografia, utilitários e animações compartilhadas.
   Convenções de classe (usadas pelos patterns e pelo JS):
     .vc-dark              seção azul (texto claro; rótulos em cobre claro)
     .vc-deep              seção azul profundo
     .vc-soft              seção cinza suave
     .vc-section           padding vertical padrão de seção
     .vc-label             rótulo pequeno em maiúsculas ("01 — Quem somos")
     .vc-label--line       rótulo com traço à esquerda
     .vc-lead              parágrafo de abertura (maior, leve)
     .vc-em / <strong> em títulos   ênfase (peso 600) dentro de títulos leves
     .vc-accent            texto em cobre (cobre claro em fundo escuro)
     .vc-reveal            surge ao rolar (JS adiciona .is-visible)
     .vc-parallax          desloca no scroll (data via CSS var --vc-px, padrão .18)
     .vc-kenburns          zoom lento (em Capa: aplica na imagem de fundo)
     .vc-marquee           faixa correndo (JS duplica o conteúdo)
     .vc-cells             grade com divisórias de 1px (filhos = células)
     .vc-btn-ghost         botão contornado (claro em fundo escuro)
     .vc-btn-dark          botão azul
     .vc-btn-light         botão claro
     .vc-link-arrow        link em maiúsculas com sublinhado e seta
     .vc-thumb             moldura de imagem de card (zoom no hover, fundo com pattern)
     .vc-pattern           fundo com o pattern do símbolo (cobre) | .vc-pattern--light (branco)
   ========================================================================== */

:root {
	--vc-navy: #003157;
	--vc-deep: #00233F;
	--vc-copper: #9D4815;
	--vc-copper-dark: #7A3610;
	--vc-copper-light: #E0915A;
	--vc-bg: #F4F4F4;
	--vc-soft: #E9ECEF;
	--vc-ink: #14222F;
	--vc-muted: #55636F;
	--vc-line: rgba(20, 34, 47, .13);
	--vc-line-light: rgba(255, 255, 255, .14);
	--vc-ease: cubic-bezier(.2, .8, .2, 1);
	--vc-ease-io: cubic-bezier(.76, 0, .24, 1);
	--vc-rail: 0px;
	--vc-header-h: 76px;
	--vc-gutter: var(--wp--preset--spacing--gutter, clamp(1.25rem, 5vw, 5rem));
	--vc-font-head: var(--wp--preset--font-family--heading, "Stack Sans Headline", sans-serif);
	--vc-font-body: var(--wp--preset--font-family--body, Geologica, sans-serif);
}

@media (min-width: 1024px) {
	:root { --vc-rail: 62px; }
}

html { scroll-behavior: smooth; }
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
}
::selection { background: var(--vc-copper); color: #fff; }

/* Espaço da barra lateral (desktop) */
.wp-site-blocks { padding-left: var(--vc-rail); }
.admin-bar { --vc-adminbar: var(--wp-admin--admin-bar--height, 32px); }

/* Seções coladas no One Page */
.wp-site-blocks > * { margin-block-start: 0; }
.wp-block-post-content.onepage > * { margin-block: 0; }
main.wp-block-group { margin-block-start: 0; }

:where(.wp-site-blocks) [id] { scroll-margin-top: calc(var(--vc-header-h) + 10px); }

/* ------------------------------------------------------------------ Tipografia */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p { text-wrap: pretty; }
h1 strong, h2 strong, h3 strong, .vc-em { font-weight: 600; }

.vc-label {
	font-family: var(--vc-font-body);
	font-size: var(--wp--preset--font-size--x-small, .6875rem) !important;
	font-weight: 500;
	letter-spacing: .26em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--vc-copper);
	margin: 0;
}
.vc-label--line { display: flex; align-items: center; gap: 12px; }
.vc-label--line::before { content: ""; width: 34px; height: 1px; background: currentColor; flex: none; }
.vc-label--muted { color: var(--vc-muted); }

.vc-lead { font-size: clamp(1rem, 1.2vw, 1.0625rem); line-height: 1.75; color: var(--vc-muted); max-width: 640px; }

.vc-accent { color: var(--vc-copper); }

/* ------------------------------------------------------------------ Superfícies */
.vc-section { padding-block: var(--wp--preset--spacing--70); }
.vc-soft { background-color: var(--vc-soft); }

.vc-dark, .vc-deep { color: rgba(255, 255, 255, .78); }
.vc-dark { background-color: var(--vc-navy); }
.vc-deep { background-color: var(--vc-deep); }
.vc-dark :is(h1, h2, h3, h4), .vc-deep :is(h1, h2, h3, h4) { color: #fff; }
.vc-dark .vc-label, .vc-deep .vc-label,
.vc-dark .vc-accent, .vc-deep .vc-accent { color: var(--vc-copper-light); }
.vc-dark .vc-label--muted, .vc-deep .vc-label--muted { color: rgba(255, 255, 255, .5); }
.vc-dark .vc-lead, .vc-deep .vc-lead { color: rgba(255, 255, 255, .7); }
.vc-dark a:not(.wp-element-button), .vc-deep a:not(.wp-element-button) { color: inherit; }
.vc-dark a:not(.wp-element-button):hover, .vc-deep a:not(.wp-element-button):hover { color: var(--vc-copper-light); }

.vc-pattern, .vc-pattern--light { position: relative; isolation: isolate; }
.vc-pattern::before, .vc-pattern--light::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../img/pattern-cobre.svg") repeat;
	background-size: 140px 120px;
	opacity: .07;
	pointer-events: none;
}
.vc-pattern--light::before { background-image: url("../img/pattern-claro.svg"); opacity: .05; }

/* ------------------------------------------------------------------ Grade com divisórias */
.vc-cells {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 1px !important;
	background: var(--vc-line);
	border: 1px solid var(--vc-line);
}
.vc-cells > * { background: var(--vc-bg); margin: 0 !important; padding: clamp(22px, 2.4vw, 36px); transition: background .3s; }
.vc-cells > *:hover { background: #fff; }
.vc-dark .vc-cells, .vc-deep .vc-cells { background: var(--vc-line-light); border-color: var(--vc-line-light); }
.vc-dark .vc-cells > * { background: var(--vc-navy); }
.vc-deep .vc-cells > * { background: var(--vc-deep); }
.vc-dark .vc-cells > *:hover, .vc-deep .vc-cells > *:hover { background: rgba(255, 255, 255, .04); }

/* ------------------------------------------------------------------ Botões */
.wp-element-button, .wp-block-button__link { transition: background-color .25s, color .25s, border-color .25s; display: inline-flex; align-items: center; gap: .6em; }
.wp-block-button__link svg { width: 14px; height: 14px; flex: none; }

.vc-btn-ghost .wp-block-button__link {
	background: transparent !important;
	color: var(--vc-ink) !important;
	border: 1px solid rgba(20, 34, 47, .28);
}
.vc-btn-ghost .wp-block-button__link:hover { border-color: var(--vc-copper); color: var(--vc-copper) !important; }
.vc-dark .vc-btn-ghost .wp-block-button__link,
.vc-deep .vc-btn-ghost .wp-block-button__link,
.wp-block-cover .vc-btn-ghost .wp-block-button__link { color: #fff !important; border-color: rgba(255, 255, 255, .32); }
.vc-dark .vc-btn-ghost .wp-block-button__link:hover,
.vc-deep .vc-btn-ghost .wp-block-button__link:hover,
.wp-block-cover .vc-btn-ghost .wp-block-button__link:hover { border-color: #fff; color: #fff !important; }

.vc-btn-dark .wp-block-button__link { background: var(--vc-navy) !important; color: #fff !important; }
.vc-btn-dark .wp-block-button__link:hover { background: var(--vc-copper) !important; }
.vc-btn-light .wp-block-button__link { background: #fff !important; color: var(--vc-navy) !important; }
.vc-btn-light .wp-block-button__link:hover { background: var(--vc-deep) !important; color: #fff !important; }

.vc-link-arrow, .vc-link-arrow a {
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vc-copper);
	border-bottom: 1px solid rgba(157, 72, 21, .4);
	padding-bottom: 6px;
	display: inline-block;
}
.vc-link-arrow a { border: 0; padding: 0; }
.vc-link-arrow::after { content: " →"; }

/* ------------------------------------------------------------------ Imagens de card */
.vc-thumb {
	position: relative;
	overflow: hidden;
	background: var(--vc-navy) url("../img/pattern-claro.svg") repeat;
	background-size: 140px 120px;
	margin: 0;
}
.vc-thumb::after { /* símbolo central quando não há imagem destacada */
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/simbolo-branco.svg") center / 56px no-repeat;
	opacity: .5;
	z-index: 0;
}
.vc-thumb img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--vc-ease); }
.vc-thumb:hover img, a:hover .vc-thumb img, .vc-card:hover .vc-thumb img { transform: scale(1.05); }

/* ------------------------------------------------------------------ Animações */
.vc-js .vc-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .85s var(--vc-ease), transform .85s var(--vc-ease);
	transition-delay: var(--vc-delay, 0s);
}
.vc-js .vc-reveal.is-visible { opacity: 1; transform: none; }

.vc-parallax { will-change: transform; }

@keyframes vcKen { from { transform: scale(1.02); } to { transform: scale(1.13); } }
.vc-kenburns img, .vc-kenburns .wp-block-cover__image-background, img.vc-kenburns { animation: vcKen 22s ease-out forwards; }

@keyframes vcMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.vc-marquee { overflow: hidden; white-space: nowrap; }
.vc-marquee__track { display: flex; width: max-content; animation: vcMarquee 38s linear infinite; }
.vc-marquee:hover .vc-marquee__track { animation-play-state: paused; }

@keyframes vcCue { 0% { transform: translateY(0); opacity: .15; } 45% { transform: translateY(11px); opacity: 1; } 100% { transform: translateY(22px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.vc-js .vc-reveal { opacity: 1; transform: none; }
	.vc-marquee__track { animation: none; }
}

/* Foco visível */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--vc-copper-light);
	outline-offset: 3px;
}