/* Amplo — Cartão de visita para impressão (90×50 mm + 2 mm de sangria) e prévia dentro do cartão digital */
@font-face{font-family:'Bricolage Grotesque';font-weight:800;font-display:swap;src:url(../fonts/amplo/bricolage-grotesque-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:400;font-display:swap;src:url(../fonts/amplo/figtree-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:600;font-display:swap;src:url(../fonts/amplo/figtree-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:700;font-display:swap;src:url(../fonts/amplo/figtree-latin-700-normal.woff2) format('woff2')}

:root { --c-tinta: #0E2F33; --c-tinta2: #0B2340; --c-ouro: #FFC93C; --c-agua: #5EE2D3; --c-papel: #F4F6F3; }

/* ---------- o cartão (a mesma peça serve para impressão e para a prévia) ---------- */
.cartao, .cartao * { box-sizing: border-box; }
.cartao { position: relative; line-height: 1.3; text-align: left; width: 94mm; height: 54mm; overflow: hidden; border-radius: 3mm; color: #fff; font-family: Figtree, system-ui, sans-serif;
  background: radial-gradient(70mm 40mm at 10% 0%, #1A5A66 0%, rgba(26,90,102,0) 60%), radial-gradient(60mm 36mm at 100% 100%, #1D3F7A 0%, rgba(29,63,122,0) 60%), linear-gradient(135deg, var(--c-tinta) 0%, var(--c-tinta2) 100%);
  box-shadow: 0 18px 50px rgba(0,0,0,.35); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cartao .grade { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) .2mm, transparent .2mm), linear-gradient(90deg, rgba(255,255,255,.05) .2mm, transparent .2mm); background-size: 4mm 4mm; -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); }
.cartao .brilho { position: absolute; right: -14mm; top: -16mm; width: 40mm; height: 40mm; border-radius: 50%; background: radial-gradient(circle, rgba(255,201,60,.26), rgba(255,201,60,0) 65%); }
.cartao .linha { position: absolute; left: 0; right: 0; bottom: 0; height: 1.6mm; background: linear-gradient(90deg, var(--c-ouro), var(--c-agua)); }

.cartao.frente { display: flex; padding: 5mm 6mm 5.5mm 7mm; gap: 4mm; }
.cartao.frente .esq { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.cartao.frente .esq > * { flex-shrink: 0; }
.cartao.frente .foto { width: 10mm; height: 10mm; border-radius: 50%; padding: .6mm; background: conic-gradient(var(--c-ouro), var(--c-agua), var(--c-ouro)); margin-bottom: 1.6mm; }
.cartao.frente .foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: .5mm solid var(--c-tinta); }
.cartao.frente .nome { font-family: 'Bricolage Grotesque', Figtree, sans-serif; font-weight: 800; font-size: 5.2mm; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 1mm; padding: 0; color: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao.frente .cargo { font-size: 2.8mm; font-weight: 600; color: var(--c-ouro); margin: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao.frente .empresa { font-size: 2.5mm; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: #9ED7CF; margin-top: .4mm; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao.frente .logo { height: 7mm; margin-top: .6mm; }
.cartao.frente .logo img { height: 7mm; max-width: 34mm; object-fit: contain; object-position: left center; display: block; }
.cartao.verso.com-logo .capa, .cartao.verso.com-logo .veu { display: none; }
.cartao.verso.com-logo .qr.grande svg { width: 21mm; height: 21mm; }
.cartao.verso.com-logo .centro { gap: 1.2mm; }
.cartao.verso .logo-verso img { height: 9mm; max-width: 40mm; object-fit: contain; display: block; filter: drop-shadow(0 1mm 2mm rgba(0,0,0,.5)); }
.cartao.frente .dados { list-style: none; margin: 2mm 0 0; padding: 0; font-size: 2.4mm; line-height: 1.45; color: #E6EEF2; text-align: left; }
.cartao.frente .dados li { margin: 0; padding: 0; color: #E6EEF2; font-size: 2.4mm; line-height: 1.45; }
.cartao.frente .dados li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao.frente .dados i { font-style: normal; display: inline-block; width: 4mm; color: var(--c-agua); }
.cartao.frente .dir { width: 26mm; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; }
.cartao .qr { background: #fff; border-radius: 2.2mm; padding: 1.6mm; line-height: 0; box-shadow: 0 2mm 6mm rgba(0,0,0,.35); }
.cartao .qr svg { width: 22mm; height: 22mm; display: block; }
.cartao.frente .aponte { margin-top: 2mm; font-size: 2.1mm; line-height: 1.35; text-align: center; color: #C9D6E3; }
.cartao.frente .aponte b { color: #fff; font-weight: 700; }

.cartao.verso .capa { position: absolute; inset: 0; background: var(--capa) center/cover no-repeat; transform: scale(1.03); }
.cartao.verso .veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,47,51,.72), rgba(11,35,64,.94)); }
.cartao.verso .centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4mm; padding: 4mm; }
.cartao.verso .qr.grande svg { width: 26mm; height: 26mm; }
.cartao.verso .chamada { font-family: 'Bricolage Grotesque', Figtree, sans-serif; font-weight: 800; font-size: 4mm; letter-spacing: -.01em; margin-top: 1mm; }
.cartao.verso .url { font-size: 2.6mm; color: var(--c-ouro); font-weight: 700; }
.cartao.verso .marca { position: absolute; right: 5mm; bottom: 4mm; font-size: 2.3mm; letter-spacing: .14em; text-transform: uppercase; color: #9ED7CF; }

/* ---------- estilos alternativos ---------- */
.cartao .fundo-capa { display: none; }
.cartao.estilo-claro { background: #fff; color: #0E2F33; box-shadow: 0 10px 30px rgba(0,0,0,.18), inset 0 0 0 .4mm #E3E8E6; }
.cartao.estilo-claro .grade { background-image: linear-gradient(rgba(14,47,51,.05) .2mm, transparent .2mm), linear-gradient(90deg, rgba(14,47,51,.05) .2mm, transparent .2mm); }
.cartao.estilo-claro .brilho { background: radial-gradient(circle, rgba(255,201,60,.35), rgba(255,201,60,0) 65%); }
.cartao.estilo-claro .nome { color: #0E2F33; }
.cartao.estilo-claro .cargo { color: #B8860B; }
.cartao.estilo-claro .empresa, .cartao.estilo-claro .marca { color: #4F6B6E; }
.cartao.estilo-claro .dados, .cartao.estilo-claro .dados li { color: #2E4A4E; }
.cartao.estilo-claro .dados i { color: #1FAF5B; }
.cartao.estilo-claro .aponte { color: #4F6B6E; }
.cartao.estilo-claro .aponte b, .cartao.estilo-claro .chamada { color: #0E2F33; }
.cartao.estilo-claro .qr { box-shadow: 0 1mm 4mm rgba(14,47,51,.18); border: .3mm solid #E3E8E6; }
.cartao.estilo-claro .foto img { border-color: #fff; }
.cartao.estilo-claro .url { color: #B8860B; }
.cartao.estilo-claro .logo img, .cartao.estilo-claro .logo-verso img { background: #0E2F33; padding: 1.2mm 2mm; border-radius: 1.5mm; }
.cartao.estilo-claro .logo { height: auto; } .cartao.estilo-claro .logo img { height: 8.4mm; }
.cartao.verso.estilo-claro .capa, .cartao.verso.estilo-claro .veu { display: none; }
.cartao.estilo-capa .fundo-capa { display: block; position: absolute; inset: 0; background: var(--capa) center/cover no-repeat; }
.cartao.estilo-capa .grade { display: none; }
.cartao.estilo-capa .brilho { display: none; }
.cartao.estilo-capa::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11,35,64,.95) 0%, rgba(11,35,64,.86) 60%, rgba(11,35,64,.72) 100%); }
.cartao.estilo-capa .esq, .cartao.estilo-capa .dir, .cartao.estilo-capa .linha { z-index: 2; }
.cartao.verso.estilo-capa .veu { background: linear-gradient(180deg, rgba(14,47,51,.82), rgba(11,35,64,.96)); }
.cartao.verso.estilo-capa .centro { z-index: 2; }
.cartao.verso.estilo-capa .capa, .cartao.verso.estilo-capa .veu { display: block !important; }

/* ---------- fundo escolhido (pronto ou enviado pelo cliente) ---------- */
.cartao.com-fundo { background: var(--fundo) var(--fundo-pos, center) / cover no-repeat, #0E2F33; }
.cartao.com-fundo .grade, .cartao.com-fundo .brilho, .cartao.com-fundo .fundo-capa, .cartao.com-fundo::before { display: none !important; }
/* placa translúcida atrás do texto: leitura garantida em qualquer fundo */
.cartao.frente.com-fundo .esq { padding: 3mm 3.4mm; border-radius: 2.4mm; align-self: center; flex: 0 1 auto; max-width: 61mm; }
.cartao.frente.com-fundo .cargo { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cartao.frente.com-fundo.tom-escuro .esq { background: rgba(6, 20, 24, .66); box-shadow: 0 1mm 4mm rgba(0,0,0,.25); }
.cartao.frente.com-fundo.tom-claro .esq { background: rgba(255, 255, 255, .86); box-shadow: 0 1mm 4mm rgba(0,0,0,.12); }
.cartao.frente.com-fundo .dir { margin-left: auto; }
.cartao.com-fundo.tom-claro .nome { color: #0E2F33; }
.cartao.com-fundo.tom-claro .cargo { color: #A7770A; }
.cartao.com-fundo.tom-claro .empresa, .cartao.com-fundo.tom-claro .marca { color: #3F5A5D; }
.cartao.com-fundo.tom-claro .dados, .cartao.com-fundo.tom-claro .dados li { color: #22393C; }
.cartao.com-fundo.tom-claro .dados i { color: #1A8F4C; }
.cartao.frente.com-fundo .aponte { background: rgba(6,20,24,.62); color: #E6EEF2; padding: .8mm 1.6mm; border-radius: 1.4mm; margin-top: 1.6mm; }
.cartao.frente.com-fundo .aponte b { color: #fff; }
.cartao.com-fundo.tom-claro .logo img { background: #0E2F33; padding: 1mm 1.8mm; border-radius: 1.4mm; }
.cartao.verso.com-fundo .capa { display: block !important; background: var(--fundo) var(--fundo-pos, center) / cover no-repeat; transform: none; }
.cartao.verso.com-fundo .veu { display: block !important; }
.cartao.verso.com-fundo.tom-escuro .veu { background: radial-gradient(60% 70% at 50% 50%, rgba(6,20,24,.72), rgba(6,20,24,.35)); }
.cartao.verso.com-fundo.tom-claro .veu { background: radial-gradient(62% 78% at 50% 52%, rgba(255,255,255,.93), rgba(255,255,255,.55)); }
.cartao.verso.com-fundo .centro { z-index: 2; }
.cartao.verso.com-fundo.tom-claro .chamada { color: #0E2F33; }
.cartao.verso.com-fundo.tom-claro .url { color: #A7770A; }
.cartao.verso.com-fundo.tom-claro .logo-verso img { background: #0E2F33; padding: 1.2mm 2mm; border-radius: 1.5mm; }

/* com fundo, o tom do fundo manda nas cores (vale sobre qualquer estilo) */
.cartao.com-fundo.tom-escuro .nome, .cartao.com-fundo.tom-escuro .chamada { color: #fff; }
.cartao.com-fundo.tom-escuro .cargo, .cartao.com-fundo.tom-escuro .url { color: #FFC93C; }
.cartao.com-fundo.tom-escuro .empresa, .cartao.com-fundo.tom-escuro .marca { color: #9ED7CF; }
.cartao.com-fundo.tom-escuro .dados, .cartao.com-fundo.tom-escuro .dados li { color: #E6EEF2; }
.cartao.com-fundo.tom-escuro .dados i { color: #5EE2D3; }
.cartao.com-fundo.tom-escuro .logo img, .cartao.com-fundo.tom-escuro .logo-verso img { background: none; padding: 0; }
.cartao.com-fundo.tom-escuro .qr { border: 0; }

/* ---------- página de impressão ---------- */
body.amplo-impressao { margin: 0; background: var(--c-papel); font-family: Figtree, system-ui, sans-serif; color: var(--c-tinta); }
.amplo-impressao .barra { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding: 16px 24px; background: #fff; border-bottom: 1px solid #DCE5E2; }
.amplo-impressao .barra strong { display: block; font-size: 18px; }
.amplo-impressao .barra span { color: #5B6B6E; font-size: 14px; }
.amplo-impressao .acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.amplo-impressao .acoes button { border: 0; border-radius: 999px; padding: 10px 18px; font: 600 14px Figtree, sans-serif; background: var(--c-tinta); color: #fff; cursor: pointer; }
.amplo-impressao .acoes button:first-child { background: var(--c-ouro); color: var(--c-tinta); }
.amplo-impressao .acoes a { color: var(--c-tinta); font-size: 14px; margin-left: 6px; }
.amplo-impressao .folhas { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; padding: 36px 16px; }
.amplo-impressao .folha { position: relative; width: calc(94mm * 1.6); height: calc(54mm * 1.6); }
.amplo-impressao .folha::after { content: attr(id); position: absolute; left: 0; top: -22px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #5B6B6E; }
.amplo-impressao .cartao { transform: scale(1.6); transform-origin: top left; }
@media (max-width: 720px) { .amplo-impressao .folha { width: 94mm; height: 54mm; } .amplo-impressao .cartao { transform: none; } }
.amplo-impressao .rodape { text-align: center; color: #5B6B6E; font-size: 13px; padding: 0 16px 32px; }

/* embutido no painel (prévia ao vivo): sem barra, cartões empilhados em tamanho real */
.amplo-impressao.embutido .barra, .amplo-impressao.embutido .rodape { display: none; }
.amplo-impressao.embutido .folhas { flex-direction: column; align-items: center; gap: 36px; padding: 28px 12px; }
.amplo-impressao.embutido .folha { width: calc(94mm * 1.2); height: calc(54mm * 1.2); }
.amplo-impressao.embutido .cartao { transform: scale(1.2); }

@media print {
  @page { size: 94mm 54mm; margin: 0; }
  body.amplo-impressao { background: #fff; }
  .no-print { display: none !important; }
  .amplo-impressao .folhas { display: block; padding: 0; }
  .amplo-impressao .folha { page-break-after: always; break-after: page; width: 94mm; height: 54mm; overflow: hidden; }
  .amplo-impressao .folha::after { display: none; }
  .amplo-impressao .cartao { transform: none; margin: 0; border-radius: 0; box-shadow: none; }
}

/* ---------- prévia dentro do cartão digital (injetada depois do QR Code) ---------- */
.amplo-cartao-previa { padding: 0 16px 28px; text-align: center; }
.amplo-cartao-previa.no-lugar { padding-top: 8px; }
.amplo-cartao-previa.no-lugar .titulo { display: none; }
.amplo-cartao-previa .titulo { font: 700 .95rem/1.3 Figtree, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .8; margin-bottom: 12px; }
.amplo-cartao-previa .palco { display: inline-block; width: 100%; max-width: 356px; aspect-ratio: 94 / 54; position: relative; perspective: 900px; }
.amplo-cartao-previa .cartao { position: absolute; left: 0; top: 0; transform-origin: top left; }
.amplo-cartao-previa .palco { cursor: zoom-in; }
.amplo-cartao-previa .lupa { position: absolute; right: 8px; bottom: 8px; font: 600 .7rem Figtree, system-ui, sans-serif; color: #fff; background: rgba(0,0,0,.45); padding: 4px 9px; border-radius: 999px; pointer-events: none; }
/* ampliação (lightbox) com frente e verso */
.amplo-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(5,16,20,.9); backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 16px; animation: amploLbIn .25s ease; }
@keyframes amploLbIn { from { opacity: 0 } to { opacity: 1 } }
.amplo-lightbox .cena { perspective: 1400px; }
.amplo-lightbox .virador { position: relative; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.amplo-lightbox .virador.verso-ativo { transform: rotateY(180deg); }
.amplo-lightbox .lado { position: absolute; left: 0; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-origin: top left; }
.amplo-lightbox .lado.v { transform: rotateY(180deg); }
.amplo-lightbox .cartao { box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.amplo-lightbox .botoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.amplo-lightbox .botoes button, .amplo-lightbox .botoes a { border: 0; border-radius: 999px; padding: 12px 22px; font: 700 .95rem Figtree, system-ui, sans-serif; cursor: pointer; text-decoration: none; }
.amplo-lightbox .botoes .virar { background: #fff; color: #0E2F33; }
.amplo-lightbox .botoes .baixar { background: #FFC93C; color: #0E2F33; box-shadow: 0 5px 0 #C99A1C; }
.amplo-lightbox .botoes .fechar { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.amplo-lightbox .dica { color: #C9D6E3; font: .85rem Figtree, system-ui, sans-serif; text-align: center; }
.amplo-cartao-previa .acoes { margin-top: 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.amplo-cartao-previa .acoes a { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--c-ouro); color: var(--c-tinta) !important; font: 700 .95rem Figtree, system-ui, sans-serif; text-decoration: none !important; box-shadow: 0 5px 0 #C99A1C; }
.amplo-cartao-previa .acoes a.sec { background: rgba(255,255,255,.14); color: #fff !important; box-shadow: none; border: 1px solid rgba(255,255,255,.45); font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.amplo-cartao-previa .dica { font-size: .8rem; opacity: .85; margin-top: 10px; color: inherit; }
.amplo-cartao-previa .titulo { color: inherit; }