/* Meu Consórcio Digital V8 — Design System de Conversão */
:root {
  --v8-forest: #064e3b;
  --v8-emerald: #087443;
  --v8-deep: #032c22;
  --v8-gold: #b4975a;
  --v8-champagne: #e7c97a;
  --v8-surface: #f6faf7;
  --v8-ink: #123226;
  --v8-muted: #53695e;
  --v8-line: #d8e7dd;
  --v8-danger: #b42318;
  --v8-success: #087443;
  --v8-shadow: 0 18px 48px rgba(6,78,59,.12);
  --v8-radius: 18px;
}

/* Barra superior de confiança mais legível e menos intrusiva. */
.v8-trust-bar { position: relative; z-index: 900; background: var(--v8-deep); color: #f8fff9; border-bottom: 1px solid rgba(231,201,122,.45); }
.v8-trust-bar-inner { max-width: 1240px; margin: 0 auto; min-height: 34px; padding: 7px 20px; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; font-size: 11px; letter-spacing: .01em; }
.v8-trust-bar strong { color: var(--v8-champagne); }
.v8-trust-bar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* Entrada no viewport e redução de movimento. */
.v8-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.v8-reveal.v8-visible { opacity: 1; transform: none; }
.v8-reveal:nth-child(2) { transition-delay: .04s; }
.v8-reveal:nth-child(3) { transition-delay: .08s; }
.v8-reveal:nth-child(4) { transition-delay: .12s; }

/* Hero: leitura em camadas, foco no CTA e brilho sutil. */
.hero { isolation: isolate; }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 84% 20%, rgba(231,201,122,.18), transparent 26%), linear-gradient(115deg, transparent 48%, rgba(255,255,255,.04) 50%, transparent 54%); z-index: -1; }
.hero-content h1 { text-wrap: balance; letter-spacing: -.035em; }
.hero-content p { max-width: 60ch; text-wrap: pretty; }
.hero-btn, .btn-primary, .content-cta, .btn-card, #submit-btn { position: relative; overflow: hidden; transform: translateZ(0); transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease; }
.hero-btn::after, .btn-primary::after, .content-cta::after, .btn-card::after, #submit-btn::after { content: ''; position: absolute; top: 0; left: -120%; width: 75%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.34), transparent); transform: skewX(-18deg); transition: left .55s ease; }
.hero-btn:hover, .btn-primary:hover, .content-cta:hover, .btn-card:hover, #submit-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(6,78,59,.18); }
.hero-btn:hover::after, .btn-primary:hover::after, .content-cta:hover::after, .btn-card:hover::after, #submit-btn:hover::after { left: 135%; }

/* Simulador: progresso, preview e hierarquia de decisão. */
.v8-simulator-shell { position: relative; }
.v8-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 22px; }
.v8-progress-step { min-height: 44px; border: 1px solid var(--v8-line); border-radius: 12px; background: #fff; padding: 9px 10px; color: var(--v8-muted); font-size: 11px; line-height: 1.25; display: flex; align-items: center; gap: 8px; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.v8-progress-step b { display: grid; place-items: center; flex: 0 0 23px; width: 23px; height: 23px; border-radius: 50%; background: #edf4ef; color: var(--v8-forest); font-size: 11px; }
.v8-progress-step.is-active { border-color: var(--v8-gold); background: #fffdf8; color: var(--v8-forest); }
.v8-progress-step.is-active b { background: var(--v8-gold); color: var(--v8-deep); }
.v8-progress-step.is-complete { border-color: #8bc5a7; background: #f4fbf6; }
.v8-progress-step.is-complete b { background: var(--v8-emerald); color: #fff; }
.v8-range-wrap { position: relative; padding-bottom: 16px; }
.v8-range-value { position: absolute; right: 0; top: -4px; color: var(--v8-forest); font-weight: 900; font-size: 13px; }
input[type=range] { accent-color: var(--v8-gold); cursor: pointer; }
input[type=text], input[type=email], input[type=tel], select { border-radius: 10px !important; border: 1px solid #c5d8cb !important; min-height: 46px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, select:focus { border-color: var(--v8-gold) !important; box-shadow: 0 0 0 4px rgba(180,151,90,.15) !important; outline: none; }
.v8-field-message { min-height: 16px; margin-top: 5px; color: var(--v8-danger); font-size: 11px; }
.v8-field-valid { border-color: #73b58e !important; background: #fbfffc; }
.v8-form-note { margin: 12px 0 0; color: var(--v8-muted); font-size: 11px; line-height: 1.45; }
.v8-result-live { border-left: 4px solid var(--v8-gold); box-shadow: var(--v8-shadow); }
.v8-result-live .result-item { transition: background .2s ease, transform .2s ease; }
.v8-result-live .result-item.is-updated { background: #fffdf5; transform: translateX(3px); }

/* Cards: melhor escaneabilidade e estados claros. */
.vehicle-card, .category-card, .blog-card { border-radius: var(--v8-radius); overflow: clip; border: 1px solid var(--v8-line); background: #fff; box-shadow: 0 8px 24px rgba(6,78,59,.06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.vehicle-card:hover, .category-card:hover, .blog-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(6,78,59,.14); border-color: rgba(180,151,90,.82); }
.vehicle-card img, .category-card img, .blog-card img { transition: transform .45s ease; }
.vehicle-card:hover img, .category-card:hover img, .blog-card:hover img { transform: scale(1.035); }
.btn-card { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Artigos e páginas profundas: leitura longa sem fadiga. */
.deep-content, .article-content { max-width: 840px; }
.deep-content p, .article-content p { max-width: 72ch; line-height: 1.82; color: #334c40; }
.deep-section { scroll-margin-top: 104px; }
.deep-section h2, .article-content h2 { text-wrap: balance; letter-spacing: -.02em; }
.deep-section h3, .article-content h3 { color: var(--v8-forest); margin-top: 26px; }
.editorial-image-grid figure { border-radius: 16px; overflow: hidden; border: 1px solid var(--v8-line); background: #fff; box-shadow: 0 8px 24px rgba(6,78,59,.08); }
.editorial-image-grid figcaption { padding: 11px 14px; font-size: 12px; font-weight: 800; color: var(--v8-forest); background: #fbfefb; }

/* CTA sticky contextual, sem cobrir conteúdo. */
.v8-sticky-cta { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 150%); z-index: 1150; width: min(92vw, 520px); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px 10px 17px; border: 1px solid rgba(231,201,122,.75); border-radius: 999px; background: rgba(3,44,34,.96); color: #fff; box-shadow: 0 16px 42px rgba(0,0,0,.22); transition: transform .3s ease; }
.v8-sticky-cta.is-visible { transform: translate(-50%, 0); }
.v8-sticky-cta span { font-size: 12px; line-height: 1.25; }
.v8-sticky-cta strong { display: block; color: var(--v8-champagne); font-size: 13px; }
.v8-sticky-cta a { flex: 0 0 auto; min-height: 42px; padding: 11px 17px; border-radius: 999px; background: var(--v8-gold); color: var(--v8-deep); font-size: 12px; font-weight: 900; text-decoration: none; }

/* Acessibilidade e redução de movimento. */
:focus-visible { outline: 3px solid var(--v8-champagne) !important; outline-offset: 3px; }
[aria-invalid=true] { border-color: var(--v8-danger) !important; box-shadow: 0 0 0 3px rgba(180,35,24,.12) !important; }
@media (max-width: 720px) {
  .v8-trust-bar-inner { justify-content: flex-start; gap: 8px 14px; padding: 7px 16px; }
  .v8-progress { gap: 6px; }
  .v8-progress-step { font-size: 10px; padding: 8px 6px; }
  .v8-progress-step b { flex-basis: 20px; width: 20px; height: 20px; }
  .v8-sticky-cta { bottom: 10px; }
  .v8-sticky-cta span { font-size: 11px; }
  .v8-sticky-cta a { padding-inline: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .v8-reveal { opacity: 1; transform: none; }
}
