/**
 * Contato — [drope_contato].
 *
 * Só o que a home ainda não tinha. Tokens, tipografia e cabeçalho vêm de
 * home-blocks.css, declarada como dependência.
 *
 * A DECISÃO VISUAL
 * ----------------
 * A página tem três blocos que competem pela atenção: os canais, os atalhos e o
 * formulário. Se os três tiverem o mesmo peso, a pessoa lê tudo e escolhe o
 * mais familiar — que é sempre o formulário, o caminho mais lento dos três.
 *
 * Então a hierarquia é deliberada e desigual:
 *
 *   o WhatsApp é o único cartão escuro, porque é o canal mais rápido;
 *   os atalhos são cartões claros e clicáveis por inteiro, com respiro grande,
 *     porque é onde a maioria deveria parar;
 *   o formulário é uma seção larga no fim, sem cor de destaque — presente,
 *     completo, e claramente o último recurso.
 */

/* ============================================================
 * Base
 * ============================================================ */

.ct { padding: var(--hb-pad) 0; }

/*
 * O topo em duas colunas.
 *
 * `align-items: end` alinha o cartão pela BASE do texto, não pelo topo. É o que
 * faz as duas colunas terminarem na mesma linha em vez de o cartão flutuar no
 * meio do vazio — e é a diferença entre parecer arrumado e parecer solto.
 *
 * O `.hb-head` traz uma margem inferior grande, que aqui é zerada e passa para
 * o container: com ela nas duas colunas, o alinhamento pela base sairia torto.
 */
.ct-topo {
	display: grid;
	gap: 24px;
	margin-bottom: clamp(38px, 4.5vw, 60px);
	grid-template-columns: 1fr;
	align-items: end;
}

.ct-topo .ct-head {
	max-width: 640px;
	margin-bottom: 0;
}

.ct-sec-cab { margin-bottom: 24px; }

.ct .ct-sec-cab h3 {
	margin: 0;
	font-size: clamp(21px, 2.2vw, 27px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.18;
	color: var(--hb-text);
}

.ct .ct-sec-cab p {
	margin: 8px 0 0;
	max-width: 56ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--hb-muted);
}

/* ============================================================
 * Estado do atendimento
 * ============================================================ */

/*
 * A marcação vem do shortcode `[atendimento]`, do plugin, que devolve três
 * `<div class="support-status">` seguidas — a primeira com `online` ou
 * `offline`. Estilizar o que existe é o preço de manter uma verdade só sobre o
 * horário; recriar a marcação aqui daria mais controle e duas fontes para o
 * mesmo dado.
 */
/*
 * O cartão de estado é o componente `.sp-estado`, estilizado em
 * support-page.css. Aqui só se ajusta a margem, que lá serve a uma página em
 * que ele é o elemento principal e aqui seria espaço morto entre as colunas.
 */
.ct-topo-lado .sp-estado { margin: 0; }

/* ============================================================
 * Canais
 * ============================================================ */

.ct-canais {
	display: grid;
	gap: 14px;
	margin: 40px 0 56px;
	grid-template-columns: 1fr;
}

.ct-canal {
	display: grid;
	gap: 4px;
	padding: 22px 20px 20px;
	border: 1px solid var(--hb-line);
	border-radius: var(--hb-r-lg);
	background: var(--hb-surface);
	box-shadow: var(--hb-sh-sm);
}

.ct-canal-ico {
	display: grid;
	place-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 8px;
	border-radius: 13px;
	background: var(--hb-accent-bg);
	color: var(--hb-accent-deep);
}

.ct-canal-ico svg { width: 19px; height: 19px; }

.ct-canal-cab {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.ct .ct-canal-cab strong {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--hb-text);
}

.ct-canal-meta {
	font-size: 11.5px;
	font-weight: 650;
	letter-spacing: 0.03em;
	color: var(--hb-accent-deep);
}

.ct .ct-canal p {
	margin: 6px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--hb-muted);
}

.ct a.ct-canal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 42px;
	margin-top: 16px;
	padding: 0 18px;
	border: 1px solid var(--hb-line-2);
	border-radius: 11px;
	font-size: 14px;
	font-weight: 650;
	color: var(--hb-dim);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.ct a.ct-canal-btn svg { width: 15px; height: 15px; }

.ct a.ct-canal-btn:hover {
	border-color: var(--hb-accent);
	background: var(--hb-accent-bg);
	color: var(--hb-accent-deep);
}

/*
 * O canal mais rápido é o único escuro. Não é enfeite: é a única forma de a
 * hierarquia sobreviver a alguém que lê a página em dois segundos.
 */
.ct-canal.is-main {
	border-color: transparent;
	background: var(--hb-deep);
	box-shadow: var(--hb-sh);
}

.ct .ct-canal.is-main .ct-canal-cab strong { color: #fff; }
.ct .ct-canal.is-main p { color: rgba(251, 246, 236, 0.66); }

.ct-canal.is-main .ct-canal-ico {
	background: rgba(255, 126, 1, 0.16);
	color: var(--hb-accent);
}

.ct-canal.is-main .ct-canal-meta { color: var(--hb-accent); }

.ct .ct-canal.is-main .ct-canal-btn {
	border-color: transparent;
	background: var(--hb-accent-btn);
	color: var(--hb-on-accent);
}

.ct .ct-canal.is-main .ct-canal-btn:hover {
	background: var(--hb-accent-btn-hover);
	color: var(--hb-on-accent);
}

/* ============================================================
 * Atalhos
 * ============================================================ */

.ct-atalhos { margin-bottom: 56px; }

.ct-atalhos-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}

/*
 * O cartão inteiro é o link. Um `<a>` em volta de tudo dá um alvo enorme e
 * dispensa a pergunta "clico no título ou no botão?" — a resposta é: em
 * qualquer lugar.
 */
.ct a.ct-atalho {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px;
	border: 1px solid var(--hb-line);
	border-radius: var(--hb-r-lg);
	background: var(--hb-surface);
	color: inherit;
	text-decoration: none;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.ct a.ct-atalho:hover {
	transform: translateY(-2px);
	border-color: var(--hb-accent-soft);
	box-shadow: var(--hb-sh);
}

.ct-atalho-ico {
	display: grid;
	place-content: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 12px;
	background: var(--hb-bg-warm);
	color: var(--hb-dim);
}

.ct-atalho-ico svg { width: 18px; height: 18px; }

.ct a.ct-atalho:hover .ct-atalho-ico {
	background: var(--hb-accent-bg);
	color: var(--hb-accent-deep);
}

.ct-atalho-txt { display: grid; gap: 4px; min-width: 0; }

.ct .ct-atalho-txt strong {
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--hb-text);
}

/*
 * `> span:not(.ct-atalho-acao)` e não `span` solto: dentro de `.ct-atalho-txt`
 * há dois spans com papéis diferentes, e um seletor genérico pintaria os dois
 * igual. É a mesma armadilha que já custou um número invisível noutra página.
 */
.ct .ct-atalho-txt > span:not(.ct-atalho-acao) {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--hb-muted);
}

.ct .ct-atalho-acao {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 650;
	color: var(--hb-accent-deep);
}

.ct-atalho-acao svg {
	width: 14px;
	height: 14px;
	transition: transform 0.18s ease;
}

.ct a.ct-atalho:hover .ct-atalho-acao svg { transform: translateX(3px); }

/* ============================================================
 * Formulário
 * ============================================================ */

.ct-form {
	display: grid;
	gap: 26px;
	margin-bottom: 48px;
	padding: 28px 24px;
	border: 1px solid var(--hb-line);
	border-radius: var(--hb-r-xl);
	background: var(--hb-surface);
	scroll-margin-top: 92px;
	grid-template-columns: 1fr;
}

.ct .ct-form h3 {
	margin: 0;
	font-size: clamp(20px, 2vw, 25px);
	font-weight: 700;
	letter-spacing: -0.028em;
	color: var(--hb-text);
}

.ct .ct-form-lado > p {
	margin: 9px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--hb-muted);
}

/* ---------- O que informar ---------- */

.ct-dicas {
	margin-top: 22px;
	padding: 16px 18px;
	border-radius: var(--hb-r);
	background: var(--hb-bg-warm);
}

.ct-dicas-t {
	display: block;
	margin-bottom: 12px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--hb-muted);
}

.ct-dicas ul {
	display: grid;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-dicas li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--hb-muted);
}

.ct .ct-dicas li strong {
	display: block;
	font-weight: 650;
	color: var(--hb-text);
}

.ct-dica-ok {
	display: grid;
	place-content: center;
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--hb-accent-bg);
	color: var(--hb-accent-deep);
}

.ct-dica-ok svg { width: 11px; height: 11px; }

.ct .ct-form-pe {
	margin: 18px 0 0;
	font-size: 13px;
	color: var(--hb-muted);
}

.ct .ct-form-pe a {
	font-weight: 650;
	color: var(--hb-accent-deep);
	text-decoration: none;
	border-bottom: 1px solid var(--hb-accent-soft);
}

/*
 * A caixa do formulário só dá moldura. Mexer nos campos por CSS quebraria assim
 * que alguém editasse o modelo no Elementor, que é justamente o motivo de o
 * formulário estar lá e não aqui.
 */
.ct-form-caixa {
	padding: 4px;
	border: 1px solid var(--hb-line);
	border-radius: var(--hb-r-lg);
	background: var(--hb-bg);
}

/*
 * Modelo do Elementor que não exista no ambiente devolve vazio. Sem isto,
 * sobraria um retângulo com borda e nada dentro — o que parece defeito, e no
 * local seria defeito permanente já que o modelo só existe em produção.
 */
.ct-form-caixa:empty { display: none; }

.ct-form-caixa .elementor { margin: 0; }

/* ============================================================
 * Redes
 * ============================================================ */

.ct-social { text-align: center; }

.ct .ct-social h3 {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hb-muted);
}

.ct-social-l {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.ct .ct-social-l a {
	padding: 8px 16px;
	border: 1px solid var(--hb-line-2);
	border-radius: var(--hb-pill);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hb-dim);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ct .ct-social-l a:hover {
	border-color: var(--hb-accent);
	color: var(--hb-accent-deep);
}

/* ============================================================
 * Telas maiores
 * ============================================================ */

@media (min-width: 700px) {
	.ct-canais { grid-template-columns: repeat(3, 1fr); }
	.ct-atalhos-grid { grid-template-columns: repeat(2, 1fr); }
	.ct-form { padding: 34px 32px; }
}

@media (min-width: 900px) {
	/*
	 * A divisão do topo é 60/40, e não 70/30.
	 *
	 * A primeira tentativa deu 380px fixos à direita, o que parecia suficiente e
	 * não era: com o relógio ocupando cerca de 120px, sobrava pouco mais de 200
	 * para o texto — o título quebrava em duas linhas e a frase em quatro, e o
	 * cartão passava a parecer espremido no canto em vez de ser a segunda
	 * coluna da faixa.
	 *
	 * Em 40% ele fica um pouco mais largo que um cartão da grade de baixo, que é
	 * o que a faixa pede: duas colunas em cima, três embaixo, com a divisão de
	 * cima caindo dentro da terceira coluna de baixo.
	 */
	.ct-topo {
		gap: 32px;
		grid-template-columns: minmax(0, 1fr) minmax(400px, 40%);
	}
}

@media (min-width: 1000px) {
	.ct-atalhos-grid { grid-template-columns: repeat(3, 1fr); }
	.ct-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.ct a.ct-atalho,
	.ct a.ct-canal-btn,
	.ct-atalho-acao svg { transition: none; }

	.ct a.ct-atalho:hover { transform: none; }
	.ct a.ct-atalho:hover .ct-atalho-acao svg { transform: none; }
}