/* ============================================================
   SUPRA. — COMPONENTES DO TEMA (excedente do theme.json)
   Glassmorphism escuro sobre os gradientes do theme.json.
   Métrica fiel ao design-system dos wireframes.
   ============================================================ */

/* ----------------------------------------------------------
   ACESSIBILIDADE — Skip link (primeiro elemento focável)
   ---------------------------------------------------------- */
.supra-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--z-toast, 500);
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--vermelho);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	text-decoration: none;
}

.supra-skip-link:focus {
	left: 1rem;
	top: 1rem;
}

:where(a, button, input, select, textarea, .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid var(--wp--preset--color--vermelho);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ============================================================
   GLASSMORPHISM — vidro escuro translúcido (header/subnav/footer)
   ============================================================ */
.supra-glass {
	background-color: rgba(0, 0, 2, 0.85);
	-webkit-backdrop-filter: saturate(140%) blur(16px);
	backdrop-filter: saturate(140%) blur(16px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.supra-glass {
		background-color: rgba(0, 0, 2, 0.98);
	}
}

@media (prefers-reduced-motion: reduce) {
	.supra-glass {
		transition: none;
	}
}

/* Venera condensada como no wireframe (font-stretch 80%). */
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading {
	font-stretch: 80%;
}

/* Painel de vidro CLARO — para o miolo/conteúdo e cards. */
.supra-panel {
	background-color: rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: saturate(120%) blur(12px);
	backdrop-filter: saturate(120%) blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--wp--custom--radius--lg, 4px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* Accordion (Sanfona) */
.supra-accordion {
	transition: all 0.3s ease;
}

.supra-accordion summary {
	cursor: pointer;
	font-weight: 500;
	font-family: var(--wp--preset--font-family--venera, 'Venera', sans-serif);
	letter-spacing: 0.05em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	list-style: none; /* remove default arrow */
	outline: none;
}

.supra-accordion summary::-webkit-details-marker {
	display: none; /* remove default arrow safari */
}

/* Ícone de (+) e (-) animado para a sanfona */
.supra-accordion summary::after {
	content: '+';
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--vermelho);
	font-weight: 300;
	transition: transform 0.3s ease;
}

.supra-accordion[open] summary::after {
	content: '-';
	transform: rotate(180deg);
}

.supra-accordion[open] summary {
	margin-bottom: 1rem;
}

.supra-accordion p {
	color: var(--wp--preset--color--cinza-claro);
	line-height: 1.6;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.supra-panel {
		background-color: rgba(20, 20, 30, 0.7);
	}
}

/* ----------------------------------------------------------
   HEADER — fixo sobreposto, vidro
   O WordPress envolve o template-part num <header class="wp-block-template-part">.
   O position:sticky precisa estar NESSE wrapper (cujo pai é .wp-site-blocks,
   alto o suficiente para o sticky valer); se ficar só no .supra-header interno,
   o pai (o wrapper) tem a altura do próprio header e o sticky "rola junto".
   ---------------------------------------------------------- */
.wp-site-blocks>header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 300;
}

/* Mantém o fundo de vidro/altura no header interno. */
.supra-header {
	position: relative;
	z-index: 300;
}

/* Compensa a barra de admin do WP (#wpadminbar, fixed 32px/46px) para o
   header sticky não ficar coberto por ela enquanto logado. Não afeta o
   visitante final (deslogado), que não tem a classe .admin-bar. */
.admin-bar .wp-site-blocks>header.wp-block-template-part {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .wp-site-blocks>header.wp-block-template-part {
		top: 46px;
	}
}

/* Largura do header igual à do CONTEÚDO das páginas (wideSize 1280px).
   O header é layout:constrained, que por padrão limita ao contentSize
   (800px) — mais estreito que as seções (align:wide, 1280px). Forçamos
   o container interno ao wideSize, centralizado, para as extremidades
   (logo / CTA) alinharem com as bordas das seções. */
.supra-header__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
}

.supra-header__nav {
	gap: clamp(1rem, 3vw, 2rem);
}

.supra-logo img {
	display: block;
	height: 32px;
	width: auto;
}

.supra-header__cta .wp-block-button {
	width: auto;
}

/* ----------------------------------------------------------
   SUBNAV STICKY DE SETORES — fixa logo abaixo do header.
   Igual ao header, o sticky precisa ficar no wrapper template-part
   (.wp-block-template-part) que o WP gera; o top = altura do header.
   ---------------------------------------------------------- */
:root {
	--supra-header-h: 80px;
	/* padding 24+24 + logo 32 */
}

/* O wrapper template-part da subnav (segundo template-part, tagName:div). */
.wp-site-blocks>.wp-block-template-part:has(> .supra-subnav) {
	position: sticky;
	top: var(--supra-header-h);
	z-index: 290;
}

/* Compensa a admin bar somando a altura do header. */
.admin-bar .wp-site-blocks>.wp-block-template-part:has(> .supra-subnav) {
	top: calc(var(--supra-header-h) + 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .wp-site-blocks>.wp-block-template-part:has(> .supra-subnav) {
		top: calc(var(--supra-header-h) + 46px);
	}
}

.supra-subnav {
	position: relative;
	z-index: 290;
	/* padding vertical uniforme (cima = baixo); o markup interno pode
	   trazer assimetria — fixamos aqui para o espaçamento ser simétrico. */
	padding-block: 0;
	/* mesmo respiro lateral do header (global padding), para a subnav
	   alinhar com o header e o conteúdo em qualquer largura de tela. */
	padding-inline: clamp(1.5rem, 5vw, 4rem);
}

/* O container interno dos links: padding vertical simétrico de 12px,
   itens centralizados verticalmente (align-items:center) e sem margens
   herdadas — evita o texto "afundar" para a base da faixa. */
.supra-subnav__inner {
	padding-block: 1.25rem !important;
	/* 12px cima e baixo, igual */
	margin-block: 0 !important;
	align-items: center !important;
	/* mesma largura do conteúdo (1280px), extremidades alinhadas. */
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto !important;
}

/* Os links (parágrafos) sem margem e com line-height controlada, para
   ocuparem a mesma caixa vertical e centralizarem na faixa. */
.supra-subnav__link,
.supra-subnav__link a {
	margin: 0 !important;
	line-height: 1.2;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* Eliminar o espaço grande ANTES do scroll: o .wp-site-blocks adiciona
   block-gap entre header → subnav → main, e o main de setor tem
   padding-top próprio. Zeramos os gaps em torno do wrapper da subnav e
   reduzimos o padding-top do main para a subnav "colar" no header e o
   hero começar logo abaixo. */
.wp-site-blocks>.wp-block-template-part:has(> .supra-subnav) {
	margin-block: 0 !important;
}

/* O <main> que vem logo após a subnav não precisa de padding-top extra:
   o hero --full já traz seu próprio respiro superior. */
.wp-site-blocks>.wp-block-template-part:has(> .supra-subnav)+main.supra-main {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.supra-subnav__link {
	margin: 0;
}

.supra-subnav__link a {
	color: var(--wp--preset--color--cinza-claro);
	text-decoration: none;
	transition: color 150ms ease;
}

.supra-subnav__link a:hover,
.supra-subnav__link a:focus-visible {
	color: var(--wp--preset--color--base);
}

/* ----------------------------------------------------------
   FOOTER — vidro com borda no topo
   ---------------------------------------------------------- */
.supra-footer.supra-glass {
	border-bottom: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Largura do footer igual à do conteúdo das páginas (1280px).
   O footer é layout:constrained (limita ao contentSize ~800px); fazemos
   seus blocos internos (grid de colunas, separador e barra inferior)
   ocuparem o mesmo trilho de 1280px centrado das seções. */
.supra-footer>.supra-footer__grid,
.supra-footer>.supra-footer__rule,
.supra-footer>.supra-footer__bottom {
	max-width: var(--supra-content-max, 1280px) !important;
	margin-inline: auto !important;
	width: 100%;
}

.supra-footer__nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.supra-footer__nav li {
	margin-bottom: 0.5rem;
}

.supra-footer__nav a {
	color: var(--wp--preset--color--cinza-claro);
	text-decoration: none;
	transition: color 150ms ease;
	font-size: 14px;
}

.supra-footer__nav a:hover,
.supra-footer__nav a:focus-visible {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

.supra-footer__rule {
	margin-block: 2rem;
}

/* ============================================================
   SEÇÕES E CARDS — métrica fiel ao wireframe
   ============================================================ */

.supra-section {
	padding-block: 5rem;
	/* 80px */
}

.supra-hero {
	padding-block: 6rem 5rem;
	/* 96 / 80 */
}

.supra-hero--setor {
	padding-block: 4rem 3rem;
	/* 64 / 48 */
}

/* ----------------------------------------------------------
   RITMO VERTICAL — escala fiel ao design-system dos wireframes
   (tokens: space-3=12px, space-6=24px, space-10=40px,
            space-12=48px, space-20=80px)
   Centralizado aqui para manter consistência em TODAS as páginas,
   evitando depender de paddings inline por bloco.
   ---------------------------------------------------------- */

/* Eyebrow (kicker): 8px abaixo, antes do H da seção (escala 8/16/24). */
.supra-eyebrow {
	margin-bottom: 0.5rem;
	/* 8px */
	font-size: 0.875rem;
}

/* Lead/subtítulo: largura de leitura e respiro inferior. */
.supra-lead {
	color: var(--wp--preset--color--cinza-claro);
	font-size: 1.125rem;
	max-width: 60ch;
	margin-bottom: 2.5rem;
	/* 40px — .hero p do wireframe */
}

/* Lead centralizado dos cabeçalhos de SEÇÃO (não do CTA, que é à esquerda). */
.supra-section .supra-lead {
	max-width: 56ch;
	margin-inline: auto;
}

/* Lead do CTA: largura de leitura ANCORADA À ESQUERDA, igual ao título e
   botões. !important + text-align:left para vencer qualquer centralização
   herdada (constrained do WP / regras de seção). */
.supra-cta .supra-lead {
	max-width: 56ch;
	margin-left: 0 !important;
	margin-right: auto !important;
	text-align: left !important;
}

.supra-section>h2.has-text-align-center,
.supra-section>.supra-eyebrow.has-text-align-center,
.supra-section>.supra-lead.has-text-align-center,
.supra-section>.alignwide>h2.has-text-align-center,
.supra-section>.alignwide>.supra-eyebrow.has-text-align-center,
.supra-section>.alignwide>.supra-lead.has-text-align-center {
	max-width: 720px;
	margin-inline: auto;
}

/* h2 de seção: 16px abaixo, antes do lead (escala 8/16/24). */
.supra-section>h2,
.supra-section>.alignwide>h2 {
	margin-bottom: 1rem;
	/* 16px */
}

/* SEPARAÇÃO HEADER -> CONTEÚDO: 48px (space-12), como .section__header.
   Aplica-se ao último elemento do "cabeçalho" (lead, ou h2 se não houver lead)
   imediatamente antes do grid/colunas/pills. */
.supra-section>.supra-lead,
.supra-section>.alignwide>.supra-lead {
	margin-bottom: 3rem;
	/* 48px */
}

/* Grids/colunas dentro de seção:
   - 1ª linha após o lead (header): o margin-bottom do lead já dá 48px,
     então a coluna não precisa de margin-top (evita espaço duplo).
   - 1ª linha logo após h2 (sem lead): 48px de separação.
   - linhas subsequentes (2ª, 3ª de cards): 48px entre si.            */
.supra-section .supra-lead+.wp-block-columns {
	margin-top: 0;
}

.supra-section>h2+.wp-block-columns,
.supra-section>.alignwide>h2+.wp-block-columns,
.supra-section .supra-eyebrow+.wp-block-columns {
	margin-top: 3rem;
	/* 48px */
}

.supra-section .wp-block-columns+.wp-block-columns {
	margin-top: 3rem;
	/* 48px entre linhas de cards */
}

/* Pills (chips de setor) e listas de desafios seguem a mesma separação. */
.supra-section .supra-lead+.supra-pills,
.supra-section .supra-lead+.supra-challenges {
	margin-top: 0;
}

.supra-section .supra-pills+.wp-block-columns {
	margin-top: 3rem;
}

/* ---- Seção de desafios: 3 colunas, item horizontal com ✗ ---- */
.supra-challenges {
	margin-top: 2rem;
	gap: 1rem;
}

.supra-challenge {
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	align-items: center;
}

.supra-challenge__x {
	margin: 0;
	color: var(--wp--preset--color--vermelho);
	font-weight: 700;
	flex-shrink: 0;
	line-height: 1;
}

.supra-challenge p:last-child {
	margin: 0;
}

/* Corpo de texto dos cards (setor E produto da home) = 14px, igual em todo
   o site. O markup do card de produto usa <p> sem classe de tamanho, então
   herdaria 18px; aqui forçamos a mesma escala dos cards de setor. */
.supra-card--setor p:not(.supra-card__label):not(.supra-card__link),
.supra-card--produto p:not(.supra-tag):not(.supra-card__link):not(.supra-card__icon) {
	font-size: 0.875rem;
	/* 14px */
	line-height: 1.6;
}

/* Título de card (h3) — mesma escala em setor e produto (1.125rem / 18px). */
.supra-card h3.wp-block-heading {
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

/* Gap consistente entre cards (grid gap do wireframe: clamp 16–32px). */
.supra-section .wp-block-columns {
	gap: clamp(1rem, 2vw, 2rem);
}

.supra-section .wp-block-columns>.wp-block-column {
	margin: 0;
	/* o gap rege o espaçamento, não margens individuais */
}

/* ---- Cards de vidro (padding 32px = space-8 do wireframe) ----
   Flex-column com gap base de 8px: ritmo interno uniforme (8/16/24px)
   e o link de ação alinhado no rodapé do card (margin-top:auto). */
.supra-card {
	height: 100%;
	/* padding interno enxuto (~16px) — o markup traz spacing|50 (32px)
	   inline, sobrescrevemos para o conteúdo aproveitar a largura do card. */
	padding: 1rem !important;
	/* 16px */
	display: flex;
	flex-direction: column;
	justify-content: flex-start !important;
	gap: 0.5rem;
	/* 8px base entre elementos */
	transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}

/* zera as margens dos blocos internos — o gap rege o ritmo. */
.supra-card>* {
	margin-block: 0;
}

/* 16px depois do ícone (separa o bloco visual do texto). */
.supra-card .supra-card__icon {
	margin-bottom: 0.5rem;
	/* +8px do gap = 16px efetivo */
}

/* Link de ação no rodapé do card, com 24px de respiro mínimo. */
.supra-card .supra-card__link {
	margin-top: auto;
	padding-top: 1rem;
	/* 16px garantido acima do link */
}

.supra-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, 0.24);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

.supra-card__icon {
	margin: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--custom--radius--md, 4px);
	background-color: rgba(237, 28, 36, 0.15);
	line-height: 1;
}

.supra-tag,
.supra-card__label {
	margin: 0;
}

.supra-card__link {
	margin-top: auto;
	margin-bottom: 0;
}

.supra-card__link a,
.supra-pill a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	line-height: 1;
	gap: 0.5rem;
}

.supra-card__link a:hover,
.supra-card__link a:focus-visible {
	color: var(--wp--preset--color--salvia);
}

/* Pills de setor — chips de vidro. */
.supra-pill {
	margin: 0;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--wp--custom--radius--full, 4px);
	background-color: rgba(255, 255, 255, 0.05);
	font-weight: 500;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.supra-pill:hover {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: rgba(151, 193, 185, 0.6);
}

/* Botão grande (hero/CTA). */
.supra-hero .wp-block-button__link,
.supra-cta .wp-block-button__link {
	padding: 1rem 2rem;
	font-size: 1rem;
}

/* ============================================================
   BOTÕES — PRIMÁRIO OUTLINE VERMELHO (+ glow sutil no hover)
   O markup primário usa has-vermelho-background-color + has-base-color
   (fundo vermelho chapado). Sobrescrevemos para outline vermelho elegante,
   sem precisar reescrever o markup das páginas.
   ============================================================ */
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-vermelho-background-color,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: transparent !important;
	color: var(--wp--preset--color--vermelho) !important;
	border: 1px solid var(--wp--preset--color--vermelho);
	border-radius: 4px;
	transition: background-color 150ms ease, box-shadow 200ms ease, color 150ms ease, border-color 150ms ease;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	background-color: rgba(237, 28, 36, 0.08) !important;
	color: var(--wp--preset--color--base) !important;
	border-color: var(--wp--preset--color--vermelho);
	/* glow sutil */
	box-shadow: 0 0 0 1px var(--wp--preset--color--vermelho),
		0 0 16px rgba(237, 28, 36, 0.35);
}

/* Botão secundário — outline branco/cinza discreto sobre fundo escuro. */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: transparent;
	border-radius: 4px;
	transition: background-color 150ms ease, border-color 150ms ease, box-shadow 200ms ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--wp--preset--color--base);
}

/* CTA final: faixa full-width escura, conteúdo a 1280px alinhado à ESQUERDA. */
.supra-cta {
	text-align: left;
	background-color: rgba(0, 0, 2, 0.35);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.supra-cta h2 {
	margin-bottom: 1rem;
	/* 16px — wireframe .cta-section h2 */
}

.supra-cta .supra-lead {
	margin-bottom: 2.5rem;
	/* 40px */
}

/* Stat-bar: faixa com itens centralizados, gap 24px, números 28–40px. */
.supra-statbar .wp-block-columns {
	gap: clamp(1rem, 2vw, 1.5rem);
	/* 16–24px */
}

.supra-statbar .supra-stat__number {
	font-size: clamp(2.5rem, 5vw, 4rem) !important;
	line-height: 1;
	margin-bottom: 0.25rem;
	white-space: nowrap;
	/* 4px — .stat-bar__label margin-top */
}

.supra-statbar .supra-stat__number+p {
	margin: 0;
}

/* Citação de depoimento. */
.supra-card__quote {
	margin: 0;
	border: 0;
	padding: 0;
	font-style: italic;
	line-height: 1.75;
}

.supra-card__quote cite {
	display: block;
	margin-top: 1.5rem;
	font-style: normal;
	font-size: 0.875rem;
	color: var(--wp--preset--color--salvia);
}

/* ============================================================
   FORMULÁRIO DE CONTATO (.supra-form)
   ============================================================ */
.supra-form p {
	margin: 0 0 1.25rem;
}

.supra-form label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--cinza-claro);
}

.supra-form input,
.supra-form textarea,
.supra-form select {
	width: 100%;
	margin-top: 0.375rem;
	padding: 0.75rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--base);
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--wp--custom--radius--md, 4px);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.supra-form input::placeholder,
.supra-form textarea::placeholder {
	color: var(--wp--preset--color--cinza);
}

.supra-form input:focus,
.supra-form textarea:focus,
.supra-form select:focus {
	outline: none;
	border-color: var(--wp--preset--color--vermelho);
	box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.2);
}

.supra-form textarea {
	resize: vertical;
	min-height: 120px;
}

/* Botão do formulário — mesmo tratamento outline vermelho + glow. */
.supra-form button[type="submit"] {
	display: inline-block;
	padding: 0.875rem 2rem;
	font-weight: 700;
	color: var(--wp--preset--color--vermelho);
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--vermelho);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 150ms ease, box-shadow 200ms ease, color 150ms ease;
}

.supra-form button[type="submit"]:hover,
.supra-form button[type="submit"]:focus-visible {
	background-color: rgba(237, 28, 36, 0.08);
	color: var(--wp--preset--color--base);
	box-shadow: 0 0 0 1px var(--wp--preset--color--vermelho),
		0 0 16px rgba(237, 28, 36, 0.35);
}

.supra-form button[type="submit"]:disabled {
	opacity: 0.55;
	cursor: wait;
	box-shadow: none;
}

/* Honeypot anti-spam — fora do fluxo visual, inacessível a humanos. */
.supra-form__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Mensagem de estado do envio (sucesso/erro) — preenchida via JS. */
.supra-form__msg {
	padding: 0.875rem 1rem;
	font-size: 0.9375rem;
	border-radius: var(--wp--custom--radius--md, 4px);
	border: 1px solid transparent;
}

.supra-form__msg--ok {
	color: var(--wp--preset--color--salvia);
	background-color: rgba(151, 193, 185, 0.1);
	border-color: rgba(151, 193, 185, 0.4);
}

.supra-form__msg--erro {
	color: var(--wp--preset--color--base);
	background-color: rgba(237, 28, 36, 0.12);
	border-color: rgba(237, 28, 36, 0.5);
}

/* Utilitárias dos painéis da página Contato (markup sem estilo inline). */
.supra-panel-p60 {
	padding: var(--wp--preset--spacing--60);
}

.supra-panel-p50 {
	padding: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {

	/* Replica o comportamento WP de coluna com largura fixa
	   (flex-basis inline + [style*=flex-basis]{flex-grow:0}). */
	.supra-col-58 {
		flex-basis: 58% !important;
		flex-grow: 0 !important;
	}
}

/* ============================================================
   COMPONENTES ADICIONAIS (fidelidade wireframe)
   ============================================================ */

/* Card de diferencial — borda superior vermelha. */
.supra-card--diferencial {
	border-top: 3px solid var(--wp--preset--color--vermelho);
}

/* Feature-list com marcador ✓ vermelho. */
.supra-featurelist {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.supra-featurelist li {
	position: relative;
	padding-left: 1.75rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--cinza-claro);
}

.supra-featurelist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--vermelho);
	font-weight: 700;
}

/* Placeholder de imagem (conteúdo pendente do cliente). */
.supra-imgph {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px dashed rgba(255, 255, 255, 0.2);
	border-radius: var(--wp--custom--radius--lg, 4px);
	color: var(--wp--preset--color--cinza-claro);
}

.supra-imgph p {
	margin: 0;
	opacity: 0.7;
}

/* ============================================================
   LAYOUT FIEL AO WIREFRAME — heros/seções full-bleed
   O fundo sangra de borda a borda (align:full); o conteúdo
   respira num container interno (align:wide, 1280px).
   ============================================================ */

/* --- FULL-BLEED REAL (técnica viewport, à prova de container) ---
   O <main> é constrained e fica dentro do root padding lateral do
   theme.json. As variáveis --wp--style--root--padding-* nem sempre
   estão disponíveis no escopo do main, então NÃO dependemos delas.
   Usamos 100vw + margin-inline:calc(50% - 50vw): empurra o elemento
   exatamente até as bordas da viewport, qualquer que seja o padding.
   `!important` para vencer a regra constrained do core do WP.       */
/* Contenção do scroll horizontal do full-bleed (100vw) aplicada ao <html>,
   NÃO ao .supra-main: overflow em ancestral do header sticky rouba o
   scroll-port e quebra o position:sticky do cabeçalho. No <html> contém o
   sangramento sem afetar o sticky. */
html {
	overflow-x: clip;
}

.supra-main .alignfull,
.supra-main .supra-hero--full {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Última seção encosta no footer (sem faixa vazia).
   O WP envolve o conteúdo num .entry-content (.wp-block-post-content)
   DENTRO do .supra-main. O gap vem do padding-bottom do main + do
   block-gap/padding do .entry-content após o último <section>.
   Zeramos o padding-bottom de ambos e a margem do último filho. */
.supra-main,
.supra-main>.entry-content,
.supra-main>.wp-block-post-content {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

.supra-main>.entry-content> :last-child,
.supra-main>.wp-block-post-content> :last-child,
.supra-main>.entry-content>.supra-cta,
.supra-main>.wp-block-post-content>.supra-cta {
	margin-bottom: 0 !important;
}

/* Ocultar parágrafos vazios deixados no final do editor que empurram o footer */
.supra-main>.wp-block-post-content > p:empty:last-child,
.supra-main>.entry-content > p:empty:last-child {
	display: none !important;
}

/* FAIXA AZUL ENTRE A ÚLTIMA SEÇÃO E O FOOTER — cobre todas as causas:
   1) block-gap do .wp-site-blocks entre <main> e <footer>;
   2) padding-bottom do <main> (templates de setor/contato/plataforma);
   3) margin/padding residual do entry-content e da última seção. */

/* (1) zera o gap/margens entre os filhos diretos do .wp-site-blocks no topo e fim */
.wp-site-blocks>main.supra-main {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.wp-site-blocks>footer.wp-block-template-part {
	margin-top: 0 !important;
}

/* (2)+(3) o entry-content e seu último filho não empurram o footer */
.supra-main>.entry-content,
.supra-main>.wp-block-post-content {
	margin-block: 0 !important;
	padding-bottom: 0 !important;
}

.supra-main .entry-content> :last-child {
	margin-bottom: 0 !important;
}

.supra-footer {
	margin-top: 0 !important;
}

/* ============================================================
   LARGURA UNIFORME DE SEÇÃO — 1280px, MESMA borda esquerda em TODAS
   ------------------------------------------------------------
   Há 3 tipos de seção no markup:
   (A) align:wide direto (.supra-main > .alignwide)
   (B) align:full + group .alignwide interno (heros, section--alt, cta)
   (C) align:full sem inner (statbar--bar)
   Para que a borda esquerda do CONTEÚDO seja IDÊNTICA nos 3, definimos
   um único "trilho": max-width 1280px, centrado, com o MESMO padding
   lateral aplicado POR DENTRO (clamp 1.5rem,5vw,4rem). Assim a coluna de
   conteúdo começa exatamente na mesma posição X em qualquer seção.
   ============================================================ */
:root {
	--supra-content-max: var(--wp--style--global--wide-size, 1280px);
	--supra-gutter: clamp(1.5rem, 5vw, 4rem);
}

/* IMPORTANTE: o WP envolve as seções num .entry-content (.wp-block-post-content)
   DENTRO do .supra-main. Por isso os seletores miram tanto o filho direto do
   main quanto via .entry-content — senão as seções .alignwide (que são netas)
   ficam de fora da regra e desalinham. */

/* ============================================================
   TRILHO ÚNICO DE CONTEÚDO — borda esquerda IDÊNTICA em toda seção
   ------------------------------------------------------------
   Regra única: a "coluna de conteúdo" de qualquer seção mede no máximo
   (1280px + 2×gutter) e é centrada. O gutter é padding POR DENTRO. Como
   TODAS as seções (wide e o .alignwide interno dos full) usam exatamente
   este mesmo box, a borda esquerda coincide em qualquer largura de tela.
   box-sizing:border-box garante que o padding entre no cálculo do max-width.
   ============================================================ */

/* (A) QUALQUER seção .alignwide dentro do main (em qualquer nível de
   aninhamento — descendente, não filho direto: cobre o wrapper .entry-content
   sem depender da classe dele). EXCETO painéis e colunas internas.
   (B) o container .alignwide interno das seções full.
   Ambos no MESMO box → mesma borda esquerda. */
.supra-main .alignwide:not(.wp-block-column):not(.supra-panel):not(.supra-statbar):not(.wp-block-columns) {
	box-sizing: border-box !important;
	max-width: calc(var(--supra-content-max) + 2 * var(--supra-gutter)) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--supra-gutter) !important;
	padding-right: var(--supra-gutter) !important;
}

/* Neutraliza explicitamente o has-global-padding do WP nessas seções
   (ele aplica padding lateral próprio que competia com o nosso gutter). */
.supra-main .alignwide.has-global-padding:not(.wp-block-column):not(.supra-panel):not(.supra-statbar) {
	padding-left: var(--supra-gutter) !important;
	padding-right: var(--supra-gutter) !important;
}

/* Painéis (.supra-panel / .supra-statbar) NÃO recebem o gutter por dentro
   (têm padding próprio); apenas limitam e centralizam. Seletor descendente
   (qualquer nível) — o wrapper post-content agora é 'default' e não impõe
   mais largura, então as seções regem a própria largura. */
.supra-main .alignwide.supra-panel,
.supra-main .alignwide.supra-statbar {
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: calc(var(--supra-content-max) + 2 * var(--supra-gutter)) !important;
	margin-inline: auto !important;
}

/* Seção .alignfull: só o fundo sangra (100vw); sem padding lateral na
   section — o respiro vai no .alignwide interno (acima). */
.supra-main .alignfull,
.supra-main .supra-hero--full {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Stat-bar full: as colunas no mesmo trilho. */
.supra-main .alignfull.supra-statbar>.wp-block-columns {
	box-sizing: border-box !important;
	max-width: calc(var(--supra-content-max) + 2 * var(--supra-gutter)) !important;
	margin-inline: auto !important;
	padding-left: var(--supra-gutter) !important;
	padding-right: var(--supra-gutter) !important;
}

/* CTA full: os filhos diretos vivem no .alignwide interno — mesmo trilho. */

/* CTA agora tem um group .alignwide interno (como os heros), então usa a
   MESMA regra unificada de seção full (.alignfull > .alignwide). Não há
   mais caso especial — o conteúdo do CTA fica no trilho de 1280px com a
   mesma borda esquerda das demais seções; o texto à esquerda vem do
   text-align:left de .supra-cta. */

/* Hero full-width: fundo escuro chapado sangrando, sem painel de vidro.
   Métrica do wireframe: padding-block 80/64px, conteúdo alinhado à esquerda. */
.supra-hero--full {
	background-color: rgba(0, 0, 2, 0.55);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding-block: 5rem 4rem;
	/* 80 / 64 — wireframe */
}

/* ALINHAMENTO DO HERO — todos os elementos à ESQUERDA, com a mesma
   margem-esquerda. O layout "constrained" do WP aplica margin-inline:auto
   a cada filho conforme seu próprio max-width, o que os centraliza em
   posições X diferentes (eyebrow, h1, lead cada um num ponto). Anulamos
   isso forçando margin-inline:0 — assim todos partem da borda esquerda
   do container, como no .hero__content do wireframe.                    */
.supra-hero--full>.alignwide>*,
.supra-hero--full>.alignwide>.wp-block-buttons,
.supra-hero--full .wp-block-cover__inner-container > .alignwide > *,
.supra-hero--full .wp-block-cover__inner-container > .alignwide > .wp-block-buttons {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Larguras de leitura (mantêm a quebra de linha, mas ancoradas à esquerda). */
.supra-hero--full .supra-eyebrow,
.supra-hero--full .supra-lead {
	max-width: 62ch;
}

.supra-hero--full h1,
.supra-hero--full h1.wp-block-heading {
	max-width: 760px;
	margin-bottom: 1.5rem;
}

.supra-hero--full .supra-lead {
	margin-bottom: 2rem;
	/* respiro antes dos botões */
}

/* Hero de setor/produto: mais compacto, com respiro de topo suficiente
   para não colar no header sticky (~72px). */
.supra-hero--full.supra-hero--setor {
	padding-block: 4rem 3rem;
	/* 64 / 48 */
}

/* História / texto-institucional em 2 colunas (texto | imagens). */
.supra-history>.wp-block-columns {
	gap: 4rem;
	align-items: start;
}

@media (max-width: 781px) {
	.supra-history>.wp-block-columns {
		gap: 2rem;
	}
}

/* Stat-bar como FAIXA (não card de vidro flutuante): borda no topo. */
/* Faixa de totalizadores full-width que se FUNDE com as seções vizinhas:
   sem fundo diferenciado, sem bordas claras, sem cantos/sombra. Cola no
   hero acima e na seção abaixo, sem intervalos em branco. */
.supra-statbar--bar {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* A faixa não deve ter gap (block-gap) acima/abaixo dela dentro do
   .entry-content — cola nas seções vizinhas. */
.supra-statbar--bar {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.supra-statbar--bar+* {
	margin-top: 0 !important;
}

/* Seção alternada (section--alt do wireframe): leve diferenciação de fundo. */
.supra-section--alt {
	background-color: rgba(255, 255, 255, 0.02);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* ============================================================
   WCAG — contraste, foco e alvos de toque
   ============================================================ */

/* Lead e textos de apoio: garantir contraste AA (>= 4.5:1) sobre o fundo
   escuro — cinza-claro (#a8a8ac) sobre preto passa em corpo de texto. */
.supra-hero--full .supra-lead {
	color: rgba(255, 255, 255, 0.82);
}

/* Eyebrow em sálvia tem bom contraste; reforço de peso para legibilidade. */
.supra-eyebrow {
	font-weight: 500;
}

/* Foco visível reforçado em links de card e pílulas (teclado). */
.supra-card a:focus-visible,
.supra-pill:focus-within {
	outline: 2px solid var(--wp--preset--color--salvia);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Alvos de toque >= 44px: links de navegação, botões e CTA de card. */
.supra-card__link a,
.supra-subnav__link a,
.supra-footer__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	gap: 0.5rem;
}

.wp-block-navigation-item__content,
.wp-block-button__link,
.supra-pill {
	font-family: var(--font-family-display, 'Venera', sans-serif) !important;
	font-size: 14px !important;
}

.supra-card__label,
.supra-card h3,
.supra-card p,
.supra-card .wp-block-heading,
.supra-card .has-text-align-center,
.supra-card .aligncenter {
	text-align: left !important;
	justify-content: flex-start !important;
	margin-inline: 0 !important;
}

.supra-card__label,
.supra-card h3.wp-block-heading,
.supra-card h3 {
	font-family: var(--font-family-display, 'Venera', sans-serif);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
}

.supra-card p:empty,
.supra-card br {
	display: none !important;
}

.supra-card__link a {
	font-family: var(--font-family-display, 'Venera', sans-serif) !important;
	font-size: 12px !important;
	letter-spacing: -0.015em !important;
}

.wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}


/* Pílulas de setor como alvo de toque adequado. */
.supra-pill {
	min-height: 40px;
	display: inline-flex;
	align-items: center;
}

/* Respeitar quem reduz movimento: desliga hovers de elevação. */
@media (prefers-reduced-motion: reduce) {

	.supra-card,
	.supra-card:hover,
	.supra-pill,
	.supra-pill:hover {
		transition: none;
		transform: none;
	}
}

/* ============================================================
   SEÇÃO 6 — "Especialistas em distribuição regulada"
   Título do card (h4) com mesmo tamanho do corpo, bold e
   line-height compacto (110%), criando hierarquia por peso.
   ============================================================ */
.supra-card--setor h4,
.supra-card--setor .wp-block-heading {
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 0.5rem;
}

/* ============================================================
   ÍCONES LUCIDE (MONOCOLOR SVG INLINE)
   ============================================================ */
.supra-icon {
	display: inline-block;
	vertical-align: middle;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	flex-shrink: 0;
}

.supra-challenge__icon { color: var(--wp--preset--color--salvia); width: 28px; height: 28px; }
.supra-card__icon      { color: var(--wp--preset--color--vermelho); width: 32px; height: 32px; }
.supra-stat__icon      { color: var(--wp--preset--color--base); width: 32px; height: 32px; }

/* Generic Red Icon Wrapper */
.supra-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: rgba(237, 28, 36, 0.1);
    color: var(--wp--preset--color--vermelho);
    border-radius: 8px;
    flex-shrink: 0;
}

/* ============================================================
   HERO HOME (Background Image)
   ============================================================ */
.supra-hero {
    background-image: url('../images/banner-hero-home.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    z-index: 1;
}

.supra-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Dark overlay to make text readable */
    z-index: -1;
}

/* ============================================================
   HERO DYNAMIC OVERRIDES (WP:COVER)
   ============================================================ */
.supra-hero--dynamic {
    background-image: none !important;
}
.supra-hero--dynamic.wp-block-cover {
    min-height: unset;
    padding-inline: 0;
}
/* Hide FSE overlay to let original CSS ::before overlay shine through */
.supra-hero--dynamic .wp-block-cover__background {
    display: none !important;
}
/* Push FSE image behind the original CSS ::before overlay */
.supra-hero--dynamic .wp-block-cover__image-background {
    z-index: -2 !important;
}