:root {
            --bg: #0b1320;
            --card: #0f1a2b;
            --brand: #0b7bd4;
            --brand-2: #16b4f0;
            --txt: #e6e7eb;
            --muted: #9aa3b2;
            --danger: #ef4444;
            --ok: #22c55e;
            --warning: #f59e0b;
            --border: #1f304b;
            --focus: 0 0 0 3px rgba(22, 180, 240, .35);
            --radius: 22px;
        }

        /* VLibras posicionado à esquerda e menor para não sobrepor o FAB */
        .vw-plugin-wrapper {
            left: 20px !important;
            right: auto !important;
            bottom: 20px !important;
            width: 48px !important;
        }

        /* Botão Flutuante de Acessibilidade (FAB) e Painel */
        .accessibility-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1050;
        }
        #accessibility-fab {
            background: var(--brand);
            color: #fff;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            transition: all .2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #accessibility-fab:hover {
            transform: scale(1.1);
            background: var(--brand-2);
        }
        #accessibility-panel {
            position: absolute;
            bottom: 65px;
            right: 0;
            width: 280px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 16px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            opacity: 0;
            transform: translateY(10px);
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.3s ease, border-color 0.3s ease;
        }
        #accessibility-panel.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .panel-group { display: flex; flex-direction: column; gap: 10px; }
        .panel-group .panel-label { font-size: 0.8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; margin: 0; transition: color 0.3s ease; }
        .panel-item { display: flex; align-items: center; justify-content: space-between; }
        .panel-item span { font-weight: 600; color: var(--txt); transition: color 0.3s ease; }
        .font-controls { display: flex; align-items: center; gap: 8px; }
        .font-controls button { width: 32px; height: 32px; padding: 0; border-radius: 50%; font-weight: bold; background: transparent; border: 1px solid var(--border); color: var(--txt); transition: color 0.3s ease, border-color 0.3s ease; }
        .font-controls input[type="range"] { flex-grow: 1; margin: 0; padding: 0; accent-color: var(--brand); }
        .panel-action-button { width: 100%; padding: 10px; text-align: center; background: #0c1422; border-radius: 12px; border: 1px solid var(--border); color: var(--txt); cursor: pointer; font-weight: 600; text-decoration: none; display: block; transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; }
        .panel-action-button:hover { border-color: var(--brand-2); }
        #acc-toggle-tts.active { background-color: var(--ok); border-color: var(--ok); color: #fff; }
        
        /* Tema Claro (Alto Contraste) */
        body.light-mode { --bg: #f8f9fa; --card: #ffffff; --brand: #005cb9; --brand-2: #0077d1; --txt: #212529; --muted: #6c757d; --border: #dee2e6; }
        body.light-mode { background: var(--bg); }
        body.light-mode input, body.light-mode select, body.light-mode textarea { background: var(--card); border-color: #ced4da; color: var(--txt); }
        body.light-mode .card { background: var(--card); box-shadow: 0 4px 20px rgba(0, 0, 0, .08); }
        body.light-mode .tag { background: #e9ecef; color: var(--muted); border-color: #dee2e6; }
        body.light-mode .seg label { background: #e9ecef; }
        body.light-mode .primary { color: #fff; }
        body.light-mode .notice { background: rgba(11, 123, 212, .1); border-color: rgba(11, 123, 212, .3); color: #004a8c; }
        body.light-mode .confirm { background: rgba(34, 197, 94, .1); border-color: rgba(34, 197, 94, .3); color: #155724; }
        body.light-mode footer { color: var(--muted); }
        body.light-mode h1, body.light-mode h2 { color: #003d7a; }
        body.light-mode .kicker { color: var(--brand); }
        body.light-mode .lead { color: #495057; }
        body.light-mode .participant { background: rgba(0, 0, 0, .02); }
        body.light-mode .sub-section { background: rgba(0, 0, 0, .01); }
        body.light-mode #accessibility-panel { background: var(--card); border-color: var(--border); }
        body.light-mode .panel-label { color: var(--muted); }
        body.light-mode .panel-item span { color: var(--txt); }
        body.light-mode .font-controls button, body.light-mode .panel-action-button { color: var(--txt); border-color: var(--border); }
        body.light-mode .panel-action-button { background: #f8f9fa; }
        body.light-mode .panel-action-button:hover { border-color: var(--brand-2); }
        body.light-mode .step-indicator .step { background-color: #e9ecef; }
        body.light-mode .step-indicator .step.active .step-number { background-color: var(--brand); color: #fff; }
        body.light-mode .step-indicator .step.completed .step-number { background-color: var(--ok); color: #fff; }
        body.light-mode .step-indicator .step-label { color: var(--muted); }
        body.light-mode .step-indicator .step.active .step-label { color: var(--txt); }
        body.light-mode small.help { color: #005a9c; }

        /* Estilos do Shepherd.js (Tour) */
        .shepherd-element { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; }
        .shepherd-header { background: transparent !important; padding: 1em 1em 0 !important; }
        .shepherd-title { color: var(--brand-2) !important; font-weight: bold !important; }
        .shepherd-text { color: var(--txt) !important; padding: 0 1em 1em !important; }
        .shepherd-button { background: var(--brand) !important; border-radius: 12px !important; padding: 8px 16px !important; color: #fff !important; text-transform: none !important; }
        .shepherd-button:not(.shepherd-button-secondary):hover { background: var(--brand-2) !important; }
        .shepherd-button.shepherd-button-secondary { background: #333 !important; }

        /* CSS GERAL */
        html { transition: font-size: 0.3s ease; scroll-behavior: smooth; }
        * { box-sizing: border-box; }
        @keyframes bg-pan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        body { margin: 0; min-height: 100vh; background: radial-gradient(1200px 700px at 50% -10%, rgba(22, 180, 240, .08), transparent), radial-gradient(1000px 700px at 50% 110%, rgba(11, 123, 212, .08), transparent), var(--bg); color: var(--txt); font: 1rem/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; transition: background-color 0.3s ease, color 0.3s ease; animation: bg-pan 30s linear infinite; }
        .wrap { max-width: 1200px; margin: 40px auto; padding: 0 16px; }
        .card { background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0, 0, 0, .25); overflow: hidden; transition: background-color 0.3s ease; }
        header.hero { padding: 20px 28px 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
        header .kicker { letter-spacing: .12em; color: var(--brand-2); text-transform: uppercase; font-weight: 700; font-size: .8rem; }
        header h1 { margin: .25rem 0 .5rem; font-size: clamp(1.5rem, 4vw, 1.75rem); color: var(--txt); }
        header p { margin: 0; color: var(--muted); }
        form { padding: 24px 28px; }
        .grid { display: grid; gap: 16px; align-items: start; }
        .g-1 { grid-template-columns: 1fr; }
        .g-2 { grid-template-columns: 1fr; } /* Mobile-first: padrão é 1 coluna */
        .g-3 { grid-template-columns: 1fr; }
        .g-4 { grid-template-columns: 1fr; }
        .field { display: flex; flex-direction: column; gap: 6px; position: relative; }
        .field label { font-weight: 600; }
        .req::after { content: ' *'; color: var(--brand-2); }
        input, select, textarea { background: #0c1422; border: 1px solid var(--border); color: var(--txt); border-radius: 12px; padding: 12px; outline: none; transition: all .15s; font-size: 1rem; width: 100%; }
        input:focus, select:focus, textarea:focus { box-shadow: var(--focus); border-color: var(--brand-2); }
        input[type="file"] { padding: 10px; }
        .file-upload-wrapper { display: flex; align-items: center; gap: 12px; }
        .file-name { font-size: 0.85rem; color: var(--muted); }
        textarea { min-height: 96px; resize: vertical; }
        
        small.help {
            color: #a7cde9;
            font-size: 0.85rem;
            display: block;
            margin-top: 4px;
            font-weight: 500;
        }

        .age { display: flex; align-items: center; gap: 8px; color: var(--muted); }
        .tag { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); font-size: .8rem; }
        .divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 24px 0; }
        .notice { background: linear-gradient(180deg, rgba(22, 180, 240, .12), rgba(22, 180, 240, .04)); border: 1px solid rgba(22, 180, 240, .35); border-radius: 14px; padding: 14px 16px; color: #dbf7fb; text-align: center; }
        .participant { padding: 16px; border: 1px dashed var(--border); border-radius: 14px; background: rgba(255, 255, 255, .02); }
        .participant h3 { margin: 0 0 12px; font-size: 1rem; color: #cde9ee; }
        .seg { display: flex; gap: 10px; flex-wrap: wrap; }
        .seg label { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); padding: 10px 12px; border-radius: 12px; cursor: pointer; background: #0c1422; }
        .seg input { accent-color: var(--brand-2); width: auto; } /* Ajuste para checkboxes/radios */
        .lead { max-width: 840px; margin: 12px auto 0; color: #d2dae6; }
        .confirm { display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(180deg, rgba(16, 185, 129, .10), rgba(16, 185, 129, .04)); border: 1px solid rgba(34, 197, 94, .35); border-radius: 14px; padding: 14px 16px; color: #dff8ea; }
        .confirm input { transform: translateY(3px); width: auto; } /* Ajuste para checkbox de confirmação */
        .actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 8px; }
        .actions .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
        button, .button-link { appearance: none; border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; cursor: pointer; font-weight: 700; font-size: 1rem; text-decoration: none; display: inline-block; text-align: center; }
        .primary { background: linear-gradient(180deg, var(--brand-2), var(--brand)); color: #08262b; border: none; }
        .primary[disabled], button[disabled] { opacity: .6; cursor: not-allowed; filter: grayscale(.2); }
        .err { color: var(--danger); font-size: .9rem; }
        .hidden { display: none !important; }
        .visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; white-space: nowrap; }
        footer { padding: 14px 28px; border-top: 1px solid var(--border); color: var(--muted); font-size: .9rem; text-align: center; }
        .toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-8px); background: linear-gradient(180deg, rgba(34, 197, 94, .95), rgba(16, 185, 129, .95)); color: #062d17; padding: 12px 16px; border-radius: 12px; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; border: 1px solid rgba(255, 255, 255, .25); z-index: 9999; }
        .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
        .sub-section { padding: 16px; border: 1px solid var(--border); border-radius: 14px; margin-top: 16px; background: rgba(255, 255, 255, .01); }
        .sub-section-title { color: var(--brand-2); font-weight: 700; font-size: 1.1rem; border-bottom: 1px solid var(--border); padding-bottom: 8px; margin: 0 0 16px 0; }
        .highlights-section { padding: 24px 28px; background: rgba(0,0,0,0.1); }
        .highlights-title { text-align: center; font-size: 1.5rem; font-weight: 700; color: var(--txt); margin-bottom: 24px; }
        .highlights-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
        
        .highlight-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .highlight-card:hover { transform: translateY(-8px); box-shadow: 0 12px 35px rgba(0,0,0,0.3); }
        .highlight-card h3 { font-size: 1.2rem; color: var(--brand-2); margin: 0 0 10px; }
        .highlight-card p { color: var(--muted); margin: 0 0 20px; font-size: 0.95rem; flex-grow: 1; }
        .highlight-card .cta-btn { background: #0c1422; border: 1px solid var(--border); color: var(--txt); border-radius: 12px; padding: 10px 16px; text-align: center; text-decoration: none; font-weight: 600; display: block; transition: all .2s; }
        .highlight-card .cta-btn:hover { border-color: var(--brand-2); background-color: var(--brand); color: #fff; }
        
        .intro-text-grid { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 1000px; margin: 32px auto 0; text-align: left; }
        .intro-text-grid p { font-size: 0.95rem; line-height: 1.6; color: var(--muted); margin: 0; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,0.02); }
        .intro-text-grid p strong { color: var(--brand-2); font-weight: 600; display: block; margin-bottom: 8px; }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .animated { animation: fadeInUp 0.6s ease-out forwards; opacity: 0; }
        .login-link { margin-top: 24px; text-align: center; font-size: 0.9rem; }
        .login-link a { color: var(--muted); text-decoration: underline; font-weight: 600; cursor: pointer; }
        .login-link a:hover { color: var(--brand-2); }

        /* Estilos para Login, Recuperação e Carteirinha */
        #secRecuperarSenha, #secLogin { padding: 40px 28px; }
        #secCarteirinha { padding: 24px 28px; }
        .form-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
        .form-actions a { font-size: 0.9rem; color: var(--muted); text-decoration: underline; cursor: pointer; text-align: center; }
        .form-actions a:hover { color: var(--brand-2); }
        
        /* Estilos do Painel do Usuário (Carteirinha) */
        .user-panel { max-width: 550px; margin: 24px auto; text-align: left; }
        .user-panel-header { text-align: center; margin-bottom: 24px; }
        .user-panel-header h2 { color: var(--brand-2); font-size: 1.8rem; margin: 0 0 8px; }
        .user-panel-header .lead { margin: 0; }
        .user-panel-card-digital { background: linear-gradient(145deg, #1a2c47, #111d32); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); position: relative; overflow: hidden; }
        .user-panel-card-digital::before { content: ''; position: absolute; top: -100px; left: -100px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(11, 123, 212, 0.15), transparent 70%); }
        .user-panel-card-digital .card-header { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-bottom: 16px; margin-bottom: 20px; text-align: center; }
        .user-panel-card-digital .card-header img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--brand-2); }
        .user-panel-card-digital .user-info h3 { margin: 0; font-size: 1.5rem; color: var(--txt); }
        .user-panel-card-digital .user-info p { margin: 0; color: var(--muted); font-weight: 500; }
        .user-panel-card-digital .card-section { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 20px; }
        .user-panel-card-digital .card-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
        .user-panel-card-digital .section-title { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; font-weight: 600; margin-bottom: 12px; }
        .user-panel-card-digital .info-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; flex-wrap: wrap; }
        .user-panel-card-digital .info-item .label { font-weight: 600; color: var(--txt); }
        .user-panel-card-digital .info-item .value { color: var(--muted); text-align: right; }
        .user-panel-card-digital .info-item .value.status-ok { color: var(--ok); font-weight: 700; }
        .user-panel-card-digital .card-footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; }
        .user-panel-card-digital .card-footer p { font-size: 0.85rem; color: var(--muted); margin: 0; }
        .user-panel-card-digital .card-footer img { max-width: 120px; opacity: 0.8; margin-top: 8px; }
        .user-panel-card-digital .action-button { background: var(--brand); color: #fff; border: none; width: 100%; margin-top: 8px; opacity: 0.5; cursor: not-allowed; }
        #dependents-list .dependent-item { background: rgba(255,255,255,0.03); padding: 12px; border-radius: 12px; margin-bottom: 8px; border: 1px solid var(--border); }
        #dependents-list .dependent-item .dependent-name { font-weight: 700; color: var(--txt); font-size: 1.1rem; }
        #dependents-list .dependent-item .dependent-details { font-size: 0.9rem; color: var(--muted); }
        #user-panel-notice { margin-bottom: 24px; border-color: var(--warning); background: rgba(245, 158, 11, .1); color: #fef3c7; }
        
        /* Botão do WhatsApp com estilo primário */
        .whatsapp-button-styled {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
        }

        /* Estilos da Barra de Progresso */
        .step-indicator { display: flex; justify-content: space-between; margin-bottom: 24px; position: relative; }
        .step-indicator::before { content: ''; position: absolute; top: 16px; left: 16px; right: 16px; height: 2px; background-color: var(--border); z-index: -1; }
        .step-indicator .step { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100px; background-color: var(--bg); padding: 0 5px; transition: all 0.3s ease; }
        .step-indicator .step-number { width: 32px; height: 32px; border-radius: 50%; background-color: var(--border); color: var(--muted); display: flex; align-items: center; justify-content: center; font-weight: 700; transition: all 0.3s ease; }
        .step-indicator .step-label { margin-top: 8px; font-size: 0.8rem; font-weight: 600; color: var(--muted); transition: all 0.3s ease; }
        .step-indicator .step.active .step-number { background-color: var(--brand); color: #fff; transform: scale(1.1); }
        .step-indicator .step.active .step-label { color: var(--txt); }
        .step-indicator .step.completed .step-number { background-color: var(--ok); color: #fff; }
        .form-step { animation: fadeInUp 0.5s ease-out; }
        .step-navigation { display: flex; justify-content: space-between; margin-top: 24px; flex-wrap: wrap; gap: 10px; }

        /* Estilos para Validação em Tempo Real */
        .validation-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 0.2s; }
        .validation-icon.visible { opacity: 1; }
        input.valid { border-color: var(--ok); }
        input.invalid { border-color: var(--danger); }
        input.valid:focus { box-shadow: 0 0 0 3px rgba(34, 197, 94, .35); }
        input.invalid:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, .35); }

        /* Estilo para o botão de visibilidade da senha */
        .input-with-toggle {
            position: relative;
            display: flex;
            align-items: center;
        }
        .input-with-toggle input {
            flex-grow: 1;
            padding-right: 45px;
        }
        .password-toggle {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            border: none;
            cursor: pointer;
            color: var(--muted);
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .video-tutorial-section {
            background-color: #000;
            border: 1px solid var(--border);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            text-align: center;
            padding: 24px;
        }
        .video-tutorial-section .button-link {
            background: #0c1422;
            border: 1px solid var(--border);
            color: var(--txt);
            transition: all .2s;
            margin-top: 12px;
        }
        .video-tutorial-section .button-link:hover {
            border-color: var(--brand-2);
            background-color: var(--brand);
            color: #fff;
        }

        /* ================================= */
        /* === MELHORIAS DE RESPONSIVIDADE === */
        /* ================================= */

        /* Tablets e telas maiores */
        @media (min-width: 768px) {
            .g-2 { grid-template-columns: repeat(2, 1fr); }
            .g-3 { grid-template-columns: repeat(3, 1fr); }
            .g-4 { grid-template-columns: repeat(4, 1fr); }
            .highlights-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
            .intro-text-grid { grid-template-columns: repeat(2, 1fr); }
            .user-panel-card-digital .card-header { flex-direction: row; text-align: left; }
        }

        /* Telas pequenas (Mobile) */
        @media (max-width: 600px) {
            .wrap { margin: 20px auto; padding: 0 10px; }
            form { padding: 16px; }
            header.hero { padding: 16px; }
            .accessibility-container { bottom: 85px; right: 10px; }
            .step-indicator .step-label { display: none; }
            .step-navigation { flex-direction: column; }
            .step-navigation button { width: 100%; justify-content: center; }
            .step-navigation #btnPrev { order: 2; }
            .step-navigation #btnNext, .step-navigation #btnFinalSubmit { order: 1; }
        }
        
        /* Container da carteirinha para impressão - Fica invisível na tela */
        .id-card-print-container {
            display: none;
        }
        
        /* =================================================================== */
        /* === NOVAS REGRAS DE IMPRESSÃO DA CARTEIRINHA DE ALTA FIDELIDADE === */
        /* =================================================================== */
        @media print {
            @page {
                size: A4 landscape;
                margin: 1cm;
            }

            body {
                background: #fff !important;
                color: #000 !important;
                font-family: 'Helvetica Neue', Arial, sans-serif;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            /* Esconde tudo, exceto o container dos cartões para impressão */
            body > *:not(.wrap),
            .wrap > *:not(.card),
            .card > *:not(#secCarteirinha),
            #secCarteirinha > *:not(.id-card-print-container),
            .accessibility-container, 
            footer, 
            .vw-plugin-wrapper {
                display: none !important;
            }

            /* Garante que a seção da carteirinha e o container estejam visíveis e ocupem o espaço */
            #secCarteirinha, .id-card-print-container {
                display: flex !important;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                gap: 10mm;
                margin: 0;
                padding: 0;
                max-width: 100%;
            }

            /* Estilo base para ambos os lados do cartão */
            .id-card-front, .id-card-back {
                width: 85.6mm;
                height: 53.98mm;
                border-radius: 3.18mm;
                background-color: #E9EAEB; /* Cinza claro de fundo */
                position: relative;
                overflow: hidden;
                page-break-inside: avoid;
                display: flex;
                flex-direction: column;
                padding: 3mm;
                box-sizing: border-box;
            }

            /* Elementos gráficos de fundo */
            .card-bg-graphics {
                position: absolute;
                top: 0; left: 0;
                width: 100%; height: 100%;
                z-index: 0;
                background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-4c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63-22c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%232E8540' fill-opacity='0.08' fill-rule='evenodd'/%3E%3C/svg%3E");
            }

            /* --- FRENTE DO CARTÃO --- */
            .card-header-front {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                position: relative; z-index: 1;
            }
            .logo-seal {
                width: 15mm; height: 15mm;
                background-color: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 1.5mm;
                box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            }
            .logo-seal img { width: 100%; height: auto; }
            .title-block {
                text-align: right;
                color: #4A4A4A;
            }
            .title-block h1 {
                font-size: 8pt;
                font-weight: 600;
                margin: 0;
                line-height: 1.1;
            }
            .title-block h2 {
                font-size: 6.5pt;
                font-weight: 400;
                margin: 0.5mm 0 0 0;
                text-transform: uppercase;
                letter-spacing: 0.5pt;
            }

            .card-body-front {
                margin-top: 2mm;
                display: flex;
                gap: 3mm;
                flex-grow: 1;
                position: relative; z-index: 1;
            }
            .info-block {
                background-color: white;
                border-radius: 2mm;
                padding: 2.5mm;
                flex-basis: 55%;
                box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            .info-item { font-size: 6.5pt; line-height: 1.5; }
            .info-item .label { font-weight: 400; color: #666; }
            .info-item .value { font-weight: 700; color: #000; }
            
            .photo-block { flex-basis: 45%; }
            .photo-block img {
                width: 100%;
                height: 28mm;
                object-fit: cover;
                border-radius: 2mm;
                border: 0.5mm solid white;
                box-shadow: 0 1px 3px rgba(0,0,0,0.2);
            }

            .card-footer-front {
                text-align: center;
                position: relative; z-index: 1;
                margin-top: auto;
                padding-top: 1mm;
            }
            .matricula-block { font-size: 7pt; color: #4A4A4A; }
            .matricula-block span { font-weight: 700; color: #BF4D4A; }
            .barcode-front {
                display: block;
                margin: 0.5mm auto 0;
                width: 45mm;
                height: 7mm;
            }

            /* --- VERSO DO CARTÃO --- */
            .card-header-back {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                position: relative; z-index: 1;
            }
            .card-header-back .logo-atec { width: 12mm; height: auto; }

            .card-body-back {
                background-color: white;
                border-radius: 2mm;
                padding: 2.5mm;
                margin: 2mm 0;
                flex-grow: 1;
                box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                text-align: center;
                position: relative; z-index: 1;
            }
            .card-body-back h3 {
                font-size: 7pt;
                font-weight: 700;
                color: #2E8540;
                margin: 0 0 1.5mm 0;
                text-transform: uppercase;
                border-bottom: 0.5pt solid #E0E0E0;
                padding-bottom: 1mm;
            }

            .card-body-back p {
                font-size: 6.5pt;
                line-height: 1.4;
                margin: 0.5mm 0;
                color: #333;
            }

            .card-footer-back {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                position: relative; z-index: 1;
                margin-top: auto;
                padding-top: 1mm;
                border-top: 0.5pt solid #E0E0E0;
            }
            .signature-block-back, .validity-block-back {
                font-size: 6pt;
                color: #666;
                text-align: center;
            }
            .signature-block-back img { height: 7mm; display: block; margin-bottom: 0.5mm; }
            .national-validity-back {
                font-size: 6pt;
                font-weight: 600;
                color: #4A4A4A;
                text-align: center;
                max-width: 30mm;
            }
            .validity-block-back { text-align: right; }
            .validity-block-back .valid-until { font-size: 7pt; font-weight: 700; color: #000; }
            .validity-block-back .barcode-back { display: block; height: 5mm; margin: 0.5mm 0; }
            .validity-block-back .matricula-back { font-size: 7pt; }
        }