/* ==========================================================================
   Sousènsi — página Fale conosco (seções sd-contato-*, migrations/202610202306-fale-conosco.sh)
   Só layout: títulos seguem a tipografia global do Elementor (H1 a H6); rótulo e texto de
   apoio são os componentes de base.css (sd-eyebrow, sd-section__lead). O formulário
   (Contato › Formulários › Fale conosco) usa as classes sd-form*.
   ========================================================================== */

body.sd [class*="sd-contato-"] { margin: 0 !important; }
body.sd [class*="sd-contato-"] .elementor-element-populated { padding: 0 !important; }
body.sd [class*="sd-contato-"] .elementor-heading-title { text-wrap: balance; }
body.sd [class*="sd-contato-"] :is(h1, h2).elementor-heading-title { margin-bottom: 20px; }

/* -------------------------------------------------------------- abertura */

body.sd .sd-contato-abertura { padding: clamp(56px, 7vw, 104px) 16px clamp(32px, 4vw, 56px) !important; text-align: center; }
body.sd .sd-contato-abertura > .elementor-container { max-width: 760px !important; }
body.sd .sd-contato-abertura .sd-section__lead .elementor-heading-title { max-width: 46ch; margin-inline: auto; }

/* -------------------------------------------------------------- canais e formulário:
   os outros caminhos à esquerda, o formulário à direita, abaixo do ∞ (sd-divisor, base.css) */

body.sd .sd-contato-canais { padding: 0 16px clamp(56px, 7vw, 104px) !important; }
body.sd .sd-contato-canais > .elementor-container {
	max-width: 1160px !important;
	gap: clamp(40px, 7vw, 112px);
	align-items: flex-start;
}
body.sd .sd-contato-canais .elementor-widget-wrap { display: block !important; }

/* Canais: linha técnica com ícone fino, como as garantias */
body.sd .sd-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
body.sd .sd-contact-list li { display: flex; align-items: flex-start; gap: 14px; margin: 0; }
body.sd .sd-contact-list svg { flex: none; margin-top: 2px; color: var(--sd-blue); }
body.sd .sd-contact-list svg,
body.sd .sd-contact-list svg * { fill: none !important; stroke: currentColor !important; }
body.sd .sd-contact-list span { display: flex; flex-direction: column; gap: 2px; font-size: 0.9375rem; line-height: 1.55; color: var(--sd-ink-soft); }
body.sd .sd-contact-list strong { font-weight: 500; color: var(--sd-ink); }
body.sd .sd-contact-list a { color: var(--sd-ink-soft); text-decoration: none; text-underline-offset: 4px; }
body.sd .sd-contact-list a:hover { color: var(--sd-ink); text-decoration: underline; }

body.sd .sd-contact-note {
	margin: 32px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--sd-line);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--sd-ink-soft);
}
body.sd .sd-contact-note a { color: var(--sd-ink); text-decoration: underline; text-underline-offset: 4px; }

/* -------------------------------------------------------------- formulário (sd-form) */

body.sd .sd-form p { margin: 0; }
body.sd .sd-form__field { margin-bottom: 20px !important; }
body.sd .sd-form__field label {
	display: block;
	margin: 0 0 8px;
	font-size: var(--sd-step--1);
	line-height: 1.4;
	font-weight: 400;
	color: var(--sd-ink-soft);
}
/* Campos brancos com contorno fino no Azul claro e cantos levemente arredondados */
body.sd .sd-form .wpcf7-form-control-wrap { display: block; padding: 0 !important; margin: 0 !important; }
body.sd .sd-form :is(input[type="text"], input[type="email"], textarea) {
	display: block;
	width: 100% !important;
	min-height: 48px;
	padding: 12px 16px !important;
	background: var(--sd-white) !important;
	border: 1px solid var(--sd-sky) !important;
	border-radius: 8px !important;
	font-family: var(--sd-text) !important;
	font-size: 1rem !important;    /* 16px: o iPhone não dá zoom ao tocar */
	line-height: 1.5;
	color: var(--sd-ink) !important;
	box-shadow: none !important;
	transition: border-color .25s var(--sd-ease), box-shadow .25s var(--sd-ease);
}
body.sd .sd-form textarea { min-height: 150px; resize: vertical; }
body.sd .sd-form :is(input, textarea):focus { outline: none; border-color: var(--sd-blue-deep) !important; box-shadow: 0 0 0 3px rgba(111, 135, 161, 0.15) !important; }
body.sd .sd-form :is(input, textarea).wpcf7-not-valid { border-color: var(--sd-clay) !important; }
body.sd .sd-form .wpcf7-not-valid-tip { margin-top: 6px; font-size: var(--sd-step--1); color: var(--sd-ink); }

body.sd .sd-form__note { margin-top: 4px !important; font-size: var(--sd-step--1); line-height: 1.6; color: var(--sd-ink-soft); }
body.sd .sd-form__note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
body.sd .sd-form__actions { margin-top: 24px !important; }
/* Enviando (js/formularios.js troca o texto do botão): campos esmaecidos e travados, botão
   pulsando devagar. O ícone de espera do plugin sai: o botão já diz o que está acontecendo. */
body.sd .sd-form .wpcf7-spinner { display: none !important; }
body.sd .wpcf7-form.submitting .sd-form__field { opacity: .55; pointer-events: none; transition: opacity .3s var(--sd-ease); }
body.sd .wpcf7-form.submitting .wpcf7-submit { cursor: progress; pointer-events: none; animation: sd-sending 1.4s ease-in-out infinite; }
@keyframes sd-sending { 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) {
	body.sd .wpcf7-form.submitting .wpcf7-submit { animation: none; opacity: .75; }
}

/* Confirmação do envio (.sd-form__done, no modelo do formulário): no lugar dos campos, um painel
   com o ∞, título e texto; a tela e o foco vão até ele (js/formularios.js). "resetting" é o
   instante em que o plugin limpa os campos, logo depois do envio; mas ele também reinicia o form ao
   abrir uma página que veio do cache, e aí o painel não pode aparecer: só com data-sd-sent, que o
   JS põe no envio. Os erros continuam na linha de resposta abaixo do botão. O mesmo painel, com
   is-visible, confirma a avaliação enviada na página de produto (js/produto.js). */
body.sd .sd-form__done { display: none; }
body.sd .wpcf7-form:is(.sent, .resetting[data-sd-sent]) .sd-form > :not(.sd-form__done),
body.sd .wpcf7-form:is(.sent, .resetting[data-sd-sent]) .wpcf7-response-output { display: none !important; }
body.sd :is(.wpcf7-form:is(.sent, .resetting[data-sd-sent]) .sd-form__done, .sd-form__done.is-visible) {
	display: block;
	padding: clamp(40px, 6vw, 64px) clamp(24px, 4vw, 48px);
	background: color-mix(in srgb, var(--sd-sky) 14%, var(--sd-paper));   /* Azul claro bem diluído no fundo */
	border-radius: 8px;
	text-align: center;
	outline: none;
	animation: sd-form-done .5s var(--sd-ease) both;
}
body.sd .sd-form__done::before {
	content: "";
	display: block;
	width: 48px;
	height: 19px;
	margin: 0 auto 24px;
	background: var(--sd-blue);
	-webkit-mask: url("../img/simbolo-sousensi.svg") center / contain no-repeat;
	mask: url("../img/simbolo-sousensi.svg") center / contain no-repeat;
}
body.sd .sd-form__done p { max-width: 38ch; margin: 0 auto 12px !important; color: var(--sd-ink-soft); line-height: 1.6; }
body.sd .sd-form__done p.sd-form__done-title {
	max-width: none;
	margin-bottom: 16px !important;
	font-family: var(--sd-display) !important;
	font-weight: var(--sd-display-weight);
	font-size: var(--sd-step-3);
	line-height: 1.2;
	color: var(--sd-ink);
}
body.sd .sd-form__done .sd-nowrap { white-space: nowrap; }   /* "e-mail" sem quebrar no hífen */
body.sd .sd-form__done a { color: var(--sd-ink); text-decoration: underline; text-underline-offset: 4px; }
body.sd .sd-form__done .sd-form__again {
	margin-top: 16px;
	padding: 4px 0;
	background: none !important;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	font-family: var(--sd-text);
	font-size: var(--sd-step--1);
	font-weight: 500;
	letter-spacing: var(--sd-caps-tracking);
	text-transform: uppercase;
	color: var(--sd-ink);   /* o Azul profundo fica abaixo de 4,5:1 sobre o fundo do painel */
	cursor: pointer;
}
@keyframes sd-form-done { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
	body.sd :is(.wpcf7-form:is(.sent, .resetting[data-sd-sent]) .sd-form__done, .sd-form__done.is-visible) { animation: none; }
}

/* Resposta do envio: discreta, com o filete da marca (azul quando deu certo, Terracota se não) */
body.sd .sd-contato-canais .wpcf7-response-output {
	margin: 24px 0 0 !important;
	padding: 4px 0 4px 16px !important;
	border: 0 !important;
	border-left: 1px solid var(--sd-blue) !important;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--sd-ink);
}
body.sd .sd-contato-canais .wpcf7 form:is(.invalid, .unaccepted, .failed, .spam, .aborted) .wpcf7-response-output { border-left-color: var(--sd-clay) !important; }

@media (max-width: 767px) {
	body.sd .sd-contato-canais > .elementor-container { flex-direction: column; }
	body.sd .sd-contato-canais .elementor-column { width: 100% !important; }
	/* No celular, o formulário vem primeiro */
	body.sd .sd-contato-canais__form { order: -1; }
	body.sd .sd-form .wpcf7-submit { width: 100% !important; }
}