/* ===================================================================
   SEÇÕES DA PÁGINA "QUEM SOMOS"

   Vieram do desenho aprovado da Alca (novas-secoes/quem-somos), onde
   cada seção era um bloco de HTML com <style> próprio para colar num
   widget do Elementor. Aqui o texto é bloco nativo e o CSS mora neste
   arquivo — separado do tema.css de propósito, para a página
   institucional não disputar espaço com o CSS das seções da home.

   O que mudou em relação ao desenho:
   - as cores cravadas em hex viram token do theme.json;
   - 'Archivo' e 'Inter' viram as famílias do tema (a fonte é local,
     nada de @import do Google);
   - o full-bleed feito com margin negativa some: quem estica a seção
     até a borda é o "align":"full" do bloco.

   Prefixo alca-qs- (Quem Somos) porque .alca-estr, .alca-num e
   .alca-item já são das seções da home e têm outra pele.
   =================================================================== */

/* --- peças compartilhadas -------------------------------------------- */

/* O [alca_icone] entra por wp:shortcode e o core roda wpautop antes de
   resolver o shortcode: o SVG chega dentro de um <p>. Quem zera esse
   parágrafo é .alca-icone-caixa, do tema.css; aqui só entra a medida e a
   teimosia de não encolher dentro de flex. */
.alca-qs-ico { flex: 0 0 auto; }

/* O layout de fluxo do núcleo afasta irmão de irmão com margin-block-start.
   Dentro destas grades e destas linhas quem afasta é o gap — as duas coisas
   somadas desalinhavam o topo dos cartões: o primeiro da fila não tem irmão
   antes, então só ele nascia mais alto. */
.alca-qs-banner__grade > *,
.alca-qs-frentes__grade > *,
.alca-qs-frente > *,
.alca-qs-selo > *,
.alca-qs-hist__nome > *,
.alca-qs-estr__unidades > *,
.alca-qs-unidade > *,
.alca-qs-unidade__papel > *,
.alca-qs-estr__lista > *,
.alca-qs-estr__li > *,
.alca-qs-num__marcos > *,
.alca-qs-marco > *,
.alca-qs-dif__grade > *,
.alca-qs-dif__item > *,
.alca-qs-mis__cta > * { margin-block: 0; }

/* Selo colorido em volta de um ícone menor (frentes e diferenciais).
   No desenho o ícone tinha medida própria dentro da caixa, por isso o
   selo é um grupo e o ícone é outro — o tema faz o SVG preencher a
   caixa em que está. */
.alca-qs-selo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

/* Olho-de-boi das seções: rótulo curto com risco vermelho ao lado.
   Flex e não inline-flex: dentro de um grupo de layout "constrained" o
   núcleo alinha o filho à grade com max-width e margem automática, e caixa
   em linha ignora as duas coisas — o rótulo ia parar na borda da tela,
   fora da vertical do título. */
.alca-qs-tag {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--alca);
	margin: 0 0 14px;
}
.alca-qs-tag::before {
	content: "";
	width: 24px;
	height: 2px;
	background: var(--wp--preset--color--alca);
	flex: none;
}
.alca-qs-tag--centro { justify-content: center; }
.alca-qs-tag--centro::after {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--wp--preset--color--alca);
	flex: none;
}
.alca-qs-tag--clara { color: var(--wp--preset--color--base); opacity: .9; }

/* --- seção 1: banner do topo ---------------------------------------- */

.alca-qs-banner { position: relative; overflow: hidden; }

/* Brilho vermelho no canto superior direito. O desenho fazia isto com
   ::before por cima de uma foto opcional; a foto não entrou, então
   sobra o degradê sobre o carvão do theme.json. */
.alca-qs-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(1100px 480px at 80% -10%, rgba(225, 37, 27, .30), transparent 60%),
		linear-gradient(180deg, rgba(12, 13, 16, .86), rgba(12, 13, 16, .96));
}

/* Malha técnica, apagando para a esquerda. */
.alca-qs-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: .5;
	background-image:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 42%);
	mask-image: linear-gradient(90deg, transparent, #000 42%);
}

.alca-qs-banner > * { position: relative; z-index: 1; }
.alca-qs-banner__grade > * { margin-block: 0; }

.alca-qs-banner__tag { margin-bottom: 20px; }
.alca-qs-banner__tag::before { width: 26px; height: 3px; }

.alca-qs-banner__titulo {
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 900;
	line-height: .92;
	font-size: clamp(40px, 7vw, 86px);
	letter-spacing: -.02em;
	margin: 0 0 16px;
}

.alca-qs-banner__lead {
	font-size: clamp(18px, 2.2vw, 27px);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 14px;
}
.alca-qs-banner__lead strong { color: var(--wp--preset--color--alca); }

/* A linha de apoio tem 640px de largura máxima. Ela só fica alinhada ao
   título porque mora dentro da .alca-qs-banner__grade, que é layout de
   fluxo: no layout "constrained" do bloco pai, todo filho mais estreito que
   a grade nasce centrado — e com !important, sem como recuar. */
.alca-qs-banner__sub {
	max-width: 640px;
	color: #c9ced5;
	font-size: 17px;
	line-height: 1.65;
	margin: 0;
}

/* --- seção 2: nossa história ----------------------------------------- */

.alca-qs-hist__quadro { gap: clamp(30px, 5vw, 70px); }

.alca-qs-hist__aside {
	position: sticky;
	top: 24px;
	align-self: flex-start;
}

.alca-qs-hist__titulo {
	font-weight: 900;
	font-size: clamp(28px, 3.8vw, 48px);
	line-height: 1.02;
	margin: 0;
}

/* Só os parágrafos soltos da coluna: o destaque do nome tem pele própria
   e é filho do grupo, não da coluna. */
.alca-qs-hist__corpo > p {
	color: var(--wp--preset--color--contrast-2);
	font-size: 16.5px;
	line-height: 1.75;
	margin: 0 0 18px;
}
.alca-qs-hist__corpo > p strong { color: var(--wp--preset--color--preto); }

.alca-qs-hist__corpo > p.alca-qs-hist__abertura {
	font-size: 19px;
	color: var(--wp--preset--color--preto);
	font-weight: 500;
}

/* A origem do nome: ALfonso + CAtia. */
.alca-qs-hist__nome {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 20px;
	background: var(--wp--preset--color--base-2);
	border-left: 5px solid var(--wp--preset--color--alca);
	border-radius: 0;
	padding: 22px 26px;
	margin: 6px 0 24px;
}
.alca-qs-hist__nome > * { margin-block: 0; }

.alca-qs-hist__abbr {
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 900;
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1;
	letter-spacing: .04em;
	color: var(--wp--preset--color--preto);
	margin: 0;
}

.alca-qs-hist__exp {
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-2);
	margin: 0;
}
.alca-qs-hist__exp strong { color: var(--wp--preset--color--preto); }

/* --- seção 3: empresa brasileira, tecnologia global ------------------ */

.alca-qs-frentes__topo {
	max-width: 900px;
	margin: 0 auto clamp(30px, 4vw, 48px);
	text-align: center;
}

.alca-qs-frentes__titulo {
	font-weight: 900;
	font-size: clamp(28px, 4.4vw, 54px);
	line-height: 1.02;
	margin: 0 0 20px;
}

.alca-qs-frentes__topo p {
	color: var(--wp--preset--color--contrast-2);
	font-size: 17px;
	line-height: 1.75;
	margin: 0 auto 16px;
	max-width: 820px;
}
.alca-qs-frentes__topo p:last-child { margin-bottom: 0; }
.alca-qs-frentes__topo p strong { color: var(--wp--preset--color--preto); }

.alca-qs-frentes__grade {
	max-width: 1000px;
	margin: clamp(30px, 4vw, 46px) auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.alca-qs-frente {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--linha);
	border-radius: 0;
	padding: 24px 22px;
	text-align: center;
	box-shadow: 0 6px 18px rgba(17, 20, 24, .05);
}
.alca-qs-frente > * { margin-block: 0; }

.alca-qs-frente__selo {
	width: 52px;
	height: 52px;
	margin: 0 auto 14px;
	border-radius: 0;
	background: var(--wp--preset--color--alca-fundo);
	color: var(--wp--preset--color--alca);
}
.alca-qs-frente__icone { width: 28px; height: 28px; }

.alca-qs-frente__titulo {
	font-family: var(--wp--preset--font-family--corpo);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
	margin: 0 0 4px;
}

.alca-qs-frente__texto {
	font-size: 13.5px;
	color: var(--wp--preset--color--contrast-2);
	line-height: 1.5;
	margin: 0;
}

/* --- seção 4: estrutura nacional ------------------------------------- */

.alca-qs-estr__topo {
	max-width: 760px;
	margin: 0 auto clamp(32px, 4vw, 50px);
	text-align: center;
}

.alca-qs-estr__titulo {
	font-weight: 900;
	font-size: clamp(28px, 3.8vw, 48px);
	line-height: 1.04;
	margin: 0 0 14px;
}

.alca-qs-estr__apoio {
	color: var(--wp--preset--color--contrast-2);
	font-size: 16.5px;
	line-height: 1.7;
	margin: 0;
}

.alca-qs-estr__unidades {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* A tarja vermelha do topo do card era um <div> vazio no desenho. Bloco
   vazio não existe no editor — e nem deveria: virou ::before. */
.alca-qs-unidade {
	position: relative;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--linha);
	border-radius: 0;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(17, 20, 24, .05);
	padding: 30px 24px 26px;
}
.alca-qs-unidade::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 6px;
	background: var(--wp--preset--color--alca);
}
.alca-qs-unidade > * { margin-block: 0; }

.alca-qs-unidade__papel {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--alca);
	margin: 0 0 8px;
	line-height: 1.3;
}
.alca-qs-unidade__papel p { margin: 0; font-size: inherit; }
.alca-qs-unidade__papel .alca-qs-ico { width: 15px; height: 15px; }

.alca-qs-unidade__cidade { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.alca-qs-unidade__uf { font-size: 14px; color: var(--wp--preset--color--contrast-2); margin: 0; }

.alca-qs-estr__lista {
	max-width: 1080px;
	margin: 26px auto 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.alca-qs-estr__li {
	display: flex;
	align-items: center;
	gap: 11px;
	background: var(--wp--preset--color--base-2);
	border-radius: 0;
	padding: 15px 16px;
}
.alca-qs-estr__li p { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.alca-qs-estr__li .alca-qs-ico { width: 19px; height: 19px; color: var(--wp--preset--color--alca); }

.alca-qs-estr__rodape {
	max-width: 820px;
	margin: clamp(26px, 3vw, 38px) auto 0;
	text-align: center;
	color: var(--wp--preset--color--contrast-2);
	font-size: 16px;
	line-height: 1.7;
}

/* --- seção 5: parcerias internacionais ------------------------------- */

.alca-qs-parc { position: relative; overflow: hidden; }
.alca-qs-parc::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(760px 420px at 88% 12%, rgba(225, 37, 27, .26), transparent 62%);
}
.alca-qs-parc > * { position: relative; z-index: 1; }

.alca-qs-parc__quadro { gap: clamp(30px, 5vw, 64px); }

.alca-qs-parc__titulo {
	font-weight: 900;
	font-size: clamp(28px, 3.8vw, 50px);
	line-height: 1.02;
	margin: 0 0 18px;
}

.alca-qs-parc__globo {
	width: clamp(90px, 12vw, 140px);
	height: clamp(90px, 12vw, 140px);
	color: var(--wp--preset--color--alca);
}

.alca-qs-parc__lado > p {
	color: #c9ced5;
	font-size: 16.5px;
	line-height: 1.75;
	margin: 0 0 18px;
}

.alca-qs-parc__lado > p.alca-qs-parc__destaque {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-weight: 600;
	border-left: 4px solid var(--wp--preset--color--alca);
	padding-left: 16px;
}

/* --- seção 6: nossos números ----------------------------------------- */

.alca-qs-num__topo {
	max-width: 820px;
	margin: 0 auto clamp(30px, 4vw, 48px);
	text-align: center;
}

.alca-qs-num__titulo {
	font-weight: 900;
	font-size: clamp(28px, 3.8vw, 48px);
	line-height: 1.04;
	margin: 0 0 14px;
}

.alca-qs-num__apoio {
	color: var(--wp--preset--color--contrast-2);
	font-size: 16.5px;
	line-height: 1.7;
	margin: 0;
}

/* Os contadores são o mesmo [alca_numeros] da home — inclusive a animação
   de contar até o valor. O que muda é a pele: lá é faixa preta com quatro
   colunas divididas por filete; aqui são três cartões claros com tarja
   vermelha no topo. Por isso cada regra abaixo nasce mais específica que a
   do tema.css: a ordem de carregamento dos dois arquivos não decide nada. */
.alca-qs-num .alca-num__grid {
	max-width: 1080px;
	margin: 0 auto;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.alca-qs-num .alca-num__item {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--linha);
	border-radius: 0;
	padding: 34px 26px;
	box-shadow: 0 6px 18px rgba(17, 20, 24, .05);
	overflow: hidden;
}
.alca-qs-num .alca-num__item + .alca-num__item { border-left: 1px solid var(--wp--preset--color--linha); }

/* Na home o ::after é o tracinho embaixo do número; aqui é a tarja do topo. */
.alca-qs-num .alca-num__item::after {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	width: auto;
	height: 5px;
	margin: 0;
	border-radius: 0;
}

.alca-qs-num .alca-num__c,
.alca-qs-num .alca-num__u {
	color: var(--wp--preset--color--alca);
	font-size: clamp(40px, 6vw, 64px);
	line-height: 1;
}
/* No desenho o sinal vem antes do número: "+27", não "27+". O shortcode só
   sabe escrever sufixo, então quem inverte é o flex do valor — assim o
   pattern continua com o mesmo [alca_numero] da home e o texto lido em voz
   alta ("vinte e sete mais") não muda de sentido. */
.alca-qs-num .alca-num__u { order: -1; margin-left: 0; margin-right: 0; margin-top: 0; }

.alca-qs-num .alca-num__rotulo {
	margin: 10px 0 0;
	color: var(--wp--preset--color--preto);
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.4;
}

.alca-qs-num__marcos {
	max-width: 1080px;
	margin: 20px auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.alca-qs-marco {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--linha);
	border-radius: 0;
	padding: 16px 18px;
}
.alca-qs-marco p { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.alca-qs-marco .alca-qs-ico { width: 22px; height: 22px; color: var(--wp--preset--color--alca); }

.alca-qs-num__rodape {
	max-width: 820px;
	margin: clamp(26px, 3vw, 38px) auto 0;
	text-align: center;
	color: var(--wp--preset--color--contrast-2);
	font-size: 16px;
	line-height: 1.7;
}

/* --- seção 7: nossos diferenciais ------------------------------------ */

.alca-qs-dif__topo {
	max-width: 760px;
	margin: 0 auto clamp(32px, 4vw, 50px);
	text-align: center;
}

.alca-qs-dif__titulo {
	font-weight: 900;
	font-size: clamp(28px, 3.8vw, 48px);
	line-height: 1.04;
	margin: 0 0 14px;
}

.alca-qs-dif__apoio {
	color: var(--wp--preset--color--contrast-2);
	font-size: 16.5px;
	line-height: 1.7;
	margin: 0;
}

.alca-qs-dif__grade {
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.alca-qs-dif__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: var(--wp--preset--color--base-2);
	border-radius: 0;
	padding: 20px;
	transition: background .2s, box-shadow .2s, transform .2s;
}
.alca-qs-dif__item:hover {
	background: var(--wp--preset--color--base);
	box-shadow: 0 10px 24px rgba(17, 20, 24, .08);
	transform: translateY(-3px);
}
.alca-qs-dif__item p { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; padding-top: 5px; }

.alca-qs-dif__selo {
	width: 34px;
	height: 34px;
	border-radius: 0;
	background: var(--wp--preset--color--alca);
	color: var(--wp--preset--color--base);
}
.alca-qs-dif__icone { width: 20px; height: 20px; }

/* --- seção 8: nossa missão + chamada final --------------------------- */

.alca-qs-mis { position: relative; overflow: hidden; text-align: center; }
.alca-qs-mis::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(820px 380px at 50% -18%, rgba(225, 37, 27, .32), transparent 62%);
}
.alca-qs-mis > * { position: relative; z-index: 1; }

.alca-qs-mis__tag { justify-content: center; }

.alca-qs-mis__titulo {
	font-weight: 900;
	font-size: clamp(28px, 4vw, 50px);
	line-height: 1.04;
	margin: 0 0 22px;
}

.alca-qs-mis__lead {
	font-size: clamp(17px, 2vw, 22px);
	font-weight: 600;
	line-height: 1.55;
	max-width: 800px;
	margin: 0 auto 26px;
}

.alca-qs-mis__p {
	color: #c9ced5;
	font-size: 16px;
	line-height: 1.7;
	max-width: 760px;
	margin: 0 auto 14px;
}

.alca-qs-mis__assinatura {
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 800;
	font-size: clamp(18px, 2.2vw, 24px);
	margin: 26px 0 0;
}
.alca-qs-mis__assinatura strong { color: var(--wp--preset--color--alca); }

.alca-qs-mis__cta {
	border-top: 1px solid rgba(255, 255, 255, .12);
	margin-top: clamp(34px, 4vw, 52px);
	padding-top: clamp(30px, 4vw, 44px);
}

.alca-qs-mis__convite {
	color: #c9ced5;
	font-size: 16px;
	margin: 0 0 22px;
}

.alca-qs-mis__botoes { justify-content: center; }

/* --- respostas de tela ----------------------------------------------- */

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

@media (max-width: 860px) {
	.alca-qs-estr__unidades { grid-template-columns: 1fr; max-width: 440px; }
	.alca-qs-estr__lista { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 840px) {
	.alca-qs-hist__aside { position: static; }
}

/* As colunas do core só empilham em 781px; o desenho empilha antes. */
@media (max-width: 840px) {
	.alca-qs-hist__quadro { flex-wrap: wrap; gap: 24px; }
	.alca-qs-hist__quadro > .wp-block-column { flex-basis: 100% !important; }
}

@media (max-width: 820px) {
	.alca-qs-parc__quadro { flex-wrap: wrap; gap: 28px; }
	.alca-qs-parc__quadro > .wp-block-column { flex-basis: 100% !important; }
	.alca-qs-num .alca-num__grid { grid-template-columns: 1fr; max-width: 420px; }
	.alca-qs-num .alca-num__item + .alca-num__item { border-left: 1px solid var(--wp--preset--color--linha); }
	.alca-qs-num__marcos { grid-template-columns: 1fr; max-width: 520px; }
}

@media (max-width: 720px) {
	.alca-qs-frentes__grade { grid-template-columns: 1fr; max-width: 420px; }
}

@media (max-width: 560px) {
	.alca-qs-dif__grade { grid-template-columns: 1fr; max-width: 460px; }
}

@media (max-width: 480px) {
	.alca-qs-estr__lista { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.alca-qs-dif__item { transition: none; }
	.alca-qs-dif__item:hover { transform: none; }
}