/* ===================================================================
   SEÇÕES DE ATENDIMENTO — ASSISTÊNCIA TÉCNICA E CONTATO

   Mesma história das seções da home: vieram desenhadas como bloco de
   HTML com <style> próprio para colar num widget do Elementor, cada uma
   repetindo o @import das fontes do Google e cravando #E1251B. Aqui o
   CSS mora uma vez só, as cores saem do theme.json e a largura total
   vem do "align":"full" do bloco — não do truque de
   margin-left:calc(50% - 50vw), que dependia do container do Elementor.

   Arquivo separado do tema.css de propósito: são seções de duas páginas
   internas, e quem for ler o CSS das páginas de atendimento não precisa
   passar pelo catálogo inteiro antes.
   =================================================================== */

/* Verde oficial do WhatsApp. Não vira token do tema porque não é cor da
   Alca: é a cor de um app de terceiro, e um dia ele muda de tom sozinho. */
:root { --alca-wpp: #25d366; }

/* --- fluxo do core dentro das grades novas --------------------------
   O layout de fluxo afasta irmão de irmão com margin-block-start. Nestas
   seções quem afasta é o gap da grade; somados, davam um respiro a mais
   em cada linha. Mesma correção que a home já faz nas grades dela. */
.alca-atb__chips > *,
.alca-atb__chip > *,
.alca-sup__grade > *,
.alca-sup__card > *,
.alca-can__grade > *,
.alca-canal__topo > *,
.alca-canal__corpo > *,
.alca-canal__linha > *,
.alca-antes__nota > *,
.alca-antes__lista > *,
.alca-antes__item > *,
.alca-antes__texto > *,
.alca-onde__grade > *,
.alca-uni__topo > *,
.alca-uni__corpo > *,
.alca-uni__linha > *,
.alca-onde__feitos > *,
.alca-ft > * { margin-block: 0; }

/* ===================================================================
   1. BANNER DA ASSISTÊNCIA TÉCNICA (topo, tema escuro)
   =================================================================== */

.alca-atb { position: relative; overflow: hidden; }

/* Brilho vermelho no alto à direita. */
.alca-atb::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(1100px 480px at 82% -10%, rgba(225, 37, 27, .28), transparent 60%);
	pointer-events: none;
}

/* Grade técnica, esmaecida da esquerda para a direita. */
.alca-atb::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: .5;
	pointer-events: none;
	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 40%);
	mask-image: linear-gradient(90deg, transparent, #000 40%);
}

/* O conteúdo do banner alinha à esquerda dentro da grade de 1160, com
   760 de largura máxima. Dois nomes de classe no seletor para ganhar do
   layout constrained do core, que manda cada filho para o centro —
   ganhar por especificidade evita o !important. */
.alca-atb > .alca-atb__conteudo {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin-inline: 0;
}

.alca-atb__tag {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .92;
	margin: 0 0 20px;
}
.alca-atb__tag::before {
	content: "";
	width: 26px;
	height: 3px;
	flex: none;
	background: var(--wp--preset--color--alca);
}

.alca-atb__titulo {
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 900;
	line-height: .95;
	font-size: clamp(34px, 6vw, 72px);
	letter-spacing: -.02em;
	margin: 0 0 18px;
}

.alca-atb__lead {
	font-size: clamp(18px, 2.1vw, 26px);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 10px;
}
.alca-atb__lead strong { color: var(--wp--preset--color--alca); }

.alca-atb__sub {
	max-width: 660px;
	color: #c9ced5;
	font-size: 16px;
	line-height: 1.65;
	margin: 14px 0 0;
}

.alca-atb__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 30px 0 34px;
}

.alca-atb__chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	padding: 10px 15px;
	border-radius: 0;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.25;
}
.alca-atb__chip .alca-icone-caixa {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	color: var(--wp--preset--color--alca);
}

.alca-atb__botoes { gap: 14px; margin-top: 0; }

/* --- botão com o ícone do WhatsApp ----------------------------------
   O ícone entra por máscara, como a seta do botão da home: assim o botão
   continua bloco nativo e o cliente edita o rótulo pelo editor. */
.alca-botao--zap {
	--alca-zap-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15l-1.4 5 5.2-1.4A10 10 0 1 0 12 2z'/%3E%3C/svg%3E");
}
.alca-botao--zap .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.alca-botao--zap .wp-block-button__link::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: var(--alca-zap-ic) center / contain no-repeat;
	mask: var(--alca-zap-ic) center / contain no-repeat;
}

/* O segundo botão sobre fundo escuro: branco preenchido (o site não tem
   botão vazado). */
.alca-atb__botoes .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--preto);
	background-color: #fff;
}
.alca-atb__botoes .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--alca);
	color: #fff;
}

@media (max-width: 640px) {
	.alca-atb__botoes .wp-block-button { width: 100%; }
	.alca-atb__botoes .wp-block-button__link { width: 100%; justify-content: center; }
}

/* ===================================================================
   2. NOSSA ESTRUTURA DE SUPORTE (seis pilares)
   =================================================================== */

.alca-sup__topo { text-align: center; margin-bottom: clamp(34px, 4vw, 52px); }

.alca-sup__tag,
.alca-antes__tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--alca);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 0 0 14px;
}
.alca-sup__tag::before,
.alca-sup__tag::after,
.alca-antes__tag::before {
	content: "";
	width: 22px;
	height: 2px;
	flex: none;
	background: var(--wp--preset--color--alca);
}
.alca-antes__tag::before { width: 24px; }

.alca-sup__titulo {
	font-weight: 900;
	line-height: 1.05;
	font-size: clamp(26px, 3.6vw, 44px);
	margin: 0 0 14px;
}

.alca-sup__apoio,
.alca-can__apoio {
	max-width: 760px;
	margin: 0 auto;
	color: var(--wp--preset--color--contrast-2);
	font-size: 16px;
	line-height: 1.65;
}

.alca-sup__grade {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.alca-sup__card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--linha);
	border-radius: 0;
	padding: 26px 24px;
	box-shadow: 0 6px 18px rgba(17, 20, 24, .05);
	transition: transform .2s, box-shadow .2s;
}
.alca-sup__card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--wp--preset--color--alca);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .25s;
}
.alca-sup__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(17, 20, 24, .1);
}
.alca-sup__card:hover::before { transform: scaleY(1); }

/* A caixa é 52; o ícone dentro dela, 28. O .alca-icone-caixa da home
   estica o SVG para 100% da caixa, então a moldura e o desenho precisam
   ser dois elementos. */
.alca-sup__icone {
	width: 52px;
	height: 52px;
	border-radius: 0;
	background: var(--wp--preset--color--alca-fundo);
	color: var(--wp--preset--color--alca);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 12px;
}

.alca-sup__card-titulo {
	font-family: var(--wp--preset--font-family--corpo);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.25;
	margin: 2px 0 0;
}

.alca-sup__texto {
	margin: 0;
	font-size: 14px;
	color: var(--wp--preset--color--contrast-2);
	line-height: 1.55;
}

/* ===================================================================
   3. CANAIS DE ATENDIMENTO (CNCs, coladeiras, central)
   =================================================================== */

.alca-can__topo { text-align: center; margin-bottom: 40px; }

.alca-can__titulo {
	font-weight: 900;
	font-size: clamp(26px, 3.6vw, 42px);
	line-height: 1.08;
	margin: 0 0 12px;
}

.alca-can__grade {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.alca-canal {
	display: flex;
	flex-direction: column;
	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);
}

.alca-canal__topo {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 20px 22px;
	border-bottom: 3px solid var(--wp--preset--color--alca);
}

.alca-canal__icone {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 0;
	background: var(--wp--preset--color--alca-fundo);
	color: var(--wp--preset--color--alca);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

.alca-canal__nome {
	font-family: var(--wp--preset--font-family--corpo);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.15;
	margin: 0;
}

.alca-canal__corpo {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 22px;
}

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

.alca-canal__linha {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}
.alca-canal__linha .alca-icone-caixa {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	color: var(--wp--preset--color--alca);
}
.alca-canal__linha p { margin: 0; }

/* O botão verde encosta no rodapé do card, com a mesma margem lateral do
   corpo. É o último filho e não participa do gap do corpo. */
.alca-canal__acao { margin: 0 22px 22px; }
.alca-canal__acao .wp-block-button { width: 100%; }
.alca-canal__acao .wp-block-button__link {
	width: 100%;
	justify-content: center;
	background-color: var(--alca-wpp);
	color: #fff;
	border-radius: 0;
	padding: 14px;
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.25;
	transition: filter .2s;
}
.alca-canal__acao .wp-block-button__link:hover {
	background-color: var(--alca-wpp);
	filter: brightness(.93);
}

/* ===================================================================
   4. ANTES DE ENTRAR EM CONTATO (checklist)
   =================================================================== */

.alca-antes__quadro { gap: clamp(30px, 5vw, 64px); align-items: center; }

.alca-antes__titulo {
	font-weight: 900;
	line-height: 1.05;
	font-size: clamp(26px, 3.4vw, 42px);
	margin: 0 0 16px;
}

.alca-antes__apoio {
	color: var(--wp--preset--color--contrast-2);
	font-size: 16px;
	line-height: 1.65;
	margin: 0 0 16px;
}

.alca-antes__nota {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-top: 24px;
	background: var(--wp--preset--color--base-2);
	border-left: 4px solid var(--wp--preset--color--alca);
	border-radius: 0;
	padding: 16px 18px;
}
.alca-antes__nota .alca-icone-caixa {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--wp--preset--color--alca);
}
.alca-antes__nota p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--wp--preset--color--grafite);
}

.alca-antes__lista {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.alca-antes__item {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--linha);
	border-radius: 0;
	padding: 18px 20px;
	box-shadow: 0 4px 14px rgba(17, 20, 24, .04);
	transition: border-color .2s, box-shadow .2s;
}
.alca-antes__item:hover {
	border-color: #f2c9c6;
	box-shadow: 0 10px 24px rgba(225, 37, 27, .08);
}

.alca-antes__num {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 0;
	background: var(--wp--preset--color--alca);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 900;
	font-size: 18px;
	line-height: 1;
	margin: 0;
}

.alca-antes__item-titulo {
	font-family: var(--wp--preset--font-family--corpo);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 2px;
}

.alca-antes__item-texto {
	margin: 0;
	font-size: 13.5px;
	color: var(--wp--preset--color--contrast-2);
	line-height: 1.45;
}

/* ===================================================================
   5. FECHAMENTO DA ASSISTÊNCIA (CTA final, tema escuro)
   =================================================================== */

.alca-fim { position: relative; overflow: hidden; }
.alca-fim::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(760px 340px at 50% -20%, rgba(225, 37, 27, .34), transparent 62%);
}

.alca-fim > .alca-fim__conteudo {
	position: relative;
	z-index: 1;
	max-width: 820px;
	text-align: center;
}

/* O risquinho vermelho de abertura. No desenho era uma <div> vazia; aqui
   é decoração, não conteúdo — o cliente não teria o que editar nela. */
.alca-fim__conteudo::before {
	content: "";
	display: block;
	width: 54px;
	height: 4px;
	border-radius: 0;
	background: var(--wp--preset--color--alca);
	margin: 0 auto 26px;
}

.alca-fim__marca {
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 900;
	letter-spacing: .02em;
	font-size: clamp(30px, 5vw, 58px);
	line-height: 1;
	margin: 0 0 12px;
}

.alca-fim__tag {
	font-weight: 700;
	font-size: clamp(15px, 1.8vw, 20px);
	letter-spacing: .04em;
	margin: 0 0 22px;
}
.alca-fim__tag strong { color: var(--wp--preset--color--alca); }

.alca-fim__lead {
	max-width: 660px;
	margin: 0 auto 34px;
	color: #c9ced5;
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: 1.65;
}

.alca-fim__acao { justify-content: center; margin-bottom: 16px; }
.alca-fim__acao .wp-block-button__link {
	background-color: var(--alca-wpp);
	color: var(--wp--preset--color--carvao);
	border-radius: 0;
	padding: 17px 32px;
	font-weight: 800;
	font-size: 16px;
	transition: filter .2s, transform .2s;
}
.alca-fim__acao .wp-block-button__link:hover {
	background-color: var(--alca-wpp);
	color: var(--wp--preset--color--carvao);
	filter: brightness(.94);
	transform: translateY(-2px);
}
.alca-fim__acao .wp-block-button__link::before { width: 21px; height: 21px; }

.alca-fim__fone {
	margin: 0;
	font-size: 14px;
	color: #8a9098;
}

/* ===================================================================
   6. ONDE TEM ALCA (unidades, na página de contato)
   =================================================================== */

.alca-onde { position: relative; overflow: hidden; }

/* Mapa do Brasil de fundo, quase apagado. É decoração: fica fora do
   fluxo e sem leitura por leitor de tela (o SVG já sai aria-hidden). */
.alca-onde__mapa {
	position: absolute;
	right: 2%;
	top: 50%;
	transform: translateY(-50%);
	width: min(520px, 55%);
	opacity: .06;
	pointer-events: none;
	z-index: 0;
	color: #fff;
}
.alca-onde__mapa > p { margin: 0; line-height: 0; }
.alca-onde__mapa .alca-icone { width: 100%; height: auto; }

.alca-onde > .alca-onde__topo,
.alca-onde > .alca-onde__grade,
.alca-onde > .alca-onde__feitos { position: relative; z-index: 2; }

.alca-onde__topo { margin-bottom: 38px; }

.alca-onde__titulo {
	font-weight: 900;
	letter-spacing: -.01em;
	line-height: 1.05;
	font-size: clamp(26px, 3.6vw, 44px);
	text-transform: uppercase;
	margin: 0 0 10px;
}

.alca-onde__apoio {
	color: #aeb4bb;
	font-size: 15px;
	margin: 0;
}

.alca-onde__grade {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

/* Nome próprio: .alca-card já é o card de máquina do catálogo, com foto,
   sombra e link esticado. Reusar o nome trazia junto tudo aquilo. */
.alca-uni {
	display: flex;
	flex-direction: column;
	background: #16191e;
	border: 1px solid #23272d;
	border-radius: 0;
	overflow: hidden;
}

.alca-uni__topo { background: var(--wp--preset--color--alca); padding: 14px 16px; }

.alca-uni__nome {
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 800;
	font-size: 16px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin: 0;
	color: #fff;
}

.alca-uni__cidade {
	font-size: 12px;
	opacity: .92;
	margin: 0;
	color: #fff;
}

.alca-uni__corpo {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 16px;
}

.alca-uni__linha {
	display: flex;
	gap: 10px;
	font-size: 13px;
	color: #cfd3d8;
	line-height: 1.4;
}
.alca-uni__linha .alca-icone-caixa {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: var(--wp--preset--color--alca);
}
.alca-uni__linha p { margin: 0; }

.alca-uni__acao { margin: 4px 16px 16px; }
.alca-uni__acao .wp-block-button { width: 100%; }
.alca-uni__acao .wp-block-button__link {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px;
	border: 0;
	border-radius: 0;
	background-color: var(--wp--preset--color--alca);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.25;
	transition: background-color .2s;
}
.alca-uni__acao .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--alca-escuro);
	color: #fff;
}
/* O pino do "Abrir no Maps" entra por máscara, como o WhatsApp: o rótulo
   segue editável no editor. */
.alca-uni__acao .wp-block-button__link::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: var(--alca-pino-ic) center / contain no-repeat;
	mask: var(--alca-pino-ic) center / contain no-repeat;
}
.alca-uni__acao {
	--alca-pino-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E");
}

.alca-onde__feitos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-top: 34px;
	padding-top: 30px;
	border-top: 1px solid #23272d;
}

.alca-ft { display: flex; align-items: center; gap: 12px; }
.alca-ft .alca-icone-caixa {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	color: var(--wp--preset--color--alca);
}
.alca-ft p {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
}

/* ===================================================================
   RESPOSTAS DE TELA
   =================================================================== */

@media (max-width: 980px) {
	.alca-onde__grade { grid-template-columns: repeat(2, 1fr); }
	.alca-onde__feitos { grid-template-columns: repeat(2, 1fr); }
}

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

@media (max-width: 860px) {
	.alca-can__grade { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}

@media (max-width: 820px) {
	/* As colunas do core só empilham em 781px; o desenho empilha em 820. */
	.alca-antes__quadro { flex-wrap: wrap; gap: 34px; }
	.alca-antes__quadro > .wp-block-column { flex-basis: 100%; }
}

@media (max-width: 640px) {
	.alca-onde__mapa { display: none; }
}

@media (max-width: 560px) {
	.alca-sup__grade { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
	.alca-onde__grade { grid-template-columns: 1fr; }
	.alca-onde__feitos { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.alca-sup__card,
	.alca-antes__item,
	.alca-canal__acao .wp-block-button__link,
	.alca-fim__acao .wp-block-button__link { transition: none; }

	.alca-sup__card:hover { transform: none; }
	.alca-fim__acao .wp-block-button__link:hover { transform: none; }
}