/* ----------------------------------------------------------------
	Página Distribuidora (B2B)
	Carregada apenas em /distribuidora — ver RTopo.php
	Paleta herdada do site: laranja #F48534 / azul #0343BE / verde #34AF23
-----------------------------------------------------------------*/

/* Contraste: todos os pares texto/fundo abaixo foram medidos contra o
   mínimo do WCAG AA (4.5:1 texto normal, 3:1 texto grande). O laranja da
   marca com texto branco dá só 2.55:1, então ele virou cor de ACENTO —
   nunca fundo de botão nem de texto branco. */

:root {
	--dist-laranja: #F48534;        /* acento: bordas, números, marcadores */
	--dist-laranja-claro: #FFC79A;  /* texto laranja sobre fundo azul */
	--dist-azul: #0343BE;           /* ação primária — 8.23:1 com branco */
	--dist-azul-escuro: #06256B;
	--dist-verde: #25871A;          /* WhatsApp — 4.61:1 com branco (era #34AF23, 2.88:1) */
	--dist-cinza: #F4F6FA;
	--dist-texto: #33383F;          /* 4.64:1 sobre o laranja da marca */
	--dist-texto-fraco: #6B727C;
	--dist-borda: #E3E7EE;
	--dist-alvo: 44px;              /* alvo mínimo de toque */
}

/* ---- Blocos base ---- */
.dist-section { padding: 72px 0; }
.dist-section-alt { background-color: var(--dist-cinza); }

.dist-head {
	max-width: 720px;
	margin: 0 auto 44px;
	text-align: center;
}

.dist-h2 {
	font-size: 2rem;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: var(--dist-texto);
	margin-bottom: 16px;
	text-transform: none;
}

.dist-p {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--dist-texto-fraco);
	margin-bottom: 16px;
}

/* ---- Botões ----
   Regra: em fundo claro usa o azul (.dist-btn-primary); em fundo escuro
   usa o branco (.dist-btn-light). Um botão azul sobre o gradiente azul
   do hero sumiria, por isso o hero usa a versão clara. */

.dist-btn-primary,
.dist-btn-primary:hover {
	background-color: var(--dist-azul);
	color: #FFF;
	border: 0;
}
.dist-btn-primary:hover { filter: brightness(1.15); }

.dist-btn-whats,
.dist-btn-whats:hover {
	background-color: var(--dist-verde);
	color: #FFF;
	border: 0;
}
.dist-btn-whats:hover { filter: brightness(1.15); }

.dist-btn-light,
.dist-btn-light:hover {
	background-color: #FFF;
	color: var(--dist-azul-escuro);
	border: 0;
}
.dist-btn-light:hover { filter: brightness(0.94); }

/* ---- Hero ---- */
/* A foto do armazém entra ATRÁS de um gradiente quase opaco (.94/.90).
   O gradiente não é decoração: é ele que segura o contraste do texto
   branco. Se você reduzir essas opacidades para "ver melhor a foto", o
   hero deixa de passar no WCAG AA — os valores foram medidos. */
.dist-hero {
	position: relative;
	padding: 84px 0 76px;
	background-color: var(--dist-azul-escuro);
	background-image:
		linear-gradient(135deg, rgba(6, 37, 107, 0.94) 0%, rgba(3, 67, 190, 0.90) 100%),
		url("../images/distribuidora-hero.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #FFF;
}

.dist-eyebrow {
	display: inline-block;
	margin-bottom: 18px;
	padding: 6px 14px;
	border-radius: 999px;
	background-color: rgba(244, 133, 52, 0.18);
	color: var(--dist-laranja-claro);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.dist-hero-title {
	font-size: 2.5rem;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -1px;
	color: #FFF;
	margin-bottom: 20px;
	text-transform: none;
}

.dist-hero-lead {
	font-size: 1.125rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.86);
	margin-bottom: 26px;
	max-width: 40em;
}

.dist-hero-list {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}

.dist-hero-list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
	font-size: 1rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
}

.dist-hero-list i {
	position: absolute;
	left: 0;
	top: 4px;
	color: var(--dist-laranja);
}

.dist-hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.dist-hero-note {
	font-size: 0.875rem;
	/* 0.65 dava 4.35:1 no fim do gradiente, abaixo do mínimo de 4.5:1 */
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
}

/* ---- Card de logística do hero ----
   No mobile ele NÃO é escondido: prazo, pedido mínimo e área de entrega
   são as objeções que o comprador levanta primeiro, e a maior parte da
   busca local vem do celular. No celular vira uma grade 2x2 enxuta. */

.dist-hero-card {
	margin-top: 34px;
	padding: 22px;
	border-radius: 14px;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.dist-hero-card-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: #FFF;
	margin-bottom: 18px;
	text-transform: none;
	letter-spacing: 0;
}

.dist-spec {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 18px;
	margin: 0;
}

.dist-spec dt {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--dist-laranja-claro);
	margin-bottom: 2px;
}

.dist-spec dd {
	margin: 0 0 14px;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.9);
}

.dist-hero-card-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--dist-alvo);   /* era 28px, abaixo do alvo de toque */
	margin-top: 8px;
	font-weight: 600;
	color: #FFF;
	box-shadow: inset 0 -2px 0 var(--dist-laranja);
}
.dist-hero-card-link:hover { color: var(--dist-laranja-claro); }

/* No celular o título e o link do card são redundantes: o H1 e os CTAs
   logo acima já dizem a mesma coisa. Fica só a informação nova. */
@media (max-width: 991.98px) {
	.dist-hero-card-title,
	.dist-hero-card-link { display: none; }
}

/* ---- Barra de números ----
   Texto escuro, não branco: branco sobre este laranja dá 2.37:1.
   Com #33383F sobe para 4.64:1 e o laranja da marca fica preservado. */

.dist-stats {
	padding: 34px 0;
	background-color: var(--dist-laranja);
	color: var(--dist-texto);
}

.dist-stat { text-align: center; padding: 10px 0; }

.dist-stat strong {
	display: block;
	font-size: 2.25rem;
	line-height: 1.1;
	font-weight: 700;
	color: var(--dist-texto);
}

.dist-stat span {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--dist-texto);
}

/* ---- Comparativo ---- */
.dist-compare {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.dist-compare-col {
	padding: 28px;
	border-radius: 12px;
	border: 1px solid var(--dist-borda);
	background-color: #FFF;
}

.dist-compare-col h3 {
	font-size: 1.0625rem;
	font-weight: 700;
	margin-bottom: 16px;
	text-transform: none;
	letter-spacing: 0;
}

.dist-compare-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dist-compare-col li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--dist-texto-fraco);
}

.dist-compare-col li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
}

.dist-compare-bad { background-color: #FBFBFC; }
.dist-compare-bad h3 { color: var(--dist-texto-fraco); }
.dist-compare-bad li::before { content: "×"; color: #C9CFD8; font-size: 1.125rem; line-height: 1.3; }

.dist-compare-good { border-color: var(--dist-azul); box-shadow: 0 10px 30px rgba(3, 67, 190, 0.08); }
.dist-compare-good h3 { color: var(--dist-azul); }
.dist-compare-good li { color: var(--dist-texto); }
.dist-compare-good li::before { content: "✓"; color: var(--dist-verde); }

/* ---- Linhas de produto ---- */
.dist-linhas > [class^="col-"] { margin-bottom: 20px; }

.dist-linha {
	display: block;
	height: 100%;
	padding: 28px;
	border-radius: 12px;
	background-color: #FFF;
	border: 1px solid var(--dist-borda);
	border-left: 4px solid var(--dist-laranja);
	transition: transform .2s ease, box-shadow .2s ease;
}

.dist-linha:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09);
}

.dist-linha h3 {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--dist-texto);
	margin-bottom: 8px;
	text-transform: none;
	letter-spacing: 0;
}

.dist-linha span {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--dist-azul);
}

/* ---- Segmentos ----
   Eram cards em grade, iguais aos outros três blocos da página. Viraram
   chips: quebra a repetição visual e encurta a página sem perder nada. */

.dist-segmentos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dist-segmento {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 22px;
	border-radius: 999px;
	background-color: var(--dist-cinza);
	border: 1px solid var(--dist-borda);
}

.dist-segmento i {
	flex: 0 0 auto;
	font-size: 1.25rem;
	color: var(--dist-azul);
}

.dist-segmento h3 {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--dist-texto);
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
}

/* ---- Diferenciais ---- */
.dist-difs > [class^="col-"] { margin-bottom: 24px; }

.dist-dif {
	height: 100%;
	padding: 28px 24px;
	border-radius: 12px;
	background-color: #FFF;
	border: 1px solid var(--dist-borda);
}

.dist-dif-num {
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--dist-laranja);
	margin-bottom: 12px;
}

.dist-dif h3 {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--dist-texto);
	margin-bottom: 10px;
	text-transform: none;
	letter-spacing: 0;
}

.dist-dif p {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--dist-texto-fraco);
	margin: 0;
}

/* ---- Passos ----
   Linha conectora ligando os três círculos: comunica sequência, que é o
   que o bloco quer dizer, e diferencia visualmente das outras grades. */

.dist-passos {
	position: relative;
	margin-bottom: 0;
}

.dist-passos > [class^="col-"] { margin-bottom: 24px; }

.dist-passo {
	position: relative;
	text-align: center;
	padding: 0 12px;
}

.dist-passo-num {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 18px;
	border-radius: 50%;
	background-color: var(--dist-azul);
	color: #FFF;
	font-size: 1.375rem;
	font-weight: 700;
	box-shadow: 0 0 0 8px #FFF;
}

/* A linha só faz sentido quando os passos estão lado a lado */
@media (min-width: 768px) {
	.dist-passos::before {
		content: "";
		position: absolute;
		top: 27px;
		left: 16.66%;
		right: 16.66%;
		height: 2px;
		background-image: linear-gradient(to right, var(--dist-borda) 60%, transparent 0);
		background-size: 12px 2px;
		background-repeat: repeat-x;
	}
}

.dist-passo h3 {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--dist-texto);
	margin-bottom: 8px;
	text-transform: none;
	letter-spacing: 0;
}

.dist-passo p {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--dist-texto-fraco);
	margin: 0;
}

/* ---- CTA intermediário ---- */
.dist-cta-mid {
	padding: 48px 0;
	background-color: var(--dist-azul-escuro);
	color: #FFF;
}

.dist-cta-mid h2 {
	font-size: 1.625rem;
	font-weight: 700;
	color: #FFF;
	margin-bottom: 6px;
	text-transform: none;
	letter-spacing: -0.5px;
}

.dist-cta-mid p {
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
}

/* ---- Formulário ---- */
.dist-form-section { background-color: var(--dist-cinza); }

.dist-contato-list {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
}

.dist-contato-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 14px;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--dist-texto);
}

.dist-contato-list i {
	flex: 0 0 auto;
	font-size: 1.125rem;
	color: var(--dist-azul);
	margin-top: 2px;
}

.dist-form {
	padding: 32px;
	border-radius: 14px;
	background-color: #FFF;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.07);
}

.dist-form .form-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--dist-texto);
	margin-bottom: 6px;
}

.dist-form .req { color: #D64545; }

.dist-form .form-control,
.dist-form .form-select {
	height: auto;
	padding: 12px 14px;
	font-size: 0.9375rem;
	border: 1px solid var(--dist-borda);
	border-radius: 8px;
	background-color: #FFF;
}

.dist-form .form-control:focus,
.dist-form .form-select:focus {
	border-color: var(--dist-azul);
	box-shadow: 0 0 0 3px rgba(3, 67, 190, 0.12);
	outline: 0;
}

.dist-form textarea.form-control { min-height: 110px; }

.dist-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dist-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 11px 16px;          /* 44px de altura: alvo mínimo de toque */
	min-height: var(--dist-alvo);
	border: 1px solid var(--dist-borda);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--dist-texto);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.dist-check:hover { border-color: var(--dist-azul); }

.dist-check input { margin: 0; accent-color: var(--dist-azul); }

.dist-check input:checked + span { color: var(--dist-azul); font-weight: 600; }

.dist-check:focus-within {
	border-color: var(--dist-azul);
	box-shadow: 0 0 0 3px rgba(3, 67, 190, 0.12);
}

.dist-form-note {
	margin: 14px 0 0;
	font-size: 0.8125rem;
	color: var(--dist-texto-fraco);
	text-align: center;
}

/* honeypot: escondido de humanos, visível para bots */
.dist-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- FAQ ----
   O padding fica no <summary>, não no <details>: é o summary que recebe
   o clique. Com o padding no pai, a área clicável era só a linha de
   texto (24px de altura) — bem abaixo do alvo mínimo de toque. */

.dist-faq details {
	padding: 0;
	margin-bottom: 12px;
	border: 1px solid var(--dist-borda);
	border-radius: 10px;
	background-color: #FFF;
}

.dist-faq summary {
	display: flex;
	align-items: center;
	min-height: var(--dist-alvo);
	padding: 18px 52px 18px 24px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--dist-texto);
	cursor: pointer;
	list-style: none;
	position: relative;
}

.dist-faq summary::-webkit-details-marker { display: none; }

.dist-faq summary::after {
	content: "+";
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1;
	color: var(--dist-laranja);
}

.dist-faq details[open] summary::after { content: "–"; }

.dist-faq summary:focus-visible {
	outline: 2px solid var(--dist-azul);
	outline-offset: -2px;
	border-radius: 10px;
}

.dist-faq details p {
	margin: 0;
	padding: 0 24px 20px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--dist-texto-fraco);
}

/* ---- CTA final ---- */
.dist-cta-final {
	padding: 72px 0;
	background: linear-gradient(135deg, var(--dist-azul-escuro) 0%, var(--dist-azul) 100%);
	color: #FFF;
}

.dist-cta-final h2 {
	font-size: 2rem;
	font-weight: 700;
	color: #FFF;
	margin-bottom: 10px;
	text-transform: none;
	letter-spacing: -0.5px;
}

.dist-cta-final p {
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 28px;
}

.dist-cta-final-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/* ---- Campos opcionais do formulário ----
   O formulário tinha 8 campos + 6 checkboxes de cara. Os quatro que o
   vendedor consegue perguntar depois ficam atrás deste toggle. */

.dist-opcionais {
	margin-bottom: 16px;
	border-top: 1px solid var(--dist-borda);
	padding-top: 14px;
}

.dist-opcionais > summary {
	display: flex;
	align-items: center;
	min-height: var(--dist-alvo);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--dist-azul);
	cursor: pointer;
	list-style: none;
}

.dist-opcionais > summary::-webkit-details-marker { display: none; }

.dist-opcionais > summary::before {
	content: "+";
	margin-right: 8px;
	font-size: 1.125rem;
	line-height: 1;
}

.dist-opcionais[open] > summary::before { content: "–"; }

.dist-opcionais > summary:focus-visible {
	outline: 2px solid var(--dist-azul);
	outline-offset: 3px;
	border-radius: 4px;
}

.dist-opcionais-corpo { padding-top: 14px; }

/* ---- Barra fixa de CTA no mobile ----
   A página tem mais de 6.000px. Sem isso, quem rolou até o meio precisa
   voltar ao topo ou ir até o fim para achar um botão. */

.dist-barra-mobile {
	position: fixed;
	z-index: 399;               /* abaixo do #gotoTop do tema (400) */
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	background-color: rgba(255, 255, 255, 0.97);
	border-top: 1px solid var(--dist-borda);
	box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.1);
}

.dist-barra-mobile a {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: var(--dist-alvo);
	padding: 10px 8px;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: #FFF;
	text-align: center;
	line-height: 1.2;
}

.dist-barra-mobile .dist-barra-orcamento { background-color: var(--dist-azul); }
.dist-barra-mobile .dist-barra-whats { background-color: var(--dist-verde); }

.dist-barra-mobile a:focus-visible {
	outline: 3px solid var(--dist-laranja);
	outline-offset: -3px;
}

/* Espaço para a barra não cobrir o rodapé */
@media (max-width: 991.98px) {
	body.dist-page { padding-bottom: 76px; }
}

@media (min-width: 992px) {
	.dist-barra-mobile { display: none; }
}

/* ---- Acessibilidade: foco visível em tudo que é clicável ---- */
.dist-hero a:focus-visible,
.dist-linha:focus-visible,
.dist-cta-final a:focus-visible,
.dist-form button:focus-visible {
	outline: 3px solid #FFC79A;
	outline-offset: 3px;
}

/* ---- Desktop ---- */
@media (min-width: 768px) {
	.dist-compare { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 992px) {
	.dist-section { padding: 90px 0; }
	.dist-hero { padding: 100px 0 92px; }
	.dist-hero-title { font-size: 3rem; }
	.dist-h2 { font-size: 2.375rem; }
	.dist-cta-final h2 { font-size: 2.375rem; }

	/* No desktop o card volta a ser um cartão de verdade, ao lado do texto */
	.dist-hero-card { margin-top: 0; padding: 32px; }
	.dist-spec { gap: 4px 24px; }
}

/* ---- Respeita quem pediu menos movimento ---- */
@media (prefers-reduced-motion: reduce) {
	.dist-linha { transition: none; }
	.dist-linha:hover { transform: none; }
}