/* LAYOUT DO MODELO "CENTRO AUTOMOTIVO" (referência Adricar Auto Center, enxuto) -- a assinatura visual DESTE modelo, por cima do estilo-base (modelos/oficina/css/app.css): fundo quase preto com brasas, título em degradê
   vermelho, laranja e amarelo, velocímetro que gira e balança o ponteiro, números que contam, faixa que corre, promoção da semana com contagem regressiva, linha do tempo, etapas, planos de revisão e marcas.
   Só estilo: as cores vêm das variáveis da conta (--principal, --acento) e o conteúdo vem dos módulos (catalogoPublico, contagemRegressiva, animacaoEntrada, formulariosPublicos, agendaPublica).
   Quem pede menos movimento (prefers-reduced-motion) recebe tudo parado. */
:root {
  --principal: #e11d2e; --principal-escuro: #a3121e; --destaque: #ffffff; --sobre-principal: #ffffff; --acento: #ffb703;
  --bg: #08070a; --papel: #121014; --papel2: #0d0b0e; --linha: #2a2128; --texto: #f5efe6; --suave: #b9b0b3; --topo: #050405;
  --laranja: color-mix(in srgb, var(--principal) 48%, var(--acento));
  --grad: linear-gradient(90deg, var(--principal), var(--laranja), var(--acento));
  --mono: 'Share Tech Mono', ui-monospace, monospace; --titulo: 'Exo 2', 'DM Sans', system-ui, sans-serif;
}
body { font-family: 'Rajdhani', 'DM Sans', system-ui, sans-serif; font-weight: 500; font-size: 17px; background: var(--bg); color: var(--texto); }
h1, h2, h3 { font-family: var(--titulo); text-transform: none; letter-spacing: 0; line-height: 1.1; }
.faixa-demo { background: #14090b; }

@keyframes giro { to { transform: rotate(360deg); } }
@keyframes ponteiro { 0% { transform: rotate(-135deg); } 18% { transform: rotate(101deg); } 24% { transform: rotate(92deg); } 30% { transform: rotate(101deg); } 62% { transform: rotate(101deg); } 80% { transform: rotate(-38deg); } 100% { transform: rotate(-135deg); } }
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulsar { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 70%, transparent); } 70%, 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes letreiro { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marcha { to { background-position-x: 60px; } }
@keyframes brasas { to { background-position: 0 -140px, 40px -170px; } }
@keyframes entra-cima { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes descer { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- cabeçalho: menu à esquerda (regra do produto), logo e nome, "Ligue agora" em pílula e Orçamento em verde ---------- */
.topo { min-height: 72px; padding: 8px 22px; background: rgba(5, 4, 5, .93); backdrop-filter: blur(10px); border-bottom: 0; box-shadow: 0 12px 30px -18px #000; }
.topo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); }
.burger { border-radius: 12px; border-color: color-mix(in srgb, var(--acento) 45%, transparent); color: var(--acento); }
.burger:hover { background: color-mix(in srgb, var(--acento) 14%, transparent); }
.nav-desk.aberto { border-radius: 14px; background: #0b090c; border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent); }
.nav-desk a { font-family: var(--titulo); font-weight: 700; letter-spacing: .1em; }
.nav-desk a:hover, .nav-desk a[aria-current="page"] { color: var(--acento); }
.marca-logo { height: 50px; max-width: none; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--principal) 45%, transparent)); }
.marca-textos { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marca-nome { font: 800 17px var(--titulo); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.marca-sub { font: 400 10px var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--acento); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-ligue { flex-direction: row; align-items: center; gap: 10px; padding: 5px 18px 5px 6px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--acento) 38%, transparent); background: color-mix(in srgb, var(--acento) 8%, transparent); text-decoration: none; }
.topo-ligue-icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--acento) 22%, transparent); color: var(--acento); }
.topo-ligue-txt { display: flex; flex-direction: column; line-height: 1.1; }
.topo-ligue-txt small { font: 400 9.5px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--acento); }
.topo-ligue-txt b { font: 800 15px var(--titulo); color: #fff; letter-spacing: .02em; }
.topo-orcamento { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border: 0; border-radius: 999px; background: var(--grad); color: #fff; font: 800 14px var(--titulo); letter-spacing: .03em; text-decoration: none; cursor: pointer; box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--principal) 80%, transparent); transition: transform .2s, filter .2s; }
.topo-orcamento:hover { transform: translateY(-2px); filter: brightness(1.08); }
.topo-orcamento[hidden] { display: none; }
@media (max-width: 899px) { .topo-ligue { display: none; } }
@media (max-width: 520px) { .topo { padding: 8px 12px; } .marca-nome { font-size: 14px; white-space: normal; line-height: 1.05; } .marca-sub { display: none; } .marca-logo { height: 42px; } .topo-orcamento { padding: 10px 14px; font-size: 13px; } .topo-orcamento svg { display: none; } }

/* ---------- botões e etiquetas ---------- */
.btn-cen { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 12px; border: 2px solid transparent; font: 800 15px var(--titulo); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s, filter .2s, background .2s; }
.btn-cen:hover { transform: translateY(-3px); }
.btn-cen--grad { background: var(--grad); color: #fff; box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--principal) 75%, transparent); }
.btn-cen--grad:hover { filter: brightness(1.1); box-shadow: 0 16px 36px -10px color-mix(in srgb, var(--principal) 90%, transparent); }
.btn-cen--linha { background: transparent; color: #fff; border-color: var(--principal); }
.btn-cen--linha:hover { background: var(--principal); }
.btn-cen--zap { background: #22c55e; color: #04210f; box-shadow: 0 12px 28px -10px rgba(34, 197, 94, .8); }
.btn-cen--zap:hover { filter: brightness(1.08); }
.btn-cen[hidden] { display: none; }
.selo-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--acento) 48%, transparent); background: color-mix(in srgb, var(--acento) 8%, transparent); font: 400 12px var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--acento); }
.selo-pill:has(span:empty:only-of-type) { display: none; }
.selo-pill--verm { border-color: color-mix(in srgb, var(--principal) 60%, transparent); background: color-mix(in srgb, var(--principal) 10%, transparent); color: #ff6b6b; }
.selo-ico { position: relative; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; flex: none; animation: pulsar 2.4s infinite; }
.selo-ico::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: currentColor; }
.rotulo-mono { font: 400 12px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--acento); margin: 0 0 12px; }
.rotulo-mono:empty { display: none; }
.rotulo-mono--c { text-align: center; }
.titulo-sec { font: 800 clamp(30px, 4.6vw, 54px)/1.08 var(--titulo); text-align: center; color: #fff; margin: 0 0 14px; }
.titulo-sec:empty { display: none; }
.cen-sec { padding: 76px max(22px, calc((100% - 1180px) / 2)); position: relative; }
.cen-sec:has(> h2[data-catalogo-titulo]:empty) { display: none; }
.so-leitor { display: block; font-size: 0; line-height: 0; }

/* ---------- topo da página: fundo com brasas, emblema, título em degradê, contadores e velocímetro ---------- */
.hero-cen { position: relative; overflow: hidden; isolation: isolate; padding: 52px 22px 84px; }
.hero-cen-fundo { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(8, 7, 10, .5), rgba(8, 7, 10, .9) 68%, var(--bg)), radial-gradient(55% 48% at 78% 28%, color-mix(in srgb, var(--principal) 34%, transparent), transparent 70%), var(--hero-img) center / cover no-repeat; }
.hero-cen::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .55; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--acento) 90%, transparent) 0 1.4px, transparent 2.4px) 0 0 / 90px 140px, radial-gradient(circle, color-mix(in srgb, var(--principal) 85%, transparent) 0 2px, transparent 3px) 40px 60px / 130px 170px; animation: brasas 22s linear infinite; }
.hero-cen-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.12fr .88fr; gap: 44px; align-items: center; }
.hero-col { min-width: 0; }
.hero-emblema { display: grid; place-items: center; width: 100%; margin-bottom: 26px; }
.hero-logo { width: clamp(150px, 19vw, 230px); height: auto; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--principal) 60%, transparent)); animation: flutuar 6s ease-in-out infinite; }
.hero-logo:not([src]) { display: none; }
.hero-titulo { margin: 22px 0 0; }
.hero-titulo .dif { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; animation: entra-cima .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero-titulo .dif:nth-child(2) { animation-delay: .12s; } .hero-titulo .dif:nth-child(3) { animation-delay: .24s; }
.hero-titulo .dif h3 { margin: 0; font: 900 clamp(46px, 7.2vw, 98px)/.98 var(--titulo); text-transform: uppercase; letter-spacing: -.01em; }
.hero-titulo .dif p { display: none; }
.hero-titulo .dif:nth-child(1) h3 { color: #fff6e0; }
.hero-titulo .dif:nth-child(2) h3 { background: linear-gradient(90deg, var(--principal), var(--laranja)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-titulo .dif:nth-child(3) h3 { color: var(--acento); text-shadow: 0 0 34px color-mix(in srgb, var(--acento) 45%, transparent); }
.hero-texto { margin: 22px 0 26px; max-width: 580px; }
.hero-texto p { font: 500 19px/1.6 'Rajdhani', sans-serif; color: #ddd3d1; }
.hero-botoes { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px; }
.hero-chips .dif { display: flex; align-items: center; gap: 10px; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.hero-chips .dif::before { content: ''; width: 16px; height: 16px; border: 2px solid var(--principal); border-radius: 50%; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--principal) 40%, transparent); flex: none; }
.hero-chips .dif h3 { margin: 0; font: 600 16px 'Rajdhani', sans-serif; color: #ece3e1; }
.hero-chips .dif p { display: none; }
.hero-col--dir { display: flex; flex-direction: column; align-items: stretch; }
.contadores { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contadores:empty { display: none; }
.contadores .dif { display: flex; flex-direction: column; padding: 20px 22px; background: rgba(18, 16, 20, .8); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; box-shadow: none; backdrop-filter: blur(4px); transition: border-color .25s, transform .25s; }
.contadores .dif:hover { border-color: var(--principal); transform: translateY(-3px); }
.contadores .dif-rotulo { font: 900 clamp(34px, 4.2vw, 52px)/1 var(--titulo); background: linear-gradient(90deg, var(--principal), var(--laranja)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.contadores .dif h3 { margin: 8px 0 0; font: 400 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #c2b8b6; }
.contadores .dif p { display: none; }
.role-baixo { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font: 400 10px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--acento); }
.role-baixo i { width: 1px; height: 30px; background: var(--acento); animation: descer 2.2s ease-in-out infinite; }

/* velocímetro: anel de garantia girando, escala de 0 a 240 e ponteiro que sobe, balança e volta */
.velo { position: relative; width: min(100%, 400px); aspect-ratio: 1; margin: 28px auto 0; }
.velo-anel, .velo-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.velo-borda { fill: rgba(8, 7, 10, .72); stroke: color-mix(in srgb, var(--principal) 75%, transparent); stroke-width: 2; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--principal) 55%, transparent)); }
.velo-giro { transform-origin: 210px 210px; animation: giro 70s linear infinite; }
.velo-pontos { fill: none; stroke: color-mix(in srgb, var(--acento) 42%, transparent); stroke-width: 1.4; stroke-dasharray: 2 7; }
.velo-anel-txt { font: 400 15px var(--mono); fill: var(--acento); text-transform: uppercase; }
.velo-miolo { fill: rgba(10, 9, 12, .92); stroke: rgba(255, 255, 255, .08); }
.tk { stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; } .tk--m { stroke: #fff; stroke-width: 2.6; }
.tn { fill: #e8dedc; font: 700 13px var(--titulo); }
.velo-zona { fill: none; stroke: var(--principal); stroke-width: 6; stroke-linecap: round; }
.ponteiro { transform-origin: 210px 210px; fill: var(--principal); filter: drop-shadow(0 0 6px var(--principal)); animation: ponteiro 14s cubic-bezier(.4, 0, .2, 1) infinite; }
.velo-cubo { fill: #15121a; stroke: var(--acento); stroke-width: 3; } .velo-cubo-in { fill: var(--principal); }
.velo-centro { position: absolute; left: 50%; top: 63%; transform: translateX(-50%); text-align: center; }
.velo-centro b { display: block; font: 900 clamp(34px, 5vw, 54px)/1 var(--titulo); color: #fff; text-shadow: 0 0 20px color-mix(in srgb, var(--principal) 60%, transparent); }
.velo-centro small { display: block; font: 700 14px var(--titulo); color: var(--acento); }
.velo-centro small p { margin: 0; }
.velo-centro em { display: block; margin-top: 4px; font: 400 9.5px var(--mono); letter-spacing: .26em; text-transform: uppercase; font-style: normal; color: #a99; }
.velo-centro:has([data-texto-titulo]:empty) { display: none; }
@media (max-width: 900px) { .hero-cen-in { grid-template-columns: 1fr; gap: 30px; } .hero-col--dir { align-items: center; } .contadores { width: 100%; } }

/* ---------- faixa que corre, atalhos de serviço e pilares ---------- */
.faixa-cen { overflow: hidden; background: var(--grad); padding: 12px 0; }
.faixa-cen:not(:has(.dif)) { display: none; }
.faixa-cen-in.letreiro { display: flex; width: max-content; animation: letreiro 36s linear infinite; }
.faixa-cen-in .dif { display: flex; align-items: center; margin: 0; padding: 0 0 0 30px; background: none; border: 0; box-shadow: none; border-radius: 0; white-space: nowrap; }
.faixa-cen-in .dif::after { content: '✦'; margin-left: 30px; color: #1a0b0b; opacity: .7; }
.faixa-cen-in .dif h3 { margin: 0; font: 800 15px var(--titulo); letter-spacing: .22em; text-transform: uppercase; color: #170909; }
.faixa-cen-in .dif p { display: none; }
.cen-sec--atalhos:not(:has(.dif)) { display: none; }
.cen-sec--atalhos { padding-bottom: 40px; }
.atalhos { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.atalhos .dif { text-align: center; padding: 24px 10px 20px; background: rgba(18, 16, 20, .88); border: 1px solid var(--linha); border-radius: 16px; box-shadow: none; transition: transform .25s, border-color .25s, box-shadow .25s; }
.atalhos .dif::before { content: ''; display: block; width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%; border: 2px solid var(--acento); background: radial-gradient(circle, var(--principal) 0 5px, transparent 6px), conic-gradient(from 0deg, transparent 0 20deg, color-mix(in srgb, var(--acento) 35%, transparent) 20deg 40deg, transparent 40deg 80deg, color-mix(in srgb, var(--acento) 35%, transparent) 80deg 100deg, transparent 100deg 140deg, color-mix(in srgb, var(--acento) 35%, transparent) 140deg 160deg, transparent 160deg 200deg, color-mix(in srgb, var(--acento) 35%, transparent) 200deg 220deg, transparent 220deg 260deg, color-mix(in srgb, var(--acento) 35%, transparent) 260deg 280deg, transparent 280deg 320deg, color-mix(in srgb, var(--acento) 35%, transparent) 320deg 340deg, transparent 340deg); box-shadow: 0 0 18px color-mix(in srgb, var(--acento) 22%, transparent); }
.atalhos .dif:hover { transform: translateY(-5px); border-color: var(--principal); box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--principal) 70%, transparent); }
.atalhos .dif:hover::before { animation: giro 2.4s linear infinite; }
.atalhos .dif h3 { margin: 0; font: 700 14px var(--titulo); text-transform: uppercase; letter-spacing: .03em; color: #fff; }
.atalhos .dif p { margin-top: 6px; font: 400 10px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--suave); }
.pilares { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 22px; border: 1px solid var(--linha); border-radius: 16px; background: rgba(10, 8, 11, .85); overflow: hidden; }
.pilares .dif { padding: 24px 18px; text-align: center; background: none; border: 0; border-right: 1px solid var(--linha); border-radius: 0; box-shadow: none; }
.pilares .dif:last-child { border-right: 0; }
.pilares .dif h3 { margin: 0; font: 800 clamp(18px, 2.1vw, 24px) var(--titulo); text-transform: uppercase; color: var(--acento); }
.pilares .dif p { margin-top: 6px; font: 400 10.5px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--suave); }
@media (max-width: 1000px) { .atalhos { grid-template-columns: repeat(4, 1fr); } .pilares { grid-template-columns: 1fr 1fr; } .pilares .dif:nth-child(2) { border-right: 0; } .pilares .dif:nth-child(-n+2) { border-bottom: 1px solid var(--linha); } }
@media (max-width: 560px) { .atalhos { grid-template-columns: 1fr 1fr; } }

/* ---------- contato rápido e faixa de aviso ---------- */
.cen-sec--rapido { padding-top: 30px; padding-bottom: 46px; }
.rapido-cen { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cr { display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-radius: 18px; background: rgba(10, 8, 11, .9); border: 2px solid #22c55e; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.cr:hover { transform: translateY(-4px); }
.cr--zap { box-shadow: 0 0 30px -12px rgba(34, 197, 94, .7); } .cr--fixo { border-color: var(--principal); box-shadow: 0 0 30px -12px color-mix(in srgb, var(--principal) 70%, transparent); }
.cr-ico { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%; background: #22c55e; color: #04210f; }
.cr--fixo .cr-ico { background: linear-gradient(135deg, var(--principal), var(--laranja)); color: #fff; }
.cr-txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.cr-txt small { font: 400 10.5px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--suave); }
.cr-txt b { font: 900 clamp(24px, 3vw, 36px)/1.1 var(--titulo); color: #fff; }
.cr-txt em { font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: var(--suave); }
.cr:has(b[style*="display: none"]) { display: none; }
.cr-end { grid-column: 1 / -1; justify-self: center; max-width: 100%; padding: 12px 26px; border-radius: 999px; border: 1px solid var(--linha); background: rgba(255, 255, 255, .03); font: 400 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--suave); text-decoration: none; text-align: center; }
.cr-end:has([data-config][style*="display: none"]) { display: none; }
.cr-end:hover { color: #fff; border-color: var(--acento); }
.aberto-badge { margin-left: 8px; padding: 3px 9px; border-radius: 999px; }
@media (max-width: 760px) { .rapido-cen { grid-template-columns: 1fr; } .cr { padding: 18px; } }
.hazard { height: 14px; background: linear-gradient(90deg, var(--acento) 50%, var(--principal) 50%) 0 0 / 60px 100%; animation: marcha 3s linear infinite; }

/* ---------- promoção da semana (com contagem regressiva) e oferta ---------- */
.cen-sec--promo { background: linear-gradient(135deg, #2a0a0d, #0c090b 62%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 6px); background-blend-mode: normal; }
.cen-sec--promo:has(.titulo-promo:empty) { display: none; }
.promo-grade { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: stretch; }
.promo-card { padding: 42px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(160deg, #1d1a1f, #111014); }
.titulo-promo { margin: 22px 0 18px; max-width: 6.8em; font: 900 clamp(40px, 6vw, 78px)/.98 var(--titulo); text-transform: uppercase; background: linear-gradient(180deg, #fff 0 47%, var(--principal) 53% 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.promo-corpo p { font: 500 19px/1.55 'Rajdhani', sans-serif; color: #e7dddb; margin-bottom: 8px; }
.promo-corpo p:last-child { font-style: italic; color: var(--suave); font-size: 16px; }
.promo-tempo { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 22px 0 26px; }
.contagem { display: flex; gap: 8px; padding: 10px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent); background: color-mix(in srgb, var(--acento) 7%, transparent); }
.contagem-caixa { min-width: 48px; padding: 0; border: 0; }
.contagem-caixa b { font: 900 clamp(26px, 3.4vw, 34px)/1 var(--titulo); color: var(--acento); font-variant-numeric: tabular-nums; }
.contagem-caixa small { margin-top: 4px; font: 400 9.5px var(--mono); letter-spacing: .2em; opacity: .85; color: var(--suave); }
.promo-fita { padding: 10px 24px 10px 26px; background: var(--acento); color: #1a1000; font: 800 13px var(--titulo); letter-spacing: .04em; text-transform: uppercase; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 12px 100%, 0 50%); }
.promo-fita:empty { display: none; }
.promo-botoes { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.promo-selos { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); }
.promo-selos .dif { display: flex; align-items: center; gap: 10px; max-width: 220px; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.promo-selos .dif::before { content: '✓'; display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--principal); color: var(--principal); font-size: 12px; font-weight: 800; }
.promo-selos .dif h3 { margin: 0; font: 700 12px/1.35 var(--titulo); text-transform: uppercase; color: #ddd; letter-spacing: .02em; }
.promo-selos .dif p { display: none; }
.oferta-cen { padding: 38px 34px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--acento) 55%, transparent); background: linear-gradient(160deg, #1b1507, #0c0a05); display: flex; flex-direction: column; justify-content: center; }
.oferta-cen:has([data-texto-titulo]:empty) { display: none; }
.oferta-cen h3 { font: 800 clamp(28px, 3.2vw, 40px) var(--titulo); text-transform: uppercase; color: #e9e4dc; margin: 4px 0 6px; }
.oferta-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 10px 0 24px; }
.oferta-corpo { display: contents; }
.oferta-corpo p:first-child:not(:last-child) { order: 1; font: 700 24px var(--titulo); color: #857b6c; text-decoration: line-through; margin: 0; }
.oferta-corpo p:last-child { order: 3; flex-basis: 100%; color: var(--suave); font-size: 17px; line-height: 1.5; margin: 0; }
.oferta-preco b { order: 2; font: 900 clamp(46px, 5.4vw, 68px)/1 var(--titulo); color: var(--acento); text-shadow: 0 0 26px color-mix(in srgb, var(--acento) 50%, transparent); }
@media (max-width: 900px) { .promo-grade { grid-template-columns: 1fr; } .promo-card { padding: 28px 22px; } }

/* ---------- cupom (formulário público de orçamento) ---------- */
.cen-sec--cupom { background: radial-gradient(60% 70% at 85% 40%, color-mix(in srgb, var(--principal) 22%, transparent), transparent 70%), #08070a; }
.cen-sec--cupom:has(.titulo-cupom:empty) { display: none; }
.cupom-grade { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.titulo-cupom { margin: 20px 0 16px; max-width: 9em; font: 900 clamp(34px, 4.8vw, 60px)/1.02 var(--titulo); text-transform: uppercase; background: linear-gradient(180deg, #fff 0 64%, var(--principal) 68% 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cupom-corpo p { font-size: 18px; line-height: 1.6; color: #d2c8c6; max-width: 520px; }
.cupom-itens { display: grid; gap: 14px; margin-top: 26px; }
.cupom-itens .dif { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; align-items: center; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.cupom-itens .dif::before { content: '✓'; grid-row: 1 / 3; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--principal), var(--laranja)); color: #fff; font-size: 20px; font-weight: 800; }
.cupom-itens .dif h3 { margin: 0; font: 800 18px var(--titulo); color: #fff; }
.cupom-itens .dif p { font-size: 15px; color: var(--suave); margin: 0; }
.cupom-card { padding: 36px 32px; text-align: center; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--principal) 65%, transparent); background: #050405; box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--principal) 55%, transparent); }
.cupom-grande { display: block; margin-bottom: 18px; font: 900 clamp(54px, 7vw, 90px)/1 var(--titulo); text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cupom-form { display: grid; gap: 14px; text-align: left; }
.cupom-form input:not([type="hidden"]) { width: 100%; background: #0c0a0d; border: 1px solid #382c33; color: #fff; padding: 16px 18px; font: 500 16px 'Rajdhani', sans-serif; border-radius: 12px; }
.cupom-form .enviar { width: 100%; }
.cupom-form .msg { margin: 0; min-height: 1.2em; font-size: 14px; text-align: center; }
.cupom-nota { text-align: center; font: 400 10px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--suave); }
.msg.ok { color: #4ade80; } .msg.erro { color: #ff7a7a; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 900px) { .cupom-grade { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- sobre ---------- */
.cen-sec--sobre:has(.titulo-sobre:empty) { display: none; }
.sobre-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.sobre-foto-wrap { position: relative; }
.sobre-foto { position: relative; }
.sobre-foto img { display: block; width: 100%; aspect-ratio: 1 / 1.02; object-fit: cover; border-radius: 20px; border: 2px solid color-mix(in srgb, var(--principal) 55%, transparent); box-shadow: 0 30px 60px -22px #000; }
.sobre-legenda { position: absolute; left: 22px; bottom: 22px; padding: 12px 22px; border-radius: 8px; background: var(--acento); color: #161006; font: 900 clamp(18px, 2.4vw, 28px) var(--titulo); text-transform: uppercase; }
.sobre-legenda:empty { display: none; }
.selo-anos { position: absolute; top: -16px; right: -12px; padding: 14px 24px; border-radius: 16px; text-align: center; background: var(--principal); color: #fff; box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--principal) 80%, transparent); animation: flutuar 5s ease-in-out infinite; }
.selo-anos b { display: block; font: 900 46px/1 var(--titulo); }
.selo-anos small { font: 400 11px var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.selo-anos small p { margin: 0; }
.selo-anos:has([data-texto-titulo]:empty) { display: none; }
.titulo-sobre { margin: 16px 0 18px; font: 800 clamp(32px, 4.4vw, 54px)/1.06 var(--titulo); color: #fff6e0; }
.sobre-corpo p { font-size: 18px; line-height: 1.65; color: #d6ccca; margin-bottom: 14px; }
.sobre-pontos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.sobre-pontos .dif, .dif-grade .dif { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; padding: 16px 18px; background: rgba(18, 16, 20, .85); border: 1px solid var(--linha); border-radius: 14px; box-shadow: none; transition: border-color .25s, transform .25s; }
.sobre-pontos .dif:hover, .dif-grade .dif:hover { border-color: var(--principal); transform: translateY(-3px); }
.sobre-pontos .dif::before, .dif-grade .dif::before { content: ''; grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--principal), var(--laranja)); -webkit-mask: radial-gradient(circle at 50% 50%, #000 0 100%); box-shadow: inset 0 0 0 11px color-mix(in srgb, #000 28%, transparent); }
.sobre-pontos .dif h3, .dif-grade .dif h3 { margin: 0; font: 800 17px var(--titulo); color: #fff; }
.sobre-pontos .dif p, .dif-grade .dif p { margin: 2px 0 0; font-size: 14.5px; color: var(--suave); }
@media (max-width: 900px) { .sobre-grade { grid-template-columns: 1fr; gap: 40px; } .sobre-pontos { grid-template-columns: 1fr; } }

/* linha do tempo: ano em destaque, ponto que acende e linha vertical */
.cen-sec--tempo:not(:has(.dif)) { display: none; }
.linha-tempo { position: relative; max-width: 920px; margin: 34px auto 0; display: grid; gap: 40px; }
.linha-tempo::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--principal), var(--acento) 70%, transparent); }
.linha-tempo .dif { position: relative; width: calc(50% - 46px); padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.linha-tempo .dif:nth-child(odd) { text-align: right; margin-right: auto; }
.linha-tempo .dif:nth-child(even) { text-align: left; margin-left: auto; }
.linha-tempo .dif::after { content: ''; position: absolute; top: 14px; width: 18px; height: 18px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 6px color-mix(in srgb, var(--principal) 26%, transparent), 0 0 22px var(--principal); }
.linha-tempo .dif:nth-child(odd)::after { right: -55px; } .linha-tempo .dif:nth-child(even)::after { left: -55px; }
.linha-tempo .dif-rotulo { display: block; font: 900 clamp(40px, 5vw, 62px)/1 var(--titulo); color: var(--acento); text-shadow: 0 0 26px color-mix(in srgb, var(--acento) 45%, transparent); }
.linha-tempo .dif h3 { margin: 8px 0 6px; font: 800 22px var(--titulo); text-transform: uppercase; color: var(--principal); }
.linha-tempo .dif p { font-size: 16px; line-height: 1.55; color: var(--suave); }
@media (max-width: 760px) { .linha-tempo::before { left: 16px; } .linha-tempo .dif { width: calc(100% - 52px); margin-left: auto !important; margin-right: 0 !important; text-align: left !important; } .linha-tempo .dif::after { left: -44px !important; right: auto !important; } }

/* diferenciais, etapas e serviços */
.dif-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
@media (max-width: 900px) { .dif-grade { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .dif-grade { grid-template-columns: 1fr; } }
.cen-sec--etapas { background: linear-gradient(180deg, transparent, rgba(225, 29, 46, .05) 50%, transparent); }
.etapas { counter-reset: etapa; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 34px; }
.etapas .dif { counter-increment: etapa; position: relative; padding: 26px 20px 24px; background: rgba(18, 16, 20, .88); border: 1px solid var(--linha); border-radius: 16px; box-shadow: none; overflow: hidden; transition: transform .25s, border-color .25s; }
.etapas .dif::before { content: counter(etapa, decimal-leading-zero); position: absolute; right: 12px; top: 2px; font: 900 64px/1 var(--titulo); color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .16); }
.etapas .dif::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--grad); transform: scaleX(.18); transform-origin: left; transition: transform .45s; }
.etapas .dif:hover { transform: translateY(-5px); border-color: var(--principal); } .etapas .dif:hover::after { transform: scaleX(1); }
.etapas .dif-rotulo { display: block; margin-bottom: 14px; font: 400 10.5px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--acento); }
.etapas .dif h3 { margin: 0 0 8px; font: 800 20px var(--titulo); text-transform: uppercase; color: #fff; }
.etapas .dif p { font-size: 15px; line-height: 1.5; color: var(--suave); }
@media (max-width: 1000px) { .etapas { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 640px) { .etapas { grid-template-columns: 1fr; } }
.servicos-cen { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 34px; }
.servicos-cen .dif { position: relative; padding: 24px 22px 26px; background: rgba(18, 16, 20, .88); border: 1px solid var(--linha); border-radius: 16px; box-shadow: none; overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; }
.servicos-cen .dif::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--grad); transition: width .4s; }
.servicos-cen .dif:hover { transform: translateY(-5px); border-color: var(--principal); box-shadow: 0 20px 36px -22px color-mix(in srgb, var(--principal) 80%, transparent); }
.servicos-cen .dif:hover::after { width: 100%; }
.servicos-cen .dif-rotulo { display: block; margin-bottom: 12px; font: 400 11px var(--mono); letter-spacing: .24em; color: var(--acento); }
.servicos-cen .dif h3 { margin: 0 0 8px; font: 800 19px var(--titulo); text-transform: uppercase; color: #fff; }
.servicos-cen .dif p { font-size: 15.5px; line-height: 1.5; color: var(--suave); }
.serv-mais { text-align: center; margin-top: 34px; }

/* blocos com foto (rodas e pneus, diagnóstico) */
.cen-sec--bloco:has(.titulo-sec--e:empty) { display: none; }
.bloco-foto { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.bloco--rodas .bloco-img { order: 2; }
.bloco-img img { display: block; width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 70px -26px #000, 0 0 0 8px color-mix(in srgb, var(--principal) 12%, transparent); }
.bloco-txt .titulo-sec { text-align: left; margin: 14px 0 14px; font-size: clamp(30px, 4vw, 48px); text-transform: uppercase; }
.bloco-corpo p { font-size: 18px; line-height: 1.6; color: #d6ccca; margin-bottom: 12px; }
.bloco-itens { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 26px; }
.bloco-itens .dif { padding: 14px 16px; background: rgba(18, 16, 20, .85); border: 1px solid var(--linha); border-left: 3px solid var(--principal); border-radius: 10px; box-shadow: none; }
.bloco-itens .dif-rotulo { display: block; margin-bottom: 4px; font: 400 11px var(--mono); letter-spacing: .22em; color: var(--acento); }
.bloco-itens .dif h3 { margin: 0 0 4px; font: 800 16px var(--titulo); text-transform: uppercase; color: #fff; }
.bloco-itens .dif p { font-size: 14.5px; line-height: 1.45; color: var(--suave); }
.bloco--diag .bloco-itens { grid-template-columns: 1fr; }
@media (max-width: 900px) { .bloco-foto { grid-template-columns: 1fr; gap: 32px; } .bloco--rodas .bloco-img { order: 0; } .bloco-itens { grid-template-columns: 1fr; } }

/* planos de revisão */
.cen-sec--planos { background: linear-gradient(180deg, transparent, rgba(255, 183, 3, .04), transparent); }
.planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 38px; align-items: stretch; }
.planos .dif { position: relative; padding: 38px 30px 32px; background: linear-gradient(170deg, #1a1719, #0f0d10); border: 1px solid var(--linha); border-radius: 20px; box-shadow: none; }
.planos .dif-rotulo { display: block; font: 400 11px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--acento); margin-bottom: 8px; }
.planos .dif h3 { margin: 0 0 18px; font: 900 34px var(--titulo); text-transform: uppercase; color: #fff; }
.dif-lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dif-lista li { position: relative; padding: 9px 0 9px 28px; border-top: 1px solid rgba(255, 255, 255, .07); font: 600 16.5px 'Rajdhani', sans-serif; color: #e3d9d7; }
.dif-lista li::before { content: '✓'; position: absolute; left: 0; top: 9px; color: var(--principal); font-weight: 800; }
.dif-com-selo { border-color: var(--principal) !important; box-shadow: 0 0 0 1px var(--principal), 0 30px 60px -26px color-mix(in srgb, var(--principal) 70%, transparent) !important; }
.planos .dif-com-selo { transform: translateY(-10px); }
.dif-selo { position: absolute; top: -14px; right: 26px; padding: 6px 16px; border-radius: 999px; background: var(--acento); color: #1a1000; font: 800 12px var(--titulo); letter-spacing: .1em; text-transform: uppercase; }
.planos-btn { text-align: center; margin-top: 36px; }
@media (max-width: 900px) { .planos { grid-template-columns: 1fr; } .planos .dif-com-selo { transform: none; } }

/* perguntas */
.faq { max-width: 880px; margin: 30px auto 0; }
.faq details { background: rgba(18, 16, 20, .88); border: 1px solid var(--linha); border-radius: 14px; margin-bottom: 10px; padding: 0 22px; transition: border-color .25s; }
.faq details[open] { border-color: var(--principal); }
.faq summary { padding: 20px 0; font: 700 18px var(--titulo); text-transform: none; }
.faq summary::after { content: '+'; margin-left: auto; font-size: 28px; font-weight: 400; color: var(--principal); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary .n { font: 400 12px var(--mono); color: var(--acento); }
.faq details[open] summary { color: #fff; }
.faq details p { padding: 0 0 22px 38px; font-size: 17px; }

/* depoimentos (carrossel do módulo) e galeria */
.cen-sec--depo .ambiente-tit { font: 800 clamp(30px, 4.6vw, 54px) var(--titulo); text-transform: none; text-align: center; color: #fff; }
.cen-sec--depo .ambiente-texto { text-align: center; margin: 0 auto 24px !important; color: var(--acento); font: 400 12px var(--mono); letter-spacing: .26em; text-transform: uppercase; }
.cen-sec--depo .ambiente-foto img { border-radius: 14px !important; }
.cen-sec--depo .ambiente-foto figcaption { font-size: 14px; }
.ambiente-relatos--carrossel { display: flex !important; gap: 0 !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: 34px; }
.ambiente-relatos--carrossel::-webkit-scrollbar { display: none; }
.ambiente-relatos--carrossel .ambiente-relato { flex: 0 0 100%; scroll-snap-align: center; padding: 46px 54px 44px !important; background: #131013 !important; border: 1px solid var(--linha) !important; border-radius: 20px !important; box-shadow: none; }
.ambiente-relatos--carrossel .ambiente-relato::before { content: '★★★★★'; display: block; color: var(--acento); letter-spacing: 6px; font-size: 18px; margin-bottom: 20px; }
.ambiente-relatos--carrossel .ambiente-relato p { font: 500 clamp(18px, 2.2vw, 23px)/1.5 'Rajdhani', sans-serif; color: #fff; }
.ambiente-relatos--carrossel .ambiente-relato footer { margin-top: 18px; font: 800 18px var(--titulo); color: var(--principal); }
.ambiente-relatos--carrossel .ambiente-relato footer span { font: 500 15px 'Rajdhani', sans-serif; color: var(--suave); }
.carrossel__seta { background: rgba(0, 0, 0, .6) !important; color: var(--acento) !important; box-shadow: none !important; }
.carrossel__pontos { margin-top: 14px; }
.carrossel__pontos button { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: color-mix(in srgb, var(--principal) 50%, transparent) !important; }
.carrossel__pontos button[aria-current="true"] { background: var(--principal) !important; width: 28px !important; border-radius: 999px !important; }

/* marcas (faixa que corre) */
.cen-sec--marcas { overflow: hidden; }
.marcas-cen { margin-top: 28px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marcas-cen.letreiro { display: flex; width: max-content; animation: letreiro 44s linear infinite; }
.marcas-cen.letreiro:hover { animation-play-state: paused; }
.marcas-cen .dif { margin: 0 14px 0 0; padding: 14px 30px; background: rgba(255, 255, 255, .03); border: 1px solid var(--linha); border-radius: 999px; box-shadow: none; white-space: nowrap; }
.marcas-cen .dif h3 { margin: 0; font: 800 17px var(--titulo); letter-spacing: .14em; text-transform: uppercase; color: #d6ccca; }
.marcas-cen .dif p { display: none; }

/* chamada final */
.cen-sec--chamada:has(h2:empty) { display: none; }
.chamada-cen { display: grid; grid-template-columns: auto 1fr auto; gap: 34px; align-items: center; padding: 38px 44px; border-radius: 24px; background: var(--grad); color: #160909; box-shadow: 0 30px 70px -28px color-mix(in srgb, var(--principal) 80%, transparent); }
.chamada-dono { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 5px solid #160909; box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .6); }
.chamada-dono:not([src]), .chamada-dono[hidden] { display: none; }
.chamada-txt .rotulo-mono { color: #2a0d0d; }
.chamada-txt h2 { font: 900 clamp(28px, 3.8vw, 48px)/1.05 var(--titulo); text-transform: uppercase; color: #160909; margin: 0; }
.chamada-acoes { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.chamada-acoes .btn-cen--zap { background: #160909; color: #fff; box-shadow: none; }
.chamada-fone { display: block; text-align: center; color: #160909; text-decoration: none; }
.chamada-fone small { display: block; font: 400 10px var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.chamada-fone b { font: 900 clamp(20px, 2.4vw, 28px) var(--titulo); white-space: nowrap; }
.chamada-fone[hidden] { display: none; }
@media (max-width: 860px) { .chamada-cen { grid-template-columns: 1fr; padding: 30px 24px; text-align: center; justify-items: center; } .chamada-fone b { white-space: normal; } }

/* contato, visita e rodapé */
.contato-cen { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
@media (max-width: 900px) { .contato-cen { grid-template-columns: 1fr; } }
.orcamento, .agenda-envoltorio { padding: 34px; border-radius: 20px; background: #121014; border: 1px solid var(--linha); border-top: 3px solid var(--principal); }
.agenda-envoltorio .agenda-card { --ap-texto: #1b1b1f; --ap-mudo: #4c5560; max-width: none; background: #fff; border: 0; box-shadow: none; border-radius: 12px; } /* .agenda-bloco é o nome que o módulo agendaPublica usa para CADA etapa: o envoltório aqui tem outro nome */
.agenda-envoltorio #agenda-form { display: flex; flex-direction: column; gap: 18px; }
.orcamento .agenda-titulo, .agenda-envoltorio .agenda-titulo { color: #fff; margin: 0 0 20px; font: 800 26px var(--titulo); }
.orcamento-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .orcamento-form { grid-template-columns: 1fr; } }
.orcamento-form label { display: flex; flex-direction: column; gap: 7px; font: 400 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #bdb2b0; }
.orcamento-form input, .orcamento-form select, .orcamento-form textarea { width: 100%; background: #0b090c; border: 1px solid #382c33; color: #fff; padding: 14px 16px; font: 500 16px 'Rajdhani', sans-serif; border-radius: 10px; text-transform: none; letter-spacing: 0; }
.orcamento-form input:focus, .orcamento-form select:focus, .orcamento-form textarea:focus, .cupom-form input:focus { outline: none; border-color: var(--principal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--principal) 28%, transparent); }
.orcamento-largo, .orcamento-form .enviar, .orcamento-form .msg { grid-column: 1 / -1; }
.orcamento-form .enviar { justify-self: start; }
.orcamento-form .msg { margin: 0; font-size: 14px; min-height: 1.2em; }
.cen-sec--visite { text-align: center; background: #0b090c; }
.visite-end { font: 800 clamp(22px, 3vw, 36px) var(--titulo); color: #fff; margin: 0 auto 12px; max-width: 800px; }
.visite-hor { color: var(--suave); margin-bottom: 26px; }
.rodape--cen { text-align: left; padding: 74px 22px 26px; background: #040304; border-top: 2px solid transparent; border-image: var(--grad) 1; }
.rodape-grade { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.2fr; gap: 36px; }
@media (max-width: 860px) { .rodape-grade { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .rodape-grade { grid-template-columns: 1fr; } }
.rodape-marca .marca-logo { height: 56px; }
.rodape-marca p { color: var(--suave); margin-top: 14px; line-height: 1.6; }
.rodape--cen h4 { margin: 0 0 18px; font: 400 12px var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--acento); }
.rodape-lista .dif { padding: 4px 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.rodape-lista .dif h3 { margin: 0; font: 500 15px/1.4 'Rajdhani', sans-serif; color: #a69d9c; text-transform: none; letter-spacing: 0; }
.rodape-lista .dif p, .rodape-lista .dif::before, .rodape-lista .dif::after, .rodape-lista .dif .dif-rotulo { display: none; }
.rodape-links li { padding: 4px 0; }
.rodape-links a, .rodape-links span { color: #a69d9c; text-decoration: none; font-size: 15px; text-transform: none; font-weight: 500; }
.rodape-links a:hover { color: #fff; }
.rodape-fim { max-width: 1180px; margin: 44px auto 0; padding-top: 22px; border-top: 1px solid #1d1a1b; color: #777; font-size: 13px; text-align: center; }
.rodape-fim a { color: var(--acento); }

/* quem pede menos movimento recebe tudo parado */
@media (prefers-reduced-motion: reduce) {
  .hero-cen::before, .hero-logo, .velo-giro, .ponteiro, .selo-ico, .selo-anos, .role-baixo i, .hazard, .faixa-cen-in.letreiro, .marcas-cen.letreiro, .hero-titulo .dif, .atalhos .dif:hover::before { animation: none !important; }
  .ponteiro { transform: rotate(101deg); }
}

/* loja (vitrine de produtos + sacolinha, módulos únicos): só o desenho dos cartões; sem produtos a seção some sozinha */
.loja-site { padding: 76px max(22px, calc((100% - 1180px) / 2)); max-width: none; }
.loja-site h2 { font: 800 clamp(30px, 4.6vw, 54px)/1.08 var(--titulo); text-align: center; color: #fff; margin: 0 0 14px; }
.loja-vitrine { margin-top: 30px; }
.loja-site--carrossel .card { flex-basis: 230px; }
.loja-vitrine .grid, .loja-vitrine .cardapio-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.loja-vitrine .card { display: flex; flex-direction: column; overflow: hidden; background: rgba(18, 16, 20, .9); border: 1px solid var(--linha); border-radius: 16px; transition: transform .25s, border-color .25s; }
.loja-vitrine .card:hover { transform: translateY(-4px); border-color: var(--principal); }
.loja-vitrine .card__img { position: relative; display: grid; place-items: center; height: 160px; background: #1b171c; }
.loja-vitrine .card__img img { width: 100%; height: 100%; object-fit: contain; }
.loja-vitrine .card__nophoto { font-size: 40px; }
.loja-vitrine .tag { position: absolute; top: 8px; right: 8px; padding: 2px 10px; border-radius: 999px; background: var(--acento); color: #1a1000; font: 800 11px var(--titulo); }
.loja-vitrine .card__body { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 14px; }
.loja-vitrine .card__brand { font: 400 10.5px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--acento); min-height: 1em; }
.loja-vitrine .card__name { font: 800 15px/1.25 var(--titulo); color: #fff; }
.loja-vitrine .card__desc { display: none; }
.loja-vitrine .price { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 8px; color: var(--acento); }
.loja-vitrine .price strong { font: 900 20px var(--titulo); }
.loja-vitrine .price s { font-size: 12px; color: var(--suave); }
.loja-vitrine .add { margin-top: 10px; padding: 11px; border-radius: 10px; background: var(--grad); color: #fff; font: 800 13px var(--titulo); letter-spacing: .05em; text-transform: uppercase; }
.loja-site--carrossel .loja-vitrine { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 8px; }
.loja-site--carrossel .loja-vitrine .card { flex: 0 0 230px; scroll-snap-align: start; }
.loja-site--lista .loja-vitrine { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.loja-vitrine .categoria { background: rgba(18, 16, 20, .9); border: 1px solid var(--linha); border-radius: 16px; padding: 18px; }
.loja-vitrine .categoria-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.loja-vitrine .categoria-topo h3 { font: 800 19px var(--titulo); color: #fff; text-transform: uppercase; }
.loja-vitrine .itens { display: grid; gap: 4px; }
.loja-vitrine .itens li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.loja-vitrine .itens li > :first-child { flex: 1; }
.loja-vitrine .item-add { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--grad); color: #fff; font: 800 20px/1 var(--titulo); }
.loja-vitrine .ver-mais { margin-top: 8px; color: var(--acento); font-weight: 700; }

.orcamento-texto { margin: 0 0 22px; font-size: 17px; line-height: 1.55; color: var(--suave); }
.cupom-card .btn-cen { width: 100%; }
.cupom-card .cupom-nota { display: block; margin-top: 14px; text-align: center; font: 400 10px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--suave); }

/* MODO CLARO (27/10/2026, pedido do Michel: todo layout tem escuro e claro; o dono escolhe na montagem, no painel ou no chat). Troca as variáveis e os cartões/fundos das seções de CONTEÚDO; topo, abertura com velocímetro, promoção, cupom, visite e rodapé ficam escuros */
:root[data-fundo="claro"] { --bg: #f4f5f7; --papel: #ffffff; --papel2: #eceff2; --linha: #dfe3e8; --texto: #14161a; --suave: #5a606b; --topo: #14161a; }
:root[data-fundo="claro"] :is(.topo, .hero-cen, .cen-sec--promo, .cen-sec--cupom, .cen-sec--visite, .rodape--cen, .nav-desk.aberto, .faixa-demo, .hazard) { --texto: #f5efe6; --suave: #b9b0b3; --linha: #2a2128; --papel: #121014; }
:root[data-fundo="claro"] body { background: var(--bg); color: var(--texto); }
:root[data-fundo="claro"] :is(.atalhos .dif, .pilares, .sobre-pontos .dif, .dif-grade .dif, .etapas .dif, .servicos-cen .dif, .bloco-itens .dif, .faq details, .planos .dif, .loja-vitrine .card, .loja-vitrine .categoria, .marcas-cen .dif, .oferta-cen, .orcamento, .agenda-envoltorio) { background: var(--papel); border-color: var(--linha); box-shadow: 0 10px 30px -20px rgba(20, 22, 26, .3); }
:root[data-fundo="claro"] :is(.loja-vitrine .card__img) { background: var(--papel2); }
:root[data-fundo="claro"] :is(.ambiente-relatos--carrossel .ambiente-relato) { background: var(--papel) !important; border-color: var(--linha) !important; }
:root[data-fundo="claro"] :is(.orcamento-form, .agenda-envoltorio) :is(input, select, textarea) { background: #fff; color: var(--texto); border-color: var(--linha); }
:root[data-fundo="claro"] .cen-sec--etapas, :root[data-fundo="claro"] .cen-sec--planos { background: transparent; }
:root[data-fundo="claro"] :is(h1, h2, h3, h4) { color: var(--texto); }
:root[data-fundo="claro"] :is(.hero-cen, .cen-sec--promo, .cen-sec--cupom, .cen-sec--visite, .rodape--cen, .topo) :is(h1, h2, h3, h4) { color: #fff; }
:root[data-fundo="claro"] .hero-titulo .dif:nth-child(2) h3 { color: transparent; }
:root[data-fundo="claro"] .cen-sec:not(.cen-sec--promo):not(.cen-sec--cupom):not(.cen-sec--visite) p { color: var(--suave); }

/* cor principal escura demais para as áreas escuras (assets/modulos/identidadeSite.js marca :root[data-principal-escura] e dá --principal-vivo); topo claro no modo claro, para a logo da conta aparecer */
:root[data-principal-escura][data-fundo="claro"] :is(.hero-cen, .cen-sec--promo, .cen-sec--cupom, .cen-sec--visite, .rodape--cen) { --principal: var(--principal-vivo); }
:root[data-fundo="claro"] .topo { --texto: #14161a; --suave: #5a606b; --linha: #dfe3e8; background: rgba(255, 255, 255, .96); border-bottom: 1px solid #dfe3e8; box-shadow: 0 10px 26px -20px rgba(20, 22, 26, .45); }
:root[data-fundo="claro"] .topo :is(.marca-nome, .marca-sub, a, small, span) { color: var(--texto); }
:root[data-fundo="claro"] .topo .btn-cen { color: var(--sobre-principal, #fff); }

/* sem foto cadastrada (conta nova, ramo diferente do exemplo): o quadro da foto some e o texto ocupa a largura; a foto entra pelo Catálogo do site (enviar ou criar com IA) */
.sobre-foto-wrap:not(:has(img[src]:not([hidden]))) { display: none; }
.sobre-grade:has(.sobre-foto-wrap:not(:has(img[src]:not([hidden])))) { grid-template-columns: 1fr; }

/* faixa final: texto escuro sobre degradê; com cor principal escura demais o degradê usa a versão viva (identidadeSite) para o texto continuar legível */
:root[data-principal-escura] .chamada-cen { --principal: var(--principal-vivo); }