/*
Theme Name:   ESW Site Base Theme
Theme URI:    https://oedusantana.com
Author:       ES Soluções Web
Author URI:   https://oedusantana.com
Description:  Tema institucional nativo da base de sites de conversão. Esqueleto visual
               editorial premium reutilizável entre clientes (tipografia, composição,
               cards, formulário, botões); cor de acento e identidade final continuam
               decididas por cliente — troque as variáveis em :root abaixo.
Version:      1.4.29
Requires at least: 6.4
Requires PHP: 7.4
License:      GPLv2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  sc-base-theme

Projeto gerado por Edu Santana (ES Soluções Web e MKT LTDA) | oedusantana.com
*/

/* ==========================================================================
   Tokens — ponto único de reskin por cliente. Cor/tipografia trocam aqui,
   o resto do arquivo consome só estas variáveis.
   ========================================================================== */

/* Fonte dos títulos (2026-09-20, pedido do operador): Plus Jakarta Sans, sem serifa e bem
   encorpada (peso 800), no lugar da Georgia. Hospedada no próprio tema (variável, pesos 500 a
   800, subconjunto latino, 27KB): sem pedir nada ao Google (mais rápido e sem enviar o IP do
   visitante, LGPD) e `font-display: swap` pra o texto aparecer na hora com a fonte de sistema.
   O texto corrido segue na fonte de sistema, como estava. Licença OFL (livre pra uso comercial). */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 500 800;
	font-display: swap;
	src: url("assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* 2026-09-13, correção do operador: pele Almega Ativos é azul e branca —
	   os tokens de fundo/borda/texto ainda estavam no placeholder bege de
	   fábrica da base (nunca tinham sido trocados). Fundo principal branco,
	   fundo alternado em cinza clarinho gelo (pedido explícito do operador,
	   nunca bege/creme), bordas e texto na família fria (azul-acinzentado). */
	--scbase-cor-fundo: #ffffff;
	--scbase-cor-fundo-alt: #eef2f7;
	--scbase-cor-superficie: #ffffff;
	--scbase-cor-texto: #1a2233;
	--scbase-cor-texto-suave: #5b6472;
	--scbase-cor-texto-sobre-escuro: #eef2f7;

	/* 2026-09-10, correção do operador: o azul escuro é a matriz/principal da marca;
	   o azul claro (#0447b5) vira só o tom de hover/link/destaque, nunca a base. */
	--scbase-cor-primaria: #1b2b63;
	--scbase-cor-primaria-hover: #0447b5;
	--scbase-cor-sobre-primaria: #ffffff;
	/* 2026-09-13: acento também migrado pra família azul (era bronze/bege herdado
	   da base — fora da paleta azul e branca da Almega). Azul vivo do degradê do
	   logo, só pra números/selo/destaque pontual, nunca fundo de seção. */
	--scbase-cor-acento: #2f6fed;
	/* 2026-09-20 (pedido do operador): o azul de acento (#2f6fed) some sobre o azul-marinho
	   (contraste ~2.6:1). Títulos sobre FUNDO AZUL usam este tom mais claro (~7:1). */
	--scbase-cor-titulo-sobre-escuro: #9dbcff;
	/* Botão "Saiba mais" dos cards de Área de Atuação (2026-09-03) — cor própria,
	   não amarrada à primária: cada cliente pode diferenciar o CTA do resto da pele
	   (ex.: um verde diferente do verde institucional). Sem override no cliente,
	   cai na primária mesmo. */
	/* 2026-09-10, pedido do operador: todo botão de ação do site em verde escuro
	   (mesma família do botão flutuante de WhatsApp), não mais a primária azul. */
	--scbase-cor-cta: #1f5c38;
	--scbase-cor-cta-hover: #163f27;
	--scbase-cor-sobre-cta: #ffffff;

	--scbase-cor-borda: #dde3ec;
	--scbase-cor-borda-forte: #c3ccd9;

	--scbase-sombra-card: 0 1px 2px rgba(20, 30, 50, 0.05), 0 12px 28px rgba(20, 30, 50, 0.08);

	--scbase-raio: 10px;
	--scbase-raio-grande: 20px;
	--scbase-raio-pill: 999px;

	--scbase-fonte-titulo: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--scbase-fonte-corpo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--scbase-espaco-secao: 88px;
}

/* ==========================================================================
   Reset + base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Navegação suave (2026-09-06, pedido do operador) — rolagem entre âncoras
   com transição, não "salto seco". Respeita quem prefere menos movimento. */
html {
	scroll-behavior: smooth;
}

/* 2026-09-13, pele Almega Ativos: menu principal linka âncoras da própria Home
   (Como Funciona, Nossa Equipe) — sem isso o header sticky cobre o topo da
   seção ao saltar. */
#como-funciona,
#equipe {
	scroll-margin-top: 110px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--scbase-cor-fundo);
	font-family: var(--scbase-fonte-corpo);
	font-size: 16px;
	line-height: 1.6;
	color: var(--scbase-cor-texto);
}

/* Revelação suave das seções ao rolar (2026-09-06) — fade + leve subida.
   `menu-mobile.js`/`scroll-reveal.js` cuidam de quando adicionar `.is-visible`. */
.scbase-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.scbase-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.scbase-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* 2026-09-10: link no corpo do texto usa o azul claro (destaque/hover), não a
   matriz escura — pedido explícito do operador. */
a {
	color: var(--scbase-cor-primaria-hover);
}

h1,
h2,
h3,
h4 {
	font-family: var(--scbase-fonte-titulo);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--scbase-cor-texto);
	margin: 0 0 0.5em;
}

h1 {
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
}

h2 {
	font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
}

h3 {
	font-size: 1.2rem;
	letter-spacing: -0.005em;
}

p {
	color: var(--scbase-cor-texto-suave);
}

.scbase-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.scbase-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--scbase-cor-primaria);
	color: var(--scbase-cor-sobre-primaria);
	padding: 12px 20px;
	border-radius: 0 0 var(--scbase-raio) 0;
}

.scbase-skip-link:focus {
	left: 0;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.scbase-icon {
	display: inline-flex;
	flex: none;
	width: 1em;
	height: 1em;
	color: currentColor;
}

.scbase-icon svg {
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   Botões — ponto único de estilo de CTA, reaproveitado em hero, faixa,
   mosaico, cards, formulário.
   ========================================================================== */

.scbase-cta,
.scbase-hero-cta,
.scbase-form-contato button[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--scbase-cor-cta);
	color: var(--scbase-cor-sobre-cta);
	font-family: var(--scbase-fonte-corpo);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	border: none;
	/* 2026-09-10, pedido do operador: botão quadrado, não mais pílula. */
	border-radius: 8px;
	padding: 14px 28px;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.scbase-cta:hover,
.scbase-hero-cta:hover,
.scbase-form-contato button[type="submit"]:hover {
	background: var(--scbase-cor-cta-hover);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(20, 40, 42, 0.25);
}

.scbase-cta-secundario {
	background: transparent;
	color: var(--scbase-cor-primaria);
	box-shadow: inset 0 0 0 1.5px var(--scbase-cor-primaria);
}

.scbase-cta-secundario:hover {
	background: var(--scbase-cor-primaria);
	color: var(--scbase-cor-sobre-primaria);
	box-shadow: none;
}

/* ==========================================================================
   Barra superior + header
   ========================================================================== */

.scbase-barra-superior {
	background: var(--scbase-cor-primaria);
	color: var(--scbase-cor-texto-sobre-escuro);
	font-size: 13.5px;
}

/* Mesmo bug de base do `.scbase-page` (padding shorthand zera as laterais
   quando o elemento também é `.scbase-container`) — corrigido aqui também
   pra faixa de tablet (783-1200px), onde `.scbase-container` ainda não tem
   whitespace de margin:auto sobrando (só aparece a partir de 1200px). */
.scbase-barra-superior-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 24px;
	padding-top: 9px;
	padding-bottom: 9px;
}

.scbase-barra-contato,
.scbase-barra-redes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin: 0;
}

.scbase-barra-superior a {
	color: inherit;
	text-decoration: none;
}

.scbase-barra-superior a:hover {
	text-decoration: underline;
}

/* Botões de rede social (2026-09-03) — ícone real da marca (scbase_render_redes_sociais()),
   círculo translúcido, reaproveitado igual no topo e no rodapé (ambos com fundo escuro). */
.scbase-rede-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: inherit;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.scbase-rede-social .scbase-icon {
	width: 15px;
	height: 15px;
}

.scbase-rede-social:hover {
	background: rgba(255, 255, 255, 0.28);
	text-decoration: none;
	transform: translateY(-2px);
}

/* Bug real (2026-09-06): o gap só valia pro <span> (telefone/whatsapp sem
   link); o <a> do e-mail (e agora telefone/whatsapp também, virou link) não
   tinha `display:inline-flex` nenhum — ícone saía colado no texto. */
.scbase-barra-contato span,
.scbase-barra-contato a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	opacity: 0.95;
}

.scbase-barra-contato .scbase-icon,
.scbase-barra-contato a .scbase-icon {
	opacity: 0.85;
}

/* Sticky (2026-09-04, decisão do operador — Camada 1 fixa, todo site desta
   base): só a barra branca (logo + menu) gruda no topo durante o scroll; a
   barra superior escura (telefone/e-mail/redes) rola normal e some, porque
   `.scbase-header` é um elemento IRMÃO dela no DOM (ver header.php), não um
   filho — `position: sticky` aqui não afeta a barra superior. `top: 0` (não
   soma altura da barra superior) é intencional: assim que a barra superior
   sai da tela rolando, o header já está exatamente no topo, sem gap. z-index
   50 fica abaixo do botão flutuante de WhatsApp (100) e do skip-link (1000),
   acima do conteúdo da página. */
.scbase-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--scbase-cor-superficie);
	border-bottom: 1px solid var(--scbase-cor-borda);
}

.scbase-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	/* Altura reduzida (2026-09-04, decisão do operador — Camada 1 fixa):
	   22px→12px de padding vertical, adequado a um header que fica fixo na
	   tela o tempo todo. Mesmo bug de base do `.scbase-page` — padding-top/
	   padding-bottom isolados, nunca o shorthand `Ypx 0` (este elemento
	   também é `.scbase-container`). */
	padding-top: 12px;
	padding-bottom: 12px;
}

/* Correção de base (2026-08-31, cliente Portela Cunha Advogados): the_custom_logo()
   nunca teve teto de altura — com logo de imagem real (não logotipo tipográfico) o
   header ficava do tamanho da imagem original enviada. Camada 1 (esqueleto), não pele:
   todo cliente com logo em imagem herda este teto; só a altura muda por breakpoint. */
.scbase-branding {
	display: flex;
	align-items: center;
}

.scbase-branding .custom-logo-link {
	display: block;
}

.scbase-branding img.custom-logo {
	/* 48px→38px (2026-09-04, Camada 1 fixa): acompanha o header mais compacto. */
	height: 38px;
	width: auto;
	max-width: 190px;
	object-fit: contain;
}

.scbase-footer-col-marca img.custom-logo {
	height: 40px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
}

.scbase-site-title {
	font-family: var(--scbase-fonte-titulo);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--scbase-cor-texto);
	text-decoration: none;
	letter-spacing: -0.01em;
}

/* Hamburguer do menu mobile (2026-09-05) — escondido no desktop, vira o
   gatilho do menu no mobile (ver @media 782px). 3 barras simples, sem SVG. */
.scbase-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	flex: none;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
}

.scbase-menu-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--scbase-cor-texto);
}

/* Bug real (2026-09-05): o botão de seta do submenu mobile (menu-mobile.js) é
   criado pelo JS em QUALQUER largura de tela, mas só ganhava posição/estilo
   dentro do @media 782px — no desktop sobrava um <button> nu com a borda
   padrão do navegador, visível como uma "caixinha" ao lado do item de menu
   com submenu. Escondido por padrão; o @media reabre. */
.scbase-submenu-toggle {
	display: none;
}

/* Wrapper nav + botão CTA (2026-09-18, pedido do operador: botão de WhatsApp
   "ao lado" do último item do menu, não só no topo/rodapé). Substitui o
   `<nav>` como filho direto de `.scbase-header-inner` sem mudar o layout
   existente (`space-between` entre logo e este bloco) — nenhum seletor da
   base usava `.scbase-header-inner > .scbase-menu-principal` diretamente. */
.scbase-header-nav-area {
	display: flex;
	align-items: center;
	gap: 28px;
}

.scbase-menu-cta {
	flex: none;
	padding: 10px 18px;
	font-size: 0.9rem;
}

.scbase-menu-principal ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 32px;
	/* Bug de base (2026-09-03): "wrap" aqui deixava o último item cair pra uma 2ª
	   linha mesmo sobrando espaço de sobra no header — o cálculo de largura do nav
	   como flex item some quando o filho (esta ul) também quebra linha. O fallback
	   mobile já vira coluna via @media abaixo, então nowrap no desktop é seguro. */
	flex-wrap: nowrap;
}

.scbase-menu-principal li {
	position: relative;
}

.scbase-menu-principal > ul > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 0;
	color: var(--scbase-cor-texto);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease;
}

/* Hover dos itens do menu principal (2026-09-05, pedido do operador): em vez de
   um sublinhado simples, 4 cantinhos em L aparecem/crescem ao redor do link
   (efeito "corner brackets"). `::before` com 8 camadas de gradiente (2 por
   canto: um traço horizontal + um vertical) — inset negativo dá respiro entre
   o texto e o quadro. */
.scbase-menu-principal > ul > li > a::before {
	content: "";
	position: absolute;
	inset: -8px -10px;
	background-image:
		linear-gradient(var(--scbase-cor-acento), var(--scbase-cor-acento)),
		linear-gradient(var(--scbase-cor-acento), var(--scbase-cor-acento)),
		linear-gradient(var(--scbase-cor-acento), var(--scbase-cor-acento)),
		linear-gradient(var(--scbase-cor-acento), var(--scbase-cor-acento)),
		linear-gradient(var(--scbase-cor-acento), var(--scbase-cor-acento)),
		linear-gradient(var(--scbase-cor-acento), var(--scbase-cor-acento)),
		linear-gradient(var(--scbase-cor-acento), var(--scbase-cor-acento)),
		linear-gradient(var(--scbase-cor-acento), var(--scbase-cor-acento));
	background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
	background-repeat: no-repeat;
	background-size: 10px 2px, 2px 10px, 10px 2px, 2px 10px, 10px 2px, 2px 10px, 10px 2px, 2px 10px;
	opacity: 0;
	transform: scale(0.82);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.scbase-menu-principal > ul > li > a:hover::before,
.scbase-menu-principal > ul > li > a:focus-visible::before {
	opacity: 1;
	transform: scale(1);
}

/* Seta indicando que o item tem submenu (2026-09-03) — ícone real (chevron-down,
   banco de ícones da base), não um caractere digitado; currentColor via mask,
   acompanha a cor do texto/hover sozinho. */
.scbase-menu-principal > ul > li.menu-item-has-children > a::after {
	content: "";
	width: 11px;
	height: 11px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-image: url("assets/icons/chevron-down.svg");
	mask-image: url("assets/icons/chevron-down.svg");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	opacity: 0.65;
	transition: transform 0.18s ease;
}

.scbase-menu-principal > ul > li.menu-item-has-children:hover > a::after,
.scbase-menu-principal > ul > li.menu-item-has-children:focus-within > a::after {
	transform: rotate(-180deg);
}

.scbase-menu-principal > ul > li > a:hover {
	color: var(--scbase-cor-primaria);
}

.scbase-menu-principal .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--scbase-cor-superficie);
	border: 1px solid var(--scbase-cor-borda);
	border-radius: var(--scbase-raio);
	box-shadow: var(--scbase-sombra-card);
	padding: 8px 0;
	min-width: 230px;
	flex-direction: column;
	gap: 0;
	z-index: 10;
}

.scbase-menu-principal li:hover > .sub-menu,
.scbase-menu-principal li:focus-within > .sub-menu {
	display: flex;
}

.scbase-menu-principal .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

.scbase-menu-principal .sub-menu li a {
	display: block;
	padding: 9px 18px;
	color: var(--scbase-cor-texto);
	text-decoration: none;
	font-size: 0.92rem;
}

.scbase-menu-principal .sub-menu li a:hover {
	background: var(--scbase-cor-fundo-alt);
	color: var(--scbase-cor-primaria);
}

/* Botão circular + badge de notificação (Camada 1, item 7). */
.scbase-whatsapp-flutuante {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 100;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	font-size: 1.7rem;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35);
	transition: transform 0.15s ease;
}

.scbase-whatsapp-flutuante:hover {
	transform: translateY(-2px);
}

.scbase-whatsapp-badge {
	position: absolute;
	top: -4px;
	right: -2px;
	min-width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	border-radius: var(--scbase-raio-pill);
	background: #c50303;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	animation: scbase-badge-in 0.4s ease 2s backwards;
}

@keyframes scbase-badge-in {
	0% {
		transform: scale(0);
	}
	70% {
		transform: scale(1.25);
	}
	100% {
		transform: scale(1);
	}
}

/* ==========================================================================
   Hero (cheio / compacto)
   ========================================================================== */

.scbase-hero-cheio,
.scbase-hero-compacto {
	background: var(--scbase-cor-fundo-alt);
}

.scbase-hero-cheio {
	padding: var(--scbase-espaco-secao) 0;
}

.scbase-hero-compacto {
	padding: 56px 0;
}

/* Banner de largura total com a imagem destacada da Home como fundo (1920 de largura,
   decisão 2026-08-23). Sem imagem, cai no fundo neutro acima. */
.scbase-hero--com-fundo {
	position: relative;
	background-size: cover;
	background-position: center;
	color: var(--scbase-cor-texto-sobre-escuro);
}

/* 2026-09-16, pele Almega Ativos: a foto real da Home já chegou com o próprio
   degradê azul de marca embutido do lado esquerdo (onde o texto fica) — o
   overlay escuro genérico da base (rgba(15,26,26,...)) ficava pesado demais
   em cima disso e escondia a foto. Trocado por um véu bem sutil, na mesma
   família de azul do gradiente placeholder que existia antes de a foto
   chegar (#2f6fed/#1b2b63/#101a3d) — mantém o azul que o cliente gostou,
   deixa a imagem aparecer o máximo possível. Nesta cópia, não é fix de base
   (o overlay escuro genérico continua certo pra cliente sem esse recurso na
   própria foto). */
.scbase-hero--com-fundo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(16, 26, 61, 0.45) 0%, rgba(27, 43, 99, 0.28) 45%, rgba(47, 111, 237, 0) 80%);
}

.scbase-hero--com-fundo .scbase-hero-inner {
	position: relative;
	z-index: 1;
}

.scbase-hero--com-fundo h1,
.scbase-hero--com-fundo .scbase-hero-texto {
	color: var(--scbase-cor-texto-sobre-escuro);
}

/* Título do hero da Home (2026-09-20, pedido do operador): degradê no texto (branco que
   vai clareando pro azul-claro da marca) e troca animada entre frases (hero-titulo.js).
   O degradê fica no <span> interno, que é o que muda de texto. `display:block` faz o
   degradê correr pela largura toda do título (e não por linha solta). */
.scbase-hero-titulo {
	position: relative;
	/* A altura da maior frase fica reservada (JS); frases mais curtas ficam ancoradas
	   embaixo, coladas no selo/texto, e o espaço que sobra vai pra cima do título. */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.scbase-hero-titulo-texto {
	display: block;
	background: linear-gradient(95deg, #ffffff 0%, #bcd4ff 38%, #6ea6ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	transition: opacity 0.45s ease, transform 0.45s ease;
}

.scbase-hero-titulo-texto.is-saindo {
	opacity: 0;
	transform: translateY(-16px);
}

.scbase-hero-titulo-texto.is-entrando {
	opacity: 0;
	transform: translateY(16px);
	transition: none;
}

/* Medidor invisível usado pelo JS pra reservar a altura da frase mais longa. */
.scbase-hero-titulo-medidor {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	visibility: hidden;
	pointer-events: none;
	transition: none;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.scbase-hero-titulo-texto {
		-webkit-text-fill-color: currentColor;
		color: #ffffff;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scbase-hero-titulo-texto {
		transition: none;
	}
}

/* Bug de base (2026-09-03): a regra genérica `p { color: var(--scbase-cor-texto-suave) }`
   é mais específica que a herança de `.scbase-hero-texto`, então o parágrafo do hero
   saía cinza/opaco em vez de claro — ilegível sobre foto. Forçar herança aqui. */
.scbase-hero--com-fundo .scbase-hero-texto p {
	color: inherit;
}

/* 90vh = âncora da Camada 1 do contrato padrão (calibre cgsadv.com). */
.scbase-hero-cheio.scbase-hero--com-fundo {
	min-height: 90vh;
	display: flex;
	align-items: center;
}

/* 2026-09-16, pele Almega Ativos: `background-position:center` (base) corta a
   imagem simetricamente dos dois lados quando a proporção da tela é mais
   estreita que a foto (1920x1080) — em telas mais altas isso cortava um
   pedaço do casal à direita. Ancorado na direita (`right center`) em vez de
   `center`: o corte acontece só no lado esquerdo (a área azul sólida da
   própria foto, sem perda de conteúdo), o casal nunca é cortado. Testado
   espelhar o banner inteiro (pedido do operador) e revertido — o operador
   queria só isso, não o espelhamento.
   BUG real corrigido (2026-09-17): esta regra tem 2 classes de especificidade
   e vazava pro mobile, vencendo o `background-position:top center` do padrão
   obrigatório (1 classe, dentro do media query) — a foto mobile ficava
   centralizada verticalmente numa seção bem mais alta que ela e colidia com
   o título. Escopado só pra desktop (min-width acima do breakpoint mobile). */
@media (min-width: 783px) {
	.scbase-hero-cheio.scbase-hero--com-fundo {
		background-position: right center;
	}
}

.scbase-hero-compacto.scbase-hero--com-fundo {
	min-height: 360px;
	display: flex;
	align-items: center;
}

/* 2026-09-13, pele Almega Ativos: enquanto não existe banner fotográfico
   próprio (1920x1080) pra Home, o hero cai no fundo neutro (ver regra acima)
   com altura de seção comum — baixo demais pra um hero de entrada. Gradiente
   azul de marca (mesmo par de tons do ícone do logo) + altura 90vh dá presença
   de hero sem depender de foto de banco/IA. Trocar por `scbase-hero--com-fundo`
   assim que o banner real chegar (o gradiente sai sozinho, é `:not()`). */
.scbase-hero-cheio:not(.scbase-hero--com-fundo) {
	background: radial-gradient(120% 140% at 15% 20%, #2f6fed 0%, #1b2b63 45%, #101a3d 100%);
	min-height: 90vh;
	display: flex;
	align-items: center;
	color: var(--scbase-cor-texto-sobre-escuro);
}

.scbase-hero-cheio:not(.scbase-hero--com-fundo) h1,
.scbase-hero-cheio:not(.scbase-hero--com-fundo) .scbase-hero-texto,
.scbase-hero-cheio:not(.scbase-hero--com-fundo) .scbase-hero-texto p {
	color: var(--scbase-cor-texto-sobre-escuro);
}

/* Correção 2026-09-01 (bug real, achado no cliente Portela Cunha, promovido pra
   base): o Hero NUNCA usa o .scbase-container centralizado — isso fazia o bloco
   de texto parecer "centralizado" em telas largas em vez de grudar na margem
   esquerda real da tela. Regra fixa daqui pra frente, todo Hero: margem
   esquerda própria, responsiva, sem auto-centralização. */
.scbase-hero-inner {
	width: 100%;
	max-width: 720px;
	box-sizing: border-box;
	padding-left: clamp(24px, 6vw, 96px);
	padding-right: 24px;
}

.scbase-hero-texto {
	max-width: 640px;
	margin: 16px 0 28px;
	font-size: 1.05rem;
}

.scbase-hero-texto p:last-child {
	margin-bottom: 0;
}

/* 2026-09-16→17, pele Almega Ativos: "Pagamento em até 48 horas" como selo/card
   de destaque entre o título e o texto de apoio (pedido do operador, referência
   visual: card escuro com número/ícone à esquerda + texto à direita, borda sutil,
   cantos arredondados). Cartão escuro translúcido (funciona tanto sobre a foto
   quanto sobre o fundo sólido do mobile) + círculo de ícone com o degradê azul
   de marca. Marcado via meta `_scbase_hero_destaque_texto`/`_scbase_hero_destaque_icone`
   da página (`hero-cheio.php`), não fix de base — mecanismo (meta+template) é
   genérico, mas o visual do cartão é pele deste cliente. */
.scbase-hero-destaque {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: rgba(6, 12, 30, 0.55);
	border: 1px solid rgba(111, 168, 255, 0.35);
	border-radius: 14px;
	padding: 10px 22px 10px 10px;
	margin: 18px 0 22px;
	backdrop-filter: blur(2px);
}

.scbase-hero-destaque-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, #2f6fed, #1b2b63);
}

.scbase-hero-destaque-icone .scbase-icon {
	width: 20px;
	height: 20px;
	color: #ffffff;
}

.scbase-hero-destaque-texto {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;
}

/* ==========================================================================
   Mini-hero — banner interno (Quem Somos, Contato, Blog, Área de Atuação)
   ========================================================================== */

/* ~400px desktop / 150-250px mobile = âncora da Camada 1 (mini-hero em toda interna). */
.scbase-mini-hero {
	position: relative;
	min-height: 400px;
	display: flex;
	align-items: center;
	padding: 48px 0;
	background-color: var(--scbase-cor-primaria);
	background-size: cover;
	background-position: center;
	color: var(--scbase-cor-texto-sobre-escuro);
}

.scbase-mini-hero .scbase-container {
	width: 100%;
}

.scbase-mini-hero-divisor {
	display: block;
	width: 64px;
	height: 3px;
	margin-top: 14px;
	background: var(--scbase-cor-acento);
	border-radius: 2px;
}

.scbase-mini-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 26, 26, 0.45), rgba(15, 26, 26, 0.72));
}

.scbase-mini-hero .scbase-container {
	position: relative;
	z-index: 1;
}

.scbase-mini-hero h1 {
	margin: 0;
	color: var(--scbase-cor-texto-sobre-escuro);
}

.scbase-mini-hero-subtitulo {
	margin: 10px 0 0;
	color: var(--scbase-cor-texto-sobre-escuro);
	opacity: 0.9;
	max-width: 620px;
}

/* 2026-09-17, pele Almega Ativos: variante centralizada do mini-hero (sem a
   barrinha divisora, que ficava estranha junto de um título centralizado) —
   decisão de Direção Criativa por página (ver `centralizado` no
   mini-hero.php), usada em Quem Somos nesta cópia. */
.scbase-mini-hero--centralizado .scbase-container {
	text-align: center;
}

/* Página Blog (2026-09-20, pedido do operador): overlay preto mais forte pra o título
   aparecer, em degradê horizontal (mais escuro atrás do título, à esquerda; mais leve à
   direita, onde fica a marca do "A" do banner, pra ela aparecer mais). Título à esquerda
   (via `centralizado => false` em home.php), sem a barrinha divisora. */
body.blog .scbase-mini-hero::before {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.16) 100%);
}

body.blog .scbase-mini-hero-divisor {
	display: none;
}

/* Topo dos artigos (2026-09-20, pedido do operador): overlay preto mais escuro pra o título
   (que costuma ser longo) ficar legível sobre a capa, que tem a tela do notebook clara.
   Mais forte à esquerda/centro, onde o título fica; um pouco mais leve à direita, onde
   fica a marca do "A". */
body.single-post .scbase-mini-hero::before {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.72) 55%, rgba(0, 0, 0, 0.5) 100%);
}

.scbase-mini-hero--centralizado .scbase-mini-hero-subtitulo {
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Conteúdo genérico de página (Quem Somos, Política de Privacidade, blog single)
   ========================================================================== */

/* Bug real (achado no cliente Bento e Mello, 2026-09-06, promovido pra base):
   o shorthand `padding: Ypx 0` zera left/right — como este elemento também
   carrega `.scbase-container` (`padding:0 24px`) no HTML e esta regra vem
   depois no arquivo, ela vencia e a seção ficava colada nas bordas da tela
   (desktop E mobile). Sempre usar padding-top/padding-bottom isolados aqui e
   em qualquer seletor que combine com `.scbase-container`. */
.scbase-page,
.scbase-single-post,
.scbase-page-contato {
	padding-top: var(--scbase-espaco-secao);
	padding-bottom: var(--scbase-espaco-secao);
}

.scbase-page-content,
.scbase-single-post-conteudo {
	max-width: 760px;
	font-size: 1.05rem;
	line-height: 1.75;
}

/* Página "Quem Somos"/Política de Privacidade etc. (2026-09-05, pedido do
   operador; regressão 2026-09-18 quando o page.php genérico deixou de
   aplicar `--centralizado` — o bloco de texto ficava grudado na borda
   esquerda do `.scbase-container` de 1200px, sem `margin:auto`, sobrando um
   vão vazio enorme à direita). Centralizar sempre aqui na base — não em
   `.scbase-single-post-conteudo`, que já vive numa coluna mais estreita
   dentro do grid do post (`.scbase-post-layout`), onde margin:auto seria
   um no-op inofensivo mas desnecessário. */
.scbase-page-content {
	margin: 0 auto;
}

/* Logo da Almega no topo do texto de Quem Somos (2026-09-18, pedido do
   operador, ver page.php). Só entra quando a página tem esse bloco extra —
   sem afetar Política de Privacidade nem nenhum outro cliente. */
.scbase-page-content-logo {
	display: block;
	max-width: 180px;
	height: auto;
	margin: 0 auto 32px;
}

.scbase-page-content :is(h2, h3),
.scbase-single-post-conteudo :is(h2, h3) {
	margin-top: 1.4em;
}

/* Listas dentro do artigo (2026-09-20): mesma cor suave dos parágrafos (só `p` tinha) e
   respiro entre itens. */
.scbase-single-post-conteudo :is(ul, ol) {
	color: var(--scbase-cor-texto-suave);
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

.scbase-single-post-conteudo li {
	margin-bottom: 0.45em;
}

/* Modifier só pra alinhamento de texto centralizado (usado em intros curtas
   tipo FAQ) — a centralização do container em si já é padrão acima. */
.scbase-page-content--centralizado {
	text-align: center;
}

/* ==========================================================================
   Single de post do blog (2026-09-06, pedido do operador com print de
   referência) — imagem repetida + meta (data/autor) + conteúdo + CTA
   WhatsApp na coluna principal; Compartilhe + Últimos Posts na lateral.
   ========================================================================== */

/* Mesmo bug de base do `.scbase-page` acima — ver comentário lá. */
.scbase-post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 48px;
	align-items: start;
	padding-top: var(--scbase-espaco-secao);
	padding-bottom: var(--scbase-espaco-secao);
}

.scbase-post-imagem {
	margin-bottom: 20px;
}

.scbase-post-imagem img {
	display: block;
	width: 100%;
	border-radius: var(--scbase-raio-grande);
}

.scbase-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0 0 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--scbase-cor-borda);
	color: var(--scbase-cor-texto-suave);
	font-size: 0.9rem;
}

.scbase-post-meta span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.scbase-post-meta .scbase-icon {
	width: 15px;
	height: 15px;
	opacity: 0.75;
}

/* Bloco padrão de CTA pro WhatsApp (2026-09-06) — reaproveitado no single de
   post do blog e no single de Área de Atuação (template-parts/cta-whatsapp.php). */
.scbase-cta-whatsapp-bloco {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--scbase-cor-borda);
}

.scbase-cta-whatsapp-bloco p {
	font-weight: 600;
	margin: 0 0 14px;
}

.scbase-single-area-cta .scbase-cta-whatsapp-bloco {
	border-top: none;
	padding-top: 0;
}

.scbase-post-sidebar {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.scbase-post-sidebar-bloco {
	background: var(--scbase-cor-superficie);
	border: 1px solid var(--scbase-cor-borda);
	border-radius: var(--scbase-raio);
	box-shadow: var(--scbase-sombra-card);
	padding: 22px;
}

.scbase-post-sidebar-bloco h2 {
	font-size: 1.05rem;
	margin: 0 0 16px;
}

.scbase-post-compartilhar {
	display: flex;
	gap: 10px;
}

/* Variante clara do círculo de rede social (2026-09-06) — a original
   (.scbase-rede-social) foi desenhada pra fundo escuro (header/rodapé);
   aqui o card da sidebar é claro, então o ícone precisa ser escuro. */
.scbase-rede-social--claro {
	background: var(--scbase-cor-fundo-alt);
	color: var(--scbase-cor-primaria);
}

.scbase-rede-social--claro:hover {
	background: var(--scbase-cor-primaria);
	color: var(--scbase-cor-sobre-primaria);
}

.scbase-post-sidebar-lista {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.scbase-post-mini-card {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
}

.scbase-post-mini-card img {
	flex: none;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--scbase-raio);
}

.scbase-post-mini-card-corpo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.scbase-post-mini-card-corpo strong {
	font-size: 0.88rem;
	line-height: 1.35;
	color: var(--scbase-cor-texto);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.scbase-post-mini-card-corpo time {
	font-size: 0.78rem;
	color: var(--scbase-cor-texto-suave);
}

.scbase-post-mini-card:hover strong {
	color: var(--scbase-cor-primaria);
}

.scbase-single-post .scbase-cta {
	margin-top: 32px;
}

/* ==========================================================================
   Página de Contato — formulário + informações
   ========================================================================== */

/* 2026-09-18: intro trocada de `.scbase-page-content` (max-width:640px,
   ficava "espremida" bem mais estreita que a grid form+contato logo abaixo)
   pra `.scbase-page-intro-largo` (largura cheia do container, achado real
   do operador). Essa classe já tem `padding-top` próprio — zera aqui pra não
   somar com o padding-top que `.scbase-page-contato` (regra genérica de
   .scbase-page/.scbase-single-post/.scbase-page-contato) já aplica no
   `<article>` pai, senão dobra o respiro no topo só nesta página. */
.scbase-page-contato .scbase-page-intro-largo {
	padding-top: 0;
}

.scbase-contato-grid {
	display: grid;
	/* 2026-09-20 (pele Almega): a página virou só o formulário — coluna única,
	   e o card do form fica centralizado com largura de leitura confortável.
	   (Antes: 1.3fr 1fr com a coluna de telefone/e-mail/endereço ao lado.) */
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
	margin-top: 32px;
}

.scbase-contato-grid .scbase-contato-form {
	width: 100%;
	max-width: 760px;
	margin-inline: auto;
	/* 2026-09-20: card levemente translúcido pra a marca d'água da página (abaixo)
	   aparecer por trás do formulário, sem prejudicar a leitura dos campos. */
	background: rgba(255, 255, 255, 0.9);
}

/* Marca d'água da página "Consulte seu Precatório" (2026-09-20, pedido do operador):
   ícone da Almega (só o símbolo) como FUNDO DA PÁGINA, grande e FIXO — fica parado na
   tela enquanto a página rola. Pseudo-elemento `position: fixed` (e não
   `background-attachment: fixed`, que o iOS ignora) com z-index -1: pinta acima do
   fundo do body e abaixo do conteúdo, então o hero, o cabeçalho e o rodapé (que têm
   fundo próprio) cobrem o ícone e ele só aparece na área do formulário. */
.page-template-page-contato .scbase-conteudo::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: url("assets/img/almega-icone-marca-dagua.png") center / min(1150px, 125vw) auto no-repeat;
	opacity: 0.11;
	pointer-events: none;
}

.scbase-contato-form,
.scbase-contato-info {
	background: var(--scbase-cor-superficie);
	border: 1px solid var(--scbase-cor-borda);
	border-radius: var(--scbase-raio-grande);
	padding: 40px;
}

.scbase-contato-info {
	background: var(--scbase-cor-fundo-alt);
	/* 2026-09-06, pedido do operador: sem título genérico ("Outros canais")
	   comendo espaço — o bloco fica maior e mais visível por conta própria. */
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.scbase-contato-form h2 {
	font-size: 1.3rem;
	margin-bottom: 24px;
}

.scbase-form-contato p {
	margin: 0 0 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.scbase-form-contato label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--scbase-cor-texto);
}

.scbase-form-contato input:not([type="hidden"]),
.scbase-form-contato textarea {
	font: inherit;
	font-size: 1rem;
	color: var(--scbase-cor-texto);
	background: var(--scbase-cor-fundo);
	border: 1px solid var(--scbase-cor-borda);
	border-radius: 8px;
	padding: 12px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

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

.scbase-form-contato input:focus-visible,
.scbase-form-contato textarea:focus-visible {
	outline: none;
	border-color: var(--scbase-cor-primaria);
	box-shadow: 0 0 0 3px rgba(31, 58, 58, 0.14);
}

.scbase-form-contato button[type="submit"] {
	width: 100%;
	justify-content: center;
	margin-top: 4px;
}

/* 2026-09-17, pele Almega Ativos: campo de rádio "Já possui o número do
   precatório?" (`scbase_form_campos_extra`, ver functions.php). */
.scbase-form-campo-radio {
	border: none;
	padding: 0;
	margin: 0 0 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.scbase-form-campo-radio legend {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--scbase-cor-texto);
	padding: 0;
	margin-bottom: 4px;
}

.scbase-form-campo-radio label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--scbase-cor-texto);
	cursor: pointer;
}

.scbase-form-campo-radio input[type="radio"] {
	width: 16px;
	height: 16px;
	accent-color: var(--scbase-cor-primaria);
}

/* Blocos "Telefones" / "E-mail" / "Endereço" (2026-09-06) — cada canal já
   clicável (tel:, wa.me, mailto, Google Maps), separados por linha fina. */
.scbase-contato-info-bloco {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--scbase-cor-borda);
}

.scbase-contato-info-bloco:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.scbase-contato-info-bloco h3 {
	font-size: 1.15rem;
	margin: 0;
}

.scbase-contato-info-item {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--scbase-cor-texto);
	font-size: 1.05rem;
	text-decoration: none;
	transition: color 0.15s ease;
	/* Bug real (achado no cliente Bento e Mello, 2026-09-06, promovido pra
	   base): e-mail sem espaço dentro de coluna estreita (grid de 1 track no
	   mobile) vazava pra fora do card e forçava a coluna inteira a alargar
	   além do viewport, causando scroll horizontal na página inteira.
	   `min-width:0` é necessário porque o item flex, por padrão, não encolhe
	   abaixo do min-content do texto sem isso. */
	min-width: 0;
	overflow-wrap: anywhere;
}

.scbase-contato-info-item .scbase-icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--scbase-cor-primaria);
}

a.scbase-contato-info-item:hover {
	color: var(--scbase-cor-primaria);
}

.scbase-form-feedback {
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 0.92rem;
	margin: 0 0 20px;
}

.scbase-form-sucesso {
	background: #e6f7ee;
	color: #0a7a3c;
}

.scbase-form-erro {
	background: #fdeaea;
	color: #a3231c;
}

.scbase-contato-mapa {
	margin-top: 40px;
}

.scbase-contato-mapa iframe {
	display: block;
	width: 100%;
	height: 380px;
	border: 0;
	border-radius: var(--scbase-raio-grande);
	box-shadow: var(--scbase-sombra-card);
}

/* ==========================================================================
   Faixa de CTA
   ========================================================================== */

/* 2026-09-18, pele Almega Ativos: fundo com o ícone da marca como marca
   d'água (pedido do operador, "uma imagem gerada com o ícone da Almega")
   — usa o PNG real do ícone (assets/img/icone-marca.png), nunca uma versão
   redesenhada por IA (modelo de imagem erra forma/cor de marca real).
   Degradê navy (mesma família do placeholder do Hero) + ícone grande,
   opacidade baixa, sangrando pra fora do canto — decorativo, atrás do
   conteúdo (`position:relative` + `::before`). Nesta cópia, não é fix de
   base. */
.scbase-faixa-cta {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #1b2b63 0%, #101a3d 100%);
	color: var(--scbase-cor-texto-sobre-escuro);
	border-radius: var(--scbase-raio-grande);
	padding: 64px 48px;
	margin: var(--scbase-espaco-secao) auto;
	text-align: center;
}

.scbase-faixa-cta::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -70px;
	transform: translateY(-50%);
	width: 380px;
	height: 380px;
	background-image: url("assets/img/icone-marca.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.14;
	pointer-events: none;
}

.scbase-faixa-cta > * {
	position: relative;
	z-index: 1;
}

.scbase-faixa-cta h2 {
	color: var(--scbase-cor-texto-sobre-escuro);
	margin-top: 0;
}

.scbase-faixa-cta p {
	color: var(--scbase-cor-texto-sobre-escuro);
	opacity: 0.88;
	max-width: 520px;
	margin: 0 auto 28px;
}

.scbase-faixa-cta .scbase-cta {
	background: var(--scbase-cor-superficie);
	color: var(--scbase-cor-primaria);
}

.scbase-faixa-cta .scbase-cta:hover {
	background: var(--scbase-cor-fundo-alt);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Mosaico social
   ========================================================================== */

.scbase-mosaico-social {
	padding: var(--scbase-espaco-secao) 0;
	text-align: center;
}

.scbase-mosaico-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 32px 0;
}

.scbase-mosaico-grid img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: var(--scbase-raio);
	transition: transform 0.2s ease;
}

.scbase-mosaico-grid img:hover {
	transform: scale(1.03);
}

.scbase-mosaico-ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

/* ==========================================================================
   Seções genéricas de página (Home, arquivo de Área de Atuação, blog)
   ========================================================================== */

.scbase-secao-areas,
.scbase-secao-depoimentos,
.scbase-secao-blog,
.scbase-archive-areas,
.scbase-blog-listagem,
.scbase-secao-relacionadas {
	/* Mesmo bug de base do `.scbase-page` (topo do arquivo) — ver comentário lá. */
	padding-top: var(--scbase-espaco-secao);
	padding-bottom: var(--scbase-espaco-secao);
}

/* 2026-09-06, pedido do operador: fundo diferente pra marcar visualmente que
   "Outras Áreas de Atuação" é uma seção separada da anterior — full-bleed,
   por isso o `.scbase-container` virou filho em vez de ir na própria section.
   #f7f7f7 é escolha explícita do operador (cinza neutro bem sutil, não um
   token da pele) — trocado depois do primeiro tom (fundo-alt) ter ficado
   "forte" demais pro gosto dele. */
.scbase-secao-relacionadas {
	background: #f7f7f7;
}

/* Sem o espaço em branco antes do rodapé (2026-09-06, pedido do operador) —
   `.scbase-footer` tem `margin-top` padrão pra respiro geral do site, mas
   aqui a seção anterior já tem fundo próprio: a emenda direta fica melhor. */
body.single-area_atuacao .scbase-footer {
	margin-top: 0;
}

/* Botão "Carregar mais" do blog (2026-09-05) — centralizado abaixo do grid. */
.scbase-blog-carregar-mais {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

/* Botão "Ver todos os artigos" abaixo do teaser da Home (2026-09-06). */
.scbase-secao-blog-ver-todos {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.scbase-blog-carregar-mais .scbase-cta[disabled] {
	opacity: 0.6;
	cursor: default;
}

.scbase-secao-areas h2,
.scbase-secao-depoimentos h2,
.scbase-secao-blog h2,
.scbase-secao-relacionadas h2 {
	text-align: center;
	margin-bottom: 40px;
}

/* ==========================================================================
   Kicker — rótulo curto acima de títulos de seção
   ========================================================================== */

.scbase-kicker {
	margin: 0 0 6px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--scbase-cor-acento);
}

.scbase-kicker--sobre-escuro {
	color: var(--scbase-cor-titulo-sobre-escuro);
}

/* ==========================================================================
   Sobre-resumo (Home) — 2 colunas texto | imagem
   ========================================================================== */

.scbase-secao-sobre {
	padding: var(--scbase-espaco-secao) 0;
}

.scbase-sobre-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 48px;
	align-items: center;
}

.scbase-sobre-grid--sem-imagem {
	display: block;
	max-width: 760px;
}

.scbase-sobre-texto p {
	font-size: 1.05rem;
	line-height: 1.75;
}

/* 2026-09-20, pedido do operador: o texto curto da seção (não o chapéu "Conheça") com 18px;
   16px no celular. */
.scbase-sobre-texto p:not(.scbase-kicker) {
	font-size: 18px;
}

@media (max-width: 782px) {
	.scbase-sobre-texto p:not(.scbase-kicker) {
		font-size: 16px;
	}

	/* 2026-09-20, pedido do operador: no celular o chapéu "Conheça", o título, o texto e o botão
	   ficam centralizados. */
	.scbase-sobre-texto {
		text-align: center;
	}
}

.scbase-sobre-texto .scbase-cta {
	margin-top: 12px;
}

.scbase-sobre-imagem img {
	width: 100%;
	border-radius: var(--scbase-raio-grande);
	box-shadow: var(--scbase-sombra-card);
}

/* ==========================================================================
   Faixa de confiança (Home, 2026-09-20, pedido do operador) — tarja em largura total,
   degradê azul, texto branco, frases separadas por um pontinho passando em loop
   (letreiro só com CSS). Linha de 1px azul-clara em cima e branca embaixo.
   ========================================================================== */
.scbase-faixa-confianca {
	overflow: hidden;
	color: #ffffff;
	background: linear-gradient(90deg, #14225a 0%, #1b2b63 28%, #0447b5 68%, #2563eb 100%);
	border-top: 1px solid #9dbcff;
	border-bottom: 1px solid #ffffff;
}

.scbase-faixa-confianca-trilho {
	display: flex;
	width: max-content;
	animation: scbase-faixa-rolar 60s linear infinite;
}

.scbase-faixa-confianca:hover .scbase-faixa-confianca-trilho {
	animation-play-state: paused;
}

.scbase-faixa-confianca-grupo {
	display: flex;
	flex: none;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.scbase-faixa-confianca-grupo li {
	display: flex;
	align-items: center;
	padding: 20px 0;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #ffffff;
}

/* Pontinho depois de cada frase (inclusive da última do grupo, pra o laço ser contínuo). */
.scbase-faixa-confianca-grupo li::after {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	margin: 0 32px;
	border-radius: 50%;
	background: #9dbcff;
}

@keyframes scbase-faixa-rolar {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* "Reduzir movimento": sem letreiro; vira uma lista centralizada que quebra linha. */
@media (prefers-reduced-motion: reduce) {
	.scbase-faixa-confianca-trilho {
		width: auto;
		justify-content: center;
		animation: none;
	}

	.scbase-faixa-confianca-grupo {
		flex-wrap: wrap;
		justify-content: center;
	}

	.scbase-faixa-confianca-grupo--copia {
		display: none;
	}
}

@media (max-width: 782px) {
	.scbase-faixa-confianca-grupo li {
		padding: 15px 0;
		font-size: 0.75rem;
	}

	.scbase-faixa-confianca-grupo li::after {
		margin: 0 22px;
	}
}

/* ==========================================================================
   Como Funciona (Home, 2026-09-11) — linha do tempo horizontal numerada.
   Desvio pontual Almega Ativos: pedido explícito do cliente ("as fases do
   processo tem que estar disposto na horizontal e com figuras, como se
   fosse uma linha do tempo"), estrutura inspirada no leiaute de 4 passos
   numerados do concorrente precatoriosbrasil.com — sem herdar paleta nem
   copy dele, só a composição (icone + numero + titulo + texto em linha).
   ========================================================================== */

.scbase-secao-como-funciona {
	/* Sempre padding-top/padding-bottom isolados: o elemento também é `.scbase-container` (que
	   tem `padding: 0 24px`) e o atalho `padding: Ypx 0` zerava as laterais no celular
	   (2026-09-20, achado do operador). Ver o comentário em `.scbase-page`. */
	padding-top: var(--scbase-espaco-secao);
	padding-bottom: var(--scbase-espaco-secao);
	text-align: center;
}

.scbase-secao-como-funciona h2 {
	margin-bottom: 48px;
}

.scbase-como-funciona-linha {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	text-align: left;
}

.scbase-como-funciona-etapa {
	position: relative;
	padding-top: 28px;
	border-top: 2px solid var(--scbase-cor-borda-forte);
}

.scbase-como-funciona-numero {
	display: block;
	font-family: var(--scbase-fonte-titulo);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--scbase-cor-acento);
	margin-bottom: 16px;
}

.scbase-como-funciona-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--scbase-cor-primaria);
	color: var(--scbase-cor-texto-sobre-escuro);
	margin-bottom: 18px;
}

.scbase-como-funciona-icone .scbase-icon {
	width: 24px;
	height: 24px;
}

.scbase-como-funciona-titulo {
	display: block;
	font-family: var(--scbase-fonte-titulo);
	/* <strong> (não é h3): pega o peso 700 do navegador; alinhado ao peso 800 dos títulos
	   (2026-09-20, troca da fonte dos títulos). */
	font-weight: 800;
	font-size: 1.1rem;
	margin-bottom: 8px;
}

.scbase-como-funciona-texto {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--scbase-cor-texto-suave);
}

/* ==========================================================================
   Como Atuamos (Home, 2026-09-05) — faixa escura, passo a passo + foto
   ========================================================================== */

.scbase-secao-como-atuamos {
	background: var(--scbase-cor-primaria);
	color: var(--scbase-cor-texto-sobre-escuro);
	padding: var(--scbase-espaco-secao) 0;
}

.scbase-como-atuamos-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.scbase-como-atuamos-texto h2 {
	color: var(--scbase-cor-texto-sobre-escuro);
	margin-bottom: 28px;
}

.scbase-como-atuamos-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.scbase-como-atuamos-lista li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.scbase-como-atuamos-icone {
	flex: none;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--scbase-cor-acento);
	color: var(--scbase-cor-primaria);
}

.scbase-como-atuamos-icone .scbase-icon {
	width: 20px;
	height: 20px;
}

.scbase-como-atuamos-conteudo strong {
	display: block;
	font-family: var(--scbase-fonte-titulo);
	font-size: 1.1rem;
	margin-bottom: 4px;
}

.scbase-como-atuamos-conteudo p {
	margin: 0;
	/* Bug real (2026-09-06): sem cor própria, herdava o `p{color:...suave}`
	   global (cinza escuro pensado pra fundo claro) — ilegível sobre o verde
	   escuro da seção. */
	color: var(--scbase-cor-texto-sobre-escuro);
	opacity: 0.85;
	line-height: 1.6;
	font-size: 0.95rem;
}

.scbase-como-atuamos-imagem img {
	width: 100%;
	border-radius: var(--scbase-raio-grande);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Cards de navegação (genérico) — grade de N cards iguais (ícone + rótulo),
   cor sólida do cliente, geralmente linkando pra âncoras de seções mais
   abaixo na mesma página. Sem template-part dedicado — cada página monta a
   própria lista de itens (ex.: Parceiros do Almega Ativos, 2026-09-17).
   ========================================================================== */
.scbase-cards-nav {
	/* 2026-09-20: sem o botão "Fale com a equipe"; respiro embaixo igual ao de cima da
	   intro (`--scbase-espaco-secao`), antes da faixa azul. Padding isolado (nunca o atalho
	   `padding: Ypx 0`): o elemento também é `.scbase-container` e o atalho zerava as
	   laterais no celular. */
	padding-top: 8px;
	padding-bottom: var(--scbase-espaco-secao);
}

.scbase-cards-nav-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.scbase-cards-nav-item {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--scbase-cor-primaria);
	color: #ffffff;
	padding: 20px 24px;
	border-radius: var(--scbase-raio-grande);
	text-decoration: none;
	font-weight: 700;
	font-size: 1.05rem;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.scbase-cards-nav-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
	color: #ffffff;
}

.scbase-cards-nav-item .scbase-icon {
	width: 26px;
	height: 26px;
	flex: none;
}

.scbase-cards-nav-cta {
	margin-top: 20px;
	text-align: center;
}

/* 2026-09-17: intro de página larga (genérico) — sem o `max-width:760px`
   de `.scbase-page-content` (pensado pra texto corrido tipo Quem Somos),
   ocupa a largura cheia do `.scbase-container`, igual aos cards/blocos que
   vêm depois na mesma página (achado real no Almega: a intro ficava
   "fechada", bem mais estreita que o resto — ver referência Precato, onde
   intro e cards têm a mesma largura). Usado em Parceiros e Como Funciona.
   `padding-top` isolado aqui (não no `.scbase-page` genérico, que também
   adiciona padding-bottom e duplicaria com o padding da faixa-cta final). */
.scbase-page-intro-largo {
	padding-top: var(--scbase-espaco-secao);
	font-size: 1.05rem;
	line-height: 1.75;
	margin-bottom: 32px;
}

/* 2026-09-20, pedido do operador (Como Funciona): intro centralizada, 20px no
   desktop e 16px no mobile. Modificador só desta página (Parceiros e Consulte
   usam a mesma base sem centralizar). */
/* Parceiros (2026-09-20, pedido do operador): a 1a frase ("Conexões que geram novas
   oportunidades.") vira destaque: centralizada, negrito e maior. Os demais parágrafos
   seguem como estavam. clamp() já cobre o mobile (24px no celular, até 34px no desktop). */
.scbase-page-intro-parceiros > p:first-child {
	text-align: center;
	font-weight: 700;
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	line-height: 1.3;
	color: var(--scbase-cor-primaria);
	margin-bottom: 28px;
}

.scbase-page-intro-centro,
.scbase-page-intro-centro p {
	text-align: center;
	font-size: 20px;
}

@media (max-width: 782px) {
	.scbase-page-intro-centro,
	.scbase-page-intro-centro p {
		font-size: 16px;
	}
}

/* ==========================================================================
   Bloco foto + texto (genérico, `bloco-foto-texto.php`) — ícone + título +
   texto + CTA de um lado, foto do outro; `--inverso` alterna o lado no
   desktop. Reaproveitável em qualquer página interna que precise de N seções
   assim em sequência (ex.: Parceiros do Almega Ativos, 2026-09-17).
   ========================================================================== */
.scbase-bloco-foto-texto {
	padding: var(--scbase-espaco-secao) 0;
}

.scbase-bloco-ft-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 48px;
	align-items: center;
}

.scbase-bloco-ft-grid--inverso {
	grid-template-columns: 1fr 1.1fr;
}

.scbase-bloco-ft-grid--inverso .scbase-bloco-ft-imagem {
	order: -1;
}

.scbase-bloco-ft-grid--sem-imagem {
	display: block;
	max-width: 760px;
}

.scbase-bloco-ft-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--scbase-cor-primaria);
	margin-bottom: 16px;
}

.scbase-bloco-ft-icone .scbase-icon {
	width: 24px;
	height: 24px;
	color: #ffffff;
}

.scbase-bloco-ft-texto p {
	font-size: 1.05rem;
	line-height: 1.75;
}

.scbase-bloco-ft-texto .scbase-cta {
	margin-top: 12px;
}

.scbase-bloco-ft-imagem img {
	width: 100%;
	border-radius: var(--scbase-raio-grande);
	box-shadow: var(--scbase-sombra-card);
}

/* ==========================================================================
   FAQ — accordion (genérico, `page-faq.php`) — `<details>`/`<summary>`
   nativo de propósito (ver comentário no template): comportamento desejado
   é o nativo completo, sem exceção por breakpoint, então é seguro (ver
   EVIDENCE_PREMISES_LEDGER.md sobre quando `<details>` NÃO é seguro).
   ========================================================================== */
.scbase-faq-lista {
	max-width: 820px;
	margin: 40px auto 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.scbase-faq-item {
	border: 1px solid var(--scbase-cor-borda);
	border-radius: var(--scbase-raio-grande);
	padding: 0 24px;
	background: var(--scbase-cor-superficie);
}

.scbase-faq-item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--scbase-cor-texto);
}

.scbase-faq-item summary::-webkit-details-marker {
	display: none;
}

.scbase-faq-item summary::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background-color: var(--scbase-cor-primaria);
	-webkit-mask-image: url("assets/icons/chevron-down.svg");
	mask-image: url("assets/icons/chevron-down.svg");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transition: transform 0.2s ease;
}

.scbase-faq-item[open] summary::after {
	transform: rotate(180deg);
}

.scbase-faq-item p {
	margin: 0;
	padding-bottom: 22px;
	color: var(--scbase-cor-texto-suave);
	line-height: 1.75;
}

/* FAQ dentro da página Como Funciona (2026-09-20): título centralizado + frase de
   apoio, mesmo ritmo vertical da linha do tempo acima. */
.scbase-secao-faq {
	/* Mesmo cuidado do `.scbase-secao-como-funciona`: não usar o atalho `padding`, senão zera
	   as laterais do `.scbase-container`. */
	padding-top: 0;
	padding-bottom: var(--scbase-espaco-secao);
	text-align: center;
}

.scbase-secao-faq h2 {
	margin-bottom: 16px;
}

.scbase-secao-faq-intro {
	max-width: 640px;
	margin: 0 auto;
	color: var(--scbase-cor-texto-suave);
	line-height: 1.7;
}

.scbase-secao-faq .scbase-faq-lista {
	text-align: left;
}

/* ==========================================================================
   "Por que contratar a ALMEGA ATIVOS?" (Home, 2026-09-20, pedido do operador) — seção em
   largura total: foto de fundo (desktop 1920x600 / mobile 700x374, trocadas por @media em
   por-que-contratar.php), overlay em degradê azul pelo lado do texto (a foto tem a família à
   direita e o azul já nasce no lado esquerdo), texto no canto esquerdo.
   ========================================================================== */
.scbase-secao-porque {
	position: relative;
	color: #ffffff;
	background-color: #101a3d;
	background-size: cover;
	/* A seção é mais alta que a foto (1920x600), então o `cover` amplia a imagem e a família
	   chegava perto do texto. Empurra a foto 130px pra direita (o que sai do quadro é a
	   planta/abajur do canto): a família fica livre do texto e ninguém é cortado. */
	background-position: calc(100% + 130px) center;
	background-repeat: no-repeat;
	padding: 72px 0;
}

.scbase-secao-porque--com-imagem::before {
	content: "";
	position: absolute;
	inset: 0;
	/* 2026-09-20 (2ª passada, pedido do operador): mais escuro atrás do texto pra título e frases
	   ficarem bem legíveis; segue clareando à direita pra família aparecer. */
	background: linear-gradient(90deg, rgba(8, 18, 56, 0.96) 0%, rgba(8, 18, 56, 0.84) 34%, rgba(8, 18, 56, 0.58) 50%, rgba(8, 18, 56, 0.2) 66%, rgba(8, 18, 56, 0) 82%);
}

.scbase-porque-inner {
	position: relative;
	z-index: 1;
}

.scbase-porque-texto {
	max-width: 480px;
}

.scbase-porque-texto h2 {
	margin: 0 0 16px;
	color: #ffffff;
}

/* A regra genérica `p { color: suave }` ganharia; força claro sobre a foto. */
.scbase-porque-texto .scbase-porque-abertura {
	margin: 0 0 24px;
	font-size: 1.05rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.92);
}

.scbase-porque-lista {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.scbase-porque-lista li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.95);
}

/* Sombra bem leve no texto: reforça a leitura onde o overlay já clareia. */
.scbase-porque-texto h2,
.scbase-porque-texto .scbase-porque-abertura,
.scbase-porque-lista li {
	text-shadow: 0 1px 3px rgba(4, 10, 36, 0.45);
}

.scbase-porque-lista .scbase-icon {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: #9dbcff;
}

.scbase-porque-lista strong {
	color: #ffffff;
}

@media (min-width: 783px) and (max-width: 1180px) {
	.scbase-secao-porque--com-imagem::before {
		background: linear-gradient(90deg, rgba(8, 18, 56, 0.96) 0%, rgba(8, 18, 56, 0.88) 46%, rgba(8, 18, 56, 0.6) 64%, rgba(8, 18, 56, 0.22) 80%, rgba(8, 18, 56, 0) 94%);
	}
}

/* Mobile: mesmo padrão do hero. Foto inteira e limpa em cima (700x374 = 53.43vw de altura,
   sem overlay), texto embaixo sobre o fundo azul sólido. */
@media (max-width: 782px) {
	.scbase-secao-porque {
		padding-bottom: 48px;
	}

	.scbase-secao-porque--com-imagem {
		background-size: 100% auto;
		background-position: top center;
		padding-top: calc(53.43vw + 32px);
		padding-bottom: 48px;
	}

	.scbase-secao-porque--com-imagem::before {
		background: none;
	}
}

/* ==========================================================================
   Nossos Diferenciais (Home, 2026-09-05) — full-bleed com foto de fundo
   (cidade/região do cliente) e card sobreposto
   ========================================================================== */

.scbase-secao-diferenciais {
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	padding: calc(var(--scbase-espaco-secao) * 1.3) 0;
	display: flex;
	justify-content: center;
}

.scbase-diferenciais-card {
	max-width: 620px;
	margin: 0 auto;
	background: var(--scbase-cor-superficie);
	border-radius: var(--scbase-raio-grande);
	padding: 44px;
	text-align: center;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.scbase-diferenciais-card .scbase-kicker {
	justify-content: center;
}

.scbase-diferenciais-card p {
	line-height: 1.75;
	margin: 0 0 14px;
}

.scbase-diferenciais-card p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Números/resultados (Home) — faixa escura full-bleed com contadores
   ========================================================================== */

.scbase-secao-numeros {
	background: var(--scbase-cor-primaria);
	color: var(--scbase-cor-texto-sobre-escuro);
	padding: var(--scbase-espaco-secao) 0;
}

.scbase-secao-numeros h2 {
	color: var(--scbase-cor-texto-sobre-escuro);
	margin-bottom: 40px;
}

.scbase-numeros-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 20px;
}

.scbase-numero-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 25px;
	background: rgba(0, 0, 0, 0.33);
	border: 1px solid color-mix(in srgb, var(--scbase-cor-acento) 45%, transparent);
	border-radius: 15px;
	text-align: center;
}

.scbase-numero-valor {
	font-family: var(--scbase-fonte-titulo);
	font-size: 3.2rem;
	line-height: 1.05;
	color: var(--scbase-cor-acento);
}

.scbase-numero-rotulo {
	font-size: 0.95rem;
	opacity: 0.92;
}

/* ==========================================================================
   Equipe/sócios (Home) — retrato 4:5 + nome + cargo + mini-bio
   ========================================================================== */

.scbase-secao-equipe {
	background: var(--scbase-cor-superficie);
	padding: var(--scbase-espaco-secao) 0;
}

.scbase-secao-equipe h2 {
	text-align: center;
	margin-bottom: 40px;
}

.scbase-equipe-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 32px;
	max-width: 960px;
	margin: 0 auto;
}

.scbase-equipe-card {
	background: var(--scbase-cor-superficie);
	border-radius: calc(var(--scbase-raio) * 1.6);
	overflow: hidden;
	box-shadow: var(--scbase-sombra-card);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.scbase-equipe-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 4px 10px rgba(35, 32, 27, 0.06), 0 20px 36px rgba(35, 32, 27, 0.12);
}

.scbase-equipe-foto {
	aspect-ratio: 4 / 5;
	background: var(--scbase-cor-fundo-alt);
}

.scbase-equipe-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.scbase-equipe-body {
	padding: 22px 22px 26px;
}

.scbase-equipe-body h3 {
	margin-bottom: 4px;
}

.scbase-equipe-cargo {
	margin: 0 0 10px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--scbase-cor-acento);
}

.scbase-equipe-bio {
	font-size: 0.92rem;
	line-height: 1.6;
}

.scbase-equipe-bio p {
	margin: 0;
}

/* Respiro entre os parágrafos da bio (2026-09-20): antes o 2º parágrafo colava no 1º. */
.scbase-equipe-bio p + p {
	margin-top: 0.7em;
}

.scbase-secao-equipe .scbase-cta-whatsapp-bloco {
	border-top: none;
	margin-top: 48px;
	padding-top: 0;
	text-align: center;
}

/* Equipe na página Quem Somos (2026-09-20, pedido do operador): 2 cartões lado a lado, cada
   um horizontal (foto menor à esquerda, texto à direita). A seção já vem depois do texto da
   página (que tem o próprio respiro embaixo), então zera o padding de cima dela. */
.scbase-secao-equipe--pagina {
	padding-top: 0;
}

.scbase-equipe-grid--horizontal {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 1100px;
	gap: 28px;
}

.scbase-equipe-grid--horizontal .scbase-equipe-card {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	align-items: stretch;
}

.scbase-equipe-grid--horizontal .scbase-equipe-foto {
	aspect-ratio: auto;
	height: 100%;
	min-height: 260px;
}

.scbase-equipe-grid--horizontal .scbase-equipe-body {
	align-self: center;
	padding: 24px 26px;
}

@media (max-width: 1000px) {
	.scbase-equipe-grid--horizontal {
		grid-template-columns: 1fr;
		max-width: 620px;
	}
}

@media (max-width: 560px) {
	.scbase-equipe-grid--horizontal .scbase-equipe-card {
		grid-template-columns: 1fr;
	}

	.scbase-equipe-grid--horizontal .scbase-equipe-foto {
		height: auto;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.scbase-equipe-grid--horizontal .scbase-equipe-foto img {
		object-position: center 20%;
	}
}

/* ==========================================================================
   Parceiros (Home) — carrossel de logos (4 desktop / 1 mobile, autoplay 5s)
   ========================================================================== */

.scbase-secao-parceiros {
	background: var(--scbase-cor-superficie);
	border-top: 1px solid var(--scbase-cor-borda);
	border-bottom: 1px solid var(--scbase-cor-borda);
	padding: 60px 0;
}

.scbase-secao-parceiros h2 {
	text-align: center;
	margin-bottom: 40px;
}

.scbase-carrossel-logos {
	display: flex;
	align-items: center;
	gap: 16px;
}

.scbase-logos-viewport {
	overflow: hidden;
	flex: 1;
}

.scbase-logos-trilho {
	display: flex;
	transition: transform 0.5s ease;
}

.scbase-logos-item {
	flex: 0 0 25%;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.scbase-logos-item img {
	max-height: 110px;
	width: auto;
	object-fit: contain;
}

.scbase-logos-seta {
	cursor: pointer;
	flex: none;
	border: 1px solid var(--scbase-cor-borda);
	background: var(--scbase-cor-superficie);
	color: var(--scbase-cor-primaria);
	border-radius: var(--scbase-raio-pill);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.scbase-logos-seta:hover {
	background: var(--scbase-cor-primaria);
	color: var(--scbase-cor-sobre-primaria);
}

/* ==========================================================================
   Carrossel de Áreas de Atuação (Home) — 2ª seção, sempre carrossel (decisão
   do operador, 2026-09-01). Mesmo padrão visual do carrossel de logos.
   ========================================================================== */

.scbase-carrossel-areas {
	display: flex;
	align-items: center;
	gap: 16px;
}

.scbase-areas-viewport {
	overflow: hidden;
	flex: 1;
}

.scbase-areas-trilho {
	display: flex;
	transition: transform 0.5s ease;
}

.scbase-areas-item {
	flex: 0 0 33.3333%;
	padding: 0 14px;
	display: flex;
}

.scbase-areas-item .scbase-area-card {
	width: 100%;
}

.scbase-areas-seta {
	cursor: pointer;
	flex: none;
	border: 1px solid var(--scbase-cor-borda);
	background: var(--scbase-cor-superficie);
	color: var(--scbase-cor-primaria);
	border-radius: var(--scbase-raio-pill);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.scbase-areas-seta:hover {
	background: var(--scbase-cor-primaria);
	color: var(--scbase-cor-sobre-primaria);
}

/* ==========================================================================
   Cards — Área de Atuação/Serviço e Blog. Card de área = capa 3:2 + título curto
   + mini descrição + CTA (formato padrão da base, 2026-08-23). Sem capa, mesmo
   esqueleto só-texto.
   ========================================================================== */

.scbase-grid-areas {
	display: grid;
	/* 3 colunas fixas (2026-09-05, pedido do operador) — antes era auto-fit,
	   que virava 3 ou 4 dependendo da largura real do container; agora sempre
	   3 no desktop, sem depender de coincidência de medida. */
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.scbase-area-card,
.scbase-blog-card {
	background: var(--scbase-cor-superficie);
	border: 1px solid var(--scbase-cor-borda);
	border-radius: var(--scbase-raio);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	height: 100%;
}

.scbase-area-card:hover,
.scbase-blog-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--scbase-sombra-card);
	border-color: var(--scbase-cor-borda-forte);
}

.scbase-area-card a {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	border-radius: inherit;
}

.scbase-area-card-media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--scbase-cor-fundo-alt);
}

.scbase-area-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.scbase-area-card:hover .scbase-area-card-media img {
	transform: scale(1.04);
}

.scbase-area-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 12px;
	padding: 28px 28px 30px;
}

.scbase-area-card:not(.scbase-area-card--com-capa) .scbase-area-card-body {
	padding-top: 32px;
}

.scbase-area-card h3 {
	margin: 0;
}

.scbase-area-card p {
	flex: 1;
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	min-height: calc(1.6em * 3);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Botão "Saiba mais" (2026-09-03): antes era só texto+seta; agora é um botão de
   verdade (pill preenchida, cor própria via --scbase-cor-cta), sempre alinhado à
   esquerda do card e nunca esticado por toda a largura. */
.scbase-area-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	margin-top: auto;
	padding: 10px 18px;
	/* 2026-09-10, pedido do operador: botão quadrado, não mais pílula. */
	border-radius: 8px;
	background: var(--scbase-cor-cta);
	color: var(--scbase-cor-sobre-cta);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.scbase-area-card-cta .scbase-icon {
	width: 0.85em;
	height: 0.85em;
	transition: transform 0.18s ease;
}

.scbase-area-card:hover .scbase-area-card-cta {
	background: var(--scbase-cor-cta-hover);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

.scbase-area-card:hover .scbase-area-card-cta .scbase-icon {
	transform: translateX(3px);
}

/* Card de Artigo (2026-09-05): foto + título + resumo (3 linhas) + botão "Ler
   mais" — mesmo esqueleto e pill button dos cards de Área de Atuação. */
.scbase-blog-card a {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	border-radius: inherit;
}

.scbase-blog-card img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.scbase-blog-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 12px;
	padding: 24px 24px 26px;
}

.scbase-blog-card h2,
.scbase-blog-card h3 {
	margin: 0;
	font-size: 1.1rem;
}

.scbase-blog-card-body p {
	flex: 1;
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--scbase-cor-texto-suave);
	min-height: calc(1.6em * 3);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.scbase-blog-card .scbase-area-card-cta {
	align-self: flex-start;
}

/* ==========================================================================
   Single de Área de Atuação/Serviço — modelo padrão reutilizável
   ========================================================================== */

/* Mesmo bug de base do `.scbase-page` (topo do arquivo) — ver comentário lá. */
.scbase-single-area {
	padding-top: var(--scbase-espaco-secao);
	padding-bottom: 64px;
}

/* Layout com sidebar de navegação entre áreas (Camada 1, item 9). */
.scbase-single-layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.scbase-single-sidebar {
	position: sticky;
	top: 24px;
	background: var(--scbase-cor-superficie);
	border: 1px solid var(--scbase-cor-borda);
	border-radius: var(--scbase-raio);
	box-shadow: var(--scbase-sombra-card);
	padding: 24px;
}

.scbase-single-sidebar h2 {
	font-size: 1.05rem;
	margin: 0;
}

/* Accordion do sidebar "Áreas de Atuação" no mobile (Camada 1 desde 2026-09-06,
   achado real no cliente Bento e Mello, promovido pra base) — botão + classe
   `is-aberto` via JS (assets/js/single-sidebar-toggle.js), mesmo padrão do menu
   mobile do header. Em desktop/tablet (>782px) o botão vira só um título
   estático (cursor default, pointer-events none) e a lista já fica sempre
   visível — só o breakpoint de mobile de verdade (782px, igual todo o resto do
   site) ativa o toggle de verdade. Ficou JS (não `<details>` nativo) depois de
   um bug real: o navegador não conta a altura do `<ul>` pra dentro do elemento
   quando ele nasce sem o atributo `open`, mesmo forçando `display:flex` nele
   via CSS — o conteúdo renderizava "fantasma", fora da caixa do pai, sem
   esticar o grid/sidebar. */
.scbase-single-sidebar-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	color: inherit;
	text-align: left;
	cursor: default;
	pointer-events: none;
}

.scbase-single-sidebar-seta {
	display: none;
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--scbase-cor-texto-suave);
	transition: transform 0.2s ease;
}

.scbase-single-sidebar.is-aberto .scbase-single-sidebar-seta {
	transform: rotate(180deg);
}

.scbase-single-sidebar-toggle + ul {
	margin-top: 14px;
}

.scbase-single-sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.scbase-single-sidebar li {
	border-top: 1px solid var(--scbase-cor-borda);
}

.scbase-single-sidebar a {
	display: block;
	padding: 10px 2px;
	font-size: 0.95rem;
	color: var(--scbase-cor-texto);
	text-decoration: none;
	transition: color 0.15s ease;
}

.scbase-single-sidebar a:hover {
	color: var(--scbase-cor-primaria);
}

.scbase-single-sidebar-atual a {
	color: var(--scbase-cor-primaria);
	font-weight: 700;
	border-left: 3px solid var(--scbase-cor-acento);
	padding-left: 10px;
}

/* 2026-09-06, pedido do operador (com print de referência): imagem em cima,
   ocupando a largura toda do container; título e texto embaixo, em coluna
   única — antes era grid 2 colunas (imagem à esquerda, texto à direita), que
   deixava o h2 de abertura espremido numa coluna estreita (quebrava em 3
   linhas, parecendo peso visual maior do que devia). */
.scbase-single-area-corpo {
	display: block;
}

.scbase-single-area-corpo--sem-imagem {
	max-width: 760px;
	margin: 0 auto;
}

.scbase-single-area-imagem {
	margin-bottom: 32px;
}

.scbase-single-area-imagem img {
	display: block;
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	border-radius: var(--scbase-raio-grande);
	box-shadow: var(--scbase-sombra-card);
}

.scbase-single-area-texto {
	max-width: 760px;
	font-size: 1.05rem;
	line-height: 1.75;
}

.scbase-single-area-texto :is(h2, h3) {
	margin-top: 1.4em;
}

.scbase-single-area-cta {
	text-align: center;
	margin-top: 56px;
}

/* ==========================================================================
   Carrossel de depoimentos — alinhado aos tokens da base
   ========================================================================== */

.scbase-secao-depoimentos {
	background: var(--scbase-cor-fundo-alt);
	border-radius: var(--scbase-raio-grande);
}

.scbase-depoimento-item {
	position: relative;
	background: var(--scbase-cor-superficie);
	border: 1px solid var(--scbase-cor-borda);
	border-radius: var(--scbase-raio);
	padding: 32px 28px 24px;
}

.scbase-depoimento-item blockquote {
	margin: 0 0 16px;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--scbase-cor-texto);
}

.scbase-depoimento-item blockquote::before {
	content: "\201C";
	display: block;
	font-family: var(--scbase-fonte-titulo);
	font-size: 2.6rem;
	line-height: 1;
	color: var(--scbase-cor-acento);
	margin-bottom: 4px;
}

.scbase-depoimento-item img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 12px;
}

.scbase-depoimento-nota {
	color: var(--scbase-cor-acento);
	letter-spacing: 2px;
	font-size: 0.9rem;
}

.scbase-depoimento-item cite {
	display: block;
	margin-top: 8px;
	font-style: normal;
	font-weight: 600;
	color: var(--scbase-cor-texto);
}

.scbase-depoimento-atribuicao {
	font-size: 0.85em;
	margin: 4px 0 0;
}

.scbase-carrossel-controles button {
	cursor: pointer;
	border: 1px solid var(--scbase-cor-borda);
	background: var(--scbase-cor-superficie);
	color: var(--scbase-cor-primaria);
	border-radius: 999px;
	width: 38px;
	height: 38px;
	font-size: 1.1rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.scbase-carrossel-controles button:hover {
	background: var(--scbase-cor-primaria);
	color: var(--scbase-cor-sobre-primaria);
}

/* ==========================================================================
   Faixa "Seja um advogado parceiro" (2026-09-18, pedido do operador, print de
   referência — só a estrutura de campos do form, tom próprio pra diferenciar
   do rodapé e da faixa-cta, que também são azul-marinho).
   ========================================================================== */

/* 2026-09-20: degradê invertido — o lado escuro agora fica atrás do texto/título
   (esquerda), o lado mais claro atrás do card do formulário. */
.scbase-faixa-parceiro {
	background: linear-gradient(135deg, #0a1f42 0%, #123a73 100%);
	padding: var(--scbase-espaco-secao) 0;
}

.scbase-faixa-parceiro-inner {
	display: grid;
	/* 2026-09-18: era minmax(0, 420px) — ficou estreito/apertado demais do
	   lado do formulário (pedido do operador pra alargar). */
	grid-template-columns: minmax(0, 1fr) minmax(340px, 560px);
	gap: 56px;
	align-items: center;
}

.scbase-faixa-parceiro-texto h2 {
	color: var(--scbase-cor-titulo-sobre-escuro);
	font-size: 2rem;
	line-height: 1.2;
	margin: 0 0 20px;
}

.scbase-faixa-parceiro-texto p {
	color: var(--scbase-cor-texto-sobre-escuro);
	font-size: 1.05rem;
	line-height: 1.7;
	max-width: 46ch;
}

.scbase-faixa-parceiro-card {
	background: var(--scbase-cor-superficie);
	border-radius: var(--scbase-raio-grande);
	padding: 32px;
	box-shadow: 0 20px 45px rgba(5, 15, 35, 0.35);
}

.scbase-faixa-parceiro-card h3 {
	color: var(--scbase-cor-acento);
	font-size: 1.25rem;
	margin: 0 0 20px;
}

.scbase-form-parceiro,
.scbase-form-parceiro p {
	margin: 0 0 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Card mais largo (2026-09-18): aproveita o espaço extra colocando pares de
   campo lado a lado em vez de tudo empilhado numa coluna só. */
.scbase-form-parceiro-linha {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 18px;
}

.scbase-form-parceiro-linha p {
	margin-bottom: 0;
}

@media (max-width: 480px) {
	.scbase-form-parceiro-linha {
		grid-template-columns: 1fr;
	}
}

.scbase-form-parceiro label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--scbase-cor-texto);
}

.scbase-form-parceiro label span[aria-hidden="true"]:first-of-type {
	color: var(--scbase-cor-acento);
}

.scbase-form-dica {
	font-weight: 400;
	color: var(--scbase-cor-texto-suave);
	text-transform: none;
}

.scbase-form-parceiro input:not([type="hidden"]) {
	font: inherit;
	font-size: 1rem;
	color: var(--scbase-cor-texto);
	background: var(--scbase-cor-fundo-alt);
	border: 1px solid var(--scbase-cor-borda);
	border-radius: var(--scbase-raio);
	padding: 13px 16px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.scbase-form-parceiro input:focus-visible {
	outline: none;
	background: var(--scbase-cor-fundo);
	border-color: var(--scbase-cor-primaria);
	box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.16);
}

.scbase-form-parceiro button[type="submit"] {
	width: 100%;
	justify-content: center;
	margin-top: 4px;
}

@media (max-width: 900px) {
	.scbase-faixa-parceiro-inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.scbase-faixa-parceiro-card {
		padding: 24px;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.scbase-footer {
	/* 2026-09-10, pedido do operador: rodapé no mesmo azul marinho da matriz. */
	background: var(--scbase-cor-primaria);
	color: var(--scbase-cor-texto-sobre-escuro);
	padding: 72px 0 28px;
	margin-top: var(--scbase-espaco-secao);
}

/* Rodapé com foto de fundo (2026-09-05) — opcional, via option `rodape_imagem`.
   Overlay escuro forte pra manter as colunas de texto legíveis sobre a foto. */
.scbase-footer--com-imagem {
	background-size: cover;
	background-position: center;
}

.scbase-footer a {
	color: var(--scbase-cor-texto-sobre-escuro);
}

/* 4 colunas: marca+redes | menu | áreas | contatos (Camada 1, item 6). */
.scbase-footer-colunas {
	display: grid;
	/* 2026-09-20 (Almega): sem a coluna de Áreas, o grid antigo (4 trilhas p/ 3
	   filhos) jogava o Contato numa trilha estreita e deixava a última vazia —
	   daí o endereço espremido. Agora: marca | menu | contato | botão de
	   consulta; com Áreas (`--com-areas`) ela entra antes do Contato. */
	grid-template-columns: 1fr 1fr 1.6fr 1.2fr;
	gap: 40px;
	align-items: start;
}

.scbase-footer-colunas--com-areas {
	grid-template-columns: 1fr 1fr 1fr 1.5fr 1.1fr;
}

.scbase-footer-col h3 {
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--scbase-cor-titulo-sobre-escuro);
	margin-bottom: 16px;
}

.scbase-footer-marca-nome {
	margin: 0 0 8px;
	font-family: var(--scbase-fonte-titulo);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--scbase-cor-texto-sobre-escuro);
}

.scbase-footer-marca-descricao {
	margin: 0 0 12px;
	font-size: 0.92rem;
	color: var(--scbase-cor-texto-sobre-escuro);
	opacity: 0.75;
}

.scbase-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.scbase-footer-menu a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	font-size: 0.95rem;
	opacity: 0.88;
}

.scbase-footer-menu a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* Ícone por item do menu do rodapé (2026-09-05). */
.scbase-footer-menu-icone {
	flex: none;
	width: 15px;
	height: 15px;
	opacity: 0.85;
}

/* Botão "Ver áreas de atuação" do rodapé (2026-09-05, pedido do operador):
   branco em repouso (contraste contra o fundo escuro do rodapé, mesmo
   racional do botão da faixa-cta), dourado (--scbase-cor-acento) no hover —
   nunca verde aqui. Fica só neste contexto; os outros usos de
   .scbase-area-card-cta (Saiba mais, Ler mais) continuam no verde padrão. */
.scbase-footer-col > .scbase-area-card-cta {
	background: var(--scbase-cor-superficie);
	color: var(--scbase-cor-primaria);
}

.scbase-footer-col > .scbase-area-card-cta:hover {
	background: var(--scbase-cor-acento);
	color: var(--scbase-cor-primaria);
}

.scbase-footer-contato p {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	color: var(--scbase-cor-texto-sobre-escuro);
	opacity: 0.92;
}

.scbase-footer-contato a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	/* Mesmo bug do `.scbase-contato-info-item` (página de Contato) — ver
	   comentário lá. E-mail sem espaço dentro de coluna estreita do rodapé
	   vazava e causava scroll horizontal no mobile. */
	min-width: 0;
	overflow-wrap: anywhere;
}

.scbase-footer-contato a:hover {
	text-decoration: underline;
}

/* Ícones do bloco de contato numa coluna de largura fixa: telefone, e-mail,
   endereço e horário começam todos no mesmo x (2026-09-20). */
.scbase-footer-contato .scbase-icon {
	flex: none;
	width: 18px;
	height: 18px;
}

/* Endereço em 2 linhas: ícone no topo do bloco, linhas alinhadas à esquerda. */
.scbase-footer-contato .scbase-footer-endereco a {
	align-items: flex-start;
}

.scbase-footer-contato .scbase-footer-endereco .scbase-icon {
	margin-top: 2px;
}

.scbase-footer-endereco-texto span {
	display: block;
	line-height: 1.5;
}

/* Coluna do botão de consulta (ao lado de Contato). */
.scbase-footer-consulta-texto {
	margin: 0 0 18px;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--scbase-cor-texto-sobre-escuro);
	opacity: 0.85;
}

.scbase-footer-redes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	/* 30px entre a logo e o botão do Instagram (2026-09-20, pedido do operador:
	   estava "grudado"). */
	margin: 30px 0 0;
}

/* Botão do Instagram no rodapé (2026-09-20, pedido do operador): ícone + @perfil,
   contorno claro sobre o azul (o branco cheio fica pro botão de consulta),
   cantos quadrados como os demais botões do site, dourado no hover. */
.scbase-footer .scbase-footer-instagram {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	border-radius: 8px;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.scbase-footer .scbase-footer-instagram .scbase-icon {
	flex: none;
	width: 20px;
	height: 20px;
}

.scbase-footer .scbase-footer-instagram:hover,
.scbase-footer .scbase-footer-instagram:focus-visible {
	background: var(--scbase-cor-acento);
	border-color: var(--scbase-cor-acento);
	color: var(--scbase-cor-primaria);
	transform: translateY(-2px);
}

/* Barra legal — formato fixo do workspace: "Todos os direitos reservados | {nome}"
   + "Feito por" com link do WhatsApp da ES Soluções. ~11px, como no calibre. */
.scbase-footer-legal {
	margin: 48px 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba(244, 241, 234, 0.15);
	/* 2026-09-20, pedido do operador: as duas frases numa linha só, ocupando a
	   largura toda (direitos à esquerda, "Feito por" à direita). No mobile
	   volta a empilhar centralizado (regra no @media 900px). */
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 32px;
	font-size: 0.72rem;
	color: var(--scbase-cor-texto-sobre-escuro);
	opacity: 0.7;
}

.scbase-footer-legal p {
	margin: 0;
	color: inherit;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 900px) {
	.scbase-grid-areas {
		grid-template-columns: repeat(2, 1fr);
	}

	.scbase-post-layout {
		grid-template-columns: 1fr;
	}

	.scbase-post-sidebar {
		position: static;
	}

	.scbase-contato-grid {
		grid-template-columns: 1fr;
	}

	.scbase-como-funciona-linha {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 40px;
	}

	.scbase-single-layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.scbase-single-sidebar {
		position: static;
		order: 2;
	}

	.scbase-single-main {
		order: 1;
	}

	.scbase-footer-colunas {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}

@media (max-width: 782px) {
	:root {
		--scbase-espaco-secao: 56px;
	}

	.scbase-grid-areas {
		grid-template-columns: 1fr;
	}

	/* Menu mobile (2026-09-05): antes disso a `ul` só virava coluna e ficava
	   SEMPRE aberta dentro do header (sem colapsar) — em qualquer página o
	   header nascia com os 5 itens do menu abertos empilhados, empurrando o
	   conteúdo pra baixo. Agora esconde por padrão; `menu-mobile.js` abre via
	   classe `.is-aberto` no clique do hamburguer. */
	.scbase-menu-toggle {
		display: flex;
		/* O botão tem 40px de área de toque, mas as barrinhas (span) só 22px —
		   ficavam centralizadas dentro da caixa, sobrando respiro "de graça" à
		   direita mesmo com o padding do header já certo (achado real no
		   cliente Bento e Mello, 2026-09-06, promovido pra base).
		   `align-items:flex-end` gruda as barras na borda direita da própria
		   caixa de 40px, sem encolher a área de toque (acessibilidade). */
		align-items: flex-end;
	}

	.scbase-menu-principal {
		position: static;
	}

	.scbase-menu-principal > ul {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		background: var(--scbase-cor-superficie);
		border-top: 1px solid var(--scbase-cor-borda);
		border-bottom: 1px solid var(--scbase-cor-borda);
		box-shadow: var(--scbase-sombra-card);
		padding: 4px 20px 16px;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
		z-index: 60;
	}

	.scbase-menu-principal.is-aberto > ul {
		display: flex;
	}

	.scbase-menu-principal > ul > li {
		width: 100%;
		position: relative;
	}

	.scbase-menu-principal > ul > li > a {
		width: 100%;
		padding: 13px 0;
		border-bottom: 1px solid var(--scbase-cor-borda);
	}

	/* No mobile a seta vira um botão de verdade (menu-mobile.js), então o
	   indicador desenhado no próprio link (hover, que não existe no toque) some. */
	.scbase-menu-principal > ul > li.menu-item-has-children > a::after {
		display: none;
	}

	.scbase-menu-principal > ul > li > a::before {
		display: none;
	}

	.scbase-submenu-toggle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		/* 2026-09-20, pedido do operador ("a setinha está muito pequena, horrível de clicar"):
		   ícone de 14px -> 26px e área de toque de 46x46 -> 64x50 (a altura acompanha a linha do
		   item), com o ícone em opacidade total. Não fica menor que 44px de toque em nenhum eixo. */
		width: 64px;
		height: 50px;
		border: none;
		background: transparent;
		background-color: currentColor;
		-webkit-mask-image: url("assets/icons/chevron-down.svg");
		mask-image: url("assets/icons/chevron-down.svg");
		-webkit-mask-size: 26px;
		mask-size: 26px;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		color: var(--scbase-cor-primaria);
		opacity: 1;
		transition: transform 0.18s ease;
	}

	.menu-item-has-children.is-aberto > .scbase-submenu-toggle {
		transform: rotate(-180deg);
	}

	.scbase-menu-principal .sub-menu {
		display: none;
		position: static;
		border: none;
		box-shadow: none;
		padding-left: 16px;
		width: 100%;
	}

	/* Mesma especificidade da regra desktop de :hover/:focus-within (fora de
	   media query) — sem isso, tocar no link foco/hover no touchscreen (comum
	   no Safari iOS: primeiro toque = hover) reabria o submenu por baixo do
	   controle do JS. Repete a regra aqui pra fechar por padrão no mobile. */
	.scbase-menu-principal li:hover > .sub-menu,
	.scbase-menu-principal li:focus-within > .sub-menu {
		display: none;
	}

	/* Especificidade tem que bater/superar a regra de fechar acima
	   (.scbase-menu-principal li:focus-within > .sub-menu = 3 classes + 1
	   elemento): sem o prefixo `.scbase-menu-principal`, esta regra de abrir
	   tinha só 3 classes e PERDIA pro fechamento por :focus-within — o botão
	   da seta recebe foco assim que é tocado no mobile, então o submenu nunca
	   aparecia visualmente mesmo com o JS marcando `.is-aberto` e
	   `aria-expanded="true"` corretamente (achado real, cliente Almega
	   Ativos, 2026-09-18). */
	.scbase-menu-principal .menu-item-has-children.is-aberto > .sub-menu {
		display: flex;
	}

	.scbase-header-inner {
		/* 2026-09-04: acompanha a redução do padrão desktop (12px) — mobile
		   igual ou mais compacto, nunca maior, já que o header fica sticky. */
		padding-top: 10px;
		padding-bottom: 10px;
		/* Necessário como referência pro `position:absolute` do botão
		   hamburguer abaixo. */
		position: relative;
	}

	/* Bug de base real (achado no cliente Bento e Mello, 2026-09-06, promovido
	   pra base): `.scbase-header-inner` é `display:flex;
	   justify-content:space-between; gap:16px` com 3 filhos (logo, botão
	   hamburguer, nav) — no mobile a `<nav>` (3º filho) fica com o `<ul>`
	   escondido, largura 0, mas CONTINUA sendo um item do flex, e o `gap:16px`
	   do container se aplica entre QUALQUER par de itens vizinhos mesmo que um
	   deles tenha largura zero — isso empurra o botão pra longe da margem
	   direita, e nem `margin-left:auto` resolve (só empurra o grupo [botão,
	   nav], o gap continua entre eles). Solução: tirar o botão do fluxo do
	   flex completamente (`position:absolute`, ancorado no mesmo padding
	   lateral de `.scbase-container`, 24px) — não depende mais de quantos
	   itens/gaps existem do lado dele. */
	.scbase-menu-toggle {
		position: absolute;
		right: 24px;
		top: 50%;
		transform: translateY(-50%);
	}

	/* Escondido no mobile: já tem WhatsApp flutuante + barra superior de
	   contato; repetir aqui também competiria por espaço com o hamburguer. */
	.scbase-menu-cta {
		display: none;
	}

	.scbase-hero-cheio {
		padding: 56px 0;
	}

	.scbase-hero-compacto {
		padding: 40px 0;
	}

	/* Hero mobile — padrão obrigatório (ver knowledge-base/hero-desktop-mobile/00-padrao-hero.md):
	   com foto real, a foto fica sozinha e limpa lá em cima, sem overlay escurecendo,
	   largura total na proporção real dela (nunca cover/crop). O conteúdo (título,
	   texto, CTA) é empurrado pra baixo da foto via padding-top calibrado pela altura
	   real da imagem obrigatória 700x600 (proporção 7:6 = 0.857 * largura da viewport
	   = altura renderizada da imagem em background-size:100% auto), + respiro. */
	/* 2026-09-20 (pedido do operador): o bloco título/selo/texto/botão sobe 100px em relação ao
	   padrão (antes `+ 18px` abaixo da foto, agora `- 82px`): o título entra sobre a parte de
	   baixo da foto, que termina num degradê azul-marinho de propósito, e o botão volta pra
	   dentro da primeira tela do celular pequeno. */
	.scbase-hero-cheio.scbase-hero--com-fundo {
		min-height: auto;
		padding-top: calc(85.71vw - 82px);
		padding-bottom: 28px;
	}

	.scbase-hero-compacto.scbase-hero--com-fundo {
		min-height: auto;
		padding-top: calc(85.71vw - 82px);
		padding-bottom: 24px;
	}

	.scbase-hero--com-fundo {
		background-size: 100% auto;
		background-position: top center;
		background-repeat: no-repeat;
		/* Cor sólida da área abaixo da foto = tom mais escuro da própria foto
		   (pedido do padrão, calibrado por imagem/cliente). Almega: a foto mobile atual
		   (2026-09-20, `mobile-hero-home.jpg`) termina em #03133e (medido na borda inferior);
		   com #101a3d, o tom antigo, aparecia uma emenda clara entre a foto e o fundo. */
		background-color: #03133e;
	}

	/* Grupo título/texto/CTA colado (padrão), e H1 do hero com tamanho fixo próprio
	   em vez do clamp() genérico de `h1` — o clamp cresce demais em telas maiores
	   dentro da faixa mobile e não deixa espaço pro CTA caber dentro do orçamento de
	   altura (regra dos ~667px, iPhone SE). Calibrado medindo via getBoundingClientRect. */
	.scbase-hero-cheio.scbase-hero--com-fundo h1,
	.scbase-hero-compacto.scbase-hero--com-fundo h1 {
		font-size: 24px;
		line-height: 1.2;
	}

	.scbase-hero-cheio.scbase-hero--com-fundo .scbase-hero-texto,
	.scbase-hero-compacto.scbase-hero--com-fundo .scbase-hero-texto {
		margin: 6px 0 10px;
		font-size: 0.92rem;
		line-height: 1.35;
	}

	.scbase-hero-destaque {
		gap: 10px;
		padding: 6px 16px 6px 6px;
		margin: 8px 0 10px;
	}

	.scbase-hero-destaque-icone {
		width: 32px;
		height: 32px;
	}

	.scbase-hero-destaque-icone .scbase-icon {
		width: 16px;
		height: 16px;
	}

	.scbase-hero-destaque-texto {
		font-size: 0.98rem;
	}

	.scbase-hero--com-fundo::before {
		background: none;
	}

	/* Barra de contato mobile (achado real no cliente Bento e Mello, 2026-09-06,
	   promovido pra base): mantém a MESMA linha do desktop (contato à esquerda,
	   redes à direita) em vez de empilhar em 3 linhas — só reduz a folga entre
	   os itens. E-mail some no mobile (fica só telefone/WhatsApp), célula com
	   muito ruído numa barra estreita; continua aparecendo no desktop.
	   `padding-top`/`padding-bottom` isolados (nunca o shorthand `Ypx 0`): este
	   elemento também é `.scbase-container` — mesmo bug do `.scbase-page` etc. */
	.scbase-barra-superior-inner {
		flex-wrap: nowrap;
		padding-top: 8px;
		padding-bottom: 8px;
		gap: 8px 12px;
	}

	.scbase-barra-contato,
	.scbase-barra-redes {
		gap: 12px;
	}

	.scbase-barra-contato a[href^="mailto:"] {
		display: none;
	}

	.scbase-mini-hero {
		min-height: 200px;
		padding: 36px 0;
	}

	.scbase-mosaico-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.scbase-sobre-grid {
		display: flex;
		flex-direction: column-reverse;
		gap: 28px;
	}

	.scbase-como-atuamos-grid {
		display: flex;
		flex-direction: column-reverse;
		gap: 28px;
	}

	/* Foto sempre antes do texto no mobile, nas duas variantes (normal e
	   `--inverso`) — via `order`, nunca reescrevendo o HTML (regra fixa de
	   qualquer seção split). */
	.scbase-bloco-ft-grid {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.scbase-bloco-ft-imagem {
		order: -1;
	}

	.scbase-como-funciona-linha {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.scbase-secao-diferenciais {
		background-attachment: scroll;
	}

	.scbase-diferenciais-card {
		padding: 28px 24px;
	}

	.scbase-numero-valor {
		font-size: 2.5rem;
	}

	.scbase-logos-item {
		flex: 0 0 100%;
	}

	.scbase-areas-item {
		flex: 0 0 100%;
	}

	.scbase-footer-colunas,
	.scbase-footer-colunas--com-areas {
		grid-template-columns: 1fr;
	}

	.scbase-footer-legal {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	/* Rodapé mobile (achado real no cliente Bento e Mello, 2026-09-06,
	   promovido pra base): título de cada coluna sempre centraliza. O bloco
	   Marca (logo+redes) e a coluna de Áreas de Atuação centralizam por
	   completo; Menu e Contato mantêm o corpo (lista/itens) alinhado à
	   esquerda — só o título centraliza. Isso é Camada 1 (comportamento), a
	   pele decide só cor/paleta em cima disso. */
	.scbase-footer-col {
		text-align: center;
	}

	.scbase-footer-menu,
	.scbase-footer-contato p {
		text-align: left;
	}

	.scbase-footer-redes {
		justify-content: center;
	}

	/* A logo do rodapé é `<img class="custom-logo">` com `display:block` —
	   `text-align:center` no pai não centraliza elemento block, só conteúdo
	   inline. Precisa de `margin-inline:auto` de verdade. */
	.scbase-footer-col-marca .custom-logo-link img {
		margin-left: auto;
		margin-right: auto;
	}

	.scbase-whatsapp-flutuante {
		bottom: 18px;
		right: 18px;
	}

	.scbase-faixa-cta {
		padding: 40px 24px;
		border-radius: var(--scbase-raio);
	}

	.scbase-faixa-cta::before {
		width: 220px;
		height: 220px;
		right: -50px;
	}

	.scbase-contato-form,
	.scbase-contato-info {
		padding: 28px 24px;
	}

	/* Accordion do sidebar "Áreas de Atuação" (single de serviço) — achado real
	   no cliente Bento e Mello (2026-09-06), promovido pra base. Só ativa no
	   breakpoint de mobile de verdade (782px, o mesmo usado no resto do site).
	   Entre 783-900px (onde `.scbase-single-layout` já empilha em 1 coluna via
	   @media 900px acima) o comportamento continua IGUAL a sempre foi — lista
	   sempre aberta, sidebar depois do conteúdo (`order:2`) — só o mobile de
	   verdade muda pra accordion fechado por padrão, no topo da página. */
	.scbase-single-sidebar ul {
		display: none;
	}

	.scbase-single-sidebar.is-aberto ul {
		display: flex;
	}

	.scbase-single-sidebar-toggle {
		cursor: pointer;
		pointer-events: auto;
	}

	.scbase-single-sidebar-seta {
		display: block;
	}

	/* Sobrescreve o `order:2` do @media 900px acima — no mobile de verdade a
	   navegação entre áreas fica no topo da página, antes da imagem/texto do
	   serviço, já que agora é só uma barrinha compacta (accordion fechado). */
	.scbase-single-sidebar {
		order: -1;
	}

	.scbase-single-sidebar.is-aberto ul {
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid var(--scbase-cor-borda);
	}

	.scbase-single-sidebar.is-aberto li:first-child {
		border-top: none;
	}
}

/* ==========================================================================
   Botões centralizados no mobile (2026-09-20, pedido do operador): todo botão do site fica
   centralizado no celular, EXCETO os do blog (o "Ler mais" dos cartões de artigo, que segue
   como está). Fica no fim do arquivo de propósito, pra vencer as regras de cada seção.
   `display:flex` + `width:fit-content` + margens laterais auto centraliza mesmo dentro de
   um bloco com texto à esquerda, sem esticar o botão. Só margem esquerda/direita (nunca o
   atalho `margin`), pra não perder o respiro vertical que cada seção já define.
   ========================================================================== */
@media (max-width: 782px) {
	.scbase-cta:not(.scbase-menu-cta),
	.scbase-hero-cta,
	.scbase-footer-col > .scbase-area-card-cta {
		display: flex;
		justify-content: center;
		width: fit-content;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Título do topo dos artigos no celular (2026-09-20, pedido do operador): o `h1` padrão do site
   tem mínimo de 32px, e um título longo de artigo virava 3-4 linhas enormes. Só nas páginas de
   artigo (`single-post`) e só no mobile: entre 20px e 25px no máximo, acompanhando a largura da
   tela (5.4vw = ~20px num iPhone 13 mini, ~25px em telas de 460px pra cima). */
@media (max-width: 782px) {
	body.single-post .scbase-mini-hero h1 {
		font-size: clamp(20px, 5.4vw, 25px);
		line-height: 1.25;
	}
}