/* CD Pro UI v2 · tokens e componentes compartilhados do sistema (aplicativo, vendedor, Estúdio e próximas áreas).
   Opt-in: data-cdpro-ui no body. Não altera o cartão público nem a landing.
   Fonte única: Manrope (hospedada em assets). Cores alinhadas ao site cartaodigital.pro.
   Referência visual de todos os componentes: design-system.html. */
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
 /* marca */
 --cd-navy:#112D4E;--cd-navy-hover:#1B3D63;--cd-navy-deep:#081A2E;--cd-blue:#164F8D;
 --cd-yellow:#F4C44E;--cd-yellow-light:#FFDE83;--cd-yellow-hover:#FFD466;--cd-yellow-edge:#C18E17;--cd-yellow-soft:#FFF7DD;
 /* superfícies e texto */
 --cd-white:#FFFFFF;--cd-canvas:#F5F7FA;--cd-surface-soft:#F8FAFC;--cd-surface-tint:#F2F6FB;--cd-border:#E3E8EE;--cd-border-strong:#C5D1DD;
 --cd-text:#142B44;--cd-muted:#5F6E80;--cd-subtle:#8391A2;--cd-on-navy:#FFFFFF;--cd-on-navy-muted:#A9BBCE;
 /* estados */
 --cd-selection:var(--cd-yellow-soft);--cd-success:#1F7A4D;--cd-success-soft:#EAF6EF;--cd-danger:#B93A2A;--cd-danger-soft:#FFF4F2;--cd-warning:#7A5B12;--cd-warning-soft:#FBF1D6;
 --cd-focus:var(--cd-blue);--cd-whatsapp:#1F7A4D;--cd-whatsapp-edge:#12583A;
 /* Cores por assunto: só em ícones de menu do app, sempre o mesmo assunto com a mesma cor */
 --cd-topic-perfil:#1F5FAF;--cd-topic-visual:#6A48C2;--cd-topic-servicos:#C26A00;--cd-topic-fotos:#0B84B5;--cd-topic-videos:#C8423B;--cd-topic-contato:#1E8A4F;--cd-topic-redes:#B8337E;--cd-topic-pix:#0E8078;--cd-topic-avaliacoes:#B07A00;
 /* tipografia */
 --cd-font-body:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;--cd-font-heading:var(--cd-font-body);
 --cd-text-xs:.8125rem;--cd-text-sm:.875rem;--cd-text-base:1rem;--cd-text-lg:1.125rem;--cd-title:clamp(1.625rem,3vw,2.25rem);--cd-display:clamp(2rem,4.4vw,3rem);
 /* espaço, forma, profundidade */
 --cd-space-1:4px;--cd-space-2:8px;--cd-space-3:12px;--cd-space-4:16px;--cd-space-5:20px;--cd-space-6:24px;--cd-space-8:32px;--cd-space-10:40px;
 --cd-radius-sm:10px;--cd-radius-control:14px;--cd-radius-card:20px;--cd-radius-panel:28px;--cd-radius-pill:999px;
 --cd-shadow-card:0 1px 2px #112D4E08,0 8px 24px #112D4E0A;--cd-shadow-float:0 18px 48px #112D4E24;--cd-shadow-bar:0 -6px 26px #081A2E1F;
 --cd-touch:48px;--cd-motion:160ms cubic-bezier(.22,1,.36,1);
}
[data-cdpro-ui]{font-family:var(--cd-font-body);font-size:var(--cd-text-base);line-height:1.5;color:var(--cd-text);background:var(--cd-canvas);-webkit-font-smoothing:antialiased}
[data-cdpro-ui] :is(button,input,select,textarea){font-family:inherit}
[data-cdpro-ui] :is(h1,h2,h3,h4){font-family:var(--cd-font-heading);font-weight:800;line-height:1.15;letter-spacing:-.03em;color:var(--cd-navy);text-wrap:balance}
[data-cdpro-ui] :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--cd-focus);outline-offset:3px}

/* ---------- botões ----------
   primário (dourado com base): a ação principal da tela, uma por tela.
   escuro: avançar, salvar, confirmar. secundário: alternativa. discreto: ação terciária. whatsapp: abre conversa. */
[data-cdpro-ui] :is(.cd-button,.primary,.secondary,.quiet){display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--cd-touch);padding:12px 20px;border:1px solid transparent;border-radius:var(--cd-radius-control);font-size:1rem;font-weight:800;line-height:1.3;letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:transform var(--cd-motion),box-shadow var(--cd-motion),background var(--cd-motion),border-color var(--cd-motion)}
[data-cdpro-ui] :is(.cd-button,.primary,.secondary,.quiet) svg{flex:none}
[data-cdpro-ui] :is(.cd-button--primary,.primary){background:linear-gradient(var(--cd-yellow-light),var(--cd-yellow) 80%);border-color:transparent;color:#172B43;box-shadow:inset 0 2px 0 #FFF7D7,0 4px 0 var(--cd-yellow-edge)}
[data-cdpro-ui] :is(.cd-button--primary,.primary):not(:disabled):active{transform:translateY(3px);box-shadow:inset 0 2px 0 #FFF7D7,0 1px 0 var(--cd-yellow-edge)}
[data-cdpro-ui] .cd-button--navy{background:var(--cd-navy);color:var(--cd-on-navy);box-shadow:0 4px 0 var(--cd-navy-deep)}
[data-cdpro-ui] .cd-button--navy:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 var(--cd-navy-deep)}
[data-cdpro-ui] :is(.cd-button--secondary,.secondary){background:var(--cd-white);border:2px solid var(--cd-border);color:var(--cd-navy)}
[data-cdpro-ui] :is(.cd-button--quiet,.quiet){background:transparent;color:var(--cd-muted);box-shadow:none}
[data-cdpro-ui] .cd-button--whatsapp{background:var(--cd-whatsapp);color:#fff;box-shadow:0 4px 0 var(--cd-whatsapp-edge)}
[data-cdpro-ui] .cd-button--whatsapp:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 var(--cd-whatsapp-edge)}
[data-cdpro-ui] .cd-button--danger{background:var(--cd-white);border:2px solid #F0CFC9;color:var(--cd-danger)}
[data-cdpro-ui] .cd-button--block{width:100%}
[data-cdpro-ui] .cd-button--sm{min-height:40px;padding:8px 14px;font-size:.9375rem;border-radius:12px}
[data-cdpro-ui] :is(.cd-button,.primary,.secondary,.quiet):disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
[data-cdpro-ui] .cd-link{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--cd-blue);text-decoration:none}
[data-cdpro-ui] .cd-icon-button{display:inline-grid;place-items:center;width:var(--cd-touch);height:var(--cd-touch);border-radius:var(--cd-radius-control);border:1px solid var(--cd-border);background:var(--cd-white);color:var(--cd-navy);cursor:pointer}

/* ---------- campos ---------- */
[data-cdpro-ui] :is(.cd-input,input:not([type=checkbox],[type=radio],[type=file],[type=color],[type=range]),select,textarea){box-sizing:border-box;width:100%;background:var(--cd-white);color:var(--cd-text);border:2px solid var(--cd-border);border-radius:var(--cd-radius-control);font-size:1rem;font-weight:600;line-height:1.5;min-height:52px;padding:12px 16px;transition:border-color var(--cd-motion),box-shadow var(--cd-motion)}
[data-cdpro-ui] :is(.cd-input,input,select,textarea):focus{outline:0;border-color:var(--cd-navy);box-shadow:0 0 0 4px #112D4E14}
[data-cdpro-ui] :is(input,textarea)::placeholder{color:var(--cd-subtle);font-weight:500;opacity:1}
[data-cdpro-ui] label{font-size:.9375rem;font-weight:700}
[data-cdpro-ui] .cd-field{display:grid;gap:8px}
[data-cdpro-ui] .cd-field>span{font-size:.9375rem;font-weight:700;color:var(--cd-navy)}
[data-cdpro-ui] .cd-help{font-size:var(--cd-text-sm);color:var(--cd-muted);font-weight:500}
[data-cdpro-ui] .cd-error{font-size:var(--cd-text-sm);color:var(--cd-danger);font-weight:700}
[data-cdpro-ui] .cd-field.is-invalid :is(input,textarea,select){border-color:var(--cd-danger)}
/* interruptor */
[data-cdpro-ui] .cd-switch{appearance:none;width:50px;height:30px;border-radius:99px;background:#C5D1DD;position:relative;flex:none;cursor:pointer;transition:background var(--cd-motion)}
[data-cdpro-ui] .cd-switch::before{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0003;transition:transform var(--cd-motion)}
[data-cdpro-ui] .cd-switch:checked{background:var(--cd-navy)}
[data-cdpro-ui] .cd-switch:checked::before{transform:translateX(20px)}

/* ---------- escolhas ---------- */
/* opção com ícone (como o ofício no quiz) */
[data-cdpro-ui] .cd-option{display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 14px;border-radius:16px;border:2px solid var(--cd-border);background:var(--cd-white);font-weight:800;color:var(--cd-navy);text-align:left;cursor:pointer;transition:border-color var(--cd-motion),background var(--cd-motion)}
[data-cdpro-ui] .cd-option>.cd-icon-box{width:40px;height:40px;border-radius:12px;border:0}
[data-cdpro-ui] .cd-option:hover{border-color:var(--cd-border-strong)}
[data-cdpro-ui] .cd-option[aria-pressed=true]{border-color:var(--cd-navy);background:var(--cd-surface-tint)}
[data-cdpro-ui] .cd-option[aria-pressed=true]>.cd-icon-box{background:var(--cd-navy);color:var(--cd-yellow)}
/* etiqueta que liga e desliga (serviços) */
[data-cdpro-ui] .cd-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:var(--cd-radius-pill);border:2px solid var(--cd-border);background:var(--cd-white);font-weight:700;font-size:.9375rem;color:var(--cd-navy);cursor:pointer;transition:all var(--cd-motion)}
[data-cdpro-ui] .cd-chip[aria-pressed=true]{background:var(--cd-navy);border-color:var(--cd-navy);color:#fff}
[data-cdpro-ui] .cd-chip[aria-pressed=true] .cd-icon{color:var(--cd-yellow)}
/* alternância de duas ou três opções */
[data-cdpro-ui] .cd-segmented{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:16px;background:var(--cd-canvas);border:1px solid var(--cd-border)}
[data-cdpro-ui] .cd-segmented button{min-height:44px;padding:8px 16px;border:0;border-radius:12px;background:transparent;font-weight:800;color:var(--cd-muted);cursor:pointer}
[data-cdpro-ui] .cd-segmented button[aria-pressed=true],[data-cdpro-ui] .cd-segmented button[aria-selected=true]{background:var(--cd-white);color:var(--cd-navy);box-shadow:0 1px 0 var(--cd-border),0 6px 14px #112D4E14}

/* ---------- superfícies ---------- */
[data-cdpro-ui] .cd-panel{background:var(--cd-white);border:1px solid var(--cd-border);border-radius:var(--cd-radius-card);box-shadow:var(--cd-shadow-card);padding:var(--cd-space-6)}
[data-cdpro-ui] .cd-panel--navy{background:var(--cd-navy);border-color:var(--cd-navy);color:var(--cd-on-navy)}
[data-cdpro-ui] .cd-panel--navy :is(h1,h2,h3){color:#fff}
/* atalho grande (tela inicial do aplicativo) */
[data-cdpro-ui] .cd-tile{display:flex;align-items:center;gap:14px;width:100%;min-height:84px;padding:14px 16px;border-radius:var(--cd-radius-card);border:1px solid var(--cd-border);background:var(--cd-white);box-shadow:var(--cd-shadow-card);text-align:left;color:var(--cd-navy);cursor:pointer;transition:transform var(--cd-motion),border-color var(--cd-motion),box-shadow var(--cd-motion)}
[data-cdpro-ui] .cd-tile:hover{border-color:var(--cd-border-strong);box-shadow:0 10px 24px #112D4E14}
[data-cdpro-ui] .cd-tile:active{transform:scale(.985)}
/* linha de lista */
[data-cdpro-ui] .cd-row{display:flex;align-items:center;gap:14px;width:100%;min-height:72px;padding:14px 16px;background:var(--cd-white);border:0;border-bottom:1px solid var(--cd-border);text-align:left;color:var(--cd-navy);cursor:pointer}
[data-cdpro-ui] .cd-row:last-child{border-bottom:0}
[data-cdpro-ui] .cd-badge{display:inline-flex;gap:6px;align-items:center;background:var(--cd-selection);color:var(--cd-navy);border-radius:8px;font-size:var(--cd-text-sm);font-weight:700;line-height:1.4;padding:5px 10px}
[data-cdpro-ui] .cd-badge--gold{background:var(--cd-yellow);color:var(--cd-navy);border-radius:var(--cd-radius-pill);font-weight:800}
[data-cdpro-ui] .cd-badge--success{background:var(--cd-success-soft);color:var(--cd-success)}
[data-cdpro-ui] .cd-eyebrow{font-weight:800;font-size:var(--cd-text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--cd-muted)}
/* ícones: traço fino; em caixa escura com traço dourado para destaque de marca */
[data-cdpro-ui] .cd-icon{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-cdpro-ui] .cd-icon-box{display:grid;place-items:center;width:44px;height:44px;flex:none;background:var(--cd-surface-tint);border:1px solid var(--cd-border);border-radius:14px;color:var(--cd-navy)}
[data-cdpro-ui] .cd-icon-box--brand{background:var(--cd-navy);border-color:var(--cd-navy);color:var(--cd-yellow)}
[data-cdpro-ui] .cd-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--cd-yellow)}
/* progresso */
[data-cdpro-ui] .cd-progress{height:6px;border-radius:99px;background:var(--cd-canvas);overflow:hidden}
[data-cdpro-ui] .cd-progress>i{display:block;height:100%;border-radius:99px;background:var(--cd-navy);transition:width .5s var(--cd-motion)}
/* avisos */
[data-cdpro-ui] :is(.cd-notice,.notice){display:flex;gap:10px;align-items:flex-start;color:var(--cd-muted);background:var(--cd-surface-soft);font-size:.875rem;font-weight:600;border:1px solid var(--cd-border);border-radius:var(--cd-radius-control);padding:12px 14px}
[data-cdpro-ui] .cd-notice--warning{background:var(--cd-warning-soft);border-color:#EAD9A6;color:var(--cd-warning)}
[data-cdpro-ui] .cd-notice--success{background:var(--cd-success-soft);border-color:#CBE9D6;color:var(--cd-success)}

/* ---------- estrutura de aplicativo ---------- */
[data-cdpro-ui] .cd-topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 16px;padding-top:calc(8px + env(safe-area-inset-top,0px));background:#FFFFFFF2;backdrop-filter:blur(14px);border-bottom:1px solid var(--cd-border)}
[data-cdpro-ui] .cd-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-around;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));background:#FFFFFFF5;backdrop-filter:blur(14px);border-top:1px solid var(--cd-border)}
[data-cdpro-ui] .cd-tabbar a{flex:1;display:grid;justify-items:center;gap:3px;min-height:56px;padding:8px 4px;font-size:.8125rem;font-weight:700;color:var(--cd-muted);text-decoration:none;border-radius:12px;position:relative}
[data-cdpro-ui] .cd-tabbar a[aria-current=page]{color:var(--cd-navy)}
[data-cdpro-ui] .cd-tabbar a[aria-current=page]::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--cd-yellow)}
/* barra fixa de ação (salvar, pagar) */
[data-cdpro-ui] .cd-actionbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--cd-white);box-shadow:var(--cd-shadow-bar)}
/* aviso rápido */
[data-cdpro-ui] .cd-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);max-width:calc(100% - 32px);padding:12px 18px;border-radius:14px;background:var(--cd-navy);color:#fff;font-weight:700;font-size:.9375rem;box-shadow:var(--cd-shadow-float);opacity:0;pointer-events:none;transition:opacity var(--cd-motion),transform var(--cd-motion);z-index:60}
[data-cdpro-ui] .cd-toast.show{opacity:1;transform:translate(-50%,0)}
/* janela: no celular vem de baixo (folha), no computador fica centralizada */
[data-cdpro-ui] dialog{border:1px solid var(--cd-border);border-radius:var(--cd-radius-panel);box-shadow:var(--cd-shadow-float);background:var(--cd-white);color:var(--cd-text)}
/* Sem margem interna aqui: cada tela define a das suas janelas (zerar aqui fazia o texto encostar na borda). */
[data-cdpro-ui] dialog::backdrop{background:#081A2EA6;backdrop-filter:blur(3px)}
@media(max-width:640px){
 [data-cdpro-ui] dialog.cd-sheet{margin:auto 0 0;width:100%;max-width:none;max-height:92dvh;border-radius:26px 26px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px)}
}
[data-cdpro-ui] :is(.stage-tag,.plan-tag){font-size:.875rem;font-weight:600}

@media(hover:hover){
 [data-cdpro-ui] :is(.cd-button--primary,.primary):not(:disabled):hover{filter:brightness(1.03);transform:translateY(-1px)}
 [data-cdpro-ui] .cd-button--navy:not(:disabled):hover{background:var(--cd-navy-hover)}
 [data-cdpro-ui] :is(.cd-button--secondary,.secondary):not(:disabled):hover{border-color:var(--cd-border-strong);background:var(--cd-surface-soft)}
 [data-cdpro-ui] :is(.cd-button--quiet,.quiet):not(:disabled):hover{background:#EAF0F5;color:var(--cd-navy)}
}
@media(prefers-reduced-motion:reduce){[data-cdpro-ui] *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Respeita o tamanho de texto padrão escolhido no navegador. */
:root:has([data-cdpro-ui]){font-size:100%}

/* Ícone de assunto: quadrado colorido com traço branco, como nos ajustes do celular */
[data-cdpro-ui] .cd-topic{--topic:var(--cd-topic-perfil);background:var(--topic);color:#fff;border-radius:14px;box-shadow:inset 0 -2px 0 #0000001F}