/*
Theme Name: KlassicDash
Description: Site da KlassicDash — painéis digitais para carros clássicos.
Version: 1.0.5
Requires at least: 6.3
Requires PHP: 8.0
Text Domain: klassicdash
*/

:root {
	--kd-marinho: #0d1f51;
	--kd-marinho-escuro: #081236;
	--kd-azul: #0685d6;
	--kd-azul-escuro: #0569aa;
	--kd-ciano: #2ecfec;
	--kd-texto: #1b2440;
	--kd-texto-suave: #55607a;
	--kd-cinza: #f3f6fb;
	--kd-borda: #e1e7f0;
	--kd-raio: 14px;
	--kd-sombra: 0 10px 30px rgba(13, 31, 81, .08);
	--kd-fonte-titulo: "Rajdhani", "Arial Narrow", system-ui, sans-serif;
	--kd-fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; font-family: var(--kd-fonte); color: var(--kd-texto); background: #fff; line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--kd-azul); }
h1, h2, h3 { font-family: var(--kd-fonte-titulo); line-height: 1.1; color: var(--kd-marinho); margin: 0 0 .5em; letter-spacing: .01em; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

.kd-container { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
.kd-container-estreito { max-width: 820px; }
.kd-pular { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 14px; z-index: 100; border-radius: 6px; }
.kd-pular:focus { left: 8px; }

/* Botões */
.kd-botao { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .85em 1.5em; border-radius: 999px; font-weight: 600; text-decoration: none; border: 2px solid transparent; transition: background .2s, color .2s, border-color .2s, transform .2s; cursor: pointer; font-size: 1rem; font-family: inherit; line-height: 1.2; text-align: center; }
.kd-botao:hover { transform: translateY(-1px); }
.kd-botao-primario { background: var(--kd-azul); color: #fff; }
.kd-botao-primario:hover { background: var(--kd-azul-escuro); color: #fff; }
.kd-botao-contorno { border-color: rgba(255, 255, 255, .55); color: #fff; }
.kd-botao-contorno:hover { border-color: var(--kd-ciano); color: var(--kd-ciano); }
.kd-botao-whatsapp { background: #1fa855; color: #fff; }
.kd-botao-whatsapp:hover { background: #178a45; color: #fff; }
.kd-botao-pequeno { padding: .6em 1.15em; font-size: .92rem; }
.kd-botao-largo { width: 100%; }
.kd-link { font-weight: 600; text-decoration: none; }

/* Topo */
.kd-topo { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--kd-borda); }
.admin-bar .kd-topo { top: 32px; }
@media (max-width: 782px) { .admin-bar .kd-topo { top: 46px; } }
.kd-topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 80px; }
.kd-logo { display: inline-flex; flex-shrink: 0; }
.kd-topo .kd-logo img, .kd-topo .custom-logo { height: 56px; width: auto; display: block; }
.kd-nav { display: flex; align-items: center; gap: 28px; }
.kd-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.kd-menu a { color: var(--kd-texto); text-decoration: none; font-weight: 500; font-size: .97rem; }
.kd-menu a:hover { color: var(--kd-azul); }
.kd-menu-botao { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.kd-menu-botao span { display: block; width: 24px; height: 2px; background: var(--kd-marinho); margin: 5px 0; transition: transform .2s, opacity .2s; }
.kd-menu-botao[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kd-menu-botao[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kd-menu-botao[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 920px) {
	.kd-menu-botao { display: block; }
	.kd-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--kd-borda); flex-direction: column; align-items: stretch; padding: 12px 20px 20px; gap: 12px; box-shadow: var(--kd-sombra); }
	.kd-nav.aberto { display: flex; }
	.kd-nav .kd-menu { flex-direction: column; gap: 0; }
	.kd-nav .kd-menu a { display: block; padding: 10px 0; border-bottom: 1px solid var(--kd-borda); }
	.kd-topo .kd-logo img, .kd-topo .custom-logo { height: 46px; }
}

/* Hero */
.kd-hero { position: relative; overflow: hidden; color: #dbe6ff; padding-block: clamp(56px, 9vw, 110px);
	background:
		linear-gradient(rgba(46, 207, 236, .07) 1px, transparent 1px) 0 0 / 44px 44px,
		linear-gradient(90deg, rgba(46, 207, 236, .07) 1px, transparent 1px) 0 0 / 44px 44px,
		radial-gradient(circle at 75% 40%, #16357e 0%, var(--kd-marinho) 45%, var(--kd-marinho-escuro) 100%); }
.kd-hero-centro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.kd-hero-texto { max-width: 820px; }
.kd-hero .kd-lead { margin-inline: auto; }
.kd-hero .kd-acoes, .kd-hero .kd-hero-itens { justify-content: center; }
.kd-hero h1 { color: #fff; }
.kd-selo { display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kd-ciano); border: 1px solid rgba(46, 207, 236, .45); border-radius: 999px; padding: .4em 1em; margin-bottom: 1.2em; }
.kd-lead { font-size: 1.15rem; color: #c3d2f2; max-width: 34em; }
.kd-acoes { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.8em 0 1.4em; }
.kd-hero-itens { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .92rem; color: #9fb3dd; }
.kd-hero-itens li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--kd-ciano); margin-right: 8px; transform: rotate(45deg); vertical-align: 1px; }
.kd-painel-svg { width: 100%; height: auto; display: block; }
.kd-hero-painel { width: 100%; max-width: 1100px; margin-top: clamp(36px, 6vw, 64px); filter: drop-shadow(0 34px 40px rgba(0, 0, 0, .55)); }

/* Mostradores (SVG) */
.kd-g-moldura { stroke: rgba(46, 207, 236, .35); stroke-width: 1.5; }
.kd-g-aro { fill: #0a1640; stroke: rgba(46, 207, 236, .5); stroke-width: 2; }
.kd-g-fundo { fill: #050c26; }
.kd-g-traco { stroke: #6f86b8; stroke-width: 2; }
.kd-g-traco-maior { stroke: #e8f1ff; stroke-width: 3.5; }
.kd-g-vermelho { fill: none; stroke: #ff4d5e; stroke-width: 10; opacity: .85; }
.kd-g-num { fill: #cfe0ff; font: 600 16px var(--kd-fonte-titulo); text-anchor: middle; }
.kd-g-unidade { fill: #7f95c4; font: 600 13px var(--kd-fonte); text-anchor: middle; letter-spacing: .06em; }
.kd-g-agulha { fill: #ff6a3d; filter: drop-shadow(0 0 4px rgba(255, 106, 61, .7)); }
.kd-g-eixo { fill: #e8f1ff; stroke: #0685d6; stroke-width: 4; }
.kd-ponteiro { transform-box: view-box; transform: rotate(var(--alvo)); animation: kd-varredura 2.2s cubic-bezier(.3, .7, .3, 1) both, kd-oscilar 3.6s ease-in-out 2.2s infinite alternate; }
.kd-p-giros { animation-delay: .15s, 2.35s; }
.kd-p-comb { animation-name: kd-varredura-comb, kd-oscilar; animation-delay: .3s, 2.5s; }
@keyframes kd-varredura-comb { 0% { transform: rotate(var(--inicio)); } 45% { transform: rotate(var(--fim)); } 100% { transform: rotate(var(--alvo)); } }
@keyframes kd-varredura { 0% { transform: rotate(135deg); } 45% { transform: rotate(405deg); } 100% { transform: rotate(var(--alvo)); } }
@keyframes kd-oscilar { from { transform: rotate(var(--alvo)); } to { transform: rotate(calc(var(--alvo) + 4deg)); } }
.kd-seta path { fill: #1fdc6b; opacity: .15; }
.kd-seta-e path { animation: kd-piscar 1.1s steps(1) infinite; }
@keyframes kd-piscar { 50% { opacity: 1; } }
.kd-g-faixa { fill: rgba(46, 207, 236, .06); stroke: rgba(46, 207, 236, .25); }
.kd-g-leitura { fill: #e8f1ff; font: 700 17px var(--kd-fonte-titulo); text-anchor: middle; }
.kd-g-rotulo { fill: #7f95c4; font-size: 12px; font-family: var(--kd-fonte); font-weight: 600; letter-spacing: .08em; }
.kd-g-tanque { fill: none; stroke: #7f95c4; stroke-width: 1.5; }
.kd-g-nivel { fill: var(--kd-ciano); }

/* Faixa de destaques */
.kd-faixa { background: #fff; padding-block: 56px; border-bottom: 1px solid var(--kd-borda); }
.kd-grade-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.kd-grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1000px) { .kd-grade-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .kd-grade-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .kd-grade-4 { grid-template-columns: 1fr; } }
.kd-destaque p, .kd-cartao p { color: var(--kd-texto-suave); font-size: .97rem; margin: 0; }
.kd-destaque-titulo { font-size: 1.35rem; margin-top: .6em; }
.kd-icone { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgba(6, 133, 214, .1); stroke: var(--kd-azul); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Seções */
.kd-secao { padding-block: clamp(64px, 9vw, 104px); }
.kd-secao-cinza { background: var(--kd-cinza); }
.kd-secao-escura { background: var(--kd-marinho); color: #c3d2f2; }
.kd-secao-escura h2, .kd-secao-escura h3 { color: #fff; }
.kd-cabecalho-secao { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.kd-cabecalho-secao p { color: var(--kd-texto-suave); font-size: 1.08rem; }
.kd-secao-escura .kd-cabecalho-secao p { color: #9fb3dd; }
.kd-sobretitulo { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kd-azul); margin-bottom: .7em; }
.kd-secao-escura .kd-sobretitulo { color: var(--kd-ciano); }

/* Etapas */
.kd-etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: etapa; }
@media (max-width: 1000px) { .kd-etapas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kd-etapas { grid-template-columns: 1fr; } }
.kd-etapa { position: relative; padding: 28px 24px; border: 1px solid var(--kd-borda); border-radius: var(--kd-raio); background: #fff; box-shadow: var(--kd-sombra); }
.kd-etapa::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--kd-azul), var(--kd-ciano)); }
.kd-etapa-num { font: 700 2.2rem/1 var(--kd-fonte-titulo); color: var(--kd-azul); display: block; margin-bottom: .4em; }
.kd-etapa p { color: var(--kd-texto-suave); margin: 0; font-size: .97rem; }

/* Cartões */
.kd-cartao { padding: 26px 22px; border-radius: var(--kd-raio); background: rgba(255, 255, 255, .04); border: 1px solid rgba(46, 207, 236, .18); transition: border-color .2s, transform .2s; }
.kd-cartao:hover { border-color: rgba(46, 207, 236, .55); transform: translateY(-2px); }
.kd-cartao h3 { margin-top: .7em; }
.kd-secao-escura .kd-cartao p { color: #9fb3dd; }
.kd-secao-escura .kd-icone { background: rgba(46, 207, 236, .12); stroke: var(--kd-ciano); }
.kd-cartao-claro { background: #fff; border-color: var(--kd-borda); box-shadow: var(--kd-sombra); }
.kd-cartao-claro:hover { border-color: var(--kd-azul); }

/* Dúvidas */
.kd-faq details { background: #fff; border: 1px solid var(--kd-borda); border-radius: var(--kd-raio); margin-bottom: 12px; }
.kd-faq summary { cursor: pointer; list-style: none; padding: 18px 52px 18px 22px; font-weight: 600; position: relative; }
.kd-faq summary::-webkit-details-marker { display: none; }
.kd-faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--kd-azul); font-weight: 400; }
.kd-faq details[open] summary::after { content: "–"; }
.kd-faq details p { padding: 0 22px 20px; margin: 0; color: var(--kd-texto-suave); }

/* Contato */
.kd-contato { background: linear-gradient(180deg, #fff 0%, var(--kd-cinza) 100%); }
.kd-contato-grade { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 920px) { .kd-contato-grade { grid-template-columns: 1fr; } }
.kd-contato-texto p { color: var(--kd-texto-suave); font-size: 1.08rem; }
.kd-lista-check { list-style: none; padding: 0; margin: 0 0 28px; }
.kd-lista-check li { padding-left: 30px; position: relative; margin-bottom: 10px; }
.kd-lista-check li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--kd-azul); color: #fff; font-size: .75rem; display: grid; place-items: center; margin-top: 3px; }
.kd-form { background: #fff; border: 1px solid var(--kd-borda); border-radius: 20px; padding: clamp(22px, 4vw, 36px); box-shadow: var(--kd-sombra); }
.kd-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .kd-campos { grid-template-columns: 1fr; } }
.kd-campo { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--kd-marinho); }
.kd-campo-largo { grid-column: 1 / -1; }
.kd-campo input, .kd-campo textarea { font: inherit; font-weight: 400; color: var(--kd-texto); padding: .75em .9em; border: 1px solid #cdd6e4; border-radius: 10px; background: #fff; width: 100%; }
.kd-campo input:focus, .kd-campo textarea:focus { outline: none; border-color: var(--kd-azul); box-shadow: 0 0 0 3px rgba(6, 133, 214, .15); }
.kd-campo-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kd-consentimento { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--kd-texto-suave); margin: 18px 0; }
.kd-consentimento input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--kd-azul); }
.kd-aviso { padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-weight: 500; }
.kd-aviso-sucesso { background: #e6f7ee; color: #146c3b; border: 1px solid #b9e6cb; }
.kd-aviso-erro { background: #fdecee; color: #9b1c2c; border: 1px solid #f5c2c9; }

/* Páginas internas */
.kd-pagina { min-height: 50vh; }
.kd-titulo-pagina { margin-bottom: .6em; }
.kd-meta { color: var(--kd-texto-suave); font-size: .9rem; }
.kd-conteudo { font-size: 1.05rem; }
.kd-conteudo h2 { font-size: 1.7rem; margin-top: 1.4em; }
.kd-artigo + .kd-artigo { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--kd-borda); }

/* Rodapé */
.kd-rodape { background: var(--kd-marinho-escuro); color: #9fb3dd; padding-top: 56px; font-size: .95rem; }
.kd-rodape-grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
@media (max-width: 760px) { .kd-rodape-grade { grid-template-columns: 1fr; } }
.kd-rodape .kd-logo img { height: 68px; width: auto; }
.kd-rodape-texto { margin-top: 14px; max-width: 30em; }
.kd-rodape-titulo { color: #fff; font-size: 1.15rem; margin-bottom: .8em; }
.kd-rodape .kd-menu { flex-direction: column; gap: 8px; }
.kd-rodape .kd-menu a, .kd-lista-contato a { color: #c3d2f2; text-decoration: none; }
.kd-rodape .kd-menu a:hover, .kd-lista-contato a:hover { color: var(--kd-ciano); }
.kd-lista-contato { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.kd-rodape-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 20px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .85rem; }
.kd-rodape-base a { color: #9fb3dd; }

/* WhatsApp flutuante */
.kd-whatsapp-flutuante { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); transition: transform .2s; }
.kd-whatsapp-flutuante:hover { transform: scale(1.06); color: #fff; }

/* Painel no formato do Fusca */
.kd-f-caixa { stroke: #000; stroke-width: 2; }
.kd-f-brilho { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 2; }
.kd-f-janela { stroke: #2b2c31; stroke-width: 3; }
.kd-f-moldura-tela { fill: #08090b; stroke: #2b2c31; stroke-width: 2; }
.kd-f-tela { stroke: rgba(46, 207, 236, .35); stroke-width: 1.5; }
.kd-f-fenda { fill: #050506; stroke: #2b2c31; }
.kd-f-lampadas rect { fill: #0b0b0d; stroke: #2b2c31; stroke-width: 1.5; }
.kd-f-lamp { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.kd-f-lamp-oleo { stroke: #ff5a3c; }
.kd-f-lamp-farol { stroke: #4da3ff; fill: none; }
.kd-f-lamp-alerta { stroke: #ff3b3b; fill: rgba(255, 59, 59, .15); }
.kd-f-lamp-bateria, .kd-f-lamp-freio { stroke: #ff3b3b; }
.kd-painel-fusca .kd-seta path { fill: #1fdc6b; }

/* Mostradores clássicos: marcações laranja sobre preto */
.kd-classico .kd-g-aro { fill: none; stroke: none; }
.kd-classico .kd-g-fundo { fill: transparent; }
.kd-classico .kd-g-traco { stroke: #ff7a1a; stroke-width: 2; }
.kd-classico .kd-g-traco-maior { stroke: #ff8c2e; stroke-width: 4; }
.kd-classico .kd-g-traco-reserva { stroke: #ff3b3b; stroke-width: 4; }
.kd-classico .kd-g-vermelho { stroke: #ff2e2e; stroke-width: 8; }
.kd-classico .kd-g-num { fill: #ff8c2e; font-size: 17px; filter: drop-shadow(0 0 3px rgba(255, 122, 26, .55)); }
.kd-classico.kd-pequeno .kd-g-num { font-size: 13px; }
.kd-classico .kd-g-unidade { fill: #d9d9de; font-size: 12px; }
.kd-classico.kd-pequeno .kd-g-unidade { font-size: 10px; }
.kd-classico .kd-g-agulha { fill: #f4f4f6; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .45)); }
.kd-classico .kd-g-eixo { fill: #1b1c20; stroke: #3a3b41; stroke-width: 3; }
.kd-f-reserva { fill: #ff3b3b !important; }
.kd-f-bomba path { fill: none; stroke: #ff8c2e; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kd-f-odometro { fill: #000; stroke: #3a3b41; }
.kd-f-odometro-num { fill: #f4f4f6; font: 600 15px ui-monospace, "SFMono-Regular", Consolas, monospace; text-anchor: middle; letter-spacing: .18em; }

/* Tela digital: informações passando uma a uma */
.kd-f-tela-rotulo { fill: #7fb6d6; font: 600 12px var(--kd-fonte); letter-spacing: .08em; text-anchor: middle; }
.kd-f-tela-icone { fill: none; stroke: var(--kd-ciano); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kd-f-tela-valor { fill: #fff; font: 700 46px var(--kd-fonte-titulo); text-anchor: middle; filter: drop-shadow(0 0 6px rgba(46, 207, 236, .5)); }
.kd-f-tela-unidade { fill: var(--kd-ciano); font-size: 19px; }
.kd-f-barra-fundo { fill: rgba(46, 207, 236, .15); }
.kd-f-barra { fill: var(--kd-ciano); }
.kd-f-ponto { fill: rgba(46, 207, 236, .25); }
.kd-f-slide { opacity: 0; }
.kd-f-slide:first-of-type { opacity: 1; }
.kd-f-ponto:first-of-type { fill: var(--kd-ciano); }
@media (prefers-reduced-motion: no-preference) {
	.kd-f-slide { animation: kd-slide 15s linear infinite both; animation-delay: calc(var(--i) * 3s); }
	.kd-f-ponto { animation: kd-ponto 15s linear infinite both; animation-delay: calc(var(--i) * 3s); }
}
@keyframes kd-slide {
	0% { opacity: 0; transform: translateX(14px); }
	3% { opacity: 1; transform: translateX(0); }
	17% { opacity: 1; transform: translateX(0); }
	20% { opacity: 0; transform: translateX(-14px); }
	100% { opacity: 0; transform: translateX(-14px); }
}
@keyframes kd-ponto { 0%, 20%, 100% { fill: rgba(46, 207, 236, .25); } 0.1%, 19.9% { fill: var(--kd-ciano); } }