/* Marques Veículos · cartão digital */
@font-face { font-family: "Big Shoulders Display"; src: url("/assets/fonts/big-shoulders-display.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-500.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
:root { --asfalto: #121214; --asfalto-2: #1c1c21; --linha: rgba(255,255,255,.13); --vermelho: #e3222b; --cromo: #d8dbe0; --apagado: #b4b6be; --mola: cubic-bezier(.2,.75,.1,1); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--asfalto); color: #f3f3f5; font: 500 16px/1.4 "Barlow", system-ui, sans-serif; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 3px solid #f39a4b; outline-offset: 3px; }
::-webkit-scrollbar { width: 8px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-thumb { background: rgba(227,34,43,.75); border-radius: 8px; }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-color: rgba(227,34,43,.8) transparent; scrollbar-width: thin; } }

.cartao { width: min(460px, 100%); margin: 0 auto; padding: 28px 18px 36px; }
.cartao__topo { text-align: center; }
.cartao__logo { width: 230px; height: auto; margin: 0 auto; }
.cartao__onde { margin: 8px 0 0; font: 700 15px/1 "Big Shoulders Display", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--apagado); }
.cartao__foto { margin: 22px 0 18px; height: 190px; overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px var(--linha); }
.cartao__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cartao__foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(90deg, var(--vermelho) 0 24px, #f5f5f5 24px 48px); }
.cartao__botoes { display: flex; flex-direction: column; gap: 10px; }
.cb { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 66px; padding: 10px 16px 10px 12px; background: var(--asfalto-2); color: inherit; border: 0; box-shadow: inset 0 0 0 1px var(--linha); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.cb::before { content: ""; position: absolute; z-index: -1; inset: 0 -30%; background: #2a2a31; transform: translateX(-102%) skewX(-28deg); transition: transform .5s var(--mola); }
.cb:hover::before, .cb:focus-visible::before { transform: translateX(0) skewX(-28deg); }
.cb__ic { width: 42px; height: 42px; flex: none; }
.cb__ic--letra, .cb__ic--svg { display: grid; place-items: center; background: var(--vermelho); color: #fff; border-radius: 8px; font: 800 17px/1 "Big Shoulders Display", sans-serif; letter-spacing: .04em; }
.cb__ic--svg svg { width: 24px; height: 24px; }
.cb__txt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cb__txt b { font: 800 22px/1 "Big Shoulders Display", sans-serif; text-transform: uppercase; letter-spacing: .03em; }
.cb__txt small { color: var(--apagado); font-size: 14px; }
.cb__seta { width: 20px; height: 20px; color: var(--vermelho); flex: none; transition: transform .35s var(--mola); }
.cb:hover .cb__seta { transform: translateX(4px); }
.cartao__pe { margin-top: 24px; text-align: center; color: var(--apagado); font-size: 14px; }
.cartao__pe p { margin: 0 0 8px; }
.cartao__pe a { color: var(--cromo); }

.js .cb { opacity: 0; transform: translateX(-18px); animation: cb-entra .6s var(--mola) forwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
@keyframes cb-entra { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .cb { opacity: 1; transform: none; animation: none; } .cb::before { transition: none; } }