/* TR Car Multimarcas · cartão digital: o letreiro azul da fachada, com as linhas de LED acendendo dos dois lados do logo */
@font-face { font-family: "Exo 2"; src: url("/assets/fonts/exo-2-italico.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("/assets/fonts/be-vietnam-pro-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("/assets/fonts/be-vietnam-pro-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root { --azul: #0A3BB0; --tinta: #0B0D12; --e: cubic-bezier(.2, .8, .2, 1); --corte: cubic-bezier(.7, 0, .2, 1); }
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scrollbar-gutter: stable; }
body { margin: 0; min-height: 100svh; background: var(--azul); color: #fff; font: 400 1rem/1.5 "Be Vietnam Pro", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
svg { fill: currentColor; display: block; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cartao { width: min(460px, 100%); margin: 0 auto; padding: 44px 20px 26px; display: flex; flex-direction: column; gap: 22px; min-height: 100svh; }
.cartao__letreiro { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; margin: 0; }
.led { display: block; height: 3px; border-radius: 3px; background: #fff; }
.led:first-child { transform-origin: 100% 50%; }
.led:last-child { transform-origin: 0 50%; }
.cartao__logo { margin: 0; width: 150px; }
.cartao__logo .logo-camadas { width: 100%; height: auto; fill: #fff; overflow: visible; }
.cartao__linha { margin: 0; text-align: center; font-weight: 700; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }
.cartao__atalhos { display: grid; gap: 10px; }
.atalho { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; border-radius: 4px; background: #fff; color: var(--tinta); text-decoration: none; }
.atalho::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #E9EEF8; clip-path: polygon(105% 0, 105% 0, 120% 100%, 120% 100%); transition: clip-path .45s var(--corte); }
.atalho:hover::before, .atalho:focus-visible::before { clip-path: polygon(-25% 0, 105% 0, 120% 100%, -10% 100%); }
.atalho > svg:first-child { width: 32px; height: 32px; flex: none; }
.atalho__mono { color: var(--azul); }
.atalho span { flex: 1; display: grid; font: italic 800 1.15rem/1.15 "Exo 2", sans-serif; }
.atalho small { font: 400 .82rem/1.3 "Be Vietnam Pro", sans-serif; color: #586070; }
@media (max-width: 360px) { .cartao { padding-left: 14px; padding-right: 14px; } .atalho { gap: 10px; padding: 10px 12px; } .atalho > svg:first-child { width: 28px; height: 28px; } .atalho small { font-size: .72rem; } }
.atalho__seta { width: 22px; height: 22px; color: var(--azul); flex: none; transition: transform .3s var(--e); }
.atalho:hover .atalho__seta { transform: translateX(4px); }
.atalho--destaque { background: var(--tinta); color: #fff; }
.atalho--destaque::before { background: #1A1E28; }
.atalho--destaque .atalho__mono, .atalho--destaque .atalho__seta { color: #fff; }
.cartao__foto { margin: 4px 0 0; border-radius: 4px; overflow: hidden; }
.cartao__foto img { width: 100%; height: auto; display: block; }
.cartao__pe { margin: auto 0 0; text-align: center; font-size: .8rem; color: rgba(255, 255, 255, .8); }
.site-por a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .7); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* entrada: as LEDs acendem do logo para fora, o logo se monta (lâmina por último), os atalhos entram pelo corte */
.js .led { transform: scaleX(0); transition: transform .8s var(--corte) .2s; }
.js .cartao__logo path { opacity: 0; transform: translateX(14%) skewX(-10deg); transform-box: fill-box; transition: opacity .5s ease, transform .7s var(--e); }
.js .cartao__logo .lg-tr { transition-delay: .35s; }
.js .cartao__logo .lg-car { transition-delay: .5s; }
.js .cartao__logo .lg-multimarcas { transition-delay: .65s; transform: none; }
.js .cartao__logo .lg-lamina { transition-delay: .85s; transform: translate(30%, -60%); }
.js .cartao__linha { opacity: 0; transition: opacity .6s ease .9s; }
.js .atalho, .js .cartao__foto { clip-path: polygon(120% -20%, 120% -20%, 120% 120%, 140% 120%); transition: clip-path .8s var(--corte); transition-delay: calc(1s + var(--i, 5) * 90ms); }
.pronto .led { transform: scaleX(1); }
.pronto .cartao__logo path { opacity: 1; transform: none; }
.pronto .cartao__linha { opacity: 1; }
.pronto .atalho, .pronto .cartao__foto { clip-path: polygon(-40% -20%, 120% -20%, 120% 120%, -20% 120%); }
.assentou .atalho, .assentou .cartao__foto { clip-path: none; transition: none; }
/* vivo depois: as LEDs pulsam devagar e a lâmina dá um tranco de tempos em tempos */
.assentou .led { animation: pulso 3.2s ease-in-out infinite; }
.assentou .cartao__logo .lg-lamina { animation: tranco 5s var(--e) 1s infinite; }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes tranco { 0%, 82%, 100% { transform: none; } 88% { transform: translate(-8%, 4%); } }
@media (prefers-reduced-motion: reduce) {
  .js .led, .js .cartao__logo path { transform: none !important; }
  .js .atalho, .js .cartao__foto { clip-path: none !important; opacity: 0; transition: opacity .6s ease; }
  .pronto .atalho, .pronto .cartao__foto { opacity: 1; }
  .assentou .led, .assentou .cartao__logo .lg-lamina { animation: none; }
}