:root { --brand: #2f4b7c; --ok: #1e7a3c; }
body { background: #f3f5f9; color: #1d2733; }
.brand { color: var(--brand); }
.hero h1 { color: var(--brand); font-weight: 800; }
.btn-brand { background: var(--brand); color: #fff; font-weight: 600; }
.btn-brand:hover { background: #24395f; color: #fff; }
.btn-ok { background: var(--ok); color: #fff; font-weight: 600; }
.btn-ok:hover { background: #17612f; color: #fff; }
.plate-input { font-size: 1.6rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.card-soft { background: #fff; border: 0; border-radius: 16px; box-shadow: 0 6px 24px rgba(20,40,80,.07); }
.kv dt { color: #6b7684; font-weight: 500; }
.kv dd { font-weight: 600; }
.locked { filter: blur(5px); user-select: none; }
.badge-ok { background: #e3f4ea; color: var(--ok); }
.badge-warn { background: #fdecea; color: #b3261e; }
@media print { nav, footer, .no-print { display: none !important; } body { background: #fff; } }
.text-ok { color: var(--ok); }
.step { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: .75rem; }
.section-title { color: var(--brand); font-weight: 800; padding-bottom: .35rem; border-bottom: 3px solid var(--ok); }
.feature-card { display: flex; gap: .9rem; align-items: flex-start; background: #fff; border-radius: 14px; padding: 1rem 1.1rem; height: 100%;
  box-shadow: 0 4px 18px rgba(20,40,80,.06); }
.feature-icon { flex: 0 0 44px; height: 44px; border-radius: 50%; background: #e3f4ea; color: var(--ok); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.feature-card--laudo .feature-icon { background: #e6ecf7; color: var(--brand); }
.feature-title { font-weight: 700; font-size: .95rem; }
.feature-desc { color: #6b7684; font-size: .85rem; }
.post-card { overflow: hidden; transition: transform .15s; }
.post-card:hover { transform: translateY(-3px); }
.post-cover { height: 130px; color: #fff; display: flex; align-items: center; justify-content: center; position: relative; font-size: 3rem; }
.post-cover .badge { position: absolute; left: 12px; bottom: 10px; font-size: .7rem; }
.post-body h2 { font-size: 1.2rem; color: var(--brand); margin-top: 1.5rem; }
.post-body p, .post-body li { line-height: 1.7; }
.cta-box { background: #eef3fb; border-radius: 12px; padding: 1rem 1.25rem; }
.cta-box .plate-input { font-size: 1.1rem; }
.site-footer { background: #fff; border-top: 1px solid #e3e7ee; margin-top: 3rem; }
.site-footer h6 { color: var(--brand); font-weight: 700; }
.site-footer a { color: #4a5666; text-decoration: none; }
.site-footer a:hover { color: var(--ok); }
.site-footer li { margin-bottom: .4rem; }
.footer-bottom { background: #f3f5f9; color: #6b7684; border-top: 1px solid #e3e7ee; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 80px; }

/* ---- mini vídeo explicativo ---- */
.explainer { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; color: #fff; cursor: pointer;
  background: radial-gradient(circle at 20% 15%, #3b63a8 0, transparent 45%), linear-gradient(160deg, #16294f, #2f4b7c 55%, #1e7a3c);
  box-shadow: 0 18px 40px rgba(20,40,80,.25); }
.ex-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 4% 8% 15%; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; pointer-events: none; }
.ex-slide.active { opacity: 1; transform: none; pointer-events: auto; }
.ex-title { font-weight: 800; font-size: clamp(1.05rem, 3.4vw, 2.1rem); line-height: 1.15; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.ex-sub { font-size: clamp(.8rem, 1.9vw, 1.1rem); opacity: .92; margin-top: .6rem; }
.ex-car { width: clamp(64px, 14vw, 120px); height: auto; margin-bottom: 1rem; background: #fff; border-radius: 22px; padding: 10px; }
.ex-plate { margin: 1rem 0 .4rem; background: #fff; color: #16294f; border: 4px solid #16294f; border-top-width: 14px; border-radius: 10px;
  font: 800 clamp(1.4rem, 5.6vw, 3rem)/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; padding: .1em .5em; min-width: 6.5ch; text-align: left; }
.typing { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; border-right: .08em solid #1e7a3c; }
.ex-chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1rem; }
.ex-chip { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: .4rem .9rem; font-weight: 600; font-size: clamp(.7rem, 1.8vw, 1rem); }
.ex-list { list-style: none; padding: 0; margin: 1rem 0 0; text-align: left; font-size: clamp(.8rem, 2vw, 1.15rem); font-weight: 600; }
.ex-list li { margin: .35rem 0; }
.ex-list i { color: #7be0a0; margin-right: .4rem; }
.ex-qr { font-size: clamp(3rem, 12vw, 6rem); margin: .4rem 0; }
.ex-play { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; border: 0;
  background: rgba(22,41,79,.85); color: #fff; font-size: 2.4rem; display: flex; align-items: center; justify-content: center; transition: opacity .3s; z-index: 3; }
.ex-caption { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: max-content; max-width: 88%; text-align: center; z-index: 2;
  pointer-events: none; background: rgba(0,0,0,.55); border-radius: 8px; padding: .3rem .8rem; font-size: clamp(.68rem, 1.6vw, .95rem); }
.ex-caption:empty { display: none; }
.ex-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: rgba(255,255,255,.25); z-index: 4; cursor: pointer; }
.ex-bar-fill { height: 100%; width: 0; background: #7be0a0; }
.explainer.paused .ex-slide.active * { animation-play-state: paused !important; }

/* animações (só rodam no slide ativo) */
.active .ex-car { animation: car-in .9s cubic-bezier(.2,.9,.3,1.2) both; }
.active .typing { animation: type 2.4s steps(7) .6s forwards, blink .7s step-end infinite; }
.active .ex-chip { animation: pop .5s cubic-bezier(.2,.9,.3,1.4) var(--d) both; }
.active .ex-list li { animation: slide-in .5s ease var(--d) both; }
.active .ex-qr { animation: pulse 1.4s ease-in-out infinite; }
@keyframes car-in { from { transform: translateX(-120%) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes type { to { width: 7ch; } }
@keyframes blink { 50% { border-color: transparent; } }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes slide-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse { 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .explainer * { animation: none !important; transition: none !important; } .typing { width: 7ch; } }

/* CTA band, WhatsApp flutuante e contato */
.cta-band { background: linear-gradient(120deg, #2f4b7c, #1e7a3c); color: #fff; border-radius: 20px; padding: 2rem; text-align: center; }
.cta-band h2 { font-weight: 800; }
.wa-float { position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff !important;
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 1030; text-decoration: none !important; }
.wa-float:hover { background: #1ebe5b; }
.contact-icon { font-size: 1.8rem; color: var(--ok); }
.contact-field { border-radius: 12px; }
.hp-field { position: absolute; left: -9999px; }
