/* Cartão digital da Marcio Veículos: as três peças do M se encaixam, os atalhos abrem pela dobra */
@font-face { font-family: "Raleway"; src: url("/assets/fonts/raleway.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --preto: #0B0B0C; --grafite: #18191C; --vermelho: #EE252C; --aluminio: #B9BEC5; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--preto); color: #fff; font: 400 1rem/1.5 "Raleway", "Segoe UI", Arial, sans-serif; overflow-x: hidden; }
::-webkit-scrollbar { width: 10px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb { background: var(--vermelho); border: 2px solid transparent; border-radius: 10px; background-clip: padding-box; }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-color: var(--vermelho) transparent; } }
svg { display: block; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--vermelho); }
.cartao { width: 100%; max-width: 460px; margin: 0 auto; padding: 36px 18px 40px; display: grid; gap: 22px; }
.cartao__topo { display: grid; justify-items: center; gap: 12px; text-align: center; }
.cartao__m { width: 112px; height: auto; fill: var(--vermelho); overflow: visible; }
.peca { transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .5s; }
.js .cartao:not(.pronto) .peca--e { transform: translate(-70px, 40px); opacity: 0; }
.js .cartao:not(.pronto) .peca--d { transform: translate(70px, 40px); opacity: 0; }
.js .cartao:not(.pronto) .peca--v { transform: translateY(-80px); opacity: 0; }
.peca--e, .peca--d { transition-delay: .15s; }
.cartao__nome { margin: 0; font-size: 1.9rem; line-height: 1; text-transform: uppercase; display: grid; }
.cartao__nome .g { font-weight: 800; }
.cartao__nome .f { font-weight: 200; letter-spacing: .08em; color: var(--vermelho); }
.cartao__nome small { margin-top: 10px; font-size: .72rem; font-weight: 600; letter-spacing: .5em; color: var(--aluminio); }
.cartao__lugar { margin: 0; color: var(--aluminio); font-size: .9rem; }
.cartao__botoes { display: grid; gap: 10px; }
.atalho { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; background: var(--grafite); border-left: 5px solid var(--vermelho); color: #fff; text-decoration: none; transition: background .3s, transform .5s cubic-bezier(.16, 1, .3, 1), opacity .5s; }
.atalho:hover { background: #232428; }
.atalho svg { width: 32px; height: 32px; flex: none; }
.atalho svg.mono { color: var(--vermelho); width: 28px; height: 28px; margin: 0 2px; }
.atalho span { display: grid; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; line-height: 1.2; min-width: 0; }
.atalho small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--aluminio); font-size: .82rem; overflow-wrap: anywhere; }
.js .cartao:not(.pronto) .atalho { opacity: 0; transform: perspective(600px) rotateX(-70deg); transform-origin: 50% 0; }
.cartao__compartilhar { justify-self: center; min-height: 46px; padding: 0 22px; background: none; border: 1.5px solid rgba(255, 255, 255, .3); color: #fff; font: 700 .8rem/1 "Raleway", sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.cartao__compartilhar:hover { border-color: var(--vermelho); }
.cartao__pe { margin: 0; text-align: center; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--aluminio); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }