/* =========================================================
   Eclat Gold — Página de Contato
   Mesmos tokens do resto do site; nada de cor nova aqui.
   ========================================================= */

.eg-ct{font-family:var(--eg-body);color:var(--eg-ink);background:#fff}
.eg-ct-wrap{max-width:var(--eg-site-width,1200px);margin:0 auto;padding:0 24px}

/* breadcrumb: alinhado com o conteúdo, como na loja */
/* O breadcrumb ficava sozinho no canto, sem nada a que se alinhar, porque o
   título era centralizado. Agora o texto do cabeçalho é alinhado à esquerda —
   os dois encostam na mesma margem e ele deixa de parecer perdido. */
.eg-ct-crumb{padding:20px 0 24px;font-size:12.5px;color:var(--eg-muted)}
.eg-ct-crumb .woocommerce-breadcrumb{margin:0;font-size:12.5px;color:var(--eg-muted)}
.eg-ct-crumb a{color:var(--eg-muted);text-decoration:none}
.eg-ct-crumb a:hover{color:var(--eg-brand)}

/* ---------- cabeçalho + formulário, lado a lado ---------- */
.eg-ct-cab{display:grid;grid-template-columns:0.86fr 1.14fr;gap:56px;align-items:start;padding:6px 0 0}
.eg-ct-topo{padding:6px 0 0;text-align:left}
.eg-ct-eyebrow{display:block;font-size:10.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--eg-brand);margin-bottom:9px}
.eg-ct-topo h1{font-size:clamp(30px,3.6vw,44px);line-height:1.1;margin:0 0 14px;font-weight:600;letter-spacing:-.5px;text-wrap:balance}
.eg-ct-topo p{margin:0;max-width:34ch;font-size:15.5px;color:var(--eg-muted);line-height:1.7}

/* horário ao lado de quem vai escrever: muda a expectativa de resposta */
.eg-ct-quando{margin-top:26px;padding-top:22px;border-top:1px solid var(--eg-line)}
.eg-ct-quando-txt{display:block;margin-top:11px;font-size:13px;color:var(--eg-muted);line-height:1.7}

/* ---------- 1 · formulário ---------- */
.eg-ct-form{border:1px solid var(--eg-line);border-radius:16px;padding:32px;box-shadow:0 4px 26px rgba(6,58,49,.05);scroll-margin-top:110px;min-width:0}
.eg-ct-sechead{margin:0 0 4px;font-size:22px;font-weight:600;letter-spacing:-.2px;font-family:var(--eg-body)}
.eg-ct-subhead{margin:0 0 22px;font-size:14px;color:var(--eg-muted)}

.eg-ct-campos{display:grid;gap:14px}
.eg-ct-dupla{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.eg-ct-campo{display:flex;flex-direction:column;gap:6px;margin:0}
.eg-ct-campo label{font-size:12.5px;font-weight:600;color:#3a3a38}
.eg-ct-campo label span{color:var(--eg-muted);font-weight:400}

/* height e background declarados de propósito: o Hello Elementor estiliza
   input/select/textarea por seletor de elemento, e especificidade só ganha
   uma propriedade que a gente realmente escreve. */
.eg-ct-campo input,
.eg-ct-campo select,
.eg-ct-campo textarea{height:46px;padding:0 13px;border:1px solid var(--eg-line);border-radius:10px;background:#fff;font-family:var(--eg-body);font-size:14.5px;color:var(--eg-ink);width:100%;box-shadow:none;-webkit-appearance:none;appearance:none}
.eg-ct-campo select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a88' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px}
.eg-ct-campo textarea{height:auto;min-height:126px;padding:12px 13px;resize:vertical;line-height:1.6}
.eg-ct-campo input:focus,
.eg-ct-campo select:focus,
.eg-ct-campo textarea:focus{outline:none;border-color:var(--eg-brand);box-shadow:0 0 0 3px rgba(14,110,92,.12)}
.eg-ct-campo input::placeholder,
.eg-ct-campo textarea::placeholder{color:#b6b4ae}

/* campo-isca: fora da tela, e não apenas display:none — alguns robôs pulam
   o que está com display:none justamente por saber que é armadilha. */
.eg-ct-isca{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.eg-ct-privacidade{display:flex;gap:9px;align-items:flex-start;margin:2px 0 0;padding:11px 13px;background:var(--eg-g50);border-radius:9px;font-size:12.5px;color:var(--eg-muted);line-height:1.55}
.eg-ct-privacidade svg{width:16px;height:16px;color:var(--eg-brand);flex-shrink:0;margin-top:2px;display:block}

.eg-ct-enviar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:2px}
.eg-ct-enviar small{font-size:12px;color:var(--eg-muted);max-width:38ch;line-height:1.5}

/* background e border declarados: o Hello Elementor pinta button de #cc3366
   no hover e no focus, e sem declarar aqui o botão fica rosa depois do clique. */
.eg-ct-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:10px;background:var(--eg-brand);color:#fff;font-family:var(--eg-body);font-size:14.5px;font-weight:600;border:none;cursor:pointer;text-decoration:none;transition:.15s}
.eg-ct-btn:hover,
.eg-ct-btn:focus{background:var(--eg-brand-dark);color:#fff}
.eg-ct-btn:focus-visible{outline:2px solid var(--eg-brand);outline-offset:2px}
.eg-ct-btn svg{width:18px;height:18px;display:block}
.eg-ct-btn--ghost{background:#fff;color:var(--eg-ink);border:1px solid var(--eg-line)}
.eg-ct-btn--ghost:hover,
.eg-ct-btn--ghost:focus{background:var(--eg-g50);color:var(--eg-brand-dark)}
.eg-ct-btn--claro{background:#fff;color:var(--eg-deep)}
.eg-ct-btn--claro:hover,
.eg-ct-btn--claro:focus{background:var(--eg-g50);color:var(--eg-deep)}

/* avisos de resultado */
.eg-ct-aviso{display:flex;gap:13px;align-items:flex-start;padding:16px;border-radius:12px;margin:0 0 22px}
.eg-ct-aviso-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.eg-ct-aviso-ic svg{width:19px;height:19px;display:block}
.eg-ct-aviso b{display:block;font-size:15px;font-weight:600;margin-bottom:2px}
.eg-ct-aviso span{font-size:13.5px;line-height:1.55}
.eg-ct-aviso--ok{background:var(--eg-g50);color:var(--eg-brand-dark)}
.eg-ct-aviso--ok .eg-ct-aviso-ic{background:var(--eg-brand);color:#fff}
.eg-ct-aviso--erro{background:#fdf0ee;color:#8c3123}
.eg-ct-aviso--erro .eg-ct-aviso-ic{background:#c0392b;color:#fff}

/* ---------- 2 · canais ---------- */
.eg-ct-canais-sec{padding:52px 0 0}
.eg-ct-sec-topo{text-align:center;margin:0 0 48px}
.eg-ct-sec-topo h2{margin:0 0 16px;font-size:32px;font-weight:600;letter-spacing:-.2px}
.eg-ct-sec-topo p{margin:0;font-size:14px;color:var(--eg-muted)}

.eg-ct-canais{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.eg-ct-canal{position:relative;border:1px solid var(--eg-line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--eg-ink);transition:.15s}
.eg-ct-canal:hover{border-color:var(--eg-brand);box-shadow:0 6px 22px rgba(14,110,92,.09);color:var(--eg-ink)}
.eg-ct-canal-ic{width:44px;height:44px;border-radius:12px;background:var(--eg-g50);color:var(--eg-brand);display:grid;place-items:center;margin-bottom:12px}
.eg-ct-canal-ic svg{width:22px;height:22px;display:block}
.eg-ct-canal h3{margin:0;font-size:16px;font-weight:600;font-family:var(--eg-body)}
.eg-ct-val{font-size:19px;font-weight:600;letter-spacing:-.2px;margin:3px 0 2px}
.eg-ct-val--mail{font-size:14.5px;word-break:break-word}
.eg-ct-canal small{font-size:12.5px;color:var(--eg-muted);line-height:1.5}
.eg-ct-cta{margin-top:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:10px;font-size:14px;font-weight:600;border:1px solid var(--eg-line);color:var(--eg-ink);transition:.15s}
.eg-ct-cta svg{width:17px;height:17px;display:block}
.eg-ct-canal--wa{background:var(--eg-g50);border-color:transparent}
.eg-ct-canal--wa .eg-ct-canal-ic{background:var(--eg-brand);color:#fff}
.eg-ct-canal--wa .eg-ct-cta{background:var(--eg-brand-dark);color:#fff;border-color:transparent}
.eg-ct-canal--wa:hover .eg-ct-cta{background:var(--eg-deep)}
/* Fora do fluxo: no fluxo ele empurrava todo o conteudo do cartao do WhatsApp
   para baixo, e o icone ficava desalinhado dos outros dois cartoes. O topo do
   selo encosta na mesma altura do icone, entao a borda de 22px do cartao serve
   de referencia para os dois. */
.eg-ct-selo{position:absolute;top:22px;right:22px;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--eg-brand-dark);background:#fff;border-radius:20px;padding:4px 11px;margin:0}

.eg-ct-agora{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--eg-brand-dark);background:var(--eg-g50);border-radius:20px;padding:6px 14px}
.eg-ct-agora--off{color:var(--eg-muted);background:var(--eg-sand)}
.eg-ct-pulse{width:7px;height:7px;border-radius:50%;background:#1fa97f;box-shadow:0 0 0 3px rgba(31,169,127,.2);flex-shrink:0}
.eg-ct-agora--off .eg-ct-pulse{background:#b6b4ae;box-shadow:0 0 0 3px rgba(182,180,174,.25)}

/* atalho de pedido — mora na coluna de texto, ao lado do formulário */
.eg-ct-pedido{display:grid;grid-template-columns:40px 1fr 16px;align-items:center;gap:13px;margin-top:26px;padding:16px;background:var(--eg-sand);border:1px solid var(--eg-line);border-radius:13px;text-decoration:none;color:var(--eg-ink);transition:.15s}
.eg-ct-pedido:hover{border-color:var(--eg-brand);background:var(--eg-g50);color:var(--eg-ink)}
.eg-ct-pedido-ic{width:40px;height:40px;border-radius:11px;background:#fff;color:var(--eg-brand);display:grid;place-items:center;border:1px solid var(--eg-line)}
.eg-ct-pedido-ic svg{width:20px;height:20px;display:block}
.eg-ct-pedido-txt{min-width:0}
.eg-ct-pedido-txt b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.eg-ct-pedido-txt span{display:block;margin-top:3px;font-size:12.5px;color:var(--eg-muted);line-height:1.5}
.eg-ct-pedido > svg{width:16px;height:16px;color:#c3c3bd}
.eg-ct-pedido:hover > svg{color:var(--eg-brand)}

/* ---------- 3 · resolver sozinho ---------- */
.eg-ct-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:46px}
.eg-ct-quick a{display:flex;align-items:center;gap:9px;padding:12px 14px;border:1px solid var(--eg-line);border-radius:11px;font-size:13.5px;color:#3a3a38;background:#fff;text-decoration:none;transition:.15s}
.eg-ct-quick a:hover{border-color:var(--eg-brand);color:var(--eg-brand-dark)}
.eg-ct-quick svg{width:17px;height:17px;color:var(--eg-brand);flex-shrink:0;display:block}

/* ---------- 4 · perguntas frequentes ---------- */
.eg-ct-faq{padding:52px 0 5rem;border-top:1px solid var(--eg-line);margin-top:46px;scroll-margin-top:110px}
.eg-ct-faq-lista{max-width:760px;margin:0 auto}
.eg-ct-fq{border-bottom:1px solid var(--eg-line)}
.eg-ct-fq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:17px 2px;font-size:15px;font-weight:500}
.eg-ct-fq summary::-webkit-details-marker{display:none}
.eg-ct-fq summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--eg-muted);border-bottom:2px solid var(--eg-muted);transform:rotate(45deg);transition:transform .2s;flex-shrink:0}
.eg-ct-fq[open] summary::after{transform:rotate(-135deg)}
.eg-ct-fq summary:focus-visible{outline:2px solid var(--eg-brand);outline-offset:-2px;border-radius:6px}
.eg-ct-fq p{margin:0 0 18px;font-size:14px;color:#54544f;line-height:1.75;max-width:62ch}
.eg-ct-fq-n{width:26px;height:26px;border-radius:8px;background:var(--eg-g50);color:var(--eg-brand);display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0}

/* ---------- 5 · dados da empresa ---------- */
/* padding-top zero: o respiro de 5rem ja vem do pe do FAQ; com os dois o
   bloco de dados nasceria descolado quando o CNPJ for cadastrado. */
.eg-ct-dados{text-align:center;padding:0 0 46px;font-size:12px;color:var(--eg-muted);line-height:1.8}
.eg-ct-dados b{color:#3a3a38;font-weight:600;font-size:13px}

/* ---------- 6 · faixa final ---------- */
.eg-ct-final{background:var(--eg-deep);color:#dbeee7;text-align:center;padding:5rem 0;margin-top:10px}
.eg-ct-final h2{margin:0 0 8px;color:#fff;font-size:32px;font-weight:600;font-family:var(--eg-body)}
.eg-ct-final p{margin:0 0 20px;font-size:14px}

/* ---------- responsivo ---------- */
@media(max-width:980px){
	/* Empilha, mas continua alinhado à esquerda: centralizar de volta só no
	   celular faria o breadcrumb voltar a ficar solto. */
	.eg-ct-cab{grid-template-columns:1fr;gap:26px}
	.eg-ct-topo p{max-width:52ch}
	.eg-ct-quando{margin-top:20px;padding-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
	.eg-ct-quando-txt{margin-top:0}
	.eg-ct-quando-txt br{display:none}
}
@media(max-width:900px){
	.eg-ct-canais{grid-template-columns:1fr}
	.eg-ct-dupla{grid-template-columns:1fr}
	.eg-ct-quick{grid-template-columns:1fr 1fr}
	.eg-ct-form{padding:24px 20px}
}
@media(max-width:600px){
	.eg-ct-wrap{padding:0 16px}
	.eg-ct-crumb{padding:16px 0 18px}
	.eg-ct-form{padding:20px 18px;border-radius:14px}
	.eg-ct-canais-sec{padding-top:40px}
	.eg-ct-quick{grid-template-columns:1fr;gap:8px}
	.eg-ct-faq{padding-top:38px;padding-bottom:4rem;margin-top:34px}
	.eg-ct-enviar .eg-ct-btn{width:100%}
	.eg-ct-enviar small{max-width:none}
}
@media(prefers-reduced-motion:reduce){
	.eg-ct-canal,.eg-ct-cta,.eg-ct-btn,.eg-ct-quick a,.eg-ct-fq summary::after{transition:none!important}
}